Manual Kompozer PDF

1.
Páginas web
Päginas web ::: Introducción 9
Diseño de materiales multimedia. Web 2.0
1.1 Introducción
1.1 Introducción
1.1.1 Conceptos básicos
A modo de introducción y con el propósito de unificar terminología a continuación se describe

el significado de algunos términos muy utilizados en el diseño web:
World Wide Web (WWW)
Es el sistema de presentación de la información más utilizado en Internet. Sus principales

características son:
• Hipertexto: Es texto o imagen que se muestra en la pantalla vinculada a otras
páginas del mismo sitio o de sitios ajenos. Al situar el puntero del ratón sobre él, éste
toma el aspecto de una mano. Al hacer clic se mostrará la página vinculada al mismo.
• Multimedia: En la pantalla aparece texto, imágenes, videos, audios, animaciones,
etc.
• Universalidad: Se puede acceder desde cualquier tipo de equipo o sistema operativo
(Windows, Linux, Mac), usando cualquier navegador y desde cualquier parte del
mundo.
• Pública: Toda su información está distribuida en miles de ordenadores (servidores)
que ofrecen su espacio para almacenarla. Es información pública y normalmente
accesible por cualquier usuario.
• Dinámica: Mucha información, aunque está almacenada, puede ser actualizada por el
público que la consulta sin que el usuario necesite conocer detalles técnicos de su
mantenimiento. Son las páginas activas: asp, php o jsp.
Navegador
Es el programa que se utiliza para acceder a los contenidos de Internet. Debe ser capaz de
comunicarse con un servidor y comprender el lenguaje de todas las herramientas que
manejan la información de Web. Los navegadores más populares son Internet Explorer,
Mozilla Firefox, NetScape, Opera, Safari, etc.
Servidor
Es el ordenador encargado de proporcionar al navegador del cliente los documentos y medios

que éste solicita.
HTTP (HyperText Transfer Protocol)
Es el protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de

Internet entre el servidor y el navegador. El protocolo http:// se indica en el inicio de la
dirección. Si no se teclea este prefijo, el navegador lo añade de forma automática.
URL (Universal Resource Locator)
Es la dirección donde se encuentra un recurso en Internet.

Ejemplo: http://www.google.es.
Si no se indica página html, el servidor enviará la página índice (index) o bien por defecto
(default).
Durante la navegación por Internet …
1) El usuario, situado en el equipo cliente, teclea la URL en la casilla dirección del
navegador y pulsa la tecla <enter>.
2) La petición se dirige a los servidores DNS que traducen esta URL a una dirección IP.
Por ejemplo: www.cnice.mec.es -> 195.53.123.85. Es posible situar en el navegador
esta dirección aunque resulte más complicada e ininteligible.
3) La petición llega al servidor que tiene esa IP.
4) El servidor devuelve la página solicitada.
5) El archivo HTML y los multimedia referenciados se almacenan en la carpeta caché del
navegador (disco duro del equipo cliente). Cuando se han descargado estos activos
entonces el usuario visualiza la página y todos sus elementos.
HTML (HyperText Markup Language)
Es el lenguaje en el que se diseñan las páginas que se visualizan a través del navegador. Este
lenguaje se basa en etiquetas (instrucciones que le dicen al navegador como deben
mostrarse) y atributos (parámetros que dan valor a la etiqueta). Una página HTML contiene
texto con un cierto formato y referencias a archivos externos que contienen imágenes,
sonidos, animaciones, etc.
Archivo HTML
El lenguaje HTML se utiliza para definir un documento que se visualizará a través del
navegador. Este documento se guarda en un archivo con extensión .htm ó .html
Básicamente los documentos escritos en HTML constan de texto y etiquetas. Las etiquetas
permiten definir el formato del texto, el título que mostrará en la barra de título del
navegador, los elementos multimedia que aparecerán incrustados en el documento pero que
se almacenan en archivos externos, etc.
Todo documento HTML tiene la siguiente estructura: cabecera y cuerpo del documento. Las
tres etiquetas que describen su estructura general son:
• <html>: indica que se inicia el documento.
• <head>: incluye el título de la página (<title>) que se muestra en la barra de título
del navegador.
• <body>: contiene la información visible.
1.1.2 Mi primer documento HTML
1. Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas >
Accesorios > Bloc de Notas. En Ubuntu puedes utilizar el procesador de textos
mediante: Aplicaciones > Accesorios > Procesador de textos.
2. En un documento nuevo escribe el siguiente texto:
<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
Hola mundo
</body>
</html>
3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.

4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este
documento.
5. Introduce el nombre del archivo añadiéndole la extensión .htm Ejemplo: prueba.htm
6. Pulsa en el botón Guardar.
7. Cierra la ventana del Bloc de Notas.
8. Elige Inicio > Mis Documentos para situarte en esta carpeta donde has guardado tu
archivo HTML. Encontrarás un archivo con el icono de un documento HTML con el
nombre que has elegido.
9. Haz doble clic sobre el icono de este archivo y se abrirá el navegador configurado por
defecto en tu equipo mostrando el contenido de esta página HTML.
10. Observa que en la barra de título del navegador aparece el texto que has encerrado
entre las etiquetas <title> … </title> y en el documento en blanco el texto que has
incluido entre <body>…</body>
1.1.3 El navegador Mozilla Firefox
Firefox es un navegador gratuito que representa una excelente alternativa a Internet

Explorer.
1.1.3.1 Características de Firefox

Sus características más destacadas son:
Multiplataforma
Existen versiones de Mozilla Firefox para Windows, Linux y Mac
Navegación con pestañas

Se pueden abrir simultáneamente varias páginas web de tal forma que cada una se visualiza
en una pestaña independiente. Cada pestaña dispone de su propio botón de cerrado. Si se
cierra accidentalmente una pestaña se puede recuperar en el menú Historial.
Restauración de sesión
Cuando Firefox se cierra o reinicia se ofrece la opción de restaurar la sesión para evitar la
pérdida de información en formularios, descargas, etc.
Corrector ortográfico
Si se dispone del complemento Diccionario de Español/España se puede activar el corrector
ortográfico integrado que subrayará las palabras no tecleadas correctamente en cualquier
cuadro de texto de la página web. Mediante clic derecho sobre esa palabra se ofrecerán
alternativas para sustituirla.
Sugerencias de búsqueda
Al comenzar a escribir en la barra de búsqueda de Google se mostrará una lista de
sugerencias.
Canales RSS
Permite leer directamente los titulares de noticias RSS sin necesidad de tener instalado
ningún otro programa.
Búsqueda integrada
Firefox proporciona una barra de búsqueda que integra los motores más utilizados a nivel
mundial: Google, Yahoo!, eBay, Diccionario RAE, Wikipedia y Creative Commons. Para ello
basta con elegir el motor e introducir el término de búsqueda.
Bloqueador de ventanas emergentes

Se pueden controlar las ventanas emergentes molestas evitando que se desplieguen. Mediante
una barra informativa o un icono en la parte inferior de la pantalla se notifica al usuario el
bloqueo de ventanas.
Accesibilidad
Firefox incluye distintas prestaciones para facilitar la accesibilidad a personas con
deficiencias visuales: aumento del tamaño de la fuente mediante <Ctrl>+Scroll del ratón,
compatibilidad con lectores de pantalla (p.e. Freedom Scientific’s JAWS).
Protección antiphising
Cuando una página web sea sospechosa de fraude por robo de identidad digital frente a una
entidad bancaria (physing), Firefox advertirá al usuario y ofrecerá una página de búsqueda
para encontrar la página auténtica que se está buscando.
Actualizaciones automáticas
Firefox comprueba la versión del navegador y si existe una más reciente avisa al usuario sobre
la posibilidad de instalarla. Esta actualización suele ser pequeña resultando fácil y rápida de
descargar e instalar.
Protección contra programa espías

Firefox no permite que una página web descargue, instale o ejecute programas en el equipo
sin un consentimiento explícito del usuario.
Limpieza de información privada

Utilizando esta utilidad situada en el menú Herramientas se garantiza que se limpian todos los
datos privados de la navegación en un solo clic. Es especialmente útil en un equipo
multiusuario donde se abre sesión siempre con el mismo usuario Windows.
Complementos
Firefox ofrece más de 1000 complementos que permiten aumentar las prestaciones por
defecto de este navegador web: lectura de noticias RSS, herramientas web y de desarrollo,
descargas de archivos, privacidad y seguridad, herramientas de búsqueda, marcadores,
diccionarios, multimedia, etc. El uso de un administrador de complementos facilita las
operaciones de instalación, desinstalación y desactivación.
Temas
Se pueden instalar y configurar distintos temas que permiten cambiar los colores, fuentes,
iconos, gráficos, etc del interfaz de Mozilla Firefox.
Plugins
Firefox dispone de la mayoría de plugins necesarios para visualizar todo tipo de contenidos
multimedia: Adobe Flash Player, Java, QuickTime, RealPlayer, Windows Media Player, etc.
1.1.3.2 Instalación de Firefox
Para Windows puedes descargar e instalar el archivo Firefox Setup 2.0.0.12.exe .

Firefox es el navegador web por defecto de la mayoría de distribuciones de Linux por lo que
si utilizamos, por ejemplo, Ubuntu, no será necesario instalarlo.
En el sitio web oficial del proyecto Mozilla Firefox podrás encontrar la versión más reciente o
que se adapta a tu sistema: http://www.mozilla-europe.org/es/products/firefox/
Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente

