HTML5:n mahdollisuudet ja rajoitukset e-julkaisun lukemisessa ja tuottamisessa

Transcription

1 HTML5:n mahdollisuudet ja rajoitukset e-julkaisun lukemisessa ja tuottamisessa Digitaalisen julkaisemisen uudet mahdollisuudet Olli Nurmi, Smart Interaction Systems, VTT

2 2 Agenda What is ereading? What is open web (HTML5) What is possible with HTML5? Some examples

3 3 ereading modes Communication, active mode Handsets ereading devices (E Ink-based) Laptops, Tablets Relaxing, learning Office environment, content creation

4 4 Cloud ereading

5 5 Reading Social reading Sharing the reading material Synchronization of the personal libraries Sharing the artifacts of our reading including Annotations Bookmarks Clippings Sharing the records of our reading Page views, recommendations, etc.

6 6 Web everywhere Devices Web Trends 85% Percentage of handsets shipped globally in 2011 that included a web browser Diversity of device types (ebooks, printers, tablets, televisions, automobiles) Apps with rich interactions. People want: Apps in addition to documents Rich media (video, animations, digital photography, music) Location-based services Social Websites evolved from simple documents into complex, interactive applications using complex layouts

7 7 HTML5 - The open web platform The Open Web Platform is a programming environment for rich, interactive, cross-platform applications: APIS: Geolocation, gyroscopes, near-field communications (NFC), cameras, address book, linked data, Rich media: Audio and video, vectorial images, graphics, animations, highquality typography, Cross-device: screens of all sizes, touch, keyboards, voice, vibrations, beeps, Communications: client-server, real-time, peer-to-peer, sockets, Society: privacy, security, multilingual, accessibility

8 8

9 9 Web Standard Technologies Core Video/Audio Style Fonts Protocols Graphics Offline access Device access Performance Hypertext Markup Language (HTML) HTML, WebRTC, Web Audio Cascading Style Sheets (CSS) Web Open Font Format (WOFF) HTTP, Web Sockets Scalable Vector Graphics (SVG), HTML Canvas Web APIs: Web Storage, IndexedDB, File API Web APIs: Geolocation, Multi-touch, Media Capture, etc. Web APIs: Navigation timing, Page Visibility, Animation timing

10 10 HTML5 Showcase - Apple

11 11 The promise is unique

12 12 Native apps vs. web

13 13 HTML5 Geolocation API Determine where the device is. Find it right in the browser Useful for providing location based services API allows for both one time location and continuous location In ebooks Interactive Atlas, Road Maps Travel/Restaurant guides customized for user s location Geolocated fiction Geolocation-based games

14 14 HTML5 Storage API Allows local storage of application data on the device 5MB per domain (ipad limitation) Key component to Offline usage Types of Storage options

15 15 HTML5- "Device APIs" Geolocation API Device Orientation API ( accelerometer ) WebGL ( GPU ) HTML5 Filesystem API ( sandboxed filesystem ) navigator.online / navigator.connection ( network connectivity ) Battery API Gamepad API WebRTC ( voice & video input ) / Web Audio API ( core audio ) Camera Access Demo: Explode Video)

16 16 CSS

17 17 CSS Current work CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group

18 18

19 19 CSS2 Media Types & Groups All Suitable for all devices. Braille Intended for braille tactile feedback devices. Embossed Intended for paged braille printers. Handheld Intended for handheld devices (typically small screen, limited bandwidth). Print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. Projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media. Screen Intended primarily for color computer screens. Speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details. Tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type. Tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

20 20

21 21 New features regions, flex layout, Allows flexibility in placement of boxes for content flows flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent Demo: demos.appspot.com/static/css/flexbox/index.html

22 22 EPUB3 vs HTML5 Fast development Support for browser growing RIA-applications Development / publishing tools not yet there Partial support of epub3 in ereaders DRM, Content selling, Offline Publishing tools Primary for text oriented books

23 23 Some media examples

24 24

25 25

26 26

27 27

28 28 Kindle, Financial Times,

29 29 HTML5

30 30 Summary Open web technologies provides a viable alternative for applets Browser support is improving by day Development tools and performance still not yet there Business models and monetisation of media still unclear

31 31 VTT - 70 vuotta teknologiaa yhteiskunnan ja elinkeinoelämän hyväksi