Mobile Anwendungsentwicklung mit Webtechnologien

© 2010 Mayflower GmbH

Wir freuen uns über Ihre Teilnahme!

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

© 2010 Mayflower GmbH

Herzlich Willkommenzum Mayflower Webinar!

02. Dezember 2010

Mayflower GmbH I 3

I Seit 2008 bei MayflowerI Senior DeveloperI Co-Developer der offiziellen

Piwik Mobile App für iOS & AndroidI Aktuelle Projekte:

• SevenGames• Sat1Spiele

Referent: Thomas Steur

Mayflower GmbH I 4

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

Mayflower GmbH I 5

I Winterpause im Januar 2011

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

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

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

Folgetermine

© Mayflower GmbH 2010

Mobile Anwendungsentwicklung mit Webtechnologien

Thomas Steur I 02. Dezember 2010

Mayflower GmbH I 2

Mobile ist ein riesiger Markt

Mayflower GmbH I 3

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 4

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 5

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 6

Problem: Cross Browser

I > 100 verschiedene Browser

I Teilweise nur HTML

I Teilweise CSS1 oder CSS2

I HTML5 & CSS3

I Nicht alle Geräte unterstützbar

u.v.m.

Mayflower GmbH I 7

Welche Geräte soll ich unterstützen?

Mayflower GmbH I 8

Mobile Internetzugriffe – Deutschland

StatCounter http://gs.statcounter.com

Mayflower GmbH I 9

Mobile Internetzugriffe – Nordamerika

StatCounter http://gs.statcounter.com

Mayflower GmbH I 10

Mobile Internetzugriffe – Weltweit

StatCounter http://gs.statcounter.com

Mayflower GmbH I 11

Was nutzen Ihre User?

Mayflower GmbH I 12

Möglichkeiten mit Webtechnologien

Mayflower GmbH I 13

Auf Desktop optimierte Webseite

I Usability suboptimal

I Langsam, aufgrund Datenmenge und Renderzeit

I Nur neuere Geräte können damitumgehen

Mayflower GmbH I 14

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 15

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 16

Wie?

Mayflower GmbH I 17

Web Applikation – erste Schritte

I HTML5 & CSS3

I Headless Browser

I Zoom ausschalten

I Eigenes Icon

I Startbildschirm

Mayflower GmbH I 18

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 19

Web Applikation

I Geolocation

I Audio

I Video

I Touch Events

Mayflower GmbH I 20

Web Applikation – UI

I Canvas

I CSS3

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

http://mugtug.com/sketchpad/

Mayflower GmbH I 21

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 22

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 23

Warum nicht Web und Native Applikationen vereinen?

Mayflower GmbH I 24

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 25

PhoneGap

Nicht alle Plattformen werden gleich unterstützt

http://www.phonegap.com/about

Mayflower GmbH I 26

Welche Vorteile gewinne ich, welche verliere ich dadurch?

Mayflower GmbH I 27

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 28

Titanium Mobile

I Eine Code Basis

I JavaScript API

I Auch HTML5/CSS3 möglich

I http://appcelerator.com

Mayflower GmbH I 29

Was heißt das genau?

Mayflower GmbH I 30

Titanium Mobile – Native Look & Feel

I TableView

I Tabs

I Picker

I Form-Elemente

I Dashboard

I Gestures

Mayflower GmbH I 31

Titanium Mobile – erweiterte Funktionalitäten

I Sensoren

I Kamera (auch Aufnehmen)

I Kontakte

I iAd

I Dateisystem

I Datenbank

I Maps

Mayflower GmbH I 32

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 33

Was Sie noch wissen sollten...

Mayflower GmbH I 34

Zugriff auf Daten

I REST API + JSON

I JSON kann mit JavaScript einfach weiter verarbeitet werden

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

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

Mayflower GmbH I 35

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 36

Prototyping

I Papier und Bleistift

I Pencil für Firefox, Mac & Windowshttp://pencil.evolus.vn

I Balsamiq http://balsamiq.com

I Fireworks

Mayflower GmbH I 37

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 38

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 39

Und was können wir für Sie tun?

02.12.10 Mayflower GmbH 40

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt Thomas Steur

thomas.steur@mayflower.de

+49 931 35965 1155

Mayflower GmbH

Pleichertorstr. 2

97070 Würzburg

© 2010 Mayflower GmbH

webinar@mayflower.de

Folgetermine: 03. Februar 2011 / März 2011

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

Haben Sie noch Fragen?