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

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.

Liza Daly, Vice-President of Engineering, Safari Books Online

Photo of Liza DalyLiza 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.



24-07-2012

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.

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>).
  • 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
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
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
...
  <!-- Generate a complete nav element and sub-list out of the navMap, 
       then recurse through the nodes -->
  <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"/>

      <!-- Every navPoint must have a navLabel and content -->
      <a href="{ncx:content[1]/@src}">
        <xsl:apply-templates select="ncx:navLabel"/>
      </a>

      <!-- Does this element have a sub-nav? -->
      <xsl:if test="ncx:navPoint">
        <ol>
          <xsl:apply-templates select="ncx:navPoint"/>
        </ol>
      </xsl:if>
    </li>
  </xsl:template>

  <!-- These nodes only contain text -->
  <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>

    <navPoint id="np2" playOrder="2">
      <navLabel>
        <text>I: Miss Brooke</text>
      </navLabel>
      <content src="book1.html" />

      <navPoint id="np3" playOrder="3">
        <navLabel>
          <text>Chapter 1</text>
        </navLabel>
        <content src="chapter1.html" />
      </navPoint>
      <navPoint id="np4" playOrder="4">
        <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
<?xml version="1.0"?>
<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)
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
<?xml version="1.0"?>
<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
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) { 

    div[epub|type="chapter"] {
        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
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) { 
    div[epub|type="chapter"] {
        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
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
<?xml version="1.0"?>
<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
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ónNombretamaño
XSLT and sample files for NCX transformationncx-to-end.zip5KB
A sample EPUB 3 demonstrating advanced CSS3 layoutchildrens-book-epub.zip139KB
A sample EPUB 3 demonstrating MathMLmathml-epub.zip3KB

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

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=
ArticleID=827073
ArticleTitle=Crear publicaciones con bastantes diseños en EPUB 3 con HTML5, CSS3 y MathML
publish-date=07242012