Feeds:
Entradas
Comentarios

Archive for the ‘ePub’ Category

Curso de creación de un epub (IV)

En anteriores entradas de nuestro curso hemos aprendido a crear la estructura básica de un ePub, a introducir nuestro primer capítulo, y a insertar imágenes. Y lo hemos hecho siempre teniendo en cuenta que el dispositivo final de lectura no va a tener un tamaño definido, por lo que hemos hecho un ePub donde los elementos se puedan redistribuir de forma coherente.

En esta entrega vamos a ver un poco más en profundidad el tema de los estilos. Ya hemos visto cómo, a nivel muy básico, un capítulo se escribe en nomenclatura HTML como sigue:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../styles/style001.css"
       type="text/css" />
     <title>p03_cap01.xhtml</title>
   </head>
   <body>
     <div id="capitulo_01">
       <h1 class="chapter_title" id="cap01">
         <i><b>Capítulo 1</b></i></h1>
       <p>&nbsp;</p>
       <p>Aquí el texto del párrafo.</p>
     </div>
   </body>
</html>

HTML puede llegar a ser muy complejo, pero el HTML necesario para construir un ePub no lo es. Aquí, prescindiendo de la cabecera, que siempre se escribe igual, tenemos una etiqueta <html> de apertura del documento y al final una </html> de cierre. Dentro, una cabecera, encerrada entre etiquetas <head> y </head>, y el cuerpo propiamente dicho del documento encerrado entre etiquetas <body> y </body>.

Dentro de las etiquetas <body> es donde van los elementos que ya sí se muestran en el dispositivo. En el ejemplo de antes tenemos un contenedor (las etiquetas <div> y </div>), cuya función es divisoria, y luego dentro el texto, formado por un título (las etiquetas <h1> </h1>) y dos párrafos (las etiquetas <p> </p>).

Pero, ¿cómo sabrá un dispositivo de lectura cómo tiene que presentar el texto, es decir, su tamaño de letra, márgenes, sangrías, etc.?

El secreto de todo eso está en la línea de la cabecera donde pone:

<link rel="stylesheet" href="../styles/style001.css"
 type="text/css" />
 
Esta línea está indicando que para formatear este documento debe utilizarse una hoja de estilos (en inglés stylesheet) que se encuentra en cierta ubicación dentro del fichero ePub. Recordemos que un fichero ePub no es ni más ni menos que una carpeta comprimida en un fichero ZIP renombrado como .epub. Dentro de esa carpeta podemos tener una o varias hojas de estilos, uno o varios capítulos, varias imágenes, etc. Para referirnos a uno de esos elementos en concreto utilizamos la misma nomenclatura que usamos para dar la ruta de un fichero en el ordenador, pero siempre ponemos dos puntos delante indicando que la ruta empieza en la carpeta raíz del ePub.

En nuestro ejemplo, la hoja de estilos a usar es la indicada en esta propiedad:

href="../styles/style001.css"

Es decir, dentro de la carpeta raíz del ePub habrá una subcarpeta llamada “styles” que contendrá el fichero de estilos que necesitamos, llamado “style001.css”.

Este fichero de estilos hay que tener la precaución de indicar su existencia en el fichero content.opf que ya vimos en anteriores capítulos del curso. Revisa los capítulos anteriores y verás que efectivamente este fichero CSS aparece también referenciado en el fichero content.opf.

Vamos ahora con el fichero CSS en cuestión. Si lo abrimos con un editor y vemos su contenido, observaremos que está formado por una serie de entradas que tienen todas la misma estructura:

selector {
 propiedad1:valor1;
 propiedad2:valor2;
 etc.
}

Lo anterior se denomina una “regla CSS” y es lo que permite que un documento termine presentado como queremos. Con ejemplos se verá mejor cómo funciona:

p {
 margin:0pt;
 text-indent:0em;
 text-align: justify;
 font-size: 1.00em;
}

