The document discusses the challenges and complexities of mobile web development, emphasizing the need for developers to adapt to rapidly changing technologies and standards such as HTML5. It highlights issues like outdated documentation, varying mobile browsers, and the importance of responsive design. Additionally, it offers suggestions for tools and methods to improve mobile web development and user experience.

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

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

3. where?
Monday, September 12, 11

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

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

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

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

8. books
Image from my house
Monday, September 12, 11

9. Monday, September 12, 11

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

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

12. the first answer is no
Monday, September 12, 11

13. the second answer is
yes
Monday, 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.com
Monday, September 12, 11

15. agenda
Monday, September 12, 11

16. agenda
Monday, September 12, 11

17. agenda
‣ why?
Monday, September 12, 11

18. agenda
‣ why?
‣ what’s the problem?
Monday, September 12, 11

19. agenda
‣ why?
‣ what’s the problem?
‣ why are we here?
Monday, September 12, 11

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

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

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

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

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

25. why mobile?
Monday, September 12, 11

26. mobile devices are our
flying cars
Monday, September 12, 11

27. mobile is more about
users
Monday, September 12, 11

28. mobile
Monday, September 12, 11

29. mobile
‣ absolutely personal
Monday, September 12, 11

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

31. mobile
‣ absolutely personal
‣ +5 billions
‣ make us focus
Monday, 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 a
minefield
Photo by World of Good (Flickr)
Malvinas / Falklands Islands
Monday, September 12, 11

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

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

39. lots of platforms
Monday, September 12, 11

40. mobile web appears
Monday, September 12, 11

41. native
vs
web
Monday, September 12, 11

42. WAIT!
Monday, September 12, 11

43. Are you sure?
Monday, September 12, 11

44. native code
vs
javascript
Monday, September 12, 11

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

46. lack of definitions
Monday, September 12, 11

47. when we say mobile web
Monday, September 12, 11

48. when we say mobile web
from a developer’s
perspective it’s using HTML,
CSS and JavaScript to
develop mobile apps
Monday, September 12, 11

49. when we say mobile web
from a developer’s
perspective it’s using HTML,
CSS and JavaScript to
develop mobile apps
(browser or installed)
Monday, September 12, 11

50. what’s the problem
with mobile web?
Monday, September 12, 11

51. we are second class
producers
Monday, September 12, 11

52. second class
Monday, September 12, 11

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

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

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

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

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

58. Testing & debugging
Monday, 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 you
sure to
be happy?
Photo by Ricky David (Flickr)
Monday, September 12, 11

63. What is ?
Monday, September 12, 11

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

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

70. html5
Monday, 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 community
Monday, September 12, 11

73. caniuse.com
• Simplification of the mobile web browser space
• Inaccurate information
Monday, September 12, 11

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

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

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

77. announcing today...
Monday, September 12, 11

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

79. mobile browsers
Monday, September 12, 11

80. mobile browsers
‣ too many
Monday, September 12, 11

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

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

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

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

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

87. mobile browsers
Monday, September 12, 11

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

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

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

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

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

101. and with different
versions...
Monday, September 12, 11

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

103. pseudo-browsers
Monday, September 12, 11

104. pseudobrowsers
Monday, September 12, 11

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

106. pseudobrowsers
‣ mostly on iOS and Android
‣ uses the internal web control
Monday, September 12, 11

107. pseudobrowsers
‣ mostly on iOS and Android
‣ uses the internal web control
‣ have different behavior than the
native!
Monday, September 12, 11

108. Monday, September 12, 11

109. don’t give up yet
Monday, September 12, 11

110. mobile IE reborn
Monday, September 12, 11

111. mobile IE reborn
‣ on Windows Phone Mango, full
Internet Explorer 9 with HTML5
Monday, 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 problem
Monday, September 12, 11

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

115. the WebKit problem
‣ we are doing some things wrong
‣ mostly css3, using only -webkit
prefix
Monday, September 12, 11

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

117. the WebKit problem
Monday, September 12, 11

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

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

122. forget about
Monday, September 12, 11

123. forget about
‣ pixels
Monday, September 12, 11

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

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

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

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

130. forget about
‣ pixels
‣ static designs
‣ desktop frameworks (ok, not always)
‣ always connected
‣ unlimited power
‣ everyone see the same
‣ insulting your users
‣ device conditionals
Monday, September 12, 11

131. learn about
Monday, September 12, 11

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

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

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

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

140. learn about
Monday, September 12, 11

141. learn about
‣ what’s the viewport and how applies
to our designs
Monday, September 12, 11

142. learn about
‣ what’s the viewport and how applies
to our designs
‣ what’s the target density (pixel ratio)
Monday, September 12, 11

