PkéDex

1. Definición del producto

En este proyecto se contruyó una página web de pokemones para visualizar un conjunto (set) de datos generado con ChatGPT.

La página web permite visualizar la data, filtrarla, ordenarla y calcular estadística por tipo de pokemon y realizar la busqueda de algun pokemon en particular. La interfaz es sencilla haciendo que el uso de la aplicación sea intuitiva y fácil de usar.

---

2. Funcionalidades

visualizar la data, filtrarla, ordenarla y calcular alguna estadística.

[ x ] 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 ascendentemente, la aplicación deberá mantener el filtro aplicado y ordenar los pokemones de tipo fuego.

[ x ] 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".

[ x ] 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.

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

***

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

Criterios de código

HTML

• Uso de HTML semántico

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

CSS

• Uso de selectores de CSS

  • [ x ] Uso de selector class para los items
  • [ x ] Uso de flexbox en sentido row y column
  • [ x ] Uso de flexbox para el elemento que contiene los items
  • [ x ] Uso de flexbox para el elemento que contiene los UI inputs

Web APIs

• Uso de selectores del DOM

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

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

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

• Manipulación dinámica del DOM

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

JavaScript

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

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

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

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

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

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

  • [ x ] una función sortBy que tiene 3 parámetros (data, sortBy, sortOrder) y devuelve el arreglo ordenado
  • [ x ] una función filterBy que tiene 3 parámetros (data, filterBy, value) y devuelve el arreglo filtrado
  • [ x ] 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)

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

• Objetos

  • [ x ] Uso de notación de punto para acceder propiedades
  • [ x ] Uso de notación de brackets para acceder propiedades

• Módulos de ECMAScript (ES Modules)

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

---

4.Generar los datos

La estructura de cada objeto de nuestro data es la siguiente:

• id: Identificador único, el id es un string de no más de 32 characteres, en minúscula, compuesto solo por letras, números, underscore (_) o guión (-).

• name: El nombre de los pokemones.

• type: Un objeto que tiene 2 propiedades typeName y typeImage. typeName -> muestra un a un arreglo con los nombres de los tipos de pokemon, typeImage-> muestra un array de las imagenes de los tipos de pokemones.

• image: URL de la imagen del pokemon.

• weaknesses: Un objeto que tiene 2 propiedades weaknessesName y weaknessesImage. weaknessesName -> muestra un arreglo con los nombres de las debilidades de los pokemones, weaknessesImage-> muestra un array de las imagenes de las debilidades de los pokemones.

• baseStats: Un objeto con al menos 4 , en formato "nombre": "valor", por ejemplo:

  "baseStats": {
    "hp": "40",
    "attack": "80",
    "defense": "35",
    "speed": "70",
  }

• height: La altura del pokemón.

• category: La categoria del pokemón.

• ability: La abilidad del pokemón.

• weight: El peso del pokemón.

  Los valores de las propiedades, son tipo number, boolean o un string, objeto y array.

La data final de nuestro proyecto, según los requisitos anteriores es la siguiente:

export default [
  {
    id: "6",
    name: "Charizard",
    type: {
      typeName: ["Fire", "Flying"],
      typeImage: ["./assets/fuego.png", "./assets/volador.png"],
    },
    image: "./assets/Charizard.png",
    weaknesses: {
      weaknessesName: ["Water", "Electric", "Rock"],
      weaknessesImage: [
        "./assets/agua.png",
        "./assets/electrico.png",
        "./assets/roca.png",
      ],
    },
    baseStats: {
      hp: "78",
      attack: "84",
      defense: "78",
      speed: "100",
    },
    height: "1.7",
    category: "Flame",
    ability: "Blaze",
    weight: "90.5",
  },
  //... 23 objetos más
];

---

5. Prompt utilizado

---

6. Diseño de la Interfaz de Usuaria

Prototipo de alta fidelidad

Prototipo Móvil

Prototipo Web

Figma

---

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

• [ x ] Uso de HTML semántico

  Links

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

CSS

• [ x ] Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

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

• [ x ] Uso de flexbox en CSS

  Links

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

Web APIs

• [ x ] Uso de selectores del DOM

  Links

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

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

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

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

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

• [ x ] Objetos (key, value)

  Links

  • Objetos en JavaScript

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

  Links

  • Valores, tipos de datos y operadores
  • Variables

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

  Links

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

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

  Links

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

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

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

  Links

  • import - MDN
  • export - MDN

• [ x ] Uso de linter (ESLINT)

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

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

Control de Versiones (Git y GitHub)

• [ x ] Git: Instalación y configuración

• [ x ] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• [ x ] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

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

• GitHub: Despliegue con GitHub Pages

  Links

  • Sitio oficial de GitHub Pages

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

Centrado en el usuario

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

Diseño de producto

• [ x ] Crear prototipos de alta fidelidad que incluyan interacciones

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

Investigación

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

• [ x ] Dando Instrucciones

  Links

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

• [ x ] Few shot prompting

  Links

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

---

8. Herramientas

• Git
• GitHub
• GitHub Pages
• [Mozilla]
  • [https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach]
  • [https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map]
  • [https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce]
  • [https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort]
• [Trello][https://trello.com/b/iP4j4Jfu/dataverse-pokemones]
• [Figma][https://www.figma.com/file/twg4MrXgEyAfpr7BHI7aYH/Data-Pokemon?type=design&node-id=0-1&mode=design&t=xSH2aC8qhrQSdYBp-0]
• Node.js
• Jest
• [Chart][https://www.chartjs.org/docs/latest/]