Dataverse

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Consideraciones generales
• 4. Funcionalidades
• 5. Consideraciones técnicas
• 6. Hitos
• 7. Criterios de aceptación mínimos del proyecto
• 8. Hacker edition
• 9. Objetivos de aprendizaje
• 10. Pistas, tips y lecturas complementarias
• 11. Consideraciones para pedir tu Project Feedback

---

1. Preámbulo

Según Forbes, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes.

No obstante, los datos por sí mismos son de poca utilidad. Para que esas grandes cantidades de datos se conviertan en información fácil de leer para las usuarias, necesitamos entender y procesar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.

En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte izquierda se puede construir una interfaz amigable y entendible por las usuarias, al lado derecho.

2. Resumen del proyecto

En este proyecto construirás una página web para visualizar un conjunto (set) de datos que vas a generar con prompting. Esta página web se adecuará a lo que descubras que tu usuaria necesita.

Además, en este proyecto utilizarás herramientas de inteligencia artificial como ChatGPT, ExplainDev, entre otras para generar un set de datos en un archivo javascript.

El propósito de generar los datos en esta manera es brindarte la oportunidad de adentrarte en el empleo de herramientas impulsadas por la inteligencia artificial, así como en técnicas de prompting.

Como entregable final tendrás una página web que permita visualizar la data, filtrarla, ordenarla y calcular alguna estadística. Con estadística nos referimos a distintos cálculos que puedes hacer con los datos para mostrar información aún más relevante a las usuarias (promedio, el valor máximo o mínimo, etc).

3. Consideraciones generales

• Este proyecto se debe resolver en duplas.
• El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
• El tiempo estimado que deberías dedicar a la generación de los datos es de máximo un sprint. Además, al final del proyecto deberás presentar un screenshot del prompt utilizado.
• Si ves que te va a tomar más tiempo, deberás utilizar los datos de ejemplo que los vas a encontrar en esta ruta: ./src/data/dataset.js.
• El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub Pages.

4. Funcionalidades

Como entregable final tendrás una página web que permita visualizar la data, filtrarla, ordenarla y calcular alguna estadística.

Aquí definimos en más detalle las funcionalidades mínimas que debe tener:

• La aplicación debe permitir a la usuaria ver los items de la data en una visualización, que puede ser tipo tarjetas o cualquier otra forma que tú decidas como la adecuada (pero desde aquí referimos a los items como "tarjetas"). Cada una de las tarjetas 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". Este es un paso importante para que tu aplicación tenga la estructura requerida

• 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. Si vas a filtrar u 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, la siguiente data correspondiente a Ada Lovelace:

  {
    "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="https://github.com/Famelzulo/Data-Verse/raw/main/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. Puede ser una propiedad computada de cada item, como una propiedad adicional (por ejemplo, el índice de masa corporal de cada pokemon) o unas estadísticas de la data completa (por ejemplo, total de personas nacidas en los años 80s).

• 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>).
  • Una alternativa es ofrecer la usuaria un ordenamiento mas complejo. Podrías implementar ordenar por varios propiedades. En este caso sería con un <select> con un atributo de datos data-testid="select-sort", y que contiene hijos <option> con un value del nombre de la propiedad con cual vas a ordenar. (Por ejemplo, <option value="name">Nombre</option>). También, necesitarás otro control (<radio>,<select>, etc.) para decir que el ordenamiento es ascendente o descendente. Este control secundaria tendrá un atributo name="sort-order", y tiene values asc y desc.

• Las funcionalidades de ordenar deben operar sobre la data filtrada. Por ejemplo, si filtro los pokemones de tipo fuego y luego los ordeno por nombre ascendente, la aplicación deberá mantener el filtro aplicado y ordenar los pokemones de tipo fuego.

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

Los siguientes wireframes, son ejemplos de una interfaz que puede cumplir con esta funcionalidad. Como podrás ver, estos diseños cumplen con la metodología Mobile First, la misma que te recomendamos utilizar en todos tus proyectos:

Diseño Mobile:

• Wireframe mobile 1
• Wireframe mobile 2

Diseño Desktop:

• Wireframe desktop 1
• Wireframe desktop 2

5. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts); ver Parte opcional más arriba.

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/index.html

Como en el proyecto anterior, existe un archivo index.html. Como ya sabes, acá va la página que se mostrará a la usuaria. También nos sirve para indicar qué scripts se usarán y unir todo lo que hemos hecho.

