TFG_BEATRIZ_SANTILLANA_MARTINEZ

Vista previa del material en texto

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA 
Y SISTEMAS DE TELECOMUNICACIÓN 
 
PROYECTO FIN DE GRADO 
 
TÍTULO: Plataforma educativa de introducción a la programación 
para los alumnos de secundaria y bachillerato de formación no 
tecnológica. 
 
AUTOR: Beatriz Santillana Martínez 
 
TITULACIÓN: Ingeniería Telemática 
 
TUTOR: Esther Gago García 
 
DEPARTAMENTO: Ingeniería Telemática y Electrónica 
 
VºBº 
 
 
Miembros del Tribunal Calificador: 
 
 
PRESIDENTE: Inmaculada Álvarez de Mon Rego 
 
 
TUTOR: Esther Gago García 
 
 
SECRETARIO: Eloy Portillo Aldana 
 
 
Fecha de lectura: 25 de junio del 2021 
 
 
Calificación: 
 
 
El Secretario, 
 
1 
Resumen 
En este último año todo ha cambiado, y el aprendizaje no se queda atrás. 
Las técnicas y metodologías educativas han tenido que adaptarse a una situación en la que la 
tecnología es imprescindible. Mediante diferentes herramientas, se han mantenido y se 
mantendrán conectados alumnos y profesores. Las video llamadas no han sido la única 
solución, también se ha hecho uso de juegos educativos online y de aplicaciones para paliar 
el efecto de la suspensión de las clases presenciales. 
La motivación principal de este proyecto es el enseñar a programar aquellos jóvenes que no 
prevén un futuro tecnológico, adaptándose a la situación educativa actual. El autoaprendizaje 
está a la orden del día y una aplicación es la mejor manera de conseguirlo. 
El primer paso del proyecto ha sido el conversar con varios jóvenes a los que podría ir dirigida 
la aplicación según su perfil. Gracias a estas conversaciones se ha podido orientar la 
aplicación de la manera más adecuada posible. 
Esfácil, es una aplicación Android, orientada al aprendizaje de conceptos básicos de 
programación para aquellos jóvenes que no prevén un futuro profesional tecnológico. El 
lenguaje impartido es Python, debido a su simplicidad y utilidad en las ciencias sociales. 
Para lograr el correcto aprendizaje, además del temario, la aplicación cuenta pruebas de 
evaluación de todo su temario para que los alumnos sean conscientes de la evolución de sus 
conocimientos. Por otro lado, están los retos, ejercicios de completar código con una esencia 
de gamificación para motivar a los usuarios. Para el desarrollo de la aplicación se ha utilizado 
la programación por bloques haciendo uso de la herramienta Kodular. La información se ha 
almacenado en una base de datos en tiempo real llamada Firebase. 
Finalmente se ha probado la aplicación en jóvenes con perfiles no tecnológicos. Aquellos 
jóvenes a los que se les ha permitido el uso de la aplicación a libre disposición han sido 
capaces de responder satisfactoriamente los cuestionarios tras muy poco tiempo invertido. 
Además, estas personas afirman que tras haber hecho uso de la aplicación se sienten capaces 
y animadas a aprender más programación e incluso a querer especializarse en ello dentro de 
sus sectores. 
 
 
 3 
Abstract 
 
In the last year, everything has changed, and learning has not lagged behind. 
Educational techniques and methodologies have had to adapt to a situation in which 
technology is essential. By means of different tools, students and teachers have been and will 
continue to be connected. Video calls have not been the only solution; online educational 
games and applications have also been used to alleviate the effect of the suspension of face-
to-face lessons. 
 
The main motivation of this project is to teach programming to young people who do not 
foresee a technological future, adapting to the current educational situation. Self-learning is 
the order of the day and an application is the best way to achieve this. 
 
The first step of the project has been to talk to several young people to whom the application 
could be addressed according to their profile. Thanks to these conversations, it has been 
possible to orientate the application in the most appropriate way possible. 
 
Esfácil is an Android application aimed at learning basic programming concepts for young 
people who do not foresee a professional technological future. The language taught is Python, 
due to its simplicity and usefulness in the social sciences. 
In order to achieve the correct learning, in addition to the syllabus, the application has 
evaluation tests for the entire syllabus so that students are aware of the evolution of their 
knowledge. On the other hand, there are the challenges, code completion exercises with an 
essence of gamification to motivate users. For the development of the application, block 
programming has been used, making use of the Kodular tool. The information was stored in 
a real-time database called Firebase. 
 
Finally, the application was tested on young people with non-technological profiles. Those 
young people who have been allowed to use the application freely available have been able 
to answer the questionnaires satisfactorily after very little time invested. Moreover, these 
people say that after having used the application they feel able and encouraged to learn more 
programming and even want to specialize in it within their sectors. 
 
 
 
 
 
 
 
 
 
 
 
 
 5 
Agradecimientos 
 
En primer lugar, agradezco a la UPM el cómo me ha preparado todos estos años para salir al mundo 
laboral. Igualmente agradezco a su profesorado, especialmente a uno, que no me dejó caer y confió 
en mí cuando aun ni yo creía que llegaría a la presentación de este proyecto. 
 
Gracias a mi familia y amigos, que siempre me han apoyado, sufrido mis fracasos, y celebrado mis 
logros. Gracias por cada vez que he caído, haberme hecho ver que llegaría este día. Gracias por estar 
orgullosos de mí. 
 
Gracias a mi tutora Esther Gago García, que me ha puesto todo muy fácil, siendo todo un ejemplo. 
Gracias a la pasión que tiene por su trabajo, la enseñanza, que es de lo que trata el proyecto. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 7 
Índice de contenidos 
1. INTRODUCCIÓN .....................................................................................................................13 
1.1 ESTRUCTURA DE LA MEMORIA .............................................................................................14 
2 ANTECEDENTES ....................................................................................................................17 
2.1 INNOVACIÓN EDUCATIVA ....................................................................................................17 
2.2 ESTUDIO DE MEJORES EDADES PARA APRENDER. ..................................................................19 
2.3 APLICACIÓN PARA ALUMNOS DE ENTRE 14 Y 18 AÑOS..........................................................20 
2.4 ENTREVISTAS A JÓVENES DE ENTRE 14 Y 18 AÑOS ...............................................................21 
2.5 APLICACIONES QUE ENCONTRAMOS EN ESTE MOMENTO .......................................................22 
2.6 PYTHON ..............................................................................................................................24 
2.6.1 Python y los no tecnológicos...........................................................................................24 
2.7 TODOS PODEMOS APRENDER A PROGRAMAR ........................................................................24 
3 ESPECIFICACIONES Y RESTRICCIONES DE DISEÑO ....................................................25 
4 DESCRIPCIÓN DE LA SOLUCIÓN PROPUESTA ...............................................................27 
4.1 KODULAR ...........................................................................................................................27 
4.1.1 Verificación de funcionamiento en Kodular ....................................................................32 
4.2 FIREBASE ............................................................................................................................32 
4.3 FRONT-END .........................................................................................................................364.3.1 Amigabilidad de la interfaz.............................................................................................36 
4.3.2 Primera pantalla ............................................................................................................38 
4.3.3 Registro y autenticación .................................................................................................39 
4.3.4 Pantalla principal ..........................................................................................................42 
4.3.5 Contenidos y exámenes ...................................................................................................42 
4.3.6 Retos ..............................................................................................................................45 
4.3.7 Ayuda .............................................................................................................................47 
4.4 BLACK-END ........................................................................................................................48 
4.4.1 Primera Pantalla ............................................................................................................48 
4.4.2 Registro y Autenticación .................................................................................................48 
4.4.3 Pantalla principal ..........................................................................................................54 
4.4.4 Contenidos y exámenes ...................................................................................................55 
4.4.5 Retos ..............................................................................................................................57 
5 RESULTADOS ..........................................................................................................................59 
6 PRESUPUESTO ........................................................................................................................61 
7 CONCLUSIONES .....................................................................................................................63 
7.1 CONCLUSIONES ...................................................................................................................63 
7.2 DIFICULTADES EN EL DESARROLLO DEL PROYECTO ..............................................................63 
7.3 MEJORAS Y POSIBLES LÍNEAS DE AMPLIACIÓN DEL PROYECTO .............................................64 
8 LISTA DE REFERENCIAS BIBLIOGRÁFICAS ...................................................................65 
ANEXO A Glosario…………………………………………………………………………………...67 
ANEXO B Manual de usuario……………………………………………………………………..…69 
 
 
 
 
 
 
 
 9 
Índice de figuras 
 
