SlideShare a Scribd company logo
1 of 27
Download to read offline
ePUB 3 and
                       Publishing e-books
                              Kerem Karatal
                           CTO, Colligo Networks



                   http://www.colligo.com/company/careers/
Friday, April 13, 12
e-book Market
      $1,000


          $800


          $600


          $400


          $200



                       2002   2003   2004   2005       2006         2007        2008       2009   2010   2011
                                       Source: International Digital Publishing Forum

                                            http://idpf.org/about-us/industry-statistics



Friday, April 13, 12
e-book vs. Physical
                             Books




                       http://www.zdnet.com/blog/btl/e-book-sales-will-outpace-app-revenue-by-2013-says-yankee-group/44325

                                        http://www.nytimes.com/2011/05/20/technology/20amazon.html




Friday, April 13, 12
e-book Formats
                             Publisher                                Format

                          Apple iBooks                           ePUB3 + ADO

                               Amazon                       Mobi and new KF8

                        Barnes & Noble                                 ePUB2


                       http://pubit.barnesandnoble.com/pubit_app/bn?t=support
                       http://www.amazon.com/gp/feature.html?docId=1000729511
                       http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf



Friday, April 13, 12
What is ePUB?

                       • Current version is 3.0
                       • HTML5, CSS3, XHTML and XML
                       • Bundle of documents, media and
                         scripts
                       • Zipped with .epub extension


Friday, April 13, 12
ePUB File Format


                                            OEBPS                    META-INF



                              Media Files           ePUB Metadata   ePUB Metadata



          XHTML        CSS                             OPF             XML
                                                         NCX             ADO




Friday, April 13, 12
.opf File
                              Open Packaging Format

                       • Metadata
                         • Title, language, identifier ...
                       • Manifest
                         • List all files in the package
                       • Spine
                         • List all pages in linear reading order
                       • Guide (Deprecated was Optional before)
                         • Identifies key files in the book (cover, text)
                         • Use landmarks nav element
Friday, April 13, 12
Sample .opf File
      <package	
  version="2.0"	
  unique-­‐identifier="bookid"	
  xmlns:dc="http://purl.org/dc/elements/1.1/"	
  
      xmlns="http://www.idpf.org/2007/opf">
      	
    <metadata>
      	
    	
    <dc:title>A	
  new	
  book</dc:title>
      	
    	
    <dc:creator>A.	
  N.	
  Author</dc:creator>
      	
    	
    <dc:publisher>www.redjumper.net/bookcreator</dc:publisher>
      	
    	
    <dc:date>2012</dc:date>
      	
    	
    <dc:language>en</dc:language>
      	
    	
    <dc:identifier	
  id="bookid">http://www.redjumper.net/book/78DDE9A4-­‐
      D231-­‐42E6-­‐9935-­‐31FFB903CFA1</dc:identifier>
      	
    	
    <meta	
  name="cover"	
  content="imgcov"	
  />
      	
    </metadata>
      	
    <manifest>
      	
    	
    <item	
  id="ncx"	
  href="toc.ncx"	
  media-­‐type="application/x-­‐dtbncx+xml"	
  />
      	
    	
    <item	
  id="css"	
  href="styles.css"	
  media-­‐type="text/css"	
  />
      	
    	
    <item	
  id="pg000"	
  href="page000.xhtml"	
  media-­‐type="application/xhtml+xml"	
  />
      	
    	
    <item	
  id="pg001"	
  href="page001.xhtml"	
  media-­‐type="application/xhtml+xml"	
  />
      	
    	
    <item	
  id="imgcov"	
  href="Cover.jpg"	
  media-­‐type="image/jpeg"	
  />
      	
    </manifest>
      	
    <spine	
  toc="ncx">
      	
    	
    <itemref	
  idref="pg000"	
  />
      	
    	
    <itemref	
  idref="pg001"	
  />
      	
    </spine>
      	
    <guide>
      	
    	
    <reference	
  type="cover"	
  href="page000.xhtml"	
  />
      	
    	
    <reference	
  type="text"	
  href="page001.xhtml"	
  />
      	
    </guide>
      </package>

