Transformacion Herramienta Gamificada Caro 2023

Transformación de la herramienta Gamificada “Language Conquers” para apoyar el
proceso de aprendizaje en la programación
Angela María Acosta Ramírez, [email protected]

Juan Pablo Caro Vargas, [email protected]
Trabajo de grado presentado para optar al título de Ingenieros de Sistemas e Ingeniera

Multimedia
Director: Víctor Manuel Peñeñory, (PhD).

Codirector: Kathia Paternina Palacio.
Universidad de San Buenaventura Colombia

Facultad de Ingeniería
Programa Académico Ingeniería de Sistemas e Ingeniería Multimedia
Santiago de Cali, Colombia
Mayo, 2023
Cómo citar/referencia Acosta & Caro, 2023 [1]
Referencia/Reference [1] Acosta, Angela Maria, Caro, Juan Pablo, (2023) “Transformación de la
herramienta gamificada Language Conquers para apoyar el proceso de
Estilo/Style: aprendizaje en la programación”. Trabajo de grado Ingeniería de
IEEE (2020) Sistemas e Ingeniería Multimedia, Universidad de San Buenaventura
Cali, Facultad de Ingeniería, 2023
Biblioteca Digital (Repositorio)

http://bibliotecadigital.usb.edu.co
Bibliotecas Universidad de San Buenaventura

Biblioteca Fray Alberto Montealegre OFM - Bogotá.
Biblioteca Fray Arturo Calle Restrepo OFM - Medellín, Bello, Armenia, Ibagué.
Departamento de Biblioteca - Cali.
Biblioteca Central Fray Antonio de Marchena – Cartagena.
Universidad de San Buenaventura Colombia

Universidad de San Buenaventura Colombia - http://www.usb.edu.co/
Bogotá - http://www.usbbog.edu.co
Medellín - http://www.usbmed.edu.co
Cali - http://www.usbcali.edu.co
Cartagena - http://www.usbctg.edu.co
Editorial Bonaventuriana - http://www.editorialbonaventuriana.usb.edu.co/
Revistas - http://revistas.usb.edu.co/
Dedicatoria
A Dios por ser quien guía mi camino profesional y por las bendiciones recibidas.
A mis padres, mi mayor inspiración y apoyo incondicional en cada etapa de mi camino. Su amor
inquebrantable y acompañamiento en cada decisión han sido fundamentales en mi formación y crecimiento
personal.
Angela Maria Acosta Ramirez.
Quiero dedicar este proyecto a mis padres, familiares y pareja, quienes han sido fundamentales en mi camino
y me han brindado un apoyo incondicional para culminar esta etapa.
Juan Pablo Caro.

Agradecimientos
Agradezco a mi familia que con su amor y apoyo me permitieron llegar a cumplir con este sueño.
Agradezco a mis profesores, especialmente al profesor José Luis Jurado, por haber creído en mi desde el
primer momento que nos conocimos, por sus concejos y apoyo incondicional durante toda la carrera.
A mi compañero Juan Pablo Caro que con su apoyo y compañía durante la carrera y en este proyecto logramos
culminar esta etapa.
A todos mis amigos y compañeros de carrera, que a lo largo de esta etapa compartimos muchas experiencias
y nos hemos apoyado mutuamente en los trabajos.
Angela Maria Acosta Ramirez.
Agradezco a mi familia y amigos que con su apoyo me dieron el valor de cumplir mis metas.
Agradezco a mis profesores por su dedicación y por apoyarnos durante todo este proceso.
A mi compañera Angela María Acosta que gracias a su dedicación y esfuerzo logramos cumplir este logro.
Juan Pablo Caro Vargas

TABLA DE CONTENIDO
I. RESUMEN.................................................................................................................................. 16
II. ABSTRACT ................................................................................................................................ 17
III. INTRODUCCIÓN ...................................................................................................................... 19
A. CONTEXTO........................................................................................................................................................ 19
B. PLANTEAMIENTO DEL PROBLEMA ...................................................................................................................... 21
C. JUSTIFICACIÓN DEL PROBLEMA ......................................................................................................................... 23
D. DESCRIPCIÓN Y ANÁLISIS DE LA COMPLEJIDAD DEL PROBLEMA ........................................................................... 24
E. OBJETIVOS ....................................................................................................................................................... 25
1. Objetivo General ........................................................................................................................................ 25
2. Objetivos Específicos .................................................................................................................................. 25
3. Objetivos de desarrollo sostenible.............................................................................................................. 25
F. PLANTEAMIENTO DE LA SOLUCIÓN ..................................................................................................................... 26
1. Descripción de la solución ......................................................................................................................... 26
2. Proceso de Ingeniería ................................................................................................................................. 26
a) Etapa de modelo de investigación documental......................................................................................................... 27
b) Etapa de modelado de construcción de soluciones ................................................................................................... 28
c) Etapa de modelado de estudios de casos .................................................................................................................. 28
G. ENTREGABLES DEL PROYECTO ........................................................................................................................... 28
a) Productos de Software: ............................................................................................................................................ 28
b) Productos No Software: ........................................................................................................................................... 28
IV. MARCO TEÓRICO ................................................................................................................... 29
A. APRENDIZAJE BASADO EN JUEGOS ..................................................................................................................... 29
B. JUEGOS SERIOS ................................................................................................................................................. 31
C. LEARNING MANAGEMENT SYSTEMS (LMS) ......................................................................................................... 32
D. GAMIFICACIÓN ................................................................................................................................................. 32
1. Elementos de gamificación ......................................................................................................................... 33
E. DEDALUS ......................................................................................................................................................... 35
1. Procedimiento de ambiente de juego .......................................................................................................... 35
2. Ambiente de juego ...................................................................................................................................... 36
3. Medición y evaluación ................................................................................................................................ 36
F. TIPOS DE JUGADORES ....................................................................................................................................... 36
G. EXPERIENCIA DE USUARIO ................................................................................................................................. 37
H. EXPERIENCIA DEL JUGADOR .............................................................................................................................. 38
I. EXPERIENCIA DEL ESTUDIANTE ....................................................................................................................... 39
J. USABILIDAD...................................................................................................................................................... 39
K. MOTIVACIÓN .................................................................................................................................................... 41
L. ANTECEDENTES ................................................................................................................................................ 41
V. PROCESO DE INGENIERÍA DE SOFTWARE ........................................................................ 49
A. MODELO DE NEGOCIO ...................................................................................................................................... 49
B. METODOLOGÍA ................................................................................................................................................. 51
1. ¿Qué es Design Thinking? .......................................................................................................................... 51
2. Fases del Design Thinking ......................................................................................................................... 52
a) Empatía .................................................................................................................................................................... 52
b) Definición ................................................................................................................................................................ 52
c) Ideación .................................................................................................................................................................... 52
d) Prototipado ............................................................................................................................................................... 53
e) Testeo ....................................................................................................................................................................... 53
C. ¿QUÉ ES SCRUM? ........................................................................................................................................... 53
1. Equipo SCRUM .......................................................................................................................................... 53
a) Desarrolladores ........................................................................................................................................................ 53
b) Product Owner ......................................................................................................................................................... 53
c) SCRUM Máster........................................................................................................................................................ 54
2. Eventos de SCRUM .................................................................................................................................... 54
a) Spring Planning ........................................................................................................................................................ 54
b) Daily Scrum .............................................................................................................................................................. 54
c) Sprint Review........................................................................................................................................................... 55
d) Sprint Retrospective ................................................................................................................................................. 55
3. Artefactos de SCRUM................................................................................................................................. 55
a) Product Backlog ....................................................................................................................................................... 55
b) Sprint Backlog ......................................................................................................................................................... 55
c) Incremento ............................................................................................................................................................... 55
D. RESTRICCIONES ................................................................................................................................................ 56
E. APLICACIÓN DE DESIGN THINKING .................................................................................................................... 58
1. Empatizar ................................................................................................................................................... 58
2. Definir ........................................................................................................................................................ 60
3. Idear ........................................................................................................................................................... 61
4. Prototipar ................................................................................................................................................... 62
5. Probar ........................................................................................................................................................ 75
F. APLICACIÓN DE SCRUM .................................................................................................................................. 76
1. Educción de Requisitos ............................................................................................................................... 76
a) Técnica utilizada ...................................................................................................................................................... 77
2. Historias de Usuario .................................................................................................................................. 84
3. Técnica de priorización .............................................................................................................................. 88
4. Sprint Planning ........................................................................................................................................... 88
5. Product Backlog ......................................................................................................................................... 90
6. Backlog ....................................................................................................................................................... 92
7. Sprint Backlog ............................................................................................................................................ 94
8. Daily Scrum ................................................................................................................................................ 95
9. Sprint Review .............................................................................................................................................. 95
10. Sprint Retrospective ............................................................................................................................... 95
G. IMPLEMENTACIÓN ............................................................................................................................................. 95
1. Investigación de gamificación, herramientas de aprendizaje y revisión de la plataforma actual:
Definición del alcance. ........................................................................................................................................ 97
2. Diseño de prototipos................................................................................................................................. 100
a) Rediseño del logo ................................................................................................................................................... 101
b) Creación de logros ................................................................................................................................................. 101
c) Prototipo en Figma ................................................................................................................................................. 103
3. Ingeniería de requisitos y arquitectura de software. ................................................................................ 113
a) Atributos y restricciones ........................................................................................................................................ 114
b) Diseño de la arquitectura ........................................................................................................................................ 115
4. Selección de tecnologías para el Backend y Frontend ............................................................................. 127
a) Tecnologías de desarrollo para el Backend y Frontend .......................................................................................... 127
b) Herramientas de desarrollo utilizadas y restricciones técnicas ............................................................................... 129
5. Desarrollo de la plataforma y pruebas automatizadas ............................................................................ 133
a) Proceso de desarrollo de los retos .......................................................................................................................... 134
b) Proceso de creación del componente visual ........................................................................................................... 135
c) Desarrollo............................................................................................................................................................... 136
d) Implementación de experiencia de usuario y usabilidad ........................................................................................ 163
Patrones de Diseño Utilizados ................................................................................................................. 164
6.
Pruebas de software automatizadas ......................................................................................................... 166
7.
H. PRUEBAS Y ANÁLISIS DE RESULTADOS............................................................................................................... 172
1. Casos de Prueba ....................................................................................................................................... 172
2. Pruebas Funcionales ................................................................................................................................ 181
3. Pruebas de impacto educativo .................................................................................................................. 191
4. Pruebas de Usabilidad ............................................................................................................................. 198
5. Pruebas Funcionales orientadas a los Videojuegos ................................................................................. 216
6. Pruebas Ad Hoc ........................................................................................................................................ 217
I. NIVEL DE MADUREZ DE LA TECNOLOGÍA TRL .................................................................................................. 219
J. ACCESO A LA APLICACIÓN ............................................................................................................................... 220
K. ESTÁNDARES DE INGENIERÍA EMPLEADOS DURANTE EL PROYECTO .................................................................... 220
VI. ANALISIS DE RESULTADOS ................................................................................................ 222
A. ANÁLISIS DE IMPACTOS ................................................................................................................................... 222
B. ANÁLISIS DE DISEÑO DE COMPONENTES ........................................................................................................... 223
C. CUMPLIMIENTO DE OBJETIVOS ....................................................................................................................... 223
D. CONCLUSIONES .............................................................................................................................................. 224
E. EXPERIENCIA DE DISEÑO EN INGENIERÍA DE SOFTWARE .................................................................................... 224
F. TRABAJOS FUTUROS ........................................................................................................................................ 225
VII. REFERENCIAS ....................................................................................................................... 226
VIII. ANEXOS................................................................................................................................... 230
LISTA DE TABLAS
Tabla 1 Elementos de Gamificación por Categoría .................................................................. 34

Tabla 2 Cuadro comparativo modelos de usabilidad ............................................................... 40
Tabla 3 Matriz de Riesgos, Mitigación y Plan de Acción ......................................................... 57
Tabla 4 Matriz de interesados ..................................................................................................... 58
Tabla 5 Matriz de Posicionamiento ............................................................................................ 62
Tabla 6 Equipo SCRUM ............................................................................................................. 76
Tabla 7 Ficha Técnica .................................................................................................................. 77
Tabla 8 Historia de usuario No.17 .............................................................................................. 85
Tabla 9 Historia de Usuario No.20 ............................................................................................ 85
Tabla 10 Historia de Usuario No.21 ........................................................................................... 86
Tabla 11 Historia de Usuario No.22 .......................................................................................... 86
Tabla 14 Planificación del proyecto ............................................................................................ 88
Tabla 15 Asignación de las Historias de Usuario ...................................................................... 89
Tabla 16 Product Backlog .......................................................................................................... 90
Tabla 17 Backlog Priorizado ....................................................................................................... 92
Tabla 18 Registro Sprint No.1 .................................................................................................... 94
Tabla 19 Registro Sprint No.2 ..................................................................................................... 94
Tabla 20 Registro Sprint No.3 ..................................................................................................... 95
Tabla 21 Funcionalidades Modificadas ...................................................................................... 98
Tabla 22 Funcionalidades Propuestas ...................................................................................... 100
Tabla 23 Evolución del logo....................................................................................................... 101
Tabla 24 Logros .......................................................................................................................... 102
Tabla 25 Atributos de calidad de software .............................................................................. 114
Tabla 26 Comparativa de tecnologías Backend ...................................................................... 127
Tabla 27 Comparativa Tecnologías Frontend ......................................................................... 127
Tabla 28 Tecnologías utilizadas ................................................................................................ 129
Tabla 29 Actividades de planeación ......................................................................................... 132
Tabla 30 Caso de prueba Registro de docente ......................................................................... 172
Tabla 31 Caso de prueba Registro de estudiante .................................................................... 173
Tabla 32 Caso de prueba Ingresar a un curso ......................................................................... 174
Tabla 33 Caso de prueba Habilitar Reto ................................................................................. 175
Tabla 34 Caso de prueba Resolver un reto .............................................................................. 175
Tabla 35 Caso de prueba Comprar un artículo Exitosamente .............................................. 176
Tabla 36 Caso de prueba Comprar artículo fallido ................................................................ 177
Tabla 37 Caso de prueba Mostrar Ranking del curso ............................................................ 177
Tabla 38 Caso de prueba Mostrar logros................................................................................. 178
Tabla 39 Caso de prueba Visualización del Ranking.............................................................. 178
Tabla 40 Caso de prueba Editar perfil del estudiante ............................................................ 178
Tabla 41 Caso de prueba Editar perfil del docente................................................................. 179
Tabla 42 Caso de prueba Realizar un reto sin éxito ............................................................... 179
Tabla 43 Caso de prueba Realizar Reto sin éxito en el último intento .................................. 180
Tabla 44 Ficha técnica Pruebas Funcionales ........................................................................... 181
Tabla 45 Ficha técnica prueba de validación de conocimientos ............................................ 195
Tabla 46 Ficha técnica encuesta de usabilidad ........................................................................ 201
Tabla 47 Resultados de prueba y oportunidades de mejora .................................................. 216
LISTA DE ILUSTRACIONES
Ilustración 1 Interfaz de usuario para realizar reto versión 1.0 .............................................. 23

Ilustración 2 Interfaz de usuario para él envió de retos versión 1.0 ........................................ 24
Ilustración 3 Objetivos de desarrollo sostenible ........................................................................ 26
Ilustración 4 Etapas Modelo de Desarrollo................................................................................ 27
Ilustración 5 Contexto Gamificado ............................................................................................ 27
Ilustración 6 Ventajas del Aprendizaje Basado en Juego [27] ................................................. 30
Ilustración 7 Pirámide Elementos de Gamificación [32] .......................................................... 33
Ilustración 8 Tipos de Jugadores por Richard Bartle [33] ....................................................... 37
Ilustración 9 Panal de la experiencia de usuario [34] ............................................................... 38
Ilustración 10 Modelos de Usabilidad [39] ................................................................................. 40
Ilustración 11 Interfaz gráfica de Duolingo5.............................................................................. 42
Ilustración 12 Interfaz Gráfica de Kahoot!6 .............................................................................. 42
Ilustración 13 Interfaz Gráfica de Socrative7 ............................................................................ 43
Ilustración 14 Interfaz Gráfica de Celebriti.edu8 ...................................................................... 43
Ilustración 15 Interfaz gráfica de checkio.org9 ......................................................................... 44
Ilustración 16 Interfaz gráfica de Codecombat10 ...................................................................... 45
Ilustración 17 Interfaz gráfica Codeavengers11 ......................................................................... 45
Ilustración 18 Interfaz gráfica de Codeingame12 ...................................................................... 46
Ilustración 19 Interfaz gráfica de Code.org13 ............................................................................ 46
Ilustración 20 Interfaz gráfica de Codecademy14 ...................................................................... 47
Ilustración 21 Interfaz gráfica Replit15 ...................................................................................... 47
Ilustración 22 Interfaz gráfica Scratch ...................................................................................... 48
Ilustración 23 Modelo de negocio ............................................................................................... 50
Ilustración 24 Fases de Design Thinking [48] ............................................................................ 52
Ilustración 25 Fases de la Metodología Scrum [50] ................................................................. 56
Ilustración 26 Triángulo de gestión de proyectos [51] .............................................................. 56
Ilustración 27 Triple Restricción Ampliada .............................................................................. 57
Ilustración 28 Mapa de empatía ................................................................................................. 60
Ilustración 29 Pantalla 1: Login .................................................................................................. 62
Ilustración 30 Pantalla 2: Crear Cuenta .................................................................................... 63
Ilustración 31 Pantalla 3: Crear Usuario Docente .................................................................... 63
Ilustración 32 Pantalla 4: Crear Usuario Estudiante ............................................................... 64
Ilustración 33 Pantalla 5: Inicio (Home) .................................................................................... 64
Ilustración 34 Pantalla 6: Curso ................................................................................................. 65
Ilustración 35 Pantalla 7: Habilitar Reto ................................................................................... 66
Ilustración 36 Pantalla 8: Lista de estudiantes .......................................................................... 66
Ilustración 37 Pantalla 9: Progreso del estudiante .................................................................... 67
Ilustración 38 Pantalla 10: Editar Perfil docente ...................................................................... 67
Ilustración 39 Pantalla 11: Ranking ........................................................................................... 68
Ilustración 40 Pantalla 12: Logros .............................................................................................. 69
Ilustración 41 Pantalla 13: Tienda .............................................................................................. 69
Ilustración 42 Pantalla 14: Artículos adquiridos ...................................................................... 70
Ilustración 43 Pantalla 15: Editar Perfil Estudiante................................................................. 70
Ilustración 44 Pantalla 16: Mapa del curso ............................................................................... 71
Ilustración 45 Pantalla 17: IDE................................................................................................... 72
12
TRANSFORMACIÓN DE LA HERRAMIENTA GAMIFICADA “LANGUAGE CONQUERS” …
Ilustración 46 Pantalla 18: Pista ................................................................................................. 73

Ilustración 47 Pantalla 19: Ejecutar Reto .................................................................................. 73
Ilustración 48 Pantalla 20: Dashboard Administrador ............................................................ 74
Ilustración 49 Pantalla 21: Listar ............................................................................................... 74
Ilustración 50 Pantalla 22: Guardar/Actualizar ....................................................................... 75
Ilustración 51 Encuesta Mecanismos de aprendizaje en la programación pregunta No.1.... 78
Ilustración 52 Encuesta Mecanismos de aprendizaje en la programación pregunta No.2... 79
Ilustración 60 Cronograma etapas de SCRUM ......................................................................... 96
Ilustración 61 Fases de Design Thinking.................................................................................... 96
Ilustración 62 Proceso de ejecución del proyecto ...................................................................... 97
Ilustración 63 Favicon ................................................................................................................ 101
Ilustración 64 Prototipo en Figma: Iniciar Sesión .................................................................. 104
Ilustración 65 Prototipo en Figma: Crear Cuenta .................................................................. 104
Ilustración 66 Prototipo en Figma: Registrar Usuario Profesor ........................................... 105
Ilustración 67 Prototipo en Figma: Registrar usuario estudiante ......................................... 105
Ilustración 68 Prototipo en Figma: Home del profesor y del estudiante .............................. 106
Ilustración 69 Prototipo en Figma: Curso ............................................................................... 106
Ilustración 70 Prototipo en Figma: Configuración del reto ................................................... 107
Ilustración 71 Prototipo en Figma: Lista de estudiantes ........................................................ 107
Ilustración 72 Prototipo en Figma: Progreso del estudiante .................................................. 107
Ilustración 73 Prototipo en Figma: Perfil del docente ............................................................ 108
Ilustración 74 Prototipo en Figma: Editar perfil estudiante .................................................. 109
Ilustración 75 Prototipo en Figma: Ranking ........................................................................... 109
Ilustración 76 Prototipo en Figma: Logros .............................................................................. 110
Ilustración 77 Prototipo en Figma: Tienda .............................................................................. 110
Ilustración 78 Prototipo en Figma: Artículos adquiridos....................................................... 111
Ilustración 79 Prototipo en Figma: Mapa del curso ............................................................... 111
Ilustración 80 Prototipo en Figma: IDE ................................................................................... 112
Ilustración 81 Prototipo en Figma: Pistas ................................................................................ 112
Ilustración 82 Prototipo en Figma: Ejecutar reto ................................................................... 113
Ilustración 83 Arquitectura de Capas ...................................................................................... 116
Ilustración 84 Arquitectura del Sistema Language Conquers ............................................... 117
Ilustración 85 Modelo C4 [59] ................................................................................................... 118
Ilustración 86 Diagrama de Contexto del Sistema .................................................................. 119
Ilustración 87 Diagrama de Contenedor del Sistema ............................................................. 120
Ilustración 88 Diagrama de Componentes ............................................................................... 121
Ilustración 89 Modelo Entidad-Relación ................................................................................. 122
Ilustración 90 Diagrama Dinámico Resolver Reto .................................................................. 123
Ilustración 91 Diagrama Dinámico Ranking ........................................................................... 124
13
Ilustración 92 Diagrama Dinámico Comprar Recursos ......................................................... 125

Ilustración 93 Diagrama Dinámico Obtener Logro ................................................................ 126
Ilustración 94 Planteamiento de los retos ................................................................................ 134
Ilustración 95 Ejemplo de instrucción en Scratch................................................................... 135
Ilustración 96 Diagrama de procesos para la solución de un reto ......................................... 136
Ilustración 97 Estructura del Backend.................................................................................... 137
Ilustración 98 Estructura del Frontend ................................................................................... 138
Ilustración 99 Creación reto ...................................................................................................... 139
Ilustración 100 Código validaciones crear reto ....................................................................... 140
Ilustración 101 Código actualización usuario flujo negativo ................................................. 141
Ilustración 102 Código actualización de usuario flujo positivo ............................................. 142
Ilustración 103 Código validación reto..................................................................................... 143
Ilustración 104 Código de asignación de logros....................................................................... 144
Ilustración 105 Código de validación de asignación de logros ............................................... 145
Ilustración 106 Código de obtención de logro Front ............................................................... 145
Ilustración 107 Código adquirir articulo ................................................................................. 146
Ilustración 108 Interfaz de usuario: Login .............................................................................. 147
Ilustración 109 Interfaz de usuario: Crear Cuenta................................................................. 148
Ilustración 110 Interfaz de usuario: Términos y condiciones ................................................ 148
Ilustración 111 Interfaz de usuario: Registrar estudiante ..................................................... 149
Ilustración 112 Interfaz de usuario: Registrar docente .......................................................... 149
Ilustración 113 Interfaz de usuario: Home del estudiante ..................................................... 150
Ilustración 114 Interfaz de usuario: Logros ............................................................................ 150
Ilustración 115 Interfaz de usuario: Ranking.......................................................................... 151
Ilustración 116 Interfaz de usuario: Tienda ............................................................................ 152
Ilustración 117 Interfaz de usuario: Artículos adquiridos ..................................................... 152
Ilustración 118 Interfaz de usuario: Perfil del estudiante ...................................................... 153
Ilustración 119 Interfaz de usuario: Mapa del curso .............................................................. 154
Ilustración 120 Interfaz de usuario: IDE ................................................................................. 155
Ilustración 121 Interfaz de usuario: Como practicar ............................................................. 155
Ilustración 122 Interfaz de usuario: Tema .............................................................................. 156
Ilustración 123 Interfaz de usuario: Ejecutar Reto ................................................................ 156
Ilustración 124 Interfaz de usuario: Instrucciones ................................................................. 157
Ilustración 125 Interfaz de usuario: Home del docente .......................................................... 157
Ilustración 126 Interfaz de usuario: Perfil del docente .......................................................... 158
Ilustración 127 Interfaz de usuario: Curso docente ................................................................ 158
Ilustración 128 Interfaz de usuario: Configuración del reto.................................................. 159
Ilustración 129 Interfaz de usuario: Estudiantes Matriculados ............................................ 159
Ilustración 130 Interfaz de usuario: Progreso del estudiante ................................................ 160
Ilustración 131 Interfaz de usuario: Dashboard del Administrador ..................................... 161
Ilustración 132 Interfaz de usuario: Listar Estudiantes ......................................................... 161
Ilustración 133 Interfaz de usuario: Registrar Estudiante..................................................... 162
Ilustración 134 Interfaz de usuario: Actualizar estudiante .................................................... 162
Ilustración 135 Inyección de Dependencias ............................................................................. 164
Ilustración 136 Patrón Singleton .............................................................................................. 164
Ilustración 137 Patrón Repository ............................................................................................ 165
14
Ilustración 138 Patrón Factory ................................................................................................. 166

Ilustración 139 Proceso de implementación de las pruebas unitarias ................................... 166
Ilustración 140 Configuración del archivo pom.xml............................................................... 167
Ilustración 141 Estructura Patrón Data Builder ..................................................................... 168
Ilustración 142 Creación del Data Builder .............................................................................. 169
Ilustración 143 Declaración constantes globales ..................................................................... 169
Ilustración 144 Inyección de dependencias .............................................................................. 170
Ilustración 145 Construcción de la prueba .............................................................................. 170
Ilustración 146 Estructura de las pruebas ............................................................................... 171
Ilustración 147 Reporte de Cobertura ..................................................................................... 172
Ilustración 148 Creación del perfil estudiante 1 ...................................................................... 181
Ilustración 149 Pantalla IDE del estudiante 1 ......................................................................... 182
Ilustración 150 Solución del reto del estudiante 1 ................................................................... 182
Ilustración 151 Perfil del estudiante número 1 ........................................................................ 183
Ilustración 152 Creación de usuario del estudiante 2 ............................................................. 183
Ilustración 153 Perfil del estudiante 2 ...................................................................................... 184
Ilustración 155 Registro del estudiante 3 ................................................................................. 185
Ilustración 156 Solución del reto 3............................................................................................ 185
Ilustración 158 Solución del reto 4............................................................................................ 186
Ilustración 160 Pantalla de Home 5 .......................................................................................... 187
Ilustración 162 Artículos Adquiridos del estudiante 5 ........................................................... 188
Ilustración 165 Instrucción reto básico .................................................................................... 190
Ilustración 166 Instrucción reto avanzado............................................................................... 190
Ilustración 167 Instrucciones de Acciones generadas ............................................................. 191
Ilustración 168 Login del estudiante para el usuario 7 ........................................................... 191
Ilustración 169 Solución del reto del estudiante para el usuario 7 ........................................ 192
Ilustración 171 Solución del reto del estudiante para el usuario 8 ........................................ 192
Ilustración 173 Solución de reto del estudiante para el usuario 9 ......................................... 193
Ilustración 174 Registro del estudiante para el usuario 10 .................................................... 194
Ilustración 175 Editar perfil del estudiante para el usuario 10 ............................................. 194
Ilustración 176 Solución del reto del estudiante para el usuario 10 ...................................... 195
Ilustración 177 Validación de conocimientos pregunta No.1 ................................................. 196
Ilustración 181 Alertas del sistema ........................................................................................... 199
Ilustración 182 Manejo de errores ............................................................................................ 199
Ilustración 183 Menú lateral ..................................................................................................... 200
15
Ilustración 184 Prevención de errores ...................................................................................... 200

Ilustración 185 Errores .............................................................................................................. 201
Ilustración 186 Semestre de los usuarios que realizaron la prueba ...................................... 202
Ilustración 187 Programas que realizaron la prueba ............................................................. 203
Ilustración 188 Rango de edad de los usuarios ........................................................................ 203
Ilustración 189 Nivel Académico de los usuarios .................................................................... 204
Ilustración 190 Facilidad de uso de la aplicación .................................................................... 204
Ilustración 191 Navegación de la aplicación ............................................................................ 205
Ilustración 192 Funcionalidades de la plataforma .................................................................. 205
Ilustración 193 Elementos de la interfaz .................................................................................. 206
Ilustración 194 Intuitividad de la plataforma.......................................................................... 206
Ilustración 195 Facilidad de completar tareas y actividades ................................................. 207
Ilustración 196 Expectativas de la aplicación .......................................................................... 207
Ilustración 197 La aplicación es amigable y atractiva visualmente....................................... 208
Ilustración 198 Agrado de los elementos visuales ................................................................... 209
Ilustración 199 Motivación de la plataforma ........................................................................... 209
Ilustración 200 Facilidad de entender la aplicación ................................................................ 210
Ilustración 201 Comodidad de la utilización de la plataforma .............................................. 210
Ilustración 202 Rapidez y fluidez de la plataforma ................................................................ 211
Ilustración 203 Retraso o lentitud de la plataforma ............................................................... 212
Ilustración 204 Respuesta inmediata de las acciones dentro de la plataforma .................... 212
Ilustración 205 Carga de los elementos .................................................................................... 213
Ilustración 206 Errores técnicos ............................................................................................... 213
Ilustración 207 Carga de la aplicación ..................................................................................... 214
Ilustración 208 Visualización de elementos en los dispositivos .............................................. 215
Ilustración 209 Usuarios conectados simultáneamente .......................................................... 215
Ilustración 210 Prueba Ad Hoc para la solución del reto ....................................................... 217
Ilustración 211 Mensaje de Error de la solución del reto ....................................................... 217
Ilustración 212 Posicionamiento incorrecto de los elementos ................................................ 218
Ilustración 213 Error por orden inadecuado de los elementos .............................................. 218
Ilustración 214 Respuesta correcta de solución del reto ......................................................... 218
Ilustración 215 Nivel de Madurez de la Tecnología ................................................................ 219
16
I. RESUMEN
La deserción universitaria ha experimentado un incremento debido a diversos factores,

entre los que se incluyen la situación económica, la pandemia, la virtualidad y los problemas
relacionados con las metodologías de enseñanza. Estos aspectos afectan el interés de los
estudiantes [1]. Frente a este panorama, las estrategias educativas han evolucionado con el
objetivo de fomentar el interés, la aplicación de conocimientos y el desarrollo de
habilidades analíticas, centrándose en la resolución de problemas prácticos. En este
contexto, la programación se ha convertido en una habilidad clave en nuestra sociedad
moderna para potenciar el pensamiento crítico y la capacidad de resolución de problemas
[2], además de abrir numerosas oportunidades laborales y ser fundamental en el mundo
digital.
En el caso de las ingenierías y carreras relacionadas con la programación, las dificultades

iniciales en el aprendizaje de esta disciplina constituyen una causa frecuente de deserción.
Sin embargo, en la actualidad, la enseñanza de la programación adquiere una gran
importancia. Por ello, una estrategia de aprendizaje utilizada para motivar a los estudiantes
en su proceso de aprendizaje es la implementación de herramientas gamificadas. Estas
herramientas generan un mayor interés por los temas abordados en clase al permitir a los
estudiantes practicar mediante actividades lúdicas, lo que los involucra de manera más
activa y los prepara para enfrentar los desafíos del campo laboral.
Con el propósito de mejorar la experiencia de aprendizaje y fortalecer los conocimientos

adquiridos en el curso de fundamentos de programación, se propone la implementación de
una herramienta gamificada que simule un entorno de desarrollo integrado (IDE, por sus
siglas en inglés). Esta versión de la herramienta se enfoca en los conocimientos básicos,
específicamente en el tema de algoritmos, que es fundamental en programación. Para
lograrlo, se utilizan ejemplos y situaciones de la vida real en los retos propuestos dentro de
la plataforma. De esta forma, los estudiantes podrán aplicar y reforzar los conocimientos
adquiridos durante el curso, al tiempo que desarrollan su capacidad para resolver problemas
de manera efectiva
17
Palabras clave: motivación, programación, gamificación, aprendizaje basado en juegos,

algoritmos, DeDalus.
II. ABSTRACT
University dropout has increased due to various factors such as economic situation,
pandemic, virtuality and problems with teaching methodologies, which affects students’
interest [1]. In the case of engineering and programming-related careers, initial difficulties
in learning this discipline are a common cause of dropout. However, programming
education has become vital. Programming has become a key skill in our modern society to
develop and improve critical thinking and problem-solving skills [2], opening numerous
job opportunities and being fundamental in the digital world. In view of this situation,
educational strategies have evolved, focusing on practical problem-solving to encourage
interest, knowledge application and analytical skills development. This practical approach
not only involves students more actively but also prepares them to face the challenges of
the job market. To improve the learning experience and reinforce the knowledge seen in the
programming fundamentals course, the implementation of a gamified tool that simulates an
integrated development environment (IDE) is proposed. This version of the tool focuses on
basic knowledge, specifically the topic of algorithms, which is a fundamental topic in
programming. This is achieved through the use of examples and real-life situations in the
proposed challenges contained in the platform. In this way, students will be able to apply
and reinforce the knowledge acquired during the course as well as develop their ability to
effectively solve problems.
Keywords: motivation, programming, gamification, game-based learning, algorithms,

DeDalus.
18
GLOSARIO
• Angular: Angular es un Framework de JavaScript de código abierto escrito en TypeScript,

tiene como objetivo principal el desarrollo de aplicaciones web de una sola página.
• Aprendizaje basado en juegos: Es la utilización de juegos como medio de instrucción. El

maestro toma un material o contenido lúdico en específico como apoyo para reforzar un tema
o lección en particular [3].
• DeDalus: Modelo de proceso de juego. El cual realiza un análisis en torno a procedimientos

o métodos que permitan implementar elementos de la Gamificación por medio de un modelo
abstracto de pasos, para el diseño de la estrategia de juego [4].
• Firebase: Firebase es una plataforma que ayuda a los desarrolladores en la publicación y

distribución de aplicaciones.
• Gamificación: La gamificación es una técnica que parte del conocimiento de los elementos
que hacen atractivos a los juegos e identifica, dentro de una actividad, tarea o mensaje
determinado, en un entorno de NO-juego, aquellos aspectos susceptibles de ser convertidos
en juego o dinámicas lúdicas. Todo ello para conseguir una vinculación especial con los
usuarios, incentivar un cambio de comportamiento o transmitir un mensaje o contenido. Es
decir, crear una experiencia significativa y motivadora [5].
• Juegos serios: Los Serious Games o “juegos serios”, son juegos diseñados con un propósito
formativo, en el cual el proceso de enseñanza se realiza a través de juegos que les permitan
a los estudiantes practicar y entender de manera lúdica y creativa un tema [6].
• Motivación: La voluntad de aprender, entendido como un interés de la persona por aprender

todo lo relacionado con su entorno [7].
19
III. INTRODUCCIÓN
A. Contexto
Las instituciones educativas han detectado la importancia del aprendizaje de la

programación desde los primeros grados de colegio, con el fin de reforzar las habilidades
de pensamiento crítico y la resolución de problemas [8].
La programación ha despertado un gran interés en el ámbito educativo y se promueve su

enseñanza desde edades muy tempranas en las escuelas y colegios. Esto busca fomentar el
desarrollo cognitivo y el pensamiento analítico en los niños. Estos conocimientos les
permiten desenvolverse de manera más efectiva en sus actividades, especialmente en áreas
relacionadas con las matemáticas y los números. Además, diversos estudios científicos han
demostrado los beneficios de aprender a programar desde edades tempranas. Esto resalta la
importancia de utilizar herramientas didácticas apropiadas [9].
El enfoque educativo STEM permite que los estudiantes y actores educativos tengan una
experiencia de aprendizaje activo integrado entre las áreas de la ciencia, tecnología,
ingeniería y matemáticas [10]. Incorporar la educación STEM desde la etapa escolar
fomenta el pensamiento crítico, la resolución de problemas, la creatividad, la innovación,
la investigación y el liderazgo de los estudiantes [11]. Estas habilidades son esenciales para
preparar al estudiante donde la tecnología y la ciencia son cada vez más importantes.
Los estudiantes que se adentran en el mundo de la programación a menudo se enfrentan a

una serie de desafíos, muchos de los cuales están relacionados con sus distintos estilos de
aprendizaje. Algunos estudiantes encuentran que la forma en que se les enseña no es la más
adecuada, lo cual suele reflejar una falta de motivación para aprender [12].
Desde el año 2020, se ha observado un aumento en el número de plataformas y herramientas

que buscan mejorar los conocimientos de los estudiantes en temas relacionados con el
pensamiento algorítmico y los lenguajes de programación [13]. Organizaciones como
Codecademy [14] han lanzado campañas para promover sus cursos, fomentar el interés por
la programación y motivar a los estudiantes a interactuar continuamente con ella.
Asimismo, se han desarrollado juegos como CoderBunnyz, Robot Turtles y Codingame,
que permiten a los estudiantes desarrollar su pensamiento lógico y la capacidad de
solucionar problemas mientras resuelven desafíos de manera didáctica. Sin embargo, es
importante tener en cuenta que este tipo de plataformas no siempre garantizan que el
estudiante aprenda o comprenda de manera adecuada los conceptos fundamentales de la
programación, situación que lleva a la frustración o deserción del estudiante.
La deserción universitaria es un desafío constante para las instituciones de educación

superior, quienes deben implementar estrategias para mejorar el proceso educativo de los
estudiantes con el fin de proporcionarles los conocimientos necesarios para enfrentar un
entorno laboral altamente competitivo.
20
El proyecto Language Conquers, se desarrolla para aumentar la motivación de los

estudiantes en el proceso de aprendizaje del concepto de algoritmos vistos en el curso de
fundamentos de programación y disminuir los niveles de deserción en los programas de
ingeniería de sistemas, ingeniería multimedia e ingeniería electrónica de la Universidad San
Buenaventura Cali.
El semillero de investigación LIDIS de la Universidad San Buenaventura de Cali ha estado

desarrollando una plataforma web gamificada desde el año 2018, con el objetivo de
proporcionar a los estudiantes una experiencia de usuario atractiva e interesante que les
permita aprender sobre los conceptos de programación. Esta propuesta tiene como objetivo
abordar los problemas de aprendizaje que muchos estudiantes experimentan y motivarlos a
continuar y mejorar sus habilidades de programación durante los primeros semestres de su
carrera.
La plataforma 'Language Conquers' fue creada con el objetivo de brindar una herramienta
didáctica para el aprendizaje, enfocada en el curso de fundamentos de programación durante
el primer semestre de la carrera. Esta plataforma ha sido diseñada para apoyar el proceso
formativo de los estudiantes, ofreciendo retos y actividades específicamente diseñados para
reforzar el tema de algoritmos.
El objetivo central de Language Conquers es proporcionar a los estudiantes la oportunidad

de aprender y practicar el concepto de algoritmo de manera efectiva. A través de la
resolución de desafíos y actividades dentro de la plataforma, los estudiantes tienen la
posibilidad de mejorar su comprensión y aplicar los principios fundamentales de los
algoritmos en un entorno interactivo y práctico. La plataforma ha sido desarrollada con un
enfoque en el aprendizaje activo, brindando a los estudiantes una experiencia enriquecedora
que les permite desarrollar habilidades algorítmicas de manera progresiva y significativa.
Durante la primera versión de la plataforma en el año 2018, las estudiantes Paola Andrea
Bóxiga y Luisa Brigitte González [15] realizaron importantes contribuciones en el diseño
y la experiencia de usuario de la herramienta. Posteriormente, en el año 2019, Luisa
Fernanda Canaval García [16] llevó a cabo la implementación de la herramienta, teniendo
en cuenta el diseño creado por las estudiantes mencionadas anteriormente. Asimismo, en el
año 2020, Juan David Arboleda [17], se encargó de diseñar nuevas funcionalidades,
considerando tanto la experiencia de usuario como los principios de gamificación. Durante
estas etapas iniciales de desarrollo, se identificó que la plataforma presentaba una falta de
interacción definida en la resolución de los retos por parte de los estudiantes.
Específicamente, se encontró que la interacción se limitaba al momento en que los usuarios
debían cargar archivos externos necesarios para cumplir con los desafíos. Esta limitación
de interacción impedía que los estudiantes se involucraran plenamente con la historia y
dinámica de la plataforma. Como resultado de esta limitación, se identificaron problemas
que afectaban negativamente los resultados obtenidos por los estudiantes al interactuar con
ella. Los problemas y sus detalles se abordarán de manera más específica en el Capítulo III
del presente documento.
21
El propósito de esta investigación es transformar la herramienta “Language Conquers” a

través de una historia en la que el estudiante se involucre mediante el desarrollo de
diferentes retos que le permitan conectar con los conceptos básicos de programación. La
herramienta ofrecerá a los estudiantes una interfaz que simula un entorno de desarrollo
integrado (IDE), lo que les permitirá tener su primer acercamiento a la herramienta de
programación. Con esta interfaz, podrán completar las actividades asignadas y recibir la
orientación del docente sobre los temas del curso para facilitar su proceso de aprendizaje.
Se decidió continuar con la implementación del método DeDalus [4], el cual fue propuesto
en la primera versión del proyecto. Este método consiste en un análisis de los
procedimientos y métodos necesarios para incorporar elementos de gamificación mediante
un modelo abstracto de pasos, con el objetivo de diseñar una estrategia de juego. Dicha
estrategia se empleará para generar un impacto en los estudiantes y desarrollar una
herramienta que facilite la enseñanza de la programación, además de servir como apoyo al
docente. A través de esta herramienta, se podrán plantear actividades y desafíos que brinden
al estudiante una experiencia enriquecedora para el desarrollo del curso. Asimismo, se
permitirá realizar un seguimiento y análisis de los avances y dificultades que el estudiante
enfrente a medida que avanza en su aprendizaje.
B. Planteamiento del Problema
La deserción de los estudiantes en los últimos cuatro años se ha incrementado por factores
conocidos como económicos y sociales, por lo que en el 2021 más de 39.000 estudiantes
universitarios dejaron de estudiar 1.
Las instituciones educativas han implementado estrategias y metodologías con el objetivo

de mantener el interés de los estudiantes en el aprendizaje y mejorar sus habilidades, sin
comprometer la calidad de la enseñanza. Estas estrategias incluyen diversos mecanismos
que buscan fomentar la motivación del estudiante hacia el aprendizaje continuo,
despertando en ellos un deseo por adquirir nuevos conocimientos y habilidades que puedan
aplicar en distintos contextos y situaciones.
Las estrategias en ingeniería, en particular en programación, incluyen la problematización,

socialización y proyectos. El objetivo del docente es fomentar el trabajo en equipo y el
interés del estudiante a través de proyectos, en ocasiones por medio de actividades lúdicas.
Sin embargo, esto no siempre es suficiente para mantener la motivación del estudiante,
especialmente cuando enfrenta dificultades en el curso. Además de las estrategias
mencionadas anteriormente para enseñar programación, existen otras metodologías de
aprendizaje activas que se utilizan en la educación. Estas metodologías de aprendizaje
fomentan la participación y el compromiso de los estudiantes en el proceso educativo.
Algunas de estas metodologías son:
1 https://caracol.com.co/programa/2021/11/04/sanamente/1636049871_761122.html
22
Aprendizaje Basado en Problemas (ABP): Este método de enseñanza se centra en la

resolución de problemas. Los estudiantes se enfrentan a problemas complejos y reales que
deben de analizar y resolver con los conocimientos previos y nuevos adquiridos durante el
proceso. Los estudiantes deben investigar y tomar decisiones para encontrar la solución, lo
que les permite desarrollar habilidades de pensamiento crítico y resolución de problemas.
Esta metodología fomenta el trabajo en equipo, la creatividad y la comunicación efectiva
[18].
Gamificación: Esta metodología utiliza elementos y técnicas de juegos en contextos no

lúdicos con el fin de motivar y aumentar la participación e interés de los estudiantes en
diferentes actividades o temas [19].
Flipped Classroom: Este modelo pedagógico consiste en invertir el orden tradicional de la

enseñanza, en ella los estudiantes reciben los contenidos y lecciones teóricas fuera del salón
de clase a través de materiales multimedia antes de asistir a la clase, por lo que en clase se
realizan discusiones, resolución de problemas y trabajos en equipo que evidencien la
aplicación de los conocimientos adquiridos. Este modelo fomenta la autonomía y la
responsabilidad de los estudiantes en su propio proceso de aprendizaje y les permite recibir
retroalimentación personalizada por parte del docente. Además, el Flipped Classroom
promueve el uso de tecnologías de la información y la creación de un ambiente colaborativo
y participativo [20].
Aprendizaje Basado en Retos (ABR): Es un enfoque pedagógico centrado en la

resolución de problemas complejos para fomentar el aprendizaje activo y el desarrollo de
habilidades. El ABR desafía a los estudiantes a aplicar sus conocimientos en situaciones
reales y a trabajar en equipo para encontrar soluciones innovadoras a problemas complejos.
El profesor plantea un reto o problema real que requiere de trabajo en equipo por parte de
los estudiantes para resolverlo. Los estudiantes investigan, analizan y sintetizan
información relevante de diversas fuentes y aplican habilidades de pensamiento crítico y
creatividad para encontrar soluciones efectivas [21].
Desing Thinking (DT): Esta metodología se utiliza para resolver problemas complejos y
fomentar la innovacion en diferentes campos. Se basa en la empatía, colaboración,
experimentación y pensamiento creativo para diseñar soluciones eficaces y adaptadas a las
necesidades de los usuarios. Para llegar a la solución se deben de pasar por diferentes etapas
de análisis, investigación, generación de ideas, prototipados y validación para corroborar la
validez de la propuesta planteada [22].
Los estudiantes de primeros semestres de la universidad enfrentan dificultades para

comprender los temas impartidos en clase debido a la metodología en que los docentes
dictan sus clases, la complejidad de los temas y la falta de material de apoyo motivador,
son factores que pueden influir en la pérdida de interés y motivación por la clase y la carrera
en sí misma. Como consecuencia, muchos estudiantes pueden perder completamente el
interés por el curso, lo que se refleja en su desempeño académico y en algunos casos, en su
decisión de abandonar la carrera.
23
C. Justificación del Problema
Las estrategias de aprendizaje que las instituciones educativas y docentes han

implementado buscan mantener o aumentar la motivación del estudiante y mejorar la
eficiencia del aprendizaje, por lo que la gamificación es una de las estrategias de aprendizaje
más utilizadas en los últimos cinco años, la cual permite apoyar a los docentes en la forma
en que desarrollan sus cursos y a los estudiantes para aumentar su motivación y reforzar sus
habilidades de programación [23]. Por lo que se decidió implementar esta estrategia en la
transformación de la herramienta que permita a los estudiantes de primeros semestres de
los programas de ingeniería de sistemas, multimedia y electrónica especialmente en el curso
de fundamentos de programación para aumentar la motivación, mejorar sus habilidades y
practicar los conocimientos aprendidos durante el curso.
Language Conquers es una herramienta desarrollada con el objetivo de apoyar a los

docentes y estudiantes en el proceso de enseñanza y aprendizaje de los conceptos de
programación. La plataforma busca fomentar un aprendizaje autónomo y compromiso
propio por parte del estudiante, con el fin de mejorar la comprensión y habilidades en la
programación.
En el año 2018, Paola Andrea Bóxiga y Luisa Brigitte González [15], Luisa Fernanda
Canaval García [16] y Juan David Arboleda [17], implementaron una plataforma que tenía
como objetivo facilitar a los estudiantes el acceso a recursos necesarios para dar solución a
los retos propuestos por el docente. Al analizar las funcionalidades de la plataforma, se
detectaron problemas que no cumplían su objetivo. Por lo tanto, este trabajo tiene como
objetivo transformar la plataforma para proporcionar a los estudiantes los recursos
necesarios para apoyar su proceso de aprendizaje a través de su uso.
Ilustración 1 Interfaz de usuario para realizar reto versión 1.0

24
Ilustración 2 Interfaz de usuario para él envió de retos versión 1.0
En las ilustraciones 1 y 2 se muestra el diseño y funcionalidad que tenía la plataforma en

la versión anterior, en la cual el estudiante cargaba los archivos que daban solución al reto
propuesto dentro de la plataforma, pero no había una interacción directa con la
herramienta a la hora de realizar el reto.
La herramienta Language Conquers tiene como objetivo apoyar el desarrollo del curso de
Fundamentos de programación en la Universidad San Buenaventura, con el fin de mejorar
la experiencia de los estudiantes en el proceso de aprendizaje de los conceptos básicos de
programación, por medio de la implementación de un prototipo básico de un entorno de
desarrollo integrado (IDE) en el cual el estudiante desarrolla los retos propuestos.
D. Descripción y análisis de la complejidad del problema
Se desarrollará una nueva versión de Language Conquers, la cual es una herramienta con
características de un LMS (Sistema de gestión de aprendizaje) con el fin de gestionar
contenido de aprendizaje en línea. A través de la implementación de nuevas funcionalidades
que le permitirán al estudiante acceder a material de apoyo y ejercicios prácticos con dos
niveles de complejidad utilizando los elementos de la gamificación para mejorar la
experiencia y la forma en que los docentes y estudiantes enseñan y aprender la
programación.
Los elementos propuestos para apoyar el proceso de aprendizaje del estudiante dentro de la
plataforma son:
• La plataforma proporciona material de apoyo como videos e información relevante al

tema de cada reto. Esto permite a los estudiantes acceder a información relacionada
con el reto sin tener que salir de la plataforma, lo que les ayuda a tener una compresión
más clara de cómo abordar y resolver el reto de manera efectiva.
25
• Durante el desarrollo de los retos, el estudiante tendrá la oportunidad de validar sus

soluciones y recibir retroalimentación inmediata en caso de que la respuesta sea
incorrecta. Esta herramienta le informará al estudiante sobre cuál es la solución
correcta, así como las razones por las cuales su solución no es válida, permitiéndole
aprender de manera efectiva.
• Se han considerado principios de usabilidad para que el estudiante tenga una

experiencia de aprendizaje más amigable y coherente con los conocimientos que debe
adquirir a través de la herramienta.
La nueva versión de Language Conquers incorpora como primera fase un simulador de un

entorno de desarrollo integrado (IDE) que proporciona una interacción amigable para los
estudiantes al utilizar la plataforma, lo que fomenta su interés y curiosidad por la
programación y los anima a desarrollar sus habilidades de pensamiento algorítmico. La
encuesta realizada por Paola Andrea Bóxiga y Luisa Brigitte González [15] (ver Anexo 1,
sección información de soporte) a estudiantes de los programas de Ingeniería de Sistemas,
Multimedia y Electrónica de la Universidad San Buenaventura Cali, permitió identificar el
interés de los estudiantes por la programación, muchos consideran que la metodología de
enseñanza no les resulta motivadora para dedicar más tiempo al estudio y la práctica de
programación.
E. Objetivos
1. Objetivo General
Desarrollar una herramienta gamificada con características LMS para apoyar el proceso de
enseñanza y aprendizaje, dirigido a estudiantes del curso de fundamentos de programación.
2. Objetivos Específicos
• Caracterizar los mecanismos de aprendizaje que utilizan los estudiantes de ingeniería
y su impacto en las habilidades adquiridas.
• Diseñar una estrategia de juego que permita apoyar el proceso de aprendizaje-
enseñanza en la programación, a través de ejercicios que impliquen un reto para el
estudiante.
• Desarrollar un IDE que integre actividades y mecánicas de gamificación para mejorar
la experiencia de aprendizaje de los estudiantes en el curso de fundamentos de
programación.
• Validar el impacto que tiene la herramienta en los estudiantes para los cursos de
programación a través de un análisis del desempeño del estudiante.
3. Objetivos de desarrollo sostenible

Teniendo en cuenta los objetivos de desarrollo sostenible (ODS) acordados por la
comunidad internacional de las naciones unidad para abordar los desafíos globales, este
26
proyecto contribuye especialmente al objetivo número 4 que habla sobre la educación de

calidad, el cual busca garantizar una educación inclusiva, equitativa y de calidad,
promoviendo oportunidades de aprendizaje para toda la vida. Teniendo en cuenta lo
anterior, Language Conquers se enfoca en los siguientes aspectos.
Ilustración 3 Objetivos de desarrollo sostenible
Según los objetivos descritos en la ilustración 3, la herramienta busca promover el acceso

a una educación de calidad, ofreciendo un aprendizaje efectivo y de alto nivel en
programación. Los desafíos planteados estimulan el pensamiento crítico y la creatividad,
fomentando la innovación en el campo. Además, se enfoca en fortalecer las habilidades
técnicas de los estudiantes a través de retos temáticos, actividades prácticas y
retroalimentación constante, preparándolos para su futuro profesional.
F. Planteamiento de la solución
1. Descripción de la solución
Para abordar el problema expuesto y tener en cuenta las mejoras e inconvenientes
identificados en la versión anterior de la plataforma, se implementa un prototipo de entorno
de desarrollo integrado (IDE). Este IDE está diseñado para que el estudiante pueda
familiarizarse con la forma en que se desarrolla software y aprenda los conceptos básicos de
programación desde un entorno orientado a lenguaje natural 2. Esto permitiría al estudiante
comprender y relacionar los temas explicados en el aula a través de retos y ejercicios
prácticos. Asimismo, el IDE debe ser intuitivo y fácil de usar, para facilitar el aprendizaje y
la comprensión de la programación para los estudiantes. Con ello, se espera que los
estudiantes puedan tener una experiencia más efectiva y amigable en el proceso de
aprendizaje de la programación.
2. Proceso de Ingeniería
En las diferentes versiones del proyecto se ha trabajado con un modelo estándar para el
desarrollo del proyecto, el modelo fue aceptado en el planteamiento inicial del proyecto en
el semillero de investigación del grupo LIDIS de la Universidad San Buenaventura de Cali.
2 https://elipse.ai/blog/definicion-de-la-tecnologia-lenguaje-natural/
27
Ilustración 4 Etapas Modelo de Desarrollo
En la ilustración 4 se evidencia el modelo de desarrollo que se estableció para el proceso

de investigación y desarrollo de la plataforma.
a) Etapa de modelo de investigación documental
Se utilizó el método DeDalus, y se realizó la investigación necesaria para aplicar elementos

de gamificación, aprendizaje basado en juegos y juegos serios, utilizando el contexto
gráfico [4].
Ilustración 5 Contexto Gamificado
En la ilustración 5 se muestra el contexto gamificado definido para el proyecto.
El método DeDalus aplica la gamificación para motivar a los usuarios y fomentar la

colaboración y la participación entre ellos. Este método se compone de tres elementos: el
procedimiento de ambiente de juego, que incluye las fases de evaluación inicial, análisis de
usuarios, objetivos de negocio, objetivos transversales y diseño de la estrategia; el ambiente
28
de juego, que establece las políticas y la experiencia de juego; y la medición y evaluación,

que consiste en el análisis de eficiencia y la revisión y ajustes.
b) Etapa de modelado de construcción de soluciones
En esta etapa se ha desarrollado las primeras fases de la aplicación web implementada con
el método DeDalus, evaluando las funcionalidades de la plataforma a través de un
desarrollo iterativo incremental.
Se llevo a cabo un rediseño de la aplicación, desarrollando prototipos en los que se priorizó

la usabilidad de la herramienta, considerando las dificultades y mejoras identificadas en
versiones previas de la plataforma.
c) Etapa de modelado de estudios de casos
En esta etapa, se llevó a cabo la validación de la estrategia propuesta por la Universidad

San Buenaventura en las sedes de Cali y Cartagena. Se tomó en cuenta el enfoque previo
de la herramienta con el objetivo de mejorar la experiencia del estudiante en la plataforma.
En el capítulo 3, se detalla el proceso realizado.
G. Entregables del proyecto

En esta sección, se presentan los productos resultantes del proyecto, tanto de software como
de otros elementos relacionados. Los entregables de software incluyen la versión específica
de la plataforma web y el código fuente. Por otro lado, los entregables no software abarcan
la documentación, el modelo de datos, el manual de usuario y el documento de requisitos
ágiles.
a) Productos de Software:
• Versión 2.0 de la plataforma web
• Código Fuente
b) Productos No Software:
• Documentación
• Modelo de datos
• Manual de usuario
• Documento de Requisitos Ágiles
29
IV. MARCO TEÓRICO
A. Aprendizaje basado en juegos
El aprendizaje basado en juegos consiste en la utilización de juegos como medio de

instrucción; es una experiencia inmersiva que resulta ser un método fundamental en el
desarrollo efectivo de habilidades, especialmente en la población joven, por lo que cada vez
está tomando más fuerza y protagonismo en los programas de desarrollo de los educadores,
principalmente en la era de la transformación digital [24].
El aprendizaje basado en juegos tiende a confundirse con la gamificación. A pesar de que

son términos muy cercanos, tienen diferencias muy importantes; principalmente la
gamificación se trata de convertir el proceso de enseñanza en un juego, mientras que el
aprendizaje basado en juegos se utiliza como parte del proceso de enseñanza, apoyando el
material propuesto por el profesor. Específicamente se diferencian en que el aprendizaje
basado en juegos o por sus siglas en ingles GBL (Game Based Learning) consiste en la
integración de juegos como enseñanza y evaluación dentro del plan de trabajo, mientras que
la gamificación se refiere a la integración de componentes y dinámicas del juego, en el que
se aprender usando elementos y técnicas del juego, para ello se requiere que el estudiante
tenga conocimientos previos, lo cual lleva al aumento de la motivación y la competitividad
por medio de logros y recompensas otorgadas por la culminación de actividades [24].
En el artículo Game Based Learning in medical education, se explora el potencial de los

juegos de ordenador como herramienta educativa, destacando la utilidad de este tipo de
aprendizaje en niños y adultos. Debido a la capacidad para influir en áreas críticas como la
medicina. En el artículo se analiza cómo los juegos pueden involucrar a los estudiantes de
una manera más activa y atractiva que los métodos educativos tradicionales y cómo la
gamificación de la educación puede mejorar la motivación y el aprendizaje de los
estudiantes [25].
Otro artículo que afirma las ventajas de utilizar este tipo de técnica es el artículo
Foundations of Game-Based Learning, en el cual se habla de cómo el uso de elementos de
juego en la educación en general proporcionar experiencias de aprendizaje más atractivas e
involucran más a los estudiantes en su propio aprendizaje [26].
En conclusión, el aprendizaje basado en juegos (GBL) es una metodología educativa que

utiliza juegos como herramientas de enseñanza y evaluación. Se ha demostrado que el GBL
tiene varias ventajas en comparación con métodos educativos tradicionales. Uno de los
principales beneficios del GBL es el aumento la motivación y el compromiso de los
estudiantes. Los juegos son intrínsecamente atractivos y divertidos, lo que ayuda a mantener
el interés de los estudiantes durante el proceso de aprendizaje. Además, los juegos suelen
tener un enfoque en el desafío y la superación de obstáculos, lo que fomenta la
perseverancia y el desarrollo de habilidades de resolución de problemas.
30
Ilustración 6 Ventajas del Aprendizaje Basado en Juego [27]
La ilustración 6 hace referencia a las ventajas del aprendizaje basado en juegos, las
cuales se detallan a continuación.
1. Motiva al alumno: Permite captar con facilidad la atención del alumno, ya que
proporciona un entorno divertido que los motiva y los envuelve en el tema, gracias no solo
al logro final sino también al proceso de la actividad lúdica.
2. Ayuda a razonar y ser autónomo: El juego le plantea al alumno situaciones en las que
debe reflexionar y tomar decisiones adecuadas a la situación, corregir errores y anteponerse
a las derrotas. Con esto el estudiante no estará solamente asimilando y obteniendo los
conceptos y habilidades del tema, sino que estará desarrollando capacidades cognitivas
atreves del pensamiento crítico.
3. Permite el aprendizaje activo: Ayuda a que los estudiantes ejerciten de manera practica
sus conocimientos. El alumno experimenta dentro del juego y practica la prueba y error.
Crea relación entre los conocimientos viejos y nuevos y establece estrategias para resolver
problemas.
4. Da al alumno el control de su aprendizaje: El aprendizaje basado en juegos

proporciona a los estudiantes una retroalimentación instantánea respecto a sus
conocimientos sobre el tema, por lo que el estudiante conoce sus fortalezas y debilidades
de manera inmediata en el tema de interés.
5. Proporciona información útil al profesor: El juego le permite al profesor estar al tanto

de los avances de sus estudiantes y con esto detectar fortalezas y debilidades respecto a la
asignatura y comprobar el nivel de comprensión del conocimiento. Permite también un
acercamiento más profundo a cada estudiante, pudiendo detectar con mayor facilidad
cualquier inquietud o problema con el que se encuentren sus alumnos.
31
6. Potencia la creatividad y la imaginación: El juego fomenta la libertad de improvisar y

la capacidad de imaginar soluciones. Este beneficio se puede complementar con que los
mismos estudiantes sean quienes desarrollan, modifican o mejoran los retos.
7. Fomenta las habilidades sociales: Este modelo de aprendizaje permite el trabajo

colaborativo, por lo que fomenta la comunicación, dialogo, el liderazgo y la capacidad de
colaborar por un objetivo común.
8. Contribuye a la alfabetización digital: Si se opta por un juego, aplicación o actividad

lúdica en línea, no solo se estarán aprovechando las ventajas del juego, sino que además se
suman los beneficios de la aplicación de las TIC. Los alumnos se familiarizarán con el
manejo de las nuevas tecnologías y ganarán habilidades con estas herramientas.
B. Juegos serios
Los juegos serios son aquellos juegos diseñados para educar de manera divertida e
interactiva, los cuales utilizan la diversión como un modo de formación con objetivos en
diferentes ámbitos [6]. Estos juegos presentan características como:
• Están destinados para la educación, el entrenamiento en habilidades determinadas, la

comprensión de procesos complejos, sean sociales, políticos, económicos o religiosos.
• Están vinculados en forma evidente con algún aspecto de la realidad. Esto favorece la
identificación del jugador con el área de la realidad que se está representando en el
ambiente virtual.
• Constituyen un ambiente tridimensional virtual en el que se le permite una práctica
"segura" a los aprendices en algunas áreas.
• Hay intereses manifiestos en sus contenidos.
Tipos de juegos serios:
• Educativo: Se centra en el ámbito educativo, como las materias de un curso o en

ámbito cultural.
• Juegos de simulación: Es una herramienta que facilita el aprendizaje, se utilizan para
aprender y reaccionar en condiciones de continuo cambio.
• Juegos para la salud: Juegos orientados al tratamiento psicológico o cognitiva.
• Juegos persuasivos: Estos juegos están diseñados para, cambiar actitudes y/o
comportamientos sociales, políticos, religiosos o de salud.
• Advergames: Son juegos publicitarios y su enfoque es promocionar una marca o
producto.
32
C. Learning Management Systems (LMS)
Las plataformas e-learning son herramientas educativas en entornos virtuales

fundamentadas en la implementación de técnicas de enseñanza-aprendizaje en línea, por lo
que pueden ser enseñadas de manera presencial, virtual o combinado apoyando el
aprendizaje E-Learning o B-Learning, las cuales tiene como objetivo la creación y gestión
de espacios de enseñanza que permiten adquirir diferentes conocimientos y habilidades
[28].
El crecimiento de las plataformas online se ha incrementado en los últimos seis años

aumentando más de un 179% debido a las necesidades y curiosidades que han tenido las
personas por aprender o mejorar sus habilidades y conocimientos 3. En Colombia más del
96,7% de las universidades disponen de plataformas virtuales para los docentes y
estudiantes [29].
Los LMS permiten crear y gestionar múltiples espacios virtuales de aprendizaje, estas
herramientas se crean incorporando plantillas que permiten personalizarse según las
necesidades del proceso de aprendizaje teniendo en cuenta funciones según los objetivos o
necesidades específicas que se requieran [28].
D. Gamificación
La educación ha implementado diferentes estrategias que permitan al estudiante mejorar el

proceso de aprendizaje, permitiéndole adquirir conocimientos de manera más rápida y
fundamentada. La aplicación de estas estrategias se ha potencializado en los últimos cuatro
años debido a la pandemia del COVID-19, en donde la educación se volvió poco interesante
o paso a estar en un segundo plano para algunos estudiantes [1], en el cual no encontraban
un método o técnica que les permitiera mantener el interés por estudiar teniendo en cuenta
las diversas distracciones que se tienen en la actualidad como las redes sociales y que años
atrás no se tenían 4. Las estrategias y metodologías que se han utilizado han cambiado la
forma tradicional de enseñar y mantener al estudiante interesado por el tema y evitar que se
generen distracciones, este es el caso de técnicas que implementan el juego con el
aprendizaje, integrando elementos de un juego pero que tiene como objetivo enseñar un
tema en especial.
La gamificación es una técnica que introduce elementos de juego en un entorno educativo,

generando un cambio en la mentalidad del estudiante hacia las actividades educativas. Este
enfoque fomenta el interés, el compromiso y la motivación, incluso más allá de la
finalización de una clase o actividad [30]. La gamificación permite a los estudiantes
enfrentar desafíos y vivir experiencias que refuerzan los temas abordados en el curso,
brindándoles una nueva perspectiva en su proceso de aprendizaje.
3 https://expansion.mx/tecnologia/2020/05/11/las-plataformas-de-aprendizaje-online-crecen-mas-del-179
4 https://www.elcolombiano.com/tendencias/pandemia-afecto-la-salud-mental-de-universitarios-FF15459905
33
Una definición de gamificación es “La gamificación se basa en el uso de elementos del

diseño de videojuegos en contextos que no son de juego para hacer que un producto,
servicio o aplicación sea más divertido, atractivo y motivador” [31]. Esta definición permite
captar una de las principales necesidades en la elaboración de una plataforma gamificada,
en la que el diseño, el objetivo y la historia son elementos esenciales para captar la atención
del estudiante, motivándolo y trasformando su proceso de aprendizaje, en donde interactúe
con sus compañeros de manera colaborativa y competitiva durante el curso.
La gamificación es una técnica que permite ser aplicada a diferentes áreas de conocimiento
y a estudiantes de todas las edades, facilitando a través de la tecnología integrar diferentes
áreas y estrategias e incorporar el pensamiento creativo por medio de los retos a los que el
estudiante se enfrenta y las soluciones que le permiten completar las actividades.
1. Elementos de gamificación
Al ser la gamificación una técnica basada en el juego, este implementa elementos o
mecánicas de un juego que le permita al estudiante sentir que está jugando a la vez que
aprende, por lo que Kevin Werbach y Dan Hunter plantean los elementos en tres categorías:
Dinámicas, Mecánicas y Componentes [32].
Ilustración 7 Pirámide Elementos de Gamificación [32]
En la ilustración 7 se expone la pirámide de los elementos de la gamificación, el cual

permite comprender cada uno de las categorías y los elementos que componen a cada una.
• Dinámicas: Es la forma en la que se ponen en marcha las mecánicas, determinando

el comportamiento del estudiante y su motivación.
• Mecánicas: Son los componentes básicos del juego, las reglas y su funcionamiento.
34
• Componentes: Son los recursos con los que el estudiante cuenta y las herramientas
que se utilizan para diseñar una actividad.
De manera más explícita se describen los elementos que contienen cada una de las
categorías de los elementos que hacen parte de la gamificación en la siguiente Tabla 1.
Tabla 1 Elementos de Gamificación por Categoría

Categoría Elemento Descripción Implementación
Se evidencia en la motivación
Curiosidad, competitividad, que le generara al usuario al
Emociones
frustración y felicidad. entrar a la plataforma y
permanecer en ella.
Una historia continuada en la
Creación de historia, guion y
Narración base del proceso de
animaciones.
aprendizaje.
A medida que el estudiante
Dinámicas avance en los desafíos tendrá
Evolución y desarrollo del
Progresión una mayor conceptualización de
jugador/alumno.
los temas trabajados y
practicados en los retos.
Interacciones sociales,
Relaciones compañerismo, estatus, No Aplica
altruismo.
Limitaciones o componentes
Restricciones No Aplica
forzosos.
Unos ganan y otros pierden. Solución de los retos y su
Competición
También contra uno mismo. resultado.
Tareas que implican esfuerzo,
Desafíos Solución de los retos.
que supongan un reto.
Desbloqueo de logros durante la
Recompensas Beneficios por logros.
realización del reto.
Retroalimentaci Resultado o consejo al finalizar
Como lo estamos haciendo.
ón el reto.
Mecánicas Trabajar juntos para conseguir
Colaboración No Aplica
un objetivo.
Suerte Influye el azar. No Aplica
Comercio entre jugadores,
Transacciones directamente o con No Aplica
intermediarios.
Participación secuencial,
Turnos No Aplica
equitativa y alternativa.
Representación visual del Creación de personaje para el
Avatar
jugador. usuario.
Objetos y logros que se van
Elementos que pueden
Colecciones acumulando a medida que se
acumularse.
van descubriendo.
Componentes
Desbloqueo de los siguientes
Desbloqueo de Nuevos elementos disponibles
retos a medida que el estudiante
contenidos tras conseguir objetivos.
avanza.
Representación visual de los Tarjetas con la insignia del
Insignias
logros. logro desbloqueado.
35
Límites de Competir contra el tiempo y Tiempo límite permitido para el

tiempo con uno mismo. desarrollo de un reto.
Desafíos predeterminados con Creación de misiones asociadas
Misiones
objetivos y recompensas. a la isla.
Diferentes estados de Creación de los 3 primeros
Niveles
progresión y/o dificultad. niveles.
Recompensas que representan Monedas y puntaje obtenido en
Puntos
la progresión. cada reto.
Clasificaciones
Representación gráfica de la Barra de progreso general del
y barras de
progresión y logros. estudiante.
progreso
Familiarizarse con el juego, Creación de video y manual de
Tutoriales adquisición de normas y usuario sobre el funcionamiento
estrategias. de la plataforma.
Combate Batalla definida. No Aplica
Trabajo en grupo con un
Equipos No Aplica
objetivo común.
Graficas Representan la red social del
No Aplica
sociales jugador dentro de la actividad.
Huevos de Elementos escondidos que
No Aplica
pascua deben buscarse.
Oportunidad de compartir
Regalos No Aplica
recursos con otros.
En la Tabla 1 se presentan los elementos correspondientes a cada categoría de

gamificación, tal como lo definen Kevin Werbach y Dan Hunter [32], de los cuales han sido
empleados 17 en la implementación de la plataforma Language Conquers.
E. DeDalus
Se denomino método DeDalus por el inventor mitológico Dédalo, a quien se le atribuye el

diseño de las reglas de juegos de las deidades griegas [4]. Este método propone un diseño
para las estrategias de juego, implementando elementos que permitan medir las estrategias
diseñadas a través de 3 componentes. Ver ilustración 5
1. Procedimiento de ambiente de juego

En este componente se tienen 5 pasos que permiten determinar los elementos que la
organización debe tener en cuenta para diseñar la estrategia de juego.
• Evaluación inicial: Permite analizar al interior de la organización, el impacto y las

consecuencias de la problemática identificada y se tienen en cuenta los elementos
necesarios para la evaluación como tecnologías involucradas, artefactos,
comportamiento y dinámicas asociadas a la problemática.
• Análisis de usuario: Se determinan los usuarios que se convertirán en jugadores,
teniendo claro el propósito de cada uno y como se aplicara la dinámica de juego según
la estrategia que se desea diseñar.
36
• Objetivos de negocio: Permiten establecer las metas, que se buscan alcanzar con la
implementación con la estrategia de juego en el interior de la organización.
• Objetivos transversales: Se establecen las metas o propósitos específicos a los
usuarios finales, teniendo en cuenta la motivación extrínseca e intrínseca de los
jugadores para determinar los objetivos durante el juego.
• Diseño de la estrategia: Se realiza la configuración de los elementos anteriores y se
establecen las métricas para realizar una posterior medición del alcance planteado.
2. Ambiente de juego
Contiene dos etapas las cuales son las políticas de juego y la experiencia del juego. En este
componente se define las reglas, las mecánicas y dinámicas del juego.
• Políticas de juego: Permite determinar las reglas y condiciones de la estrategia del

juego, se diseñan con el objetivo de generar entretenimiento y motivación en el jugador
durante el juego.
• Experiencia de juego: Se definen las dinámicas del juego, teniendo en cuenta los
niveles de experiencia y la adaptación que tendrá el jugador.
3. Medición y evaluación
Se realizan las validaciones de la estrategia implementada analizando la eficiencia y la
revisión y ajuste de la estrategia. Este componente permite estimar la efectividad de las
mecánicas usadas y cuantificar el alcance a través de indicadores obtenidos de los elementos
de juego.
• Análisis de eficiencia: El diseñador del juego y el equipo de trabajo de la organización

definen los indicadores de medición a partir de los componentes usados en la estrategia
de juego.
• Revisión y ajuste: Se realiza el análisis de los resultados, determinando si cumplen
con los objetivos transversales y el objetivo de negocio fue alcanzado, con ella se
decide si es necesario realizar ajustes en las métricas del juego, en dado caso este
método propone saltar al procedimiento y regresar a la etapa de diseño de la estrategia
para ajustar lo que se considere necesario como mecánicas, dinámicas o elementos del
juego.
F. Tipos de Jugadores
Para poder empezar a implementar la metodología de gamificación debemos primero

conocer que tipos de usuarios y sus características vamos a tener en nuestro juego.
A principios de los 2000, el inglés Richard Bartle estableció una clasificación de los
jugadores de videojuegos partiendo de dos ejes: Eje de relación (Prefiere relacionarse con
otros jugadores o prefiere relacionarse con el mundo del juego), eje de competencia
(Prefiere interactuar o prefiere actuar) [28].
37
Ilustración 8 Tipos de Jugadores por Richard Bartle [33]
La ilustración 8 se hace referencia a los tipos de jugadores según como lo determina

Richard Bartle, según los ejes de relación y competencia que influyen en el juego.
• Triunfador: Son aquellos que prefieren interactuar con el mundo del juego y les
encanta actuar, siempre van a cumplir misiones y a obtener logros. Se caracterizan
por ser competitivos y por siempre querer superar retos. Estas personas
normalmente son muy independientes y están enfocadas a sus logros personales.
• Explorador: Al explorador también le gusta la interacción con el mundo, pero este

no se enfoca en la acción, prefiere interactuar con el juego. Le gusta desarrollarse
en el juego sin prisa y con calma, le gusta descubrir el mundo, sus zonas secretas y
le gusta llegar hasta donde otros jugadores no llegan. Se interesa por las mecánicas
del juego y se interesa por aprender al máximo sobre estas.
• Socializador: Los socializadores disfrutan de interactuar con los otros jugadores y

no tanto del juego en sí. Son buenos en el trabajo de equipo y colaborando. Para
ellos el juego es solo una herramienta para lograr interactuar con otras personas.
• Killer: A estos jugadores les encanta socializar, pero su enfoque no es de

colaboración. Sino que les encanta competir, su enfoque es la acción. A estos
jugadores les gusta imponerse sobre el resto, les encanta ganar y alardear sobre sus
triunfos.
G. Experiencia de usuario
Es un conjunto de elementos que permiten la interacción de un usuario con un producto o

servicio, Peter Morville pionero en la experiencia de usuario [34], identifico siete factores
que construyen la experiencia de usuario, también conocido como el panal de la experiencia
del usuario, en donde cada factor representa una necesidad que experimenta el usuario.
38
Ilustración 9 Panal de la experiencia de usuario [34]
Teniendo en cuenta el diagrama “Panal de experiencia de usuario” de la ilustración 9, se

presenta a continuación una descripción detallada de cada una de las siete facetas que lo
componen. Estas facetas representan los aspectos clave que contribuyen a una experiencia
de usuario positiva y satisfactoria. A continuación, se detallan cada una de ellas:
• Útil: Se debe preguntar si el producto o sistema que se está creando es útil, generando
la solución a un problema de manera innovadora.
• Usable: El usuario debe poder realizar acciones de manera eficiente en el sistema.
• Deseable: Debe ser atractivo para el usuario, generando deseo por consumir el
contenido del producto o sistema.
• Encontrable: Se espera que el sistema y sus elementos sean localizables para que los
usuarios encuentren fácilmente lo que necesitan.
• Accesible: El sistema debe ser accesible para los usuarios teniendo en cuenta la
población con discapacidad.
• Creíble: Se debe garantizar la calidad y veracidad de los contenidos que se están
ofreciendo al usuario.
• Valioso: Es algo abstracto como emociones o aprendizaje, entregando valor al
cliente.
H. Experiencia del jugador
La experiencia del jugador en videojuegos se refiere a las sensaciones, emociones y

percepciones que experimenta el jugador al interactuar con un videojuego [35]. Se centra
en entender cómo se siente el jugador durante la experiencia de juego, como es su
interacción con el juego y como logra percibir los elementos que hacen parte de este [36].
La Jugabilidad o experiencia del jugador es un concepto abstracto que posee características

tanto funcionales, inherentes a todo sistema interactivo, como no funcionales, relacionadas
39
con las experiencias que obtiene el jugador al jugar, Por lo tanto, se define la Jugabilidad
como el conjunto de propiedades que describen la experiencia del jugador ante un sistema
de juego determinado, cuyo principal objetivo es divertir y entretener "de forma
satisfactoria y creíble" ya sea solo o en compañía.
I. Experiencia del estudiante
La experiencia del estudiante hace referencia a los sentimientos, percepciones y sensaciones

que el estudiante tiene durante su proceso de aprendizaje en un entorno educativo [37].
Incluyendo los elementos que intervienen en la forma en que aprende el estudiante, las
metodologías de enseñanza, el entorno físico y social, el uso de tecnologías, la calidad de
las relaciones interpersonales y otros factores.
Esta experiencia analiza los sentimientos del estudiante durante su proceso de aprendizaje,
la forma en la que interactúa con los profesores y otros estudiantes y como perciben el
entorno educativo. Se utilizan técnicas como la retroalimentación correctiva para ayudar al
estudiante a comprender sus errores y encontrar soluciones para corregirlos, la adaptación
a los métodos de enseñanza para mejorar la experiencia de aprendizaje del estudiante. Una
experiencia positiva puede activar o aumentar la motivación, dedicación y desempeño
académico logrando éxito académico y personal del estudiante [37].
J. Usabilidad
La usabilidad hace referencia a la capacidad de un producto de Software que pueda ser

entendido, aprendido, usado y que sea atractivo para el usuario [38]. Un término muy
utilizado es “Amigable con el usuario “, el cual hace referencia a que tan usable es el sistema
o producto, según Jakob Nielsen y Rolf Molich, citado por Walter Sánchez, determina que
“El usuario debe ser capaz de comprender el funcionamiento del sitio inmediatamente
después de recorrer la página principal pocos segundos después”, debido a que la usabilidad
se aplica a productos y servicios informáticos, interfaces web y multimedia interactiva, en
donde la complejidad e interacción con softwares sofisticados pueden llegar a determinar
el éxito o fracaso del producto [39].
Jakob Nielsen y Ben Shneiderman escribieron por separado un marco de trabajo para la
aceptabilidad del sistema determinando la usabilidad como parte de la “Utilidad”
compuesta por las siguientes características [39]:
• Facilidad de aprendizaje: Facilidad de aprender las funcionalidades y el

comportamiento del sistema, se tiene en cuenta cuanto tiempo le toma al usuario
aprender a utilizar el software y conocer sus operaciones básicas.
• Eficiencia de uso: Hace referencia a la rapidez con la que el usuario puede completar
tareas específicas.
• Retención sobre el tiempo: Que tan fácil el usuario recuerda y se adapta al sistema
después de que utilizó el sistema por última vez.
40
• Tasas de error: Capacidad del sistema para evitar errores y como el usuario puede
solucionarlos ayudándolos en su recuperación, se tiene en cuenta la cantidad y el tipo de
errores que el usuario comete al ejecutar un grupo de tareas.
• Satisfacción: Que tan bien se sintió el usuario con los atributos y elementos del sistema.
Ilustración 10 Modelos de Usabilidad [39]
La ilustración 10 ofrece un análisis de los modelos de usabilidad desarrollados por Nielsen

en 1994 y Shneiderman y Plaisant en 2005, destacando las diferencias clave en sus
enfoques. Para una comprensión más exhaustiva, se presenta la Tabla 2, que realiza una
comparación detallada entre ambos modelos.
Tabla 2 Cuadro comparativo modelos de usabilidad

Modelo de
Jakob Nielsen Ben Shneiderman
usabilidad
Propone un conjunto de Propone el modelo de los ocho
heurísticas o principios de "golden rules" o reglas de oro,
Enfoque usabilidad que se centran en la que se centran en brindar una
detección y solución de problemas experiencia de usuario intuitiva y
de diseño en una interfaz. eficiente.
Los principios de Nielsen
incluyen la visibilidad del estado
del sistema, la correspondencia
Las reglas de Shneiderman
entre el sistema y el mundo real,
incluyen la consistencia, la
la libertad para controlar y
universalidad, la
deshacer acciones, la consistencia
Principios retroalimentación informativa, la
y estándares, la prevención de
clave prevención de errores, la
errores, el reconocimiento en
flexibilidad y eficiencia de uso,
lugar de la memoria, la
la capacidad de recuperación, la
flexibilidad y eficiencia de uso, el
familiaridad y la simplicidad.
diseño estético y minimalista, la
ayuda y documentación, y el
feedback informativo.
Shneiderman enfatiza la
Nielsen sugiere realizar pruebas
importancia de realizar pruebas
de usabilidad con usuarios reales
tempranas y regulares durante el
para identificar problemas y
Enfoque de proceso de diseño, así como la
mejorar la experiencia del usuario.
evaluación utilización de métodos
Se recomienda realizar pruebas
cuantitativos y cualitativos para
periódicas durante todo el proceso
evaluar la usabilidad de la
de diseño y desarrollo.
interfaz.
41
Teniendo en cuenta la comparación realizada en la Tabla 2, ambos modelos comparten

principios clave como la consistencia, la prevención de errores y la flexibilidad de uso. Sin
embargo, Nielsen se centra en la detección y solución de problemas de diseño específicos,
mientras que Shneiderman destaca la importancia de reglas generales que guían el diseño
de una interfaz intuitiva y eficiente.
Beneficios de la usabilidad
• Reducción de los costos de aprendizaje, asistencia y ayuda al usuario.

• Optimización de los costos de diseño, rediseño y mantenimiento.
• Aumento de los usuarios en un sitio web.
• Mejora de la calidad del producto.
• Mejora la calidad de vida de los usuarios, incrementando la satisfacción y
productividad.
K. Motivación
La motivación es una atracción hacia un objetivo que supone una acción por parte del sujeto
y permite aceptar el esfuerzo requerido para conseguir ese objetivo. La motivación está
compuesta de necesidades, deseos, tensiones, incomodidades y expectativas [40].
La motivación intrínseca se origina en el interior de cada persona y no depende de estímulos

externos. Se refiere al deseo de la persona de enfrentar nuevos desafíos y superarse a sí
misma [41]. Fomentar esta motivación en el aula puede ser un desafío, ya que cada
estudiante es un individuo diferente y es necesario conocer sus necesidades y deseos.
La motivación extrínseca se refiere a los motivos que llevan a una persona a realizar una
actividad o trabajo, los cuales no provienen de su interés o deseo personal, sino de una
recompensa externa [42].
la motivación del estudiante se refiere a su deseo de participar en el proceso de aprendizaje

y las razones detrás de su participación o no participación en las actividades académicas
[41].
L. Antecedentes
En la actualidad, el uso de herramientas interactivas en el aula de clase ha aumentado

significativamente, con lo cual se ha demostrado que puede mejorar la concentración y
motivación de los estudiantes, así como también potenciar sus habilidades [43]. Buscando
mejorar la capacidad de aprendizaje del estudiante y mantener la motivación e interés por
la programación, se han implementado en los últimos años diferentes plataformas o
aplicaciones web para el aprendizaje de conceptos básicos de la programación como
algunos leguajes de programación que utilizar mecánicas y dinámicas de juego propias de
la gamificación y a su vez han implementado estrategias que permitan a atraer al usuario
con su contenido y diseño audiovisual, permitiéndole una mayor experiencia de usuario, de
42
tal forma que llame la atención del estudiante y lo motive a avanzar en las actividades
propuestas por estas plataformas, como:
1. Duolingo 5: Permite aprender de manera gratuita varios idiomas, utilizando componentes

de gamificación como la elección de desafíos, puntos y ranking por los puntos obtenidos.
Ilustración 11 Interfaz gráfica de Duolingo5
2. Kahoot! 6: Es una plataforma que permite crear juegos a partir de preguntas y respuestas
realizadas por la misma comunidad, tiene como objetivo aumentar la competitividad y
entretenimiento a medida que se aprende y se evidencia los conocimientos del estudiante,
utiliza elementos de gamificación como son los puntos obtenidos por las respuestas
correctas y el ranking de posición [44].
Ilustración 12 Interfaz Gráfica de Kahoot!6
5 https://es.duolingo.com/
6 https://kahoot.com/
43
3. Socrative 7: Esta aplicación permite evaluar a los estudiantes por medio de juegos,
quizzes, cuestionarios y ranking de resultados, basando el aprendizaje en la participación
e interacción continua de los estudiantes.
Ilustración 13 Interfaz Gráfica de Socrative7
4. Celebriti Edu 8: Esta herramienta digital gamificada, la cual permite calificar a los
estudiantes a través de juegos.
Ilustración 14 Interfaz Gráfica de Celebriti.edu8
7 https://www.socrative.com/
8 https://edu.cerebriti.com/
44
Las instituciones educativas han evidenciado la importancia de mantener motivados a los

estudiantes, proponiéndoles a través de estrategias lúdicas y fuera de la forma clásica de la
enseñanza para que el estudiante mejore sus habilidades y conocimientos, generándole un
sentimiento y responsabilidad de autoaprendizaje.
5. Check lo 9: Es un juego de codificación para principiantes y programadores avanzados

donde pueden mejorar sus habilidades de codificación resolviendo desafíos y tareas
usando lenguajes como Python y TypeScript.
Ilustración 15 Interfaz gráfica de checkio.org9
6. Codecombat 10: Es una plataforma que tiene como objetivo enseñar a los estudiantes
programación mediante el juego, promoviendo el aprendizaje activo y una mentalidad de
crecimiento, permite aprender lenguajes como JavaScript, Python y C++. El juego
consiste en superar los retos que un mago propone y realizando hechizos con los lenguajes
de programación.
9 https://checkio.org/
10 https://codecombat.com/
45
Ilustración 16 Interfaz gráfica de Codecombat10
7. Code Avengers 11: Se trata de una plataforma de pago en la que el usuario puede
aprender a programar en lenguajes como JavaScript, HTML, Python y otros. Además,
brinda la posibilidad de unirse a un campamento de tres días para reforzar las habilidades
de programación.
Ilustración 17 Interfaz gráfica Codeavengers11
8. Codingame 12: Es una plataforma de videojuegos con un editor de código, el cual

permite aprender a programas gratis, diseñada para niños y mayores, tiene más de 25
lenguajes como Java, JavaScript, Pascal, Perl, PHP, Python y otros más, a medida que
avanzas mayor será el grado de dificultad.
11 https://www.codeavengers.com/
12 https://www.codingame.com/start
46
Ilustración 18 Interfaz gráfica de Codeingame12
9. Code.org 13: Es una plataforma para iniciar en la programación desde el concepto más
básico que son los algoritmos, permite que el usuario comprenda la dinámica de dar
instrucciones a una maquina a través de programación por bloques.
Ilustración 19 Interfaz gráfica de Code.org13
10. Codecademy 14: Esta plataforma ofrece cursos para aprender lenguajes como Python,
JavaScript, Ruby, HTML y CSS, la cual es muy popular entre los estudiantes de
educación superior para reforzar sus habilidades de programación.
13 https://code.org/
14 https://www.codecademy.com/
47
Ilustración 20 Interfaz gráfica de Codecademy14
11. Replit 15: Este es un IDE en línea que permite a los usuarios codificar, compilar, ejecutar
y alojar más de 50 lenguajes de programación. Es una herramienta valiosa para los
docentes, ya que les permite enseñar y evaluar el trabajo de sus estudiantes de manera
más eficiente y ágil. Además, al ser un servicio en línea, ofrece una experiencia de uso
más cómoda y accesible desde cualquier lugar [45].
Ilustración 21 Interfaz gráfica Replit15
12. Scratch 16: Es una plataforma de programación visual que permite a los usuarios crear
sus propias historias interactivas, juegos y animaciones, a través de su interfaz basada en
bloques. Los usuarios pueden arrastrar y soltar bloques para construir secuencias de
instrucciones, personalizar personajes y fondos, programar eventos y controlar la lógica
de programación. Scratch también ofrece una biblioteca de bloques predefinidos, una
15 https://replit.com/
16 https://scratch.mit.edu/
48
comunidad en línea para compartir proyectos y fomentar la colaboración, y promueve la

experimentación y la creatividad en el proceso de aprendizaje.
Tanto Scratch como LanguageConquers comparten la idea de utilizar bloques de

programación visual para crear proyectos interactivos. Sin embargo, Scratch ofrece una
funcionalidad más amplia, fomenta la creatividad y cuenta con una comunidad activa.
Por otro lado, LanguageConquers se enfoca en retos específicos de una historia, utiliza
un sistema de bloques más básico y está orientada a desarrollar habilidades de
pensamiento lógico.
Ilustración 22 Interfaz gráfica Scratch

49
V. PROCESO DE INGENIERÍA DE SOFTWARE
En este capítulo, se presentan los procesos específicos de ingeniería aplicados para el

desarrollo de este proyecto. Se inicia con la descripción del modelo de negocio, diseñado
con el fin de demostrar cómo el proyecto crea valor. Una vez definido el modelo de negocio,
se explican las metodologías utilizadas en el proyecto. En este caso, se emplearon dos
metodologías distintas para separar el proceso de definición del público objetivo y el diseño
de la parte gráfica del proyecto. Para la definición del público objetivo y el diseño, se utilizó
la metodología Design Thinking. Por otro lado, se implementó la metodología SCRUM
para el proceso de desarrollo de software.
Después de definir las metodologías utilizadas, se explica la implementación y aplicación

de estas en el desarrollo del proyecto. Se detallan los procesos que abarcan el diseño de
diagramas, la selección de la arquitectura y las tecnologías empleadas. También se
mencionan las pruebas realizadas para validar el cumplimiento de los objetivos propuestos.
Finalmente, se concluye el capítulo con el nivel de madurez alcanzado en la tecnología
desarrollada en el proyecto.
A. Modelo de Negocio
El modelo de negocio en palabras de Joan Magretta en el artículo titulado “Why Business

Models Matter” describe el modelo de negocio como una "historia que explica cómo una
empresa trabaja". Magretta enfatiza que un modelo de negocio debe responder a preguntas
clave, como: ¿Quiénes son nuestros clientes? ¿Cuál es nuestro producto o servicio? ¿Cómo
lo entregamos? ¿Cómo generamos ingresos? Además, el modelo de negocio debe reflejar
una comprensión clara de cómo la empresa crea valor para sus clientes [46].
Por otro lado, Alex Osterwalder y Yves Pigneur presentan una herramienta visual llamada
"lienzo del modelo de negocio" (Business Model Canvas) en su libro “Bussines Model
Generation”. Este lienzo proporciona un marco estructurado para describir, analizar y
diseñar modelos de negocio. Osterwalder y Pigneur argumentan que un modelo de negocio
debe abordar nueve componentes clave: segmento de clientes, propuesta de valor, canales
de distribución, relación con los clientes, fuentes de ingresos, recursos clave, actividades
clave, asociaciones clave y estructura de costos [47].
Utilizando el modelo de negocio Canvas, se ha desarrollado una estrategia integral para la

herramienta Language Conquers. Este enfoque ha permitido establecer una visión
estratégica, garantizar la viabilidad, identificar socios clave y fomentar la innovación. Al
proporcionar una base sólida para la toma de decisiones y la comunicación efectiva,
50
aumenta significativamente las posibilidades de éxito y se maximiza el impacto educativo

de la herramienta en los estudiantes.
Ilustración 23 Modelo de negocio
En la ilustración 23 se establece el modelo de negocio planteado para el proyecto, el cual

se explica a continuación cada uno de los elementos que lo conforman.
• Socios clave: Los socios clave son individuos, empresas o instituciones que colaboran
estratégicamente con la herramienta gamificada para su desarrollo y éxito. En este caso
se incluyen las instituciones educativas y expertos en programación.
• Actividades clave: Las actividades clave son las acciones y tareas fundamentales que
se deben realizar para operar la herramienta gamificada. Estas actividades incluyen el
diseño y desarrollo de los elementos de la gamificación dentro de la herramienta,
implementación de retos o desafíos para practicar los conceptos vistos en un curso y
la creación de un entorno de competencia por puntos que motiven al usuario a
interactuar con la herramienta.
• Propuesta de valor: La propuesta de valor es la característica que oferta la

herramienta a los estudiantes de programación. En este caso, la propuesta de valor es
ofrecer una forma divertida y atractiva de aprender programación mediante la
gamificación, que motive y mantenga el interés de los estudiantes.
• Relación con clientes: La relación con los clientes se refiere a cómo interactúa la
herramienta gamificada con los estudiantes. En este caso el soporte y asistencia técnica
51
de la plataforma, mantener una comunicación constante con los usuarios para obtener
retroalimentación que permita determinar las oportunidades de mejora. Esto ayuda a
mantener la satisfacción del cliente y a mejorar continuamente la herramienta.
• Canales: Los canales de distribución son los medios utilizados para hacer llegar la
herramienta gamificada a los estudiantes. En este componente se determinó como
canal la misma plataforma, eventos como charlas o conferencias que permitan dar a
conocer la herramienta y colaboraciones con instituciones educativas o alianzas con
otras plataformas educativas.
• Segmento de clientes: El segmento de clientes es el grupo específico de estudiantes a

los que se dirige la herramienta gamificada. En este caso se incluyen a los estudiantes
de últimos grados de colegio y estudiantes de primer semestre de universidad
interesados en aprender programación y las instituciones educativas que deseen
complementar sus programas de enseñanza de programación con la herramienta.
• Recursos clave: Los recursos clave son los activos necesarios para desarrollar,
mantener y hacer funcionar la herramienta gamificada. En este caso se incluye a los
desarrolladores de software, expertos en programación y la comunidad de estudiantes.
Estos recursos permiten garantizar la calidad, eficiencia y escalabilidad de la
herramienta.
• Estructura de costes: La estructura de costos se refiere a todos los gastos asociados

con el desarrollo, funcionamiento y mantenimiento de la herramienta gamificada.
Incluye el desarrollo de la plataforma, la creación de contenido educativo, los costos
de alojamiento, marketing y soporte al cliente.
• Fuentes de ingreso: Las fuentes de ingresos son los medios a través de los cuales la
herramienta gamificada genera ingresos. En este caso se tuvo en cuenta los acuerdos
que se pueden generar con instituciones educativas y a largo plazo la posibilidad de
ofrecer suscripciones para estudiantes.
B. Metodología
Para el desarrollo del proyecto se escogió las metodologías “SCRUM” para el proceso de
desarrollo de software, la cual fue elegida por la cantidad de involucrados en la elaboración
del proyecto y la incertidumbre de los cambios en los requerimientos de los docentes que
lideran la investigación y “Design Thinking” para el proceso del diseño de los elementos
gráficos que tendrá la herramienta gamificada debido al enfoque de soluciones que este
genera a partir de las necesidades de los usuarios, más adelante se explica cada una de estas
metodologías, sus fases y como fueron aplicadas en el proyecto.
1. ¿Qué es Design Thinking?

Es un método para generar ideas innovadoras que centra su eficacia en entender y dar
solución a las necesidades reales de los usuarios. Para Tim Brown actual CEO de IDEO, el
Design Thinking “Es una disciplina que usa la sensibilidad y métodos de los diseñadores
52
para hacer coincidir las necesidades de las personas con lo que es tecnológicamente factible
y con lo que una estrategia viable de negocios puede convertir en valor para el cliente, así
como en una gran oportunidad para el mercado” [48].
2. Fases del Design Thinking

Este enfoque se fundamenta en un conjunto de cinco etapas, formando así un proceso
iterativo en el cual se pueden dar pasos hacia adelante o hacia atrás en cualquier momento.
Incluso se tiene la posibilidad de saltar a fases no consecutivas, todo con el propósito de
perfeccionar el contenido propuesto y alcanzar una solución que cumpla con los objetivos
previamente establecidos.
Ilustración 24 Fases de Design Thinking [48]
En la ilustración 24 presenta las diferentes fases de la metodología, que incluyen empatía,

definición, ideación, prototipado y testeo.
a) Empatía
El objetivo de esta fase es comprender al usuario en profundidad, incluyendo sus

necesidades, problemas y entorno, con el fin de obtener la información necesaria para
generar soluciones que sean coherentes con sus realidades.
b) Definición
Esta fase tiene como base la información recolectada en la etapa anterior, el cual se
convierte en insumo para identificar problemas para lograr proponer soluciones
innovadoras.
c) Ideación
En esta fase se generan numerosas ideas como posibles soluciones al problema, sin realizar
juicios de valor sobre las ideas propuestas.
53
d) Prototipado
En esta fase, las ideas generadas en la etapa anterior se materializan mediante el uso de
diversas técnicas. Los prototipos creados en esta etapa deben ser simples, con el propósito
de someterlos a pruebas y mejorarlos posteriormente.
e) Testeo
En esta fase, se llevan a cabo pruebas de los prototipos con los usuarios involucrados. El
objetivo principal de esta etapa es detectar posibles errores o deficiencias, para luego
refinar el prototipo hasta que se ajuste completamente a las necesidades de los usuarios.
C. ¿Qué es SCRUM?
Según la guía oficial de SCRUM, creada por Ken Schwaber y Jeff Sutherland, SCRUM se
define como "Un marco de trabajo liviano que ayuda a las personas, equipos y
organizaciones a generar valor a través de soluciones adaptativas a problemas complejos"
[49]. SCRUM es parte de las metodologías ágiles y proporciona una estructura y roles
definidos para el equipo, lo cual facilita la gestión de las etapas en un proyecto de desarrollo
de software. Este marco se basa en tres pilares fundamentales: eventos, roles y artefactos.
1. Equipo SCRUM
La unidad fundamental de SCRUM es un pequeño equipo de personas, un Scrum Team. El

cual está compuesto por un Scrum Máster, un Product Owner y los desarrolladores.
a) Desarrolladores
Estas personas son los encargados de crear un incremento en cada sprint. Los
desarrolladores en un equipo Scrum desempeñan un papel fundamental en el proceso de
desarrollo de software. Trabajan de manera autónoma y autoorganizada, tomando
decisiones técnicas y priorizando su trabajo en función de las necesidades del proyecto.
b) Product Owner
Es el responsable de maximizar el valor del producto y de garantizar que el equipo esté

trabajando en las funcionalidades más relevantes y de mayor prioridad para los usuarios y
el negocio. Actúa como el enlace entre los stakeholders y el equipo de desarrollo. Su
principal tarea es gestionar el backlog del producto, que es una lista ordenada de los
requisitos, características y mejoras que se desean implementar en el producto y trabaja en
colaboración con los stakeholders para comprender sus necesidades y priorizar los
elementos del backlog en función del valor que aportan.
54
c) SCRUM Máster
El Scrum Máster tiene la responsabilidad de garantizar la máxima efectividad del Equipo

Scrum. Su rol consiste en brindar apoyo al equipo, ayudándolo a mejorar continuamente
sus prácticas y eliminando los impedimentos que puedan obstaculizar su progreso.
2. Eventos de SCRUM
El Sprint abarca a todos los demás eventos en SCRUM, los cuales brindan oportunidades
para la inspección y adaptación de los artefactos SCRUM. En SCRUM, cada evento
programado tiene un propósito específico dentro del marco de trabajo. Los Sprints son el
corazón de SCRUM, donde las ideas se convierten en valor.
Se debe tener en cuenta que durante un sprint:
• No se realizan cambios que pongan en peligro el Objetivo del Sprint.

• La calidad no disminuye.
• El Product Backlog se refina según sea necesario.
• El alcance se puede aclarar y renegociar con el Product Owner a medida que se
aprende más.
a) Spring Planning
Durante la reunión de planificación del sprint, el equipo Scrum se reúne para establecer los
objetivos y el plan detallado del sprint en curso. Durante esta sesión, se revisa el backlog
del producto y se seleccionan las historias de usuario o elementos del backlog que se
abordarán en el sprint. El equipo determina cómo se realizará el trabajo, establece un plan
y se compromete a alcanzar los objetivos acordados. También se realiza una estimación del
esfuerzo necesario para completar cada elemento del backlog seleccionado.
b) Daily Scrum
Es un evento diario en Scrum en el que el equipo se sincroniza y planifica su trabajo para

el día. Durante esta reunión breve y enfocada, cada miembro del equipo responde a tres
preguntas fundamentales:
• ¿Qué hice desde la última reunión diaria?

• ¿Qué voy a hacer hasta la próxima reunión diaria?
• ¿Hay algún impedimento o bloqueo que esté afectando mi progreso?
El objetivo del Daily Scrum es mantener a todos los miembros del equipo alineados y
coordinados, identificar posibles problemas u obstáculos, y ajustar el plan de trabajo en
función de la información compartida. El Daily Scrum tiene una duración limitada,
generalmente de 15 minutos y se lleva a cabo en el mismo lugar y a la misma hora todos
los días.
55
c) Sprint Review
El Sprint Review es un evento al finalizar cada sprint en la metodología. Durante esta

reunión, el equipo Scrum presenta el incremento del producto desarrollado durante el sprint
al cliente, stakeholders y otros miembros interesados. El objetivo principal de la revisión
del sprint es obtener retroalimentación y validar si el incremento del producto cumple con
los criterios de aceptación establecidos.
d) Sprint Retrospective
El Sprint Retrospective es un evento que tiene lugar al final de cada sprint. Durante esta
reunión, el equipo Scrum reflexiona sobre el sprint recién concluido y busca oportunidades
de mejora continua en su proceso de trabajo. El objetivo principal de la retrospectiva del
sprint es que el equipo identifique qué funcionó bien, qué no funcionó y qué acciones
pueden tomar para mejorar en el siguiente sprint.
3. Artefactos de SCRUM
Los artefactos en Scrum son elementos que se utilizan para garantizar la transparencia, la
colaboración y la comunicación efectiva en el desarrollo del producto. Estos artefactos
representan el trabajo y la información clave necesarios para el éxito del proyecto.
a) Product Backlog
Es una lista priorizada de todas las funcionalidades, requerimientos o historias de usuario,

mejoras y defectos que se desean para el producto. El Product Backlog es propiedad del
Product Owner y se actualiza de forma continua para reflejar las necesidades y prioridades
del cliente y del negocio.
b) Sprint Backlog
Es una lista de los elementos seleccionados del Product Backlog que el equipo se
compromete a completar durante un sprint específico. El Sprint Backlog es creado durante
el Sprint Planning y contiene las tareas y actividades necesarias para cumplir con los
objetivos del sprint.
c) Incremento
Es el resultado del trabajo realizado durante un sprint. Es el conjunto de funcionalidades y

mejoras implementadas y probadas que se agregan al producto existente. El Incremento
debe ser potencialmente utilizable y de calidad, lo que significa que cumple con los
criterios de aceptación establecidos y está listo para ser entregado al cliente o a los
stakeholders.
56
Ilustración 25 Fases de la Metodología Scrum [50]
La ilustración 25 muestra las fases establecidas por Scrum, que involucran roles, eventos
y artefactos que se explicaron previamente.
D. Restricciones
Una vez definidas las metodologías que se va a utilizar en el proyecto, se debe tener en
cuenta aquellas restricciones que limitan el proyecto.
Para ello se utilizó la técnica de la triple restricción. Esta técnica define tres áreas
principales que se deben de tener en cuenta para iniciar un proyecto, las cuales son
fundamentales para garantizar la calidad de este, las cuales son Tiempo, Costo y alcance
[51].
Ilustración 26 Triángulo de gestión de proyectos [51]

57
Debido a que este modelo no siempre resulta útil para tener en cuenta todos los aspectos
necesarios al iniciar un proyecto, se desarrolló la técnica de la triple restricción ampliada.
Esta técnica se basa en los tres pilares fundamentales (alcance, tiempo y costo) a los que
se añaden tres elementos adicionales: calidad, recursos y riesgos.
A continuación, se muestra en la ilustración 27, el grafico de la triple restricción ampliada

que se desarrolló para el proyecto, en el que se encuentran los seis factores fundamentales
de la técnica mencionada.
Ilustración 27 Triple Restricción Ampliada
Basándose en este análisis de la triple restricción ampliada, se creó una matriz de riesgos
con el objetivo de identificar y prevenir los riesgos detectados, así como establecer un plan
de acción para hacer frente a aquellos que se materialicen.
Tabla 3 Matriz de Riesgos, Mitigación y Plan de Acción

Riesgo Mitigación Plan de Acción
Investigar y aplicar de manera
adecuada los temas de Agregar instrucciones
Dificultad de usar
experiencia de usuario y de uso en la aplicación.
usabilidad.
Investigar la forma adecuada de
Replantear la forma en
explicar el tema de algoritmos y
No cumple con la funcionalidad que se estableció la
proponer retos fáciles de entender
solución de los retos.
por el usuario.
Incumplimiento de las Planear de manera adecuada la Reducir el alcance para
responsabilidades por parte de los asignación de tareas y tiempo ajustarlo a los tiempos
desarrolladores invertido en el proyecto y la establecidos o establecer
58
metodología de trabajo responsabilidades a otro

seleccionado. desarrollador.
Buscar apoyo en otros
Poca comunicación con los Mantener una constante
profesores o trabajar de
asesores comunicación.
manera autónoma.
E. Aplicación de Design Thinking
Se decidió utilizar esta metodología en el proceso de creación del material visual de la

plataforma, que incluyó el rediseño del logo, la creación de logros y el prototipo de la
aplicación.
1. Empatizar
En esta etapa, se llevaron a cabo la identificación de los rasgos de los usuarios que
utilizarían la herramienta, utilizando la matriz de análisis de interesados. Esta técnica
facilita la ubicación de los usuarios interesados, donde se detallan sus intereses, problemas
percibidos, mandatos y recursos. Para ello, se definió una tabla que representa la matriz de
interesados, la cual incluye cada uno de los elementos mencionados anteriormente.
Tabla 4 Matriz de interesados

Problemas
Grupo Intereses Mandatos Recursos
Percibidos
• Encontrar una Desconexión, • Facilidad de • Temas de estudio
herramienta que falta de uso de la para
permita hacer participación y herramienta. retroalimentar la
un seguimiento dificultad de los • Poder realizar herramienta.
académico del estudiantes con seguimiento a • Retroalimentació
alumno por los cursos los estudiantes. n al estudiante.
medio de un iniciales de • Gestión del
curso aplicado. programación. progreso de los
• Utilizar una retos.
herramienta que
facilite la
explicación de
Profesores temas básicos
de
programación.
• Contar con una
herramienta que
ayude a
identificar
debilidades o
dificultades de
los estudiantes
para así reforzar
los temas en
clase.
• Actividades Los estudiantes • Facilidad de • Retroalimentació
claras y de primeros uso de la n sobre los cursos
Estudiantes
didácticas para semestres herramienta. prácticos de la
perciben la herramienta.
59
iniciar en la programación • Implementar • Usuarios finales.

programación. como difícil, conceptos
• Tener un complicada y básicos de la
método de aburrida. programación.
aprendizaje • Motivación
innovador y para iniciar en
didáctico. la
• Desarrollar programación.
competencias
básicas en el
mundo de la
programación
por medio de
recursos
didácticos.
• Sistema que Deserción de • Herramienta • Recursos para
ayude a los estudiantes que permita el desarrollo y
monitorear los de primeros incentivar el mantenimient
patrones de semestres en aprendizaje o de la
aprendizaje de programas de básico de aplicación.
los ingeniería. programación • Aportar
estudiantes de para los infraestructura
programación estudiantes. para el
de la • Retener a los alojamiento
universidad. estudiantes de del sistema.
• Método de primeros
enseñanza semestres de
efectivo para la universidad
inducción de para que
Universidad estudiantes a continúen los
la programas.
programación.
• Fomentar el
autoaprendiza
je en la
universidad.
• Contar con
herramientas
nuevas e
integradoras
para fomentar
el aprendizaje
práctico y
didáctico.
Teniendo en cuenta la matriz presentada anteriormente se detalla cada una de las columnas
que la componen:
• Grupo: Esta columna identifica los diferentes grupos o partes interesadas involucradas
en el proyecto. Pueden ser personas, organizaciones, comunidades u otras entidades
relevantes para el éxito del proyecto.
60
• Intereses: En esta columna se registran los intereses o preocupaciones de cada grupo de

interesados. Los intereses pueden estar relacionados con aspectos financieros, sociales,
ambientales, políticos o cualquier otro aspecto relevante para el proyecto.
• Problema percibido: Aquí se describe el problema o desafío que cada grupo de

interesados percibe en relación con el proyecto. Estos problemas pueden variar según
las perspectivas y las expectativas de cada grupo.
• Mandatos: Esta columna indica los mandatos o requisitos específicos que cada grupo
de interesados puede tener en relación con el proyecto. Estos mandatos pueden provenir
de regulaciones, políticas, acuerdos contractuales u otras directrices establecidas.
• Recursos: En esta última columna se identifican los recursos disponibles para cada
grupo de interesados. Estos recursos pueden incluir financiamiento, habilidades,
experiencia, influencia política u otros recursos relevantes.
2. Definir
En esta etapa se utilizó una de las técnicas que propone la metodología, la cual es el mapa
de empatía. La técnica de mapas de empatía permite adoptar la perspectiva del usuario y
plantear preguntas centradas en cómo la persona aborda el problema central.
A continuación, en la ilustración 28 se muestran la imagen que ilustran el mapa de

empatía diseñado para los usuarios.
Ilustración 28 Mapa de empatía

61
En la ilustración 28 se muestra el mapa de empatía que presenta a Nicolás Reyes, un

estudiante de primer semestre del programa de ingeniería de sistemas en la universidad.
Nicolás siempre ha creído que su pasión por la tecnología lo ayudará a convertirse en un
talentoso desarrollador de software. Sin embargo, a pesar de su entusiasmo, experimenta
un temor latente ante el primer curso de programación. Ha escuchado que muchas personas
abandonan la carrera debido a dificultades en el proceso de aprendizaje, lo que genera
inseguridad en él.
3. Idear
Durante esta fase, se aplicó la técnica de Brainstorming con el objetivo de explorar diversas
soluciones.
En el proceso de Brainstorming, se recopilaron las ideas propuestas por los docentes

responsables de la investigación, generando una lista de ideas que incluye:
• Aplicación web.
• Aplicación móvil.
• Creación de un IDE completo.
• Prototipo básico de IDE.
• Videojuego con actividades de programación.
Después de realizar la lluvia de ideas, se aplicó la técnica de matriz de posicionamiento

para evaluar las propuestas. Esta técnica considera criterios establecidos para determinar
las soluciones más adecuadas para abordar el problema. Se asigna una puntuación a cada
criterio según la idea planteada, utilizando una escala de puntuación. Luego, se suman los
puntajes de cada idea y se comparan. Aquellas ideas con mayor puntuación son las que se
consideran para su desarrollo.
Los criterios escogidos para la elaboración de la matriz fueron seleccionados teniendo en

cuenta la viabilidad de la solución desde la perspectiva de desarrollo. A continuación, se
explica cada criterio:
• Facilidad técnica: Grado de dificultad del desarrollo de la idea.

• Costo de construcción: El puntaje en términos de costo económico que se estima
para desarrollar la idea. Un puntaje más alto indica que la idea es menos costosa de
implementar.
• Facilidad de uso: Nivel de complejidad que resulta el uso de la aplicación para los
usuarios finales.
• Valor funcional: Que tan eficiente puede resultar la idea para dar cumplimiento al
objetivo del proyecto.
Para la construcción de la matriz se estableció una escala de puntuación del 1 al 5, siendo

1 el puntaje más bajo y 5 el mejor puntaje. A continuación, se presenta en la Tabla 5 la
matriz de posicionamiento que muestra las ideas generadas mediante la técnica de
Brainstorming.
62
Tabla 5 Matriz de Posicionamiento

Videojuego
con
Creación Prototipo
Ideas/Criterio Aplicación Aplicación actividades
de un IDE básico de
s web Móvil de
completo IDE
programaci
ón
Facilidad de
5 4 2 4 3
construcción
Costos de
5 3 1 5 3
construcción
Facilidad de
4 3 3 5 4
uso
Valor
5 3 3 4 4
funcional
Total 19 13 9 18 14
Tras evaluar las ideas propuestas, se obtuvo una puntuación más alta para la aplicación web
y el prototipo básico de IDE, con puntajes de 19 y 18 respectivamente. Con base en estos
resultados, se decidió combinar ambas ideas como punto de partida para el diseño de la
solución.
4. Prototipar
En esta etapa se tuvo en cuenta toda la información resultante en cada una de las etapas
anteriores, con la cual se desarrolló el primer prototipo de la solución seleccionada. En las
ilustraciones 29 a la 50, cada una de las pantallas creadas.
Ilustración 29 Pantalla 1: Login
La ilustración 29 hace referencia a la pantalla de inicio de sesión en la herramienta, cuya

función es permitir al usuario acceder a su cuenta. Esta pantalla se muestra cuando el
usuario ya está registrado y desea iniciar sesión nuevamente. En ella, se encuentran dos
campos de entrada donde el usuario debe ingresar su correo electrónico y contraseña.
Además, se encuentra un botón de inicio de sesión que redirige al usuario a la pantalla de
inicio (Home). También se incluye un botón para restablecer la contraseña, el cual al ser
63
presionado abre una ventana emergente donde el usuario puede ingresar el correo
electrónico asociado a su cuenta para recuperarla.
Ilustración 30 Pantalla 2: Crear Cuenta
La ilustración 30 hace referencia a la pantalla de creación de cuenta, la cual tiene como

objetivo permitir a los usuarios crear una nueva cuenta en la plataforma. En esta pantalla,
se encuentran dos campos de entrada donde el usuario debe ingresar su dirección de correo
electrónico y establecer una contraseña. También se incluye un botón y una casilla de
verificación para aceptar los términos y condiciones. Además, se presenta un botón de
"Crear cuenta" que redirige al usuario a la pantalla de creación de la cuenta, así como un
botón para redirigir a la pantalla de inicio de sesión en caso de que ya tenga una cuenta
registrada.
Ilustración 31 Pantalla 3: Crear Usuario Docente

64
La ilustración 31 hace referencia a la pantalla para crear un usuario de tipo docente. En

esta pantalla, se presentan 3 campos: dos campos de entrada para que el usuario ingrese su
nombre y apellido, y un campo de selección para elegir su género. Además, se incluye un
botón de "Crear" que redirige al usuario a la pantalla de inicio (Home) del usuario.
Ilustración 32 Pantalla 4: Crear Usuario Estudiante
La ilustración 32 hace referencia a la pantalla para crear un usuario de tipo estudiante. En

esta pantalla, se presentan cuatro campos: nombre, apellido, nickname y una opción de
selección de avatar. Además, se incluye un botón de "Crear" que redirige al usuario a la
pantalla de inicio (Home).
Ilustración 33 Pantalla 5: Inicio (Home)
La ilustración 33 hace referencia a la pantalla de inicio o página principal una vez que el
usuario ha iniciado sesión en su cuenta. En esta pantalla, se muestra un banner de imágenes
65
destacadas y se presentan los cursos disponibles dentro de la aplicación. En el lado

izquierdo de la pantalla, se encuentra un menú vertical que permite al usuario acceder a las
diferentes secciones de la plataforma, esta pantalla es la misma para el módulo del
estudiante y del profesor.
Los siguientes 5 prototipos hacen referencia al módulo de docente.
Ilustración 34 Pantalla 6: Curso
La ilustración 34 hace referencia a la pantalla principal del curso, la cual se accede al

seleccionar un curso desde la pantalla de inicio. Esta pantalla se divide en dos secciones,
La primera sección se encuentra en el lado izquierdo y muestra información sobre el curso,
así como dos botones que, al presionarlos, cambian la sección del lado derecho. En esta
pantalla, la sección del lado derecho permite buscar un reto por su nombre y visualizar los
retos disponibles dentro del sistema. Al seleccionar un reto específico, el usuario puede
acceder a su información y configuración. La configuración del reto se explicará en la
siguiente pantalla.
66
Ilustración 35 Pantalla 7: Habilitar Reto
La ilustración 35 hace referencia a la pantalla para habilitar un reto, la cual se accede desde
el registro de un reto en la pantalla 6, tal como se mencionó en el prototipo anterior. En
esta pantalla se presenta la información y configuración del reto para el curso. Se muestra
el nombre del reto y cinco campos de entrada. Los campos incluyen la fecha de inicio y la
fecha de fin, que son establecidas por el docente para determinar el período en el que el
reto estará disponible para que los estudiantes puedan participar. También se incluye un
campo para establecer la cantidad de intentos que los estudiantes tendrán para resolver el
reto, y un campo para definir la cantidad de monedas que se pueden ganar al completar el
reto. La pantalla cuenta con dos botones: uno para retroceder y volver a la sección donde
se listan los retos disponibles, y otro para habilitar y actualizar la información configurada
del reto.
Ilustración 36 Pantalla 8: Lista de estudiantes

67
La ilustración 36 hace referencia a la pantalla que muestra la lista de estudiantes

matriculados en el curso. En esta pantalla, el usuario puede visualizar la información básica
de los estudiantes. Además, se incluye un buscador que permite buscar estudiantes por su
nombre. Desde cada registro de estudiante, se puede acceder a la información de los retos
que el estudiante ha realizado, la cual será explicada en el siguiente prototipo.
Ilustración 37 Pantalla 9: Progreso del estudiante
La ilustración 37 hace referencia a la pantalla de progreso del estudiante, la cual se accede

desde la información de cada estudiante, como se mencionó en el prototipo anterior. En
esta pantalla, se presenta la información detallada de los retos que el estudiante ha
completado dentro del curso. Se muestra el estado del reto, indicando si fue completado o
no, así como la cantidad de intentos realizados. Además, se incluye el puntaje obtenido por
el estudiante en cada reto y la fecha en que se realizó.
Ilustración 38 Pantalla 10: Editar Perfil docente

68
La ilustración 38 hace referencia a la pantalla de edición del perfil de usuario, a la cual se

accede desde el menú lateral ubicado en el lado izquierdo. Al ingresar a esta pantalla, se
visualiza la información actual del usuario en cada campo. En esta pantalla, se muestra la
foto de perfil del usuario, así como dos campos de entrada para el nombre y apellido.
También se presenta una lista desplegable de géneros y se incluyen dos botones: "Subir
foto", que permite cambiar la foto de perfil del usuario y "Actualizar", para guardar los
cambios realizados en la información del usuario cuando se desee realizar modificaciones.
El siguiente prototipo está presente en ambos módulos, tanto en el del estudiante como en
el del docente.
Ilustración 39 Pantalla 11: Ranking
La ilustración 39 hace referencia a la pantalla de ranking, la cual está presente tanto para
estudiantes como para docentes, como se mencionó anteriormente. En esta pantalla, se
muestra un banner relacionado al ranking, así como tres tarjetas que muestran la
información de los tres estudiantes con la puntuación más alta en el curso. Además, en la
parte inferior se encuentra una tabla que muestra los estudiantes en las posiciones del 4 al
10 del ranking. Esta pantalla tiene un enfoque visual que busca despertar el interés del
estudiante por aparecer en la lista y fomentar un mayor compromiso con la realización de
los retos propuestos. Por otro lado, para el docente, la pantalla le permite visualizar los
estudiantes de su curso que han obtenido los mejores resultados en la realización de los
retos.
Los siguientes ocho prototipos hacen parte del módulo del estudiante:
69
Ilustración 40 Pantalla 12: Logros
La ilustración 40 hace referencia a la pantalla de logros, a la cual se accede desde el menú

lateral ubicado en el lado izquierdo de la pantalla. En esta pantalla, se presenta un banner
y en la parte inferior, tarjetas que representan cada logro. Inicialmente, las tarjetas estarán
bloqueadas y se mostrarán en tonos grises, pero a medida que el estudiante desbloquee un
logro al completar los retos, se visualizará a color. Al pasar el ratón sobre estas tarjetas, se
podrá ver la información detallada de cada logro.
Ilustración 41 Pantalla 13: Tienda
La ilustración 41 hace referencia a la pantalla de la tienda, a la cual se accede desde el

menú lateral ubicado en el lado izquierdo de la pantalla. En esta pantalla, se muestra un
banner, así como la cantidad de monedas que tiene el usuario. En la parte inferior, se
encuentran varias tarjetas que representan los artículos disponibles en la tienda. Cada
tarjeta incluye una imagen del artículo y un botón para comprar el producto. Al presionar
70
el botón, se abrirá una ventana emergente para confirmar la compra del artículo y
posteriormente se actualizarán los artículos disponibles en la tienda.
Ilustración 42 Pantalla 14: Artículos adquiridos
La ilustración 42 hace referencia a la pantalla de artículos adquiridos, a la cual se puede

acceder de dos formas: mediante el menú lateral ubicado en el lado izquierdo de la pantalla
o desde la pantalla principal del curso. En esta pantalla, se muestran los artículos que el
usuario ha comprado en la tienda. Cada artículo se encuentra en la lista del lado izquierdo
de la pantalla y al seleccionarlo, se muestra de forma más detallada en el cuadro ubicado
en la parte superior central de la pantalla. Justo debajo de ese cuadro, se presenta
información detallada del artículo, junto con dos botones: uno para eliminar el artículo, lo
que hará que vuelva a estar disponible en la tienda y otro para volver y navegar a la pantalla
anterior.
Ilustración 43 Pantalla 15: Editar Perfil Estudiante

71
La ilustración 43 hace referencia a la pantalla de edición del perfil del estudiante, a la cual
se accede desde el menú lateral ubicado en el lado izquierdo de la pantalla. En esta pantalla,
se presentan dos gráficas: la primera muestra el progreso del estudiante con relación a los
retos completados dentro del curso, mientras que la segunda muestra el progreso del
estudiante en cuanto a los logros desbloqueados en la plataforma. En el centro de la
pantalla, se encuentran cuatro campos de entrada para el nombre, apellido, nickname
(Apodo) y correo electrónico, junto con una lista de géneros y una lista de avatares. Al
acceder a esta pantalla, los campos ya contienen la información del estudiante, y el usuario
tiene la opción de modificar cualquiera de esos campos. Para guardar los cambios
realizados, se debe presionar el botón de actualizar ubicado debajo de la lista de avatares.
Ilustración 44 Pantalla 16: Mapa del curso
La ilustración 44 hace referencia a la pantalla del curso, a la cual se accede desde la

pantalla de inicio de la plataforma al seleccionar un curso específico. En esta pantalla, se
presenta un mapa de la isla en el cual se visualizan los retos representados como cofres.
Estos cofres se irán haciendo visibles a medida que el usuario vaya completando los retos
correspondientes.
En el lado izquierdo de la pantalla, se encuentran cuatro botones: "Tutorial", que abrirá una
ventana emergente con un video de explicación de la plataforma; "Misiones", que
proporcionará la lista de misiones disponibles; "Artículos Adquiridos", que mostrará los
artículos comprados por el usuario y "Home", que redirigirá a la pantalla principal. Debajo
de estos botones, se encuentra un cuadro con información básica del usuario, como su
nickname, nivel, puntaje y cantidad de monedas.
72
Ilustración 45 Pantalla 17: IDE
La ilustración 45 hace referencia a la pantalla del entorno de desarrollo integrado (IDE,

por sus siglas en inglés). Su diseño muestra un computador antiguo con su torre, donde la
pantalla del computador se divide en tres secciones distintas.
La primera sección, de izquierda a derecha, contiene la descripción del reto a resolver. La

segunda sección presenta una lista de palabras clave, representadas como fichas, que
forman parte del reto. Por último, la tercera sección muestra campos que representan líneas
de código donde se deben ubicar las fichas de palabras correspondientes. Cada línea de
código puede contener más de una ficha.
La torre del computador, ubicada en el lado derecho de la pantalla, contiene varios botones,
los cuales son Tutorial, pista, instrucciones y ejecutar.
A continuación, se muestra en las ilustraciones 46 y 47 algunos de los prototipos de las

pantallas que se acceden a través de las botones mencionadas anteriormente.
73
Ilustración 46 Pantalla 18: Pista
La ilustración 46 hace referencia al botón de pistas, el cual abre una ventana emergente
con información relevante sobre el tema del reto.
Ilustración 47 Pantalla 19: Ejecutar Reto
La ilustración 47 hace referencia al botón de ejecutar, el cual se encarga de evaluar la

solución propuesta por el estudiante al reto. Una vez obtenido el resultado, se muestra un
mensaje que refleja si la solución es satisfactoria. En caso afirmativo, se visualiza el puntaje
y las monedas asignadas, acompañadas de una animación que representa el algoritmo
generado para el reto.
Por otro lado, si la solución no es satisfactoria, se muestra un mensaje de error indicando

la línea donde se detecta el problema. Además, se despliega una animación que simboliza
el fallo en el reto.
74
Los siguientes prototipos se crearon para el módulo propuesto de administrador:
Ilustración 48 Pantalla 20: Dashboard Administrador
La ilustración 48 hace referencia a la pantalla del Dashboard o pantalla de inicio del

módulo del administrador. Esta pantalla contiene un menú lateral al lado izquierdo en
donde se encontrará cada conjunto de datos que hace parte del sistema y se presentan
diversos tipos de gráficos que proporcionan información relevante del sistema, como la
cantidad de retos registrados, la cantidad de logros registrados y la cantidad de usuarios
registrados.
Los siguientes dos prototipos hacen referencia a cada pantalla que tiene cada uno de los
conjuntos de datos que se encuentran en el menú lateral izquierdo de la pantalla.
Ilustración 49 Pantalla 21: Listar

75
La ilustración 49 hace referencia al diseñó para todas las pantallas de listar en el

componente de administrador, el cual contiene un buscador, un botón para crear un nuevo
registro y una tabla donde se visualizará toda la información de cada registro que hace parte
al conjunto de datos seleccionado. Cada registro tendrá dos botones que permitirá
actualizar la información o borrar el registro.
Ilustración 50 Pantalla 22: Guardar/Actualizar
La ilustración 50 hace referencia a la pantalla que se encarga de crear o actualizar un

registro. Se accede a esta pantalla desde un registro en la pantalla de listado, tal como se
mencionó en el prototipo anterior. Esta pantalla implementa como un componente
reutilizable diseñado para la creación y modificación de registros en el conjunto de datos
seleccionado. En ella se presentan los campos de entrada correspondientes al conjunto de
datos, junto con dos botones. El botón "Atrás" permite regresar a la pantalla de listado,
mientras que el botón "Guardar" permite almacenar o actualizar la información ingresada.
Después de realizar el primer prototipo, se realizó un prototipo más avanzado que

será explicado a detalle en la sección de Implementación.
5. Probar
Debido al alcance y tiempo del proyecto, se llevó a cabo una única etapa de validación de
la pantalla de inicio de sesión de la aplicación, en la que se evaluaron aspectos como
el diseño, el logotipo y los colores. Esta validación se realizó mediante una encuesta
dirigida a los estudiantes de fundamentos de programación de la Universidad San
Buenaventura Cartagena, bajo la supervisión de la profesora Kathia Paternina Palacio.
La encuesta fue diseñada en colaboración con los profesores de fundamentos de
programación de ambas universidades.
Adicional a estas pruebas se realizaron pruebas de usabilidad y pruebas de

impacto educativo, las cuales se detallan más adelante en la sección de pruebas y
análisis de resultados.
76
F. Aplicación de SCRUM
Se definió para esta versión del proyecto “Language Conquers” la utilización de la
metodología de SCRUM, en el cual se utilizaron eventos, artefactos y ceremonias de la
metodología Scrum que se detallan más adelante.
A continuación, en la Tabla 6 se explica cómo se conformó el equipo de SCRUM para el

desarrollo del proyecto.
Tabla 6 Equipo SCRUM

Rol Descripción Responsable
Responsable de facilitar el proceso Scrum
Scrum Juan David
y el equipo, asegurando la adopción y
Máster Arboleda
cumplimiento de la metodología.
− Víctor Manuel
Representante del cliente o stakeholders,
Product Peñeñory.
responsable de definir y priorizar los
Owner − Kathia Paternina
requisitos del producto
Palacio
− Angela Maria
Acosta Ramirez.
Grupo encargados de desarrollar el − Juan Pablo Caro
Equipo de producto, implementando las Vargas.
Desarrollo funcionalidades definidas en el Product − Antonio de la
Backlog. Valle.
− Juan Daniel
Scaffy.
Personas o grupos externos al equipo de
− Profesores
Stakeholders Scrum que tienen interés en el proyecto y
− Estudiantes
aportan feedback o requisitos.
Como se observa en la Tabla 6, el equipo de desarrollo estuvo compuesto por estudiantes

de la Universidad San Buenaventura de Cali y Cartagena, los estudiantes de la Universidad
San Buenaventura Cartagena, bajo su responsabilidad el desarrollo del Frontend de la
aplicación. Si bien se tuvo en cuenta su participación en la conformación del equipo, en
este documento no se detallaron específicamente las responsabilidades asignadas a cada
uno de ellos.
Los stakeholders del proyecto fueron principalmente los profesores, quienes brindaron
orientación durante todo el desarrollo del proyecto. También se contó con la participación
de los estudiantes que participaron en las pruebas realizadas durante el proyecto, aportando
valiosos comentarios y feedback.
1. Educción de Requisitos
En esta sección se describen las técnicas de educción utilizadas para el desarrollo del
proyecto Language Conquers y los requisitos funcionales del sistema.
77
a) Técnica utilizada
Las técnicas de educción de requisitos que se utilizaron para el proyecto fueron encuestas,
lecturas basadas en perspectivas y revisión documental, teniendo en cuenta que algunos
datos habían sido recolectados anteriormente por los pasados integrantes del proyecto y al
partirse de un software existente facilito el trabajo realizado por los pioneros de este
software. Para las primeras versiones se realizaron reuniones con el profesor José Luis
Jurado quien estaba dirigiendo el proyecto, en donde se planteó y se estructuró la idea de
cómo sería el desarrollo del proyecto en la primera versión, posteriormente se realizaron
reuniones con el profesor Víctor Manuel Peñeñory y la profesora Kathia, docente de
multimedia de la seccional de Cartagena, quienes son la fuente principal del proyecto.
A continuación, se detallan las técnicas utilizadas para la etapa de educción de requisitos:
• Encuestas
Desde la primera versión de la plataforma, las estudiantes Luisa Brigitte González Vásquez
y Paola Andrea Bóxiga Acero, realizaron una encuesta con el objetivo de identificar cómo
los estudiantes practicaban programación y cuánto tiempo le dedicaban. Los resultados de
esta encuesta permitieron concluir la percepción y motivación de los estudiantes para
mejorar sus habilidades en programación (ver Anexo 1, sección información de soporte).
En esta versión, se desarrolló una encuesta con el objetivo de comprender los mecanismos
de aprendizaje de programación que utilizan los estudiantes. A continuación, en la Tabla 7
se muestran la ficha técnica de la encuesta realizada.
Tabla 7 Ficha Técnica

Encuesta Mecanismos de aprendizaje en la programación
Hombre y mujeres de 16 años o más. Estudiantes de los
Población Objetivo programas de Ingeniería de sistemas, Ingeniería multimedia e
Ingeniería electrónica.
Encuesta para medir la experiencia en el proceso de aprendizaje
de la programación en los primeros cursos de programación y
Objetivo del estudio
conocer los mecanismos que los estudiantes utilizan para
aprender y practicar programación.
Tipo de muestra Aleatoria
Técnica de Encuesta realizada de manera virtual, por medio de la
recolección de datos herramienta Google Forms.
36 estudiantes de primer semestre a decimo semestre de los
Tamaño de la
programas de ingeniería de la Universidad San Buenaventura
muestra
Cali.
Encuesta realizada Angela Maria Acosta Ramirez y Juan Pablo Caro Vargas
por
Fecha de realización 02/11/2022 – 02/12/2022
1. ¿Cómo calificas tu experiencia aprendiendo temas
relacionados con la lógica de programación?
Preguntas del 2. ¿Cómo consideras que sería más fácil aprender
formulario programación?
3. Cuando iniciaste, ¿Qué métodos utilizaste para
practicar programación?
78
4. ¿Consideras que te sirvieron estos métodos para

mejorar tus habilidades en programación?
5. Actualmente, ¿Utilizas alguno de los métodos
mencionados anteriormente para practicar?
6. ¿Qué otros métodos utilizas diferentes a los
mencionados anteriormente?
7. ¿Consideras que las herramientas gamificadas son
útiles para aprender a programar?
8. Actualmente, ¿Cuántas horas dedicas semanalmente a
practicar programación?
Tomando en consideración la información provista en la ficha técnica, se expone la

metodología de muestreo empleada para la recolección de los datos.
Para la recolección de datos, se utilizó una metodología de muestreo estratificado. En esta

técnica, la población objetivo se dividió en subgrupos según los programas académicos,
seleccionando específicamente los programas de ingeniería de sistemas, ingeniería
multimedia e ingeniería electrónica. A continuación, en las ilustraciones 51 a la 59 se
aplicó una muestra aleatoria, en la cual se envió un correo electrónico a todos los estudiantes
de los programas seleccionados, invitándolos a participar en la encuesta y formar parte de
la muestra final.
Se presentan los resultados obtenidos en la encuesta, detallando cada uno de ellos:
Resultados:
Ilustración 51 Encuesta Mecanismos de aprendizaje en la programación pregunta No.1
En la ilustración 51 se evidencia los resultados de la participación de los estudiantes, el

cual indican que la mayoría de los encuestados son estudiantes de ingeniería de sistemas
(47.2%), seguidos de ingeniería multimedia (44.4%) e ingeniería electrónica (8.3%).
79
En la ilustración 52 se evidencia el semestre de los estudiantes encuestados, los resultados

indican que la mayoría de los estudiantes encuestados se encuentran en los primeros dos
semestres (22.2% y 16.7%, respectivamente), seguido de los estudiantes en octavo
semestre (22.2%), mientras que la menor cantidad de estudiantes se encuentra en tercer
semestre y décimo semestre (2.8% en ambos casos). Esto sugiere que la mayoría de los
encuestados son estudiantes de primeros semestres o que se encuentran en los últimos
semestres de su carrera.
En la ilustración 53 se evidencia los resultados, los cuales indican que la mayoría de los
estudiantes encuestados califican su experiencia de aprendizaje relacionada con la lógica
de programación como "bien" (61.1%), mientras que el 38.9% la califica como "regular".
Esto sugiere que la mayoría de los estudiantes están satisfechos con su experiencia de
aprendizaje, aunque hay un porcentaje considerable de estudiantes que no están
completamente satisfechos.
80
En la ilustración 54 se muestra que la manera más fácil para aprender sobre programación,
según los estudiantes, es a través de los elementos interactivos con un 77.8%, seguido de
herramientas gamificadas y videos con un 69.4% cada una, cursos en línea con un 61.1%,
videojuegos con un 47.2% y, por último, a través de libros con un 11.1%.
En la ilustración 55 se observa que, al inicio de su carrera, los estudiantes utilizaban

diversos métodos para practicar programación. El 88.9% de los encuestados indicaron
utilizar videos, el 52.8% cursos en línea, el 22.2% herramientas gamificadas, el 19.4%
libros, el 13.9% videojuegos, el 11.1% plataformas de programación competitiva, el 5.6%
Stack Overflow y el 2.8% para proyectos independientes, ejemplos de Google y trabajos
de la universidad.
81
En la ilustración 56 se evidencia que de los métodos utilizados por los estudiantes para
practicar programación en los primeros semestres de la universidad fueron útiles para
mejorar las habilidades de programación con un 86.1% y solo un 13.9% indico que no les
sirvieron los métodos utilizados.
En la ilustración 57 se evidencia que de los métodos utilizados por los estudiantes para
practicar programación en los primeros semestres de la universidad aún siguen siendo
utilizados por los estudiantes para continuar practicando y reforzando sus conocimientos y
habilidades en la programación con un 86.1% y solo un 13.9% indico que ya no los utilizan.
82
En la ilustración 58 se evidencia que los estudiantes consideran con un 97.2% que las
herramientas gamificadas son útiles para aprender a programar y solo un 2.8% consideran
que no son útiles.
En la ilustración 59 se puede observar que el 47.2% de los estudiantes dedica 3 horas

semanales para practicar programación, mientras que el 22.2% dedica 8 horas. Por otro
lado, el 13.9% de los encuestados no dedica tiempo para practicar, el 8.2% dedica 12 horas,
el 5.6% más de 20 horas y el 2.8% dedica 15 horas semanales.
Los resultados de la encuesta permiten evidenciar que los estudiantes tienen una opinión
medianamente buena acerca de su experiencia de aprendizaje en temas de lógica de
programación. Sin embargo, se puede notar que los métodos utilizados para complementar
el material entregado por los docentes en las clases han sido recursos dinámicos e
interactivos, diferentes a los que normalmente son utilizados por los docentes.
83
La encuesta realizada por las estudiantes Luisa Brigitte González Vásquez y Paola Andrea
Bóxiga Acero nos brinda la oportunidad de analizar la percepción de los estudiantes en el
año 2018 sobre la programación. Según los resultados obtenidos, el 30.6% de los
estudiantes manifestó que les gustaba la programación, pero no la aplicaba, mientras que
solo el 28.7% afirmó que les gustaba y querían mejorar sus habilidades y conocimientos.
Además, el 83.3% de los estudiantes consideró que su desempeño en programación habría
sido mejor si hubieran utilizado herramientas gamificadas. Estos hallazgos evidencian el
interés que estas herramientas despiertan en los estudiantes y cómo podrían contribuir
positivamente como herramientas de apoyo en los primeros cursos de programación.
Este estudio resulta relevante ya que aporta información valiosa sobre el proceso de
aprendizaje en programación y las opiniones de los estudiantes al respecto. Según los
resultados obtenidos en las encuestas, se puede concluir que existe una baja motivación e
interés por parte de los estudiantes de ingeniería de sistemas, multimedia y electrónica en
los cursos de programación de primeros semestres.
• Lecturas basadas en perspectiva
Se utilizó esta técnica para adquirir conocimiento e información relacionada con la

gamificación, aprendizaje basado en juegos y juegos serios, permitiendo crear y proponer
requisitos nuevos e innovadores.
Las lecturas que hicieron parte de esta etapa fueron:
 Gamificación: El poder del juego en la gestión empresarial y en la conexión con los

clientes [5].
 Gamification: designing for motivatio [31].
 Método para el diseño de estrategias de juego desde la perspectiva de la gamificación.
 Estrategia mejora en el proceso de atracción y mantenimiento de clientes potenciales,
mediante el uso de contenidos basados en experiencias de gamificación [52].
 La gamificación como estrategia de motivación y dinamizadora de las clases en el
nivel superior [53].
 Conoce los tipos de jugadores de gamificación y cómo cautivarlos [54].
 GAMIFICAR: El uso de los elementos del juego en la enseñanza de español [55].
 Language Conquers, estrategia de juego para el aprendizaje de la programación básica
[56].
 Las plataformas e-learning para la enseñanza [28].
 Using dedalus to designe a game strategy to improve motivation in learning processes
of basic programming [57].
 Marco de trabajo colaborativo para apoyar la gestión de conocimiento, desde un
enfoque de gamificación, para micro y medianas empresas del sector de tecnologías
de la información [58].
La revisión de los documentos anteriormente mencionados, se logró comprender el

concepto de gamificación y sus elementos esenciales. Además, se identificado cómo la
aplicación de la gamificación puede apoyar los procesos de enseñanza en entornos
84
universitarios. Se analizo como esta estrategia puede ser aplicada de manera efectiva en la
herramienta Language Conquers, con el propósito de apoyar el proceso de enseñanza y
práctica en el curso de fundamentos de programación de la Universidad San Buenaventura.
De igual forma se identificó como se puede aumentar la motivación, el compromiso y el
aprendizaje de los estudiantes en este curso específico. Al implementar de manera
adecuada los principios de la gamificación en Language Conquers, se busca fomentar un
ambiente educativo interactivo, que impulse el interés y la participación de los estudiantes.
• Revisión documental
Se utilizó esta técnica para conocer el dominio del problema, teniendo en cuenta los
documentos generados en versiones anteriores como los manuales de usuario de la
plataforma anterior.
• Diseño de usabilidad y experiencia de usuario para una herramienta didáctica tipo

juego orientada a la mejora de los procesos de motivación en el aprendizaje de
programación básica de Luisa Brigitte González Vásquez y Paola Andrea Bóxiga
Acero [15].
• Implementación de una herramienta de apoyo basada en principios de Gamificación
para la mejora de la motivación en los procesos de aprendizaje de la programación
en los primeros años de Ingeniería de Laura Fernanda Canaval García [16].
• Diseño e implementación de una herramienta LMS “Language Conquers”, utilizando
lineamientos de experiencia de usuario y estrategias de gamificación que incentivan
el proceso de aprendizaje en estudiantes de programación de Juan David Arboleda
[17].
A través de la revisión documental realizada, se pudieron identificar los problemas y

oportunidades de mejora en la plataforma.
Los principales hallazgos fueron:
• Una arquitectura poco escalable en su diseño.

• Limitaciones en las funcionalidades existentes de la primera versión de la aplicación.
• Oportunidad de mejora en el diseño visual de la plataforma.
• Problemas en la funcionalidad principal de la plataforma, que consistía en el simple
cargue de archivos.
• Baja interacción por parte de los estudiantes en la plataforma para la solución del reto.
Con estos hallazgos, se estableció una base sólida para la creación de nuevas
funcionalidades y un rediseño de la plataforma con el fin de mejorar su usabilidad y eficacia.
2. Historias de Usuario
Las Historias de usuario fueron desarrolladas en colaboración con los profesores realizaron
en sesiones que se tuvieron con los profesores Víctor Manuel Peñeñory, Kathia. Durante
las sesiones de trabajo, se consideraron la versión anterior, los problemas identificados y
las mejoras propuestas para esta nueva versión.
85
A continuación, las Tablas 8 a la 13 se listan las historias de usuario creadas teniendo en

cuenta los requisitos establecidos. En la sección de anexos se encuentra el documento ARS
en donde se podrá visualizar la totalidad de las historias de usuario definidas.
Tabla 8 Historia de usuario No.17

ID 17
Nombre de la Historia Pantalla solución del reto
Prioridad Alta
Usuario Estudiante
Desarrollador Responsable Juan Pablo Caro Vargas
Estimación (Hrs) 72
Descripción Como estudiante,
Quiero poder completar los retos propuestos a través de un
entorno que me permita organizar componentes de manera
que cumplan con la solución esperada,
Para poder completar la construcción de la solución de
manera estructurada.
Criterios de Aceptación
1. Dado que un estudiante ingrese a la pantalla para la solución del reto, entonces deberá
mostrar el objetivo que tiene el reto para que el estudiante entienda de que se trata el
reto.
2. Se debe listar las funciones necesarias para la solución del reto.
3. Se deben poder arrastrar las funciones a otra lista que representen la solución del reto.
4. Una vez completado un reto se debe de visualizar una respuesta dependiendo de si se
realizó correctamente o no.
5. Si el reto no se realizó correctamente se deberá mostrar los errores cometidos.
6. Se debe validar si el algoritmo realizado por el estudiante es válido para el cumplimiento
del reto.
7. Debe contar con una serie de comandos basados en acciones que los usuarios podrán
realizar dentro de la isla (Cortar, Saltar, Nadar, Avanzar, Pescar, Girar a la Izquierda,
Girar a la derecha, etc.).
8. Se otorgarán puntos que le permitan al estudiante utilizarlos como monedas dentro de la
plataforma para adquirir recursos de personalización de su avatar.
9. Se debe permitir el lenguaje grafico según el tipo de misión a superar.
Tabla 9 Historia de Usuario No.20

ID 20
Nombre de la Historia Evaluación de los retos
Prioridad Alta
Usuario Docente
Desarrollador Angela Maria Acosta Ramirez y Juan Pablo Caro Vargas
Responsable
Descripción Como docente,
Quiero que el estudiante resuelva los retos a través de elementos con
los cuales pueda interactuar en la pantalla,
Para generarles una experiencia práctica y fomentar la participación.
86
1. Dado que el estudiante realice el reto entonces se le deberá permitir desarrollarlo a través
de seudocódigo.
2. Dado que el estudiante termine el reto entonces el sistema debe evaluar la correctitud de
la solución propuesta por el estudiante.
3. Dado que el reto tiene asignado una cantidad de intentos permitidos entonces cuando la
solución propuesta por el estudiante sea correcta, se tendrá en cuenta los intentos
utilizados por el estudiante para que se asigne la cantidad de monedas y puntaje ganado.

ID 21
Nombre de la Historia Retos Bajar Cocos Básico
Prioridad Alta
Usuario Docente
Responsable
Quiero que el primer reto de la plataforma trate sobre la búsqueda de
cocos,
Para ofrecerá a los estudiantes la oportunidad de aplicar conceptos y
habilidades relevantes mientras se embarcan en una misión de
búsqueda y recolección de cocos
1. El reto debe de utilizar verbos, los cuales se pueden ser reutilizados en la secuencia de
este.
2. Las fichas que se le mostrar al estudiante para que resuelva el reto deberán ser palabras
simples, distribuidas por colores para representar su funcionalidad dentro del reto.
3. El reto debe contar con una descripción clara y sencilla de cuál es la solución esperada.
4. Cada reto debe tener dos versiones, básica e intermedia. En las cuales las básicas
contaran con palabras de acciones - objetos y la intermedia con palabras de asignaciones,
acciones, objetos y variables.

ID 22
Nombre de la Historia Retos Construcción de Fuego
Prioridad Alta
Usuario Docente
Responsable
Quiero que el segundo reto continue con el tema de algoritmos,
intensificando un poco la complejidad de la solución,
Para permitir a los estudiantes profundizar en su comprensión de los
algoritmos y aplicarlos en situaciones más desafiantes
este.
87
5. Se deben de agregar acciones compuestas, utilizando uno o dos parámetros para realizar
cada acción.

ID 23
Nombre de la Historia Retos Estructuras de repetición
Prioridad Alta
Usuario Docente
Responsable
Quiero que el tercer tema para los retos de la plataforma trate el tema
de algoritmos, intensificando más la complejidad de la solución,
Para permitir a los estudiantes profundizar en su comprensión de
algoritmos y aplicarlos en situaciones más desafiantes.
este.
5. Se deben de agregar acciones compuestas, utilizando uno o dos parámetros para realizar
cada acción.
6. La complejidad del reto debe aumentar, por medio de la utilización de acciones que son
generadas anteriormente por otras acciones.

ID 30
Nombre de la Historia Tienda de recursos
Prioridad Media
Usuario Estudiante
Desarrollador Angela Maria Acosta Ramirez
Responsable
Descripción Como estudiante,
Quiero poder canjear las monedas obtenidas en los retos del curso al
cual estoy matriculado,
Para poder comprar elementos de personalización para mi avatar y
así tener una experiencia más única y personal dentro de la
plataforma.
88
1. Dado que el estudiante quiere poder visualizar los artículos disponibles para comprar,
entonces deberá ir a la sección de la tienda y esta mostrará los artículos según la
categoría que tenga asignada.
2. Cuando un artículo fue comprado este no podrá aparecer nuevamente en la tienda y
deberá actualizarse la lista de los artículos de la tienda.
3. Si el estudiante no tiene la cantidad de monedas necesarias para comprar un artículo,
entonces le deberá salir un mensaje que diga que no tiene suficientes monedas para
comprar el artículo.
3. Técnica de priorización
Como técnica utilizada para la priorización de las historias de usuario se utilizó la técnica
de clasificación de lista, en esta técnica se define que se hace primero teniendo en cuenta
un motivo, razón o nivel de importancia. En este caso el motivo o razón con la cual se
realizó la priorización de esta manera fue debido que al inicio del proyecto no se habían
entregado los requerimientos principales o característicos del proyecto, por lo que se
decidió crear la lista clasificándola desde el punto de vista de los procesos que se llevan
para acceder a una aplicación y el contenido que se debe encontrar en ella a medida que se
va navegando.
Esta técnica de clasificación por lista tiene como ventaja que aporta precisión y evita la
confusión. Se prioriza cada elemento en relación con el resto de los elementos, lo que
simplifica el proceso y lo hace más claro.
4. Sprint Planning
Durante la reunión de planificación del primer Sprint en el proyecto, se estableció la
duración de los Sprints, se conformó el equipo Scrum y se asignaron las horas de dedicación
a cada desarrollador. Para brindar una explicación detallada de lo mencionado
anteriormente, la Tabla 14 evidencia la duración de los Sprints, el equipo Scrum y las horas
de dedicación asignadas a cada desarrollador.
Tabla 14 Planificación del proyecto

Duración de los Sprints 20 días hábiles
Angela Maria Acosta Ramirez
Antonio de la Valle
Responsables
Juan Pablo Caro
Juan Daniel Scaffy
Mínimo de horas de dedicación en cada Sprint 15 Horas
Máximo de horas de dedicación en cada Sprint 30 Horas
Durante este evento se estableció que cada sprint tiene una duración de 20 días hábiles, con
un máximo de horas de trabajo de 30 horas, teniendo en cuenta las responsabilidades
externas que tiene cada desarrollador. las historias de usuario se asignaron a cada
desarrollador y cada uno estableció según su criterio, capacidad y habilidades el tiempo
que podría tardar en completar la historia de usuario que tendrían a cargo durante todo el
proyecto.
89
Tabla 15 Asignación de las Historias de Usuario

Nombre de la Historia de Desarrollador Estimación
HU Desarrollador Backend
Usuario Frontend (HRS)
1 Registro del docente en la Juan Pablo Caro Vargas Antonio de la Valle 12
plataforma
2 Registro del estudiante en la Juan Pablo Caro Vargas Antonio de la Valle 12
plataforma
3 Términos y Condiciones Angela Maria Acosta Juan Daniel Scaffy 6
Ramirez
4 Selección de avatar Angela Maria Acosta Juan Daniel Scaffy 12
Ramirez
5 Inicio de sesión Angela Maria Acosta Juan Daniel Scaffy 8
Ramirez
6 Recuperar Contraseña Angela Maria Acosta Juan Daniel Scaffy 8
Ramirez
7 Logout de la plataforma Angela Maria Acosta Juan Daniel Scaffy 6
Ramirez
8 Home o página principal de la Angela Maria Acosta Juan Daniel Scaffy 4
plataforma Ramirez
9 Listar Cursos Angela Maria Acosta 4
Ramirez
10 Pantalla principal del curso para el Juan Pablo Caro Vargas Antonio de la Valle 12
docente
11 Actualizar reto en la plataforma Juan Pablo Caro Vargas Antonio de la Valle 8
12 Ranking por puntuación de los Angela Maria Acosta Antonio de la Valle 12
estudiantes Ramirez
13 Visualizar perfil del docente Juan Pablo Caro Vargas Antonio de la Valle 6
14 Modificar información del Juan Pablo Caro Vargas Juan Daniel Scaffy 6
docente
15 Pantalla principal del curso para el Angela Maria Acosta Juan Daniel Scaffy 15
estudiante Ramirez y Juan Pablo
Caro Vargas
16 Visualizar descripción teórica del Juan Pablo Caro Vargas Antonio de la Valle 6
reto
17 Pantalla solución del reto Juan Pablo Caro Vargas Juan Daniel Scaffy 72
18 Estado de los retos Juan Pablo Caro Vargas Antonio de la Valle 2
19 Descripción de los retos Juan Pablo Caro Vargas Juan Daniel Scaffy 8
20 Evaluación de los retos Angela Maria Acosta Antonio de la Valle 15
Ramirez y Juan Pablo
Caro Vargas
21 Retos algoritmia Juan Pablo Caro Vargas Juan Daniel Scaffy 15
22 Retos Estructuras de selección Juan Pablo Caro Vargas Antonio de la Valle 25
23 Retos Estructuras de repetición Juan Pablo Caro Vargas Juan Daniel Scaffy 25
24 Logros Juan Pablo Caro Vargas Juan Daniel Scaffy 8

25 Contenidos bloqueados Angela Maria Acosta Antonio de la Valle 6
Ramirez
26 Puntajes obtenidos por retos Juan Pablo Caro Vargas Juan Daniel Scaffy 8
27 Acumular Monedas dentro del Juan Pablo Caro Vargas Antonio de la Valle 8
curso
90
28 Obtener logros Angela Maria Acosta Juan Daniel Scaffy 8

Ramirez
29 Visualizar logros de la plataforma Angela Maria Acosta Antonio de la Valle 8
Ramirez
30 Tienda de recursos Angela Maria Acosta Juan Daniel Scaffy 18
Ramirez
31 Visualizar perfil del estudiante Juan Pablo Caro Vargas Antonio de la Valle 6
32 Actualizar información del Angela Maria Acosta Juan Daniel Scaffy 8
estudiante Ramirez
33 Carga de imágenes Angela Maria Acosta Antonio de la Valle 8
Ramirez
34 Validaciones generales de los Angela Maria Acosta Juan Daniel Scaffy 20
formularios del sistema Ramirez y Juan Pablo
Caro Vargas
35 Estadísticas Angela Maria Acosta Antonio de la Valle 8
Ramirez
36 Tutorial Angela Maria Acosta Antonio de la Valle 8
Ramirez
37 Creación Rol Administrador Angela Maria Acosta Antonio de la Valle 10
Ramirez y Juan Pablo
Caro
38 Lista de datos separados por los Angela Maria Acosta Antonio de la Valle 30
componentes que contiene la Ramirez
plataforma.
39 Creación de datos para cada Angela Maria Acosta Antonio de la Valle 30
componente que contiene la Ramirez
plataforma.
40 Actualizar datos por cada Angela Maria Acosta Juan Daniel Scaffy 30
componente que contiene la Ramirez
plataforma.
41 Eliminar un registro de un Angela Maria Acosta Juan Daniel Scaffy 20
componente en la plataforma. Ramirez
5. Product Backlog
Para la realización del Product Backlog se tuvo en cuenta las historias de usuario que
habían sido asignadas previamente y se priorizaron teniendo en cuenta las necesidades del
proyecto. La Tabla 16 hace referencia al Product Backlog priorizado establecido para el
proyecto.
Tabla 16 Product Backlog

HU Nombre de la Historia de Usuario Priorización
1 Registro del docente en la plataforma Alta
2 Registro del estudiante en la plataforma Alta
3 Términos y Condiciones Baja
4 Selección de avatar Media
5 Inicio de sesión Alta
6 Recuperar Contraseña Alta
7 Logout de la plataforma Alta
8 Home o página principal de la plataforma Media
91
9 Listar Cursos Media

10 Pantalla principal del curso para el docente Media
11 Actualizar reto en la plataforma Alta
12 Ranking por puntuación de los estudiantes Media
13 Visualizar perfil del docente Baja
14 Modificar información del docente Media
15 Pantalla principal del curso para el Alta
estudiante
16 Visualizar descripción teórica del reto Media
17 Pantalla solución del reto Alta
18 Estado de los retos Baja
19 Descripción de los retos Alta
20 Evaluación de los retos Alta
21 Retos algoritmia Alta
22 Retos Estructuras de selección Alta
23 Retos Estructuras de repetición Alta
24 Logros Alta
25 Contenidos bloqueados Media
26 Puntajes obtenidos por retos Alta
27 Acumular Monedas dentro del curso Alta
28 Obtener logros Media
29 Visualizar logros de la plataforma Media
30 Tienda de recursos Media
31 Visualizar perfil del estudiante Baja
32 Actualizar información del estudiante Alta
33 Carga de imágenes Media
34 Validaciones generales de los formularios Alta
del sistema
35 Estadísticas Media
36 Tutorial Baja
37 Creación Rol Administrador Media
38 Lista de datos separados por los Media
componentes que contiene la plataforma.
39 Creación de datos para cada componente Media
que contiene la plataforma.
40 Actualizar datos por cada componente que Media
contiene la plataforma.
41 Eliminar un registro de un componente en Media
la plataforma.
92
6. Backlog
Considerando la asignación de las historias de usuario y el Product Backlog, se presenta a
continuación la Tabla 17, en la cual se listan las historias de usuario desarrolladas, junto
con su estimación en horas, priorización, sprint en el que se realizaron y el desarrollador
responsable.
Tabla 17 Backlog Priorizado
Desarrollador Desarrollador Estimación Sprint
HU Titulo Priorización
Backend Frontend (HRS) Asignado
Registro del docente en la Juan Pablo Caro Antonio de la
1 12 Alta 1
plataforma Vargas Valle
Registro del estudiante en la Juan Pablo Caro Antonio de la
2 12 Alta 1
Angela Maria Juan Daniel
3 Términos y Condiciones 6 Baja 2
Acosta Ramirez Scaffy
4 Selección de avatar 12 Media 9
5 Inicio de sesión 8 Alta 1y2
6 Recuperar Contraseña 8 Alta 2
7 Logout de la plataforma 6 Alta 1
Home o página principal de Angela Maria Juan Daniel
8 4 Media 2Y7
la plataforma Acosta Ramirez Scaffy
Angela Maria
9 Listar Cursos 4 Media 7
Acosta Ramirez
Pantalla principal del curso Juan Pablo Caro Antonio de la
10 12 Media 9
para el docente Vargas Valle
Actualizar reto en la Juan Pablo Caro Antonio de la
11 8 Alta 6
Ranking por puntuación de Angela Maria Antonio de la
12 12 Media 7
los estudiantes Acosta Ramirez Valle
Juan Pablo Caro Antonio de la
13 Visualizar perfil del docente 6 Baja 5
Vargas Valle
Modificar información del Juan Pablo Caro Juan Daniel
14 6 Media 5
docente Vargas Scaffy
Angela Maria
Pantalla principal del curso Acosta Ramirez Juan Daniel
15 15 Alta 15
para el estudiante y Juan Pablo Scaffy
Caro Vargas
Visualizar descripción Juan Pablo Caro Antonio de la
16 6 Media 14
teórica del reto Vargas Valle
Juan Pablo Caro Juan Daniel
17 Pantalla solución del reto 72 Alta 4Y9
Vargas Scaffy
Juan Pablo Caro Antonio de la
18 Estado de los retos 2 Baja 14
Vargas Valle
19 Descripción de los retos 8 Alta 14
Vargas Scaffy
Angela Maria
Acosta Ramirez Antonio de la
20 Evaluación de los retos 15 Alta 11
y Juan Pablo Valle
Caro Vargas
93

21 Retos algoritmia 15 Alta 10 y 11
Vargas Scaffy
Retos Estructuras de Juan Pablo Caro Antonio de la 10, 11 y
22 25 Alta
selección Vargas Valle 12
Retos Estructuras de Juan Pablo Caro Juan Daniel
23 25 Alta 10 y 12
repetición Vargas Scaffy
24 Logros 8 Alta 10 y 13
Vargas Scaffy
Angela Maria Antonio de la
25 Contenidos bloqueados 6 Media 10 y 13
Acosta Ramirez Valle
26 Puntajes obtenidos por retos 8 Alta 8
Vargas Scaffy
Acumular Monedas dentro Juan Pablo Caro Antonio de la
27 8 Alta 15
del curso Vargas Valle
28 Obtener logros 8 Media 14
Visualizar logros de la Angela Maria Antonio de la
29 8 Media 8
plataforma Acosta Ramirez Valle
30 Tienda de recursos 18 Media 14 y 15
Visualizar perfil del Juan Pablo Caro Antonio de la
31 6 Baja 9 y 15
estudiante Vargas Valle
Actualizar información del Angela Maria Juan Daniel
32 8 Alta 7
estudiante Acosta Ramirez Scaffy
33 Carga de imágenes 8 Media 15
Angela Maria
Validaciones generales de Acosta Ramirez Juan Daniel
34 20 Alta 3
los formularios del sistema y Juan Pablo Scaffy
Caro Vargas
35 Estadísticas 8 Media 15
36 Tutorial 8 Baja 15
Angela Maria
Acosta Ramirez Antonio de la
37 Creación Rol Administrador 10 Media 10
y Juan Pablo Valle
Caro
Lista de datos separados por
38 los componentes que 30 Media 10 y 11
contiene la plataforma.
Creación de datos para cada
39 componente que contiene la 30 Media 11 y 12
plataforma.
Actualizar datos por cada
40 componente que contiene la 30 Media 12 y 13
plataforma.
Eliminar un registro de un
41 componente en la 20 Media 13
plataforma.
94
La Tabla 17 hace referencia al backlog priorizado establecido para el proyecto, en el que

la estimación de las horas se realizó teniendo en cuenta las capacidades de cada
desarrollador y los compromisos externos como tiempo laboral o de estudio de cada uno.
7. Sprint Backlog
En la primera iteración, se planificaron y gestionaron los 4 primeros Sprints. En iteraciones
posteriores, se planificaron los siguientes Sprints a medida que se presentaban dificultades
que generaban incertidumbre y cambios de responsabilidades en relación con las tareas que
se estaban trabajando. De esta manera, se adaptaron las planificaciones para abordar las
dificultades encontradas en el desarrollo del proyecto.
Tabla 18 Registro Sprint No.1

Actividades del Sprint 1
Fecha de Inicio Abril 06 de 2022
Fecha de
Abril 30 de 2022
Finalización
• Planteamiento inicial de los atributos de la base de datos.
Objetivos del • Mapeo de la base de datos en el Backend.
Sprint • Creación del método de autenticación con Firebase.
• Conexión de la base de datos con el Backend.
Historias de
HU1, HU2, HU5, HU7
usuario realizadas
El usuario puede registrarse por medio de su correo electrónico y
Resultado Final
contraseña, Gmail o Facebook.
• Se utilizó PostgreSQL como base de datos.
• Se utilizó Firebase para el proceso de autenticación debido a su
facilidad de uso y configuración para el registro de usuarios en la
Observaciones plataforma.
• Quedaron pendientes algunos detalles de las pantallas de inicio de
sesión y la implementación de la pantalla de crear usuarios en el
Frontend, ya que no se creó el componente en Angular.
Historias para el
HU3, HU5, HU6, HU8
siguiente Sprint

Fecha de Inicio Mayo 02 de 2022
Fecha de
Mayo 24 de 2022
Finalización
• Exponer los servicios para listar los cursos disponibles para el
Objetivos del
estudiante.
Sprint
• Finalizar la implementación de la pantalla de inicio de sesión.
Historias de
HU3, HU5, HU6, HU8
usuario realizadas
Al ingresar por primera vez a la plataforma, el usuario podrá registrar su
Resultado Final cuenta, ingresar sus datos personales, cambiar su contraseña y cerrar
sesión.
Se ha completado la entrega de todas las Historias de Usuario
Observaciones
comprometidas en este Sprint.
Historias para el
HU34, HU37
siguiente Sprint
95

Fecha de Inicio Mayo 25 de 2022
Fecha de
Junio 17 de 2022
Finalización
Objetivos del Sprint • Realizar todas las validaciones correspondientes a los CRUD.
• Crear el módulo para el administrador.
Historias de usuario
HU34, HU37
realizadas
Se han realizado todas las validaciones necesarias para los formularios y
Resultado Final
se ha diseñado el módulo para el administrador.
Se ha completado la entrega de todas las Historias de Usuario
Observaciones
comprometidas en este Sprint.
Historias para el
HU8, HU9, HU17, HU33
siguiente Sprint
En las Tablas 18 a la 20 se encuentra detallado el seguimiento del Sprint, que abarca el

objetivo del Sprint, las historias de usuario desarrolladas, el resultado final obtenido,
observaciones relevantes y las historias de usuario que se abordarán en el próximo sprint.
Para una visión más exhaustiva de todos los Sprints realizados, se proporciona el
seguimiento completo en el Anexo 1.
8. Daily Scrum
Esta ceremonia se llevó a cabo a través de chats, donde los miembros del equipo mantenían
una comunicación constante sobre las actividades completadas, las que estaban en proceso
y los impedimentos que surgían.
9. Sprint Review
En esta ceremonia se entregaron avances a los directores de proyecto de grado, entregando
el incremento del producto y se discutían ajustes necesarios para los siguientes Sprints.
10. Sprint Retrospective

En la retrospectiva del sprint, que tuvo lugar al finalizar cada ciclo de trabajo, se llevó a
cabo con el objetivo de identificar las oportunidades de mejora para cada desarrollador,
teniendo en cuenta las entregas realizadas y el compromiso de cada uno durante el sprint.
G. Implementación
En la implementación y desarrollo del proyecto se aplicaron las metodologías SCRUM y
Design Thinking presentadas previamente (Sección de metodologías), Estas metodologías
trabajan de manera iterativa, por lo que se debe explicar la forma en la que se llevaron a
cabo las iteraciones para este trabajo.
96
Ilustración 60 Cronograma etapas de SCRUM
La ilustración 60 muestra el diagrama que representa las iteraciones realizadas con la

metodología seleccionada. Durante la primera iteración, denominada planificación, se
llevaron a cabo reuniones iniciales con los profesores responsables de este proyecto de
investigación. En estas reuniones, se logró comprender las necesidades de los usuarios y los
requisitos del proyecto, lo cual permitió definir las historias de usuario y crear el Product
Backlog. Con esto, se dio inicio al proceso de incremento del producto.
Se emplearon dos metodologías distintas en el desarrollo del proyecto con el objetivo de

separar la creación de los elementos gráficos que forman parte del proyecto. Esta estrategia
permitió la creación de elementos visuales que capturan el interés de los usuarios al utilizar
la plataforma Language Conquers.
Ilustración 61 Fases de Design Thinking
En la ilustración 61 se muestra el diagrama que representa las dos iteraciones llevadas a

cabo utilizando la metodología seleccionada. Las fases de las iteraciones fueron detalladas
en la sección Fases del Design Thinking. La primera iteración abarca todas las fases de la
97
metodología, mientras que la segunda iteración comienza con la recepción de

retroalimentación surgida de la prueba inicial de la pantalla de login y el logo presentadas
a los estudiantes de ingeniería multimedia de la Universidad San Buenaventura
de Cartagena del curso de fundamentos de programación. A partir de esa
retroalimentación, se vuelve a la fase de ideación y luego se da inicio al desarrollo con el
diseño final.
Para proporcionar una explicación completa del proceso de desarrollo del proyecto, se
presenta un diagrama de estructuración que representa cada etapa realizada durante su
ejecución.
Ilustración 62 Proceso de ejecución del proyecto
En el diagrama de la ilustración 62, cada elemento que se encuentra enumerado

corresponde a una parte del proceso de desarrollo de la aplicación, desde la parte de
investigación hasta el proceso de implementación, cada elemento corresponde a:
• Investigación de gamificación, revisión de la plataforma y definición del alcance.

• Diseño de prototipos.
• Selección y diseño de la arquitectura y proceso de creación de retos.
• Selección de tecnologías para el desarrollo del proyecto.
• Desarrollo de la plataforma y pruebas automatizadas.
• Pruebas con usuarios.
A continuación, se explica detalladamente cada uno de estos elementos:
1. Investigación de gamificación, herramientas de aprendizaje y revisión de

la plataforma actual: Definición del alcance.
Tras investigar los conceptos de gamificación, sus elementos y juegos serios, así como
explorar las herramientas gamificadas existentes en el Capítulo II, se determinó que
estos hallazgos fueron fundamentales para el desarrollo de la nueva versión de la
herramienta gamificada Language Conquers. A través de esta investigación, se logró
comprender los elementos distintivos de este tipo de herramientas o plataformas cuyo
objetivo principal es enseñar y ayudar a los usuarios a adquirir conocimientos en un
tema específico, así como reforzar conocimientos previos de una manera más
interactiva y participativa.
Se realizó una exhaustiva revisión de los elementos y funcionalidades presentes en la

versión anterior de la plataforma, con el objetivo de determinar cuáles deben
98
conservarse y cuáles no contribuyen al objetivo principal de la plataforma. Con base

en esta evaluación, se elaboró la Tabla 21 en la que se definen los elementos que deben
mantenerse y aquellos que requieren ser modificados.
Tabla 21 Funcionalidades Modificadas

Funcionalidad Descripción Mantener Modificar Justificación
El estudiante tenía un Se tomó la decisión
Login del módulo diferente para de implementar un
x
estudiante el acceso a la único módulo que
plataforma. permita a los usuarios
El docente tenía un acceder o registrarse
Login del módulo diferente para en la plataforma
x
docente el acceso a la desde una ubicación
plataforma. centralizada.
Se realizó una
modificación en el
formulario de
Se solicitaban creación de usuarios
nombres, apellidos, con el objetivo de
correo, confirmación obtener únicamente la
Campos en el
de correo, contraseña, información básica
formulario de
confirmación de x necesaria, eliminando
creación del
contraseña, género, la opción de selección
usuario
fecha de nacimiento, de curso. Esta
curso al que desea decisión se tomó
registrarse y avatar. considerando que un
estudiante puede estar
registrado en
múltiples cursos.
Se decidió
implementar una
El estudiante accedía
pantalla de inicio
directamente a la
Pantalla donde el estudiante
pantalla del curso,
principal del x pueda ver los cursos
donde encontraba islas
estudiante disponibles y a los
que representan temas
que está matriculado
dentro del curso.
dentro de la
plataforma.
En esta versión, se
decidió eliminar esa
función ya que se
Creación de un El docente puede crear creó un usuario
curso por parte un curso dentro de la x administrador con los
del docente plataforma permisos necesarios
para gestionar esa
información dentro de
la plataforma.
Se decidió eliminar
esta sección debido a
El docente podía
Sección de que los docentes no
almacenar recursos
archivos del x necesitan almacenar
para los retos que
docente recursos en su
configuraba.
sección, ya que los
retos que se
99
encuentran en la
plataforma incluyen
material de apoyo ya
definido.
Se decidió crear una
sección de artículos
adquiridos como un
Los estudiantes
inventario, donde los
almacenaban recursos
Sección de estudiantes puedan
obtenidos durante un x
recursos almacenar y
reto y los archivos de
visualizar los
los retos realizados
elementos que han
adquirido desde la
tienda.
Se realizó un pequeño
cambio en esta
sección. Ahora el
docente puede
Sección para configurar los retos
El docente creaba y
configurar un que ya se encuentran
configuraba retos x
reto por parte disponibles en el
según su criterio.
del docente sistema para que los
estudiantes los
resuelvan, pero no
puede crear nuevos
retos.
Los estudiantes Se decidió no
Sección de
visualizaban la implementar un
calificación de x
calificación obtenida sistema de
retos
en cada reto entregado calificación dentro de
la plataforma debido
a la complejidad que
implica determinar la
forma de calificar un
Sección para El estudiante subía el reto. En su lugar, se
enviar un reto archivo que contenía optó por utilizar un
x
por parte del la solución del reto puntaje y un estado
estudiante propuesto como referencia para
evaluar el desempeño
del usuario, el cual el
estudiante puede ver
al finalizar un reto.
Se agregaron barras
de progreso que
El estudiante puede
permiten al usuario
Perfil del visualizar y actualizar
x ver el porcentaje de
estudiante su información
su avance en los retos
personal
y los logros
desbloqueados.
Esta sección es solo de Se decidió mantener
visualización, pero les esta sección sin
Ranking de permite a los usuarios modificaciones y se
x
usuarios visualizar y motivarse agregó al módulo del
a poder encontrarse en docente para que
una tabla de también pueda
100
posiciones de los monitorear el

mejores usuarios. progreso de sus
estudiantes.
El docente puede No se realizaron
Perfil del visualizar y actualizar cambios en esta
x
docente su información funcionalidad y
personal. pantalla.
Una vez definidos los cambios que se aplicarían a la plataforma en relación con las
funcionalidades existentes, se plantearon nuevas funcionalidades con el objetivo de generar
un mayor compromiso e interacción por parte de los usuarios dentro de la plataforma. En
la Tabla 22 se detallan las nuevas funcionalidades propuestas, el rol que tiene acceso a
cada una de ellas y una breve descripción de estas.
Tabla 22 Funcionalidades Propuestas
Funcionalidad Rol Descripción
El estudiante podrá desbloquear logros al completar
Obtener logros Estudiante
los retos.
Los estudiantes podrán visualizar su progreso en los
Barras de progreso Estudiante retos disponibles y los logros desbloqueados desde
su perfil.
estudiantes podrán canjear las monedas obtenidas
Tienda Estudiante en los retos por artículos, en esta versión se centra
en artículos de vestir para personalizar sus avatares.
Artículos Los estudiantes podrán ver y gestionar los artículos
Estudiante
adquiridos que adquieran en la tienda desde esta sección.
Se propone la implementación de un IDE funcional
Resolución de y gráfico donde los estudiantes puedan resolver los
retos con un retos propuestos. En esta versión se utiliza un
Estudiante
prototipo básico sistema de "Drag and Drop" para que los
de IDE estudiantes establezcan las instrucciones que
resuelvan el reto.
Se propone la integración de material de apoyo en
Material de apoyo cada reto, que sirva como recurso para que los
Estudiante
en los retos estudiantes accedan a él sin la necesidad de salir del
reto y la plataforma.
Se propone un módulo en el que un Super Usuario
Módulo de (administrador) tenga acceso a funcionalidades del
Administrador
administrador sistema, como agregar, actualizar o eliminar datos
desde una interfaz gráfica.
Luego de identificar las funcionalidades que requerían mejoras y adiciones, y de considerar

los datos recopilados durante la fase de recolección de requisitos, se procedió a la creación
de historias de usuario y a la definición de los artefactos a utilizar en el desarrollo, como
se detalla en la sección de Aplicación de SCRUM.
2. Diseño de prototipos
En la sección de aplicación de la metodología Design Thinking, se presentó el primer
prototipo de la interfaz de usuario, detallando cada pantalla. A continuación, se describen
tres procesos relevantes que se llevaron a cabo después de la creación de estos primeros
prototipos:
101
• Rediseño del logo

• Creación de logros
• Prototipo en Figma
a) Rediseño del logo
Tomando en consideración la evaluación realizada a la versión anterior de la plataforma,

se tomó la decisión de realizar un cambio completo en el contenido gráfico y actualizarlo.
Esto incluyó la necesidad de cambiar el logotipo, ya que no se disponía de una resolución
adecuada ni del archivo editable.
Tabla 23 Evolución del logo
Versión inicial Primer prototipo Prototipo Final
En la Tabla 23, se puede apreciar que el primer prototipo fue diseñado manteniendo los
tonos de colores del logotipo original, los cuales se consideraron para la interfaz de la
plataforma. Sin embargo, a medida que avanzaba el proyecto, surgió la propuesta de
cambiar el color del logotipo con el objetivo de reflejar los colores relevantes en el contexto
de la historia, específicamente la isla. Por lo tanto, se decidió utilizar el color marrón y
azul, simbolizando la tierra y el mar del entorno donde se desarrolla la historia.
También se desarrolló el Favicon para la aplicación web, el cual fue diseñado considerando
un logotipo que representara el nombre de la plataforma. Por lo tanto, se decidió utilizar
las iniciales "LC" para hacer referencia a "Language Conquers", y se seleccionó el color
azul para asegurar su visibilidad.
Ilustración 63 Favicon
b) Creación de logros
En esta versión de la plataforma, se incorporó el elemento de insignias o también

denominado logros con el propósito de motivar a los estudiantes a alcanzar objetivos
específicos y fomentar su participación. Se crearon diferentes logros para incentivar a los
usuarios a esforzarse y demostrar sus habilidades, lo cual es esencial en la gamificación
102
para captar su atención, mantener su compromiso y visualizar su progreso de manera clara

y motivadora.
En la Tabla 24 se detallan todos los logros incluidos en la plataforma, junto con su

correspondiente icono, nombre, símbolo y una descripción que indica las condiciones para
desbloquear cada logro por parte del usuario.
Tabla 24 Logros
Ícono Nombre Símbolo Descripción
Estar conectado en la plataforma

Compromiso Pergamino
por 3 horas seguidas.
Pensamiento Pieza Completar un reto al primer intento

Lógico Ajedrez con la máxima puntuación.
Reloj de Completar un reto con el mínimo de

Super veloz
Arena tiempo del reto.
Completar un reto con su máxima

Conquistador Espadas
puntuación en el último intento.
Obtener el primer lugar del ranking

Ganador Copa
del curso.
Lanzador Completar un reto con la máxima

Perfeccionista
de Flechas puntuación.
Primer
Ropa Modificar el avatar por primera vez.
atuendo
Armadura
Completar tres misiones en 24
Imparable de
horas.
caballero
103
Completar tres retos seguidos con la

Estudioso Libros
puntuación máxima.
Baúl con
Ahorrador Obtener las primeras 500 monedas.
monedas
Paquete Realizar la primera compra en la

Comprador
Bolsas tienda.
Superviviente Brújula Cumplir con los tres primeros retos.
c) Prototipo en Figma
En la sección de implementación de la metodología Design Thinking, específicamente en

la fase de prototipado (Sección de Fases de Design Thinking), se presenta el prototipo
inicial y se explicó cada pantalla, en esta sección se presenta la implementación de ese
prototipo más avanzado, creado en Figma 17.
En cuanto a la definición de la paleta de colores, se tuvieron en cuenta los elementos de la

tierra y el mar, tal como se mencionó en el rediseño del logo (Sección Diseño de
prototipos). Se propuso utilizar, al igual que en la versión final del logo, los colores que
evocan a los elementos de la tierra y el mar. En cuanto al color de fondo, se optó por un
tono oscuro ampliamente utilizado por los desarrolladores, con el objetivo de proporcionar
descanso visual.
104
Ilustración 64 Prototipo en Figma: Iniciar Sesión
Ilustración 65 Prototipo en Figma: Crear Cuenta
En las ilustraciones 64 y 65 se muestra el prototipo de las pantallas de inicio de sesión. En

este diseño, la ilustración presente en el prototipo y los botones de Google y Facebook
fueron creados por estudiantes de ingeniería multimedia de la Universidad San
105
Buenaventura Cartagena. Se optó por utilizar un tono azul que ofrece un mejor contraste
con el fondo oscuro propuesto.
Ilustración 66 Prototipo en Figma: Registrar Usuario Profesor
Ilustración 67 Prototipo en Figma: Registrar usuario estudiante
En las ilustraciones 66 y 67 se muestra el diseño propuesto para el registro de docentes y

estudiantes. En el caso del registro de docentes, se ha definido un formulario con tres campos
principales: Nombre, Apellido y Género. Además, se ha incorporado un botón que permite
cargar una foto desde los archivos del computador.
Por otro lado, en el registro de estudiantes se ha creado un formulario más completo, con
siete campos requeridos. Estos campos incluyen Nombre, Apellidos, NickName, Semestre,
Género, Programa y Fecha de nacimiento. Además, se ha implementado un control deslizante
(slider) que permite seleccionar un avatar.
106
Ilustración 68 Prototipo en Figma: Home del profesor y del estudiante
En la ilustración 68 se muestra la pantalla principal (Home) de la plataforma una vez que

el usuario ha iniciado sesión. En esta pantalla, se encuentra un banner de imágenes
destacadas y los cursos disponibles en la plataforma. En esta versión del proyecto, se
dispone de un único curso de interés, pero el diseño se ha creado teniendo en cuenta la
escalabilidad de la plataforma.
Ilustración 69 Prototipo en Figma: Curso

107
Ilustración 70 Prototipo en Figma: Configuración del reto
Ilustración 71 Prototipo en Figma: Lista de estudiantes
Ilustración 72 Prototipo en Figma: Progreso del estudiante

108
En las ilustraciones 69 a 72 se presenta el diseño del curso para el docente. Esta pantalla
consta de dos componentes principales.
El primer componente es estático y se encuentra presente en todas las pantallas

mencionadas. Está ubicado en el lado izquierdo y muestra información relevante del curso,
como el nombre, la fecha de inicio, la fecha de finalización, la cantidad de estudiantes
matriculados, el progreso del curso y el estado actual y dos botones para acceder al segundo
componentes.
El segundo componente es dinámico y muestra los retos disponibles en la plataforma. Desde

este componente, el docente puede acceder a la configuración de cada reto, ver los
estudiantes matriculados en el curso y acceder a la información del progreso de cada
estudiante.
Ilustración 73 Prototipo en Figma: Perfil del docente

109
Ilustración 74 Prototipo en Figma: Editar perfil estudiante
En las ilustraciones 73 y 74 se muestran los prototipos para editar el perfil de los usuarios,
donde se presentan los formularios correspondientes a cada rol. En el caso específico del
estudiante, se incluyen dos gráficas en el lado izquierdo, que permiten al estudiante observar
su progreso dentro de la plataforma en términos de retos completados y logros
desbloqueados.
Ilustración 75 Prototipo en Figma: Ranking
La ilustración 75 muestra la pantalla de ranking, la cual incluye un banner descriptivo y el

top de jugadores según sus puntajes obtenidos. Se han creado tres tarjetas horizontales que
detallan los primeros tres lugares dentro del ranking. Además, se presenta una tabla que
muestra a los jugadores que lograron ingresar al top 10, ocupando las posiciones del cuarto
al décimo lugar.
110
Ilustración 76 Prototipo en Figma: Logros
La ilustración 76 muestra la pantalla de logros, la cual consta de dos elementos principales:

un banner y un conjunto de tarjetas. Estas tarjetas exhiben los logros y presentan una
animación al pasar el cursor sobre cada una de ellas, mostrando información detallada de
cada logro.
Ilustración 77 Prototipo en Figma: Tienda
La ilustración 77 muestra la pantalla de la tienda, la cual consta de dos elementos

principales: el banner y un conjunto de tarjetas que representan cada artículo disponible. En
cada tarjeta, se incluye un botón que permite adquirir el artículo deseado. Al igual que en
la pantalla de logros, se utiliza esta estructura para proporcionar una experiencia intuitiva y
fácil para los usuarios.
111
Ilustración 78 Prototipo en Figma: Artículos adquiridos
La ilustración 78 muestra la pantalla de artículos adquiridos, la cual está compuesta por

tres componentes verticales. De izquierda a derecha, el primer componente presenta una
lista de los artículos que el usuario ha comprado en la tienda.
El componente central, en la parte superior, permite visualizar con más detalle el artículo
seleccionado. Debajo de esta visualización se encuentra la información detallada del
artículo. Más abajo, se encuentran dos botones que permiten al usuario regresar a la pantalla
anterior y eliminar el artículo.
El último componente, ubicado en el lado derecho, permite visualizar el avatar del

estudiante personalizado con los artículos que sean seleccionados.
Ilustración 79 Prototipo en Figma: Mapa del curso

112
La ilustración 79 muestra la pantalla principal del curso, la cual presenta un mapa de la isla
con cofres que representan los retos disponibles. En esta pantalla se han incluido 4 botones:
Tutorial, Misiones, Artículos Adquiridos y Retroceder. Además, se muestra una ficha de
información del usuario que incluye su Nickname, nivel, puntaje y monedas disponibles.
Ilustración 80 Prototipo en Figma: IDE
Ilustración 81 Prototipo en Figma: Pistas

113
Ilustración 82 Prototipo en Figma: Ejecutar reto
Las ilustraciones 80 a 82 muestran los diversos componentes que conforman la pantalla

del prototipo del IDE (Entorno de Desarrollo Integrado) y los botones correspondientes.
La lista de palabras son tarjetas las cuales se deben arrastrar hacia la lista del lado derecho
para crear el algoritmo, los botones presentes en el lado derecho, al ser presionados, abren
ventanas emergentes específicas:
• Tutorial: Proporciona un tutorial que explica cómo utilizar la pantalla y sus

funcionalidades.
• Pistas: Ofrece información relevante sobre el tema relacionado al desafío en
desarrollo.
• Ejecutar: Permite ejecutar y revisar la solución del reto planteado.
Estos componentes y botones contribuyen a la interactividad y facilidad de uso de la

pantalla del IDE.
Los prototipos presentados fueron elaborados utilizando la herramienta Figma. Durante

este proceso, se tuvieron en cuenta los primeros prototipos propuestos en la fase de
prototipado, los cuales se detallan en la sección correspondiente a la aplicación del Design
Thinking (Sección Prototipar).
3. Ingeniería de requisitos y arquitectura de software.

En esta sección se presentan en detalle los requisitos y restricciones de la aplicación, los
cuales han sido obtenidos a través del proceso de elicitación requisitos y la creación de
historias de usuario, tal como se explicó en la sección de Aplicación de SCRUM (Sección
Educción de requisitos, Historias de usuario).
114
a) Atributos y restricciones
Los atributos de calidad de software, también llamados características de calidad, son

criterios empleados para evaluar la calidad de un software. De acuerdo con la norma
ISO/IEC 25010, se establecen los siguientes atributos de calidad: Funcionalidad, Fiabilidad,
Usabilidad, Eficiencia, Mantenibilidad, Portabilidad, Seguridad y Escalabilidad.
En la Tabla 25 se exponen los atributos de calidad para la plataforma Language Conquers.
Tabla 25 Atributos de calidad de software

Atributo de
características Justificación
calidad
La aplicación debe comunicarse de manera
exitosa desde el Backend para exponer los
servicios Rest y logren ser consumidos por
el Frontend, permitiendo unirse en una
Compatibilidad Interoperabilidad
sola aplicación a través de los servicios, se
espera que la aplicación se pueda dividir
en microservicios, de tal forma que cada
etapa sea un servicio.
La aplicación permite a los usuarios tener
control total de los módulos a los cuales
Operabilidad
tienen acceso teniendo en cuenta el tipo de
usuario.
La aplicación es responsive por lo que
Adaptabilidad puede ser utilizada en computadores y
dispositivos móviles.
La aplicación y sus elementos fueron
diseñados para tener un sentido y lograra
Usabilidad Capacidad de
ser intuitivo, por lo que el usuario recuerda
Aprendizaje
fácilmente como interactuar dentro de la
aplicación.
Es fácil de usar, permitiéndole al usuario
Inteligibilidad
navegar fácilmente en la aplicación.
La realización de acciones o tareas que se
deben de ejecutar para lograr completar
Eficacia
una actividad generando pocos o ningún
error.
La aplicación no permite realizar
Seguridad Integridad
modificaciones no autorizadas a datos.
La aplicación permite realizar cambios en
un componente garantizando que dicho
Mantenibilidad Modularidad
cambio tendrá un impacto mínimo en los
demás componentes.
El diseño de Language Conquers resulta
atractivo para el usuario, lo que lo motiva
Deseable
a explorar y consumir el contenido de la
plataforma.
Experiencia de
La aplicación tiene como objetivo
usuario
principal apoyar el proceso de aprendizaje
Útil de los estudiantes, proporcionando una
experiencia interactiva y didáctica que
mejore el entendimiento de los temas
115
vistos en el curso de fundamentos de

programación. Además, se espera que
contribuya a disminuir los niveles de
deserción de los programas de ingeniería
de sistemas, multimedia y electrónica de la
Universidad San Buenaventura, al
proporcionar mecanismos que ayuden a
mejorar el nivel de las habilidades de
programación en los estudiantes.
b) Diseño de la arquitectura
¿Qué es la arquitectura por capas?
La arquitectura por capas es un patrón de arquitectura que se utiliza ampliamente en el

desarrollo de software. Se caracteriza por su simplicidad y su enfoque en la distribución
jerárquica de roles y responsabilidades para separar las distintas cargas y funciones dentro de
un sistema. Este enfoque modular facilita el mantenimiento, la escalabilidad y la reutilización
de componentes.
Este patrón de arquitectura este compuesto principalmente por tres capas, las cuales son:
• Capa de presentación: Esta capa es la encargada de presentar visualmente el sistema al

usuario. Su principal responsabilidad es presentar los datos y la funcionalidad del
sistema de una manera comprensible y atractiva. Aquí se encuentran los componentes
relacionados con la interfaz de usuario, como la interfaz gráfica, los formularios, los
botones y otros elementos visuales.
• Capa de negocio: En esta capa se crea las reglas de negocio o en otras palabras donde
se encuentra la funcionalidad de la aplicación, se encuentran cálculos que se deben de
realizar teniendo en cuenta la información que proporciona el usuario, datos
almacenados y datos validados. Tiene un control sobre la ejecución de la capa de datos
y de servicios externos.
• Capa de datos: Esta capa se encarga del almacenamiento y acceso a los datos del
sistema. Está compuesta por uno o varios gestores de bases de datos que permiten
almacenar y recuperar información de manera eficiente. La capa de datos se encarga de
la persistencia de los datos, su manipulación y su integridad. Proporciona a la capa de
negocio los mecanismos necesarios para acceder a la información almacenada y
actualizarla según las necesidades del sistema.
Cada capa en la arquitectura tiene una responsabilidad claramente definida y se comunica con
las capas adyacentes a través de interfaces bien definidas. Esto permite que cada capa funcione
de manera independiente y se pueda modificar o reemplazar sin afectar las demás capas.
Además, esta arquitectura promueve la reutilización de componentes y facilita la evolución y
mantenimiento del sistema a largo plazo.
116
Ilustración 83 Arquitectura de Capas
En la ilustración 83 se hace referencia a la arquitectura por capas de un sistema de

software. Los beneficios que tiene la implementación de esta arquitectura son:
• Permite la abstracción y el encapsulamiento, logrando que la capa de negocio quede

bien definida, con lo cual se obtiene una alta cohesión y un bajo acoplamiento.
• Al separar el sistema por capas reduce el riesgo de cambios de tecnologías, aumentando
la escalabilidad y la tolerancia a fallos.
• Permite testear fácilmente cada capa por separado.
• Cuando se implementa de manera correcta la responsabilidad de cada capa, permite
realizar cambios con facilidad impactando solo la capa en la cual se está realizando el
cambio y no en las otras.
117
Ilustración 84 Arquitectura del Sistema Language Conquers
La ilustración 84 hace referencia a la arquitectura por capas, la cual fue elegida para el
proyecto, en donde se muestra las diferentes responsabilidades que tiene cada capa y la
interacción entre ellas.
Objetivos de la arquitectura
• La aplicación Language Conquers sigue el modelo arquitectónico de capas en su

desarrollo, manteniendo la arquitectura propuesta en la primera versión.
• Para lograr la escalabilidad de Language Conquers, es fundamental que el sistema se
diseñe de manera modular. Una arquitectura por capas se presenta como una solución
ideal, ya que ofrece una serie de ventajas que permiten estructurar el sistema de manera
eficiente y escalable.
118
• Permite ocultar información entre capas, no requiere que una capa conozca la
implementación de la capa sobre la cual se construyó, necesitando solo conocer la
interfaz que ofrece.
• Permite que las capas puedan crearse y depurando de manera separada.
Diseño de diagramas del sistema basado en el modelo C4
El modelo C4 como su nombre lo indica hace referencia a 4 diagramas que permiten a

medida que se va aumentando de nivel (4 niveles) realizar una vista más detallada al
sistema que se desea representar, este modelo está compuesto por diagramas de contexto,
contenedores, componentes y clases o código.
Se implemento el modelo C4 para el diseño arquitectónico de la plataforma Language

Conquers, a través del cual se describe los niveles de detalle por medio de una notación
especifica. Este modelo facilita a los equipos de desarrollo a describir y comunicar la
arquitectura del software, este modelo se diseñó teniendo en cuenta la necesidad que surgió
al momento de diagramar de forma rápida y ágil teniendo en cuenta el surgimiento de las
nuevas metodologías agiles, por lo tanto, el modelo C4 hace referencia a un conjunto de
diagramas sencillos de entender para los clientes, stakeholders o desarrolladores y los
cuales se pueden modificar de manera mucho más fácil y ágil.
Ilustración 85 Modelo C4 [59]
La ilustración 85 muestra los elementos que conforman el modelo C4 orientado al sistema

Language Conquers.
Diagrama de contexto (Nivel 1)
Este diagrama permite definir el sistema en general que se va a desarrollar y se establece

las relaciones entre entidades, en este caso entre los dos tipos de usuario y la aplicación.
En la figura 3.4 se visualiza el diagrama de contexto de la plataforma Language Conquers
con los usuarios.
119
Ilustración 86 Diagrama de Contexto del Sistema
En la ilustración 86 se expone el diagrama de contexto en el cual permite explicar los dos

módulos que conforman el sistema, los cuales son de docente y estudiante, comunicándose
por medio del protocolo HTTP.
Diagrama de contenedores (Nivel 2)
Permite tener una vista de alto nivel de la arquitectura, la distribución de contenedores o

responsabilidades y las principales decisiones tecnológicas y la comunicación entre ellas.
120
Ilustración 87 Diagrama de Contenedor del Sistema
En la ilustración 87 se evidencia el diagrama de contenedores del sistema, el cual muestra

los tres contenedores principales que componen: la base de datos, el componente del
Backend y del Frontend, donde el usuario final interactúa.
Diagrama de componentes (Nivel 3)
Permite visualizar como interactúan los usuarios del sistema con un conjunto de
componentes y estos como interactúan con otros, en este diagrama se puede visualizar
también las responsabilidades y detalles con respecto a la tecnología que se utiliza en la
implementación.
121
Ilustración 88 Diagrama de Componentes
En la ilustración 88 se expone el diagrama de componentes planteado para el sistema

Language Conquers.
Diagrama Entidad Relación (Nivel 4)
El diagrama Entidad-Relación permite visualizar las entidades que se relacionan entre si

dentro del sistema.
122
Ilustración 89 Modelo Entidad-Relación
En la ilustración 89 se muestra el modelo entidad-relación del sistema, el cual está

compuesto por múltiples tablas, cada una diseñada para almacenar información específica
relacionada con el proyecto. Las tablas presentes son Artículo, Artículos adquiridos,
Avatar, Bitácora, Categoría, Credenciales, Curso, Curso estudiante, Estado, Estudiante,
Género, Grupo, Logro, Logro estudiante, Misión, Misión estudiante, Palabra reservada,
Palabra reto, Profesor, Reto, Reto estudiante, Rol y Semestre.
El conjunto de datos denominado Bitácora se ha diseñado por escalabilidad, pensada para

ser utilizada en próximas versiones, la cual permite registrar el acceso de los usuarios a la
plataforma. Por otro lado, la tabla Credenciales se ha creado para almacenar información
sobre las cuentas vinculadas de las herramientas y tecnologías utilizadas en el proyecto.
Aunque las tablas Misión estudiante, Grupo y Rol han sido diseñadas teniendo en cuenta
la escalabilidad del proyecto, en esta versión no se utilizan. Sin embargo, las tablas Rol y
Grupo se diseñaron considerando la posibilidad de resolver retos de manera grupal en un
futuro y cada miembro tenga un rol asignado para lograr resolver el reto.
El sistema presenta relaciones complejas. Por ejemplo, un estudiante puede estar

matriculado en muchos cursos, un curso es dirigido por un único profesor, pero un profesor
123
puede tener varios cursos a cargo. Cada curso se compone de retos que pertenecen a una
misión y un estudiante puede realizar varios retos del mismo curso y cada reto puede ser
realizado más de una vez por un estudiante.
Diagramas suplementarios
Los diagramas complementarios permiten complementar los diagramas C4 para visualizar

otros elementos o procesos determinados.
• Diagramas dinámicos
Permiten visualizar los elementos de un modelo estático de forma libre en un proceso

determinado, teniendo en cuenta el orden de las iteraciones.
Resolver Reto
Ilustración 90 Diagrama Dinámico Resolver Reto
En la Ilustración 90 se describe el proceso de calificación de un reto, el cual se realiza al

verificar la validez del código que el estudiante envía dentro del IDE. Después de que el
estudiante envía su respuesta, el sistema valida si esta cumple con las condiciones
necesarias para completar el reto. Si es así, el sistema envía un mensaje de éxito al
estudiante y asigna el puntaje y las monedas correspondientes al reto.
124
Ranking
En este diagrama se visualiza el proceso de los componentes que permiten al docente y
estudiante visualizar el ranking de los estudiantes dentro del curso.
Ilustración 91 Diagrama Dinámico Ranking
En la Ilustración 91 se muestra el diagrama dinámico utilizado para obtener el ranking de

los estudiantes con mayor puntaje. Este diagrama ilustra cómo el sistema recopila la
información directamente de la base de datos, consulta la lista de estudiantes matriculados
en el curso, y luego valida y selecciona a los diez estudiantes con mayor puntaje para
mostrarlos en el ranking.
125
Comprar Recursos
En este diagrama se visualiza el proceso de los componentes de la tienda y el estudiante

para canjear las monedas por recursos disponibles.
Ilustración 92 Diagrama Dinámico Comprar Recursos
En la ilustración 92 se explica el proceso que se realiza para la compra de un artículo. En

él, se detalla cómo se envía la información del artículo que se desea adquirir. Además, se
valida si el estudiante cuenta con suficientes monedas para realizar la compra y
posteriormente, se registra el artículo como adquirido en la cuenta del estudiante.
Obtener logros
En el diagrama se visualiza el proceso de los componentes para la obtención de logros

durante el desarrollo de los retos dentro del curso.
126
Ilustración 93 Diagrama Dinámico Obtener Logro
La ilustración 93 se describe el proceso que sigue el sistema cuando un estudiante resuelve

un reto y envía la información correspondiente. Durante este proceso, el sistema valida si
el estudiante ha logrado superar el reto, busca en los retos disponibles para verificar si se
ha completado alguno, y valida que el logro no haya sido obtenido previamente por el
estudiante. Si cumple con estas condiciones, el sistema asigna el logro al estudiante.
Justificación del diseño
El diseño de Language Conquers se basa en el principio de bajo acoplamiento y alta

cohesión entre los métodos que lo componen, permitiendo realizar modificaciones sin
alterar o perjudicar el funcionamiento de otros métodos al actualizar o agregar nuevas
127
funcionalidades en próximas versiones de la aplicación, es por esta razón que se utilizó la

arquitectura por capas la cual nos proporciona las características mencionadas. La
implementación del patrón de inyección de dependencias permitió utilizar los servicios
requeridos sin tener la necesidad de crear instancias de toda la clase y lograr acceder
solamente a lo necesario, la utilización del patrón Repository se utilizó para aislar la lógica
de los datos y garantizar la escalabilidad del proyecto.
El Frontend de Language Conquers se diseñó teniendo en cuenta la experiencia del usuario,

el sistema debe ser eficiente y usable, el diseño debe garantizar que el usuario sienta el
deseo de explorar la plataforma y encuentre la información precisa y organizada.
4. Selección de tecnologías para el Backend y Frontend

a) Tecnologías de desarrollo para el Backend y Frontend
Para la elección de herramientas de desarrollo, se realizó una investigación de las

tecnologías y comparación para definir si se debía cambiar las tecnologías que se estaban
utilizando en la versión anterior de la herramienta. El resultado de esta investigación se
muestra en el cuadro comparativo.
Tabla 26 Comparativa de tecnologías Backend
Tecnología Backend Descripción
Framework de desarrollo de aplicaciones Java para Backend

robusto y escalable. Ofrece soporte para la creación de APIs
RESTful y tiene una amplia comunidad de desarrollo.
Plataforma de desarrollo de Microsoft para crear aplicaciones web

y servicios en múltiples lenguajes (C#, F#, VB.NET). Proporciona
un rendimiento rápido, seguridad y una integración estrecha con el
ecosistema de Microsoft.
Framework de desarrollo web de alto nivel basado en Python.
Django ofrece una arquitectura MVC, una administración de base
de datos robusta y una gran cantidad de complementos y
bibliotecas.
Entorno de ejecución de JavaScript basado en el motor V8 de
Google. Node.js permite la construcción de servidores web
escalables y rápidos utilizando JavaScript tanto en el Backend
como en el Frontend.
Tabla 27 Comparativa Tecnologías Frontend
Tecnología
Descripción
Frontend
Framework de JavaScript basado en TypeScript para construir

aplicaciones web de una sola página (SPA). Angular ofrece una
estructura modular, enlace de datos bidireccional y manejo de
eventos eficiente.
128
Biblioteca de JavaScript de código abierto para construir interfaces

de usuario interactivas y reutilizables. React utiliza un enfoque
basado en componentes y permite la creación de aplicaciones
rápidas y eficientes.
Framework de JavaScript progresivo para la construcción de
interfaces de usuario interactivas. Vue.js se enfoca en la
simplicidad y la flexibilidad, y permite la integración gradual en
proyectos existentes.
Framework de JavaScript para la creación de aplicaciones web.

Ember.js ofrece una arquitectura sólida, un manejo eficiente de
datos y un enfoque en la convención sobre la configuración.
Considerando las capacidades y conocimientos de los desarrolladores, se determinó que las

tecnologías más adecuadas para el proyecto son Java con Spring Boot para el desarrollo
del Backend y Angular para el Frontend.
Se realizo una justificación más detallada de la razón por la cual se continuo con el uso de
Java Spring Boot y angular.
• Compatibilidad de lenguajes: Java y TypeScript (el lenguaje utilizado en

Angular) son lenguajes compatibles, lo que permite una integración fluida entre el
Backend y el Frontend. Esto facilita la comunicación entre los dos componentes y
reduce la posibilidad de errores y problemas de interoperabilidad.
• Ecosistema robusto: Tanto Java Spring Boot como Angular tienen ecosistemas
sólidos y activos. Hay una amplia gama de bibliotecas, herramientas y recursos
disponibles para ayudar en el desarrollo de ambas tecnologías.
• Escalabilidad y rendimiento: Java Spring Boot es conocido por su capacidad para

manejar aplicaciones de Backend escalables y de alto rendimiento. Proporciona
características como el manejo de concurrencia, la gestión eficiente de recursos y
el modularidad, lo que lo hace adecuado para manejar un gran número de
solicitudes en una herramienta gamificada. Por otro lado, Angular, al utilizar un
enfoque de renderizado del lado del cliente, proporciona una experiencia de usuario
fluida y rápida.
• Separación de responsabilidades: El uso de Java Spring Boot para el Backend y

Angular para el Frontend permite una clara separación de responsabilidades en el
desarrollo de la herramienta. Spring Boot se centra en la lógica de negocio, la
gestión de la base de datos y la exposición de API, mientras que Angular se encarga
de la presentación de datos y la interacción del usuario. Esta separación facilita el
mantenimiento del código y la colaboración entre los equipos de desarrollo.
129
• Facilidad de implementación y despliegue: Java Spring Boot y Angular son

tecnologías ampliamente utilizadas y bien documentadas. Además, ambos
proporcionan opciones flexibles de despliegue, ya sea en servidores locales o en la
nube.
b) Herramientas de desarrollo utilizadas y restricciones técnicas
En esta sección se detallan las tecnologías utilizadas en todas las etapas del desarrollo del
proyecto, así como su aplicación para asegurar el cumplimiento de los atributos de calidad
mencionados en la sección de Atributos y restricciones. En la Tabla 28 se muestran las
diferentes herramientas y tecnologías utilizadas para la elaboración del proyecto.
Tabla 28 Tecnologías utilizadas
Herramientas / tecnologías Uso
Se utilizó Office 365 para la edición de documentos y la

colaboración en tiempo real.
OneDrive fue utilizado como solución de colaboración para

permitir a varios usuarios trabajar en documentos y archivos en
tiempo real, y para compartirlos con otros usuarios.
Se utilizó diagrams.net como herramienta de diagramación para

crear diagramas, gráficos y otros tipos de visualizaciones de
manera sencilla y eficiente.
Se aplicó Git como herramienta para administrar el código

localmente y facilitar la colaboración con otros desarrolladores.
Se utilizó GitHub para gestionar el código y colaborar con otros

desarrolladores en línea.
Se empleó PostgreSQL como motor de base de datos para

almacenar y gestionar los datos de la aplicación.
DBeaver se utilizó para ejecutar consultas SQL, navegar por los

datos y administrar los esquemas de bases de datos de manera
fácil y visual.
Se empleó Swagger para generar una interfaz de usuario

interactiva para probar y consumir servicios web.
130
Se utilizó Heroku como plataforma de alojamiento en la nube

para desplegar y ejecutar el Backend.
Se utilizó Firebase Authentication como servicio de

autenticación para permitir que los usuarios inicien sesión en la
aplicación utilizando diferentes proveedores de autenticación
(correo electrónico, Google y Facebook).
Se utilizó Firebase Cloud Storage como servicio de

almacenamiento en la nube para alojar y gestionar archivos
multimedia, como imágenes, videos y documentos, de manera
segura y escalable.
IntelliJ IDEA fue utilizado para simplificar el desarrollo de

software, proporcionando herramientas integradas para la
codificación, el depurado y el refactorizado de código.
La aplicación utilizó Java 11 para garantizar la compatibilidad y

la interoperabilidad con otras aplicaciones y servicios basados
en Java, mejorando la integración con la infraestructura
tecnológica existente.
Spring Boot fue utilizado para simplificar el desarrollo de

aplicaciones web, proporcionando herramientas integradas para
la configuración automática, la gestión de dependencias y la
ejecución de la aplicación.
Se utilizó JUnit 5 como framework de pruebas unitarias para

desarrollar y ejecutar pruebas automatizadas en Java, mejorando
la calidad y la fiabilidad del código.
JaCoCo fue utilizado para generar informes de cobertura de

código en el proyecto Java, proporcionando información
detallada sobre la cantidad de código que estaba siendo
ejecutado y probado.
Se utilizó Visual Studio Code como editor de código fuente para

desarrollar aplicaciones en diferentes lenguajes de
programación, como JavaScript y TypeScript y el uso del
framework Angular.
Se utilizó Node.js para desarrollar aplicaciones en el lado del

servidor utilizando JavaScript.
131
Angular fue utilizado para aprovechar su estructura modular y

componentes reutilizables, lo que permitió construir
aplicaciones más fácilmente y con un mayor grado de
mantenibilidad.
Se empleó TypeScript para integrar el desarrollo de software con

otras herramientas y servicios, como Angular, mejorando la
eficiencia del equipo de desarrollo.
Se empleó Firebase Hosting para integrar el alojamiento de la

aplicación con otros servicios de Firebase, como Firebase
Authentication, Cloud Storage, mejorando la eficiencia del
equipo de desarrollo y reduciendo la complejidad de la
infraestructura.
Se relacionan los atributos de calidad con las tecnologías implementadas, definiendo cual
es el aporte al producto desarrollado.
• Para la gestión y organización del proyecto de manera ágil se crearon dos

repositorios de Git para el Backend y el Frontend y en cada uno de estos se crearon
ramas para cada desarrollador.
• Se seleccionó SpringBoot como Backend, debido a que permite enfocarse en la
implementación de código y no en la configuración de archivos, creando el proyecto
de manera más rápida.
• Se utilizó una arquitectura por capas con una estructura modular para garantizar que
las modificaciones que se realicen sobre algún modulo en específico tengan un
mínimo impacto sobre los demás componentes o módulos.
• El Backend se alojó en heroku con el fin de garantizar que la aplicación se encuentre
disponible en cualquier momento.
• La aplicación tiene una comunicación estable entre el Backend exponiendo los
servicios Rest y el consumo que realiza el Frontend, por lo tanto, cumple la
interoperabilidad entre SpringBoot con el servicio Rest y Angular al consumirlo.
• Se seleccionó Angular como tecnología utilizada para el Frontend, teniendo en
cuenta que el framework permite manejar más fácil el diseño y módulos de la
aplicación, por otro lado, permite dividir los componentes para lograr obtener una
mejor navegación y la reutilización de componentes.
• Se especificaron los roles de estudiante y docente, a los cuales se les asigno
diferentes permisos para visualizar los módulos pertinentes para cada uno.
• Los usuarios tienen acceso total a los módulos especificados para cada rol.
• La aplicación se diseñó responsive por lo que es adaptable a distintos tipos de
dispositivos como lo son computadores, dispositivos móviles y tables.
• Se utilizó Firebase Storage para el manejo y almacenamiento de imágenes en el
sistema.
132
• Se tuvo en cuenta el diseño de los elementos que componen la aplicación de tal

forma que les permitiera a los usuarios interactuar dentro de la plataforma, fuera
intuitiva y fácil de navegar en ella.
• Se utilizó elementos de gamificación que permitirán generar al usuario un entorno
grafico e interfaces sean amigables y generen una sensación positiva en lo usuarios.
• Se utilizaron las herramientas de diagramas.net para la creación de los diagramas
pertinentes y SQLDBM para la realización del MER.
Restricciones técnicas
• El Backend requiere del JDK 11.0.2 o superior para que no se generen errores de
compatibilidad cuando se desee realizar una modificación.
• El Frontend utiliza Angular 14.1.3, el compilador 14.1.3, Angular Material 14.1.3
para modificar o crear componentes.
• Node.js requiere la versión 12.14.0 o posterior para gestionar las dependencias de
Angular.
En este punto, concluye la fase de planeación, la cual se ha documentado en la Tabla 29

que resume las actividades realizadas durante esta etapa. En dicha tabla se incluyen detalles
sobre el proceso llevado a cabo, los objetivos establecidos, las descripciones
correspondientes y los artefactos generados como resultado. Estos artefactos
proporcionarán el sustento necesario para iniciar las iteraciones posteriores, tal como se
propone en la sección de la metodología SCRUM.
Tabla 29 Actividades de planeación

Actividades de la planeación
Actividad Objetivo Descripción Artefactos de salida
Establecer los
objetivos del
Validar la proyecto,
viabilidad del identificar los − Matriz de Riesgos,
Planificación
proyecto y stakeholders, Mitigación y Plan
del proyecto
establecer los definir el alcance de Acción
objetivos y aplicar la
gestión de la triple
restricción.
Definir la
información
necesaria para la
Recolectar y
formulación
Educción de determinar la − Listado de requisitos
inicial del
requisitos información obtenida iniciales.
proyecto, la
del sistema. durante la técnica de
definición de las
educción de requisitos.
historias de
usuario y el
alcance.
Creación de Convertir los
Generar las historias − Historias de
las historias requisitos en historias
de usuario teniendo en usuario.
de usuario. de usuario,
133
cuenta los requisitos estableciendo la

obtenidos. funcionalidad, el
usuario y los criterios
de aceptación.
Determinar el nivel
Generar las de importancia e
creación del priorización y impacto de cada − Historias de
Product conformación del historia de usuario, usuario
Backlog. Product Backlog de las teniendo en cuenta la priorizadas.
historias de usuario. funcionalidad y la
prioridad.
Diagramas de la
arquitectura:
Diagrama de contexto
Realizar el diseño − Diagrama de
del sistema a contenedores
través de los − Diagrama de
Diseño de la diagramas de Componentes
arquitectura del contexto, − Modelo entidad-
sistema y Diseño de la contenedores, relación
modelado del arquitectura componentes, Diagramas dinámicos de
sistema a través modelo relacional los procesos de:
del modelo C4. y diagramas de los − Calificar reto
procesos − Ranking
importantes − Comprar
utilizando C4. recursos
− Obtener
logros
Realizar un
análisis de las
Seleccionar las
Selección de las tecnologías que
tecnologías para el − Informe de selección
tecnologías a podrían ser
desarrollo del de tecnologías.
utilizar utilizadas en el
sistema.
proyecto y definir
las seleccionadas.
Realizar
prototipos básicos
Crear prototipos
de la aplicación
Creación de para la primera − Prototipos de
que permitan
prototipos versión de las pantalla.
evaluar la
interfaces gráficas.
viabilidad del
diseño.
5. Desarrollo de la plataforma y pruebas automatizadas

En esta sección, se proporciona una explicación detallada del proceso de desarrollo de las
funcionalidades más importantes de la aplicación, abordando tanto el Backend como el
Frontend. Se presentará el código y la construcción paso a paso de ambas partes, ofreciendo
una visión completa del desarrollo de la aplicación.
134
a) Proceso de desarrollo de los retos
Durante la etapa de formulación y diseño de los retos presentes en la plataforma, se contó

con la dirección del director Víctor Manuel Peñeñory. Se llevo a cabo una lluvia de ideas
en la que seleccionaron las actividades principales que representarían cada reto. Una vez
definidas, se estableció el tema de algoritmos para los retos propuestos y se determinó la
solución correspondiente a cada uno.
Para aumentar la motivación e interés de los estudiantes por completar los retos, se tuvo en
cuenta la evolución futura de la isla al diseñar los desafíos. Además, se aplicaron los tipos
de jugadores que Richard Bartle establece, centrándose en los roles de triunfador y
explorador.
En particular, se diseñaron los retos para que los estudiantes tuvieran como objetivo
completarlos y desbloquear los logros propuestos, al mismo tiempo que exploran la isla. De
esta manera, se buscó generar un ambiente motivador que permita a los estudiantes obtener
monedas y mejorar su puntaje, a medida que avanzan en la historia.
Ilustración 94 Planteamiento de los retos
En la ilustración 94 se muestra como fueron definidos los pasos del algoritmo de los retos
durante la etapa de creación.
135
b) Proceso de creación del componente visual
Para diseñar el funcionamiento del IDE utilizado para que los usuarios den solución al reto,
se tomó como base la aplicación Scratch en la sección de Antecedentes. Esta aplicación
utiliza un lenguaje de programación visual que permite crear historias, animaciones y
juegos mediante el uso de bloques. A través de una interfaz intuitiva, los usuarios arrastran
fichas de una lista a un tablero y las organizan para formar sentencias que luego se
visualizan como animaciones.
Ilustración 95 Ejemplo de instrucción en Scratch
En la ilustración 95, se muestra un ejemplo de cómo se utiliza una lista de instrucciones.

El usuario puede seleccionar una ficha de la lista y arrastrarla hacia la columna central para
construir una sentencia. Posteriormente, esta sentencia se visualiza como una animación
en el extremo derecho.
Teniendo como referencia la herramienta de Scratch se propone crear un primer prototipo

de IDE en el funcionamiento interno que tiene para que el usuario pueda proponer
soluciones a los retos propuestos y desde la parte visual se plantea el prototipo con el
objetivo de familiarizar al estudiante con el concepto de IDE. El prototipo incluye una
136
funcionalidad de "Arrastrar y soltar" (Drag and Drop) que permite al estudiante diseñar la
solución del reto de manera visual. Cada línea que se agrega mediante esta funcionalidad
representa una línea de código en la solución.
Se diseño un diagrama de procesos en el que se explica como el usuario debe de interactuar

con el sistema para dar solución al reto.
Ilustración 96 Diagrama de procesos para la solución de un reto
La ilustración 96 presenta el diagrama de procesos que explica el flujo para solucionar un

reto en el IDE. Este diagrama involucra dos actores principales: el usuario y el sistema. El
proceso comienza cuando el usuario selecciona un reto en el mapa del curso. En ese
momento, el sistema redirige al usuario a la pantalla del IDE, donde se muestra la descripción
del reto y las instrucciones para crear el algoritmo que resolverá el desafío.
Una vez que el usuario ha creado su algoritmo, puede presionar el botón "Ejecutar". En este
punto, el sistema evalúa la respuesta proporcionada por el usuario. Si la respuesta es correcta,
el sistema muestra un mensaje de éxito y otorga al usuario monedas y puntaje, lo que le
permite avanzar al siguiente reto.
En caso de que la respuesta sea incorrecta, el sistema muestra un mensaje de error que incluye
retroalimentación relevante. Esto ayuda al usuario a revisar y corregir su código para que
pueda volver a ser evaluado.
c) Desarrollo
Para contextualizar la explicación del desarrollo, se presentará la estructura del código

implementado, lo que permitirá comprender la organización del proyecto. Se mostrará una
imagen que ilustra la arquitectura y la disposición de los archivos generados para el
Backend y Frontend. Esta visión general sentará las bases para abordar de manera más
137
detallada el proceso de desarrollo de algunas funcionalidades, que se explicarán

posteriormente.
Ilustración 97 Estructura del Backend
La ilustración 97 muestra la estructura del Backend, basada en una arquitectura por capas
que se compone de las siguientes:
• DAO (Data Access Object): Se utiliza para separar el acceso a los datos de la capa
lógica del proyecto.
• Modelo: Es la responsable de representar y manejar los datos.
• DTO (Data Transfer Object): Se utiliza para transferir objetos entre diferentes
componentes del sistema.
• Mapper: El Mapper se utiliza para facilitar la transferencia eficiente de datos entre
diferentes formatos. En el contexto específico de la arquitectura por capas, se utiliza
para convertir los datos del modelo original al formato de los DTOs y viceversa.
Esta conversión bidireccional de datos nos permite intercambiar información de
manera efectiva entre capas del sistema.
• Service: Tiene la función de coordinar y gestionar la lógica empresarial y las reglas
de negocio de una aplicación. Esta capa actúa como un intermediario entre la capa
de presentación y la capa de acceso a datos.
138
• ServiceImplementation: En una arquitectura por capas, la capa de servicio define

una interfaz o contrato que especifica las operaciones que puede realizar un servicio
determinado. La implementación del servicio es responsable de proporcionar la
implementación concreta de esas operaciones.
• Controller: En una arquitectura por capas, el controlador (Controller) es una capa
que se sitúa entre la capa de presentación (interfaz de usuario) y la capa de servicio.
Su principal responsabilidad es recibir las solicitudes del usuario, interpretarlas y
coordinar las acciones necesarias para cumplir con esas solicitudes.
Ilustración 98 Estructura del Frontend
La ilustración 98 representa la estructura del Frontend, mostrando los componentes que

se utilizarán en los diferentes módulos. Se pueden observar los componentes específicos
139
del módulo de administración, así como los componentes relacionados con los módulos de
estudiante, profesor y curso.
Una vez presentada la estructura de los proyectos, se procede a explicar el proceso de las
siguientes funcionalidades, las cuales son consideradas las más relevantes en el contexto
de este proyecto.
Creación de un reto
Para la creación de un reto, se ha desarrollado un servicio que almacena la información en

un objeto de tipo "Reto". Este servicio solicita cierta información requerida, la cual se válida
para garantizar que cumpla con los requisitos del sistema. De esta manera, se asegura que
la información ingresada sea coherente y cumpla con las necesidades establecidas.
Ilustración 99 Creación reto
En la ilustración 99 se muestra el servicio responsable de la creación del reto. En este

servicio, se puede observar cómo se realiza el consumo de un servicio llamado
"ValidacionesCrear". Este servicio tiene la función de garantizar la integridad de los datos
ingresados, realizando las validaciones necesarias. Una vez que los datos han sido
validados, se procede a almacenar la información en una base de datos utilizando el objeto
DAO.
140
Ilustración 100 Código validaciones crear reto
La ilustración 100 representa el servicio de validación de creación de retos. En este

servicio se llevan a cabo diversas validaciones para garantizar la integridad de los datos.
Algunas de las validaciones realizadas pueden incluir la verificación de campos
obligatorios, la comprobación de formatos correctos (por ejemplo, formato de fecha o
longitud de texto), y la validación de reglas de negocio específicas.
En caso de que alguna validación no se cumpla, el servicio de validación de creación de

retos proporciona respuestas adecuadas. Estas respuestas pueden incluir mensajes de error
específicos indicando qué validación ha fallado y por qué motivo.
Calificación del reto
Para la calificación de los retos completados se han desarrollado dos servicios distintos. El
primero de ellos se encarga de validar si el reto ha sido completado correctamente. Este
servicio verifica los criterios o condiciones establecidos para considerar un reto como
141
completado exitosamente. En caso de que se cumplan todas las condiciones, se marca el

reto como completado correctamente.
El segundo servicio se encarga de actualizar la información del usuario y el estado

relacionado con el reto. Este servicio actualiza los datos del usuario, como su puntuación,
logros o nivel, para reflejar la finalización exitosa del reto. Además, también actualiza el
estado del reto en sí mismo, marcándolo como completado en los registros
correspondientes.
La separación de estos dos servicios permite una gestión más modular y flexible. La
validación del reto completado se realiza de manera independiente, mientras que la
actualización de la información del usuario y el estado del reto se realiza por separado,
evitando la duplicación de código y permitiendo un mejor mantenimiento y escalabilidad
del sistema.
Ilustración 101 Código actualización usuario flujo negativo

142
La ilustración 101 muestra el código correspondiente a la actualización del estado del reto
del usuario cuando la respuesta del reto es incorrecta. En este código, se realizan una serie
de validaciones y acciones específicas. A continuación, se detalla el proceso:
• Se valida si la respuesta del reto es incorrecta.

• En caso de que la respuesta sea incorrecta, se procede a incrementar el contador de
intentos utilizados por el estudiante.
• Se realiza una validación para asegurarse de que el número de intentos utilizados
no supere el límite máximo establecido para el reto.
• En caso de que se haya excedido el límite de intentos, se genera una respuesta que
indica el error específico relacionado con la respuesta del estudiante, incluyendo la
línea de código y el detalle exacto del error.
Este código ilustra cómo se maneja el caso de una respuesta incorrecta en el contexto del
reto. Las validaciones y acciones específicas implementadas garantizan que se realice un
seguimiento adecuado de los intentos del estudiante y se proporcione una respuesta
detallada en caso de error.
Ilustración 102 Código actualización de usuario flujo positivo
La ilustración 102 representa el código de actualización del estado del reto del estudiante
cuando la respuesta al reto es correcta. En este código, se realizan una serie de acciones
específicas. A continuación, se describe el proceso:
• Se asigna un puntaje al estudiante en función de la cantidad de intentos que le tomó

completar el reto. Cuanto menor sea la cantidad de intentos, mayor será el puntaje
obtenido.
• Se asignan monedas al estudiante en función de la cantidad de intentos realizados para

completar el reto. Por ejemplo, se podría otorgar una cierta cantidad de monedas por
cada intento realizado.
143
• Se modifica el estado del reto a "completado" para indicar que el estudiante ha resuelto
exitosamente el reto.
• Se genera una respuesta que confirma el completado del reto. Este mensaje de respuesta
puede indicar al estudiante que ha completado el reto satisfactoriamente y proporcionar
cualquier información adicional relevante.
Este código ilustra cómo se actualiza el estado del reto del estudiante cuando la respuesta
es correcta. Se asigna un puntaje y monedas en función de los intentos realizados, se marca
el reto como completado y se genera un mensaje de respuesta para informar al estudiante
sobre su éxito en la finalización del reto.
Ilustración 103 Código validación reto
La ilustración 103 muestra el código que procesa las respuestas de los estudiantes y las
acciones necesarias para validar una respuesta. A continuación, se describen las acciones
realizadas en este código:
• Se recibe la respuesta del estudiante y se procesa para dividirla en segmentos, según un

orden especificado. Esto permite separar la respuesta en partes más manejables y facilitar
su procesamiento posterior.
• Se procesa cada segmento de respuesta por separado. Cada segmento se evalúa y se

genera una respuesta correspondiente, que se guarda en una variable de tipo mapa. Esta
144
variable mapa puede ser utilizada por otros segmentos o partes del código para acceder a
respuestas previas o utilizarlas en cálculos posteriores.
• Por último, se genera una respuesta final basada en el procesamiento de los segmentos
de respuesta. Dependiendo de si la respuesta no generó errores de sintaxis u otros
problemas, se generará una respuesta adecuada. Esta respuesta final puede indicar si la
respuesta fue correcta, incorrecta o proporcionar información adicional según sea
necesario.
En resumen, el código ilustrado en la ilustración 102 procesa las respuestas de los

estudiantes dividiéndolas en segmentos, procesa cada segmento por separado y genera una
respuesta final en función de la validez de la respuesta y otros factores relevantes.
Obtención de logros
Para la obtención de los logros, se ha desarrollado un servicio que asigna logros a los
estudiantes que cumplen con una serie de parámetros predefinidos. En el lado del Backend,
se realizan las validaciones necesarias para determinar si un estudiante cumple con los
requisitos establecidos para cada logro.
Por otro lado, en el lado del Frontend, se realiza un consumo del servicio de obtención de
logros. Este consumo genera una solicitud al servicio del Backend, que evalúa los
parámetros y realiza las validaciones correspondientes. Una vez verificado que el estudiante
cumple con los criterios para un logro determinado, se genera una respuesta que incluye el
logro obtenido.
En resumen, el servicio de obtención de logros del Backend se encarga de validar y asignar

los logros a los estudiantes según los parámetros establecidos. Luego, el Frontend realiza
una solicitud para obtener los logros mediante un consumo del servicio, y como resultado,
se obtiene una respuesta que indica los logros obtenidos por el estudiante.
Ilustración 104 Código de asignación de logros
En la ilustración 104 se presenta el código de asignación de logro a un estudiante. En este

código, se realiza una validación para verificar si el estudiante cumple con los parámetros
necesarios para obtener un logro específico. Posteriormente, se asigna dicho logro al
estudiante. A continuación, se explica el proceso en más detalle:
145
• Se realiza una validación para comprobar si el estudiante cumple con los parámetros
requeridos para obtener un logro. Estos parámetros pueden incluir condiciones como el
nivel alcanzado, la cantidad de tareas completadas, el tiempo dedicado, entre otros
criterios específicos establecidos para el logro en cuestión.
• En caso de que el estudiante cumpla con los parámetros, se procede a asignarle el logro
correspondiente. Esto implica registrar en el sistema que el estudiante ha obtenido ese
logro específico.
Este código se encarga únicamente de la validación y asignación de logro, garantizando que

el estudiante cumpla con los parámetros requeridos para obtenerlo. Cabe destacar que este
código puede ser parte de un servicio más amplio o formar parte de un módulo dedicado
exclusivamente a la asignación de logros a los estudiantes.
Ilustración 105 Código de validación de asignación de logros
En la ilustración 105 se representa el código de validación de los requisitos básicos

necesarios para asignar un logro a un estudiante. Este código se encarga de verificar si el
estudiante cumple con los criterios establecidos para obtener un logro en particular.
Ilustración 106 Código de obtención de logro Front
En la ilustración 106 se presenta el código del Frontend encargado de enviar los

parámetros necesarios y procesar la respuesta del Backend para la asignación de un logro.
146
Compra de artículos
Se ha habilitado un servicio en la aplicación que permite a los estudiantes adquirir artículos.

Este servicio se encarga de asignar el artículo al estudiante que realiza la compra y de
realizar las validaciones necesarias para asegurarse de que el estudiante cuenta con los
recursos suficientes para adquirir el artículo. Durante el proceso de compra, el servicio
verifica aspectos como el saldo disponible del estudiante, la disponibilidad del artículo y
cualquier otro requisito previo establecido. Una vez que se confirma que el estudiante
cumple con los requisitos, el servicio asigna el artículo al estudiante y realiza las
actualizaciones correspondientes en el sistema. De esta manera, se garantiza que la
adquisición de artículos en la aplicación sea segura y que los estudiantes tengan los recursos
necesarios para realizar las compras de forma adecuada.
Ilustración 107 Código adquirir articulo

147
En el código de la ilustración 107, se encuentra la lógica para adquirir un artículo en el

sistema. El proceso se realiza en los siguientes pasos:
• Validación de la existencia del artículo: Se verifica si el artículo deseado está disponible

en el sistema, asegurando que se encuentre en el inventario o en la lista de artículos
disponibles para la compra.
• Validación de las monedas del estudiante: Se comprueba si el estudiante tiene suficientes

monedas para adquirir el artículo. Esto implica verificar el saldo de monedas del
estudiante y compararlo con el costo del artículo.
• Asignación del artículo al estudiante: Si el artículo existe y el estudiante tiene suficientes

monedas, se procede a asignar el artículo al estudiante. Esto implica registrar la
adquisición en el sistema, asociando el artículo con el estudiante correspondiente.
• Actualización de las monedas del estudiante: Después de la compra, se actualiza el saldo

de monedas del estudiante restando el costo del artículo adquirido. Esto garantiza que
las monedas del estudiante reflejen la transacción realizada.
Este código permite un proceso seguro y controlado para la adquisición de artículos en el

sistema, verificando la existencia del artículo, las monedas disponibles del estudiante y
realizando las asignaciones y actualizaciones correspondientes.
Interfaz de usuario Finales
Ilustración 108 Interfaz de usuario: Login

148
La ilustración 108 muestra los elementos necesarios para realizar el inicio de sesión.
Incluye un campo para ingresar las credenciales y proporciona la opción de iniciar sesión
tanto con Google como con Facebook.
Ilustración 109 Interfaz de usuario: Crear Cuenta
La ilustración 109 representa los componentes necesarios para la creación de una cuenta.
Contiene los campos básicos de información del usuario, como correo electrónico y
contraseña. Además, incluye una opción para aceptar los términos y condiciones. También
se brinda la posibilidad de registrarse utilizando cuentas de Google o Facebook.
Ilustración 110 Interfaz de usuario: Términos y condiciones
En la ilustración 110 se muestra el componente desplegado en la interfaz de la aplicación

que presenta los términos y condiciones requeridos para crear una cuenta. Este componente
149
proporciona la información necesaria sobre los términos legales y las condiciones de uso
que el usuario debe aceptar antes de proceder con la creación de su cuenta.
Ilustración 111 Interfaz de usuario: Registrar estudiante
En la ilustración 111 se muestra la interfaz que permite a los estudiantes completar sus
datos personales, los cuales son necesarios para continuar interactuando con la aplicación.
En esta interfaz, los usuarios tienen la posibilidad de proporcionar la información requerida,
como nombre, fecha de nacimiento, entre otros datos relevantes. Además, se les brinda la
opción de seleccionar un avatar o imagen que los represente dentro de la plataforma.
Ilustración 112 Interfaz de usuario: Registrar docente

150
En la ilustración 112 se muestra la interfaz que permite a un usuario registrarse como

profesor y completar los campos necesarios para acceder a la plataforma con este rol.
Ilustración 113 Interfaz de usuario: Home del estudiante
En la ilustración 113 se presenta la interfaz principal diseñada para los estudiantes. Esta
interfaz ofrece una visión general de los cursos disponibles y brinda al estudiante la
capacidad de navegar por diferentes secciones de la aplicación a través de un menú ubicado
en la parte izquierda.
Ilustración 114 Interfaz de usuario: Logros

151
En la ilustración 114 se presenta la interfaz de logros de los estudiantes. En esta pantalla,

se muestran los logros obtenidos por el estudiante resaltados en color, mientras que los
logros que aún no ha obtenido se muestran en gris. Cada logro está acompañado de una
descripción que explica el flujo o los pasos que el estudiante debe completar para
obtenerlos.
Ilustración 115 Interfaz de usuario: Ranking
En la ilustración 115 se presenta la interfaz del ranking de puntuación de los estudiantes

en la plataforma. En esta pantalla, se muestra en la parte superior un top tres de estudiantes
con las puntuaciones más altas. Estos estudiantes destacados son reconocidos por su
desempeño sobresaliente y se les otorga un lugar destacado en el ranking.
Debajo del top tres, se muestra una lista con el resto de los estudiantes y sus puntuaciones.
Esta lista se encuentra ordenada de manera descendente, lo que significa que los estudiantes
con las puntuaciones más altas se ubican en los primeros lugares de la lista.
152
Ilustración 116 Interfaz de usuario: Tienda
En la ilustración 116 se presenta la interfaz de la tienda de la aplicación. Esta interfaz

muestra todos los artículos disponibles para que los estudiantes puedan comprar. En ella,
se exhiben de manera organizada y visualmente atractiva los diferentes artículos que están
a disposición del estudiante.
Además de los artículos, en la interfaz se muestra también la cantidad total de monedas que
el estudiante posee.
Ilustración 117 Interfaz de usuario: Artículos adquiridos
En la ilustración 117 se presenta la interfaz de "Artículos Adquiridos". En esta pantalla,

se muestra en la parte izquierda una lista de los artículos que el estudiante ha obtenido
previamente. Cada artículo se representa de manera resumida, proporcionando información
básica sobre el mismo, como su nombre o una breve descripción.
153
Además, se incluye una opción de "Ver" que permite al estudiante obtener más detalles
sobre un artículo específico. Al seleccionar esta opción, se despliega una sección adicional
donde se muestra información más detallada del artículo, como su descripción completa,
características adicionales, instrucciones de uso, entre otros detalles relevantes.
Ilustración 118 Interfaz de usuario: Perfil del estudiante
En la ilustración 118 se presenta la interfaz del perfil del estudiante. Esta interfaz
proporciona al estudiante la capacidad de ver y modificar su información personal, así
como acceder a diferentes aspectos de su progreso en la plataforma.
En la parte central de la interfaz, se muestra la información personal del estudiante, como

su nombre, edad, dirección de correo electrónico, entre otros datos relevantes. El estudiante
tiene la posibilidad de realizar modificaciones en esta información si es necesario.
Además, en la interfaz se muestra el avatar del estudiante, que es la representación visual

que lo identifica en la plataforma. El estudiante puede seleccionar un nuevo avatar si lo
desea, lo que le permite personalizar su imagen en la plataforma.
En el lado izquierdo de la interfaz, se encuentran dos secciones importantes: "Progreso en

Cursos" y "Progreso en Logros".
154
Ilustración 119 Interfaz de usuario: Mapa del curso
En la ilustración 119 se presenta la interfaz del "Mapa del Curso". En esta pantalla, se
muestra un mapa visual que representa la estructura del curso, y se utilizan cofres como
elementos que representan los retos disponibles en cada etapa del curso.
En la parte superior izquierda de la interfaz, se encuentran tres opciones principales. La

primera opción es el "Tutorial", que brinda al estudiante información y orientación sobre
cómo utilizar el mapa del curso y aprovechar al máximo los recursos disponibles. La
segunda opción es "Artículos Adquiridos", que permite al estudiante acceder rápidamente
a los artículos que ha adquirido en la tienda. La tercera opción es la posibilidad de "Volver
al Menú Principal", lo que permite al estudiante regresar a la pantalla principal de la
aplicación.
En la parte inferior izquierda de la interfaz, se muestra una tarjeta que contiene información
básica del estudiante. Esta información incluye su avatar, nombre, puntos totales
acumulados y la cantidad de monedas que ha obtenido en su progreso dentro del curso.
Esta tarjeta proporciona una vista rápida de los datos relevantes del estudiante mientras
está explorando el mapa del curso.
155
Ilustración 120 Interfaz de usuario: IDE
En la ilustración 120 se presenta la interfaz del "IDE de Solución de Reto". Esta interfaz
proporciona al estudiante un entorno de desarrollo integrado donde puede generar la
solución para el reto planteado.
En la parte izquierda de la interfaz, se encuentra una descripción detallada del reto que el
estudiante debe resolver. Esta descripción brinda información sobre el problema a resolver,
los requisitos y cualquier instrucción adicional necesaria para completar el reto.
A la derecha de la descripción del reto, se muestra una lista de palabras que el estudiante
puede utilizar para construir la solución. Estas palabras pueden incluir comandos,
variables, funciones o cualquier otro elemento necesario para resolver el reto. Esta lista
proporciona al estudiante un conjunto de recursos disponibles para utilizar en su solución.
Al lado derecho de la lista de palabras, se encuentra el espacio donde el estudiante debe
armar la respuesta del reto.
Ilustración 121 Interfaz de usuario: Como practicar

156
En la ilustración 121 se presenta la interfaz del "Tutorial". En esta pantalla, se muestra

un video que proporciona una guía visual sobre cómo resolver cada reto de manera
correcta.
Ilustración 122 Interfaz de usuario: Tema
En la ilustración 122 se muestra la interfaz de información del tema del reto, en este se
puede observar la información del reto.
Ilustración 123 Interfaz de usuario: Ejecutar Reto
En la ilustración 123 se muestra la interfaz de ejecución de reto, donde se muestra el

mensaje correspondiente a la solución que se envió por el estudiante.
157
Ilustración 124 Interfaz de usuario: Instrucciones
En la ilustración 124 se muestra la interfaz de instrucciones donde se puede ver un gráfico

que explica cómo se debe completar la respuesta del reto.
Ilustración 125 Interfaz de usuario: Home del docente
En la ilustración 125 se presenta la interfaz principal del docente. En esta pantalla, se

muestra una lista de los cursos que el profesor tiene a su cargo. A la izquierda de la pantalla,
se encuentra un menú que proporciona acceso a todas las opciones y funcionalidades del
sistema.
La lista de cursos muestra los diferentes cursos que el profesor está supervisando o
enseñando. Cada curso se muestra de manera clara y organizada, lo que permite al docente
tener una visión general de sus responsabilidades y actividades relacionadas con cada
curso.
158
Ilustración 126 Interfaz de usuario: Perfil del docente
En la ilustración 126 se representa la interfaz del perfil del docente. En esta pantalla, el
docente puede acceder y visualizar su información básica, así como realizar modificaciones
en caso de ser necesario.
La interfaz muestra de forma clara y organizada los campos de información personal del
docente, como nombre, dirección de correo electrónico, entre otros. Estos datos permiten
identificar y distinguir al docente dentro del sistema.
Ilustración 127 Interfaz de usuario: Curso docente
En la ilustración 127 se presenta la interfaz del curso del docente. En esta pantalla, se
muestra la información general del curso que el docente administra, así como la lista de
retos asociados a ese curso.
159
La interfaz se organiza de manera clara y estructurada para brindar una visión general del
curso. En la parte izquierda de la pantalla, se encuentra una tarjeta que contiene
información relevante sobre el curso, como el nombre del curso, la descripción, la duración
y cualquier otro detalle importante.
Justo debajo de la tarjeta de información del curso, se encuentran dos opciones: "Lista de
Retos" y "Lista de Estudiantes". Estas opciones permiten al docente acceder rápidamente
a la lista de retos asociados al curso y a la lista de estudiantes inscritos en el curso,
respectivamente.
Ilustración 128 Interfaz de usuario: Configuración del reto
En la ilustración 128 se muestra la interfaz de configuración de un reto para el profesor.

En esta pantalla, el profesor tiene la capacidad de modificar diferentes aspectos del reto,
como las fechas de disponibilidad, la cantidad de monedas otorgadas y el estado del reto.
Ilustración 129 Interfaz de usuario: Estudiantes Matriculados
En la ilustración 129 se presenta la interfaz del curso del docente. En esta pantalla, se
muestra la información general del curso que el docente administra, así como la lista de
estudiantes asociados a ese curso.
160
La interfaz se organiza de manera clara y estructurada para brindar una visión general del
curso. En la parte izquierda de la pantalla, se encuentra una tarjeta que contiene
información relevante sobre el curso, como el nombre del curso, la descripción, la duración
y cualquier otro detalle importante.
Justo debajo de la tarjeta de información del curso, se encuentran dos opciones: "Lista de
Retos" y "Lista de Estudiantes". Estas opciones permiten al docente acceder rápidamente
a la lista de retos asociados al curso y a la lista de estudiantes inscritos en el curso,
respectivamente.
Ilustración 130 Interfaz de usuario: Progreso del estudiante
En la ilustración 130 se representa la interfaz de progreso del estudiante en un curso

específico. En esta pantalla, el estudiante puede visualizar su avance y rendimiento en los
cursos que ha iniciado.
161
Ilustración 131 Interfaz de usuario: Dashboard del Administrador
En la ilustración 131 se representa la interfaz del dashboard del administrador, que

proporciona una visión general y resumida de información relevante del sistema.
En esta pantalla, se presentan una serie de tarjetas que contienen datos clave sobre el
sistema. Estas tarjetas suelen incluir información como la cantidad total de usuarios
registrados, el promedio de monedas obtenidas por los usuarios, el número de cursos
activos, entre otros indicadores relevantes para la gestión y administración del sistema.
Ilustración 132 Interfaz de usuario: Listar Estudiantes
En la ilustración 132 se representa la interfaz de la lista de estudiantes, que muestra todos

los estudiantes registrados en el sistema en forma de una tabla paginada.
162
En esta interfaz, cada estudiante registrado se muestra como un registro en la tabla. Cada
registro puede contener información relevante del estudiante, como su nombre, apellido,
correo electrónico u otra información pertinente.
Además de la información del estudiante, cada registro en la tabla también presenta

opciones de edición y eliminación. Estas opciones permiten al administrador modificar los
datos del estudiante o eliminar su registro del sistema, respectivamente.
Adicionalmente, en la interfaz de la lista de estudiantes se incluye una opción para crear

un nuevo estudiante en el sistema.
Ilustración 133 Interfaz de usuario: Registrar Estudiante
En la ilustración 133 se representa la interfaz de registro de estudiantes, que permite al

administrador crear un nuevo estudiante en el sistema. Esta interfaz presenta un formulario
con los campos necesarios para ingresar la información del estudiante.
Ilustración 134 Interfaz de usuario: Actualizar estudiante
En la ilustración 134 se representa la interfaz de actualizar estudiantes, que permite al

administrador actualizar un estudiante en el sistema. Esta interfaz presenta un formulario
con los campos necesarios para ingresar la información del estudiante.
163
d) Implementación de experiencia de usuario y usabilidad
Experiencia de usuario
Teniendo en cuenta el panal de experiencia de usuario propuesto por Peter Morville [34] en la
ilustración 9, se tuvo en cuenta los siguientes factores en la herramienta desarrollada:
• Utilidad: La aplicación fue diseñada con un enfoque centrado en el usuario, buscando

mejorar sus habilidades e intereses en programación a través de la gamificación. Esto
se evidencia mediante la implementación de una prueba de validación de
conocimientos, la cual se detalla en la sección de pruebas de impacto educativo. La
finalidad de esta prueba es asegurar que la aplicación realmente beneficie a los usuarios
al proporcionarles un medio efectivo para aplicar sus conocimientos en el tema de
algoritmos.
• Encontrabilidad: La herramienta ha sido diseñada teniendo en cuenta la facilidad de

acceso a través de elementos e interfaces intuitivos. Los usuarios pueden navegar
fácilmente mediante el menú lateral y utilizar los botones en la interfaz del IDE (Entorno
de Desarrollo Integrado) para acceder a los diferentes contenidos de la herramienta. Esto
garantiza que los usuarios puedan encontrar rápidamente lo que necesitan y tener una
experiencia de uso más fluida y eficiente.
• Valioso: La herramienta gamificada ofrece un alto valor a los usuarios al combinar

elementos de recompensas y desafíos en la experiencia de aprendizaje de los algoritmos,
la cual fomenta la superación de desafíos y motiva al usuario a explorar el contenido.
Usabilidad
Basándonos en los conceptos presentados en el capítulo II, en la sección de usabilidad, se

han implementado en el proyecto las siguientes características determinadas por Jakob
Nielsen y Ben Shneiderman en relación con los modelos de usabilidad.
• Facilidad de aprendizaje: La facilidad de aprendizaje de la plataforma se logra gracias

a su diseño cuidadoso. Los usuarios pueden aprender a utilizarla de manera rápida y
efectiva debido a varios aspectos clave. En primer lugar, la plataforma cuenta con flujos
de actividad claros e intuitivos. Esto significa que los pasos necesarios para realizar una
acción son breves y fáciles de entender. Los usuarios pueden seguir estos flujos sin
confusiones, lo que agiliza su aprendizaje y les permite utilizar la plataforma de manera
eficiente.
• Retención sobre el tiempo: La plataforma aplica retención sobre el tiempo al

implementar flujos de actividades cortos y fáciles de memorizar. Esto significa que los
usuarios pueden recordar fácilmente los pasos necesarios para completar una acción en
la plataforma. Los flujos de actividades se han diseñado de manera concisa y eficiente,
evitando pasos innecesarios o complicaciones que podrían llevar a la pérdida de tiempo.
164
• Tasa de error: La aplicación ha implementado la tasa de error como parte de su enfoque

en la usabilidad. Se han utilizado varias ventanas emergentes de error que presentan al
usuario explicaciones pertinentes sobre el error ocurrido, así como instrucciones claras
sobre las acciones necesarias para poder continuar con sus actividades dentro de la
plataforma.
Estas ventanas emergentes de error han sido diseñadas con el objetivo de proporcionar
al usuario una retroalimentación inmediata y útil cuando se produce un error. En lugar
de dejar al usuario confundido o frustrado, la aplicación les brinda información clara y
relevante sobre lo que ha salido mal y qué deben hacer a continuación.
6. Patrones de Diseño Utilizados

En esta sección se especifican los patrones de diseño que se utilizan dentro de la plataforma
Language Conquers.
• Inyección de dependencias: Es un patrón de diseño orientado a objetos, el cual

nos permite inyectar dependencias cuando sea necesario en una clase en lugar de
tener que inicializar las dependencias en cada clase que la utilice.
Ilustración 135 Inyección de Dependencias
En la ilustración 135 se muestra el uso de inyección de dependencias para inyectar el

servicio de avatar y acceder a sus métodos.
• Singleton: Es un patrón de diseño creacional que nos permite tener una única
instancia de una clase, proporcionando un punto de acceso global a dicha instancia.
Ilustración 136 Patrón Singleton

165
En la ilustración 136 se muestra el patrón Singleton en la implementación de los servicios

para que las instancias conserven su estado en todo momento.
• Repository: Es un patrón de diseño que nos permite encapsular el comportamiento

de almacenamiento, obtención y búsqueda de los datos, permitiendo crear capas para
las operaciones de la base de datos, la lógica del negocio y la interfaz del usuario de
la aplicación.
Ilustración 137 Patrón Repository
En la ilustración 137 se muestra el patrón Repository en el Backend, en el cual se observa

como a través de la herencia se obtienen los métodos de JpaRepository y el uso de querys
para personalizar los métodos del Repository.
• Factory: Es un patrón de diseño creacional que nos permite crear objetos sin
exponer la lógica de creación y construir una jerarquía de clases.
166
Ilustración 138 Patrón Factory
En la ilustración 138 se muestra cómo se implementó el patrón Factory para crear objetos
sin tener que exponer su lógica.
7. Pruebas de software automatizadas

Con el fin de asegurar y verificar el correcto funcionamiento de la plataforma desarrollada,
se llevaron a cabo pruebas unitarias automatizadas y funcionales. Estas pruebas del software
permiten evaluar y validar que la aplicación cumpla con las funcionalidades que se espera
de ella, asegurando así su calidad y confiabilidad.
Para realizar las pruebas unitarias, se empleó el Framework de automatización Junit, la

utilización del patrón Data Builder y la herramienta JaCoCo para analizar la cobertura de
las pruebas y generar un informe en formato HTML. El Framework Junit se utiliza para
escribir pruebas unitarias que se centran en probar el comportamiento de componentes de
software individuales.
Se fijó un objetivo de cobertura del 85% para las pruebas, las cuales se implementaron en
la capa de aplicación, donde se encuentra la lógica principal de la misma. De esta manera,
se asegura el correcto funcionamiento del software.
Ilustración 139 Proceso de implementación de las pruebas unitarias
A continuación, se detalla el proceso realizado para llevar a cabo el proceso de creación de

las pruebas automatizadas, teniendo en cuenta la ilustración 139.
167
Configuración del entorno
Ilustración 140 Configuración del archivo pom.xml
En la ilustración 140 se observa la configuración del entorno, para ello es necesario

asegurarse de que las dependencias de Spring Boot y Junit5 estén presentes en el proyecto.
Para lograrlo, se deben agregar estas dependencias al archivo de configuración
correspondiente, en este caso al archivo pom.xml y luego realizar la importación y
sincronización de estas.
Creación de las clases de prueba utilizando el patrón Data Builder
El patrón Data Builder establece que se debe crear una clase como un modelo del objeto, el
cual permite construir objetos de manera más sencilla y legible. Esta clase, conocida como
Data Builder, se encarga de configurar los valores de las propiedades del objeto de manera
modular, evitando la complejidad de configurar manualmente cada propiedad en cada
instancia. Con el uso del patrón Data Builder, se logra una construcción más fluida y
estructurada de los objetos, mejorando la legibilidad y mantenibilidad del código. En
secciones posteriores se explicará a detalle el uso e implementación de este patrón en el
proyecto.
168
Para llevar a cabo las pruebas, se utilizó el patrón Data Builder, el cual permitió crear
diferentes modelos de objetos según las necesidades de cada prueba. Este enfoque permitió
reducir la cantidad de código necesario para implementar las pruebas, al tener la flexibilidad
de adaptar los objetos para probar de manera eficiente en cada caso.
Ilustración 141 Estructura Patrón Data Builder

169
Ilustración 142 Creación del Data Builder
Las ilustraciones 141 y 142 muestran la implementación de la clase Data Builder, la cual
posteriormente se utiliza en los casos de prueba. La adopción de este patrón nos permite
crear los casos de prueba de manera más sencilla, lo cual se presentará más adelante.
Creación de clases de prueba
Ilustración 143 Declaración constantes globales

170
Ilustración 144 Inyección de dependencias
En la ilustración 143 y 144, se presenta la clase de prueba diseñada para evaluar la

funcionalidad de creación de programas. En esta clase, se han declarado constantes estáticas
de acceso privado, las cuales definen mensajes de validación utilizados en el sistema y se
consideran constantes globales para esta clase. Posteriormente, se procede a la inyección
de dependencias necesarias para facilitar el acceso a los componentes del objeto.
Anotaciones y estructura de las pruebas
Ilustración 145 Construcción de la prueba
En la ilustración 145 se evidencia la creación de la prueba unitaria utilizando la anotación

@Test, la cual se utiliza para definir los métodos de prueba y verificar el comportamiento
esperado, dentro del caso de prueba se implementa el patrón Data Builder.
171
Ilustración 146 Estructura de las pruebas
En la ilustración 146 se evidencia la estructura que se utilizó en el proyecto para la creación

de estas pruebas de cada uno de los conjuntos de datos del proyecto.
Cobertura del código con la herramienta JaCoCo
Con la herramienta JaCoCo, se genera un informe detallado de las pruebas realizadas. Este
informe nos muestra la cobertura de las pruebas en cada clase y nos permite identificar las
partes del código que están siendo probadas, las que no han sido probadas o que han fallado
en las pruebas.
172
Ilustración 147 Reporte de Cobertura
En la ilustración 147 se evidencia la cobertura obtenida en las pruebas unitarias realizadas.
H. Pruebas y análisis de resultados

Las pruebas funcionales que se realizaron en el proyecto se realizaron de manera manual
teniendo en cuenta la técnica de entradas de datos que permiten validar y verificar las
historias de usuario a través de casos de prueba propuestos. Estos casos de prueba fueron
diseñados considerando las funcionalidades principales de cada rol en el sistema, se
llevaron a cabo pruebas con 36 estudiantes de Ingeniería de Sistemas y Multimedia de tercer
y cuarto semestres del curso electiva de programación impartido por la docente Simena
Dinas en la Universidad San Buenaventura Cali. El objetivo de estas pruebas era permitir a
los estudiantes explorar la plataforma y resolver el primer desafío.
1. Casos de Prueba
En la Tabla 30 se describe el caso de prueba realizado para el registro de un docente en la
plataforma.
Tabla 30 Caso de prueba Registro de docente

ID CP-1
Nombre del Caso de Prueba: Registro de docente
Proceso o Funcionalidad: Registro de docente en la plataforma Language Conquers
Descripción: El docente se debe registrar en la plataforma ingresando
los datos solicitados.
ID de las HU Relacionadas: HU1, HU3, HU4, HU5, Tipo de Positiva
HU9, HU10 Prueba:
Pasos para Ejecución: 1. Ingresar a la aplicación Language Conquers
2. Seleccionar la opción Crear cuenta
173
3. Ingresar el campo correo electrónico

4. Ingresar el campo Contraseña
5. Aceptar términos y condiciones
6. Presionar el botón crear cuenta
7. Verificar la cuenta en el correo electrónico
8. Seleccionar la opción Iniciar sesión
10. Ingresar el campo contraseña
11. Presionar el botón ingresar
12. Seleccionar la opción docente
13. Ingresar el campo Nombre
14. Ingresar el campo Apellido
15. Seleccionar el género
16. Presionar el botón crear docente
17. Ingresar a la pantalla principal
Variables de Entrada: 1. Correo: “[email protected]”

2. Contraseña: “juan1234”
3. Nombre: “Juan José”
4. Apellido: “muñoz”
5. Género: “Masculino”
Resultados Esperados: 1. Creación del usuario en la base de datos
2. Mensaje “El docente se ha creado exitosamente”
Observaciones: El usuario se creó exitosamente.
Estado: Validó Tipo de Error: N/A
En la Tabla 31 se describe el caso de prueba realizado para el registro de un estudiante en

la plataforma.
Tabla 31 Caso de prueba Registro de estudiante
ID CP-2
Nombre del Caso de Prueba: Registro de estudiante
Proceso o Funcionalidad: Registro de estudiante en la plataforma Language
Conquers
Descripción: El estudiante debe registrase en el sistema ingresando los
datos solicitados.
HU9 Prueba:
Pasos para Ejecución: 1. Ingresar a la aplicación Language Conquers
2. Seleccionar la opción Crear cuenta
4. Ingresar el campo Contraseña
5. Aceptar términos y condiciones
6. Presionar el botón crear cuenta
7. Verificar la cuenta en el correo electrónico
8. Seleccionar la opción Iniciar sesión
10. Ingresar el campo contraseña
11. Presionar el botón ingresar
12. Seleccionar la opción estudiante
13. Ingresar el campo Nombre
14. Ingresar el campo Apellido
174
15. Ingresar el campo NickName

16. Seleccionar el semestre
17. Seleccionar el género
18. Seleccionar el programa
19. Seleccionar la fecha de nacimiento
20. Seleccionar el avatar
21. Presionar el botón crear estudiante
22. Ingresar a la pantalla principal
Variables de Entrada: 1.Correo: “[email protected]”

2.Contraseña: “Miguel1234”
3.Nombre: “Miguel”
4.Apellido: “Ortiz”
5.NickName: “Maicky”
6.Semestre: “10”
7.Género: “Masculino”
8.Programa: “Ingeniería de sistemas”
9.Fecha de nacimiento: “28-01-2001”
Resultados Esperados: 1.Creación del usuario en la base de datos
2.Mensaje “Se ha creado el estudiante
exitosamente”
Observaciones: El usuario se creó exitosamente.
En la Tabla 32 se describe el caso de prueba realizado para el ingreso a un curso por parte
del estudiante en la plataforma.
Tabla 32 Caso de prueba Ingresar a un curso

ID CP-3
Nombre del Caso de Prueba: Ingresar a un curso
Proceso o Funcionalidad: Matricularse a un curso (Estudiante)
Descripción: El estudiante ubicado en el home de la aplicación deberá
ingresar a un curso.
ID de las HU Relacionadas: HU8, HU9, HU15 Tipo de Positiva
Prueba:
Pasos para Ejecución: 1. Ingresar al home
2. Seleccionar el curso de Fundamentos de
programación
3. Seleccionar el botón aceptar para matricularse en el
curso.
Variables de Entrada: 1. Selección del curso

2. Aceptar matricula al curso
Resultados Esperados: Ingreso y visualización del mapa dentro del curso.
Observaciones: Se matriculo exitosamente en el curso.
175
En la Tabla 33 se describe el caso de prueba realizado para habilitar un reto por parte del
docente en la plataforma.
Tabla 33 Caso de prueba Habilitar Reto
ID CP-4
Nombre del Caso de Prueba: Habilitar un reto
Proceso o Funcionalidad: Habilitar un reto dentro del curso (Docente)
Descripción: El docente ubicado dentro del curso y visualizando los retos
disponibles en el sistema deberá seleccionar el reto que
desea habilitar y presionar el botón para que sea
redireccionado a la sección de habilitar reto, en el deberá
llenar los campos solicitados para activar el reto dentro del
curso.
HU21, HU22, HU23 Prueba:
Pasos para Ejecución: 1. Ingresar al curso
2. Seleccionar un reto
3. Ingresar campo fecha de inicio
4. Ingresar campo fecha limite
5. Ingresar campo máximo de intentos
6. Ingresar campo monedas
7. Ingresar estado
8. Presionar el botón actualizar reto
Variables de Entrada: 1. Fecha de inicio: “23-03-2023”

2. Fecha límite: “31-08-2023”
3. Máximo de intentos: 10
4. Monedas: 600
5. Estado: “Activo”
Resultados Esperados: 1. Actualización del reto
2. Mensaje “Se ha actualizado el estado del reto”
3. Visualización del reto con los cambios en la lista
de retos
Observaciones: El reto se ha actualizo exitosamente.
Estado: Validó Tipo de N/A
Error:
En la Tabla 34 se describe el caso de prueba realizado para habilitar un reto por parte del
estudiante en la plataforma.
Tabla 34 Caso de prueba Resolver un reto
ID CP-5
Nombre del Caso de Resolver un reto
Prueba:
Proceso o Funcionalidad: Resolver un reto exitosamente (Estudiante)
Descripción: El estudiante deberá ingresar al curso y seleccionar el reto
que tenga habilitado para resolver, resolverá el reto de
manera exitosa.
ID de las HU Relacionadas: HU8, HU9, HU15, HU16, HU17, Tipo de Positiva
HU19, HU20, HU26, HU27 Prueba:
176
Pasos para Ejecución: 1. Seleccionar el curso

2. Seleccionar el reto que este habilitado
3. Resolver el reto ubicando las tarjetas en el orden
correcto
4. Presionar el botón ejecutar
Variables de Entrada: 1.Dar clic en el reto

2.Ubicación de las tarjetas en las listas
correspondientes.
Resultados Esperados: 1. Asignación del registro del reto en la base de datos
2. Actualización de las monedas del estudiante en la
base de datos
3. Actualización del puntaje del estudiante en la base
de datos
4. Has logrado completar el reto exitosamente.
Observaciones: Se resolvió el reto exitosamente.
En la Tabla 35 se describe el caso de prueba realizado para la compra de un artículo de

manera exitosa por parte de un estudiante en la plataforma.
Tabla 35 Caso de prueba Comprar un artículo Exitosamente
ID CP-6
Nombre del Caso de Comprar un artículo
Prueba:
Proceso o Funcionalidad: Comprar un artículo en la tienda de manera exitosa (Estudiante)
Descripción: El estudiante deberá ingresar a la sección de tienda desde el
menú lateral y deberá seleccionar un artículo que pueda
comprar teniendo en cuenta la cantidad de monedas que tiene el
usuario.
ID de las HU HU27, HU30 Tipo de Prueba: Positiva
Relacionadas:
Pasos para Ejecución: 1. Ingresar a la sección de tienda
2. Seleccionar un articulo
3. Presionar el botón comprar
Variables de Entrada: 1. Selección de botón de tienda

2. Selección del botón comprar en el artículo que desea
obtener
Resultados Esperados: 1. Actualización de los artículos adquiridos por el
estudiante en la base de datos
2. Actualización de los artículos disponibles en la base
de datos
3. Mensaje “Ha realizado la compra exitosamente”
Observaciones: Compra exitosa.
En la Tabla 36 se describe el caso de prueba realizado para la compra de un artículo de

manera fallida por parte de un estudiante en la plataforma.
177
Tabla 36 Caso de prueba Comprar artículo fallido

ID CP-7
Nombre del Caso de Prueba: Comprar un artículo
Proceso o Funcionalidad: Intentar comprar un artículo de la tienda con fondos
insuficientes (Estudiante)
Descripción: El estudiante deberá ingresar a la sección de tienda desde
el menú lateral y deberá seleccionar un artículo con un
precio mayor a la cantidad de monedas obtenidas por el
usuario.
ID de las HU Relacionadas: HU27, HU30 Tipo de Positiv
Prueba: a
Pasos para Ejecución: 1. Ingresar a la sección de tienda
2. Seleccionar un articulo
3. Presionar el botón comprar
Variables de Entrada: 1. Selección de botón de tienda
2. Selección del botón comprar en el artículo que
desea obtener
Resultados Esperados: Mensaje “No tiene la cantidad de monedas necesarias para
comprar el artículo”
Observaciones: No se realizó la compra por monedas insuficientes.
Estado: validó Tipo de N/A
Error:
En la Tabla 37 se describe el caso de prueba realizado para la visualización del ranking

por parte de un docente en la plataforma.
Tabla 37 Caso de prueba Mostrar Ranking del curso
ID CP-8
Nombre del Caso de Mostrar ranking del curso
Prueba:
Proceso o Funcionalidad: Visualizar el ranking del curso (Docente)
Descripción: El docente deberá ingresar a la sección de ranking desde el
menú lateral y visualizar la información de los estudiantes que
se encuentran en el ranking de posición.
Relacionadas:
Pasos para Ejecución: 1. Seleccionar el botón de ranking desde el menú lateral.
2. Visualizar la información de los estudiantes
Variables de Entrada: Seleccionar el botón de ranking

Resultados Esperados: Visualizar la información de los estudiantes del curso que se
encuentran en el ranking.
Observaciones: Visualización exitosa de los usuarios con mejor puntuación.
En la Tabla 38 se describe el caso de prueba realizado para la visualización de los logros por parte de un
estudiante en la plataforma.
178
Tabla 38 Caso de prueba Mostrar logros

ID CP-9
Nombre del Caso de Mostrar logros
Prueba:
Proceso o Funcionalidad: Visualizar los logros (Estudiantes)
Descripción: El estudiante deberá ingresar a la sección de logros a través
del menú lateral.
ID de las HU Relacionadas: HU24, HU28, HU29 Tipo de Prueba: Positiva
Pasos para Ejecución: 1. Seleccionar el botón de logros
2. Visualizar los logros en la plataforma
Variables de Entrada: 1. Seleccionar el botón logros

Resultados Esperados: Visualizar los logros
Observaciones: El estudiante entro a la pantalla exitosamente y se puede
diferenciar los logros que ha desbloqueado y los que no.
En la Tabla 39 se describe el caso de prueba realizado para la visualización del ranking por
parte de un estudiante en la plataforma.
Tabla 39 Caso de prueba Visualización del Ranking
ID CP-10
Nombre del Caso de Visualizar el ranking
Prueba:
Proceso o Funcionalidad: Visualizar el ranking del curso (Estudiante)
Descripción: El estudiante deberá ingresar a la sección de ranking desde el
menú lateral y visualizar la información de los estudiantes que
se encuentran en el ranking de posición.
ID de las HU Relacionadas: HU12, HU26 Tipo de Prueba: Positiva
Pasos para Ejecución: 1. Seleccionar el botón de ranking desde el menú

lateral
2. Visualizar la información de los usuarios que se
encuentran en el ranking
Variables de Entrada: Seleccionar el botón de ranking
Resultados Esperados: Visualizar la información de los estudiantes del curso que se
encuentran en el ranking.
Observaciones: Visualización exitosa de los usuarios con mejor puntuación.
En la Tabla 40 se describe el caso de prueba realizado para actualización del perfil por
parte de un estudiante en la plataforma.
Tabla 40 Caso de prueba Editar perfil del estudiante
ID CP-11
Nombre del Caso de Editar el perfil del estudiante
Prueba:
Proceso o Funcionalidad: Actualizar datos personales
179
Descripción: El estudiante deberá ingresar a la sección de editar perfil y

actualizar por lo menos un campo.
Relacionadas:
Pasos para Ejecución: 1. Seleccionar el botón de editar perfil desde el menú
lateral
2. Modificar el campo de NickName
3. Seleccionar un avatar
4. Presionar el botón de actualizar perfil
Variables de Entrada: 1. Seleccionar el botón de editar perfil

2. Ingresar campo NickName: “migue12”
3. Seleccionar un avatar
4. Presionar botón actualizar perfil
Resultados Esperados: Mensaje “El estudiante se ha actualizado exitosamente”
Observaciones: Se actualizo la información del estudiante exitosamente.
En la Tabla 41 se describe el caso de prueba realizado para actualización del perfil por
parte de un docente en la plataforma.
Tabla 41 Caso de prueba Editar perfil del docente
ID CP-12
Nombre del Caso de Editar el perfil del docente
Prueba:
Proceso o Funcionalidad: Actualizar datos personales
Descripción: El docente deberá ingresar a la sección de editar perfil y
actualizar por lo menos un campo.
ID de las HU Relacionadas: HU13, HU14 Tipo de Prueba: Positiva
Pasos para Ejecución: 5. Seleccionar el botón de editar perfil desde el menú

lateral
6. Modificar el campo de Nombre
7. Presionar el botón de actualizar perfil
Variables de Entrada: 5. Seleccionar el botón de editar perfil

6. Ingresar campo Nombre: “Juan”
7. Presionar botón actualizar perfil
Resultados Esperados: Mensaje “Se ha actualizado el docente exitosamente”
Observaciones: Se actualizo exitosamente la información del docente.
En la Tabla 42 se describe el caso de prueba realizado para dar solución de manera

incorrecta a un reto por parte del estudiante en la plataforma.
Tabla 42 Caso de prueba Realizar un reto sin éxito
ID CP-13
Nombre del Caso de Realizar un reto sin éxito
Prueba:
Proceso o Funcionalidad: Resolver un reto de manera incorrecta (Estudiante)
180

manera incorrecta.
ID de las HU Relacionadas: HU8, HU9, HU15, HU16, Tipo de Prueba: Positiva
HU17, HU19, HU20,
HU26, HU27
incorrecto
Variables de Entrada: 1. Dar clic al reto
2. Ubicar de las tarjetas de manera incorrecta
Resultados Esperados: Mensaje “Revisa tu código”
Observaciones: El estudiante no resolvió de manera correcta el reto y obtuvo
retroalimentación sobre su respuesta.
En la Tabla 43 se describe el caso de prueba realizado para dar solución de manera

incorrecta a un reto en el último intento por parte del estudiante en la plataforma.
Tabla 43 Caso de prueba Realizar Reto sin éxito en el último intento
ID CP-14
Nombre del Caso de Prueba: Realizar un reto sin éxito en el último intento
Proceso o Funcionalidad: Resolver un reto de manera incorrecta con el último intento
(Estudiante)
manera incorrecta hasta llegar al último intento y perder el
intento.
ID de las HU Relacionadas: HU8, HU9, HU15, Tipo de Prueba: Positiva
HU16, HU17, HU19,
HU20, HU26, HU27
incorrecto
Variables de Entrada: 1. Selección del reto
2. Seleccionar un reto
3. Ubicar de las tarjetas de manera incorrecta
Resultados Esperados: 1. Actualización del registro del reto del estudiante en
la base de datos
2. Mensaje “Has superado el último intento”
3. Visualización del reto desde el mapa inhabilitado
Observaciones: El estudiante visualiza en el mapa el reto, pero al presionarlo
no le permite volver a ingresar para intentar solucionarlo
nuevamente.
181
2. Pruebas Funcionales
Las primeras pruebas fueron realizadas a tres de último semestre de ingeniería de sistemas,
dos estudiantes de noveno semestre de ingeniería electrónica y un estudiante de séptimo
semestre de ingeniería multimedia. Se presenta la ficha técnica de la prueba realizada.
Tabla 44 Ficha técnica Pruebas Funcionales
Universo programas de Ingeniería de sistemas, Ingeniería multimedia e
Ingeniería electrónica de la Universidad San Buenaventura Cali.
Evaluar el funcionamiento de la aplicación utilizando los casos
de prueba planteados.
Técnica de recolección Prueba realizada de manera virtual.
de datos
Tamaño de la muestra 6 estudiantes
Prueba realizada por Angela Maria Acosta Ramirez y Juan Pablo Caro Vargas
Fecha de realización Abril 04 de 2023
Teniendo en cuenta la ficha técnica de la prueba se presenta las evidencias de cada prueba
realizada y los resultados obtenidos por parte de cada una de ellas.
Ilustración 148 Creación del perfil estudiante 1
En la ilustración 148 se evidencia el proceso de creación del usuario para el estudiante.

182
Ilustración 149 Pantalla IDE del estudiante 1
En la ilustración 149 se evidencia el proceso de solución de un reto en la pantalla del IDE

para el estudiante 1.
Ilustración 150 Solución del reto del estudiante 1
En la ilustración 150 se evidencia el proceso que realizo el estudiante para posteriormente

obtener una validación de manera exitosa de la solución del primer reto en la pantalla del
IDE para el estudiante 1.
183
Ilustración 151 Perfil del estudiante número 1
En la ilustración 151 se evidencia la visualización del perfil para el estudiante 1.
Opiniones y sugerencias propuestas
• Al registrar el estudiante y presionar las flechas para ver otros avatares no se puede
regresar a la primera vista de los avatares.
• Al entrar a la pantalla del IDE debería mostrar el pop-up de las instrucciones para
saber cómo se debe de utilizar los elementos de la pantalla.
• Se debería explicar que dentro de cada línea se puede agregar más de una tarjeta.
• No se actualiza a tiempo la información del estudiante desde la pantalla del mapa.
• Se debería de bloquear los campos de fecha de nacimiento, semestre, programa y
género, especificándole al usuario en el momento de registrar que dichos campos
no se podrán modificar en un futuro.
• Al abrir el menú lateral no se desplaza los elementos de la pantalla, los oculta.
• Le gusto como se soluciona el reto y considera que es una herramienta útil para
reforzar los conocimientos.
Ilustración 152 Creación de usuario del estudiante 2

184
En la ilustración 152 se evidencia el proceso de creación del usuario para el estudiante 2.
Ilustración 153 Perfil del estudiante 2
En la ilustración 153 se evidencia la visualización del perfil para el estudiante 2.

• Se debería mostrar los intentos que se tienen en la pantalla del IDE.
• La interfaz gráfica es adecuada, no es infantil y es didáctica manteniendo el interés
por interactuar en ella.
• Al abrir el menú lateral debería desplazar la pantalla.
• El botón de volver al mapa en artículos adquiridos no funciona.
• Es necesario tener un tutorial que explique cómo se debe resolver un reto para
entender cómo se utilizan los elementos de la pantalla del IDE.
• Las respuestas y retroalimentación son adecuada, se entiende bien cuando se realizó
una actividad con éxito y cuando no.
185
Ilustración 155 Registro del estudiante 3
Ilustración 156 Solución del reto 3

• Se generó error de validación de fechas al intentar matricularse en el curso.
• La pantalla de artículos adquiridos debería estar dividido por secciones dependiendo
el artículo que sea.
186
• Le generó un error porque no se recargo la pantalla de tienda después de haber

comprado un artículo y le dejaba comprar el articulo dos veces.
• Se debería agregar un mensaje descriptivo a los iconos del menú lateral para saber
que significa cada icono sin la necesidad de abrir el menú.
Ilustración 158 Solución del reto 4

• Se debe de arreglar el diseño responsivo de las pantallas.

187
• En la opción de términos y condiciones debería decir “Aceptar términos y

condiciones”.
• En el Home del estudiante debería decir “Cursos disponibles” en vez de “Cursos”.
• En la tienda debería haber un título que diga “Accesorios disponibles”.
• Se debería de mostrar un pop-up que diga “Pagina no disponible”.
• El botón del reto no es intuitivo, debería que al presionarse muestre en forma de
mensaje flotante con la información del estado del reto, si fue completado o no.
• Al abrir el menú lateral debería desplazar la pantalla.
• Se debería poder visualizar los intentos que se tienen disponibles en cada reto.
• No se pueden visualizar el video de la pista.
Ilustración 160 Pantalla de Home 5
En la ilustración 160 se evidencia la visualización de la pantalla de Home para el estudiante

5.
188

Ilustración 162 Artículos Adquiridos del estudiante 5
En la ilustración 162 se evidencia la visualización de los artículos adquiridos para el

estudiante 5.
• Se debe de arreglar el diseño responsivo de toda la aplicación.

• Con las instrucciones se puede entender mejor como se puede realizar el reto.
189

• Se debería mejorar la explicación da la forma en la que se debe resolver el reto.
• La solución del reto debería ser más detallada, que sea más explícito las acciones
que se realizan para cada actividad.
Según los informes de los usuarios, los problemas más recurrentes en la aplicación estaban
relacionados con el diseño responsivo. A pesar de las sugerencias de diseño, aún persisten
dificultades en la visualización correcta de la interfaz en varios dispositivos. Este cambio
se aplicará en futuras versiones de la aplicación.
190
Durante las dos primeras pruebas realizadas a los usuarios, se detectó la necesidad de
proporcionar una guía para ayudarles a utilizar la pantalla del IDE y resolver el reto. Como
resultado, se decidió crear instrucciones adicionales que permitieran al usuario comprender
el significado del color de las palabras en la lista de arrastrar y soltar, y así poder completar
el reto de manera más efectiva.
Un hallazgo importante derivado de las primeras seis pruebas realizadas fue la necesidad
de crear videotutoriales que expliquen las distintas secciones de la plataforma y cómo
utilizar la pantalla del IDE para resolver los retos, tanto básicos como avanzados.
Ilustración 165 Instrucción reto básico
Ilustración 166 Instrucción reto avanzado

191
En las ilustraciones 165 y 166 se explica el significado de los colores de las palabras que se
pueden encontrar en el reto y una explicación de cómo deben ser utilizadas para dar
cumplimiento con el reto.
Ilustración 167 Instrucciones de Acciones generadas
La ilustración 167 se agregó a las instrucciones creadas para explicar como a partir del
conjunto de palabras se genera una acción o elemento.
3. Pruebas de impacto educativo
Ilustración 168 Login del estudiante para el usuario 7
En la ilustración 168 se visualiza el ingreso a la plataforma del usuario 7 como estudiante.

192
Ilustración 169 Solución del reto del estudiante para el usuario 7

para el estudiante, en el cual el estudiante debe arrastrar las fichas que contienen las palabras
y organizar en el orden que corresponde para dar solución al reto planteado.
En la ilustración 170 se visualiza el ingreso a la plataforma del estudiante para el usuario

8 con el rol de estudiante.

193

para el usuario 8.
En la ilustración 172 se visualiza el ingreso a la plataforma del usuario 9 como estudiante.
Ilustración 173 Solución de reto del estudiante para el usuario 9

para el usuario 9.
194
Ilustración 174 Registro del estudiante para el usuario 10
En la ilustración 174 se evidencia el proceso de creación del usuario para la estudiante 10.
Ilustración 175 Editar perfil del estudiante para el usuario 10

195
En la ilustración 175 se evidencia la visualización del perfil para de la estudiante, en el

cual se evidencia que su progreso en los cursos y logros al ingresar por primera vez en la
aplicación es 0%.

para el usuario 10.
Para validar el proceso de comprensión y aprendizaje en la plataforma, se llevaron a cabo

7 pruebas con individuos sin conocimientos previos en programación. Es importante
destacar que la plataforma fue diseñada para apoyar a los estudiantes en el curso y su
objetivo es reforzar los temas aprendidos en clase. Por lo tanto, se espera que los usuarios
que interactúen con la aplicación tengan un nivel mínimo de conocimientos previos antes
de utilizarla.
A continuación, en la Tabla 45 se describe la ficha técnica realizada para la prueba

realizada.
Tabla 45 Ficha técnica prueba de validación de conocimientos
Universo Hombre y mujeres de 16 años o más.
Evaluar el proceso de comprensión y aprendizaje del contenido
Objetivo del estudio de la plataforma en individuos sin conocimientos previos de
programación.
Técnica de Prueba realizada de manera virtual, por medio de la herramienta
recolección de datos Google Forms.
Tamaño de la 7 usuarios
muestra
Prueba realizada Angela Maria Acosta Ramirez y Juan Pablo Caro Vargas
por
1. ¿Qué es un algoritmo?
Preguntas del 2. ¿Crees que los algoritmos son utilizados en nuestro diario
formulario vivir?
3. Da un ejemplo de un algoritmo en la vida real.
196
Se ha decidido seleccionar a personas sin conocimientos previos en temas de tecnología o

programación para realizar la prueba. Con el fin de medir su progreso, se ha implementado
un breve cuestionario para evaluar su nivel de conocimientos antes de comenzar el desafío,
y luego compararlo con lo que han aprendido después de completarlo.
El cuestionario estuvo compuesto por las siguientes preguntas:
• ¿Qué es un algoritmo?
• ¿Crees que los algoritmos son utilizados en nuestro diario vivir?
• Da un ejemplo de un algoritmo en la vida real.
Las tres preguntas fueron creadas con el objetivo de evaluar el conocimiento y la

comprensión del estudiante sobre el tema de los retos propuestos en la plataforma, que son
los algoritmos.
La primera pregunta "¿Qué es un algoritmo?" busca que el estudiante demuestre su

comprensión básica de lo que es un algoritmo.
La segunda pregunta "¿Crees que los algoritmos son utilizados en nuestro diario vivir?"
tiene como objetivo evaluar si el estudiante puede realizar analogías e identificar la
presencia de algoritmos en un entorno diferente al de la programación y comprender la
importancia de su uso en la vida diaria.
Por último, la tercera pregunta "Da un ejemplo de un algoritmo en la vida real", busca
evaluar la capacidad del estudiante para aplicar el conocimiento teórico de los algoritmos a
situaciones prácticas, lo cual demuestra una comprensión profunda del tema.
El proceso de selección y creación de estas preguntas se realizó tomando en cuenta los

objetivos de aprendizaje de los retos presentes en el curso de la plataforma. Se buscó que
las preguntas fueran claras, concisas y evaluaran aspectos relevantes del tema, de manera
que permitieran una evaluación completa y precisa del conocimiento del estudiante.
Ilustración 177 Validación de conocimientos pregunta No.1

197
En la ilustración 177 se visualiza la respuesta obtenida por los usuarios para la pregunta
No.1 del cuestionario “Validación de conocimientos”.
198
En el Anexo 3 se muestra las respuestas antes y después de cada usuario al interactuar con
la plataforma y validar los conocimientos adquiridos.
Los resultados obtenidos por los encuestados indican que, antes de utilizar la plataforma,
muchos de ellos no comprendían claramente el concepto de algoritmo. Sin embargo,
después de utilizar la plataforma y resolver el reto propuesto, lograron entender y aplicar el
concepto con mayor facilidad. Esto evidencia que la plataforma cumple efectivamente su
finalidad, la cual consiste en permitir al usuario aprender, conceptualizar y aplicar los
conocimientos a través de los retos propuestos. Es importante destacar que, aunque la
plataforma fue diseñada originalmente como un complemento para los conocimientos
adquiridos en clase, se decidió aplicar la prueba a usuarios sin experiencia previa en
algoritmos y programación, lo que permitió comprobar su efectividad. Los resultados
obtenidos demuestran que la plataforma es útil para mejorar la comprensión y aplicación
de los conceptos de programación y algoritmos, incluso para aquellos sin experiencia previa
en el tema.
4. Pruebas de Usabilidad
Para la realización de las pruebas de la interfaz se validó y verifico la implementación de
los principios heurísticos de usabilidad que establece Jacob Nielsen. De los 10 principios
propuestos se utilizaron los siguientes.
199
Visibilidad del estado del sistema
Ilustración 181 Alertas del sistema
La ilustración 181 hace referencia al cumplimiento del primer principio en el cual establece
que el sistema debe mantener informado al usuario de lo que está sucediendo.
Relación entre el sistema y el mundo real
Ilustración 182 Manejo de errores
La ilustración 182 se observa como el sistema en los servicios devuelve un error diferente
al de las alertas, de esta forma el usuario puede entender en lenguaje natural lo que está
sucediendo.
Consistencia y estándares
200
Ilustración 183 Menú lateral
La ilustración 183 se observa como este principio es aplicado en el menú lateral, el cual se
encuentra presente en todas las pantallas y permite dar acceso a diferentes funcionalidades.
Prevención de errores
Ilustración 184 Prevención de errores
En la ilustración 184 se evidencia la presencia del principio de prevención de errores, ya

que en los formularios y acciones presentes en el sistema se realizan validaciones para evitar
errores en el sistema.
201
Ayuda, diagnóstico y recuperación de errores
Ilustración 185 Errores
En la ilustración 185 se evidencia la presencia de validaciones que se le muestran al usuario

a través de alertas los errores que está realizando, para que el usuario entienda y pueda dar
solución al error que se le está presentando.
Una vez completadas estas pruebas para validar la implementación de los principios
heurísticos de usabilidad propuestos por Jacob Nielsen, se procedió a evaluar la usabilidad,
facilidad de uso y navegación del sistema por parte de los estudiantes. El objetivo era
obtener mejores resultados en términos de experiencia de usuario. Para llevar a cabo esta
evaluación, se seleccionó un grupo de 36 estudiantes inscritos en el curso electiva de
programación, impartido por la docente Simena Dinas. A continuación, en la Tabla 46 se
presentan los resultados obtenidos.
Tabla 46 Ficha técnica encuesta de usabilidad
Encuesta de usabilidad
Población Objetivo programas de Ingeniería de sistemas, Ingeniería multimedia e
Ingeniería electrónica.
Validar la usabilidad, facilidad de uso y navegación de la
plataforma.
Técnica de recolección Encuesta realizada de manera virtual, por medio de la
de datos herramienta Google Forms.
36 estudiantes de tercer y cuarto semestre del curso electiva de
Tamaño de la muestra
programación.
Encuesta realizada por Angela Maria Acosta Ramirez y Juan Pablo Caro Vargas
1. ¿La aplicación es fácil de usar?
2. ¿Las funcionalidades de la aplicación son fáciles de
entender?
3. ¿Los elementos de la interfaz de usuario son fáciles de
entender?
Preguntas del
4. ¿La herramienta es intuitiva?
formulario
5. ¿Las tareas y actividades son fáciles de completar?
6. ¿La aplicación cumple con tus expectativas?
7. ¿La aplicación es amigable y atractiva visualmente?
8. ¿Los elementos visuales son agradables?
9. ¿La aplicación te motiva a seguir jugando y aprendiendo?
202
10. ¿La aplicación es fácil de entender?

11. ¿Te sientes cómodo utilizando la aplicación?
12. ¿La aplicación se ejecuta de manera rápida y fluida?
13. ¿Hay algún retraso o lentitud en la aplicación?
14. ¿La aplicación responde de manera inmediata a tus
acciones?
15. ¿La aplicación carga rápidamente los elementos
necesarios?
16. ¿La aplicación presenta errores técnicos?
17. ¿La aplicación se carga rápidamente?
18. ¿Los elementos de la aplicación se ven correctamente en
tu dispositivo?
Se elaboró el formulario para validar la usabilidad, facilidad de uso y navegación de la

plataforma. Para ello, se utilizó una escala de medición de 1 a 5, que es ampliamente
utilizada en encuestas de usabilidad debido a su simplicidad y facilidad de uso. Esta escala
proporciona un rango limitado de opciones para que los encuestados seleccionen una
respuesta sin tener que pensar demasiado. Al utilizar una escala del 1 al 5, se logra capturar
una amplia gama de opiniones que van desde muy insatisfecho hasta muy satisfecho, lo
que permite obtener datos cuantitativos que facilitan la comparación de resultados.
Ilustración 186 Semestre de los usuarios que realizaron la prueba
La ilustración 186 permite evidenciar que los estudiantes a los cuales se le realizo la prueba
fueron en su mayoría estudiantes de tercer y cuarto semestre, teniendo como resultado para
cada caso un 41.7%.
203
Ilustración 187 Programas que realizaron la prueba
La ilustración 187 evidencia que los estudiantes que realizaron la prueba fueron estudiantes
de ingeniería de sistemas con un 86.1% y estudiantes de ingeniería multimedia con un
13.9%.
Ilustración 188 Rango de edad de los usuarios
La ilustración 188 evidencia que el rango de edad de los usuarios a los que se le realizo la
prueba fue de un 63.9% entre los 19 y 22 años, un 30.6% entre los 15 y 18 años y entre los
23 y 27 años un 2.8% y de 28 años en adelante un 2.8%.
204
Ilustración 189 Nivel Académico de los usuarios
La ilustración 189 se evidencia que el nivel académico de los usuarios es con un 75%
estudiantes de pregrado, 22.2% estudiantes bachilleres y 2.8% de estudiantes de primaria.
Ilustración 190 Facilidad de uso de la aplicación
La ilustración 190 se evidencia que un 61.1% de los usuarios les pareció fácil usar la
plataforma, pero un 38.9% no, por lo que se plantea mejorar el instructivo para la solución
del reto y realizar tutoriales que le permitan al usuario entender mejor el cómo se utiliza la
plataforma.
205
Ilustración 191 Navegación de la aplicación
La ilustración 191 evidencia que un 66.7% de los usuarios les pareció que la navegación
es sencilla pero un 33.3% considera que no, por lo que se plantea la implementación de un
video tutorial que le permita al usuario reconocer las secciones y elementos que cuenta la
plataforma para mejorar la navegación de ella.
Ilustración 192 Funcionalidades de la plataforma
En la ilustración 192 se evidencia que los usuarios no consideran que las funcionalidades
de la aplicación sean fáciles de entender, obteniendo como resultado que un 41.7% le parece
que es medio entendible y no completamente, es por ello por lo que solo un 5.6% entendió
completamente las funcionalidades.
En este caso se realizó una búsqueda que permitiera evidenciar por qué los usuarios
respondieron que no tienen claro la funcionalidad y se encontró que la mayoría de los
estudiantes no entendió el contexto por el cual se desarrolló la plataforma y esto generó
ideas y expectativas diferentes a lo que se encontró en la plataforma. También se encontró
206
que los usuarios les generaba mayor confusión la pantalla de artículos adquiridos, debido a
que no encontraban el uso que se le puede dar a los artículos que el usuario ha comprado,
para esto se planteó como plan de mejora mostrar el avatar del usuario con la prenda
seleccionada para que se lograra evidenciar la utilidad de los artículos que se compran en
la tienda, pero se tiene en cuenta que este requerimiento o sugerencia no hace parte de del
alcance de este proyecto.
Ilustración 193 Elementos de la interfaz
En la ilustración 193 se evidencia que un 25% considera que los elementos de la interfaz
no son tan fáciles de entender, pero un 41.7% evidencia que sí, pero que se pueden mejorar.
En este caso se eliminaron elementos y botones que no tenían una funcionalidad para esta
versión pero que se habían colocado con el fin de mostrar las próximas funcionalidades
que tendría la plataforma en versiones futuras.
Ilustración 194 Intuitividad de la plataforma
La ilustración 194 permite evidenciar que la plataforma se debe mejorar debido a que un
38.9% considera que la aplicación no es completamente intuitiva pero se destaca que un
19.4% considera que si, en este caso se evidencio que elementos como los botones de los
207
retos y la forma en la que se debía de utilizar las tarjetas con las palabras en la solución del
reto no eran entendibles, es por ello que se planteó como solución la implementación de
ToolTip para los botones de los retos en el cual el estudiante evidenciara de manera más
clara y sencilla que la imagen que representa el botón es un reto y que se debe presionar
para ingresar al reto, en el caso de la forma en la que se debe solucionar el reto se mejoró
la descripción de la nota presente en la pantalla y se crearon video tutoriales explicando
cómo se debe de mover los elementos para dar solución a los retos teniendo en cuenta si es
básico o avanzado.
Ilustración 195 Facilidad de completar tareas y actividades
En la ilustración 195 se evidencia que el 69% de los usuarios encuestados consideran que
las tareas y actividades no son fáciles de completar, debido a que consideran que no
entienden cómo se utilizan los elementos para solucionar el reto, para ello se implementaron
imágenes de instrucciones y video tutoriales con el cual el usuario logro comprender de
manera más clara como se debe desarrollar las actividades.
Ilustración 196 Expectativas de la aplicación

208
En la ilustración 196 se observa que, de los usuarios encuestados, el 25% afirma que la
plataforma no cumple con sus expectativas. Por otro lado, un 27.8% considera que cumple
un poco las expectativas, mientras que el 30.6% califica que mediamente cumple las
expectativas. Además, el 11.1% opina que la plataforma cumple con las expectativas, pero
podría mejorar, y finalmente, el 5.6% afirma que la plataforma cumple completamente con
sus expectativas.
En este caso, se tiene en cuenta que los encuestados esperaban que la plataforma les
permitiera programar, ya que ellos tienen experiencia en el tema. Sin embargo, la
plataforma está orientada a usuarios que no tienen conocimientos de programación o que
tienen un nivel muy básico en la materia. En esta versión, el objetivo es que el usuario pueda
comprender y practicar conceptos a partir de ejemplos fáciles de entender y relacionados
con situaciones cotidianas, para que puedan establecer una analogía con los temas.
Ilustración 197 La aplicación es amigable y atractiva visualmente
La ilustración 197 se evidencia que de los usuarios encuestados un 72.2% opina que la
aplicación tiene una interfaz amigable y atractiva visualmente, lo cual les simplifica la
navegación por la página y la interacción se da de manera más cómoda. A su vez, 27.8%
de los encuestados opinan que la aplicación puede tener mejoras en la parte visual para que
sea más atractiva y les permita tener una conexión satisfactoria.
209
Ilustración 198 Agrado de los elementos visuales
En la ilustración 198 se evidencia que más de la mitad de los encuestados (72.3%) califican
entre 4 y 5 los elementos visuales. Esto denota que los componentes visuales llaman la
atención de los usuarios, permitiendo una interacción agradable y motivadora. Por otro lado,
27.7% de los encuestados opinan que la aplicación no es satisfactoria en aspectos visuales
y que se podrían mejorar, para ello se plantea como posible mejora la implementación de
elementos visuales más personalizados como elementos de la tienda y avatares, esto se deba
como trabajo futuro.
Ilustración 199 Motivación de la plataforma
En la ilustración 199 se evidencia que la mayoría (77.8%) de los usuarios encuestados

opinan que la aplicación no motiva a seguir jugando y aprendiendo. En este caso, se tiene
en cuenta que se implementaron funcionalidades que tienen como objetivo mantener al
usuario activo en la plataforma, como lo son la tienda de artículos y los logros por objetivos,
esto con la intención de obtener una mayor interacción, engagement y compromiso por
parte del estudiante. Además, se dejaron funcionalidades a futuro como la personalización
de un avatar, lo que permitirá sentar las bases para nuevos desarrollos que permitan crecer
el proyecto.
210
Ilustración 200 Facilidad de entender la aplicación
La ilustración 200 muestra que un gran porcentaje de usuarios (80.6%) considera que la
aplicación no es suficientemente intuitiva. Solo un 8.3% de los encuestados opinan que sí
lo es, mientras que un 11.1% no estuvieron de acuerdo.
Para solucionar este problema, se han implementado diferentes estrategias, como la

creación de instructivos y tutoriales, para que el usuario pueda guiarse en cualquier
momento que lo necesite. De esta manera, se busca brindar una experiencia más fácil y
agradable al interactuar con el sistema.
Ilustración 201 Comodidad de la utilización de la plataforma
En la ilustración 201 se puede observar que la mayoría de los estudiantes encuestados

(74.9%) considera que la aplicación no es cómoda para interactuar con ella, mientras que
solo una minoría (25%) opina lo contrario.
Para abordar esta problemática, se ha mejorado la disposición de los iconos que representan
los retos y se han implementado textos informativos que ayudan al usuario a comprender
211
las distintas funcionalidades que ofrece la plataforma. De esta manera, se espera mejorar la
experiencia de usuario y aumentar la satisfacción al utilizar la aplicación.
Ilustración 202 Rapidez y fluidez de la plataforma
En la ilustración 202 se puede observar que más del 50% de los usuarios encuestados han
respondido con una puntuación de 4 o 5, lo que indica que están satisfechos con la fluidez
de la aplicación. No obstante, un 44.4% de los encuestados considera que la fluidez de la
aplicación aún puede mejorar.
Para mejorar la fluidez de la aplicación, se han llevado a cabo diversas medidas. Se han
eliminado líneas de código innecesarias, se han corregido errores que afectaban el
rendimiento del servidor y se han eliminado códigos problemáticos que podrían afectar la
experiencia del usuario. De esta manera, se espera ofrecer una experiencia más fluida y
satisfactoria para el usuario.
En conclusión, se han identificado diversas áreas de mejora en la aplicación a partir de la

retroalimentación proporcionada por los usuarios. Se han implementado diversas medidas
para abordar estas problemáticas y mejorar la experiencia del usuario.
212
Ilustración 203 Retraso o lentitud de la plataforma
En la ilustración 203 se puede observar que el 69,4% de los estudiantes encuestados no

experimentó problemas significativos en el rendimiento de la aplicación, como lentitud o
retrasos. No obstante, un 30.6% reportó haber experimentado errores con el rendimiento de
la aplicación.
Para abordar este problema, se implementaron diversas estrategias para optimizar el

rendimiento de la aplicación. Se mejoró la calidad del código reduciendo el código
innecesario y corrigiendo el código que pudiera generar problemas. También se eliminaron
los errores de programación, conocidos como bugs, que afectan el rendimiento de la
aplicación.
Ilustración 204 Respuesta inmediata de las acciones dentro de la plataforma
En la ilustración 204 se puede observar que la mayoría de los encuestados considera que
la aplicación responde de manera inmediata a las acciones que ejecutan, con un 66.6% de
ellos dando una puntuación de 4 o 5. Sin embargo, un 33.3% opina que la aplicación no
responde de manera óptima, lo que indica que aún hay espacio para mejorar.
213
Para garantizar un mejor rendimiento de la aplicación, se han seguido lineamientos de Clean

Code y se ha analizado cuidadosamente el código en busca de posibles líneas innecesarias
o que pudieran afectar el rendimiento. De esta manera, se busca siempre optimizar la
aplicación y brindar una experiencia satisfactoria al usuario.
Ilustración 205 Carga de los elementos
En la ilustración 205 se puede evidenciar que la mayoría de los encuestados (52.8%) está
de acuerdo en que la aplicación carga los elementos necesarios de manera suficientemente
rápida. Por otro lado, un 47.2% de los encuestados piensa que la aplicación no carga los
elementos suficientemente rápido o simplemente no los carga rápidamente.
Para optimizar el rendimiento de carga de la aplicación se siguió la estrategia de optimizar

el código para reducir la cantidad de bugs que pudieran afectar el rendimiento y garantizar
que la aplicación cargue los elementos necesarios con mayor rapidez.
Ilustración 206 Errores técnicos

En la ilustración 206 se puede observar que el 41.7% de los encuestados afirmaron que la
aplicación presenta errores técnicos, mientras que el 11.1% afirmó que la aplicación no
214
muestra fallas técnicas y el 25% de ellos calificó que los errores se presentan de manera
moderada.
Para abordar esta situación, se tomó en cuenta que las validaciones de usuarios, tanto de
profesores como de estudiantes, no estaban funcionando de manera óptima. Por lo tanto, se
decidió corregir todas las validaciones de los usuarios para garantizar que el funcionamiento
técnico sea de mayor calidad. Además, se revisó y se hizo mantenimiento constante de la
infraestructura y los servidores para garantizar su buen funcionamiento y evitar fallos
técnicos. También se establecieron protocolos de monitoreo y seguimiento en caso de
presentarse errores para poder solucionarlos rápidamente.
Ilustración 207 Carga de la aplicación
En la ilustración 207 se evidencia que un 66.7% de los encuestados opinan que la

aplicación carga rápidamente mediante una calificación de 4 y 5, el cual permite obtener
retroalimentación del comportamiento de la aplicación, ayudando a disminuir el número de
abandonos y a reducir el tiempo de espera entre funcionalidades. Por otro lado, una pequeña
parte de los encuestados (33.3%), considera que la aplicación puede mejorar en tiempos de
respuesta.
215
Ilustración 208 Visualización de elementos en los dispositivos

En la ilustración 208, se puede observar que la mayoría de los encuestados (61,1%) calificó
esta categoría entre 1 y 2, lo que indica que la aplicación presentaba problemas de
visualización en diferentes dispositivos, lo que dificultaba la navegación y generaba
incomodidad en la experiencia del usuario. Además, la mala visualización de los elementos
de la página era un problema importante.
Para solucionar este problema, se implementó una estrategia de desarrollo enfocada en la

optimización de la visualización de la aplicación en diferentes navegadores y dispositivos.
De esta manera, se garantizó una disposición adecuada de los componentes en cualquier
formato que el usuario pueda utilizar.
Ilustración 209 Usuarios conectados simultáneamente

216
La ilustración 209 permite evidenciar de la prueba realizada con 20 usuarios conectados

simultáneamente y con la cual se obtuvieron algunos errores detectados.
Después de realizar la prueba, se identificaron varios fallos y se encontraron oportunidades

de mejora en la aplicación. A continuación, en la Tabla 47 se detalla los fallos encontrados,
las áreas potenciales de mejora identificadas durante la evaluación y el estado de corrección.
Se indica si se realizó la corrección o, en caso contrario, se considera como trabajo futuro
pendiente de abordar.
Tabla 47 Resultados de prueba y oportunidades de mejora
Estado de
Fallos encontrados
corrección
No se encontraron validaciones en campos como nombre, Corregido
apellido y NickName de registro de estudiantes, en el que
limitaba el ingreso de caracteres especiales.
Error al intentar actualizar los datos de un docente Corregido
Problema de visualización de las tarjetas con las palabras Corregido
presentes en el reto, si se dejaban l
íneas intermedias vacías.
Errores en consola visibles para el usuario Corregido
Oportunidades de mejora Estado de corrección
Mejorar la visualización de la restricción de longitud mínima de la Corregido
contraseña.
Implementar un mejor diseño responsive, especialmente para No corregido (Trabajo
dispositivos móviles. Futuro)
Clarificar los mensajes de error en la solución del reto para indicar su Corregido
origen.
5. Pruebas Funcionales orientadas a los Videojuegos

La técnica de pruebas conocida como Prueba de Funcionalidad tiene como objetivo
verificar que el juego funcione tal y como ha sido diseñado y especificado. Esta técnica
resulta muy útil para identificar errores que puedan presentarse en el juego, como bloqueos,
congelamientos o problemas en la progresión del juego.
Para llevar a cabo la Prueba de Funcionalidad, se selecciona un grupo de usuarios que

prueban la aplicación de manera libre y ejecutan las funcionalidades de acuerdo con las
instrucciones propuestas por la aplicación. A través de esta técnica, es posible identificar y
solucionar problemas presentes en el juego, lo que garantiza que el juego funcione
adecuadamente y satisfaga las expectativas del usuario.
En resumen, la Prueba de Funcionalidad es una técnica de prueba esencial en el desarrollo

de juegos, ya que permite garantizar que el juego cumpla con los requisitos establecidos y
que la experiencia del usuario sea satisfactoria. La utilización de esta técnica con un grupo
de usuarios permite identificar y resolver cualquier error que pudiera presentarse en el
juego.
217
6. Pruebas Ad Hoc
El método Ad hoc es una técnica de pruebas que se utiliza para realizar pruebas aleatorias
en las que se busca identificar errores y validar el correcto funcionamiento del juego. En
este caso, se llevó a cabo la prueba Ad hoc con un grupo de usuarios que probaron la
aplicación libremente y ejecutaron las diferentes funcionalidades sin saber que podrían
generar un error. El objetivo de esta técnica es identificar cualquier problema o error en el
juego que pudiera pasar desapercibido durante las pruebas de rutina.
Ilustración 210 Prueba Ad Hoc para la solución del reto
En la ilustración 210 se evidencia la prueba realizada para el caso en que el estudiante no

ingresa de manera correcta la solución del reto.
Ilustración 211 Mensaje de Error de la solución del reto
En la ilustración 211 se evidencia los errores que son mostrados al estudiante cuando ha
ingresado de manera incorrecta la respuesta para la solución del reto.
218
Ilustración 212 Posicionamiento incorrecto de los elementos
En la ilustración 212 se evidencia la mala ubicación de los elementos para dar solucón al
reto.
Ilustración 213 Error por orden inadecuado de los elementos
En la ilustración 213 se evidencia el mensaje de error que se le muestra al estudiante

cuando ubica de manera incorrecta un elemento para dar solución al reto.
Ilustración 214 Respuesta correcta de solución del reto

219
En la ilustración 214 se evidencia el mensaje de éxito que es mostrado al estudiante cuando

realizo de manera correcta el reto.
La prueba Ad hoc resulta muy útil para asegurar que el juego funcione de manera adecuada
en diferentes escenarios y situaciones impredecibles. A través de esta técnica, se pueden
identificar y solucionar errores que no se hayan detectado durante las pruebas de rutina, lo
que garantiza que la aplicación funcione de manera óptima y satisfaga las expectativas del
usuario.
En conclusión, el método Ad hoc es una técnica importante en el desarrollo de juegos, ya

que permite identificar y solucionar errores que no se hayan detectado durante las pruebas
regulares. La utilización de esta técnica con un grupo de usuarios que prueben la aplicación
de manera libre ayuda a asegurar que el juego funcione adecuadamente y que la experiencia
del usuario sea óptima.
I. Nivel de Madurez de la tecnología TRL

El nivel de madurez de una tecnología, también conocido como TRL (Technology
Readiness Levels) en inglés, se refiere al grado de desarrollo y estabilidad que ha alcanzado.
Este nivel se evalúa en función de su capacidad para cumplir con las expectativas y
necesidades de los usuarios, así como su capacidad de evolución y adaptación a los cambios
del mercado o las demandas de los usuarios. [60].
Ilustración 215 Nivel de Madurez de la Tecnología
El nivel de madurez tecnológica del proyecto se ha evaluado y determinado como TRL 4,

como se muestra en la ilustración 215. Esta evaluación se basa en investigaciones previas
realizadas por Paola Andrea Bóxiga, Luisa Brigitte González, Luisa Fernanda Canaval
220
García y Juan David Arboleda en versiones anteriores del proyecto, así como en
investigaciones adicionales realizadas para la versión actual.
La asignación del TRL 4 se debe a las transformaciones realizadas en la herramienta

existente y la incorporación de nuevas funcionalidades. Se llevó a cabo una evaluación
adicional de la plataforma con usuarios para determinar su nivel de madurez tecnológica.
Los resultados de esta evaluación demostraron un avance significativo en el desarrollo de
la tecnología. Aunque no se pudieron realizar las pruebas requeridas con los usuarios finales
definidos para la plataforma debido a restricciones de tiempo, los resultados obtenidos hasta
el momento respaldan la progresión hacia un nivel de madurez más avanzado. Esta
justificación se basa en una combinación de investigaciones previas realizadas en versiones
anteriores del proyecto y la investigación adicional realizada para la versión actual.
J. Acceso a la Aplicación
Para acceder a la plataforma, es necesario hacer clic en el siguiente enlace:
https://languageconquers-740dc.web.app/
Una vez dentro, los usuarios (tanto estudiantes como docentes) deben introducir los correos
electrónicos y contraseñas correspondientes, detallados a continuación:
Usuario o Estudiante
Login: [email protected]
Password: Morita1234
Usuario o Docente
Password: Morita1234
Para ingresar a la aplicación como administrador, se debe acceder desde el botón de Google.
A continuación, utiliza las siguientes credenciales para iniciar sesión:
Administrador
Descripción: Este usuario tiene acceso al manejo de los principales datos de la plataforma.
Password: LanguageConquers2022
Las instrucciones previamente mencionadas le guiarán para acceder exitosamente a la

aplicación.
K. Estándares de ingeniería empleados durante el proyecto

Descripción de los estándares, o buenas prácticas ampliamente difundidas y aceptadas por la
comunidad, que hayan sido empleados durante el desarrollo del proyecto o en su
documentación.
221
• DeDalus [4]: Este método para el diseño de la estrategia de juego implementada en la

plataforma, está conformado por tres componentes (Procedimiento de ambiente de juego,
ambiente de juego y medición y evaluación de la estrategia diseñada).
• IEEE: Es una organización profesional que promueve innovación y excelencia en la
ingeniería, la cual establece estándares técnicos.
222
VI. ANALISIS DE RESULTADOS
A. Análisis de Impactos
La propuesta de ingeniería discutida en el presente documento tiene diferentes impactos en
el escenario en el cual se contextualiza el problema. Estos impactos pueden ser analizados
y discutidos desde las siguientes dimensiones o perspectivas: ambiental, social, económica,
técnica, e individual.
• Ambiental: El diseño de la aplicación y su forma de operar contribuyen a la protección

del medio ambiente al reducir el consumo de papel. La herramienta proporciona
información relevante en formatos multimedia para los estudiantes, lo que disminuye
la necesidad de utilizar material impreso como apoyo en el curso.
• Social: Este proyecto tiene un impacto social significativo al apoyar el proceso de

enseñanza de los jóvenes en programación y al disminuir los niveles de deserción
universitaria debido a la dificultad que puede generar este tema y la consecuente
desmotivación en los estudiantes de primeros semestres de ingeniería. Además,
contribuye a mejorar la educación en programación para muchos jóvenes interesados
en desarrollar habilidades en este campo a nivel profesional.
• Económico: Este proyecto proporciona apoyo económico a padres de familia,

estudiantes, profesores e instituciones al reducir el tiempo dedicado a la práctica y el
trabajo en equipo, gracias a la plataforma virtual. Esto contribuye a disminuir los gastos
por parte de las familias y las instituciones en el aprendizaje continuo.
• Técnica: Se llevó a cabo un estudio previo en el semillero de investigación Lidis para

analizar la dificultad que muchos estudiantes de primer semestre enfrentan en la
programación. Este estudio incluyó la revisión del marco teórico, la identificación de
las estrategias necesarias para obtener los resultados esperados en la plataforma, así
como la evaluación del funcionamiento y estado de la plataforma anterior. A partir de
esta investigación, se desarrolló un nuevo enfoque que conserva la esencia del juego,
pero brinda mayor interacción del estudiante dentro de la plataforma. Para la
estimulación de la colaboración y contribución en el proceso de aprendizaje de los
estudiantes, se utilizó la estrategia de juego DeDalus, mientras que la evaluación de la
usabilidad y la experiencia de usuario fueron factores clave en el desarrollo de la
plataforma. En términos técnicos, esta plataforma apoya el proceso de enseñanza en el
curso de fundamentos de programación en la universidad y mejora la experiencia de
los estudiantes en este tema.
• Individual: El objetivo principal de este proyecto es mejorar y fortalecer los

conocimientos de los estudiantes en programación, desarrollando sus habilidades
académicas y blandas a través de la participación y el autoaprendizaje. Esto se traduce
en un beneficio para el docente al transmitir los temas de manera asertiva y dinámica,
mejorando la experiencia educativa de ambas partes. La plataforma fomenta la
motivación de los estudiantes y les permite experimentar resultados positivos en su
223
aprendizaje, lo que contribuye a reducir la tasa de deserción y desarrollar habilidades

y capacidades para proponer y desarrollar proyectos de software que generen valor en
la sociedad. Además, aumenta la visibilidad del programa y de los estudiantes en la
industria de TI.
Se llevaron a cabo pruebas funcionales, de usabilidad y de impacto educativo para

validar el cumplimiento del objetivo del proyecto. Los resultados demostraron que la
herramienta es efectiva para apoyar el proceso de aprendizaje, pero se identificó la
necesidad de mejorar los elementos gráficos para lograr un mayor impacto en los
estudiantes. En particular, se espera que la incorporación de elementos animados en la
plataforma contribuya a crear un ambiente más atractivo y estimulante para el
aprendizaje.
B. Análisis de diseño de componentes

Durante el proceso de ingeniería de software realizado se utilizaron vistas de alto nivel que
permitían describir y detallar al sistema, sus funcionalidades e interacción de los usuarios
con ella:
• Los diagramas de contexto permiten tener una vista de alto nivel del flujo de datos
dentro de un sistema.
• Los diagramas de contenedores amplían la vista del sistema y permiten visualizar los
componentes que componen el sistema de software.
• Los diagramas de componentes se utilizan para visualizar como están estructurados u
organizados los componentes de un sistema y como se relacionan entre ellos.
• Los diagramas o modelos entidad relación permiten representar a nivel conceptual los
datos que componen el sistema y como interactúan entre sí.
• Los diagramas dinámicos en el modelo C4 se utilizan para representar un proceso o
funcionalidad especifica dentro del sistema mediante sus componentes.
C. Cumplimiento de Objetivos
A través de las investigaciones realizadas y el desarrollo del proyecto, se logró recopilar

información valiosa acerca de los mecanismos de aprendizaje más efectivos para mejorar
el nivel de programación y el desarrollo de habilidades en el pensamiento algorítmico. A
partir de estos resultados, se han diseñado y aplicado retos que buscan mejorar la
experiencia de los estudiantes durante el curso de fundamentos de programación y fomentar
su crecimiento en estas habilidades.
Para llevar a cabo esta tarea, se ha creado una simulación de un entorno de desarrollo
integrado (IDE) básico, el cual permite a los estudiantes familiarizarse con su
funcionamiento de una manera sencilla. Al realizar pruebas de usabilidad, se ha
comprobado que el diseño y la implementación de los retos han sido exitosos en cumplir
las expectativas finales, además, se han agregado elementos de valor a través de nuevas
propuestas que buscan mejorar la experiencia de los estudiantes en la plataforma.
224
Se realizaron pruebas en el impacto educativo de la plataforma con usuarios que no tenían

conocimientos previos sobre el tema. Estas pruebas permitieron validar su funcionamiento
y confirmar que la plataforma proporciona información suficiente para que el estudiante
pueda resolver el reto sin conocimientos previos. Además, la plataforma refuerza las
habilidades y conocimientos de los estudiantes que ya se encuentran en el curso de
programación.
D. Conclusiones
• Los resultados de la encuesta realizada sobre los mecanismos de aprendizaje de los

estudiantes demostraron que los estudiantes están interesados en mejorar sus
habilidades técnicas y prefieren ciertos medios para adquirir y reforzar sus
conocimientos. En la actualidad, la tecnología es esencial para resolver problemas en
diversos campos, por lo que las metodologías de enseñanza han evolucionado para
centrarse en situaciones reales que los estudiantes pueden encontrar en el ámbito
profesional. Esto les permite reflexionar sobre los temas aprendidos y proponer
soluciones eficaces.
• La propuesta de una plataforma gamificada para el curso de Fundamentos de

Programación tiene como objetivo reforzar los conocimientos adquiridos en clase, en
esta versión se abordó el tema de algoritmos. Al plantear problemas cotidianos, se
busca despertar la curiosidad para proponer soluciones innovadoras. Esta iniciativa
permite a los estudiantes mejorar sus habilidades técnicas y desarrollar su capacidad
para resolver problemas en situaciones reales.
• La propuesta de implementar el IDE junto con el material de apoyo tiene como objetivo
ayudar al usuario a complementar sus conocimientos y aplicarlos de manera exitosa
para resolver el reto.
E. Experiencia de diseño en ingeniería de software

Lo presentado en las secciones de Análisis de Impactos, Utilización de herramientas y
Análisis de diseño de componentes se argumenta como una evidencia de que, a lo largo del
proceso de formación de la carrera de ingeniería de sistemas, que culmina con esta
experiencia de proyecto de grado, se lograron alcanzar los siguientes resultados de
aprendizaje:
• Capacidad para identificar, formular y resolver problemas complejos de ingeniería

mediante la aplicación de principios de ingeniería, ciencia y matemáticas.
• Capacidad para aplicar diseño de ingeniería en la producción de soluciones que

satisfagan necesidades específicas para satisfacer un problema o proveer un servicio.
• Capacidad de autoaprendizaje teniendo en cuenta el problema planteado para análisis

y obtención de una solución óptima.
225
• Capacidad de manejo y gestión de tecnologías que impactan en la calidad del sistema

y sus funciones.
F. Trabajos Futuros
Se proponen los siguientes trabajos futuros para el proyecto:
• Implementar mejoras en el diseño de la aplicación, a través de la revisión del diseño

actual para identificar los puntos débiles y mejorarlos, investigando nuevas tendencias
y mejores prácticas de diseño, teniendo en cuenta las retroalimentaciones de los
usuarios.
• Versión mejorada de la plataforma que contengan un mayor contenido para mejorar la
experiencia del usuario, a través del desarrollo de nuevas funcionalidades que mejoren
la experiencia del estudiante y permita aumentar la interacción con la plataforma.
• Creación de nuevos retos con mayor complejidad con el objetivo de mejorar la
capacidad de análisis y pensamiento algorítmico de los estudiantes.
• Incorporar funcionalidad de trabajo colaborativo en la realización de los retos, con el
objetivo de promover interacción entre los estudiantes.
• Implementar un foro dentro de la plataforma, con el objetivo de ayudar a los estudiantes
a resolver dudas y compartir conocimientos.
226
VII. REFERENCIAS
[1] L. . T. M. Chalpartar Nasner, A. M. Fernández Guzmán, S. Betancourth Zambrano y Y. A. Gómez Delgado, «Deserción
en la población estudiantil universitaria durante la pandemia, una mirada cualitativa,» Revista Virtual Universidad
Católica del Norte, nº 66, pp. 37-62, 2022.
[2] A. González, «La importacia en la vida diaria de aprender a programar,» 11 Octubre 2017. [En línea]. Available:
https://news.microsoft.com/es-xl/features/la-importancia-la-vida-diaria-aprender-programar/. [Último acceso: 05 Mayo
2023].
[3] M. A. Gómez-Martín, P. P. Gómez-Martín y P. A. González-Calero, «Aprendizaje basado en juegos,» REVISTA DE

COMUNICACIÓN Y NUEVAS TECNOLOGÍAS, vol. 2, 2012.
[4] J. L. Jurado Muñoz, J. Collazos y C. Gutierrez, DEDALUS, UN MÉTODO AGIL PARA EL DISEÑO DE., Cali
(Colombia); Popayán (Colombia); Granada (España): Universidad San Buenaventura; Universidad del Cauca;
Universidad de Granada.
[5] F. Gallego, R. Molina y F. Llorens, «Gamificación: El poder del juego en la gestión empresarial y en la conexión con los
clientes,» p. 152, 2013.
[6] J. C. Sandí Delgado y P. A. Bazán, «Diseño de juegos serios: Análisis de metodologías,» e-Ciencias de la Información,
vol. 11, nº 2, 2021.
[7] J. M. Prieto-Andreu, J. D. Gómez-Escalonilla-Torrijos y E. Said-Hung, «Gamificación, motivación y rendimiento en

educación: Una revisión sistemática,» Educare Electronic Journal, vol. 26, nº 1, pp. 1-23, 2022.
[8] C. A. Franco, J. A. Ordoñez y J. E. Ariza, «La enseñanza de la programación en la educación básica y media de
Colombia,» Revista Colombiana de Computación, vol. 15, nº 3, pp. 37-46, 2014.
[9] C. Sáez Fernández, G. Viera López y D. Pérez Marín, «Propuesta metodológica de la enseñanza de la programación en
Educación Infantil con Cubetto,» Revista Iberoamericana de Informática Educativa, nº 28, pp. 1-8, 2018.
[10] P. M. Domínguez Osuna, M. A. Oliveros Ruiz, M. A. Coronado Ortega y B. Valdez Salas, «Retos de ingeniería: enfoque
educativo STEM+A en la revolución industrial 4.0,» Innovación Educativa, vol. 19, nº 80, p. 18, 2019.
[11] R. B. Toma y A. García Carmona, «De STEM nos gusta todo menos STEM. Análisis crítico de una tendencia educativa
de moda,» ENSEÑANZA DE LAS CIENCIAS, vol. 1, nº 39, pp. 65-80, 2021.
[12] J. Insuasti, «Problemas de enseñanza y aprendizaje de los fundamentos de programación,» Revista educación y desarrollo
social, vol. II, nº 10, pp. 234-246, 2016.
[13] C. R. Reinales, «PENSAMIENTO COMPUTACIONAL EN EDUCACIÓN INFANTIL Y PRIMARIA: UNA

REVISIÓN SISTEMÁTICA,» 2020.
[14] «Codecademy,» [En línea]. Available:

https://www.codecademy.com/?g_network=g&g_productchannel=&g_adid=528849219280&g_locinterest=&g_keywor
d=codecademy&g_acctid=243-039-7011&g_adtype=&g_keywordid=aud-1122464209402:kwd-
41065460761&g_ifcreative=&g_campaign=account&g_locphysical=1029334&g_adgrou. [Último acceso: 8 05 2023].
227
[15] P. A. Bóxiga y L. B. González, Diseño de usabilidad para la plataforma Language Conquers, Cali: Universidad San
Buenaventura, 2018.
[16] L. F. C. Garcia, Implementación de una herramienta de apoyo basada en principios de Gamificación para la mejora de
la motivación en los procesos de aprendizaje de la programación en los primeros años de Ingeniería, Cali: Universidad
San Buenaventura, 2019.
[17] J. D. Arboleda, Diseño e implementación de una herramienta LMS “Language Conquers”, utilizando lineamientos de
experiencia de usuario y estrategias de gamificación que incentivan el proceso de aprendizaje en estudiantes de
programación., Cali: Universidad San Buenaventura Cali, 2020.
[18] M. C. Lozano-Ramírez, «El aprendizaje basado en problemas en estudiantes universitarios,» Tendencias Pedagógicas,
2020.
[19] S. Zepeda Hernández, R. Abascal Mena y E. Ornelas, «INTEGRACIÓN DE GAMIFICACIÓN Y APRENDIZAJE

ACTIVO EN EL AULA,» Ra Ximhai, p. 12, Diciembre 2016.
[20] C. Aguilera Ruiz, A. Manzano Leó, . I. Martínez Moreno, M. d. C. Lozano Segura y C. Casiano Yanicelli, «EL MODELO
FLIPPED CLASSROOM,» International Journal of Developmental and Educational Psychology, vol. 4, nº 1, p. 7, 2017.
[21] A. Bustos Jiménez, V. Castellano Hinojosa, J. Calvo Ramos, R. Mesa Sánchez, V. J. Quevedo Blasco y C. Aguilar
Mendoza, «El aprendizaje basado en retos como propuesta para el desarrollo de las competencias clave,» Journal of
Parents and Teachers, 2019.
[22] J. A. Moreira-Cedeño, L. C. Zambrano-Montes y M. Rodríguez-Gámez, «El modelo Design thinking como estrategia
pedagógica en la enseñanzaaprendizaje en la educación superior,» Polo del Conocimiento, 2021.
[23] M. C. S. Valdivia, «pucp,» 2020. [En línea]. Available:

https://tesis.pucp.edu.pe/repositorio/bitstream/handle/20.500.12404/17477/SANTILLANA_VALDIVIA_MARIO_C%c
3%89SAR.pdf?sequence=1&isAllowed=y. [Último acceso: 11 Mayo 2023].
[24] «Desarrollo del pensamiento computacional a través de la metodología de aprendizaje basado en juegos, integrado a
Microsoft Teams,» [En línea]. Available: https://docs.microsoft.com/es-mx/learn/modules/aprendizaje-basado-juegos-
gie/que-es-aprendizaje-basado-juegos. [Último acceso: 17 Mayo 2022].
[25] M. Xu1, . Y. Luo, Y. Zhang, R. Xia, H. Qian y X. Zou, «Game-based learning in medical education,» Frontiers, Public
Health, pp. 1-9, 2023.
[26] J. L. Plass, B. D. Homer y C. K. Kinzer, «Foundations of Game-Based Learning,» EDUCATIONAL PSYCHOLOGIST,

vol. IV, nº 50, pp. 258-283, 2015.
[27] «AulaPlaneta,» 21 Julio 2015. [En línea]. Available: http://www.aulaplaneta.com/2015/07/21/recursos-tic/ventajas-del-

aprendizaje-basado-en-juegos-o-game-based-learning-gbl/. [Último acceso: 15 Mayo 2022].
[28] A. F.-P. Cesteros, «Las plataformas e-learning para la enseñanza,» p. 33, 2009.
[29] P. Pineda y A. Castañeda, «Los LMS como herramienta colaborativa en educación Un análisis comparativo de las grandes
plataformas a nivel mundial,» V Congreso Internacional Latina de Comunicación Social , p. 13, 2013.
228
[30] A. Fernández-Mesa, J. Olmos Peñuela y J. Alegre, « Pedagogical value of a common knowledge repository for Business
Management courses,» d'innovació educativa, pp. 39-47, 2016.
[31] S. Deterding, «Gamification: designing for motivation,» Interactions, pp. 14-17, 2011.
[32] K. Werbach y D. Hunter, The Gamification Toolkit: Dynamics, Mechanics, and Components for the Win - Kevin
Werbach, Dan Hunter, 2015.
[33] «Evolución,» 18 Agosto 2020. [En línea]. Available: https://www.evolucion.co/los-tipos-de-jugadores-en-gamificacion/.

[Último acceso: 18 Mayo 2022].
[34] P. Morville y P. Sullenger, «Ambient Findability: Libraries, Serials, and the Internet of Things,» Serials Librarian, nº 58,
pp. 53-38, 2010.
[35] R. M. Kelly, . A. Przybylsk y N. Weinstein, «The Player Experience of Need Satisfaction (PENS) model: A theoretical
framework for exploring video games and wellbeing,» Journal of Computer-Mediated Communication, vol. 20, nº 3, pp.
267-281, 2014.
[36] J. L. G. Sanchez, «Jugabilidad. Caracterización de la experiencia del jugador en videojuegos,» Universidad de Granada,
2010.
[37] F. Mortera Gutiérrez, M. Martín Blas y F. Fernández García, «Understanding the Student Experience: A Review of the
Literature,» Higher Education Research & Development, 2018.
[38] ISO25000, «ISO 25000 Calidad del Producto de Software,» ISO 25000 Calidad del Producto de Software, 2017.
[39] W. Sanchez, «La usabilidad en Ingeniería de Software: definición y caracteristicas,» Ing-novación, nº 2, p. 15, 2011.
[40] M. C. M. Macías, «LA IMPORTANCIA DE LA MOTIVACIÓN EN EDUCACIÓN INFANTIL,» Temas para la

educación, pp. 1-5, 2011.
[41] R. M. Ryan y E. L. Deci, «Intrinsic and Extrinsic Motivations: Classic Definitions and New Directions,» Contemporary
Educational Psychology, nº 25, p. 54–67, 2000.
[42] E. F. Llanga Vargas, M. A. Silva Ocaña y J. J. Vistin Remache, «Motivación extrínseca e intrìnseca en el estudiante,»
Revista Atlante: Cuadernos de Educación y Desarrollo, nº 9, pp. 1-15, 2019.
[43] A. C. Fantini, «Los estilos de aprendizaje en un ambiente mediado por TICs. Herramienta para un mejor rendimiento
académico.,» Core, 2012.
[44] I. Garcia-Rodriguez y C. Pérez-Cornejo, «El uso de Kahoot! como herramienta divertida de autoevaluación para
estudiantes universitarios,» de VIII Congreso de innovación Educativa y Docencia en Red, Valencia, 2021.
[45] K. M. S., «ONLINE COMPILER «REPLIT» USAGE DURING THE STUDY OF THE PROGRAMMING
DISCIPLINE».
[46] J. Magretta, «Why Business Models Matter,» harvard business review, pp. 3-8, 2002.
[47] A. Osterwalder y Y. Pigneur, «Bussines Model Generation,» Academy of Management Perspectives, nº 24(3), pp. 1-8,
2010.
229
[48] Dinngo, «Design Thinking en español,» [En línea]. Available: https://www.designthinking.es/inicio/index.php. [Último
acceso: 18 Mayo 2023].
[49] K. Schwaber y J. Sutherland, «La Guía de SCRUM,» 2020.
[50] W. Lara, «Platzi,» 2015. [En línea]. Available: https://platzi.com/blog/metodologia-scrum-

fases/?fb_comment_id=871870762906431_872603689499805&utm_source=google&utm_medium=cpc&utm_campaig
n=17739691128&utm_adgroup=&utm_content=&gclid=Cj0KCQjwvZCZBhCiARIsAPXbajvceViElK2EYyUhkFlPvz
R5D0jTma0u4ioPVXrYKaRny1. [Último acceso: 16 09 2022].
[51] Team Asana, «Asana,» 21 Octubre 2022. [En línea]. Available: https://asana.com/es/resources/project-management-
triangle. [Último acceso: 15 Mayo 2023].
[52] J. L. Jurado y C. Navia, «Estrategia mejora en el proceso de atracción y mantenimiento de clientes potenciales, mediante
el uso de contenidos basados en experiencias de gamificación,» Guillermo de Ockham, vol. 17, p. 7, 2019.
[53] E. G. HuamanÍ, «La gamificación como estrategia de motivación y dinamizadora de las clases en el nivel superior,»
EDUCACIÓN, Peru, 2021.
[54] Playmotiv, «Conoce los tipos de jugadores de gamificación y cómo cautivarlos,» Abril 2022. [En línea]. Available:
https://playmotiv.com/tipos-de-jugadores-gamificacion/. [Último acceso: 17 Mayo 2022].
[55] L. A. B. Y. A. M. G. JIMÉNEZ, «GAMIFICAR: EL USO DE LOS ELEMENTOS DEL JUEGO EN LA ENSEÑANZA

DE ESPAÑOL,» 2014. [En línea]. Available:
https://cvc.cervantes.es/ensenanza/biblioteca_ele/aepe/pdf/congreso_50/congreso_50_09.pdf. [Último acceso: 10
Octubre 2022].
[56] L. F. Canaval, A. Celi, J. L. Jurado y P. Boxida, «Language Conquers, Estrategia de juego para el aprendizaje de la
programación básica,» Cali.
[57] P. B. L. G. A. B. J.L. Jurado, «USING DEDALUS TO DESIGN A GAME STRATEGY TO IMPROVE MOTIVATION
IN LEARNING PROCESSES OF BASIC PROGRAMMING,» Cali, Colombia, 2017.
[58] J. L. Jurado, «MARCO DE TRABAJO COLABORATIVO PARA APOYAR LA GESTIÓN DE CONOCIMIENTO,

DESDE UN ENFOQUE DE GAMIFICACIÓN, PARA MICRO Y MEDIANAS EMPRESAS DEL SECTOR DE
TECNOLOGÍAS DE LA INFORMACIÓN,» Popayán, 2017.
[59] S. Brown, «c4model,» [En línea]. Available: https://c4model.com/#Notation. [Último acceso: 16 06 2022].
[60] J. M. I. d. A. Quintana, «Niveles de madurez de la tecnologia. Technology Readiness Levels. TRLS. Una Introducción,»
Economía Industrial, vol. 393, 2014.
230
VIII. ANEXOS
• Documento de Requisitos Ágiles

• Manual de usuario
• Cuestionario de validación de conocimientos
• Repositorio código fuente proyecto Backend
• Repositorio código fuente proyecto Frontend

Transformacion Herramienta Gamificada Caro 2023

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Transformacion Herramienta Gamificada Caro 2023

Cargado por

Copyright:

Formatos disponibles

Transformación de la herramienta Gamificada “Language Conquers” para apoyar el

proceso de aprendizaje en la programación

Angela María Acosta Ramírez, [email protected]

Trabajo de grado presentado para optar al título de Ingenieros de Sistemas e Ingeniera

Director: Víctor Manuel Peñeñory, (PhD).

Universidad de San Buenaventura Colombia

Biblioteca Digital (Repositorio)

Bibliotecas Universidad de San Buenaventura

Universidad de San Buenaventura Colombia

Angela Maria Acosta Ramirez.

Juan Pablo Caro.

Angela Maria Acosta Ramirez.

Juan Pablo Caro Vargas

Tabla 1 Elementos de Gamificación por Categoría .................................................................. 34

Ilustración 1 Interfaz de usuario para realizar reto versión 1.0 .............................................. 23

Ilustración 46 Pantalla 18: Pista ................................................................................................. 73

Ilustración 92 Diagrama Dinámico Comprar Recursos ......................................................... 125

Ilustración 138 Patrón Factory ................................................................................................. 166

Ilustración 184 Prevención de errores ...................................................................................... 200

La deserción universitaria ha experimentado un incremento debido a diversos factores,

En el caso de las ingenierías y carreras relacionadas con la programación, las dificultades

Con el propósito de mejorar la experiencia de aprendizaje y fortalecer los conocimientos

Palabras clave: motivación, programación, gamificación, aprendizaje basado en juegos,

Keywords: motivation, programming, gamification, game-based learning, algorithms,

• Angular: Angular es un Framework de JavaScript de código abierto escrito en TypeScript,

• Aprendizaje basado en juegos: Es la utilización de juegos como medio de instrucción. El

• DeDalus: Modelo de proceso de juego. El cual realiza un análisis en torno a procedimientos

• Firebase: Firebase es una plataforma que ayuda a los desarrolladores en la publicación y

• Motivación: La voluntad de aprender, entendido como un interés de la persona por aprender

Las instituciones educativas han detectado la importancia del aprendizaje de la

La programación ha despertado un gran interés en el ámbito educativo y se promueve su

Los estudiantes que se adentran en el mundo de la programación a menudo se enfrentan a

Desde el año 2020, se ha observado un aumento en el número de plataformas y herramientas

La deserción universitaria es un desafío constante para las instituciones de educación

El proyecto Language Conquers, se desarrolla para aumentar la motivación de los

El semillero de investigación LIDIS de la Universidad San Buenaventura de Cali ha estado

El objetivo central de Language Conquers es proporcionar a los estudiantes la oportunidad

El propósito de esta investigación es transformar la herramienta “Language Conquers” a

B. Planteamiento del Problema

Las instituciones educativas han implementado estrategias y metodologías con el objetivo

Las estrategias en ingeniería, en particular en programación, incluyen la problematización,

Aprendizaje Basado en Problemas (ABP): Este método de enseñanza se centra en la

Gamificación: Esta metodología utiliza elementos y técnicas de juegos en contextos no

Flipped Classroom: Este modelo pedagógico consiste en invertir el orden tradicional de la

Aprendizaje Basado en Retos (ABR): Es un enfoque pedagógico centrado en la

Los estudiantes de primeros semestres de la universidad enfrentan dificultades para

C. Justificación del Problema

Las estrategias de aprendizaje que las instituciones educativas y docentes han

Language Conquers es una herramienta desarrollada con el objetivo de apoyar a los

Ilustración 1 Interfaz de usuario para realizar reto versión 1.0

Ilustración 2 Interfaz de usuario para él envió de retos versión 1.0

En las ilustraciones 1 y 2 se muestra el diseño y funcionalidad que tenía la plataforma en

D. Descripción y análisis de la complejidad del problema

• La plataforma proporciona material de apoyo como videos e información relevante al

• Durante el desarrollo de los retos, el estudiante tendrá la oportunidad de validar sus

• Se han considerado principios de usabilidad para que el estudiante tenga una

La nueva versión de Language Conquers incorpora como primera fase un simulador de un

3. Objetivos de desarrollo sostenible

proyecto contribuye especialmente al objetivo número 4 que habla sobre la educación de

Ilustración 3 Objetivos de desarrollo sostenible

Según los objetivos descritos en la ilustración 3, la herramienta busca promover el acceso

Ilustración 4 Etapas Modelo de Desarrollo

En la ilustración 4 se evidencia el modelo de desarrollo que se estableció para el proceso

a) Etapa de modelo de investigación documental