Puedes ver el proyecto finalizado aquí
- 1. Nuestro Proyecto
- 2. Historias de Usuario
- 3. Diseño de Interfaz de Usuario
- 4. Test de Usabilidad
- 5. Objetivos de Aprendizaje
- 6. Proyecto finalizado
Este segundo proyecto perteneciente a la cohort DEV009, tenía como objetivo el construir una página web con cierta data para que los usuarios pudieran visualizarla.
En nuestro caso, escogimos Rick and Morty para esta data, por lo que nos enfocamos en usuarios que observaran esta serie.
En base a ellos, y con ayuda de una encuesta, trabajamos nuestras Historias de Usuario para así crear una página web útil, y además, responsive.
Luego de realizar la encuesta correspondiente, analizamos los resultados para así llegar a cuatro historias de usuario:
"Yo como usuario, quiero visualizar los datos de los personajes de Rick y Morty, para tener un orden de la serie"
"Yo como usuario, quiero filtrar los datos de los personajes de Rick y Morty, para visualizar los datos en específico que se desee consultar"
"Yo como usuario, quiero ordenar los datos de los personajes de Rick y Morty, para obtener la información rápidamente."
"Yo como usuario, quiero saber, a través de un porcentaje, como se divide los personajes del universo de la serie"
Al tener las cuatro historias de Usuario empezamos con el prototipo de baja fidelidad:
Al tener esto, empezamos a iterar las distintas opciones para que nuestro proyecto se fuera encaminando a lo que habíamos diseñado
Vista completa
Vista desktop
Vista Android
Puedes ver nuestro Figma aquí
Al principio, decidimos hacer una prueba de testeo con nuestro prototipo de baja, entendiendo si la cantidad de botones que esperabamos agregar eran simplemente demasiado.
Cuando le hicimos los test de usabilidad con el prototipo de Alta Fidelidad tuvimos varios comentarios, el más destacado:
- Al desplegar un select, los option que no seleccionabamos quedaban muy oscuros a comparación del resto.
Esto lo volvimos a comprobar al realizar nuestro test en el deploy, donde ajustamos las tonalidades del option para que así se pudiese leer mucho mejor sin necesidad de estar seleccionado.
- 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)
- Git
- GitHub
- GitHub Pages
- Node.js
- Jest
Vista final
Test Unitarios
