PokeFan

Descripción y objetivo del proyecto

Este proyecto se desarrolló para que los fanáticos de la serie animada y el juego Pokémon go, puedan buscar información sobre los distintos tipos de pokémones de la región kanto, poder filtrar por tipo, ordenar alfabeticamente y por número.

Investigación

OBJETIVO:El objetivo principal es que el usuario encuentre la información necesaria para conocer e identificar los pokemones. TARGET: nuestra aplicación está dirigida a hombres y mujeres de entre 18 a 29 años de edad, fanáticos de “Pokémon”.

Proceso del Proyecto

Historias de usuario:

1. El usuario ingresará su nombre en la página de inicio y al dar click entrara en la página principal(contenido)
2. El usuario podrá visualizar todos los pokemones de la primera generación.
3. El usuario podrá ordenar los pokemones, * A-Z *Z-A * 1-151 *151-1
4. El usuario podrá filtrar por tipo de pokémon

Prototipo diseño interfaz

Herramienta usada Figma

Test de Usabilidad

Los testeos de usabilidad se realizarón con compañeras del mismo bootcamp, nos dieron feedback acerca de contraste y jerarquia en el diseño de prototipo, con familiares se realizó investigación para saber si la aplicación es intuitiva y amigable.

Objetivos alcanzados del proyecto:

• 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

• 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

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

Javascript

• 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)

• Testear funciones (funciones puras).

Git y GitHub

• 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

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