Download
1 / 24
240 likes | 671 Vues
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? <canvas> WebGL
E N D
The WWW platform • W3C has been adding features to HTML • Major 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? • <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 compilation • Can 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 anywhere • No need for special software • Just a terminal and Firefox/Firebug
<canvas> • Acts like a canvas • Can draw on it using vector functions • Lines • Rectangles • Paths • Arcs • Curves
<canvas> • Or using raster functions • Copy from HTML element • <img> • <video> • Manipulate pixels directly • Image processing
<canvas> example <html> <head> <script> function a() { varc = document.getElementById(‘c’); varctxt = c.getContext(‘2d’); ctxt.arc(50, 50, // Center of circle (x, y) 25, // Radius Math.PI / 2, // Start angle 0, // End angle false // Counter-clockwise ); ctxt.stroke(); } </script> </head> <body onload=“a();”> <canvas id=“c”height=“100”width=“200”></canvas> </body> </html>
WebGL • Native 3D rendering in the browser • Makes use of the same <canvas> element • Syntax is like OpenGL Lessons Quake II
Multi-touch • Gave this in lastpresentation, 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 Database db = openDatabase( ‘testDB’, // Name ‘1.0’, // Version ‘Testing database’, // User-friendly name 1000000 // 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) {varlen = 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 persistentconnections with the server • Real-time collaboration andupdates • Examples: • Stock ticker • Chat room • White 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 support HTML File <html manifest=“offline.manifest”>… Offline.manifestcontents (must have MIME type of text/cache-manifest) CACHE MANIFEST styles.css jquery-1.4.min.js offline.js index.html
Detect online/offline events // standard event listeners window.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
