HTML5 An Introduction

Transcription

1 HTML5 An Introduction Yogomaya Yogo Maharana Contributions: Jatin Desai Dervin D Cunha Jim Elayan This article provides a general introduction to the capabilities and reach of HTML5. The following topics are examined: Adoption of HTML5 video and audio features across multiple browsers Comparative HTML5 feature sets available across web, mobile and set-top box platforms Considerations for HTML5 vs. Native development Importance of HTML5 for Cable/Video Service Providers Challenges of using HTML5 in set-top and similar devices

2 Contents Introduction...1 About HTML5...2 HTML5 Features Overview...3 Multimedia features...3 Browser support...4 Can HTML5 Replace Native Apps?...6 Importance of HTML5 to the Cable Industry...9 Conclusion Introduction Everybody is using it, but what is it? More accurately, what can you do with it? In fact, the capabilities of the HTML5 platform depend greatly on where and how you use it. This article provides a general introduction to the capabilities and reach of HTML5. Future articles will provide more in depth analysis of specific features and more detailed comparison with development using native platforms. The following topics are examined: 1. Adoption of HTML5 video and audio features across multiple browsers 2. Comparative HTML5 feature sets available across web, mobile and set-top box platforms 3. Considerations for HTML5 vs. Native development 4. Importance of HTML5 for Cable/Video Service Providers 5. Challenges of using HTML5 in set-top and similar devices itaas, Inc. Page 1

3 About HTML5 HTML5 is the cornerstone of the W3C's open web platform - A framework designed to support innovation and foster the full potential the web has to offer. (source: HTML5 is the latest version of HTML (Hypertext Markup Language). It s a cooperative effort between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The WHATWG began work on the standard in 2004 and the target date for recommendation is The HTML5 standard is still a work in progress, but most browsers now support multiple HTML5 elements and APIs. With native tags for document structures such as headers, footers, figures, sections, video and audio, HTML5 allows a browser to display multi-media documents without plug-ins or custom APIs. The intent is a single version of content being rendered effectively, providing a common user experience across all compliant browsers and platforms, including phones and tablets. If cloud computing technology is used for core functionalities and services, the device is using a thin client to deliver content, which improves performance and reliability of many applications. HTML5 Features Overview <Video> - A standard way to embed Video/Movie on a web page without the use of a browser plugin. It uses Javascript to control playback of video. <Audio> - A standard way to embed an audio file on a web page without the use of a browser plugin <canvas> - Provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. <article> - Specifies independent selfcontained content. An Article should make sense on its own and should distributable independently from the rest of the site. <svg> - Used to define vector based graphics for the web. The graphics is defined in xml format and do not lose any quality when zoomed or resized. Every attribute and every element in SVG can be animated. <header> - Specifies a header for a document or section. This element should be used as a container for introductory content or set of navigational links. <footer> - Defines a footer for a document or section. A <footer> element should contain information about its containing element. <output> - Represents the result of a calculation (like one performed by a script). <source> - Used to specify multiple media resources for media elements, such as <video> and <audio>. The <source> tag allows you to specify alternative video/audio files, which the browser may choose from, based on its media type or codec support. itaas, Inc. Page 2

4 HTML5 Features Overview The HTML5 standard incorporates a large variety of features that enhance the web experience. We cannot cover the entire HTML5 feature set in this paper, but here are some elements relevant to our discussion. Audio/Video Tags Canvas (Vector drawing) Deprecated tags such as font, center, big, strike, frame, frameset, noframes Drag & Drop, Speech input, New Form Types ( , slider) Web Storage (improved cookies, larger storage, local SQL database) Geo-location Offline Web Applications/ Application cache Error Handling HTML5 Features Overview (Continued) <time> - Defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset. Drag & Drop - Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be dragged. Web Storage (improved cookies, larger storage, local SQL database) - Web pages can store data locally within the user's browser, rather than with cookies. However, Web Storage is more secure and faster. Geo-location - The HTML5 Geo-location API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it. Geo-location is much more accurate for devices with GPS, like the iphone. Multimedia features Supported Formats: HTML5 video and audio support standardizes methods for displaying video (and playing audio) without Plugins. This class of features enables developers to provide a multimedia rich experience with relative ease. The figures below (data source: Html5Test.com) show the various Audio/Video formats and their current level of support across some of the major web browsers. We expect the level of support and compliance by these products to change rapidly. Supported features include: H.264, OGG Theora, WebM Although specific formats are specified, encoding is not specified. Specifying multiple sources to ensure that video can be played on all browsers. Video/Audio controls such as Auto play, Loop, Display Controls (pause, mute, etc.) Extracting images from video and for use in canvas itaas, Inc. Page 3

