Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides


Published on

A critical element of the e-book marketplace is a common file structure that is agreed upon between content creators and the supply chain, and works with multiple reader technologies. The newly …

A critical element of the e-book marketplace is a common file structure that is agreed upon between content creators and the supply chain, and works with multiple reader technologies. The newly released EPUB 3 specification offers a number of major innovations over the previous version, including support for rich media, interactivity, global language support), and styling and layout enhancements. EPUB 3 is also tightly integrated to web standards. This includes HTML 5, which is still in draft. Yet HTML5 is already in use for app development on the iPad and other mobile devices. This webinar will provide a discussion of both of these standards and their use for creating rich, cross-platform e-books.

-Bill Kasdorf, Vice President, Apex Content Solutions; Metadata Subgroup Lead, IDPF EPUB 3 Working Group
-Sanders Kleinfeld, Publishing Technologies Specialist, O'Reilly Media

Published in: Technology, Business

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Critical Elements ofE-books: Standards for Formatting and MetadataPart 1: EPUB3: Putting Electronic Books into a Package March 14, 2012 Speakers: Bill Kasdorf and Sanders Kleinfeld
  • 2. Adding Interactivity to Ebooks with HTML5 Sanders Kleinfeld
  • 3. Ebook Production =Developing Content for a Multitude of Screens… eInk Color Tablet Desktop Browser
  • 4. …Via many formats, technologies, and software toolsEPUB 2.0.1 CSS Mobi NCX epubpreflight DRM fixed layout regex JS KF8 .iba epubcheck oXygenOPF sigil EPUB 3 kindlegen XSL masochism
  • 5. HTML5
  • 6. HTML5: New elements ( Multimedia/Interactivity:<article> <audio><aside> <canvas><header> <embed><hgroup> <source><footer> <track><figure> <video><figcaption><nav><section>
  • 7. HTML5: New elements (continued) ( <input> types: Miscellaneous:color <bdi>date <command>datetime <datalist>datetime-local <details>email <keygen>month <mark>number <meter>range <output>search <progress>tel <summary>time <rp>url <rt>week <ruby> <time> <wbr>
  • 8. What is HTML5, really?A constellation of technologies
  • 9. Canvas Audio/Video Geolocation CSS3
  • 10. When people say "HTML5," theyre usually referring web sites that include one or more of thefollowing:• Embedded audio/video media without resorting to Flash or other plugins• Native interactivity/animation/games without resorting to Flash or other plugins• Geolocation functionality• Sites with local storage that you can download and run offline• Fancy CSS3: columns, text shadows, animations...• Native support for MathML and SVG• Semantic markup
  • 11. HTML5 in Action on the Web
  • 12. Why should publishers care about HTML5?
  • 13. HTML5 is the Backbone of the EPUB 3 StandardThe EPUB 3.0 specification for ebooks mandates that contentdocuments use XHTML (HTML5) syntax: most major ereaders do not formally support EPUB 3,many HTML5 features are currently supported by the followingplatforms:• iBooks for iPad, iPhone, iPod• NOOK Color/Tablet• Kindle Fire• Kindle Apps (iPhone/iPad/Android/etc.)• Safari Books Online
  • 14. HTML5 in action in ebooks
  • 15. HTML5 Canvas for PublishersCanvas allows you to embed a dynamic sketchpad in yourcontent:<canvas id="my_first_canvas" width="200"height="225">The content you put here will show up if yourrendering engine doesnt support the&lt;canvas&gt; element.</canvas>
  • 16. You draw on the <canvas> with JavaScript my_canvas.strokeRect(0,0,200,225) // to start, draw a border around the canvas//draw face my_canvas.beginPath(); my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensionsmy_canvas.strokeStyle = "black"; // circle outline is blackmy_canvas.lineWidth = 3; // outline is three pixels widemy_canvas.fillStyle = "yellow"; // fill circle with yellowmy_canvas.stroke(); // draw circlemy_canvas.fill(); // fill in circlemy_canvas.closePath();// now, draw left eyemy_canvas.fillStyle = "black"; // switch to black for the fillmy_canvas.beginPath(); my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensionsmy_canvas.stroke(); // draw circlemy_canvas.fill(); // fill in circlemy_canvas.closePath();// now, draw right eyemy_canvas.beginPath(); my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensionsmy_canvas.stroke(); // draw circlemy_canvas.fill(); // fill in circlemy_canvas.closePath();// draw smile my_canvas.lineWidth = 6; // switch to six pixels wide for outline my_canvas.beginPath(); my_canvas.arc(99, 120, 35, (Math.PI/180)*0, (Math.PI/180)*-180, false); // semicircle dimensionsmy_canvas.stroke();my_canvas.closePath();// Smiley Speaks!my_canvas.fillStyle = "black"; // switch to black for text fill
  • 17. The result...
  • 18. But Canvas is all about interactivity...You can dynamically update whats displayed on the canvas inreal time, and in response to user input, which opens the door toanimations, games, and more.
  • 19. Canvas in Action: Graphing Calculator
  • 20. Canvas in Action II: Finger Painting
  • 21. Geolocation for PublishersThe W3C Geolocation API ( provides a simple way of getting a userslatitude/longitude coordinates:navigator.geolocation.getCurrentPosition(callback_function)Where callback_functionis a function you define to receive and process thelatitude/longitude data.
  • 22. Geolocation’s value in ebooks• Interactive Atlas, Road Maps• Travel/Restaurant guides customized for user’s location• Geolocated fiction• Geolocation-based games (geocaching, scavenger hunt)
  • 23. Geolocation in Action: A Geolocated Tale Before...
  • 24. Geolocation in Action: A Geolocated Tale After...
  • 25. Audio/Video for Publishers HTML5 lets you embed audio/video directly in your content without any plugins needed:<audio id="new_slang"> <video id="dancing_pony" width="300"<source src="new_slang.wav" height="300">type="audio/wav"/> <source src="dancing_pony.mp4"<source src="new_slang.mp3" type="video/mp4"/>type="audio/mp3"/> <source src="dancing_pony.ogg"<source src="new_slang.ogg" type="video/ogg"/>type="audio/ogg"/> <em>(Sorry, &lt;video&gt; element not <em>(Sorry, &lt;audio&gt; element not supported in your browser/ereader, sosupported in your browser/ereader, so you you will not be able to watch thiswill not be able to listen to this video.)</em>song.)</em> </video></audio>
  • 26. Audio/Video Compatibility Woes (via Wikipedia)<audio> support in Browsers(<video> support in Browsers(
  • 27. Ereader Audio/Video Compatibility ReduxFor audio, use MP3. It works on:• iBooks• NOOK Color/Tablet• Kindle software readers (iPad/iPhone/Android/etc.)For video, use H.264/MP4. It works on:• iBooks• NOOK Color/Tablet• Kindle software readers (iPad/iPhone/Android/etc.)
  • 28. Audio in Action:Audio-Enabled Glossary
  • 29. Video in Action: A Clip About <canvas>
  • 30. MathML for Publishers• MathML is an XML vocabulary for representing mathematical expressions.• MathML provides both Presentation and Content Markup models.• Presentation markup tags math expressions based on how they should be displayed (e.g., “superscripted 2”).• Content markuptags expressions based on the mathematical operations performed (e.g., “taken to the 2nd power”)• The HTML5 specification provides native support for MathML in HTML documents
  • 31. MathML Presentation Markup Glossary (abridged edition)• <math> -- Root element for a mathematical expression• <mrow> -- Element for grouping subexpressions• <mo> -- Math operator (e.g., +, -)• <mi> -- Math identifier (e.g., variable or constant)• <mn> -- Number• <mfrac> -- Fraction• <msqrt> -- Square root• <msup> -- Superscript• <msub> -- Subscript• <mfenced> -- Parentheses or braces
  • 32. Convert a Famous Equation to MathML!
  • 33. But why write all this markup:<math xmlns=""><mstyledisplaystyle="true"><mi> E </mi><mo> = </mo><mi>m</mi><msup><mrow><mi> c </mi></mrow><mrow><mn> 2 </mn></mrow></msup></mstyle></math>When you can just embed the equation as an image?
  • 34. Advantages of Using MathML Instead of Images:• Equations are resizable, like text• Equations can be styled with CSS• Equations can be interacted with using JavaScript
  • 35. MathML in Action:Quadratic Equation Solver
  • 36. HTML5 support in today’s ereaders <canvas> Geolocation <audio> <video> MathMLiBooks 1.x YES Sort of* YES YES YESNOOK NO NO YES YES NOColor/TabletSafari Books YES YES YES YES YESOnlineKindle Apps NO NO YES YES NOKindle Fire NO NO NO NO NO * iBooks 1.x supports Geolocation API, but does not support calls to related APIs (Google Maps, GeoNames, etc.)
  • 37. Download HTML5 for Publishers:
  • 38. Contact Me!Email: Twitter: @sandersk