[MÚSICA] [MÚSICA] Acabamos de ver la importancia de tener un mapa de un sitio, y las motivaciones para lograr un buen diseño de navegabilidad. Ahora, veremos qué nos ofrece Bootstrap para concretarlo. Comencemos con el componente navbar que nos va a permitir crear una barra de navegación. La barra de navegación usualmente muestra todas las secciones que tiene el visitante para explorar nuestro sitio. Se suele mantener inalterable entre el cambio de cada web de cada página, que iremos haciendo a lo largo de modificación de sección a sección, es decir, no cambia nada de la barra de navegación. Finalmente, también la vamos a encontrar en la parte superior. Y a lo sumo, lo que vamos a identificar es la sección donde se encuentra situado actualmente el usuario. Eso muchas veces es cambiarle la tipografÃa a la sección, subrayarla, o hacerle algún tipo de seña para que el usuario se ubique. Algunas web ubican la barra de navegación en los laterales, y en los celulares o en los diseños responsive, o cuando hay tamaños más pequeños, se suele colapsar para no ocupar mucho espacio y no entorpecer la visualización de la web. Algunos criterios para tener en cuenta en el diseño de tu barra de navegación son, incluir el logo de tu sitio; el clic en el logo debe dirigir a la página principal; los nombres de las secciones deben ser explÃcitos y en el lenguaje del visitante; mostrar pocas secciones para no marear al visitante; preferir nombres cortos; indicar con un color contrastante la sección en la que se encuentra el usuario; y si se incluye un login o un logout, ubicarlo claramente en la barra de navegación. Analicemos la barra de navegación del sitio de Bootstrap. Apenas ingresamos al sitio, observa que tiene el logo e indica que estamos en la Home con la tipografÃa en negrita. Luego, indica todas las secciones relevantes, y a la derecha, da información de la versión presentada, el repositorio de GitHub y redes sociales. Se indica claramente la acción principal que busca Bootstrap que realicemos, su descarga. Los colores son armónicos y alineados con el violeta de la marca. El espacio utilizado en la barra se distribuye entre el mapa del sitio a la izquierda con las secciones e información adicional a la derecha. Un visitante nuevo puede comprender rápidamente qué se le ofrece, yendo solamente a la barra de navegación. Esto es un ejemplo de un buen diseño de barra, y ahora pasemos a la Breadcrumbs. Como dijimos anteriormente, este es un componente que permite ubicar al visitante en la estructura del sitio y le permite moverse dentro de la jerarquÃa del mismo. Veamos un ejemplo de un sitio de compraventa. Nos indica que estamos en la sección Casas en venta, dentro de la sección Buenos Aires GBA Norte, dentro de la sección Inmuebles. A su vez, nos permite volver al listado previamente mostrado. Este es un tÃpico Breadcrumb. Tocando en cada una de las partes, podemos ir a la sección correspondiente y asà logra situarnos en el sitio, permitiéndonos movernos jerárquicamente. Se debe utilizarlo sólo cuando tenemos estructuras jerárquicas de más de dos niveles, you que si no hay subsecciones, no agrega valor y puede resolverse utilizando algún indicador en la tipografÃa de la barra de navegación como hace Bootstrap, que aplica negritas a la sección que se muestra. Hay tres tipos de uso para los Breadcrumbs. Basados en la jerarquÃa o ubicación, similar al ejemplo presentado, basados en atributos, se pasa de lo más abstracto a lo más particular de un producto o tema. Por ejemplo, la jerarquÃa de libros, de computación, de lenguaje de programación, y de lenguaje de programación Smalltalk, por ejemplo. Basados en pasos de un proceso, se indican los pasos que realizó el usuario hasta llegar a donde está. Por ejemplo, elige tu producto, confirma tus datos de pago, y luego, indica domicilio de entrega. Ahora sÃ, manos a la obra y comencemos a trabajar. [MÚSICA] [MÚSICA]
