WIXLIB

HTML5 for PublishersAn IntroductionNellie McKesson Digital Development Manager, O’Reilly Media, Inc. Delhi, India, 30/11/2013

HTML5 for Publishersby Sanders KleinfeldFREEhttp://oreil.ly/qr38Cc

HTML is the backbone ofreflowable ebooks

HTML 5 is a constellationof technologiesCanvasGeolocationAudio/VideoCSS 3

When people say "HTML5," they'reusually referring to.next-generation websites that include one or more of thefollowing:! Embedded audio/video media without resorting to Flashor other plugins Native interactivity/animation/games without resortingto Flash or other plugins Geolocation functionality Sites with local storage that you can download and runoffline Fancy CSS3: columns, text shadows, animations. Native support for MathML and SVG Proper semantic markup

HTML5 in action in ebooks:

Why should publisherscare about HTML5?

HTML5 is the backbone of EPUB3While most major eReaders do not formallysupport EPUB 3, many HTML5 features arecurrently supported by the following platforms:! iBooks for iOS (iPad, iPhone, iPod) Nook Color/Tablet Kindle Fire Kindle Apps (iPhone/iPad/Android, etc.) Safari Books Online

HTML CSS 3 All book formats from HTML

HTML5 Canvas

Canvas example:Draw a picture canvas id "my first canvas" width "200"height "225" The content you put here will show up ifyour rendering engine doesn't support the<canvas> element. /canvas

my canvas.strokeRect(0,0,200,225) // to start, draw a border around the canvas!//draw facemy 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();You draw on the canvas withJavaScript// 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 smilemy canvas.lineWidth 6; // switch to six pixels wide for outlinemy 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 fillmy canvas.font '20px sans'; // use 20 pixel sans serif fontmy canvas.fillText ("Hello Canvas!", 45, 200); // write text

The Result:

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

Canvas in Action 1:Graphing Calculatorhttp://bit.ly/canvascalc

Canvas in Action 2:Finger Paintinghttp://bit.ly/canvasfingerpaint

Geolocation

W3C Geolocation APIhttp://dev.w3.org/geo/api/spec-source.htmlGet a user’s latitude/longitude ion(callback function)!callback function: a function you define to receive and process the latitude/longitude data.

Geolocation’s value inebooks Interactive atlas, road maps Travel/Restaurant guides customizedfor user’s location Geolocated fiction Geolocation-based games(geocaching, scavenger hunt)

Geolocation in Action:A Geolocated Talehttp://bit.ly/geolocatedtaleBefore:

Geolocation in Action:A Geolocated Talehttp://bit.ly/geolocatedtaleAfter:

Audio/Video

Embed audio/videodirectly in yourcontentNo plugins necessary audio id "new slang" source src "new slang.wav" type "audio/wav"/ source src "new slang.mp3" type "audio/mp3"/ source src "new slang.ogg" type "audio/ogg"/ em (Sorry, <audio> element not supported in your browser/ereader, so you will not be able to listen to this song.) /em /audio ! video id "dancing pony" width "300" height "300" source src "dancing pony.mp4" type "video/mp4"/ source src "dancing pony.ogg" type "video/ogg"/ em (Sorry, <video> element not supported in your browser/ereader, so you will not be able to watch this video.) /em /video

Compatibility 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)

Ereader Audio/VideoCompatibilityAudio: Use MP3It works on: iBooks NOOK Color/Tablet Kindle software readers(iPad/iPhone/Android/etc.)Video: Use H.264/MP4It works on: iBooks NOOK Color/Tablet Kindle software readers(iPad/iPhone/Android/etc.)

Audio in Action:Audible Glossaryhttp://bit.ly/miniglossary

Video in Action:A clip about canvas http://bit.ly/ormcanvasvid

MathML

An XML vocabulary formathematical expressions The HTML5 specification provides nativesupport for MathML in HTML documents! MathML provides both Presentation andContent Markup models.

Presentation markup tags math expressionsbased on how they should be displayed(for example, “superscripted 2”). 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

