Web 2.0. Aplicaciones Educativas: Ejercicios con Hot Potatoes en Blogger

miércoles, 1 de diciembre de 2010

Ejercicios con Hot Potatoes en Blogger

Las nuevas tecnologías han creado una cantidad inmensa de herramientas para elaborar todo tipo de actividades. Los docentes tenemos suerte de poder contar con estos instrumentos de trabajo con los que podemos hacer de nuestros blogs una auténtica aula. Son muchas estas aplicaciones, pero ahora voy a escoger sólo una: la conocidísima Hot Potatoes. Pretendo hacer una introducción rápida para la instalación y el uso de dicha aplicación, además de su inclusión en un blog de Blogger, sabiendo que sus opciones son muchas, y que quien esté interesado seguirá aprendiéndolas por su cuenta. Esta es la mejor forma de aprender en el mundo de las nuevas tecnologías: alguien te da un empujón, y tú continúas por libre.

Para mostrar un primer ejemplo de esta actividad, he creado un artículo en otro blog de Blogger, El camarote de idiomas, donde incluyo un test de Hot Potatoes. Con esta aplicación se elaboran actividades interactivas de tipo tests en las que se puede incluir texto, imágenes y elementos multimedia tales como sonido y vídeo. El formato de Hot Potatoes es HTML con JavaScript, aderezado de Hojas de estilo CSS para el diseño, es decir, el de una página web. El programa crea automáticamente el archivo que contiene la actividad e incluye en él todo el código junto al contenido.

1. La etiqueta iframe para incluir archivos externos

Voy a desvelar el secreto desde el principio. 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 lo he guardado en otro servidor web y lo he incrustado 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. Además, existen algunos servidores gratuitos que podemos usar, como explico en Dropbox para enlazar archivos.

2. Registro e instalación de Hot Potatotes

En la página web de Hot Potatoes se pueden descargar los archivos para Windows, Linux y Mac. Hay que decir que algunas distribuciones Linux educativas, como Max 3.0, incluyen éste y otros programas educativos instalados y preparados para su uso.

Hot Potatoes es un programa gratuito, aunque no es software libre, y para su uso completo y sin restricciones, hay que registrarse en su página web. En la parte superior de la portada, debajo del logo, hay que hacer clic en la opción Register del menú principal. En la página que aparece hay que hacer clic, abajo a la izquierda, en el enlace que dice First, please read the license terms, que nos lleva a otro documento donde tenemos la licencia:

En la parte inferior hay que activar la casilla que empieza I have read the license agreement, con lo cual se confirma que hemos leído y aceptado la licencia. A continuación, se rellena el formulario con el nombre, el primer apellido, la cuenta de correo electrónico y el país donde vivimos. Cuando pulsamos el botón Submit, nos avisan de que han enviado el nombre de usuario y la contraseña al correo que hemos proporcionado. Tardará un poco en llegar: paciencia.

La instalación en Windows se realiza como cualquier otro programa. Cuando abrimos el programa bajo Windows nos aparece la siguiente interfaz:

En las patatas nos aparecen los nombres de los cinco tipos de ejercicios que se pueden realizar. En la ayuda de este programa se puede leer un tutorial o guía para aprender a utilizar la aplicación, y al final de este artículo se incluyen páginas relacionadas. Lo que yo voy a hacer es elaborar un simple ejercicio para que se vea lo sencillo que resulta este programa, y después lo voy a insertar en el artículo del blog con la etiqueta iframe.

3. Creación de un test con Hot Potatoes

Si hacemos clic en la patata etiquetada como JQuiz se nos abrirá la siguiente ventana, con la que vamos a elaborar un test de elección múltiple de sólo dos preguntas. La imagen se verá ampliada al hacer clic en ella, y se apreciará mejor su contenido:

(Hacer clic en la imagen para ampliarla)

Y ahora realizamos las siguientes acciones:

Escribimos el título del test en el primer campo de texto blanco.
Escribimos la primera pregunta en el segundo campo de texto, junto al número 1.
En la columna de las respuestas (Answers) escribimos al menos dos de ellas, siendo una la correcta.
En la columna de Feedback escribimos un comentario posterior a la resolución de la pregunta, que no es obligatorio.
En la columna Settings activamos la casilla Accept as correct en la respuesta que sea correcta.
Para escribir otra pregunta, avanzamos la numeración del campo superior izquierdo, donde pone el número 1. Y repetimos las mismas operaciones.
Cuando se termine el test, hay que guardarlo con el menú superior File/Save o con el correspondiente icono. Este archivo será el que tengamos que abrir cuando queramos modificar el test.
Finalmente, hay que crear el archivo HTML del test con el menú File/Create Web page/Standard Format. Después de guardarlo, aparece un cuadro de diálogo que nos invita a abrir el ejercicio en una ventana del navegador al apretar el primer botón View the exercise in my browser. Y aparece el test creado:

4. Otras opciones de Hot Potatoes

En el menú superior de Hot Potatoes existen otras opciones del programa. Aquí voy a comentar algunas que son importantes:

Insert - Con esta opción podemos insertar imágenes, enlaces, una tabla de HTML y objetos multimedia como vídeos o podcasts. Siempre se insertarán estos elementos donde tengamos colocado el cursor del ratón.
Options/Configure Output - Con esta opción configuramos la salida del test, es decir, el diseño y el texto de los distintos elementos. Aquí podemos, por ejemplo, traducir el texto a otros idiomas o cambiar los colores y los tipos de letra. Si sólo hacemos un test para el blog, es conveniente desactivar las casillas de la sección de Navigation en la pestaña Buttons.

5. Incorporar el test en el blog

Ahora voy a incorporar el test en mi blog. Para ello tengo que realizar dos pasos:

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

src: es la ruta o URL de donde se encuentra guardado el archivo jquiz.htm del test en otro servidor.
frameborder: es la anchura del borde del marco expresado en píxeles.
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.
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.
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.
No hay que olvidarse de las comillas y de cerrar el iframe con su etiqueta de cierre, que incluye una barra.
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.