Proyecto

Instituto Tecnológico de Orizaba

Presenta:

Castillo Barrientos Ana Karina.

Rodríguez Ortega Samuel

Materia:

Ingeniería de Software.

Catedrático:

Concepción Nava Arteaga.

Trabajo:

Proyecto de la Aplicación Web para la Tienda “Otaku”.

Índice Caso de Estudio / Narrativa...........................................................................................................3

Nombre del proyecto...................................................................................................................3

Objetivo General..........................................................................................................................3

Problemática o necesidad a resolver........................................................................................3

Propuesta de solución................................................................................................................3

Modelado BPMN.............................................................................................................................7

Justificación......................................................................................................................................8

Lista de Cotejo.................................................................................................................................9

Lista de requisitos funcionales por actor....................................................................................10

Lista de restricciones o reglas de negocio.................................................................................11

Requisitos de Almacenamiento...................................................................................................11

Requisitos No funcionales............................................................................................................12

Requisitos de interfaz...................................................................................................................12

Análisis de Requerimientos..........................................................................................................13

Diagrama de Casos de Uso.....................................................................................................13

Descripciones de casos de uso...............................................................................................14

Diagrama de Clases..................................................................................................................21

Diagrama de Secuencias.........................................................................................................21

Arquitectura de desarrollo............................................................................................................35

La arquitectura software. El modelo 4+1................................................................................35

Diagrama con detalle de niveles y capas...............................................................................36

Dependencias entre las capas de la arquitectura de N capas................................................36

Distribución de los componentes de cada capa:.......................................................................37

Presentación:.............................................................................................................................37

Lógica de negocio:....................................................................................................................38

Elementos comunes:.................................................................................................................39

Cliente.........................................................................................................................................40

Datos:..........................................................................................................................................40

Procesos (Diagrama BPMN):...................................................................................................41

Desarrollo...................................................................................................................................42

Física...........................................................................................................................................46

Seguridad...................................................................................................................................46

Certificados.............................................................................................................................47

Cifrado de datos....................................................................................................................49

Algoritmo MD5...........................................................................................................................50

Diseño de prototipos de interfaces..............................................................................................52

Interfaces del cliente.................................................................................................................52

Interfaces del administrador.....................................................................................................57

Fase 1: Modelo de Requerimientos

Caso de Estudio / Narrativa

Nombre del proyecto. Aplicación web para la tienda “OTAKU”.

Objetivo General.Analizar, diseñar e implementar una aplicación web para la tienda “Otaku”.

Problemática o necesidad a resolverEl administrador de la tienda “Otaku” no cuenta con una aplicación web, lo cual genera que no aumenten sus clientes, sus ventas e impide que pueda ampliar su mercado a otros horizontes, perdiendo así la posibilidad de tener más ganancias por la venta de sus productos.

Propuesta de soluciónDiseñar una aplicación web bajo los lenguajes de HTML, PHP y CSS además de PostgreSQL como gestor de base de datos y XAMPP como servidor, para los diagramas UML que nos ayudaran a definir el escenario se utilizara Visual Paradigm. Además se desea que la interfaz sea amigable con el usuario. En su pantalla principal se mostrara el mensaje: “Bienvenido”, una lista de los productos que están disponibles en la tienda con sus respectivas descripciones, junto con las opciones de iniciar sesión para realizar compras, iniciar sesión administrador y si quiere hacer una compra tiene que registrarse primero, cada una estará conformada de la siguiente manera:

En la página de Iniciar sesión para realizar compras se va a desplegar un formulario el cual va a pedir el usuario y contraseña, posteriormente la lista de los productos.

En la página de iniciar sesión administrador compras se va a desplegar un formulario el cual va a pedir el usuario y contraseña, posteriormente la lista de los productos.

En la página de registrarse va a mostrar un formulario donde el usuario ingresará sus datos para que posteriormente pueda realizar compras.

Una vez que haya iniciado sesión el usuario, se mostrará una página la cual consistirá de la siguiente manera:

Mostrará el nombre del usuario que inicio sesión y las siguientes opciones:

Página principal

Sucursal

Contacto

Compras del día

Cerrar sesión

Posteriormente muestra la lista de los productos con sus descripciones correspondientes y su clave, para que el usuario pueda realizar una compra copiará la clave del producto en el formulario que estará en la parte superior de la lista y presionará el botón de enviar, este lo mandará a una página para verificar que sea el producto que escogió, por lo siguiente el cliente pondrá la cantidad que desea comprar del producto; si tiene la cantidad disponible le mostrará un mensaje que su compra a sido exitosa, en caso contrario lo mandará a una página la cual mostrará un mensaje donde menciona: “Lo sentimos no contamos con esa cantidad de producto que requiere, quiere comprar menos producto o desea comprar otro producto” sobre un formulario donde contiene un campo donde pide el Id del producto y el botón de enviar y en la parte superior la lista de los productos.

