Dataverse Pixar Planet

1. Resumen del proyecto.

El objetivo de este proyecto fue la creación de una página de internet donde nosotras decidimos construir una página de películas de Disney Pixar con la ayuda de la inteligencia artificial utilizando chatGPT indicandole nuestros requerimientos, como descripcion, fecha de lanzamiento, rating.

Características principales.

La página contiene 24 películas donde el usuario puede: 1.Filtrar por rating: De manera ascendente a descendente 1-10 y visceversa de 10-1. 2.-Ordenar: Se realizo el agrupamiento de las películas por género manejamos 6 tipos: aventura, comedia, familiar, ciencia ficcion, fantasía y drama permitiendo a los usuarios tener un contenido en específico. 3.-Estadísticas: Calcula el promedio del rating de las 24 películas y el promedio de cada uno de los géneros. 4.-Reset: En un solo click elimina todos los filtros previamente utilizados.

Diseño y pruebas unitarias

El sitio web fue diseñado Responsive, lo cual permite que se adapte a diferentes tamaños, como laptops, tablets y celulares. La gama de colores que se escogio son azules y blancos elementos visuales agradables.

Con respecto a las pruebas unitarias, se diseñaron pensando en que cada uno de los filtros a ser utilizados por el usuario no presentaran falla y tambien para nosotros como desarrolladoras para identificar y corregir posibles errores, para hacer esto posible, se utilizo el metodo Jest.

2. Consideraciones tecnicas.

El sitio web contiene las siguientes consideraciones tecnicas:

*La aplicación debe permitir ver al usuario los items tipo tarjeta,tipo tarjetas y cada una debe estar contenida en un elemento <li> y estos a su vez contenido en un elemento <ul>.

• El elemento <ul> deberá ser hijo de un elemento con atributo id de valor "root".

• Las tarjetas deben resaltar los valores de las propiedades de la data que le interesaría a la usuaria ver. Por ejemplo: nombre, fecha, imagen, etc. Filtrar Y ordenar por una propiedad, la tarjeta tiene que mostrar el valor de esta propiedad a la usuaria.

• La interfaz debe estructurar semánticamente la data usando el estándar microdatos. Es obligatorio usar al menos los atributos itemscope, itemtype y el atributo itemprop.

  Por ejemplo:

  {
    "id": "ada-lovelace",
    "name": "Ada Lovelace",
    "shortDescription": "Pionera de la informática, fue la primera programadora.",
    "description": "Una visionaria del siglo XIX ...",
    "imageUrl": "URL_DE_LA_IMAGEN_GENERADA",
    "facts": {
      "yearOfBirth": 1843,
      "placeOfBirth": "London, England",
      "mainField": "Computer Science",
    }
  }

puede ser estructurada semánticamente en HTML como:

<dl itemscope itemtype="WomenInTech">
  <img src="URL_DE_LA_IMAGEN_GENERADA" alt="Ada Lovelace" />
  <dt>Nombre:</dt><dd itemprop="name">Ada Lovelace</dd>
  <dt>Descripción:</dt><dd itemprop="description">Pionera de la informática, fue la primera programadora.</dd>
  <dt>Año de nacimiento:</dt><dd itemprop="yearOfBirth">1843</dd>
  <dt>Lugar de nacimiento:</dt><dd itemprop="placeOfBirth">London, England</dd>
  <dt>Campo de desempeño:</dt><dd itemprop="mainField">Computer Science</dd>
</dl>

• La aplicación debe calcular y visualizar una estadística de la data.

• La aplicación debe permitir a la usuaria filtrar la data. Deberás usar un elemento <select> con un atributo de datos data-testid="select-filter", y un atributo name con el nombre de la propiedad por la que filtrará (por ejemplo, si vas a filtrar por "type", el <select> tendrá name="type"). Los <option> de este <select> deberán tener en el atributo value el valor del filtro (por ejemplo, si vas a filtrar por type "fire" sería <option value="fire">Fire</option>).

• La aplicación debe permitir a la usuaria ordenar la data.

  • Tendrá al menos un control <select> para ordenar.
  • Si usas solo un control <select>, debe tener un atributo de datos data-testid="select-sort" y un atributo name con el nombre de la propiedad por la que ordenará. (por ejemplo, si vas a ordenar por "num" seria name="num"). Este <select> tendrá dos <option> con value asc y desc, para ordenar ascendente y descendente la data respectivamente (por ejemplo, <option value="asc">A - Z</option>).

• Las funcionalidades de ordenar deben operar sobre la data filtrada. Por ejemplo, si filtro de la pelicula es por genero de comedia y luego los ordeno por rating del 1 al 10 , la aplicación deberá mantener el filtro aplicado y ordenar las peliculas de comedia del 1 al 10.

• La aplicación debe permitir a la usuaria reiniciar la aplicación, limpiando filtros y ordenamiento, con un <button> con un atributo de datos data-testid="button-clear".

