HTML5

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

http://double.co.nz/video_test/video.svg




http://www.wiicade.com/playJSGame.aspx?gameID=1317&gameName=Coverfire



http://people.mozilla.com/~vladimir/demos/photos.svg

http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/

http://vimeo.com/13991139

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

http://ab.smtresearch.ca/sandbox.html

<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

http://learningwebgl.com/blog/?page_id=1217

http://googlecode.blogspot.com/2010/04/html5-quake-ii.html

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

https://developer.mozilla.org/en/Using_files_from_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

HTML5

Documents

firefoxwhy html5

ui platforms html5

web socketshtml

function tx

later web sql databasedb

web browser developers

var len

var row