May, 19th, 2012    Buenos Aires, AR                       Maximiliano Firtman @firt                        mobile+web devel...
who am I?                                 @firt      mobile+web developer      mobilexweb.comMonday, May 21, 12
speakerMonday, May 21, 12
Monday, May 21, 12
Cursos y Libros                                 HTML5                                 Android                             ...
ITMaster.com.ar    @ITMasterCursosMonday, May 21, 12
books                     Image from my houseMonday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
.comMonday, May 21, 12
Monday, May 21, 12
mobile...Monday, May 21, 12
mobileMonday, May 21, 12
mobile                     ‣   absolutely personalMonday, May 21, 12
mobile                     ‣ absolutely personal                     ‣ +5 billionsMonday, May 21, 12
mobile                     ‣ absolutely personal                     ‣ +5 billions                     ‣ make us focusMond...
mobile                     ‣ absolutely personal                     ‣ +5 billions                     ‣ make us focus    ...
mobile                     ‣ absolutely personal                     ‣ +5 billions                     ‣ make us focus    ...
mobile                     ‣ absolutely personal                     ‣ +5 billions                     ‣ make us focus    ...
Monday, May 21, 12
Monday, May 21, 12
everybody                       wants                       mobileMonday, May 21, 12
then... what is the                         problem?Monday, May 21, 12
mobile is a  minefield                     Photo by World of Good (Flickr)        Malvinas / Falklands IslandsMonday, May 2...
lots of questions     Photo by wayneandwax (Flickr)Monday, May 21, 12
we need to learn                     lots of questionsMonday, May 21, 12
lots of platformsMonday, May 21, 12
mobile web appearsMonday, May 21, 12
but it’s differentMonday, May 21, 12
but it’s different                     ‣   slower networksMonday, May 21, 12
but it’s different                     ‣ slower networks                     ‣ higher latencyMonday, May 21, 12
but it’s different                     ‣ slower networks                     ‣ higher latency                     ‣ slower ...
but it’s different                     ‣ slower networks                     ‣ higher latency                     ‣ slower ...
but it’s different                     ‣ slower networks                     ‣ higher latency                     ‣ slower ...
but it’s different                     ‣ slower networks                     ‣ higher latency                     ‣ slower ...
but it’s different                     ‣ slower networks                     ‣ higher latency                     ‣ slower ...
mobile browsersMonday, May 21, 12
mobile browsers                     ‣   too manyMonday, May 21, 12
mobile browsers                     ‣ too many                     ‣ (some) too limitedMonday, May 21, 12
mobile browsers                     ‣ too many                     ‣ (some) too limited                     ‣ (some) too i...
mobile browsers                     ‣ too many                     ‣ (some) too limited                     ‣ (some) too i...
mobile browsers                     ‣ too many                     ‣ (some) too limited                     ‣ (some) too i...
mobile browsers                     ‣ too many                     ‣ (some) too limited                     ‣ (some) too i...
mobile browsers                     ‣ too many                     ‣ (some) too limited                     ‣ (some) too i...
mobile browsersMonday, May 21, 12
mobile browsers                     ‣   (some) focus-basedMonday, May 21, 12
mobile browsers                     ‣ (some) focus-based                     ‣ (some) cursor-basedMonday, May 21, 12
mobile browsers                     ‣ (some) focus-based                     ‣ (some) cursor-based                     ‣ (...
mobile browsers                     ‣ (some) focus-based                     ‣ (some) cursor-based                     ‣ (...
mobile browsers                     ‣ (some) focus-based                     ‣ (some) cursor-based                     ‣ (...
mobile browsers                     ‣ (some) focus-based                     ‣ (some) cursor-based                     ‣ (...
some are knownMonday, May 21, 12
some are known                     ‣ Safari (on iOS)                     ‣ Opera Mobile (on Android & Symbian)            ...
some are unknownMonday, May 21, 12
some are unknown                     ‣ Nokia Browser (on Symbian, S40 & Meego 1.2)                     ‣ BlackBerry Browse...
and with different                        versions...Monday, May 21, 12
and we can also                      create native apps                     -such as phonegap-Monday, May 21, 12
native                       vs                      webMonday, May 21, 12
native code                          vs                      javascriptMonday, May 21, 12
browser                            vs                     installed apps                        & storesMonday, 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
html5Monday, May 21, 12
html5                     ‣   w3c standards (all in draft)Monday, May 21, 12
html5                     ‣ w3c standards (all in draft)                     ‣ some are other w3c standardsMonday, May 21,...
html5                     ‣ w3c standards (all in draft)                     ‣ some are other w3c standards               ...
html5                     ‣ w3c standards (all in draft)                     ‣ some are other w3c standards               ...
html5                     ‣ w3c standards (all in draft)                     ‣ some are other w3c standards               ...
html version 5?Monday, May 21, 12
why mobile html5?Monday, May 21, 12
typeof html5 != booleanMonday, May 21, 12
some features safeMonday, May 21, 12
some features only on              few platformsMonday, May 21, 12
some features                     experimentalMonday, May 21, 12
some features with                         prefixesMonday, May 21, 12
and what about                     capabilities today?Monday, May 21, 12
Monday, May 21, 12
vendors hate                      developersMonday, May 21, 12
emulators                     www.mobilexweb.com/emulatorsMonday, May 21, 12
friends                lots of them                and with different devicesMonday, May 21, 12
virtual labs           real devices on real networks           www.perfectomobile.com   www.deviceanywhere.comMonday, May ...
debugging tools            Remote Web Inspector            • BlackBerry Smartphones 7            • BlackBerry PlayBook    ...
debugging tools                      iwebinspector.comMonday, May 21, 12
debugging tools        Adobe Shadow           adobe.com/go/shadowMonday, May 21, 12
users hate                     developersMonday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
Monday, May 21, 12
mobile                   web                 is slowPicture from Simon Howden freedigitalphotos.net!Monday, May 21, 12
JS APIs have                       evolvedMonday, May 21, 12
why?Monday, May 21, 12
Monday, May 21, 12
mobile html5                      capabilities            offline & data storage            geolocation            hardware...
app.ft.comMonday, May 21, 12
native web appsMonday, May 21, 12
Boot2Gecko (B2G)Monday, May 21, 12
Monday, May 21, 12
architectureMonday, 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 codeMonday, 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+  ...
offline installation                     ‣ Install a package on the device                     ‣ Complex to debug / reload  ...
offline installation                     ‣ Install a package on the device                     ‣ Complex to debug / reload  ...
offline installation                     ‣ Install a package on the device                     ‣ Complex to debug / reload  ...
offline installation                     ‣ Install a package on the device                     ‣ Complex to debug / reload  ...
geolocation             Geolocation   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+Monday, May 21, 12
geolocation                     ‣   GPS, A-GPS, Wi-Fi, cells             Geolocation    2.0+   2.0+   6.0+   9.0+   Mobile...
geolocation                     ‣ GPS, A-GPS, Wi-Fi, cells                     ‣ (some) force GPS “highAccuracy”          ...
geolocation                     ‣ GPS, A-GPS, Wi-Fi, cells                     ‣ (some) force GPS “highAccuracy”          ...
geolocation                     ‣ GPS, A-GPS, Wi-Fi, cells                     ‣ (some) force GPS “highAccuracy”          ...
offline web storage             Web Storage   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+Monday, May 21, 12
offline web storage                     ‣   persistent and session storage             Web Storage    2.0+   2.0+   6.0+   9...
offline web storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline web storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline web storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline web storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
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+   M...
offline sql storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline sql storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline sql storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
offline sql storage                     ‣ persistent and session storage                     ‣ key/value (strings)          ...
multimedia API             Web Storage   3.0+   2.3+   7.0+   9.0+   Mobile 11+   5.0+Monday, May 21, 12
multimedia API                     ‣   audio and video tags             Web Storage    3.0+   2.3+   7.0+   9.0+   Mobile ...
multimedia API                     ‣ audio and video tags                     ‣ javascript api & events             Web St...
multimedia API                     ‣ audio and video tags                     ‣ javascript api & events                   ...
2d drawing api (canvas)                HTML5   1.0+   1.5+   6.0+   9.0+   Mob 10+ / Mini 5   4.0+Monday, May 21, 12
2d drawing api (canvas)                     ‣   great support                HTML5       1.0+   1.5+   6.0+   9.0+   Mob 1...
2d drawing api (canvas)                     ‣ great support                     ‣ javascript-based drawing                ...
2d drawing api (canvas)                     ‣ great support                     ‣ javascript-based drawing                ...
svg                     SVG   2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+Monday, May 21, 12
svg                       ‣   old standard                     SVG      2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0...
svg                       ‣ old standard                       ‣ scalable vector graphics                     SVG    2.2+ ...
svg                       ‣ old standard                       ‣ scalable vector graphics                       ‣ (some) a...
svg                       ‣ old standard                       ‣ scalable vector graphics                       ‣ (some) a...
svg                       ‣ old standard                       ‣ scalable vector graphics                       ‣ (some) a...
motion sensors           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)Monday, May 21, 12
motion sensors                     ‣   accelerometer / gyroscope / magnetometer           DeviceOrientation   4.2+   3.0+ ...
motion sensors                     ‣ accelerometer / gyroscope / magnetometer                     ‣ onorientationchange   ...
motion sensors                     ‣ accelerometer / gyroscope / magnetometer                     ‣ onorientationchange   ...
motion sensors                     ‣ accelerometer / gyroscope / magnetometer                     ‣ onorientationchange   ...
motion sensors                     ‣ accelerometer / gyroscope / magnetometer                     ‣ onorientationchange   ...
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                     ‣ iOS specification                     ‣ some differences between implementations         ...
touch events                     ‣ iOS specification                     ‣ some differences between implementations         ...
touch events                     ‣ iOS specification                     ‣ some differences between implementations         ...
css3 basic                     CSS 3   1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+Monday, May 21, 12
css3 basic                        ‣    basic new styling                     CSS 3      1.0+   1.0+   6.0+   9.0+   10+   ...
css3 basic                        ‣ basic new styling                        ‣ rounded borders, opacity                   ...
css3 basic                        ‣ basic new styling                        ‣ rounded borders, opacity                   ...
css3 basic                        ‣ basic new styling                        ‣ rounded borders, opacity                   ...
server-sent events           Server-Sent events   4.1+   Mobile 11+   6.0+Monday, May 21, 12
server-sent events                     ‣   EventSource           Server-Sent events   4.1+   Mobile 11+   6.0+Monday, May ...
server-sent events                     ‣ EventSource                     ‣ reduce AJAX/Comet solutions           Server-Se...
server-sent events                     ‣ EventSource                     ‣ reduce AJAX/Comet solutions                    ...
web sockets               web sockets   4.2+   6.1+   Mobile 11+   6.0+Monday, May 21, 12
web sockets                      ‣ Evolution of bi-directional                       communication               web socke...
web sockets                      ‣ Evolution of bi-directional                       communication                      ‣ ...
web sockets                      ‣ Evolution of bi-directional                       communication                      ‣ ...
web sockets                      ‣ Evolution of bi-directional                       communication                      ‣ ...
web sockets                      ‣ Evolution of bi-directional                       communication                      ‣ ...
web workers              web workers   6.0+   Mobile 11+   6.0+Monday, May 21, 12
web workers                     ‣   threading in JavaScript              web workers              6.0+        Mobile 11+  ...
web workers                     ‣ threading in JavaScript                     ‣ important for performance              web...
web workers                     ‣ threading in JavaScript                     ‣ important for performance                 ...
what is just                     starting...?Monday, May 21, 12
apis starting to appearMonday, May 21, 12
apis starting to appear                     ‣   XMLHttpRequest 2 - Partially on latest versionsMonday, May 21, 12
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
apis starting to appear                     ‣ XMLHttpRequest 2 - Partially on latest versions                     ‣ Web Wo...
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 webMonday, May 21, 12
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera APIMonday, May 21, 12
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
for the near future...                     ‣ Augmented Reality on the web                     ‣ Camera API                ...
some last advicesMonday, May 21, 12
Monday, May 21, 12
performance,                     performanceMonday, May 21, 12
good practicesMonday, May 21, 12
don’t be fanatic  photo by Kurt Christensen           (flickr)Monday, May 21, 12
be multiplatformMonday, May 21, 12
be                     futurefriend.lyMonday, May 21, 12
you can reach a good                              thank you!                          experience                     firt.m...
Upcoming SlideShare
Loading in...5
×

JSConf - Mobile HTML5

1,332

Published on

My conference at JSConf.AR in May 2012

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,332
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JSConf - Mobile HTML5"

  1. 1. May, 19th, 2012 Buenos Aires, AR Maximiliano Firtman @firt mobile+web developer MOBILE HTML5 & THE NEW APISMonday, May 21, 12
  2. 2. who am I? @firt mobile+web developer mobilexweb.comMonday, May 21, 12
  3. 3. speakerMonday, May 21, 12
  4. 4. Monday, May 21, 12
  5. 5. Cursos y Libros HTML5 Android iOS BlackBerry Windows Phone ITMaster.com.ar @ITMasterCursosMonday, May 21, 12
  6. 6. ITMaster.com.ar @ITMasterCursosMonday, May 21, 12
  7. 7. books Image from my houseMonday, May 21, 12
  8. 8. Monday, May 21, 12
  9. 9. Monday, May 21, 12
  10. 10. Monday, May 21, 12
  11. 11. Monday, May 21, 12
  12. 12. Monday, May 21, 12
  13. 13. .comMonday, May 21, 12
  14. 14. Monday, May 21, 12
  15. 15. mobile...Monday, May 21, 12
  16. 16. mobileMonday, May 21, 12
  17. 17. mobile ‣ absolutely personalMonday, May 21, 12
  18. 18. mobile ‣ absolutely personal ‣ +5 billionsMonday, May 21, 12
  19. 19. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focusMonday, May 21, 12
  20. 20. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context...Monday, May 21, 12
  21. 21. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always...Monday, May 21, 12
  22. 22. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere.Monday, May 21, 12
  23. 23. Monday, May 21, 12
  24. 24. Monday, May 21, 12
  25. 25. everybody wants mobileMonday, May 21, 12
  26. 26. then... what is the problem?Monday, May 21, 12
  27. 27. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands IslandsMonday, May 21, 12
  28. 28. lots of questions Photo by wayneandwax (Flickr)Monday, May 21, 12
  29. 29. we need to learn lots of questionsMonday, May 21, 12
  30. 30. lots of platformsMonday, May 21, 12
  31. 31. mobile web appearsMonday, May 21, 12
  32. 32. but it’s differentMonday, May 21, 12
  33. 33. but it’s different ‣ slower networksMonday, May 21, 12
  34. 34. but it’s different ‣ slower networks ‣ higher latencyMonday, May 21, 12
  35. 35. but it’s different ‣ slower networks ‣ higher latency ‣ slower hardwareMonday, May 21, 12
  36. 36. but it’s different ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experienceMonday, May 21, 12
  37. 37. but it’s different ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different contextMonday, May 21, 12
  38. 38. but it’s different ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviorsMonday, May 21, 12
  39. 39. but it’s different ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviors ‣ different possible networksMonday, May 21, 12
  40. 40. mobile browsersMonday, May 21, 12
  41. 41. mobile browsers ‣ too manyMonday, May 21, 12
  42. 42. mobile browsers ‣ too many ‣ (some) too limitedMonday, May 21, 12
  43. 43. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovativeMonday, May 21, 12
  44. 44. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedMonday, May 21, 12
  45. 45. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationMonday, May 21, 12
  46. 46. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a nameMonday, May 21, 12
  47. 47. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging toolsMonday, May 21, 12
  48. 48. mobile browsersMonday, May 21, 12
  49. 49. mobile browsers ‣ (some) focus-basedMonday, May 21, 12
  50. 50. mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedMonday, May 21, 12
  51. 51. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedMonday, May 21, 12
  52. 52. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedMonday, May 21, 12
  53. 53. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportMonday, May 21, 12
  54. 54. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devsMonday, May 21, 12
  55. 55. some are knownMonday, May 21, 12
  56. 56. 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
  57. 57. some are unknownMonday, May 21, 12
  58. 58. 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
  59. 59. and with different versions...Monday, May 21, 12
  60. 60. and we can also create native apps -such as phonegap-Monday, May 21, 12
  61. 61. native vs webMonday, May 21, 12
  62. 62. native code vs javascriptMonday, May 21, 12
  63. 63. browser vs installed apps & storesMonday, May 21, 12
  64. 64. what is native?Monday, May 21, 12
  65. 65. what is a webapp?Monday, May 21, 12
  66. 66. standars?Monday, May 21, 12
  67. 67. Photo by Ben Millett (Flickr)Monday, May 21, 12
  68. 68. Monday, May 21, 12
  69. 69. Are you sure? Photo by Ricky David (Flickr)Monday, May 21, 12
  70. 70. What is ?Monday, May 21, 12
  71. 71. html5Monday, May 21, 12
  72. 72. html5 ‣ w3c standards (all in draft)Monday, May 21, 12
  73. 73. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standardsMonday, May 21, 12
  74. 74. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standardsMonday, May 21, 12
  75. 75. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standardsMonday, May 21, 12
  76. 76. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the webMonday, May 21, 12
  77. 77. html version 5?Monday, May 21, 12
  78. 78. why mobile html5?Monday, May 21, 12
  79. 79. typeof html5 != booleanMonday, May 21, 12
  80. 80. some features safeMonday, May 21, 12
  81. 81. some features only on few platformsMonday, May 21, 12
  82. 82. some features experimentalMonday, May 21, 12
  83. 83. some features with prefixesMonday, May 21, 12
  84. 84. and what about capabilities today?Monday, May 21, 12
  85. 85. Monday, May 21, 12
  86. 86. vendors hate developersMonday, May 21, 12
  87. 87. emulators www.mobilexweb.com/emulatorsMonday, May 21, 12
  88. 88. friends lots of them and with different devicesMonday, May 21, 12
  89. 89. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.comMonday, May 21, 12
  90. 90. debugging tools Remote Web Inspector • BlackBerry Smartphones 7 • BlackBerry PlayBook • Google Chrome for Android 4 • Opera MobileMonday, May 21, 12
  91. 91. debugging tools iwebinspector.comMonday, May 21, 12
  92. 92. debugging tools Adobe Shadow adobe.com/go/shadowMonday, May 21, 12
  93. 93. users hate developersMonday, May 21, 12
  94. 94. Monday, May 21, 12
  95. 95. Monday, May 21, 12
  96. 96. Monday, May 21, 12
  97. 97. Monday, May 21, 12
  98. 98. mobile web is slowPicture from Simon Howden freedigitalphotos.net!Monday, May 21, 12
  99. 99. JS APIs have evolvedMonday, May 21, 12
  100. 100. why?Monday, May 21, 12
  101. 101. Monday, May 21, 12
  102. 102. mobile html5 capabilities offline & data storage geolocation hardware: motion, camera, battery drawing apis animations and transitions phone integration: calls, contacts touch and gesture eventsMonday, May 21, 12
  103. 103. app.ft.comMonday, May 21, 12
  104. 104. native web appsMonday, May 21, 12
  105. 105. Boot2Gecko (B2G)Monday, May 21, 12
  106. 106. Monday, May 21, 12
  107. 107. architectureMonday, May 21, 12
  108. 108. Monday, May 21, 12
  109. 109. Monday, May 21, 12
  110. 110. Monday, May 21, 12
  111. 111. Monday, May 21, 12
  112. 112. Monday, May 21, 12
  113. 113. Monday, May 21, 12
  114. 114. Monday, May 21, 12
  115. 115. let’s see some codeMonday, May 21, 12
  116. 116. Monday, May 21, 12
  117. 117. offline installation HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, May 21, 12
  118. 118. offline installation ‣ Install a package on the device HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, May 21, 12
  119. 119. 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
  120. 120. 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
  121. 121. 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
  122. 122. 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
  123. 123. geolocation Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  124. 124. geolocation ‣ GPS, A-GPS, Wi-Fi, cells Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  125. 125. 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, May 21, 12
  126. 126. 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, May 21, 12
  127. 127. 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, May 21, 12
  128. 128. offline web storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  129. 129. offline web storage ‣ persistent and session storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  130. 130. offline web storage ‣ persistent and session storage ‣ key/value (strings) Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  131. 131. offline 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, May 21, 12
  132. 132. 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+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  133. 133. 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+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  134. 134. offline sql storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, May 21, 12
  135. 135. offline sql storage ‣ persistent and session storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, May 21, 12
  136. 136. offline sql storage ‣ persistent and session storage ‣ key/value (strings) deprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, May 21, 12
  137. 137. 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
  138. 138. 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
  139. 139. 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
  140. 140. multimedia API Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  141. 141. multimedia API ‣ audio and video tags Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  142. 142. multimedia API ‣ audio and video tags ‣ javascript api & events Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, May 21, 12
  143. 143. 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, May 21, 12
  144. 144. 2d drawing api (canvas) HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, May 21, 12
  145. 145. 2d drawing api (canvas) ‣ great support HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, May 21, 12
  146. 146. 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, May 21, 12
  147. 147. 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, May 21, 12
  148. 148. svg SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, May 21, 12
  149. 149. svg ‣ old standard SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, May 21, 12
  150. 150. svg ‣ old standard ‣ scalable vector graphics SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, May 21, 12
  151. 151. 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, May 21, 12
  152. 152. 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, May 21, 12
  153. 153. 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, May 21, 12
  154. 154. motion sensors DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  155. 155. motion sensors ‣ accelerometer / gyroscope / magnetometer DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  156. 156. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  157. 157. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  158. 158. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual effects, pressure detection? DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  159. 159. 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+ 4.7+ (basic) 6.0+ (moz)Monday, May 21, 12
  160. 160. touch events Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, May 21, 12
  161. 161. touch events ‣ iOS specification Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, May 21, 12
  162. 162. touch events ‣ iOS specification ‣ some differences between implementations Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, May 21, 12
  163. 163. 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
  164. 164. 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
  165. 165. 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
  166. 166. css3 basic CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, May 21, 12
  167. 167. css3 basic ‣ basic new styling CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, May 21, 12
  168. 168. css3 basic ‣ basic new styling ‣ rounded borders, opacity CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, May 21, 12
  169. 169. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, May 21, 12
  170. 170. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix ‣ -webkit, -o, -moz, -ms CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, May 21, 12
  171. 171. server-sent events Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, May 21, 12
  172. 172. server-sent events ‣ EventSource Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, May 21, 12
  173. 173. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, May 21, 12
  174. 174. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, May 21, 12
  175. 175. web sockets web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, May 21, 12
  176. 176. web sockets ‣ Evolution of bi-directional communication web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, May 21, 12
  177. 177. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, May 21, 12
  178. 178. 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, May 21, 12
  179. 179. 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, May 21, 12
  180. 180. 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, May 21, 12
  181. 181. web workers web workers 6.0+ Mobile 11+ 6.0+Monday, May 21, 12
  182. 182. web workers ‣ threading in JavaScript web workers 6.0+ Mobile 11+ 6.0+Monday, May 21, 12
  183. 183. web workers ‣ threading in JavaScript ‣ important for performance web workers 6.0+ Mobile 11+ 6.0+Monday, May 21, 12
  184. 184. web workers ‣ threading in JavaScript ‣ important for performance ‣ worker without DOM manipulation web workers 6.0+ Mobile 11+ 6.0+Monday, May 21, 12
  185. 185. what is just starting...?Monday, May 21, 12
  186. 186. apis starting to appearMonday, May 21, 12
  187. 187. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versionsMonday, May 21, 12
  188. 188. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, FirefoxMonday, May 21, 12
  189. 189. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox ‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FFMonday, May 21, 12
  190. 190. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox ‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FF ‣ Web Sockets - Android 3.0Monday, May 21, 12
  191. 191. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox ‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FF ‣ Web Sockets - Android 3.0 ‣ Navigation Timing API - IE 9.0, Android 4, Chrome, FF 7Monday, May 21, 12
  192. 192. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox ‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FF ‣ Web Sockets - Android 3.0 ‣ Navigation Timing API - IE 9.0, Android 4, Chrome, FF 7 ‣ Notifications API - Firefox 6, PlayBook 2.0Monday, May 21, 12
  193. 193. apis starting to appear ‣ XMLHttpRequest 2 - Partially on latest versions ‣ Web Workers - iOS 5, Chrome, BB 6, Meego, Opera, Firefox ‣ Server-Sent events - iOS 4.2, Chrome, BB 6.1, Opera, FF ‣ Web Sockets - Android 3.0 ‣ Navigation Timing API - IE 9.0, Android 4, Chrome, FF 7 ‣ Notifications API - Firefox 6, PlayBook 2.0 ‣ IndexedDB - Firefox 6.0, ChromeMonday, May 21, 12
  194. 194. Monday, May 21, 12
  195. 195. and what to expect in the future?Monday, May 21, 12
  196. 196. for the near future...Monday, May 21, 12
  197. 197. for the near future... ‣ Augmented Reality on the webMonday, May 21, 12
  198. 198. for the near future... ‣ Augmented Reality on the web ‣ Camera APIMonday, May 21, 12
  199. 199. for the near future... ‣ Augmented Reality on the web ‣ Camera API ‣ Page Visibility APIMonday, May 21, 12
  200. 200. for the near future... ‣ Augmented Reality on the web ‣ Camera API ‣ Page Visibility API ‣ Full Screen APIMonday, May 21, 12
  201. 201. for the near future... ‣ Augmented Reality on the web ‣ Camera API ‣ Page Visibility API ‣ Full Screen API ‣ Animation Timing APIMonday, May 21, 12
  202. 202. for the near future... ‣ Augmented Reality on the web ‣ Camera API ‣ Page Visibility API ‣ Full Screen API ‣ Animation Timing API ‣ Speech detectionMonday, May 21, 12
  203. 203. for the near future... ‣ Augmented Reality on the web ‣ Camera API ‣ Page Visibility API ‣ Full Screen API ‣ Animation Timing API ‣ Speech detection ‣ WebNFCMonday, May 21, 12
  204. 204. 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 APIMonday, May 21, 12
  205. 205. 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 APIMonday, May 21, 12
  206. 206. 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 APIMonday, May 21, 12
  207. 207. 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 LockMonday, May 21, 12
  208. 208. some last advicesMonday, May 21, 12
  209. 209. Monday, May 21, 12
  210. 210. performance, performanceMonday, May 21, 12
  211. 211. good practicesMonday, May 21, 12
  212. 212. don’t be fanatic photo by Kurt Christensen (flickr)Monday, May 21, 12
  213. 213. be multiplatformMonday, May 21, 12
  214. 214. be futurefriend.lyMonday, May 21, 12
  215. 215. you can reach a good thank you! experience firt.mobi 50% books firtman@gmail.com 20% trainings twitter: @firt Just Ask me! www.mobilexweb.com Pictures)from)freedigitalphotos.net)Monday, May 21, 12
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×