1. Creating User Interfaces Recap HTML/HTML5 JavaScript features Homework: keep working on user observation studies. Review JavaScript

2. HTML5 & JavaScript semantic elements canvas video and audio localStorage Distinct from HTML5 geolocation and use of Google Maps API Scalar Vector Graphics

3. Aside Many sources I learn by doing examples and examining examples, so that is what I do here The final project is to be done in HTML and JavaScript – Teaching something. – You can specify the browser. – You can restrict yourself to [full] computer or not. It needs to be very good if you want to 'double dip' with mobile media.

4. Semantic elements To make document clearer for you and for teams Replacement for …. Need to format in the section Note: there are new CSS elements, including transformations

5. Style In element article {display:block; font-family:Impact, Charcoal, sans-serif; margin:20px;} Note: fonts with spaces in names need quotation marks: "Times New Roman" Names change when used by JavaScript – fontFamily, zIndex

6. canvas Rectangles Paths (including arcs): stroke or fill Images Frames from video Portions of other canvases Can also transform coordinates

7. Drawing on canvas canvasref = document.getElementById("mycanvas"); ctx = canvasref.getContext("2d"); var flower = Image(); flower.src="tulip.jpg"; ctx.drawImage(flower, potx, poty, 100,200); ctx.fillStyle="rgb(100,0,100)"; ctx.fillRect(300,200,120,200);

8. For your project You need to think if and how you are going to use canvas – One canvas element or multiple elements – Canvas elements in fixed location or moving around Way to do animation – Drawing and clearing and re-drawing, or not Way to do animation

9. Video and Audio Native support as opposed to requiring plugin Now: different in different browsers, but this can be managed by making multiple copies Dynamic control, including – Placing on screen – Starting and stopping Multiple video and/or audio elements or not May need to be concerned with time for downloading

10. Interlude Standard web applications are stateless. But, what if you want (need) to save information One approach: save small amount of data on the client computer. – cookies [Another approach, store data on the server – Formal database or something else – Commercial: Creating Databases for Web Applications, probably next Spring.

11. localStorage Like cookies: store information on client computer Accessed by program (document) from same site If (localStorage.oldlat) { var oldlat=Number(localStorage.oldlat); … } localStorage.oldlat = String(mylat);

12. Geolocation and Google Maps API Geolocation: returns location! Must be ok'ed by user unless all permission given. Can be used with Google Maps API – to bring in a map – Get a street address Can be combined with canvas

13. Geolocation Is not synchronous. That is, it is an asynchronous operation, setting up callbacks. Note: this is another example of event handling (see next chart) Your code sets up so that the browser performs a task and, depending on success or failure, the function you designate is invoked.

14. Events Mouse down on canvas canvas.addEventListener('mousedown',startreveal,true); http://faculty.purchase.edu/jeanine.meyer/html5/uncoverA.html – http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html Click on a Google Map (use autonymous function) listener=google.maps.event.addListener(map,'click', function(event){ resetnow(event.latLng); }); http://faculty.purchase.edu/jeanine.meyer/html5/geolocationlocalstorage.html Timing tid=setInterval(playback,20); See http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecor d.html http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecor d.html

15. Scalar Vector Graphics Distinct way to describe hierarchy of paths and shapes Special language Can make dynamic Compare – http://faculty.purchase.edu/jeanine.meyer/html5 /html5logoscalesvg.html http://faculty.purchase.edu/jeanine.meyer/html5 /html5logoscalesvg.html – http://faculty.purchase.edu/jeanine.meyer/html5 /html5logoscale.html http://faculty.purchase.edu/jeanine.meyer/html5 /html5logoscale.html

16. SVG Includes ability to specify Bezier curves See – Daddy Joe example: http://faculty.purchase.edu/jeanine.meyer/html5 /littlejoesvg2.html http://faculty.purchase.edu/jeanine.meyer/html5 /littlejoesvg2.html – Article: http://faculty.purchase.edu/jeanine.meyer/svgAu g2012.pdf http://faculty.purchase.edu/jeanine.meyer/svgAu g2012.pdf

17. More Examples Go to http://faculty.purchase.edu/jeanine.meyer/m orehtml5examples.html http://faculty.purchase.edu/jeanine.meyer/m orehtml5examples.html Pick examples to examine…

18. Advice Before plunging into coding, think about What are elements on screen – Dynamic versus static What are the states of the application – What information is to be stored and where What are the critical events – Your user (in this case, student) does something – Others

19. Homework Keep work on User Observation Study Keep reviewing HTML, HTML5 and JavaScript – Identify and post to the Sources and Sites forum a unique favorite site for JavaScript help and say what makes it good!