UNIDAD EDUCATIVA TÉCNICO HUMANÍSTICO

“JOSEFA MANUELA GANDARILLAS”

CARRERA DE SISTEMAS INFORMÁTICOS

DESARROLLO DE UN REPOSITORIO WEB PARA LA GESTIÓN Y

CONSULTA DE PROYECTOS DE TITULACIÓN DE LA
UNIDAD EDUCATIVA TÉCNICO HUMANÍSTICO JOSEFA MANUELA
GANDARILLAS

Proyecto presentado como requisito para

obtener el Grado Académico de Técnico Medio
en la carrera de Sistemas Informáticos

POSTULANTE: COLQUE VELASCO RICARDO ISRAEL

GONZALEZ ORTIZ ISAAC MATÍAS

TUTOR: LIC. PUENTE LARA MARÍA CRISTINA

COCHABAMBA - BOLIVIA
2024
 AGRADECIMIENTOS

Los autores expresan sus agradecimientos:

Al:​ Todo, que nos da la oportunidad de existir y seguir adelante con las
oportunidades que nos comparte.

A:​ Nuestras familias, por apoyarnos en el desarrollo de este proyecto, cuidando y

acompañándonos en todo el transcurso de nuestra vida, alivianando toda carga que
pudimos haber tenido.

Al:​ Lic. Marcelo Humacayo Sarmiento, por aconsejarnos en cada etapa de la

elaboración de este proyecto.

A la:​ Lic. Maria Cristina Puente Lara, por su tutela y apoyo con el desarrollo de este
proyecto.

A la:​ Lic. Beatriz, por ser una excelente profesora y asesora en el tiempo que
cursamos cuarto y quinto de secundaria, de la misma forma, por ser un ejemplo para
nosotros en muchos aspectos de la vida

Al:​ Lic. Alfaro, por ser un profesor dedicado y apasionado por su trabajo, que se
demuestra en nuestra pasión por la filosofía.
Asi tambien, el estudiante Colque Velasco Ricardo Israel expresa sus agradecimientos:

​ A:​ Mi madre que me apoyó, motivó, guió y enseñó a seguir.

​ A:​ Mi hermano que me apoyó y fortaleció sus experiencias.

​ A:​ Mi abuela que se preocupa y cuido en momentos necesarios.

​ A:​ Mis mascotas que me alegraron y me acompañaron en todo momento .

​ A:​ Mi pareja que me apoyó y motivó en algunos momentos necesarios

​ A:​ Mis amigos que me apoyaron y me enseñaron indirectamente sobre esta vida.

Del mismo modo, el estudiante Gonzales Ortiz Isaac Matias expresa sus agradecimientos:

A:​ Dios por darme la fortaleza y oportunidad de seguir adelante.

A:​ Mi familia por el apoyo que me brindaron en la elaboración de este proyecto.

A:​ Mis mascotas, tanto las ahora presentes, como las que ya no me acompañan;
por haberme brindado momentos llenos de alegría en los momentos inciertos para
este proyecto.

A:​ Mis amigos por brindarme tiempos de alegría y distracción, incluso en los más
estresantes.

Al:​ Colegio por hacerme entender que las riendas de mi educación las debo
tomar yo, y que ningún profesor se hará responsable de ello.
 DEDICATORIA

Este trabajo está dedicado a:

A mi Madre que me acompañó, guió, cuidó, mantuvo;

enseñándome en esta vida, en todo este tiempo que
tuve desde que me dio la vida.

A mi hermano, que me guió, cuidó y enseñó sobre

algunas realidades de esta vida.

A mi abuela, que me cuida y se preocupa por mí en

aquellos momentos donde no tenía quien me acompañe.

A mis mascotas y otra parte de ellas que ya no se

encuentran en este mundo terrenal, donde me
acompañaron en momentos de soledad y me motivaron
en algunas situaciones.

( Est. Colque Velasco Ricardo Israel)

A Dios, por darme la fortaleza y oportunidad de seguir

adelante con mi vida, mi familia, mis mascotas y mis
estudios.

A mi familia, por haberme cuidado, querido y

acompañado a lo largo de todos estos años; por haber
disculpado mis falencias y enseñado el camino que se
debe recorrer.

Y por último, a mis mascotas, tanto las ahora presentes,

como las que ya no me acompañan; por haberme
brindado momentos llenos de alegría en tiempos de
zozobra.

(Est. Gonzales Ortiz Isaac Matias)

 ÍNDICE DE CONTENIDOS

CAPÍTULO 1. INTRODUCCIÓN............................................................................................... 1
CAPÍTULO 2. PLANTEAMIENTO DEL PROBLEMA...............................................................2
2.1. DIAGNÓSTICO Y DESCRIPCIÓN DE LA REALIDAD................................................. 2
2.2. IDENTIFICACIÓN DEL PROBLEMA............................................................................ 7
2.3. ANÁLISIS CAUSA-EFECTO.........................................................................................8
2.4. FORMULACIÓN DEL PROBLEMA.............................................................................. 8
2.5. OBJETIVOS..................................................................................................................9
2.5.1. Objetivo general...................................................................................................9
2.5.2. Objetivos específicos y acciones......................................................................... 9
2.6. JUSTIFICACIÓN......................................................................................................... 11
2.7. ALCANCES.................................................................................................................12
CAPÍTULO 3. MARCO REFERENCIAL................................................................................. 13
3.1. ESQUEMA DEL MARCO REFERENCIAL................................................................. 19
3.2. CONTENIDO DEL MARCO REFERENCIAL..............................................................19
3.3. TÉCNICAS Y MÉTODOS DE INVESTIGACIÓN........................................................ 21
3.3.1. Métodos de recolección de datos en la investigación........................................22
3.3.2. Técnicas de recolección de datos en la investigación....................................... 23
3.3.3. Instrumentos de recolección de datos en la investigación.................................24
3.4. PROGRAMACIÓN WEB.............................................................................................25
3.4.1. HyperText Markup Language (HTML)................................................................25
3.4.1.1. Estructura base en HTML......................................................................... 26
3.4.2. Cascading Style Sheets (CSS).......................................................................... 29
3.4.2.1. Selectores................................................................................................. 30
3.4.2.2. Modelo de caja..........................................................................................30
3.4.2.3. Posicionamiento........................................................................................31
3.4.2.4. Display...................................................................................................... 31
3.4.2.5. Diseño responsivo.....................................................................................31
3.4.2.6. Animaciones..............................................................................................32
 3.5. PROGRAMACIÓN CON JAVASCRIPT...................................................................... 32
3.5.1. Object Oriented Programming (OOP)................................................................35
3.5.1.1. Herencia....................................................................................................36
3.5.2. Document Object Model (DOM).........................................................................37
3.5.3. Programación asincrónica................................................................................. 37
3.6. BASE DE DATOS....................................................................................................... 38
3.7. PROGRAMACIÓN BACK-END.................................................................................. 40
3.7.1. Lenguajes de programación del back-end.........................................................40
3.7.1.1. Javascript.................................................................................................. 40
3.7.1.2. C#..............................................................................................................41
3.7.1.3. Python....................................................................................................... 42
3.7.2. Node.js...............................................................................................................44
3.7.2.1. Express.js..................................................................................................45
3.8. (VCS) SISTEMA DE CONTROL DE VERSIONES GIT..............................................45
3.8.1. Registro de cambios (Commit).......................................................................... 47
3.8.2. Ramas (branches)............................................................................................. 47
3.8.3. Fusiones (merges)............................................................................................. 47
3.8.4. Fork....................................................................................................................48
3.9. DESARROLLO COLABORATIVO GITHUB................................................................48
3.9.1. Cómo funciona Git y GitHub juntos....................................................................49
3.10. ENTORNOS DE DESARROLLO INTEGRADO (IDE).............................................. 49
3.10.1. Visual Studio Code (VS Code).........................................................................51
3.10.1.1. Extensiones en Visual Studio (VS Code)................................................51
3.11. HOSTING DE SITIOS WEB......................................................................................52
3.11.1. Dominio.................................................................................................................. 52
CAPÍTULO 4. DESARROLLO DE LA INNOVACIÓN.............................................................54
4.1. PLANIFICACIÓN Y ORGANIZACIÓN........................................................................ 54
4.1.1. Cronograma de actividades............................................................................... 54
4.2. DESARROLLO DEL PRODUCTO O SERVICIO........................................................ 55
 4.2.1. Identificación de los requerimientos del sistema............................................... 55
4.2.1.1. Requerimientos funcionales......................................................................55
4.2.1.2. Requerimientos no funcionales.................................................................57
4.2.2. Estructuración de base de datos e interacción con el servidor..........................61
4.2.2.1. Selección del lenguaje.............................................................................. 61
4.2.2.2. Servicios de Almacenamiento...................................................................62
4.2.2.3. Diseño back-end....................................................................................... 63
4.2.2.4. Definición de Autenticación y Autorización............................................... 65
4.2.2.5. Modelo de Datos (Esquemas MongoDB)..................................................66
4.2.3. Diseño de la interfaz de usuario y estilo visual.................................................. 68
4.2.3.1. Desarrollo y estructura de la interfaz........................................................ 68
4.2.3.2. Prototipos y Herramientas Utilizadas........................................................ 71
4.2.3.3. Adaptación a Dispositivos......................................................................... 72
4.2.3.4. Estilo Visual...............................................................................................73
4.3. RECURSOS................................................................................................................74
4.3.1. Humanos............................................................................................................74
4.3.1.1. Estudiante 1.............................................................................................. 74
4.3.1.2. Estudiante 2.............................................................................................. 75
4.3.1.3. Tutor del proyecto..................................................................................... 77
4.3.1.4. Profesor de BTH....................................................................................... 77
4.3.2. Materiales.......................................................................................................... 78
4.3.3. Financieros........................................................................................................ 79
4.3.3.1. Gastos realizados hasta el momento........................................................79
4.3.3.2. Gastos futuros estimados......................................................................... 79
4.4. PRESUPUESTO.........................................................................................................80
CAPÍTULO 5. METODOLOGÍA.............................................................................................. 81
5.1. ENFOQUE DE LA INVESTIGACIÓN..........................................................................81
5.2. TIPO DE INVESTIGACIÓN........................................................................................ 81
5.3. MÉTODO DE INVESTIGACIÓN................................................................................. 81
 5.4. TÉCNICAS E INSTRUMENTOS DE RECOLECCIÓN............................................... 81
CAPÍTULO 6. CONCLUSIONES Y RECOMENDACIONES...................................................82
6.1. CONCLUSIONES....................................................................................................... 82
6.2. RECOMENDACIONES...............................................................................................83
BIBLIOGRAFÍA.........................................................................................................................1
ANEXOS....................................................................................................................................5
ANEXO A: Encuesta a la promoción de la Unidad Educativa Técnico Humanístico Josefa
Manuela Gandarillas............................................................................................................ 5
ANEXO B: Encuesta a la pre-promoción de la Unidad Educativa Técnico Humanístico
Josefa Manuela Gandarillas................................................................................................ 1
ANEXO C: Entrevista a la ex-estudiante Velásquez Espíndola Cleisabeth Rashely...........1
 1

CAPÍTULO 1.​ INTRODUCCIÓN

En los últimos años, muchas instituciones educativas del nivel secundario se han
estado sumando en la implementación del Bachillerato Técnico Humanístico (BTH),
modalidad de educación en la cual se brindan talleres y laboratorios de una especialidad en
específico a los estudiantes para así poder titularse como “Técnico medio” en dicha área.

La modalidad de graduación en las unidades educativas técnicas humanísticas plenas, se

resume en la presentación de un proyecto de grado —método similar al de las
universidades—, cuya labor es evaluar el uso del conocimiento adquirido en pro de la
solución a un problema.

Dicho proyecto se debe documentar por un medio escrito, donde se pone en evidencia todo
el contexto en el que se desarrolla el proyecto, los problemas que pretende solucionar, la
fundamentación teórica, así como también los pasos que se realizaron para la ejecución del
ya antes mencionado. En otras palabras, el documento será aquello que atestiguará todo lo
concerniente a dicho proyecto.

La labor de documentación va más allá de la sola idea de una impresión escrita, pues
siempre ha de existir el riesgo de la pérdida de aquel medio escrito o en su defecto, del
acceso permanente a pesar de la existencia del material susodicho, material que a su vez
juega una labor importante a la hora de aportar conocimientos e información para más
proyectos futuros y explotables.

Ante tal peligro, existen diversos métodos de preservación de la información, como

bibliotecas y repositorios. Los repositorios siendo en particular espacios digitales
centralizados donde se almacena información de diversa índole, principalmente científica.
Ambos métodos de conservación de la información son muy usados a nivel académico,
sobre todo en las universidades en las que suelen contar con almacenamiento físico y digital,
facilitando el acceso a un amplio catálogo de información.

En el nivel educativo en el que se plantea el BTH, resulta menester contar con métodos de
preservación de la información, ya que en el último tramo de esta etapa se trabaja en gran
medida en el proyecto de grado, haciendo habitual la consulta de información relacionada a
los mismos.

A razón de lo ya mencionado, en el presente documento se expondrá el uso de

programación y conocimientos de diseño web para el mejoramiento de las necesidades que
se poseen con la gestión y acceso a los proyectos de grado en el colegio Josefa Manuela
Gandarillas ubicada en la ciudad de Punata, Cochabamba, Bolivia.
 2

CAPÍTULO 2.​ PLANTEAMIENTO DEL PROBLEMA

2.1.​ DIAGNÓSTICO Y DESCRIPCIÓN DE LA REALIDAD

De las encuestas realizadas el 18 de septiembre de la gestión 2024 en las

instalaciones de la Unidad Educativa Técnico Humanístico Josefa Manuela Gandarillas a 67
de los 90 estudiantes de la promoción (ANEXO A), se puede destacar la siguiente
información:

El 46,3% de los encuestados tardó entre 1 y 7 días para decidir el tema de su proyecto.

El 55,2% de los estudiantes utiliza Google como su principal medio de consulta, como se
logra apreciar en la Figura 1.

Figura 1: Resultados de la segunda pregunta del ANEXO A

Fuente: Elaboración propia

Un 52,2% y un 43,3% de los encuestados calificó como difícil la recopilación de información

acerca de la elaboración del documento y el tema del proyecto respectivamente, como se
aprecia en la Figura 2.
 3

Figura 2: Resultados de las preguntas cuatro y tres del ANEXO A

Dificultad para recopilar Dificultad para recopilar

información sobre información sobre el tema
elaboración del documento del proyecto
Fuente: Elaboración propia

El 41,8% de los estudiantes lleva desarrollando su proyecto entre 1 y 2 meses.

Un 53,7% de los estudiantes se inspiró en otros proyectos de distinto origen, como muestra
la Figura 3.

Figura 3: Resultados de la sexta pregunta del ANEXO A

Fuente: Elaboración propia

 4

El 56,7% de los encuestados tuvo acceso a proyectos de gestiones pasadas.

Y por último, el 70,1% de los encuestados identificó la falta de tiempo como la mayor
dificultad en el desarrollo de su proyecto.

De esta manera, podemos objetar que, para la mayoría de los estudiantes encuestados el
tiempo no es un factor que los acompañe; entre las labores educativas, evaluaciones,
representaciones obligatorias y una gran cantidad de actividades esparcidas a lo largo del
año, no son sino el lapso de los últimos cuatro meses en el caso de más de las tres cuartas
partes de los encuestados cuando inician el proceso del desarrollo de su proyecto, esto a su
vez, debido al tardío actuar de parte de la institución educativa ante el proceso de
elaboración de proyectos, de esa manera siendo el problema más presente en los
estudiantes de promoción, la falta de tiempo, que se ve condimentada con falta de
conocimiento para dicha acción y como tercer punto, problemas con el asesoramiento.

Por si fuera poco, la dificultad con la que aproximadamente 9 de cada 10 encuestados

calificaron la recopilación de información sobre el tema de sus proyectos, así como también,
la elaboración del documento de las mismas tienden entre una dificultad extrema y
moderadamente difícil, siendo solamente los restantes quienes calificaron dicha acción como
sencilla, fenómeno visto en la Figura 1, lo que los obliga a depender de fuentes de
información informales como Google, la inteligencia artificial o la consulta reiterada a
profesores.

Pese a esto, cerca a la mitad de los estudiantes encuestados han tomado como inspiración
otros proyectos, ya sean de la misma unidad educativa u otras instituciones de índole
académica, pero sobre todo, proyectos de gestiones pasadas de la ya mencionada
institución educativa, denotando en ella la necesidad que se tiene por el acceso a proyectos
guías que sirvan como ayuda o como punto de inicio para la elaboración de otros proyectos,
es así como, poco más de la mitad de encuestados, siendo más exactos, solamente el
56,7% de los interpelados tuvieron acceso a algunos documentos pertenecientes a proyectos
de gestiones pasadas de la Unidad Educativa Técnico Humanístico Josefa Manuela
Gandarillas, de los cuales un 73,7% de las personas que señalaron tener acceso a dichos
documentos lo usaron como inspiración para sus propios proyectos.
 5

De la misma forma, de la encuesta realizada en la misma fecha a 69 de 107

estudiantes de la pre-promoción de la Unidad Educativa Técnico Humanístico Josefa
Manuela Gandarillas (ANEXO B), se puede destacar la siguiente información:

Aquí tienes los porcentajes corregidos basados en un total de 69 encuestados:

El 72,5% de los estudiantes no tiene noción de cómo realizar un proyecto y su debida

documentación.

El 65,2% no tiene una idea de qué tema se basará su proyecto.

El 42,0% de los estudiantes cuenta con el apoyo familiar para la realización de su proyecto,
como se puede apreciar en la Figura 4.

Figura 4: Resultados de la tercera pregunta del ANEXO B

Fuente: Elaboración propia

El 34,8% de los estudiantes utilizaría la información de Google como guía principal para la
realización de su proyecto.
 6

El 46,4% de los estudiantes enfocan su proyecto en el área de informática, como se aprecia

en la Figura 5.

Figura 5: Resultados de la quinto pregunta del ANEXO B

Fuente: Elaboración propia

El 36,2% de los estudiantes considera que su proyecto beneficiará a la institución educativa.

Por último, el 62,32% de los estudiantes no basa su proyecto en otro proyecto.

La característica más visible de las encuestas de quinto de secundaria es la presencia

considerable de desconocimiento respecto a la elaboración de proyectos, así como su
debida documentación; sin embargo, cerca del número total de estudiantes que sí tienen un
tema del que se basará su proyecto, están basados en otros proyectos para la elaboración
del suyo.
 7

Por último podemos destacar la entrevista a la estudiante graduada (Gestión 2023)

de la Unidad Educativa Técnico Humanístico Josefa Manuela Gandarillas, Velásquez
Espíndola Cleisabeth Rashely (ANEXO C)

