Este documento proporciona instrucciones detalladas para crear una página web en el Portal Educamadrid sobre los Premios Nobel de 2007, utilizando tablas, imágenes, popups y enlaces. El documento guía al lector paso a paso para insertar contenido, añadir formato, crear una tabla de índices enlazada y agregar efectos interactivos a algunas imágenes.

1. Herramientas educativas en el Portal Educamadrid
CAP de Aranjuez Curso 2007-2008
Herramientas Educativas
en el Portal Educamadrid
Seminario
GUIÓN DE TRABAJO
Javier Medina
1

2. Herramientas educativas en el Portal Educamadrid
Sesión 5: Creación de contenidos: uso de tablas y efectos
popup y mouseover.
En esta sesión vamos a crear una página web con tablas y analizar las
posibilidades que ofrecen las imágenes alternativas y los pop-ups.
• Antes de empezar, debes prepararte los contenidos que vas a utilizar:
o En tu correo habrás recibido un correo titulado “Actividad: los
premios Nobel 2007”. En él encontrarás un archivo zip titulado
“Actividad premios nobel.zip”. Descárgalo en tu ordenador SIN
DESCOMPRIMIR, en un lugar conocido y fácilmente localizable.
o Descarga también el otro archivos adjunto “textos.zip” y esta vez
descomprímelo.
o En tu “Escritorio”, en el directorio virtual, crea una carpeta
titulada “Actividad Premios Nobel”. Pulsa sobre el nombre de la
carpeta para abrirla y luego,
• Selecciona el zip que acabas de descargar (“Actividad premios
nobel.zip”). Esta operación descomprimirá todas las imágenes que
necesitas para la actividad. Para localizar sólo deberás entrar en la
carpeta y elegir la deseada. (Es conveniente que organices tus archivos
en carpetas para facilitar su localización)
• Ve ahora a “Administrar/Contenidos” y elige el ámbito “Curso:
Herramientas Educativas en el Portal Educamadrid”. Allí encontrarás
tres contenidos: “Magnetorresistencia”, “Células madre”, “El
calentamiento global”. Selecciona los tres, marcando en los recuadros
correspondientes, y pulsa “Enviar” a “tu ámbito personal”.
• Crea un nuevo contenido del tipo “Contenido libre” en tu ámbito
personal.
• Titúlalo “Los Premios Nobel 2007 – TU NOMBRE” y añade una
pequeña descripción en el “resumen”, como la siguiente:
“Resumen de los Premios Nobel del año 2007, para utilizarlo como material de
trabajo en el Curso de Herramientas del Portal Educamadrid”
• Inserta la imagen “MedallaNobel.gif” (estará en tu directorio virtual, en
la carpeta que has creado antes) y abre el texto “Introducción.doc” que te
has descargado. Copia el texto y pégalo sin formato. Ajusta el texto y dale
el formato necesario (negritas, color, tamaño del texto) para que quede
como en la imagen. Inserta también los enlaces que se indican:
MedallaNobel.gif Enlace a:
http://nobelprize.org/
Pop up a la imagen 2
alfrednobel.jpg

3. Herramientas educativas en el Portal Educamadrid
• Ahora vamos a crear una tabla que nos sirva de índice-directorio de
nuestra página web. El aspecto final será:
Para ello crea una tabla 2 x 2. (ancho de la tabla 580 x 200 y alineación
vertical, centrado) Sitúate en la primera celda: añade una columna a la
derecha y dos fila debajo, convirtiendo la tabla en 3 x 4:
1 5 9
Crear tabla 2 6 10
3 7 11
Modificar fila 4 8 12
Modificar celda
• Sitúate en la celda 2 y únela a la 3 y a la 4; Inserta la imagen
Insertar fila “lateraltabla.jpg”
encima
Insertar fila
• Ahora sitúate en la celda 1 y únela a las 5 y 9. Inserta la imagen
debajo “cabeceratabla.jpg)
• Sitúate en cualquier celda y pulsando el icono de “Modificar celda”,
Eliminar fila establece el ancho de todas las celdas (Actualizar “todas las celdas de
Insertar la tabla”) en 120 px. Sitúate ahora en la celda donde has insertado la
columna imagen de Nobel y fija su anchura en 5.
a la izquierda • Une las celdas 8 y 12.
Insertar
• El resultado será:
columna
a la derecha 1+5+9
Eliminar 6 10
columna 2+3+4 7 11
Unir celdas 8+12
• Introduce los textos de los apartados tal y como figuran arriba y
céntralos en cada celda.
• Finalmente da un color a cada
celda utilizando la opción
“Modificar
celda”/Avanzado/Color de
fondo:
3

