dcoa/bog001-data-lovers

DUB DUB DATA is a web application about Rick and Morty serie where you can explore all the characters.

DUB DUB DATA

Definición del producto

DUB DUB DATA es un una aplicación web acerca a la serie de Rick and Morty a través de la cuál es posible explorar todos personajes y entender su trama llena de viajes entre universos.

Investigación de usuario

La aplicación va dirigida a personas entre los 15 y los 30 años que les interesan las series que les permiten aprender temas como viajes en el tiempo y el espacio, teoría de los multiversos, entre otros temas de ciencia y filosofía; y que al mismo tiempo tenga situaciones entretenidas llenas de humor negro, sarcasmo y referencias de la serie u otras que jueguen con la atención del usuario. Nuestros usuarios son personas a las que les recomiendan la serie y quieren tener presentes los personajes a medida que ven los capítulos y así no perder el hilo de la historia.

Los datos más relevantes para nuestro usuario son la imagen, el nombre, los episodios en los que aparece, la especie, el tipo, el origen y la ubicación del personaje dentro de los diferentes mundos. El usuario a parte de saber la descripción general (en una especie de tarjeta con la información relevante en ese orden) de cada personaje le interesa que se resalte de alguna forma los personajes principales.

Los usuarios visitaran la aplicación web en el momento en el que se le recomienda y a medida que ve la serie para recordar aquellos personajes olvidados o aclarar algún dato de cualquier personaje.

Historias de usuario

H.1 Yo como nuevo fan quiero ver toda la lista de los personajes de la serie para saber datos sobre ellos.

H.2 Yo como nuevo fan quiero ver que cuales son los personajes principales y ver una de reseña de la serie para familiarizarme con ella.

H.3 Yo como nuevo fan quiero filtrar por episodio los personajes para saber quienes salen en cada capitulo.

H.4 Yo como nuevo fan quiero poder ordenarlos de forma alfabética en orden ascendente y descendente y saber cuantos personajes hay en cada planeta para tener claridad de su estado actual.

H.5 Yo como usuario quiero ver toda la lista de personas, pero por bloques no todos a la vez.

Prototipo de baja fidelidad

Feedback del prototipo

A partir de la interacción con futuros usuarios y amantes de la serie se decidió implementar las recomendaciones de realizar una ventana modal donde se pudiese acceder a la tarjeta de cada personaje, además de hacer estas verticales en pantallas para móvil y dejarlas horizontales para tamaños más grandes. Se tuvo en cuenta además que el nombre del personaje estuviese sobre la imagen a la hora de mostrarse en la página principal.

En la parte de filtrado por episodios se sugirió realizar una referencia a la temporada a la cual hacia parte y no solo el número del episodio.

Prototipo de alta fidelidad

Desktop

Móvil

Herramientas de apoyo

• Figma - Prototipado
• The Rick and Morty API - API
• Sensacine - Descripción de la serie
• Pinterest - Imágenes
• Freepik - Imágenes
• Iconify - Iconos

Autores

• Daniela Ramírez Aristizabal DaniRami
• Diana Catalina Olarte dcoa

Objetivos de aprendizaje

El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.

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

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS.

DOM y Web APIs

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.

Testing

• Testeo unitario.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)