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.
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.
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.
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.
- Figma - Prototipado
- The Rick and Morty API - API
- Sensacine - Descripción de la serie
- Pinterest - Imágenes
- Freepik - Imágenes
- Iconify - Iconos
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.
- 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.
- 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.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- 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.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- 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)