Definición del producto

Decidimos utilizar la API de Rick and Morty, es una página web creada para fans del programa donde pueden encontrar más información sobre los personajes de la serie, como lugar de origen, ubicación, episodios dónde aparecen, etc.

Prototipo de baja fidelidad

Testeos de usabilidad

Después de consultar con nuestras compañeras y con el Coach Bliss, nos dimos cuenta que no eran necesarias tantas ventanas y era mejor reducirlo a una ventana de inicio y otra de resultados, por lo que lo modificamos.

Prototipo de alta fidelidad

Historia de usuario 1

Yo como fan de Rick & Morty quiero ver a cada personaje por episodio para conocerlos a todos

Definición de terminado: El usuario puede filtrar por episodio y ver a todos los personajes de un episodio específico.

Criterios de Aceptación

Historia de usuario 2

Yo como fan y miembro de la comunidad LGBTTI quiero saber el género de los personajes para conocer más sobre la diversidad de género en la serie

Definición de terminado: El usuario puede filtrar por género y ver a los personajes que coinciden con su búsqueda.

Historia de usuario 3

Yo como fan quiero conocer cuántas y cuales son las especies de la serie para saber la diversidad de especies que hay

Definición de terminado: El usuario puede filtrar por especie y ver a los personajes que coinciden con su búsqueda.

Historia de usuario 4

Yo como fan quiero ver a los personajes que estan vivos y muertos para poder cuantificarlos y discutir con mism amigos.

Definición de terminado: El usuario puede filtrar por estatus y ver a los personajes que coinciden con su búsqueda.

Prototipos: https://invis.io/F3WGPXBWMC4#/409778858_S1

3. Objetivos de aprendizaje

El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data.

Revisa la lista y reflexiona sobre los objetivos que conseguiste en el proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual y de equipo.

Objetivos de ANia Cuapio

UX

• Diseñar la aplicación pensando 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.

HTML y CSS

• Entender y reconocer por qué es importante el HTML semántico.
• [/] Identificar y entender tipos de selectores en CSS.
• [/] Entender como funciona flexbox en CSS.
• [/] Construir tu aplicación respetando el diseño planeado (maquetación).

DOM

• [/] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
• [/] Manejar eventos del DOM. (addEventListener)
• [/] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)

Javascript

• [/] Manipular arrays (filter | map | sort | reduce).
• Manipular objects (key | value).
• [/] Entender el uso de condicionales (if-else | switch).
• [/] Entender el uso de bucles (for | forEach).
• [/] Entender la diferencia entre expression y statements.
• [/] Utilizar funciones (parámetros | argumentos | valor de retorno).
• [/] Entender la diferencia entre tipos de datos atómicos y estructurados.
• [/] Utilizar ES Modules (import | export).

Pruebas Unitarias (testing)

• Testear funciones (funciones puras).

Git y GitHub

• [/] Ejecutar comandos de git (add | commit | pull | status | push).
• [/] Utilizar los repositorios de GitHub (clone | fork | gh-pages).
• [/] Colaborar en Github (pull requests).

Buenas prácticas de desarrollo

• [/] Organizar y dividir el código en módulos (Modularización).
• [/] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
• [/] Utilizar linter para seguir buenas prácticas (ESLINT).

Objetivos de ANA RODEA

UX

• [/] Diseñar la aplicación pensando 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.

HTML y CSS

• Entender y reconocer por qué es importante el HTML semántico.
• [/] Identificar y entender tipos de selectores en CSS.
• Entender como funciona flexbox en CSS.
• [/] Construir tu aplicación respetando el diseño planeado (maquetación).

DOM

• [/] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
• [/] Manejar eventos del DOM. (addEventListener)
• [/] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)

Javascript

• Manipular arrays (filter | map | sort | reduce).
• Manipular objects (key | value).
• [/] Entender el uso de condicionales (if-else | switch).
• [/] Entender el uso de bucles (for | forEach).
• Entender la diferencia entre expression y statements.
• Utilizar funciones (parámetros | argumentos | valor de retorno).
• Entender la diferencia entre tipos de datos atómicos y estructurados.
• [/] Utilizar ES Modules (import | export).

Pruebas Unitarias (testing)

• Testear funciones (funciones puras).

Git y GitHub

• [/] Ejecutar comandos de git (add | commit | pull | status | push).
• [/] Utilizar los repositorios de GitHub (clone | fork | gh-pages).
• [/] Colaborar en Github (pull requests).

Buenas prácticas de desarrollo

• [/] Organizar y dividir el código en módulos (Modularización).
• [/] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
• [/] Utilizar linter para seguir buenas prácticas (ESLINT).

Testeos de usabilidad

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. No tienes tiempo ilimitado para trabajar, así es que deberás priorizar.

Como mínimo, tu implementación debe:

1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
2. Permitir al usuario interactuar para obtener la infomación que necesita.
3. Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
4. Que la interfaz siga los fundamentos de visual design.