SlideShare une entreprise Scribd logo
1  sur  35
We tell mixed-reality stories.




                        IAETH Talk

           Montag, 16. Januar 2012
                      Matthias Sala
             matthias@gbanga.com
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
GBANGA, INTERAKTIVE GESCHICHTEN




                                  3
«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
Ziel: Motivationssteigerung des Zielpublikums
Anwendung spieltypischer Elemente auf
spielfremde Systeme
• Erfahrungspunkte / Levels
• Highscores / Rangliste
• Missionen / Quest
• Trophäen / Badges
• Social Sharing
                                                5
6
• 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
9
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
ca. 150m


                                                        Aktuelles
                             Puzzle-
                                                         Wetter
                            Teile von
                             Quests



Unternehmen                         Telefonzellen
                 Wert-                              Gesponserte
   in der                             für neue
              gegenstände                           Geschenke
 Umgebung                            Missionen
                                                               11
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
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
DAS GBANGA-SYSTEM




                    14
• 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
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
VORTEILE VON HTML5




                     17
Mobile HTML5 am Beispiel von Games
• 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
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
• Bisheriges HTML: JavaScript, CSS,
  DOM...
• Extensions:
  – Touch events         – WebSockets

  – GPS, Accelerometer   – Offline

  – Canvas und SVG       – ...


                                        21
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
• Pilotifant für iPad   • Meinzuerich2011.ch
  Interstitial




                                               23
24
http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-app
• Container: PhoneGap

      • Inhalt: HTML5
             – DOM-Objekte

             – JavaScript

             – WebSockets

             – CSS3


                                                              25
http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
• Benutzerschnittstellen-Baukasten

• Geräte-Unabhängigkeit
• Javascript-Helfer-Methoden

• Animationen




                                     26
• 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
VORTEILE VON HTML5




                     28
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
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
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
Erlang: 1 Mio TCP-Verbindungen pro
Server-Maschine (siehe WhatsApp Blog)
JavaScript:

• homogener Code für Client und Server
• Code-Injektionen


                                         32
NACHTILE VON HTML5




                     33
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
We tell mixed-reality stories.




                        IAETH Talk

           Montag, 16. Januar 2012
                      Matthias Sala
             matthias@gbanga.com

Contenu connexe

En vedette

Opportunité Palmary: gangez de l'argent en voyageant
Opportunité Palmary: gangez de l'argent en voyageantOpportunité Palmary: gangez de l'argent en voyageant
Opportunité Palmary: gangez de l'argent en voyageantPalmary travel
 
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007wolfplum
 
Autrans2010 Community Manager
Autrans2010 Community ManagerAutrans2010 Community Manager
Autrans2010 Community Managersentsy
 
Présentation réseaux sociaux SCY mai 2012 ap-guignard
Présentation réseaux sociaux SCY mai 2012   ap-guignardPrésentation réseaux sociaux SCY mai 2012   ap-guignard
Présentation réseaux sociaux SCY mai 2012 ap-guignardAnne-Pierre Guignard
 
Carnet de bord
Carnet de bordCarnet de bord
Carnet de bordazzar9
 
Jeu de piste fiche réponses
Jeu de piste fiche réponsesJeu de piste fiche réponses
Jeu de piste fiche réponsesidejol
 
Présentation - Candidature des climats du vignoble de Bourgogne pour l'inscr...
Présentation - Candidature des climats du vignoble de  Bourgogne pour l'inscr...Présentation - Candidature des climats du vignoble de  Bourgogne pour l'inscr...
Présentation - Candidature des climats du vignoble de Bourgogne pour l'inscr...VINCENTLAINE
 
Notre ville: Torrelavega
Notre ville: TorrelavegaNotre ville: Torrelavega
Notre ville: Torrelavegapiedadpcobo
 
Las TIC en el plano asistencial
Las TIC en el plano asistencialLas TIC en el plano asistencial
Las TIC en el plano asistencialOlga Navarro
 

En vedette (19)

