Banners en Joomla!

2 4 / 1 1 / 2 0 1 0

Tux Merlín

Introducción teórica sobre anuncios publicitarios o

banners en internet y su utilización en el CMS Joomla.

Tux Merlín Tutorial – http://www.joomla-gnu.com 1

Este tutorial tiene licencia Creative Commons

Atribución-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 prohíbe su distribución por cualquier medio sin la expresa autorización por escrito de su

autor a quién pueden contactar en:

http://www.safecreative.org/user/0811080107721

o bien al correo electrónico: migueltuyare@gmail.com

Tux Merlín Tutorial – http://www.joomla-gnu.com 2

INTRODUCCIO N

La palabra “banner” traducida al español tiene varios significados según con qué dic-cionario se la traduzca. El afamado Collins la define como “bandera” o “pancarta”, con una acepción “bandera publicitaria” y nos quedaremos con esta última ya que eso es lo que signifi-ca.

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 tráfico hacia el sitio del anunciante cobrándole un determinado dinero por su inclusión del aviso en nuestra web. Haciendo una comparativa con un medio escrito, sería algo similar a los anuncios de los diarios, en donde nos cobran un monto por poner el nuestro.

Otro uso común de este tipo de anuncios es dar a conocer nuestros propios productos en forma acentuada y en nuestra propia web, lo que sería una “auto publicidad”. Esto se da, sobre todo, en sitios con mucho contenido en donde se requiere que ciertos productos o con-tenidos tengan una posición destacada para que no pasen desapercibidos a los ojos del visitan-te.

Desde hace muchos años, también 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.

Creación de anuncios Hay muchas formas de crear y presentar anuncios:

Con un simple texto enlazado.

Con imágenes fijas en formato JPG o PNG.

Con imágenes animadas en formato GIF.

Con animaciones hechas en Java, Flash o Shockwave,

y últimamente, cada vez más extendido, con la creación de carteles pasantes en Ajax, comúnmente denominados “sliders” (deslizadores).

En todos los casos, el objetivo de la creación debe apuntar siempre a llamar la aten-ción del visitante, tiene que destacarse, de lo contrario no sirve. Si tenemos una web supon-gamos con matices en azul y ponemos anuncios también en azul difícilmente se notará. Por eso, es importante tener en cuenta, al momento de diseñarlo, que el mismo no debe “cumplir” con las reglas del diseño general del sitio pero tampoco ser una payasada.

Medición de la eficacia del anuncio y costo En la prensa escrita los anuncios se cobran por tamaño y se miden por tirada de ejem-plares y distribución. 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 Merlín Tutorial – http://www.joomla-gnu.com 3

En internet los anuncios se pueden cobrar midiendo cuatro parámetros: por tamaño (en pixeles), por impresión, por cantidad de “clics” y por eficacia (CTR).

En el primer caso, el tamaño normal o común en una web es de 468px x 60px, pero el tamaño depende del espacio que el diseñador 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 mos-trado o visto en el sitio, teniendo relación directa con el tráfico de la web. Cantidad de visitas a la página 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 “cliquea-do”, acción que generalmente se traduce como una derivación del visitante hacia otra web ya que lo anuncios, en la mayoría de los casos, son enlaces. Esto se lo denomina con el término inglés “clicks through”, traducido sería “clic en”.

La relación entre el número de impresiones y el número de clics se conoce con el nom-bre de CTR (“Click Through Ratio”) y mide el número 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 sería: 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 “enla-zan” otras páginas; y los segundos, son los que solo presentan una imagen o un texto.

En cuanto a los tamaños, si bien no hay un estándar definido, las denominaciones más comunes que podemos encontrar son:

Full Banner o Libre Tradicional: de tamaño rectangular de 468px x 60px.

Robapáginas: 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 más utili-zado.

Rascacielos o Banner skyscraper: de formato rectangular pero en posición vertical y sus medidas suelen ser 120px x 600px y 160px x 600px. Puede ser también flotante despla-zándose de arriba hacia abajo según el usuario baje o suba dentro de la web.

Botón: en formatos pequeños; de 80px x 31px o menos.

Banner layer: estos son aquellos que aparecen sobre los contenidos del sitio cuando in-gresa el visitante. Los tamaños son variables.

Interstitial: para formatos de gran tamaño que aparecen momentáneamente antes de la carga de una página.

Megabanner: es un formato horizontal de gran tamaño (normalmente 728px × 90px), generalmente se colocan en la cabecera o el pie de la página.

