UNIVERSIDAD SIMÓN BOLÍVAR

DECANATO DE ESTUDIOS PROFESIONALES

COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN

DESARROLLO DE APLICACIONES WEB PARA GENERAR REPORTES

GERENCIALES

Por:
Andrés José Guzmán Meléndez

INFORME DE PASANTÍA
Presentado ante la Ilustre Universidad Simón Bolı́var
como requisito parcial para optar al tı́tulo de
Ingeniero de la Computación

Sartenejas, Octubre 2019

 UNIVERSIDAD SIMÓN BOLÍVAR
DECANATO DE ESTUDIOS PROFESIONALES
COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN

DESARROLLO DE APLICACIONES WEB PARA GENERAR REPORTES

GERENCIALES

Por:
Andrés José Guzmán Meléndez

Realizado con la asesorı́a de:

Tutor Académico: Prof. Josué Ramı́rez, MSc.
Tutor Industrial: Ing. José Martı́nez

INFORME DE PASANTÍA
Presentado ante la Ilustre Universidad Simón Bolı́var
como requisito parcial para optar al tı́tulo de
Ingeniero de la Computación

Sartenejas, Octubre 2019

 v

UNIVERSIDAD SIMÓN BOLÍVAR

DECANATO DE ESTUDIOS PROFESIONALES
COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN

DESARROLLO DE APLICACIONES WEB PARA GENERAR REPORTES

GERENCIALES

INFORME DE PASANTÍA LARGA

Realizado por: Andrés José Guzmán Meléndez
Con la asesorı́a de: Prof. Josué Ramı́rez, MSc., Ing. José Martı́nez.

RESUMEN

El presente documento tiene por objetivo describir el proceso de desarrollo de las

aplicaciones web Suradem Datos y Suradem Horas Hombre durante el perı́odo de pasantı́a
en la empresa Suradem. Suradem Datos es una aplicación web que permite consultar,
modificar y agregar datos sobre los trabajadores de la empresa y las obras en las que
trabajan o han trabajado. Su objetivo es permitir una consulta fácil y rápida sobre algún
trabajador/obra especı́fica o un grupo de ellos ası́ como generar reportes y estadı́sticas de los
mismos. Permite mostrar datos como histórico de cargos-salarios, obras asignadas, estado
del trabajador o alguna observación sobre el mismo. Estos datos se presentan en reportes
que pueden ser filtrados y descargados en archivos PDF (Portable Document Format) o
Microsoft Excel. La aplicación se alimenta de los datos del sistema de nómina mediante
subida de archivos Microsoft Excel exportados del mismo. Se realizaron 2 versiones de
la aplicación cuya diferencia es la base de datos y su manejador (PostgreSQL y Sqlite).
Suradem Horas Hombre es una aplicación web que permite la carga de los partes diarios
(horas hombre) y permite sacar estadı́sticas como horas necesarias por fase de construcción.
El desarrollo de ambas aplicaciones fue realizado en Node JS y Express haciendo uso de las
plataformas Github y Cloud9 bajo la metodologı́a ágil Scrum y las prácticas de desarrollo
guiado por pruebas TDD (Test-Driven Development), culminando el desarrollo de ambas de
manera satisfactoria.

Palabras claves: Aplicación Web, Reportes, Scrum, TDD, NodeJS.

 vi

ÍNDICE

RESUMEN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
ÍNDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi
LISTA DE TABLAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
LISTA DE FIGURAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
LISTA DE ABREVIACIONES . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
INTRODUCCIÓN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Antecedentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Planteamiento del problema . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Objetivo general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Objetivos especı́ficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Justificación e importancia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1 ENTORNO EMPRESARIAL . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1 Descripción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Historia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Misión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Visión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.6 Ubicación del pasante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 MARCO TEÓRICO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1 Aplicación Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 IDE Integrated Development Environment . . . . . . . . . . . . . . . . . . . 6
2.3 Manejador de base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4 Control de versiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5 PaaS Platform-as-a-Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.6 Sistemas de información gerencial . . . . . . . . . . . . . . . . . . . . . . . . 7
2.7 Parte Diario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 MARCO TECNOLÓGICO . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
 vii

3.2 SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.4 HTML Lenguaje de marcado de hipertexto . . . . . . . . . . . . . . . . . . . 8
3.5 CSS Hojas de Estilo en Cascada . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.6 Manejadores de Base de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.6.1 SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.6.2 Postgresql . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.7 NodeJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.8 Express Js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.9 Programas para control de versiones . . . . . . . . . . . . . . . . . . . . . . . 10
3.9.1 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.9.2 GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.10 Cloud9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.11 Heroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.12 Microsoft Azure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.13 Selenium . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.14 HandleBars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4 MARCO METODOLÓGICO . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1 Historias de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2 Desarrollo guiado por pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2.1 TDD Test-Driven Development . . . . . . . . . . . . . . . . . . . . . 12
4.2.2 ATDD Acceptance Test Driven Development . . . . . . . . . . . . . . 13
4.2.3 BDD Behaviour Driven Development . . . . . . . . . . . . . . . . . . 13
4.3 Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.3.1 Equipo Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.3.2 Eventos Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3.3 Artefactos Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3.4 Principios Scrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5 DESARROLLO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.1 Desarrollo Suradem Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2 Sprint 1: 28 Enero - 22 Febrero . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2.1 Vistas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
 viii

5.2.2 Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.2.3 Historias de Usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
5.3 Sprint 2: 25 Febrero - 5 Abril . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.3.1 Manejo de Usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.3.2 Creación de reportes . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.3.3 Carga de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.4 Sprint 3: 8 Abril - 10 Mayo . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.5 Sprint 4: 13 Mayo - 28 Mayo . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.6 Desarrollo Suradem Horas Hombre . . . . . . . . . . . . . . . . . . . . . . . 28
5.6.1 Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.6.2 Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.6.3 Partes Diarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.6.4 Manejo de Usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.7 Reportes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

CONCLUSIONES Y RECOMENDACIONES . . . . . . . . . . . . . . . . . . 33
Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Recomendaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

REFERENCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
APÉNDICES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
A MANUAL DE USUARIO SURADEM DATOS . . . . . . . . . . . . . . . . . . . 38
B MANUAL DE USUARIO SURADEM HORAS HOMBRE . . . . . . . . . . . . . 100
 ix

LISTA DE TABLAS

5.1 Sprints desarrollo Suradem Datos . . . . . . . . . . . . . . . . . . . . . . . . 17

5.2 Resumen requerimientos y sprints Suradem Datos . . . . . . . . . . . . . . . 27
 x

LISTA DE FIGURAS

1.1 Organigrama Empresa Proyectos Suradem . . . . . . . . . . . . . . . . . . . 5

5.1 Diagrama ERM primer diseño Base de datos - Suradem Datos . . . . . . . . 21

5.2 Diagrama ERM Base de Datos final Suradem Datos . . . . . . . . . . . . . . 28
5.3 Diagrama ERM Base de Datos Horas Hombre . . . . . . . . . . . . . . . . . 30
5.4 Vista de Parte Semanal - Usuario Administrador - Suradem Horas Hombre . 31
 xi

LISTA DE ABREVIACIONES

ABB Asea Brown Boveri. Corporación multinacional de generación de

energı́a eléctrica.
ACID Atomicity, Consistency, Isolation and Durability. Atomicidad,
Consistencia, Aislamiento y Durabilidad.
ATDD Acceptance Test Driven Development. Desarrollo guiado por
pruebas de aceptación.
BDD Behaviour Driven Development. Desarrollo guiado por
comportamiento.
CAPTCHA Completely Automated Public Turing test to tell Computers and
Humans Apart. Prueba de Turing completamente automática y
pública para diferenciar ordenadores de humanos.
CSS Cascading Style Sheets. Hojas de Estilo en Cascada.
CSV Comma Separated Values. Archivo de valores separados por comas.
DBMS Database Management System. Sistema manejador de base de
datos.
ERM Entity–relationship model. Modelo entidad relación.
HTML HyperText Markup Language. Lenguaje de marcas de hipertexto.
IDE Integrated Development Environment. Entorno de desarrollo
integrado.
JS Javascript.
MIS Management Information System. Sistemas de información
gerencial.
PDF Portable Document Formats. Formato de documento portátil.
PaaS Platform-as-a-Service. Plataforma como servicio.
SQL Structured Query Language. Lenguaje de consulta estructurado.
SSL Secure Sockets Layer. Capa de conexión segura.
TDD Test Driven Development. Desarrollo guiado por pruebas.
XHTML eXtensible HyperText Markup Language. Lenguaje de marcas de
hipertexto extensible.
 INTRODUCCIÓN
El presente documento tiene por objetivo describir el proceso de pasantı́a larga
(Enero-Mayo 2019) en la empresa Suradem, que se basó en el desarrollo de las aplicaciones
web Suradem Datos y Suradem Horas Hombre. Acá se presentan la motivación e importancia
de la realización del proyecto, el planteamiento del problema, los objetivos generales y
especı́ficos y el proceso de desarrollo del mismo.
Se querı́an desarrollar 2 aplicaciones web que permitieran generar reportes y estadı́sticas
sobre datos de los empleados y las obras en las que trabajan. Suradem Datos es una
aplicación para poder consultar los datos de los empleados de manera fácil y rápida. Permite
mostrar datos como histórico de cargos-salarios, obras asignadas (los trabajadores pueden
estar asignados a diversas obras de construcción que realiza la empresa), estado del trabajador
(activo, de vacaciones, vetado) o alguna observación especial sobre el mismo. Estos datos se
presentan en reportes y listados que pueden ser fácilmente filtrados y pueden ser descargados
en archivos PDF o Microsoft Excel. La otra aplicación es Suradem Horas Hombre que
permite la carga de los partes diarios (horas hombre) de los trabajadores indicando el
dı́a, obra, fase-etapa de construcción y las horas normales y extras (diurnas y nocturnas)
ejecutadas. Con estos datos permite sacar estadı́sticas como horas hombre necesarias por
fase de construcción, total de horas y distribución semanal.
El presente informe está conformado por cinco capı́tulos:

• Capı́tulo 1 Entorno empresarial.

• Capı́tulo 2 Marco Teórico.

• Capı́tulo 3 Marco Tecnológico.

• Capı́tulo 4 Marco Metodológico.

• Capı́tulo 5 Desarrollo.

Antecedentes

La empresa Suradem guarda los datos de sus empleados en un sistema administrativo

de nómina que no ofrece la posibilidad de ver un histórico de los cargos y salarios que han
tenido los trabajadores. Además este sistema no guarda datos relativos a la obra o proyecto
 2

donde se ha desempeñado el trabajador ni los cargos ocupados en estas. De igual forma los
empleados que ya no están en la compañı́a no se mantienen en el sistema. Para consultar
estos datos se deben revisar los expedientes o nóminas pasadas.

Una de las principales actividades de Suradem es el desarrollo de obras y proyectos para lo

cual necesita contar con un estimado de las horas hombre necesarias para cada fase y etapa
de los mismos y ası́ establecer los costos de acuerdo a ellas.

Planteamiento del problema

Al ser una empresa de construcción Suradem contrata una gran cantidad de empleados
los cuales pueden ser asignados a distintas obras y en distintos cargos. Esto hace necesario
tener una manera de consultar datos de los empleados como su estado (activo, de vacaciones,
ex-empleado), cargos-salarios que ha tenido, obras donde participa o ha participado, ası́
como observaciones y consideraciones especiales.

Al ser una empresa de construcción es necesario conocer la cantidad de horas efectivas y la

distribución de las mismas empleadas para realizar las obras. Esto permitirá sacar estadı́sticas
sobre las horas-hombre ası́ como constatar si las mismas son similares a la planificación y su
distribución por fases y etapas.

Objetivo general

Diseñar, desarrollar y probar dos aplicaciones web, una que permita una consulta fácil y
rápida sobre algún trabajador/obra especı́fica o un grupo de ellos ası́ como generar reportes y
estadı́sticas de los mismos (Suradem Datos). Otra que permita llevar el control de los partes
diarios y horas hombre ejecutadas en las obras y pueda sacar estadı́sticas como horas hombre
necesarias por fase de construcción (Suradem Horas Hombre).

Objetivos especı́ficos

• Diseñar conceptualmente todos los elementos que integrarán las herramientas.

• Construcción del modelo de datos, proceso de extracción de datos y construcción de

las vistas y desarrollo de la lógica de las aplicaciones.

• Desplegar las aplicaciones en el servidor de producción y realizar las configuraciones

del mismo para su correcto funcionamiento.
 3

Justificación e importancia

Suradem considera importante contar con una herramienta donde se puedan realizar
consultas sobre datos de los trabajadores como obras y proyectos donde ha participado,
estado trabajador (activo, vacaciones, ex-empleado, etc.), cargos desempeñados en la
empresa y salario asociado, observaciones y datos personales. Esto permitirá agilizar los
procesos de búsqueda de información del personal de recursos humanos y puede servir de
ayuda para el departamento de construcción al obtener referencias más rápidas sobre los
participantes en las diferentes obras. También permite al personal de recursos humanos
tener datos estadı́sticos actualizados sobre los trabajadores ya sea de datos personales
como edad, sexo, estado de salud; o de datos laborales como empleados por departamento,
observaciones, participaciones en obras, entre otros.

En las obras y proyectos de construcción los partes diarios de trabajo contienen

información muy valiosa ya que reflejan cómo se desarrolla el trabajo en la empresa. Tener una
herramienta que facilite el procesamiento y almacenaje de esa información de manera digital
permitirá un mejor estudio de la misma, además de servir de respaldo. De allı́ la importancia
del desarrollo de una aplicación como Suradem Horas Hombre que lleve el control de las horas
ejecutadas en cada etapa de la obra.
 CAPÍTULO 1
Entorno empresarial

En este capı́tulo se presenta una descripción de la empresa Suradem en que se desarrolló

la pasantı́a. Su descripción, misión, visión, estructura ası́ como el área donde se desempeñó
el pasante.

1.1 Descripción

Proyectos Suradem C.A. es una contratista general de construcción que posee una fábrica
de estructuras metálicas que participa activamente en la industria venezolana desde hace más
de 50 años. Su trayectoria y crecimiento están estrechamente asociados al desarrollo del paı́s,
estando presente como contratista de las obras de mayor relevancia, tanto de infraestructura
como de desarrollo eléctrico e industrial, acometidas por el sector público y privado.[1]

1.2 Historia

Suradem primero se estableció en Venezuela como SVECA en 1956 participando en los

proyectos más importantes de transmisión de energı́a. Ampliando sus horizontes con la
creación de Suradem (Suramericana de Estructuras Metálicas) en 1975.

En 1995 el grupo ABB (Asea Brown Boveri S.A) adquiere la compañı́a y lleva a
cabo importantes obras hasta el año 2006 que como parte de su estrategia global decide
desincorporar este negocio en Venezuela. De esta forma en marzo del año 2006, nace
Suradem, quién adquiere esta división de negocios de ABB en Venezuela, manteniendo activa
su participación en proyectos del área de la construcción y desarrollo eléctrico e industrial.[1]

1.3 Misión

Proveer servicios de ingenierı́a, manufactura, y construcción de proyectos de

infraestructura eléctrica con los más altos estándares de calidad, eficacia y efectividad
contando con recursos humanos altamente calificados, motivados y enfocados en la
satisfacción de nuestros clientes.[1]
 5

1.4 Visión

Ser una empresa lı́der en el sector eléctrico reconocida por la calidad de nuestro trabajo
y compromiso con el desarrollo social y sustentable del paı́s.[1]

1.5 Estructura

La estructura de la empresa Suradem se puede observar en el siguiente Organigrama. 1.1

Figura 1.1: Organigrama Empresa Proyectos Suradem

1.6 Ubicación del pasante

El desarrollo de la pasantı́a fue llevado a cabo en el Departamento de Recursos Humanos

bajo la supervisión de la Gerente de Recursos Humanos Marı́a Elena Silva y del tutor
industrial, el ingeniero José Martı́nez, Gerente de Sistema y Tecnologı́a.
 CAPÍTULO 2
Marco teórico

En este capı́tulo se presentan los aspectos teóricos que sustentan y respaldan el desarrollo
del proyecto de pasantı́a. A continuación se describen los conceptos que permiten explicar el
problema planteado.

2.1 Aplicación Web

Es un programa de software que corre en un servidor web por lo cual se debe acceder a ella
a través de un navegador web. Una de las ventajas es que puede utilizarse desde cualquier
plataforma con capacidades de navegación sin importar su sistema operativo.[2]

2.2 IDE Integrated Development Environment

Un IDE (Entorno de desarrollo integrado) es una aplicación que permite a los

desarrolladores crear programas de computadoras. Es integrado ya que en él se combinan
diferentes herramientas que facilitan el proceso de desarrollo como: editor de código, debugger
(depurador o probador de errores) y compilador (transforma el programa en ejecutable).
Además de estas los IDE pueden ofrecer otros tipos de ayudas y herramientas como
compatibilidad y revisor de sintaxis de distintos lenguajes, controladores de versión, entre
otras.[3]

2.3 Manejador de base de datos

Un manejador de base de datos (DBMS Database Management System) es un programa

que ofrece los mecanismos para catalogar, organizar, almacenar, editar y hacer consultas
de los datos. La mayorı́a de ellos utilizan SQL (Structured Query Language, lenguaje de
consulta estructurado). Algunos ejemplos son MySQL, Postgresql, Oracle, Microsoft Access
y SQLite. [4]
 7

2.4 Control de versiones

El control de versiones en computación es el mecanismo usado para llevar un seguimiento

de las distintas versiones de los programas y archivos. Es importante en el desarrollo de
software ya que permite un análisis del código y poder separar qué versión se utilizó en cada
etapa y asociarla al resultado que produjo, especialmente en el desarrollo colaborativo donde
varias personas trabajan con los mismos archivos. Facilita el desarrollo al no tener que llevar
un control manual renombrando los archivos utilizados con cada cambio y actualización.
Ofrece 2 grandes ventajas: permite el desarrollo colaborativo sobre los mismos archivos, ya
sea bloqueándolos o usando una copia que luego deberá unificarse con los cambios posteriores.
Además permite llevar el seguimiento de los archivos y los cambios realizados en los mismos.
[5, 6]

