- 1. Resumen del proyecto
- 2. Objetivos de aprendizaje
- 3. Consideraciones generales
- 4. Historias de usuario
- 5. Hacker edition
- 6. Consideraciones técnicas
- 7. Checklist
En este proyecto se construyó una página web para visualizar un conjunto (set) de datos adecuado a lo que el usuario necesita.
Como entregable final se tiene una página web que permite visualizar la data, filtrarla, ordenarla y compararla.
Los datos seleccionados fueron:
- League of Legends - Challenger leaderboard: Este set de datos muestra la lista de campeones en una liga del juego League of Legends (LoL).
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 la aplicación pensando en 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
- Proyecto resuelto en duplas.
- El proyecto se encuentra en GitHub (commit/push) y la interfaz está desplegada usando GitHub Pages.
- Tiempo para completarlo: 4 semanas.
Para el desarrollo del proyecto se definieron 04 historias de usuarios:
La Interfaz de Usuario (UI por sus siglas en inglés - User Interface) se desarrolló con la herramienta de diseño visual Figma.
Durante el reto realizamos actividades de Feedback con nuestras compañeras y coachs, lo que nos llevó a iterar nuestros diseños. Por ejemplo, a través del feedback, encontramos que los gráficos de mayor tamaño tienen una mejor presentación en formato vertical, por lo que se adecuó el gráfico de ranking a éste formato.
-
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. Responsive (Tablet):
Responsive (Smartphone):
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.
Features/características extras:
- Consumo dinámico de la data de forma dinámica, cargando un archivo JSON por medio de
fetch. - Se agregaron visualizaciones gráficas con la librería de Google Charts.
- 100% Coverage
La lógica del proyecto está implementada completamente en JavaScript (ES6), HTML y CSS.
Página principal de League of Legends
- 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 Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
en
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.