- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Consideraciones generales
- 4. Definición del producto
- 5. Organización del equipo
- 6. Historias de usuario
- 7. Diseño de la interfaz de usuario
- 8. Checklist para la aceptación del proyecto
- 9. Objetivos de aprendizaje
- 10. Consideraciones técnicas
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.
Este proyecto es parte del proceso de aprendizaje en el bootcamp de Laboratoria, este proyetco es el segundo realizado.
El objetivo principal de este proyecto fue aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.
Como entregable final se requirió una página web que permitiera visualizar la data, filtrarla, ordenarla y proporcionara un cálculo con ella.
- Este proyecto se resolvió en duplas.
- El rango de tiempo estimado para completar el proyecto fue de 3 a 4 Sprints y se completó en 4.
- El proyecto se entregó en GitHub con la interfaz desplegada en GitHub Pages.
Nuestro proyecto es una página dirigida a usuarios que son seguidores, fans o conocedores sobre la serie de Game of Thrones, de habla inglés.
Los principales objetivos de nuestros usuarios al utilizar nuestra página es recordar y obtener información sobre cada personaje de la serie, las casas principales de la serie, obtener información general de la serie y tener un sitio en el cual pueden vincularse a sitios oficiales sobre ésta.
Por ello, nuestra página presenta:
- Imágenes alusivas a la serie que facilitan obtener información de los personajes.
- Buscador de personajes por nombre, título o familia.
- Sección con todas las tarjetas de los personajes que contienen información detallada de cada uno.
- Opción a ordenar alfabéticamente y al reverso a los personajes, para facilitar la búsqueda.
- Opción de filtrar las tarjetas por las principales casas, para facilitar la búsqueda.
- Sección de tarjetas de las casas principales de la serie con sus árboles genealógicos.
- Sección de información general de la serie y detalles sobre las temporadas.
- Links oficiales a redes sociales, páginas oficiales y podcast.
Como herramienta de organización utilizamos Trello, en donde hicimos toda la planeación de trabajo de cada sprint que duró este proyecto (4):
Para las historias de usuario nos basamos principalmente en las necesidades compartidas por Laboratoria para los usuarios y las complementamos con los usuarios a los que consultamos o de los que recibimos feedback.
El prototipo de baja fidelidad fue elaborado en Canva.
El prototipo de alta fidelidad fue elaborado en Figma.
Durante el desarrollo de estre proyecto se hicieron tests de usabilidad con distintos usuarios los cuales nos brindaron feedback sobre el diseño de nuestra página, en donde se pudo corregir:
- Colocar un scroll en el slider de imágenes para facilitar su manipulación
- Hacer interactivas las tarjetas de personajes
- Hacer interactivas los botones de la página
- Poner audio a la página
- Agregar un fondo a la página
- Recibir un alert si no se busca nada o si se busca algo que no se encuentra en la datalist
- Agregar más información a la página sobre la serie y no sólo usar la data
Por todo lo anterior, su buscó hacer las mejoras en nuestra página, quedándonos como prototipo final lo siguiente:
Y ya implementado todo en nuestra página, lo siguiente:
- [✓] 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 Trello 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.
-
[✓] 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 y desarrollar un producto o servicio poniendo a las usuarias 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
La lógica del proyecto se implementó completamente en JavaScript (ES6), HTML y CSS. NO estuvo permitido usar librerías o frameworks, solo vanilla JavaScript.
El boilerplate proporcionado contenía 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
Página que se muestra al usuario. También indica qué scripts se usaron y se unió todo lo que se hizo.
Código para mostrar los datos en la pantalla (interacción con el DOM, creación de nodos, registro de manejadores de eventos).
Toda la funcionalidad que corresponde a obtener, procesar y manipular datos. Funciones puras
e independientes del DOM. Estas funciones son usadas desde el archivo src/main.js, al cargar la página, y cada vez que el usuario interactúa (click, filtrado, ordenado, ...).
En esta carpeta están los datos de las diferentes fuentes. Hay 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.
Pruebas unitarias de las funciones implementadas en el archivo data.js.