src/main.js

Recomendamos usar src/main.js para todo tu código que tenga que ver con mostrar los datos en la pantalla. Con esto nos referimos básicamente a la interacción con el DOM. Operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers).

En este archivo encontrarás una serie de imports listos para cargar las diferentes fuentes de datos.

Por ejemplo, los datos con los que vas a trabajar, los encontrarás en la siguiente línea:

import data from './data/dataset.js';

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.

• computeStats(data): la función compute o calcular, nos permitirá hacer cálculos estadísticos básicos para ser mostrados de acuerdo a la data proporcionada, esta función debe usar el método reduce.

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, ...).

src/data

En esta carpeta están los datos con los que vas a trabajar (los datos de ejemplo o los datos que generarías con ayuda de la inteligencia artificial).

test/dataFunctions.spec.js

En este archivo tendrás hacer pruebas unitarias de las funciones implementadas en el archivo dataFunctions.js. (filterBy, sortBy, etc.)

test/data.js

En esta archivo puedes construir y exportar data "mock" para usar en los tests. Es mas fácil probar un arreglo de 5 elementos de un arreglo de 24, por eso vas a crear una muestra de la data que quieres probar. Como mínimo debes exportar un variable se llama data, pero puedes definir y exportar mas si sea necesario para tus tests.

src/view.js

Para alcanzar una mejor separación de responsabilidades en el código, éste archivo debe tener todas las funciones que se utilizarán para renderizar los elementos dinámicamente.

Al menos se requiere una función obligatoria:

• renderItems(data): esta función recibe el arreglo de data para renderizar los elementos de cada item, y debería volver un elemento DOM o un string de HTML.

Recuerda que todas las funciones que se encuentren en este archivo deberán ser exportadas para poder ser utilizadas en otros archivos.

Recomendamos esta estructura para no solo proporcionar un marco claro y organizado para el proyecto, facilitando la navegación comprensión, y escalabilidad del código, sino también para seguir un principio de diseño Separación de Responsabilidades en codigo, donde cada archivo y carpeta tiene una responsabilidad específica. La responsabilidad de los funciones en view.js es para crear partes del DOM con la data.

Esta no es la única forma de dividir tu código, puedes usar más archivos y carpetas, siempre y cuando la estructura sea clara para tus compañeras.

6. Hitos

Para abordar eficazmente un problema, resulta crucial adquirir una comprensión profunda del mismo. Una estrategia efectiva consiste en desglosarlo en problemas más pequeños, lo cual facilitará la identificación de las causas subyacentes y la formulación de soluciones más eficientes.

En el contexto de este proyecto, recomendamos adoptar un enfoque por hitos. Esta metodología te posibilitará concentrarte en un problema a la vez y monitorizar tu avance. A continuación, te proporcionamos un calendario de hitos que te servirá para estructurar tu trabajo.

• Hito 1
• Hito 2
• Hito 3
• Hito 4

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

Ejecuta las pruebas mientras desarrollas para confirmar que tu proyecto está logrando los objetivos. Si algunas pruebas no pasan, no permitas que esto te impida avanzar o finalizar el proyecto. Utiliza esta información para ver qué necesitas investigar y cambiar en tu código, y consulta con tu coach cualquier objetivo que tengas pendiente.

Nota: para el correcto funcionamiento de los tests, es necesario que tengas instalado Node.js (LTS) con la versión 14.0.0 o superior. Para verificar la versión de node ejecuta node -v en la terminal. Si el comando no te devuelve ninguna versión, necesitas instalarlo, para esto, puedes descargarlo desde su sitio oficial.

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>
  • [ ] Todas las etiquetas <label> usan el atributo for
  • [ ] <ul> esta usado para dibujar la data
  • [ ] Los hijos de <li> usan attributos de microdata itemscope e itemprop

Nota: Ten en cuenta que para poder testear el HTML de <ul> y <li> en tu proyecto es necesario que ya tengas una data creada, ya que a partir de la data se crearán estos elementos.

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 <li>
  • [ ] Uso de flexbox para el elemento que contiene los UI inputs

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

  • [ ] Uso de atributos de modelo de caja para los items <li>
  • [ ] Uso de atributos de modelo de caja para <header> o <footer>

Web APIs

