Feeds:
Entradas
Comentarios

Archive for 12 noviembre 2013

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 »

“El predicador” ya a la venta

ebookTengo el placer de comunicar que mi última novela, “El predicador”, finalmente está a la venta. Ya llevaba varios meses disponible en las distintas plataformas digitales, pero había algunos aspectos de la edición que no eran correctos. Por fin la primera parte de “El predicador”, en su versión digital, está correcta y disponible en las tiendas online. Se han subsanado algunas de las inconsistencias que aparecían en la primera edición, como por ejemplo el que no se veían bien los mapas, o que los capítulos nos estaban correctamente segmentados. Ha sido una larga espera pero finalmente el resultado ha sido el deseado.

Para aquellos que hayan adquirido el ebook en plataformas como Amazon, que dispone de un sistema de actualización de los libros, no debería representar ningún problema obtener la versión actualizada del mismo, pero en cualquier caso, si ha adquirido el ebook previamente y no logra obtener la última edición, no dude en ponerse en contacto conmigo para ofrecerle una solución al problema. Puede hacerlo a través de mi página web de Facebook: https://www.facebook.com/jan.herca

Para quienes aún no se han hecho con un ejemplar, no dude en adquirir uno, y sumarse a conocer las aventuras del singular Rémy. El precio de los ebooks en la colección SB ebooks, el sello editorial bajo el que se publica la novela, está muy comedido para la buena cantidad de horas de lectura y entretenimiento que proporcionan.

El enlace a algunas de las plataformas donde el libro se encuentra a la venta aparece en el lateral del blog. Animaos todos a haceros con uno.

Read Full Post »