Opportunité Palmary: gangez de l'argent en voyageant
Opportunité Palmary: gangez de l'argent en voyageantOpportunité Palmary: gangez de l'argent en voyageant
Opportunité Palmary: gangez de l'argent en voyageant
 
Sumativa 1
Sumativa 1Sumativa 1
Sumativa 1
 
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007
Praesentation Online Befragung 2007 Steuerungsgremium Maerz 2007
 
Le volcan
Le volcanLe volcan
Le volcan
 
2 unidad 1 prueba historia sexto a
2 unidad 1 prueba historia sexto a2 unidad 1 prueba historia sexto a
2 unidad 1 prueba historia sexto a
 
Smart total
Smart totalSmart total
Smart total
 
Project X-EMN
Project X-EMNProject X-EMN
Project X-EMN
 
Les sentiment
Les sentimentLes sentiment
Les sentiment
 
Autrans2010 Community Manager
Autrans2010 Community ManagerAutrans2010 Community Manager
Autrans2010 Community Manager
 
Présentation réseaux sociaux SCY mai 2012 ap-guignard
Présentation réseaux sociaux SCY mai 2012   ap-guignardPrésentation réseaux sociaux SCY mai 2012   ap-guignard
Présentation réseaux sociaux SCY mai 2012 ap-guignard
 
Julio Verne
Julio VerneJulio Verne
Julio Verne
 
Hackablev1 1
Hackablev1 1Hackablev1 1
Hackablev1 1
 
Bourges
BourgesBourges
Bourges
 
Carnet de bord
Carnet de bordCarnet de bord
Carnet de bord
 
Jeu de piste fiche réponses
Jeu de piste fiche réponsesJeu de piste fiche réponses
Jeu de piste fiche réponses
 
Présentation - Candidature des climats du vignoble de Bourgogne pour l'inscr...
Présentation - Candidature des climats du vignoble de  Bourgogne pour l'inscr...Présentation - Candidature des climats du vignoble de  Bourgogne pour l'inscr...
Présentation - Candidature des climats du vignoble de Bourgogne pour l'inscr...
 
Ipad présentation CS-ST
Ipad présentation CS-STIpad présentation CS-ST
Ipad présentation CS-ST
 
Notre ville: Torrelavega
Notre ville: TorrelavegaNotre ville: Torrelavega
Notre ville: Torrelavega
 
Las TIC en el plano asistencial
Las TIC en el plano asistencialLas TIC en el plano asistencial
Las TIC en el plano asistencial
 

Similaire à Mobile HTML5 am Beispiel von Games

Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussenMobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussengbanga
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsRalf Lütke
 
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.Niels de Bruijn
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndré Krämer
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009greenrobot
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
iOS: Einstieg und Ausblick
iOS: Einstieg und AusblickiOS: Einstieg und Ausblick
iOS: Einstieg und AusblickStefan Scheidt
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Jürg Stuker
 
AR Webinar
AR WebinarAR Webinar
AR Webinarargency
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streichRomano Roth
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidBjörn Wibben
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018André Krämer
 

Similaire à Mobile HTML5 am Beispiel von Games (20)

Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussenMobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.
MT AG Möglichkeiten mit PhoneGap in verbindung mit APEX 4.2.
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
openHAB @ rheinJUG Düsseldorf
openHAB @ rheinJUG DüsseldorfopenHAB @ rheinJUG Düsseldorf
openHAB @ rheinJUG Düsseldorf
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
openHAB @ JUG Stuttgart
openHAB @ JUG StuttgartopenHAB @ JUG Stuttgart
openHAB @ JUG Stuttgart
 
iOS: Einstieg und Ausblick
iOS: Einstieg und AusblickiOS: Einstieg und Ausblick
iOS: Einstieg und Ausblick
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
2011 09-09 activiti
2011 09-09 activiti2011 09-09 activiti
2011 09-09 activiti
 
AR Webinar
AR WebinarAR Webinar
AR Webinar
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 

Mobile HTML5 am Beispiel von Games

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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