majomarquez / dataloversmajo

---

---

Readme Data Lovers

En nuestro trabajo de Data Lovers decidimos elegir la opción del juego League of Legends(LOL), decidimos titularlo LUL Level Up League of Legends.

Sobre Data Lovers LUL

Data Lover es una web que contiene información principalmente sobre los personajes que puedes elegir para jugar LOL. Acá encontraras imágenes de los personajes y una descripción de cada uno de ellos y podrás filtrarlos para saber a que Tag pertenecen para poder jugar de mejor manera.

Planificación

La planificación de nuestro sitio puedes encontrarla en el siguiente Link:

Planificacion Trello

Usuarios

Nos enfocaremos a 3 tipos de Usuarios, los cuales fueron definidos por una encuesta. El primero es una persona que quiere comenzar un juego ó le han recomendado LOL pero no sabe si comenzar o no por que no tiene claro de que se trata.
El segundo tipo de usuario es una persona que ya descargo el juego pero no sabe que campeón elegir. Finalmente el tercer usuario es un jugador de LOL que por estrategia quiere comparar a los campeones.

Encuestas

Se realizaron encuestas para realizar las historias de Usuario
Puedes revisar la encuesta aquí

Historias de usuario

COMO USUARIO INDECISO QUIERO CONOCER LOL PARA COMENZAR UN JUEGO NUEVO Y DECIDIR SI DESCARGARLO CUANDO SEPA QUE ES INTERESANTE PARA MI.

COMO USUARIO QUE YA DESCARGO EL JUEGO QUIERO CONOCER QUE CAMPEONES EXISTEN PARA ELEGIR UNO Y COMENZAR A JUGAR.

COMO USUARIO QUE COMENZÓ A JUGAR RECIÉN QUIERO TENER LA INFORMACIÓN COMPLETA DE MI CAMPEÓN PARA SABER QUE EQUIPO Y RUNAS ELEGIR.

COMO USUARIO QUE COMENZÓ A JUGAR RECIÉN QUIERO COMPRENDER LA TERMINOLOGÍA DEL JUEGO PARA PODER JUGAR MEJOR.

COMO USUARIO QUE YA JUEGA LOL QUIERO COMPARAR LA INFORMACIÓN DE LOS CAMPEONES PARA TOMAR DECISIONES ESTRATÉGICAS.

Criterios de aceptación

• Criterio de aceptación para historia de Usuario 1 : Que el usuario esté enterado de el juego y pueda conocer a los personajes para poder decidir. Para esto Subiremos un video explicativo del juego, También mostraremos imágenes del juego que servirán de link para nuestro sitio y otros sitios que puedan ayudarlos.

• Criterio de aceptación para historia de Usuario 2: Que el usuario pueda reconocer a todos los campeones .Para esto mostraremos la imagen de cada uno de los 143 campeones y sus nombres

• Criterio de aceptación para historia de Usuario 3: Que además de ver las imágenes de los campeones con sus nombre , el usuario tenga información detallada de ellos. Para esto al pinchar cada imagen del campeón se abrirá la información detallada de él. El usuario también podrá filtrar a los campeones por status

• Criterio de aceptación para historia de Usuario 4: Mostrar al usuario los términos mas usados en el juego de forma clara y concisa. Para esto creamos un diccionario del juego

• Criterio de aceptación para historia de Usuario 5: Que el usuario pueda comparar entre dos campeones Para esto mostraremos gráficos comparativos donde el usuario puede seleccionar los dos campeones que quiere comparar. También se mostrarán los tipos de estatus de los campeones donde podrán filtrar solo los nombres que necesitan ver.

Experiencia de usuario
Diseño
Puedes revisar LUL aquí

Prototipo de Baja Fidelidad

–	–
–	–

Prototipo de Alta Fidelidad

El prototipo de Alta Fidelidad fue realizado en Figma .
Aquí Puedes encontrar el prototipo de alta fidelidad .

Zeplin .

Testeos de Usabilidad.

• Prototipo de Baja Fidelidad

Se realizaron 4 pruebas con el prototipo de baja fidelidad de la que obtuvimos feedback sobre el diseño y amigabilidad del sitio, lo anterior fue modificado en el prototipo de alta fidelidad mostrado a continuación.

• Pruebas de Prototipo de Alta Fidelidad.

Se realizaron 4 pruebas con el prototipo de alta fidelidad, realizadas en loom ,estos pueden ser vistos en los links a continuación:

Ver Pruebas con prototipo de alta fidelidad

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Se utilizó Vanilla JS, CSS , HTML y Boostrap.
En la interfaz logramos mostrar todas las imágenes y parte de la información de los campeones que se encontraban en la data permitiendo filtrarlos por categoría, lo que puede ser visualizado en distintos tamaños de pantallas móviles.

Checklist

Checklist Obligatorio para el Proyecto

• Usa VanillaJS.
• No hace uso de this.
• Pasa linter (npm pretest)
• Pasa tests (npm test)
• Pruebas unitarias cubren un mínimo del 70% de statements,
  functions y lines y branches.
• Incluye Definición del producto clara e informativa en
  README.md.
• Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad)
  en README.md. Incluye _Diseño
• de la Interfaz de Usuario_ (prototipo de alta fidelidad) en
  README.md.
• Incluye link a Zeplin en README.md.
• Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• [] UI: Muestra lista y/o tabla con datos y/o indicadores.
• UI: Permite ordenar data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.