Cursos y Tutoriales

  • Increase font size
  • Default font size
  • Decrease font size
Inicio Hot Potatoes rápido y fácil 02.- Interfaz y Elementos Comunes en Hot Potatoes

02.- Interfaz y Elementos Comunes en Hot Potatoes

E-mail Imprimir PDF

Interfaz

La interfaz de Hot Potatoes es muy sencilla. Se compone de un menú con las opciones que puedes ver en la ilustración.

Interfaz Hot Potatoes

El menú Archivo sólo dispone de la opción Salir y no precisa mayor comentario. Tampoco necesita aclaraciones el menú Ayuda, salvo mencionar que está en inglés.

Potatoes facilita el acceso a cada una de las utilidades que componen la suite y que desarrollaremos en el siguiente capítulo. También pueden activarse desde la parte inferior de la interfaz o directamente desde el Menú de Inicio de Windows.

Opciones nos permiten configurar las Características del Proyecto (Project Settings), Mostrar Ayuda Emergente (Show tooltips) al pasar el cursor sobre cada una de las "patatas" de la parte inferior, Interfaz (para cargar un archivo de Interfaz, traducirlo o volver al Interfaz por defecto) o Actualizar Hot Potatoes (Update Hot Potatoes).

Proyecto

En la Gestión Integral del Proyecto podemos indicar la ubicación del Archivo de configuración y del Archivo de interfaz, pero si no lo tocamos no pasa nada. Podemos hacer los cambios desde cada una de las "patatas".

Show tooltips habilita/deshabilita los globos de ayuda que aparecen al parar el cursor del ratón sobre las "patatas de la parte inferior del interfaz.

Interfaz despliega un menú con las siguientes opciones:

  • Cargar un archivo de interfaz. Nos permite seleccionar una de las múltiples traducciones oficiales del interfaz de Hot Potatoes. El fichero para nuestro idioma es "espanol6.hif".
  • Traducir la interfaz. Nos presenta una ventana que nos facilita la tarea de traducir nosotros mismos la interfaz de la aplicación.
  • Volver a la interfaz por defecto. Se trata del interfaz en inglés.
Update Hot Potatoes se encarga de la actualización semiatuomática de la aplicación. Exactamente lo que hace es abrir una ventana del navegador con un texto indicativo de la versión de la aplicación que tenemos instalada y un enlace a la versión más actual. Si lo vemos necesario clicaremos en dicho enlace para descargarnos la última versión del programa e instalarlo en nuestro ordenador.

Elementos Comunes

Aunque cada una de las utilidades que componen la suite tiene sus particularidades, vamos a explicar en primer lugar los elementos que son comunes a todas ellas.

Archivo

Menú archivo

El primer grupo con cuatro opciones de este menú no precisa ninguna aclaración, pues su comportamiento es el mismo que en cualquier otra aplicación.

El siguiente grupo (3 opciones) sirven para añadir elementos a nuestra actividad: Una Lectura consiste en un texto y/o imagen de apoyo, la explicaremos en detalle al final del capítulo. Los Metadatos asocian información al documento como puede ser autor, descripción, etc. Se utilizan frecuentemente en el diseño de páginas Web. Es muy interesante la opción Añadir Archivo que nos insertar una actividad existente del mismo tipo que la tenemos abierta (sólo está disponible con jQuiz y jMatch) con lo que aumentaremos el número de preguntas de nuestro ejercicio.

En el grupo que sigue (5 opciones) aparece en primer lugar Crear página web que, dependiendo del tipo de actividad, ofrecerá distintas subopciones para adaptarse a diferentes características de los navegadores:

  • Para navegadores V6. Es la única opción de salida para la mayoría de las patatas.
  • Páginas Web de Tipo Arrastrar/Soltar. Disponible para jMix y jMatch. Permite contestar al ejercicio en base a arrastrar nuestra respuesta hasta su posición correcta.
  • Tarjetas Flash (Flashcard). Pueden usarse para que los estudiantes practiquen y memoricen los contenidos. Estos aparecen de forma secuencial y cíclica como si fueran tarjetas y el estudiante puede comprobar su respuesta de forma visual en el acto. Sólo funciona con jMatch.

