- 1. Introducción
- 2. Frikis del espacio
- 3. Historias de usuario
- 4. Prototipos de diseño
- 5. Test de usabilidad
- 6. Objetivos de aprendizaje
Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. Las redes sociales han invadido nuestras vidas. Las amamos u odiamos, y muchos no podemos vivir sin ellas. Hay redes sociales de todo tipo y para todo tipo de intereses. Por ejemplo, en una ronda de financiamiento con inversionistas, se presentó una red social para químicos en la que los usuarios podían publicar artículos sobre sus investigaciones, comentar en los artículos de sus colegas, y filtrar artículos de acuerdo a determinadas etiquetas o su popularidad, lo más reciente, o lo más comentado.
Algunos estudios afirman que el 70,8% de usuarios buscan entretenerse en las redes sociales, y la curiosidad es natural e innata en los humanos, así que... ¿Porqué no crear una página de entretenimiento, que atrape la curiosidad del usuario frente a tantos conocimientos desconocidos? Nuestra red social se diseñó con la intención de ser esa fuente de entretenimiento, donde todos pueden aportar temas de películas espaciales, información del universo(conocimiento infinito) o teorías conspirativas(reptilianos, illuminatis, extraterrestres, los terraplanistas, la existencia de la pandemia y lo relacionado a las vacunas COVID-19, el hombre en la luna, etc).
El diseño visual fue inspirado, en el universo; los logos, en teorías conspirativas sobre abducciones de vacas en los campos. Se utilizaron efectos neón en algunos elementos, para imitar el resplandor de las estrellas, y diversos acentos de colores en gradiente, para simular los colores del espacio. También se trabajó en el responsive(celular, tablet, laptop y PC), debido al enorme crecimiento del uso de celulares y así nadie pueda perderse de navegar en nuestra red social.
- Prototipo de Baja Fidelidad:
- Prototipo de Alta Fidelidad:
Link ZEPLIN: https://scene.zeplin.io/project/645191aae943d126692f1a93
Inicialmente teníamos una composición de colores con transparencias que dificultaba la visualización de los elementos, se optó por:
- Cambiar el fondo.
- Agregar colores sólidos a los botones, definir colores primarios y secundarios.
- Cambiar el color del footer.
- Resaltar los textos blancos con sombreado para mayor legibilidad del usuario.
- Resaltar los íconos con sombreado para mayor legibilidad del usuario.
- Agregar espaciado entre líneas para fácil lectura.
- Cambiar el tamaño de fuente del botón de Cerrar Sesión.
En la parte funcional, se optó por:
- Proteger las rutas.
- Mandar un mensaje al usuario cuando haya publicado o editado su post.
- Evitar que el usuario pueda borrar o editar posts ajenos.
- Mostrar mensajes personalizados de Error sí los valores ingresados por el usuario, son incorrectos.
- Mostrar un mensaje de confirmación al borrar un post.
- Agregar la opción de desenmascarar/enmascarar la contraseña a decisión del usuario.
- Ordenar los posts por fecha de creación.
- Mostrar mensaje de espera mientras se carga la Data.
-
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