Módulo 5: Diseño de actividades: Pantallas de información y actividades de identificación.

5.1.- Introducción

En el presente módulo vamos a aprender a diseñar actividades de dos tipos: Las pantallas de información y las actividades de identificación.

Ambos tipos de actividades siguen el mismo esquema de funcionamiento que las actividades vistas anteriormente, es decir, funcionan a base de casillas. En las mismas se pueden introducir textos, imágenes, sonidos,...

5.2.- Las pantallas de información.

Las pantallas de información son actividades donde se muestra un conjunto de información y, opcionalmente, se ofrece la posibilidad de activar el contenido multimedia asociado a cada elemento.

Pasamos ahora a diseñar nuestra propia actividad. En ella vamos a ir paso a paso realizando acciones y tomando decisiones sobre el diseño de la misma.

Lo primero que tenemos que hacer es entrar en el programa AUTOR si es que no lo tenemos activo y tener creado o abierto un proyecto. Podemos tener ya la previsión de tener en la mediateca aquellos recursos que se van a utilizar en las actividades.

CREANDO LA ACTIVIDAD.

Para crear una actividad, pulsamos sobre la pestaña actividades

y sobre el botón insertar nueva actividad.

1

Nos aparece la pantalla de elección de tipo de actividad, en la que señalamos el tipo de pantalla de información y le damos nombre a nuestra actividad. Hecho esto, pulsamos Aceptar.

El proceso básico de creación de actividades tiene cuatro pasos, tres de los cuales se han visto con anterioridad:

• Definición de las opciones generales • Definición de las ventanas, tanto la principal como la de juego • La definición de los mensajes • Definición del panel de juego.

Definición del panel de juego.

Para definir todo lo concerniente a lo que es la actividad en sí tenemos que actuar sobre la pestaña Panel.

La imagen que nos aparece es:

¿Qué deseo hacer? Lista de opciones

Deseos

1.- Deseo insertar una imagen en el panel

2.- Deseo cambiar el número de casillas de un panel

3.- Deseo cambiar la forma de división de las casillas

4.- Deseo definir los encajes con unión ovalada

5.- Deseo definir los encajes con unión triangular

6.- Deseo definir los encajes con unión rectangular

2

Deseos

7.- Deseo usar la opción recortes

8.- Deseo cambiar el tamaño del panel

9.- Deseo colocar texto en una casilla

10.- Deseo colocar una imagen en una casilla

11.- Deseo cambiar el color de fondo de una casilla

12.- Deseo colocar un gradiente en una casilla

13.- Deseo que la casilla sea transparente

14.- Deseo elegir otro tipo de letra para el texto de la casilla

15.- Deseo cambiar el color del texto de una casilla

16.- Deseo cambiar el margen de una casilla

17.- Deseo añadir sombra al tipo de letra

18.- Deseo añadir un borde a una casilla

19.- Deseo colocar un sonido en una casilla

20.- Deseo reproducir un vídeo en una casilla

21.- Deseo que al pulsar una casilla se muestre una página web

22.- Deseo que al pulsar una casilla se abra un programa externo

Tras haber elegido todo y completado, ya tenemos nuestra actividad terminada.

5.3.- Las actividades de identificación.

Las actividades de identificación son aquellas en las que hay que pulsar sobre las casillas que cumplen una determinada condición pedida en la actividad.

Pasamos ahora a diseñar nuestra propia actividad. En ella vamos a ir paso a paso realizando acciones y tomando decisiones sobre el diseño de la misma.

Lo primero que tenemos que hacer es entrar en el programa AUTOR si es que no lo tenemos activo y tener creado o abierto un proyecto. Podemos tener ya la previsión de tener en la mediateca aquellos recursos que se van a utilizar en las actividades.

3

CREANDO LA ACTIVIDAD.Para crear una actividad, pulsamos sobre la pestaña actividades

y sobre el botón insertar nueva actividad.

Nos aparece la pantalla de elección de tipo de actividad, en la que señalamos el tipo de actividades de identificación y le damos nombre a nuestra actividad. Hecho esto, pulsamos Aceptar.

El proceso básico de creación de actividades tiene cuatro pasos, tres de los cuales se han visto con anterioridad:

• Definición de las opciones generales • Definición de las ventanas, tanto la principal como la de juego • La definición de los mensajes • Definición del panel de juego.

Para definir todo lo concerniente a lo que es la actividad en sí tenemos que actuar sobre la pestaña Panel.

La imagen que nos aparece es:

4

¿Qué deseo hacer? Lista de opciones

Deseos

1.- Deseo insertar una imagen en el panel

2.- Deseo cambiar el número de casillas de un panel

3.- Deseo cambiar la forma de división de las casillas

4.- Deseo definir los encajes con unión ovalada

5.- Deseo definir los encajes con unión triangular

6.- Deseo definir los encajes con unión rectangular

7.- Deseo usar la opción recortes

8.- Deseo cambiar el tamaño del panel

