JSConf - Mobile HTML5

  • Published on
    14-Apr-2017

  • View
    1.879

  • Download
    0

Embed Size (px)

Transcript

  • 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%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promisehttp://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 its different

    Monday, May 21, 12

  • but its different

    slower networks

    Monday, May 21, 12

  • but its different

    slower networks higher latency

    Monday, May 21, 12

  • but its different

    slower networks higher latency slower hardware

    Monday, May 21, 12

  • but its different

    slower networks higher latency slower hardware different browsing experience

    Monday, May 21, 12

  • but its different

    slower networks higher latency slower hardware different browsing experience different context

    Monday, May 21, 12

  • but its different

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

    Monday, May 21, 12

  • but its different

    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/emulatorshttp://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

    http://www.mobilexweb.com/emulatorshttp://www.mobilexweb.com/emulatorshttp://www.mobilexweb.com/emulatorshttp://www.mobilexweb.com/emulators

  • 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

    http://www.mobilexweb.com/emulatorshttp://www.mobilexweb.com/emulators

  • 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

  • lets 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

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

    Monday, May 21, 12

  • geolocation

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

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

    Monday, May 21, 12

  • geolocation

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

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

    Monday, May 21, 12

  • geolocation

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

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

    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

    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 key/value (strings)

    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 key/value (strings) (some) allow object 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 key/value (strings) (some) allow object storage limit space, non-standard ~5Mb

    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 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+ Mobile 11+ 5.0+9.0+

    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

    deprecated 2.2+ 2.0+ 6.0+ Mobile 11+

    Monday, May 21, 12

  • offline sql storage

    persistent and session storage key/value (strings)

    deprecated 2.2+ 2.0+ 6.0+ Mobile 11+

    Monday, May 21, 12

  • offline sql storage

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

    deprecated 2.2+ 2.0+ 6.0+ Mobile 11+

    Monday, May 21, 12

  • offline 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, 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

    deprecated 2.2+ 2.0+ 6.0+ Mobile 11+

    Monday, May 21, 12

  • multimedia API

    Web Storage 3.0+ 2.3+ 7.0+ Mobile 11+ 5.0+9.0+

    Monday, May 21, 12

  • multimedia API

    audio and video tags

    Web Storage 3.0+ 2.3+ 7.0+ Mobile 11+ 5.0+9.0+

    Monday, May 21, 12

  • multimedia API

    audio and video tags javascript api & events

    Web Storage 3.0+ 2.3+ 7.0+ Mobile 11+ 5.0+9.0+

    Monday, May 21, 12

  • multimedia API

    audio and video tags javascript api & events codecs nightmare

    Web Storage 3.0+ 2.3+ 7.0+ Mobile 11+ 5.0+9.0+

    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

  • 2d drawing api (canvas)

    great support

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

    Monday, May 21, 12

  • 2d drawing api (canvas)

    great support javascript-based drawing

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

    Monday, May 21, 12

  • 2d drawing api (canvas)

    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 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 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 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

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

    Monday, May 21, 12

  • motion sensors accelerometer / gyroscope / magnetometer onorientationchange

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

    Monday, May 21, 12

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

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

    Monday, May 21, 12

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

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

    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

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

    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 differen...