“Año Del diálogo y la reconciliación

nacional”
UNIVERSIDAD NACIONAL DE SAN
MARTIN -TARAPOTO
FACULTAD DE INGENIERIA DE SISTEMAS E
INFORMATICA
Escuela Académico Profesional de Ingeniería de Sistemas e Informática

“Entregable 3”

Asignatura : Lenguaje de Programación III

Docente : Cristian Werner García Estrella

Ciclo : V

Año : 2018

Integrantes:

 Del Castillo Inga Daniel Fernando

 Garagay Mozombite Itzel
 Montejo Guevara Marco Antonio
 Bartra Reátegui Renato
 Cabrera Juárez Elva
 Juárez Rivero Christian Manuel
 Vela Ortiz Billy

Tarapoto del 2018

INDICE
INTRODUCCIÓN:_____________________________________________________________________________________4
I. Objetivo general_______________________________________________________________________________7
II. Objetivo específico_____________________________________________________________________________7
III. Desarrollo del sitio Web_______________________________________________________________________8
3.1 Desarrollo definitivo de la propuesta gráfica_______________________________________________8
3.2 Feedback del área usuaria____________________________________________________________________14
3.3 Desarrollo definitivo del sitio web__________________________________________________________15
3.4 Validación del área usuaria___________________________________________________________________20
3.5 Desarrollo definitivo de vistas_______________________________________________________________25
3.6 Levantamiento de observaciones____________________________________________________________29
3.7 Entrega de código de fuente__________________________________________________________________31
3.8 Desarrollo de propuesta de actividades____________________________________________________34
3.9 Puesta en producción del sitio web_________________________________________________________35
IV. Puesta en producción del sitio web.____________________________________________________39
V. Proceso de Capacitación al área usuaria._______________________________________________39
VI. Documentación técnica de los productos desarrollados: Informe de
actividades y código fuente._____________________________________________________________________39
VII. Conclusiones________________________________________________________________________________39
VIII. Recomendaciones_________________________________________________________________________40
ANEXOS______________________________________________________________________________________________41

INTRODUCCIÓN:
El presente informe da a conocer la ardua labor de un equipo de programadores al
desarrollar una página web para reservas de una ferretería (JRZ) se explicara
detalladamente cada proceso que hicimos para poder así lograr nuestra primera página
web.
Además dejaremos un manual de usuario para el mejor entendimiento sobre nuestra página
web para el respectivo soporte técnico.
Servicio Eventual para el Diseño, Desarrollo e Implementación de un Sitio Web
para la Promoción y Difusión de la empresa de sublimados “MOMENTOS
UNICOS”

Producto 3: Informe Final de Actividades

 I. Objetivo general

Diseñar, desarrollar y disponer de un sitio web para la difusión o promoción de servicios de

sublimados en productos textiles, cristales, metales y cerámica.

II. Objetivo específico

1. 2.1.Diseñ ar, desarrollar un sitio web, para la venta de productos sublimados a persona
y empresas.
2. 2.2.Hacer que la empresa sea má s rentable a través de ventas masivas vía online
2.3.Retroalimentar y transferir el sitio web a la Empresa “Momentos Ú nicos”.
2.4.Elaboració n de documentació n técnica necesaria para su configuració n y
administració n..

III. Desarrollo del sitio Web

3.1 Desarrollo definitivo de la propuesta gráfica

Esta tarjeta tiene por finalidad mostrar o presentar el modelo escogido de
la página web, por el cliente de la empresa de “MOMENTOS ÚNICOS”.
 Este trabajo se ha realizado entre los meses de mayo y junio del presente
año, por el grupo de desarrolladores Fernando(F), Itzel(IG), Marco(MG) y
Renato(R), quienes cumplen el rol de backend y Frontend.
La descripción dada se define de la siguiente manera:

MÓDULO DE INICIO

Imagen 1: Fuente Elaboración propia

MÓDULO NOSOTROS
Imagen 2: Fuente Elaboración propia

