El documento presenta propuestas para gamificar la visualización de código mediante el uso de metáforas conceptuales y técnicas de visualización automáticas, mejorando así la legibilidad y la comprensión del software. Se exploran diferentes enfoques para hacer el aprendizaje de programación más accesible y atractivo, destacando la importancia de personalizar las visualizaciones. Se ha implementado un prototipo base que será evaluado en experimentos con usuarios reales.

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

2. Introducción
Visualización del software
Diagrama de flujo como grafo o mapa
Gamificación de la visualización
Contexto
Taxonomía de visualización de SW
Legilibilidad del SW
Gamificación
Metáfora Conceptual
Propuesta
Java + Maryo
Elementos: IF, SWITCH, FOR, RETURN, …
Implementación y Conclusiones
Plugin de Eclipse
Vista de Maryo
Funcionalidad

3. INTRODUCCIÓNINTRODUCCIÓN

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

5. CONTEXTOCONTEXTO

6. 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 y
estético al software a nivel de función o método que mejore la
experiencia del usuario.

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

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

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

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

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

12. Mecánicas o pensamiento de juego en contextos ajenos al juego
para conseguir objetivos.
Tipos:
A. Recompensas por tareas
B. Competitividad entre jugadores
C. Hacer que las tareas aburridas sean más
atractivas
Ejemplos de A y B:
Enseñanza en general, el colegio Quest To Learn de NY
Enseñanza de programación, Codecademy.com
Ejemplo de C:
Enseñanza de partículas subatómicas, ParticleQuest.com

13. PROPUESTAPROPUESTA

14. Metáfora conceptual:
Código del método como un videojuego de plataformas.
Código Scratch Code Reimagined Diagrama de flujo

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

16. IMPLEMENTACIÓNIMPLEMENTACIÓN

18. Finalista en CUSL VII
(Final de Granada)

19. CONCLUSIONESCONCLUSIONES

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