Banners en Joomla!

Tux Merln
Introduccin terica sobre anuncios publicitarios o banners en internet y su utilizacin en el CMS Joomla.

24/11/2010

Este tutorial tiene licencia Creative Commons Atribucin-No Comercial-Sin Derivadas-Argentina y est registrado en SafeCreative.org Sitio de la Licencia: http://creativecommons.org/licenses/by-nc-nd/2.5/ar/ 2010 Miguel Orlando Alberto Tuyar Todos los derechos reservados Se prohbe su distribucin por cualquier medio sin la expresa autorizacin por escrito de su autor a quin pueden contactar en: http://www.safecreative.org/user/0811080107721 o bien al correo electrnico: migueltuyare@gmail.com

Tux Merln Tutorial http://www.joomla-gnu.com

INTRODUCCION
La palabra banner traducida al espaol tiene varios significados segn con qu diccionario se la traduzca. El afamado Collins la define como bandera o pancarta, con una acepcin bandera publicitaria y nos quedaremos con esta ltima ya que eso es lo que significa. Un banner es un anuncio publicitario en forma de bandera o pancarta. Este formato de publicidad on line es muy popular en internet casi desde los albores de la era digital y el objetivo principal es atraer trfico hacia el sitio del anunciante cobrndole un determinado dinero por su inclusin del aviso en nuestra web. Haciendo una comparativa con un medio escrito, sera algo similar a los anuncios de los diarios, en donde nos cobran un monto por poner el nuestro. Otro uso comn de este tipo de anuncios es dar a conocer nuestros propios productos en forma acentuada y en nuestra propia web, lo que sera una auto publicidad. Esto se da, sobre todo, en sitios con mucho contenido en donde se requiere que ciertos productos o contenidos tengan una posicin destacada para que no pasen desapercibidos a los ojos del visitante. Desde hace muchos aos, tambin se utiliza el denominado intercambio de banners mediante el cual nosotros publicamos en nuestra web una imagen proveniente de otro sitio a cambio de que el propietario del otro sitio haga lo mismo con una imagen nuestra, obteniendo beneficios mutuos. Esta modalidad est muy extendida a lo largo y a lo ancho de la WWW y hay muchos sitios dedicados a ella.

Creacin de anuncios
Hay muchas formas de crear y presentar anuncios: Con un simple texto enlazado. Con imgenes fijas en formato JPG o PNG. Con imgenes animadas en formato GIF. Con animaciones hechas en Java, Flash o Shockwave, y ltimamente, cada vez ms extendido, con la creacin de carteles pasantes en Ajax, comnmente denominados sliders (deslizadores).

En todos los casos, el objetivo de la creacin debe apuntar siempre a llamar la atencin del visitante, tiene que destacarse, de lo contrario no sirve. Si tenemos una web supongamos con matices en azul y ponemos anuncios tambin en azul difcilmente se notar. Por eso, es importante tener en cuenta, al momento de disearlo, que el mismo no debe cumplir con las reglas del diseo general del sitio pero tampoco ser una payasada.

Medicin de la eficacia del anuncio y costo

En la prensa escrita los anuncios se cobran por tamao y se miden por tirada de ejemplares y distribucin. Por ejemplo, un aviso de 20cm x 20cm publicado en un diario con una tirada de 100 000 ejemplares que se reparte en 20 ciudades tendr un costo y una audiencia determinada.

Tux Merln Tutorial http://www.joomla-gnu.com

