SlideShare ist ein Scribd-Unternehmen logo
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

Weitere ähnliche Inhalte

Andere mochten auch

Fabricación de la bolsa plástica
Fabricación de la bolsa plásticaFabricación de la bolsa plástica
Fabricación de la bolsa plástica
reyes100
 
Powert point 21
Powert point 21Powert point 21
Powert point 21
nuriamb1
 
Impacto de los medios.
Impacto de los medios.Impacto de los medios.
Impacto de los medios.
FernandaAcosta
 
Movimiento compuesto1
Movimiento compuesto1Movimiento compuesto1
Movimiento compuesto1
saulfabianreyes1
 
Oque Oamor
Oque OamorOque Oamor
Oque Oamor
QSEJAETERNO
 
Um dia de esperança
Um dia de esperançaUm dia de esperança
Um dia de esperança
evangelismo emslides
 
Amigonaotemdefeito 1
Amigonaotemdefeito 1Amigonaotemdefeito 1
Amigonaotemdefeito 1
QSEJAETERNO
 
Trabajo practico de inforatica nº2
Trabajo practico de inforatica nº2Trabajo practico de inforatica nº2
Trabajo practico de inforatica nº2
Lucas Bataglia
 
Fabricación de la bolsa plástica
Fabricación de la bolsa plásticaFabricación de la bolsa plástica
Fabricación de la bolsa plástica
reyes100
 
Nucleo
NucleoNucleo
Nucleo
Pepiojo
 
Power sal educ san fernando 3-7-12
Power sal educ san fernando 3-7-12Power sal educ san fernando 3-7-12
Power sal educ san fernando 3-7-12
morocho11
 
Plagio y honestidad_de la Fuente_Echagüe
Plagio y honestidad_de la Fuente_EchagüePlagio y honestidad_de la Fuente_Echagüe
Plagio y honestidad_de la Fuente_Echagüe
Emma_y_Euge
 
Fundamentos de SQL - Workshop 1
Fundamentos de SQL - Workshop 1Fundamentos de SQL - Workshop 1
Fundamentos de SQL - Workshop 1
Emiliano Barbosa
 
Isla verde por los alumnos
Isla verde por los alumnosIsla verde por los alumnos
Isla verde por los alumnos
María Noel Domínguez
 
Unidade 4
Unidade 4Unidade 4
1.1 ocupacao irregular_de_app_urbana
1.1 ocupacao irregular_de_app_urbana1.1 ocupacao irregular_de_app_urbana
1.1 ocupacao irregular_de_app_urbana
Jucyara Costa
 
Dia internacional da terra
Dia internacional da terra Dia internacional da terra
Dia internacional da terra
Ana Piano
 
Apresentacao Jasete Revisada
Apresentacao Jasete RevisadaApresentacao Jasete Revisada
Apresentacao Jasete Revisada
jasete
 
530 preguntas psu oficial
530 preguntas psu oficial530 preguntas psu oficial
530 preguntas psu oficial
Constanza Mercedes Lozano Garcia
 

Andere mochten auch (20)

Fabricación de la bolsa plástica
Fabricación de la bolsa plásticaFabricación de la bolsa plástica
Fabricación de la bolsa plástica
 
Powert point 21
Powert point 21Powert point 21
Powert point 21
 
Impacto de los medios.
Impacto de los medios.Impacto de los medios.
Impacto de los medios.
 
Movimiento compuesto1
Movimiento compuesto1Movimiento compuesto1
Movimiento compuesto1
 
Oque Oamor
Oque OamorOque Oamor
Oque Oamor
 
Um dia de esperança
Um dia de esperançaUm dia de esperança
Um dia de esperança
 
Amigonaotemdefeito 1
Amigonaotemdefeito 1Amigonaotemdefeito 1
Amigonaotemdefeito 1
 
Trabajo practico de inforatica nº2
Trabajo practico de inforatica nº2Trabajo practico de inforatica nº2
Trabajo practico de inforatica nº2
 
