1 / 24

HTML5

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

latham
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. The best UI platform yet… HTML5

  2. 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!

  3. Outline • Introduction • HTML5 for HCI • Why choose HTML5? • <canvas> • WebGL • Multi-touch • Web SQL Database • Web Sockets • Better local file support • Offline support • Conclusion

  4. Introduction • Important to stay current in HCI • Browsers will eventually replace other UI platforms

  5. HTML5 for HCI • <audio> and <video> tags • <canvas>element • SVG • WebGL • Touch API Flash has been replaced

  6. Why HTML5? • HTML5 and javascript are interpreted • No compilation • Can test UI changes with a console window Firebug extension for Firefox

  7. Why HTML5? • Cross-platform • Most browsers (read: not IE) conform to the W3C standards • The same code works on PC, Mac, Linux

  8. Why HTML5? • Mobile device support

  9. 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

  10. <canvas> • Acts like a canvas • Can draw on it using vector functions • Lines • Rectangles • Paths • Arcs • Curves

  11. <canvas> • Or using raster functions • Copy from HTML element • <img> • <video> • Manipulate pixels directly • Image processing

  12. <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>

  13. <canvas> example

  14. WebGL • Native 3D rendering in the browser • Makes use of the same <canvas> element • Syntax is like OpenGL Lessons Quake II

  15. 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

  16. Web SQL Database • Can store relational data locally in the browser • Especially useful for offline apps (more later)

  17. 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’);});

  18. 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); } });});

  19. 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/

  20. Working with Files • Using Files in Web Applications

  21. 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

  22. Detect online/offline events // standard event listeners window.addEventListener("online", function() { ... }); window.addEventListener("offline", function() { ... });

  23. Recommendations • Use Firefox with Firebug • jQuery is a fantastic library! • HTML5 can be used for iOS apps too! • Ask for my last presentation slides

  24. 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

More Related