Creating User Interfaces

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. @font-face { 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… • http://faculty.purchase.edu/jeanine.meyer/html5/canvas-font.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> canvas { border:solid 1px red; display:block; } @font-face { font-family: "Nevis"; src: url(nevis.ttf) format("truetype"); } h1 { font-family: "Nevis", sans-serif } </style> <script> 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); </script> <title>Canvas font test</title> </head> <body> <h1>Canvas font test</h1> <canvas width="512" height="512"></canvas> </body> </html> 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…. • http://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 http://faculty.purchase.edu/jeanine.meyer/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. • http://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.http://faculty.purchase.edu/jeanine.meyer/html5/memorypolygons2.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: • http://faculty.purchase.edu/jeanine.meyer/html5logoscale.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., email) came…Has it gone? • email 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. • http://faculty.purchase.edu/jeanine.meyer/html5workshop/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.

<html> <head><title>Local Storage test</title> <script> function compute() {…} function store() {…} function remove() {…} </script> </head> <body> <button onClick="javascript:store();">Store time. </button> <button onClick="javascript:compute();">Compute elapsed time. </button> <button onClick="javascript:remove();"> Remove time stored. </button> </body>

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.

Creating User Interfaces