Esta página está diseñada para personas , fanáticas o no, de Estudio Ghibli, donde podrán encontrar veinte películas con su respectiva descripción, directores, personajes, locaciones, etcétera.
En Directory Ghibli, se podrá encontrar una sección donde están las películas, una barra de búsqueda para encontrar las coindicencias que el usuario encuentre en la página, un menú donde se despliegan las diferentes secciones, como lo son (movies, characters, locations, vehicles), y, también, una sección donde el usuario puede filtrar las películas en orden alfabético, ascendente y descendente.
En cada película, en la página principal, se puede observar la imágen y el rating de cada una, donde, además, se puede dar click en cada una y se puede observar la información de cada una (nombre, año de lanzamiento, rating, descripción, productor y director).
Para el diseño de la página web, construimos un prototipo de baja fidelidad y otro de alta fidelidad, y, también, unas posibles historias de usuario, donde pudimos reflejar lo que, posiblemente, quisiera observar un usuario que entre en la página de Studio Ghibli.
https://www.figma.com/file/7tefunljDSdouy2bZTolLs/Historias-de-Usuario-de-DL17?node-id=0%3A1
https://www.figma.com/file/rKgA4GO9kzW7xvgZ1zoNYq/Prototipo-baja-resoluci%C3%B3n-DL
En primer lugar, el Usuario #1: "Como usuario yo quiero encontrar las películas como imágenes para poder navegar dentro de cada una de las películas". Para plasmar esta historia de usuario planteamos unos criterios de acetpación, por ejemplo:
- La película escogida tiene la información de titulo, descripción, rating, personajes y locaciones
- El usuario se puede devolver al home
- El usuario entra a la pagina y puede ver todas las imágenes y títulos de las películas
- El usuario puede dar click en la imagen para ingresar a la información de la película
En segundo lugar, la Historia de Usuario #2 propone: "Como usuario yo quiero encontrar las películas como imágenes para poder navegar dentro de cada una de las películas". Los criterios de aceptaciónpara esta historia, fueron los siguientes:
- Botón que filtra el contenido de manera ascendente o descendente por orden alfabético
- Se puede deseleccionar mostrar por orden alfabético
En tercer lugar, la Historia de Usuario #3, plantea que: "Como usuario quiero ver la lista de las películas de Ghibli para escoger la que busco". Para esta historia, los criterios de aceptación fueron los siguientes:
- Click en movies y que se despliegue la lista de peliculas
- Evento en la pelicula con click para ingresar a la película escogida
- Tener un buscador para buscar puntualmente la película que quiero encontrar
Para completar este proyecto, fue necesario, además, trabajar con el responsive, para que en cualquier tipo de móvil, computador o computador portátil, con diferentes medidas y tamaños, fuera visible la página y no se distorcionara la infomración que se quería incluir y las funcionalidades.
También, se construyeron los tests de usabilidad o pruebas unitarias correspondientes para el proyecto en cuestión, donde se evaluaron las funciones utulizadas, como el de procesar, filtrar y ordenar la data.
https://www.figma.com/file/DqdOEzXLG4KG5NpIUVlgKy/directory-ghibli-HF-prototype?node-id=0%3A1
- Despligue de imagenes de películas en primera etapa de la construcción de la aplicación con Json y Fetch
- Funciones de segundo grado
- Metodos Filter y Sort para las funciones de arrays
- Uso de for, forEach, e.target, key para las funciones construidas
- Uso de template strings en las funciones de render
- Uso de eventos con change y click
- Uso de import y export
- Uso de return en las funciones creadas
- Uso de flex y flexbox para la mayoria de nuestros elementos lo que hizo nuestra web responsive
- Investigación propia (individual y grupal)
- Consensos y trabajo en equipo en live share, zoom (En dupla)
- Revisión de oa's, recursos tipo lectura, video, tutoriales, ejemplos, retos, etc.
- Retroalimentación de ayudantías