En esta entrevista podemos rescatar que disponía tiempo en su planificación y análisis del
tema de su proyecto, posteriormente en la previa elaboración de su informe tuvo dificultades
con la falta de comunicación como también coordinación con su grupo de proyecto, ya que la
mayor parte de la elaboración de su proyecto la realizó la ex-estudiante de la Unidad
Educativa Técnico Humanístico Josefa Manuela Gandarillas, Velásquez Espíndola
Cleisabeth Rashely.

De igual modo, no presentó mucha comunicación de parte del tutor, dado que por esa razón
tuvo aquella dificultad de mala coordinación y comunicación con su grupo de proyecto, así
mismo, de esa manera solo tuvo 3 revisiones con su tutor en todo ese año.

2.2.​ IDENTIFICACIÓN DEL PROBLEMA

Se puede destacar que aunque sea poco más de la mitad de estudiantes que tienen
acceso a la información de proyectos anteriores, la naturaleza de la misma se presume
ineficiente, limitada, desorganizada y descentralizada; lo que, apoyado con el factor limitado
de tiempo y un claro desconocimiento del tema arrastrado desde cursos anteriores, obliga a
los estudiantes a recurrir a medios más informales para la recolección de información.

¿Cuáles son las dificultades en la elaboración de proyectos de grado dentro de la

Unidad Educativa Técnico Humanístico Josefa Manuela Gandarillas en el período cursado de
promoción y pre-promoción?

En base a la pregunta anterior, encontraremos los siguientes problemas:

●​ Tiempo insuficiente para la elaboración de los proyectos.

●​ Desconocimiento de la elaboración de los proyectos, así como su documentación.
●​ Falta de coordinación y comunicación con los integrantes del proyecto, así como de
los profesores y tutores.
●​ Subestimación de la realización del proyecto como la documentación.
●​ Falta de apoyo para la elaboración del proyecto.
●​ Dificultad en el almacenamiento y gestión de los proyectos.

●​ Limitación en la consulta de información de los proyectos.

 8

●​ Inicio tardío con el análisis e ideas para la realización del proyecto.

2.3.​ ANÁLISIS CAUSA-EFECTO

Se usará la herramienta de árbol de problemas para dar a conocer la situación

problemática identificada, la misma se puede ver sintetizada en la figura 6.

​ Figura 6: Árbol de problemas

​ Fuente: Elaboración Propia

2.4.​ FORMULACIÓN DEL PROBLEMA

Dificultad en el almacenamiento, gestión y limitada fuente de consulta de información

de los proyectos de titulación elaborados por los estudiantes de la Unidad Educativa Técnico
Humanístico Josefa Manuela Gandarillas, provoca un acceso y organización ineficiente;
además de un tiempo insuficiente en la elaboración de dicha información.
 9

2.5.​ OBJETIVOS

2.5.1.​ Objetivo general

Desarrollar un repositorio web que permita almacenar, gestionar y consultar

información de los proyectos de titulación elaborados por los estudiantes de la Unidad
Educativa Técnico Humanístico Josefa Manuela Gandarillas, mediante conocimientos
en diseño web, base de datos y programación de servidor; para mejorar el acceso,
organización y tiempo de elaboración de dicha información.

2.5.2.​ Objetivos específicos y acciones

●​ Analizar la situación actual y los requerimientos del proceso de elaboración de

proyectos de titulación por la cual pasan los estudiantes de la
Unidad Educativa Técnico Humanístico Josefa Manuela Gandarillas.
●​ Planificar la estructura, diseño y funcionalidad con la que contará el repositorio
web.

●​ Implementar el repositorio web para el uso libre de los estudiantes y

profesores de la Unidad Educativa Técnico Humanístico Josefa Manuela
Gandarillas.

Tabla 1: Objetivos específicos y acciones

OBJETIVOS ESPECÍFICOS ACCIONES

●​ Encuestar a los estudiantes de

promoción y pre-promoción de la

Analizar la situación actual y los Unidad Educativa Técnico

requerimientos del proceso de Humanístico Josefa Manuela

elaboración de proyectos de titulación Gandarillas.

por la cual pasan los estudiantes de la ●​ Entrevistar a alumnos graduados

Unidad Educativa Técnico Humanístico de la Unidad Educativa Técnico

Josefa Manuela Gandarillas. Humanístico Josefa Manuela

Gandarillas.
●​ Identificar los requerimientos del
sistema.
 10

OBJETIVOS ESPECÍFICOS ACCIONES

●​ Estudiar los lenguajes de

programación: HTML, CSS y
JavaScript.
●​ Diseñar la interfaz de usuario y el
estilo visual con el que contará el
repositorio web.
Planificar la estructura, diseño y ●​ Estudiar la elaboración de bases
funcionalidad con la que contará el de datos, creación de servidores
repositorio web. y lenguajes de programación
usados en el back-end.
●​ Estructurar la base de datos y su
interacción con el servidor
●​ Estudiar el desarrollo colaborativo
con control de versiones por vía
de Git y GitHub.

●​ Realizar la programación de los

elementos y páginas que poseerá
el repositorio web por HTML,
CSS y JavaScript.
●​ Elaborar la base de datos.
Implementar el repositorio web para el ●​ Realizar la programación y
uso libre de los estudiantes y profesores conexión de servidor con base de
de la Unidad Educativa Técnico datos y el resto del repositorio.
Humanístico Josefa Manuela ●​ Realizar pruebas de
Gandarillas. funcionamiento del sitio web.
●​ Realizar ajustes y correcciones al
sistema completo.
●​ Realizar la primera operación de
subida de datos de los proyectos
de grado de la presente gestión.

Fuente: Elaboración propia

 11

2.6.​ JUSTIFICACIÓN

Por una parte el presente proyecto lleva por intención ofrecer la información de los
proyectos elaborados por estudiantes de gestiones pasadas, esto así mismo conlleva a un
lugar de consulta y, por lo tanto, una praxis más eficiente y fácil a la hora de elaboración de
más proyectos, otorgando con el tiempo, práctica y tutela de los mismos maestros una mejor
calidad de documentación de proyectos.

Por otra parte, es posible que la persona autora del proyecto vea en la misma puntos que se
pueden mejorar, pero que, por los costos o la complejidad de dicha idea no son realizables.
Por lo tanto el autor puede dar los puntos explotables para otro proyecto por medio del
acápite de recomendaciones dentro del mismo documento, el repositorio al mejorar la
consulta de los proyectos, permitiría así que otros estudiantes puedan optar por continuar
sobre el trabajo ya hecho anteriormente por el autor original, mejorándolo o
complementándolo.

Eso lleva al siguiente punto, y es que al haber un espacio de consulta gestionado por los
maestros en la materia de BTH, habría una supervisión más grande de la coincidencia de
material respecto con el de gestiones pasadas, pues es probable encontrar dicho fenómeno
tras repetir ese proceso anualmente, es así que tras la selectividad y un proceso largo de
evaluación-aprobación mejorará la calidad de los proyectos con el pasar de los años, por el
método de prueba y error.

Así también beneficiaría a aquellos estudiantes que decidan emprender la elaboración del
proyecto desde una etapa más temprana de la gestión escolar, al tener ejemplos variados,
pero bajo una misma estructura del cómo deben manejar el proceso de elaboración de los
mismos; más aún sabiendo que el período de tiempo respectivo a la elaboración de los ya
mencionados coincide convenientemente con el intervalo de tiempo en el que se realiza
actividades de la promoción, actividades que gozan de más atención por parte de la
dirección que los ya mencionados trabajos necesarios para la titulación, pese a ser un
proceso largo y tendido.

Catalogar y filtrar la calidad de los proyectos resulta en algo importante a la hora de la

búsqueda de la información, herramienta importante que nos facilita la tecnología, en
especial un espacio dedicado a la administración y gestión de archivos de esa naturaleza
como lo es un repositorio web.
 12

Por ello se vuelve menester que los documentos de dichos trabajos de grado presenten una
sola estructura sólida para catalogarlos de manera más eficiente y redactarlos de maneras
más cómodas como también prácticas.​

2.7.​ ALCANCES

El presente trabajo está orientado al uso de conocimientos afines a la programación

web, vale decir programación front-end (programación de la interactividad), back-end
(programación del servidor) y programación de base de datos. De la misma forma resulta útil
la aplicación de conocimientos referente al control de versiones Git y al medio colaborativo
GitHub para la cooperación a la hora de escribir el código, todo ello con el propósito de la
elaboración de un repositorio web.

Para el presente proyecto se cuenta lastimosamente con un pequeño lapso de tiempo de

aproximadamente dos meses y medio; lo que incluye redacción del documento, elaboración
del repositorio destinada al almacenamiento de proyectos de grado de gestiones anteriores,
pruebas y ajustes de funcionamiento, así como también la publicación del mismo dentro de la
Unidad Educativa Técnico Humanístico Josefa Manuela Gandarillas. Dicha unidad educativa
se encuentra en Cochabamba, Punata.
 13

CAPÍTULO 3.​ MARCO REFERENCIAL

En la antigüedad, en Bolivia se crearon las escuelas de Artes y Oficios, estas se

basaban en el principio de: “Aprender haciendo” estos establecimientos constituían una
oportunidad para instruir a los ciudadanos en los oficios como: carpintería, herrería,
albañilería entre otros oficios requeridos en la época, siendo un comienzo en la educación
técnica.

Actualmente en nuestro país, la formación técnica está atravesando un periodo de transición

de la Reforma educativa 1565 a la Ley 070 Avelino Siñani y Elizardo Pérez. Uno de los
objetivos de esta Ley es la implementación del Bachiller Técnico Humanístico en las distintas
Unidades Educativas de nuestro país (López Ramírez, s. f.).

Desde el año 2014, se ha incorporado el Bachillerato Técnico Humanístico en el

Subsistema de Educación Regular con el objetivo de mejorar la educación de los estudiantes
de secundaria, adaptándolos a las capacidades y vocaciones productivas de cada región del
país.

En la aplicación del Bachillerato Técnico Humanístico existen tres tipos de unidades

educativas. “Un primer tipo, unidades educativas técnico humanísticas plenas, es decir, las
que ya hacían bachillerato técnico hace mucho tiempo y que ahora han entrado al sistema
de titulación. Un segundo tipo de unidades educativas en transformación las que incorporan
en su formación Técnica Tecnológica general en 3ro y 4to y diseñan la especialidad a ser
asumida en 5to y 6to de secundaria, y las de transición que solo trabajan Técnica
Tecnológica general en 1ro y 2do de secundaria”, explicó (Ministerio de Educación, 2018).

Especialidades técnica tecnológicas - BTH secundaria:

●​ Administración de empresas ●​ Agroecología

●​ Agropecuaria ●​ Belleza integral

●​ Carpintería en madera y metal ●​ Construcción Civil

●​ Comunicación educativa ●​ Contabilidad

●​ Diseño Gráfico ●​ Electricidad

●​ Electromecánica ●​ Electrónica

●​ Gestión Ambiental ●​ Gastronomía

 14

●​ Industria y transformación de ●​ Mecánica Automotriz

alimentos

●​ Mecánica Industrial ●​ Mercadotécnica

●​ Secretariado ●​ Sistemas informáticos y redes

●​ Textiles, tejidos y confecciones ●​ Turismo y Hotelería

●​ Veterinaria y Zootécnica ●​ Viticultura

Hasta 2018 se poseía la siguiente currícula de formación técnica en nivel secundario:

Tabla 2: Currícula de formación técnica en nivel secundario 2018

1er. AÑO 2do. AÑO 3er. AÑO 4to. AÑO

•Máquinas, equipos
•Transformación
• Técnicas y y
• Potencialidades y de la matriz
tecnologías herramientas
vocaciones productiva.
propias y de la (simples y
productivas de la •Métodos y
diversidad semicomplejos).
región. técnicas de
cultural. •Lectura y análisis
investigación
de productos
comunitaria.
tecnológicos.

• Elaboración y
• Seguridad y salud • Economía
gestión de
• Los materiales y ocupacional comunitaria y
proyectos
sus (seguridad finanzas públicas.
socioproductivos
propiedades industrial). • Gestión y cultura
• Costos de
• D. L. N°. 16998. tributaria.
producción.
 15

1er. AÑO 2do. AÑO 3er. AÑO 4to. AÑO

• Gestión y
• Dibujo técnico establecimiento
• Contabilidad
• Derecho laboral. básico de
básica
• Seguridad • Software aplicado entidades
aplicada a unidades
social. al dibujo socioproductivas.
productivas.
técnico (CAD) • El
cooperativismo.

• Sistema de • Especialidades
gestión de técnica
la calidad iso • Planificación tecnológicas
9001 • Liderazgo estratégica según
• Sistema de comunitario. comunitaria. vocaciones y
gestión potencialidades
ambiental iso productivas.
14001.

Fuente: (Ministerio de Educación, 2018)

En fechas más actuales, la currícula varía en función de la carrera y año de escolaridad en la

cual se ha de estar cursando. Durante la gestión 2023, en la carrera de Sistemas
Informáticos se contaba con la siguiente currícula de avance:

Tabla 3: Contenidos del sexto año de escolaridad de la gestión 2023

PRIMER TRIMESTRE SEGUNDO TRIMESTRE TERCER TRIMESTRE

REDES DE DISEÑO Y TECNOLOGÍAS DE

COMPUTADORAS PROGRAMACIÓN WEB II DISPOSITIVOS MÓVILES
INTRODUCCIÓN A REDES APLICACIONES WEB ●​ Introducción a las
●​ Introducción a redes ●​ Fundamentos de tecnologías de
TIPOS DE REDES Y internet dispositivos móviles
TOPOLOGÍA ●​ Aplicación práctica ●​ La evolución del
●​ Tipos MAN, WLAN, del lenguaje HTML ecosistema móvil
 16

PRIMER TRIMESTRE SEGUNDO TRIMESTRE TERCER TRIMESTRE

LAN y WAN ●​ Aplicación práctica ●​ Tipos de tecnologías

●​ Topologías de red: de hojas de estilo de comunicación
estrella, bus, anillo, ●​ Aplicativo en el disponibles
token ring e híbridos lenguaje JavaScript ●​ Servicios y
MEDIOS DE TRANSMISIÓN ●​ Maquetación tecnologías IP que
Y DISPOSITIVOS DISEÑO WEB aprovechan los
●​ Cable UTP RESPONSIVO dispositivos móviles
●​ Fibra óptica ●​ Introducción ●​ La guerra de
●​ Especificación ●​ Compatibilidad con plataformas
técnica (control de los navegadores ●​ Concepción y
ancho de banda) ●​ Menú desplegable publicación de Apps
●​ Tarjeta de red ●​ Tipografía, formas y MODELOS DE NEGOCIO
●​ Repetidores botones EN APPS
●​ Briges ●​ Formularios y ●​ Modelos de negocio
●​ Hub modales de Apps
●​ Switch ●​ Diseño con rejillas ●​ Seguimiento y
●​ Router (gridview) y tablas comunicación
●​ Brouters ●​ Carrusel e imágenes ●​ Aspectos legales
●​ Firewall ●​ Componentes DESARROLLO DE
●​ Accees Point adicionales de diseño APLICACIONES EN
MODELOS DE ●​ JQUERY ANDROID
REFERENCIA OSI ●​ Desarrollo web con ●​ Introducción a
●​ Definición Jquery Android
●​ Características ●​ Animación con ●​ Herramientas de
●​ Capa de modelo OSI Jquery desarrollo SDK de
●​ Funcionamiento del ●​ Manejo de eventos Android y de tipo de
modelo OSI ●​ Validación de actividad
MODELO TCP/IP formularios ●​ Creación y
●​ Definición DESARROLLO DE depuración de Apps
●​ Características APLICACIONES WEB ●​ Administración de
●​ Capas del modelo CLIENTE SERVIDOR recursos
TCP/IP ●​ Introducción a la ●​ Android manifest y
 17

PRIMER TRIMESTRE SEGUNDO TRIMESTRE TERCER TRIMESTRE

●​ Funcionamiento programación web gradle

●​ Sintaxis y estructuras ●​ Interfaz de usuario
DIRECCIONAMIENTO IP Y de control de Android
SUBREDES ●​ Programación ●​ Views y ViewGroups
●​ Estructura básica orientada a objetos ●​ Listas, recyclerview y
●​ Clases de IP ●​ Conectividad a bases cards
●​ Subredes estructuras de datos ●​ Intents
●​ Máscara (variables y ●​ Uso de AJAX en ●​ Menús (simples y
estativas) aplicaciones web personalizados)
SERVICIOS TCP/IP BASE DE DATOS ●​ Diálogos y
●​ Modelo cliente FUNDAMENTOS DE BASE notificaciones
servidor y modelo DE DATOS ARQUITECTURA DE
peer to peer ●​ Introducción de base DESARROLLO CON
●​ Dirección IPv4 y IPv6 de datos ANDROID
●​ Introducción ●​ Diseño de base de ●​ Arquitecturas de
subneteo datos desarrollo (MVC y
●​ DNS – DHCP ( IPS MODELO ENTIDAD MVP)
dinámicos y RELACIÓN ●​ Drag and Drop y
estáticos) ●​ Conceptos básicos controles avanzados
●​ Diagnóstico de la red ●​ Diagrama entidad y ●​ Widgets de escritorio
●​ Diseño de red (pack relación y Live Wallpapers
trace) ●​ Relaciones ●​ Almacenamiento
CABLEADO ●​ Claves (shared preferences,
ESTRUCTURADO GESTORES DE BASE DE archivos internos y
●​ Introducción DATOS externos)
●​ Componentes de un ●​ Arquitectura de un ●​ Bases de datos con
cableado gestor de base de SQLite y REALM
estructurado datos ●​ Sensores
●​ Cables: norma A y ●​ Independencia de ●​ Geolocalización y
norma B datos mapas
●​ Estándares de red ●​ Lenguaje e interfaces ●​ Servicios y alarmas
REDES INALÁMBRICAS ●​ Entorno de un PUBLICACIÓN DE
 18

PRIMER TRIMESTRE SEGUNDO TRIMESTRE TERCER TRIMESTRE

●​ Instalación y sistema de base de APLICACIONES PARA

configuración de una datos DISPOSITIVOS MÓVILES
red LAN – WLAN ●​ Creación y ●​ Introducción
●​ Configuración de mantenimiento de ●​ Cuenta de
router inalámbrico una base de datos programador
EL LENGUAJE SQL ●​ Como subir una
●​ Estructura básica aplicación en App
●​ Operaciones sobre Store
conjuntos ●​ Publicar Apps gratis
●​ Funciones de ●​ Publicar aplicaciones
agregación en Play Store
●​ Subconsultas ●​ Subir Apps en Apple
anidadas Lenguaje Store
de definición de ●​ Trabajando con
datos observadores
●​ Almacenamiento
local
●​ Notificaciones push
●​ Deploy e instalación
en teléfonos
DEFENSA DE GRADO
●​ Ejecución de las
modalidades de
graduación
●​ Defensa de grado

