Pokepedia

Índice

• 1. Definición del producto
• 2. Investigación UX
• 3. Historia de usuarios
• 4. Prototipos
• 5. Diseño final
• 6. Test de usabilidad
• 7. Tecnologías Usadas
• 8. Checklist

---

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

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en 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 tipos de datos atómicos y estructurados.

Testing

• Testeo unitario.

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)

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 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.