Ilustración 1. Metodologías para la innovación educativa [11] ............................................19 
Ilustración 2. Proceso cognitivo [12] ....................................................................................19 
Ilustración 3. Logotipo Enki app [16] ...................................................................................23 
Ilustración 4. Logotipo Sololearn [17] ..................................................................................23 
Ilustración 5. Logotipo Kodular [22] ....................................................................................27 
Ilustración 6. Primera pantalla en Kodular ...........................................................................27 
Ilustración 7. Elementos básicos en Kodular ........................................................................28 
Ilustración 8. Organizadores de pantalla en Kodular ............................................................28 
Ilustración 9. Elementos de conexión en Kodular ................................................................29 
Ilustración 10. Bloques de control en Kodular......................................................................30 
Ilustración 11. Bloques lógicos en Kodular ..........................................................................30 
Ilustración 12. Bloques de texto en Kodular .........................................................................31 
Ilustración 13. Botón registrar en Kodular ............................................................................31 
Ilustración 14. Logotipo Firebase .........................................................................................32 
Ilustración 15. Realtime Database Firebase ..........................................................................33 
Ilustración 16. URL de unión de Database con Kodular ......................................................33 
Ilustración 17. Reglas de Realtime Database ........................................................................34 
Ilustración 18. Configuracion Firebase .................................................................................34 
Ilustración 19. Clave API en Kodular ...................................................................................35 
Ilustración 20. Métodos de autenticación en Firebase ..........................................................35 
Ilustración 21. Logotipo Esfácil ............................................................................................37 
Ilustración 22. Icono email ....................................................................................................38 
Ilustración 23. Configuración de un label .............................................................................38 
Ilustración 24. Primera pantalla ............................................................................................38 
Ilustración 25. Pantalla de elección entre registro o iniciar sesión .......................................39 
Ilustración 26. Pantalla de registro ........................................................................................40 
Ilustración 27. Pantalla de iniciar sesión ...............................................................................40 
Ilustración 28. Mensaje recuperar contraseña .......................................................................41 
Ilustración 29. Correo electrónico de cambio de contraseña ................................................41 
Ilustración 30. Cambio de contraseña ...................................................................................41 
Ilustración 31. Pantalla principal...........................................................................................42 
Ilustración 32. Pantalla de contenido ....................................................................................43 
Ilustración 33. Pantalla conocimientos básicos .....................................................................43 
Ilustración 34. Pantalla almacenamiento y velocidad ...........................................................44 
Ilustración 35. Pantalla de examen conocimientos básicos ..................................................45 
Ilustración 36. Pantalla con resultados de exámenes ............................................................45 
Ilustración 37. Pantalla sin desbloquear ningún reto ............................................................46 
Ilustración 38. Pantalla con Reto 2 desbloqueado ................................................................46 
Ilustración 39. Reto 1 ............................................................................................................46 
Ilustración 40. Mensaje número de respuestas correctas ......................................................47 
Ilustración 41. Mensaje no puedes desbloquear Reto ...........................................................47 
Ilustración 42. Mensaje todas las respuestas correctas .........................................................47 
Ilustración 43. Mensaje Reto 2 desbloqueado.......................................................................47 
 10 
Ilustración 44. Pantalla de ayuda ..........................................................................................47 
Ilustración 45. Bloques de la primera pantalla ...................................................................... 48 
Ilustración 46. Bloques de inicio y botón de atrás ................................................................ 49 
Ilustración 47. Gestión de bloques visibles y no visibles ..................................................... 49 
Ilustración 48. Bloques del botón registrar ........................................................................... 50 
Ilustración 49. Bloques del botón iniciar sesión ................................................................... 50 
Ilustración 50. Bloques de creación de campos en la base de datos ..................................... 51 
Ilustración 51. Vista de almacenamiento de datos en Realtime Database ............................ 52 
Ilustración 52. Bloques de gestión de errores en Firebase .................................................... 52 
Ilustración 53. Bloque cambio de contraseña ....................................................................... 53 
Ilustración 54. Bloque para el ahorro de memoria RAM ...................................................... 53 
Ilustración 55. Diagrama de secuencia Registro ................................................................... 53 
Ilustración 56. Diagrama de secuencia Inicio de sesión ....................................................... 54 
Ilustración 57. Gestión de botones en pantalla principal ...................................................... 54 
Ilustración 58. Bloques del botón comprobar de un examen ................................................ 55 
Ilustración 59. Bloques del inicio de la pantalla resultados .................................................. 56 
Ilustración 60. Almacenamiento en Firebase de resultados de exámenes ............................ 56 
Ilustración 61. Bloques de la obtención de valores de Firebase ........................................... 56 
Ilustración 62. Bloques de visibilidad de retos ..................................................................... 57 
Ilustración 63. Corrección de reto ......................................................................................... 58 
Ilustración 64. Almacenamiento de retos en Firebase .......................................................... 58 
Ilustración 65. Primera pantalla tras escanear QR de APK .................................................. 71 
Ilustración 66. Descarga de APK .......................................................................................... 71 
Ilustración 67. Botón de instalar la aplicación ...................................................................... 72 
Ilustración 68. Símbolo de la aplicación en el dispositivo .................................................... 72 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 11 
Índice de Tablas 
 
Tabla 1. Gastos en personal ..................................................................................................61 
Tabla 2. Gastos en Hardware ................................................................................................61 
Tabla 3. Gastos en Software .................................................................................................62 
Tabla 4. Gastos totales ..........................................................................................................62 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13 
1. Introducción
Según Universia “Nuestra condición humana no cambiará, aunque siga avanzando la 
tecnología, pero también es verdad que la tecnología no nos abandonará. De esta forma, 
ambas tendrán que caminar tomadas de la mano para lograr soluciones eficientes que 
satisfagan necesidades reales.” [1] 
Hoy en día, las carreras son más versátiles que hace 30 años, un historiador puede estudiar 
tecnología para asesorar en el desarrollo de un videojuego ambientado en época, o un 
antropólogo formarse en Big Data para ayudar en el desarrollo de bases de datos que 
resuelvan problemas culturales. [2] 
En la actual sociedad, la tecnología evoluciona a un ritmo exponencial, lo que provoca que 
la sociedad no pueda adaptarse a los cambios antes de que se produzcan otros nuevos. Por 
ello, es necesario que eliminemos la frontera entre la cultura científica y humanística. Para 
ello, desde el punto de vista educativo, los programas académicos deben incluir el desarrollo 
de conocimientos, competencias y habilidades interdisciplinares. Humanistas tecnólogos y 
científicos humanistas. 
Como hemos comentado antes, la tecnología crece a pasos agigantados. Mientras, muchos 
simplemente observan este proceso desde fuera y se quedan ajenos a lo que la sociedad será 
mañana. Parte de esta tecnología la acabamos necesitando mientras que otra simplemente nos 
brinda la oportunidad de llevar una vida más cómoda. 
La sociedad tiene normalizado que, aquellos que deben saber de tecnología, son aquellos que 
se dedican en alma y vida a ello, ingenieros, arquitectos, médicos… ¿Y un filósofo, 
historiador, economista o psicólogo? 
“Las empresas tecnológicas se han convertido en las más valiosas del planeta, y todas ellas 
se sustentan bajo un mismo pilar fundamental: el código de sus aplicaciones y servicios. Y 
ese código lo crean y mantienen desarrolladores de todo tipo.” [3] 
No vamos a negar que aprender sobre tecnología hace 100 años, para aquellos que tenían 
trabajos no tecnológicos, únicamente servía para aumentar su conocimiento y tener más 
perspectiva del mundo. Esto ha cambiado. La importancia de tener conocimientos sobre 
tecnología, si te dedicas a las ciencias sociales o humanidades, es innegable. La gran mayoría 
reconocen el necesitar estos conocimientos, pero también afirman que lo que necesitan son 
conocimientos muy superficiales. Dicen necesitar conocer el cómo aprovecharse de las 
ventajas, no el cómo crearlas. 
Por suerte o por desgracia, esto no es así, un conocimiento profundo sobre tecnología, el 
como programar o el funcionamiento interno de las redes, lo acabaremos necesitando todos. 
Introducción
14 
Que lo acabaremos necesitando, y pronto, es una evidencia. El problema viene cuando 
analizamos cual es la educación tecnológica que se está dando a aquellos que se dedicarán a 
ciencias sociales o humanidades. En la mayoría de los casos es cero. 
Otra de las razones que crean la barrera entre la tecnología y las ciencias sociales o 
humanidades son los estereotipos de dificultad. Es inevitable el no considerar complicado 
aquello de lo que no tenemos ningún tipo de conocimiento. Por esa razón, se debería empezar 
por impartir conocimientos básicos tecnológicos desde edades muy tempranas. Tras tener 
conocimientos básicos, si a la edad de 14 años te plantean el empezar a programar, 
simplemente, será un paso más. 
Poniéndonos en la situación de, por ejemplo, un futuro psicólogo, si combinamos los factores 
de creer no necesitar la tecnología con considerarla difícil de aprender, obtenemos como 
resultado, profesionales con una barrera para poder avanzar. 
Aprender a programar, además, es aprender a pensar. Como bien dicen en Platzi, “Programar 
es dividir un desafío en varios problemas e ir resolviéndolos de uno en uno.” [4] 
Esta realidad se puede aplicar a todos los momentos del día de una persona, desde el lavarse 
los dientes hasta el escribir un documento. Programar nos ayuda a ser más eficientes en 
actividades incluso cotidianas. [5] 
Por las razones anteriormente citadas, se considera necesaria la realización de este proyecto, 
en el que se pretende dar una solución a esas personas que se dedicarán a las ciencias sociales, 
pero quieren estar capacitados para desenvolverse tecnológicamente, como el futuro 
demandará. 
1.1 Estructura de la memoria 
La redacción de la memoria está dividida en diferentes apartados en los que se organiza la 
información según el contenido tratado, en este momento, el lector se encuentra en el primer 
capitulo. 
• Capítulo 2. Antecedentes. Estecapítulo recopila información sobre innovación
educativa, las aplicaciones que hay en estos momentos para aprender a programar y
el por qué todos debemos y somos capaces de lograrlo.
• Capítulo 3. Especificaciones y restricciones de diseño. En este capítulo se listan las
características que debe cumplir el proyecto.
• Capítulo 4. Descripción de la solución propuesta. Este capítulo es dedicado a explicar
las tecnologías utilizadas para el desarrollo de la aplicación. En este capítulo también
se muestran el front-end y el back-end del proyecto detalladamente.
Introducción
15 
• Capítulo 5. Resultados. A lo largo de este capítulo se analizan los resultados obtenidos
tras probar la aplicación en usuarios reales.
• Capítulo 6. Presupuesto. En este capitulo se realiza un análisis del coste estimado del
proyecto teniendo en cuenta los gastos en personal, hardware y software.
• Capítulo 7. Conclusiones. En este capítulo se desarrollan las conclusiones que se han
obtenido. Se analizan futuras mejoras para el proyecto y se exponen las dificultades
encontradas durante el desarrollo.
• Anexo A. Glosario. En este anexo se explican términos utilizados a lo largo del
documento que pueden ser confusos para el lector.
• Anexo B. Manual de usuario. En este anexo se incluye un manual sobre como instalar
la aplicación en un dispositivo Android.
Introducción
16 
17 
2 Antecedentes 
Con este capítulo se pretende recoger la información existente sobre diversos temas de 
importancia a la hora de tomar decisiones sobre el prototipo a desarrollar en este proyecto. 
2.1 Innovación educativa 
La herramienta más importante con la que cuenta una persona es su conocimiento. La educación es 
todo un reto, y el cómo hacerlo de la manera más eficiente está a la orden del día. Por ello, a lo largo 
de los años, el cómo mejorar las técnicas para adquirirlo ha sido un tema de profunda investigación. 
Gracias a ello cada día contamos con nuevas ideas. [6] 
Con innovación educativa nos referimos a las prácticas transformadoras que fomentan un mejor 
proceso de enseñanza y aprendizaje. Estas técnicas incorporan cambios en los materiales, métodos, 
contenidos e incluso en los contextos implicados. 
Las técnicas más eficientes dependerán de varios factores, como puede ser el tipo de materia que se 
quiere explicar y a quién va dirigida. No tiene nada que ver enseñar historia con matemáticas, y 
tampoco es lo mismo enseñárselo a un niño que a un adulto. [7] 
Encontramos diferentes tipos de innovación educativa: 
• Innovación disruptiva: Es el tipo de propuesta que impacta a todo el contexto educativo,
provoca que la evolución de un método presente cambie drásticamente.
• Innovación revolucionaria: Se aplica un nuevo paradigma que muestra un cambio realmente
significativo en el proceso de enseñanza y aprendizaje.
• Innovación incremental: Se construye sobre una estructura previamente existente. Gracias a
ella se refina y mejora el proceso.
• Mejora continua: Implica que los cambios introducidos afecten parcialmente a algún
elemento del proceso, sin afectar por completo.
Jaume Carbonell, entiende la innovación educativa como “un conjunto de ideas, procesos y 
estrategias, más o menos sistematizados, mediante los cuales se trata de introducir y provocar cambios 
en las prácticas educativas vigentes. La innovación no es una actividad puntual sino un proceso, un 
largo viaje o trayecto que se detiene a contemplar la vida en las aulas, la organización de los centros, 
la dinámica de la comunidad educativa y la cultura profesional del profesorado. Su propósito es alterar 
la realidad vigente, modificando concepciones y actitudes, alterando métodos e intervenciones y 
mejorando o transformando, según los casos, los procesos de enseñanza y aprendizaje. La innovación, 
por tanto, va asociada al cambio y tiene un componente – explícito u oculto- ideológico, cognitivo, 
ético y afectivo. Porque la innovación apela a la subjetividad del sujeto y al desarrollo de su 
individualidad, así como a las relaciones teoría- práctica inherentes al acto educativo.” [8] 
 Antecedentes 
