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