• Like

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.

Html5 Apps

  • 2,141 views
Uploaded on

Slides of talk I gave at appworks in Oslo

Slides of talk I gave at appworks in Oslo

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,141
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
62
Comments
0
Likes
6

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. 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