En internet los anuncios se pueden cobrar midiendo cuatro parmetros: por tamao (en pixeles), por impresin, por cantidad de clics y por eficacia (CTR). En el primer caso, el tamao normal o comn en una web es de 468px x 60px, pero el tamao depende del espacio que el diseador deja para estos anuncios por lo que podemos encontrar diversidad de medidas. En cuanto a las impresiones, se refiere a la cantidad de veces que el anuncio es mostrado o visto en el sitio, teniendo relacin directa con el trfico de la web. Cantidad de visitas a la pgina donde est el anuncio es igual a cantidad de impresiones. Los clics se refieren a la cantidad de veces que el anuncio es pinchado o cliqueado, accin que generalmente se traduce como una derivacin del visitante hacia otra web ya que lo anuncios, en la mayora de los casos, son enlaces. Esto se lo denomina con el trmino ingls clicks through, traducido sera clic en. La relacin entre el nmero de impresiones y el nmero de clics se conoce con el nombre de CTR (Click Through Ratio) y mide el nmero de veces que el anuncio es mostrado respecto a la cantidad de clic que se han hecho sobre l. Por ejemplo: supongamos que el aviso ha sido visto 400 veces y que 50 visitantes han cliqueado sobre l, el CTR sera: 50 / 400 = 0,125%, ratio que se considera aceptable. Generalmente, el precio se calcula en base a un prorrateo entre las cuatro mediciones.

Tipo de anuncios
Se dividen en dos grandes grupos: activos y pasivos. Los primeros, son los que enlazan otras pginas; y los segundos, son los que solo presentan una imagen o un texto. En cuanto a los tamaos, si bien no hay un estndar definido, las denominaciones ms comunes que podemos encontrar son: Full Banner o Libre Tradicional: de tamao rectangular de 468px x 60px. Robapginas: de formato cuadrado o rectangular en las siguientes medidas: 200px x200px, 250px x250px, 250px x 350px y el 350px x 250px, siendo este ltimo el ms utilizado. Rascacielos o Banner skyscraper: de formato rectangular pero en posicin vertical y sus medidas suelen ser 120px x 600px y 160px x 600px. Puede ser tambin flotante desplazndose de arriba hacia abajo segn el usuario baje o suba dentro de la web. Botn: en formatos pequeos; de 80px x 31px o menos. Banner layer: estos son aquellos que aparecen sobre los contenidos del sitio cuando ingresa el visitante. Los tamaos son variables. Interstitial: para formatos de gran tamao que aparecen momentneamente antes de la carga de una pgina. Megabanner: es un formato horizontal de gran tamao (normalmente 728px 90px), generalmente se colocan en la cabecera o el pie de la pgina. Corner: aparecen en la esquina superior derecha o izquierda del sitio y al poner el puntero del mouse sobre l se despliegan hacia el interior. Las medidas son: plegado 100px x 100px y desplegado 350px x350px. Reveal: es un formato con apariencia de megabanner que al desplegarse desplaza el contenido de la web hacia abajo.

Tux Merln Tutorial http://www.joomla-gnu.com

Anuncios en Joomla
El CMS trae un sistema de administracin de anuncios incorporado, lo cual facilita enormemente no solo la gestin de los mismos, sino que tambin, nos ayuda a llevar las estadsticas relativas a las impresiones y clics. Este sistema incorpora un componente y un mdulo y se instalan durante la instalacin de Joomla. Con el primero, crearemos y gestionaremos los anuncios; con el segundo, presentaremos los anuncios en la pgina en alguna/s posicin/es de la plantilla destinada/s a tal fin.

El componente anuncios o banners

Se accede desde el men del back-end, Componentes -> Banners. El ttulo del men (banners) puede variar dependiendo de la traduccin que tengamos instalada, pudiendo ser tambin Administracin de Anuncios, Anuncios, Banner, etc. La vista es:

Como podemos ver debajo del ttulo, el gestor tiene 3 secciones: Anuncios (la que se ve en la imagen) que ser donde aparecern los datos de nuestros banners; Clientes donde tendremos los datos de los mismos; Categoras desde donde los podemos clasificar por grupos. Las columnas indican: Nombre, nombre que le dimos al anuncio; Cliente, cliente al que pertenece; Publicado, estado en que se encuentra; Ordenar, nmero de orden ; Fijar, si est fijado o no; Impresiones, cantidad de veces que fue visto; Clics, cantidad de veces que fue cliqueado; Etiquetas, etiqueta/s que lo identifican. Desde aqu podemos calcular el CTR. En esta vista principal tenemos los botones para las tareas comunes: Publicar, Despublicar, Borrar, Copiar, Editar, Nuevo y Preferencias. Los campos que aparecen en la ventana emergente que sale luego de presionar el botn Preferencias son los que vemos en la imagen. Desde aqu podremos optar por hacer un seguimiento de los

Tux Merln Tutorial http://www.joomla-gnu.com

anuncios en cuanto a sus impresiones o clics, y esto depender de nuestros propios objetivos. El campo Prefijo de la etiqueta es una opcin que nos permite agregar a cada palabra de las etiquetas o tags un identificador propio para luego utilizarla con el mdulo como veremos ms adelante. Ahora bien, para crear un banner primero debemos tener, al menos, una categora definida y un cliente por lo que iremos al Gestor de Categoras. La vista es esta:

En la imagen defin 2 a modo de ejemplo pero la creacin es arbitraria pudiendo poner los ttulos que ms nos convengan. Para crear una categora cliqueamos en Nuevo (icono verde en la parte superior derecha) y veremos un formulario como este:

Aqu podemos titular la categora, publicarla o no, darle un nivel de acceso y un orden en la vista de categoras. El orden tambin se puede dar desde la vista principal de esta sec-

Tux Merln Tutorial http://www.joomla-gnu.com

cin, asignando a cada casillero un nmero correlativo segn el orden que queramos y luego presionando el icono diskette que hay en la cabecera de la columna. Los campos Imagen, con un men desplegable, y Posicin de la Imagen se utilizan cuando apuntamos desde un tem de men a una Vista de Categora. En estos casos se ver la imagen seleccionada aqu, en la posicin escogida en el campo Posicin de la Imagen y la Descripcin que escribamos en el editor. Sin embargo, estos dos no se pueden utilizar con los banners ya que el gestor de mens carece de vista de categoras para ellos, y solo est presente porque que utiliza la misma clase PHP que para las categoras de contenidos de Joomla. Pasemos ahora al Gestor de Clientes de anuncios que se ve as:

Las columnas indican Nombre del Cliente, en Contacto el nombre de la persona de contacto, #Banners nos muestra la cantidad de banners asociados a este cliente, ID es el nmero de ndice en la tabla correspondiente de la base de datos. Del mismo modo que en el caso anterior, cliqueamos en Nuevo y veremos este formulario:

Como ven, son pocos los datos a completar vinculados a nuestro cliente pero sin embargo contamos con el campo Informacin extra en donde podemos poner texto arbitrario y ampliarlos. Esto es solo visible para los administradores. Una vez que tengamos definidas las categoras y los clientes pasaremos a crear los anuncios propiamente dichos. Hay que aclarar que antes de comenzar con la creacin de anuncios, y si vamos a colocar anuncios del tipo imagen, debemos tener primeramente todas estas imgenes subidas al servidor en la carpeta razJoomla/images/banners.

Tux Merln Tutorial http://www.joomla-gnu.com

Tambin debern tener en cuenta que el tamao de estas imgenes se corresponda con el tamao creado en la plantilla y destinado a tal fin, caso contrario se puede descuadrar nuestra web o quedar estticamente mal. Para crear un nuevo anuncio, desde el Gestor de Anuncios y al igual que en los pasos anteriores, cliquearemos en Nuevo, tras lo cual veremos un formulario como este:

Nombre: es el nombre con el que identificaremos el anuncio, es para uso del administrador. Alias: es un nombre alternativo para las URL amigables, si no lo completamos, al guardar, se crear uno basado en el nombre. Igualmente, se incluye por compatibilidad, no tiene uso. Mostrar anuncio: es la opcin para habilitarlo o deshabilitarlo. Se puede tambin hacer esto desde la vista de la Gestor de Banners, cliqueando en el icono que aparece en la columna Publicado. Fijar: Al Fijar un anuncio, este tomar prioridad sobre el resto de la categora. Por ejemplo, si tenemos dos banners en la categora Comidas rpidas y uno est fijo, el que no lo est no ser mostrado si desde el mdulo escogemos la opcin Destacado, Aleatorio. Ordenar: es el nmero de ordenamiento respecto a los dems. Cada banner tendr un nmero diferente que le dar el orden de aparicin en el mdulo. Al igual que las categoras, podemos hacer el ordenamiento desde la vista de Gestor de Banners. Categora: seleccionaremos a qu categora pertenecer.

Tux Merln Tutorial http://www.joomla-gnu.com

Nombre del Cliente: seleccionaremos el cliente al que pertenece el anuncio. Impresiones compradas: Esto es til cuando comercializamos publicidades. Podemos vender una determinada cantidad de impresiones o vistas del anuncio, tras lo cual no se ver ms, hasta tanto no restablezcamos los clics. Si no queremos utilizar esto, simplemente cliquearemos en la casilla de al lado Ilimitado. Haz clic URL: es la direccin URL hacia donde apuntar el banner, su enlace, y no se usa para el caso de banners pasivos. Cuando se usa, constituye el click through mencionado anteriormente. Clics: muestra la cantidad de clics que ha recibido el anuncio. Con el botn de al lado podemos resetearlos, ponerlos a cero. Cdigo de anuncio personalizado: este campo se utiliza cuando son anuncios del tipo texto. El cuadro que vemos soporta algunas etiquetas HTML y variables de suplantacin. Por ejemplo: supongamos que queremos estilizar un enlace de texto para darle otra apariencia, podramos poner en el cuadro este cdigo:
<div class=misbanners> <a href={CLICKURL} target=_blank title={NAME]>{NAME}</a><br /> <b>Tux Merln en la Web</b><br /> Extensiones para Joomla v1.5.0 nativas y con licencia GNU. </div>

Aqu vemos que coloqu todo dentro de un DIV con la clase misbanners; podemos definir esa clase dentro del CSS de la plantilla para darle un estilo especial. La variable de suplantacin {CLICKURL} ser reemplazada con el contenido del campo Haz click URL y la otra variable {NAME} ser reemplazada con el contenido del campo Nombre. Descripcin notas: es simplemente un cuadro de texto para uso del administrador. Podemos poner notas aclaratorias u observaciones respecto del anuncio. Selector de imagen del anuncio: esta lista de seleccin nos mostrar todas las imgenes que hay subidas en la carpeta razJoomla/images/banners (comentado anteriormente) y desde aqu seleccionaremos aquella que ser el banner propiamente dicho.
IMPORTANTE No podemos utilizar una imagen y adems Cdigo de anuncio personalizado. O es uno o el otro, no los dos. En el caso de que hayamos completado el campo Cdigo de anuncio personalizado solo se mostrar esto, la imagen no ser mostrada.

Ancho: es un campo para ajustar la imagen seleccionada. Altura: dem anterior. Imagen del anuncio: aqu se mostrar la imagen una vez que la seleccionemos de la lista. Etiquetas tags: aqu colocaremos etiquetas que identificaran al anuncio. Contrariamente a lo que todo el mundo piensa, no se trata de etiquetas para el SEO (Search Engine Optimization, Optimizacin para motores de bsqeuda). Este campo funciona en conjuncin con el campo Prefijo de la etiqueta que se encuentra en Preferencias y que nombr ms arriba. Veremos a continuacin como se usa el mdulo y adems esto ltimo.

Tux Merln Tutorial http://www.joomla-gnu.com

Modulo Banner o mod_banners