2.5 PaaS Platform-as-a-Service

Plataforma como servicio (PaaS) es un entorno de desarrollo e implementación que

se ofrece a través de Internet. Permite utilizar la infraestructura de un proveedor de
servicios para sustentar el funcionamiento de las aplicaciones web en todas sus fases
(compilación, pruebas, implementación, administración y actualización). Con esto se delegan
las funciones de administración de infraestructura, almacenamiento y mantenimiento al
proveedor. Además pueden ofrecer herramientas de desarrollo, servicios de inteligencia
empresarial y sistemas de administración de bases de datos las cuales se acceden a través de
internet.[7]

2.6 Sistemas de información gerencial

Los sistemas de información gerencial (MIS Management Information System) son

el conjunto de componentes interrelacionados que recolectan (o recuperan), procesan,
almacenan y distribuyen información para apoyar los procesos de negocios y la administración
de la gerencia. Los MIS obtienen datos de las operaciones básicas de la empresa y los procesan
para ofrecer reportes sobre el desempeño actual de la organización lo que permite supervisar
y controlar la empresa, además de predecir su desempeño en el futuro. [8, p.47]

2.7 Parte Diario

El parte diario es un sumario de los eventos realizados en el dı́a de trabajo de una obra.
Es un registro de los trabajadores/empleados, equipo utilizado, tiempo y horas de trabajo,
accidentes, entre otros. [9]
 CAPÍTULO 3
Marco tecnológico

En este capı́tulo se describen los aspectos tecnológicos relevantes para la comprensión del
proyecto, ası́ como las herramientas utilizadas durante la pasantı́a.

3.1 Javascript

JavaScript es un lenguaje ligero e interpretado, basado en prototipos, dinámico, que

soporta estilos de programación funcional, orientada a objetos e imperativa. Es utilizado
principalmente como lenguaje de script para páginas web, aunque también es usado en
entornos sin navegador como Node.js.[10]

3.2 SQL

Structured Query Language, lenguaje de consulta estructurada, es un lenguaje de

dominio especı́fico diseñado para administrar y recuperar información de las bases de datos
relacionales.[11]

3.3 JQuery

Biblioteca de JavaScript, que permite simplificar la manera de interactuar con los

documentos HTML facilitando su manipulación, manejo de eventos, animaciones, entre
otros.[12]

3.4 HTML Lenguaje de marcado de hipertexto

HyperText Markup Language (lenguaje de marcas de hipertexto), es el lenguaje de

marcado estándar utilizado para la elaboración de páginas web. Utiliza las etiquetas y el
marcado para definir sus elementos y las relaciones entre ellos permitiendo categorizar la
información a mostrar en las páginas web.[13]
 9

3.5 CSS Hojas de Estilo en Cascada

Hojas de Estilo en Cascada 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. Es muy usado para establecer el diseño visual de los documentos web, e interfaces
de usuario escritas en HTML o XHTML.[14]

3.6 Manejadores de Base de Datos

3.6.1 SQLite

SQLite es un sistema de gestión de bases de datos relacional SQL pequeño, rápido,

autocontenido, sin servidor y confiable. Compatible con ACID (Atomicidad, Consistencia,
Aislamiento y Durabilidad) y contenida en una pequeña biblioteca escrita en C. El conjunto
de la base de datos (definiciones, tablas, ı́ndices, y los propios datos), son guardados como un
sólo archivo del cual SQlite lee y escribe directamente (no utiliza un servidor como proceso
intermediario).[15]

3.6.2 Postgresql

PostgreSQL es un manejador de base de datos objeto-relacional de código abierto que

utliza y extiende el lenguaje SQL. Es compatible con ACID, cuenta con gran soporte para
operaciones concurrentes y ofrece muchas funcionalidades para ayudar a los desarrolladores
y administradores sin importar si el conjunto de datos es grande o pequeño.[16]

3.7 NodeJs

Es un entorno de ejecución para JavaScript construido con el motor de JavaScript de

Chrome. Concebido como un entorno de ejecución de JavaScript orientado a eventos
ası́ncronos, Node está diseñado para construir aplicaciones en red escalables.[17]

3.8 Express Js

Es una infraestructura o framework de aplicaciones web Node.js mı́nima y flexible que

proporciona un conjunto sólido de caracterı́sticas para las aplicaciones web y móviles.[18]
 10

3.9 Programas para control de versiones

3.9.1 Git

Git es un sistema de control de versiones distribuido de código abierto y gratuito, diseñado

para manejar desde proyectos pequeños hasta proyectos muy grandes con rapidez y eficiencia.
Permite llevar el registro de los cambios de archivos y sincronizar el trabajo que varias
personas realizan.[19]

3.9.2 GitHub

GitHub es una plataforma en lı́nea para desarrolladores que sirve como alojamiento de
repositorios (carpeta que contiene los archivos de interés para realizar el control de versiones)
de Git.[20, p.195]

3.10 Cloud9

Cloud9 es un entorno de desarrollo integrado (IDE) en lı́nea que funciona a través

del navegador. Permite escribir, ejecutar y depurar el código directamente además de
contar con herramientas esenciales para los lenguajes de programación más conocidos, como
JavaScript, Python, PHP. Permite trabajar en los proyectos desde cualquier sitio con conexión
a Internet.[21]

3.11 Heroku

Heroku es una plataforma como servicio (PaaS) que funciona como contenedor de
sistemas con servicios de datos integrados. Esto permite desplegar y correr aplicaciones
web desde su plataforma donde ofrecen soporte para diversos lenguajes y herramientas para
desarrolladores.[22]

3.12 Microsoft Azure

Microsoft Azure ofrece una plataforma en lı́nea (PaaS) para el despliegue y hospedaje de
aplicaciones web. Con compatibilidad para .NET, Java, Node.js, PHP, Python y Ruby. La
plataforma está totalmente administrada para realizar tareas de aplicación de revisiones del
sistema operativo, aprovisionamiento de capacidad, servidores y equilibrio de carga. [23]
 11

3.13 Selenium

Selenium es una herramienta que permite automatizar las acciones del navegador web.
Permite crear y ejecutar script de pruebas de ejecución y regresión que corren de forma
automatizada en el navegador.[24]

3.14 HandleBars

Handlebars es un motor de plantillas escrito en Javascript que funciona en Express

Js y permite generar vistas HTML a partir de un un conjunto de datos pasados como
argumento y una plantilla hbs (documento HTML con instrucciones semánticas sencillas
como condicionales e iteraciones).[25]
 CAPÍTULO 4
Marco metodológico

En este capı́tulo se presenta la metodologı́a utilizada para el desarrollo del proyecto,

indicando sus caracterı́sticas, fases y documentos elaborados. Además, se explican las
actividades que se realizan en cada etapa y la planificación de cada una.

4.1 Historias de usuario

Para especificar los requerimientos del software se debe contar con un mecanismo que
nos permita convertir los requerimientos en algo más detallado que facilite trasladarlos al
desarrollo. Las historias especifican desde el punto de vista del usuario qué funcionalidad
necesita del sistema mediante una descripción corta donde se incluye el rol del usuario, qué
quiere realizar y para qué.[26]

4.2 Desarrollo guiado por pruebas

4.2.1 TDD Test-Driven Development

El Test-driven development (desarrollo guiado por pruebas) es una práctica de

programación basada en ciclos cortos de desarrollo con las siguientes reglas:

• Escribir una prueba con alguna tarea que se requiera del programa.

• Correr la prueba (fallará ya que no se ha realizado el código para que se cumpla).

• Escribir el código necesario y lo más simple posible hasta que pase la prueba.

• Refactorizar el código.

• Repetir proceso con la siguiente prueba.

La práctica TDD permite reemplazar el ciclo de ejecutar el código y luego probar por otro
donde primero se escribe la prueba y luego el código que la cumpla. [27, 28]
 13

4.2.2 ATDD Acceptance Test Driven Development

El Acceptance Test Driven Development (desarrollo guiado por pruebas de aceptación) es

un tipo de TDD donde las pruebas son cumplidas o pasadas cuando se cumplen los criterios
de aceptación, generalmente creados junto con el dueño del producto o el cliente. Estos
criterios representan el punto de vista del cliente y lo que se quiere del producto.[29]

4.2.3 BDD Behaviour Driven Development

El Behaviour Driven Development (desarrollo guiado por comportamiento) es un

refinamiento de las prácticas TDD y ATDD, donde se define el comportamiento que debe
seguir el sistema para cumplir los criterios de aceptación. De este modo las pruebas se pueden
automatizar de una manera más sencilla. Además los comportamientos deben estar escritos
en un lenguaje natural que sea entendible para todos los involucrados (cliente, desarrolladores,
probadores, entre otros).[29, 26]

4.3 Scrum

Scrum es un marco de trabajo usado para manejar el desarrollo de productos. Permite

trabajar en proyectos complejos con estrategias de adaptación ante problemas que permiten
entregar productos de alta calidad. No es un proceso o técnica especı́fica sino un conjunto de
lineamientos y estructura a seguir en el desarrollo de los proyectos. Scrum se compone de:
equipo Scrum y sus roles, eventos, artefactos y principios o reglas.[30]

4.3.1 Equipo Scrum

El Equipo Scrum está formado por las personas involucradas en el desarrollo del producto,
las cuales se dividen en los siguientes roles:

• Dueño producto: Es el responsable del producto, debe ser una sola persona y es la
encargada de manejar la lista de requerimientos del producto y asegurar que se lleve a
cabo.

• Equipo desarrollo: Los profesionales encargados de realizar las tareas de desarrollo.

• Maestro Scrum: Responsable de promover y ayudar a que se cumplan, sigan y

entiendan los lineamientos Scrum de manera adecuada.[30]
 14

4.3.2 Eventos Scrum

Los eventos scrum son los que estructuran el tiempo de desarrollo del producto y aseguran
que no se desperdicie. Los eventos scrum son:

• Sprint: Ciclo básico del Scrum donde se completa una versión usable y entregable del
producto.

• Planificación sprint: Se estructura qué cantidad de trabajo debe realizarse en el

sprint y en qué tareas debe ser dividido para completar una versión usable y entregable.

• Scrum diario: Evento diario donde se evalúa qué se hizo ese dı́a y cómo contribuye
al desarrollo del sprint. Permite un seguimiento diario para encontrar y solucionar
posibles problemas que incluso pueden llevar a una reestructuración de las tareas o del
sprint.

• Revisión de sprint: Se revisa lo realizado en el sprint y si cumple lo planeado de

acuerdo a la lista de requerimientos.

• Retrospectiva de sprint: Se evalúa el sprint anterior para encontrar posibles

problemas a corregir y cosas a mejorar. Se planifica cómo introducir o cumplir esas
correcciones para el siguiente sprint. [30]

4.3.3 Artefactos Scrum

• Pila del producto (Product Backlog): consiste en la lista de requerimientos que

se deben cumplir para culminar el producto.

• Pila del sprint (Sprint Backlog): lista de requerimientos de la pila del producto a
culminar durante el sprint. También puede incluir las tareas necesarias para cumplir
cada requerimiento.

• Incremento: Es el trabajo realizado en cada sprint. Al término de todos los sprint el

conjunto de incrementos realizados deben concluir con la versión final del producto.[30]

4.3.4 Principios Scrum

La metodologı́a Scrum requiere que los siguientes principios estén presentes en todos los
procesos del desarrollo.

• Transparencia: Las decisiones de planificación y estructuración de tareas se realizan

basadas en la información de los sprints por lo cual es importante que sea real. Si se
 15

omiten errores o se da por cumplido un requerimiento que no esté satisfecho se pierden

las ventajas del Scrum.

• Inspección: Se debe estar en contante revisión, para corregir y conocer el estado real
del desarrollo. De allı́ la importancia de los scrum diarios y las revisiones y retrospectiva
de los sprints.

• Adaptación: Las revisiones tienen sentido ya que permiten adaptar el desarrollo de

acuerdo a estas. La capacidad de realizar cambios de manera rápida y eficiente es una
de las ventajas de Scrum.[31]
 CAPÍTULO 5
Desarrollo

El desarrollo fue divido en 2 grandes partes, una para cada aplicación. Ambas partes se
realizaron siguiendo como guı́a la metodologı́a Scrum y las prácticas de desarrollo guiado
por pruebas TDD, ATDD y BDD.

Aunque la metodologı́a Scrum este diseñada para el desarrollo en equipo [31] se puede
adaptar a una sola persona que adquiere los roles de los miembros del equipo. En este caso
el pasante adquirió los roles de:

• Dueño de producto: En combinación con el tutor industrial y la gerente de recursos

humanos quienes realizaban la supervisión del cumplimiento de los sprints y el correcto
establecimiento de requerimientos. Esto es de gran importancia ya que a pesar de que
el pasante sea dueño del producto y el principal encargado de la entrega de la aplicación
funcional y de la lista de requerimientos, tener una supervisión externa evita caer en
errores que pongan en riesgo la entrega de un producto funcional y de calidad.

• Maestro Scrum: El pasante debe evaluarse continuamente y ver si las planificaciones

y los requerimientos se cumplen de manera adecuada.

• Equipo desarrollador: El pasante es el único desarrollador lo cual evita los problemas

de comunicación y distribución de tareas. Sin embargo debe mantenerse organizado en
el cumplimiento de las tareas y sus plazos.

Las prácticas de desarrollo guiado por pruebas (TDD, ATDD y BDD) se usaron
adaptando la lista de requerimientos de Scrum y dividiéndolas en tareas que luego se pasaron
a pruebas.

Se decidió realizar las aplicaciones en Node Js y el framework Express gracias a las

facilidades que ofrecen en el desarrollo web y la posibilidad de utilizar el mismo lenguaje
(Javascript) para el servidor (Node Js) y para la lógica de las vistas (HTML). También se
utilizaron las siguientes herramientas:

• Github: Se utilizó para el control de versiones de las aplicaciones.

 17

• Cloud9: Se utilizó para poder programar y probar desde diferentes sitios (oficina y
hogar) sin tener que configurar el entorno de desarrollo.

• Microsoft Azure: Se utilizó como servidor para probar las aplicaciones.

• Heroku: Se utilizó como servidor para probar y luego desplegar las aplicaciones.

5.1 Desarrollo Suradem Datos

El desarrollo de la primera aplicación se realizó en 4 sprints, el primero y el segundo de

4 y 6 semanas respectivamente. Se habı́a planificado culminar la aplicación con estos dos
sprints pero se agregaron nuevos requerimientos que hicieron necesario 2 sprints adicionales
de 5 y 2 semanas. En la tabla 5.1 se pueden ver las fechas y duración de cada sprint.

# Sprint Duración Fechas

1 4 Semanas 28 Enero - 22 Febrero
2 6 Semanas 25 Febrero - 5 Abril
3 5 Semanas 8 Abril - 10 Mayo
4 2 Semanas 13 Mayo - 28 Mayo
Tabla 5.1: Sprints desarrollo Suradem Datos

A continuación se muestran una descripción de los sprints y las actividades realizadas.

5.2 Sprint 1: 28 Enero - 22 Febrero

Se inició el desarrollo de Suradem Datos realizando la recopilación de información y

estudio de las herramientas y plataformas a utilizar, escogiendo como se señaló anteriormente
Node Js y Express para el desarrollo. Se realizó una reunión con el personal de recursos
humanos de la empresa (usuarios principales de la aplicación) y se definió el alcance y
requerimientos.

Los requerimientos iniciales fueron:

• La aplicación debe permitir ingresar/editar y consultar los datos de los empleados.

• La aplicación debe permitir ingresar/editar y consultar obras donde

trabajan/trabajaban los empleados.

• La aplicación debe permitir ingresar/editar y consultar observaciones y referencias de

los empleados.
 18

• La aplicación debe permitir consultar un histórico del empleado (cargos, salarios, obras
y observaciones).

• La aplicación debe permitir descargar reportes PDF y Excel de los datos de los
empleados y obras.

• La aplicación debe alimentarse de los datos del sistema de nómina.

Sobre estos requerimientos se realizaron las historias de usuario que permitieron

posteriormente generar las pruebas (BDD, ATDD y TDD), el diseño de la base de datos e
interfaces para la aplicación.

El desarrollo guiado por pruebas TDD y ATDD verifica el estado del sistema y sirve para
guiar que el desarrollo de una tarea cumpla un requerimiento (pasando una prueba unitaria
o de aceptación). Mientras BDD se encarga de definir el comportamiento que debe tener
el sistema y cómo puede probarse de forma automatizada [29]. Teniendo esto en cuenta
se decidió como estrategia crear historias de usuario de los requerimientos y a partir de
estas diseñar las pruebas BDD con el comportamiento que se debe seguir. Para cumplir las
pruebas BDD se deben cumplir una serie de tareas más pequeñas las cuales se desarrollan
siguiendo ATDD o TDD dependiendo de la complicación de la tarea y cómo realizar su
prueba.

La mayorı́a de las pruebas se diseñaron siguiendo criterios de aceptación (ATDD) en vez

de pruebas unitarias (TDD) debido a la configuración que necesitan estas últimas sobre todo
en simulación de interacciones de peticiones web y en llamadas a la base de datos. Las
pruebas BDD luego de pasadas se asociaron a ejecuciones de Selenium que se guardaban en
un script el cual servı́a para realizar pruebas automatizadas de integración y regresión que
se ejecutaban luego de terminada la siguiente prueba.

5.2.1 Vistas

Se diseñaron las vistas de la aplicación teniendo en mente que la aplicación debe tener una
interfaz que permita la navegabilidad y el acceso a la información de forma fácil e intuitiva.
Se utilizó como motor de plantillas Handlebars (hbs) lo que permitió tener plantillas HTML
que se adapten al tipo de usuario y datos suministrados. Por ejemplo la plantilla de listas de
empleados y obras son las mismas que las de resultados de sus búsquedas pero a una se le
pasa un arreglo completo (listados) y a la otra uno filtrado según los criterios de búsqueda.

