HTML5: the mobile challenge


Published on

A quick intro into HTML5 before getting into the basic of HTML5 and challenges faced by PCs and mobiles.

Published in: Technology
  • Be the first to comment

HTML5: the mobile challenge

  1. 1. HTML5: the mobile challengeDharmesh Suraj Bali@dharmeshsbMay 2013
  2. 2. what is HTML?  It’s a markup language structured text formatting language e.g. <image>, <p>  It’s not a programming language! HTML: 1+1  1+1 Programming language: 1+1  2 It’s not a very powerful language!2 unrestricted
  3. 3. so what makes HTML powerful? client-side server-side scripts scripts CSS HTML plugins3 unrestricted
  4. 4. what was the problem with HTML 4.01?  Too many plugins required audio, video, games, flash, pdf  The web was getting more interactive lots of scripts for forms, animations, etc. (speed)  Code for web pages were chunky & not clean hacks for browsers, plugins, etc. Landscape changed after 12 years!4 unrestricted
  5. 5. enter HTML 5  Multimedia supported natively audio & video tags  More interactive 3D, graphics & effects class (+ CSS3)  Better structure nav, header, footer & article tags5 unrestricted
  6. 6. how does HTML 5 change the web  Native support for audio & video no plugins required  Canvas dynamic, scriptable rendering of graphics  APIs geolocation, device-aware features  Web storage offline storage of content (cached)  Less JavaScript improve browser performance (less hacks)  Web workers hyper-threading for webpages6 unrestricted
  7. 7. what will power HTML5? client-side server-side scripts scripts APIs HTML57 unrestricted
  8. 8. HTML 5 – browser features support 71.22% 71.22% audio video 83.57% 71.59% web canvas storage8 unrestricted
  9. 9. from web to mobile  Powerful native functions in HTML5 supports audio, video, animations, canvas  Internet of things simplified microdata from web – no parsing  Offline web apps ability to cache content  Geolocation localising content  CSS3 media queries + device-aware APIs adapt to browser screen size, orientation All smartphones are HTML-enabled9 unrestricted
  10. 10. mobile apps on mobile browsers Games Entertainment Social & photos 90% 95% 56% support 2D support DRM – support access to games with premium video camera complex graphics content & TV 100% 100% 100% support rich support games support adaptive photo galleries & with no streaming (no social functions / accelerated DRM) e.g internet no camera use graphics radio stations or UGC10 unrestricted Orange
  11. 11. test your mobile browser RNG.io11 unrestricted
  12. 12. the HTML5 challenge  Flash uses CPU more efficiently than HTML5 bouncing ball test 60 FPS – Flash 3% vs HTML5/Js 18%  Native client apps perform better than HTML5 flock of geese test – C++ 4 to 9.2 times faster than HTML5/Js  Browser fragmentation 12 different layout engines rendering code as they please12 unrestricted
  13. 13. the mobile challenge  HTML5 on mobile browsers is 889x slower than desktop at best iPhone was 6x slower and Android 10x slower  There are more APIs available for iOS than HTML5 20 HTML5/Safari APIs v/s 1500 iOS SDK APIs  app discovery/distribution route education Chrome apps / Facebook apps13 unrestricted
  14. 14. DEMO14 unrestricted
  15. 15. key facts & dates  W3C has goal to approve HTML5 standard by 2014  W3C expects full implementation by 2022  Mozilla CEO Gary Kovacs predicts that more than 2 billion mobile devices will support fully compliant HTML5 browsers by 2016  79 percent of mobile app developers plan to integrate HTML5 in the apps they will launch in 2012  In 2013, over 1 billion HTML5 mobile browsers in market  80 percent of all mobile apps will be wholly or in part based upon HTML5 by 201515 unrestricted Orange
  16. 16. thanksOrange, the Orange mark and any other Orange productor service names referred to in this material are trade marksof Orange Brand Services Limited.Orange restricted.