Create Interfaces College exercise. Continue HTML5: HTML5 logo, drawing images. Coin toss. Homework: acquire video & audio.

Colleges Reactions? –make posting to Usability forum. Better late than never. Colleges also may suffer from contention on campus, that is, within organization. –Kissinger quote –multiple users with multiple goals PLUS…

Stakeholders system owner(s) system builder(s) system user(s) The application owners have their own objectives.

Alignment Owner of college site? –administration owns site. CTS (builder) controls content as per their specification? What are the objectives? Might be better fit than others.

Compare objectives Amazon.com and customers New York Times and readers –are there other users? Facebook and members and advertisers ???

Exercise Get in groups (tables) and pick 1 or 2 websites and discuss who are the owners and who are users (classes of users). Prepare to present.

HTML5 logo paths slider text on canvas

HTML5 logo html5logo.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5logo.html html5logoscale.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5logoscale.html –Note: try in Chrome and in Firefox. Note graceful degradation in Firefox that does not [yet] support the range/slider input element.

HTML5: coin flip Draw image from image file of head or tail on canvas where player clicks mouse –event handling: listen for mouse click –draw image made from external file Draw text (with directions) on canvas html5workshop/wkshopcoinflip.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/wkshopcoinflip.html

opening screen

after mouse click

Strategy Need to locate/identify file address for images –can be in same folder (use relative address) or use full URL Image objects with src attribute font set for context (ctx) event handling done for canvas element NOT context. Does require browser specific code to get mouse coordinates. (Sigh….) –use technique of checking for presence of attribute

Strategy, cont. Fonts are from what is available on the client computer. draw outline (strokeRect) to show player where canvas is. Alternative to color names or rgb is hexadecimal. –use PhotoShop or Paint Shop Pro Note that my code makes adjustment to put middle of image where mouse was clicked.

variables var ctx; var canvas1; var head = new Image(); var tail = new Image(); head.src = "head.gif"; tail.src = "tail.gif"; var coinwidth = 100; var coinheight = 100;

functions function init() { ctx = document.getElementById('canvas').getContext('2d'); canvas1 = document.getElementById('canvas'); canvas1.addEventListener('click',flip,false); ctx.font = "italic 20px Accent"; ctx.fillStyle = "#dd00ff"; ctx.strokeRect(0,0,600,400); ctx.fillText("Click on canvas to flip a coin.",10,20); }

function flip(ev) { var mx; var my; ctx.clearRect(0,0,600,400); if ( ev.layerX || ev.layerX == 0) { // Firefox mx= ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera mx = ev.offsetX; my = ev.offsetY; } if (Math.random()>.5) { ctx.drawImage(head,mx-50,my-50,coinwidth,coinheight); } else { ctx.drawImage(tail,mx-50,my-50,coinwidth,coinheight);} ctx.strokeRect(0,0,600,400); ctx.fillText("Click on canvas to flip a coin.",10,20); }

Comments You need to acquire two images to represent the coin faces. –download to same folder or use exact, complete address You can go into Word, or equivalent, to see available fonts. –more in book AND online. Go!

Next Combine drawing of text, image, rectangle, path (lines and/or arcs). Use click on canvas to place drawing. Use click of button (suitably labeled) to clear everything.

Homework Acquire (locate) video clip and audio clip. Next class: learn how to present video and audio using HTML5, no plugins! Assignment due February 28: –write/create tutorial for HTML5 feature. Use screen captures, links, etc. –possible inclusion in New Media blog.