More Related Content Similar to Html5 apps nikolaionken-08-06 Similar to Html5 apps nikolaionken-08-06 (20) More from Skills Matter (20) 1. HTML5 Apps
Nikolai Onken
uxebu
Tuesday, June 8, 2010
10. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Tuesday, June 8, 2010
11. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Tuesday, June 8, 2010
12. 30th July 2009
14 Stores
http://bit.ly/distimo-appstores
Tuesday, June 8, 2010
13. 30th July 2009
14 Stores
23rd September 2009
23 Stores
http://bit.ly/distimo-appstores
Tuesday, June 8, 2010
14. 30th July 2009
14 Stores
23rd September 2009
23 Stores
2nd December 2009
26 Stores
http://bit.ly/distimo-appstores
Tuesday, June 8, 2010
20. Objective-C Symbian C Java
Java
Tuesday, June 8, 2010
21. Objective-C Symbian C Java
Java .NET
Tuesday, June 8, 2010
22. Objective-C Symbian C Java
Java .NET ...
Tuesday, June 8, 2010
24. Engine of the web
http://www.flickr.com/photos/robadob/88901885/
Tuesday, June 8, 2010
25. iPhone - First usable mobile browser
http://www.flickr.com/photos/chris_radcliff/2947219465/
Tuesday, June 8, 2010
29. Why HTML?
•lot of devs
Tuesday, June 8, 2010
30. Why HTML?
•lot of devs
•easy to write
Tuesday, June 8, 2010
31. Why HTML?
•lot of devs
•easy to write
•common
Tuesday, June 8, 2010
32. Why HTML?
•lot of devs
•easy to write
•common
•easy to test
Tuesday, June 8, 2010
33. Why HTML?
•lot of devs
•easy to write
•common
•easy to test
•stable standard
Tuesday, June 8, 2010
34. Why HTML?
•lot of devs
•easy to write
•common
•easy to test
•stable standard
•widely spread
Tuesday, June 8, 2010
36. 71% of all phones
have a modern xTML web browser.
http://bit.ly/tomiahonen-2010-almanac
Tuesday, June 8, 2010
37. App Store
without Apple!
Tuesday, June 8, 2010
41. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
Tuesday, June 8, 2010
42. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
Tuesday, June 8, 2010
43. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
• It feels native
Tuesday, June 8, 2010
44. What is a HTML5 App?
Tuesday, June 8, 2010
52. Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
Tuesday, June 8, 2010
53. Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Website
limited access to phone resources
Tuesday, June 8, 2010
54. Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Website
limited access to phone resources
• HTML5 App
access by widget runtime
Tuesday, June 8, 2010
56. Layout
index.html
Tuesday, June 8, 2010
57. Layout
index.html
Design
style.css
Tuesday, June 8, 2010
58. Layout
index.html
Design
style.css
AJAX Library
Tuesday, June 8, 2010
59. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, June 8, 2010
61. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, June 8, 2010
62. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, June 8, 2010
63. Layout
index.html
Design
style.css
Configuration
AJAX Library config.xml
Database
Tuesday, June 8, 2010
64. Layout
index.html
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, June 8, 2010
65. Layout
index.html
=
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, June 8, 2010
66. Layout
index.html
W3C Widget =
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, June 8, 2010
67. What is a W3C Widget?
Tuesday, June 8, 2010
68. What is a W3C Widget?
Tuesday, June 8, 2010
69. What is a W3C Widget?
• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt
Tuesday, June 8, 2010
70. DONE! http://www.flickr.com/photos/sundazed/2704578067/
Tuesday, June 8, 2010
73. HTML
ti ve
na
Tuesday, June 8, 2010
74. HTML
ti ve
na
Tuesday, June 8, 2010
75. HTML
ti ve
na
Tuesday, June 8, 2010
76. HTML
ti ve
na
Tuesday, June 8, 2010
77. HTML
ti ve
na
Tuesday, June 8, 2010
78. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, June 8, 2010
79. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, June 8, 2010
80. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, June 8, 2010
83. W3C Widgets
...yes
not purely
but great
HTML
support
Tuesday, June 8, 2010
86. Almost for free
• Facebook widget
• Dashboard widget
Tuesday, June 8, 2010
87. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
Tuesday, June 8, 2010
88. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
Tuesday, June 8, 2010
89. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, June 8, 2010
90. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, June 8, 2010
91. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, June 8, 2010
92. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, June 8, 2010
93. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, June 8, 2010
98. • Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Tuesday, June 8, 2010
99. Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
Tuesday, June 8, 2010
101. 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
Tuesday, June 8, 2010
102. 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
Tuesday, June 8, 2010
103. 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
Tuesday, June 8, 2010
104. 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
Tuesday, June 8, 2010
105. 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
Tuesday, June 8, 2010
106. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Tuesday, June 8, 2010
107. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Tuesday, June 8, 2010
108. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Tuesday, June 8, 2010
111. Layout
index.html
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, June 8, 2010
112. Layout
index.html
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Tuesday, June 8, 2010
113. Events, Layout
index.html
a Calendar
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Tuesday, June 8, 2010
128. Want to see it in action?
Download it from your store.
Tuesday, June 8, 2010
129. Want to see it in action?
Download it from your store.
Contact us.
Tuesday, June 8, 2010
132. TouchScroll
• position: fixed made possible
Tuesday, June 8, 2010
133. TouchScroll
• position: fixed made possible
• Bottom tab bar made possible
Tuesday, June 8, 2010
134. TouchScroll
• position: fixed made possible
• Bottom tab bar made possible
• Very performant
Tuesday, June 8, 2010
135. TouchScroll
• position: fixed made possible
• Bottom tab bar made possible
• Very performant
• Configurable
Tuesday, June 8, 2010
137. HumanApi
• The browser accessing hardware
Tuesday, June 8, 2010
138. HumanApi
• The browser accessing hardware
• Reading your heartrate
Tuesday, June 8, 2010
139. HumanApi
• The browser accessing hardware
• Reading your heartrate
• All JavaScript/HTML/CSS
Tuesday, June 8, 2010
144. thx
http://uxebu.com
Nikolai Onken, uxebu
nikolai@uxebu.com
@uxebu
@nonken
Tuesday, June 8, 2010