archivo a una carpeta de tu disco duro o pendrive: Firefox_2.0.0.12.exe
1.1.4 Editores HTML
Para facilitar la escritura de documentos HTML se utilizan programas específicos. Los más
utilizados permiten complejos diseños y evitan trabajar directamente con el código HTML. Se
llaman editores visuales porque proporcionan un entorno WYSIWYG (What You See Is What
You Get) donde se trabaja viendo el documento y sus objetos tal y como se mostrarían en el
navegador manteniéndose oculto el código HTML.
Existen multitud de editores web comerciales pero los más populares en el entorno Windows
son:
• Microsoft FrontPage. Es fácil de utilizar porque tiene un entorno muy similar a Word.
Su última versión recibe el nombre de Expresión Web Designer.
• Adobe Dreamweaver. Pertenece a la suite de Adobe. Es un programa muy
recomendable por sus múltiples prestaciones.
En el entorno Linux los editores HTML más utilizados son: BlueFish (Gnome) y Quanta+
(KDE).
En este curso se propone utilizar Kompozer (http://www.kompozer.net/) por sus

interesantes características:
• Editor visual.
• Gratuito.
• Soporta tablas, plantillas y hojas de estilo.
• Subida de archivos por FTP al servidor.
• En castellano.
• Multiplataforma: windows, linux, mac, etc
• Portable.
Páginas web ::: Kompozer: instalación y uso 17
1.2 Kompozer:
instalación y uso
1.2 Kompozer: instalación y uso
1.2.1 ¿Qué es Kompozer?
Kompozer es un editor WYSIWYG (What You See Is What You Get = Lo que ves es lo que
tienes) de páginas web. Resulta una herramienta de uso fácil, de libre distribución y de uso
gratuito basado en el motor de Mozilla. Este programa es el sucesor no oficial del conocido
editor Nvu 1.0 y se propone como alternativa ya que Nvu no se actualiza desde el 2005 y una
nutrida comunidad de usuarios desarrolladores se han encargado de evolucionar Nvu bajo esta
nueva denominación con múltiples correcciones y parches. La página de KompoZer es
http://www.kompozer.net/
1.2.2 Instalación de Kompozer en Windows
1. Descarga el archivo KompozerPortable.exe a una carpeta de tu disco duro. Doble clic

para ejecutarlo. Otra opción es visitar la página oficial de Kompozer para descargar e
instalar la versión más reciente: http://www.kompozer.net/
2. La instalación de Kompozer es totalmente limpia, es decir, se descomprime en una

carpeta de tu disco duro y dentro de esa carpeta estarán todos los archivos necesarios
para que funcione. En el cuadro de texto Extract to: (Extraer a:) indica la letra de la
unidad de tu disco duro seguido de dos puntos C: y pulsa en Extract.
3. Después de unos segundos se habrá instalado en la carpeta C:\ KompozerPortable.

4. Utiliza el explorador de archivos Inicio > Mi PC para navegar hasta el interior de esta
carpeta.
5. Desde el explorador de archivos haz clic derecho sobre el icono de Kompozer.exe y
selecciona Crear acceso directo.
6. Clic derecho sobre el icono de acceso directo que has creado y elige Cambiar
nombre. Introduce como nuevo nombre: Kompozer
7. Clic derecho sobre este icono y elige Copiar. Navega hasta el escritorio de Windows,
haz clic derecho sobre un espacio vacío y elige Pegar. De esta forma hemos situado
un icono de acceso directo al programa Kompozer en el escritorio.
1.2.3 Instalación de Kompozer en Ubuntu
1. Desde el escritorio elige Aplicaciones > Añadir o quitar …

2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles.
3. Introduce el término Kompozer en el cuadro de texto Buscar: y a continuación pulsa

la tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de
verificación que acompaña a la entrada de Kompozer. Pulsa en el botón Aplicar
cambios para iniciar la instalación. Confirma la instalación pulsando de nuevo en el
botón Aplicar.
4. Si estás conectado a Internet se descargarán los archivos necesarios para su

instalación. Una vez concluída se mostrará el mensaje de éxito. Clic en el botón
Cerrar.
5. Kompozer se suele instalar por defecto en inglés. Es necesario descargar e instalar el

pack del idioma castellano. Para ello navega hasta la página language packs del sitio
de Kompozer (http://www.kompozer.net/). Pulsa sobre el enlace al paquete XPI
correspondiente al idioma Español (es-ES), selecciona Save to Disk (Guardar en
disco) y pulsa en el botón OK.
6. El archivo se guardará por defecto en /home/<usuario>/. A continuación abre

Kompozer mediante Aplicaciones > Internet > Kompozer.
7. Desde Kompozer selecciona File > Open File. En la casilla Look in: selecciona la
carpeta donde hemos descargado el pack de castellano. En la lista desplegable Files
of type elige All files (Todos los archivos). En la lista de archivos marca el archivo XPI
descargado y pulsa en el botón Open.
8. Clic en el botón Install Now (Instalar ahora). Trancurridos unos segundos se mostrará
un cuadro de diálogo con información de que la instalación se ha realizado con éxito.
Cierra esta ventana y reinicia el programa para activar el cambio de idioma.
9. Se puede situar un acceso directo al programa en el escritorio. Para ello despliega en
el menú de programas: Aplicaciones > Internet > Kompozer. Arrastra el icono de
Kompozer hasta un hueco libre del escritorio. Esto creará un acceso directo al
programa desde el escritorio.
1.2.4 El entorno de Kompozer
Haz doble clic sobre el icono de Kompozer del escritorio.
1. Barra de Menús. Ofrece acceso a todas las opciones del programa organizadas como
en otras aplicaciones de Windows en Archivo, Editar, Ver, Insertar, …
2. Barra de Redacción. Consta de los botones de acceso a las operaciones más
frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.
3. Barra de Formato. Contiene las herramientas más útiles para aplicar formato al
texto: tipo de fuente, tamaño, color, efecto, justificación, etc. Si se sitúa el ratón
sobre cada botón se muestra un mensaje indicando su función.
4. Barra de pestañas. Kompozer permite editar varias páginas usando un sistema de
pestañas donde cada documento abierto es accesible al pulsar sobre la pestaña
correspondiente. El nombre del archivo aparece acompañado por el icono de un
diskete rojo cuando esa página ha sido modificada pero no guardada.
5. Documento. Muestra el contenido del documento HTML actual.

6. Barra de modo de edición. Indica el modo de vista que está activo en el documento
actual. Se puede cambiar el modo de visualización pulsando en una de estas pestañas:
Normal, Etiquetas HTML, Código fuente y Vista preliminar. Mientras no se indique lo
contrario se utilizará el modo de visualización Normal.
7. Barra de estado. Muestra la posición del cursor con respecto a la jerarquía de
etiquetas HTML del documento. Se pueden asignar atributos a una etiqueta haciendo
clic derecho sobre la etiqueta en la barra de estado y seleccionando la opción
deseada.
8. Administrador de sitios. Permite crear y mantener un sitio web.
Páginas web ::: Mi primera página 23
1.3 Mi primera página

1.3 Mi primera página

El propósito de este actividad es diseñar tu primera página con Kompozer. El tema elegido es
una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán:
encabezado, texto, imagen y un enlace a una página externa.
1.3.1 Organización en carpetas
1. Vamos crear una carpeta de nombre miweb.
Si utilizas Windows se propone crear esta carpeta en el raíz de tu disco duro

utilizando el explorador de archivos.
Selecciona Inicio > Mi PC y haz doble clic en la unidad Disco local C: para abrirla.
Clic derecho sobre un espacio del explorador y elige Nuevo > Carpeta. Introduce el
nombre de la nueva carpeta: “miweb”. Doble para situarte dentro de esta carpeta.
Repite el paso anterior para crear una subcarpeta con el nombre images dentro de
miweb.
Si utilizas Ubuntu Linux se propone crear esta carpeta dentro de la carpeta personal
del usuario.
1.1 Desde el escritorio elige Lugares > Carpeta

personal. Se abre el explorador de archivos
mostrando el contenido de la carpeta
/home/<usuario>/
1.2 Clic derecho sobre un espacio del explorador y
elige Crear una carpeta. Introduce el nombre de
la nueva carpeta: “miweb”. Doble para situarte
dentro de esta carpeta.
1.3 Repite el paso anterior para crear una subcarpeta
con el nombre images dentro de miweb.
2 Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta:

lorca.zip. Como resultado de la extracción encontrarás dos archivos: una imagen
(lorca.gif) y un archivo de texto (lorca.txt).
3 Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta

forma este archivo se mueve para situarse dentro ella. En lo sucesivo la carpeta images
contendrá todas las imágenes que se integren en las páginas web creadas.
1.3.2 Iniciar un documento nuevo en Kompozer
4 Inicia el programa Kompozer haciendo doble clic sobre el correspondiente icono situado
en el escritorio.
5 Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo
de texto lorca.txt. Se abrirá el Bloc de Notas mostrando su contenido.
6 Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene
este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de
Windows. Cierra la ventana del Bloc de Notas
7 En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para

maximizar la ventana de este programa.
8 Clic sobre el nuevo documento HTML que estamos editando y en la barra de menús
selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin
necesidad de teclearlo.
9 Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado.
Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.
10 En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón

Aceptar.
11 Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista
Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre
del archivo: lorca.
12 Clic en el botón Guardar

13 Título. Pulsa y arrastra para seleccionar la primera línea de texto: “Federico García
Lorca”. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1.
Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista:
Texto del cuerpo.
Nota:
Es muy recomendable utilizar las distintas opciones de formato de esta lista para
destacar frases y párrafos.
1.3.3 Insertar una imagen
14 Clic debajo del título anterior y pulsa la tecla <enter> para definir el punto donde se
insertará la imagen. En la barra de Redacción pulsa en el botón Imagen.
15 Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo

… para localizar el archivo que contiene la imagen.
16 Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemos situado
anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir.
17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto

alternativo. En este caso teclea “Federico García Lorca”. Se trata de un texto
descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando
el usuario sitúe el ratón sobre ella.
18 Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar
la imagen desde la página actual: “images/lorca.jpg”. Para terminar clic en el botón
Aceptar.
1.3.4 Insertar un hipervínculo
19 Pincha y arrastra sobre el enlace que aparece en la última línea del documento. A
continuación elige Editar > Cortar. Esta URL se ha copiado al portapapeles de Windows y
se ha eliminado de la ubicación actual. Como habrás podido comprobar es una enlace a
Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa:
http://www.google.es/search?q=Federico+García+Lorca
20 Pulsa y arrastra para seleccionar el texto “Más información” situado al final del
documento. A continuación en la barra de Redacción pulsa en el botón Enlace.
21 En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del
enlace y pulsa la combinación de teclas <Ctrl>+<V> para pegar la URL copiada
anteriormente. Para terminar pulsa en el botón Aceptar.
1.3.5 Guardar un documento web
22 Clic en el botón Guardar

23 Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el
archivo lorca.html creado para ver su aspecto con el navegador web instalado por
defecto. Otra opción es pulsar en el botón Navegar que se muestra en la barra de
Redacción de Kompozer. No obstante esta opción sólo funciona si tienes configurado en
tu equipo Mozilla Firefox como navegador por defecto.
24 No olvides eliminar el archivo lorca.txt una vez que has terminado.
25 Si es necesario abrir el archivo selecciona Archivo > Abrir.
Páginas web ::: Viñetas y marcadores 31
1.4 Viñetas y
marcadores
1.4 Viñetas y marcadores
1.4.1 Introducción
En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma página. Antes
de crear el hipervínculo, es necesario situar esos puntos mediante marcadores de posición.
Un marcador es un nombre que representa una posición dentro de la página. Suele estar
formado por un fragmento de texto y es utilizado como destino de un hipervínculo.
En el ejemplo que nos ocupa se utilizan marcadores e hipervínculos para crear un glosario de
términos. Asimismo se utilizan viñetas para crear la lista de hipervínculos.
Una lista con viñetas es una lista de elementos donde no importa el orden y todos se
muestran precedidos por un mismo símbolo que recibe el nombre de viñeta.
1.4.2 Ejemplo: el glosario
Crear el documento web
1. Extrae a la carpeta miweb de tu disco duro el contenido del archivo ZIP que se
adjunta a continuación: glosario.zip. Como resultado de esa extracción encontrarás
en esta carpeta un archivo de texto: glosario.txt
2. Inicia Kompozer haciendo doble clic en el icono del programa situado en el
escritorio.
3. El programa se abrirá sobre un nuevo documento en blanco.
4. Minimiza esta ventana y desde el explorador de archivos de Windows haz doble clic
sobre el fichero de texto glosario.txt . Se abrirá el Bloc de notas mostrando su
contenido.
5. Desde el Bloc de Notas selecciona Edición > Seleccionar todo para elegir el texto
completo que contiene este archivo. A continuación Edición > Copiar para copiar el
texto seleccionado al Portapapeles. Cierra la ventana del Bloc de Notas.
6. En la barra de tareas pulsa en el botón correspondiente de Kompozer para regresar a
este programa.
7. Una vez situado en Kompozer selecciona Editar > Pegar. De esta forma podrás
disponer del texto de la página sin necesidad de teclearlo.
8. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Glosario
educativo …” A continuación despliega el cuadro de formatos y elige Título 1.
Viñetas
9. Pulsa y arrastra para seleccionar la lista completa de términos situada debajo del
título. A continuación pulsa en el botón viñetas de la barra de Formato
Marcadores
10. La estructura que va a tener nuestro documento se recoge de forma gráfica en la

siguiente figura:
11. Ahora vamos a definir los marcadores, es decir, los puntos en la página a dónde se
van a dirigir los hipervínculos que se crearán más tarde. En primer lugar vamos a
definir un marcador inicial al comienzo de la página. Pulsa y arrastra para seleccionar
el texto del título del documento: “Glosario educativo …” y a continuación pulsa en el
botón Enlace interno de la barra de herramientas de Redacción.
12. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre

por defecto del marcador creado a partir del texto previamente seleccionado. Para
simplificarlo escribimos: Glosario y pulsamos en el botón Aceptar. Tras esta
operación observarás que el texto seleccionado muestra el icono de un ancla sobre
fondo amarillo a su izquierda. Esto indica que es un marcador.
Nota: Si es necesario eliminar un marcador basta con hacer clic sobre este icono de
ancla y luego pulsar la tecla <Supr>.
13. Ahora vamos a crear el marcador a la primera entrada del glosario. Selecciona el
texto “Adaptación curricular” que encabeza su definición (no en la lista de viñetas).
Clic en el botón Negrita de la barra de Formato.
14. A continuación pulsa en el botón Enlace interno.

15. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre

por defecto del marcador creado a partir del texto previamente seleccionado. Es
importante que definamos como nombre del marcador un nombre sencillo sin espacios
ni caracteres especiales. Clic en el botón Aceptar.
16. Repite los pasos 13, 14 y 15 para crear el resto de marcadores a lo largo del
documento: Criterio de evaluación, Criterio de promoción, etc.
Enlaces internos
Una vez que hemos terminado la creación de marcadores, vamos a diseñar los hipervínculos a
esos marcadores. Recuerda que los hipervínculos se encontrarán en la lista de viñetas inicial y
en el texto [Arriba] que aparece al finalizar cada definición.
17. Selecciona el texto "Adaptación curricular" ahora en la lista de viñetas inicial.
18. Clic en el botón Enlace que aparece en la barra de Redacción.
19. En el cuadro de diálogo Propiedades del enlace despliega la lista Ubicación del
enlace para seleccionar el enlace interno al marcador creado:
#Adaptación_curricular . Clic en el botón Aceptar.
20. Repite los pasos 17, 18 y 19 para crear un hipervínculo en cada entrada de la lista de
viñetas al marcador correspondiente.
21. Idem en la palabra “[Arriba]” situada al final de cada definición para que apunte al
marcador #Glosario. De esta forma el usuario final siempre encontrará un lugar donde
pulsar para regresar a la parte superior del documento donde se encuentra el índice
de términos. Esto evitará que utilice el scroll (desplazamiento vertical utilizando los
botones de la ventana) Ya sabes que los visitantes de una web no son muy amigos de
utilizarlo.
22. Sitúa el cursor debajo de cada hipervínculo con el texto “[Arriba]” e inserta una línea
horizontal separadora usando Insertar > Línea Horizontal. Al finalizar el documento
puedes añadir 2 seguidas para indicar al usuario el fin del mismo.
23. Completada la página vamos a guardarla. Clic en el botón Guardar. Si es la primera
vez que se guarda solicitará el título de la página.
24. Introduce como nombre del archivo glosario.html y guárdala en la carpeta miweb.
25. Si deseas cambiar el título de la página debes seleccionar Formato > Título y
propiedades de la página. No olvides guardar los cambios producidos.
26. Para visualizar el aspecto de la página pulsa en el botón Navegar (sólo funciona si
tienes configurado en tu equipo Mozilla Firefox como navegador web por defecto).
Otra opción es situarte en la carpeta miweb y hacer doble clic en el archivo
glosario.html para visualizarlo a través del navegador web.
Páginas web ::: Listas numeradas 37
1.5 Listas numeradas

1.5 Listas numeradas
1.5.1 Introducción
Una lista numerada es una lista de elementos ordenados. Tiene especial aplicación en la
descripción de los pasos de un procedimiento. Cada elemento viene precedido por un signo
numérico o letra del alfabeto que permite identificar su posición en la lista.
1.5.2 Ejemplo: lista de tareas
1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a

continuación: escribe.zip. Como resultado de esa extracción encontrarás en esta
carpeta un archivo de texto (escribe.txt) y una imagen (magiapalabras.gif). Arrastra
la imagen dentro de la carpeta images.
2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado
en el escritorio.
3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el
archivo escribe.txt. Se abrirá el Bloc de Notas mostrando el contenido de este
archivo.
4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar.
6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a
continuación elige Editar > Pegar
7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Escribe tu
cuento”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1.
8. Selecciona el texto “Descripción” y pulsa en el botón Negrita de la barra de

Formato.
9. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta
página. Para ello clic en el botón Guardar, introduce como título: “Escribe tu
cuento” y guárdala como escribe.html dentro de la carpeta miweb.
10. Sitúa el cursor entre la descripción y el enlace. A continuación pulsa en el botón
Imagen.
11. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo
… y navega para localizar la imagen magiapalabras.gif dentro de la carpeta
miweb\images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla

Ubicación de la imagen se muestra la ruta relativa respecto a la página actual:
images/magiapalabras.gif . Esto es así porque está activada la casilla La URL es
relativa a la dirección de la página.
12. En Texto alternativo introduce “La magia de las palabras”.

13. Clic en la pestaña Enlace e introduce la URL: http://educalia.educared.net
14. Para terminar pulsa en el botón Aceptar.

15. Para conseguir que el enlace situado en la imagen muestre en una nueva ventana
asegúrate de que la imagen está seleccionada y a continuación haz clic derecho en la
etiqueta “<a>” que aparece en la esquina inferior izquierda de la barra de estado de
Kompozer. La etiqueta HTML “<a>” define el enlace introducido.
16. En el menú que se despliega para la etiqueta “<a>” elige Propiedades avanzadas.
17. En el cuadro Editor avanzado de propiedades, en la pestaña Atributos HTML
selecciona en la lista Atributo el elemento target (destino) y en la lista Valor elige
_blank (nueva ventana). Pulsa en el botón Aceptar.
18. Selecciona el bloque de texto http://educalia.educared.net que aparece en la página

y pulsa en el botón Enlace.
19. En el cuadro de diálogo Propiedades del enlace introduce el enlace anterior en la
casilla Ubicación del enlace si no estuviera. En la sección Destino activa la opción El
enlace se abrirá y selecciona “en una nueva ventana”. Para terminar pulsa en el
botón Aceptar
20. Selecciona la línea de texto Actividad: y pulsa en el botón Negrita de la barra de

Formato.
21. Pulsa y arrastra para seleccionar todas las instrucciones que aparecen debajo de
Actividad.
22. Clic en el botón Lista de viñetas
23. Para terminar pulsa en el botón Guardar. Para visualizar el aspecto final de la página
pulsa en el botón Navegar.
Páginas web ::: Tablas 42
1.6 Tablas
1.6 Tablas
1.6.1 Introducción
Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que
intersectan se denominan celdas. Aunque es una práctica muy extendida, no se recomendable
utilizar tablas para maquetar texto e imagen en una página web. Si se utilizan tablas en lugar
de contenedores DIV para situar elementos en una página, su accesibilidad puede verse
seriamente afectada. Por ello las tablas deben reservarse para presentar datos de forma
tabular.
1.6.2 Ejemplo: tabla de datos
Crear el documento
1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a

continuación. Como resultado de esa extracción encontrarás en esta carpeta un
archivo de texto (poblacion.txt) y una imagen (poblacion.gif). Arrastra la imagen
dentro de la carpeta images.
2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado
en el escritorio.
3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el
archivo poblacion.txt. Se abrirá el Bloc de Notas mostrando el contenido de este
archivo.
4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar.
6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a
continuación elige Editar > Pegar
7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Demografía
española”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1.
8. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta
página. Para ello clic en el botón Guardar, introduce como título: “Demografía de
España” y guárdala como poblacion.html dentro de la carpeta miweb.
Insertar imagen
9. Sitúa el cursor después del texto y antes de los datos. A continuación pulsa en el
botón Imagen.
10. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo
… y navega para localizar la imagen poblacion.jpg dentro de la carpeta
miweb\images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla
Ubicación de la imagen se muestra la ruta relativa respecto a la página actual:
images/poblacion.gif . Esto es así porque está activada la casilla La URL es relativa a
la dirección de la página.
11. En el cuadro de texto Texto Alternativo escribe: “Demografía española”.

12. Clic en la pestaña Apariencia y en el cuadro Borde sólido introduce el valor 1 como
grosor en píxeles del borde que mostrará la imagen.
13. Pulsa en el botón Aceptar.
Crear una tabla de datos
Existen dos procedimientos alternativos para crear la tabla:

• Insertar una tabla en blanco.
• Convertir el texto existente en una tabla.
Vamos a estudiar primero un método y luego el otro.

Método 1. Insertar una tabla en blanco
14. Clic inmediatamente debajo de la imagen para situar el cursor en este espacio.
15. Pulsa en el botón Tabla disponible en la barra de herramientas Redacción.
16. En el cuadro de diálogo Insertar tabla puedes arrastrar el puntero sobre la cuadrícula
para definir el número de filas y columnas que tendrá la nueva tabla. Para terminar
haz clic en la última celda de la parrilla creada.
17. Esta opción sólo permite crear tablas de 6x6 celdas como máximo. Para un ajuste más
fino, como es el caso que nos ocupa, pulsa en la pestaña Preciso. Introduce el
número de filas: 20 y el número de columnas: 3. En Anchura indica los píxeles
exactos de ancho que tendrá la tabla o bien el % que ocupará del ancho total de la
ventana. Conviene utilizar una anchura 100 % de la ventana ya que se esta forma la
tabla se ajusta automáticamente al espacio disponible en la ventana del navegador.
18. Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde.
19. Clic el botón Aceptar.
20. De esta forma se crea una tabla en blanco. Normalmente se crea la tabla y luego se
va rellenando introduciendo los datos por teclado. Sin embargo en este caso se podría
completar celda a celda mediante Editar > Cortar (Ctrl+X) y Editar > Pegar (Ctrl+V)
utilizando el contenido que ya tenemos en el documento. Teniendo en cuenta que los
datos ya tienen un preformato podemos aprovechar para utilizar el procedimiento de
convertir el texto en una tabla tal y como se explica en el siguiente apartado.
21. Si deseas modificar algún parámetro de la tabla inicial haz clic derecho sobre ella,
elige Seleccionar Tabla > Tabla y luego pulsa en el botón Tabla de la barra de
Redacción. Con esta rutina se muestra el cuadro de diálogo Propiedades de la tabla
donde es posible editar alguno de sus parámetros.
Método 2. Crear tabla a partir de una selección
22. Pulsa y arrastra sobre el documento para seleccionar todas las líneas que contienen
los datos.
23. En la barra de menús de Kompozer debes seleccionar Tabla > Crear tabla a partir de
la selección o simplemente pulsa en el botón Tabla de la barra de Redacción.
24. En el cuadro de diálogo Convertir en tabla marca la opción Otro carácter e introduce
un asterisco “*”. Si te fijas el asterisco es el carácter que separa un dato de otro
dentro de la misma línea. A continuación activa la casilla Borrar carácter separador.
25. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la
tabla de resultados.
Dar formato a la tabla
26. Pulsa y arrastra para seleccionar las celdas de la primera fila. Una vez seleccionadas
haz clic derecho sobre ellas y elige la opción Color de fondo de la tabla o celda …
27. En el cuadro de diálogo Color de la tabla o de la celda selecciona un color
predefinido y pulsa en el botón Aceptar. Observa que esto hará que la fila de
encabezado de tabla se muestre con este color de fondo.
28. Mantén la tecla Ctrl pulsada para ir haciendo clic sobre todas las celdas de las filas
pares. Una vez seleccionadas repite los pasos 27-28 para definir un color gris de
fondo. La diferencia de color entre una fila y la siguiente facilitará la lectura de los
datos.
29. Para realizar cambios en la tabla completa haz clic derecho sobre cualquier punto de
la tabla y elige Seleccionar tabla > Tabla. Con esta acción se selecciona la tabla
completa.
30. A continuación pulsa en el botón Tabla de la barra de herramientas.
31. En el cuadro de diálogo Propiedades de la Tabla se pueden configurar sus múltiples
parámetros. En este caso sitúa un 0 en el cuadro Borde para evitar que se visualice el
borde la tabla.
33. No olvides hacer clic en el botón Guardar para conservar el trabajo.
Páginas web ::: Hojas de estilo CSS 49
1.7 Hojas de estilo CSS

1.7 Hojas de estilo CSS
1.7.1 ¿Qué es una hoja de estilo?
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de
estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente,
color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.
Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se
crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier
cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las
páginas vinculadas a la misma.
Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se
convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas
HTML para que el navegador lo interprete y visualice adecuadamente.
Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a continuación
despliegas la lista de formatos para seleccionar Título 1 (de forma similar a lo propuesto en
las actividades anteriores de este curso), realmente el fragmento de texto se ha “etiquetado”
como <h1> Texto seleccionado … </h1>. Si hubieramos elegido Título 2 se habría etiquetado
con <h2> … </h2>, etc.
Algunas etiquetas HTML son:
• <body> … </body> . Contienen todos los caracteres que forman la página web.
• <h1> … </h1>, …, <h6> …</h6>. Permiten definir títulos de distintos tamaños (hasta
6).
• <p> … </p>. Contienen el texto de un párrafo.
• <a href=”http://...”>Texto del enlace</a>. Se utiliza para crear enlaces.
Existen muchas más etiquetas pero en esta práctica sólo vamos a modificar el formato (color,
tipo, tamaño, efecto, etc) de los textos etiquetados con las que se citan.
En esta práctica vamos a crear una hoja de estilo y se vinculará a una página.
1.7.2 Crear una hoja de estilo
1. Antes de comenzar la práctica en sí, utiliza el explorador de archivos para crear una
subcarpeta de nombre css dentro de miweb.
2. A continuación descarga el archivo agala.zip y sitúalo dentro la carpeta miweb . Al
extraer su contenido encontrarás el archivo agala.htm y las imágenes agala.jpg y
paper.gif guardadas dentro de la carpeta images.
3. Abre Kompozer y a continuación selecciona Archivo > Abrir para localizar la carpeta
miweb y elegir el archivo agala.htm. Pulsa el botón Abrir.
4. En la página abierta observarás que al hacer clic sobre los distintos párrafos el
formato de cada uno de ellos se puede ver en la lista de formatos de la barra de
herramientas. Se trata de texto etiquetado con: h1, h2, etc. En esta práctica veremos
cómo se puede definir el color, tamaño, fuente, etc con que se mostrará el texto
correspondiente a cada etiqueta. Para conseguir esto crearemos una hoja de estilo.
5. En la barra de menús de Kompozer selecciona Herramientas > Editor CSS o bien

pulsa en el botón CSS que aparece en la barra de herramientas
6. En el cuadro de diálogo Hojas de estilo CSS pulsa en el botón que muestra la paleta y
en el menú desplegable seleciona la opción Hoja de estilos enlazada (en algunas
versiones de Kompozer la traducción al castellano ha sido Elem. Enlace)
7. Los estilos se pueden guardar en el propio código HTML de la página HTML o bien en
un archivo *.CSS independiente. En este caso hemos optado por la segunda opción por
lo que seleccionamos es una hoja de estilos enlazada.
8. En la casilla URL escribe la dirección: css/miestilo.css Esto le indicará a Kompozer

que los estilos se guardarán en una hoja de estilos externa cuyo nombre de archivo
será miestilo.css dentro de la subcarpeta css que hemos creado en el paso 1. Para
terminar pulsa en el botón Crear hoja de estilo.
9. Cuando se crea una hoja de estilo su nombre aparece en el panel izquierdo del editor
CSS: Hojas y reglas.
10. Selecciona esta entrada css/miestilo.css , pulsa en el botón de la paleta y elige Regla
de estilo o Regla para crear la primera regla de formato.
11. En el panel derecho se muestra Nueva regla de estilo. Selecciona la opción estilo
aplicado a todos los elementos del tipo. De esta forma las características de estilo
se aplicarán a una etiqueta html estándar: body, h1, h2, etc.
12. Despliega la lista para seleccionar la etiqueta HTML cuyo formato vamos a definir. En
este caso la etiqueta será body. Esta etiqueta afecta a toda la página. A continuación
pulsa el botón Crear regla de estilo.
13. Asegúrate de que está seleccionado en el panel izquierdo el tipo recién creado y
pulsa sobre la pestaña Texto del panel .
14. En Tipo de letra vamos a cambiar el tipo de fuente con que se visualizará la página.
Activa la opción predefinido y selecciona en la lista: Arial, Helvetica, sans-serif.
Recuerda que el usuario que visualiza la página deberá tener instaladas en su equipo
las fuentes indicadas. En caso contrario estos tipos serán sustituidos por las fuentes
por defecto que emplee el navegador web utilizado. Por ello conviene utilizar fuentes
habituales. En esta pestaña se podrían cambiar más opciones del texto de la página
pero lo dejaremos como está.
15. Clic en el pestaña Fondo. En la casilla Imagen pulsa en el botón Elegir archivo y
selecciona la imagen images/paper.gif. De esta forma la página toma esta imagen
como fondo.
16. En el cuadro Hojas y reglas haz clic sobre la entrada css/miestilo.css y pulsa de
nuevo en el botón de la paleta para desplegar el menú y elegir la opción Nueva regla
de estilo.
17. En el panel derecho activa la opción estilo aplicado a todos los elementos del tipo.
A continuación elige la etiqueta h1 en la lista desplegable y pulsa en el botón Crear
regla de estilo. Si la etiqueta no está disponible en la lista desplegable se puede
teclear directamente sobre este cuadro de texto.
18. Asegúrate de que la regla h1 está seleccionada en el panel izquierdo y activa la

pestaña Texto.
19. En el cuadro Color pulsa en el botón para elegir un color predefinido en la paleta de
colores que se muestra. Por ejemplo: Rojo oscuro o marrón. Observa que tras
seleccionarlo ya ha cambiado de color el título del documento HTML situado debajo
del editor CSS.
20. Repite los pasos 16 a 19 para definir la etiqueta h2 con el color de texto gris oscuro.
21. Idem para la etiqueta a (enlaces) de color de texto rojo. Al crear la regla de estilo
esta etiqueta no se ofrece en la lista desplegable por lo que será necesario escribirla.
22. Idem para la etiqueta td (celda de tabla) de color de texto rosa. Observa que tras
definir el color la página ya adquiere el color definido en el texto asociado a esa
etiqueta HTML.
23. Cierra el panel Hoja de estilos CSS pulsando en el botón Aceptar.
24. Clic en el botón Guardar para guardar las modificaciones de la página.
25. Si revisas el Código fuente de la página (haciendo clic en la pestaña inferior Código
fuente) verás que se ha creado una vinculación de esta página al archivo que
contiene la información de estilos: <link rel="stylesheet" href="css/miestilo.css" y que
además se ha creado este archivo *.CSS en la carpeta css.
1.7.3 Vincular una hoja de estilo a una página web
1. Descarga y descomprime el archivo adjunto estilo.zip dentro de la carpeta

miweb\css. Como resultado de la extracción se obtendrá el archivo estilo.css dentro
de la carpeta css.
2. Inicia Kompozer y a continuación abre el archivo HTML anterior: agala.htm mediante
Archivo > Páginas recientes > …
3. Para abrir el editor CSS selecciona Herramientas > Editor CSS o bien pulsa en el
botón CSS.
4. Para asociar otra hoja de estilo a la página actual debe eliminarse la vinculación con
la hoja de estilo miestilo.css que hemos creado en el apartado anterior. En el panel
Hojas de estilo CSS pulsa sobre la hoja de estilo creada en el apartado anterior que
aparece en la lista de Hojas y reglas para pulsar en el botón Quitar.
5. A continuación pulsa en el botón hoja de estilo CSS y en el menú desplegable elige

Hoja de estilos enlazada. En algunas traducciones este elemento tiene como nombre
Elem. enlace
y en el panel derecho pulsa el botón Elegir archivo para navegar, seleccionar y abrir el
archivo miweb\css\estilo.css.
6. Clic en el botón Crear hoja de estilos. Tras realizar esta tarea se muestra la hoja
seleccionada en el panel izquierdo Hojas y reglas. Clic sobre ella para seleccionarla.
Al abrirla pulsando en el botón “+” se mostrarán las reglas que contiene.
7. Observa que la página web ha adquirido el formato de la hoja de estilo elegida.

8. Para modificar alguna propiedad de una etiqueta basta con seleccionarla en el panel
izquierdo Hojas y reglas para luego navegar entre las pestañas del panel derecho (
General, Texto, Fondo, etc) y realizar los cambios oportunos.
9. Clic en el botón Guardar para guardar la vinculación de la página agala.html con la
hoja de estilo estilo.css así como las modificaciones introducidas en esta última.
1.7.4 Generadores web de CSS
En Internet existen múltiples sitios web donde es posible configurar en línea una página *.CSS
utilizando cuadros de texto y listas desplegables de un formulario. El resultado final es un
código CSS que se puede copiar y pegar en un archivo *.css local para posteriormente situarlo
en nuestro sitio web y vincularlo a las páginas HTML.
Ejemplo: http://www.ignside.net/man/misc/testcss/cssgenerador.htm
Otros ejemplos se pueden encontrar a través de Google con los términos de búsqueda:
“generador CSS”.
Páginas web ::: Uso de plantillas 59
1.8 Uso de plantillas

8. Uso de plantillas
1.8.1 ¿Para qué sirve una plantilla?
Una plantilla HTML se utiliza como base para crear varias páginas con un diseño similar pero
con distinto contenido. Un administrador de la web puede diseñar las plantillas propias de su
sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseño de
páginas HTML. De esta forma se asegura cierta uniformidad en las páginas de un sitio web.
1.8.2 Crear una plantilla
En este ejemplo vamos a crear una plantilla que nos permita diseñar webquests para nuestros
alumnos con sólo rellenar sus áreas editables.
1. Antes de comenzar la práctica en sí, utiliza el explorador de archivos para crear una
subcarpeta de nombre plantillas dentro de miweb.
2. Abre Kompozer y selecciona Archivo > Nuevo.
3. En el cuadro de diálogo Crear un nuevo documento o plantilla activa la opción Una
plantilla vacía y pulsa en el botón Crear.
4. Pulsa 3-4 veces la tecla <enter> y luego haz clic para situar el cursor en la primera
línea de la página.
5. Selecciona Insertar > Plantillas > Insertar área editable.
6. Se muestra el cuadro Insertar un área editable. En Nombre de área introduce la
palabra Título, en Tipo de área selecciona Bloque (si eliges texto fluido el área
tendrá una anchura expandible en función del texto que se va introduciendo). Clic en
el botón Aceptar.
7. Selecciona el texto que aparece en la caja Titulo y en la lista desplegable de

formatos selecciona Título 1 para este párrafo
8. Repite los pasos 5 y 6 para crear las siguientes áreas editables: Subtítulo, Edades,
Introducción, Tarea, Proceso, Recursos, Evaluación, Conclusión y Créditos. Puedes
introducir en cada caja uno o varios <enter> para definir su altura.
9. Sitúate en la última línea y teclea el año y denominación de tu centro de trabajo.
Este texto no será editable.
Nota:
Sobre esta página se pueden definir párrafos fijos o áreas editables con distintos formatos.
Incluso se pueden insertar imágenes, color de fondo, etc como si se tratase de una página
HTML normal.
10. Selecciona Archivo > Guardar.

11. En el cuadro de diálogo Título de la página NO es conveniente introducir título
porque se trata de una plantilla. Pulsa en el botón Aceptar.
12. Se muestra la ventana Guardar página como.
13. En la lista desplegable Guardar en selecciona la carpeta plantillas. En Nombre

introduce, por ejemplo, miplantilla.mzt . Recuerda que Kompozer utiliza la
extensión de archivo *.mzt para guardar plantillas HTML de los documentos.
14. Para cerrar la plantilla elige Archivo > Cerrar o bien pulsa en el icono con forma de X
en rojo que aparece en la esquina superior derecha del documento.
1.8.3 Crear una página HTML a partir de una plantilla
1. Elige Archivo > Nuevo

2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción
Un nuevo documento basado en una plantilla
3. Pulsa el botón Elegir archivo … y elige la plantilla anteriormente creada.
4. Clic en el botón Crear.
5. En la nueva página sustituye el texto de las áreas editables por el texto definitivo.
Observa que cada área es extensible hacia abajo para alojar el texto o imágenes que
se deseen insertar. Por otra parte el pie con la identificación del centro no se puede
editar al no haberse incluido en un área editable durante el diseño de la plantilla
original.
6. Elige Archivo > Guardar como
7. En el cuadro Título de la página introduce el título de la página. Será el texto que
aparecerá en la barra de título del navegador web cuando se navegue por la página.
Por ejemplo: “Mi primer webquest”. Clic en el botón Aceptar.
8. En el cuadro Guardar página como selecciona la carpeta miweb e introduce como

Nombre: webquest.html. Clic en el botón Guardar.
9. Para visualizar el aspecto final de esta página pulsa en el botón Navegar situado en la
barra de herramientas de Redacción. (Este botón sólo funciona si tienes instalado
Firefox como navegador por defecto. Esta opción se configura abriendo Firefox y
seleccionando Herramientas > Opciones > Principal > Valores predeterminados del
sistema).
10. Cuando se visualiza una página web basada en una plantilla no se visualizan las
etiquetas de las áreas editables.
Notas:
• Si durante la edición de un documento HTML deseas separar un documento de la
plantilla a partir de la cual se ha creado selecciona Editar > Separar de la plantilla.
• Cualquier modificación posterior de la plantilla NO afecta a las páginas creadas con
anterioridad.
• Es posible transformar una página HTML en una plantilla selecciona Formato > Título
y propiedades de la página. En el cuadro de diálogo Propiedades de la página la
opción Plantillas > Esta página es una plantilla
Páginas web ::: Formularios 66
1.9 Formularios
1.9 Formularios
1.9.1 ¿Qué es un formulario?
Un formulario es un conjunto de casillas que se puede añadir a una página y que permite
recoger datos que introduce el usuario para luego procesarlos.
En un formulario hay 2 partes básicas:
• El interfaz o página con la estructura de campos, etiquetas y botones que puede ver
el usuario.
• El programa o script que procesa esa información.
La construcción del formulario es relativamente fácil. Sin embargo crear el programa o script
es mucho más complicado y no será tratado porque excede el propósito de este curso.
1.9.2 Formulario de búsqueda de Google
En esta actividad vamos a crear un formulario que envíe el texto introducido al script de
búsqueda de Google para obtener directamente la página de resultados.
1. Extrae a la carpeta miweb\images el contenido del archivo google.zip que se

adjunta. Como resultado de esa extracción encontrarás en esta carpeta el archivo
gráfico: logogoogle.gif
3. Escribe: "Buscador Google". Selecciona el texto y elige el estilo de párrafo Título 1.
Pulsa <enter> para saltar a la siguiente línea.
4. Selecciona Insertar > Imagen …
5. En el cuadro de diálogo Propiedades de imagen pulsa en el botón Elegir archivo …
para localizar y abrir el archivo logogoogle.gif en la carpeta miweb\images.
6. En Texto alternativo introduce “Google”.

7. Activa la pestaña Enlace e introduce la dirección web: http://www.google.es. De

esta forma el usuario podrá situarse en la página de inicio de Google haciendo clic en
la imagen.
9. Selecciona Insertar > Formulario … > Definir formulario …

10. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:
• Nombre del formulario: google

• URL de la acción: http://www.google.es/search. Es la URL del script o
programa que procesará el texto que el usuario ha tecleado en el formulario
diseñado. Como puedes comprobar hay scripts que permiten invocarlos desde
otros sitios web.
• Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el
formulario para enviar los datos. Se elige uno u otro según lo requiera el
programa que va a recibir esta información. En este caso debe ser GET para
que funcione.
11. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado
con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic
derecho sobre el formulario y selecciona Propiedades de Formulario …
12. A continuación vamos a situar los elementos del formulario. Clic dentro del formulario
para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea
"Introduce el texto de búsqueda". Pulsa <enter> para situarte en la siguiente línea.
13. Elige Insertar > Formulario > Campo de formulario.
14. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más
propiedades. Define las siguientes propiedades:
• Tipo del campo: Texto
• Nombre del campo: q
• Tamaño del campo: 50
15. Clic en el botón Aceptar.
16. Pulsa la tecla <enter> para situarse en una nueva línea para insertar los botones del
formulario. A continuación selecciona Insertar > Formulario > Campo de formulario.
17. En el cuadro de diálogo Propiedades del campo del formulario configura los
parámetros:
• Tipo del campo: Botón de envío.
• Nombre del campo: Enviar.
• Valor del campo: Enviar.

19. Selecciona de nuevo Insertar > Formulario > Campo de formulario.
20. En el cuadro de Propiedades del campo del formulario define los siguientes valores:
• Tipo del campo: Botón de reestablecimiento.
• Nombre del campo: Borrar.
• Valor del campo: Borrar.

22. Para guardar esta página, elige Archivo > Guardar como.
23. Introduce “Buscador Google” como título y pulsa en el botón Aceptar.
24. Guarda la página en la carpeta miweb y define como nombre de archivo: google.html
. Pulsa en el botón Guardar.
25. Clic en el botón Navegar de Komposer para comprobar el funcionamiento del

formulario creado.
1.9.3 Formulario de traducción de Babylon
El propósito de esta actividad es crear un formulario donde el usuario introduzca un término

en inglés y se muestre su traducción al español utilizando el script de traducción de Babylon
Translator (http://www.babylon.com)
1. Extrae a la carpeta miweb\images el contenido del archivo babylon.zip que se

adjunta. Como resultado de esa extracción encontrarás en esta carpeta el archivo
gráfico: babylon.gif
3. Escribe: "Traductor Babylon". Selecciona el texto y elige el estilo de párrafo Título 1.
Pulsa <enter> para saltar a la siguiente línea.
4. Selecciona Insertar > Imagen …
5. En el cuadro de diálogo Propiedades de imagen, pulsa en el botón Elegir archivo …
para localizar y abrir el archivo babylon.gif en la carpeta miweb\images.
6. En Texto alternativo introduce “Traductor Babylon”.

7. Activa la pestaña Enlace e introduce la dirección web: http://www.babylon.com . De
esta forma el usuario podrá situarse en la página de inicio de Babylon haciendo clic en
la imagen.
9. Selecciona Insertar > Formulario … > Definir formulario …

10. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:
• Nombre del formulario: babylon

• URL de la acción: http://info.babylon.com/cgi-bin/info.cgi . Es la URL del
script o programa que procesará el texto que el usuario ha tecleado en el
formulario diseñado. Como puedes comprobar hay scripts que permiten
invocarlos desde otros sitios web.
• Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el
formulario para enviar los datos. Se elige uno u otro según lo requiera el
programa que va a recibir esta información. En este caso debe ser GET para
que funcione.
11. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado
con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic
derecho sobre el formulario y selecciona Propiedades de Formulario …
12. A continuación vamos a situar los elementos del formulario. Clic dentro del formulario
para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea
"Introduce la palabra que deseas traducir". Pulsa <enter> para situarte en la siguiente
línea.
13. Elige Insertar > Formulario > Campo de formulario.

14. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más
propiedades. Define las siguientes propiedades:
• Tipo del campo: Texto
• Nombre del campo: word
• Tamaño del campo: 30
16. Pulsa la tecla <enter> para situarse en una nueva línea para insertar los botones del
formulario. A continuación selecciona Insertar > Formulario > Campo de formulario.
parámetros:
• Tipo del campo: Botón de envío.
• Nombre del campo: Traducir.
• Valor del campo: Traducir.

19. Algunos scripts, como ocurre con Babylon Translator, necesitan recibir algunos valores
adicionales para que funcionen correctamente. Se trata de campos con valores
definidos que se ocultan al usuario pero que son enviados junto con el resto de
información del formulario. Se denominan campos ocultos. Para definir campos
ocultos en un formulario asegúrate de que el cursor está situado dentro del
formulario y a continuación selecciona Insertar > Formulario > Campo de
formulario.
parámetros y pulsa en el botón Aceptar:
• Tipo del campo: Oculto
• Nombre del campo: lang
• Valor del campo: 3
Este valor indica al script que debe traducir el término introducido del inglés al
castellano. Si introduces otro valor lo traducirá del inglés a otro idioma: francés (1),
italiano (2), alemán (4), portugués (5), etc.
21. Selecciona Insertar > Formulario > Campo de formulario y en el cuadro de diálogo
Propiedades del campo del formulario configura los parámetros:
• Tipo del campo: Oculto

• Nombre del campo: layout
• Valor del campo: combo.html
Este valor le indica al script el modelo de página HTML que debe utilizar para mostrar
el resultado de la traducción.
23. Para guardar esta página, elige Archivo > Guardar como.
24. Introduce “Traductor Babylon” como título y pulsa en el botón Aceptar.
25. Guarda la página en la carpeta miweb y define como nombre de archivo

babylon.html . Pulsa en el botón Guardar.
26. Clic en el botón Navegar de Kompozer para comprobar el funcionamiento del

formulario creado. Tras introducir el término en inglés (cat, dog, etc.) y pulsar en el
botón Traducir se mostrará su traducción al castellano.
Páginas web ::: Archivos ZIP 78
1.10 Archivos ZIP

1.10 Archivos ZIP
1.10.1 Introducción
En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de

una página web. Puede ser el caso de una colección de ficheros organizados en carpeta y
subcarpetas, el instalador de un programa, un archivo ejecutable en local, etc. Para reducir
el peso de la descarga conviene ofrecerlo empaquetado en un archivo ZIP.
Para crear o descomprimir archivos ZIP, tanto en Windows como en Ubuntu, no es necesario
instalar ningún programa adicional. Se pueden afrontar estas tareas desde el mismo sistema
operativo.
1.10.2 ¿Cómo comprimir un archivo o carpeta?
Windows
1. Desde el explorador de archivos haz clic derecho sobre el icono del fichero o carpeta
que deseas comprimir. Por ejemplo sobre la carpeta: miweb
2. Selecciona Enviar a > Carpeta comprimida (en zip)
3. Esta acción crea un archivo ZIP con el mismo nombre que la carpeta o archivo
original.
Ubuntu
1. Desde el explorador de archivos haz clic derecho sobre el icono del fichero o carpeta
que deseas comprimir.
2. Selecciona Crear archivador.
3. En el cuadro de diálogo Crear archivador introduce:
• Archivador: nombre del archivo ZIP resultante.
• ZIP: despliega la lista de formatos de archivo y selecciona la entrada ZIP.
• Lugar: indica la carpeta destino donde se guardará el zip.
4. Esta acción crea un archivo ZIP con el mismo nombre que la carpeta o archivo
original.
Ambos
1. Se puede utilizar el explorador de archivos para copiar el archivo resultante

miweb.zip al interior de la carpeta miweb\descargas
1.10.3 ¿Cómo descomprimir un archivo ZIP?
1. Descarga el archivo mrveghead.zip y utiliza el explorador de archivos para

localizarlo.
Windows
2. Clic derecho sobre el archivo ZIP y selecciona la opción Extraer todo.

3. En el cuadro de diálogo Asistente para extracción haz clic en el botón Siguiente.
4. En el cuadro Seleccione un destino pulsa en el botón Examinar para definir la
carpeta destino donde se copiará el resultado de la extracción.
5. Clic en Siguiente.
6. Una vez concluído el proceso pulsa en el botón Finalizar.
7. Esta acción extraerá el contenido de este ZIP guardando el archivo ejecutable

mrveghead.exe en la misma carpeta donde tienes mrveghead.zip. En este caso se
trata de un archivo para ejecutar en local con una animación en Flash.
Ubuntu
2. Desde el explorador de archivos haz clic derecho sobre el icono del ZIP que deseas
descomprimir.
3. Selecciona la opción Extraer aquí.
4. Esta acción extraerá el contenido de este ZIP en la misma carpeta donde se sitúa el
ZIP original.
1.10.4 Enlace a un ZIP desde una página HTML
1. Descarga el archivo mrveghead.zip y utiliza el explorador de archivos para copiarlo a

la carpeta miweb\descargas. Si no dispones de la carpeta descargas debes crearla
dentro de miweb.
2. Descarga y extrae el contenido del archivo mvh_instrucciones.zip en la carpeta
miweb. De esta forma obtendrás un archivo de texto: mvh_instrucciones.txt.
3. Desde el explorador de archivos sitúate dentro en la carpeta miweb y haz doble clic
sobre el archivo de texto anterior para abrirlo.
4. Desde el Bloc de notas elige Edición > Seleccionar todo y luego Edición > Copiar.
Cierra el Bloc de Notas y borra este archivo de texto.
5. Abre Kompozer y elige Archivo > Nuevo.
Un documento vacío y presiona en el botón Crear.
7. Sobre el nuevo documento selecciona Editar > Pegar.

8. Selecciona el título inicial : “ MR. VEGHEAD” y en la lista de Formatos selecciona
Título 1.
Nota importante: Antes de comenzar a insertar imágenes o hipervínculos en una

página nueva es muy conveniente guardarla para indicarle a Kompozer dónde se
ubicará. De esta forma los enlaces a los recursos serán relativos y no absolutos
evitándose con ello muchos problemas durante la publicación de recursos en el
servidor web.
9. Para guardar una página haz clic en el botón Guardar situado en la barra de
herramientas de Redacción de Kompozer.
10. En el cuadro Título de la página introduce como título: “Mr.Veghead” y pulsa en el

botón Aceptar.
11. En el cuadro Guardar página como selecciona la carpeta miweb en la lista

desplegable Guardar en: y define como Nombre del archivo: mrveghead.html. Para
terminar pulsa en el botón Guardar.
12. Ahora vamos a situar el enlace al ZIP. Para ello haz clic al final del documento para
escribir: “Descarga este juego en tu equipo (620 Kb)”
13. Pincha y arrastra para seleccionar este texto. Pulsa en el botón Enlace.
14. En el cuadro de diálogo Propiedades del enlace pulsa en el botón Elegir archivo …
15. En el cuadro Abrir archivo HTML despliega la lista Tipo: y selecciona la opción Todos
los archivos para que se muestren todos los tipos de archivos en lugar de sólo los
*.HTML. En la lista Buscar en: debes desplegar esta lista para situarte en la carpeta
miweb\descargas.
16. Selecciona el archivo mrveghead.zip y pulsa en el botón Abrir.

17. Observa que tras esta operación en el cuadro Propiedades del enlace se muestra
como ubicación del enlace: “descargas/mrveghead.zip”.
18. Clic en el botón Aceptar para terminar el enlace.

19. Para guardar los cambios pulsa en el botón Guardar.
20. Si deseas visualizar el aspecto final de la página haz clic en el botón Navegar.
Páginas web ::: Documentos PDF en la web 84
1.11 Documentos PDF

en la web
1.11 Documentos PDF en la web
En un sitio web es frecuente poner a disposición de los usuarios documentos en formato PDF
para la consulta de información. Ejemplo: los boletines oficiales. Las ventajas que ofrece este
tipo de archivo son:
• Se puede abrir con distintas aplicaciones de software gratuito.
• Es accesible desde cualquier plataforma: Windows, Linux, Mac, etc.
• El documento PDF tiene un tamaño más reducido que el original.
• Admite la búsqueda fácil de información entre sus páginas.
• Tiene una presentación idéntica e independiente del dispositivo de visualización
(pantalla) y de impresión (impresora).
• Permite proteger el contenido del documento frente a terceros.
En este capítulo se explican los siguientes procedimientos:
1. Lectura y creación de archivos PDF desde Windows: Adobe Reader y PDF Creator.
2. Lectura y creación de archivos PDF desde Ubuntu: Evince Visor de documentos.
3. Exportar a PDF desde OpenOffice.
4. Vinculación de un archivo PDF en una página HTML.
1.11.2 Lectura de archivos PDF en Windows
En Windows necesitamos un programa que nos permita abrir y leer los archivos PDF. La opción
más habitual es Adobe Reader. Puedes descargar e instalar el archivo
AdbeRdr812_es_ES.exe. La instalación se realiza siguiendo las opciones por defecto del
asistente. Tras la instalación se creará un acceso directo en el escritorio. Haciendo clic en
este icono se iniciará el programa. Desde el navegador web, cuando hagas clic en un enlace a
un documento PDF se iniciará automáticamente Adobe Reader mostrando el contenido del
archivo referenciado en el interior de una ventana del navegador.
Si deseas consultar la web de Adobe para comprobar si existe una nueva versión del
programa: http://www.adobe.es
Otra alternativa al uso de Adobe Reader es disponer de un programa portable para leer
documentos PDF. Es el caso del programa Sumatra PDF. Descarga y descomprime el archivo
SumatraPDF.exe en una carpeta de tu disco duro o bien en tu pendrive.
1.11.3 Instalación de PDF Creator en Windows
El programa Adobe Reader permite la lectura de documentos PDF pero no su creación. En su

defecto se propone utilizar PDFCreator como aplicación de libre distribución para crear un
documento PDF a partir de un archivo Word, Excel, etc:
http://sourceforge.net/projects/pdfcreator/
1. Descarga el archivo PDFCreator-0_9_5_setup.exe y ejecuta el asistente de

instalación.
2. Selecciona el idioma de instalación. Elige Español y pulsa en el botón Aceptar.
3. Bienvenido al asistente de instalación de PDFCreator. Clic en Siguiente> para
continuar.
4. Acuerdo de Licencia. Marca la opción Acepto el acuerdo y pulsa en el botón
Siguiente >
5. Tipo de instalación. Activa la opción Instalación estándar y pulsa en el botón
Siguiente >
6. Nombre de la impresora. PDF Creator instala una impresora virtual en tu sistema.
Desde cualquier aplicación que pueda imprimir se podrán generar archivos PDF si
imprimes en esta impresora virtual. En este cuadro se puede definir el nombre con
que el sistema identificará a este dispositivo virtual. Conviene dejar la opción por
defecto: PDFCreator y pulsar en Siguiente >.
7. Selecciona la Carpeta Destino. Esta aplicación se instala por defecto en la carpeta
Archivos de programa. Si deseas instalarlo en otra carpeta pulsa en el botón
Examinar aunque se recomienda aceptar la opción por defecto. Clic en el botón
Siguiente >
8. Barra de herramienta PDFCreator. Este cuadro de información muestra que tras
instalar PDFCreator se puede disponer de una barra de herramientas adicional en
Internet Explorer que te permitirá guardar documentos HTML en formato PDF.
9. Selección de componentes. Acepta las opciones por defecto haciendo clic en el
botón Siguiente>
10. Selecciona la carpeta del Menú de Inicio. Clic en el botón Siguiente >
11. Selecciona las Tareas Adicionales. Clic en el botón Siguiente>
12. Listo para instalar. Clic en el botón Instalar.
13. Finalizando el asistente de instalación de PDFCreator. Clic en el botón Terminar.
1.11.4 Crear un archivo PDF con PDFCreator en Windows
1. Descarga y descomprime el archivo alimentacion.zip en la carpeta miweb. Como

resultado dispondrás en esta carpeta de dos documento: alimentación.txt,
alimentación.odt (para OpenOffice) y una página HTML: plantas.html.
2. Sitúate en esta carpeta y haz doble clic en el archivo alimentación.txt para abrirlo
con el Bloc de Notas.
3. Antes de imprimir vamos a configurar la página para eliminar los encabezados y pie
de página. Para ello selecciona Archivo > Configurar página …
4. En el cuadro de diálogo Configurar página borra el texto de Encabezado y Pie de

página y pulsa en el botón Aceptar.
5. Ahora vamos a imprimir el documento. Elige Archivo > Imprimir.
6. En el cuadro Imprimir selecciona en la lista Nombre la impresora virtual de
PDFCreator. Clic en el botón Imprimir.
7. Antes de iniciar la impresión con PDFCreator se solicitan los metadatos del nuevo
archivo: título, fecha de creación, fecha de modificación, autor, asunto, palabras
clave, etc. Es importante completar adecuadamente estos datos. Asegúrate de que la
casilla Al terminar, abrir el documento con el programa predeterminado esta
activada para ver el aspecto final del documento.

9. Se muestra el cuadro Guardar como … En la lista desplegable Guardar en: selecciona

la carpeta destino donde se guardará el archivo PDF final. Por ejemplo: miweb\pdf.
En la casilla Nombre teclea, por ejemplo, como nombre de archivo alimentación.
PDFCreator añade automáticamente la extensión *.PDF. Clic en el botón Guardar.
10. Para terminar se abrirá el Adobe Reader mostrando el nuevo archivo PDF.
Nota:
Una vez que has instalado Adobe Reader y PDF Creator se puede crear un PDF desde
cualquier programa que permita la impresión: Microsoft Office, Internet Explorer, Mozilla
Firefox, etc. Si se utiliza con un navegador web permite realizar copias de seguridad en
formato PDF de las páginas web que se visitan. El proceso se iniciará de forma similar a como
se describe en este apartado a partir del comando Archivo > Imprimir.
1.11.5 Lectura de archivos PDF en Ubuntu
Ubuntu dispone por defecto de un programa instalado para leer y crear documentos PDF. Se
trata de Evince Visor de documentos PDF.
Para comprobar que está instalado:
1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir y quitar …

2. En la casilla Buscar introduce el término pdf. Observa que al cabo de unos instantes
se mostrará en el listado derecho de aplicaciones la entrada Visor de documentos
(Ver documentos multipágina).
3. Éste es el programa que nos permitirá leer e imprimir a PDF desde Ubuntu.
Si tratamos de abrir un archivo PDF descargado de Internet a través del navegador o bien un
fichero PDF del equipo se abrirá esta aplicación mostrando su contenido. De esta forma
podremos leerlos.
1.11.6 Crear una impresora virtual PDF en Ubuntu
Al crear una impresora virtual PDF en Ubuntu podrás crear un documento PDF a partir de
cualquier aplicación mediante Archivo > Imprimir y seleccionando este dispositivo virtual.
Los pasos para instalar esta impresora virtual son:
1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Accesorios > Terminal.

2. En la ventana de consola escribe: sudo apt-get install cups-pdf

3. Cierra esta ventana.
4. Desde el escritorio elige Sistema > Administración > Impresoras
5. Clic en el botón Impresora Nueva
6. Seleccione la conexión. Elige como dispositivo Print into PDF file y pulsa en el botón
Adelante.
7. Seleccionar impresora desde la base de datos. Selecciona la marca Generis y pulsa en
el botón Adelante.
8. Modelos y Controladores. Elige como modelo PostScript Printer y como controlador
Generis PostScript Printer (recomendado). Clic en el botón Adelante.
9. Nombre de la impresora. Introduce por teclado su identificativo, por ejemplo:
PDFPrinter.
10. Clic en el botón Aplicar y cierra el panel de administración de impresoras.
1.11.7 Utilizar una impresora virtual PDF en Ubuntu
1. Arranca el navegador web Mozilla Firefox y sitúate en una página web.

2. A continuación selecciona Archivo > Imprimir.
3. En el panel Imprimir selecciona la impresora CUPS/PDFPrinter y a continuación pulsa
en el botón Imprimir. Recuerda que el nombre que le asignamos a la impresora
virtual PDF en el apartado anterior fue PDFPrinter.
4. Desde el escritorio selecciona Lugares > Carpeta Personal. Observa que dentro de
esta carpeta personal se ha creado una subcarpeta PDF. En su interior se encuentra el
PDF generado.
1.11.8 Crear documentos PDF desde OpenOffice
Hay aplicaciones como Writer o Impress de OpenOffice que permiten exportar a un

documento en formato PDF sin necesidad de disponer de PDFCreator instalado en el equipo.
Windows
Si no dispones de OpenOffice puedes descargar e instalar la versión portable de OpenOffice:

OpenOffice2.exe. Descomprime el contenido en una carpeta de tu disco duro o pendrive para
disponer de este completo paquete ofimático.
Ubuntu
En las mayoría de distribuciones de Ubuntu viene instalado OpenOffice por defecto. Se

accede a una de sus aplicaciones desde el escritorio mediante: Aplicaciones > Oficina >
OpenOffice.org …
Ambos
Una vez que ya disponemos de OpenOffice seguimos los siguientes pasos:
1. Abre OpenOffice Writer

2. Selecciona Archivo > Abrir …
3. En el cuadro de diálogo Abrir localiza el archivo alimentación.odt situado en la

carpeta miweb. Ha resultado de descomprimir alimentación.zip en un apartado
anterior.
4. Una vez abierto este documento selecciona la opción Archivo > Exportar en formato
PDF …
5. Se muestra el cuadro Opciones de PDF donde es posible configurar ciertos
parámetros del PDF resultante. En este caso aceptamos las opciones por defecto y
pulsamos en el botón Exportar.
6. En el cuadro Exportar selecciona la carpeta miweb\pdf en la lista Guardar en. Si no

has creado la carpeta pdf puedes hacerlo desde aquí. Teclea alimentación en el
Nombre del PDF y haz clic en el botón Guardar.
7. Si utilizas el explorador de archivos podrás encontrar el archivo alimentacion.pdf

dentro de la carpeta miweb\pdf. Si haces doble clic sobre él se abrirá el lector PDF
por defecto mostrando su contenido.
1.11.9 Enlace de un documento PDF
1. Abre Kompozer
2. Selecciona Archivo > Abrir
3. Localiza el archivo plantas.htm que has situado en miweb en apartados anteriores.
Clic en el botón Abrir.
4. Navega hasta el final del documento. Pulsa y arrastra para seleccionar la penúltima
línea: Más información sobre la alimentación de las plantas
5. Clic en el botón Enlace de la barra de herramientas
6. En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo …

7. En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en para mostrar
el contenido de la carpeta miweb\pdf. Despliega la lista Tipo y selecciona Todos los
archivos. De esta forma se mostrará el archivo alimentacion.pdf que has creado en
apartados anteriores. Clic sobre este archivo y pulsa en Abrir.
8. En el cuadro Propiedades del enlace observa que en Ubicación del enlace aparece
la ruta al PDF: pdf/alimentacion.pdf.
9. En el área Destino marca la opción El enlace se abrirá y en la lista elige la opción en

una nueva ventana.
11. Resulta conveniente añadir información a continuación del enlace sobre el tamaño
del archivo PDF. Teclea: (PDF – XX,X Kb). El peso del archivo PDF resultante se
averigua utilizando el explorador de archivos: clic derecho y elige Propiedades.
12. Desde Kompozer guarda los cambios de la página plantas.html mediante Archivo >
Guardar.
13. Para comprobar el correcto funcionamiento de este enlace, pulsa en el botón
Navegar. Si dispones de Firefox como navegador por defecto de tu equipo se
mostrará con el contenido de esta página. Al pulsar sobre el enlace creado se
mostrará el documento PDF vinculado.
1.11.10 Enlace a una página de un PDF
Tal y como hemos visto con anterioridad la tarea de enlazar a un PDF desde una página web
es relativamente fácil. En este apartado se describen los detalles de cómo enlazar a un
marcador o página concreta de un PDF. Esto es especialmente interesante cuando el PDF es
muy grande.
1. Descarga y descomprime el archivo TIC_project.zip a la carpeta miweb\pdf. Se trata

de un archivo PDF. Si tienes instalado Adobe Reader puedes utilizar el explorador de
archivos para navegar hasta la carpeta indicada y abrirlo haciendo doble clic sobre él.
2. Abre Kompozer y selecciona Archivo > Nuevo. En el cuadro de diálogo Crear un
nuevo documento o plantilla marca la opción Un documento vacío y pulsa en el
botón Crear.
3. Pulsa en el botón Guardar. Introduce como título: “El proyecto TIC del centro”. En la
lista desplegable Guardar en selecciona la carpeta miweb e introduce como nombre:
proyecto.html
4. Escribe como primera línea “El proyecto TIC del centro”. Selecciona el texto y
asígnale el formato Título 1
5. En línea aparte escribe el texto: “Documento PDF completo”, selecciónalo y pulsa en
el botón Enlace de la barra de herramientas.
6. En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo …
7. En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en: para
situarte en la carpeta miweb\pdf. Despliega la lista inferior Tipo y selecciona la
opción Todos los archivos para ver todos los archivos contenidos en la carpeta
elegida. Haz clic sobre el documento TIC_project.pdf y pulsa en el botón Abrir.
8. Regresas al cuadro Propiedades del enlace. Observa que el cuadro de texto

Ubicación del enlace se muestra la ruta relativa a la página donde se ubica el PDF
referenciado.
10. Para guardar la página HTML pulsa sobre el botón Guardar.

11. Si tienes configurado Firefox como navegador web por defecto del equipo, entonces
al pulsar en el botón Navegar se abrirá una ventana de este navegador mostrando el
contenido de la página. Otra posibilidad es utilizar el explorador de archivos y
navegar hasta la carpeta miweb para hacer doble clic sobre el archivo proyecto.html.
12. Regresa a Kompozer y repite los pasos explicados del 5 al 10 para crear los siguientes
textos y enlaces (cada uno en una línea aparte). En el cuadro de diálogo Propiedades
del enlace, una vez que estas apuntando al documento PDF (paso 8) y antes de hacer
clic en Aceptar, puedes añadir los parámetros adicionales para situarse en una zona
específica del mismo.
Texto Enlace
Índice (página 2) pdf/TIC_project.pdf#page=2
El coordinador TIC (página 25) pdf/TIC_project.pdf#page=25
Lineas de Actuación (destino) pdf/TIC_project.pdf#Lineas_Actuacion
Organigrama (destino) pdf/TIC_project.pdf#Organigrama
Documento (zoom 200) pdf/TIC_project.pdf#zoom=200,10,10
Documento con marcadores visibles pdf/TIC_project.pdf#pagemode=bookmarks
Documento con miniaturas visibles pdf/TIC_project.pdf#pagemode=thumbs
Documento sin barras de scroll pdf/TIC_project.pdf#scrollbar=0
Documento sin barra de pdf/TIC_project.pdf#toolbar=0
herramientas
Organización (página 23 ajustada) pdf/TIC_project.pdf#page=23&view=Fit
Organización (página 23 tamaño pdf/TIC_project.pdf#page=23&viewrect=10,10,300,200
ventana)
13. Clic en el botón Guardar para guardar los cambios de la página.

14. Pulsa en el botón Navegar para visualizar esta página y comprobar el funcionamiento
de los enlaces definidos.
A continuación se indica la sintaxis que se puede utilizar en el enlace a un PDF. Los

parámetros entre corchetes son opcionales.
documento.pdf#page=numero
Ir a la página cuyo número se indica. Debe ser un número entero. La primera página del
documento es la 1.
documento.pdf#cadena_destino
Ir al destino cuya etiqueta se indica: cadena_destino. Los documentos PDFs pueden tener
etiquetas destino. Cada destino es una etiqueta de texto asociada a un número de página del
documento. Es importante no confundir los destinos con los marcadores de página.
documento.pdf#zoom=escala[,izquierda,arriba]
Muestra el documento con el zoom indicado en el valor escala. Una escala de 100 proporciona
un zoom del 100%. Los valores opcionales izquierda y arriba son números enteros que indican
las coordenadas en píxeles del documento donde se situará la esquina superior izquierda de la
ventana de visualización.
documento.pdf#view=modo
Define el modo en que se visualizará la página. El modo puede ser:
• Fit (Ajuste). Ejemplo: documento.pdf#view=Fit
• FitH[,top] (Ajuste horizontal).
• FitV[,left] (Ajuste vertical).
• FitB (Ajuste bajo)
• FitBH[,top] (Ajuste horizontal bajo).
• FitBV[,left] (Ajuste vertical bajo).
documento.pdf#viewrect=izquierda,arriba,anchura,altura
Indica la posición y tamaño del rectángulo de visualización de la ventana de visualización del
documento. Todos los valores son enteros y expresan unidades en píxeles.
documento.pdf#pagemode=modo
Permite mostrar los marcadores o miniaturas de página del documento pdf. Los posibles
valores de modo son: bookmarks (marcadores), thumbs (miniaturas) o none (no se muestra
ninguno).
documento.pdf#scrollbar=0
Activa o desactiva las barras de desplazamiento con que se muestra el documento. Si se
define como 0 se ocultarán estas barras.
documento.pdf#toolbar=0
Muestra u oculta la barra de herramientas del visor de Adobe Reader. Si se define como 0 no
se visualizará esta barra.
Notas:
• En la URL no se deben dejar espacios en blanco.
• No utilizar en cada comando más de 32 caracteres de longitud.
• Se pueden utilizar múltiples comandos separados por el signo “&”.
Ejemplo: documento.pdf#page=21&pagemode=bookmarks&zoom=150
Páginas web ::: Noticias RSS de un sitio web 98
1.12 Noticias RSS

de un sitio web
1.12 Noticias RSS de un sitio web
1.12.1 ¿Qué es un canal RSS?
RSS es un término que se refiere a la posibilidad de crear un canal de noticias en un sitio web
para que los usuarios se puedan suscribir a él y recibir las novedades informativas que se van
publicando en este espacio.
Realmente se trata de un archivo de extensión .XML, .RDF, .RSS, etc, con una sintaxis
especial, almacenado en nuestro sitio web, con una URL de acceso concreta, que se actualiza
de forma regular y que contiene los titulares de las noticias publicadas. Cada archivo RSS se
utiliza para crear un canal de publicación simple de carácter temático que puede ser leido
por los usuarios utilizando el propio navegador web o bien un programa específico.
El archivo *.RSS ó *.XML contiene la siguiente información:
1. Titulo del Canal: Canal Naturaleza

2. Link: Enlace a la website.
3. Imagen corporativa.
4. Descripción. Texto explicativo del propósito del canal.
5. TTL (tiempo de vida del canal hasta el siguiente refresco. Se expresa en min.).etc.
Contiene además uno o varios items de noticias individuales, cada uno de los cuales debe
disponer de una fecha, un titulo, una descripción y un enlace.
1.12.2 ¿Cómo leer un canal de noticias RSS?
1. Abre Mozilla Firefox

2. Visita la dirección de los titulares RSS del periódico El Mundo:
http://rss.elmundo.es/rss/
3. Haz clic en uno de los iconos RSS correspondiente a un canal temático
4. Se muestra la página de titulares donde el título de cada noticia es un enlace a la

página del periódico donde se amplia su información.
1.12.3 RSS y marcadores dinámicos en Firefox
Un marcador dinámico de Firefox permite suscribirse a un canal de noticias RSS de un sitio

web y recibir las nuevas noticias sin necesidad de visitarlo. Gracias a los marcadores
dinámicos el contenido viene al usuario. En lugar de tener que revisar los cambios y
modificaciones de la página web, el marcador dinámico ofrece las actualizaciones tan rápido
como están disponibles.
1. Cuando se accede desde Firefox a la página de titulares de un canal RSS, en la parte

superior de la misma página se ofrece la oportunidad de crear un marcador dinámico
a ese canal.
2. Asegúrate de que la opción Marcadores dinámicos está seleccionada en la lista
Suscribirse a este canal usando.
3. Clic en el botón Suscribirse ahora.

4. En el cuadro de diálogo Añadir marcador dinámico puedes modificar el Nombre del
canal aunque conviene dejar el que viene por defecto. En la lista desplegable Crear
en conviene que selecciones Carpeta de la barra de marcadores para que de esta
forma el marcador dinámico aparezca en la barra de marcadores de Firefox y sea
visible y accesible directamente.

6. Observa que esta acción ha creado en la barra de marcadores de Firefox un marcador
con el nombre del canal. Si pulsas sobre él se mostrarán las noticias de este canal.
Pulsa sobre la noticia deseada para acceder a su página. Si eliges la opción Abrir todo
en pestañas se mostrará cada noticia en una pestaña independiente.
Notas:
• Si la barra de marcadores no está visible entonces activa su visualización mediante Ver >
Barra de herramientas > Barra de herramientas de marcadores
• Otros sitios web con canal RSS: http://www.elpais.com/rss.html (El País) o bien
http://barrapunto.com/barrapunto.rss (Barrapunto.com).
1.12.4 Crear un servicio RSS en un sitio web
En esta apartado se plantea la actividad de utilizar un editor de noticias RSS para generar el
archivo *.RSS correspondiente, subirlo al servidor remoto y luego situar en la página web de
portada un icono con un enlace a este archivo.
Paso 1: Crear el archivo *.RSS
1. Descarga y descomprime el archivo feedcentro.zip a una carpeta de tu disco duro.

Como resultado obtendrás el archivo feedcentro.xml
2. Utiliza el explorador de archivos para localizar este archivo XML. Clic derecho sobre
él y selecciona Abrir con … > Bloc de notas (Windows) o bien Abrir con > Abrir con
editor de textos (Ubuntu)
3. El archivo feedcentro.xml es un documento de etiquetas que se puede utilizar como

base para personalizar el canal de noticias de nuestro sitio web. Para ello basta con
modificar o añadir contenidos respetando escrupulosamente la estructura de las

etiquetas.
4. A continuación se explican las distintas etiquetas o tags:
• <?xml . Este tag indica el comienzo del documento XML. Su atributo

encoding=”iso-8859-1” define el código de caracteres con se mostrará en el
navegador.
• <rss version=”2.0”> … </rss>. Entre estas etiquetas se incluye toda la
información del archivo XML. Su atributo version indica la versión del
lenguaje RSS que se utiliza.
• <channel> … </channel>. Indica el canal de noticias que abrimos. Todas la
información del canal está incluída entre estas etiquetas. Las propiedades del
canal se sitúan en las siguientes subetiquetas:
• <title>…</title>. Título del canal.
• <description>…</description>. Descripción del canal.
• <link>…</link>. Enlace al sitio web principal del espacio.
• <lastBuildDate>Sun, 27 Apr 2008 21:08:34 +0100</lastBuildDate>. Es la
fecha de la última modificación del archivo. Como puedes ver su formato
es inglés.
• <image>…</image>. Contiene la imagen del canal: url, título, enlace,
descripción, etc. Es una parámetro opcional.
• <item>…</item>. Cada noticia será un bloque que comienza y termina por
estas etiquetas. Dentro de ellas se especifican los distintos parámetros de
cada noticia:
• <title>…</title> Títular de la noticia.
• <link>…</link> Enlace donde se dirige cuando el usuario pulsa en el
titular.
• <description>…</description> Breve descripción de la noticia.
• <category>…</category>. Categoría de la noticia.
• <pubDate>…</pubDate>. Fecha de publicación en formato ampliado e
inglés.
5. Prueba a modificar el contenido de estas noticias. Se pueden añadir más noticias

debajo e inmediatamente por encima de la etiqueta </channel> copiando y pegando
más bloques <item>…</item>
6. Selecciona Archivo > Guardar para guardar los cambios.
7. Copia el archivo feedcentro.xml a la carpeta miweb\rss. Debes crear previamente la
carpeta rss dentro del directorio miweb.
Paso 2. Enlace al canal RSS
1. Descarga y descomprime la imagen contenida en boton_rss.zip a la carpeta

miweb\images
2. Abre o crea una nueva página miweb\index.html utilizando Kompozer. Será la
portada de nuestro sitio web. Si las has creado guárdala mediante Archivo >
Guardar como.
3. Sitúa el cursor al final de este documento para luego elegir Insertar > Imagen.
4. En el cuadro de diálogo Propiedades de imagen, en la pestaña Ubicación, pulsa
el botón Elegir archivo … para seleccionar la imagen images/boton_rss.gif
5. En el cuadro Texto alternativo introduce Canal RSS de Noticias.

6. Clic en la pestaña Enlace, pulsa en el botón Examinar y localiza el archivo
situado en la carpeta rss/feedcentro.xml.

8. Elige Archivo > Guardar para guardar los cambios.
9. Abre la página con el navegador Firefox para ver el resultado final.
Páginas web ::: El sitio web: estructura y navegación 104
1.13 Sitio web:

estructura y navegación
1.13 Sitio web: estructura y navegación
1.13.1 ¿Qué es un sitio web?
Un sitio web (en inglés:website) es un conjunto de páginas html relacionadas entre sí por
hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir
de una dirección URL de su página índice (index) y con una unidad de contenido y de estilo
gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web.
Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a
partir de una página principal o índice se enlazan el resto de páginas.
1.7.2 La estructura de archivos y carpetas
Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y

archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en
carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar
el sistema de ficheros.
Con carácter general se proponen un modelo basado en la organización por tipos de archivos.
Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los
elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las
subcarpetas correspondientes.
Esta organización está especialmente pensada para un sistema de páginas HTML que
comparten recursos: imágenes, hoja de estilo, javascript, etc.
Las principales carpetas que utiliza son:
• audios: archivos de audio mp3.

• css: hojas de estilo css.
• descargas: archivos zip, exe, etc que se ofrecen para descarga.
• images: imágenes jpg, gif o png.
• pdf: documentos pdf.
• scripts: archivos js con código javascript reutilizable.
• swfs: archivos con animaciones flash (*.swf).
• vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv
Cuando el número de páginas sobre un tema es elevado se suele abrir una subcarpeta dentro
de la carpeta principal. A este espacio se la suele llamar micrositio. Ejemplo: Sitio web del
Departamento de Física y Química dentro del sitio web del Instituto. El acceso por el
navegador web a los archivos HTML de esta subcarpeta sera:
http://www.misitio.es/nombre_subcarpeta/. La estructura de archivos de esta subcarpeta
puede ser similar a la propuesta para la carpeta raíz: audios, css, docs, images, js, etc o bien
tener una organización más plana (sin carpetas) e incluso independiente de los archivos de
otras carpetas.
1.7.3 Los nombres de carpetas y archivos
Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna
nombre a carpetas o archivos:
1. El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9

2. No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en
blanco, caracteres acentuados, eñes, etc.
3. Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión –
4. No debe superar los 20 caracteres.
5. Utilizar siempre letras minúsculas aunque se admitan mayúsculas. Hay servidores que
distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no
es la misma que la página index.html.
6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la
*.htm.
7. Reserva el nombre index.html para la página que deseamos se muestre por defecto
cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto.
1.7.4 La estructura de navegación
La estructura de navegación por un sitio web viene definida por la experiencia de navegación
del visitante en virtud de la cual puede saltar de una página a otra dentro del sitio web
utilizando el sistema de hipervínculos.
La estructura de navegación se suele elegir en función del tipo de contenido. Existen distintos
tipos de estructuras:
• Jerárquica. Estructura en árbol donde existe una página índice o principal desde
donde se accede al resto de páginas. Desde estas subpáginas se puede acceder a
otras y así sucesivamente creando distintos niveles o jerarquías. Es ideal para
sitios web de centros o proyectos. No se aconseja utilizar más de 4 niveles para
evitar que el usuario se desoriente durante la navegación. Conviene situar en
todas las páginas un menú que permita moverse de una forma fácil y directa por
los distintos niveles y páginas de cada nivel.
• Lineal. Es una estructura muy simple similar a las páginas de un libro. Desde una
página concreta se puede ir a la página siguiente o la página anterior. Es
especialmente útil si deseamos que el usuario siga un itinerario fijo y guiado sin
posibilidad de acceder a otras páginas que pudieran distraerle. Ejemplo: Guía o
tutorial de aprendizaje. No es recomendable si el número de páginas encadenadas
es muy elevado porque produce sensación de fatiga y no permite retomar
fácilmente la secuencia allí donde se abandonó en la última sesión.
• Lineal con jerarquía. Es una estructura híbrida que trata de aprovechar las
ventajas de las dos estructuras anteriores. Las páginas y subpáginas se organizan
de forma jerárquica pero también es posible navegar de forma lineal por las
páginas de un mismo nivel. Los contenidos web de este curso utilizan esta
estructura.
• Red. A partir de la página índice o principal se puede navegar a otra u otras sin
ningún orden aparente. Es una estructura más libre pero no es aconsejable
cuando el número de páginas es elevado porque desorienta al usuario al no saber
dónde está ni disponer de recursos para ir donde desea.
1.10.5 ¿Cómo crear un sitio web con Kompozer?
Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Esta se
suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su
contenido se suben los archivos oportunos utilizando un programa cliente de FTP.
A continuación se detalla el procedimiento para convertir la carpeta miweb en un sitio web
local utilizando Kompozer.
1. Abre Kompozer
2. Elige Ver > Mostrar/Ocultar > Administrador de sitios o bien pulsa directamente la
tecla de función <F9>
3. En el panel Administrador de sitios pulsa en el botón Editar sitios.
4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto

Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta
miweb. Clic en el botón Aceptar.
5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono

“+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas
y archivos que contiene.
6. En la parte superior derecha del Administrador se dispone de botones que permiten:
1) Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es
útil cuando se añaden elementos utilizando el explorador de archivos de
Windows o bien cuando se crea una página HTML nueva.
2) Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta
seleccionada en el árbol del Administrador de sitios.
3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta
seleccionado.
4) Eliminar. Elimina el archivo o carpeta seleccionada.
7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css,
descargas, pdf, plantillas, scripts, swf y videos.
8. A continuación vamos a crear la página index.html de nuestro sitio web. Para ello
seguiremos el procedimiento habitual: Archivo > Nuevo.
9. Escribe “Mi página principal”, selecciona el texto y elige como formato Título 1.
10. Pulsa la tecla <enter> para situarte en la siguiente línea y pulsa en el botón Viñetas
de la barra de herramientas de Formato.
11. Escribe “Federico García Lorca”, selecciona el texto y pulsa en el botón Enlace.
12. En el cuadro de diálogo Propiedades del enlace haz clic en el botón Elegir archivo …
y localiza la página lorca.html situada en la carpeta miweb. Clic en Aceptar.
13. Repite los pasos 11 y 12 para crear los enlaces al resto de páginas :
• Demografía: poblacion.html
• Escribe tu cuento: escribe.html
• Glosario: glosario.html
14. Selecciona Archivo > Guardar como

