Cómo crear una portada para un libro electrónico

Las cubiertas (o portadas) siguen teniendo una importancia capital en la experiencia de lectura y compra de libros electrónicos. Aunque en muchas ocasiones no se diseña una cubierta específica para la edición digital de un libro electrónico, sí que se aprovecha la original para utilizarla como elemento ornamental y, sobre todo, como reclamo al posible comprador en las tiendas online.

Para insertar una imagen de cubierta correctamente en un archivo epub hay que seguir una serie de pasos muy sencillos. Sólo hay que modificar algunos de los archivos que componen nuestro epub, aunque hay que ser concienzudos a la hora de aplicar todos estos cambios:

Elegir las características de la imagen. Las características básicas serían que tuviese formato JPG (ideal para fotografía) o PNG (en caso de que se haya generado a partir de ilustraciones vectoriales o gráficos). El tamaño no debería superar los 1000px, ni en alto ni en ancho; esta medida es más que suficiente para casi todos los dispositivos de lectura (excepto para algunos tablets), por lo que no es recomendable añadir más peso al archivo con imágenes mayores. La resolución, eso sí, debería ser de al menos 150ppp.

Definir los estilos para la portada. Para ello creamos un archivo xhtml que contendrá únicamente nuestra imagen de cubierta (lo llamaremos «portada.html»). El código será muy simple, ya que sólo queremos que contenga el archivo de imagen y lo muestra de forma apropiada:

<div><img style="width: 100%; text-align: center;"
 src="images/portada.jpg" alt="Nombre del libro" /></div>

Con este código conseguimos que la imagen quede centrada con text-align:center y que ocupe al ancho de la pantalla (y se redimensione si es necesario) con width:100%.

Definir la imagen en el archivo OPF. Tenemos que insertar unas líneas en nuestro archivo OPF para que la portada esté presente. Lo haremos con esta definición en la sección <manifest>:

<item id="portada" href="portada.html"
 media-type="application/xhtml+xml" />

Y con esta otra en la sección <metadata>:

<meta name="cover" content="portada" />

Es imprescindible utilizar el atributo name="cover" para definir que el elemento es la portada del libro y que es una imagen. El valor content que asignamos es importante, ya que debemos repetirlo un poco más abajo, de nuevo en la sección <manifest>:

<item id="portada" href="image/cover.jpg" media-type="image/jpeg"/>

Ademas, hay que añadir otra línea más en el bloque <spine> del archivo OPF.

<itemref idref="portada" linear="no" />

El atributo linear="no" informa de que la portada no forma parte del orden natural de lectura, aunque esté presente en el libro.
Por último, añadiremos un poco más de código en la sección <guide> para ayudar a algunos sistemas a mostrar la imagen como portada cuando así se requiera (como ocurre con las iBookStore de Apple):

<reference type="cover" title="Portada" href="portada.html"/>

Siguiendo estos pasos tendremos una portada que funcionará perfectamente en cualquier dispositivo de lectura y que se adaptará a cualquier tamaño de pantalla.