Fuente: (Ministerio de Educación, 2022)

Como se puede lograr apreciar, la última actividad en la currícula de la carrera de Sistemas

Informáticos es la defensa de grado, actividad que coronaría la titulación en dicha área.
 19

3.1.​ ESQUEMA DEL MARCO REFERENCIAL

El esquema de las unidades temáticas que se abordarán en este capítulo se muestra

en la Figura 7.

Figura 7: Esquema del marco referencial

Fuente: Elaboración propia

3.2.​ CONTENIDO DEL MARCO REFERENCIAL

​ La fundamentación teórica necesaria para realizar las acciones dirigidas a cumplir los
objetivos específicos propuestos se presenta en la Tabla 4.
 20

Tabla 4: Fundamentación teórica

OBJETIVOS FUNDAMENTACIÓN
ACCIONES
ESPECÍFICOS TEÓRICA

Analizar la situación
actual y los ●​ Encuestar a los estudiantes de

requerimientos del promoción y pre-promoción de la

proceso de Unidad Educativa Técnico

elaboración de Humanístico Josefa Manuela

proyectos de titulación Gandarillas. ■​ Técnicas y

por la cual pasan los ●​ Entrevistar a alumnos graduados de métodos de

estudiantes de la la Unidad Educativa Técnico investigación.

Unidad Educativa Humanístico Josefa Manuela

Técnico Humanístico Gandarillas.

Josefa Manuela ●​ Identificar los requerimientos del

Gandarillas. sistema.

●​ Estudiar los lenguajes de

programación: HTML, CSS y
JavaScript.
■​ Programación
●​ Diseñar la interfaz de usuario y el
web.
estilo visual con el que contará el
■​ Programación
repositorio web.
con JavaScript.
Planificar la estructura, ●​ Estudiar la elaboración de bases de
■​ Base de datos.
diseño y funcionalidad datos, creación de servidores y
■​ Programación
con la que contará el lenguajes de programación usados
back-end.
repositorio web. en el back-end.
■​ Control de
●​ Estructurar la base de datos y su
versiones Git.
interacción con el servidor
■​ Desarrollo
●​ Estudiar el desarrollo colaborativo
colaborativo
con control de versiones por vía de
GitHub.
Git y GitHub.
 21

OBJETIVOS FUNDAMENTACIÓN
ACCIONES
ESPECÍFICOS TEÓRICA

●​ Realizar la programación de los

elementos y páginas que poseerá el
repositorio web por HTML, CSS y
Implementar el JavaScript.
repositorio web para el ●​ Elaborar la base de datos. ■​ Entornos de
uso libre de los ●​ Realizar la programación y conexión desarrollo
estudiantes y de servidor con base de datos y el integrado (IDE).
profesores de la resto del repositorio. ■​ Optimización de
Unidad Educativa ●​ Realizar pruebas de funcionamiento código.
Técnico Humanístico del sitio web. ■​ Hosting de sitios
Josefa Manuela ●​ Realizar ajustes y correcciones al web.
Gandarillas. sistema completo.
●​ Realizar la primera operación de
subida de datos de los proyectos de
grado de la presente gestión.

Fuente: Elaboración propia

3.3.​ TÉCNICAS Y MÉTODOS DE INVESTIGACIÓN

La investigación es un conjunto de procesos sistemáticos, críticos y empíricos que se

aplican al estudio de un fenómeno.

Las investigaciones se originan por ideas, sin importar qué tipo de paradigma fundamente
nuestro estudio ni el enfoque que habremos de seguir. Las ideas constituyen el primer
acercamiento a la realidad objetiva y subjetiva. Sin embargo y debido a las diferentes
premisas que sustentan, desde el siglo pasado tales corrientes se han “polarizado” en dos
aproximaciones principales para indagar: el enfoque cuantitativo y el enfoque cualitativo de la
investigación. (Hernández Sampieri et al., 2010, pág 4)

Podemos decir que la investigación es un proceso organizado para estudiar

fenómenos de forma crítica y basada en hechos. Todo comienza con una idea, que puede
surgir desde diferentes perspectivas. Parte de una idea y puede abordarse de dos formas: la
cuantitativa, que utiliza datos medibles, y la cualitativa, que analiza experiencias subjetivas.
 22

3.3.1.​ Métodos de recolección de datos en la investigación

El método es el camino por seguir mediante una serie de operaciones y reglas

prefijadas de antemano para alcanzar el resultado propuesto, procura establecer los
procedimientos que deben seguirse, en el orden de las observaciones,
experimentaciones, experiencia y razonamientos y la esfera de los objetos a los
cuales se aplica. (Baena Paz, 2017, pág 82)

El método entonces se define como el conjunto de pasos y reglas predefinidas

que se siguen para alcanzar un objetivo. Establece los procedimientos a seguir en la
observación, experimentación y razonamiento, y define los objetos a los que se
aplica.

En la tabla 5 se detallan las características de los métodos de recolección de datos.

Tabla 5: Métodos de recolección de datos

MÉTODOS DESCRIPCIÓN TIPO VENTAJAS DESVENTAJAS

Conversaciones
estructuradas o Profundidad

semiestructurad en las
Entrevistas Cualitativo respuestas Subjetividad
as para obtener
información Flexibilidad.
detallada.

Conjunto de
preguntas Respuestas
estandarizadas Rápido superficiales
enviadas a una
Encuestas Cuantitativo Análisis Depende de la
muestra para
obtener estadístico comprensión del

respuestas encuestado.

cuantificables.

Fuente: (Bryman A, 2016).

 23

3.3.2.​ Técnicas de recolección de datos en la investigación

El método no basta, se requieren procedimientos que lo hagan operativo, éste

es el papel de las técnicas e instrumentos que permiten la parte operativa: el control,
registro y manipulación de una parcela específica de la realidad.

Las técnicas se vuelven respuestas al “cómo hacer” y permiten la aplicación del

método en el ámbito donde se aplica. Las técnicas son prácticas conscientes y
reflexivas dirigidas al apoyo del método. (Baena Paz, 2017, pág 82)

Dicho de otra manera, se necesitan técnicas e instrumentos específicos que lo

hagan operativo. Estas técnicas responden al "cómo hacer", facilitando la aplicación
práctica y consciente del método en un contexto determinado para controlar, registrar
y manipular una parte específica de la realidad.

Sus rasgos esenciales consisten en que:

●​ Propone una serie de normas para ordenar las etapas de la investigación

científica. (Diseños de investigación.)
●​ Aporta instrumentos y medios para la recolección, concentración y
conservación de datos. (Fichas, entrevistas, cuestionarios, observaciones,
etc.) Respecto del acopio de la información se distinguen:
○​ Las técnicas de investigación documental.
○​ Las técnicas de trabajo de campo.
●​ Elabora sistemas de clasificación. (Guías de clasificación, catálogos,
etcétera.)
●​ Se encarga de cuantificar, medir, y correlacionar los datos, aplicando los
métodos y sistemas de las ciencias técnicas como las matemáticas, la
estadística y la cibernética. (Procesamiento de datos.)
●​ Proporciona a la ciencia el instrumental experimental.
●​ Guarda estrecha relación con el método y la teoría.

La investigación documental y de campo son las técnicas básicas de la investigación

que nos sirven para recopilar los datos de la investigación.
 24

3.3.3.​ Instrumentos de recolección de datos en la investigación

Existen diversos tipos de variables clasificadas según su nivel de medición,

escala, función en la investigación y nivel de abstracción; en la tabla 6 se detallan las
características de cada tipo de variable.

Tabla 6: Tipos de variables

TIPOS DE
CLASIFICACIÓN EJEMPLO CARACTERÍSTICA
VARIABLES
Variables cualitativas o no métricas.
Nacionalidad o Limita las
cualquier otro que posibilidades de
1)​ Nominales.
denota cualidad de análisis
algo. estadísticos.
Clase social, nivel Posibilidad de
de estudios, “ordenar”, en el
2)​ Ordinales.
ideología política, sentido de “mayor
Niveles de entre otros. que” o “menor que”.
medición. Variables cuantitativas o métricas.
40 - 50 minutos. Se realizan
3)​ De intervalo. 1 – 2 horas. operaciones
180–270 grados. aritméticas.
Se puede
establecer un cero
4)​ De razón o Edad: 0 a 17 años.
absoluto lo que
proporción. Calificación: 0 a 10.
permite el cálculo
de proporciones.
Puede hallarse
12.6 Kg
valores intermedios
1)​ Continuas. 3.8 m
entre dos valores
Escala de 4.5 ml
dados.
medición.
No cabe la
2)​ Discretas. 3 estudiantes posibilidad de hallar
valores intermedios.
 25

TIPOS DE
CLASIFICACIÓN EJEMPLO CARACTERÍSTICA
VARIABLES
Influye en los
1)​ Independientes Causa de un atributos que
. problema adopta una variable
dependiente.
Función en la Efecto de una serie Constituye el objeto
2)​ Dependientes.
investigación. de causas. de análisis.
Si el efecto de estas
Velocidad, tiempo,
se llega a controlar
3)​ Cambiantes distancia, entre
pasan a ser
otros.
variables de control.
No pueden ser
Dolor, estabilidad,
1)​ Generales. directamente
Nivel de entre otros.
medidas.
abstracción.
Expresan alguna
2)​ Intermedias. Nivel educativo
dimensión.
Fuente: (Izquierdo Escribano Antonio, 2012).

3.4.​ PROGRAMACIÓN WEB

3.4.1.​ HyperText Markup Language (HTML)

HTML (Lenguaje de Marcas de Hipertexto) es el elemento esencial de la Web,

encargado de definir la estructura y el significado del contenido en línea. Aunque
HTML es la base, otras tecnologías como CSS se usan para manejar el diseño visual
y JavaScript para agregar funcionalidad.

El término "hipertexto" se refiere a los enlaces que conectan diferentes páginas web,
tanto dentro de un mismo sitio como entre sitios diferentes. Estos enlaces son
fundamentales para la Web, y al crear y enlazar contenido en línea, te integras
activamente en la «World Wide Web». (MDN web docs, 2024b)

HTML fue creado por Tim Berners-Lee en 1989 para compartir contenidos
científicos, con la versión inicial de 18 etiquetas para texto e hipertexto. Se fundaron
la Internet Engineering Task Force y el World Wide Web Consortium en 1993 para
establecer características del HTML. En 1996 se presentó la versión HTML 3. 2,
 26

seguida por la llegada de Java y JavaScript en la segunda versión. Posteriormente

surgió CSS para dar estilo a los textos. La cuarta versión incluyó botones e iFrames,
mientras que la quinta de 2014 añadió audios, vídeos e inputs. (Serna Group, 2021)

En resumen, HTML es la base de la Web, responsable de definir la estructura

y el significado del contenido en línea. El concepto de "hipertexto" permite conectar
páginas web a través de enlaces, lo que es clave para la interconexión global en la
Web. Inicialmente diseñado para compartir información científica, HTML ha
evolucionado con el tiempo. Se crearon estándares que permitieron la incorporación
de tablas, imágenes y colores, mientras que CSS se desarrolló para estilizar mejor los
textos.

3.4.1.1.​ Estructura base en HTML

Según indica Ruiz, D (2020a); la estructura en HTML es muy

importante ya que es la base y cuerpo de una página web, la cual está hecha
de diferentes etiquetas y atributos como se aprecia en la figura 8.

Figura 8: Estructura HTML

Fuente: (Ruiz, 2020a)

Estructura en la etiqueta “<body>”: Dentro de la etiqueta “<body>”

existen diferentes estructuras que ayudan a una mejor visualización,
entendimiento y creación de una página web..

Etiquetas semánticas: Las etiquetas semánticas son aquellas que

tienen un significado, es decir, que indican al navegador el tipo de contenido
que encapsulan. Con estas etiquetas semánticas se puede armar la estructura
general de nuestra página web.
 27

Por ejemplo, esta es una estructura “<body>” muy utilizada en muchas

páginas web, simple y muy usada por creadores de páginas web, donde se
puede ampliar el pensamiento del diseñador y programador de la página web.

Figura 9: Estructura Body

fuente: (Ruiz, 2020a)

Etiquetas en HTML: Las etiquetas en HTML, son la forma en la que se

puede estructurar el contenido de nuestra página web.

Es decir, si se quiere especificar una estructura dándole forma se utilizan

etiquetas y atributos para nuestra página web.

Existen dos tipos de etiquetas, son las siguientes

●​ Etiquetas de apertura y cierre: Las etiquetas de apertura y cierre son

aquellas que tienen un inicio y un fin, es decir, tienen una etiqueta de
apertura y una etiqueta de cierre.

Las etiquetas de apertura y cierre se utilizan para envolver contenido,

es decir, para indicar que cierto contenido es de cierto tipo.

●​ Etiquetas de auto-cierre: Las etiquetas auto-cierre son aquellas que no

tienen un inicio y un fin, es decir, solo tienen una etiqueta de apertura.

Las etiquetas auto-cierre se utilizan para insertar contenido en la

página web, como imágenes, videos, audios, etc.
 28

Atributos en etiquetas: Los atributos HTML son componentes que

proporcionan información adicional sobre elementos HTML. Se utilizan para
configurar propiedades como el ID, clases, estilos, enlaces, y otros valores
específicos que afectan el comportamiento o la apariencia de los elementos.

En la tabla 7 se muestran algunos elementos que se utilizan en HTML.

Tabla 7: Elementos básicos de HTML

Aspecto Ejemplo Función

●​ <html>
●​ <head> Define la estructura y el
Estructura básica
●​ <body> contenido principal.
●​ <title>

●​ <p>
●​ <br> Organiza el texto en párrafos,
Párrafos y texto
●​ <strong> negritas, cursivas, etc.
●​ <em>

●​ <a
Crea enlaces entre páginas o
Enlaces href="URL">Texto
dentro de la misma página.
</a>

●​ <img Muestra imágenes en la página

Imágen src="imagen.jpg" web y proporciona
alt="descripción"> descripciones alternativas.

Fuente: (Robbins, 2012)

En conclusión HTML es la base de todo sitio web, es un lenguaje sencillo de

aprender y esencial para todo aquel que quiera iniciarse en el desarrollo web.

A medida que se avanza con HTML, se complementa con CSS para mejorar el
diseño visual, y JavaScript para añadir funcionalidad dinámica a los proyectos.
 29

3.4.2.​ Cascading Style Sheets (CSS)

Según Oregoom (s. f.), acerca del lenguaje CSS y su trayecto en el mundo de
la programación web:

CSS (Cascading Style Sheets) es un lenguaje de diseño utilizado para

describir la presentación de los elementos HTML. Es utilizado para establecer
el color, el tamaño, la posición, la fuente, entre otras propiedades de los
elementos en una página web. Es esencial para darle estilo y diseño a una
página web.

Con CSS, los desarrolladores web pueden separar la estructura de una

página web (definida con HTML) de su presentación visual. Esto permite que
los diseños sean reutilizados y modificados fácilmente en varias páginas web,
lo que agiliza el proceso de desarrollo y facilita el mantenimiento.

CSS también permite la creación de diseños responsivos, adaptando el diseño

de una página web a diferentes tamaños de pantalla, lo que permite una mejor
experiencia de usuario en dispositivos móviles.

CSS es uno de los lenguajes base de la Open Web y posee una

especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de
varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo
que permitía el versionado de las recomendaciones. Probablemente habrás
escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha
lanzado como una versión oficial. (MDN web docs, 2024a)

CSS fue desarrollado por el World Wide Web Consortium (W3C) en 1996 para
separar la presentación visual de una página web de su contenido estructural. La
primera versión, CSS1, permitía modificar elementos como color de fondo, tamaño de
fuente y márgenes, aunque con capacidades limitadas.

En 1998, CSS2 introdujo nuevas propiedades y soporte para media queries,

permitiendo la adaptación a diferentes dispositivos. Finalmente, en 2012.

CSS3 trajo módulos continuos de desarrollo y características avanzadas como

animaciones, transiciones, y sistemas de diseño como Grid y Flexbox.
 30

Es importante mencionar que a medida que CSS ha evolucionado, también ha

surgido un gran interés en torno al desarrollo de librerías y frameworks de CSS como
Bootstrap, Foundation, Bulma, entre otras. Estas librerías proporcionan un conjunto
de reglas pre-definidas para facilitar y acelerar el desarrollo de proyectos web, así
como una serie de componentes y elementos preestablecidos para una mejor
estandarización en cuanto al diseño. (Oregoom, s. f.)

Podemos decir que, CSS es un lenguaje de hojas de estilo que permite

separar la estructura de contenido de una página web (definida en HTML) de su
presentación visual. Es esencial para dar una apariencia consistente y profesional a
todas las páginas del sitio web, y hacer que sea fácil de navegar y de leer para los
usuarios.

3.4.2.1.​ Selectores

En CSS los selectores se utilizan para delimitar los elementos HTML

de nuestra página web a los que se quiere aplicar estilo. Hay una amplia
variedad de selectores CSS, lo que permite una gran precisión a la hora de
seleccionar elementos a los que aplicar estilo.

Existen varios tipos de selectores, incluyendo selectores de tipo, clase e ID.

También hay selectores de atributos, que permiten seleccionar elementos en
función de un atributo específico. Además, los selectores combinados
permiten seleccionar elementos basados en su relación con otros, como hijos
o hermanos. En conjunto, estos selectores ofrecen una gran flexibilidad y
precisión al aplicar estilos a los elementos de una página web. (MDN web
docs, 2023a)

Con esto se puede decir que los selectores en CSS son herramientas
que permiten seleccionar elementos HTML a los que se les aplicarán estilos.
Incluyen selectores de diferentes tipos,proporcionando flexibilidad y precisión
en la aplicación de estilos en una página web.

3.4.2.2.​ Modelo de caja

Según Ruiz, D (2020b) Cada elemento en CSS tiene un modelo de

caja que se encarga de mostrar el contenido de ese elemento. Para entender
 31

el modelo de caja en CSS hay que tomar en cuenta todos los espacios que
puede tener un elemento en CSS. Estos espacios son los siguientes:

●​ Margin: Margen exterior al borde de un elemento.

●​ Border: Borde del elemento.
●​ Padding: Espacio entre el borde del elemento y del contenido.

Los modelos de cajas en CSS son el contenido de un elemento donde

puede modificar y diseñar a gusto del programador teniendo en cuenta el
margen.border y padding de una caja.

3.4.2.3.​ Posicionamiento

La propiedad “position” en CSS permite especificar cómo se posiciona

un elemento en relación con su contenedor padre y/o a la página en sí. Los
valores comunes para esta propiedad incluyen static, relative y absolute, cada
una sirviendo de diferente manera en la posición. (Nivardo, 2023)