De acuerdo a los requerimientos y a las historias de usuario se diseñaron las siguientes

vistas:
 19

• Principal:

– Vista Inicial (botones para acceder otras vistas).

– Registro / Login.
– Vista Administrador (lista usuarios y opciones).
– Cargar datos.

• Empleados:

– Lista empleados.
– Detalle empleado.
– Agregar y editar empleados.

• Obras:

– Lista obras.
– Detalle obra.
– Agregar y editar obra.
– Agregar y editar participación empleado en obra.

5.2.2 Base de datos

Se decidió realizar la base de datos en SQLite debido a las facilidades para el desarrollo
y capacidad de realizar backups. Teniendo en cuenta que no se necesita una concurrencia
elevada según los requerimientos de la aplicación. De acuerdo a dichos requerimientos y a
las historias de usuario se realizó el primer diseño de la base de datos con 6 tablas:

• Usuarios: Datos de usuarios que usan la aplicación (Identificado por un nombre de

usuario)

• Empleados: Datos de los empleados (Identificado por cédula de identidad).

• Obras: Datos de las obras (Identificado por código obra).

• EmpleadoObras: Datos de las participaciones de empleados en obras (Identificado

por entero autoincrementado)

• Referencias: Datos sobre referencias del desempeño de los empleados. (Identificado

por entero autoincrementado)
 20

• Salarios: Datos sobre monto salario y cargo de los empleados (Identificado por entero
autoincrementado).

En la figura 5.1 se puede apreciar el diagrama ERM (Entity–relationship model, modelo

entidad relación) del primer diseño. Estos diagramas son una descripción de la base de datos
y muestran la relación entre los componentes de la misma. A este diseño se le agregará
posteriormente las vistas: nombre empleados (nombre y apellidos unidos para facilitar su
búsqueda) y edad empleados (edad calculada de los empleados según su fecha de nacimiento,
cuando dicha fecha se encuentra registrada).

5.2.3 Historias de Usuario

Se crearon las historias de usuario a partir de los requerimientos y se tomaron como base
para las pruebas BDD. En este primer sprint se completaron las siguientes historias de usuario
(con sus respectivas pruebas asociadas):

• Usuario puede registrarse.

• Usuario puede iniciar sesión.

• Usuario puede ver lista empleados.

• Usuario puede ver lista obras.

• Usuario puede agregar/editar/eliminar empleado.

• Usuario puede ver detalle empleado.

• Usuario puede agregar/editar/eliminar y consultar referencias.

Al finalizar el sprint se realizó una reunión con los clientes donde se presentó la aplicación
con las historias de usuario desarrolladas hasta el momento de la cual surgieron las siguientes
observaciones:

• Agregar campos a empleado (email, número de seguro social, banco, tipo y número de
cuenta, condición de salud).

• Posibilidad de agregar observaciones negativas o positivas, separadas de referencias.

 21

Figura 5.1: Diagrama ERM primer diseño Base de datos - Suradem Datos

5.3 Sprint 2: 25 Febrero - 5 Abril

Se agregaron a la base de datos los campos solicitados en la tabla empleados y se creó

una nueva tabla para las observaciones que pueden ser de 3 tipos (negativas, positivas,
informativas). Se crearon nuevas historias de usuario para cumplir los nuevos requerimientos
y se continuó con el desarrollo de las mismas, completando las siguientes:

• Usuario puede agregar editar y eliminar obra.

 22

• Usuario puede buscar empleado por CI, código de empleado o nombre.

• Usuario puede agregar empleado a obra.

• Usuario puede agregar/ver/editar/eliminar participación empleado en obra.

• Usuario puede ver detalle obra.

• Usuario puede agregar editar y eliminar observaciones.

Durante este sprint se realizó una reunión y presentación de lo desarrollado hasta al

momento al personal del departamento de construcción donde se recopilaron las siguientes
observaciones:

• Referencias deben poder ser asociadas o no a una obra, datos supervisor deben estar
en referencia.

• Agregar cargo a la participación del empleado en obra, teniendo en cuenta que puede
ser diferente al que desempeña en la empresa y hasta tener varios a lo largo de la obra.

Se siguió con el desarrollo luego de agregar estos cambios en la lista de requerimientos y

actualizar las historias de usuario y la base de datos. A continuación se presentan algunas
de las actividades de interés desarrolladas.

5.3.1 Manejo de Usuarios

Uno de los requerimientos era el establecimiento de roles para los usuarios según el cual
podı́an o no realizar ciertas acciones en la aplicación. Para esto se decidió establecer los
siguientes roles:

• Inválido: Usuario registrado pero que no puede iniciar sesión hasta ser validado por
un SuperUsuario.

• Básico: Usuario validado con capacidad de consultar toda la información de las obras
y empleados excepto la relativa a los salarios. Sólo puede agregar observaciones y
referencias pero no puede editarlas, ni eliminarlas.

• Administrador: Usuario con capacidad de agregar/modificar y eliminar todos los

datos de los empleados y las obras. Puede ver/editar la información relativa a los
salarios. Puede utilizar el módulo de carga de datos para ingresar información desde
un archivo Excel.
 23

• SuperUsuario: Usuario que puede realizar las mismas acciones de un administrador

y además tiene capacidad de:

– Validar/invalidar a los usuarios que se registran.

– Agregar/remover rol de admin.
– Eliminar usuarios.
– Descargar base de datos SQLite (en los siguientes sprint esta capacidad se cambió
por la descarga de un resumen en Excel).

Se registra desde una dirección que se debe escribir directamente y se autentifica con
una clave especial.

Para diferenciar el rol de los usuarios se utilizan los campos de usuario admin (1
administrador, 0 caso contrario), válido (1 validado, 0 caso contrario) y el ucargo (cargo
de usuario debe ser superUsuario cuando sea su rol). Al momento de mostrar las vistas al
usuario se pasa como argumento el rol del mismo lo cual permite que la plantilla hbs de la
vista muestre la información correspondiente (opciones de menú, botones de edición, entre
otras).

5.3.2 Creación de reportes

La principal funcionalidad y objetivo de la aplicación es ofrecer de manera fácil y rápida

reportes con información de los empleados tanto actual como histórica. Teniendo esto en
cuenta se diseñaron 4 tipos de reportes los cuales pueden ser descargados y personalizados
fácilmente. Los tipos de reportes son:

• Lista Empleados: Accesibles desde la lista de empleados, muestra los datos del
empleado como código, nombres, apellidos, salarios, entre otros. Estos datos se pueden
escoger en el selector de descarga, al igual que el orden en que se muestran los empleados
y alguna condición por la cual se quieran filtrar como estado del trabajador, salud o
que tenga observaciones.

• Lista Obras: Accesibles desde la lista de obras, muestra los datos de la obra como
código, nombre, cliente, fechas (inicio, fin) y observaciones. Estos datos se pueden
escoger en el selector de descarga, al igual que el orden en que se muestran las obras.

• Detalle Empleado: Accesibles desde detalle empleado, muestra los datos del
empleado divididos en 6 secciones (datos personales, datos de empresa, observaciones,
referencias, histórico salarios-cargo, histórico obras). Estas secciones se pueden
descargar por separado o crear un reporte con la combinación de secciones que se
deseen.
 24

• Detalle Obra: Accesibles desde detalle obra, muestra los datos de la obra divididos en
4 secciones (datos obra, empleados que participan/participaron, referencias empleados
hechas en la obra). Estas secciones se pueden descargar por separado o crear un reporte
con la combinación de secciones que se deseen.

Todos los reportes se pueden descargar en 2 formatos: PDF y CSV (Comma separated
values, valores separados por coma). Adicionalmente a estos 4 tipos de reportes se agregaron
los reportes del módulo estadı́sticas desarrollado en el siguiente sprint donde también se
cambia el formato CSV a Microsoft Excel.

5.3.3 Carga de datos

La aplicación se debe alimentar de los datos de los empleados almacenados en el sistema

de nómina, datos adicionales del empleado (observaciones, referencias, salud, participaciones
en obra) y datos de obras. Para esto se crea una estrategia de carga de datos dependiendo
del tipo.

• Datos empleado en nómina: Se obtienen mensualmente a través de la sección

de carga de datos que permite subir un archivo CSV generado por el sistema de
nómina. También pueden ser ingresados de forma manual mediante los formularios
de la aplicación. En el siguiente sprint se cambia el formato CSV por Microsoft Excel
y se agrega la opción de elegir qué campos editar de los empleados ya ingresados.

• Datos adicionales empleado y datos de obras: Se agregan a través de formularios

en la misma aplicación.

5.4 Sprint 3: 8 Abril - 10 Mayo

Luego de la revisión del sprint 2 y la presentación de la aplicación se agregaron los

siguientes requerimientos:

• Cambio de CSV a archivos Excel, esto debido al paso adicional que significaba para
el usuario cambiar el formato de archivo al momento de subir datos o descargar un
reporte. Este cambio generó nuevas historias de usuario/pruebas a realizar.

• Manuales de usuario para la aplicación (dependiendo del tipo de usuario).

Adicionalmente se decidió agregar 3 módulos nuevos a la aplicación:

• Calendario: Muestra un calendario que permite ver las fechas de interés como ingresos,
egresos, observaciones y cumpleaños. También permite agregar observaciones a un
empleado en una fecha determinada.
 25

• Estadı́sticas: Permite descargar estadı́sticas de los empleados (agrupadas por

departamento y estado trabajador) y de las obras registradas en la aplicación.

• Información: Muestra la información contenida en el manual de usuario, el cual

también permite descargar en PDF, y cuenta con un ı́ndice con buscador que permite
acceder a la información que se quiere de una manera más sencilla.

De estos nuevos requerimientos se crearon las correspondientes historias de usuarios y

pruebas BDD las cuales fueron completadas en el desarrollo del sprint.

5.5 Sprint 4: 13 Mayo - 28 Mayo

Al término del sprint anterior y realizando las pruebas en el servidor de producción hubo
problemas con la generación de archivos PDF en el servidor elegido para llevar a producción
(Microsoft Azure). La librerı́a utilizada para generar los reportes (node-html-pdf) no puede
ejecutarse adecuadamente en los entornos de ejecución y máquinas virtuales que ofrece
Microsoft Azure. Esto debido a que tiene problemas de permisologı́a al generar las imágenes
para crear los PDF, problema que se repite en otras librerı́as como Syncfusion, Siberix,
Spire.PDF y wkhtmltopdf.[32]

Al ser los reportes la parte principal de la aplicación y la posibilidad de descargarlos

en formato PDF una de los principales beneficios se decidió cambiar el servidor a Heroku,
pero al no ofrecer servicio para bases de datos SQLite se desarrolló una nueva versión de
la aplicación cambiando la base de datos a PostgreSQL. La migración de la base de datos
se realiza siguiendo el mismo diseño de la base de datos pero cambiando los tipos de los
datos por tipos de PostgreSQL. Asimismo, se aprovecharon las capacidades de PostgreSQL,
tales como mayor especificidad en las definiciones de tipos y procedimientos. Al realizar
los cambios se volvieron a revisar/ejecutar cada una de las historias de usuario/pruebas
anteriores.

Se agregó también la funcionalidad de cambiar contraseña en caso de olvido basada en

utilizar un código de reinicio creado aleatoriamente para el usuario (enviado a su correo
electrónico asociado) para lo cual:

• Se agrega a la base datos 2 campos a la tabla usuarios: reset (código de reinicio) y reset
time (tiempo en que el código de reinicio es válido).

• Se utiliza la herramienta SendGrid (plataforma para envió de correos masivos) para

enviar un correo electrónico con el código de reinicio, el tiempo de validez y la dirección
donde utilizarlo.
 26

Adicionalmente se realizó un análisis de seguridad del cual se concluyó:

• El servidor Heroku ofrece SSL para sus aplicaciones pero su uso en la aplicación no es
obligatorio. Por esto se decidió usar la librerı́a heroku-ssl-redirect para forzar el uso de
SSL en la navegación.

• Las claves de los usuarios son pre-procesadas por el navegador antes de enviarlas (en
registro y login) creando un hash. Este hash funciona como la verdadera clave del
usuario y es lo que recibe el servidor. De este modo la aplicación nunca recibe la clave
original ingresada por el usuario. El algoritmo hash utilizado era md5 pero este ya no
es recomendado como medida de seguridad (puede ser descifrado fácilmente) por lo cual
se cambió a sha256. El pre-procesar la clave no sirve para proteger la aplicación ante
una captura del hash en tránsito (ya que la clave que utiliza la aplicación al momento
de validar es dicho hash). Solo evita que si el hash es capturado el atacante pueda
descifrar la clave original y ası́ obtener información que pueda ser usada en caso de que
el usuario utilice la misma clave en otros lugares.

• Las claves se procesan con la librerı́a Bcrypt (Blowfish-based crypt) al momento de ser
verificadas o guardadas en la base de datos, esto permite proteger las claves ante una
captura de la base de datos.

• Datos como las credenciales de conexión a la base de datos PostgreSQL, las credenciales
a la aplicación de correo electrónico y la clave especial de superUsuario se cambiaron a
variables de entorno para que no estuvieran escritas en el código de la aplicación.

• Se utilizan captchas para evitar que se usen scripts automáticos y se sature la base de
datos con nuevos registros o se sobrepase el lı́mite de envı́o de correos en el proceso de
recuperación de clave. Sin embargo estos captchas podrı́an ser reconocidos mediante el
uso de herramientas especializadas.

Con estos cambios se culmina la aplicación Suradem Datos y se coloca en producción en

un servidor Heroku. En la tabla 5.2 se pueden ver los requerimientos y en qué sprint fueron
alcanzados. En la figura 5.2 se puede ver el diagrama entidad relación del estado final de la
base de datos (versión PostgreSQL).
 27

Tipo Descripción #
Requerimiento Sprint
Inicial Permitir ingresar/editar y consultar los datos de 1
los empleados.
Inicial Permitir ingresar/editar y consultar obras donde 1y2
trabajan/trabajaban los empleados.
Inicial Permitir ingresar/editar y consultar observaciones 1
y referencias de los empleados.
Inicial Permitir consultar un histórico del empleado 1
(cargos, salarios, obras y observaciones).
Inicial Permitir descargar reportes PDF y Excel de los 1y2
datos de los empleados y obras.
Inicial Debe alimentarse de los datos del sistema de 2
nómina.
o
1 Revisión Empleado debe contar con los datos: email, 1
número de seguro social, banco, tipo y número de
cuenta, condición de salud.
1o Revisión Permitir agregar observaciones negativas o 1
positivas y separadas de referencias.
o
2 Revisión Permitir buscar y filtrar empleados por tipo de 2
observaciones, condición de salud y departamento.
o
2 Revisión Participación del empleado en obra debe contar 2
con un cargo asignado.
2o Revisión Usuario debe poder ver la información según su rol 2
(básico, administrador, superUsuario).
o
3 Revisión SuperUsuario puede consultar y validar usuarios, 3
administrar roles y descargar base de datos.
o
3 Revisión Aplicación debe contar con manuales de usuario 3
para los diferentes roles (básico, administrador,
superUsuario).
o
3 Revisión Permitir ver las fechas importantes como 3
ingresos, egresos, observaciones, cumpleaños
en un calendario.
o
3 Revisión Permitir ver estadı́sticas de los empleados y las 3
obras.
4o Revisión Permitir descargar reportes en PDF (servidor de 4
producción).
o
4 Revisión Permitir cambiar de clave en caso de olvido/ 4
pérdida.
o
4 Revisión Permitir descargar resumen de la base de datos en 4
Excel.
4o Revisión Permitir agregar observación a un empleado desde 4
el calendario.
Tabla 5.2: Resumen requerimientos y sprints Suradem Datos
 28

Figura 5.2: Diagrama ERM Base de Datos final Suradem Datos

5.6 Desarrollo Suradem Horas Hombre

Después de concluido el desarrollo anterior comienza el de la aplicación Suradem Horas

Hombre del cual ya se habı́an recopilado los requerimientos anteriormente. El desarrollo de
la segunda aplicación se realizó en 1 sprint de 3 semanas (29 Mayo - 17 Junio). Se utilizaron
las mismas estrategias y herramientas de desarrollo que las usadas en la aplicación Suradem
Datos.
 29

Además se reutilizó y reestructuró gran parte del código ya realizado en dicha aplicación.
Utilizando el mismo módulo y estructura de: manejo de usuarios (login, registro,
administración usuarios, recuperación clave), obras (listado, creación, edición, eliminación y
detalle), calendario e información.

Se decidió que la aplicación se concentrara en los datos de las horas diarias realizadas
por los trabajadores y su tipo (normal, extra diurna, extra nocturna) ya que eran los datos
necesarios para el cálculo de las horas hombre. Dejando para futuras actualizaciones la
posibilidad de agregar observaciones adicionales como equipos, costos, inconvenientes y otro
tipo de datos que se pueden recopilar en un parte diario de trabajo. De este modo los
requerimientos iniciales fueron:

• La aplicación debe permitir ingresar/editar y consultar los partes diarios.

• La aplicación debe permitir ingresar/editar y consultar obras.

• La aplicación debe permitir consultar reportes sobre estadı́sticas de horas por fase.

• La aplicación debe permitir descargar estos reportes en PDF y Excel.

Con esto se realizó el diseño inicial de interfaces, base de datos y creación de historias
de usuarios en que basar las pruebas BDD. A continuación se presentan algunas de las
actividades de interés desarrolladas.

5.6.1 Interfaces

• Principal:

– Vista Inicial (botones para acceder otras vistas).

– Registro / Login.
– Vista Administrador (lista usuarios y opciones).
– Cargar datos.

• Partes Diarios: Cargar Datos (Seleccionar obra-fecha), Detalle Parte Diario, Agregar
Trabajador a Parte Diario.

