TECNOLÓGICO NACIONAL DE

MÉXICO

INSTITUTO TECNOLÓGICO DE TLAXIACO

Programación Web

Anteproyecto “Oaxaca Tradicional”

INTEGRANTES DEL EQUIPO: OSCAR DONALDO CRUZ SÁNCHEZ Nº 16620211

ELIEZER LOPEZ SANDOVAL Nº 16620246

OSWALDO RODRÍGUEZ RAMÍREZ Nº 15620140

DOCENTE: ING. NOÉ GUTIÉRREZ OSORNO

VI SEMESTRE 6US

HEROICA CIUDAD DE TLAXIACO A 24/05/2019

ÍNDICE
Introducción............................................................................................................. 3

Participantes del proyecto: ...................................................................................... 5

Objetivo General ..................................................................................................... 5

Objetivos específicos .............................................................................................. 5

Arquitectura del sistema .......................................................................................... 6

Marco teórico .......................................................................................................... 7

¿Qué es una página Web? .................................................................................. 7

¿Para qué sirve una página Web? ...................................................................... 7

Tipos de página Web ........................................................................................... 7

Navegador Web................................................................................................... 7

Elementos principales de una página web .......................................................... 7

¿Qué es Bootstrap? ............................................................................................ 8

¿QUÉ ES Y PARA QUÉ SIRVE JAVASCRIPT? ................................................. 8

Metodología Scrum ............................................................................................. 9

Metodología .......................................................................................................... 11

Recolección de información............................................................................... 11

Análisis .............................................................................................................. 11

Desarrollo .......................................................................................................... 11

Implementación ....................................................................................................... 0

Base de datos...................................................................................................... 0

Diagrama de estructura del sistema .................................................................... 0

Diagrama de Clases ............................................................................................ 3

Diagrama de secuencia ....................................................................................... 4

Vistas caso de uso ............................................................................................ 10

Vista de datos (Base de datos).......................................................................... 12

 Diagrama de componentes................................................................................ 13

Vistas de implementación .................................................................................. 13

Diagrama de Estados ........................................................................................ 14

Diagrama de despliegue .................................................................................... 15

Estructura del sistema ........................................................................................... 16

Presentación/Componentes de la Interfaz de Usuario. ..................................... 16

Componentes Lógicos del Sistema Web ........................................................... 17

Componentes de almacenamientos de datos.................................................... 18

Modelo Vista Controlador .................................................................................. 19

Funcionamiento MVC ........................................................................................ 20

Resultados obtenidos ........................................................................................... 21

Especificación preliminar del diseño .................................................................. 21

Especificación detallada del diseño ................................................................... 22

Conclusión ............................................................................................................ 29

Bibliografía ............................................................................................................ 30
Índice de ilustraciones
Ilustración 1 roles del equipo de trabajo ....................................................................... 5
Ilustración 2 funcionalidad de Bootstrap ....................................................................... 8
Ilustración 3 ejemplo de JavaScript ............................................................................. 9
Ilustración 4 HTML con funcionalidades de JavaScript................................................. 9
Ilustración 6Base de datos ........................................................................................... 0
Ilustración 7: Casos de uso .......................................................................................... 1
Ilustración 8: Objetivos del sistema y requisitos de almacenamiento de información ... 1
Ilustración 9: Requisitos funcionales y no funcionales .................................................. 2
Ilustración 10 Estructura del sistema .......................................................................... 19
Ilustración 11 Pantalla Principal de inicio .................................................................... 21
Ilustración 12 Pagina inicial ........................................................................................ 22
Ilustración 13 Opción de productos registrados .......................................................... 23
Ilustración 14 Modulo de registro de cliente................................................................ 24
Ilustración 15 Modulo de inicio de sesión ................................................................... 25
Ilustración 16 Carrito de compras ............................................................................... 26
Ilustración 17 Configuración del usuario ..................................................................... 28
Ilustración 18 Cierre de sesión ................................................................................... 28