3.4.2.4.​ Display

La propiedad display en CSS se utiliza para establecer cómo se

muestra un elemento en una página web. El valor de esta propiedad
determina cómo se comporta el elemento en cuanto a tamaño, posición, cómo
afecta a los elementos vecinos y está enlazado con el diseño responsivo de la
página web. (Oregoom, s. f.)

La propiedad display ayuda muchas veces en el diseño, posición de

cada modelo de caja las cuales ayudan en la visualización de la página a
través de diferentes dispositivos.

3.4.2.5.​ Diseño responsivo

Diseño web responsivo (del inglés Responsive Web Design) es un

concepto de desarrollo web que se centra en hacer que los sitios se vean y se
comporten de manera óptima en todos los dispositivos informáticos
personales, como celulares, tablets, laptops, computadoras de escritorio y
hasta incluso en televisores.
 32

Es importante mencionar que también suele verse fallas con la visualización

del dispositivo donde el diseño responsivo ayuda y contribuye en esa parte
con algunos elementos en CSS.

3.4.2.6.​ Animaciones

Según MDN web docs (2024e), las animaciones CSS3 permiten

animar la transición entre un estilo CSS y otro. Las animaciones constan de
dos componentes: un estilo que describe la animación CSS y un conjunto de
fotogramas que indican su estado inicial y final, así como posibles puntos
intermedios en la misma.

Las animaciones CSS tienen tres ventajas principales sobre las técnicas
tradicionales de animación basada en scripts:

1.​ Son muy fáciles de usar para animaciones sencillas, puedes hacerlo
incluso sin tener conocimientos de Javascript.
2.​ La animación se muestra correctamente, incluso en equipos poco
potentes. Animaciones simples realizadas en Javascript pueden verse
mal (a menos que estén muy bien hechas). El motor de renderizado
puede usar técnicas de optimización como el "frame-skipping" u otras
técnicas para que la ejecución de la animación se vea tan suave como
sea posible.
3.​ Al ser el navegador quien controle la secuencia de la animación,
permitimos que optimice el rendimiento y eficiencia de la misma, por
ejemplo, reduciendo la frecuencia de actualización de la animación
ejecutándola en pestañas que no estén visibles.

Las animaciones en CSS permiten agregar movimiento y efectos

visuales a los elementos de una página web, mejorando la experiencia del
usuario. Se pueden crear transiciones suaves entre diferentes estados de un
elemento al cambiar propiedades como color, tamaño o posición.

3.5.​ PROGRAMACIÓN CON JAVASCRIPT

Según Haverbeke (2024), JavaScript fue introducido en 1995 como una forma de
agregar programas a páginas web en el navegador Netscape Navigator. Desde entonces, el
lenguaje ha sido adoptado por todos los demás navegadores web gráficos principales. Ha
 33

hecho posibles aplicaciones web modernas, es decir, aplicaciones con las que puedes
interactuar directamente sin tener que recargar la página para cada acción.

Después de su adopción fuera de Netscape, un documento estándar fue escrito para

describir la forma en que debería funcionar el lenguaje JavaScript, este se llamó el Estándar
ECMAScript, por Ecma International que hizo la estandarización. En la práctica, los términos
ECMAScript y JavaScript se pueden usar indistintamente, son dos nombres para el mismo
lenguaje.

Por otro lado, JavaScript casi no tiene nada que ver con el lenguaje de programación
llamado Java. El nombre similar fue inspirado por consideraciones de marketing, pues
cuando JavaScript estaba siendo introducido, el lenguaje Java estaba siendo fuertemente
comercializado y estaba ganando popularidad.

JavaScript (a menudo abreviado como JS) es un lenguaje ligero, interpretado y

orientado a objetos con funciones de primera clase, y mejor conocido como el lenguaje de
programación para las páginas Web, pero también se utiliza en muchos entornos que no son
de navegador. Es un lenguaje de scripts que es dinámico, multi-paradigma, basado en
prototipos y admite estilos de programación orientados a objetos, imperativos y funcionales.
(MDN web docs, 2023c)

También hay versiones de JavaScript del lado del servidor más avanzadas, como
Node.js, que te permiten agregar más funcionalidad a un sitio web que simplemente
descargar archivos (como la colaboración en tiempo real entre varias computadoras). Dentro
de un entorno (por ejemplo, un navegador web), JavaScript se puede conectar a los objetos
de su entorno para proporcionar control programático sobre ellos. (Haverbeke, 2024)

MDN web docs (2023a) indica que, el núcleo de JavaScript se puede extender para una
variedad de propósitos completándolo con objetos adicionales; por ejemplo:

●​ JavaScript de lado del cliente extiende el núcleo del lenguaje al proporcionar objetos
para controlar un navegador y su Modelo de objetos de documento (DOM por
Document Object Model). El DOM define la forma en que los objetos de documentos
HTML se exponen al «script». Para tener una mejor idea de las diferentes tecnologías
que se utilizan al programar con JavaScript. Por ejemplo, las extensiones de lado del
cliente permiten que una aplicación coloque elementos en un formulario HTML y
responda a eventos del usuario, como clics del mouse, formularios para ingreso de
datos y navegación de páginas.
 34

●​ JavaScript de lado del servidor amplía el núcleo del lenguaje al proporcionar objetos
relevantes para ejecutar JavaScript en un servidor. Por ejemplo, las extensiones de
lado del servidor permiten que una aplicación se comunique con una base de datos,
brinde continuidad de información de una invocación a otra de la aplicación o realice
manipulación de archivos en un servidor.

Esto significa que en el navegador, JavaScript puede cambiar la apariencia de la página web
(DOM). Y, del mismo modo, el JavaScript de Node.js en el servidor puede responder a
solicitudes personalizadas desde el código escrito en el navegador, en la tabla 8 se aprecia
una descripción del uso de JavaScript en páginas web.

Tabla 8: Uso de JavaScript en creación de páginas web

Categoría Descripción Tecnologías Clave Ventajas

-​ Uso del mismo

Se usa JavaScript del lado lenguaje en
del servidor para manejar frontend y
Backend -​ Node.js
la lógica de aplicaciones backend.
(Servidor) -​ Express.js
web, APIs y bases de -​ Gran ecosistema
datos. de módulos y
paquetes.

-​ Alta interactividad
y control del
Se usa JavaScript del lado
DOM.
Frontend del cliente para gestión de -​ React.js
-​ Compatible con
(Cliente) la interfaz de usuario y la -​ Angular
todos los
experiencia interactiva.
navegadores
modernos.
 35

Categoría Descripción Tecnologías Clave Ventajas

-​ MEAN
(MongoDB,
Se puede usar JavaScript -​ El uso del mismo
Express,
en ambos, frontend y lenguaje para
Lenguaje Angular,
backend, para crear todo el stack.
Universal Node.js)
aplicaciones completas de -​ Fácil integración
(Full Stack) -​ MERN
una sola página o con APIs RESTful
(MongoDB,
sistemas completos. y microservicios.
Express, React,
Node.js)

Fuente:( Wieruch R., 2019)

En resumen, el lanzamiento de JavaScript como una herramienta para agregar

interactividad a las páginas web, revolucionó la forma en que los usuarios interactúan con la
información en línea. Con el tiempo, se estandarizó como ECMAScript y se popularizó en
todos los navegadores. Aunque su nombre puede llevar a confusión, no tiene relación con el
lenguaje Java, ya que el parecido se debió a estrategias de marketing.

Este lenguaje es versátil y se utiliza tanto en el cliente como en el servidor, lo que permite
crear aplicaciones ricas y dinámicas que responden a las acciones del usuario en tiempo
real. Además, su capacidad de integrarse con el Modelo de Objetos de Documento (DOM) lo
hace fundamental para manipular elementos en las páginas web, brindando un control total
sobre la experiencia del usuario.

3.5.1.​ Object Oriented Programming (OOP)

La idea básica de OOP (Object Oriented Programming) o Programación

Orientada a Objetos (POO) es que se usa objetos para modelar cosas del mundo real
que se quiere representar en nuestros programas, y/o proveer una simple manera
para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.
(MDN web docs, 2024c)

Los objetos son usados para almacenar colecciones de varios datos y

entidades más complejas asociados con un nombre clave. En JavaScript, los objetos
penetran casi todos los aspectos del lenguaje.
 36

Podemos imaginar un objeto como un gabinete con archivos firmados. Cada pieza de
datos es almacenada en su archivo por la clave. Es fácil encontrar un archivo por su
nombre o agregar/eliminar un archivo. (javascript.info, 2024)

La información que alojan los objetos representan información acerca de lo

que se está tratando de modelar, y la funcionalidad que se desea que tengan. Los
datos de un “Objeto” se pueden almacenar ordenadamente (la palabra oficial es
encapsular) dentro del paquete de un objeto, haciéndolo fácil de estructurar y
acceder; los objetos también se usan comúnmente como almacenes de datos que se
pueden enviar fácilmente a través de la red.

Esto es conocido como abstracción —crear un modelo simple de algo complejo que
represente sus aspectos más importantes y que sea fácil de manipular para el
propósito de nuestro programa. En algunos lenguajes de POO, esta definición de tipo
de objeto se la llama clase— esto no es en realidad un objeto, en vez de esto es un
modelo que define las características que un objeto debería tener. (MDN web docs,
2024c)

3.5.1.1.​ Herencia

Los prototipos son un mecanismo mediante el cual los objetos en

JavaScript heredan características entre sí. JavaScript es a menudo descrito
como un lenguaje basado en prototipos. Para proporcionar mecanismos de
herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un
objeto plantilla que hereda métodos y propiedades.

Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el
cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido
con frecuencia como la cadena de prototipos, y explica por qué objetos
diferentes pueden tener disponibles propiedades y métodos definidos en otros
objetos. (MDN web docs, 2024d)

En conclusión, la Programación Orientada a Objetos (POO) utiliza objetos

para representar elementos del mundo real y organizar datos de forma accesible
mediante encapsulación y abstracción. En JavaScript, estos objetos pueden heredar
características a través de prototipos, que actúan como plantillas para compartir
propiedades y métodos entre objetos. Este mecanismo de herencia en cadena,
 37

llamado cadena de prototipos, permite que varios objetos compartan funcionalidades,

facilitando la reutilización de código y la estructura del programa.

3.5.2.​ Document Object Model (DOM)

​ Document Object Model, o DOM, representa todo el contenido de la página

como objetos que pueden ser modificados. La especificación DOM explica la
estructura de un documento y proporciona objetos para manipularlo. Hay
instrumentos que no son del navegador que también usan DOM.

El objeto “document” es el punto de entrada a la página. Con él se puede cambiar o

crear cualquier cosa en la página. (javascript.info, 2024)

Una página web es un documento. Éste documento puede exhibirse en la

ventana de un navegador o también como código fuente HTML. Pero, en los dos
casos, es el mismo documento. El modelo de objeto de documento (DOM)
proporciona otras formas de presentar, guardar y manipular este mismo documento.
El DOM es una representación completamente orientada al objeto de la página web y
puede ser modificado con un lenguaje de script como JavaScript. (MDN web docs,
s. f.)

3.5.3.​ Programación asincrónica

En un modelo de programación sincrónico, las cosas suceden una a la vez.

Cuando se llama a una función que realiza una acción de larga duración, solo
devuelve cuando la acción ha terminado y puede devolver el resultado. Esto detiene
al programa durante el tiempo que tome la acción.

Un modelo asincrónico permite que múltiples cosas sucedan al mismo tiempo.

Cuando se inicia una acción, el programa continúa ejecutándose. Cuando la acción
termina, el programa es informado y obtiene acceso al resultado (por ejemplo, los
datos leídos desde el disco).

Tanto las plataformas de programación de JavaScript prominentes —navegadores

como Node.js— hacen operaciones que podrían tardar un tiempo de forma asíncrona,
en lugar de depender de hilos. Dado que programar con hilos es notoriamente difícil
(entender lo que hace un programa es mucho más difícil cuando está haciendo
 38

múltiples cosas a la vez), esto generalmente se considera algo bueno. (Haverbeke,

2024)

En otras palabras, en la programación sincrónica, las acciones ocurren una

tras otra, lo que puede detener el programa mientras una acción prolongada se
completa. En contraste, la programación asincrónica permite que varias tareas se
ejecuten simultáneamente, sin detener el flujo del programa. Plataformas como los
navegadores y Node.js prefieren este enfoque asíncrono para manejar operaciones
de larga duración, evitando la complejidad de los hilos, que son difíciles de gestionar.

3.6.​ BASE DE DATOS

Una base de datos es una recopilación organizada de información o datos

estructurados, que normalmente se almacena de forma electrónica en un sistema
informático. Normalmente, una base de datos está controlada por un sistema de gestión de
bases de datos (DBMS). En conjunto, los datos y el DBMS, junto con las aplicaciones
asociadas a ellos, reciben el nombre de sistema de bases de datos, abreviado normalmente
a simplemente base de datos. (Oracle, 2020)

Una base de datos de documentos es un tipo de base de datos NoSQL que se puede
usar para almacenar y consultar datos como documentos tipo JSON. La notación de objetos
de JavaScript (JSON) es un formato abierto de intercambio de datos legible tanto por los
humanos como por las máquinas. Los desarrolladores pueden usar documentos JSON en su
código y guardarlos directamente en la base de datos de documentos. La naturaleza flexible,
semi-estructurada y jerárquica de los documentos y las bases de datos de documentos
permite que evolucionen según las necesidades de las aplicaciones. (Amazon Web Services,
s. f.)

Los datos de los tipos más comunes de bases de datos en funcionamiento

actualmente se suelen utilizar como estructuras de filas y columnas en una serie de tablas
para aumentar la eficacia del procesamiento y la consulta de datos. Así, se puede acceder,
gestionar, modificar, actualizar, controlar y organizar fácilmente los datos. La mayoría de las
bases de datos utilizan un lenguaje de consulta estructurada (SQL) para escribir y consultar
datos.

SQL es un lenguaje de programación que utilizan casi todas las bases de datos relacionales
para consultar, manipular y definir los datos, y para proporcionar control de acceso. El SQL
se desarrolló por primera vez en IBM en la década de 1970 con Oracle como uno de los
 39

principales contribuyentes, lo que dio lugar a la implementación del estándar ANSI SQL. El
SQL ha propiciado muchas ampliaciones de empresas como IBM, Oracle y Microsoft.
Aunque el SQL se sigue utilizando mucho hoy en día, están empezando a aparecer nuevos
lenguajes de programación. (Oracle, 2020)

En síntesis, una base de datos es una colección estructurada de información

almacenada electrónicamente, gestionada por un sistema de gestión de bases de datos
(DBMS). Los datos suelen organizarse en filas y columnas dentro de tablas, lo que facilita su
consulta y modificación. La mayoría de estas bases de datos utilizan SQL como lenguaje
principal para interactuar con los datos. Además, las bases de datos NoSQL, como las de
documentos que usan el formato JSON, ofrecen mayor flexibilidad y adaptabilidad, lo que
resulta útil para aplicaciones que requieren estructuras de datos más dinámicas.

En la tabla 9 se muestran ventajas y desventajas de las bases de datos relacionales y no

relacionales.

Tabla 9: Tipos de base de datos

Ejemplos
Base de Datos Ventajas Desventajas
Populares

-​ Estructura bien
definida. -​ Escalabilidad
MySQL,
-​ Soporta limitada
PostgreSQL,
Relacional (SQL) transacciones horizontalmente
SQLite, Microsoft
ACID. -​ Requiere
SQL Server
-​ Escalabilidad esquema fijo.
vertical.

-​ No siempre
-​ Escalable garantiza
horizontalmente consistencia. MongoDB,
No Relacional
-​ Flexible para -​ Menor soporte Cassandra,
(NoSQL)
manejar varios para CouchDB, Redis
tipos de datos. transacciones
complejas.

Fuente: (Elmasri, 2015)

 40

3.7.​ PROGRAMACIÓN BACK-END

El backend es la parte que se ejecuta en un servidor en algún lugar de la nube y,

entre varias cosas, es responsable para el tratamiento de datos en términos generales. Esto
significa que es responsable de recibir solicitudes de los clientes para proporcionar datos,
para que puedan mostrar. Esto parece simple, pero hay muchos temas relacionados con el
backend.

Backend es el lado del servidor del sitio web. Almacena y organiza datos, y también se
asegura de que todo en el lado del cliente del sitio web funcione bien. Es la parte del sitio
web que no puede ver ni interactuar. Es la parte del software que no entra en contacto
directo con los usuarios. Los usuarios acceden indirectamente a las partes y características
desarrolladas por los diseñadores de back-end a través de una aplicación de front-end. Las
actividades, como escribir API, crear bibliotecas y trabajar con componentes del sistema sin
interfaces de usuario o incluso sistemas de programación científica, también se incluyen en
el backend. (Filipova & Vilao, 2018)

En otras palabras, el backend es la parte de un sitio web o aplicación que se ejecuta

en un servidor y gestiona el tratamiento y almacenamiento de datos, además de garantizar
que todo funcione correctamente en el lado del cliente. Aunque no es visible ni accesible
directamente por los usuarios, el backend soporta las funcionalidades del frontend,
permitiendo que los usuarios interactúen con la aplicación. El backend incluye tareas como el
desarrollo de APIs, manejo de datos, y componentes sin interfaz de usuario

3.7.1.​ Lenguajes de programación del back-end

La parte de back-end se crea utilizando algunos lenguajes que se analizan a

continuación:

3.7.1.1.​ Javascript

JavaScript es uno de los lenguajes más populares de la última década.

Permite a los desarrolladores crear frontend y backend con la misma sintaxis,
lo cual reduce significativamente la carga de trabajo.

Express.JS y Node.js permiten la administración y ejecución de ambos

extremos de la aplicación, mientras que las API ayudan en el desarrollo más
rápido y sencillo de las aplicaciones. (Presta, 2017)
 41

Ventajas:

●​ Desarrollo rápido. El uso de la misma sintaxis tanto para el frontend

como para el backend hace que JavaScript sea muy fácil y rápido de
desarrollar.
●​ Tecnología de backend indulgente. Aunque JavaScript admite y
prefiere diferente middleware, no existen restricciones para su uso.
JavaScript permite a los desarrolladores seleccionar y utilizar cualquier
middleware que deseen implementar.
●​ Rentable. El hecho de que pueda usar JavaScript para desarrollar
tanto el frontend como el backend de las aplicaciones, reduce
significativamente los costos de desarrollo.
●​ De código abierto. JavaScript es una tecnología de código abierto, por
lo que una gran comunidad de desarrolladores está trabajando en ella.
Esto significa que JavaScript está bajo constantes mejoras y
comunidades activas de desarrolladores de backend y frontend
durante mucho tiempo.

Desventajas:

●​ Las funciones controladas por eventos son muy complicadas.

