Tesina

UNIVERSIDAD POLITÉCNICA DE
TEXCOCO
INGENIERÍA EN SISTEMAS COMPUTACIONALES
DESARROLLO DE UN
SISTEMA WEB PARA LA
GESTIÓN DE CARTAS DE
ESTANCIAS Y ESTADÍAS
GRUPO: 10MSC1
PRESENTAN:
KEVIN ESCALONA BUENDÍA
GUSTAVO HAVID MÉNDEZ MACIEL
SAMUEL PALMA VÁZQUEZ
ASESORES:
DR. DERLIS HERNÁNDEZ LARA
2024
Agradecimientos
Quiero expresar mi más sincero agradecimiento a todas las personas que han hecho posible
la realización de este proyecto. En primer lugar, agradezco profundamente al personal
administrativo y docente de la Universidad Politécnica de Texcoco por su colaboración y
apoyo durante todo el proceso. Su participación activa y su retroalimentación fueron
fundamentales para el éxito de este proyecto.
También quiero expresar mi gratitud a mis compañeros de equipo y colaboradores por su
incansable trabajo en el desarrollo e implementación del sistema. Su dedicación,
profesionalismo y habilidades técnicas han sido esenciales para superar los desafíos y
alcanzar nuestros objetivos.
Además, quiero reconocer el invaluable aporte de nuestros usuarios y encuestados, cuyas
opiniones, sugerencias y comentarios fueron cruciales para comprender sus necesidades y
diseñar un sistema que realmente agregue valor y mejore su experiencia.
Finalmente, pero no menos importante, quiero expresar mi profunda gratitud a mis amigos,
familiares y seres queridos por su incondicional apoyo y comprensión a lo largo de mi
carrera universitaria. Su aliento y optimismo fueron esenciales en los momentos difíciles y
una fuente constante de motivación.
Méndez Gustavo, 2024.
Resumen
La presente investigación «Desarrollo de un sistema web para la gestión de cartas de estancias y
estadías» fue realizada en la Universidad Politécnica de Texcoco, esta investigación buscó
solucionar el problema de generar cartas manualmente para los estudiantes que participan en
programas de estancias y estadías. La complejidad y la carga administrativa asociada con este
proceso manual impulsaron la creación de un Sistema web que no solo automatiza la creación de
cartas, reduciendo tiempos, sino que también optimiza la gestión de los datos individuales de cada
estudiante.
El sistema desarrollado no solo proporciona una solución eficiente para la creación de cartas, sino
que también ofrece la capacidad de visualizar estadísticas específicas relacionadas con diferentes
tipos de estancias o estadías. Además, se implementó la posibilidad de establecer periodos
específicos para llevar a cabo el trámite, brindando una mayor flexibilidad y organización al
proceso.
El proyecto aborda de manera integral la problemática inicial al agilizar los procedimientos, aliviar
la carga administrativa y mejorar la experiencia tanto para los responsables de la generación de
cartas como para los alumnos involucrados. Los resultados obtenidos reflejan una optimización
significativa en términos de eficiencia y gestión de información, proporcionando una solución
práctica y moderna para la problemática planteada.
Abstrac
The present research "Development of a web system for the management of letters of stays and
stays" was carried out at the Polytechnic University of Texcoco, this research sought to solve the
problem of generating letters manually for students who participate in stays and stays programs. The
complexity and administrative burden associated with this manual process prompted the creation of
a web system that not only automates the creation of letters, reducing time, but also optimizes the
management of each student's individual data.
The developed system not only provides an efficient solution for creating charts, but also offers the
ability to view specific statistics related to different types of stays or stays. In addition, the
possibility of establishing specific periods to carry out the procedure was implemented, providing
greater flexibility and organization to the process.
The project comprehensively addresses the initial problem by streamlining procedures, easing the
administrative burden and improving the experience for both those responsible for generating letters
and the students involved. The results obtained reflect a significant optimization in terms of
efficiency and information management, providing a practical and modern solution for the problem
raised.
Índice General
1 Introducción 2
1.1 Objetivo general 2
1.2 Objetivos particulares 2
1.3 Justificación 3
1.4 Estado del Arte 4
1.4.1 Tabla comparativa de tesis 7
1.6 Efectos y Consecuencias de la Problemática 10
1.7 Necesidad de Intervención 10
1.8 Organización del documento 10
2. Marco teórico 13
2.1 ¿Qué es un Sistema web? 13
2.1.1 Elementos de estructura de un sistema web 13
2.2 Navegador Web 14
2.2.1 Tipos de navegadores web 15
2.3 ¿Qué es una base de datos? 16
2.4 HTML 16
2.4.1 Tipos de etiquetas 16
2.5 CSS 17
2.6 JavaScript 18
2.7 Chart.js 18
2.8 XAMPP 18
2.8.1 Apache 20
2.8.2 MySQL 20
2.8.3 PHP 20
2.10 Internet 21
2.11 Intranet 21
2.12 Diagrama entidad relación (DER) 22
2.13 Maquetado web 23
2.14 Diagramas de flujo 24
2.15 Metodologías 26
2.15.1 Metodología Cascada 26
2.16 Modelo vista controlador (MVC) 27
2.17 Sumario 28
3. Diseño Conceptual 30
3.1 Metodología Cascada 30
3.2 Estructura general del sistema 31
3.2.1 Estructura del sistema (Funcionamiento para Administradores) 32
3.2.2 Estructura del sistema (Funcionamiento para Profesores) 32
3.2.3 Estructura del sistema (Funcionamiento para Alumnos) 33
3.3 Diagrama de flujo del funcionamiento para administradores 34
3.3 Diagrama de flujo del funcionamiento para alumnos 35
3.4 Diagrama de flujo del funcionamiento para profesores 36
3.5 Maquetado de la página Index 37
3.5 Maquetado de la página Inicio de sesión (Login) 38
3.6 Maquetado de la página Formulario (Alumno) 38
3.7 Maquetado de la página Administrador 39
3.8 Diagrama entidad relación 40
3.10 Esquema de la Base de Datos 42
3.11Diagrama de bloques funcional 42
3.12 Sumario 43
4. Diseño a detalle 45
4.1 Aplicación de Metodología 45
4.2 Diseño de la base de datos 45
4.2.1 Diccionario de datos 48
4.3 Arquitectura del sistema 51
4.3.1 Acceso al sistema 52
4.3.2 Formulario del alumno 54
4.3.3 Inicio del Administrador 55
4.4 Sumario 59
5 Implementación 61
5.1 Metodología 61
5.2 Diseño de la arquitectura 62
5.2.2 Tecnologías utilizadas 62
5.2.3 Patrones de diseño 63
5.2.4 Escalabilidad y rendimiento 63
5.2.5 Seguridad 63
5.3 Integración y pruebas 64
5.4 Despliegue 65
6 Conclusiones 68
6.1 Lecciones aprendidas 68
6.2 Impacto y beneficios 68
6.3 Trabajos futuros 70
Referencias 71
Tesis 71
Internet 71
Anexos 73
1.1 Encuesta 73
1.1.2 Resultados de la Encuesta 75
1.2 Funciones JavaScript y PHP 77
1.2.1 Función en PHP para evitar redireccionamiento entre páginas (cookie) 78
1.2.2 Función de ofuscación en JavaScript 78
1.2.3 Función en JavaScript para validar entrada a caracteres 79
Índice de Figuras
Figura 2.1 Estructura de un sistema web 14
Figura 2.2 Navegadores web 15
Figura 2.3 Manejadores de bases de datos 16
Figura 2.4 Tipos de etiquetas 17
Figura 2.5 Interfaz de XAMPP 19
Figura 2.6 El internet 21
Figura 2.7 La intranet 22
Figura 2.8 Anotaciones DER 23
Figura 2.9 Maquetado de un Sistema web. 24
Figura 2.10 Simbología de diagramas de flujo. 25
Figura 2.11 Metodología Cascada. 27
Figura 2.12 Modelo Vista Controlador 28
Figura 3.1 Metodología aplicada. 30
Figura 3.2 Diagrama de estructura del sistema 31
Figura 3.3 Diagrama de estructura del sistema (Administradores) 32
Figura 3.4 Diagrama de estructura del sistema (Profesores) 33
Figura 3.5 Diagrama de estructura del sistema (Alumnos) 33
Figura 3.6 Diagrama de flujo del funcionamiento para administradores 34
Figura 3.7 Diagrama de flujo del funcionamiento para alumnos 35
Figura 3.8 Diagrama de flujo del funcionamiento para profesores 36
Figura 3.9 Maquetado de la página Index 37
Figura 3.10 Maquetado de la página Inicio de sesión (Login) 38
Figura 3.11 Maquetado de la página Formulario (alumno) 39
Figura 3.12 Maquetado de la página Administrador 40
Figura 3.13 Diagrama entidad relación 41
Figura 3.14 Esquema de la Base de Datos 42
Figura 3.15 Diagrama de bloques 43
Figura 4.1 Diseño de la base de datos 47
Figura 4.2 Diseño final página Index 52
Figura 4.3 Diseño final página Login (Administradores) 52
Figura 4.4 Diseño final página Login (Alumnos) 53
Figura 4.5 Diseño final página Registro (Alumnos) 53
Figura 4.6 Diseño final página Formulario 54
Figura 4.7 Diseño final página Inicio del Administrador 56
Figura 4.8 Página Perfil 57
Figura 4.9 Página Cartas 57
Figura 4.10 Página Periodos 58
Figura 4.11 Página Gráficos 58
Figura 4.12 Página Administradores 59
Figura 5.1 Estructura del proyecto 62
Figura 5.2 Alerta al usuario 63
Figura 6.2 Resultados obtenidos 74
Figura 6.3 Resultados experiencia 74
Figura 6.4 Resultados errores 75
Figura 6.5 Resultados opinión 75
Figura 6.6 Resultados tiempo 76
Figura 6.7 Encuesta 76
Figura 7.1 Función cookie 77
Figura 7.1 Función de ofucasión 78
Figura 7.3 Función validar entrada 79
Índice de Tablas
Tabla 1.1 Tabla comparativa. 7
Tabla 4.1 Diccionario de Datos LoginAdmin. 48
Tabla 4.2 Diccionario de Datos LoginAlumno. 48
Tabla 4.3 Diccionario de Datos LoginProfe. 49
Tabla 4.4 Diccionario de Datos Periodos. 49
Tabla 4.5 Diccionario de Datos Asignatura. 50
Tabla 4.6 Diccionario de Datos Historial. 51
1
INTRODUCCIÓN
Este capítulo se centra en la

problemática principal del proyecto,
se abordarán los desafíos que este
proceso conlleva, destacando la
necesidad de una solución eficiente,
a través de la implementación de un
Sistema web.
1
Introducción
1 Introducción
El capítulo actual se centra en el núcleo del proyecto, examinando minuciosamente las razones
detrás de su necesidad y ejecución. Se examinan los obstáculos y deficiencias en el proceso
administrativo de generación manual de cartas de para las asignaturas de estancias y estadías en la
Universidad Politécnica de Texcoco.
A través de un análisis exhaustivo de la situación, se establecerán las bases para la presentación de
la propuesta de solución y se proporcionará una justificación sólida para la implementación de un
Sistema web que permita automatizar y agilizar este proceso. Esto se basa en los hallazgos de un
cuestionario (Anexo 1.1) utilizado que revela las opiniones y experiencias de los usuarios que
participaron en el proceso de creación de cartas.
1.1 Objetivo general
Desarrollar un Sistema web dirigido a administrativos, docentes y estudiantes de la Universidad

Politécnica de Texcoco con el fin de gestionar y automatizar las cartas para el proceso de estancias y
estadías, mediante el uso de frameworks informáticos.
1.2 Objetivos particulares
• Diseñar una interfaz de usuario intuitiva y fácil de usar.

• Desarrollar un sistema de autenticación para el sistema.
• Configurar un panel de administración para el sistema.
• Validar el sistema mediante su implementación en la nube.
2
Introducción
1.3 Justificación
En la actualidad, la generación manual de cartas constituye un proceso laborioso y propenso a

errores. La complejidad de recopilar información individual de cada estudiante, diseñar y redactar
cartas personalizadas, y gestionar los plazos asociados, ha demostrado ser un obstáculo significativo,
ya que como se han visto en las gráficas en la Figura 6.6 del Anexo 1.3.1 se puede observar que el
tiempo promedio en que el alumno recibe su carta es de 4 a 7 días. Este proceso manual no solo
consume recursos humanos valiosos, sino que también da lugar a demoras y errores potenciales,
afectando negativamente tanto a los estudiantes como al personal administrativo.
El aumento en el número de estudiantes que participan ha aumentado las limitaciones del sistema
manual existente, lo que hace que sea necesario implementar una herramienta tecnológica que
agilice y optimice estos procesos.
Además, los resultados de las encuestas realizadas, que se encuentra en el Anexo 1.3.1 demuestra
que es necesario desarrollar un sistema web que automatiza el proceso de creación de cartas. Como
se muestra en la Figura 6.5 los altos porcentajes de acuerdo entre los encuestados respaldan la idea
de que esta solución tecnológica mejoraría la eficiencia y la experiencia general de los usuarios.
La justificación se sustenta también en la mejora sustancial que aportará a la experiencia de los
usuarios involucrados. La implementación de un Sistema web no solo reducirá los tiempos de espera
para la obtención de cartas de presentación, sino que también simplificará el proceso para el
personal administrativo encargado de su generación. Esto se traducirá en una mayor eficiencia
operativa, liberando recursos para tareas más estratégicas y, al mismo tiempo, mejorando la
satisfacción general de los estudiantes.
Desde el punto de vista teórico y metodológico, este proyecto aportará al campo de la gestión de
documentos y procesos administrativos en entornos educativos. La implementación de un sistema
web basado en frameworks y tecnologías web modernas no solo constituye una solución práctica,
sino que también establece un modelo que puede replicarse y adaptarse en otras instituciones
educativas con necesidades similares.
La necesidad inminente de mejorar la eficiencia y agilidad en los procesos administrativos asociados
a las cartas de las asignaturas de estancias y estadías en la Universidad Politécnica de Texcoco.
Basado en evidencia estadística y en la mejora sustancial que proporcionará a la experiencia de los
usuarios, este proyecto se posiciona como una solución estratégica para abordar los desafíos actuales
y anticiparse a las demandas futuras de la comunidad estudiantil y administrativa.
3
Introducción
1.4 Estado del Arte
A continuación, se presentan las diferentes investigaciones desde el campo Nacional e Internacional

