Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India WEB: http://M10.IndicThreads.com ------------ Speaker: Romin Irani Abstract: 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.

1. 1
Mobile Web
Applications
using
HTML5
Romin Irani
Xoriant

2. 2
About Me
 Romin Irani
 Principal Architect @ Xoriant
 Current Areas of Interest
 Mobile Applications
 Cloud
 Web APIs
 Writer and Technical Reviewer :
http://www.oreillynet.com/pub/au/3731

3. 3
Agenda
 HTML5
 Mobile Application Landscape
 HTML5 + Mobile
 HTML5 Features & Demos
 HTML5 Mobile App – Walkthrough
 The Road Ahead

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
HTML5 Features
Semantic Elements
Forms
Drawing APIs
Video
Geolocation
Storage
Offline

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
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
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
HTML5 – New Semantic Elements
• <header>
• <nav>
• <section>
• <article>
• <footer>
• <aside>

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
HTML5 - Forms
 Input Types
 email
 phone
 url
date, datetime, month, week, time,
datetime-local)
 color
 search
 number and range

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
HTML5 - Forms
Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org

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
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
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
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
 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
 navigator.geolocation.getCurrentPosition
(showCurrentLocation,
errorHandler,
{enableHighAccuracy: true});
function
showCurrentLocation(position){
//position.coords.latitude
//position.coords.longitude;
}
HTML5 – Geolocation API

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
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
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
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
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
Other HTML5 features
 Web Workers
 Web Sockets
 CSS3
 IndexedDB

26. 26
Demo (http://m10indic.appspot.com)
• Indic Mobile Conference application
• Mobile Web application
• Works well with Webkit browsers
• Lets go !

27. 27
State of HTML5 – Recommendation
 Not everyone has a SmartPhone
 Differing browser support & behaviour
 Use sites like HTML5Test.com to
understand Browser support for HTML5
 Fallback behaviour is important
 Great time to get started today!!
 Be prepared for changes

28. 28
HTML5 – Start now !

29. 29
References
W3C :
http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks : http://www.html5rocks.com
Dive Into HTML5 : Mark Pilgrim :
http://diveintohtml5.org
http://introducinghtml5.com/
http://code.google.com/p/html5shiv/
Modernizr : http://www.modernizr.com/
https://github.com/Modernizr/Modernizr/wiki
/HTML5-Cross-browser-Polyfills

30. 30
Thank You
 Q & A
romin.k.irani
@
gmail.com
iRomin