Html5 Apps

2,495 views
2,389 views

Published on

Slides of talk I gave at appworks in Oslo

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

No Downloads
Views
Total views
2,495
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
63
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Html5 Apps

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

×