Corner: aparecen en la esquina superior derecha o izquierda del sitio y al poner el punte-ro 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 Merlín Tutorial – http://www.joomla-gnu.com 4

Anuncios en Joomla

El CMS trae un sistema de administración de anuncios incorporado, lo cual facilita enormemente no solo la gestión de los mismos, sino que también, nos ayuda a llevar las esta-dísticas relativas a las impresiones y clics.

Este sistema incorpora un componente y un módulo y se instalan durante la instalación de Joomla. Con el primero, crearemos y gestionaremos los anuncios; con el segundo, presenta-remos los anuncios en la página en alguna/s posición/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 título del menú (banners) puede variar dependiendo de la traducción que tengamos instalada, pudiendo ser también “Administración de Anuncios”, “Anuncios”, “Banner”, etc.

La vista es:

Como podemos ver debajo del título, el gestor tiene 3 secciones: “Anuncios” (la que se ve en la imagen) que será donde aparecerán los datos de nuestros banners; “Clientes” donde tendremos los datos de los mismos; “Categorías” 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”, número de orden ; “Fi-jar”, 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 calcu-lar el CTR.

En esta vista principal tenemos los botones para las tareas comunes: Publicar, Despu-blicar, Borrar, Copiar, Editar, Nuevo y Preferencias.

Los campos que aparecen en la ventana emergente que sale luego de presionar el botón “Prefe-rencias” son los que vemos en la imagen.

Desde aquí podremos op-tar por hacer un seguimiento de los

Tux Merlín Tutorial – http://www.joomla-gnu.com 5

anuncios en cuanto a sus impresiones o clics, y esto dependerá de nuestros propios objetivos.

El campo “Prefijo de la etiqueta” es una opción que nos permite agregar a cada pala-bra de las etiquetas o “tags” un identificador propio para luego utilizarla con el módulo como veremos más adelante.

Ahora bien, para crear un banner primero debemos tener, al menos, una categoría definida y un cliente por lo que iremos al “Gestor de Categorías”.

La vista es esta:

En la imagen definí 2 a modo de ejemplo pero la creación es arbitraria pudiendo poner los títulos que más nos convengan. Para crear una categoría cliqueamos en “Nuevo” (icono verde en la parte superior derecha) y veremos un formulario como este:

Aquí podemos titular la categoría, publicarla o no, darle un nivel de acceso y un orden en la vista de categorías. El orden también se puede dar desde la vista principal de esta sec-

Tux Merlín Tutorial – http://www.joomla-gnu.com 6

ción, asignando a cada casillero un número correlativo según 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 “Posición de la Imagen” se utilizan cuando “apuntamos” desde un ítem de menú a una “Vista de Categoría”. En estos casos se verá la imagen seleccionada aquí, en la posición escogida en el campo “Posición de la Ima-gen” y la “Descripción” que escribamos en el editor. Sin embargo, estos dos no se pueden uti-lizar con los banners ya que el gestor de menús carece de vista de categorías para ellos, y solo está presente porque que utiliza la misma clase PHP que para las categorías 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

número 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 for-

mulario:

Como ven, son pocos los datos a completar vinculados a nuestro cliente pero sin em-bargo contamos con el campo “Información extra” en donde podemos poner texto arbitrario y ampliarlos. Esto es solo visible para los administradores.

Una vez que tengamos definidas las categorías y los clientes pasaremos a crear los anuncios propiamente dichos.

Hay que aclarar que antes de comenzar con la creación de anuncios, y si vamos a colo-car anuncios del tipo imagen, debemos tener primeramente todas estas imágenes subidas al servidor en la carpeta “raízJoomla/images/banners”.

Tux Merlín Tutorial – http://www.joomla-gnu.com 7

También deberán tener en cuenta que el tamaño de estas imágenes se corresponda con el tamaño creado en la plantilla y destinado a tal fin, caso contrario se puede “descuadrar” nuestra web o quedar estéticamente 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 opción para habilitarlo o deshabilitarlo. Se puede también 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 categoría. Por ejemplo, si tenemos dos banners en la categoría “Comidas rápidas” y uno está fijo, el que no lo está no será mostrado si desde el módulo escogemos la opción “Destacado, Aleatorio”.

Ordenar: es el número de ordenamiento respecto a los demás. Cada banner tendrá un número diferente que le dará el orden de aparición en el módulo. Al igual que las categorías, podemos hacer el ordenamiento desde la vista de “Gestor de Banners”.