●​ La mayoría de los desarrolladores no prefieren la libertad que ofrece el
marco de backend de JavaScript.
3.7.1.2.​ C#

C-Sharp es uno de los lenguajes más populares para hacer el backend

de un sistema por sus increíbles características como la automatización en los
servidores de Windows. Aparte de esto, es genial porque ejecuta códigos muy
rápidamente. (Presta, 2017)

Ventajas:

●​ Admite el desarrollo multiplataforma. Una de las mejores cosas de

C-Sharp es que admite el desarrollo multiplataforma. Esto significa que
las aplicaciones desarrolladas con C-Sharp pueden ejecutarse en
diferentes sistemas operativos. Sin embargo, para obtener más
información sobre los marcos multiplataforma C-Sharp, puede
 42

consultar ese artículo que analiza el desarrollo multiplataforma en

detalle.
●​ Amplia compatibilidad. Soporte de aplicaciones desarrollado por
C-Sharp para compatibilidad con versiones anteriores. Hace que
C-Sharp sea la mejor opción para las aplicaciones que se ejecutarán
en versiones anteriores de marcos de programación.
●​ Recolección de datos y valores basura. Para reducir los posibles
errores en la aplicación, C-Sharp tiene la función de recolección de
datos y valores basura. Recopila todos los datos basura que podrían
alterar los valores durante la ejecución. Debido a esto, el programa
puede proporcionar los mejores resultados de manera óptima.
●​ Programación orientada a objetos. C-Sharp es el lenguaje que admite
la programación orientada a objetos. Significa que los desarrolladores
pueden hacer un buen uso de las clases y relaciones. Hace que el
código sea excepcionalmente fácil de depurar, comprender e incluso
reutilizar.

Desventajas:

●​ Aunque es un lenguaje de alto nivel, esto creó el problema de que el

lenguaje no puede interactuar directamente con el hardware.
●​ Solo se puede ejecutar utilizando el marco .Net. Entonces, podemos
decir que esta tecnología es muy inflexible si se compara con las
últimas tecnologías backend.
3.7.1.3.​ Python

Python se creó en 1991 y, desde entonces, se ha convertido en un

gran lenguaje multipropósito. Proporciona un entorno de desarrollo backend
muy limpio y sencillo. Según una encuesta de Stack Overflow realizada en
2020, este fue el tercer lenguaje de programación más querido por los
desarrolladores. (Presta, 2017)

Ventajas:

●​ Fácil de aprender. Python proporciona un entorno de desarrollo que

está muy cerca de escribir en inglés. Es la razón por la que es muy
fácil de aprender debido a su alta legibilidad.
 43

●​ Hay muchas bibliotecas disponibles. Hay muchas bibliotecas

disponibles que reducen la necesidad de escribir código. También
puede utilizar la mayoría de las bibliotecas para mejorar las tareas
implementadas.
●​ Funciones de IoT. Puede usar Python para crear objetos Raspberry Pi.
●​ Códigos incrustados. La regla escribir una vez, ejecutar en cualquier
lugar (WORA, del inglés “write once run anywhere”) hace que Python
se incruste en el código fuente de lenguajes como C++.
●​ Rentable. Tiene muchos desarrolladores y las bibliotecas son gratuitas,
lo que hace que el desarrollo de Python sea muy rentable.

Desventajas:

●​ Los programas desarrollados en Python requieren muchas pruebas y

depuración.
●​ Python depende en gran medida de bibliotecas y marcos de trabajo de
terceros.
●​ Si se interrumpe la aplicación, el tiempo de ejecución se vuelve muy
lento.

Toda la teoría que se menciona en este título servirá para poder escoger las
herramientas que mejor se adapten a los requerimientos del sistema para la parte lógica y
funcional.

Respecto a los frameworks de los lenguajes mencionados en la tabla 10 se puede observar

sus principales características.

Tabla 10: Frameworks de Back-end

Mapeo Validación
Tipos de Curva de
Framework Lenguaje relacional de
proyectos aprendizaje
de objetos formularios

Por Plugin
NodeJS JavaScript Sí Medianos Media
(express.js)

Django Python Sí Sí Grandes Baja

 44

Mapeo Validación
Tipos de Curva de
Framework Lenguaje relacional de
proyectos aprendizaje
de objetos formularios

Por Plugin
Visual Basic
.Net Sí (windows Medianos Baja
/ .Net / C#
forms)

Laravel PHP Sí Sí Grandes Media

Symfony PHP Sí Sí Grandes Alta

Fuente: (Fundación Carlos Slim, 2021)

3.7.2.​ Node.js

Según Flores, J. L. (2019); Node.js es un entorno de tiempo de ejecución de

JavaScript (de ahí su terminación “.js” haciendo alusión al lenguaje JavaScript). Este
entorno de tiempo de ejecución en tiempo real incluye todo lo que se necesita para
ejecutar un programa escrito en JavaScript.

Node.js fue creado por los desarrolladores originales de JavaScript. Gracias a

Node.js se puede ir un paso más allá en la programación con JavaScript no solo
creando sitios web interactivos, sino teniendo la capacidad de hacer cosas que otros
lenguajes de secuencia de comandos pueden crear.

Tanto JavaScript como Node.js se ejecutan en el motor de tiempo de ejecución

JavaScript V8 (V8 es el nombre del motor de JavaScript que alimenta Google
Chrome). Este motor toma el código JavaScript y lo convierte en un código de
máquina más rápido. El código de máquina es un código de nivel más bajo que la
computadora puede ejecutar sin necesidad de interpretarlo primero, ignorando la
compilación y por lo tanto aumentando su velocidad.

Podemos decir que, Node.js es un entorno de tiempo de ejecución para

ejecutar programas escritos en JavaScript, ampliando el uso de JavaScript más allá
de los sitios web interactivos. Se ejecuta en el motor V8, que convierte el código
 45

JavaScript en código de máquina rápidamente, lo que aumenta su velocidad de

ejecución.

3.7.2.1.​ Express.js

Express.js es un framework minimalista y flexible para aplicaciones

web en Node.js que facilita la creación de aplicaciones web y APIs. Ofrece
características esenciales como enrutamiento, soporte para middleware y
utilidades HTTP, lo que lo convierte en una herramienta escalable y eficiente.

La versión 5 de Express introduce algunos cambios importantes, como la

eliminación del soporte para versiones antiguas de Node.js y mejoras en el
manejo de rutas para mayor seguridad. También añade mejor soporte para
`Promises`, lo que facilita el uso de código asincrónico con `async/await`,
importante para manejar errores y flujos de trabajo complejos de manera más
eficiente. (Express, 2024, traducción propia)

Express permite manejar solicitudes HTTP mediante rutas

personalizadas y middleware, lo que le otorga gran versatilidad. Su extenso
ecosistema de middleware y complementos ayuda a ampliar las
funcionalidades fácilmente. Debido a su simplicidad y flexibilidad, se utiliza
comúnmente para construir APIs RESTful y aplicaciones web. (Best of web,
2024, traducción propia)

En conclusión, Express.js es un framework simple y flexible para

Node.js, diseñado para facilitar la creación de aplicaciones web y APIs
mediante características como el enrutamiento y el soporte de middleware. En
su versión 5, Express mejora la compatibilidad con código asincrónico y
promesas, lo que permite manejar procesos complejos de forma más
eficiente, además de eliminar el soporte para versiones antiguas de Node.js.

3.8.​ (VCS) SISTEMA DE CONTROL DE VERSIONES GIT

Según Chacon & Straub (2024), acerca del sistema de control de versiones Git:

GIT es un software de control de versiones donde permite al usuario crear un

repositorio que se pueden compartir, regresar y avanzar, pensando en la eficiencia, la
 46

confiabilidad y compatibilidad del mantenimiento de versiones de aplicaciones cuando

estas tienen un gran número de archivos de código fuente.

Como muchas de las grandes cosas en esta vida, Git comenzó con un poco de
destrucción creativa y una gran polémica. El kernel de Linux es un proyecto de
software de código abierto con un alcance bastante amplio. Durante la mayor parte
del mantenimiento del kernel de Linux (1991-2002), los cambios en el software se
realizaban a través de parches y archivos. En el 2002, el proyecto del kernel de Linux
empezó a usar un DVCS propietario llamado

BitKeeper. En el 2005, la relación entre la comunidad que desarrollaba el kernel de

Linux y la compañía que desarrollaba BitKeeper se vino abajo y la herramienta dejó
de ser ofrecida de manera gratuita. Esto impulsó a la comunidad de desarrollo de
Linux (y en particular a Linus Torvalds, el creador de Linux) a desarrollar su propia
herramienta basada en algunas de las lecciones que aprendieron mientras usaban
BitKeeper. Algunos de los objetivos del nuevo sistema fueron los siguientes:

●​ Velocidad
●​ Diseño sencillo
●​ Gran soporte para desarrollo no lineal (miles de ramas paralelas)
●​ Completamente distribuido
●​ Capaz de manejar grandes proyectos (como el kernel de Linux)
eficientemente (velocidad y tamaño de los datos)

Desde su nacimiento en el 2005, Git ha evolucionado y madurado para ser fácil de

usar y conservar sus características iniciales. Es tremendamente rápido, muy
eficiente con grandes proyectos y tiene un increíble sistema de ramificación
(branching) para desarrollo no lineal.

Con esto se puede decir que, Git surgió en 2005 como respuesta a la necesidad de la
comunidad del kernel de Linux de encontrar una nueva herramienta de control de versiones
tras la ruptura con BitKeeper, un sistema propietario que habían utilizado desde 2002.
Cuando BitKeeper dejó de ser gratuito, Linus Torvalds, creador de Linux, decidió desarrollar
una herramienta propia que cumpliera con los requisitos que habían aprendido al trabajar
con el kernel: velocidad, simplicidad, soporte para un desarrollo no lineal y la capacidad de
manejar grandes proyectos de manera eficiente.
 47

Desde entonces, Git ha evolucionado manteniendo esos principios clave. Su diseño

distribuido permite a cada desarrollador tener una copia completa del proyecto, facilitando el
trabajo en paralelo con miles de ramas. Git se destaca por su rapidez y eficiencia en la
gestión de grandes volúmenes de datos, lo que lo ha convertido en una herramienta esencial
en el desarrollo de software, no solo en el mundo del código abierto, sino también en
proyectos de todo tipo.​ ​

3.8.1.​ Registro de cambios (Commit)

​ Un commit en Git es una acción que registra los cambios realizados en los
archivos de un repositorio. Cada commit es como un punto de control, permitiendo
que los desarrolladores documenten y rastreen el progreso del proyecto de manera
organizada.

Cada commit contiene:

●​ Los cambios realizados en los archivos (añadidos, modificados o eliminados).

●​ Un mensaje descriptivo, que explica qué cambios se hicieron y por qué.
●​ Un identificador único (hash), que permite rastrear ese commit en particular.
●​ Información del autor y la fecha en que se realizó.
3.8.2.​ Ramas (branches)

En Git, una rama (o branch) es una línea independiente de desarrollo que

permite trabajar en paralelo con la rama principal,estas ramas facilitan el desarrollo
de nuevas características, correcciones de errores, o experimentos sin afectar el
código estable del proyecto.

Cada rama es como una "copia" del proyecto en un punto determinado, y los
desarrolladores pueden hacer commits en ella sin interferir con el trabajo de otras
ramas. Al finalizar el trabajo en una rama, se puede fusionar (merge) con otra rama,
generalmente la principal, para incorporar los cambios.

3.8.3.​ Fusiones (merges)

En Git es el proceso de combinar los cambios de una rama con otra.

Generalmente, se utiliza para incorporar el trabajo de una rama de desarrollo o
característica en la rama principal (como main o master). Al hacer una fusión, Git une
las historias de ambas ramas, aplicando los cambios que se hicieron en cada una.
 48

Existen dos tipos de fusiones principales:

●​ Fusión directa (fast-forward): Si no ha habido cambios en la rama principal

desde que se creó la rama secundaria, Git simplemente avanza el puntero de
la rama principal al último commit de la rama secundaria, sin necesidad de
una fusión compleja.
●​ Fusión con commit de merge: Si ambas ramas han tenido cambios, Git intenta
combinar automáticamente los commits de ambas. Si hay conflictos (cambios
en las mismas líneas de código), Git pedirá que los resuelvas manualmente
antes de completar la fusión.
3.8.4.​ Fork

Un fork en Git es una copia de un repositorio existente que se crea en tu

propio espacio de trabajo, generalmente en plataformas como GitHub, este proceso
permite que los desarrolladores trabajen en una versión independiente del proyecto
original, realizando modificaciones sin afectar el repositorio principal.

El fork es útil, sobre todo en proyectos de código abierto, ya que permite que
contribuyas a un proyecto realizando cambios o mejoras. Una vez que completes tu
trabajo, puedes solicitar que esos cambios sean integrados en el repositorio original
mediante un pull request. Esto permite que el mantenedor del proyecto revise y
acepte o rechace las modificaciones.

3.9.​ DESARROLLO COLABORATIVO GITHUB

Según GitHub Docs (s. f.), acerca del desarrollo colaborativo con GitHub:

GitHub es una plataforma donde se puede almacenar, compartir y trabajar junto con
otros usuarios para escribir código.

Almacenar el código en un "repositorio" en GitHub permite:

●​ Presentar o compartir el trabajo.

●​ Seguir y administrar los cambios en el código a lo largo del tiempo.
●​ Dejar que otros usuarios revisen el código y realicen sugerencias para
mejorarlo.
 49

●​ Colaborar en un proyecto compartido, sin preocuparse de que los cambios

afectarán al trabajo de los colaboradores antes de que esté listo para
integrarlos.

El trabajo colaborativo, una de las características fundamentales de GitHub, es

posible gracias al software de código abierto Git, en el que se basa GitHub.

3.9.1.​ Cómo funciona Git y GitHub juntos

Al cargar archivos en GitHub, los almacena en un "repositorio de Git". Esto

significa que al realizar cambios (o "compromisos") en los archivos de GitHub, Git se
iniciará automáticamente para realizar un seguimiento y administrar los cambios.

Hay muchas acciones relacionadas con Git que puedes completar en GitHub
directamente en el navegador, como crear un repositorio de Git, crear ramas y cargar
y editar archivos.

Sin embargo, la mayoría de las personas trabajan en sus archivos localmente (en su
propio ordenador), luego sincroniza continuamente estos cambios locales y todos los
datos de Git relacionados, con el repositorio central "remoto" en GitHub. Hay muchas
herramientas que puedes usar para hacerlo, como GitHub Desktop. (GitHub Docs,
s. f.)

En pocas palabras GitHub es una plataforma que facilita el almacenamiento y la

colaboración en proyectos de código a través de Git. Permite a los desarrolladores gestionar
cambios, compartir su trabajo y colaborar sin conflictos mediante repositorios, ramas y
solicitudes de cambios, tanto localmente como de forma remota.

3.10.​ ENTORNOS DE DESARROLLO INTEGRADO (IDE)

Un IDE (Entorno de Desarrollo Integrado) es una herramienta más completa que no

solo permite editar código, sino que también incluye herramientas para depuración,
compilación, autocompletado de código, control de versiones, y gestión de proyectos en un
solo entorno. Es ideal para proyectos más grandes y lenguajes específicos. Un ejemplo es
Visual Studio, que "provee herramientas avanzadas de depuración y gestión de proyectos, lo
cual facilita el desarrollo en proyectos complejos" (Codementor, 2024).
 50

Por otro lado, un editor de código es más ligero, centrado únicamente en la edición de
texto y sin muchas de las herramientas que tiene un IDE. Un editor de código como Sublime
Text o Visual Studio Code "se especializa en la edición rápida y sencilla de código, siendo
personalizable mediante plugins" (Stack Overflow, 2024).

En resumen, los IDEs son más adecuados para proyectos grandes y complejos,
mientras que los editores de código ofrecen una experiencia más ligera y personalizable para
tareas de programación más simples.

A continuación en la tabla 11 se muestran las características de algunos entornos de

desarrollo integrado.

Tabla 11: Entornos de desarrollo integrado

Lenguajes Características
Herramienta Tipo
Soportados Principales

●​ Depurador avanzado
C#, C++, VB.NET, ●​ Integración con Azure
Visual Studio IDE Python, JavaScript, ●​ Diseño visual de
etc. interfaces (WPF,
WinForms)

●​ Editor de texto con

características de
JavaScript, HTML, IDE
Atom Editor de código
CSS, etc. ●​ Multiplataforma
●​ Plugins para varios
lenguajes

●​ Asistencia de código
para PHP
PHP, JavaScript, ●​ Integración con
PHPStorm IDE
HTML, CSS, etc. herramientas de
desarrollo web
(MySQL, Docker, etc)

Fuente: (Mead J., & Rowe H.,2018)

 51

3.10.1.​Visual Studio Code (VS Code)

Visual Studio Code (VS Code) es un editor de código fuente gratuito y

multiplataforma desarrollado por Microsoft, lanzado por primera vez en abril de 2015.
Desde su creación, ha ganado una gran popularidad entre los desarrolladores debido
a su ligereza, rapidez y características avanzadas. VS Code está diseñado para ser
altamente personalizable, permitiendo a los usuarios adaptarlo a sus necesidades a
través de una amplia colección de extensiones que ofrecen soporte para diversos
lenguajes de programación, herramientas de depuración e integración con sistemas
de control de versiones. (Visual Studio Code, s. f.)

A lo largo de su evolución, VS Code ha incorporado numerosas

funcionalidades que lo hacen destacar, como el resaltado de sintaxis y
autocompletado gracias a IntelliSense, que proporciona sugerencias inteligentes
mientras se escribe código. También incluye integración con Git, lo que permite
gestionar versiones y realizar commits directamente desde el editor, así como un
depurador integrado que facilita la identificación y corrección de errores en el código.
Además, su terminal integrado permite a los desarrolladores ejecutar comandos sin
salir del entorno de trabajo.

VS Code es compatible con una amplia variedad de lenguajes de programación,

como JavaScript, Python, C++, HTML/CSS, entre otros. Su soporte para desarrollo
web, aplicaciones móviles y entornos en la nube lo ha convertido en una herramienta
favorita en la comunidad de desarrollo.

3.10.1.1.​ Extensiones en Visual Studio (VS Code)

Las extensiones en Visual Studio Code son complementos que

amplían la funcionalidad del editor, permitiendo a los usuarios personalizar su
entorno de desarrollo. Estas extensiones pueden añadir soporte para nuevos
lenguajes de programación, herramientas de depuración, temas visuales, y
características adicionales como integración con plataformas de control de
versiones o herramientas de colaboración. (Visual Studio Code, s. f.)

●​ Live Server: Lanza un servidor local para previsualizar aplicaciones

web en tiempo real.
●​ GitLens: Mejora las capacidades de Git en VS Code, mostrando la
historia del código y la autoría.
 52

