Das Dokument beschreibt die Entwicklung und Anwendung des gbanga-Systems, das interaktive, standortbasierte Spiele für die Steigerung der Nutzerinteraktion mit Produkten nutzt. Es betont die Integration von Gamification-Elementen und sozialen Medien, um das Nutzerengagement zu fördern. Außerdem werden die Vorteile von HTML5 für die plattformübergreifende Entwicklung und die Herausforderungen der Fragmentierung bei mobilen Anwendungen thematisiert.

1. We tell mixed-reality stories.
IAETH Talk
Montag, 16. Januar 2012
Matthias Sala
matthias@gbanga.com

2. ETH Informatik Abschluss 2006
Major: Distributed Systems
Minor: Architektur/Höngg
Masterarbeit: Ubiquituous Computing
Praktika: Siemens Smart Home, München
SMARAPD, Ribeirão Preto (IAESTE)
«Location-based Werbung» am Xerox PARC, Palo
Alto, USA
@babalunda, matthias@gbanga.com, http://matthias.sala.ch
2

3. GBANGA, INTERAKTIVE GESCHICHTEN
3

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

6. 6

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

8. 8

9. 9

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

14. DAS GBANGA-SYSTEM
14

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

17. VORTEILE VON HTML5
17

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

21. • Bisheriges HTML: JavaScript, CSS,
DOM...
• Extensions:
– Touch events – WebSockets
– GPS, Accelerometer – Offline
– Canvas und SVG – ...
21

22. FreeBeerNear.me, OpenAppMkt.com, Orbium
(jsway.se), kingdomgame.net, app.ft.com
More on: http://web.appstorm.net/roundups/30-incredibly-useful-fun-html5-mobile-apps/ 22

23. • Pilotifant für iPad • Meinzuerich2011.ch
Interstitial
23

24. 24
http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-app

25. • Container: PhoneGap
• Inhalt: HTML5
– DOM-Objekte
– JavaScript
– WebSockets
– CSS3
25
http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins

26. • Benutzerschnittstellen-Baukasten
• Geräte-Unabhängigkeit
• Javascript-Helfer-Methoden
• Animationen
26

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

28. VORTEILE VON HTML5
28

29. 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
29

30. 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
Session Handler
iPhone
Servlets
OSGi
Java
(PhoneGap & HTML5)
Erlang
Android
Valida- (PhoneGap & HTML5)
OR tion
...
BlackBerry
Lua Lua Lua (PhoneGap & HTML5)
Lua Script Script Script
30

31. Accu Google ...
OSM Weather places
Mapnik Tiles Clients
Server HTTP / JSON
Websites
Desktop Browser
LAMP
PHP
(HTML, JS, AJAX)
Mobile Browser
(HTML, JS, AJAX)
:8080
Session Handler
iPhone
Servlets
OSGi
(PhoneGap & HTML5)
Erlang
Erlang JS JS Android
Javascript VM
Script
Valida- Script (PhoneGap & HTML5)
OR tion
...
JS JS
BlackBerry
Lua Lua Lua (PhoneGap & HTML5)
Lua Script Script Script
Script Script
31

32. Erlang: 1 Mio TCP-Verbindungen pro
Server-Maschine (siehe WhatsApp Blog)
JavaScript:
• homogener Code für Client und Server
• Code-Injektionen
32

33. NACHTILE VON HTML5
33

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