Interactivity in EPUB3 - #FBM12
Post on 05-Dec-2014
5399 Views
Preview:
DESCRIPTION
Transcript
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 onlineprintmedia@datamatics.com
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 info@datamatics.de Twitter www.twitter.com/datamatics_pub
Datamatics Global Service GmbHIm Leuschnerpark 3 64347 Griesheim
Telefon +49 (6155) 79537-0
For further information, please contact
top related