SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
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>
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

Mais conteúdo relacionado

Destaque

북페이스 사업계획서 20150708
북페이스 사업계획서 20150708북페이스 사업계획서 20150708
북페이스 사업계획서 20150708Abigail Hyome Choi
 
세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가Young Woong Ra
 
Introducción a Symfony2
Introducción a Symfony2Introducción a Symfony2
Introducción a Symfony2aferrandini
 
Proyecto regadío vegas bajas
Proyecto regadío vegas bajasProyecto regadío vegas bajas
Proyecto regadío vegas bajasppmarmolejo
 
Modelo atómico de Thomson
Modelo atómico de ThomsonModelo atómico de Thomson
Modelo atómico de ThomsonGrupo4cpn
 
10 große fehler bei der niederlassung
10 große fehler bei der niederlassung10 große fehler bei der niederlassung
10 große fehler bei der niederlassungMicha Brex
 
IPMS experience sharing workshop: Cattle fattening group report
IPMS experience sharing workshop: Cattle fattening group reportIPMS experience sharing workshop: Cattle fattening group report
IPMS experience sharing workshop: Cattle fattening group reportILRI
 
Encontrar a informação na Biblioteca do DARQ
Encontrar a informação na Biblioteca do DARQEncontrar a informação na Biblioteca do DARQ
Encontrar a informação na Biblioteca do DARQformaticefa
 
HIJABISTA: fashion or compulsory
HIJABISTA: fashion or compulsory HIJABISTA: fashion or compulsory
HIJABISTA: fashion or compulsory Yka Omar
 
Comic Zeal : La mejor aplicación para leer comic en IPad
Comic Zeal : La mejor aplicación para leer comic en IPadComic Zeal : La mejor aplicación para leer comic en IPad
Comic Zeal : La mejor aplicación para leer comic en IPadJulio Alonso Arévalo
 
Drones yuneec baratos oferta
Drones yuneec baratos ofertaDrones yuneec baratos oferta
Drones yuneec baratos ofertaJose Luis Gago
 
Aeonex Group: Portfolio
Aeonex Group: PortfolioAeonex Group: Portfolio
Aeonex Group: Portfolioaeonexgroup
 
Smarter Marketing for Better Results - Michael Berger
Smarter Marketing for Better Results - Michael BergerSmarter Marketing for Better Results - Michael Berger
Smarter Marketing for Better Results - Michael BergerMarketo
 
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMM
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMMMantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMM
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMMLuis Angel Carmona Limon
 

Destaque (20)

북페이스 사업계획서 20150708
북페이스 사업계획서 20150708북페이스 사업계획서 20150708
북페이스 사업계획서 20150708
 
세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가세계 전자책 시장은 어떻게 움직이는가
세계 전자책 시장은 어떻게 움직이는가
 
Introducción a Symfony2
Introducción a Symfony2Introducción a Symfony2
Introducción a Symfony2
 
Proyecto regadío vegas bajas
Proyecto regadío vegas bajasProyecto regadío vegas bajas
Proyecto regadío vegas bajas
 
Modelo atómico de Thomson
Modelo atómico de ThomsonModelo atómico de Thomson
Modelo atómico de Thomson
 
Business Voice August 2011
Business Voice August 2011Business Voice August 2011
Business Voice August 2011
 
10 große fehler bei der niederlassung
10 große fehler bei der niederlassung10 große fehler bei der niederlassung
10 große fehler bei der niederlassung
 
IPMS experience sharing workshop: Cattle fattening group report
IPMS experience sharing workshop: Cattle fattening group reportIPMS experience sharing workshop: Cattle fattening group report
IPMS experience sharing workshop: Cattle fattening group report
 
Encontrar a informação na Biblioteca do DARQ
Encontrar a informação na Biblioteca do DARQEncontrar a informação na Biblioteca do DARQ
Encontrar a informação na Biblioteca do DARQ
 
HIJABISTA: fashion or compulsory
HIJABISTA: fashion or compulsory HIJABISTA: fashion or compulsory
HIJABISTA: fashion or compulsory
 
Tiburones krd
Tiburones krdTiburones krd
Tiburones krd
 
Bondia Lleida 30082011
Bondia Lleida 30082011Bondia Lleida 30082011
Bondia Lleida 30082011
 
Comic Zeal : La mejor aplicación para leer comic en IPad
Comic Zeal : La mejor aplicación para leer comic en IPadComic Zeal : La mejor aplicación para leer comic en IPad
Comic Zeal : La mejor aplicación para leer comic en IPad
 