enfocadas en examinar los sistemas web utilizados para la expedición de cartas en el marco de
procesos de estancia y estadía profesional. Este análisis tiene como meta proporcionar una visión
completa de las prácticas existentes, los desafíos que se enfrentan y las oportunidades de mejora en
este ámbito académico.
(BLANCO, 2023) Propuesta para la implementación de un sistema de gestión documental en

la Asada la Argentina del Cantón de Guácimo, San José, Costa Rica
La ASADA La Argentina, situada en el cantón de Guácimo en Limón, Costa Rica, se enfrenta a la
necesidad de optimizar sus procesos para proporcionar un servicio de calidad a sus usuarios. Se han
identificado demoras en el procesamiento de trámites, dificultades en el acceso rápido a la
información y una alta dependencia de documentos físicos, lo que repercute en la eficiencia
operativa de la institución. Ante estos desafíos, surge la iniciativa de desarrollar una propuesta para
la implementación de un Sistema de Gestión Documental. El objetivo principal de este proyecto es
modernizar y optimizar los procesos administrativos, mediante un sistema web, alojado en un
servidor local, agilizando la atención de trámites y mejorando la accesibilidad a la información
pertinente. La implementación de esta solución tecnológica busca potenciar la eficiencia y la calidad
en los servicios administrativos ofrecidos por la ASADA La Argentina.
(FERNÁNDEZ, 2022) Desarrollo de una aplicación web para la gestión de tramite

documentario de la Universidad Agraria la Molina. Universidad Ignacio de Loyola. Lima,
Perú
En la Universidad Nacional Agraria la Molina se identificaron desafíos considerables en la gestión
de expedientes, particularmente en áreas como la Oficina de Secretaría General, Oficina de
Proyección Social y Facultad de Pesquería. Se observaron demoras en el procesamiento de trámites,
dificultades en el acceso rápido a la información y una alta dependencia de documentos físicos, lo
que afectaba la eficiencia operativa de la institución. Ante los desafíos identificados en la gestión de
expedientes en dicha universidad se hizo evidente la necesidad de adoptar una solución tecnológica
que pudiera abordar eficazmente estos problemas. Surgió así la iniciativa de desarrollar una
aplicación web especializada en la gestión de trámites documentarios. La meta principal de este
proyecto era la modernización y optimización de los procesos administrativos, con el propósito de
4
Introducción
agilizar la atención de trámites y mejorar la accesibilidad a la información pertinente. La

implementación de esta solución tecnológica tenía como objetivo potenciar la eficiencia y la calidad
en los servicios administrativos ofrecidos por la institución.
(CORREA, MELGAREJO, 2022) Desarrollo e implementación de una aplicación web para

optimizar el proceso de tramite documentario de la municipalidad distrital de Santa María del
Valle. Huánuco, Perú
El estudio abordó los desafíos enfrentados en la gestión de trámites documentarios en la
Municipalidad Distrital de Santa María del Valle. Se detectaron retrasos en los procesos, dificultades
en el acceso a la información y una fuerte dependencia de documentos físicos, lo que comprometía
la eficiencia operativa de la entidad. Frente a esta situación, se reconoció la necesidad de
implementar una solución tecnológica que abordara estos desafíos de manera efectiva. La iniciativa
se enfocó en desarrollar una aplicación web especializada en la gestión de trámites documentarios,
con el objetivo central de modernizar y optimizar los procesos administrativos. Se buscaba agilizar
la atención de trámites y mejorar el acceso a la información relevante para los usuarios. La
implementación de esta solución tecnológica tenía como meta potenciar la eficiencia y la calidad en
los servicios administrativos ofrecidos por la Municipalidad Distrital de Santa María del Valle.
(RAMÍREZ, 2019) Desarrollo de un sistema web de gestión documentaria en la Municipalidad

Provincial de Pachitea, Huánuco, Perú
La Municipalidad Provincial de Pachitea se ve desafiada por una gestión documentaria que presenta
demoras y complicaciones derivadas de un proceso predominantemente manual, lo que incide
negativamente en su eficiencia operativa y en la percepción de los usuarios. Esta situación ha
generado una serie de inconvenientes tanto para la institución como para quienes requieren sus
servicios, manifestándose en una atención lenta y poco efectiva de los trámites. Ante esta
problemática, surge la necesidad de implementar una solución tecnológica que permita modernizar y
optimizar los procesos de gestión documentaria. Es así como se plantea el desarrollo de un Sistema
de Trámite Documentario Web, el cual, mediante herramientas digitales y automatizadas, busca
agilizar la recepción, registro, seguimiento y resolución de los documentos que ingresan a la
Municipalidad. Este sistema no solo facilitará la administración eficiente de los expedientes, sino
que también mejorará la experiencia de los usuarios al garantizar una atención más rápida y efectiva,
contribuyendo así a fortalecer la relación entre la institución y la comunidad que atiende.
5
Introducción
(XOOL, BUENFIL, DZUL, 2018) Desarrollo e Implementación de un sistema web para el

proceso de estadía, Universidad Tecnológica del Mayab, Yucatán, México
El proyecto surgió de la necesidad de automatizar el proceso de las estadías profesionales para
mejorar la administración de la información relacionada con este proceso. Este sistema web está
permitiendo la automatización del manejo y la captura de la información utilizada en el proceso de
las estadías profesionales.
La implementación de este sistema de administración web aplicado al proceso de estadías
profesionales está beneficiando a todos los involucrados en las actividades que conforman el
proceso. Este sistema está permitiendo eficientizar el desarrollo del proceso, reducir tiempos,
mejorar la gestión de la información (en términos de rapidez funcional y operativa), mejorar los
procesos y el análisis de datos, así como reducir los costos en la impresión de documentos. Es un
proyecto que está optimizando y mejorando la eficiencia del proceso de estadías profesionales.
(MENDOZA, 2017) Implementación de sistema web para la gestión y control de los procesos
de la unidad de titulación de la carrera de Ingeniería en sistemas de la Universidad Salesiana.
Universidad Politécnica Salesiana Sede Guayaquil, Guayaquil, Ecuador
La Universidad Politécnica Salesiana se está adaptando a un nuevo proceso de titulación propuesto
por el Consejo de Educación Superior (CES). Este cambio ha llevado a la universidad a plantear una
nueva estrategia para controlar y seguir a los estudiantes durante el proceso de titulación.
Para resolver estos problemas, se desarrolló un sistema de información que permitió una mejor
gestión del proceso de titulación. Este sistema web permitió la automatización del manejo y la
captura de la información utilizada en el proceso de las estadías profesionales, beneficiando a todos
los involucrados en las actividades que conforman el proceso.
Este sistema no solo permitió eficientar el desarrollo del proceso y reducir tiempos, sino que
también mejoró la gestión de la información, los procesos y el análisis de datos, así como redujo los
costos en la impresión de documentos. Al centrarse en el ahorro y la disponibilidad, este sistema se
convirtió en un aliado estratégico para las instituciones de educación superior. Es un proyecto que
optimizó y mejoró la eficiencia del proceso de estadías profesionales.
6
Introducción
(GALÁN, 2017) Sistema de gestión vía web para servicio social. Universidad Nacional
Autónoma de México. Ciudad de México, México
En la Jefatura de Servicio Social de la Facultad de Psicología, se ha experimentado una evolución en
la gestión de datos de los alumnos prestadores de servicio social. Inicialmente, se empleaba un
formato físico que con el tiempo resultó insuficiente debido al crecimiento constante de expedientes.
Como solución temporal, se implementó un archivo Excel en Google Drive compartido con el
personal, pero su complejidad para consultas específicas motivó el desarrollo de un sistema web.
Este sistema, concebido en base a las necesidades expresadas por el jefe de la Jefatura y enriquecido
por la retroalimentación del personal, busca agilizar el registro y control de alumnos, instituciones y
programas de servicio social. Su interfaz intuitiva permite consultas instantáneas, reduciendo el
tiempo de captura de datos y proporcionando acceso desde cualquier dispositivo con conexión a
internet, mejorando significativamente la gestión integral del servicio social en la Facultad de
Psicología.
1.4.1 Tabla comparativa de tesis
Tabla 1.1 Tabla comparativa.

(Elaboración propia, 2024)
Nombre del Proyecto Características Principales Ventajas Desventajas
Propuesta para la Modernizar y optimizar los - Mejora en la - Es necesario
implementación de un procesos administrativos accesibilidad a la depender del servidor
sistema de gestión de la ASADA mediante un información. local.
documental en la sistema web alojado en un - Optimización de - Posible resistencia
ASADA servidor local. la eficiencia del personal al
operativa cambio.
Desarrollo de una Utilizar una aplicación web - La simplificación - Posible resistencia
aplicación web para la especializada en la gestión de procesos al cambio por parte
gestión de trámite de trámites documentarios administrativos. del personal.
documentario de la para modernizar y - De fácil acceso - Dependencia de
UAM. optimizar los procesos - Disminuir el uso conexión a internet.
administrativos. de papel.
Desarrollo e Implementar un sistema - La simplificación - Posible resistencia
7
Introducción
implementación de web especializado en la de procesos del personal al

una aplicación web gestión de trámites administrativos. cambio.
para optimizar el documentarios para - Es fácil acceder a - Requiere una
proceso de trámite actualizar y optimizar los través de cualquier conexión a Internet.
documentario de la procesos administrativos. dispositivo con - Problemas de
Municipalidad conexión a Vulnerabilidad
Distrital de Santa Internet.
María del Valle - Disminuir el uso
de papel.
Desarrollo de un Utilizar un Sistema de - Agilización de - Posible resistencia
sistema web de Trámite Documentario trámites. al cambio por parte
gestión documentaria Web para modernizar y - Facilidad de del personal.
en la Municipalidad optimizar los procesos de acceso a través de - Dependencia de
Provincial de Pachitea gestión documentaria de la dispositivos con conexión a internet.
MPP. conexión a internet. - Poca escalabilidad.
- Mejora en la
seguridad y
confidencialidad de
la información.
Desarrollo e Automatización del - Eficiencia en el - Dependencia de
Implementación de un manejo y la captura de la proceso de acceso a internet.
sistema web para el información utilizada en el estadías. - Poca escalabilidad.
proceso de estadía en proceso de estadías - Reducción de - Mantenimiento
la Universidad profesionales en la UTM. tiempos. constante.
Tecnológica del - Mejora en la
Mayab gestión de la
información.
- Reducción de
costos en impresión
de documentos.
- Eficiencia en el
proceso de - Complejidad en la
8
Introducción
Implementación de Automatizar el titulación. implementación.

sistema web para la procesamiento y la - Reducción de - Integración con
gestión y control de recopilación de datos tiempos. sistemas existentes
los procesos de la utilizados en las estadías - Mejora en la - Dependencia de
unidad de titulación profesionales de la gestión de la acceso a internet.
de la carrera de Universidad Salesiana información.
Ingeniería en sistemas - Reducción de
de la Universidad costos en impresión
Salesiana de documentos.
Sistema de gestión vía Agilización del registro y - Consultas - Dependencia de
web para servicio control de alumnos, instantáneas. proveedores externos.
social en la instituciones y programas - Reducción del - Costos de
Universidad Nacional de servicio social en la tiempo de captura implementación y
Autónoma de México UNAM mediante un de datos. mantenimiento.
sistema web. - Acceso desde - Integración con
cualquier sistemas existentes
dispositivo con
conexión a internet.
1.5 Planteamiento del problema

La generación manual de cartas de presentación de estancias y estadías en la Universidad
Politécnica de Texcoco constituye una tarea laboriosa y propensa a errores. Según los resultados de
la encuesta realizada entre estudiantes y personal administrativo (Anexo 1.2.1, Figura 6.2), se
evidencia que el 75.8% de los encuestados considera que el sistema actual para generar cartas no es
eficiente. Además, el 15.2% (Anexo 1.2.1, Figura 6.3) califica su experiencia con el proceso actual
como insatisfactoria debido a los largos tiempos de espera y la frecuencia de errores en las cartas
generadas.
Las gráficas presentadas en el Anexo 1.2.1, Figura 6.6 muestran que el 69.7% de los estudiantes ha
experimentado demoras significativas en la obtención de cartas, con un tiempo promedio de espera
de 1 semana. Y, por último, se observa que el 69.7% (Anexo 1.2.1, Figura 6.4) de los encuestados
9
Introducción
ha tenido que corregir errores en las cartas generadas manualmente, lo que refleja la frecuencia de
imprecisiones en el proceso actual.
Estos datos revelan una clara necesidad de mejorar el proceso de generación de cartas para estancias
y estadías en la Universidad, destacando la importancia de implementar un sistema automatizado
que agilice y optimice este procedimiento.
1.6 Efectos y Consecuencias de la Problemática
Los estudiantes se ven afectados por la demora en la creación manual de cartas al retrasar el inicio
de sus estancias o estadías, lo que puede afectar su progreso académico y profesional. Para el
personal administrativo, la carga de trabajo asociada con este proceso manual resulta en una
asignación ineficiente de recursos y la posibilidad de errores que podrían afectar la validez de las
cartas. Estos efectos perjudiciales afectan negativamente la eficiencia operativa de la organización y
la satisfacción de los usuarios.
1.7 Necesidad de Intervención
Para mejorar significativamente la eficiencia del proceso de creación de cartas de presentación, es

