Capítulo 2. Elaboración de un ejercicio
2.2 Contenido
2.2.1 Introducción de datos

- desarrollamos los contenidos -

[nota diseño: este apartado 2.2.1 es muy largo; hay que hacer páginas distintas para cada subapartado, unidas con enlaces anterior y siguiente]

En cualquiera de las "patatas" de Hot Potatoes se introduce el mismo tipo de datos:

1. El título y el contenido del ejercicio: preguntas y respuestas, frases o imágenes, textos...
   
   
   Se hace desde la pantalla inicial de cada una de ellas [nota diseño: ver si se puede poner aquí una animación en la que vayan apareciendo y desapareciendo sucesivamente las pantallas de cada patata]
   
   
2. Los datos que complementan al contenido y configuran la apariencia general del ejercicio: subtítulo, indicaciones, formatos, botones de navegación...
   
   Se hace principalmente desde la configuración, que se encuentra en "Opciones/Configurar el formato del archivo originado"
   [nota diseño: ver si se puede poner aquí una animación en la que vayan destacando una a una y sucesivamente las pestañas de "Archivo de Configuración", es decir, lo que aparece en "Opciones/Configurar el formato del archivo originado"]
   

3. Otros datos complementarios, como la inserción de hipermedia (imagen, sonido o vídeo) y de otros elementos: una lectura, metadatos, un archivo, una tabla html, vínculos.
   
   Se realiza desde los menús superiores de la interface común.
   [nota diseño: ver si se puede poner aquí una animación en la que vayan destacando uno a uno y sucesivamente estos datos, que están en: "Archivo" (lectura, metadatos) en "Insertar" (vínculos, imagen, objetos multimedia, tablas)]

a. Título

Una vez iniciado Hot Potatoes y abierto por cualquiera de las "patatas", nos encontramos con su pantalla característica y una página en blanco con espacios para rellenar.

Es ahí donde empezamos a escribir los primeros datos del ejercicio: el título en primer lugar, y si quieres algo más.

Dale un nombre cualquiera a este ejercicio y guárdalo en una carpeta que hayas creado previamente.

Nosotros, por nuestra parte, también hemos abierto una "patata" al azar y hemos escrito el título (en la pantalla principal) y el subtítulo (desde "Opciones/configurar el formato...").

La hemos guardado con el nombre de "e20prev", por lo que se llama "e20prev.jmx".

Este ejercicio, una vez exportado a web, es decir, una vez interpretado su código *.html, se ha materializado en este: e20prev.htm

Después de introducir el título y el subtítulo en la "patata" que te propusimos, JMix, y en la que tú elegiste, vamos a hacerlo también en las demás.

Seguimos investigando.

Ah, por cierto, y volviendo un momento a la Actividad formativa 1, nosotros ya hemos añadido al ejercicio "e20prev" eso tan esencial que le faltaba. Por si quieres verlo, es este ejercicio "e20"

b. Contenido

Ahora ya podemos empezar a rellenar las plantillas con los datos que constituyen el ejercicio.

Nosotros hemos abierto tres de las "patatas" al azar, hemos introducido o modificado algún dato más y hemos guardado los tres ejercicios con los nombres de:

• "e21" con la extensión *.jqz
• "e22" con la extensión *.jmt
• "e23" con la extensión *.jcw

En estos ejercicios hemos sustituido el título del ejercicio para no facilitaros la pista del nombre de la patata, aunque seguro que ya lo adivináis, y hemos incluido algún dato en uno de ellos porque si no no nos permitía generarlo como página html.

¿Quieres saber el aspecto definitivo que tendrían estos tres ejercicios una vez convertidos en páginas web? Serían estos, respectivamente:

• e21
• e22
• e23

Tres ejercicios muy sencillos con título, alguno también con subtítulo, y los primeros datos. Los botones no los hemos tocado.

¿Has sabido? ¿Es fácil contestar un ejercicio hecho con Hot Potatoes? Sí... en teoría: cuando los ejercicios están bien hechos, claro.

El problema es que, la verdad, no los hemos hecho demasiado bien; nos hemos equivocado en las respuestas. Disculpa.

Si no te habías dado cuenta, vuelve a ellos ahora.

Estamos aprendiendo en este momento a introducir introducir nuevos datos en nuestros ejercicios: los que constituyen el contenido mismo.

Lo hemos visto ya en tres "patatas". Es el momento, por tanto, de completarlo con las demás patatas.

c. Datos de configuración

Los datos de configuración son los datos principales para dar un formato al archivo que estás creando.

