Está en la página 1de 74

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERÍA Y ARQUITECTURA


ESCUELA DE INGENIERÍA DE SISTEMAS INFORMÁTICOS

Ciclo I - 2019

Tema:
Sistema Informático para el control de membresías de la Asociación Salvadoreña de
Profesionales en Administración de Empresas.
Sprint 1

Materia: Diseño de Sistemas I

Docente: Ing. Karen Elvira Peñate Avilés

Equipo N°: 11
Nombre Carné
Aguilar Quevedo, Paola Renée AQ16002
Aquino Alas, Doris Elizabeth AA11002
Delgado Hernández, Jennifer Irene DH16001
Moto Herrera, Carlos Alfredo MH16006
Rosales Morales, William Ernesto RM16035

Grupo Teórico: 01

Ciudad Universitaria, 05 de julio de 2019


Índice
Introducción...................................................................................................................4

Objetivos.......................................................................................................................5

General......................................................................................................................5

Específicos.................................................................................................................5

Roles desempeñados:..................................................................................................6

SPRINT 1......................................................................................................................7

1. Product Backlog........................................................................................................7

Historias de Usuario refinadas para el sprint 1........................................................12

2. Sprint Planning........................................................................................................17

Objetivos del primer sprint.......................................................................................17

Cálculo de la duración del sprint..............................................................................17

Que trabajo se realizará para realizar el sprint (Pila del sprint)..............................18

3. Plantillas del Scrum Diario......................................................................................19

4. Burndown chart.......................................................................................................26

5. Sprint Review..........................................................................................................27

Carta de Aceptación del usuario del primer sprint..................................................27

Análisis y diseño (Modelado de requerimientos).....................................................28

i. Casos de Uso........................................................................................................28

ii. BPMN de los procesos realizados.......................................................................33

iii. Modelo Arquitectónico.........................................................................................33

iv. Diseño de interfaces de entrada y salida............................................................36

v. Diseño de base de datos integrando el primer sprint:.........................................39

Modelo Conceptual..............................................................................................39

Diseño Físico.......................................................................................................39

Diccionario de Datos................................................................................................40

6. Sprint Retrospective................................................................................................41

Conclusión...................................................................................................................42
Glosario de términos (Si es necesario)........................¡Error! Marcador no definido.

Anexos.........................................................................................................................44

Anexo 1: Desarrollo de historia de usuario HU82...................................................44

Anexo 2: Desarrollo de historias de usuario 83 y 84...............................................62

Anexo 3: Desarrollo de historia de usuario HU85...................................................66

Anexo 4: Desarrollo de historia de usuario HU87...................................................68

Anexo 5: Carta de Aceptación.................................................................................70

Manual de Usuario de la funcionalidad desarrollada. . .¡Error! Marcador no definido.


Introducción
En el ámbito profesional y laboral la tecnología ha conllevado a la aparición de
nuevos sistemas de organización, nuevas técnicas de comunicación y nuevos
sistemas informáticos. Ello supone que el desarrollo tecnológico ha contribuido, de
forma decisiva, al progreso económico y social.

El acceso a internet, la realización de trabajos o tareas a través de celulares,


suponen que las empresas tienen que cambiar sus organizaciones flexibilizando así
sus estructuras organizacionales y adecuándose a los cambios, para poder tener
una ventaja competitiva frente a otras empresas.

Las Asociaciones son instituciones vivas en constante crecimiento y desarrollo, es


debido a esto que la Asociación Salvadoreña de Profesionales en Administración de
Empresas (ASPAE) se ha visto en la necesidad de desarrollar un sistema que
permita automatizar algunos de los procesos, tareas o actividades que actualmente
se hacen de manera manual y que son de vital importancia ya que permiten cumplir
los objetivos de la organización.

El presente documento se refiere al desarrollo del primer Sprint que se ha llevado a


cabo utilizando la metodología SCRUM, para el desarrollo del sistema informático
para el control de membresías de ASPAE.

De acuerdo a la metodología usada se presentan tareas llevadas a cabo durante el


Sprint 1, como el Product Backlog que es un listado de todas las historias de usuario
que recolectó el equipo de trabajo por medio de entrevistas al StakeHolder.

Se presenta además El Sprint Planning que se compone de las siguientes


actividades: Objetivos del Sprint, cálculo de la duración del Sprint y el Sprint Backlog
que es el listado de historias de usuario que se implementaron durante el Sprint 1.

El documento contiene también las plantillas del Scrum diario, donde se define qué
avances se han logrado, las limitaciones que se han tenido y los objetivos a lograr
para la siguiente reunión, también el Burndown chart así como el Sprint Review.

Objetivos

General
Utilizar la metodología SCRUM para llevar a cabo los procesos de desarrollo, y
tareas de documentación necesarios para la creación del Sistema Informático para
el control de Membresías de la Asociación Salvadoreña de Profesionales en
Administración de Empresas (ASPAE).

Específicos
 Aplicar la metodología SCRUM para el desarrollo del Sprint 1.
 Crear el Product backlog a partir de las historias de usuario recolectadas por
medio de entrevistas al stakeHolder.
 Hacer el cálculo de la duración del Sprint 1 por medio de las horas de trabajo
estimadas para cada una de las historias de usuario del Sprint backlog.
 Crear el modelo conceptual de la base de datos para el primer Sprint, así
como el modelo físico.
URL de la funcionalidad entregada
http://176.223.135.203

Roles desempeñados:

Jennifer Irene Delgado Hernández: SCRUM master.

Paola Renèe Aguilar Quevedo: Documentador,

Tester. Doris Elizabeth Aquino Alas: Documentador,

Tester.

Carlos Alfredo Moto Herrera: Analista Programador.

William Ernesto Rosales Morales: Analista Programador.


SPRINT 1

