Jaimes Marín, Edin Sergio - Informe de PPP

Vista previa del material en texto

UNIVERSIDAD NACIONAL DE LA AMAZONÍA PERUANA 
 
 
 
 
 
 
 
FACULTAD DE INGENIERÍA DE SISTEMAS E 
INFORMÁTICA 
 
“IMPLEMENTACIÓN DE UN CMS PARA EL 
COLEGIO DE INGENIEROS DEL PERÚ – CONSEJO 
DEPARTAMENTAL LORETO” 
 
 
 
EDIN SERGIO JAIMES MARIN 
 
INFORME DE PRÁCTICA PRE-PROFESIONAL REALIZADO EN 
EL COLEGIO DE INGENIEROS DEL PERÚ – CONSEJO 
DEPARTAMENTAL LORETO 
ASESOR: 
ING. TONNY EDUARDO BARDALES LOZANO, MGR. 
 
 
 
IQUITOS-MAYO-2021 
 
 
 
 
 
 
 
DEDICATORIA 
Dedico el presente trabajo a mis padres, que, con mucho cariño y afecto, siempre estuvieron 
apoyándome desde los inicios de mis estudios en las diferentes etapas de mi vida. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
AGRADECIMIENTO 
Agradezco a todos los docentes de la Facultad de Ingeniería de Sistemas de la UNAP que me 
bridaron todos los conocimientos necesarios, así mismo a mi familia que siempre me apoyaron de 
diversas formas para mi formación académica. 
 
RESUMEN 
El presente trabajo trata sobre el desarrollo e implementación de un CMS (Content Management 
System) para el Colegio de Ingenieros del Perú-Consejo Departamental Loreto. 
El Colegio de Ingenieros del Perú es una institución de presencia nacional donde se encuentran 
registrados todos los colegiados de las diferentes ramas de la ingeniería, cuenta con presencia en la 
ciudad de Iquitos como Consejo Departamental Loreto, la cual cuenta con 7 capítulos dentro de su 
estructura. 
El objetivo de desarrollar un CMS para el Colegio de Ingenieros del Perú, nace de la necesidad de 
dicha institución de contar con un sitio web dinámico administrable donde los colegiados puedan 
acceder a obtener información sobre eventos, actividades, etc., realizadas por dicha institución. Por 
lo que cabe la necesidad de contar con el desarrollo de una Frontend y Backend para la 
administración de la información para consejo departamental y sus respectivos capítulos. Para el 
proceso de desarrollo del CMS se está empleando el paquete de software XAMPP que cuenta con 
el servidor web APACHE, con leguaje de Programación web PHP con el soporte de gestor de base 
de datos MYSQL. 
Palabras Clave: 
CMS, XAMMP, APACHE, MYSQL, Frontend, Backend 
ABSTRACT 
This paper deals with the development and implementation of a CMS (Content Management 
System) for the College of Engineers of Perú-Loreto Departamental Council. 
The College of Engineers of Peru is an institution with a national presence where all the members 
of the different branches of engineering are registered, it has a presence in the city of Iquitos as the 
Loreto Departmental Council, which has 7 chapters within its structure. 
The objective of developing a CMS for the College of Engineers of Peru, arises from the need for 
said institution to have a dynamic administrable website where members can access information on 
events, activities, etc., carried out by said institution. Therefore, it is necessary to have the 
development of a Frontend and Backend for the administration of information for the departmental 
council and their respective chapters. For the CMS development process, the XAMPP software 
package that has the APACHE web server is being used, with PHP web programming language with 
the MYSQL database manager support. 
Keyword: 
CMS, XAMMP, APACHE, MYSQL, Frontend, Backend 
 
TABLA DE CONTENIDOS 
1. Introducción 1 
2. Justificación 2 
3. Planteamiento Del Problema 2 
4. Problema de Investigación 2 
5. Objetivos 3 
5.1. General 3 
5.2. Específicos 3 
6. Marco Teórico 3 
7. Hipótesis 4 
8. Variables 4 
9. Metodología 4 
9.1. Metodología XP 4 
9.2. Herramientas de Desarrollo 10 
9.3. Base de Datos Relacional 12 
9.4. Servidor 12 
9.5. Diseño del Prototipo 13 
9.6. Fase de Desarrollo 14 
10. Población y Muestra 23 
11. Diseño de Investigación 23 
12. Operacionalización de Variables 23 
13. Resultados 24 
14. Conclusiones 24 
15. Recomendaciones 25 
16. Matriz de Consistencia 26 
17. Bibliografía 27 
18. Anexos 28 
18.1. Anexo I 28 
18.2. Anexo II 29 
18.3. Anexo III 31 
18.4 Anexo IV 
18.5. Anexo V 
18.6. Anexo V
1 
 
 
 
