- Resumen
- Definición de Producto
- Historias de usuario
- Prototipos
- Testeos de usabilidad
- Objetivos de aprendizaje
El proyecto "CatsSociety" tuvo como propósito desarrollar una red social centrada en tópicos relacionados con gatos 🐾😸 como memes,tips, curiosidades, veterinarios y el cómo entender a tu gato. Se creó una página web responsive utilizando el marco de trabajo ágil SCRUM. Los objetivos principales fueron permitir a los usuarios registrarse, iniciar sesión con cuentas o con Google, publicar posts y dar likes. Además, se implementó un router para facilitar la navegación entre diferentes vistas de la aplicación y se empleó Firebase versión 9 como servicio externo para la persistencia de datos, asegurando una gestión eficiente y confiable de la información.
"CatsSociety" está diseñada para los amantes de los gatos, quienes son los principales usuarios de esta red social. Les brinda un espacio exclusivo y dedicado a su pasión por los felinos, permitiéndoles aprender más sobre sus mascotas, compartir experiencias, y encontrar contenido relacionado con los adorables felinos, como memes, tips, curiosidades, información veterinaria y consejos para entender mejor a sus mascotas. Además, la plataforma les ofrece la oportunidad de conectarse con otros amantes de los gatos, interactuar con sus publicaciones, dar likes y participar activamente en una comunidad enfocada en su amor común por los gatos.
Esta red social se encarga de solucionar la falta de un espacio especializado para los entusiastas de los felinos. Aquí, los usuarios encuentran un ambiente acogedor y divertido donde pueden explorar y compartir información relevante sobre sus mascotas favoritas, conectarse con personas afines, y sentirse parte de una comunidad comprometida con su pasión por los felinos.
Link con todas las historias de usuario
En el prototipo de baja fidelidad usamos la herramienta moqups.
En el prototipo de alta fidelidad usamos la herramienta figma, donde implementamos conceptos de atomic design para agrupar los elementos de nuestra página y usamos la herramiento de componente de Figma.Además, elegimos los colores,la tipografía, las imágenes y comenzamos a prototipar con la idea que ya habíamos plasmado en moqups.
Las pruebas con usuarios nos permiten validar o refutar las hipótesis que tenemos sobre nuestros diseños, en CatsSociety el test de usabilidad nos ayudó a definir:
- Un tamaño de fuente
- Opciones interactivas con los botones de los post
- Funcionalidad:Publicar, eliminar, editar y confirmar acciones, la
- Posición en la que se encuentran los menús y si estas posiciones son intuitivas,
Una de las modificaciones más importantes con un 42% fue el “like” se modificó el color para que fuera más fácil de identificar cuando se ha realizado la acción y se emplearon las sugerencias de la pregunta abierta.
-
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 CSS Grid Layout
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Ruteado (History API, evento hashchange, window.location)
-
Arrays (arreglos)
-
Objetos (key, value)
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
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)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
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)
-
Callbacks
-
Promesas
-
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)
-
GitHub: Organización en Github (projects | issues | labels | milestones | releases)
- 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
-
Firebase Auth
-
Firestore