create interfaces

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

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

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.