marianaolimpia / cdmx009-data-lovers

Data Lovers

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Consideraciones generales
• 5. Criterios de aceptación mínimos del proyecto
• 6. Parte adicional-opcional (extensión)
• 7. Consideraciones técnicas
• 8. Pistas, tips y lecturas complementarias

---

1. Preámbulo

Según Forbes, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes.

No obstante, los datos por sí mismos son de poca utilidad. Para que esas grandes cantidades de datos se conviertan en información fácil de leer para los usuarios, necesitamos entender, procesar y mostrar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.

En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte izquierda se puede construir (a la derecha) una interfaz amigable y comprensible para el usuario.

* Puedes ver el detalle de la data en este link y la interfaz construida en este link.

2. Resumen del proyecto

En este proyecto construirás una página web para visualizar un conjunto (set) de datos que se adecúe a lo que tu usuario necesita.

Como entregable final tendrás una página web que permita a los usuarios visualizar, filtrar, ordenar, etc..

Te proponemos una serie de datos de diferentes temáticas para que los explores y decidas con cuál te interesa trabajar. Cada set de datos viene con información básica sobre los datos y su estructura, y una lista de las necesidades de los usuarios que proviene de una investigación (research) hecha por el equipo de Laboratoria.

Una vez que elijas, diseña tu proyecto intentando ofrecerle la mejor experiencia posible para ayudarle a satisfacer sus necesidades.

Estos son datos que te proponemos:

• Indicadores de desarrollo del Banco Mundial de algunos países (Brasil, Chile, México y Perú). Estos datos incluyen indicadores demográficos, económicos y comerciales.
• Pokémon: En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, junto con sus respectivas estadísticas usadas en el juego Pokémon GO.
• Steam noticias: Lista noticias relacionadas a los videojuegos presentes en la plataforma de Steam.
• League of Legends - Challenger leaderboard: Este set de datos muestra la lista de jugadores en una liga del juego League of Legends (LoL), puedes revisar la documentación de su API en este link.
• Personas heridas por medio de transporte en EEUU. Este set nos muestra el número de personas heridas en accidentes de transporte, con data anual desde 1960 y categorizada por tipo de transporte (aire, barco, automóvil, moto, bicicleta, ...).
• Rick and Morty. Este set nos proporciona la lista de los personajes de la serie Rick and Morty. Puedes revisar la documentación de su API en este link.
• Pacientes en EEUU. Este set nos proporciona una lista de pacientes de EEUU. Puedes revisar la documentación de su API en este link.

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

Objetivos de Aprendizaje - Adonai

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

Objetivos de aprendizaje - Mariana Olimpia

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

4. Consideraciones generales

• Este proyecto se debe resolver en duplas.
• El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub Pages.
• Tiempo: toma como referencia 3 semanas.

4. Consideraciones generales

• Este proyecto se debe resolver en duplas.
• El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub Pages.
• Tiempo: toma como referencia 3 semanas.

5. Criterios de aceptación mínimos del proyecto

Los criterios que deberás considerar para saber si has completado este proyecto son:

• Prototipado de alta fidelidad terminado.
• Maquetado terminado.
• Filtrar la data.
• Mostrar la información al usuario.
• Permitir al usuario filtrar por palabra y por categoría.
• Que el diseño sea Responsive Web Design.
• Realizar pruebas unitarias.
• Completar READ.ME.

Definición del producto

Documenta brevemente tu trabajo en el archivo README.md de tu repositorio, contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve el problema (o problemas) que tiene tu usuario.

Nuestro proyecto se basó en el rediseño de la página interna dedicada a las noticias de la web de Steam, debido a que cuenta con una interfaz poco amigable. Por ello nuestro objetivo central fue diseñar una página capaz de mostrar las noticias principales más recientes, ofrecer un buscador por palabra para encontrar temas o títulos relacionados con un interés particular y una sección con categorías que permitiera acotar la búsqueda por temas frecuentes entre la comunidad de Steam.

Historias de usuario

Una vez que entiendas las necesidades de tus usuarios, escribe las Historias de Usuario que representen todo lo que el usuario necesita hacer/ver. Las Historias de Usuario deben ser el resultado de tu proceso de entendimiento de tus usuarios.

Asegúrate de incluir la definición de terminado (definition of done) y los Criterios de Aceptación para cada una.

