/Data-lovers

https://tatianatorog.github.io/Data-lovers/src

Primary LanguageJavaScript

Pokepedia

Índice

1. Definición del producto

Nuestra página muestra todos sobre los pokemones que viven en la región Kanto. Está realizada para usuarios principiantes e intermedios que conocen el juego Pokemon Go y cuando estén jugando puedan ingresar a nuestra página y conocer más.

2. Investigación UX

Por medio de una encuesta quisimos conocer un poco más a los usuarios del juego y les preguntamos a usuarios principiantes e intermedios, que identificaban como sus necesidades para crear nuestras historias de usuario y desarrollar el proyecto

3. Historia de usuarios

  • H1: Yo como jugador principiante quiero conocer todos los pokemones disponibles para encontrar cuales me hacen falta
  • H2: Yo como jugador intermedio quiero filtrar los pokemones por elemento para conocer cuáles de mis pokemones puedo usar en ciertas batallas.
  • H4: Yo como jugador intermedio quiere conocer cuántos pokemones pertenecen a cada tipo
  • H4: Yo como jugador principiante quiero buscar un pokemon en especifico para conocer sus características

4. Prototipos

Prototipo de baja

Para web:

Para mobile:

Prototipo de alta

Paleta de colores:

Los colores de nuestro proyecto representa la diversión y aventura del juego, las batallas y rapidez de los pokemones de la región Kanto.

Para web:

Para mobile:

5. Diseño final

6. Test de usabilidad

Gracias al test de usabilidad con distintos usuarios a medida que íbamos avanzando en las historias pudimos realizar diferentes iteraciones de la parte visual y de usabilidad del proyecto, como los diferentes clicks para los botones, algunos colores que no hacían referencia a nuestra paleta de colores, la vista de los modales y algunos ajustes de responsive.

7. Objetivos de aprendizaje

HTML y CSS

DOM y Web APIs

  • Uso de selectores del DOM.
  • Manejo de eventos del DOM.
  • Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

  • Uso de condicionales (if-else | switch | operador ternario)
  • Uso de bucles (for | for..in | for..of | while)
  • Uso de funciones (parámetros | argumentos | valor de retorno)
  • Manipular arrays (filter | map | sort | reduce)
  • Manipular objects (key | value)
  • Uso ES modules (import | export)
  • Diferenciar entre expression y statements.
  • Diferenciar entre tipos de datos atómicos y estructurados.

Testing

Estructura del código y guía de estilo

  • Organizar y dividir el código en módulos (Modularización)
  • Uso de identificadores descriptivos (Nomenclatura | Semántica)
  • Uso de linter (ESLINT)

Git y GitHub

  • Uso de comandos de git (add | commit | pull | status | push)
  • Manejo de repositorios de GitHub (clone | fork | gh-pages)
  • Colaboración en Github (branches | pull requests | |tags)

UX

  • Diseñar la aplicación pensando y entendiendo al usuario.
  • Crear prototipos para obtener feedback e iterar.
  • Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
  • Planear y ejecutar tests de usabilidad.

8. Checklist

  • Usa VanillaJS.
  • No hace uso de this.
  • Pasa linter (npm run 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 o Figma 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 allPokemon por uno o más campos (asc y desc).
  • UI: Permite filtrar allPokemon en base a una condición.
  • UI: Es responsive.