0
A Snapshot of the Mobile   HTML5 Revolution        @ jamespearce
The Pledge
Single device            Multi deviceSedentary user            Mobile user                                 *Declarative   ...
A badge for all these ways   the web is changing
HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while a...
WHATWG
What is an Application?
Consumption vs Creation?       Linkable?    User Experience?     Architecture?
WebSite       sites               Web               apps                       NativeApp                        apps      ...
MS     RIM                     Google        Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
C#       J2ME/Air                          Java/C++            Obj-CNative programming languages you’ll need              ...
IE WebKit                    WebKit     WebKitBrowser platforms to target       August 2011
There is no WebKit on Mobile                        - @ppk
But at least we are using     one language,      one markup,    one style system
One Stack
Camera       WebFont        Video      Audio     Graphics                                                              HTT...
The Turn
IE   Chrome   Safari   Firefox   iOS   BBX   Android            @font-face                 CanvasHTML5 Audio & Video      ...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
100%Support          Browsers                     Capabilities & specifications
100%Support          Browsers         Polyfills Frameworks                     Capabilities & specifications
<!DOCTYPE html><html>    <head>        <title>jQuery Mobile</title>        <script src="jq.js"></script><script src="jqm.j...
<!DOCTYPE html><html>    <head>        <title>Sencha Touch</title>        <script src="st.js"></script>        <link rel="...
One Web stack                  requestUser interface               Rendering                 responseBusiness logic   Stor...
An Alternative Web Stack                  User interface          sync  API             Business logicStorage             ...
But there is aa place for both
But...
HTML5 apps can’t match  native performance       (true, sometimes)
http://vimeo.com/30296006http://vimeo.com/30324079
Are HTML5 apps more e cient to develop?  (yes, in theory, but it’s early days)
24 dev-months          for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
12 further dev-monthsfor Android & BlackBerry  http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
...but moreengagementthanthe native app
Mobile HTML5   developmentlacks good tooling       (yes)
http://github.com/jamesgpearce/confess
Weinre
HTML5 appscan’t be monetized,can’t be distributed   (not a technology problem)
WebCompromise             sites                     Web                     apps                            Hybrid        ...
Camera       WebFont        Video      Audio     Graphics                                                              HTT...
Browser Camera       WebFont        Video      Audio          Graphics                                                    ...
Native Wrapper                                         WebView Camera       WebFont        Video      Audio     Graphics  ...
Native app storeshave a dirty secret
HTML5 apps   can’t accessdevice functionality      (goddamn it)
Native Wrapper                                         WebView Camera       WebFont        Video      Audio     Graphics  ...
Hybrid apps- the ultimate polyfill
PhoneGap^H^H^H Apache Callback    AppMobi   NimbleKit
Recent browser updates
iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
overflow: scroll;-webkit-overflow-scrolling: touch;
http://jamesgpearce.github.com/compios5/
Android 4SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNa...
window.performance
<input type="file" id="picker"    accept="image/*"    capture="camera">// camcorder// microphone// filesystemvar image = p...
The Prestige
Sir Isaac Newton
Three Laws of Motion(the universe works as we might expect it to)
Albert Michelson   Edward Morley
Light Travels at a        Constant Speed(the universe doesn’t work as we thought it would)
Relativistic Mechanics   Exploration  Classical Mechanics    Familiarity Quantum Mechanics       Exploration
The Web Today    is likePhysics in 1900
Mobileis our Michelson-Morley       Experiment
Apps or Sites? Responsive Design?  Browser diversity?   Mobile Context?     One Web?(an inability to answer these question...
What does the web look like when you have...
CameraMicrophone Contacts CalendarMessagingTelephony   NFC     ?
Media Capture (HTML)      Media Capture (API)Battery status            Application RegistrationContacts                  C...
Accelerometer       APDU (SmartCard)Orientation         BluetoothCamera              CryptoDeviceStatus        DLNAFilesys...
TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
The mobile web becomes more than a 320px web
window.addEventListener(   appointmentdue,   function(appt) {      if (device.near(WORK)) {        siri.remind(          c...
Mobile device APIs are   the web’s next great leap forward
James Pearce@ jamespearce
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
Upcoming SlideShare
Loading in...5
×

A Snapshot of the Mobile HTML5 Revolution

2,749

Published on

HTML5 Live conference, November 2011

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,749
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "A Snapshot of the Mobile HTML5 Revolution"

  1. 1. A Snapshot of the Mobile HTML5 Revolution @ jamespearce
  2. 2. The Pledge
  3. 3. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  4. 4. A badge for all these ways the web is changing
  5. 5. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki
  6. 6. WHATWG
  7. 7. What is an Application?
  8. 8. Consumption vs Creation? Linkable? User Experience? Architecture?
  9. 9. WebSite sites Web apps NativeApp apps Nativeness
  10. 10. MS RIM Google Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
  11. 11. C# J2ME/Air Java/C++ Obj-CNative programming languages you’ll need August 2011
  12. 12. IE WebKit WebKit WebKitBrowser platforms to target August 2011
  13. 13. There is no WebKit on Mobile - @ppk
  14. 14. But at least we are using one language, one markup, one style system
  15. 15. One Stack
  16. 16. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  17. 17. The Turn
  18. 18. IE Chrome Safari Firefox iOS BBX Android @font-face CanvasHTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity:Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchangeX-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  19. 19. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  20. 20. 100%Support Browsers Capabilities & specifications
  21. 21. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  22. 22. <!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
  23. 23. <!DOCTYPE html><html> <head> <title>Sencha Touch</title> <script src="st.js"></script> <link rel="stylesheet" href="st.css" /> <script type="text/javascript" charset="utf-8"> new Ext.Application({ launch: function() { var continents = new Ext.data.Store({ model: Ext.regModel(, {fields: [name, link]}), data: [ {name: North America, link:na}, {name: South America, link:sa}, {name: Europe, link:eu} ] }); new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: toolbar, title: Hello World, }], items: [{ xtype: list, store: continents, itemTpl: {name} }] }); } }); </script> </head><body></body></html>
  24. 24. One Web stack requestUser interface Rendering responseBusiness logic Storage server client
  25. 25. An Alternative Web Stack User interface sync API Business logicStorage Storage server client
  26. 26. But there is aa place for both
  27. 27. But...
  28. 28. HTML5 apps can’t match native performance (true, sometimes)
  29. 29. http://vimeo.com/30296006http://vimeo.com/30324079
  30. 30. Are HTML5 apps more e cient to develop? (yes, in theory, but it’s early days)
  31. 31. 24 dev-months for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  32. 32. 12 further dev-monthsfor Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  33. 33. ...but moreengagementthanthe native app
  34. 34. Mobile HTML5 developmentlacks good tooling (yes)
  35. 35. http://github.com/jamesgpearce/confess
  36. 36. Weinre
  37. 37. HTML5 appscan’t be monetized,can’t be distributed (not a technology problem)
  38. 38. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  39. 39. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  40. 40. Browser Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  41. 41. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  42. 42. Native app storeshave a dirty secret
  43. 43. HTML5 apps can’t accessdevice functionality (goddamn it)
  44. 44. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  45. 45. Hybrid apps- the ultimate polyfill
  46. 46. PhoneGap^H^H^H Apache Callback AppMobi NimbleKit
  47. 47. Recent browser updates
  48. 48. iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
  49. 49. overflow: scroll;-webkit-overflow-scrolling: touch;
  50. 50. http://jamesgpearce.github.com/compios5/
  51. 51. Android 4SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNavigation timing
  52. 52. window.performance
  53. 53. <input type="file" id="picker" accept="image/*" capture="camera">// camcorder// microphone// filesystemvar image = picker.files[0];
  54. 54. The Prestige
  55. 55. Sir Isaac Newton
  56. 56. Three Laws of Motion(the universe works as we might expect it to)
  57. 57. Albert Michelson Edward Morley
  58. 58. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  59. 59. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  60. 60. The Web Today is likePhysics in 1900
  61. 61. Mobileis our Michelson-Morley Experiment
  62. 62. Apps or Sites? Responsive Design? Browser diversity? Mobile Context? One Web?(an inability to answer these questions does not constitute an excuse not to innovate)
  63. 63. What does the web look like when you have...
  64. 64. CameraMicrophone Contacts CalendarMessagingTelephony NFC ?
  65. 65. Media Capture (HTML) Media Capture (API)Battery status Application RegistrationContacts CalendarMessaging (SMS, MMS...) Feature PermissionsNetwork Information API Sensor API Vibration API Menu APIAudio Volume Permissions for APIsBeepGallerySystems info and eventsTasks
  66. 66. Accelerometer APDU (SmartCard)Orientation BluetoothCamera CryptoDeviceStatus DLNAFilesystem Server PushMessaging SensorGeolocation TelephonyPIM ContactsCalendarTasksDeviceInteraction
  67. 67. TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
  68. 68. The mobile web becomes more than a 320px web
  69. 69. window.addEventListener( appointmentdue, function(appt) { if (device.near(WORK)) { siri.remind( contacts.get(Peter), calendar.getDetails(appt) ); } }, false); (PS: This code does not work. Yet)
  70. 70. Mobile device APIs are the web’s next great leap forward
  71. 71. James Pearce@ jamespearce
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×