Data Lovers Pokemon Go

Proceso de Diseño

Nuestro proceso de diseño fue parecido al de cipher, sólo que un poco más rápido, ya que teniamos algo de conocimiento. Seguimos los mismo pasos para lograr un diseño pensando en nuestros usuarios; pedimos feedback de nuestro prototipo de baja fidelidad y complementamos.

Después de tener el prototipo de baja fidelidad y tener un poco más claro lo que queriamos y como se veria, visitamos varias páginas relacionadas y notamos que varias de estas no tenían una interfaz amigable y eran confusas, así que tomamos ese descubrimiento como nuestra primera historia de usuario.

Pensamos que nuestra app soluciona los problemas de los maestros/entrenadores pokémon, pues nos muestra una tabla con los 151 pokemons de la región kanto con los elementos que ellos consideran importantes (número pokémon, nombre y una imágen). También mostramos por debilidades o tipos, esto les ayuda para conocer las fortalezas de sus pokemones y poder estudiar y predecir a sus contrincantes.

Consideramos que los usuarios para poder evolucionar a su pokemon necesitarian saber cuantos dulces se requieren, así que añadimos un apartado para consultar esa información y así evolucionarlos y avanzar de nivel.

Por último incluye un apartado para poder ver la especificaciones de los pokemons esto para conocer todo sobre su pokemon.

Liga mockup https://www.figma.com/proto/Dg6OYTUK625lLm6F7IlSmT/Pokemon?node-id=0%3A1&scaling=min-zoom

Historias de usuarios

Liga para gh pages

https://shari12.github.io/CDMX009-Data-Lovers/

UX

shari Dani

• [ ✓] [ ✓] 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.

HTML y CSS

shari Dani

• [ ✓] [ ✓] Entender y reconocer por qué es importante el HTML semántico.
• [ ✓] [ ✓] Identificar y entender tipos de selectores en CSS.
• [ ] [ ✓] Entender como funciona flexbox en CSS.
• [ ✓] [ ✓] Construir tu aplicación respetando el diseño planeado (maquetación).

DOM

shari Dani

• [✓ ] [✓ ] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
• [✓ ] [ ✓] Manejar eventos del DOM. (addEventListener)
• [✓ ] [ ✓] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)

Javascript

shari Dani

• [ ✓] [ ✓] Manipular arrays (filter | map | sort | reduce).
• [ ✓] [ ✓] Manipular objects (key | value).
• [ ✓] [ ✓] Entender el uso de condicionales (if-else | switch).
• [ ✓] [ ✓] Entender el uso de bucles (for | forEach).
• [ ] [ ] Entender la diferencia entre expression y statements.
• [ ✓] [ ✓] Utilizar funciones (parámetros | argumentos | valor de retorno).
• [ ] [ ] Entender la diferencia entre tipos de datos atómicos y estructurados.
• [ ✓] [ ✓] Utilizar ES Modules (import | export).

Pruebas Unitarias (testing)

shari Dani

• [ ✓] [ ✓]Testear funciones (funciones puras).

Git y GitHub

shari Dani

• [ ✓] [ ✓] Ejecutar comandos de git (add | commit | pull | status | push).
• [ ✓] [ ✓] Utilizar los repositorios de GitHub (clone | fork | gh-pages).
• [ ✓] [ ✓] Colaborar en Github (pull requests).

Buenas prácticas de desarrollo

shari Dani

• [ ✓] [ ✓] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
• [ ✓] [ ✓] Utilizar linter para seguir buenas prácticas (ESLINT).
• [ ✓] [ ✓] Organizar y dividir el código en módulos (Modularización).