SlideShare ist ein Scribd-Unternehmen logo
Wir freuen uns über Ihre Teilnahme!

Das Webinar startet um 14:00 Uhr
(auch der Ton wird dann erst angeschaltet!)




                                              © 2010 Mayflower GmbH
Herzlich Willkommen
zum Mayflower Webinar!

02. Dezember 2010




                         © 2010 Mayflower GmbH
Referent: Thomas Steur



I Seit 2008 bei Mayflower
I Senior Developer
I Co-Developer der offiziellen
  Piwik Mobile App für iOS & Android
I Aktuelle Projekte:
  • SevenGames
  • Sat1Spiele




                                       Mayflower GmbH I 3
Mayflower GmbH



I Deutschlands führender PHP- und OpenSource Dienstleister

I mit Schwerpunkt auf Premium-Web- und Software-
  Entwicklung

I im agilen Umfeld

I für Mittelstand und Großkonzerne




                                                        Mayflower GmbH I 4
Folgetermine



I Winterpause im Januar 2011

I 03. Februar 201 1
  „Javasscript: Best practise debugging und logging“
  von Martin Ruprecht, Developer bei Mayflower

I März 201 1
  „ Was wir im Scrum-Team vom ProductOwner erwarten!“
  von Jo Brunner, Senior Developer bei Mayflower

URL: http://mayflower.de/de/ressourcen/webinare

                                                        Mayflower GmbH I 5
Mobile Anwendungsentwicklung mit
Webtechnologien

Thomas Steur I 02. Dezember 2010




                                   © Mayflower GmbH 2010
Mobile ist ein riesiger Markt




                                Mayflower GmbH I 2
Mobile Betriebssysteme – ein Auszug



I iOS                 Objective-C
I Android             Java/C
I BlackBerry          Java
I Palm webOS          HTML5 / CSS / JavaScript
I symbian             C++ / Java
I Windows Phone 7     C# / VB.net
I Samsung Bada        C++




                                                 Mayflower GmbH I 3
Warum Mobile Apps mit Webtechnologien?



I Web ist auf nahezu allen Geräteklassen verfügbar


I Hauptsächlich einmalige Entwicklungskosten


I Kenntnisse sind bereits vorhanden


I Schnelle Entwicklung


 >> Niedrige Kosten



                                                     Mayflower GmbH I 4
Problem: Fragmentierung der Hardware



I Verschiedene Auflösungen und Ausrichtungen

I Wie viele Buttons? Anordnung der Buttons?

I Touch?

I Verfügbare Leistung von CPU/GPU?

I Wie wird das Gerät bedient?

I Sensoren?



                                               Mayflower GmbH I 5
Problem: Cross Browser



I > 100 verschiedene Browser


I Teilweise nur HTML


I Teilweise CSS1 oder CSS2

                                    u.v.m.
I HTML5 & CSS3


I Nicht alle Geräte unterstützbar



                                             Mayflower GmbH I 6
Welche Geräte soll ich
    unterstützen?




                         Mayflower GmbH I 7
Mobile Internetzugriffe – Deutschland




StatCounter http://gs.statcounter.com

                                           Mayflower GmbH I 8
Mobile Internetzugriffe – Nordamerika




StatCounter http://gs.statcounter.com

                                           Mayflower GmbH I 9
Mobile Internetzugriffe – Weltweit




StatCounter http://gs.statcounter.com

                                        Mayflower GmbH I 10
Was nutzen Ihre User?




                        Mayflower GmbH I 11
Möglichkeiten mit Webtechnologien




                               Mayflower GmbH I 12
Auf Desktop optimierte Webseite



I Usability suboptimal


I Langsam, aufgrund Datenmenge
  und Renderzeit


I Nur neuere Geräte können damit
  umgehen




                                   Mayflower GmbH I 13
Auf Mobile optimierte Webseite



I Einfachere Struktur / Design


I Weniger Inhalte


