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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
•
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes 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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 (archivoguardar 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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la ense帽anza: Hot Potatoes
Figura 24
A continuaci贸n podemos observar el video 2, toda la secuencia de creaci贸n de un ejercicio basado en JCloze.
18 Julio Torrecillas Ram铆rez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseĂąanza: Hot Potatoes
29 Julio Torrecillas RamĂrez
Herramienta de autor para la enseñanza: Hot Potatoes
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
Pulsamos
sobre
“Organizar
Figura 44
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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
Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseĂąanza: Hot Potatoes
Figura 55
38 Julio Torrecillas RamĂrez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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. ISP o Internet Service Provider. La empresa que nos da servicio de Internet (Telefónica, Terra, Vadafone, …) 8
42 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseĂąanza: Hot Potatoes
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 Julio Torrecillas RamĂrez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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áficográfico. Una vez creado y configurado como hemos realizado con 52 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez
Herramienta de autor para la enseñanza: Hot Potatoes
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 Julio Torrecillas Ramírez