X Richlayoutepub PDF

Crear publicaciones con bastantes diseños en EPUB 3
con HTML5, CSS3 y MathML

Explore el estándar abierto de próxima generación de eBook para
diseño avanzado y tipografía
Liza Daly 24-07-2012

Vice-President of Engineering
Safari Books Online
EPUB 3.0, la más reciente revisión del estándar de formato XML de la industria para e-book,
salta a la moderna tecnología web adoptando HTML5 y CSS3. Mantiene su enfoque en kits de
herramientas basados en XML al requerir serialización de XHTML y añadir vocabularios XML
adicionales, como MathML y SVG. EPUB 3 ofrece una variedad de opciones para el desarrollo
de publicaciones nativas digitales avanzadas. En este artículo, aprenda a crear páginas ricas
en diseños utilizando algunos recursos nuevos en EPUB 3.
Introducción
EPUB es el formato XML para libros digitales "reflowable" y publicaciones estandarizadas por el
International Digital Publishing Forum (IDPF). En 2009, EPUB 2 era el formato de eBook de hecho
utilizado por la mayoría de los principales retailers de eBook y sistemas de lectura.
Los archivos EPUB ZIP se empaquetan bajo una estructura bien definida. Cada componente tiene
su propia especificación, y se unen bajo la etiqueta EPUB común:
Especificación de contenedor
Define el método por el cual se empaqueta un documento EPUB.
Publicación EPUB
Incluye todos los metadatos acerca de los contenidos del eBook, incluyendo: manifiesto del
paquete, título básico, metadatos del autor y, —en EPUB 3—, definiciones sobre a cuáles
recursos avanzados la publicación espera dar soporte, como JavaScript o MathML. Esto se
denomina archivo de Open Container Format.
Documentos de contenidos de EPUB
Los actuales archivos XHTML y CSS que componen el contenido de la publicación. Los
documentos de contenidos también incluyen recursos binarios como imágenes, multimedios,
y, potencialmente, documentos XML definidos externamente.
© Copyright IBM Corporation 2012 Marcas

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 1 de 23
HTML5, CSS3 y MathML
developerWorks® ibm.com/developerWorks/ssa/
Abreviaciones comúnmente utilizadas

• CSS: Cascading stylesheet
• DTD: Document Type Definition
• HTML: Hypertext Markup Language
• JAR: Java archive
• OPF: Open Packaging Format
• SVG: Scalable Vector Graphics
• XHTML: Extensible Hypertext Markup Language
• XML: Extensible Markup Language
• XSLT: Extensible Stylesheet Language Transformations
En este artículo se exploran algunos de los recursos de EPUB 3. Usted aprenderá acerca de la
validación de documentos EPUB 3, navegación, jerarquía y directrices de desarrollo. Un ejemplo
describe el proceso de adaptación de una página de un libro para niños en EPUB 3.
Descargue los ejemplos de este artículo.
Prerrequisitos
El código de muestra y los ejemplos de este artículo suponen un conocimiento básico de la
especificación EPUB 2 y, en general, de las publicaciones basadas en XML. Consulte Recursos
para detalles sobre EPUB 2.
Cambios en EPUB 3
EPUB 2 proporciona todas las capacidades de diseño y formato de HTML4 y CSS2, que son
más que suficientes para publicaciones de texto pesadas. Sin embargo, editores y autores
encontraron que EPUB 2 no podía manejar muchos tipos de contenido y casos de uso, como
libros de multimedios, libros con diseño complejo, publicaciones matemáticas y documentos
interactivos. IDPF y la comunidad de eBook publicaron la especificación para EPUB 3 en octubre
de 2011.
Sistemas de lectura EPUB 3

Hasta diciembre de 2011 no existían sistemas de lectura con soporte oficial para EPUB
3. No obstante, muchos sistemas de lectura escritos utilizando motores de navegación
compatibles con HTML5, como WebKit, dan soporte a la mayor parte de la especificación
de Contenidos de Documentos de EPUB 3. Se recomienda que utilice un navegador
reciente basado en un moderno motor de procesamiento de HTML para probar y desarrollar
documentos EPUB 3.
Este artículo incluye técnicas para crear polyfills (shims) inofensivos para producir resultados
compatibles con EPUB 3 aun sin un sistema de lectura EPUB 3 completo.
Los principales cambios de EPUB 2 a EPUB 3 son:
• El esquema necesario para documentos de contenido de EPUB 3 cambió de XHTML 1.1 a la

serialización XHTML de HTML5. Era un requerimiento fundamental incluir los elementos de
multimedios de HTML5 (<video>, <audio>y <canvas>).

ibm.com/developerWorks/ssa/ developerWorks®
• El rango permisible de CSS en documentos de contenido de EPUB 3 se amplió desde un

