METODOLOGIA PARA LA CONSTRUCCION PEQUEÑAS PAGINAS WEB SPA (Single Page Ap

Paso
1.0
1.1
1.2
1.3

2.0
2.1
2.2
2.3

3.0
3.1
3.2
3.3

4.0
4.1
4.2
4.3

5.0
5.1
5.2
5.3
5.4
5.5

5.6

5.7

5.8

5.9
5.10

5.11

6.0
 6.1
6.2
6.3

6.4

7.0
7.1

7.2
7.3

7.4

7.5
7.6

7.7
7.8

7.9
7.10

7.11

7.0
7.1

7.2
7.3

8.0
8.1
8.2

8.3

9.0
 9.1

9.2
9.2.1

9.2.2

9.2.3

9.2.4

9.2.5

9.2.6
9.2.7

9.3
9.3.1

9.3.2

9.3.3
9.3.4

9.4
9.4.1

9.4.2
9.4.3
 METODOLOGIA PARA LA CONSTRUCCION PEQUEÑAS PAGINAS WEB SPA (Single Page Aplication)
Descripcion
Realizar listado de Historias de Usuario, metodologia SCRUM ( RequerimientoS funcionales)
Revisar que todas las historias cumplan las necesidades del cliente
Asignar orden de ejecucion en la columna Prioridad
Ordenar por la columna Prioridad

Realizar el diagrama de navegacion

para cada página (pantalla) asignar un numero de orden
Agregar flechas de navegacion (desplazamiento entre paginas)
Construya una matriz de navegacion, con columnas para pagina actual, siguiente, enterior

Realizar el maquetado de las paginas

para cada pagina a visualizar, realizar el diseño de su estructura
Agregar areas de datos y botones de navegacion
Considerar paleta de colores, proporciones, fuentes, areas comunes

Realizar Diagramas de Estado (opcional). Ayuda a comprender el modelo dinamico del sistema
Para la entidad o entidades principales, Identificar los posibles estados
Identificar los cambios entre estados y las condiciones del cambio
Graficar utilizando UML

Registrar los eventos y acciones a realizar

El primer evento (usualmente) es "onload". Registralo en la columna "eventos"
En las columnas "Página": en la primera columna, registrar el identificador de cada pagina
En la segunda columna, una breve descripcion del objetivo de cada pagina
Revisar que correspondan con los puntos definidos en 2.0 y 3.0
Para cada pagina, en la columna "eventos", registra los eventos asociados (botones, selects, etc, segun lo definido en 3.0). Usar
color de fondo en estas celdas.

Despues de cada evento, registrar la secuencia de acciones a realizar, para cada caso, una accion por linea, insertar las filas
necesarias.

En los casos que se requiera, describir las validaciones a realizar sobre los datos de entrada, de acuerdo con las politicas de la
empresa, en la columna "Validacion de Entrada"

En la columna "Error" registre el texto de los mensajes de error, en la misma fila de la columna anterior
En la columna "Vista", las acciones (metodos) de carga de paginas (pantallas) o de visualizacion de datos

En la columna "Controlador", registrar en orden, las las acciones (metodos) requeridas para enviar y/o solicitar datos al Model
En la columna "Estructuras de Datos", definir las variables, arreglos y/u objetos necesarios para contener los datos requeridos
las columnas anteriores

Definir el patron Observador

Copiar el contenido de las columnas "Evento" y "Acción" y pegar en la hoja "Observer".
Ordenar las filas alfabeticamente y eliminar las filas repetidas
Revisar nombres similares que signifiquen la misma accion y unificar, eliminando repetidos. NOTA: cualquier cambio de nombr
actualicelo en el lugar correspondiente en la hoja "Eventos"

Esta lista depurada es el insumo para codificar un modulo con el patron Observer, asignando las funciones manejadoras de eve

Definir el modelo estatico del sistema (Diagrama de Clases UML)

Copiar el contenido de las columnas "Validacion de Entradas", "Error", "vista", "CONTROLADOR" y "Ëstructuras de datos", y pe
en la hoja "Clases"
Ordenar cada columna alfabeticamente y eliminar filas repetidas
Revisar nombres similares que signifiquen la misma accion y unificar, eliminando repetidos. NOTA: cualquier cambio de nombr
actualicelo en el lugar correspondiente en la hoja "Eventos"

Posiblemente, en la columna "error" pueda identificar una lista de mensajes de error para definir en una <<enumeracion>>
Esta lista depurada es el insumo para codificar un modulo con una interfaz de mensajes.
En la columna "Vista", evisar nombres similares que signifiquen la misma accion y unificar, eliminando repetidos. NOTA: cualqu
cambio de nombre, actualicelo en el lugar correspondiente en la hoja "Eventos"
Esta lista depurada es el insumo para codificar un modulo de interfaz de Usuario.

En la columna "Controlador", revisar nombres similares que signifiquen la misma accion y unificar, eliminando repetidos. NOTA
cualquier cambio de nombre, actualicelo en el lugar correspondiente en la hoja "Eventos"
Estas listas depuradas (7.1.3, 7.1.4, 7.2.3) son el insumo para identificar las propiedades y metodos de las clases.

A partir de los productos anteriores, proceda a construir el diagrama de clases, con sus relaciones. Tambien puede identificar la
enumeraciones necesarias (posiblemente de las listas de mensajes) y las interfases (de la columna Vista).

Cualquier cambio de nombre realizado en el diagrama de Clases, actualicelo en el lugar correspondiente en la hoja "Eventos"

Definir el modelo de Datos (Diagrama Relacional)

Con el diagrama de Clases como insumo, defina cuales propiedades de todas las clases deben ser "persistentes" y construya el
diagrama relacional de la Base de Datos
Defina cuales de las enumeraciones definidas en 6.4, se mantendran como tablas de la BD.
Revise su diseño para mantener al menos la 3FN (en la gran mayoria de casos). NOTA: cualquier cambio de nombres, actualice
el lugar correspondiente en las hojas " Clases" y "Eventos"

Crear la Base de Datos

Con el Diagrama Relacional como insumo, construya la Base de Datos utilizando el RDBMS de su preferencia
Regresando a la hoja "Eventos", incluya las consultas a realizar (utlizando SQL) en la columna "MODELO / Consultas BD". Usted
puede ingresar algunos datos en las tablas para verificar la funcionalidad de cada consulta.
Opcionalmente y una vez verificadas las consultas, puede crear procedimientos almacenados en la BD, para simplificar la capa
Modelo (patron MVC) y aumentar la seguridad del sistema.

CODIFICACION DE LOS MODULOS DE SOFTWARE

NOTA: Construya una estructura de carpetas que le permita mantener organizados sus archivos. Siga un patron como el MVC
codigo, no olvide realizar una documentacion exhaustiva (incluya docBlocks al inicio de cada metodo).

Vista
index.html: Codifique el archivo, incluyendo todos los elementos comunes a la presentacion (revise la hoja "Mockups"). Incluy
necesarias.
Cree un archivo CSS e incluya los selectores y propiedades necesarios para visualizar las paginas segun el diseño de mockups. S
librerias como Bootstrap, etc.

Utilizando el archivo index.html, inserte las etiquetas necesarias (y sus corrrespondientes propiedades en css) para visualizar c
inicial. Si es necesario, incluya valores ficticios donde se requiera, hasta tener un ejemplo de la visualizacion requerida (guiarse
desarrollados).
Una vez satisfecho con la presentacion de la pagina (incluyendo tamaños, posiciones, colores y fuentes para todos los element
contenido agregado y peguelo por dentro de una etiquetas <template>.

Agregue un identificador que refleje el nombre de la pagina asignado en 2.1. Ejemplo: <template id = "P0"><div id = "P0"> <co
></div></template> Nota: Observar que se incluye in <div> con el mismo 'id' de la plantilla.

Confirme que el contenedor del archivo index.html donde construyo el primer formulario, quede nuevamente vacio.
Para cada una de las paginas, repita los pasos 9.1.3 a 9.1.6

Navegacion y Eventos - Patron Observer

A partir de la hoja "Observer" de esta plantilla (6.4),realice un metodo constructor de eventos, donde asocie los controladores
(metodos/funciones asociados a cada uno de los eventos identificados).
Opcionalmente, puede definir los manejadores de eventos en el HTML de las plantillas.
Construya una clase de navegacion, usando la matriz construida en 2.3. Incluya llamados a los metodos de carga de pagina
navegacion, clonando los <template> segun el caso e insertando el contenido HTML en el contenedor corresp

Codifique los diferentes metodos manejadores de los eventos, pero aun no incluya codigo en su interior
En este momento, la APP permitira la navegacion entre todas las paginas, como se ha definido en 2.0 y 3.0

Codificacion del Controlador y Modelo

Con el diagrama de clases como guia, construya las clases y en el programa principal los objetos necesarios (instanciando las cl
agregar las funcionalidades necesarias y pasar del modelo no funcional al aplicativo final
Siguiendo el patron de diseño MVC, mantenga separados los metodos asociados a la consulta/actualizacin de la BD.
Recuerde definir un plan de pruebas, con los casos correspondientes para verificar la correcta funcionalidad de la APP.
)
Hoja

Historias

Navegacion

MockUps
Se recomienda
imprimir los
formatos

Estados
Solo para casos
que lo requieran

Eventos

Observer
Observer

Clases

BD_DR

BD_DR
MVC o similar. Al escribir el

cluya las etiquetas

ps. Si es necesario, incluya

zar correctamente la pagina

arse por los mockups

mentos), copie todo el

> <contenido html

ores de eventos

gina segun el diagrama de

respondiente

as clases ya creadas) para

 HISTORIAS DE USUARIO (requerimientos)