• Obras: Lista Obras, Detalle obra, Agregar/ Editar Obra.

• Calendario.

• Información.
 30

5.6.2 Base de datos

El diseño de la base de datos tiene 5 tablas y fue realizada en PostgreSQL:

• Usuarios: Datos de usuarios que usan la aplicación.

• Obras: Datos de las obras.

• ParteDiario: Datos de los partes diarios (fecha,fase,etapa,empleados,horas).

• Etapas: Datos sobre las etapas de construcción.

• Fases: Datos sobre las fases de construcción.

En la figura 5.3 se puede ver el diagrama entidad relación de la base de datos.

Figura 5.3: Diagrama ERM Base de Datos Horas Hombre

 31

5.6.3 Partes Diarios

Los partes diarios son la base de la aplicación ya que su carga y distribución son los datos
de interés de la misma. Se accede desde el botón cargar datos (seleccionando obra y fecha),
desde el calendario o desde el detalle de la obra (sección partes semanales). Consisten en
la distribución de horas trabajadas por cada empleado en la obra indicando el dı́a de la
semana, el tipo de hora (normal, extra diurna, extra nocturna) y la fase-etapa de la obra.

Para su carga se decidió utilizar un selector de fecha y obra que permite acceder o crear
(si no existe) el parte semanal de la fecha y obra escogida. Desde el parte semanal se deberá
agregar los trabajadores que participan en los trabajos de la semana. Luego de que aparezcan
en la lista de parte semanal se pueden agregar horas mediante un formulario indicando la
fase-etapa y el tipo de horas. Las horas se pueden agregar y editar por cada trabajador o
para todos al mismo tiempo. También se da la opción de eliminar etapas, colocar las horas
a 0 y eliminar trabajadores del parte semanal. En la figura 5.4 se puede ver el parte semanal
(visto por un usuario administrador).

Figura 5.4: Vista de Parte Semanal - Usuario Administrador - Suradem Horas Hombre

5.6.4 Manejo de Usuarios

Se utilizó el mismo manejo de usuarios que la aplicación Suradem Datos teniendo los
siguientes tipos de usuario:

• Inválido: Usuario registrado pero que no puede iniciar sesión hasta ser validado por
 32

un SuperUsuario.

• Básico: Usuario validado con capacidad de consultar toda la información de las obras
y partes diarios (No puede agregar, editar o eliminar información).

• Administrador: Usuario con capacidad de agregar/modificar y eliminar todos los

datos de los trabajadores, partes diarios y obras.

• SuperUsuario: Usuario que puede realizar las acciones de administrador. Se registra

desde una dirección que se debe escribir directamente y se autentifica con una clave
especial. Tiene capacidad de:

– Validar/invalidar a los usuarios que se registran.

– Agregar/remover rol de admin.
– Eliminar usuarios.
– Descargar resumen base de datos en Excel.

5.7 Reportes

En la aplicación se pueden descargar 4 tipos de reportes:

• Resumen de horas por Fase-Etapa de una obra: Muestra la cantidad de semanas

y fechas en que se trabajó en cada fase y el total de horas hombre y su distribución
(normales, extra diurnas, extra nocturnas, fin de semana).

• Resumen de Partes Semanales de una obra: Muestra por cada parte semanal
de la obra la distribución de horas hombre por los dı́as de la semana y tipo de hora
(normales, extra diurnas, extra nocturnas).

• Resumen Total de horas del trabajador en parte semanal: Muestra un listado

con la ficha (identificador), nombre y cédula de los trabajadores, la cantidad de horas
trabajadas en la semana y su tipo (normales, extra diurnas, extra nocturnas).

• Reporte de obra: Permite descargar los datos de la obra (nombre, código, cliente,
fecha) y combinarla con los otros 2 reportes de obra: resumen de partes semanales y
resumen por fase-etapa.

Con esto se culmina la aplicación Suradem Horas Hombre la cual se coloca en producción
en un servidor Heroku.
 CONCLUSIONES Y RECOMENDACIONES

Conclusiones

Al término de la pasantı́a se han culminado satisfactoriamente el desarrollo de las

aplicaciones Suradem Datos y Suradem Horas Hombres. Con esto se cumplieron los
objetivos propuestos y se ofrece una manera de consultar de forma fácil y rápida los datos
de los empleados y las horas hombre realizadas en las obras.

El uso de la metodologı́a Scrum adaptada a un solo desarrollador permitió culminar ambas

aplicaciones y resolver inconvenientes y cambios en los requerimientos. Adicionalmente las
prácticas de desarrollo guiado por pruebas hicieron posible trabajar de manera modular
y asegurar la funcionalidad de las aplicaciones. El BDD también sirvió de guı́a para el
desarrollo de los manuales de usuario ya que se tenı́an los comportamientos esperados por el
sistema asociados a las historias de usuario y requerimientos.

Las aplicaciones desarrolladas ayudan y facilitan las labores de la empresa como la

búsqueda de datos de un empleado, realizar observaciones sobre el desempeño de los mismos,
obtener información de una obra y sus trabajadores, ver el desempeño de los trabajadores
en cada fase de la obra, entre otras. El uso de los formatos PDF y Microsoft Excel para
descargar la información en reportes y la interfaz de calendario hacen que la información sea
accesible fácilmente. Además al ser aplicaciones web se puede ingresar a ellas y consultar
su información desde distintos dispositivos y en cualquier lugar que tenga una conexión a
internet. Lo cual es una ventaja importante al ser una empresa de construcción que puede
realizar trabajos en muchos lugares distintos.

Ambas aplicaciones están culminadas y puestas en producción en la plataforma Heroku.

Sin embargo la aplicación Suradem Horas Hombres solo ha sido utilizada para realizar las
pruebas de desarrollo, por lo cual se debe realizar un seguimiento cuando se empiece a utilizar
en las obras y ası́ ver qué cambios pueden ser requeridos en la misma para su correcto
funcionamiento.

Recomendaciones

Se recomienda realizar seguimiento sobre el tamaño de la base de datos y los lı́mites

ofrecidos por Heroku. En el caso que se acerque o sobrepase dichos lı́mites se puede crear un
histórico estático en una base de datos SQLite y aprovechar las rutinas de la versión de la
aplicación SQLite para crear una versión que use los 2 manejadores. PostgreSQL para los
 34

datos activos y modificables y SQLite para datos históricos que no requieran modificación.
De esta manera si se produce un gran aumento en la cantidad de datos a almacenar se
pueden mantener en la aplicación para su consulta (estáticos y dinámicos) y modificación
(dinámicos).

El alcance de ambas aplicaciones puede ampliarse fácilmente agregándole más cálculos de

estadı́sticas o generación de reportes adicionales. Adicionalmente la aplicación Suradem
Horas Hombres se puede adaptar para integrarla al proceso de pagos de trabajadores
calculando los datos de acuerdo a las horas ejecutadas y al tipo de las mismas (normales,
extras diurnas o nocturnas, fin de semanas). Otra posibilidad es agregar observaciones y datos
adicionales asociados a los partes diarios (equipos utilizados, contratiempos e imprevistos,
entre otros).
 35

REFERENCIAS

[1] Proyectos Suradem C.A., “Nosotros.” https://suradem.com/nosotros/, 2019.

Consultado el 26/06/2019.

[2] Christensson, P., “Web application definition.” https://techterms.com/definition/

web_application, Febrero 2014. Consultado el 20/06/2019.

[3] Christensson, P., “Ide definition.” https://techterms.com/definition/ide, Julio

2015. Consultado el 20/06/2019.

[4] Christensson, P., “Dbms definition.” https://techterms.com/definition/dbms, 2006.

Consultado el 20/06/2019.

[5] Christensson, P., “Version control definition.” https://techterms.com/definition/

version_control, Agosto 2011. Consultado el 20/06/2019.

[6] Blischak, JD and Davenport, ER and Wilson, G, “A Quick Introduction to Version

Control with Git and GitHub,” PLoS Comput Biol, 2016. 12(1): e1004668.
https://doi.org/10.1371/journal.pcbi.1004668.

[7] Microsoft, “¿qué es paas? plataforma como servicio.” https://azure.microsoft.com/

es-es/overview/what-is-paas/. Consultado 20/06/2019.

[8] Laudon, K. C. and Laudon, J. P., Sistemas de información gerencial. Pearson Educación,
12 ed., 2012.

[9] WebFinance Inc., “Daily construction report.” http://www.businessdictionary.com/

definition/daily-construction-report.html, 2006. Consultado el 20/06/2019.

[10] Mozilla y colaboradores individuales, “Javascript.” https://developer.mozilla.org/

es/docs/Web/JavaScript, 2019. Consultado el 21/06/2019.

[11] The Editors of Encyclopaedia Britannica, “Sql.” https://www.britannica.com/

technology/SQL, Abril 2019. Consultado el 21/06/2019.

[12] The jQuery Foundation, “jquery.” https://jquery.com/, 2019. Consultado el

21/06/2019.

[13] Mozilla y colaboradores individuales, “Html.” https://developer.mozilla.org/es/

docs/Web/HTML, Mayo 2019. Consultado el 21/06/2019.

[14] Mozilla y colaboradores individuales, “Css.” https://developer.mozilla.org/es/

docs/Web/CSS, Marzo 2019. Consultado el 21/06/2019.
 36

[15] SQLite, “About sqlite.” https://www.sqlite.org/about.html, Abril 2019.

Consultado el 21/06/2019.

[16] The PostgreSQL Global Development Group, “Postgresql.” https://www.postgresql.

org/about/, 2019. Consultado el 21/06/2019.

[17] Node.js Foundation, “Acerca de node.js.” https://nodejs.org/es/about/, 2019.

Consultado el 21/06/2019.

[18] StrongLoop, Inc., “Express.” https://expressjs.com/es/. Consultado el 21/06/2019.

[19] Git, “Git.” https://git-scm.com/, 2019. Consultado el 21/06/2019.

[20] Chacon, Scott and Straub, Ben, Pro Git. Apress, 2 ed., 2014.

[21] Amazon Web Services, Inc., “Aws cloud9.” https://aws.amazon.com/es/cloud9/,

2019. Consultado el 21/06/2019.

[22] Heroku, “The heroku platform.” https://www.heroku.com/platform, 2019.

Consultado el 21/06/2019.

[23] Microsoft, “Azure servicio web apps.” https://azure.microsoft.com/es-es/

services/app-service/web/, 2019. Consultado el 21/06/2019.

[24] Selenium, “What is selenium?.” https://www.seleniumhq.org/. Consultado el

21/06/2019.

[25] Handlebars, “Handlebars.js: Minimal templating on steroids.” https://handlebarsjs.

com/. Consultado el 26/06/2019.

[26] Agile Alliance, “Agile glossary: Bdd definition.” https://www.agilealliance.org/

glossary/bdd/. Consultado el 21/06/2019.

[27] Agile Alliance, “Agile glossary: Tdd definition.” https://www.agilealliance.org/

glossary/tdd/. Consultado el 21/06/2019.

[28] Forrest Shull and Grigori Melnik and Burak Turhan and Lucas Layman and Madeline
Diep and Hakan Erdogmus, “What Do We Know about Test-Driven Development?,”
IEEE Software, vol. 27, 2010.

[29] Carlos Solis and Xiaofeng Wang, “A Study of the Characteristics of Behaviour Driven
Development,” 37th EUROMICRO Conference on Software Engineering and Advanced
Applications, Noviembre 2011.
 37

[30] Ken Schwaber and Jeff Sutherland, “The scrum guide.” https://www.scrumguides.
org/scrum-guide.html, 2018. Consultado el 23/06/2019.

[31] Agile Alliance, “Agile glossary: Scrum definition.” https://www.agilealliance.org/

glossary/scrum/. Consultado el 23/06/2019.

[32] Oded Dvoskin, “Azure web app sandbox-unsupported frameworks.” https://github.

com/projectkudu/kudu/wiki/Azure-Web-App-sandbox#unsupported-frameworks.
Consultado el 26/06/2019.
 38

APÉNDICE A
Manual de Usuario Suradem Datos
Manual de usuario
Tabla de contenidos
• Resumen Aplicación
• Tipos de Usuario
o Inválido
o Básico
o Administrador
o SuperUsuario
• Registro
• Inicio Sesión
• Cambio Clave - Contraseña
• Navegación
o Menú
o Barra de navegación
o Botón Regresar
o Botón Logo Suradem
• Empleados
o Lista Empleados
 Diálogo Resumen Empleado
 Descargar Lista Empleados
o Ver detalle empleado
 Descargar información empleado
 Datos Personales
 Datos Empresa
 Observaciones
 Referencias
 Hist. Salarios/Cargos
 Hist. Obras
o Agregar empleado
o Editar empleado
o Eliminar empleado
o Observaciones Empleado
 Agregar observación
 Editar observación
 Eliminar observación
 Descargar observaciones
o Referencias Empleado
 Agregar referencia
 Editar referencia
 Eliminar referencia
 Descargar referencias
o Salarios Empleado
 Agregar salario
 Editar salario
  Eliminar salario
 Descargar salarios
o Buscar Empleado
 Por CI, nombre, código o cargo.
 Búsqueda Avanzada
• Obras
o Lista Obras
 Diálogo Información Obra
 Descargar Lista Obras
o Ver detalle Obra
 Descargar información Obra
 Datos Obra
 Empleados Obra
 Referencias Obra
o Agregar Obra
o Editar Obra
o Eliminar Obra
o Empleado en Obra
 Seleccionar Empleado para Agregar a Obra
 Agregar empleado a obra
 Editar participación empleado en obra
 Eliminar participación empleado en obra
 Descargar Participación Empleados en Obra
 Agregar referencia empleado en obra
 Editar referencia empleado en obra
 Eliminar referencia empleado en obra
 Descargar Referencias Empleados en Obra
o Buscar Obra
• Cargar Datos
o Cargar datos empleados (Excel)
• Estadísticas
• Calendario
• Administración Aplicación
o Registro SuperUsuario
o Lista Usuarios
 Validar / Invalidar Usuario
 Agregar / Remover Rol Administrador
 Descargar Base de Datos (Excel - SQLITE)
 Eliminar usuario
o Información Técnica
Resumen Aplicación
Suradem Datos es una aplicación web que permita consultar, modificar y agregar datos sobre los
trabajadores de la empresa y las obras en las que trabajan o han trabajado. Su objetivo es permitir
una consulta fácil y rápida sobre algún trabajador/obra específica o un grupo de ellos.

La aplicación permite consultar y modificar diferentes datos de los empleados como datos
personales, el histórico de obras y salarios de los trabajadores, así como agregar y consultar
observaciones y referencias de los mismos.

La aplicación permite descargar la información consultada en un documento PDF o Excel.

Para el ingreso y actualización de datos se cuenta con un módulo de carga de datos que permite
ingresar datos a través de archivos Excel.

Tipos de Usuario
Los usuarios de la aplicación se dividen en los siguientes roles:

• Inválido: Usuario registrado pero que no puede iniciar sesión hasta ser validado por un
SuperUsuario.
• Básico: Usuario validado con capacidad de consultar toda la información de las obras y
empleados excepto la relativa a los salarios. Sólo puede agregar observaciones y
referencias pero no puede editarlas, ni eliminarlas.
• Administrador: Usuario con capacidad de agregar/modificar y eliminar todos los datos de
los empleados y las obras. Puede ver/editar la información relativa a los salarios. Puede
utilizar el módulo de carga de datos para ingresar información desde un archivo Excel.
• SuperUsuario: Usuario que puede realizar las acciones de administrador y además tiene
capacidad de:
o Validar/invalidar a los usuarios que se registran.
o Agregar/remover rol de admin.
o Eliminar usuarios

Registro

Para ingresar en la aplicación se debe contar con un usuario validado y su clave asociada.

Para registrarse en la aplicación debe acceder a la sección de registro. Puede hacerlo:

-Desde la barra de navegación, opción Registro

-Desde el botón Regístrese Aquí

-Desde la dirección: /registro

Luego debe ingresar los siguientes datos:

- Nombre: Nombre del usuario

- Cargo: Cargo del usuario

- Rango Administrador: Si el usuario es

administrador

- Email: Correo electrónico del usuario

- Usuario: Nombre único con el cual iniciará

sesión
- Clave: Contraseña con la cual iniciará sesión

- Captcha: para verificar usuario

(No distingue mayúsculas y minúsculas)
Si los datos son correctos se registrará el usuario de lo contrario se mostrará un mensaje de error.

Luego del registro debe esperar a ser validado por algún administrador del sitio para poder iniciar
sesión. Para más información acerca de validar usuarios ir a Validar / Invalidar Usuario

Inicio Sesión

Luego del registro y ser validado por un administrador podrá iniciar sesión ingresando su usuario y
contraseña en la sección Identifíquese y haciendo clic en Login.
Al iniciar sesión se le mostrará el menú principal y la barra de navegación con las opciones
disponibles dependiendo del tipo de usuario.

Cambio Clave - Contraseña

Los usuarios que hayan olvidado su contraseña pueden solicitar un cambio de clave haciendo click
en olvido su contraseña en la sección de Login (inicio sesión)
Se les pedirá nombre de usuario y llenar un captcha.

Luego se le enviará un correo (puede caer en la carpeta SPAM de su email) donde se le indica la
dirección a la cual debe acceder y colocar el código de reinicio y la fecha límite.
En la página cambio de clave colocará su usuario, la nueva clave y el código de reinicio.

Al concluir se muestra un mensaje con el resultado de la operación.

Navegación

Menú

El menú principal muestra una serie de botones para acceder a las diferentes secciones de la
aplicación.

-Básico:

• Lista Obras: Permite ver un listado con las obras.

• Lista Empleados: Permite ver un listado con los empleados.
• Cuadro de Búsqueda Empleado: Muestra opciones de búsqueda para empleado por
Cédula de identidad, Código, Nombre, Cargo y Avanzada.
• Cuadro de Búsqueda Obra: Muestra opciones de búsqueda para obra por Código o
Nombre.
• Calendario: Permite acceder a la sección calendario, donde se pueden ver fechas de
interés como ingresos, egresos, observaciones y cumpleaños. Ver Calendario
 -Administrador: Mismo menú pero con la opción de Cargar Datos y Estadísticas

