Wanderlust

Wanderlust es una plataforma web que te conecta con gente con ganas del explorar el mundo. Puedes obtener información sobre lugares en tendencia, armar pinboards con temas únicos para cada viaje con fotos y videos. Viaja con tus amigos! Explora, organiza y comparte las memorias de tus road trips en un solo lugar. Puedes ver el demo del website haciendo click aquí. No olvides utilizar uno de los usuarios para poder ingresar.

USUARIO	CONTRASEÑA
itsandromeda@gmail.com	321
ross@lab.es	123

PROYECTO 'X'

Nuestra tarea en este proyecto es construir un sitio web con todo lo aprendido hasta la fecha en Laboratoria, en 48 horas.

Requerimientos:

1. Aplicar dos eventos vistos en clase.
2. Aplicar dos eventos nuevos.
3. Usar callbacks.

Eventos vistos en clase, utilizados en el proyecto:

• OnmouseOver: El evento se produce cuando el puntero del mouse se mueve a través de la barra de navegación, haciendo una transición de color y tamaño en el elemento sujeto al evento.

• OnmouseOut: Este evento se produce cuando el puntero del mouse se mueve fuera del área de uno de los elementos de la barra de navegación, alterando el estilo de borde y color de fondo.

Eventos NO vistos en clase, utilizados en el proyecto:

• OnmouseMove: El evento se produce cuando el puntero del mouse se mueve cerca a las coordenadas del menu desplegable ubicado a la derecha del homepage. Al ocurrir el evento el menu se despliega y muestra las opciones de los lugares en tendencia para road trips en Wanderlust.

• DragOver: El evento de extracción se produce en la sección del pinboard, puedes seleccionar un archivo mp4 o una imagen y arrastrar el elemento hacia el contenedor.

• Drop: El evento sucede cuando los datos arrastrados desde tu ordenador son soltados en el contenedor armando así poco a poco tu pinboard.

Funcionalidades extras:

• Puedes filtrar tus imagenes y videos desde tu pinboard.
• Todos tus cambios son almacenados en el local storage. Si sales de la página y vuelves a entrar encontrarás todo como lo dejaste.

Live demo

Part I

Part II

Part III

Contenido de ramas de trabajo

• home: Estructura principal y diseño.

• login: Validación de usuarios, implementación del localStorage

• menu-desplegable: Construcción del menu desplegable del homepage.

• pinBoard: Construcción del area del pinboard.

• message: Construcción del tooltip para la opción de mensajería.

• filter: Construcción de filtro para imagenes y videos.

• evento: Implementación de los eventos onmouseover & onmouseout para la barra de navegación.

• master: Rama principal.

• gh-pages: Rama GitHub Pages.

Improvement areas

• Trabajar en el diseño del scrollbar del area de mensajería para tener un diseño más limpio en la interfaz.
• Integrar información turística sobre destinos en tendencia.
• Añadir area de calendar para poder visualizar diferentes pinboards hechos en días anteriores.
• Añadir area de friends para hacer simulación de chat entre red de contactos del usuario.
• Hacer el UI responsive.

Team

Annia J. Flores	Leidy Rosmery