• Las operaciones de filtrar, ordenar, limpiar, etc. no deben recargar la página, si no que deben agregar el contenido en una manera dinámica via javascript.

• La aplicación será responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.

• Utilizar inteligencia artificial para generar un set de datos en javascript.

• Para visualizar un conjunto de datos se genera un prompting, tecnicas de prompting.

A continuacion compartimos los siguientes wireframes:

prompting 1. prompting 2.

inteligencia artificial como ChatGPT, ExplainDev,

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── README.md
├── package.json
├── src
|  ├── data 
|  |  └── dataset.js (La que hayas generado con la IA)
|  ├── dataFunctions.js
|  ├── view.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.js
   └── dataFunctions.spec.js
   └── tests-read-only

src/dataFunctions.js

El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.

Este archivo va a contener toda la funcionalidad que corresponda a obtener, procesar y manipular datos (tus funciones). Por ejemplo:

• filterData(data, filterBy, value): esta función recibe tres parámetros. El primer parámetro, data, nos entrega los datos. El segundo parámetro, filterBy, nos dice con respecto a cuál de los campos de la data se quiere filtrar. El tercer parámetro, value, indica el valor de campo que queremos filtrar.

• sortData(data, sortBy, sortOrder): esta función sort u ordenar recibe tres parámetros. El primer parámetro, data, nos entrega los datos. El segundo parámetro, sortBy, nos dice con respecto a cuál de los campos de la data se quiere ordenar. El tercer parámetro, sortOrder, indica si se quiere ordenar de manera ascendente o descendente.

Estas funciones deben ser puras e independientes del DOM. Estas funciones serán después usadas desde el archivo src/main.js, al cargar la página, y cada vez que la usuaria interactúe (click, filtrado, ordenado, ...).

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

Criterios de código

Con cada objetivo de aprendizaje, evaluamos que el código cumpla con algunos criterios. Lo cual no excluye que puedas usar otras opciones, por ejemplo en el caso de los selectores, proponemos el uso de querySelector, no significa que no puedes usar querySelectorAll o getElementId también.

Puedes ejecutar las pruebas de cada grupo de objetivos de aprendizaje de manera individual con los siguientes comandos:

npm run test:oas-html
npm run test:oas-css
npm run test:oas-web-api
npm run test:oas-js
npm run test:oas-prompting
npm run test:oas // Esto es para correr todos los tests de OAs

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
  • 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.

4. Definición del producto

Historias de usuario

Para la creacion de historias de usuario se utilizo el storytelling, respondiendo las siguientes preguntas: *¿Quiénes son las principales usuarias del producto? *¿Cuáles son los objetivos de estas usuarias en relación con el producto? *¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?

Generar los datos (prompting)

Con ayuda de la IA le pedimos a chatGPT que nos diera un arreglo de 24 peliculas con nombre, descripcion corta, descripcion larga de no mas de 64 caracteres y 3 facts importantes, nos arrojo fecha de lanzamiento, genero y rating, junto con una imagen de la pelicula. Tambien le pedimos que las propiedas estuviera en CamelCase

La data generada se exporto en este archivo: ./src/data/dataset.js.

Posteriormente se corrieron los test npm run test para verificar que el archivo esté cumpliendo con lo solicitado.

Diseño de la Interfaz de Usuaria

Dedicamos tiempo a comprender a fondo a nuestros usuarios usuarios y a partir de esta comprensión, se diseño la interfaz que facilite la interaccion con el usuario y los datos presentados.

Prototipo de alta fidelidad

Utilizamos Canva para la creacion del boceto de la interfaz, pensando en los requerimientos de nuestros usuarios y recibimos feedback de nuestras compañeras y coaches.

Testeos de usabilidad

Sus recomendaciones fueron:

• Reducir las historias de usuario enfocandonos en mostrar, acomodar y filtrar la data.
• Eliminar la barra de busqueda ya que se encuentra obsoleta por el tema de semantica.
• La barra de menu eliminarla, no era intuitiva.
• Cambiar el color de las tarjetas y hacerlo mas a fin a Pixar

8. Objetivos de aprendizaje

Dentro de los objetivos de aprendizaje se encuentra:

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?

AI Prompting

• Dando Instrucciones

  Links

  • Dando Instrucciones | Learn Prompting: Your Guide to Communicating with AI

• Few shot prompting

  Links

  • Few shot prompting | Learn Prompting: Your Guide to Communicating with AI

Contenido de referencia

Desarrollo Front-end

• Tópicos en la currícula de 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
• expressions-vs-statements
• expresión vs sentencia
• Datos atómicos vs datos estructurados
• Módulos: Export
• Módulos: Import
• Diferencia entre array y objetos
• ¿Cómo puedo recorrer un objeto?
• map, filter, sort y reduce también son métodos para objetos
• Diferencia entre expression y statements
• Diferencia entre createElement e innerHTML
• ¿Qué es el Scope?

Herramientas

• Git
• GitHub
• GitHub Pages
• Para preguntas sobre Git recomendamos ver este playlist
• 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.