• Cargar Datos: Permite acceder a la sección de carga de datos desde la cual se puede subir
un archivo Excel con los datos a ingresar/actualizar. Ver Cargar Datos
• Estadísticas: Permite acceder a la sección estadísticas donde se presenta información
sobre los empleados registrados. Ver Estadísticas

Barra Navegación
Barra superior con vínculos para acceder a diferentes secciones de la página.

-Básico y Administradores:

• Icono Casa: Ir a página principal.

• Inicio: Ir a página principal.
• Empleados: Ir a Lista Empleados.
• Obras: Ir a Lista Obras.
• Información: Ir a la sección de información donde se encuentra la documentación y este
manual.
• Salir: Cerrar sesión.

-SuperUsuario: Mismo menú pero con la opción de vista Admin

• Admin: Ir a vista de administración de usuarios.

Botón Regresar (Atrás navegador - No actualiza o refresca página)

Botón presente en la mayoría de las vistas de la aplicación y que permite

regresar a la vista anterior. Es equivalente a la acción atrás del navegador por
lo cual no actualiza ni refresca la página anterior a donde redirige.
Botón Logo Suradem

Imagen circular presente en la mayoría de las vistas de la aplicación y que al

hacer clic lleva al usuario a la página principal.

Empleados

Lista Empleados

Permite consultar la lista de empleados ingresados al sistema. Muestra una tabla con los datos de
los mismos:

• # (Código)
• Nombres
• Apellidos
• CI
• Cargo
• Departamento

• Botón Ver Resumen Empleado

• Botón Detalle Empleado

La tabla permite ordenar los empleados por cualquiera de sus campos haciendo clic en los iconos
al lado de los mismos.

Será descendente o ascendente dependiendo del seleccionado

Además permite filtrarlos por algún texto de cualquiera de sus campos

La tabla divide a los empleados en páginas de 5

empleados c/u lo cual se puede cambiar en el selector
de Mostrar n° empleados por página por 10, 15, 20 o
30

En la parte inferior indica el número de páginas y el

total de empleados.

Además permite ver un diálogo-recuadro con un resumen del empleado, y acceder al detalle del
empleado.

-Administrador y SuperUsuario:

Mismas funciones que usuario básico y adicionalmente botón para agregar un nuevo
empleado.
 Diálogo Resumen Empleado

o Nombres
o Apellidos
o CI
o Código
o Estado Trabajador
o Cargo
o Departamento
o Salario
o Contrato
o Condición Salud
 El recuadro vacío indica
que el empleado no
presenta condiciones
especiales de salud.
 Un asterisco indica que el
empleado presenta
condiciones especiales de
salud que se pueden
observar en su detalle.

o Observaciones

Muestra alguna observación

puntual del empleado e
indica si este tiene
observaciones (positivas o
negativas) las cuales pueden ser vistas en el detalle del empleado

o Positivas

• El recuadro vacío indica que no tiene , un visto que si tiene

o Negativas

• El recuadro vacío indica que no tiene , un asterisco que si tiene

o Más Información: Botón que permite acceder al detalle del empleado.

 Descargar Lista Empleados

Muestra un diálogo-cuadro con las opciones

de descarga del listado.

 Campos a descargar: Lista de campos a

mostrar.

Si no selecciona ninguno se mostrarán:

Código, Nombres, Apellidos, Ci, Sexo, Cargo y

Departamento.

 Orden: orden por el cual se muestran los

empleados.

Código, CI, Apellidos, Fecha Nacimiento,

Fecha Ingreso, Departamento

 Filtros:
 Departamento: Se listarán los
empleados que tengan el dpto. elegido
 Estado Trabajador: Se listarán los
empleados con el estado elegido
 Condición de salud:
• Sin: Se listarán los empleados que
NO tengan una condición especial de
salud
• Con: Se listarán los empleados que
tengan una condición especial de
salud
 Observaciones:
 S/ Neg: (Sin Negativas) Se listarán los empleados que NO tengan observaciones negativas
 C/ Neg: (Con Negativas) Se listarán los empleados que tengan observaciones negativas
 C/ Pos: (Con Positivas) Se listarán los empleados que tengan observaciones positivas

 Formato:

Puede elegir el formato en que descargar el listado

PDF (.pdf) Si selecciona muchos campos alguno puede
quedar por fuera

Excel (.xlsx) Al darle al botón del formato elegido se

descargará un archivo de ese formato con la
información elegida.
Ver detalle empleado

Muestra una vista con toda la información del empleado dividida en varias secciones.

-Administrador y superUsuario: Mismas funciones e información además de:

 Botón Editar Empleado.

 Botón Eliminar Empleado.
 Sección Hist. Salarios.

Descargar información empleado

Muestra un diálogo-cuadro con las opciones de

descarga del detalle del empleado.

 Campos a descargar: Lista de secciones

a Descargar. Si no selecciona ninguno se
descargarán todas las secciones:
o Datos Personales
o Datos Empresa
y Observaciones
o Salarios
(Solo administradores)
o Referencias
o Obras
• Formato: Puede elegir el formato en que descargar el listado. Al darle al botón del formato
elegido se descargará un archivo de ese formato con la información elegida.

o PDF (.pdf)

o Excel (.xlsx) Las secciones ocupan c/u una hoja de cálculo (Datos personales,
Observaciones, Salarios, Referencias y Obras)
Datos Personales

Se muestran los datos personales del empleado:

Nombres, Apellidos, CI, Sexo, Edad, Fecha Nac, Est. Civil, Teléfono #1, Teléfono #2, Dirección,
Estado, Municipio, Parroquia, Email, Num Seg. Social, Banco, Num. Cuenta, Condición de Salud.

Botones de descarga: Permite descargar la información de los datos personales en PDF (Solo datos
personales) o en Excel (Datos personales y relativos a empresa).

Datos Empresa

Se muestran los datos del empleado

referentes a la empresa como:

Código, Fecha Ini, Fecha Ult,

Cargo, Contrato, Ocupación, Ult
Salario, Departamento, Estado,
Observaciones.

Observaciones

Observaciones que se le hagan al empleado, pueden ser positivas, negativas o informativas.

Botones de descarga: Permite descargar la información de las observaciones en PDF

(Observaciones y datos empresa) o en Excel (Solo observaciones).

Botón para agregar observación

Tabla con las observaciones del

empleado:

o Icono tipo observación

o Fecha
o Ver (Botón detalle

observación)
-Administrador y SuperUsuario:

-Adicionalmente tienen las opciones de observación

o Editar observación (Icono Lápiz)

o Eliminar observación (Icono

Papelera)

-Detalle Observación:

• Tipo:
• Fecha
• Autor
• Observación

Referencias

Referencias que se le hagan al empleado, las cuales están asociadas al cargo desempeñado.
También pueden estar asociadas a una obra si el cargo es desempeñado en la misma.

Botones de descarga: Permite descargar la información de las referencias en PDF o en

Excel (Solo referencias).

Botón para agregar referencia

Tabla con las referencias del empleado:

o Fecha
o Período
o Cargo
o Ver
(Botón detalle

referencia)
-Administrador y SuperUsuario:

-Opciones de referencia:

o Editar referencia (Icono Lápiz)

o Eliminar referencia(Icono Papelera)

Detalle Referencia:

• Fecha
• Período
• Fortalezas
• Debilidades
• Cargo
• Supervisor
• En Obra: Solo si referencia
está asociada a obra
o Ver Obra: Botón ir a
detalle de obra
asociada
• Observaciones Supervisor
• Objetivos Propuestos

Hist. Salarios (Administradores y SuperUsuario)

Sección muestra el histórico de salarios del empleado y cargo asociado. Sólo puede ser vista por
administradores. (Usuarios básicos ven Hist. cargos sin salarios y sin opciones de edición-creación)

Botones de descarga: Permite descargar la información de los salarios en PDF o en Excel

(Solo salarios o cargos dependiendo si es administrador).

 Botón para agregar salario

Tabla con los salarios del empleado:

o Fecha
o Monto
o Cargo

o Botón editar salario (Icono Lápiz)

o Botón eliminar salario (Icono Papelera)

Hist. Obras

Sección muestra una lista de las obras donde el empleado ha estado y los datos asociados a su
participación.

Botones de descarga: Permite descargar la información de las obras donde ha participado

en PDF o en Excel (Solo obras).

Tabla con los datos de participación en obra:

o Código Obra (#)

o Nombre
o Datos Participación
 Fecha In: Fecha ingreso en obra
 Fecha Eg: Fecha egreso en obra
 Cargo: Cargo en obra

 Ref: Botón Agregar referencia a la obra

o Estado obra

o Opciones: Botón ver detalle obra.

Agregar Empleado (Administradores y SuperUsuario)

Muestra un formulario para ingresar la información de un nuevo empleado.

Se accede desde lista de empleados con el botón agregar.

En él se solicitan los siguientes

datos:

• Nombres
(Obligatorio)
• Apellidos
(Obligatorio)
• CI
(Obligatorio)
• CI Nacionalidad
o Selector V
(venezolana) , E
(extranjero)
• Sexo
o Selector Hombre-
Mujer
• Estado Civil
o Selector soltero(a),
casado(a),
divorciado(a),
viudo(a),
concubino(a)
• Edad

• Fecha Nacimiento
 o Selector calendario, se puede ingresar manualmente en formato dd/mm/aaaa
• Tlf 1
• Tlf 2
• Email (Si se ingresa debe ser un email válido)
• Dirección
• Estado
• Municipio
• Parroquia
• Código Empleado
• Ult. Salario
• Ocupación
• Cargo
• Contrato
• Departamento
• Estado Trab.
• Fecha Ingreso
o Selector calendario, se puede ingresar manualmente en formato dd/mm/aaaa
• Fecha Egreso
o Selector calendario, se puede ingresar manualmente en formato dd/mm/aaaa
• N. Seguro Social (Número Seguro Social)
• Banco
• Num. Cta
o Si se ingresa debe ser una secuencia de 20 números
• Tipo
o Selector Ahorro (A), Corriente (C)
• Condición de Salud
o Si se coloca el check significa que empleado tiene una condición especial de salud.
Se habilita el campo especificar para ingresar la condición que tiene el empleado.
• Especificar
• Observaciones

El empleado a ingresar debe tener una CI única y no

estar ya agregado a la aplicación.

Al darle al botón Agregar se verifica la información

ingresada y si los datos son válidos el empleado es
agregado al sistema y se redirige al usuario a la lista
de empleados ya actualizada. De lo contrario se
muestra un mensaje de error.
Editar Empleado (Administradores y SuperUsuario)

Muestra un formulario para editar la información de un empleado.

Se accede desde detalle empleado botón Editar.

El formulario es el mismo de Agregar

Empleado pero con la información que ya
está ingresada en el sistema colocada en los
campos correspondientes.

Se pueden cambiar todos los campos

excepto la CI (cédula de identidad) ya que
es el identificador del empleado.

Al darle al botón Editar se verifica la

información ingresada y si los datos son
válidos el empleado es agregado al sistema
y se redirige al usuario a la lista de
empleados ya actualizada. De lo contrario
se muestra un mensaje de error.

Eliminar Empleado (Administradores y SuperUsuario)

Permite eliminar un empleado del sistema, si se hace se borraran adicionalmente sus salarios,
referencias y participaciones en obras.

Se accede desde detalle empleado botón Eliminar.

Se muestra un diálogo-cuadro
preguntando si de verdad quiere eliminar
al empleado. Si se responde 'Si' el
empleado es eliminado junto a su
información relacionada (observaciones,
referencias, salarios y participación en
obras).

Si la eliminación es exitosa se redirige al

usuario a la lista de empleados ya
actualizada. Si se responde 'No' o se
cierra el diálogo-cuadro no ocurre ningún
cambio y se regresa a la vista detalle
empleado.

Observaciones Empleado

Las observaciones del empleado permiten ingresar información adicional de interés sobre el mismo
permitiendo almacenar la fecha, el autor y el tipo de observación.

Las observaciones deben ser calificadas como:

 Positivas
 Negativas
 Otro

Pueden ser vistas en una tabla en el detalle empleado, en la sección Observaciones.

Agregar observación

Muestra un formulario para agregar una observación del empleado. Se puede acceder desde detalle
empleado, sección Observaciones con el botón agregar.

Y desde Calendario al seleccionar una fecha, elegir un empleado y pulsar crear Observación
En él se solicitan los siguientes datos:

• Tipo
o Selector iconos
 Buena (Positiva)
 Mala (Negativa)
 Otro
• Fecha
• Hecha por (Autor)
• Descripción (Obligatorio)

Si la observación se agrega correctamente se dirige al usuario al detalle del empleado actualizado.

De lo contrario se muestra mensaje de error.

Editar observación (Administradores y SuperUsuario)

Muestra un formulario para editar una observación del empleado.

Se puede acceder desde detalle empleado, sección Observaciones con el botón del lápiz (Modificar)
en las opciones de la observación.

Si la observación se edita correctamente se dirige al usuario al detalle del empleado actualizado. De

lo contrario se muestra mensaje de error.

Eliminar observación (Administradores y SuperUsuario)

Permite eliminar una observación del empleado del sistema.

Se accede desde detalle empleado, sección Observaciones con el botón de la papelera (Eliminar) en
las opciones de la observación.

Se muestra un diálogo-cuadro preguntando si de verdad

quiere eliminar la observación del empleado. Si se responde
'Si' la observación es eliminada. Si la eliminación es exitosa se
redirige al usuario al detalle del empleado ya actualizado. Si
se responde 'No' o se cierra el diálogo-cuadro no ocurre
ningún cambio y se regresa a la vista detalle empleado.
Descargar Observaciones

Se pueden descargar las observaciones en formato PDF o EXCEL desde:

- Detalle Empleado, sección Observaciones botones

de descarga:
o Permite descargar la información de las
observaciones en PDF (Observaciones y datos
empresa) o en Excel (Solo observaciones)

- Detalle Empleado, botón Descargar

Información empleado

Referencias Empleado

Las referencias del empleado permiten ingresar información del empleado asociada a su
desempeño en un cargo específico. También pueden estar asociadas a una obra si el cargo es
desempeñado en la misma.

Pueden ser vistas en una tabla en:

 El detalle del empleado, en la sección

Referencias.
(Todas las referencias del empleado)
 El detalle de la obra, en la sección Referencias.
(Todas las referencias de cargos desempeñados en la obra)

Agregar Referencia

Muestra un formulario para agregar una referencia del empleado.

Se puede acceder desde:

- Detalle empleado, sección Referencias con el botón agregar.

- Detalle empleado, tabla Hist. Obras con el botón + en las opciones de los datos de

participación en la obra.

- Detalle obra, sección empleados con el botón +Ref en las opciones de los datos de

participación en la obra.

En él se solicitan los siguientes datos:

• Fecha
o Si se agrega desde una obra este
campo ya viene con la fecha de
ingreso al cargo en la obra.
• Período
• Cargo (Obligatorio)
o Si se agrega desde una obra este
campo ya viene con el cargo de
la obra.
 • Obra Asociada
o Selector que muestra las obras y
cargo que ha desempeñado
empleado en ellas.

Si se agrega desde una obra este

campo ya viene con los datos de la obra.
• Fortalezas
• Debilidades
• Supervisor Nombre
• Supervisor CI
• Observaciones Supervisor
• Objetivos Propuestos

Si la referencia se agrega correctamente se dirige al usuario al detalle del empleado actualizado. De

lo contrario se muestra mensaje de error

Editar Referencia (Administradores y SuperUsuario)

Muestra un formulario para editar una referencia del empleado.

Se puede acceder desde:

- Detalle empleado, sección Referencias con el botón del lápiz (Modificar) en las opciones

de la referencia
- Detalle obra, sección Referencias con el botón del lápiz (Modificar) en las opciones de

la referencia

Si la referencia tiene una obra asociada no se puede cambiar este campo.

Si la referencia se edita correctamente se dirige al usuario al detalle del empleado actualizado. De

lo contrario se muestra mensaje de error.

Eliminar Referencia (Administradores y SuperUsuario)

Permite eliminar una referencia del empleado del sistema.

Se puede acceder desde:

- Detalle empleado, sección Referencias con el botón de la papelera (Eliminar) en las

opciones de la referencia
- Detalle obra, sección Referencias con el botón de la papelera (Eliminar) en las opciones
de la referencia
Se muestra un diálogo-cuadro preguntando si de
verdad quiere eliminar la referencia del empleado.
Si se responde 'Si' la referencia es eliminada.

Si la eliminación es exitosa se redirige al usuario al

detalle del empleado ya actualizado. Si se responde
'No' o se cierra el diálogo-cuadro no ocurre ningún
cambio y se regresa a la vista detalle empleado o
detalle obra según sea el caso.

Descargar Referencias

Se pueden descargar las referencias en formato PDF o EXCEL desde:

• Detalle Empleado, sección Referencias botones de

descarga: Permite descargar la información de las
referencias en PDF o en Excel (Solo referencias del
empleado)

• Detalle Empleado, botón Descargar Información

empleado (referencias empleado)

• Detalle obra, sección Referencias botones de descarga. (Sólo referencias de cargos

asociados a la obra)
 • Detalle Obras, botón Descargar Información obra (referencias
asociadas obra)

Salarios Empleado (Administradores y SuperUsuario)

La aplicación permite almacenar y llevar un histórico de los salarios de los empleados junto con el
cargo asociado y la fecha del mismo.

Pueden ser vistas en una tabla en el detalle empleado, en la sección Hist. Salarios.

Agregar Salario (Administradores y SuperUsuario)

Muestra un formulario para agregar un salario al empleado.

Se puede acceder desde detalle empleado, sección Salarios con el botón agregar
En él se solicitan los siguientes datos:

• Fecha
(Obligatorio)
o Selector calendario, se
puede ingresar
manualmente en
formato dd/mm/aaaa
• Cargo
(Obligatorio)
• Monto Salario
(Obligatorio)

Si el salario se agrega correctamente se dirige al usuario al detalle del empleado actualizado. De lo

contrario se muestra mensaje de error.

Editar Salario (Administradores y SuperUsuario)

Muestra un formulario para editar salario del empleado.

Se puede acceder desde detalle empleado, sección Hist. Salarios con el botón del lápiz (Modificar)

en las opciones del salario.

Si el salario se edita correctamente se dirige al usuario al detalle del empleado actualizado. De lo

contrario se muestra mensaje de error.

Eliminar Salario (Administradores y SuperUsuario)

Permite eliminar un salario del empleado del sistema.

Se accede desde detalle empleado, sección Hist. Salarios con el botón de la papelera (Eliminar) en
las opciones del salario.

Se muestra un diálogo-cuadro preguntando si de verdad quiere eliminar salario empleado. Si se

responde 'Si' salario es eliminado. Si la eliminación es exitosa se redirige al usuario al detalle del
empleado ya actualizado. Si se responde 'No' o se cierra el diálogo-cuadro no ocurre ningún cambio
y se regresa a la vista detalle empleado.

Descargar Salarios (Administradores y SuperUsuario)

Se pueden descargar los salarios en formato PDF o EXCEL desde:

-Detalle Empleado, sección Salarios botones de descarga: Permite descargar la información

de los salarios en PDF o en Excel (Solo salarios)

 -Detalle Empleado, botón Descargar Información empleado.

Buscar Empleado

Se pueden realizar búsqueda de los empleados por Cédula de identidad, Código, Nombre, Cargo y
Avanzada.

Por CI, nombre, código o cargo.

Desde la página principal en el cuadro búsqueda empleado se puede buscar un empleado por CI,
nombre, código o cargo (del empleado o desempeñado en obra) ingresando el texto y haciendo clic
en el botón buscar de acuerdo al criterio de búsqueda que se quiera.
Se mostrará una tabla con la lista de los empleados resultado de la búsqueda.

Búsqueda Avanzada

Se puede acceder a la búsqueda avanzada con el botón en el cuadro búsqueda empleado.

Se muestra una tabla con todos los empleados y opciones para filtrarlos de acuerdo a diversos
criterios:

 Condición Salud
• Sin
o Se listarán los empleados que NO tengan una condición
especial de salud
 • Con
o Se listarán los empleados que tengan una condición
especial de salud
 Observaciones
• Sin Negativas
o Se listarán los empleados que NO tengan
observaciones negativas
• Con Negativas
o Se listarán los empleados que tengan observaciones
negativas
• Con Positivas
o Se listarán los empleados que tengan observaciones
positivas
 Departamento: Se listarán los empleados que tengan el dpto. elegido
 Estado: Se listarán los empleados con el estado elegido

Luego de seleccionarlos debe utilizar el botón Filtrar para realizar la búsqueda. Para

reiniciar la búsqueda debe utilizar el botón Limpiar Filtros

También se puede utilizar la opción de búsqueda de texto y ordenar la tabla por los campos de la
misma.

Desde aquí se puede:

• Ver el resumen del empleado con Botón ver Ir a Resumen Empleado

• Ir al detalle del empleado con Botón detalle Ir a Detalle Empleado

Obras

En la aplicación se almacena información relacionada a las obras como nombre, fecha de inicio,
fecha de finalización, estado, observaciones y empleados que trabajan en ella.
Lista Obras

Permite consultar la lista de obras ingresadas al sistema. Muestra una tabla con los datos de las
mismas:

• # Código
• Nombre
• Opciones

o Botón Ver

o Botón Detalle

El botón ver muestra un diálogo-recuadro con información de la obra, el botón detalle re

direcciona al detalle de la obra.

-Administrador y SuperUsuario:

Mismas funciones que usuario básico y adicionalmente botón

para agregar una nueva obra.
Diálogo Información Obra

o Nombre
o Código
o Fecha Ini (Fecha inicio obra)
o Fecha Ult (Fecha finalización)
o Estado (Estado Obra)
o Observaciones

Descargar Lista Obras

Muestra un diálogo-cuadro con las opciones de descarga del listado.

 Campos a descargar: Lista de

campos a mostrar.

Si no selecciona ninguno se
mostrarán todos:

Código, Nombre, Fecha Inicio, Fecha

Fin, Observaciones.

 Orden: Orden por el cual se

muestran las obras.

Código, Nombre, Fecha

Inicio, Fecha Fin.

 Formato:
Puede elegir el formato en que
descargar el listado
Al darle al botón del formato elegido se descargará un archivo de ese formato con
la información elegida.

 PDF (.pdf)
  Excel (.xlsx)

Ver detalle Obra

Muestra una vista con toda la información de la obra dividida en varias secciones.

-Administrador y superUsuario:

 Botón Editar Obra

 Botones Eliminar Obra

Descargar información Obra

Muestra un diálogo-cuadro con las opciones de descarga del detalle de la obra

 Campos a descargar: Lista de secciones a

Descargar. Si no selecciona ninguno se
descargarán todas las secciones:
o Datos Obra
 Nombre, # Código, Fecha
Inicio, Fecha Fin, Estado de la
obra, Observaciones
o Empleados
 Datos de participación de
empleados en la obra
Nombre, CI, Fecha Ingreso,
Fecha Egreso, Cargo en Obra,
Cargo Empleado, Estado
Trabajador
o Referencias
 Referencias asociadas a cargos desempeñados en la obra
 • Formato: Puede elegir el formato en que descargar el listado. Al darle al botón del
formato elegido se descargará un archivo de ese formato con la información elegida.

o PDF (.pdf)

o Excel (.xlsx) Las secciones ocupan c/u una hoja de cálculo (Datos obra, Empleados
y Referencias)

Datos Obra

Se muestran los datos de la obra:

Nombre, # Código, Fecha Inicio,

Fecha Fin, Estado de la obra,
Observaciones
 Botones de descarga: Permite descargar la información de los datos de la obra en PDF o

en Excel (Solo datos obra).

Empleados

Muestra en una tabla la lista de empleados que han participado en la obra, con los datos de
participación del empleado en la misma.

Tabla empleados:

o CI
o Nombres
o Apellidos
o Datos participación
• FechaIn: Fecha ingreso
• FechaEg: Fecha Egreso
• Cargo: Cargo en Obra

• Icono Lápiz Editar Participación (Administradores)

• Icono Papelera Eliminar Participación (Administradores)
• + Ref. Agregar Referencia

o Botón resumen empleado

o Botón Detalle Empleado

Diálogo Resumen Empleado

o Nombres
o Apellidos
o CI
o Código
o Estado Trabajador
o Cargo
o Departamento
o Salario
o Contrato
o Condición Salud
  El recuadro vacío indica que el empleado no presenta condiciones

especiales de salud.
 Un asterisco indica que el empleado presenta condiciones especiales de

salud que se pueden observar en su detalle.

o Observaciones

Muestra alguna observación puntual del empleado e indica si este tiene

observaciones (positivas o negativas) las cuales pueden ser vistas en el
detalle del empleado

o Positivas

 El recuadro vació indica que no tiene , un visto que si tiene

o Negativas
 El recuadro vació indica que no tiene , un asterisco que si tiene

o Más Información: Botón que permite acceder al detalle del empleado.

Botones de descarga: Permite descargar la información de la participación de los

empleados en PDF o en Excel (Solo participación empleados)

Botón para agregar participación empleado a la obra.

Referencias

Referencias asociadas a la obra con cargo desempeñado en la misma.

Botones de descarga: Permite descargar la información de las referencias en PDF o en

Excel (Solo referencias).

Tabla con las referencias asociadas a la obra:

o Empleado
 Nombre y
apellidos
empleado
o CI
o Fecha
o Cargo (Cargo
desempeñado en obra)

o Ver (botón detalle referencia)

o Detalle Empleado
o Opciones (Administradores)

• Icono Lápiz (Editar Referencia)

• Icono Papelera (Eliminar Referencia)

-Detalle Referencia:

• Fecha
• Período
• Fortalezas
• Debilidades
• Cargo
• Supervisor
• Observaciones
Supervisor
• Objetivos Propuestos
Agregar Obra (Administradores y SuperUsuario)

Muestra un formulario para ingresar la información de una nueva obra. Se accede desde lista de

obras con el botón agregar.

En él se solicitan los siguientes datos:

• Nombre
• Código Obra
o No debe contener espacios en blanco o símbolos
como “;” o “|”
• Fecha Inicial
o Selector calendario, se puede ingresar
manualmente en formato dd/mm/aaaa
• Fecha Ult. (Fecha finalización)
o Selector calendario, se puede ingresar
manualmente en formato dd/mm/aaaa
• Estado Obra
• Observaciones

La obra a ingresar debe tener una código numérico único y

que no esté ya agregado a la aplicación.

Al darle al botón Agregar se verifica la información ingresada y si los datos son válidos la obra es
agregada al sistema y se redirige al usuario a la lista de obras ya actualizada. De lo contrario se
muestra un mensaje de error.

Editar Obra (Administradores y SuperUsuario)

Muestra un formulario para editar la información de una obra. Se accede desde detalle obra botón

Editar.

El formulario es el mismo de Agregar Obra pero con la información que ya está ingresada en el
sistema colocada en los campos correspondientes.

Se pueden cambiar todos los campos excepto el código ya que es el identificador de la obra.

Al darle al botón Editar se verifica la información ingresada y si los datos son válidos la obra es
agregada al sistema y se redirige al usuario a la lista de obras ya actualizada. De lo contrario se
muestra un mensaje de error.
Eliminar Obra (Administradores y SuperUsuario)

Permite eliminar una obra del sistema, si se hace se borrarán adicionalmente todas las
participaciones de empleados en la obra.

Se accede desde detalle obra botón Eliminar.

Se muestra un diálogo-cuadro preguntando si de

verdad quiere eliminar la obra. Si se responde 'Si' la
obra es eliminada junto a su información
relacionada (participación de empleados en la
obra).

Si la eliminación es exitosa se redirige al usuario a la

lista de obras ya actualizada. Si se responde 'No' o
se cierra el diálogo-cuadro no ocurre ningún cambio
y se regresa a la vista detalle obra.

Empleado en Obra

Los empleados se relacionan con las obras a través de su participación en ellas. Estas participaciones
guardan la información asociada a ellas como:

 CI empleado
 Código Obra
 Cargo en Obra
 Fecha Ingreso / Inicial
 Fecha Egreso / Fin
Se pueden ver las participaciones de los empleados en las obras en:

-Detalle empleado, Sección Obras.

-Detalle obra, Sección Empleados.

Seleccionar Empleado para Agregar a Obra (Administradores y SuperUsuario)

Vista para agregar empleado a una obra.

Se accede desde detalle Obra, sección Empleados, botón Agregar.

Se muestra una tabla con una lista como la de búsqueda avanzada de empleado, desde aquí se
puede filtrar y seleccionar el empleado que se quiere agregar a la obra (haciendo click en + Agregar).
Agregar empleado a obra (Administradores y SuperUsuario)

Muestra un formulario para agregar una participación de un empleado a obra. Se accede desde la
lista de Seleccionar Empleado a Obra haciendo clic en el botón Agregar del empleado que se quiere.

En él se solicitan los siguientes datos:

• CI empleado
o CI del empleado escogido,
solo se puede verificar
• Código Obra
o Código obra en la que se
quiere agregar empleado,
solo se puede verificar
• Fecha Inicial
• Fecha Egreso
• Cargo Obra

Si la participación del empleado se agrega correctamente se dirige al usuario al detalle de la obra

actualizado. De lo contrario se muestra mensaje de error

Editar participación empleado a obra (Administradores y SuperUsuario)

Muestra un formulario para editar una referencia

del empleado.

Se puede acceder desde Detalle obra, sección

Empleados, datos participación con el Icono del

lápiz (Modificar) en las opciones.

No se pueden cambiar ni CI empleado ni Código

Obra.

Si la participación del empleado se edita

correctamente se dirige al usuario al detalle de
la obra actualizado. De lo contrario se muestra
mensaje de error
Eliminar participación empleado en obra (Administradores y SuperUsuario)

Permite eliminar una participación del empleado en

una obra.

Se puede acceder desde Detalle obra, sección

Empleados, datos participación con el Icono de
Papelera (Eliminar) en las opciones.

Se muestra un diálogo-cuadro preguntando si de verdad

quiere eliminar la participación del empleado. Si se
responde 'Si' la participación es eliminada. Si la
eliminación es exitosa se dirige al usuario al detalle de la
obra actualizado. De lo contrario se muestra mensaje de
error.

Si se responde 'No' o se cierra el diálogo-cuadro no ocurre

ningún cambio y se regresa a la vista detalle obra.

Descargar Participación Empleados en Obra

Se pueden descargar las participaciones de los empleados en la obra en formato PDF o EXCEL desde:

• Detalle obra, sección Empleados botones de descarga.

(Sólo participación de empleados en la obra)

• Detalle Obras, botón Descargar Información obra

(Participación de empleados en la obra)

Agregar referencia empleado en obra

Formulario para agregar referencia de empleado a un cargo desempeñado en la obra.

Se puede acceder desde:

-Detalle obra, sección empleados con el botón +Ref en las opciones de los datos de participación en
la obra. (Datos de obra se agregan a formulario referencia)

-Detalle empleado, tabla Hist. Obras con el botón + en las opciones de los datos de participación en
la obra. (Datos de obra se agregan a formulario referencia)

-Detalle empleado, sección Referencias con el botón agregar. (Se debe elegir la obra en la sección

obra asociada)
Más información en Agregar Referencia.

Editar referencia empleado en obra (Administradores y SuperUsuario)

Muestra un formulario para editar una referencia del empleado.

Se puede acceder desde:

• Detalle obra, sección Referencias con el botón del lápiz (Modificar) en las opciones de la

referencia.

• Detalle empleado, sección Referencias con el botón del lápiz (Modificar) en las opciones de

la referencia.

Más información en Editar Referencia.

Eliminar referencia empleado en obra (Administradores y SuperUsuario)

Permite eliminar una referencia del empleado del sistema.

Se puede acceder desde:

-Detalle obra, sección Referencias con el botón de la papelera (Eliminar) en las opciones de la
referencia

-Detalle empleado, sección Referencias con el botón de la papelera (Eliminar) en las opciones de la
referencia

Más información en Eliminar Referencia.

Descargar Referencias Empleados en Obra

Se pueden descargar las referencias en formato PDF o EXCEL desde:

• Detalle obra, sección Referencias botones de descarga. (Solo referencias de cargos

asociados a la obra)
 • Detalle Obras, botón Descargar Información obra. (Referencias asociadas obra)

Buscar Obra

Se pueden realizar búsqueda de las obras por Código o Nombre.

Desde la página principal en el cuadro búsqueda obra se puede buscar un empleado por Código o
nombre ingresando el texto y haciendo clic en el botón buscar de acuerdo al criterio de búsqueda
que se quiera. Se mostrará una tabla con la lista de las obras resultado de la búsqueda.
Cargar Datos

Cargar datos empleados (Excel) (Administradores y SuperUsuario)

Permite cargar un documento excel para ingresar datos de los empleados.

Se puede acceder desde el menú principal haciendo clic en el botón cargar datos.
Se debe hacer clic en seleccionar archivo y buscar el documento Excel (.xlsx)

El documento debe seguir el siguiente formato:

FILA: Cod Dpto – Dpto

FILA EMPLEADO:

Código: -- C.I.: -- Fecha Nacimiento: -- Nombres: -- Fecha Ingreso: --

Edo. Civil: -- Sexo: -- Cargo: -- Banco: -- Cta. Banc.: -- Contrato: --

Estado: -- Dpto: -- Teléfono: -- Dirección: --

Si se selecciona el check editar empleados los datos del archivo que se suba actualizarán/
sobrescribirán los guardados en el sistema si el empleado ya está en el sistema.

En caso contrario (Check editar no seleccionado) si en el documento a subir hay datos de un

empleado que ya esté en el sistema no se realizará ningún cambio sobre este (ignorando la nueva
información)
Si el ingreso de datos se realizó correctamente se mostrará una vista indicando que el Ingreso de
datos ha sido exitoso y los siguientes datos:

o N°empleados a ingresar:
o N°empleados ingresados:
o N°empleados actualizados:

Si hubo algún error se mostrará un mensaje indicando el problema.

Cargar datos salarios (Excel) (Administradores y SuperUsuario)

No implementado

Cargar datos obras (Excel) (Administradores y SuperUsuario)

No implementado
Estadísticas (Administradores y SuperUsuario)

Permite descargar estadísticas de los empleados, agrupadas por departamento y estado

trabajador.

Se accede desde el botón estadísticas del menú principal.

Botones de descarga: Permite descargar las estadísticas en PDF o en Excel.

Calendario

Permite acceder a la sección calendario, donde se pueden ver fechas de interés como ingresos,
egresos, observaciones y cumpleaños.

Se accede desde el botón Calendario del menú principal.

Se presenta un calendario interactivo en el cual se pueden ver las fechas de interés, ir al detalle del
empleado asociado al evento y agregar una observación a una fecha en particular.

Los eventos se muestran con cuadros de colores y con el nombre del empleado asociado
y al hacer clic sobre estos se muestra un diálogo-cuadro con la información
referente al mismo y con un botón para acceder al detalle del empleado asociado.
Los colores indican el tipo de evento: Cumpleaños, Observaciones, Egresos e Ingresos.

Al hacer clic en una fecha se abre un diálogo-cuadro para agregar una

observación en esa fecha. Para esto se debe seleccionar el empleado y hacer clic en crear
observación. Al darle a crear observación se dirigirá al formulario Agregar Observación.
Administración Aplicación

Registro SuperUsuario

Permite registrar un usuario con cargo SuperUsuario lo que le permite

Realizar las acciones administrativas del sitio como:

- Invalidar / Validar (según validez usuario)

- Eliminar Usuario
- Hacer / Remover Admin (según rol usuario)

Se puede acceder desde:

- [dirección servidor]/registroSuperUsuario

Se muestra un formulario con los datos del registro normal más el campo de clave Especial (esta
clave verifica la identidad del superUsuario)

- Nombre: Nombre del usuario

- Cargo: Cargo del usuario
o (No se toma en cuenta, será cambiado a
superUsuario)
- Check Administrador: Si el usuario es administrador
o (No se toma en cuenta, al ser superUsuario será
admin también)
- Email: Correo electrónico del usuario
- Usuario: Nombre único con el cual iniciará sesión
- Clave: Contraseña con la cual iniciará sesión
- Captcha: Captcha para verificar usuario
o (No distingue mayúsculas y minúsculas)

- Clave Especial: Esta clave verifica la identidad del

superUsuario y lo valida automáticamente.

CLAVE ESPECIAL: -------------------------------

Si los datos son correctos se registrará el usuario como superUsuario
e iniciará sesión automáticamente redirigiéndolo a la página principal.
Lista Usuarios (SuperUsuario)

Vista que muestra una tabla con los usuarios registrados en la aplicación con la información y
opciones de los mismos.

Se puede acceder desde la página principal, haciendo clic en el icono Admin de la barra de
navegación.

La lista se muestra en una tabla con los siguientes datos:

• Usuario
• Nombre
• Cargo

• Admin (check o visto si es administrador , vacío caso contrario)

• Válido (check o visto si es válido , cuadro vacío caso contrario )

• Opciones
o Invalidar / Validar (según validez usuario)
o Eliminar Usuario
o Hacer / Remover Admin (según rol usuario)
 Información Importante:

• Solo los usuarios validados pueden iniciar sesión

• Los usuarios sin rol de admin solo pueden agregar observaciones y referencias (no pueden
editarlas/eliminarlas ni realizar otros cambios)
• Solo los usuarios con cargo superUsuario pueden entrar en la lista de usuarios y
validar/eliminar o cambiar rol admin

Validar / Invalidar Usuario (SuperUsuario)

Permite validar / invalidar a los usuarios desde la lista de usuarios. Esto permite que el usuario pueda
o no iniciar sesión.

Se puede acceder desde la Lista de Usuarios.

La acción se realiza haciendo clic en el botón validar / invalidar en las opciones del usuario

respectivo.

Agregar / Remover Rol Administrador (SuperUsuario)

Permite hacer / remover rol admin a los usuarios desde la lista de usuarios. Esto permite que el
usuario pueda agregar/editar y eliminar información.

Se puede acceder desde la Lista de Usuarios.

La acción se realiza haciendo clic en el botón hacer/remover admin en las opciones del usuario

respectivo.

Descargar Base de Datos (Excel-SQLITE) (SuperUsuario)

Permite descargar la base de datos actual en un archivo Excel (Cada tabla es una hoja). Se puede
acceder desde la Lista de Usuarios. (Dependiendo de la versión la descarga puede ser el Excel o la
base de datos SQLITE)

La acción se realiza haciendo clic en el botón Descargar Base Datos (Excel o SQlite)
Eliminar Usuario (SuperUsuario)

Permite eliminar un usuario de la aplicación. Se puede acceder desde la Lista de Usuarios.

Haciendo Clic en el botón Eliminar

Se muestra un diálogo-cuadro preguntando si de

verdad quiere eliminar usuario. Si se responde 'Si'
usuario es eliminado. Si la eliminación es exitosa se
dirige al usuario a la lista de usuarios actualizada.
De lo contrario se muestra mensaje de error.

Si se responde 'No' o se cierra el diálogo-cuadro no

ocurre ningún cambio y se regresa a la vista lista de
usuarios.

Información Técnica

La aplicación está desarrollada en el lenguaje JavaScript, Node.js utilizando el framework Express JS

(Infraestructura web rápida, minimalista y flexible para Node.js).

La aplicación utiliza Javascript en las vistas para realizar muchas funciones por lo cual debe estar
habilitado en los navegadores para poder utilizar la aplicación.

Por defecto la aplicación se ejecuta en el puerto definido en la variable ‘process.env.PORT’ o en el

puerto 8080.

La base de datos esta implementada en PostgreSQL:

• Sistema de base de datos relacional de código abierto, con una arquitectura que goza de
buena reputación gracias a su confiabilidad e integridad de los datos. Puede ser implantada
en la mayoría de los sistemas operativos y soporta claves foráneas, conjunciones, vistas,
triggers, procedimientos y la mayoría de los tipos de datos. Para el manejo de la base de
datos desde la aplicación se utiliza la librería Pg-promise que permite un fácil manejo de las
conexiones, operaciones y consultas a la base de datos. Adicionalmente puede ser
descargado el contenido de la base de datos en un archivo excel desde la sección Admin –
Descargar base de datos.

• También se implentó otra versión de la aplicación cuya única diferencia es la base de datos
SQLite, que podría ser puesta en producción dependiendo de los requerimientos. SQLITE es
un sistema de gestión de bases de datos relacional compatible con ACID. Ofrece como
 ventaja que el conjunto de la base de datos (definiciones, tablas, índices, y los propios datos)
son guardados como un sólo archivo (al contrario de PostgreSQL).

La base de datos es SQlite:

SQLite es un sistema de gestión de bases de datos relacional compatible con ACID. Ofrece
como ventaja que el conjunto de la base de datos (definiciones, tablas, índices, y los propios
datos) son guardados como un sólo archivo). En la aplicación la base de datos se encuentra
en el directorio raíz (nomina.db) y puede ser descargada desde la sección Admin.