1. Product Backlog
Prioridad Sprint
Analista
Código Nombre de a Estado
Asignado
desarrollo realizar
No
HU01 Registrar un nuevo socio Alta 2
iniciada
No
HU02 Aprobar solicitud de socio Alta 2
iniciada
No
HU03 Denegar solicitud de socio. Alta 2
iniciada
No
HU04 Añadir logros y postulaciones Media 2
iniciada
No
HU05 Deshabilitar socio Media 2
iniciada
No
HU06 Solicitar curriculum certificado Media 2
iniciada
No
HU07 Detalle de pagos de membresías. Media 2
iniciada
No
HU08 Generar informe de socios Media 2
iniciada
Imprimir estado de pagos de No
HU09 Media 2
membresías certificado iniciada
No
HU10 Imprimir pagos de membresías Media 2
iniciada
No
HU11 Registrar nuevo evento Alta 2
iniciada
No
HU12 Añadir datos al evento Alta 2
iniciada
Añadir invitación de evento ya No
HU13 Media 2
registrado. iniciada
No
HU14 Añadir asistencia de socios al evento. Media 2
iniciada
Eliminar registro de asistencia de socios No
HU15 Baja 2
al evento. iniciada
Modificar registro de asistencia de No
HU16 Media 2
socios al evento. iniciada
Generar informe de liquidación general No
HU17 Baja 2
de eventos. iniciada
No
HU18 Generar informe de eventos. Media 2
iniciada
Registro de remesas para el pago de No
HU19 Alta 2
cuotas. iniciada
Modificación de remesas para pago de No
HU20 Media 2
cuotas. iniciada
No
HU21 Eliminar cuota ingresada. Baja 2
iniciada
No
HU22 Consultar remesas para pago de cuotas. Media 2
iniciada
No
HU23 Consultar detalle de cuota cancelada. Baja 2
iniciada
No
HU24 Registro de ingreso por evento. Alta 2
iniciada
Modificar registro de ingreso por No
HU25 Media 2
evento. iniciada
Eliminar registro de documento de No
HU26 Baja 2
ingreso por evento. iniciada
Consultar listado de documentos No
HU27 Media 2
emitidos de ingresos por evento. iniciada
Consultar detalle de documentos No
HU28 Baja 2
emitidos de ingreso por evento. iniciada
No
HU29 Registro de cuenta por cobrar. Alta 2
iniciada
No
HU30 Modificar registro de cuenta por cobrar. Media 2
iniciada
Completar registro de cuenta por No
HU31 Baja 2
cobrar. iniciada
No
HU32 Eliminar registro de cuenta por cobrar. Baja 2
iniciada
Consultar listado de cuenta por cobrar No
HU33 Media 2
por evento. iniciada
Consultar detalle de cuenta por cobrar No
HU34 Baja 2
por evento. iniciada
No
HU35 Registro de ingreso por donación. Alta 2
iniciada
No
HU36 Modificar registro de donación. Media 2
iniciada
No
HU37 Eliminar registro de donación . Baja 2
iniciada
No
HU38 Consultar listado de donaciones. Media 2
iniciada
No
HU39 Consultar detalle de donaciones. Baja 2
iniciada
No
HU40 Registro de otros ingresos. Alta 2
iniciada
No
HU41 Modificar registro de otros ingresos. Media 2
iniciada
Eliminar documentos emitidos de otros No
HU42 Baja 2
ingresos. iniciada
Consultar listado de documentos No
HU43 Media 2
emitidos para otros ingresos. iniciada
Consultar detalle de documentos No
HU44 Media 2
emitidos para otros ingresos. iniciada
No
HU45 Registro de documento de remesa. Alta 2
iniciada
No
HU46 Modificación de documento de remesa. Media 2
iniciada
No
HU47 Eliminar documento de remesa. Baja 2
iniciada
Consultar listado de documentos de No
HU48 Media 2
remesa. iniciada
Consultar detalle de documento de No
HU49 Baja 2
remesa. iniciada
No
HU50 Generar informe de egreso. Media 3
iniciada
No
HU51 Registrar egreso. Alta 3
iniciada
No
HU52 Imprimir detalle de egreso. Media 3
iniciada
No
HU53 Actualizar detalle de egreso. Alta 3
iniciada
No
HU54 Consultar detalle de egreso. Media 3
iniciada
Consultar Historial de informes de No
HU55 Baja 3
egreso. iniciada
No
HU56 Eliminar informe de egreso del historial. Baja 3
iniciada
No
HU57 Consultar detalle de informe de egreso. Media 3
iniciada
No
HU58 Generar informes de ingresos: Remesas. Baja 3
iniciada
Generar informes de ingresos: No
HU59 Baja 3
Membresías. iniciada
No
HU60 Generar informes de ingresos: Eventos. Baja 3
iniciada
Generar informes de ingresos: No
HU61 Baja 3
Donaciones. iniciada
Generar informes de ingresos: Otros No
HU62 Baja 3
Ingresos. iniciada
No
HU63 Configurar permisos de usuario. Alta 2
iniciada
No
HU64 Eliminar usuario. Media 2
iniciada
No
HU65 Modificar usuario. Media 2
iniciada
No
HU66 Agregar usuario. Alta 2
iniciada
Crear respaldo de todos los datos del No
HU67 Media 3
sistema iniciada
No
HU68 Actualizar cuota de membresía. Alta 2
iniciada
No
HU69 Actualizar acta (formato PDF). Media 2
iniciada
William
HU70 Iniciar sesión (administrador). Alta 1 Terminada
Rosales
William
HU71 Inicio sesión (experto). Alta 1 Terminada
Rosales
William
HU72 Inicio de sesión (Asistente). Alta 1 Terminada
Rosales
No
HU73 Ver perfil (socio). Media 2
iniciada
No
HU74 Modificar perfil (socio). Media 2
iniciada
No
HU75 Guardar perfil (socio). Alta 2
iniciada
No
HU76 Ingreso al perfil de usuario. Alta 2
iniciada
No
HU77 Envío de mensajes (socio). Baja 2
iniciada
No
HU78 Envío de mensajes (administrador). Baja 2
iniciada
No
HU79 Imprimir datos del perfil (socio). Baja 2
iniciada
No
HU80 Actualizar curriculo virtual (socio) Media 2
iniciada
No
HU81 Actualizar curriculo en formato PDF. Media 2
iniciada
Definición de efectos visuales
HU82 Media 1 Terminada
dinámicos. Paola Aguilar
Elección y ubicación en pantalla de
HU83 Alta 1 Terminada
elementos en plantillas base. Doris Aquino
Especificaciones de elementos de
HU84 Alta 1 Terminada
plantillas base. Carlos Moto
HU85 Selección de efectos visuales básicos. Doris Aquino Alta 1 Terminada
Irene
HU86 Preparación de entorno de trabajo. Alta 1 Terminada
Delgado
HU87 Construcción de la seguridad. Carlos Moto Alta 1 Terminada
Creación de Estándar para bitácora de No
HU88 Alta 1
Control para Seguridad Empresarial iniciada
No
HU89 Configuración de Firmas para Reportes 2
iniciada
HU90 Dar de Baja Registro Alta 2 No
iniciada
No
HU91 Recuperar Registro Ata 2
iniciada
No
HU92 Eliminar Registro Alta 2
iniciada

Importante:
Historias de Usuario refinadas para el sprint 1

Código: HU-70 Nombre: Inicio de sesión