I Usability ist bereits besser


I Unterstützt mehrere Geräte




                                 Mayflower GmbH I 14
Mobile Web Apps



I Webseite mit einem Viewport


I Größere Buttons


I Gute Usability


I Nicht alle Hardware Features, aber viele


I Eher für spezifische Geräteklassen



                                             Mayflower GmbH I 15
Wie?


       Mayflower GmbH I 16
Web Applikation – erste Schritte



I HTML5 & CSS3


I Headless Browser


I Zoom ausschalten


I Eigenes Icon


I Startbildschirm



                                   Mayflower GmbH I 17
Web Applikation – offline Verfügbarkeit



I Offline Storage (LocalStorage) für Anwenderdaten


I Manifest Cache für Applikation


I Applikation komplett offline verfügbar


I Daten synchronisieren sobald Internet verfügbar




                                                     Mayflower GmbH I 18
Web Applikation



I Geolocation


I Audio


I Video


I Touch Events




                  Mayflower GmbH I 19
Web Applikation – UI



I Canvas


I CSS3


I Mehr Infos zu HTML5
  http://slides.html5rocks.com
                                 http://mugtug.com/sketchpad/




                                                                Mayflower GmbH I 20
Frameworks für Web Apps



I Sencha Touch
  http://sencha.com/products/touch


I jQTouch
  http://jqtouch.com


I jQuery Mobile
  http://jquerymobile.com




                                     Mayflower GmbH I 21
Native Applikationen



I Natives Look & Feel
I Sehr gute Usability
I Monetarisierung
I Schnell
I Erweiterte Funktionalitäten
I Plattformspezifisch
I Updates nicht sofort verfügbar




                                   Mayflower GmbH I 22
Warum nicht Web und Native
 Applikationen vereinen?




                             Mayflower GmbH I 23
PhoneGap



I Web Applikation in einem nativen Container


I Apps werden erstellt mit HTML5, CSS3, JavaScript


I Eine Code Basis für viele Plattformen


I http://phonegap.com




                                                     Mayflower GmbH I 24
PhoneGap



Nicht alle Plattformen werden gleich unterstützt




                                                   http://www.phonegap.com/about


                                                                          Mayflower GmbH I 25
Welche Vorteile gewinne ich,
welche verliere ich dadurch?




                               Mayflower GmbH I 26
Titanium Mobile



I Native Apps mit Webtechnologien



I iOS & Android
I BlackBerry & Google TV ab Q1 2011
I Zweitgrößter Application Publisher im Apple Store




                                                      Mayflower GmbH I 27
Titanium Mobile



I Eine Code Basis


I JavaScript API


I Auch HTML5/CSS3 möglich


I http://appcelerator.com




                            Mayflower GmbH I 28
Was heißt das genau?




                       Mayflower GmbH I 29
Titanium Mobile – Native Look & Feel



I TableView

I Tabs

I Picker

I Form-Elemente

I Dashboard

I Gestures



                                       Mayflower GmbH I 30
Titanium Mobile – erweiterte Funktionalitäten



I Sensoren
I Kamera (auch Aufnehmen)
I Kontakte
I iAd
I Dateisystem
I Datenbank
I Maps




                                                Mayflower GmbH I 31
Web oder Native App?



I Es gibt nicht die EINE Antwort
I Es kommt auf die Anforderungen an


I Wenn Native: PhoneGap oder Titanium Mobile?




   Empfehlung: Zuerst Web App danach Native App


                                                  Mayflower GmbH I 32
Was Sie noch wissen sollten...




                                 Mayflower GmbH I 33
Zugriff auf Daten



I REST API + JSON
I JSON kann mit JavaScript einfach weiter verarbeitet werden


  http://demo.piwik.org/?module=API
  &method=LanguagesManager.getAvailableLanguages
  &format=JSON


  ["am","be","bg","ca","cs",
  "da","de","el","en","es"]




                                                               Mayflower GmbH I 34