La regla anterior es una que se aplicará al texto contenido dentro de cualquier etiqueta <p> de párrafo. La regla establece que alrededor del texto no habrá margen (margin:0pt;), que la primera línea no estará indentada (text-indent:0em;), que el párrafo estará justificado ocupando todo el ancho (text-align:justify;) y que el tamaño del texto será el por defecto del dispositivo (font-size:1.00em;). Recuerda que el tamaño del texto lo puede modificar el lector en su aplicación de lectura por lo que los tamaños es mejor pensarlos en términos relativos al tamaño por defecto, que en valores absolutos como píxeles o centímetros.

Como vemos, el selector actúa como un filtro. De todo el documento, selecciona aquellas partes del documento que serán formateadas. Y cada propiedad que va dentro del selector modifican sólo una característica del texto.

Veamos más ejemplos. ¿Qué pasa si queremos formatear ciertos párrafos de un modo y otros de otro? ¿Cómo distinguimos eso?

p.indent {
 text-indent:2em;
}

La regla anterior se traduce por “todos los párrafos que además vengan etiquetados con el nombre indent”. Con la regla anterior hacemos que esos párrafos tengan la primera línea indentada.

¿Y cómo se etiqueta un párrafo? Del siguiente modo:

<p class="indent">Aquí va el texto del párrafo, etc.</p>

Lo único que hay que hacer es colocar al párrafo el atributo class con el mismo valor que hemos puesto en el selector de la regla. En el caso anterior class=”indent” identifica a ese párrafo con el nombre indent. Se puede aplicar el atributo class a cualquier elemento de nuestro fichero HTML.

Además, en la regla particular no hace falta redefinir las propiedades que ya teníamos definidas en la regla general. La regla general para todos los párrafos se aplicará primero, y después se aplicará la particular. De modo que en nuestro ejemplo todos los párrafos seguirán teniendo el texto justificado, pero sólo los párrafos marcados con class=”indent” tendrán la primera línea indentada.

En CSS se dispone de un número abrumador de propiedades con las que se puede controlar cualquier aspecto del texto: color, tamaño, fuente, posición, efectos… Pero la dinámica es siempre la misma. Se define una regla en el fichero CSS que seleccione sólo aquellos elementos de texto que queremos formatear, y en el texto, marcamos los elementos con etiquetas class. De este modo podemos diferenciar lo que es un título, de lo que es el párrafo normal, o bien una cita, o cualquier otra porción de texto a diferenciar. Al final en el fichero HTML sólo va el texto puro y duro, junto a unas etiquetas class, y todo el formato está definido en el fichero CSS.

Como lo mejor es ver ejemplos, aquí dejo un nuevo epub de prueba en el que he formateado un primer capítulo con unos cuantos ejemplos de diferentes formatos. Bájate el fichero, descomprímelo con cualquier descompresor ZIP, y echa un vistazo al contenido. Fíjate en el fichero CSS y en el fichero HTML para ver cómo estoy aplicando el formato solamente a las porciones de texto que quiero.

ePub sample 4

Espero que estas explicaciones sobre CSS ayuden. Pero si de verdad quieres conocer todas las reglas CSS que se pueden definir, una buena referencia la puedes encontrar aquí:

http://www.w3schools.com/css/default.asp

Hasta pronto.

Anuncios

Read Full Post »

Curso de creación de ePub (III)

Ya hemos visto en la página de portada cómo insertar una imagen. Vamos a verlo un poco en más detalle.

Mi recomendación es que para insertar una imagen incluyamos siempre un código HTML como el siguiente:

<p>
<img src=”../images/mi_imagen.jpg” alt=”Descripción de la imagen” style=”max-width: 100%; max-height: 100%;”/>
</p>

La imagen, en el caso de arriba, se llamará mi_imagen.jpg y estará localizada en la carpeta images. Cambia el nombre de este fichero adecuadamente por el tuyo. El texto que figura en la propiedad alt es un texto que aparecerá o será escuchado en lugar de la imagen. Coloca ahí un título o descripción de tu imagen. Este texto no será visible.