Friday, April 13, 12
.ncx File
                                Table of Contents



                       • Superseded by ePUB Navigation Docs
                         • A new valid XHTML format
                         • Most existing samples still use .ncx
                         • .ncx can live side by side



Friday, April 13, 12
Sample .ncx file

                       <ncx	
  version="2005-­‐1"	
  xmlns="http://www.daisy.org/
                       z3986/2005/ncx/">
                       	
   <docTitle>
                       	
   	
   <text>A	
  new	
  book</text>
                       	
   </docTitle>
                       	
   <navMap>
                       	
   	
   <navPoint	
  id="cover"	
  playOrder="1">
                       	
   	
   	
   <navLabel><text>Cover</text></navLabel>
                       	
   	
   	
   <content	
  src="page000.xhtml"	
  />
                       	
   	
   </navPoint>
                       	
   </navMap>
                       </ncx>




Friday, April 13, 12
New ePUB Navigation
                            Document
                        <nav	
  epub:type="toc"	
  id="toc">
                        	
  	
  <h1>Table	
  of	
  contents</h1>
                        	
  	
  <ol>
                        	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  <a	
  href="chap1.xhtml">Chapter	
  1</a>
                        	
  	
  	
  	
  	
  	
  <ol>
                        	
  	
  	
  	
  	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <a	
  href="chap1.xhtml#sec-­‐1.1">Chapter	
  1.1</a>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <ol	
  hidden="">
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <a	
  href="chap1.xhtml#sec-­‐1.1.1">Section	
  1.1.1</a>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  </li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <a	
  href="chap1.xhtml#sec-­‐1.1.2">Section	
  1.1.2</a>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  </li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  </ol>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  </li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <a	
  href="chap1.xhtml#sec-­‐1.2">Chapter	
  1.2</a>
                        	
  	
  	
  	
  	
  	
  	
  	
  	
  </li>
                        	
  	
  	
  	
  	
  	
  	
  </ol>
                        	
  	
  	
  	
  	
  </li>
                        	
  	
  	
  	
  <li>
                        	
  	
  	
  	
  	
  	
  <a	
  href="chap2.xhtml">Chapter	
  2</a>
                        	
  	
  	
  	
  </li>
                        	
  	
  </ol>
                        </nav>

Friday, April 13, 12
<guide> Replacement


                 <nav	
  epub:type="landmarks">
                 	
  	
  	
  	
  <h2>Guide</h2>
                 	
  	
  	
  	
  <ol>
                 	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  epub:type="toc"	
  href="#toc">Table	
  of	
  Contents</a></li>
                 	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  epub:type="loi"	
  href="content.html#loi">List	
  of	
  Illustrations</a></li>
                 	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  epub:type="bodymatter"	
  href="content.html#bodymatter">Start	
  of	
  Content</a></li>
                 	
  	
  	
  	
  </ol>
                 </nav>




Friday, April 13, 12
Flow Layout vs. Fixed
                              Layout
      Best format for text-heavy books, novels




                       Flow Layout               Fixed Layout
                                                  39




Friday, April 13, 12
Flow Layout Techniques
                                                 Best format for text-heavy books, novels
                       • Width in %, font size
                         ems

                       • Pseudo CSS Class
                         • :first-of-type
                       • Pseudo CSS Elements
                         • :first-line, :first-
                            letter, :before

                       • Embed Fonts             p.handwritten {
                                                    font-family: "LeagueScript"; }

                                                 @font-face {
                                                    font-family: "LeagueScript";
                                                    src: url(../fonts/LeagueScript.otf); }



