Breaking the Mobile Web with HTML5

BREAKING THE MOBILE WEB Max Firtman @ﬁrt ﬁrt.mobi Sep, 12th, 2011 NashvilleMonday, September 12, 11

who am I? mobile+web developer mobilexweb.com blog @ﬁrtMonday, September 12, 11

where?Monday, September 12, 11

where? buenos aires ~ argentinaMonday, September 12, 11

where? buenos aires ~ argentina patagonia soccer meat & wine tangoMonday, September 12, 11

where? buenos aires ~ argentina patagonia true lies tango scene soccer meat & wine tangoMonday, September 12, 11

books Image from my houseMonday, September 12, 11

Monday, September 12, 11

Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevwMonday, September 12, 11

many of you have two questions for meMonday, September 12, 11

the ﬁrst answer is noMonday, September 12, 11

the second answer is yesMonday, September 12, 11

other projects Blog www.mobilexweb.com +40 links, +300 emulators www.mobilexweb.com/emulators typing long URLs on mobile? www.mobiletinyurl.comMonday, September 12, 11

agendaMonday, September 12, 11

agenda ‣ why?Monday, September 12, 11

agenda ‣ why? ‣ what’s the problem?Monday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here?Monday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers todayMonday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learnMonday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkitMonday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 todayMonday, September 12, 11

agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 today ‣ the futureMonday, September 12, 11

why mobile?Monday, September 12, 11

mobile devices are our ﬂying carsMonday, September 12, 11

mobile is more about usersMonday, September 12, 11

mobileMonday, September 12, 11

mobile ‣ absolutely personalMonday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billionsMonday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions ‣ make us focusMonday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context...Monday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always...Monday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere.Monday, September 12, 11

then... what is the problem?Monday, September 12, 11

mobile is a mineﬁeld Photo by World of Good (Flickr) Malvinas / Falklands IslandsMonday, September 12, 11

lots of questions Photo by wayneandwax (Flickr)Monday, September 12, 11

we need to learn lots of questionsMonday, September 12, 11

lots of platformsMonday, September 12, 11

mobile web appearsMonday, September 12, 11

native vs webMonday, September 12, 11

WAIT!Monday, September 12, 11

Are you sure?Monday, September 12, 11

native code vs javascriptMonday, September 12, 11

browser vs installed apps & storesMonday, September 12, 11

lack of deﬁnitionsMonday, September 12, 11

when we say mobile webMonday, September 12, 11

when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile appsMonday, September 12, 11

when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps (browser or installed)Monday, September 12, 11

what’s the problem with mobile web?Monday, September 12, 11

we are second class producersMonday, September 12, 11

second classMonday, September 12, 11

second class ‣vague, non-existent or outdated documentationMonday, September 12, 11

second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-partiesMonday, September 12, 11

second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samplesMonday, September 12, 11

second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer toolsMonday, September 12, 11

what? Updated: 02 Sep 2011Monday, September 12, 11

Testing & debuggingMonday, September 12, 11

Standards!Monday, September 12, 11

Photo by Ben Millett (Flickr)Monday, September 12, 11

Are you sure to be happy? Photo by Ricky David (Flickr)Monday, September 12, 11

What is ?Monday, September 12, 11

html5Monday, September 12, 11

html5 ‣ w3c standards (all in draft)Monday, September 12, 11

html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation)Monday, September 12, 11

html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standardsMonday, September 12, 11

html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standardsMonday, September 12, 11

html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the webMonday, September 12, 11

html5Monday, September 12, 11

html5 today:Monday, September 12, 11

html5 today: lack of real, good and practical information for mobile on the html5 communityMonday, September 12, 11

caniuse.com • Simpliﬁcation of the mobile web browser space • Inaccurate informationMonday, September 12, 11

Modernizr • Inaccurate information - inlinesvg and webglMonday, September 12, 11

html5test.com Not clear the html5 concept behind these testsMonday, September 12, 11

let’s try to clarifyMonday, September 12, 11

announcing today...Monday, September 12, 11

Photo by Ben Millett (Flickr)Monday, September 12, 11

mobile browsersMonday, September 12, 11

mobile browsers ‣ too manyMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limitedMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovativeMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a nameMonday, September 12, 11

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging toolsMonday, September 12, 11

mobile browsersMonday, September 12, 11

mobile browsers ‣ (some) focus-basedMonday, September 12, 11

mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedMonday, September 12, 11

mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedMonday, September 12, 11

mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedMonday, September 12, 11

mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportMonday, September 12, 11

mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devsMonday, September 12, 11

MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE!Monday, September 12, 11

a quick, dirty listMonday, September 12, 11

a quick, dirty list ‣ Safari on iOS ‣ Android Browser ‣ Nokia Browser for Symbian ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mobile ‣ Opera Mini ‣ Firefox ‣ Internet ExplorerMonday, September 12, 11

