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

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

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 (or Processing JS. Show next class.) Teaching something. You can specify the browser. You can restrict yourself to desktop computer or not. Getting something to work on mobile is a challenge.

Semantic elements To make document clearer for you and for teams Replacement for some uses of <div id="thing">….</div> Need to format in the <style> section Note: there are new CSS elements, including transformations

Style In <style> 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

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

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);

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

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

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.

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);

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

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.

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 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/eyesfollowrecord.html

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/html5logoscale.html

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

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

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

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! OR plan to do project using Processing, and then use Processing JS to make it run on browser.