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
HTML5The best UI platform yet…
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!
Outline Introduction HTML5 for HCI Why choose HTML5? <canvas> WebGL Multi-touch Web SQL Database Web Sockets Better local file support Offline support Conclusion
Introduction Important to stay current in HCI Browsers will eventually replace other UI
platforms
HTML5 for HCI <audio> and <video> tags
<canvas> element
SVG
WebGL
Touch API
Flash has been replaced
Why HTML5? HTML5 and javascript are interpreted
No compilationCan test UI changes with a console window
Firebug extension for Firefox
Why HTML5? Cross-platform
Most browsers (read: not IE) conform to the W3C standards
The same code works on PC, Mac, Linux
Why HTML5? Mobile device support
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
<canvas> Acts like a canvas Can draw on it using vector functions
LinesRectanglesPaths
○ Arcs○ Curves
<canvas> Or using raster functions
Copy from HTML element○ <img>○ <video>
Manipulate pixels directlyImage processing
<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>
<canvas> example
WebGL Native 3D rendering in the browser Makes use of the same <canvas>
element Syntax is like OpenGL
LessonsQuake II
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
Web SQL Database Can store relational
data locally in the browser
Especially useful for offline apps (more later)
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’);});
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);
}});
});
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/
Working with Files Using Files in Web Applications
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
Detect online/offline events// standard event listenerswindow.addEventListener("online", function() { ... });window.addEventListener("offline", function() { ... });
Recommendations Use Firefox with Firebug jQuery is a fantastic library! HTML5 can be used for iOS apps too!
Ask for my last presentation slides
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