Ghibli Lover´s

Índice

• 1. Descripción del proyecto
• 2. Objetivos del proyecto
• 3. Objetivos de generales
• 4. Objetivos específicos
• 5. Objetivos de aprendizaje
• 6. Prototipos
• 7. Tecnologías Utilizadas

---

1. Descripción del proyecto

Studio Ghibli es un estudio de animación japonés, conocido por sus largometrajes animados considerados grandes éxitos.

Las animaciones tienen gran acogida a nivel mundial y algunas han recibido varias nominaciones y premios. De todo este fandom hay un grupo que desea poder interactuar y ver la información de las animaciones y sus personajes.

Debido a esto, se vio la necesidad de poder elaborar un producto digital en el cual se pueda consolidar la información relacionada a los largometrajes y le permita al usuario obtener estos datos de forma dinámica y de acuerdo a sus necesidades.

Para este proyecto es necesario completar los objetivos de aprendizaje trabajando de manera colaborativa (dupla). Para ello fue indispensable realizar prototipos de baja y alta fidelidad, manejo de HTML semántico, JavaScript, CSS, web APIs, control de versiones GIT-GITHUB así como testeos de usabilidad. El conjunto de estas funciones nos llevará a una interfaz donde se mostrará la data del Studio Ghibli de manera organizada y manejable para el usuario final.

2. Objetivos del proyecto

Objetivo general

El objetivo principal de este proyecto es aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.

Objetivos específicos

Buscar entender quién es el usuario y qué necesita saber o ver exactamente. Crear una página web que permita visualizar la data, filtrar, ordenar y hacer algún cálculo agregado. Realizar test unitarios.

3. Objetivos de aprendizaje

HTML

• Uso de HTML semántico

CSS

• Uso de selectores de CSS
• Modelo de caja (box model): borde, margen, padding
• Uso de flexbox en CSS

Web APIs

• Uso de selectores del DOM
• Manejo de eventos del DOM (listeners, propagación, delegación)
• Manipulación dinámica del DOM

JavaScript

• Diferenciar entre tipos de datos primitivos y no primitivos
• Arrays (arreglos)
• Objetos (key, value)
• Variables (declaración, asignación, ámbito)
• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
• Uso de bucles/ciclos (while, for, for..of)
• Funciones (params, args, return)
• Pruebas unitarias (unit tests)
• Módulos de ECMAScript (ES Modules)
• Uso de linter (ESLINT)
• Uso de identificadores descriptivos (Nomenclatura y Semántica)
• Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• Git: Instalación y configuración

• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

• GitHub: Despliegue con GitHub Pages

• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

user-centricity

• Diseñar un producto o servicio poniendo a la usuaria en el centro

product-design

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

research

Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

4. Consideraciones generales

5. Criterios de aceptación mínimos del proyecto

Los criterios para considerar que has completado este proyecto son:

6. Prototipos

Prototipos de baja fidelidad

Se realizaron varios bocetos a lápiz, los cuales se fueron puliendo mediante feedback de compañeras y coaches. Una vez teniendo el VoBo, y definiendo correctamente las HU se procedió a realizar el prototipo de alta fidelidad.

Historias de usuario

Landing page

Como: usuario fanático de las animaciones del Studio Ghibli Quiero: visualizar un menú general donde pueda elegir entre las opciones de: 1: las animaciones; 2: directores y productores; 3: sus personajes; 4: las locaciones y los vehículos utilizados en ellas. Para: poder explorar de manera más específica la información, de acuerdo a lo que esté buscando

Prototipo de alta fidelidad

Para elaborar el prototipo de alta fidelidad elegimos:

La paleta de color ![paleta-de-color] (img/colorhunt1.png)

Las fuentes tipográficas Delius Unicase (para títulos) y Mitr (para textos largos) Fuentes

HU1 (Películas)

Como: usuario fanático de las animaciones. Quiero: Saber cuántas y cuáles películas son Para: Poder diferenciarlas y así obtener la información de lo que estoy buscando de manera ordenada y específica. Definición de terminado: Colocar los Dropdowns en el footer que realizan las funciones de filtrado para que muestre pestañas seleccionables de “director”, “lanzamiento” y “Score” de las películas.

7. Tecnologías Utilizadas

DESARROLLADORAS

Proyecto desarrollado remotamente desde distintos lugares de México de manera síncrona y asíncrona por:

• Tania Garcia
• Samantha Cruz

Ambas estudiantes de en el cohort regional DEV002.