En la opción sucursal mostrará la dirección de la tienda

En la opción contacto mostrará el teléfono de la tienda y el correo electrónico

En la opción de compras del día mostrará los artículos que ha comprado el usuario el día, se va a desplegar una lista con la descripción de los artículos y la respectiva cantidad que compró.

En la opción de cerrar sesión, cuando el usuario de click en el opción se cerrará la sesión de este y desplegará la pagina principal.

Una vez que haya iniciado sesión el administrador, se mostrará una página la cual consistirá de la siguiente manera:

Página principal

Lista de usuarios

Eliminar usuario

Lista de productos

Insertar producto

Abastecer algún producto

Ventas

Cerrar Sesión

En la parte inferior mostrará el inventario de la tienda

En la opción de Lista de usuarios mostrará los datos generales de todos los usuarios que están en la base de datos.

En la opción de Eliminar usuario mostrará la lista de usuarios y en la parte superior un campo donde el administrador copiará el usuario a eliminar y al dar click en el botón de enviar se borrará automáticamente el usuario de la base de datos.

En la opción Lista de productos mostrará una tabla de los productos y sus datos generales.

En la opción de Insertar producto mostrará un formulario con los siguientes campos:

Id del producto

Nombre del producto

Tipo

Descripción

Precio

Existencia

Localización de la imagen

En la parte inferior del formulario los botones de Enviar y Restablecer

En la opción de Abastecer algún producto de mostrará un formulario con los campos:

Id del producto

Cantidad a abastecer

Seguido del botón de Enviar; en la parte superior del formulario se mostrará una tabla de los productos, el administrador tiene que copiar el Id del producto en el campo y

posteriormente la cantidad que desea abastecer el producto, dando click en el botón de Enviar y automáticamente se actualizará la tabla.

En la opción de Ventas el administrador podrá ver una lista completa de las ventas que ha tenido, pero si el administrador desea ver las ventas del día, da click en el botón SI y este le mostrará la página de las ventas del día.

En la opción de cerrar sesión, cuando el administrador de click en la opción se cerrará la sesión de este y desplegará la página principal.

Modelado BPMN

JustificaciónDebido a que la aplicación a desarrollar es orientada para la web “tienda virtual: Otaku” se propone utilizar la Metodología UWE, ya que es la adecuada para el desarrollo de la aplicación, presentando detalladamente el proceso de aplicaciones con una definición exhaustiva del proceso de diseño.

Esta metodología consta de las siguientes etapas para el desarrollo de la aplicación web:

Análisis de requisitos: El análisis de requisitos se expresa a través de la especificación de los casos de uso del sistema.

Modelo de casos de uso

Modelo de workflows

Diseño conceptual: En esta etapa se representa el dominio del problema con un diagrama de clases de UML. Los casos de uso sirven como entrada para elaborar tarjetas Clase-Responsabilidad-Colaborador (CRC), o para la identificación de verbos y sustantivos, entre otras técnicas, que permiten determinar las clases, métodos y atributos.

Diseño navegacional: Tiene dos etapas: la definición del espacio de navegación y el diseño de las estructuras de navegación.

La definición del espacio de navegación se trata de una vista del diagrama conceptual, se define mediante el diagrama de clases UML.

El diseño de las estructuras de navegación establece las estructuras de acceso que permiten visitar los objetos del espacio navegacional. Están constituidas por menús, índices, visitas guiadas, y formularios. Todos ellos son clases con estereotipos.

Diseño de la presentación: El modelo de presentación en UWE está muy relacionado con los elementos de las interfaces definidas en HTML. Estos elementos también están definidos como estereotipos de UML. Los elementos del modelo de presentación son: anclas, entradas de texto, imágenes, audio y botones. Cada clase del modelo navegacional tiene asignada una clase del modelo de presentación.

UWE especifica con detalle como debe ser cada etapa y las herramientas que se deben implementar.

Las ventajas de UWE es que se puede utilizar UML, la cual ayuda a que sea más fácil de implementar esta metodología.

Lista de Cotejo

Fases Entregables RevisiónModelo de Requerimientos Narrativa

BPMNJustificación del proceso de desarrollo

Lista de CotejoLista de requisitos:

Funcionales Reglas de negocio Almacenamiento No funcionales

Diagrama de Casos de Uso de la aplicación y sus relacionesDescripciones de Casos de Uso

Modelo de Contenido Diagrama de Clases

Diagramas de SecuenciaIntroducción de la arquitectura 4 + 1 vistas Diagrama con detalle de niveles y capas según aplicación a desarrollar. (nivel general)

Modelo de Navegación Dependencias entre las capas de la arquitectura de N capas:

Cliente Presentación Negocios Datos

Distribución de los componentes de cada capa con sus respectivos diagramas:

PresentaciónModelo de Presentación Distribución de los

