Hot Potatoes 2006 2

Hot Potatoes

Software Interactivo como recurso didáctico
para la enseñanza.

Julio Torrecillas Ramírez
CPR, Ceuta 2006

Herramienta de autor para la enseñanza: Hot Potatoes

CONTENIDO.
1. ¿Qué es Halfbaked Software?

2. Breve referencia a las distintas partes del programa “Hot
Potatoes”
2.1 . JQuiz.
2.2 . Jcloze.
2.3 J.Mix.
2.4 Jmatch.
2.5 . JCross.
2.6 . Masher
3. Instalación y configuración del programa.

4. Uso de los diferentes Programas en Hot Potatoes.
a. JCloze.
b. JMatch.
c. Jquiz.
d. JMatch.
e. JCross.

5. Objetos Multimedia en HP.

6. Mi primera página Web para Hot Potatoes con
Dreamweaver.
a. Creación de la página de inicio.
b. “The Masher” y links a ejercicios realizados con HP.
c. Introducción a CuteFtp.

2

1. ¿Qué es Halfbaked Software?

“Hot Potatoes” es un producto de la Compañía
canadiense “Half-Baked Software” auspiciada por la Universidad
de Victoria y la “UVic Innovation and Development Corporation”.
Varios autores trabajan para el “Humanities Computing and
Media Centre”. Esta compañía (Half-Baked Software) se
constituyó con la idea de comercializar, sobre todo, “Hot
Potatoes” y “Quandary” (Action Maze o laberinto de acción) que
se realiza en el HCMC. El programa, por tanto, no es
“freeware”1, pero sí lo pueden usar libremente asociaciones
educativas sin ánimo de lucro o las personas que trabajan para
ellas. Los autores no sólo han producido este software para la
enseñanza sino que, además, desarrollan otros programas muy
interesantes para la enseñanza-aprendizaje de idiomas y otras
materias (resolución de problemas, cuestionarios,…

Los programas mencionados se pueden conseguir,
gratuitamente algunos, en la dirección de Internet:
http://www.halfbakedsoftware.com . Una vez descargado es
muy importante registrarse pues, de lo contrario, el número de
ejercicios o preguntas está limitado. El registro es gratuito en la
dirección: http://hotpot.uvic.ca/reg/register.htm . Una vez
rellenado el formulario recibiremos la información necesaria a
través de e-mail.

“Hot Potatoes” (en adelante HP) es una herramienta
compuesta de 5 programas y una utilidad para reunir en una
1
De dominio público.
3

unidad un grupo de ejercicios realizados con HP, The Masher,
(sólo permite la realización de tres ejercicios, si queremos
añadir más, debemos registrar el programa - $120,
aproximadamente). (ver fig.1)

Figura 1

Las actividades o ejercicios realizados con cualquiera de estos
programas se pueden visionar a través de página Web (navegador
Explorer de Microsoft o Mozilla Firefox) o se puede pasar su contenido
al “portapapeles” de “Windows” para su posterior pegado en un
procesador de textos e imprimirlo, si se desea. Es cierto que, en
principio, HP se pensó, fundamentalmente, para la realización de
ejercicios interactivos que podían ser utilizados a través de Internet, sin
embargo también se pueden usar off-line, es decir, sin necesidad de
conexión a la red. Para realizar todo esto no es necesario tener
conocimientos de lenguaje web o de Javascript.

La ventaja en la utilización de ejercicios interactivos se puede
resumir de la siguiente forma:

4

• Los ejercicios y actividades desarrollados mediante programas
de autor pueden aumentar la motivación de los alumnos al
poderse construir de acuerdo con sus intereses y necesidades.
• Se pueden construir ejercicios similares a juegos o que, desde
el punto de vista de los alumnos, se utilizan como un juego.
• Se pueden realizar las actividades fuera de clase y cada alumno
la puede realizar a su ritmo: no hay prisa, no hay tiempo,…
• Como aspecto más relevante podemos decir que los alumnos
reciben un “feed-back” inmediato e individual.

2. Breve referencia de los programas.

Para todos los programas podemos mencionar apartados
comunes:
• Los archivos realizados se deben grabar en dos
formatos:
1. Archivo de HP (extensiones: jmt, jms, jqz,jcl,jcw).
2. Archivo html (para ser visionado con un explorador de
Internet.)
3. En HP podemos incluir gráficos, sonido, video, etc.
Pero esta aplicación no incorpora ningún programa
para el manejo de esos tipos de ficheros (wav, mp3,
mpeg, …) Debemos, si queremos editar estos
ficheros, disponer del software apropiado (por
ejemplo: Paint Shop Pro, Ulead Video Edition o
Camtasia Audio Editor.
4. Debemos grabar los ficheros en la misma carpeta (HP
y html) y utilizar nombres largos sin espacios pues la
mayoría de servidores tratan el espacio como “%20” y
5

puede dar lugar a errores en la navegación. Por
ejemplo, podemos usar “la_constitucion_española” en
lugar de “La constitución española”.

2.1. JCloze. Es un programa que permite la realización
de ejercicios de tipo “rellenar espacios en blanco”.
La realización de los mismos es muy simple. Se
utiliza un texto o se copia del portapapeles y se
pega en la zona central del programa para,
después, insertar los huecos al azar o insertar los
huecos que consideremos oportunos.
El resultado final, una vez guardado con formato “html”2, puede
ser visionado en cualquier navegador actualizado (véase fig.2)

Figura 2

Este texto también se puede utilizar en un “procesador de
textos” como veremos más adelante.

2
Hypertext Markup Language: Lenguaje utilizado para escribir páginas para ser vistas en
Internet.
6

2.2. JMatch. Produce ejercicios de emparejamiento, similar al
que podemos observar en la figura 3.

Figura 3

En este ejercicio, en concreto, se trataría de emparejar la
palabra en inglés con su correspondiente dibujo.

2.3. JQuiz. Crea cuestionarios basados en preguntas. Éste
puede realizar cuatro tipos diferentes de ejercicios (elección múltiple,
respuestas cortas, mixto, elección múltiple y respuesta corta y
multiselección. En la figura 5 podemos ver un ejemplo de elección
múltiple.

Figura 4

7

2.4. JCross crea crucigramas. El alumno puede obtener ayuda
gráfica, o de una letra cuando pulsa la opción de Pista (Hint). Véase
fig.6.

Figura 5

2.5. JMix. Este programa crea ejercicios sobre oraciones o
palabras desordenadas (véase figura 7).

Figura 6

2.6. The Masher. Es una herramienta que permite reunir
varios ejercicios en una sola unidad con sus hipervínculos
correspondientes; sin embargo, es necesario comprar una
licencia de Hot Potatoes (como se dijo más arriba) para poder
hacer unidades de más de tres ejercicios.

3. Configuración e instalación del programa.

8

Una vez descargado el programa de la red e instalado en
nuestro ordenador, ejecutamos éste y aparecerá la pantalla de
la figura 1.
Es necesario, como se dijo anteriormente, registrarse
para obtener toda la funcionalidad de Hot Potatoes.
Una vez registrados, lo primero que debemos realizar es
cargar la interfaz en castellano (véanse figuras 7 y 8, si no se ha
hecho durante la instalación del programa)

Figura 7

Figura 8
El siguiente paso es saber dónde están colocados los archivos
de configuración del sistema (en Opciones, Project Settings) y
aparecerá, por defecto la siguiente pantalla (fig. 9):

9

Figura 10

Figura 9

Los lugares en los que aparecen los archivos de configuración
por defecto pueden ser cambiados pulsando sobre la carpeta de la
derecha y eligiendo otra ubicación.

Es interesante crear una carpeta donde iremos alojando los
distintos ejercicios que vayamos realizando, diferenciándolos, si lo
creemos oportuno, en niveles o en tipos de ejercicios. En estas
carpetas debemos guardar, antes de empezar a realizar los ejercicios,
todos los archivos: gráficos o multimedia, textos, etc. que queremos
introducir en los mismos.

4. Uso de los diferentes programas de HP.

4.1. JCloze.

Vamos a crear un ejercicio sobre el “La Constitución
Española” que, previamente, hemos escrito en cualquier
procesador de textos. Una vez pegado (opción copiar del
procesador) y Pegar (en HP) (fig.11)

10


Figura 11

Pasaremos a ver qué podemos hacer con este texto
(configuración de salida, formato de grabación, etc.). Para ello
observaremos la barra de tareas del Programa.

La primera opción que aparece es “Archivo” (fig.10): En este
menú podemos observar las distintas posibilidades: desde crear un
archivo nuevo hasta la posibilidad de exportarlo a la plataforma
WebCT3. Vamos a utilizar el archivo “La Constitución”; damos título al
ejercicio, abrimos el archivo (edición, copiar) y lo pegamos en HP.
Podemos añadir imágenes, sonido,… Vamos a añadir una imagen
(fig.13) que encontraremos en la carpeta HP (spain.jpg). Para ello
Figura 13
es primero necesario guardar el archivo. Tras
haberlo guardado, insertaremos una imagen
que, en nuestro caso va a proceder de un
archivo que está en nuestro ordenador. Como
se puede observar en la figura 12 también lo
podríamos obtener de Internet para lo cual
deberíamos tener (o la persona que lo utilizara)
una conexión a la red.

Figura 12

3
Entorno que permite a profesores crear cursos online. (http://www.webct.com/ )
11


Figura 13
A continuación HP nos presentará la imagen 15 que nos muestra los
archivos de imagen que hay en la carpeta que hemos seleccionado:

Figura 14

Una vez seleccionado, nos llevará a la imagen 16 que nos
muestra el archivo de imagen seleccionado, la alineación que
queremos, la anchura y la altura de la misma así como texto alternativo
(es decir, el texto que aparecerá cuando pongamos el ratón sobre la
imagen en la página Web, la dirección –en nuestro caso local - donde
está archivada la imagen y su título.

Figura 15
En ella podemos observar que podemos elegir el lugar de colocación,
y la anchura y la altura de la imagen, manteniendo o no la relación de

12

aspecto de la misma. Una vez realizados los cambios que
consideremos oportunos, presionar O.K. y volvemos a la pantalla
principal de HP.

En este momento podemos observar ya el formato de salida del
ejercicio que hemos realizado. Lo guardamos en primer lugar (archivo-
guardar como) y lo exportamos para verlo como página Web. Se graba
con un nombre significativo y se muestra en el navegador de la
siguiente forma (fig. 16):

Figura 16

Es ahora el momento de pasar a la configuración del formato que le
queremos presentar al alumno que, por defecto, viene en inglés. Es
decir, en lugar de “Fill in the blanks” utilizaremos, por ejemplo,
“Rellenar los espacios en blanco” o cualquier otro que consideremos
oportuno en Opciones → Configurar el formato de archivo originado
(fig.17).

Figura 17

13


Esta opción
Figura 18 nos permitirá dar nuestro toque especial al ejercicio que
finalmente aparecerá en la página Web. Una vez que presionemos
sobre la opción entraremos en la Figura 19, pantalla de configuración
del fichero. En esta pantalla podemos hacer cuantos cambios
consideremos oportunos, desde las instrucciones y título hasta los
avisos e indicaciones que aparecerán. También es posible enviar los
resultados mediante e-mail a una dirección de correo personalizada.

Figura 19

14

En esta primera parte (título e instrucciones) hemos cambiado las
instrucciones en inglés para las correspondientes en castellano. En la
siguiente opción (Avisos e indicaciones) hemos actuado de la misma
forma. En el apartado botones podemos darle un toque personal a
nuestros ejercicios añadiendo algunos gráficos o, incluso,
incorporando links a otros ejercicios que hayamos realizado (fig.20).

Figura 20
En esta figura podemos observar que hemos introducido, (por medio
de la opción insertar) en algún caso, gráficos en lugar de palabras.
Estos gráficos, como siempre, han sido realizados con anterioridad y
archivados en las carpetas de HP.

Figura 21

15

El apartado “aspecto” nos permitirá personalizar el formato del
archivo html de salida: Color del texto, de la barra de navegación, del
color de fondo,… ( figura 22)

Figura 22
En el apartado URL4 de fondo podemos elegir una imagen que
tengamos archivada en nuestro ordenador. Si utilizamos esta opción
debemos guardar el archivo de datos y el archivo “html” en la misma
carpeta. Más abajo, podemos seleccionar los colores que
consideremos más atractivos para nuestro ejercicio.
El apartado “contador” nos permite especificar un tiempo límite
para la realización del ejercicio.
En el siguiente apartado, “otro” (figura 23), HP incorpora varias
opciones que resultan muy interesantes:
i) En lugar de una caja de texto vacía puede aparecer una caja de
texto con una “dropdown list” (lista desplegable) que muestra
todas las palabras de los huecos del ejercicio.

4
Uniform Resource Locator.
16

ii) Podemos optar por mantener las cajas vacías y que se añadan
las palabras tras la pregunta (en forma desordenada) o incluir la
lista desplegable y las palabras.
iii) Además, podemos hacer que diferencie entre mayúsculas y
minúsculas.

Figura 23
5
El último apartado, CGI , puede ser muy útil si los alumnos
disponen de dirección de correo electrónico y el profesor dispone un
servidor que permita esta opción y lo configure a través de los
numerosos programas gratuitos en su espacio Web. Este es el
momento de analizar y comparar cómo ha quedado nuestro ejercicio
en relación a la primera prueba (figura 24).

5
Common Gateway Interface: Interfaz que permite conectar dos redes.
17


Figura 24
A continuación podemos observar el video 2, toda la secuencia
de creación de un ejercicio basado en JCloze.

18

4.2. JMatch. Mediante JMatch, como observamos más arriba,
podemos realizar ejercicios de emparejamiento. Podemos asociar
dibujos, gráficos, frases,… Podemos utilizar dos formatos de archivo
de salida: “Drag and Drop” o “dropdown list”. Vamos a realizar un
ejercicio que practica las diferentes conexiones y partes de un
ordenador mediante la asociación del hardware (palabras) y su gráfico
correspondiente. Para ello utilizaremos la carpeta de imágenes, donde
están ubicados los gráficos que necesitaremos para la realización de
este ejercicio.
Seguiremos los mismos pasos que para el programa anterior
(Archivo, nuevo,…). Daremos título al ejercicio y pasaremos a la
introducción de datos (fig. 25)

Figura 25

A la derecha hemos introducido los
componentes (palabras) y a la izquierda
vamos a introducir los gráficos que se
relacionan con dichos componentes (los
gráficos deben ir ordenados,
correspondiéndose la palabra con el
gráfico correspondiente en la cada
figura 26

columna. Si analizamos la figura 26, observaremos que la imagen que

19

vamos a introducir (placa_base.jpg) tiene una resolución de 1280 x
960; esta resolución es demasiado grande como para ser manejada en
una página Web. En este momento debemos pensar en disminuir su
tamaño (tanto en bytes como en resolución). Para ello utilizaremos el
programa Paint Shop Pro que pueden descargar, gratuitamente en su
versión “shareware” de: http://www.jasc.com.

Una vez instalado y seleccionado las extensiones de archivo
que podrá manejar el programa, ejecutamos esta versión “shareware”6.
En primer lugar abrimos el archivo “placa_base.jpg de la carpeta de
imágenes. Seleccionamos “Imagen” y, dentro del menú, “Resize”.

6
Programa que se puede probar durante un periodo de tiempo. Terminado el mismo hay que pagar una
pequeña cantidad de dinero o el programa deja de funcionar.
20

Observamos que la anchura es
1280 y la altura es de 960.
Seleccionamos las flechas de
ambas hasta cambiar la anchura y
altura a un tamaño manejable en
una página web. Pequeños
cambios se pueden realizar más
Figura 27 tarde en HP. Figura 28

La grabamos (generalmente con un nombre diferente, por ejemplo
placa_base_2.jpg, para no copiar sobre el original y poder así
mantenerlo) en la carpeta de HP. Si la imagen fuera excesivamente
grande en bytes, podemos utilizar la opción de Paint Shop “Exportar”
(en el menú archivo). En este submenú observamos que tenemos la
posibilidad de utilizar diferentes tipos de salida: jpeg, gif y png (figura
29). El primero produce resultados interesantes en la relación
compresión-calidad (obsérvese figura 30 –grado de compresión-).

Figura 29
Una vez hemos introducido el
valor de compresión (en el caso
del gráfico 30, 20%), pulsamos
OK. y grabamos el archivo en
nuestra carpeta. Se puede
aumentar el grado de compresión Figura 30
y observar en el dibujo de la derecha cómo queda tras esa compresión

21

en relación al original, que está situado a la izquierda.

Una vez que hemos incorporado los gráficos, podemos fijar uno
que se moverá automáticamente hacia la posición correspondiente y
que servirá de ejemplo para el alumno. Finalizada la entrada de los
gráficos pasamos a grabarlo en su formato (en este caso, jmt ) y lo
exportamos para verlo en página Web.

De la misma forma que en el programa anterior, podemos pasar
a configurar el formato de salida (esta operación se puede realizar
también al principio, siempre que primero grabemos el archivo en
formato HP).
El resultado final es el siguiente:

Figura 31

Y el resultado en html en su dos versiones (fig. 32 y 33)

Figura 32 Figura 33

22


La exportación final la podemos realizar en formato estándar o
en formato “drag and drop”. Para la primera los gráficos deben ir
obligatoriamente en la columna de la izquierda. Para la variante
segunda es indiferente. Para la configuración “drag and drop” es
conveniente tener en cuenta las configuraciones de pantalla más
frecuentes (800x600 y 1024x768) y que, por tanto, el número de ítems
debería reducirse a cinco. A continuación observe el video 3 (jmatch
completo).

23

4.3. JQuiz, como decíamos más arriba, permite la elaboración de
cuestionarios de diversos tipos:

a. Respuesta múltiple.
b. Respuestas cortas.
c. Mixtos o híbridos (respuesta corta en primer lugar, si no
acierta se convierte en múltiple.
d. Multiselección. El alumno tiene que seleccionar varias
respuestas de un conjunto de posibilidades.

Comparado con los dos programas anteriores éste es quizás un
poco más complicado puesto que ofrece más posibilidades que los
anteriores. En principio debemos decir que existen dos modos:
Principiante y avanzado.

Figura 34
Los ejercicios que vamos a elaborar se referirán, en principio, al
modo principiante (más adelante explicaremos en qué consiste el
modo avanzado).

a. Respuesta múltiple. Vamos a elaborar un sencillo test para
identificar a un personaje histórico. Preguntaremos por el nombre de
Ernesto Che Guevara (el alumno tiene que identificar por medio de
una fotografía y escoger el nombre de entre cuatro que se ofrecen.
Observaremos la pantalla siguiente:

24


Figura 35
En la parte superior podemos observar el título; en la siguiente
línea, la pregunta y la imagen de “Ernesto Guevara”, que hemos
insertado como en ejercicios anteriores, y las posibles respuestas,
marcando a la derecha la correcta. Además hemos marcado una serie
de “Indicaciones” que pueden resultar explicativas para el alumno. El
alumno marca respuestas hasta que hace clic sobre la correcta; a cada
error se le restan puntos pero si escoge la opción correcta puede
seguir marcando ítems para conseguir el “feedback” que hemos
introducido. Éste es, como se observa en la parte superior derecha, un
ejercicio de respuesta múltiple. En el apartado de configuración
observamos que es muy interesante el apartado “Otro” (los demás son
similares a los mencionados más arriba). En este apartado
encontramos varias posibilidades que hacen interesante el ejercicio
cuando se utiliza más de una vez.(figura 36)

Figura 36
25

La posibilidad de barajar las preguntas y respuestas hace que
los alumnos no memoricen el lugar donde se ha colocado la pregunta y
la respuesta cuando vuelven a realizar los ejercicios. También
observamos si vamos a diferenciar entre mayúsculas y minúsculas y el
número de intentos (para las respuestas híbridas) tras los cuales se
convertirá en múltiple. Así es el resultado html del ejercicio presentado
(fig. 37)

Figura 37
b. Para esta modalidad utilizaremos el mismo ejercicio que ya
hemos realizado para respuesta múltiple. La única
diferencia es que tenemos que marcar a la derecha
“Respuestas Cortas”.(figura 38). Podemos utilizar la
misma configuración que en el ejercicio anterior y
añadir la distinción entre mayúsculas y minúsculas al
Figura 38 tratarse de un nombre propio. Como en ejercicios
anteriores si se pulsa sobre el
botón Pista o Hint se pierden
puntos y también tiene la opción
de ver la respuesta si no se
sabe.

Figura 39

26

c. Ejercicios Mixtos o Híbridos. Este tipo de ejercicios mezclan la
“Respuesta Corta” y la “Respuesta Múltiple. Al alcanzar un número de
intentos –como se ha mencionado anteriormente, ver figura 35- el
ejercicio pasa automáticamente a ser de respuesta múltiple. En las
opciones de configuración aparece –incluir en opciones M/C- esto
indica que cuando pasa a respuesta múltiple solo aparecerán los que
estén marcados.
En las figuras 39 y 40 podemos observar las dos opciones con el
ejercicio sobre un club de fútbol que pueden encontrar en el CD.

Figura 40 Figura 41

d. Multiselección. Este tipo de ejercicios es similar al de elección
múltiple sólo que en este caso no hay una sola respuesta válida sino
que pueden ser varias. Vamos a realizar un sencillo ejercicio sobre la
Ciudad de Ceuta. El archivo “jquiz_multiseleccion_ceuta.jqz” se
encuentra en el CD. En lugar de introducir en el apartado respuestas
frases o palabras, hemos introducido las fotografías que aparecerán en
el ejercicio. Tres corresponden a Ceuta y una a Madrid. Se marcan
entonces las que son correctas y se escriben indicaciones (si las
consideramos necesarias). El resultado final es un vistoso ejercicio que
puede ser muy interesante en todos los niveles de educación primaria.

27


Figura 21

El modo avanzado permite, básicamente, la personalización de
los ejercicios en función de las respuestas.
En primer lugar, el profesor puede dar más valor a unas
preguntas que a otras o, incluso, más valor a unas
respuestas que a otras (en el caso de elección múltiple,
por ejemplo) como se puede observar en la figura 42.
Es decir de las respuestas que se pueden dar en un
ejercicio, algunas pueden tener un porcentaje menor
del 100% sin ser incorrectas (siempre deberá haber
una correcta). Además está la opción de considerar
como correcta aunque el porcentaje no sea el máximo.
Observar video 4 en relación a este tipo de ejercicio.
(jquiz, multiselección)

Figura 42

28


29

4.4. JCross.
Parte de Hot Potatoes que permite la realización de
Crucigramas. Se pudiera pensar que por tratarse de una tarea escrita
no es recomendable en los primeros niveles, sin embargo, pensamos
que con el uso de fotos o dibujos evitamos esas definiciones que nos
podrían hacer que no utilizáramos esta atractiva herramienta en
nuestros centros. Además, la simplicidad del programa con el que nos
encontramos nos permite realizar las cuadrículas automáticamente y
crear un crucigrama en un instante. Vamos a realizar un crucigrama en
el cual el alumno tiene que adivinar el animal que tiene de pista. Para
ello vamos a utilizar la carpeta “Animals” que contiene una serie de
cliparts para el ejercicio.

Comenzaremos, como siempre, en Archivo y Nuevo.
Observemos la pantalla principal del Programa (fig. 43):

Figura 43
Figura 44
Pulsamos sobre “Organizar
A continuación introducimos las
cuadrícula” y ejecutaremos palabras (una palabra por línea).
Podemos ajustar el máximo de la
“automáticamente”.
cuadrícula (por defecto 20).

30

Una vez introducidas las palabras, grabamos el archivo Jcross;
a continuación seleccionamos “Añadir Pistas”, aparecerá entonces el
siguiente menú (figura 44):

Figura 45
En el Menú “insertar” iremos cargando las imágenes de la
carpeta “Animals” del CD y haciendo clic en OK para cada una de las
selecciones. Grabamos el ejercicio en formato JCross y lo exportamos
a formato html. El resultado lo vemos en la figura 46.

Figura 46

Las posibilidades de configuración del archivo de salida son
similares a las que hemos analizado en programas anteriores.
Observe el video 5 para la creación de un ejercicio sobre este
programa.
31


4.4. JMix. Como se decía más arriba, esta parte de HP permite la
realización de ejercicios para ordenar letras o palabras
desordenadas. Vamos a realizar dos sencillos ejercicios: uno en
el que el alumno tiene que construir la palabra “autumn” con un
32

dibujo como pista y otro en el que el alumno tiene que ordenar
toda una frase. En la figura 47 observamos cómo a la izquierda
introducimos las letras una en cada fila. Arriba hemos
introducido la fotografía. En algún caso podría haber palabras o
frases alternativas que se incluirían a la derecha.

Figura 47

El resultado final, una vez grabado el archivo en formato JMix,
dependerá de si optamos, como en ejercicios anteriores, por la
configuración “drag and drop” (figura 48) o la configuración “estándar”
(figura 49)

Figura 48

33

El alumno coge las letras una a una, las sube hasta la primera línea y
las suelta.

Figura 49
El alumno, en este caso, hace clic sobre las letras y estas se colocan
automáticamente sobre la línea.

5. Objetos multimedia en HP.
a. Una de las ventajas que acompañan a Hot Potatoes es la
posibilidad de incrustar objetos multimedia en sus programas.
Podemos insertar archivos en formato avi, mp3,… e, incluso,
archivos flash, que proporcionan una interactividad enorme en
todas las áreas. Para ejemplificar esta opción de HP vamos a
utilizar el archivo “terremotos.swf” que se encuentra en la
carpeta “source” del CD. Vamos a utilizar el programa Jquiz y,
además vamos a encadenar un par de ejercicios.
En primer lugar, abrimos el programa
Jquiz, titulamos el ejercicio, ponemos las
preguntas –como lo habíamos realizado
anteriormente- y lo grabamos en formato Jquiz.
A continuación
Figura 50

34

abrimos el menú “Insertar” y escogemos “Objeto Multimedia”.
Aparecerá entonces el siguiente menú:

Figura 51
En primer lugar debemos localizar dónde tenemos
grabado el archivo terremotos; Tenemos que grabar el archivo
html, el archivo Jquiz y el archivo terremotos.swf en la misma
carpeta. A continuación podemos elegir la anchura y la altura
(ésta dependerá del archivo que estemos utilizando y de la
página web generada); una anchura de 800x400 es suficiente
en este caso. En casos con archivos de sonido no es tan
importante como con el video. Como se trata de un archivo
“flash” marcaremos sobre “Añadir Flash Player”. Se puede
incluir un enlace y un texto alternativo. El resultado final se
puede observar en la figura 52 (sin movimiento).

35


Figura 52

De la misma forma que hemos introducido un archivo flash
podemos incluir cualquier formato de video (formatos avi, mpg, …) o
archivos de sonido (mp3, midi, wav, …) que se vienen utilizando en
Internet

b. Tablas en HP.

Desde el menú “insertar” → “Tabla html” (aparecerá la figura 53)

Figura 53
En esta figura podemos apreciar que es posible seleccionar el
número de filas y columnas, si la tabla va a tener borde, es decir, si va
a ser visible, o si solamente hemos utilizado esta herramienta para

36

poder presentar los elementos de forma más ordenada; en este caso,
sin borde (borde “0”).Además podemos fijar el ancho de la tabla.
Es importante tener presente que esta configuración dará lugar
a la siguiente pantalla (véase figura 54):

Figura 54

En este caso hemos hecho una tabla con dos filas y dos
columnas con un borde bastante visible (3) y un espacio pequeño tanto
entre celdas como ente el contenido y el borde de la celda. La
inserción de palabras o gráficos se realizará entre <td> y </td>. El
comando <tbody> indica el comienzo del contenido de la tabla y
</tbody el final. Al igual que <table> nos muestra el comienzo de la
tabla y </table> el final. La figura 55 nos muestra el archivo html
generado:

37


Figura 55

38

6. Mi primera página Web para Hot Potatoes con Dreamweaver.

Dreamweaver es un potente programa que permite la
realización, desde una sencilla página Web, hasta un sitio completo y,
además, colgarlo en Internet. Sin necesidad de tener conocimientos
html, vamos a realizar una página que nos servirá de inicio o de página
de contenido para, tras haber realizado una serie de páginas
encadenadas con HP, servir de enlace a la primera de ellas.

Para ello vamos a analizar como HP encadena páginas e
introduciremos una serie de botones de navegación para que las
páginas resulten más fáciles de usar (los botones de navegación se
pueden descargar de la dirección de Internet:
http://www.ugr.es/~juliotor/cpr/curso.htm ).

HP incorpora en el menú “Opciones”, “Configurar el formato de
archivo originado”, en este submenú “Botones” (figura 6:1):

6: 1
39

En este submenú podemos incluir texto o imágenes (los botones
descargados desde Internet o los que podemos realizar nosotros
mismos). Además observamos la opción: “URL del siguiente ejercicio”
que incluye el nombre de la siguiente página y la opción de buscarla. A
través de estos menús iremos enlazando páginas incluyendo una
dirección a la página de inicio que vamos a llamar “inicio.htm”.

Para enlazar todas estas páginas es muy útil que hayamos
guardado todas (incluyendo los archivos HP de datos) en una misma
carpeta, de tal manera que nos resulte más rápido y sencillo el proceso
de unión de todas ellas.

6: 2
Seleccionaremos la opción para incluir los botones del siguiente
ejercicio y de la página de contenidos, así como la opción de enlace
con el ejercicio anterior. Una vez seleccionado haremos clic sobre el
botón buscar y elegiremos el archivo que queremos que siga al que
estamos formateando, después enlazaremos a la página de contenido
(inicio.htm). Una vez realizados estos pasos y hayamos terminado de
configurar el archivo html, guardaremos el ejercicio en formato HP
40

para, después, grabarlo en formato html. Repetiremos estos pasos con
todos y cada uno de los ejercicios que queremos que pertenezcan a un
mismo grupo.
Puede que tengamos dificultades con los enlaces a gráficos con
ejercicios antiguos. Para ello lo único que debemos hacer es repetir los
enlaces a los archivos gráficos que deberán estar en la ruta nueva.

Una vez encadenados todos estos ejercicios vamos a crear el
fichero “inicio.htm” que hemos mencionado más arriba con la ayuda de
Dreamweaver. En primer lugar vamos a crear el sitio web que servirá
de base a todos nuestros ejercicios. Éste coincidirá con la carpeta
donde hemos archivado todos los ejercicios (en formato HP y html).
Ejecutamos Dreamweaver y pulsamos sobre el menú “Site”,
“New Site”.

6: 3
Daremos nombre al “Sitio” (en nuestro caso puede ser Hot
Potatoes). La carpeta del archivo raíz será aquella en la que hemos
grabado los archivos en los dos formatos (HP y html). Una vez
41

realizado, podemos incluir la carpeta donde grabamos las imágenes, e
incluso la dirección Internet (si fuésemos a colgarlas en Internet). Si
vamos a utilizar un servido “ftp”7 pulsaríamos sobre el menú derecho
(véase figura 6:3) “Remote Info”; aparecerá la figura 6:4.

6: 4

En esta pantalla debemos dar la información que, normalmente,
nos proporciona nuestro ISP8. La información que aparece en pantalla
es la que proporciona a sus profesores la Universidad de Granada: el
host (anfitrión) ftp es : ftp.ugr.es (para Telefonica es ftp.telefonica.net),
a continuación introducimos nuestro identificador (en mi caso “juliotor”)
y nuestra contraseña. De esta manera cuando subamos los archivos a
Internet se actualizarán los enlaces automáticamente con la
información que le hemos proporcionado anteriormente.

Éste es el primer paso para la mínima configuración de
Dreamweaver que nos permite realizar una página web y poder

7
File Transfer Protocol (Protocolo de transferencia de ficheros) ver apartado c.
8
ISP o Internet Service Provider. La empresa que nos da servicio de Internet
(Telefónica, Terra, Vadafone, …)
42

enlazar a los archivos que hemos realizado en HP. Además, si nos
interesa poder crear nuestra página personal éste puede ser un
interesante primer paso.

Realizada la operación de configuración descrita anteriormente
pasamos a la realización de nuestra primera página web.
Seleccionamos “Archivo” → Nuevo y Página básica → html. (figura
6:5)

6: 5

El fichero generado será una página en blanco (en teoría) donde
podemos incluir gráficos, textos, tablas,…. Vamos a darle un título a la
página, por ejemplo: “Ejercicios Hot Potatoes”. Tras ello vamos a
introducir un gráfico que haga referencia al tema de los ejercicios que
vamos a encadenar y escribimos el texto que queremos que el alumno
pulse, que nos llevará al primer ejercicio, por ejemplo, “Ejercicios de
Hot Potatoes” (figura 6:6). Una vez seleccionado, hacemos clic sobre
el botón derecho de ratón y aparecerá el menú de la figura 6:6.
Presionar sobre “Make link” (hacer enlace) y nos dirigirá a la pantalla
que nos muestra los archivos que hemos generado, finalmente
elegimos el primero de los archivos html que hemos grabado para
enlazar.
43


6: 6

La imagen de referencia (6:7) nos muestra el nombre de la carpeta
(Buscar en) y el archivo que, en mi caso, yo he seleccionado
(animals.htm).

6: 7
Una vez seleccionado pulsamos sobre OK y el enlace ha quedado
efectuado a nuestra primera página, que da enlace a las demás
páginas realizadas con HP.
Concluido este paso, grabamos el archivo como “inicio” (no es
necesario decirle la extensión htm ya que el propio programa se
encarga de asignársela) en la carpeta donde están grabados todos
44

nuestros archivos. Nuestra primera página web se visualizará así (fig.
6:8):

6: 8
b. “The Masher”.
El programa que incorpora HP es, como hemos dicho más
arriba, de uso limitado –hay que registrarse, pago de unos 90 euros,
para obtener una funcionalidad completa−. Sin embargo tenemos la
posibilidad de probar su funcionamiento, limitado a tres ejercicios.

Al ejecutar el programa, la pantalla de inicio (figura 6b:9) nos
muestra los ficheros que queremos añadir a la unidad (abajo) y otras
posibilidades, similares a las que ya hemos analizado en los otros
programas HP.

6: 9

45

Es importante observar la carpeta en la que se grabarán los archivos
originados mediante el uso de “The Masher”. Mediante la carpeta
“Índice” (fig. 6:10)

6: 10
daremos título a la Unidad y al archivo html generado mediante el uso
de “The Masher”. Es ése el archivo que utilizaremos para comenzar la
unidad y que enlazará con los demás ejercicios o actividades.

El menú aspecto no difiere mucho de los demás archivos
originados mediante HP (fig. 6:11)

6: 11

46

Como en los demás archivos HP podemos seleccionar un
gráficos de fondo, el color del ejercicio, de la fuente,… y, además, si
queremos seguir con la configuración de “The Masher” o preferimos la
configuración del archivo que habíamos generado inicialmente.
El apartado “botones”, similar también, permite la inclusión de
gráficos en lugar de palabras.

En la figura siguiente (6:12) podemos observar el archivo
inicio.htm generado por el programa “The Masher”

6: 12
Podemos observar que ha incluido el nombre del archivo y el
gráfico que se ha introducido en el título.

Si queremos subir las páginas a Internet tenemos que actualizar
los enlaces a nuestros archivos gráficos, multimedia, etc. (que hemos,
hasta ahora, realizado a un archivo local) a la carpeta que ocuparán
los mismos en nuestra dirección web. Este proceso se puede realizar

47

durante la elaboración de los ejercicios en HP o, mejor, editar la página
web generada, tras la realización del ejercicio HP, en Dreamweaver,
por ejemplo. El proceso se realiza de la siguiente manera:

i) Creamos las carpetas que queremos que aparezcan en nuestro
sitio web. Podría ser:
• Hot_Potatoes
o Archivos
o Imágenes (no usar tilde)

Nuestra dirección para los ejercicios HP será (en mi caso)

6: 13

ii) Abrimos el archivo que queremos editar.
iii) Seleccionamos la imagen que queremos editar, doble clic sobre
la misma, seleccionamos dirección, dentro de nuestra carpeta
de imágenes y grabamos el archivo.
iv) Dreamweaver ha actualizado los enlaces y está preparado para
que los subamos a nuestro servidor. (Página de ejemplo en:
http://www.ugr.es/local/juliotor/hot_potatoes/files/animals.htm.
Esta operación se puede realizar directamente desde
Dreamweaver o utilizando un programa ftp.

48

c) Introducción a Cuteftp.

i) Introducción. FTP es el protocolo utilizado para copiar
archivos entre ordenadores, generalmente desde un servidor
o hacia él. Necesita un programa específico (Cuteftp, es uno
de los más conocidos, disponible versión shareware en:
http://www.cuteftp.com/downloads/cuteftp.asp ) La
importancia de estos programas radica en que son
indispensables para poder “subir” archivos al servidor
(mandar archivos desde nuestro ordenador personal hasta el
servidor, en mi caso “ftp.ugr.es” de la Universidad de
Granada). Además, este tipo de conexión facilita
enormemente el trabajo con ficheros (de cualquier tipo) y su
uso por parte de un grupo de usuarios.

ii) Configuración. La configuración del programa (Cute ftp, o
WSftp …) requiere rellenar una serie de campos: La
dirección FTP del servidor (ftp.ugr.es, se observa que la
dirección está separada por puntos y no comienza por http9),
en nuestro caso, como se ha mencionado más arriba,
ftp.ugr.es (también puede ser una serie de números,
150.214.20.3 que es el número equivalente a ftp.ugr.es , por
ejemplo). El nombre que tiene asignado el usuario, en mi
caso, juliotor y, por último el puerto de conexión, que suele
ser el 21. Con estos datos, y su contraseña, si no es
anónimo, cualquier programa le permitirá conectarse a su
servidor FTP (fig. 6:14)

9
http: “Hyper Text Transfer Protocol o Protocolo de Transferencia de hipertexto.
Aplicación que permite enviar ficheros y datos (imágenes, multimedia, …)
49


6: 14

El aspecto que presenta es diferente al de un navegador (figura
6:15).

6: 15
Los ficheros que aparecen en la ventana de la izquierda son los
archivos locales, es decir, los del ordenador personal. Los que
aparecen a la derecha son los archivos o directorios del ordenador
remoto, es decir, del ordenador del servidor. Se pueden pasar archivos
desde el ordenador del usuario (ventana izquierda) al servidor
(derecha), o desde éste al ordenador personal. Se puede arrastrar y
soltar en el lugar que queramos.
50

iii) Uso. La ventaja que presenta este tipo de programas reside
en que muchos usuarios pueden compartir ficheros (gráficos,
fotografías, ficheros de texto, aplicaciones, … ) en cualquier
momento, bien “uploading” es decir enviando al servidor
ficheros o “downloading”, descargando ficheros del Servidor,
todo ello mediante acceso restringido a las personas que
posean un ID (identificador) y Password (contraseña de
acceso). Este es un método que ya pusimos en
funcionamiento en el CPR de Ceuta para el inicio de una
base de datos educativos que permita a los profesores
intercambiar ficheros para su uso en las aulas. Otra base de
datos se está creando en la Facultad de Ecuación y
Humanidades para evitar el uso del servidor de la
Universidad que proporciona un espacio limitado y poder
ampliar el número de documentos digitales a los que los
alumnos pueden acceder. Además, también nos
convertiremos en voluntarios del programa Gutenberg
(http://promo.net/pg/), sirviendo de “mirror” (lugar donde
están almacenados ficheros que pertenecen a otra
organización y que, por cuestiones de distancia, permiten un
acceso más rápido), para un total de más de seis mil textos
que están disponibles libremente en Internet.

