presentación proyecto memotest en flisol caba 2014
DESCRIPTION
Presentación del proyecto "Memotest" como parte de la charla "Experiencias desarrollando con Software Libre" organizada por el Prof Matías García en el marco del FLISoL 2014 celebrado el 26/04/14 en la UTN-FRBA (CABA).TRANSCRIPT
![Page 1: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/1.jpg)
![Page 2: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/2.jpg)
Orígenes del proyecto
•Forma parte del trabajo final de la materia Seminario de
la Tecnicatura en Informática Aplicada del Instituto
Nacional Superior del Profesorado Técnico-UTN
(Profesores: Mónica Kuhn y Matías García)
•Lenguaje elegido: HTML5
•Tema elegido: Un clásico juego de encontrar
coincidencias.
•Aplicación: educativa, ideal en el final del nivel inicial y
primer ciclo de nivel primario.
![Page 3: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/3.jpg)
¿Por qué usar HTML5?
•Lenguaje de marcado regulado por el Consorcio
W3C.
•Aún experimental, pero destinado ser el futuro
estándar en la web
•Incorpora elementos orientados a la web
semántica
•El elemento canvas permite gran versatilidad en el
manejo y animación de gráficos e imágenes
mediante scripting.
![Page 4: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/4.jpg)
¿Por qué HTML5 en educación?
•Gran potencial en su aplicación educativa como
introducción a lenguajes de programación
•Es ideal como punto de partida ya que muchos
alumnos tienen algún conocimiento básico sobre
HTML
•No requiere de complejos entornos de trabajo
•Es posible encontrar numerosas y sencillas
aplicaciones.
![Page 5: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/5.jpg)
¿Por qué un juego de memoria?
•La estructura del juego permitía su
aplicación el contexto escolar elegido.
•Se consideró importante la
flexibilidad de ese tipo de juego que
permite independizar totalmente la
lógica del contenido de las figuras
utilizadas.
![Page 6: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/6.jpg)
¿Por qué un juego de memoria?
Esa misma flexibilidad es la que permite una
funcionalidad adicional: la personalización de
los temas por parte de quien lo descargue
para su uso fuera de línea.
![Page 7: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/7.jpg)
•El juego consiste en descubrir los pares de imágenes relacionadas.
El juego: Descripción
•Se puede elegir entre 4
temas de relación
•El juego tiene 3 niveles que
incrementan sucesivamente
el número de cartas
•Se contabiliza el tiempo
empleado y los aciertos
http://memotest.tk/
![Page 8: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/8.jpg)
•Además de jugarse en línea, es posible descargar para descomprimir
en una carpeta local sin requerir instalación.
El juego: Descripción
•Así también es posible
personalizar los temas con
diseños propios
•En la página de descarga se
detalla paso a paso el proceso.
http://memotest.tk/ Descarga
![Page 9: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/9.jpg)
•Se organizó la estructura de archivos como una web
•El clásico archivo index.html al que apunta el dominio de la web se
ve como página de bienvenida y menú
•En la carpeta ImgWeb se guardan las imágenes utilizadas en las
páginas y las imágenes que forman parte del juego en las de Temas
correspondientes
El juego: Estructura
![Page 10: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/10.jpg)
![Page 11: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/11.jpg)
El juego: Su programación
•Al iniciar, se crea un array con
objetos Carta
•Cada carta tiene atributos como
coordenadas en x e y, ancho, alto,
info, img y un método dibujar
La lógica de funcionamiento del juego se concentra en el javascript
![Page 12: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/12.jpg)
El juego: Su programación
Los pares de imágenes de cada carpeta se
asocian con el nombre de los archivos.
•Por ejemplo: 3a.png, 3b.png
•La información será direccionada según el
tema elegido hacia la carpeta correspondiente
Para la necesaria mezcla, se intercambia aleatoriamente el contenido de
los atributos info y img entre los elementos del array
![Page 13: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/13.jpg)
El juego: Su programación
Con las cartas sobre la mesa, el juego comienza.
El script debe registrar
las coordenadas de los
clics realizados sobre
el canvas y mostrar por
unos segundos ambas
cartas.
![Page 14: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/14.jpg)
El juego: Su programación
Con las cartas sobre la mesa, el juego comienza.
Lamentablemente, los
métodos para leer
coordenadas aún no
están completamente
estandarizados en el
HTML5
![Page 15: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/15.jpg)
El juego: Su programación
Si las cartas seleccionadas forman un par...
El script debe
contabilizar el acierto y
“tapar” las cartas.
De lo contrario, vuelve
a dibujar el reverso
![Page 16: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/16.jpg)
El juego: Su programación
En cada acierto se compara su contador contra el largo del array. Al
igualarlo, el juego avanza al próximo nivel.
Si se trataba del último, culmina
![Page 17: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/17.jpg)
Hosting
Para el alojamiento experimental en la web y su acceso por la URL
http://memotest.tk/ se recurrió a un rústico pero sencillo recurso:
Una carpeta pública en Dropbox que
se direcciona desde un dominio
gratuito obtenido mediante DotTK, el
administrador de dominios del
archipiélago de Tokelau.
![Page 18: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/18.jpg)
![Page 19: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/19.jpg)
![Page 20: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/20.jpg)
•Sistema operativo:
oGNU/Linux Huayra
•Editor HTML:
oBluefish (GPL)
•Navegadores:
oChromium (BSD)
oIceweasel (GPL)
oOpera (Freeware)
Herramientas utilizadas
![Page 21: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/21.jpg)
•Editores gráficos:
oInkScape (GPL)
oGIMP (GPL)
Herramientas utilizadas
![Page 22: Presentación Proyecto Memotest en FLISoL CABA 2014](https://reader033.vdocumento.com/reader033/viewer/2022052908/5595b6dd1a28abf54d8b4571/html5/thumbnails/22.jpg)