DATA LOVERS - HARRY POTTER

• 1. Resumen del proyecto
• 2. Definicion del Producto
• 3. Objetivos de aprendizaje
• 4. Historias de Usuario
• 5. Prototipo de baja fidelidad
• 6. Prototipo de alta fidelidad
• 7. Testeos de usabilidad
• 8. Checklist

1. Resumen del proyecto

En este proyecto desarrollamos una página web, basado en una data completa de los personajes de la saga de Harry Potter: para visualizar un conjunto (set) de datos que se adecúe a cada una de las necesidades del usuario. Como entregable final tendremos una página web que permita visualizar la data, filtrarla, ordenarla alfabeticamente.

2. Definicion del Producto

El objetivo principal de Harry Potter-DataLovers es ayudar a los nuevos usarios a conocer la información básica de cada personaje principal. Consta de filtros dinámicos y fáciles de entender y manejar, dividido en categorias como:

• Todos.
• Mujeres
• Hombres
• Casas (Griffindor, Slytherin, Hufflepuf, Ravenclaw)
• ordenar alfabeticamente A-Z Y/ Z-A (Esto con el fin de que el usuario tenga la opción de encontrar un personaje, sin tener que pasar por todos los que no esta buscando).

3. Objetivos de aprendizaje

3. Objetivos de aprendizaje

Dentro de nuestra estrategia de planificacion se tuvieron en cuenta los siguientes objetivos a desarrollar:

HTML

Uso de HTML semántico

CSS

• 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

JavaScript

• 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)

Control de Versiones (Git y GitHub)

• 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: Despliegue con GitHub Pages

• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

user-centricity

• Diseñar un producto o servicio poniendo a la usuaria en el centro

product-design

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

research

• Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

4. Historias de usuario

4.1 historia 1 - visualizar

• Criterios de Aceptación:

Visualizar en la pantalla los participantes

• Definición de terminado:

Que la función permita mostrar la información Que tenga estilo según lo acordado en el prototipo

4.2 historia 2 - ordenar

• Criterios de Aceptación:

Que el usuario seleccione como quiere ordenar. Que el usuario visualicé la información ordenada.

• Definición de terminado:

Que el usuario pueda interactuar Que la información esté en la pantalla. Que el diseño sea responsive. Que la función ordenar pase el test unitario.

4.3 historia 3 - filtar

• Criterios de Aceptación:

Que el usuario pueda seleccionar casas/género.. Que salga la información filtrada en pantalla.

• Definición de terminado:

Que el usuario pueda interactuar Que la información esté en la pantalla. Que el diseño sea responsive. Que la función filtrar pase el test unitario.

5. prototipo de baja fidelidad

6. Prototipo de alta fidelidad

https://www.figma.com/file/3FVWwXMJBc0lchzjoQnGjc/Untitled?node-id=5%3A53

7. Testeos de usabilidad

• como retroalimentacion a nuestro proyecto se realizron algunos cambios para mejoras de nuestra plataforma de diseno visual.

8. Checklist

• 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 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.