INSTITUTO TECNOLÓGICO NACIONAL DE MÉXICO

CAMPUS CERRO AZUL

BITÁCORA DEL PORTAL DE COMPRA Y VENTA DE

ARTESANÍAS

“ARTESANOS DE LA HUASTECA”

INTEGRANTES:
LÍDER: HANNIA YARED RAMIREZ CORTEZ
CODIFICADOR: HANNIA YARED RAMIREZ CORTEZ
ANALISTA: AXEL LEVI HERNÁNDEZ HERNÁNDEZ
DISEÑADOR: AXEL MANUEL ANTONIO SANTIAGO
DOCUMENTADOR: LUIS ROBERTO DEL ÁNGEL SÁNCHEZ
TESTER: HANNIA YARED RAMIREZ CORTEZ
 ÍNDICE:
INTRODUCCIÓN……………………………………………. 3
FASE UNO ……………………..…………………………….…4
FASE DOS……………………..…………………………….….5
FASE TRES……………………..…………………………….….6
FASE CUATRO……………………..……………………….….7
AVANCE DEL PORTAL………………….…………………8
 INTRODUCCIÓN
En un mundo donde la tecnología se ha vuelto una de las principales herramientas
del ser humano, la necesidad de plataformas que conecten a productores locales
con consumidores globales se vuelve fundamental y necesaria. Este proyecto
propone la creación de un portal de compra y venta de artesanías huastecas en
línea, con el objetivo de promover y preservar la rica herencia cultural de la región
Huasteca, al mismo tiempo que se brinda a los artesanos una oportunidad para
expandir su mercado y aumentar sus ingresos.
La Huasteca es conocida por su diversidad cultural y su amplia gama de
artesanías, que incluyen textiles, cerámica, bisutería, juguetería y productos
elaborados con técnicas tradicionales. Sin embargo, muchos artesanos enfrentan
dificultades para acceder a mercados más amplios debido a la falta de visibilidad y
recursos para comercializar sus productos. Este portal busca eliminar esas
barreras, ofreciendo un espacio accesible y amigable donde los artesanos puedan
exhibir y vender sus obras.
Fase 1: Elección del proyecto
Fecha: //
Este proyecto fue asignado por el docente responsable de la materia de Ingeniería
de Software y se puso bajo la dirección del líder del proyecto. En esta fase, se
realizó una exhaustiva investigación y análisis de datos para comprender mejor el
tema y sus necesidades.
A lo largo de esta indagación, se recopilaron datos de artesanos locales, quienes
compartieron sus inquietudes y los problemas que han enfrentado a lo largo de su
trayectoria laboral. Gracias a esta investigación, logramos identificar los
principales requerimientos necesarios para brindar apoyo a los artesanos de
nuestra región.
Fase 2: Requerimientos
Fecha: //
Esta fase se basó en la investigación realizada durante la selección del proyecto.
A partir de los datos recopilados, el analista se encargó de diagnosticar los
requisitos tanto del vendedor como del comprador.
Estos requisitos fueron revisados y ajustados en las sesiones de corrección del
proyecto. Entre los requerimientos funcionales identificados, se encuentran los
siguientes:
 Registro de Perfil: El sistema debe permitir a los usuarios crear un perfil
para acceder a todas las funcionalidades del portal.
 Tipo de Usuarios: El sistema debe gestionar los datos de los perfiles según
su tipo de usuario, diferenciando entre compradores y vendedores, así
como sus interacciones dentro del portal.
 Artesanías: El sistema debe permitir la exhibición de artesanías en el portal.
 Categoría de Artesanías: El sistema debe facilitar la creación de una lista
con todas las clasificaciones disponibles para las artesanías.
 Método de Pago: El sistema debe permitir a los vendedores establecer
precios para sus artesanías y ofrecer múltiples opciones de pago a los
compradores.
 Tipo de Pago: El sistema debe garantizar que los usuarios puedan realizar
pagos seguros al adquirir artesanías.
 Envíos: El sistema debe permitir el ingreso de datos necesarios para