• Uso de selectores del DOM

  • [ ] Uso de querySelector para seleccionar elementos del DOM.

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

  • [ ] Uso de 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.
  • [ ] Uso de 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 usuarias, escribe las Historias de Usuaria 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 usuarias.

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 (cumpliendo con la Definición de Terminado y los Criterios de Aceptación).

Generar los datos

La temática será a tu gusto, por ejemplo, pueden ser personajes importantes en la historia, personajes inventados, países, películas... etc.

En el próximo proyecto, con la ayuda de la inteligencia artificial, deberás hacer que la usuaria pueda chatear con la data generada. Por ejemplo, si la data está mostrando un país, la usuaria podría preguntarle en que año fue fundado o cuál es su capital, etc. Tenlo en cuenta a la hora de generar tu dataset.

Esta data la vas a guardar en un archivo javascript. Este archivo, debe exportar un arreglo con 24 objetos. Y la estructura de cada objeto debe ser la siguiente:

• id: Identificador único (no pueden haber dos elementos con el mismo id). Debe ser un string de no más de 32 caracteres, en minúscula, compuesto solo por letras, números, underscore (_) o guión (-). Por ejemplo: "ada-lovelace".

• name: El nombre del personaje, país, película, etc.

• shortDescription: Descripción corta del elemento. Esta descripción deberá tener como máximo 20 palabras.

• description: Descripción extendida del elemento. Esta descripción deberá tener entre 80 y 100 palabras. Al momento de mostrar este dato en pantalla puedes truncarlo para que no ocupe tanto espacio.

• imageUrl: URL de la imagen. Esta imagen será generada a través de alguna herramienta basada en inteligencia artificial. Una vez generada la imagen, y guardada en tu repo, deberás agregar la URL en este campo.

• facts: Un objeto con al menos 3 "hechos" o "info" sobre este elemento, en formato "nombre": "valor", por ejemplo:

  "facts": {
  "yearOfBirth": 1843,
  "placeOfBirth": "London, England",
  "mainField": "Computer Science",
  }

  Los nombres de las propiedades, deben estar en formato camelCase. Por ejemplo ninguno de los siguientes nombres sería válido:

  "facts": {
  "year_of_birth": 1843,
  "Place of Birth": "London, England",
  "MainField": "Computer Science",
  }

  Los valores de las propiedades, sólo pueden ser de tipo number, boolean o un string de no más de 64 caracteres (este no tiene restricciones sobre el tipo de caracteres que puede contener).

  Y por último ten en cuenta 2 cosas:

  • Todos los elementos del dataset deben compartir las mismas propiedades en facts, es decir, que si un elemento tiene una propiedad yearOfBirth, el resto de elementos del array también deben tener esa propiedad.
  • No es necesario que los nombres de las propiedades estén en inglés, "lugarDeNacimiento" es un nombre igual de válido.

• extraInfo: Y por último un campo libre opcional, similar a facts. Si lo necesitas, aquí puedes poner cualquier otro tipo de información en formato donde puedes poner otra info que necesites en formato "nombre": "valor", pero sin restricciones sobre el tipo de dato del valor. Por ejemplo:

  "extraInfo": {
  "imagePrompt": "Un texto bien, bien largo...",
  "writings": [
    "Vol. 1",
    "Vol. 2",
    "Vol. 3",
    "Vol. 4"
  ]
  }

Un ejemplo de data, según los requisitos anteriores podría ser:

export default [
  {
    "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",
    }
  },
  //... 23 objetos más
]

La data generada deberás reemplazarla por el contenido de este archivo: ./src/data/dataset.js.

El tiempo estimado que deberías dedicar a la generación de estos datos es de máximo un sprint. Si transcurrido un sprint, no tienes un conjunto de datos generados, deberás utilizar los datos de ejemplo ubicados en la ruta: ./src/data/dataset.js.

Las URLs de las imágenes dentro del archivo javascript, deben enlazar a las imágenes para cada elemento del array. Estas imágenes pueden ser generadas por la inteligencia artificial o imágenes que puedas encontrar en la web. Para la generación de imágenes te recomendamos usar el generador de imágenes de Bing. Una vez que tengas la imagen, descárgala u obtén su URL, para agregársela al dataset.

Una vez que tengas el archivo javascript completo, recuerda correr los test con npm run test para verificar que el archivo esté cumpliendo con lo solicitado.

