domingo, 11 de marzo de 2012

PÓSTER PRESENTACIÓN


Haz clic aquí,  PÓSTER, para verlo en pdf. 


Con este póster pretendemos hacer una explicación gráfica de todo nuestro proyecto. Os puede ser de ayuda para comprenderlo, y saber usarlo.  

¡¡LA WEB!!

Aquí os presentamos definitivamente nuestra web, ya montada y lista. 



miércoles, 7 de marzo de 2012

GUÍA DIDÁCTIDA



Esta entrada no es especificamente para vosotros, los padres, sino para todos aquellos profesores que estén interesados en realizar esta WebQuest con sus alumnos.


¿QUÉ APORTAMOS CADA UNO?


Como es evidente, esto se trata de un trabajo en grupo, y todos hemos aportado ideas a todo, y todos nos hemos ayudado en común. Pero si tuviéramos que destacar a que nos hemos dedicado principalmente cada uno.

ALEX Y EUGENIA
Han realizado un trabajo en pareja, ellos se han centrado en los siguientes elementos de la web:
   El tutorial (Windows Movie Maker)
   El video para los padres (Windows Movie Maker)
   El test de los padres (Hot Potatoes)
   El crucigrama de los niños (Hot Potatoes)
   El test para los niños (ardora)
AIDA
Se ha dedicado mayormente a la realización de los siguientes elementos:
   La redacción de la Guía Didáctica. (Word)
   La redacción del test previo que los alumnos tendrán que realizar. (anexo I de la guía) (Word)
   La redacción del test final que los padres tendrán que rellenar. (anexo II de la guía) (Word)
   La redacción del informe del proyecto. (anexo III de la guía) (Word)
   Selección de las imágenes de la web. (google)
   Tratamiento de las imágenes anteriores como explicamos en la anterior entrada. (Illustrator, Photoshop) 
   Redacción de los textos que aparecen en la web.
   Diseño de la forma de la web. (Dreamweaver)
   Creación completa de la web.  (Dreamweaver)
MARTÍN
Se ha centrado en la creación de:
   El ejercicio de unir (Ardora)
   El ejercicio de frases incompletas (Hot Potatoes)
FRAN
Él se ha centrado en:
   La sopa de letras (Jclic)

¿CÓMO TRABAJAMOS LOS JUEGOS?

Para realizar los juegos, hemos utilizado los programas jclic, ardora y hot potatoes. La forma de trabajo con estos programas es muy similar, y haremos una breve explicación de como lo hemos hecho. 

Abrimos el programa, escogemos que tipo de ejercicio queremos. Insertamos el título donde nos lo pide. Tras esto, creamos el juego, a partir de la plantilla que el programa nos proporciona. Puedes escoger el tipo de interface que tendrá el juego. Así estará terminado el juego. 

Una vez acabados los juegos, los subimos a internet con la aplicación Dropbox. Para esto tenemos que exportar todos los juegos a html, subirlos a la carpeta public de Dropbox, y hacemos el enlace público.  

¿CÓMO TRABAJAMOS LA WEB?

Con esta entrada, lo que pretendemos es que podáis entender como hemos trabajado, paso por paso, para crear la web. Os enseñaremos cómo hemos creado a nuestro profesor,y así podréis entender mínimamente cómo ha sido nuestro trabajo:

El primer paso a seguir, fue buscar una imagen de un profesor en google. La que encontramos es ésta:
Tras ésto, y con el programa Illustrator  hemos realizado los siguientes pasos:
  1. Vectorizar la imagen.
  2. Desagruparla.
  3. Expandirla.
  4. Eliminar la capa de vectores de fuera, ya que el fondo o cosas que no forman parte exclusivamente de la imagen no nos interesan.
  5. Seleccionamos todo, creamos un grupo de pintura interactiva para colorearlo. 
  6. Coloreamos todo como queremos.
  7. Agrupamos todo de nuevo.
  8. Escalamos la imagen, al tamaño deseado.
  9. Optimizamos la imagen.       El resultado ha sido el siguiente:

Imagen 1
Después  con el programa Photoshop, optimizamos la imagen para que al subirla a internet tenga el tamaño idóneo y su carga sea inmediata; lo que queremos es conseguir  la relación perfecta entre tamaño de imagen y resolución, para que en la web todo vaya de forma rápida y fluida. Además pasamos la imagen a escala de grises, para así cuando el usuario de la web, pase el ratón por encima del profesor, la imagen se oscurezca. Y le retiramos las letras de debajo de sus pies. 

 El resultado es el siguiente:
Imagen 2
Ya con el programa Dreamweaver  utilizamos una opción que nos da el programa para que suceda lo que nosotros queremos, que es que al pasar el cursor por la imagen, se ponga oscura; es decir, al pasar el ratón por la imagen 1, aparezca la imagen 2. 
Tras esto, le vinculamos a la imagen, la Guía Didáctica de la web, que es lo que queremos que se descargue, cuando el profesor haga clic en él. 


En resumen, con cada imagen tenemos que realizar ocho pasos mínimos antes de subirla a la web:
  1. Vectorizarla
  2. Colorear
  3. Escalar al tamaño deseado (al que va a ir en la web)
  4. Optimizar la imagen para la web
  5. Copiar la imagen (con el tamaño definitivo)
  6. Pegarlo en Photoshop y cambiarle el color (en este caso, escala de grises)
  7. Optimizar la escala de grises
  8. Con Dreamweaver, creamos un comportamiento específico para esas imágenes para cuando el usuario deslice el ratón se cambie de una imagen a otra. 




¡TODO VA BIEN!



Poco a poco estamos creando nuestra web, todo empieza a coger sentido y forma. En esta entrada nos gustaría presentaros los principales elementos-personajes de la página: 

Este es nuestro papá,  él será la imagen que todos los papás o mamás que entren en la web, utilizarán para entrar en la web, y así aprender sobre seguridad en la red. 










Esta es nuestra niña, ella es hija de papá, y será la imagen que todos los niños que entren en nuestra página seleccionaran. Ella aparecerá varias veces durante la utilización de la web, de forma que planteará dudas, que puede que muchos niños tienen. 


















Este es nuestro profe, en él deberán hacer clic todos los profesores que entren a la web, para poderla utilizar con sus alumnos. Este muñeco dará paso a la Guía Didáctica. 


















Por último os presentamos a "Mousy", él es la ayuda principal que tendrán los niños para utilizar la página.