HTML5 & LTE: Mobile web apps and games require fast and responsive networks

1,661 views

Published on

HTML5 has become a major trend in the web sphere in general and in the mobile area in particular. There is not only a demand for standardized and uniformed website development to reduce complexity and cost, but also the need to reach as many mobile users without having to implement native apps for highly proprietary platforms.

While native apps have the advantage to work fully offline on a device, HTML5 web apps require a more reliable and fast data network like 4G. This is especially true for entertainment purposes like in multiplayer games.

In his talk, Matthias presents how modern apps can work completely in the browser and what impact that has on the underlying data network.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

HTML5 & LTE: Mobile web apps and games require fast and responsive networks

  1. 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. 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. 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. 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. 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. 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. 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. 8. Browser history
  9. 9. Microdata
  10. 10. File API
  11. 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. 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. 13. http://www.maclife.de/ipad/software/financial-times-als-html5-web-app-mit-mehr-erfolg-als-im-app-store
  14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 />

×