We tell mixed-reality stories.                        IAETH Talk           Montag, 16. Januar 2012                      Ma...
ETH Informatik Abschluss 2006Major:          Distributed SystemsMinor:          Architektur/HönggMasterarbeit: Ubiquituous...
GBANGA, INTERAKTIVE GESCHICHTEN                                  3
«Ich habe viele Games                                                      gespielt, aber hätte nie                       ...
Ziel: Motivationssteigerung des ZielpublikumsAnwendung spieltypischer Elemente aufspielfremde Systeme• Erfahrungspunkte / ...
6
• Produkt durch ein Spiel bewerben• Spielerisch Laufkundschaft generieren• Mit dem Produkt interagieren• Einfluss am POS n...
8
9
Mobile Trends:                               Gamification:     Location-Based, Augmented                          Flashmob...
ca. 150m                                                        Aktuelles                             Puzzle-             ...
Gbanga deckt den gesamten Produktionsprozess von derKonzeption über die Ausführung, Test und Betrieb bis zurAnalyse ab:   ...
Shortlist                                         Swiss Venture                                           Leaders• Vision ...
DAS GBANGA-SYSTEM                    14
• iPhone, iPad, Bada, Internet-Seiten• GPS, Beschleunigungssensoren• Integration in Social Media: Facebook• Server-Hosting...
Accu              Google      ...OSM         Weather            places       Mapnik                            Tiles      ...
VORTEILE VON HTML5                     17
• Homogenisierte Entwicklung auf  Endgeräten  – iPhone, Android, Desktop, Facebook app, ...• Keine AppStore Approvals  – O...
Accu              Google      ...OSM         Weather            places       Mapnik                            Tiles      ...
• Bisheriges HTML: JavaScript, CSS,  DOM...• Extensions:  – Touch events         – WebSockets  – GPS, Accelerometer   – Of...
FreeBeerNear.me, OpenAppMkt.com, Orbium(jsway.se), kingdomgame.net, app.ft.comMore on: http://web.appstorm.net/roundups/30...
• Pilotifant für iPad   • Meinzuerich2011.ch  Interstitial                                               23
24http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-app
• Container: PhoneGap      • Inhalt: HTML5             – DOM-Objekte             – JavaScript             – WebSockets    ...
• Benutzerschnittstellen-Baukasten• Geräte-Unabhängigkeit• Javascript-Helfer-Methoden• Animationen                        ...
• jQTouch  ‒ jQuery plugin für Android und iPhone• jQuery Mobile  + gute Kombination mit bekanntem jquery  ‒ mehr Handarbe...
VORTEILE VON HTML5                     28
Accu              Google      ...OSM         Weather            places       Mapnik                            Tiles      ...
Accu              Google        ...OSM         Weather            places       Mapnik                              Tiles  ...
Accu              Google                     ...OSM         Weather            places       Mapnik                        ...
Erlang: 1 Mio TCP-Verbindungen proServer-Maschine (siehe WhatsApp Blog)JavaScript:• homogener Code für Client und Server• ...
NACHTILE VON HTML5                     33
Browser War: Fragmentierung pro Handy-Plattform x Firmware x Browser-AppGeschwindigkeit: bei Reaktionsfreudigkeit inBenutz...
We tell mixed-reality stories.                        IAETH Talk           Montag, 16. Januar 2012                      Ma...
Mobile HTML5 am Beispiel von Games
Upcoming SlideShare
Loading in …5
×

Mobile HTML5 am Beispiel von Games