51

Suplemento: Hot Potatoes Adds-on.

Podemos encontrar una serie de ficheros que amplían las
posibilidades del programa. Michael Rottmeier en sus páginas de
Internet (http://www.teaching-tools.de.vu) nos da acceso a la descarga
de una serie de “Adds-on” (archivos fuente, de HP, modificados) que,
en algunos casos, nos permiten la creación de archivos HP
completamente diferentes.
En las páginas antes mencionadas, encontramos archivos para
las algunos de los programas HP: JMatch, JCloze y JQuiz y otros
scripts para otras versiones de HP (versión 5, por ejemplo).

Entre los diferentes programas de HP no hemos encontrado
ninguno que permita “juego de concentración”. Dado que puede
resultar muy útil en los primeros niveles vamos a descargar los
ficheros y la documentación necesaria de JMemory:

i) Fichero con archivos fuente (se encuentra en formato zip).
ii) Fichero de documentación o ayuda (formato pdf).

Una vez descargados, procedemos a la descompresión del
archivo zip, éste nos originará cuatro archivos (creamos una carpeta
JMemory y pasamos a ella los archivos JMatch6.ht_ y
djmatch6.ht_(puesto que estamos utilizando la versión 6 de HP).

Ahora ejecutaremos HP y elegiremos JMatch. Podemos crear
una actividad que asocia palabra-palabra, palabra-gráfico o gráfico-
gráfico. Una vez creado y configurado como hemos realizado con

52

anteriores programas de HP, pasaremos a la fase de grabación, que
difiere de los otros programas de HP.

i) Para grabar el archivo en formato HP, presionamos,
conjuntamente, las teclas Shift (mayúsculas) + ctrl+ Alt + s y
aparecerá la pantalla siguiente (fig. 6:16):
En esta pantalla elegimos la carpeta
jmemory que hemos creado y
archivamos el fichero en formato
.jmt.

