README

Dataverse

Índice

• 1. Resumen del proyecto
• 2. Historia de usuario
• 3. Creación del (Dataset) mediante el uso del prompting y la IA
• 4. Funcionalidad
• 5. Prototipo de baja fidelidad
• 6. Proyecto Final
• 7. Desarrollado por

1. Resumen del proyecto

En este proyecto se construyó una páginaweb para visualizar un conjunto (set) de datos generados con un prompting, utilizando herramientas de inteligencia artificial como ChatGPT, ExplainDev, entre otras para generar un set de datos en un archivo javascript.

Este proyecto tiene como objetivo mostrar a la usuaria diferentes tipos de zapatillas y modelos modelos que se usan en el estilo atlehisure un nuevo estilo lleno de cómodidad y elegancia a la vez, permitiendo tambien el ordenamiento de esa data mostrada de forma ascendente o descendente, filtrar por marca y filtrar por color. El proyecto se ha desarrollado utilizando HTML semántico, CSS y JavaScript (vanilla).

2. Historia de usuario

Nos enfocamos en las necesidades de nuestra usuaria y de allí partimos con las siguientes tareas:

1- Como usuario quiero poder ver los modelos de zapatos pertenecientes al estilo Altheisure en forma de tarjetas.

2- Como usuario quiero poder filtrar los modelos de la marca de zapatos por medio de un desplegable.

3- Como usuario quiero poder filtrar los zapatos teniendo en cuenta su color por medio de un desplegable.

4- Como usuario quiero filtrar y ordenar la información de los zapatos de forma simultánea para tener una vista de los modelos y colores que quiero.

5- Como usuario quiero tener un contador que indique cuantos modelos están en pantalla.

6- Como usuario quiero poder tener un desplegable que me permita ordenar los modelos de la marca de zapatos de forma ascendente y descendente.

7- Como usuario registrado quiero tener una página responsive para poder interactuar desde cualquier dispositivo.

8- Como usuario registrado quiero tener un botón que me permita restablecer la información sin actualizar la página.

3. Creación del (Dataset) mediante el uso del prompting y la IA

Para este proyecto en especifico se hizo uso de herramientas que estan cambiando el futuro del desarrollo web actualmente. Nos referimos, a La Inteligencia Artificial, la cual nos ayudó no solo en la generación de datos mediante un prompt, sino que también a la generación de imágenes de igual forma mediante un prompt, lo cual reforzó nuestras habilidades para las creaciones de los mismos y comprender que mientras más especifico se sea, mayor eficacia se obtiene de parte de estas IAs.

Ejemplo de prompting para la generación del (DataSet):

Ejemplo del (DataSet) generado por la IA:

4. Funcionalidades

La aplicación permite a la usuaria filtar y ordenar distintos datos como:

1. Filtro por marca: Los usuarios pueden filtrar los modelos por marca de zapatos. Esto significa que pueden seleccionar una o varias marcas de una lista desplegable o una interfaz de selección múltiple para reducir los resultados a modelos de una marca específica o varias marcas al mismo tiempo.

2. Modelos de zapatos: La página muestra una lista de modelos de zapatos disponibles para los usuarios.

3. Filtro por color: Los usuarios pueden filtrar los modelos por color. Esto permite a los usuarios seleccionar uno o varios colores para ver modelos de zapatos en esos colores.

4. Ordenamiento ascendente y descendente: Los usuarios pueden ordenar la lista de modelos en orden ascendente o descendente según un criterio, como el nombre del modelo, el precio, la fecha de lanzamiento, etc. Esto les permite ver los modelos de zapatos en el orden que deseen.

5. Botón de limpiar los datos: Hay un botón que permite a los usuarios eliminar todos los filtros aplicados y restaurar la lista completa de modelos de zapatos sin necesidad de actualizar la página.

6. Filtros agrupables: Los filtros por marca y color son agrupables, lo que significa que los usuarios pueden aplicar múltiples filtros al mismo tiempo para refinar su búsqueda.

7. Contador de modelos filtrados: Muestra el número de modelos de zapatos que coinciden con los filtros seleccionados. A medida que los usuarios aplican o quitan filtros, el contador se actualiza en tiempo real.

5. Prototipo de baja fidelidad

Versión Desktop:

Versión Mobile:

Creado en la Herramienta de edición Figma.

5. Proyecto Final

6. Desarrollado por

Rosa Sarmiento y Emma Linares estudiantes del Bootcamp Laboratoria-clase 2023.