18 
Como bien podemos observar, Juame Carbonell comenta que la innovación es un proceso, por ello 
no es algo que se pueda cambiar de un día para otro. El primer paso es el concienciar a los docentes 
sobre la necesidad de un cambio, tras esto viene el formarles a ellos para que sepan aplicarlo y por 
último el impartir a los alumnos las materias mediante la nueva técnica. Además, la adaptación de los 
alumnos al nuevo método de aprendizaje también será un proceso que requerirá tiempo. [9] 
En la actualidad, las metodologías emergentes en educación con mejores resultados son: 
• Gamificación: Se basa principalmente en la utilización de los juegos como método de
aprendizaje. Este método está cada día más extendido y se aplica en más centros educativos.
Se puede aplicar tanto de manera interactiva con otros compañeros en el aula, como mediante
aplicaciones móviles. El uso de dispositivos tecnológicos en los colegios cada día es mayor,
por ello, el número de plataformas dedicadas al aprendizaje no para de crecer. La ventaja que
encontramos en las aplicaciones móviles es la portabilidad, ya que el aprendizaje que
comienza en el colegio puede continuar en casa.
• Aula invertida: Consiste principalmente en invertir los momentos en los que los alumnos
aprenden. Mediante materiales, la mayor parte de las veces proporcionados por el profesor,
los alumnos aprenden la lección en sus respectivas casas. Será tras esto, cuando en clase se
abren debates y dudas con el profesor sobre el tema estudiado. Esta técnica es realmente
interesante debido a la gestión eficiente del tiempo.
• Lectura comentada: Tiene como objetivo el comentar de forma profunda textos relacionados
con la materia impartida en clase. Con esta técnica lo que se logra es, por un lado, aprender
a hacer lecturas profundas, y por el otro, el saber hacer un análisis critico. Esta técnica tiene
resultados similares al del aula invertida, y como ventaja respecto a la anterior encontramos
el que se puede hacer de forma recurrente e incluso de tarea.
• Autoaprendizaje: Guiar a un alumno para que por él mismo se informe y aprenda. El aspecto
más complicado de esta técnica es el conseguir la motivación suficiente en el alumno para
ello. Más adelante comentaremos el como este aspecto, la motivación, puede ser complicado,
y aún más a ciertas edades.
• Método de caso: Mediante casos reales a resolver en grupo, preparar a los alumnos para lo
que es el trabajo y despertar su curiosidad. Por un lado, el hecho de trabajar en grupo a ciertas
edades puede ser desastroso, ya que para que un grupo salga adelante, todos los integrantes
tienen que remar en la misma dirección. Bien es cierto que es complicado que todos los
integrantes busquen exactamente lo mismo, incluso en el mundo laboral. La desventaja en un
colegio es que alguno ni tan siquiera querrá que el trabajo salga adelante. [10]
 Antecedentes 
19 
Ilustración 1. Metodologías para la innovación educativa [11] 
En este proyecto, las metodologías utilizadas son gamificación y autoaprendizaje. Estas técnicas son 
las más adecuadas, ya que al tratarse de una aplicación Android, es un aprendizaje interactivo 
mediante un dispositivo tecnológico. El alumno aprende por él mismo. 
2.2 Estudio de mejores edades para aprender. 
El tema de las edades y el aprendizaje es realmente amplio. Según el objeto de aprendizaje varían los 
tiempos necesarios y cuál es la mejor edad. No tiene nada que ver el proceso cognitivo que lleva a 
cabo un niño de 5 años con el que lleva uno de 10 años. Por lo tanto, hay que adaptar el enfoque según 
lo que se quiera impartir y la edad que sea objeto de ello. 
Ilustración 2. Proceso cognitivo [12] 
 Antecedentes 
20 
Claro está, que los primeros años de vida son fundamentales en el desarrollo de una persona. En los 
primeros aproximadamente 8 años, partiendo desde cero, se aprenden la mayoría de las cosas que senecesitan en el resto de la vida. Por ello en estos años, es de gran importancia adquirir buenas 
habilidades. En estos años se aprende a andar, hablar, leer, e incluso a ser conscientes de que lo que 
no sabemos. Puede parecer de poca importancia el conocer lo que se desconoce, pero gracias a ello 
el ser humano es capaz de algún día aprenderlo. 
A partir de los 8 años, aparecen en los niños ciertas actitudes habitualmente asociadas a los adultos. 
Comienza el momento de razonar, y plantearse mil dudas. Al mismo tiempo, se van estableciendo 
relaciones sociales, que influyen directamente en el comportamiento del individuo. En esta etapa la 
educación de la inteligencia emocional es realmente importante. 
Cuando llega la adolescencia, a los 12 años aproximadamente se plantea un nuevo reto. Los niños, 
dejan de ser tan niños, y vuelven a experimentar grandes cambios corporales acompañados de grandes 
cambios físicos. Así como a edades más tempranas se admira todo lo que se ve, llega el momento de 
juzgar en base a lo que hemos aprendido en los años anteriores. Sacar propias conclusiones de lo que 
está bien y lo que está mal. Este momento es uno de los más complicados en el desarrollo de una 
persona. Gracias al sentido crítico, se deja de tener a los padres en un pedestal. El que los padres, 
principales referentes, cambien el rol que tenían, hace que los jóvenes se revelen y no se dejen guiar 
de la misma forma, por sus consejos y opiniones. 
Aunque pueda parecer un proceso arduo, la revelación ante todo lo que se creía cierto y de un día 
para otro se ha desmontado, es necesario y permite una reorganización cerebral. Este proceso sería 
imposible lograr de otra forma. Este cambio, tantísimas dudas e infinitas decepciones, hacen que los 
jóvenes se conviertan en verdaderos adultos. 
Por otro lado, esta etapa tiene también grandes riesgos, ya que, al ser tan vulnerables, cualquier 
pequeño matiz puede afectar al futuro. 
A los 16 años, empieza la época de tomar decisiones. Quién voy a ser y como conseguiré llegar a 
ello. No solo se decide quién se va a ser en el mundo laboral, también se asientan valores y una 
identidad. [13] 
2.3 Aplicación para alumnos de entre 14 y 18 años 
Una de las bases esenciales en la educación es que el alumno quiera aprender. Por ello el primer paso 
en la enseñanza debe hacer ver al alumno que va a sacar beneficio de su esfuerzo. Por otro lado, este 
es uno de los pasos más complicados. La gran mayoría de alumnos carece de interés por aprender, 
sobre todo, a ciertas edades como se ha explicado previamente. 
Según la edad, lo que motiva a un individuo a querer aprender una materia es diferente. Por ejemplo, 
un adulto es consciente de la realidad en la que vive y sabe que necesita tener conocimientos para 
trabajar y poder ganarse la vida. Los adultos también cuentan con la ventaja de querer ser cultos, por 
lo cual es más sencillo enseñarles. 
Los alumnos de muy temprana edad tienen a los mayores en un pedestal, lo que hace que siempre les 
imiten y quieran ser como ellos. Por esta razón, su interés y predisposición por aprender es mayor. 
Además, no tienen prejuicios por lo que es fácil o difícil, su cabeza piensa “si me lo enseñan es que 
puedo aprenderlo”. 
 Antecedentes 