Usuario: Administrador (administrador)
Fecha de
28/05/2019 Iteración asignada 1
escritura:
Prioridad
Alta
Stackholder:
Analista asignado William Rosales
Prioridad de
desarrollo Alta
Descripción:
Como Administrador debe poseer acceso a todos los módulos y no tener restricciones
de ninguna clase, pudiendo crear, editar, asignar o eliminar según su criterio.
Criterios de Aceptación:
Al ingresar al software los módulos deben incluir las opciones especiales para
administrador, las cuales son:
-Administración de usuario (Solo para administrador)
-Configuraciones (Editar quien puede ver y editar)
-Administración de eventos
-Ingreso
-Egreso
*Nota: La prioridad para el stakeholder puede ser baja, media o alta

Código: HU-71 Nombre: Inicio de sesión


Usuario: Administrador (experto)
Fecha de 28/05/2019 Iteración asignada:
1
escritura:
Prioridad Alta Analista asignado:
Stackholder:
William Rosales
Prioridad de Alta
Desarrollo:
Descripción:
Como experto debe poder tener acceso a todos los módulos, sin embargo no posee
permisos para crear, editar o eliminar ningún elemento, solo puede ver la información
presentada.
Criterios de Aceptación:
Al ingresar al software los módulos deben habilitar las vistas siguientes:
-Administración de usuario (modo vista)
-Configuraciones (modo vista)
-Administración de eventos (modo vista)
-Ingreso (modo vista)
-Egreso (modo vista)
*Nota: La prioridad para el stakeholder puede ser baja, media o alta
Código: HU-72 Nombre: Inicio de sesión
Usuario: Administrador (Asistente)
Fecha de
28/05/2019 Iteración asignada: 1
escritura:
Prioridad
Alta
Stackholder:
Analista asignado: William Rosales
Prioridad de
desarrollo: Alta
Descripción:
Como Asistente debe poder, después de iniciar sesión, tener acceso a funciones de
creación y edición en los módulos a los que tiene acceso, sin embargo, no debe poder
eliminar información.
Criterios de Aceptación:
Al ingresar al software los módulos visibles deben ser:
-Administración de eventos
-Ingreso
-Egreso
*Nota: La prioridad para el stakeholder puede ser baja, media o alta

Código: HU-82 Definición de


Usuario: Desarrolladores Nombre: efectos visuales
dinámicos
Fecha de 08/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
Stackholder:
Analista
Prioridad Media Paola Aguilar
asignado:
de
desarrollo:
Descripción:
Como desarrollador quiero elegir los efectos visuales dinámicos de elementos como la
fuente, los títulos, las ventanas y los botones, como, por ejemplo, el cambio de efectos
al obtener el foco o pasar el puntero sobre algún elemento, la animación de aparición y
cierre de ventanas y cuadros emergentes, el uso de toltiks, etc. para la interacción con
el usuario del sistema.
Criterios de Aceptación:
Que se pueda consultar un documento con el listado de especificaciones técnicas de
los efectos visuales dinámicos definidos para cada elemento, para mejorar la
interacción con el usuario del sistema.
Código: HU-83 Elección y
Usuario: Desarrolladores ubicación en
Nombre: pantalla de
elementos en
plantillas base
Fecha de 08/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
Stackholder: Analista
Doris Aquino
Prioridad de Alta asignado:
desarrollo:
Descripción:
Como desarrollador deseo crear un estándar de la ubicación de elementos como los
botones de operación, encabezado, barra de navegación, barra de estado, etc.para
poder utilizarlo durante todo el desarrollo del proyecto y evitar ambigüedades.
Criterios de Aceptación:
Obtener una serie de plantillas en un formato con facilidad de interpretación, para
poder consultar cada vez que se requiera crear un prototipo de GUI.

Código: HU-84 Especificaciones de


Usuario: Desarrolladores Nombre: elementos de
plantillas base
Fecha de 08/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
Stackholder: Analista
Carlos Moto
Prioridad de Alta asignado:
desarrollo:
Descripción:
Como desarrollador quiero generar la documentación necesaria para saber más sobre
las especificaciones técnicas de los elementos contenidos en la o las plantillas base
para las Interfaces de usuario, con descripciones lo suficientemente detalladas en
forma tabulada que permita evitar ambigüedades.
Criterios de Aceptación:
Que se pueda consultar un documento con el listado de especificaciones técnicas de
cada elemento contenido en la o las plantillas base previamente creadas.
Código: HU-85 Selección de
Usuario: Desarrolladores Nombre: efectos visuales
básicos
Fecha de 08/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
Stackholder: Analista
Doris Aquino
Prioridad de Alta asignado:
desarrollo:
Descripción:
Como desarrollador deseo elegir los efectos básicos de elementos como la fuente, los
títulos, las ventanas y los botones, como, por ejemplo, el tipo de letra, tamaño de
títulos y texto normal, color y tipo de relleno de ventanas y botones, etc.
Criterios de Aceptación:
Que se pueda consultar un documento con el listado de especificaciones técnicas de
los efectos visuales básicos definidos para los elementos de forma estática.

Código: HU-86 Preparación de


Nombre: entorno de trabajo
Usuario: Desarrolladores
Fecha de 8/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
StackHolder: Analista de
Irene Delgado
Prioridad de Alta desarrollo:
desarrollo:
Descripción:
Para preparar el entorno de trabajo se necesitará de un hosting el cual deberá incluir los
elementos esenciales para realizar el sistema, como lo es el servidor web, PHP, el
servidor de base de datos MySQL y se utilizará también el Framework de programación
Laravel. El cual contiene la siguiente estructura.

Criterios de Aceptación:
Entorno listo para poder hacer la programación y las pruebas necesarias para la
elaboración del sistema.
Código: HU-87 Construcción de la
seguridad
Usuario: Desarrolladores Nombre:
Fecha de 8/06/2019 Iteración
1
escritura: asignada:
Prioridad Alta
StackHolder: Analista
Carlos Moto
Prioridad de Alta asignado:
desarrollo:
Descripción:
Como desarrollador deseo implementar como seguridad la Clase Crypt que Laravel
proporciona, haciendo uso del método cifrado AES o Estándar de Cifrado Avanzado
que se basa en varias sustituciones, permutaciones y transformaciones lineales,
cada una ejecutada en bloques de datos de 16 bytes. Dicho algoritmo será
implementado para las claves de los perfiles de usuario.

Criterios de Aceptación:
Generar claves las cuales posean mayor seguridad a través del cifrado avanzado.

2. Sprint Planning

Objetivos del primer


sprint
 Preparar el entorno de trabajo que será necesario para el desarrollo de todo
el sistema informático.
 Definir los efectos visuales dinámicos, así como los efectos visuales básicos
que se estarán ocupando a lo largo del desarrollo del sistema informático.
 Especificar los elementos de la plantilla base que se tomarán en cuenta para
