- 1.Objetivo del proyecto
- 2.Proceso de diseño/problemática y solución
- 3.Investigación UX
- Historias de usuario
- 4.Prototipo de baja fidelidad
- 5.Prototipo de alta fidelidad
- 6.Testeos de usabilidad
- 7.Feedback
- 8.Prototipo final
- 9.Pruebas unitarias
- 10.Objetivos de aprendizaje
Proporcionar información a los usuarios sobre los personajes que han aparecido a lo largo de la serie, se busca brindar información individual y datos generales de cada uno de estos; con la finalidad de apoyar a los creadores de contenido al desarrollo de videos, posts, etc.
Proceso de diseño
Iniciamos con el desarrollo de ideas y planteándonos la problemática, leímos referente a SCRUM para poder utilizar este marco de trabajo, igual investigamos referente al diseño de las historias de usuario. Comenzamos con la tabla SCRUM en la plataforma de Trello con dos historias de usuario y realizamos bocetos a mano, dimos inicio al wireframe y solicitamos feedback a potenciales usuarios.
Se solicitó feedback a dos compañeras.
Al haber terminado los prototipos y el muckup dimos inicio al codeo, realizamos maquetación concentrándonos en el responsive, usando flexbox, modal box, section entre otras alternativas.
Se dio inicio a codeo con JS a partir del sprint 2, donde nos enfocamos principalmente en mostrar la data y cubrir las historias de usuario con sus respectivos criterios de aceptación.
Resolución de problemas El usuario podrá visualizar en su totalidad a los personajes que aparecieron en las cuatro temporadas de Rick and Morty, filtrará los datos, los ordenará y podrá tomar información para su uso en videos referentes a la serie, adquirir mayor conocimiento respecto al tema o por ocio.
¿Quiénes son los principales usuarios de producto? Mujeres y hombres jóvenes de 18 a 29 años de edad. El programa va enfocado a mayores de edad o generación millennial. Información adquirida de: (https://www.imdb.com/title/tt2861424/ratings)
¿Cuáles son los objetivos de estos usuarios en relación con el producto? Desde la búsqueda de información referente a todos los personajes que han aparecido a lo largo de la serie, para la creación de más contenido multimedia acorde a la temática del programa; desde el desarrollo de videos con teorías, datos estadísticos, spoilers o curiosidades de personajes, episodios o la linea del tiempo de la serie.
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? Imágenes de los personajes, filtros para los datos, la información básica de los personajes.
¿Cuándo utilizan o utilizarían el producto? Al momento de desarrollar más contenido del programa, antes del inicio de alguna temporada.
- El usuario visualizará la información con una imagen para diferenciar a los personajes. Terminado al dia 10 de marzo 2020.
- El usuario filtrará la data bajo sus propios parámetros para facilitar su búsqueda.
- Se debe dar click en el parámetro indicado dentro del menú y sus submenús, desde el filtro que desea indicar o el orden de los datos, estos se visualizarán conforme al ID o alfabéticamente solo con el nombre del personaje.
Wireframe: En un futuro poder descargar la información, anexar caja para comentarios, poner colores llamativos. Hacer llamativo el scroll de los personajes (se le hizo pesado imaginar que ahí estaban todos así nomás), colores neón, brillantes, un mensaje chistoso si no cumple la edad para entrar. El espacio donde irá un video puede quedar en segundo plano de prioridad, interfaz debe ser más dinámica, verificar como se va a ordenar o filtrar. Adriana nos apoyó con el arreglo de la maqueta para que los datos no se ocultaran.
Tus pruebas unitarias deben dar una cobertura del 70% de statements
(sentencias), functions (funciones), lines (líneas), y branches
(ramas) del archivo src/data.js que contenga tus funciones y está detallado
en la sección de Consideraciones técnicas.
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.
- 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.
- Entender y reconocer por qué es importante el HTML semántico.
- Identificar y entender tipos de selectores en CSS.
- Entender como funciona
flexboxen CSS. - Construir tu aplicación respetando el diseño planeado (maquetación).
- Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
- Manejar eventos del DOM. (addEventListener)
- Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
- 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).
- Testear funciones (funciones puras).
- Ejecutar comandos de git (
add|commit|pull|status|push). - Utilizar los repositorios de GitHub (
clone|fork| gh-pages). - Colaborar en Github (pull requests).
- 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).
- 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.
- Entender y reconocer por qué es importante el HTML semántico.
- Identificar y entender tipos de selectores en CSS.
- Entender como funciona
flexboxen CSS. - Construir tu aplicación respetando el diseño planeado (maquetación).
- Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
- Manejar eventos del DOM. (addEventListener)
- Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
- 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).
- Testear funciones (funciones puras).
- Ejecutar comandos de git (
add|commit|pull|status|push). - Utilizar los repositorios de GitHub (
clone|fork| gh-pages). - Colaborar en Github (pull requests).
- 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).
- Este proyecto se debe resolver en duplas.
- El proyecto será entregado subiendo tu código a GitHub (
commit/push) y la interfaz será desplegada usando GitHub Pages. - Tiempo: toma como referencia 3 semanas.
- Unidad de testing en curso de JavaScript en LMS.
- Unidad de arreglos en curso de JavaScript en LMS.
- Unidad de objetos en curso de JavaScript en LMS.
- Unidad de funciones en curso de JavaScript en LMS.
- Unidad de DOM en curso de Browser JavaScript en LMS.
- Array en MDN
- Array.sort en MDN
- Array.map en MDN
- Array.filter en MDN
- Array.reduce en MDN
- Array.forEach en MDN
- Object.keys en MDN
- Object.entries en MDN
- Fetch API en MDN
- json.org
- expressions-vs-statements
- expresión vs sentencia
- datos atomicos vs datos estructurados
- Modulos: Export
- Modulos: Import
Proyecto elaborado por Mara Mulato y Andrea Aguilar. :)