En esta clase, comenzaremos a construir la cabecera de nuestra aplicación, centrándonos específicamente en la primera fila del header. Analizaremos cómo Airbnb maneja su diseño y tomaremos un enfoque pragmático, priorizando la funcionalidad y la buena visualización en diferentes resoluciones, incluso si eso significa desviarnos un poco del diseño exacto de Airbnb cuando su implementación no es óptima para nuestro propósito.

Ocultando elementos en tamaños de pantalla específicos

Veremos cómo ocultar ciertos elementos de la cabecera cuando la pantalla alcanza el tamaño de una tablet o iPad. Esto nos permitirá tener un diseño más limpio y funcional en dispositivos más pequeños, evitando que los elementos se superpongan o se vean desordenados. Trabajaremos con la sección de búsqueda y el menú de usuario, ajustando su visibilidad según el tamaño de la pantalla.

Estructura de la cabecera: Logo, navegación y menú de usuario

A continuación, nos centraremos en la estructura principal de la cabecera. Dividiremos esta sección en tres partes clave:

• El logo de la aplicación: Implementaremos el SVG correspondiente al logo, asegurando que se muestre correctamente y sea adaptable a diferentes resoluciones.
• Las pestañas de navegación (tabs): Aunque el comportamiento dinámico de las pestañas se abordará en clases futuras, sentaremos las bases para su diseño, incluyendo opciones como "Alojamientos", "Experiencias" y "Experiencias online".
• El menú de usuario: Crearemos la sección del menú de usuario, que incluirá un enlace para "Pon tu casa en Airbnb", un botón para el cambio de idioma y un botón que activará un modal con opciones de usuario. Diseñaremos este último con un icono de hamburguesa y una imagen de perfil, similar al estilo de Airbnb.

Implementación y ajustes de estilo

Durante la clase, se trabajará en la implementación de estas secciones utilizando clases de utilidad para controlar el diseño, el espaciado, los bordes y las sombras. Se realizarán ajustes en tiempo real para lograr la apariencia deseada, prestando especial atención a detalles como el redondeo de los botones, el tamaño de los iconos y la tipografía (aunque se hará énfasis en que no se utilizará la misma fuente exacta que Airbnb, lo importante será la aproximación visual).

Exploraremos cómo el diseño se adapta a diferentes tamaños de pantalla, asegurando que nuestra cabecera se vea bien en dispositivos móviles, tablets y escritorios. Identificaremos posibles mejoras y consideraciones para futuras iteraciones, como la dinámica de las pestañas y la funcionalidad del modal del menú de usuario, que serán cubiertas en próximas clases.