| title | disqus |
|---|---|
<Pokétoria> |
hackmd |
- 1. Resumen del proyecto:📑
- 2. Descripción del proyecto:📝
- 3. Investigación UX🕵
- 4. Aspectos generales📎
- 5. Pruebas unitarias💯
- 6. CheckList✔️
- 7. Recursos💬📚
Este proyecto tiene la finalidad de realizar una página web responsive, en donde nuestros usuarios potenciales tendrán la oportunidad de interactuar, filtrando y ordenando, desde una base de datos externa. A su vez, la data cuenta con la información completa de los 251 Pokémon de las regiones Kanto y Johto. Por ende, se importará y extraerá todos los datos requeridos, para cubrir las necesidades de los usuarios.
La página web está pensada para los jugadores de Pokémon clásico (Game Boy, Nintendo DS). En ella, los usuarios podrán encontrar información trascendental sobre sus pokemon favoritos, como también filtrarlos según su región y tipo. Se pensó en la comodidad de los usuarios y se añade la opción de poder ordenarlos alfabéticamente, numéricamente y de acuerdo a sus estadísticas base de manera ascendente o descendente, respectivamente. Se diseñó una tarjeta informativa sobre cada pokemon, de tal manera que los usuarios potenciales tengan la oportunidad de tener un poco más de información sobre el pokemon elegido.
La aplicación va dirigida a los usuarios catalogados como entrenadores pokemon, en el rango de edades entre los 15 y 35 años. Que hayan jugado pokemon clásico de gameboy (rojo, azul, oro, plata y cristal).
Para el proyecto se optó por un estilo clásico, para transmitir un sentimiento nostálgico debido a que nuestros usuarios hacen parte de la comunidad pokemon desde hace aproximadamente 20 años.
Uno de los objetivos fundamentales es transmitir la información clara, precisa y amigable ante la vista de los usuarios.
La data contiene imágenes de diversos colores, por tal razón, se decidió encontrar un equilibrio para no sobrecargar la aplicación.
Se realizo una encuesta en donde encontramos las necesidades de los diferentes usuarios.
-
¿Qué les gustaría visualizar en una app pokemón?
- P1: Me gustaría que fuera como en Pokémon Esmeralda, cuando uno seleccionaba un Pokémon en el listado, se mostraba un lado A y un lado B, el primero contenía información general y gráfica del Pokémon y el segundo contenía las estadísticas técnicas.
- P2: Me gustaría tener los stats ordenados en una sola pestaña: Ataque Defensa Ataque especial Defensa especial Velocidad Precisión (nunca lo incluye y el jugador debe calcularlo https://pokemon.fandom.com/es/wiki/Precisi%C3%B3n) Me gustaría una pestaña que comparara un Pokémon con otro según sus fortalezas y debilidades, ordenadas de mayor a menor.
- P3: Imágenes, datos del pokémon, que lo pueda filtrar por lista de ataques, por el tipo, habilidades, como evolucionan y posible descripción del pokémon.
- P4: Imágenes, video, características de los pokémon, tipo (tipo aire, tierra, agua), descripción de los pokemones, evoluciones.
- P5: Yo diría que el nombre de los tipos, los ataques y evoluciones.
-
¿Cómo te gustaría la pantalla de Bienvenida a la app?
- P1: Me gustaría mirar las diferentes secciones de la app (novedades, lista de añadidos, si existe blog, la pantalla principal sea un resumen de lo nuevo en cuanto a la aplicación.
- P2: Me gustaría mirar todos los pokemones, especie de un collage, me gustaría visualizar una lista de los más buscados, populares, random etc (un ranking)
- P3: Me gustaría que tuviera la estética de Pokémon viejito y tuviera de una los filtros antes de pasar al listado de los pokémon.
- P4: En la vista inicial solo nombre número e imagen. Buscador con una grilla con la imagen y los nombres de pokemon ordenado por su número en la dex.
-
Tú como maestro Pokémon, ¿Qué características pokémon te gustaría visualizar en una primera vista?
- P1: Las estadísticas principales: Ps, Ataque, defensa, ataque especial, defensa especial y velocidad y que me diga una frase de personalidad según sus estadísticas. Y la imagen de la silueta del Pokémon en comparación con la del entrenador.
- P2: Estadísticas principales, foto del Pokémon.
- P3: Ataque, defensa y velocidad.
- P4: Me gustaría ver el nombre, tipo, peso y habilidades principal.
- P5: me gustaría ver su foto principal, tipo y cuantas evoluciones tiene.
-
Si tuvieras un listado de pokémon, ¿Qué filtro te gustaría tener por ejemplo (clase, ataques, tipo etc)?
- P1: Puntos IV
- P2: Precisión
- P3: El de tipo lo considero muy importante y también por zona (ej: pradera, bosque, mar), por grupo huevo, según su evolución, estadísticas base.
- P4: Tipo, habilidad principal, peso, y evoluciones
- P5: Distancia, tipo, y habilidad.
- P6: Filtro por nombre, tipo y region.
-
Si tuvieras que elegir un pokémon para tu equipo ¿Te gustaría visualizar un rango sobre fortalezas vs debilidades?
- P1: Sí, es super importante
- P2: Justo lo había pedido en un pregunta anterior.
- P3: Sí sería muy útil en las batallas.
- P4: Si, seria de gran importancia.
- P5: Sì, me daria una ventaja de juego.
-
Para buscar un pokémon ¿Te gustaría visualizarlo por orden creciente o decreciente?
- P1: Creciente
- P2: Creciente
- P5: Que yo tenga la opcion de elegir.
- P6: Me gustaria de la A a Z. (Creciente).
- P7: Creciente
-
¿Te gustaría visualizar los tipos de pokémon en porcentaje?
- P1: No sé qué tan relevante sea.
- P2: No sería interesante.
- P3: No es necesario.
-
¿Te gustaría ver la frecuencia de aparición, tasa de fuga y captura en pokemon?
- P1:Me gustaría ver la probabilidad de que el Pokémon tuviera cierta naturaleza
- P3: Esas tasas serían tremendamente útiles y agregaría la información sobre huevos, cuánto tardan en eclosionar y cómo identificarlos.
- P4: Claro, es importantisimo.
- P5: Sì, claro, seria bueno para ir a la fija de captura.
-
¿Qué tipo de interfaz te gustaría (Listado, tarjetas, cuadros etc?
- P1: Lista.
- P3: Las tres están bien porque por lo general las Pokédex son así.
- P4: Con paginación (Pasando páginas). Depende el tipo de rendirización.
- P5: Me gustaria verlo de una.
- P6: Cuadros
-
¿Cómo te gustaría el interfaz de filtro por ej (mediante un botón, flechas etc)?
- P1: los filtros podrian ser si como botonsitos en la parte de arriba pero que sea un slider horizontal
- P2: Que se puedan elegir varios filtros al mismo tiempo y antes de ver el listado de los pokémon y uno que diga “Pokédex de Kanto” y “Pokédex de Johto”.
- P3: Botones
- P4: Que tengas las opciones de filtro, en donde tenga la posibilidad de elegir varios al mismo tiempo.
🗣️ Yo como entrenador Pokémon. Quiero que la pantalla de bienvenida tenga la estética de Pokémon clasico, tenga los filtros de Pokédex (una sección para Johto y otra para Kanto) y un breve resumen sobre el funcionamiento de la app. Para tener una idea clara sobre la app y usarla con practicidad.
- ✔️ Que sea agradable a la vista.
- ✔️Que la información sea clara.
- ✔️Que sea simple.
- ✔️Que sea responsive.
- ✔️ Que sea responsive.
- ✔️Que tenga colores agradables a la vista y relacionados con la temática.
- ✔️ Usar la semántica en html.
- ✔️ Usar los selectores correspondientes en CSS
- ✔️Usar flexbox.
🗣️ Yo como entrenador Pokémon. Quiero poderlos filtrar por tipo y regiones. Para poder acceder al listado de pokémon que más me interesan con facilidad.
- ✔️Que se pueda hacer combinaciones de filtro.
- ✔️Que la información sea clara.
- ✔️Que sea intuitivo (Facil de usar).
- ✔️Agradable a la vista.
- ✔️Responsive.
- ✔️Buenas practicas en cuanto a funciones.
- ✔️Manejo de arrays/arreglos
- ✔️Manejo de bucles (for, for while)
- ✔️Manejo del dom (Selectores, eventos)
- ✔️Manejo de objetos.
- ✔️ Manejo de flexbox en css
- ✔️ Pasar la prueba de la función filtro con el 70%
🗣️ Yo como entrenador Pokémon Quiero poder ordenar los Pokémon por su nombre alfabeticamente, número, promedio y equilibrio de sus stats base. Para encontrar el Pokémon adecuado a mis gustos y necesidades.
- ✔️Poder ordenar los diferentes pokemon a sus requerimientos.
- ✔️Que la forma de ordenar los Pokemon sea intuitiva.
- ✔️Que la página tenga colores agradables referente a la tematica.
- ✔️Ser responsive ( Tablet, desktop, mobile)
- ✔️Orden funcionales (alfabeticamente, número, suma y promedio )
- ✔️Pasar la prueba de la funcion orden con el 70%.
🗣️ Yo como entrenador Pokémon. Quiero visualizar la información (Imagen, Numero, Nombre, Tipo, Descripción. Tamaño y peso, estadisticas (Ataque, defensa, estamina), evoluciones, resistencia y debilidades) de cada pokemon en una tarjeta de dos lados (Lado A y Lado B). Para conocer un poco mas sobre el pokemon de mi interes.
- ✔️ Información clara y ordenada sobre los pokemon.
- ✔️Que la tarjeta no pierda la tematica de pokemon clasico.
- ✔️Los colores agradables y acorde a la tematica.
- ✔️Que seas responsive (Table, mobile, desktop)
- ✔️Que seas responsive (Table, mobile, desktop)
- ✔️Uso de grid y flexbox para el diseño.
- ✔️Semantica del html.
- ✔️Manejo del DOM.
- ✔️Manejo de objetos y arreglos.
Una vez definida la estética y obtenido los resultados de la encuesta, se hizo el prototipo de baja fidelidad y se mostró a los posibles usuarios para recibir feedback y realizar las modificaciones pertinentes.
Se recibió feddback muy específico como no hacer los bordes tan anchos para no desperdiciar espacio, quitar el letrero de bienvenida y cambiar la ubicación de los botones de región en la pantalla de bienvenida para mobile.
Al recibir el feedback del prototipo de baja fidelidad, se tuvieron en cuenta y se realizaron modificaciones, incluyendo esta vez un cambio en el lenguaje. Fue realizado en figma y se puede encontrar en: https://www.figma.com/file/6KWszydHYClirYXFeYuCJ3/poketoria?node-id=0%3A1
Este proyecto se realizó en dupla por : Danna Valentina Cárdenas Calderón y Lorraine Gelis Díaz. La interfaz del proyecto está desplegada usando GitHub Pages: https://lorrainegelis.github.io/BOG003-data-lovers/src/index.html El proyecto fue realizado en 4 sprints (semanas).
Para las pruebas Unitarias (tests) se crearon funciones y su respectiva configuración, de tal manera que se ejecutara el test teniendo en cuenta el comando “npm test”. Se logró superar la cobertura minima del 90% de statements, functions y lines, y un mínimo del 70% de branches.
- 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 link a Zeplin 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.
- https://www.youtube.com/watch?v=ky6wFiF5vMk&t=344s
- https://docs.google.com/presentation/d/e/2PACX-1vQhx9D36NjpH-Daea-ITPUDUzNL8ZiNAprq_7b5PSUrfutk45tEtaOLz2lmd8f54_5jX1hypDM8f8SM/pub?start=false&loop=false&delayms=60000#slide=id.g5282e1a53f_1_106
- https://pokemon.fandom.com/es/wiki/Lista_de_Pok%C3%A9mon_con_sus_estad%C3%ADsticas_base
- https://www.figma.com/file/6KWszydHYClirYXFeYuCJ3/poketoria?node-id=0%3A1
- https://fontmeme.com/es/fuente-pokemon/
- https://lms.laboratoria.la/cohorts/bog-2021-04-bootcamp-js-bog003/topics/css/02-responsive/03-rwd
- https://lms.laboratoria.la/cohorts/bog-2021-04-bootcamp-js-bog003/topics/javascript/04-arrays/03-filter-map-sort-reduce
- https://www.it-swarm-es.com/es/javascript/accederprocesar-anidados-objetos-matrices-o-json/1068080863/
- https://ed.team/blog/javascript-filtrar-elementos-de-un-array-con-filter
- https://ed.team/blog/javascript-filtrar-elementos-de-un-array-con-filter
- https://www.bitademy.com/tutorial/web-testing/_unit/
- https://www.spriters-resource.com/game_boy_advance/pokemonfireredleafgreen/sheet/3865/
- https://projectpokemon.org/home/pokedex/pokemon/usum/index-r18264/