JSConf - Mobile HTML5

Maximiliano Firtman @firtmobile+web developer

MOBILE HTML5 & THE NEW APIS

May, 19th, 2012Buenos Aires, AR

Monday, May 21, 12

http://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promise













mobile+web developer

mobilexweb.com

who am I? @firt

Monday, May 21, 12

speaker

Monday, May 21, 12

Monday, May 21, 12

Cursos y Libros

HTML5Android

iOSBlackBerry

Windows Phone

ITMaster.com.ar @ITMasterCursos

Monday, May 21, 12

ITMaster.com.ar@ITMasterCursos

Monday, May 21, 12

Image from my house

books

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

.com

Monday, May 21, 12

Monday, May 21, 12

mobile...

Monday, May 21, 12

mobile

Monday, May 21, 12

mobile

‣ absolutely personal

Monday, May 21, 12

mobile

‣ absolutely personal‣ +5 billions

Monday, May 21, 12

mobile

‣ absolutely personal‣ +5 billions‣ make us focus

Monday, May 21, 12

mobile

‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...

Monday, May 21, 12

mobile

‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...‣ ... always...

Monday, May 21, 12

mobile

‣ absolutely personal‣ +5 billions‣ make us focus‣ read our context...‣ ... always...‣ ... and everywhere.

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

everybodywantsmobile

Monday, May 21, 12

then... what is the problem?

Monday, May 21, 12

mobile is a minefield

Photo by World of Good (Flickr) Malvinas / Falklands Islands

Monday, May 21, 12

lots of questions

Photo by wayneandwax (Flickr) Monday, May 21, 12

lots of questions

we need to learn

Monday, May 21, 12

lots of platformsMonday, May 21, 12

mobile web appears

Monday, May 21, 12

but it’s different

Monday, May 21, 12


‣ slower networks

Monday, May 21, 12


‣ slower networks‣ higher latency

Monday, May 21, 12


‣ slower networks‣ higher latency‣ slower hardware

Monday, May 21, 12


‣ slower networks‣ higher latency‣ slower hardware‣ different browsing experience

Monday, May 21, 12


‣ slower networks‣ higher latency‣ slower hardware‣ different browsing experience‣ different context

Monday, May 21, 12


‣ slower networks‣ higher latency‣ slower hardware‣ different browsing experience‣ different context‣ different behaviors

Monday, May 21, 12


‣ slower networks‣ higher latency‣ slower hardware‣ different browsing experience‣ different context‣ different behaviors‣ different possible networks

Monday, May 21, 12

mobile browsers

Monday, May 21, 12

mobile browsers‣ too many

Monday, May 21, 12

mobile browsers‣ too many‣ (some) too limited

Monday, May 21, 12

mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative

Monday, May 21, 12

mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based

Monday, May 21, 12

mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based‣ (most) without documentation

Monday, May 21, 12

mobile browsers‣ too many‣ (some) too limited‣ (some) too innovative‣ (some) proxy based‣ (most) without documentation‣ (most) without a name

Monday, May 21, 12

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, May 21, 12

mobile browsers

Monday, May 21, 12

mobile browsers

‣ (some) focus-based

Monday, May 21, 12

mobile browsers

‣ (some) focus-based‣ (some) cursor-based

Monday, May 21, 12

mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based

Monday, May 21, 12

mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based

Monday, May 21, 12

mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based‣ (some) with zooming support

Monday, May 21, 12

mobile browsers

‣ (some) focus-based‣ (some) cursor-based‣ (some) touch-based‣ (some) multitouch-based‣ (some) with zooming support‣ (most) unknown for web devs

Monday, May 21, 12

some are known

Monday, May 21, 12

some are known

‣ Safari (on iOS)

‣ Opera Mobile (on Android & Symbian)

‣ Firefox (on Android)

‣ Chrome (on Android)

‣ Internet Explorer (on Windows Phone)

Monday, May 21, 12

some are unknown

Monday, May 21, 12

some are unknown‣ Nokia Browser (on Symbian, S40 & Meego 1.2)‣ BlackBerry Browser ‣ Android Browser‣ webOS Browser ‣ Amazon Silk‣ Bada Browser‣ Opera Mini‣ NetFront‣ Phantom‣ ...

Monday, May 21, 12

and with different versions...

Monday, May 21, 12

and we can also create native apps

-such as phonegap-

