Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
Mobile Web
Applications
using
HTML5
Romin Irani
Xoriant
2
About Me
 Romin Irani
 Principal Architect @ Xoriant
 Current Areas of Interest
 Mobile Applications
 Cloud
 Web A...
3
Agenda
 HTML5
 Mobile Application Landscape
 HTML5 + Mobile
 HTML5 Features & Demos
 HTML5 Mobile App – Walkthrough...
4
HTML5
 WHAT : Next generation HTML
 WHO : WHATG, W3C, IETF
 WHEN : 2004, 2008, 2012 and 2022
 2022  Is that a typo?...
5
HTML5 Features
Semantic Elements
Forms
Drawing APIs
Video
Geolocation
Storage
Offline
6
Current Mobile Dev Landscape
Different Operating Systems
Different Programming Environments
Different Models for Dist...
7
Why HTML5 for Mobile? – Part I
 Provides powerful APIs to create near
native like functionality
 Location
 Offline
 ...
8
Why HTML5 for Mobile? – Part II
 Single source base for multiple device
platforms
 Excellent support for HTML5 in most...
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.
 Additio...
11
HTML5 - Forms
 Input Types
 email
 phone
 url
date, datetime, month, week, time,
datetime-local)
 color
 search
...
12
HTML5 - Forms
<input type=“email” placeholder=“Enter
email address” required autofocus/>
<input type=“phone”/>
<input t...
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 vi...
15
HTML5 - Video
 Audio/Video is a first class citizen on the
Web – finally ! No plugins required.
 Simple tags : <video...
16
HTML5 – Video
 Different browsers support different
containers and Audio/Video formats.
 Containers : H264 and Ogg
 ...
17
HTML5 – Video Solution
 Need to provide more than 1 format.
 Browser will play the one that it
supports.
 This situa...
18
 Determine where the device is. Find it
right in the browser.
 Useful for providing location based
services.
 User s...
19
 navigator.geolocation.getCurrentPosition
(showCurrentLocation,
errorHandler,
{enableHighAccuracy: true});
function
sh...
20
HTML5 – Storage API
 Allows local storage of application data
on the device.
 5MB per domain.
 Key component to Offl...
21
HTML5 – Storage API : Local Storage
 Simple API for storing values in easily
retrievable JavaScript objects which
pers...
22
HTML5 – Storage API : Local Storage
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(i...
23
HTML5 – Offline Cache
 Network is not available all the time.
 The mobile application must be
available even if the s...
24
HTML5 – Offline Cache
 3 Steps to implementing AppCache
 Define manifest
 CACHE + NETWORK + FALLBACK
 Reference man...
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 Web...
27
State of HTML5 – Recommendation
 Not everyone has a SmartPhone
 Differing browser support & behaviour
 Use sites lik...
28
HTML5 – Start now !
29
References
W3C :
http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks : http://www.html5rocks.com
Dive Into HTML5 ...
30
Thank You
 Q & A
romin.k.irani
@
gmail.com
iRomin
Upcoming SlideShare
Loading in …5
×

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

8,022 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

  1. 1. 1 Mobile Web Applications using HTML5 Romin Irani Xoriant
  2. 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. 3 Agenda  HTML5  Mobile Application Landscape  HTML5 + Mobile  HTML5 Features & Demos  HTML5 Mobile App – Walkthrough  The Road Ahead
  4. 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. 5 HTML5 Features Semantic Elements Forms Drawing APIs Video Geolocation Storage Offline
  6. 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. 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. 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. 9 HTML5 – New Semantic Elements • <header> • <nav> • <section> • <article> • <footer> • <aside>
  10. 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. 11 HTML5 - Forms  Input Types  email  phone  url date, datetime, month, week, time, datetime-local)  color  search  number and range
  12. 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. 13 HTML5 - Forms Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
  14. 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. 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. 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. 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. 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. 19  navigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true}); function showCurrentLocation(position){ //position.coords.latitude //position.coords.longitude; } HTML5 – Geolocation API
  20. 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. 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. 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. 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. 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. 25 Other HTML5 features  Web Workers  Web Sockets  CSS3  IndexedDB
  26. 26. 26 Demo (http://m10indic.appspot.com) • Indic Mobile Conference application • Mobile Web application • Works well with Webkit browsers • Lets go !
  27. 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. 28 HTML5 – Start now !
  29. 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. 30 Thank You  Q & A romin.k.irani @ gmail.com iRomin

×