Creating User Interfaces Font example. Server issues. Present video/audio examples. Discuss video and audio value-add. Stakeholders. HTML5 localStorage Homework: Make postings on usability heuristics.

Example of fonts You can acquire, upload to your site, and reference a { font-family: "Nevis"; src: url(nevis.ttf) format("truetype"); } Issue: you do need to wait for font to download. –alternate event Example uses text in h1 element (where there is a fallback font) and writing on canvas Example works on Firefox, not Chrome, not Windows Safari –I assume it works on Opera… canvas-font.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/ canvas-font.html

canvas { border:solid 1px red; display:block; { font-family: "Nevis"; src: url(nevis.ttf) format("truetype"); } h1 { font-family: "Nevis", sans-serif } window.addEventListener('load', function() { var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); var text = 'HTML'; ctx.font = 'bold 102px Nevis, sans-serif'; ctx.fillText(text, 102, 75); }, false); Canvas font test Canvas font test Fall back font

Notes The querySelector is more general than getElementById and can be used for all CSS type categories. The onload in body appears to work just as well…. html5/canvasfont3.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/canvasfont3.html Note: the quotations in the url("nevis.ttf") seem to be optional.

Not graceful degradation… Look at html5/defaultfont.html html5/defaultfont.html Browser can't find the "Boo" font and so goes directly to the fall-back. In contrast, Browser trying to get Nevis font may or may not use the default font. –See program in Windows Safari: goes to the default: sans-serif.

Server Server computer must be set up with a designated MIME type for each type of files. This is NOW done on students.purchase.edu for the video fonts. Please report on anything that works on local computer and not on server –MAKE SURE everything is uploaded!

Rotating star This star program uses an angle and so making it rotate was relatively easy. onepreciserotatingstar.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/ onepreciserotatingstar.html Note use of setInterval. This code generalizable to other shapes, including polygons. –See memory polygons game in book. orypolygons2.html orypolygons2.html

Alternate HTML5 has coordinate system for the canvas context. You can –save a coordinate system. –translate –rotate –scale –transform (full matrix transformation) –restore Note: I used translate and scale in html5logoscale: – ale.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5logosc ale.html

Present video and audio Discussion: HTML5 video and audio versus –Flash –link to YouTube –Quick Time movie –etc.

Discussion What is 'value add' of video and of audio to an application? [Note: I asked for you to do video and audio.] ??? Name place where video is essential / useful / helpful

Old conventional wisdom Do not put text on (OVER) screen. People would not accept … –small and smaller screens –tweets –requirement to type –Long download times This may be true. Techniques to let user know … –? Note: acceptance of asynchronous communication (e.g., ) came…Has it gone? – versus texting

Stakeholders Traditional division system owners system designers system builders system users Each has different goals/objectives.

Now More complex –layers of builders –layers of ownership –users doing much content generation but still necessary to recognize distinct objectives between owners and users and multiple, distinct classes of users. The ad model (grabbing eyeballs) is not new. Technologies support refined selection of target market.

Behavioral marketing Use of cookies, Web beacons, Flash sharedObject, and HTML5 localStorage means you can tracked based on behaviors. Do you mind?

Persistent storage Normal situation: no changes to client computer beyond downloaded files. cookies invented (with a pleasing name) to be files associated with each browser to be used only by same server site. –convenience: IDs and passwords, preferences, etc. –behavioral marketing! Early HTML supported cookies. localStorage is a new variation. CAUTION: Firefox requires the program to run on a server! Chrome allows running locally. p/wkshoplocalstoragetimes.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5worksho p/wkshoplocalstoragetimes.html

General idea localStorage items stored as name-value pairs of text. Stays around (persists) even when browser is closed. AGAIN: associated with browser and with specific website. Do time calculation using the getTime method on Date objects. Do calculation to round to seconds. Use typeOf and also try and catch to catch errors. –No time being stored is a situation that should be detected gracefully.

Local Storage test function compute() {…} function store() {…} function remove() {…} Store time. Compute elapsed time. Remove time stored.

function compute() { var oldinfo; var newdate = new Date(); var newtime = newdate.getTime(); var elapsed; if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { oldinfo= localStorage.getItem("lastused"); if (oldinfo==null) { alert("No time stored");} else { elapsed = Number(newtime)-Number(oldinfo); elapsed = Math.floor(.5+elapsed/1000); alert("Time difference: "+elapsed+" seconds.");} } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

function store() { var olddate; var oldtime; if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { olddate = new Date(); oldtime = olddate.getTime(); localStorage.setItem("lastused",oldtime); alert("Stored: "+oldtime+" milliseconds."); } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

function remove() { if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { localStorage.removeItem('lastused'); alert("Removed time stored."); } return false; }

More complex data Can use multiple name-value pairs. Can combine data: –use String to turn number into a string –use join to combine arrays of strings into one big string separated by a specified symbol onewall = w.join("+"); –THEN use split to take a string and split at specified symbol into array of pieces. wallstgs = swalls.split(";"); –use Number to turn string into number –See Building and storing mazes in book.

Classwork Using Chrome (or use Firefox and upload files), create your own simple localStorage application. Example (common pun on cookies): record name and name of favorite cookie.

Homework Post to Usability forum link to an article on usability check list, usability for the web, usability for mobile devices, usability heuristics AND your summary and opinion. Must be unique. Post a response to someone else's posting.