HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur


Published on

This term paper is based on the latest war between HTML5 and Flash. It is submitted as a part of MIS assignment @ VGSOM, IIT Kharagpur

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur

  1. 1. Web War: HTML5 vs. FLasHWeb War: HTML5 vs. FLasH Term Paper Vinod Gupta School of Management IIT Kharagpur Submitted in partial fulfillment for the Management Information Systems (BM61014) Course at Vinod Gupta School of Management, IIT Kharagpur Submitted to: Submitted by: Prof. Prithwis Mukerjee Kanishka Chakraborty 10BM60036 1
  2. 2. ContentContent 1. Abstract---------------------------------------------------------------------------------------------------- 3 2. Introduction----------------------------------------------------------------------------------------------- 3 3. What is HTML5------------------------------------------------------------------------------------------- 4 i. History--------------------------------------------------------------------------- 4 ii. New Features------------------------------------------------------------------ 6 4. Present Situation---------------------------------------------------------------------------------------- 9 5. Why HTML5 scores higher--------------------------------------------------------------------------- 9 6. Roadblocks to overcome----------------------------------------------------------------------------- 11 7. Future of Web--------------------------------------------------------------------------------------------- 13 8. References------------------------------------------------------------------------------------------------- 14 2
  3. 3. Abstract With the introduction of HTML5, a buzz has been created regarding the future of Web. The major casualties of this new addition to the lineup of HTML will be Adobe Flash and Microsoft Silverlight. HTML5 introduces quite a lot of elements and attributes addressing the needs of the modern websites. Both HTML5 and Flash are used to support and display media and create interactivity on the web. Opera, Mozilla and Google have given HTML5 their support as the standard for interactivity. But many big players on the web, such as Hulu, still use Flash. In the light of this, the competition is going to be a fierce one and this paper discusses some aspects of this on-going Web war. Introduction First let’s discuss what Hypertext markup language (HTML) is. Basically it’s the code at the back of every website on the Internet. It is made up of words (a series of it) and values, all of which have been assigned specific meanings and tasks. Each of the word and value are tied together with specific syntax. HTML is written in form of tags started and ended by angle brackets and are present within the webpage. What a browser does is, it reads these tags, interprets them and then display according to its interpretation. So what is HTML5? HTML5 is the latest version of HTML. It is a standard for structuring and presenting content on the World Wide Web. It comes with a lot of new features such as video playback and drag & drop which were not there in any of its predecessor. HTML5 consolidates many such tools, and thus eliminates the need for any other third party add-ins. 3
  4. 4. According to Bruce Lawson, Web evangelist for Opera Software and author of "Introducing HTML5", “HTML5 replaces the fragile ecosystem of JavaScript, HTML, plug-ins and undocumented de facto standards with a rigorously specified standard,"i . What is HTML5? HTML5, the latest in the HTML generation, has arrived with a lot of new features which have never been an integral part of HTML. Some of the most interesting features of HTML5 are as follows:- • You can build an application once and apply it to both desktop and mobile devices. HTML5 promises to bridge the gap between browsers and mobile operating system • HTML5 offers significant cost savings. The developers themselves are less expensive, development time is shorter and there are significant public resources out there for them to use • It will provide some local data storage on the device which allows one to take their work offlineii while also utilizing the benefits of web-based apps (such as instant updates and accessibility to different sources of data) This version, unlike its predecessors is not based on SGML. Wikipedia defines SGML (Standard Generalized Markup Language) as an ISO-standard technology for defining generalized markup languages for documents. It has been designed as such it is compatible with all the older versions of HTML. It resembles a SGML document type declaration, which enables standards-compliant rendering in all browsers that use "DOCTYPE sniffing". iii i) History So from where did the idea of HTML5 came? To understand lets go to pre-historic times of HTML. HTML was introduced in the year 1989. In the first five years of its inception, it went through a number of revisions and extensions. The first modification came in 1995 in the form of 4
  5. 5. HTML 2 which had the added features of form based file uploads and tables. Then in January 1997, came HTML 3.2. This was the first one to be developed and standardized by World Wide Consortium (W3C). In the same year, in December 1997 HTML 4.0 was introduced. It came with three different versions:- • Strict, in which any depreciated element, was forbidden • Transitional, in which depreciated elements were allowed • And finally, Frameset, which mainly allowed frame related element In December 1999, HTML 4.01 was published as a W3C Recommendation. The variations it introduced were the same as introduced by HTML 4.0. In the year 2000, XHTML 1.0 (extensible Hypertext Markup Language) was introduced which had serialization as its major offering. It was a more restrictive subset of SGML. It too came up with the same versions as HTML 4.0 i.e. Strict, Transitional and Framesets. XHTML was followed by XHTML 1.1., XHTML basic, XHTML-MP, XHTML 1.2 and XHTML 2.0. In the year 2003, X-Forms were introduced. X-Forms were positioned as the future of Web forms. The introduction of X-HTML generated interest of reviving HTML. In a workshop organized by W3C in 2004, some proposals for the new version of HTML were proposed jointly by Mozilla and Opera. But it was rejected by W3C and the task of replacing HTML continued. Apple, Mozilla and Opera formed what is known as WHATWG and started working on HTML evolution. The core principles guiding WHATWG were:- 5
  6. 6. • The technologies developed must be backward compatible i.e. the newer version must be compatible with the previous versions • The implementation must match the specifications • The specifications mentioned must be a detailed one, so that the implementation achieves complete interoperability • Everything specified in the documents of HTML 4, XHTML 1 and DOM 2 HTML must be included In the year a major breakthrough came into being and W3C indicated that it’s interested in the development of HTML5, the next version of HTML. In the year 2007, W3C formed a working group chartered to work with WHATWG, to develop the specifications of HTML5. It had been estimated that HTML5 will reach W3C Recommendation by late 2010. But it already has faced a few glitches:- • The first working draft missed its deadline by 8 months • Last Call & Candidate recommendations were expected to be reached in 2008, but as of now it still is in working draft position ii) New features HTML5 has many new elements and attributes. The following list compiles some of them:- 1. New structure elements:-  Section (Generic documentor application section)  article (represent independent piece of work)  aside (a piece of content that is slightly related to the rest of the page)  hgroup (header of a section) 6
  7. 7.  header (group of introductory or navigational aids)  footer (footer for a section and contain information about the author, copyright etc)  nav (section of the document intended for navigation)  figure (a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document) 2. New Doctype and Charset:- HTML 5 is very easy to implement. One just has to use the doctype as <! doctype html> and that’s all. This is only possible because HTML% is no longer a part of SGML. The charset (Character set) used by HTML5 is UTF-8. 3. New Inline Elements:- Some of the new additions to the inline elements-  <mark> - to indicate content that is marked in some fashion  <time> - to indicate content that is a time or date  <meter> - to indicate content that is a fraction of a known range - such as disk usage  <progress> - to indicate the progress of a task towards completion 4. Support for Dynamic Pages:- The basic purpose of developing HTML5 was to help the web developers. Thus many new features have been added to support dynamic pages.  Context menus - creation and use of context menus within Web pages and applications is supported by HTML5 7
  8. 8.  async attribute – this will reduce the loading time of the page as it allows asynchronous loading of a page  <details> - This tag is meant to provide information regarding any element  <datagrid> - this is an important addition which will help in dynamically loading  content from a database or other dynamic sources  <menu> - this tag helps in building a menu in the webpage  <command> - defines action should happen when a dynamic element is activated  href – This tag is not required now which will allow one to use the a tag with scripts and in Web applications without a need of anchors 5. New form types:- HTML 5 has added a few more input types which are as follows:-  datetime  datetime-local  date  month  week  time  number  range  email  url 8
  9. 9. 6. New elements and features:- These are probably the most striking features of HTML5 which makes it stand out from its predecessors. The following list compiles the most exciting elements of HTML5:-  Canvas – The <canvas> element is a resolution-dependent bitmap canvas. It is a rectangle in the webpage where one can use JavaScript to draw anything. It can be used for rendering graphs, game graphics, or other visual images on the fly.  Video – It is now possible to add a video to the webpage with just the help of a tag. Till now any webpage hosted on a webpage has been rendered with the help of third-party plug-ins such as Flash, QuickTime etc. HTML5 defines how to embed a video in a webpage with the help of the <video> tag.  Audio – HTML5 supports the addition of audio feature to a webpage with the help of the <audio> tag.iv  Drag & Drop – HTML5 offers the developers the option of using drag and drop feature which will certainly make the website building a lot more easy and fun.  Offline Storage – HTML5 is a way for web pages to locally store named key/value pairs that too within the client web browser. Just like cookies, the data persists even after one navigates away from the web site or close your browser tab or exit your browser. But unlike cookies, this data is never transmitted to any remote server. The most interesting thing about this storage facility is that it is natively present in the web browser and thus 9
  10. 10. doesn’t require any third party software. This new API has been standardized and implemented across all major browsers, platforms, and devices.  Geolocation - HTML5 also features a new geolocation APIs make location, which is directly available to any HTML5-compatible browser-based application. With this API the user can know her/his exact location. Right now this is only in its inception and now all browser support this. But it sure is going to be very helpful to user in the recent future. Present Situation With the introduction of HTML5, the major casualties will be the present add-ins which are used to display media content on websites. At present any such media based content is hosted with the help of third party add-ins such as Flash (Adobe), QuickTime etc. All the major video uploading websites makes use of Flash. So what is Flash? Flash basically is a multimedia platform. The application of this platform is to host animation, videos and interactivity features to the web pages. It comes under the RIA (Rich Internet Applications) technology of Adobe. It was originally developed by Macromedia and now it’s developed and distributed Adobe. Adobe claims Flash has a penetration of 99.3% of Internet Desktop users use Flash. Silverlight, too like Adobe Flash, is a rich client platform developed by Microsoft in 2007. It is a web application framework that integrates multimedia, graphics, animation and can interact with a single runtime environment. It is another of HTML5 casualties. HTML5 is witnessing a exponential rise in its support base. So much so that even Microsoft itself has put its weight behind HTML5. Microsoft’s cross platform strategy is aiming HTML5. v 10
  11. 11. Why HTML5 scores higher The major challenge in front of Flash is mobile penetration. The reason for this can easily be determined. Apple iPhone, which account for 60% of the global smart phones traffic, and iPod which accounts for 95% mobile internet traffic, do not allow any third-party runtimes. The biggest advantage that HTML5 has is that it is built into the browser, and doesn't require a 3rd party plug-in. This gives HTML5 a natural advantage over Flash. Apple has given its full support to HTML5. This is due to the very fact that HTML5 doesn’t any 3rd party plug-in. iPhones and iPod do not support flash and with HTML5 they too will be able to display videos on the web pages. The native video element present in HTML5 will make the installation of Flash just for the purpose of watching a video redundant. With HTML5 all media content is displayed within the native browser. HTML5 can also handle animations and features such as zoom animation and page flip. Flash was developed for desktop PC. So when Abode designed flash, they didn’t think of power consumption, overheating or touch screen compatibility. In the age of laptops, mobile phones and tablet computers these are major considerations. Flash demands considerable CPU usage and as a result overheating problems occur. On the other hand HTML5 has taken all these points into consideration. No such problems have been reported so far. HTML5 is an open source whereas Flash is proprietary in nature. This has been a concern for the propellants of open standards and free software. The security record of Flash has many dark spots. It has lead to several security experts recommending not to install Flash or to block it. Even the US-CERT recommends blocking Flash. Flash Cookies is something which too is a major concern. About 50% of the websites having flash content in it employ cookies too. But since the privacy policy of Flash doesn’t mention about these cookies the user is unaware of it. Thus although the user deletes the HTTP cookies, the Flash cookies persist and can be used to breach security. This problem is not present in HTML5. Although it has the feature of offline storage, the data is never transmitted to any remote machine. A survey of online media professionals about whether they support video apps for their mobile devices was conducted. While 65 percent plan to support video on the iPhone via apps or an HTML5 Web video, about 40 percent plan on supporting Android and Blackberry devices. 11
  12. 12. Roadblocks to overcome Now let’s discuss what are the major roadblocks that faced by HTML5 1) The major perception about HTML5 is that it’s going to take 12 more years to complete and hence one shouldn’t bother about it. But YouTube and Vimeo has gone out to show that it is already implementable. As more and more successful stories pour in, the user base will grow. 2) Flash has almost 99% penetration in all internet desktops. A lot needs to be done by HTML5 if it wants to reach similar heights. The following figure depicts the penetration level of Flash (published by Adobe in September 2010) All figures are in % Flash Player 9 and below Flash Player 10 Flash Player 10.1 Mature Markets 99 97.9 73.8 US/Canada 99.5 98.1 75.8 Europe 99 98.2 76.2 12
  13. 13. Japan 98.7 97 65.5 Australia/New Zealand 98.8 97.7 69.5 Emerging countries 98.9 96.1 n/avii Notes • Mature markets include US, Canada, UK, Germany, France, Japan, Australia, New Zealand. • Europe includes UK, Germany, and France. • The Emerging markets are surveyed every other wave. They include China, S. Korea, Russia, India and Taiwan. • Australia and New Zealand were added to the mature markets surveyed in September 2009. 3) Compatibility with browsers is another issue. While Safari on Mac system scores very high on HTML5 implementation, browsers on Windows has a long distance to cover. The following chart shows the current status of implementation of different HTML5 features in various browsers. 13
  14. 14. 4) As far as maturity of tools necessary for the delivery and monetization of video is concerned (advertising, reporting and content security) flash scores much higher than HTML5. This is acting as a deterrent to the usage of HTML5. 5) HTML5 is based on JavaScript which has fallen behind the ECMAScript standard. The ECMAScript standard itself has fallen behind Adobe’s ActionScript language. 6) Even in enabled browsers, the support for HTML5 has been found to be non-standard. The specification is still said to be a working draft. The Future With all the features HTML5 boasts of, it surely can be termed as the next big thing in the world WWW. Major heavyweights have given HTML5 their support. Jobs have made the following observations about Adobe Flash and HTML5 14
  15. 15. They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5. ix Adobe itself has showcased their new flash suite that allows users to convert the applications that they have created in flash and output the files into HTML5 script. Microsoft has announced that they are shifting their focus from SilverLight to HTML5 as their web based animation package. This goes on to prove what the prospects of HTML5 are. Even the rivals are accepting the importance of HTML5 and transforming their operations according to it. Digital publishing will seriously be disrupted by this emerging technology in the coming years. Steve Ballmer of Microsoft, in a Gartner Symposium said that, No question, world is going HTML5. Google CEO Eric Schmidt calls HTML5 the next step in browsers. It is natural that there will be a few road blocks to pass before it is fully adopted by all, but it can be said with enough certainty that HTML5 is going to stay. One of the major speculation made about the future of HTML5 was IE will not support it because, Microsoft, owner of IE has vested interest in SilverLight. But this has been proved wrong by Microsoft’s support of HTML5. In addition to this, Google has been a major propellant of HTML5 and going out of its way to support it. With the introduction of HTML5 and JavaScript frameworks, Flash has become redundant. Frameworks like jQuery allow one to create amazing effects and transitions with simple lines of code. This will further erode the already dwindling user base of Flash. The market leader of video uploads, YouTube too has already started implementing HTML5 in addition to Flash. This will further strengthen the support base of HTML5. So is it the next big thing? Absolutely. It’s going to be the future of Web and sooner users start adopting it, the better. Websites employing HTML5 sooner than later will find themselves in a far better position than their competitors. As far as Flash is concerned, Adobe is working towards the customization of the product to complement the features of HTML5. If all goes well, the web world is soon going to witness a major change. References 15
  16. 16. i ii iii iv v vi vii viii ix