9.- Deseo colocar texto en una casilla

10.- Deseo colocar una imagen en una casilla

11.- Deseo cambiar el color de fondo de una casilla

12.- Deseo colocar un gradiente en una casilla

13.- Deseo que la casilla sea transparente

14.- Deseo elegir otro tipo de letra para el texto de la casilla

15.- Deseo cambiar el color del texto de una casilla

16.- Deseo cambiar el margen de una casilla

17.- Deseo añadir sombra al tipo de letra

18.- Deseo añadir un borde a una casilla

19.- Deseo colocar un sonido en una casilla

20.- Deseo reproducir un vídeo en una casilla

21.- Deseo poner un contenido alternativo en el panel A

5

Realizado todo el diseño, pasamos a marcar las casillas que cumplen la condición pedida. Nos vamos a la pestaña relaciones y pulso sobre las casillas que cumplen dicha condición. Podemos observar que la casilla o el borde cambia de color, lo que significa que está seleccionada. Tras haber elegido todo, ya tenemos nuestra actividad terminada.

Pantalla con las casillas señaladas:

6

Módulo 5: Diseño de actividades: Las pantallas de información. (Ejemplo 1)

CREANDO LA ACTIVIDAD.

Vamos a la pestaña actividades

y pulsamos sobre insertar nueva actividad.

Nos aparece la pantalla de elección de tipo de actividad, en la que señalamos Pantalla de información y le damos el nombre de nuestra actividad.

Damos Aceptar.

Nos vamos ahora a la pestaña Ventana y escogemos un color de fondo para la ventana principal.

En la pestaña Panel escogemos una sola casilla.

Definimos un tamaño amplio, (600 x 300, por ejemplo ) bien ajustando la numeración o mediante el cursor del ratón.

7

informa1

Le damos un color de fondo también, en este caso, pulsamos sobre la casilla, se nos abre la ventana de contenido, donde pulsamos en estilo. Escogemos un color oscuro para el fondo y seleccionamos también un color de letra claro para que resalte.

Escribimos una presentación del proyecto y podemos incluir una imagen si lo deseamos.

Con esto hemos acabado nuestra actividad.

8

Módulo 5: Diseño de actividades: Las pantallas de información. (Ejemplo 2)

CREANDO LA ACTIVIDAD.

Vamos a la pestaña actividades

y pulsamos sobre insertar nueva actividad.

Nos aparece la pantalla de elección de tipo de actividad, en la que señalamos Pantalla de información y le damos el nombre de nuestra actividad.

Damos Aceptar.

En la pestaña Panel escogemos tres filas y una columna.

Definimos un tamaño amplio, bien ajustando la numeración o mediante el cursor del ratón.

Pulsamos sobre la primera casilla y se nos abre la ventana de contenido de casilla, donde escribimos el siguiente texto:

9

informa2

Pulsa sobre esta casilla para ir a la página web de la Consejería de Educación.

En esta misma ventana, activamos la casilla “borde” y pulsamos sobre estilo. En la ventana estilo, seleccionamos un color de fondo, la letra en blanco y un color para el borde. Modificamos también el grosor del borde para que quede de la siguiente manera:

Como queremos que al pulsar sobre esa casilla, se abra el navegador y aparezca la página de la Consejería, pulsamos sobre la parte de “Contenido activo”, abriéndose una nueva ventana. Buscamos el apartado “ Mostrar la URL”, pulsamos sobre dicho botón y se nos activa la parte derecha donde podremos escribir la dirección.

Pulsamos sobre Aceptar en todas las ventanas y ya tenemos diseñada la primera casilla.

Definimos ahora la segunda casilla para que nos abra un programa externo, en nuestro caso el procesador de textos con un documento concreto.

Pulsamos sobre la segunda casilla, se nos abre la ventana de contenido de casilla y escribimos en el apartado texto: “Pulsa aquí para ir a la encuesta del final”.

10

Le damos estilo también a esta segunda casilla, con color de fondo, color de letra, tamaño de letra,...

Sin cerrar la ventana de contenido de casilla, vamos a enlazar al procesador. Pulsamos sobre contenido activo, se nos abre la ventana que habíamos visto antes y buscamos el apartado “ Ejecutar un programa”. Se nos activa la parte derecha, y escribimos: oowriter encuesta.odt.

Es necesario saber el nombre del fichero que inicia el programa. En nuestro caso, al usar Guadalinex, el procesador es OpenOffice, y el fichero se llama oowriter. El archivo que contiene la encuesta, es lo que está escrito a continuación. Es necesario dejar un espacio entre el fichero del programa y el archivo que queremos que abra.

Pulsamos sobre Aceptar en todas las ventanas y ya tenemos diseñada la segunda casilla casilla.

La tercera casilla la vamos a enlazar con una de las actividades de nuestro propio proyecto.

Pulsamos sobre la casilla, se nos abre la ventana de contenido de la casilla y en el texto escribimos : “ Pulsa aquí para ir a la primera actividad de este proyecto”.