Índice de tablas
Tabla 1 ingreso al sistema .......................................................................................... 16
Tabla 2 Pagina de administrador ................................................................................ 16
Tabla 3 Registro de usuario........................................................................................ 16
Tabla 4 Perfil de usuario ............................................................................................. 17
Tabla 5 Descripción de HTML5 .................................................................................. 17
Tabla 6 Lenguaje de programación PHP .................................................................... 17
Tabla 7 Lenguaje de programación JavaScript ........................................................... 18
Tabla 8 lenguaje de base de datos MYSQL ............................................................... 18
Introducción
En este apartado realizaremos las actividades relacionadas con la identificación y
documentación del sistema Web que inicia a partir de la recopilación de información
sobre la necesidad que este cubrirá, posteriormente se hará un análisis de la
información, de la misma forma se prosigue con el diseño del sistema; este sistema
Web ayudara a satisfacer necesidades de nuestros clientes en cuestión de la
adquisición de artesanías y favorece a los artesanos con la venta de sus textiles, el
análisis y validación del documento de requisitos para asegurar consistencia,
compleción, viabilidad y evolución de las necesidades.
Este sistema pretende preservar la cultura en las regiones de Oaxaca, ya que es
algo que identifica a una comunidad como única de otras.
Es importante gestionar los requerimientos que necesita nuestro sistema, para
asegurar que cumpla con la comercialización de textiles de buena calidad y hechos por
artesanos de cada región, con lo cual se genera un crecimiento económico además de
la continuidad de nuestras costumbres y tradiciones en generaciones futuras
Participantes del proyecto:

No. Nombre Función

1 Oswaldo Rodríguez Ramírez Jefe del proyecto
2 Oscar Donaldo Cruz Programador
Sánchez
3 Eliezer López Sandoval Analista
Ilustración 1 roles del equipo de trabajo

Objetivo General
Realizar un sistema WEB en que contribuya a la comercialización de textiles
artesanales de las regiones de Oaxaca, así mismo a difundir la cultura a la vez que se
contribuya al desarrollo económico de la región.

Objetivos específicos
 Recopilar información acerca del proceso de elaboración de textiles artesanales.
 Analizar la información recopilada.
 Elaborar un estudio del mercado.
 Implementar la metodología de trabajo.
 Generar requisitos funcionales para el funcionamiento de la Pagina Web
 Crear un diseño de base de datos para el almacenamiento de la información.
 Crear el diseño de la tienda en línea.
 Gestionar información de los clientes
 Administrar la información de los artesanos.
 Crear una base de datos en un SGBD.
 Programar el sistema Web con HTML5, BOOSTRAP, JAVASCRIPT Y PHP.
 Programar el carrito de compras.
 Dar de alta datos del administrador, artesanos, y productos.
 Testear la tienda en línea.
 Arquitectura del sistema
El sistema web a desarrollar tiene como fin los siguientes objetivos:

Expansibilidad: Mantendrá la expansibilidad necesaria para facilitar ese proceso de

desarrollar versiones posteriores.
Portabilidad: Por estar diseñado en:

• HTML5: Para la estructura del Sistema Web.

• PHP y JAVASCRIPT: Para la codificación. Creando interactividad de
lado del servidor y del cliente.
• MySQL: Para el almacenamiento de datos. ocupa muy poco espacio en
la memoria, por lo que lo hace un sistema muy portátil.
Funcionalidad: Desarrollado para tener funcionalidad completa de sus componentes
Adaptabilidad: Es capaz de adaptarse a los navegadores de mayor uso (Chrome,
Mozilla FireFox, Opera, Safari, Microsoft EDGE, etc.).
Marco teórico
¿Qué es una página Web?
Se conoce como página Web, página electrónica o página digital a un documento
digital de carácter multimediático (es decir, capaz de incluir audio, video, texto y sus
combinaciones), adaptado a los estándares de la World Wide Web (WWW) y a la que
se puede acceder a través de un navegador Web y una conexión activa a Internet. Se
trata del formato básico de contenidos en la red (Rufino, 06 )
¿Para qué sirve una página Web?
Las páginas Web cumplen básicamente con la tarea de brindar información de
cualquier índole y en cualquier estilo o grado de formalidad.
Algunas, al mismo tiempo, permiten distintos grados de interacción entre
usuarios o con alguna institución, como son las páginas de foros, servicios de citas o
redes sociales, las páginas de compra y venta de bienes, las páginas de consulta o de
contacto con empresas, instituciones gubernamentales o con ONGs, e incluso las
páginas de soporte técnico especializado. (Rufino, 06 )
En principio, las funciones de una página Web son tan amplias como la demanda
de los usuarios y la oferta de sus creadores
Tipos de página Web
 Páginas Web estáticas. Operan mediante la descarga de un
