Banners javascript que rotan cada x tiempo

Un amigo me pidió que le echara un mano para implementar un espacio de publicidad de banners en su web, pero debía tener la característica de que éstos rotaran automáticamente cada cierto tiempo si el usuario no cambia de página en el sitio. Aprovecho la oportunidad para compartir con todos este código fuente, porque es algo ingenioso y nos puede ser útil en nuestra web.

El rotador de banners está desarrollado con javascript, por lo que se puede utilizar en cualquier página web, sin importar el lenguaje con que esté desarrollada. Se compone de un archivo javascript que contiene la lógica del programa y una llamada a dicho archivo que debe especificarse en la página donde vamos a colocar los banners.

Al final de el artículo están disponible para su descarga los dos archivos de ejemplo que describiremos a continuación. También es posible verlos online pinchando en el vínculo correspondiente, más abajo.

En la página donde mostraremos los banners; en nuestro caso publicidad.html, sólo es necesario insertar el siguiente código en el lugar exacto de la página donde queremos mostrar los banners:

<script src="publicidad.js" language="javascript"></script>

Esto posibilitará que se ejecute el archivo javascript que describiremos a continuación.

Inicialmente declaramos las variables generales que vamos a utilizar en nuestro script. En cantidad_banners debemos especificar la cantidad de banners que queremos mostrar, para que el compilador cree los arreglos que declaramos luego: imagenes, alts y urls con la cantidad de elementos que hemos especificado en esta variable.

var cantidad_banners = 3;
var imagenes = new Array(cantidad_banners);
var alts = new Array(cantidad_banners);
var urls = new Array(cantidad_banners);

En el arreglo imagenes almacenamos las URLs de los archivos de imagen de nuestros banners. En el arreglo alts se guarda el texto de la descripción de las imágenes que mostramos, que también se muestra al posicionar el mouse sobre la imagen o cuando por algún motivo no se puede cargar la imagen. Y en el arreglo urls están las direcciones de las páginas que se abrirá al hacer clic sobre el banner.

Una vez que hemos creado los arreglos donde almacenamos la información es necesario llenarlos con los datos de cada uno de los banners que mostraremos. Debemos completarlos utilizando la siguiente estructura, teniendo en cuenta que se debe poner el número del banner entre corchetes y al lado de cada uno de los elementos que vamos a llenar. Es importante comenzar siempre por el número cero, para el primer banner.

imagenes[0] = "/rounders4/bg_hdr_bot.jpg";
alts[0] = "Programación Web y Tecnologías Informáticas";

urls[0] = "http://zenkius.blogspot.com";

La función creardiv() será la que inicie el programa y para ello se invoca al final del script. Esta función crea una etiqueta HTML de tipo DIV con el nombre div_publicidad que nos permitirá identificarla para luego hacer referencia a ella. Una vez creada la etiqueta se hace un llamado a la función mostrar_banner() que se encargará de la otra parte del funcionamiento del programa.

function creardiv()
{
document.writeln("<div id=\"div_publicidad\"></div>");
mostrar_banner();

}

La función siguiente se encarga de seleccionar aleatoriamente un banner de la lista que llenamos al inicio y luego construir el código HTML correspondiente para mostrarlo dentro de la etiqueta DIV que se creó en la función anterior. Finalmente espera 5000 milisegundos (5 segundos) y el propio método mostrar_banner() se vuelve a ejecutar una y otra vez, en un ciclo que terminará cuando el usuario cierre el navegador.

function mostrar_banner()
{
var fecha = new Date();
var id_banner = fecha.getSeconds() % cantidad_banners;
document.getElementById("div_publicidad").innerHTML = "<a target=\"_blank\" href=\"" + urls[id_banner] + "\"><img src=\"" + imagenes[id_banner] + "\" border=0 alt=\"" + alts[id_banner] + "\"/></a>";
setTimeout("mostrar_banner()",5000);
}

Archivos relacionados:
publicidad.js Descargar - Ver código online
publicidad.htm Descargar - Ver código online

Opciones para crear páginas web amigables de impresión

Generalmente nos resulta más cómodo leer el contenido de una web en un papel impreso que en la pantalla de nuestro ordenador; es por eso que en este artículo abordamos los aspectos fundamentales a tener en cuenta en el momento de implementar en nuestro sitio las páginas para impresión.

Una página web amigable para impresión es aquella que al imprimirla se puede leer perfectamente ajustándose a las características de una lectura en papel, pero que al mismo tiempo en la pantalla se muestra con toda la elegancia, diseño y colorido necesario.

Para llevar a cabo ésto, modificamos su apariencia, eliminando los anuncios publicitarios, decoraciones, elementos de navegación, vínculos y otros aspectos que no son relevantes cuando el contenido se encuentra en papel.

Teniendo en cuenta que a la mayoría de las personas prefieren leer sobre una hoja de papel que en la pantalla del ordenador, es importante considerar esta opción en el diseño de nuestros sitios web. Si le damos al usuario la posibilidad de imprimir el contenido de las páginas también estaremos haciendo nuestro sitio más usable.

Lea el artículo completo en www.maestrosdelweb.com

Cómo instalar Flash Player para videos de Youtube

Alguien me ha comentado que no puede ver los archivos de Youtube porque no tiene instalado en su navegador el Flash Player para reproducirlos. Este puede convertirse en un gran problema porque muchos de los sitios de Internet utilizan esta tecnología para mostrar su contenido y además, como comentaba al inicio, los tan populares videos de Youtube utilizan esto para reproducirse.

También puede suceder que un determinado sitio web contenga animaciones hechas con una versión de Flash superior a la que tenemos instalada en nuestro ordenador y al entrar no podamos ver los vídeos por este motivo.

Por defecto la mayoría de los navegadores más utilizados actualmente como Mozilla Firefox, Internet Explorer y Opera ya tienen plugins para manipular los archivos de videos de Adobe Flash (anteriormente de Macromedia) cuando los instalamos en nuestro ordenador.

Este problema que a primera vista es un gran lío, tiene una solución rápida y sencilla:

Primeramente debemos iniciar sesión en nuestra computadora con privilegios de Administrador, si no sabes qué es esto probablemente ya estés trabajando con estos permisos y no necesites de este paso.

Luego debemos abrir nuestro navegador y entrar a la página de descarga de Flash Player y desde ahí hacemos clic en el botón que se nos indica para descargar e instalarlo. Es recomendable leer las indicaciones de la página antes de comenzar la instalación. Una vez finalizada tendremos instalada la última versión del producto en nuestra PC.

También existen otros videos aparentemente iguales a los de Flash Player, pero que están hechos para reproducirse con Shockwave Player, estos sólo se diferencian en el formato del archivo de video. Como a simple vista no se puede determinar cuál es de un tipo y cuál es del otro, es recomendable instalar también el plugin para este tipo de archivos, desde la página de instalación de Shockwave Player.

Luego de esto debemos cerrar y abrir el navegador, para que detecte los nuevos plugins y podremos ver sin problemas los video de Youtube o cualquier otro en internet.

Sitios:
Página de instalación del Flash Player
Página de instalación del Shockwave Player