componentes de cada capa con sus respectivos diagramas: Lógica de negocio

Elementos Comunes Modelo de Proceso Distribución de los

componentes de cada capa con sus respectivos diagramas:

Cliente Datos Procesos Desarrollo Física Seguridad

Diseño de prototipos de InterfacesCodificación de las Interfaces en HTML, PHP, etc. Usando Base de Datos (anexo 1)

Plan de pruebas

Reporte de Pruebas

Manual de usuario (anexo 2)

Lista de requisitos funcionales por actor.

Requisitos funcionalesUsuario Administrador Base de datosRegistrarse Iniciar sesión Registra

transaccionesIniciar sesión Eliminar usuarioRealizar compras Insertar producto

Abastecer productoVer ventas del díaVer lista de productos

Cerrar sesión Cerrar sesiónConsultar sucursal Consulta

usuarioConsultar contactoConsultar compras del día

Lista de restricciones o reglas de negocio. El usuario deberá estar registrado para poder iniciar sesión. El usuario deberá iniciar sesión para poder realizar compras. El usuario solo podrá comparar un producto siempre y cuando la cantidad

esté disponible.

Requisitos de Almacenamiento Nombre Tabla

Descripción del requisito

Tipo PrioridadObligatorio Deseable

UsuarioUsuario Almacenamiento XPassword Almacenamiento XEmail Almacenamiento XNombre Almacenamiento XApellido Paterno

Almacenamiento X

Apellido Materno

Almacenamiento X

Fecha de Nacimiento

Almacenamiento X

Sexo Almacenamiento XEstado Civil Almacenamiento XDomicilio Almacenamiento XNumero Externo Almacenamiento XNumero Interno Almacenamiento XColonia Almacenamiento XCódigo Postal Almacenamiento XEstado Almacenamiento XTeléfono Almacenamiento XCuenta de Banco

Almacenamiento X

ProductosID Almacenamiento XNombre Almacenamiento XTipo Almacenamiento XDescripción Almacenamiento XPrecio Almacenamiento XExistencia Almacenamiento XLocalización de la imagen

Almacenamiento X

VentasID Almacenamiento XUsuario Almacenamiento XCantidad Vendida

Almacenamiento X

Dinero de la Venta

Almacenamiento X

ID de la Venta Almacenamiento XFecha Almacenamiento X

Requisitos No funcionalesDescripción del requisito

Tipo PrioridadObligatorio Deseable

Lenguaje HTML No funcional X

Lenguaje PHP No funcional XLenguaje CSS No funcional XInterfaz amigable No funcional XGestor de BDD PostgreSQL

No funcional X

Servidor XAMPP No funcional XVisual Paradigm No funcional X

Requisitos de interfazLa aplicación web que no estará conectada a ninguna otra aplicación externa por lo tanto no existen requisitos de interfaz.

Análisis de Requerimientos

Diagrama de Casos de Uso

Descripciones de casos de usoNombre del Caso de Uso

Iniciar Sesión/CU-1

Actor(es) Usuario

Descripción Esta opción desplegara la pantalla relacionada al inicio de sesión del usuario

Precondición El usuario debe haberse registrado con anticipación para poder iniciar sesión

Flujo Principal Acción actor Acción sistema1) Selecciona la opción de

“Iniciar Sesión” 2) Muestra la pagina de

“Inicia Sesión”

3) Llena los campos con los respectivos datos y da click en el botón de Enviar

4) Valida la información, si es correcta muestra la página principal de “Compras”

Flujo Alternativo 1 1) Si ingresa datos incorrectos

2) Muestra un mensaje de error

Postcondición Se valida en la base de datos los datos del usuario

Comentarios

Nombre del Caso de Uso

Registrarse /CU-2

Actor(es) Usuario

Descripción Permite que el usuario pueda registrarse

Precondición

Flujo Principal Acción actor Acción sistema1) Selecciona la función de

“Registrarse”2) Muestra la pagina de

“Registrarse”

3) Llena la información correspondiente en los campos y da click en el botón de Enviar

4) Guarda la información del usuario en la base de datos, una vez realizado esto muestra la página principal de “Compras”

Flujo Alternativo 1

Postcondición Se guarda la información en la base de datos

Comentarios


Iniciar Sesión Administrador/CU-3

Actor(es) Administrador

Descripción Esta opción desplegara la pantalla relacionada al inicio de

sesión del administrador Precondición


“Iniciar Sesión Administrador”

2) Muestra la página de “Inicia Sesión Administrador”

3) Llena los campos con los respectivos datos

4) Valida la información, si es correcta muestra la pagina principal del “Administrador”

Flujo Alternativo 1 1) Si ingresa datos incorrectos

2) Muestra un mensaje de error

Postcondición Se valida en la base de datos los datos del administrador

Comentarios


Realizar Compras /CU-4

Actor(es) Usuario

Descripción Esta opción desplegara la pantalla relacionada a las compras de productos