subconjunto de CSS2.1 a un conjunto de módulos maduros de CSS3 pertinentes para
documentar autorías.
• MathML se añadió a XHTML5 y SVG como un tipo de contenido de primer orden.
• Soporte para fuentes incorporadas ahora es necesario para los sistemas de lectura con
un puerto de visualización de CSS. Web Open Font Format se añadió como un formato de
fuentes aceptable.
• Soporte explícito para modos de escritura y scripts no occidentales, incluyendo diseño
vertical en scripts japoneses y otros asiáticos.
• Soporte opcional para la interactividad mediada por JavaScript mediante un modelo de
seguridad personalizado.
• Los metadatos permisibles en documentos de publicación se ampliaron, incluyendo algún
soporte para Resource Description Framework–in–attributes (RDFa).
• El documento de la tabla de contenidos (TOC) de EPUB 2 Navigational Center eXtended
(NCX) se eliminó en favor de un TOC basado en XHTML5. (El NCX aún se permite para
compatibilidad con versiones anteriores.)
Validación de documentos EPUB 3

Debido a que EPUB 3 se basa en serializaciones XML para la mayoría de los tipos de contenido,
puede aprovecharse para validación automática. La herramienta EpubCheck es el método
convencional para probar la validez y conformidad de los documentos EPUB. EpubCheck es
una biblioteca de fuente abierta (Berkeley Software Distribution-licensed) Java™ . Una versión
preliminar para desarrolladores está disponible para usar con documentos EPUB 3 y se utiliza en
todo este artículo. Consulte Recursos para obtener los enlaces a la versión más reciente.
Se recomienda enfáticamente que utilice la extensión .xhtml para todos los documentos de
contenido de EPUB. Los navegadores no interpretarán el contenido HTML como application/
xhtml+xml sin esa extensión. El modo de procesamiento de XML es necesario al trabajar con
muchos de los recursos demostrados en el presente artículo, como espacios de nombres de CSS.
Normalmente, usted interactúa con EpubCheck a través de la línea de comandos, como se

muestra a continuación.
$ java -jar epubcheck-3.0b3.jar sample.epub
Epubcheck Version 3.0b3
No errors or warnings detected.
Si obtiene el error java.lang.NoClassDefFoundError: com/thaiopensource/validate/

SchemaReader en respuesta, asegúrese de que la biblioteca o directorio que vino con la
distribución de EpubCheck esté en el mismo directorio que el archivo JAR de EpubCheck.
EpubCheck 3 puede validar un único subcomponente del paquete EPUB individualmente, como
en el Listado1. Este es un recurso muy útil, utilizado en los ejemplos de este artículo, que puede:
• Ayudar a aislar problemas.

• Disminuir la necesidad del tedioso reempaquetado de EPUB en un nuevo ZIP solo para
validarlo.
• Incorporarse en una infraestructura de prueba de unidad para una cadena de herramientas
que genera un tipo de archivo único.
Listado 1. Ejecutando EpubCheck 3 contra un único tipo de archivo

$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav
Epubcheck Version 3.0b3
WARNING: sample-toc.xhtml: File is validated as a single file of type nav and version 3!
Only a subset of the available tests is run!
No errors or warnings detected.
Navegación y jerarquía en documentos EPUB 3