a quick, dirty list (cont.)Monday, September 12, 11

a quick, dirty list (cont.) ‣ Bada Browser ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Skyﬁre ‣ BOLTMonday, September 12, 11

they are on tablets too!Monday, September 12, 11

they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera MiniMonday, September 12, 11

and with diﬀerent versions...Monday, September 12, 11

and there’s more!Monday, September 12, 11

pseudo-browsersMonday, September 12, 11

pseudobrowsersMonday, September 12, 11

pseudobrowsers ‣ mostly on iOS and AndroidMonday, September 12, 11

pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web controlMonday, September 12, 11

pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have diﬀerent behavior than the native!Monday, September 12, 11

don’t give up yetMonday, September 12, 11

mobile IE rebornMonday, September 12, 11

mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5Monday, September 12, 11

mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5 ‣ but...Monday, September 12, 11

the WebKit problemMonday, September 12, 11

the WebKit problem ‣ we are doing some things wrongMonday, September 12, 11

the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit preﬁxMonday, September 12, 11

the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit preﬁx ‣ IE9, Firefox, Opera second-class citizensMonday, September 12, 11

the WebKit problemMonday, September 12, 11

the WebKit problem ‣ do WebKit development for mobileMonday, September 12, 11

the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the othersMonday, September 12, 11

the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others ‣ please?Monday, September 12, 11

we need to forget and learnMonday, September 12, 11

forget aboutMonday, September 12, 11

forget about ‣ pixelsMonday, September 12, 11

forget about ‣ pixels ‣ static designsMonday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always)Monday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connectedMonday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited powerMonday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the sameMonday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your usersMonday, September 12, 11

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users ‣ device conditionalsMonday, September 12, 11

learn aboutMonday, September 12, 11

learn about ‣ server-side detectionMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancementMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but....Monday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usabilityMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use casesMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each contextMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPOMonday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPO ‣ gain user loyaltyMonday, September 12, 11

learn aboutMonday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designsMonday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio)Monday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to ﬁx elements on screenMonday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to ﬁx elements on screen ‣ how background code worksMonday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to ﬁx elements on screen ‣ how background code works ‣ data URI - inlining contentMonday, September 12, 11

mobile web toolkitMonday, September 12, 11

emulators www.mobilexweb.com/emulatorsMonday, September 12, 11

friends lots of themMonday, September 12, 11

virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.comMonday, September 12, 11

device libraries detect devices and abilities from server-side manually tested www.wurﬂ.com www.deviceatlas.comMonday, September 12, 11

debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.comMonday, September 12, 11

performance tools just starting... http://stevesouders.com/mobileperf/Monday, September 12, 11

and what about capabilities today?Monday, September 12, 11

warning....Monday, September 12, 11

oﬄine installation HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine installation ‣ Install a package on the device HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine installation ‣ Install a package on the device ‣ Complex to debug / reload HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / oﬄine events HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / oﬄine events ‣ on iOS can be mixed with icons and full- screen webapp metatags HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11

geolocation Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

geolocation ‣ GPS, A-GPS, Wi-Fi, cells Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading ‣ once or movement Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage ‣ persistent and session storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage ‣ persistent and session storage ‣ key/value (strings) Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

oﬄine sql storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

oﬄine sql storage ‣ persistent and session storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

oﬄine sql storage ‣ persistent and session storage ‣ key/value (strings) deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

oﬄine sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

oﬄine sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

oﬄine sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11

multimedia API Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

multimedia API ‣ audio and video tags Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

multimedia API ‣ audio and video tags ‣ javascript api & events Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

multimedia API ‣ audio and video tags ‣ javascript api & events ‣ codecs nightmare Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11

server-sent events Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11

server-sent events ‣ EventSource Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11

server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11

server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets ‣ Evolution of bi-directional communication web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server ‣ standard changed months ago web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11

web workers web workers 6.0+ Mobile 11+ 6.0+Monday, September 12, 11

web workers ‣ threading in JavaScript web workers 6.0+ Mobile 11+ 6.0+Monday, September 12, 11

web workers ‣ threading in JavaScript ‣ important for performance web workers 6.0+ Mobile 11+ 6.0+Monday, September 12, 11

web workers ‣ threading in JavaScript ‣ important for performance ‣ worker without DOM manipulation web workers 6.0+ Mobile 11+ 6.0+Monday, September 12, 11

2d drawing api (canvas) HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

2d drawing api (canvas) ‣ great support HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

2d drawing api (canvas) ‣ great support ‣ javascript-based drawing HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

2d drawing api (canvas) ‣ great support ‣ javascript-based drawing ‣ (some) allows data URI export HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg ‣ old standard SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg ‣ old standard ‣ scalable vector graphics SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background ‣ (some) allows svg as font SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11