1. INTRODUCCION 
El presente trabajo tiene como base fundamental la implementación de un portal web 
hacia los colegiados del Colegio de Ingenieros del Perú, el mismo que permitirá una 
mayor interacción con sus colegiados quienes muchas veces dedican parte de su tiempo 
al uso de los servicios web, como sitios multimedios, redes sociales, muchas veces para 
comunicarse o interactuar con los medios sociales. 
La implementación de un portal web permitirá que los diferentes capítulos tengan un 
espacio donde puedan promocionar los diferentes eventos, noticias y actividades que 
realizan, con el objetivo de lograr tener la atención de sus colegiados a fin de una 
participación activa con sus capítulos. 
El Colegio de Ingenieros del Perú dentro de su misión principal es el enfatizar valores 
sociales, culturales y políticos, por lo que es necesario contar con espacios de 
comunicación por medios de portales web, estos deben ser dinámicos y atractivos para 
sus interesados, más aún en la coyuntura actual del tema de prevención contagios de 
COVID-19, nace la necesidad de contar con dicho portal web. 
 
 
2 
 
 
2. JUSTIFICACIÓN 
Durante las últimas décadas las empresas tienen la necesidad de estar presentes en 
la red digital para revolucionar las formas de comunicación y presencia con sus 
interesados, más aún en estos tiempos de la coyuntura de la pandemia generada por 
el SARS-COV2 o COVID 19, Por esta razón el crear un portal web para el Colegio 
de Ingenieros del Perú - Consejo Departamental Loreto, se brindan espacios que 
aporten información y comunicación lo cual es base fundamental de la convivencia 
social. Por eso la implementación de un portal web permitirá una comunicación y 
participación más activa de los colegiados con sus capítulos. 
La idea fundamental es lograr que los capítulos del colegio de ingenieros cuenten 
con espacios donde puedan promocionar y proporcionar información de eventos, 
actividades y noticias. Cuyo objetivo es fomentar la participación de los colegiados 
con sus capítulos mediante un portal web atractivo y dinámico que motive a los 
colegiados a estar pendiente de las actividades que realiza sus capítulos e 
información relacionada con el Consejo Departamental Loreto. 
3. PLANTEAMIENTO DEL PROBLEMA 
¿La implementación de un CMS permitirá al Consejo Departamental Loreto la 
publicación de sus contenidos digitales por medio de un sitio web? 
4. PROBLEMA DE INVESTIGACION 
El Colegio de ingenieros del Perú – Consejo Departamental Loreto, ubicado en la 
ciudad de Iquitos en la Jirón Putumayo 1132, es una institución deontológica, sin 
fines de lucro, que representa y agrupa a todos los profesionales de ingeniería de 
las diferentes especialidades, quien es encargada de preservar el comportamiento 
ético de sus miembros y enfatizar valores sociales y culturales como proceso de 
desarrollo a la nación. 
La necesidad de contar con un espacio donde se pueda establecer una imagen 
institucional sólida, hace que se opte por tener un portal web que permita 
promocionarse y proporcionar información de las diferentes actividades que lleva 
a cabo el colegio de ingenieros, así mismo tener un espacio donde cada capítulo 
pueda promocionar sus actividades de manera independiente a la página principal 
del Colegio de Ingenieros. 
 
3 
 
 
 
5. OBJETIVOS 
Objetivo General 
• Implementación de portal web para el colegio de ingenieros del Perú – Consejo 
Departamental Loreto mediante el uso de herramienta informática CMS. 
Objetivos Específicos 
• Analizar la tecnología y las herramientas que se tomara en cuenta, las cuales serán 
deSoftware Libre. 
• Desarrollar un CMS para mantener la información actualizada para el portal web 
del Consejo Departamental Loreto y sus Capítulos. 
• Diseñar las diferentes secciones bajo el modelo MVC (Modelo, Vista, 
Controlador). 
• Proporcionar información actualizada sobre los servicios, eventos, noticias, bolsa 
de trabajos de la institución. 
6. MARCO TEÓRICO 
Antecedentes 
• En 2013, DANIEL ZAVALETA, en su proyecto de tesis titulado “Análisis, 
diseño e implementación de un sistema de administración de contenido CMS 
(Content Management System) para un portal web corporativo”, donde emplea 
la metodología UML, para el modelado de sistema de software con orientación 
a un portal web corporativo. 
• En 2020, JENNIFER DEL CISNE, en su proyecto de tesis titulado “Análisis 
de CMS para la implementación del sitio web de GLO SHOP utilizando norma 
ISO 2500”, explica la utilidad de la implementación de un sitio web, como así 
mismo su definición y del prototipo a desarrollar, estableciendo los objetivos, 
diseño y desarrollo del prototipo bajo los requerimiento de la norma ISO/IEC 
25000 que conforma 8 características fundamentales de calidad como 
eficiencia de desempeño, compatibilidad, usabilidad, fiabilidad, seguridad, 
portabilidad y mantenibilidad. 
• En 2015, BETTY ALAVA, en su proyecto de investigación “Diseño, 
Desarrollo e Implementación de un sitio web dinámico utilizando el CMS 
JOOMLA y GOOGLE ANALITYCS para la maestría en seguridad 
4 
 
 
informática aplicada MSIA-ESPOL”, detalla el diseño, desarrollo e 
implementación de un sitio web dinámico para la Maestría en Seguridad 
Informática, donde encontró que el sistema con que contaba dicha institución 
carecía de las ventajas que ofrece un sitio web dinámico, así mismo la 
información que contenía no estaba actualizada. Por lo que optaron realizar las 
mejoras bajo el modelo de arquitectura MVC (Modelo Vista Controlador). 
• En 2016, MARCOS TARAZONA, en su trabajo de fin de grado titulado 
“Desarrollo de un modelo de negocio de tienda online mediante herramientas 
de gestión de contenidos CMS”, donde detalla y explica los diferentes tipos de 
comercios electrónicos que existe, y comparaciones con los modelos 
tradicionales de negocios, y las ventajas que genera un CMS para el desarrollo 
de e-commerce, y el uso de la herramienta CMS Prestashop y otras 
herramientas Open Source. 
7. HIPÓTESIS 
H0: La implementación de un CMS permitirá al Consejo Departamental la 
publicación y promoción de sus contenidos digitales en un sitio web. 
H1: La implementación de un CMS no permitirá al Consejo Departamental la 
publicación y promoción de sus contenidos digitales en un sitio web. 
8. VARIABLES 
X: Sitio Web 
Y: CMS (Content Management System) 
 