Las vistas son plantillas (templates) HTML procesados con Handlebars (.hbs). Lenguaje de plantillas
que permite mostrar diferentes contenidos en el HTML dependiendo de los datos pasados junto a
la plantilla.

Estas plantillas se ubican en la carpeta views.

Las claves de los usuarios son pre-procesadas por el navegador antes de enviarlas (en registro y
login) creando un hash sha256. Este hash funciona como la verdadera clave del usuario y es lo que
recibe el servidor.

De este modo la aplicación nunca recibe la clave original ingresada por el usuario.

Esto no sirve para proteger la aplicación ante una captura de la clave. Solo evita que si la clave es
capturada el atacante pueda descifrar la clave original. Además de esto las claves se procesan con
la librería Bcrypt (Blowfish-based crypt) al momento de ser verificadas o guardadas en la base de
datos, esto permite proteger las claves ante una captura de la base de datos.

Para el manejo de la sesión se utiliza la librería express-session, esta permite a través de una cookie
identificar al usuario y guardar sus datos en una sesión creada en el servidor.

Para la creación de los archivos pdf se utiliza la librería node-html-pdf y para los documentos Excel
(lectura y escritura) se utiliza exceljs.

Otras librerías utilizadas son:

 async: ^2.3.0, (Sincronía de procesos)

 body-parser: ^1.17.0,
 csv-express: ^1.2.2,
 fast-csv: ^2.4.1,
 multer: ^1.4.1,
 serve-favicon: ^2.5.0,
 svg-captcha: ^1.3.11
(Procesamiento atributos POST)
(Lectura escritura CSV)
(Lectura escritura CSV)
(Manejo de archivos subidos al servidor)
(Icono favicon del sitio)
(Captcha para el registro)
 100

APÉNDICE B
Manual de Usuario Suradem Horas Hombre
 Información Suradem Horas Hombre

(/)

Documentación de la Aplicación
Actualizada: 20 de Junio, 2019

Documentación
A continuación se presenta la documentación/manual de la aplicación Suradem Horas Hombre, la cual es una
aplicación web que permite la carga de los partes diarios (horas hombre) de los trabajadores indicando el
día, obra, fase-etapa de construcción y las horas normales y extras (diurnas y nocturnas) ejecutadas. Con
estos datos permite sacar estadísticas como horas hombre necesarias por fase de construcción, total de
horas hombre y distribución semanal.

Tabla de contenidos
Resumen Aplicación
Tipos de Usuario
Inválido
Básico
Administrador
SuperUsuario
Registro
Inicio Sesión
Cambio Clave - Contraseña
Navegación
Menú
Barra Navegación
Botón Regresar
Botón Logo Suradem
Obras
Lista Obras
    Diálogo Información obra
    Descargar Lista obras
Detalle obra
    Descargar información Obra
    Datos Obras
    Partes Semanales
    Horas por Fase
Opciones obra
    Agregar obra
    Editar obra
    Eliminar obra
Búsqueda obra
Parte Diario
    Cargar Datos
    Detalle Parte Diario
    Parte Semanal
    Resumen Semanal
    Horas por Trabajador
    Horas por Fase
    Agregar Trabajador
    Agregar Horas
    Agregar Horas Todos
    Editar Horas
    Eliminar Horas Etapa
    Horas 0
    Eliminar Trabajador
    Eliminar Todos los Trabajadores
 Calendario
Administración Aplicación
Registro SuperUsuario
Lista Usuarios
    Validar / Invalidar Usuario
    Agregar / Remover Rol Administrador
    Descargar Base de Datos (Excel)
    Eliminar Usuario
Información Técnica

Resumen Aplicación
Suradem Horas Hombre es una aplicación web que permite la carga de los partes diarios (horas hombre) de
los trabajadores indicando el día, obra, fase-etapa de construcción y las horas normales y extras (diurnas y
nocturnas) ejecutadas. Con estos datos permite sacar estadísticas como horas necesarias por fase de
construcción, total de horas y distribución semanal.

La aplicación permite crear, consultar, modi car y eliminar diferentes datos de las obras como cliente,
fecha inicio, fecha n y estado

La aplicación permite crear, consultar, modi car y eliminar los partes diarios de los trabajadores
indicando la obra y fecha

La aplicación permite cargar/editar horas trabajadores en el Parte Semanal indicando el trabajor, día
semana, fase-etapa y tipo de horas

La aplicación permite ver resumen de distribución de horas por Fase-Etapa y trabajador en una Parte
Semanal

La aplicación permite ver resumen de horas por Fase-Etapa de una obra

La aplicación permite descargar la información consultada en un documento PDF o Excel.

La aplicación permite ver y acceder a los partes semanales y las obras asociadas desde un calendario

Tipos de Usuario
Los usuarios de la aplicación se dividen en los siguientes roles:

Inválido
Usuario registrado pero que no puede iniciar sesión hasta ser validado por un SuperUsuario.

Básico
Usuario validado con capacidad de consultar toda la información de las obras y partes diario (No puede
agregar, editar o eliminar información).

Administrador
Usuario con capacidad de agregar/modi car y eliminar todos los datos de los trabajadores, partes diarios y
obras.

SuperUsuario
Usuario que puede realizar las acciones de administrador y además tiene capacidad de:

Validar/invalidar a los usuarios que se registran.

Agregar/remover rol de admin
Eliminar usuarios

Registro
Para ingresar en la aplicación se debe contar con un usuario validado y su clave asociada.
Para registrarse en la aplicación debe acceder a la sección de registro. Puede hacerlo:

-Desde la barra de navegación, opción Registro

-Desde el botón Regístrese Aquí

-Desde la dirección: /registro

Luego debe ingresar los siguientes datos:

Nombre: Nombre del usuario

Cargo: Cargo del usuario

Rango Administrador: Si el usuario es

administrador

Email: Correo electrónico del usuario

(Importante para recuperación clave)

Usuario: Nombre único con el cual iniciará

sesión

Clave: Contraseña con la cual iniciará sesión

Captcha: para veri car usuario (No distingue

mayúsculas y minúsculas)

Si los datos son correctos se registrará el usuario de lo contrario se mostrará un mensaje de error.
Luego del registro debe esperar a ser validado por algún administrador (SuperUsuario) del sitio para poder
iniciar sesión.
Para más información acerca de validar usuarios ir a Validar / Invalidar Usuario

Inicio Sesión
Luego del registro y ser validado por un administrador podrá iniciar sesión ingresando su usuario y
contraseña en la sección Identifíquese y haciendo clic en Login.
Al iniciar sesión se le mostrará el menú principal y la barra de navegación con las opciones disponibles
dependiendo del tipo de usuario.

Cambio Clave - Contraseña

Los usuarios que hayan olvidado su contraseña pueden solicitar un cambio de clave haciendo click en olvido
su contraseña en la sección de Login (inicio sesión)

Se les pedirá nombre de usuario y llenar un captcha.

Luego se le enviará un correo (puede caer en la carpeta SPAM de su email) donde se le indica la dirección a la
cual debe acceder y colocar el código de reinicio y la fecha límite.

En la página cambio de clave colocará su usuario, la nueva clave y el código de reinicio.

Al concluir se muestra un mensaje con el resultado de la operación.

Navegación

Menú
El menú principal muestra una serie de botones para acceder a las diferentes secciones de la aplicación.

Lista Obras: Permite ver un listado con las obras. Ver Lista Obras

Cargar Datos: Permite elegir obra y fecha para cargar/editar o consultar datos de parte semanal Ver
Cargar Datos

Cuadro de Búsqueda Obra: Muestra opciones de búsqueda para obra por Código o Nombre. Ver
Búsqueda Obra

Calendario: Permite acceder a la sección calendario, donde se pueden ver las semanas trabajadas en
las obras y aceder a sus partes semanales o al detalle de la obra. Ver Calendario

Barra Navegación
Barra superior con vínculos para acceder a diferentes secciones de la página.

-Básico y Administradores:
 Icono Casa: Ir a página principal.

Inicio: Ir a página principal.

Calendario: Permite acceder al calendario Ver Calendario

Obras: Permite ver un listado con las obras. Ver Lista Obras

Información: Ir a la sección de información donde se encuentra esta documentación.

Salir: Cerrar Sesión.

-SuperUsuario:
Mismo menú pero con la opción de vista Admin

Admin: Ir a vista de administración de usuarios. Ver Lista Usuarios

Botón Regresar
(Atrás navegador - No actualiza o refresca página)

Botón presente en la mayoría de las vistas de la aplicación y que permite regresar a la

vista anterior. Es equivalente a la acción atrás del navegador por lo cual no actualiza ni
refresca la página anterior (a donde redirige).

Botón Logo Suradem

Imagen circular presente en la mayoría de las vistas de la aplicación y que al hacer clic
lleva al usuario a la página principal.

Obras
En la aplicación se almacena información relacionada a las obras como nombre, fecha de inicio, fecha de
nalización, estado, observaciones y los partes semanales trabajados en ella.

Lista Obras

Permite consultar la lista de obras ingresadas al sistema. Muestra una tabla con los datos de las mismas:

# Código

Nombre

Opciones

Botón Ver
Ver Resumen Obra
 Botón Detalle

Detalle Obra

-Administradores:

Mismas funciones que usuario básico y adicionalmente botón para agregar una nueva obra.

Ver Agregar Obra

Diálogo Información Obra

Luego debe ingresar los siguientes datos:

Nombre

Código

Fecha Ini (Fecha inicio obra)

Fecha Ult (Fecha nalización)

Estado (Estado Obra)

Observaciones

Descargar Lista Obras

Muestra un diálogo-cuadro con las opciones de descarga del listado.

Campos a descargar: Lista de campos a

mostrar.
Si no selecciona ninguno se mostrarán todos:

Código, Nombre, Fecha Inicio, Fecha Fin,

Observaciones.

Orden: Orden por el cual se muestran las

obras.

Código, Nombre, Fecha Inicio, Fecha Fin.

Formato:
Puede elegir el formato en que descargar el
listado (PDF o Excel)

Al darle al botón del formato elegido se

descargará un archivo de ese formato con la
información elegida.

Formato PDF:

Formato Excel: (.xlsx)

Detalle Obra
Muestra una vista con toda la información de la obra dividida en varias secciones. (Datos Obra, Partes
Semanales, Horas por Fase)

-Administradores:
Mismas funciones e información además de:

Botón Editar Obra: Ver Editar Obra

Botón Eliminar Obra: Ver Eliminar Obra

Descargar información Obra

Muestra un diálogo-cuadro con las opciones de descarga del detalle de la obra

Campos a descargar: Lista de secciones a

Descargar.
Si no selecciona ninguno se descargarán
todas las secciones:

Datos Obra
Nombre, # Código, Fecha Inicio,
Fecha Fin, Estado de la obra,
Observaciones

Partes Semanales
Datos de los partes semanales:
Fecha y Horas Hombre por día de
semana.

Horas Etapas
Datos de horas por fase-etapa:
Nombre fase-etapa, Cantidad de
semanas, Fechas semanas y
totales de horas.

Formato:
Puede elegir el formato en que descargar el
listado (PDF o Excel)

Al darle al botón del formato elegido se

descargará un archivo de ese formato con la
información elegida.
Formato PDF:

Formato Excel: (.xlsx) Las secciones ocupan c/u una hoja de cálculo

Datos Obras
Se muestran los datos de la obra:

Nombre, # Código, Fecha Inicio, Fecha Fin, Estado de la obra, Cliente y Observaciones

-Botones de descarga: Permite descargar la información de los datos de la obra en PDF o en Excel (Solo
datos obra).
Partes Semanales
Muestra en una tabla los partes semanales de la obra

-Botones de descarga: Permite descargar la información de los partes semanales en PDF o en Excel (Solo
partes semanales)

-Botón para agregar un parte diario (Semanal).

Ver cargar datos

-Tabla Partes Semanales:

Fecha
Semana
Fase-Etapa
Código Etapa
Ver (Botón Detalle Parte)

Ver Parte Diario

Horas por Fase

Muestra las horas hombre asociadas a las fases de construcción.

-Botones de descarga: Permite descargar la información en PDF o en Excel (Solo horas por fase).

-Datos Fase: Muestra el nombre de la fase-etapa, su código, las semanas que se trabajó en la fase-etapa y las
fechas de las mismas.
También muestra el total de horas hombre y como se distribuyen:

Total Horas
Total H. Semana (lunes a viernes)
Horas (horario normal)
H. Extra Diurnas
H. Extra Nocturnas

Total Fin Semana

