PLAYER 1 – ANTONIO M. MORA GARCÍA

CODE REIMAGINEDCODE REIMAGINED

© SEED 2013

- Press START -

GAMIFICACIÓN A TRAVÉS DE LA VISUALIZACIÓN DE CÓDIGO

GAMIFICACIÓN A TRAVÉS DE LA VISUALIZACIÓN DE CÓDIGO

IntroducciónVisualización del softwareDiagrama de flujo como grafo o mapaGamificación de la visualización

ContextoTaxonomía de visualización de SWLegilibilidad del SWGamificaciónMetáfora Conceptual

PropuestaJava + MaryoElementos: IF, SWITCH, FOR, RETURN, …

Implementación y ConclusionesPlugin de EclipseVista de MaryoFuncionalidad

INTRODUCCIÓNINTRODUCCIÓN

Visualización• Para comprender el SW hay que visualizarlo• La visualización del SW permite documentar mejor los sistemas• También facilita la detección de fallos• Es especialmente importante durante su aprendizaje

Grafo• En el software principalmente hay dependencias• Las dependencias se pueden representar con grafos• Existen multitud de diagramas especializados según el SW• Ejemplo básico: diagrama de flujo para una función• El grafo representa el flujo de ejecución del código.

Mapa• Alternativa: usar un grafo tipo árbol• El árbol representa la estructura sintáctica• El árbol puede ser representado como un mapa

CONTEXTOCONTEXTO

La visualización se clasifica según qué y cómo se visualiza el software:

Estático Dinámico

Código X

Datos X X

Algoritmo x x

El objetivo de es añadir un valor expresivo yestético al software a nivel de función o método que mejore laexperiencia del usuario.

Definición de legibilidad: Capacidad de ser leído por un humano. (Esta definición es demasiado general)

¿La información es legible? ¿Cuán legible? …

En programación, se refiere a la claridad con que se entiende el texto de un programa. Se puede hacer una analogía con un texto lingüístico (p. ej. narrativo): – Si la historia es confusa o sin sentido el texto es poco legible– Si la historia está clara pero el lector es poco experimentado el

texto tampoco es legible

Si

No

Diferencia texto lingüístico VS texto de programa:

• El mensaje o la historia del texto de un programa está en un contexto computacional muy distante a la experiencia natural del lector humano.

• Porque en realidad el texto tiene dos lectores:

El humano (incluyendo al propio autor)

La máquina(lector privilegiado que lo entiende

perfectamente)

Opciones para mejorar la legibilidad:

1. Acercar el mensaje al lector (enfoque constructivista) Se presupone que el lector humano en algún momento se encontrará cómodo en el lenguaje de la máquina)

2. Acercar el lector al mensaje (enfoque conductista)Es necesario mejorar la experiencia del lector al usar el lenguaje de la máquina

Se adapta el mensaje de los programas para asemejarlo a la experiencia natural del lector (programas de tipo Storytelling).

Alice Etoys Scratch

X El código (aunque más vistoso) no adquiere legibilidad en general.X El aprendizaje está limitado a este tipo de programas.

Es el camino largo, tiene un amplio alcance, hay multitud de conceptos abstractos que generalmente son difíciles de visualizar (algunos más que otros).

En general, para enseñar todos estos conceptos, se utilizan metáforas conceptuales.

Algunos símbolos poseen ciertas metáforas, como los paréntesis (agrupan visualmente los términos) pero su uso extensivo puede disminuir su efectividad o incluso ser contraproducente:

(defun factorial (n) (if (<= n 1) 1 (* n (factorial (- n 1)))))

Igual pasa con el uso de flechas. Además, la metáfora también pierde fuerza (adquiere abstracción) si hay variaciones en su significado.

Mecánicas o pensamiento de juego en contextos ajenos al juego para conseguir objetivos.

Tipos:A. Recompensas por tareasB. Competitividad entre jugadoresC. Hacer que las tareas aburridas sean más

atractivas

Ejemplos de A y B:Enseñanza en general, el colegio Quest To Learn de NYEnseñanza de programación, Codecademy.com

Ejemplo de C:Enseñanza de partículas subatómicas, ParticleQuest.com

PROPUESTAPROPUESTA

Metáfora conceptual:Código del método como un videojuego de plataformas.

Código Scratch Code Reimagined Diagrama de flujo

¿Cómo funciona?

El mapa se puede personalizar para aumentar su valor expresivo cambiando la textura de un elemento particular o de todos los elementos usando otros temas del videojuego o incluso otro videojuego.

Expresiones

Bucle

Condicional

IMPLEMENTACIÓNIMPLEMENTACIÓN

Finalista en CUSL VII

(Final de Granada)

CONCLUSIONESCONCLUSIONES

Se necesitan nuevas técnicas de visualización automática, donde la metáfora conceptual juegue un papel importante tanto para el aprendizaje como para la documentación en programación.

El uso de gamificación para el diseño de estas metáforas permite maximizar la concreción de los elementos visuales (permitiendo su personalización) sin perder analogía con los elementos representados.

Se ha implementado un prototipo base para la metáfora propuesta.https://github.com/javiplay/code-reimagined

Como línea a seguir se estudiará la efectividad de esta herramienta, habrá que diseñar experimentos con usuarios reales y completar funcionalidad.