HTML5 for mobile

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

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

574 εμφανίσεις

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