• 1. Definición del producto.
• 2. Objetivos del proyecto.
• 3. Historias de usuario.
• 4. Prototipo de alta fidelidad.
• 5. Prototipo de baja fidelidad.
• 6. Objetivos de aprendizaje.
• 7. Links de ayuda.
• 8. Link del proyecto.

Pokedex-Data Lovers es un sitio web dirigido a usarios que sean fans de la franquicia pokemon y desean saber mas información de los pokemones. La pagina web brinda a los usuarios la facilidad de realizar diversas acciones de forma sencilla , intuitiva e iteractiva.

Las principales acicones que el usuario podran realizar son:

• Buscar un pokemon por nombre o número.
• Ordenar todos los pokemones disponibles por nombre (ascendete y descente). *Ordenar los pokemones previamente filtrados por nombre (ascendete y descente).
• Ver la información detallada de un pokemon a través de una tarjeta llamativa e iteractiva.
• ver una gráfica con las estadisticas de los pokemones basados en su tipo.
• ver que tipo de pokemon más comunes y el menos común.

Desarrollar una pagina web que permite visualizar la data, ordenar (ascendente y descendente), filtrar datos y mostrar una gráfica con las estadisitcas de tipo pokemon utilizando las herramietas tecnológicas para sastifacer las necesidades de los usuarios finales.

*Nuestra obtención de historias de usuario se basó en la descripción del README y en la búsqueda de páginas que mostraban datos del pokémones. Asi mismo de preguntas informales a usuarios que jugaban pokémonGo sobre qué datos del pokémon son relevantes para jugar. Con esta información obtuvimos ocho historias de usuario.

CRITERIOS DE ACEPTACIÓN

1. Se mostrará en una ventana al dar click en el listado de pokemones.
2. Se mostrará la imagen del pokémon, nombre, descripción, generación, tipo, movimiento rápido, ataque especial, debilidades y resistencia.
3. Se podrá cerrar la ventana y regresar al listado de pokemones. DEFINICIÓN DE TERMINADO
4. Todo el código de las modificaciones será subido a la rama DEVELOP.
5. La colaboradora podrá descargar los cambios en su local.

CRITERIOS DE ACEPTACIÓN

1. Mostrará un paginado que permita al usuario recorrer de manera manual el listado de pokemones.
2. Solo mostrará 12 pokemones por página.
3. Mostrará un paginado con númeral y botónes que permitan avanzar.
4. Se mostrará cada vez que exista más de 12 pokemones en la lista. DEFINICIÓN DE TERMINADO
5. Todo el código de las modificaciones será subido a la rama DEVELOP.
6. La colaboradora podrá descargar los cambios en su local.

CRITERIO DE ACEPTACIÓN

1. Se verá en una tabla.
2. Mostrar el número, nombre, generación, tipo y Pokémon.
3. Permitir ver la información del pokémon al dar click en Ver Pokemon.
4. Interacción en ver Pokemon. DEFINICIÓN DE TERMINADO
5. Todo el código de las modificaciones será subido a la rama DEVELOP.
6. La colaboradora podrá descargar los cambios en su local.

CRITERIO DE ACEPTACIÓN

1. Se verá en una tabla.
2. Mostrar el número, nombre, generación, tipo y Pokémon.
3. Permitir ver la información del pokémon al dar click en Ver Pokemon.
4. Interacción en ver Pokemon. DEFINICIÓN DE TERMINADO
5. Todo el código de las modificaciones será subido a la rama DEVELOP.
6. La colaboradora podrá descargar los cambios en su local.

CRITERIOS DE ACEPTACIÓN

1. El elemento se selección permitirá al usuario poder elegir el tipo ordenamiento.
2. Cuando el usuario da clic en tipo ordenamiento (ASCENDENTE) mostrar listado de pokemones que inicien de la letra A hasta Z.
3. Cuando el usuario da clic en tipo ordenamiento (DESCENDENTE) mostrar listado de pokemones que inicien de la letra Z hasta A. DEFINICIÓN DE TERMINADO
4. Una vez terminado la codificación se subirá los cambios en la rama develop.
5. La colaboradora podrá descargar los cambios en su local.

CRITERIOS DE ACEPTACIÓN

1. Se mostrará una gráfica que muestre el conteo de tipo de pokemon.
2. Se mostrará un contreo de generacion de pokemon.
3. Se mostrará en otro apartado diferente a la página principal.
4. Permitirá al usuario regresar a la página principal. DEFINICIÓN DE TERMINADO
5. Una vez terminado la codificación se subirá los cambios en la rama develop.
6. La colaboradora podrá descargar los cambios en su local.

CRITERIOS DE ACEPTACIÓN

