Mobile Apps Cross Platform - Webmontag Frankfurt 2009

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
1 of 29

More Related Content

Similar to Mobile Apps Cross Platform - Webmontag Frankfurt 2009

DjangoSkiDjangoSki
DjangoSkiBrian LeRoux
1.1K views55 slides

Similar to Mobile Apps Cross Platform - Webmontag Frankfurt 2009(20)

the web is mobilethe web is mobile
the web is mobile
Thomas Roessler242 views
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
mihaiionescu17K views
DjangoSkiDjangoSki
DjangoSki
Brian LeRoux1.1K views
Torquebox rubyhoedown-2012Torquebox rubyhoedown-2012
Torquebox rubyhoedown-2012
Lance Ball698 views
Leweb09 Building Wave RobotsLeweb09 Building Wave Robots
Leweb09 Building Wave Robots
Patrick Chanezon2.3K views
The shift to the edgeThe shift to the edge
The shift to the edge
Jakub Wadolowski116 views
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
Kasey McCurdy788 views
Html5 AppsHtml5 Apps
Html5 Apps
Nikolai Onken1.2K views
A web app in pure ClojureA web app in pure Clojure
A web app in pure Clojure
Dane Schneider4.6K views
TxjsTxjs
Txjs
Brian LeRoux2.3K views
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmile
leondu517 views
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
Columbia Developers Guild476 views
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
John Reiser2K views
NullMQ @ PDXNullMQ @ PDX
NullMQ @ PDX
Jeff Lindsay8.2K views
Tomas GrailsTomas Grails
Tomas Grails
Skills Matter524 views

More from wolframkriesing(20)

ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
wolframkriesing730 views
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
wolframkriesing1.1K views
Baby stepsBaby steps
Baby steps
wolframkriesing1.4K views
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
wolframkriesing772 views
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
wolframkriesing1.2K views
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
wolframkriesing1.9K views
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
wolframkriesing574 views
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
wolframkriesing632 views
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
wolframkriesing1.1K views
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing850 views
Better Code through TDDBetter Code through TDD
Better Code through TDD
wolframkriesing888 views
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
wolframkriesing699 views
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
wolframkriesing446 views
EmbedJSEmbedJS
EmbedJS
wolframkriesing691 views

Recently uploaded(20)

METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
Prity Khastgir IPR Strategic India Patent Attorney Amplify Innovation22 views
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic Meetup
Rick Ossendrijver20 views
[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh31 views
CXL at OCPCXL at OCP
CXL at OCP
CXL Forum158 views
ThroughputThroughput
Throughput
Moisés Armani Ramírez25 views

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 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
  • 12. What is a W3C 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 are just 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