Índice

• 1. Introducción
• 2. PokeFanGO
• 3. Historias de usuario
• 4. Prototipos de diseño
• 5. Problemas detectados en test de usabilidad
• 6. Objetivos de aprendizaje
• 7. Checklist

---

1. Introducción

Pokémon GO es una experiencia de juego internacional que cuenta con más de mil millones de descargas y ha sido nombrada "el mejor juego para móviles" por Game Developers Choice Awards y "la mejor aplicación del año" por TechCrunch (tomado de Google Play). Los usuarios del juego se convierten en "Maestros/ entrenadores de Pokémon" y pueden:

• Descubrir el mundo Pokémon: explorar y descubrir nuevos Pokémon allá donde vayan.
• Atrapar distintos Pokémon para completar su Pokédex.
• Pelear contra Pokémon de otros entrenadores y conquistar un gimnasio.
• Competir en épicos combates contra otros entrenadores.
• Hacer equipo con otros entrenadores para atrapar poderosos Pokémon durante las incursiones.

2. PokeFanGO

PokeFanGO!! nació para todos los fans del popular juego PokémonGO, puede ser para jugadores experimentados y también para novatos.

Para este proyecto, comenzamos por preguntar a varios jugadores pokémon sobre que esperaban encontrar, que información era útil o cómo realizaban sus búsquedas.

De estas preguntas, concluímos que deseaban un Top, una lista completa de todos los pokemon, poder buscarlos por tipo, región, rareza, fuerza y por sus nombres; también, querían conocer en detalle a los pokemon (ataques, evoluciones, caramelos, tipos, rangos de fuerza y lore).

Por lo que construímos 3 historias de usuario, con sus respectivos criterios de aceptación y definición de terminado. Se espera que esta página pueda ayudarlos a conocer los pokémon para sacarle el mayor provecho al juego, y también pueda orientar a los jugadores novatos que apenas conocen a sus pokémon.

El diseño visual fue inspirado de la página oficial de PokémonGO, usamos tonos oscuros de azul y tonos claros de verde para el contraste, también se usó el mismo fondo para la pokedex y para acentuar algunos toques de color, usamos el tono amarillo de Pikachu. Varios elementos en este proyecto fueron diseñados en Photoshop, como el título del proyecto, fondo del modal, botón de pokebola, etc. La página es responsive para PC, tablet y celular.

También se agregó de manera adicional, un cuadro de estadísticas por tipo de pokemon, para que los usuarios puedan conocer que tipos de pokémon son más abundantes en el universo del juego.

Fue testeado al 100% de sus líneas, y probado con usuarios, para saber si habían errores o bug por corregir; también se consumió la data de JSON.

3. Historias de usuarios

4. Prototipos de diseño

• Prototipo de baja fidelidad:

  • Aquí

• Prototipo de alta fidelidad:

  • https://scene.zeplin.io/project/6421b04ed5549922e109d3e6

5. Problemas detectados en test de usabilidad

• El primer diseño visual de la HU1, recibió críticas por los múltiples elementos '.gif', provocando "ruido visual". Lo solucionamos cambiando la imagen de fondo y reduciendo los elementos a los necesarios.
• El primer top fue de probabilidad de apariciones, lo cual no fue impactante para los usuarios, nos pidieron cambiarlo a un top mas interesante, de fuerza, porque según afirmaron: "Siempre nos topamos con esos pokemon en cada esquina, no hay nada interesante en ello". Lo solucionamos cambiando el top con los pokemon más fuertes.
• En la ventana de pokedex, nos informaron de un problema con los filtros, "¿Qué pasa si quiero reiniciar mi búsqueda?, ¿Tengo que regresar las opciones por defecto?", aunque se podría solucionar refrescando la página, nos aseguramos agregando un botón que limpie los filtros.
• Nos informaron de unos bugs en la ventanas modal de algunos pokémon, no mostraba la data completa. Lo solucionamos limitando el filtro de la data a pokemon que sobrepasaban del n°251, lo cual originaba el error.

6. Objetivos de aprendizaje

HTML

• [:heavy_check_mark:] Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• [:heavy_check_mark:] Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• [:heavy_check_mark:] Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• [:heavy_check_mark:] Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• [:heavy_check_mark:] Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• [:heavy_check_mark:] Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• [:heavy_check_mark:] Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• [:heavy_check_mark:] Diferenciar entre tipos de datos primitivos y no primitivos

• [:heavy_check_mark:] Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• [:heavy_check_mark:] Objetos (key, value)

  Links

  • Objetos en JavaScript

• [:heavy_check_mark:] Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• [:heavy_check_mark:] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• [:heavy_check_mark:] Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• [:heavy_check_mark:] Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• [:heavy_check_mark:] Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• [:heavy_check_mark:] Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• [:heavy_check_mark:] Uso de linter (ESLINT)

• [:heavy_check_mark:] Uso de identificadores descriptivos (Nomenclatura y Semántica)

• [:heavy_check_mark:] Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• [:heavy_check_mark:] Git: Instalación y configuración

• [:heavy_check_mark:] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• [:heavy_check_mark:] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

• [:heavy_check_mark:] GitHub: Creación de cuenta y repos, configuración de llaves SSH

• [:heavy_check_mark:] GitHub: Despliegue con GitHub Pages

  Links

  • Sitio oficial de GitHub Pages

• [:heavy_check_mark:] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

• [:heavy_check_mark:] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• [:heavy_check_mark:] Crear prototipos de alta fidelidad que incluyan interacciones

• [:heavy_check_mark:] Seguir los principios básicos de diseño visual

Investigación

• [:heavy_check_mark:] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

7. Checklist

• ✔️ Usa VanillaJS.
• ✔️ 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 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.
• ✔️ UI: Es responsive.