15. Introduce el título: Mi página principal para guardar la página index.html en la
carpeta miweb.
16. Para probar su funcionamiento pulsa en el botón Navegar.
Páginas web ::: ¿Cómo diseñar un menú de navegación? 111
1.14 ¿Cómo diseñar un

menú de navegación?
1.14 ¿Cómo diseñar un menú de navegación?
En este apartado vamos a describir el procedimiento de creación de un menú de navegación

para un sitio web con estructura jerárquica. Para ello utilizaremos el software gratuito
Coffee Free DHTML Menu Builder. Este programa permite crear un menú jerárquico
desplegable con colores personalizados utilizando un interfaz visual. Al final se genera un
código javascript que se puede copiar y pegar en nuestras páginas HTML para integrar este
menú.
1.14.1 Instalación y ejecución de DHTML Menu
Windows
1. Descarga y descomprime el contenido del archivo: DHTMLmenu.zip en una carpeta

de tu disco duro o de tu pendrive. Se trata de una versión portable. El programa se
inicia al hacer doble clic sobre el archivo ejecutable: DHTMLMenu.exe
Otra opción es visitar la página oficial de este producto para descargar e instalar la
versión más reciente: http://www.coffeecup.com
Ubuntu:
En Ubuntu se puede utilizar Wine como un programa emulador para ejecutar dentro de este
sistema ciertas aplicaciones propias de Windows. En este caso se propone emplearlo para
ejecutar DHTML Menu.
Para instalar Wine:
1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir y quitar.

