Puedes desplegar el proyecto en el siguiente link: Studio Ghibli
- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker edition
- 7. Consideraciones técnicas
- 8. Pistas, tips y lecturas complementarias
- 9. Checklist
Nuestro proyecto está dedicado a mostrar data de Studio Ghibli en una plataforma web responsive.
El objetivo principal de este proyecto es aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular data del Studio Ghibli, entendiendo lo que el usuario necesita.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de bucles (for | for..in | for..of | while)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Diseñar la aplicación pensando 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.
Este trabajo es un platafoma web responsive que contiene y muestra data de las peliculas de Studio Ghibli.
IDENTIFICANDO A NUESTROS USUARIOS:
¿Quiénes son los principales usuarios de producto? -Publico en general que disfrute de las peliculas de Ghibli y quiera saber mas.
¿Cuáles son los objetivos de estos usuarios en relación con el producto? -Saber y conocer mas sobre las peliculas del Studio Ghibli
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? -Desean una pagina web amigable con el usuario donde se muestre películas detallando sus componentes (personajes, directores, locaciones, año, etc)
¿Cuándo utilizan o utilizarían el producto? -En momentos de Ocio.
Acontinuacion presentamos las historias de usuario:
1)Historia de Usuario 1: Yo como fan de Studio Ghibli, quiero una pagina web, donde pueda ver cuales son las peliculas de Studio Ghibli.
2)Historia de Usuario 2: Yo como usuaria de la web de Ghibli, quiero saber más detalles sobre las películas de Ghibli, donde pueda ver descripción, los personajes, las locaciones y vehiculos de cada pelicula.
3)Historia de Usuario 3: Yo como usuaria de la web de Ghibli,quiero filtrar las películas Ghibli, donde pueda ver las peliculas de acuerdo a su productor y/o director.
4)Historia de Usuario 4: Yo como usuaria de la web de Ghibli, quiero ordenar las películas Ghibli, donde pueda ordenar las películas alfabéticamente, por año y por puntaje.
5)Historia de Usuario 5: Yo como usuaria de la web de Ghibli, quiero buscar la información de las películas Ghibli, donde pueda ver un buscador y pueda colocar el nombre de la películas y así ver los personajes, las locaciones y vehículos de cada película sin necesidad de explorar toda la web.
6)Historia de Usuario 6: Yo como usuaria de la web de Ghibli, quiero saber mas detalles de los personajes de ghibli, donde pueda ver el total de género en cada película.
7)Historia de Usuario 7: Yo como usuaria de la web de Ghibli, quiero ver estadísticas de directores, donde pueda saber de todos los directores , su mejor película votada y por ende quien tiene las mejores películas.
Se realizaron testeos de usabilidad por cada sprint, donde se pudo iterar el prototipo inicial, y adaptar el diseño a las necesidades del usuario . 1)Se determino en un comienzo la implementacion de 3 vistas de informacion (una para pelicula,personajes,locaciones) sin estar conectadas entre si.Al moento de la presentacion del prototipo se decidio por cambiar a solo una pagina princiapl que mostrara todas las peliculas y que la informacion restante se visualizara al seleccionar la pelicula. 2)La paleta de colores inicial se cambio a un tonalidad azul para identificarse con el logo de ghibli que es de ese color, ya que la paleta anterior no expresaba la identidad de la marca. 3)La interactividad con los botones fue rediseñada para ofrecer al usurio una claridad de las opciones de interaccion con la pagina, para mejorar la experiencia de navegacion del usuario.
Puedes visitar nuestra pagina web en github pages agregado /src al final del link o ingresando a: https://pauladriana.github.io/LIM015-data-lovers/src/