Announcements

! Weather App due Friday night

! Midterm a week from Wds ! Open book, open notes ECS 89 ! Topics: HTML, CSS, Javascript, Objects, JSONp, SVG ! Today: ! SVG graphics ! CSS " Backgrounds, gradients " Controlling CSS with events " Hover, swipe 4/25

SVG – How? SVG is a program

! Zoom in and they still look sharp – you don’t see ! An SVG image defines the picture pixels appearing by a program, not as a collection of pixels. scalable ! Let’s try opening the svg file rain_icon.svg and reading the code.

! You can’t do that with a jpg or not png; they’re just a big array of scalable pixels, usually with some kind of ! Why is this good? compression.

Things to notice in the raindrop Drawing

! First, set up an svg element/object. This is like the

! Image was made with Sketch, a Mac app popular scrap of paper on which you can draw. with designers - https://www.sketchapp.com/ (0,0) ! Hence, it is not the simplest way to draw the raindrop…so don’t look too closely at this code!

! But notice: it is an XML format similar to HTML, with tags

! Raindrop is a path element, consisting of a moveto step (positioning the cursor initially) indicated by M, and then four curves, each indicated by a C ! (0,0) is at upper left corner; y-values increase down.

1 To make the SVG element… Design target

…

! From Lillian’s design

! Tags like this can go in your HTML file and contain ! Idea: use SVG to design special “submit” button at SVG drawing commands right of text box

! OR, you can add or subtract SVG elements from the ! Also, add SVG to put magnifying glass icon at right

DOM with Javascript ! Other approaches? ! OR, you can include an SVG file (like the raindrop) as an image, in the normal way

Drawing the end shape Drawing the shape

! First, make an SVG element. The element itself is // z means close up the shape ! Define a path to make shape – straight, around, straight, close

Write the SVG text over the shape Give the end-shape an onclick

submit ! You can add an “onclick” function to just about anything

! x and y position give lower left corner of text within ! Here we give the SVG element an onclick function, the SVG element which turns it into a funny-shaped button

! Font inherited from body? ! Right now it pops up an alert - what should it really do? ! Style everything with CSS – eg. choose colors!

! Make the text box and end-shape the same height, and get them to butt up against each other

! Put them both into a div and float it right

2 Gradients - from W3Schools Background image background: red; /*For browsers that do not support gradients* background-image: url("Background_Homepage.svg") background: --linear-gradient(red, yellow); /* 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow); /* 11.1 to ! Just give it the image 12.0 */ ! Image should be large enough to cover the whole background: -moz-linear-gradient(red, yellow); /* 3.6 to background 15 */ ! Can also “tile” small images to get repeating background: linear-gradient(red, yellow); /*Standard syntax*/ patterns. I love this kind of thing but it is not popular with designers. ! Not totally standard yet! So using lots of browser- specific versions

Other interaction events Alternatives

! Hover: behavior when the cursor is on the element. ! There are often multiple ways to get things done.

Specified in the CSS: ! There are several Javascript/CSS libraries for layout, including Boostrap, Flex and Foundation. svg#rightEnd:hover { fill: #779944;} ! Use them if you know them, but keep in mind that the midterm will include questions on layout using just CSS. ! Touch/swipe: works on cell phones and tablets. Fairly new. We won’t go into it, but a few years from now it will be standard.

Canvas instead of SVG CORS instead of JSONp

! Alternative to SVG: HTML5 Canvas element ! The technique we’ve been using, retrieving JSON ! a different drawing interface supported by most data in a script, is called JSONp browsers ! It is a little clunky ! a little easier to work with in Javascript ! A newer alternative is called CORS; it allows ! Not scalable somewhat more flexibility but it is not supported by ! Not that different many older browsers

! We’ll use SVG with the D3 animation API later, so it’s good to work with it now.

3