Monday, May 21, 12

nativevs

web

Monday, May 21, 12

native codevs

javascript

Monday, May 21, 12

browservs

installed apps& stores

Monday, May 21, 12

what is native?

Monday, May 21, 12

what is a webapp?

Monday, May 21, 12

standars?

Monday, May 21, 12

Photo by Ben Millett (Flickr) Monday, May 21, 12

Monday, May 21, 12

Are you sure?

Photo by Ricky David (Flickr) Monday, May 21, 12

What is ?

Monday, May 21, 12

html5

Monday, May 21, 12

html5

‣ w3c standards (all in draft)

Monday, May 21, 12

html5

‣ w3c standards (all in draft)‣ some are other w3c standards

Monday, May 21, 12

html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards

Monday, May 21, 12

html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards‣ w3c ex-standards

Monday, May 21, 12

html5

‣ w3c standards (all in draft)‣ some are other w3c standards ‣ de-facto standards‣ w3c ex-standards‣ everything “new” on the web

Monday, May 21, 12

html version 5?

Monday, May 21, 12

why mobile html5?

Monday, May 21, 12

typeof html5 != boolean

Monday, May 21, 12

some features safe

Monday, May 21, 12

some features only on few platforms

Monday, May 21, 12

some features experimental

Monday, May 21, 12

some features with prefixes

Monday, May 21, 12

and what aboutcapabilities today?

Monday, May 21, 12

Monday, May 21, 12

vendors hate developers

Monday, May 21, 12

emulators www.mobilexweb.com/emulators

Monday, May 21, 12

http://www.mobilexweb.com/emulators


friends

lots of them

and with different devices

Monday, May 21, 12

virtual labs

real devices on real networks

www.perfectomobile.com www.deviceanywhere.com

Monday, May 21, 12





debugging tools

Remote Web Inspector

• BlackBerry Smartphones 7• BlackBerry PlayBook• Google Chrome for Android 4• Opera Mobile

Monday, May 21, 12

debugging tools

iwebinspector.comMonday, May 21, 12



debugging tools

adobe.com/go/shadow

Adobe Shadow

Monday, May 21, 12

users hate developers

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Picture from Simon Howden freedigitalphotos.net!

mobile web

is slow

Monday, May 21, 12

JS APIs haveevolved

Monday, May 21, 12

why?

Monday, May 21, 12

Monday, May 21, 12

mobile html5 capabilities

offline & data storagegeolocationhardware: motion, camera, batterydrawing apisanimations and transitionsphone integration: calls, contactstouch and gesture events

Monday, May 21, 12

app.ft.com

Monday, May 21, 12

native web apps

Monday, May 21, 12

Boot2Gecko (B2G)

Monday, May 21, 12

Monday, May 21, 12

architecture

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

Monday, May 21, 12

let’s see some code

Monday, May 21, 12

Monday, May 21, 12

offline installation

HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+

Monday, May 21, 12

offline installation‣ Install a package on the device

HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+

Monday, May 21, 12

offline installation‣ Install a package on the device‣ Complex to debug / reload

HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+

Monday, May 21, 12

offline 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, May 21, 12

offline installation‣ Install a package on the device‣ Complex to debug / reload‣ Buggy on some platforms‣ online / offline events

HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+

Monday, May 21, 12

offline installation‣ Install a package on the device‣ Complex to debug / reload‣ Buggy on some platforms‣ online / offline 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, May 21, 12

geolocation

Geolocation 2.0+ 2.0+ 6.0+ Mobile 11+ 5.0+9.0+

Monday, May 21, 12

geolocation

‣ GPS, A-GPS, Wi-Fi, cells


Monday, May 21, 12

geolocation

‣ GPS, A-GPS, Wi-Fi, cells‣ (some) force GPS “highAccuracy”


Monday, May 21, 12

geolocation

‣ GPS, A-GPS, Wi-Fi, cells‣ (some) force GPS “highAccuracy”‣ (some) heading


Monday, May 21, 12

geolocation

‣ GPS, A-GPS, Wi-Fi, cells‣ (some) force GPS “highAccuracy”‣ (some) heading‣ once or movement


Monday, May 21, 12

offline web storage

Web Storage 2.0+ 2.0+ 6.0+ Mobile 11+ 5.0+9.0+

Monday, May 21, 12

offline web storage

