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, 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 300ppp.
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Portada del libro</title> </head> <body style="margin: 0; text-align:center;"> <div> <img src="images/portada.jpg" alt="Nombre del libro" style="height:100%"/> </div> </body> </html>
Con este código conseguimos que la imagen quede centrada con
text-align:center y que ocupe al alto de la pantalla (y se redimensione) con height:100%.
Definir la imagen en el archivo OPF. Tenemos que insertar unas líneas en nuestro archivo OPF para que tanto el archivo xhtml que contiene la portada como el archivo de imagen estén presentes. Lo haremos con estas definiciones en la sección <manifest>:
<item id="portada" href="portada.html" media-type="application/xhtml+xml"/> <item id="imagen-cubierta" href="portada.jpg" media-type="image/jpeg"/>
El
id que asignamos es importante, ya que debemos repetirlo un poco más abajo, en la sección <spine>:<itemref idref="cover" 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.Ademas, hay que añadir otra línea más en el bloque
<metadata> del archivo OPF. Es imprescindible utilizar el atributo name="cover" para definir que el elemento es la portada del libro y que es una imagen:<meta name="cover" content="cover-image"/>
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 href="portada.html" type="cover" title="Portada"/>
Siguiendo estos pasos tendremos una portada que funcionará perfectamente en cualquier dispositivo de lectura y que se adaptará a cualquier tamaño de pantalla.
Etiquetas:cubiertas, EPUB, portadas
Trackback from your site.