W-Fragen (Context)



I Wer sind meine User?
I Welche Geräte werden am meisten verwendet?
I Was für ein Verhalten kann ich erwarten?
I Wo/wann wird meine App verwendet?
I Wie viel Zeit haben meine User zur Verfügung?
I Welches Bedürfnis erfüllt meine App?
I Was ist das primäre Ziel meiner User?




                                                  Mayflower GmbH I 35
Prototyping



I Papier und Bleistift
I Pencil für Firefox, Mac & Windows
  http://pencil.evolus.vn
I Balsamiq
  http://balsamiq.com
I Fireworks




                                      Mayflower GmbH I 36
UI Tipps



I Es gibt nicht die richtige/falsche UI,
     nur: was ist richtig für Ihre User


I User wollen meistens natives Look & Feel


I UI nicht einfach von anderen Plattformen portieren


I Verwenden von einheitlichen Icons


I Ein Designer ist sein Geld wert!!!


                                                       Mayflower GmbH I 37
Links



I UI Guidelines für Mobile und Tablet Web App Design
  http://www.mobilexweb.com/blog/ui-guidelines-mobile-
  tablet-design



I Webinar HTML5 für PHP Developer
  http://mayflower.de/de/ressourcen/webinare/html5




                                                         Mayflower GmbH I 38
Und was können wir für Sie tun?




                              Mayflower GmbH I 39
Vielen Dank für Ihre Aufmerksamkeit!




      Kontakt   Thomas Steur
                thomas.steur@mayflower.de
                +49 931 35965 1155


                Mayflower GmbH
                Pleichertorstr. 2
                97070 Würzburg
02.12.10                              Mayflower GmbH   40
Haben Sie noch Fragen?
webinar@mayflower.de

Folgetermine: 03. Februar 201 / März 201
                             1          1
URL: http://mayflower.de/de/ressourcen/webinare




                                                  © 2010 Mayflower GmbH

Weitere ähnliche Inhalte

Andere mochten auch

Revista CaliNews CaliVita - editia Primavara 2016
Revista CaliNews CaliVita - editia Primavara 2016Revista CaliNews CaliVita - editia Primavara 2016
Revista CaliNews CaliVita - editia Primavara 2016
Natura pentru Sanatate
 
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
Lynn Serafinn
 
Guía de Tradeo - FUT 15 - By GeroMfc
Guía de Tradeo - FUT 15 - By GeroMfcGuía de Tradeo - FUT 15 - By GeroMfc
Guía de Tradeo - FUT 15 - By GeroMfc
Gero Mfc
 
Netiqueta (Netiquette)
Netiqueta (Netiquette)Netiqueta (Netiquette)
Netiqueta (Netiquette)
David Murillo
 
Reflections of Study Abroad Photography Contest 2012
Reflections of Study Abroad Photography Contest 2012Reflections of Study Abroad Photography Contest 2012
Reflections of Study Abroad Photography Contest 2012
Lone Star College - CyFair Branch Library
 
Plantilla documentos externos
Plantilla documentos externosPlantilla documentos externos
Plantilla documentos externos
joseluishorcajo
 
Buscadores y Metabuscadores
Buscadores y MetabuscadoresBuscadores y Metabuscadores
Buscadores y Metabuscadores
Michelle Salazar
 
Präsentaton ONE Roundtable
Präsentaton ONE RoundtablePräsentaton ONE Roundtable
Präsentaton ONE Roundtable
ONE Schweiz
 
Verano 13 cas
Verano 13 casVerano 13 cas
Verano 13 cas
Ferreteria Sual Alzira
 
Universidad ORVAL 2015
Universidad ORVAL 2015Universidad ORVAL 2015
Universidad ORVAL 2015
Universidad ORVAL
 
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
Brian Barthelt
 
