Día 2

CURSO DE EDICIÓN DE WEBS DIDÁCTICAS. DÍA 2

Por ©Rafa Mellado, Jefe del Departamento de Nuevas Tecnologías de CLIC-International House Sevilla.

Objetivos: En esta sesión vamos a aprender a descubrir el código fuente de una web y a manipularlo. También veremos algunos ejemplos prácticos que enriquecerán nuestras páginas webs.

Manipular el código fuente de una web. "Robar" una página web
Introducir una respuesta inmediata en un ejercicio de opción múltiple
Insertar un hipervínculo a una página web sin que perdamos la ventana

Manipular el código fuente de una web
El código fuente es el lenguaje de programación en el que está escrita una web, el llamado HTML. Para visualizar el código fuente de cualquier página, hacemos clic desde Internet Explorer en Ver-Código fuente. Prueba con esta misma página.

arriba arriba

O bien, robamos la página web que nos interesa para después abrirla con Front Page y así destriparla,
alterarla y adaptarla. Lo hacemos en Archivo-Guardar como. Prueba con la página de El País. Después de guardarla, la abres con el editor de Front Page y ya la puedes alterar. Haciendo esto se pueden realizar muchas actividades con webs manipuladas.

Estudia la de http://pagina.de/eldormilon, creada a partir de www.paginasamarillas.es/registro/alta.shtml.

Desde el editor de Front Page también se puede ver el código fuente y trabajar con él, haciendo clic en la pestañita del ángulo inferior izquierdo que se llama HTML. Esto nos servirá para trabajar con las siguientes actividades.

Introducir una respuesta inmediata en un ejercicio de opción múltiple

Resuelve este ejercicio.

¿De qué barrio de Madrid es Rafa? Marca la opción correcta.

Salamanca

Aluche

Chamartín

Para conseguir este efecto de interacción, se ha de añadir una etiqueta en el código fuente. Front Page no consigue este efecto, así lo tenemos que hacer "manualmente". La siguiente etiqueta que vamos a insertar nos sirve para dar una respuesta inmediata a una selección que haga el alumno.

Piensa en un ejercicio de opción múltiple. Escribe una pregunta que tendrá varias opciones. Haz clic sobre la pestaña de HTML que está entre Normal y Vista previa abajo a la izquierda. Para conseguir este efecto copia esta etiqueta debajo de la pregunta que has hecho:

<p><input type="radio" value="unoA"onClick="alert('tu respuesta a esa opción')"; name="primeraPregunta">tu opción</p>

En "alert" da la respuesta a la opción y en "primeraPregunta" (o segunda, tercera...) el texto que aparecerá. Procura no alterar la etiqueta ni eliminar ningún dato o comilla. Repite la operación tantas veces como opciones pongas copiando y pegando la etiqueta y cambiando sólo "alert" y la opción.

Comprueba que funciona el ejercicio, y si no es así, revisa los pasos.

arriba arriba

Insertar un hipervínculo a una página web sin que perdamos la ventana

Pincha aquí y observa lo que pasa. Luego vuelve a estas instrucciones.

Como has visto para volver a esta página has de hacer clic en Atrás en tu navegador con el consiguiente riesgo de perderte si navegas demasiado.

Vuelve a clicar aquí y observa de nuevo lo que pasa. Luego vuelve aquí.
Ahora no pierdes de vista la ventana original. Esto resulta muy útil para realizar actividades que implican una visita a otras webs, el alumno no debe perder de vista las instrucciones de la actividad.

Escribe ABC, marca la palabra e inserta un hipervínculo. Abres HTML en Front Page y copia esta línea desde el principio (espacio inicial incluido): target="_blank" (si te presenta dificultades al pegarla, cópiala de abajo).

Cuida que se reproduzca igual así, con el espacio antes de la palabra target:

<a href="http://www.abc.es" target="_blank">abcaquí