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).

2. 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.

3. ¿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.

4. ¿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.

5. ¿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.

6. ¿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.

7. •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/

8. •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

9. •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

11. 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

12. 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

13. 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.

14. 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

15. 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

16. 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

17. 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.

20. •Sistema operativo:
oGNU/Linux Huayra
•Editor HTML:
oBluefish (GPL)
•Navegadores:
oChromium (BSD)
oIceweasel (GPL)
oOpera (Freeware)
Herramientas utilizadas

21. •Editores gráficos:
oInkScape (GPL)
oGIMP (GPL)
Herramientas utilizadas