Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 7,442 views

Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India ...

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.

Statistics

Views

Total Views
7,442
Views on SlideShare
6,488
Embed Views
954

Actions

Likes
7
Downloads
316
Comments
0

5 Embeds 954

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Native Applications Installed on the device Can use all the platform APIs, interact with hardware Available through marketplace
  • Explain here about the pains of native application development. 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.
  • 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.
  • IE9 Beta has started supporting some parts
  • Compatibility : Utility : Interoperability: Universal Access : Languages support, Abilities Simplicity : Simpler DOCTYPE, Meta Tags. Plugin Free paradigm : Flash
  • 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
  • element dissection Supports fallback Autoplay Preload Controls Poster Height and Width Src
  • 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

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

  • 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 APIs
    • Writer and Technical Reviewer : http://www.oreillynet.com/pub/au/3731
  • 3. Agenda
    • Mobile Application Landscape
    • HTML5
    • HTML5 + Mobile
    • HTML5 Features & Demos
    • HTML5 Mobile App – Walkthrough
    • The Road Ahead
  • 4. 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
  • 5. Types of Mobile applications
    • Native application
      • vs
    • Web application
  • 6. Current Mobile Dev Landscape
    • Different Operating Systems
    • Different Programming Environments
    • Different Models for Distribution
    • No dominant player
  • 7. Development approaches
    • Native application
      • Specific Tools and Languages
        • ObjectiveC, Java, C++
      • Cross Platform Tools (PhoneGap, Titanium, RhoMobile)
    • Web application
      • HTML5, CSS and Javascript
  • 8. 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 ...
  • 9. 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.
  • 10. 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?)
  • 11. HTML5 - Principles
    • Compatibility
    • Utility
    • Interoperability
    • Universal Access
    • Simplify. Reduce Complexity
    • Plugin Free paradigm
  • 12. HTML5 Features
    • Semantic Elements
    • Forms
    • Drawing APIs
    • Video
    • Geolocation
    • Storage
    • Offline
  • 13. 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.
  • 14. HTML5 – New Semantic Elements
    • <header>
    • <nav>
    • <section>
    • <article>
    • <footer>
    • <aside>
  • 15. 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.
  • 16. HTML5 - Forms
    • Input Types
      • email
      • phone
      • url
      • date, datetime, month, week, time, datetime-local)
      • color
      • search
      • number and range
  • 17. HTML5 - Forms
    • Examples
    • <input type=“email” placeholder=“Enter email address” required/>
    • <input type=“phone”/>
  • 18. HTML5 - Forms Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
  • 19. 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.
  • 20. 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
  • 21. 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
  • 22. 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= &quot;videos/stunt.mp4&quot; onclick=&quot;this.play();&quot; controls/>
  • 23. 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.
  • 24. HTML5 – Geolocation API
    • n avigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true});
    • function showCurrentLocation(position){
    • //position.coords.latitude //position.coords.longitude;
    • }
  • 25. HTML5 – Geolocation API
    • navigator.geolocation
    • getCurrentPosition
    • watchPosition
    • Both the methods take same parameters
      • success function
      • error function
      • options
  • 26. HTML5 – Storage API
    • Allows local storage of application data on the device.
    • Several orders of magnitude better than Cookies
    • Types of Storage options:
  • 27. 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)
  • 28. 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 (); };
  • 29. 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.
  • 30. HTML5 – Offline Cache
    • 3 Steps to implementing AppCache
      • Define manifest
      • Reference manifest
      • Specify right manifest MIME Type in Server
    • Demo
  • 31. Other HTML5 features
    • Web Workers
    • Web Sockets
    • CSS3 support
    • IndexedDB
  • 32. Demo
    • Indic Mobile Conference application
    • Mobile Web application
    • Works well with Webkit browsers
    • Lets go !
  • 33. 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
  • 34. State of HTML5 – Need to balance
    • Everyone needs to coexist
      • HTML5 & Flash
      • Native and Mobile Web applications
  • 35. 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/
  • 36. Thank You
    • Q & A
    romin.k.irani @ gmail.com iRomin