Studio Ghibli

Descripción

La pagina de Studio ghibli se ha creado con la finalidad de proporcionar información detallada y actualizada sobre sus animaciones .Esto será beneficioso tanto para los fanáticos de la animación como para los investigadores y críticos de cine.interesados en conocer más sobre la obra de esta casa productora. La pagina es dinamica y te permite:

1. Mostrar información sobre las animaciones de Studio Ghibli y sus personajes, como el título, el director, el productor, la fecha de lanzamiento, la puntuación de Rotten Tomatoes e información sobre los personajes, como sus nombres, edad, género y especie.

2. Mostrar las 10 mejores animaciones de Studio Ghibli según su puntuación en Rotten Tomatoes, un botón para mostrar los personajes de cada animación y botones para mostrar ubicaciones y vehículos relacionados con cada animación.

3. Calcular y muestrar la puntuación media de Rotten Tomatoes de todas las animaciones de Studio Ghibli.

En general, la pagina web proporciona una interfaz para que los usuarios exploren y aprendan sobre las animaciones de Studio Ghibli y sus personajes, ubicaciones y vehículos relacionados.

1. Historias de Usuario

Primeras versiones de las historias de usuario que diseñamos en cada sprint

2. Criterios de aceptacion y determinado

3. Prototipos de baja fidelidad

4. Prototipo de alta

5. Implementación de la Interfaz de Usuario (HTML/CSS/JS)

6. Resumen del proyecto

Objetivos:

Este es un proyecto que tiene como objetivo mostrar información sobre películas del Studio Ghibli. A continuación, se detallan las funciones disponibles en el proyecto.

Funciones

filterOfdata(data, id) Esta función filtra la información de las películas y devuelve un objeto con el título y los personajes de la película que corresponde con el id proporcionado.

filterOfdata2(data, id)
Esta función filtra la información de las películas y devuelve un array con los vehículos de la película que corresponde con el id proporcionado.

filterOfdata3(data, id)
Esta función filtra la información de las películas y devuelve un array con las locaciones de la película que corresponde con el id proporcionado.

sortData(data)
Esta función ordena la información de las películas por fecha de lanzamiento, de más reciente a más antigua.

sortData2(data)
Esta función ordena la información de las películas alfabéticamente por título, de la A a la Z.

sortData3(data)
Esta función ordena la información de las películas por fecha de lanzamiento, de más antigua a más reciente.

sortData4(data)
Esta función ordena la información de las películas alfabéticamente por título, de la Z a la A.

calculoData(data)
Esta función calcula el promedio de las calificaciones (rt_score) de todas las películas.

filterMoviesByScore(data, topScore)
Esta función filtra las películas por una puntuación mínima (topScore) y devuelve un array con las 10 películas con las puntuaciones más altas, ordenadas de mayor a menor.

7. Proyecto:

https://kellyfabiolafc.github.io/DEV004-data-lovers/src/

8. Contribuidores

Kelly Flores(floresdelacruzkellyfabiola@gmail.com)
Alexa Suarez(alexas1903@gmail.com)

9. Pruebas unitarias

Uso:

La primera prueba es verificar si la filterOfdatafunción devuelve correctamente el título y los personajes de una película con una identificación específica.
La segunda prueba es verificar si la filterOfdata2función devuelve correctamente los vehículos de una película con una identificación específica.
La tercera prueba es verificar si la filterOfdata3función devuelve correctamente las ubicaciones de una película con una identificación específica.
La cuarta prueba es verificar si la sortDatafunción clasifica correctamente una serie de objetos de películas en orden ascendente y descendente por fecha de lanzamiento.
La quinta prueba es verificar si la sortData2función clasifica correctamente una matriz de objetos de película en orden ascendente por título.
La sexta prueba es verificar si la sortData3función clasifica correctamente una serie de objetos de películas en orden ascendente y descendente por fecha de lanzamiento.
La séptima prueba es verificar si la sortData4función clasifica correctamente una matriz de objetos de película en orden descendente por título.
La octava prueba es comprobar si la calculoDatafunción calcula correctamente la puntuación media de todas las películas.
La novena prueba está verificando que la función filterMoviesByScore filtre correctamente las películas que superan el promedio general y devuelva un nuevo arreglo con estas películas.

9. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Diferenciar entre tipos de datos primitivos y no primitivos

• Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Objetos (key, value)

  Links

  • Objetos en JavaScript

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• 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

  Links

  • Sitio oficial de GitHub Pages

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

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

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

Investigación

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

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

Checklist

• Usa VanillaJS.
• Pasa linter (npm run pretest)
• Pasa tests (npm test)
• Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
• Incluye Definición del producto clara e informativa en README.md.
• Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad) en README.md.
• Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README.md.
• Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• UI: Muestra lista y/o tabla con datos y/o indicadores.
• UI: Permite ordenar data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.
• UI: Es responsive.

Desarrollo Front-end

• Unidad de testing en curso de JavaScript en LMS.
• Unidad de arreglos en curso de JavaScript en LMS.
• Unidad de objetos en curso de JavaScript en LMS.
• Unidad de funciones en curso de JavaScript en LMS.
• Unidad de DOM en curso de Browser JavaScript en LMS.
• Array en MDN
• Array.sort en MDN
• Array.map en MDN
• Array.filter en MDN
• Array.reduce en MDN
• Array.forEach en MDN
• Object.keys en MDN
• Object.entries en MDN
• Fetch API en MDN
• json.org
• expressions-vs-statements
• expresión vs sentencia
• datos atómicos vs datos estructurados
• Modulos: Export
• Modulos: Import

Herramientas

• Git
• GitHub
• GitHub Pages
• Node.js
• Jest

Organización del Trabajo

• Historias de Usuario. Ojo que Cris no diferencia Definición de terminado de Criterios de Aceptación y nosotros sí lo haremos. Más detalles en la guía.
• Cómo dividir H.U.
• Guía para Data Lovers