la realización de los diseños de todas las pantallas restantes.
 Realizar la pantalla funcional de inicio de sesión, en la cual se identificarán
roles de Administrador, Experto, Asistente y Socio.
 Implementar la construcción de la seguridad, referente al inicio de sesión y las
claves de usuario.

Cálculo de la duración del sprint


Código de
Tiempo Estimado
Historia de Nombre de historia de usuario
(Horas de trabajo)
Usuario
HU70 Iniciar sesión (Administrador). 5
HU71 Inicio sesión (Experto). 5
HU72 Inicio de sesión (Asistente). 5
HU82 Definición de efectos visuales dinámicos. 3
Elección y ubicación en pantalla de elementos en
HU83 13
plantillas base.
HU84 Especificaciones de elementos de plantillas base. 5
HU85 Selección de efectos visuales básicos. 3
HU86 Preparación de entorno de trabajo. 3
HU87 Construcción de la seguridad. 8

Definición de horas para Sprint 1:

Duración total del Sprint 1 en horas: 60 horas (más holgura de 2 horas por una
semana).

Cantidad de horas laborable por día: 4 horas.

Cantidad de días laborables por semana: 6 días.

Duración del Sprint 1:


Total de días para finalizar:

60 / 4 = 15 días

Total de semanas para finalizar:

15 / 6= 2.5 semanas ≈ 3 semanas.

Que trabajo se realizará para realizar el sprint (Pila del sprint)


Las historias de usuario a realizar en el Sprint 1 son las de código:

HU70, HU71, HU72, HU82, HU83, HU84, HU85, HU86, HU87, HU88
3. Plantillas del Scrum Diario
Fecha: 16-06-2019 Hora: 9:30pm
Asistentes: Carlos Moto Lugar/Tipo: Llamada vía Skype
Doris Aquino
Paola Aguilar
Irene Delgado
Burndow Chart

¿Qué hemos logrado?


 Se inicio la preparación de entorno de trabajo, ya se estableció la configuración de la
Base de Datos.
 Se agregaron la mayoría de HU al proyecto en meuscrum
Impedimentos:
 No se tenía muy claro la delimitación de las HU sobre la dispocisión de elementos en
las interfaces y la selección de sus estilos básicos.
¿Qué haremos?
 Iniciar la documentación de la HU sobre el diseño de interfaces
Próxima Reunión: 18-06-2019
Fecha: 18-06-2019 Hora: 9:95pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Doris Aquino
 Irene Delgado
 Carlos Moto
 William
Rosales
Burndow Chart

¿Qué hemos logrado?


 Avances en las HU sobre estándares de diseño de interfaces de usuario.
 Redacción de algunas HU que se agregaron, sobre configuraciones generales del
Sistema.
Impedimentos:
 Dudas sobre el uso de estándares ya existentes en la página del sitio de ASPAE.
 El producto Owner aún no ha proporcionado las facilidades para utilizar un
servidor privado para el repositorio del proyecto.
¿Qué haremos?
 Buscar un servicio de repositorio Git gratuito para trabajar temporalmente.
 Terminar la documentación sobre HU relacionadas con los estándares para la
interfaz de usuario.

Próxima Reunión: 20-06-2019


Fecha: 22-06-2019 Hora: 10:00pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Doris Aquino
 Irene Delgado
 Carlos Moto
 William
Rosales
Burndow Chart
 Se nos olvidó guardar el Burdow Chart
¿Qué hemos logrado?
 Se evaluó GitHub como repositorio temporal, pero tiene límite en la cantidad de
usuarios.
 Se terminó la documentación de HU sobre elección y ubicación en pantalla de
elementos en plantillas base y efectos visuales básicos.
Impedimentos:
 Por el imprevisto de la falta de repositorio, debido a que no se nos proporcionó el
que la Asociación quería que usáramos, no se ha avanzado en algunas tareas de las
HU asignadas.
¿Qué haremos?
 Documentación sobre la HU sobre el login del sistema.
 Investigación sobre la HU de encriptación de contraseñas para el módulo de
seguridad.
Próxima Reunión: 25-06-2019
Fecha: 25/06/2019 Hora: 9:30pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Carlos Moto
 Doris Aquino
 Irene Delgado
Burndow Chart

¿Qué hemos logrado?


 Se inició la definición de estándares de efectos dinámicos.
 Documentación inicial para HU sobre los inicios de sesión, DCU y definición de CU.
 Avances en la investigación para la función de encriptación en el módulo de
seguridad.
 Se evaluaron diferentes servidos de repositorios Git y se escogió GitLab para
repositorio temporal.
Impedimentos:

¿Qué haremos?
 Archivos general para agregar los archivos css y los scripts generales a todas
nuestras pantallas.
 Creación de plantilla base implementando lo definido en la documentación de las HU
sobre la disposición de los elementos en pantalla y la definición de efectos visuales
básicos.
 Plantillas de prueba local para una función del módulo de seguridad. (encriptación)
 Diagramas de actividad y para el diseño de la BD correspondientes a las HU sobre
login del sistema.
 Creación del repositorio temporal en gitlab y su respectiva configuración.
Próxima Reunión: 27/06/2019
Fecha: 27-06-2019 Hora: 9:30pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Doris Aquino
 Irene Delgado
 Carlos Moto
 William
Rosales
Burndow Chart

¿Qué hemos logrado?


 Se inicio la creación de una plantilla de prueba para la implementación de seguridad
en el inicio de sesión.
 Archivos con los estilos css y scripts para las vistas.
 Se inició la documentación de las HU sobre los inicios de sesión.
 Configuración y configuración de repositorio temporal en gitlab.
Impedimentos:
 La implementación del diseño de la seguridad para el login no se puede realizar
hasta que inicie la implementación de la HU sobre los inicios de sesión.
¿Qué haremos?
 Terminar el diseño de la BD con la funcionalidad del Inicio de sesión e iniciar
implementación.
 Terminar la plantilla base que se usará en la implementación durante todo el
proyecto.
Próxima Reunión: 29-06-2019
Fecha: 29-06-2019 Hora: 9:30pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Doris Aquino
 Irene Delgado
 Carlos Moto
 William
Rosales
Burndow Chart

¿Qué hemos logrado?


 Se inició la implementación de las HU sobre los inicios de sesión.
 Se terminó la plantilla base que se usará en todo el proyecto.
Impedimentos:
 Aún sigue pendiente la tarea sobre la preparación del repositorio en VPS de la
asociación.
¿Qué haremos?
 Terminar la implementación de la seguridad en los inicios de sesión.
 Implementación de la seguridad en los inicios de sesión.
Próxima Reunión:
Fecha: 01-06-2019 Hora: 9:30pm
Asistentes:  Paola Aguilar Lugar/Tipo: Llamada vía Skype
 Doris Aquino
 Irene Delgado
 Carlos Moto
 William