Caso Estudio: Implementación de una Página WEB promocional para las empresas del sector de infraestruct

Prioridad COMO (As) Deseo (I Want to)

1 Gerente consultar los reportes de ventas
Gerente consultar los reportes de produccion
Gerente consultar los reportes de compras
Gerente consultar las sujerencias de los clientes
2 Almacenista conocer el inventario de materia prima
Almacenista tener inventario de producto final
Almacenista Conocer el inventario de equipos
Almacenista Registrar comprar de materia prima
Almacenista Registrar consumo de materia prima
3 Vendedor Registrar ventas
Vededor Registrar Sugerencias
4 Panadero conocer la produccion del dia
Panadero conocer la receta
Panadero conocer recursos existentes
Panadero conocer implementos existentes
Panadero Registrar consumo de materia prima
ORIAS DE USUARIO (requerimientos)

promocional para las empresas del sector de infraestructura de la ciudad Ibague

Para (So that)

conocer las ventas realizadas
conocer las produccion efectuada
conocer las compras hechas
conocer las carencias de los productos
para saber los recursoscde materia prima faltantes
para tener una valoracion detallada de los productos
para estar pendiente de las fallas que pueden llegar a tener los equipos
para llevar la contabilidad de las compras
Para saber la materia prima faltante
para llevar el control de ventas
para mejorar la calidad del pruducto
para conocer el producto y la cantidad a hacer
para comprender como es la realizacion de un determinado producto
para tener certeza a la hora de elaborar un nuevo producto.
para laborar de manera correcta
para llevar control de la materia prima utilizada.
vivir es estar enfermo por mucho tiempo
mucho tiempo
 APP: xxxxx - NAVEGACION ENTRE PAGINAS
