Creating User Interfaces

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 <div id="thing">….</div> • Need to format in the <style> section • Note: there are new CSS elements, including transformations

5. Style • In <style> elementarticle {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 canvascanvas.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 • Timingtid=setInterval(playback,20);See http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecord.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/html5logoscale.html

16. 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

17. More Examples • Go to http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.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!