Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Intro to Mobile HTML5


Published on

Published in: Technology, Art & Photos

An Intro to Mobile HTML5

  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.comDeviceAtlas
  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;
  23. window.addEventListener(deviceorientation, function(e) { var heading = e.webkitCompassHeading + window.orientation; = 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