José Ricardo Fernández Ruiz CEU · Jclic. zip José Ricardo Fernández Ruiz . 10 Interacción con...

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