Cross Platform
                                 Mobile Apps
                                  Using HTML, CSS, JavaScript
...
JavaScript                                      FrontEnd   AJAX
    Usability
                                            ...
Stores


                                                   30th July 2009
                                               ...
Stores


                                               30th July 2009
                                              27th ...
Wanna write native
                                 Apps for each?


   Wolfram Kriesing, uxebu       @wolframkriesing

Do...
Native Apps

                    • iPhone Objective-C
                    • Android, Blackberry Java
                    •...
Types of Mobile "Apps"

                    • Preinstalled
                    • Native App (from "some" app store)
      ...
we
                           le                            l l-k
                         p                              ...
Website as "App"

                    • Native look ok
                    • Well-known technologies
                     ...
W3C Widgets
                                http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html




     ...
Unified
           Development
              tools
   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. Novem...
What is a W3C Widget?


                    • Native app on the phone
                    • Not a website!
               ...
What is a W3C Widget?




   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. November 2009
What is a W3C Widget?




   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. November 2009
What is a W3C Widget?

                    • HTML
                    • CSS
                    • JavaScript
             ...
Almost for free

                    • Palm Pré
                    • Facebook widget
                    • Dashboard widg...
Any Standards?



   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. November 2009
W3C Widget Spec


                    • specifies packaging & configuration




   Wolfram Kriesing, uxebu      @wolframkr...
We want more!



   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. November 2009
Native Access

                    • Camera
                    • Telephony
                    • Geo location
           ...
Multiple Ways


                    • JIL Spec         http://www.jil.org/



                    • BONDI Spec            ...
But they are just specs :-(




   Wolfram Kriesing, uxebu      @wolframkriesing

Donnerstag, 26. November 2009
Multiple Ways

                    • JIL Spec         http://www.jil.org/



                    • BONDI Spec             ...
Runtimes

                    • JIL Spec         http://www.jil.org/



                    • BONDI Spec              http...
PhoneGap
                                "An express goal of the PhoneGap project
                                       i...
Some numbers


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

                                       http://blog.uxebu.com

                                              Wolfram K...
Upcoming SlideShare
Loading in …5
×

Mobile Apps Cross Platform - Droidcon 2009

1,770 views

Published on

The droidcon presentation about mobile cross platform environments.

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

  • Be the first to like this

No Downloads
Views
Total views
1,770
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Apps Cross Platform - Droidcon 2009

  1. 1. Cross Platform Mobile Apps Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  2. 2. JavaScript FrontEnd AJAX Usability UserExperience Browser CSS django dojo mobile Web2.0 widgets OpenSource Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  3. 3. Stores 30th July 2009 14 Stores http://blog.distimo.com/mobile-app-store-overview/ Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  4. 4. Stores 30th July 2009 27th October 2009 14 Stores 24 Stores http://blog.distimo.com/mobile-app-store-overview/ Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  5. 5. Wanna write native Apps for each? Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  6. 6. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform Expensive and OUCH anyway Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  7. 7. Types of Mobile "Apps" • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources • W3C Widget access to what the widget runtime provides • W3C Widget wrapped as native app depends on it's runtime Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  8. 8. we le l l-k p no s im wn HTML te st easy to CSS simp le te xt JavaScript easy velop to d fast to de evel op Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  9. 9. Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no • Offline not really Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  10. 10. W3C Widgets http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no yes • Offline not really really Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  11. 11. Unified Development tools Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  12. 12. What is a W3C Widget? • Native app on the phone • Not a website! • Can do AJAX, SVG, CSS Transitions, etc. • Has it's own runtime (mostly) Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  13. 13. What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  14. 14. What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  15. 15. What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  16. 16. Almost for free • Palm Pré • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  17. 17. Any Standards? Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  18. 18. W3C Widget Spec • specifies packaging & configuration Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  19. 19. We want more! Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  20. 20. Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  21. 21. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  22. 22. But they are just specs :-( Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  23. 23. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  24. 24. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  25. 25. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  26. 26. Some numbers • iPhone App = 364 kB • JavaScript, HTML, CSS, media = 124 kB • that means PhoneGap+SDK foot print = 240 kB Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009
  27. 27. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Donnerstag, 26. November 2009

×