4. Herramientas educativas en el Portal Educamadrid
• Escribe ahora “Fuente de la información” y añade dos líneas,
enlazándolas con las direcciones que figuran al lado:
o Areomental (http://www.aeromental.com/2007/10/12/lista-de-
ganadores-de-los-premios-nobel-2007/)
o Blog de Alejandro Chávez Medrano:
(http://chavezmedrano.blogspot.com/2006/10/premio-nobel-en-
economa-2006.html)
• Es el momento de incluir el texto principal. Para ello abre el archivo
“textoprincipal.doc” que te descargaste al principio. Cópialo y pégalo sin
formato.
• Entre “Nobel” y “Nobel” deja bastantes interlineados, para dar la apariencia
de que cada uno está en una página distinta.
• Ahora vamos a añadir “anclas”, es decir, señales que sirvan para localizar
puntos del texto, al comienzo de cada Nobel. Así:
• Asigna a cada ancla un nombre de una sola palabra: “medicina”,
“física”, “química”, “economía”, “literatura” y “paz”.
• Ve al comienzo de la página y, en la línea de encima de la tabla-
directorio, coloca otro ancla a la que llamarás “inicio”.
• Ahora señala el texto de cada casilla y, pulsando el icono “enlazar”
únelo con el ancla correspondiente a su Nobel.
• Vamos a hacerle a cada “Nobel” algún arreglo.
o En el Nobel de Fisiología, inserta a la derecha la imagen
“nobelmedicina.jpg”
4

5. Herramientas educativas en el Portal Educamadrid
o Al final del texto inserta, a la izquierda, la imagen “back.gif” y
enlázala con el ancla “inicio”. En “aspecto” de la imagen
señala “mitad absoluta”. Copia esta imagen y el texto y pégalo
al final de cada párrafo de cada “Nobel”. Con ello
conseguirás que pulsando vuelvas siempre al directorio-
menú.
o En el Nobel de Física, inserta al final del texto la imagen
“diccionario.png” con los siguientes datos:
En “descripción” y “título” escribe: “Ver la definición”
En “aspecto” indica: “superior”
Vamos a hacer con ella un efecto popup “diferente”:
cuando pases el ratón por la imagen del librito se
abrirá un popup con la definición. A este efecto se le
1º llama “mouseover”. Para ello:
• Señala con el cursor la imagen
• Pulsa en el icono para enlazar la imagen
con un contenido. En este caso usaremos el
contenido “Magnetorresistencia”, que subiste a
tu directorio personal al comenzar la sesión.
Localízalo introduciendo el nombre del
contenido en el formulario de búsqueda.
2º • Con el fin de usar el efecto “mouseover”, crea
un popup como otras veces, usando como
dirección la que te aparece en la pantalla
w.educa.madrid.org/portal/c/portal/layout?p
_l_id=1&p_p_id=visor_WAR_cms_tools&p_
p_action=0&p_p_state=pop_up&p_p_mode
=view&p_p_width=984&p_p “general”.
• Si pulsas en la pestaña “eventos” verás que
aparece una instrucción en la casilla “onclick”
(esta orden hace que, al hacer clic, se abra la
ventana popup) Traslada el contenido de esa
3º casilla a la casilla “mouseover” y pulsa
“actualizar”.
o En el Nobel de Química, inserta la imagen “nobelquimica.jpg”
a la derecha.
5

6. Herramientas educativas en el Portal Educamadrid
o En el Nobel de Literatura, inserta el vídeo que encontrarás en
la dirección web que te indicaba en el correo que recibiste:
http://www.youtube.com/watch?v=vuBODHFBZ8k.
Para ello, recuerda:
Accede a la página de YouTube y copia el
código “embed”.
Ve a tu página y abre la visualización del
código, pulsando en HTML. Ve al final del
código y pega el “embed”. Pulsa “actualizar”
Pincha en el recuadro amarillo que se habrá
generado y arrástralo hasta la posición
deseada: bajo la última línea del párrafo
“Nobel de Literatura”
o En el Nobel de la Paz:
Inserta la imagen “nobelpaz.jpg” a la derecha.
Inserta la imagen “diccionario.png” al final del
párrafo.
Asocia un popup a esta imagen, uniéndola al
contenido “el calentamiento global” que te
subiste al principio de tu sesión.
o En el Nobel de Economía no hagas nada.
o Pulsa publicar y observa el resultado.
o Javier Medina Domínguez
javier.medina@educa.madrid.org
6