TRABAJANDO CON LA VISTA CODIGO

EN SIGIL

(Parte primera)(para usuarios que desconocen html y css)

Eduardo Poncemepgkun@hotmail.comLima – Peru

1

Introduccion

Sigil es un software que nos permite editar archivos ePub.Este tipo de archivos es empleado en los lectores portatiles, pero tambien puede ser visualizado en nuestra Pc, por ejemplo si tenemos el explorador Mozilla Firefox, agregandole una herramienta llamada ePub-reader.

Si bien Sigil es una herramienta bastante útil para crear libros electrónicos, su editor no incluye opciones directas para trabajar por ejemplo con opciones de colores en párrafos de texto o con enlaces y otras opciones muy utilizadas en un editor de texto como Writer (Ooo), sin embargo Sigil nos permite a través de la opción Vista de código, realizar estas tareas modificando los archivos xhtml y css que son la base del editor de Sigil.

En Sigil tenemos tres opciones para la vista del Editor de texto:

La primera nos muestra el editor de texto (Vista libro) tal como cualquier otro editor de texto (Book View)

La segunda vista(Vista dividida) corresponde a una vista mixta(Split View), se puede apreciar tanto el texto tipeado, como el codigo xhtml el cual le sirve de base.

2

La tercera vista(Vista código) corresponde solo al código xhtml(Code View). Y es aquí o en la segunda vista en donde podemos proceder a trabajar con el código para realizar por ejemplo el crear párrafos de colores , con letras mas grandes o enlaces.

3

TRABAJANDO CON CODIGO

ENLACES A PAGINAS WEB

Lo primero que veremos sera como enlazarnos a una pagina web.Supongamos que estamos tipeando la biografiá del autor del libro y queremos relacionarlo a una pagina web que contiene una biografiá mas detallada.

Pasamos a la Vista codigo:

4

Aqui colocamos en el parrafo <p> el siguiente codigo :

<p> <a href=”http://www.biografias/W.Scott”>Biografia de Walter Scott</a></p>

http://www.biografias/W.Scott es la dirección web en donde encontraremos una biografiá mas detallada de Scott.

Veamos en imagen como queda:

Luego damos clic sobre el boton Vista Libro y este debe verse como sigue :

Listo hemos creado el enlace, guardamos nuestro archivo y lo aperturamos en un visor para ePub, al darle clic sobre: Biografia de Walter Scott , nos conducira al enlace web deseado.

5

ENLACE A UN SITIO DE LA MISMA PAGINA

Este tipo de enlace nos es útil cuando queremos colocar notas a pie de pagina, veamos un ejemplo :

Aqui deseamos hacer un enlace entre (1) del texto y la nota situada a pie de pagina (1) de forma que al hacer clic sobre (1) en el texto nos lleva a la nota (1) al pie de pagina.

6

Para ello vayamos a la Vista codigo de Sigil :

En el parrafo <p> del texto donde se encuentra (1) colocamos :

<p>Pulque o mezcal<a href=”#1”>(1)</a>; el tiene de todo </p>

Luego vamos a nuestro pie de pagina y colocamos en el parrafo <p> lo siguiente:

<p> <a name=”1”>(1)</a> Pulque y mezcal...

7

Veamos como quedan en Sigil :

Pasemos finalmente a la Vista Libro para ver como queda el enlace :

8

De ahora en adelante cada vez que presionemos sobre el texto (1), nos conducira al pie de pagina (1).

Para volver al texto del pie de pagina podemos colocar (Volver) al final de la nota y enlazarlo a la palabra de la izquierda de (1) en el texto.

Veamos como debe quedar en imágenes :

Asi de forma que cuando apretemos el (1) en el texto nos conducira al pie de pagina (1) y cuando apretemos (Volver), nos devolvera a la parte del texto que estabamos leyendo.

9

ENLACE A OTRO ARCHIVO .xhtml DEL MISMO LIBRO

Este tipo de nelace nos es util por ejemplo cuando queremos crear un indice para nuestro libro. Supongamos que tenemos un libro que tiene 3 archivos .xhtmlLo que deseamos es enlazar el Indice en el archivo 1.xhtml , a el archivo 2.xhtml que es el capitulo II , y al archivo .xhtml que es el capitulo III.