esencial abordar esta problemática. La intervención no solo reduce el tiempo y los errores, sino que
también mejora la experiencia general de los estudiantes y el personal administrativo. La
implementación de un Sistema web para la gestión y automatización de cartas de presentación no
solo mejorará la eficiencia operativa, sino que también ayudará a la Universidad Politécnica de
Texcoco a cumplir con sus objetivos institucionales y a crear un entorno educativo más eficiente y
centrado en el estudiante.
1.8 Organización del documento
Para poder alcanzar los objetivos aquí planteados, este trabajo se ha organizado de la siguiente
manera:
En el Capítulo 2, Marco teórico, se presenta formalmente una introducción detallada a los
conceptos fundamentales relacionados con la investigación, explora modelos y conceptos relevantes
que sirven como base teórica para comprender la problemática.
10
Introducción
En el Capítulo 3, Diseño Conceptual, se profundiza en la etapa de maquetado y diseño. Se

describen minuciosamente elementos visuales clave, como maquetas y diagramas de flujo, con el
objetivo de moldear y organizar el proyecto.
En el Capítulo 4. Diseño a Detalle, va enfocado a partir del capítulo anterior es en el entendido de
que, en función de los objetivos específicos planteados, se proponen secciones (capítulos) que
habrán de cubrir con los establecido en ellos.
En el Capítulo 5, Implementación, se presenta un análisis completo de cada paso del desarrollo del
Sistema web, desde la selección de tecnología hasta el despliegue final en un entorno de producción.
En el Capítulo 6, Conclusiones, se analizan los objetivos alcanzados, se muestran las lecciones
aprendidas y se hacen recomendaciones para trabajos a realizar en el futuro.
11
2
MARCO TEÓRICO
En este capítulo se abordan las

consideraciones teóricas más
significativas para lograr la solución
del problema planteado.
12
Marco Teórico
2. Marco teórico
El marco teórico de cualquier investigación sirve como base para comprender e interpretar los
resultados. Es fundamental contextualizar esta implementación dentro de un marco teórico sólido
para comprender plenamente los desafíos, oportunidades y repercusiones de la implementación. Este
marco debe incluir diversos aspectos relacionados con la gestión educativa, la automatización de
procesos y las tendencias en el desarrollo de sistemas web. Se discutirán algunos conceptos básicos
que ayudarán al análisis y darán una base sólida para la investigación.
El objetivo es obtener una comprensión completa y profunda de los desafíos y oportunidades que
presenta la implementación de un Sistema web para la gestión de cartas en el contexto educativo al
integrar estas perspectivas teóricas.
2.1 ¿Qué es un Sistema web?
Los Sistemas web, también conocidos como aplicaciones web, son creados e instalados
independientemente de una plataforma o sistema operativo, como Windows o Linux. Solo están
alojados en una intranet (red local) o en un servidor en Internet. Aunque su apariencia es muy
similar a las páginas web que vemos con frecuencia, en realidad los sistemas web tienen
funcionalidades muy poderosas que brindan soluciones específicas a casos específicos.
Cualquier navegador web (como Chrome, Firefox, Internet Explorer, etc.) puede usar los sistemas
web, sin importar el sistema operativo. Dado que los usuarios se conectan a un servidor donde se
aloja el sistema, las aplicaciones web no requieren la instalación en todas las computadoras.
Las bases de datos permiten que las aplicaciones web procesen y muestren información de forma
dinámica para el usuario.
Los sistemas basados en plataformas web se distinguen de otros tipos de sistemas, lo que los hace
muy útiles tanto para las empresas como para los usuarios.
Los costos, la rapidez de obtención de información, la optimización de las tareas por parte de los
usuarios y la gestión estable reflejan este tipo de diferencias. (¿Qué es un sistema web?, 2015)
2.1.1 Elementos de estructura de un sistema web

Los componentes básicos que estructuran un sistema web contribuyen a su organización y
funcionalidad. Estos elementos pueden variar dependiendo del tipo de sitio web y sus objetivos. La
Figura 2.1 muestra un ejemplo de lo que puede contener. (Casas, 2022)
13
Marco Teórico
Figura 2.1 Estructura de un sistema web

Fuente: https://www.lucushost.com/blog/partes-de-una-pagina-web-estructura-y-contenido/
 Encabezado (Header): Es la parte superior del sitio web que generalmente contiene el
logotipo, el menú de navegación principal y posiblemente información de contacto o enlaces
importantes.
 Contenido principal (Body): Es la sección central del sitio web que contiene el contenido
principal, como texto, imágenes, videos, formularios, etc. Aquí es donde se presenta la
información principal que el sitio web desea comunicar.
 Pie de página (Footer): Es la parte inferior del sitio web que generalmente contiene enlaces
adicionales de navegación, información de contacto, enlaces a redes sociales, créditos y otra
información útil.
2.2 Navegador Web
Un navegador web, también conocido como navegador de Internet o simplemente navegador, es una
aplicación de software que le permite acceder a la World Wide Web. Puede abrir una ventana con
todo el conocimiento humano con un solo clic, donde puede encontrar respuestas a todas las
preguntas que se tenga. (Bodnar & Cocorinos, 2021)
Un navegador web es similar a navegar en un barco de un lugar a otro y visitar cualquier página
web.
14
Marco Teórico
Figura 2.2 Navegadores web

Fuente: https://norfipc.com/internet/navegadores-web.php
2.2.1 Tipos de navegadores web

 Microsoft Edge
o Microsoft Edge, el navegador más avanzado de Microsoft, está instalado por defecto
en Windows 10. Aunque es un navegador relativamente nuevo, cuenta con ajustes de
seguridad fácilmente optimizables y muchas extensiones para personalizarlo al gusto
de cada usuario. Sin embargo, cada actualización incluye interesantes mejoras que lo
convierten en un rival fuerte de Chrome. (Blanch, 2021)
 Chrome
o Después de superar al poderoso Internet Explorer, Chrome es el navegador web más
utilizado en la actualidad. Este navegador, lanzado en 2008, es ideal para todo tipo de
usuarios porque ofrece una excelente estabilidad y un manejo muy intuitivo. Sus
grandes posibilidades de sincronización, su rapidez y su amplia gama de extensiones
lo convierten en un navegador más personalizado y completo. En contraste, su alto
uso de recursos puede generar problemas para los equipos menos potentes. (Blanch,
2021)
 Firefox
o Firefox, un navegador open source desarrollado por un experto de Mozilla, debutó en
2004. Su excelente rendimiento, junto con sus numerosas extensiones, lo convierten
en muy versátil. Por otro lado, se actualiza regularmente, lo que mejora la
experiencia de usuario. Por el contrario, es un poco más lento que Chrome, lo que
puede ser un problema para algunos usuarios y tareas. (Blanch, 2021)
15
Marco Teórico
2.3 ¿Qué es una base de datos?
Una base de datos es un conjunto organizado de datos o información estructurada, que

generalmente se almacena electrónicamente en un sistema informático. Un DBMS «Sistema
Manejador de Bases de Datos» generalmente administra una base de datos. El término «sistema de
bases de datos» se refiere a los datos y los DBMS, así como a las aplicaciones asociadas.
Para mejorar el procesamiento y la consulta de datos, los datos de los tipos de bases de datos más
utilizados actualmente se estructuran como filas y columnas en una serie de tablas. Como resultado,
los datos se pueden acceder, administrar, modificar, actualizar, controlar y organizar fácilmente. La
mayoría de las bases de datos utilizan SQL «Lenguaje de Consulta Estructurada» para escribir y
consultar datos. (Marín, 2019). Como se muestra en la Figura 2.3 existen diversos manejadores de
bases de datos.
Figura 2.3 Manejadores de bases de datos

Fuente: https://www.inesem.es/revistadigital/informatica-y-tics/los-gestores-de-bases-de-datos-mas-usados/
2.4 HTML
El lenguaje utilizado para definir el contenido de las páginas web es HTML. En esencia, son un
conjunto de etiquetas que el navegador interpreta para definir el texto y otros elementos que
componen una página web, como imágenes, listas, tablas y videos, entre otros.
El lenguaje HTML permite incluir enlaces a otras páginas o documentos, así como describir la
estructura básica de una página y organizar cómo se mostrará su contenido. (VADAVO, 2023)
2.4.1 Tipos de etiquetas
16
Marco Teórico
 Etiquetas de apertura. <etiqueta> Son el inicio. Indican dónde comienza el elemento o

donde comienza a tener efecto. Consisten en el nombre del elemento encerrado entre los
corchetes angulares.
 Etiquetas de cierre. </etiqueta> Son lo mismo que las etiquetas de apertura, pero estas
indican donde finaliza el elemento. Además, se diferencian de las otras ya que antes de
escribir el elemento entre los corchetes, debemos escribir una barra diagonal “/ ”.
 Etiqueta de sección superior. <head> Esta etiqueta indica la parte superior del texto o
encabezado.
 Etiquetas de título. <tittle> Se usa para indicar que lo que se pondrá a continuación es el
título de la página web.
 Etiquetas de cuerpo. <body> Esta etiqueta indica la parte del cuerpo o desarrollo del texto.
 Etiqueta de sección inferior. <footer> Indica la parte inferior del texto. Puede ser una
conclusión o la parte con iconos de redes sociales.
 Etiqueta de título. <h1> Título o encabezado de la página.
 Etiqueta de subtítulo. <h2> Título de nivel 2 o subtítulo.
 Etiqueta de apartado. <h3> Subapartado. También hay <h4>, <h5>, <h6>…
 Etiquetas de párrafo. <p> Hace que cada elemento o texto aparezca en una nueva
línea agrupado.
Un ejemplo del uso de los títulos y subtítulos se puede visualizar en la Figura 2.4.
Figura 2.4 Tipos de etiquetas

Fuente: https://www.vadavo.com/blog/html-que-es-y-para-que-sirve/
2.5 CSS
17
Marco Teórico
En el mundo de desarrollo web, se encuentra el CSS es un lenguaje de diseño utilizado para

describir la presentación visual de documentos escritos en HTML y XML, para darle estilo y forma
a las páginas digitales (Aguilar, 2016). Se puede usar para estilos de texto muy básicos como, por
ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar para crear
un diseño, como podría ser convertir una columna de texto en una composición con un área de
contenido principal y una barra lateral para información relacionada. Incluso se puede usar para
crear efectos de animación
2.6 JavaScript
JavaScript es un robusto lenguaje de programación que se puede aplicar a un documento HTML y

usarse para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich,
cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla. JavaScript según es
un lenguaje de programación o de secuencias de comandos que te permite implementar funciones
complejas en páginas web. Cada vez que una página web hace algo más que sentarse allí y mostrar
información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas
interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo,
etc., puedes apostar que probablemente JavaScript está involucrado. JavaScript por sí solo es
bastante compacto, aunque muy flexible, y los desarrolladores han escrito gran cantidad de
herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de
funcionalidad adicional con un mínimo esfuerzo. (Eguíluz, 2008).
2.7 Chart.js
En el ámbito del diseño web contemporáneo, la integración de gráficas dinámicas y atractivas en las
páginas web es fundamental para mejorar la experiencia del usuario y comunicar eficazmente la
información por ello Chart JS según (Aguilar, 2016) es un plugin JavaScript que se destaca por su
simplicidad, flexibilidad y robustez, diseñado específicamente para permitir a los desarrolladores
incrustar gráficas en las páginas web con facilidad. Representa una de las opciones más elegantes y
eficientes disponibles actualmente para la incorporación de elementos gráficos dinámicos en sitios
web. Su versatilidad permite crear una amplia variedad de gráficas, desde simples diagramas de
barras hasta complejas visualizaciones de datos, adaptadas a las necesidades específicas de cada
proyecto.
18
Marco Teórico
2.8 XAMPP
El servidor web local que se utilizo fue XAMPP Figura 2.5 (de los acrónimos “X” por sistema
operativo, “A” de Apache, “M” de MySQL, “P” de PHP y “P” de Perl). Es un aplicativo integrador
de software libre y gratuito creado por el desarrollador alemán Kai 'Oswald' Seidler en el año 2002.
es utilizado para crear aplicaciones web en entornos locales antes de su publicación en línea y
configuración en un servidor web en Apache en algún sistema operativo Windows, Linux o macOS.
(Stauffer, 2007).
 X: Hace referencia a los diferentes sistemas operativos en los que se puede instalar el
programa, como Linux, Windows, Mac, Ubuntu, etc.
 A: Por el servidor web Apache que permitirá trabajar con las diferentes herramientas del