1,392 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,392
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile HTML5 am Beispiel von Games

  1. 1. We tell mixed-reality stories. IAETH Talk Montag, 16. Januar 2012 Matthias Sala matthias@gbanga.com
  2. 2. ETH Informatik Abschluss 2006Major: Distributed SystemsMinor: Architektur/HönggMasterarbeit: Ubiquituous ComputingPraktika: Siemens Smart Home, München SMARAPD, Ribeirão Preto (IAESTE)«Location-based Werbung» am Xerox PARC, PaloAlto, USA@babalunda, matthias@gbanga.com, http://matthias.sala.ch 2
  3. 3. GBANGA, INTERAKTIVE GESCHICHTEN 3
  4. 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 4http://www.flickr.com/photos/jimclifford/1501362906
  5. 5. Ziel: Motivationssteigerung des ZielpublikumsAnwendung spieltypischer Elemente aufspielfremde Systeme• Erfahrungspunkte / Levels• Highscores / Rangliste• Missionen / Quest• Trophäen / Badges• Social Sharing 5
  6. 6. 6
  7. 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. 8
  9. 9. 9
  10. 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 10http://www.alnatura.de/de/muesli
  11. 11. ca. 150m Aktuelles Puzzle- Wetter Teile von QuestsUnternehmen Telefonzellen Wert- Gesponserte in der für neue gegenstände Geschenke Umgebung Missionen 11
  12. 12. Gbanga deckt den gesamten Produktionsprozess von derKonzeption über die Ausführung, Test und Betrieb bis zurAnalyse ab: 1-2 1 1-12 Dauer der Real Time Stunden Woche Wochen Kampagne 12
  13. 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. 14. DAS GBANGA-SYSTEM 14
  15. 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. 16. Accu Google ...OSM Weather places Mapnik Tiles Clients Server HTTP / JSON Websites Desktop BrowserLAMP PHP (HTML, JS, AJAX) Mobile Browser (HTML, JS, AJAX) Session Handler :8080 iPhone Servlets OSGiJava 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. 17. VORTEILE VON HTML5 17
  18. 18. • 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
  19. 19. Accu Google ...OSM Weather places Mapnik Tiles Clients Server HTTP / JSON Websites Desktop BrowserLAMP PHP (HTML, JS, AJAX) Mobile Browser (HTML, JS, AJAX) Session Handler :8080 iPhone Servlets OSGiJava 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
  20. 20. • Bisheriges HTML: JavaScript, CSS, DOM...• Extensions: – Touch events – WebSockets – GPS, Accelerometer – Offline – Canvas und SVG – ... 21
  21. 21. FreeBeerNear.me, OpenAppMkt.com, Orbium(jsway.se), kingdomgame.net, app.ft.comMore on: http://web.appstorm.net/roundups/30-incredibly-useful-fun-html5-mobile-apps/ 22
  22. 22. • Pilotifant für iPad • Meinzuerich2011.ch Interstitial 23
  23. 23. 24http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/anatomy-of-a-html5-mobile-app
  24. 24. • Container: PhoneGap • Inhalt: HTML5 – DOM-Objekte – JavaScript – WebSockets – CSS3 25http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
  25. 25. • Benutzerschnittstellen-Baukasten• Geräte-Unabhängigkeit• Javascript-Helfer-Methoden• Animationen 26
  26. 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
  27. 27. VORTEILE VON HTML5 28
  28. 28. Accu Google ...OSM Weather places Mapnik Tiles Clients Server HTTP / JSON Websites Desktop BrowserLAMP PHP (HTML, JS, AJAX) Mobile Browser (HTML, JS, AJAX) Session Handler :8080 iPhone Servlets OSGiJava 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
  29. 29. Accu Google ...OSM Weather places Mapnik Tiles Clients Server HTTP / JSON Websites Desktop BrowserLAMP PHP (HTML, JS, AJAX) Mobile Browser (HTML, JS, AJAX) Session Handler :8080 Session Handler iPhone Servlets OSGiJava (PhoneGap & HTML5) Erlang Android Valida- (PhoneGap & HTML5) OR tion ... BlackBerry Lua Lua Lua (PhoneGap & HTML5) Lua Script Script Script 30
  30. 30. Accu Google ...OSM Weather places Mapnik Tiles Clients Server HTTP / JSON Websites Desktop BrowserLAMP 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
  31. 31. Erlang: 1 Mio TCP-Verbindungen proServer-Maschine (siehe WhatsApp Blog)JavaScript:• homogener Code für Client und Server• Code-Injektionen 32
  32. 32. NACHTILE VON HTML5 33
  33. 33. Browser War: Fragmentierung pro Handy-Plattform x Firmware x Browser-AppGeschwindigkeit: bei Reaktionsfreudigkeit inBenutzerschnittstellen ein ProblemHardware-Beschleunigung fehlt (soll aberkommen):• mobile Animationen sind nur mit animierten GIF und Sprites/CSS-Position schnell• Canvas auf dem Handy ist ungefähr ~5 FPS 34
  34. 34. We tell mixed-reality stories. IAETH Talk Montag, 16. Januar 2012 Matthias Sala matthias@gbanga.com

×