A slightly updated version of this slides set, embedJS has made it's way in ...

1. HTML5 Apps
Wolfram Kriesing
uxebu
Mittwoch, 1. September 2010

2. We open the mobile web.
Mittwoch, 1. September 2010

3. JavaScript AJAX
FrontEnd
Usability UserExperience
CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource
Mittwoch, 1. September 2010

4. http://www.flickr.com/photos/cmoi/760513848/
Mittwoch, 1. September 2010

5. http://www.flickr.com/photos/cmoi/760513848/
Mittwoch, 1. September 2010

6. Mittwoch, 1. September 2010

7. Mittwoch, 1. September 2010

8. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Mittwoch, 1. September 2010

9. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Mittwoch, 1. September 2010

10. 30th July 2009
14 Stores
23rd September 2009
23 Stores
2nd December 2009
26 Stores
http://bit.ly/distimo-appstores
Mittwoch, 1. September 2010

11. Mittwoch, 1. September 2010

12. Objective-C Symbian C Java
Java .NET ...
Mittwoch, 1. September 2010

13. Cross Platform
Mittwoch, 1. September 2010

14. HTML
Mittwoch, 1. September 2010

15. Engine of the web
http://www.flickr.com/photos/robadob/88901885/
Mittwoch, 1. September 2010

16. Photos
Videos
Docs
Apps
Mittwoch, 1. September 2010

17. Mittwoch, 1. September 2010

18. Mittwoch, 1. September 2010

19. Mittwoch, 1. September 2010

20. Mittwoch, 1. September 2010

21. Mittwoch, 1. September 2010

22. App Store
without Apple!
Mittwoch, 1. September 2010

23. What is a Widget?
Mittwoch, 1. September 2010

24. Mittwoch, 1. September 2010

25. Mittwoch, 1. September 2010

26. }?
Mittwoch, 1. September 2010

27. Layout
index.html
Design
style.css
AJAX Library
Database
Mittwoch, 1. September 2010

28. Layout
index.html
W3C Widget =
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Mittwoch, 1. September 2010

29. What is a W3C Widget?
Mittwoch, 1. September 2010

30. What is a W3C Widget?
• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt
Mittwoch, 1. September 2010

31. DONE! http://www.flickr.com/photos/sundazed/2704578067/
Mittwoch, 1. September 2010

32. Tools?
Mittwoch, 1. September 2010

33. Mittwoch, 1. September 2010

34. Mittwoch, 1. September 2010

35. On any phone?
Mittwoch, 1. September 2010

36. HTML
tive
na
Mittwoch, 1. September 2010

37. W3C Widgets
ti ve
na
HTML
tive
na
Mittwoch, 1. September 2010

38. W3C Widgets
...yes
not purely
but great
HTML
support
Mittwoch, 1. September 2010

39. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Mittwoch, 1. September 2010

40. A Phone is ...
Mittwoch, 1. September 2010

41. http://www.flickr.com/photos/kratz/1984004945/
Mittwoch, 1. September 2010

42. http://www.flickr.com/photos/mbiddulph/3087388964/
Mittwoch, 1. September 2010

43. http://www.flickr.com/photos/redstamp/4222841946/
Mittwoch, 1. September 2010

44. • Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Mittwoch, 1. September 2010

45. Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spechttp://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
Mittwoch, 1. September 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");
}
Mittwoch, 1. September 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
Mittwoch, 1. September 2010

48. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Mittwoch, 1. September 2010

49. http://phonegap.pbworks.com/Roadmap
Mittwoch, 1. September 2010

50. Some numbers
• iPhone App = 364 kB
• JavaScript, HTML, CSS, media = 124 kB
• PhoneGap+SDK = 240 kB
Mittwoch, 1. September 2010

51. embedJS
(Dojo mobile)
http://github.com/uxebu/embedjs 10
0
f2
C on
JS
se
elea
R
Mittwoch, 1. September 2010

52. http://www.flickr.com/photos/tacoekkel/25538919/
Mittwoch, 1. September 2010

53. http://www.flickr.com/photos/hugo90/3916794427/
Mittwoch, 1. September 2010

54. Mittwoch, 1. September 2010

55. Mittwoch, 1. September 2010

56. Build
http://github.com/uxebu/embedjs-tools
Mittwoch, 1. September 2010

57. dojo-ios4.js
dojo-nokia-wrt.js
dojo-blackberry.js
dojo-blackberry46.js
dojo-opera.js
dojo-windows-mobile.js
Mittwoch, 1. September 2010

58. EventNinja
Mittwoch, 1. September 2010

59. Events, Layout
index.html
a Calendar
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Mittwoch, 1. September 2010

60. http://bit.ly/webdev-events
Mittwoch, 1. September 2010

61. Mittwoch, 1. September 2010

62. Mittwoch, 1. September 2010

63. Mittwoch, 1. September 2010

64. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Mittwoch, 1. September 2010

65. thx
http://uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.com
http://twitter.com/uxebu
http://twitter.com/wolframkriesing
Mittwoch, 1. September 2010