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; por ejemplo Award Space, que yo mismo uso a veces.

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 (MAdrid LinuX), incluyen éste y otros programas educativos instalados y preparados para su uso.

Hot Potatoes es un programa gratuito, aunque no es software libre. 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 primero que tenemos que hacer es registrar nuestro programa en el menú Ayuda de la barra superior simplemente escribiendo un nombre de usuario. A partir de entonces, ya tenemos disponible el programa con todas sus opciones.

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:

1. Escribimos el título del test en el primer campo de texto blanco.
2. Escribimos la primera pregunta en el segundo campo de texto, junto al número 1.
3. En la columna de las respuestas (Answers) escribimos al menos dos de ellas, siendo una la correcta.
4. En la columna de Feedback escribimos un comentario posterior a la resolución de la pregunta, que no es obligatorio.
5. En la columna Settings activamos la casilla Accept as correct en la respuesta que sea correcta.
6. Para escribir otra pregunta, avanzamos la numeración del campo superior izquierdo, donde pone el número 1. Y repetimos las mismas operaciones.
7. 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.
   
8. 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:

1. 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. Pero hay que tener en cuenta que habrá que modificar la ruta de los objetos insertados, como explico en el apartado 6 de este artículo.
2. 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 otro ejercicio en mi blog. Para ello tengo que realizar dos pasos que explico en el siguiente vídeo y en el texto de abajo:

Insertar un Hot Potatoes en Blogger from Alejandro Valero on Vimeo.

1. El archivo HTML del test recién creado lo transfiero (lo copio) a un servidor web 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.

6. No se ven las imágenes incluidas en un ejercicio

Éste es un problema muy habitual y puede ser debido a dos motivos:

1. Cuando insertamos las imágenes en la actividad, el programa crea los enlaces con la ruta que tienen las imágenes en el disco duro del ordenador donde se ha creado la actividad, como se ve en esta imagen, cuya ruta (atributo src) es igual a "Escritorio/imagenes/mifoto.jpg".

Pero si éste ejercicio se usa en otro ordenador o en un servidor web, la imagen no se verá porque no sigue la misma ruta. Lo que hay que hacer es modificar esa ruta para hacerla relativa, es decir, ponerla en relación a la carpeta donde se encuentra la actividad y sus imágenes. Si las imágenes están en la misma carpeta que el archivo HTML de la actividad, sólo tiene que aparecer el nombre (y la extensión .jpg) de las imágenes en la ruta de los archivos de imagen. En este caso, sería simplemente: src="mifoto.jpg".

Si las imágenes están en una carpeta que se llame, por ejemplo, imagenes, como es aconsejable, dentro de la carpeta principal de la actividad, entonces escribiremos lo siguiente: src="imagenes/mifoto.jpg".

2. Otro motivo es que el nombre de las imágenes y las carpetas no debe incluir tildes ni huecos en blanco ni ningún carácter especial, porque en internet esto implica problemas. Por ejemplo, la siguiente ruta sería incorrecta: src="imágenes/mi fotografía.jpg". La ruta correcta sería: src="imagenes/mi_foto.jpg"

7. Enlaces de interés

1. Página oficial de Hot Potatoes.
2. Curso sobre Hot Potatoes en Aula 21.
   
3. Tutoriales de Hot Potatoes.
4. Actividades de Hot Potatoes en EducaMadrid.
5. Aplicaciones educativas con Hot Potatoes, en Formación en Red.
   
6. Hot Potatoes Exercises.
7. Languages Online.