Rosales
Burndow Chart

¿Qué hemos logrado?


 Se terminó la implementación de los inicios de sesión y la seguridad para las
constraseñas.
Impedimentos:
 A pesar de que esta es la última fecha de la programación de el primer sprint, aún
quedó una tarea sin completar debido a que la Asociación aún no nos proporcionó la
VPS para trabajar con un repositorio privado.
¿Qué haremos?
 Reunión con el StakHolder para entregar el avance de la primera iteración y para
que nos proporcione las credenciales o el dinero para la contratación de un servidor
privado el día 03 de julio de 2019.
Próxima Reunión:
4. Burndown chart
5. Sprint Review

Carta de Aceptación del usuario del primer sprint.


A continuación, se presenta el comprobante de la Carta de Aceptación del Sprint 1
sellado y firmado por el representante, presidente y vicepresidente de la asociación,
así como también el Scrum Manager. El contenido completo de la carta se encuentra
en el anexo 5.
Análisis y diseño (Modelado de requerimientos)
i. Casos de Uso
Diagrama de Contexto de Caso de Uso

Sistema informático para el control de membresías y otras actividades


Módulo de seguridad
Descripción del caso de uso ‘Modulo de seguridad’

Nombre: Módulo de seguridad Código: CU001


Actores: Administrador HU que cumple: PB70
Asistente PB71
Experto PB72
Socio
Pre-condición: El usuario debe estar registrado previamente dentro del
sistema
Post-condición: Pantalla de inicio
Curso Normal Curso Alternativo
1.El actor inicia el sistema
2. El sistema muestra formulario de inicio
de sesión.
3. El actor ingresa sus credenciales de
inicio de sesión y presiona el botón iniciar
sesión.
3. El sistema procesa los datos de inicio 3a: Los datos ingresados son
de sesión incorrectos
1. El sistema muestra un mensaje de
error de datos.
3. Regresar al paso 2.
4. El sistema muestra la pantalla de inicio
del sistema.
5. El actor finaliza el caso de uso.
Diagrama de Actividad – CU001
Diagrama de Secuencia – CU001
ii. BPMN de los procesos realizados

iii. Modelo Arquitectónico


Arquitectura en Capas: Modelo-Vista-Controlador

El MVC o Modelo-Vista-Controlador es un patrón de arquitectura de software que,


utilizando 3 componentes (Vistas, Models y Controladores) separa la lógica de la
aplicación de la lógica de la vista en una aplicación. Es una arquitectura importante
puesto que se utiliza tanto en componentes gráficos básicos hasta sistemas
empresariales; la mayoría de los frameworks modernos utilizan MVC (o alguna
adaptación del MVC) para la arquitectura, entre ellos podemos mencionar a Ruby on
Rails, Django, AngularJS y muchos otros más.
El framework que escogimos (laravel) para llevar a cabo el desarrollo del proyecto
tiene excelentes facilidades para separar las 3 capas de este modelo, a pesar de no
estar diseñado directamente para este. Sin embargo, añade una cuarta para facilitar
el acceso a vistas y llamada a controladores: las Rutas.

Modelo

Se encarga de los datos, generalmente (pero no obligatoriamente) consultando la


base de datos. Actualizaciones, consultas, búsquedas, etc. todo eso va aquí, en el
modelo.

Vistas

Son la representación visual de los datos, todo lo que tenga que ver con la interfaz
gráfica va aquí. Ni el modelo ni el controlador se preocupan de cómo se verán los
datos, esa responsabilidad es únicamente de la vista.

Controlador

Se encarga de controlar, recibe las órdenes del usuario y se encarga de solicitar los
datos al modelo y de comunicárselos a la vista.

Representación del Sistema: Diagrama arquitectónico de contexto.


iv. Diseño de interfaces de entrada y salida
Diseño de interfaces de entrada y salida – Módulo de seguridad

INTERFAZ DE ENTRADA

Imagen 1: Pantalla de inicio de sesión


Imagen 2: Pantalla de registro de usuario

DETALLE DE INTERFAZ DE ENTRADA

Caso de Uso: CU001


1. Se cargan los diferentes tipos de roles que podrán ser
Detalle de pantalla:
registrados por el administrador
Los registros solo se podrán realizar por el administrador, luego
Observaciones:
de haber iniciado sesión.
INTERFAZ DE SALIDA

Pantalla después de haber iniciado sesión como administrador

DETALLE DE INTERFAZ DE SALIDA

Caso de Uso: CU001


1. Solo aparecerá al estar logeado como administrador. Al
presionar el botón se dirigirá a la pantalla de registro de usuario.
Detalle de pantalla:
2. Sale de la sesión, y redirige a la pantalla de inicio de sesión
para realizar un nuevo login.
Observaciones: -
v. Diseño de base de datos integrando el primer sprint:

Modelo Conceptual

Diseño Físico
Diccionario de Datos
rols

Contiene los tipos de usuario que se pueden registrar en el sistema, se utiliza para
llenar la lista desplegable del formulario para nuevo resitro de usuario.

Nombre lógico del Nombre físico Tipo PK Nulo


atributo del atributo
nombre (PK) nombre VARCHAR(50) PK NOT NULL
descripcion descripcion VARCHAR(200) NOT NULL
No es referenciado ni posee referencias.

users

Contiene los usuarios registrados para acceder al sistema.

Nombre lógico del Nombre físico Tipo PK Nulo


atributo del atributo
id (PK) id (PK) bigint(20) unsigned PK NOT NULL
name name varchar(191) NOT NULL
tipo_usuario tipo_usuario varchar(191) NOT NULL
email email varchar(191) NOT NULL
email_verified_at email_verified_at timestamp
password password text
remember_token remember_token varchar(100)
created_at created_at timestamp
updated_at updated_at timestamp
No es referenciado ni posee referencias.
6. Sprint Retrospective
¿Qué salió bien en esta ¿Qué no salió bien en esta ¿Qué mejoraremos en la
iteración? iteración? próxima iteración?
g
El equipo se empeñó bastante No tomamos mucho en Una correcta
en seguir correctamente los cuenta los roles establecidos implementación de los
pasos de la documentación en el inicio del sprint, por lo roles que establezcamos.
solicitada para una buena que al momento de hacer Aumentar la
implementación del SCRUM, pruebas y/o revisiones, se comunicación con nuestro
como por ejemplo una buena hacía con quien estuviera Stackholder y el
creación y revisión de las disponible, haciendo que al ProductOwner.
Historias de usuario. final la carga de trabajo no se
Las reuniones de sprint diario, distribuyera muy bien.
se hacían con una frecuencia Además del imprevisto de la
aceptable, a pesar de no ser a falta del servidor para
diario, la comunicación entre mantener un repositorio
los miembros del equipo de totalmente privado, nos falto
desarrollo fue exitosa. ser más precavidos para
reaccionar a tiempo.
Conclusión

