Using HTML5 and CSS3 features with JavaScript
Introduction   EPUB 3 offers many options achieving this interactivity using HTML5 features   like Audio, Video, JavaScrip...
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 ...
Example
Interactive forms   •Using HTML5 and JavaScript we can create the interactive forms.   •Examples        •Multiple Choice Q...
Example
Example
Drag and Drop  •Achieved through HTML5 and JavaScript.  •Not supported by some browsers using HTML5 and hence achieved Jav...
Animations , Audio and Video    •Using HTML5 elements (ex: Canvas) , CSS and JavaScript animations could be    achieved   ...
For further information, please contact  Headquarter / India  Website www.datamatics.com  Contact onlineprintmedia@datamat...
Upcoming SlideShare
Loading in...5
×

Interactivity in EPUB3 - #FBM12

4,846

Published on

Kurzpräsentation auf der Frankfurter Buchmesse 2012 von unseren indischen Kollegen.

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,846
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Interactivity in EPUB3 - #FBM12

  1. 1. Using HTML5 and CSS3 features with JavaScript
  2. 2. Introduction EPUB 3 offers many options achieving this interactivity using HTML5 features like Audio, Video, JavaScript, CSS3, etc.
  3. 3. Interactivity . Interactivity in EPUB is achieved through the HTML5 and CSS3 with minimal JavaScript usage.
  4. 4. Interactive types 1. Read Aloud 2. Interactive forms 3. Drag and Drop 4. Animations 5. Multimedia
  5. 5. 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>
  6. 6. Example
  7. 7. Interactive forms •Using HTML5 and JavaScript we can create the interactive forms. •Examples •Multiple Choice Question •True or false •Matching •Fill in the blanks.
  8. 8. Example
  9. 9. Example
  10. 10. Drag and Drop •Achieved through HTML5 and JavaScript. •Not supported by some browsers using HTML5 and hence achieved Javascript coding
  11. 11. 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>
  12. 12. For further information, please contact Headquarter / India Website www.datamatics.com Contact 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-CH Website www.datamatics.eu/ Facebook www.facebook.com/datamatics.de Contact info@datamatics.de Twitter www.twitter.com/datamatics_pub Datamatics Global Service GmbH Im Leuschnerpark 3 64347 Griesheim Telefon +49 (6155) 79537-0
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×