Herramientas educativas en el Portal Educamadrid



                CAP de Aranjuez Curso 2007-2008



                 He...
Herramientas educativas en el Portal Educamadrid




               Sesión 5: Creación de contenidos: uso de tablas y efec...
Herramientas educativas en el Portal Educamadrid



                    •   Ahora vamos a crear una tabla que nos sirva de...
Herramientas educativas en el Portal Educamadrid



               •   Escribe ahora “Fuente de la información” y añade do...
Herramientas educativas en el Portal Educamadrid



                           o   Al final del texto inserta, a la izquie...
Herramientas educativas en el Portal Educamadrid



                      o   En el Nobel de Literatura, inserta el vídeo ...
Próxima SlideShare
Cargando en…5
×

Sesión 5

924 visualizaciones

Publicado el

Sesión del curso Herramientas Educativas del Portal Educamadrid

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
924
En SlideShare
0
De insertados
0
Número de insertados
20
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Sesión 5

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

×