fichero programado en código HTML, en el que están todas las instrucciones
para que el navegador reconstruya la página Web, accediendo a las ubicaciones
de sus elementos y siguiendo un orden preconcebido, rígido, que no permite la
interacción con el usuario. Este tipo de páginas son meramente informativas,
documentales, no interactivas.
 Páginas Web dinámicas. A diferencia de las anteriores, las
páginas Web dinámicas se generan en el momento mismo del acceso del
usuario, empleando para ello algún lenguaje interpretado (como el PHP), lo cual
le permite recibir solicitudes del usuario, procesarlas en bases de datos y ofrecer
una respuesta acorde a sus requerimientos.
Navegador Web
Un navegador Web es un software de aplicación que sirve para abrir páginas
Web tanto en una ruta local (como el disco rígido) o provenientes de la Internet.
Se les conoce como “navegadores” o “exploradores”, a partir de la metáfora de
que la Red es un lugar vasto y abarrotado, para el que se necesita de una plataforma.
(Rufino, 06 )
Elementos principales de una página web
Los elementos principales en una página web son:
 Texto: a veces redactado por un único autor y otras veces por los
usuarios de la misma en el caso de algunas páginas dinámicas con lenguaje
como php.
  Imágenes: gif, jpg y png son los tres formatos que suelen utilizarse
normalmente.
 Audio y vídeo: suele utilizar las extensiones midi, wav o mp3.
También se utilizan las incrustaciones de archivos almacenados en otros sitios,
como por ejemplo se hace al añadir vídeos de YouTube.
 Otros: existen además otros elementos que han ido aumentando
y evolucionando también con el paso de los años y las nuevas tecnologías. Estos
son Adobe Flash, Adobe Shockwave, Java o enlaces (también llamados
hipervínculos).

