ÍNDICE

• 1. Studio Ghibli
• 2. Historia de Usuario
• 3. Realización del Diseño
• 4. Tecnologías empleadas
• 5. Fuentes
• 6. Autores

---

1. Studio Ghibli

🎌 Studio Ghibli(スタジオジブリ) es un estudio de animación japonés muy reconocido por sus largometrajes como "Viaje de Chihiro", "Mi vecino Totoro", y entre otros. 🎎 Studio Ghibli fue fundado por el animador, director, productor, guionista, autor y artista de manga Hayao Miyazaki; el director de cine japonés Isao Takahata; y el productor Toshio Suzuki. Este proyecto tiene como finalidad brindar información sobre sus animaciones, personajes, estadísticas, y mucho más.🎌

---

2. Historia de Usuario ✍🏼

🕵🏼 ¿Quienes son los principales usuarios?

Los principales usuarios del producto son aquellas personas que tengan el gusto por las películas animadas mas conocidas como animes en la cultura popular.

🕵🏼‍♀️ ¿Cuáles son los objetivos de estos usuarios en relación con el producto?

Los objetivos en relación con el producto son que los usuarios puedan filtrar el nombre de las películas, ya sea utilizando un buscador o algún tipo de filtro como puntuación por película, película por director, entre otras de las cuales serán de interés del usuario.

🕵🏽‍♂️ ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?

Según algunas encuestas que realizamos los usuarios están interesados en ver parte de la interfaz solicitada por Laboratoria ( data ), también desean ver:

• Datos curiosos: Por qué el nombre de 'Studio Ghibli', alguna simfonías utilizadas, etc.
• Historia sobre sus comienzos y fundadores.
• Estadísticas
• Premios
• Información sobre sus películas (personajes, top 10, director, score, etc.)
• Una plataforma amigable con un fuente de letra fantasy, imágenes, links, noticias, etc.

🕵🏾‍♀️ ¿Cuándo utilizan o utilizarían el producto?

Utilizarían el producto cuando se animen a ver información (sinopsis, personajes, localizaciones) de alguna pélicula del Studio Ghibli, sobre su ranking de películas, leer un poco de su historia, premios ganados, entre otros.

A continuación, mostraremos algunas de las historias de Usuario:

USUARIO 1 👨🏾‍🦱 (diseñador gráfico, director de arte y futuro UX designer)

Yo como visitante, me gustaría que cuando ingrese a la página sienta que estoy leyendo un historieta de fantasía, con música de fondo, con dinámicas y encontrar información detallada sobre las películas. Además, no me gustaria encontrar mucho texto.

USUARIO 2 👩🏼 (Su película favorita es El viaje de Chihiro)

Yo como visitante, me gustaría encontrar datos curiosos sobre el Studio Ghibli y sus películas. Además, que tenga una paleta de colores que transmitan misterio.

USUARIO 3 👩🏻‍🦰 (Otaku)

Yo como visitante, me gustaría ver un top 10 de las películas con mayor rango de score, información sobre las últimas actualizaciones (museos, peliculas nuevas, etc.)

CRITERIOS DE ACEPTACIÓN ✔️

Para satisfacer las necesidades del usuario, consideramos la distribución de las siguientes páginas:

• INICIO: Contendrá información sobre las actualizaciones, datos curiosos, bienvenida.
• SOBRE NOSOTROS: Se hablará sobre sus inicios, fundadores e historia.
• PELÍCULAS: Habrán dos secciones; una donde se encontrará el Top 10, y otra; donde se mostrarán todas las películas con una barra de filtro para buscarlas.
• PREMIOS: Información sobre todos los premios ganados.
• ESTADÍSTICAS: Se elaborará gráficos estadísticos sobre las películas.
• JUEGOS: Añadiremos un par de juegos elaborados por el equipo para darle mayor interacción al usuario.

---

3. Realización del Proyecto

3.1 Diseño 📱

3.1.1 Prototipado de Baja Fidelidad: 📝

Al definir que contenido iría en la página web, realizamos un prototipo a groso modo de la distribución, con lapiz y papel. A continuación, se mostrará las páginas más relevantes a tratar; si desea verlo completo puede darle click Aquí.

3.1.2 Wireframe: 🙋🏼

Por consiguiente, en esta fase se busca realizar un esquema virtual de distribución más detallado en Figma. A continuación, se mostrará parte del Wireframe; si desea puede verlo completo dando click Aquí.

3.1.3 Prototipado de Alta Fidelidad: 💁🏼

Luego de ya tener el Wireframe, se realiza el diseño de la web en base a estilos, paleta de colores, entre otros recursos. A continuación, se mostrará parte del prototipado de alta fidelidad, si desea puede verlo completo dando click Aquí.

---

4. Tecnologías empleadas 👩🏾‍💻

Para la estructura y diseño:

• HTML: Siguiendo las reglas del HTML semántico se estructuró con un header que contiene una barra de navegación, el main para englobar el contenido principal y en el footer se detalla los derechos de autor.

• CSS: Usada para definir el estilo visual del proyecto.

• Figma: Plataforma para crear las estructuras del prototipo (Wireframe, prototipo de alta fidelidad, mockups).

Para el Testing:

• Jest: Framework para realizar los testing unitarios.

• Eslint: Herramienta de linting para analizar el código en busca de errores.

Para la funcionalidad:

• Javascript: Para dar la funcionalidad a la plataforma.

Librerías:

• Chart.js: Para la creación de gráficos estadísticos.

---

5. Fuentes 📚

• Repositorio de Laboratoria: Se encuentran todas las condiciones y herramientas a trabajar para el proyecto.

6. Autores 📍

• Jeanella Hugo
• Rosamaria Rodriguez
• Equipo de Laboratoria LIM016

---