Post on 13-Apr-2017
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.