Friday, April 13, 12
Fixed Layout Techniques
               • One XHTML doc per page, two
                       per spread

               • Images 1.5x intended display
                       size

         <head>
         <title>Fixed Layout Example</title>
         <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
         <meta content="text/html; charset=UTF-8"/>
              <meta name="viewport" content="width=800, height=600" />
         </head>


                              page01.xhtml

                   <display_options>
                     <platform name="*">
                       <option name="fixed-layout">true</option>
                     </platform>
                   </display_options>

                         Apple Display Options

Friday, April 13, 12
Non-Linear Docs
                <html>
                  <body>
                     ...
                        <a href="chart.xhtml">
                          <img src="images/chart.png"
                          alt="Chart"/>
                        </a>
                     ...
                  </body>
                </html>



                       Page.xhtml

                       <html>
                         <body>
                           <table></table>
                         </body>
                       </html>



                       Chart.xhtml

             <spine toc=”ncx”>
               ...
               <itemref idref="chart" linear="no" />
             </spine>



                         book.opf

Friday, April 13, 12
Read Aloud
                       Capture Audio




Friday, April 13, 12
Implement Read Aloud
                                                           <par id="par1">
                                                             <text src="page1.xhtml#word1"/>
                                                             <audio src="audio/page1.m4a" clipBegin="0.267029s" clipEnd="0.998458s" />
         <p>                                               </par>
                <span id="word1">Hello</span>
                <span id="word2">I</span>                  <par id="par2">
         </p>                                                <text src="page1.xhtml#word2"/>
                                                             <audio src="audio/page1.m4a" clipBegin="1.578957s" clipEnd="2.287166s" />
                                                           </par>



                       page1.xhtml                                               page1.smil


                                                .-epub-media-overlay-active {
                                                     color: orange;
                                                }


                                                              style.css

                               <manifest>
                                  ...
                                  <item id="mo-page1" href="page1.smil" media-type="application/smil+xml"/>
                                  <item id="narrat" href="audio/page1.m4a" media-type="audio/mpeg"/>
                                  <item id="page1" href="page1.xhtml" media-type="application/xhtml+xml" media-
                               overlay="mo-page1"/>
                                  ...
                                </manifest>



                                                              book.opf
Friday, April 13, 12
Embedding Javascript
                       • For animations use CSS3 if possible -
                            hardware accelerated
                       • epubReadingSystem object
                       • Content document needs to have
                            scripted property set in manifest
                                                                   <package>
                                                                   	
  	
  	
  	
  …
                                                                   	
  	
  	
  	
  <manifest>
                                                                   	
  	
  	
  	
  	
  	
  	
  	
  …
                  alert("Reading	
  System	
  name:	
  "	
  +      	
  	
  	
  	
  	
  	
  	
  	
  <item	
  id="chap01"	
  
                  	
  	
  	
  navigator.epubReadingSystem.name);   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  href="scripted01.xhtml"	
  
                                                                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  media-­‐type="application/xhtml+xml"
                                                                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  properties="scripted"/>

                          scripted01.xhtml                         	
  	
  	
  	
  </manifest>
                                                                   </package>

                                                                                                 book.opf

Friday, April 13, 12
Embedding Audio Video

                                       Standard HTML5 tags

                <video src="myvideo.m4v"
                                 <video src="myvideo.m4v"
                   controls="controls"
                                   controls="controls"

                   poster="posterimage.jpg"
                                   poster="posterimage.jpg"
                                   width="300" height="200"       />
                   width="300" height="200" />
                                       <audio src="myaudio.m4a"
                                         controls="controls"
                                         width="300" />
                <audio src="myaudio.m4a"
                   controls="controls"
                   width="300" />


                                                                       54




Friday, April 13, 12
A word about Mobi &
                                 KF8
                • KF8 is the new fixed
                       layout optimized format

                       • Kindle Fire uses it
                       • Almost ePUB3 with
                          restrictions

                • KindlePreviewer Tool
                • KindleGen command
                       line tool
                                                                 http://www.amazon.com/gp/feature.html?
                                                                        ie=UTF8&docId=1000234621

                • Convert from ePUB to           http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
                       Amazon formats