realizar entregas a domicilio y facilitar la comunicación entre compradores y
vendedores.
 Registro de Pedidos: El sistema debe llevar un registro detallado de todos
los pedidos realizados.
 Detalle de Pedido: El sistema debe proporcionar un desglose completo de
cada pedido, incluyendo productos adquiridos y costos asociados

En esta fase presentamos problemas en la identificación de requerimientos

y tuvimos varias correcciones por parte del docente y se fueron modificando
por el líder y diseñador para ayudar al analista, fue el proceso mas tardado
se estimaron 1 sesión y se llevaron 3.
Fase 3: Modelos de caso de uso:
Fecha //

Esta fase es crucial para crear una representación gráfica de los requerimientos
funcionales y para ilustrar cómo interactúan los usuarios con el sistema.
El analista y diseñador, con el apoyo del líder del proyecto, llevaron a cabo esta
tarea. Para desarrollar el modelo de caso de uso, se utilizó la aplicación DIA en
lenguaje UML. Se identificaron como actores al usuario general del portal, así
como a los roles específicos de vendedor y comprador. Las relaciones definidas
incluyen: gestión de clasificación de artesanías, gestión de productos, publicación
de artesanías, visualización de artesanías, realización de compras, procesamiento
de pagos, envío de productos, cancelación de pedidos y registro de usuarios.
Para completar este caso de uso, se estimaron inicialmente tres días; sin
embargo, el proceso requirió un total de cuatro días.
FASE 4: Realización del diseño de la base de datos
Esta fase se desarrolló de manera secuencial, siguiendo las etapas anteriores del
proyecto. El analista, el diseñador y la líder del equipo colaboraron en la creación
de una base de datos utilizando XAMPP. En este proceso, se definieron las clases
y atributos correspondientes a los requerimientos del sistema.
Primero, se diseñaron las tablas necesarias, las cuales fueron llenadas con los
datos solicitados para cada clase. Durante este trabajo, la docente realizó
observaciones sobre las relaciones entre las tablas y sugirió cambios que incluían
la modificación y eliminación de algunas de ellas. Se llevaron a cabo estas
correcciones en el tiempo estimado de dos sesiones, y se utilizaron ambas
sesiones para completar esta tarea.
Una vez ingresados todos los datos, se elaboró un diagrama que representaba las
relaciones entre las tablas de la base de datos. Este diagrama fue presentado por
el equipo a la docente y se consideró completo, aunque se recibió una
observación que ya ha sido corregida.
Además, se incluyeron aspectos como la normalización de las tablas para evitar
redundancias y asegurar la integridad de los datos. Este enfoque metódico no solo
mejoró la estructura de la base de datos, sino que también facilitó su comprensión
y uso en futuras fases del proyecto.
CREACIÓN DEL PORTAL:
Primero se buscó en el navegador wix y se creó una cuenta de google especialmente para
hacer el portal, después se hizo el registro en wix para poder hacer las plantillas y las
ediciones, automáticamente wix te envía a un apartado de recomendaciones de plantillas
de acuerdo a la descripción que otorgues sobre tu portal, seguido de esto optamos por
una plantilla en tonos rosas, blanco y café, con una galería tipo cinta la cual se nos hizo
muy atractiva para el usuario.
Una vez teniendo la plantilla elegida se comenzó la edición empezando por editar las
paginas , primero les dimos nombre a cada una para ir identificando y organizando el
proceso de la edición. El haber escogido una plantilla nos ayudo mucho ya que era un
pagina que ya venia prediseñada, nos ayudo mucho a reducir el tiempo de elaboración de
esta misma, ya que venia todo acomodado y de tal manera que nosotros editamos el
apartado visual con nuestro diseño y productos.
Para la página principal, fuimos agregando imágenes referentes a artesanías, para hacer
nuestra pagina mas llamativo a los futuros usuarios. También agregamos una pequeña
descripción de lo que es nuestra página, su propósito y algo referente a nosotros.
Posterior a esto agregamos unos botones, estos iban a servir para dirigirnos de forma
rápida a distintas secciones del sitio, los cuales podían ser Inicio (Que seria nuestra pagina
principal), Registro de Perfil, Método de Pago, Paquetería, Envíos y Tienda (En donde se
mostrarían todos los artículos disponibles hasta el momento).

