Your SlideShare is downloading. ×
0
HTML5 Apps
Appworks 2010 Oslo
Nikolai Onken
uxebu
Friday, October 29, 2010
Friday, October 29, 2010
@nonken
Friday, October 29, 2010
Friday, October 29, 2010
We open the mobile web.
Friday, October 29, 2010
Friday, October 29, 2010
JavaScript AJAX
CSS
dojo
Browser
OpenSource
Web2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Friday, October 29...
Friday, October 29, 2010
Landscape
http://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
Landscape
http://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 2009
14 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 2009
14 Stores23rd September 2009
23 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 2009
14 Stores23rd September 2009
23 Stores
2nd December 2009
26 Stores
Friday, ...
October 2010
96 Apptores - WOA
http://www.wipconnector.com/appstores
Friday, October 29, 2010
Cross Platform
Friday, October 29, 2010
Friday, October 29, 2010
Objective-C
Friday, October 29, 2010
Objective-C Symbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Java
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava ...
Friday, October 29, 2010
HTML
Friday, October 29, 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Friday, October 29, 2010
http://www.flickr.com/photos/chris_radcliff/2947219465/
iPhone - First usable mobile browser
Friday, October 29, 2010
http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Friday, October 29, 2010
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
71% of all phones
have a modern xTML web browser.
Friday, October 29, 2010
App Store
without Apple!
Friday, October 29, 2010
Your Appshop facts
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
Friday, Oc...
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
• It feels...
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
What is a HTML5 App?
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
}
Friday, October 29, 2010
}?
Friday, October 29, 2010
Types of "Apps"
Friday, October 29, 2010
Types of "Apps"
•Preinstalled
Friday, October 29, 2010
Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
Friday, October 29, 2010
Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
•Website
limited access to phone resources
Friday, Octob...
Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
•Website
limited access to phone resources
•HTML5 App
ac...
Friday, October 29, 2010
Layout
index.html
Friday, October 29, 2010
Design
style.css
Layout
index.html
Friday, October 29, 2010
Design
style.css
Layout
index.html
AJAX Library
Friday, October 29, 2010
Database
Design
style.css
Layout
index.html
AJAX Library
Friday, October 29, 2010
PhoneGap
Friday, October 29, 2010
PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Friday, October 29, 2010
PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010
PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010
http://phonegap.pbworks.com/Roadmap
Friday, October 29, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation......
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation......
Device support
Friday, October 29, 2010
Pros
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
Cons
Frid...
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
•Open sou...
W3C Widgets
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
=
Icon
Friday, October 29, 2010
Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
W3C Widget =
Icon
Friday, October 29, 20...
What is a W3C Widget?
Friday, October 29, 2010
What is a W3C Widget?
Friday, October 29, 2010
What is a W3C Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
•rename to *.wgt
Friday, October 29, 2010
Devices?
...yes
Friday, October 29, 2010
Pros
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
Cons
Friday, Octobe...
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to cre...
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to cre...
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to cre...
Other runtimes?
Friday, October 29, 2010
Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http...
Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http...
Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http...
Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http...
Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http...
Almost for free
Friday, October 29, 2010
Almost for free
•Facebook widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010
A Phone is ...
Friday, October 29, 2010
http://www.flickr.com/photos/kratz/1984004945/
Friday, October 29, 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Friday, October 29, 2010
http://www.flickr.com/photos/redstamp/4222841946/
Friday, October 29, 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Friday, October 29,...
Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
• Your...
Cross Platform?
Friday, October 29, 2010
EventNinja
Friday, October 29, 2010
Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010
Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010
Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Events,
a Calendar
Friday, October ...
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Testing
Friday, October 29, 2010
Best Practices
Friday, October 29, 2010
Best Practices
• test on the desktop
Friday, October 29, 2010
Best Practices
• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
Friday, October 29, 2010
Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your frien...
Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your frien...
Ripple
Friday, October 29, 2010
Libraries
Friday, October 29, 2010
What is out there?
Friday, October 29, 2010
What is out there?
•XUI
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
•...
Friday, October 29, 2010
EmbedJS
an approach to cross platform development
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
The Supported Devices
... and there will be more
to embed JavaScript on
Friday, October 29, 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Friday, October 29, 2010
http://www.flickr.com/photos/hugo90/3916794427/
Friday, October 29, 2010
Shrink Your API
20kB 8kB
Friday, October 29, 2010
Simple queries > simple library function
Only ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library fun...
vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library fun...
Friday, October 29, 2010
At Runtime
At Build Time
Friday, October 29, 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Frida...
Tooling
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
The future
Friday, October 29, 2010
HumanApi
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
•Reading your heartrate
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
•Reading your heartrate
•All JavaScript/HTML/CSS
Friday, October 29, 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010
Turn on the lights
Friday, October 29, 2010
Turn on the lights
•http://github.com/nonken/arduinojs
Friday, October 29, 2010
thank you
http://uxebu.com
Nikolai Onken, uxebu
nikolai@uxebu.com
@uxebu
@nonken
Friday, October 29, 2010
Upcoming SlideShare
Loading in...5
×

Html5 Apps

2,242

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,242
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×