1

Control y Monitoreo de Incidentes: Desarrollo de un Sistema Interactivo con HTML, PHP

y MySQL.

Elaborado por:

Edwin Alexander Altamar Martínez

Corporación Unificada Nacional de Educación Superior – CUN

Practicas III

Docente.

HECTOR MANUEL HERRERA HERRERA

Octubre 2023
 2

Dedicatoria

A la Corporación Unificada de Educación Superior, fuente inagotable de conocimiento y

oportunidades, agradezco sinceramente por brindarme la invaluable posibilidad de adentrarme en
el mundo del saber.

A mi respetado jefe, Germán Ariel Mantilla Serrano, cuya guía y apoyo constante han
sido pilares fundamentales en mi trayecto profesional. Su liderazgo ha iluminado mi camino, y
su respaldo ha sido la fuerza que necesitaba para alcanzar mis metas.

A todos los docentes que, con dedicación y pasión, compartieron sus conocimientos y
experiencias a lo largo de mi recorrido académico. Cada lección, cada consejo, ha dejado una
marca indeleble en mi formación.

A mi amada familia, en especial a mi hijo Jhosep Alejandro Altamar Montero y a mi

pareja Liliana Marcela Rueda Hernández, quienes han sido mi fuente de inspiración y apoyo
incondicional en cada momento. Su amor y aliento han sido el motor que me impulsó a superar
cada desafío.

A todos ustedes, mi más sincero agradecimiento. Este logro no hubiera sido posible sin su
valioso aporte y compromiso. Este proyecto de grado lleva consigo la impronta de sus
enseñanzas, el respaldo de una comunidad educativa excepcional y el amor inquebrantable de mi
familia. ¡Gracias por ser parte fundamental de mi éxito!

Así mismo un agradecimiento principal para DIOS quien siempre me guio por el buen
camino y dándome sabiduría, me llevo hasta el final, dándome fortaleza.
 3
Agradecimientos

Agradezco de manera especial al distinguido docente Héctor Manuel Herrera Herrera por
su destacada labor académica y su inquebrantable compromiso con la formación de sus
estudiantes. Su dedicación y orientación han sido fundamentales en mi proceso de aprendizaje,
inspirándome a alcanzar metas más altas y a desarrollar un enfoque crítico en mi proyecto de
grado.

A mi jefe en el trabajo, Germán Ariel Mantilla Serrano, le expreso mi profundo

agradecimiento por su apoyo constante, liderazgo inspirador y la oportunidad de crecimiento
profesional que me ha brindado. Su respaldo ha sido esencial para equilibrar mis
responsabilidades laborales y académicas.

Asimismo, extiendo mi reconocimiento a la Fundación Cardiovascular de Colombia por

ser una fuente de inspiración y apoyo en mi formación. La misión noble y el compromiso con la
excelencia de esta institución han dejado una huella significativa en mi desarrollo académico y
profesional.

Agradezco sinceramente a todas las personas en la Corporación Unificada Nacional de

Educación Superior, al profesor Héctor Manuel Herrera Herrera, a mi jefe Germán Ariel
Mantilla Serrano y a la Fundación Cardiovascular de Colombia por su invaluable contribución a
mi formación. Este logro no habría sido posible sin su guía experta, apoyo constante y el
respaldo de instituciones comprometidas con la excelencia. ¡Gracias por ser parte esencial de mi
trayecto académico y por contribuir al éxito de este proyecto de grado!
 4

Tabla de contenido
Resumen..........................................................................................................................................7
Introducción.....................................................................................................................................8
Objetivos..........................................................................................................................................8
Información General........................................................................................................................9
Desarrollo....................................................................................................................................9
Estado del Arte..........................................................................................................................11
Propósito....................................................................................................................................12
Vista General.............................................................................................................................12
Base de Datos................................................................................................................................13
Resultados y Discusión..................................................................................................................15
Conclusiones y Recomendaciones.................................................................................................20
Lista de Referencias.......................................................................................................................21
Anexos...........................................................................................................................................22
 5
