Barras de navegación Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web.

Los menús están contenidos en una barra de menú, la cual se puede decir que es una propiedad que tienen las ventanas para poseer menús, esto es porque la barra de menú en sí misma no es una ventana como lo puede ser un botón de comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino un objeto contenedor de otros menús

En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente.

Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS.

Estructura de los menús

Los menús se organizan siguiendo el principio de los árboles, esto quiere decir

que un menú puede tener menús hijos y menús padres. Inicialmente, al crear

una barra de menú, el identificador del objeto nuevo es un identificador de menús

válido, además de que la barra de menú queda como la raíz, el nodo principal, o

en otras palabras, un menú sin padres.

De ahí se pueden empezar a crear menús hijos como lo puede ser uno que se

llame Archivo, otro Edición y otro Ver, que tendrán como padre al manipulador

(handler) del menú raíz; estos menús pueden tener menús hijos, así, archivo,

descendiendo de MenuBar puede engendrar, Abrir, Guardar, Guardar

como, Codificación, etc.

La estructura de una página web influye directamente en el comportamiento de

las visitas. Uno de los elementos fundamentales es el menú, que permite a los

internautas navegar por la página web o el blog. Debe mostrar cuáles son los

contenidos de la web y cómo acceder a ellos. Os dejamos 7 consejos para crear

un menú eficaz en vuestra página web.

Antes de crear los menús de una página web es importante haber reflexionado

sobre su estructutra. Debéis plantearos preguntas como ¿cuál es el objetivo? ¿a

quién va dirigido? ¿qué necesita el público?. Según los contenidos que queráis

incluir, cread una estructura previa que permita un orden lógico de toda la

información que se incluirá en la página web.

1.Elegir dónde ubicar el menú

En mi web podremos incluir un menú horizontal y según la plantilla, uno o dos

menús verticales, uno a la derecha y otro a la izquierda. Podéis combinarlo como

queráis, os aconsejamos tener cuidado con la información repetida. La

localización de los menús afectará a la manera en que los internautas navegan

(o no) por vuestra página web.

2. Limitar el número de enlaces

Como norma general se considera apropiado no superar los 7 enlaces por menú

de navegación. Una cantidad mayor puede confundir a los usuarios y hacer que

se sientan "perdidos" entre tanto enlace. Os aconsejamos evitar los menús

horizontales de más de una línea y los menús verticales demasiado extensos

que obligan al lector a desplazarse por la pantalla. Otro consejo es que si vuestro

logo lleva a la página de inicio de vuestra web, no es necesario incluir un enlace

de tipo "Inicio", ya que sería información redundante.

3. Elegir el título adecuado

La persona que visita la página web debe comprender fácilmente qué es lo que

va a encontrar si hace clic en un enlace del menú. Una o dos palabras suelen

ser suficientes. Por ejemplo, es mejor establecer como título del enlace..

4. Ordenar correctamente los enlaces

El orden en que se muestran los enlaces en los menús también es importante.

Los enlaces a los contenidos más importantes deben situarse en las primeras

posiciones. Habitualmente, enlaces como "Dónde estamos" o "Contacto" se

suelen situar en último lugar, por lo que los internautas ya están acostumbrados

a este funcionamiento.

5. Guardar la coherencia entre páginas

Intentad mantener el lugar del menú principal en todas las páginas y no cambiéis

el orden de los enlaces ni los títulos. Sí podéis, por ejemplo, incluir un menú

secundario en determinadas zonas de la página web. Les recordamos que

puedes crear diferentes estructuras de menús para ajustarlas a las necesidades

de nuestra página web. Os recomendamos consultar el tutorial sobre cómo crear

diferentes estructuras de menús.

6. Comprobar los enlaces

Puede parecer evidente, pero es muy importante comprobar que todos los

enlaces de cada menú funcionan correctamente y llevan al internauta a la página

correcta. Además, podéis utilizar las estadísticas de frecuentación para conocer

cuáles son las páginas más visitadas y estudiar si vuestra estructura de menús

es la adecuada.

