Towards a Web Application to Create Flowcharts for Supporting the Teaching-Learning Process of Structured Programming Courses

Fernando Vazquez-Peñaloza¹ and Carlos R. Jaimez-González^1,

¹Departamento de Tecnologías de la Información, Universidad Autónoma Metropolitana, Ciudad de México, México

Cite this paper:
Fernando Vazquez-Peñaloza and Carlos R. Jaimez-González. Towards a Web Application to Create Flowcharts for Supporting the Teaching-Learning Process of Structured Programming Courses. American Journal of Educational Research. 2019; 7(12):976-982. doi: 10.12691/education-7-12-12

Abstract

Programming is an essential skill for students of undergraduate programs related to computer science or information technologies, because they are required to have the ability to generate algorithms that solve real problems, which are later implemented in a programming language. Flowcharts are diagrams that can be used to visualize algorithms, which are graphic representations of the processes that are involved in the algorithm; each process is represented with symbols, allowing the student a visual understanding of the solution for a given problem. This paper presents a web application to support the teaching-learning process of structured programming undergraduate courses, which allows the creation of flowcharts. The web application allows the teacher to create examples with their corresponding solutions, register exercises to be solved by students, which are provided with a work area to draw flowcharts by dragging and dropping elements.

Keywords:
structured programming flowcharts teaching-learning web application

This work is licensed under a Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/

Figures

References:

[1]	Beltrán, J., Sánchez, H., Rico, M. (2015). Análisis cuantitativo y cualitativo del aprendizaje de Programación I en la Universidad Central del Ecuador. Revista Tecnológica de la ESPOL, 28 (5), pp. 194-210.
[2]	Corona Nakamura, M. A., Ancona Valdez, M. (2011). Diseño de algoritmos y su codificación en lenguaje C. México: McGraw-Hill.
[3]	Figueroa, N., Cataldi, Z., Méndez, P., Rendon Zander, J., Costa, G., Salgueiro, F. A., Lage, F. J. (2005). Los estilos de aprendizaje y el desgranamiento universitario en carreras de Informática. Jornadas de Educación en Informática y TICs en Argentina.
[4]	Muñoz, R., Barría Martínez, M., Nöel, R., Quiroz, P. (2012). Determinando las Dificultades en el Aprendizaje de la Primera Asignatura de Programación en Estudiantes de Ingeniería Civil Informática. Congreso Internacional de Informática Educativa.
[5]	Jacobson, I., Booch, G., Rumbaugh, J. (1999). The Unified Software Development Process. Boston, Massachusetts, USA: Addison-Wesley Professional.
[6]	Joyanes Aguilar, L. (2008). Fundamentos de Programación: Algoritmos, estructura de datos y objetos. Madrid, Spain: McGraw-Hill.
[7]	Supaartagorn, C. (2017). Web application for automatic code generator using a structured flowchart. 8th IEEE International Conference on Software Engineering and Service Science (ICSESS), Beijing, China.
[8]	Rodríguez Perojo, K., Ronda, R. (2006). El web como sistema de información. Acimed, 14 (1), pp. 1-15.
[9]	Arbeláez Salazar, O., Medina Aguirre, F. A., Chaves Osorio, J. A. (2011). Herramientas para el Desarrollo Rápido de Aplicaciones Web. Scientia Et Technica, 17 (47), pp. 254-258.
[10]	Novara, P. (2018). PseInt. A tool for supporting students in their first steps to structured programming. Available: http://pseint.sourceforge.net/.
[11]	Cherepii, S. (2018). Dia. Program for diagram creation. Available: https://wiki.gnome.org/Apps/Dia
[12]	Booch, G., Rumbaugh, J., & Jacobson, I. (2005). The Unified Modelling Language User Guide. Boston, Massachusetts, USA: Addison-Wesley Professional.
[13]	Draw.io (2018). Flowchart Maker and Online Diagram Software. Available: https://www.draw.io/
[14]	LucidChart (2018). Collaborative diagramming solution. Available: https://www.lucidchart.com
[15]	Nulab (2018). Cacoo. Creator of diagrams based on the cloud. Available: https://app.cacoo.com
[16]	Metropolitan Autonomous University, Cuajimalpa Campus (2018). Syllabus of Structured Programming. Information Technologies and Systems Undergraduate Program. México: UAM. Available: http://www.cua.uam.mx/pdfs/lic/tsi/n2/460005_programacion_estruc.pdf.
[17]	Metropolitan Autonomous University, Cuajimalpa Campus (2018). Information Technologies and Systems Undergraduate Program. México: UAM. Available: http://hermes.cua.uam.mx/archivos/PlandeEstudioTSI.pdf.