Aunque el archivo NCX TOC en EPUB 2 daba soporte a un amplio conjunto de marcas para
navegación jerárquica y asignación de páginas, se derivaba del Digital Talking Book de Digital
Accessible Information System (DAISY) (una especificación para producir eBooks accesibles
para personas con problemas de lectura). La dependencia en el correctamente especificado
formato DAISY pretendía facilitar el desarrollo de lectores de eBook que pudieran dar soporte
a una amplia accesibilidad. En ese sentido, el NCX funcionaba perfectamente. Sin embargo, el
DTD NCX es bastante grande e incluye recursos no pertinentes a EPUB 2. La confusión sobre
qué partes del NCX eran necesarias en EPUB resultó en fragmentación indeseable y extensiones
propietarias por algunas empresas de retail de eBook y proveedores de sistemas de lectura.
EPUB 3 eliminó el NCX y lo reemplazó por el EPUB Navigational Document (END). El Listado 2
muestra un ejemplo. El END utiliza XHTML5 en vez de un DTD personalizado, reduciendo así
la cantidad de formatos XML a implementar y validar. Los atributos personalizados de EPUB se
suministran mediante los espacios de nombres de EPUB (http://www.idpf.org/2007/ops).
Listado 2. Un END mínimo

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Example</title>
</head>
<body>
<section epub:type="frontmatter toc">
<header>
<h1>Contents</h1>
</header>
<nav epub:type="toc" id="toc">
<ol>
<li id="chapter_001">
<a href="chapter_001.html">Chapter 1</a>
</li>
</ol>
</nav>
</section>
</body>
</html>
El elemento <nav> de HTML5 es necesario (como lo es epub:type valor toc).

Declarando el END
Incluir el END en una publicación mediante declaración del item en el manifiesto con el valor de
properties de nav, como en el Listado 3.
Listado 3. Incluyendo un END en un EPUB Package Document (OPF)

<manifest>
<item id="toc"
properties="nav"
href="toc.html"
media-type="application/xhtml+xml"/>
<item id="chapter_001"
href="chapter_001.html"
media-type="application/xhtml+xml"/>
...
</manifest>
La inclusión de un archivo END es necesaria en EPUB 3. También se puede incluir un archivo

NCX para compatibilidad con versiones anteriores, pero los procesadores de EPUB 3 deben
ignorar el NCX en favor del END.
Presentación visual del END

A diferencia del NCX, se puede incluir el END en el flujo del contenido del libro. En EPUB 2, si se
quería mostrar a los usuarios una TOC personalizada (en vez de depender del soporte integrado
de TOC en el eReader), se tenía que producir dos copias del mismo contenido,—una en el NCX
y una como un documento de contenido HTML. END elimina esta duplicación y permite una gran
flexibilidad en la presentación de alguna parte o todo el TOC en el flujo de contenido.
Para añadir el END al flujo de contenido, sencillamente inclúyalo en spinede OPF, como en Listing
4.
Listado 4. Incluyendo el END en el flujo de lectura

<![CDATA[ <spine> <itemref idref="toc" /> <itemref idref="chapter_001" /> ... </spine>
En documentos con jerarquías profundas, como documentación técnica, tal vez desee incluir
todos los niveles de sección en un TOC puramente funcional a la vez que muestra a los usuarios
solo las secciones de primer o segundo nivel en el flujo de contenido. Para ello, se utiliza el
atributo hidden de HTML5, como en el Listado 5, sobre los elementos que deben eliminarse de la
presentación a los usuarios.

Listado 5. Eliminando subsecciones de la presentación visual de un TOC

...
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">
<ol>
<li id="chapter_001">
<a href="chapter_001.html">Chapter 1</a> <ol hidden="hidden">
<li>
<a href="chapter_001.html#id1">Chapter 1 subsection</a>
<ol>
<li>
<a href="chapter_001.html#id1.1">Chapter 1 subsection 1</a>
...
Puede que se pregunte por qué no podría hacerlo mediante la propiedad de CSS display: none
. Debido a que EPUB se utiliza en una variedad de sistemas de lectura, incluidos los lectores de
pantalla no visuales o dispositivos Braille, no es necesario que todos los lectores den soporte a
CSS. La mayoría de los navegadores web modernos dan soporte nativo a hidden . Es una buena
idea incluir CSS para configurar explícitamente la propiedad exhibir de estos elementos, como en
el Listado 6. Debido a que el archivo END es solo otro archivo HTML, se puede añadir CSS en el
headde HTML, al igual que con cualquier otra hoja de estilo.
Listado 6. Configurando la propiedad exhibir

/* Never display elements with the hidden attribute */ *[hidden] { display: none; }
En sistemas de lectura o navegadores no compatibles, la falta de estilo para el atributo hidden

resulta en todas las subsecciones que se muestran, como en la Figura 1.
Figura 1. TOC de END sin atributo oculto o CSS
En navegadores que dan soporte a hidden o después de suministrar el shim CSS, la salida se
transforma, como en la Figura 2.
Figura 2. El TOC de END con atributo oculto aplicado
De manera predeterminada, la lista ordenada HTML genera un conjunto de listas numeradas.

Sin embargo, la especificación de END define, " . . . el estilo de visualización predeterminado

de elementos de la lista debe ser equivalente al CSS list-style: none." Para lograr esta
presentación, añada otra regla al polyfill CSS de EPUB 3, como en el Listado 7.
Listado 7. Configurando el estilo de los elementos de lista

/* In a declared TOC list, never show list numbering */
nav#toc ol {
list-style-type: none;
}
Migrando de NCX a END mediante XSLT

Aunque el END de EPUB 3 ofrece más opciones para el diseño y control, si migra desde un flujo
de trabajo EPUB 2 a uno EPUB 3, considere empezar la conversión desde los documentos NCX
existentes. Debido a que la entrada y salida de documentos son XML, esta es una aplicación
perfecta para XSLT.
El Listado 8 proporciona la infraestructura básica para la generación de un documento HTML para

rellenar con el TOC.
Listado 8. Declarar los espacios de nombres necesarios para el NCX y END

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
exclude-result-prefixes="ncx xsl"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ncx="http://www.daisy.org/z3986/2005/ncx/"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="ncx:ncx">
<html>
<head>
<title><xsl:apply-templates select="/ncx:ncx/ncx:docTitle/ncx:text"/></title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
Observe la inclusión obligatoria del espacio de nombre http://www.idpf.org/2007/ops , que

normalmente tiene el prefijo epub. Este espacio de nombre se incluye principalmente para soporte
a la inflexión semántica de EPUB (adicional se refiere al propósito específico que un elemento
tiene en un documento de contenido de EPUB). Si se utiliza EPUB 3, es recomendable usar
la expresividad disponible en el Vocabulario de Semántica Estructural para proporcionar un
contexto para el software de accesibilidad, así como para el procesamiento de máquina. Consulte
Recursos para obtener información sobre los valores incluidos en dicho vocabulario.
Para un ejemplo completo que muestre la conversión de otros tipos de mapa de página,
consulte la aplicación nend de fuente abierta listada en Recursos.
Con el esquema básico establecido, empiece a caminar por la jerarquía de TOC en los elementos
de NCX y salidas XHTML correspondientes. Aunque el NCX permite diferentes tipos de listas de

páginas, los libros EPUB normalmente incluyen solo el ncx:navMap. El extracto de plantilla en el El
Listado 9 muestra como producir un conjunto de nodos desde el ncx:navMap.
Listado 9. Produciendo el navMap

...

<xsl:template match="ncx:navMap">
<nav id="toc" epub:type="toc">
<xsl:copy-of select="@class"/>
<xsl:choose>
<xsl:when test="ncx:navLabel">
<xsl:apply-templates select="ncx:navLabel" mode="heading"/>
</xsl:when>
<xsl:otherwise>
<xsl:if test="self::ncx:navMap">
<h1>Table of Contents</h1>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<ol>
<xsl:apply-templates select="ncx:navPoint|ncx:navLabel"/>
</ol>
</nav>
</xsl:template>
<xsl:template match="ncx:navPoint">
<xsl:text>
</xsl:text>
<li>
<xsl:copy-of select="@id|@class"/>


<a href="{ncx:content[1]/@src}">
<xsl:apply-templates select="ncx:navLabel"/>
</a>


<xsl:if test="ncx:navPoint">
<ol>
<xsl:apply-templates select="ncx:navPoint"/>
</ol>
</xsl:if>
</li>
</xsl:template>


<xsl:template match="ncx:navLabel|ncx:text">
<xsl:apply-templates/>
</xsl:template>
...
El Listado 10 proporciona un ejemplo de un NCX jerárquico.
Listado 10. Muestra de un NCX organizado jerárquicamente

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">

<head>
<meta name="dtb:uid" content="d989d60c-2302-40d1-9c85-1c028414342a" />
<meta name="dtb:depth" content="-1" />
<meta name="dtb:totalPageCount" content="-1" />
<meta name="dtb:maxPageNumber" content="-1" />
</head>
<docTitle>
<text>Middlemarch</text>
</docTitle>
<navMap>
<navPoint id="np1" playOrder="1">
<navLabel>
<text>Prelude</text>
</navLabel>
<content src="prelude.html"/>
</navPoint>

<navLabel>
<text>I: Miss Brooke</text>
</navLabel>
<content src="book1.html" />

<navLabel>
<text>Chapter 1</text>
</navLabel>
<content src="chapter1.html" />
</navPoint>
<navLabel>
<text>Chapter 2</text>
</navLabel>
<content src="chapter2.html" />
</navPoint>
...
La transformación del archivo en el Listado 10 mediante el XSLT resulta en la salida en el Listado

11 a continuación. Usted puede descargar los archivos de ejemplo.
Listado 11. Salida de la transformación de NCX a END

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Middlemarch</title>
</head>
<body>
<nav id="toc" epub:type="toc">
<h1>Table of Contents</h1>
<ol>
<li id="np1">
<a href="prelude.html">Prelude</a>
</li>
<li id="np2">
<a href="book1.html">I: Miss Brooke</a>
<ol>
<li id="np3">
<a href="chapter1.html">Chapter 1</a>
</li>
<li id="np4">
<a href="chapter2.html">Chapter 2</a>
</li>

...
Debido a que los valores de @id se conservan desde el archivo original, usted debe ser capaz de
escribir herramientas de validación para garantizar que todos los nodos originales son capturados.
Otras opciones para posteriores transformaciones incluyen:
• Actualización de metadatos en el archivo OPF desde el antiguo esquema Dublin Core al

esquema meta de @property , como se define en la especificación Publications 3.0 (consulte
Recursos).
• Migrar el contenido obsoleto de la guide de OPF al recurso landmarks en el END.
• Eliminar referencias en el spine de OPF en el archivo NCX (a menos que esté produciendo
un documento compatible con versiones anteriores).
Normalmente, no es necesario modificar el contenido XHTML 1.1 para producir documentos de

contenido compatibles con EPUB 3. Sin embargo, cuando se disponga de información semántica,
como al tirar información de un sistema de administración de contenido o de otro repositorio de
documentos, considere aplicar inflexión semántica a la salida. La especificación EPUB 3 cuenta
con más información sobre inflexión semántica (consulte Recursos).
Directrices de desarrollo EPUB 3

Hasta que los sistemas de lectura de EPUB 3 estén disponibles, es prematuro recomendar
mejores prácticas específicas. Sin embargo, EPUB 3 está basado en tecnologías web de rápida
maduración. Ya hay suficiente información para hacer recomendaciones generales acerca de
cómo utilizar las tecnologías subyacentes y cuándo utilizar las mejores prácticas existentes para
producir un marcado semántico sólido y accesible.
Cuándo producir EPUB 3

¿Debe usted utilizar EPUB 2 o EPUB 3 para eBooks producidos hoy? Afortunadamente, la
compatibilidad con versiones anteriores era un objetivo de diseño de EPUB 3. Usted debe
beneficiarse de las mejoras semánticas y de los metadatos enriquecidos en EPUB 3 mientras
que todavía produce documentos que pueden leerse en eReaders más antiguos. En la práctica,
tal vez no sea posible vender dichos contenidos en algunos mercados de eBooks; pueden no
aceptar EPUB 3 debido a reglas de negocio. Sin embargo, el "sideloading" de dichos contenidos
puede esperarse que funcione para la mayoría de los sistemas de lectura en conformidad
con EPUB 2. EPUB 3 también fue diseñado para ser compatible con versiones posteriores en
términos de soporte para el sistema de lectura—un sistema de lectura EPUB 3 debe dar soporte a
documentos EPUB 2 válidos.
Muchos sistemas de lectura ya dan soporte a un tipo de "EPUB 2.5," donde se permite el marcado
HTML5 (especialmente en relación con elementos de video, audioy canvas ). Se debe esperar
que las plataformas eReading con motores de navegador web, como Apple iBooks, presenten
con éxito muchos de los elementos permitidos en documentos de contenido de EPUB 3. Como
con cualquier contenido web innovador, pruebe su contenido en tantos lectores como sea posible
antes del release.

Diseño de eBook adaptable

El módulo Media Query de CSS3 es un interesante nuevo componente de EPUB 3. Media
Query permite a los autores especificar que un conjunto de reglas y propiedades se aplica solo
a una condición particular de visualización, normalmente basada en el tamaño del puerto de
visualización. Usted también puede utilizar Media Query para apuntar a proporciones específicas
de altura y ancho, como retrato vs paisaje.
Estos recursos ya son utilizados en algunos sitios web para proporcionar experiencias de usuario
mejoradas en dispositivos móviles. Tomados en conjunto, estos principios se denominan diseño
web adaptable. Las técnicas han demostrado ser eficaces en la web y, de alguna manera, son
aún más aplicables a los diseñadores de libros. Los diseñadores de libros bosquejan desde hace
décadas de investigación y experimentación cómo presentar eficazmente información visual
en diversos tamaños y orientaciones. (Consulte Recursos para obtener más información sobre
diseño web adaptable.)
La mayor parte de los eBooks contienen exclusiva o principalmente texto. Sin embargo, muchos
tipos de publicaciones requieren un diseño más rico por razones de marketing o por la naturaleza
esencial del contenido. Los libros que contienes muchos diseños han sido considerados malos
candidatos para la conversión de eBook, pero EPUB 3 y su uso de HTML5 y CSS3 permiten un
diseño avanzado. Con gran poder viene una gran responsabilidad, sin embargo. No se puede
descuidar a los usuarios de dispositivos móviles que quieren leer el contenido fácilmente y aún
con diseños llamativos. Aquí es donde las técnicas combinadas de diseño de CSS3 y el diseño
adaptable de eBook se juntan.
Diseño adaptable avanzado en EPUB 3

Libros ilustrados, libros de cocina, libros de texto y de poesía han sido difíciles de convertir en
contenido "reflowable". En esta sección, vea cómo adaptar la página de un libro de poesía para
niños, en la Figura 3, en EPUB 3. La palabra adapt es utilizada en lugar de convert, porque el
proceso es mucho más artístico que técnico.

Figura 3. Una página de Abroad por Thomas Crane (imagen de dominio

público del Archivo de Internet)
El enfoque consiste en capturar el texto como XHTML y luego extraer algunas de las imágenes
para evocar—pero no reproducir—el diseño original. Debido a que EPUB 3 supone un contexto de
procesamiento XHTML5/CSS3, puede utilizar un marcado semántico mínimo en vez de acomodar
muchos navegadores antiguos, como lo haría en la web abierta. El Listado 12 muestra el marcado
XHTML para el contenido.
Listado 12. Marcado de poesía

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Example of Media Query in EPUB 3</title>
<link rel="stylesheet" type="text/css" href="childrens-book-style.css" />
</head>
<body>
<div epub:type="chapter">
<h1>The Swans.</h1>
<p>
<span>"Ho! pretty swans,</span>
<span>Do you know, in our Zoo'</span>
<span>The swans of old England</span>
<span>Are just like you?"</span>
</p>
<p>
<span>"Don't tell me!"</span>
<span>Said a cross old bird;</span>
<span>"I know better,</span>
<span>The thing's quite absurd.</span>
</p>
<p>
<span>Their figures, I'm sure,</span>
<span>Are not worth a glance:</span>
<span>If you want to see style,</span>
<span>You <em>must</em> come to France."</span>
</p>
<p>
<span>With a scornful whisk</span>
<span>The swan turned tail,</span>

<span>Spread its wings to the breeze</span>

<span>And was off full-sail.</span>
</p>
<p>
<span>"Ho! pretty swan,</span>
<span>Do you know, in our Zoo'</span>
<span>The swans are not half</span>
<span>So conceited as you?"</span>
</p>
</div>
</body>
</html>
No se especifican imágenes. Para hacer más fácil el diseño adaptable, las imágenes se
proporcionarán en el CSS. Aunque muchos defensores del desarrollo web adaptable propugnan
una estrategia de "móvil primero", puede ser más fácil empezar por adaptar el contenido de
impresión con una pantalla de tamaño de escritorio o pizarra digital. Para el ejemplo, se supone
que la vista predeterminada es una pantalla de formato grande. El Listado 13 muestra el CSS, y la
Figura 4 muestra el eBook resultante como se presenta en iBooks en un iPad de Apple.
Listado 13. CSS para un diseño de tamaño de pizarra digital

@namespace epub "http://www.idpf.org/2007/ops";
body {
font-family: Georgia, serif;
margin: 0;
padding: 0;
}
/* Select the entire <div epub:type> and apply the background

images at various positions relative to the text. */
div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;
padding: 2em;
}
p {
font-size: .75em;
text-align: left;
}
p:last-child {
padding-bottom: 2em;
}
h1 {
margin-top: 0;
text-transform: uppercase;
font-weight: 200;
}
p > span {
display: block;
}

/* Use the CSS Selector module to apply rule-based formatting to the

poetry content, generating alternating rows of indented text. */
p > span:nth-child(even) {
text-indent: 1em;
}
El ejemplo utiliza la sintaxis de @namespace del módulo Espacios de nombres de CSS. Los
espacios de nombres de CSS permiten estilos de elementos y atributos de espacios de nombres
prefijados. Aunque no es necesario utilizar espacios de nombres de CSS en EPUB 3, es
conveniente adjuntar estilos a los elementos con flexión semántica EPUB aplicada (el atributo
@epub:type ) en vez de crear clases separadas solo para estilos. El documento HTML debe
usar una extensión .xhtml para que la mayoría de los navegadores procesen correctamente los
espacios de nombre.
Figura 4. Página del libro Abroad presentado en una pantalla de tamaño de

pizarra digital
Con la imagen alineada a la derecha y un borde decorativo grande, el diseño en la Figura 4 podría
decirse que evoca muy bien la página original. Sin embargo, esta disposición no es adecuada
para un dispositivo móvil en modo retrato, donde el ancho será insuficiente para la imagen y
el texto. Para dispositivos móviles, que suelen tener unos 480 píxeles de ancho, se pueden
reemplazar varios elementos, como en el Listado 14. Con el CSS en el Listado 14:

• La imagen de los cisnes se disminuye y aparece centrada antes del texto. La imagen
decorativa en la parte inferior se disminuye para evitar que sobrecargue el contenido del
poema.
• El título se disminuye y se centraliza.
• El texto del poema va a estar más centralizado en vez de muy alineado a la izquierda.
Listado 14. CSS para diseño de retrato tamaño de teléfono

@media screen and (max-width:480px) {
background-position: top center, bottom center;
background-size: 30% auto, 50% auto;
padding: 1em;
margin: auto;
text-align: center;
}
h1 {
margin: 50% auto 0 0;
font-size: 1em;
text-align: center;
}
p {
margin-left: 25%;
}
}
La anterior directriz sigue el CSS anterior, por lo que solo es necesario reemplazar las
propiedades cuyos valores han cambiado en el nuevo diseño. La Figura 5 muestra el resultado
distribuido en dos páginas.