5 The Chrome browser stands out as the most HTML5 multi-media compatible browser on both Mac and Windows OS while Internet Explorer lags behind on the Windows platform and Firefox and Opera are slightly behind on Mac OS X. Another interesting point to note is that Safari and Internet Explorer don t support open source formats and stick to proprietary formats like H.264. On the flip side, Firefox and Opera support open source formats. When creating a multi-media experience, choose the audio/video codec that best fits your target platforms. Mac OS X Windows Video Codecs Ogg Theora H.264 WebM MPEG-4 Mac OS X Windows Audio Codecs ogg/vorbis mp3 Wav AAC Browser support Are you currently experiencing HTML5 while browsing the web? According to a recent study by binvisions ( only 34%of the top 100 websites use HTML5, while the rest still use XHTML1.0 and HTML4. However, if you regularly use social networking sites, there is a 50% chance that you are experiencing HTML5. Each browser has its own rules and characteristics that differ between versions and brands. And each one is adopting HTML5 at its own rate. Web Browser Support Determining the level of support for HTML5 on a particular browser is not extremely difficult. For example, Html5Test.com ( offers some very easy to use tools to test the HTML5 compatibility of a browser. The site offers an HTML5 testing page and rating system that measures how many HTML5 features are implemented. The HTML5 test score is one indication of the level of browser itaas, Inc. Page 4

6 % change of browser usage (April Apr 2012) support for the emerging HTML5 standard and related specifications. Even though the specification isn't finalized, all major browser manufacturers are taking steps to make sure their browser is ready for the future. The graph below (source: html5test.com) shows the comparison test results for HTML5 compatibility of different browsers. First, the highest trending browsers are more HTML5 compliant. This indicates that functionality and availability of HTML5 features will likely increase along with the use of these browsers. But there is also the possibility that the functionality of HTML5 is facilitating the increased usage of these platforms. New HTML5 experiences that are being developed often provide the latest wow factor and are being used widely in the development community. So if consumers want to use new functionality, they move to the more compliant browsers. 10% Usage Trends of HTML5 Compatible Broswer 5% Safari CHROME 0% Firefox -5% IE Figure 1: Desktop Browsers Again Google Chrome shows the highest overall HTML5 compatibility score of 410 out of 500. But how does implementation of HTML5 functionality track with the trends of browser usage? Reviewing the usage trends of HTML5 Compatible browsers give us a couple of interesting scenarios. We tracked browser usage trends from -10% -15% Opera -20% HTML5 Test Scores HTML5 capabilities of mobile browsers HTML5 is only realized on mobile devices with modern updatable web browsers. iphone, Android, and Windows smart phones all implement portions of the HTML5 specification. HTML5 applications on mobile devices can utilize embedded audio and video sources, user s geographic location and display interactive animations on a 2D canvas. The HTML5 local caching features allow the application to store data for offline web browsing and mobile data coverage outages. Using the above-mentioned features, application developers can develop and deploy a single application that delivers a consistent user experience across multiple mobile platforms. However, the differences in HTML5 browser compatibility require developers to test and tweak the application on a multitude of browsers prior to deployment. itaas, Inc. Page 5

7 Because of this requirement, the cost of developing a single HTML5 application might far exceed that of developing multiple native (ios/android) applications. It is important that a developer carefully consider the balance of developing multiple native applications vs the perceived benefit of a ubiquitous application. Figure 2: Mobile Browsers HTML5 capabilities of tablet browsers Tablet browsers provide similar features as Mobile Web Browsers. However, the larger screen size on tablets provides more real estate for a web-like HTML5 experience. This makes tablets an ideal candidate for aggressive HTML5 development. The chart to the right shows data for released browsers. One tablet browser, Silk, is fundamentally different from other browsers, because it has been configured to use Amazon s cloud service from the ground up. Kindle however scores very low (180) on HTML5 tests. Figure 3: Tablet browsers HTML5 capabilities of Connected TV browsers Sharp Aquos Toshiba LG NetCast 2012 Sharp Aquos Boxee HTMLTest5 Scores (Source:html5test.com) The demand for a TV browser experience equivalent to mobile, tablet and web browsers has significantly increased. This would require equivalent performance (speed), support for latest web standards/graphics, and ease of use. The challenge is the lower processing power and memory of many connected TV platforms. Other factors that need to be taken into account are lower resolutions, pixel aspect ratio, interlace, etc. The TV browser needs be optimized to work with minimal resources and requires tight integration with the underlying hardware graphics/video hardware. The graph shows some of the existing TV browsers in the market today and their HTML5 compatibility scores. itaas, Inc. Page 6

8 HTML5 capabilities of Set-top box browsers Set-top boxes have are still a primary mode of video consumption. However, the way we consume content has been drastically changing. Users want similar ways of finding content on set-top boxes, mobile devices and computers. To add such functionality settop boxes manufacturers have started implementing browsers. There are several types of set-top boxes being implemented today including gateways, hybrid and IP-based boxes. Many of these boxes include a browser that is capable of rendering HTML. The compatibility of browsers with HTML5 varies across set-top boxes and brands. In our experience these browsers range in compatibility from the low 200 to high 300 range. Can HTML5 Replace Native Apps? The question of whether HTML5 could replace native apps is highly debated. In theory, HTML5 should allow an application to be written once and deployed across a wide range of browsers and devices. The reality is a bit more complex than that, though generally moving in that direction. In our view, HTML5 might replace some native apps but probably not all. In fact, one recent article reported that Facebook switched away from HTML5 to improve the performance of their mobile application. ( There are several factors that determine the best approach, including: Need for native device hardware capabilities - specific touch/swipe functions, accelerometer, camera, etc. HTML5 applications do not have access to all the hardware capabilities of the device. Even where there is access, HTML5 may not be able to access the full potential of the device s features. End User Experience User experience is a big factor is choosing between native and HTML5. Applications that do not require a very rich, interactive experience might benefit from using HTML5. However, applications that use very rich user experiences and need to deliver content instantly will work better on native applications. Graphics or processor intensive operations Applications that require processor intensive operations such as a 3D experience or a graphically rich interface such as a game would work better on a native platform. Data Storage requirements Although local storage has been considerably improved in HTML5 (5MB per domain for most browsers - from 4kB for cookies). Any application that requires more data storage would lean towards native applications. Connectivity requirements Applications that do not require constant connectivity to the network are better suited for native development. HTML5 provides an application cache, but is best suited for small or limited information. Monetization The native application platform is currently supported with infrastructure such as an app store and an Ad engine for monetization. Development costs The development costs and resource requirements also vary based on the platform chosen. Developing on native applications requires multiple resources with specialized skills (Cocoa for ios, java for Android etc.) unlike HTML5. However, due to the varying degrees of compatibility among browsers, there is an increased requirement for testing. itaas, Inc. Page 7

9 The answers to the points above will determine the solution that best meets the needs of the user and the developer. At times it may be a hybrid solution (an application that is developed in HTML5, but works within a native framework) that creates the optimal experience. This approach allows applications to utilize the best of both worlds. Application developers can choose to develop the most commonly used portions of the application in native platforms and less used portions or constantly changing portions of the application in HTML5. For example, itaas developed a hybrid application called PartyShots ( that relied heavily on the camera functions and advertising for monetization. Utilizing the native platform allowed us to make the best use the camera functions and the advertising infrastructure. However, the help screens used HTML, since these screens would change based on consumer feedback. There are also open source HTML5 platforms that allow developers to develop applications in HTML5 and port them to native applications that we will discuss in later papers. Pros 1. Easier to develop on 2. Easy to host with just about any shared server 3. Application source code is available to anyone with a few essential skills 4. Does not require application certification or approval Cons 1. Not as well integrated with the device 2. Can't Access all of the platform's services 3. Not as easy to monetize as Native apps itaas, Inc. Page 8

10 Importance of HTML5 to the Cable Industry Cable service providers have expressed the desire to lessen the need for Cable specific standards and specifications and rely on cross-industry and global standards. Obvious reasons for this change include benefiting from efforts and brainpower of a larger community, availability of skilled resources and tools as well as ability to re-purpose existing applications to the TV experience. Service providers will likely take advantage of the standardized presentation and application environment of HTML5. With a browser supporting the proper codecs, HTML5 can be used to render the navigator UI as well as video. Although the initial feature set will be different, HTML5 can be used for managed devices (set top boxes and media gateways) as well as unmanaged (mobile devices and PC s). Various service providers are considering it as a platform to build a User Interface/User Experience (UI/UX) that works across all of these platforms. This will present some critical challenges in coding and in optimizing the UI/UX across the variety of hardware capabilities, navigation expectations and orientation variations. It will also greatly increase the amount of testing required to deploy a service across the myriad of device possibilities. Challenges/Key Factors for a Set-Top Box (STB) HTML navigator Below are some of the challenges/key factors for a STB HTML navigator: HTML5 doesn t specify video codec support and a customized browser with support for service provider specific codecs is required Implementing features such as parental control, close captioning, Emergency Alert Systems (EAS) Achieving STB user experience with HTML/JavaScript is very difficult, as developers and UI designers have to live within the constraints of a browser. The browser and applications must be customized for TV experience including layouts, key handling, lack of mouse, etc. Memory/Resource management by HTML/JavaScript apps becomes more important in a limited resource STB environment. Developers have to be aware of capabilities of the STB environment that may not exist on a desktop browser. For example, on a STB (or similar limited CPU/memory device) one may have to use tactics such as: o Using sorting judiciously in Javascript o Using obfuscator to shorten variable/method names o Minimize object creation o Understand, optimize and reuse Document Object Model (DOM) elements o Limit use of simultaneous animations The next generation of set-tops could support HTML5, but it will require significant effort from service providers and third party developers to accommodate the challenges mentioned. The need for common UI and the challenges of finding development resources with experience in porting to STB platforms along with the challenges of development and testing environments will require specialized teams of software engineers. itaas, Inc. Page 9

11 Conclusion HTML5 is a welcome standard that continues to gain adoption across the web. As browsers continue to enhance their HTML5 compatibility, the adoption rate of HTML5 by developers will continue to rise. However, in the short term HTML5 ubiquity will likely be trumped by development on multiple native platforms that are tightly integrated with the device itself or with a hybrid approach. For service providers, the platform holds the tantalizing possibility of a uniform user experience across multiple platforms, but also poses serious questions on the right UI/UX and will likely require leveraging outsourced testing and development resources to implement these new offerings in a timely fashion. itaas, Inc. Page 10

12 About itaas: itaas provides unique software engineering experience and expertise in the development, testing, and deployment of interactive digital video services across cable, IP, and Mobile technologies on multiple platforms including HTML5, ios, and Android. Since its founding in 1999, itaas has worked with hundreds of leading service providers, technology vendors, application developers and content providers to bring innovative software applications and services to the consumer. The company excels in translating a customer s idea into an innovative interactive digital video service that can be widely deployed. Headquartered in Atlanta, Georgia, itaas has additional development and integration facilities and sophisticated QA testing laboratories in India and Canada. For more information, please contact us at: [email protected] itaas, Inc. Page 11