Categoría: seleccionaremos a qué categoría pertenecerá.

Tux Merlín Tutorial – http://www.joomla-gnu.com 8

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á más, hasta tanto no restablezcamos los clics. Si no queremos utilizar esto, simplemente cliqueare-mos en la casilla de al lado “Ilimitado”.

Haz clic URL: es la dirección 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 ante-riormente.

Clics: muestra la cantidad de clics que ha recibido el anuncio. Con el botón de al lado podemos resetearlos, ponerlos a cero.

Código de anuncio personalizado: este campo se utiliza cuando son anuncios del tipo texto. El cuadro que vemos soporta algunas etiquetas HTML y variables de suplantación. Por ejemplo: supongamos que queremos estilizar un enlace de texto para darle otra apariencia, podríamos poner en el cuadro este código:

<div class=”misbanners”>

<a href=”{CLICKURL}” target=”_blank” title=”{NAME]”>{NAME}</a><br />

<b>Tux Merlín 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 suplantación {CLICKURL} será reemplazada con el contenido del campo “Haz click URL” y la otra variable {NAME} será reemplazada con el contenido del campo “Nombre”. Descripción 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 selección nos mostrará todas las imágenes que hay subidas en la carpeta “raízJoomla/images/banners” (comentado anteriormente) y desde aquí seleccionaremos aquella que será el banner propiamente dicho.

IMPORTANTE No podemos utilizar una imagen y además “Código de anuncio personalizado”. O es uno o el otro, no los dos. En el caso de que hayamos completado el campo “Código 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, Optimización para motores de búsqeuda). Este campo funciona en con-junción con el campo “Prefijo de la etiqueta” que se encuentra en “Preferencias” y que nom-bré más arriba. Veremos a continuación como se usa el módulo y además esto último.

Tux Merlín Tutorial – http://www.joomla-gnu.com 9

Mo dulo Banner o mod_banners

El módulo se instala con el componente durante la instalación de Joomla por lo que no hay que hacer ningún proceso, solo utilizarlo. Veamos su vista de configuración desde el back-end.

Accedemos primero al “Gestor de Módulos” yendo al menú de la administración “Ex-tensiones -> Gestor de Módulos”, que se ve así:

Al igual que en los casos anteriores, cliqueamos en “Nuevo” y en la página que nos aparece seleccionamos “Banners”:

Aquí, marcaremos “Banner” y luego cliquearemos en el botón “Siguiente”, lo cual nos pondrá el módulo en vista de edición y veremos esto:

Tux Merlín Tutorial – http://www.joomla-gnu.com 10

Veamos cuadro por cuadro.

Detalle Aquí pondremos el “Título” que tendrá el módulo. Como todos los módulos Joomla el

uso del título es obligatorio pero para el caso de los banners, a veces no queda estéticamente bien mostrarlo, por lo que marcaremos la opción de abajo “Mostrar título” según sea el caso.

El campo siguiente es para “Habilitarlo” o “Deshabilitarlo”.

Debajo tenemos el campo “Posición” con una lista desplegable. Aquí debemos elegir la posición de la plantilla destinada a mostrar el anuncio.

El “Orden” se refiere al orden en que aparecerá en la página. Es decir, supongamos que tenemos definida una posición “right” y que allí colocamos varios módulos, incluyendo el de banners; pues este campo sirve para darle un ordenamiento; cuál módulo se mostrará pri-mero y cuales le seguirán hacia abajo.

Luego le siguen el “Nivel de acceso”; qué grupo verá los banners, es decir “Público” (salvo en web cerradas).

Asignación de Menú Esa opción nos permite asignar en qué página se verá el banner.

Tux Merlín Tutorial – http://www.joomla-gnu.com 11

Supongamos que tenemos varias secciones en el sitio apuntadas desde los menús y una de ellas es “Tiendas”. Supongamos también que queremos que los anuncios relativos a tiendas solo se vean cuando el usuario acceda a esta categoría o sección.

En este caso, cliquearemos primero en el círculo de selección “Ninguno” para “des-marcar” todos los ítems. Luego cliquearemos en “Seleccionar elemento(s) de la lista” y pin-charemos aquel ítem que apunta a la sección o categoría deseada.

Si son varios los ítems de menú en donde queramos que aparezca, mantendremos pre-sionada la tecla de CTRL (control) e iremos pinchando en ellos (selección múltiple).

Esta “Asignación de Menú” nos da la posibilidad de colocar varios módulos con dife-rentes banners según la categoría o sección mostrada.