El principal problema de las imágenes es cómo van a quedar colocadas. En un ePub, la posición de los elementos no es fija, ya lo hemos visto, y eso es porque es un formato que está pensado para que el libro pueda ser leído en cualquier tamaño de dispositivo. No podemos, por tanto, dar a nuestra imagen unas dimensiones fijas en píxeles, porque lo que podría ser apropiado para un PC, podría no serlo para una tablet o un smartphone.

epub_sample

Mi consejo para imágenes grandes es que siempre que se pueda se deje la imagen ocupando todo el ancho del dispositivo, y que el texto se coloque antes y después, pero no alrededor de la imagen. Lo importante de un libro, antes que cualquier otra cosa, es la legibilidad. Y en el caso de un ePub, puesto que es un formato pensado para cosas tan distintas como un teléfono, un ereader o una pantalla de TV, lo mejor es que la imagen se vea bien. Si insertamos una imagen en un libro y la reducimos de tamaño al 50% de la página con la finalidad de que la imagen quede ajustada al margen izquierdo y el texto al derecho, en un teléfono el texto quedaría con un espacio tan nimio, y la imagen quedaría tan pequeña, que resultaría ilegible. Pensemos una cosa: ePub no es un formato para hacer libros de texto vistosos, con ilustraciones, columnas laterales, y texto fluyendo de una página a otra de forma compleja. Para eso es mejor el PDF.

Un tema a considerar es el tamaño de la imagen. Hay tener en cuenta que los dispositivos de lectura tienen un límite al número de píxeles. Pantallas de PC, tablets, ereaders, y smartphones, todos tienen unas limitaciones al número de píxeles. Meter imágenes de más de esa cantidad de píxeles no tiene sentido, porque la cantidad extra de píxeles no se aprovechará. Por ejemplo, en el caso del iPad 3 y sucesivos, la resolución de la pantalla es 2048 x 1536 píxeles. Es raro encontrar resoluciones más alta que esta en una tablet, y también en smartphones y pantallas para PC, así que podría tomarse como tope. Si tienes imágenes más grandes, usa un programa de edición de imágenes para hacer un escalado de la imagen y reducirla.

Otro tema es la orientación del dispositivo. El usuario siempre puede girar su tablet o smartphone y ver el libro en vertical o apaisado. No interesa usar imágenes que tengan una orientación muy definida, porque al ver esa imagen en la orientación opuesta no se verá bien. Interesa ir hacia imágenes que tengan la misma relación de alto y ancho, para que se vean igual independientemente de la orientación.

Nada más por hoy. Recuerda que debajo de cada capítulo del curso estoy incluyendo los ejemplos ya hechos. Los puedes descargar, descomprimir, y ver el contenido si tienes dudas.

Descargar el ejemplo: http://bit.ly/1a3SkUm

 

Read Full Post »

Curso de creación de un ePub (II)

En la entrada anterior habíamos dejado el fichero ePub con únicamente la portada y la página de título. En esta nueva entrada vamos a proceder a añadir contenido al libro.

Para ellos sigue estos pasos:
1. En la carpeta “text” añade un fichero por cada capítulo. Llámalos como prefieras de modo que te sirva para identificarlos. Yo voy a darte un ejemplo añadiendo un único capítulo a mi libro y por tanto crearé un fichero llamado “p03_cap01.xhtml”. Recuerda que la extensión de los ficheros de contenido siempre son xhtml.
2. Añade el siguiente contenido al fichero anterior:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <link rel="stylesheet" href="../styles/style001.css" 
       type="text/css" />
    <title>p03_cap01.xhtml</title>
 </head>
 <body>
    <div id="capitulo_01">
       <h1 class="chapter_title" id="cap01">
          <i><b>Capítulo 1</b></i></h1>
       <p>&nbsp;</p>
       <p><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing 
elit. Cras nec magna sed sapien condimentum tempus. Maecenas orci erat, 
aliquam vitae est eget, tempor ultrices nisl. Integer est felis, pretium 
et cursus vitae, ullamcorper et sem. Suspendisse quis aliquet enim, eu 
lobortis leo. Curabitur sed leo leo. In at ipsum a orci eleifend congue 
eget in ante. Donec eu odio eu dolor eleifend egestas. Sed rutrum ultrices 
ultricies. In pharetra magna ut eros pharetra cursus. Donec fringilla 
aliquam mi vitae commodo. Sed quis dolor tempus, aliquam massa quis, 
gravida erat. Vestibulum commodo mi in vestibulum venenatis.</p>
      <p>Etiam eu ante nulla. <i>Etiam fermentum sem risus, sit amet 