paquete y que será la principal interfaz para usar. Este servidor web de código abierto será
fácil de instalar gracias a Xampp.
 M: La letra M hace referencia a la incorporación del sistema de gestión de bases de datos
conocido como MySQL; en algunas versiones de Xampp, sobre todo en las más recientes,
incorpora MariaDB.
 P: Como todo servidor web de código abierto, Xampp utiliza un lenguaje de programación,
siendo en este caso PHP; este lenguaje es bastante conocido y soporta diferentes sistemas de
bases de datos.
 P: Perl es otro lenguaje de programación de Xampp, pero esta vez enfocado en la
administración del sistema y programación de red.
19
Marco Teórico
Figura 2.5 Interfaz de XAMPP

Fuente: https://es.wikipedia.org/wiki/XAMPP
2.8.1 Apache
Un entorno de trabajo eficiente y flexible es esencial para el desarrollo y prueba de aplicaciones
eficientes. En este sentido, Apache, como parte del paquete de software XAMPP, se convierte en
una herramienta importante para los desarrolladores web. Apache, un servidor web de código
abierto ampliamente utilizado, proporciona la infraestructura necesaria para ejecutar y visualizar
proyectos web en un entorno local antes de desplegarlos en un servidor en línea (Gómez, 2019).
2.8.2 MySQL
MySQL y PHP son elementos esenciales en la creación de aplicaciones web dinámicas y eficientes.
Ambas tecnologías son ampliamente utilizadas en el ámbito del desarrollo web y desempeñan un
papel crucial en la construcción de sistemas que manejan grandes volúmenes de información de
manera eficaz, proporcionando una experiencia de usuario mejorada.
MySQL es un sistema de administración de base de datos (SABD) relacional rápido y fácil de usar
utilizado para bases de datos en muchos sitios web4. Desde el principio, la velocidad fue el atributo
más importante para los desarrolladores. SQL «Lenguaje de Consulta Estructurado» fue
comercializado por primera vez en 1981 por IBM, el cual fue presentado a ANSI y desde entonces
20
Marco Teórico
ha sido considerado como un estándar para las bases de datos relacionales. MySQL es muy utilizado
en aplicaciones web. Su popularidad como aplicación web está muy ligada a PHP, que a menudo
aparece en combinación con MySQL (Cobo, 2005).
2.8.3 PHP
Por otro lado, PHP “Hypertext Preprocessor” es un lenguaje de programación de código abierto
diseñado específicamente para el desarrollo de aplicaciones web dinámicas e interactivas. Creado
por Rasmus Lerdorf en 1994, PHP se ha convertido en una de las herramientas más populares en el
desarrollo web debido a su versatilidad, facilidad de uso y amplia disponibilidad de recursos y
documentación.
PHP se integra fácilmente con HTML, lo que permite a los desarrolladores incrustar código PHP
directamente en el código HTML de una página web. Una de las características distintivas de PHP
es su capacidad para interactuar con bases de datos, especialmente con MySQL, lo que permite a los
desarrolladores crear aplicaciones web completas que pueden almacenar, recuperar y manipular
datos de manera eficiente (Cobo, 2005).
2.10 Internet
Internet ha revolucionado la forma en que las personas se comunican, acceden a la información y

realizan actividades cotidianas. Esta red global de computadoras interconectadas ha transformado
radicalmente diversos aspectos de la sociedad moderna. El internet Figura 2.6 es una red de redes
que conecta millones de dispositivos en todo el mundo. Permite la comunicación instantánea y la
transferencia de datos a través de una variedad de servicios y protocolos, incluidos el correo
electrónico, la navegación web, la transmisión de medios y el comercio electrónico. Además,
Internet proporciona acceso a una vasta cantidad de información y recursos, lo que la convierte en
una herramienta indispensable para la educación, la investigación, el entretenimiento y el desarrollo
económico. (FLACSO, 2001).
21
Marco Teórico
Figura 2.6 El internet

Fuente: https://edu.gcfglobal.org/es/como-usar-internet/conceptos-basicos-de-internet/1/
2.11 Intranet
La comunicación efectiva y el acceso rápido a la información son esenciales para el éxito de una
organización. En este contexto, la intranet Figura 2.7 se ha convertido en una herramienta útil para
mejorar la cooperación y la eficiencia en las empresas. Una intranet es una red privada de
comunicación interna que opera dentro de una organización y que permite a los empleados acceder y
compartir de forma segura y eficiente información, recursos y herramientas (Cabrera, 2014).
Figura 2.7 La intranet

Fuente: https://www.servnet.mx/blog/intranet-que-es-como-funciona-y-cuando-es-recomendable
2.12 Diagrama entidad relación (DER)
El diagrama de entidad-relación es un modelo utilizado en el diseño de bases de datos para mostrar

de manera visual y comprensible la estructura de los datos y las relaciones entre ellos. Este modelo
se basa en la representación de entidades con figuras geometricas Figura 2.8, así como sus
características y sus relaciones entre sí.
Sus componenets son:
22
Marco Teórico
 Entidades: Representan cosas o conceptos del mundo real, como personas, lugares, cosas o
eventos, que son relevantes para el sistema. Una entidad se convierte en una tabla en una
base de datos. Cada entidad posee rasgos que describen sus rasgos o características.
 Atributos: Son las cualidades o rasgos que caracterizan a una entidad. Los atributos se
representan dentro de las entidades en un diagrama entidad-relación.
 Relaciones: Las relaciones simbolizan las conexiones o asociaciones entre las entidades.
Estas relaciones pueden ser de uno a uno, de uno a muchos o de muchos a muchos.
Figura 2.8 Anotaciones DER

Fuente: https://gitmind.com/es/ejemplos-diagrama-erd.html
2.13 Maquetado web
23
Marco Teórico
La función de un maquetado web (Figura 2.9) es crear una representación visual y estructural del
sistema antes de su desarrollo completo. Esta representación se realiza mediante la creación de
archivos HTML y CSS que definen la disposición y el estilo de los elementos en una página web.
Para comprender completamente la maquetación web, es importante comprender que va más allá de
la estética y se enfoca en la funcionalidad general de una página web, considerando la arquitectura
de la información. Aunque también incluye la creación de aplicaciones web, móviles y de interfaz
de usuario (Flores, 2022).
Figura 2.9 Maquetado de un Sistema web.

Fuente: https://estradawebgroup.com/Post/Maquetar-nuestra-pagina-con-CSS-y-Divs/2059
2.14 Diagramas de flujo
Los diagramas de flujo son una representación visual de los pasos o procesos en el sistema, para la
navegación del usuario (Administrador, Alumno), estos representan las diferentes rutas que un
usuario puede seguir al interactuar con el sitio web, incluyendo la navegación entre páginas,
formularios de entrada de datos, procesos de registro, inicio de sesión, etc.
Los diagramas de flujo se presentan visualmente para ayudar a las organizaciones a simplificar sus
procesos. Cada paso del flujograma especifica las acciones a seguir. Los procesos están ordenados
cronológicamente, lo que los hace fáciles de seguir y útiles para tomar decisiones, ordenar procesos
e identificar errores. Una empresa de software, por ejemplo, utiliza un diagrama de flujo para lanzar
una aplicación, los nuevos empleados realizan tareas de manera ordenada y el departamento de
calidad verifica que sus productos cumplan con los protocolos necesarios. (Cantarero, 2023)
24
Marco Teórico
La norma ISO (en inglés), actualizada en 2019, establece un estándar para el uso y la función de los
símbolos en los diagramas de flujo. En la Figura 2.10 se pueden observar los más comunes:
Figura 2.10 Simbología de diagramas de flujo.

Fuente: https://ebac.mx/blog/diagrama-de-flujo
25
Marco Teórico
2.15 Metodologías
A principios de la década de 1970, el desarrollo de software era un proceso completamente manual

que utilizaba métodos tradicionales. Implementan eficazmente las funciones de gestión y desarrollo
de sistemas de software. Sin embargo, la industria comenzó a sufrir cambios debido a la necesidad
de revisión constante de los requisitos del proyecto y la falta de participación de los usuarios del
sistema. Estas brechas crean la necesidad de mejorar el proceso e impulsar el proyecto para alcanzar
los objetivos establecidos. La primera aportación se deriva de conceptos y métodos existentes en
otros campos como la ingeniería, la arquitectura y la industria del automóvil. Por ejemplo, el
proceso de desarrollo de software se divide secuencialmente en fases, lo que aumenta la necesidad
potencial de adaptación e innovación en el software (Figueroa, Solís, y Cabrera, 2016).
Los métodos tradicionales se caracterizan por estructuras de desarrollo claras, lineales e inflexibles a
los cambios en un entorno inestable. Su implementación es costosa. Tienen roles, actividades y
artefactos claramente definidos. Necesitan documentación exhaustiva, clara y detallada de todo el
proyecto. Se centran en la ejecución de los planes que todas las partes implicadas han trazado desde
el inicio del desarrollo. Por ejemplo: Incremental, Espiral, Cascada, Ágil, ICONIX, etc.
2.15.1 Metodología Cascada

La metodología en cascada es un método de gestión de proyectos que sigue un patrón lineal. En
ingeniería de software, este método se conoce como ciclo de vida del desarrollo de software
(SDLC).
El flujo del proyecto, en el que cada fase desciende en cascada hasta la siguiente, se conoce como
"cascada". Es necesaria una etapa de planificación exhaustiva, ejecución, pruebas y mantenimiento.
Y cada fase debe completarse antes de pasar a la siguiente, con poca o ninguna flexibilidad para
realizar cambios durante el proyecto. (Hamilton, 2024).
26
Marco Teórico
El modelo en cascada también es conocido por su estructura y previsibilidad, lo que permite a los
equipos planificar y presupuestar con precisión. Además, puede ser criticado por su inflexibilidad y
falta de adaptabilidad a los cambios en las circunstancias.
Figura 2.11 Metodología Cascada.

Fuente: https://asana.com/es/resources/waterfall-project-management-methodology
La metodología en cascada pone mucho énfasis en la etapa de planificación y diseño al inicio del
proyecto. Esto implica que se dedicará más tiempo y recursos a encontrar y resolver problemas
potenciales durante estas etapas iniciales. Como resultado, se espera que se reduzca el número de
errores que se deben corregir durante las etapas posteriores del proyecto.
Si una planificación más exhaustiva al inicio del proyecto reduce el costo de corregir errores,
entonces el costo total del proyecto se reduce.
En comparación con otras técnicas que permiten cambios más frecuentes y significativos en etapas
posteriores, C podría ser más bajo.
2.16 Modelo vista controlador (MVC)
El patrón de diseño de software conocido como MVC «Modelo-Vista-Controlador» es comúnmente

utilizado para crear interfaces de usuario, datos y lógica de control. Enfatiza una distinción entre la
visualización y la lógica de negocios. Esta separación de preocupaciones mejora la división del
trabajo y el mantenimiento. Algunos otros patrones de diseño se basan en MVC, como MVVM
27
Marco Teórico
«Modelo-Vista-Modelo-Vista», MVP «Modelo-Vista-Presentador» y MVW «Modelo-Vista-

Whatever».
Las tres partes del patrón de diseño de software MVC se pueden describir de la siguiente manera:
 Modelo
o El modelo define qué datos debe contener la aplicación. Si el estado de estos datos
cambia, el modelo generalmente notificará a la vista (para que la pantalla pueda
cambiar según sea necesario) y, a veces, el controlador (si se necesita una lógica
diferente para controlar la vista actualizada).
 Vista
o La vista define cómo se deben mostrar los datos de la aplicación.
 Controlador
o El controlador contiene una lógica que actualiza el modelo y/o vista en respuesta a
las entradas de los usuarios de la aplicación.
Figura 2.12 Modelo Vista Controlador

Fuente: https://codingornot.com/mvc-modelo-vista-controlador-que-es-y-para-que-sirve
2.17 Sumario
El marco teórico constituye un capítulo fundamental para el proyecto, ya que permite contextualizar
el estudio y fundamentarlo en teorías y conceptos previos sobre los sistemas web y las bases de
datos. Estos temas son altamente relevantes debido a que constituyen las bases tanto para el
28
Marco Teórico
desarrollo como para la comprensión del funcionamiento de páginas y aplicaciones en la web.

Seguidamente, se describen conceptos clave como HTML, CSS y JavaScript, lenguajes que
permiten estructurar, dar estilo y dinamizar las páginas web respectivamente. Su comprensión es
esencial para el desarrollo de aplicaciones completas. Finalmente, se mencionan herramientas como
XAMPP, que permiten crear y probar sitios y aplicaciones locales. Esto es fundamental para
entender el almacenamiento y procesamiento de información en los sistemas.
29
3
DISEÑO CONCEPTUAL
En este capítulo, se describe el

avance del proyecto, abordando la
especificación del diseño visual y
ejecutando el funcionamiento de
acuerdo con los diagramas de flujo
establecidos.
30
3. Diseño Conceptual
En este capítulo, se explorará el desarrollo de la propuesta de solución, guiándose por una
metodología de diseño específica. Este proceso finalizará con la creación de un dibujo
representativo de la propuesta, la definición de algoritmos, la elaboración de diagramas de flujo y la
implementación del maquetado de un sistema web. Todo esto estará alineado con los objetivos
mencionados anteriormente.
3.1 Metodología Cascada
Después de completar la fase de análisis y definición de requisitos, se determinaron y documentaron

