Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Html5 Apps

on

  • 2,510 views

Slides of talk I gave at appworks in Oslo

Slides of talk I gave at appworks in Oslo

Statistics

Views

Total Views
2,510
Views on SlideShare
2,509
Embed Views
1

Actions

Likes
6
Downloads
61
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Apps Presentation Transcript

  • 1. HTML5 Apps Appworks 2010 Oslo Nikolai Onken 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. Friday, October 29, 2010
  • 7. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Friday, October 29, 2010
  • 8. Friday, October 29, 2010
  • 9. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  • 10. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  • 11. 30th July 2009 14 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • 12. 30th July 2009 14 Stores 23rd September 2009 23 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • 13. 30th July 2009 14 Stores 23rd September 2009 23 Stores 2nd December 2009 26 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • 14. October 2010 96 Apptores - WOA http://www.wipconnector.com/appstores Friday, October 29, 2010
  • 15. Cross Platform Friday, October 29, 2010
  • 16. Friday, October 29, 2010
  • 17. Objective-C Friday, October 29, 2010
  • 18. Objective-C Symbian C Friday, October 29, 2010
  • 19. Objective-C Symbian C Java Friday, October 29, 2010
  • 20. Objective-C Symbian C Java Java Friday, October 29, 2010
  • 21. Objective-C Symbian C Java Java .NET Friday, October 29, 2010
  • 22. Objective-C Symbian C Java Java .NET ... Friday, October 29, 2010
  • 23. HTML Friday, October 29, 2010
  • 24. Engine of the web http://www.flickr.com/photos/robadob/88901885/ Friday, October 29, 2010
  • 25. iPhone - First usable mobile browser http://www.flickr.com/photos/chris_radcliff/2947219465/ Friday, October 29, 2010
  • 26. http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/ Friday, October 29, 2010
  • 27. Friday, October 29, 2010
  • 28. http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  • 29. 71% of all phones have a modern xTML web browser. http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  • 30. App Store without Apple! Friday, October 29, 2010
  • 31. Your Appshop facts Friday, October 29, 2010
  • 32. Your Appshop facts • 100% HTML5 Friday, October 29, 2010
  • 33. Your Appshop facts • 100% HTML5 • Apps work offline Friday, October 29, 2010
  • 34. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 Friday, October 29, 2010
  • 35. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway Friday, October 29, 2010
  • 36. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway • It feels native Friday, October 29, 2010
  • 37. Friday, October 29, 2010
  • 38. Friday, October 29, 2010
  • 39. Friday, October 29, 2010
  • 40. What is a HTML5 App? Friday, October 29, 2010
  • 41. 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. Types of "Apps" Friday, October 29, 2010
  • 47. Types of "Apps" • Preinstalled Friday, October 29, 2010
  • 48. Types of "Apps" • Preinstalled • Native App (from "some" app store) Friday, October 29, 2010
  • 49. Types of "Apps" • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources Friday, October 29, 2010
  • 50. Types of "Apps" • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources • HTML5 App access by a capable runtime Friday, October 29, 2010
  • 51. Friday, October 29, 2010
  • 52. Layout index.html Friday, October 29, 2010
  • 53. Layout index.html Design style.css Friday, October 29, 2010
  • 54. Layout index.html Design style.css AJAX Library Friday, October 29, 2010
  • 55. Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • 56. PhoneGap Friday, October 29, 2010
  • 57. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Friday, October 29, 2010
  • 58. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Friday, October 29, 2010
  • 59. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Friday, October 29, 2010
  • 60. http://phonegap.pbworks.com/Roadmap Friday, October 29, 2010
  • 61. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Friday, October 29, 2010
  • 62. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Friday, October 29, 2010
  • 63. Device support Friday, October 29, 2010
  • 64. Pros Cons Friday, October 29, 2010
  • 65. Pros Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • 66. Pros • Good browsers Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • 67. Pros • Good browsers • Many device APIs Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • 68. Pros • Good browsers • Many device APIs • Extendable webview in most cases Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • 69. Pros • Good browsers • Many device APIs • Extendable webview in most cases • Open source Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • 70. W3C Widgets Friday, October 29, 2010
  • 71. Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • 72. Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • 73. Layout index.html Design style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • 74. Layout index.html Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • 75. Layout index.html = Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • 76. Layout index.html W3C Widget = Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • 77. What is a W3C Widget? Friday, October 29, 2010
  • 78. What is a W3C Widget? Friday, October 29, 2010
  • 79. What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Friday, October 29, 2010
  • 80. Devices? ...yes Friday, October 29, 2010
  • 81. Pros Cons Friday, October 29, 2010
  • 82. Pros Cons • Only few device APIs Friday, October 29, 2010
  • 83. Pros Cons • Only few device APIs • No possibility to introduce custom APIs Friday, October 29, 2010
  • 84. Pros Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • 85. Pros • Very simple to create Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • 86. Pros • Very simple to create • Easy to test Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • 87. Pros • Very simple to create • Easy to test • For certain application usecaes the Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • 88. Other runtimes? Friday, October 29, 2010
  • 89. Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • 90. Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • 91. Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • 92. Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • 93. Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • 94. Almost for free Friday, October 29, 2010
  • 95. Almost for free • Facebook widget Friday, October 29, 2010
  • 96. Almost for free • Facebook widget • Dashboard widget Friday, October 29, 2010
  • 97. Almost for free • Facebook widget • Dashboard widget • Website widget Friday, October 29, 2010
  • 98. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget Friday, October 29, 2010
  • 99. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • 100. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • 101. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • 102. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • 103. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • 104. A Phone is ... Friday, October 29, 2010
  • 105. http://www.flickr.com/photos/kratz/1984004945/ Friday, October 29, 2010
  • 106. http://www.flickr.com/photos/mbiddulph/3087388964/ Friday, October 29, 2010
  • 107. http://www.flickr.com/photos/redstamp/4222841946/ Friday, October 29, 2010
  • 108. • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Friday, October 29, 2010
  • 109. Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • Your own Spec :) http://phonegap.com/ Friday, October 29, 2010
  • 110. Cross Platform? Friday, October 29, 2010
  • 111. EventNinja Friday, October 29, 2010
  • 112. Layout index.html Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • 113. Layout index.html Design Icon style.css Database Configuration AJAX Library config.xml Friday, October 29, 2010
  • 114. Events, Layout index.html a Calendar Design Icon style.css Database Configuration AJAX Library config.xml Friday, October 29, 2010
  • 115. http://bit.ly/webdev-events Friday, October 29, 2010
  • 116. http://bit.ly/webdev-events Friday, October 29, 2010
  • 117. http://bit.ly/webdev-events Friday, October 29, 2010
  • 118. Friday, October 29, 2010
  • 119. Friday, October 29, 2010
  • 120. Friday, October 29, 2010
  • 121. Friday, October 29, 2010
  • 122. Friday, October 29, 2010
  • 123. Friday, October 29, 2010
  • 124. Friday, October 29, 2010
  • 125. Friday, October 29, 2010
  • 126. Friday, October 29, 2010
  • 127. Friday, October 29, 2010
  • 128. Testing Friday, October 29, 2010
  • 129. Best Practices Friday, October 29, 2010
  • 130. Best Practices • test on the desktop Friday, October 29, 2010
  • 131. Best Practices • test on the desktop • test on the desktop Friday, October 29, 2010
  • 132. Best Practices • test on the desktop • test on the desktop • test on the desktop Friday, October 29, 2010
  • 133. Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot Friday, October 29, 2010
  • 134. 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
  • 135. 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
  • 136. Ripple Friday, October 29, 2010
  • 137. Libraries Friday, October 29, 2010
  • 138. What is out there? Friday, October 29, 2010
  • 139. What is out there? •XUI Friday, October 29, 2010
  • 140. What is out there? •XUI •Sencha Touch Friday, October 29, 2010
  • 141. What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) Friday, October 29, 2010
  • 142. What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile Friday, October 29, 2010
  • 143. What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS Friday, October 29, 2010
  • 144. What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS •... Friday, October 29, 2010
  • 145. EmbedJS an approach to cross platform development Friday, October 29, 2010
  • 146. Friday, October 29, 2010
  • 147. Friday, October 29, 2010
  • 148. Friday, October 29, 2010
  • 149. The Supported Devices ... and there will be more to embed JavaScript on Friday, October 29, 2010
  • 150. http://www.flickr.com/photos/tacoekkel/25538919/ Friday, October 29, 2010
  • 151. http://www.flickr.com/photos/hugo90/3916794427/ Friday, October 29, 2010
  • 152. Shrink Your API 20kB 8kB Friday, October 29, 2010
  • 153. Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
  • 154. Simple queries > simple library function Only ".class" and "#id" queries vs. Friday, October 29, 2010
  • 155. Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function Friday, October 29, 2010
  • 156. 13 LOC Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function ~200 LOC Friday, October 29, 2010
  • 157. Friday, October 29, 2010
  • 158. At Runtime At Build Time Friday, October 29, 2010
  • 159. 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
  • 160. Tooling Friday, October 29, 2010
  • 161. Friday, October 29, 2010
  • 162. Friday, October 29, 2010
  • 163. Friday, October 29, 2010
  • 164. Friday, October 29, 2010
  • 165. Friday, October 29, 2010
  • 166. Friday, October 29, 2010
  • 167. Friday, October 29, 2010
  • 168. The future Friday, October 29, 2010
  • 169. HumanApi Friday, October 29, 2010
  • 170. HumanApi • The browser accessing hardware Friday, October 29, 2010
  • 171. HumanApi • The browser accessing hardware • Reading your heartrate Friday, October 29, 2010
  • 172. HumanApi • The browser accessing hardware • Reading your heartrate • All JavaScript/HTML/CSS Friday, October 29, 2010
  • 173. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Friday, October 29, 2010
  • 174. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Friday, October 29, 2010
  • 175. Turn on the lights Friday, October 29, 2010
  • 176. Turn on the lights • http://github.com/nonken/arduinojs Friday, October 29, 2010
  • 177. thank you http://uxebu.com Nikolai Onken, uxebu nikolai@uxebu.com @uxebu @nonken Friday, October 29, 2010