Upgrade to Pro — share decks privately, control downloads, hide ads and more …



HTML5: sprinkling magical pixie dust wherever it goes, Excellence in Software Engineering Conference 2012, Zurich

f you read the tech press or hysterical analysts, you'd be forgiven for thinking that HTML5 cures cancer, brings about world peace and turns water into beer (proper beer - the English stuff).

Bruce will harsh your mellow by exploding the myths and deflating the hype. We'll look at what HTML5 is really good for, where we are today and where we're going and look at when to go native and when to use HTML5.

No hype, no hysteria, just HTML5. And a little bit of pixie dust.


bruce lawson

April 24, 2012

More Decks by bruce lawson

Other Decks in Technology


  1. HTML5: sprinkling magical pixie dust wherever it goes Bruce Lawson

  2. www.speakerdeck.com/u/brucel/p/eseconf-zurich brucel@opera.com www.brucelawson.co.uk @brucel

  3. HTML5 makes your site better

  4. If your site is unusable, or an organisational vanity project

    rather than serving customers, HTML5 won't change that
  5. HTML5 is about mobile

  6. HTML5 is not just about mobile “Features should be designed

    for universal access. ... Features should, when possible, work across different platforms, devices, and media.” dev.w3.org/html5/html-design-principles/
  7. Analyst nonsense (with spurious statistics!) “While most new mobile browsers

    support HTML5, some older browsers still don’t.” “By 2016, more than 2.1 billion mobile devices will have HTML5 browsers, up from just 109 million in 2010.” articles.businessinsider.com/2012-03-29/tech/31253432_1_mobile-experience-mobile-developers- mobile-devices www.totaltele.com/view.aspx?ID=466497
  8. HTML5 isn't “ready” .. but that doesn't matter

  9. None
  10. Interoperability

  11. Thank you @mamipeko http://d.hatena.ne.jp/Mamipeko/

  12. None
  13. © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera

    Software ASA. You are granted a license to use, reproduce and create derivative works of this document. http://www.whatwg.org/specs/web-apps/current-work/
  14. None
  15. None
  16. None
  17. HTML5 does not replace HTML 4.01

  18. HTML5 has more bling!

  19. “...extending the language to better support Web applications, since that

    is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  20. Webforms – more powerful form elements

  21. None
  22. standardise commonly-used rich form elements – without JavaScript

  23. built-in validation (of course you should still validate on the

    server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31> <input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  24. None
  25. None
  26. Fewer clicks, thanks HTML5!

  27. <video>

  28. Must encode videos twice (thanks Apple and Microsoft!)

  29. storage

  30. localStorage/sessionStorage like cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010

    23:59:59 UTC; path=/' … /* convoluted string operations go here … */
  31. localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key =

    value; if (localStorage.key == '…') { … } …
  32. Web Database – full relational DB / SQL var db

    = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });
  33. Web Database – full relational DB / SQL var db

    = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });
  34. offline support

  35. application cache

  36. is it all safe to use, right now?

  37. None
  38. feature-detection progressive enhancement, graceful degradation http://diveinto.html5doctor.com/everything.html

  39. None
  40. None
  41. http://modernizr.com/ http://yepnopejs.com/ http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/

  42. NEWT New Exciting Web Technologies

  43. WebGL JavaScript-generated 3D graphics without plug-ins.

  44. Geolocation JavaScript API to get device's latitude and longditude, with

    user permission. Device Orientation Events: information about the physical orientation and motion of a hosting device.
  45. Web Sockets, Server-Sent Events Web Sockets – a 2-way connection

    to server that ends wasteful polling and minimises bandwidth-hogging headers. Think chat / multi-player games. Server-Sent Events allow you to push information to the browser without polling. Think latest headlines/ stock prices.
  46. Responsive Web Design

  47. getUserMedia http://my.opera.com/desktopteam/blog/2012/04/17/camera-getusermedia-support

  48. WebRTC WebRTC is a free, open project that enables web

    browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/ http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing- and-peer-to-peer-communication.html
  49. Native or HTML5? • HTML is the Web, so works

    anywhere JavaScript runs (with polyfills for old browsers) • HTML is simple to distribute and update – just a URL • Native allows you access to more device capabilities (for now) • Native is a little faster (does that matter?) • Native apps are easier to control/ monetise
  50. “When we update the Facebook product we have to update

    about seven different versions. We have to update the website that runs on your PC, the iPhone app, the Android app, the Blackberry app, the mobile site and a number of other device-specific versions of Facebook. It's becoming a real engineering challenge for us, as well as other technology companies. Because of that, I think we're spending a lot of our time investing in HTML 5.” Bret Taylor, Facebook CTO http://www.bbc.co.uk/news/business-12406171
  51. Golden Rules of HTML5 Development • Code to the standard,

    not browsers • Validate and test in desktop and mobile (use Opera Mobile Emulator and Opera Dragonfly) • Start with a base of valid, accessible HTML and progressively enhance • No browser-sniffing. Use feature detection. • Use all vendor prefixes in your CSS
  52. None
  53. Resources • These slides http://speakerdeck.com/u/brucel/p/eseconf-zurich • Browser support matrix www.caniuse.com

    • Modernizr www.modernizr.com • Polyfill collection https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills • HTML5 Spec (Web Developer's View) http://developers.whatwg.org/ • Articles: http://dev.opera.com/ • Articles: http://html5doctor.com/ • Mobile-friendly: The mobile web optimization guide http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ • Dragonfly, Opera Mobile Emulator http://www.opera.com/developer/tools/
  54. Thanks Fairy – Lisa Meek larissameek.com/2008/08/11/fairy-dust-a-free-desktop-wallpaper/ Brian May's site guide

    http://www.brianmay.com/siteguide.html Fingernails - Mamipeko NEWT + Shield - Rob Winters, Mike Brennan, W3C