HTML5 for mobile

unevenfitterInternet και Εφαρμογές Web

20 Ιουν 2012 (πριν από 5 χρόνια και 11 μήνες)

574 εμφανίσεις

HTML5 for mobile
November 2011
by Taras Budurovych
1. HTML5 in mobile - introduction. Browsers. Sample.
2. Data storage in HTML5.
3. Offline web in HTML5.
4. Video for mobile in HTML5.
5. Cross-platform mobile app (native+browser).
6. Cross-platform mobile app (Appcelerator, PhoneGap).
7. Questions.
Oriented on the mobile and web developers.
Duration 90-120 minutes.
HTML5 - intro

proposed by Opera

specs started in 2004

specs editor from Google - Ian Hickson

W3C considers 2014 as HTML Recommendation

still under development

on Sep-2011 34% of top100 websites on HTML5

what's new in specs - custom data attributes, media
playback, canvas, more tags, offline storage, microdata,
cross-document messaging, geolocation, webstorage
(former cookies), File API.
- good source of demos and
logo of html5
HTML5 - mobile

when developing for mobile strongly advised to use

popular frameworks: jQuery Mobile, Sencha
Touch, jQTouch.

jQuery Mobile just released 1.0

3 pages website developed using jQuery Mobile -

HTML5 - browsers support

support differs by layout/rendering engine and by vendor

leading engines: Presto (Opera, Mobile), WebKit (Safari,
Chrome, Android browser, S60, BB), Gecko (Firefox),
Trident (IE, WP7)
- your browser HTML5 support, other

As of November 2011 according to leaders:

desktop - Chrome, FF, Safari

tablets - iOS5 (iPad), Opera Mobile, BB PlayBook

mobile - iOS (iPhone/iPod), MeeGo (Nokia N9), Opera

Chrome significantly ahead on desktop, Apple on portables
HTML5 - data storage

localStorage, and sessionStorage.

5-10MB per domain
(compare to 4KB cookies)


localStorage.setItem('key', 'value');


Web Sql Database page API. Not supported by IE, FF.
Uses Sqlite backend. Sample:

HTML5 - offline web

in a page - home.html -
<html manifest="cache.manifest">

browser expects

In cache manifest file listed what to be cached, fallback,

IE does not support


HTML5 - video on mobile

<video> - new HTML5 element

Youtube already has it using <video>

allows multiple sources, browser will choose

Initially default was Ogg container format and Theora
compression, but replaced (unknown patents)

Most commonly used: H.264/MPEG-4, Ogg, WebM. All
support streaming

WebM format (VP8, Vorbis audio) - by Google (acquired


Cross-platform mobile app

Can be built native app with the browser window

On Android WebView

Need to setup WebView - by default limited

here's apk -

Cross-platform mobile app

Target platforms - iOS, Android, BlackBerry, MacOS,
Windows, Linux. Titanuim Studio is IDE. Builds native apps

JavaScript + Titanium API (

here's apk -

Cross-platform mobile app

Open source mobile dev framework (by Nitobi)

Target platforms - iOS, Android, WebOS, Symbian, Bada,

Adobe officially announces the acquisition of Nitobi on 4th
October 2011

HTML5 full support