Plan de Negocios It Works by Subirana Dreams
Plan de Negocios It Works by Subirana DreamsPlan de Negocios It Works by Subirana Dreams
Plan de Negocios It Works by Subirana Dreams
It Works España By Subirana Dreams
 
Brooding of chicks
Brooding of chicksBrooding of chicks
Brooding of chicks
mithu mehr
 
Informe de colaboracion polidepor ti vo completo
Informe de colaboracion polidepor ti vo completoInforme de colaboracion polidepor ti vo completo
Informe de colaboracion polidepor ti vo completo
Asesoria Inmobiliaria Sara Sara
 
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
DIANA NÚÑEZ ROJO
 
Proof of existence Market Research
Proof of existence Market ResearchProof of existence Market Research
Proof of existence Market Research
Tetsuyuki Oishi
 
01 . unidad 1. aproximación al hecho artístico.
01 .  unidad 1. aproximación al hecho artístico.01 .  unidad 1. aproximación al hecho artístico.
01 . unidad 1. aproximación al hecho artístico.
48466734F
 
El privilegio de hablar con dios
El privilegio de hablar con diosEl privilegio de hablar con dios
El privilegio de hablar con dios
Descargas Adventista
 
Facture 126 35 cp39 004 - ch de bourbon l'archambault
Facture   126 35 cp39 004 - ch de bourbon l'archambaultFacture   126 35 cp39 004 - ch de bourbon l'archambault
Facture 126 35 cp39 004 - ch de bourbon l'archambaultmarionvallot
 
LA CRÓNICA 580
LA CRÓNICA 580LA CRÓNICA 580

Andere mochten auch (20)

Revista CaliNews CaliVita - editia Primavara 2016
Revista CaliNews CaliVita - editia Primavara 2016Revista CaliNews CaliVita - editia Primavara 2016
Revista CaliNews CaliVita - editia Primavara 2016
 
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
Lynn Serafinn Spirit Authors Amazon Campaign Management Overview Oct2010
 
Guía de Tradeo - FUT 15 - By GeroMfc
Guía de Tradeo - FUT 15 - By GeroMfcGuía de Tradeo - FUT 15 - By GeroMfc
Guía de Tradeo - FUT 15 - By GeroMfc
 
Netiqueta (Netiquette)
Netiqueta (Netiquette)Netiqueta (Netiquette)
Netiqueta (Netiquette)
 
Reflections of Study Abroad Photography Contest 2012
Reflections of Study Abroad Photography Contest 2012Reflections of Study Abroad Photography Contest 2012
Reflections of Study Abroad Photography Contest 2012
 
Plantilla documentos externos
Plantilla documentos externosPlantilla documentos externos
Plantilla documentos externos
 
Buscadores y Metabuscadores
Buscadores y MetabuscadoresBuscadores y Metabuscadores
Buscadores y Metabuscadores
 
Präsentaton ONE Roundtable
Präsentaton ONE RoundtablePräsentaton ONE Roundtable
Präsentaton ONE Roundtable
 
Verano 13 cas
Verano 13 casVerano 13 cas
Verano 13 cas
 
Universidad ORVAL 2015
Universidad ORVAL 2015Universidad ORVAL 2015
Universidad ORVAL 2015
 
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
Motley Crue, Moore's Law & Meh, U of I Digital Bootcamp Kenote Speech 2014
 
Plan de Negocios It Works by Subirana Dreams
Plan de Negocios It Works by Subirana DreamsPlan de Negocios It Works by Subirana Dreams
Plan de Negocios It Works by Subirana Dreams
 
Brooding of chicks
Brooding of chicksBrooding of chicks
Brooding of chicks
 
