Guías visuales: http://pubdocs.worldbank.org/en/754991511203317714/WBG-VIG-20171114.pdf

Data Lovers

Índice

• 1. Resúmen
• 2. Objetivos de aprendizaje
• 3. Proceso

---

1. Resúmen

★Crear una propuesta de web-app (responsive) para filtrar, buscar y comparar información sobre los Índices de Desarrollo Humano (IDH) proporcionados por el Banco Mundial.

★Graficar la información para poder visualizarla de manera sencilla.

★Crear un diseño sencillo e intuitivo para encontrar la información que se busca rapidamente.

★Hacer comparaciones a través de tres parámetros: -País -Indicador -Año

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

3. Proceso

**Prototipo de baja fidelidad: **

Prototipo de alta fidelidad:

Historias de usuario

Se crearon tres historias de usuario que se desarrollaron a través de tres sprints:

1. El usuario podrá desplegar y escoger a través de un , la lista de países y el indicador deseado. Se desplegará la información de los años y porcentaje en una tabla. . 2. El usuario podrá seleccionar un país, un indicador y distintos años a través de ventanas modales. Posteriormente se desplegará la información sólo de los años elegidos en una tabla HTML. El usuario podrá seleccionar un país, un indicador y distintos años a través de ventanas modales. Además podrá elegir entre desplegar la información en una tabla o gráfica. El usuario podrá seleccionar un país, un indicador y distintos años a través de ventanas modales. Además podrá elegir entre desplegar la información en una tabla o gráfica. 4. :)