data-lovers v1.0.0

POKEDEX-CODE

Índice

• 1. Resumen del proyecto
• 2. Objetivo de la página
• 3. Historias de usuario
• 4. Prototipo de baja fidelidad
• 5. Prototipo de alta fidelidad
• 6. Feedback
• 7. Hacker edition
• 8. Objetivos de aprendizaje
• 9. Checklist

1. Resumen del proyecto

En este proyecto Pokedex-Code podras visualizar por medio de Cards los primeros 151 Pokemones de la región de Kanto y Johto con sus respectivas características usadas en el juego Pokemon-GO. En esta página web podras visualizar los Pokemones, filtrarlos por tipo (veneno, agua, fuego, lucha, roca, entre otros), ordenarlos de forma ascendente y descendente, además de visualizar datos como promedios y gráficas.

Demo del Proyecto https://oriananohemi.github.io/BOG001-data-lovers/

2. Objetivo de la página

Es una página web enfocada en un usuario que quiera conocer acerca de los diferentes Pokemones que existen y sus caracteristicas. Es una página fácil de usar, intuitiva y entendible para el usuario.

3. Historias de usuario

Historia 1 -Usuario: Jugador de Pokemon Go; -Necesita: Visualizar los Pokemones disponibles en el juego; -Para: Poder saber los pokemones que tiene su pokedex;

Historia 2 -Usuario: Jugador de Pokemon Go; -Necesita: Filtrar los pokemones por tipo; -Para: Poder ganar combates;

Historia 3 -Usuario: Jugador de Pokemon Go; -Necesita: Ordenar los pokemones; -Para: Poder visualizar los diferentes pokemones;

Historia 4 -Usuario: Jugador de Pokemon Go; -Necesita: Visualizar promedios de altura y peso; -Para: Obtener datos estadisticos;

Historia 5 -Usuario: Jugador de Pokemon Go; -Necesita: Visualizar las cantidades de pokemones por tipo; -Para: Saber las cantidades de pokemones que tiene por tipo;

4. Prototipo de baja fidelidad

5. Prototipo de alta fidelidad

El prototipo de alta fidelidad se realizo en Figma

Link Pototipo En Figma https://www.figma.com/file/hY1jmIMkONC7RzPzyUpz4P/Untitled?node-id=0%3A1

6. Feedback

Entre las mejoras recibidas en el feedback, se pedia que en el cambio de pagina donde se visualizaban los pokemones, al presionar los botones anterior o siguiente no fuera necesario hacer Scroll para visualizar los primeros pokemones cargados en la página sino que lo realizára de forma automatica.

7. Hacker Edition

1. La data se consumio de forma dinámica, cargando un archivo JSON por medio de fetch.

2. Se implemento la libreria Chart.js para visualizar por medio de una gráfica tipo Pie la cantidad de pokemones por tipo.

3. Los resultados obtenidos de testing con Jest son:

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

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