Content markup tags expressions based on themathematical operations performed(e.g., “taken to the 2nd power”)x y z! apply plus/ ci x /ci ci y /ci ci z /ci /apply

Convert a famousequation to MathML!http://bit.ly/mathconverter

Why write all this markup: math xmlns "http://www.w3.org/1998/Math/MathML" mstyle displaystyle "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 embedthe equation as an image?

Advantages of MathML over images Equations are resizable, like text! Equations can be styled with CSS! Equations can be interacted withusing JavaScript

MathML in Action:Quadratic Equation Solverhttp://bit.ly/mathml

CSS 3A Very Brief Overview

New features: animations, roundedcorners, text shadows, andtransitions! CSS 3 support is limited andvaries by browser! CSS 3 can also be used to makePDFs for print or Web

FallbacksWhat if your eReader Devicedoesn’t support CSS 3 or JavaScript?

When designing interactive contentfor a diverse eReader ecosystem,think about implementing fallbacks canvas audio video MathMLGeolocationCSS 3JavaScript

Fallbacks example: CSS and JS“Same ebook file,different instructions”Adobe Digital Editions:No JS supportiBooks:Full functionality

Semantic Tagging

HTML5 Semantic Tagging:New tags to mark up the sections of a documentmore descriptively than you could in HTML 4.01HTML 4.01: div HTML5: article aside div header footer figure figcaption nav section

Semantic Tagging:Before and After!HTML 4.01: html xmlns "http://www.w3.org/1999/xhtml" head title The United States Constitution /title /head body h1 THE UNITED STATES CONSTITUTION /h1 div class "section" !HTML5: html xmlns "http://www.w3.org/1999/xhtml" head title The United States Constitution /title /head body h1 THE UNITED STATES CONSTITUTION /h1 section h2 Preamble /h2 p We the People of the United States, in Order to forma more perfect Union. /p h2 Preamble /h2 p We the People of the United States, in Order to forma more perfect Union. /p h2 Article I /h2 h2 Article I /h2 h3 Section 1 /h3 p All legislative Powers herein granted shall be vestedin a Congress of the United States, which shall consistof a Senate and House of Representatives. /p h3 Section 1 /h3 p All legislative Powers herein granted shall be vestedin a Congress of the United States, which shall consistof a Senate and House of Representatives. /p img src "bald eagle.jpg"/ img src "bald eagle.jpg"/ figcaption The eagle has landed /figcaption /div div class "article" section div class "section" /div /div div class "figure" div class "caption" The /div /body /html /section article eagle has landed /div /section /article figure /figure /body /html

Semantic Tagging:Before and AfterHTML 4.01:HTML5:

So what’s the point,if the content looks the same?

Semantic tagging is for machines,not humans It provides a universal grammar so thatmachines can more easily parse HTML content

It’s Harder for a Machineto parse this HTML p Web page created on January 18, 2012 /p .than this HTML footer Web page created on time pubdate "2012-01-18" January 18, 2012 /time /footer

Extending HTML5 Semantics in EPUB3EPUB 3 supports “inflection” of HTML5 elementsthrough the epub:type attribute:! section epub:type "colophon" p The animal on the cover of this book is a meerkat /p /section !epub:type accepts the book terms defined inthe EPUB 3 Structural Semantics These include: “volume”, “chapter”, “epigraph”, “appendix”, “glossary”

HTML5 support in today’s eReaders canvas Geolocation audio video MathMLiBooks 1.xYESSort of *YESYESYESNook Color/TabletNONOYESYESNOSafari BooksOnlineYESYESYESYESYESKindle AppsNONOYESYESNOKindle FireNONONONONO* iBooks 1.x supports Geolocation API, but does not support calls to related APIs (Google Maps, GeoNames, etc.)

HTML5 for Publishersby Sanders KleinfeldFREEhttp://oreil.ly/qr38Cc

Extending HTML5 Semantics in EPUB 3 EPUB 3 supports “inflection” of HTML5 elements through the epub:type attribute:! section epub:type "colophon" p The animal on the cover of this book is a meerkat /p /section ! epub:type accepts the book ter