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