Html5 Development

1,555 views
1,430 views

Published on

Slides of the talk I gave at the Vodafone Developer Day in Athens

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

  • Be the first to like this

No Downloads
Views
Total views
1,555
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 Development

  1. 1. Mobile app development Nikolai Onken @nonken - uxebu Friday, October 29, 2010
  2. 2. Friday, October 29, 2010
  3. 3. @nonken Friday, October 29, 2010
  4. 4. Friday, October 29, 2010
  5. 5. We open the mobile web. Friday, October 29, 2010
  6. 6. © Vodafone Group 2010 v1.0 April 2010 5 todays schedule Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  7. 7. Friday, October 29, 2010
  8. 8. • Widgets a.k.a. HTML5 apps Friday, October 29, 2010
  9. 9. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example Friday, October 29, 2010
  10. 10. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example • Mobile development guide Friday, October 29, 2010
  11. 11. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example • Mobile development guide • Object browser Friday, October 29, 2010
  12. 12. © Vodafone Group 2010 v1.0 April 2010 7 Widgets/HTML5 apps Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  13. 13. © Vodafone Group 2010 v1.0 April 2010 8 Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  14. 14. © Vodafone Group 2010 v1.0 April 2010 9 EventNinja, a mobile app by example Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  15. 15. Friday, October 29, 2010
  16. 16. Friday, October 29, 2010
  17. 17. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  18. 18. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  19. 19. http://bit.ly/distimo-appstores 30th July 2009 14 Stores Friday, October 29, 2010
  20. 20. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores Friday, October 29, 2010
  21. 21. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores 2nd December 2009 26 Stores Friday, October 29, 2010
  22. 22. October 2010 96 Apptores - WOA http://www.wipconnector.com/appstores Friday, October 29, 2010
  23. 23. Friday, October 29, 2010
  24. 24. Objective-C Friday, October 29, 2010
  25. 25. Objective-C Symbian C Friday, October 29, 2010
  26. 26. Objective-C JavaSymbian C Friday, October 29, 2010
  27. 27. Objective-C JavaSymbian C Java Friday, October 29, 2010
  28. 28. Objective-C JavaSymbian C .NETJava Friday, October 29, 2010
  29. 29. Objective-C JavaSymbian C .NETJava ... Friday, October 29, 2010
  30. 30. Cross Platform Friday, October 29, 2010
  31. 31. HTML Friday, October 29, 2010
  32. 32. http://www.flickr.com/photos/robadob/88901885/ Engine of the web Friday, October 29, 2010
  33. 33. http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  34. 34. http://bit.ly/tomiahonen-2010-almanac 71% of all phones have a modern xTML web browser. Friday, October 29, 2010
  35. 35. App Store without Apple! Friday, October 29, 2010
  36. 36. Your Appshop facts Friday, October 29, 2010
  37. 37. Your Appshop facts • 100% HTML5 Friday, October 29, 2010
  38. 38. Your Appshop facts • 100% HTML5 • Apps work offline Friday, October 29, 2010
  39. 39. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 Friday, October 29, 2010
  40. 40. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway Friday, October 29, 2010
  41. 41. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway • It feels native Friday, October 29, 2010
  42. 42. Friday, October 29, 2010
  43. 43. Friday, October 29, 2010
  44. 44. Friday, October 29, 2010
  45. 45. Friday, October 29, 2010
  46. 46. } Friday, October 29, 2010
  47. 47. }? Friday, October 29, 2010
  48. 48. Friday, October 29, 2010
  49. 49. Layout index.html Friday, October 29, 2010
  50. 50. Design style.css Layout index.html Friday, October 29, 2010
  51. 51. Design style.css Layout index.html AJAX Library Friday, October 29, 2010
  52. 52. Database Design style.css Layout index.html AJAX Library Friday, October 29, 2010
  53. 53. Layout index.html Design style.css Database AJAX Library Friday, October 29, 2010
  54. 54. Layout index.html Design style.css Database AJAX Library Friday, October 29, 2010
  55. 55. Layout index.html Design style.css Database AJAX Library Configuration config.xml Friday, October 29, 2010
  56. 56. Layout index.html Design style.css Database AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  57. 57. Layout index.html Design style.css Database AJAX Library Configuration config.xml = Icon Friday, October 29, 2010
  58. 58. Layout index.html Design style.css Database AJAX Library Configuration config.xml Widget / html5 app = Icon Friday, October 29, 2010
  59. 59. What is a HTML5 app? Friday, October 29, 2010
  60. 60. What is a HTML5 app? Friday, October 29, 2010
  61. 61. What is a HTML5 app? •HTML •CSS •JavaScript •config.xml •zip it •rename to *.wgt Friday, October 29, 2010
  62. 62. On any phone? Friday, October 29, 2010
  63. 63. ...yes W3C Widgets Friday, October 29, 2010
  64. 64. ...yes W3C Widgets not purely but great HTML support Friday, October 29, 2010
  65. 65. Almost for free Friday, October 29, 2010
  66. 66. Almost for free •Facebook widget Friday, October 29, 2010
  67. 67. Almost for free •Facebook widget •Dashboard widget Friday, October 29, 2010
  68. 68. Almost for free •Facebook widget •Dashboard widget •Website widget Friday, October 29, 2010
  69. 69. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget Friday, October 29, 2010
  70. 70. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  71. 71. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  72. 72. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  73. 73. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  74. 74. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  75. 75. A Phone is ... Friday, October 29, 2010
  76. 76. http://www.flickr.com/photos/kratz/1984004945/ Friday, October 29, 2010
  77. 77. http://www.flickr.com/photos/mbiddulph/3087388964/ Friday, October 29, 2010
  78. 78. http://www.flickr.com/photos/redstamp/4222841946/ Friday, October 29, 2010
  79. 79. • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Friday, October 29, 2010
  80. 80. Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL > WAC http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • Your own Spec :) http://phonegap.com/ Friday, October 29, 2010
  81. 81. http://bit.ly/vf-jil-docs Friday, October 29, 2010
  82. 82. http://bit.ly/vf-jil-docs Friday, October 29, 2010
  83. 83. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File Friday, October 29, 2010
  84. 84. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Friday, October 29, 2010
  85. 85. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Friday, October 29, 2010
  86. 86. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Friday, October 29, 2010
  87. 87. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Friday, October 29, 2010
  88. 88. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Audio Friday, October 29, 2010
  89. 89. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Audio SMS, MMS, ... Friday, October 29, 2010
  90. 90. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } Friday, October 29, 2010
  91. 91. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } var player = Widget.Multimedia.AudioPlayer; player.open("myAudioFile.mp3"); player.play(1); Friday, October 29, 2010
  92. 92. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } var player = Widget.Multimedia.AudioPlayer; player.open("myAudioFile.mp3"); player.play(1); if (Widget.Device.RadioInfo.isRoaming){ alert("Money Money Money"); } Friday, October 29, 2010
  93. 93. EventNinja Friday, October 29, 2010
  94. 94. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  95. 95. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  96. 96. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Events, a Calendar Friday, October 29, 2010
  97. 97. http://bit.ly/webdev-events Friday, October 29, 2010
  98. 98. http://bit.ly/webdev-events Friday, October 29, 2010
  99. 99. http://bit.ly/webdev-events Friday, October 29, 2010
  100. 100. Friday, October 29, 2010
  101. 101. Friday, October 29, 2010
  102. 102. Friday, October 29, 2010
  103. 103. Friday, October 29, 2010
  104. 104. Friday, October 29, 2010
  105. 105. Friday, October 29, 2010
  106. 106. Friday, October 29, 2010
  107. 107. Friday, October 29, 2010
  108. 108. Friday, October 29, 2010
  109. 109. Friday, October 29, 2010
  110. 110. Mobile dev guide Friday, October 29, 2010
  111. 111. Do what your runtime can do Not more Friday, October 29, 2010
  112. 112. Remember JavaScript Friday, October 29, 2010
  113. 113. CSS3 - mobile runtimes are often ahead Friday, October 29, 2010
  114. 114. Semantics? A short story Friday, October 29, 2010
  115. 115. Friday, October 29, 2010
  116. 116. <ul> <li>Hi</li> </ul> Friday, October 29, 2010
  117. 117. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> Friday, October 29, 2010
  118. 118. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> <a href=””>Hi</a> Friday, October 29, 2010
  119. 119. IE anyone? Friday, October 29, 2010
  120. 120. IE anyone? Friday, October 29, 2010
  121. 121. IE anyone? Friday, October 29, 2010
  122. 122. Communications Friday, October 29, 2010
  123. 123. • JSONP Communications Friday, October 29, 2010
  124. 124. • JSONP • YQL:An amazing tool! Communications Friday, October 29, 2010
  125. 125. Scaling and ppi Never use absolute sizing! Friday, October 29, 2010
  126. 126. Testing Friday, October 29, 2010
  127. 127. Best Practices Friday, October 29, 2010
  128. 128. Best Practices • test on the desktop Friday, October 29, 2010
  129. 129. Best Practices • test on the desktop • test on the desktop Friday, October 29, 2010
  130. 130. Best Practices • test on the desktop • test on the desktop • test on the desktop Friday, October 29, 2010
  131. 131. Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot Friday, October 29, 2010
  132. 132. Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot • alert() IS your friend! Friday, October 29, 2010
  133. 133. Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot • alert() IS your friend! • simplify your CSS Friday, October 29, 2010
  134. 134. Ripple Friday, October 29, 2010
  135. 135. Libraries Friday, October 29, 2010
  136. 136. What is out there? Friday, October 29, 2010
  137. 137. What is out there? •XUI Friday, October 29, 2010
  138. 138. What is out there? •XUI •Jo Friday, October 29, 2010
  139. 139. What is out there? •XUI •Jo •Sencha Touch Friday, October 29, 2010
  140. 140. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) Friday, October 29, 2010
  141. 141. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile Friday, October 29, 2010
  142. 142. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS Friday, October 29, 2010
  143. 143. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS •... Friday, October 29, 2010
  144. 144. EmbedJS an approach to cross platform development Friday, October 29, 2010
  145. 145. Friday, October 29, 2010
  146. 146. Friday, October 29, 2010
  147. 147. Friday, October 29, 2010
  148. 148. The Supported Devices ... and there will be more to embed JavaScript on Friday, October 29, 2010
  149. 149. http://www.flickr.com/photos/tacoekkel/25538919/ Friday, October 29, 2010
  150. 150. http://www.flickr.com/photos/hugo90/3916794427/ Friday, October 29, 2010
  151. 151. Shrink Your API 20kB 8kB Friday, October 29, 2010
  152. 152. Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
  153. 153. vs. Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
  154. 154. vs. Simple queries > simple library function Only ".class" and "#id" queries Full fledged queries > Full blown library function Friday, October 29, 2010
  155. 155. vs. Simple queries > simple library function Only ".class" and "#id" queries Full fledged queries > Full blown library function 13 LOC ~200 LOC Friday, October 29, 2010
  156. 156. Friday, October 29, 2010
  157. 157. At Runtime At Build Time Friday, October 29, 2010
  158. 158. dojo-blackberry.js dojo-blackberry46.js dojo-nokia-wrt.js dojo-opera.js dojo-webkit-mobile.js dojo-windows-mobile.js Friday, October 29, 2010
  159. 159. Tools • Dragonfly • Firebug • Ripple • Apparat.io Friday, October 29, 2010
  160. 160. Testing services • Perfecto Mobile - http://vf.perfectomobile.com Promocode: vfwidgets • Ask for phones here Friday, October 29, 2010
  161. 161. Set headers... and learn Send iPhone headers from within Safari for example Friday, October 29, 2010
  162. 162. Hmmmm, alert(“Hi”); Friday, October 29, 2010
  163. 163. Create routines Friday, October 29, 2010
  164. 164. Create routines • Test the unbuild source on the desktop Friday, October 29, 2010
  165. 165. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop Friday, October 29, 2010
  166. 166. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop • Test the build source on a mobile browser Friday, October 29, 2010
  167. 167. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop • Test the build source on a mobile browser • Package and then test the app on the device Friday, October 29, 2010
  168. 168. Object Browser Friday, October 29, 2010
  169. 169. Friday, October 29, 2010
  170. 170. Friday, October 29, 2010
  171. 171. For devs? Friday, October 29, 2010
  172. 172. Friday, October 29, 2010
  173. 173. Friday, October 29, 2010
  174. 174. Friday, October 29, 2010
  175. 175. Friday, October 29, 2010
  176. 176. Friday, October 29, 2010
  177. 177. Open Source Friday, October 29, 2010
  178. 178. Open Source •a developer must have Friday, October 29, 2010
  179. 179. Open Source •a developer must have •developer.vodafone.com http://developer.vodafone.com/object-browser Friday, October 29, 2010
  180. 180. Open Source •a developer must have •developer.vodafone.com http://developer.vodafone.com/object-browser •github http://github.com/wolframkriesing/object-browser Friday, October 29, 2010
  181. 181. Friday, October 29, 2010
  182. 182. index.html Friday, October 29, 2010
  183. 183. index.html Friday, October 29, 2010
  184. 184. index.html Friday, October 29, 2010
  185. 185. index.html Friday, October 29, 2010
  186. 186. index.html Friday, October 29, 2010
  187. 187. config.xml Friday, October 29, 2010
  188. 188. config.xml Friday, October 29, 2010
  189. 189. config.xml Friday, October 29, 2010
  190. 190. config.xml Friday, October 29, 2010
  191. 191. config.xml Friday, October 29, 2010
  192. 192. Demo Friday, October 29, 2010
  193. 193. @nonken Thank you Friday, October 29, 2010

×