fermentum enim tristique at</i>. Proin turpis libero, ultrices rhoncus 
mi at, molestie aliquam nisi. Aenean vel feugiat justo, in dapibus 
risus. Praesent est justo, interdum ut iaculis sit amet, laoreet eu 
purus. Ut sollicitudin lacinia dignissim. Nam rutrum purus quam. Ut 
pretium augue nec tincidunt rhoncus. Fusce adipiscing a eros a iaculis. 
Aenean at scelerisque ligula. Quisque varius massa id sodales sodales. 
Sed ac cursus justo. Nam in quam mauris. Maecenas adipiscing rhoncus 
faucibus. Aenean porta diam massa, sed molestie neque ultrices vitae.</p>
      <p>Sed blandit augue mauris. Aliquam porta pulvinar mi vitae 
mattis. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Pellentesque id cursus nibh. Mauris 
dignissim ipsum at mauris fermentum mollis. Cras nibh leo, egestas 
quis adipiscing et, vulputate vitae dolor. Cras tellus lectus, iaculis 
vitae commodo vitae, aliquet non ligula. Mauris condimentum metus ac 
sapien rhoncus, id convallis neque placerat. Aliquam a tortor vitae 
nulla porttitor eleifend pharetra quis ligula. Quisque eu ultrices 
nibh. Mauris ut dolor eu ligula sollicitudin lobortis quis eu turpis. 
Aenean tincidunt cursus justo, sit amet posuere lorem eleifend dictum. 
Cras lobortis venenatis lacus sit amet pretium. Fusce dui dolor, 
hendrerit quis ultrices vel, viverra eget ligula. Curabitur dapibus 
id tellus ut tincidunt.</p>
    </div>
 </body>
</html>

3. En este documento he incluido tres párrafos. Para incluir otros más simplemente añade los nuevos párrafos encerrados entre etiquetas <p> </p>. Si ya partes de un documento escrito, que es lo más normal, lo único que tienes que hacer es, desde el procesador de texto que estés utilizando, exportar el archivo en formato html. Luego abre el fichero generado con un editor de texto y elimina cualquier elemento extraño que haya introducido el procesador al exportar. Los exportadores a html suelen incluir atributos de estilo dentro de la etiquetas <p> </p>. Por ejemplo, si al exportar tu documento te quedan párrafos como sigue:

<p class=”MsoNormal”>Lorem ipsum dolor sit amet…</p>

No dudes en deshacerte de esas adiciones class=”MsoNormal” y dejarlo como sigue:

<p>Lorem ipsum dolor sit amet…</p>

4. Habrás notado que hemos puesto id=”capitulo_01″ e id=”cap01″ en dos líneas hacia el inicio. Tú pon valores lo más descriptivos para tu caso en lugar de esos capitulo_01 y cap01. Estos valores son importantes y servirán para identificar un punto concreto del libro. Puedes poner estas etiquetas incluso dentro de párrafos concretos. Por ejemplo, así:

<p id=”parrafo_01″>Lorem ipsum dolor sit amet…</p>

De este modo podrás identificar ese párrafo concreto. Esto te será de mucha utilidad al completar la tabla de contenidos del libro, como verás más adelante.

5. También habrás notado una línea <p>&nbsp;</p>. Esta es la mejor forma de poner una línea en blanco y separar bloques de texto.

6. Recuerda que esto es HTML, y cualquier estilo que quieras dar al texto tiene que seguir las reglas de HTML. Por ejemplo, para resaltar un texto en negrita encierra ese texto dentro de etiquetas <b> </b>. Para poner cursiva, usa <i> </i>. Hay un montón de opciones en HTML para estilizar un texto. No te agobies mucho ahora. Ya las veremos en una futura lección. De momento fíjate en cómo he colocado ciertos fragmentos del texto en negrita y cursiva.