2. En el panel Añadir y quitar aplicaciones introduce wine en la casilla Buscar. En el
catálogo aplicaciones marca la opción Wine Windows Emulator y a continuación
pulsa en el botón Aplicar cambios. Sigue los pasos sugeridos para terminar la
instalación.
Para ejecutar DHTML Menu:
3. Descarga y descomprime el contenido del archivo: DHTMLmenu.zip en una carpeta

de tu disco duro o de tu pendrive.
4. Clic derecho sobre el icono de DHTMLMenu.exe y a continuación selecciona la opción
Abrir con Wine. Se iniciará el emulador Wine y éste cargará el ejecutable indicado.
1.14.2 Crear el menú de navegación
1. Abre DHTML Menu.

2. En la pestaña Menu Designer (Diseñador del Menú) vamos a crear la estructura del
menú. En este caso vamos a crear un árbol con esta estructura:
Capítulo 1 (sin enlace)

• Texto: Página 1. Enlace: pagina0101.html

3. Pulsa en el botón Add Root Item (Añadir Elemento Raíz) e introduce como “Capítulo
1” como Text (Texto) y borra el contenido de la casilla Link.
4. Repite el paso 3 para crear otros dos elementos raíz más: Capítulo 2 y Capítulo 3.
5. Clic en la entrada Capítulo 1 del arbol de menú Your Menu (Tu Menú) para
seleccionarlo.
6. A continuación pulsa en el botón Add Sub Item (Añadir Sub Elemento). Introduce
“Página 1” en el cuadro Text (Texto) y como “pagina0101.html” en Link (Enlace).
7. Como ahora tenemos seleccionado el elemento Página 1 ahora pulsamos en el botón
Add Sibling (Añadir hermano) para crear otro elemento al mismo nivel. En este caso
el texto es “Página 2” y el enlace “pagina0102.html”.
8. Repite el paso 7 para crear otro elemento con texto “Página 3” y enlace
“pagina0103.html”.
9. Selecciona la entrada Capítulo 2 y pulsa en el botón Add Sub Item (Añadir Sub
Elemento) para crear un elemento de texto “Página 1” y enlace “pagina0201.html”.
10. Repite el paso 7 para crear …
• Texto: “Página 2”. Enlace: “pagina0202.html”
11. Repite el paso 10 y 11 para crear las entradas correspondientes del Capítulo 3:
12. El árbol resultante del menú se puede ver en el cuadro Your Menu (Tu Menú).
13. Clic en la pestaña Menu Colors (Colores del Menú).
14. En este panel puede configurar el color de fondo, de la fuente y del borde de los
botones del menú principal (Main Menu Colors) y de los submenús (Sub Menu
Colors).
15. Clic en la pestaña Options (Opciones).