En la medida de lo posible, termina de construir una historia de usuario antes de pasar a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación).

H.U.1 Como: Jugador o usuario general Quiero: Consultar las noticias de Steam. Para: Mirar el "panel de novedades", el buscador por palabra, el "menú de categorías" y el aside de "Últimas noticias" y "Lo más leído".

Criterios de Aceptación

• Contar con prototipo en Figma.
• Maquetación básica en HTML y CSS.
• (se pasó a H.U. 2) Que en la sección "Últimas noticias" se despliegue un menú con las siguientes tabs: 24 hrs, 1 semana y 1 mes.

Definición de Terminado

• El espacio del Panel de Novedades debe estar creado aunque sea con otra imágenes y sin funcionalidad.
• El espacio del Menú de Categorías debe estar creado aunque no cuenten con funcionalidad.
• Tener prototipo.
• Que esten los espacios con colores y letras me doy por satisfecha.

H.U.2 Como: Jugador Quiero: Interactuar con el Panel de Novedades. Para: Conocer las "4 noticias más relevantes del día".

Criterios de Aceptación

• Alimentar con información el Panel de Novedades.
• Contar con slide para sub novedades.
• Que en la sección "Últimas noticias" se despliegue un menú con las siguientes tabs: 24 hrs, 1 semana y 1 mes.

Definición de Terminado

• Terminar maquetado con HTML y CSS.
• Realizar función de filtrado para traer la información necesaria.
• Hacer funciones para cambio de pantallas.
• Añadir evento de mostrar noticias al click en Panel de Novedades y Aside.
• Maquetar pantalla para mostrar lista de noticias según la categoría seleccionada.

H.U.3 Como: Jugador Quiero: Utilizar el buscador por texto. Para: Encontrar una noticia por un título o una palabra.

Criterios de Aceptación

• Poder ingresar texto.
• Que despliegue una ventana con los titulares y noticias relacionadas con el texto ingresado.

Definición de Terminado

• Que el usuario pueda buscar una noticia a través del buscador de texto.
• Tener Code Review.
• Testear con usuarios.
• Aplicar los cambios sugeridos.
• Comprobar su usabilidad.
• Estar almacenado en el repositorio.

H.U.4 Como: Jugador. Quiero: Utilizar el Menú de Categorías. Para: Elegir una categoría y sólo mirar las noticias relacionadas con ella.

Criterios de Aceptación

• Que se pueda seleccionar una categoría.
• Que muestre la información de acuerdo a la categoría seleccionada.
• Que pueda elegir una noticia para ver.
• Que pueda ver la noticia electa.

Definición de Terminado

• Que el usuario pueda elegir una categoría desde el menú, después una noticia y leerla.
• Tener Code Review.
• Testear con usuarios.
• Comprobar su usabilidad.
• Estar almacenado en el repositorio.

H.U.5 Como: Jugador. Quiero: Ver las últimas noticias y/o las más leídas. Para: Estar informado al respecto.

Criterios de Aceptación

• Que el menú de las "Últimas noticias" y "Las más leídas" sea en tabs.
• Que cada tab despliegue las noticias correspondientes a su tab.
• Que muestre máximo 5 por tab.
• Que en la tab de "Las más leídas" se despliegue un sub menú con las siguientes tabs: 24hrs, 1 semana y Por fecha.

Definición de Terminado

• Que cumpla con los criterios de aceptación. (la selección de noticia por hrs, semana y fecha es opcional).
• Tener Code Review.
• Tener Code Review.
• Aplicar los cambios sugeridos.
• Comprobarlos usabilidad.

H.U.6 Como: Jugador. Quiero: Elegir una noticia, ya sea en el Panel de Novedades o en el aside de "Últimas noticias". Para: Leerla.

Criterios de Aceptación

• Si da click en el Panel de Novedades o en el aside de "Últimas noticias" debe abrir la noticia electa.

Definición de Terminado

• Que el usuario pueda elegir y visualizar la noticia electa, ya sea en Panel de Novedades o en el aside.
• Tener Code Review.
• Testear con usuarios.
• Aplicar los cambios sugeridos.
• Comprobar su usabilidad.
• Estar almacenado en el repositorio.

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu solución usando papel y lápiz. Te recomendamos tomar fotos de todas las iteraciones que hagas, que las subas a tu repositorio y las menciones en tu README.md.

Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - User Interface). Para eso debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma que es una herramienta que funciona en el navegador y, además, puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, PowerPoint, Keynote, etc. Recuerda utilizar la identidad gráfica correspondiente a cada set de datos que elijas.