MÓDULO DE CONTACTO
Imagen 3: Fuente Elaboración propia
 MÓDULO DE MI CUENTA
Imagen 4: Fuente Elaboración propia
 MÓDULO REGISTRO

Imagen 5: Fuente Elaboración propia

 MÓDULO INGRESAR

Imagen 6: Fuente Elaboración propia

3.2 Feedback del área usuaria
Esta tarjeta tiene por finalidad mostrar una serie de críticas y opiniones
por parte del personal que tendrá acceso al manejo de la página en la
empresa. Es importante dar a conocer este feedback ya que se ha
necesitado conseguir una mejor ejecución gráfica del proyecto a
presentar, como también la elaboración reorganización de algunos
campos que el usuario desee modificar.
Se tiene como ciertos propósitos lo siguiente:
 Identificar la mejor forma para la elaboración de diseño de sublimado
personalizado y adecuarlos de manera correcta al proyecto.
 Implementar el sistema web, dependiendo de las críticas o
preferencias del usuario.

Para el desarrollo del sitio web se han coordinado reuniones con el

Gerente y equipo, en los cuales se ha evaluado la arquitectura de
información, diseño y arte conceptual de todo el contenido, además del
registro de información y lógica del negocio de ventas, todo este proceso
fue validado y dado el visto bueno para culminar el desarrollo del sitio
Web.
3.3 Desarrollo definitivo del sitio web
Esta tarjeta tiene como propósito mostrar la página web culminada con
las vistas o módulos, como se ha mostrado en la propuesta. (Muestra de
la página web programada).
El equipo de desarrolladores fue (Elva (EJ), Pedro (PF), Marco (MG) y
Renato(R)) quienes cumplieron con el rol de codificar y mostrar el sitio
web.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Screenshot del código para el desarrollo del sitio web
 Mostrar la página web culminada al usuario final.
 Entrega final del trabajo.

Página de “Inicio”

Imagen 8: Fuente Elaboración propia

Página “Crea tu Diseño”

Imagen 9: Fuente Elaboración propia

Página “Nosotros”

Imagen 10: Fuente Elaboración propia

Página “Contacto”

Imagen 11: Fuente Elaboración propia

 Imagen 12: Fuente Elaboración propia

Página “Registro”
Página “Ingresar”

Imagen 13: Fuente Elaboración propia

Página “Añadir Nueva Dirección”
Fuente: elaboración Propia
 3.4 Validación del área usuaria
Después del feedback se pretende obtener una aprobación por parte de
nuestro cliente (empresa de sublimados “Momentos Únicos”) el cual se
mostrará en esta tarjeta a través de un documento, imágenes.
El equipo de desarrolladores fue (Alex (A), Itzel (IG), Pedro (PF), Elva
(EJ)), Daniel (DC) y Cesar David (CD) que cumplieron con el rol de
implementar y mostrar el sitio web.
Para el buen desarrollo del trabajo se ha considerado los siguientes
puntos:
 Implementar cambios sugeridos por el cliente
 Mostrar los módulos de la página web.
 Mostrar código fuente.

Para el código fuente se tienen las siguientes capturas:

Página de Inicio

Imagen 14: fuente Elaboración propia

Página Crea tu Diseño

Imagen 15: fuente Elaboración propia

Página Nosotros

Imagen 16: fuente Elaboración propia

Página Contacto

Imagen 17: fuente Elaboración propia

Página Registro

Imagen 18: fuente Elaboración propia

Página Ingresar

Imagen 19: fuente Elaboración propia

Página Añadir Nueva Dirección

Imagen 20: fuente Elaboración propia

3.5 Desarrollo definitivo de vistas

Esta tarjeta tiene por objetivo mostrar los módulos o vistas de la página
web ya programadas, de acuerdo al modelo de la maqueta elegida.
 El equipo de desarrolladores fue (Fernando(F), Itzel(IG), Marco(MG) y
Renato(RR)), que cumplieron con el rol de mostrar el sitio web.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Módulo_Pestaña Inicio
 Módulo_Pestaña Mi cuenta
 Módulo_Pestaña Nosotros
 Módulo_Pestaña Contacto
 Módulo_Pestaña Categoría

