Made by Arango M., Goche C. & Pariona M.
Social Network project
- 1. Resumen del proyecto
- 2. Definición del producto
- 3. Historias de usuario
- 4. Diseño de Interfaz de Usuario
- 5. Test de usabilidad
- 6. Objetivos de aprendizaje
El presente proyecto, TRAVEL IN, es una Red social destinada a personas interesadas en compartir sus experiencias de viajes, tips, recomendaciones y demás que puedan ser de utilidad para otros amantes de los viajes o que quieran iniciar en esta actividad. Esta red social te permitirá crear una cuenta de acceso y loguearse con ella; crear, editar, borrar, comentar y "likear" publicacciones, todo de forma dinámica.
El proyecto se inspiró en las redes sociales actuales, tales como Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. Estas redes sociales han invadido nuestras vidas, las cuales amamos u odiamos, y muchos no podemos vivir sin ellas.
A raiz de esto, decidimos crear una red social destinada a un objetivo en común, viajes. Las redes sociales ya mencionadas, se concentran en captar personas con diferentes intereses. Es por ello, que la red social que hemos realizado se centra en un público usuario que quiera compartir sus experiencias o motivar a otros usuarios a viajar. Hoy en día, diferentes estudios recomiendan viajar, no solo porque es una actividad placentera, sino por los múltiples beneficios tanto para la salud física como para la salud mental.
El proyecto se basó en un sistema de cuentas de usuario, siendo lo que las redes sociales actuales utilizan para garantizar la seguridad y la organización en un sistema con muchos usuarios. Ajustándonos a los requerimientos, contamos con las siguientes secciones:
- Sign In
- Sign Up
- Recover Password
- Home dónde el usuario podrá crear, editar, comentar eliminar y reaccionar (Like o Let's go!) publicaciones tanto suyas como de otros usuarios
- Profile que es el perfil del usuario y dónde verá sus propias publicaciones, sean públicas o privadas y también editarlas, y
- Log out con el que cerrará sesión.
Las siguientes historias de usuario se han organizado de acuerdo a órdenes de prioridad, siendo 1 el más importante.
1- Como usuario nuevo debo poder crear una cuenta con email y password válidos para ingresar a la red social.
2- Como usuario nuevo debo poder iniciar sesión con mi cuenta de Google para ingresar a la red social (sin necesidad de crear una cuenta de email válido).
3- Como usuario registrado debo poder iniciar sesión con email y password válidos para ingresar a la red social.
4- Yo como usuario loggeado debo poder visualizar los datos de mi perfil creado y editarlos para actualizar mi información.
5- Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.
6- Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis posts para poder elegir la privacidad de mis publicaciones.
7- Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en las publicaciones para poder indicar que me gusta una publicación.
8- Yo como usuario loggeado debo poder escribir, guardar, editar o eliminar un comentario en una publicación para poder compartir mi opinión o hacer preguntas.
A continuación presentamos un layout (diseño) de la vista mobile y desktop de baja fidelidad.
-
Vista mobile
-
Vista Desktop
Gracias al Feedback recibido por parte de nuestros usuarios, compañeras y coaches, pudimos iterar varias veces antes de llegar a nuestra versión final. Tomándose en cuenta principalmente:
- En la sección de Profile, se diseñaron la fotos de perfil y portada del usuario similares a las empleadas por Facebook, para que los usuarios se sientan familiarizados con nuestra red social.
- Se implementó un botón Scroll up tanto en la sección de Home como Profile para que el usuario pueda desplazarse rápidamente hacia la parte superior de la página luego de revisar las diversas publicaciones.
- Se subrayaron las pestañas de Home y Profile para que el usuario sepa la sección en la que se encuentra.
- En la sección Home al colocar el puntero del mouse en el nombre de un usuario que ha publicado, aparecerá una ventana emergente con información extra de dicho usuario, datos como país y cumpleaños, así también se apreciará de un mayor tamaño la foto de perfil, ello con la finalidad que los usuarios editen su información en la sección profile.
- Paleta de colores que vincule a viajes.
- Diseño interactivo en todas sus presentaciones.
El objetivo principal de aprendizaje de este proyecto es construir una Single-page Application (SPA) que se adapte al patrón modelo - vista - controlador MVC y que sea responsive (con más de una vista / página) en la que podamos leer, escribir, actualizar y eliminar datos.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox | Grid en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM (aprovecha el objeto de evento en sus handlers, uso de event delegacion.)
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- History API.
- localStorage.
- Uso de template strings
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | code reviews |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- 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.