Para poner estos botones Wix tiene un apartado para agregar nuevos elementos a la
pagina web, solo abrimos este panel y de ahí escogimos el diseño de botón que queríamos
colocar.
Después lo que nosotros hicimos fue solo editar el color y el contorno, para que solo se
vieran las letras.
De ahí empezamos a agregar los productos que queríamos que estuvieran en nuestro
sitio. Para esto Wix ya tenia cierto apartado para colocar artículos, esto debido a que la
plantilla que escogimos era para una tienda online, entonces solo dimos click en dicho
apartado y seleccionamos la opción de “Administrar productos”, esto nos llevo directo a
un panel en donde teníamos los productos que se mostrarían en nuestra tienda (cuando
ya los agregáramos), de editar los que ya habíamos subido, eliminar y agregar nuevos.

Para agregar un producto a nuestro sitio, solo dimos click en el botón azul que dice
“Nuevo Producto”, esto nos lleva directo a una pagina donde nos mostraba un formulario
de información del producto, esto nos dejaba poner nombre al producto, precio,
imágenes o videos, una descripción, precio, identificador, cantidad disponible y si al caso
lo requería el peso.
Una vez lleno dicho formulario, procedíamos a subir el producto. Y con esto estaba listo,
nuestro producto ya estaba guardado y por lo tanto ya aparecía en nuestro sitio web, esto
era algo muy sencillo lo cual nos facilitó mucho la creación del sitio. Wix no tenia muchas
limitaciones a la hora de guardar un producto, hasta donde nosotros intentamos no
tuvimos problemas subiendo imágenes, por lo que llegamos a la conclusión de que wix no
tiene limitaciones en este sentido.
Para la creación de la pagina de Registro de Perfil, hicimos una nueva pagina en blanco,
primero editamos el apartado visual, dando color de fondo, títulos, etc. Después en el
mismo apartado de “agregar elementos” escogimos un formulario, la ventaja de Wix es
que ya tenia varios formularios prediseñados, nosotros escogimos el que creíamos que
mas se acercaba a lo que queríamos, obviamente al ser un formulario ya hecho no
contaba con todos los campos que nosotros queríamos por lo que nos dimos a la tarea de
editar estos campos, agregando nuevos y eliminando los que creímos que no
necesitaríamos.
Una vez teníamos todos los campos que queríamos en nuestro formulario, editamos uno
por uno para que permitiera solo las respuestas que se le indicaban, por ejemplo en el
teléfono que solo permitiera introducir números y con un máximo de 10 dígitos, para el
código postal igual solo aceptara números, el correo que tenia que ser un correo valido
llevando “@” y el “.com”.
Los formulario en este sitio incluyen un botón para guardar el registro una vez este
terminado. Estos datos se guardan directamente en una base de datos que el mismo sitio
proporciona, la cual desafortunadamente no podíamos modificar, pero aun asi nos servía.
Bueno, ya guardado el registro el usuario oprimía el botón de iniciar sesión y este
verificaba sus datos, y si estaban correctos el usuario accedía al sitio web con su cuenta y
si estaban incorrectos no lo dejaba entrar hasta que corrigiera el error.
Para el carrito de compras, Wix nos da una
opción para que si es un sitio de compras
agregar automáticamente la opción de un
carrito, la cual usamos y el carrito en automático
aparece en una ventana despegable en una
esquina, este carrito te mostraba los productos
que nosotros habíamos escogido, asi como la
cantidad y si queríamos agregar mas, el precio
por unidad y el total, también contaba con un
botón para proceder al pago, el cual solo estaba
ahí pero no dirigía a ningún lado, por lo que nos
dimos a la tarea de crear una pagina web para el
registro de un pago.
Para crear esta pagina lo que nosotros hicimos
fue, de nuevo hacer una pagina en blanco y
buscar si ya había algún formato prediseñado
para apoyarnos de este.
Afortunadamente encontramos uno, en donde nos venia la opción de pagos, por medio de
tarjeta de crédito/debito y paypal, esta pagina la configuramos para que el usuario pusiera
su nombre y apellido y si este ya tenia una tarjeta guardada, le aparecería ahí y solo la
tendría que seleccionar para realizar el pago, si no, estaba la opción de registrar una
nueva tarjeta.
Ahora si el usuario quería agregar una nueva tarjeta, oprimía un botón con la leyenda
“Tarjeta digital” y este lo redireccionaba directamente a una pagina para registrar una
nueva tarjeta. Para el diseño de esta pagina hicimos lo mismo que con las dos anteriores,
abrir un nueva pagina y editarla visualmente, con esta si fue un poco mas complicado ya
que Wix no tenia como tal formularios para guardar métodos de pago, por lo decidimos
crear un nuevo formulario desde cero, directamente desde un apartado en Wix que te
permite crear formularios desde cero y con los campos que tu quieras, y a donde quieras
que se guarde (wix solo permitía guardar la información en su base de datos).
Procedimos a crearlo con los campos que nosotros queríamos y una vez estaba listo solo
lo colocamos en la pagina, después solo lo editamos para que quedara dentro de los
márgenes de la pagina y que se viera bonito.

