html5
DESCRIPTION
The best UI platform yet…. HTML5. The WWW platform. W3C has been adding features to HTML M ajor browsers support the standards Latest version is HTML5 Has all of the power of native applications Plus more!. Outline. Introduction HTML5 for HCI Why choose HTML5? WebGL - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/1.jpg)
HTML5The best UI platform yet…
![Page 2: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/2.jpg)
The WWW platform W3C has been adding features to HTML Major browsers support the standards
Latest version is HTML5Has all of the power of native applicationsPlus more!
![Page 3: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/3.jpg)
Outline Introduction HTML5 for HCI Why choose HTML5? <canvas> WebGL Multi-touch Web SQL Database Web Sockets Better local file support Offline support Conclusion
![Page 4: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/4.jpg)
Introduction Important to stay current in HCI Browsers will eventually replace other UI
platforms
![Page 5: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/5.jpg)
HTML5 for HCI <audio> and <video> tags
<canvas> element
SVG
WebGL
Touch API
Flash has been replaced
![Page 6: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/6.jpg)
Why HTML5? HTML5 and javascript are interpreted
No compilationCan test UI changes with a console window
Firebug extension for Firefox
![Page 7: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/7.jpg)
Why HTML5? Cross-platform
Most browsers (read: not IE) conform to the W3C standards
The same code works on PC, Mac, Linux
![Page 8: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/8.jpg)
Why HTML5? Mobile device support
![Page 9: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/9.jpg)
Why HTML5? No need for software updates
Everyone sees the latest version
Development can be done anywhereNo need for special softwareJust a terminal and Firefox/Firebug
![Page 10: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/10.jpg)
<canvas> Acts like a canvas Can draw on it using vector functions
LinesRectanglesPaths
○ Arcs○ Curves
![Page 11: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/11.jpg)
<canvas> Or using raster functions
Copy from HTML element○ <img>○ <video>
Manipulate pixels directlyImage processing
![Page 12: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/12.jpg)
<canvas> example<html><head><script>function a() {
var c = document.getElementById(‘c’);var ctxt = c.getContext(‘2d’);ctxt.arc(50, 50, // Center of circle (x, y)25, // RadiusMath.PI / 2, // Start angle0, // End anglefalse // Counter-clockwise);ctxt.stroke();
}
</script></head><body onload=“a();”><canvas id=“c” height=“100” width=“200”></canvas></body></html>
![Page 13: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/13.jpg)
<canvas> example
![Page 14: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/14.jpg)
WebGL Native 3D rendering in the browser Makes use of the same <canvas>
element Syntax is like OpenGL
LessonsQuake II
![Page 15: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/15.jpg)
Multi-touch Gave this in last
presentation, but here’sa link to the tutorial
http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html
Works with iPad/iPhone/iPod and Windows 7 with Chrome & Firefox
![Page 16: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/16.jpg)
Web SQL Database Can store relational
data locally in the browser
Especially useful for offline apps (more later)
![Page 17: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/17.jpg)
Web SQL Databasedb = openDatabase(‘testDB’, // Name‘1.0’, // Version‘Testing database’, // User-friendly name1000000 // Maximum size (bytes));db.transaction(function(tx) {tx.executeSql(‘CREATE TABLE Foo (ID INT, Name TEXT)’);tx.executeSql(‘INSERT INTO Foo (ID, Name) Values(1, ‘bar’);});
![Page 18: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/18.jpg)
Web SQL Database
db.transaction(function(tx) {tx.executeSql('SELECT * FROM Foo', [], function (tx, results) {
var len = results.rows.length, i;for (i = 0; i < len; i++) {
var row = results.rows[i];alert(row.ID + ‘ – ‘ + row.Name);
}});
});
![Page 19: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/19.jpg)
Web Sockets HTML now allows persistent
connections with the server Real-time collaboration and
updates Examples:
Stock tickerChat roomWhite board
http://www.indicthreads.com/1525/building-real-time-web-applications-using-html-5-web-sockets/
![Page 20: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/20.jpg)
Working with Files Using Files in Web Applications
![Page 21: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/21.jpg)
Offline supportHTML File
<html manifest=“offline.manifest”>…
Offline.manifest contents (must have MIME type of text/cache-manifest)
CACHE MANIFESTstyles.cssjquery-1.4.min.jsoffline.jsindex.html
![Page 22: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/22.jpg)
Detect online/offline events// standard event listenerswindow.addEventListener("online", function() { ... });window.addEventListener("offline", function() { ... });
![Page 23: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/23.jpg)
Recommendations Use Firefox with Firebug jQuery is a fantastic library! HTML5 can be used for iOS apps too!
Ask for my last presentation slides
![Page 24: HTML5](https://reader036.vdocuments.us/reader036/viewer/2022081604/568162b3550346895dd33c74/html5/thumbnails/24.jpg)
Conclusions Let the web browser developers do all
the hard work Applications have never been more
easy with HTML5 Great features at a great price Develop without the need for bulky IDEs