El mdulo se instala con el componente durante la instalacin de Joomla por lo que no hay que hacer ningn proceso, solo utilizarlo. Veamos su vista de configuracin desde el backend. Accedemos primero al Gestor de Mdulos yendo al men de la administracin Extensiones -> Gestor de Mdulos, que se ve as:

Al igual que en los casos anteriores, cliqueamos en Nuevo y en la pgina que nos aparece seleccionamos Banners:

Aqu, marcaremos Banner y luego cliquearemos en el botn Siguiente, lo cual nos pondr el mdulo en vista de edicin y veremos esto:

Tux Merln Tutorial http://www.joomla-gnu.com

Veamos cuadro por cuadro.

Detalle
Aqu pondremos el Ttulo que tendr el mdulo. Como todos los mdulos Joomla el uso del ttulo es obligatorio pero para el caso de los banners, a veces no queda estticamente bien mostrarlo, por lo que marcaremos la opcin de abajo Mostrar ttulo segn sea el caso. El campo siguiente es para Habilitarlo o Deshabilitarlo. Debajo tenemos el campo Posicin con una lista desplegable. Aqu debemos elegir la posicin de la plantilla destinada a mostrar el anuncio. El Orden se refiere al orden en que aparecer en la pgina. Es decir, supongamos que tenemos definida una posicin right y que all colocamos varios mdulos, incluyendo el de banners; pues este campo sirve para darle un ordenamiento; cul mdulo se mostrar primero y cuales le seguirn hacia abajo. Luego le siguen el Nivel de acceso; qu grupo ver los banners, es decir Pblico (salvo en web cerradas).

Asignacin de Men
Esa opcin nos permite asignar en qu pgina se ver el banner.

Tux Merln Tutorial http://www.joomla-gnu.com

10

Supongamos que tenemos varias secciones en el sitio apuntadas desde los mens y una de ellas es Tiendas. Supongamos tambin que queremos que los anuncios relativos a tiendas solo se vean cuando el usuario acceda a esta categora o seccin. En este caso, cliquearemos primero en el crculo de seleccin Ninguno para desmarcar todos los tems. Luego cliquearemos en Seleccionar elemento(s) de la lista y pincharemos aquel tem que apunta a la seccin o categora deseada. Si son varios los tems de men en donde queramos que aparezca, mantendremos presionada la tecla de CTRL (control) e iremos pinchando en ellos (seleccin mltiple). Esta Asignacin de Men nos da la posibilidad de colocar varios mdulos con diferentes banners segn la categora o seccin mostrada. Pasemos a los Parmetros. La primera opcin que tenemos es Objetivo y se refiere a cmo actuar la vista del enlace del anuncio, pudiendo ser: Misma ventana con barra de navegacin, Nueva ventana con barra de navegacin o Nueva ventana sin barra de navegacin. La siguiente opcin es Contador y se refiere a la cantidad de anuncios que sern mostrados en el mdulo, por defecto es 5 pero podemos poner la cantidad que queramos dependiendo de la cantidad de banners segn la categora escogida. Le sigue Cliente del banner y Categora debiendo seleccionar ambos de la lista desplegable que se corresponde con los clientes y categoras dados de alta y publicados en el componente. Buscar por etiquetas no se refiere a la bsqueda de banners por medio del buscador de Joomla, sino que es una funcin especial que trae el mdulo. Hice una referencia ms arriba cuando habl de las Etiquetas tags del anuncio. Si est habilitado este campo, lo que hace es mostrar los anuncios dependiendo de la coincidencia o no entre las etiquetas puestas en ellos y las palabras claves o metakeywords, del documento o pgina que se est viendo. Es decir, si tenemos un banner con la etiqueta tienda y estamos viendo un artculo que contiene una palabra clave o metakeywords tambin tienda, el banner ser mostrado, en caso contrario no. Como vemos se trata de una potente caracterstica que nos permite otra funcionalidad y otra flexibilidad, adems de la de Asignacin de men. Aleatorio es un campo que nos permite seleccionar cmo se vern los anuncios, en qu orden. Tengan en cuenta lo que dije ms arriba sobre fijar banners. Los campos Texto para el encabezado y Texto para el pie de pgina nos dan la posibilidad de agregar cualquier texto arbitrario en el mdulo antes y despus de los anuncios. Sufijo de la clase de mdulo es una opcin para estilizar el mdulo segn los sufijos definidos en la plantilla. En Parmetros avanzados tenemos la posibilidad de usar o no el cach y/o determinar su duracin. Finalmente podemos decir que el mdulo mod_banners es bsico, no cuenta con ningn script ajax ni nada similar que anime el pasaje de las imgenes o de los textos en for-

