Data Lovers - Olympics Data

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Definición del producto
• 4. Historias de usarios
• 5. Diseño de la interfaz de Usuario
• 6. Objetivos de aprendizajes
• 7. Checklist

1. Preámbulo

Este proyecto es el desarrollo de una página web que nos permitirá visualizar una serie de datos olímpicos de Rio 2016, pensando en la información que puede llegar a ser relevante para cada usuario que quiera conocer más acerca de los atletas que compitieron durante esa temporada.

2. Resumen del proyecto

Olympics Data es un proyecto pensado en mostrar los datos relevantes de cada atleta durante los juegos olimpicos de Rio 2016. Ha sido un proyecto desarrollado en dupla y cuya duración ha sido de 5 sprint (5 semanas). Durante este tiempo se trabajó minuciosamente la planificación y se llevó a cabo una serie de historias de usuario, especificando la experiencia de cada usuario al navegar en la interfaz, para ellos se diseñó pensando en la cómodidad del usuario, se realizaron los test de usabilidad para poder llegar a la meta propuesta, a través de prototipos de baja y alta fidelidad.

3. Definicion del Producto

Olympics Data es una web diseñada para usuarios que muestran interés en estadísticas y datos reevantes acerca de los atletas de las olimpiadas celebradas en Rio de Janeiro 2016.

Cuenta con dos secciones importantes:

1. Conoce mas de los atletas: en donde se puede visualizar la imagen de cada atleta, su nombre, deporte, equipo, medalla, edad y género.
2. Medallero: una sección donde se puede visualizar cada una de las medallas, diferenciando por su tipo (oro,plata y bronce), así como la totalidad de medallas por países.

Adicionalmente hay una sección en la página principal en la cual se puede conocer un poco más acerca de la historia de los juegos olimpicos en Rio 2016, así como una serie de imágenes relevantes de esta temporada de las olimpiadas en América Latina.

4. Historias de Usuarios.

• Historia #1: El Usuario interesado en conocer acerca de los ultimos juegos olimpicos Brasil 2016, ingresa a nuestra pagina web donde puede seleccionar por categoria lo que le interesa conocer acerca de los juegos. Categorias desplegadas:

• Conoce más de los atletas
• Medallero Asi mismo cuenta con una reseña historica acerca de los juegos olimpicos en Rio de janeiro y las victorias mas impotantes de este pais en distintos juegos, asi mismo cuenta con un carrusel con las imagenes mas destacadas de Rio 2016.

Adicionalmente, justo cuando el usuario tenga 2 minutos de visita en la pagina se desplegara un pop up para invitarlo a suscribirse en nuestra pagina.

Yo como usuario quiero ver una página con información acerca de los juegos olimpicos Rio 2016, para conocer datos básicos (información de los atletas, historia de los juegos olimpicos durante está temporada, ver imágenes populares y tener la opción de suscribirme).

Criterios de Aceptación

• Hay un interfaz de presentación de la tematica deportiva.
• Hay una intefaz con diferentes opciones de búsqueda de acuerdo a la categoría preferida.
• Hay una breve historia para conecer mas acerca del pais anfitrion.
• Hay un carrusel con imagenes destacadas en rio 2016.
• Hay una opcion de suscripcion.
• Hay links para visitar nuestras redes sociales.

Definicion de Terminado

• El usuario se encuentra con una interfaz responsive.
• Se pasan los test usabilidad.

• Historia #2: Nuestro usuario tiene la opción de seleccionar el primer filtro (Conoce mas por atleta) El usuario a traves de un click abre una nueva pantalla donde se despliega la siguiente información: -Foto, nombre, deporte, equipo, edad, medalla y género -Se filtraran por nombre -Se filtraran por deporte -Se filtraran por país

• Se filtraran por género Yo como usuario quiero ver una página con información acerca de los atletas, para conocer datos básicos acerca de ellos ( nombre, género, deporte, medallas, país y edad), así como la posibilidad de poder filtrarlos pos deporte, país, género y nombre del atleta.

Criterios de Aceptación

• Hay una interfaz que muestra a los distintos atletas (Foto, nombre, edad, pais y medalla)

Definicion de Terminado

• Intefaz responsive.
• El usuario tiene distintas maneras de filtrar los datos relevantes de los atletas.

• Historia #3: Nuestro usuario tiene la opción de seleccionar el primer filtro (Conoce mas por atleta) El usuario a través de un click abre una nueva pantalla donde se despliega la siguiente información:

• Una foto alusiva a los juegos olímpicos
• Esa misma tarjeta con la foto al colocar el mouse sobre la tarjeta se abrirá y encontrará información acerca de los atletas (nombre, equipo, medalla, sexo, edad). Yo como usuario quiero ver una página con fotos de todos los atletas ganadores de medallas durante la temporada de Rio 2016 de los juegos olimpicos, para conocer datos básicos acerca de ellos( nombre, género, deporte, medallas, país y edad)

Criterios de Aceptación

• Hay una sección para mostrar información importante acerca de los atletas.

Definicion de Terminado

• La página es responsive.
• Se logra ver la información de los atletas.

• Historia #4: El usuario desea a través de filtros buscar por nombre, país, género y deporte. El usuario desea ver el numero de medallas por país.

Yo como usuario quiero buscar a los atletas por nombre, país, género y deporte, así como conocer los tipos de medallas que cada país ha ganado para poder estar informado acerca de los países que son mas ganadores de medallas.

Criterios de Aceptación

• Se tienen 4 filtros (Nombre, país, genero, deporte).
• Se despliegan país, genero y deporte de los select.
• En el filtro nombre se ingresa el nombre del atleta o letra relacionada y se muestran las coincidencias.
• Se le permite al usuario volver a la pagina principal.
• el usuario puede acceder a la opción medallero para conocer las medallas por país.
• En una tabla aparecen totalizadas las medallas por país.
• Se le permite al usuario volver del medallero a las pagina principal.

Definicion de Terminado

• La pagina es responsive.
• Los filtros se aplican correctamente.
• Los botones permiten regresar a la pagina principal.
• Aparecen totalizadas el numero de medallas por país.
• El cada tarjeta se visualiza la información de cada atleta (Equipo, nombre, genero, país, disciplina).

5. Diseño de la interfaz de Usuario

Para la planificación de a interfaz se procedió a realizar un prototipo de baja y de alta fidelidad.

Prototipo de Baja Fidelidad

Se muestran prototipos de baja fidelidad, con el cual se realizaron pruebas de usabilidad y al recibir el feedback de los mismos, se mejoraron los bocetos para corregir todos esos errores.

• Primera Iteración:
• Segunda Iteración:

Prototipo de Alta Fidelidad

A continuacion los prototipos de alta fidelidad realizados con la herramienta Figma donde se aplicaron los principios de diseño visual para nuestra propuesta final.

Prototipo Final

6. Objetivos de aprendizaje

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

HTML y CSS

• [Uso de HTML semántico.]
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS.

DOM y Web APIs

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules ([import]|[export]
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos primitivos y no primitivos.

Testing

• [Testeo unitario.]

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)

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.

7. Checklist

• Usa VanillaJS.
• No hace uso de this.
• 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.

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.

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:

.
├── 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
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.spec.js

directory: 6 file: 17

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/pokemon/pokemon.js';

La línea quedaría así:

import data from './data/pokemon/pokemon.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.

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. 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 primitivos y datos no primitivos
• 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