HTML5 for mobile

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

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

564 εμφανίσεις

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