Fabricación de la bolsa plástica
Fabricación de la bolsa plásticaFabricación de la bolsa plástica
Fabricación de la bolsa plástica
 
Nucleo
NucleoNucleo
Nucleo
 
Power sal educ san fernando 3-7-12
Power sal educ san fernando 3-7-12Power sal educ san fernando 3-7-12
Power sal educ san fernando 3-7-12
 
Plagio y honestidad_de la Fuente_Echagüe
Plagio y honestidad_de la Fuente_EchagüePlagio y honestidad_de la Fuente_Echagüe
Plagio y honestidad_de la Fuente_Echagüe
 
Fundamentos de SQL - Workshop 1
Fundamentos de SQL - Workshop 1Fundamentos de SQL - Workshop 1
Fundamentos de SQL - Workshop 1
 
Isla verde por los alumnos
Isla verde por los alumnosIsla verde por los alumnos
Isla verde por los alumnos
 
Presentacio
PresentacioPresentacio
Presentacio
 
Unidade 4
Unidade 4Unidade 4
Unidade 4
 
1.1 ocupacao irregular_de_app_urbana
1.1 ocupacao irregular_de_app_urbana1.1 ocupacao irregular_de_app_urbana
1.1 ocupacao irregular_de_app_urbana
 
Dia internacional da terra
Dia internacional da terra Dia internacional da terra
Dia internacional da terra
 
Apresentacao Jasete Revisada
Apresentacao Jasete RevisadaApresentacao Jasete Revisada
Apresentacao Jasete Revisada
 
530 preguntas psu oficial
530 preguntas psu oficial530 preguntas psu oficial
530 preguntas psu oficial
 

Ähnlich wie Mobile Webapps Entwicklung

Cross platform development - by Uxebu
Cross platform development - by UxebuCross platform development - by Uxebu
Cross platform development - by UxebuVodafone developer
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
May 12 html5 apps - cross platform - upfront ug berlin
May 12   html5 apps - cross platform - upfront ug berlinMay 12   html5 apps - cross platform - upfront ug berlin
May 12 html5 apps - cross platform - upfront ug berlinguest77ba6f5
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
wolframkriesing
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
Mobile-Times 2010: Cross Platform Apps
Mobile-Times 2010: Cross Platform AppsMobile-Times 2010: Cross Platform Apps
Mobile-Times 2010: Cross Platform Apps
wolframkriesing
 
Semantic Web für Menschen wie du und ich
Semantic Web für Menschen wie du und ichSemantic Web für Menschen wie du und ich
Semantic Web für Menschen wie du und ich
Tobias Kuhn
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
Christian Heindel
 
Virales Wissensmanagement-Microblogs in der Projektkommunikation
Virales Wissensmanagement-Microblogs in der ProjektkommunikationVirales Wissensmanagement-Microblogs in der Projektkommunikation
Virales Wissensmanagement-Microblogs in der Projektkommunikation
Martina Goehring
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix it
jweiland
 
jQuery für Anfänger
jQuery für AnfängerjQuery für Anfänger
jQuery für Anfänger
die.agilen GmbH
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 

Ähnlich wie Mobile Webapps Entwicklung (20)

Mobile Webapps Motivation
Mobile Webapps MotivationMobile Webapps Motivation
Mobile Webapps Motivation
 
Mobile WebApps
Mobile WebAppsMobile WebApps
Mobile WebApps
 
WAC
WACWAC
WAC
 
Cross platform development - by Uxebu
Cross platform development - by UxebuCross platform development - by Uxebu
Cross platform development - by Uxebu
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
May 12 html5 apps - cross platform - upfront ug berlin
May 12   html5 apps - cross platform - upfront ug berlinMay 12   html5 apps - cross platform - upfront ug berlin
May 12 html5 apps - cross platform - upfront ug berlin
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
Mobile-Times 2010: Cross Platform Apps
Mobile-Times 2010: Cross Platform AppsMobile-Times 2010: Cross Platform Apps
Mobile-Times 2010: Cross Platform Apps
 
