An Intro to Mobile HTML5
12 likes7,886 views
This document provides an introduction to HTML5 and discusses the evolution of the web. It notes that the web is changing from a single device experience to a multi-device one, and from thin clients to thick applications. It shows how browser platforms and programming languages have diversified for smartphones. The document highlights how HTML5 is bringing new capabilities like geolocation, video, audio and graphics to the web in a standardized way. It encourages keeping up with browser support and using polyfills and frameworks. Finally, it speculates about how the mobile web may gain access to device APIs and become more like a mobile platform itself.
![<input type="file" id="picker"
accept="image/*"
capture="camera"
>
// camcorder
// microphone
// filesystem
var image = picker.files[0];](https://image.slidesharecdn.com/anintrotohtml5-111202102650-phpapp02/85/An-Intro-to-Mobile-HTML5-33-320.jpg)
An Intro to Mobile HTML5
- 1. An introduction to HTML 5 @ jamespearce
- 2. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents 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 Platforms August 2011, comScore MobiLens
- 5. C# J2ME/Air Java/C++ Obj-C Native programming languages you’ll need US Smartphones, August 2011
- 6. IE WebKit WebKit WebKit Browser platforms to target US 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
- 12. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing (all the elements of a modern application platform)
- 15. Are we nearly there yet?
- 16. IE Chrome Safari Firefox iOS BBX Android @font-face Canvas HTML5 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 hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
- 17. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
- 18. 100% Support Browsers Capabilities & specifications
- 19. 100% Support Browsers Polyfills Frameworks Capabilities & specifications
- 21. The classic web architecture request User interface Rendering response Business logic Storage server client
- 22. A new web architecture User interface sync API Business logic Storage Storage server client
- 23. But there is a a place for both
- 27. iOS 5 Input types contenteditable position:fixed classList XHR2 Script defer & async Inline SVG Web Workers
- 30. window.addEventListener('deviceorientation', function(e) { var heading = e.webkitCompassHeading + window.orientation; spinner.style.webkitTransform = 'rotateZ(-' + heading + 'deg)'; }, false);
- 31. Android 4 SVG at all CSS3 3D transforms classList XHR2 Script defer & async <details> & <summary> File reader Device orientation Navigation timing
- 33. <input type="file" id="picker" accept="image/*" capture="camera" > // camcorder // microphone // filesystem var image = picker.files[0];
- 34. We haven’t even started
- 35. What does the web look like when you have...
- 37. Media Capture (HTML) Media Capture (API) Battery status Application Registration Contacts Calendar Messaging (SMS, MMS...) Feature Permissions Network Information API Sensor API Vibration API Menu API Audio Volume Permissions for APIs Beep Gallery Systems info and events Tasks
- 38. Accelerometer APDU (SmartCard) Orientation Bluetooth Camera Crypto DeviceStatus DLNA Filesystem Server Push Messaging Sensor Geolocation Telephony PIM Contacts Calendar Tasks DeviceInteraction
- 40. Mobile device APIs - the web’s great leap forward
- 41. The mobile web becomes more than a 320px web
- 42. 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.)
- 43. built with Apps vs web technology