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

1

Mobile Web Applications

using HTML5

Romin IraniXoriant

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

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

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

HTML5 FeaturesSemantic ElementsFormsDrawing APIsVideoGeolocationStorageOffline

6

Current Mobile Dev Landscape

Different Operating SystemsDifferent Programming EnvironmentsDifferent Models for DistributionNo dominant playerNative vs Web application

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

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

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

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

HTML5 - Forms Input Types

email phone url date, datetime, month, week, time,

datetime-local) color search number and range

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

HTML5 - Forms

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

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

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

HTML5 – Video Different browsers support different

containers and Audio/Video formats. Containers : H264 and Ogg Codecs:

Audio : AAC, MP3, VorbisVideo: H264, VP8, Thedora

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

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

navigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler,{enableHighAccuracy: true});

function showCurrentLocation(position){

//position.coords.latitude //position.coords.longitude;

}

HTML5 – Geolocation API

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

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

HTML5 – Storage API : Local Storageinterface 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

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

HTML5 – Offline Cache 3 Steps to implementing AppCache

Define manifest CACHE + NETWORK +

FALLBACK Reference manifest Specify right manifest MIME

Type in Server Demo

25

Other HTML5 features Web Workers Web Sockets CSS3 IndexedDB

26

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

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

HTML5 – Start now !

29

ReferencesW3C :

http://dev.w3.org/html5/spec/Overview.htmlHTML5 Rocks : http://www.html5rocks.comDive Into HTML5 : Mark Pilgrim :

http://diveintohtml5.orghttp://introducinghtml5.com/http://code.google.com/p/html5shiv/Modernizr : http://www.modernizr.com/https://github.com/Modernizr/Modernizr/

wiki/HTML5-Cross-browser-Polyfills

30

Thank You Q & A

romin.k.irani@

gmail.com

iRomin