1. HTML5 for Publishers Sanders Kleinfeld

2. My Seven-Year Journey from Traditional Print Production to Ebook Production… …in two slides

3. My Desk in 2004 (a reenactment)

4. My Desk in 2012 (this is progress?)

5. Ebook Production = Developing Content for a Multitude of Screens… eInk Color Tablet Desktop Browser

6. …Via many formats, technologies, and software tools EPUB 2.0.1 EPUB 3 KF8 Mobi fixed layout OPF.iba NCX kindlegen epubcheck DRM epubpreflight masochism sigil regex oXygen XSL CSS JS

7. HTML5

8. HTML5: New elements (http://www.w3.org/TR/html5-diff/#new-elements)http://www.w3.org/TR/html5-diff/#new-elements Navigation: Multimedia/Interactivity:

9. HTML5: New elements (continued) (http://www.w3.org/TR/html5-diff/#new-elements)http://www.w3.org/TR/html5-diff/#new-elements New types: color date datetime datetime-local email month number range search tel time url week Miscellaneous:

10. What is HTML5, really? A constellation of technologies

11. Canvas Geolocation Audio/Video CSS3

12. When people say "HTML5," they're usually referring to......next-generation web sites that include one or more of the following: 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

13. HTML5 in Action on the Web

14. Why should publishers care about HTML5?

15. HTML5 is the Backbone of the EPUB 3 Standard The EPUB 3.0 specification for ebooks mandates that content documents use XHTML (HTML5) syntax: http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml While most major ereaders do not formally support EPUB 3, many HTML5 features are currently supported by the following platforms: iBooks for iPad, iPhone, iPod NOOK Color/Tablet Kindle Fire Kindle Apps (iPhone/iPad/Android/etc.) Safari Books Online

16. HTML5 in action in ebooks

17. HTML5 Canvas for Publishers Canvas allows you to embed a dynamic sketchpad in your content: The content you put here will show up if your rendering engine doesn't support the <canvas> element.

18. You draw on the 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 dimensions my_canvas.strokeStyle = "black"; // circle outline is black my_canvas.lineWidth = 3; // outline is three pixels wide my_canvas.fillStyle = "yellow"; // fill circle with yellow my_canvas.stroke(); // draw circle my_canvas.fill(); // fill in circle my_canvas.closePath(); // now, draw left eye my_canvas.fillStyle = "black"; // switch to black for the fill my_canvas.beginPath(); my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions my_canvas.stroke(); // draw circle my_canvas.fill(); // fill in circle my_canvas.closePath(); // now, draw right eye my_canvas.beginPath(); my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions my_canvas.stroke(); // draw circle my_canvas.fill(); // fill in circle my_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 dimensions my_canvas.stroke(); my_canvas.closePath(); // Smiley Speaks! my_canvas.fillStyle = "black"; // switch to black for text fill my_canvas.font = '20px _sans'; // use 20 pixel sans serif font my_canvas.fillText ("Hello Canvas!", 45, 200); // write text

19. The result...

20. But Canvas is all about interactivity... You can dynamically update what's displayed on the canvas in real time, and in response to user input, which opens the door to animations, games, and more.

21. Canvas in Action: Graphing Calculator http://bit.ly/canvascalc http://bit.ly/canvascalc

22. Canvas in Action II: Finger Painting http://bit.ly/canvasfingerpaint http://bit.ly/canvasfingerpaint

23. Geolocation for Publishers The W3C Geolocation API (http://dev.w3.org/geo/api/spec-source.html) provides a simple way of getting a user's latitude/longitude coordinates:http://dev.w3.org/geo/api/spec-source.html navigator.geolocation.getCurrentPosition(callback_function) Where callback_function is a function you define to receive and process the latitude/longitude data.

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

25. Geolocation in Action: A Geolocated Tale http://bit.ly/geolocatedtale http://bit.ly/geolocatedtale Before...

26. Geolocation in Action: A Geolocated Tale http://bit.ly/geolocatedtale http://bit.ly/geolocatedtale After...

27. Audio/Video for Publishers HTML5 lets you embed audio/video directly in your content without any plugins needed: (Sorry, <audio> element not supported in your browser/ereader, so you will not be able to listen to this song.) (Sorry, <video> element not supported in your browser/ereader, so you will not be able to watch this video.)

28. Audio/Video Compatibility Woes (via Wikipedia) support in Browsers (http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support)http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support support in Browsers (http://en.wikipedia.org/wiki/HTML5_video#Table)http://en.wikipedia.org/wiki/HTML5_video#Table

29. Ereader Audio/Video Compatibility Redux For 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.)

30. Audio in Action: Audio-Enabled Glossary http://bit.ly/miniglossary http://bit.ly/miniglossary

31. Video in Action: A Clip About http://bit.ly/ormcanvasvid http://bit.ly/ormcanvasvid

32. 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 markup tags expressions based on the mathematical operations performed (e.g., “taken to the 2 nd power”) The HTML5 specification provides native support for MathML in HTML documents

33. MathML Presentation Markup Glossary (abridged edition) -- Root element for a mathematical expression -- Element for grouping subexpressions -- Math operator (e.g., +, -) -- Math identifier (e.g., variable or constant) -- Number -- Fraction -- Square root -- Superscript -- Subscript -- Parentheses or braces

34. Convert a Famous Equation to MathML! http://bit.ly/mathconverter http://bit.ly/mathconverter

35. But why write all this markup: E = m c 2 When you can just embed the equation as an image?

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

37. MathML in Action: Quadratic Equation Solver http://bit.ly/mathml http://bit.ly/mathml

38. CSS3: A Four-Bullet Overview CSS3 offers some great new features for styling content, including animations, rounded corners, text shadows, and transitions. CSS3 specifications are separate from HTML5, and many features are still in the earliest Working Draft (WD) phase: http://www.w3.org/Style/CSS/current-work http://www.w3.org/Style/CSS/current-work CSS3 support varies by Web browser Many CSS3 properties are supported in browsers only when prepended with proprietary extensions: -webkit- (Google Chrome and Safari), -moz- (Firefox), -o- (Opera), -ms- (Internet Explorer)

39. CSS3: Compatibility Woes http://www.w3schools.com/cssref/css3_browsersupport.asp http://www.w3schools.com/cssref/css3_browsersupport.asp

40. (e)Book Production Pop Quiz (featuring CSS3 Transitions)

41. Take the Quiz Yourself http://bit.ly/pop_quiz http://bit.ly/pop_quiz

42. OH NOEZ! MAH EREADR DOESNT SUPPORT CSS3 OR JAVASCRIPT http://www.flickr.com/photos/eiriknewth/4944889740/

43. When designing interactive content for a diverse ereader ecosystem, think about implementing fallbacks, especially for the following features: MathML Geolocation CSS3 JavaScript

44. Fallbacks Part I: CSS and JS “Same ebook file, different instructions” Adobe Digital Editions: No JS support iBooks: Full functionality

45. How to Do This: 1.Use @class attributes on HTML elements to designate interactive vs. fallback: 2.Define CSS to suppress “interactive” elements by default: 3.Use JS to toggle “interactive” elements on and “fallback” elements off in browsers that support scripting: Display me in ereaders that support JS Display me instead if no JS support 1.Use @class attributes on HTML elements to designate interactive vs. fallback:.interactive { display: none } function toggleInteractiveContent() { // Select elements with ”fallback” on them, and hide them $(".fallback").css("display", "none"); // Select elements with "interactive”, and delete @class to make them appear $(".interactive").removeClass("interactive"); }

46. Semantic Tagging with HTML5 HTML5 offers a set of new tags that provide the ability to mark up the sections of a document more descriptively than you could in HTML 4.01 HTML 4.01HTML5

47. Semantic Tagging: Before & After HTML 4.01HTML5 The United States Constitution THE UNITED STATES CONSTITUTION Preamble We the People of the United States, in Order to form a more perfect Union... Article I Section 1 All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives. The eagle has landed The United States Constitution THE UNITED STATES CONSTITUTION Preamble We the People of the United States, in Order to form a more perfect Union... Article I Section 1 All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives. The eagle has landed

48. Semantic Tagging: Before & After HTML 4.01HTML5

49. What’s the point of semantic tagging, if the content looks the same?

50. Semantic tagging is for machines, not humans It provides a universal grammar so that machines can more easily parse HTML content ✗ ✔

51. It’s Harder for a Machine to parse this HTML… Web page created on January 18, 2012 …than this HTML Web page created on January 18, 2012

52. Extending HTML5 Semantics in EPUB 3 EPUB 3 supports “inflection” of HTML5 elements through the epub:type attribute: The animal on the cover of this book is a meerkat… epub:type accepts the book terms defined in the EPUB 3 Structural Semantics Vocabulary: http://idpf.org/epub/vocab/structure/ These include: “volume”, “chapter”, “epigraph”, “appendix”, “glossary”…

53. HTML5 support in today’s ereaders Geolocation MathML iBooks 1.xYESSort of*YES NOOK Color/Tablet NO YES NO Safari Books Online YES Kindle AppsNO YES NO Kindle FireNO * iBooks 1.x supports Geolocation API, but does not support calls to related APIs (Google Maps, GeoNames, etc.)

54. HTML5 and Kindle Fire Some key HTML5 tags supported on Kindle Fire (KF8)*: * See Amazon’s KF8 HTML5 & CSS feature list: http://amzn.to/kf8_html5_css3http://amzn.to/kf8_html5_css3

55. CSS and Kindle Fire @media border border-radius ** color display float font margin padding table-layout text-shadow ** text-overflow white-space word-spacing Some key CSS properties supported on Kindle Fire (KF8)*: * See Amazon’s KF8 HTML5 & CSS feature list: http://amzn.to/kf8_html5_css3http://amzn.to/kf8_html5_css3 ** CSS3 feature

56. Fallbacks Part II: @media queries With Kindlegen 2.3, you can use @media queries to earmark CSS specifically for KF8-enabled devices (Kindle Fire) or classic Mobi devices (Kindle eInk, Kindle for iOS) @media amzn-mobi { h1 { font-size: 20pt; text-indent: 0; margin-top: 0; margin-bottom: 10px; } h2 { font-size: 17pt; text-indent: 0; margin-bottom: 10px; } h3 { font-size: 15pt; text-indent: 0; margin-bottom: 10px; } @media amzn-kf8 { h1 { font-size: 1.5em; font-weight: bold; font-family: "Free Sans Bold", sans-serif; margin-top: 20px !important; } h2 { font-size: 1.3em; font-weight: bold; font-family: "Free Sans Bold", sans-serif; color: #8e0012; margin: 15px 0 8px 0 !important; } h3 { font-size: 1.1em; font-weight: bold; font-family: "Free Sans Bold", sans-serif; margin: 10px 0 8px 0 !important; }

57. Fallbacks Part II: @media queries Kindle eInk Kindle Fire

58. What About iBooks Author? iBooks Author is Apple’s new e-publishing tool that lets you design multimedia (text)book content for iBooks 2.0 for iPad.

59. Five Key Facts About iBooks Author It’s the best GUI tool available for designing interactive/multimedia ebooks* It supports HTML5 content via Widgets. But it’s proprietary. iBooks Author exports to the.ibooks format, which can be read only on iBooks 2.0 for iPad (no iPhone/iPod support). You cannot export EPUB from the iBooks Author App. You cannot import EPUB into the iBooks Author App (although you can import Word and Pages documents) If you want to sell your.ibooks ebook, you can only do so in Apple’s iBookstore. (Free ebooks can be distributed elsewhere) * Presenter’s personal opinion

60. Learn iBooks Author with this free ebook http://oreil.ly/publishiba http://oreil.ly/publishiba

61. iBooks Author and HTML5 iBooks Author comes with ready-bake Widgets (no coding needed) for the following features: Photo Gallery Audio/Video Media Interactive Review Quizzes Keynote Presentations “Interactive Images” 3-D Visualizations

62. Make your own Custom Widgets with Dashcode If the interactive features you want to add to your ebook aren’t covered by Apple’s prefab Widgets, you can roll your own widget with Dashcode. Dashcode is a free tool from Apple that is part of the Xcode developer suite. Its primary purpose is to develop OS X Dashboard Widgets using HTML/CSS/JS, but you can also use it to develop webapps for Desktop and Mobile Safari. Dashcode Widget (.wdgt) files can be dragged directly into iBooks Author.

63. Building the Widget 1. Design the UI 2. Add event handlers 3. Add JavaScript code

64. Drag the Widget into iBooks Author

65. Widget Running in iBooks on iPad

66. Download HTML5 for Publishers: http://bit.ly/html5forpubs http://bit.ly/html5forpubs

67. Contact Me! Email: sanders@oreilly.com Twitter: @sandersksanders@oreilly.com@sandersk