UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ FACULTA DE …
Transcript of UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ FACULTA DE …
UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ
FACULTA DE CIENCIAS TÉCNICAS
CARRERA DE INGENIERÍA EN COMPUTACIÓN Y REDES
PROYECTO DE INVESTIGACIÓN
PREVIA A LA OBTENCIÓN DEL TÍTULO DE:
INGENIERO EN COMPUTACIÓN Y REDES
TÍTULO DEL PROYECTO:
IMPLEMENTACIÓN DE UN SISTEMA INFORMÁTICO WEB PARA AUTOMATIZAR
LOS PROCESOS ADMINISTRATIVOS Y ACADÉMICOS DEL CENTRO DE
EMPRENDIMIENTO, LIDERAZGO E INNOVACIÓN PARA EL DESARROLLO
AUTOR:
HEIBERT JOSEPH OCAÑA RODRÍGUEZ
TUTOR:
ING. VICENTE ROMERO CASTRO. MG.
JIPIJAPA – MANABÍ – ECUADOR
2021
i
UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ
FACULTAD DE CIENCIAS TÉCNICAS
CARRERA DE INGENIERÍA EN COMPUTACIÓN Y REDES
CERTIFICACIÓN DEL TUTOR
ING. VICENTE FRAY ROMERO CASTRO, MSIG, docente de la Universidad Estatal del Sur de
Manabí “UNESUM” en calidad de Tutor de la Unidad Especial de Titulación, sobre el tema:
“IMPLEMENTACIÓN DE UN SISTEMA INFORMÁTICO WEB PARA
AUTOMATIZAR LOS PROCESOS ADMINISTRATIVOS Y ACADÉMICOS DEL
CENTRO DE EMPRENDIMIENTO, LIDERAZGO E INNOVACIÓN PARA EL
DESARROLLO”.
CERTIFICA
Que el mencionado proyecto está concluido totalmente bajo mi tutoría, con el debido
asesoramiento, siendo realizado por el egresado de la Carrera de Ingeniería en Computación y
Redes, Sr. Ocaña Rodríguez Heibert Joseph portador de la C.I: 095699398-4¸ con el fin de
obtener el Título de Ingeniero de conformidad con las disposiciones establecidas para el efecto.
Jipijapa, Julio de 2021
_____________________________________________
ING. VICENTE FRAY ROMERO CASTRO, MSIG.
TUTOR DEL PROYECTO
ii
CERTIFICADO DE APROBACIÓN
Proyecto de investigación sometido a consideración de la comisión de titulación de la Carrera de
Ingeniería en Computación y Redes de la Facultad de Ciencias Técnicas de la Universidad Estatal
del Sur de Manabí, como requisito parcial para obtener el título de Ingeniero en Computación y
Redes.
Tema: “Implementación de un Sistema Informático Web para automatizar los procesos
Administrativos y Académicos del Centro de Emprendimiento, Liderazgo e Innovación para
el desarrollo”.
APROBADO POR EL TRIBUNAL EXAMINADOR DEL PROYECTO DE
INVESTIGACIÓN
Miembro del tribunal de sustentación
………………………………………….
Ing. José Alava Cruzatty, Mg.
Miembro del tribunal de sustentación
……………………………………….
Ing. Jhimmy Toala Arias, Mg.
Miembro del tribunal de sustentación
iii
DECLARATORIA DE AUTORÍA
Yo, Heibert Joseph Ocaña Rodríguez ciudadano ecuatoriano portador del número de cedula
095699398-4, declaro por medio de este escrito ser el autor intelectual del trabajo de investigación
que tiene por nombre: “Implementación de un Sistema Informático Web para automatizar los
procesos administrativos y académicos del Centro de Emprendimiento, Liderazgo e innovación
para el desarrollo”, autorizando a la vez que la Universidad Estatal del Sur de Manabí, puede hacer
uso de los contenidos desarrollados en la presente obra para fines claramente académicos.
……………………………………………………
Heibert Joseph Ocaña Rodríguez
CI: 095699398-4
Autor del proyecto
iv
DEDICATORIA
Este proyecto de titulación es dedicado a mis padres, abuelos y demás familiares por haberme
apoyado todo este tiempo hasta el día de hoy, ya que sin la ayuda y esfuerzo de ellos no habría
podido haber estudiado hasta donde he llegado, ellos son mi fuerza y parte esencial de mi vida.
Y también, a todas esas personas que me he cruzado en el camino, ya que de ellos pude aprender
cosas que desconocía, y que ahora son parte de mí.
Gracias por haberme convertido en la persona que soy ahora.
Heibert Joseph Ocaña Rodríguez
v
AGRADECIMIENTO
Agradezco primeramente a mis padres, abuelos y demás familiares por haberme brindado su apoyo
incondicional todo este tiempo.
A mi tutor de tesis el Ingeniero Vicente Romero, por su tiempo y apoyo en todo este proceso de
elaboración de mi proyecto, además de sus enseñanzas impartidas en su materia.
A los miembros del Centro de Emprendimiento, liderazgo e innovación para el desarrollo por
haberme permitido realizar mi proyecto de titulación en su departamento.
A nuestra Coordinadora la Ingeniera Martha Romero y todos los docentes de la Carrera de
Ingeniería en Computación y Redes por sus conocimientos y enseñanzas impartidas en estos años
de estudios.
Gracias por todo
Heibert Joseph Ocaña Rodríguez
vi
ÍNDICE
Resumen ................................................................................................................................... xv
Abstract ................................................................................................................................... xvi
Introducción ............................................................................................................................... 1
I. Título del Proyecto ............................................................................................................... 2
II. Problema de Investigación ............................................................................................... 3
2.1. Definición del problema ........................................................................................... 3
2.2. Formulación del problema ........................................................................................ 4
2.3. Preguntas derivadas .................................................................................................. 4
III. Objetivos .......................................................................................................................... 5
3.1. Objetivo general ........................................................................................................ 5
3.2. Objetivos específicos ................................................................................................ 5
IV. Justificación ...................................................................................................................... 6
V. Marco Teórico .................................................................................................................. 8
5.1. Antecedentes ............................................................................................................. 8
5.2. Bases teóricas ............................................................................................................ 9
5.3. Marco conceptual .................................................................................................... 16
VI. Hipótesis y Variables ..................................................................................................... 18
6.1. Hipótesis ................................................................................................................. 18
6.2. Variable Independiente ........................................................................................... 18
vii
6.3. Variable Dependiente.............................................................................................. 18
VII. Metodología ................................................................................................................ 19
7.1. Métodos................................................................................................................... 19
7.2. Técnicas .................................................................................................................. 20
7.3. Recursos .................................................................................................................. 21
VIII. Presupuesto ................................................................................................................. 22
IX. Análisis y Tabulación ..................................................................................................... 23
9.1. Entrevista y análisis ................................................................................................ 23
X. Cronograma de actividades ............................................................................................ 26
XI. Bibliografía..................................................................................................................... 28
XII. Propuesta .................................................................................................................... 34
12.1. Titulo ....................................................................................................................... 34
12.2. Justificación ............................................................................................................ 34
12.3. Objetivos ................................................................................................................. 34
12.4. Factibilidad de su aplicación ................................................................................... 35
12.5. Descripción ............................................................................................................. 38
12.6. Desarrollo e implementación .................................................................................. 49
XIII. Conclusiones y recomendaciones ............................................................................... 77
13.1. Conclusiones ........................................................................................................... 77
13.2. Recomendaciones ................................................................................................... 77
viii
XIV. Anexos ........................................................................................................................ 78
Índice de Ilustraciones
Ilustración 1: Estructura Básica HTML5 ............................................................................... 10
Ilustración 2: Modelo de Caja de los elementos HTML ........................................................ 11
Ilustración 3: Estructura del registro de actividades realizadas ............................................. 26
Ilustración 4: Diagrama de Gantt ........................................................................................... 27
Ilustración 5: Rol “Super admin” ........................................................................................... 39
Ilustración 6: Caso de uso - Primer ingreso al sistema "Usuario registrado" ......................... 40
Ilustración 7: Caso de uso - Ingreso al sistema “Usuario con rol y permisos” ...................... 41
Ilustración 8: Caso de uso - Ingreso al sistema “Usuario sin rol y permisos” ....................... 42
Ilustración 9: Caso de uso - Recuperación de contraseña para el acceso al sistema .............. 44
Ilustración 10: Caso de uso - Creación de permisos .............................................................. 45
Ilustración 11: Caso de uso - Creación de roles ..................................................................... 46
Ilustración 12: Caso de uso – Creación de cuentas de usuarios ............................................. 47
Ilustración 13: Proceso general de uso del sistema propuesto ............................................... 49
Ilustración 14: Diagrama etapas de desarrollo del proyecto .................................................. 50
Ilustración 15: Arquitectura del sistema del proyecto ............................................................ 57
Ilustración 16: Estructura de carpetas y archivos del proyecto .............................................. 58
Ilustración 17: Estructura física de entidades de base de datos MySQL en phpMyAdmin ... 58
Ilustración 18: Diseño físico del diagrama E-R de la base de datos ...................................... 59
Ilustración 19: Diseño del logotipo del sistema - CEMLID ................................................... 60
Ilustración 20: Interfaces del sistema adaptado a diferentes resoluciones y dispositivos ...... 61
ix
Ilustración 21: Interfaz - Inicio de sesión ............................................................................... 62
Ilustración 22: Interfaz - Recuperación de contraseña ........................................................... 62
Ilustración 23: Interfaz - Restablecer contraseña ................................................................... 63
Ilustración 24: Interfaz - Configuración de Perfil, Contraseña y Notificaciones ................... 63
Ilustración 25: Interfaz - Gestión de usuarios ........................................................................ 64
Ilustración 26: Interfaz - Gestión de roles .............................................................................. 64
Ilustración 27: Interfaz - Gestión de permisos ....................................................................... 65
Ilustración 28: Interfaz - Plan de trabajo ................................................................................ 65
Ilustración 29: Interfaz - Mis actividades ............................................................................... 66
Ilustración 30: Interfaz - Gestión de planificaciones .............................................................. 66
Ilustración 31: Interfaz - Gestión de actividades .................................................................... 67
Ilustración 32: Interfaz - Gestión de emprendedores ............................................................. 67
Ilustración 33: Notificación de correo - Restablecimiento de contraseña .............................. 68
Ilustración 34: Notificación de correo - Credenciales del usuario creado.............................. 68
Ilustración 35: Notificación de correo - Emprendedor registrado .......................................... 69
Ilustración 36: Notificación de correo - Plan de trabajo ........................................................ 69
Ilustración 37: Notificación del sistema - Eventos y emprendedores registrados .................. 70
Ilustración 38: Reporte en Excel - Plan de trabajo ................................................................. 70
Ilustración 39: Reporte en Excel - Actividades de trabajo ..................................................... 71
Ilustración 40: Reporte en PDF - Actividades de trabajo ....................................................... 71
Ilustración 41: Reporte en PDF - Programa Analítico y Silabo de Asignatura ...................... 72
Ilustración 42: Reporte en PDF - Ficha de inscripción de emprendedores ............................ 72
Ilustración 43: Reporte en PDF - Ficha de inscripción - incubadora de negocio ................... 73
x
Ilustración 44: Panel del proveedor de servicio - Dongee ...................................................... 74
Ilustración 45: CPanel del hosting .......................................................................................... 74
Ilustración 46: Configuración base de datos MySQL - CPanel ............................................. 75
Ilustración 47: Archivos del proyecto subido vía Terminal - CPanel .................................... 75
Ilustración 48: Administrador de archivo – CPanel ............................................................... 76
Ilustración 49: Entrevista - Ing. Víctor Guaranda Sornoza, Coordinador .............................. 78
Ilustración 50: Entrevista - Ec. María Zavala Manrique, Asistente administrativo II ........... 78
Ilustración 51: Entrevista - Ing. Jaime Chele González, Asistente Administrativo III .......... 79
Ilustración 52: Entrevista - Ing. Cesar Vega Cevallos, Técnico II ......................................... 79
Ilustración 53: Entrevista - Ing. Juan Carlos Morán Correia, Analista I ................................ 80
Ilustración 54: Reuniones de trabajo y socialización del proyecto en línea ........................... 80
Ilustración 55: Implementación - Panel del proveedor del servicio de Hosting .................... 81
Ilustración 56: Implementación – Tablero de herramientas del CPanel ................................ 81
Ilustración 57: Implementación - Administrador de archivo del CPanel ............................... 82
Ilustración 58: Implementación - Prueba operativa - Tutor y Autor del proyecto ................. 82
Ilustración 59: Vista - Login o Inicio de sesión ..................................................................... 91
Ilustración 60: Vista - Dashboard o tablero ............................................................................ 92
Ilustración 61: Vista - Complete información personal ......................................................... 93
Ilustración 62: Vista - Recuperación de contraseña ............................................................... 93
Ilustración 63: Plantilla – Notificación de restablecer contraseña ......................................... 94
Ilustración 64: Vista - Restablecer contraseña ....................................................................... 95
Ilustración 65: Barras de herramientas ................................................................................... 96
Ilustración 66: Aspecto general de interfaz de los módulos ................................................... 97
xi
Ilustración 67: Tipos y aspectos de los campos ..................................................................... 98
Ilustración 68: Campos de texto enriquecido ......................................................................... 99
Ilustración 69: Vista - Perfil de usuario .................................................................................. 99
Ilustración 70: Vista - Cambio de contraseña ...................................................................... 100
Ilustración 71: Vista - Configuración de notificaciones ....................................................... 101
Ilustración 72: Vista principal - Gestión de permisos .......................................................... 102
Ilustración 73: Vista - Crear y/o editar permisos ................................................................. 102
Ilustración 74: Vista principal - Gestión de roles ................................................................. 103
Ilustración 75: Vista - Crear y/o editar roles ........................................................................ 103
Ilustración 76: Vista principal - Gestión de usuarios ........................................................... 104
Ilustración 77: Vista - Crear cuenta de usuarios ................................................................... 105
Ilustración 78: Plantilla – Notificación credenciales de usuario .......................................... 105
Ilustración 79: Vista - Actualización de cuenta y/o información personal del usuario ........ 106
Ilustración 80: Vista principal - Plan de trabajos ................................................................. 106
Ilustración 81: Vista - Crear y/o editar registros .................................................................. 107
Ilustración 82: Plantilla – Notificación evento o actividad de trabajo ................................. 108
Ilustración 83: Vista - Revisión del evento registrado ......................................................... 108
Ilustración 84: Vista - Sección de descarga - Plan de trabajo .............................................. 109
Ilustración 85: Archivo en Excel - Reporte del plan de trabajo ........................................... 109
Ilustración 86: Vistas principales - Gestión de actividades .................................................. 110
Ilustración 87: Vistas - Crear y/o editar actividades ............................................................ 111
Ilustración 88: Vista - Sección de descarga de Matriz de actividades ................................. 111
Ilustración 89: Archivo en Excel - Reporte de actividades .................................................. 112
xii
Ilustración 90: Archivo en PDF - Reporte de actividades .................................................... 112
Ilustración 91: Vista principal - Gestión de emprendedor ................................................... 113
Ilustración 92: Modal - Crear y/o editar etiquetas ................................................................ 113
Ilustración 93: Modal - Accesos a formularios de inscripción para emprendedores ........... 114
Ilustración 94: Vista - Formulario de inscripción - Emprendedores .................................... 114
Ilustración 95: Vista - Formulario de inscripción - Incubadora ........................................... 115
Ilustración 96: Plantilla - Emprendedor registrado .............................................................. 116
Ilustración 97: Vista - Revisión de datos del emprendedor .................................................. 116
Ilustración 98: Modal – Actualizar estado del registro ........................................................ 117
Ilustración 99: Vista - Emprendedores - Sección de actividades y seguimiento .................. 118
Ilustración 100: Archivo en PDF - Ficha de inscripción - Emprendedores ......................... 118
Ilustración 101: Archivo - Ficha de inscripción - Incubadora .............................................. 119
Ilustración 102: Vista principal - Gestión de planificaciones .............................................. 119
Ilustración 103: Modal - Creación de facultades .................................................................. 120
Ilustración 104: Modal - Creación de carreras ..................................................................... 120
Ilustración 105: Modal - Creación de asignatura ................................................................. 121
Ilustración 106: Vista - planificaciones - Acciones del registro .......................................... 121
Ilustración 107: Vista - planificaciones - Panel principal de la asignatura registrada.......... 122
Ilustración 108: Vista - planificaciones - Sección de descarga del panel............................. 122
Ilustración 109: Vista - planificaciones – Panel completar datos del programa analítico... 123
Ilustración 110: Vista - planificaciones - Panel completar datos del silabo de asignatura... 123
Ilustración 111: Vista - planificaciones - Formulario de registro de autoridades y/o directivos
..................................................................................................................................................... 124
xiii
Ilustración 112: Archivo en PDF - Programa Analítico y Silabo de Asignatura ................. 124
Ilustración 113: Panel de control - XAMPP ......................................................................... 128
Ilustración 114: Requerimientos - Servidor local ................................................................. 128
Ilustración 115: Requerimientos del servidor ...................................................................... 129
Ilustración 116: Base de datos - Estructura física ................................................................ 130
Ilustración 117: Base de datos - Diseño físico ..................................................................... 131
Ilustración 118: Estructura de carpetas y archivos del proyecto – Laravel .......................... 133
Ilustración 119: Tablero de herramientas del hosting .......................................................... 137
Ilustración 120: Terminal del CPanel ................................................................................... 138
Ilustración 121: Administrador de archivos del CPanel ....................................................... 138
xiv
Índice de Tablas
Tabla 1: Presupuesto del proyecto .......................................................................................... 22
Tabla 2: Rol "Super admin" .................................................................................................... 40
Tabla 3: Caso de uso - Primer ingreso al sistema "Usuario registrado" ................................. 41
Tabla 4: Caso de uso - Ingreso al sistema “Usuario con rol y permisos” ............................... 42
Tabla 5: Caso de uso - Ingreso al sistema “Usuario sin rol y permisos” ................................ 43
Tabla 6: Caso de uso - Recuperación de contraseña para el acceso al sistema ....................... 45
Tabla 7: Caso de uso - Creación de permisos ......................................................................... 46
Tabla 8: Caso de uso - Creación de roles ................................................................................ 47
Tabla 9: Caso de uso – Creación de cuentas de usuarios ........................................................ 48
Tabla 10: Herramientas de desarrollo ................................................................................... 132
Tabla 11: Tecnologías para el desarrollo del Front-end........................................................ 132
Tabla 12: Tecnologías para el desarrollo del Back-end ........................................................ 133
Tabla 13: Descripción de archivos de configuración del proyecto ....................................... 134
Tabla 14: Descripción de carpetas de configuración del proyecto ....................................... 135
Tabla 15: Sitio Web del proveedor de servicios de hosting .................................................. 136
Tabla 16: Descripción general del hosting ............................................................................ 137
xv
RESUMEN
El presente proyecto de investigación consiste en dar a conocer lo beneficioso de utilizar hoy
en día las tecnologías de la información y comunicación como herramientas para la automatización
de procesos administrativos y académicos en el Centro de emprendimiento, liderazgo e innovación
para el desarrollo, que servirán para agilizar las tareas y actividades que son necesarias
sistematizar.
Para la elaboración de este proyecto ha sido necesario desarrollar un sistema informático web
de gestión utilizando las últimas herramientas y tecnologías del desarrollo web que permitirán
agilizar, mejorar el flujo de trabajo y servicios del Centro de emprendimiento, liderazgo e
innovación para el desarrollo. Que primordialmente la idea se obtuvo del análisis de las entrevistas
realizadas al personal administrativo y académico.
Este proyecto concluye con la propuesta de solucionar esta necesidad que presenta el Centro de
emprendimiento, liderazgo e innovación para el desarrollo, reformando y mejorando los medios
por los cuales realizaban sus labores los miembros del centro, mediante la utilización de un sistema
web que mejorara el registro y recopilación de datos, aumentando la calidad de sus tareas y
servicios. Por último, la construcción de los manuales de usuario y técnico que servirán de guía
para las personas encargadas de este sistema.
Palabras claves: Automatización, Comunicación, Desarrollo web, Información,
Sistematización, Tecnología.
xvi
ABSTRACT
This research project consists of publicizing the benefits of using information and
communication technologies today as tools for the automation of administrative and academic
processes in the Center for entrepreneurship, leadership and innovation for development, which
will serve to streamline the tasks and activities that need to be systematized.
For the elaboration of this project, it has been necessary to develop a web management
computer system using the latest web development tools and technologies that will streamline,
improve the work flow and services of the Center for Entrepreneurship, Leadership and Innovation
for Development. That primarily the idea was obtained from the analysis of the interviews
conducted with the administrative and academic staff.
This project concludes with the proposal to solve this need presented by the Center for
entrepreneurship, leadership and innovation for development, reforming and improving the means
by which the members of the center carried out their work, through the use of a web system that
would improve the registration and data collection, increasing the quality of their tasks and
services. Finally, the construction of the user and technical manuals that will serve as a guide for
the people in charge of this system.
Keywords: Automation, Communication, Web development, Information, Systematization,
Technology.
1
INTRODUCCIÓN
En la actual situación por la que está atravesando el mundo, ha dejado en claro el modelo de
trabajo al que deben adaptarse los negocios, instituciones y organizaciones. Es aquí donde entra la
tecnología como herramienta para agilizar todas esas tareas que son necesarias.
Los Sistemas o aplicaciones para la web en la actualidad son muy utilizadas, por distintos
motivos como el ahorro en gastos y recursos en materiales de oficina, hardware y software de
tercero, además de muchos otros beneficios que conlleva trabajar con esta tecnología.
Esto hace entender que el trabajo remoto es una solución factible en estos tiempos de
distanciamiento puesto que nos permite estar en contacto y al pendiente de la información que se
esté tratando y almacenando, logrando mejorar en la organización y acceso de los datos desde
cualquier dispositivo en tiempo real.
El centro de emprendimiento, liderazgo e innovación para el desarrollo es un departamento de
la Universidad Estatal del Sur de Manabí que no tan solo realizar su trabajo dentro de la institución,
si no también brinda servicios de asesoramiento a emprendedores y organizaciones dentro del
cantón, y se ven en la gran necesidad de mejorar y automatizar ciertos procesos esenciales que se
están realizando.
Por este motivo el proyecto tiene como propósito desarrollar e implementar un sistema
informático web para automatizar los procesos administrativos y académicos del centro de
emprendimiento, liderazgo e innovación para el desarrollo, que les permita registrar y almacenar
sus tareas o trabajos en una base de datos de manera remota, logrando mejorar sus tareas y
actividades que estén realizando en los actuales momentos.
2
I. TÍTULO DEL PROYECTO
Implementación de un Sistema Informático Web para automatizar los procesos administrativos
y académicos del Centro de Emprendimiento, liderazgo e innovación para el desarrollo
3
II. PROBLEMA DE INVESTIGACIÓN
2.1. Definición del problema
En los últimos años la tecnología y el internet se han vuelto algo imprescindible en el mundo
para organizaciones e instituciones, debido al crecimiento y demanda de sus servicios, esto a su
vez genera un incremento en sus tareas, información y materiales. Ya que en los actuales
momentos es necesario contar con los beneficios que brinda sistema informático para gestionar
toda nuestra información de una manera remota, puesto que podrían presentarse ciertos problemas
como el retraso y redundancia de la información, y no se podría ofrecer un buen servicio ya que
aún se estaría realizando esas tareas que son esenciales de manera manuales.
Los sistemas informáticos en la automatización y mejora de los procesos, están comprobadas
por organizaciones en el mundo ya que ayudan a cubrir y/o solucionar un problema o una
necesidad, además que resultan útil para agilizar esos procesos u operaciones que demandan algo
más que tan solo almacenar información.
El Centro de emprendimiento, liderazgo e innovación para el desarrollo de la “Universidad
Estatal del Sur de Manabí”, en la actualidad el departamento manipula y gestiona información de
las actividades realizadas dentro y fuera de la Institución. Y se ven en la necesidad de mejorar y
automatizar esas tareas esenciales que se están llevando de manera manual, a su vez esto les está
generando ciertos retrasos en la obtención de la información, además que se estaría trastocando
mucho la información y no habría consistencia en la misma, logrando así disminuir su eficiencia
en la gestión de sus procesos académicos y administrativos. Por esta razón se ha propuesto
desarrollar un sistema web que ayude a mejorar la gestión de sus procesos que son esenciales y
necesarios automatizar como el registro y almacenamiento de emprendedores, plan de trabajo,
4
actividades de trabajo, planificaciones de asignaturas, además de poder generar reportes del
mismo.
2.2. Formulación del problema
¿Cómo la implementación de un sistema informático web mejorara los procesos administrativos
y académicos del centro de emprendimiento, liderazgo e innovación para el desarrollo de la
Universidad Estatal del Sur de Manabí?
2.3. Preguntas derivadas
• ¿Cómo el sistema informático web cumplirá con las necesidades requeridas para
automatizar los procesos administrativos y académicos del centro de emprendimiento,
liderazgo e innovación para el desarrollo?
• ¿Qué herramientas y tecnologías web se utilizarán para el desarrollar de este sistema
informático web y de qué manera ayudarán esas tecnologías?
• ¿Qué beneficio tendrá la implementación de un sistema de información web para
automatizar los procesos Administrativos y Académicos del centro de emprendimiento,
liderazgo e innovación para el desarrollo?
5
III. OBJETIVOS
3.1. Objetivo general
Desarrollar un Sistema Informático Web aplicando herramientas de desarrollo web para
automatizar los procesos administrativos y académicos del centro de emprendimiento, liderazgo e
innovación para el desarrollo.
3.2. Objetivos específicos
• Analizar requerimientos para automatizar los procesos administrativos y académicos
que se necesiten sistematizar en el centro de emprendimiento, liderazgo e innovación
para el desarrollo.
• Identificar herramientas y tecnologías de desarrollo web que ayudaran a diseñar el
sistema web que automatizara los procesos administrativa y académica.
• Diseñar un sistema web que automatice y mejore la eficiencia de los procesos
administrativos y académicos del centro de emprendimiento, liderazgo e innovación
para el desarrollo.
6
IV. JUSTIFICACIÓN
En la actualidad se está viviendo en una época donde la tecnología es una herramienta muy
necesaria para las instituciones y organizaciones de todo el mundo. Según (Aragundi Mero, 2019)
“actualmente esta necesidad tecnológica incita que las instituciones educativas cambien su manera
de tratar, manipular y guardar su información, ya que de esta manera estarían ahorrando tiempo y
recursos”.
Las gestiones administrativas y académicas en instituciones educativas según (Jarrín Ortiz &
Valerazo Vargas, 2010) “van de la mano con el acceso y la administración de la información desde
un punto de vista tecnológico, ya que cada progreso que se dentro del ámbito académico se irá
viendo reflejado en la parte tecnológica".
Según (Ortiz Ibañez & Pingo Ayala, 2019) el uso de sistemas de información para las gestiones
académicas en la actualidad son una necesidad muy esencial, ya que en toda Escuela de Educación
Superior el volumen de datos e información que manipulan va en aumento, esto causa que los
procesos que se realizan de manera manual se conviertan en tareas fastidiosas e inadecuadas.
Con lo anteriormente descrito, es necesario que el centro de emprendimiento, liderazgo e
innovación para el desarrollo de la Universidad Estatal del Sur de Manabí automatice sus procesos
tanto administrativo como académico, a fin de agilizar las tareas y trabajos que están realizando
como centro de apoyo para los emprendedores del sur de Manabí, con lo cual se estaría logrando
con este software, que exista un mejor desempeño laboral y un buen servicio a la comunidad,
Además de un mayor control y seguridad de la información, según (Ortiz Ibañez & Pingo Ayala,
2019) explica “que existe una gran diferencia al hacer los procesos manualmente que realizarlos a
través de un sistema automatizado”.
7
En fin el desarrollo de este Sistema Informático Web se hará con el propósito de automatizar
los procesos administrativos y académicos que realizan los profesionales que laboran en el centro
de emprendimiento, liderazgo e innovación para el desarrollo, haciendo uso de herramientas y
tecnologías de desarrollo web, para mejorar los procesos de registro de emprendedores, ideas de
negocio, proyectos de emprendimiento, además de poder almacenar y exportar diferentes tipos de
documentos esenciales.
8
V. MARCO TEÓRICO
5.1. Antecedentes
En el repositorio digital de la Escuela Superior Politécnica del Litoral se encontró un proyecto
de desarrollo con el tema (“Implementación de una aplicación web para la automatización de
procesos académicos y administrativos de Instituciones Educativas”) en donde los autores
(Muñoz Estrella & Ushca Pérez, 2010) exponen que:
ACADSYSTEM es una herramienta cuyo propósito general es el de brindar solución a la
problemática que se presenta al momento de administrar una Institución Educativa, los cuales en
su mayoría se derivan del excesivo trabajo manual que existe tanto en el área de secretaria como
para su personal docente, lo cual se convierte en una labor muy agotadora.
En el repositorio digital de la Universidad de Guayaquil se encontró el tema (“Propuesta
tecnológica enfocada a la automatización y gestión de calificaciones de proyectos
integradores mediante el uso de plataforma web para la carrera de ISAC”) proyecto
propuesto por (Tipán Pozo & Tufiño Baque, 2019) exponen que:
Mediante el análisis de información y requerimientos se desarrollará un diseño web, que
contenga los requerimientos consultados para el beneficio de la carrera. El sistema de gestión de
Proyectos Integradores (SIRES), es un diseño de plataforma web orientada a los procesos que
surgen en la elaboración de los Proyectos Integradores de Saberes, tales como gestión ponderativa,
gestión de seguimiento académico. El propósito del diseño web es dejar estructurados los
requerimientos consultados mediante el análisis y diseños de sistemas, ofreciendo un diseño con
interfaz amigable de fácil manipulación óptimo, para su posterior implementación.
En el repositorio digital de la Universidad Politécnica Salesiana se encontró el tema de proyecto
(“Diseño e Implementación de Sistema para el Control Académico de Calificaciones y
9
Matriculación de la Escuela de Educación Básica Fiscal ‘República de México’”) propuesto
por el autor (Casagallo Mendoza, 2019) expone que:
El diseño e implementación de este sistema para el control académico de matriculación y
calificación, es de gran ayuda y permite tener un control automatizado de la información de los
estudiantes y docentes de una institución educativa. El sistema automatizado permitirá contar con
la información de cada alumno y docente de forma organizada, segura y disponible, hará la gestión
de los diferentes procesos tanto de matriculación como de calificación lo que permitirá contar con
una organización más eficiente.
5.2. Bases teóricas
5.2.1. Aplicación web
Según (Quintana Erazo, 2012) una aplicación web “es un sistema informático en el que los
usuarios ingresan a un servidor por medio del internet o de una intranet, denominados aplicaciones
cliente servidor” (pág. 17).
5.2.2. HTML5
Según (Gauchat, 2012) explica que “HTML5 no es una nueva versión del antiguo lenguaje de
etiquetas, […], sino un nuevo concepto para la construcción de sitios web y aplicaciones en una
era que combina dispositivos móviles, computación en la nube y trabajos en red”.
5.2.3. Componentes básicos de HTML5
Según (Gauchat, 2012) esta tecnología web “provee básicamente tres características: estructura,
estilo y funcionalidad. Nunca fue declarado oficialmente, […] y la especificación de CSS3 por
completo no son parte del mismo, HTML5 es considerado el producto de la combinación de
HTML, CSS y JavaScript” (pág. 1).
5.2.4. Estructura básica de HTML5
10
Según (Gauchat, 2012) declara que “considera esta estructura básica y provee nuevos elementos
para diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador
para qué es cada sección” (pág. 11).
Ilustración 1: Estructura Básica HTML5
Fuentes: www.minkbooks.com
5.2.5. Responsive design
“El diseño adaptativo es un enfoque de creación de páginas web que hace uso de diseños
flexibles. El objetivo adaptativo es producir página web que detectan el tamaño y la orientación
de la pantalla del visitante para cambiar el diseño según corresponda” (Alpizar, 2015).
5.2.6. CSS
“CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos
del documento, como tamaño, color, fondo, bordes entre otras propiedades” (Gauchat, 2012).
5.2.7. Modelo de caja en navegadores
Según (Gauchat, 2012) “los navegadores consideran cada elemento HTML como una caja. Una
página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son
establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS”.
11
Ilustración 2: Modelo de Caja de los elementos HTML
Fuente: Heibert Ocaña (Autor)
5.2.8. JavaScript
“Es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más
conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos
sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat” (Colaboradores de MDN,
2019).
5.2.9. Bootstrap
Framework de CSS para el diseño de interfaces que ayuda en el desarrollo de sistemas y
aplicaciones para la web, que a su vez es muy utilizado, ya que nos permite construir nuestros
diseños con tan solo poner unas cuantas líneas de sus clases de CSS en nuestro código HTML
(Guajardo, 2020).
5.2.10. JQuery
Según (Gauchat, 2012) esta librería fue “diseñada para simplificar la creación de sitios web
modernos y facilita la selección de elementos HTML, la creación de animaciones y efectos, y
también controla eventos y ayuda a implementar Ajax en nuestras aplicaciones” (pág. 101).
12
5.2.11. PHP
Es un lenguaje de programación del lado del servidor muy popular y de código abierto para el
desarrollo web gracias a su simpleza, buena documentación y a su gran comunidad que siempre
está actualizando este lenguaje (Lerdorf, 2001-2021).
5.2.12. Framework
“Es producto que sirve como base para la programación avanzada de aplicaciones, que aporta
una serie de funciones o códigos para realizar tareas habituales. Por decirlo de otra manera,
framework son unas librerías de código que contienen procesos o rutinas ya listos para usar”
(Alvarez, 2011).
5.2.13. Laravel
Es un framework de PHP muy potente para el desarrollo de aplicaciones web que cuenta con
una sintaxis elegante y expresiva, el cual proporciona una estructura y un punto de partida para
crear nuestras aplicaciones, por lo cual nos permite concentrarnos en crear algo sorprendente
mientras nos preocupamos por los detalles (Taylor Otwell, 2021).
5.2.14. Patrón de diseño MVC
Este patrón de diseño fue construido con el fin de reducir el esfuerzo en la programación y
estructuración de los archivos de nuestra aplicación.
(Fernández Romero & Diaz González) según “es un paradigma que divide las partes que
conforman una aplicación en el Modelo, las Vistas y los Controladores, permitiendo la
implementación [...], garantizando así la actualización y mantenimiento del software de forma
sencilla y en un reducido espacio de tiempo” (pág. 47).
5.2.15. Visual Studio Code
13
Editor de código potente que se ejecuta en el escritorio, donde podrás programar en los
lenguajes de programación que tu prefieras, estando disponibles para las tres marcas mundiales de
sistemas operativos como Windows, MacOS y Linux (Microsoft, 2021).
5.2.16. Git
Sistema de control de versiones que te permite clasificar en varios fragmentos el desarrollo de
tu sistema, aplicación y demás con la finalidad de tener tu código ordenado (Software Freedom
Conservancy , 2020).
5.2.17. NetBeans
Según (Mendoza González) este programa “es una herramienta que se utiliza para desarrollar
aplicaciones Web, Móvil y de Escritorio para diferentes lenguajes de programación como son Java,
C++, Ruby y PHP entre otros”. En otras palabras “es un entorno de desarrollo integrado (IDE)
modular basado en estándares, escrito en el lenguaje de programación Java” (NetBeans, 2013).
5.2.18. Modelo de negocio
Para poder comprender en si sobre este concepto del cual se define a la forma de actuar de las
industrias, negocios, etc. Es primordial saber su definición, aunque de este tema existen varias
definiciones, según (Barrios, 2010) el modelo de negocio “es un conjunto de rutinas
independientes que se descubren, ajustan y matizan mediante la acción” (págs. 11-26).
5.2.19. Modelo de datos
Sobre este tema existen muchas definiciones, las cuales la definen como “conjunto de conceptos
y reglas que permiten describir su tipo o también para representar problemas que se deben
resolver” (Nevada Cabello, 2010).
5.2.20. MySQL
14
Es un programas para “Sistema de gestión de bases de datos relacionales de código abierto
(RDBMS, por sus siglas en inglés) con un modelo cliente-servidor”, que nos permite crear y
modelar nuestro modelo de negocio representado en tablas llenas de datos (Gustavo, 2020).
5.2.21. Modelo cliente-servidor
Este modelo nos da a entender que toda computadora que ejecute algún software RDBMS se le
llama cliente, en cambio se le denomina servidor cuando necesitáramos solicitar algún dato a un
servidor RDBMS que estuviéramos conectado (Gustavo, 2020).
5.2.22. Lenguaje SQL
“Es un lenguaje estándar ANSI/ISO de definición, manipulación y control de bases de datos
relacionales. Es un lenguaje declarativo: sólo hay que indicar qué se quiere hacer”. (Escofet, 2014,
pág. 4).
5.2.23. XAMPP
Es un programas de virtualización de “servidor independiente de plataforma, software libre,
que consiste principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes
para lenguajes de script: PHP y Perl”, y es muy utilizado para el despliegue local de sistemas y
aplicaciones por una gran comunidad de desarrolladores (ECURED, 2018).
5.2.24. Hipertexto
(Revilla, 2002) Afirma que hipertexto “es considerada una escritura no secuencial, ya que es
un medio informático tanto verbal como no verbal, al almacenar caracteres, imágenes y sonidos,
creando de este modo un texto multi-lineal o multi-secuencial”.
5.2.25. Servidor web
15
Según (Mendoza, 2015) un servidor web “es la tecnología encargada de manipular las páginas
web […], las páginas web generan tráfico en internet, la mayoría pertenece a empresas que brindan
servicios de alojamiento llamado hosting”.
Además tenemos otra definición sobre este mismo tema en lo que según (Chávez Conejo, 2019)
un servidor web “es una computadora conectada constantemente a internet y que aloja uno o varios
sitios web”.
5.2.26. Base de datos
Según (Stair & Reynolds, 2010) explica que “son un conjunto organizado de hechos e
información que por lo general consta de dos o más archivos de datos relacionados” (pág. 13).
5.2.27. DIA (Programa de diseño)
Es un programa informático utilizado en la creación de diagramas como para casos de uso,
diagramas de flujo, diseño de base de datos y demás, en si, es un programa fácil de utilizar
(Wikipedia, 2019).
5.2.28. Composer
Es una herramienta utilizada por los desarrolladores del lenguaje de programación PHP, la cual
sirve para gestionar las dependencias de PHP, es decir permite declarar y administrar las
bibliotecas de las cuales depende su proyecto (Adermann & Boggiano, 2015).
5.2.29. NPM
Es el manejador de paquetes más grande del mundo, es utilizado por todo los desarrolladores
de todo el mundo para compartir y tomar prestado los paquetes de ellos o de otros desarrolladores
además de muchas organizaciones que se suman en la utilización de esta herramienta (Microsoft,
2020).
16
5.3. Marco conceptual
Sistema: Conjunto de elementos o componentes que interaccionan para alcanzar un objetivo.
(Stair & Reynolds, 2010, pág. 8)
Información: Según (Stair & Reynolds, 2010) nos explican que “para ser un administrador
eficiente de cualquier área del negocio, usted debe comprender que la información constituye uno
de los recursos más valiosos de la organización. Sin embargo, a veces este término se confunde
con el de dato”. (pág. 5)
Web: la web es tan solo uno de los servicios que nos proporciona el internet (Ramos Martin &
Ramos Martin, 2011, pág. 3).
HTML: Lenguaje de marcado de hipertexto, principalmente para la web, su sintaxis se
distingue por el uso de etiquetas con nombres reservados del propio lenguaje más las propiedades
del mismo.
PHP: Lenguaje que trabaja del lado del servidor, y prácticamente el 60% de sitios en la web
están hecho con este lenguaje.
Sistema de información: Según (Ramírez Sotomayor, 2017) expone que “es importante
destacar que, la mayoría de Institutos y Universidades hacen uso de Sistemas de Información que
contribuyen en la mejora de su gestión”. (pág. 1)
Los sistemas de información se utilizan en casi todas las profesiones que uno se pueda imaginar.
Tanto los empresarios como los dueños de pequeños negocios los emplean para conseguir clientes
en todo el mundo. (Stair & Reynolds, 2010, pág. 4),
En los sistemas de información también encontramos elementos los cuales hacen claro el ciclo
por el que pasa la información como, Entrada: actividad de recabar y capturar datos,
Procesamiento: conversión o transformación de los datos en salidas útiles, Salida: producción de
17
información útil, por lo general en forma de documentos y reportes, Retroalimentación: Salida que
se utiliza para realizar cambios en la entrada o en las actividades de procesamiento. (Stair &
Reynolds, 2010, pág. 10)
Automatización: (Mejía Henao, 2019) explica que “la automatización consiste en tener a mano
una información en tiempo real que sea accesible a todo el personal involucrado en operación”.
(pág. 1)
Procesos: Los procesos son el elemento más importante y más extendido en la gestión de las
organizaciones innovadoras. Este interés por los procesos ha permitido desarrollar una serie de
técnicas relacionadas con ellos, una de ellas es automatizar los procesos. (Quilumba Vargas &
Velásquez Altamirano, 2012)
Automatización de procesos: Según (Flores, M. Lavín, Calle, & Álvarez, 2014) explican que
como resultado de su estudio “al gestionar automáticamente los procesos, definir reglas y políticas,
se pretende mejorar la cadena de valor de la institución, generando ventajas competitivas y
aumentando la productividad”.
Diseño web: Es el área encargada planificar, crear y mantener interfaces digitales de diferente
índole, ya sea para desarrollo de escritorio, móvil o web, no hay lugar en donde no se requiera
personas que dominen este tema (Rock Content, 2019).
Desarrollo web: Es el arte de construir y mantener sistema, aplicaciones y sitio para web, es el
trabajo que permite que una web tenga una apariencia increíble e impecable (Mercedes de
OpenClassrooms, 2017).
18
VI. HIPÓTESIS Y VARIABLES
6.1. Hipótesis
La automatización de los procesos administrativos y académicos aplicando herramientas de
desarrollo web, ayudaría a agilitar las tareas que se estarán llevando de manera ineficientes,
permitiendo obtener resultados más agiles y un mejor control de los trabajos que realizara el Centro
de Emprendimiento, liderazgo e innovación para el desarrollo.
6.2. Variable Independiente
Sistema Informático Web.
6.3. Variable Dependiente
Automatización de Procesos Administrativos y Académicos.
19
VII. METODOLOGÍA
Es importante saber el enfoque de tu investigación, definir el tipo de métodos, técnicas que
necesitaras para lograr tus objetivos, según (Hernández Sampieri, 2014) se puede definir a la
investigación como “un conjunto de procesos sistemáticos, críticos y empíricos que se aplican al
estudio de un fenómeno o problema” (pág. 4). Esto quiere decir que es una metodología de
investigación es estructura estándar utilizada para la recolección, ordenamiento y análisis de la
información con la cual se trabajara, permitiendo interpretar su resultado en base al tema de
investigación.
7.1. Métodos
En este apartado se identificarán los métodos que se utilizarán para cumplir con los objetos de
la investigación, entre los cuales utilizare los siguientes:
Método experimental
La investigación que se efectuara en este proyecto es de tipo experimental dado que se
desarrollara e implementar un sistema de información web para automatizar los procesos
administrativos y académicos del centro de emprendimiento, liderazgo e innovación para el
desarrollo.
Método empírico
Mediante este método se afirma que se empleara información de diferentes Repositorios
Educativos de Instituciones de Educación Superior.
Método bibliográfico
Mediante este método se afirma que se empleara información recopilada de texto, internet,
folletos y demás.
Método de campo
20
Mediante este método se afirma que se realizara un análisis de requerimientos en el centro de
emprendimiento, liderazgo e innovación para el desarrollo.
Método participativo
Mediante este método se afirma que se contara con la participación y colaboración del centro
de emprendimiento, liderazgo e innovación para el desarrollo de la Universidad Estatal del Sur de
Manabí.
7.2. Técnicas
En este apartado se identificarán las técnicas para la recolección de datos que se utilizarán para
trabajar y cumplir con los objetivos de la investigación, de los cuales utilizare las siguientes:
Observación
Con esta técnica de observación se pudo establecer que, en el Centro de emprendimiento,
liderazgo e innovación para el desarrollo, necesitaban automatizar sus procesos tanto
administrativo como académico, también esto ayudara durante el transcurso del tiempo a detectar
algún otro caso.
Entrevistas
Con esta técnica se podrá obtener información de diferentes puntos de vista de todo el personal
que labora en el Centro de emprendimiento, liderazgo e innovación para el desarrollo con el fin
obtener información precisa que ayude a identificar cual es la causa o necesidades que tienen.
Población
La población de estudios de este trabajo investigativo estará conformada por 5 personas que
laboran en el centro de emprendimiento, liderazgo e innovación para el desarrollo, y cada uno
desempeñan diferentes tareas y actividades.
Muestra
21
En el presente trabajo investigativo se utilizará la técnica de muestreo no probabilístico, ya que
se identificó el tipo de investigación que se requería para cumplir con los objetivos planteados
además de la técnica de recolección de datos. El tipo de metodología de investigación que utilizara
la presente investigación será cualitativo y como técnica para la recolección de datos se realizara
una entrevista, por motivo de que el tamaño de la población es pequeña, directamente esta
población pasa a formar parte de la muestra y esto ayudará a obtener las opiniones y experiencia
de las personas a entrevista.
7.3. Recursos
Recurso humano
✓ Tutor Académico
✓ Investigador
✓ Miembros del centro de emprendimiento, liderazgo e innovación para el desarrollo
Recursos materiales
✓ Resma de papel A4
✓ Bolígrafos
Recursos tecnológicos
✓ Ordenador portátil
✓ Servicio de Internet
✓ Programas (ofimáticos, editor de texto, IDE, diseño de imágenes)
✓ Impresiones
✓ Hosting
✓ Dominio
22
VIII. PRESUPUESTO
En el siguiente apartado se describirá la totalidad de los gastos que se realizaron para el
desarrollo e implementación de este proyecto.
A continuación en la tabla 1 se estará detallando los gastos realizados para el desarrollo de lo
propuesto.
N° Descripción Valor U. Cantidad Valor total
1 Servicio de internet $ 30,00 8 (meses) $ 240,00
2
Plan de
Hosting + Dominio
$ 75,00 1 (año) $ 75,00
3 Impresiones $ 3,50 1 $ 3,50
Total $ 318,50
Tabla 1: Presupuesto del proyecto
Elaborado por: Heibert Ocaña
23
IX. ANÁLISIS Y TABULACIÓN
En este apartado se realizó la respectiva evaluación y análisis de las entrevistas dirigidas al
personal del centro de emprendimiento, liderazgo e innovación para el desarrollo de la Universidad
Estatal del Sur de Manabí con el fin de obtener los resultados pertinentes para así justificar la
ejecución de este proyecto.
9.1. Entrevista y análisis
Pregunta N° 1: ¿Qué función cumple dentro del Centro de emprendimiento, liderazgo e
innovación para el desarrollo?
Los entrevistados especificaron el cargo y función que cumple en el departamento como
Coordinador, Secretaria, Asistente Administrativo, Analista.
Pregunta N° 2: ¿Cuáles son las actividades que usted está realizando dentro del Centro
de emprendimiento, liderazgo e innovación para el desarrollo?
Los entrevistados recalcaron que cada uno realiza diferentes actividades las cuales cada uno
tiene su grado importancia, alguna de la tareas se complementan con otras y también se realizan a
diario.
Pregunta N° 3: ¿Conoce usted que es un sistema web?
De acuerdo al criterio obtenido la mayoría de los entrevistados mencionaron de que si tienen
conocimiento de que son estos sistemas web.
Pregunta N° 4: ¿Usted utiliza o ha utilizado algún sistema web?
En esta pregunta las mayoría de los entrevistados respondieron de que si han utilizado estos
sistemas web otros no porque alguna de actividades que realizan no requieren siempre el uso de
algún sistema.
24
Pregunta N° 5: ¿Cómo considera usted que se estarían realizando los procesos
administrativos y académicos actualmente si no utilizara un sistema web?
Sería deficiente, lento, engorroso al momento de procesar los datos y luego buscar la
información con lo cual produciría un retardo causando que no se cumpla con el tiempo
establecido.
Pregunta N° 6: ¿Cree usted que en los actuales momentos es importante contar con algún
sistema web?
Los entrevistados indicaron que por su puesto es importantes ya que el tiempo y la necesidad
hoy en día obliga a tener un sistema en línea, ya que son mucho más agiles y más que todo ahorran
tiempo y materiales de oficina.
Pregunta N° 7: ¿Cómo cree usted que sería la calidad de servicio que el centro de
emprendimiento, liderazgo e innovación para el desarrollo brindaría si utilizara un sistema
web?
Se tendría muchísima más ventajas puesto que con un sistema web podrían brindar un servicio
más eficiente, se tendría un mayor alcance por el simple hecho de que seria en línea.
Pregunta N° 8: ¿Usted consideraría factible que se implemente un Sistema Web para
automatizar los procesos que se estarán efectuando en el centro de emprendimiento,
liderazgo e innovación para el desarrollo?
Los entrevistaron indicaron que si sería muy beneficioso la implementación de un sistema web
para el centro ya que por medio de esta tecnología se podría cumplir con todo los objetivos que se
plantean y se desean cumplir, entonces que más que automatizar ciertos procesos que se están
llevando en el área.
25
Pregunta N° 9: ¿Usted que procesos recomienda, que se deban automatizar en el centro
de emprendimiento, liderazgo e innovación para el desarrollo?
De acuerdo a los criterios obtenidos deberían automatizarse todos aquellos procesos que no
necesitan la presencia de la autoridad, porque en realidad existen procesos que necesitan ser
presenciales.
Pregunta N° 10: ¿De las actividades que usted realiza, que procesos recomienda que se
automaticen?
Los entrevistados dieron mención de algunas de las actividades de acuerdo al cargo que realizan
como miembros del departamento de los cuales tienen que ver con los emprendimientos, proyectos
y demás actividades que realizan en la parte académica y administrativa.
Pregunta N° 11: ¿Con que propósito se creó el centro de emprendimiento, liderazgo e
innovación para el desarrollo?
Se creó con el propósito de apoyar y preparar a todo los emprendedores de la zona sur de Manabí
Ecuador porque han notado que en el transcurso los emprendedores no consiguen tener el éxito
deseado y los emprendimientos mueran debido a que no había un centro de apoyo en donde se
puedan preparar.
26
X. CRONOGRAMA DE ACTIVIDADES
Planteamiento grafico del cronograma de actividades realizado mediante el diagrama de Gantt
en donde se muestra todas las actividades realizada para el cumplimiento de los objetivos de este
proyecto con su respectiva descripción de las actividades realizada fecha de inicio, final hasta la
culminación del mismo.
Ilustración 3: Estructura del registro de actividades realizadas
Fuente: Heibert Ocaña (Autor)
27
Ilustración 4: Diagrama de Gantt
Fuente: Heibert Ocaña (Autor)
28
XI. BIBLIOGRAFÍA
Adermann, N., & Boggiano, J. (03 de Febrero de 2015). Composer: A dependency Manager for
PHP. Obtenido de Composer: https://getcomposer.org/doc/00-intro.md
Alpizar, H. (2015). Shift e-learning. Obtenido de Shift e-learning: www.shiftelearning.com
Alvarez, M. Á. (06 de Diciembre de 2011). desarrolloweb. Obtenido de desarrolloweb:
http://desarrolloweb.com/manuales/manual-jquery.html
Aragundi Mero, J. D. (2019). Aplicacion Web para la automatizacion de los procesos del
departamento de investigacion de la Universidad Estatal del Sur de Manabi. Universidad
Estatal del Sur de Manabi. Jipijapa: Universidad Estatal del Sur de Manabi.
Barrios, M. (2010). Modelo de negocio. Universidad Americana.
Casagallo Mendoza, J. I. (2019). Diseño e Implementación de Sistema para el Control Académico
de calificaciones y matriculación de la Escuela de Educación Básica Fiscal "Republica de
Mexico". Universidad Politécnica Salesiana, Carrera de Ingenieria en Sistemas. Guayaquil:
Universidad Politécnica Salesiana.
Chávez Conejo, G. (04 de Octubre de 2019). godaddy. Obtenido de godaddy:
https://cl.godaddy.com/blog/que-es-un-sitio-web/
Colaboradores de MDN. (29 de Octubre de 2019). MDN. Obtenido de MDN:
https://developer.mozilla.org/es/docs/Web/JavaScript
Easy App Code: Expertos en desarrollo de software. (02 de Septiembre de 2020). Obtenido de
Easy App Code: https://www.easyappcode.com/patron-de-diseno-mvc-que-es-y-como-
puedo-
utilizarlo#:~:text=MVC%20es%20un%20patr%C3%B3n%20de,dentro%20de%20una%2
0misma%20clase.
29
ECURED. (15 de Julio de 2018). EcuRed conocimiento con todos y para todos. Obtenido de
ECURED: http://www.ecured.cu/XAMPP
Escofet, C. M. (2014). El Lenguaje SQL. FUOC.
Fernández Alonso , A. (29 de Noviembre de 2017). webempresa. Obtenido de webempresa:
https://www.webempresa.com/blog/cdn-wordpress.html
Fernández Romero, Y., & Diaz González, Y. (Enero-Abril de 2012). Patrón Modelo-Vista-
Controlador. Telem@tica, 11, 47-57.
Flores, A., M. Lavín, J., Calle, X., & Álvarez, E. (2014). Buscando la excelencia educativa:
Gestión de procesos académicos y administrativos en Instituciones Públicas de Educación
mediante BPM. Universidad Técnica de Ambato, Faculta de Ingeniería en Sistemas.
Ambato: Proyecto Prometeo, Senescyt. Recuperado el 21 de Septiembre de 2014
Fonticons. (s.f.). Fonticons, Inc. Obtenido de Fonticons, Inc.: https://fontawesome.com/
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JAVASCRIPT (Primera ed., Vol. I).
Barcelona, Barcelona, España: Marcombo. Obtenido de www.minkbooks.com
Guajardo, P. (22 de Mayo de 2020). Rock Content. Obtenido de rockcontent:
https://rockcontent.com/es/blog/bootstrap/
Gustavo. (04 de Noviembre de 2020). Hostinger. Obtenido de hostinger:
https://www.hostinger.es/tutoriales/que-es-mysql/
Hernández Sampieri, R. (2014). Metodologia de la investigacion. En R. Hernández Sampieri,
Metodologia de la investigacion (pág. pag 4). Mexico: McGRAW-HILL /
INTERAMERICANA EDITORES, S.A. DE C.V.
Indrashish Ghosh. (10 de Julio de 2019). uigradients. Obtenido de uigradients:
https://uigradients.com/
30
Jarrín Ortiz, M. E., & Valerazo Vargas, E. R. (2010). Desarrollo e Implementación del Sistema de
Gestion Academica y Administrativa via Web para el Colegio Modelo Politécnico. Escuela
Politécnica Nacional. Quito: Escuela Politécnica Nacional.
Laravel. (2021). Laravel. Obtenido de Laravel: https://laravel.com/docs/8.x/deployment#server-
requirements
Lerdorf, R. (2001-2021). El grupo PHP. Obtenido de El grupo PHP:
https://www.php.net/manual/es/intro-whatis.php
Limpitsouni, Katerina; Gesoulis, Aggelos;. (2021). undraw. Obtenido de undraw:
https://undraw.co/
Mejía Henao, V. (2019). La informática y su contribución a la automatización de procesos. Lupa
Empresarial, 1-2.
Mendoza González, G. (s.f.). Herramienta de Desarrollo Netbeans. Colombia: Universidad del
Norte.
Mendoza, C. (2015). Hostname. Obtenido de https://www.hostname.cl/blog/servidor-web
Mercedes de OpenClassrooms. (11 de Septiembre de 2017). OpenClassrooms. Obtenido de
OpenClassrooms: https://blog.openclassrooms.com/es/2017/09/11/que-es-el-desarrollo-
web/
Microsoft. (17 de Marzo de 2020). npm. Obtenido de npm: https://docs.npmjs.com/about-npm
Microsoft. (2021). Visual Studio Code. Obtenido de Visual Studio Code:
https://code.visualstudio.com/docs
Muñoz Estrella, B. A., & Ushca Pérez, L. Á. (2010). Implementación de una aplicación web para
la automatización de procesos académicos y administrativos de Instituciones Educativas.
31
Escuela Superior Politécnica del Litoral, Ingenieria en Ciencias Computacionales.
Guayaquil: Escuela Superior Politécnica del Litoral.
NetBeans. (11 de Octubre de 2013). NetBeans.org. Obtenido de NetBeans.org:
http://www.netbeans.org/community
Nevada Cabello, V. (2010). Introduccion a las base de datos relacionales. Madrid: Vision Libros.
Obtenido de www.visionlibros.com
Ortiz Ibañez, S. E., & Pingo Ayala, J. N. (2019). Implementación de un portal web y sistema de
información para la gestión académica de la Escuela Superior de formación Artística
Pública "Ernesto López Mindreau" - Chiclayo. Universidad Nacional Pedro Ruiz Gallo.
Lambayeque: Universidad Nacional Pedro Ruiz Gallo.
Pérez Jiménez, J. D. (20 de Enero de 2019). OpenWebinars S.L. Obtenido de OpenWebinars S.L.:
https://openwebinars.net/blog/que-es-html5/
Pérez Jiménez, J. D. (20 de Enero de 2019). OpenWebinars S.L. Obtenido de OpenWebinars S.L.:
https://openwebinars.net/blog/que-es-css3/
Pérez Valdés, D. (03 de Julio de 2007). maestrosdelweb. Obtenido de maestrosdelweb:
http://www.maestrosdelweb.com/que-es-javascript/
Perez, M. (20 de Octubre de 2020). conceptodefinicion. Obtenido de conceptodefinicion:
https://conceptodefinicion.de/documento/
Quilumba Vargas, V. M., & Velásquez Altamirano, G. A. (2012). Propuesta de automatización
del proceso de graduación de la Faculta de Ciencias Administrativas de la Escuela
Politécnica Nacional utilizando la plataforma Auraportal. Escuela Politécnica Nacional,
Departamento de Ingenieria Empresarial. Guayaquil: Escuela Politécnica Nacional.
32
Quintana Erazo, P. D. (2012). Automatización del proceso de ordenes de trabajo para pymes por
medio de un sistema web para la gestion de talleres automotrices (SGTA). Escuela
Politécnica del Ejército, Departamento de Ciencias de la Computación. Sangolqui: Escuela
Politécnica del Ejército.
Ramírez Sotomayor, J. A. (2017). Implemetacion de un Sistema web para mejorar el proceso de
gestión Académica en las Escuelas de la PNP. Universidad Peruana de la Américas,
Departamento de Ingenieria de Computación y Redes. Lima: Universidad Peruana de la
Américas.
Ramos Martin, A., & Ramos Martin, J. (2011). Aplicaciones Web (Quality, SGE ed.). Madrid,
España: Parainfo. Obtenido de
https://books.google.com.ec/books?hl=es&lr=&id=LXs3YlMoeNgC&oi=fnd&pg=PA1&
dq=aplicaciones+web&ots=SJQI4qrwPQ&sig=SzKAGboriYvhIMjjxvpB5W42dB8&redi
r_esc=y#v=onepage&q=aplicaciones%20web&f=false
Reifman, J. (30 de Mayo de 2015). Envato Pty Ltd. Trademarks and brands are the property of
their respective owners. Obtenido de Envato:
https://code.tutsplus.com/es/tutorials/introduction-to-mailtrap-a-fake-smtp-server-for-pre-
production-testing--cms-23279
Revilla, A. C. (2002). Lectura y escritura en el hipertexto. Universidad San Pablo-CEU de Madrid,
Universidad San Pablo-CEU de Madrid. Madrid: Universidad San Pablo-CEU de Madrid.
Rock Content. (23 de Julio de 2019). El blog Marketing de Contenidos y Rock Content. Obtenido
de Rock Content: https://rockcontent.com/es/blog/diseno-web/
Software Freedom Conservancy . (2020). Git. Obtenido de Git: https://git-scm.com/
33
Stair, R., & Reynolds, G. (2010). Proncipios de sistemas de informacion (9 ed.). Mexico, Mexico:
CENGAGE Learning. Obtenido de
https://d1wqtxts1xzle7.cloudfront.net/42944694/241015829-Principios-de-Sistemas-de-
Informacion-Un-Enfoque-Administrativo.pdf?1456164500=&response-content-
disposition=inline%3B+filename%3DPrincipios_de_Sistemas_de_Informacion_Un.pdf&
Expires=1600054639&Sign
Tailor Brands. (2020). Tailor Brands. Obtenido de Tailor Brands: Creador de Logos:
https://www.tailorbrands.com/es/logo-
maker?utm_source=google&utm_medium=cpc&utm_campaign=10503727401&utm_co
ntent=99147953890&utm_term=&gclid=CjwKCAiAxp-
ABhALEiwAXm6IycYqYxcQU0hSVtFW1kGfk1nA0CwMhGBAziiJ0NJodeUzgyzIFV
9DBBoCZicQAvD_BwE
Taylor Otwell. (2021). Laravel LLC. Obtenido de Laravel LLC: https://laravel.com/docs/8.x
Tipán Pozo, V. O., & Tufiño Baque, B. R. (2019). Propuesta tecnológica enfocada a la
automatización y gestión de calificaciones de proyectos integradores mediante el uso de
plataforma web para la carrera de ISAC. Universidad de Guayaquil, Ingeniería en
Sistemas Administrativos Computarizados. Guayaquil: Universidad de Guayaquil.
V. S. (27 de Abril de 2016). AEURUS. Obtenido de AEURUS:
http://www.aeurus.cl/blog/ventajas-de-los-sistemas-
web/#:~:text=Se%20denomina%20sistema%20web%20a,una%20intranet%20mediante%
20un%20navegador.
Wikipedia. (30 de Agosto de 2019). Wikipedia.org. Obtenido de Wikipedia:
https://es.wikipedia.org/wiki/Dia_(programa)
34
XII. PROPUESTA
12.1. Titulo
Implementación de un sistema informático web para automatizar los procesos administrativos
y académicos del centro de emprendimiento, liderazgo e innovación para el desarrollo.
12.2. Justificación
Previo a los resultados obtenidos del análisis de las entrevistas realizadas a los miembros del
centro de emprendimiento, liderazgo e innovación para el desarrollo en donde se evidencia la
necesidad tecnológica que presentan en esta época de pandemia al ser un centro de apoyo para
emprendedores del sur de Manabí.
Quienes laboral están necesitados de un sistema que les brinde la facilidad de poder realizar sus
tareas y actividades sin importar del lugar en donde se encuentren y del dispositivo o tecnología
que utilicen para poder realizar sus funciones laborales, ya que los mismos miembros afirman que
al no hacer uso de estas tecnologías no podrán realizar sus tareas de manera eficiente y eso sería
algo muy engorroso que no quieren pasar.
Es por esto que mediante el sistema web a desarrollar e implementar sería posible solucionar
esta necesidad que está presentando el centro de emprendimiento, liderazgo e innovación para el
desarrollo, puesto que dicho sistema web se adapta perfectamente a los requerimientos tanto en el
manejo y manipulación de los datos logrando mejorar su ambiente de trabajo.
12.3. Objetivos
12.3.1. Objetivo General
35
Implementar un Sistema Informático Web aplicando herramientas de desarrollo web para
automatizar los procesos administrativos y académicos del centro de emprendimiento, liderazgo e
innovación para el desarrollo.
12.3.2. Objetivos específicos
• Diseñar una base de datos de acuerdo a los requerimientos y necesidades del centro de
emprendimiento, liderazgo e innovación para el desarrollo.
• Aplicar las herramientas y tecnologías de desarrollo web para el diseño del sistema web
adaptable y funcional para los usuarios.
• Implementar el sistema web en un hosting que cumpla con los servicios, recursos y
soporte necesario para las tecnologías utilizadas.
12.4. Factibilidad de su aplicación
12.4.1. Análisis general
En base a los análisis realizados en el presente proyecto que tiene como título “Implementación
de un sistema informático web para automatizar los procesos administrativos y académicos del
centro de emprendimiento, liderazgo e innovación para el desarrollo” de la Universidad Estatal del
Sur de Manabí, el cual obtuvo un alto grado aceptación por parte de los entrevistados. Se concluye
que este proyecto resulta beneficioso y factible conforme al análisis de los resultados obtenidos de
las entrevistas realizadas a los miembros 5 que conforman el centro de emprendimiento, liderazgo
e innovación para el desarrollo de la Universidad Estatal del Sur de Manabí, con lo cual queda
determinado que requieren y necesitan de un sistema que les permita mejorar su forma de trabajo
y a su vez automatizar sus procesos como centro de emprendimiento.
12.4.2. Factibilidad técnica
A nivel técnico el proyecto es factible por lo siguiente:
36
Los equipos informáticos deben cumplir con ciertas especificaciones mínimas ya que es sistema
web, es compatible con cualquier versión de sistemas operativos ya sea de 32 o 64 bits, como
mínimo 2GB de memoria RAM, además de contar con navegadores actualizados como Google
Chrome o Mozilla Firefox y lo más importante tener conexión a internet.
Puede ser accedido desde cualquier sistema operativo ya sea Linux, Windows, Mac OS, aparte
en función al desarrollo del sistema he tomado en cuenta el uso del framework para PHP Laravel
en su última versión actualmente la 8, ya que al ser un framework cualquier profesional que haya
trabajado con esta herramienta podrá realizar cambios en este proyecto una vez terminado.
Para el alojamiento del sistema, el servidor web debe contar con la última versión de PHP y las
extensiones que requiere el framework laravel en su versión 8, además de soporte para bases de
datos MySQL.
12.4.3. Factibilidad operacional
A nivel operacional el proyecto es factible por lo siguiente:
Una vez el sistema ya en producción, es decir, ya estar operativo en internet podrá ser accedido
de manera online desde cualquier dispositivo y lugar en donde se tenga una conexión a internet y
un navegador, y estará operativa las 24 horas aparte que será funcional para los miembros del
centro de emprendimiento, liderazgo e innovación para el desarrollo, con la cual podrán realizar
sus actividades tanto dentro como fuera de la Universidad Estatal del Sur de Manabí.
Cuenta con un sistema de roles y permisos que le permitirá al usuario administrador poder darle
ciertas funcionalidades y permisos a los usuarios nuevos que valla a crear y que posteriormente
accederán al sistema. Con lo cual tendrá un mayor control de las acciones y funciones del software,
además que será un sistema multiplataforma ya que se podrá acceder a través de ordenadores
37
portátiles o de escritorio, Smartphone y Tablet, gracias a que será adaptable para cualquier tipo de
resolución.
El desarrollo de este software es a la medida, ya que cuenta con las herramientas y
funcionalidades necesarias para que los profesionales del centro de emprendimiento, liderazgo e
innovación para el desarrollo puedan realizar sus tareas y actividades de una manera automatizada,
ya que el sistema les permitirá tener toda su información almacenada y organizada logrando
mejorar el desempeño laboral independientemente de donde se encuentren.
12.4.4. Factibilidad económica
A nivel económico el proyecto es factible por lo siguiente:
Las herramientas y tecnologías utilizadas para el desarrollo son open source, que quiere decir
son de uso gratuito y no requiere la compra de ninguna licencia de pago, como framework laravel,
bootstrap, librerías sweetalet, chart y visual studio code como entorno de desarrollo.
Con lo del servicio de alojamiento, existen en el mercado muchas empresas que brindan estos
servicios hosting más dominio que son ofertados a diferentes precios y características dependiendo
del paquete y las necesidades del proyecto, por tanto, para la adquisición de un servicio de estos,
se tiene que tener en consideración los requerimientos del framework laravel con la cual fue
desarrollado este sistema web.
En fin con todo los requerimientos mencionados, se puede evidenciar que el desarrollo e
implementación del sistema informático web es expresamente factible tanto en lo técnico,
operacional y económico gracias a que los dispositivos y equipos no requieren de grandes
características, solo es necesario tener un navegador para poder acceder al sistema y lo más
importante tener una conexión a internet para su correcto funcionamiento, con lo cual su uso es
muy factible, ahorrándonos así en materiales de oficina.
38
Beneficios
La implementación del sistema web aplicando las tecnologías y herramientas del desarrollo web
trae muchos beneficios los cuales a continuación serán mencionados:
Beneficios tangibles: Estos beneficios son contribuidos por el sistema web, los cuales se dieron
lugar en base a los siguientes aspectos:
• Automatización de procesos.
• Reducción de costos en materiales de oficina, espacio.
• Permitir realizar tareas por teletrabajo.
Beneficios intangibles: Estos beneficios del sistema web son los siguientes:
• Generar reportes (documentos, fichas).
• Interfaz amigable y fácil de manejar.
• Reducción en la duplicación de datos e información.
• Flexibilidad y rapidez al manipular la información
12.5. Descripción
Por medio de este apartado se conocerá los resultados que se lograron de esta investigación, de
los beneficios que trae el uso del Sistema Web, además de conocer sobre su funcionamiento. Este
sistema refleja lo maravilloso que es el desarrollo de sistemas u aplicaciones para la web con las
tecnologías y herramientas del momento, tanto para desarrollo del Front-end como para el Back-
end, ya que nos permiten construir proyectos de una manera sencilla, puesto que existen estándares
para su uso, además que cuentan una comunidad de profesionales por detrás que siempre están
mejorando estas herramientas.
El uso de estas tecnologías permitió a que se cumplan el propósito principal de este proyecto
que es de automatizar los procesos y sobre todo el de ayudar a agilizar todas esas tareas que
39
deberían ser automatizadas, logrando que el usuario pueda registrar y almacenar su información
en una base de datos que servirá de respaldo y podrán acceder a ellos desde cualquier dispositivo
con acceso a internet.
Este sistema web está desarrollado con Framework Laravel y Javascript, cuenta con módulos
que serán administrados bajo un sistema de roles y permisos, el cual permitirá al usuario
administrador tener un mayor control sobre las acciones que puedan realizar los demás usuarios
dentro de mismo, además de contar con una protección contra ataques de falsificación de
solicitudes entre sitios (CSRF) el cual trae por defecto el Framework Laravel.
12.5.1. Identificación de rol (actor) principal y sus tareas
A continuación, se describirán las tareas del rol principal del Sistema web:
Ilustración 5: Rol “Super admin”
Fuente: Heibert Ocaña (Autor)
Rol: Super Admin
40
Descripción: Este usuario es el encargado de administrar y asignar todas las acciones
y funcionalidades a los diferentes usuarios que estén registrados para
que puedan realizar sus respectivas tareas. Este usuario podrá controlar
las acciones que realizan los demás usuarios en los diferentes módulos
del sistema, como también el acceso al mismo. Todo esto es posible
gracias al sistema de roles y permisos desarrollados
Tareas: Gestionar todo los módulos del sistema (crear, editar, eliminar,
consultar, revisar, visualizar y exportar la información) como el de
actividades, plan de trabajo, planificación de asignaturas y
emprendedores, pero principalmente se ocupara de los módulos de
usuarios, roles y permisos.
Tabla 2: Rol "Super admin"
Fuente: Heibert Ocaña (Autor)
12.5.2. Casos de uso y descripción
En esta sección se explicará el caso de uso principal para acceder a la aplicación, el cual será
descrito en una serie de pasos. En conjunto con las acciones principales del autor u encargado de
controlar el sistema, y esto lo veremos a continuación.
Caso de uso
Ilustración 6: Caso de uso - Primer ingreso al sistema "Usuario registrado"
41
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para ingresar al sistema
Caso de uso: Primer ingreso al sistema “Usuario registrado”
Flujo básico: Descripción:
✓ El sistema muestra los campos usuario y contraseña.
✓ El usuario ingresa sus credenciales (nombre de usuario o correo
electrónico y la contraseña).
✓ El sistema valida y verifica los datos ingresados.
✓ El sistema arroja una alerta a las credenciales incorrectas o
inexistentes.
✓ El usuario con credenciales correctas y con autorización, es redirigido
a un formulario para ingresar su información de perfil, hasta que no
complete este registro no podrá entrar ingresar sistema.
✓ Completa su información e ingresa al sistema donde podrá acceder a
las tareas asignadas en los distintos módulos existentes.
Tabla 3: Caso de uso - Primer ingreso al sistema "Usuario registrado"
Fuente: Heibert Ocaña (Autor)
Caso de uso
Ilustración 7: Caso de uso - Ingreso al sistema “Usuario con rol y permisos”
42
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para ingresar al sistema
Caso de uso: Ingreso al sistema “Usuario con rol y permisos”
Flujo básico: Descripción:
✓ El sistema muestra los campos usuario y contraseña.
✓ El usuario ingresa sus credenciales (nombre de usuario o correo
electrónico y la contraseña).
✓ El sistema valida y verifica los datos ingresados.
✓ El sistema arroja una alerta a las credenciales incorrectas o
inexistentes.
✓ El usuario con credenciales correctas y con autorización, ingresa al
sistema podrá acceder a su información de perfil y demás tareas
asignadas en los distintos módulos existentes.
Tabla 4: Caso de uso - Ingreso al sistema “Usuario con rol y permisos”
Fuente: Heibert Ocaña (Autor)
Caso de uso
Ilustración 8: Caso de uso - Ingreso al sistema “Usuario sin rol y permisos”
Fuente: Heibert Ocaña (Autor)
43
A continuación, se describe los pasos para ingresar al sistema
Caso de uso: Ingreso al sistema “Usuario sin rol y permisos”
Flujo básico: Descripción:
✓ El sistema muestra los campos usuario y contraseña.
✓ El usuario ingresa sus credenciales (nombre de usuario o correo
electrónico y la contraseña).
✓ El sistema valida y verifica los datos ingresados.
✓ El sistema arroja una alerta a las credenciales incorrectas o
inexistentes.
✓ El usuario con credenciales correctas y con autorización, ingresa al
sistema podrá acceder a su información de perfil pero no podrá hacer
ninguna otra acción ya que no cuenta con un rol y permisos que le
permita realizar alguna tarea en los distintos módulos existentes.
Tabla 5: Caso de uso - Ingreso al sistema “Usuario sin rol y permisos”
Fuente: Heibert Ocaña (Autor)
Caso de uso
44
Ilustración 9: Caso de uso - Recuperación de contraseña para el acceso al sistema
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para la recuperación de contraseña
Caso de uso: Recuperación de contraseña para el acceso al sistema.
Flujo básico: Descripción:
✓ El usuario deberá ingresar el correo electrónico de su cuenta, el sistema
consultará si existe un usuario con el correo ingresado.
✓ Si existe ese correo asociado a un usuario, el sistema automáticamente
enviara a ese correo una plantilla con las instrucciones respectivas para
45
aplicar los cambios o actualización de la contraseña, sobrescribiendo
así la anterior que fue olvida.
✓ La plantilla enviada al correo del usuario que solicito un recupera su
cuenta tendrá un enlace a un sitio protegido y que estará disponible el
acceso hasta más tardar 1 hora.
✓ El sitio tendrá un formulario en donde deberá ingresar la una nueva
contraseña y confirmarla llenando el siguiente campo, una vez que
haya enviado la petición, se validaran los datos y si todo está correcto,
el sitio redirigirá al usuario dentro del sistema.
✓ Caso contrario que no exista el correo ingresado mostrara un mensaje
por pantalla de que no existe ningún usuario que tenga asociado dicha
dirección.
Tabla 6: Caso de uso - Recuperación de contraseña para el acceso al sistema
Fuente: Heibert Ocaña (Autor)
A continuación, veremos el proceso que se realizaría antes de crear una nueva cuenta de usuario.
Caso de uso
Ilustración 10: Caso de uso - Creación de permisos
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para la creación de permisos
46
Caso de uso: Creación de permisos
Flujo básico: Descripción:
✓ El usuario con permisos para crear y navegar en la interfaz principal
del módulo, se redirige al formulario.
✓ La interfaz del sistema muestra los campos a completar (nombre y
descripción del permiso).
Nota: Al crear un nuevo permiso, este deberá también estar aplicado
también en el código fuente para que funcione.
Tabla 7: Caso de uso - Creación de permisos
Fuente: Heibert Ocaña (Autor)
Caso de uso
Ilustración 11: Caso de uso - Creación de roles
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para la creación de roles
Caso de uso: Creación de roles
Flujo básico: Descripción:
47
✓ El usuario con permisos para crear y navegar en la interfaz principal
del módulo, se redirige al formulario.
✓ La interfaz del sistema muestra los campos a completar (nombre del
rol) y deberá asignar los respectivos permisos que crea conveniente.
Nota: El módulo de roles depende totalmente de los recursos y
configuraciones del módulo permisos.
Tabla 8: Caso de uso - Creación de roles
Fuente: Heibert Ocaña (Autor)
Caso de uso
Ilustración 12: Caso de uso – Creación de cuentas de usuarios
Fuente: Heibert Ocaña (Autor)
A continuación, se describe los pasos para crear una cuenta de usuario
Caso de uso: Creación de cuentas de usuarios
Flujo básico: Descripción:
48
✓ El usuario con permisos para crear y navegar en la interfaz principal
del módulo, se redirige al formulario.
✓ La interfaz del sistema muestra los campos a completar (correo,
nombre de usuario y contraseña), campo de opción múltiple para
seleccionar los roles y el de estado de la cuenta (Activa o inactiva) la
cual permitirá el acceso al sistema.
✓ El sistema verifica y valida la información ingresada, posteriormente
notificara vía email al usuario recién creado, enviándole una plantilla
con sus respectivas instrucciones para iniciar sesión.
Nota: El módulo de usuarios depende totalmente de los recursos y
configuraciones tanto módulo de roles como el de permisos.
Tabla 9: Caso de uso – Creación de cuentas de usuarios
Fuente: Heibert Ocaña (Autor)
Proceso general de uso del sistema propuesto
49
Ilustración 13: Proceso general de uso del sistema propuesto
Fuente: Heibert Ocaña (Autor)
12.6. Desarrollo e implementación
En este apartado se detallarán todos los procesos que se realizaron para desarrollar el sistema
web hasta su posterior implementación en la web. Cabe recalcar que el sistema desarrollado será
desplegado en un servidor compartido (SO Linux) de la empresa Dongee, adquiriendo el plan
personal el cual cuenta con los recursos y servicios necesarios para su buen funcionamiento.
12.6.1. Diagrama etapas de desarrollo del proyecto
50
Ilustración 14: Diagrama etapas de desarrollo del proyecto
Fuente: Heibert Ocaña (Autor)
12.6.2. Descripción del diagrama de etapas
Etapa 1: Análisis
En la etapa de análisis cabe recalcar que es muy importante en todo proyecto, debido a que es
donde se realizan los primeros estudios de situación, y se dan a notar los problemas o necesidades.
Es por ello que como primer paso se realiza un análisis general del área o lugar a investigar en este
caso el centro de emprendimiento, liderazgo e innovación para el desarrollo. Cuyo análisis es
necesario ya que permitirá obtener como resultado cuales son los problemas o necesidades que
habría que darle una solución.
• Opinión institucional
Este primer punto se basa en la recopilación de criterios personales realizando una investigación
cualitativa, en donde será importante conocer el interés que tienen los miembros del centro sobre
51
la implementación del sistema informático web y de lo beneficioso que sería tener a su cargo esta
tecnología, todo esto se lo logro utilizando la técnica de la entrevista.
• Interpretación de resultado
Este apartado se basa ya en el análisis e interpretación de los resultados obtenidos previo a una
entrevista ya realizada en donde se obtuvo variedad de información o respuesta por parte de los
entrevistados. Mediante la técnica aplicada se pudo deducir las posibles soluciones o
características necesarias con la cual cubrir todas las necesidades a la problemática planteada.
Etapa 2: Desarrollo
• Análisis de requerimientos
Este punto se basa ya en la clasificación de los datos ya una vez de haberlos analizados e
interpretados, para posteriormente ya llevar a cabo la construcción del producto a desarrollar en
base a los requerimientos y necesidades que se hayan obtenido en la investigación. Ya que aquí es
donde podremos visualizar y analizar de forma correcta la realidad que presenta una institución,
en este caso el centro de emprendimiento, liderazgo e innovación para el desarrollo.
• Diseño y desarrollo del sistema
En este punto ya después de un largo periodo de obtención de información, análisis y
clasificación de datos aplicando técnicas de investigación como la entrevista y una observación
directa a los sucesos, llega ya la etapa de desarrollo que es en donde se le da vida al producto, aquí
es donde se le dará solución a los problemas y el cumplimiento a los requerimientos del sistema
web mediante la utilización de distintas herramientas y tecnologías, para el desarrollo del
modelado de la base de datos, utilización de lenguajes y técnicas de programación, framework,
etc. Este trabajo normalmente se lo divide en dos grandes grupos que es la parte del diseño y la
operacional, con lo cual es indispensable y necesario para que un sistema informático tenga un
52
buen funcionamiento y rendimiento. Para ello es necesario cumplir con las necesidades o
requerimientos ya planteados con los cuales se pretende resolver con el diseño y desarrollo de este
sistema web.
Etapa 3: Implementación
• Determinación de hosting y servicios
Este punto trata de la selección de estos proveedores de servicio de alojamiento hosting y
servicio, debido a que nuestro sistema web depende principalmente de las características que tenga
el paquete de servicios de los proveedores o empresas de alojamiento de sistemas o aplicaciones
en la nube ya que si no cuenta con los requisitos necesarios el sistema no funcionaría de manera
correcta a su 100% como es debido por ende es necesario verificar que el hosting tenga las
características necesarias. Principalmente como base debe tener soporte a base de datos MySQL,
PHP en su última versión soportada por el framework laravel en su versión 8 y contar con un
almacenamiento mínimo de unos 5GB o más preferiblemente, candado de seguridad SSL, copia
de seguridad automática y sobre todo que ofrezcan un servicio de soporte técnico las 24 horas para
atender cualquier inconveniente, ya con todo esto se estaría asegurando su buen funcionamiento y
rendimiento.
• Prueba operativa en producción
Este punto ya es proceso final de cualquier sistema o aplicación para la web, es aquí en esta
etapa donde se espera que nuestro sistema cumpla con todas las expectativas propuestas y tenga
un desempeño funcional del 100%, que se obtuvo en las pruebas de local cuando estaba en etapa
de desarrollo. Es por ello que es necesario probar nuevamente nuestro sistema desplegado ya en
producción para poder encontrar alguna falla y poder corregirla antes de enseñársela al usuario
final.
53
En necesario expresar que gracias a estas 3 etapas como son la de análisis, desarrollo e
implementación se ha logrado realizar este proyecto el cual consiste en la “Implementación de un
sistema informático web para automatizar los procesos administrativos y académicos del centro
de emprendimiento, liderazgo e innovación para el desarrollo” de la Universidad Estatal del Sur
de Manabí.
Cabe recalcar que este sistema web cuenta con una protección contra ataques de falsificación
de solicitudes entre sitios (CSRF), dándole así una mayor protección y seguridad, además de varias
funcionalidades orientada a las necesidades que tiene el centro de emprendimiento, liderazgo e
innovación para el desarrollo, como un diseño amigable y fácil de intuir, administrar y controlar
para que al usuario pueda adaptarse rápidamente a sus herramientas para el trabajo, potenciando
la tareas de registro de datos, facilitando la labor del profesional y asegurando la redundancia y
perdida de información (proyectos, clientes, contactos, etc.), con lo cual se estaría promoviendo
un buen ambiente más amigable y sistematizado permitiendo el teletrabajo desde cualquier lugar
de donde se encuentren y los más importante desde cualquier dispositivo que cuente con conexión
a internet.
12.6.3. Tecnologías y herramientas utilizadas para su desarrollo
Para el desarrollo del sistema se utilizó distintas tecnologías y herramientas tanto para la
programación del front-end como del back-end los cuales fueron fundamental para la
estructuración de este sistema informático. A continuación, se detallarán las tecnologías y
herramientas utilizadas:
Visual Studio Code: Editor de código potente que se ejecuta en el escritorio, donde podrás
programar en los lenguajes de programación que tu prefieras, estando disponibles para las tres
marcas mundiales de sistemas operativos como Windows, MacOS y Linux (Microsoft, 2021).
54
Git: Sistema de control de versiones que te permite clasificar en varios fragmentos el desarrollo
de tu sistema, aplicación y demás con la finalidad de tener tu código ordenado (Software Freedom
Conservancy , 2020).
➢ Para el fron-tend
HTML5: Estándar que sirve para definir la estructura y el contenido de una página Web (Pérez
Jiménez, OpenWebinars S.L., 2019).
CSS: Lenguaje de diseño gráfico que permite definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado (Pérez Jiménez, OpenWebinars S.L., 2019).
Javascript: Según (Pérez Valdés, 2007) “es un lenguaje con muchas posibilidades, utilizado
para crear pequeños programas que luego son insertados en una página web y en programas más
grandes, orientados a objetos mucho más complejos.”
NPM: manejador de paquetes con una gran fuente de bibliotecas de código libre utilizada tanto
para el lado del cliente y en la actualidad para el lado del servidor (Microsoft, 2020).
CDN (Content Delivery Network): Un conjunto de servidores distribuidos por todo el planeta
y conectados entre ellos a través de Internet (Fernández Alonso , 2017). De los cuales se hacen uso
los siguientes CDN de Javascript: Toastr, SweetAlert2, BootStrap, Popper además de JQuery.
Bootstrap: Framework de CSS para el diseño de interfaces que ayuda en el desarrollo de
sistemas y aplicaciones para la web, que a su vez es muy utilizado, ya que nos permite construir
nuestros diseños con tan solo poner unas cuantas líneas de sus clases de CSS en nuestro código
HTML (Guajardo, 2020).
Tailor Brands (Sitio web): Sistema que permite diseñar el logo de tu marca de una manera
fácil y profesional con tan solo hacer unos cuantos clicks, sin la necesidad de algún conocimiento
sobre diseño, todo esto gracias a su algoritmo de IA de diseño de logos (Tailor Brands, 2020).
55
Uigradients (Sitio web): Sistema que permite crear fondos multicolores para tus sitios,
aplicaciones o sistemas web, tan solo debes combinar colores que prefieras para después copiar su
código css y pegarlo en tus proyectos (Indrashish Ghosh, 2019).
Undraw (Sitio web): Sitio que ofrece un sin número de imágenes a color para utilizar de
manera gratuita y como queramos en nuestros sistemas, aplicaciones y demas (Limpitsouni,
Katerina; Gesoulis, Aggelos;, 2021).
Fontawesome (Sitio web): Sitio que ofrece un sin número de iconos y logos sociales
vectoriales para utilizar en nuestros sistemas, aplicaciones y demas (Fonticons, s.f.).
➢ Para el back-end
Mailtrap: Es un servidor SMTP falso que proporciona herramientas para que los equipos de
desarrolladores puedan probar, ver y compartir correos electrónicos desde los entornos o
plataformas que estén desarrollando, y su uso es gratuito (Reifman, 2015).
PHP: Es un lenguaje de programación del lado del servidor muy popular y de código abierto
para el desarrollo web gracias a su simpleza, buena documentación y a su gran comunidad que
siempre está actualizando este lenguaje (Lerdorf, 2001-2021).
Composer: es un manejador de paquetes para PHP el cual nos permite instalar la dependencia
de los demás desarrolladores de este lenguaje (Adermann & Boggiano, 2015).
Laravel: Framework de PHP muy potente para el desarrollo de aplicaciones web que cuenta
con una sintaxis elegante y expresiva, el cual proporciona una estructura y un punto de partida para
crear nuestras aplicaciones, por lo cual nos permite concentrarnos en crear algo sorprendente
mientras nos preocupamos por los detalles (Taylor Otwell, 2021).
Servidor local Xampp: Es un programas de virtualización de “servidor independiente de
plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor
56
Web Apache y los intérpretes para lenguajes de script: PHP y Perl”, y es muy utilizado para el
despliegue local de sistemas y aplicaciones por una gran comunidad de desarrolladores (ECURED,
2018).
MySql: Es un programas para “Sistema de gestión de bases de datos relacionales de código
abierto (RDBMS, por sus siglas en inglés) con un modelo cliente-servidor”, que nos permite crear
y modelar nuestro modelo de negocio representado en tablas llenas de datos (Gustavo, 2020).
Dia (Programa de diseño): Es un programa informático utilizado en la creación de diagramas
como para casos de uso, diagramas de flujo, diseño de base de datos y demás, en sí, es un programa
fácil de utilizar (Wikipedia, 2019).
➢ Documentación o reporte
Fichas de registro: son uno de los métodos de recolección utilizados, los cuales posteriormente
serán almacenados en la base de datos de acuerdo a su tipo o categoría con lo cual se puede
clasificar su información y hace que su consulta y acceso sea más rápida facilitando el trabajo del
personal a cargo.
Documentos: Es el método de recolección que encontramos impreso en algún tipo de papel
que da fe de un suceso o confirma alguna realización de acciones (Perez, 2020).
12.6.4. Arquitectura de sistema del proyecto
El sistema será desarrollado en base al patrón de diseño MVC que se basa en tres componentes,
que se basan en el manejo de los modelos, vistas y controladores.
57
Ilustración 15: Arquitectura del sistema del proyecto
Fuente: (Easy App Code: Expertos en desarrollo de software, 2020)
12.6.5. Estructura de archivos del proyecto
Para el desarrollo del sistema será utilizado como base la estructura de archivo que nos provee
el framework laravel en su versión 8, la cual será creada vía composer y solamente se tendría que
espera a que se instalen todas las dependencias del proyecto. Al crear una nueva aplicación de
laravel, ya este proyecto lo tendremos con la configuración que viene por defecto, y en su mayoría
solamente se requiere completar algunas variables globales del archivo .env que se encuentra en
la raíz del proyecto.
58
Ilustración 16: Estructura de carpetas y archivos del proyecto
Fuente: Heibert Ocaña (Autor)
12.6.6. Estructura y diseño del diagrama entidad relación
En este apartado se mostrará mediante imágenes la estructura de la base de datos con sus
respectivas entidades creadas para este proyecto.
Ilustración 17: Estructura física de entidades de base de datos MySQL en phpMyAdmin
Fuente: Heibert Ocaña (Autor)
59
Ilustración 18: Diseño físico del diagrama E-R de la base de datos
Fuente: Heibert Ocaña (Autor)
60
12.6.7. Diseño y descripción del producto propuesto
En esta sección se detallará como se desarrolló esta propuesta de diseño adaptable.
Logotipo: En el presente sistema se creó un logotipo que describa a la entidad y que valla en
armonía con el color de fondo y fuentes de la interfaz. Para la creación de este logotipo se utilizó
el servicio de creador de logo que ofrece la plataforma de TailorBrands que con tan solo uno
cuantos clics podrán tener varios diseños de tus marcas o productos favoritos. En la siguiente
ilustración 10 se muestra el diseño del logotipo terminado.
Ilustración 19: Diseño del logotipo del sistema - CEMLID
Fuente: Heibert Ocaña (Autor)
Diseño adaptable: El diseño de las diferentes interfaces del sistema cumple con el objetivo
propuesto, el cual es que desde cualquier dispositivo que tenga una conexión a internet y cuente
con un navegador, el usuario pueda acceder a esta aplicación sin importar la resolución del
dispositivo. Además, que por el diseño de sus interfaces lo hace muy intuitivo y fácil de utilizar.
Todo esto es gracias a las buenas practicas aplicadas en el diseño y desarrollo del aplicativo. En la
siguiente ilustración se muestra una de las vistas del sistema en las distintas tecnologías de
telecomunicación más utilizadas.
61
Ilustración 20: Interfaces del sistema adaptado a diferentes resoluciones y dispositivos
Fuente: Heibert Ocaña (Autor)
12.6.8. Interfaces principales del sistema
En este apartado encontraremos unas series de ilustraciones indicando el diseño de las interfaces
desarrolladas, con el propósito mostrar lo que se ha realizado, cabe recalcar que la información
que pueda en las ilustraciones, son de prueba.
62
Ilustración 21: Interfaz - Inicio de sesión
Fuente: Heibert Ocaña (Autor)
Ilustración 22: Interfaz - Recuperación de contraseña
Fuente: Heibert Ocaña (Autor)
63
Ilustración 23: Interfaz - Restablecer contraseña
Fuente: Heibert Ocaña (Autor)
Ilustración 24: Interfaz - Configuración de Perfil, Contraseña y Notificaciones
Fuente: Heibert Ocaña (Autor)
64
Ilustración 25: Interfaz - Gestión de usuarios
Fuente: Heibert Ocaña (Autor)
Ilustración 26: Interfaz - Gestión de roles
Fuente: Heibert Ocaña (Autor)
65
Ilustración 27: Interfaz - Gestión de permisos
Fuente: Heibert Ocaña (Autor)
Ilustración 28: Interfaz - Plan de trabajo
Fuente: Heibert Ocaña (Autor)
66
Ilustración 29: Interfaz - Mis actividades
Fuente: Heibert Ocaña (Autor)
Ilustración 30: Interfaz - Gestión de planificaciones
Fuente: Heibert Ocaña (Autor)
67
Ilustración 31: Interfaz - Gestión de actividades
Fuente: Heibert Ocaña (Autor)
Ilustración 32: Interfaz - Gestión de emprendedores
Fuente: Heibert Ocaña (Autor)
12.6.9. Salida de datos, notificaciones y reportes
En este apartado encontraremos unas series de ilustraciones indicando el diseño de las plantillas
que generar el sistema de notificaciones y reportes de los distintos módulos de la aplicación, cabe
recalcar que la información mostrada en las ilustraciones, son de prueba.
68
Ilustración 33: Notificación de correo - Restablecimiento de contraseña
Fuente: Heibert Ocaña (Autor)
Ilustración 34: Notificación de correo - Credenciales del usuario creado
Fuente: Heibert Ocaña (Autor)
69
Ilustración 35: Notificación de correo - Emprendedor registrado
Fuente: Heibert Ocaña (Autor)
Ilustración 36: Notificación de correo - Plan de trabajo
Fuente: Heibert Ocaña (Autor)
70
Ilustración 37: Notificación del sistema - Eventos y emprendedores registrados
Fuente: Heibert Ocaña (Autor)
Ilustración 38: Reporte en Excel - Plan de trabajo
Fuente: Heibert Ocaña (Autor)
71
Ilustración 39: Reporte en Excel - Actividades de trabajo
Fuente: Heibert Ocaña (Autor)
Ilustración 40: Reporte en PDF - Actividades de trabajo
Fuente: Heibert Ocaña (Autor)
72
Ilustración 41: Reporte en PDF - Programa Analítico y Silabo de Asignatura
Fuente: Heibert Ocaña (Autor)
Ilustración 42: Reporte en PDF - Ficha de inscripción de emprendedores
Fuente: Heibert Ocaña (Autor)
73
Ilustración 43: Reporte en PDF - Ficha de inscripción - incubadora de negocio
Fuente: Heibert Ocaña (Autor)
12.6.10. Detalle del hosting y despliegue del sistema
En este apartado se describe las acciones que se realizaron para subir el proyecto a internet,
además pequeñas especificaciones del hosting en donde está alojado los archivos de este proyecto
de desarrollo web. El sistema lo podemos encontrar por medio de la siguiente dirección web:
https://cemlid.com/, cabe mencionar que se omitirá cierta información delicada de las ilustraciones
en esta sección.
Para la implementación del sistema se contrató un plan de hosting el cual cumplía con los
requerimientos necesarios para desplegar un proyecto hecho con laravel.
74
Ilustración 44: Panel del proveedor de servicio - Dongee
Fuente: Heibert Ocaña (Autor)
Una vez realizado la compra del servicio se procedió a realizar la correspondiente preparación
en el CPanel, cabe mencionar que este plan cuenta con una potencia de 1GB RAM/1GB CPU que
es más que suficiente para su correcto funcionamiento, puesto que lo mínimo de potencia que
necesitaría será de 521 MB RAM/ 512 MB CPU, además de muchas otras características y
recursos.
Ilustración 45: CPanel del hosting
Fuente: Heibert Ocaña (Autor)
75
Ya dentro del CPanel se la respectiva base de datos y demás credenciales para la conexión con
el sistema.
Ilustración 46: Configuración base de datos MySQL - CPanel
Fuente: Heibert Ocaña (Autor)
Una vez configurado las credenciales para la conexión a la base de datos, por medio de la
terminal se procedió a comprobar que el CPanel tenga instalado composer y Git.
Ilustración 47: Archivos del proyecto subido vía Terminal - CPanel
Fuente: Heibert Ocaña (Autor)
Posteriormente se procedió clonar el proyecto terminado del repositorio en GitHub del autor de
este trabajo en donde se encontraba alojado. El proyecto fue clonado dentro de la carpeta
public_html.
76
Ilustración 48: Administrador de archivo – CPanel
Fuente: Heibert Ocaña (Autor)
Ya por último se procedió a configurar el proyecto, instalar las respectivas dependencias
mediante composer, administrar las variables de entorno en donde se ingresa el dominio del
proyecto, las variables de conexión con la base de datos, correo electrónico para las notificaciones,
etc. Por ultimo ejecutar las migraciones de las tablas de la base de datos, y las respectivas pruebas
de funcionamiento del Sistema en la web.
77
XIII. CONCLUSIONES Y RECOMENDACIONES
13.1. Conclusiones
• Mediante el análisis de las entrevistas realizadas, se lograron identificar todos esos
procesos que necesitaban ser sistematizados, con lo cual el desarrollo de este sistema
ayudo a agilizar todas esas tareas y trabajos que requerían ser automatizados.
• Se desarrolló el sistema web tomando en cuenta los requerimientos solicitados, logrando
así identificar las herramientas y tecnologías del desarrollo web que se aplicaron y
ayudaron a cumplir con todo lo propuesto.
• El sistema web desarrollado contiene todo lo propuesto, permitiendo así que los
miembros del centro puedan brindar un mejor servicio, gracias a la rapidez y agilidad
del registro en una base de datos, logrando reducir la redundancia de información.
13.2. Recomendaciones
• Capacitar a todo el personal con la ayuda del respectivo manual de usuario, para que no
tenga ningún inconveniente al momento de realizar alguna tarea o utilizar algún recurso
o funcionalidad del sistema.
• Realizar revisiones mensuales de los recursos del hosting que están siendo consumido
por el sistema web para su correcto funcionamiento puesto que con el tiempo se va a
requerir escalar a otro plan de servicios.
• Si más adelante se tiene pensado añadir nuevas funcionalidades al sistema, se
recomienda que se siga utilizando la misma metodología con la cual fue desarrollado,
puesto que se podría tener que hacer grandes cambios en el proyecto.
78
XIV. ANEXOS
A continuación, se mostrarán imágenes de las entrevistas virtuales realizadas al personal del
Centro de emprendimiento, liderazgo e innovación para el desarrollo de la Universidad Estatal del
Sur de Manabí.
Ilustración 49: Entrevista - Ing. Víctor Guaranda Sornoza, Coordinador
Fuente: Heibert Ocaña (Autor)
Ilustración 50: Entrevista - Ec. María Zavala Manrique, Asistente administrativo II
Fuente: Heibert Ocaña (Autor)
79
Ilustración 51: Entrevista - Ing. Jaime Chele González, Asistente Administrativo III
Fuente: Heibert Ocaña (Autor)
Ilustración 52: Entrevista - Ing. Cesar Vega Cevallos, Técnico II
Fuente: Heibert Ocaña (Autor)
80
Ilustración 53: Entrevista - Ing. Juan Carlos Morán Correia, Analista I
Fuente: Heibert Ocaña (Autor)
Ilustración 54: Reuniones de trabajo y socialización del proyecto en línea
Fuente: Heibert Ocaña (Autor)
Evidencias de la implementación del sistema web en un hosting compartido con los recursos y
servicios necesarios para este proyecto.
81
Ilustración 55: Implementación - Panel del proveedor del servicio de Hosting
Fuente: Heibert Ocaña (Autor)
Ilustración 56: Implementación – Tablero de herramientas del CPanel
Fuente: Heibert Ocaña (Autor)
82
Ilustración 57: Implementación - Administrador de archivo del CPanel
Fuente: Heibert Ocaña (Autor)
Ilustración 58: Implementación - Prueba operativa - Tutor y Autor del proyecto
Fuente: Heibert Ocaña (Autor)
83
84
85
86
87
88
89
90
Contenido
1. Introducción
2. Iniciar sesión
• Como recuperar la contraseña
3. Aspecto general de la interfaz
4. Configuraciones de perfil, contraseña y notificaciones
5. Gestión de módulos
• Permisos
• Roles
• Usuarios
• Plan de trabajo
• Actividades
• Planificaciones
• Emprendedores
91
1. Introducción
En el presente manual de usuario, se indicara el funcionamiento del sistema en los diferentes
módulos desarrollados, en donde los usuarios podrán realizar sus respectivas tareas y actividades,
cabe mencionar que toda las vistas están adaptadas para los diferentes tipos de resoluciones de
pantalla que existen en la actualidad con los cual no tendrán ningún problema ingresando desde
sus dispositivos móviles (Smartphone y tablet), además el sistema iniciara con un solo usuario
(super admin) que será el encargado de gestionar todas las acciones de las demás cuentas de usuario
que se creen.
2. Inicio de sesión
Login o inicio de sesión: Esta es la interfaz principal del sistema, encargada de validar y
autenticar el acceso de los usuarios registrados. Tiene protección contra ataques de falsificación
de solicitudes entre sitios (CSRF), para el acceso al sistema el usuario puede autenticarse utilizando
su correo electrónico o su nombre de usuario y su contraseña.
Ilustración 59: Vista - Login o Inicio de sesión
Fuente: Heibert Ocaña (Autor)
Si las credenciales son correctas el sistema re-direccionara al usuario a la vista dashboard.
92
Dashboard o tablero: Es una de las interfaces que todo usuario podrán acceder
independientemente del rol o los permisos que tenga. Aquí encontraremos las barras herramientas
con sus respectivas opciones, un tablero con datos perteneciente a nuestro cuenta.
Ilustración 60: Vista - Dashboard o tablero
Fuente: Heibert Ocaña (Autor)
Si es la primera vez del usuario ingresando al sistema antes de entrar al dashboard el sistema
no re-direccionara a la vista de completar los datos de perfil para el acceso.
Completar datos de perfil: Esta es una interfaz es importante ya que si no completas los datos
del formulario no podrás acceder al panel principal donde encuentras los módulos para comenzar
trabajar. Esta vista solamente aparecerá una sola vez para los nuevos usuarios registrados en el
momento que inicien sesión con sus cuentas, aquí solamente deberás ingresar datos personales
como nombres, apellidos y cargo o puesto de trabajo como se muestra en la siguiente ilustración.
Ya para la próxima vez que se ingrese ya no aparecerá esta vista.
93
Ilustración 61: Vista - Complete información personal
Fuente: Heibert Ocaña (Autor)
➢ Como recuperar la contraseña
Recuperación de contraseña: Esta interfaz cuenta con un formulario en donde solamente el
usuario deberá ingresar su dirección de correo electrónico vinculada a su cuenta como se muestra
en la siguiente ilustración, posteriormente una vez verificada su identificación el sistema enviara
una plantilla a esa misma dirección de correo electrónico.
Ilustración 62: Vista - Recuperación de contraseña
Fuente: Heibert Ocaña (Autor)
94
El email de recuperación de contraseña que encontrara en la bandeja de entrada de su proveedor
de dominio que tenga (Gmail, Hotmail, etc.), al abrir el mensaje se nos mostrara una plantilla en
donde nos describirá el motivo del mensaje y sus respectivas instrucciones, tal y como veremos en
la siguiente ilustración.
Ilustración 63: Plantilla – Notificación de restablecer contraseña
Fuente: Heibert Ocaña (Autor)
Restablecimiento de contraseña: Esta interfaz que cuenta con un formulario en donde se
deberá ingresar la nueva contraseña y confirmarla como podremos ver en la siguiente ilustración.
La interfaz está protegida y solamente aparecerá cuando un usuario solicite recuperar su
contraseña, ya que está protegida mediante un token (contraseña cifrada) y solamente estará abierta
por unos 60 minutos contando desde el momento que el usuario solicito este servicio. Si todo está
correcto, se te re-direccionara a tu panel principal.
95
Ilustración 64: Vista - Restablecer contraseña
Fuente: Heibert Ocaña (Autor)
3. Aspecto general de la interfaz
En este apartado se describen los aspectos y funcionalidades generales con las que van a contar
todos los usuarios en las interfaces o módulos en los que se encuentren.
➢ Barras de herramientas
Con respecto a las barras de herramientas con las que contara todo usuario tenemos:
Barra de menú: Aquí encontraremos los módulos a los cuales podremos acceder.
Barra de más opciones: Aquí encontraremos las opciones de ver nuestros datos de perfil y el
cierre de sesión.
Barra de notificaciones: Aquí encontraremos las notificaciones o alertas de la aplicación y
además el acceso a la vista de configuración de notificaciones.
96
Ilustración 65: Barras de herramientas
Fuente: Heibert Ocaña (Autor)
➢ Aspecto general y secciones de los módulos
Con respecto a la funcionalidad de un módulo, a continuación, se describirá las secciones y
acciones que tienen las interfaces principales de los módulos. Cabe recalcar que si un rol de usuario
no cuenta con ciertos permisos no podrá visualizar cierta sección, de ahí todas tienen el mismo
diseño.
97
Ilustración 66: Aspecto general de interfaz de los módulos
Fuente: Heibert Ocaña (Autor)
A continuación, se listará las descripciones de la ilustración anterior:
✓ Nombre del modulo
✓ Sección de rutas
✓ Sección de acciones: Crear nuevo, actualizar registros, más opciones de registro
adicionales.
✓ Listado de registro: mostrador total de registro a listar, filtrador de registros, menú de
opción de acciones (editar, eliminar, revisar, visualizar, descargar, completar).
✓ Indicador de ruta activa.
➢ Tipos y aspectos de los campos
Con respecto a todos los formularios con los que cuentan los módulos, podremos encontrar una
diferencia en los campos, puesto que habrá datos e información que son requeridos y no pueden
estar en blanco, además de aquellos con opción múltiple.
98
Ilustración 67: Tipos y aspectos de los campos
Fuente: Heibert Ocaña (Autor)
Campos obligatorios: Estos campos indican que son obligatorios de llenar puesto que son
importantes y para reconocerlos han sido marcados con un (*).
Campos opcionales: Estos campos indican que toda información que se ingrese no todos los
usuarios la tendrán, por ello se pueden saltar esos campos y para reconocerlos estos no llevan
ninguna marca o identificativo como es el caso de los campos obligatorios.
Campos multi-opciones: Estos campos a diferencia de los anteriores nos son para ingresar
información más bien son para que los usuarios escojan una o varias de todas las opciones que
puedan tener.
Campos de texto enriquecido: Esto campos a diferencia de los demás permiten que los
usuarios puedan cambiar la fuente y aspecto de la información ingresada, como si estuviéramos
trabajando en Microsoft Word
99
Ilustración 68: Campos de texto enriquecido
Fuente: Heibert Ocaña (Autor)
Cabe de mencionar que el campo de texto enriquecido solo se podrá encontrar en los
formularios del módulo de planificaciones, además que el usuario deberá eliminar el estilo de letra
de la información, en caso de que haya sido copiada y pegada de otro sitio.
4. Configuraciones de perfil, contraseña y notificaciones
Perfil: En esta interfaz se encontrará un formulario con los datos actuales del usuario, aquí
podrá realizar los respectivos cambios o actualización de su información personal en caso de
requerirlo.
Ilustración 69: Vista - Perfil de usuario
100
Fuente: Heibert Ocaña (Autor)
Cambio de contraseña: En esta interfaz se encontrara un formulario en donde el usuario podrá
actualizar su contraseña actual en caso de requerirlo.
Ilustración 70: Vista - Cambio de contraseña
Fuente: Heibert Ocaña (Autor)
Configuración de notificaciones: En esta interfaz el usuario podrá controlar la forma o vía
para recibir las notificaciones de la aplicación mediante unos interruptores se activarán o
desactivarán las opciones, en este caso notificaciones por medio del navegador o por correo
electrónico.
101
Ilustración 71: Vista - Configuración de notificaciones
Fuente: Heibert Ocaña (Autor)
5. Gestión de módulos
En este apartado se describirá las acciones que podremos realizar en los diferentes módulos del
sistema.
➢ Gestión de permisos
Este módulo es en donde se podrá administrar los permisos del sistema que posteriormente será
asignados a los respetivos roles de cada usuario. Solamente en caso de haber realizar algún cambio
a algún permiso por defecto existente, para que se aplique el administrador o el encargado deberán
realizar cambios en el código fuente de este aplicativo para que funcionen esos nuevos cambios.
Aquí solamente podrá actualizar la descripción de los permisos que ya están por defecto en la
aplicación, puesto si efectúa otra acción más podría repercutir en funcionamiento de la acción de
algún modulo.
102
Ilustración 72: Vista principal - Gestión de permisos
Fuente: Heibert Ocaña (Autor)
Ilustración 73: Vista - Crear y/o editar permisos
Fuente: Heibert Ocaña (Autor)
➢ Gestión de roles
Este módulo es en donde se podrá administrar las tareas o acciones que pueda realizar un
usuario. Aquí se crean los roles y se le asignan los permisos existentes del sistema. Posteriormente
este rol será asignado a un usuario o grupo de usuario. Aquí si no es necesario intervenir en el
código fuente para aplicar esos cambios en la aplicación, ya que solamente se usaran los recursos
103
ya funcionales de otro modulo en este caso módulo de roles usara los recursos del módulo de
permisos.
Ilustración 74: Vista principal - Gestión de roles
Fuente: Heibert Ocaña (Autor)
Ilustración 75: Vista - Crear y/o editar roles
Fuente: Heibert Ocaña (Autor)
➢ Gestión de usuarios
104
Este es el modulo final con respecto a la creación de cuentas de usuario y acceso al sistema, ya
que este módulo depende tanto de los recursos del módulo de permisos y roles, porque las acciones
que podrá realizar serán limitadas, tan solo podrá manipular su información personal.
Ilustración 76: Vista principal - Gestión de usuarios
Fuente: Heibert Ocaña (Autor)
Para crear una cuenta se deberá completa los datos que el formulario de registro pide que se
completen como el correo electrónico, nombre de usuario y contraseña (con respecto al usuario y
la contraseña se podrá usar la opciones de generar automáticamente), además deberá seleccionar
y asignar el respectivo rol. Y el estado de la cuenta (Activada, desactivada), ya que esta opción
permitirá el acceso al sistema puesto que si esta desactivada al momento de iniciar sesión el usuario
no podrá acceder al sistema.
105
Ilustración 77: Vista - Crear cuenta de usuarios
Fuente: Heibert Ocaña (Autor)
Una vez creada la cuenta, el sistema le notificara al correo registrado anteriormente en el
formulario. Al abrir la notificación el usuario encontrara una plantilla con las respectivas
instrucciones para que el usuario pueda acceder al sistema como se muestra en la ilustración.
Ilustración 78: Plantilla – Notificación credenciales de usuario
Fuente: Heibert Ocaña (Autor)
106
Ilustración 79: Vista - Actualización de cuenta y/o información personal del usuario
Fuente: Heibert Ocaña (Autor)
➢ Gestión de plan de trabajos
En este módulo se podrá registrar los trabajos o eventos que han realizado los miembros del
Centro de Emprendimiento. Contará con una interfaz principal con sus respectivas acciones y
herramientas. Además de una sección para exportar y/o descargar la información almacenada en
un archivo de formato Excel.
Ilustración 80: Vista principal - Plan de trabajos
Fuente: Heibert Ocaña (Autor)
107
Por otra parte tendremos una interfaz para crear y actualizar los registros, como se muestra en
la ilustración.
Ilustración 81: Vista - Crear y/o editar registros
Fuente: Heibert Ocaña (Autor)
Al final de los campos para rellenar tendrá una casilla que le indicara si desea notificar a los
demás usuarios sobre el evento que está apunto de registrar, solo si la activa antes de crear o
registrar ese registro se ejecutara esta acción y es tal y como veremos a continuación.
108
Ilustración 82: Plantilla – Notificación evento o actividad de trabajo
Fuente: Heibert Ocaña (Autor)
Y en la aplicación al pinchar sobre la notificación veremos una vista con el registro realizado
tal y como veremos en la siguiente ilustración.
Ilustración 83: Vista - Revisión del evento registrado
Fuente: Heibert Ocaña (Autor)
109
Con respecto a la descarga, solo el usuario con permiso para acceder a la interfaz principal,
además con el respectivo permiso para descargar podrá visualizar la sección con un formulario
como se muestra la siguiente ilustración. Se recomienda leer las instrucciones para poder realizar
la respectiva descarga.
Ilustración 84: Vista - Sección de descarga - Plan de trabajo
Fuente: Heibert Ocaña (Autor)
Por ultimo obtendremos el archivo con el reporte que solicitamos como se muestra en la
siguiente ilustración.
Ilustración 85: Archivo en Excel - Reporte del plan de trabajo
110
Fuente: Heibert Ocaña (Autor)
➢ Gestión de actividades
Para este módulo encontraremos 2 interfaces una está pensada para la gestión de toda las
actividades que registren los usuarios y la otra es personal en donde solamente se tendrá el control
de sus propias actividades como se muestra en la ilustración.
Ilustración 86: Vistas principales - Gestión de actividades
Fuente: Heibert Ocaña (Autor)
También esto aplicaría para el registro y actualización de la información, tendrá su propia vista.
111
Ilustración 87: Vistas - Crear y/o editar actividades
Fuente: Heibert Ocaña (Autor)
Con respecto a la descarga, solo el usuario con permiso para acceder a la interfaz principal y de
descargar podrá visualizar la sección con el formulario para descargar en formato de Excel/.xlsx y
PDF/.pdf como se muestra en la siguiente ilustración. Se recomienda leer las instrucciones para
poder realizar la respectiva descarga.
Ilustración 88: Vista - Sección de descarga de Matriz de actividades
Fuente: Heibert Ocaña (Autor)
112
Por ultimo obtendremos el archivo con el reporte que solicitamos como se muestra en las
siguientes ilustraciones.
Ilustración 89: Archivo en Excel - Reporte de actividades
Fuente: Heibert Ocaña (Autor)
Ilustración 90: Archivo en PDF - Reporte de actividades
Fuente: Heibert Ocaña (Autor)
➢ Gestión de emprendedores
Este módulo está diseñado con el fin agilizar la actividad principal del Centro de
emprendimiento, liderazgo e innovación para el desarrollo el cual es el registro de emprendedores
113
y proyectos de emprendimiento. La interfaz principal cuenta con sus respectivas acciones y
herramientas para su control.
Ilustración 91: Vista principal - Gestión de emprendedor
Fuente: Heibert Ocaña (Autor)
Al pinchar en la opción crear nueva +Categorías se abrirá un modal con un formulario en donde
podremos crear categorías para ser utilizados al registrar un emprendedores y posteriormente
facilitar la búsqueda de información de los emprendedores registrados.
Ilustración 92: Modal - Crear y/o editar etiquetas
114
Fuente: Heibert Ocaña (Autor)
Al pinchar en la opción crear nueva +Emprendedores se abrirá un modal con opciones de
acceso a los diferentes formularios de inscripción para rellenar, como podremos ver en la siguiente
ilustración.
Ilustración 93: Modal - Accesos a formularios de inscripción para emprendedores
Fuente: Heibert Ocaña (Autor)
Primer formulario de inscripción: Aquí se recopilan los datos del emprendedor y su
emprendimiento. Y es como se muestra en la siguiente ilustración.
Ilustración 94: Vista - Formulario de inscripción - Emprendedores
115
Fuente: Heibert Ocaña (Autor)
Segundo formulario de inscripción: Aquí se recopilan los datos del emprendedor y su idea de
negocio. Y es como se muestra en la siguiente ilustración.
Ilustración 95: Vista - Formulario de inscripción - Incubadora
Fuente: Heibert Ocaña (Autor)
Al registrar un emprendedor, automáticamente el sistema notificara a los demás usuarios por
medio de la aplicación y al email por medio de una plantilla como se muestra en la siguiente
ilustración.
116
Ilustración 96: Plantilla - Emprendedor registrado
Fuente: Heibert Ocaña (Autor)
Tanto la notificación de la aplicación como la plantilla del email nos permitirán revisar la
información registrada en su respectiva vista como veremos en la siguiente ilustración, cabe
recalcar que el rol del usuario deberá tener el permiso para revisar la información de los
emprendedor registrados para recibir estas notificaciones.
Ilustración 97: Vista - Revisión de datos del emprendedor
117
Fuente: Heibert Ocaña (Autor)
En esta vista solo el usuario con el permiso de revisar podrá realizar la acciones para cambiar
el estado (Pendiente, Revisado, Rechazado) del registro, documento. Para esto debe ir a la sección
de la tabla donde nos indica el estado del registro y pinchar en la opción cambiar estado en donde
se nos abrirá un modal en donde deberá escoger una de las opciones y añadir una descripción y es
como veremos a continuación.
Ilustración 98: Modal – Actualizar estado del registro
Fuente: Heibert Ocaña (Autor)
Mas al final en la misma vista de revisión tendremos la sección de actividades y seguimiento,
en donde podremos visualizar las acciones realizadas en los datos del emprendedor como cuando
fue creado el registro, quien lo actualizo y quien cambio el estado con esto sabremos que usuario
ha realizado cambio en este registro y es como veremos a continuación.
118
Ilustración 99: Vista - Emprendedores - Sección de actividades y seguimiento
Fuente: Heibert Ocaña (Autor)
Por ultimo una vez de haber revisado la información, obtendremos el archivo con el reporte que
solicitamos tal y como se muestran en las siguientes ilustraciones.
Ilustración 100: Archivo en PDF - Ficha de inscripción - Emprendedores
Fuente: Heibert Ocaña (Autor)
119
Ilustración 101: Archivo - Ficha de inscripción - Incubadora
Fuente: Heibert Ocaña (Autor)
➢ Gestión de planificaciones
Este módulo está desarrollado para que los docentes puedan crear la planificación de sus
asignaturas.
Ilustración 102: Vista principal - Gestión de planificaciones
Fuente: Heibert Ocaña (Autor)
Esta interfaz cuenta con las opciones de crear facultades y carreras, que los usuarios podrán
utilizar al momento de crear la planificación de su materia, esta acción como muchas otras podrá
120
ser asignada solo por el súper admin. A continuación veremos sus respectivos modales para
realizar estas acciones.
Ilustración 103: Modal - Creación de facultades
Fuente: Heibert Ocaña (Autor)
Ilustración 104: Modal - Creación de carreras
121
Fuente: Heibert Ocaña (Autor)
➢ Como crear una planificación
Primeramente se deberá pinchar el botón de +Crear nuevo, se desplegara un modal en donde
el usuario deberá rellenar los datos que pide el formulario.
Ilustración 105: Modal - Creación de asignatura
Fuente: Heibert Ocaña (Autor)
Una vez llenado todo, el registro aparecerá listada en la tabla del módulo, en donde aparecerán
las acciones del registro (Completar, eliminar).
Ilustración 106: Vista - planificaciones - Acciones del registro
Fuente: Heibert Ocaña (Autor)
El usuario al pulsar la acción de completar, el sistema lo dirigirá al panel principal del programa
creado para que el usuario pueda rellenar los demás datos, y es como veremos en la siguiente
ilustración.
122
Ilustración 107: Vista - planificaciones - Panel principal de la asignatura registrada
Fuente: Heibert Ocaña (Autor)
Esta interfaz viene con su sección de descarga y visualización del Programa Analítico, Silabo
de Asignatura y las autoridades o directivos como se muestra en la siguiente ilustración.
Ilustración 108: Vista - planificaciones - Sección de descarga del panel
Fuente: Heibert Ocaña (Autor)
123
Ilustración 109: Vista - planificaciones – Panel completar datos del programa analítico
Fuente: Heibert Ocaña (Autor)
Ilustración 110: Vista - planificaciones - Panel completar datos del silabo de asignatura
Fuente: Heibert Ocaña (Autor)
124
Ilustración 111: Vista - planificaciones - Formulario de registro de autoridades y/o directivos
Fuente: Heibert Ocaña (Autor)
Por ultimo una vez de haber completado y revisado la información de todas las opciones del
programa analítico y del silabo, el usuario podrá generar y descargar su respectivo archivo. Y es
como veremos en la siguiente ilustración.
Ilustración 112: Archivo en PDF - Programa Analítico y Silabo de Asignatura
Fuente: Heibert Ocaña (Autor)
125
126
CONTENIDO
1. Introducción
2. Requerimientos técnicos
3. Modelo E-R de la base de datos
4. Herramientas y tecnologías utilizadas
5. Estructura de carpetas y archivos
6. Descripción del hosting y servicios
127
1. Introducción
En el presente manual técnico nos indica el proceso que necesitara saber el usuario
(administrador) encargado del sistema o el personal del centro de emprendimiento para cuando
requieran realizar algún cambio o actualización de este proyecto de desarrollo web. El sistema está
construido en base al patrón de diseño MVC (Modelo-vista-controlador). Cabe recalcar que se
especificaron los aspectos más importantes y principales de este software, además que el proyecto
está estructurado por módulos con sus respectivos roles y permisos.
2. Requerimientos técnicos
Navegabilidad y adaptabilidad
Para el funcionamiento de este sistema en necesario que los dispositivos que tengan a
disposición, estén utilizando navegadores en sus mejores versiones ya bien no podrían cargar bien
algún recurso por motivo de incompatibilidad, que normalmente presentan las aplicaciones o
sistemas web al ser accedidos en navegadores antiguo por los usuarios.
Tecnologías para desarrollo web
El usuario (administrador) encargado tiene que saber que el desarrollo de esta aplicación o
sistema web tiene como base el Framework para PHP Laravel v8.34.0 que en los actuales momento
seria su última versión, además deberá conocer cómo funciona el patrón de arquitectura MVC
(Modelo-Vista-Controlador) específicamente que utiliza este Framework en tal caso que requiera
trabajar en este proyecto.
Otros conocimientos: HTML5, CSS3, Javascript, ES6, NodeJS, Responsive design,
Maquetación web, Base de datos SQL, Manejadores de paquetes: Componer, NPM, NPX o
YARN.
128
Servidor virtual local
Para el desarrollo local es necesario que contar con el servidor local XAMPP, además que
cuente con los siguientes requerimientos que veremos en las siguientes ilustraciones.
Ilustración 113: Panel de control - XAMPP
Fuente: Heibert Ocaña (Autor)
Ilustración 114: Requerimientos - Servidor local
Fuente: Heibert Ocaña (Autor)
129
Servicio de hosting
Al estar trabajando con alguna versión de laravel Framework es necesario saber que extensiones
para PHP necesita tener habilitado para su correcto funcionamiento de ahí podrá contratar
cualquier servicio de alojamiento con más capacidad. En este caso para este proyecto es necesario
que el servidor cuente con las siguientes extensiones que veremos en la siguiente ilustración.
Ilustración 115: Requerimientos del servidor
Fuente: https://laravel.com/docs/8.x/deployment#server-requirements
3. Modelo E-R de la base de datos
En este apartado se detallara la estructura y diseño físico de la base de datos SQL, a continuación
veremos el modelo entidad relación de las tablas que conforman la base de datos “CEMLID”.
• Estructura física en phpMyAdmin
130
Ilustración 116: Base de datos - Estructura física
Fuente: Heibert Ocaña (Autor)
• Diseño físico o diagrama entidad relación
131
Ilustración 117: Base de datos - Diseño físico
Fuente: Heibert Ocaña (Autor)
132
4. Herramientas y tecnologías utilizadas
Para el desarrollo de este sistema web se utilizaron las siguientes herramientas y tecnologías:
Herramientas de desarrollo
DESCRIPCIÓN
• Visual Studio Code
• Photoshop Cs6
• Xampp
• phpMyAdmin
• Git
• Github
Tabla 10: Herramientas de desarrollo
Fuente: Heibert Ocaña (Autor)
Tecnologías para el
desarrollo del Front-end
Lenguajes de programación
HTML5, CSS3, Javascript, ES6.
Librerías
• CSS: Bootstrap (datables, responsive,
twitter), Sweetalert2, toastr.
• Javascript: JQuery, Bootstrap
(Popper, datables, responsive),
Sweetalert2, toastr, summernote.
Gestor de paquetes
NPM, NPX o YARN
Tabla 11: Tecnologías para el desarrollo del Front-end
Fuente: Heibert Ocaña (Autor)
Tecnologías para el
desarrollo del Back-end
Lenguajes de programación
PHP, Laravel.
Librerías o dependencias
Sin contar con las que ya viene por defecto
laravel.
133
• barryvdh/laravel-dompdf,
• laravel/ui,
• maatwebsite/Excel,
• spatie/laravel-permission,
• yajra/laravel-datatables-oracle,
dompdf/dompdf
Esto también se podrá ver en su respectivo
archivo composer.json para mayor
información.
Gestor de paquetes
Composer
Tabla 12: Tecnologías para el desarrollo del Back-end
Fuente: Heibert Ocaña (Autor)
5. Estructura de carpetas y archivos
A continuación se describirá la estructura de archivos de este proyecto de desarrollo con laravel.
Cabe recalcar que se mencionaran más las carpetas y archivos que se utilizaron, si se requiere saber
más sobre este tema puede visitar el sitio oficial: https://laravel.com/docs/8.x
Ilustración 118: Estructura de carpetas y archivos del proyecto – Laravel
134
Fuente: Heibert Ocaña (Autor)
• Carpetas y archivos a tener en cuenta
A continuación se listaran los archivos y carpetas que se encuentran en la raíz del proyecto de
los cuales hay que tener en cuenta.
ARCHIVOS DESCRIPCIÓN
.env
Contiene las variables de entorno del proyecto desde aquí se
podrá configurar, el nombre del dominio del sistema, las
variables de conexión a la base de datos y el correo
electrónico de soporte encargado de enviar notificaciones
entre otras cosas.
composer.json Contiene las dependencias del proyecto (librerías php de
terceros) y demás información del proyecto.
package.json Contiene las dependencias del proyecto (librerías javascript
de terceros) y demás información del proyecto.
Tabla 13: Descripción de archivos de configuración del proyecto
Fuente: Heibert Ocaña (Autor)
CARPETAS DESCRIPCIÓN
app
Contiene los archivos para la construcción de la aplicación
aquí se encontraran los archivos para crear los modelo y
controladores (middleware, events, notifications, mail,
exports, etc). Es la carpeta principal del sistema.
config
Contiene todo los archivos de configuración de la aplicación
que contienen sus respectivas variables de entorno, como
para la autenticación, sesiones, base de datos, permisos, etc.
database
Contiene tres carpetas para el manejo de la base de datos.
• factories: Permite crear datos ficticios para
rellenar nuestra base de datos.
135
• seeder: Permite crear los datos iniciales para
nuestras tablas, con los cuales hacer funcionar la
aplicación.
• migrations: Permite crear las tablas con sus
respectivos datos, mediante el uso de esquemas.
Que posteriormente podremos migrar estos
esquemas a nuestra base de datos.
public Contiene toda las carpeta y archivo necesarios para que el
sistema o aplicación pueda mostrase en el navegador.
resources
Contiene las carpetas y archivos necesarios para el desarrollo
de la aplicación como archivos para las vistas, script y
librerías de javascript y hojas de estilo css.
routes
Contiene los archivos para el manejo y control de las rutas de
una aplicación o sistema utilizando una arquitectura MVC o
SPA.
storage
Contiene los archivos compilados por la aplicación como las
vistas creadas con el motor de plantillas de .blade son
pasadas a este carpeta a .php el cual es el formato de archivo
que entienden los servidores web.
Tabla 14: Descripción de carpetas de configuración del proyecto
Fuente: Heibert Ocaña (Autor)
6. Descripción del hosting y servicios
Para la implementación del sistema web se contrató un plan de hosting en el sitio web dongee
una empresa con sede en 8 países de américa. Esta empresa ofrece distinto servicios de alojamiento
en la nube, además cuenta con gran equipo de soporte técnico al servicio de sus clientes. A
continuación por medio del siguiente link https://www.dongee.com/hosting/ecuador/ se podrá ir a
la sección de los planes de hosting compartidos que tienen.
136
Tabla 15: Sitio Web del proveedor de servicios de hosting
Fuente: Heibert Ocaña (Autor)
Para la implantación se contrató el plan personal (Para sitios web personales) por 1 año, cabe
mencionar que dependiendo el periodo de pago que se escoja, el descuento solo se aplica para la
primera factura. El precio normal mensual está a unos $6.25 que en este caso no está mal para lo
que ofrece el plan contratado. Los recursos del plan contratado en comparación a otras empresas
lo estaríamos encontrando en algún plan para empresas y a un mayor precio. A continuación
veremos una tabla con una descripción general de los recursos del hosting contratado.
TIPO DE PLAN DESCRIPCIÓN GENERAL
PERSONAL
✓ 1 Sitio WEB
✓ Correo Empresarial
✓ Dominio gratis
✓ Backups diarios con Acronis
✓ Candado de seguridad SSL
✓ Creador de sitios web
✓ Centros de Datos AWS
✓ 10GB de Espacio AWS
✓ Potencia 1 GB RAM/1 CPU
137
✓ LiteSpeed + Antivirus
Tabla 16: Descripción general del hosting
Fuente: Heibert Ocaña (Autor)
Adicionalmente a estas especificaciones, ya viene activo el candado de seguridad SSL, además
de otras tecnologías instaladas en el sistema operativo de nuestro CPanel como nodeJS, npm,
composer, git.
Ilustración 119: Tablero de herramientas del hosting
Fuente: Heibert Ocaña (Autor)
Gracias a estas herramientas y tecnologías nos facilita mucho el mantenimiento y actualización
del sistema, puesto que podemos estar desarrollando un nuevo proyecto en local, luego lo subimos
a nuestro repositorio en GitHub y por ultimo dentro de nuestro CPanel por medio su terminal
podremos clonar y publicar ese proyecto en la carpeta publica de nuestro CPanel.
138
Ilustración 120: Terminal del CPanel
Fuente: Heibert Ocaña (Autor)
Puesto que al trabajar y guardar esos cambios en los repositorios de GitHub, con esto luego
podríamos cargar esos cambios en el proyecto en producción del CPanel.
Ilustración 121: Administrador de archivos del CPanel
Fuente: Heibert Ocaña (Autor)