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

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

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

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

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);
Click on a Google Map (use autonymous function)
listener=google.maps.event.addListener(map,'click', function(event){ resetnow(event.latLng); });
Timing tid=setInterval(playback,20); See

15. Scalar Vector Graphics
Distinct way to describe hierarchy of paths and shapes
Special language
Can make dynamic
Compare

16. SVG Includes ability to specify Bezier curves See
Daddy Joe example:
Article:

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