¿Qué es Bootstrap?
Bootstrap, es un framework
originalmente creado por Twitter, que permite
crear interfaces web con CSS y JavaScript,
cuya particularidad es la de adaptar la interfaz
del sitio web al tamaño del dispositivo en que se
visualice. Es decir, el sitio web se adapta
automáticamente al tamaño de una PC, una
Tablet u otro dispositivo. Esta técnica de diseño
y desarrollo se conoce como “responsive
design” o diseño adaptativo. (Solis, 2014)
Ilustración 2 funcionalidad de Bootstrap
El beneficio de usar responsive design
en un sitio web, es principalmente que el sitio web se adapta automáticamente al
dispositivo desde donde se acceda. Lo que se usa con más frecuencia, y que a mi
opinión personal me gusta más, es el uso de media queries, que es un módulo de CSS3
que permite la representación de contenido para adaptarse a condiciones como la
resolución de la pantalla y si trabajas las dimensiones de tu contenido en porcentajes,
puedes tener una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma
automática. (Solis, 2014)
¿QUÉ ES Y PARA QUÉ SIRVE JAVASCRIPT?
JavaScript es un lenguaje de programación, al igual que PHP, si bien tiene
diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente
(es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos
atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el
código JavaScript integrado en las páginas web (Anonimo, Aprende a Programar , 2019)
La primera forma de usar JavaScript dentro de una página web es embebiendo
directamente el código JavaScript dentro del código HTML. Vamos a poner un ejemplo
de código JavaScript pero no vamos a entrar en detalle a comentarlo ni explicarlo ya
que en este curso no vamos a explicar JavaScript. Simplemente queremos saber
interpretar por qué dentro de un documento HTML pueden aparecer fragmentos de
código escrito en otro lenguaje.
Ilustración 3 ejemplo de JavaScript

Los documentos HTML permiten incrustar

fragmentos de código JavaScript, bien dentro del
propio archivo HTML o bien realizando una carga
de ese código indicando el archivo donde se
encuentra el código JavaScript. Dentro de un
documento HTML puede haber ninguno, uno o
varios scripts de JavaScript. El uso de JavaScript
es muy habitual en la programación web. En este
curso no entramos a explicar el lenguaje de
programación JavaScript, pero hemos
considerado adecuado dejar indicado que
JavaScript es un lenguaje que la mayor parte de
los programadores web conocen porque permite
hacer muchas cosas que no se pueden hacer con
HTML (Anonimo, Aprende a Programar , 2019)
Ilustración 4 HTML con funcionalidades de JavaScript

Metodología Scrum
Scrum es un método para trabajar en equipo a partir de iteraciones o Sprints. Así
pues, Scrum es una metodología ágil, por lo que su objetivo será controlar y planificar
proyectos con un gran volumen de cambios de última hora, en donde la incertidumbre
sea elevada. (Anonimo, Metodología Scrum, 2019)
Se suele planificar por semanas. Al final de cada Sprint o iteración, se va revisando
el trabajo validado de la anterior semana. En función de esto, se priorizan y planifican
las actividades en las que invertiremos nuestros recursos en el siguiente Sprint.
(Anonimo, Metodología Scrum, 2019)
La metodología Scrum se centra en ajustar sus resultados y responder a las
exigencias reales y exactas del cliente. De ahí, que se vaya revisando cada entregable,
ya que los requerimientos van variando a corto plazo. El tiempo mínimo para un Sprint
es de una semana y el máximo es de cuatro semanas. (Anonimo, Metodología Scrum,
2019)
Entre las principales características de la metodología Scrum, desataca que es un
desarrollo incremental en lugar de la clásica planificación del desarrollo completo de un
producto o servicio. Sus equipos de trabajo se caracterizan por ser auto-organizados.
Y se centra en el producto final, en la calidad del mismo.
Además, en la metodología Scrum se solapan diferentes fases de desarrollo, en
lugar de llevar a cabo una planificación secuencial o de cascada. (Anonimo,
Metodología Scrum, 2019)
Aplicación
En la actualidad, los proyectos se desarrollan en contextos muy versátiles. Son
más complejos que antes, frente a unas exigencias del cliente y del mercado mucho
más variables, y con una incertidumbre elevada. Por eso, la aplicación del método
Scrum se ha extendido como la pólvora en numerosos sectores, fuera del mundo del
desarrollo de software. (Anonimo, Metodología Scrum, 2019)
Fases de la metodología Scrum
El desarrollo de producto tiene un ciclo de vida en la metodología Scrum. Estas
son fases en las que se divide un proceso Scrum: (Anonimo, Metodología Scrum, 2019)
 ¿Qué y quién? El producto que queremos conseguir una vez terminemos
el Sprint, y los roles de equipo con sus tareas asignadas.
 ¿Dónde y cuándo? El plazo y el contenido del Sprint.
 ¿Por qué y cómo? Las distintas herramientas para aplicar esta
metodología ágil.
Cada Sprint puede tener una serie de eventos o etapas. Los más comunes
son:
 Reunión para la planificación del Sprint. En ella, se divide el tiempo de
duración del Sprint, así como el objetivo y entregable del mismo. Además, el
equipo de desarrollo deberá saber cómo realizarlo. Muy parecido a lo que
llamamos reunión de Kick off y que puedes descubrir en este curso gratis y online
de gestión de proyectos.
 Scrum diario. Se basa en poner en común y sincronizar actividades para
elaborar el plan del día.
 Trabajo de desarrollo durante el Sprint. Nos aseguramos que los objetivos
se están cumpliendo, que no se producen cambios que alteran el objetivo del
Sprint y se mantiene un feedback constante con el cliente o dueño del proyecto.
 Revisión del Sprint. Reunión con el cliente o dueño del proyecto, en la
que se estudia y revisa el Product Backlog del Sprint. Se definen los aspectos a
cambiar, en caso necesario, de mayor valor o probables para planificarlo en el
siguiente Sprint.
 Retrospectiva del proyecto. Oportunidad del equipo de desarrollo para
mejorar su proceso de trabajo y aplicar los cambios en los siguientes Sprints.
 Metodología
Recolección de información
Actualmente en el estado de Oaxaca los productos artesanales que se producen
en las regiones se han ido perdiendo con el paso del tiempo debido a su deficiente
comercialización y a la invasión de empresas extranjeras en este mercado; los procesos
de producción se han deteriorado, lo que ha ocasionado que los artesanos tengan
dificultades a la hora de producir y vender con mayor agilidad sus productos, por lo cual
nace la idea de crear una tienda en línea que permita dar a conocer los diferentes
productos de las regiones del estado de Oaxaca; hemos determinado que empresas
pequeñas o emprendedoras se sumen a la comercialización y venta de artesanías y
textiles en tienda en línea, esto debido a que hacen un buen trabajo y labor con nuevos
diseños de vanguardia en tendencias de moda que buscan penetrar en la sociedad
actual, llevando un poco de la cultura a diferentes puntos del estado.
Análisis
En busca de información se encontraron sitios web como (eCrater, eBay y
Bonanza) que ofrecen un comercio electrónico de la venta de artesanías conectando
proveedores y clientes para que estos realizan compras.
Por lo que el sistema que se propone, será el desarrollo de una tienda en línea
que nos permitirá vender productos hechos por artesanos del estado de Oaxaca y así
promover la cultura y los valores en las personas, permitiendo crear un entorno donde
los usuarios conozcan diferentes culturas a partir de las artesanías que elaboran
nuestros artesanos.
El nuevo modelo de negocio a implementar va a dar una fiabilidad de tener una
disminución de costos, calidad de servicio y un soporte que le permita a los clientes
tener una adquisición de sus productos gracias a la implementación de nuevas
tecnologías que van a permitir el funcionamiento limitado en cuanto a nuestras
capacidades, confiabilidad y eficiencia.

Desarrollo
Es el Coach del equipo de trabajo, se encarga de observar que el trabajo vaya
por buen camino, es la persona que más sabe de Scrum y orienta a cada integrante
del equipo por si tienen alguna duda.

El desarrollo del sistema se realizara por un equipo integrado por 3 personas (un
programador, un diseñador y el líder del proyecto). Asignando tareas específicas
después de la recolección de la información de tallada y simplificada se va a desarrollar
un sistema con las siguientes módulos
 Inicio de sesión
 Registro de usuario
 Carrito de compras
 Registro de productos
 Registro de proveedores(artesanos )
 Visualización de productos
 Cronograma de actividades
Requisito Tarea Responsable Estado (no iniciada, Estimación
en proceso,
completada) Días 1 2 3 4 5 6 7 8 9 10

Hrs. 1120 1088 2076 1048 1040 1032 1020 1008 992 972

01 Recolectar información Eliezer Completado

02 Análisis de requisitos Eliezer Completado
03 Acta de acuerdos Eliezer Completado
04 Diseño de la BD Eliezer Completada
05 Creación de la BD Eliezer Completada
06 Diseño de la página Oswaldo Completada
web
07 Ingreso al sistema Donaldo Completado
08 Pantalla principal del Donaldo Iniciado
sistema
09 Módulo de productos Oswaldo Iniciado
09 Módulo de registro Donaldo Iniciado
10 Módulo de pedido Oswaldo Iniciado
11 Módulo de carrito Donaldo Iniciado
12 Módulo de Eliezer iniciado
configuración
13 Módulo de Donaldo Iniciado
administración
14 Tester del sistema Oswaldo Iniciado
15 Entrega del sistema Eliezer No iniciado
Implementación
Base de datos

Ilustración 5Base de datos

Diagrama de estructura del sistema

Ilustración 6: Diagrama de componentes del sistema Web.

Ilustración 6: Casos de uso

Ilustración 7: Objetivos del sistema y requisitos de almacenamiento de información

Ilustración 8: Requisitos funcionales y no funcionales
Diagrama de Clases
Los diagramas de clases son uno de los tipos de diagramas más útiles en UML,
ya que trazan claramente la estructura de un sistema concreto al modelar sus clases,
atributos, operaciones y relaciones entre objetos.
Los diagramas de clases ofrecen una serie de beneficios para toda organización.
Usa los diagramas de clases UML para:
• Comprender mejor la visión general de los esquemas de una aplicación.
• Expresar visualmente cualesquier necesidades específicas de un sistema
y divulgar esa información en toda la empresa.
• Crear diagramas detallados que resalten cualquier código específico que
será necesario programar e implementar en la estructura descrita.

Ilustración 24: Diagrama de clases del Sistema Web.

Diagrama de secuencia
Los diagramas de secuencia son una solución de modelado dinámico popular en
UML porque se centran específicamente en líneas de vida o en los procesos y objetos
que coexisten simultáneamente, y los mensajes intercambiados entre ellos para
ejecutar una función antes de que la línea de vida termine.

Ilustración 25: Diagrama de secuencia de cliente.

 sd Administrador

Sistema Base de datos

Admin Alta

Acceso al panel del administradorn ()

Panel de administrador ()

Crear cuenta ()

generar Scrpt()
Verificar Script()

Confirmar()

Agregar Usuario()

Confirmar Correo()
Mensaje de confitmacion()

26: Diagrama de secuencias para registros de administrador.

 sd Admin Baj a

Sistema

Admin

Aceeso al panel de Admin()

Panel_Admin()

Eliminar cuenta ()

Confirmacion()

Confirmar ()

Generar Scrip()
Base de datos
Conectar()

Eliminar ()

Mensaje de confirmacion()

Ilustración 27: Diagrama de secuencias para dar de baja a un usuario.

 sd Admin_ Alta

Producto Base de datos

Admin
Pantalla de inicio

Acceso al apnel Admin()

Panel Administrador ()

Agregar Producto()

Agregar producto()

Conectar()

Generar Script()
Mensaje de confirmacion()

Verificar Script()

Confirmacion de Script(script)

Confirmacion de Producto ()

Mensaje de confirmacion()

Ilustración 28: Diagrama de secuencias para dar de alta a productos en el sistema Web.
 sd Admin_Baj a_P

Producto Base de datos

Admin
Pantalla de inicio

Acceso a la pagina()

Panel Administrador ()

Conectar ()

Confirmacion()

Eliminar Producto ()

Buscar ID(Nombre, categoria)

Generar Scritp()
Eliminar()

Mensaje de confirmacion(Script)

Mensaje de confirmacion(Eliminar)

Eliminar
Confirmacion()

Mensaje e confirmacion()

Ilustración 29: Diagrama de secuencias para dar de baja a productos en el sistema Web.
Ilustración 30: Diagrama de secuencias para registro de artesanos y dar de alta sus productos.
Vistas caso de uso
El diagrama de casos de uso representa la forma en como un Cliente (Actor) opera
con el sistema en desarrollo, además de la forma, tipo y orden en como los elementos
interactúan (operaciones o casos de uso). Un diagrama de casos de uso consta de los
siguientes elementos:
• Actor.
• Casos de Uso.
• Relaciones de Uso, Herencia y Comunicación.

Ilustración 31: Diagrama de casos de uso del administrador.

Ilustración 32: Diagrama de casos de uso de los artesanos.

Ilustración 33: Diagrama de casos de uso de los usuarios.

Vista de datos (Base de datos)

Ilustración 34: Diagrama relacional de la base de datos de sistema Web.

Diagrama de componentes
Un diagrama de componentes muestra las organizaciones y dependencias lógicas
entre componentes software, sean éstos componentes de código fuente, binarios o
ejecutables. Desde el punto de vista del diagrama de componentes se tienen en
consideración los requisitos relacionados con la facilidad de desarrollo, la gestión del
software, la reutilización, y las restricciones impuestas por los lenguajes de
programación y las herramientas utilizadas en el desarrollo. Los elementos de
modelado dentro de un diagrama de componentes serán componentes y paquetes.

Ilustración 35: Diagrama de componentes del sistema Web.

Vistas de implementación
Una vista de la arquitectura llamada vista de implementación suele capturar la
enumeración de todos los subsistemas del modelo de implementación, los diagramas
de componentes que ilustran la organización de los subsistemas en capas y jerarquías
e ilustraciones de dependencias de importación entre subsistemas.

Ilustración 36: Vista de implementación de sistema Web.

Diagrama de Estados
Un diagrama de estados muestra el flujo de control entre estados (en qué estados
posibles puede estar “cierto algo” y como se producen los cambios entre dichos
estados).
 Un estado es una condición o situación en la vida de un objeto durante la cual
satisface una condición, realiza alguna actividad o espera algún evento.

Ilustración 37: Diagrama de estados de sistema Web.

Diagrama de despliegue
Un Diagrama de Despliegue modela la arquitectura en tiempo de ejecución de un
sistema. Esto muestra la configuración de los elementos de hardware (nodos) y muestra
cómo los elementos y artefactos del software se trazan en esos nodos.

Ilustración 38: Diagrama de despliegue del sistema Web.

 Estructura del sistema
Presentación/Componentes de la Interfaz de Usuario.

C-01 Ingreso al sistema

Descripción: Se visualiza el inicio del sistema, el cual contiene

fotografías y descripción de textiles artesanales.

Requerimientos: Contar con acceso a Internet y tener una herramienta para

navegar (Navegador Web). Contar con usuario y
contraseña.

Interfaces Disponibles: Carrito, login, inicio de sesión, registro de usuario,

productos.
Tabla 1 ingreso al sistema

C-02 Página principal administrador.

Descripción: Interfaz principal para administrar usuarios, artesanos,
compras y obtener diferente información acerca de cada
usuario en general.

Requerimientos: Estar dado de alta por el jefe del proyecto.

Interfaces Disponibles: Interfaz de modificación, registro, eliminación o detalles

de usuarios en general. Y monitoreo del sistema.

Tabla 2 Pagina de administrador

C-03 Registro nuevo usuario.

Descripción: Formulario de registro para obtener un usuario y

contraseña de manera que se pueda ingresar al sistema.

Requerimientos: Llenar todos los campos requeridos en el formulario

aceptando el registro.

Interfaces Disponibles: Registro de nuevo usuario.

Tabla 3 Registro de usuario
 C-04 Perfil del usuario

Descripción: Interfaz que muestra las diferentes opciones que tiene el

sistema como perfil. Aquí se ven los datos y operaciones
principales del usuario.

Requerimientos: Estar dado de alta como usuario.

Interfaces Disponibles: Perfil, Compras, Ventas, Saldo, Domicilio y Método de

pago.

Tabla 4 Perfil de usuario

Componentes Lógicos del Sistema Web

C-05 HTML5

Descripción: Pantallas que muestran la información que contiene el

sistema Web.

Requerimientos: Navegador web, herramientas aplicativas.

Interfaces Disponibles: Ingreso al sistema, registro nuevo usuario, búsqueda de

productos, entre otras.

Tabla 5 Descripción de HTML5

C-06 PHP

Descripción: Lenguaje de programación con el que fueron creados los

funcionamientos de las interfaces del software.

Requerimientos: Interfaces incrustadas en HTML.

Interfaces Disponibles: Ingreso al sistema, registró de nuevo usuario en general,

búsqueda de listas, información de usuarios, entre otras.

Tabla 6 Lenguaje de programación PHP

 C-07 JavaScript

Descripción: Lenguaje de programación para crear las validaciones

del sistema.

Requerimientos: Documentos de extensión .js en el sistema.

Interfaces Disponibles: Ingreso al sistema, registró nuevo usuario, búsqueda de

listas, información de usuarios, entre otras.

Tabla 7 Lenguaje de programación JavaScript

Componentes de almacenamientos de datos

C-08 MySQL

Descripción: Herramienta para el almacenamiento de toda la

información que se maneja en el sistema.

Requerimientos: XAMPP

Interfaces Disponibles: Mantenimientos y respaldo de la base de datos (como el

espejeo, replicas etc.)
Tabla 8 lenguaje de base de datos MYSQL
Ilustración 9 Estructura del sistema

Modelo Vista Controlador

Modelo
Se encarga de los datos, generalmente consultando la base de datos.
Actualizaciones, consultas, búsquedas, etc. todo eso va aquí, en el modelo.
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.

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.
Funcionamiento MVC

Solicita

Entrega
2 1
6
Invoca
CONTROLADOR

Solicita
Procesa y
envía
4
5
Envía
MODELO VISTA

Retorna Procesa
Pide

En este MVC, el usuario interactúa con el controlador

pidiendo información al modelo, el cual se encarga de
realizar consultas a la base de datos, se entrega de
nueva cuenta al controlador para así transferirlo a la
etapa vista y hacer entrega al usuario, de esta manera
funciona lo que es el modelo vista controlador,
3 impidiendo que la modificación de una consulta hecha
por el usuario no afecte al sistema Web.
Resultados obtenidos
La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical
user interface), es un programa informático que actúa de interfaz de usuario, utilizando
un conjunto de imágenes y objetos gráficos para representar la información y acciones
disponibles en la interfaz.
Especificación preliminar del diseño
El diseño pretende contar con un diseño amigable y que permita el registro de
usuarios (clientes)