Lista de Figuras

Figura 1............................................................................................................................................9
Recepción de Novedades o Incidentes........................................................................................9
Figura 2..........................................................................................................................................10
Control de Bitácora de incidentes..............................................................................................10
Figura 3..........................................................................................................................................11
Control y Seguimiento de incidentes.........................................................................................11
Figura 4..........................................................................................................................................13
Modelo de Capas.......................................................................................................................12
Base de Datos................................................................................................................................12
Figura 5..........................................................................................................................................18
Acceso a Portal Ayuda...............................................................................................................18
Figura 6..........................................................................................................................................18
Formulario HTML Reporte de Incidentes.................................................................................18
Figura 7..........................................................................................................................................19
Notificación Ticket-Recibido....................................................................................................19
Figura 8..........................................................................................................................................19
Portal Detallado de Incidentes...................................................................................................19
Figura 9..........................................................................................................................................20
Informe bitácora de Incidentes FCV..........................................................................................20
 6

Lista de Tablas

Tabla 1...........................................................................................................................................14
Tabla de Base de Datos Bitacora...............................................................................................14
Tabla 2...........................................................................................................................................14
Tabla de Base de Datos Registro...............................................................................................14
Tabla 3...........................................................................................................................................14
Tabla de Base de Datos Aplicativo............................................................................................14
 7

Resumen

Este proyecto de grado se centra en el diseño e implementación de una herramienta

innovadora mediante programación en HTML, MySQL y PHP para el control de incidentes y
reporte de novedades en una Fundación. Ante la limitación de un sistema manual basado en
hojas de cálculo reportes por llamadas mensajes por correo o por WhatsApp, se busca optimizar
y agilizar el proceso mediante una aplicación web que centraliza y automatiza la gestión de
incidentes.

La herramienta desarrollada permite a los usuarios registrar y dar seguimiento a

incidentes de manera eficiente, además de generar reportes detallados sobre novedades ocurridas
en la Fundación Cardiovascular De Colombia en un solo paso. Una característica destacada es la
inclusión de un tablero interactivo que visualiza gráficamente el detalle de cada novedad,
proporcionando una visión clara y accesible para la toma de decisiones.

Con esta solución, se busca no solo eliminar la dependencia de procesos manuales y

hojas de cálculo, sino también mejorar la precisión, la accesibilidad y la capacidad de análisis de
la información. La implementación de esta herramienta representa un avance significativo en la
eficiencia operativa y la calidad de la gestión de incidentes en la institución, brindando una
solución moderna y adaptada a las necesidades específicas del entorno.

Palabras clave (bitácora, formulario, incidentes, peticiones,):

 8
Introducción

En el desarrollo de mis prácticas en la Fundación Cardiovascular De Colombia encontré

una necesidad detallada como lo es el seguimiento y toma de los incidentes o fallas que
presentan los diferentes aplicativos de la fundación, estos actualmente por que dicho proceso
es llevado de forma muy manual y lleva varios procesos que se pueden unificar, adicional para
su manejo y búsqueda de la información genera tiempos muertos y perdida de recursos humanos
que pueden aprovecharse en otros ámbitos a parte que es compleja y carece de control.

Teniendo en cuenta lo anterior se crea la necesidad de crear un control digital de este

proceso para automatizar la recepción y manejar un solo canal optimizando así esta actividad.

Objetivos

Objetivo General

Diseñar, desarrollar e implementar una aplicación web utilizando HTML, MySQL y PHP
con el propósito de automatizar y optimizar el control de incidentes y el reporte de
novedades en La Fundación Cardiovascular De Colombia. El enfoque principal será la
creación de un tablero interactivo que visualice de manera gráfica el detalle de cada
novedad, reemplazando así el proceso manual basado en hojas de cálculo y
proporcionando una herramienta eficiente, precisa y accesible para la gestión efectiva de
incidentes.

Objetivos Específicos

❖ Especificar el levantamiento de requerimientos.

❖ Diseñar la creación de módulos y especificaciones requeridas.

