- 1. Definición del producto
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Criterios de aceptación mínimos del proyecto
- 6. Diseño de la Interfaz de Usuario
- 7. Implementación de la Interfaz de Usuario (HTML/CSS/JS)
Para este proyecto de Data Lovers se eligió como temática Studio Ghibli pensando en los usuarios de estas animaciones, en donde se diseña una página web que muestra información relevante conforme al interés de los usuarios.
Studio Ghibli permite que sus usuarios visualicen de manera clara y sencilla una breve introducción de su trayectoria, el promedio que han recibido sus animaciones, también muestra en forma de tarjetas cada una de las animaciones con su descripción, en donde el usuario puede ordenar las animaciones por el titulo de forma ascendente y descendente, además de filtrar las animaciones por las más populares o las más vistas por los usuarios.
El objetivo principal de este proyecto es que aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.
- 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 para completarlo: Toma como referencia 4 semanas.
Para este proyecto las historias de usuarios están enfocadas en fans y personas que quieren conocer del Studio Ghibli.
Yo como usuario de la página, quiero entrar y ver una breve introducción acompañada de una imagen del Studio Ghibli, para conocer un poco más de su trayectoria.
• El usuario cuando entra en la página ve una breve descripción. • El usuario visualiza una imagen.
• La página creada es igual al prototipo de alta fidelidad. • La página es responsive. • Tiene y paso pruebas unitarias. • El código está en la rama main del proyecto. • La página esta publica en github pages. • Cumplimos los criterios de aceptación que se acordaron con el usuario.
Yo como usuario de la página, quiero entrar y ver el título y la descripción de todas las animaciones de Studio Ghibli, para poder elegir una animación.
• El usuario cuando ingresa puede ver la colección de animaciones del Studio Ghibli. • El usuario elige una animación que muestra el título y su descripción.
• La página creada es igual al prototipo de alta fidelidad. • La página es responsive. • Tiene y paso pruebas unitarias. • El código está en la rama main del proyecto. • La página esta publica en github pages. • Cumplimos los criterios de aceptación que se acordaron con el usuario.
Yo como usuario de la pagina quiero entrar y filtrar las mejores animaciones, para poder elegir la mejor opción.
• El usuario cuando ingresa puede observar el listado de largometrajes animados más vistos por el Studio Ghibli. • El usuario observa la animación de su interés y localiza una breve descripción con sus personajes.
• La página creada es igual al prototipo de alta fidelidad. • La página es responsive. • Tiene y paso pruebas unitarias. • El código está en la rama main del proyecto. • La página esta publica en github pages. • Cumplimos los criterios de aceptación que se acordaron con el usuario.
Yo como usuario de la pagina quiero entrar y ordenar las animaciones, para poder encontrar el contenido que deseo de manera más rápida.
• El usuario cuando ingresa puede desplegar las animaciones ordenadas por el título de forma ascendente y descendente. • El usuario puede escoger el orden que desee.
• La página creada es igual al prototipo de alta fidelidad. • La página es responsive. • Tiene y paso pruebas unitarias. • El código está en la rama main del proyecto. • La página esta publica en github pages. • Cumplimos los criterios de aceptación que se acordaron con el usuario.
yo como usuario de la pagina quiero entrar y ver el promedio de las animaciones, para saber que calificación obtuvo el Studio Ghibli.
• El usuario cuando ingresa puede encontrar el promedio de las animaciones según el puntaje. • El usuario observa que tan alta es la calificación que obtuvo el Studio Ghibli.
• La página creada es igual al prototipo de alta fidelidad. • La página es responsive. • Tiene y paso pruebas unitarias. • El código está en la rama main del proyecto. • La página esta publica en github pages. • Cumplimos los criterios de aceptación que se acordaron con el usuario.
El diseño del proyecto cumple con una interfaz que le permite al usuario: • Mostrar la data en una interfaz en forma de tarjeta. • Interactuar para obtener la información que necesita. • Ver el proyecto adaptado a diferentes pantallas para la comodidad del usuario. • La interfaz cumple los fundamentos de diseño visual.