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

Mobile Web Applications using HTML5 Romin Irani Xoriant

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

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

Why Mobile?
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

Types of Mobile applications
Native application
vs
Web application

Current Mobile Dev Landscape
Different Operating Systems
Different Programming Environments
Different Models for Distribution
No dominant player

Development approaches
Native application
Specific Tools and Languages
ObjectiveC, Java, C++
Cross Platform Tools (PhoneGap, Titanium, RhoMobile)
Web application
HTML5, CSS and Javascript

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 ...

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.

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?)

HTML5 - Principles
Compatibility
Utility
Interoperability
Universal Access
Simplify. Reduce Complexity
Plugin Free paradigm

HTML5 Features
Semantic Elements
Forms
Drawing APIs
Video
Geolocation
Storage
Offline

HTML5 – New Semantic Elements
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.

HTML5 – New Semantic Elements
<header>
<nav>
<section>
<article>
<footer>
<aside>

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.

HTML5 - Forms
Input Types
email
phone
url
date, datetime, month, week, time, datetime-local)
color
search
number and range

HTML5 - Forms
Examples
<input type=“email” placeholder=“Enter email address” required/>
<input type=“phone”/>

HTML5 - Forms Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org

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.

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

HTML5 – Video
Codecs is a problem
Different browsers support different containers and Audio/Video formats.
Containers : H264 and Ogg
Codecs:
Audio : AAC, MP3, Vorbis
Video: H264, VP8, Theora

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.
Example <video src= "videos/stunt.mp4" onclick="this.play();" controls/>

HTML5 – Geolocation API
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.

n avigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true});
function showCurrentLocation(position){
//position.coords.latitude //position.coords.longitude;
}

navigator.geolocation
getCurrentPosition
watchPosition
Both the methods take same parameters
success function
error function
options

HTML5 – Storage API
Allows local storage of application data on the device.
Several orders of magnitude better than Cookies
Types of Storage options:

HTML5 – Storage API : Local Storage
S imple API for storing values in easily retrievable JavaScript objects which persist across page loads
window.localStorage
getItem(key)
setItem(key,value)

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 (); };

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.

HTML5 – Offline Cache
3 Steps to implementing AppCache
Define manifest
Reference manifest
Specify right manifest MIME Type in Server
Demo

Other HTML5 features
Web Workers
Web Sockets
CSS3 support
IndexedDB

Demo
Indic Mobile Conference application
Mobile Web application
Works well with Webkit browsers
Lets go !

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

State of HTML5 – Need to balance
Everyone needs to coexist
HTML5 & Flash
Native and Mobile Web applications

References
WHATWG : http://www.whatwg.org/specs/web-apps/current-work/
W3C : http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks : http://www.html5rocks.com
Dive Into HTML5 : Mark Pilgrim : http://diveintohtml5.org
Introducing HTML5 : http://introducinghtml5.com/

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

http://www.rominirani.com	919
http://m10.indicthreads.com	13
http://www.lifeyun.com	12
http://localhost	5
http://wrttn.me	5

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

by IndicThreads

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 954

Statistics

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