Conrad McRae
Conrad McRaeConrad McRae
Conrad McRae
 
Roma consulting uk rev16
Roma consulting uk rev16Roma consulting uk rev16
Roma consulting uk rev16
 
Drones yuneec baratos oferta
Drones yuneec baratos ofertaDrones yuneec baratos oferta
Drones yuneec baratos oferta
 
Aeonex Group: Portfolio
Aeonex Group: PortfolioAeonex Group: Portfolio
Aeonex Group: Portfolio
 
Smarter Marketing for Better Results - Michael Berger
Smarter Marketing for Better Results - Michael BergerSmarter Marketing for Better Results - Michael Berger
Smarter Marketing for Better Results - Michael Berger
 
Silabo mundologia
Silabo mundologia Silabo mundologia
Silabo mundologia
 
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMM
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMMMantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMM
Mantenimiento y mejora del S.A.C ISO 90012008 en el CC-GMM
 

Semelhante a Interactivity in EPUB3 - #FBM12

Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
Html5 + css3+ java script for future - HTML5
Html5 + css3+ java script for future - HTML5Html5 + css3+ java script for future - HTML5
Html5 + css3+ java script for future - HTML5Harshana Weerasinghe
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web DevelopmentDaryll Chu
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)Adam Lu
 
Html5 - the new kid on the block
Html5 - the new kid on the blockHtml5 - the new kid on the block
Html5 - the new kid on the blockMarian Borca
 
FocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXFocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXKirsten Rourke
 
Implementing a Multi-Device Approach to E-learning Design (APAC Session)
Implementing a  Multi-Device Approach to E-learning Design (APAC Session)Implementing a  Multi-Device Approach to E-learning Design (APAC Session)
Implementing a Multi-Device Approach to E-learning Design (APAC Session)Raptivity
 
Implementing a Multi-Device Approach to E-learning Design (US Session)
Implementing a  Multi-Device Approach to E-learning Design (US Session)Implementing a  Multi-Device Approach to E-learning Design (US Session)
Implementing a Multi-Device Approach to E-learning Design (US Session)Raptivity
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 
Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010Patrick Lauke
 

Semelhante a Interactivity in EPUB3 - #FBM12 (20)

Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
Html5 + css3+ java script for future - HTML5
Html5 + css3+ java script for future - HTML5Html5 + css3+ java script for future - HTML5
Html5 + css3+ java script for future - HTML5
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
Flash vs. HTML5
Flash vs. HTML5Flash vs. HTML5
Flash vs. HTML5
 
Html5 - the new kid on the block
Html5 - the new kid on the blockHtml5 - the new kid on the block
Html5 - the new kid on the block
 
Httml flash
Httml flashHttml flash
Httml flash
 
Chapter11
Chapter11Chapter11
Chapter11
 
HTML5
HTML5 HTML5
HTML5
 
FocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXFocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TX
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Implementing a Multi-Device Approach to E-learning Design (APAC Session)
Implementing a  Multi-Device Approach to E-learning Design (APAC Session)Implementing a  Multi-Device Approach to E-learning Design (APAC Session)
Implementing a Multi-Device Approach to E-learning Design (APAC Session)
 
Implementing a Multi-Device Approach to E-learning Design (US Session)
Implementing a  Multi-Device Approach to E-learning Design (US Session)Implementing a  Multi-Device Approach to E-learning Design (US Session)
Implementing a Multi-Device Approach to E-learning Design (US Session)
 
Duct Tape PR - CIPR Scotland Social in the City Talk
Duct Tape PR - CIPR Scotland Social in the City TalkDuct Tape PR - CIPR Scotland Social in the City Talk
Duct Tape PR - CIPR Scotland Social in the City Talk
 
Flash media technology
Flash media technologyFlash media technology
Flash media technology
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010
 

Mais de Datamatics Global Services GmbH

Detailed case study leading insurance company - alfresco based invoice appr...
Detailed case study   leading insurance company - alfresco based invoice appr...Detailed case study   leading insurance company - alfresco based invoice appr...
Detailed case study leading insurance company - alfresco based invoice appr...Datamatics Global Services GmbH
 
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)Wie Sie Ihren Content fit machen für die Zukunft (für Cash)
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)Datamatics Global Services GmbH
 
