Data Lovers

Studio Ghibli

Índice

• [1. Studio Ghibli](#1-Studio Ghibli - Definicion de producto)
• 2. Resumen del proyecto
• 3. Funcionalidades
• 4. Consideraciones generales
• 5. Consideraciones técnicas
• 6. Criterios de aceptación mínimos del proyecto
• 7. Hacker edition
• 8. Objetivos de aprendizaje
• 9. Pistas, tips y lecturas complementarias
• 10. Consideraciones para pedir tu Project Feedback

---

1. Studio Ghibli - Definicion de producto

Este Proyecto fue creado para proporcionar Imformacion actualizada sobre las peliculas de Studio Ghibli que favorece a fans de estas, nuestra pagina funciona de forma dinamica y permite interactuar con ella: 1 filtra por director 2 ordena de manera ascendente y desendente 3 te permite filtarr y ordenar al tiempo 4 calcula datos importantes como la pelicula con el mejor score, la cantidad de peliculas con puntaje mayor a 95 y un promedio de todos los puntajes de la historia de Studios Ghibli.

2. Historia de ususario

Esta son nuesttras Historias de usuarias creadas para 4 sprint

3. Diseño de interzas de usuario

Prototipo de baja fidelidad

Prototipo de alta fidelidad

Despues consideramos que era mejor una tarjeta de tipo Wireframe 2 para tener mejor visibilidad de informacion de las peliculas como resultado obtuvimos este prototipo

4. Interzas de usuario

Este es el proyecto final en el que trabajamos.

La pagina tambien es responsive

Poyecto Data Lovers

5. Pruebas Unitarias

-La primera prueba unitaria es verificar si filterData devuelve correctamente las tarjetas de la película filtrada por director.

-La segunda prueba unitaria es verificar si sortData clasifica correctamente los titulos de las películas en orden ascendente - descendente.

-La tercera prueba unitaria es verificar si sortData clasifica correctamente los titulos de las películas en orden descendente

-La cuarta prueba unitaria es verificar si la Computestats calcular las estadísticas correctamente usando el rt_score

HTML

• Uso de HTML semántico

  • Tiene un <header> con <h1>
  • Tiene un <footer>
  • Tiene un <main> con <h2>
  • Todas las etiquetas de controles (inputs, selects, radio, etc) tienen <label>
  • <ul> esta usado para dibujar la data
  • Los hijos de <li> usan attributos de microdata itemscope e itemprop

CSS

• Uso de selectores de CSS

  • Uso de selector class para los items <li>
  • Uso de flexbox en sentido row y column
  • Uso de flexbox para el elemento que contiene los items
  • Uso de flexbox para el elemento que contiene los UI inputs

Web APIs

• Uso de selectores del DOM

  • La aplicación usa querySelector para buscar los elementos del DOM

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

  • addEventListener con callback que tiene parámetro de event, lo que permite el uso del objeto event con event.target o event.currentTarget
  • La aplicación registra Event Listeners para escuchar click, change, keyup dependiendo del evento que se quiere escuchar

• Manipulación dinámica del DOM

  • La aplicación actualiza el atributo innerHTML.
  • La aplicación usa createElement y appendChild, o template strings para crear elementos

JavaScript

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

  • La aplicación declara variables con let y const en manera adecuada

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

  • La aplicación usa el statement if..else para evaluar condiciones

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

  • La aplicación usa el statement for o método forEach para iterar

• Funciones (params, args, return)

  En el archivo dataFunctions.js define las siguientes funciones:

  • una función sortBy que tiene 3 parámetros (data, sortBy, sortOrder) y devuelve el arreglo ordenado
  • una función filterBy que tiene 3 parámetros (data, filterBy, value) y devuelve el arreglo filtrado
  • una función computeStats que tiene al menos un parámetro (data) y devuelve un valor computado

  Más sobre estos puntos en la sección dataFunctions.js

• Arrays (arreglos)

  • Uso de Arreglos
  • Uso de Array.prototype.sort() - MDN o Array.prototype.toSorted - MDN
  • Uso de Array.prototype.forEach() - MDN
  • Uso de Array.prototype.map() - MDN
  • Uso de Array.prototype.filter() - MDN
  • Uso de Array.prototype.reduce() - MDN

• Objetos

  • Uso de notación de punto para acceder propiedades
  • Uso de notación de brackets para acceder propiedades

• Módulos de ECMAScript (ES Modules)

  • La aplicación usa import y export para importar y exportar valores desde un modulo JavaScript.

Criterios del proyecto

Definición del producto

Documenta brevemente tu trabajo en el archivo README.md de tu repositorio, contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve el problema (o problemas) que tiene tu usuaria.

Historias de usuario

Una vez que entiendas las necesidades de tus usuarios, escribe las Historias de Usuario que representen todo lo que la usuaria necesita hacer/ver. Las Historias de Usuario deben ser el resultado de tu proceso de investigación o research de tus usuarios.

Asegúrate de incluir la definición de terminado (definition of done) y los Criterios de Aceptación para cada una.

Usa tus historias de usuario para planificar tus sprints dividiendo cada historia en tareas.

En la medida de lo posible, termina una Historia de Usuario antes de pasar a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación).

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu solución usando papel y lápiz. Te recomendamos tomar fotos de todas las iteraciones que hagas, que las subas a tu repositorio y las menciones en tu README.md.

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - User Interface). Para eso debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma que es una herramienta que funciona en el navegador y, además, puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, etc.

