0
Mobile app
development
Nikolai Onken
@nonken - 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
© Vodafone Group 2010
v1.0 April 2010
5
todays schedule
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are t...
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
• Object browser
Friday, Octo...
© Vodafone Group 2010
v1.0 April 2010
7
Widgets/HTML5 apps
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! ar...
© Vodafone Group 2010
v1.0 April 2010
8
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of th...
© Vodafone Group 2010
v1.0 April 2010
9
EventNinja, a mobile
app by example
Vodafone, the Vodafone logo, Vodafone 360 and ...
Friday, October 29, 2010
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
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
Cross Platform
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://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
Friday, October 29, 2010
}
Friday, October 29, 2010
}?
Friday, October 29, 2010
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
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
Widget /
html5 app
=
Icon
Friday, Octobe...
What is a HTML5 app?
Friday, October 29, 2010
What is a HTML5 app?
Friday, October 29, 2010
What is a HTML5 app?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
•rename to *.wgt
Friday, October 29, 2010
On any phone?
Friday, October 29, 2010
...yes
W3C Widgets
Friday, October 29, 2010
...yes
W3C Widgets
not purely
but great
HTML
support
Friday, October 29, 2010
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 > WAC
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
• You...
http://bit.ly/vf-jil-docs
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Friday, October...
if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
Friday, October 29, 2010
if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
var player = Widget.Multimedia.AudioPlayer;
playe...
if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
var player = Widget.Multimedia.AudioPlayer;
playe...
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
Mobile dev guide
Friday, October 29, 2010
Do what your runtime
can do
Not more
Friday, October 29, 2010
Remember JavaScript
Friday, October 29, 2010
CSS3 - mobile runtimes
are often ahead
Friday, October 29, 2010
Semantics?
A short story
Friday, October 29, 2010
Friday, October 29, 2010
<ul>
<li>Hi</li>
</ul>
Friday, October 29, 2010
<ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
Friday, October 29, 2010
<ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
<a href=””>Hi</a>
Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
Communications
Friday, October 29, 2010
• JSONP
Communications
Friday, October 29, 2010
• JSONP
• YQL:An amazing tool!
Communications
Friday, October 29, 2010
Scaling and ppi
Never use absolute sizing!
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
•Jo
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•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...
Tools
• Dragonfly
• Firebug
• Ripple
• Apparat.io
Friday, October 29, 2010
Testing services
• Perfecto Mobile - http://vf.perfectomobile.com
Promocode: vfwidgets
• Ask for phones here
Friday, Octob...
Set headers... and learn
Send iPhone headers from within Safari for example
Friday, October 29, 2010
Hmmmm, alert(“Hi”);
Friday, October 29, 2010
Create routines
Friday, October 29, 2010
Create routines
• Test the unbuild source on the desktop
Friday, October 29, 2010
Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
Friday, October 29, 2010
Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
• Test the build source on...
Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
• Test the build source on...
Object Browser
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
For devs?
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Open Source
Friday, October 29, 2010
Open Source
•a developer must have
Friday, October 29, 2010
Open Source
•a developer must have
•developer.vodafone.com
http://developer.vodafone.com/object-browser
Friday, October 29...
Open Source
•a developer must have
•developer.vodafone.com
http://developer.vodafone.com/object-browser
•github
http://git...
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
Demo
Friday, October 29, 2010
@nonken
Thank you
Friday, October 29, 2010
Upcoming SlideShare
Loading in...5
×

Html5 Development

1,314

Published on

