Curso online de Joomla 1.5: los módulos (y IV)

31 07 2009

Continuando con nuestra serie de artículos dedicados a la utilidad de los módulos en Joomla, hoy dedicamos un artículo a los dos últimos tipos de módulos que puedes usar en el CMS:

  • Los módulos de menús
  • Los módulos de usuario

Módulos de menús

Son aquellos módulos creados de manera automática por parte de Joomla como consecuencia de la creación de un menú. No es ahora el momento de profundizar en la creación de menús, aspecto que veremos en artículos posteriores, pero sí te adelantamos que en Joomla los menús que visualizarás en un sitio Joomla son, en realidad, módulos. Por ejemplo, el Menú Principal que se muestra en el sitio o mainmenu es un módulo llamado de esta misma manera que localizarás en el Gestor de módulos. Si acude a Extensiones - Gestor de módulos lo localizarás en la lista tipo con el nombre mod_mainmenu.

Joomla 1.5: módulo mainmenu o el menú principal

Cuando creas un nuevo menú en el sistema, Joomla crea automáticamente un módulo de tipo mainmenu para dicho menú. Como ocurre con todos los tipos de módulos, tendrás que habilitarlo manualmente y configurarlo según tus intereses (establecer su nivel de acceso, decidir su ubicación en la plantilla…) para que el menú se muestre en tu sitio web. De momento observa en el Frontend que el módulo mod_mainmenu, que de forma predeterminada se corresponde con el Menú principal se muestra en la página inicial de tu sitio.

Como cualquier otro módulo podrás cambiarlo de posición: por ejemplo, puedes colocarlo en la parte derecha de la página si es de tu agrado.

En futuros artículos hablaremos de la creación de menús en Joomla 1.5 y entenderás mejor este tipo de módulos.

Módulos de usuario

Son módulos creados de manera manual por el administrador del sistema desde la parte administrativa del Backend. Joomla permite así crear nuestros propios módulos: módulos muy sencillos que mostrarán simplemente información sin hacer ningún tipo de consulta a la base de datos. Serán módulos estáticos porque la información que muestran es invariable pero te aseguramos que son de extraordinaria utilidad. Por ejemplo, este tipo de módulo te permitirá crear un módulo Enlaces en el que mostrarás imágenes características de diversos sitios Web que enlazarás con sus correspondientes direcciones URL.