las necesidades y objetivos del usuario del sistema. A continuación, se llevará a cabo la etapa de
diseño, en la que se desarrollarán los planos detallados de la arquitectura del sistema, la interfaz de
usuario y otros detalles técnicos.
Una vez completada la fase de diseño, se pasará a la fase de implementación, donde se llevará a
cabo la codificación del sistema de acuerdo con las especificaciones establecidas en las etapas
anteriores. Después de la implementación, se realizarán pruebas exhaustivas para garantizar que el
sistema cumpla con los requisitos y funcione correctamente.
Figura 3.1 Metodología aplicada.

31
3.2 Estructura general del sistema
Para entender mejor el proceso dado la metodología antes vista a continuación, se muestra el
diagrama de flujo de estructura del sistema en general Figura 3.2.
Figura 3.2 Diagrama de estructura del sistema

El diagrama de estructura del sistema web que permite visualizar su arquitectura y organización.
Este tipo de diagrama nos ayuda a comprender como están relacionados los diferentes componentes
del sistema y como se comunican entre sí.
La metodología en cascada pone mucho énfasis en la etapa de planificación y diseño al inicio del
proyecto. Esto implica que se dedicará más tiempo y recursos a encontrar y resolver problemas
potenciales durante estas etapas iniciales. Como resultado, se espera que se reduzca el número de
errores que se deben corregir durante las etapas posteriores del proyecto.
32
3.2.1 Estructura del sistema (Funcionamiento para Administradores)
Como se muestra en la Figura 3.3, un administrador puede navegar por el sistema y acceder a
varias funciones exclusivas. Estos incluyen agregar otros administradores o profesores, ver gráficas
de estadísticas de los registros de cada carrera, visualizar y editar los datos de las cartas y exportar
estas mismas.
Figura 3.3 Diagrama de estructura del sistema (Administradores)

3.2.2 Estructura del sistema (Funcionamiento para Profesores)

La Figura 3.4 muestra cómo un Profesor interactúa con el sistema, permitiéndole acceder a la
creación de cartas de aceptación y finalización para cada estudiante que participe en dicha actividad
con él.
33
Figura 3.4 Diagrama de estructura del sistema (Profesores)
3.2.3 Estructura del sistema (Funcionamiento para Alumnos)

La Figura 3.5 muestra cómo un Alumno interactúa con el sistema, permitiéndole acceder al
formulario de registro, donde ingresa sus datos para crear una carta.
Figura 3.5 Diagrama de estructura del sistema (Alumnos)
34
3.3 Diagrama de flujo del funcionamiento para administradores
El diagrama de flujo del funcionamiento del sistema para el área de administración Figura 3.6 sirve
para representar de manera visual y secuencial el proceso y la lógica de las operaciones que se
realizan en el sistema desde la perspectiva de los administradores.
Figura 3.6 Diagrama de flujo del funcionamiento para administradores

35
3.3 Diagrama de flujo del funcionamiento para alumnos
El diagrama de flujo del funcionamiento del sistema para el área de los alumnos Figura 3.7 muestra
visualmente el proceso y la lógica de las operaciones que se realizan en el sistema desde la
perspectiva de los alumnos.
Figura 3.7 Diagrama de flujo del funcionamiento para alumnos

36
3.4 Diagrama de flujo del funcionamiento para profesores
Desde la perspectiva de los profesores, el diagrama de flujo del funcionamiento del sistema para el
área del profesor Figura 3.8 muestra visualmente el proceso y la lógica de las operaciones que se
realizan en el sistema.
Figura 3.8 Diagrama de flujo del funcionamiento para profesores
37
3.5 Maquetado de la página Index
La página Index, también conocida como "página de inicio" o "página principal", es el archivo
HTML principal del sistema web. Es la primera página que los visitantes ven cuando ingresan al
sistema web y sirve como punto de entrada a otras secciones o páginas del sistema.
La página Index contiene información importante sobre el Sistema web, como su propósito, enlaces
a formularios, redirección al inicio de sesión y elementos de navegación que facilitan la navegación
del usuario por el sistema. Incluye elementos visuales como imágenes para atraer la atención del
visitante y transmitir la identidad visual del sistema web.
El diseño del maquetado para la página Index se puede observar en la Figura 3.9, que muestra el
contenedor con información relevante, imágenes como logos e incluso un pie de página.
Figura 3.9 Maquetado de la página Index

38
3.5 Maquetado de la página Inicio de sesión (Login)
El proceso de diseñar la interfaz visual y estructural de la página de inicio de sesión es donde los
usuarios ingresan sus credenciales para acceder al sistema. Esta página es crucial para la seguridad y
la experiencia del usuario, ya que proporciona un punto de entrada seguro al sistema.
El diseño del maquetado de Inicio de sesión (Login), incluye el formulario de Login e imágenes
como logos, se muestra en la Figura 3.10.
Figura 3.10 Maquetado de la página Inicio de sesión (Login)

3.6 Maquetado de la página Formulario (Alumno)
39
Este formulario recopila la información de los usuarios (alumno), como datos del alumno, datos de
la empresa, fecha, carrera, tipo de estancia o estadía, grupo, y toda la información relevante para el
propósito del sistema web.
El diseño del maquetado para la página Formulario (Alumno) que contiene el formulario de
recopilación de información e imágenes como logotipos se muestra en la Figura 3.11.
Figura 3.11 Maquetado de la página Formulario (alumno)

3.7 Maquetado de la página Administrador
El diseño del maquetado de la página Administrador Figura 3.12 muestra la disposición de los
elementos con sus diferentes funciones:
 El elemento cartas conducirá a la sección de cartas de los alumnos, donde se puede ver,
cambiar o eliminar todos los registros.
 El elemento periodos permite crear un nuevo periodo o ver periodos pasados.
40
 El elemento de gráficos redirige a la sección de gráficos, donde se pueden ver las estadísticas
de los registros por tipo de estancia o estadía de cada carrera.
Figura 3.12 Maquetado de la página Administrador

3.8 Diagrama entidad relación
Este diagrama Figura 3.13 muestra el proceso que siguen los usuarios, los alumnos para capturar los
datos de sus cartas de presentación, los administradores para realizar la exportación de estos datos,
la creación de periodos y el registro de cada tutor, los tutores para la exportación de los datos de su
asignatura correspondiente.
 Muchas entidades Alumno pueden realizar un formulario para la entidad Asignatura por
cada periodo, representandose como N:1 (Muchos a Uno). La entidad Alumno contiene una
llave primaria llamada como matricula y la entidad Asignatura posee esta llave primaria
como una llave foránea, creando una relación inmediata.
 La entidad Historial tiene una relación de N:M (Muchos a Muchos) con la entidad
Asignatura, lo que significa que muchas entidades Asignatura pueden generar muchos
registros en Historial. La entidad Historial tiene como llave foránea el campo de matrícula
de la entidad Alumno de nuevo creando una relación entre estas.
41
 Una entidad Tutor puede ser designada a muchas entidades Asignatura, ya que pueden
existir muchos registros de alumnos para un solo tutor, esta se identificada con una llave
primaria llamada IDTutor.
 La entidad Admin es la que realiza más acciones dentro de este sistema, un administrador
puede registrar muchos tutores, representando 1:N (Uno a Muchos), el administrador puede
crear muchos de periodos 1:N (Uno a Muchos), esta entidad se identifica con una llave
primaria ID.
 La entidad Periodo esta relacionada con la entidad Asignatura, ya que muchas asignaturas
pueden estar dentro de un periodo, representando 1:N, esta entidad contiene su llave primaria
IDPeriodo.
42
Figura 3.13 Diagrama entidad relación
3.10 Esquema de la Base de Datos
En el esquema de la base de datos, las líneas que conectan cada tabla muestran las relaciones entre
ellas Figura 3.14. Las tablas contienen: Asignatura, Historial, LoginAlumno (los usuarios de los
estudiantes), LoginAdmin (los usuarios de los administradores) y Períodos.
Las relaciones entre las tablas permiten almacenar y recuperar información de forma eficiente. Por
ejemplo, un administrador puede consultar el historial de un alumno específico o ver una lista de
todas las estancias programadas para un periodo académico determinado.
Asignatura
Figura 3.14 Esquema de la Base de Datos

3.11Diagrama de bloques funcional
En el diseño del diagrama de bloques Figura 3.15 se representa de forma visual las funciones
principales del sistema, así como la forma de interactuar con este.
Cada función se está representando con un bloque y las interacciones entre las funciones se
muestran mediante flechas.
43
En este diagrama se puede visualizar los niveles del sistema para cada tipo de usuario, y como cada
uno tiene sus propios privilegios y accesos al sistema.
Figura 3.15 Diagrama de bloques

3.12 Sumario
En esta sección, los diagramas de flujo son muy importantes en el desarrollo de software porque
proporciona una interacción visual básica entre los roles de estudiante y administrador en el sistema.
Estas representaciones gráficas no solo brindan una descripción clara de la dinámica del software,
sino que también brindan una comprensión más profunda de lógica de la funcionalidad del sistema.
Con explicaciones textuales adicionales, los detalles de cada figura se analizan en profundidad para
facilitar la interpretación y el análisis del lector. Esta combinación de diagramas de flujo y
44
aplicaciones escritas proporciona una comprensión profunda de la interacción de varios elementos
de software que es esencial para su diseño, desarrollo y evaluación efectivos.
4
DISEÑO A DETALLE
Este capítulo aborda los aspectos

prácticos y técnicos del desarrollo
del sistema, desde la arquitectura
general hasta los detalles específicos
de la interfaz de usuario y la
funcionalidad del sistema.
45
46
Diseño a detalle
4. Diseño a detalle
Este capítulo se centra en explicar detalladamente cómo se implementará la idea diseñada en el
capítulo anterior en un Sistema web para la gestión de cartas de estancias y estadías. Este capítulo
abarca todos los aspectos necesarios para desarrollar un sistema funcional y efectivo que satisfaga
las necesidades de los usuarios, desde la arquitectura general hasta los detalles específicos de la
interfaz de usuario y la funcionalidad del sistema. Para garantizar el éxito del sistema, cada
componente del diseño se planifica e implementa de manera consistente.
4.1 Aplicación de Metodología
El sistema se dividió en fases distintas y secuenciales para implementar la metodología en cascada,

que incluyen:
 Definición de requisitos: Se identificaron y documentaron de manera exhaustiva todos los
requisitos del sistema.
 Diseño: Se crearon los diseños detallados del sistema, incluyendo el diseño de la base de
datos, la arquitectura del sistema (Diagramas) y la interfaz de usuario (Maquetados).
 Implementación: Los diseños previos se utilizaron para codificar el sistema.
 Pruebas
4.2 Diseño de la base de datos
El diseño de la base de datos establece relaciones claras entre las entidades principales y garantiza la
integridad y coherencia de los datos.
 Tabla LoginAdmin: Esta tabla es la encargada de gestionar los administradores del sistema.
Su función de modificar el resto de la base de datos indica que tiene un papel importante en
el control y la gestión de los datos, aunque no está conectado directamente con otras tablas.
 Tabla LoginProfe: Es la tabla encargada de gestionar los registros de los profesores. Su
función de dar acceso al sistema a estos mismos permitiendo la gestión de sus cartas de
alumnos correspondientes en la asignatura, no se relaciona directamente con ninguna otra
tabla, ya que su única función es la de dar un registro al profesor.
 Tabla LoginAlumno: Almacena los datos de los estudiantes, incluida la matrícula, que es la
llave primaria. La matrícula conecta esta tabla a la tabla Historial y a la tabla Asignatura. Es
47
Diseño a detalle
esencial para la autenticación de los estudiantes y la conexión de sus datos con el resto de las
funciones del sistema.
 Tabla Asignatura: Almacena los datos proporcionados por los estudiantes para la
elaboración de su carta. Tiene una conexión con la tabla LoginAlumno y la tabla Periodos a
través de IdPeriodo. Esta tabla permite registrar los datos individuales de cada estudiante
durante un período de tiempo determinado.
 Tabla Historial: Almacena los datos que han sido exportados de la tabla Asignatura.
Además, está relacionada a la tabla LoginAlumno a través de la matrícula y a la tabla
Periodos a través de IdPeriodo. Esta tabla permite mantener un historial de los datos que los
estudiantes proporcionaron en diferentes Periodos.
 Tabla Periodos: La Tabla Periodos almacena el nombre, las fechas de inicio y fin de cada
periodo. Esta tabla brinda un marco de tiempo para las actividades relacionadas con los
estudiantes y conecta los datos de las tablas Asignatura e Historial a períodos de tiempo
específicos.
48
Diseño a detalle
Figura 4.1 Diseño de la base de datos

49
Diseño a detalle
4.2.1 Diccionario de datos
En este apartado se expondrá el Diccionario de datos, que esencialmente, es una colección de

metadatos que describe los datos ingresados y su estructura, incluyendo los nombres de los campos,
los tipos de datos, las restricciones de integridad, las relaciones entre las tablas, etc. En la Tabla 4.1
se muestra los datos para la tabla de inicio de sesión del administrador.
Tabla 4.1 Diccionario de Datos LoginAdmin.

LoginAdmin
Llave Columna Tipo Nulo
PK ID Int Not Null
userAdmin Char(30) Not Null
passAdmin Varchar(255) Not Null
En la Tabla 4.2 se describe la estructura de la tabla de inicio de sesión para los alumnos, incluyendo
la matrícula como clave principal (PK), así como los campos para el correo electrónico y la
contraseña de este.
Tabla 4.2 Diccionario de Datos LoginAlumno.

