- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Definición de producto
- 4. Historias de usuario
- 5. Diseño de la interfaz
- 6. Implemento de la interfaz
- 7. Test unitarios
- 8. EXTRAS
- 9. Checklist
Según Forbes, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes.
No obstante, los datos por sí mismos son de poca utilidad. Para que esas grandes cantidades de datos se conviertan en información fácil de leer para los usuarios, necesitamos entender y procesar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.
En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte izquierda se puede construir una interfaz amigable y entendible por el usuario al lado derecho.
En este proyecto se diseño y construyo una interfaz web donde se puede visualizar y manipular data del Studio Ghibli. La data de peliculas del estudio es filtrada por medio de la funcion filterData, ordenada por medio de sortData y la funcion calculate muestra el calculo de personajes por especie.
Data Usada:
- Studio Ghibli. En este set encontrarás una lista de las animaciones y sus personajes del Studio Ghibli.
Los admiradores de Studio Ghibli, que desean ver información relacionada a sus películas.
Revisar de la forma más didáctica posible, la información del Studio Ghibli.
En base a los hallazgos de la investigación rápida se decidió que estos son los datos más relevantes para ver en la interfaz:
- Películas: ¿Cuántas y cuáles son?
- Título.
- Descripción.
- Fecha de lanzamiento.
- Director y productor.
- Personajes: Especies.
- Especies que hay en cada animación.
- Directores y productores.
- En qué películas participaron y cuantas fueron.
Se mostrará la data mediante:
- Navegador-sortData: ordenar de manera ascendente o descendente por año, director, productor y título.
- Buscador-filterData: filtra la data en base a palabras clave.
- En la parte principal de las películas, se mostrarán en el orden que aparecen en la data y tendan las siguientes caracteristicas: nombre de la película, fecha de lanzamiento, productor y director.
Cada vez que deseen ver la información mencionada anteriormente.
Como: fanático del Studio Ghibli
Quiero: Botón para acceder a la página
Para: Ver la coleccion de peliculas animadas
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Se muestra información general del Studio Ghibli.
- El usuario puede ingresar su nombre en el campo de texto.
- El botón permite ir a la siguiente vista.
- Se muestra el mensaje de bienvenida.
COMO: fanático del Studio Ghibli
Quiero: Display de películas.
PARA: Poder acceder a la información de las animaciones
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Se muestran las películas en orden que están en la data.
- Se muestra el póster de la película, el título, el director, el productor y año de lanzamiento.
COMO: fanático del Studio Ghibli
Quiero: Un navegador donde se muestre las data por categorías.
PARA: Poder acceder a la información de las animaciones.
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Navegador asociado a la función sortData.
- Navegador que permite mostrar películas(A-Z), director(A-Z), año de publicación (descendente) y productor(A-Z).
- Buscador e icono de búsqueda que permite encontrar películas, director, año de publicación y productor.
COMO: fanático del Studio Ghibli
Quiero: Un buscador que permite filtrar datos en base a palabras clave.
PARA: Poder acceder a la información de las animaciones.
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Vista del buscador con un icono de búsqueda
- El buscador que permite encontrar películas por titulo, director, año de publicación y productor.
- No es case sensitive, filtra aunque no este escrito exactamente como en la data (minúsculas y mayusculas).
COMO: fanático del Studio Ghibli
Quiero: Area del navegador para personajes.
PARA: Poder acceder a la clasificacion de personajes por especies.
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Área del navegador para el número de personajes por especies, asociada a la función calculate.
- Muestra el número de Humans, Totoros, Witches,...
COMO: fanático del Studio Ghibli
Quiero: dar click sobre las portadas.
PARA: Ver la información de las películas mostradas/encontradas.
Boceto —-> Figma —-> HTML —-> JS —-> CSS
Criterios de Aceptación:
- Se muestra la información de la película seleccionada.
- Vista de poster, titulo, año de publicacion, director, productor y descripcion.
- Flecha para volver a la historia anterior.
Boceto en Figma
- 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 link a Zeplin en
README.md. - Incluye la
Plan de acción(Objetivos de Aprendizaje priorizados) de cada programadora en elREADME.mdo otro documento. - 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.