- 1. Introducción
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Como se resuelve la problemática del usuario
- 5. Checklist
Escogimos el proyecto "Data-Lovers" ya que nos interesaba crear un tipo de enciclopedia de campeones respecto a un videojuego en el que ambas integrantes tenemos interés, y este es "League of Legends".
Nuestro primer pensamiento a la hora de empezar a trabajar en el proyecto fueron nuestras historias de usuario. Pensamos que deberíamos hacer primero y lo primero que se nos vino a la mente fue crear unos diseños básicos en figma de cómo podría ser una pagina que muestre los campeones, pensando en pedir feedback a los usuarios de que pensaban de la página, porque la usarían y que creen que deberíamos implementar. Así quedaron los dos primeros diseños:
Este primer diseño se basaba en usar el mapa de la tierra donde pasan los hechos del juego para que los usuarios se familiaricen con los diferentes lugares de runeterra, en este mapa podían elegir entre las diferentes regiones y ver los campeones que viven en estas, al dar click en el campeón se desplegaría una parte de su historia, su título y sus stats.
En este segundo diseño el usuario entraría con su cuenta, automáticamente se mostrarían todos los campeones, tendría dos filtros, uno por rol y otro por A-Z y una barra de búsqueda. Si el usuario le daba click mostraría su nombre, titulo y historia.
Teniendo en claro que nuestro público objetivo serían los jugadores de LOL (que son jóvenes de los 13 a los 25 años) buscamos a 4 personas, dos que nunca hayan jugado y dos que sean jugadores activos, les presentamos los bocetos para así recibir su respectivo feedback, haciéndoles preguntas como ¿Por qué usarían nuestra página? y ¿cómo la utilizarían?, dando como resultado las siguientes historias de usuario:
- "Como usuaria que apenas se está adentrando al mundo del juego, no me parece buena idea utilizar el mapa de las regiones ya que no seria capaz de identificar los campeones que quiero ver, me parece una mejor idea que con un solo click pueda ver a todos los campeones en una lista, ya que para mi es mas importante saber de los campeones antes de meterme en el juego."
- "Apenas voy empezando en el juego, y me gustaría que hubiera un botón o un filtro, que cuando le haga click me muestre los campeones más fuertes y los menos fuertes, ya que me ayudaría a escoger con que campeón ir cuando me inicie en el juego."
- "Me gusta la estética de mostrar todas las tarjetas de los campeones, pero me gustaría que cuando pase el mouse por encima se eleve la tarjeta y el nombre del campeón, y que además muestre un color a la hora de hacerlo. Siento que le daría un estilo más dinámico así."
- "Yo como usuario quisiera que la pagina tuviera una barra de busqueda, donde solo escriba el nombre del campeón y me salga su tarjeta."
A partir de lo anterior, establecimos tareas diarias y de sprint relacionados al desarrollo del código de nuestra pagina web, donde concluimos que deberíamos tener estos elementos como principales:
- Mostrar las tarjetas de los campeones sin necesidad de iniciar sesión
- Un filtro que muestre al campeón mas fuerte y el más débil
- Las tarjetas se deben elevar y mostrar un color para más dinamismo
- Implementar una barra de búsqueda para que los usuarios puedan buscar a su campeón favorito
Con lo anterior creamos este diseño de alta fidelidad según las necesidades de nuestros usuarios:
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.
- 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)
-
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 un producto o servicio poniendo a la usuaria 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
Nuestra página web soluciona los problemas planteados en las historias de usuario, como son:
- A. El que no se requiera de inicio de sesión para descubrir a los campeones (champions) del videojuego "League of Legends".
- B. El poder visualizar a todos los campeones y sus stats, identificando así a los campeones más fuertes, con mayores niveles de vida o defensa, entre otros.
- C. El poder reconocer a los campeones dentro de cada uno de los roles que cumplen en el videojuego.
- D. La existencia de una barra de busqueda que permita a los jugadores con mayores conocimientos dentro del videojuego, localizar a los campeones por su nombre, junto con su historia (Lore).
- E. La elevación de la card del campeón al que se esté indicando con el mouse, para así lograr su ubicación de forma sencilla.