143. learn about
‣ what’s the viewport and how applies
to our designs
‣ what’s the target density (pixel ratio)
‣ how to fix elements on screen
Monday, September 12, 11

144. learn about
‣ what’s the viewport and how applies
to our designs
‣ what’s the target density (pixel ratio)
‣ how to fix elements on screen
‣ how background code works
Monday, September 12, 11

145. learn about
‣ what’s the viewport and how applies
to our designs
‣ what’s the target density (pixel ratio)
‣ how to fix elements on screen
‣ how background code works
‣ data URI - inlining content
Monday, September 12, 11

146. mobile web toolkit
Monday, September 12, 11

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

148. friends
lots of them
Monday, September 12, 11

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

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

151. debugging tools
remote web inspector (BB 7.0 y PlayBook)
opera mobile (DragonFly)
weinre
phonegap.github.com/weinre debug.phonegap.com
Monday, September 12, 11

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. offline installation
HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+
Monday, September 12, 11

156. offline installation
‣ Install a package on the device
HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+
Monday, September 12, 11

157. offline installation
‣ Install a package on the device
‣ Complex to debug / reload
HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+
Monday, September 12, 11

158. 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, September 12, 11

159. 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, September 12, 11

160. 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, 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
Geolocation 2.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. offline web storage
Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+
Monday, September 12, 11

167. offline web storage
‣ persistent and session storage
Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+
Monday, September 12, 11

168. 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, September 12, 11

169. 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, September 12, 11

170. 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, September 12, 11

171. 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, September 12, 11

172. offline sql storage
deprecated 2.2+ 2.0+ 6.0+ Mobile 11+
Monday, September 12, 11

173. offline sql storage
‣ persistent and session storage
deprecated 2.2+ 2.0+ 6.0+ Mobile 11+
Monday, September 12, 11

174. offline sql storage
‣ persistent and session storage
‣ key/value (strings)
deprecated 2.2+ 2.0+ 6.0+ Mobile 11+
Monday, September 12, 11

175. offline sql storage
‣ persistent and session storage
‣ key/value (strings)
‣ (some) allow object storage
deprecated 2.2+ 2.0+ 6.0+ Mobile 11+
Monday, September 12, 11

176. 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, September 12, 11

177. 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, 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 Storage 3.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 Storage 3.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 Storage 3.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-directional
communication
‣ reduce AJAX/Comet solutions
web sockets 4.2+ 6.1+ Mobile 11+ 6.0+
Monday, September 12, 11

189. web sockets
‣ Evolution of bi-directional
communication
‣ reduce AJAX/Comet solutions
‣ be careful with proxies/3g connections
web sockets 4.2+ 6.1+ Mobile 11+ 6.0+
Monday, September 12, 11

190. web sockets
‣ Evolution of bi-directional
communication
‣ reduce AJAX/Comet solutions
‣ be careful with proxies/3g connections
‣ special server
web sockets 4.2+ 6.1+ Mobile 11+ 6.0+
Monday, September 12, 11

191. web sockets
‣ Evolution of bi-directional
communication
‣ reduce AJAX/Comet solutions
‣ be careful with proxies/3g connections
‣ special server
‣ standard changed months ago
web sockets 4.2+ 6.1+ Mobile 11+ 6.0+
Monday, September 12, 11

192. web workers
web workers 6.0+ Mobile 11+ 6.0+
Monday, September 12, 11

193. web workers
‣ threading in JavaScript
web workers 6.0+ Mobile 11+ 6.0+
Monday, September 12, 11

194. web workers
‣ threading in JavaScript
‣ important for performance
web workers 6.0+ Mobile 11+ 6.0+
Monday, September 12, 11

195. web workers
‣ threading in JavaScript
‣ important for performance
‣ worker without DOM manipulation
web workers 6.0+ Mobile 11+ 6.0+
Monday, September 12, 11

196. 2d drawing api (canvas)
HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

197. 2d drawing api (canvas)
‣ great support
HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

198. 2d drawing api (canvas)
‣ great support
‣ javascript-based drawing
HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

199. 2d drawing api (canvas)
‣ great support
‣ javascript-based drawing
‣ (some) allows data URI export
HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

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
SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

202. svg
‣ old standard
‣ scalable vector graphics
SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

203. svg
‣ old standard
‣ scalable vector graphics
‣ (some) allows inline <svg> tag
SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

204. svg
‣ old standard
‣ scalable vector graphics
‣ (some) allows inline <svg> tag
‣ (some) allows svg as background
SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

205. svg
‣ old standard
‣ scalable vector graphics
‣ (some) allows inline <svg> tag
‣ (some) allows svg as background
‣ (some) allows svg as font
SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+
Monday, September 12, 11

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 effects, 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 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, 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
HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med)
Monday, September 12, 11