P0 P10 P11

ingresar
LOGIN
atrás

P20 P11 P22

P31

P30 P32 P33 P34

atrás atrás atrás

Selecciona opción
P40 P41 P42 P43

salir
atrás
 MATRIZ DE NAVEGACION
Actual Salir / atrás Siguiente

P35

P44 P44
P0 P10

P20
P11

P21
P22
 APP: XXXXX - DIAGRAMA DE ESTADOS DE XXXX

Estado 2 XXX XXX

condicion 0

Estado Condicion,
1 etc.

XXX

XXX

XXX
XX

XXX

XXX
EVENTOS Y SECUENCIAS DE ACCIONES A REALIZAR

Pantalla Evento

MODULO
OPERADOR
OnLoad (cargarLogin)

OnClick(botonRegistrar)
P.00

Onclick(reporteVentas)

Onclick(reporteProduccion)
P.01 Gerente
Onclick(reporteCompras)

Onclick(sugerenciaCliente)

Onclick(reporteVentas)

P.02

P.03

Onclick(mostarGrafico)
 P.04 Onclick(reporteProduccion)

P.05
Onclick(reporteCompras)

Onclick(sugerenciaCliente)
P.06

Onclick(inventarioMP)

P.07 Onclick(inventarioPT)
Almacenista
Onclick(inventarioEquipos)

Onclick(registrarCompraMP)

Onclick(registrarConsumoMP)

Onclick(inventarioMP)

P.08
 P.08

Onclick(inventarioPT)

P.09

P.10

Onclick(inventarioEquipos)

Onclick(registrarCompraMP)

P.11

Onclick(registrarConsumoMP)
P.12
P.11

P.12

P.13

P.14

P.15
P.16

P.17

P.18
 Validacion de Entradas VISTA
(revision de datos de entrada para que (cualquier accion relacionada con interfaz
cumplan politicas de la empresa) grafica)

Desplegar P.00

userName >10 caracteres alfa

password <=15 caracteres alfaNum.

Desplegar P.01

