comparte el articulo 

Creación de módulos personalizados en Joomla

Actualizado el 24/01/2011 < > 2 Cometarios

Resumen: Creación de módulos personalizados en Joomla 1.5 y 1.6, empleando texto, imágenes, archivos multimedia y scrips.

Joomla es uno de los CMS más versátiles que existen, principalmente debido a la gran cantidad de extensiones que pueden ser incluidas, haciendo prácticamente cualquier cosa. Pero en muchas oportunidades, nos encontraremos con que las soluciones ya escritas no satisfacen nuestras necesidades. En estos casos, siempre es necesario recurrir a opciones personalizadas, como es el caso de los módulos con HTML personalizado.

Por supuesto que, además de poder establecer un código HTML para módulos, también puede incluirse CSS, que puede estar incorporado a los archivos CSS de la plantilla Joomla de la página, puede ser incluido en el código HTML del módulo o ser ubicado en archivo CSS separado, aunque se debe decir que la solución más sencilla es la primera, ya que solo hay que colocar nuevas líneas de código para los elementos que se creen.

Pero además pueden realizarse algunas otras acciones, como incluir enlaces a artículos, categorías o secciones de la página, como veremos en los ejemplos que iremos introduciendo en este artículo.

Creación de módulos HTML personalizados

El proceso de creación de un módulo personalizado es muy sencillo. Para ello basta con acceder al gestor de módulos del administrador de Joomla, y allí pinchar en “Nuevo”. Luego, se debe seleccionar “Personalizar HTML” en la lista de tipos de módulos que se abre. Esto permite que incluyamos un módulo en cualquier posición predefinida de la plantilla, con textos e imágenes personalizados, para lo cual contaremos con un editor de texto (el mismo que se emplea para la creación de artículos).

En el editor de texto por defecto de Joomla es TinyMCE, pero puede ser deshabilitado (en cuyo caso no se puede crear módulos personalizados, a menos que solo se vaya a introducir texto con formatos predefinidos en el módulo) o pueden emplearse otros editores de texto, que pueden ser instalados como componentes. Con este editor de texto, podremos crear un módulo con textos, imágenes y elementos multimedia como si se tratara de un artículo. Y del mismo modo que puede introducirse código HTML en los artículos utilizando el botón correspondiente del menú del editor, puede hacerse en los módulos personalizados.

Cuando se pincha el botón “HTML” del editor, se abre una ventana en la cual podremos escribir o copiar código HTML. Al igual que si escribiéramos el código en un editor de texto plano, podremos introducir clases e identificadores para darles formato mediante CSS. Y también es posible, gracias a esto, hacer que los elementos tengan efectos en JavaScript.

Además de la posibilidad de introducir el CSS en los propios elementos del módulo utilizando “style”, las propiedades de los elementos pueden introducirse a través de los archivos CSS de la plantilla en uso. Es importante recordar que, en el caso de que se proceda de esta última forma, en caso de que cambiemos la plantilla, los módulos perderán las propiedades CSS, por lo que se deberán introducir en los archivos CSS de la nueva plantilla.

Enlaces en los módulos personalizados

A menos que deseemos que el módulo personalizado sea simplemente un elemento informativo, lo usual es que contenga algún enlace que nos dirija a un artículo, categoría o formulario. Pero introducir un enlace a otra parte de la página en Joomla no es tan simple como cuando se trata de una página estática.

Para introducir una URL interna a la que el navegador nos dirigirá una vez que pinchemos en el enlace, en primer lugar debemos encontrarla. Y para ello, utilizaremos el propio navegador. Disponemos dos formas de copiar la URL  para luego introducirla en el código:

1.       Ir a un menú donde haya un enlace al elemento que queremos enlazar dese el módulo, hacer clic con el botón derecho y pinchar en “Copiar la ruta del enlace”.

2.       Abrir el elemento (artículo, categoría, sección o formulario) que queremos enlazar, y copar la URL desde la barra de navegación.

Pero es posible que lo que queremos enlazar no tenga acceso desde un menú, ya que pretendemos que el enlace al elemento parta en forma exclusiva desde el módulo que estamos creando. En este caso, deberemos crear un menú provisorio en cualquier parte de la página, copiar el enlace y luego deshabilitar o borrar el enlace provisorio, una vez que hayamos copiado el enlace necesario.

Introducción de objetos y scripts en los módulos personalizados

Los objetos, como animaciones Flash, deben ser introducidos del mismo modo que se hace en las páginas estáticas, es decir, introduciendo las etiquetas necesarias para ello. Se debe tener en cuenta que los archivos de la animación deben estar en el directorio de la plantilla, ya que de otra forma se deberá emplear código PHP para crear el enlace a los archivos.

También pueden introducirse todo tipo de scripts. Estos scripts pueden ser enlazados desde la carpeta de la plantilla, o de otro modo, enlazando el script desde el archivo “index.php” de la plantilla, para lo cual debe crearse un enlace similar al siguiente:

<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/script.js"></script>

Ubicación del módulo personalizado

La ubicación del módulo es exactamente igual que cualquier otro módulo, pudiendo optarse por cualquiera de las posiciones predefinidas en la plantilla (left, right, breadcrumbs, footer, user1, etc.). Se debe prestar especial atención a que el módulo tenga un formato tal que pueda ser introducido en la posición deseada sin que el resto de los elementos se vean alterados. Esto quiere decir que se debe crear el módulo con las dimensiones adecuadas para que el resto de los elementos que se encuentren en la posición (por ejemplo, en la columna izquierda) no se descuadren o dejen de verse.

Utilización de HTML 5 y CSS 3

Ambos lenguajes pueden ser empleados para la creación de los módulos personalizados, ya que en definitiva el navegador del usuario es el que se encargará de interpretar el código que se ha introducido. En caso de que el usuario que abra la página no tenga un navegador que soporte los elementos introducidos, sucederá lo mismo que si se tratara de una página estática escrita con estos lenguajes: los elementos no se verán en la forma deseada, y es posible que se produzcan defectos de maquetación, en caso de que no se hayan introducido alternativas para estos casos.

Publicado el 24/01/2011, última actualización 24/01/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. K-95

    el problema de joomla es su seguridad, un amigo hizo un modulo personalizado y como no sabe nada de seguridad no supo filtrarlo, al probarlo puse un xss que dejo un log para capturar cookies y ahi quedo. hicimos los filtros necesarios a mano. Yo prefiero programar yo las webs o por ultimo usar Mambo o WordPress (con la versatilidad de este último paso a ser algo mas que un gestor de blogs) que son mas seguros con su filtrado html

    Lunes, 24 de enero 2011

  2. pepinca

    K-95 me gustaría ver como hizo el módulo tu amigo. En un principio si programas mal da igual joomla que wordpress. Si en joomla no usa tu amigo el Api para acceder a datos no usa filtros de seguridad, eso es igual que wordpress. Joomla es seguro.
    Incluye filtro htmlspecialchar, filtro Xxs

    Martes, 5 de marzo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras