0
App vs. Widget

                           HTML5 Apps
                               Wolfram Kriesing
                    ...
We open the mobile web.




Donnerstag, 3. Juni 2010
JavaScript                              AJAX
                                  FrontEnd
       Usability                  ...
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Landscape
                           http://www.flickr.com/photos/tillwe/146242691/

Donnerstag, 3. Juni 2010
Landscape
                           http://www.flickr.com/photos/tillwe/146242691/

Donnerstag, 3. Juni 2010
30th July 2009
                                  14 Stores
                           23rd September 2009
                ...
Donnerstag, 3. Juni 2010
Objective-C          Symbian C   Java




                           Java     .NET      ...
Donnerstag, 3. Juni 2010
Cross Platform



Donnerstag, 3. Juni 2010
HTML




Donnerstag, 3. Juni 2010
Engine of the web

                           http://www.flickr.com/photos/robadob/88901885/




Donnerstag, 3. Juni 2010
Photos


                  Videos



                     Docs



                     Apps


Donnerstag, 3. Juni 2010
Why Widgets?

Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/

Donnerstag, 3. Juni 2010
App Store
                           without Apple!


Donnerstag, 3. Juni 2010
What is a Widget?



Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
}?
Donnerstag, 3. Juni 2010
Layout
                                        index.html




                                                     Design
...
Layout
                                        index.html




         W3C Widget =
                                      ...
What is a W3C Widget?

                     • HTML
                     • CSS
                     • JavaScript
          ...
DONE!          http://www.flickr.com/photos/sundazed/2704578067/


Donnerstag, 3. Juni 2010
Tools?



Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
On any phone?



Donnerstag, 3. Juni 2010
HTML
                                  tive
                              na




Donnerstag, 3. Juni 2010
HTML
                                  tive
                              na




Donnerstag, 3. Juni 2010
W3C Widgets
                                            ti ve
                                          na

              ...
W3C Widgets




                                            ...yes
                               not purely

            ...
Almost for free

                     • Facebook widget
                     • Dashboard widget
                     • Web...
A Phone is ...



Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/kratz/1984004945/

Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/mbiddulph/3087388964/

Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/redstamp/4222841946/




Donnerstag, 3. Juni 2010
•     Camera

                     •     Compass

                     •     GPS

                     •     Accelerometer...
Multiple Ways
                     • W3C Spec
                           http://w3.org/2009/dap/



                     •...
System Info

                                                              Contacts
                Network Info


       ...
if (Widget.Device.PowerInfo.isCharging){
              alert("Battery is charging");
          }


     var player = Widge...
kinda W3C
                            Widgets                                          iP****


                          ...
PhoneGap
                           "An express goal of the PhoneGap project
                                is for the pr...
http://phonegap.pbworks.com/Roadmap


Donnerstag, 3. Juni 2010
Some numbers

                     • iPhone App = 364 kB
                     • JavaScript, HTML, CSS, media = 124 kB
    ...
Dojo mobile



Donnerstag, 3. Juni 2010
Two approaches

                            custom, simplest build script
           http://github.com/wolframkriesing/doj...
http://www.flickr.com/photos/tacoekkel/25538919/

Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/hugo90/3916794427/

Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
build.sh




Donnerstag, 3. Juni 2010
dojo-blackberry.js

                           dojo-blackberry46.js

                           dojo-nokia-wrt.js

       ...
EventNinja



Donnerstag, 3. Juni 2010
Events,          Layout
                                        index.html


                     a Calendar

            ...
http://bit.ly/webdev-events

Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/

Donnerstag, 3. Juni 2010
Want to see it in action?


                              Download it from your store.


                                 ...
thx

                             http://uxebu.com

                               Wolfram Kriesing, uxebu

              ...
Upcoming SlideShare
Loading in...5
×

HTML5 Apps Cross Platform - SWDC 2010, Stockholm

4,405

Published on

The latest version of the HTML5 Apps slides :)
As shown at SWDC2010 in Stockholm.
Added dojo mobile and tools section.

Published in: Technology, Design
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,405
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
174
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Apps Cross Platform - SWDC 2010, Stockholm"

  1. 1. App vs. Widget HTML5 Apps Wolfram Kriesing uxebu Donnerstag, 3. Juni 2010
  2. 2. We open the mobile web. Donnerstag, 3. Juni 2010
  3. 3. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Donnerstag, 3. Juni 2010
  4. 4. Donnerstag, 3. Juni 2010
  5. 5. Donnerstag, 3. Juni 2010
  6. 6. Landscape http://www.flickr.com/photos/tillwe/146242691/ Donnerstag, 3. Juni 2010
  7. 7. Landscape http://www.flickr.com/photos/tillwe/146242691/ Donnerstag, 3. Juni 2010
  8. 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
  9. 9. Donnerstag, 3. Juni 2010
  10. 10. Objective-C Symbian C Java Java .NET ... Donnerstag, 3. Juni 2010
  11. 11. Cross Platform Donnerstag, 3. Juni 2010
  12. 12. HTML Donnerstag, 3. Juni 2010
  13. 13. Engine of the web http://www.flickr.com/photos/robadob/88901885/ Donnerstag, 3. Juni 2010
  14. 14. Photos Videos Docs Apps Donnerstag, 3. Juni 2010
  15. 15. Why Widgets? Donnerstag, 3. Juni 2010
  16. 16. Donnerstag, 3. Juni 2010
  17. 17. Donnerstag, 3. Juni 2010
  18. 18. Donnerstag, 3. Juni 2010
  19. 19. Donnerstag, 3. Juni 2010
  20. 20. Donnerstag, 3. Juni 2010
  21. 21. http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/ Donnerstag, 3. Juni 2010
  22. 22. App Store without Apple! Donnerstag, 3. Juni 2010
  23. 23. What is a Widget? Donnerstag, 3. Juni 2010
  24. 24. Donnerstag, 3. Juni 2010
  25. 25. Donnerstag, 3. Juni 2010
  26. 26. }? Donnerstag, 3. Juni 2010
  27. 27. Layout index.html Design style.css AJAX Library Database Donnerstag, 3. Juni 2010
  28. 28. Layout index.html W3C Widget = Design Icon style.css Configuration AJAX Library config.xml Database Donnerstag, 3. Juni 2010
  29. 29. What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Donnerstag, 3. Juni 2010
  30. 30. DONE! http://www.flickr.com/photos/sundazed/2704578067/ Donnerstag, 3. Juni 2010
  31. 31. Tools? Donnerstag, 3. Juni 2010
  32. 32. Donnerstag, 3. Juni 2010
  33. 33. On any phone? Donnerstag, 3. Juni 2010
  34. 34. HTML tive na Donnerstag, 3. Juni 2010
  35. 35. HTML tive na Donnerstag, 3. Juni 2010
  36. 36. W3C Widgets ti ve na HTML tive na Donnerstag, 3. Juni 2010
  37. 37. W3C Widgets ...yes not purely but great HTML support Donnerstag, 3. Juni 2010
  38. 38. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Donnerstag, 3. Juni 2010
  39. 39. A Phone is ... Donnerstag, 3. Juni 2010
  40. 40. http://www.flickr.com/photos/kratz/1984004945/ Donnerstag, 3. Juni 2010
  41. 41. http://www.flickr.com/photos/mbiddulph/3087388964/ Donnerstag, 3. Juni 2010
  42. 42. http://www.flickr.com/photos/redstamp/4222841946/ Donnerstag, 3. Juni 2010
  43. 43. • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Donnerstag, 3. Juni 2010
  44. 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. 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. 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. 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. 48. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Donnerstag, 3. Juni 2010
  49. 49. http://phonegap.pbworks.com/Roadmap Donnerstag, 3. Juni 2010
  50. 50. Some numbers • iPhone App = 364 kB • JavaScript, HTML, CSS, media = 124 kB • PhoneGap+SDK = 240 kB Donnerstag, 3. Juni 2010
  51. 51. Dojo mobile Donnerstag, 3. Juni 2010
  52. 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
  53. 53. http://www.flickr.com/photos/tacoekkel/25538919/ Donnerstag, 3. Juni 2010
  54. 54. http://www.flickr.com/photos/hugo90/3916794427/ Donnerstag, 3. Juni 2010
  55. 55. Donnerstag, 3. Juni 2010
  56. 56. Donnerstag, 3. Juni 2010
  57. 57. build.sh Donnerstag, 3. Juni 2010
  58. 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
  59. 59. EventNinja Donnerstag, 3. Juni 2010
  60. 60. Events, Layout index.html a Calendar Design Icon style.css Database Configuration AJAX Library config.xml Donnerstag, 3. Juni 2010
  61. 61. http://bit.ly/webdev-events Donnerstag, 3. Juni 2010
  62. 62. Donnerstag, 3. Juni 2010
  63. 63. Donnerstag, 3. Juni 2010
  64. 64. Donnerstag, 3. Juni 2010
  65. 65. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Donnerstag, 3. Juni 2010
  66. 66. Want to see it in action? Download it from your store. Contact us. Donnerstag, 3. Juni 2010
  67. 67. thx http://uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Donnerstag, 3. Juni 2010
  1. A particular slide catching your eye?

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

×