H. Fin Semana (horario normal)
H. Fin Extra Diurnas
H. Fin Extra Nocturnas
Agregar obra (Administradores)
Muestra un formulario para ingresar la información de una nueva obra.
Se accede desde lista de obras con el botón agregar. Ver Lista Obras

En él se solicitan los siguientes datos:

Nombre

Código Obra (Obligatorio)

No debe contener espacios en blanco o
símbolos como “;” o “|”

Fecha Inicial
Selector calendario, se puede ingresar
manualmente en formato dd/mm/aaaa

Fecha Ult. (Fecha nalización)

Selector calendario, se puede ingresar
manualmente en formato dd/mm/aaaa

Estado Obra

Observaciones

La obra a ingresar debe tener una código numérico

único y que no esté ya agregado a la aplicación. Al
darle al botón Agregar se veri ca la información
ingresada y si los datos son válidos la obra es
agregada al sistema y se redirige al usuario a la lista
de obras ya actualizada. De lo contrario se muestra
un mensaje de error.

Editar obra (Administradores)

Muestra un formulario para editar la información de una obra. Se accede desde detalle obra botón Editar.
Ver Detalle Obra

El formulario es el mismo de Agregar Obra pero con la información que ya está ingresada en el sistema
colocada en los campos correspondientes. Se pueden cambiar todos los campos excepto el código ya que es
el identi cador de la obra. Al darle al botón Editar se veri ca la información ingresada y si los datos son
válidos la obra es agregada al sistema y se redirige al usuario a la lista de obras ya actualizada. De lo
contrario se muestra un mensaje de error.

Eliminar obra (Administradores)

Permite eliminar una obra del sistema, si se hace se

borrarán adicionalmente todas las participaciones
de empleados en la obra.
Se accede desde detalle obra botón Eliminar.
Ver Detalle Obra

Se muestra un diálogo-cuadro preguntando si de

verdad quiere eliminar la obra. Si se responde 'Si' la
obra es eliminada junto a su información
relacionada (participación de empleados en la obra).

Si la eliminación es exitosa se redirige al usuario a la

lista de obras ya actualizada. Si se responde 'No' o
se cierra el diálogo-cuadro no ocurre ningún cambio
y se regresa a la vista detalle obra.

Búsqueda Obra

Se pueden realizar búsqueda de las obras por Código o Nombre.

Desde la página principal en el cuadro búsqueda obra se puede buscar un empleado por Código o nombre
ingresando el texto y haciendo clic en el botón buscar de acuerdo al criterio de búsqueda que se quiera. Se
mostrará una tabla con la lista de las obras resultado de la búsqueda.

Parte Diario

Los partes diarios son la base de la aplicación ya que su carga y distribución son los datos de interés de la
misma. Se accede desde el botón cargar datos (seleccionando obra y fecha), desde el calendario o desde el
detalle de la obra (sección partes semanales). Consisten en la distribución de horas trabajadas por cada
empleado en la obra indicando el día de la semana, el tipo de hora (normal, extra diurna, extra nocturna) y la
fase-etapa de la obra.
Cargar Datos

Permite acceder al parte semanal para cargar datos (o consultar). Ver Detalle Parte
Debe seleccionarse la obra y la fecha que se quiere cargar o acceder. De no estar la obra debe agregarla
antes en lista de obras Agregar Obra. Ver Agregar Obra

Obra: Selector con lista de obras ingresadas en el sistema

Fecha: Selector calendario para fecha, también puede introducirse manualmente con el formato
dd/mm/yyyy

Semana: Texto con la fecha de inicio y n de la semana de acuerdo a la fecha ingresada. (No se puede
editar, se calcula automáticamente con la fecha)

Inicio: Fecha de inicio de semana escogida (No se puede editar, se calcula automáticamente con la
fecha)

Detalle Parte Diario

Muestra una vista con toda la información de los partes diarios de esa semana (parte semanal). Además de
las opciones de agregar, editar y eliminar información sobre lo mismos. La información se divide en 4
secciones:

Parte Semanal
Resumen Semanal
Horas por Trabajador
Horas por Fase

Parte Semanal
Se muestran el parte semanal en una tabla con los días de la semana, trabajadores y las opciones para
agregar, editar y eliminar información:
-Botón Agregar Trabajador: Permite agregar trabajador al parte semanal mediante un formulario. Ver

Agregar Trabajador

-Botón Códigos Fases Etapas: Muestra un diálogo-cuadro con los codigos de las etapas de construcción

-Botón Horas Cero: Permite colocar las horas de todos los trabajadores del parte semanal en 0 (eliminarlas).

Ver Horas Cero

-Botón Eliminar TODOS: Permite eliminar todos los trabajadores del parte semanal.

Ver Eliminar Todos los Trabajadores

-Tabla semana: tabla muesta los trabajadores y los días de la semana con las opciones de c/u.
Muestra Ficha (Ficha identi cación del trabajador), Nombre (trabajador) y días de la semana

-Botón Agregar Horas Todos: Permite agregar horas a todos los trabajadores en ese día de la semana. Ver
Agregar Horas Todos

-Tabla Parte Diario: Tabla interna que muestra las horas de cada etapa el día de la semana.

Sus iconos indican:

Horas Normales

Horas Extra Diurnas

Horas Extra Nocturnas

Botón Agregar Horas Ver Agregar Horas
Botón Editar Horas Etapa Editar Horas

Resumen
Muestra en una tabla un resumen de las horas hombre realizadas en la semana

-Botón Códigos Fases Etapas: Muestra un diálogo-cuadro con los codigos de las etapas de construcción

-Tabla Parte Diario: Tabla interna que muestra las horas de cada etapa el día de la semana.

Sus iconos indican:

Horas Normales

Horas Extra Diurnas

Horas Extra Nocturnas

Código Etapa

-Tabla Total: Última la de tabla resumen que muestra el total de las horas de cada día.

Horas por Trabajador

Muestra las horas realizadas por cada trabajador.

-Botones de descarga: Permite descargar la información en PDF o en Excel (Solo horas por trabajador).

-Tabla: Muestra la cha del trabajador, su nombre y CI, así como el total de horas hombre y como se
distribuyen:

Total Horas
Total H. Semana (lunes a viernes)
Horas (horario normal)
H. Extra Diurnas
H. Extra Nocturnas

Total Fin Semana

H. Fin Semana (horario normal)
H. Fin Extra Diurnas
H. Fin Extra Nocturnas
Horas por Fase
Muestra las horas hombre asociadas a las fases de construcción realizadas en la semana.

-Datos Fase: Muestra el nombre de la fase-etapa y su código.

También se muestra el total de horas hombre y como se distribuyen:

Total Horas
Total Semana (lunes a viernes)
Horas (horario normal)
H. Extra Diurnas
H. Extra Nocturnas

Total Fin Semana

H. Fin Semana (horario normal)
H. Fin Extra Diurnas
H. Fin Extra Nocturnas

Agregar Trabajador
Muestra un formulario para ingresar un trabajador al parte semanal en la obra.
Se accede desde parte semanal con el botón agregar.

En él se solicitan los siguientes datos:

Ficha Trabajador (Obligatorio)

Nombre Trabajador

CI Trabajador (sin pts solo números)

El empleado a ingresar debe tener una cha única y
que no esté ya agregado al parte semanal. Al darle
al botón Agregar se veri ca la información
ingresada y si los datos son válidos el trabajador es
agregado y se redirige al usuario al parte semanal
actualizado con el trabajador en él. De lo contrario
se muestra un mensaje de error.

Agregar Horas
Muestra un cuadro diálogo para agregar las horas realizadas por el trabajador en un día y etapa especí ca.

Se accede desde el botón + en la tabla interna del día de interés

Fase-Etapa (Obligatorio) : Selector fase-

etapa de construcción

Horas (horario normal)

HED (horas extra diurnas)

HEN (horas extra nocturnas)

Si la fase-etapa ya se encuentra agregada se

muestra un mensaje de error. Para cambiar las
horas de una etapa ya agregada se editar o agregar
horas a todos.
Ver Editar Horas
Ver Agregar Horas Todos

Agregar Horas Todos

Muestra un cuadro diálogo para agregar horas realizadas a todos los trabajadores en un día y etapa

especí ca. Se accede desde el botón +todos al lado del nombre del día de interés.

Fase-Etapa (Obligatorio) : Selector fase-

etapa de construcción

Horas (horario normal)

HED (horas extra diurnas)

HEN (horas extra nocturnas)

Si el trabajador ya tiene horas en la fase-etapa se

sobreescribirán y se sustituirán por las ingresadas.

Editar Horas
Muestra un cuadro diálogo para editar horas realizadas por el trabajador en un día y etapa especí ca. Se
accede desde el botón con el código de la etapa en la tabla interna del día de interés

Etapa: Fase-etapa de construcción (No se

 puede cambiar)

Horas (horario normal)

HED (horas extra diurnas)

HEN (horas extra nocturnas)

Botón Eliminar Etapa

Ver Eliminar Horas Etapa

Al darle al botón editar horas se veri can los datos y

si son correctos se editan las horas y se redirige al
parte semanal actualizado.

Eliminar Horas Etapa

Muestra un cuadro diálogo para con rmar si elimina todas las horas de esa etapa en la semana para el
trabajador. Se accede desde el botón eliminar

en el diálogo de Editar Horas. Ver Editar

Horas

NOTA: Si se quiere colocar las horas en 0 sin borrar la etapa se puede utlizar el botón horas cero, o editar las
horas manualmente a 0.
Ver Editar Horas
Ver Horas Cero

Horas Cero
Muestra un cuadro diálogo para con rmar si colocan en 0 todas las horas de todos los trabajadores del

parte semanal. Se accede desde el botón horas cero en el parte semanal Ver Parte

Semanal

Si se responde Si se eliminan todas las horas del parte semanal, quedando los trabajadores con sus
etapas vacías.

Eliminar Trabajador
Muestra un cuadro diálogo para con rmar si desea eliminar trabajador del parte semanal. Esto eliminará

todas sus horas del parte. Se accede desde el icono de papelera en en el parte semanal Ver Parte

Semanal

Si se responde Si se elimina al trabajador y todas sus horas del parte semanal.

Eliminar Todos los Trabajadores

Muestra un cuadro diálogo para con rmar si desea eliminar TODOS los trabajadores del parte semanal.
Esto eliminará todas las horas del parte y ya no saldrá en el calendario ni en los partes de la obra. Se accede

desde el icono de papelera TODOS en en el parte semanal. Ver Parte Semanal

Si se responde Si se eliminan TODOS los trabajadores y sus horas del parte semanal.
Calendario

Permite acceder a la sección calendario, donde se pueden ver las fechas de los partes semanales de las obras
y acceder al detalle de los partes o la obra. Se accede desde el botón Calendario del menú principal.

Los partes se muestran con cuadros de colores y con el nombre de la obra asociada ocupando el largo de la
semana

y al hacer clic sobre estos se muestra un diálogo-cuadro con la información referente al mismo y con un
botón para acceder al detalle del parte y la obra asociada.
Los colores indican la obra:

Administración Aplicación (Administradores)

Registro SuperUsuario

Permite registrar un usuario con cargo SuperUsuario lo que le permite

Realizar las acciones administrativas del sitio como:

Invalidar / Validar (según validez usuario) Ver Validar/Invalidar

Eliminar Usuario Ver Eliminar Usuario

Hacer / Remover Admin (Según rol usuario) Ver Agregar/Remover Administrador

Descargar Base de Datos Ver Descargar Base Datos

Se puede acceder desde:

[dirección servidor]/registroSuperUsuario

Se muestra un formulario con los datos del registro

normal más el campo de clave Especial (esta clave
veri ca la identidad del superUsuario)

Nombre: Nombre del usuario

Cargo: Cargo del usuario (No se toma en

cuenta, será cambiado a superUsuario)

Check Administrador: Si el usuario es

administrador (No se toma en cuenta, al ser
superUsuario será administrador también)

Email: Correo electrónico del usuario

 Usuario: Nombre único con el cual iniciará
sesión

Clave: Contraseña con la cual iniciará sesión

Clave Especial: Esta clave veri ca la identidad

del superUsuario y lo valida
automáticamente.

CLAVE ESPECIAL

Captcha: para veri car usuario (No distingue

mayúsculas y minúsculas)

Si los datos son correctos se registrará el usuario como superUsuario e iniciará sesión automáticamente
redirigiéndolo a la página principal.

El superusuario puede realizar diversas funciones como ver la lista de usuario y realizar acciones sobre ellos,
como validarlos/invalidarlos, otorgar/remover rol administrador, entre otras.

Lista Usuarios (SuperUsuario)

Vista que muestra una tabla con los usuarios registrados en la aplicación con la información y opciones de
los mismos. (Solo pueden acceder los superUsuarios). Se puede acceder desde la página principal, haciendo
clic en el icono Admin de la barra de navegación.

La lista se muestra en una tabla con los siguientes datos:

Usuario

Nombre

Cargo

Admin

Check o visto si es administrador

vacío caso contrario

Válido

Check o visto si es válido

cuadro vacío caso contrario

 Opciones
Invalidar / Validar (según validez usuario). Ver Validar/Invalidar
Eliminar Usuario. Ver Eliminar Usuario
Hacer / Remover Admin (según rol usuario). Ver Agregar/Remover Administrador

Información Importante

Solo los usuarios validados pueden iniciar sesión

Los usuarios sin rol de admin solo pueden consultar

información.

Solo los usuarios con cargo superUsuario pueden entrar en la

lista de usuarios y validar/eliminar o cambiar rol admin

Validar / Invalidar Usuario

Permite validar / invalidar a los usuarios desde la lista de usuarios. Esto permite que el usuario pueda o no
iniciar sesión. Se puede acceder desde la Lista de Usuarios.
Ver Lista Usuarios

La acción se realiza haciendo clic en el botón validar / invalidar en las opciones del usuario respectivo.

Agregar / Remover Rol Administrador

Permite hacer / remover rol admin a los usuarios desde la lista de usuarios. Esto permite que el usuario
pueda agregar/editar y eliminar información. Se puede acceder desde la Lista de Usuarios.
Ver Lista Usuarios

La acción se realiza haciendo clic en el botón hacer/remover admin en las opciones del usuario respectivo.

Descargar Base de Datos (Excel)

Permite descargar la base de datos actual en un archivo Excel (Cada tabla es una hoja). Se puede acceder
desde la Lista de Usuarios.
Ver Lista Usuarios

La acción se realiza haciendo clic en el botón Descargar Base Datos (Excel)

Eliminar Usuario
Permite eliminar un usuario de la aplicación.

-Se puede acceder desde la Lista de Usuarios. Haciendo Clic en el botón Eliminar con el icono de papelera

en las opciones de lista de usuarios.

Ver Lista Usuarios

Se muestra un diálogo-cuadro preguntando si de

verdad quiere eliminar usuario. Si se responde 'Si'
usuario es eliminado. Si la eliminación es exitosa se
dirige al usuario a la lista de usuarios actualizada.
De lo contrario se muestra mensaje de error.
Si se responde 'No' o se cierra el diálogo-cuadro no
ocurre ningún cambio y se regresa a la vista lista
usuarios.

Información Técnica
La aplicación está desarrollada en el lenguaje JavaScript para Node.js, utilizando el framework Express JS
(Infraestructura web rápida, minimalista y exible para Node.js). La aplicación utiliza Javascript en las vistas
para realizar muchas funciones por lo cual debe estar habilitado en los navegadores para poder utilizar la
aplicación. Por defecto la aplicación se ejecuta en el puerto de nido en la variable ‘process.env.PORT’ o en el
puerto 8080.

La base de datos esta implementada en PostgreSQL:

Sistema de base de datos relacional de código abierto, con una arquitectura que goza de buena
reputación gracias a su con abilidad e integridad de los datos. Puede ser implantada en la mayoría de
los sistemas operativos y soporta claves foráneas, conjunciones, vistas, triggers, procedimientos y la
mayoría de los tipos de datos. Para el manejo de la base de datos desde la aplicación se utiliza la
librería Pg-promise que permite un fácil manejo de las conexiones, operaciones y consultas a la base
de datos. Adicionalmente puede ser descargado el contenido de la base de datos en un archivo excel
desde la sección Admin.
Ver Descargar Base de Datos (Excel)

Las vistas son plantillas (templates) HTML procesados con Handlebars (.hbs). Lenguaje de plantillas que
permite mostrar diferentes contenidos en el HTML dependiendo de los datos pasados junto a la plantilla.
Estas plantillas se ubican en la carpeta views.

Las claves de los usuarios son pre-procesadas por el navegador antes de enviarlas (en registro y login)
creando un hash sha256. Este hash funciona como la verdadera clave del usuario y es lo que recibe el
servidor. De este modo la aplicación nunca recibe la clave original ingresada por el usuario.

Esto no sirve para proteger la aplicación ante una captura de la clave. Solo evita que si la clave es capturada
el atacante pueda descifrar la clave original. Además de esto las claves se procesan con la librería Bcrypt
(Blow sh-based crypt) al momento de ser veri cadas o guardadas en la base de datos, esto permite
proteger las claves ante una captura de la base de datos. Para el manejo de la sesión se utiliza la librería
express-session, esta permite a través de una cookie identi car al usuario y guardar sus datos en una sesión
creada en el servidor.

Para la creación de los archivos pdf se utiliza la librería node-html-pdf y para los documentos Excel (lectura y
escritura) se utiliza exceljs.
Otras librerías utilizadas son:

async: ^2.3.0, (Sincronía de procesos)

body-parser: ^1.17.0, (Procesamiento atributos POST)

csv-express:: ^1.2.2, (Lectura escritura CSV)

fast-csv: ^2.4.1, (Lectura escritura CSV)

multer: ^1.4.1, (Manejo de archivos subidos al servidor)

serve-favicon: ^2.5.0, (Icono favicon del sitio)

svg-captcha: ^1.3.11 (Captcha para el registro)

Basado en el diseño con de Xiaoying Riley (https://themes.3rdwavemedia.com/) para desarrolladores