Banners en Joomla! - Tux Merlin en la Web - GNU

Banners en
Joomla!
Tux Merlín
Introducción teórica sobre anuncios publicitarios o
banners en internet y su utilización en el CMS Joomla.
24/11/2010
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: [email protected]
Tux Merlín Tutorial – http://www.joomla-gnu.com
1
INTRODUCCION
La palabra “banner” traducida al español tiene varios significados según con qué diccionario 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 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 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 contenidos tengan una posición destacada para que no pasen desapercibidos a los ojos del visitante.
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 atención del visitante, tiene que destacarse, de lo contrario no sirve. Si tenemos una web supongamos 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 ejemplares 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
2
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 mostrado 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 “cliqueado”, 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 nombre 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 “enlazan” 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 utilizado.
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 desplazá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 ingresa 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 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 Merlín Tutorial – http://www.joomla-gnu.com
3
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 estadí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, presentaremos 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 ; “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 botón “Preferencias” son los que vemos en la
imagen.
Desde aquí podremos optar por hacer un seguimiento de los
Tux Merlín Tutorial – http://www.joomla-gnu.com
4
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 palabra 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
5
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 Imagen” y la “Descripción” que escribamos en el editor. Sin embargo, estos dos no se pueden utilizar 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 formulario:
Como ven, son pocos los datos a completar vinculados a nuestro cliente pero sin embargo 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 colocar 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
6
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
7
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 cliquearemos 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 anteriormente.
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 conjunción con el campo “Prefijo de la etiqueta” que se encuentra en “Preferencias” y que nombré 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
8
Modulo 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 backend.
Accedemos primero al “Gestor de Módulos” yendo al menú de la administración “Extensiones -> 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
9
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á primero 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
10
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 “desmarcar” todos los ítems. Luego cliquearemos en “Seleccionar elemento(s) de la lista” y pincharemos 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 presionada 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 diferentes 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 posibilidad 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 determinar su duración.
Finalmente podemos decir que el módulo mod_banners es básico, no cuenta con ningú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
11
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.
MODULOS 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 componentes. Algunas GNU y de descarga gratuita, otras de pago. Hay módulos que funcionan integrados 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-moduleby-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 embargo 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 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 Merlín Tutorial – http://www.joomla-gnu.com
12