7. ¿Ya tienes tus capítulos cada uno exportado en un fichero distinto? ¿Les has cambiado la cabecera de modo que el nombre del fichero aparezca correcto y tenga su ID específico? Bien, pues ahora añade referencias a esos capítulos en el fichero “content.opf” y “toc.ncx”. ¿Te acuerdas de ellos, verdad? Están en la carpeta “OEBPS”. En mi caso, con el nuevo capítulo añadido, deberían tener la siguiente pinta:

“content.opf”

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://www.idpf.org/2007/opf" 
    unique-identifier="bookid" version="2.0">
    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" 
       xmlns:opf="http://www.idpf.org/2007/opf">
       <dc:title>Aquí va el título</dc:title>
       <dc:language>es</dc:language> 
       <dc:identifier id="bookid" 
          opf:scheme="UUID">7D039B18-1DFE-410D-A3BA-8ED62AA313F9</dc:identifier>
       <dc:creator opf:role="aut" opf:file-as="Herca, Jan">Jan Herca</dc:creator>
       <dc:subject>Fiction Literature</dc:subject>
       <dc:date opf:event="creation">2013</dc:date>
       <dc:date opf:event="epub-publication">2013-09-24</dc:date>
       <dc:description>Aquí va la descripción.</dc:description>
       <dc:source>Original del autor</dc:source>
       <meta name="cover" content="cover-image"/>
    </metadata>
    <manifest>
        <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
        <item id="css" href="styles/style001.css" media-type="text/css"/>
        <item id="p01_portada" href="text/p01_portada.xhtml" 
           media-type="application/xhtml+xml"/>
        <item id="p02_titulo" href="text/p02_titulo.xhtml" 
           media-type="application/xhtml+xml"/>
        <item id="p03_cap01" href="text/p03_cap01.xhtml" 
           media-type="application/xhtml+xml"/>
        <item id="cover-image" href="images/portada.jpg" 
           media-type="image/jpeg"/>
    </manifest>
    <spine toc="ncx">
       <itemref idref="p01_portada"/>
       <itemref idref="p02_titulo"/>
       <itemref idref="p03_cap01"/>
    </spine>
    <guide>
       <reference type="cover" href="text/p01_portada.xhtml"/>
       <reference type="title-page" href="text/p02_titulo.xhtml"/>
       <reference type="text" href="text/p03_cap01.xhtml"/>
    </guide>
</package>

“toc.ncx”

<?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">
      <head>
         <meta name="dtb:uid" 
            content="7D039B18-1DFE-410D-A3BA-8ED62AA313F9"/>
         <meta name="dtb:depth" content="3"/>
         <meta name="dtb:totalPageCount" content="0"/>
         <meta name="dtb:maxPageNumber" content="0"/>
     </head>
     <docTitle><text>Aquí va el título</text></docTitle>
     <navMap>
        <navPoint id="navPoint-1" playOrder="1">
           <navLabel><text>Portada</text></navLabel>
           <content src="text/p01_portada.xhtml"/>
        </navPoint>
        <navPoint id="navPoint-2" playOrder="2">
           <navLabel><text>Título</text></navLabel>
           <content src="text/p02_titulo.xhtml"/>
        </navPoint>
        <navPoint id="navPoint-3" playOrder="3">
           <navLabel><text>Capítulo 1</text></navLabel>
           <content src="text/p03_cap01.xhtml"/>
        </navPoint>
    </navMap>
</ncx>

8. Fíjate en lo que hemos cambiado de ambos ficheros. En el “content.opf” ahora hemos añadido una línea item dentro de la etiqueta manifest.

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

Tendrás que añadir una línea de estas por cada capítulo, cuidando de ponerle un ID específico a cada uno. Es el ID que identificará a cada fichero. No lo confundas con los IDs de posición que vimos antes.

También hemos añadido una línea itemref y reference:

<itemref idref="p03_cap01"/>
<reference type="text" href="text/p03_cap01.xhtml"/>

