An introduction to HTML 5        @ jamespearce
Single device            Multi deviceSedentary user            Mobile user                                 *Declarative   ...
A badge for all these ways   the web is changing
MS     RIM                     Google        Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
C#       J2ME/Air                          Java/C++            Obj-CNative programming languages you’ll need      US Smart...
IE  WebKit                    WebKit      WebKit Browser platforms to targetUS Smartphones, 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...
Are we nearly there yet?
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
The classic web architecture                  requestUser interface              Rendering                 responseBusines...
A new web architecture                 User interface          sync API             Business logicStorage             Stor...
But there is aa place for both
Recent developments
iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
overflow: scroll;-webkit-overflow-scrolling: touch;
http://jamesgpearce.github.com/compios5/
window.addEventListener(deviceorientation, function(e) {    var heading = e.webkitCompassHeading + window.orientation;    ...
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...
We haven’t even started
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
Mobile device APIs- the web’s great leap forward
The mobile webbecomes more than a    320px web
window.addEventListener(   appointmentdue,   function(appt) {      if (device.near(WORK)) {        siri.remind(          c...
built withApps vs web technology
James Pearce@ jamespearce
An Intro to Mobile HTML5
An Intro to Mobile HTML5
An Intro to Mobile HTML5
An Intro to Mobile HTML5
An Intro to Mobile HTML5
An Intro to Mobile HTML5
An Intro to Mobile HTML5
Upcoming SlideShare
Loading in...5
×

An Intro to Mobile HTML5

4,442

Published on

Published in: Technology, Art & Photos

An Intro to Mobile HTML5

  1. 1. An introduction to HTML 5 @ jamespearce
  2. 2. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  3. 3. A badge for all these ways the web is changing
  4. 4. MS RIM Google Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
  5. 5. C# J2ME/Air Java/C++ Obj-CNative programming languages you’ll need US Smartphones, August 2011
  6. 6. IE WebKit WebKit WebKit Browser platforms to targetUS Smartphones, August 2011
  7. 7. There is no WebKit on Mobile - @ppk
  8. 8. But at least we are using one language, one markup, one style system
  9. 9. One Stack
  10. 10. 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 (all the elements of a modern application platform)
  11. 11. Are we nearly there yet?
  12. 12. 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
  13. 13. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  14. 14. 100%Support Browsers Capabilities & specifications
  15. 15. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  16. 16. The classic web architecture requestUser interface Rendering responseBusiness logic Storage server client
  17. 17. A new web architecture User interface sync API Business logicStorage Storageserver client
  18. 18. But there is aa place for both
  19. 19. Recent developments
  20. 20. iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
  21. 21. overflow: scroll;-webkit-overflow-scrolling: touch;
  22. 22. http://jamesgpearce.github.com/compios5/
  23. 23. window.addEventListener(deviceorientation, function(e) { var heading = e.webkitCompassHeading + window.orientation; spinner.style.webkitTransform = rotateZ(- + heading + deg);}, false);
  24. 24. Android 4SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNavigation timing
  25. 25. window.performance
  26. 26. <input type="file" id="picker" accept="image/*" capture="camera">// camcorder// microphone// filesystemvar image = picker.files[0];
  27. 27. We haven’t even started
  28. 28. What does the web look like when you have...
  29. 29. CameraMicrophone Contacts CalendarMessagingTelephony NFC ?
  30. 30. 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
  31. 31. Accelerometer APDU (SmartCard)Orientation BluetoothCamera CryptoDeviceStatus DLNAFilesystem Server PushMessaging SensorGeolocation TelephonyPIM ContactsCalendarTasksDeviceInteraction
  32. 32. TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
  33. 33. Mobile device APIs- the web’s great leap forward
  34. 34. The mobile webbecomes more than a 320px web
  35. 35. 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.)
  36. 36. built withApps vs web technology
  37. 37. 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.

×