Data Lovers / Countries

/ Colaboradoras: Daniela Estefania Castellano Molina y Ana Karen Morales Ramos.

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Investigación Previa
• 5. Historias de Usuario
• 6. Hacker edition
• 7. Consideraciones técnicas
• 8. Pistas, tips y lecturas complementarias
• 9. Checklist

---

1. Preámbulo

Este es nuestro segundo proyecto para el Bootcamp de Frontend Development en Laboratoria, se nos solicitó cubrir los objetivos de aprendizaje para crear una página web que filtrara, ordenara y mostrara un cálculo agregado acerca de la data que escogimos, en este caso fue la de Countries.

Enlace a Zeplin

Enlace a Zeplin

2. Resumen del proyecto

En este proyecto construímos una página web para visualizar un conjunto (set) de datos que se adecúaron a lo que descubrimos que nuestro usuario necesita.

Como entregable final tenemos una página web que permite visualizar la data, filtrarla, ordenarla y hacer algún cálculo agregado. Con cálculo agregado nos referimos a distintos cálculos que se pueden hacer con la data para mostrar información aún más relevante para los usuarios, en éste caso utilizamos el promedio.

Hemos elegido específicamente éste set de datos porque creemos que se adecuó bien a esta etapa de nuestro aprendizaje.

Countries: En este set encontramos una lista con los países del mundo, junto con la respectiva información de cada país.

El objetivo principal de este proyecto fue aprender a diseñar y construir una interfaz web donde se pudiera visualizar y manipular data, entendiendo lo que el usuario necesita.

3. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Diferenciar entre tipos de datos primitivos y no primitivos

• Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Objetos (key, value)

  Links

  • Objetos en JavaScript

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

• Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• Git: Instalación y configuración

• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

• GitHub: Despliegue con GitHub Pages

  Links

  • Sitio oficial de GitHub Pages

• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

Investigación

• Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

4. Investigación previa

1.- Elegimos la data de Countries y comenzamos con una lluvia de ideas para entender como podíamos hacer que nuestra interfaz de usuario mostrará la información más relevante.

2.- Realizamos un prototipo de baja fidelidad en Figma y lo mostramos a tres usuarios, quienes nos hicieron pensar en contestar las siguientes preguntas:

¿Quiénes son los principales usuarios de nuestra página web?

Estudiantes que estén interesados en encontrar información concreta acerca de los países del mundo.

¿Cuáles son los principales datos que te gustaría encontrar en nuestra interface?

Marca los que te interesaría.

-Encontrar información relevante sobre los países del mundo como son: Lenguaje, Husos Horarios, Área, Población, Fronteras,otros datos relevantes en cada uno de los países:

Escríbelos.

¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?

• Observar la bandera que caracteriza a cada país, junto con su información relevante.

• Poder observar países por continente y saber qué lenguajes se hablan.

¿Cuándo utilizarían nuestra página web?

• Realmente para fines de estudio o de curiosidad momentánea.

Después de sumar las opiniones de nuestros usuarios, realizamos un nuevo prototipo de alta fidelidad en Figma:

5. Historias de usuario

Historias de usuario

Una vez que entendimos las necesidades de tus usuarios, escribimos las Historias de Usuario que representen todo lo que el usuario necesita hacer/ver.

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Prototipo de alta fidelidad

El diseño representa el ideal de nuestra solución. Es todo lo que implementamos a lo largo de la investigación. Además, consideramos que nuestro diseño sigue los fundamentos de visual design.

Testeos de usabilidad

Durante el reto hicimos tests de usabilidad con distintos usuarios, y en base a los resultados, iteramos nuestros diseños. Dentro de los problemas de usabilidad que detectamos a través de los tests fueron los siguientes:

-Yo como usuario me di cuenta que los filtros funcionaban solo en un orden, lo cual me dificultaba el uso de la página

¿Cómo resolvimos?

-Modificamos el código, realizando un anidado de los filtros que teníamos de forma individual en un principio.

-Yo como usuario me di cuenta que el país del que quise conocer sus fronteras no me mostraba su tarjeta de información

¿Cómo resolvimos?

-Nos dimos cuenta que al existir países que no contaban con ciertas características que nuestro código tomaba en cuenta, nos generaba un error y la tarjeta no se mostraba, en ese caso completamos la información necesaria en la data.

-Yo como usuario me di cuenta que podía ordenar las banderas de los países pero no entendía a que se referían con ascendente y descendente

¿Cómo resolvimos?

-Colocamos dos opciones de selección que hacen referencia a ordenamiento de la A a la Z y ordenamiento de la Z a la A.

-Yo como usuario me di cuenta que al poner un nombre en el buscador general desde la predicción de mi teclado en el celular, no me mostraba la información, pero en la computadora si

¿Cómo resolvimos?

-Colocamos un método que nos estaba faltando en nuestra función para que desde el celular y con la opción de autocompletado eliminara los espacios generados en blanco y por tanto no mostrara resultados.

-Yo como usuario no entendía porque la página no me mostraba las banderas en ciertas ocasiones, supuse que era el orden del filtro

