Professional Documents
Culture Documents
Sanders Kleinfeld
My Seven-Year Journey from
Traditional Print Production to Ebook
Production…
Navigation: Multimedia/Interactivity:
<article> <audio>
<aside> <canvas>
<header> <embed>
<hgroup> <source>
<footer> <track>
<figure> <video>
<figcaption>
<nav>
<section>
HTML5: New elements (continued)
(http://www.w3.org/TR/html5-diff/#new-elements)
A constellation of technologies
Canvas Audio/Video
Geolocation CSS3
When people say "HTML5," they're
usually referring to...
...next-generation web sites that include one or more of the
following:
//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();
// 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
The result...
But Canvas is all about interactivity...
Before...
Geolocation in Action:
A Geolocated Tale
http://bit.ly/geolocatedtale
After...
Audio/Video for Publishers
• iBooks
• NOOK Color/Tablet
• Kindle software readers (iPad/iPhone/Android/etc.)
• iBooks
• NOOK Color/Tablet
• Kindle software readers (iPad/iPhone/Android/etc.)
Audio in Action:
Audio-Enabled Glossary
http://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.
http://www.flickr.com/photos/eiriknewth/4944889740/
<section epub:type="colophon">
<p>The animal on the cover of this book is a
meerkat…</p>
</section>
http://idpf.org/epub/vocab/structure/
Kindle Fire NO NO NO NO NO
* iBooks 1.x supports Geolocation API, but does not support calls to related
APIs (Google Maps, GeoNames, etc.)
HTML5 and Kindle Fire
Some key HTML5 tags supported on Kindle Fire (KF8)*:
• <article>
• <aside>
• <figure>
• <footer>
• <header>
• <nav>
• <section>
• @media • padding
• border • table-layout
• border-radius** • text-shadow**
• color • text-overflow
• display • white-space
• float • word-spacing
• font
• margin
* See Amazon’s KF8 HTML5 & CSS feature list: http://amzn.to/kf8_html5_css3
** CSS3 feature
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 @media amzn-kf8
{ {
h1 { h1 {
font-size: 20pt; font-size: 1.5em;
text-indent: 0; font-weight: bold;
margin-top: 0; font-family: "Free Sans Bold", sans-serif;
margin-bottom: 10px; margin-top: 20px !important;
} }
h2 {
font-size: 17pt; h2 {
text-indent: 0; font-size: 1.3em;
margin-bottom: 10px; font-weight: bold;
} font-family: "Free Sans Bold", sans-serif;
h3 { color: #8e0012;
font-size: 15pt; margin: 15px 0 8px 0 !important;
text-indent: 0; }
margin-bottom: 10px;
} h3 {
} font-size: 1.1em;
font-weight: bold;
font-family: "Free Sans Bold", sans-serif;
margin: 10px 0 8px 0 !important;
}
}
Fallbacks Part II: @media queries
Kindle eInk Kindle Fire
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.
Five Key Facts About iBooks Author
• It’s the best GUI tool available for designing interactive/multimedia ebooks*
• 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 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)
•Photo Gallery
•Audio/Video Media
•Keynote Presentations
•“Interactive Images”
•3-D Visualizations
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.