Manual para Kompozer

1. Páginas web

Päginas web ::: Introducción Diseño de materiales multimedia. Web 2.0

9

1.1 Introducción


10

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.


11

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 . 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.


12

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: • : indica que se inicia el documento. • : incluye el título de la página () que se muestra en la barra de título del navegador. • <body>: contiene la información visible.<br /> <br /> Päginas web ::: Introducción Diseño de materiales multimedia. Web 2.0<br /> <br /> 13<br /> <br /> 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 Hola mundo

3.

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


14

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 … y en el documento en blanco el texto que has incluido entre …

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.


15

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 +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.


16

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/) 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.

por sus

Páginas web ::: Kompozer: instalación y uso Diseño de materiales multimedia. Web 2.0

17

1.2 Kompozer: instalación y uso


18

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


19

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.


20

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//. 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.


21

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.


22

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 Diseño de materiales multimedia. Web 2.0

23

1.3 Mi primera página

24


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// 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.


25

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 8 9

26

En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para maximizar la ventana de este programa. 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. 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.


27

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 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.


28

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.


29

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 + para pegar la URL copiada anteriormente. Para terminar pulsa en el botón Aceptar.


30

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 Diseño de materiales multimedia. Web 2.0

31

1.4 Viñetas y marcadores


32

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.


33

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.


34

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 . 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.


35

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.


36

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 Diseño de materiales multimedia. Web 2.0

37

1.5 Listas numeradas


38

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. 5. Cierra la ventana del Bloc de Notas. 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


39

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 “” que aparece en la esquina inferior izquierda de la barra de estado de Kompozer. La etiqueta HTML “” define el enlace introducido.


40

16. En el menú que se despliega para la etiqueta “” 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


41

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 Diseño de materiales multimedia. Web 2.0

42

1.6 Tablas


43

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. 5. Cierra la ventana del Bloc de Notas. 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.


44

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.


45

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.


46

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.


47

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.


48

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 Diseño de materiales multimedia. Web 2.0

49

1.7 Hojas de estilo CSS


50

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
Texto seleccionado …
. Si hubieramos elegido Título 2 se habría etiquetado con
…
, etc.

Algunas etiquetas HTML son: • • • •

… . Contienen todos los caracteres que forman la página web.
…
, …,
…
. Permiten definir títulos de distintos tamaños (hasta 6).
…
. Contienen el texto de un párrafo. Texto del enlace. 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.


51

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.


52

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.


53

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.


54

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.


55

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.


56

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:
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


57

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.


58

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 Diseño de materiales multimedia. Web 2.0

59

1.8 Uso de plantillas


60

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 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.


61

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 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.


62

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.


63

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.


64

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


65

Páginas web ::: Formularios Diseño de materiales multimedia. Web 2.0

66

1.9 Formularios


67

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 2. Abre Kompozer y selecciona Archivo > Nuevo. 3. Escribe: "Buscador Google". Selecciona el texto y elige el estilo de párrafo Título 1. Pulsa 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”.


68

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. 8. Pulsa en el botón Aceptar.

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.


69

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 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 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.


70

18. Clic en el botón Aceptar. 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.

21. Pulsa en el botón Aceptar.


71

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.


72

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 2. Abre Kompozer y selecciona Archivo > Nuevo. 3. Escribe: "Traductor Babylon". Selecciona el texto y elige el estilo de párrafo Título 1. Pulsa 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. 8. Pulsa en el botón Aceptar.


73

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 para situarte en la siguiente línea.


74

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 15. Clic en el botón Aceptar.

16. Pulsa la tecla 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.


75

18. Clic en el botón Aceptar. 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. 20. En el cuadro de diálogo Propiedades del campo del formulario configura los 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:


• • •

76

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.

22. Pulsa en el botón Aceptar.

23. Para guardar esta página, elige Archivo > Guardar como. 24. Introduce “Traductor Babylon” como título y pulsa en el botón Aceptar.


