create interfaces
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/1.jpg)
Create Interfaces
College exercise. Continue HTML5: HTML5 logo, drawing images. Coin
toss.Homework: acquire video & audio.
![Page 2: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/2.jpg)
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…
![Page 3: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/3.jpg)
Stakeholders
• system owner(s)
• system builder(s)
• system user(s)
The application owners have their own objectives.
![Page 4: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/4.jpg)
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.
![Page 5: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/5.jpg)
Compare objectives
• Amazon.com and customers
• New York Times and readers– are there other users?
• Facebook and members and advertisers
• ???
![Page 6: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/6.jpg)
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.
![Page 7: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/7.jpg)
HTML5 logo
• paths
• slider
• text on canvas
![Page 8: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/8.jpg)
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.
![Page 9: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/9.jpg)
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
![Page 10: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/10.jpg)
opening screen
![Page 11: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/11.jpg)
after mouse click
![Page 12: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/12.jpg)
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
![Page 13: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/13.jpg)
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.
![Page 14: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/14.jpg)
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;
![Page 15: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/15.jpg)
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);}
![Page 16: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/16.jpg)
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);}
![Page 17: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/17.jpg)
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!
![Page 18: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/18.jpg)
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.
![Page 19: Create Interfaces](https://reader036.vdocument.in/reader036/viewer/2022082817/56812ae8550346895d8ecef8/html5/thumbnails/19.jpg)
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.