Precondición El usuario debió haber iniciado sesión para poder realizar compras

Flujo Principal Acción actor Acción sistema1) Visualiza los productos

en existencia, si desea comprar un producto copia el ID en el campo y da click en el botón de “Enviar”

2) Muestra la página de “Verificar Producto” con la información del producto seleccionado

3) Visualiza el producto, su información y la existencia de este, si es correcto el producto se dirige a la sección de “Indicar Cantidad” que está en la parte inferior de la página, escribe la cantidad en el campo y da click en el botón de “Comprar”

4) Muestra la página de “Compra Realizada”, con un mensaje de la se realizó con éxito compra

Flujo Alternativo 1 1) Si el producto es incorrecto da click en la opción de “Pagina Principal”

2) Muestra la página principal de “Compras”.

Flujo Alternativo 2 1) Escribe una cantidad más grande de lo que hay en existencia y da click en el

2) Muestra un mensaje de error en la página principal de “Compras”

botón de EnviarFlujo Alternativo 3 1) Escribe una cantidad

cuando no hay existencia y da click en el botón de Enviar

2) Muestra un mensaje de error en la página principal de “Compras”

Postcondición Valida el ID de producto, se actualiza la base de datos

Comentarios


Consultar Sucursal /CU-5

Actor(es) Usuario

Descripción Esta opción mostrará la ubicación de la tienda

Precondición


“Sucursal”2) Muestra la página con la

información de la ubicación de la tienda

3) Visualizará la información solicitada

Flujo Alternativo 1

Postcondición

Comentarios


Consultar Contacto /CU-6

Actor(es) Usuario

Descripción Esta opción mostrará el contacto de la tienda

Precondición


“Contacto”2) Muestra la página con la

información del contacto de la tienda


Flujo Alternativo 1

Postcondición

Comentarios


Compras del día /CU-7

Actor(es) Usuario

Descripción Esta opción mostrará información de las compras realizadas en el día

Precondición


“Compras del día”2) Muestra la página con la

información de las compras realizadas en el día


Flujo Alternativo 1

Postcondición

Comentarios


Cerrar Sesión /CU-8

Actor(es) Usuario/Administrador

Descripción Esta opción finalizará la sesión del usuario o el administrador dentro de la aplicación

Precondición


“Cerrar Sesión”2) Mata la sesión del usuario

o el administrador y lo regresa a la página principal de inicio de sesión

3) Visualizará la pagina de “Iniciar Sesión”

Flujo Alternativo 1

Postcondición

Comentarios


Lista de Usuarios/CU-9


Descripción Esta opción mostrará la lista de usuarios con sus información respectiva registrados en la base de datos

Precondición


“Lista de Usuarios”2) Muestra la página de la

lista de usuarios registrados en la base de datos

3) Visualizará la pagina de “Lista de Usuarios”

Flujo Alternativo 1

Postcondición

Comentarios


Eliminar Usuario/CU-10


Descripción Permite eliminar productos

Precondición


“Eliminar Usuario”2) Muestra la página de la

lista de usuarios registrados en la base de datos con un formulario para copiar el ID de usuario

3) Ingresa la ID del usuario al cual va eliminar la información y da click al botón “Eliminar”

4) Muestra la página de la lista de usuarios registrados en la base de datos con un formulario para copiar el ID de usuario

Flujo Alternativo 1

Postcondición Se actualiza la base de datos

Comentarios


Lista de Productos/CU-11


Descripción Esta opción mostrará la lista de productos con sus información respectiva registrados en la base de datos

Precondición

Flujo Principal Acción actor Acción sistema

4) Selecciona la opción de “Lista de Productos”

5) Muestra la página de la lista de productos registrados en la base de datos

6) Visualizará la pagina de “Lista de Productos”

Flujo Alternativo 1

Postcondición

Comentarios


Insertar Producto /CU-12


Descripción Permite que administrador pueda registrar un producto

Precondición


“Insertar Producto”2) Muestra la pagina de

“Insertar Producto”

3) Llena la información correspondiente en los campos y da click en el botón de Enviar

4) Almacena la información del producto en la base de datos

Flujo Alternativo 1

Postcondición Se guarda la información en la base de datos

Comentarios


Abastecer Producto /CU-13


Descripción Permite que administrador pueda abastece un producto registrado en la base de datos

Precondición


“Abastecer Producto”2) Muestra la página de la

lista de productos registrados en la base de datos con un formulario para copiar el ID del producto y escribir la cantidad

3) Copia el ID del producto y escribe la cantidad de producto a abastecer en los campos y da click en el botón de Enviar

4) Valida la nueva información que se va a registrar en la base de datos

Flujo Alternativo 1

Postcondición Se actualiza la base de datos

Comentarios

Fase 2: Modelo de Contenido

Diagrama de Clases

Diagrama de SecuenciasIniciar Sesión