‣ persistent and session storage


Monday, May 21, 12

offline web storage

‣ persistent and session storage‣ key/value (strings)


Monday, May 21, 12

offline web storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage


Monday, May 21, 12

offline web storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage‣ limit space, non-standard ~5Mb


Monday, May 21, 12

offline web storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage‣ limit space, non-standard ~5Mb‣ be careful with private browsing


Monday, May 21, 12

offline sql storage

deprecated 2.2+ 2.0+ 6.0+ Mobile 11+

Monday, May 21, 12

offline sql storage

‣ persistent and session storage


Monday, May 21, 12

offline sql storage

‣ persistent and session storage‣ key/value (strings)


Monday, May 21, 12

offline sql storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage


Monday, May 21, 12

offline sql storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage‣ limit space, non-standard ~5Mb


Monday, May 21, 12

offline sql storage

‣ persistent and session storage‣ key/value (strings)‣ (some) allow object storage‣ limit space, non-standard ~5Mb‣ be careful with private browsing


Monday, May 21, 12

multimedia API


Monday, May 21, 12

multimedia API

‣ audio and video tags


Monday, May 21, 12

multimedia API

‣ audio and video tags‣ javascript api & events


Monday, May 21, 12

multimedia API

‣ audio and video tags‣ javascript api & events‣ codecs nightmare


Monday, May 21, 12

2d drawing api (canvas)

HTML5 1.0+ 1.5+ 6.0+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12


‣ great support

HTML5 1.0+ 1.5+ 6.0+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12


‣ great support‣ javascript-based drawing

HTML5 1.0+ 1.5+ 6.0+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12


‣ great support‣ javascript-based drawing‣ (some) allows data URI export

HTML5 1.0+ 1.5+ 6.0+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

svg

SVG 2.2+ 3.0+ 4.7+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

svg

‣ old standard

SVG 2.2+ 3.0+ 4.7+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

svg

‣ old standard‣ scalable vector graphics

SVG 2.2+ 3.0+ 4.7+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

svg

‣ old standard‣ scalable vector graphics‣ (some) allows inline <svg> tag

SVG 2.2+ 3.0+ 4.7+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

svg

‣ old standard‣ scalable vector graphics‣ (some) allows inline <svg> tag‣ (some) allows svg as background

SVG 2.2+ 3.0+ 4.7+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

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+ Mob 10+ / Mini 5 4.0+9.0+

Monday, May 21, 12

motion sensors

DeviceOrientation 4.2+ 3.0+ 6.0+ (moz)4.7+ (basic)

Monday, May 21, 12

motion sensors ‣ accelerometer / gyroscope / magnetometer


Monday, May 21, 12

motion sensors ‣ accelerometer / gyroscope / magnetometer‣ onorientationchange


Monday, May 21, 12

motion sensors ‣ accelerometer / gyroscope / magnetometer‣ onorientationchange‣ window.orientation


Monday, May 21, 12

motion sensors ‣ accelerometer / gyroscope / magnetometer‣ onorientationchange‣ window.orientation‣ games, visual effects, pressure detection?


Monday, May 21, 12

motion sensors ‣ accelerometer / gyroscope / magnetometer‣ onorientationchange‣ window.orientation‣ games, visual effects, pressure detection?

mobilexweb.com/samples/ball.html mobilexweb.com/samples/pressure.html


Monday, May 21, 12

touch events

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

touch events ‣ iOS specification

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

touch events ‣ iOS specification‣ some differences between implementations

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

touch events ‣ iOS specification‣ some differences between implementations‣ (some) multi-touch

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

touch events ‣ iOS specification‣ some differences between implementations‣ (some) multi-touch‣ touchstart, touchmove, touchend, touchcancel

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

touch events ‣ iOS specification‣ some differences between implementations‣ (some) multi-touch‣ touchstart, touchmove, touchend, touchcancel‣ (some) touchenter, touchleave

Touch events 3.0+ 2.1+ 6.1+ 6.0+

Monday, May 21, 12

css3 basic

CSS 3 1.0+ 1.0+ 6.0+ 6.0+9.0+ 10+ Anna+

Monday, May 21, 12

css3 basic

‣ basic new styling

CSS 3 1.0+ 1.0+ 6.0+ 6.0+9.0+ 10+ Anna+

Monday, May 21, 12

css3 basic

