Mobile Web Applications using HTML5 [IndicThreads Mobile Application Development Conference]


Published on

Session Presented at 1st Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India


Speaker: Romin Irani

HTML5 is expected to become mainstream soon. It brings a lot of new features that developers can incorporate today. The Webkit browser is currently the best implementation of the HTML5 standards and it is also available on a variety of Mobile devices like iPhone, Android, etc.

Mobile Web applications are getting powerful day by day. They have distinct advantages over Native mobile applications. With Webkit available on most Smartphone browsers, you can create powerful mobile web applications today. Combine this with some of the latest HTML5 features, and it makes a compelling alternative available to developers today.

This session will give an overview of :
a) What mobile web applications are and their pros / cons vis-a-vis Native Mobile applications.
b) HTML5 features like geolocation, offline storage, web workers, etc
c) How one can use HTML5 features mentioned in (b) to develop mobile web applications today.
d) Demonstrate all the above features via code samples.
e) Cover challenges involved in making sure that the same code base runs on all mobile browsers in a majority of Smartphones.

Takeaway for the audience:
a) Knowledge about upcoming HTML5 standards specifically features like geolocation, offline storage, web workers, etc.

b) Understand of Mobile Web applications and how we can use HTML5 standards to deliver powerful web applications that are delivered on most smartphones today.