Figura 5. Página del libro Abroad presentado en pantalla tamaño de teléfono
La presentación angosta funciona bien en un diseño de retrato, pero un poema corto fácilmente
puede colocarse entero en la mayoría de las páginas de paisaje. Usted puede añadir una consulta
de medios final para permitir a los dispositivos orientados a paisaje diseñar el poema en varias
columnas. Este recurso forma parte del módulo de Texto de CSS y es parte esencial del soporte a
CSS de EPUB 3. El CSS para el diseño de paisaje de tamaño de teléfono está en el Listado 15.
Listado 15. CSS para diseño de paisaje de tamaño de teléfono

@media screen and (orientation:landscape and max-width:480px) {
background-position: 97% 40%, bottom center;
background-size: 20% auto, 50% auto;
/* For now we are required to use the vendor-prefixed versions in most browsers */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0;
-moz-column-count: 0;
column-gap: 0;
padding: 2em 4em 5em 4em;

}
}
La Figura 6 muestra el resultado presentado.

Figura 6. Página del libro Abroad presentado en una pantalla tamaño de

teléfono en orientación de paisaje
Incluyendo MathML en publicaciones

En EPUB 2, las publicaciones podían incluir contenido matemático solo como imágenes
rasterizadas o SVG. Aunque la matemática de SVG puede producir resultados llamativos,
resulta impenetrable para los lectores de pantalla, además de una escritura difícil. Las imágenes
rasterizadas son peores; no proporcionan ni accesibilidad ni buena escala para las diferentes
fuentes y tamaños de pantalla.
EPUB 3 incluye MathML como un tipo de contenido nativo de EPUB. El marcado de MathML
puede proporcionarse sin cualquier retroceso a otro tipo, como una imagen ráster. Los lectores
EPUB 3 son necesarios para dar soporte por lo menos a las presentaciones de MathML, en la
mayoría de los casos.
Aunque MathML es un tipo de contenido esencial, es necesario que se declare cuáles páginas
XHTML tienen MathML en el archivo OPF, como en el Listado 16.
Listado 16. Declaración de contenido MathML en el archivo OPF