Desde esta opción crearemos el fichero de la actividad que subiremos a la red o entregaremos a nuestro alumnado. Consistirá, básicamente, en un fichero HTM/HTML visualizable desde cualquier navegador que soporte JavaScript. Lo que nunca debemos entregar al alumnado es el fuente obtenido con las opciones de almacenamiento del grupo 1.

Create Zip Package nos prepara un archivo comprimido que contendrá: el archivo HTM del ejercicio, una copia de cada fichero de medios (imágenes y demás) vinculado al ejercicio y un archivo de código JavaScript si así se hubiera indicado en la configuración. Con este paquete se soluciona el problema de ejercicios con imágenes que no aparecen ya que se encontraban almacenadas localmente en nuestro disco duro. Lo único que tenemos que hacer es descomprimir el paquete ZIP en una carpeta y el ejercicio funcionará correctamente. Las opciones de creación de este tipo de paquete son las mismas que se han explicado en el punto anterior Crear página web.

No obstante la creación de un paquete Zip tiene algunas limitaciones por el momento. La más importante es que en algunos caso no copia los fichero de medio y otra carencia es que no copia los ficheros correspondiente a la opción Insertar archivo local que veremos más adelante.

Lo más cómodo es crear una carpeta en la que copiaremos todos los archivos de medio que vayamos a usar y que generemos en ella el fichero HTM de la actividad. Cuando vayamos a entregar el ejercicio copiaremos todo el contenido de dicha carpeta con excepción del fichero fuente que nunca debemos entregara nuestro alumnado.

Hot Potatoes también nos ofrece la posibilidad de crear nuestras actividades en formato compatible con SCORM 1.2, estándar en paquetes de objetos de aprendizaje reutilizables (Create SCORM 1.2 Package).

Exportar para imprimir nos facilita la copia de nuestro ejercicio a un procesador de textos desde el cual imprimirlo. Exportar a WebCT prepara un archivo adaptado a las características de la plataforma de aprendizaje WebCT.

Justo debajo podemos ver una relación de las actividades más recientes con las que hemos trabajado para facilitarnos volver a ellas con un sólo clic. Termina este menú con la consabida opción para abandonar el programa.

Edición

Las opciones de Edición son las normales en cualquier programa. En la mayoría de las utilidades se incluye la corrección ortográfica, siempre que tengamos instalado alguna versión de Microsoft Word. Esto es así porque Hot Potatoes no incluye su propio corrector ortográfico, lo que hace es llamar al de Word si está disponible.

Insertar

Menú InsertarEste menú es el mismo para todas las utilidades de la suite. Desde él podremos insertar una Imagen o un Vínculo, ya sea desde Internet o desde un archivo local. También podremos insertar una Tabla HTML o un Objeto Multimedia. Estas opciones funcionan siempre de la misma manera, independientemente del punto de la aplicación en las que aparezcan.

La inserción de una Tabla HTML crea la estructura de la misma, pero no la dota de contenido. En necesario tener unos conocimientos mínimos del lenguaje HTML para sacarle partido. Si te interesa aprender este lenguaje puedes encontrar muchos cursos en Internet. La WikiElearning es una fuente gratuita de cursos muy interesante y en ella puedes encontrar un completo Curso de HTML.

Si necesitamos que nuestra actividad incluya un fichero multimedia como pueden ser un archivo MP3 o una animación Flash, sólo hay que situar el cursor en el punto en el que queremos que apareazca nuestro fichero y pulsar Objeto Multimedia. Aparece una advertencia que -resumidamente- nos aclara que nuestro fichero multimedia deberá almacenarse en el mismo lugar en el que se encuentre el fichero HTM que genere nuestra actividad. Podemos obviar este detalle creando un Paquete Zip como vimos anteriormente o bien creando una carpeta para nuestra actividad en la que incluiremos todos los ficheros que sean precisos.