16. En el panel Options se pueden configurar múltiples detalles del menú. Los más
importantes son:
• Menu Type (Tipo de Menú): Horizontal o Vertical. En este caso vamos a
seleccionar Horizontal.
• SubMenus UnFold On (Activación del despliegue de los submenús):
OnMouseOver o OnClick. Permite definir el evento de usuario que desplegará
un submenú: OnMouserOver – cuando el usuario sitúe el puntero del ratón
sobre la opción de menú – o bien OnClick – sólo cuando pulse sobre él. En este
caso dejamos la opción por defecto: OnMouserOver.
• Menu Item Font (Fuente del Elemento de Menú). Permite definir la fuente,
tamaño y efectos (negrita/cursiva) del texto que se mostrará en los botones
del menú. En este caso dejamos las opciones por defecto.
• Menu Arrows (Flechas de Menú). Selecciona la opción No Arrows (Sin
flechas).
17. Si deseas ver el aspecto que tendrá tu menú pulsa en el botón Preview (Vista previa).
18. Para guardar las opciones de configuración del menú y poder editarlas en otro
momento es conveniente pulsar en el botón Save Menu … (Guardar Menu)
19. En el cuadro de diálogo Guardar como introduce el nombre del archivo. Por ejemplo
mimenu.mnu. La extensión de archivo *.mnu es específica de Menu Builder
20. Si cierras Menu Builder y lo vuelves a abrir se puede recuperar la configuración