Estas extensiones facilitan y contribuyen demasiado en la

programación, es por esa razón que suele ser muy utilizada por la comunidad
de visual Studio Code.

3.11.​ HOSTING DE SITIOS WEB

El hosting, traducido como “alojamiento” en español. Es un espacio en Internet, un

servicio “de alquiler” para almacenar archivos de texto, imágenes o vídeos a los que los
clientes pueden acceder una vez introduzcan la dirección en el navegador.

3.11.1.​Dominio

Según se dice en Habil Web (s. f.), el dominio es el identificador del sitio web.
Se puede contratar un dominio y renovarlo periódicamente, pero no serviría si no se
tiene un hosting detrás porque solo se vería la dirección, pero no los archivos,
formularios de contacto o productos. Ejemplo: «www.tumarca.com».

En la tabla 12 se muestra la comparativa que explica los tipos de hosting.

Tabla 12: Tipos de hosting

Tipo de Hosting Descripción Ventajas Recomendado para

Hosting Alojamiento donde Económico, fácil de Páginas web simples o

Compartido varios sitios web administrar, no de bajo tráfico.
comparten los requiere
recursos de un mantenimiento
servidor. técnico.

Hosting VPS Un servidor se Mayor rendimiento, Sitios web con tráfico

divide en varias escalabilidad, control moderado y
particiones virtuales sobre la configuración necesidades de
con recursos del servidor. personalización.
dedicados para
cada sitio.
 53

Tipo de Hosting Descripción Ventajas Recomendado para

Hosting Un servidor Máximo rendimiento, Grandes empresas,

Dedicado completo dedicado flexibilidad, adecuado sitios web con alto
a un solo usuario o para aplicaciones de tráfico o requisitos de
empresa, con recursos intensivos y seguridad.
control total sobre altos niveles de
los recursos. seguridad.

Hosting Alojamiento Optimizado para Usuarios de WordPress

WordPress especializado para WordPress, fácil de que necesitan un
sitios web instalar y configurar. hosting especializado.
construidos con
WordPress,
optimiza el
almacenamiento.

Hosting Moodle Alojamiento Optimizado para el Instituciones

especializado para uso intensivo de educativas,
la plataforma Moodle, incluye las universidades,
Moodle, usada herramientas plataformas de
principalmente en necesarias para e-learning.
educación virtual. estudiantes y
docentes.

Fuente: (HABIL WEB, s. f.)

 54

CAPÍTULO 4.​ DESARROLLO DE LA INNOVACIÓN

4.1.​ PLANIFICACIÓN Y ORGANIZACIÓN

4.1.1.​ Cronograma de actividades

El cronograma que se llevará a cabo en la gestión 2024 se muestra en la tabla

13, mostrando los periodos en los cuales se desarrollarán las actividades para llevar a
cabo el repositorio web.

Tabla 13: Cronograma de actividades

Actividad/Mes Agosto Septiembre Octubre Noviembre

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Elaboración del
perfil

Recopilación de
información

Elaboración
de Marco
Referencial

Elaboración
del desarrollo
de la
innovación

Realización del
tercer objetivo

Pre-defensa del
proyecto

Defensa del
proyecto

Fuente: Elaboración propia

 55

4.2.​ DESARROLLO DEL PRODUCTO O SERVICIO

En el presente acápite se tratará el desarrollo del repositorio y los objetivos

específicos con sus respectivas acciones.

4.2.1.​ Identificación de los requerimientos del sistema

En base a las encuestas realizadas y analizando la problemática subyacente a

ellas, se procede con la identificación de los requerimientos necesarios del sistema.

4.2.1.1.​ Requerimientos funcionales

Los requerimientos funcionales definen las funciones y características

que el sistema debe cumplir para ser considerado completo y operativo. En la
tabla 14, se describen los principales requerimientos funcionales del proyecto:

Tabla 14: Requerimientos funcionales

TÍTULO SUBTÍTULO DESCRIPCIÓN

El sistema debe permitir a

los administradores
(profesores de BTH)
añadir nuevos proyectos
con título, resumen,
autores, año, tutores,
Gestión de
categorías, palabras clave
proyectos Crear proyecto
y calificación (inicialmente
(CRUD)
null).

El sistema debe permitir a

los administradores subir
un archivo PDF y un
archivo JSON por
proyecto.
 56

TÍTULO SUBTÍTULO DESCRIPCIÓN

Cualquier usuario debe

poder consultar los
proyectos almacenados
en el repositorio.
Leer proyecto
Los usuarios deben poder
buscar y consultar los
proyectos utilizando filtros
Gestión de o barras de búsqueda.
proyectos
Los administradores y
(CRUD)
profesores deben poder
actualizar la calificación
de los proyectos.
Actualizar proyecto
Los administradores
deben poder actualizar la
información de los
proyectos en caso de
errores.

Solo el administrador
puede crear nuevas
cuentas de profesor o
Crear cuentas administrador. Estas
cuentas deben incluir un
Gestión de
nombre de usuario y
cuentas de
contraseña.
usuarios (CRUD)
El administrador puede
ver la lista completa de
Leer cuentas cuentas de profesores y
gestionar todas las
cuentas.
 57

TÍTULO SUBTÍTULO DESCRIPCIÓN

Los profesores deben

poder cambiar su
Actualizar cuentas contraseña. El
administrador puede
modificar los datos de
Gestión de
cualquier cuenta.
cuentas de
usuarios (CRUD) Los profesores pueden
eliminar su cuenta,
Eliminar Cuenta de mientras que el
Profesor administrador puede
eliminar cualquier cuenta
de profesor.

El sistema debe autenticar

a los usuarios mediante
Autenticación nombre de usuario y
contraseña, utilizando
JWT para gestionar las
sesiones.
Autenticación y
Los roles deben definir
autorización
diferentes permisos: el
administrador tiene CRUD
Autorización Basada en completo sobre proyectos
Roles y cuentas, el profesor
gestiona los proyectos a
cargo suyo, y el visitante
solo consulta.

Fuente: Elaboración propia

4.2.1.2.​ Requerimientos no funcionales

Los requerimientos no funcionales describen las cualidades del

sistema, tales como la seguridad o la facilidad de uso. A continuación, se
presentan los principales requerimientos no funcionales del proyecto:
 58

Tabla 15: Requerimientos no funcionales

TÍTULO SUBTÍTULO DESCRIPCIÓN

Las contraseñas deben

almacenarse de forma
segura mediante técnicas
Protección de datos
de hash como bcrypt para
proteger los datos
sensibles.

Los usuarios deben ser

identificados y
Acceso autorizado autenticados antes de
Seguridad acceder a áreas
restringidas del sistema.

El sistema debe emplear

JSON Web Tokens (JWT)
para gestionar la
autenticación, asegurando
Uso de JWT
que solo los usuarios con
un token válido puedan
realizar acciones
específicas.

El sistema debe contar con

una interfaz simple e
intuitiva para que
Facilidad de uso Interfaz intuitiva profesores y
administradores puedan
gestionar proyectos y
cuentas fácilmente.
 59

TÍTULO SUBTÍTULO DESCRIPCIÓN

Los visitantes deben poder

consultar los proyectos sin
necesidad de registro,
Acceso sin registro
facilitando el acceso a la
información disponible en
el repositorio.

Facilidad de uso
El sistema debe
proporcionar
documentación clara para
Documentación clara los profesores y el
administrador, explicando
cómo usar la plataforma
eficientemente.

El backend debe estar

diseñado de manera
modular para que las
Modularidad
funciones puedan ser
mantenidas y actualizadas
de manera independiente.
Mantenimiento
El sistema debe ser
fácilmente modificable para
Facilidad de agregar o cambiar
actualización funcionalidades en el futuro
sin afectar otras áreas del
sistema.
 60

TÍTULO SUBTÍTULO DESCRIPCIÓN

El sistema debe estar

accesible en todo
momento, con especial
énfasis en los períodos de
Alta disponibilidad
defensa de proyectos,
manteniendo el mínimo
tiempo de inactividad
posible.
Disponibilidad
El sistema debe estar
preparado para manejar
errores comunes,
mostrando mensajes
Manejo de errores
adecuados a los usuarios y
registrando los errores
para su posterior
resolución.

La plataforma debe ser

accesible desde
computadoras de escritorio
Compatibilidad con y dispositivos móviles,
Compatibilidad
múltiples dispositivos adaptándose
automáticamente a
diferentes tamaños de
pantalla.

Fuente: Elaboración propia

 61

4.2.2.​ Estructuración de base de datos e interacción con el servidor

En base a los requerimientos damos con un sistema que necesita crear, leer y
actualizar información de proyectos; de la misma forma, se debe permitir la creación,
lectura, actualización y eliminación de cuentas para profesores. Es de esa manera
que dividimos los permisos en tres tipos de usuario: Administrador, profesor y
visitante. Solo dos de los tres tipos de usuario poseerán cuenta, el visitante no la
necesita por la mera necesidad de solo consultar la información de proyectos.

4.2.2.1.​ Selección del lenguaje

Para el desarrollo del back-end, JavaScript, usando Node.js, fue seleccionado

como el lenguaje principal. En la tabla 16, se presenta un análisis comparativo con
otros lenguajes comunes para back-end y los motivos por los cuales JavaScript es la
opción más adecuada para este proyecto.

Tabla 16: Comparación entre lenguajes de programación

JAVASCRIPT
CRITERIO PYTHON PHP
(NODE.JS)

Permite el uso del Sencillo de Más complejo para

mismo lenguaje en aprender, pero desarrollo full stack
Curva de
front-end y back-end, requiere aprender y requiere más
Aprendizaje
reduciendo la curva otro lenguaje para tiempo para
de aprendizaje. el front-end. adaptarse.

Nativo con JSON, lo Soporta JSON, Compatible con

que simplifica la pero requiere MongoDB pero
Compatibilidad
integración de datos configuraciones requiere librerías y
con MongoDB
entre el servidor y adicionales para configuraciones
MongoDB. igual fluidez. adicionales.
 62

JAVASCRIPT
CRITERIO PYTHON PHP
(NODE.JS)

Arquitectura no
Compatible con
bloqueante y Manejo sincrónico
programación
asincrónica, de solicitudes,
Desempeño y asincrónica, pero
excelente para menos eficiente en
Concurrencia menos eficiente
manejar múltiples aplicaciones de alto
en concurrencia
solicitudes tráfico.
que Node.js.
simultáneamente.

Menos flexible para

Escalable, pero
Ideal para arquitecturas
frameworks como
Escalabilidad y aplicaciones modulares; requiere
Django y Flask
Flexibilidad modulares y configuraciones
son más
microservicios. adicionales para
monolíticos.
escalar.

Ampliamente
Amplio soporte en la Compatible con soportado en
nube (AWS, Heroku, servicios en la servidores, pero
Despliegue y Azure), con gran nube, pero menor necesita
Ecosistema variedad de enfoque en adaptaciones
bibliotecas de código microservicios de adicionales para
abierto. tiempo real. despliegue en
nube.

Fuente: Elaboración propia

4.2.2.2.​ Servicios de Almacenamiento

Se discutió cómo manejar los archivos y datos almacenados en el

sistema. Esto incluye la creación de un sistema que permita a los estudiantes
subir sus archivos PDF y la información del proyecto, que luego será
gestionada por los profesores. Sin embargo para evitar problemas por el
 63

material que se llegue a subir, como material incorrecto, incompleto,

duplicado, o demasiados archivos se tomó por decisión que el administrador,
profesor de BTH, lleve la tarea de subir los archivos y de esa manera,
únicamente los estudiantes facilitarían al profesor el archivo PDF del
documento del proyecto y un JSON donde se encuentran las especificaciones
del mismo.

4.2.2.3.​ Diseño back-end

Con esa idea se plantea el diseño del back-end. El diseño de la

arquitectura de la misma está ideada para usar Express por medio de Node.js
y MongoDB. Los principales componentes del back-end son los siguientes:

●​ Cliente: Es el dispositivo que realiza solicitudes y recibe respuestas del

servidor a través de protocolos HTTP. Por otro lado, dependiendo del
rol del usuario, se podrá acceder a diferentes funcionalidades.

●​ Rutas API: Las rutas definen las URL y métodos HTTP (GET, POST,
PUT, DELETE) que permiten interactuar con el servidor.

●​ Servidor: Es el lugar donde se ejecuta la aplicación. Sabrá manejar las

peticiones HTTP (API REST) que lleguen desde el cliente y usará
middleware para autorizar las solicitudes antes de que lleguen a los
controladores.

●​ Controladores: Son las funciones que se ejecutan en respuesta a las

rutas y manejan la lógica del producto. Se crearon dos controladores
principales:

■​ CRUD de Proyectos: Los tres roles (administrador, profesor,

visitante) podrán acceder a los proyectos. El administrador
tendrá acceso total a las funciones de gestión de proyectos,
mientras que el profesor solo podrá modificar las calificaciones
de los proyectos.

■​ CRUD de Cuentas: Solo el administrador puede crear,

visualizar, actualizar y eliminar nuevas cuentas de profesor. Los
 64

profesores solamente pueden actualizar y eliminar sus propias

cuentas, pero no crear nuevas.

●​ Modelos: Definen las estructuras de datos para las bases de datos. En

este caso, definirán la estructura de datos en MongoDB para proyectos
y cuentas . Los controladores usan estos modelos para interactuar con
la base de datos.

●​ Base de datos (MongoDB): Almacena los proyectos y las cuentas en

colecciones separadas. Cada solicitud de los controladores interactúa
con la base de datos para recuperar o modificar datos.

Con dichos componentes se construyó el diagrama de componentes de la

figura 10.

Figura 10: Diagrama de componentes del back-end

Fuente: Elaboración propia

Por otro lado, las rutas que se planean usar para la comunicación entre
cliente - servidor y el uso de los respectivos métodos se detallan en la
tabla 17.
 65

​ Tabla 17: Rutas y funcionalidades

CONTROLADOR MÉTODO RUTA DESCRIPCIÓN

Crear un nuevo
POST /proyectos
proyecto

Obtener todos
GET /proyectos
los proyectos
CRUD
PROYECTOS Obtener un
GET /proyectos/:id proyecto
específico

Actualizar un
PUT /proyectos/:id
proyecto

Crear una nueva

POST /cuentas
cuenta

Obtener todas
GET /cuentas
las cuentas
CRUD
CUENTAS
Actualizar una
PUT /cuentas/:id
cuenta

Eliminar una
DELETE /cuentas/:id
cuenta

Fuente: Elaboración propia

4.2.2.4.​ Definición de Autenticación y Autorización

Se definió un sistema de autenticación basado en JSON Web Tokens

(JWT) y una autorización basada en roles. El sistema de autenticación y
autorización JWT (JSON Web Token) se basa en la generación de un token
para cada usuario que inicie sesión.

Al entrar, los usuarios, que pueden ser profesores o administradores,

ingresarán su nombre de usuario y contraseña. Si las credenciales son
 66

correctas, el sistema generará un token JWT que se enviará al dispositivo del

usuario para usarlo en futuras solicitudes. Este token sirve como “prueba” de
que el usuario está autenticado. La autorización depende del rol asignado a
cada usuario.

Para asegurar que cada usuario pueda acceder solo a las funciones
permitidas por su rol, el sistema usa middleware, el cual verificará el token del
usuario. De esta forma, el sistema confirmará que solo los usuarios
autenticados y autorizados accedan a ciertas rutas y funciones según sus
permisos, manteniendo así la seguridad y la estructura de permisos del
sistema.

4.2.2.5.​ Modelo de Datos (Esquemas MongoDB)

Los modelos o esquemas son representaciones de los datos que se

almacenarán y sus relaciones. Para el sistema, se establecieron los siguientes
campos para ambos modelos como se observa en la tabla 18.

Tabla 18: Modelo de datos de proyectos y cuentas

MODELO CAMPO TIPO DE DATO DESCRIPCIÓN

El nombre del
Título String
proyecto

Una breve
Resumen String descripción del
proyecto

MODELO DE Los nombres de

DATOS DE Autores Array of String los autores del
PROYECTOS proyecto

El año en que se
presentó el
Gestión Number
proyecto
 67

MODELO CAMPO TIPO DE DATO DESCRIPCIÓN

Los nombres de
Tutores Array of String los tutores
asignados

Clasificación del
Categorías Array of String
proyecto

Palabras que
ayudan en la
Palabras clave Array of String
búsqueda de
proyectos

Se iniciará como
`null`, ya que los
proyectos no
Calificación Number tendrán
calificación hasta
el día de la
defensa

El nombre o
Nombre de
String identificación del
usuario
profesor
MODELO DE
DATOS DE
La contraseña
CUENTAS
con la que se
Contraseña String
podrá acceder a
la cuenta

Fuente: Elaboración propia

Con todo lo anteriormente mencionado, se elaboró el diagrama que visualiza

en la figura p, la estructura del back-end de manera completa.
 68

Figura 11: Diagrama de componentes completo

Fuente: Elaboración propia

4.2.3.​ Diseño de la interfaz de usuario y estilo visual

El desarrollo de la interfaz de usuario se centra en ofrecer una experiencia

accesible, intuitiva y visualmente atractiva para los estudiantes de la Unidad
Educativa Técnico Humanístico Josefa Manuela Gandarillas. El diseño es sencillo y
comprensible, con una navegación clara que facilita su uso. Visualmente, el estilo
mantiene consistencia con los colores y elementos institucionales, reforzando la
identidad escolar. Además, la interfaz es adaptable a diferentes dispositivos y brinda
retroalimentación visual para que los usuarios sepan que sus acciones se han
realizado correctamente. En conjunto, estos aspectos buscan promover un acceso
fácil y una navegación efectiva en el sitio web.

4.2.3.1.​ Desarrollo y estructura de la interfaz

La página web está organizada para maximizar la accesibilidad y simplicidad

de uso, siendo organizada de una manera como se ve en la tabla 19.
 69

Tabla 19: Organización de la interfaz de usuario

INTERFAZ DE
INTERFAZ DESCRIPCIÓN
USUARIO Y VISUAL

Nombre de la web,
generalmente enlazado
a la página principal,
Inicio de la página que sirve como un
ancla visual y facilita
regresar al inicio con un
solo clic.

Herramienta clave para

que el usuario
encuentre contenido
Barra de navegación específico a través de
palabras clave para una
experiencia rápida y
sencilla.
ESTRUCTURA
Ayuda e información
SUPERIOR
Acerca de sobre los creadores de
la página y el sitio web.

Guía paso a paso para

usuarios interesados en
contribuir contenido.
Cómo publicar
Incluye el formato de
datos del proyecto en
un archivo JSON.

Sitio para acceso e

inicio de sesión de las
cuentas de
Cuentas
administrador como
también de los
profesores de BTH.
 70

INTERFAZ DE
INTERFAZ DESCRIPCIÓN
USUARIO Y VISUAL