77

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 Diseño de materiales multimedia. Web 2.0

78

1.10 Archivos ZIP

79


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 localizarlo.

y utiliza el explorador de archivos para

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.


80

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. 6. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción 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.


81

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 …


82

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.

83

Páginas web ::: Documentos PDF en la web Diseño de materiales multimedia. Web 2.0

84

1.11 Documentos PDF en la web


85

1.11 Documentos PDF en la web 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. En este capítulo se explican los siguientes procedimientos: 1. 2. 3. 4.

Lectura y creación de archivos PDF desde Windows: Adobe Reader y PDF Creator. Lectura y creación de archivos PDF desde Ubuntu: Evince Visor de documentos. Exportar a PDF desde OpenOffice. 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. 2. 3. 4. 5. 6.

7.

8. 9. 10. 11. 12. 13.

86

Descarga el archivo PDFCreator-0_9_5_setup.exe y ejecuta el asistente de instalación. Selecciona el idioma de instalación. Elige Español y pulsa en el botón Aceptar. Bienvenido al asistente de instalación de PDFCreator. Clic en Siguiente> para continuar. Acuerdo de Licencia. Marca la opción Acepto el acuerdo y pulsa en el botón Siguiente > Tipo de instalación. Activa la opción Instalación estándar y pulsa en el botón Siguiente > 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 >. 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 > 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. Selección de componentes. Acepta las opciones por defecto haciendo clic en el botón Siguiente> Selecciona la carpeta del Menú de Inicio. Clic en el botón Siguiente > Selecciona las Tareas Adicionales. Clic en el botón Siguiente> Listo para instalar. Clic en el botón Instalar. 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. 2. 3.

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. Sitúate en esta carpeta y haz doble clic en el archivo alimentación.txt para abrirlo con el Bloc de Notas. 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. 5. 6.

87

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. Ahora vamos a imprimir el documento. Elige Archivo > Imprimir. 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.

8.

Pulsa en el botón Guardar.


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:

88


89

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. 3. 4. 5. 6. 7. 8. 9. 10.

90

En la ventana de consola escribe: sudo apt-get install cups-pdf Cierra esta ventana. Desde el escritorio elige Sistema > Administración > Impresoras Clic en el botón Impresora Nueva Seleccione la conexión. Elige como dispositivo Print into PDF file y pulsa en el botón Adelante. Seleccionar impresora desde la base de datos. Selecciona la marca Generis y pulsa en el botón Adelante. Modelos y Controladores. Elige como modelo PostScript Printer y como controlador Generis PostScript Printer (recomendado). Clic en el botón Adelante. Nombre de la impresora. Introduce por teclado su identificativo, por ejemplo: PDFPrinter. 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 …


91

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.


92

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. 2. 3.

5.

Abre Kompozer Selecciona Archivo > Abrir Localiza el archivo plantas.htm que has situado en miweb en apartados anteriores. Clic en el botón Abrir. 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 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 …

4.


93

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. 10. 11. 12. 13.

94

En el área Destino marca la opción El enlace se abrirá y en la lista elige la opción en una nueva ventana. Clic en el botón Aceptar. 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. Desde Kompozer guarda los cambios de la página plantas.html mediante Archivo > Guardar. 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


95

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.

96


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. 9. Clic en el botón Aceptar.

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 Índice (página 2) El coordinador TIC (página 25) Lineas de Actuación (destino) Organigrama (destino) Documento (zoom 200) Documento con marcadores visibles Documento con miniaturas visibles Documento sin barras de scroll Documento sin barra de herramientas Organización (página 23 ajustada) Organización (página 23 tamaño ventana)