definida utilizando el botón Open Menu … (Abrir Menu).
1.14.3 Exportar el código javascript del menú
1. Abre DHTML Menu y luego abre el menú que has guardado: mimenu.mnu.
2. Clic en el botón Get Code (Conseguir Código).
3. Se muestra el cuadro de diálogo DHTML Menu HTML Code con el código javascript
que generará el menú en nuestras páginas HTML.
4. Pulsa en el botón Copy to Clipboard (Copiar al Portapapeles) para copiar este código
al portapapeles.
5. Clic en el botón Close para cerrar esta ventana.
6. En Windows abre el Bloc de Notas mediante Inicio > Todos los programas >
Accesorios > Bloc de Notas. En Ubuntu abre el editor de textos mediante
Aplicaciones > Accesorios > Editor de textos.
7. Elige Edición > Pegar.
8. Elimina la primera línea del código: <script type='text/javascript'>
9. Borra las 3 últimas líneas:
</script>
<noscript>Your browser does not support script</noscript>

10. Vamos a guardar este código en un archivo de javascript independiente de extensión
*.js. Selecciona Archivo > Guardar
11. En el cuadro de diálogo Guardar como elige como carpeta destino miweb\scripts e
introduce como nombre menu.js
13. Cierra DHTML Menu.
1.14.4 Integrar el menú en las páginas HTML
1. Extrae a la carpeta miweb el contenido del archivo libro.zip que se adjunta. Como
resultado de esa extracción encontrarás varias páginas HTML: pagina0101.html,
pagina0102.html, pagina0201.html, …
2. Abre Kompozer y selecciona Archivo > Abrir Archivo.
3. Selecciona la página pagina0101.html y pulsa en Abrir.
4. Sitúa el cursor en la primera línea del documento. Es aquí donde se situará el menú.
5. Elige Insertar > HTML …

6. En el cuadro de diálogo Insertar HTML haz clic en el cuadro y escribe el código de
inclusión del menú:
<script type="text/javascript" src="scripts/menu.js"></script>
Otra posibilidad es copiar y pegar este código desde aquí.

7. Haz clic en el botón Insertar.
8. Para comprobar si este código se ha añadido correctamente haz clic en la pestaña
Código fuente que aparece en la barra de modos de vista inferior.
9. En las primeras líneas de código HTML se puede comprobar que se ha incluido el

código.
10. Guarda el documento HTML pulsando en el botón Guardar o seleccionando Archivo >
Guardar.
11. Para ver su apariencias definitiva pulsa en el botón Navegar.
12. Repite los pasos anteriores para añadir el javascript del menú de navegación a todas y
cada una de las páginas: pagina0102.html, pagina0201.html, pagina0202.html, etc.
Páginas web ::: Publicación web por FTP 119
1.15 Publicación
web por FTP
1.15 Publicación web por FTP
1.15.1 ¿Qué es publicar un sitio web?
La práctica habitual es diseñar las páginas web de nuestro sitio web en el disco duro del
equipo para luego enviarlos al servidor web junto con los archivos multimedia referenciados
(imágenes, animaciones, audios, etc). A este proceso se le llama publicación web. Mediante
este procedimiento se pone a disposición de cualquier usuario con acceso a Internet las
páginas web del centro o proyecto al pasar a estar alojadas físicamente en un ordenador
servidor con acceso permanente desde Internet.
La subida de archivos desde el equipo local al servidor se puede realizar mediante un

programa que utiliza el protocolo FTP (File Transfer Protocol = Protocolo de Transmisión de
Archivos). Esta transferencia de archivos se realiza en modo autentificado, es decir,
introduciendo un nombre de usuario y contraseña para evitar que otras personas puedan
publicar en nuestro espacio web.
En consecuencia antes de afrontar la tarea de publicación será necesario obtener los

siguiente datos del administrador del servidor web:
• Dirección del servidor FTP: Es la URL del servidor que atiende peticiones de
conexión por FTP para la subida de archivos. Si el servidor web es del CNICE puede
ser uno de estos: roble.pntic.mec.es, ficus.pntic.mec.es, centros5.pntic.mec.es, etc.
Si es Yahoo será: ftp.es.geocities.com
• Usuario y Contraseña: Son los datos de la cuenta que es necesario introducir para
realizar una subida autentificada de recursos y que estos recursos se alojen en la
ubicación correcta del servidor.
• Dirección del servidor HTTP: Es la URL del servidor web que nos permitirá acceder a
nuestras páginas usando el navegador web. Ejemplo:
http://roble.pntic.mec.es/usuario/
A continuación se explican los detalles de cómo utilizar un programa como Filezilla , tanto en
Windows como en Linux, para subir contenidos por FTP a un servidor.
1.15.2 Instalación de Filezilla en Windows
Descarga el instalador FileZilla_3.0.7_win32-setup.exe a una carpeta de tu disco duro.

Doble clic sobre este archivo para iniciar la instalación.
En el sitio web oficial del proyecto Filezilla podrás encontrar la versión más reciente o que se
adapta a tu sistema: http://filezilla-project.org/
Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente

archivo a una carpeta de tu disco duro o pendrive: FileZilla_Portable_3.0.7.1.paf.exe
1.15.3 Instalación de Filezilla en Ubuntu
1. Desde el escritorio elige Aplicaciones > Añadir o quitar …