Tipos de Sistemas de Navegación

Durante la fase de planeación de un sitio web, generalmente se consideran

varios tipos de sistemas de navegación. Para lograr el éxito es necesario

conocerlos y entender en qué medida cada uno ofrece flexibilidad y usabilidad

para contexto en el que queremos que funcione. Pueden identificarse cuatro

tipos principales de SN:

Sistemas de navegación lineal

Sistemas de navegación no lineal

Sistemas de navegación jerárquica

Sistemas de navegación compuesta

LINEAL

La navegación lineal permite un flujo de la información mas estable, es muy útil

cuando se quiere explicar al usuario paso a paso, pues permite que el usuario

reciba la información en un orden adecuado, únicamente con la opción de ir

adelante y atrás.

Ejemplo de un menú clásico para navegación lineal :

JERÁRQUICA

Navegación jerárquica o de árbol. Esta estructura comienza con una página

principal o raíz, se presentan varias opciones que permite ir visualizando páginas

más específicas. Éste tipo de navegación ofrece conceptos muy detallados que

se desglosan bajo conceptos más generales.

Ejemplo de menú para navegación jerárquica (Aquí entran la mayoría de

los menús desplegables):

NO LINEAL

Es adecuada cuando se tiene que conservar el camino general, pero hay que

dar lugar a ligeras variaciones, tales como saltarse determinadas páginas.

Permite algunos desvíos controlados, la estructura obliga a regresar al camino

principal, y normalmente al tener un desvío lateral es porque se muestra una

pequeña información adicional.

Ejemplo de menú para navegación no lineal:

COMPUESTA

La navegación compuesta es la que combina diferentes sistemas de navegación

para permitirle al usuario un recorrido más personalizado dentro del sitio.

Ejemplo de menú para navegación compuesta:

OTROS

SITEMAP O MAPA DE SITIO

Un mapa de sitio es la representación completa de la organización de la

información en un sitio web. Expresa todas las relaciones de jerarquía y

secuencia entre sus diferentes contenidos por medio de listas y vínculos.

PIE DE PÁGINAS

El último, pero no menos importante elemento de una web

El pie de página es una pequeña zona que ocupa la parte inferior de tu web, y aunque su tamaño es modesto, resulta de suma importancia en términos de diseño y para ofrecer información adicional. Existen muchas posibilidades de usarlo. Si no sueles prestarle mucha atención, te arriesgas a perder el interés de tu web. En este artículo, te explicamos cómo aprovechar este pequeño gran espacio.

Texto del pie de página

Te recomendamos incluir en él la siguiente información: • Derechos de autor, por ejemplo: “Copyright © 2012 | Tu Nombre” • Número de teléfono o dirección actual: es fundamental poner esta información en la página de contacto, pero si también figura en el pie de página, los visitantes la encontrarán más fácilmente. • Eslogan: incluir un eslogan en el pie de página es una buena estrategia para fortalecer tu marca. • Información adicional.

¡Aquí es en dónde se esconde toda la magia del pie de página! Esta sección es completamente editable: ¡hasta las etiquetas HTML son aceptadas! Puedes insertar texto con enlace, imágenes y hasta direcciones de e-mail.

Sugerencias:

• Tu nombre con un enlace a tu e-mail. • También puedes añadir un logotipo (imagen) de tu compañía usando HTML. • Insertar enlaces a webs de colaboradores: el pie de página es un lugar en el

que puedes añadir enlaces patrocinados, ya que es un área privilegiada de tu página. • Mejora la navegación: si no deseas sobrecargar el menú, el pie de página puede ser usado para añadir secciones extra del menú. • Enlaces a redes sociales: puedes utilizar tanto enlaces de texto como banners (imágenes con enlace). Por ejemplo, usa el logo de Facebook con un enlace a tu perfil para que tus visitantes puedan acceder fácilmente.

Como puedes ver, existen una gran variedad de opciones para usar en tu pie de página. Deberías considerar qué es lo más beneficioso para tu web y elegir qué elementos utilizar.