INICIO

NOSOTROS
CONTACTO

MI CUENTA
CATEGORÍA
 3.6 Levantamiento de observaciones
En esta tarjeta se presentará el trabajo que estamos realizando para el
levantamiento de las observaciones dadas por la empresa.
(Ferretería "J.R.Z")
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Verificar observaciones
 Implementar mejoras para la plataforma web

DESCRIPCION E IMPLEMENTACION:

1. Los cambios solicitados por el gerente general de la empresa ferretera fueron

el cambio de color del sitio web, con colores representativo al del logo de la
empresa.

Imagen 20: Fuente Elaboración propia

2. Como siguiente cambio fue
la completa modificación del
módulo de “Mi cuenta”
empezando por remover el
campo de contáctenos, la
 imagen personalizada del usuario, el fondo de pantalla fue removido y los
módulos los cambiamos de lugar al costado del logo de la empresa.
Imagen 21: Fuente Elaboración propia

3. En el campo contáctenos las observaciones levantadas fue modificada en la

estructura y en la implementación de un formulario de contacto para
interacción del cliente y el usuario.

Imagen 22: Fuente Elaboración Propia

4.En el módulo de nosotros, cambiamos la estructura total del módulo.

Imagen
23:

Elaboración propia
3.7 Entrega de código de fuente

En esta tarjeta se va mostrar la codificación con imágenes paso a paso

de la creación de la plataforma web, como son el inicio, mi cuenta,
nosotros, categoría.
Para el buen desarrollo del trabajo hemos considerado los siguientes
puntos:
 Presentación del código fuente.
 Explicación del código fuente.
 Imágenes acopladas.

1. Página de inicio

Imagen 24: Elaboración propia

En esta imagen se muestra el código para la elaboración de la parte
inicial del sitio web.

2. Página Nosotros
 Imagen 25: Elaboración propia
En esta imagen se muestra el código para la elaboración del módulo
nosotros del sitio web.

3. Página Contáctenos

Imagen 26: Elaboración propia

En esta imagen se muestra el código para la elaboración del módulo
contáctenos del sitio web.
4. Página que sale al dar clic en una categoría
 Imagen 27: Elaboración propia
En esta imagen se muestra el código para la elaboración de la redirección
de la categoría de los productos del sitio web.

5. Página que sale al dar clic a un producto

Imagen 28: Elaboración propia

En esta imagen se muestra el código para la elaboración de la redirección
de los productos del sitio web.

6. Página mi cuenta
 Imagen 29: Elaboración propia
En esta imagen se muestra el código para la elaboración del módulo mi
cuenta del sitio web.

3.8 Desarrollo de propuesta de actividades

En esta tarjeta aplicaremos los conocimientos adquiridos a lo largo del

curso para desarrollar lo planteado, el diseño y principales
características del programa.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:

 Principales características del programa

 Imagen 30: Fuente Elaboración Propia
En esta imagen se muestra que, al pasar el puntero del mouse sobre el
icono del carrito, te muestra el producto seleccionado la imagen, el
precio y la cantidad.

3.9 Puesta en producción del sitio web

El objetivo de esta actividad es colocar el producto a disposición del

usuario con el fin de lograr una aceptación por parte de la empresa.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Mostrar el producto y tipo de producto al usuario.
 Funcionamiento de la página web ante el personal de la ferretería

Imagen 31: Elaboración propia

En esta imagen se puede observar a unos de los desarrolladores
mostrándole el interfaz en el módulo de productos. Este campo ha sido
modificado acorde al guste de nuestro cliente por lo que se ha procedido a
una revisión final para evitar inconvenientes posteriores.
 Imagen 32: Elaboración propia