Después de haber completado todo el proceso de pago, se dirige a una pagina en donde el
comprador escoge una paquetería para el envío de su paquete, para el diseño de este
apartado, creamos la pagina desde cero, donde editamos el apartado visual con colores
acorde a nuestro sitio y agregamos una imagen en grande para que la pagina no se viese
tan vacía, de igual manera agregamos una pequeña descripción referente al envío de su
paquete y la opción de escoger tres paqueterías que son las que hasta el momento
tomamos en cuenta, Estas mismas paqueterías tenían un botón que al comprador oprimir
(según la paquetería de su preferencia) lo dirigía directo a una pagina para el registro de
sus datos para su posterior envío.

Para la pagina de el envió de los pedidos, creamos una nueva página, la ventaja aquí es
que el mismo Wix te daba la opción de incluir una pagina para el registro de datos para
hacer envíos, donde venia con un formulario incluido, además de que también te daba en
automático el Identificador de
dicho pedido. Entonces solo
seleccionamos esta opción y
agregamos esta página, ya
después solo la editamos para
agregarle los colores de
nuestro sitio web, editar el
apartado visual como letras y
diseño. Después no pusimos a
editar el formulario, ya que
este no contaba con todos los
campos que nosotros
queríamos. El diseño de este apartado consideraría que fue el mas rápido ya que no
demoramos mucho editándolo.

Avance del portal

Se presentó simultáneamente con la base de datos el avance en la creación del
portal, el cual se desarrolló en la plataforma Wix. Este trabajo fue liderado
principalmente por el codificador, con la colaboración del documentador y el
diseñador.
El proceso de desarrollo se llevó a cabo en alineación con la estructura de la base
de datos. El diseñador se encargó de crear las plantillas de presentación que
darían forma al portal, mientras que el documentador investigó diferentes sitios y
recursos para optimizar la elaboración del mismo. El codificador eligió Wix como
plataforma debido a su facilidad de uso y eficiencia, lo que permitió una
implementación más ágil y efectiva, asi mismo se hizo una búsqueda de
artesanías en los mercados y tiendas en Alamo
Wix ofrece una amplia variedad de plantillas personalizables y herramientas
intuitivas que facilitaron el diseño del portal. Además, su interfaz permite mover
elementos, cambiar colores y agregar funcionalidades sin necesidad de
conocimientos avanzados en programación. Esto fue fundamental para el equipo,
ya que les permitió concentrarse en la experiencia del usuario y en la estética del
sitio.
Una vez completadas las plantillas, se integraron los elementos necesarios para
garantizar que el portal funcionara correctamente con la base de datos. El equipo
trabajó en conjunto para asegurar que cada aspecto del portal reflejara los
requerimientos establecidos previamente.

A continuación se presentaran los primero bocetos del portal:

Presentación del proyecto:
Adelantamos la hora de la sesion y presentaremos el portal ya terminado :