Les presentamos el segundo proyecto de Laboratoria / Colaboradoras: Daniela Nieto y Lina Alvarado.
En este proyecto construirás una página web para visualizar un conjunto (set) de datos que se adecĂşe a lo que descubras que tu usuario necesita. Como entregable final tendrás una página web que permita visualizar la data, filtrarla, ordenarla y hacer algĂşn cálculo agregado. Con cálculo agregado nos referimos a distintos cálculos que puedes hacer con la data para mostrar informaciĂłn aĂşn más relevante para los usuarios (promedio, el valor máximo o mĂnimo, etc). Esta vez te proponemos una serie de datos de diferentes temáticas para que explores y decidas con quĂ© temática te interesa trabajar. Hemos elegido especĂficamente estos sets de datos porque creemos que se adecĂşan bien a esta etapa de tu aprendizaje. Una vez que definas tu área de interĂ©s, buscar entender quiĂ©n es tu usuario y quĂ© necesita saber o ver exactamente; luego podrás construir la interfaz que le ayude a interactuar y entender mejor esos datos.
Elegimos la data de Juegos OlĂmpicos y empezamos a entender cuáles eran las necesidades de nuestros usuarios InvestigaciĂłn de Usuarios.
Una vez definimos esto, construimos las historias de usuarios e hicimos lluvia de idea de como querĂamos que se viera en pantalla Idea de diseño inicial, lluvia de ideas.
“yo como usuario visitante quiero visualizar en la pantalla todos los participantes de los juegos olĂmpicos”
Criterios de AceptaciĂłn:
- Visualizar en la pantalla los participantes
DefiniciĂłn de terminado:
- Que la funciĂłn permita mostrar la informaciĂłn
- Que tenga estilo segĂşn lo acordado en el prototipo
- Que esté en el GitHub.
“yo como usuario visitante quiero filtrar a los atletas por paĂs, gĂ©nero, deporte y medallas para poder visualizar los atletas.”
Criterios de AceptaciĂłn:
- Que el usuario pueda seleccionar paĂs/gĂ©nero..
- Que salga la informaciĂłn filtrada en pantalla.
DefiniciĂłn de terminado:
- Que el usuario pueda interactuar
- Que la información esté en la pantalla.
- Que el diseño sea responsive.
- Que la funciĂłn filtrar pase el test unitario.
- Que esté en el GitHub.
“Yo como usuario visitante quiero ordenar los nombres de los atletas de la a-z o de la z-a para encontrar más rápido al atleta”
Criterios de AceptaciĂłn:
- Que el usuario seleccione como quiere ordenar.
- Que el usuario visualicé la información ordenada.
DefiniciĂłn de terminado:
- Que el usuario pueda interactuar
- Que la información esté en la pantalla.
- Que el diseño sea responsive.
- Que la funciĂłn ordenar pase el test unitario.
- Que esté en el GitHub.
Hubo un cambio en el diseño, se decidiĂł poner una imagen de fondo en vez de la imagen de las mascotas de los juegos olĂmpicos, para darle un aspecto visual más profesional.
Hubo un cambio en el diseño, se decidió resaltar los selectores de filtros de la lista de los atletas.
“Yo como usuario visitante quiero ver cálculos de porcentaje por paĂs vs gĂ©nero y paĂs vs medallero para conocer el porcentaje de mujeres/hombres que participaron. AsĂ mismo, el porcentaje por medalleria.
Criterios de AceptaciĂłn:
- Que el usuario pueda seleccionar el paĂs.
- Que seleccione la variable que quiere calcular.
- Que se visualice el resultado.
DefiniciĂłn de terminado:
- Que el usuario pueda interactuar
- Que el resultado se muestre en la pantalla.
- Que el diseño sea responsive.
- Que la funciĂłn calcular pase el test unitario.
- Que esté en el GitHub.
Y se agregĂł la secciĂłn donde se visualizarĂan los cálculos.
Se hizo un diseño final para la pagina web
Empezamos con movile frist, utilizamos media query para adaptar el diseño a las pantallas. Link a Figma
- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptaciĂłn mĂnimos del proyecto
- 6. Hacker edition
- 7. Consideraciones técnicas
- 8. Pistas, tips y lecturas complementarias
- 9. Checklist
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 y procesar 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 una interfaz amigable y entendible por el usuario al lado derecho.
En este proyecto construirás una página web para visualizar un conjunto (set) de datos que se adecúe a lo que descubras que tu usuario necesita.
Como entregable final tendrás una página web que permita visualizar la data, filtrarla, ordenarla y hacer algĂşn cálculo agregado. Con cálculo agregado nos referimos a distintos cálculos que puedes hacer con la data para mostrar informaciĂłn aĂşn más relevante para los usuarios (promedio, el valor máximo o mĂnimo, etc).
Esta vez te proponemos una serie de datos de diferentes temáticas para que explores y decidas con quĂ© temática te interesa trabajar. Hemos elegido especĂficamente estos sets de datos porque creemos que se adecĂşan bien a esta etapa de tu aprendizaje.
Una vez que definas tu área de interés, buscar entender quién es tu usuario y qué necesita saber o ver exactamente; luego podrás construir la interfaz que le ayude a interactuar y entender mejor esos datos.
Estos son datos que te proponemos:
-
PokĂ©mon: En este set encontrarás una lista con los 251 PokĂ©mon de la regiĂłn de Kanto y Johto, junto con sus respectivas estadĂsticas usadas en el juego PokĂ©mon GO.
-
League of Legends - Challenger leaderboard: Este set de datos muestra la lista de campeones en una liga del juego League of Legends (LoL).
-
Rick and Morty. Este set nos proporciona la lista de los personajes de la serie Rick and Morty. API Rick and Morty.
-
Juegos OlĂmpicos de RĂo de Janeiro. Este set nos proporciona la lista de los atletas que ganaron medallas en las olĂmpiadas de RĂo de Janeiro.
-
Studio Ghibli. En este set encontrarás una lista de las animaciones y sus personajes del Studio Ghibli.
-
Harry Potter. En este set encontrarás una lista de los personajes,libros pociones y hechizos de toda la saga de Harry Potter.
El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.
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.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagaciĂłn, delegaciĂłn)
-
Manipulación dinámica del DOM
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Arrays (arreglos)
-
Objetos (key, value)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lĂłgica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
MĂłdulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
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
-
GitHub: ColaboraciĂłn en Github (branches | forks | pull requests | code review | tags)
- Diseñar un producto o servicio poniendo a la usuaria en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
- 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 para completarlo: Toma como referencia 4 semanas.
Los criterios para considerar que has completado este proyecto son:
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.
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 investigaciĂłn o research 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 una historia de usuario antes de pasar a la siguiente (Cumple con DefiniciĂłn de Terminado + Criterios de AceptaciĂłn).
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
.
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.
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.
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.
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. Tu tiempo de hacking es escaso, asà que deberás priorizar
Como mĂnimo, tu implementaciĂłn debe:
- Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
- Permitir al usuario interactuar para obtener la infomaciĂłn que necesita.
- Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
- Que la interfaz siga los fundamentos de visual design.
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.
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 carpetasrc/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
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
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.
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
.
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Ăłnfilter
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Ăłnsort
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Ăłncompute
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, ...).
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).
Tendrás también que completar las pruebas unitarias de las funciones
implementadas en el archivo data.js
.
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:
- Una de las integrantes del equipo debe realizar un :forkand_knife:
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. - :arrowdown: Clona tu _fork a tu computadora (copia local).
- 📦 Instala las dependencias del proyecto con el comando
npm install
. Esto asume que has instalado Node.js (que incluye npm). - Si todo ha ido bien, deberĂas poder ejecutar las 🚥
pruebas unitarias (unit tests) con el comando
npm test
. - Para ver la interfaz de tu programa en el navegador, usa el comando
npm start
para arrancar el servidor web y dirĂgete ahttp://localhost:5000
en tu navegador. - A codear se ha dicho! 🚀
- InvestigaciĂłn con usuarios / entrevistas
- Principios de diseño visual
- 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 atĂłmicos vs datos estructurados
- Modulos: Export
- Modulos: Import
- 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
- 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.