Son las indicaciones de cómo debe incluir el lector el fichero del capítulo. Imagina que tienes una página con un dibujo o un texto que se repite. Podrías crear un único archivo para esa página, y luego, sin necesidad de repetirla, incluirla varias veces sin más que añadir los apropiados itemref y reference.

9. Por último, en el “toc.ncx” hemos añadido una etiqueta navPoint. De momento fíjate como esta etiqueta apunta a todo el conjunto del fichero del capítulo. En futuras partes del curso te explicaré cómo puedes hacer para que apunte a localizaciones específicas del texto (de ahí lo de los ID para marcar posiciones). Este fichero “toc.ncx”, como sabes, es el que contruye una tabla de contenidos genérica que se suele activar mediante una opción rápida en el lector electrónico. Veremos más sobre él y sobre como aprovecharlo para hacer tablas de contenido muy versáriles en futuras entradas.

10. Recuerda. Ahora toca reconstruir el fichero epub. Guarda cambios y recomprime en formato ZIP el contenido de la carpeta que llamamos raíz (ojo, el contenido, no la carpeta en sí). Renombra como .epub, transfiere a tu lector y prueba.

Descargar el ejemplo: http://bit.ly/17oGBKP

Read Full Post »

Curso de creación de un ePub (I)

El ePub es el formato por excelencia para la creación de libros digitales. A día de hoy (julio 2013) hay dos formatos disponibles: ePub2 y ePub3. Sin embargo, el ePub3 es tan amplio y ambicioso que casi no hay dispositivos que lo soporten al completo, y el más extendido para los libros habituales sigue siendo el ePub2.

En esta guía te voy a explicar en varios pasos cómo construir a mano un ePub y convertir un libro que tengas en otro formato a ePub2.

Un ePub no es más que un fichero ZIP renombrado con extensión epub. En el ZIP irá el contenido de una carpeta.

Para crear nuestro ePub desde cero, utilizando sólo un editor de texto, sigue estos pasos:

1. Crea una carpeta vacía. Esta carpeta será tu libro y a partir de aquí la llamaremos la “carpeta raíz”.
2. Dentro de esa carpeta crea un fichero de texto llamado “mimetype”, así, sin extensión, con el siguiente contenido (una única línea):

application/epub+zip

3. En la carpeta raíz crea también dos subcarpetas llamadas “META-INF” y “OEBPS”.
4. Dentro de la carpeta “META-INF” crea un fichero de texto llamado “container.xml” con el siguiente contenido:

<?xml version="1.0"?>
<container version="1.0" 
   xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
   <rootfiles>
      <rootfile full-path="OEBPS/content.opf" 
         media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>

5. Dentro de la carpeta “OEBPS” crea dos ficheros de texto llamados “content.opf” y “toc.ncx” y de momento déjalos vacíos.
6. Hasta aquí estos pasos son comunes siempre a toda creación de ePub y constituye la estructura inicial del fichero. Ahora le añadirás el contenido.
7. Primero añade los metadados del libro. Para ello edita el fichero “content.opf” y añade el siguiente contenido, pues estaba vacío.

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://www.idpf.org/2007/opf" 
   unique-identifier="bookid" version="2.0">
   <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" 
      xmlns:opf="http://www.idpf.org/2007/opf">
      <dc:title>Aquí va el título</dc:title>
      <dc:language>es</dc:language> 
      <dc:identifier id="bookid" 
         opf:scheme="UUID">7D039B18-1DFE-410D-A3BA-8ED62AA313F9</dc:identifier>
      <dc:creator opf:role="aut" opf:file-as="Herca, Jan">Jan Herca</dc:creator>
      <dc:subject>Fiction Literature</dc:subject>
      <dc:date opf:event="creation">2013</dc:date>
      <dc:date opf:event="epub-publication">2013-09-24</dc:date>
      <dc:description>Aquí va la descripción.</dc:description>
      <dc:source>Original del autor</dc:source>
      <meta name="cover" content="cover-image"/>
   </metadata>
   <manifest>
      <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
      <item id="css" href="styles/style001.css" media-type="text/css"/>
      <item id="p01_portada" href="text/p01_portada.xhtml" 
         media-type="application/xhtml+xml"/>
      <item id="p02_titulo" href="text/p02_titulo.xhtml" 
         media-type="application/xhtml+xml"/>
      <item id="cover-image" href="images/portada.jpg" 
         media-type="image/jpeg"/>
   </manifest>
   <spine toc="ncx">
      <itemref idref="p01_portada"/>
      <itemref idref="p02_titulo"/>
   </spine>
   <guide>
      <reference type="cover" href="text/p01_portada.xhtml"/>
      <reference type="title-page" href="text/p02_titulo.xhtml"/>
   </guide>
