Mobile HTML5 am Beispiel von Games

1.404 Aufrufe

Veröffentlicht am

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 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.404
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×