Your SlideShare is downloading. ×

Html5 Development

1,291
views

Published on

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

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,291
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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