Beruflich Dokumente
Kultur Dokumente
Páginas web
Päginas web ::: Introducción 9
Diseño de materiales multimedia. Web 2.0
1.1 Introducción
Päginas web ::: Introducción 10
Diseño de materiales multimedia. Web 2.0
1.1 Introducción
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.
Päginas web ::: Introducción 11
Diseño de materiales multimedia. Web 2.0
Servidor
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.
Päginas web ::: Introducción 13
Diseño de materiales multimedia. Web 2.0
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.
<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
Hola mundo
</body>
</html>
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>
Multiplataforma
Existen versiones de Mozilla Firefox para Windows, Linux y Mac
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.
Päginas web ::: Introducción 15
Diseño de materiales multimedia. Web 2.0
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.
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.
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.
Päginas web ::: Introducción 16
Diseño de materiales multimedia. Web 2.0
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/
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).
• 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
Diseño de materiales multimedia. Web 2.0
1.2 Kompozer:
instalación y uso
Páginas web ::: Kompozer: instalación y uso 18
Diseño de materiales multimedia. Web 2.0
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/
6. Clic derecho sobre el icono de acceso directo que has creado y elige Cambiar
nombre. Introduce como nuevo nombre: Kompozer
Páginas web ::: Kompozer: instalación y uso 19
Diseño de materiales multimedia. Web 2.0
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.
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.
Páginas web ::: Kompozer: instalación y uso 22
Diseño de materiales multimedia. Web 2.0
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.
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.
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
Páginas web ::: Mi primera página 26
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Mi primera página 27
Diseño de materiales multimedia. Web 2.0
Nota:
Es muy recomendable utilizar las distintas opciones de formato de esta lista para
destacar frases y párrafos.
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.
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.
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.
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.
Páginas web ::: Mi primera página 30
Diseño de materiales multimedia. Web 2.0
1.4 Viñetas y
marcadores
Páginas web ::: Viñetas y marcadores 32
Diseño de materiales multimedia. Web 2.0
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. 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.
Páginas web ::: Viñetas y marcadores 33
Diseño de materiales multimedia. Web 2.0
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
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.
Páginas web ::: Viñetas y marcadores 34
Diseño de materiales multimedia. Web 2.0
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.
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.
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.
Páginas web ::: Viñetas y marcadores 36
Diseño de materiales multimedia. Web 2.0
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
Diseño de materiales multimedia. Web 2.0
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.
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
Páginas web ::: Listas numeradas 39
Diseño de materiales multimedia. Web 2.0
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.
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
Diseño de materiales multimedia. Web 2.0
1.6 Tablas
Páginas web ::: Tablas 43
Diseño de materiales multimedia. Web 2.0
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.
Crear el documento
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.
Páginas web ::: Tablas 44
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Tablas 46
Diseño de materiales multimedia. Web 2.0
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.
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.
Páginas web ::: Tablas 47
Diseño de materiales multimedia. Web 2.0
25. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la
tabla de resultados.
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.
Páginas web ::: Tablas 48
Diseño de materiales multimedia. Web 2.0
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.
32. Para terminar pulsa en el botón Aceptar.
33. No olvides hacer clic en el botón Guardar para conservar el trabajo.
Páginas web ::: Hojas de estilo CSS 49
Diseño de materiales multimedia. Web 2.0
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.
• <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.
Páginas web ::: Hojas de estilo CSS 51
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Hojas de estilo CSS 52
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Hojas de estilo CSS 53
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Hojas de estilo CSS 54
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Hojas de estilo CSS 55
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Hojas de estilo CSS 56
Diseño de materiales multimedia. Web 2.0
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.
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.
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.
Páginas web ::: Hojas de estilo CSS 58
Diseño de materiales multimedia. Web 2.0
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
Diseño de materiales multimedia. Web 2.0
8. Uso de plantillas
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.
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.
Páginas web ::: Uso de plantillas 61
Diseño de materiales multimedia. Web 2.0
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.
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.
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 ::: Uso de plantillas 65
Diseño de materiales multimedia. Web 2.0
Páginas web ::: Formularios 66
Diseño de materiales multimedia. Web 2.0
1.9 Formularios
Páginas web ::: Formularios 67
Diseño de materiales multimedia. Web 2.0
1.9 Formularios
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.
• 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.
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.
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.
Páginas web ::: Formularios 70
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Formularios 72
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Formularios 74
Diseño de materiales multimedia. Web 2.0
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: Traducir.
• Valor del campo: Traducir.
Páginas web ::: Formularios 75
Diseño de materiales multimedia. Web 2.0
21. Selecciona Insertar > Formulario > Campo de formulario y en el cuadro de diálogo
Propiedades del campo del formulario configura los parámetros:
Páginas web ::: Formularios 76
Diseño de materiales multimedia. Web 2.0
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.
Páginas web ::: Formularios 77
Diseño de materiales multimedia. Web 2.0
1.10.1 Introducción
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.
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
Windows
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.
9. Para guardar una página haz clic en el botón Guardar situado en la barra de
herramientas de Redacción de Kompozer.
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 …
Páginas web ::: Archivos ZIP 82
Diseño de materiales multimedia. Web 2.0
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.
1.11.1 Introducción
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.
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.
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.
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.
10. Para terminar se abrirá el Adobe Reader mostrando el nuevo archivo PDF.
Nota:
Páginas web ::: Documentos PDF en la web 89
Diseño de materiales multimedia. Web 2.0
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.
Ubuntu dispone por defecto de un programa instalado para leer y crear documentos PDF. Se
trata de Evince Visor de documentos PDF.
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.
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.
Windows
Ubuntu
Ambos
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
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.
Páginas web ::: Documentos PDF en la web 94
Diseño de materiales multimedia. Web 2.0
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.
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.
Páginas web ::: Documentos PDF en la web 96
Diseño de materiales multimedia. Web 2.0
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)
Páginas web ::: Documentos PDF en la web 97
Diseño de materiales multimedia. Web 2.0
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
Diseño de materiales multimedia. Web 2.0
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.
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.
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).
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.
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)
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.
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.
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.
Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna
nombre a carpetas o archivos:
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.
Páginas web ::: El sitio web: estructura y navegación 107
Diseño de materiales multimedia. Web 2.0
• 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.
Páginas web ::: El sitio web: estructura y navegación 108
Diseño de materiales multimedia. Web 2.0
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.
7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css,
descargas, pdf, plantillas, scripts, swf y videos.
Páginas web ::: El sitio web: estructura y navegación 110
Diseño de materiales multimedia. Web 2.0
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
Windows
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.
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”
• Texto: “Página 3”. Enlace: “pagina0203.html”
• Texto: “Página 4”. Enlace: “pagina0204.html”
11. Repite el paso 10 y 11 para crear las entradas correspondientes del Capítulo 3:
• Texto: “Página 1”. Enlace: “pagina0301.html”
• Texto: “Página 2”. Enlace: “pagina0302.html”
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ú).
Páginas web ::: ¿Cómo diseñar un menú de navegación? 114
Diseño de materiales multimedia. Web 2.0
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).
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
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>
<!-- REST OF BODY CONTENT BELOW HERE -->
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
12. Pulsa en el botón Guardar.
13. Cierra DHTML Menu.
Páginas web ::: ¿Cómo diseñar un menú de navegación? 117
Diseño de materiales multimedia. Web 2.0
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ú.
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
Diseño de materiales multimedia. Web 2.0
1.15 Publicación
web por FTP
Páginas web ::: Publicación web por FTP 120
Diseño de materiales multimedia. Web 2.0
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.
• 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.
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/
10. Reinicia Filezilla y sigue los pasos del siguiente apartado para cambiar el idioma del
interfaz.
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.
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.
Páginas web ::: Publicación web por FTP 124
Diseño de materiales multimedia. Web 2.0
1. Abre Filezilla.
2. Seleccionar Archivo > Gestor de sitios o bien pulsa en el botón Gestor de sitios de la
barra de herramientas.
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.
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.
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.
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.
Páginas web ::: Publicación web por FTP 127
Diseño de materiales multimedia. Web 2.0
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:
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.
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.
Nota: Si no tienes marcada la opción Mantener esta ventana abierta … esta ventana
se cerrará automáticamente al cabo de unos segundos.
Páginas web ::: Edición web en línea con Kompozer 132
Diseño de materiales multimedia. Web 2.0
Notas:
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.
1.17 Usabilidad de
páginas web
Páginas web ::: Usabilidad de páginas web 137
Diseño de materiales multimedia. Web 2.0
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.
1.17.2 Navegabilidad
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.
Páginas web ::: Usabilidad de páginas web 138
Diseño de materiales multimedia. Web 2.0
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.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.
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:
1.18.1 Introducción
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.
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.
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.
Páginas web ::: Derechos de autor 142
Diseño de materiales multimedia. Web 2.0
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
Páginas web ::: Derechos de autor 144
Diseño de materiales multimedia. Web 2.0