X Richlayoutepub PDF

Copyright IBM Corporation 2012 Marcas
Crear publicaciones con bastantes diseos en EPUB 3 con

HTML5, CSS3 y MathML
Pagina 1 de 23
Crear publicaciones con bastantes diseos en EPUB 3
con HTML5, CSS3 y MathML
Explore el estndar abierto de prxima generacin de eBook para
diseo avanzado y tipografa
Liza Daly
Vice-President of Engineering
Safari Books Online
24-07-2012
EPUB 3.0, la ms reciente revisin del estndar de formato XML de la industria para e-book,
salta a la moderna tecnologa web adoptando HTML5 y CSS3. Mantiene su enfoque en kits de
herramientas basados en XML al requerir serializacin de XHTML y aadir vocabularios XML
adicionales, como MathML y SVG. EPUB 3 ofrece una variedad de opciones para el desarrollo
de publicaciones nativas digitales avanzadas. En este artculo, aprenda a crear pginas ricas
en diseos utilizando algunos recursos nuevos en EPUB 3.
Introduccin
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 mayora 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 especificacin, y se unen bajo la etiqueta EPUB comn:
Especificacin de contenedor
Define el mtodo por el cual se empaqueta un documento EPUB.
Publicacin EPUB
Incluye todos los metadatos acerca de los contenidos del eBook, incluyendo: manifiesto del
paquete, ttulo bsico, metadatos del autor y, en EPUB 3, definiciones sobre a cules
recursos avanzados la publicacin 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 publicacin. Los
documentos de contenidos tambin incluyen recursos binarios como imgenes, multimedios,
y, potencialmente, documentos XML definidos externamente.
developerWorks ibm.com/developerWorks/ssa/
Pagina 2 de 23
Abreviaciones comnmente 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 artculo se exploran algunos de los recursos de EPUB 3. Usted aprender acerca de la
validacin de documentos EPUB 3, navegacin, jerarqua y directrices de desarrollo. Un ejemplo
describe el proceso de adaptacin de una pgina de un libro para nios en EPUB 3.
Descargue los ejemplos de este artculo.
Prerrequisitos
El cdigo de muestra y los ejemplos de este artculo suponen un conocimiento bsico de la
especificacin 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 diseo y formato de HTML4 y CSS2, que son
ms que suficientes para publicaciones de texto pesadas. Sin embargo, editores y autores
encontraron que EPUB 2 no poda manejar muchos tipos de contenido y casos de uso, como
libros de multimedios, libros con diseo complejo, publicaciones matemticas y documentos
interactivos. IDPF y la comunidad de eBook publicaron la especificacin para EPUB 3 en octubre
de 2011.
Sistemas de lectura EPUB 3
Hasta diciembre de 2011 no existan sistemas de lectura con soporte oficial para EPUB
3. No obstante, muchos sistemas de lectura escritos utilizando motores de navegacin
compatibles con HTML5, como WebKit, dan soporte a la mayor parte de la especificacin
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 artculo incluye tcnicas 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
serializacin XHTML de HTML5. Era un requerimiento fundamental incluir los elementos de
multimedios de HTML5 (<video>, <audio>y <canvas>).
ibm.com/developerWorks/ssa/ developerWorks
Pagina 3 de 23
El rango permisible de CSS en documentos de contenido de EPUB 3 se ampli desde un
subconjunto de CSS2.1 a un conjunto de mdulos maduros de CSS3 pertinentes para
documentar autoras.
MathML se aadi 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 visualizacin de CSS. Web Open Font Format se aadi como un formato de
fuentes aceptable.
Soporte explcito para modos de escritura y scripts no occidentales, incluyendo diseo
vertical en scripts japoneses y otros asiticos.
Soporte opcional para la interactividad mediada por JavaScript mediante un modelo de
seguridad personalizado.
Los metadatos permisibles en documentos de publicacin se ampliaron, incluyendo algn
soporte para Resource Description Frameworkinattributes (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 an se permite para
compatibilidad con versiones anteriores.)
Validacin de documentos EPUB 3
Debido a que EPUB 3 se basa en serializaciones XML para la mayora de los tipos de contenido,
puede aprovecharse para validacin automtica. La herramienta EpubCheck es el mtodo
convencional para probar la validez y conformidad de los documentos EPUB. EpubCheck es
una biblioteca de fuente abierta (Berkeley Software Distribution-licensed) Java . Una versin
preliminar para desarrolladores est disponible para usar con documentos EPUB 3 y se utiliza en
todo este artculo. Consulte Recursos para obtener los enlaces a la versin ms reciente.
Se recomienda enfticamente que utilice la extensin .xhtml para todos los documentos de
contenido de EPUB. Los navegadores no interpretarn el contenido HTML como application/
xhtml+xml sin esa extensin. El modo de procesamiento de XML es necesario al trabajar con
muchos de los recursos demostrados en el presente artculo, como espacios de nombres de CSS.
Normalmente, usted interacta con EpubCheck a travs de la lnea de comandos, como se
muestra a continuacin.
$ 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, asegrese de que la biblioteca o directorio que vino con la
distribucin 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 artculo, que puede:
Ayudar a aislar problemas.
Pagina 4 de 23
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.
Navegacin y jerarqua en documentos EPUB 3
Aunque el archivo NCX TOC en EPUB 2 daba soporte a un amplio conjunto de marcas para
navegacin jerrquica y asignacin de pginas, se derivaba del Digital Talking Book de Digital
Accessible Information System (DAISY) (una especificacin para producir eBooks accesibles
para personas con problemas de lectura). La dependencia en el correctamente especificado
formato DAISY pretenda 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 confusin sobre
qu partes del NCX eran necesarias en EPUB result en fragmentacin 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 mnimo
<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).
Pagina 5 de 23
Declarando el END
Incluir el END en una publicacin mediante declaracin 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 inclusin de un archivo END es necesaria en EPUB 3. Tambin 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.
Presentacin visual del END
A diferencia del NCX, se puede incluir el END en el flujo del contenido del libro. En EPUB 2, si se
quera mostrar a los usuarios una TOC personalizada (en vez de depender del soporte integrado
de TOC en el eReader), se tena que producir dos copias del mismo contenido,una en el NCX
y una como un documento de contenido HTML. END elimina esta duplicacin y permite una gran
flexibilidad en la presentacin de alguna parte o todo el TOC en el flujo de contenido.
Para aadir el END al flujo de contenido, sencillamente inclyalo 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 jerarquas profundas, como documentacin tcnica, tal vez desee incluir
todos los niveles de seccin 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
presentacin a los usuarios.
Pagina 6 de 23
Listado 5. Eliminando subsecciones de la presentacin 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 podra 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 mayora de los navegadores web modernos dan soporte nativo a hidden . Es una buena
idea incluir CSS para configurar explcitamente la propiedad exhibir de estos elementos, como en
el Listado 6. Debido a que el archivo END es solo otro archivo HTML, se puede aadir 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 despus 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 especificacin de END define, " . . . el estilo de visualizacin predeterminado
Pagina 7 de 23
de elementos de la lista debe ser equivalente al CSS list-style: none." Para lograr esta
presentacin, aada 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 ms opciones para el diseo y control, si migra desde un flujo
de trabajo EPUB 2 a uno EPUB 3, considere empezar la conversin desde los documentos NCX
existentes. Debido a que la entrada y salida de documentos son XML, esta es una aplicacin
perfecta para XSLT.
El Listado 8 proporciona la infraestructura bsica para la generacin 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 inclusin 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 inflexin semntica de EPUB (adicional se refiere al propsito especfico 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 Semntica Estructural para proporcionar un
contexto para el software de accesibilidad, as como para el procesamiento de mquina. Consulte
Recursos para obtener informacin sobre los valores incluidos en dicho vocabulario.
Para un ejemplo completo que muestre la conversin de otros tipos de mapa de pgina,
consulte la aplicacin nend de fuente abierta listada en Recursos.
Con el esquema bsico establecido, empiece a caminar por la jerarqua de TOC en los elementos
de NCX y salidas XHTML correspondientes. Aunque el NCX permite diferentes tipos de listas de
Pagina 8 de 23
pginas, 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 jerrquico.
Listado 10. Muestra de un NCX organizado jerrquicamente
<?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">
Pagina 9 de 23
<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 transformacin del archivo en el Listado 10 mediante el XSLT resulta en la salida en el Listado
11 a continuacin. Usted puede descargar los archivos de ejemplo.
Listado 11. Salida de la transformacin 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>
Pagina 10 de 23
...
Debido a que los valores de @id se conservan desde el archivo original, usted debe ser capaz de
escribir herramientas de validacin para garantizar que todos los nodos originales son capturados.
Otras opciones para posteriores transformaciones incluyen:
Actualizacin de metadatos en el archivo OPF desde el antiguo esquema Dublin Core al
esquema meta de @property , como se define en la especificacin 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 informacin semntica,
como al tirar informacin de un sistema de administracin de contenido o de otro repositorio de
documentos, considere aplicar inflexin semntica a la salida. La especificacin EPUB 3 cuenta
con ms informacin sobre inflexin semntica (consulte Recursos).
Directrices de desarrollo EPUB 3
Hasta que los sistemas de lectura de EPUB 3 estn disponibles, es prematuro recomendar
mejores prcticas especficas. Sin embargo, EPUB 3 est basado en tecnologas web de rpida
maduracin. Ya hay suficiente informacin para hacer recomendaciones generales acerca de
cmo utilizar las tecnologas subyacentes y cundo utilizar las mejores prcticas existentes para
producir un marcado semntico slido y accesible.
Cundo 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 diseo de EPUB 3. Usted debe
beneficiarse de las mejoras semnticas y de los metadatos enriquecidos en EPUB 3 mientras
que todava produce documentos que pueden leerse en eReaders ms antiguos. En la prctica,
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 mayora de los sistemas de lectura en conformidad
con EPUB 2. EPUB 3 tambin fue diseado para ser compatible con versiones posteriores en
trminos de soporte para el sistema de lecturaun sistema de lectura EPUB 3 debe dar soporte a
documentos EPUB 2 vlidos.
Muchos sistemas de lectura ya dan soporte a un tipo de "EPUB 2.5," donde se permite el marcado
HTML5 (especialmente en relacin 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.
Pagina 11 de 23
Diseo de eBook adaptable
El mdulo 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 condicin particular de visualizacin, normalmente basada en el tamao del puerto de
visualizacin. Usted tambin puede utilizar Media Query para apuntar a proporciones especficas
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 mviles. Tomados en conjunto, estos principios se denominan diseo
web adaptable. Las tcnicas han demostrado ser eficaces en la web y, de alguna manera, son
an ms aplicables a los diseadores de libros. Los diseadores de libros bosquejan desde hace
dcadas de investigacin y experimentacin cmo presentar eficazmente informacin visual
en diversos tamaos y orientaciones. (Consulte Recursos para obtener ms informacin sobre
diseo web adaptable.)
La mayor parte de los eBooks contienen exclusiva o principalmente texto. Sin embargo, muchos
tipos de publicaciones requieren un diseo ms rico por razones de marketing o por la naturaleza
esencial del contenido. Los libros que contienes muchos diseos han sido considerados malos
candidatos para la conversin de eBook, pero EPUB 3 y su uso de HTML5 y CSS3 permiten un
diseo avanzado. Con gran poder viene una gran responsabilidad, sin embargo. No se puede
descuidar a los usuarios de dispositivos mviles que quieren leer el contenido fcilmente y an
con diseos llamativos. Aqu es donde las tcnicas combinadas de diseo de CSS3 y el diseo
adaptable de eBook se juntan.
Diseo adaptable avanzado en EPUB 3
Libros ilustrados, libros de cocina, libros de texto y de poesa han sido difciles de convertir en
contenido "reflowable". En esta seccin, vea cmo adaptar la pgina de un libro de poesa para
nios, en la Figura 3, en EPUB 3. La palabra adapt es utilizada en lugar de convert, porque el
proceso es mucho ms artstico que tcnico.
Pagina 12 de 23
Figura 3. Una pgina de Abroad por Thomas Crane (imagen de dominio
pblico del Archivo de Internet)
El enfoque consiste en capturar el texto como XHTML y luego extraer algunas de las imgenes
para evocarpero no reproducirel diseo original. Debido a que EPUB 3 supone un contexto de
procesamiento XHTML5/CSS3, puede utilizar un marcado semntico mnimo en vez de acomodar
muchos navegadores antiguos, como lo hara en la web abierta. El Listado 12 muestra el marcado
XHTML para el contenido.
Listado 12. Marcado de poesa
<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>
Pagina 13 de 23
<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 imgenes. Para hacer ms fcil el diseo adaptable, las imgenes se
proporcionarn en el CSS. Aunque muchos defensores del desarrollo web adaptable propugnan
una estrategia de "mvil primero", puede ser ms fcil empezar por adaptar el contenido de
impresin con una pantalla de tamao 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 diseo de tamao 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;
}
Pagina 14 de 23
/* 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 mdulo 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 flexin semntica EPUB aplicada (el atributo
@epub:type ) en vez de crear clases separadas solo para estilos. El documento HTML debe
usar una extensin .xhtml para que la mayora de los navegadores procesen correctamente los
espacios de nombre.
Figura 4. Pgina del libro Abroad presentado en una pantalla de tamao de
pizarra digital
Con la imagen alineada a la derecha y un borde decorativo grande, el diseo en la Figura 4 podra
decirse que evoca muy bien la pgina original. Sin embargo, esta disposicin no es adecuada
para un dispositivo mvil en modo retrato, donde el ancho ser insuficiente para la imagen y
el texto. Para dispositivos mviles, que suelen tener unos 480 pxeles de ancho, se pueden
reemplazar varios elementos, como en el Listado 14. Con el CSS en el Listado 14:
Pagina 15 de 23
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 ttulo se disminuye y se centraliza.
El texto del poema va a estar ms centralizado en vez de muy alineado a la izquierda.
Listado 14. CSS para diseo de retrato tamao de telfono
@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 diseo. La Figura 5 muestra el resultado
distribuido en dos pginas.
Pagina 16 de 23
Figura 5. Pgina del libro Abroad presentado en pantalla tamao de telfono
La presentacin angosta funciona bien en un diseo de retrato, pero un poema corto fcilmente
puede colocarse entero en la mayora de las pginas de paisaje. Usted puede aadir una consulta
de medios final para permitir a los dispositivos orientados a paisaje disear el poema en varias
columnas. Este recurso forma parte del mdulo de Texto de CSS y es parte esencial del soporte a
CSS de EPUB 3. El CSS para el diseo de paisaje de tamao de telfono est en el Listado 15.
Listado 15. CSS para diseo de paisaje de tamao de telfono
@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.
Pagina 17 de 23
Figura 6. Pgina del libro Abroad presentado en una pantalla tamao de
telfono en orientacin de paisaje
Incluyendo MathML en publicaciones
En EPUB 2, las publicaciones podan incluir contenido matemtico solo como imgenes
rasterizadas o SVG. Aunque la matemtica de SVG puede producir resultados llamativos,
resulta impenetrable para los lectores de pantalla, adems de una escritura difcil. Las imgenes
rasterizadas son peores; no proporcionan ni accesibilidad ni buena escala para las diferentes
fuentes y tamaos 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 rster. Los lectores
EPUB 3 son necesarios para dar soporte por lo menos a las presentaciones de MathML, en la
mayora de los casos.
Aunque MathML es un tipo de contenido esencial, es necesario que se declare cules pginas
XHTML tienen MathML en el archivo OPF, como en el Listado 16.
Listado 16. Declaracin 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 ecuacin 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
Pagina 18 de 23
<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 smbolos matemticos apropiados para que todos los tipos de ecuaciones sean
correctamente presentados. Consulte Recursos para informacin adicional sobre Fuentes STIX
para publicaciones cientficas.
Figura 7. Ecuacin matemtica 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
Pagina 19 de 23
numricas antes de incluirlas en una publicacin 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 Semntica, familiarcese con las opciones de flexin semntica
en el Vocabulario de Semntica Estructural de EPUB 3.
La semntica de HTML5 y los roles de Accessible Rich Internet Applications Suite (WAI-
ARIA) ofrecen un mtodo atrayente para enriquecer contenidos para consumo mediante
dispositivos de ayuda o algoritmos de aprendizaje automtico.
EPUB 3 se est extendiendo de manera activa. Es probable que recursos de los nuevos mdulos
de CSS, como Regiones de CSS, se incorporen en futuras revisiones.
Pagina 20 de 23
Descargas
Descripcin Nombre tamao
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
Pagina 21 de 23
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 visin general de la actual revisin del estndar de
EPUB.
EPUB Publications 3.0 Recommended Specification: Lea sobre la semntica en nivel de
publicacin y los requerimientos de conformidad para EPUB 3, incluyendo el formato
del Paquete de Documentos y reglas para cmo este documento y otros Recursos de
Publicaciones sea asocian para crear una Publicacin en conformidad con EPUB.
EPUB 3 Structural Semantics Vocabulary: Aprenda ms sobre el conjunto de propiedades
relacionadas a la descripcin de semntica 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 tcnicas y los principios de diseo
de CSS, incluyendo cuadrculas fluidas, imgenes 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 artculos tcnicos, consejos, tutoriales, estndares y
Redbooks de IBM.
Certificacin IBM XML: Conozca cmo puede usted convertirse en un Desarrollador
Certificado IBM en XML y en tecnologas relacionadas.
developerWorks technical events and webcasts: Mantngase actualizado con la tecnologa
en estas sesiones.
developerWorks on-demand demos: Asista a demostraciones que van desde instalacin
y configuracin 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 instalacin
de productos y configuracin para principiantes hasta funcionalidades avanzadas para
desarrolladores experimentados.
Obtener los productos y tecnologas
EpubCheck: Descargue la versin 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 cientfica y de
ingeniera.
Pagina 22 de 23
IBM product evaluation versions: Descargue o vaya a explore the online trials in the IBM
SOA Sandbox y obtenga experiencia prctica 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: Conctese con otros usuarios developerWorks mientras
explora los blogs, foros, grupos y wikis dirigidos a desarrolladores.
Pagina 23 de 23
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 mvil en HTML5. Es miembro del
consejo directivo del International Digital Publishing Forum (FIAM), la organizacin
que patrocina y desarrolla la especificacin 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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

X Richlayoutepub PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Copyright IBM Corporation 2012 Marcas

Crear publicaciones con bastantes diseos en EPUB 3 con

Anda mungkin juga menyukai