‣ basic new styling‣ rounded borders, opacity

CSS 3 1.0+ 1.0+ 6.0+ 6.0+9.0+ 10+ Anna+

Monday, May 21, 12

css3 basic

‣ basic new styling‣ rounded borders, opacity‣ (some) still requires prefix

CSS 3 1.0+ 1.0+ 6.0+ 6.0+9.0+ 10+ Anna+

Monday, May 21, 12

css3 basic

‣ basic new styling‣ rounded borders, opacity‣ (some) still requires prefix‣ -webkit, -o, -moz, -ms

CSS 3 1.0+ 1.0+ 6.0+ 6.0+9.0+ 10+ Anna+

Monday, May 21, 12

server-sent events

Server-Sent events 4.1+ Mobile 11+ 6.0+

Monday, May 21, 12

server-sent events

‣ EventSource


Monday, May 21, 12

server-sent events

‣ EventSource‣ reduce AJAX/Comet solutions


Monday, May 21, 12

server-sent events

‣ EventSource‣ reduce AJAX/Comet solutions‣ be careful with proxies/3g connections


Monday, May 21, 12

web sockets

web sockets 4.2+ Mobile 11+ 6.0+6.1+

Monday, May 21, 12

web sockets‣ Evolution of bi-directional communication


Monday, May 21, 12

web sockets‣ Evolution of bi-directional communication‣ reduce AJAX/Comet solutions


Monday, May 21, 12

web sockets‣ Evolution of bi-directional communication‣ reduce AJAX/Comet solutions‣ be careful with proxies/3g connections


Monday, May 21, 12

web sockets‣ Evolution of bi-directional communication‣ reduce AJAX/Comet solutions‣ be careful with proxies/3g connections‣ special server


Monday, May 21, 12

web sockets‣ Evolution of bi-directional communication‣ reduce AJAX/Comet solutions‣ be careful with proxies/3g connections‣ special server‣ standard changed months ago


Monday, May 21, 12

web workers

web workers Mobile 11+ 6.0+6.0+

Monday, May 21, 12

web workers

‣ threading in JavaScript


Monday, May 21, 12

web workers

‣ threading in JavaScript‣ important for performance


Monday, May 21, 12

web workers

‣ threading in JavaScript‣ important for performance‣ worker without DOM manipulation


Monday, May 21, 12

what is just starting...?

Monday, May 21, 12

apis starting to appear

Monday, May 21, 12


‣ XMLHttpRequest 2 - Partially on latest versions

Monday, May 21, 12



‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox

Monday, May 21, 12




‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FF

Monday, May 21, 12





‣ Web Sockets - Android 3.0

Monday, May 21, 12






‣ Navigation Timing API - IE 9.0, Android 4, Chrome, FF 7

Monday, May 21, 12







‣ Notifications API - Firefox 6, PlayBook 2.0

Monday, May 21, 12







‣ Notifications API - Firefox 6, PlayBook 2.0

‣ IndexedDB - Firefox 6.0, Chrome

Monday, May 21, 12

Monday, May 21, 12

and what to expect in the future?

Monday, May 21, 12

for the near future...

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection‣ WebNFC

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection‣ WebNFC‣ Native integration API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection‣ WebNFC‣ Native integration API‣ Contacts and Calendar API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection‣ WebNFC‣ Native integration API‣ Contacts and Calendar API‣ Messaging API

Monday, May 21, 12

for the near future...‣ Augmented Reality on the web‣ Camera API‣ Page Visibility API‣ Full Screen API‣ Animation Timing API‣ Speech detection‣ WebNFC‣ Native integration API‣ Contacts and Calendar API‣ Messaging API‣ Orientation Lock

Monday, May 21, 12

some last advices

Monday, May 21, 12

Monday, May 21, 12

performance, performance

Monday, May 21, 12

good practices

Monday, May 21, 12

don’t be fanatic

photo by Kurt Christensen (flickr)

Monday, May 21, 12

be multiplatform

Monday, May 21, 12

be

futurefriend.ly

Monday, May 21, 12

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!firt.mobi

[email protected]: @firt

www.mobilexweb.com

50% books20% trainingsJust Ask me!

Monday, May 21, 12

mailto:[email protected]

mailto:[email protected]

http://www.mobilexweb.com

http://www.mobilexweb.com

JSConf - Mobile HTML5

Technology