1. Se deberá ordenar los datos filtrados por el usuario.
2. El usuario deberá seleccionar el tipo de ordenamiento (ASCENDENTE O DESCENDENTE). DEFINICIÓN DE TERMINADO
3. Una vez terminado la codificación se subirá los cambios en la rama develop.
4. La colaboradora podrá descargar los cambios en su local.

CRITERIOS DE ACEPTACIÓN

1. El listado se mostrará responsivo.
2. La tarjeta pokemon se mostrará responsiva.
3. La gráfica se mostrará responsiva.
4. Paginado se mostrará responsivo DEFINICIÓN DE TERMINADO
5. Una vez terminado la codificación se subirá los cambios en la rama develop.
6. La colaboradora podrá descargar los cambios en su local.

Decidimos utilizar colores basados en el logo oficial de Pokémon para que amenizara la experiencia de usuario, el funcionamiento es mostrar una tabla de pokemones que permita realizar búsquedas simples y poder consultar los datos e imagen del pokémon.

• Link a FIGMA del proyecto

En la siguiente imagen se podrá observar nuestro boceto del cual fue el punto partida para realizar el prototipo de alta fidelidad en figma. Los cambios fueron surgiendo conforme a las necesidades que se hiban presentando.

El proyecto fue realizado usando Javascrip, HTML y CSS de cada uno de ellos se obtuvo un aprendizaje para poder concluir el proyecto a continuacion se detalla sobre lo aprendido.

• Entender y reconocer el uso de HTML Semantico para la mejora de la accesibilidad, el SEO, facilita el mantenimiento y la colaboración.
• Desarrollar la maquetación HTML en concordancia con el prototipo en Figma.

• Implementacion selectores CSS para estilizar y dar formato al contenido

• Uso de modelos de caja para para controlar y definir el diseño y la presentación de los elementos HTML en una página web. En el modelo de caja cada elemento en HTML se representa como una caja rectangular, y el modelo de caja de CSS describe cómo se calcula el tamaño total de esa caja, incluyendo el contenido, el relleno (padding), los bordes (border) y los márgenes (margin).

• Uso de Flexbox para crear diseños flexibles y responsivos en la página web. Esto nos permitio organizar y alinear de manera eficiente los elementos dentro de un contenedor

Uso de selectores del DOM

Se utilizaron para seleccionar y acceder a elementos específicos en la página web, lo que permitio interactuar con ellos y manipular su contenido, estilo, atributos y eventos.

• Listeners: se utilizaron para detectar y responder a eventos que ocurren en los elementos HTML de la página web.
  • EventTarget.addEventListener()
  • El objeto Event
• Manipulacion dinámica del DOM: fue utilizado par modificar y actualizar el contenido, la estructura y el estilo del sitio web en tiempo real mediante JavaScript, permitiendonos agregar, eliminar y modificar elementos y sus atributos, así como cambiar el contenido y el estilo de los elementos existentes
  • Node.appendChild()
  • Document.createElement()
  • Element.innerHTML
  • Node.textContent
  • Element.classList.add()
  • Element.classList.remove()
  • Element.value
  • Event.target

Se utilizo en lenguaje de desarrollo en java scritp vainilla para desarrollar la logica y el funcionamiento del sitio usando:

• Datos primitivos y no primitivos *Variables (declaración, asignación, ámbito)
• Arrays
  • Array.filter()
  • Array.sort()
  • Array.map()
  • Array.foreach()
  • Array.find()
  • Array.findIndex()
  • Array.slice()
  • Array.length
• Funciones (parámetros, argumentos, valor de retorno).
• Uso de condicionales (if y lógica booleana). Uso de bucles/ciclos (for).
• ES Modules (import | export).
• Objetos (key, value)
• Pruebas unitarias jest (unit tests).

Para poder mostrar la grafica de los tipos de pokemones fue necesario incluir el siguente elemento: *Chart.js: es una biblioteca de graficos de java scritp que nos permite incluir graficas de forma sencilla y flexible.

Git flow: Se utlizo este modelo de ramificación ya que nos facilita la organización del trabajo y el seguimiento de las diferentes etapas de desarrollo.

• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote).
• Git repositorios de GitHub (clone, fork, gh-pages).
• Git: Integración de cambios entre ramas (branch, checkout, merge, reset)
• GitHub: Despliegue con GitHub Pages

• Organizar y dividir el código en módulos (Modularización).
• Utilizar identificadores descriptivos (Nomenclatura | Semántica).
• Utilizar linter para seguir buenas prácticas (ESLINT).

• COMANDOS
• COMANDOS
• COMANDOS

• FLIP
• FLIP

• MODAL

• METODOS
• METODOS

• Link del proyecto