21 
Lo complicado viene a las edades intermedias, en las que los mayores han dejado de ser referentes y 
tienen defectos por todas partes. Además, a esta edad no se tiene ambición ni por un buen trabajo ni 
por convertirse en una persona culta. 
Aquí entra el factor admiración. Aunque el conseguir la admiración de un joven no sea cosa fácil, es 
posible. Para ello, se tienen que sentir identificados con la persona y verse más que capaces de poder 
ser algún día como esa persona. Si, por ejemplo, se les pone un objetivo de admiración imposible, 
como podría ser que la persona a la que “imitar” a su edad ya supiera 6 idiomas, cuando ellos se ven 
en la situación de que con esa edad no saben ni 3, tiran la toalla. En cambio, si se ven identificados 
en la trayectoria del sujeto al que imitar, se ven capaces y quieren luchar por conseguirlo. 
Por estas razones elegimos un publico de 14-18 años para nuestra aplicación. Empezar con personas 
que están en época de “rebeldía” de tal manera, que adquieran los conocimientos teóricos más básicos 
ahí. Una vez adquiridos estos, cuando llega el momento de saber quién quieren ser, tienen suficientes 
conocimientos tecnológicos para saber que elijan el camino que elijan, la necesitan. Una vez que 
saben que la necesitan y están en una edad, en la que el aprender ya lo consideran esencial, son 
capaces de dedicarle las horas y práctica que necesita su aprendizaje. [14] 
2.4 Entrevistas a jóvenes de entre 14 y 18 años 
Una vez se ha llegado a la conclusión que esas edades son nuestro público objetivo, se ha procedido 
a entrevistar a 20 jóvenes de entre 14 y 18 años. 
Las preguntas realizadas y respuestas obtenidas fueron las siguientes. 
• ¿Consideras que sabes de tecnología?
16 de los 20 jóvenes respondieron que no a esta pregunta. Tres de los cuatro restantes dijeron
que sí, que sabían utilizar dispositivos electrónicos mucho mejor que sus familiares. El joven
restante afirmó haberse montado su propio ordenador.
• ¿Sabes lo que es una CPU?
19 de los 20 jóvenes no tenían ni idea de lo que era, mientras que el mismo que había montado
su ordenador conocía perfectamente su función.
• ¿Sabes lo que es programar?
Dos los 20 fueron más o menos capaces de explicar lo que es.
• Sabiendo que tiene tantas salidas profesionales, ¿Por qué no quieres aprender de
tecnología?
La dificultad fue la respuesta por excelencia. Todos los alumnos nombraron como primera
opción. En segundo lugar, la respuesta más frecuente se refirió a que es “algo aburrido”.
Como curiosidad, el alumno que había montado su propio ordenador defendió que el
hardware era fácil, pero que para dedicarse al software se necesitaba ser muy bueno en
matemáticas y física.
 Antecedentes 
22 
A partir de esta encuesta, cuyo análisis indica el muy bajo nivel conceptual sobre ordenadores o 
programación que es habitual entre los jóvenes objeto del estudio, se han preparado ejercicios 
sencillos, con enunciados en general poco matemáticos, sobre aspectos que puedan ser familiares para 
jóvenes de esas edades. Igualmente, los contenidos se describen sin entrar en detalles demasiado 
matemáticos y técnicos, y se comienza desde los más básicos que, en otros ámbitos, se dan por 
sabidos. 
Tras estas conversaciones informales nos dimos cuenta de que además de ser una aplicación sencilla 
e intuitiva, debe de ser una aplicación atractiva. Por ello, más adelante se hace un estudio de colores 
para hacer la aplicación lo mas amigable posible. Igualmente, para evitar del aburrimiento del que 
hablan, se han diseñado retos encadenados. Estos retos se van realizando a medida que se superan los 
anteriores. La idea está inspirada en la estructura de niveles de un videojuego. 
2.5 Aplicaciones que encontramos en este momento 
Hoy en día existen múltiples opciones para aprender a programar, clases, cursos, webs e incluso 
aplicaciones móviles. 
Centrándonos en las aplicaciones móviles para aprender a programar, observamos que empiezan 
desde lo mas sencillo, que suele ser el clásico “Hola Mundo”. En ellas tenemos la oportunidad de 
aprender uno o varios lenguajes. Estas aplicaciones están orientadas a gente con conocimientos 
tecnológicos básicos como es simplemente el concepto de programar. 
Entre las diversas aplicaciones que encontramos en el mercado las podemos diferenciar en función 
de qué lenguajes ofrecen, si los conocimientos son teóricos o si también hay opción de codificar 
dentro de la propia aplicación. 
Enki app 
Es una aplicación que ayuda tanto a aprender como a reforzar conocimientos sobre lenguajes de 
programación. Plantea el aprender a programar mediante ejercicios cortos. Cuenta con ejercicios y 
juegos que ponen a prueba diversos conocimientos. 
Como bien se ha comentadoantes, también sirve para reforzar conocimientos, de tal manera que se 
pueden seleccionar esos lenguajes que se conocen, pero no se practican habitualmente. Como dicen 
algunos “Es el Duolingo de los programadores”. 
El tema de reforzar conocimientos es muy interesante. En el mundo de la programación, si no 
practicas, olvidas. Gracias a esta iniciativa podemos mantener nuestros conocimientos activos sin una 
gran carga de esfuerzo. 
La aplicación se puede utilizar tanto como administrador, docente, estudiante, o padre de familia. De 
esta manera, por ejemplo, un docente puede registrar asistencias y poner horarios. Esta aplicación es 
de pago tras los primeros 30 días de prueba. [15] 
 Antecedentes 
23 
Ilustración 3. Logotipo Enki app [16] 
Sololearn 
Tiene tanto la opción de aplicación como la opción de una plataforma web. Esta aplicación está 
orientada principalmente a aprender conceptos básicos de diferentes lenguajes de programación como 
son c++, java, python, html. Es totalmente gratuita. 
Su objetivo es enseñar los conocimientos más esenciales, a partir de los cuales seguir con los estudios 
por cuenta propia. 
Dentro de su web, se encuentra un apartado llamado blog en el que hay conocimientos no orientados 
a lo que es la pura codificación. Conocimientos como el como hacer un código más eficiente o 
estructuras de datos. Ahora ya, si quieres aprender sobre ellos eres tu quien tiene que indagar sobre 
lo que te interesa y lo que no, 
Tiene aplicación tanto para Android como para iOS. Cuenta con “code playground” donde se pueden 
encontrar proyectos creados por otra gente y crear proyectos propios. [17] 
Ilustración 4. Logotipo Sololearn [17] 
 Antecedentes 
