Skip to content

En este proyecto construimos en equipo una red social para los amantes de visitar los distintos lugares de Colombia y pudieran guardar sus memorias creando, editando y borrando un post. Logramos conectarla con firebase y asi guardar y obtener los datos.

Notifications You must be signed in to change notification settings

ynneyavlis/BOG005-social-network

 
 

Repository files navigation

Red Social Explora Colombia

Logo

Índice

1. Presentación

Logo

"Explora Colombia" es una red social pensada en fortalecer e impulsar la cultura y turismo de Colombia, busca conocer y guardar las memorias de los viajeros, teniendo en la tecnología como la herramienta perfecta que nos une más, la experiencia de los viajeros despertara la curiosidad de los internautas para conocer las maravillas de nuestro país, conociendo la flora ,fauna y gastronomía que pertenecen a cada región.

2. Resumen del proyecto

El objetivo de nuestro proyecto fue construir una red social que le permitiera a los usuarios publicar, editar,borrar, guardar y dar like a las publicaciones sobre los lugares que conocían, así como las diferentes experiencias vividas durante sus viajes por Colombia.

En la creación de la red social “Explora colombia” ,se realizó previamente la definición de las historias de usuario,como paso a seguir se llevó a cabo la funcionalidad y diseño de las diferentes vistas.

Se utilizaron herramientas como la plataforma figma, en donde se plasmaron las ideas en cuanto a diseño, teniendo como resultado un prototipo de alta fidelidad que fuese amigable con cualquier tipo de usuario y a su vez fuese coherente con el objetivo de nuestra red social.

Teniendo definido el prototipo y una idea de como serian las diferentes vistas, se escribió el codigo base en HTML y JS por medio de nodos y a su vez la creación de la navegación entre ellas. Para la recopilación de los datos obtenidos se hizo uso de la base de datos externa de firebase, además se emplearon pruebas de usabilidad a los usuarios para obtener información que mejorara la experieciencia de usuario, la cual fue tenida en cuenta para del diseño y parte de la funcionalidad.

3. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

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

  • Uso de CSS Grid Layout

Web APIs

  • 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)

JavaScript

  • 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)

  • [x ] 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

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)

  • GitHub: Organización en Github (projects | issues | labels | milestones | releases)

user-centricity

  • Diseñar un producto o servicio poniendo a la usuaria en el centro

product-design

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • [Seguir los principios básicos de diseño visual

research

  • Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

Firebase

  • Firebase Auth

  • Firestore

5.3 Historias de usuario

Entendiendo las necesidades de los usuarios, escribimos cuatro (4) Historias de Usuario que representa todo lo que necesitabamos para hacer/ver en la Red Social.

Historia de usuario 1

Historia de usuario1

Historia de usuario 2

historia de usuario2

Historia de usuario 3

historia de usuario3

Historia de usuario 4

historia de usuario4

5.4 Diseño de la Interfaz de Usuario (prototipo de baja fidelidad)

prototipo de baja fidelidad prototipo de baja fidelidad prototipo de baja fidelidad

5.4 Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)

prototipo de alta fidelidad prototipo de alta fidelidad

6 Pruebas unitarias (unit tests)

En este proyecto se realizó test de ruteo a la funcion OnNavigate, obteniendo un margen aceptado para las rutas usadas en lsa diferentes vistas.

7 Trabajo Equipo

Como equipo aprendimos planear estrategicamente las actividades para avanzar en los objetivos propuestos en el proyecto y mediante el trabajo colaborativo logramos conocernos, compartir conocimientos y reforzar los anteriores. Además, aprendimos a comunicarnos de manera asertiva, prevaleciendo la comprensión y ayuda mutua por hacer de nuestro trabajo el mejor. Los pequeños logros se convirtieron en la motivación perfecta para continuar hasta el final.

About

En este proyecto construimos en equipo una red social para los amantes de visitar los distintos lugares de Colombia y pudieran guardar sus memorias creando, editando y borrando un post. Logramos conectarla con firebase y asi guardar y obtener los datos.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 55.9%
  • CSS 24.0%
  • HTML 20.1%