9. METODOLOGIA 
9.1. METODOLOGIA 
9.1.1. METODOLOGIA XP 
XP es una metodología ágil y flexible empleada para la gestión de proyectos. 
Se enfoca en la retroalimentación constante entre el equipo de desarrollo y 
clientes, es adecuada para proyectos con requisitos cambiantes. 
La metodología XP expone un conjunto de conceptos para hacer sencillo el 
proceso de diseño, desarrollo, prueba y entrega de software, en el cual se 
emplea la simplificación de requerimientos y su entrega incremental. Esta 
metodología posee un enfoque basado en reuniones en las cuales se realiza una 
lista de tareas que van a ser terminadas en la siguiente iteración la cual, por lo 
5 
 
 
general no se extiende más de 4 semanas e implica a un propietario de producto 
y equipo de desarrolladores, conjuntamente se fomenta la comunicación. 
 
 
Fuente: Sinnaps.com 
 
Las cuales constan de 4 fase para su correcto desarrollo: 
• Planificación: 
Se identifican las necesidades de los usuarios, se priorizan y se 
descomponen en versiones más pequeñas basándose en las exigencias 
del cliente. 
• Diseño: En este paso se intentará trabajar con un código sencillo, 
haciendo lo mínimo imprescindible para que funcione. Se obtendrá el 
prototipo. Además, para el diseño del software orientado a objetos, se 
crearán tarjetas CRC. 
• Codificación: Se establece un código Universal para que cualquier 
programador pueda trabajar y entender la codificación. 
• Pruebas: Se deben realizar pruebas automáticas continuamente. Al 
tratarse normalmente de proyectos a corto plazo, este testeo 
automatizado y constante es clave. Además, el propio cliente puede 
hacer pruebas, proponer nuevas pruebas e ir validando las versiones 
mas pequeñas. 
9.1.1.1. PLANIFICACION 
Durante el uso de la metodología XP, como parte del proceso de 
planificación se converso con el cliente para definir los módulos 
6 
 
 
del sistema, para posteriormente definir las actividades a realizar 
en cada módulo. 
 
 
9.1.1.2. DISEÑO 
Módulos de Administración: Se detallara los módulos establecidos. 
Tabla 1: Administración N° 1 
Módulo de Administración 
N° Modulo: 1 Nombre: Modulo de Ingreso 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
Para el ingreso a la parte administrativa del 
sistema, deberá ingresar por medio de un usuario y 
contraseña. 
Observaciones: 
El usuario deberá solicitar su usuario y 
contraseña al encargado del sistema. 
El sistema tiene dos modos de ingres: 
Administrador y Editor. 
 
Tabla 2: Administración N°2 
Módulo de Administración 
N° Modulo: 2 Nombre: Modulo de inicio 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
Una vez ingresado, dependiendo del rol 
establecido, se mostraran las opciones disponibles. 
Observaciones: 
El usuario debe ingresa su usuario y 
contraseña para su ingreso al panel 
general. 
Las opciones disponibles esta sujetas al 
tipo de usuario que ingrese 
(Administrador, Editor) 
 
 Tabla 3: Administración N°3 
Módulo de Administración 
7 
 
 
N° Modulo: 3 Nombre: Modulo de Slide 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá ingresar las imágenes 
correspondientes al slide para vista general. 
Observaciones: 
El usuario solo podrá ingresar imágenes 
de formato de extensión (.jpg), con un 
tamaño mínimo establecido de (1200 x 
1000 px). 
 
 
Tabla 4: Administración N°4 
Módulo de Administración 
N° Modulo: 4 Nombre: Modulo de Noticias 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá ingresar una imagen, 
complementando por una descripción breve, y un 
espacio para el contenido general. 
Observaciones: 
El usuario podrá ingresa imágenes en 
formato de extensión (.jpg), así mismo 
podrá actualizar el orden de artículos, 
editar y eliminar según lo vea 
conveniente. 
 
Tabla 5: Administración N°5 
Módulo de Administración 
N° Modulo: 5 Nombre: Modulo de Eventos 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá ingresar una imagen, 
complementando por una descripción breve. 
Observaciones: 
El usuario podrá ingresa imágenes en 
formato de extensión (.jpg), así mismo 
podrá actualizar el orden de artículos, 
editar y eliminar según lo vea 
conveniente. 
 