Enlace pdf/TIC_project.pdf#page=2 pdf/TIC_project.pdf#page=25 pdf/TIC_project.pdf#Lineas_Actuacion pdf/TIC_project.pdf#Organigrama pdf/TIC_project.pdf#zoom=200,10,10 pdf/TIC_project.pdf#pagemode=bookmarks pdf/TIC_project.pdf#pagemode=thumbs pdf/TIC_project.pdf#scrollbar=0 pdf/TIC_project.pdf#toolbar=0 pdf/TIC_project.pdf#page=23&view=Fit pdf/TIC_project.pdf#page=23&viewrect=10,10,300,200


97

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 Diseño de materiales multimedia. Web 2.0

98

1.12 Noticias RSS de un sitio web

99


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. 2. 3. 4. 5.

Titulo del Canal: Canal Naturaleza Link: Enlace a la website. Imagen corporativa. Descripción. Texto explicativo del propósito del canal. 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 http://rss.elmundo.es/rss/ 3. Haz clic en uno de los iconos RSS correspondiente a un canal temático

El

Mundo:

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.


100

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.

5. Pulsa en el botón Aceptar. 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.


101

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


102

modificar o añadir contenidos respetando escrupulosamente la estructura de las etiquetas.

4. A continuación se explican las distintas etiquetas o tags: • • •

•

… . 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. … . 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: • …. Título del canal. • …. Descripción del canal. • …. Enlace al sitio web principal del espacio. • Sun, 27 Apr 2008 21:08:34 +0100. Es la fecha de la última modificación del archivo. Como puedes ver su formato es inglés. • …. Contiene la imagen del canal: url, título, enlace, descripción, etc. Es una parámetro opcional. …. Cada noticia será un bloque que comienza y termina por estas etiquetas. Dentro de ellas se especifican los distintos parámetros de cada noticia: • … Títular de la noticia. • … Enlace donde se dirige cuando el usuario pulsa en el titular. • … Breve descripción de la noticia. • …. Categoría de la noticia. • …. 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 copiando y pegando más bloques … 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.


103

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.

7. Para terminar pulsa en el botón Aceptar. 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 Diseño de materiales multimedia. Web 2.0

104

1.13 Sitio web: estructura y navegación


105

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


106

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.


107

•

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.


108

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 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.


109

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.


110

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 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? Diseño de materiales multimedia. Web 2.0

111

1.14 ¿Cómo diseñar un menú de navegación?


112

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 • Texto: Página 2. Enlace: pagina0102.html Capítulo 2 (sin enlace) • Texto: Página 1. Enlace: pagina0201.html • Texto: Página 2. Enlace: pagina0202.html


• Texto: Página 3. Enlace: • Texto: Página 4. Enlace: Capítulo 3 (sin enlace) • Texto: Página 1. Enlace: • Texto: Página 2. Enlace:

113

pagina0203.html pagina0204.html pagina0301.html pagina0302.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” • 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ú).


114

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).


115

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).


116

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: 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.


117

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">


118

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 Diseño de materiales multimedia. Web 2.0

119

1.15 Publicación web por FTP


120

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


121

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 …)


122

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. 2. 3. 4.

Abre el programa Filezilla. Selecciona Archivo > Gestor de sitios. Se muestra el cuadro de diálogo Gestor de sitios. Realiza los siguientes pasos para crear la conexión a un nuevo sitio:


123

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.


124

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.


125

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.


126

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.


127

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.


128

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 Diseño de materiales multimedia. Web 2.0

129

1.16 Edición web en línea con Kompozer


130

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 . 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.


131

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.


132

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 2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción Un documento vacío y pulsa en el botón Crear.


133

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.


134

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.


135

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 Diseño de materiales multimedia. Web 2.0

136

1.17 Usabilidad de páginas web


137

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.


138

•

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.


139

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 Diseño de materiales multimedia. Web 2.0

140

1.18 Derechos de autor


141

1.18 Derechos de autor 1.18.1 Introducción 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.


142

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)


143

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


144

o bien el enlace de texto que se acompaña se abrirá la correspondiente página de licencia.

Manual para Kompozer

Recommend Documents

Texto seleccionado …

…

…

…