24 
2.6 Python 
Python es un lenguaje de programación interpretado que surgió a finales de los 80, siendo Guido Van 
Rossum su creador. El lenguaje comenzó para él como un pasatiempo. 
Hoy en día la evolución del lenguaje es gestionada por Python Software Foundation, sociedad sin 
animo de lucro, que tiene como principal misión la difusión del lenguaje. [18] 
Python es un lenguaje que cuenta con una sintaxis muy limpia pareciéndose mucho a la del lenguaje 
natural y uno de los códigos más legibles que podemos encontrar. También elimina sintaxis como es 
el uso del punto y coma al final de cada línea o las llaves para los bloques. Este es uno de los 
principales motivos por los que en este proyecto se ha elegido Python. [19] 
Otras ventajas son: 
-Es un lenguaje multiparadigma, combina propiedades de varios lenguajes, siendo principalmente
programación orientada a objetos.
-Es de código abierto.
-Es multiplataforma, disponible en las plataformas más comunes.
-El tipo de datos se determina en tiempo de ejecución
2.6.1 Python y los no tecnológicos 
Python es, con diferencia, el lenguaje que más ha triunfado entre la gente que no se dedica de pleno 
a la tecnología. 
La razón de haber elegido un solo lenguaje, y no varios en nuestra aplicación, es que está dirigida a 
personas con conocimientos de programación mínimos o nulos. El simple hecho de tener que 
seleccionar entre varios puede desanimar a los usuarios. Además, de esta manera, nos aseguramos de 
que aprenden el lenguaje que más útil les será. 
2.7 Todos podemos aprender a programar 
Entre las personas no dedicadas a la tecnología como tal, se extiende el pensamiento de que programar 
es algo realmente complicado. La realidad es que programar es bastante similar a las matemáticas, 
por lo tanto, todo aquel que sea capaz de sacarse bachillerato, en cualquiera de sus modalidades es 
más que capaz de convertirse en todo un programador si es lo que quiere. 
Una realidad que todos los que han estudiado programación conocen, es que, “a programar, se aprende 
programando”. La constancia y el esfuerzo son las claves para aprender a programar. 
Además de ser capaces de ello, a aquellas personas que se dedican a las ciencias sociales, les va a 
venir muy bien, tanto a la hora de encontrar trabajo, como a la de desarrollarlo. [20] 
En un mundo en constante cambio, la programación nos permite el tratamiento de datos de manera 
realmente efectiva, reducir márgenes de error de infinitos cálculos, datos y estimaciones. Ventaja 
realmente útil, por ejemplo, en el mundo de la economía. 
 Antecedentes 