Friday, April 13, 12
A word about iBooks
                                Author
                       • Can insert Dashcode
                         widgets into HTML
                         widget (.wdgt)

                       • Proprietary layout in
                         HTML - under object
                         tags

                       • Almost impossible to
                         convert to non-iBooks
                         stores



Friday, April 13, 12
An iPad ePUB app

                       • Book Creator for iPad
                       • http://
                         www.redjumper.net/
                         bookcreator/

                       • Generates more
                         standards compliant
                         ePUB




Friday, April 13, 12
eBook Publishing
                           Services




                        http://www.booktango.com/


Friday, April 13, 12
Other ePUB tools
                       • Adobe Digital Publishing - ePUB 2
                         • New 1.8 version in labs - some
                           support for ePUB 3

                         • Nook uses ePUB 2
                       • Free Mac ePUB viewer - Ehon
                       • Readium.org -> Chrome Extension
                       • See Quora question for more:
                          http://www.quora.com/What-is-best-ePub-reader-for-Mac-OS
Friday, April 13, 12
Feature by Feature
                       Comparison of Readers




                          http://ibooksauthorguide.wordpress.com/




Friday, April 13, 12
Questions?


                       This talk is partially based on WWDC 2011
                                          session:
                        iBooks: Create Beautiful Books with HTML5, CSS3 and EPUB




Friday, April 13, 12

More Related Content

Viewers also liked

From XML to eBooks Part 2: The Details
From XML to eBooks Part 2: The DetailsFrom XML to eBooks Part 2: The Details
From XML to eBooks Part 2: The DetailsRichard Hamilton
 
EPUB3 First Look
EPUB3 First LookEPUB3 First Look
EPUB3 First Lookwhmccoy
 
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...Introduction to Digital Publishing for Children's Publishers, Writers and Ill...
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...Digital Publishing Forum NZ
 
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V Praze
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V PrazeZpusob Vyuky Marketingove Komunikace Na Pef Czu V Praze
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V PrazeVaclavSvec
 
Same Origin Policy Weaknesses
Same Origin Policy WeaknessesSame Origin Policy Weaknesses
Same Origin Policy Weaknesseskuza55
 
DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)Contrext Solutions
 
Techniky učení
Techniky učeníTechniky učení
Techniky učeníCEINVE
 
Paměťové techniky
Paměťové technikyPaměťové techniky
Paměťové technikyCEINVE
 
Sticky Keys to the Kingdom
Sticky Keys to the KingdomSticky Keys to the Kingdom
Sticky Keys to the KingdomDennis Maldonado
 
Evaluating and Selecting a Learning Management System
Evaluating and Selecting a Learning Management SystemEvaluating and Selecting a Learning Management System
Evaluating and Selecting a Learning Management SystemMonica Rysavy
 
SQL Server - Querying and Managing XML Data
SQL Server - Querying and Managing XML DataSQL Server - Querying and Managing XML Data
SQL Server - Querying and Managing XML DataMarek Maśko
 
TABLETS FOR TEXTBOOKS IN SCHOOL
TABLETS FOR TEXTBOOKS IN SCHOOLTABLETS FOR TEXTBOOKS IN SCHOOL
TABLETS FOR TEXTBOOKS IN SCHOOLQuimm Lee
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 

Viewers also liked (20)

ePub3 e Html5
ePub3 e Html5ePub3 e Html5
ePub3 e Html5
 
Edupub day2 tosho
Edupub day2 toshoEdupub day2 tosho
Edupub day2 tosho
 
sem016
sem016sem016
sem016
 
Down and Dirty EPUB 3
Down and Dirty EPUB 3Down and Dirty EPUB 3
Down and Dirty EPUB 3
 
ePub3 with PubCoder
ePub3 with PubCoderePub3 with PubCoder
ePub3 with PubCoder
 
From XML to eBooks Part 2: The Details
From XML to eBooks Part 2: The DetailsFrom XML to eBooks Part 2: The Details
From XML to eBooks Part 2: The Details
 
EPUB3 First Look
EPUB3 First LookEPUB3 First Look
EPUB3 First Look
 
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...Introduction to Digital Publishing for Children's Publishers, Writers and Ill...
Introduction to Digital Publishing for Children's Publishers, Writers and Ill...
 
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V Praze
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V PrazeZpusob Vyuky Marketingove Komunikace Na Pef Czu V Praze
Zpusob Vyuky Marketingove Komunikace Na Pef Czu V Praze
 
Same Origin Policy Weaknesses
Same Origin Policy WeaknessesSame Origin Policy Weaknesses
Same Origin Policy Weaknesses
 
DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)DITA, HTML5, and EPUB3 (Content Agility, June 2013)
DITA, HTML5, and EPUB3 (Content Agility, June 2013)
 
Techniky učení
Techniky učeníTechniky učení
Techniky učení
 
Paměťové techniky
Paměťové technikyPaměťové techniky
Paměťové techniky
 
Sticky Keys to the Kingdom
Sticky Keys to the KingdomSticky Keys to the Kingdom
Sticky Keys to the Kingdom
 
Search Engine Optimisation (SEO)
Search Engine Optimisation (SEO) Search Engine Optimisation (SEO)
Search Engine Optimisation (SEO)
 
Evaluating and Selecting a Learning Management System
Evaluating and Selecting a Learning Management SystemEvaluating and Selecting a Learning Management System
Evaluating and Selecting a Learning Management System
 
SQL Server - Querying and Managing XML Data
SQL Server - Querying and Managing XML DataSQL Server - Querying and Managing XML Data
SQL Server - Querying and Managing XML Data
 
TABLETS FOR TEXTBOOKS IN SCHOOL
TABLETS FOR TEXTBOOKS IN SCHOOLTABLETS FOR TEXTBOOKS IN SCHOOL
TABLETS FOR TEXTBOOKS IN SCHOOL
 
Windows 7 Security
Windows 7 SecurityWindows 7 Security
Windows 7 Security
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 

Similar to ePUB 3 and Publishing e-books

manifest file on SCORM 1.2
manifest file on SCORM 1.2manifest file on SCORM 1.2
manifest file on SCORM 1.2aureliomld
 
Getting started-with-oracle-so a-i
Getting started-with-oracle-so a-iGetting started-with-oracle-so a-i
Getting started-with-oracle-so a-iAmit Sharma
 
Getting started-with-oracle-so a-i
Getting started-with-oracle-so a-iGetting started-with-oracle-so a-i
Getting started-with-oracle-so a-iAmit Sharma
 
RDFa in ostala spletna semantika
RDFa in ostala spletna semantikaRDFa in ostala spletna semantika
RDFa in ostala spletna semantikaJure Cuhalev
 
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...buildacloud
 
Open writing-cloud-collab
Open writing-cloud-collabOpen writing-cloud-collab
Open writing-cloud-collabKaren Vuong
 
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1Marco Gralike
 
06 gioca-ontologies
06 gioca-ontologies06 gioca-ontologies
06 gioca-ontologiesnidzokus
 
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyEbook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyBookNet Canada
 
Is DITA Simple, Complex or Too Complex
Is DITA Simple, Complex or Too ComplexIs DITA Simple, Complex or Too Complex
Is DITA Simple, Complex or Too ComplexBluestream
 
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...BookNet Canada
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 PresentationUsman Saleem
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Emma Jane Hogbin Westby
 
Open Access Publishing on the Semantic Web
Open Access Publishing  on the  Semantic WebOpen Access Publishing  on the  Semantic Web
Open Access Publishing on the Semantic WebRichard Cave
 

Similar to ePUB 3 and Publishing e-books (20)

manifest file on SCORM 1.2
manifest file on SCORM 1.2manifest file on SCORM 1.2
manifest file on SCORM 1.2
 
Getting started-with-oracle-so a-i
Getting started-with-oracle-so a-iGetting started-with-oracle-so a-i
Getting started-with-oracle-so a-i
 
Getting started-with-oracle-so a-i
Getting started-with-oracle-so a-iGetting started-with-oracle-so a-i
Getting started-with-oracle-so a-i
 
RDFa in ostala spletna semantika
RDFa in ostala spletna semantikaRDFa in ostala spletna semantika
RDFa in ostala spletna semantika
 
Chapter4
Chapter4Chapter4
Chapter4
 
Introduction to xml
Introduction to xmlIntroduction to xml
Introduction to xml
 
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...
Open Writing! Collaborative Authoring for CloudStack Documentation by Jessica...
 
Open writing-cloud-collab
Open writing-cloud-collabOpen writing-cloud-collab
Open writing-cloud-collab
 
Web page concept Basic
Web page concept  BasicWeb page concept  Basic
Web page concept Basic
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
Xml
XmlXml
Xml
 
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1
OPP2010 (Brussels) - Programming with XML in PL/SQL - Part 1
 
06 gioca-ontologies
06 gioca-ontologies06 gioca-ontologies
06 gioca-ontologies
 
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyEbook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
 
Is DITA Simple, Complex or Too Complex
Is DITA Simple, Complex or Too ComplexIs DITA Simple, Complex or Too Complex
Is DITA Simple, Complex or Too Complex
 
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...
Metadata Beyond ONIX: How Publishers can use Different Metadata Formats Throu...
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 Presentation
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
 
Understanding XML DOM
Understanding XML DOMUnderstanding XML DOM
Understanding XML DOM
 
Open Access Publishing on the Semantic Web
Open Access Publishing  on the  Semantic WebOpen Access Publishing  on the  Semantic Web
Open Access Publishing on the Semantic Web
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

