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.

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

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

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

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

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

•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

•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

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

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

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.

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

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

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

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.

•Sistema operativo:

oGNU/Linux Huayra

•Editor HTML:

oBluefish (GPL)

•Navegadores:

oChromium (BSD)

oIceweasel (GPL)

oOpera (Freeware)

Herramientas utilizadas

•Editores gráficos:

oInkScape (GPL)

oGIMP (GPL)

Herramientas utilizadas