2. En la lista desplegable Mostrar elige Todas las aplicaciones disponibles.
3. Introduce el término Filezilla en el cuadro de texto Buscar: y a continuación pulsa la
tecla enter. En el cuadro de Aplicaciones disponibles marca la casilla de verificación
que acompaña a la entrada de Filezilla. Pulsa en el botón Aplicar cambios para
iniciar la instalación. Confirma la instalación pulsando de nuevo en el botón Aplicar.
4. Si estás conectado a Internet se descargarán los archivos necesarios para su
instalación. Una vez concluída se mostrará el mensaje de éxito. Clic en el botón
Cerrar.
5. Se puede situar un acceso directo al programa en el escritorio. Para ello despliega en
el menú de programas: Aplicaciones > Internet > Filezilla. Arrastra el icono de
Filezilla hasta un hueco libre del escritorio. Esto creará un acceso directo al
programa desde el escritorio.
6. Si desde Ubuntu necesitas instalar el pack del idioma castellano visita la web de
Filezilla: http://filezilla-project.org y en ella la sección Translations.
7. Descarga al escritorio el archivo binario: es_ES.mo.
8. Renombra este archivo como filezilla.mo
9. Localiza la carpeta /usr/share/filezilla/resources. En esta carpeta crea la carpeta
locale y dentro de ella la carpeta es_ES. Navega para situarte en ella y dentro de ella
sitúa el archivo filezilla.mo.
10. Reinicia Filezilla y sigue los pasos del siguiente apartado para cambiar el idioma del
interfaz.
1.15.4 Configurar el interfaz al idioma castellano
1. Abre Filezilla haciendo doble clic sobre el icono del escritorio.
2. Si el interfaz está en inglés para configurar el idioma castellano en la barra de menús

de Filezilla selecciona Edit > Settings (Edición > Configuración …)
3. En el cuadro de diálogo Filezilla Options (Opciones de Filezilla), en la lista de

opciones que aparece en el panel izquierdo, pulsar sobre el elemento Language
(Idioma) y después haz clic sobre el idioma Español o bien Default system language
(Idioma por defecto del sistema) en el panel derecho. Para guardar esta selección
pulsa en el botón OK de este cuadro.
1.15.5 Configurar conexión FTP
En primer lugar debes asegurarte de que dispones de los datos de configuración de tu

conexión FTP: dirección del servidor, nombre de usuario y contraseña.
A continuación se creará una nueva entrada en el Gestor de Sitios para poder establecer
conexión con el servidor FTP.
1. Abre el programa Filezilla.

2. Selecciona Archivo > Gestor de sitios.
3. Se muestra el cuadro de diálogo Gestor de sitios.
4. Realiza los siguientes pasos para crear la conexión a un nuevo sitio:
1) Nuevo Sitio. Clic en este botón para crear una conexión a un nuevo sitio.
2) Nombre del Sitio. En la entrada que se muestra debajo de la carpeta Mis sitios
escribe su nombre. Éste te permitirá diferenciarlo cuando tengas conexiones a
distintos sitios. Este nombre puede ser cualquiera. Por ejemplo: Mi Sitio CNICE.
3) Servidor. Es el nombre o dirección IP del servidor FTP al que deseas conectarte.
En este caso: roble.pntic.mec.es
4) Puerto. Asegúrate de que el puerto definido es el típico del protocolo FTP: 21.
5) Tipo de servidor. Elige la opción FTP – File Transfer Protocol.
6) Modo de acceso. Es el tipo de autentificación: Anónimo, Normal, Preguntar la
contraseña, Interactivo o Cuenta. En este caso selecciona la opción Normal si
deseas incluir la contraseña en la conexión o bien Preguntar la contraseña para
que se solicite la misma en cada intento de conexión.
7) Usuario. Es el identificador del usuario ante el servidor remoto.
8) Contraseña. Autentifica el usuario ante el servidor.
9) Conectar. Clic en este botón para iniciar la conexión.
La configuración de la conexión a un nuevo sitio sólo es necesario realizarla la primera vez o

bien cuando sea necesario modificar algún dato. En posteriores accesos al programa sólo será
necesario seleccionar la conexión creada y pulsar en el botón Conectar.
En ocasiones es necesario configurar algunas opciones avanzadas de la conexión.
1. Desde Filezilla abre el Gestor de sitios mediante Archivo > Gestor de Sitios.
2. Clic en la conexión correspondiente que aparece bajo la carpeta Mis sitios para
seleccionarla y poder editarla.
3. Clic en la pestaña Avanzado.
4. En esta pestaña se pueden configurar, entre otros, los siguientes parámetros:

• Directorio remoto por defecto. En esta casilla puedes introducir una carpeta
del directorio remoto para situarte en ella al iniciar sesión. Por ejemplo en el
servidor del CNICE es interesante definir la carpeta /public_html/ porque
todos las carpetas y archivos navegables de una cuenta se guardan dentro de
esta carpeta principal.
• Directorio local por defecto. En esta casilla conviene que definas la ruta de
la carpeta donde se guardan habitualmente los archivos a publicar en ese
sitio.
5. Pulsa en el botón OK para terminar.
1.15.6 Conectar con el sitio remoto
1. Abre Filezilla.
2. Seleccionar Archivo > Gestor de sitios o bien pulsa en el botón Gestor de sitios de la
barra de herramientas.
3. Se mostrará el cuadro de diálogo Gestor de sitios donde se hace clic sobre la

conexión para seleccionarla y se pulsa en el botón Conectar.
4. Otra posibilidad quizás más rápida sea pulsar en la cabeza de flecha negra hacia
abajo que aparece en el botón Gestor de Sitios de la barra de herramientas para
desplegar el árbol de conexiones y hacer clic sobre la conexión deseada.
5. Filezilla intentará establecer una conexión FTP de acuerdo a la configuración

establecida. Si los datos introducidos son correctos y no existe ningún problema, se
establecerá conexión al cabo de unos instantes y se podría trabajar en la sesión FTP.
6. En la ventana de Filezilla se pueden distinguir 6 áreas o paneles:
1) Barra de herramientas. Proporciona acceso a las operaciones más habituales de

gestión FTP. Si pulsas en el botón situado más a la izquierda de esta barra se
mostrará el Gestor de Sitios.
2) Conexión rápida. Puedes introducir los datos de conexión rápida a un sitio FTP:
Dirección, Usuario, Contraseña y Puerto. A continuación se pulsa el botón
Conexión Rápida. Esta información no será añadida al Gestor de Sitios.
3) Registro de mensajes. Muestra los ecos de las operaciones de comunicación entre
cliente y servidor FTP. Nos permite tener un seguimiento completo de la situación
de la sesión. Indica en un color diferente las respuestas del servidor, el estado de
la conexión, los errores, etc.
4) Sitio Local. Se sitúa en la parte izquierda y muestra el contenido de carpetas y
archivos de tu equipo local. Consta de dos ventanas. En la superior se puede
navegar entre las unidades de disco y carpetas. En la ventana inferior se muestran
las carpetas y archivos situados en el interior de la carpeta seleccionada arriba.
5) Sitio Remoto. Se sitúa en la parte derecha y muestra el contenido de carpetas y
archivos del servidor. La carpeta que se muestra inicialmente al establecer la
conexión será la que se ha definido en la casilla Directorio remoto por defecto
de las opciones avanzadas de configuración del Sitio.
6) Cola de transferencia. Proporciona información de la lista de archivos que se

están transfiriendo desde el equipo cliente al servidor o viceversa: nombre del
archivo local; dirección de transferencia: (<-) descargas ó (->) subidas; nombre
del archivo remoto; host del sitio remoto; estado: "Transferring ..."; etc.
1.15.7 Gestión FTP de archivos
Una vez que hemos abierto Filezilla y nos hemos conectado con éxito al servidor remoto, se
podrán realizar las operaciones más habituales relacionadas con la publicación por FTP de los
contenidos de una web.
a) Navegar por el Sitio Local o Remoto
1. Para navegar y localizar un archivo o carpeta en el cuadro Sitio Local (panel

izquierdo) es necesario abrir y cerrar carpetas.
2. Para abrir una carpeta: clic sobre la carpeta en el marco superior y en el marco
inferior se mostrará su contenido.
3. Para navegar a la carpeta superior haz doble clic sobre el icono de carpeta que
muestra dos puntos “..”. Filezilla te sitúa en la carpeta superior que contiene a la
anterior.
b) Subir un archivo o carpeta
1. Para seleccionar un archivo haz clic sobre el archivo o carpeta del Sitio local. Para
seleccionar varios archivos simultáneamente , haz clic sobre el primero y luego clic
sobre el último manteniendo pulsada la tecla Mayus.
2. En el panel Sitio Remoto sitúate en la carpeta destino donde deseas enviar el
archivo.
3. Clic derecho sobre la selección del Sitio local y elige la opción Subir para iniciar la
transferencia. Otra posibilidad es pulsar, arrastrar y soltar la selección desde el panel
Sitio Local al panel Sitio Remoto.
4. En el panel Cola de Transferencia iremos leyendo la evolución del proceso de

transferencia. Si todo funciona correctamente, al cabo de un tiempo, observaremos
que esos elementos aparecen en la carpeta abierta dentro del panel del Sitio
Remoto.
c) Descargar
1. Clic derecho sobre una carpeta o archivo del panel Sitio remoto (derecho) y
selecciona la opción Descargar en el menú desplegable.
2. Se puede descargar un archivo desde el servidor remoto, pulsando y arrastrando
desde el panel Sitio remoto al panel Sitio Local.
d) Otras opciones
1. Mediante clic derecho en cualquiera de los paneles Sitio remoto y Sitio local se
pueden realizar distintas operaciones de gestión de carpetas y archivos: crear carpeta
(Crear directorio), Borrar, Renombrar, Abrir, etc.
Nota:
El servicio de páginas web del CNICE presenta, entre otras, dos características a tener en
cuenta al subir contenidos por FTP:
• Carpeta public_html. Al principio es necesario que el usuario cree en el servidor la

carpeta public_html para situar dentro de ella todos los archivos de su sitio web.
• Cuota de espacio. El servidor ofrece un espacio de tamaño limitado. Cuando se
alcance este límite será necesario ponerse en contacto con el administrador del
servicio para una posible ampliación.
1.15.8 Descargas anónimas por FTP
En Internet existen múltiples sitios desde donde es posible descargar archivos utilizando el
protocolo FTP. La descarga de archivos por FTP es más eficaz que la descarga HTTP: se puede
detener y reanudar y también optimiza mucho mejor el ancha de banda disponible. Para las
descargas anónimas por FTP podemos utilizar el cliente Filezilla.
1. Abre Filezilla
2. En la barra de conexión introduce la dirección del servidor FTP. Por ejemplo:
ftp.rediris.es (Servidor FTP anónimo de la comunidad RedIris).
3. Como es un servidor de descargas anónimo no es necesario introducir ni nombre de
usuario ni contraseña. Clic en el botón Conexión rápida. Los campos Nombre de
usuario y Contraseña se autocompletarán y se establecerá la conexión.
4. Desde este espacio es posible descargar, por ejemplo, distribuciones de Linux

(/pub/linux/distributions/) o bien las últimas versiones de productos de software
libre (/pub/mozilla.org/)
Páginas web ::: Edición web en línea con Kompozer 129
1.16 Edición web

en línea con Kompozer
1.16 Edición web en línea con Kompozer

Kompozer es un programa que permite la edición en línea de un sitio web. Es decir que
puedes actualizar directamente el contenido del sitio web en el servidor remoto sin necesidad
de hacerlo en la copia local y luego subirlo por un programa cliente FTP.
1.16.1 Configuración del sitio para edición en línea
Antes de comenzar es necesario disponer de las credenciales de conexión FTP al servidor

remoto y que tu equipo está conectado a Internet.
1. Abre Kompozer
2. Selecciona Ver > Mostrar/ocultar > Administrador de sitios o bien pulsa <F9>.
3. En el panel Administrador de sitios pulsa en el botón Editar sitios.
4. En el panel Configuración de publicación define los siguientes parámetros:

• Nombre de sitio. Escribe el identificador que te permitirá distinguir esta
conexión de otras dentro de Kompozer. Por ejemplo: Mi Sitio CNICE
• Dirección http de su página inicial. Es la página de inicio de tu sitio web y
dependerá del servidor donde se publique. En el ejemplo que nos ocupa:
http://roble.pntic.mec.es/usuario/
• Servidor de publicación: Dirección de la publicación. Es la dirección FTP del
servidor. Debes introducirla anteponiendo el prefijo: ftp://. Ejemplo:
ftp://roble.pntic.mec.es/ . Si es necesario indicar carpeta destino se puede
añadir al final de esta dirección: ftp://roble.pntic.mec.es/public_html
• Nombre de usuario y Contraseña de la conexión FTP.
5. Clic en el botón Aceptar para terminar.

6. Tras esta operación en el Administrador de sitios aparecerá una entrada con el

nombre definido para el sitio. Para ver el contenido del sitio haz doble clic sobre esta
entrada. Al cabo de unos instantes se mostrará el contenido del sitio remoto.
1.16.2 Modificar el contenido de una página publicada
1. Selecciona el archivo HTML que deseas editar en el Administrador de sitios y haz

doble clic sobre él. Al cabo de unos instantes se mostrará su contenido en el panel
derecho.
2. Realizas los cambios oportunos en el contenido de esta páginas HTML
3. Para publicar los cambios pulsa en el botón Publicar que aparece en la barra de
Redacción de Kompozer.
4. Se muestra la ventana de progreso Publicando: Título de página. Una vez

completado el proceso de publicación con éxito se muestra como Estado de
publicación el mensaje Publicación completada. Clic en el botón Cerrar
Nota: Si no tienes marcada la opción Mantener esta ventana abierta … esta ventana
se cerrará automáticamente al cabo de unos segundos.
1.16.3 Operaciones básicas con archivos en servidor remoto
Desde Kompozer es posible realizar algunas operaciones básicas de manejo de archivos en el

servidor remoto. Para ello basta seleccionar la carpeta o archivo adecuado y pulsar en uno de
los botones de la barra de herramientas del Administrador de sitios: Nueva carpeta,
Renombrar o bien Eliminar.
1.16.4 Nueva página en servidor remoto
Para crear una nueva página en el servidor remoto:
1. Selecciona Archivo > Nuevo

Un documento vacío y pulsa en el botón Crear.
3. Teclea el texto, por ejemplo: “Mi primera página remota”

4. Pulsa en el botón Publicar o bien selecciona Archivo > Publicar
5. En el cuadro de diálogo Publicar página introduce los siguientes datos:

• Título de la página. Ejemplo: Mi primera página remota
• Nombre de archivo. Ejemplo: mipaginaremota.html
• Subdirectorio del sitio para esta página. En este cuadro de texto puedes
introducir el nombre de la carpeta en el servidor donde se guardará la página. Si
no introduces nada se guardará en la carpeta raíz de conexión.
• Incluir imágenes y otros archivos. Activa esta opción si vas a insertar imágenes
en la página. Elige Usar la misma dirección como página si las imágenes se van a
guardar en la misma carpeta que la página. Se recomienda elegir Usar este
subdirectorio del sitio: e introducir la carpeta images como carpeta destino de
las imágenes que se publican.
6. Clic en el botón Publicar. Es conveniente publicar la página antes de insertar en ella

imágenes o enlaces relativos a otros documentos.
7. Mientras se sube la nueva página se mostrará el cuadro Publicando … donde se

mostrará el progreso del proceso. Cuando haya finalizado con éxito se mostrará el
mensaje Publicación completada. Al cabo de unos segundos se cerrará este cuadro o
bien se puede cerrar pulsando en el botón Cerrar.
Notas:
• Tras su publicación, el botón Publicar no estará disponible hasta que no se realice

alguna modificación sobre esa página.
• Para publicar esa página en otra carpeta selecciona Archivo > Publicar como
• Si después de publicar con éxito no ves la nueva página en el panel del Administrador
de sitios entonces pulsa en el botón Recargar.
1.16.5 Insertar una imagen del servidor en una página
1. Haz doble clic sobre la página miprimerapagina.html para abrirla.

2. Para insertar una imagen que ya está subida al servidor, abre la carpeta images en el
Administrador de sitios, y a continuación arrastra el archivo que contiene la imagen
para soltarla en la página. Clic en el botón Publicar.
1.16.6 Insertar una imagen del equipo en una página remota
1. Para insertar una imagen del equipo local, selecciona Insertar > Imagen. A veces el
programa muestra un pequeño “bug” en función del cual a veces la opción de insertar
imagen está deshabilitada. Para resolverlo basta con pinchar en la pestaña código
fuente de la página para luego regresar al modo vista normal.
2. En el cuadro de diálogo Propiedades de la imagen pulsa en el botón Elegir archivo …
para navegar y localizar el archivo de imagen en tu equipo. Introduce el Texto
alternativo y pulsa en el botón Aceptar.
3. Pulsa en el botón Publicar o bien Archivo > Publicar.
4. Se muestra el cuadro de diálogo Publicando … donde podrás observar que la imagen
se ha subido al servidor alojándose en la carpeta que se indicó: images. Clic en el
botón Cerrar.
5. Si pulsas en el botón Recargar del Administrador de sitios podrás observar que la