8 
 
 
Tabla 6: Administración N°6 
Módulo de Administración 
N° Modulo: 6 Nombre: Modulo de Videos 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá ingresar videos. 
Observaciones: 
El usuario podrá ingresa videos en 
formato de extensión (.mp4), así mismo 
podrá actualizar el orden de los videos y 
eliminar según lo vea conveniente. 
Tabla 7: Administración N°7 
Módulo de Administración 
N° Modulo: 7 Nombre: Modulo de Bolsa de Trabajos 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá generar una convocatoria de 
trabajo. 
Observaciones: 
El usuario solo podrá ingresar 
descripciones, estas se ordenan de 
manera automática, cuenta con las 
opciones de editar y eliminar. 
Tabla 8: Administración N°8 
Módulo de Administración 
N° Modulo: 8 Nombre: Modulo de Colegiados 
Responsable: Edin Sergio Jaimes Marín 
Descripción: 
El usuario podrá genera el registrode un nuevo 
miembro y realizar consultas dinámicas. 
Observaciones: 
Solo el usuario administrador tendrá 
ingreso a este módulo y las diferentes 
opciones de manipulación de 
información correspondiente al módulo. 
 
9.1.1.3. CODIFICACIÓN 
Para la fase de codificación se desarrollara bajo el modelo de 
arquitectura MVC. 
9 
 
 
 
Fuente: seguridad.cicese.mx 
9.1.1.3.1. MODELO 
En el modelo se encuentran todas las consultas generadas 
desde el controlador y la conexión a la base de datos, que 
permitirá la manipulación de datos por medio del lenguaje 
de consulta estructurado SQL. 
Imagen de la carpeta Models y archivos 
 
Fuente: Elaboración propia 
9.1.1.3.2. CONTROLADOR 
EL controlador es el encargado de recibir todas las 
peticiones de la vista y establecer contacto con el modelo, 
para el envió o recepción de información, para 
posteriormente retornar a la vista. 
Imagen carpeta controllers y archivos 
 
10 
 
 
 
Fuente: Elaboración propia 
 
9.1.1.3.3. VISTA 
La vista esta encargada de la parte visual que interactuar 
con el usuario, contiene el código que permitirá dar 
estética a los resultados que venga del controlador. 
Imagen de la carpeta vista y sus archivos. 
 
Fuente: Elaboración propia 
9.2. HERRAMIENTAS DE DESARROLLO 
9.2.1. PHP 
PHP es un lenguaje de programación destinado a desarrollar aplicaciones para 
la web y crear páginas web, favoreciendo la conexión entre los servidores y la 
interfaz de usuario. 
Entre los factores que hicieron que PHP se volviera tan popular, se destaca el 
hecho de que es de código abierto. 
11 
 
 
Esto significa que cualquiera puede hacer cambios en su estructura. En la 
práctica, esto representa dos cosas importantes: 
• Es de código abierto, no hay restricciones de uso vinculadas a 
los derechos. El usuario puede usar PHP para programar en 
cualquier proyecto y comercializarlo sin problemas. 
• Está en constante perfeccionamiento, gracias a una comunidad 
de desarrolladores proactiva y comprometida. 
Es un lenguaje que permite disminuir el tiempo de carga de las paginas, 
permitiendo que el servidor trabaje de manera fluida sin sobre cargas, 
permitiendo cargar plugin y otras aplicaciones en los sitios web. 
9.2.2. HTML Y CSS 
HTML es un lenguaje de marcado que se utiliza para el desarrollo de 
páginas de Internet. Se trata de las siglas que corresponden a 
HyperText Markup Language, es decir, Lenguaje de Marcas de 
Hipertexto. 
CSS (Cascading Style Sheets) es un lenguaje de diseño gráfico 
para definir y crear la presentación de un documento 
estructurado escrito en un lenguaje de marcado. Esta 
separación busca mejorar la accesibilidad del 
documento, proveer más flexibilidad y control en la 
especificación de características presentacionales, permitir que 
varios documentos HTML compartan un mismo estilo usando 
una sola hoja de estilos separada en un archivo. La separación 
del formato y el contenido hace posible presentar el mismo 
documento marcado en diferentes estilos para diferentes 
métodos de renderizado, como en pantalla, en impresión, en 
voz mediante un navegador de voz o un lector de pantalla, y 
dispositivos táctiles basados en el sistema Braille. Los lectores 
pueden especificar una hoja de estilos diferente, como una hoja 
de estilos CSS guardado en su computadora, para sobrescribir 
la hoja de estilos del diseñador. 
9.2.3. BOOTSTRAP 
Bootstrap es un framework CSS desarrollado por Twitter en 
2010, para estandarizar las herramientas de la compañía. 
12 
 
 
El framework combina CSS y JavaScript para estilizar los 
elementos de una página HTML. Permite mucho más que, 
simplemente, cambiar el color de los botones y los enlaces. 
Es una herramienta que proporciona interactividad en la página, 
por lo que ofrece una serie de componentes que facilitan la 
comunicación con el usuario, como menús de navegación, 
controles de página, barras de progreso y más. 
 