LoginAlumno
PK Matricula Char(13) Not Null
CorreoAlumno Char(30) Not Null
PassAlumno Varchar(255) Not Null
50
Diseño a detalle
En la Tabla 4.3 proporciona una estructura organizada y segura para la gestión de información de
los profesores dentro del sistema, garantizando la integridad y confidencialidad de los datos de
acceso teniendo un formato similar a las tablas vistas.
Tabla 4.3 Diccionario de Datos LoginProfe.

LoginProfe
PK IdProfe Int Not Null
Nombres Vachar(60) Not Null
Apellidos Varchar(100) Not Null
Cargo Char (50) Not Null
UsuarioProfe Char(50) Not Null
PassProfe Varchar(255) Not Null
La Tabla 4.4 especifica la estructura para el registro de periodos, incluyendo un identificador único
de periodo (ID_Periodo), el nombre del periodo, así como las fechas de inicio y fin.
Tabla 4.4 Diccionario de Datos Periodos.

Periodos
PK ID_Periodo Int Not Null
NombrePeriodo Varchar(50) Not Null
FechaInicio Datetime Not Null
FechaFin Datetime Not Null
51
Diseño a detalle
La Tabla 4.5 presenta una descripción detallada de la estructura destinada al registro de la tabla
Asignatura con el propósito de facilitar la generación de la carta correspondiente. Esta tabla incluye
campos destinados a la matrícula del estudiante, información de la empresa, así como la referencia
al periodo con el que está relacionada. Es importante destacar que el campo del folio, si bien puede
permanecer vacío durante el proceso inicial de registro, está sujeto a modificaciones posteriores por
parte del administrador del sistema.
Tabla 4.5 Diccionario de Datos Asignatura.

Asignatura
PK ID Int Not Null
Matricula Char(13) Not Null
Fecha Varchar(255) Not Null
NombreEmpresa Varchar(100) Not Null
Encargado Varchar(100) Not Null
Cargo Varchar(100) Not Null
Nombres Varchar(60) Not Null
Carrera Varchar(70) Not Null
Tiempo Char(10) Not Null
Folio Varchar(30) Null
Year Int Not Null
Tipo Varchar(20) Not Null
FK ID_Periodo Int Not Null
Por otro lado, la Tabla 4.6, presenta la estructura de la tabla historial. sirve para alojar los datos, con
la finalidad de hacer un historial del alumno, para tener conocimiento de sus estancias y estadías
pasadas.
52
Diseño a detalle
Tabla 4.6 Diccionario de Datos Historial.

Historial
PK ID Int Not Null
Matricula Char(13) Not Null
Fecha Varchar(255) Not Null
NombreEmpresa Varchar(100) Not Null
Encargado Varchar(100) Not Null
Cargo Varchar(100) Not Null
Nombres Varchar(60) Not Null
Carrera Varchar(70) Not Null
Tiempo Char(10) Not Null
Folio Varchar(30) Not Null
Year Int Not Null
Tipo Varchar(20) Not Null
FK ID_Periodo Int Not Null
4.3 Arquitectura del sistema
El diagrama que se muestra en el capítulo «3.1 Estructura del sistema» proporciona la base sobre la
cual se lleva a cabo la programación. Se destaca que la implementación se llevó a cabo mediante
diseños CSS y funciones PHP con JavaScript.
El diseño final de la página Index (inicio), que sirve como punto de partida para los usuarios, se
muestra en la Figura 4.2. La barra de navegación se puede ver en esta página, lo que facilita la
exploración de las diversas áreas del sistema. Además, hay un botón para acceder al formulario que
el alumno debe completar. Este botón estará activado en el tiempo dentro de un periodo activo.
Esta sección ofrece una visión general de la arquitectura del sistema y cómo se traduce visualmente
en la interfaz de usuario final. Además, proporciona una visión completa y detallada del desarrollo
del sistema al establecer la relación entre el diseño presentado en el capítulo anterior y la
implementación práctica que se muestra en esta sección.
53
Diseño a detalle
Figura 4.2 Diseño final página Index

4.3.1 Acceso al sistema

Para el acceso de los administradores, se presenta el diseño de la interfaz de inicio de sesión, en el
caso de los administradores Figura 4.3 que consta de dos campos de entrada de texto para el
nombre de usuario y la contraseña, así como un botón de ingreso. Esta interfaz fue diseñada para
permitir al personal administrativo un acceso rápido y efectivo al sistema.
Figura 4.3 Diseño final página Login (Administradores)

54
Diseño a detalle
Por otro lado, para el acceso de los alumnos Figura 4.4 se describe una interfaz similar de inicio de
sesión que incluye los mismos campos para el nombre de usuario y la contraseña. En la Figura 4.5
se puede observar que se agrega una sección de registro para los alumnos. Esta sección incluye
campos adicionales, como la matrícula, el correo institucional, contraseña y la confirmación de la
contraseña. La funcionalidad de esta interfaz incluye la validación de datos y la activación del botón
de registro una vez que se completan todos los campos necesarios y se verifica su validez.
Figura 4.4 Diseño final página Login (Alumnos)

Figura 4.5 Diseño final página Registro (Alumnos)

55
Diseño a detalle
4.3.2 Formulario del alumno

El alumno es redirigido al formulario Figura 4.6 para completar sus datos de su carta después de
completar el registro e inicio de sesión, en esta sección, se describen los campos específicos que
componen el formulario y se explica su propósito. Los campos que incluye:
1. Tipo de estancia o estadía: Permite al estudiante determinar si es una estancia 1 y 2 o su
estadía profesional.
2. Nombre de la empresa: Solicita el nombre completo de la empresa u organización donde el
alumno llevará a cabo su estancia o estadía.
3. Nombre de la persona que lo acepta en la empresa: Requiere el nombre de la persona
responsable dentro de la empresa que ha aceptado al alumno para realizar su estancia o
estadía.
4. Cargo de la persona: Solicita el cargo o posición que ocupa la persona que acepta al
alumno dentro de la empresa.
5. Nombre y apellidos: Campo para que el alumno ingrese su nombre completo.
6. Matrícula: Solicita el número de matrícula del alumno, que sirve como identificación única.
7. Carrera: Permite al alumno seleccionar su carrera.
8. Horas a realizar: Campo donde se especifica la cantidad de horas que se compromete a
realizar durante su estancia o estadía; estas horas ya están predeterminadas y varían según la
carrera o la estadía.
56
Diseño a detalle
Figura 4.6 Diseño final página Formulario

4.3.3 Inicio del Administrador

Una vez que el administrador haya iniciado sesión, se redirigirá al Inicio del administrador Figura
4.7. Esta interfaz ofrece acceso a varias secciones, lo que permite al administrador realizar una
variedad de tareas relacionadas con la gestión y el mantenimiento del sistema. La siguiente es una
lista de las diversas secciones y las acciones que el administrador puede realizar en cada una de
ellas:
1. Perfil: (Figura 4.8) En esta sección, el administrador tiene la capacidad de actualizar sus
propios datos personales, como el nombre de usuario o la contraseña, si es necesario.
2. Cartas: (Figura 4.9) Esta sección permite al administrador visualizar, editar, eliminar o
exportar los datos relacionados con las cartas de presentación. Las cartas se organizan en
categorías, como Estancias I, Estancias II, Estadías, y están subdivididas por carreras para
facilitar la gestión.
3. Periodos: (Figura 4.10) Aquí, el administrador puede ver periodos anteriores o crear uno
nuevo. Los periodos son unidades de tiempo específicas dentro del sistema que pueden ser
utilizadas para organizar y gestionar los registros de los alumnos.
4. Gráficos: (Figura 4.11) En esta sección, el administrador tiene la capacidad de visualizar
gráficos en tiempo real que muestran datos relacionados con la cantidad de registros por
estancia o estadía, desglosados por tipo de carrera. Estos gráficos proporcionan una visión
clara y concisa de la distribución de los registros en el sistema.
5. Administradores: (Figura 4.12) Por último, esta sección permite al administrador agregar
nuevos administradores al sistema o visualizar los administradores ya existentes. Esto es útil
para gestionar los permisos y responsabilidades de los distintos usuarios que tienen acceso al
sistema.
57
Diseño a detalle
58
Diseño a detalle
Figura 4.7 Diseño final página Inicio del Administrador

Figura 4.8 Página Perfil

Figura 4.9 Página Cartas

59
Diseño a detalle
Figura 4.10 Página Periodos

Figura 4.11 Página Gráficos

60
Diseño a detalle
Figura 4.12 Página Administradores

4.4 Sumario
Esta sección se adentra en el funcionamiento del sistema, explorando en detalle sus componentes y
la lógica que los articula. Se describe la metodología implementada, importante para asegurar un
desarrollo sistemático y riguroso, garantizando la eficiencia y la calidad del sistema. Se analiza el
diccionario y la estructura de la base de datos, componente fundamental que permite almacenar,
gestionar y acceder a la información de manera organizada y segura. Finalmente, se describen las
diferentes secciones del sistema y sus funcionalidades, mostrando cómo se integran para lograr los
objetivos propuestos.
61
Diseño a detalle
5
IMPLEMENTACIÓN
En este capítulo se detalla el proceso

de desarrollo y puesta en
funcionamiento del Sistema web. Se
describe la arquitectura, despliegue,
la integración y pruebas realizadas.
62
Diseño a detalle
5 Implementación
En este capítulo se detalla el proceso de convertir la premisa del proyecto en una realidad funcional
y operativa. Se presentará un análisis completo de cada paso del desarrollo del Sistema web, desde
la selección de tecnología hasta el despliegue final en un entorno de producción universitario. Se
analizan en detalle elementos importantes como la arquitectura del sistema y el diseño. Además, se
abordan los problemas que surgieron durante el proceso de integración de las diversas partes del
sistema, y cómo se realizaron las pruebas necesarias para asegurar que el sistema funcione
correctamente.
5.1 Metodología
Algunas de las razones por las que se utilizó la metodología en Cascada Figura 5.1 para el
desarrollo de este proyecto son las siguientes:
 Requisitos estables: Desde el principio, se consideró que los requisitos del proyecto eran
claros y estables. Esto indica que durante el desarrollo del proyecto no se esperaban cambios
significativos en los requisitos.
 Secuencia clara de actividades: Facilita la planificación y ejecución de proyectos porque
sigue una secuencia clara de actividades. El equipo de desarrollo tiene una estructura clara y
bien definida porque cada fase se completa antes de pasar a la siguiente.
 Enfoque centrado en la documentación: La metodología en cascada prioriza la
documentación detallada en cada fase del proyecto.
 Menor riesgo de desviaciones: Si los requisitos iniciales son claros y no cambian
significativamente, hay menos riesgo de desviaciones significativas en el presupuesto o el
cronograma porque la metodología en cascada sigue una secuencia lineal y secuencial.
Los beneficios de la metodología en cascada para este sistema incluyeron:

 Estructura clara: Proporcionó una estructura clara y bien definida para el desarrollo del
sistema, lo que facilitó su planificación y ejecución.
 Documentación detallada: La metodología en cascada hizo que cada fase del sistema
tuviera documentación detallada, lo que ayudó a mantener un registro completo de los
requisitos, diseños y pruebas realizadas.
63
Diseño a detalle
 Menor riesgo de desviaciones: Al seguir una secuencia lineal y secuencial de actividades,

se redujo el riesgo de desviaciones significativas en el presupuesto o el cronograma, siempre
y cuando los requisitos iniciales estuvieran bien definidos.
 Facilita la gestión del proyecto: La metodología en cascada facilitó la gestión del proyecto
al dividirlo en fases distintas y secuenciales, lo que permitió un seguimiento claro del
progreso y la identificación temprana de posibles problemas o desviaciones.
Figura 5.2 Estructura del proyecto

5.2 Diseño de la arquitectura
Para comprender la arquitectura del Sistema, se describen en detalle los componentes esenciales que
conforman la estructura del sistema y cómo interactúan entre sí para garantizar su funcionamiento
integral, evaluando las tecnologías empleadas, los patrones de diseño utilizados, la escalabilidad y el
rendimiento del sistema, así como las medidas de seguridad implementadas para garantizar que los
datos y la privacidad de los usuarios estén protegidos.
5.2.2 Tecnologías utilizadas

El desarrollo del proyecto y la construcción de este fue meramente realizado con PHP y JavaScript
para las funciones principales (navegación, cargar-modificar-actualizar-eliminar datos, mostrar
animaciones, cargar imágenes, etc.), HTML y CSS como la estética de la interfaz del Sistema, y por
último utilizando SQL para base de datos. Con el uso de una variedad de repositorios que
permitieron que el desarrollo se facilitará en ciertas situaciones, utilizando API’s que permiten
realizar funciones complejas y muy específicas, como, por ejemplo: mostrar gráficas, permitir
exportar datos utilizando plantillas en formato Word, mostrar animaciones de carga, etc.
64
Diseño a detalle
5.2.3 Patrones de diseño

Utilizar Modelo-Vista-Controlador, emergió como una estrategia clave para organizar y estructurar
el código de manera modular y escalable. Como se muestra en la Figura 5.2, esta arquitectura
divide claramente el código fuente entre la Vista (representada por archivos HTML y algunos PHP),
el Controlador (utilizando funciones en JavaScript), y el Modelo (gestionado mediante consultas
SQL), facilitando la actualización y mantenimiento de cada componente de manera independiente.
Figura 5.2 Estructura del proyecto

5.2.4 Escalabilidad y rendimiento