</package>

8. A continuación modifica el contenido anterior personalizándolo para tu libro.
9. En la línea con la etiqueta <dc:title> pon el título de tu libro en lugar del “Aquí va el título” que yo he puesto.
10. En la línea con la etiqueta <dc:language> pon el código del idioma de tu libro. “es” para español, “en” para inglés, “ca” para catalán. Mira más códigos aquí http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes.
11. En la línea con la etiqueta <dc:identifier pon un ID propio en lugar de ese churro de letras y números que he puesto yo. Puedes crearte un ID propio si buscas en Google alguna página relativa a “UUID generator”. Suele haber unas cuantas que te ofrecen IDs mediante unos algoritmos que impiden que se repitan por mucho que se soliciten nuevos. Copia el que te ofrezcan y pégalo ahí.
12. Hasta aquí las etiquetas <dc:xxx obligatorias. De aquí en adelante podemos eliminar las líneas de etiquetas dc que no necesitemos.
13. En la línea con la etiqueta <dc:creator pon tu nombre en lugar de mi “Jan Herca”, y pon el nombre en modo “Apellido, Nombre” en lugar de mi “Herca, Jan”. Si el libro fuera anónimo podríamos quitar esta línea.
14. En la línea con la etiqueta <dc:subject> pon una o varias palabras separadas por espacios indicando las categorías a la que pertenece tu libro, mejor en inglés. No hay reglas en esto. Si no sabes pues deja lo típico de “Fiction Literature”. Puedes inspirarte usando la clasificación de la Biblioteca del Congreso de EEUU : http://www.loc.gov/catdir/cpso/lcco/.
15. En la línea con la etiqueta <dc:date opf:event=”creation”> pon la fecha de creación del libro. Las fechas siempre en formato año-mes-día.
16. En la línea con la etiqueta <dc:date opf:event=”epub-publication”> pon la fecha de publicación del epub.
17. En la línea con <dc:description> pon una descripción de un párrafo, sin saltos, del libro, en tu idioma.
18. Lo demás déjalo como está. De momento este sería el esquema básico del fichero “content.opf” para un libro en el que sólo tendrás una portada y una página de título. Volverás a este fichero más adelante para incluir los capítulos de tu libro.
19. En el fichero “toc.ncx” añade el siguiente contenido:

<?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">
   <head>
      <meta name="dtb:uid" content="7D039B18-1DFE-410D-A3BA-8ED62AA313F9"/>
      <meta name="dtb:depth" content="3"/>
      <meta name="dtb:totalPageCount" content="0"/>
      <meta name="dtb:maxPageNumber" content="0"/>
   </head>
   <docTitle><text>Aquí va el título</text></docTitle>
   <navMap>
      <navPoint id="navPoint-1" playOrder="1">
         <navLabel><text>Portada</text></navLabel>
         <content src="text/p01_portada.xhtml"/>
      </navPoint>
      <navPoint id="navPoint-2" playOrder="2">
         <navLabel><text>Título</text></navLabel>
         <content src="text/p02_titulo.xhtml"/>
      </navPoint>
   </navMap>
</ncx>