Mediante la implementación de la metodología SCRUM, la distribución de tareas


para la creación del sistema informático de control de membresías para ASPAE,
pudo ser optimizada permitiendo un desarrollo eficaz y constante, junto con una
comunicación fluida para los miembros del equipo y una retroalimentación constante
entre los miembros del equipo y los encargados de la implementación del sistema en
ASPAE, siendo clave en la finalización a tiempo de los desarrollos previstos la
utilización de dicha metodología.

La metodología SCRUM permitió, a través de la correcta utilización, realizar la toma


de información más precisa mediante Historias de usuario las cuales son clave
fundamental para la realización e implementación acertada del desarrollo del
sistema informático.
Bibliografía

 Hernández, U. (2018). codigofacilito.com. Obtenido de


https://codigofacilito.com/articulos/mvc-model-view-controller-explicado.
[Accesado: 5 Julio 2019].

 Mysql.conclase.net. (2019). Curso de MySQL - Diseño I, Modelo entidad-


relación E-R. Disponible en:
http://mysql.conclase.net/curso/?cap=002a#ER_DIAGENTIDAD [Accesado: 1
Julio 2019].

 Mark Otto, a. (2019). Navbar. Obtenido de:


https://getbootstrap.com/docs/4.0/components/navbar/ [Accesado: 4 Julio,
2019].

 Otwell, T. (2019). Blade Templates - Laravel - The PHP Framework For Web
Artisans. Obtenido de: https://laravel.com/docs/5.8/blade#template-inheritance
[Accesado: 1 Julio, 2019].

 (2019). Obtenido de: https://www.lucidchart.com/pages/es/tutorial-diagrama-


de-actividades-uml [Accesado: 1 Julio, 2019].
Anexos

Anexo 1: Desarrollo de historia de usuario HU82


Código:
HU82

Nombre: Definición de Efectos Visuales Dinámicos

Haciendo uso de la Libreria JQuery UI y ToolTips de Boostrap

jQuery UI es un conjunto de interacciones de interfaz de usuario, efectos, widgets y


temas creados sobre la biblioteca de jQuery JavaScript.

Modal

Use el complemento modal de JavaScript de Bootstrap para agregar cuadros de


diálogo a su sitio para las notificaciones de los usuarios o el contenido
completamente personalizado.
Código a emplear

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>

<!-- Button trigger modal -->


<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
Demostracion de modal
</button>

<!-- Modal -->


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Aqui va el contenido del modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W
1" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
DatePicker

El selector de fecha está vinculado a un campo de entrada de formulario estándar.


Se concentra en la entrada (hacer clic o usar la tecla de tabulación) para abrir un
calendario interactivo en una pequeña superposición. Elija una fecha, haga clic en
otra parte de la página o presione la tecla Esc para cerrar. Si se elige una fecha, la
retroalimentación se muestra como el valor de la entrada.
Código a emplear

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>

<p>Elegir Fecha: <input type="text" id="datepicker"></p>

</body>
</html>
Progressbar (Barra de progreso)

Mostrar el estado de un proceso determinado o indeterminado.


Código a Emplear

<!doctype html>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Progressbar - Download Dialog</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var progressTimer,
progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" ),
dialogButtons = [{
text: "Cancelar Descarga",
click: closeDownload
}],
dialog = $( "#dialog" ).dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
buttons: dialogButtons,
open: function() {
progressTimer = setTimeout( progress, 2000 );
},
beforeClose: function() {
downloadButton.button( "option", {
disabled: false,
label: "Comenzar Descarga"
});
}
}),
downloadButton = $( "#downloadButton" )
.button()
.on( "click", function() {
$( this ).button( "option", {
disabled: true,
label: "Descargando..."
});
dialog.dialog( "open" );
});
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Proceso Actual: " + progressbar.progressbar( "value" ) +
"%" );
},
complete: function() {
progressLabel.text( "Completado!" );
dialog.dialog( "option", "buttons", [{
text: "Cerrar",
click: closeDownload
}]);
$(".ui-dialog button").last().trigger( "focus" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
if ( val <= 99 ) {
progressTimer = setTimeout( progress, 50 );
}
}

function closeDownload() {
clearTimeout( progressTimer );
dialog
.dialog( "option", "buttons", dialogButtons )
.dialog( "close" );
progressbar.progressbar( "value", false );
progressLabel
.text( "Comenzando Descarga..." );
downloadButton.trigger( "focus" );
}
} );
</script>
<style> #progressbar { margin-top: 20px;
}
.progress-label { font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.ui-dialog-titlebar-close { display: none;
}
</style>
</head>
<body>
<div id="dialog" title="Descargar Archivo">
<div class="progress-label">Comenzando Descarga...</div>
<div id="progressbar"></div>
</div>
<button id="downloadButton">Comenzar Descarga</button>
</body>
</html>
Resizable (Redimensionable)

Cambia el tamaño de un elemento usando el mouse

Habilitar cualquier elemento DOM para ser redimensionable. Con el cursor, agarre el
borde derecho o inferior y arrastre hasta el ancho o la altura deseada

Código a Emplear

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>

<div id="resizable" class="ui-widget-content">


<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

Selectable (Seleccionable)

Usa el ratón para seleccionar elementos, individualmente o en grupo

Habilitar un elemento DOM (o grupo de elementos) para ser seleccionable. Dibuja un


cuadro con el cursor para seleccionar elementos. Mantenga presionada la tecla Ctrl
para realizar múltiples selecciones no adyacentes.
Código a emplear

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#selectable" ).selectable();
} );
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>

Checkboxradio

Código a Emplear

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Radio Group</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "input" ).checkboxradio();
$( "fieldset" ).controlgroup();
} );
</script>
</head>
<body>
<div class="widget">

<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
</div>

</body>
</html>

Alertas

Las alertas están disponibles para cualquier longitud de texto, así como un botón
opcional para descartar. Para un estilo adecuado, use una de las ocho clases
contextuales requeridas (por ejemplo, .alert-success).
Código a emplear

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Tipos de alertas</h1>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W
1" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Botones

Bootstrap incluye varios estilos de botones predefinidos, cada uno con su propio

propósito semántico

Código a Emplear

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<metaname="viewport"content="width=device-width,initial- scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstr
ap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Tipos de botones</h1>
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Exito</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-info">Informacion</button>
<button type="button" class="btn btn-light">Ligero</button>
<button type="button" class="btn btn-dark">Oscuro</button>