214. new form controls
‣ variable support
‣ basic=different 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=different 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=different 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=different 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 specification
Touch events 3.0+ 2.1+ 6.1+ 6.0+
Monday, September 12, 11

220. touch events
‣ iOS specification
‣ some differences between implementations
Touch events 3.0+ 2.1+ 6.1+ 6.0+
Monday, September 12, 11

221. touch events
‣ iOS specification
‣ some differences between implementations
‣ (some) multi-touch
Touch events 3.0+ 2.1+ 6.1+ 6.0+
Monday, September 12, 11

222. 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, September 12, 11

223. 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, 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 3 1.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 prefix
CSS 3 1.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 prefix
‣ -webkit, -o, -moz, -ms
CSS 3 1.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 3 2.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 3 2.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 3 2.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 3 2.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 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+
Monday, September 12, 11

237. css3 transitions
‣ basic animations between 2 states
‣ prefix
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 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+
Monday, September 12, 11

240. css3 animations
‣ keyframe animations
‣ attribute prefix and keyframe prefix
CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+
Monday, September 12, 11

241. css3 animations
‣ keyframe animations
‣ attribute prefix and keyframe prefix
‣ 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 appear
Monday, September 12, 11

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

245. apis starting to appear
‣ XMLHttpRequest 2 - Android 3.0
‣ Navigation Timing API - Internet Explorer 9.0
Monday, September 12, 11

246. apis starting to appear
‣ XMLHttpRequest 2 - Android 3.0
‣ Navigation Timing API - Internet Explorer 9.0
‣ Notifications API - Firefox 6.0
Monday, September 12, 11

247. apis starting to appear
‣ XMLHttpRequest 2 - Android 3.0
‣ Navigation Timing API - Internet Explorer 9.0
‣ Notifications 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
‣ Notifications API - Firefox 6.0
‣ Network Information API - Android 2.2+
‣ File API and FileReader API - Android 3.0
Monday, September 12, 11

249. apis starting to appear
‣ XMLHttpRequest 2 - Android 3.0
‣ Navigation Timing API - Internet Explorer 9.0
‣ Notifications 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
‣ Notifications API - Firefox 6.0
‣ Network Information API - Android 2.2+
‣ File API and FileReader API - Android 3.0
‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+
‣ Media Camera API - Android 3.0
Monday, September 12, 11

251. apis starting to appear
‣ XMLHttpRequest 2 - Android 3.0
‣ Navigation Timing API - Internet Explorer 9.0
‣ Notifications API - Firefox 6.0
‣ Network Information API - Android 2.2+
‣ File API and FileReader API - Android 3.0
‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+
‣ Media Camera API - Android 3.0
‣ IndexedDB - Firefox 6.0
Monday, September 12, 11

252. and what to expect
in the future?
Monday, September 12, 11

253. for next year...
Monday, September 12, 11

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

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

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

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

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

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

266. working on these APIs...
‣ W3C Device APIs Working Group
Monday, September 12, 11

267. working on these APIs...
W3C Device APIs Working Group
‣
http://www.w3.org/2009/dap/
Monday, September 12, 11

268. working on these APIs...
W3C Device APIs Working Group
‣
http://www.w3.org/2009/dap/
‣ Mozilla WebAPI effort (3-6 months)
Monday, September 12, 11

269. working on these APIs...
W3C Device APIs Working Group
‣
http://www.w3.org/2009/dap/
Mozilla WebAPI effort (3-6 months)
‣
https://wiki.mozilla.org/WebAPI
Monday, September 12, 11

270. working on these APIs...
W3C Device APIs Working Group
‣
http://www.w3.org/2009/dap/
Mozilla WebAPI effort (3-6 months)
‣
https://wiki.mozilla.org/WebAPI
‣ WAC
Monday, September 12, 11

271. working on these APIs...
W3C Device APIs Working Group
‣
http://www.w3.org/2009/dap/
Mozilla WebAPI effort (3-6 months)
‣
https://wiki.mozilla.org/WebAPI
WAC
‣
http://www.wacapps.net/
Monday, September 12, 11

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

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

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

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

280. Monday, September 12, 11

281. performance,
performance
Monday, September 12, 11

282. good practices
Monday, September 12, 11

283. don’t be fanatic
photo by Kurt Christensen
(flickr)
Monday, September 12, 11

284. be multiplatform
Monday, September 12, 11

285. best experience for
every context
Monday, September 12, 11

286. you can reach a good
thank you!
experience
firt.mobi
firtman@gmail.com
twitter: @firt
www.mobilexweb.com
Pictures)from)freedigitalphotos.net)
Monday, September 12, 11