Registrarse

Iniciar Sesión administrador

Realizar Compras

Consultar Sucursal

Consultar Contacto

Compras del día

Cerrar Sesión

Lista de Usuarios

Eliminar Usuario

Lista de Productos

Insertar Producto

Abastecer Producto

Arquitectura de desarrollo

La arquitectura software. El modelo 4+1La arquitectura software trata el diseño e implementación de la estructura de alto nivel del software. Es el resultado de ensamblar un cierto número de elementos arquitectónicos para satisfacer la funcionalidad y ejecución de los requisitos del sistema; así como los requisitos no funcionales del mismo: fiabilidad, escalabilidad, portabilidad, disponibilidad, etc.

Es muy complejo capturar la arquitectura software en un sólo modelo (o diagrama). Para manejar esta complejidad se representan diferentes aspectos y características de la arquitectura en múltiples vistas. Una vista es “una presentación de un modelo, la cual es una descripción completa de un sistema desde una particular perspectiva” (Kruchten, 1995). El modelo más aceptado a la hora de establecer las vistas necesarias para describir una arquitectura software es el modelo 4+1 (Kruchten, 1995).

Este modelo define 4 vistas principales:

Vista Lógica (Logical View), modelo de objetos, clases, entidad – relación, etc.

Vista de Proceso (Process View), modelo de concurrencia y sincronización.

Vista de Desarrollo (Development View), organización estática del software en su entorno de desarrollo (librerías, componentes, .ear, .jar, etc.).

Vista Física (Physical View), modelo de correspondencia software - hardware (aspectos de distribución en máquinas, por ejemplo)

Y una vista más, la "+1", que se muestra y traza en cada una de las anteriores y que está formada por las necesidades funcionales que cubre el sistema, y que en ocasiones identificamos como vista de "casos de uso". De donde deducimos que según este modelo, la arquitectura es en realidad evolucionada desde escenarios.

El modelo 4+1 aplica la ecuación de Perry y Wolf (1992) de forma independiente para cada vista, por ejemplo, cada vista puede definir un conjunto de elementos para su uso (componentes, contenedores y conectores).

Cada vista es descrita usando su particular y más adecuada notación (por ejemplo, existen diagramas UML que se adaptan más a una vista que otra). Para cada vista los arquitectos pueden escoger cierto esquilo arquitectónico (patrón arquitectónico), permitiendo la coexistencia de múltiples estilos en un sistema.

Y por último, también comentar que el modelo de vistas “4+1” es “genérico”: otras notaciones y herramientas a parte de UML pueden usarse, y cualquier método de diseño, especialmente para las descomposiciones lógicas y de proceso.

Nivel 1 Nivel 2

Una vez obtenido los requisitos esenciales para el desarrollo de la aplicación web, a continuación vamos a estructurar la arquitectura de la aplicación, para ello se basará en el modelo de 4 + 1 vistas, ya que es el adecuado para el proyecto que se está desarrollando.

Diagrama con detalle de niveles y capas

En el proyecto solo se va simular los dos niveles de la aplicación en una sola computadora, revisando que funciona de manera optima la aplicación.

Fase 3: Modelo de Navegación

La presentación considera todas las interfaces que van a interactuar directamente con el cliente. En nuestro caso tenemos una página de inicio que va a contener tres presentaciones para el cliente (Iniciar sesión, Iniciar sesión administrador y Registrarse)

Dependencias entre las capas de la arquitectura de N capas

Distribución de los componentes de cada capa:

Presentación:

Fase 4: Modelo de Presentación

Lógica de negocio:

La capa de lógica de negocio tiene todas las reglas necesarias para atender a lasPeticiones de los usuarios. En el diagrama anterior se observan los componentes que se incluyen en esta capa y las dependencias que existen. Se puede observar con más detalle la capa de lógica de negocio, las clases que lo conforman y la relación que existe entre ellas.

Elementos comunes:

En este diagrama se pueden observar los componentes de la capa de elementos comunes. Esta capa está destinada a hospedar todos los objetos que van a ser utilizados

Para el cliente lo único que necesitamos es un navegador Web para poder acceder a nuestra aplicación. Recordemos que se necesita de componentes externos(Plug-ins, librerías) para tener una interfaz más rica en recursos multimedia.

por cualquier capa dentro de nuestra aplicación. Dentro de los elementos comunes dividimos en Usuarios y Productos de acuerdo al tipo de clase que se quiera manejar.Dentro de usuarios manejamos objetos como Administrador y Cliente de acuerdo a las características que se requieren para cada Objeto.

Fase 5: Modelo de Proceso

ClienteLa capa cliente contiene todos los componentes interactúan con el cliente.En esta capa se debe de contar con un navegador Web y recursos (plug-ins) quePermita al usuario tener acceso a la aplicación.

Datos:

Los detalles de la capa de datos se muestran en el diagrama anterior. Dentro de los componentes tenemos un manejador de datos para la administración de la información obtenida de la capa de persistencia. Dentro de las propiedades tenemos un conector para establecer la comunicación con la capa de persistencia.Un datasource para especificar las fuentes de datos a las que vamos a tener.

Procesos (Diagrama BPMN):

DesarrolloLa vista de desarrollo de la aplicación Web esta descrita en la siguiente imagen. Esta vista muestra todos los componentes de la aplicación y la relación que existen entre ellos. Esta vista permite tener un panorama global sobre los componentes que se van a desarrollar.

En la Imagen A se muestra los componentes que pertenecen al nivel del cliente.Por otro lado, en la Imagen B se muestra el servidor Web, el servidor de certificados digitales y de componentes.En la Imagen C se observa al servidor de aplicaciones y de persistencia.Por último, en la Imagen D se muestra la estructura del servidor multimedia.

Imagen A) Vista de desarrollo de la aplicación Web

Imagen B) Vista de desarrollo de la aplicación Web

Imagen C) Vista de desarrollo de la aplicación Web

Imagen D) Vista de desarrollo de la aplicación Web

FísicaLa vista Física de de la aplicación se muestra en la siguiente Imagen. En esta vista se tiene la distribución de los componentes mostrados en la vista de desarrollo a componentes físicos tales como servidores y computadoras personales. Dentro de esta vista se puede observar en donde van a estar cada componente. El objetivo principal de esta vista es brindar una guía al momento de desplegar la aplicación dentro de la infraestructura.

SeguridadLa vista de seguridad muestra los métodos, técnicas y componentes necesarias para brindar seguridad a nuestra aplicación Web. En la siguiente imagen se muestra el nivel de seguridad para cada una de los usuarios que necesitan tener acceso al sistema. Los niveles de seguridad que se manejan en manejará la aplicación son:

Login mediante el uso de un nombre de usuario y una contraseña. La autenticación mediante certificados digitales. Cifrado de los datos.

El nivel de seguridad en una aplicación Web depende de la sensibilidad de la información de cada usuario. El esquema se ha optado por cifrar la información de todos los usuarios.

CertificadosLos certificados son la contraparte electrónica de la cédula de identidad, el pasaporte o la licencia. Una persona o empresa puede presentar su certificado electrónicamente para probar su identidad o su derecho al acceso a cierta información o servicios en línea. Los certificados vinculan una identidad a un par de claves electrónicas que pueden ser usadas para encriptar y firmar información digital. Un certificado hace posible el verificar la afirmación hecha por alguien de que tiene derecho a usar una clave determinada, lo que ayuda a prevenir el uso de claves “inventadas” o modificadas para suplantar a otras personas. Si se usa conjuntamente con encriptamiento provee una solución de seguridad bastante completa.Un certificado es emitido por una Autoridad Certificadora y es firmado con la clave privada de esa autoridad. Un certificado normalmente contiene los siguientes datos:

1. La clave pública del propietario del certificado.2. La fecha de expiración de la clave pública.3. El nombre de la autoridad certificadora que lo expidió.4. Número serial del certificado.5. La firma digital de la autoridad certificadora.

SSL/TLS hace un uso extensivo de certificados de clave pública para autentificar ambos, cliente y servidor en cada transacción. Usa certificados X.509 y Diffie-Hellman. Soporta los siguientes tipos de certificados:

1. Certificados de clave publica RSA, con claves publicas de longitud arbitraria.

2. Certificados de clave publica RSA limitados a 512 bits.3. Certificados RSA solo para firma.4. Certificados DSS.5. Certificados Diffie-Hellman.

SSLSSL es el acrónimo de Secure Socket Layer, un protocolo de propósito general para enviar información encriptada sobre la Internet. SSL fue popularizado inicialmente por Netscape y la idea era estimular las ventas de las compañías que usaran el web server de Netscape.SSL es una capa que existe entre el protocolo TCP/IP y la capa de aplicación. Mientras que la comunicación de TCP/IP es en “claro” SSL añade numerosas características a esa aplicación, incluyendo:

1. Autenticación del servidor usando firmas digitales.2. Autenticación del cliente usando firmas digitales.3. Confidencialidad de los datos a través del uso de encriptamiento.4. Integridad de los datos a través del uso de códigos de autenticación de mensajes.

TLSEn la capa más baja del protocolo TLS se encuentra la capa de registro TLS. La capa de registro TLS envía bloques de datos, llamados registros, entre el cliente y el servidor. Cada bloque puede contener hasta 16.383 bytes de datos. Los bordes o límites del mensaje del cliente no son preservados en la capa de registro. Si el mensaje es muy largo puede ser dividido en varios registros. Cada registro TLS contiene la siguiente información:1. Tipo de Contenido.2. Numero de versión del protocolo.3. Longitud.4. Contenedor de datos (opcionalmente comprimido y encriptado).5. Código de autenticación de Mensaje (MAC).Cada registro es comprimido y encriptado usando el algoritmo negociado entra las partes. Al comienzo de la conexión la función de compresión es definida como Compression Method.null y el método de encriptamiento es TLS_NULL_WITH_NULL_NULL, lo que significa que no hay compresión ni encriptamiento. La compresión y el encriptamiento pueden ser inicializados durante el “SSL Hello”.