Insertar Objteo Multimedia
  1. Pulsamos el botón Buscar... para localizar en nuestro disco duro el archivo multimedia que deseamos insertar.
  2. Si pulsamos en el botón Play (triángulo verde) podremos reproducir directamente nuestro fichero multimedia.
  3. Indicamos unos valores de Anchura y Altura adecuados para la correcta visualización del archivo. Esto no siempre es necesario, por ejemplo en ficheros de audio.
  4. Añadimos el reproductor o reproductores que deseamos utilizar para visualizar nuestro fichero en orden de preferencia. En el ejemplo hemos incluído sólamente flash player.
  5. Para eliminar un reproductor de la lista de la derecha, sólo tendremos que seleccionarlo y pulsar el botón Quitar.
  6. Es muy recomendable dejar siempre marcada la casilla Incluir simplemente un enlace. De esta forma, en el caso que en el ordenador que reproduzcamos la actividad no hubiera instalado ninguno de los reproductores que hemos seleccionado, aparecería un enlace al fichero multimedia con el texto que hayamos indicado en Texto alternativo.

Podemos insertar una imagen fácilmente desde Internet o localmente desde nuestro disco duro. En internet podemos encontrar imágenes gratuitas y libres de royalties desde muchos sitios, por ejemplo Wikimedia Commons o Flickr que tiene un apartado de imágenes bajo licencia Creative Commons. También podemos subir nuestras propias fotografías a un hosting gratuito de imáges como se explica en este artículo. Una vez que tengamos la URL de la imagen que deseamos incluir pulsamos sobre Imagen desde Internet.

Imagen desde Internet

Las opciones de alineación de imagen son las mismas que puedes encontrar en un procesador de textos y determinan de qué manera fluirá el texto respecto a la imagen. Izquierda alinea la imagen a la izquierda y hace que el texto fluya por la derecha. Derecha hace justo lo contrario. Centro, como puedes imaginar, centra la imagen sin que el texto fluya a su alrededor y por último, Ninguna, deja la imagen a la izquierda sin que el texto fluya en torno suya.

Indicar una Anchura y Altura correctas es imprescindible para mantener la proporción. Podemos averiguar dichas medidas haciendo clic derecho sobre la imagen desde el navegador y seleccionando Propiedades. Utilizaremos entonces estas medidas u otras que nos interesen que mantengan la relación ancho/alto.

Texto alternativo hace referencia al texto que aparecerá en lugar de la imagen cuando el navegador no admita la visualización de estas.

Enlace URL es el campo más importante, ya que contiene la referencia  a la ubicación en Internet de la imagen que deseamos mostrar. El Título es irrelevante y no aparece en el ejercicio.

Una vez terminado pulsaremos el botón OK. Si tras esto necesitamos hacer algún cambio, a menos que sepamos HTML lo mejor es borrar la referencia completa a la imagen y empezar de nuevo.

Si optamos por insertar la Imagen desde un archivo local el proceso es más sencillo que en el caso anterior. Sólo tendremos que localizar la imagen en nuestro equipo desde un cuadro de diálogo estándar y completar algunos datos como se muestran a continuación.

Imagen desde archivo local Igual que en el caso anterior, la mejor opción de alineación es Ninguna. La Anchura y la Altura las captura automáticamente y podemos variarlas si nos interesa. El resto de las opciones son las mismas que en la inserción desde Internet. También las rellena de forma automática, aunque podemos variarlas con la excepción de URL link que hace referencia a la ubicación de la imagen en nuestro equipo.

Si deseamos cambiar la imagen pulsaremos sobre el botón Cargar, que nos permitirá sustituir la imagen seleccionada. Una vez que todo esté a nuestro gusto pulsaremos el botón OK.

También podemos insertar un vínculo a una Dirección de Internet o a un Archivo Local. En el primer caso el enlace mostrará una página Web y en el segundo permitirá al alumno visualizar (si tiene instalado el programa adecuado en su equipo) o descargarse (en cualquier caso) el documento que hayamos enlazado. En ambos casos se nos mostrará un sencillo cuadro de diálogo que tendremos que cumplimentar.

Vínculo dirección InternetLa Ruta URL es la dirección de la Web que deseamos enlazar es imprescindible ponerla completa, desde "http" hasta el final. Es muy importante que marquemos la casilla Abrir este archivo en una ventana nueva (para mantener el ejercicio). Si no lo hacemos así, cuando el usuario pulse el enlace saldrá del ejercicio y quizá no sepa volver.

