1 / 19

Creating User Interfaces

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

Télécharger la présentation

Creating User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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!

More Related