JClic José Ricardo Fernández Ruiz
CEU
2
Cronograma de Actividades
> Bajar Aplicaciones
> Llenado de la hoja de Descripción
> Interacción con el Sistema
> Mediateca
> Actividades
> Realización de Actividades
> Pantalla de Información
> Puzzle Doble
> Puzzle Agujero
> Puzzle de Intercambio
José Ricardo Fernández Ruiz
3
Cronograma de Actividades
> Actividad de memoria con texto
> Actividad de memoria imagen y texto
> Sopa de Letras
> Asociación Simple
4
Descarga de Aplicaciones
> Descargar Motor de Java
http://www.java.com/es/download/manual.jsp
> Descargar Software Jclic
http://clic.xtec.cat/dist/jclic/jclic-0.2.0.6.exe
José Ricardo Fernández Ruiz
5
Creación de un nuevo Proyecto
> Cuando se empieza a trabajar con Jclic, se tiene que ejecutar el programa de Jclic author
José Ricardo Fernández Ruiz
6
Creación de un nuevo Proyecto
> Aparecerá la siguiente ventana
José Ricardo Fernández Ruiz
7
Creación de un nuevo Proyecto
> El primer paso es crear el nuevo proyecto para lo que tendrás que irnos al menú Archivo + Nuevo Proyecto
José Ricardo Fernández Ruiz
8
Creación de un nuevo Proyecto
> Se le asigna el nombre del proyecto, de preferencia utilizaremos el nombre de unidad1, unidad2, unidad3, unidad4
José Ricardo Fernández Ruiz
9
Creación de un nuevo Proyecto
> Todavía no hacemos actividades, únicamente hemos creado el nombre del proyecto.
> Estos proyectos posteriormente integraran nuestro trabajo final.
> Es importante destacar que el archivo que estamos generando se compone de 3 nombres.
> Nosotros únicamente agregamos el nombre y el programa agrega lo demás automáticamente.
Unidad1. Jclic. zip
José Ricardo Fernández Ruiz
10
Interacción con el Sistema
> La interacción con el sistema se realizara con las pestañas que aparecen en la parte superior.
José Ricardo Fernández Ruiz
11
Proyecto
> El área de proyecto, es la sección donde introduciremos los datos del proyecto en general, Titulo, Descripción, Autores.
José Ricardo Fernández Ruiz
12
Mediateca
> La Mediateca va a ser el repositorio donde vamos a poder guardar los archivos que utilizaremos en las actividades.
José Ricardo Fernández Ruiz
13
Mediateca
> Lo primero que se tiene que hacer es oprimir el botón de añadir un objeto u imagen multimedia
José Ricardo Fernández Ruiz
14
Agregar Archivos a la Mediateca
> Los seleccionas de la forma habitual como se realiza en Windows, se puede hacer de uno en uno, o seleccionado varios archivos.
José Ricardo Fernández Ruiz
15
Mediateca
> Apareciéndote de la siguiente manera
José Ricardo Fernández Ruiz
16
Actividades
> En el área de Actividades es la sección donde iremos añadiendo actividades a nuestro proyecto, en este caso un proyecto puede tener todas las actividades que nosotros queramos.
José Ricardo Fernández Ruiz
17
Actividades
> Para agregar una nueva actividad se debe de oprimir el botón de agregar actividad.
José Ricardo Fernández Ruiz
18
Actividades
> Donde te aparecerá la lista de actividades que podrás realizar
José Ricardo Fernández Ruiz
19
José Ricardo Fernández Ruiz
20
Actividades
> Después seleccionas la actividad a realizar y le agregas el nombre en la parte inferior
José Ricardo Fernández Ruiz
21
Actividades y Mediateca
> Las actividades que vayamos a realizar deben de utilizar los archivos que cargamos en la mediateca, en caso de que no se vayan a utilizar no tiene caso ir agregando estos archivos a la mediateca.
José Ricardo Fernández Ruiz
22
Realización de Actividades
> Realizando una Actividad de Información.
> La Actividad de Información me ayudara a crear una portada o una pantalla donde pueda informar sobre las actividades, se puede hacer la inicio como portada, o como separador entre unidades.
23
24
Realización de Actividades
> Al empezar a realizar las actividades vamos a ver que nos aparecerán 4 ventanas mas (Opciones, Ventana, Mensajes, Panel)
25
26
Opciones
> Opciones generales de la actividad
Le agrega un color al cuadro que se genera con la actividad
27
Ventana
> Aquí configuraremos los colores que aparecerán en la Actividad.
28
Ventana
29
Mensajes
> En la opción de mensajes colocaremos los mensajes que aparecerán dependiendo de las actividades que estemos realizando.
30
Panel
> La opción del Panel es donde configuraremos las actividades y donde las realizaremos, la explicación anterior de (Opciones, Ventana y Mensajes), se maneja de la misma forma para todas las Actividades, la única que si se modificara es la opción del Panel.
31
Panel
Columnas
Filas
Ancho
Alto
Estilo de las figuras
32
Empezando hacer la Actividad
> Modificamos el numero de filas y su ancho
33
Agregando los Contenidos
> Le damos un clic a la casilla para poder agregar el contenido a la misma
34
Como Quedaría
35
Los Formatos de las letras
Sin Borde
36
Estilo
37
La Ventana
38
Los Mensajes
39
Fin de la Primera Actividad
> Para visualizarla oprimimos el botón de Play, del panel principal.
40
Así quedaría
41
Puzzle Doble
> Es la creacion de un rompecabezas doble
42
Puzzle Doble
43
Puzzle Doble
> Recuerda poner el mismo tipo de piel para que vaya quedando igual.
> Para esta actividad utilizaremos una imagen que la tomaremos de la carpeta Archivos.
> La imagen sera Casa.jpg
44
Puzzle Doble - Mediateca
45
Puzzle Doble - Mediateca
46
Puzzle Doble - Actividades
> En la ventana de Actividades seleccionamos la opción de Ventana y le damos los colores acorde a nuestras actividades.
47
Puzzle Doble - Actividades
> En la ventana de mensajes coloca el mensaje mas adecuado para realizar la actividad.
48
Puzzle Doble - Actividades > En la opción del Panel es donde
se tendrá que colocar en este caso la imagen que aparecerá en el Rompecabezas.
49
Puzzle Doble - Actividades
> En este caso la imagen se encontrara en la Mediateca por eso la podrás seleccionar.
50
Actividad Terminada
> En este momento ya tendrás la primer actividad terminada
51
Puzzle Agujero
52
Puzzle Agujero
53
Puzzle Agujero - Mensaje
54
Puzzle Agujero - Mediateca
> Recuerda Introducir la imagen en la mediateca para poder hacer la actividad utiliza la imagen “pez.jpg”
55
Puzzle Agujero - Actividades
> En la opción de Panel volvemos a seleccionar la imagen que participara en la actividad.
56
Puzzle Agujero - Actividades
57
Actividad Terminada
58
Puzzle Intercambio
59
Puzzle Intercambio
60
Puzzle Intercambio - Mensaje
61
Puzzle Intercambio - Actividad
> En esta actividad, vamos a poder utilizar texto.
> Antes que nada debemos de saber cuantas palabras interactuaran en ella.
> Para poder hacer la cuadricula.
62
Puzzle Intercambio - Actividad
> La cuadricula
Lo ancho Lo alto
Los estilos de la fuente
63
Puzzle Intercambio - Actividad
> Así Terminaria
64
Fin de la Actividad
65
Proyecto 2
> Unidad2.jclic.zip
66
Nuevo Proyecto Unidad 2
> Unidad2.jclic.zip
67
Nueva Actividad
68
Nueva Actividad - Memoria
> En esta actividad, cada pieza que participe, se esconderá dos veces para realizarla adecuadamente.
> Se puede realizar ya sea en estilo de imagen o ya sea utilizando texto.
69
Actividad de Memoria
70
Actividad – Opciones
> Primero poner la piel
71
Actividad – Opciones
> Después los colores de las ventanas
72
Actividad – Opciones
> Hay que poner el mensaje, de acorde a la actividad.
73
Actividad – Opciones
> Primero realizaremos una actividad con palabras, tenemos que tenerlas a la mano, y sabes cuantas vamos a utilizar.
> En este caso se utilizaran 8 palabras.
La cuadricula
La altura La anchura
Aquí Escribiremos Las palabras
Los estilos
74
Actividades - Opciones
> Así introducimos los datos
> Dándole doble clic a la casilla
75
Actividad - Opciones
> Después introducimos los datos
76
Actividades - Opciones
> Después le agregas el estilo a las letras.
77
Actividades – Opciones
> Estilo
78
Actividades - Opciones
> Casi Terminamos
79
Actividad Terminada
80
Actividad - Memoria
> Pero con imágenes
> Creamos una nueva actividad de tipo memoria.
> Después lo que realizaremos es agregar las imágenes
> Hay que ir a la Mediateca y buscar en la carpeta Archivos los archivos (uno, dos, tres, cuatro, cinco, seis, siente, ocho, nueve, diez), todos tipo gif
81
Actividad - Memoria
82
Mediateca - Memoria
> Nos vamos a la mediateca y agregamos los archivos
Carpeta Archivos
83
Actividad – Opciones
> Primero poner la piel
84
Actividad – Opciones
> Después los colores de las ventanas
85
Actividad - Mensaje
86
Actividad - Panel
> El primer paso para realizar esta actividad es cargar las imágenes en ella para que vaya quedando de esta manera. Checamos
Los tamaños
87
Actividad - Panel
> Para agregar la imagen, lo primero que realizaremos es darle doble clic al recuadro donde la queremos colocarlo. Damos el
Doble clic
88
Actividad - Panel
> En este caso vamos a mandar llamar la imagen que vamos a colocar
89
Actividad - Panel
> Seleccionamos la imagen
90
Actividad - Panel
> Y así sucesivamente con todas las demás imágenes que pensemos colocar en la actividad
91
Actividades - Panel
> Ya con todas las imágenes cargadas, seleccionaremos el cuadro de contenido alternativo para poder agregar ahora el texto
92
Actividades - Panel
> Ya seleccionado el cuadro de contendido Alternativo oprimiremos el botón de ALT
93
Actividades - Panel
> Y ahora si agregaremos los textos de acuerdo con el mismo orden que pusimos las imágenes.
Le damos doble clic a la casilla que Vallamos a llenar
94
Actividades - Panel
> Ya llenando las casillas
95
Actividad - Panel
> Así va a ir quedando
96
Actividad - Panel
> Agregamos el Estilo a las letras
97
Actividad - Panel
> Ya con el estilo
Se agrega el color al texto alternativo
98
Actividad - Panel
> Así terminaríamos la actividad
99
Visualizamos la Actividad
100
Nueva Actividad Sopa de Letras
101
Seleccionamos Sopa de Letras
102
Mediateca - Sopa
> Para esta sopa agregaremos unas imágenes y así la diseñaremos mas dinámica
> Las imágenes que agregaremos seran (verano, invierno, otoño, primavera) del tipo gif
103
Mediateca - Sopa
> Seleccionamos los archivos
104
Actividades - Opciones
> En esta sección no olvides agregar lo de la piel
105
Actividades - Opciones
> Recuerda, también llenar las la opción de venta serán los colores que visualizaras en las ventanas.
106
Actividad - Mensaje
> Recuerda colocar un mensaje acorde a la actividad.
107
Actividad - Panel
> Esta actividad cuenta con dos Paneles, el Panel A y el Panel B.
> En el Panle A, colocaremos todas la palabras que aparecerán en esta actividad.
> En el Panel B, podremos las imágenes que se mostraran cuando encuentres una palabra.
> Y en la sección de palabras escondidas, colocaremos las palabras de esta actividad.
108
Actividad - Panel
Palabras escondidas
Los Panels
Las palabras escodidas
109
Actividad - Panel
Acomodamos las columnas
Alto y Ancho de los cuadros
110
Actividad - Panel
> Para subir las imágenes
> Se va a seleccionar la casilla y se colocaran en el mismo orden como se escondieron en la sopa de letras
Se le dará doble clic
111
Actividad - Panel
Seleccionamos La opción de imagen
112
Actividad - Panel
> Selección de la imagen
113
Actividad - Panel
> La visualizas en el contenido de casilla y después la aceptas
114
Actividad - Panel
> Hacer el mismo proceso con todas las imagenes
115
Así quedaría al final
116
Así Terminamos
117
Asociación Simple
> En este tipo de actividad también utilizaremos los dos paneles.
> En este caso relacionaremos algunos sonidos con texto
118
El primer paso
> Hay que crear el proyecto
119
Nombre del Proyecto
> Le vamos a poner unit3
120
Mediateca
> Hay que subir a la mediateca los siguientes archivos (caballo, cerdo, gallo, perro), del tipo mp3. y el archivo pregunta.gif
121
Mediateca
> Así quedaría
122
Creamos la Actividad
> Le ponemos el nombre de Asosimple a la actividad
123
Actividad - Opciones
> Le agregamos la piel
124
Actividades - Panel
> Le agregamos los colores de la ventana de juego
125
Actividades - Mensajes
> Le colocamos los mensajes pertinentes, que vayan de acuerdo con la actividad.
126
Actividades - Panel
> Lo primero es identificar los tres Paneles.
> Panel A es donde vamos a colocar los sonidos.
> Panel B vamos a escribir los nombres de los animales
> Y en el menú de Distribución ahí vamos a configurar como se va a visualizar la actividad.
127
Actividades – Panel A
> Lo primero es configurar la cuadricula, cuantos objetos van a participar en esta actividad.
> Para este caso solo son 4 objetos
> La multiplicación de Columnas por filas quedaría así 4 x 1
128
Actividades – Panel A
> Ahora vamos a agregar los audios y además pondremos una imagen de signo de interrogación.
> Para hacer esto le vamos a dar un clic sobre la primer casilla.
129
Actividades – Panel A
No agregaremos texto
Buscamos La imagen
Y el sonido lo insertamos por medio del contenido alternativo
130
Actividad – Panel A
> Agregando la Imagen
131
Actividad – Panel A
> Como quedaría con la imagen insertada.
> Falta agregar el sonido
De aquí Sacamos el sonido
132
Actividad – Panel A
> De las opciones de Contenido Alternativo y Multimedia, escogemos la opción de Interpretar Sonido.
133
Actividad – Panel A
134
Actividad – Panel A
Buscamos El archivo
135
Actividad – Panel A
136
Actividad – Panel A
> Al final así veríamos cuando ya esta todo listo.
137
Actividad – Panel A
> A final cuando insertemos todos los sonidos, nos aparecería la siguiente pantalla.
138
Actividad – Panel B
> Ya estando en el Panel B, lo que tenemos que realizar es mas fácil, solamente agregamos el nombre de los animales en cada uno de los cuadros.
Agregamos Los nombres
139
Actividad – Panel B
> De esta manera se llenaria
140
Actividad – Panel - Distribución
> Acomodamos de una manera mas inteligente la actividad.
141
Actividad - Paneles
> Ya por ultimo solo haz lo suficientemente grande las casillas para que se aprecie bien el texto y las imágenes.
142
Visualizamos la Actividad