- 1. Studio Ghibli
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Criterios del proyecto Studio Ghibli
- 5. Hacker edition
- 6. Consideraciones técnicas
Studio Ghibli es un estudio de animación japonés, conocido por sus largometrajes animados como Mi vecino Totoro, El viaje de Chihiro o El castillo ambulante, entre otros 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.
En este proyecto se construyó una página web para visualizar un conjunto (set) de datos que se adecúa a los seguidores del Studio Ghibli
En la página web se permite visualizar la data, filtra las peliculas por director, productor y año, se pueden ordenar de la A-Z y viceversa, el seguidor puede hacer una búsqueda por el título de la película y por último se hace un cálculo agregado que muestra el TOP10 de Studio Ghibli.
Los Objetivos de aprendizaje alcanzados:
- [✓] Uso de HTML semántico
- [✓] Uso de selectores de CSS
- [✓] Modelo de caja (box model): borde, margen, padding
- [✓] Uso de flexbox en CSS
- [✓] Uso de selectores del DOM
- [✓] Manejo de eventos del DOM (listeners)
- [✓] Manipulación dinámica del DOM
- [✓] 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, operador ternario, lógica booleana)
- [✓] Uso de ciclos (for)
- [✓] 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)
- [✓] 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)
- [✓] Diseñar un producto o servicio poniendo a la usuaria en el centro
- [✓] Crear prototipos de alta fidelidad que incluyan interacciones
- [✓] Seguir los principios básicos de diseño visual
Realizamos la planeación del proyecto en Trello Trello
Los criterios que consideramos para desarrollar este proyecto son:
Para este proyecto generamos dos historia de usuario
HU1 "Yo como usuario quiero visualizar las películas del Studio Ghibli para conocer sus nombres y
posters de cada película"
HU2 "Yo como usuario quiero conocer los personajes de las películas para entender su rol"
Tomamos foto de los diseños que prentendimos realizar a papel y lápiz.
Se diseñó la Interfaz de Usuario utilizando de manera colaborativa la herramienta de diseño visual Figma
Esta es la ideal de nuestra solución.
- Muestra la data en la interfaz.
- Permitir al seguidor interactuar para obtener la infomación que necesita.
- Es responsive, se visualiza sin problemas en: móviles y desktops.
Se realizarón Pruebas Unitarias de lasfunciones escritas en data.js
Se realizaron cálculos para obtener el TOP10 de las películas de Studio Ghibli,
la gráfica se hizo con la ayuda de la libreria Chart.js
La lógica del proyecto se implementó completamente en JavaScript (ES6), HTML y CSS.vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts).
Se realizó GitHub Colaborativo donde 2 autores (Roxana Hdz & Nanci Mondragón) enviaron 22 confirmaciones a main y 22 confirmaciones
a todas las sucursales. En main, 24 archivos han cambiado y ha habido 15.098 adiciones y 50 eliminaciones .
Data Lovers Copyright 2022 by Roxana Hernández & Nanci Mondragón