Breaking the Mobile Web with HTML5

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

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

where? Monday, September 12, 11

where? buenos aires ~ argentina Monday, September 12, 11

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

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

books Image from my house Monday, September 12, 11

Monday, September 12, 11

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

many of you have two questions for me Monday, September 12, 11

the ﬁrst answer is no Monday, September 12, 11

the second answer is yes Monday, September 12, 11

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

agenda Monday, 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 today Monday, September 12, 11

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

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

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

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

why mobile? Monday, September 12, 11

mobile devices are our ﬂying cars Monday, September 12, 11

mobile is more about users Monday, September 12, 11

mobile Monday, September 12, 11

mobile ‣ absolutely personal Monday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions Monday, September 12, 11

mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Monday, 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 Islands Monday, September 12, 11

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

we need to learn lots of questions Monday, September 12, 11

lots of platforms Monday, September 12, 11

mobile web appears Monday, September 12, 11

native vs web Monday, September 12, 11

WAIT! Monday, September 12, 11

Are you sure? Monday, September 12, 11

native code vs javascript Monday, September 12, 11

browser vs installed apps & stores Monday, September 12, 11

lack of deﬁnitions Monday, September 12, 11

when we say mobile web Monday, September 12, 11

when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps Monday, 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 producers Monday, September 12, 11

second class Monday, September 12, 11

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

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

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

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

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

Testing & debugging Monday, 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

html5 Monday, 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 standards Monday, September 12, 11

html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards Monday, 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 web Monday, September 12, 11

html5 Monday, September 12, 11

html5 today: Monday, September 12, 11

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

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

Modernizr • Inaccurate information - inlinesvg and webgl Monday, September 12, 11

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

let’s try to clarify Monday, September 12, 11

announcing today... Monday, September 12, 11

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

mobile browsers Monday, September 12, 11

mobile browsers ‣ too many Monday, September 12, 11

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

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

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

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

mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Monday, 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 tools Monday, September 12, 11

mobile browsers Monday, September 12, 11

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

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

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

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

mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Monday, 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 devs Monday, 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 list Monday, 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 Explorer Monday, 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 ‣ BOLT Monday, 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 Mini Monday, September 12, 11

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

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

pseudo-browsers Monday, September 12, 11

pseudobrowsers Monday, September 12, 11

pseudobrowsers ‣ mostly on iOS and Android Monday, September 12, 11

pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control Monday, 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 yet Monday, September 12, 11

mobile IE reborn Monday, September 12, 11

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

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

the WebKit problem Monday, September 12, 11

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

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

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

the WebKit problem Monday, September 12, 11

the WebKit problem ‣ do WebKit development for mobile Monday, September 12, 11

the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others Monday, 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 learn Monday, September 12, 11

forget about Monday, September 12, 11

forget about ‣ pixels Monday, September 12, 11

forget about ‣ pixels ‣ static designs Monday, 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 connected Monday, September 12, 11

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

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

forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users Monday, 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 conditionals Monday, September 12, 11

learn about Monday, September 12, 11

learn about ‣ server-side detection Monday, September 12, 11

learn about ‣ server-side detection ‣ progressive enhancement Monday, 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 usability Monday, September 12, 11

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

learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context Monday, 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 Monday, 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 loyalty Monday, September 12, 11

learn about Monday, September 12, 11

learn about ‣ what’s the viewport and how applies to our designs Monday, 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 screen 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 screen ‣ how background code works 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 screen ‣ how background code works ‣ data URI - inlining content Monday, September 12, 11

mobile web toolkit Monday, September 12, 11

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

friends lots of them Monday, September 12, 11

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

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

debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.com Monday, 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 appear Monday, September 12, 11

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

apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 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 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+ 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 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+ 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.0 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.0 ‣ IndexedDB - Firefox 6.0 Monday, 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 web Monday, September 12, 11

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

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

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

for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection Monday, 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 API 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 API ‣ Contacts and Calendar API 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 API ‣ Contacts and Calendar API ‣ Messaging API 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 API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock 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 API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock ‣ Debugging tools Monday, September 12, 11

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

working on these APIs... ‣ W3C Device APIs Working Group Monday, 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/WebAPI 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/WebAPI ‣ WAC 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/WebAPI WAC ‣ http://www.wacapps.net/ Monday, September 12, 11

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

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

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

can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks Monday, 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 webapps Monday, 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 advices Monday, September 12, 11

performance, performance Monday, September 12, 11

good practices Monday, September 12, 11

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

be multiplatform Monday, September 12, 11

best experience for every context Monday, 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

Breaking the Mobile Web with HTML5

You are reading a preview.

Check these out next

Breaking the Mobile Web with HTML5

More Related Content

Viewers also liked (20)

Similar to Breaking the Mobile Web with HTML5 (20)

More from Maximiliano Firtman (20)

Recently uploaded (20)