Vamos a crear un EPUB desde cero
Anuncio
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
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
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Índice de navegación (TOC)
Un EPUB por dentro
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
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Pasos 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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Vamos a abrir Sigil:
Estructura de archivos del EPUB
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Editor de
contenidos
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
2. Escribimos el contenidos en cada capítulo
Editor de contenidos
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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Apariencia de una hoja de estilos:
Estructura de la hoja de estilos
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
En el archivo styles.css copiamos este código (ir a bit.ly/codigocss):
body {
font-family: sans-serif;
body: es el cuerpo central de contenidos en HTML
}
h1,h2,h3,h4 {
font-family: serif;
color: black;
}
img {margin: 1em 0 0 0 !important;
Max-width:100%;
}
¿Qué significa este código?
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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
En 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
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Probamos 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
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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;
}
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
+ INFO: http://www.w3schools.com/css/
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
5. 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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
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)
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Las versiones de Sigil 7.0 o posteriores tienen automatizada la inclusión de
enlaces:
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Realizar 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:
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Se nos abrirá una pantalla, donde escogemos el capítulo donde queremos
insertar el enlace y pulsamos 'OK':
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Para 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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
A continuación, nos vamos al punto que queremos enlazar a esa nota al pie.
Lo seleccionamos, y le damos formato de nota al pie:
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Una 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 repetir
la operación pero a la inversa:
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Nos 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).
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
A continuación nos vamos al archivo donde tenemos nuestras notas al pie, y
donde hemos puesto la nota, enlazamos a este punto:
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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)
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
Sigil también nos permite editar la meta información
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Crear un EPUB con Sigil
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Validar el código
Despué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
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
Validadores
Otros validadores:
http://code.google.com/p/flightcrew/
http://code.google.com/p/epubcheck/
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
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.
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
¡Muchas gracias!
http://www.contenidosenred.com
@contenidosenred
contacto@contenidosenred.com
'Cómo crear un epub con Sigil ‘ Contenidosenred octubre 2013
