Your SlideShare is downloading. ×
Html5 Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 Apps

2,173
views

Published on

Slides of talk I gave at appworks in Oslo

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,173
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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 CSS dojo Browser OpenSource Web2.0 FrontEnd Usability UserExperience mobile TouchScroll 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. 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
  • 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. 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
  • 52. Layout index.html Friday, October 29, 2010
  • 53. Design style.css Layout index.html Friday, October 29, 2010
  • 54. Design style.css Layout index.html AJAX Library Friday, October 29, 2010
  • 55. Database Design style.css Layout index.html AJAX Library 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. 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
  • 71. Layout index.html Design style.css Database AJAX Library Friday, October 29, 2010
  • 72. Layout index.html Design style.css Database AJAX Library 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
  • 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. 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
  • 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