3.2.1. Actividades interactivas en los blogs

Una de las características que distingue a un blog de aula es la inclusión de actividades interactivas en sus entradas. Muchas actividades pueden realizarse con el simple texto, y muchas más con elementos multimedia, pero el elemento interactivo es fundamental por varios motivos:
  1. Permite la interacción entre la actividad y el estudiante, de modo que se reciben respuestas inmediatas a las cuestiones planteadas.
  2. Permite un seguimiento constante del rendimiento de los estudiantes.
  3. Tiene un atractivo fundamental que fomenta la motivación de los estudiantes.
  4. Cuando se acompaña con elementos textuales y multimedia adecuados, se pueden crear actividades muy completas y educativas.
  5. Si se acompaña de actividades creativas, entonces el resultado puede ser óptimo.
La verdad es que son pocos los blogs educativos que incorporan estas actividades interactivas. Su uso es todavía esporádico y experimental. El tinglado es uno de los pocos blogs de aula que incluyen elementos interactivos, y los miembros de este blog colectivo intentamos experimentar con herramientas adecuadas.

ctividad interactiva
Actividad de José Mª Campo en El tinglado

Hasta ahora, este tipo de actividades se ha reservado para espacios virtuales de e-learning o enseñanza a distancia, como la plataforma Moodle. Su uso se ha centrado en la realización de cursos fuertemente organizados que tienen que producir unas calificaciones. Pero las características de los blogs, que son herramientas más abiertas, no parece que hayan fomentado en sus autores la necesidad de la inclusión de las actividades educativas interactivas en sus blogs, entre otros motivos porque los gestores de blogs no incluyen herramientas que produzcan esta interactividad fácilmente, y hay que recurrir a herramientas externas.

En todo caso, siempre ha habido blogs que enlazan actividades interactivas publicadas en otras webs, pero lo que queremos hacer en este taller es incrustar esas actividades en las entradas del blog y demostrar que su uso es importante para el funcionamiento de un blog educativo.

3.2.2. Cómo incrustar actividades interactivas en un blog de Blogger

1. La etiqueta iframe para incrustar archivos externos

HTML, el lenguaje que subyace en la Web, tiene una etiqueta denominada iframe que sirve para introducir un archivo HTML en otro con forma de marco, de ahí su nombre. El archivo que contiene el ejercicio interactivo se guarda en otro servidor web y se incrusta enlazándolo en el artículo donde se publica, de forma que no parece de fuera.

¿Por qué no se puede incrustar esta actividad sin enlazarla con la etiqueta iframe? La respuesta es que la aplicación con la que se elabora esta actividad crea un archivo HTML con un código muy complejo que no deja esa posibilidad, de manera que resulta imposible pegar el test en el artículo. Por tanto, para incluir este tipo de ejercicios en el blog tenemos que contar con un servidor externo donde guardar los archivos HTML. Esto no es un problema para los docentes, porque todos disponemos de espacio web en algún servidor de las Consejerías de Educación o del Ministerio de Educación (CNICE), y además en la Web existen muchos servidores gratuitos.

2. Incorporar el test en el blog

Para incorporar el test en el blog hay que realizar dos pasos:
  1. El archivo HTML del test recién creado lo transfiero (lo copio) a un servidor web mediante un programa de FTP, y apunto la ruta o dirección Web (URL) donde está guardado, de modo que si escribimos esa ruta en el navegador, vemos el test como página web normal.
  2. Lo incorporo a mi blog mediante la etiqueta iframe. El texto siguiente, con los cambios necesarios, hay que insertarlo en el código fuente del texto: hacemos clic en la pestana Edición de HTML del editor de Blogger, y ahí lo pegamos donde deseemos que aparezca:
<div align="center"><iframe src="http://ruta_mi_servidor/jquiz.htm" frameborder="0" height="500" width="500" scrolling="auto"></iframe></div>
En este texto vemos los atributos de la etiqueta iframe, es decir los parámetros de dicha etiqueta, que están colocados dentro de la etiqueta de apertura:
  1. src: es la ruta o URL de donde se encuentra guardado el archivo jquiz.htm del test en otro servidor.
  2. frameborder: es la anchura del borde del marco expresado en píxeles.
  3. height: es la altura del marco. Hay que ajustar esta altura si se quiere que no se vea la barra de desplazamiento y parezca que el test está incrustado en el blog.
  4. width: es la anchura del marco. Hay que tener cuidado de no poner una anchura que sobrepase los 500 píxeles, pues el marco podría invadir el lateral del blog.
  5. scrolling: es la barra de desplazamiento. Escribimos auto para que la barra aparezca automáticamente cuando sea necesario. Si escribimos yes, la barra aparecerá siempre, y si ponemos no, no aparecerá nunca. En este último caso, hay que impedir que el test se esconda por debajo del marco y el usuario no pueda verlo entero.
  6. No hay que olvidarse de las comillas y de cerrar el iframe con su etiqueta de cierre, que incluye una barra.
  7. En texto azul he incluido la etiqueta div y el atributo align para centrar el marco en la página, aunque no es necesario. No hay que olvidar el div de cierre. Con este código podemos centrar cualquier elemento de la página.
Actividad interactiva
Actividad en mi blog de Blogger

Una pega del editor de Blogger

Y ya tenemos el test incorporado a nuestro blog. Pero en el editor de Blogger ocurre un pequeño error en alguno de los navegadores que más se usan, pues cuando insertamos el texto de la etiqueta iframe, desaparece del editor todo el texto del artículo, quizá debido a que esta etiqueta obliga a salir a un servidor externo. En realidad, el texto sigue ahí, porque si vemos el artículo en Vista previa, aparece todo lo que teníamos escrito.

Para solucionar esta pega, tenemos dos soluciones: o dejar guardado el artículo con el editor en Edición de HTML o desactivar el editor visual del blog en el menú Opciones/Básico. En este caso establecemos como No la opción ¿Mostrar el modo de composición para todos sus blogs? Y después pulsamos el botón Guardar valores. En este caso, sólo aparecerá un marco en el editor donde se verá el texto junto al código HTML, es decir, el código fuente del artículo. Ahí podemos seguir escribiendo normalmente. Cuando no trabajemos con ese artículo podemos volver a activar el editor visual, que incorpora los botones de formateo.

Otra opción práctica consiste en escribir el artículo en su totalidad con el editor visual de siempre, y cuando ya esté listo para ser publicado, incluimos la etiqueta iframe. A continuación lo guardamos. Cuando queramos modificarlo, entonces tendremos que desactivar el editor visual.


Última modificación: Xoves, 15 de Maio de 2008, 17:53