En este proyecto se construyó una página web de k-dramas en donde se visualiza un conjunto (set) de datos generados con la herramienta de Inteligencia Articial ChatGPT.
La página web permite visualizar la data, filtrarla, ordenarla y calcular el porcentaje de capítulos por k-drama.
Para la visualización de la data generada en ChatGPT se utilizó un componente UI conocido como tarjeta (card) que resalta los valores de las propiedades de la data que le interesaría a los usuarios ver como: imagen, nombre, cantidad de episodios, géneros y subtitulos de cada k-drama.
- Los usuarios pueden filtrar la data de los k-dramas por genero:
- Romance
- Drama
- Comedia
- Fantasía
- Thriller
- Acción
- Los usuarios pueden ordenar la data con la propiedad de nombre del k-drama alfabéticamente de forma ascendente(A-Z)o de forma descendente(Z-A).
- Esta funcion opera sobre la data ya filtrada por cada genero.
- Al hacer click en el botón de estadística los usuarios pueden visualizar en una ventana emergente los porcentajes de los k-dramas segun la cantidad de episodios.
- Se agregó el boton de limpiar que permite a los usuarios reiniciar la página web, limpiando filtros, ordenamiento y estadísticas.
Yo como fan de k-dramas quisiera ver el listado de los 24 doramas que existe en la plataforma. Nota adicional: este sitio web es solo informativo.
-
Criterios de Aceptación de usuario
- El idioma será en español
- Quiero que la información de cada k-drama vea una grilla
- Cada elemento de la grilla debe tener la imagen, el numero de episodios y el genero de cada k-drama.
- No hay ningún elemento interactivo en la pantalla, solo podremos hacer scroll, achicar o agrandar la pantalla del navegador
-
Definiciones de terminado (para el equipo):
- Todo el código está subido a la rama del repositorio
- Hemos hecho al menos 2 pruebas con usuarias para saber que entiendan todo.
-
Yo como usuario quiero:
- Filtrar por genero del k-drama y ordenar alfabeticamente de (A-Z) y (Z-A)
- Ver las estadisticas por el porcentaje de numero de episodios.
- Poder limpiar todos esos filtros y ver la pagina como en el inicio.
-
Criterios de aceptación de usuario
- Tener un menú en la parte superior donde pueda filtrar los k-dramas por genero, poder ordenar de forma alfabética (A-Z, Z-A) por nombre del k-drama.
- Mostrar las estadisticas en porcentajes del numero de episodios.
- Agregar un boton limpiar, que aplica borrar todos los filtros.
-
Definiciones de terminado (para el equipo):
- Todo el código está subido al main, con pull request, git add, git commit y git push.
- Hemos publicado la página en GitHub Pages
- Hemos hecho al menos 2 pruebas con usuarias para saber que entiendan todo.
Para realizar el prototipado realizamos UX (User Experience) para iniciar haciendo la investigacion de usuario, viendo otras plataformas que emiten k-dramas y asi validar lo siguiente:
¿Quiénes son las principales usuarias del producto?
Personas fanaticas a los k-dramas que les gusta ver los doramas en plataformas en linea (ya sea en el celular o en la computadora).
¿Cuáles son los objetivos de estas usuarias en relación con el producto?
- Ver el listado de los k-dramas con su portada
- Ordenar la busqueda de manera ascendente y descendente (A-Z o Z-A)
- Filtrar por genero, los actores que estan en los mismos, y por el numero de episodios.
- Poder limpiar el filtro y ordenamiento con un boton
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
- Genero por que asi el/la usuarix elige de acuerdo a su preferencia (Ej: drama, romance, comedia, etc).
- Los actores ya que nuestros usuarios son fanaticxs de los k-dramas y saben el nombre de sus actores favoritos.
- Numero de episodios por que hay usuarixs que les encanta ver k-dramas cortos o largos.
¿Cuándo utilizan o utilizarían el producto? Cuando el usuario realiza su hobbie favorito de ver k-dramas en su tiempo libre (ej: fines de semana, trabajo, etc), esto siempre y cuando lo visualicen en su dispositivo movil o computadora.
Realizamos un prototipo de baja fidelidad para nuestras historia de usuario 1 el cual a la siguiente historia de usuario va cambiando de acuerdo a la usabilidad de la usuarix.
De acuerdo al feedback correspondiente dado por las usuarixs realizamos los cambios respectivos al diseño y nuestro prototipo final fue el siguiente:
- Para interfaces web
- Para interfaces moviles
- Para realizar el dataset utilizamos a nuestro mayordomo chat gpt que ayudo con los siguientes promptings a realizar esta generacion de datos:
- Para la generacion de imagenes en nuestro caso como eran datos ya existentes procedimos a buscar desde la plataforma Pinterest, una herramienta que es como un buscador de imagenes (https://www.pinterest.com/)
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Arrays (arreglos)
-
Objetos (key, value)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
Git: Instalación y configuración
-
Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
-
GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
GitHub: Despliegue con GitHub Pages
- GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
-
Dando Instrucciones
-
Few shot prompting