SlideShare ist ein Scribd-Unternehmen logo

Mobile HTML5 am Beispiel von Games

G
gbanga

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.

1 von 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

Recomendados

To Trust or not to Trust, telle est la question. Et si nous renversions quelq...
To Trust or not to Trust, telle est la question. Et si nous renversions quelq...To Trust or not to Trust, telle est la question. Et si nous renversions quelq...
To Trust or not to Trust, telle est la question. Et si nous renversions quelq...University of Geneva
 
Manon De P. La vertu
Manon De P. La vertuManon De P. La vertu
Manon De P. La vertuTerminales
 
Philippe S. Aristote
Philippe S. AristotePhilippe S. Aristote
Philippe S. AristoteTerminales
 
Lenguajes De Progaramacion
Lenguajes De ProgaramacionLenguajes De Progaramacion
Lenguajes De Progaramacionmayra alejandra
 
Florence M. Aristote
Florence M. AristoteFlorence M. Aristote
Florence M. AristoteTerminales
 
Cellules souches
Cellules souchesCellules souches
Cellules souchesBriMel0236
 

Más contenido relacionado

Destacado

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
 

Destacado (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
 

Ähnlich wie 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
 

Ähnlich wie 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