- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Definición y Objetivos del Proyecto
- 4. Historias de Usuario
- 5. Diseño de Interfaz de Usuario
- 6. Objetivos de Aprendizaje
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 los usuarios, necesitamos entender y procesar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.
- Se consideró como usuario principal personas que no saben de pokémon y quieren empezar a aprender sobre este juego y los pokémon de modo que se consideró que la que la página fuera lo más accesible posible para los usuarios
- Creamos una pagina que permite a los usuarios conocer información a detalle en el cual podra ordenar alfabeticamente, filtrar por tipo y buscar cada pokemon.
- Pokémon: En este set encontrarás una lista con los 251 Pokémon de la región de Kanto y Johto, junto con sus respectivas estadísticas usadas en el juego Pokémon GO.
Definición del producto
Niños, jovenes y adultos (Desde los 6 - 45 años),
Sin conocimiento previo del juego que deseen navegar en una web confiable y agradable para aprender caracteristicas de los pokemones para convertirse en un maestro pokemon.
* Que los usuarios puedan tener una herramienta donde consultar informacion de pokemones .
* Reconocer a los pokemones Nombre y tipo .
* Puedan tener una navegación intuitiva.
* Mostrar 251 pokemons en la pagina principal cada uno con sus tres características principales
(imagen,número de pokemon, nombre y tipo)
* Se presentara una gráfico con los tipos de cada pokemon
* Filtrar por Tipo
* Ordenar pokemons alfabéticamente de A-Z
* Ordenar pokemons alfabéticamente de Z-A
* Buscar por nombre a un pokemon
Quien -> Yo, como usuario
Qué?-> Ver todos los pokemones en la pantalla.
Para?-> Poder escoger un pokemon.
### Criterios de Aceptación
- [x] **Encabezado con imagen de Pokemon Go.**
- [x] **Que el main tenga una imagen de fondo (wallpaper de Pokemon)**
- [x] **Visualizar los pokemones en lineas, haciendo scroll hacia abajo para poder visualizarlos a todos.**
- [x] **Que se muestren todos los nombres de los Pokemones**
- [x] **Mostrar todos los números de los pokemones**
- [x] **Que todos los pokemones se muestren en un marco con bordes redondeados.**
### Definición de terminado
- [x] **Fiel al prototipo**
- [x] **Sea responsive. Que permanezca anclado mientras dar scroll.**
- [x] **Despliegue en github.**
- [x] **Testing**
Quien -> Yo, como usuario
Qué? -> Quiero filtrar todos los pokemones por tipo: Planta, Fuego, Agua…
Para? -> Aprender a escoger los pokemones por tipo dependiendo de la batalla pokemon que tenga.
### Criterios de Aceptación
- [x] Un botón que despliegue un menú con las opciones de tipo.
### Definición de terminado
- [x] Fiel al prototipo
- [x] Que el código no marque error.
- [x] Despliegue en GitHub.
- [x] Testing
Quien -> Yo, como usuario
Qué? -> Buscar los pokemones por nombre
Para? -> Aprender a escoger los pokemones por tipo dependiendo de la batalla pokemon que tenga.
### Criterios de Aceptación
- [x] Input que permita buscar por teclado los nombres de los pokemones.
### Definición de terminado
- [x] Fiel al prototipo
- [x] Que el código no marque error.
- [x] Despliegue en GitHub.
- [x] Testing
Quien -> Yo, como usuario
Qué? -> Conocer los nombres de manera ordenada
Para? -> Reconocerlos más fácil dependiendo de la batalla pokemon que tenga.
### Criterios de Aceptación
- [x] Un botón que despliegue las opciones A-Z y Z-A
### Definición de terminado
- [x] Fiel al prototipo
- [x] Que el código no marque error.
- [x] Despliegue en GitHub.
- [x] Testing
Quien -> Yo, como usuario
Qué? -> Conocer cuántos pokemones hay en cada tipo.
Para? -> Reconocerlos más fácil los pokemones por tipo para la batalla pokemon que tenga.
### Criterios de Aceptación
- [x] Un botón que muestre una tabla y gráfica con los tipos de pokemones
### Definición de terminado
- [x] Fiel al prototipo
- [x] Que el código no marque error.
- [x] Despliegue en GitHub.
- [x] Testing
Para evaluar la usabilidad de nuestra página web, realizamos pruebas con usuarios reales y solicitamos su feedback a través del canal de Slack del equipo. Los usuarios (compañeras y coaches) probaron la página desplegada en GitHub y nos brindaron sus opiniones y sugerencias para mejorar la navegación y la experiencia de usuario. A partir de estos test de usabilidad, pudimos identificar áreas de mejora y realizar ajustes en la interfaz para lograr una mejor experiencia para el usuario.
- En el filtro por tipo, podrían agregar la opción "todos" para no tener que retroceder para ver todos los pokemons otra vez.
- Las imágenes de los pokemones centrarlos un poco y en el buscar por nombre, capaz que las letras podrián ser de un tamaño mas pequeño..Espero que les sirva..saluditos
- cuando selecciono un filtro nunca me indica que fue lo que filtre, esa info siempre debe ser visible para el usuario lo que podrian hacer es cambiar el texto del boton por la opcion seleccionada
- como no hay nada debajo del nombre del pokemon podrian reducir el tamaño de la carta y asi mostrar mas pokemones
- Tal vez echar un ojo en las funciones de ordenar para unificrlas dado que son basicamente el mismo codigo
- Modificar el header de un color solido a uno mas vistoso en este caso fue una imagen acorde con la pagina.
- Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
- Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
- Que la interfaz siga los fundamentos de visual design.
Nuestras pruebas unitarias para el archivo src/data.js cumplen con las especificaciones técnicas del proyecto, proporcionando una cobertura de del 100% en statements, functions, lines, y branches. Esto nos asegura que nuestras funciones están siendo probadas exhaustivamente y que cualquier error o fallo en el código será detectado. Lo que nos asegura que nuestro proyecto es escalable.
- Usa VanillaJS.
- Pasa linter (
npm run pretest
) - Pasa tests (
npm test
) - Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
- Incluye Definición del producto clara e informativa en
README.md
. - Incluye historias de usuario en
README.md
. - Incluye sketch de la solución (prototipo de baja fidelidad) en
README.md
. - Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
en
README.md
. - Incluye el listado de problemas que detectaste a través de tests de
usabilidad en el
README.md
. - UI: Muestra lista y/o tabla con datos y/o indicadores.
- UI: Permite ordenar data por uno o más campos (asc y desc).
- UI: Permite filtrar data en base a una condición.
- UI: Es responsive.
- Uso de HTML semántico
- Uso de selectores de CSS
- Modelo de caja (box model): borde, margen, padding
- Uso de flexbox en CSS
- Uso de selectores del DOM
- Manejo de eventos del DOM (listeners, propagación, delegación)
- Manipulación dinámica del DOM
- Diferenciar entre tipos de datos primitivos y no primitivos
- Arrays (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)
- Variables (declaración, asignación, ámbito)
- Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
- Uso de bucles/ciclos (while, for, for..of)
- Funciones (params, args, return)
- Pruebas unitarias (unit tests)
- Módulos de ECMAScript (ES Modules)
- Uso de linter (ESLINT)
- Uso de identificadores descriptivos (Nomenclatura y Semántica)
- Diferenciar entre expresiones (expressions) y sentencias (statements)
- 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
- GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
- Crear prototipos de alta fidelidad que incluyan interacciones
- Seguir los principios básicos de diseño visual
- Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad