Breaking the Mobile Web with HTML5

download Breaking the Mobile Web with HTML5

If you can't read please download the document

description

My talk at Breaking Development Conference about Mobile Web, present & future of HTML5 on mobile devices. Nashville, sep 12, 2011

Transcript of Breaking the Mobile Web with HTML5

  • 1.BREAKING THE MOBILE WEB Max Firtman @rt rt.mobiSep, 12th, 2011 NashvilleMonday, September 12, 11

2. who am I?mobile+web developermobilexweb.com blog @rtMonday, September 12, 11 3. where?Monday, September 12, 11 4. where?buenos aires ~ argentinaMonday, September 12, 11 5. where?buenos aires ~ argentina patagonia soccer meat & wine tangoMonday, September 12, 11 6. where?buenos aires ~ argentina patagonia soccer meat & wine tangoMonday, September 12, 11 7. where?buenos aires ~ argentina patagonia true lies tango scene soccer meat & wine tangoMonday, September 12, 11 8. books Image from my houseMonday, September 12, 11 9. Monday, September 12, 11 10. Using the Latest TodayMobileHTML5coming soon... Estelle Weyl& Maximiliano Firtman also by @estellevwMonday, September 12, 11 11. many of you havetwo questions for meMonday, September 12, 11 12. the rst answer is noMonday, September 12, 11 13. the second answer is yesMonday, September 12, 11 14. other projects Blog www.mobilexweb.com +40 links, +300 emulators www.mobilexweb.com/emulators typing long URLs on mobile? www.mobiletinyurl.comMonday, September 12, 11 15. agendaMonday, September 12, 11 16. agendaMonday, September 12, 11 17. agenda why?Monday, September 12, 11 18. agenda why? whats the problem?Monday, September 12, 11 19. agenda why? whats the problem? why are we here?Monday, September 12, 11 20. agenda why? whats the problem? why are we here? mobile browsers todayMonday, September 12, 11 21. agenda why? whats the problem? why are we here? mobile browsers today forget & learnMonday, September 12, 11 22. agenda why? whats the problem? why are we here? mobile browsers today forget & learn mobile web toolkitMonday, September 12, 11 23. agenda why? whats the problem? why are we here? mobile browsers today forget & learn mobile web toolkit html5 todayMonday, September 12, 11 24. agenda why? whats the problem? why are we here? mobile browsers today forget & learn mobile web toolkit html5 today the futureMonday, September 12, 11 25. why mobile?Monday, September 12, 11 26. mobile devices are ourying carsMonday, September 12, 11 27. mobile is more about usersMonday, September 12, 11 28. mobileMonday, September 12, 11 29. mobile absolutely personalMonday, September 12, 11 30. mobile absolutely personal +5 billionsMonday, September 12, 11 31. mobile absolutely personal +5 billions make us focusMonday, September 12, 11 32. mobile absolutely personal +5 billions make us focus read our context...Monday, September 12, 11 33. mobile absolutely personal +5 billions make us focus read our context... ... always...Monday, September 12, 11 34. mobile absolutely personal +5 billions make us focus read our context... ... always... ... and everywhere.Monday, September 12, 11 35. then... what is the problem?Monday, September 12, 11 36. mobile is amineeld Photo by World of Good (Flickr)Malvinas / Falklands IslandsMonday, September 12, 11 37. lots of questions Photo by wayneandwax (Flickr)Monday, September 12, 11 38. we need to learn lots of questionsMonday, September 12, 11 39. lots of platformsMonday, September 12, 11 40. mobile web appearsMonday, September 12, 11 41. native vswebMonday, September 12, 11 42. WAIT!Monday, September 12, 11 43. Are you sure?Monday, September 12, 11 44. native codevsjavascriptMonday, September 12, 11 45. browservs installed apps& storesMonday, September 12, 11 46. lack of denitionsMonday, September 12, 11 47. when we say mobile webMonday, September 12, 11 48. when we say mobile webfrom a developersperspective its using HTML,CSS and JavaScript todevelop mobile appsMonday, September 12, 11 49. when we say mobile webfrom a developersperspective its using HTML,CSS and JavaScript todevelop mobile apps(browser or installed)Monday, September 12, 11 50. whats the problemwith mobile web?Monday, September 12, 11 51. we are second class producersMonday, September 12, 11 52. second classMonday, September 12, 11 53. second class vague, non-existent or outdated documentationMonday, September 12, 11 54. second class vague, non-existent or outdateddocumentation new features discovered bythird-partiesMonday, September 12, 11 55. second class vague, non-existent or outdateddocumentation new features discovered bythird-parties lack of samplesMonday, September 12, 11 56. second class vague, non-existent or outdateddocumentation new features discovered bythird-parties lack of samples no developer toolsMonday, September 12, 11 57. what?Updated: 02 Sep 2011Monday, September 12, 11 58. Testing & debuggingMonday, September 12, 11 59. Standards!Monday, September 12, 11 60. Photo by Ben Millett (Flickr)Monday, September 12, 11 61. Monday, September 12, 11 62. Are yousure to be happy? Photo by Ricky David (Flickr)Monday, September 12, 11 63. What is?Monday, September 12, 11 64. html5Monday, September 12, 11 65. html5 w3c standards (all in draft)Monday, September 12, 11 66. html5 w3c standards (all in draft) some are other w3c standards(css, svg, geolocation)Monday, September 12, 11 67. html5 w3c standards (all in draft) some are other w3c standards(css, svg, geolocation) de-facto standardsMonday, September 12, 11 68. html5 w3c standards (all in draft) some are other w3c standards(css, svg, geolocation) de-facto standards w3c ex-standardsMonday, September 12, 11 69. html5 w3c standards (all in draft) some are other w3c standards(css, svg, geolocation) de-facto standards w3c ex-standards everything new on the webMonday, September 12, 11 70. html5Monday, September 12, 11 71. html5 today:Monday, September 12, 11 72. html5 today: lack of real, good and practical information for mobile on the html5 communityMonday, September 12, 11 73. caniuse.com Simplication of the mobile web browser space Inaccurate informationMonday, September 12, 11 74. Modernizr Inaccurate information - inlinesvg and webglMonday, September 12, 11 75. html5test.comNot clear the html5 concept behind these testsMonday, September 12, 11 76. lets try to clarifyMonday, September 12, 11 77. announcing today...Monday, September 12, 11 78. Photo by Ben Millett (Flickr)Monday, September 12, 11 79. mobile browsersMonday, September 12, 11 80. mobile browsers too manyMonday, September 12, 11 81. mobile browsers too many (some) too limitedMonday, September 12, 11 82. mobile browsers too many (some) too limited (some) too innovativeMonday, September 12, 11 83. mobile browsers too many (some) too limited (some) too innovative (some) proxy basedMonday, September 12, 11 84. mobile browsers too many (some) too limited (some) too innovative (some) proxy based (most) without documentationMonday, September 12, 11 85. mobile browsers too many (some) too limited (some) too innovative (some) proxy based (most) without documentation (most) without a nameMonday, September 12, 11 86. mobile browsers too many (some) too limited (some) too innovative (some) proxy based (most) without documentation (most) without a name (most) without debugging toolsMonday, September 12, 11 87. mobile browsersMonday, September 12, 11 88. mobile browsers (some) focus-basedMonday, September 12, 11 89. mobile browsers (some) focus-based (some) cursor-basedMonday, September 12, 11 90. mobile browsers (some) focus-based (some) cursor-based (some) touch-basedMonday, September 12, 11 91. mobile browsers (some) focus-based (some) cursor-based (some) touch-based (some) multitouch-basedMonday, September 12, 11 92. mobile browsers (some) focus-based (some) cursor-based (some) touch-based (some) multitouch-based (some) with zooming supportMonday, September 12, 11 93. mobile browsers (some) focus-based (some) cursor-based (some) touch-based (some) multitouch-based (some) with zooming support (most) unknown for web devsMonday, September 12, 11 94. MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones,Feature,Feature,Phones,Phones, MARKET SHARE!Monday, September 12, 11 95. a quick, dirty listMonday, September 12, 11 96. a quick, dirty list Safari on iOS Android Browser Nokia Browser for Symbian webOS Browser BlackBerry Browser Opera Mobile Opera Mini Firefox Internet ExplorerMonday, September 12, 11 97. a quick, dirty list (cont.)Monday, September 12, 11 98. a quick, dirty list (cont.) Bada Browser NetFront Myriad Nokia Browser (Ovi) Phantom microB Skyre BOLTMonday, September 12, 11 99. they are on tablets too!Monday, September 12, 11 100. they are on tablets too! Safari on iOS Android Browser webOS Browser BlackBerry Browser Opera MiniMonday, September 12, 11 101. and with dierentversions...Monday, September 12, 11 102. and theres more!Monday, September 12, 11 103. pseudo-browsersMonday, September 12, 11 104. pseudobrowsersMonday, September 12, 11 105. pseudobrowsersmostly on iOS and AndroidMonday, September 12, 11 106. pseudobrowsers mostly on iOS and Android uses the internal web controlMonday, September 12, 11 107. pseudobrowsers mostly on iOS and Android uses the internal web control have dierent behavior than the native!Monday, September 12, 11 108. Monday, September 12, 11 109. dont give up yetMonday, September 12, 11 110. mobile IE rebornMonday, September 12, 11 111. mobile IE reborn on Windows Phone Mango, full Internet Explorer 9 with HTML5Monday, September 12, 11 112. mobile IE reborn on Windows Phone Mango, full Internet Explorer 9 with HTML5 but...Monday, September 12, 11 113. the WebKit problemMonday, September 12, 11 114. the WebKit problemwe are doing some things wrongMonday, September 12, 11 115. the WebKit problem we are doing some things wrong mostly css3, using only -webkit prexMonday, September 12, 11 116. the WebKit problem we are doing some things wrong mostly css3, using only -webkit prex IE9, Firefox, Opera second-class citizensMonday, September 12, 11 117. the WebKit problemMonday, September 12, 11 118. the WebKit problem do WebKit development for mobileMonday, September 12, 11 119. the WebKit problem do WebKit development for mobile but also take care of the othersMonday, September 12, 11 120. the WebKit problem do WebKit development for mobile but also take care of the others please?Monday, September 12, 11 121. we need to forget and learnMonday, September 12, 11 122. forget aboutMonday, September 12, 11 123. forget about pixelsMonday, September 12, 11 124. forget about pixels static designsMonday, September 12, 11 125. forget about pixels static designs desktop frameworks (ok, not always)Monday, September 12, 11 126. forget about pixels static designs desktop frameworks (ok, not always) always connectedMonday, September 12, 11 127. forget about pixels static designs desktop frameworks (ok, not always) always connected unlimited powerMonday, September 12, 11 128. forget about pixels static designs desktop frameworks (ok, not always) always connected unlimited power everyone see the sameMonday, September 12, 11 129. forget about pixels static designs desktop frameworks (ok, not always) always connected unlimited power everyone see the same insulting your usersMonday, September 12, 11 130. forget about pixels static designs desktop frameworks (ok, not always) always connected unlimited power everyone see the same insulting your users device conditionalsMonday, September 12, 11 131. learn aboutMonday, September 12, 11 132. learn about server-side detectionMonday, September 12, 11 133. learn about server-side detection progressive enhancementMonday, September 12, 11 134. learn about server-side detection progressive enhancement responsive design, but....Monday, September 12, 11 135. learn about server-side detection progressive enhancement responsive design, but.... mobile usabilityMonday, September 12, 11 136. learn about server-side detection progressive enhancement responsive design, but.... mobile usability mobile use casesMonday, September 12, 11 137. learn about server-side detection progressive enhancement responsive design, but.... mobile usability mobile use cases best experience for each contextMonday, September 12, 11 138. learn about server-side detection progressive enhancement responsive design, but.... mobile usability mobile use cases best experience for each context the top model approach, aka WPOMonday, September 12, 11 139. learn about server-side detection progressive enhancement responsive design, but.... mobile usability mobile use cases best experience for each context the top model approach, aka WPO gain user loyaltyMonday, September 12, 11 140. learn aboutMonday, September 12, 11 141. learn aboutwhats the viewport and how appliesto our designsMonday, September 12, 11 142. learn about whats the viewport and how applies to our designs whats the target density (pixel ratio)Monday, September 12, 11 143. learn about whats the viewport and how applies to our designs whats the target density (pixel ratio) how to x elements on screenMonday, September 12, 11 144. learn about whats the viewport and how applies to our designs whats the target density (pixel ratio) how to x elements on screen how background code worksMonday, September 12, 11 145. learn about whats the viewport and how applies to our designs whats the target density (pixel ratio) how to x elements on screen how background code works data URI - inlining contentMonday, September 12, 11 146. mobile web toolkitMonday, September 12, 11 147. emulators www.mobilexweb.com/emulatorsMonday, September 12, 11 148. friendslots of themMonday, September 12, 11 149. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.comMonday, September 12, 11 150. device libraries detect devices and abilities from server-side manually tested www.wur.com www.deviceatlas.comMonday, September 12, 11 151. debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinrephonegap.github.com/weinre debug.phonegap.comMonday, September 12, 11 152. performance tools just starting... http://stevesouders.com/mobileperf/Monday, September 12, 11 153. and what about capabilities today?Monday, September 12, 11 154. warning....Monday, September 12, 11 155. oine installationHTML53.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 156. oine installation Install a package on the deviceHTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 157. oine installation Install a package on the device Complex to debug / reloadHTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 158. oine installation Install a package on the device Complex to debug / reload Buggy on some platformsHTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 159. oine installation Install a package on the device Complex to debug / reload Buggy on some platforms online / oine eventsHTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 160. oine installation Install a package on the device Complex to debug / reload Buggy on some platforms online / oine events on iOS can be mixed with icons and full-screen webapp metatagsHTML53.0+ 2.1+ 6.0+ Mobile 11+ 5.0+Monday, September 12, 11 161. geolocation Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 162. geolocation GPS, A-GPS, Wi-Fi, cells Geolocation2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 163. 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 164. 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 165. 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 166. oine web storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 167. oine web storage persistent and session storage Web Storage2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 168. oine web storage persistent and session storage key/value (strings) Web Storage2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 169. oine web storage persistent and session storage key/value (strings) (some) allow object storage Web Storage2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 170. oine 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 171. oine web storage persistent and session storage key/value (strings) (some) allow object storage limit space, non-standard ~5Mb be careful with private browsing Web Storage2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 172. oine sql storagedeprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 173. oine sql storage persistent and session storagedeprecated2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 174. oine sql storage persistent and session storage key/value (strings)deprecated2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 175. oine sql storage persistent and session storage key/value (strings) (some) allow object storagedeprecated2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 176. oine sql storage persistent and session storage key/value (strings) (some) allow object storage limit space, non-standard ~5Mbdeprecated 2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 177. oine sql storage persistent and session storage key/value (strings) (some) allow object storage limit space, non-standard ~5Mb be careful with private browsingdeprecated2.2+ 2.0+ 6.0+ Mobile 11+Monday, September 12, 11 178. multimedia API Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 179. multimedia API audio and video tags Web Storage3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 180. multimedia API audio and video tags javascript api & events Web Storage3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 181. multimedia API audio and video tags javascript api & events codecs nightmare Web Storage3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+Monday, September 12, 11 182. server-sent events Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11 183. server-sent events EventSource Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11 184. server-sent events EventSource reduce AJAX/Comet solutions Server-Sent events 4.1+ Mobile 11+ 6.0+Monday, September 12, 11 185. 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 186. web sockets web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11 187. web sockets Evolution of bi-directional communication web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11 188. web sockets Evolution of bi-directionalcommunication reduce AJAX/Comet solutions web sockets 4.2+6.1+Mobile 11+ 6.0+Monday, September 12, 11 189. web sockets Evolution of bi-directionalcommunication reduce AJAX/Comet solutions be careful with proxies/3g connections web sockets 4.2+ 6.1+ Mobile 11+ 6.0+Monday, September 12, 11 190. web sockets Evolution of bi-directionalcommunication 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 191. web sockets Evolution of bi-directionalcommunication 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 192. web workersweb workers 6.0+ Mobile 11+ 6.0+Monday, September 12, 11 193. web workers threading in JavaScriptweb workers6.0+Mobile 11+ 6.0+Monday, September 12, 11 194. web workers threading in JavaScript important for performanceweb workers 6.0+Mobile 11+ 6.0+Monday, September 12, 11 195. web workers threading in JavaScript important for performance worker without DOM manipulationweb workers6.0+ Mobile 11+ 6.0+Monday, September 12, 11 196. 2d drawing api (canvas)HTML51.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 197. 2d drawing api (canvas) great supportHTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 198. 2d drawing api (canvas) great support javascript-based drawingHTML51.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 199. 2d drawing api (canvas) great support javascript-based drawing (some) allows data URI exportHTML51.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 200. svg SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 201. svg old standard SVG2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 202. svg old standard scalable vector graphics SVG2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 203. svg old standard scalable vector graphics (some) allows inline tag SVG2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 204. svg old standard scalable vector graphics (some) allows inline 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 205. 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+ 9.0+ Mob 10+ / Mini 5 4.0+Monday, September 12, 11 206. motion sensors DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11 207. motion sensors accelerometer / gyroscope / magnetometer DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11 208. motion sensors accelerometer / gyroscope / magnetometer onorientationchange DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11 209. motion sensors accelerometer / gyroscope / magnetometer onorientationchange window.orientation DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11 210. motion sensors accelerometer / gyroscope / magnetometer onorientationchange window.orientation games, visual eects, pressure detection? DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz)Monday, September 12, 11 211. motion sensors accelerometer / gyroscope / magnetometer onorientationchange window.orientation games, visual eects, 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 212. new form controls HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11 213. new form controls variable support HTML52.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11 214. new form controls variable support basic=dierent virtual keyboard HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)Monday, September 12, 11 215. new form controls variable support basic=dierent 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 216. new form controls variable support basic=dierent 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 217. new form controls variable support basic=dierent 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 218. touch events Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11 219. touch events iOS specication Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11 220. touch events iOS specication some dierences between implementations Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11 221. touch events iOS specication some dierences between implementations (some) multi-touch Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11 222. touch events iOS specication some dierences between implementations (some) multi-touch touchstart, touchmove, touchend,touchcancel Touch events 3.0+ 2.1+ 6.1+ 6.0+Monday, September 12, 11 223. touch events iOS specication some dierences 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 224. css3 basic CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11 225. css3 basic basic new styling CSS 31.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11 226. 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 227. css3 basic basic new styling rounded borders, opacity (some) still requires prex CSS 31.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11 228. css3 basic basic new styling rounded borders, opacity (some) still requires prex -webkit, -o, -moz, -ms CSS 31.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+Monday, September 12, 11 229. css3 transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11 230. css3 transforms basic 2d transforms CSS 32.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11 231. 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 232. css3 transforms basic 2d transforms -webkit, -o, -moz, -ms rotate, scale, skew, translate CSS 32.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11 233. css3 transforms basic 2d transforms -webkit, -o, -moz, -ms rotate, scale, skew, translate (some) matrix CSS 32.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11 234. css3 transforms basic 2d transforms -webkit, -o, -moz, -ms rotate, scale, skew, translate (some) matrix (some) 3d transforms CSS 32.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+Monday, September 12, 11 235. css3 transitions CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+Monday, September 12, 11 236. css3 transitions basic animations between 2 states CSS 32.0+ 2.0+ 6.0+10+ 6.0+ Anna+Monday, September 12, 11 237. css3 transitions basic animations between 2 states prex CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+Monday, September 12, 11 238. css3 animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11 239. css3 animations keyframe animations CSS 32.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11 240. css3 animations keyframe animations attribute prex and keyframe prex CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11 241. css3 animations keyframe animations attribute prex and keyframe prex duplication :S CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+Monday, September 12, 11 242. what is just starting...?Monday, September 12, 11 243. apis starting to appearMonday, September 12, 11 244. apis starting to appear XMLHttpRequest 2 - Android 3.0Monday, September 12, 11 245. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0Monday, September 12, 11 246. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications API - Firefox 6.0Monday, September 12, 11 247. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications API - Firefox 6.0 Network Information API - Android 2.2+Monday, September 12, 11 248. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications API - Firefox 6.0 Network Information API - Android 2.2+ File API and FileReader API - Android 3.0Monday, September 12, 11 249. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications 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 250. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications API - Firefox 6.0 Network Information API - Android 2.2+ File API and FileReader API - Android 3.0 CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ Media Camera API - Android 3.0Monday, September 12, 11 251. apis starting to appear XMLHttpRequest 2 - Android 3.0 Navigation Timing API - Internet Explorer 9.0 Notications API - Firefox 6.0 Network Information API - Android 2.2+ File API and FileReader API - Android 3.0 CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ Media Camera API - Android 3.0 IndexedDB - Firefox 6.0Monday, September 12, 11 252. and what to expectin the future?Monday, September 12, 11 253. for next year...Monday, September 12, 11 254. for next year... Augmented Reality on the webMonday, September 12, 11 255. for next year... Augmented Reality on the web Camera APIMonday, September 12, 11 256. for next year... Augmented Reality on the web Camera API MathMLMonday, September 12, 11 257. for next year... Augmented Reality on the web Camera API MathML Idle detectionMonday, September 12, 11 258. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detectionMonday, September 12, 11 259. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL)Monday, September 12, 11 260. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL) Native integration APIMonday, September 12, 11 261. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL) Native integration API Contacts and Calendar APIMonday, September 12, 11 262. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL) Native integration API Contacts and Calendar API Messaging APIMonday, September 12, 11 263. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL) Native integration API Contacts and Calendar API Messaging API Orientation LockMonday, September 12, 11 264. for next year... Augmented Reality on the web Camera API MathML Idle detection Speech detection 3D Drawing API (aka WebGL) Native integration API Contacts and Calendar API Messaging API Orientation Lock Debugging toolsMonday, September 12, 11 265. working on these APIs...Monday, September 12, 11 266. working on these APIs... W3C Device APIs Working GroupMonday, September 12, 11 267. working on these APIs... W3C Device APIs Working Grouphttp://www.w3.org/2009/dap/Monday, September 12, 11 268. working on these APIs... W3C Device APIs Working Grouphttp://www.w3.org/2009/dap/ Mozilla WebAPI eort (3-6 months)Monday, September 12, 11 269. working on these APIs... W3C Device APIs Working Grouphttp://www.w3.org/2009/dap/ Mozilla WebAPI eort (3-6 months)https://wiki.mozilla.org/WebAPIMonday, September 12, 11 270. working on these APIs... W3C Device APIs Working Grouphttp://www.w3.org/2009/dap/ Mozilla WebAPI eort (3-6 months)https://wiki.mozilla.org/WebAPI WACMonday, September 12, 11 271. working on these APIs... W3C Device APIs Working Grouphttp://www.w3.org/2009/dap/ Mozilla WebAPI eort (3-6 months)https://wiki.mozilla.org/WebAPI WAChttp://www.wacapps.net/Monday, September 12, 11 272. can i use apis today?Monday, September 12, 11 273. can i use apis today? PhoneGapMonday, September 12, 11 274. can i use apis today? PhoneGap http://www.phonegap.comMonday, September 12, 11 275. can i use apis today? PhoneGap http://www.phonegap.com BlackBerry WebWorksMonday, September 12, 11 276. can i use apis today? PhoneGap http://www.phonegap.com BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/Monday, September 12, 11 277. can i use apis today? PhoneGap http://www.phonegap.com BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ Nokia webappsMonday, September 12, 11 278. 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 279. some last advicesMonday, September 12, 11 280. Monday, September 12, 11 281. performance, performanceMonday, September 12, 11 282. good practicesMonday, September 12, 11 283. dont be fanaticphoto by Kurt Christensen (ickr)Monday, September 12, 11 284. be multiplatformMonday, September 12, 11 285. best experience forevery contextMonday, September 12, 11 286. you can reach a goodthank you!experience [email protected] twitter: @rt www.mobilexweb.comPictures)from)freedigitalphotos.net)Monday, September 12, 11