❖ Construir el maqueteo del proyecto.

❖ Crear del prototipo.

❖ Documentar la mitigación del riesgo.

❖ Puesta en marcha.

❖ Analizar la calidad del proyecto.

9
 10
Información General

Desarrollo

A continuación, una muestra de los canales por donde se reciben los diferentes reportes y
novedades en los aplicativos propios de la Fundación Cardiovascular de Colombia

Figura 1
Recepción de Novedades o Incidentes

Recepcion de Novedades whatsapp (2023).

 11

Figura 2
Control de Bitácora de incidentes

Imagen extraída de Drive Bitácora de incidentes en la Fundación Cardiovascular De Colombia

(debido a el manejo de información sensible las imágenes no mostraran la información total o
datos que puedan comprometer la privacidad de los usuarios o trabajadores).
 12

Figura 3
Control y Seguimiento de incidentes

Imagen extraída del Control de incidentes De la Fundación Cardiovascular de Colombia (debido

a el manejo de información sensible las imágenes no mostraran la información total o datos que
puedan comprometer la privacidad de los usuarios o trabajadores).
 13

Estado del Arte

El desarrollo y toda la infraestructura de la herramienta se llevará a cabo en HTML

MySQL y php, estará almacenada inicialmente en un servidor local en su puesta en marcha, para
realizar sus respectivas pruebas de funcionamiento y calidad del servicio.

Propósito

En este documento se da conocer la arquitectura en capas, con todos los procesos a seguir
para el correcto modelamiento de esta Herramienta, y así lograr la solución para realizar la
implementación.

Vista General
La arquitectura en capas se subdivide en 3 capas esenciales:
 Capa de presentación (Vista)
 Capa de procesamiento de datos (Control o Negocio)
 Capa de almacenamiento de datos (Persistencia)
 14

Figura 4
Modelo de Capas

Imagen extraída diseño en StarUML.

Base de Datos.

En el desarrollo de la base de datos vamos a encontrar las tablas relacionales, las cuales
nos permiten el almacenamiento la información de todos los casos que se ingresen a través de la
herramienta
 15

Tabla 1
Tabla de Base de Bitácora

País
ID_sede Inet No Null Primay Key
Nombre Char No Null
Sede Char No Null

Tabla 2
Tabla de Registro

Ubicación
ID Inet No Null Primay Key
TipoInsidente Char No Null
ReportadoPor Char No Null
ID_aplicativo Char No Null
Impacto Char No Null
Validacion Char No Null
ID_sede Interger No Null
Analisis Char No Null
Responsable Char No Null

Tabla 3
Tabla de Base de Aplicativo

País
ID_aplicativo Inet No Null Primay Key
Nombre Char No Null
Esquema Char No Null
 16
Diseño en Base de Datos

Imagen extraída de la Base de Datos en desarrollo en MySQL Workbench 8.0 CE.

 17

Resultados y Discusión

Durante el desarrollo del Documento Final Plan De Mejoramiento se presentaron muchas

dificultades, debido a las políticas de la Fundación Cardiovascular de Colombia y las
condiciones y protocolos de seguridad, por tanto se debió pactar acuerdos para la descarga del
aplicativo de desarrollo y de Base de Datos.

Una vez establecidos los acuerdos y condiciones, se procedió a la creación de la

herramienta con la invaluable colaboración del Ingeniero Germán Ariel Mantilla. Su destacada

contribución fue fundamental para optimizar el desempeño de la herramienta, la cual ha sido

denominada 'Ayuda' (véase Figura 5). Este recurso se encuentra accesible de manera directa en

todos los equipos de la fundación. Al hacer clic, se abre un portal mediante un formulario HTML

en el navegador Mozilla con el nombre de 'Reporte de Incidentes' (véase Figura 6).

El formulario, diseñado para recopilar información detallada, incluye campos como el

correo corporativo del colaborador, la sede donde se presenta el incidente, una descripción del

problema y un campo opcional para adjuntar imágenes del error, en caso necesario. Tras el envío