Cargar P.01
Desplegar_Tabla P.02

Cargar P.03
Cargar P.01
Desplegar_tabla P.04

Cargar P.01
Desplegar_tabla P.05

Cargar P.01
Desplegar P.06

Desplegar P.07

Cargar P.07
Desplegar_Tabla P.08
Cargar P.07
Desplegar_Tabla P.09

Cargar P.07
Desplegar_Tabla P.010

Cargar P.07
Desplegar_Tabla P.11

Cargar P.07
Desplegar_Tabla P.12
 Error
(Mensajes si no cumplen Validaciones)

"Debe insertar datos validos"

"Usuario o contraseña incorrecto"
"Usuario o contraseña incorrecto"

"No fue posible mostar el modulo, porfavor reinicia la pagina "

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"

"El grafico no puede ser mostrado, porfavor reinicia la pagina"

"El reporte no pueder ser mostrado, porfavor recargar la
pagina"

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"

"La sugerencia no fue guardada, porfavor intentelo de nuevo"

"No fue posible mostar el modulo, porfavor reinicia la pagina "

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"
"El reporte no pueder ser mostrado, porfavor recargar la
pagina"

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"

"El reporte no pueder ser mostrado, porfavor recargar la

pagina"
 METODOS
(Secuencia de pasos requeridos, uno por fila)

SI (userName.length >10)
SINO, SI (passaword.lenght<=15)
SINO, consultar en la BD
SINO, mostrar mensaje

Menu ("Ver perfil de empleados", "Cerrar sesión")

Menu ("Ver perfil de empleados", "Cerrar sesión")

Boton(ver_Grafico_P.03)
Datepicker(Elegir_Fecha_Reporte)

function(){"produsctos"+"cantidad*"valorUnidad""

Menu ("Ver perfil de empleados", "Cerrar sesión")

Datepicker(Elegir_Fecha_Reporte)
cargar SELECT (tipo_de_producto)
cargar SELECT (tipo_de_graficos)
 function ganancia()
{"produsctos"+"cantidad*"valorUnidad""
print(ganancia)}

Menu ("Ver perfil de empleados", "Cerrar sesión")

Datepicker(Elegir_Fecha_Reporte)

Menu ("Ver perfil de empleados", "Cerrar sesión")

Datepicker(Elegir_Fecha_Reporte)

Menu ("Ver perfil de empleados", "Cerrar sesión")

Datepicker(Elegir_Fecha_Reporte)

Menu: ("Cerrar sesión")

Menu: ("Cerrar sesión")

function cantidadFaltante(){if {cantidad es < a la

necesaria
print(falta_dato)}else{print(completo_dato)}};
Menu: ("Cerrar sesión")

Menu: ("Cerrar sesión")

Menu: ("Cerrar sesión")

Menu: ("Cerrar sesión")

 Estructuras de Datos (Objetos)
necesarios para guardar datos leidos en formularios y/o Acceso a la BD
consultas a BD

usuario:(userName,password,rol) consultar: (userName)

Consultar:
(producto,cantidad,fecha_registro_ven
tas)

Consultar(productos,
cantidad,fecha_regitro_ventas)
Consultar
(productos,cantidad,fecha_registro_pr
oduccion)

Consultar
(productos,cantidad,fecha_registro_Co
mpras)

Consultar (Sugerencias)

ConsultarMP(insumos,cantidadExistent
e, MPbase)
APP XXXXX - DIAGRAMA DE CLASES

Validacion de Entradas ERROR

"Debe ingresar las fechas"

VISTA
 CONTROLADOR

Abre ventana del sistema para cargar archivo

 Estructuras de Datos

administrador: {documento, nombres, apellidos, celular, correoE}

 Validacion de Entradas
(revision de datos de entrada para que
cumplan politicas de la empresa)
username > 5 caracteres alfa
password > 5 caracteres alfaNum.

verificar que existen datos Administrador

verificar que existen datos Administrador

 Error
(Mensajes si no cumplen Validaciones)

"Debe ingresar un nombre de usuario"

"Debe ingresar una clave MAYOR A 5 CARACTERES"
"Usuario o contraseña incorrecto"
"Los datos deben estar completos"
"No se puede modificar, El documento no existe"
"Los datos deben estar completos"
"El documento ya existe"
 MODU
Accion Parametros valor 'opc'

Lee tabla auxiliar

TiposAutorizacion "leerTiposAutorizacion"
 MODULO:
Valores devueltos Consulta SQL

{idTipoAutorizacion,
descripTipoAutorizacion}
Observaciones