Tux Merln Tutorial http://www.joomla-gnu.com

11

ma dinmica. Lo nico que hace es mostrar ante cada cambio de pgina un anuncio diferente, solo eso. Si queremos darle movimiento debemos recurrir a extensiones de terceros, por eso les mencionar a continuacin algunas aclaraciones y recomendaciones, luego investiguen y prueben por su cuenta.

MODULOS PARA BANNERS

Como siempre, les recomiendo solo instalar extensiones que estn en JED (Joomla Extension Directory) de este modo nos aseguramos que al menos tengan un testeo bsico, ya que si no pasan determinadas pruebas, no son aprobadas. Muchas veces encontramos extensiones en sitios de terceros y que no estn en JED, inclusive hay muchas del tipo nulled o crackeadas. Hay que tener cuidado con estas dado que desconocemos la intencin o pericia del crackeador y muchas veces dejan agujeros de seguridad en nuestro sitio. Por otro lado, extensiones para banners hay muchas, tanto mdulos como componentes. Algunas GNU y de descarga gratuita, otras de pago. Hay mdulos que funcionan integrados con el componente de Joomla, otros son independientes. Tenemos asimismo mdulos ad hoc que no dependen de un componente, claro que en estos casos no tendremos ni el conteo de clics ni nada que sea administrativo. Por todo esto, el abanico de posibilidades es muy amplio y depender de nuestras necesidades. Hay otra cuestin respecto a la animacin que presentan y que tambin determinar nuestra eleccin o no. Muchas estn basadas en jQuery o MooTools y ocasionan conflictos con otras extensiones y otras estn realizadas con flash y son pesadas. En fin, debern probar hasta dar con la que les sirva, pero no obstante ello me animar a recomendar dos mdulos y un componente que incluye adems un mdulo y un plugin. El primer mdulo, aunque est en estado beta, es muy bueno y funciona muy bien integrado con el componente banners de Joomla. Me refiero a DS Banner Slider de la web Designer Sandbox (http://www.designersandbox.com/joomla/joomla-ds-banner-slider-free-banner-moduleby-ds/). Lo pueden ver funcionando en mi web: http://www.joomla-gnu.com, es el que aparece en la cabecera del sitio. Este mdulo est basado en ajax pero tiene una programacin muy prolija que evita conflictos con otros scripts, adems cuenta con un sinfn de opciones. El segundo es un mdulo que no se integra con el componente de banners, sin embargo nos da otras posibilidades. Se llama Mini Ad Spot y nos permite mostrar imgenes tipo miniaturas (hasta 20). Dichas imgenes pueden ser enlazables o no. La web para descarga es esta: http://joomla-layouts.com/download/viewcategory/6 Finalmente, tenemos la extensin RS Banners cuyos autores son los mismos del RS Monials -del que publiqu un artculo referido a l y le hice la traduccin al espaol-, y muchas otras extensiones. La web es esta: http://www.rswebsols.com/downloads/rsbanners Espero que les haya sido de utilidad este tutorial y cualquier inquietud pueden dejarla en el foro.

Tux Merln Tutorial http://www.joomla-gnu.com

12