- 1. Resumen del proyecto
- 2. Descripción
- 3. Diseño e investigacion UX
- 4. HISTORIAS DE USUARIO
- 5. Criterios de aceptación
- 6. Pruebas unitarias
- 7. Autoria
- 8. recursos
- 9. Checklist
Studio ghibli es una de las compañia de animación mas reconocidas de japon por ello esta pagina ayuda a filtrar y ordenar las peliculas de 1985 hasta el año actual que se tiene registro, ordenando de (A) a la (Z) de (Z) a la (A) ordenando por su ranking mostrando la descripcion los posters de estreno titulos entre otros tambien filtrando las peliculas por productores.
Esta pagina esta hecha para los amantes de las peliculas del studio ghibli y para que conozcan una pagina que tiene un orden y sea mas sencillo para buscar lo mas relevante de cada una de las peliculas desde la primera de ellas hasta la mas reciente.
Los usuarios a donde va dirigido es a los amantes del anime y de las peliculas de studio ghibli no hay rango de edad ya que depende de cada pelicula como tal.
Pensamos en una pagina que sea facil de usar y con la cual tuvimos apoyo de algunas compañeras dandonos un feedback del diseño de la pagina si era interactiva y facil de usar a lo cual ellas nos recomendaron cambiar un poco la paleta de colores pues teniamos tonos que no combinaban, los cuales no tenian buen aspecto a la vista del usuario, de lo contrario nos agregaron que el diseño si era interactivo y que los demas tonos claros pasteles conbinaban con la tematica de studio ghibli y el ambiente de las peliculas en general.
Inicialmente se crearon los prototipos no realistas donde se opto por una mejor usabilidad donde el usuario pueda buscar con facilitadad lo que necesita saber de la pagina studio ghibli y para amantes del anime, sencilla de usar para niños ya que es funcionable.
Se crearon los prototipos realistas con cambios en los botones de los prototipos no realistas para cumplir con todos los objetivos de aprendizaje y que sea mas sencilla de usar.
para ver mejor los prototipos realistas se pueden ver en este link ![Prototipos-realistas] https://www.figma.com/file/prhWOtHTYEwZ3D2RFFW3Tc/navegador-ghibli?node-id=12%3A4
yo como usuario quisiera ver una pagina con una pequeña introduccion de studio ghibli con una pequeña galeria tipo interactivo donde se desplazan las imagenes de las peliculas mas reconocidas que ha hecho hayao miyazaki, que cuente con un encabezado de varias opciones para saber mas detalles de cada pelicula y con un pie de pagina sencillo donde muestre la zona de las redes sociales y derechos reservados para tener una introduccion antes de la informacion de cada peliculas.
como usuario y amante del anime quiero ver las fechas de las peliculas, para ver cuales son las mas antiguas y las mas recientes, agregando en el encabezado el menu desplegable con 3 botones para filtrar las peliculas por fechas de 1985 a 1999 - de 2000 a 2010 y de 2011 hasta ahora.
como usuario me gustaria poder ordenarlas de la (A) a la (Z) y de la (Z) a la (A), agregando dos botones en la seccion de abajo de peliculas donde el usuario puede cambiar el orden que el mejor prefiera
%20a%20la%20(Z).png)
como usuario me gustaria ver todas las peliculas por orden de puntaje de la mas baja hasta la de mayor puntaje con su descripcion su poster y titulo.
yo como usuario quiero ver los productores y ver que peliculas realizo cada uno, realizando en el encabezado los 5 botones de cada uno de los productores de cada pelicula para filtrarlos por sus respectivas peliculas.
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
Git: Instalación y configuración
-
Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
GitHub: Despliegue con GitHub Pages
-
GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
Diseñar la aplicación pensando en 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
Con varios usuarios nos hicieron feedback de que la pagina esta completa facil de usar y tenia buena funcionalidad
Se paso el test con un total de 100 en todo
Este proyecto de filtrar y organizar data esta hecho por Maria Jossdeny chacon vanegas y leidy alexandra garavito paez
- como hacer un slider ![https://www.youtube.com/watch?v=WI0aCIEYXvw]
- guia de la pagina ![https://www.fotogramas.es/noticias-cine/g31118988/ghibli-mejores-peliculas-miyazaki-takahata-netflix/]
- informacion de las peliculas ![https://www.filmaffinity.com/es/main.html]
- ayuda en codigo ![https://www.w3schools.com/]
- 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 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.