Datamatics Digital Publishing & Retail Services - Overview [EN]
Datamatics Digital Publishing & Retail Services - Overview [EN]Datamatics Digital Publishing & Retail Services - Overview [EN]
Datamatics Digital Publishing & Retail Services - Overview [EN]Datamatics Global Services GmbH
 
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'Datamatics Global Services GmbH
 
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)Datamatics Global Services GmbH
 
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012Datamatics Global Services GmbH
 

Mais de Datamatics Global Services GmbH (20)

Sharepoint konferenz, wien
Sharepoint konferenz, wienSharepoint konferenz, wien
Sharepoint konferenz, wien
 
Detailed case study leading insurance company - alfresco based invoice appr...
Detailed case study   leading insurance company - alfresco based invoice appr...Detailed case study   leading insurance company - alfresco based invoice appr...
Detailed case study leading insurance company - alfresco based invoice appr...
 
Leveraging Big Data Opportunities for Growth
Leveraging Big Data Opportunities for GrowthLeveraging Big Data Opportunities for Growth
Leveraging Big Data Opportunities for Growth
 
Utilizing the Full Potential of EPUB Feature Set
Utilizing the Full Potential of EPUB Feature SetUtilizing the Full Potential of EPUB Feature Set
Utilizing the Full Potential of EPUB Feature Set
 
Case Study: Editorial Services
Case Study: Editorial ServicesCase Study: Editorial Services
Case Study: Editorial Services
 
Formular, mit einem Xerox Multifunktionsgerät gescannt
Formular, mit einem Xerox Multifunktionsgerät gescanntFormular, mit einem Xerox Multifunktionsgerät gescannt
Formular, mit einem Xerox Multifunktionsgerät gescannt
 
Flash2HTML Convertions #fbm2012
Flash2HTML Convertions #fbm2012Flash2HTML Convertions #fbm2012
Flash2HTML Convertions #fbm2012
 
Showcase DMS EXPO 2012, Stuttgart
Showcase DMS EXPO 2012, StuttgartShowcase DMS EXPO 2012, Stuttgart
Showcase DMS EXPO 2012, Stuttgart
 
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)Wie Sie Ihren Content fit machen für die Zukunft (für Cash)
Wie Sie Ihren Content fit machen für die Zukunft (für Cash)
 
Datamatics Content2Cash Solution
Datamatics Content2Cash SolutionDatamatics Content2Cash Solution
Datamatics Content2Cash Solution
 
DSS - Document Solution System
DSS - Document Solution SystemDSS - Document Solution System
DSS - Document Solution System
 
Zertifizierter projektmanager verfügbar
Zertifizierter projektmanager verfügbarZertifizierter projektmanager verfügbar
Zertifizierter projektmanager verfügbar
 
Interim manager verfügbar
Interim manager  verfügbarInterim manager  verfügbar
Interim manager verfügbar
 
Datamatics Digital Publishing & Retail Services - Overview [EN]
Datamatics Digital Publishing & Retail Services - Overview [EN]Datamatics Digital Publishing & Retail Services - Overview [EN]
Datamatics Digital Publishing & Retail Services - Overview [EN]
 
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'
Datamatics Award 2012 Griesheim 'Social Media: Hype - Realität - Nutzen'
 
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)
London Book Fair 2012: Thinking & Planning the EPUB 3 Way (Slides)
 
Datamatics Enhanced Content Billing
Datamatics Enhanced Content BillingDatamatics Enhanced Content Billing
Datamatics Enhanced Content Billing
 
APE 2012: Semantic Publishing - Just a Buzzword?
APE 2012: Semantic Publishing - Just a Buzzword?APE 2012: Semantic Publishing - Just a Buzzword?
APE 2012: Semantic Publishing - Just a Buzzword?
 
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012
Umfrage: Wie planen Zeitschriftenverlage in Deutschland für das Jahr 2012
 
Informatics Newsletter Verlage 2011-01
Informatics Newsletter Verlage 2011-01Informatics Newsletter Verlage 2011-01
Informatics Newsletter Verlage 2011-01
 

Último

Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...ssuserf63bd7
 
Memorándum de Entendimiento (MoU) entre Codelco y SQM
Memorándum de Entendimiento (MoU) entre Codelco y SQMMemorándum de Entendimiento (MoU) entre Codelco y SQM
Memorándum de Entendimiento (MoU) entre Codelco y SQMVoces Mineras
 