Sección que invita al

usuario a explorar
temas de interés
mediante sugerencias y
Descubre categorías destacadas.
Facilita la navegación
intuitiva con opciones
visuales, como un
carrusel de temas.

Nombre completo del

sitio web para una
Título de la página web
mejor experiencia
visual del usuario.

Muestra a los tutores y

ESTRUCTURA DE los proyectos en los
INFORMACIÓN Tutores
que los mismos han
colaborado.

Proyectos publicados
ordenados de acuerdo
Temas a su tema principal para
una mejor facilitación
de la búsqueda.

Información de
proyectos por gestión
publicados en una
Gestiones jerarquía desde el
primer proyecto público
hasta el último proyecto
publicado.
 71

INTERFAZ DE
INTERFAZ DESCRIPCIÓN
USUARIO Y VISUAL

Ayuda e información
Acerca de sobre los creadores de
la página y el sitio web.

Guía paso a paso para

usuarios interesados en
contribuir contenido.
Cómo publicar
Incluye el formato de
ESTRUCTURA FINAL datos del proyecto en
DE LA PÁGINA WEB
un archivo JSON.

Sitio para acceso e

inicio de sesión de las
cuentas de
Cuentas
administrador como
también de los
profesores de B.T.H.

​ ​ Fuente: Elaboración propia

4.2.3.2.​ Prototipos y Herramientas Utilizadas

Para el desarrollo de la página web de este repositorio de informes, se

emplearon diversas herramientas que facilitaron tanto el diseño como la
programación y el control de versiones del proyecto. A continuación, se
detallan las principales:

PowerPoint: Se utilizó para crear bocetos y primeros esquemas

visuales de la interfaz, permitiendo planificar y visualizar la estructura de la
página web de manera inicial. Esta herramienta fue fundamental para la
presentación de ideas y la obtención de retroalimentación antes de comenzar
con el diseño detallado.

Visual Studio Code: Fue el entorno de desarrollo principal para

programar la página web, utilizando HTML, CSS y JavaScript. Este editor de
 72

código proporcionó una plataforma completa para escribir, organizar y depurar

el código de la interfaz, aprovechando sus extensiones y herramientas
integradas para mejorar la productividad.

Git y GitHub: Git fue la herramienta de control de versiones utilizada en

el proyecto para gestionar y guardar los cambios en el código de forma
eficiente. GitHub, por su parte, permitió la colaboración y el almacenamiento
seguro del proyecto en un repositorio en la nube, donde se pudo documentar
cada modificación y asegurar el control de versiones. GitHub también facilitó
la integración y revisión del código, así como la colaboración en equipo.

HTML, CSS y JavaScript: Estos lenguajes se emplearon para

desarrollar la interfaz de usuario y garantizar la interactividad y el diseño visual
de la página. HTML proporcionó la estructura base del sitio, CSS permitió
definir el estilo visual y el diseño responsivo, y JavaScript se utilizó para
agregar interactividad y mejorar la experiencia de usuario.

Estas herramientas fueron esenciales para cubrir todas las etapas del
desarrollo, desde la planificación y la organización de los elementos hasta la
implementación y control de versiones del código.

4.2.3.3.​ Adaptación a Dispositivos

La interfaz de la página web del repositorio está diseñada para ser

completamente “responsiva”, adaptándose a diversos dispositivos para
asegurar una experiencia óptima en cada uno de ellos:

Celulares: La interfaz se adapta a pantallas pequeñas utilizando un

diseño compacto y un menú de navegación en formato de "hamburguesa."
Los elementos interactivos, como botones y filtros, se reorganizan
verticalmente para facilitar la navegación táctil.

Tabletas: En dispositivos de tamaño medio, el diseño se ajusta para

aprovechar mejor el espacio disponible, manteniendo una estructura clara y
accesible. Los filtros y opciones adicionales se despliegan lateralmente o en
formato de lista para mejorar la usabilidad en pantallas táctiles de mayor
tamaño.
 73

Laptops: En pantallas de mayor tamaño, como en laptops, la interfaz

despliega la barra de navegación completa y aprovecha al máximo el espacio
horizontal, permitiendo ver más contenido sin necesidad de desplazarse. La
estructura de los informes y los elementos de navegación se distribuyen en
una cuadrícula o lista más amplia, mejorando la visualización de los
elementos en una sola vista.

Este diseño responsivo asegura que la página web sea accesible y fácil de
usar en todos los dispositivos, manteniendo una experiencia de usuario
coherente y eficiente.

4.2.3.4.​ Estilo Visual

●​ Tipografía

Títulos en serif: Se utilizó una tipografía con serif para los títulos y
encabezados. Las serifas (pequeñas líneas o detalles al final de las
letras) añaden un toque de formalidad y profesionalismo, además de
crear un contraste visual que facilita la identificación rápida de las
secciones principales en la interfaz.

Contenido en sans-serif: Para el contenido principal, se eligió una

tipografía sans-serif, que resulta más legible en pantallas digitales y
evita la fatiga visual en textos más largos. Las fuentes sans-serif, sin
los adornos de las serifas, proporcionan una lectura fluida y son
ideales para el cuerpo del texto en interfaces web.

●​ Paleta de colores:

La paleta de colores del sitio web se compone principalmente de rojo,

blanco y azul, colores que reflejan la identidad visual del colegio. Estos
colores no solo aportan cohesión estética, sino que también facilitan la
familiarización de los usuarios con la plataforma, ya que están
asociados a la imagen institucional del colegio. Los colores de los
logotipos empleados en el sitio son negro, blanco o una combinación
de los colores institucionales (blanco, rojo y azul), lo que refuerza la
identidad del colegio y promueve una experiencia visual consistente y
reconocible para los usuarios.
 74

●​ Iconografía y gráficos:

La iconografía en la página web se ha diseñado para simplificar y

facilitar la navegación. Los íconos se utilizan principalmente para
acciones clave, como "Buscar",

4.3.​ RECURSOS

4.3.1.​ Humanos

En el apartado de recursos humanos se hablará de los siguientes

desarrolladores de software, realizadores de pruebas de control de calidad.

4.3.1.1.​ Estudiante 1

Por una parte, el estudiante Ricardo Israel Colque Velasco estuvo

encargado en su mayor parte, de la realización del back-end del repositorio
web. En la totalidad del proyecto, el estudiante ya mencionado estuvo
encargado de las acciones detalladas en la tabla 20.

Tabla 20: Acciones del estudiante Ricardo Israel Colque Velasco

OBJETIVOS ESPECÍFICOS ACCIONES

Analizar la situación actual y los ●​ Encuestar a los estudiantes de

requerimientos del proceso de promoción y pre-promoción de

elaboración de proyectos de la Unidad Educativa Técnico

titulación por la cual pasan los Humanístico Josefa Manuela

estudiantes de la Unidad Educativa Gandarillas.

Técnico Humanístico Josefa ●​ Identificar los requerimientos del

Manuela Gandarillas. sistema.

●​ Estudiar los lenguajes de

Planificar la estructura, diseño y programación: HTML, CSS y

funcionalidad con la que contará el JavaScript.

repositorio web. ●​ Diseñar la interfaz de usuario y

el estilo visual con el que
contará el repositorio web.
 75

OBJETIVOS ESPECÍFICOS ACCIONES

●​ Estudiar el desarrollo
colaborativo con control de
versiones por vía de Git y
GitHub.

●​ Realizar pruebas de

Implementar el repositorio web para funcionamiento del sitio web.

el uso libre de los estudiantes y ●​ Realizar la programación de los

profesores de la Unidad Educativa elementos y páginas que

Técnico Humanístico Josefa poseerá el repositorio web por

Manuela Gandarillas. HTML, CSS y JavaScript.

●​ Realizar ajustes y correcciones
al sistema completo.

Fuente: Elaboración propia

4.3.1.2.​ Estudiante 2

Por otra parte, el estudiante Isaac Matías Gonzales Ortiz estuvo

encargado en su mayor parte, de la realización del back-end del repositorio
web. En la totalidad del proyecto, el estudiante ya mencionado estuvo
encargado de las acciones detalladas en la tabla 21.

Tabla 21: Acciones del estudiante Isaac Matías Gonzales Ortiz

OBJETIVOS ESPECÍFICOS ACCIONES

●​ Entrevistar a alumnos
Analizar la situación actual y los
graduados de la Unidad
requerimientos del proceso de
Educativa Técnico
elaboración de proyectos de
Humanístico Josefa Manuela
titulación por la cual pasan los
Gandarillas.
estudiantes de la Unidad Educativa
Técnico Humanístico Josefa ●​ Identificar los requerimientos
Manuela Gandarillas. del sistema.
 76

OBJETIVOS ESPECÍFICOS ACCIONES

●​ Estudiar la elaboración de
bases de datos, creación de
servidores y lenguajes de
programación usados en el
back-end.
Planificar la estructura, diseño y
funcionalidad con la que contará el ●​ Estructurar la base de datos y
repositorio web. su interacción con el servidor

●​ Estudiar el desarrollo
colaborativo con control de
versiones por vía de Git y
GitHub.

●​ Elaborar la base de datos.

●​ Realizar la programación y
conexión de servidor con base
de datos y el resto del
repositorio.
Implementar el repositorio web para
el uso libre de los estudiantes y ●​ Realizar pruebas de
profesores de la Unidad Educativa funcionamiento del sitio web.
Técnico Humanístico Josefa
●​ Realizar ajustes y correcciones
Manuela Gandarillas.
al sistema completo.

●​ Realizar la primera operación

de subida de datos de los
proyectos de grado de la
presente gestión.

Fuente: Elaboración propia

 77

4.3.1.3.​ Tutor del proyecto

La licenciada Maria Cristina Puente Lara contó con el rol de tutora

académica, lo que significó que estuvo disponible para apoyar a los
estudiantes con la estructura de los informes escritos, la planificación de las
presentaciones finales y la gestión del tiempo en la realización del proyecto.

Tareas específicas:

●​ Orientó a los estudiantes en la redacción del informe final,

asegurándose de que cumplan con las normas de formato, citación y
estructura académica.
●​ Ayudó a los estudiantes a organizar el cronograma del proyecto,
asegurándose de que cada etapa tenga plazos claros y alcanzables.
●​ Revisó los borradores de las presentaciones y dio sugerencias sobre
cómo mejorar la comunicación oral y visual del proyecto.
4.3.1.4.​ Profesor de BTH

El profesor Marcelo Humacayo Sarmiento guió a los estudiantes a lo

largo de todas las fases del proyecto. La función que desempeñó fue la de
ayudar, no solo en la comprensión de los conceptos técnicos y complejos de
la rama de conocimientos respectivos a informática, sino también la de guiar
en el proceso creativo, de investigación y de implementación. Estuvo
disponible para proporcionar asesoramiento continuo y retroalimentación en
diferentes etapas.

De la misma forma, ayudó a los estudiantes a definir los objetivos del proyecto
y a crear un cronograma realista respecto al arte de la programación, con
plazos para cada fase: investigación, diseño, pruebas y presentación final.

También enseñó a los estudiantes cómo aplicar principios de ingeniería y

ciencia para diseñar y construir el prototipo del proyecto, ofreciendo sesiones
prácticas sobre herramientas y tecnologías relacionadas con energías
renovables.

Controló el avance del proyecto gracias a un seguimiento semanal, revisando

los planes de trabajo, evaluando la viabilidad de las ideas y ofreciendo
 78

soluciones o alternativas cuando los estudiantes econtraron dificultades

técnicas.

4.3.2.​ Materiales

Para el desarrollo de este proyecto, es fundamental contar con los recursos

materiales adecuados que permitan su implementación efectiva. Los materiales
detallados en la tabla 22 permiten que el proyecto funcione de manera eficiente y que
los usuarios puedan interactuar con la plataforma sin inconvenientes.

Tabla 22: Materiales necesarios para el repositorio

TIPO DE MATERIAL ESPECIFICACIONES

●​ Computadoras y laptops
●​ Dispositivos móviles
EQUIPOS TECNOLÓGICOS
●​ Dispositivos de respaldo (unidades
externas, servicios en la nube)

●​ Licencias de software de servidor

(Node.js, Express)
●​ Sistema de gestión de bases de
datos (MongoDB)
●​ Software de control de versiones
(Git, GitHub)
SOFTWARE Y LICENCIAS
●​ IDE (Visual Studio Code)
●​ Sistema Operativo (Windows)
●​ Herramienta de diseño gráfico
(Inkscape)
●​ Herramienta de testeo
(ResponsivelyApp)

INFRAESTRUCTURA ●​ Conexión a Internet

Fuente: Elaboración propia

 79

4.3.3.​ Financieros

Los recursos financieros son indispensables para llevar a cabo el proyecto, ya

que permiten cubrir los costos asociados con los materiales, herramientas y servicios
necesarios para su desarrollo. Una gestión adecuada de estos recursos asegura la
viabilidad y continuidad del proyecto, facilitando la consecución de sus objetivos.

4.3.3.1.​ Gastos realizados hasta el momento

Hasta ahora, los gastos han cubierto materiales y servicios esenciales

para iniciar y estructurar el proyecto, sentando una base sólida para su
desarrollo, los pormenores se detallan en la tabla 23.

Tabla 23: Gastos realizados hasta el momento

PRECIO
CANTIDAD DESCRIPCIÓN TOTAL
UNITARIO

Fotocopias de hojas para las

100 0.18 ctv 18 bs
encuestas.

Impresiones de hojas para la

96 0,30 ctv 28 bs
revisión del informe.

Anillado para presentación del

1 4 bs 4 bs
informe.

Flips para presentación del

3 1 bs 3 bs
informe.

PRECIO TOTAL 53 bs

Fuente: Elaboración propia

4.3.3.2.​ Gastos futuros estimados

Se proyectan futuros gastos para completar e implementar el proyecto,

asegurando su funcionamiento y soporte continuo a largo plazo, de la misma
manera los pormenores se detallan en la tabla 24.
 80

Tabla 24: Gastos futuros estimados

PRECIO
CANTIDAD DESCRIPCIÓN TOTAL
UNITARIO

Impresion de hojas del informe

125 0,30 ctv 37 bs
para presentacion final

Fotocopias de la impresión del

2 0,30 ctv 74 bs
informe

PRECIO TOTAL 111 bs

Fuente: Elaboración propia

4.4.​ PRESUPUESTO

POSIBLE INVERSIONES POR EL PROYECTO

Tabla 25: Presupuesto

CANTIDAD DESCRIPCIÓN PRECIO UNITARIO TOTAL

1 Hosting del servidor 1Є 1Є

PRECIO TOTAL VALORADO EN BOLIVIANOS 13 bs

Fuente: Elaboración propia

 81

CAPÍTULO 5.​ METODOLOGÍA

A continuación se detallará la metodología que seguirá el presente proyecto.

5.1.​ ENFOQUE DE LA INVESTIGACIÓN

La investigación tendrá un enfoque mixto, debido a que se utilizará un enfoque

cualitativo a favor de un estudio de las causas del problema que se ha presentado y
cuantitativo por la necesidad que se tiene de trabajar con datos numéricos y estadísticos.

5.2.​ TIPO DE INVESTIGACIÓN

El presente proyecto es una investigación de tipo aplicada debido a que la misma

permite solucionar problemas reales. Además, se apoya en la investigación básica para
conseguirlo. Esta le aporta los conocimientos teóricos necesarios para resolver problemas o
mejorar las condiciones de trabajo.

5.3.​ MÉTODO DE INVESTIGACIÓN

Para el presente proyecto, se empleará el método deductivo asociado generalmente

a la investigación cuantitativa, pues se parte de principios y fundamentos generales de
programación web, para dar con ella a una solución particular dentro del contexto de la
elaboración de proyectos de grado.

5.4.​ TÉCNICAS E INSTRUMENTOS DE RECOLECCIÓN

El presente proyecto ocupará encuestas, entrevistas y referencias bibliográficas como

técnicas e instrumentos de recolección de datos.
 82

CAPÍTULO 6.​ CONCLUSIONES Y RECOMENDACIONES

6.1.​ CONCLUSIONES

Una vez concluido el desarrollo de un repositorio web para la gestión y consulta de

proyectos de titulación de la Unidad Educativa Técnico Humanístico Josefa Manuela
Gandarillas se puede dar las siguientes conclusiones.

●​ Se recalcó la importancia de disponer de antecedentes sólidos para la planificación

del proyecto, fundamentándose en encuestas y entrevistas realizadas a los
estudiantes de la presente gestión y estudiantes graduados de la Unidad Educativa
Técnico Humanístico Josefa Manuela Gandarillas. Los datos proporcionados
permitieron identificar los principales desafíos que enfrentan los estudiantes, tales
como la carencia de tiempo, el desconocimiento en la elaboración de proyectos, la
dificultad para acceder a información de proyectos previos, la carencia de
coordinación y la falta de una base de datos. Se recopiló la recopilación para
comprender mejor las necesidades y expectativas de los usuarios, lo que a su vez
estableció las bases para un diseño que facilite el acceso y la organización de
proyectos de titulación.
●​ Se establecieron los fundamentos para una estructura que garantice la gestión
eficiente de datos de los proyectos en la planificación del back-end. Se determinó el
uso de Node.js y MongoDB para garantizar la escalabilidad y flexibilidad del sistema.
Se elaboraron modelos que representan las entidades clave del proyecto y se
definieron las rutas y los métodos de acceso en función de los roles de los usuarios
(administradores, profesores y visitantes) Este enfoque posibilita una gestión
organizada y segura de los datos, asegurando que solo los usuarios autorizados
puedan llevar a cabo modificaciones significativas, mientras que los visitantes pueden
acceder de manera rápida a la información.
●​ La planificación del frontend se enfocó en la creación de una interfaz intuitiva y
accesible, adaptada a las exigencias de los estudiantes de la unidad educativa. La
estructura modular de componentes y la utilización de rutas claras fueron
considerados para una navegación eficiente y fluida. También se consideró la
accesibilidad y responsividad, de manera que los estudiantes puedan acceder al
repositorio desde diversos dispositivos, de manera que los estudiantes puedan
acceder al repositorio desde diversos dispositivos. La interfaz fue concebida con el
 83

propósito de reflejar la identidad visual de la institución, lo que fortalece la familiaridad