25 
3 Especificaciones y restricciones de diseño 
Las especificaciones y restricciones que debe cumplir este proyecto se presentan en forma de 
lista. 
• La aplicación requiere la identificación de usuarios para el acceso a su contenido.
• Para la identificación de usuarios, la primera vez que un usuario accede, debe
registrarse. A partir de entonces, debe iniciar sesión con sus credenciales.
• La información de los usuarios debe ser almacenada en una base de datos en tiempo
real.
• Dentro del contenido tiene que haber una sección con conocimientos básicos
tecnológicos para aquellos usuarios que lo necesiten.
• Todo el temario debe ser explicado con vocabulario coloquial.
• La aplicación debe tener una interfaz intuitiva.
• La aplicación debe contar tanto con exámenes para evaluar la adquisición de
conocimientos como con retos para implantar la gamificación.
• El acceso a los retos debe ser progresivo. Se debe exigir tener uno perfecto para poder
acceder al siguiente.
• La evolución del usuario debe ser almacenada en base de datos.
• La aplicación debe contar con una ventana de ayuda en la que se explique el
funcionamiento de la aplicación.
Especificaciones y restricciones de diseño 
26 
27 
4 Descripción de la solución propuesta 
El objetivo de este proyecto es el desarrollo de una aplicación Android para el aprendizaje 
de conceptos básicos de programación, orientada a usuarios de entre 14 y 18 años con perfil 
no tecnológico. 
Para el desarrollo de la aplicación se hace uso de las herramientas Kodular y Firebase. 
4.1 Kodular 
El entorno utilizado para el desarrollo de la aplicación ha sido Kodular. Es una herramienta 
en línea que tiene como objetivo el crear aplicaciones Android mediante una interfaz muy 
amigable y sencilla. En ella se utiliza la programación por bloques, la cual es totalmente 
adecuada cuando el objetivo es crear una interfaz de usuario y accesos a bases de datos. [21] 
Ilustración 5. Logotipo Kodular [22] 
La creación de la aplicación pasa por diferentes fases en la plataforma. Lo primero a 
desarrollar es el crear la interfaz de la aplicación. La interfaz de la aplicación se programa de 
forma visual sobre un teléfono móvil virtual al que se van arrastrando elementos. 
Ilustración 6. Primera pantalla en Kodular 
Descripción de la solución propuesta
28 
Algunos de los elementos son: 
• Los que el usuario percibe, como pueden ser botones, checkbox, etiquetas o cuadros
de texto.
Ilustración 7. Elementos básicos en Kodular 
• Organizadores de pantalla “layouts”, como por ejemplo el Vertical Arrangement, nos
permiten organizar en pantalla más fácilmente los elementos, permitiéndonos por
ejemplo poner dos elementos seguidos de manera horizontal. También nos permite
crearlos directamente con la posibilidad de scroll.
Ilustración 8. Organizadores de pantalla en Kodular 
Descripción de la solución propuesta
29 
• Elementos que nos permiten añadir imágenes, videos, mapas o incluso la opción de
acceder a la cámara desde la aplicación para hacer fotos.
• Elementos que nos conectan con bases de datos o diferentes plataformas web. En
nuestro caso se ha utilizado Firebase Database.
Ilustración 9. Elementos de conexión en Kodular 
• Elementos que nos permiten añadir extensiones programadas por otros usuarios. Este
elemento es el que se ha utilizado para la autenticación. Aunque dentro de los
elementos que nos conectan a bases de datos hay un Firebase Authentication, el cual
nos permite autenticar usuarios, no se ha decido el uso de ese ya que limita en el modo
de hacer pruebas de funcionamiento. La extensión por lo tanto utilizada para la
autenticación de usuarios ha sido Firebase Authentication Extension V3 byMirxtrem
Apps. [23]
Descripción de la solución propuesta
30 
La siguiente fase es la creación de los bloques, es decir, el flujo que va a seguir la aplicación. 
Dentro de estos bloques están los bloques generales y los específicos de cada pantalla. 
Los bloques generales aparecen en todas las pantallas y permiten programar la lógica de la 
aplicación. Algunos ejemplos son: 
• Bloques de control: facilitan las operaciones de estructuras condicionales e iterativas,
igualmente tienen funcionalidades del flujo de pantallas, es decir, cuando se abrirá
cada una de ellas.
Ilustración 10. Bloques de control en Kodular 
• Bloques de lógica. Permiten limitar las condiciones mediante verdaderos o falsos,
negaciones u operadores condicionales.
Ilustración 11. Bloques lógicos en Kodular 
Descripción de la solución propuesta
31 
• Bloques de variables y bloques de procedimientos. Permiten crear variables y
procedimientos propios respectivamente.
• Bloques de texto. Permiten controlar todo relacionado con el texto, desde
simplemente el mostrar una frase hasta hacer comprobaciones de longitud.
Ilustración 12. Bloques de texto en Kodular 
Los bloques específicos de cada ventana contienen los eventos que se ejecutan dependiendo 
de la actividad del usuario. Igualmente, según la pantalla y elementos en ella, se tiene la 
oportunidad de utilizar unos u otros. Un ejemplo de evento es el pulsar un botón. 
Ilustración 13. Botón registrar en Kodular 
Kodular cuenta con un foro llamado Kodular Community, en el que cualquiera puede 
preguntar dudas y cualquiera responderlas. Esto ha sido muy útil ya que durante el desarrollo 
de la aplicación se han encontrado con numerosos problemas, los cuales, prácticamente 
todos, ya habían sido resueltos por otras personas en ese foro. [24] 
Descripción de la solución propuesta
32 
4.1.1 Verificación de funcionamiento en Kodular 
Según se va programando en Kodular se puede ir probando su funcionamiento en un 
dispositivo Android real. Esto se puede hacer de diversas maneras. Algunas de ellas son: 
• Generando un archivo apk descargable el cual obtenemos en nuestro móvil
escaneando el código QR. Este método no es muy eficiente para hacer pruebas ya que
cada vez que cambias algo en la aplicación, tienes que borrar la aplicación
anteriormente descargada y descargar la nueva. Esta opción es la más indicada para
cuando la aplicación ya esta acabada.
• Mediante Kodular Companion, aplicación que se descarga de Play Store, la cual,
mediante el escaneo del código QR abre la aplicación inmediatamente. Esta
herramienta es la más eficiente en tiempo a la hora de hacer pruebas. [25]
4.2 Firebase 
Firebase es una plataforma de nube de Google orientada al desarrollo de aplicaciones móviles 
y web. Empezó a formar parte de Google en 2014. [26] 
Ilustración 14. Logotipo Firebase 
El objetivo principal de esta plataforma es el facilitar la creación de aplicaciones. 
Dentro de sus funcionalidades, están las bases de datos en tiempo real, el almacenamiento en 
la nube, la configuración remota o la autenticación de usuario. Para el desarrollo de esta 
aplicación se han utilizado tanto las bases de datos en tiempo real como la autenticación de 
usuarios. 
Descripción de la solución propuesta
33 
Bases de datos en tiempo real 
La información de estas bases de datos se almacena en la nube. Esta herramienta permire 
tanto almacenar como disponer de la información almacenada en tiempo real, manteniéndola 
actualizada. 
Lo primero que aparece al iniciar el RealTime Database es una URL la cual hay que 
introducir en el proyecto Kodular para que el acceso sea a esa base de datos concretamente. 
[27] 
Ilustración 15. Realtime Database Firebase 
En la Ilustración 16 se puede ver en donde se debe introducir esa URL dentro del componente 
extensión Firebase Authentication del proyecto Kodular. 
Ilustración 16. URL de unión de Database con Kodular 
Antes de comenzar con la utilización de la base de datos en tiempo real, se han configurado 
unas reglas. Las reglas que encontramos por defecto no permiten ni lectura ni escritura a los 
usuarios con el fin de aumentar la seguridad. En este caso se han modificado de tal manera 
que el proyecto permita tanto la escritura como la lectura de datos a aquellos usuarios que 
estén autenticados con Firebase Authentication. 
Descripción de la solución propuesta
34 
Ilustración 17. Reglas de Realtime Database 
Autenticación de usuarios 
Este sistema permite tanto registrarse como iniciar sesión. Firebase dispone de su propia 
gestión de seguridad de estas credenciales, lo cual libera de carga al desarrollador. Como 
aliciente, Firebase Authentication no almacena la contraseña en claro, por lo que el 
desarrollador no puede acceder a ellas, lo que almacena es su función hash. 
Para acceder desde Kodular al Firebase Authentication concreto lo que debemos hacer es 
introducir la clave API en el proyecto Kodular. La clave API del proyecto Firebase se 
encuentra en la configuración del proyecto. [27] 
Ilustración 18. Configuracion Firebase 
Descripción de la solución propuesta
35 
La clave API se introduce en el proyecto Kodular como se puede ver en la Ilustración 19. 
Ilustración 19. Clave API en Kodular 
Por último, en la configuración de Firebase Authentication está el habilitar mediante qué 
métodos estará permitida la autenticación. En este proyecto únicamente se ha admitido 
mediante correo y contraseña. 
Ilustración 20. Métodos de autenticación en Firebase 
Descripción de la solución propuesta
36 
4.3 Front-end 
Se entiende por front-end la parte de la aplicación a la que tiene acceso el usuario, es decir la 
parte con la que interactúa. Por esa razón es realmente importante la simplicidad y estética 
aplicada. Algunos ejemplos son los colores, tipos de letra o efectos de ratón. [28] 
4.3.1 Amigabilidad de la interfaz 
La primera decisión que se ha tomado para el diseño de la aplicación han sido los colores de 
los que se compondrá. Es una aplicación orientada al aprendizaje, por lo cual, se ha hecho 
una investigación de los colores más adecuados para los objetivos que queremos conseguir. 
Cada color tiene sus ventajas, pero nosotros, lo que queremos conseguir son alumnos 
motivados y que aprendan de la manera más amena posible. 
Por ello los colores principales de la aplicación son: 
• El azul es el color más recomendado para programadores, haciéndoles notablemente
más productivos. El uso en exceso de este color puede dar una sensación fría, por lo
que lo perfecto sería el combinarlo con un color como el naranja, por razones que se
comentaran posteriormente. No es pura casualidad que la mayoría de nuestros
bolígrafos sean azules. [29]
• El verde fomenta la concentración y la relajación. Los estudios sobre las ventajas de,
por ejemplo, trabajar en una oficina verde son múltiples y todos apuntan a que a largo
plazo los trabajadores están más contentos con su trabajo. Con esta aplicación
queremos que nuestros alumnos aprendan sin presión, por voluntad propia y
disfrutando de aprender.
• El color naranja fomenta el ánimo de los alumnos. Estudios revelan que aumenta el
suministro de oxigeno al cerebro promoviendo la actividad mental. Por ello no es
conveniente basar un ambiente en este color, pero si el utilizarlo para destacar
conceptos importantes. [30]
Descripción de la solución propuesta
37 
Además de la aplicación, también se ha decidido basar el logotipo de la aplicación en los 
colores azul y verde ya que queremos mantener la esencia de relajación unida al aprendizaje. 
Para el diseño del logotipo se ha utilizado la Canva, una pagina web gratuita en la que diseñar 
logotipos de forma muy intuitiva. [31] 
El eslogan del logotipo y a la vez el nombre de la aplicación es “Esfácil”, se ha elegido así 
porque lo que se quiere en todo momento con la aplicación es que los alumnos no creen una 
barrera de dificultad y que en todo momento sepan que son capaces. 
Ilustración 21. Logotipo Esfácil 
Parahacer la aplicación lo más amigable posible también se ha hecho uso de iconos, es decir 
que, en el botón de ayuda, por ejemplo, aparezca una interrogación. Esto no se puede hacer 
únicamente con Kodular. Para conseguirlo hace falta hacer uso de font, una web con una 
sección llamada materials, en la que se encuentran todos los iconos conocidos. 
De esta web se extraen los iconos de forma sencilla. Basta con buscar en el la web el icono 
y coger el nombre que aparece asociado a este. Tras esto, en Kodular, en el label en el que 
se quiere poner el icono, se selecciona en Font Typetace la opción Material Icons y se pone 
en text el nombre sin letra mayúscula con el que aparece el icono en la web. [32] 
Descripción de la solución propuesta
38 
Para mostrar el símbolo de la Ilustración 22 se lleva a cabo el proceso de la Ilustración 23. 
Ilustración 22. Icono email 
Ilustración 23. Configuración de un label 
4.3.2 Primera pantalla 
La primera pantalla que se encuentra el usuario al iniciar la aplicación contiene el logotipo y 
una espiral en movimiento demostrando que se está cargando la aplicación. Para hacer la 
aplicación más animada el logotipo llega a la pantalla rebotando desde el lado derecho de la 
pantalla. 
Ilustración 24. Primera pantalla 
Descripción de la solución propuesta
39 
4.3.3 Registro y autenticación 
La única forma de acceder a los contenidos de la aplicación es teniendo una cuenta registrada, 
por ello, tras cargar la aplicación aparecerá una ventana en la que elegir si el usuario se quiere 
registrar (porque no tiene una cuenta aún) o si quiere iniciar sesión porque ya se registró en 
el pasado. 
Ilustración 25. Pantalla de elección entre registro o iniciar sesión 
En el registro se piden datos como el nombre completo, teléfono, país, correo electrónico y 
contraseña. Para hacer la experiencia más sencilla y atractiva al usuario, el teclado que se 
despliega según el campo que vaya a completar el usuario, es diferente. Por ejemplo, el del 
correo electrónico, contendrá la “@” en el teclado principal, y el del número de teléfono es 
un teclado únicamente numérico. 
Descripción de la solución propuesta
40 
Ilustración 26. Pantalla de registro 
En el inicio de sesión, únicamente se piden el correo electrónico y la contraseña, y al igual 
que en el registro, en ambos casos se despliegan los teclados correspondientes. En esta 
pantalla, además aparece un mensaje ofreciendo registrarse en el caso que por equivocación 
se creyera tener cuenta y al final no. Esto se consigue mediante un texto clickable que redirige 
a la pantalla de registro. 
Ilustración 27. Pantalla de iniciar sesión 
Descripción de la solución propuesta
41 
De la misma forma, hay un clickable que permite recuperar la contraseña en el caso de que 
el usuario la haya olvidado. 
Cuando el usuario pulsa el “Recuperar contraseña” se le muestra una notificación 
indicándole que se le ha enviado un correo electrónico para poder restablecer la contraseña. 
Ilustración 28. Mensaje recuperar contraseña 
El correo electrónico que recibe el usuario tiene un link mediante el cual se accede a 
cambiar la contraseña. 
Ilustración 29. Correo electrónico de cambio de contraseña 
Tras pulsar el link, el usuario se encuentra con una web como la que se puede apreciar en la 
Ilustración 30. 
Ilustración 30. Cambio de contraseña 
Descripción de la solución propuesta
42 
4.3.4 Pantalla principal 
Una vez el usuario introduce sus credenciales correctamente, accede a la pantalla principal. 
En esta pantalla tras el logo se encuentra un mensaje informativo para motivar a los alumnos. 
Tras esto hay varios botones con las opciones de: 
• Acceder a los contenidos, los cuales están divididos en temas.
• Acceder a los retos.
• Acceder a la ventana de ayuda en la que se explica de forma sencilla el uso de la
aplicación.
Ilustración 31. Pantalla principal 
4.3.5 Contenidos y exámenes 
Los temas impartidos en la aplicación son: 
• Conocimientos básicos: Se ha añadido este temario a la aplicación porque tras
conversaciones con jóvenes estudiantes de ciencias sociales, queda claro que sus
conocimientos sobre tecnología son mínimos. Para aprender a programar es necesario
tener conocimientos, al menos básicos, del funcionamiento de un ordenador.
Descripción de la solución propuesta
43 
• ¿Por qué Python?: Para conseguir un público motivado hay que darle razones. La
decisión de enseñar Python ha pasado por una investigación previa y con este
apartado se quiere hacer saber al usuario el por qué Python es una buena opción.
• Terminología. Estos conocimientos se han querido dejar reflejados en la aplicación
debido al público objetivo del proyecto. Al ser personas no tecnológicas, son términos
que probablemente no hayan escuchado nunca.
• Elementos del lenguaje: En este apartado se comienza con lo que es el estudio de
código, se ejemplifican y explican conceptos como el de variable o diccionario.
• Estructuras: Con este apartado se pretende explicar los diferentes tipos de bucles,
elementos imprescindibles a la hora de programar.
Cada uno de los contenidos son botones. Al pulsarlos se abre una nueva pantalla en la 
que se encuentran divididos por secciones los conocimientos explicados. Como se puede 
ver en la Ilustración 33, dentro del tema de conocimientos básicos se encuentran 
diferentes conceptos en forma de botón como puede ser el de almacenamiento. 
Ilustración 32. Pantalla de contenido Ilustración 33. Pantalla conocimientos básicos
Descripción de la solución propuesta
44 
Al pulsar cada uno de estos botones, se encuentra una pantalla con la explicación. Todos los 
conceptos han sido explicados con vocabulario coloquial y de la forma más atractiva posible. 
Ilustración 34. Pantalla almacenamiento y velocidad 
Dentro de cada bloque de contenidos, excepto en el de la explicación de Python, se encuentra 
un examen con preguntas de verdadero o falso sobre lo impartido en esa lección. Esos 
resultados son almacenados en la base de datos para que así el usuario pueda consultarlos 
posteriormente. En caso de hacer el examen más de una vez, se guardará únicamente la última 
nota. El alumno conoce su nota a través de un mensaje que aparece en pantalla. 
Si el usuario quiere conocer los resultados de los exámenes realizados, en la pantalla de 
contenidos, a la misma altura que los diferentes temas se encuentra el botón que da paso a la 
pantalla de resultados. 
Descripción de la solución propuesta
45 
Ilustración 35. Pantalla de examen conocimientos 
básicos 
Ilustración 36. Pantalla con resultados de exámenes 
4.3.6 Retos 
Los retos examinan conocimientos de todo el temario impartido, lo cual quiere decir que los 
usuarios deben empezar con ellos cuando hayan acabado con el estudio de todo el contenido. 
Llega el momento de aplicar la gamificación y motivar a los alumnos. Para ello se ha utilizado 
una estructura por la cual no se puede acceder al segundo reto sin haber superado el primero 
y así sucesivamente, simulando la superación de niveles en un videojuego. 
Los retos consisten en completar código para crear una experiencia lo más similar a 
programar. 
Según el usuario inicia la pantalla de retos se encuentra con lo que se ve en la Ilustración 37. 
En la Ilustración 38 se puede apreciar como queda la pantalla de retos con el Reto 2 
desbloqueado. De la misma manera ocurre con el Reto 3 y el Reto 4. 
Descripción de la solución propuesta
46 
Ilustración 37. Pantalla sin desbloquear ningún reto Ilustración 38. Pantalla con Reto 2 desbloqueado
Si el usuario decide entrar en el Reto 1, el cual en el primer momento es su única opción se 
encuentra con una historia, en la que tiene que completar código. Según el usuario pulse el 
botón de comprobar, el cual esta haciendo scroll de la figura 36, le aparece un mensaje 
indicando las respuestas correctas 
Ilustración 39. Reto 1 
Descripción de la solución propuesta
47 
Si el resultado no es perfecto, es decir, se han tenidoerrores, se muestra tras el mensaje del 
resultado, un mensaje indicando que, si se quiere acceder al siguiente reto, se deben tener 
todas las respuestas bien.
Ilustración 40. Mensaje número de respuestas correctas Ilustración 41. Mensaje no puedes desbloquear Reto 
En el caso de ser todas las respuestas correctas se muestra un mensaje indicando que ya se 
ha desbloqueado el siguiente reto. 
Ilustración 42. Mensaje todas las respuestas correctas Ilustración 43. Mensaje Reto 2 desbloqueado 
4.3.7 Ayuda 
El objetivo de la pantalla de ayuda es explicar el funcionamiento de la aplicación al usuario. 
La realidad es que el publico al que va dirigida la aplicación, por lo general intuye su uso, 
pero por si acaso se ha decidido añadirla. Es una pantalla meramente informativa, en la que 
se explica la funcionalidad de cada uno de los botones de la pantalla principal, cómo 
encontrar los exámenes de cada tema y el cómo funcionan los retos. 
Ilustración 44. Pantalla de ayuda 
Descripción de la solución propuesta
48 
4.4 Back-end 
Se entiende por back-end la parte a la que no tienen acceso los usuarios, esta contiene la 
lógica de la aplicación que permite acceder a la información que se solicita. Esto incluye 
código, el cual puede estar simultáneamente en varios lenguajes y bases de datos. [33] 
4.4.1 Primera Pantalla 
Con los bloques de la Ilustración 45, se consigue que la imagen llegue a la pantalla de forma 
progresiva, desde la parte derecha. Igualmente se consigue el tener una espiral para mostrar 
que la aplicación está cargando. Como se puede apreciar, la espiral tiene un temporizador. 
Ilustración 45. Bloques de la primera pantalla 
4.4.2 Registro y Autenticación 
La pantalla que se abre tras cargar la aplicación es la que permite elegir la opción entre 
registrarse o iniciar sesión. Todo lo que incluye el login se ha hecho sobre la misma screen, 
por lo tanto, las secuencias de lo que aparece en la aplicación se hacen mediante componentes 
visibles y no visibles, por ello, lo primero que hace al inicializarse es el poner el logotipo, 
(Vertical bienvenida) y los botones con las opciones de registro e iniciar sesión (Vertical 
botones). 
Al ser una aplicación móvil hay que contar con que el propio dispositivo tiene sus botones, 
por eso se controla el evento de ir a la página de atrás dependiendo en cual de los 
componentes se encuentre. 
Descripción de la solución propuesta
49 
Ilustración 46. Bloques de inicio y botón de atrás 
Tras esto se procede a hacer visibles y no visibles los componentes según la opción elegida. 
Por otro lado, se hace lo mismo con el label clickable de encontrándose iniciando sesión, 
cambiar a registro. 
Ilustración 47. Gestión de bloques visibles y no visibles 
Una vez en la pantalla de registro se deben rellenar diversos datos, pero solo se va a 
comprobar la validez de los importantes, es decir, del correo y de la contraseña. Esto se debe 
a que el resto datos son meramente informativos y que, por ejemplo, en el número de teléfono, 
si se limita el número de caracteres a 9, puede no encajar con números de otros paises. 
Se va a verificar que los campos de correo y contraseña no estén vacíos, que el correo 
contenga el símbolo “@” y que la contraseña sea de 6 caracteres. 
En caso de que todos los datos sean correctos, se utiliza la función 
CreateUserWithEmailAndPassword para crear la cuenta de usuario. 
Un problema común en el registro de correos es el espacio. Debido al autocompletado, 
muchas veces se escribe sin que el usuario se de cuenta, lo cual puede traer problemas de 
autenticación en el futuro. Por ello se ha utilizado el “trim” que lo que hace es eliminar los 
espacios. 
Descripción de la solución propuesta
50 
Ilustración 48. Bloques del botón registrar 
Para el inicio de sesión se hace uso de la función SignInWithEmailAndPasswor de la 
extensión Authentication a la cual, se añade, al igual que en el registro el “trim”. 
Ilustración 49. Bloques del botón iniciar sesión 
Tanto después de iniciar sesión como de registrarse, el método FirebaseAuthUserData nos 
devuelve distintos valores. Estos valores se han utilizado para almacenar la información en 
la base de datos. 
Descripción de la solución propuesta
51 
Además, se ha utilizado el componente “notifier” para avisar al usuario en caso de que los 
datos sean correctos (que es la única forma de que salte esta función) de que todo está bien. 
El valor de localId lo necesita la aplicación en otras ventanas, por ello lo guardamos en una 
variable local, que se pasa a la próxima pantalla “Home” con el componente “open another 
screen with start value”. 
Ilustración 50. Bloques de creación de campos en la base de datos 
La información en base de datos se guarda en forma de árbol, lo que quiere decir que habrá 
una rama, “usuarios” de la que partirán ramas con cada uno de los usuarios nombradas por 
su localId (valor único por usuario que nos devuelve la función), y dentro de esta rama de 
cada usuario se almacenan el resto de los datos. 
Descripción de la solución propuesta
52 
Ilustración 51. Vista de almacenamiento de datos en Realtime Database 
La extensión de Authentication además tiene su propia gestión de errores, por ello según los 
mensajes de error que señale la propia aplicación, mediante e componente “notifier” se le 
informa al usuario. 
Ilustración 52. Bloques de gestión de errores en Firebase 
Descripción de la solución propuesta
53 
La gestión del cambio de contraseña se ha llevado a cabo con el siguiente bloque, en el cual 
se gestiona el acceso al API. 
Ilustración 53. Bloque cambio de contraseña 
En la ventana login, se ha creado un bloque que lo cierre para que no consuma memoria RAM del 
dispositivo móvil. Según se inicia sesión, se cierra esta ventana. 
Ilustración 54. Bloque para el ahorro de memoria RAM 
Para simplificar todo lo anteriormente comentado, en las Ilustraciones 55 y 56 se muestran 
los diagramas de secuencia del registro y de iniciar sesión respectivamente. 
La creación de los diagramas de secuencia se ha llevado a cabo con Visual Paradigm [34], 
una herramienta que facilita la creación de todo tipo de diagramas UML. 
Ilustración 55. Diagrama de secuencia Registro 
Descripción de la solución propuesta
54 
Ilustración 56. Diagrama de secuencia Inicio de sesión 
4.4.3 Pantalla principal 
Los bloques en esta pantalla tienen únicamente la función de gestionar los botones pulsados 
y el pasar a cada nueva pantalla el localId del usuario. En todas las pantallas se intercambia 
el localId como valor principal. 
Ilustración 57. Gestión de botones en pantalla principal 
Descripción de la solución propuesta
55 
4.4.4 Contenidos y exámenes 
Los exámenes son de tipo verdadero o falso con checkbox, eso quiere decir, que basta con 
comprobar que la respuesta correcta esté marcada y la otra no. Cuando el usuario pulsa el 
botón de comprobar, se va recorriendo cada respuesta y si es correcta, se incrementa el 
contador “nota” en 1. Finalmente se informa al usuario con una notificación de las respuestas 
correctas sobre el total. El examen se puede repetir tantas veces como el usuario quiera, 
guardándose únicamente el resultado del último intento. Si posteriormente quiere comprobar 
los resultados, deberá acceder a la pantalla de “resultados de exámenes” indicada en el 
apartado 4.4.4. 
Ilustración 58. Bloques del botón comprobar de un examen 
Los usuarios tienen acceso a los resultados de todos sus exámenes en una misma ventana. 
Las notas se guardan al igual que los datos de usuario en la rama del localId del propio 
usuario, y se guarda únicamente la ultima nota obtenida en cada examen. 
El acceso a la base de datos de hace con el componente Firebase Database y con su función 
Get value. A esta función hay que pasarle el tag que se quiere buscar, y en el caso de que 
haya establecidas “ramas” como es el caso de este proyecto, antes de llamar a la base de 
datos, hay que establecer la ruta en la que encontrarlos tags. 
Descripción de la solución propuesta
56 
Ilustración 59. Bloques del inicio de la pantalla resultados 
Ilustración 60. Almacenamiento en Firebase de resultados de exámenes 
La función Get Value desemboca en el evento got value, que es donde se establece el valor 
en función de la etiqueta. 
Ilustración 61. Bloques de la obtención de valores de Firebase 
Descripción de la solución propuesta
57 
4.4.5 Retos 
Para controlar que solo se acceda al siguiente reto habiendo obtenido la máxima calificación 
en el anterior reto, se utilizan componentes visibles y no visibles. 
En la Ilustración 62 se puede apreciar como se extrae de base datos la puntuación de cada 
reto, siendo 4 el máximo en todas. En el caso de ser 4 el resultado obtenido se desbloquea el 
siguiente reto. 
Ilustración 62. Bloques de visibilidad de retos 
Al ser respuestas textuales, se comprueba que el usuario ha introducido exactamente una 
cadena de caracteres y solo en el caso de estar perfectamente escrita cuenta como respuesta 
correcta. 
Se avisa al usuario de la puntuación que ha obtenido. En el caso de tener todas bien se le 
avisa de que ha desbloqueado el Reto 2 y en el caso de no ser así se le recuerda que debe 
tener todas las respuestas bien para desbloquearlo 
Descripción de la solución propuesta
58 
Ilustración 63. Corrección de reto 
Ilustración 64. Almacenamiento de retos en Firebase 
Descripción de la solución propuesta
59 
5 Resultados 
En este apartado se pretende abordar una reflexión sobre los resultados obtenidos con el 
proyecto. 
El objetivo principal de este es el enseñar a programar en Python a jóvenes de entre 14 y 18 
años. Por lo tanto, todas las pruebas a las que ha sido expuesto el proyecto han sido con 
usuarios de ese rango de edad. 
Se han realizado dos tipos de prueba, facilitando al usuario la aplicación para que pueda 
invertir todo el tiempo que necesite y supervisando su uso durante un tiempo limitado. 
Amigabilidad de la aplicación 
En ambas pruebas se ha podido comprobar que es una aplicación intuitiva y amigable. Este 
es un campo en el que se ha trabajado considerablemente ya que se quiere que los usuarios 
aprendan a programar, no a usar una aplicación complicada. 
Cierto es que estos jóvenes no tienen perfiles tecnológicos, pero todos tienen dispositivos 
móviles o incluso tabletas. Esto ha permitido que no necesiten ninguna explicación de como 
ir para atrás o interpretar los símbolos utilizados. 
Exámenes y retos 
Los usuarios que han utilizado la aplicación de manera supervisada y no demasiado tiempo 
han adquirido peor los conocimientos. No han sido capaces de procesar la información 
perfectamente y han tenido varios errores en las pruebas. Además, los conceptos que en 
principio habían aprendido, con las horas se les han ido olvidando. 
Los usuarios que han tenido la aplicación a libre disposición no solo han pasado las pruebas 
de forma satisfactoria, sino que han asimilado las ideas: al volver a realizar las pruebas con 
un intervalo de 24 horas, los resultados fueron igualmente satisfactorios. 
Esta diferencia se debe a que estos conceptos son totalmente nuevos para la mayoría de ellos, 
eso quiere decir que el proceso de aprendizaje requiere mucho más tiempo del que se necesita 
para aprender de algo de lo que se tiene una base. 
Esta prueba demuestra que la programación es totalmente apta para el autoaprendizaje ya 
que, de esta manera, cada alumno se puede tomar su tiempo sin sentirse presionado. 
Resultados
60 
61 
6 Presupuesto 
En este apartado se van a evaluar los costes derivados del desarrollo de este proyecto. Estos costes 
están divididos en el personal necesario para el desarrollo de la aplicación, hardware requerido y 
herramientas software. 
Coste de personal 
Para el desarrollo del proyecto se ha contado con diversos especialistas. 
El primero de todos ha sido un experto en educación, quien ha aportado el conocimiento sobre 
las necesidades del alumnado y posibles soluciones. El sueldo de un experto en educación es 
aproximadamente 25€ /h. 
Una persona adecuada para la coordinación y supervisión del proyecto cuyo sueldo es 
aproximadamente 40€/h. 
Un desarrollador software tanto front-end como back-end. Los sueldos de los programadores 
software varían totalmente según su experiencia. Para este proyecto se ha requerido un perfil 
software con al menos 1 año de experiencia tanto en front-end como en back-end, por ello su 
sueldo estimado será 30€/h. En la Tabla 2 se puede ver el precio estimado a todo el personal. 
Tabla 1. Gastos en personal 
Perfil Sueldo Horas Total 
Experto en educación 25€/h 8 200€ 
Coordinador 40€/h 30 1.200€ 
Desarrollador Software 30€/h 400 12.000€ 
Hardware 
A lo largo del proyecto se han necesitado dos dispositivos hardware, un ordenador y un móvil. 
El ordenador ha sido utilizado para la programación de la aplicación y el dispositivo móvil se ha 
necesitado para probar el correcto funcionamiento de la aplicación. Se pueden ver los precios 
estimados de ambos dispositivos en la Tabla 3. 
Tabla 2. Gastos en Hardware 
Concepto Cantidad Precio 
Ordenador 1 700€ 
Dispositivo móvil 1 600€ 
Presupuesto 
62 
Software 
A lo largo del proyecto se ha utilizado Kodular y Firebase. Kodular es completamente gratuito, 
en cambio Firebase ofrece diferentes tarifas. Dentro de las tarifas, hay una gratuita que es la que 
se ha utilizado para el proyecto. Los precios estimados a software aparecen en la Tabla 4. 
Tabla 3. Gastos en Software 
Concepto Precio 
Kodular 0€ 
Firebase 0€ 
Total 
En total, teniendo en cuenta los valores anteriormente mencionados, el coste del proyecto 
asciende a 14.700€. 
Tabla 4. Gastos totales 
Concepto Coste 
Personal 13.400€ 
Hardware 1.300€ 
Software 0€ 
Total 14.700€ 
Presupuesto 
63 
7 Conclusiones 
En este capítulo se muestra una visión general de proyecto exponiendo el problema, 
evaluando la solución proporcionada y examinando las conclusiones obtenidas del resultado 
final. Igualmente, se evalúan las dificultades encontradas y se proponen futuras mejoras. 
7.1 Conclusiones 
El objetivo inicial del proyecto era el desarrollar una aplicación para enseñar conocimientos 
de programación a usuarios de entre 14 y 18 años con perfiles no tecnológicos. Para que esta 
aplicación sea apta para este publico debe ser amigable y sencilla a la par que usar 
vocabulario coloquial. 
El resultado es una aplicación Android, desarrollada en colores que facilitan el aprendizaje y 
con todos los conceptos explicados con vocabulario simple. 
En el resultado también encontramos dos tipos de evaluación, los exámenes, que evalúan de 
forma simple los conocimientos adquiridos y los retos, que emplean la gamificación para 
motivar al alumno. 
Por ello se concluye que se han logrado los objetivos establecidos al comiendo del proyecto 
gracias a una investigación sobre los comportamientos y gustos de los usuarios a los que va 
dirigida la aplicación. 
El éxito de la aplicación ha sido probado con alumnos del rango de edad establecido. 
Aquellos alumnos que han probado la aplicación por su cuenta, sin ser supervisados en 
tiempo, como se indica en el apartado 5, han superado todas las pruebas y muchos de ellos 
se plantean seguir aprendiendo programación e incluirla en su futuro laboral 
7.2 Dificultades en el desarrollo del proyecto 
Las principales dificultades de este proyecto han sido respecto a conocimientos. Al comienzo 
de éste, el desarrollador no conocía la programación por bloques, ni la herramienta Kodular, 
ni la herramienta Firebase. 
Por ello, al comienzo del desarrollo tuvo que invertir tiempo en su aprendizaje estudiando la 
documentación que ofrecen las propias plataformas. Además, al no haber usado nunca esas 
herramientas el desarrollador se han encontrado con problemas, que aun siendo sencillos han 
necesitado inversión de tiempo. 
Conclusiones 
64 
7.3 Mejoras y posibles líneas de ampliación del proyecto 
Como futuras mejoras,