Cyber Security Training in Office Environment
Cyber Security Training in Office EnvironmentCyber Security Training in Office Environment
Cyber Security Training in Office Environmentelijahj01012
 
digital marketing , introduction of digital marketing
digital marketing , introduction of digital marketingdigital marketing , introduction of digital marketing
digital marketing , introduction of digital marketingrajputmeenakshi733
 
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfGUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfDanny Diep To
 
Environmental Impact Of Rotary Screw Compressors
Environmental Impact Of Rotary Screw CompressorsEnvironmental Impact Of Rotary Screw Compressors
Environmental Impact Of Rotary Screw Compressorselgieurope
 
Interoperability and ecosystems: Assembling the industrial metaverse
Interoperability and ecosystems:  Assembling the industrial metaverseInteroperability and ecosystems:  Assembling the industrial metaverse
Interoperability and ecosystems: Assembling the industrial metaverseSiemens
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamArik Fletcher
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdfShaun Heinrichs
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesDoe Paoro
 
14680-51-4.pdf Good quality CAS Good quality CAS
14680-51-4.pdf  Good  quality CAS Good  quality CAS14680-51-4.pdf  Good  quality CAS Good  quality CAS
14680-51-4.pdf Good quality CAS Good quality CAScathy664059
 
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxbusiness environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxShruti Mittal
 
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...SOFTTECHHUB
 
Data Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesData Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesAurelien Domont, MBA
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Jiastral oracle
 
Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Anamaria Contreras
 
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdf
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdftrending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdf
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdfMintel Group
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOne Monitar
 
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...Operational Excellence Consulting
 

Último (20)

Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
 
Memorándum de Entendimiento (MoU) entre Codelco y SQM
Memorándum de Entendimiento (MoU) entre Codelco y SQMMemorándum de Entendimiento (MoU) entre Codelco y SQM
Memorándum de Entendimiento (MoU) entre Codelco y SQM
 
Cyber Security Training in Office Environment
Cyber Security Training in Office EnvironmentCyber Security Training in Office Environment
Cyber Security Training in Office Environment
 
digital marketing , introduction of digital marketing
digital marketing , introduction of digital marketingdigital marketing , introduction of digital marketing
digital marketing , introduction of digital marketing
 
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfGUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
 
Environmental Impact Of Rotary Screw Compressors
Environmental Impact Of Rotary Screw CompressorsEnvironmental Impact Of Rotary Screw Compressors
Environmental Impact Of Rotary Screw Compressors
 
WAM Corporate Presentation April 12 2024.pdf
WAM Corporate Presentation April 12 2024.pdfWAM Corporate Presentation April 12 2024.pdf
WAM Corporate Presentation April 12 2024.pdf
 
Interoperability and ecosystems: Assembling the industrial metaverse
Interoperability and ecosystems:  Assembling the industrial metaverseInteroperability and ecosystems:  Assembling the industrial metaverse
Interoperability and ecosystems: Assembling the industrial metaverse
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management Team
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic Experiences
 
14680-51-4.pdf Good quality CAS Good quality CAS
14680-51-4.pdf  Good  quality CAS Good  quality CAS14680-51-4.pdf  Good  quality CAS Good  quality CAS
14680-51-4.pdf Good quality CAS Good quality CAS
 
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxbusiness environment micro environment macro environment.pptx
business environment micro environment macro environment.pptx
 
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...
How To Simplify Your Scheduling with AI Calendarfly The Hassle-Free Online Bo...
 
Data Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesData Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and Templates
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
 
Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.
 
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdf
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdftrending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdf
trending-flavors-and-ingredients-in-salty-snacks-us-2024_Redacted-V2.pdf
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
 
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
The McKinsey 7S Framework: A Holistic Approach to Harmonizing All Parts of th...
 

Interactivity in EPUB3 - #FBM12

  • 1. Using HTML5 and CSS3 features with JavaScript
  • 2. Introduction EPUB 3 offers many options achieving this interactivity using HTML5 features like Audio, Video, JavaScript, CSS3, etc.
  • 3. Interactivity . Interactivity in EPUB is achieved through the HTML5 and CSS3 with minimal JavaScript usage.
  • 4. Interactive types 1. Read Aloud 2. Interactive forms 3. Drag and Drop 4. Animations 5. Multimedia
  • 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>
  • 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.
  • 10. Drag and Drop •Achieved through HTML5 and JavaScript. •Not supported by some browsers using HTML5 and hence achieved Javascript coding
  • 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. 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