<manifest>
<item href="mathml-style.css" id="css1" media-type="text/css"/>
<item href="mathml.xhtml" properties="mathml"
id="page1" media-type="application/xhtml+xml"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
<item id="toc" properties="nav"
href="toc.xhtml" media-type="application/xhtml+xml"/>
</manifest>
El Listado 17 muestra una ecuación simple. Aunque algunos navegadores web ahora dan
soporte a MathML en un contexto de HTML5 (sin espacios de nombres), EPUB 3 requiere que el
contenido MathML sea declarado en el espacio de nombre correcto de http://www.w3.org/1998/
Math/MathML.
Listado 17. MathML en documento de contenido de EPUB 3


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<title>Example of MathML in EPUB 3</title>
<link rel="stylesheet" type="text/css" href="mathml-style.css" />
</head>
<body>
<m:math display="block">
<m:mrow>
<m:mi>x</m:mi>
<m:mo>=</m:mo>
<m:mfrac>
<m:mrow>
<m:mo form="prefix">-</m:mo>
<m:mi>b</m:mi>
<m:mo>±</m:mo>
<m:msqrt>
<m:msup>
<m:mi>b</m:mi>
<m:mn>2</m:mn>
</m:msup>
<m:mo>-</m:mo>
<m:mn>4</m:mn>
<m:mo>#</m:mo>
<m:mi>a</m:mi>
<m:mo>#</m:mo>
<m:mi>c</m:mi>
</m:msqrt>
</m:mrow>
<m:mrow>
<m:mn>2</m:mn>
<m:mo>#</m:mo>
<m:mi>a</m:mi>
</m:mrow>
</m:mfrac>
</m:mrow>
</m:math>
</body>
</html>
La Figura 7 muestra el resultado en iBooks. Puede ser necesario incorporar una fuente que
incluya los símbolos matemáticos apropiados para que todos los tipos de ecuaciones sean
correctamente presentados. Consulte Recursos para información adicional sobre Fuentes STIX
para publicaciones científicas.
Figura 7. Ecuación matemática simple presentada en EPUB 3
Muchos sistemas que producen MathML pueden utilizar entidades nombradas que forman parte
del DTD de MathML 1.0, como &PlusMinus;. Es necesario convertir estas entidades en entidades

