1. No category

QILQAY: UNA HERRAMIENTA PARA SOPORTAR EL
CURSO INDUCTORIO DE LÓGICA DE PROGRAMACIÓN
∗
(UTILIZANDO COMPUTACIÓN GRÁFICA)
ABSTRACT
Desde el Departamento de Sistemas de la Universidad de
Nariño (Colombia), se está liderando el proyecto de investigación, Logic Programming Learning using Graphic Computation, enfocado a mejorar la enseñanza de los conceptos
en el área de construcción de software. Para completar su
primera etapa, fue necesario implementar una herramienta
computacional que ayudara a cumplir uno de sus objetivos.
Qilqay es un software creado con el fin de ayudar a impartir el Curso Inductorio de Lógica de Programación, el
cual se desarrollará en la segunda etapa de la investigación
mencionada. Qilqay está implementada en lenguaje C++
utilizando librerı́as visuales de Qt. Su fin es ejecutar programas que solo contienen instrucciones de graficación, las
cuales dibujarán figuras sobre una ventana denominada Interface de Presentación de Resultados.
que el tipo de ejercicios utilizados para la enseñar de la lógica
de programación[8] en el primer nivel, puede mejorar si se
basan en ejemplos vinculados con razonamiento espacial[7].
Aunque este artı́culo no tiene como objetivo publicar el proceso llevado en este proyecto de investigación, es necesario
explicar sus fundamentos para luego encontrar la pertinencia de QILQAY como una herramienta de soporte para esta
investigación.
Durante el primer nivel de enseñanza de lógica de programación básicamente, se contemplan los siguientes elementos
conceptuales:
• Secuencilización (Algorithm).
• Variables.
• Instrucciones de entrada y salida de información (I/O).
Al finalizar su implementación, se pudo comprobar que Qilqay
soporta todos los requerimientos determinados por el proyecto
de investigación.
• Procesamiento de datos.
Keywords
• Instrucciones repetitivas (WHILE).
• Instrucciones de decisión (IF).
Programación, Enseñanza, Graficación
1. INTRODUCCIÓN
Como complemento a los esfuerzos que el programa de Ingenierı́a de Sistemas de la Universidad de Nariño ha realizado
para mejoramiento de la enseñanza en el área de programación, surge un proyecto de investigación que busca reforzar el aprendizaje de la lógica de programación probando
algunos ajustes al método de enseñanza actual.
El Proyecto Logic Programming Learning using Graphic Computation, es un proceso investigativo que se fundamenta en
∗Toda la información relacionada con la implementación de
Qilqay, puede ser encontrada en el portal de Software Nariñense http://sonar.udenar.edu.co.
El Curso Inductorio de Lógica de Programación, se encuentra organizado y publicado en el portal virtual de soporte a las asignaturas de la Facultad de Ingeniería de la Unviersidad de Nariño
http://ingenieria.udenar.edu.co/virtual
CICOM 2015 Cartagena, Colombia
El método de enseñanza normalmente se fundamenta en realizar muchos ejercicios para lograr que el estudiante adquiera,
por asociación mental, la habilidad para aplicar estos elementos conceptuales en solución de problemas computacionales.
El proceso investigativo en curso, se ha enfocado en formular
una colección de ejercicios para que en forma evolutiva, el
estudiante resuelva problemas exclusivamente gráficos, realizando dibujos basados en cı́rculos, lineas, rectángulos y
colores sobre un lienzo de 2 dimensiones. Por su puesto,
este contenido es brindado como un curso inductorio para
que posteriormente el estudiante continúe con su proceso de
aprendizaje habitual.
Teniendo en cuenta este cambio metodológico, fue necesario
implementar una herramienta sobre la cual el curso pueda
ser llevado a cabo y que disponga de los mecanismos para
enseñar los mismos elementos conceptuales, pero resolviendo
solo problemas gráficos.
QILQAY es una herramienta computacional implementada
para solventar dicha necesidad, y la cual es el objeto de este
documento, en el cual se pretende mostrar sus caracterı́sticas
y bondades, ası́ como algunas pruebas de funcionamiento
que han sido realizadas para asegurar su buen desempeño
antes de ser utilizada directamente en el curso inductorio
[6].
En los siguientes capı́tulos se detalla a QILQAY ası́: En el
capı́tulos 2, se presenta la estructura arquitectónica de la
herramienta; el capı́tulo 3, muestra cómo fue implementada
a partir de un diseño con enfoque sistemático; el capı́tulo
4, expone algunas pruebas realizadas a la herramienta; y
el capı́tulo 5, discute los resultados obtenidos tanto en el
proceso de desarrollo como en las pruebas realizadas.
El primer componente, library, constituye el espacio que
tiene la definición de todas las clases con sus respectivos
métodos escritos en lenguaje C++[3][5] usando un diseño
Orientado a Objetos. Y el segundo componente, wizard,
el cual esta escrito con una sintaxis especial para que sea
interpretado por el IDE, permite que QtCreator inicie un
proyecto con todos los archivos de Qilqay necesarios listos
para su ejecución.
De esta forma el estudiante solo deberá realizar los siguientes
pasos para iniciar su trabajo con Qilqay:
1. Abrir QtCreator.
2. ARQUITECTURA DE QILQAY
2. Crear un nuevo Proyecto de tipo Qilqay.
Para implementar a Qilqay, fue necesario tener en cuenta
que la solución deberı́a satisfacer tres aspectos generales indispensables:
• Compatibilidad con el lenguaje estandar de enseñanaza
en el Departamento de Sistemas de la Universidad de
Nariño (C++).
• Uniformidad con la Interface de Desarrollo (IDE ).
1
• Ejecución en multiplataforma.
3. Ejecutar.
Sin necesidad de escribir código alguno, Qilqay se puede
ejecutar mostrando su interface de resultados.
2.2 Arquitectura dinámica
Una vez puesta en marcha, Qilqay contiene dos elementos
claramente definidos: El entorno de codificación (IDE) y la
interface de presentación de resultados (GUI2 ):
Figure 2: Elementos de Qilqay
En los primeros cursos de programación en la Universidad
de Nariño, se utiliza C++ como lenguaje base de escritura
de programas. Si bien es cierto que en primer semestre se
busca que los estudiantes creen algoritmos sin pensar en codificación, hacia el final del primer semestre, es común hacer
algunos ejercicios utilizando C++.
A partir del segundo semestre, el Departamento de Sistemas
de la Universidad de Nariño, ha venido utilizado QtCreator
como IDE para escribir código fuente debido a su facilidad de
manejo, (coloreado de sintaxis, autocompletado de código,
depuramiento de código, etc.). Además, es una herramienta
que puede ser utilizada por los estudiantes en forma profesional.
La libertad en la selección del sistema operativo es un aspecto fundamental en los procesos académicos, de esta forma
Qilqay debe poderse trabajar de manera trasparente en cualquier
plataforma.
2.1 Arquitectura estática
Qilqay es entonces un conjunto de dos componentes: Una
librerı́a y un asistente, tal como se muestra en la figura 1.
De los dos elementos, el primero, IDE, permite escribir comandos básicos de dibujo, tales como circle, line, entre
otros, aprovechando el Framework de QtCreator. El segundo elemento, GUI, presenta los resultados al estudiante,
soportando algunas herramientas dispuestas en la interface,
tales como una cuadrı́cula ajustable, verificación de coordenadas, posibilidad de guardar el resultado, entre otros.
3.
ASPECTOS DE DISEÑO E IMPLEMENTACIÓN DE QILQAY
En la etapa de diseño de Qilqay, se tuvieron en cuenta los
siguientes requerimientos:
• Se debe disponer de comandos o instrucciones que solo
permitan realizar dibujos, tales como cı́rculos, rectángulos, lı́neas, colores.
Figure 1: Componentes de Qilqay
• Se debe proveer de un mecanismo (I/O) para salida de
información o presentación de resultados gráficos.
• Se debe proveer de un mecanismo (I/O) para entrada
de datos gráficos o para capturar información del usuario
relacionada con datos gráficos.
1
Integrated Development Environment
2
Graphical User Interface
• Las instrucciones deben estar diseñadas en idioma inglés para fomentar las buenas prácticas de programación.
Figure 5: Diagrama de la liberı́a de Qilqay
• La ejecución debe permitir ver los resultados inmediatamente.
• La interface de presentación debe permitirle al estudiante una eficaz verificación de resultados.
Para iniciar la creación de Qilqay, se optó por mantener un
repositorio que permita versionamiento. De esta forma, el
código fuente fue almacenado en GitHub, lugar desde el cual
se puede acceder libremente al software completo. Con en el
link https://github.com/GonzaloHernandez/qilqay se puede
llegar hasta el repositorio de código.
La documentación y manual de funcionamiento, se encuentran alojados en el sitio web http://sonar.udenar.edu.co/qilqay.
3.1 Bateria de instrucciones
permitiera procesar la información en forma concurrente, es
decir, en paralelo con la visualización de los resultados. Para
esto, la clase Instructions presentada en la figura 6, se comporta como un hilo (thread ) heredando dicha caracterı́stica
de la clase QThread.
Figure 6: Diagrama de relación entre Instructions y
GraphLibrary
Para cubrir todos los requerimientos, se diseñó un conjunto
de clases relacionadas que permitieran administrar todos los
dibujos que un estudiante pudiera imaginar a partir de 6
instrucciones básicas: line, circle, oval, arc, rectangle,
color. [4]
La figura 3, muestra la organización de estas clases gráficas
dentro de una sola familia de clases, Shape Class Family. [1]
Figure 3: Diagrama de clases de figuras
Estas clases son administradas por la clase GraphLibrary,
a quien se le ha responsabilizado la tarea de graficar cada
uno de los dibujos requeridos por el estudiante. La figura 4
bosqueja la relación estática de estas clases.
Figure 4: Diagrama de clases de Qilqay
La clase GraphLibrary provee los métodos necesarios para
crear cada una de las figuras y ası́ ser agregadas al repositorio
shapes.
Para tener una mayor organización en el código fuente, se
lo dividió en dos secciones: qilqaylibrary.h que contiene la
programación de todas las clases previamente explicadas, y
qilqay.h que contiene 3 macroinstrucciones: PROGRAM, START
y END, que relajan el código final utilizado por el estudiante
(Sugar Syntax ).
Las instrucciones adicionales son proporcionadas por el IDE,
tales como if, while, int, etc.
3.2
Como mecanismo (I/O) de salida de información se ha diseñado en Qilqay una interface de presentación de resultados,
en la cual se grafican los dibujos realizados por el estudiante
de cada una de las instrucciones codificadas en el IDE. El
objetivo de éste GUI, es la de dotar al estudiante de una herramienta completa con la cual pueda evaluar el resultado de
sus ejercicios. La figura 7 muestra la interface en ejecución.
Esta interface una vez ejecutada no solo muestra los gráficos
solicitados por el estudiante, sino que adicionalmente puede
realizar las siguientes acciones:
3.2.1
Toda la implementación utiliza la librerı́a de Qt[2] como base
de desarrollo visual, tal es el caso de la clase GraphLibrary
que hereda sus caracterı́sticas visuales de la clase QWidget,
tal como se muestra en la figura 5.
La secuencialización de las instrucciones codificadas por el
estudiante (dibujos), se logró implementando una clase que
Interface de presentación de resultados (Output )
Verificación de coordenadas
Uno de los requerimientos solicitados por el proyecto de investigación, consiste en permitir una inmediata verificación
de resultados, en este caso, la revisión que hará el estudiante estará encaminada a verificar el lugar donde se dibujó
cada figura. Para esta tarea, la interface permite visualizar
las coordenadas del puntero del mouse cuando se oprima
cualquiera de los dos modificadores Alt o Ctrl. Con el modifi-
Figure 7: Interface de presentación de resultados
La instrucción getposition(...), también configura a la interface para que se muestre un texto en un mensaje flotante
(bajo el puntero), el cual es proporcionado por el estudiante
a través del mismo comando.
La figura 8 muestra cómo Qilqay ejecuta la instrucción de
captura de datos:
getposition (x ,y , " Donde quiere dibujar el
circulo ? " ) ;
Figure 8: Captura de datos
cador Alt se muestra la coordenada del puntero en cualquier
posición de la ventana, mientras que con el modificador Ctrl,
se puede ver la coordenada ajustada a una cuadrı́cula previamente definida.
3.2.2 Cuadrícula
Con el objetivo de retomar la intención del papel milimetrado cuando se dibuja sobre papel, se ha acondicionado
a la interface con una cuadrı́cula que puede ser habilitada
en el momento en que el estudiante lo desee utilizando la
combinación de teclas Ctrl+G. Esta malla presentada en el
fondo de los dibujos, ayuda a visualizar la ubicación de los
mismos. Por defecto, la cuadrı́cula tiene una escala de 10
pixeles, pero puede ser ajustada por medio de la rotación
de la perilla del mouse, ScrollMouse, mientras se tiene presionado la tecla Ctrl. Esta cuadrı́cula también puede ser
habilitada desde programación por medio de la instrucción
grid(.).
3.2.3 Exportar imagen
Una vez realizada la verificación del resultado, el estudiante
también tiene la opción de guardar la imagen generada exportándola en formato PNG. Académicamente, esta opción
permite que se puedan enviar resultados al profesor o simplemente guardar un resultado junto con su código fuente
para futuras consultas. El guardado de la imagen se realiza
por medio de la combinación de teclas Ctrl+S.
3.3 Captura de datos (Input )
Una de las principales instrucciones en el proceso de aprendizaje de la lógica de programación, es la que permite un
diálogo con el usuario final, por tal motivo, Qilqay ha dispuesto una instrucción para este fin sin salirse de los parámetros del proyecto de investigación, es decir, una instrucción
que esté relacionada con computación gráfica.
Como mecanismo (I/O) de entrada de datos, Qilqay ha diseñado la instrucción getposition(...). Con este comando,
la secuencialidad del programa se detiene y la interface de
presentación de resultados pide que se seleccione una ubicación. Una vez que se ha hecho click para seleccionar la
posición, la secuencialiad del programa continúa ejecutando
las instrucciones que el estudiante ha dispuesto después de
ésta.
4.
PRUEBAS DE FUNCIONALIDAD
La funcionalidad del Qilqay, ha sido analizada por medio
de dos pruebas, una realizada por integrantes del mismo
equipo investigador, y otra realizada por personas ajenas al
proyecto.
4.1
Diseño de ejercicios
Durante la primera etapa del proyecto de investigación Logic
Programming Learning using Graphic Computation, se realizaron un compendio de ejercicios para ser abordados durante el curso inductorio de lógica de programación. Estos
ejercicios se clasificaron en 5 grandes grupos:
• Secuencialización y Razonamiento espacial.
• Manejo de variables.
• Diseño de funciones.
• Empleo de ciclos.
• Entrada de datos.
• Toma de decisiones.
En las figuras 9, 10, 11, 12, 13 y 14, se muestra un ejemplo sencillo de cada uno de los temas tratados por el curso
inductorio.
De esta forma, la primera prueba de funcionalidad, fue realizada por un grupo de estudiantes que terminaron décimo
semestre en ingenierı́a de sistemas, a quienes se les asignó la
tarea de crear una baterı́a de ejercicios para cada uno de los
seis temas mencionados. En total se crearon 40 de cada uno,
los cuales se utilizarán en la segunda etapa del proyecto de
investigación.
El resultado de esta primera prueba, fue exitoso, en todos
los casos la librerı́a respondió de acuerdo a lo solicitado.
Figure 9: Ejemplo de Secuencialización
Figure 13: Entrada de datos
Figure 10: Ejemplo de Manejo de variables
Figure 14: Ejemplo de Toma de decisiones
Figure 11: Ejemplo de Diseño de funciones
Por este motivo, la segunda prueba se realizó con un grupo
de 19 estudiantes de Tecnologı́a en Computación de la Universidad de Nariño, a quienes se les impartió una cátedra
resumida de 30 minutos utilizando Qilqay. Posteriormente,
se les aplicó un cuestionario para evaluar 7 aspectos sobre
la experiencia. Las opciones de respuesta posibles para cada
aspecto fueron:
• Excelente.
• Bueno.
• Aceptable.
• Debe mejorar.
Figure 12: Ejemplo de Empleo de ciclos
4.1.1 Aceptabilidad
Una herramienta que servirá de apoyo a un proceso de enseñanza, debe tener como caracterı́stica fundamental la aceptación de parte de los aprendices, es decir, la herramienta
debe incitar a que el estudiante desee continuar trabajando
con ella.
Como resultado, se obtuvo que más del 55% de los estudiantes, consideran como excelente la posibilidad de que se
pueda iniciar un ejercicio sin necesidad de escribir código alguno, esto, gracias a que el wizard de Qilqay construye todos
los archivos y códigos necesarios para que el estudiante solo
se enfoque en digitar las instrucciones de dibujo. La figura
15 muestra que adicionalmente otro 38% de los estudiantes
lo consideran como bueno.
QtCreator es un IDE bastante robusto y por su eficiencia
se presta para este tipo de proyectos. La figura 16 confirma
que el haber utilizado a QtCreator fue una buena decisión de
diseño. De los estudiantes participantes en la prueba, más
del 72% califican a este aspecto entre excelente y bueno.
Después de que los estudiantes realizaron varios ejercicios
propuestos por el profesor, éstos calificaron como excelente
Figure 15: Disponibilidad de un asistente
Figure 19: Instrucción de entrada de datos
Figure 16: Utilización de QtCreator
para la verificación de resultados, son pertinentes. En esta
ocasión se está haciendo referencia a la posibilidad de verificar las coordenadas de un dibujo ası́ como la disponibilidad
de una cuadrı́cula que ayude a visualizar la posición de cada
figura. Las figuras 20 y 21, muestran que el 100% de los estudiantes calificaron entre excelente y bueno a este aspecto.
Figure 20: Verificación de coordenadas
Figure 17: Instrucciones de dibujo
Figure 21: Cuadrı́cula
la definición de las instrucciones de dibujo. La figura 17
muestra que que el 61% del curso está de acuerdo con esto.
El ambiente gráfico, fue uno de los aspectos que gustó dentro de los participantes, no solo fue apreciado por medio de
observación directa, sino también fue constatado por las respuestas que entregaron los estudiantes. Según la figura 18,
más de la mitad del curso, 55%, califican como excelente, y
una tercera parte mas, 33%, califican como bueno el mecanismo (I/O) que permite la salida de información hacia el
usuario.
Figure 18: Interface de resultados gráficos
Con las mismas apreciaciones fue calificado el mecanismo
(I/O) de entrada de datos. A un 94% de estudiantes del
curso, le pareció que la instrucción getposition(...) fue
una excelente o buena estrategia para dialogar con el usuario.
La figura 19 confirma esta apreciación.
Para finalizar, todos los estudiantes están de acuerdo en que
las herramientas dispuestas en la Interface de Presentación
5.
CONCLUSIONES Y TRABAJOS FUTUROS
Con la liberación de la primera versión completamente funcional de Qilqay, Release 13, se ha culminado la primera de
las tres etapas del proyecto de investigación Logic Programming Learning using Graphic Computation. Para el equipo
de trabajo, ha sido un logro invaluable, puesto que ahora, no
solo se dispone de la herramienta, sino que adicionalmente,
gracias a ella, también se ha podido crear la baterı́a de ejercicios que inicialmente se trabajarán en la segunda etapa, es
decir, la puesta en marcha del Curso inductorio de lógica de
programación.
Después de realizar el compendio de ejercicios utilizando
Qilqay, los mismos estudiantes que realizaron las pruebas,
dieron testimonio de la eficacia de una enseñanza de la lógica de programación basada en computación gráfica, puesto
que con pocas instrucciones diseñadas por Qilqay, fue posible aplicar los conceptos básicos de esta disciplina.
El desarrollo de este software, ha sido exitoso gracias a la utilización de lenguaje C++ ası́ como fueron de ayuda valiosa
las librerı́as de Qt. La exploración de este framework, deberı́a seguirse haciendo en los ambientes académicos, no solo
para explotar los beneficios de C++, sino también porque
es un framework totalmente profesional.
Qilqay es un software que seguirá en continuo desarrollo,
las nuevas liberaciones contendrán mejoras en pro de ayudar con más eficiencia al proceso académico para el cual fue
creada. También se estudiará la pertinencia de crear más
instrucciones gráficas enfocadas a enseñar la aplicación de
los conceptos de la lógica de programación.
La implementación de Qilqay, ha sido realizada sobre una
plataforma Linux y aunque fue probada también en plataforma
Windows, queda como trabajo futuro, dar más soporte al
proceso de instalación del mismo en dicha plataforma.
6. REFERENCES
[1] El Lenguaje Unificado de Modelado. Addison-Wesley,
España, 2000.
[2] Application Development with Qt Creator. PACKT
Publishing, United Kingdom, 2014.
[3] The C++ Programming Language, 4th Edition.
Addison-Wesley, United States, 2014.
[4] Computer Graphics: Principles and Practice:
Principles and Practices. Addison-Wesley, New York,
2014.
[5] www.cplusplus.com. http://www.cplusplus.com, 2015.
[Online; accessed 20-April-2015].
[6] G. Hernández. Qilqay-General Info.
http://sonar.udenar.edu.co/qilqay/, 2015. [Online;
accessed 20-April-2015].
[7] S.-Y. Lee. Spatial reasoning and similarity retrieval of
images using 2d c-string knowledge representation.
Pattern Recognition, 23(3):305318, March 1992.
[8] K. Vicente. Assaying and isolating individual
differences in searching a hierarchical file system.
Human Factors: The Journal of the Human Factors
and Ergonomics Society, pages 349–359, June 1987.
APPENDIX
A. ENCUESTA DE ACEPTACIÓN DE QILQAY
Las siguientes preguntas tienen como objetivo, identificar el
grado de aceptación de Qilqay como herramienta de apoyo
al Curso Inductorio de Lógica de Programación.
Responda a cada uno de los siguientes 7 aspectos, de acuerdo
a la experiencia que ha tenido en este corto curso.
1. Qilqay ha dispuesto para su trabajo un asistente denominado ”Qilqay Project” que le permite iniciar un ejercicio sin
necesidad de que usted escriba lı́neas de código adicionales.
Esta forma de iniciar un ejercicio la considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
2. Qilqay utiliza a QtCreator como IDE (Interfaz de desarrollo) para realizar ejercicios gráficos. El haber utilizado a
QtCreator lo considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
3. Qilqay tiene a su disposición varias instrucciones para
crear gráficos (circle, line, etc.). La forma en cómo han sido
diseñadas estas instrucciones, la considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
4. Qilqay ha utilizado un mecanismo único de presentación
de resultados (Una venta con dibujos). Esta estrategia (Input/Output) de presentar la información la considera:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
5. Qilqay también ha diseñado un único mecanismo para
captura de datos ( getposition(x,y...) ), el cual captura las
coordenadas del mouse. Esta estrategia de (Input/Output)
la considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
6. La ventana de presentación de resultados de Qilqay permite que usted verifique las coordenadas en las cuales ha
sido dibujada una figura (Moviendo el puntero mientras se
presiona la tecla Ctr o Alt). La eficacia de esta caracterı́stica la considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
7. La ventana de presentación de resultados de Qilqay también permite mostrar una cuadricula o grilla (Ctr + G), a la
cual se le puede cambiar la escala (Ctr + ScrollMouse). La
forma en cómo ayuda esta caracterı́stica la considera como:
⃝Excelente ⃝ Buena ⃝ Aceptable ⃝ Debe mejorar
Muchas gracias.