• Like
An Intro to Mobile HTML5
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

An Intro to Mobile HTML5



Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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