En esta imagen se puede apreciar al usuario interactuando con la interfaz y
probando el funcionamiento del sitio web, en el módulo inicio. En esta parte
el usuario va poder conocer acerca de su página, teniendo acceso a cada
uno de los módulos e inspeccionando que se encuentra en cada uno ellos,
se quiere recalcar que la plataforma creada es amigable y de rápido
entendimiento por lo que se asume la rápida comprensión por parte del
usuario y cliente.

3.10 Capacitación sobre la gestión de información del sitio web a los

usuarios de la plataforma de la ferretería

Esta tarjeta pretende mostrar a través de fotos la capacitación realizada a

todos los usuarios que tendrán acceso a la página web en la ferretería.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Reunión con el gerente general
 Reunión con el personal encargado para el acceso a la página
 Demostración del uso de la página web
Imagen 33: Fuente elaboración Propia
El día de miércoles 28 de noviembre del presente, se ha logrado tener una
pequeña reunión con gerente de la ferretería para la explicación del
funcionamiento de la página, aquí se le mostro que contiene la parte de
inicio, ha logrado observar en la parte de categoría todos sus tipos de
productos añadidos y ha quedado satisfecho con el trabajo realizado.
 Imagen 33: Fuente elaboración Propia
En la imagen se muestra a uno de los desarrolladores explicando al
usuario principal el orden de funcionamiento de uno de los módulos de la
plataforma web, ha solicitado una mejora en lo que respecta al ingreso de
la parte interna, se ha mejorado y se ha obtenido ese resultado de buen y
fácil acceso.

3.11 Desarrollo de material de capacitación

En esta tarjeta se mostrará un informe detallado del manejo de la página
web, el cual será presentado a la empresa y usuarios para su respectivo
uso.
Para el buen desarrollo del trabajo consideramos los siguientes puntos:
 Manual del usuario.
 Video demostrativo.
En esta tarjeta se va a mostrar un manual de capacitación con todos los
pasos a seguir para un mejor acceso y conocimiento de la página web,
tanto para el usuario General como para los secundarios o el personal que
tendrá acceso al manejo y manipulación de la plataforma web.
Este manual se va presentar juntamente con este informe con el fin de
hacer saber nuestro trabajo.
IV. Puesta en producción del sitio web.

La puesta en producción del sitio web en la dirección URL de

www.ferreteriajrz.com depende de que el gerente de la Ferretería haga las
gestiones para contar con el dominio y hosting y sus accesos y de esta
manera desarrollar esta puesta en producción en su totalidad.

V. Proceso de Capacitación al área usuaria.

La capacitación con el área usuaria para el registro de información,
administración de contenido y la gestión de las reservas se ha realizado en
una reunión en las oficinas del gerente de la ferretería JRZ los días 10 y 11
de Diciembre del presente año.

VI. Documentación técnica de los productos desarrollados: Informe de

actividades y código fuente.

Todas las documentaciones desarrolladas para este proyecto se encuentran

en los Anexos, código fuente y otros documentos como el Informe 2 y Plan de
Trabajo presentado en el primer entregable.

VII. Conclusiones

● Se ha logrado desarrollar el sitio web en coordinación con el gerente y el

personal de la ferretería JRZ desde el maqueteo, las presentación de la
propuesta gráfica, el desarrollo de la base de datos y al final el código
fuente pata obtener la página web deseada
● Se ha logrado desarrollar los contenedores de registro de productos en
las cuales la página mostrara y el usuario podrá hacer su reserve
mediante su ordenador.
● Se ha logrado desarrollar los formularios y vistas para el registro de
usuarios las cuales podrán hacer su reserva de acuerdo a un login y un
password.
● Se ha logrado elaborar materiales de capacitación para dar el soporte
técnico necesario luego de la puesta en producción del sitio Web.
VIII. Recomendaciones
● Se recomienda, a la brevedad, brindar los accesos al dominio y hosting
de www.ferreteríajrz.com para así poder culminar el proyecto en la cual
fuimos convocadas y puedan hacer el uso de su página.
● Se recomienda avisar al equipo de programadores sobre alguna falla o
algún mal entendido sobre la página web para su asesoramiento rápido y
explicación.
● Que los de soporte técnico usen el material entregado sobre la
capacitación ya que ellos quedaran a cargo de la página al culminarla.
● Cualquier falla o algún mal entendido sobre la página creada , llamar al
grupo de programadores para la atención correspondiente.
ANEXOS