numéricas antes de incluirlas en una publicación de EPUB 3. Como DTDs externos, aun para
tipos de contenidos esenciales, no deben incluirse en archivos EPUB.
Temas para seguir explorando

EPUB 3 ofrece muchas opciones para el desarrollo de publicaciones nativas digitales avanzadas.
Tal vez desee explorar los siguientes temas:
• Utilizando canvas de HTML5 combinado con JavaScript para libros interactivos.

• Si está interesado en la Web Semántica, familiarícese con las opciones de flexión semántica
en el Vocabulario de Semántica Estructural de EPUB 3.
• La semántica de HTML5 y los roles de Accessible Rich Internet Applications Suite (WAI-
ARIA) ofrecen un método atrayente para enriquecer contenidos para consumo mediante
dispositivos de ayuda o algoritmos de aprendizaje automático.
EPUB 3 se está extendiendo de manera activa. Es probable que recursos de los nuevos módulos
de CSS, como Regiones de CSS, se incorporen en futuras revisiones.

Descargas
Descripción Nombre tamaño
XSLT and sample files for NCX transformation ncx-to-end.zip 5KB
A sample EPUB 3 demonstrating advanced CSS3 layout childrens-book-epub.zip 139KB
A sample EPUB 3 demonstrating MathML mathml-epub.zip 3KB

