WP 1 AND EREADING AND D 1.1.4.1 STATE-OF-THE-ART-STANDARDS
Deliverable number 1.1.4.1 State-of-the art, html5-standard
Author(s): Olli Nurmi
Confidentiality: Public
Date and status: 7.9.2011 - Status: Version 1.0
This work was supported by TEKES as part of the next Media programme of TIVIT (Finnish Strategic Centre for Science, Technology and Innovation in the field of ICT) Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
Version history: Version Date State Author(s) OR Remarks (draft/ /update/ final) Editor/Contributors 0.9 30.6.2011 draft Olli Nurmi 1.0 1.9.2011 update Olli Nurmi 1.1 28.9.2011 final Olli Nurmi 1.2 4.10.2011 final Olli Nurmi Issues about Onix is removed to separate deliverable
next Media www.nextmedia.fi www.tivit.fi
WP 1 AND EREADING AND D 1.1.4.1 1 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
Table of Contents
1 Introduction ...... 3 1.1 Web browsers ...... 3 1.2 HTML5 – an open standard ...... 4 1.3 CSS - Cascading Style Sheets ...... 6 1.4 HTML5 vs native applications ...... 6 2 HTML5/CSS3 standards ...... 7 2.1 Implications to HTML5-newspaper reader ...... 8 3 Examples of HTML5 applications ...... 9 3.1 Kindle Cloud Reader ...... 9 3.2 Financial Times ...... 11 3.3 Facebook Project Spartan ...... 12 4 Conclusions ...... 12
WP 1 AND EREADING AND D 1.1.4.1 2 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
1 Introduction
The technology development in the eReading project has two focus areas: news services and book reading services. In these context the evolving HTML5/CSS3 - standards are of importance. This report summarizes briefly the status of those standard. In this chapter we introduce some of the key areas of web technology to the reader.
1.1 Web browsers
A web browser engine is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer. A web browser engine is typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content. Currently the web browsers are split into a user interface and an engine. The engine does most of the work. It essentially takes a URL and a screen rectangle as arguments. It then retrieves the document corresponding to the URL and paints a graphical representation of it on the given rectangle. The user interface provides the menu bar, address bar, status bar, bookmark manager, history and preferences window among other things. It embeds the engine and serves as an interface between the user and the engine.
Figure 1.Usage share of web browsers.
WP 1 AND EREADING AND D 1.1.4.1 3 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
1.2 HTML5 – an open standard
HTML5 is widely used to refer to modern Web technologies. HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s. Some features were introduced in specifications; others were introduced in software releases. In some respects, implementations have converged with specifications and standards, but in other ways, they continue to diverge. HTML5 is an open standard. This means that anyone can use it to create what they wish. Critical, however, is the fact that HTML5 supports not only animations, video, and audio, but also a host of other functions, enabling people to build what look like complete applications within a Web page. You can turn a page into a ebook reader, music player, or game player -- no app store required. The promise of HTML5 is to be able to write Web-based applications once and deliver them across a variety of mobile platforms and devices without native development work. HTML5 is now supported by most recent versions of smartphones and tablets. Web apps written in HTML5 generally don‟t have desktop-and-mouse-oriented scroll bars but have mobile device-native pinch, flip, swipe, and other gesture- based navigation capabilities. HTML5 is viewed by many as the future of mobile development. There are currently limits to the device-native capabilities supported by HTML5. For example, access to the camera functionality on various mobile devices is usually lacking. HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple several elements and attributes are not included, such as presentational elements that are better dealt with using CSS. The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. A test suite will be used to measure completeness of the implementations. This approach differs from previous versions of HTML, where the final specification would typically be approved by a committee before being actually implemented. The goal of this change is to ensure that the specification is implementable, and usable by authors once it is finished. According to the W3C timetable, it was estimated that HTML5 would reach W3C Recommendation by late 2010. However, the First Public Working Draft estimate was missed by 8 months, and Last Call and Candidate Recommendation were expected to be reached in 2008, but as of January 2011 HTML5 is still at Working Draft stage in the W3C. HTML5 has been at Last Call in the WHATWG since October 2009. Ian Hickson, editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012. The criterion for the specification becoming a W3C Recommendation is “two 100% complete and
WP 1 AND EREADING AND D 1.1.4.1 4 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
fully interoperable implementations”. In an interview with TechRepublic, Hickson guessed that this would occur in the year 2022 or later. However, many parts of the specification are stable and may be implemented in products. The actual standard is not officially expected to be completed until 2020, according to the World Wide Web Consortium (W3C) standards body. But that won‟t stop companies and independent engineers from developing and deploying HTML5 features. Many current browsers already support several of the new features in the draft specifications. An HTML5 test suite is also under development that, while it does not test all of the new features nor the functionality of those it does detect, rates browsers' support. New tests are expected to be added to the suite as time goes by.
Browser HTML5 Test Points
Apple Safari 293/450 Google Chrome 341/450 Internet Explorer 141/450 Mozilla Firefox 313/450 Opera 286/450
Figure 2 HTML5 support of some browsers tested by http://html5test.com. source:http://en.wikipedia.org/wiki/Comparison_of_web_browsers.
However, many Internet users continue using older browsers such as Internet Explorer 6 and 8, so HTML5 does not work with a significant fraction of browsers still in use. Microsoft's Internet Explorer web browser, which had a 57% market share as of December 2010, does not support HTML5 outside of version 9 which was released to the public on March 14, 2011.
HTML5 introduces technology improvements to HTML that help mobile developers by adding geo-location, user interface tools, and access to smartphone‟s cameras and sensors. HTML5 also adds media playback, offline storage, and 2D graphics capabilities.
Media Playback
The days of needing Flash, Silverlight or Quicktime to play music or view a video are over. With HTML5, plug-ins are no longer needed. The HTML quotation tags can be used to directly embed media.
Offline Support
With HTML5 (and a free SQL Lite database), it‟s now possible for mobile developers to store data locally on the device. Interruptions in connectivity no
WP 1 AND EREADING AND D 1.1.4.1 5 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
longer need to affect. Capabilities such as caching of logic and local storage of data make this possible.
2D Graphics Capabilities
The canvas element is now part of HTML5 and allows for dynamic rendering of 2D shapes and bitmap images. It is designed to make it easy to add graphics to a page without using plug-ins.
1.3 CSS - Cascading Style Sheets
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. Even when the availability of CSS-capable browsers made CSS a viable technology, the adoption of CSS was still held back by designers' struggles with browsers' incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity. Currently there is strong competition between Mozilla's Gecko layout engine used in Firefox, the WebKit layout engine used in Apple Safari and Google Chrome, the similar KHTML engine used in KDE's Konqueror browser, and Opera's Presto layout engine—each of them is leading in different aspects of CSS.
1.4 HTML5 vs native applications
Native app development is generally easier as it is designed for one platform and libraries of frameworks, components and templates are available from the platform. The tools used in native app development are generally those that belong to the same family as the platform itself. Web development is completely different because there is no vendor-specific platform, so there are a huge variety of tools and technologies that developers can use, and it‟s simply a case of using whichever ones you prefer. Native apps run faster in many scenarios. This is becoming less true as time goes on and browsers gain support for technologies like WebGL but there are still circumstances when native apps perform better. At the same time, skilled Web app developers can take steps to enhance performance.
WP 1 AND EREADING AND D 1.1.4.1 6 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
Native apps are likely to have access to new mobile device capabilities before Web apps do. Development tools for optimizing performance on mobile devices have lagged behind the tools available to native app developers. File storage for Web apps is limited to 10MB--5MB in AppCache and 5MB in LocalStorage. Sophisticated games or rich media apps often need more storage space than this. With HTML5, it‟s possible to store data locally on the device. Interruptions in connectivity no longer need adversely affect the field workers ability to remain productive since one can cache the logic and store the data locally on the device. While the web browser‟s local databases make it easier for web apps to cache data, they won‟t provide the same data power found with desktop apps. Data storage with HTML5 is buried deep in the browser, and stored data can‟t be moved to another machine, copied, or backed up. The files can be moved but only if one knows where to look. The security of the local database is also a concern. If a user is able to manipulate the JavaScript code, the gap in security also leaves the databases open and vulnerable for the data to be changed. One has to be very cautious of data collection with HTML5 client-based apps. Data can be continually saved when a web app is connected to the Internet. However, when offline, changes aren‟t always stored and copies start appearing, making synchronization a problem. Developers can provide solutions by using version control and user interfaces to manage synchronization but somebody must code this.
2 HTML5/CSS3 standards
As the mobile application space continues to explode, developers are increasingly using HTML5, JavaScript and CSS3 to aid in the creation of web apps and native mobile apps. This process is especially useful when dealing with cross-platform development or when working with content that already exists in some form on the web. Web standards and browser implementations are rapidly evolving features that enable sophisticated games to be written as standards-based Web apps. These features include fast JS engines, GPU-accelerated 2D and 3D graphics (canvas and WebGL), video/audio, WebSockets, and emerging proposed standards for advanced audio effects, fullscreen APIs, and peer-to-peer real-time communication. HTML5 adds many new syntactical features. These include the
WP 1 AND EREADING AND D 1.1.4.1 7 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
new elements, such as
2.1 Implications to HTML5-newspaper reader
The status of the HTML5/CSS3 standards means that the development work should focus on using the features that are widely supported and not to develop too advanced functions. More specifically problems have been identified dealing with features regarding multicolumn and hyphenation. In news service implantation lot of effort has been put on content extraction from the editorial system in xml-format. This gives possibilities for following development areas:
Content integration: Bringing together and normalizing structured and unstructured content in different formats;
Content repurposing: Using content in multiple products without having to re-create or reformat it;
WP 1 AND EREADING AND D 1.1.4.1 8 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
Multiple delivery formats: Satisfying clients‟ demand for custom content delivery formats without creating multiple publishing streams;
Fine-grained searching: Searching requires more granularity than simple keyword search;
Content syndication: Partnering with other content players requires ability to integrate, normalize, and repurpose content from multiple sources.
In addition to repurposing content and automating content delivery in custom formats, XML can also be used to add metadata to make content management easier
3 Examples of HTML5 applications
In this chapter some examples of HTML5 applications in the media domain are presented. It can be estimated that there will be several others in the coming years.
3.1 Kindle Cloud Reader
Amazon.com announced Kindle Cloud Reader, its latest Kindle reading application that leverages HTML5 and enables customers to read Kindle books instantly using only their web browser - online or offline - with no downloading or installation required. As with all Kindle apps, Kindle Cloud Reader automatically synchronizes readers Kindle library, as well as readers last page read, bookmarks, notes, and highlights for all of readers Kindle books. Kindle Cloud Reader is just another initiative in the "Buy Once, Read Everywhere" strategy that Amazon has with all its Kindle applications. It can do everything that a normal Kindle app can do, such as synchronize your library, your last page read and bookmarks. Features of Kindle Cloud Reader include:
An immersive view of your entire Kindle library, with instant access to all of your books Start reading over 950,000 Kindle books instantly within your browser An embedded Kindle Store optimized for your web browser makes it seamless to discover new books and start reading them instantly New Kindle Store for iPad is built from the ground up for iPad's touch interface Your current book is automatically made available for offline use, and you can choose to save a book for reading offline at any time Receive automatic software updates without the need to download new software Select any book to start reading, customize the page layout to your desired font size, text color, background color, and more
WP 1 AND EREADING AND D 1.1.4.1 9 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
View all of the notes, highlights, and bookmarks that you've made on other Kindle apps or on Kindle Sync your last page read across your Kindle and free Kindle apps so you can always pick up where you left off
Kindle Cloud Reader is available for Safari on iPad, Safari on desktop and Chrome. Kindle Cloud Reader on the iPad is optimized for the size and touch interface of iPad. Without even leaving the app, customers can start shopping in the Kindle Store and find a shopping experience built specifically for iPad's Safari browser. Kindle Cloud Reader will be available on additional web browsers, including Internet Explorer, Firefox, the BlackBerry PlayBook browser, and other mobile browsers, in the coming months.
Figure 3 Kindles HTML5 Web app called Kindle Cloud Reader.
WP 1 AND EREADING AND D 1.1.4.1 10 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
3.2 Financial Times
Figure 4 Financial Times HTML5 web apps available at http://app.ft.com.
The FT's new browser-based app is different from its old native app, in that users will immediately see any updates to the site instead of waiting for them to go through an extended release process. The Web app also adds the native app-like ability to save and read articles when working offline. Furthermore, users don't have to download an actual app; the only software requirement is a mobile Web browser. The browser app enables readers to access content when offline by saving a shortcut to articles, receive automatic updates without the need to download new versions of the app and access content exclusively made for tablets. An upcoming feature is „Clippings‟, a service that will allow users to read articles later, either on their tablet or on their desktop PC.
WP 1 AND EREADING AND D 1.1.4.1 11 (12) STATE-OF-THE-ART-STANDARDS
Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011)
3.3 Facebook Project Spartan
Project Spartan is the codename for a new platform Facebook is about to launch. It‟s entirely HTML5-based and the aim is to reach some 100 million users in a key place: mobile. As of right now, there are believed to be 80 or so outside developers working with Facebook on Project Spartan. These teams are working on apps for the platform that range from games to news-reading apps.
4 Conclusions
The ability to demonstrate compliance with widely recognised and respected standards is an effective means of differentiation in a competitive marketplace. In addition, manufacturing products or supplying services to appropriate standards maximises their compatibility with those manufactured or offered by others, thereby increasing potential sales and widespread acceptance. In modern business, effective communication along the supply chain and with legislative bodies, clients and customers is imperative. Standardization can deliver measurable benefits when applied within the infrastructure of a company itself. Business costs and risks can be minimised, internal processes streamlined and communication improved. Standardization promotes interoperability, providing a competitive edge necessary for the effective worldwide trading of products and services. As HTML5 matures over the next few years, this will be the standard that enables the next wave of cross-platform innovation. The combination of APIs, CSS and HTML5 could make the painful process of developing apps for multiple platforms and multiple screen sizes a thing of the past. HTML5 is not one thing. At one extreme, the hype around the term can lead to using it to mean one particular feature (e.g., video). At the other extreme, treating it as if it is one very large inseparable thing will lead to a "wait until it's done" approach, which will prove to be a bad choice for most companies. HTML5 consists of many components, including video, canvas, audio and offline capabilities. In addition, other modern Web capabilities, such as JavaScript, CSS3 and WebSocket, are closely related and often grouped together. Within the next year or so, a flood of HTML5-based Web apps will be coming to mobile devices. It will likely start with games and dedicated applications like e- readers and move to more general use apps like news sites.
WP 1 AND EREADING AND D 1.1.4.1 12 (12) STATE-OF-THE-ART-STANDARDS