- 1. Definición del producto
- 2. Historias de Usuario
- 3. Diseño de la interfaz de usuario
- 4. Objetivos de aprendizaje
'Harry Potter: Wizards Unite' es un nuevo videojuego de Warner Bros ambientado en el mundo de Harry Potter. Ha sido desarrollado por los creadores de 'Pokémon Go', Niantic, y eso hace que el juego tenga las mismas mecánicas que el juego basado en el mundo de Pokémon. De hecho, la base del mapa es exactamente la misma.
En cuanto a la historia, el mundo mágico ha llegado al mundo muggle y nosotros, como magos, tenemos que protegerlo. Para ello habrá que recuperar a todas las criaturas, así como proteger o salvar a los personajes principales de la saga literaria y cinematográfica.
El funcionamiento es sencillo: conforme camines irán apareciendo ciertos retos que completarás haciendo gestos en la pantalla o alineando elementos. Según cómo lo hagas conseguirás más o menos puntos de experiencia. A lo largo de las partidas irás subiendo de nivel y consiguiendo objetos, objetos que podrás usar a tu favor.
- Para conocer más sobre el juego click aquí
Harry Potter: Guide for Wizard Unite Gamers es una aplicación para los que inician en el juego, ya que sirve como una guía para conocer más de los personajes de la saga y así poder saber las características de nuestros personajes favoritos para poder utilizarla en el juego.
La aplicación se diseño inicialmente solo para manipular la data, pensando más en la parte visual. Sin embargo, al iniciar el proyecto nos dimos cuenta de que no le ofreciamos al usuario del juego lo que realmente necesitaba, así que reestructuramos nuestros prototipos para ofrecer la mejor experiencia a la hora de interactuar en la aplicación.
- Para acceder a nuestra aplicación click aquí
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO visualizar la lista de personajes y sus datos PARA conocer mas sobre ellos ( foto , nombre, casa ).
- Visualizar el nombre de la pagina.
- Ver los datos de cada personaje(foto, nombre, casa).
- Visualizar la interfaz en desktop.
- Visualizar la interfaz en mobile.
- Estructura HTML : Crear un "header" con el nombre de la página y un "main" para la data (HTML Semántico).
- Investigar como jalar data, como manipular objetos y arrays.
- Hacer una funcion para mostrar data en pantalla ( foto , nombre y casa) (Manejo objetos , arrays y eventos del DOM)
- Ajustar fotos de los personajes a un tamaño determinado (Selectores CSS)
- Crear caja que contenga (foto y datos : nombre y casa) ( CSS )
- Alinear las cajas en columnas de acuerdo al dispositivo ( CSS FlexBox)
- Adaptar la interfaz a distintos dispositivos (Responsive Design)
- Actualizar proyecto en git hub.
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO conocer detalladamente a cada personaje PARA aprender más del mundo mágico.
- Visualizar boton " Descubre más"
- Ver ventana emergente con las carasteristicas especificas del personaje al darle click al boton "Descubre más"
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear un header con el logo de la pagina.
- Ver boton "Descubre más" en la card de cada personaje.
- Crear Modal Cards
- Hacer función para enlazar el boton "Descubre más" con el Modal Card".
- Aprender a trabajar con pull request.
- Centrar los elementos dentro del Modal Card (CSS Flexbox).
- Dar estilos al boton y al Modal Card (colores , formas , fuentes ) (Visual Design)
- Hacer una funcion para mostrar datos en el Modal Card ( DRY)
- Actualizar el proyecto en GitHub
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO filtrar a los personajes según ciertas características(casa, rol, género) PARA poder elegir las caracteristicas de mi personaje favorito en el juego.
- Visualizar botones de filtrado(casa, rol, género)
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Ver botones de filtrado con opciones para seleccionar.
- Crear select por cada opción de filtrado en el main(HTML)
- Hacer función de filtrado utilizando metodo filter (por casa, por rol y por género)
- Dar estilos a los select
- Separar los archivos .js (entender sobre manejo del DOM y la lógica)
- Testear funciones de filtro
- Actualizar cambios en Github
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO filtrar las varitas según su núcleo PARA poder cambiar mi varita antes de una batalla.
- Visualizar boton Varitas y poder seleccionarlas por su núcleo.
- Visualizar los datos principales de las varitas de los personajes por su tamaño y el tipo de madera.
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear un botón Varitas
- Mostrar las 3 opciones de núcleo con su respectiva imagen.
- Hacer función de filtrado al seleccionar cada imagen.
- Crear template con nombre, imagen y propiedades de la varita por personaje.
- Testear funciones de filtro
- Que sea responsive
- Actualizar cambios en Github
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO conocer los patronus de mis personajes PARA saber si se parece al mio.
- Visualizar boton Patronus
- Visualizar el nombre del patronus de cada personaje.
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear un botón Patronus
- Hacer función de filtrado de patronus para que retorne esa data.
- Crear template con nombre, imagen y nombre del patronus de cada personaje.
- Testear funcion de filtro
- Que sea responsive
- Actualizar cambios en Github
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO buscar por sus nombres a los personajes PARA conocer sus datos.
- Visualizar input con icono de lupa para digitar el nombre.
- Visualizar el input en la parte superior de la pantalla.
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear un input y agregar un icono en el header.
- Hacer función de busqueda que reconozca cada letra digitada.
- Testear funcion de busqueda
- Que sea responsive
- Actualizar cambios en Github
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO que haya un menú en la pagina PARA ver los datos ordenadamente.
- Visualizar menu de navegación con todos los botones creados.
- Visualizar el menu debajo del logo y la sección búsqueda.
- Visualizar el menu estatico mientras bajo en la pagina.
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear un menu de navegación en el header.
- Añadir los botones de inicio, filtrado, varitas y patronus al menú.
- Linkear cada botón con su contenido.
- Crear evento para mostrar y ocultar secciones del menú según su manipulación.
- Que sea responsive
- Actualizar cambios en Github
Yo COMO jugador de Harry Potter: Wizards Unite QUIERO ver una pagina de inicio PARA conocer más sobre el juego.
- Visualizar la pagina de inicio apenas entre a la pagina.
- Visualizar una descripción del juego y/o un video.
- Visualizar un link para descargar el juego.
- Visualizar la interfaz en Desktop
- Visualizar la interfaz en Mobile
- Ver publicado el producto
- Crear una sección de pantalla de inicio en el main.
- Añadir un background relacionado al juego.
- Crear un div con h2 y h3 con información sobre el juego.
- Insertar un video descriptivo del juego, linkearlo a la pagina.
- Crear un boton con link directo al juego en Play Store.
- Que sea responsive
- Actualizar cambios en Github
Se elaboró el prototipo en papel en el que plasmamos como queríamos que se viera la interfaz. Luego testeamos con algunas personas para recibir feedback y mejorar el aplicativo.
- Ver prototipo click aquí
Ya con el testing del sketch decidimos utilizar Figma para elaborar nuestro prototipo de alta fidelidad, donde vimos elementos de visual design, para seleccionar los colores, tipografia y elementos del aplicativo.
- Ver prototipo en Figma click aquí
Ya luego de hacer testeos de usabilidad nos dimos cuenta que nuestra pagina aunque se veia visualmente bien, no estaba pensada realmente en el usuario ya que era más un catalogo que una guía para los que iniciaban en el juego. Por ello, reestructuramos el aplicativo quitando y añadiendo ciertos elementos para que el usuario encuentre util la pagina.
Por ejemplo, en el prototipo inicial existia una pantalla de bienvenida, otra para que ingrese su nombre, otra para seleccionar una imagen de usuario. Sin embargo, al testear nos dimos cuenta que esas pantallas le eran innecesarias al jugador porque este buscaba una pagina a la cual acceder rapidamente y en donde pueda observar facilmente elementos como los personajes, varitas y/o patronus. Es por ello, que en nuestra propuesta final se decidió hacer un menu vertical de facil acceso para el usuario, eliminando todas las pantallas anteriores.
El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data.
Revisa la lista y reflexiona sobre los objetivos que conseguiste en el proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual y de equipo.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía).*
- Planear y ejecutar tests de usabilidad.
- Entender y reconocer por qué es importante el HTML semántico.*
- Identificar y entender tipos de selectores en CSS.*
- Entender como funciona
flexbox
en CSS. - Construir tu aplicación respetando el diseño planeado (maquetación).
- Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).*
- Manejar eventos del DOM. (addEventListener)*
- Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
- Manipular arrays (
filter
|map
|sort
|reduce
). - Manipular objects (key | value).
- Entender el uso de condicionales (
if-else
|switch
).* - Entender el uso de bucles (
for
|forEach
).* - Entender la diferencia entre expression y statements.
- Utilizar funciones (parámetros | argumentos | valor de retorno).*
- Entender la diferencia entre tipos de datos atómicos y estructurados.
- Utilizar ES Modules (
import
|export
).
- Testear funciones (funciones puras).
- Ejecutar comandos de git (
add
|commit
|pull
|status
|push
). <<<<<<< HEAD - Utilizar los repositorios de GitHub (
clone
|fork
| gh-pages). - Colaborar en Github (pull requests).** =======
- Utilizar los repositorios de GitHub (
clone
|fork
| gh-pages).* - Colaborar en Github (pull requests).
712ce59c6ef742786f3e1eb28e31b36ea674665f
- 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).*