Pasemos a los “Parámetros”.

La primera opción que tenemos es “Objetivo” y se refiere a cómo actuará la vista del enlace del anuncio, pudiendo ser: “Misma ventana con barra de navegación”, “Nueva ventana con barra de navegación” o “Nueva ventana sin barra de navegación”.

La siguiente opción es “Contador” y se refiere a la cantidad de anuncios que serán mostrados en el módulo, por defecto es 5 pero podemos poner la cantidad que queramos dependiendo de la cantidad de banners según la categoría escogida.

Le sigue “Cliente del banner” y “Categoría” debiendo seleccionar ambos de la lista desplegable que se corresponde con los clientes y categorías dados de alta y publicados en el componente.

“Buscar por etiquetas” no se refiere a la búsqueda de banners por medio del buscador de Joomla, sino que es una función especial que trae el módulo. Hice una referencia más 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 página que se está viendo.

Es decir, si tenemos un banner con la etiqueta “tienda” y estamos viendo un artículo que contiene una palabra clave o metakeywords también “tienda”, el banner será mostrado, en caso contrario no. Como vemos se trata de una potente característica que nos permite otra funcionalidad y otra flexibilidad, además de la de “Asignación de menú”.

“Aleatorio” es un campo que nos permite seleccionar cómo se verán los anuncios, en qué orden. Tengan en cuenta lo que dije más arriba sobre “fijar” banners.

Los campos “Texto para el encabezado” y “Texto para el pie de página” nos dan la po-sibilidad de agregar cualquier texto arbitrario en el módulo antes y después de los anuncios.

“Sufijo de la clase de módulo” es una opción para estilizar el módulo según los sufijos definidos en la plantilla.

En “Parámetros avanzados” tenemos la posibilidad de usar o no el caché y/o determi-nar su duración.

Finalmente podemos decir que el módulo mod_banners es básico, no cuenta con nin-gún script ajax ni nada similar que “anime” el “pasaje” de las imágenes o de los textos en for-

Tux Merlín Tutorial – http://www.joomla-gnu.com 12

ma dinámica. Lo único que hace es mostrar ante cada cambio de página un anuncio diferente, solo eso.

Si queremos darle movimiento debemos recurrir a extensiones de terceros, por eso les mencionaré a continuación algunas aclaraciones y recomendaciones, luego investiguen y prueben por su cuenta.

MO DULOS PARA BANNERS

Como siempre, les recomiendo solo instalar extensiones que estén en JED (Joomla Extension Directory) de este modo nos aseguramos que al menos tengan un testeo básico, ya que si no pasan determinadas pruebas, no son aprobadas.

Muchas veces encontramos extensiones en sitios de terceros y que no están en JED, inclusive hay muchas del tipo “nulled” o crackeadas. Hay que tener cuidado con estas dado que desconocemos la “intención” o “pericia” del crackeador y muchas veces dejan agujeros de seguridad en nuestro sitio.

Por otro lado, extensiones para banners hay muchas, tanto módulos como componen-tes. Algunas GNU y de descarga gratuita, otras de pago. Hay módulos que funcionan integra-dos con el componente de Joomla, otros son independientes. Tenemos asimismo módulos “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 cuestión respecto a la animación que presentan y que también determinará nuestra elección o no. Muchas están basadas en jQuery o MooTools y ocasionan conflictos con otras extensiones y otras están realizadas con flash y son “pesadas”.

En fin, deberán probar hasta dar con la que les sirva, pero no obstante ello me animaré a recomendar dos módulos y un componente que incluye además un módulo y un plugin.

El primer módulo, 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-module-

by-ds/). Lo pueden ver funcionando en mi web: http://www.joomla-gnu.com, es el que aparece en la cabecera del sitio. Este módulo está basado en ajax pero tiene una programación muy prolija que evita conflictos con otros scripts, además cuenta con un sinfín de opciones.

El segundo es un módulo que no se integra con el componente de banners, sin embar-go nos da otras posibilidades. Se llama “Mini Ad Spot” y nos permite mostrar imágenes tipo “miniaturas” (hasta 20). Dichas imágenes pueden ser enlazables o no. La web para descarga es esta: http://joomla-layouts.com/download/viewcategory/6

Finalmente, tenemos la extensión “RS Banners” cuyos autores son los mismos del “RS Monials” -del que publiqué un artículo referido a él y le hice la traducción al español-, y mu-chas 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.