y comodidad de los usuarios al interactuar con la plataforma.
●​ Hasta el momento, los costos implicados cubren los recursos materiales y humanos
necesarios para la planificación y diseño del proyecto. Los gastos futuros se enfocan
principalmente en la adquisición de infraestructura adicional para el mantenimiento y
optimización de la plataforma, tales como servicios de almacenamiento, licencias de
software y herramientas de prueba. Una administración adecuada de estos recursos
financieros posibilitará la sustentación del sistema a largo plazo y asegurar un
servicio confiable y seguro para la comunidad educativa.
●​ En conclusión, el desarrollo del repositorio web destinado a la Unidad Educativa
Técnico Humanístico Josefa Manuela Gandarillas persigue optimizar el acceso,
almacenamiento y organización de los proyectos de titulación. La recopilación de
información brindó una comprensión minuciosa de las necesidades de los
estudiantes, mientras que la planificación del backend y frontend estableció las bases
para una plataforma robusta y accesible. Con una administración adecuada de los
recursos financieros y técnicos, el proyecto no solo facilitará la labor de los
estudiantes en la elaboración de sus proyectos de titulación, sino que también
fomentará una cultura de documentación y consulta que contribuirá al progreso
académico de las futuras generaciones.
6.2.​ RECOMENDACIONES

A continuación, se desarrollan algunas recomendaciones que futuros proyectos

pueden tomar en cuenta:

●​ Una mejora significativa sería la automatización de la subida de archivos, permitiendo

a los estudiantes cargar sus proyectos a través de formularios. Estos formularios
podrían generar archivos JSON automáticamente con la información del proyecto y
combinar estos datos con los archivos PDF en un archivo comprimido, que
posteriormente se entregaría al profesor. Esto reduciría la labor manual y garantizaría
una estructura uniforme en los archivos enviados.
●​ El facilitar la creación de cuentas para estudiantes y profesores, puede mejorar la
interacción en la plataforma. Al permitir el registro directo, los estudiantes podrían
acceder a funcionalidades específicas como la calificación y el seguimiento de
proyectos mediante el registro directo. En el ámbito de los docentes, resultaría
 84

conveniente hallar un método de autenticación menos manual que facilite el proceso

de verificación y optimice la gestión de cuentas, preservando la seguridad.
●​ Incluir una función de comentarios y puntuaciones permitiría a los estudiantes evaluar
y ofrecer retroalimentación sobre los proyectos presentados. Esta funcionalidad
promovería una interacción más activa entre los estudiantes, fomentando una cultura
de aprendizaje y revisión colaborativa que puede mejorar la calidad de los trabajos y
servir como orientación para otros estudiantes.
●​ Proporcionar una opción para incluir datos de contacto de los autores de cada
proyecto, como correo electrónico o redes académicas, facilitaría la comunicación
entre estudiantes y autores de trabajos previos. Esta posibilidad sería especialmente
útil para aquellos interesados en obtener orientación o ampliar su investigación en
áreas relacionadas.
●​ Permitir la creación de categorías adicionales más allá de las ya existentes facilitaría
la organización de proyectos según temas emergentes o necesidades específicas de
cada cohorte. Esta funcionalidad otorgaría mayor flexibilidad a los usuarios y
permitiría una mejor categorización de los trabajos.
●​ Añadir un sistema para asignar jurados a los proyectos agilizaría la gestión de
evaluaciones, permitiendo a los administradores o profesores distribuir los proyectos
de manera eficiente entre los miembros del jurado. Este sistema podría incluir
opciones de selección automática o asignación basada en criterios específicos,
optimizando el proceso de evaluación final.
 1

BIBLIOGRAFÍA

Amazon Web Services. (s. f.). ¿Qué es una base de datos de documentos? - Explicación de

las bases de datos y los almacenes de documentos - AWS. Amazon Web Services,

Inc. Recuperado 19 de octubre de 2024, de

https://aws.amazon.com/es/nosql/document/

Baena Paz, Guillermina. (2017). Metodología de la investigación. Grupo Editorial Patria.

Best of web. (2024). Express Overview, Examples, Pros and Cons in 2024.

https://best-of-web.builder.io/library/expressjs/express

Bryman, A. (2016). Social research methods. Oxford University Press.

Chacon, S., & Straub, B. (2024). Pro Git.

Codementor. (2024). What Is an IDE? Benefits, Functionality, and Examples. Recuperado de

https://www.codementor.io

Elmasri, R., & Navathe, S. B. (2015). Fundamentals of Database Systems (7th ed.).

Express. (2024, octubre 15). Introducing Express v5: A New Era for Node.js Framework.

https://expressjs.com

Filipova, O., & Vilao, R. (2018). Software Development From A to Z. Berlin: Apress.

doi:978-1-4842-3945-2

Flores, J. L. (2019, septiembre 4). Qué es NodeJS y para qué sirve | OpenWebinars.

OpenWebinars.net. https://openwebinars.net/blog/que-es-nodejs/

Fundación Carlos Slim. (2021). Capacítate para el empleo.

https://capacitateparaelempleo.org/

GitHub Docs. (s. f.). Acerca de GitHub y Git—Documentación de GitHub. GitHub Docs.

Recuperado 19 de octubre de 2024, de

https://docs.github.com/es/get-started/start-your-journey/about-github-and-git

HABIL WEB. (s. f.). ¿Qué necesitas? Para iniciar tu PROYECTO WEB.
 2

https://www.webhosting.com.bo/wp-content/uploads/2021/10/PDF-Explicativo.pdf

Haverbeke, M. (2024). Eloquent JavaScript (4.a ed.). No Starch Press.

https://pub-97d2f14809854ff1870055724c829992.r2.dev/book.pdf

Hernández Sampieri, R., Fernández Collado, C., & Baptista Lucio, P. (2010). Metodología de
la investigación (5a ed). McGraw-Hill.

Izquierdo Escribano Antonio. (2012). METODOLOGÍA CUANTITATIVA: ESTRATEGIAS Y

TÉCNICAS DE INVESTIGACIÓN SOCIAL.

javascript.info. (2024, agosto 24). El Tutorial de JavaScript Moderno. https://es.javascript.info/

López Ramírez, V. A. (s. f.). BTH - Bachillerato Técnico Humanístico. RESEÑA HISTÓRICA
DE LA EDUCACIÓN TÉCNICA EN BOLIVIA:
https://sites.google.com/view/bachilleratotecnico/inicio

MDN web docs. (s. f.). Introducción—Referencia de la API Web | MDN. Recuperado 18 de

octubre de 2024, de

https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction

MDN web docs. (2023a, agosto 2). Selectores CSS - Aprende desarrollo web | MDN.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors

MDN web docs. (2023b, agosto 3). Introducción—JavaScript | MDN.

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Introduction

MDN web docs. (2023c, agosto 8). Acerca de JavaScript | MDN.

https://developer.mozilla.org/es/docs/conflicting/Web/JavaScript

MDN web docs. (2024a, junio 6). CSS | MDN. https://developer.mozilla.org/es/docs/Web/CSS

MDN web docs. (2024b, julio 28). HTML: Lenguaje de etiquetas de hipertexto | MDN.

https://developer.mozilla.org/es/docs/Web/HTML

MDN web docs. (2024c, julio 28). JavaScript orientado a objetos para principiantes | MDN.

https://developer.mozilla.org/es/docs/conflicting/Learn/JavaScript/Objects/Classes_in_

JavaScript

MDN web docs. (2024d, julio 28). Prototipos de objetos—Aprende desarrollo web | MDN.
 3

https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes

MDN web docs. (2024e, julio 30). Usando animaciones CSS - CSS | MDN.

https://developer.mozilla.org/es/docs/Web/CSS/CSS_animations/Using_CSS_animati

ons

Ministerio de Educación de Bolivia. (2018). Ministro de Educación destaca crecimiento de

Bachillerato Técnico Humanístico en el país. Módulos, núcleos y talleres garantizan

Bachillerato Técnico Humanístico. Avanzamos (No. 56), pág 3:

https://www.minedu.gob.bo/files/publicaciones/unicom/Avanzamos/2018/Avanzamos-

56a1.pdf

Ministerio de Educación. (2022). CONTENIDOS DEL SEXTO AÑO DE ESCOLARIDAD.

Planes y Programas del Bachillerato Técnico Humanístico - BTH, pág 104:
https://red.minedu.gob.bo/repositorio/fuente/6076.pdf

Nivardo. (2023, enero 22). CSS Position Cómo usar en CSS. Oregoom.com.

https://oregoom.com/css/position/

Oracle. (2020, noviembre 24). ¿Qué es una base de datos?

https://www.oracle.com/cl/database/what-is-database/

Oregoom. (s. f.). CSS Display Cómo usar en CSS. Recuperado 19 de octubre de 2024, de

https://oregoom.com/css/display

Oregoom. (s. f.). ¿Que es CSS? Tutorial de CSS . Oregoom.com. Recuperado 19 de

octubre de 2024, de https://oregoom.com/css/

Pearson Wieruch, R. (2019). The Road to React. Leanpub.

Presta, M. (20 de Febrero de 2017). Back4App. Obtenido de

https://blog.back4app.com/es/los-diez-mejores-lenguajes-de-backend/#Tipos_de_leng

uajes_de_programacion

Robbins, J. N. (2012). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript,

and Web Graphics. O'Reilly Media.

 4

Ruiz, D. (2020a, abril 18). 🏷 Etiquetas HTML | CodingTube. CodingTube.

https://codingtube.dev/docs/html/etiquetas-html/

Ruiz, D. (2020b, agosto 22). Modelo de caja en CSS | CodingTube. CodingTube.

https://codingtube.dev/docs/css/modelo-de-caja-en-css/

Serna Group. (2021). HTML | Historia | Para qué sirve | Características—Serna Group.

https://sernagrp.com/blog/html/

Stack Overflow. (2024). Text Editors vs IDEs. Recuperado de https://stackoverflow.com

Visual Studio Code. (s. f.). Visual Studio Code—Code Editing. Redefined. Recuperado 20 de

octubre de 2024, de https://code.visualstudio.com/

 5

ANEXOS

ANEXO A: Encuesta a la promoción de la Unidad Educativa Técnico Humanístico

Josefa Manuela Gandarillas

Fecha de encuesta: 18/9/2024​ ​ N° total de encuestados: 67 estudiantes de 90

N° de encuestados por paralelo: A: 16/21, B:18/24, C:17/24, D: 16/21

1.​ ¿Cuánto tiempo le tomó encontrar un tema para su proyecto?

a.​ 1 a 7 días​ ​ ​ ​ ​ ​ ​ 46,27%
b.​ 1 a 4 semanas​ ​ ​ ​ ​ ​ 34,33%
c.​ 1 a 6 meses​ ​ ​ ​ ​ ​ ​ 11,94%
d.​ Más​ ​ ​ ​ ​ ​ ​ ​ 7,46%
 6

2.​ ¿Qué lugares de consulta ha usado para la recopilación de información de su

proyecto? (Puede seleccionar más de una opción)
a.​ Google​​ ​ ​ ​ ​ ​ ​ 37
b.​ Libros​ ​ ​ ​ ​ ​ ​ ​ 15
c.​ Inteligencia artificial​ ​ ​ ​ ​ ​ 27
d.​ Profesores/Tutores​ ​ ​ ​ ​ ​ 32
e.​ Familiares​ ​ ​ ​ ​ ​ ​ 11
f.​ Otros​ ​ ​ ​ ​ ​ ​ ​ 12
 7

3.​ ¿Con qué grado de dificultad calificaría la recopilación de información sobre el

tema de su proyecto?
a.​ Difícil​ ​ ​ ​ ​ ​ ​ ​ 43,28%
b.​ Moderadamente difícil​ ​ ​ ​ ​ 43,28%
c.​ Fácil​ ​ ​ ​ ​ ​ ​ ​ 8,96%
d.​ Muy fácil​ ​ ​ ​ ​ ​ ​ 4,48%
 8

4.​ ¿Con qué grado de dificultad calificaría la recopilación de información sobre la

elaboración del documento de su proyecto?
a.​ Difícil​ ​ ​ ​ ​ ​ ​ ​ 40,30%
b.​ Moderadamente difícil​ ​ ​ ​ ​ 52,24%
c.​ Fácil​ ​ ​ ​ ​ ​ ​ ​ 5,97%
d.​ Muy fácil​ ​ ​ ​ ​ ​ ​ 1,49%
 9

5.​ ¿Cuánto tiempo lleva desarrollando su proyecto?

a.​ 1 a 2 meses​ ​ ​ ​ ​ ​ ​ 41,79%
b.​ 2 a 4 meses​ ​ ​ ​ ​ ​ ​ 37,31%
c.​ 4 a 6 meses​ ​ ​ ​ ​ ​ ​ 16,42%
d.​ Más​ ​ ​ ​ ​ ​ ​ ​ 4,48%
 10

6.​ ¿Se inspiró en un proyecto preexistente para la elaboración del suyo?, y si es

así, ¿en qué proyectos lo hizo? (Puede seleccionar más de una opción)
a.​ Proyectos universitarios​ ​ ​ ​ ​ 10
b.​ Proyectos propios del colegio​​ ​ ​ ​ 28
c.​ Proyectos de otros colegios​ ​ ​ ​ ​ 2
d.​ Ninguno​ ​ ​ ​ ​ ​ ​ 31
 11

7.​ ¿Tuvo acceso a algún proyecto de gestiones anteriores de la Unidad Educativa

Técnico Humanístico Josefa Manuela Gandarillas?
a.​ Si​ ​ ​ ​ ​ ​ ​ ​ 56,72%
b.​ No​ ​ ​ ​ ​ ​ ​ ​ 43,28%
 12

8.​ ¿Qué dificultades presentó en la elaboración de su proyecto? (Puede

seleccionar más de una opción)
a.​ Comunicación​​ ​ ​ ​ ​ ​ 13
b.​ Tiempo​ ​ ​ ​ ​ ​ ​ 47
c.​ Recursos​ ​ ​ ​ ​ ​ ​ 16
d.​ Asesoría​ ​ ​ ​ ​ ​ ​ 22
e.​ Conocimiento​ ​ ​ ​ ​ ​ ​ 24
f.​ Ninguno​ ​ ​ ​ ​ ​ ​ 4
 13

ANEXO B: Encuesta a la pre-promoción de la Unidad Educativa Técnico

Humanístico Josefa Manuela Gandarillas
Fecha de encuesta: 18/9/2024​ ​ N° total de encuestados: 69 estudiantes de 107

N° de encuestados por paralelo: A: 17/27, B:17/27, C:21/28, D: 14/25

1.​ ¿Tiene noción de cómo realizar un proyecto y su debida documentación?

a.​ Si​ ​ ​ ​ ​ ​ ​ ​ 27,54%
b.​ No​ ​ ​ ​ ​ ​ ​ ​ 72,46%
 14

2.​ ¿Tiene una idea de qué tema se basará su proyecto?

a.​ Si​ ​ ​ ​ ​ ​ ​ ​ 34,78%
b.​ No​ ​ ​ ​ ​ ​ ​ ​ 65,22%
 15

3.​ ¿Qué tipo de apoyo tiene para la realización de su proyecto? (Puede

seleccionar más de una opción)
a.​ Familiar​ ​ ​ ​ ​ ​ ​ 29
b.​ Amigos​ ​ ​ ​ ​ ​ ​ 22
c.​ Institucional​ ​ ​ ​ ​ ​ ​ 7
d.​ Profesional​ ​ ​ ​ ​ ​ ​ 5
e.​ Profesores​ ​ ​ ​ ​ ​ ​ 12
f.​ Ninguno​ ​ ​ ​ ​ ​ ​ 19
 16

4.​ ¿Qué tipo de guía tiene para la realización de su proyecto? (Puede seleccionar
más de una opción)
a.​ Información de Google​ ​ ​ ​ ​ 24
b.​ Inteligencia artificial​ ​ ​ ​ ​ ​ 21
c.​ Libros​ ​ ​ ​ ​ ​ ​ ​ 16
d.​ Proyectos anteriores​ ​ ​ ​ ​ ​ 14
e.​ Consulta a profesores​​ ​ ​ ​ ​ 13
f.​ Ninguno​ ​ ​ ​ ​ ​ ​ 16
 17

5.​ ¿En qué disciplina se ajusta su proyecto?(Puede seleccionar más de una

opción)
a.​ Informática​ ​ ​ ​ ​ ​ ​ 16
b.​ Robótica​ ​ ​ ​ ​ ​ ​ 12
c.​ IoT (Internet de las cosas)​ ​ ​ ​ ​ 3
d.​ Administración de empresas​ ​ ​ ​ ​ 3
e.​ Entretenimiento​ ​ ​ ​ ​ ​ 10
f.​ Página web​ ​ ​ ​ ​ ​ ​ 15
g.​ No tengo idea​​ ​ ​ ​ ​ ​ 25
 18

6.​ ¿A quién beneficiará su proyecto? (Puede seleccionar más de una opción)

a.​ Al colegio​ ​ ​ ​ ​ ​ ​ 13
b.​ A otra institución​ ​ ​ ​ ​ ​ 5
c.​ A sí mismo​ ​ ​ ​ ​ ​ ​ 18
d.​ A su familia​ ​ ​ ​ ​ ​ ​ 6
e.​ A un negocio​ ​ ​ ​ ​ ​ ​ 11
f.​ No tengo idea​​ ​ ​ ​ ​ ​ 27
 19

7.​ ¿Su proyecto se basa en otro proyecto?

a.​ Si​ ​ ​ ​ ​ ​ ​ ​ 37,68%
b.​ No​ ​ ​ ​ ​ ​ ​ ​ 62,32%
 20

ANEXO C: Entrevista a la ex-estudiante Velásquez Espíndola Cleisabeth Rashely

Fecha de la entrevista: 11/9/2024

1.​ ¿Cuánto tiempo le tomó para tener el tema de su proyecto?

Me tomó unas dos semanas para tener el tema de mi proyecto.

2.​ ¿Cómo dió con el tema de su proyecto?

Me guié por el área económica, porque nuestros profesores nos dijeron que
debe de generar una utilidad a la par que debe cubrir un coste; en ese entonces el
área que más necesitaba remodelar y mejorar era el de las discotecas.

3.​ ¿Cuánto tiempo le tomó la elaboración del informe?

Me tomó unos seis meses la elaboración de mi informe, tiempo que se fue por
las revisiones y problemas de comunicación que se tuvo con mi asesor y compañeros
de grupo.

4.​ ¿Qué dificultades atravesó para la elaboración del documento?

Las principales fueron problemas de coordinación y comunicación entre mis
compañeros y mi asesor, tuvimos unas tres revisiones en todo el año, en las cuales
se ausentó mi tutor. También tuvimos problemas con la parte del marco teórico y lo
extenso de la misma.

5.​ ¿Tuvo alguna guía para la elaboración del informe y del proyecto?
Nos dieron desde el principio una estructura que debíamos respetar, pero
sobre todo, nos ayudó el internet para guiarnos en cómo hacer nuestro proyecto, al
haber muchos proyectos en ella.

6.​ ¿Cuánto tiempo le tomó la elaboración de la totalidad del proyecto?

Unos siete meses, se tuvo dificultades en la parte de programación, a pesar
de que es sencilla la programación de arduino, había ocasiones en las que solamente
funcionaba una cara de LEDs y otros problemas más, por lo que fue un constante
prueba y error.