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, -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 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. , 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 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 341/450 Internet Explorer 141/450 Mozilla 313/450 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 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. 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

,
,
, and