- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Contenido de referencia
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.
-
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.
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:
Para este proyecto se decidió usar la data de Pokémon, debido a las muchas posibilidades que teníamos. Para definir el producto final se contestó a las siguientes preguntas y con base en eso, realizamos nuestros primeros bocetos e Historias de usuario:
- ¿Quiénes son los principales usuarios de producto? Jugadores de Pokémon Go! que estén interesados en conocer las características básicas de ataque y defensa de cada Pokémon.
- ¿Cuáles son los objetivos de estos usuarios en relación con el producto? Que el usuario sea capaz de encontrar de forma sencilla la información básica de su Pokémon favorito.
- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? Datos básicos como nombre, imagen y tipo, así cono algunas estadísticas básicas y fortalezas y debilidades.
- ¿Cuándo utilizan o utilizarían el producto? Encontrarán en la página principal cada uno de los 251 Pokémon, podrán pulsar a cualquiera de las tarjetas y se desplegará una ventana con su información básica. En la cabecera encontrarán la sección de ordenado, filtrado y búsqueda para que puedan manejar la información como gusten.
Con la información conseguida de las preguntas anteriores se definieron las siguientes historias de Usuario:
- Yo como usuario quiero poder visualizar la lista completa de Pokémon (nombre, imagen y tipo) en la página principal.
- 1.1. Criterios de aceptación
- 1.1.1. El usuario va a poder visualizar cada uno de los Pokémon en la página de inicio.
- 1.1.2. La información básica de cada Pokémon (nombre, número, imagen y tipo) se visualizará en forma de tarjetas por toda la página.
- 1.2. Definición de terminado
- 1.2.1. La página tendrá una estructura básica en HTML.
- 1.2.2. La página tendrá un estilo básico en CSS.
- 1.2.3. Las tarjetas se formarán con el modelo de caja Box Model y su distribución se hará por medio de Flexbox.
- 1.2.4. Se cargará la información de cada Pokémon por medio de JS.
- Yo como usuario quiero poder ordenar el listado de los Pokemón en la pantalla para poder elegir uno.
- 2.1. Criterios de aceptación
- 2.1.1. El usuario va a poder visualizar un desplegable en la cabecera de la página.
- 2.1.2. El usuario podrá elegir una opción entre orden alfabético y orden numérico, ascendente y descendente para poder ordenar la lista.
- 2.2. Definición de terminado
- 2.2.1. Se creará una entrada con todas las opciones en la cabecera de la página.
- 2.2.2. Tendrá un estilo básico en CSS.
- 2.2.3. Tendrá una función de ordenado con JS.
- Yo como usuario quiero poder filtrar el listado de los Pokemón en la pantalla para poder elegir uno.
- 3.1. Criterios de aceptación
- 3.1.1. El usuario va a poder visualizar un desplegable en la cabecera de la página.
- 3.1.2. El usuario podrá elegir una opción entre cada tipo de Pokémon para poder filtrar la lista.
- 3.2. Definición de terminado
- 3.2.1. Se creará una entrada con todas las opciones en la cabecera de la página.
- 3.2.2. Tendrá un estilo básico en CSS.
- 3.2.3. Tendrá una función de ordenado con JS.
- Yo como usuario quiero poder buscar un Pokémon específico.
- 4.1. Criterios de aceptación
- 4.1.1. El usuario va a poder visualizar un cuadro de texto en la cabecera de la página.
- 4.1.2. El usuario podrá ingresar un nombre de un Pokémon para visualizarlo en la página principal.
- 4.2. Definición de terminado
- 4.2.1. Se creará una entrada de texto para la búsqueda.
- 4.2.2. Tendrá un estilo básico en CSS.
- 4.2.3. Tendrá una función de ordenado con JS.
- Yo como usuario quiero poder visualizar la información básica de cada Pokemon en una ventana de la página principal.
- 5.1. Criterios de aceptación
- 5.1.1. El usuario va a poder dar click a la tarjeta de cada Pokémon.
- 5.1.2. El usuario visualizar una ventana con la información básica de cada Pokémon.
- 5.1.2. El usuario visualizar en la ventana gráficas con ataque y defensa de cada Pokémon, así como su descripción, fortalezas y debilidades.
- 5.2. Definición de terminado
- 5.2.1. Se creará una ventana modal de forma dinámica en JS.
- 5.2.2. Tendrá un estilo básico en CSS.
- 5.2.3. Tendrá un botón de cierre.
- 5.2.4. Se mostrará información como número, nombre, tipo, descripción, fortalezas y debilidades de cada Pokémon.
- 5.2.5. Se creará una gráfica que contenga sus puntajes de ataque, defensa y stamina por cada Pokémon.
Comenzamos con dos pantallas mostrando cada Pokémon en lista. Gracias a la retroalimentación de posibles usuarios, el diseño se cambió por el mostrado en las dos siguientes imágenes:
Después de eso, trabajamos en los prototipos de alta fidelidad. Nuestra intención siempre fue la facilidad para que el usuario pueda encontrar la información que necesita de forma rápida, por lo que optamos por una interfaz limpia con los colores llamativos sin sobresaturar la página y este fue el resultado final:
A pesar de que se trabajó en otras pantallas y en un diseño para móvil, al final optamos por tener las dos imágenes mostradas en nuestra pantalla de inicio.
El resto del proyecto puede verse por el siguiente link de Figma.
El proyecto fue desplegado por medio de Github Pages a través de este link de Pokedex Go!.
- 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