Slides of the talk I gave at the Vodafone Developer Day in Athens

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,314
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 Development"

  1. 1. Mobile app development Nikolai Onken @nonken - 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. © Vodafone Group 2010 v1.0 April 2010 5 todays schedule Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  7. 7. Friday, October 29, 2010
  8. 8. • Widgets a.k.a. HTML5 apps Friday, October 29, 2010
  9. 9. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example Friday, October 29, 2010
  10. 10. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example • Mobile development guide Friday, October 29, 2010
  11. 11. • Widgets a.k.a. HTML5 apps • EventNinja, a mobile app by example • Mobile development guide • Object browser Friday, October 29, 2010
  12. 12. © Vodafone Group 2010 v1.0 April 2010 7 Widgets/HTML5 apps Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  13. 13. © Vodafone Group 2010 v1.0 April 2010 8 Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  14. 14. © Vodafone Group 2010 v1.0 April 2010 9 EventNinja, a mobile app by example Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the trade marks of their respective owners. Friday, October 29, 2010
  15. 15. Friday, October 29, 2010
  16. 16. Friday, October 29, 2010
  17. 17. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  18. 18. Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  19. 19. http://bit.ly/distimo-appstores 30th July 2009 14 Stores Friday, October 29, 2010
  20. 20. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores Friday, October 29, 2010
  21. 21. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores 2nd December 2009 26 Stores Friday, October 29, 2010
  22. 22. October 2010 96 Apptores - WOA http://www.wipconnector.com/appstores Friday, October 29, 2010
  23. 23. Friday, October 29, 2010
  24. 24. Objective-C Friday, October 29, 2010
  25. 25. Objective-C Symbian C Friday, October 29, 2010
  26. 26. Objective-C JavaSymbian C Friday, October 29, 2010
  27. 27. Objective-C JavaSymbian C Java Friday, October 29, 2010
  28. 28. Objective-C JavaSymbian C .NETJava Friday, October 29, 2010
  29. 29. Objective-C JavaSymbian C .NETJava ... Friday, October 29, 2010
  30. 30. Cross Platform Friday, October 29, 2010
  31. 31. HTML Friday, October 29, 2010
  32. 32. http://www.flickr.com/photos/robadob/88901885/ Engine of the web Friday, October 29, 2010
  33. 33. http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  34. 34. http://bit.ly/tomiahonen-2010-almanac 71% of all phones have a modern xTML web browser. Friday, October 29, 2010
  35. 35. App Store without Apple! Friday, October 29, 2010
  36. 36. Your Appshop facts Friday, October 29, 2010
  37. 37. Your Appshop facts • 100% HTML5 Friday, October 29, 2010
  38. 38. Your Appshop facts • 100% HTML5 • Apps work offline Friday, October 29, 2010
  39. 39. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 Friday, October 29, 2010
  40. 40. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway Friday, October 29, 2010
  41. 41. Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway • It feels native 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. } Friday, October 29, 2010
  47. 47. }? Friday, October 29, 2010
  48. 48. Friday, October 29, 2010
  49. 49. Layout index.html Friday, October 29, 2010
  50. 50. Design style.css Layout index.html Friday, October 29, 2010
  51. 51. Design style.css Layout index.html AJAX Library Friday, October 29, 2010
  52. 52. Database Design style.css Layout index.html AJAX Library Friday, October 29, 2010
  53. 53. Layout index.html Design style.css Database AJAX Library Friday, October 29, 2010
  54. 54. Layout index.html Design style.css Database AJAX Library Friday, October 29, 2010
  55. 55. Layout index.html Design style.css Database AJAX Library Configuration config.xml Friday, October 29, 2010
  56. 56. Layout index.html Design style.css Database AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  57. 57. Layout index.html Design style.css Database AJAX Library Configuration config.xml = Icon Friday, October 29, 2010
  58. 58. Layout index.html Design style.css Database AJAX Library Configuration config.xml Widget / html5 app = Icon Friday, October 29, 2010
  59. 59. What is a HTML5 app? Friday, October 29, 2010
  60. 60. What is a HTML5 app? Friday, October 29, 2010
  61. 61. What is a HTML5 app? •HTML •CSS •JavaScript •config.xml •zip it •rename to *.wgt Friday, October 29, 2010
  62. 62. On any phone? Friday, October 29, 2010
  63. 63. ...yes W3C Widgets Friday, October 29, 2010
  64. 64. ...yes W3C Widgets not purely but great HTML support Friday, October 29, 2010
  65. 65. Almost for free Friday, October 29, 2010
  66. 66. Almost for free •Facebook widget Friday, October 29, 2010
  67. 67. Almost for free •Facebook widget •Dashboard widget Friday, October 29, 2010
  68. 68. Almost for free •Facebook widget •Dashboard widget •Website widget Friday, October 29, 2010
  69. 69. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget Friday, October 29, 2010
  70. 70. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  71. 71. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  72. 72. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  73. 73. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  74. 74. Almost for free •Facebook widget •Dashboard widget •Website widget •TV Widget •... Friday, October 29, 2010
  75. 75. A Phone is ... Friday, October 29, 2010
  76. 76. http://www.flickr.com/photos/kratz/1984004945/ Friday, October 29, 2010
  77. 77. http://www.flickr.com/photos/mbiddulph/3087388964/ Friday, October 29, 2010
  78. 78. http://www.flickr.com/photos/redstamp/4222841946/ Friday, October 29, 2010
  79. 79. • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Friday, October 29, 2010
  80. 80. Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL > WAC http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • Your own Spec :) http://phonegap.com/ Friday, October 29, 2010
  81. 81. http://bit.ly/vf-jil-docs Friday, October 29, 2010
  82. 82. http://bit.ly/vf-jil-docs Friday, October 29, 2010
  83. 83. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File Friday, October 29, 2010
  84. 84. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Friday, October 29, 2010
  85. 85. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Friday, October 29, 2010
  86. 86. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Friday, October 29, 2010
  87. 87. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Friday, October 29, 2010
  88. 88. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Audio Friday, October 29, 2010
  89. 89. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Audio SMS, MMS, ... Friday, October 29, 2010
  90. 90. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } Friday, October 29, 2010
  91. 91. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } var player = Widget.Multimedia.AudioPlayer; player.open("myAudioFile.mp3"); player.play(1); Friday, October 29, 2010
  92. 92. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } var player = Widget.Multimedia.AudioPlayer; player.open("myAudioFile.mp3"); player.play(1); if (Widget.Device.RadioInfo.isRoaming){ alert("Money Money Money"); } Friday, October 29, 2010
  93. 93. EventNinja Friday, October 29, 2010
  94. 94. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  95. 95. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Friday, October 29, 2010
  96. 96. Database Layout index.html Design style.css AJAX Library Configuration config.xml Icon Events, a Calendar Friday, October 29, 2010
  97. 97. http://bit.ly/webdev-events Friday, October 29, 2010
  98. 98. http://bit.ly/webdev-events Friday, October 29, 2010
  99. 99. http://bit.ly/webdev-events Friday, October 29, 2010
  100. 100. Friday, October 29, 2010
  101. 101. Friday, October 29, 2010
  102. 102. Friday, October 29, 2010
  103. 103. Friday, October 29, 2010
  104. 104. Friday, October 29, 2010
  105. 105. Friday, October 29, 2010
  106. 106. Friday, October 29, 2010
  107. 107. Friday, October 29, 2010
  108. 108. Friday, October 29, 2010
  109. 109. Friday, October 29, 2010
  110. 110. Mobile dev guide Friday, October 29, 2010
  111. 111. Do what your runtime can do Not more Friday, October 29, 2010
  112. 112. Remember JavaScript Friday, October 29, 2010
  113. 113. CSS3 - mobile runtimes are often ahead Friday, October 29, 2010
  114. 114. Semantics? A short story Friday, October 29, 2010
  115. 115. Friday, October 29, 2010
  116. 116. <ul> <li>Hi</li> </ul> Friday, October 29, 2010
  117. 117. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> Friday, October 29, 2010
  118. 118. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> <a href=””>Hi</a> Friday, October 29, 2010
  119. 119. IE anyone? Friday, October 29, 2010
  120. 120. IE anyone? Friday, October 29, 2010
  121. 121. IE anyone? Friday, October 29, 2010
  122. 122. Communications Friday, October 29, 2010
  123. 123. • JSONP Communications Friday, October 29, 2010
  124. 124. • JSONP • YQL:An amazing tool! Communications Friday, October 29, 2010
  125. 125. Scaling and ppi Never use absolute sizing! Friday, October 29, 2010
  126. 126. Testing Friday, October 29, 2010
  127. 127. Best Practices Friday, October 29, 2010
  128. 128. Best Practices • test on the desktop Friday, October 29, 2010
  129. 129. Best Practices • test on the desktop • test on the desktop Friday, October 29, 2010
  130. 130. Best Practices • test on the desktop • test on the desktop • test on the desktop Friday, October 29, 2010
  131. 131. Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot Friday, October 29, 2010
  132. 132. 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
  133. 133. 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
  134. 134. Ripple Friday, October 29, 2010
  135. 135. Libraries Friday, October 29, 2010
  136. 136. What is out there? Friday, October 29, 2010
  137. 137. What is out there? •XUI Friday, October 29, 2010
  138. 138. What is out there? •XUI •Jo Friday, October 29, 2010
  139. 139. What is out there? •XUI •Jo •Sencha Touch Friday, October 29, 2010
  140. 140. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) Friday, October 29, 2010
  141. 141. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile Friday, October 29, 2010
  142. 142. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS Friday, October 29, 2010
  143. 143. What is out there? •XUI •Jo •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS •... Friday, October 29, 2010
  144. 144. EmbedJS an approach to cross platform development Friday, October 29, 2010
  145. 145. Friday, October 29, 2010
  146. 146. Friday, October 29, 2010
  147. 147. Friday, October 29, 2010
  148. 148. The Supported Devices ... and there will be more to embed JavaScript on Friday, October 29, 2010
  149. 149. http://www.flickr.com/photos/tacoekkel/25538919/ Friday, October 29, 2010
  150. 150. http://www.flickr.com/photos/hugo90/3916794427/ Friday, October 29, 2010
  151. 151. Shrink Your API 20kB 8kB Friday, October 29, 2010
  152. 152. Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
  153. 153. vs. 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 Full fledged queries > Full blown library function Friday, October 29, 2010
  155. 155. 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
  156. 156. Friday, October 29, 2010
  157. 157. At Runtime At Build Time Friday, October 29, 2010
  158. 158. 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
  159. 159. Tools • Dragonfly • Firebug • Ripple • Apparat.io Friday, October 29, 2010
  160. 160. Testing services • Perfecto Mobile - http://vf.perfectomobile.com Promocode: vfwidgets • Ask for phones here Friday, October 29, 2010
  161. 161. Set headers... and learn Send iPhone headers from within Safari for example Friday, October 29, 2010
  162. 162. Hmmmm, alert(“Hi”); Friday, October 29, 2010
  163. 163. Create routines Friday, October 29, 2010
  164. 164. Create routines • Test the unbuild source on the desktop Friday, October 29, 2010
  165. 165. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop Friday, October 29, 2010
  166. 166. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop • Test the build source on a mobile browser Friday, October 29, 2010
  167. 167. Create routines • Test the unbuild source on the desktop • Test the build source on the desktop • Test the build source on a mobile browser • Package and then test the app on the device Friday, October 29, 2010
  168. 168. Object Browser Friday, October 29, 2010
  169. 169. Friday, October 29, 2010
  170. 170. Friday, October 29, 2010
  171. 171. For devs? Friday, October 29, 2010
  172. 172. Friday, October 29, 2010
  173. 173. Friday, October 29, 2010
  174. 174. Friday, October 29, 2010
  175. 175. Friday, October 29, 2010
  176. 176. Friday, October 29, 2010
  177. 177. Open Source Friday, October 29, 2010
  178. 178. Open Source •a developer must have Friday, October 29, 2010
  179. 179. Open Source •a developer must have •developer.vodafone.com http://developer.vodafone.com/object-browser Friday, October 29, 2010
  180. 180. Open Source •a developer must have •developer.vodafone.com http://developer.vodafone.com/object-browser •github http://github.com/wolframkriesing/object-browser Friday, October 29, 2010
  181. 181. Friday, October 29, 2010
  182. 182. index.html Friday, October 29, 2010
  183. 183. index.html Friday, October 29, 2010
  184. 184. index.html Friday, October 29, 2010
  185. 185. index.html Friday, October 29, 2010
  186. 186. index.html Friday, October 29, 2010
  187. 187. config.xml Friday, October 29, 2010
  188. 188. config.xml Friday, October 29, 2010
  189. 189. config.xml Friday, October 29, 2010
  190. 190. config.xml Friday, October 29, 2010
  191. 191. config.xml Friday, October 29, 2010
  192. 192. Demo Friday, October 29, 2010
  193. 193. @nonken Thank you 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.

×