20. En la línea con la etiqueta <meta name=”dtb:uid” modificála para que el ID se corresponda con el que metiste en el fichero “content.opf”.
21. El fichero “toc.ncx” contiene información de cómo presentar un índice, el típico indice que se muestra en muchos e-readers al pulsar en “Ver tabla de contenidos”. Cada página o comienzo de capítulo al que queramos poder ir deberá tener una entrada <navPoint>. En el ejemplo verás que de momento tenemos sólo dos, una para ir a la portada, y otro para ir al título. Más adelante añadiremos el contenido para los capítulos.
22. Ahora vamos a añadir los ficheros de contenido. De momento crearemos un ePub básico sólo con una portada y una página de título. En futuras partes de la guía iremos viendo cómo añadir más contenidos.
23. Dentro de la carpeta “OEBPS” crea tres subcarpetas: “images”, “styles” y “text”.
24. Dentro de la carpeta “images” crea un fichero de imagen en formato JPG. Lo puedes hacer con el Paint o puedes descargar una imagen de Internet (libre de royalties, ojo). Llama a la imagen “portada.jpg”. Es muy recomendable para que se vea bien en el iPad y otras tablet que tenga una buena cantidad de píxeles y en la proporción ancho x alto apropiada, por ejemplo 800×1200 o bien 1600×2400. Recuerda que hay muchas tablets con una cantidad enorme de píxeles en la pantalla. Si usas una imagen pequeña la portada quedará desdibujada al ponerla a pantalla completa.
25. Dentro de la carpeta “styles” crea un fichero de texto llamado “style001.css” con este contenido:

body {
 font-family: Georgia, Garamond, serif, sansserif, monospace;
}
p {
 margin:0pt;
 text-indent:0em;
 text-align: justify;
 font-size: 1.00em;
}
p+p{
 text-indent:1.5em;
 text-align: justify;
 font-size: 1.00em;
}
h1 {
 margin-top:4em;
 margin-bottom:2em;
 page-break-after:avoid;
 font-size: 1.20em;
 text-align: center;
 text-indent:0em;
}
.title {
 margin-top:2em;
 margin-bottom:1.5em;
 page-break-after:avoid;
 font-size: 1.50em;
 text-align: center;
 text-indent:0em;
}
.author {
 margin-top:2em;
 margin-bottom:1.5em;
 page-break-after:avoid;
 font-size: 1.00em;
 text-align: center;
 text-indent:0em;
} 
.chapter_title {
 margin:0pt;
 text-indent:0em;
 text-align: left;
 font-size: 1.50em;
}

26. Se trata de un fichero con los estilos a aplicar a las páginas y el texto. Es muy genérico y nos puede valer para todo tipo de libros. Ya en futuras partes de esta guía iremos viendo cómo cambiarlo y qué efectos produce.
27. En la carpeta “text” crea un fichero de texto “p01_portada.xhtml” con el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>p01_portada.xhtml</title> 
      <link rel="stylesheet" href="../styles/style001.css" 
         type="text/css" />
   </head>
   <body>
     <div>
        <img src="../images/portada.jpg" alt="Portada" 
           style="max-width: 100%; max-height: 100%;" />
     </div>
   </body>
</html>

28. También en la carpeta “text” crea un fichero de texto “p02_titulo.xhtml” con el siguiente contenido:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>p02_titulo.xhtml</title> 
      <link rel="stylesheet" href="../styles/style001.css" 
         type="text/css" />
   </head>
   <body>
      <div id="pagina_titulo">
         <p class="author">Aquí el nombre del autor</p>
         <h1 class="title" id="titulo">Aquí el título</h1>
      </div>
   </body>
</html>

29. Sustituye “Aquí el nombre del autor” y “Aquí el título” por los correspondientes a tu libro.
30. Hecho. Ya tenemos el contenido mínimo para un ePub2 con una portada y una página de título. Para probarlo hay que hacer lo siguiente. Con una herramienta de creación de ficheros ZIP (por ejemplo esta gratuita, http://www.7-zip.org/), añade a un fichero ZIP (sin compresión, no es necesaria) todo el contenido de la carpeta raíz (ojo, el contenido, no la carpeta raíz en sí). Luego renombra el fichero zip con extensión epub. Listo. Ya tienes tu primer ePub básico. Transfiérelo a tu lector habitual y échale un vistazo.

Descargar el ejemplo: http://bit.ly/18u9S8c

epub

Read Full Post »