9.3. BASE DE DATOS RELACIONAL 
9.3.1. MYSQL 
MySQL, sistema de gestión de base de datos relacional, de 
código abierto y basado en el lenguaje de consulta SQL. 
Una de las principales características de MySQL es que trabaja 
con bases de datos relacionales, es decir, utiliza tablas 
múltiples que se interconectan entre sí para almacenar la 
información y organizarla correctamente. 
MySQL, está muy ligado al backend de cualquier página web, 
por lo que se implementó para el desarrollo del prototipo. 
Imagen de la base de datos CMS y sus tablas 
 
Fuente: Elaboración propia 
9.4. SERVIDOR 
9.4.1. APACHE 
El servidor web Apache es de código abierto, se encuentra 
entre los servidores más usados del mundo. Una gran ventaja 
del servidor web Apache es la existencia de diferentes 
versiones del programa, que permiten que el servidor funcione 
13 
 
 
en diferentes sistemas operativos, de forma transparente para 
el usuario. 
Ventajas de apache 
• Estructura constituida por módulos. 
• Es multiplataforma. Puede ser usado en servidores 
Windows y Linux lo que amplía sus posibilidades de uso. 
• Es de código abierto y gratis. 
• Alto nivel de seguridad debido a sus actualizaciones 
constantes. 
• Podrás usar .htaccess lo que permite trabajar de forma 
más sencilla con los principales CMS. 
9.5. DISEÑO DEL PROTOTIPO 
El diseño del sitio web está basado en la metodología de XP la que 
cuenta con diferentes módulos y fases de desarrollo. 
La parte interna del sitio web, se gestiona mediante el Backend del 
CMS, que conforma los siguientes módulos: 
• Modulo Inicio: En esta sección se encuentran todos los 
accesos a los demás módulos del sistema. 
• Modulo Slide: en este módulo se gestiona toda la información 
correspondiente a la sección de slide de la parte Frontend de la 
página principal. 
• Modulo Noticias: en este módulo se gestiona toda la 
información correspondiente a la sección de noticias que se 
encuentra en el Frontend de la página principal. 
• Modulo Eventos: En este módulo se gestiona toda la 
información correspondiente a la sección de eventos del 
Frontend de la página principal. 
• Modulo Videos: En este módulo se gestiona toda la 
información correspondiente a la sección de videos del 
Frontend de la página principal. 
• Modulo Bolsa de Trabajo: En este módulo se gestiona toda la 
información correspondiente a la sección de bolsa de trabajo 
del Frontend de la página principal. 
• Modulo Colegiados: En este módulo se gestiona la 
información concerniente a los miembros colegiados 
14 
 
 
pertenecientes al Consejo Departamental Loreto, de manera 
interna para la realización de reportes. 
La parte externa (publica) se conforma de los siguientes módulos: 
• Modulo Principal: en esta sección se encuentra toda la información 
principal de todos los demás módulos. 
• Modulo Slide: En esta sección se encuentras un carrusel de todas las 
imágenes agregas en el módulo Slide del Backend. 
• Modulo Noticias: En esta sección se encuentra toda la información 
relacionada con el módulo Noticias del Backend. 
• Modulo Eventos: En esta sección se encuentra toda la información 
relacionada con el módulo Eventos del Backend. 
• Modulo Convenios: En esta sección se entra los logotipos de las 
entidades que mantienen convenio con el Consejo Departamental de 
Loreto. 
 
9.6. FASE DE DESARROLLO 
En esta etapa se presentan las funcionalidades principales del proyecto. 
El sistema está conformado por dos partes: Backend y Frontend. 
Backend: 
• Módulo de Ingreso: para acceder a la parte administrativa del 
sistema se ingresa por medio de un Login. 
Figura 1: Inicio de Sesión. 
 
Fuente: Elaboración propia 
15 
 
 
• Módulo de inicio: en esta sección se muestra todas las opciones 
disponibles de la parte administrativa de la página web. 
Figura 2: Inicio. 
 
Fuente: Elaboración propia 
• Modulo Slide: En esta sección se muestra las opciones de 
agregar, eliminar y modificar el orden de las imágenes.Figura 3: Sección Slide: Opciones agregar y eliminar imágenes. 
 
Fuente: Elaboración propia 
Figura 4: Vista de imágenes Slide. 
16 
 
 
 
Fuente: Elaboración propia 
 
Figura 5: Ordenar Slide. 
 
Fuente: Elaboración propia 
 
• Modulo Noticias: Cuando se acceda a la sección de noticias, se 
mostrara todas las noticias creadas, con la opción de crear, 
modificar la información y el orden de presentación. 
Figura 6: Modulo Noticias. 
 
Fuente: Elaboración propia 
Figura 7: Editar Noticia (Articulo). 
17 
 
 
 
 
Fuente: Elaboración propia 
 
Figura 8: Actualizar Orden Noticias (Artículos) 
 