Anexo 1. Propuesta funcional del sitio web

1. Modelado del Negocio

1.1. Reglas del Negocio.

1.- Gestionar Ventas:

 Se registra la venta de productos disponibles en el sistema. Así
mismo para dicha acción se verifica los datos generales del cliente,
los cuales ya han sido ingresados por el mismo al momento de
registrarse y de los productos correspondientes.
2.- Gestionar Pedidos:
 Dependiendo de la modalidad con que se haya registrado la venta y
la cantidad de productos, se registra la venta y se lleva a cabo la
verificación para cerciorarse que los datos y la información brindad
son correctas.
3.- Gestionar Reportes:
 Se registran los datos generales de los productos, incluyendo
descripción y precios.
 Se asigna un tipo de producto a cada producto a registrarse en el
sistema.
4.- Gestionar Seguridad:
 Se registran los datos generales de los clientes en el sistema, y
poder asociarlos así a la venta.
 Se debe incluir en el registro nombre, apellidos, teléfono, e-mail, el
tipo de documento que presenta, así como su dirección exacta.






 Maquetado del módulo categoría
 En esta secciona al darle clic en la pestaña categoría te enviara a
una nueva página donde se muestran las diferentes categorías de
los productos que posee la empresa.

 Maqueta dentro de categoría

pero si solo pasamos el puntero del mouse solo aparecerá un menú
desplegable donde se muestran todas las categorías.


 Maqueta del módulo de nosotros

En esta pestaña veremos la información de la empresa, como la
misión, visión, el organigrama y su historia
 Maqueta del módulo de contáctenos
En esta pestaña veremos información para poder contactar con la
empresa, tal como el teléfono, correo y su ubicación






 Maqueta del módulo de mi cuenta

En esta pestaña veremos tres sub pestañas donde te medicinará

a, la información a tu perfil, tu registro de compras y tu registro de
compras pendientes (los pedidos que se guardan en tu memoria
cache)
 Maqueta de mi cuenta-tu perfil
En caso que te encuentres registrado, al ingresar a mi cuenta, te
enviara a esta página donde podrás visualizar la información de tu
perfil y también podrás cambiar esa información
  Maqueta de mi cuenta-registro de compras

Si le damos clic a “registro de compras” te rediccionará a esta página donde podrás

visualizar tus productos reservados, donde se muestra la información del producto,
la cantidad y el sub total. Solo podrás

 Maqueta de mi cuenta-registro de compras pendientes

En esta pestaña podrás ver un registro de tus pedidos, aquí se podrá ingresar sin la
necesidad de haberte registrado e identificado, ya que los productos pedidos se
guardarán en tu carrito y en la memoria caché de tu ordenador (si sales de la página
se eliminan los pedidos), pero si estas registrado, estos pedidos pasarían a
registrarse en la base de datos, pero con
 Maqueta de la sección de carrito
Si entramos a la pestaña carrito, podrás visualizar tus pedidos y
también las compras ya concluidas; principalmente aparecerá tus
pedidos para que concluyas con la compra del producto
 Maqueta de sección de login
En esta sección de la página podremos identificarnos siempre y
cuando ya estemos registrados, esta página aparecerá si
intentamos realizar alguna operación única de un usuario
registrado, como finalizar la compra o ver la información del perfil

 Maqueta de la sección de registro

En esta sección te registras como usuario de la página, te pedirá
datos personales y tu dirección, se usará tu correo electrónico
como ID, y te pedirá una contraseña de amenos 8 dígitos
2.1.1 Propuesta 2