¿Cómo resolvimos?

-Resolvimos cambiando el código a un filtro anidado y colocando el siguiente mensaje en pantalla para las ocasiones en que el filtro anidado no mostrará resultados porque no existían esas posibilidades. Mensaje: Oops!, there are no countries with the options you selected, try others.

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Como mínimo, nuestra implementación debía cumplir estos requisitos:

• 1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
• 2. Permitir al usuario interactuar para obtener la infomación que necesita.
• 3. Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
• 4. Que la interfaz siga los fundamentos de visual design.

*Nosotras decidimos mostrar la información de la base de datos por medio de cards que contenían la bandera de cada país y decidimos implementar mostrar la información relevante por medio de un modal. *Consideramos que la página es intuitiva y el usuario puede fácilmente buscar la información que necesita. *Finalmente nos preocupamos por hacer un diseño responsive de nuestra página, modificando ciertas reglas del css para la vista desde un teléfono celular.

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas.

Tus pruebas unitarias deben dar una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo src/data.js que contenga tus funciones y está detallado en la sección de Consideraciones técnicas.

6. Hacker edition

Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.

Features/características extra sugeridas:

• En lugar de consumir la data estática brindada en este repositorio, puedes consumir la data de forma dinámica, cargando un archivo JSON por medio de fetch. La carpeta src/data contiene una versión .js y una .json de de cada set datos.
• Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para ello te recomendamos explorar librerías de gráficas como Chart.js o Google Charts.
• 100% Coverage

7. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts); ver Parte opcional más arriba.

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── EXTRA.md
├── README.md
├── package.json
├── src
|  ├── data (según con qué data trabajes)
|  |  ├── lol
|  |  |  ├── lol.js
|  |  |  ├── lol.json
|  |  |  └── README.md
|  |  ├── pokemon
|  |  |  ├── pokemon.js
|  |  |  ├── pokemon.json
|  |  |  └── README.md
|  |  └── rickandmorty
|  |  |  ├── rickandmorty.js
|  |  |  ├── rickandmorty.json
|  |  |  └── README.md
|  |  └── athletes
|  |  |  ├── athletes.js
|  |  |  ├── athletes.json
|  |  |  └── README.md
|  |  └── ghibli
|  |  |  ├── ghibli.js
|  |  |  ├── ghibli.json
|  |  |  └── README.md
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.spec.js

directory: 7 file: 20

src/index.html

Como en el proyecto anterior, existe un archivo index.html. Como ya sabes, acá va la página que se mostrará al usuario. También nos sirve para indicar qué scripts se usarán y unir todo lo que hemos hecho.

src/main.js

Recomendamos usar src/main.js para todo tu código que tenga que ver con mostrar los datos en la pantalla. Con esto nos referimos básicamente a la interacción con el DOM. Operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), ....

Esta no es la única forma de dividir tu código, puedes usar más archivos y carpetas, siempre y cuando la estructura sea clara para tus compañeras.

En este archivo encontrarás una serie de imports comentados. Para cargar las diferentes fuentes de datos tendrás que descomentar la línea correspondiente.

Por ejemplo, si "descomentamos" la siguiente línea:

// import data from './data/lol/lol.js';

La línea quedaría así:

import data from './data/lol/lol.js';

Y ahora tendríamos la variable data disponible en el script src/main.js.

src/data.js

El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.

Te recomendamos que este archivo contenga toda la funcionalidad que corresponda a obtener, procesar y manipular datos (tus funciones). Por ejemplo:

• filterData(data, condition): esta función filter o filtrar recibiría la data, y nos retornaría aquellos datos que sí cumplan con la condición.

• sortData(data, sortBy, sortOrder): esta función sort u ordenar recibe tres parámetros. El primer parámetro, data, nos entrega los datos. El segundo parámetro, sortBy, nos dice con respecto a cuál de los campos de la data se quiere ordenar. El tercer parámetro, sortOrder, indica si se quiere ordenar de manera ascendente o descendente.

• computeStats(data): la función compute o calcular, nos permitirá hacer cálculos estadísticos básicos para ser mostrados de acuerdo a la data proporcionada.

Estos nombres de funciones y de parámetros son solamente referenciales, lo que decidas depende de tu propia implementación.

Estas funciones deben ser puras e independientes del DOM. Estas funciones serán después usadas desde el archivo src/main.js, al cargar la página, y cada vez que el usuario interactúe (click, filtrado, ordenado, ...).

src/data

En esta carpeta están los datos de las diferentes fuentes. Encontrarás una carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la extensión .js y otro .json. Ambos archivos contienen la misma data; la diferencia es que el .js lo usaremos a través de una etiqueta <script>, mientras que el .json está ahí para opcionalmente cargar la data de forma asíncrona con fetch() (ver sección de Parte Opcional).

test/data.spec.js

Tendrás también que completar las pruebas unitarias de las funciones implementadas en el archivo data.js.

9. Checklist

• Usa VanillaJS.
• 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 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.