RETO MODELO PARA FRONT-END DEVELOPERS
Para la siguiente evaluación se debe realizar el siguiente landing de destino para Viajes Falabella, que tiene como fin, dar a conocer a los viajeros, toda la información relevante asociada al destino Brasil-Buzios.
PARA ESTO SE DEBE ELABORAR EL SIGUIENTE LANDING:
DETALLE DE FUNCIONAMIENTO
Home
Al cargar el sitio, se debe generar una composición animada de los elementos.
Los datos principales de Clima, Visa, Moneda y Viajero deben contemplar un tooltip con detalle específico de información y generar transiciones de aquel elemento (animado), el cual se podrá cargar de forma manual desde nuestra API de contenido. De todas maneras como extra si pueden sugerir API externa que puedan automatizar estos datos, ¡genial!.
La imagen del lado derecho vendrá desde nuestra API de contenido, pero en su efecto se puede usar la API de unsplash es un plus. A su vez al hacer clic se debe ejecutar el video que también estará cargada desde nuestra API de todas maneras dejamos (link del video https://youtu.be/_Y-QIE6rUWE )
Al seleccionar ver más debe generar una animación horizontal que despliegue la información.
La información de requiere vacunas también vendrá de nuestra API de contenido, (dejamos link como un extra http://www.viajesfalabella.cl/legales-informacion/)
Imperdibles “Que hacer en el viaje”
Esta es una galería slide de destinos, donde su contenido vendrá cargada de nuestra API. De todas maneras mencionamos la posibilidad de que podamos contener video e imágenes 360º donde ambas puedan desplegarse en full-screen. Este contenido debe tener la posibilidad también de ser compartido en redes sociales por lo que se debe contemplar el “share de redes sociales: Facebook, Twitter, Whatsapp”
Viajeros en Buzios
Este es un mapa que busca rescatar puntos de interés y georeferenciados en google maps las cuales se debe asociar a un icono/ imagen y posteriormente asociarlas a una longitud y latitud cargada en nuestra API de contenido.
Tips en Buzios
En esta sección necesitamos que se comporte como un slide horizontal en donde el usuario pueda conocer los tip necesario para viajar a Buzios.
Cotiza este viaje
Para terminar, debemos generar los links a la vertical de cada producto. http://www.viajesfalabella.cl/vuelos/ (vuelos) http://www.viajesfalabella.cl/hoteles/ (hotel) http://www.viajesfalabella.cl/paquetes/ (paquetes)
Los Links de redes sociales deben dirigir a las siguientes URL https://www.facebook.com/chile.viajesfalabella/ https://twitter.com/viajesfalabella?lang=es https://www.instagram.com/viajesfalabellacl/?hl=es-la https://www.youtube.com/channel/UCTYb540wKxg0EDpaZ5y7CFQ
ASPECTOS TÉCNICOS A TOMAR EN CUENTA:
API de contenido (https://api-cert.viajesfalabella.com/contents/cl/guia?slug=buzios-2) Bootstrap 4 (4.x latest) Sass (ideal uso de metodología BEM) jQuery 3.2.1 HTML 5 Etiquetado Semántico - Títulos H1 único (relacionado a la Ciudad) - Títulos H2 (subtítulos de sección)
- Títulos H3 (títulos párrafos)
- Considerar la etiqueta ALT, en videos e imágenes
- Considerar el radio texto HTML más de 25% (evaluarlo en : https://woko.agency/herramientas/calculadora-de-ratio-codigotexto/ AMP https://www.ampproject.org/es/docs/getting_started/quickstart
STYLEGUIDE / documentación de diseño
El styleguide de nuestro sistema de diseño interno (Río), lo pueden encontrar: Sistema de Diseño "Río" Viajes Falabella
INTERFAZ
Para acceder al diseño debes ingresar a este link de FIGMA. Si no tienes una cuenta, debes hacerte una, Figma es un software de diseño colaborativo y muy cool por lo demás.