En esta propuestase mostrara la portada al ingresar a la web de la

empresa y todos los servicios que cuenta, y una interfaz ordenada.
 PESTAÑA - CATEGORIAS
En “CATEGORIAS” mostraremos una barra desplegable en donde se
encontrarán las diversas categorías que cuenta y al seleccionar una,
se mostrara los productos con la cuales cuenta.
 PESTAÑA – NOSOTROS
En “NOSOTROS” queremos que el cliente conozca un poco más de
la empresa por lo que le damos acceso a un organigrama, a la visión
y misión de la Ferretería, considerando información básica y
suficiente.
 PESTAÑA – CONTACTENOS

Queremos que el cliente tenga la facilidad de llegar a la empresa por lo

cual proporcionamos un teléfono, correo y la dirección para poder
comunicarse, en caso presentara alguna duda o inconveniente.
 PESTAÑA – INICIAR SESIÓN
En este bloque solo queremos que el cliente pueda tener acceso a su
perfil ya creado través de su correo y una contraseña, y pueda
navegar tranquilamente por la página.
 PESTAÑA – REGISTRO
El cliente puede registrarse libremente en nuestra página accediendo
al llenado de únicamente un correo electrónico y creando su
contraseña además de aceptar las políticas de seguridad que la
empresa le ofrece.

 PESTAÑA – MI CUENTA
En “Mi CUENTA” se desea que el cliente tenga guardado su lista de
productos, sus pedidos pendientes si por a o b ha hecho una
selección y aún no ha finalizado su compra, también se quiere
mostrar un contenedor con sus pedidos finalizados por si desea hacer
un rastreo de sus gastos, como punto a parte.
 PESTAÑA – CESTA
El Cliente puede ir seleccionando sus productos los cuales le
aparecerán en el carrito de compra, una vez ahí le mostrará el monto
total, descripción del producto.
2.1.1 PROPUESTA 3
Propuesta inicial, donde el cliente va tener acceso con facilidad a
todos nuestros servicios, como también a una bonita y atractiva vista
de la página web.
 PESTAÑA - NUEVOS PRODUCTOS
En “nuevos productos” queremos mostrar los artículos recién
adquiridos por la empresa, novedades y mucho más.
 PESTAÑA – MI CUENTA
En “Mi cuenta” se desea que el cliente tenga guardado su lista de
productos, sus pedidos pendientes si por a o b ha hecho una
selección y aún no ha finalizado su compra, también se quiere
mostrar un contenedor con sus pedidos finalizados por si desea hacer
un rastreo de sus gastos, como punto a parte.
 PESTAÑA – NOSOTROS
En “Nosotros” queremos que el cliente conozca un poco más de la
empresa por lo que le damos acceso a un organigrama, a la visión y
misión de la Ferretería, considerando información básica y suficiente.
 PESTAÑA – CONTACTO
Queremos que el cliente esté satisfecho con nuestra atención, es por
eso que le proporcionamos acceso hacia nosotros mediante un
teléfono y un correo para poder comunicarse, en caso presentara
alguna duda o inconveniente.
 PESTAÑA – REGISTRO
El cliente puede registrarse libremente en nuestra página accediendo
al llenado de todos los campos y finalmente obteniendo una cuenta al
cual va poder acceder y guardar sus contenidos, como se ha
explicado en su respectiva maqueta.
 PESTAÑA – INGRESAR
En este bloque solo queremos que el cliente pueda tener acceso a su
perfil ya creado y pueda navegar tranquilamente por la página .
 PESTAÑA – CARRITO
El Cliente puede ir seleccionando sus productos los cuales le
aparecerán en el carrito de compra, una vez ahí le mostrará el monto
total, descripción del producto y un botón con procesar compra por si
ya desea adquirir todo lo seleccionado.
 PESTAÑA – CATEGORIA
