Create Interfaces

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

2. 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…

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

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

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

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

7. HTML5 logo • paths • slider • text on canvas

8. HTML5 logo • http://faculty.purchase.edu/jeanine.meyer/html5logo.html • http://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.

9. 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 • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopcoinflip.html

10. opening screen

11. after mouse click

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

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

14. 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;

15. 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); }

16. 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); }

17. 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!

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

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