Fuente: elaboración propia 
• Modulo Eventos: Cuando se accede a la sección de eventos se 
muestra todas las imágenes agregadas, con las opciones de 
agregar descripción y/o actualizar, eliminar y actualizar orden de 
presentación. 
Figura 9: Modulo eventos. 
 
Fuente: Elaboración Propia. 
Figura 10: Sección Actualizar. 
18 
 
 
 
Fuente: Elaboración propia 
Figura 11: Actualizar Orden Eventos 
 
Fuente: Elaboración propia 
• Modulo Videos: Cuando se accede a la sección de videos se 
muestra todos los videos agregados, con las opciones de agregar 
nuevo video, eliminar y actualizar orden de presentación. 
Figura 12: Sección Videos. 
 
Fuente: Elaboración propia. 
Figura 13: Actualizar Orden de Presentación. 
19 
 
 
 
Fuente: Elaboración propia 
• Bolsa de Trabajo: Al ingresar a la sección de bolsa de trabajo, se 
muestra diferentes opciones de agregado, eliminación, editar. 
Figura 14: Creación de bolsa de trabajo. 
 
Fuente: Elaboración propia. 
Figura 15: Formulario de convocatoria 
 
 Fuente: Elaboración propia 
20 
 
 
• Módulo de Colegiados: Al ingresar a la sección de colegiados se 
muestra las opciones de agregar, editar y eliminar convocatorias. 
Figura 16: Modulo Colegiados 
 
Fuente: Elaboración propia. 
Figura 17: Formulario Registro Colegiado 
 
Fuente: Elaboración propia 
Figura 18: Registro Colegiados 
 
Fuente: Elaboración propia 
 
21 
 
 
 
 
Frontend: Es la sección principal de parte visual del sistema donde podrán 
interactuar los interesados. 
• Módulo de inicio: 
Figura 19: Modulo de Inicio 
 
Fuente: Elaboración propia 
• Módulo de Slide: En esta sección se muestra todas imágenes 
agregadas en el modulo slide de la parte administrativa. 
Figura 20: Modulo Slide. 
 
• Modulo Noticias: En esta sección se muestra los 
artículos(noticias) agregados desde el modulo noticia de la parte 
administrativa, con la opción de “Leer más”, que nos dirigirá a otra 
sección para la lectura completa del artículo. 
Figura 21. Modulo Noticias 
22 
 
 
 
Fuente: Elaboración propia 
• Modulo Eventos: en esta sección se muestra todas imágenes de 
los eventos agregados desde el modulo eventos de la parte 
administrativa. 
Figura 22. Modulo Eventos 
 
Fuente: Elaboración propia 
Figura 23. Vista amplia de Eventos 
 
Fuente: Elaboración propia 
• Modulo Convenios: En esta sección se muestra los logotipos de 
todas las entidades que tienen convenio con el Consejo 
Departamental Loreto. 
23 
 
 
Figura 24: Modulo Convenios 
 
Fuente: Elaboración propia 
10. POBLACIÓN Y MUESTRA 
10.1. Población 
La población esta conformada por todos los miembros colegiados que 
ingrese a sitio web, así mismo los encargados de administrar el sitio 
web. 
11. DISEÑO DE INVESTIGACIÓN 
El presente trabajo es de diseño no experimental, ya que el tratamiento se 
desarrollara sin la necesidad de manipular las variables independientes, lo 
que consiste que los individuos no estarán sujetos a tratamientos, 
condiciones o estímulos. Por lo que se busca observar su comportamiento 
dentro de un contexto natural. 
12. OPERACIONALIZACION DE VARIABLES 
Variable Definición Tipo Indicador Escala de 
medición 
Fuente de 
verificación 
 
Portal Web 
Es un sitio de internet 
que se caracteriza por 
facilitar el acceso a 
distintos recursos o 
servicios de World 
Wide Web. 
Independiente Usabilidad: 
Fácil manejo 
de la parte 
administrativa 
del sistema. 
Cualitativa Tiempo de Uso 
del sistema. 
Cantidad de 
Contenido en el 
sitio web. 
24 
 
 
CMS 
(Content 
Management 
System) 
Es una aplicación de 
software que permite a 
los usuarios colaborar 
en la creación, edición 
y producción de 
contenido digital: 
páginas web, blogs, 
etc. 
Dependiente Usabilidad: 
Facilidad de 
manejo en 
creación, 
edición y 
producción 
de contenido. 
Cualitativa Tiempo de uso 
del sistema 
Administrativo. 
Cantidad de 
contenido subido 
al sistema. 
 
13. RESULTADOS 
En el punto de la formulación del problema, no encontramos con la 
necesidad de desarrollar una herramienta informática que permita al 
Colegio de Ingenieros – Consejo Departamental Loreto contar con un 
espacio virtual de fácil manejo para la administración de contenido digital, 
donde puedan promocionar las actividades, eventos, noticias, entre otros 
contenidos para sus interesados. 
Se logro desarrollar un CMS para el Consejo Departamental Loreto, bajo 
la metodología XP, con un modelo de arquitectura MVC. 
El diseño de la parte administrativa (Backend) y principal (Frontend) cuenta 
con una interfaz responsiva gracias al manejo de las herramientas HTML, 
CSS y Bootstrap. 
 
