Fan Ghibli es un proyecto desarrollado para los fanáticos de Studio Ghibli, aquellos que tienen, en su corazón, un lugar muy especial para éstas animaciones.
En nuestro logotipo quisimos reflejar la conexión tan fuerte que ésta casa productora ha podido desarrollar con su público por lo que incluimos el kanji japonés que tiene como significado la palabra amor y nombramos al proyecto Fan Ghibli.
Studio Ghibli no ha lanzado tantas películas, pero su influencia ha sido considerable. Varios de éstos fanáticos usualmente copian cosas para su trabajo en Pixar o DreamWorks.. es por ello que en éste proyecto podrán encontrar todas las animaciones de ésta casa productora con información relevante como: el puntaje de cada película, sus directores, productores, conocer a detalle sobre los personajes, locaciones y vehículos de cada producción.
- Primera historia de usuario Yo como: Fanática de Estudio Ghibli. Quiero: Poder ver una lista de sus animaciones. Para: saber cuántas animaciones tiene Estudio Ghibli.
Criterios de aceptación: Realizar HTML para visualizar la página, Dar diseño a la página con CSS, Manipular DOM para llamar a la data y visualizar la lista de animaciones en la página.
La definición de terminado para ésta historia (definition of done) es la visualización en de todas las animaciones.
- Segunda historia de usuario Yo como: Fanática de Estudio Ghibli. Quiero: Poder encontrar una lista de categorías Para: conocer más información sobre mi película favorita.
Criterios de aceptación: En HTML utilizar la etiqueta Select para tener una desplegable para los filtros, Dar estilo con CSS a las etiquetas, Manipular DOM para filtrar los criterios que queremos de la base de datos e imprimirlos en la pantalla, Por último, realizar los test de cada funcion.
La definición de terminado para esta historia (definition of done) es poder encontrar animaciones según su director, productor, entre otros, a través de botones.
- Tercera historia de usuario Yo como: Fanática de Estudio Ghibli. Quiero: Poder encontrar información sobre las animaciones. Para: Conocer detalles de mis animaciones favoritas.
Criterios de aceptación: Seleccionar la descripción de cada pelicula para hacer modales, Manipularlo con DOM para imprimir en la página y dar diseño con CSS y realizar los test de cada funcion.
La definición de terminado para esta historia (definition of done) es poder encontrar una información más detallada de las animaciones a través de una ventana emergente.
- Cuarta historia de usuario Yo como: Fanática de Estudio Ghibli. Quiero: Comparar porcentaje por animaciones de mi director favorito y verificar el puntaje de cada animación por orden ascendente. Para: Recomendar las mejores animaciones a mis amigos.
Criterios de aceptación: Encontrar la información que deseamos mostrar, manipularlo a través del DOM, mostrar la información en una gráfica estadística y dar diseño con CSS.
La definición de terminado para esta historia (definition of done) es poder comparar el porcentaje de las animaciones de Studio Ghibli que ha dirigido cada uno de los directores.
Eliana: Durante éstas cuatro semanas me he enfocado en mejorar la planificación, el trabajo en equipo y los horarios para poder cumplir con mis objetivos de aprendizaje.
Ximena: Mi plan de acción estuvo centrado en mejorar mi trabajo en equipo, aprender más sobre Javascript y prácticas constantes con códigos nuevos.
- Cambiar el video por uno que tenga las mayores animaciones posible.
- Sacar de la lista de navegación director y productor para colocarlos solo como filtros.
- Incorporar input de buscador para animaciones y locaciones.
- Tener un botón para subir si el usuario está en la parte baja de la página.
- [✔] 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 el
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.