motion sensors DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

motion sensors ‣ accelerometer / gyroscope / magnetometer DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual eﬀects, pressure detection? DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual eﬀects, pressure detection? mobilexweb.com/samples/ball.html mobilexweb.com/samples/pressure.html DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11

new form controls HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

new form controls ‣ variable support HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

new form controls ‣ variable support ‣ basic=diﬀerent virtual keyboard HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

new form controls ‣ variable support ‣ basic=diﬀerent virtual keyboard ‣ medium=new date, number, range HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

new form controls ‣ variable support ‣ basic=diﬀerent virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

new form controls ‣ variable support ‣ basic=diﬀerent virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist ‣ (some) allows validation and css3 pseudo- classes HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11

touch events Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

touch events ‣ iOS speciﬁcation Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

touch events ‣ iOS speciﬁcation ‣ some diﬀerences between implementations Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

touch events ‣ iOS speciﬁcation ‣ some diﬀerences between implementations ‣ (some) multi-touch Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

touch events ‣ iOS speciﬁcation ‣ some diﬀerences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

touch events ‣ iOS speciﬁcation ‣ some diﬀerences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel ‣ (some) touchenter, touchleave Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11

css3 basic CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 basic ‣ basic new styling CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 basic ‣ basic new styling ‣ rounded borders, opacity CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires preﬁx CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires preﬁx ‣ -webkit, -o, -moz, -ms CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transforms ‣ basic 2d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix ‣ (some) 3d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11

css3 transitions CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 transitions ‣ basic animations between 2 states CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 transitions ‣ basic animations between 2 states ‣ preﬁx CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+Monday, September 12, 11

css3 animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11

css3 animations ‣ keyframe animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11

css3 animations ‣ keyframe animations ‣ attribute preﬁx and keyframe preﬁx CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11

css3 animations ‣ keyframe animations ‣ attribute preﬁx and keyframe preﬁx ‣ duplication :S CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11

what is just starting...?Monday, September 12, 11

apis starting to appearMonday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0 ‣ Network Information API - Android 2.2+Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0Monday, September 12, 11

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notiﬁcations API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0 ‣ IndexedDB - Firefox 6.0Monday, September 12, 11

and what to expect in the future?Monday, September 12, 11

for next year...Monday, September 12, 11

for next year... ‣ Augmented Reality on the webMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera APIMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathMLMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detectionMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detectionMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL)Monday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration APIMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar APIMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging APIMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation LockMonday, September 12, 11

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock ‣ Debugging toolsMonday, September 12, 11

working on these APIs...Monday, September 12, 11

working on these APIs... ‣ W3C Device APIs Working GroupMonday, September 12, 11

working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/Monday, September 12, 11

working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ ‣ Mozilla WebAPI eﬀort (3-6 months)Monday, September 12, 11

working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI eﬀort (3-6 months) ‣ https://wiki.mozilla.org/WebAPIMonday, September 12, 11

working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI eﬀort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI ‣ WACMonday, September 12, 11

working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI eﬀort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI WAC ‣ http://www.wacapps.net/Monday, September 12, 11

can i use apis today?Monday, September 12, 11

can i use apis today? ‣ PhoneGapMonday, September 12, 11

can i use apis today? ‣ PhoneGap http://www.phonegap.comMonday, September 12, 11

can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorksMonday, September 12, 11

can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/Monday, September 12, 11

can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webappsMonday, September 12, 11

can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webapps http://www.developer.nokia.com/Develop/Web/Monday, September 12, 11

some last advicesMonday, September 12, 11

performance, performanceMonday, September 12, 11

good practicesMonday, September 12, 11

don’t be fanatic photo by Kurt Christensen (ﬂickr)Monday, September 12, 11

be multiplatformMonday, September 12, 11

best experience for every contextMonday, September 12, 11

you can reach a good thank you! experience firt.mobi firtman@gmail.com twitter: @firt www.mobilexweb.com Pictures)from)freedigitalphotos.net)Monday, September 12, 11

http://xguru.net	1871
http://www.hanrss.com	463
http://feeds.feedburner.com	198
http://lanyrd.com	48
http://gw.datahouse.co.kr	38
http://paper.li	22
http://twitter.com	18
http://dntds.dyndns.org:8901	8
https://twitter.com	7
http://us-w1.rockmelt.com	6
http://feedproxy.google.com	2
http://newsrivr.com	1
http://gware.chunghocomnet.com	1
http://www.trunk.ly	1
http://tweetedtimes.com	1

Breaking the Mobile Web with HTML5

by Maximiliano Firtman on Sep 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 2,685

Statistics

Breaking the Mobile Web with HTML5 — Presentation Transcript