Mobile Apps
                            Cross Platform
                              Using HTML, CSS, JavaScript




                                 Wolfram Kriesing, uxebu
                                   @wolframkriesing



Dienstag, 11. August 2009
JavaScript FrontEnd    AJAX
    Usability  UserExperience
       Browser CSS mobile Web2.0
        django  dojo OpenSource




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Types of Mobile "Apps"

                     • 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

Dienstag, 11. August 2009
Native Apps

                     • iPhone Objective-C
                     • Android, Blackberry Java
                     • Nokia Symbian C
                     • Sony Ericsson Java
                     • Window Mobile .NET
                            Cross Platform . . . Expensive + OUCH

   Wolfram Kriesing, uxebu      @wolframkriesing

Dienstag, 11. August 2009
Small apps.

                                  Very focused.

                             Many platforms.

   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Mobile Moment



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
HTML
                                          CSS
                                       JavaScript


   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
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

Dienstag, 11. August 2009
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

Dienstag, 11. August 2009
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

Dienstag, 11. August 2009
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

Dienstag, 11. August 2009
What is a W3C Widget?

                     • HTML
                     • CSS
                     • JavaScript
                     • config.xml
                     • zip it
                     • rename to *.wgt

   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Almost for free


                     • Facebook widget
                     • Dashboard widget
                     • Website widget
                     • ...


   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Any Standards?



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
W3C Widget Spec


                     • specifies packaging




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
We want more!



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Native Access

                     • Camera
                     • Telephony
                     • Geo location
                     • Accelerometer
                     • Compass
                     • Contacts
                     • ...
   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Multiple Ways


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



                     • BONDI Spec          http://bondi.omtp.org/



                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
But they are just specs :-(




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Multiple Ways

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



                     • BONDI Spec          http://bondi.omtp.org/



                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/



                     • 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

Dienstag, 11. August 2009
Runtimes

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



                     • BONDI Spec          http://bondi.omtp.org/
                                                                                      Nokia S60

                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/         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???
   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
PhoneGap
                            An express goal of the PhoneGap project
                                 is for the project to not exist.




                                                  Open Source

   Wolfram Kriesing, uxebu     @wolframkriesing

Dienstag, 11. August 2009
Distribution?



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores



             443 apps
                                                         318 apps




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Events

                       Hands on?

            28 Aug - Köln
        21-23 Sep - Düsseldorf




             http://eventninja.net/mobile


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
thx

                                    http://blog.uxebu.com

                                           Wolfram Kriesing, uxebu
                                              wolfram@uxebu.com
                                            http://twitter.com/uxebu
                                      http://twitter.com/wolframkriesing



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009

Mobile Apps Cross Platform - Webmontag Frankfurt 2009

  • 1.
    Mobile Apps Cross Platform Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 2.
    JavaScript FrontEnd AJAX Usability UserExperience Browser CSS mobile Web2.0 django dojo OpenSource Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 3.
    Types of Mobile"Apps" • 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 Dienstag, 11. August 2009
  • 4.
    Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform . . . Expensive + OUCH Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 5.
    Small apps. Very focused. Many platforms. Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 6.
    Mobile Moment Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 7.
    HTML CSS JavaScript Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 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 Dienstag, 11. August 2009
  • 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 Dienstag, 11. August 2009
  • 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 Dienstag, 11. August 2009
  • 11.
    What is aW3C 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 Dienstag, 11. August 2009
  • 12.
    What is aW3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 13.
    Almost for free • Facebook widget • Dashboard widget • Website widget • ... Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 14.
    Any Standards? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 15.
    W3C Widget Spec • specifies packaging Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 16.
    We want more! Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 17.
    Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 18.
    Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 19.
    But they arejust specs :-( Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 20.
    Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ • 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 Dienstag, 11. August 2009
  • 21.
    Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ 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??? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 22.
    PhoneGap An express goal of the PhoneGap project is for the project to not exist. Open Source Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 23.
    Distribution? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 24.
    Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 25.
    Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 26.
    Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 27.
    Stores 443 apps 318 apps Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 28.
    Events Hands on? 28 Aug - Köln 21-23 Sep - Düsseldorf http://eventninja.net/mobile Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 29.
    thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009