6: 16

ii) Grabar el archivo en formato html. Si se han utilizado imágenes
se debe grabar el archivo con la combinación de teclas
(conjuntamente) ctrl. (control) +F6.

iii) Una vez que hemos terminado el ejercicio es muy importante
pulsar sobre la siguiente combinación de teclas: “Shift + ctrl. +
Alt + T” para que el archivo de configuración que obtengamos la
próxima vez que arranquemos JMatch sea el original (el anterior
al que hemos introducido para JMemory), de lo contrario
siempre que ejecutemos JMatch produciremos un ejercicio
JMemory.

53

De la misma manera que hemos procedido para con JMemory
podemos continuar con los restantes Adds-on de las páginas antes
mencionadas.

Referencias
i) Páginas Web:
a. http://www.halfbakedsoftware.com
b. http://www.jasc.com/
c. http://www.macromedia.com
d. http://www.webct.com/
e. http://www.cuteftp.com/downloads/cuteftp.asp
f. http://promo.net/pg/
g. http://www.teaching-tools.de.vu
h. http://www.ugr.es/local/juliotor

ii) Programas utilizados.
a. Hot Potatoes.
b. Paint Shop Pro versión 9.
c. Dreamweaver MX 2004.
d. Cuteftp Home.
e. Microsoft Windows XP.
f. Microsoft Word.
g. Microsoft Power Point.
h. Cliparts gratuitas de diversas direcciones web.
i. Scripts de Michael Rottmeier.

54

Hot Potatoes 2006 2

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Similar a Hot Potatoes 2006 2

Similar a Hot Potatoes 2006 2 (20)

Último

Último (20)

Hot Potatoes 2006 2