HTML5 for mobile

unevenfitterInternet and Web Development

Jun 20, 2012 (4 years and 11 months ago)

561 views

HTML5 for mobile
November 2011
by Taras Budurovych
Plan
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.

http://html5demos.com/
- good source of demos and
samples
logo of html5
HTML5 - mobile

when developing for mobile strongly advised to use
frameworks

popular frameworks: jQuery Mobile, Sencha
Touch, jQTouch.

jQuery Mobile just released 1.0

3 pages website developed using jQuery Mobile -
http:
//demo.devcom.com/sandbox/html5/home.html

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)

http://html5test.com
- your browser HTML5 support, other
browsers

As of November 2011 according to html5test.com leaders:

desktop - Chrome, FF, Safari

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

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

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

localStorage, and sessionStorage.

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


Example

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

localStorage.getItem('key');

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
text/cache-manifest


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

IE does not support

Sample:


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
On2)

Sample:


Cross-platform mobile app
(native+browser)

Can be built native app with the browser window

On Android WebView

Need to setup WebView - by default limited

here's apk -
http://demo.devcom.com/sandbox/html5/apk/DevCom.Html5InBrowser.apk

Sample:
Cross-platform mobile app
(Appcelerator)

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

JavaScript + Titanium API (
http://developer.appcelerator.
com/apidoc/mobile/1.7.3/
)

here's apk -
http://demo.devcom.com/sandbox/html5/apk/DevCom.TitaniumTry.apk

Sample:
Cross-platform mobile app
(PhoneGap)

Open source mobile dev framework (by Nitobi)

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

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

HTML5 full support
Questions