En este artículo vas a crear un nuevo módulo que te servirá como base para duplicarlo en otros módulos para que su funcionalidad sea similar. El módulo consistirá en una imagen que enlazarás con una página web externa. Para esta práctica utilizaremos un par de imágenes que puedes descargar directamente a continuación (botón derecho del ratón - Guardar imagen como:

Logo del NEA   Isftic, recursos para niños

Joomla te permite insertar imágenes en los contenidos que crees de muy diferentes maneras. Puedes utilizar imágenes que tengas alojadas en la web (no necesariamente en tu servidor) o que se localicen en Internet. Este es el caso de imágenes alojadas en servicios alojadores de archivos o imágenes ya publicadas en otras páginas, como las imágenes de la Wikipedia que desees referenciar. En estos dos casos para incluirlas en tus contenidos de Joomla deberás conocer su dirección URL y referenciarla en ellos estableciendo vínculos al archivo multimedia desde el contenido. Este procedimiento se convertirá seguro en uno de tus favoritos y, es más, será uno de los más recomendables a la hora de utilizarlos, ya que los archivos multimedia suelen requerir bastante espacio de almacenamiento: recurrir, pues, a esos servicios Web será una excelente idea para evitar agotar tu propio espacio de hosting, limitado en muchos servidores incluso de pago. Entre los más populares YouTube, Flickr, Picasa Web, Photobucket, Google Videos, etc.

Pero puede ocurrir también que prefieras utilizar imágenes alojadas en tu propio servidor (procedimiento que utilizarás habitualmente cuando trabajes con tu servidor local: en este caso la limitación del hosting la pone sólo la capacidad de tu disco de almacenamiento). En este caso Joomla te ofrece una herramienta para gestionar este almacenamiento, el Gestor Multimedia, y diversos procedimientos para incluir estas imágenes en tus contenidos. “Con el ordenador a cuestas” te mostrará cómo actuar en cada uno de ellos, después será decisión tuya escoger el procedimiento que consideres más oportuno o más cómodo. Además también tienes que tener en cuenta que en una sesión previa de este curso online hemos instalado el editor JCE y lo hemos configurado para que el administrador del sistema lo utilice, por tanto, el tutorial que aquí se muestra está basado en la inserción de imágenes con este editor.

Curso online de Joomla 1.5: Lo primero… instalar un buen editor - Acceder


El Gestor Multimedia

Joomla incluye su propio gestor multimedia que te permitirá gestionar los archivos multimedia de tu servidor: te permitirá crear carpetas, subir nuevos archivos al sistema, borrarlos, previsualizarlos o conocer la ruta de almacenamiento de cualquier archivo que se encuentre en tu espacio. No es demasiado completo pues no podrás utilizarlo para copiar, mover, renombrar o buscar archivos, pero sí suficiente para nuestras pretensiones actuales. Accederás a él desde el Panel de Control o desde el menú Sitio - Gestor Multimedia.

Su manejo es extremadamente sencillo e intuitivo: sólo tendrás que localizar el archivo a subir y la carpeta de tu directorio Joomla en la que lo guardarás y Joomla se encargará del resto.

Inicialmente el Gestor Multimedia muestra la vista en miniatura, pero podrás cambiar a la vista detallada haciendo clic sobre el enlace Vista detallada que localizarás en la zona superior de la pantalla. Esta vista en miniatura divide la pantalla en tres partes:

Joomla 1.5: el Gestor Multimedia

  • Carpetas. En la parte izquierda puedes ver las carpetas de las que se compone (de manera predeterminada Joomla establece como directorio de archivos multimedia la carpeta images - puedes cambiar esta ruta en el menú Sitio - Configuración global - pestaña Sistema - bloque Configuración multimedia). ¡A tener en cuenta: puedes modificar las rutas a las carpetas predeterminadas, pero no elimines nunca las carpetas que Joomla tiene establecidas de manera predeterminada para los archivos multimedia: images, stories… son utilizadas por muchos componentes de Joomla. Si las borras, tendrás problemas con la instalación de extensiones de terceros para Joomla! Al hacer clic sobre cada una de ellas podrás ver en la zona derecha de la pantalla los archivos que contiene.
  • Archivos. En la parte derecha tienes una previsualización de cada archivo y, debajo de ella, el nombre del archivo y una casilla de activación que te permitirá seleccionarlo para borrarlo, bien con el icono rojo que hay a su lado, o bien a través del botón borrar de la parte superior derecha de la pantalla. Si haces clic sobre la imagen en miniatura o sobre el nombre del archivo podrás visualizarlo a tamaño real. Observa que en la parte superior se muestra la ruta completa de la carpeta o archivo dentro del sistema: esta información puede resultarte de utilidad para crear enlaces a estos archivos. Dispones también del botón Crear carpeta, que podrás utilizar para crear nuevas carpetas para organizar mejor los archivos del sistema. Recuerda, cuando lo hagas, posicionarte en la carpeta en cuyo interior desees crear subcarpetas.
  • Subir archivo. En la parte inferior de la pantalla se muestra un formulario básico de subida de archivos: el botón Examinar te permitirá localizar un archivo multimedia en tu equipo y el botón Empezar subida te permitirá “subir-copiar” el archivo a la carpeta que tengas seleccionada en Archivos. En este proceso sólo podrás subir archivos de uno en uno. Para superar esta limitación, Joomla te ofrece en Configuración global - Sistema - configuración multimedia la posibilidad de habilitar Flash Uploader (valida Si en Habilitar la subida de Flash y guarda los cambios mediante el icono Guardar), de tal manera que puedas subir varios archivos a la vez y conocer el proceso de transferencia mediante un porcentaje. Ahora el botón Examinar se ha sustituido por un botón Navegador de archivos que abrirá una ventana en la que podrás seleccionar varios archivos a la vez. ¡Nota: Flash Uploader no funciona con Flash 10, este error, de momento, no está solucionado!.

Joomla 1.5: el Gestor Multimedia


Práctica. Crear un módulo nuevo con una imagen enlazada

Lo primero será comenzar con la creación del nuevo módulo. Para ello acude al menú Extensiones - Gestor de módulos. Haz clic sobre el botón Nuevo de la barra de herramientas. En la nueva pantalla selecciona la opción Personalizar HTML: es la opción que te permitirá crear tu propio módulo utilizando el lenguaje html de publicación web en un editor de textos. Valida el botón y haz clic sobre Siguiente en la barra de herramientas o haz clic en su nombre. Accederás así al formulario de creación del nuevo módulo.

Teclea como nombre del módulo Mis enlaces escribiendo estas palabras en el campo Título (éste será el valor que se muestre en el Frontend), escoge posición right (derecha) y deja que sea la posición 0 la que le corresponda. Asegúrate que se encuentra habilitado (lo estará de forma predeterminada). Ahora dirígete hasta el final de la página, hasta que veas el editor de textos de Joomla, en concreto, la sección Salida personalizada.

Si estás familiarizado con la utilización de un procesador de textos no tendrás dificultades para utilizar este editor, incluso algunos iconos son exactamente los mismos que encontrarás en Word o en OooWriter. Podrás teclear el texto en el lienzo en blanco y, a continuación, editarlo según tus preferencias. Pongámonos a la tarea:

1. Escribir un texto

Teclea en el espacio en blanco NEA. Vas a darle un formato característico. En primer lugar, selecciona toda la palabra con el ratón o haciendo doble clic encima de ella y pulsa el icono con la letra B que localizarás en la barra de herramientas del editor. Esto hará que la palabra aparezca resaltada en negrita.  A continuación, localiza el apartado tamaño de fuente y en el menú desplegable selecciona un tamaño de 12 puntos. Haz clic con el ratón al final de la palabra y con un Intro pasa a la línea siguiente, exactamente igual que harías con tu procesador de textos favorito.

Joomla 1.5: escribir texto en un módulo personalizado HTML

2. Insertar la imagen

a. Mediante el botón Imagen

Joomla te ofrece un botón Imagen que hallarás en la parte inferior del editor. Te permitirá insertar una imagen en el módulo.

Joomla 1.5: botón Imagen

Fíjate en la parte inferior de la ventana que emerge en pantalla, la sección Subir.

 Joomla 1.5: botón Imagen

Haz clic sobre el botón Examinar y localiza el archivo nea_logo.png que te hemos ofrecido al comienzo del artículo y, posteriormente, haz clic sobre el botón Empezar subida. Con este sencillo procedimiento se realizará el volcado de este archivo de imagen a la carpeta images/stories (recuerda, la predeterminada por el sistema para alojar nuevas imágenes). Una vez que finalice la subida del archivo el sistema te indicará con un mensaje que la subida se ha completado y podrás ver una pequeña minuatura con su previsualización en la ventana (los archivos están ordenados alfabéticamente). Si haces clic sobre la imagen observarás que el campo URL de la imagen se rellena automáticamente con la ruta exacta al archivo en cuestión.

Completa los demás campos de texto que aparecen en la ventana:

  • En Descripción, incluye un texto descriptivo para la imagen elegida: logo del NEA - Navegador Educacional Asturiano
  • En Título, teclea un texto que la describa (aparecerá en el Frontend al aproximarte con el ratón a la imagen: Accede al NEA, Navegador Educación Asturiano.

Ahora sólo tienes que hacer clic sobre el botón Insertar que se localiza en la parte superior para que la imagen se inserte en el editor, justo en el lugar donde se situaba el cursor del ratón.

 Joomla 1.5: botón Imagen

Finalmente, centra tanto el texto como la imagen, seleccionándolos previamente, utilizando el icono de Centrado de la barra de herramientas del editor de textos.

 Joomla 1.5: centrado del texto en el editor JCE

Guarda finalmente los cambios realizados en el módulo utilizando el botón Guardar de la Barra de herramientas del formulario de creación del módulo.

b. Utilizando el botón Imagen del editor de textos JCE

Un segundo procedimiento te permite insertar una imagen en el módulo: utilizar el icono imagen del editor JCE. Vas a practicar con él: haz clic ahora sobre el módulo Mis enlaces, que aparece en el gestor de Módulos, esto te permitirá editarlo una vez ya creado y dirígete hasta la sección Salida personalizada, en la parte inferior de la pantalla. Haz clic al final de la imagen del logo del NEA y con un Intro pasa a la línea siguiente. Teclea ahora ISFTIC - NIÑOS y formatea el texto tal y como has hecho en el procedimiento anterior. De nuevo, un Intro para pasar a la línea siguiente: ahora vas a insertar la segunda imagen.

Para ello utiliza el icono Insertar imagen que localizarás en la barra de herramientas del editor de texto JCE.

 Joomla 1.5: editor JCE - insertar imagen

La ventana emergente Administrador de imágenes aparecerá en pantalla. Verás que se encuentra dividida en dos partes:

  • En la parte inferior de la pantalla, la sección Navegar. Te permite previsualizar el directorio de carpetas y archivos del directorio predeterminado en Joomla para las imagenes /images/stories. Puedes localizar una carpeta determinada en la columna Carpetas, un archivo multimedia en la columna central o visualizar en pantalla en la columna derecha detalles una miniatura de la imagen seleccionada en la parte central o un listado detallado de sus propiedades como el tipo de archivo, sus dimensiones o su tamaño. El icono Subir (está situado justo encima de la columna Detalles) te permitirá localizar la imagen que desees en tu equipo y subirla a tu servidor. Haz clic sobre este icono, una ventana aparece en pantalla; si pulsas sobre el botón Add - Añadir podrás acceder al disco o discos presentes en tu ordenador para localizar la imagen a utilizar. Finalmente el botón Subir iniciará el proceso de volcado de la imagen a tu servidor. Cierra, por último, la ventana. Podrás comprobar ahora que los datos relativos a la imagen han sido automáticamente rellenados en la parte superior de la ventana.

Joomla 1.5: editor JCE - insertar imagen

  • En la parte superior de la ventana verás los detalles de la imagen seleccionada. En este apartado el administrador de imágenes te ofrece opciones avanzadas para la edición de la imagen como modificar sus dimensiones, establecer el alineamiento de la imagen en relación con el texto que la acompañe, añadir un borde del ancho y color que desees, establecer márgenes e incluso establecer una imagen rollover, es decir, establecer una imagen que sustituya a la original cuando el ratón se acerca o no a la imagen seleccionada. No pretendemos hacer un manual completo de este administrador porque alguna de sus funciones son muy intuitivas, te animamos a que juegues y experimentes con él.

Joomla 1.5: editor JCE - insertar imagen

Cuando termines de hacer todos los cambios que desees (nosotros no hemos hecho ninguno) simplemente haz clic sobre el botón Insert que localizarás en la parte inferior de la ventana. La imagen se insertará en el editor. Guarda los cambios realizados.

c. Utilizando una imagen ya existente en Internet

En este último apartado vas a incluir una tercera imagen en el módulo, pero ésta ya se encuentra publicada en Internet. En concreto, vamos a utilizar la imagen del logo JClic alojada en el servidor del programa Clic, un excelente software educativo que te permitirá realizar y trabajar con actividades multimedia educativas.

Su dirección URL es http://clic.xtec.cat/img/jclic_logo.gif. En Firefox es muy sencillo conocer la dirección URL de las imágenes: cuando localices una de tu interés haz clic con el botón derecho del ratón sobre ella y en el menú emergente selecciona Ver imagen (la ruta se mostrará automáticamente en el campo de texto dirección Url del navegador). Puedes también utilizar la opción Copiar la ruta de la imagen para copiar esta dirección URL al portapapeles del sistema operativo.

Ahora utiliza de nuevo el icono para Insertar imágenes del editor JCE o el botón Imagen de Joomla. Pero en lugar de localizar una imagen de tu servidor, copia - pega la dirección URL de la imagen en el campo de texto dirección URL de la ventana emergente. ¡Fácil, no! El resto del proceso es exactamente igual al que te hemos descrito en los apartados anteriores.

Joomla 1.5: insertar una imagen alojada en Internet

3. Enlazar las imágenes

Ahora que ya sabes cómo insertar imágenes en un módulo (utilizarás exactamente los mismos procedimientos en Joomla para insertar imágenes en los artículos) sólo queda enlazarlas con las páginas web correspondiente. Y esto es muy sencillo, te mostramos cómo debes hacerlo con la primera de las imágenes, luego repite el proceso utilizando la dirección URL de Isftic y de JClic para las dos siguientes.

1. Haz clic sobre la imagen nea_logo.png para seleccionarla.

2. Observa en el editor de texto el icono en forma de cadena (ahora activo). Te servirá para añadir un vínculo al elemento seleccionado. Haz clic sobre este icono para abrir la ventana de edición Enlaces avanzados. JCE te permite añadir vínculos a sitios web, a documentos de tu servidor, a un destinatario e-mail, e incluso a contenidos del sitio o a entradas de los menús de Joomla, pero en este caso se trata de incluir la dirección URL del sitio al que se navegará cuando se haga clic en la imagen, es decir, a la página del NEA.

Joomla 1.5: enlazar una imagen a un sitio web

En URL teclea la dirección URL del NEA http://nea.educastur.princast.es (admite copiar - pegar: copias la dirección en Firefox, pegas en JCE), selecciona en Destino la opción Abrir en una ventana nueva para que el comportamiento del enlace sea que al hacer clic sobre la imagen, el sitio del NEA se abra en una nueva pestaña o ventana del navegador. Escribe como Título, NEA, Navegador Educacional Asturiano y haz clic, por último, en Insertar. ¡Listo!.

Joomla 1.5: enlazar una imagen a un sitio web

Repite el procedimiento para las otras dos imágenes con las siguientes direcciones URL:

ISFTIC NIÑOS: http://www.isftic.mepsyd.es/ninos/

JCLIC: http://clic.xtec.cat/es/act/index.htm

Guarda todos los cambios realizados y actualiza el frontend de tu sitio Joomla. Fíjate ahora en la nueva estética de tu sitio web y cómo el nuevo módulo aparece en la parte derecha de la pantalla. Comprueba también el funcionamiento del módulo y navega hacia las páginas enlazadas. ¿Funciona o no?

¿Vas intuyendo otras posibilidades? Este tipo de módulos, de gran sencillez a la hora de crearlos, serán de extraordinaria utilidad:

  • Podrás incluir varias imágenes enlazadas a diferentes sitios web, unas debajo de otras, a modo de panel de navegación, tal y como has visto.
  • Podrás duplicar el módulo para realizar otros similares y hacer más espectacular el diseño de tu sitio.
  • Podrás crear un módulo Quién soy, en el que muestres información personal para informar a tus visitantes de quién es el administrador del sitio, tu centro, tus proyectos, etc.
  • E incluso podrás crear subportales con módulos diferenciados por secciones y páginas de tu sitio Web. ¡Ahí es ná!

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


Acciones

Informaciones

2 Comentarios a “Curso online de Joomla 1.5: los módulos (y IV)”

26 10 2009
William Delgado (20:47:34) :

De gran ayuda tu artículo, aveces en estos casos a la gente le parece que las cosas sencillas son fáciles e intuitivas para todos, te agradezco haber publicado este manual, estuve por varios días intentando hacerlo, pero casi me doy por vencido…
De nuevo gracias!

3 11 2010
brenda (12:48:36) :

saludos, gracias por el aporte….no tengo idea de website, ni nada de diseño de web jeejejeje, pero con tu ayuda logre editar una de las paginas e insertarle un vinculo desde la imagen :D…..gracias!!!

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