http://www.niso.org/news/events/2012/nisowebinars/ebooks_epub3/Understanding Critical Elements ofE-books: Standards for Fo...
Adding Interactivity to Ebooks        with HTML5      Sanders Kleinfeld
Ebook Production =Developing Content for a Multitude of            Screens…   eInk       Color Tablet   Desktop Browser
…Via many formats, technologies,      and software toolsEPUB 2.0.1                CSS          Mobi                NCX    ...
HTML5
HTML5: New elements          (http://www.w3.org/TR/html5-diff/#new-elements)Navigation:                        Multimedia/...
HTML5: New elements (continued)             (http://www.w3.org/TR/html5-diff/#new-elements)New <input> types:             ...
What is HTML5, really?A constellation of technologies
Canvas                 Audio/Video         Geolocation                 CSS3
When people say "HTML5," theyre         usually referring to......next-generation web sites that include one or more of th...
HTML5 in Action on the Web
Why should publishers care     about HTML5?
HTML5 is the Backbone of the            EPUB 3 StandardThe EPUB 3.0 specification for ebooks mandates that contentdocument...
HTML5 in action in ebooks
HTML5 Canvas for PublishersCanvas allows you to embed a dynamic sketchpad in yourcontent:<canvas id="my_first_canvas" widt...
You draw on the <canvas> with JavaScript   my_canvas.strokeRect(0,0,200,225) // to start, draw a border around the canvas/...
The result...
But Canvas is all about interactivity...You can dynamically update whats displayed on the canvas inreal time, and in respo...
Canvas in Action: Graphing Calculator       http://bit.ly/canvascalc
Canvas in Action II: Finger Painting  http://bit.ly/canvasfingerpaint
Geolocation for PublishersThe W3C Geolocation API (http://dev.w3.org/geo/api/spec-source.html) provides a simple way of ge...
Geolocation’s value in ebooks•   Interactive Atlas, Road Maps•   Travel/Restaurant guides customized for user’s location• ...
Geolocation in Action:    A Geolocated Talehttp://bit.ly/geolocatedtale          Before...
Geolocation in Action:    A Geolocated Talehttp://bit.ly/geolocatedtale           After...
Audio/Video for Publishers HTML5 lets you embed audio/video directly in your content without any plugins needed:<audio id=...
Audio/Video Compatibility Woes                            (via Wikipedia)<audio> support in Browsers(http://en.wikipedia.o...
Ereader Audio/Video              Compatibility ReduxFor audio, use MP3. It works on:• iBooks• NOOK Color/Tablet• Kindle so...
Audio in Action:Audio-Enabled Glossaryhttp://bit.ly/miniglossary
Video in Action: A Clip About <canvas>http://bit.ly/ormcanvasvid
MathML for Publishers• MathML is an XML vocabulary for representing mathematical  expressions.• MathML provides both Prese...
MathML Presentation Markup Glossary         (abridged edition)•   <math> -- Root element for a mathematical expression•   ...
Convert a Famous Equation to MathML!      http://bit.ly/mathconverter
But why write all this markup:<math xmlns="http://www.w3.org/1998/Math/MathML"><mstyledisplaystyle="true"><mi> E </mi><mo>...
Advantages of Using MathML         Instead of Images:• Equations are resizable, like text• Equations can be styled with CS...
MathML in Action:Quadratic Equation Solver   http://bit.ly/mathml
HTML5 support in today’s             ereaders               <canvas>       Geolocation     <audio>         <video>        ...
Download HTML5 for Publishers: http://bit.ly/html5forpubs
Contact Me!Email: sanders@oreilly.com   Twitter: @sandersk
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
NISO Webinar: E-books (Part 1) EPUB3: Putting Electronic Books into a Package (March 14, 2012): Presentation Slides
Upcoming SlideShare
Loading in …5
×

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

1,370 views

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 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.

Speakers:
-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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,370
On SlideShare
0
From Embeds
0
Number of Embeds
511
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. http://www.niso.org/news/events/2012/nisowebinars/ebooks_epub3/Understanding 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. 2. Adding Interactivity to Ebooks with HTML5 Sanders Kleinfeld
  3. 3. Ebook Production =Developing Content for a Multitude of Screens… eInk Color Tablet Desktop Browser
  4. 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. 5. HTML5
  6. 6. HTML5: New elements (http://www.w3.org/TR/html5-diff/#new-elements)Navigation: Multimedia/Interactivity:<article> <audio><aside> <canvas><header> <embed><hgroup> <source><footer> <track><figure> <video><figcaption><nav><section>
  7. 7. HTML5: New elements (continued) (http://www.w3.org/TR/html5-diff/#new-elements)New <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. 8. What is HTML5, really?A constellation of technologies
  9. 9. Canvas Audio/Video Geolocation CSS3
  10. 10. When people say "HTML5," theyre usually referring to......next-generation 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. 11. HTML5 in Action on the Web
  12. 12. Why should publishers care about HTML5?
  13. 13. HTML5 is the Backbone of the EPUB 3 StandardThe EPUB 3.0 specification for ebooks mandates that contentdocuments use XHTML (HTML5) syntax:http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtmlWhile 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. 14. HTML5 in action in ebooks
  15. 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. 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. 17. The result...
  18. 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. 19. Canvas in Action: Graphing Calculator http://bit.ly/canvascalc
  20. 20. Canvas in Action II: Finger Painting http://bit.ly/canvasfingerpaint
  21. 21. Geolocation for PublishersThe W3C Geolocation API (http://dev.w3.org/geo/api/spec-source.html) 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. 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. 23. Geolocation in Action: A Geolocated Talehttp://bit.ly/geolocatedtale Before...
  24. 24. Geolocation in Action: A Geolocated Talehttp://bit.ly/geolocatedtale After...
  25. 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. 26. Audio/Video Compatibility Woes (via Wikipedia)<audio> support in Browsers(http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support)<video> support in Browsers(http://en.wikipedia.org/wiki/HTML5_video#Table)
  27. 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. 28. Audio in Action:Audio-Enabled Glossaryhttp://bit.ly/miniglossary
  29. 29. Video in Action: A Clip About <canvas>http://bit.ly/ormcanvasvid
  30. 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. 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. 32. Convert a Famous Equation to MathML! http://bit.ly/mathconverter
  33. 33. But why write all this markup:<math xmlns="http://www.w3.org/1998/Math/MathML"><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. 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. 35. MathML in Action:Quadratic Equation Solver http://bit.ly/mathml
  36. 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. 37. Download HTML5 for Publishers: http://bit.ly/html5forpubs
  38. 38. Contact Me!Email: sanders@oreilly.com Twitter: @sandersk

×