Data Lovers - Harry Potters

Índice

• 1. Resumen del proyecto
• 2. Historias de usuario
• 3. Diseño
• 4. UX y feedback de usuarios
• 5. Javascript y DOM
• 6. Pruebas Unitarias
• 7. Estrategia de trabajo

---

1. Resumen del proyecto

En este proyecto construimos una página web para visualizar datos cada personaje del juego Harry Potter: Wizards Unite.

Los principales usuarios de este producto son: jugadores del Harry Potter: Wizards Unite.

El objetivo principal de este proyecto es diseñar y construir una interfaz web donde los ususarios puedan:

1. Ver los datos de los personajes del juego;
2. Filtrar la data de cada personaje según la necesidad de los jugadores.

Por lo que las características de los personajes ayudan a conocer la historia del mundo mágico (nombre, especie, casa, edad, rol etc.), es importante mostrar esta información del personajes en la pagina.

Los filtros que hemos elegido en este proyecto fue en base a comentarios de usuarios que respondieron a una investigación hecha por el equipo de Laboratoria donde se encuentra que:

• Antes de ir a una batalla contra un incontratus los usuarios pueden cambiar su varita con nucleo para sentirse más confiados. Los filtros permite seleccionar los personajes por nucleo de varita.

• Los personajes de la saga tienen distintos roles como por ejemplo, profesores. Esta característica es importante cuando un mago o bruja elige una profesión, ya que toma de referencia a su personaje favorito. Por ello, es importante para un mago o bruja poder filtrar por esta característica.

• Los personajes de la saga pertenecen a distintas casas y es importante para un mago o bruja estar en la casa de su personaje favorito.

Por esto definimos los objetivos especificos, que son:

• La pagina permite al usuario visualizar los personajes del juego y filtar por:
• Casas (Gryffindor, Hufflepuff, Ravenclaw, Slyterin);
• Rol (estudiante, personal);
• Nucleo (unicorn tail-hair, dragon heartstring, phoenix feather);
• Tipo de sangre (pure-blood, half-blood, muggleborn).

2. Historias de usuario

Despues de entender las necesidades de los usuarios, escribimos las Historias de Usuario:

Por ejemplo, historia usuario 1:

Yo como : Jugador

Quiero : Filtrar a los jugadores por casas

Para: Poder saber donde estan sus personajes favoritos.

3. Diseño

Para satisfacer las necesidades del usuario elegimos mostrar los datos en formato simple y bien entendimo:

Al primero, hicimos sketches en papel:

Despues los prototipos en Figma:

1. Para tamaño computadora:

2. Tamaño de telefono mobile:

Agregamos codigo en CSS para implementar el diseño planeado (maquetación), incluyiendo los principios de diseño visual (contraste, alineación, jerarquía), y también de flexbox.

4. UX y feedback de usuarios

Despues del diseño inicial hablamos con usuarios y entendimos, que necesitamos cambiar imagen de fondo, y aplicamos los cambios necesarios.

Con funcionalidades listas hicimos más tests y recibimos comentarios constructivos y valiosos para mejorar el diseño.

test_usuario1

test_usuario2

test_usuario3

5. Javascript y DOM

Al principio agregamos ES Modules (export, import), despues experimentamos y aprendimos sobre arrays (filter, map).

Para mostrar los objetos filtrados teniamos dos opciones con las cuales experimentamos:

1. Usar createElement para crear objetos de tipo boton y agregar imagen y nombre al este objeto usando appendChild; o
2. Mostrar las imagenes y texto seleccionado con HTML dinamico (innerHTML);

Elegimos el segundo opcion que nos parecio mas util y más simple para nuestro caso.

6. Pruebas Unitarias

Despues de hacer los primeros tests, aparecieron errores de tipo semántico. Al primero corregimos estos errores para poder continuar con tests de funciones. Para escribir el codigo de tests, usamos ejemplos del Jest.

7. Estrategia de trabajo

Planificamos nuestro trabajo diariamente.

1. Usamos Trello: https://trello.com/b/V4cpyap1/harry-potter-wizarding-world

2. También conversamos frecuentemente para cambiar opiniones, comparar codigo actual o y asi poder decidir los proximos pasos.

A pesar de que estábamos dividiendo las tareas entre nosotras, también cambiamos donde era necesario.

Regularmente actualizamos nuestro trabajo y subimos al remote Github. Mejoramos nuestra capacidad ejecutar comandos de git (add, commit, pull, status, push).