Veamos las siguientes imágenes de los tres archivos :

10

Para ello vamos a la vista código del archivo 1.xhtml y digitamos el siguiente código en el párrafo <p> del Capitulo I :

<p> <a href=”..TEXT/2.xhtml#1”>CAPITULO I</a></p>

Luego agregamos el código para el parrafo <p> del Capitulo II :

<p> <a href=”..TEXT/3.xhtml#2”>CAPITULO II</a><p>

Luego vamos a la Vista código del archivo 2.xhtml para agregar el siguiente codigo :

<p>&nbsp;<a name=”1”>CAPITULO I</a></p>

Y finalmente vamos a la Vista código del archivo 3.xhtml para agregar el siguiente codigo :

<p>&nbsp;<a name=”2”>CAPITULO II</a></p>

Nota el código que se agrega es el texto de color morado. En todos los casos.

Veamos las siguientes imagenes :

11

Finalmente volvemos al indice en Vista libro y debe quedar como se ve en la imagen siguiente :

12

En el indice bastara hacer clic sobre Capitulo I o Capitulo II para que se nos diriga a estos capitulos.

Queda como ejercicio el hacer al final de cada capitulo un enlace al Indice, para al finalizar la lectura del capitulo sea posible volver nuevamente al mismo.

FAMILIAS DE FUENTES

Se puede modificar la familia de fuentes. Para ello veremos un ejemplo en el cual utilizaremos diversas familias de fuentes. Primero tipeamos los nombre de las familias de fuentes, luego procederemos a modificar el código para lograr este tipo de fuente en la Vista Libro.

13

VISTA LIBRO

VISTA CODIGO

14

En la imagen anterior podemos observar el codigo creado para modificar la familia de fuentes, hemos modificado la fuente parrafo por parrafo incluyendo dentro del parrafo <p style=”font-family:NOMBRE DE LA FUENTE>

Hecho esto pasamos a la Vista Libro y podemos apreciar los cambios efectuados :

15

Finalmente si volvemos a la Vista Código veremos lo siguiente :

Veremos que Sigil ha creado una hoja de estilo .css en base al codigo que hemos tipeado, en el cual a reordenado los tipos de fuentes incluidas en texto.En adelante si queremos variar la familia de fuente de algún párrafo del archivo actual, solo tenemos que colocar el class=”CODIGO sgc” correspondiente al tipo de fuente.

16

CAMBIO DE LA FAMILIA DE FUENTE POR DEFECTO

Cuando empezamos a tipear texto en Sigil , lo hacemos en la familia de fuente que por defecto trabaja el programa.

Veamos por ejemplo el siguiente párrafo tanto en vista libro como en vista código.

Lo que tenemos que hacer para modificar la familia fuente por defecto es dar la instrucción para ello, por ejemplo si deseamos modificar a Arial Black, colocamos lo siguiente en <div> : <div style=”font-family:Arial Black”>

17

Una vez colocado el codigo, pasemos a la vista libro para observar como a quedado:

Si volvemos nuevamente a la vista codigo, podremos observar que Sigil ha creado para nosotros una hoja de estilo para la fuente de familia, posteriormente si observamos la codificacion de la hoja de estilo, podremos trabajar directamente creando la hoja de estilo (.css) nosotros mismos.

18

Si ahora continuamos tipeando texto sobre el editor nos daremos cuenta que la fuente de familia con la cual se tipea es Arial Black. Sigil ha modificado para todo este archivo .xhtml la familia de fuente.

Si deseamos en algún momento volver a la fuente por defecto, solamente tenemos que tipear el primer párrafo desde donde deseamos que esto suceda, vamos a la vista código, y borramos el código class=”sgc-1, situado a continuación de la <div del párrafo a partir del cual deseamos volver a la familia de fuente por defecto.

Esto queda como un ejercicio a realizar por parte del lector.

Hasta aqui la primera parte, en la segunda parte veremos como trabajar con el tamaño de fuentes asi como con colores en las fuentes y un poco de hoja de estilo.

mepgkun@hotmail.com

19