- Preámbulo
- Objetivos de aprendizaje
- Resumen del proyecto
- Historias de usuarios
- Problemas de usabilidad
- Prototipos
- Enlace a Zeplin
- Test implementados
- Referencias
1. Preámbulo
Breaking Bad Breaking Bad es una serie de televisión estadounidense creada y producida por Vince Gilligan. Situada y producida en Albuquerque, Nuevo México, consiste en la historia de Walter White, un profesor de química al que diagnostican un cáncer de pulmón inoperable. Walter pasa a una vida de crimen produciendo y distribuyendo metanfetamina junto a un ex-estudiante, Jesse Pinkman, con el objetivo de conseguir suficiente dinero para el futuro de su familia tras su inevitable muerte.
Los usurarios de este producto serán seguidores de la serie Breaking Bad y curiosos.
El objetivo del producto es poder brindar una página donde pueda ver todos los personajes que aparecen en la serie, con algunas características relevantes como apodo, nombre de los actores y actrices que los interpretan, ocupación, estatus de vida del personaje, así como en que temporada de la serie participaron.
- El nombre de su personaje y que actor lo interpreta, un filtro para poder realizar la búsqueda de el personaje de su interés.
- Conocer que personajes aparecen en cada temporada.
- Podrán ordenar su búsqueda de la A a la Z y de forma inversa.
- Divertirse encontrando ¿Qué personaje podrías ser tú?, al ingresar los datos requeridos y obteniendo un personaje afín.
- Advertencia de error en caso de que el personaje sea incorrecto o el input quede vacío.
Los usuarios podrán usar este producto cuando les surja alguna duda o curiosidad o quieran divertirse un rato recordando personajes de su serie favorita.
2. Objetivos de aprendizaje Los objetivos de aprendizaje a abarcar en este proyecto son los siguientes:
HTML Uso de HTML semántico
CSS Uso de selectores de CSS
Modelo de caja (box model): borde, margen, padding
Uso de flexbox en CSS
Web APIs Uso de selectores del DOM
Manejo de eventos del DOM (listeners, propagación, delegación)
Manipulación dinámica del DOM
JavaScript 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)
Control de Versiones (Git y GitHub) 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)
Centrado en el usuario
Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
Diseño de producto
Crear prototipos de alta fidelidad que incluyan interacciones
Seguir los principios básicos de diseño visual
Investigación
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
Una vez culminado el proyecto consideremos que al menos el 70% de los objetivos a abarcar en el proyecto ha sido cubierto por ambas partcipantes.
3. Resumen del proyecto Lo primero que hicimos al empezar el proyecto fue definir el tema a trabajar, el cual las dos integrantes teníamos muy claro, nos decidimos por la temática de la serie Breaking Bad por la afinidad que ambas tenemos hacia ella.
Después del estudio del README de proyecto empezamos a planificar los pasos a seguir.
Acordamos trabajar con Trello para llevar a cabo la organización del proyecto:
4. Historias de usuario:
5. Problemas de usabilidad:
En este proyecto no se realizaron pruebas de usabilidad en cuanto a la interacción de un usuario con la interfaz, salvo las creadoras de la misma, por tanto los siguientes problemas y soluciones planteados están dados a partir de las distintas demos semanes que tuvimos una vez finalizaba el Sprint, en este sentido consideramos a futuro abordar la problemática de usabilidad de acuerdo a lo recomendado en la literatura oficial.
En función de la presentación en la primera demo, inicialmente realizamos un bosquejo genérico de la interfaz del proyecto:
La usabilidad aún no estab definida, sin embargo un problema presentado era el fondo de trabajo ya que era muy oscuro y presentaba problemas de integración de colores, por tanto nos recomendaron seguir una paleta de colores y encontrar un fondo más claro.
Se cambió el fondo y se buscó una paleta de colores para trabajar.
Posteriormente el fondo de la interfaz quedó fijado conjunto al título como una imagen, en este punto el fondo no era problema pues sus colores eran más armónicos y llamativos, pero el título como parte del fondo presentaba un inconveniente a la hora de desplazar las imágenes a través de la página, ya que en un punto cubrían el título, a su vez nos indicaron que las imágenes representadas en tarjetas tenían colores que de alguna manera hacían ruido visual con el fondo.
Para corregir las imágenes se empleó la propiedad filter en CSS con una escala de grises al 80%. El título se eliminó de la imagen fondo y se colocó como imagen desde una URL en el header en index.HTML.
En otra demostración la página era un poco más funcional, se podía ordenar de A a Z y a la inversa los datos de Json, también se podía filtrar los personajes de acuerdo a su aparición en una temporada específica, teníamos dos filtros más, uno por actor o actriz y uno por apodo o personaje que aún no eran funcionales. En este punto nos indicaron que eran muchos filtros y por tanto podíamos unir estos dos últimos que áun no tenían funcionalidad en un buscador tipo input.
Eliminamos los filtros (actor/actriz), (personaje/apodo) y creamos un buscador con accesibilidad para personaje, actor, actriz y apodo.
En la interfaz al usar el buscador de forma incorrecta, es decir ingresar un dato inválido o pulsar buscar dejando el input vacío se generaba un alert que indicaba error, en este sentido nos indicaron que era muy pequeño y nos recomendaron un mensaje quizás a modo de pantalla que se activara en estos casos.
Se creó una imagen que alertara sobre un ingreso incorrecto y sobre el input vacío y se gestionó como una superposición al interfaz original.
No teníamos un cálculo con los datos de Json ni como acceder a ese cálculo, nos recomendaron emplear un botón.
Se creó un botón que tendría la finalidad de llevar al usuario a otra pantalla que también estaría superpuesta a la interfaz original y donde se vería otra imagen alusiva a la serie y algunos cuadros de ingreso de texto asociados al cálculo, a esta altura del proyecto entre las diversas opciones de manipular los datos del Json para realizar un cálculo con ellos, el que más nos hizo sentido fue emplear el método math.random() sin embargo ya habíamos creado la pantalla dónde solicitábamos al usuario ingresar sus datos (nombre, signo zodiacal y elemento químico favorito) y a nivel de código transformábamos estos datos en ASCII y teníamos un promedio, pero ya que no logramos vincular esta información con los datos de Json a manera de que se generara una carta aleatoria, decidimos que el botón procesar además de obtener el promedio antes mencionado, ejecutara el método math.random() en conjunto de math.floor para que el valor final fuese entero y correspondiera a los datos de Json.
La tarjeta aleatoria no se mostraba en la interfaz asociada a cálculo. Nos recomendaron colocar display:none en Js a la interfaz de cálculo.
Como la interfaz de cálculo es una superposición de imágenes respecto a la interfaz original pero al generar la tarjeta aleatoria se está ultilizando la función que accede a los datos de Json vinculada a el main incial, la tarjeta aleatoria se mostraba aquí, por tanto añadimos display:none en la función de Js de la interfaz de cálculo justo antes de que se ejecutara la generación de la carta aleatoria.
La página tiene datos de los personajes en inglés pero los botones de accesibilidad están español.
Decidimos pasar todos los botones e información general de la interfaz que estaba en español a inglés.
La carta aleatoria debería estar centrada.
No encontramos solución, probámos variar propiedades y atributos en CSS para resolverlo pero al momento de culminar el proyecto no lo habíamos logrado.
Los subtítulos de los datos no se observan.
No encontramos solución, debido a la forma a la que accedemos a los datos de Json y como logramos mostrarlos en la interfaz, desconocemos como agregar los subtítulos, en el punto de finalizar el proyecto lo más que se nos ha ocurrido es modificar los datos en Json para que contengan tales valores, pero reconocemos que no es práctico y por tanto no es una forma correcta de trabajar.
6.Prototipos:
Fase 1: Presentación inicial.
Fase 2: Mensaje de error para personaje no válido o input vacío.
Fase 3: Interfaz de ¿Qué personaje serías?.
Fase 4: Resultado de ¿Qué personaje serías?.
7. Enlace a Zeplin En esta oportunidad trabajamos el esquema del proyecto en Trello y Pptx: los diversos elementos empleados se encuentran en el prototipo de baja fidelidad, de alta fidelidad y las distintas fases del prototipo final antes mostradas, también incluímos en esta descripción de proyecto una vista general de la planificación y los Sprints trabajados en TRELLO; no utilizamos figma ni herramientas a fines por tanto no resulta fluído a fechas de termino de proyecto llevar la información de Pptx a figma y de ahí a Zeplin, en ese sentido este objetivo se esperará cubrir en el próximo proyecto por ambas participantes.
8.Test implementados:
Los test se crearon a partir de un ejemplo básico preestablecido en el boilerplate del proyecto incial, un test por cada función asociada a la funcionalidad de la interfaz, estos fueron: filtrar, ordenarAZ, ordenarZA, temporada, textoAASCII y encontrar. Al correr los test creados con el comando npm test una vez todos estuvieron listos y sin fallas el resultado fue el siguiente:
9.Referencias:
Git flujo de trabajo colaborativo
paleta de colores con tu diseño previsto
Galería de Imágenes con FETCH y DOM