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.
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?)
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
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
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
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
IE9 Beta has started supporting some parts
HTML5 Guiding Principles:
Compatibility :
Utility :
Interoperability:
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
&lt;Video&gt; element dissection
Supports fallback
Autoplay
Preload
Controls
Poster
Height and Width
Src
navigator.geolocation
getCurrentPosition
watchPosition
Both the methods take same parameters
success function
error function
options
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