de la solicitud, el usuario recibe una notificación por correo electrónico confirmando la recepción

del reporte (véase Figura 7).

La información recopilada se carga en un portal denominado 'Detallado de Incidentes

HV', que cuenta con un tablero CRUD (véase Figura 8). Este tablero no solo permite visualizar

los reportes, sino también completar los campos necesarios para la resolución, generando así un

informe detallado de incidentes. Además, se incluye un tablero adicional que posibilita el

 18
seguimiento detallado de incidentes y fallas mayores, facilitando la implementación de planes de

acción en tiempo real (véase Figura 9). Este enfoque integral fortalece la capacidad de la

institución para gestionar de manera eficiente y proactiva los incidentes, mejorando la toma de

decisiones y la resolución oportuna de problemas.

 19

Figura 5
Acceso a Portal Ayuda

Imagen extraída de escritorio Pc Corporativo Acceso directo a portal

Figura 6
Formulario HTML Reporte de Incidentes

Imagen extraída del portal web http://172.20.34.118/sistemashv/ayuda.php.

 20
Figura 7
Notificación Ticket-Recibido

Imagen extraída de la bandeja de entrada de correo corporativo Fcv

Figura 8
Portal Detallado de Incidentes

Imagen extraída del portal web http://172.20.34.118/Bitacora/detallehv.php.

 21
Figura 9
Informe bitácora de Incidentes FCV

Imagen extraída del portal web http://172.20.34.118/Bitacora/graficahv.php.

 22

Conclusiones y Recomendaciones

Se diseñó y creó una robusta base de datos utilizando MySQL Workbench 8.0 CE como

cimiento para la herramienta de control y seguimiento de incidentes en la Fundación

Cardiovascular de Colombia.

La implementación de la herramienta se llevó a cabo con éxito, quedando operativa y

optimizada para su desempeño. Asimismo, se destinó un servidor exclusivo para el

funcionamiento eficiente y dedicado de esta herramienta, asegurando así una gestión eficaz y sin

interferencias para el seguimiento de incidentes en la Fundación.

Como recomendaciones en el caso de que la Fundación utilice otros sistemas o

herramientas, se recomienda evaluar la posibilidad de integrar el sistema de control de incidentes

con estos, buscando una mayor coherencia y eficiencia en la gestión global de la información.

La implementación de un sistema de control digital para el seguimiento de incidentes en

la Fundación Cardiovascular de Colombia ha demostrado ser una solución eficiente. La

automatización de procesos ha reducido la carga manual y optimizado la gestión de incidentes.}

 23
La transición de un proceso manual a un sistema digital ha mejorado significativamente

la eficiencia operativa. La consolidación de la información en un único canal ha reducido

tiempos muertos y optimizado el uso de recursos humanos.

 24
Lista de Referencias

https://login.zproxy.cun.edu.co/login?url=https://search.ebscohost.com/login.aspx?
direct=true&db=e000xww&AN=1690049&lang=es&site=eds-live&ebv=EB&ppid=pp_a

Referencias
Capacho Portilla, J. R., & Nieto Bernal, W. (2017). Diseño de base de datos.
Universidad del Norte.

https://login.zproxy.cun.edu.co/login?url=https://search.ebscohost.com/login.aspx?
direct=true&db=e000xww&AN=2253280&lang=es&site=eds-live&ebv=EB&ppid=pp_1

Referencias
Rojas Reales, W., & Montoya, M. S. (2016). Introducción a Java: guía de actividades
prácticas. Universidad del Bosque.

https://login.zproxy.cun.edu.co/login?url=https://search.ebscohost.com/login.aspx?
direct=true&db=cat09355a&AN=dcun.KOHA.CUN.1408&lang=es&site=eds-live

Referencias
López Montalbán, I., Castellano Pérez, M. J., & Ospino Rivas, J. (2013). Bases de
datos : Desarrollo de aplicaciones multiplataforma y Web DAM y DAW (1a ed.).
Alfaomega.
 25
Anexos
26