Mobile Anwendungsentwicklung mit Webtechnologien

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


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


Mayflower GmbH I 9

Mobile Internetzugriffe – Weltweit


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


Mobile Anwendungsentwicklung mit Webtechnologien

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Mobile Anwendungsentwicklung mit Webtechnologien

Mehr von Mayflower GmbH

Mobile Anwendungsentwicklung mit Webtechnologien