Introducción
El aprendizaje de la programación mediante representaciones gráficas, con mayor o menor nivel de abstracción, es un campo en el que se está trabajando desde hace más de 25 años. La finalidad principal de estos trabajos es lograr reducir el nivel de abstracción que requiere la programación para así facilitar su comprensión. Las capacidades cognitivas del ser humano están optimizadas para procesar información de manera multimodal (visual, táctil y auditiva), y, sin embargo, los programas informáticos se suelen presentar de manera textual (una dimensión), desaprovechando así toda la potencia de nuestro cerebro
El uso de ciertas tecnologías emergentes permite una interacción multimodal, facilitando así el aprendizaje activo. Entre los distintos dispositivos que ofrecen este tipo de interacciones, cabe destacar aquellos que integran capacidades de Realidad Mixta. Éstos proporcionan un entorno de aprendizaje natural donde las acciones del estudiante en el mundo físico repercuten en el virtual.
Esto supone poder ampliar las capacidades de los sistemas tradicionales de aprendizaje de la programación. Para ello, es necesario definir nuevas técnicas de representación gráfica y nuevas arquitecturas que permitan manipularlas.
Así, en esta página se introduce ANGELA (notAtioN of road siGns to facilitatE the Learning of progrAmming) una notación gráfica basada en la metáfora de carreteras y señales de tráfico utilizada para facilitar el aprendizaje de la programación a alumnos de asignaturas de introducción a la programación. Las representaciones pueden ser visualizadas tanto en 2D como 3D, e incluso mediante un dispositivo de Realidad Mixta que utilice el espacio del entorno físico del usuario para ubicar y alinear la visualización en tiempo real. La elaboración de estas visualizaciones (conjuntos de representaciones gráficas) se realiza de forma automática mediante la implementación de un plugin para Eclipse integrado en COLLECE-2.0, dotando así a este entorno de nuevas capacidades de visualización de programas.
Notación gráfica
Las representaciones propuestas se plantean mediante una abstracción o metáfora basada en carreteras y señales de tráfico. Este conjunto de carreteras y señales de tráfico permiten visualizar el flujo de ejecución de un programa de forma natural para el usuario, al encontrarse este familiarizado con ellas en su vida diaria.
Cada una de estas representaciones se encuentran asociadas directamente a ciertas sentencias del lenguaje. El conjunto de sentencias a visualizar es lo suficientemente rico como para poder representar cualquier programa con ellas. Sin embargo, no se hace distinción entre los tipos de bucles, como los clásicos “for”, “while” y “do … while”, y sus distintas variantes, sino que todos ellos se engloban en una única representación, abstrayendo así al usuario de los detalles de implementación del lenguaje.
La notación permite representar tanto la estructura de los programas (visualización estática) como la ejecución de estos (visualización dinámica). En el primer caso, el objetivo de la visualización está orientado a facilitar la comprensión del conjunto de sentencias que forman el programa. En el segundo caso, la visualización permite realizar el seguimiento de la ejecución de un programa, a modo de depurador interactivo.
Así, las representaciones gráficas que conforman la notación ANGELA obedecen a distintas naturalezas en función de su propósito, atendiendo a la taxonomía anterior. A continuación, y en base a la siguiente imagen de la notación en su versión 2D y 3D, se procede a explicar cada una de las representaciones gráficas propuestas:
- Definición de función: este tipo de representaciones se basa conceptualmente en la señal de tráfico de salida a población desde autovía, indicando el inicio de una función, que será procedido de otro conjunto de representaciones indicando el cuerpo de la función y finalmente el retorno de esta. Esta representación muestra información sobre las variables que recibe como argumentos y el propio nombre de la función.
- Sentencia de condición: la representación muestra una bifurcación con dos ramas en la cual la rama izquierda supone la ejecución en caso de que se cumpla la condición a evaluar, mientras que la rama derecha presenta la ejecución en caso de que no se cumpla dicha condición. Esta representación muestra información sobre la expresión a evaluar y el significado de ambas bifurcaciones en caso de que se cumpla o no la condición.
- Sentencia de bucle: esta representación se basa en una metáfora de rotondas, donde un vehículo puede circular indefinidamente y de forma cíclica. Sin embargo, el concepto ha sufrido ciertas modificaciones para mejorar la escalabilidad (ej. soportar sentencias anidadas), haciendo un uso exhaustivo de los distintos carriles de la carretera. Conceptualmente para explicarlo, la visualización se interpreta mediante un supuesto vehículo –que representaría la ejecución paso a paso del programa– que llegaría a la rotonda por el norte, donde se evaluaría la condición del bucle. Si esta se cumple, el vehículo ejecutaría la iteración del bucle tomando la segunda salida de la rotonda. Una vez se ha terminado de ejecutar la iteración, el vehículo llegaría esta vez a la rotonda desde el sur, donde se evaluaría de nuevo la condición. En caso de que esta vez no se cumpla, el vehículo abandonaría el bucle tomando la tercera salida. Esta representación muestra información sobre la expresión a evaluar y el significado de ambas bifurcaciones en caso de que se cumpla o no la condición.
- Retorno de función: esta representación se presenta como una señal de tráfico que imita a la existente en la realidad y que denota fin de población. Esta representación muestra el nombre de la función desde la que está retornando y la variable que devuelve.
- Evaluación de expresión: esta representación se presenta como un túnel de carretera junto a una señal que contiene la expresión a ejecutar. Con expresiones, nos referimos a asignaciones de variables o invocaciones a funciones, por ejemplo. Estos túneles se encuentran ubicados sobre las propias carreteras, representando la posición donde se encontraría la expresión análoga en el programa.
- Punto de interrupción: esta representación se presenta como un cono de tráfico que actúa a modo de breakpoint cuando la visualización se está realizando en modo dinámico. Estos puntos de interrupción pueden situarse sobre cualquiera de los elementos estáticos para pausar la ejecución del programa a petición del usuario.
- Hilo de ejecución: esta representación se presenta como un camión que circula por los elementos de la representación estática del programa. El camión contiene información sobre el identificador del hilo de ejecución al que se refiere, pudiendo existir más de un camión en un contexto de programación concurrente.
Usando estas representaciones gráficas se puede construir la visualización tanto estática como dinámica de cualquier programa informático. En la sección «Ejemplos de visualizaciones con ANGELA» se muestran algunos vídeos donde se hace uso de la metáfora propuesta.
[ Volver ]