Curso online de Joomla: los menús del sitio Web (I)

24 08 2008

Joomla, excelente CMS de código abiertoEn los artículos anteriores has visto como administrar y publicar contenidos y como crear y administrar categorías y secciones. Pero, publicar no significa siempre “hacer visible”. Si bien es cierto que los visitantes de tu sitio web podrán buscar contenidos mediante la función de búsqueda, ¿quién se molestará en buscar algo que no se puede ver?. En otras palabras, falta algo esencial: los apuntadores a los contenidos, es decir, los menús que permitan a los usuarios navegar por las distintas secciones y sus distintos artículos para acceder a los contenidos del sitio.

El diseño de los menús es básico a la hora de diseñar una Web pues serán éstos los que facilitarán la accesibilidad y la navegabilidad por sus contenidos. Por tanto, debes tener muy claro los menús de navegación que incluirás en la Web de tu centro. En Joomla, en realidad, los menús son un tipo particular de módulos cuya configuración se realiza en un apartado específico. La potencia y versatilidad de tu sitio Web va a depender en buena medida de una buena configuración de los menús porque podrán suponer enlaces a contenidos o artículos de tu sitio pero también enlaces a componentes para potenciar determinados servicios e incluso enlaces a sitios web externos.

La instalación base de Joomla viene con diversos menús ya configurados con varios items o enlaces en cada uno de ellos para mostrarte distintas posibilidades de configuración. Pero además de poder editar estos menús, podrás crear con Joomla todos los menús que necesites. Incluso podrás mostrar diferentes menús según la sección o página por la que navegue el usuario, como verás más adelante.

ejemplo de menú de navegación ejemplo de menú de navegación ejemplo de menú de navegación

Ejemplos de menús de navegación de sitios web realizados con Joomla


El administrador - gestor de menús

En la instalación base de Joomla existen ya creados diversos menús, cuatro específicos que localizarás en todas las versiones de Joomla y dos más para Joomla 1.5:

  • Main Menu (mainmenu): el Menú Principal del sitio y el más importante. Está ubicado, de forma predeterminada, en la posición left - izquierda y es fácilmente reconocible. Lo que se encuentre como primer elemento de este menú es lo que se mostrará en la página principal.
  • Other Menu (othermenu): Menú adicional, aparece justamente debajo del anterior, pero sín título.
  • User Menu (usermenu): Menú de usuario. Es un menú muy especial porque sólo aparece cuando un usuario se registra e ingresa en el sistema con su nombre de usuario y contraseña.

menú de usuario

  • Top Menu (topmenu): menú horizontal que suele mostrarse en el encabezado dentro de la posición top, pero que no se verá en todas las plantillas, porque no todas tienen definida dicha posición.

Además, en la versión 1.5 Joomla incluye otros dos menús:

  • Páginas de ejemplo (ExamplePages): un menú que permite la navegabilidad hacia páginas de demostración de Joomla para que aprecies las posibilidades de la creación de menús.
  • Concepto clave (KeyConcepts): menú que la instalación básica de Joomla destina al enlace con ciertos artículos de ayuda.

Puedes visualizar y acceder a todos ellos desde el Administrador de menús que encontrarás en el Panel de Control en la versión Joomla 1.x.0 o bien desde el llamado Gestor de menús del Panel de Control o bien desde Menús - Gestor de menús en la versión 1.5.

Sea la versión de Joomla que utilices, Joomla te mostrará un listado con todos los menús creados hasta el momento en una misma pantalla:

Joomla 1.5: gestor de menús

Observa la información que te muestra la pantalla:

  • La lista de menús: de momento, los preestablecidos por Joomla. Irá aumentando o no en función de los menús que vayas creando.
  • Un icono que te permite el acceso a las diferentes entradas de menú existentes en cada uno de ellos. Si haces clic sobre él, accederás directamente a los puntos o ítems de menú correspondientes. Podrás entonces eliminarlos, crear nuevos elementos o editarlos, es decir, entrarás en modo de edición de los ítems o puntos de menú que lo constituyen.
  • Las columnas que te indican si están publicados o no: recuerda que, en realidad, cada menú que crees es un módulo en Joomla (y su administración se realizará desde el Administrador / Gestor de módulos). Puedes crear un nuevo menú pero si no se encuentra publicado no será visible en tu sitio Web. Has de tener esto en cuenta para evitar posibles errores en el diseño de tu Web.
  • Una columna específica papelera que te indica los puntos de menús que has creado en algún momento pero que has eliminado posteriormente (Joomla incluye una papelera especial para gestionar los menús eliminados).

Editar los menús existentes