ePUB 3 and Publishing e-books

  • 1. ePUB 3 and Publishing e-books Kerem Karatal CTO, Colligo Networks http://www.colligo.com/company/careers/ Friday, April 13, 12
  • 2. e-book Market $1,000 $800 $600 $400 $200 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Source: International Digital Publishing Forum http://idpf.org/about-us/industry-statistics Friday, April 13, 12
  • 3. e-book vs. Physical Books http://www.zdnet.com/blog/btl/e-book-sales-will-outpace-app-revenue-by-2013-says-yankee-group/44325 http://www.nytimes.com/2011/05/20/technology/20amazon.html Friday, April 13, 12
  • 4. e-book Formats Publisher Format Apple iBooks ePUB3 + ADO Amazon Mobi and new KF8 Barnes & Noble ePUB2 http://pubit.barnesandnoble.com/pubit_app/bn?t=support http://www.amazon.com/gp/feature.html?docId=1000729511 http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf Friday, April 13, 12
  • 5. What is ePUB? • Current version is 3.0 • HTML5, CSS3, XHTML and XML • Bundle of documents, media and scripts • Zipped with .epub extension Friday, April 13, 12
  • 6. ePUB File Format OEBPS META-INF Media Files ePUB Metadata ePUB Metadata XHTML CSS OPF XML NCX ADO Friday, April 13, 12
  • 7. .opf File Open Packaging Format • Metadata • Title, language, identifier ... • Manifest • List all files in the package • Spine • List all pages in linear reading order • Guide (Deprecated was Optional before) • Identifies key files in the book (cover, text) • Use landmarks nav element Friday, April 13, 12
  • 8. Sample .opf File <package  version="2.0"  unique-­‐identifier="bookid"  xmlns:dc="http://purl.org/dc/elements/1.1/"   xmlns="http://www.idpf.org/2007/opf">   <metadata>     <dc:title>A  new  book</dc:title>     <dc:creator>A.  N.  Author</dc:creator>     <dc:publisher>www.redjumper.net/bookcreator</dc:publisher>     <dc:date>2012</dc:date>     <dc:language>en</dc:language>     <dc:identifier  id="bookid">http://www.redjumper.net/book/78DDE9A4-­‐ D231-­‐42E6-­‐9935-­‐31FFB903CFA1</dc:identifier>     <meta  name="cover"  content="imgcov"  />   </metadata>   <manifest>     <item  id="ncx"  href="toc.ncx"  media-­‐type="application/x-­‐dtbncx+xml"  />     <item  id="css"  href="styles.css"  media-­‐type="text/css"  />     <item  id="pg000"  href="page000.xhtml"  media-­‐type="application/xhtml+xml"  />     <item  id="pg001"  href="page001.xhtml"  media-­‐type="application/xhtml+xml"  />     <item  id="imgcov"  href="Cover.jpg"  media-­‐type="image/jpeg"  />   </manifest>   <spine  toc="ncx">     <itemref  idref="pg000"  />     <itemref  idref="pg001"  />   </spine>   <guide>     <reference  type="cover"  href="page000.xhtml"  />     <reference  type="text"  href="page001.xhtml"  />   </guide> </package> Friday, April 13, 12
  • 9. .ncx File Table of Contents • Superseded by ePUB Navigation Docs • A new valid XHTML format • Most existing samples still use .ncx • .ncx can live side by side Friday, April 13, 12
  • 10. Sample .ncx file <ncx  version="2005-­‐1"  xmlns="http://www.daisy.org/ z3986/2005/ncx/">   <docTitle>     <text>A  new  book</text>   </docTitle>   <navMap>     <navPoint  id="cover"  playOrder="1">       <navLabel><text>Cover</text></navLabel>       <content  src="page000.xhtml"  />     </navPoint>   </navMap> </ncx> Friday, April 13, 12
  • 11. New ePUB Navigation Document <nav  epub:type="toc"  id="toc">    <h1>Table  of  contents</h1>    <ol>        <li>            <a  href="chap1.xhtml">Chapter  1</a>            <ol>                <li>                    <a  href="chap1.xhtml#sec-­‐1.1">Chapter  1.1</a>                    <ol  hidden="">                        <li>                            <a  href="chap1.xhtml#sec-­‐1.1.1">Section  1.1.1</a>                        </li>                        <li>                            <a  href="chap1.xhtml#sec-­‐1.1.2">Section  1.1.2</a>                        </li>                    </ol>                  </li>                  <li>                      <a  href="chap1.xhtml#sec-­‐1.2">Chapter  1.2</a>                  </li>              </ol>          </li>        <li>            <a  href="chap2.xhtml">Chapter  2</a>        </li>    </ol> </nav> Friday, April 13, 12
  • 12. <guide> Replacement <nav  epub:type="landmarks">        <h2>Guide</h2>        <ol>                <li><a  epub:type="toc"  href="#toc">Table  of  Contents</a></li>                <li><a  epub:type="loi"  href="content.html#loi">List  of  Illustrations</a></li>                <li><a  epub:type="bodymatter"  href="content.html#bodymatter">Start  of  Content</a></li>        </ol> </nav> Friday, April 13, 12
  • 13. Flow Layout vs. Fixed Layout Best format for text-heavy books, novels Flow Layout Fixed Layout 39 Friday, April 13, 12
  • 14. Flow Layout Techniques Best format for text-heavy books, novels • Width in %, font size ems • Pseudo CSS Class • :first-of-type • Pseudo CSS Elements • :first-line, :first- letter, :before • Embed Fonts p.handwritten { font-family: "LeagueScript"; } @font-face { font-family: "LeagueScript"; src: url(../fonts/LeagueScript.otf); } Friday, April 13, 12
  • 15. Fixed Layout Techniques • One XHTML doc per page, two per spread • Images 1.5x intended display size <head> <title>Fixed Layout Example</title> <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/> <meta content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=800, height=600" /> </head> page01.xhtml <display_options> <platform name="*"> <option name="fixed-layout">true</option> </platform> </display_options> Apple Display Options Friday, April 13, 12
  • 16. Non-Linear Docs <html> <body> ... <a href="chart.xhtml"> <img src="images/chart.png" alt="Chart"/> </a> ... </body> </html> Page.xhtml <html> <body> <table></table> </body> </html> Chart.xhtml <spine toc=”ncx”> ... <itemref idref="chart" linear="no" /> </spine> book.opf Friday, April 13, 12
  • 17. Read Aloud Capture Audio Friday, April 13, 12
  • 18. Implement Read Aloud <par id="par1"> <text src="page1.xhtml#word1"/> <audio src="audio/page1.m4a" clipBegin="0.267029s" clipEnd="0.998458s" /> <p> </par> <span id="word1">Hello</span> <span id="word2">I</span> <par id="par2"> </p> <text src="page1.xhtml#word2"/> <audio src="audio/page1.m4a" clipBegin="1.578957s" clipEnd="2.287166s" /> </par> page1.xhtml page1.smil .-epub-media-overlay-active { color: orange; } style.css <manifest> ... <item id="mo-page1" href="page1.smil" media-type="application/smil+xml"/> <item id="narrat" href="audio/page1.m4a" media-type="audio/mpeg"/> <item id="page1" href="page1.xhtml" media-type="application/xhtml+xml" media- overlay="mo-page1"/> ... </manifest> book.opf Friday, April 13, 12
  • 19. Embedding Javascript • For animations use CSS3 if possible - hardware accelerated • epubReadingSystem object • Content document needs to have scripted property set in manifest <package>        …        <manifest>                … alert("Reading  System  name:  "  +                <item  id="chap01"        navigator.epubReadingSystem.name);                        href="scripted01.xhtml"                          media-­‐type="application/xhtml+xml"                        properties="scripted"/> scripted01.xhtml        </manifest> </package> book.opf Friday, April 13, 12
  • 20. Embedding Audio Video Standard HTML5 tags <video src="myvideo.m4v" <video src="myvideo.m4v" controls="controls" controls="controls" poster="posterimage.jpg" poster="posterimage.jpg" width="300" height="200" /> width="300" height="200" /> <audio src="myaudio.m4a" controls="controls" width="300" /> <audio src="myaudio.m4a" controls="controls" width="300" /> 54 Friday, April 13, 12
  • 21. A word about Mobi & KF8 • KF8 is the new fixed layout optimized format • Kindle Fire uses it • Almost ePUB3 with restrictions • KindlePreviewer Tool • KindleGen command line tool http://www.amazon.com/gp/feature.html? ie=UTF8&docId=1000234621 • Convert from ePUB to http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf Amazon formats Friday, April 13, 12
  • 22. A word about iBooks Author • Can insert Dashcode widgets into HTML widget (.wdgt) • Proprietary layout in HTML - under object tags • Almost impossible to convert to non-iBooks stores Friday, April 13, 12
  • 23. An iPad ePUB app • Book Creator for iPad • http:// www.redjumper.net/ bookcreator/ • Generates more standards compliant ePUB Friday, April 13, 12
  • 24. eBook Publishing Services http://www.booktango.com/ Friday, April 13, 12
  • 25. Other ePUB tools • Adobe Digital Publishing - ePUB 2 • New 1.8 version in labs - some support for ePUB 3 • Nook uses ePUB 2 • Free Mac ePUB viewer - Ehon • Readium.org -> Chrome Extension • See Quora question for more: http://www.quora.com/What-is-best-ePub-reader-for-Mac-OS Friday, April 13, 12
  • 26. Feature by Feature Comparison of Readers http://ibooksauthorguide.wordpress.com/ Friday, April 13, 12
  • 27. Questions? This talk is partially based on WWDC 2011 session: iBooks: Create Beautiful Books with HTML5, CSS3 and EPUB Friday, April 13, 12