imagen subida aparece en el árbol de carpetas dentro del directorio images
Páginas web ::: Usabilidad de páginas web 136
1.17 Usabilidad de
páginas web
1.17 Usabilidad de páginas web
1.17.1 Aclaración terminológica
El término "Usabilidad", importado del mundo anglosajón, puede traducirse como "facilidad
de uso". Es un concepto más general. Sin embargo "Accesibilidad" es un término más
específico y se refiere al requisito que debe reunir un documento web para que las personas
con discapacidades puedan alcanzar la información que contiene. Por otro lado la
"Navegabilidad" alude a la definición de una estructura que permita al usuario moverse con
facilidad por un sitio web.
Tener en cuenta estos conceptos cuando se aborda el diseño de un sitio web es una
declaración de intenciones que excede cuestiones de estilo y trata de ponerse en el punto de
vista de los potenciales visitantes con intención de facilitarles el acceso a la información.
A continuación se citan brevemente algunas pautas o consejos que pretenden incrementar la

usabilidad de las páginas web diseñadas.
1.17.2 Navegabilidad
1. Duplica los elementos de navegación si es necesario. Si la página va a tener un

tamaño superior a dos/tres ventanas, conviene situar los elementos de navegación en
el encabezado y pie de la misma
2. Añade enlaces al principio de la página. Si la página es larga, es necesario situar al
final de ella e incluso por el medio hipervínculos que apunten al inicio de la misma.
3. Evita diseñar páginas que sean callejones sin salida. Sitúa en todas las páginas al
menos un enlace que permita continuar la navegación: volver, índice, etc.
4. Define una estructura sencilla de navegación. Es recomendable utilizar una
estructura jerárquica sencilla a partir de una página índice evitando abusar de los
enlaces que saltan de una rama a otra.
5. Proporciona siempre índices. Sitúa siempre que sea posible un índice con el
contenido del sitio. Situálo al principio, lateral o final de cada una de las páginas para
que sea siempre accesible.
6. Añade una paleta de navegación textual. Si utilizas una paleta de navegación a base
de gráficos, incorpora otra paleta adicional a base de enlaces de texto. De esta
forma el usuario no tendrá que esperar a que se carguen las imágenes para saltar a
otra página.
1.17.3 Diseño de Páginas
1. Tamaño de las páginas. Las personas no suelen hacer scroll. Por este motivo las
páginas no deben ser más largas del doble de la pantalla. Fracciona el texto en varias
páginas cuando el tamaño del mismo sea excesivo para una página. El avance a la
siguiente página aportará cierto descanso en la vista que el usuario agradecerá. No
obstante si la página contiene un texto que debe ser leído completo conviene utilizar
marcadores y enlaces para facilitar la navegación por el mismo.
2. Identificación de las páginas. Es interesante situar información del centro o proyecto
en el pie o encabezado de todas las páginas. Incluso con posibilidad de acceder a un
email de contacto o a la página índice. Hay visitantes que pueden acceder a través de
buscadores a una página concreta del sitio web
3. Enlaces.
• Escribe el texto como si no tuviera enlaces. Evita enlaces con el texto:
"Pincha aquí" porque alteran la normal lectura del texto.
• Elige palabras significativas para el texto del enlace. Elige adecuadamente

el texto del enlace para anticipar lo que se encontrará el usuario antes de
que pulse.
• Evita textos demasiado largos como enlace. Para no dificultar la lectura.
• Revisa el funcionamiento de los enlaces. De esta forma el usuario tendrá
seguridad de encontrar lo que se anuncia tras el enlace.
• Cuida el resaltado que produce un enlace. Si deseamos resaltar una palabra
en una frase debemos tratar de situar el enlace en ella.
• No modifiques el color del texto de los enlaces. Esto desconcierta al
usuario.
4. Independencia.
• Escribe las páginas para distintos navegadores. Aunque el Internet Explorer
es el más usado cada vez hay más clientes con Firefox.
• No diseñes para la última versión del navegador. No todos los usuarios
tienen instalada la última versión.
• Define el tamaño de las tablas y celdas en %. De esta forma se adaptarán a
la resolución de pantalla del usuario.
• Diseña para una resolución óptima. Actualmente la resolución más utilizada
es 1024x768. Indica en la página principal que es la resolución óptima pero no
descuides la apariencia del documento en resoluciones inferiores ni superiores
porque es el futuro inmediato.
1.17.4 Tipografía
1. Negrita. No abuses del uso de la negrita destacando gran cantidad de texto ni del uso
de mayúsculas porque son más difíciles de leer.
2. Capitalización. Un título es más atractivo con todas las iniciales en Mayúsculas y el
resto en minúsculas que todas en Mayúsculas.
3. Tipos de fuente. Utiliza fuentes habituales porque el usuario debe tenerla instalada
en su equipo para poder ver el texto con ella a través del navegador web. Si utilizas
una fuente enlazada para edades tempranas (Edelfont, Memima, etc) recuerda que el
texto no se mostrará con ella si el usuario no tiene instalada esta fuente en ella.
4. Tamaño de la fuente. Utiliza los estilos de párrafo para modificar el tamaño de los
textos.
5. Variedad de fuentes. No conviene abusar del número de tipos de fuente distintas a
utilizar en un documento. Basta con una o dos (texto y titulares)
1.17.5 Gráficos
1. Tamaño de una imagen enlazada. Si se inserta un enlace a una imagen de cierto

peso conviene situar una vista en miniatura de escaso peso indicando el tamaño del
archivo que la contiene.
2. Imágenes de fondo. Utiliza imágenes de fondo de colores adecuados que no oculten
el texto de la página. Tendrán una tonalidad parecida al color de fondo y de baja
calidad para que se descarguen rápidamente.
3. Imágenes decorativas. No abuses del uso de imágenes no significativas. Dosifica el
número de imágenes de una página para evitar las esperas durante su descarga.
4. Dimensiones de una imagen. Indica la altura y anchura de la imagen al insertarla en
una página. De esta forma al descargarse la página ya se reserva el espacio para
mostrarse una vez se complete la imagen.
5. Descarga progresiva. Configura tus imágenes de cierto peso para que realicen la
visualización progresiva conforme se vayan descargando.
6. Ahorro de imágenes. Trata de usar el mismo archivo de imagen tantas veces como
sea posible para acelerar la visualización.
7. Formato de imágenes. Usa GIF y PNG siempre que sea posible. Para las fotografías es
mejor el formato JPEG.
1.17.6 Accesibilidad
En este apartado se describen brevemente algunas de las condiciones que deberían ser
objetivos de diseño cuando se aborda la creación de un sitio web educativo. Se pretende que
el material resultante sea accesible al mayor colectivo de usuarios incluyendo los alumnos/as
con necesidades educativas especiales.
1. Texto alternativo. Proporciona contenidos textuales alternativos a los contenidos

multimedia, por ejemplo, en las imágenes. Agilizará la navegación con conexiones
lentas.
2. Uso del color. El color no es indispensable. Los textos y los gráficos deben ser
comprensibles con independencia del color.
3. Hojas de estilo. Usa las marcas y hojas de estilo adecuadamente. Facilitarán la
personalización de temas para adaptarse al usuario.
4. Tablas. Utiliza las marcas adecuadas para crear las tablas en los documentos. De esta
forma se visualizarán correctamente en todos los navegadores.
5. Claridad del lenguaje. Utiliza el lenguaje de una forma clara y concisa.
6. Objetos insertados. Las páginas que contienen componentes avanzados deben ser
accesibles sin ellas: scripts, applets, etc.
7. Control de reproducción. Proporciona control al usuario para detener movimientos,
parpadeos o actualizaciones automáticas de una página.
8. Acceso directo. Utiliza interfaces que permitan una accesibilidad directa a los
contenidos..
9. Compatibilidad. Diseña la web para que sea navegable desde cualquier plataforma,
sistema operativo o equipo.
10. Ayuda a la navegación. Proporciona en todo momento información de ayuda
contextual al usuario para orientarlo: dónde está y dónde puede ir.
11. Sistema de búsqueda. Ofrece índices o mecanismos de búsqueda para que el usuario
pueda encontrar rápidamente lo que busca.
12. Contenidos asequibles. El contenido de los documentos debe ser claro, simple y fácil
de entender.
1.17.7 Para saber más
La legislación española vigente establece que todos los sitios web institucionales y financiados
con presupuesto público deben cumplir unos requisitos mínimos de accesibilidad.
Los estándares de accesibilidad que deben cumplir los contenidos web educativos en España
están sometidos a las directrices recogidas en los siguientes documentos:
• Norma UNE 139802: http://www.sidar.org/recur/direc/norm/index.php

• LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio
electrónico (LSSICE): http://www.sidar.org/recur/direc/legis/espa.php
• Directrices de Accesibilidad del W3C: http://www.sidar.org/recur/desdi/wai/index.php
• Web Accessibility Initiative (WAI) del W3C: http://www.w3.org/WAI/
Páginas web ::: Derechos de autor 140
1.18 Derechos de autor

1.18 Derechos de autor
En la elaboración de materiales educativos podemos partir de activos (textos, imágenes,

audios y vídeos) propios o bien utilizar aquellos procedentes de otras personas o entidades.
Por otra parte cuando se publica un material en internet puede resultar interesante
establecer las condiciones de uso.
1.18.2 Los derechos de autor
Los materiales multimedia educativos tanto en formato cdrom como en internet están sujetos
a la misma legislación sobre derechos de autor que el resto de obras: libros, pinturas, música,
etc. Esto significa que si decidimos incorporar recursos ajenos (léase imágenes, audios,
vídeos, etc) a nuestro espacio web debemos conocer y respetar las condiciones de uso que
han definido los autores de estos materiales. Y esto es especialmente significativo cuando el
material que hemos elaborado supera el contexto del aula y se pretende publicar en internet.
Es entonces cuando existe posibilidad de ser utilizado por otras personas incluso en clara
competencia con el material original.
En ocasiones cuando accedemos a un espacio web, su autor explicita la posibilidad de

reutilización a cambio de citar la procedencia (derecho de cita) o bien de que no se
fragmente su obra (derecho de obra no derivada).
Sin embargo cuando esto no se indica o bien se muestra una licencia de copyright (derechos
reservados) conviene ser cauteloso. La apropiación indiscriminada de materiales ajenos para
elaborar un material propio no se puede justificar desde la ausencia de ánimo de lucro que
caracteriza las iniciativas en educación. Esta justificación no es suficiente y se hace necesario
en estos casos contactar con el autor o autores para obtener su permiso y en caso favorable
citar siempre la fuente de procedencia.
1.18.3 Licencias Creative Commons
Creative Commons (http://es.creativecommons.org/) es una organización que ofrece a

cualquier usuario la posibilidad de elegir las condiciones en que desea compartir un trabajo
publicado en Internet. Para ello debe elegir entre 4 condiciones:
Reconocimiento (Attribution): El material creado puede ser distribuido, copiado y

exhibido por terceras personas si se reconoce la autoría en los créditos.
No Comercial (Non commercial): El material original y los trabajos derivados pueden

ser distribuidos, copiados y exhibidos mientras su uso no sea comercial.
Sin Obra Derivada (No Derivate Works): El material puede ser distribuido, copiado y
exhibido pero no se puede utilizar para crear un trabajo derivado del original.
Compartir Igual (Share alike): El material puede ser modificado y distribuido pero
bajo la misma licencia que el material original.
De la combinación de estas condiciones se logran componer los 6 tipos de licencias que se

pueden elegir:
Reconocimiento: El material puede ser distribuido, copiado y exhibido

por terceros si se muestra en los créditos.
Reconocimiento - Sin obra derivada: El material puede ser distribuido,

copiado y exhibido por terceros si se muestra en los créditos. No se
pueden realizar obras derivadas.
Reconocimiento - No comercial - Sin obra derivada : El material puede

ser distribuido, copiado y exhibido por terceros si se muestra en los
créditos. No se puede obtener ningún beneficio comercial. No se pueden
realizar obras derivadas.
Reconocimiento - No comercial: El material puede ser distribuido,

copiado y exhibido por terceros si se muestra en los créditos. No se puede
obtener ningún beneficio comercial.
Reconocimiento - No comercial - Compartir igual: El material puede ser

distribuido, copiado y exhibido por terceros si se muestra en los créditos.
No se puede obtener ningún beneficio comercial y las obras derivadas
tienen que estar bajo los mismos términos de licencia que el trabajo
original.
Reconocimiento - Compartir igual: El material puede ser distribuido,
copiado y exhibido por terceros si se muestra en los créditos. Las obras
derivadas tienen que estar bajo los mismos términos de licencia que el
trabajo original.
1.18.4 Añadir una licencia CC a una página HTML
Si estás interesado/a en situar una licencia CC (Creative Commons) en la portada o página

principal de tu sitio web, puedes seguir los siguientes pasos:
1. Visita la web de Creative Commons: http://es.creativecommons.org/licencia/

2. Pulsa en el enlace Escoger una licencia
3. En la pregunta ¿Quiere permitir usos comerciales de su obra? marca la opción
deseada. Por ejemplo: No.
4. En la pregunta ¿Quiere permitir modificaciones de su obra? señala una respuesta.
Por ejemplo: Yes, as long as others share alike (Sí pero compartir igual)
5. De la combinación de ambas respuestas surgirá la liccencia antes descrita como:

Reconocimiento-No comercial-Compartir Igual. Clic en el botón Escoja una licencia.
6. Selecciona el modelo de icono que deseas incluir en tu página HTML:
7. Clic derecho sobre el cuadro que muestra el código HTML y elige Seleccionar todo. A
continuación vuelve a hacer clic derecho y selecciona Copiar.
8. Abre Kompozer.
9. Crea un documento HTML introduciendo texto e imagen o bien abre uno ya existente.
10. Haz clic sobre la página para situar el cursor.
11. A continuación selecciona Insertar > HTML
12. En el cuadro de diálogo Insertar HTML haz clic derecho y elige Pegar. Esta acción
pegará el código propuesto para insertar el enlace a la licencia elegida. Clic en el
botón Insertar.
13. Guarda el archivo HTML mediante Archivo > Guardar. Visualizar el resultado pulsando
en el botón Navegar de Kompozer. Se abrirá el navegador Firefox (si es el navegador
por defecto) mostrando esta página. Si haces clic sobre el icono de Creative Commons
o bien el enlace de texto que se acompaña se abrirá la correspondiente página de

licencia.

Manual Kompozer PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Kompozer PDF

Transféré par

Droits d'auteur :

Formats disponibles

1.

1.1.1 Conceptos básicos

A modo de introducción y con el propósito de unificar terminología a continuación se describe

World Wide Web (WWW)

Es el sistema de presentación de la información más utilizado en Internet. Sus principales

Es el ordenador encargado de proporcionar al navegador del cliente los documentos y medios

HTTP (HyperText Transfer Protocol)

Es el protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de

URL (Universal Resource Locator)

Es la dirección donde se encuentra un recurso en Internet.

HTML (HyperText Markup Language)

1.1.2 Mi primer documento HTML

2. En un documento nuevo escribe el siguiente texto:

3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.

1.1.3 El navegador Mozilla Firefox

Firefox es un navegador gratuito que representa una excelente alternativa a Internet

1.1.3.1 Características de Firefox

Navegación con pestañas

Bloqueador de ventanas emergentes

Protección contra programa espías

Limpieza de información privada

1.1.3.2 Instalación de Firefox

Para Windows puedes descargar e instalar el archivo Firefox Setup 2.0.0.12.exe .

Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente

1.1.4 Editores HTML

En este curso se propone utilizar Kompozer (http://www.kompozer.net/) por sus

1.2 Kompozer: instalación y uso

1.2.1 ¿Qué es Kompozer?

1.2.2 Instalación de Kompozer en Windows

1. Descarga el archivo KompozerPortable.exe a una carpeta de tu disco duro. Doble clic

2. La instalación de Kompozer es totalmente limpia, es decir, se descomprime en una

3. Después de unos segundos se habrá instalado en la carpeta C:\ KompozerPortable.

1.2.3 Instalación de Kompozer en Ubuntu

1. Desde el escritorio elige Aplicaciones > Añadir o quitar …

3. Introduce el término Kompozer en el cuadro de texto Buscar: y a continuación pulsa

4. Si estás conectado a Internet se descargarán los archivos necesarios para su

5. Kompozer se suele instalar por defecto en inglés. Es necesario descargar e instalar el

6. El archivo se guardará por defecto en /home/<usuario>/. A continuación abre

1.2.4 El entorno de Kompozer

Haz doble clic sobre el icono de Kompozer del escritorio.

5. Documento. Muestra el contenido del documento HTML actual.

1.3 Mi primera página

1.3 Mi primera página

1.3.1 Organización en carpetas

1. Vamos crear una carpeta de nombre miweb.

Si utilizas Windows se propone crear esta carpeta en el raíz de tu disco duro

1.1 Desde el escritorio elige Lugares > Carpeta

2 Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta:

3 Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta

1.3.2 Iniciar un documento nuevo en Kompozer

7 En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para

10 En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón

12 Clic en el botón Guardar

1.3.3 Insertar una imagen

15 Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo

17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto

1.3.4 Insertar un hipervínculo

1.3.5 Guardar un documento web

22 Clic en el botón Guardar

1.4 Viñetas y marcadores

1.4.2 Ejemplo: el glosario

Crear el documento web

10. La estructura que va a tener nuestro documento se recoge de forma gráfica en la