Por defecto el Texto de enlace (aquel sobre el que el usuario pulsará para acceder a la web) es "Haga clic aquí". Si no nos convence podemos cambiarlo por otro más adecuado.

Podemos acompañar (no es obligatorio) al enlace de una imagen pulsando el botón del mismo nombre. Ésta tendrá que estar en nuestro equipo y se inserta exactamente igual que Imagen desde un archivo local. Los botones inferiores son autoexplicativos, solamente aclarar que la ayuda está en inglés.

Si hemos decidido insertar un Vínculo a un archivo local, sólo tendremos que elegir el mismo desde el cuadro de diálogo estándar. El resto del proceso es el mismo que acabamos de explicar para el Vínculo a una dirección de Internet.

Opciones

Como en cualquier programa, las opciones determinan el comportamiento del mismo. En el caso de Hot Potatoes pueden configurarse de forma genérica desde el menú principal de la suite, como vimos al principio de este capítulo. También puede configurarse desde cada una de las "patatas" de las que se componen. Lo más normal es que hagamos una configuración general desde el menú de la suite y que posteriormente hagamos modificaciones puntuales en cada una de sus utilidades.

Opciones de la utilidad

La primera opción, Configurar el formato del archivo originado, es la más importante de todas. Desde ella podremos traducir algunos elemento que todavía hubieran quedado en inglés y muchos otros aspectos que desarrollaremos en breve.

Fuentes... nos permite elegir el tipo de letra del interfaz del programa. Derecha a Izquierda habilita la escritura en ese sentido propia de los países árabes y hebreos.

Opciones de la barra de herramientas sirve para habilitar/deshabilitar los elementos que deseamos que aparezca en la barra de acceso rápido que tenemos justo debajo del menú.

Show tooltips habilita/deshabilita los globos de ayuda que aparecen al parar el cursor del ratón sobre la barra de heramientas.

Cargar la información de configuración desde un archivo permite usar una configuración individual para cada ejercicio en un fichero independiente. Lo habitual es que no se use.

Interfaz despliega un submenú con las mismas opciones y comportamientos que vimos con anterioridad en las opciones generales de la suite. Las dos últimas opciones Set source file location y Clear source file location sólo se utilizan si tenemos conocimientos suficientes de HTML como para crear nuestras propias plantillas que usará Hot Potatoes para generar los ficheros resultantes de cada utilidad. Con la primera indicamos la carpeta en la que se encuentran nuestras plantillas y con la segunda indicamos al programa que use las estándares por defecto.

Ayuda

Ayuda de Hot PotatoesLa ayuda en Hot Potatoes no está traducida y tiene la estructura habitual en este tipo de menúes. Una parte de ella (Contenidos de la Ayuda) está integrada en el programa y describe detalladamente su funcionamiento. La Ayuda en Internet recoge preguntas y respuestas frecuentes (FAQ), un grupo de Yahoo con todo tipo de consejos y comentarios de los usuarios y, finalmente, Ayuda por correo electrónicos permite contactar directamente con Half-Baked Software para formularles nuestras consultas.

Barra de Herramientas

Justo debajo de la barra de menú está la barra de herramientas que consiste en una serie de botones que agilizan el acceso a las funciones más comunes del programa. Si tienes activado Show tooltips al detener el cursor sobre cualquiera de sus botones se mostrará una ayuda emergente describiendo su funcionalidad.

Barra de herramientas

Añadir Lectura

Una Lectura consiste en un texto y/o imagen de apoyo que acompañará al ejercicio. Habitualmente contiene información relevante para la ejecución del mismo, pero también podría tener cualquier otro tipo de información que deseemos.

Insertar lectura

Lo más importante de este apartado es marcar la casilla Incluir un texto de lectura ya que, de no hacerlo así, no aparecerá el texto que tecleemos o importemos.

Desde el menú Insertar podremos añadir imágenes, enlaces, tablas u objetos multimedia exactamente de la misma forma que se ha explicado con anterioridad.

El botón Examinar sirve para Importar texto desde un archivo HTML externo. De esta manera podremos diseñar el texto desde un editor HTML específico y posteriormente insertarlo como dectura.