Mobile WebApps
                          Entwickung
                         Kurzer Überblick



Montag, 28. März 2011
Überblick
                    • Technologien    • Frameworks
                     • HTML5 et al.   • Tools
                     • CSS            • Beispiel
                                        ausprobieren
                     • JavaScript


Montag, 28. März 2011
WebApp aus Entwicklersicht
                        Eine auf HTML5 basierende Webseite, die für Smartphones optimiert ist.




Montag, 28. März 2011
Zielplattform Webkit
               85% Smartphone
                 Market Share




                 http://radar.oreilly.com/2010/05


Montag, 28. März 2011
Zielplattform Webkit
               85% Smartphone
                                                       WebKit != WebKit
                 Market Share




                 http://radar.oreilly.com/2010/05   http://www.quirksmode.org/webkit.html


Montag, 28. März 2011
Technologien



Montag, 28. März 2011
Montag, 28. März 2011
CSS



Montag, 28. März 2011
JavaScript



Montag, 28. März 2011
Frameworks

                    Touch                WinkToolkit




                                  iUI


Montag, 28. März 2011
• Deklarativ
                    • jQuery basiert
                    • Einfach
                    • Smartphone optimiert
                    • OpenSource: MIT Lizenz

Montag, 28. März 2011
•       Deklarativ

           •       Breite Platform-Unterstützung

           •       Progressive-Enhancement

           •       Große Nachfrage

           •       OpenSource, MIT / GPL V2

           •       Auf GitHub verfügbar



Montag, 28. März 2011
Montag, 28. März 2011
Touch


           • Programmatisch
           • Gut für Smartphone
                  optimiert
           • Nur für Smartphones
           • Dual-Linzenz: GPL &
                  Kommerziell
           • Kostenlos
Montag, 28. März 2011
Weitere Frameworks




Montag, 28. März 2011
Webinspector




          http://developer.apple.com/library/safari/
          #documentation/AppleApplications/
                                                       http://trac.webkit.org/wiki/WebInspector
          Conceptual/Safari_Developer_Guide/
          1Introduction/Introduction.html
Montag, 28. März 2011
JSConsole.com

                    • Simple JavaScript command line tool
                    • Bridge across to other browser windows
                        to remotely control and debug
                    • In another browser or device!
                    • By Remy Sharp
                             http://jsconsole.com/remote-debugging.html

Montag, 28. März 2011
Weinre




                        •   Debug web pages on a mobile device

                                  http://pmuellr.github.com/weinre/

Montag, 28. März 2011
Memorize it



Montag, 28. März 2011
TDD
                    • https://github.com/jquery/qunit
                    • http://pivotal.github.com/jasmine/
                    • http://dojotoolkit.org/reference-guide/util/
                        doh.html
                    • http://code.google.com/p/phantomjs/
                    • http://code.google.com/p/js-test-driver/
                    • http://tddjs.com/
Montag, 28. März 2011
Fragen?




Montag, 28. März 2011

Mobile Webapps Entwicklung

  • 1.
    Mobile WebApps Entwickung Kurzer Überblick Montag, 28. März 2011
  • 2.
    Überblick • Technologien • Frameworks • HTML5 et al. • Tools • CSS • Beispiel ausprobieren • JavaScript Montag, 28. März 2011
  • 3.
    WebApp aus Entwicklersicht Eine auf HTML5 basierende Webseite, die für Smartphones optimiert ist. Montag, 28. März 2011
  • 4.
    Zielplattform Webkit 85% Smartphone Market Share http://radar.oreilly.com/2010/05 Montag, 28. März 2011
  • 5.
    Zielplattform Webkit 85% Smartphone WebKit != WebKit Market Share http://radar.oreilly.com/2010/05 http://www.quirksmode.org/webkit.html Montag, 28. März 2011
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    Frameworks Touch WinkToolkit iUI Montag, 28. März 2011
  • 11.
    • Deklarativ • jQuery basiert • Einfach • Smartphone optimiert • OpenSource: MIT Lizenz Montag, 28. März 2011
  • 12.
    Deklarativ • Breite Platform-Unterstützung • Progressive-Enhancement • Große Nachfrage • OpenSource, MIT / GPL V2 • Auf GitHub verfügbar Montag, 28. März 2011
  • 13.
  • 14.
    Touch • Programmatisch • Gut für Smartphone optimiert • Nur für Smartphones • Dual-Linzenz: GPL & Kommerziell • Kostenlos Montag, 28. März 2011
  • 15.
  • 16.
    Webinspector http://developer.apple.com/library/safari/ #documentation/AppleApplications/ http://trac.webkit.org/wiki/WebInspector Conceptual/Safari_Developer_Guide/ 1Introduction/Introduction.html Montag, 28. März 2011
  • 17.
    JSConsole.com • Simple JavaScript command line tool • Bridge across to other browser windows to remotely control and debug • In another browser or device! • By Remy Sharp http://jsconsole.com/remote-debugging.html Montag, 28. März 2011
  • 18.
    Weinre • Debug web pages on a mobile device http://pmuellr.github.com/weinre/ Montag, 28. März 2011
  • 19.
  • 20.
    TDD • https://github.com/jquery/qunit • http://pivotal.github.com/jasmine/ • http://dojotoolkit.org/reference-guide/util/ doh.html • http://code.google.com/p/phantomjs/ • http://code.google.com/p/js-test-driver/ • http://tddjs.com/ Montag, 28. März 2011
  • 21.