More Related Content Similar to HTML5 Apps Cross Platform - SWDC 2010, Stockholm (6) More from wolframkriesing (20) HTML5 Apps Cross Platform - SWDC 2010, Stockholm1. App vs. Widget
HTML5 Apps
Wolfram Kriesing
uxebu
Donnerstag, 3. Juni 2010
3. JavaScript AJAX
FrontEnd
Usability UserExperience
CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource
Donnerstag, 3. Juni 2010
6. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 3. Juni 2010
7. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 3. Juni 2010
8. 30th July 2009
14 Stores
23rd September 2009
23 Stores
2nd December 2009
26 Stores
http://bit.ly/distimo-appstores
Donnerstag, 3. Juni 2010
10. Objective-C Symbian C Java
Java .NET ...
Donnerstag, 3. Juni 2010
13. Engine of the web
http://www.flickr.com/photos/robadob/88901885/
Donnerstag, 3. Juni 2010
14. Photos
Videos
Docs
Apps
Donnerstag, 3. Juni 2010
22. App Store
without Apple!
Donnerstag, 3. Juni 2010
23. What is a Widget?
Donnerstag, 3. Juni 2010
27. Layout
index.html
Design
style.css
AJAX Library
Database
Donnerstag, 3. Juni 2010
28. Layout
index.html
W3C Widget =
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Donnerstag, 3. Juni 2010
29. What is a W3C Widget?
• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt
Donnerstag, 3. Juni 2010
30. DONE! http://www.flickr.com/photos/sundazed/2704578067/
Donnerstag, 3. Juni 2010
34. HTML
tive
na
Donnerstag, 3. Juni 2010
35. HTML
tive
na
Donnerstag, 3. Juni 2010
36. W3C Widgets
ti ve
na
HTML
tive
na
Donnerstag, 3. Juni 2010
37. W3C Widgets
...yes
not purely
but great
HTML
support
Donnerstag, 3. Juni 2010
38. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Donnerstag, 3. Juni 2010
43. • Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Donnerstag, 3. Juni 2010
44. Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
Donnerstag, 3. Juni 2010
45. System Info
Contacts
Network Info
Phone Info Camera
File
Audio
GPS SMS, MMS, ...
http://bit.ly/vf-jil-docs
Donnerstag, 3. Juni 2010
46. 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");
}
Donnerstag, 3. Juni 2010
47. kinda W3C
Widgets iP****
l
m
pure W3C nfi
co
g.x Platform adaptations
Widgets
PhoneGap
Business and
Application logic
in
fo
.p
lis
t
Nokia WRT Android
Donnerstag, 3. Juni 2010
48. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Donnerstag, 3. Juni 2010
50. Some numbers
• iPhone App = 364 kB
• JavaScript, HTML, CSS, media = 124 kB
• PhoneGap+SDK = 240 kB
Donnerstag, 3. Juni 2010
52. Two approaches
custom, simplest build script
http://github.com/wolframkriesing/dojo-mobile
using require.js
http://github.com/klipstein/dojo-mobile
Donnerstag, 3. Juni 2010
58. dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Donnerstag, 3. Juni 2010
60. Events, Layout
index.html
a Calendar
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Donnerstag, 3. Juni 2010
66. Want to see it in action?
Download it from your store.
Contact us.
Donnerstag, 3. Juni 2010
67. thx
http://uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.com
http://twitter.com/uxebu
http://twitter.com/wolframkriesing
Donnerstag, 3. Juni 2010