El diseño debe representar el ideal de tu solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu diseño debe seguir los fundamentos de visual design.

Testeos de usabilidad

Durante el reto deberás hacer tests de usabilidad con distintos usuarios, y en base a los resultados, deberás iterar tus diseños. Cuéntanos qué problemas de usabilidad detectaste a través de los tests y cómo los mejoraste en tu propuesta final.

• El problema es que no lo testeamos debido a que nuestro diseño se basó en el diseño de Steam y de otra página llamada Hispan TV. Por lo cual nos confiamos pensando que ambas plataformas son utilizadas todo el tiempo y son altamente funcionales.

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

Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. No tienes tiempo ilimitado para trabajar, así es que deberás priorizar.

Como mínimo, tu implementación debe:

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.

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones que tenga tu código.

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. Parte adicional-opcional (extensión)

Si terminaste con todo lo anterior y te queda tiempo, intenta explorar y completar parte o todo de lo siguiente:

• 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 de pruebas unitarias.

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.

No se debe utilizar la pseudo-variable this.

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

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

directory: 9 file: 16

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é script se usará y unir todo lo que hemos hecho.

Encontrarás 1 etiqueta inicial, la cual si deseas puedes borrar y empezar de cero:

 <div id="root"></div>

src/main.js

Acá escribirás todo el código que tenga que ver con la interacción del DOM (seleccionar, actualizar y manipular elementos del DOM y eventos). Es decir, en este archivo deberás invocar a tus funciones exportadas en el boilerplate, según sea necesario para realizar operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), ....

En este archivo encontrarás una serie de sentencias import comentadas. Para cargar las diferentes fuentes de datos tendrás que descomentar estas sentencias. Cada una de estas sentencias importará un objeto, el cual ya se encuentra exportado en el boilerplate. Este objeto contiene la data correspondiente a esa fuente de datos.

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

 /**
 import LoL from './data/lol/lol.js'
 */

La línea quedaría así:

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

Y ahora tendríamos el objeto LoL disponible en nuestro archivo (src/main.js).

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.

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.

• Y así sucesivamente, según tu proyecto en particular.

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 exportadas en el boilerplate, para después ser 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 importaremos como un objeto al archivo main.js, 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.

8. Pistas, tips y lecturas complementarias

Primeros pasos

Antes de empezar a escribir código, debes definir qué deberá hacer el producto en base al conocimiento que puedas obtener de tu usuario. Estas preguntas te pueden ayudar:

• ¿Quiénes son los principales usuarios de producto?
• ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
• ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
• ¿Cuándo utilizan o utilizarían el producto?
• Toda tu investigación previa debe tener como resultado todas las Historias de Usuario de tu proyecto.
• No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más pistas en la guía de organización para el proyecto.

Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

1. Una de las integrantes del equipo debe realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
2. ⬇️ Clona tu fork a tu computadora (copia local).
3. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
4. Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
5. Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
6. A codear se ha dicho! 🚀

---

Contenido de referencia

Diseño de experiencia de usuario (User Experience Design)

• Investigación con usuarios / entrevistas
• Principios de diseño visual

Desarrollo Front-end

• Unidad de testing en curso de JavaScript en LMS.
• Unidad de arreglos en curso de JavaScript en LMS.
• Unidad de objetos en curso de JavaScript en LMS.
• Unidad de funciones en curso de JavaScript en LMS.
• Unidad de DOM en curso de Browser JavaScript en LMS.
• Array en MDN
• Array.sort en MDN
• Array.map en MDN
• Array.filter en MDN
• Array.reduce en MDN
• Array.forEach en MDN
• Object.keys en MDN
• Object.entries en MDN
• Fetch API en MDN
• json.org
• expressions-vs-statements
• expresión vs sentencia
• datos atomicos vs datos estructurados
• Modulos: Export
• Modulos: Import

Herramientas

• Git
• GitHub
• GitHub Pages
• Node.js
• Jest

Organización del Trabajo

• Historias de Usuario. Ojo que Cris no diferencia Definición de terminado de Criterios de Aceptación y nosotros sí lo haremos. Más detalles en la guía.
• Cómo dividir H.U.
• Guía para Data Lovers

---