Hay dos formas de acceder a esos datos, es decir, a la información relativa a la configuración de los ejercicios:

• desde el icono correspondiente en la barra de herramientas:

• o desde la pestaña "Opciones/Configurar el formato del archivo originado":

Cualquiera de estos dos caminos llevarán al mismo destino.

Los datos más relevantes que constituyen la configuración de los ejercicios son:

[nota diseño: ver la manera de convertir esto entre (((( )))) en una animación o en imágenes de sustitución]

(((((((

Es decir:

• título, que ya hemos visto, e instrucciones para realizar el ejercicio: por ejemplo "contesta", "señala qué afirmaciones son verdaderas", "completa este crucigrama seleccionando el número y rellenando la casilla correspondiente", "relaciona los elementos de una columna con los de otra", "averigua qué falta en esta frase y complétala", etc.

• diversas indicaciones para las preguntas y respuestas: correcto o incorrecto, pistas de ayuda como "esta parte es correcta: ...", puntuación obtenida, etc.

• los botones de respuestas, de pistas y otros específicos de cada tipo de ejercicio: decidir cuáles queremos que sí aparezcan y qué van a decir: "pista" o "comprueba", etc.

• los botones de navegación: que te servirán para poder unir varios ejercicios y poder navegar entre ellos como en cualquier página web cuando enlazas varias páginas: "volver a inicio", "página siguiente", "página anterior"...

• los referidos al aspecto, al fondo y a la fuente: elegir un color o una imagen para el fondo, elegir el color y el tipo de letra, los colores del ejercicio, del vínculo, del título

• otro elementos:
  • contador: con el que puedes poner un límite de tiempo para la pesona que haga tu ejercicio
  • CGI: que se utiliza para poder enviar los resultados de los ejercicios por email
  • y otros, específicos de cada tipo de ejercicio

)))))

Todos estos datos se van introduciendo en las casillas correspondientes de cada ejercicio y al final se guardan.

Actividad formativa 5 Abre tus propios ejercicios, los que creaste antes, y prueba a introducir en ellos nuevos datos de configuración. Comprobarás que algunos se repiten en todos los ejercicios, mientras que otros no; por ejemplo, los mensajes de correcto e incorrecto, las indicaciones, los botones de respuesta, etc. varían un poco en cada tipo, en función de sus necesidades intrínsecas. El objetivo de esta actividad es simplemente echar un vistazo a los distintos tipos de configuración y sacar tus propias conclusiones al respecto. Y si puedes, introducir nuevos datos de configuración. Si te ha resultado muy difícil, no te preocupes: en el próximo capítulo 3 vamos a profundizar en cada tipo de ejercicio.

NOTA: para centrarnos un poco, recuerda que de momento sólo estamos viendo en qué consiste la configuración, es decir, qué tipo de datos se pueden introducir en los ejercicios, pero todavía no hemos empezado a guardarlos, a "guardar los formatos de los archivos".

Porque una cosa es pensar cuáles serán las instrucciones de un ejercicio en particular, de qué color queremos su fondo, o qué queremos que diga la leyenda de su botón de "correcto", por ejemplo, y otra cosa distinta es decidir que esos datos los queremos conservar para otros ejercicios, o sólo para este, o que en realidad no nos gusta nada la configuración que le hemos dado y no la queremos guardar.

Esto lo vamos a ver en el apartado 2.2.

Ahora, nos fijamos en otros datos y elementos complementarios que pueden incluirse en los ejercicios de Hot Potatoes.

 

---

 

d. Lectura

Actividad formativa 6 Antes de nada, mira este ejercicio con lectura insertada hecho con JCross, para que tengas una idea de cuál sería el resultado final. Sólo dos preguntas: ¿En qué parte del ejercicio la hemos insertado? ¿Y en qué parte hemos insertado la imagen?

 

Las lecturas se insertan desde “Archivo/Añadir lectura":

o en el icono de la barra de herramientas:

Una vez seleccionado aparece esta pantalla:

Vemos que tenemos estas opciones para introducir una lectura:

• o escribir un texto manualmente
• o copiando y pegando de un texto cualquiera: es lo que hicimos nosotros en el ejemplo de la actividad formativa 6, el ejercicio con lectura insertada
• o bien "Incluir texto de lectura", es decir, importar un texto cualquiera desde un archivo html externo que tengamos en el ordenador, como enlace, seleccionándolo después de "Examinar" las carpetas.
  
  Por ejemplo, para este último caso nosotros hemos elegido al azar uno de nuestros archivos para insertarlo como lectura. Hemos seguido los pasos anteriores; y después, al seleccionarlo y abrirlo vemos que en el lugar del ejercicio donde se supone insertado aparecen unos códigos:

Son código html. Es sólo la apariencia temporal del ejercicio; cuando lo conviertas en una página web real, esto ya no aparecerá así, como vas a poder comprobar.

Para terminar el proceso, sólo tienes que aceptar en "Ok", en la parte inferior.

• ¿Dónde se pueden insertar? En cualquier parte del ejercicio

• ¿Cómo se incluyen? Desde "Insertar/Vínculo"
  
  
• ¿A qué? A:
  
  
  • un archivo local, es decir, que está en tu ordenador
    
    Para ello hay que hacer clic en "Insertar/Vínculo/Vínculo a un archivo local". Una vez hecho esto hay que seleccionar el archivo que nos interese, al que se irá al pinchar en el enlace:

Al seleccionar "Open" o "Abrir", aparece esta página:

En ella comprobamos que la ruta URL es relativa, escribimos el texto que queramos que aparezca, en el que haremos clic, y seleccionamos si queremos una imagen que también nos servirá como enlace.

Finalmente aceptamos en "OK".

• una dirección de Internet: el proceso es el mismo que el anterior
  
  
• una dirección de correo electrónico:
  
  Para esto debes insertar la siguiente etiqueta:
  
  <A HREF="mailto:tudirección@decorreo">mensaje de texto</A>

donde "mensaje de texto" es, por ejemplo: "contactar" o "envía tu correo", etc.

Al pulsar, se abrirá el programa de correo electrónico instalado en el ordenador en que estás trabajando.

..........

Finalmente, no olvides que cada tipo de ejercicio tiene sus peculiaridades y que la descripción que acabamos de hacer es general para todos ellos pero que no vas a encontrar en ellos lo mismo y del mismo modo; esto será algo que irás descubriendo en el próximo capítulo 3.

g. Multimedia: imágenes y otros elementos

Desde el menú "Insertar" o desde los iconos de acceso directo puedes incluir:

• imágenes
• lo que el programa llama "Objeto multimedia": archivos de sonido y vídeo
• tablas html

En el capítulo 3 trabajaremos con estos elementos, por lo que ahora vamos solamente a dar unas pautas generales. Y más adelante también tendremos ocasión de consultar el Anexo llamado "Multimedia", como complemento y refuerzo a este tema y en paralelo con la elaboración de ejercicios.

NOTA: Insistimos en la necesidad de que organices tus carpetas y tus ejercicios de modo coherente antes de empezar los ejercicios, para evitar luego confusiones.

Un ejemplo de organización algo caótica podría ser este:

En donde se mezclan:

[nota diseño: hay 4 imágenes de sustitución; pero la 1ª y la 2ª hay que hacerlas mejor porque no terminan de coincidir, no son del mismo tamaño. Ver si se pueden hacer más pequeñas, de modo que se puedan ver mejor todas sin mover tanto el cursor]

• archivos generados con Hot Potatoes:

• documentos html generados al exportar a web tus ejercicios:

• archivos gráficos:

• o archivos de sonido:

¿Cómo prefieres organizarlas?

Un ejemplo de buena organización previa a la elaboración de tus ejercicios de Hot Potatoes sería, por ejemplo, crear una carpeta llamada "nombre_de_tu_pagina", y dentro de ella estas carpetas:

[nota diseño: aquí creé una imagen interactiva pero los textos ALT no me aparecen al visualizarlo con el navegador Mozilla; sí con IExplorer. Comprobar]

En donde:

• "archivos_ fuente" se refiere a los archivos generados con las patatas
• "imagenes" son todas las imágenes incluidas en los ejercicios
• "paginas_web" son los documentos html una vez exportado el ejercicio a web
• "sonidos" son los sonidos incluidos en los ejercicios

Así, cualquier archivo que estuviera fuera de esa carpeta "nombre_de_tu_pagina" no podría aparecer en ella.

Debes tener esto en cuenta, especialmente, a la hora de insertar multimedia. Todos los multimedia de tus ejercicios deben estar, antes de insertarlos, dentro de carpetas creadas para ese fin, y dentro de la carpeta del ejercicio o página web, y ya no moverlos de ahí.

......................

Ahora iniciamos con las imágenes la explicación de la inserción del multimedia en los ejercicios de Hot Potatoes.

h. Imágenes
Los tres pasos previos, cuando quieres incluir una imagen, son:

Parece evidente pero no lo es tanto, porque la forma y las posibilidades de insertarlas varían en unos u otros casos.

Las imágenes se insertan así:

Guarda, por tanto, tu ejercicio. Después repite los pasos 1, 2 y 3.

A continuación vamos a elegir una imagen desde un archivo local.

En el siguiente cuadro tendrás que buscar la imagen que quieres, seleccionarla y después hacer clic en "Open" o "Abrir":

Después de seleccionarla aparece una nueva pantalla similar a esta:

De esta ventana vamos a destacar lo siguiente:

Cuando le des a "OK", habrá quedado insertada en el ejercicio y terminado el proceso.

Cuando se inserta un archivo multimedia por primera vez, llaman la atención los códigos raros que aparecen en el ejercicio, ¿no es así?

Este ejercicio, de ordenamiento de elementos en una frase, es el que hemos generado nosotros después de haber insertado la imagen seleccionada:

..............

A continuación vamos a elegir una imagen a través de una dirección web.

¿Cuál es el proceso para insertar una imagen desde una página web? Similar al que acabamos de describir, es decir: pasos 1, 2 y 3.

En el siguiente cuadro tendrás que seleccionar la imagen y darle los parámetros que quieras respecto al alineamiento, al tamaño, al nombre y a la dirección web http:// de referencia:

Y, para finalizar, seleccionar "Ok".

i. Sonido y vídeo

El proceso para la inserción de "Objetos multimedia" (sonidos y vídeos) es parecido al de ficheros gráficos.

Los cuatro pasos previos son:

Guarda, por tanto, tu ejercicio. Después repite los pasos 1 y 2. Verás que ahora sí te permite colocar el cursor en la casilla superior y seleccionar "Examinar" para buscar tu archivo. Nosotros ya lo hemos insertado:

Dentro de un rectángulo azul hemos enmarcado el signo que te permite reproducir el sonido para comprobar que es el que quieres.

Enmarcados por un rectángulo amarillo tienes los Reproductores multimedia que puedes seleccionar para escucharlo. Con las flechas azules de la derecha cambias el orden de preferencia una vez seleccionados.

Después de estas selecciones, sólo hay que decir "OK" y se termina el proceso.

El ejercicio que nos ha resultado a nosotros es este:

- ejercicio original de prueba de sonido -

en el que el usuario tiene que interactuar con el ejercicio para que comience a sonar. Por cierto, lo que nos ha salido no nos ha gustado nada porque aparece ahí la ruta donde está insertado y sólo queremos, sin embargo, que aparezca el nombre del sonido. Así que hemos vuelto a él y hemos hecho una pequeña modificación en la configuración al insertarlo, y el resultado ya nos ha gustado un poco más:

- ejercicio modificado de prueba de sonido -

................

Volviendo a nuestro ejercicio anterior, el ejercicio de prueba de sonido, estábamos pensando en si el sonido incluido aporta algún valor pedagógico al ejercicio. ¿Qué te parece?

Nosotros creemos que no, ni sirve como motivación ni forma parte del contenido de la pregunta en sí; en realidad, iría mejor como sonido de fondo que, además, se iniciara automáticamente, sin darle más importancia.

......

Has dos posibilidades de insertar un sonido como música de fondo:

j. Tablas

1º sitúa el cursor en el lugar donde quieres insertar la tabla HTML. Nosotros lo vamos a hacer en la pregunta 1 de un ejercicio de respuestas múltiples.

Después selecciona "Insertar/Taba HTML":

Una vez establecidos los parámetros:

y seleccionado "OK", el programa insertará el código HTML automáticamente; en este caso el resultado sería:

<table border="1" cellpadding="2" cellspacing="2" width="100%"><tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>

En donde:

• <table> quiere decir "tabla" y </table> "fin de tabla"
• <tr> quiere decir "fila" y </tr> "fin de fila"
• <td> quiere decir "celda" y </td> "fin de celda"

Aunque si miramos en el ejercicio sólo vemos esto:

Para verlo entero, y también para modificarlo después, tendrás que subir o bajar por las flechas de la derecha.

En esta tabla de 2x2 no hay datos: las celdas están vacías. Por eso no se verá nada cuando se exporte a web: ejercicio c27.

..........

¿Cómo se introducen los datos? A mano. En esta tabla, por ejemplo, los datos en marrón son los que hemos añadido nosotros en nuestro ejercicio:

<table border="1" cellpadding="2" cellspacing="2" width="100%"><tbody>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</tbody></table>

Mira el resultado.

Para poder introducir más datos en tu tabla, como por ejemplo color de fondo de las celdas, tipos de letra, etc., es necesario que sepas código HTML.