El diseño debe representar el ideal de tu solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu diseño debe seguir los fundamentos de visual design.

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

Testeos de usabilidad

Durante el reto deberás hacer tests de usabilidad con distintos usuarios, y con base en los resultados, deberás iterar tus diseños. Cuéntanos qué problemas de usabilidad detectaste a través de los tests y cómo los mejoraste en tu propuesta final.

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

Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. Tu tiempo de hacking es escaso, así que deberás priorizar.

Revisa las funcionalidades que el proyecto pide del interfaz.

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas. Este proyecto usa el framework Jest para ejecutar las pruebas unitarias por lo que te recomendamos consultar su documentación.

Tus pruebas unitarias deben dar una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo src/dataFunctions.js que contenga tus funciones y está detallado en la sección de Consideraciones técnicas.

7. Hacker edition

Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.

Features/características extra sugeridas:

• En lugar de consumir la data estática brindada en este repositorio, puedes consumir la data de forma dinámica, cargando un archivo JSON por medio de fetch. La carpeta src/data contiene una versión .js y una .json de cada set datos.
• Visualizar la estadística calculada mediante un gráfico. Para ello te recomendamos explorar librerías de gráficas como Chart.js o Google Charts.
• 100% Coverage

8. 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?

9. Pistas, tips y lecturas complementarias

Primeros pasos

Súmate al canal de Slack #project-data-lovers para conversar y pedir ayuda del proyecto.

Antes de empezar a escribir código, debes definir qué deberá hacer el producto con base en el conocimiento que puedas obtener de tu usuaria. Estas preguntas te pueden ayudar:

• ¿Quiénes son los principales usuarios de producto?
• ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
• ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
• ¿Cuándo utilizan o utilizarían el producto?
• Toda tu investigación previa debe tener como resultado todas las Historias de Usuario de tu proyecto.
• No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más pistas en la guía de organización para el proyecto.

Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

1. Una de las integrantes del equipo debe realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
2. ⬇️ Clona tu fork a tu computadora (copia local).
3. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
4. Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
5. Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
6. A codear se ha dicho! 🚀

Contenido de referencia

Diseño de experiencia de usuario (User Experience Design)

• Investigación con usuarios / entrevistas
• Principios de diseño visual

Desarrollo Front-end

• Topicos en la curricula de sitio Laboratoria testing, arreglos, objetos, funciones, DOM en Browser Javascript.
• Buscando elementos con querySelector*
• Objeto del evento
• Array en MDN
• Array.sort en MDN
• Array.toSorted 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
• Atributos de datos
• 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

10. Consideraciones para pedir tu Project Feedback

Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:

• Cumple con todos los criterios mínimos de aceptación al ejecutar npm run test:oas
• Cumple con todas las pruebas end to end al ejecutar npm run test:e2e
• Cumple con todas las pruebas unitarias al ejecutar npm run test y que tienen una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches
• Esta libre de errores de eslint al ejecutar npm run pretest
• Está subido a GitHub y desplegado en GitHub Pages
• Tiene un README.md con la siguente:
  • Definición del producto clara e informativa
  • Historias de usuario
  • Un sketch de la solución (prototipo de baja fidelidad) y Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
  • El listado de problemas que detectaste a través de tests de usabilidad en el README.md
• Tiene un UI que cumple las funcionalidades:
  • Muestra lista con datos y/o indicadores
  • Permite ordenar data por uno o más campos (asc y desc)
  • Permite filtrar data con base en una condición
  • Permite limpiar los filtros con un botón
  • Es responsive

Recuerda que debes hacer una autoevaluación de objetivos de aprendizaje y life skills desde tu dashboard de estudiante.

Si no has completado todo lo anterior, no consideramos que estás lista para tu sesión de Project Feedback.