Ilustración 10 Pantalla Principal de inicio

Especificación detallada del diseño
Inicio: mostrara imágenes de textiles con los productos más recientes que se
haya registrado

Ilustración 11 Pagina inicial

 Productos: mostrara una lista, que nos permitirá seleccionar por categoría los
diferentes artículos que se encuentres registrados como son para (caballero y mujer
entre otros) , como también una opción de buscar algún artículo en específico.

Ilustración 12 Opción de productos registrados

 Registro: Modulo que le permite al usuario registrarse mediante un formulario que
le permitirá tener una cuenta para poder comprar

Ilustración 13 Modulo de registro de cliente

 Login: o inicio de sesión le permitirá a los usuario registrados acceder para poder
realizar compras entre otras cosas, cabe destacar que este login también le permitirá a
los administradores ingresar para hacer las modificadores correspondientes

Ilustración 14 Modulo de inicio de sesión

 Carrito: mostrara todos los artículos que el usuario desea comprar permitiéndole,
al usuario las opciones básicas de seguir comprando que lo re direccionara al módulo
de productos para que sigua seleccionando productos y los añada a su carrito, la
siguiente opción es vaciar carrito que le permitirá eliminar todos los productos que tiene
registrado como también eliminar un producto en específico, y el por ultimo confirmar
carrito que lo llevara a un nuevo módulo que le permitirá hacer su pago.