La arquitectura del Sistema web está diseñada con un enfoque en la escalabilidad y el rendimiento
óptimo. Su flexibilidad permite su implementación en diversas instituciones y áreas, respaldada por
una interfaz intuitiva y adaptable. Además, la compatibilidad con múltiples navegadores y sistemas
operativos garantiza una experiencia uniforme para todos los usuarios. Las actualizaciones futuras se
simplifican gracias a la modularidad de la arquitectura, y su adaptabilidad asegura una funcionalidad
continua en cualquier entorno.
5.2.5 Seguridad
La seguridad del Sistema web se aborda de manera completa mediante una serie de medidas
preventivas:
65
Diseño a detalle
 La encriptación de datos en formato HASH protege la confidencialidad de la información y

las contraseñas de los usuarios registrados.
 El control de acceso se refuerza mediante una cookie personalizada (Anexo 1.3.1), que
restringe la navegación y el acceso a funciones específicas según el tipo de usuario. Los
intentos de manipulación son detectados y redirigidos automáticamente la página de inicio.
 Se implementaron técnicas de ofuscación en el código JavaScript (Anexo 1.3.2) para
proteger la integridad del código fuente, mitigando así posibles intentos de acceso no
autorizado.
 Para evitar la inyección SQL se implementó una función en JavaScript que bloquea cualquier
tipo de carácter no valido (Anexo 1.3.3) en el ingreso de texto o número, el cual
inmediatamente envía una alerta al usuario (Figura 5.3) que se ha bloqueado su acción de
carácter inválido.
Figura 5.3 Alerta al usuario

5.3 Integración y pruebas
Estas pruebas detalladas y sistemáticas pueden garantizar que el sistema funcione correctamente, sea
seguro y satisfaga las necesidades de los usuarios.
1. Pruebas unitarias:
 Cada componente del sistema pasó por pruebas unitarias para garantizar que funcione
correctamente. Estas pruebas incluyen verificar la lógica del sistema en el back-end,
validar los formularios en el front-end y verificar la integridad de los datos en la base
de datos.
66
Diseño a detalle
2. Pruebas de integración:
 Se realizaron pruebas de integración para garantizar que los diversos componentes
del sistema funcionen juntos de forma adecuada.
 El front-end y el back-end verifican las solicitudes HTTP, así como la comunicación
entre el back-end y la base de datos.
3. Pruebas de carga y rendimiento:

 Se realizaron pruebas de carga para evaluar cómo responde el sistema bajo
condiciones de carga pesada.
 Se utilizaron estas pruebas para encontrar cuellos de botella y determinar qué
componentes se deben optimizar.
4. Pruebas de seguridad:
 Las pruebas de seguridad se realizaron para identificar posibles vulnerabilidades en el
sistema, como la inyección de SQL, la vulnerabilidad de XSS (Cross-Site Scripting)
y la exposición de datos sensibles, o el mal manejo del Sistema.
5.4 Despliegue
Para garantizar un funcionamiento seguro y confiable del Sistema web en el entorno laboral de la
Universidad, se requieren una serie de pasos y tareas relacionadas para implementar el Sistema en el
entorno, utilizando un servidor Linux propio alojado por la Universidad.
1. Preparación del servidor:

 Para alojar el Sistema web, se seleccionó un servidor adecuado que tenga suficiente
capacidad de almacenamiento, memoria y procesamiento.
2. Instalación de software necesario:
 Se instaló el software necesario para ejecutar la aplicación web, incluyendo el
servidor web (Apache), el servidor de aplicaciones (PHP), y el servidor de base de
datos (MySQL).
 Los servicios como Apache, MySQL y PHP se configuraron para que se inicien
automáticamente al arrancar el servidor.
67
Diseño a detalle
3. Transferencia de archivos:
 Los archivos del Sistema fueron transferidos del alojamiento local al servidor, esto
incluye el código fuente y los archivos de configuración.
 Se aseguraron de que los permisos de archivo y directorio sean correctos para que el
servidor pueda acceder y ejecutar correctamente los archivos.
4. Configuración del servidor web:
 El servidor se configura para que el Sistema web pueda funcionar. Creando un
archivo de configuración de host virtual para el dominio de la Universidad y
asignarle un directorio raíz a la aplicación.
 Los certificados SSL se configuraron para habilitar HTTPS y garantizar una
comunicación segura entre el cliente y el servidor.
5. Configuración de la base de datos:
 La base de datos se ha alojado en el servidor y se han configurado los permisos de
usuario apropiados para que el Sistema pueda acceder a ella.
 Se importo el esquema de la base de datos y los datos iniciales.
6. Pruebas de despliegue:
 Se realizaron pruebas exhaustivas para garantizar que el Sistema web se despliegue
en el servidor correctamente. Esto incluyó probar la funcionalidad principal de la
aplicación y verificar que todos los recursos estáticos se carguen correctamente.
68
6
CONCLUSIONES
Este capítulo examina las

conclusiones obtenidas durante el
proceso de diseño, desarrollo e
implementación del Sistema.
69
6 Conclusiones
Este capítulo analiza los resultados y descubrimientos obtenidos durante el proceso de diseño,
desarrollo e implementación. Se analizan los objetivos alcanzados y no alcanzados, se mencionan
las lecciones aprendidas y se hacen recomendaciones para trabajos futuros.
6.1 Lecciones aprendidas
Este apartado contiene las lecciones que se aprendieron durante el desarrollo e implementación del
proyecto. Estas lecciones abarcan temas técnicos, metodológicos y de gestión que han surgido a lo
largo del proyecto y que han ayudado al aprendizaje y el crecimiento del equipo.
 Importancia de la planificación: Antes de iniciar cualquier proyecto, se reconoce la

necesidad de una planificación detallada. Esto incluye definir claramente los objetivos, el
alcance, los recursos necesarios y el cronograma de trabajo.
 Comunicación efectiva: Es fundamental que los miembros del equipo se comuniquen entre
sí de manera clara y abierta. La comunicación efectiva ayuda en la toma de decisiones, la
resolución de problemas y el seguimiento del progreso del proyecto.
 Flexibilidad y adaptabilidad: Se descubrió que los requisitos, los plazos u otros aspectos
pueden cambiar con el tiempo. Para enfrentar estos desafíos y encontrar soluciones efectivas,
es esencial ser adaptable y adaptable.
 Pruebas exhaustivas: Se reconoce que las pruebas exhaustivas en todas las etapas del
desarrollo son cruciales para detectar y corregir errores de manera oportuna. Las pruebas son
útiles para evaluar la confiabilidad y la calidad del producto final.
 Gestión de riesgos: La importancia de identificar y gestionar los riesgos potenciales que
pueden surgir durante el proyecto está bien comprendida. Esto incluye la creación de planes
de contingencia para reducir las consecuencias en caso de problemas.
6.2 Impacto y beneficios
Para calcular la eficiencia del Sistema, se ha asignado un valor número a cada objetivo cumplido y
no cumplido:
70
 Muy importante (MI): 5 puntos
 Importante (I): 3 puntos
 No tan importante (NI): 1 punto
Objetivos cumplidos:
 Gestión y automatización de recolección de datos de los alumnos (MI): 5 puntos
 Optimización de tiempo (MI): 5 puntos
 Reducción de carga a administrativos (MI): 5 puntos
 Tener tres tipos de roles de usuario diferentes (alumno, profe, admin) (I): 3 puntos
 Utilización de frameworks en la parte de programación (NI): 1 punto
 Diseño de una interfaz intuitiva (I): 3 puntos
 Implementación de la seguridad necesaria (MI): 5 puntos
 Despliegue del sistema en la nube (I): 3 puntos
Objetivos no cumplidos:
 Exportar cartas en formato PDF (I): 3 puntos
 Exportar cartas en masa (NI): 1 punto
 Visualizar periodos pasados (I): 3 puntos
 Descargar los datos de periodos pasados (NI): 1 punto
Sumando los puntos de los elementos cumplidos y dividiendo por el total posible.
Puntos totales cumplidos:
MI :4∗5=20 puntos I : 4∗3=12 puntos¿ :2∗1=2 puntos
Total de puntos cumplidos: 20(MI )+12(I )+2(¿)=34 puntos
Total de puntos posibles:

MI :4∗5=20 puntos
I :5∗3=15 puntos
¿ :3∗1=3 puntos
Total de puntos posibles: 20(MI )+15(I )+ 3(¿)=38 puntos
71
Calculando porcentaje de cumplimiento.
Porcentaje de cumplimiento = (Puntos totales cumplidos / Total de puntos posibles) * 100
Porcentaje de cumplimiento= ( 3438 ) ×100=89.47 %

Entonces, el sistema alcanzó un 89.47% de cumpliendo con todos los objetivos importantes
principales establecidos.
6.3 Trabajos futuros
Este apartado identifica las áreas de mejora y los elementos que podrían abordarse en trabajos
futuros relacionados con el Sistema. Algunos de los trabajos y mejoras que se pueden considerar en
el futuro:
 Exportación de cartas en formato PDF: Implementar la funcionalidad para exportar cartas

en formato PDF, lo cual proporcionaría una opción adicional para la generación y
distribución de cartas de manera más accesible y profesional.
 Exportación de cartas en masa: Desarrollar la capacidad de exportar múltiples cartas al
mismo tiempo facilitaría la gestión de grandes cantidades de cartas y optimizaría el tiempo
del usuario.
 Visualización de periodos pasados: Permitir a los Administradores acceder y visualizar
información de periodos anteriores, lo cual sería útil para el análisis histórico y el
seguimiento de registros a lo largo del tiempo.
 Descarga de datos de periodos pasados: Implementar la opción para que los usuarios
puedan descargar datos de periodos anteriores en formato de archivo XML, lo que facilitaría
el análisis fuera del sistema y la generación de informes.
 Mejoras en la seguridad: Continuar fortaleciendo las medidas de seguridad del sistema,
como la encriptación de datos y la prevención de accesos no autorizados, para garantizar la
protección de la información sensible y la integridad del sistema.
 Optimización del rendimiento: Realizar ajustes y optimizaciones adicionales para mejorar
el rendimiento y la velocidad de respuesta del sistema, especialmente a medida que aumenta
la cantidad de usuarios y datos gestionados.
72
Referencias
Tesis
Jimeno, J. V. y Visitación, R. R. (2019). Diseño e implementación de un sistema web para la

gestión del flujo de información en el taller automotriz autoservicios Aguilar. Facultad de
Ingeniería Ingeniería de Sistemas e Informática, Universidad Tecnológica del Perú, PE.
Xool, C. J. I; Buenfil, P. H. F. y Dzul, C. M. E. (2018). Desarrollo e implementación de un sistema

web para el proceso de estadía. Revista de Tecnologías de la Información y
Comunicaciones, Universidad Tecnológica del Mayab, MX.
Mendoza, R. J. E. (2017). Implementación de sistema web para la gestión y control de los procesos
de la unidad de titulación de la carrera de Ingeniería en sistemas de la Universidad
Salesiana. Universidad Politécnica Salesiana Sede Guayaquil, EC.
Galán, G. G. (2017). Sistema de gestión vía web para servicio social. Universidad Autónoma de
México, MX.
Fernández P. D. A. (2022). Desarrollo de una aplicación web para la gestión de tramite

documentario de la Universidad Agraria la Molina. Universidad Ignacio de Loyola, PE.
Correa C. J. R. y Melgarejo S. O. (2022). Desarrollo e implementación de una aplicación web para

optimizar el proceso de tramite de documentario de la municipalidad distrital de Santa
María del Valle. PE.
Blanco S. O. (2023), Propuesta para la implementación de un sistema de gestión documental en la

Asada la Argentina del Cantón de Guácimo, CR
Ramírez B. K. (2019). Desarrollo de un sistema web de gestión documentaria en la Municipalidad

Provincial de Pachitea, PE.
Internet
Bodnar, D., & Cocorinos, A. (2021, enero 28). ¿Qué es un navegador web? Avast.
https://www.avast.com/es-es/c-what-is-a-web-browser
Carrodeguas, N. (2014, Julio 23). Navegadores web de internet, características, últimas versiones.
NorfiPC. https://norfipc.com/internet/navegadores-web.php
Marín, R. (2019, Abril 16). Los gestores de bases de datos (SGBD) más usados. Canal Informática y
TICS. https://www.inesem.es/revistadigital/informatica-y-tics/los-gestores-de-bases-de-
datos-mas-usados/
¿Qué es un sistema web? (s/f). Addappto.com. Recuperado el 7 de Febrero de 2024, de

https://www.addappto.com/que-es-un-sistema-web/
73
¿Qué es una base de datos? (s/f). Oracle.com. Recuperado el 7 de Febrero de 2024, de
https://www.oracle.com/mx/database/what-is-database/
HTML: Qué es y para qué sirve – VADAVO. (2023, julio 6). Blog de VADAVO.
https://www.vadavo.com/blog/html-que-es-y-para-que-sirve/
Blanch, A. (2021, Agosto 25). Los 10 navegadores de Internet más usados del mercado. Blog de
Arsys. https://www.arsys.es/blog/navegadores-web
Casas, V. (2022, Abril 28). Partes de una página web: Estructura y contenido. Blog de LucusHost.
https://www.lucushost.com/blog/partes-de-una-pagina-web-estructura-y-contenido/
Tipos de Manejadores de Base de Datos. (2014, Marzo 25). Ofimática II UNIVÍA.
https://ofimaticaiiuniviavirtual.wordpress.com/2014/03/25/tipos-de-manejadores-de-base-de-
datos/
Aguilar, J. (2016, Junio 25). ChartJS. Jose Aguilar Blog. https://www.jose-aguilar.com/blog/chartjs/

