1.
We tell mixed-reality stories.<br />HTML5 & LTEMobile web apps and games require fast and responsive networks<br />Matthias Sala | GbangaMobileMonday.ch | September 26th 2011 The Safe Gallery | Fribourg<br />

2.
About<br />MatthiasSala<br />Computer Scientist ETH Zurich<br />Founder of Gbanga<br />Gbanga<br />Mobile gamesthatinclude user-contextsuch as location<br />http://gbanga.com<br />2<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />

3.
LTE: Faster, better, stronger<br />Faster transmission of data to mobile end points (100 – 384 Mbit/sec)<br />Better response rate: 10 ms latency<br />3<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://de.wikipedia.org/wiki/Long_Term_Evolution<br />

4.
Gaming as a showcase for LTE<br />«In terms of latency, gaming is amongst the most challenging applications. Therefore, we demonstrated how two LTE users can also play an online-game, which demands an extremely low system delay along with a quick user reaction time»September 29th 2006<br />4<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://www.nomor.de/home/company/lte-demo-pictures<br />

5.
Latency & round-trip time<br />5<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />∆t1 = 5ms<br />Client<br /> Server<br />∆t2 = 5ms<br />Latency 3G: 70 – 120 ms<br />Round-trip time 3G: 200 – 300 ms<br />AT&T 3G, 1 Bar, Seattle: 264 ms<br />AT&T 3G, «poortower system withbarelyenough 3G signal»: 2156 ms<br />http://whirlpool.net.au/wiki/3g_for_network_engineers, http://forums.att.com/t5/Apple-iPhone/High-Latency-on-3G-Network-with-iPhone/td-p/1960517, http://en.wikipedia.org/wiki/Lag, http://www.openclipart.org/detail/7087/hand---palm-facing-out-by-johnny_automatic-7087, http://www.supercoloring.com/pages/an-eye/, <br />

6.
App to Web App trend<br />Runs in the browser (HTML5)<br />No store<br />No reviewprocess cycles<br />Free to choosepayment system («revenue split»)<br />No installation<br />«Lightweight» design<br />Standardized, homgeneous cross-platformdevelopment<br />6<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br /><ul><li>http://gigaom.com/collaboration/why-html5-web-apps-are-going-to-rock-your-world/

7.
http://techcrunch.com/2011/02/09/html5-versus-native-apps/</li></li></ul><li>Whatis HTML5?<br />Web appsrun in a browser that supports «HTML», CSS, JavaScript, DOM <br />and a set of Extensions:<br />7<br />Geolocation<br />Offline storage<br />2D Canvas (3D?)<br />Media playback (movies)<br />Cross-document messaging<br /><ul><li>Drag-n-drop

8.
Browser history

9.
Microdata

10.
File API

11.
IndexedDatabase API</li></ul>http://en.wikipedia.org/wiki/HTML5<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />

12.
Financial Times Web App<br />FT reports that 700’000 users use their Web App which is more successful than their iPad version which they abandoned because of the revenue split.<br />8<br /><ul><li>http://apps.ft.com/ftwebapp/

13.
http://www.maclife.de/ipad/software/financial-times-als-html5-web-app-mit-mehr-erfolg-als-im-app-store

14.
http://gigaom.com/apple/financial-times-to-find-out-if-html5-can-replace-native-app/</li></ul>This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />

15.
Caching content for offline use<br />9<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />Mobile browser with HTML5 app<br />Internet<br />Offline storage (HTML5 extension)<br />when online<br />http://app.ft.com<br />FT Web App<br />

16.
Bejeweled (Puzzle)<br />10<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://www.popcap.com/iphone/games/bejeweled/<br />

17.
Mafia Wars by Zynga (Hybrid)<br />11<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://itunes.apple.com/ch/app/mafia-wars-by-zynga/id305904856?mt=8<br />

18.
Hybridapp (HTML container)<br />12<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />Native app container<br />App Store<br />Download to install<br />HTML5 game<br />Apple’s iTunes<br />Mafia Wars app<br />

19.
Facebook touch (Real-time)<br />13<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://touch.facebook.com<br />

20.
Illyriad (MMORPG)<br />14<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://www.illyriad.co.uk/<br />

21.
Data push for websites<br />15<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />Mobile browser with HTML5 app<br />Internet<br />Subscribe<br />WebSocket (HTML5 extension)<br />Updates<br />Illyriad web app<br />http://illyriad.co.uk<br />

22.
MightyFingersframework<br />16<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://mightyfingers.com/, http://vimeo.com/23830766<br />

23.
Data push for websites<br />17<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />Game server on Internet<br />iPad<br />Android<br />

24.
iPhone as motion-controller<br />Use your iPhone as a controller for a desktop page:<br />http://ikea.ch/PAXpacker<br />A Gbanga project<br />18<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />http://blog.gbanga.com/2011/09/a-browser-flash-game-with-a-motion-controller-iphone-app/<br />

25.
Ohterexamples of web apps<br />http://web.appstorm.net/roundups/30-incredibly-useful-fun-html5-mobile-apps/<br />http://www.mobilehtml5.com/<br />http://www.quora.com/What-are-the-best-mobile-applications-that-have-been-built-using-HTML5-and-compiled-as-a-native-applications<br />HTML5 Frameworks:<br />http://www.web-delicious.com/7-best-mobile-web-html5-framework-for-mobile-app-development/<br />19<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />

26.
This presentation with all contained links is available on SlideShare.<br />http://www.slideshare.net/gbanga<br />20<br />This work is licensed under a Create Commons Attribution 2.5 Generic License. Matthias Sala, Gbanga, Switzerland.<br />We tell mixed-reality stories.<br />Matthias @ gbanga.com<br />043 536 67 01<br />