Data Lovers

Índice

• 1. Resumen del proyecto
• 2. Historias de Usuario
• 3. Prototipado en papel
• 4. Feedback
• 5. Prototipo de Alta Fidelidad
• 6. Imagen Final Del Proyecto
• 7. Objetivos de aprendizaje

---

1. Resumen del proyecto

El proyecto lo basamos para aquellas personas que quieren saber sobre sus pokemones favoritos y son fanáticos de la serie, tomando en cuenta el buscar por filtros como tipo de pokémon, Pokémon por abecedario, Pokémon por nombre y Todos los Pokémones.

2. Historias de Usuario:

• Se hicieron dos historias de Usuario y en base a ello se trabajo en el diseño:

Primer Historia de usuario

En la historia del primer Usuario tomamos en cuenta a niños por ello se penso en la idea de poner todos los Pokémones en la pagina principal del proyecto, sin tener que interactuar tanto.

Segunda Historia de usuario

En la historia del segundo Usuario se penso en todos aquellos fans de pokémon lo que requeria pensar en filtrar pokemones de diferentes maneras para darle una mayor satisfaccion al usuario mediante la interacción de la página.

3. Prototipado en papel

• En base a las historias de Usuario se comenzo a hacer prototipos de baja fidelidad

Prototipo de baja fidelidad

4. Feedback

• Iteramos con las compañeras dandonos su punto de vista para poder mejorar la idea visual de nuestra página, por lo que de acuerdo a las iteraciónes se complemento el proyecto con botones para ordenar alfabeticamente y un botón de regreso, teniendo como resultado los prototipos de alta fidelidad.

5. Prototipo de Alta Fidelidad

6. Imagen Final Del Proyecto

7. Objetivos de aprendizaje

El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data.

Revisa la lista y reflexiona sobre los objetivos que conseguiste en el proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual y de equipo.

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.

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