Una vez que hayas delimitado tu campo de interés y generado el archivo javascript con la asistencia de la inteligencia artificial, dedica tiempo a comprender a fondo a tu usuaria y sus necesidades específicas. A partir de esta comprensión, podrás diseñar la interfaz que facilite una interacción más efectiva y una comprensión más completa de los datos presentados.

Nota: no te preocupes si no estás empleando toda la información generada en el dataset en tu interfaz, pero es necesario generarla por completo. Utilizarás el mismo dataset en el proyecto Dataverse Chat.

Prompt utilizado

Dentro del readme que armarás, debe incluir una captura de pantalla de tu prompt utilizado para generar los datos. Si utilizaste varios prompts, puedes adjuntar todas las capturas que necesites.

Diseño de la Interfaz de Usuaria

Prototipo de alta fidelidad

Usando los wireframes o bocetos (sketches) de tu solución de interfaz como base, lo siguiente es diseñar tu Interfaz de Usuaria (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 usuarias, 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 Usuaria (HTML/CSS/JS)

Luego de diseñar tu interfaz de usuaria 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.

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

• 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

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](https://curriculum.laboratoria.la/es/topics/html/html5/semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)

CSS

• [ ] Uso de selectores de CSS

  Links

  * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/css/intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

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

  Links

  * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/css/boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

• [ ] Uso de flexbox en CSS

  Links

  * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [Flexbox Froggy](https://flexboxfroggy.com/#es) * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

Web APIs

DOM (Document Object Model)

• [ ] Uso de selectores del DOM

  Links

  * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/dom/1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

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

  Links

  * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

• [ ] Manipulación dinámica del DOM

  Links

  * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)

JavaScript

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

  Links

  * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/basics/values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/basics/variables)

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

  Links

  * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)

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

  Links

  * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/loops) * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)

• [ ] Funciones (params, args, return)

  Links

  * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/functions/classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/functions/arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

• [ ] Uso de linter (ESLINT)

• [ ] Uso de identificadores descriptivos (Nomenclatura y Semántica)

• [ ] Diferenciar entre expresiones (expressions) y sentencias (statements)

Tipos de datos

• [ ] Diferenciar entre tipos de datos primitivos y no primitivos

• [ ] Arrays (arreglos)

  Links

  * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/arrays) * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

• [ ] Objetos (key, value)

  Links

  * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/objects/objects)

Testing en Javascript

• [ ] Pruebas unitarias (unit tests)

  Links

  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)

Módulos

• [ ] Módulos de ECMAScript (ES Modules)

  Links

  * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)

Control de Versiones (Git y GitHub)

Git

• [ ] 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

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

• [ ] GitHub: Despliegue con GitHub Pages

  Links

  * [Sitio oficial de GitHub Pages](https://pages.github.com/)

• [ ] 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](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)

AI Prompting

• [ ] Dando Instrucciones

  Links

  * [Dando Instrucciones | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/instructions)

• [ ] Few shot prompting

  Links

  * [Few shot prompting | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/few_shot)

10. Pistas, tips y lecturas complementarias

Primeros pasos

Súmate al canal de Slack #project-dataverse 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 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é?
• ¿Cuándo utilizan o utilizarían el producto?
• Toda tu investigación previa debe tener como resultado todas las Historias de Usuaria 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_and_knife: 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. :arrow_down: 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 :traffic_light: 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! :rocket:

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.

11. Consideraciones para pedir tu Project Feedback

Antes de agendar tu Project Feedback con un coach:

• Cumple con los criterios mínimos de aceptación al ejecutar npm run test:oas
• Cumple con 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
• Cumple con las pruebas end to end al ejecutar npm run test:e2e

No es necesario que todas las pruebas pasen con 100% para poder tener tu Project Feedback. El objetivo de los tests no es bloquearte, pero es importante que comprendas qué objetivos tienes pendientes y discutas con tu coach si alguno de ellos es crucial para lograrlo antes de tu Project Feedback.

A continuación, antes de tu Project Feedback con un coach asegúrate que tu proyecto:

• Esta libre de errores de eslint al ejecutar npm run pretest
• Está subido a GitHub y desplegado en GitHub Pages
• Captura de pantalla del prompt utilizado para generar los datos.
• Tiene un README.md con la siguiente:
  • Definición del producto clara e informativa
  • Historias de usuario
  • Un Diseño de la Interfaz de Usuaria (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.