In diesem Vortrag stellt Matthias HTML5 im mobilen Kontext, die verschiedenen Technologien für Entwicklung, Testing und Deployment vor und diskutiert die noch bestehenden Schwierigkeiten in diesem entstehenden Bereich.
4. «Ich habe viele Games
gespielt, aber hätte nie
gedacht, dass ich wegen
einem Spiel bei starkem
Regen draussen
herumlaufe»
- 29-jähriger Gbanga-Spieler
4
http://www.flickr.com/photos/jimclifford/1501362906
5. Ziel: Motivationssteigerung des Zielpublikums
Anwendung spieltypischer Elemente auf
spielfremde Systeme
• Erfahrungspunkte / Levels
• Highscores / Rangliste
• Missionen / Quest
• Trophäen / Badges
• Social Sharing
5
7. • Produkt durch ein Spiel bewerben
• Spielerisch Laufkundschaft generieren
• Mit dem Produkt interagieren
• Einfluss am POS nehmen
• Integration in Social Media
(den Erfolg mit anderen teilen)
• Markenführung
7
10. Mobile Trends: Gamification:
Location-Based, Augmented Flashmobs,
Reality, In-App Purchases Urban gaming
Story Telling:
Video Spiele
Real World Faktoren: überholen
Ort, Wetter, Zeit Hollywood
Integration verschiedenster
Technologien:
Google Maps, Facebook,
Twitter, Notifications
10
http://www.alnatura.de/de/muesli
11. ca. 150m
Aktuelles
Puzzle-
Wetter
Teile von
Quests
Unternehmen Telefonzellen
Wert- Gesponserte
in der für neue
gegenstände Geschenke
Umgebung Missionen
11
12. Gbanga deckt den gesamten Produktionsprozess von der
Konzeption über die Ausführung, Test und Betrieb bis zur
Analyse ab:
1-2 1 1-12 Dauer der
Real Time
Stunden Woche Wochen Kampagne
12
13. Shortlist
Swiss Venture
Leaders
• Vision seit 2007; operativ seit 2009
• Zahlreiche nationale und internationale Nominierungen
und Auszeichnungen
• Vollständig «bootstrapped»
• Interdisziplinäres, internationales Team mit Erfahrung:
ETH Zürich, Sony Entertainment, Xerox
PARC, Zurich, McDonald‘s 13
15. • iPhone, iPad, Bada, Internet-Seiten
• GPS, Beschleunigungssensoren
• Integration in Social Media: Facebook
• Server-Hosting in der Cloud
• Community Management & Support
• Tools: Quest Developer
Kit, Newsletter, KPI, geografische Statistik
15
16. Accu Google ...
OSM Weather places
Mapnik Tiles Clients
Server HTTP / JSON
Websites
Desktop Browser
LAMP
PHP
(HTML, JS, AJAX)
Mobile Browser
(HTML, JS, AJAX)
Session Handler
:8080
iPhone
Servlets
OSGi
Java
Session Handler :1090
(C/Objective C)
J2ME
Valida- (Java)
OR tion
...
Bada
Lua Lua Lua TCP/IP / (C/«C++»)
Lua Script Script Script
ObjectStream
16
19. • Homogenisierte Entwicklung auf
Endgeräten
– iPhone, Android, Desktop, Facebook app, ...
• Keine AppStore Approvals
– Option für native App bleibt offen
• Homogenität zwischen Client und Server
– Überall die selbe Programmiersprache
19
20. Accu Google ...
OSM Weather places
Mapnik Tiles Clients
Server HTTP / JSON
Websites
Desktop Browser
LAMP
PHP
(HTML, JS, AJAX)
Mobile Browser
(HTML, JS, AJAX)
Session Handler
:8080
iPhone
Servlets
OSGi
Java
Session Handler :1090
(C/Objective C)
(PhoneGap & HTML5)
Android
J2ME
Valida- (PhoneGap & HTML5)
(Java)
OR tion
...
BlackBerry
Bada
Lua Lua Lua TCP/IP / (PhoneGap & HTML5)
(C/«C++»)
Lua Script Script Script
ObjectStream
20
27. • jQTouch
‒ jQuery plugin für Android und iPhone
• jQuery Mobile
+ gute Kombination mit bekanntem jquery
‒ mehr Handarbeit
• Sencha touch
+ konsistent auf vielen Plattformen
‒ eigenartige Zwischensprache
‒ wenig Kontrolle auf untere Layers
‒ geht nicht auf Desktop Firefox und IE
• M-Project, Jo, xui.js, EmbedJS, ...
27
34. Browser War: Fragmentierung pro Handy-
Plattform x Firmware x Browser-App
Geschwindigkeit: bei Reaktionsfreudigkeit in
Benutzerschnittstellen ein Problem
Hardware-Beschleunigung fehlt (soll aber
kommen):
• mobile Animationen sind nur mit animierten
GIF und Sprites/CSS-Position schnell
• Canvas auf dem Handy ist ungefähr ~5 FPS 34
35. We tell mixed-reality stories.
IAETH Talk
Montag, 16. Januar 2012
Matthias Sala
matthias@gbanga.com