14. CONCLUSIONES 
La metodología XP logro captar los requerimientos necesarios del cliente, 
permitió definir las actividades a realizar bajo la metodología de 4 fases, 
así mismo realizar las correcciones y mejoras correspondientes con una 
comunicación eficiente con el cliente. 
El modelo de arquitectura de programación MVC permitió realizar un 
trabajo eficiente con la programación orientada a objetos, aplicando 
modelos de seguridad informática para proteger la información. 
Ante cualquier propuesta de mejorar del CMS, este no supondrá un 
problema al momento de la interpretación de su estructura, la 
interpretación de su codificación y la incorporación de nuevos módulos. 
Al ser un diseño responsivo, genera estética a la parte visual principal de 
sitio (Frontend), permite su adaptación a diferentes tipos de pantallas y de 
diferentes tamaños. 
25 
 
 
15. RECOMENDACIONES 
Es primordial el uso de metodologías de desarrollo de software, puesto que 
por medio de sus procedimientos nos permite obtener los requerimientos 
del cliente, la identificación de las actividades a realizar, el desarrollar y 
documentación de los proyectos informáticos de la mejor manera. 
Antes de seleccionar alguna herramienta CMS es recomendable realizar 
una investigación y un análisis para seleccionar la herramienta mas 
adecuada, dependiendo de las necesidades de cada proyecto. 
Ante el desarrollo de cualquier sistema informático es recomendable la 
implementación de medidas de seguridad informática, para mantener la 
información y datos de las organizaciones
26 
 
 
16. MATRIZ DE CONSISTENCIA 
TITULO PROBLEMA OBJETIVOS HIPOTESIS VARIABLES INDICADORES ESTRATEGIA 
 
 
 
 
IMPLEMENTACIÓN 
DE UN CMS PARA 
EL COLEGIO DE 
INGENIEROS DEL 
PERÚ – CONSEJO 
DEPARTAMENTAL 
LORETO 
 
 
 
¿La 
implementación de 
un CMS permitirá al 
Consejo 
Departamental 
Loreto la 
publicación de sus 
contenidos digitales 
por medio de un 
sitio web? 
 
 
Objetivo General 
Implementación de 
portal web para el 
colegio de ingenieros 
del Perú – Consejo 
Departamental Loreto 
mediante el uso de 
herramienta informática 
CMS. 
Objetivos Específicos: 
 
Analizar la tecnología y 
las herramientas que se 
tomara en cuenta, las 
cuales serán de 
Software Libre. 
Desarrollar un CMS 
para mantener la 
información actualizada 
para el portal web del 
Consejo Departamental 
Loreto y sus Capítulos. 
Diseñar las diferentes 
secciones bajo el 
modelo MVC (Modelo, 
Vista, Controlador). 
Proporcionar 
información actualizada 
sobre los servicios, 
eventos, noticias, bolsa 
de trabajos de la 
institución. 
 
 
 
 
La 
implementaciónde un CMS 
permitirá al 
Consejo 
Departamental 
la publicación y 
promoción de 
sus contenidos 
digitales en un 
sitio web 
 
VARIABLE 
INDEPENDIENTE: 
Sitio Web 
 
