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.


……………………………………….

Ing. Jhimmy Toala Arias, Mg.


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.


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


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,


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,


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


27

Ilustración 4: Diagrama de Gantt


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”


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"


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


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"


Caso de uso

Ilustración 7: Caso de uso - Ingreso al sistema “Usuario con rol y permisos”

42



Caso de uso: Ingreso al sistema “Usuario con rol y permisos”







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”


Caso de uso

Ilustración 8: Caso de uso - Ingreso al sistema “Usuario sin rol y permisos”


43


Caso de uso: Ingreso al sistema “Usuario sin rol y permisos”







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”


Caso de uso

44

Ilustración 9: Caso de uso - Recuperación de contraseña para el acceso al sistema


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.


✓ 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


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


A continuación, se describe los pasos para la creación de permisos

46

Caso de uso: Creación de permisos


✓ 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


Caso de uso

Ilustración 11: Caso de uso - Creación de roles


A continuación, se describe los pasos para la creación de roles

Caso de uso: Creación de roles


47



✓ 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


Caso de uso

Ilustración 12: Caso de uso – Creación de cuentas de usuarios


A continuación, se describe los pasos para crear una cuenta de usuario

Caso de uso: Creación de cuentas de usuarios


48



✓ 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


Proceso general de uso del sistema propuesto

49

Ilustración 13: Proceso general de uso del sistema propuesto


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


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


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


59

Ilustración 18: Diseño físico del diagrama E-R de la base de datos


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


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


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


Ilustración 22: Interfaz - Recuperación de contraseña


63

Ilustración 23: Interfaz - Restablecer contraseña


Ilustración 24: Interfaz - Configuración de Perfil, Contraseña y Notificaciones


64

Ilustración 25: Interfaz - Gestión de usuarios


Ilustración 26: Interfaz - Gestión de roles


65

Ilustración 27: Interfaz - Gestión de permisos


Ilustración 28: Interfaz - Plan de trabajo


66

Ilustración 29: Interfaz - Mis actividades


Ilustración 30: Interfaz - Gestión de planificaciones


67

Ilustración 31: Interfaz - Gestión de actividades


Ilustración 32: Interfaz - Gestión de emprendedores


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


Ilustración 34: Notificación de correo - Credenciales del usuario creado


69

Ilustración 35: Notificación de correo - Emprendedor registrado


Ilustración 36: Notificación de correo - Plan de trabajo


70

Ilustración 37: Notificación del sistema - Eventos y emprendedores registrados


Ilustración 38: Reporte en Excel - Plan de trabajo


71

Ilustración 39: Reporte en Excel - Actividades de trabajo


Ilustración 40: Reporte en PDF - Actividades de trabajo


72

Ilustración 41: Reporte en PDF - Programa Analítico y Silabo de Asignatura


Ilustración 42: Reporte en PDF - Ficha de inscripción de emprendedores


73

Ilustración 43: Reporte en PDF - Ficha de inscripción - incubadora de negocio


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


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


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


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


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


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


Ilustración 50: Entrevista - Ec. María Zavala Manrique, Asistente administrativo II


79

Ilustración 51: Entrevista - Ing. Jaime Chele González, Asistente Administrativo III


Ilustración 52: Entrevista - Ing. Cesar Vega Cevallos, Técnico II


80

Ilustración 53: Entrevista - Ing. Juan Carlos Morán Correia, Analista I


Ilustración 54: Reuniones de trabajo y socialización del proyecto en línea


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


Ilustración 56: Implementación – Tablero de herramientas del CPanel


82

Ilustración 57: Implementación - Administrador de archivo del CPanel


Ilustración 58: Implementación - Prueba operativa - Tutor y Autor del proyecto


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


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


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


➢ 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


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


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


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


➢ 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


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


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


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


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


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


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


Ilustración 73: Vista - Crear y/o editar permisos


➢ 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


Ilustración 75: Vista - Crear y/o editar roles


➢ 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


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


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


106

Ilustración 79: Vista - Actualización de cuenta y/o información personal del usuario


➢ 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


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


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


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


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


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


➢ 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


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


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


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


Ilustración 90: Archivo en PDF - Reporte de actividades


➢ 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


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


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


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


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


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


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


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


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


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


119

Ilustración 101: Archivo - Ficha de inscripción - Incubadora


➢ 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


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


Ilustración 104: Modal - Creación de carreras

121


➢ 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


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


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


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


123

Ilustración 109: Vista - planificaciones – Panel completar datos del programa analítico


Ilustración 110: Vista - planificaciones - Panel completar datos del silabo de asignatura


124

Ilustración 111: Vista - planificaciones - Formulario de registro de autoridades y/o directivos


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


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


Ilustración 114: Requerimientos - Servidor local


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


• Diseño físico o diagrama entidad relación

131

Ilustración 117: Base de datos - Diseño físico


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


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


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


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


• 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


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


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


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


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


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


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


UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ FACULTA DE …

Documents

Transcript of UNIVERSIDAD ESTATAL DEL SUR DE MANABÍ FACULTA DE …