Vamos a crear un EPUB desde cero · PDF filearchivo de notas al pie en Sigil, Seleccionamos la...

Vamos a crear un EPUB desde cero

'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013

¿Qué es un EPUB?• El EPUB es un formato abierto de libro digital desarrollado por el

IDPF.

• Tiene vocación de ser formato estándar.

• EPUB es una especificación abierta para libros digitales basada en tecnologías web (XML, CSS Y XHTML).

• Es un archivo comprimido.


Ejemplo de un EPub

Vamos a abrir un epub con Calibre para ver cómo es un libro digital (descarga http://gansoypulpo.com/)

Lectura normal Metadatos Índice de navegación (TOC)


http://gansoypulpo.com/

El archivo tiene una extensión .epub, un archivo comprimido que si lo descomprimimos con nuestro programa habitual tipo Winzip, veremos cómo es por dentro y qué archivos lo componen

Un EPUB por dentro


Sigil

Sigil es un programa gratuito y de código abierto con el que vamos a crear nuestro epub, el cual nos permitirá:

Crear un ePub legible en todos los dispositivos.

Organizar la estructura de forma muy sencilla y sin necesidad de saber programación.

Editar los estilos (tipo de texto, colores, indentados...), para lo cuál necesitaremos nociones mínimas de CSS y código

Editar los metadatos

Establecer la navegación interna de su contenido (TOC).


Crear un EPUB con SigilPasos a seguir para la creación de un epub::

Crear la estructura de nuestro libro.

Crear los contenidos de cada archivo

Crear el índice de navegación (TOC) y enlaces

Crear los estilos y aplicarlos.

Introducir metadatos (idioma y título son obligatorios para que valide correctamente)

Guardar como epub, comprobar visualización en Calibre y validar.


Estructura de archivos del EPUB Editor de contenidos

Crear un EPUB con SigilVamos a abrir Sigil:


Crear un EPUB con Sigil

Nuestro libro tendrá la siguiente estructura y archivos:

Portada (título, autor y fotografía): portada.xhtml

Índice (que incluirá enlaces a los capítulos): indice.xhtml

2 capítulos: capitulo1.xhtml, capitulo2.xhtml

Notas al pie: notas.xhtml

Además del archivo donde irán los estilos: style.css y las imágenes del libro, que estarán en formato .jpg.


1. Comenzamos creando archivos y renombrando:


Añadimos los archivos de nuestro libro dentro de la capeta 'Text' y les pondremos nombre correspondiente (portada, indice, capitulo_1...etc).Importante!: no poner puntos ni acentos en los nombres de esos archivos.


2. Escribimos el contenidos en cada capítulo


Clicamos 2 veces sobre el archivo que queramos editar y a la derecha, escribimos el contenido o lo copiamos del bloc de notas (nunca copiar texto de word,conviene eliminar estilo pasando previamente por el bloc de notas para que no genere código extraño).

Editor de contenidos


Insertamos imágenes. Si queremos que ocupe la pantalla entera, medidas: 600x750px

También podemos insertar videos y audios, importante archivos mp4, mp3, ogg y cambiar en el .opf el media/type (http://www.iana.org/assignments/media-types). Ojo! Esto sólo se verá en iPad!

Asignamos estilos al título de la página, subtítulo, etc. seleccionado los diferentes niveles de Heading que vemos en el combo ('Heading 1, heading 2...).

Es importante mantener los mismos estilos en todos los capítulos si queremos que éstos aparezcan correctamente en el índice de contenidos (TOC).



http://www.iana.org/assignments/media-types

4. Editamos los CSS:

El formato ePub está basado en los mismos estándares que las páginas web, esto significa que los cambios de estilo (tipo de letra utilizado, color, tamaño, etc) debemos hacerlos en el código de las hojas de estilo en cascada (CSS).

Dentro de la carpeta Style creamos el archivo style.css. Una vez tenemos creada nuestra hoja de estilos, podemos comenzar a editarla.

Pero antes de nada, vamos a echar un vistazo a la apariencia que tiene una hoja de estilos, ya que comprender su estructura nos ayudara posteriormente a la edición.



Apariencia de una hoja de estilos:


Estructura de la hoja de estilos


ttp://librosweb.es/css/capitulo_1/glosario_basico.html

En el archivo styles.css copiamos este código (ir a bit.ly/codigocss):

body {

font-family: sans-serif;

}

h1,h2,h3,h4 {

font-family: serif;

color: black;

}

img {margin: 1em 0 0 0 !important;

Max-width:100%;

}


¿Qué significa este código?

body: es el cuerpo central de contenidos en HTML

font-family: indica el tipo de fuente. En este caso, tanto las cabeceras (h1, h2...) como el cuerpo de texto (body) está en sans-serif

h1, h2 ,h3, h4: son las cabeceras o headings. A estos headings estamos asignando el tipo de letra (font-family) sans-serif y color de texto (color): black (negro).

Que las imágenes (img) no se saldrán del ancho de pantalla (max-width:100%;). Esto es importante ponerlo para que las imágenes se vean correctamente en todos los dispositivos. Además, estas imágenes tendrán un margen (margin).


http://bit.ly/codigocss

Crear un EPUB con SigilEn cada uno de los archivos que he creado tendré que pegar el link al archivo

css para que me coja los estilos que le he asignado al epub.

Dentro de cada archivo me situaré debajo de la etiqueta <head> y pegaré el siguiente código

<link type="text/css" rel="stylesheet" href="../Styles/Style.css" />

Nombre carpeta

Nombre exacto del archivo css

En el caso de que Sigil haya generado en cada capítulo un código del tipo:

<style type="text/css"> span.sgc-1 {font-family: 'Liberation Serif';} </style>

Eliminarlo y sustituirlo por el anterior


Crear un EPUB con SigilProbamos a cambiar y añadir más código em el css. El nombre de la fuente:

body {

font-family: sans-serif, arial;

}

Modificar el color, poniendo en inglés el color correspondiente.

h1,h2,h3,h4 {

font-family: serif;

color: red;

}

Cambiar el tamaño:

h1 {

font-family: serif;

color: red;

font size:14px;

}0.875em


También podemos añadir más reglas combinando el css con líneas de código en el archivo .xhtml, por ejemplo:

Para que un bloque de contenido siempre se vea junto en la misma pantalla (imagen + pie de imagen), en el archivo .xhtml, antes de la imagen pondremos:

<div= class=”keep”>

aquí iría la imagen

aquí iría el texto

</div>

Y en el css añadiremos:

div.keep {

display:inline-block;

}



+ INFO: http://www.w3schools.com/css/



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

Crear un EPUB con Sigil5. Incluimos enlaces internos o internos

Si abrimos un EPUB desde cualquier dispositivo de lectura, vemos que existen hiperenlaces que nos remiten a diferentes partes del documento, facilitando la lectura y su navegabilidad:

desde el archivo índice podemos acceder a cualquier capítulo o subcapítulo con un simple clic

desde un capítulo puedo dirigirme a fragmentos de texto que se encuentran en ese mismo capítulo y volver al punto donde estaba.

puedo enlazar una palabra que esté en un capítulo a otro punto concreto en otro archivo: por ejemplo, ir desde una palabra en el 'capítulo 1' a una nota que contenga información o bibliografía sobre un término concreto en el archivo 'notas al pie'.

También puedo crear enlaces externos (a cualquier página en Internet).


Sigil

Sigil funciona en Windows, Linux y Mac.

Hay que instalarse la versión que se corresponda con el sistema operativo que tengamos instalado en el ordenador, de lo contrario, no funcionará!

http://code.google.com/p/sigil/

Sigil aún no permite crear libros enriquecidos (epub3 ), pero ya ha dado un paso permitiendo la inclusión de video y audio (aunque sólo es visible en iPad y navegadores que soportan html5)


http://code.google.com/p/sigil/

Crear un EPUB con SigilLas versiones de Sigil 7.0 o posteriores tienen automatizada la inclusión de

enlaces:


Crear un EPUB con SigilRealizar un enlace desde el índice a un capítulo: Seleccionamos el texto

que queremos enlazar y pulsamos el botón con símbolo de cadena que hay en el menú superior:


Crear un EPUB con SigilSe nos abrirá una pantalla, donde escogemos el capítulo donde queremos

insertar el enlace y pulsamos 'OK':


Crear un EPUB con SigilPara realizar un enlace desde un capítulo a un punto concreto de otro

capítulo, por ejemplo de un capítulo a un pie de página, lo primero que tenemos que hacer es asignar un identificador (un nombre) al sitio de destino (en nuestro caso, en nuestra nota al pie). Para ello abrimos nuestro archivo de notas al pie en Sigil, Seleccionamos la nota que queremos enlazar, y pulsamos en el menú superior el botón que es una ancla pequeña:

Se nos abrirá una pequeña pantalla donde ponemos un nombre que recordemos facilmente. Este nombre es el dentificador de ese punto concreto.


Crear un EPUB con SigilA continuación, nos vamos al punto que queremos enlazar a esa nota al pie.

Lo seleccionamos, y le damos formato de nota al pie:


Crear un EPUB con SigilUna vez hemos hecho esto, y con nuestro número seleccionado, pulsamos de

nuevo el símbolo de enlace (la cadenita) y buscamos, dentro del listado de enlaces, al que corresponde al identificador que hemos insertado antes:

Nos fijamos en la estructura del enlace: es el nombre del archivo xhtml seguido de almohadilla (#) y el nombre del identificador.

Ya hemos realizado nuestro enlace a un punto concreto de otra página.

Ahora convendría que el lector que ha llegado a esta nota al pie pueda retornar al punto donde se encontraba antes. Para ello, es necesario repetirla operación pero a la inversa:


Crear un EPUB con SigilNos vamos al capítulo 1, donde hemos realizado nuestro enlace a la nota, y

asignamos a este punto un identificador (tiene que ser un identificador diferente al que hemos puesto anteriormente, dado que no tiene sentido insertar dos identificadores iguales, además que nos daría error).


Crear un EPUB con SigilA continuación nos vamos al archivo donde tenemos nuestras notas al pie, y

donde hemos puesto la nota, enlazamos a este punto:


Sigil actualiza el archivo TOC (que es un archivo que recoge información sobre la estructura del EPUB) a partir de los estilos que hemos establecido en los archivos.

El TOC es el índice de navegación interna de un epub, como el índice en papel, pero navegable

Podemos ver el estado del TOC en cualquier momento si vamos a "Tools > TOC Editor...". Debemos comprobar que están todos los capítulos correctamente anidados o eliminar los que no queramos que aparezca en el índice de navegación del epub. (Importante revisar estilos del índice y de los títulos de cada capítulo para que no de errores. Tiene que haber coherencia)



Sigil también nos permite editar la meta información



Guardamos nuestro documento de Sigil como epub.

Después vamos a validarlo, para comprobar que no tenga ningún

fallo: http://validator.idpf.org/ (será obligatorio tener introducios los metadatos de idioma y título para que se valide correctamente).

Corregimos los fallos que nos ha recomendado y volvemos a verificar

Por último lo abrimos con Calibre y lo leemos en nuestra pantalla de ordenador. También conviene probar en todos los dispositivos que tengamos.



http://validator.idpf.org/

Validar el códigoDespués de crear un epub es importante validar el archivo para detectar

posibles errores. Hay varios programas que lo hacen, pero hay que tener presente que a veces detectan falsos errores.

¿Para qué sirven?

Detectar si he incluido un archivo gráfico que no ha sido utilizado, y que por tanto, está llenando mi ePub de basura innecesaria (lo cuál lo hará más grande y más lento el archivo); otras veces nos alertan de que un elemento del código no está bien escrito, etc...

¿Por qué es importante validar?

Muchos distribuidores (por ejemplo, iBookStore, la iniciativa de Apple para vender libros digitales para iTunes, iPad, iPhone y iPod touch), exigen que cumplan determinados requisitos técnicos y de contenido, entre ellos, superar la validación con el epubcheck 1.0.5


ValidadoresOtros validadores:

http://code.google.com/p/flightcrew/

http://code.google.com/p/epubcheck/


http://code.google.com/p/flightcrew/

http://code.google.com/p/epubcheck/

Errores más frecuentes

- Enrutamiento: si una imagen está en una carpeta, tenemos que indicar en los archivos la ruta completa.

- Sintaxis: atención a los espacios, y caracteres extraños. No usar puntos, acentos ni espacios para nombrar archivos.

- No copiar texto de word, eliminar estilos en bloc de notas y después pegarlo en Sigil para evitar que genere código no deseado.


¡Muchas gracias!http://www.contenidosenred.com

@[email protected]


http://www.contenidosenred.com/

https://twitter.com/contenidosenred

mailto:[email protected]

http://contenidosenred.us4.list-manage1.com/subscribe?u=f132b0bd0e41167d68ba5d7f9&id=b4b63b5e48

Vamos a crear un EPUB desde cero · PDF filearchivo de notas al pie en Sigil, Seleccionamos la...

Documents

Transcript of Vamos a crear un EPUB desde cero · PDF filearchivo de notas al pie en Sigil, Seleccionamos la...