Semantic Web für Menschen wie du und ich
Semantic Web für Menschen wie du und ichSemantic Web für Menschen wie du und ich
Semantic Web für Menschen wie du und ich
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Virales Wissensmanagement-Microblogs in der Projektkommunikation
Virales Wissensmanagement-Microblogs in der ProjektkommunikationVirales Wissensmanagement-Microblogs in der Projektkommunikation
Virales Wissensmanagement-Microblogs in der Projektkommunikation
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix it
 
SWT2011 - 01 - Motivation
SWT2011 - 01 - MotivationSWT2011 - 01 - Motivation
SWT2011 - 01 - Motivation
 
SWT
SWTSWT
SWT
 
jQuery für Anfänger
jQuery für AnfängerjQuery für Anfänger
jQuery für Anfänger
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 

Mehr von Matthias Luebken

Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
Matthias Luebken
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
Matthias Luebken
 
Container Patterns
Container PatternsContainer Patterns
Container Patterns
Matthias Luebken
 
Eine Einführung in Docker
Eine Einführung in DockerEine Einführung in Docker
Eine Einführung in Docker
Matthias Luebken
 
How to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one roomHow to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one room
Matthias Luebken
 
How to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one roomHow to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one room
Matthias Luebken
 
Docker Introduction – @ Agile Bonn
Docker Introduction – @ Agile BonnDocker Introduction – @ Agile Bonn
Docker Introduction – @ Agile Bonn
Matthias Luebken
 
“Und wie war ich so?”
Feedback in Unternehmen
“Und wie war ich so?”
Feedback in Unternehmen“Und wie war ich so?”
Feedback in Unternehmen
“Und wie war ich so?”
Feedback in Unternehmen
Matthias Luebken
 
Home- (office) ?
Home- (office) ?Home- (office) ?
Home- (office) ?
Matthias Luebken
 
Staying Startup
Staying StartupStaying Startup
Staying Startup
Matthias Luebken
 
Talk: Staying Startup at Interactive-Cologne
Talk: Staying Startup at Interactive-CologneTalk: Staying Startup at Interactive-Cologne
Talk: Staying Startup at Interactive-Cologne
Matthias Luebken
 
Verbessertes Feedback durch Peerreview
Verbessertes Feedback durch PeerreviewVerbessertes Feedback durch Peerreview
Verbessertes Feedback durch PeerreviewMatthias Luebken
 

Mehr von Matthias Luebken (12)

Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
 
Container Patterns
Container PatternsContainer Patterns
Container Patterns
 
Eine Einführung in Docker
Eine Einführung in DockerEine Einführung in Docker
Eine Einführung in Docker
 
How to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one roomHow to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one room
 
How to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one roomHow to scale product development when you no longer fit in one room
How to scale product development when you no longer fit in one room
 
Docker Introduction – @ Agile Bonn
Docker Introduction – @ Agile BonnDocker Introduction – @ Agile Bonn
Docker Introduction – @ Agile Bonn
 
“Und wie war ich so?”
Feedback in Unternehmen
“Und wie war ich so?”
Feedback in Unternehmen“Und wie war ich so?”
Feedback in Unternehmen
“Und wie war ich so?”
Feedback in Unternehmen
 
Home- (office) ?
Home- (office) ?Home- (office) ?
Home- (office) ?
 
Staying Startup
Staying StartupStaying Startup
Staying Startup
 
Talk: Staying Startup at Interactive-Cologne
Talk: Staying Startup at Interactive-CologneTalk: Staying Startup at Interactive-Cologne
Talk: Staying Startup at Interactive-Cologne
 
Verbessertes Feedback durch Peerreview
Verbessertes Feedback durch PeerreviewVerbessertes Feedback durch Peerreview
Verbessertes Feedback durch Peerreview
 

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
  • 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
  • 14. Touch • Programmatisch • Gut für Smartphone optimiert • Nur für Smartphones • Dual-Linzenz: GPL & Kommerziell • Kostenlos Montag, 28. März 2011
  • 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
  • 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