Para tu sitio Web seguramente tendrás que crear nuevos menús o editar los menús ya existentes. Son imprescindibles para visualizar los contenidos que vayas creando, tanto artículos de contenido asignados a las diferentes secciones y categorías, como Contenidos estáticos (en Joomla 1.x.0) o artículos sin asignar a secciones y categorías (en Joomla 1.5) y te servirán, también para enlazar con sitios Web externos o con componentes de Joomla que realizan diferentes tareas.

Por el momento, no vas a crear un menú nuevo sino que vas a editar uno de los menús esenciales de Joomla, el mainmenu, el único menú que no podrás eliminar, ya que se utiliza para el correcto funcionamiento de Joomla.

En Joomla 1.x.0:

Accede al Administrador de menús desde el Panel de Control. En la nueva página haz clic sobre el icono de la columna Artículos del menú situado inmediatamente a la derecha del nombre del menú mainmenú. Observa que aparece ahora en pantalla un listado con los llamados ítems, puntos o entradas de menú.

menú mainmenu - puntos de menú

La información que se muestra en pantalla es muy intuitiva: el nombre de los puntos de menú, tal y como los visualizarás en los menús de navegación del sitio, si se encuentran publicados o no, el orden en el que se mostrarán (si los seleccionas y haces clic sobre las flechas abajo y arriba de la columna ordenar los cambiarás de orden), el acceso público o restringido al punto de menú y el tipo de menú establecido (observa los diferentes tipos que se muestran, Joomla posibilita múltiples opciones que verás más adelante).

Para eliminar alguno de estos puntos sólo tendrás que seleccionarlos y hacer clic en el botón Basura. Por ejemplo, elimínalos todos menos Inicio y Contactar. Recarga el Frontend para ver el nuevo aspecto del menú en el sitio Web: recuerda, previsualiza el sitio en Sitio - Vista previa o haciendo clic en el enlace Previsualizar que localizarás en la parte superior.

eliminar puntos de menús

En Joomla 1.5:

Los procedimientos son similares. Accede a la gestión de los menús desde el Gestor de menús que localizarás en el Panel de Control o desde la entrada Menús - Gestor de menús. Accede a los ítems de menú de cada uno de ellos y, tal y como te mostramos en el punto anterior, selecciona aquellos ítems que deseas eliminar haciendo clic, a continuación, sobre el icono Papelera. Elimina de esta manera todas los puntos de menú excepto Inicio, el establecido como Predeterminado (observa la estrella amarilla a su derecha) y Servidor de noticias. Recarga el Frontend para visualizar el aspecto del menú en el sitio Web tal y como ya sabes.


Cambiar el nombre de los puntos de menú

Independientemente de la versión de Joomla que utilices cambiar el nombre de un punto de menú es muy sencillo. Simplemente haz clic en el nombre del punto de menú que deseas modificar y en la nueva página que aparece cámbialo en el campo de texto Name (versión 1.x.0) o Título (Joomla 1.5) tecleando el nuevo nombre elegido. Recarga el Frontend para visualizar el cambio de nombre. ¡Así de simple!

Nota. Es muy recomendable que a la hora de escribir / teclear alias de artículos, secciones, categorías o menús no uses tildes ni dejes espacios en blanco: utiliza en su lugar el guión entre palabras para escribir alias largos.


Crear un nuevo punto de menú

A partir de ahora abordaremos cómo crear un nuevo punto de menú en el seno de un menú ya creado, de los preestablecidos por Joomla, como es el mainmenu. Es muy posible que ésta sea una tarea relativamente habitual en Joomla para un administrador del sitio por lo que te recomendamos prestes especial atención a este apartado. Además, la creación de menús en Joomla no es demasiado intuitiva y ofrece tantas opciones y posibilidades de combinación que puede resultarte inicialmente algo complicado, sobre todo, si estás utilizando una versión 1.x.0 de Joomla. Toda la gestión de menús ha sido revisada y modificada en la versión 1.5 para facilitar al administrador su creación y edición y es, en este apartado, donde notarás las mayores diferencias entre ambas versiones.

Como ya te hemos indicado desde el primer artículo de esta serie dedicada a Joomla, nuestro objetivo será ofrecerte ejemplos concretos de creación de menús, los más usuales y habituales, pero te corresponderá a tí adaptar nuestros procedimientos a tus necesidades concretas. Y, sobre todo, en estas cuestiones, el establecimiento de menús en Joomla es tan extraordinariamente configurable que tendrás que hacer un esfuerzo añadido de personalización.

En esta práctica vas a crear nuevos puntos de menú en el menú principal (mainmenu) que apunten a las secciones creadas en el artículo anterior. De esta manera, cuando uno de los visitantes de tu web haga clic sobre el enlace del menú correspondiente accederá a todos los artículos que hayas escrito para dicha sección ordenados cronológicamente: es muy similar a lo que estás acostumbrado a ver cuando visitas algún blog en Internet.

En Joomla 1.x.0:

Primero, debes situarte en el Administrador de menús y hacer clic sobre el icono que te permite acceder a los puntos de menú del mainmenu, el menú que vas a modificar. En la pantalla de edición de menús, localiza el icono Nuevo y haz clic sobre él.

nuevo punto de menú

Una pantalla con variedad de opciones se abre ante tus ojos. Es una página en la que podrás determinar el tipo de menú que vas a crear. Pero… ¿cuál elegir?.

Como nuestro objetivo inicial es crear puntos de menú que apunten a las diferentes secciones creadas anterioremente: Centro, Familias, Alumnado y Profesorado y deseamos que se muestren, en forma de blog, todos los contenidos pertenecientes a dicha sección en cuestión, debemos seleccionar la opción Bloque - Sección de contenido, que hará precisamente eso, mostrar una sección en tipología de blog. Valida la opción y haz clic en el botón de la parte superior Siguiente.

nuevo punto de menú

En la siguiente pantalla sólo debes preocuparte, por ahora, de poner un nombre al punto de menú (se mostrará en el menú de navegación de tu web) en el campo de texto Nombre (por ejemplo, teclea Centro) y asignarlo a la sección correspondiente, es decir, la sección Centro.

nuevo punto de menú

Como ves en pantalla, por defecto, observa que el punto de menú se encuentra publicado y su nivel de acceso es público (es decir, se visualizará en el menú de navegación y cualquier visitante podrá hacer clic sobre él para acceder al contenido de la sección). Cuando finalices, haz clic sobre el botón Guardar. El nuevo punto de menú aparecerá ahora en el listado de entradas del menú de mainmenú. Recarga el Frontend para visualizar el cambio en tu sitio Web.

Repite el procedimiento para crear los otros tres puntos de menú que apuntan a las secciones Familias, Alumnado y Profesorado. El aspecto del menú de navegación de tu menú será similar al siguiente:

nuevo menu mainmenu

Reordena los puntos de menú a tu gusto para su visualización en el menú de navegación: sube y/o baja las entradas del menú principal según te interese.

En Joomla 1.5

Los pasos para crear nuevos puntos de menú en Joomla 1.5 son exactamente los mismos que ya has visto en el apartado anterior, aunque es preciso mencionar que sí hay notables diferencias respecto a versiones 1.x.0 con relación a la elección de la tipología del menú a crear. La pantalla para seleccionar las tipologías de los menú ha cambiado… y mucho… y para mejor… resultando mucho más clara. Para conseguir el mismo resultado, un enlace a una sección, en esta versión 1.5 debes hacer clic sobre la entrada Artículos y en el menú desplegable que emerge, sobre el enlace Sección.

Joomla 1.5: nuevos puntos de menú

Joomla te ofrecerá dos opciones diferenciadas: selecciona la primera opción, presentación de la sección blog para mostrar una página en la que los artículos de la sección en cuestión se presenten en tipología blog o presentación de la sección para mostrar una lista de las categorías de la sección con el número de artículos publicados por categoría. Puedes ver dos ejemplos concretos, a continuación, de cómo se visualizarían las páginas en cada caso:

sección blog

Aspecto de la página al seleccionar Presentación de la sección Blog

Joomla 1.5: nuevos puntos de menú

Aspecto de la página al seleccionar Presentación de la sección

Procede repitiendo los procedimientos para crear las entradas en el menú Centro, Alumnado, Profesorado y Familias que apunten a estas secciones creadas en el sitio Web.

El aspecto final del menú Principal será similar a la siguiente captura de pantalla:

Joomla 1.5: nuevos puntos de menú

Nuevo menú principal (mainmenu) con nuevos puntos de menú

¿Tienes ahora más claro cómo editar los menús en Jooma?, ¿te atreves a experimentar con la creación de otras entradas en el menú principal?

Estadísticas Este artículo ha sido visitado  9761  veces


Acciones

Informaciones

9 Comentarios a “Curso online de Joomla: los menús del sitio Web (I)”

28 01 2009
marco (17:29:26) :

hola que tal espero me puedas ayudar mira estory trabajando en joomla y tengo unas preguntas.
genere menus que aparecen en mi pagina principal pero cuando doy click en el menu principal sigue apareciendo ese mismo porlo q entiendo esta bien pero no me muestra los otros menus que muestra la pagina de inicio como le hago.
otra cosa tambien quiero generar imagnes como menus pero queme enlacen a otra pagina externa por decir google eee heco estos enlacesnormalesen donde pongo en mi menu el itulo google y lo hago como link pero lo quq quiero es por decir tener la imagen pequeña de google y que al dar clik se valla a la pagina de google como lehago por fovor ayudame
ahun estoy aprendiendo

19 02 2009
MARIA EDITA SUEIRAS RODRIGUEZ (08:09:02) :