<button type="button" class="btn btn-link">Enlace</button>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/pop
per.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap
.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Anexo 2: Desarrollo de historias de usuario 83 y 84
Código:
HU83

Nombre: Elección y ubicación de elementos de plantilla base:


Código: HU84

Nombre: Especificaciones de elementos de plantilla base

1- Barra de navegación:
La barra de navegación estará presente en todas las páginas web del sistema
excepto en aquellas pantallas cuyo objetivo sea mostrar el informe generado en
formato PDF. Dicha barra de navegación debe de estar compuesta por:

- Un botón para desplegar un menú donde pueda acceder al resto de


funcionalidades del sistema (ver ítem número 5 para ampliar).
- Un área de opciones en donde podrá visualizar las opciones de configuración
e interacción del socio (ver ítem número 4 para ampliar).
- Logo de la Asociación Salvadoreña de Profesionales en Administración de
empresas contiguo al botón para desplegar el menú para el acceso al resto
de módulos.
La barra de navegación debe ser responsive, su ancho máximo debe ser la
totalidad del ancho de la página web y su alto debe de ser 70px fijos.

2- Área de trabajo:
El área de trabajo debe estar ubicada en el centro de la página web. En esta área
se presentarán los listados tabulados en algunos módulos y algunos formularios
para captura de datos.

3- Footer:
Contendrá el nombre de la institución que apoyaron el desarrollo del sistema
informático, el logo de la institución en la parte izquierda y los teléfonos de
contacto de la institución en la parte derecha como contenido mínimo. Estará
ubicado en la parte central inferior de la página web, debe poseer como ancho la
totalidad de la página web y como alto debe tener 85px fijos.

4- Área de opciones:
Esta área contendrá diversos botones que le permitirán al usuario acceder a las
notificaciones, a la mensajería del sistema y a las opciones del usuario que ha
iniciado sesión, como:

- ver su perfil.
- consultar las mensualidades.
- Configurar datos de la cuenta.
- Cerrar sesión.
Para las opciones de mensajería y notificaciones debe mostrar los mensajes y
las notificaciones más recientes respectivamente además de un botón para “ver
más” donde podrá consultar todos los elementos mensajes o notificaciones
según sea el caso.

5- Menú desplegable:
Presenta un menú desplegable en la parte izquierda del sitio web pudiendo
mostrar u ocultar presionando un botón posicionado en la parte izquierda de la
barra de navegación del sistema. El contenido que presentara dicho menú debe
ser el siguiente:

- La foto del usuario asociado a la cuenta.


- Un apartado de reconocimientos obtenidos por el socio, en caso contrario no
se mostrará ninguno.
- El acceso a los diferentes módulos que comprende el sistema: Control de
socios, membresías, eventos, control de egresos, control de ingresos,
además de un módulo de configuración.
Es importante aclarar que el acceso a módulos o funcionalidades especificas no
será igual para cada usuario y estará determinado por el rol que desempeña:
Administrador, Experto y Asistente.

Anexo 3: Desarrollo de historia de usuario HU85


Código:
HU85

Nombre: Selección de efectos visuales básicos

Estándares de representación de contenido

Estándar Tipográfico
Elemento Estándar
Navbar Títulos Texto Normal
Tipo de letra: “Open sans”, “Open sans”, “Open sans”,
Familia: Familia: Hevelticva, Familia:
Hevelticva, Arial, Arial, sans-serif Hevelticva, Arial,
sans-serif sans-serif
Tamaño: Style: Nomal Style: Nomal Style: Nomal
Weight:600 Weight: 400 Weight: 400
Size: 56px Size: 40px Size: 16px
Line Height: 64px Line Height: 48px Line Height: 24px
Color: #03a9f4 #3c424f #6b7c93
Background- No No No
Color:

Estándar de Formularios Web

 Campos de texto normal

 Campos para fechas

 Áreas de texto
 Botones de opción

 Listas

 Casilla de verificación

 Campo de archivo o de imagen

Elemento Sub-Elemento Dscripción


Botón: Crear, Color de fondo Color: HTML: #192889
Actualizar y filtrar RGB: (25, 40, 137)
Color de letra: Color: HTML: #FFFFFF
RGB: (255, 255, 255)
Botón: Eliminar Color de fondo: Color: HTML: #BD1515
RGB: (189, 21, 21)
Color de letra: Color: HTML: #FFFFFF
RGB: (255, 255, 255)
Anexo 4: Desarrollo de historia de usuario HU87
Código: HU87

Nombre: Construcción de la

seguridad Descripción del módulo:

Para la construcción del módulo de seguridad se hizo uso de la clase Crypt que Laravel nos
proporciona, la clase hace uso del método de cifrado AES o Estándar de Cifrado Avanzado
que se basa en varias sustituciones, permutaciones y transformaciones lineales, cada una
ejecutada en bloques de datos de 16 bytes. Esas operaciones se repiten varias veces,
llamadas "rondas". Durante cada ronda, una clave circular única se calcula a partir de la
clave de cifrado y se incorpora en los cálculos. Basado en la estructura de bloques de AES,
el cambio de un solo bit, ya sea en la clave, o en el bloque de texto sin cifrado, da como
resultado un bloque de texto cifrado completamente diferente (una ventaja clara sobre los
cifrados de flujo tradicionales).

Cabe destacar que Laravel utiliza OpenSSL para proporcionar el cifrado AES-256 y AES-
128, es decir no proporciona el cifrado AES-192. La diferencia entre AES-128, AES-192 y
AES-256 finalmente es la longitud de la clave: 128, 192 o 256 bits, todas las mejoras
drásticas en comparación con la clave de 56 bits de DES.

Implementación:

Para la implementación del método de cifrado dentro del módulo de seguridad se ejecuta tres
veces el método estático encrypt con la finalidad de evitar posibles amenazas al identificar
fácilmente le método de cifrado, de la misma manera para obtener el valor original se ejecuta
el método estático decrypt igual número de veces que el método de cifrado.

Sección de código: método de cifrado

public static function encriptar ($input) {

$output = Crypt::encrypt(Crypt::encrypt(Crypt::encrypt($input)));

return $output;

}
Este método recibe un valor como parámetro, ejecuta tres veces el método encrypt para
cifrar el valor y retorna como salida el valor cifrado.

Sección de código: método de descifrado

