TRABAJANDO CON LA

VISTA CODIGO
EN SIGIL

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

Eduardo Ponce
mepgkun@hotmail.com
Lima – 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 .xhtml
Lo 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