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

HTML5 and mobile: Mobile Academy at Apps World

HTML5 and mobile: Mobile Academy at Apps World

A high-level look at what the modern web platform offers for application developers


bruce lawson

October 21, 2013

More Decks by bruce lawson

Other Decks in Technology


  1. HTML5 and mobile Bruce Lawson, Opera Software

  2. 350 million active users dev.opera.com opera.com/smw

  3. Myths and Legends about HTML5

  4. Pah! Native already won “I think the biggest mistake that

    we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn’t there” Mark Zuckerberg
  5. On the other hand… “I’m actually, on long-term, really excited

    about [html5]. One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.” Mark Zuckerberg
  6. Failure of execution or strategy? “zuck should've built his mobile

    app in html rendered from php, with 40+ blocking script tags. oh wait, they did.” @brianleroux
  7. HTML5 makes your site better

  8. HTML5 is about mobile

  9. 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/
  10. 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
  11. HTML5 isn't “ready” .. but that doesn't matter

  12. None
  13. Interoperability

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

  15. None
  16. © 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/
  17. None
  18. None
  19. None
  20. HTML5 does not replace HTML 4.01

  21. HTML5 has more bling!

  22. “...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
  23. Webforms – more powerful form elements

  24. None
  25. standardise commonly-used rich form elements – without JavaScript

  26. 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
  27. None
  28. None
  29. Fewer clicks, thanks HTML5!

  30. <video>

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

  32. storage

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

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

    value; if (localStorage.key == '…') { … } …
  35. IndexedDB – domain's database in browser //Define a person var

    person = { name:name, email:email, created:new Date() } //Perform the add var request = store.add(person,1);
  36. Appcache

  37. Image: @jaffathecake See http://www.alistapart.com/articles/application- cache-is-a-douchebag/

  38. None
  39. navigator.registerServiceWorker("/*","/assets/v1/ctrl.js"). then( function(serviceWorker) { console.log("success!"); // window.location.reload() }, function(why) {

    console.error("Installing failed!:", why); });
  40. is it all safe to use, right now?

  41. None
  42. caniuse.com

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

  44. None
  45. None
  46. http://modernizr.com/ http://yepnopejs.com/ http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/

  47. https://github.com/Modernizr/Modernizr/wiki/HTML5- Cross-Browser-Polyfills

  48. NEWT New Exciting Web Technologies

  49. Responsive Web Design • CSS Media Queries • Viewport meta

    - to become CSS Device Adaptation ('Viewport in CSS') • CSS Flexbox
  50. WebGL JavaScript-generated 3D graphics without plug-ins.

  51. 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.
  52. 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.
  53. getUserMedia

  54. 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
  55. More ... • File API • Fullscreen API • Gamepad

    API • Pointer Lock API • Web Notifications • Calendar • Contacts
  56. Native or HTML5? • HTML is the Web, so works

    anywhere (JavaScript polyfills for old browsers) • HTML is simple to distribute and update – just a URL • Native allows you tighter device integration (for now) • Native is a little faster (does that matter?) • Native apps are easier to control/ monetise
  57. Hybrid apps PhoneGap is a trademark of Adobe. Open-sourced at

    Apache Cordova
  58. https://build.phonegap.com/

  59. 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
  60. None
  61. Resources • 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/ • 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/
  62. brucel@opera.com www.brucelawson.co.uk @brucel

  63. Thanks Cover (many devices) - http://www.flickr.com/photos/brad_frost/7387827018/in/set- 72157630163121422 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 Appcache diagram by Jake Archibald, @jaffathecake, used with permission PhoneGap images are copyright Adobe