Le damos formato a la casilla ( color, tamaño de letra,...) y sin cerrar la ventana de contenido de casilla, pulsamos sobre el apartado “Contenido activo”. En la ventana que se nos abre vamos a elegir en este caso el botón “Ir a la secuencia”. Se nos activa la parte de la derecha, y pulsamos sobre el botón de los tres puntos, donde nos muestra una lista de las secuencias que tiene el programa. En este caso sólo habrá una.

11

En el apartado Secuenciar se verá todo lo relativo a las secuencias y cómo poner las etiquetas a las mismas.

Seleccionamos la que nos aparece y pulsamos sobre aceptar.

Con esto ya sabemos cómo hacer que una pantalla de información no sea sólo una actividad donde no se actúe, sino que podemos programarla haciendo que cada casilla realice una acción determinada.

Con esto hemos acabado nuestra actividad.

12

Módulo 5: Diseño de actividades: Las actividades de identificación. (Ejemplo 1)

CREANDO LA ACTIVIDAD.

Vamos a la pestaña actividades

y pulsamos sobre insertar nueva actividad.

Nos aparece la pantalla de elección de tipo de actividad, en la que señalamos Actividades de identificación y le damos el nombre de nuestra actividad.

Damos Aceptar.

La actividad de identificación puede ser de un sólo elemento o de varios, es decir, la pregunta puede estar referida a que se marque una sola vez o que se necesite pulsar sobre varias casillas para acabar la actividad.

Para nuestra actividad vamos a elegir esta segunda opción.

Primero cargamos en nuestra mediateca los los doce primeros archivos de la dirección: utilidades 1/CLIPART1.

13

identifica1

Vamos a realizar esta acción de golpe, no uno a uno. Para ello marcamos el primero y con la tecla mayúsculas pulsada marcamos el último que queremos seleccionar

Una vez que los hemos marcado, damos a abrir. Nos sale la pantalla que nos indica la conveniencia de pasarlos a nuestra carpeta y contestamos que sí.

Nos vamos ahora a la pestaña de panel y configuramos de la siguiente manera:

Tres filas y Cuatro columnas.

Tamaño 100 por 100.

Introducimos ahora en cada casilla cada uno de los dibujos.

El resultado es el siguiente:

14

Vamos ahora a establecer las relaciones. La actividad consiste en que se señalen todas las flechas que indique hacia la derecha en un tiempo máximo.

Vamos ahora a decirle al programa cuáles son. Nos vamos a la pestaña de relaciones y marcamos las casillas que cumplen la condición pulsando sobre ellas.

La casilla se pone en negro, lo que significa que está marcada.

Todavía no hemos puesto el mensaje inicial ni final, por lo que lo hacemos ahora.

Vamos ahora a delimitar el tiempo a los 10 segundos anunciados.

Nos vamos a la pestaña de opciones, y en el apartado de contadores marcamos la opción de tiempo máximo a 10 y la casilla de cuenta atrás.

Con ello ya hemos acabado la actividad.

Como siempre, probamos la actividad .

15

Módulo 5

24.- Visiona el paquete demostrativo de actividades de pantallas de información.

Para ello, abre el JCLIC PLAYER . En el menú Archivo escoge la opción “Abrir archivo” . Lo encontrarás en la siguiente dirección:

CD -> documentos -> proyectosdemostrativos -> informa.jclic.zip

25.- Lee el documento sobre el diseño de pantallas de información.

26.- (Esta actividad es voluntaria.)Realiza las actividades que se proponen para este tipo de actividades.

27.- Visiona el paquete demostrativo de actividades de identificación.

Para ello, abre el JCLIC PLAYER . En el menú Archivo escoge la opción “Abrir archivo” . Lo encontrarás en la siguiente dirección:

CD -> documentos -> proyectosdemostrativos -> identifica.jclic.zip

28.- Lee el documento sobre el diseño de actividades de identificación.

29.- (Esta actividad es voluntaria)Realiza las actividades que se proponen como ejemplos para este tipo de actividades

30.- EVALUACIÓN 5.

- Abre el programa JCLIC AUTOR.

- Crea un proyecto llamado modulo5. Si te hace falta, repasa el documento sobre comenzar un proyecto desde cero y/o abrir uno existente.

Ese proyecto debe de tener como mínimo:

Dos actividades de pantalla de información y otras dos de identificación.

Dentro de las cuatro ( en alguna o algunas de ellas ) debe haber:- Casillas con la opción recortes- Degradados en la pantalla principal y/o de juego- Contenido alternativo- Colores y fotos de fondo- Sonidos en los mensajes y al acabar la actividad.

16

- Textos en las casillas

Para realizar todo esto deberás haber leído los capítulos referentes a los diseños de aspectos comunes, la utilidad recortes,...

Cuando acabes de crear esas actividades, manda el fichero modulo5.jclic.zip al tutor/a del curso. Recuerda que el archivo no debe ser mayor de 8 megas.

17