Navegación

Ice Cream and Cold DrinksCada sitio necesita una navegación fácil de comprender, sino no será posible, por parte del usuario, encontrar lo que está buscando. Esto puede parecer simple, pero no es una tarea sencilla. En un mundo ideal, cada página de un sitio debería ser accesible con dos o tres clics. Otro hecho es que a menudo, por no decir siempre, los visitantes llegarán desde un motor de búsqueda o una red social y aterrizarán en cualquier página del sitio. Es un de los motivos por los que se debería incluir un botón "Portada" en cada página.

Un sitio web suele tener una navegación primaria y una secundaria. La navegación primaria está usualmente en la parte superior o en el lateral izquierdo o derecho. La navegación secundaria suele estar al principio o al final del sitio. Suele contener enlaces como contacto, sobre nosotros e información legal. La idea detrás de todo esto es tener estos enlaces en el sitio pero no en posiciones importantes.

Como regla general, no pongas más de 4 a 8 enlaces en el nivel de navegación

Breadcrumbs (Miga de Pan)

Un 'breadcrumb' es una ayuda en la navegación. El termino viene del camino de migas de pan que dejaban Hansel and Gretel en el cuento de hadas de los hermanos Grimm. Se suele posicionar de forma horizontal en la parte superior de un sitio web. comúnmente se emplean dos estructuras:

  • mostrar enlaces hacia la página anterior donde hizo clic el usuario para llegar a la página actual.
  • mostrar las páginas padre de la página actual.

Breadcrumbs es una forma de prevenir que los visitantes se sientan perdidos en el sitio. Los visitantes siempre deberían saber donde están en el sitio y cómo volver atrás. Para esta tarea Joomla trae el módulo Ruta de navegación. La mayoría de las plantillas suelen tener una posición reservada para su uso (Figura 1).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 1: Breadcrumbs

Menús de Joomla!

La navegación en Joomla se crea a partir de los menús. Es posible crear tantos menús como se necesiten en el sitio, de forma que cada menú puede tener cualquier número de ítems de menú anidados e incluso se puede filtrar por niveles. Un menú suele ser asignado a un componente o a una URL externa y es posible asignarle a cada item de menú estilos de módulos y plantillas. El contenido de muestra trae creado algunos menús por defecto.

Veamos un ejemplo de navegación primaria con páginas estáticas y categorías dinámicas.

Primer ejemplo: un catálogo estático o una estructura de un libro.

En algunas ocasiones necesitas una navegación para un libro, catálogo o guía. Encontrarás un ejemplo de este tipo de configuración en el contenido de muestra en el menú About Joomla! Supongamos que estamos escribiendo un libro que consiste en tres capítulos. La navegación estaría enlazada a todas las páginas como en la Figura 2.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 2: Estructura de un libro estática

Preparación

Crear una estructura de libro con algunos capítulos

  • El libro de Joomla
    • Introducción
    • Contenido
      • Como usar A
      • Como usar B
  • Plantillas

Antes de crear los ítems de menú hay que crear los artículos individuales (páginas). Ve a Contenidos → Gestor de Artículos → Añadir nuevo artículo (Figura 3). Asigna estos artículos a la categoría sin categoría o crea una categoría llamada libro para asignársela a los artículos.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 3: Seis 'capítulos' del libro

Paso 1: Crear el menú

Se puede utilizar un menú ya existente como navegación primaria o se puede crear uno  nuevo accediendo a Menús → Gestor de Menús → Añadir nuevo menú y rellenar el formulario (Figura 4).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 4: Añadir nuevo menú

Paso 2: Creando ítems de menú

Ve a Menús → MiMenú y añade los seis artículos como enlaces. Elige Mostrar un solo artículo como tipo de elemento del menú. Selecciona el artículo e introduce un Título de Menú (Figura 5). Si has olvidado como se hace esto, quizás deberías mira el capítulo Cómo crear una página 'Sobre nosotros.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 5: Menú de navegación primario

Paso 3: Creando y asignando módulos

Este paso tiene truco. Ahora tienes los artículos, el menú y los item de menú, pero también necesitas un módulo para posicionarlo en el sitio. Sigamos adelante y creemos uno. Ve a Extensiones → Módulos → Nuevo Módulo y rellena el formulario. En el campo Seleccionar Menú en configuración básica elige MiMenú. Selecciona Si en el campo Mostrar elementos del menú (Figura 6).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 6: Módulo de navegación primario

El último paso es la posición en la plantilla. Clic en el botón Seleccionar posición usa el filtro para la plantilla Beez_20 y elige position-4. Guárdalo todo y hemos terminado.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figura 7: Seleccionar la posición en la plantilla

Segundo ejemplo: Enlazando a las categorías (Revista de noticias)

Es posible enlazar algunas páginas como en el primer ejemplo, pero ¿Qué harías si tuvieses miles de artículos? La respuesta es sencilla en Joomla 1.6: Construye una estructura con categorías, asigna los artículos y enlázalos a un layout de categorías.

Preparativos

Necesitamos algunas categorías para los artículos: 

Categorías:

  • Noticias
    • Mundial
    • África
    • Europa
  • Tecnología
    • Internet
    • Coches

Créalas o utiliza las categorías existentes.(Leer más en: Estructura el Contenido en Categories). tod do Spanish link Structure your content with categories).

Paso 1: El menú

Depende de ti como seguir. La forma más sencilla es usar el menú que creamos en el apartado anterior, pero si quieres puedes crear un menú Noticias como haré yo.

Paso 2: Los ítems del menú

Cuando se trabaja con categorías tienes que pensar en que será lo que se mostrará cuando haces clic en un enlace. El comportamiento esperado en nuestro caso es (Figure 8):

  • Categoría de Noticias = todas las noticias
  • Categoría de Noticias→ Mundial = solo las noticias mundiales.

cocoate.com/node/6032/

Figura 8: Ítems de menú de Noticias

Para alcanzar el comportamiento esperado crea un item de menú del tipo Categoría en formato blog. En opciones requeridas, elige la categoría que acabas de crear Noticias. En opciones del formato tipo blog elige Incluir subcategorías – Todos y # Artículos de introducción = 0. Continua creando ítems de menú anidados para cada categoría adicional (Figura 9).

cocoate.com/node/6032/

Figura 9: Opciones de Categoría

Ahora puedes manejar miles de artículos. La navegación está preparada para ello y los visitantes entenderán el sistema inmediatamente (Figura 10).

cocoate.com/node/6032/

Figura 10: Artículos en la estructura de categorías

Algunos ajustes

Como has podido ver, hay muchas posibilidades de configurar las opciones. Muchas cosas son posibles y te permitirán encontrar el camino para alcanzar tu objetivo. En cuanto a la navegación es posible filtrar el nivel de los ítems de menú en los módulos. Por ejemplo:

  • el primer nivel de Noticias se puede posicionar en la parte superior, mientras que el segundo y tercer nivel puede hacerse en la parte izquierda y derecha.
  • el primer nivel se puede colocar en la parte superior y usar un menú desplegable para ver los siguientes niveles (depende de las características de la plantilla).

Experimentando un poco serás capaz de encontrar una solución para cada caso. La navegación en Joomla puede ser un poco complejo, pero es una herramienta muy poderosa.