Debes utilizar la opción que Joomla te ofrece para asignar menús a diferentes entradas de menú: asegúrate de que seleccionas todos y cada unos de los puntos de menú en el que necesites que se visualice el menú en cuestión. En Joomla 1.5 debes editar el módulo al que se refiere el menú y asignarlo a cada entrada de menú donde quieras que aparezca al hacer clic.
La segunda cuestión se resuelve creando un módulo personalizado en el que incluyas la imagen que deseas enlazar y realices en ella un link al sitio web al que quieres acudir.
No tengo demasiado tiempo para dedicarme al blog pero en posteriores artículos recogeré aspectos similares al que solicitas. Ponte en contacto conmigo a través de mi correo electrónico y te indicaré soluciones detalladas.

3 04 2009
Carol (00:18:19) :

Hola, tengo un problema, estoy utilizando jommla 1.5, y quiero colocar un video en un apartado específico de mi sitio, a la hora de eligir donde quiero que aprezca voy al gestor de modulos, eligo el modulo y en el apartado “asignación de menú” /selección del menú donde deberían aparecer todos los menús, solo me aparecen 2 de los 7 que tengo y el apartado del menú donde deseo colocar esta imagen no me aparece unicamente me aparecen dos, que puedo hacer?

3 04 2009
MARIA EDITA SUEIRAS RODRIGUEZ (07:29:23) :

Hola Carol.
Entiendo que has creado 7 menús y que quieres que en una entrada de uno de los menús se enlace un vídeo… Eso significa que en el Gestor de menús (Menús - Gestor de menús) debes tener un listado con esos 7 menús… ¿es así?
Recuerda también que cada vez que creas un menú con el gestor de menús Joomla 1.5 creará automáticamente un módulo para ese menú: comprueba que en el Gestor de módulos (Extensiones - Gestor de módulos) se muestren esos 7 nuevos menús y que la columna Habilitado se muestre en verde.
Realiza estas comprobaciones y, si lo necesitas, haz de nuevo otra consulta. Intentaré ayudarte.

8 04 2009
Maritza (18:23:53) :

Hola me puedes indicar como hago para “mostrar diferentes menús según la sección o página por la que navegue el usuario”. Pues no logro encontrar como hacerlo.

Gracias.

9 04 2009
MARIA EDITA SUEIRAS RODRIGUEZ (20:13:07) :

Hola Maritza.
Tienes que utilizar la opción que te ofrece el módulo asociado a cada menú en la parte inferior de la pantalla de configuración Asignación de menú. En lugar de seleccionar Todo asegúrate de selección Selecciona ítem… y haz clic sobre cada entrada de menú que desees que aparezca el menú que estás configurando.
Haz una prueba. Acude a http://www.opensourcecms.com/cms/joomla/admin.html, una demo de joomla con la que podrás trastear un poquito.
Entra al sistema con los siguientes datos: usuario admin y contraseña demo123. Haz clic en el botón Preview para previsualizar la página en una nueva pestaña o ventana. En el frontend del sitio haz clic sobre Home, verás que aparece un nuevo menú Resources justo debajo del menú principal main menú. Si, en cambio, haces clic en About Joomla, entonces el menú Resources desaparece y aparece en su lugar Key concepts.
¿Cómo se consigue esto?. En el Gestor de módulos de la administración: Extensions - Module Manage haz clic sobre el módulo Resources. Observa el apartado Menu assignment - asignación de menú en la pantalla de configuración del módulo. Sólo aparece resaltada la opción Home (es decir, sólo haciendo clic en Home se verá el menú Resources). Aprieta la tecla Ctrl de tu teclado y selecciona, en este mismo apartado, la entrada About Joomla que localizarás en top menú para resaltarla igualmente. Aplica los cambios - botón Apply.
Ahora recarga el frontend y comprueba que al hacer clic en About Joomla aparece el menú Resources, que antes no veías.
Como ves tienes que “jugar” con la asignación de menú de los módulos seleccionando aquellas entradas en las que quieras que, al hacer clic aparezcan los menús que hayas diseñado.
Espero haberte ayudado.
Un saludo

10 04 2009
Maritza (05:41:45) :

Muchas gracias por tu ayuda.

9 07 2009
Romulo (16:51:20) :

Hola, bueno tu articulo. Deseo saber como poder asignar un menu a un usuario o grupo de usuarios en particular.
gracias

23 03 2010
marian (19:24:22) :

Hola! Me gustaría saber si es posible que aparezca el mensaje “Hola usuario! del módulo ACCESO dentro del usermenu acompañando a los otros items, por ejemplo:

Hola Marian,
Mi cuenta
Enviar enlace
Cerrar sesión

Muchas gracias, quizá no sea posible, pero así el usuario lo tendría todo en un solo módulo (menú)

Enviar un comentario


*
Para demostrar que eres un usuario (no un script de spam), introduce la palabra de seguridad mostrada en la imagen.
Anti-Spam Image