Toque Blanche es un proyecto de maquetación realizado con fines educativos; utiliza la temática gastronómica, permitiendo ser utilizado para restaurantes o buffetes de eventos. Se trata de un proyecto denomidado single page o sitio de una página que permite al usuario navegar entre distintas secciones de un mismo index.
Este proyecto no contiene utilidades de ningún tipo de librería o framework, utiliza tecnologías puras: HTML5, CSS3 y Vanilla JavaScript (ES6).
CSS styles.css
styles.css es un archivo que incluye todas las importaciones necesarias para asignar los estilos a la maquetación, además, asigna estilos generales al index, como: reseteo de los elementos (box-sizing), y estilos generales que son utilizados en las etiquetas html para que no sean repetidos en los estilos de cada sección que los comparta. Los estilos de cada sección se encuentran en la carpeta: assets/css.
JavaScript index.js
index.js es el archivo que incluye las importaciones del resto de las funcionalidades de la página (modales, carruseles y simulación submit). La dirección de los archivos correspondientes a las funcionalidades mencionadas es: assets/js
La página principal del sitio (index.html) contiene 4 secciones principales mostradas en la barra de navegación:
- Cuisine.
- About.
- Toque Blanche (inicio del index).
- Contact.
Al cargar la página, lo primero que se muestra es el header con el título Toque Blanche seguido de un banner que incluye un carrusel automático que muestra una imagen cada 3 segundos. Este slidder es un creado completamente con html y css; comenzando organizando las imágenes dentro de una lista desordenada (ul) dentro de un apartado (slider-frame) al que se le dará anchura y altura. Al asignar display: flex a este contenedor, permitimos a las imágenes aparecer en fila, facilitando que el overflow: hidden cubra aquellas imágenes que queden fuera del tamaño del contenedor; finalmente, con una animación se le permite a cada elemento aparecer dentro del contenedor, cambiando el procentaje de margen izquierdo en cada 3 segundos; esto útlimo debido a que en la lista se encuentran únicamente 5 imágenes dentro del slidder y la animación de 0 a 100% dura en total 15 segundos, permitiendo a cada imagen visualizarse 3 segundos. Para acceder a esta animación y estilos: assets/css/header(slider frame).
Otra funcionalidad importante en este inicio de página es el botón Contact. Al dar click aparece un modal de contacto (contact-modal) que incluye un formulario dentro del cual se permite al usuario enviar correos electrónicos para poder contactar los servicios de Toque Blanche. Dentro del modal, al dar click en el boton Send aparecerá un loader durante tres segundos, el cual desaparecerá y enviará un texto: ¡Mensaje Enviado! informando al usuario de que su mensaje ha sido enviado de forma éxitosa; por el momento, toda esta funcionalidad es una simulación, pues no se hizo uso de backend ni de api (como formSubmit) que hayan permitido un control real del mensaje enviado. Para lograrlo, se utilizó código JavaScript sencillo que se encuentra en el archivo submit.js y se explica a continuación.
submit.js
Este archivo incluye la función simulateMessage() la cual es ejecutada al lanzarse el "submit" del formulario dentro del modal de contacto. Básicamente se trata de un par de timers que permiten mostrar el loader durante 3 segundos, para luego dar paso a un texto de "¡Mensaje enviado!", limpiando el contenido de los inputs que el usuario haya llenado.
En esta sección se muestran cuatro carruseles de imágenes, cada uno correspondiente a un diferente estilo de comida (aunque para fines prácticos, las imágenes no cambian): Mexican, French, Asian, Cocktails. Para realizar los carruseles, se utilizó funcionalidades de CSS y código en JavaScript, que a continuación se explica.
Con respecto a CSS y HTML, se genera un contenedor general con la clase carousel, que a su vez contiene al slider-list, por su parte, cada imágen se encuentra dentro del contenedor slider, elemento del slider-list. Tanto al contenedor carousel como al slidder-list se les asigna un display: flex que permite mostrar los elementos en una fila; los botones de next (siguiente) y prev (anterior), son elementos del contenedor, que con justify-content: space-between permiten separse a cada extremo del contenedor. Para separar a cada slider se da un margen a los lados de 1rem. Finalmente, la funcionalidad se da en multislider.js.
multislider.js
Este archivo inclye la función Move la cual es lanzada cuando se da un click en los botones de next o prev. Si la el click viene del elemento next el valor con que Move se ejecuta es 2, mientras que para prev el valor es 1. La función Move es bastante sencilla: se basa en modificar el valor hacia la izquierda que mantenga slider-list, en relación a la anchura de carousel y el ancho del slidder.
En esta sección de la página, se muestran dos partes: experiencia y educación. La parte de experiencia se compone de tres imágenes, que al dar click a cada una, aparece un modal de experiencia (experience-modal) que permiten al usuario conocer los proyectos y responsabilidades que se llevaron a cabo, entre otro tipo de información. Por su parte, Education muestra la información de la preparación universitaria.
Para llamar a los modales, ya sean los modales de experiencia (experience-modal) o de contacto (contact-modal), se utiliza el código del archivo modals.js que se explica a continuación:
modals.js
Este archivo incluye la función showModal.js que es ejecutada cuando se da un "click" en los botones correspondientes. Si el objetivo del evento en su lista de clases corresponde a un "open-modal" se accede al atributo data-name que permite mostrar el nombre del modal que debe ser llamado, esto permite que una misma función se reutilizable para todos los modales que vayan o puedan ser mostrados.
La sección de Contact simplemente muestra un mensaje que invita al usuario a adquirir los servicios de Toque Blanche y mantenerse en contacto con sus redes sociales, las cuales son mostradas en una fila de íconos de las redes sociales. Además, se añade un contenedor que muestra información como: teléfonos de contacto, ubicación y horario.
Una buena mejora para la página y escalar el proyecto, sería una validación del formulario, además de un manejo de los emails que son enviados, ya sea utilizando el API de FormSubmit o manejando la información con backend.
Una excelente mejora en esta sección sería hacer carruseles "infinitos", permitiendo que al finalizar los slidders, de nuevo comenzara la ruleta con el slidder 1.