- 1. Resumen del proyecto
- 2. Objetivo de la página
- 3. Historias de usuario
- 4. Prototipo de baja fidelidad
- 5. Prototipo de alta fidelidad
- 6. Feedback
- 7. Objetivos de aprendizaje
phySport es un proyecto para amantes del deporte, podrás encontrar eventos de tu interes, conocer otros deportistas, interactuar con otros usuarios y más. En la red social phySport podrás registrate para crear eventos, editarlos, borrarlos y asistir. "Find a game, win friends".
Ver demo: https://oriananohemi.github.io/BOG001-social-network/#/timeline
Es una red social enfocada en personas amantes del deporte o deportistas que quieran interactuar con personas que tengan intereses comunes en algún deporte. Podrás crear eventos en los que pueden participar personas que esten interesadas o se encuentren cerca a tu ubicación, Es una red social fácil de usar, intuitiva y entendible para el usuario.
- H1 - Yo como usuario, quiero poder registrarme con mi correo, para poder publicar eventos y mirar los eventos cerca de mi ciudad.
- H2 - Yo como usuario quiero poder iniciar sesión con mi correo, para crear un usuario e interactuar.
- H3 - Yo como usuario, quiero poder crear un evento deportivo, para completar mi equipo de futbol.
- H4 - Yo como aficionado del deporte, quiero poder visualizar los eventos cercanos a mi ubicación, para poder hacer deporte.
- H5 - Yo como usuario de la aplicacion, quiero saber cuantas personas asistiran al evento y tener la opcion de asistir, para poder participar.
- H6 - Yo como usuario de la aplicacion PhySport, quiero poder editar el evento que cree, para que las personas interesadas tengan la informacion actualizada.
- H7 - Yo como usuario, quiero poder eliminar el evento que cree, porque ya no se realizará.
El prototipo de alta fidelidad se realizo en Adobe XD
Entre las mejoras recibidas en el feedback se pedia ajustar el tamaño de los botones en los formularios, colocar ejemplos en los placeholder de los inputs del formulario "evento" asignados a lugar y descripción, ajustar contenido del timeline para cada evento publicado, estandarizar bordes de los inputs y agregar labels.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- History API.
- localStorage.
- 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 | |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.