Weit mehr als die Hälfte der Erdbevölkerung hat täglichen Zugriff auf ein mobiles Gerät. Zwei Mrd. dieser Geräte besitzen einen Zugang zum Internet. Bereits heute greifen mehr Leute auf das Internet über ein mobiles Gerät zu, als mit einem Desktop-Computer. Handys sind heutzutage die meist verwendeten Geräte. Kein anderes Medium ist so persönlich und kontext-spezifisch wie das Handy. Da wundert es nicht, wenn bereits seit vielen Jahren gesagt wird, Mobile ist "The Next Big Thing".
In diesem Vortrag werden Ihnen die verschiedenen Möglichkeiten aufgezeigt, Content für Mobile Geräte zur Verfügung zu stellen. Dank Webtechnologien stehen dafür sämtliche Optionen zur Verfügung. Erläutert wird der Prozess einer App-Entwicklung unter anderem am Beispiel Piwik Mobile. Der Fokus wird auf iOS und Android liegen.
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
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
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
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
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
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
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
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