El protocolo elegido para ser utilizado es el protocolo SSL debido a que posee características más acordes a las necesidades de la aplicación. Entre ellas destacan:

1. Autenticación del servidor usando firmas digitales.2. Autenticación del cliente usando firmas digitales.3. Confidencialidad de los datos a través del uso de encriptamiento.4. Integridad de los datos a través del uso de códigos de autenticación de mensajes.

Cifrado de datosEl cifrado de datos es el proceso por el que una información legible se transforma mediante un algoritmo (llamado cifra) en información ilegible, llamada criptograma o secreto. Esta información ilegible se puede enviar a un destinatario con muchos menos riesgos de ser leída por terceras partes. El destinatario puede volver a hacer legible la información, descifrarla, introduciendo la clave del cifrado. A menudo se denomina “encriptación” a este proceso, pero es incorrecto, ya que esta palabra no existe en castellano; se ha importado del inglés “encrypt”, que se debe traducir como “cifrar”, y por tanto el proceso se debe denominar “cifrado”.

La seguridad de un buen sistema de cifrado depende enteramente de la clave, y no debe depender del algoritmo de cifrado usado. Es decir, el algoritmo de cifrado a menudo es público, y es conocido por los posibles atacantes, pero si el algoritmo es bueno, esto no debe bastarles para descifrar el mensaje.

Los algoritmos usados en las comunicaciones seguras de Internet son públicos prácticamente siempre, por lo que es necesario centrarse en crear claves suficientemente seguras.

La mayoría de aplicaciones en Internet que manejan información sensible, como contraseñas, ofrecen seguridad basada en algoritmos de cifrado avanzados a través de una conexión segura SSL. Cuando el navegador entra en una página segura el protocolo de navegación deja de ser http para ser https. Se podrá observar en la barra de direcciones del navegador que la URL ha cambiado y empieza por https.

Tipos de cifrado:

Cifrado simétrico

El emisor cifra el mensaje con una clave, y esa misma clave deberá ser la utilizada para descifrarlo. Estos algoritmos son rápidos y permiten cifrar y descifrar eficientemente con claves relativamente grandes. El problema que tienen es la seguridad de la clave: El emisor cifra el mensaje con la clave. Manda el mensaje cifrado, de forma que nadie puede descifrarlo sin esa clave. Ahora bien, el receptor ha de conocer la clave, ¿cómo se transmite sin comprometer su seguridad? Algunos algoritmos de este tipo son:

BlowfishIDEADES

Cifrado asimétrico

Existen dos claves, una pública y una privada, y se puede usar en dos direcciones.

a) El emisor cifra el mensaje con la clave pública A, que es la que puede conocer cualquiera. Sin embargo para descifrarlo hace falta la clave B, que sólo tiene el receptor, ya que es privada. Con esto se garantiza confidencialidad, cualquiera podría cifrar, pero sólo quien tenga la clave privada podrá descifrar.

b) El emisor cifra el mensaje con la clave privada B, que sólo él conoce. Ahora cualquiera puede descifrarlo con la clave privada A, pero una vez descifrado con esa clave A, la naturaleza del algoritmo estará garantizando que se ha cifrado con la clave B, por lo que la utilización del algoritmo en este sentido se usa para asegurar la autenticidad, y no para ocultar información. Cualquiera tendrá acceso a la información, pero podrá saber a ciencia cierta de dónde procede. El cifrado asimétrico en esta dirección se usa para certificar la autenticidad de las firmas digitales.

El funcionamiento de estos algoritmos, basados en factorización de números primos, permite que el cifrado se calcule con relativa sencillez, pero haga falta más procesamiento para descifrarlo. No obstante, aunque este algoritmo garantiza la seguridad de la clave privada, ya que sólo la tiene el receptor, es más lento y hace que los mensajes cifrados tengan un volumen mayor. Ejemplos de este cifrado son:

DSARSADiffie-Hellman

Cifrado híbrido

A menudo las conexiones seguras de Internet se sirven de una mezcla de los dos tipos de cifrado anteriores. Aprovechan la ligereza de uno y la fortaleza del otro. Lo que suelen hacer protocolos de comunicación seguros como HTTPS (basado en la capa SSL), es cifrar los mensajes usando un algoritmo simétrico, de forma que se hace un cifrado y descifrado rápido de los mismos, además de tener menos volumen los mensajes cifrados. Como hay que transmitir la clave del cifrado de alguna manera, ésta se cifra con un algoritmo asimétrico. Con esto se consigue que la parte más voluminosa de la información, que es el mensaje, vaya cifrada con un algoritmo seguro pero ligero, y la parte menos voluminosa, que es la clave, vaya cifrada con el algoritmo más pesado, y que garantiza que sólo podrá ser descifrada en el destino.

