Data Lovers

-Pokemon Dex-

Índice

• 1. Descripción del proyecto
• 2. Investigación UX
• 3. Historias de usuario
• 4. Prototipos BF - AF
• 5. Diseño final
• 6. Test usabilidad
• 7. Objetivos de aprendizaje
• 8. Checklist

---

1. Descripción del proyecto

Pokémon Dex es una página donde el usuario puede consultar y conocer acerca de los pokemones de la primera generación o dicho por los expertos y conocedores de este mundo, pokemones que habitan la región de Kanto. Además de acercarce a su Pokémon favorito, los usuarios de esta página tienen la opción de ordenar ya sea en orden ascendente o descendente por letra y asi mismo por número, dentro de estas opciones también cuentan con la posibilidad de filtrarlos según su tipo (15).

2. Investigación UX

Para entender mejor qué necesidades complementarias a la app Pokémon GO tienen los usuarios, se encontró una rápida investigación (research) y estos son algunos de los hallazgos.

• Los Pokémon tienen características únicas que determinan las decisiones que toma el usuario (tipo, debilidad, peso, multiplicador, etc.)
• Un maestro Pokémon antes de salir a casar los Pokémon tienen que: saber el top 10 de frecuencia de aparición de los Pokémon.
• Los Pokémon tienen distintos tipos y debilidades de combate. Estas características son importantes cuando un maestro Pokémon elige al Pokémon más adecuado para su batalla. Hay veces que tiene que elegir a los que tienen menos cantidad de debilidades y saber de que tipo son. Por ello, es importante para un maestro Pokémon poder ordenarlos por estas 2 características.
• Los Pokémon evolucionan y es importante para un maestro Pokémon saber cuántas y cuáles son las evoluciones que tienen antes y después.
• Los Pokémon se alimentan de caramelos y un maestro Pokémon necesita saber cuántos caramelos necesita un Pokémon para evolucionar.

3. Historias de usuario

• H1: Yo como jugador quiero ver una página de inicio.
• H2: Yo como jugador quiero ver un listado de pokemones para saber más de ellos.
• H3: Yo como jugador quiero ver la informacion del Pokémon.
• H4: Yo como jugador quiero una interfaz para visualizarla en diferentes disposotivos.
• H5: Yo como jugador de quiero tener la opción filtrar la búsqueda de pokemones.

4. Prototipos

Baja fidelidad

• vista Pc - desktop:

• vista dispositivos móviles:

Alta fidelidad

• Vista Pc:

• Vista para móvil:

5. Diseño final

• Finalizado el proceso y diseño de los prototipos se dessarrolla el diseño final en figma, link: https://www.figma.com/file/ldOWTWYSa7QH1KCEjSnWWo/DataLovers?node-id=0%3A1

6. Test de usabilidad

Durante el desarrollo del proyecto se recogieron varios feedback en los cuales encontramos las siguientes sugerencias, todas estas fueron tenidas en cuenta y se aplicaron a la mejora de la página:

• Responsive de la página: se observo que al ajustar a las diferentes medidas, el diseño perdia su forma y se desajustaba a estas medidas.
• Tipografía y colores: la letra era muy plana y no resaltaba en la interfaz; los colores fueron ajustados de manera acorde a la página.
• Tarjetas para los Pokemon: se ajusta el tamaño y el color de fondo, alineación, así como su contenido.

7. Objetivos de aprendizaje

HTML y CSS

• [X]uso de html semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• [X]uso de flexbox en css.

DOM y Web APIs

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• [X]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

• []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)
• 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 data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.
• UI: Es responsive.