Usabilidad: 
Fácil manejo de la 
parte administrativa 
del sistema. 
 
 
• Recolección de 
información 
• Análisis de 
requerimientos 
• Análisis de Diseño e 
infraestructura de 
CMS 
• Desarrollo del 
sistema con la 
arquitectura MVC 
VARIABLE 
DEPENDIENTE: 
CMS (Content 
Management 
System) 
Usabilidad: 
Facilidad de manejo 
en creación, edición 
y producción de 
contenido. 
27 
 
 
17. BIBLIOGRAFIA 
• Caicedo, E (2012). sitio web con administración en formato CMS y 
su incidencia en la promoción de los servicios de la unidad 
oncológica Solca de la ciudad de Ambato (Trabajo de 
Investigación) Universidad Técnica de Ambato, Ecuador. 
• Herrera, J (2020). Análisis de CMS para la implementación del sitio 
web de GLO SHOP utilizando norma ISO 25000, (Trabajo de Tesis) 
Universidad Técnica de Machala, Ecuador. 
• Vega, A. & Santana R. (2015) Diseño, desarrollo e implementación 
de un sitio web dinámico utilizando el CMS JOOMLA y GOOGLE 
ANALYTICS para la maestría en seguridad informática aplicada 
MSIA – ESPOL (Trabajo de Investigación) Escuela Superior 
Politécnica del Litoral, Ecuador, obtenido de 
http://www.dspace.espol.edu.ec/xmlui/handle/123456789/31230 
• Rodríguez, M. (2010). Implementación de un sistema de 
administración de cursos (CMS) como alternativa para ofertar 
educación continua y a distancia. (Artículo de investigación) 
Universidad de Guadalajara, México, obtenido de 
http://udgvirtual.udg.mx/apertura/index.php/apertura/article/view/1
79/194 
• Zavaleta, D. (2013). análisis, diseño e implementación de un 
sistema de administración de contenidos CMS (content 
management system) para un portal web corporativo. (Trabajo de 
tesis) Pontificia Universidad católica del Perú, Perú, obtenido de 
http://hdl.handle.net/20.500.12404/1732 
• Quispe, J.J. & Quispe J.G. (2015). Gestión del conocimiento para 
el desarrollo del portal web aplicando CMS LIFERAY. (Trabajo de 
Tesis) Universidad Andina, Perú, obtenido de 
http://repositorio.uancv.edu.pe/handle/UANCV/357 
• García, C.A & Zurita C.V. (2015) Estudio comparativo de los 
Gestores De Contenido Joomla Y Drupal Php para La creación De 
la página web de la Facultad De Ciencias Administrativas, Gestión 
Empresarial E Informática De La Universidad Estatal De Bolívar, 
Ecuador, obtenido de 
http://dspace.ueb.edu.ec/handle/123456789/2697 
http://www.dspace.espol.edu.ec/xmlui/handle/123456789/31230
http://udgvirtual.udg.mx/apertura/index.php/apertura/article/view/179/194
http://udgvirtual.udg.mx/apertura/index.php/apertura/article/view/179/194
http://hdl.handle.net/20.500.12404/1732
http://repositorio.uancv.edu.pe/handle/UANCV/357
http://dspace.ueb.edu.ec/handle/123456789/2697
28 
 
 
18. ANEXOS 
18.1. ANEXO I 
18.1.1. Presentación 
El presente trabajo tiene como finalidad demostrar de manera 
organizada y detallada el trabajo realizado en la 
implementación de un CMS para el Colegio de Ingenieros – 
Consejo Departamental Loreto, para su desarrollo se aplico las 
fases de la metodología XP, análisis, diseño, codificación y 
pruebas, con la arquitectura MVC. 
18.1.1.1. Objetivo del Informe 
El presente trabajo tiene como objetivo cumplir con el plan de 
estudio del decimo ciclo establecida en la curricular de la 
carrera profesional de Ingeniería de Sistemas e Informática de 
la Universidad Nacional de la Amazonia Peruana. 
Cumpliendo con los requisitos establecidos en el Reglamento 
de Practicas Pre-Profesionales. 
18.1.1.2. Periodo de Practicas 
Las practicas Pre-Profesionales se llevaron a cabo el 10 de 
febrero del 2021 hasta el 15 de mayo del 2021, con un periodo 
aproximado de 3 meses. 
18.1.1.3. Institución y área donde desarrollo sus practicas 
Las practicas Pre-Profesionales se llevó a cabo en: 
• Colegio de Ingenieros del Perú-Consejo 
Departamental Loreto. 
Área: 
• Capítulo de Sistemas, Computación, Informática Y 
Afines. 
18.1.1.4. Funciones del área donde realizó sus prácticas 
El capitulo de Sistema, Computo y Afines realiza las 
siguientes funciones: 
• Planificar y llevar a cabo eventos de capacitación. 
• Planificación de actividades para los miembros del 
capítulo. 
29 
 
 
• Mantenimiento de los equipos de hardware que 
dispone el consejo departamental de loreto. 
• Revisión periódica de los sistemas de Deudas. 
• Creación de contenido multimedia para redes 
sociales. 
18.2. ANEXO II 
18.2.1. ASPECTOS GENERALES DE LA EMPRESA 
18.2.1.1. RAZON SOCIAL 
Colegio de Ingenieros del Perú – Consejo Departamental 
Loreto 
18.2.1.2. ACTIVIDADES QUE REALIZA 
El Capítulo de Sistemas, Computo y Afines es el encargado 
de aportar al mejoramiento y optimización de herramientas 
de gestión, métodos y sistemas. 
18.2.1.3. ASPECTOS TECNICOS 
18.2.1.3.1. Ubicación Geográfica 
Dirección: Jirón Putumayo 1132, Iquitos. 
18.2.1.3.2. Plano de Ubicación 
 
Fuente: Google Maps 
 
 
 
 
 
 
30 
 
 
18.2.1.3.3. Organización 
Asamblea del Consejo Departamental Loreto 
 
 
 
18.2.1.3.4. Infraestructura Tecnológica: Hardware y 
Software 
Hardware: 
• 4 computadoras de escritorio 
• 4 modem 
• 1 UPS 
• 1 proyector 
Software: 
• Paquete de herramientas Office 
• Antivirus Eset 
• Chrome (Navegador Web) 
 
 
 
 
 
 
 
 
 
 
 
31 
 
 
 
18.3. ANEXO III 
• ACTIVIDADES REALIZADAS 
Actividades 
Semanas 
1 2 3 4 
5 6 7 8 9 1
0 
1
1 
12 
Revisión Bibliográfica 
 
Captura de Requisitos 
Elaboración de plan de 
actividades 
 
Selección de Herramientas 
Diseño de Arquitectura 
Creación de Base de Datos 
 
Codificación de Módulos: 
(Ingreso, Inicio, Slide, Noticias, 
Eventos, Videos) 
 
 
Test Backend 
 
Diseño y codificación Frontend 
 
Testeo Frontend 
 
Elaboración de informe final. 
 
 
18.4. ANEXO IV 
18.5. ANEXO V 
18.6. ANEXO VI