public static function desencriptar ($input) {

$output = Crypt::decrypt(Crypt::decrypt(Crypt::decrypt($input)));

return $output;

Este método recibe como parámetro el valor encriptado por medio del método estático de la
clase Crypt de Laravel “encrypt”, ejecuta 3 veces el método de descifrado al igual que el
método de cifrado y retorna el valor original sin encriptar.
Anexo 5: Carta de Aceptación
INGENIERÍA DE SISTEMAS INFORMÁTICOS
FACULTAD DE INGENIERÍA Y ARQUITECTURA
UNIVERSIDAD DE EL SALVADOR

Sistema informático para el control de membresías


Asociación Salvadoreña de Profesionales en Administración de Empresas (ASPAE)

Carta de Aceptación del Primer Sprint


PRESIDENTE ASPAE

NOMBRE: Lic. CARLOS MAURICIO DURAN CORREO: duransal48@gmail.com TELEFONO:


MORALES

Firma Fecha:
VICE-PRESIDENTE ASPAE 2019-2021

NOMBRE: Lic. CARLOS BALMORE SANTOS CORREO: balmoresm@hotmail.com TELEFONO:

Firma Fecha:

ASISTENTE DE LA PRESIDENCIA

NOMBRE: JOSÉ CALIXTO CHAVARRIA CORREO: jcalix738@gmail.com TELEFONO: 7861-8761


LANDAVERDE

Firma Fecha:
Representante del Equipo de Trabajo #11 De la Asignatura de Diseño de Sistemas I

NOMBRE: Br. JENNIFER IRENE CORREO: hij3200@gmail.com TELEFONO: 7709-7714


DELGADO HERNANDEZ

Firma Fecha:
Producto a Entregar
En la primera entrega del sistema informático para el control de membresías llamada "Sprint 1",
se han seleccionado y realizado 4 requisitos los cuales hemos llamado "Historias de Usuario" de
la lista de requisitos, la descripción de cada Historia de Usuario realizada es la siguiente.
Se han realizado los Roles para el inicio de Sesión
1. Inicio de Sesión (Administrador)
Se podrá acceder a todos los módulos y no tendrá restricciones (Actualmente solo se ha creado
inicio de sesión del rol).
2. Inicio de Sesión (Experto)
Podrá tener acceso a todos los módulos, sin embargo, no poseerá algunos permisos (Actualmente
solo se ha creado inicio de sesión del rol).
3. Inicio de Sesión (Asistente)
Se podrá tener acceso a edición y creación en los módulos, sin embargo, no podrá eliminar
información (Actualmente solo se ha creado inicio de sesión del rol).
4. Construcción de la seguridad
Los diferentes roles podrán acceder por medio de contraseñas, las cuales están diseñadas para
tener una buena seguridad en caso que algún atacante pueda intentar acceder al sistema. Se ha
implementado un método de cifrado para poder tener una buena encriptación de claves.

Observaciones del Usuario


Observación 1: El fondo de pantalla del inicio de sesión preferiblemente que sea color blanco y
no con la imagen de fondo que se presentó

Funcionalidades Faltantes
A continuación, se detallan las funciones faltantes en cada uno de los módulos para finalizar el
proyecto.
A. Perfil de Socio
Desde su perfil en línea, el socio podrá:
● Ver los próximos eventos (como publicidad o cartelera inmediatamente después
de entrar a su perfil)
● Recibir notificaciones sobre los procesos que está llevando a cabo
● Ver e Imprimir su estado de cuentas de la membresía
● Ver e Imprimir los datos de su perfil (obtenidos de su CV)

71
● Solicitar un currículum certificado por la asociación
● Ver su plus (donaciones, postulaciones, logros, aportes)
B. Control de Socios
En este apartado del sistema se realizarán los registros de:
● Los datos correspondientes a los campos del formulario ya existente que los socios
llenan manualmente para solicitar su afiliación a ASPAE.
● Los documentos escaneados que comprueben los datos del formulario y de su Hoja de
Vida, además de esta última, también escaneada.
● Si el socio es:
○ Activo: Paga su membresía, está solvente (puede convertirse en honorario)
○ Capítulo Estudiantil (se puede convertir en socio activo cuando le dan su carta
de egresado al estudiante)
○ Honorarios: que debido al tiempo dentro de la asociación y su aporte a la
misma, ya no pagan membresía
○ Fundadores: los más antiguos (pueden ser honorarios o activos)
○ Inactivos (no solventes) o fallecidos (pero que su información se necesita)
● Los logros, eventos y postulaciones en las que el asociado ha participado
El sistema también realizará la generación automática de usuario y contraseña para que
los nuevos socios accedan a su perfil en el sistema.
Otros alcances:
● Que se pueda adjuntar carta de renuncia a la asociación
● Que exista un campo en el que se pueda agregar Socios de la JD deben ser
diferenciados de algún modo (además del campo de tipo de socio)
● Que se pueda imprimir el currículum certificado del socio para presentarlo a JD
en caso de que el mismo socio lo haya solicitado.
C. Control de Ingresos
En este módulo se deberá tener la capacidad de realizar las funciones que se detallan a
continuación:
1. Membresías:
o Registro de las remesas que los socios hacen para cancelar sus

72
cuotas (fecha, cod remesa, id socio, etc).
o Informes de pagos de socios o grupos de socios, por mes, año, por socio, por
periodo, etc. (ej. informes de todos los socios fundadores o informes de todos socios
fundadores y honorarios).
o Alertar si un socio se retrasa en sus pagos de 6 meses o más y
señalar los meses que debe.
o Permitir alterar la cuota (campos para registrar el por qué
se alteró).
2. Donaciones:
o Registro de Donaciones.
o Informes sobre donaciones.
3. Eventos:
o Registro de ingresos por eventos.
o Informes sobre ingresos por eventos.
4. Otros Ingresos
o Registro de otros ingresos.
o Informes sobre otros Ingresos.

D. Control de Egresos
El control de los egresos de la asociación debe de contemplar las siguientes funciones:
● Consulta de egresos por cheque o caja.
● Registrar el id del respectivo comprobante.
● Registrar los detalles del egreso (facilitar información al contador).
● Generación de Informes.
● Impresión de Informes (estados de ingresos versus egresos).
E. Control de Eventos
En este módulo se logrará realizar lo siguiente:
● Registrar evento con detalles del lugar, fecha, hora, motivo/propósito, descripción,

73
duración, costo, etc.
● Generar invitación estándar luego de ingresar los detalles del evento.
● Modificar publicidad automática de los eventos en el perfil de usuario de los socios
● Informe sobre el desarrollo del evento (resultados del evento)
● Informe de liquidación de evento

Formas de Verificar la entrega


La entrega se realizó en la Asociación Salvadoreña de Profesionales en Administración de
Empresas al Asistente Administrativo José Calixto Chavarría Landaverde. Las imágenes hacen
referencia en el momento en que el Asistente observa los avances.

Imagen 1: Momento en que se ingreso al sistema para mostrarlo

74
Imagen 2: Momento en que se le explica al cliente los avances realizados (Sprint 1)

Imagen 3: Momento al terminar de mostrar los avances

75

También podría gustarte