El cliente al presionar en categoría podrá observar las demás muy
aparte de las más vistas que se muestran al inicio de la página, con
rápido y fácil acceso.
2.1 Propuestas a colores
2.1.1 Primera Propuesta
Presentamos la primera propuesta a colores de lo que sería la página
de inicio de la página web
  Ma
quetado del módulo categoría
 En esta pestaña veremos la presentación de cómo se vería si le
damos clic a categorías, cabe recalcar que podrá acceder ya sea de
a extra net y la intra net

 Maqueta dentro de categoría

 Pero si solo pasamos el mouse por esa pestaña, se desplegará un
menú que se vera de esta manera


Maqueta del módulo de Nosotros
 En la pestaña nosotros solo se podrá visualizar información asica de
la empresa

 Maqueta del módulo de contáctenos

 En esta pestaña también solo se podrá visualizar información de la
empresa, pero con a diferencia que es información para contactar con
la empresa sea su teléfono, correo o su ubicación

 Maqueta del módulo de “Mi Cuenta”

 Al dar cli en la pestaña “Mi Cuenta” se mostrará una página donde se
mostrará hipervínculos a “Tu perfil” “Pedidos finalizados” y “Pedidos
Pendientes”, Cabe recalcar que para poder a “Tu Perfil” y “Pedidos
finalizados” tendrás que identificarte como usuario para poder
acceder

 Maqueta de mi cuenta-tu perfil

 Al estar identificado y entras a “Mi Perfil” podrás visualizar la
información que brindaste al identificarte, así como modificar esa
información

 Maqueta de mi cuenta-registro de compras

Pero si ingresamos a “Pedidos Finalizados” se nos mostrará esta
página donde podrás visualizar los pedidos reservados donde se te
mostrará la cantidad a pagar y la cantidad de productos, esto no se
 podrá modificar y el cliente tiene un plazo de 72 horas para realizar el
pago y recoger el pedido

 Maqueta de la sección de carrito

La página tiene una pestaña al lado superior izquierdo con el símbolo
de un carrito si le damos clic ahí se mostrará, si estas identificado,
todos los pedios finalizados y no finalizados, y si no estás identificado
o registrado solo se mostrará los pedidos guardados en la memoria
caché.
 Maqueta de sección de login
Cuando le damos clic a la pestaña ingresar se nos mostrara esa
página donde te identificaras como usuario, tendrás que ingresar tu id
de usuario que sería el correo que pusiste al momento del registro y
también la contraseña. Esta página también se mostrará
automáticamente cuando intentes realizar una operación única de un
usuario registrado e identificado
 Maqueta de la sección de registro
En caso no estés registrado, tendrás que darle a la pestaña registrar
y te enviara a esta página donde ingresaras tus datos personales,
como tu nombre tu correo y DNI y tu contraseña de acceso.
2.1.1 Segunda Propuesta
PROPUESTRAS GRÁFICAS POR PESTAÑAS:
 PESTAÑA - CATEGORIAS
 PESTAÑA – NOSOTROS
 PESTAÑA – CONTACTENOS
 PESTAÑA – INICAR SESIÓN
 PESTAÑA – REGISTRARSE

 PESTAÑA – MI CUENTA
 PESTAÑA – CESTA
2.1.1 Tercera Propuesta
PROPUESTRAS GRÁFICAS POR PESTAÑAS:
 PESTAÑA - NUEVOS PRODUCTOS
 PESTAÑA – MI CUENTA
 PESTAÑA – NOSOTROS

 PESTAÑA – CONTACTO
 PESTAÑA – REGISTRO
 PESTAÑA – INGRESAR
 PESTAÑA – CARRITO
 PESTAÑA – CATEGORIA
Anexo 2. Módulo de carga de información.
A partir de la arquitectura se ha modelado la base de datos:
 Anexo 3. Módulos de Gestión.

Se ha desarrollado las interfaces del sistema, se ha contemplado un análisis

de casos de uso del sistema:

 Gestión de Ventas

 Gestión de Pedidos
 Gestión de Reportes
 Gestión de Seguridad