CSS. (s/f). MDN Web Docs. Recuperado el 7 de Febrero de 2024, de
https://developer.mozilla.org/es/docs/Web/CSS
HTML: Lenguaje de etiquetas de hipertexto. (s/f). MDN Web Docs. Recuperado el 7 de febrero de
2024, de https://developer.mozilla.org/es/docs/Web/HTML
JavaScript. (s/f). MDN Web Docs. Recuperado el 7 de Febrero de 2024, de

https://developer.mozilla.org/es/docs/Web/JavaScript
Jesús. (2022, Abril 25). Qué es Xampp y por qué deberías usarlo en tus proyectos. Tutoriales
Dongee. https://www.dongee.com/tutoriales/que-es-xampp/
¿Qué es PHP? (s/f). Php.net. Recuperado el 7 de Febrero de 2024, de

https://www.php.net/manual/es/intro-whatis.php
FLACSO (Facultad Latinoamericana de Ciencias Sociales) Ecuador. (s.f.). Herramientas

tecnológicas y pedagógicas para la educación a distancia. Recuperado de
https://biblio.flacsoandes.edu.ec/libros/digital/44940.pdf
Cobo, Á. (2005). PHP y MySQL: Tecnología para el desarrollo de aplicaciones

web. España: Editorial Díaz de Santos, S.A.
Cantarero, A. (2023, Septiembre). ¿Qué es un diagrama de flujo y cómo hacer uno? Ebac.
https://ebac.mx/blog/diagrama-de-flujo
Flores, A. (2022, Abril 17). ¿Qué es la maquetación web? https://www.crehana.com.

https://www.crehana.com/blog/transformacion-digital/que-es-maquetacion-web/
Ingeniería de Software. (s/f). Blogspot.com. Recuperado el 25 de Marzo de 2024, de https://isw-

udistrital.blogspot.com/2012/09/ingenieria-de-software-i.html
74
Metodología en cascada: Ventajas e inconvenientes. (2023, Agosto 31). SafetyCulture.
https://safetyculture.com/es/temas/metodologia-en-cascada/
MVC - Glosario de MDN Web Docs: Definiciones de términos relacionados con la Web. (2023,
Noviembre 13) MDN Web Docs. Recuperado el 19 de Abril de 2024, de
https://developer.mozilla.org/es/docs/Glossary/MVC
Anexos
1.1 Encuesta
Sistema Web para Automatización de Cartas de Presentación, Aceptación y Término.
1.- ¿Te parece eficiente el sistema actual que tiene la universidad para generar cartas de estancias y
estadías? (presentación, aceptación y termino).
o Si
o no
2.- ¿Cómo calificarías tu experiencia con el proceso actual de generación de cartas?
o Muy buena
o Buena
o Regular
o Mala
o Muy mala
3.- ¿Cuánto tiempo te ha tomado en promedio obtener una carta de presentación, aceptación o
término bajo el sistema actual?
o 1-3 días
o 4-7 días
o Más de 7 días
4.- ¿Con qué frecuencia has tenido que corregir errores en las cartas generadas manualmente?
o Nunca
o Rara vez
o A veces
o Frecuentemente
75
5.- ¿Qué beneficios crees que traería la implementación de un sistema web para la generación de
estas cartas? (Selecciona todas las que apliquen)
o Ahorro de tiempo
o Mayor comodidad
o Mayor accesibilidad
o Facilidad de uso
6.- ¿Considera necesario un sistema web que automatice el proceso de generar cartas para estancias
y estadías? (presentación, aceptación y termino)
o Si
o No
7.- ¿Estarías dispuesto a utilizar un sistema web para generar tus cartas de presentación, aceptación
y término?
o Sí
o No
8.- ¿Qué tan importante consideras que es la implementación de un sistema web para automatizar
este proceso?
o Muy importante
o Importante
o Poco importante
o Nada importante
9.- ¿Qué características consideras que debería tener un sistema web para la generación de cartas de
presentación, aceptación y término? (Selecciona todas las que apliquen)
o Interfaz fácil de usar
o Descarga de cartas en PDF
o Historial de solicitudes
o Otros: ____
10.- ¿Tienes algún comentario o sugerencia adicional sobre la implementación de este sistema?
o no
76
o si…________________________
1.1.2 Resultados de la Encuesta

A continuación, se muestran los resultados más relevantes de la encuesta, como por ejemplo en la
siguiente imagen se observa cómo el 75.8% de los encuestados dice que no les parece eficiente el
sistema actual.
Figura 6.2 Resultados obtenidos

En la siguiente imagen se muestra como el 15.2% de los encuestados consideran malísima su

experiencia con el proceso actual de elaboración de cartas.
77
Figura 6.3 Resultados experiencia
(Elaboración propia, 2024).
En la siguiente pregunta, el 69.7% de los encuestados tienen problemas en ocasiones a la hora de
realizar sus trámites.
Figura 6.4 Resultados errores

Los resultados de la encuesta muestran que el 97% de los encuestados consideran necesario que se
implemente un sistema basado en web para generar cartas de estancias y estadías. El 3% restante de
los encuestados se encuentran conformes con el sistema actual que posee la universidad.
78
Figura 6.5 Resultados opinión
En la siguiente grafica se puede observar que el 69.7% de los encuestados aclaran que se tardan en
promedio de 4 a 7 días en recibir sus cartas.
Figura 6.6 Resultados tiempo

Figura 6.7 Encuesta

1.2 Funciones JavaScript y PHP
79
En este apartado se muestran los códigos fuente de algunas de las funciones más importantes
codificadas en lenguaje de programación JavaScript y PHP.
1.2.1 Función en PHP para evitar redireccionamiento entre páginas (cookie)

Esta función de código PHP es utilizado para verificar si un usuario está autenticado antes de
permitirle acceder a las páginas de inicio y sus funcionalidades protegidas.
 session_start(): Esta función inicializa el sistema de sesiones en PHP. Las sesiones se utilizan
para mantener datos de usuario entre distintas páginas web mientras la sesión está activa.
 La condición if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) verifica
si la variable de sesión loggedin está definida y si su valor es true. Si la variable de sesión
loggedin no está definida o su valor no es true, esto indica que el usuario no está autenticado.
 Dentro del bloque if, se utiliza la función header("Location: index.html") para redirigir al
usuario al formulario de inicio de sesión, que se encuentra en el archivo index.html. La función
header() se utiliza para enviar encabezados HTTP al navegador, en este caso, se envía un
encabezado de "ubicación" que indica al navegador que redirija a una nueva ubicación. Después
de enviar este encabezado, la función exit() se llama para detener la ejecución del script actual y
evitar que se procese cualquier otra salida.
 La línea $userAdmin = isset($_SESSION['user']) ? $_SESSION['user'] : ''; se utiliza para
obtener el nombre de usuario de la sesión, si está disponible. Esto puede ser útil para mostrar
información específica del usuario en la página, como un saludo personalizado o menú de
opciones.
Figura 6.8 Función cookie

80
1.2.2 Función de ofuscación en JavaScript
Estas funciones son partes de código JavaScript que se utilizan para deshabilitar algunas
funcionalidades de un navegador web, como el menú contexto y el clic derecho del ratón.
 La primera función se ejecuta cuando se detecta el evento contextmenu, que ocurre cuando
un usuario hace clic con el botón derecho del ratón en la página. Dentro de esta función,
e.preventDefault() se utiliza para prevenir el comportamiento predeterminado del
navegador asociado con este evento, que generalmente es mostrar un menú contextual con
opciones como "Guardar imagen", "Copiar", etc. Al llamar a e.preventDefault(), se bloquea
la aparición de ese menú contextual, efectivamente deshabilitando el clic derecho del mouse
en la página.
 La segunda función se ejecuta cuando se detecta cualquier pulsación de tecla en la página
web. Dentro de esta función, se verifica si la tecla presionada es la tecla F12 mediante e.key
=== 'F12'. Si es así, return false; evita que la acción asociada con la tecla F12 se ejecute, lo
que generalmente es abrir las herramientas de desarrollo del navegador. Por lo tanto, esta
función deshabilita la capacidad de abrir las herramientas de desarrollo del navegador al
presionar la tecla F12.
Figura 6.9 Función de ofuscación
1.2.3 Función en JavaScript para validar entrada a caracteres

Esta función en JavaScript llamada validarEntrada(input) se utiliza para validar el contenido de un
campo de entrada (input) en un formulario, asegurando que solo se ingresen caracteres específicos.
81
 function validarEntrada(input) {: Esta línea define una función llamada validarEntrada que
toma un parámetro input, que es el campo de entrada que se desea validar.
 var patron = /^[a-zA-Z0-9áéíóúñÑÁÉÍÓÚ\s]*$/;: Se define una expresión regular
almacenada en la variable patron. Esta expresión regular permite letras mayúsculas y
minúsculas, números, espacios y caracteres acentuados (á, é, í, ó, ú, ñ, Ñ, Á, É, Í, Ó, Ú).
 if (!patron.test(input.value)) {: Se comprueba si el valor del campo de entrada (input.value)
coincide con el patrón definido en la expresión regular. Si no coincide, significa que el campo
contiene caracteres no permitidos.
 Swal.fire({ ... });: Si se encuentra un carácter no permitido, se muestra un mensaje de
advertencia utilizando la biblioteca SweetAlert (Swal.fire). El mensaje informa al usuario que
se ha ingresado un carácter inválido y que solo se permiten letras y números.
 input.value = input.value.replace(/[^a-zA-Z0-9áéíóúñÑÁÉÍÓÚ\s]/g, '');: Después de
mostrar el mensaje de advertencia, se utiliza input.value.replace() para eliminar cualquier
carácter del campo de entrada que no coincida con la expresión regular. Esto se hace
reemplazando los caracteres no deseados por una cadena vacía.
Figura 6.10 Función validar entrada

82

Tesina

Cargado por

Copyright:

Formatos disponibles

Tesina

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tesina

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD POLITÉCNICA DE

Este capítulo se centra en la

1.1 Objetivo general

Desarrollar un Sistema web dirigido a administrativos, docentes y estudiantes de la Universidad

1.2 Objetivos particulares

• Diseñar una interfaz de usuario intuitiva y fácil de usar.

En la actualidad, la generación manual de cartas constituye un proceso laborioso y propenso a

1.4 Estado del Arte

A continuación, se presentan las diferentes investigaciones desde el campo Nacional e Internacional

(BLANCO, 2023) Propuesta para la implementación de un sistema de gestión documental en

(FERNÁNDEZ, 2022) Desarrollo de una aplicación web para la gestión de tramite

agilizar la atención de trámites y mejorar la accesibilidad a la información pertinente. La

(CORREA, MELGAREJO, 2022) Desarrollo e implementación de una aplicación web para

(RAMÍREZ, 2019) Desarrollo de un sistema web de gestión documentaria en la Municipalidad

(XOOL, BUENFIL, DZUL, 2018) Desarrollo e Implementación de un sistema web para el

1.4.1 Tabla comparativa de tesis

Tabla 1.1 Tabla comparativa.

implementación de web especializado en la de procesos del personal al

Implementación de Automatizar el titulación. implementación.

1.5 Planteamiento del problema

1.6 Efectos y Consecuencias de la Problemática

1.7 Necesidad de Intervención

Para mejorar significativamente la eficiencia del proceso de creación de cartas de presentación, es

1.8 Organización del documento

En el Capítulo 3, Diseño Conceptual, se profundiza en la etapa de maquetado y diseño. Se

En este capítulo se abordan las

2.1 ¿Qué es un Sistema web?

2.1.1 Elementos de estructura de un sistema web

Figura 2.1 Estructura de un sistema web

2.2 Navegador Web

Figura 2.2 Navegadores web

2.2.1 Tipos de navegadores web

2.3 ¿Qué es una base de datos?

Una base de datos es un conjunto organizado de datos o información estructurada, que

Figura 2.3 Manejadores de bases de datos

2.4.1 Tipos de etiquetas

 Etiquetas de apertura. <etiqueta> Son el inicio. Indican dónde comienza el elemento o

Figura 2.4 Tipos de etiquetas

En el mundo de desarrollo web, se encuentra el CSS es un lenguaje de diseño utilizado para

JavaScript es un robusto lenguaje de programación que se puede aplicar a un documento HTML y

Figura 2.5 Interfaz de XAMPP

Internet ha revolucionado la forma en que las personas se comunican, acceden a la información y

Figura 2.6 El internet

Figura 2.7 La intranet

2.12 Diagrama entidad relación (DER)

El diagrama de entidad-relación es un modelo utilizado en el diseño de bases de datos para mostrar

Figura 2.8 Anotaciones DER

2.13 Maquetado web

Figura 2.9 Maquetado de un Sistema web.

2.14 Diagramas de flujo

Figura 2.10 Simbología de diagramas de flujo.

A principios de la década de 1970, el desarrollo de software era un proceso completamente manual

2.15.1 Metodología Cascada

Figura 2.11 Metodología Cascada.

2.16 Modelo vista controlador (MVC)

El patrón de diseño de software conocido como MVC «Modelo-Vista-Controlador» es comúnmente

«Modelo-Vista-Modelo-Vista», MVP «Modelo-Vista-Presentador» y MVW «Modelo-Vista-

Figura 2.12 Modelo Vista Controlador

desarrollo como para la comprensión del funcionamiento de páginas y aplicaciones en la web.