Interactivity in EPUB3 - #FBM12

Using HTML5 and CSS3 features with JavaScript

Introduction

EPUB 3 offers many options achieving this interactivity using HTML5 features like Audio, Video, JavaScript, CSS3, etc.

Interactivity

.

Interactivity in EPUB is achieved through the HTML5 and CSS3 with minimal JavaScript usage.

Interactive types

1. Read Aloud

2. Interactive forms

3. Drag and Drop

4. Animations

5. Multimedia

Read Aloud

•Read aloud books “Read themselves” with audio narration. Text highlights to match the audio

•This audio narration is achieved through smil file.

<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/ops"version="3.0"profile="http://www.idpf.org/epub/30/profile/content/">

<body><seq id="id1" epub:textref="Page001.xhtml" epub:type="chapter">

<par id="sentence0"><text src="Page001.xhtml#c001s0000s"/><audio src="Media/WOH_ministrynice_SPR01_credits.m4a"

clipBegin="0:00:00.00" clipEnd="0:00:07.16"/></par>

Example

Interactive forms

•Using HTML5 and JavaScript we can create the interactive forms.

•Examples

•Multiple Choice Question•True or false•Matching•Fill in the blanks.

Example

Example

Drag and Drop

•Achieved through HTML5 and JavaScript.

•Not supported by some browsers using HTML5 and hence achieved Javascript coding

Animations , Audio and Video

•Using HTML5 elements (ex: Canvas) , CSS and JavaScript animations could be achieved

•One of the most obvious and impressive advantages that electronic books have over their print counterparts is the ability to contain moving images and sound.

•HTML5 video and audio elements used to incorporate multimedia in ebooks

<video controls="controls" poster="../img/Chapter_One-Audio_Slideshow.jpg" width="585" height="440"><source src="../media/Chapter_One-Audio_Slideshow.m4v" type="video/x-m4v"/><source src="../media/Chapter_One_Audio_Slideshow.webm" type="video/webm"/></video>

� Headquarter / IndiaWebsite www.datamatics.comContact [email protected]

Datamatics Global Service Ltd.Knowledge Centre, Street No. 17 MIDC, Andheri (East) Mumbai – 400 093

Phone +91 (22) 6102 0000 – 0009

� Germany / D-A-CHWebsite www.datamatics.eu/ Facebook www.facebook.com/datamatics.deContact [email protected] Twitter www.twitter.com/datamatics_pub

Datamatics Global Service GmbHIm Leuschnerpark 3 64347 Griesheim

Telefon +49 (6155) 79537-0

For further information, please contact

Business

Interactivity in EPUB3 - #FBM12