De esta manera, en el destino primero ha de descifrar la clave del cifrado simétrico, con su clave privada, y una vez tenida esta clave, descifrar el mensaje. Esto garantiza una conexión segura.

Algoritmo MD5MD5 procesa el mensaje de entrada en bloques de 512 bits, dividiéndolos en 16 Sub-bloques de 32 bits cada uno. La salida del algoritmo son 4 bloques de 32 bits que concatenados forman un hash de 128 bits. Como primer paso el mensaje es rellenado de tal forma que solo le falten 64 bits para ser un múltiplo de 512. Este relleno se hace añadiendo un 1 seguido de tantos 0’s como sean necesarios. Al final se añade una representación en 64 bits de la longitud del mensaje. Luego se inicializan 4 variables de 32 bits cada una:

A=0x01234567

B=0x89ABCDEF

C= 0xFEDCBA98

D= 0x76543210

Se comienza entonces el lazo principal del algoritmo. El lazo se repite para cada bloque de 512 bits del texto que se deban procesar. La 4 variables se copian en 4 variables de trabajo a = A, b = B, c = C, d = D. El lazo principal tiene 4 rondas, todas muy similares. Cada ronda usa una operación diferente 16 veces. Cada operación aplica una función no lineal sobre tres de las 4 variables a, b, c, d y luego añade el resultado a la cuarta variable, un sub-bloque del texto y una constante. Luego se rota el resultado a la derecha un número variable de posiciones y se añade el resultado a alguna de las variables a, b, c, d.

Hay 4 funciones no lineales que se aplican en cada ronda (una diferente en cada ronda):

Estas funciones han sido diseñadas de tal forma que los bits correspondientes de X, Y y Z son independientes. Si Mj representa el jth sub-bloque del mensaje (j = 0.15) y <<< s una rotación circular de s bits, las cuatro operaciones son:

Las constantes ti son escogidas de la siguiente manera, en el paso i, ti es la parte entera de 232 _ abs (sin (i)), donde i esta en radianes. Después de todos estos pasos a, b, c, d son añadidos a A, B, C, D respectivamente. Se continúa con el siguiente bloque y el resultado final es la concatenación de A, B, C, D.

Diseño de prototipos de interfaces

Interfaces del cliente.

Página principal que visualiza el cliente, y este seleccionará las opciones de Registrarse o Iniciar Sesión.

Registrarse: el usuario llena el formulario con sus datos, para que quede registrado en la base de datos, una vez realzado esto da click en el botón de Enviar.El botón de Restablecer tiene la función de borrar el contenido de los campos.

Iniciar Sesión: el usuario completará los campos solicitados para realizar las compras, (este ya debe estar registrado en la base de datos para valídalo) una vez realizado esto da click en el botón de Ingresar.

Pagina de compras (Pagina Principal)

Proceso de compras:1. Copia ID del producto en el formulario y da click en el botón de Enviar

2. Confirma el producto seleccionado e indica la cantidad a comprar y da click en el botón de Comprar

3. Confirmación de la compra

Sucursal: el usuario visualizará la dirección de la Sucursal de la Tienda

Contacto: el usuario visualizará los datos de contacto de la Tienda

Compras del día: el usuario podrá consultar los productos que compró en el día.

Interfaces del administrador.

Página principal que visualiza el administrador, y este seleccionará la opción de Iniciar Sesión.

Iniciar Sesión: el administrador llena el formulario con los respectivos datos, una vez realizado esto da click en el botón de Ingresar.

Página principal del Administrador

Lista de Usuarios Registrados: Muestra al administrador la lista de usuarios registrados en la Base de Datos

Eliminar Usuario: El administrador para que pueda eliminar un usuario tiene que copiar el ID del usuario en el campo y luego da click en el botón de Enviar y este se eliminara de la Base de Datos

Lista de Productos: El administrador podrá visualizar los productos existentes con sus características que están almacenados dentro de la base de datos

Insertar producto: el administrador llena los respectivos campos del formulario, una vez realizado esto da click en el botón de Enviar para que se guarden dentro de la base de datos.El botón de Restablecer tiene la función de borrar el contenido de los campos.

Abastecer algún producto: el administrador copia el ID del producto en el campo correspondiente y agrega la cantidad abastecer en el campo siguiente, una vez realizado

esto da click en el botón de Enviar, esto modificara la información del producto dentro de la base de datos.

Ventas: El administrador podrá visualizar las ventas que ha tenido en general.

Si desea ver las ventas del día, da click en el botón de SI y desplegará la siguiente página

Documents

Proyecto