Recursos
Aprender
• Build a digital book with EPUB (Liza Daly, developerWorks, julio de 2011). Aprenda sobre el
formato EPUB en detalle.
• EPUB 3 specification: Obtenga una visión general de la actual revisión del estándar de
EPUB.
• EPUB Publications 3.0 Recommended Specification: Lea sobre la semántica en nivel de
publicación y los requerimientos de conformidad para EPUB® 3, incluyendo el formato
del Paquete de Documentos y reglas para cómo este documento y otros Recursos de
Publicaciones sea asocian para crear una Publicación en conformidad con EPUB.
• EPUB 3 Structural Semantics Vocabulary: Aprenda más sobre el conjunto de propiedades
relacionadas a la descripción de semántica estructural de trabajos escritos.
• HTML5 for Publishers (Sanders Kleinfeld, O'Reilly Media, 2011): Obtenga este libro EPUB
gratuito que demuestra el uso de la interactividad basada en canvas y otros interesantes
recursos de EPUB 3.
• Responsive Web Design por Ethan Marcotte: Explore las técnicas y los principios de diseño
de CSS, incluyendo cuadrículas fluidas, imágenes flexibles y consultas de medios.
• New to XML? Obtenga los recursos necesarios para aprender XML.
• XML area on developerWorks: Encuentre los recursos que necesita para avanzar en la
arena de XML, incluyendo DTDs, esquemas y XSLT. Consulte XML technical library donde
encontrará una amplia variedad de artículos técnicos, consejos, tutoriales, estándares y
Redbooks de IBM.
• Certificación IBM XML: Conozca cómo puede usted convertirse en un Desarrollador
Certificado IBM en XML y en tecnologías relacionadas.
• developerWorks technical events and webcasts: Manténgase actualizado con la tecnología
en estas sesiones.
• developerWorks on-demand demos: Asista a demostraciones que van desde instalación
y configuración de productos para principiantes hasta funcionalidades avanzadas para
desarrolladores experimentados.
• developerWorks on Twitter: Únase hoy para seguir los tweets de developerWorks.
• developerWorks podcasts: Escuche interesantes entrevistas y discusiones para
desarrolladores de software.
• developerWorks on-demand demos: Observe demostraciones que van desde la instalación
de productos y configuración para principiantes hasta funcionalidades avanzadas para
desarrolladores experimentados.
Obtener los productos y tecnologías
• EpubCheck: Descargue la versión reciente del validador para trabajar con documentos de
EPUB 2 y EPUB 3.
• nend: Obtenga la suite completa de las herramientas XSLT y Python para convertir archivos
NCX en ENDs.
• STIX Fonts: Utilice el conjunto completo de fuentes que sirve a la comunidad científica y de
ingeniería.

• IBM product evaluation versions: Descargue o vaya a explore the online trials in the IBM
SOA Sandbox y obtenga experiencia práctica en herramientas de desarrollo de aplicaciones
y en productos de middleware de DB2®, Lotus®, Rational®, Tivoli® y WebSphere®.
Comentar
• developerWorks profile: Cree hoy su perfil y vaya a set up a watchlist.

• XML zone discussion forums: Participe en cualquiera de las diferentes discusiones
relacionadas con XML.
• En comunidad developerWorks: Conéctese con otros usuarios developerWorks mientras
explora los blogs, foros, grupos y wikis dirigidos a desarrolladores.

Sobre el autor
Liza Daly
Liza Daly ocupa el cargo de Vice-President of Engineering en Safari Books Online

y es una experiente ingeniera de software en aplicaciones web y publicaciones
digitales. Es fundadora de Threepress Consulting, una empresa editora de software;
en 2010 publicó Ibis Reader, el primer eReader móvil en HTML5. Es miembro del
consejo directivo del International Digital Publishing Forum (FIAM), la organización
que patrocina y desarrolla la especificación de eBook de EPUB.
© Copyright IBM Corporation 2012

(www.ibm.com/legal/copytrade.shtml)
Marcas
(www.ibm.com/developerworks/ssa/ibm/trademarks/)

X Richlayoutepub PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

X Richlayoutepub PDF

Uploaded by

Copyright:

Available Formats

Crear publicaciones con bastantes diseños en EPUB 3

con HTML5, CSS3 y MathML

Liza Daly 24-07-2012

© Copyright IBM Corporation 2012 Marcas

Abreviaciones comúnmente utilizadas

Descargue los ejemplos de este artículo.

Sistemas de lectura EPUB 3

Los principales cambios de EPUB 2 a EPUB 3 son:

• El esquema necesario para documentos de contenido de EPUB 3 cambió de XHTML 1.1 a la

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 2 de 23

• El rango permisible de CSS en documentos de contenido de EPUB 3 se amplió desde un

Validación de documentos EPUB 3

Normalmente, usted interactúa con EpubCheck a través de la línea de comandos, como se

Epubcheck Version 3.0b3

No errors or warnings detected.

Si obtiene el error java.lang.NoClassDefFoundError: com/thaiopensource/validate/

• Ayudar a aislar problemas.

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 3 de 23

Listado 1. Ejecutando EpubCheck 3 contra un único tipo de archivo

No errors or warnings detected.

Navegación y jerarquía en documentos EPUB 3

Listado 2. Un END mínimo

El elemento <nav> de HTML5 es necesario (como lo es epub:type valor toc).

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 4 de 23

Listado 3. Incluyendo un END en un EPUB Package Document (OPF)

La inclusión de un archivo END es necesaria en EPUB 3. También se puede incluir un archivo

Presentación visual del END

Listado 4. Incluyendo el END en el flujo de lectura

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 5 de 23

Listado 5. Eliminando subsecciones de la presentación visual de un TOC

Listado 6. Configurando la propiedad exhibir

En sistemas de lectura o navegadores no compatibles, la falta de estilo para el atributo hidden

Figura 1. TOC de END sin atributo oculto o CSS

Figura 2. El TOC de END con atributo oculto aplicado

De manera predeterminada, la lista ordenada HTML genera un conjunto de listas numeradas.

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 6 de 23

Listado 7. Configurando el estilo de los elementos de lista

Migrando de NCX a END mediante XSLT

El Listado 8 proporciona la infraestructura básica para la generación de un documento HTML para

Listado 8. Declarar los espacios de nombres necesarios para el NCX y END

Observe la inclusión obligatoria del espacio de nombre http://www.idpf.org/2007/ops , que

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 7 de 23

Listado 9. Produciendo el navMap

El Listado 10 proporciona un ejemplo de un NCX jerárquico.

Listado 10. Muestra de un NCX organizado jerárquicamente

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 8 de 23

<navPoint id="np2" playOrder="2">

<navPoint id="np3" playOrder="3">

La transformación del archivo en el Listado 10 mediante el XSLT resulta en la salida en el Listado

Listado 11. Salida de la transformación de NCX a END

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 9 de 23

• Actualización de metadatos en el archivo OPF desde el antiguo esquema Dublin Core al

Normalmente, no es necesario modificar el contenido XHTML 1.1 para producir documentos de

Directrices de desarrollo EPUB 3

Cuándo producir EPUB 3

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 10 de 23

Diseño de eBook adaptable

Diseño adaptable avanzado en EPUB 3

Crear publicaciones con bastantes diseños en EPUB 3 con Pagina 11 de 23