c) Challenges involved in making sure that the Mobile Web Applications works well in most browsers across different devices.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • IE9 Beta has started supporting some parts
    HTML5 Guiding Principles:
    Compatibility :
    Utility :
    Universal Access : Languages support, Abilities
    Simplicity : Simpler DOCTYPE, Meta Tags.
    Plugin Free paradigm : Flash
  • Mobile devices are everywhere
    More users are connecting to the net via mobiles
    Smart phones allow us to do much more
    Every one wants a mobile application
    Application Stores
    Native Applications
    Installed on the device
    Can use all the platform APIs, interact with hardware
    Available through marketplace
    Native application
    Specific Tools and Languages
    ObjectiveC, Java, C++
    Cross Platform Tools (PhoneGap, Titanium, RhoMobile)
    Web application
    HTML5, CSS and Javascript
  • The power is being pushed back to the browser. The browser is getting more powerful. It is a known application to most users, in fact they are quite comfortable with it. App discoverability is also an issue.
    Explain the main complains against mobile web applications:
    Need network all the time
    Do not store enough data for offline access. Cookies are restrictive.
    How do we get hold of things like location
    Might not be able to play audio/video. Apple has banned Flash so how do we play Video?
  • Developing native applications for multiple platforms is a serious problem. Requires skills, most of the time porting, lots of testing. And huge differences in capabilities result in several workarounds or equalization/normalization. On the other hand, resources with Javascript, HTML and CSS can get started immediately with mobile web applications.
    Webkit plays a crucial role here since it has been adopted by most mobile browser vendors.
  • New Elements that bring structure to your documents.
    These elements are based on studies conducted looking at the markups from thousands of sites.
    E.g. Most people have a “nav” class to indicate navigation, so why not have a “nav” tag.
  • Normal form elements are still available like checkbox, text, button, radiobutton, password, textarea
  • Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
  • Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
  • Previously possible with Flash, VML, Silverlight
    Very complex to do in JavaScript without plugins (for example, rounded corners or diagonal lines)
    Provide native drawing functionality on the Web
    Completely integrated into HTML5 documents (part of DOM)
    Can be styled with CSS
    Can be controlled with JavaScript
  • <Video> element dissection
    Supports fallback
    Height and Width
  • navigator.geolocation
    Both the methods take same parameters
    success function
    error function
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Native applicatons have a big advantage of being installed on the device and available if network is not possible. Yes – not all functionality can be available but the user can use the application.
    Mobile applications if they want to be touted as good as native apps must support offline availability.
  • navigator.on/off events are only supported by few browsers : Firefox, Opera, IE
  • Mobile Web Applications using HTML5 [IndicThreads Mobile Application Development Conference]

    1. 1. 1 Mobile Web Applications using HTML5 Romin Irani Xoriant
    2. 2. 2 About Me  Romin Irani  Principal Architect @ Xoriant  Current Areas of Interest  Mobile Applications  Cloud  Web APIs  Writer and Technical Reviewer :
    3. 3. 3 Agenda  HTML5  Mobile Application Landscape  HTML5 + Mobile  HTML5 Features & Demos  HTML5 Mobile App – Walkthrough  The Road Ahead
    4. 4. 4 HTML5  WHAT : Next generation HTML  WHO : WHATG, W3C, IETF  WHEN : 2004, 2008, 2012 and 2022  2022  Is that a typo?  All vendors support it ! (Is that true?)
    5. 5. 5 HTML5 Features Semantic Elements Forms Drawing APIs Video Geolocation Storage Offline
    6. 6. 6 Current Mobile Dev Landscape Different Operating Systems Different Programming Environments Different Models for Distribution No dominant player Native vs Web application
    7. 7. 7 Why HTML5 for Mobile? – Part I  Provides powerful APIs to create near native like functionality  Location  Offline  Storage  Graphics functions  Media support  and much more ...
    8. 8. 8 Why HTML5 for Mobile? – Part II  Single source base for multiple device platforms  Excellent support for HTML5 in most mobile Web browsers. Improving by the day.  HTML5 + Mobile is a compelling alternative today.  Great chance to get started early.
    9. 9. 9 HTML5 – New Semantic Elements • <header> • <nav> • <section> • <article> • <footer> • <aside>
    10. 10. 10 HTML5 - Forms  Aims to make development and usage of forms easier.  13 New Types introduced for user input.  Additional attributes like : placeholder, required, autofocus.  Coding for validations is made easier.  Support varies across browsers but is compatible.
    11. 11. 11 HTML5 - Forms  Input Types  email  phone  url date, datetime, month, week, time, datetime-local)  color  search  number and range
    12. 12. 12 HTML5 - Forms <input type=“email” placeholder=“Enter email address” required autofocus/> <input type=“phone”/> <input type=“search” placeholder=“Type your search here”/> <input type=“url” /> <input type=“date” />
    13. 13. 13 HTML5 - Forms Screenshots : Courtesy – Mark Pilgrim,
    14. 14. 14 HTML5 - Canvas  2D Drawing API  Functions : line, arcs, rectangle, fills  Allows styling via CSS  Allows control via Javascript  Can be used for:  Charts, Animation, Images and other complex rendering.
    15. 15. 15 HTML5 - Video  Audio/Video is a first class citizen on the Web – finally ! No plugins required.  Simple tags : <video>, <audio>  Even Simpler usage: <video src=“demo.mp4”></video>  Control via APIs
    16. 16. 16 HTML5 – Video  Different browsers support different containers and Audio/Video formats.  Containers : H264 and Ogg  Codecs: Audio : AAC, MP3, Vorbis Video: H264, VP8, Thedora
    17. 17. 17 HTML5 – Video Solution  Need to provide more than 1 format.  Browser will play the one that it supports.  This situation is not likely to change.  <video controls>   <source src="mov1.ogg" type="video/ogg" />   <source src="mov2.mp4" type="video/mp4" /> </video>
    18. 18. 18  Determine where the device is. Find it right in the browser.  Useful for providing location based services.  User should be allowed to opt in.  API allows for both : one time location and continuous location. HTML5 – Geolocation API
    19. 19. 19  navigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true}); function showCurrentLocation(position){ //position.coords.latitude //position.coords.longitude; } HTML5 – Geolocation API
    20. 20. 20 HTML5 – Storage API  Allows local storage of application data on the device.  5MB per domain.  Key component to Offline usage.  Types of Storage options:
    21. 21. 21 HTML5 – Storage API : Local Storage  Simple API for storing values in easily retrievable JavaScript objects which persist across page loads  window.localStorage  getItem(key)  setItem(key,value)
    22. 22. 22 HTML5 – Storage API : Local Storage interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deleter void removeItem(in DOMString key); void clear(); };
    23. 23. 23 HTML5 – Offline Cache  Network is not available all the time.  The mobile application must be available even if the server is done.  Application Cache to the rescue.  Stores the specified resources (HTML,CSS,JS) on the client.  Combine Application Cache with Offline Storage to provide availability.
    24. 24. 24 HTML5 – Offline Cache  3 Steps to implementing AppCache  Define manifest  CACHE + NETWORK + FALLBACK  Reference manifest  Specify right manifest MIME Type in Server  Demo
    25. 25. 25 Other HTML5 features  Web Workers  Web Sockets  CSS3  IndexedDB
    26. 26. 26 Demo ( • Indic Mobile Conference application • Mobile Web application • Works well with Webkit browsers • Lets go !
    27. 27. 27 State of HTML5 – Recommendation  Not everyone has a SmartPhone  Differing browser support & behaviour  Use sites like to understand Browser support for HTML5  Fallback behaviour is important  Great time to get started today!!  Be prepared for changes
    28. 28. 28 HTML5 – Start now !
    29. 29. 29 References W3C : HTML5 Rocks : Dive Into HTML5 : Mark Pilgrim :   Modernizr :  /HTML5-Cross-browser-Polyfills
    30. 30. 30 Thank You  Q & A romin.k.irani @ iRomin