Ilustración 15 Carrito de compras

 Pedido: le mostrara al usuario o cliente todos los pedidos que realizo para ver los
detalles de dicho producto
 Configuración: le permitirá al usuario cambiar sus datos personales como
también su contraseña con el fin de seguridad personal y por si el usuario adquirió una
nueva dirección o cambio de domicilio

Ilustración 16 Configuración del usuario

Cierre de sesión: el usuario cierra sesión una vez que finaliza las tareas que
realizo o cancela si desea seguir con la sesión abierta.

Ilustración 17 Cierre de sesión

Conclusión

El interés por las artesanías son una tendencia global que involucra clientes,
artesanos y el quipo responsable del sitio Web, esto beneficia a todos los actores
involucrados. El desarrollo de este documento facilita al grupo de trabajo una secuencia
de lo que van a desarrollar, esto nos ayuda en el proceso de desarrollo del sistema Web.
La versatilidad del documento nos hace ver claramente el provecho que puede
tener para el público y nuestros clientes, de tal manera ver si cumple con las
expectativas con la que va a ser desarrollado.
 Bibliografía
angeles, U. d. (10 de mayo de 2011). UML. (Venezuela ) Recuperado el 20 de marzo de
2019, de
http://www.codecompiling.net/files/slides/UML_clase_03_UML_actividades_esta
dos.pdf
Anonimo. (21 de octubre de 2010). Modelo DRA (Desarrollo Rápido de Aplicaciones).
(DRA) Recuperado el marzo de 20 de 2019, de
https://www.ecured.cu/Modelo_de_desarrollo_r%C3%A1pido_de_aplicaciones
Anonimo. (3 de enero de 2012). METODOLOGÍA "DRA". (DRA) Recuperado el marzo
de 18 de 2019, de https://modelosdesoftware.webnode.es/dra/
Anonimo. (20 de junio de 2019). Aprende a Programar . Obtenido de Aprende A
programar:
https://www.aprenderaprogramar.com/index.php?option=com_content&view=arti
cle&id=590:ique-es-y-para-que-sirve-javascript-embeber-javascript-en-html-
ejercicio-ejemplo-basico-cu00731b&catid=69&Itemid=192
Anonimo. (2 de Mayo de 2019). Metodología Scrum. Obtenido de Metodología Scrum:
https://www.sinnaps.com/blog-gestion-proyectos/metodologia-scrum
Microsoft. (20 de mayo de 2010). Microsoft . (Visio 2010 Visio 2007 Visio Premium 2010
Visio Standard 2010) Recuperado el 20 de marzo de 2019, de
https://support.office.com/es-es/article/acerca-de-los-diagramas-de-estado-uml-
8facfd43-bd82-49f5-a750-20c568b5a9b5
Rufino, M. E. (2019 de junio de 06 ). Pagina Web. Obtenido de Pagina Web:
https://concepto.de/pagina-web/#ixzz5puqljDN6
Solis, J. (26 de 09 de 2014). ¿Qué es Bootstrap y cómo funciona en el diseño web?
Obtenido de ¿Qué es Bootstrap y cómo funciona en el diseño web?:
https://www.arweb.com/chucherias/%C2%BFque-es-bootstrap-y-como-
funciona-en-el-diseno-web/