Your SlideShare is downloading. ×
A Snapshot of the Mobile HTML5 Revolution
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A Snapshot of the Mobile HTML5 Revolution

2,680
views

Published on

HTML5 Live conference, November 2011

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,680
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Snapshot of the Mobile HTML5 Revolution @ jamespearce
  • 2. The Pledge
  • 3. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  • 4. A badge for all these ways the web is changing
  • 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. WHATWG
  • 7. What is an Application?
  • 8. Consumption vs Creation? Linkable? User Experience? Architecture?
  • 9. WebSite sites Web apps NativeApp apps Nativeness
  • 10. MS RIM Google Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
  • 11. C# J2ME/Air Java/C++ Obj-CNative programming languages you’ll need August 2011
  • 12. IE WebKit WebKit WebKitBrowser platforms to target August 2011
  • 13. There is no WebKit on Mobile - @ppk
  • 14. But at least we are using one language, one markup, one style system
  • 15. One Stack
  • 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. The Turn
  • 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. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  • 20. 100%Support Browsers Capabilities & specifications
  • 21. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  • 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. <!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. One Web stack requestUser interface Rendering responseBusiness logic Storage server client
  • 25. An Alternative Web Stack User interface sync API Business logicStorage Storage server client
  • 26. But there is aa place for both
  • 27. But...
  • 28. HTML5 apps can’t match native performance (true, sometimes)
  • 29. http://vimeo.com/30296006http://vimeo.com/30324079
  • 30. Are HTML5 apps more e cient to develop? (yes, in theory, but it’s early days)
  • 31. 24 dev-months for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  • 32. 12 further dev-monthsfor Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  • 33. ...but moreengagementthanthe native app
  • 34. Mobile HTML5 developmentlacks good tooling (yes)
  • 35. http://github.com/jamesgpearce/confess
  • 36. Weinre
  • 37. HTML5 appscan’t be monetized,can’t be distributed (not a technology problem)
  • 38. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  • 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. 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. 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. Native app storeshave a dirty secret
  • 43. HTML5 apps can’t accessdevice functionality (goddamn it)
  • 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. Hybrid apps- the ultimate polyfill
  • 46. PhoneGap^H^H^H Apache Callback AppMobi NimbleKit
  • 47. Recent browser updates
  • 48. iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
  • 49. overflow: scroll;-webkit-overflow-scrolling: touch;
  • 50. http://jamesgpearce.github.com/compios5/
  • 51. Android 4SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNavigation timing
  • 52. window.performance
  • 53. <input type="file" id="picker" accept="image/*" capture="camera">// camcorder// microphone// filesystemvar image = picker.files[0];
  • 54. The Prestige
  • 55. Sir Isaac Newton
  • 56. Three Laws of Motion(the universe works as we might expect it to)
  • 57. Albert Michelson Edward Morley
  • 58. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  • 59. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  • 60. The Web Today is likePhysics in 1900
  • 61. Mobileis our Michelson-Morley Experiment
  • 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. What does the web look like when you have...
  • 64. CameraMicrophone Contacts CalendarMessagingTelephony NFC ?
  • 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. Accelerometer APDU (SmartCard)Orientation BluetoothCamera CryptoDeviceStatus DLNAFilesystem Server PushMessaging SensorGeolocation TelephonyPIM ContactsCalendarTasksDeviceInteraction
  • 67. TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
  • 68. The mobile web becomes more than a 320px web
  • 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. Mobile device APIs are the web’s next great leap forward
  • 71. James Pearce@ jamespearce

×