mobile webapps entwicklung

Mobile WebAppsEntwickung

Kurzer Überblick

Montag, 28. März 2011

Überblick

• Technologien

• HTML5 et al.

• CSS

• JavaScript

• Frameworks

• Tools

• Beispiel ausprobieren


WebApp aus Entwicklersicht

Eine auf HTML5 basierende Webseite, die für Smartphones optimiert ist.


85% Smartphone Market Share

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

Zielplattform Webkit




85% Smartphone Market Share WebKit != WebKit

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

Zielplattform Webkit


http://www.quirksmode.org/webkit.html

http://www.quirksmode.org/webkit.html



Technologien


CSS


JavaScript


iUI

WinkToolkitTouch

Frameworks


• Deklarativ

• jQuery basiert

• Einfach

• Smartphone optimiert

• OpenSource: MIT Lizenz


• Deklarativ

• Breite Platform-Unterstützung

• Progressive-Enhancement

• Große Nachfrage

• OpenSource, MIT / GPL V2

• Auf GitHub verfügbar


• Programmatisch

• Gut für Smartphone optimiert

• Nur für Smartphones

• Dual-Linzenz: GPL & Kommerziell

• Kostenlos

Touch


Weitere Frameworks


Webinspector

http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html

http://trac.webkit.org/wiki/WebInspector


http://developer.apple.com/library/safari/#




http://developer.apple.com/library/safari/%23documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html

http://developer.apple.com/library/safari/%23documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html





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






Weinre

• Debug web pages on a mobile device

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






Memorize it


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/


https://github.com/jquery/qunit

https://github.com/jquery/qunit

http://pivotal.github.com/jasmine/

http://pivotal.github.com/jasmine/

http://dojotoolkit.org/reference-guide/util/doh.html




http://code.google.com/p/phantomjs/

http://code.google.com/p/phantomjs/

http://code.google.com/p/js-test-driver/

http://code.google.com/p/js-test-driver/

http://tddjs.com/

http://tddjs.com/

Fragen?


mobile webapps entwicklung

Technology