Informe de colaboracion polidepor ti vo completo
Informe de colaboracion polidepor ti vo completoInforme de colaboracion polidepor ti vo completo
Informe de colaboracion polidepor ti vo completo
 
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
Diagnóstico de salud comunitario en la población adulta de Khamlia (Marruecos...
 
Proof of existence Market Research
Proof of existence Market ResearchProof of existence Market Research
Proof of existence Market Research
 
01 . unidad 1. aproximación al hecho artístico.
01 .  unidad 1. aproximación al hecho artístico.01 .  unidad 1. aproximación al hecho artístico.
01 . unidad 1. aproximación al hecho artístico.
 
El privilegio de hablar con dios
El privilegio de hablar con diosEl privilegio de hablar con dios
El privilegio de hablar con dios
 
Facture 126 35 cp39 004 - ch de bourbon l'archambault
Facture   126 35 cp39 004 - ch de bourbon l'archambaultFacture   126 35 cp39 004 - ch de bourbon l'archambault
Facture 126 35 cp39 004 - ch de bourbon l'archambault
 
LA CRÓNICA 580
LA CRÓNICA 580LA CRÓNICA 580
LA CRÓNICA 580
 

Ähnlich wie Mobile Anwendungsentwicklung mit Webtechnologien

Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Johannes Weber
 
Javascript debugging logging
Javascript debugging loggingJavascript debugging logging
Javascript debugging logging
Mayflower GmbH
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Mayflower GmbH
 
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme MarktüberblickeStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
TechDivision GmbH
 
Immobilien 2.0
Immobilien 2.0Immobilien 2.0
Immobilien 2.0
Thomas Gawlitta
 
Multi-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer ApplicationMulti-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer Application
FLYACTS GmbH
 
Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
Jürg Kobel
 
JS Best Practises Debugging und Logging
JS Best Practises Debugging und LoggingJS Best Practises Debugging und Logging
JS Best Practises Debugging und Logging
Mayflower GmbH
 
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
FLYACTS GmbH
 
Disruptive Kraft von Open Source im E-Commerce - Meet Magento
Disruptive Kraft von Open Source im E-Commerce - Meet MagentoDisruptive Kraft von Open Source im E-Commerce - Meet Magento
Disruptive Kraft von Open Source im E-Commerce - Meet Magento
Mayflower GmbH
 
BDD
BDDBDD
Dem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die ZukunftDem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die Zukunft
ahorn. gmbh
 
Android / iPhone Apps Mit Titanium Developer
Android / iPhone Apps Mit Titanium DeveloperAndroid / iPhone Apps Mit Titanium Developer
Android / iPhone Apps Mit Titanium Developer
Mayflower GmbH
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
Adrian Oggenfuss
 
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
soultank AG
 
Usability coffee-mobile protptyping
Usability coffee-mobile protptypingUsability coffee-mobile protptyping
Usability coffee-mobile protptyping
soultank AG
 
Mobile Unternehmenskommunikation
Mobile UnternehmenskommunikationMobile Unternehmenskommunikation
Mobile Unternehmenskommunikation
Bjoern Eichstaedt
 
Echtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile BitsEchtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile Bits
deutsche-startups.de
 

Ähnlich wie Mobile Anwendungsentwicklung mit Webtechnologien (20)

Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy StrategienResponsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
 
Javascript debugging logging
Javascript debugging loggingJavascript debugging logging
Javascript debugging logging
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme MarktüberblickeStrategy-Magazin #31 - Shopsysteme Marktüberblick
eStrategy-Magazin #31 - Shopsysteme Marktüberblick
 
Immobilien 2.0
Immobilien 2.0Immobilien 2.0
Immobilien 2.0
 
Multi-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer ApplicationMulti-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer Application
 
Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017Social Media Starter Workshop vom 15. Juni 2017
Social Media Starter Workshop vom 15. Juni 2017
 
JS Best Practises Debugging und Logging
JS Best Practises Debugging und LoggingJS Best Practises Debugging und Logging
JS Best Practises Debugging und Logging
 
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
Praxisleitfaden für Business Apps - Potenziale, Technologien, Kosten, Vorbere...
 
Warum acquia kopie
Warum acquia kopieWarum acquia kopie
Warum acquia kopie
 
Warum acquia
Warum acquiaWarum acquia
Warum acquia
 
Disruptive Kraft von Open Source im E-Commerce - Meet Magento
Disruptive Kraft von Open Source im E-Commerce - Meet MagentoDisruptive Kraft von Open Source im E-Commerce - Meet Magento
Disruptive Kraft von Open Source im E-Commerce - Meet Magento
 
BDD
BDDBDD
BDD
 
Dem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die ZukunftDem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die Zukunft
 
Android / iPhone Apps Mit Titanium Developer
Android / iPhone Apps Mit Titanium DeveloperAndroid / iPhone Apps Mit Titanium Developer
Android / iPhone Apps Mit Titanium Developer
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
 
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
 
Usability coffee-mobile protptyping
Usability coffee-mobile protptypingUsability coffee-mobile protptyping
Usability coffee-mobile protptyping
 
Mobile Unternehmenskommunikation
Mobile UnternehmenskommunikationMobile Unternehmenskommunikation
Mobile Unternehmenskommunikation
 
Echtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile BitsEchtzeit Klub - Apps: Mobile Bits
Echtzeit Klub - Apps: Mobile Bits
 

Mehr von Mayflower GmbH

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mayflower GmbH
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
Mayflower GmbH
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
Mayflower GmbH
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
Mayflower GmbH
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
Mayflower GmbH
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
Mayflower GmbH
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 
Usability im web
Usability im webUsability im web
Usability im web
Mayflower GmbH
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
Mayflower GmbH
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
Mayflower GmbH
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
Mayflower GmbH
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
Mayflower GmbH
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
Mayflower GmbH
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
Mayflower GmbH
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
Mayflower GmbH
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
Mayflower GmbH
 
Schnelle Geschäfte
Schnelle GeschäfteSchnelle Geschäfte
Schnelle Geschäfte
Mayflower GmbH
 
Test-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPCTest-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPC
Mayflower GmbH
 

Mehr von Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Usability im web
Usability im webUsability im web
Usability im web
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Mongo DB - Segen oder Fluch
Mongo DB - Segen oder FluchMongo DB - Segen oder Fluch
Mongo DB - Segen oder Fluch
 
Schnelle Geschäfte
Schnelle GeschäfteSchnelle Geschäfte
Schnelle Geschäfte
 
Test-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPCTest-Driven JavaScript Development IPC
Test-Driven JavaScript Development IPC
 

Mobile Anwendungsentwicklung mit Webtechnologien

  • 1. Wir freuen uns über Ihre Teilnahme! Das Webinar startet um 14:00 Uhr (auch der Ton wird dann erst angeschaltet!) © 2010 Mayflower GmbH
  • 2. Herzlich Willkommen zum Mayflower Webinar! 02. Dezember 2010 © 2010 Mayflower GmbH
  • 3. Referent: Thomas Steur I Seit 2008 bei Mayflower I Senior Developer I Co-Developer der offiziellen Piwik Mobile App für iOS & Android I Aktuelle Projekte: • SevenGames • Sat1Spiele Mayflower GmbH I 3
  • 4. Mayflower GmbH I Deutschlands führender PHP- und OpenSource Dienstleister I mit Schwerpunkt auf Premium-Web- und Software- Entwicklung I im agilen Umfeld I für Mittelstand und Großkonzerne Mayflower GmbH I 4
  • 5. Folgetermine I Winterpause im Januar 2011 I 03. Februar 201 1 „Javasscript: Best practise debugging und logging“ von Martin Ruprecht, Developer bei Mayflower I März 201 1 „ Was wir im Scrum-Team vom ProductOwner erwarten!“ von Jo Brunner, Senior Developer bei Mayflower URL: http://mayflower.de/de/ressourcen/webinare Mayflower GmbH I 5
  • 6. Mobile Anwendungsentwicklung mit Webtechnologien Thomas Steur I 02. Dezember 2010 © Mayflower GmbH 2010
  • 7. Mobile ist ein riesiger Markt Mayflower GmbH I 2
  • 8. Mobile Betriebssysteme – ein Auszug I iOS Objective-C I Android Java/C I BlackBerry Java I Palm webOS HTML5 / CSS / JavaScript I symbian C++ / Java I Windows Phone 7 C# / VB.net I Samsung Bada C++ Mayflower GmbH I 3
  • 9. Warum Mobile Apps mit Webtechnologien? I Web ist auf nahezu allen Geräteklassen verfügbar I Hauptsächlich einmalige Entwicklungskosten I Kenntnisse sind bereits vorhanden I Schnelle Entwicklung >> Niedrige Kosten Mayflower GmbH I 4
  • 10. Problem: Fragmentierung der Hardware I Verschiedene Auflösungen und Ausrichtungen I Wie viele Buttons? Anordnung der Buttons? I Touch? I Verfügbare Leistung von CPU/GPU? I Wie wird das Gerät bedient? I Sensoren? Mayflower GmbH I 5
  • 11. Problem: Cross Browser I > 100 verschiedene Browser I Teilweise nur HTML I Teilweise CSS1 oder CSS2 u.v.m. I HTML5 & CSS3 I Nicht alle Geräte unterstützbar Mayflower GmbH I 6
  • 12. Welche Geräte soll ich unterstützen? Mayflower GmbH I 7
  • 13. Mobile Internetzugriffe – Deutschland StatCounter http://gs.statcounter.com Mayflower GmbH I 8
  • 14. Mobile Internetzugriffe – Nordamerika StatCounter http://gs.statcounter.com Mayflower GmbH I 9
  • 15. Mobile Internetzugriffe – Weltweit StatCounter http://gs.statcounter.com Mayflower GmbH I 10
  • 16. Was nutzen Ihre User? Mayflower GmbH I 11
  • 17. Möglichkeiten mit Webtechnologien Mayflower GmbH I 12
  • 18. Auf Desktop optimierte Webseite I Usability suboptimal I Langsam, aufgrund Datenmenge und Renderzeit I Nur neuere Geräte können damit umgehen Mayflower GmbH I 13
  • 19. Auf Mobile optimierte Webseite I Einfachere Struktur / Design I Weniger Inhalte I Usability ist bereits besser I Unterstützt mehrere Geräte Mayflower GmbH I 14
  • 20. Mobile Web Apps I Webseite mit einem Viewport I Größere Buttons I Gute Usability I Nicht alle Hardware Features, aber viele I Eher für spezifische Geräteklassen Mayflower GmbH I 15
  • 21. Wie? Mayflower GmbH I 16
  • 22. Web Applikation – erste Schritte I HTML5 & CSS3 I Headless Browser I Zoom ausschalten I Eigenes Icon I Startbildschirm Mayflower GmbH I 17
  • 23. Web Applikation – offline Verfügbarkeit I Offline Storage (LocalStorage) für Anwenderdaten I Manifest Cache für Applikation I Applikation komplett offline verfügbar I Daten synchronisieren sobald Internet verfügbar Mayflower GmbH I 18
  • 24. Web Applikation I Geolocation I Audio I Video I Touch Events Mayflower GmbH I 19
  • 25. Web Applikation – UI I Canvas I CSS3 I Mehr Infos zu HTML5 http://slides.html5rocks.com http://mugtug.com/sketchpad/ Mayflower GmbH I 20
  • 26. Frameworks für Web Apps I Sencha Touch http://sencha.com/products/touch I jQTouch http://jqtouch.com I jQuery Mobile http://jquerymobile.com Mayflower GmbH I 21
  • 27. Native Applikationen I Natives Look & Feel I Sehr gute Usability I Monetarisierung I Schnell I Erweiterte Funktionalitäten I Plattformspezifisch I Updates nicht sofort verfügbar Mayflower GmbH I 22
  • 28. Warum nicht Web und Native Applikationen vereinen? Mayflower GmbH I 23
  • 29. PhoneGap I Web Applikation in einem nativen Container I Apps werden erstellt mit HTML5, CSS3, JavaScript I Eine Code Basis für viele Plattformen I http://phonegap.com Mayflower GmbH I 24
  • 30. PhoneGap Nicht alle Plattformen werden gleich unterstützt http://www.phonegap.com/about Mayflower GmbH I 25
  • 31. Welche Vorteile gewinne ich, welche verliere ich dadurch? Mayflower GmbH I 26
  • 32. Titanium Mobile I Native Apps mit Webtechnologien I iOS & Android I BlackBerry & Google TV ab Q1 2011 I Zweitgrößter Application Publisher im Apple Store Mayflower GmbH I 27
  • 33. Titanium Mobile I Eine Code Basis I JavaScript API I Auch HTML5/CSS3 möglich I http://appcelerator.com Mayflower GmbH I 28
  • 34. Was heißt das genau? Mayflower GmbH I 29
  • 35. Titanium Mobile – Native Look & Feel I TableView I Tabs I Picker I Form-Elemente I Dashboard I Gestures Mayflower GmbH I 30
  • 36. Titanium Mobile – erweiterte Funktionalitäten I Sensoren I Kamera (auch Aufnehmen) I Kontakte I iAd I Dateisystem I Datenbank I Maps Mayflower GmbH I 31
  • 37. Web oder Native App? I Es gibt nicht die EINE Antwort I Es kommt auf die Anforderungen an I Wenn Native: PhoneGap oder Titanium Mobile? Empfehlung: Zuerst Web App danach Native App Mayflower GmbH I 32
  • 38. Was Sie noch wissen sollten... Mayflower GmbH I 33
  • 39. Zugriff auf Daten I REST API + JSON I JSON kann mit JavaScript einfach weiter verarbeitet werden http://demo.piwik.org/?module=API &method=LanguagesManager.getAvailableLanguages &format=JSON ["am","be","bg","ca","cs", "da","de","el","en","es"] Mayflower GmbH I 34
  • 40. W-Fragen (Context) I Wer sind meine User? I Welche Geräte werden am meisten verwendet? I Was für ein Verhalten kann ich erwarten? I Wo/wann wird meine App verwendet? I Wie viel Zeit haben meine User zur Verfügung? I Welches Bedürfnis erfüllt meine App? I Was ist das primäre Ziel meiner User? Mayflower GmbH I 35
  • 41. Prototyping I Papier und Bleistift I Pencil für Firefox, Mac & Windows http://pencil.evolus.vn I Balsamiq http://balsamiq.com I Fireworks Mayflower GmbH I 36
  • 42. UI Tipps I Es gibt nicht die richtige/falsche UI, nur: was ist richtig für Ihre User I User wollen meistens natives Look & Feel I UI nicht einfach von anderen Plattformen portieren I Verwenden von einheitlichen Icons I Ein Designer ist sein Geld wert!!! Mayflower GmbH I 37
  • 43. Links I UI Guidelines für Mobile und Tablet Web App Design http://www.mobilexweb.com/blog/ui-guidelines-mobile- tablet-design I Webinar HTML5 für PHP Developer http://mayflower.de/de/ressourcen/webinare/html5 Mayflower GmbH I 38
  • 44. Und was können wir für Sie tun? Mayflower GmbH I 39
  • 45. Vielen Dank für Ihre Aufmerksamkeit! Kontakt Thomas Steur thomas.steur@mayflower.de +49 931 35965 1155 Mayflower GmbH Pleichertorstr. 2 97070 Würzburg 02.12.10 Mayflower GmbH 40
  • 46. Haben Sie noch Fragen? webinar@mayflower.de Folgetermine: 03. Februar 201 / März 201 1 1 URL: http://mayflower.de/de/ressourcen/webinare © 2010 Mayflower GmbH