mobile web applications using html5 [indicthreads mobile application development conference]
TRANSCRIPT
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