Html5 Apps
6 likes1,219 views
This document discusses HTML5 apps and different approaches for building cross-platform apps, including PhoneGap, W3C Widgets, and other runtimes. It notes that HTML5 apps can access device APIs like the camera and GPS through frameworks like PhoneGap. It also summarizes pros and cons of different approaches, such as PhoneGap providing access to many device APIs but not being a standard, and W3C Widgets being very simple to create but only supporting a few APIs.
Html5 Apps
- 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 CSS dojo Browser OpenSource Web2.0 FrontEnd Usability UserExperience mobile TouchScroll Friday, October 29, 2010
- 8. Friday, October 29, 2010
- 11. http://bit.ly/distimo-appstores 30th July 2009 14 Stores Friday, October 29, 2010
- 12. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores Friday, October 29, 2010
- 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. 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 JavaSymbian C Friday, October 29, 2010
- 20. Objective-C JavaSymbian C Java Friday, October 29, 2010
- 21. Objective-C JavaSymbian C .NETJava Friday, October 29, 2010
- 22. Objective-C JavaSymbian C .NETJava ... Friday, October 29, 2010
- 23. HTML Friday, October 29, 2010
- 24. http://www.flickr.com/photos/robadob/88901885/ Engine of the web Friday, October 29, 2010
- 25. http://www.flickr.com/photos/chris_radcliff/2947219465/ iPhone - First usable mobile browser Friday, October 29, 2010
- 27. Friday, October 29, 2010
- 29. http://bit.ly/tomiahonen-2010-almanac 71% of all phones have a modern xTML web browser. 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
- 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
- 61. Low level APIs Camera Accelerometer Push Notifications... Chromeless Browser PhoneGap browser.eval(“document.geolocation...”) Friday, October 29, 2010
- 62. Low level APIs Camera Accelerometer Push Notifications... Chromeless Browser PhoneGap browser.eval(“document.geolocation...”) Friday, October 29, 2010
- 63. Device support Friday, October 29, 2010
- 64. Pros Cons Friday, October 29, 2010
- 65. Pros •Not a standard (but based on standards) Cons Friday, October 29, 2010
- 66. Pros •Not a standard (but based on standards) •Good browsers Cons Friday, October 29, 2010
- 67. Pros •Not a standard (but based on standards) •Good browsers •Many device APIs Cons Friday, October 29, 2010
- 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. 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. W3C Widgets Friday, October 29, 2010
- 73. Layout index.html Design style.css Database AJAX Library Configuration config.xml Friday, October 29, 2010
- 74. Layout index.html Design style.css Database AJAX Library Configuration config.xml Icon Friday, October 29, 2010
- 75. Layout index.html Design style.css Database AJAX Library Configuration config.xml = Icon Friday, October 29, 2010
- 76. Layout index.html Design style.css Database AJAX Library Configuration config.xml W3C Widget = Icon 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 •Only few device APIs Cons Friday, October 29, 2010
- 83. Pros •Only few device APIs •No possibility to introduce custom APIs Cons Friday, October 29, 2010
- 84. Pros •Only few device APIs •No possibility to introduce custom APIs •Sometimes annoying browser quirks Cons Friday, October 29, 2010
- 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. 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. 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. Other runtimes? Friday, October 29, 2010
- 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. 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. 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. 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. 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. 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. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
- 113. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
- 114. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Events, a Calendar 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. vs. Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
- 155. vs. Simple queries > simple library function Only ".class" and "#id" queries Full fledged queries > Full blown library function Friday, October 29, 2010
- 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. Friday, October 29, 2010
- 158. At Runtime At Build Time 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
- 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 [email protected] @uxebu @nonken Friday, October 29, 2010