Desarrollo de una pagina web ASP .NET para utilizar el control AdRotator

1- INTRODUCCIÓN

A continuación se presentará las instrucciones y pasos seguidos para la creación de una página web que incluye el control AdRotator.

Este control se utiliza para añadir mensajes animados a una página web, como pueden ser noticias o publicidad, siendo capaz de presentarlos de forma aleatoria ya que se actualiza cada vez con la carga de página, lo que permite mostrar diferentes mensajes para cada usuario. Es posible asignar prioridades a los anuncios para que unos aparezcan con mayor frecuencia que otros.

El control AdRotator dispone de tres propiedades adicionales a las heredadas de la clase System.Web.UI.Control, estas son:

1. AdvertisementFile
2. Keyword Filter
3. Target

1- AdvertisementFile: Esta propiedad presenta la ruta a los archivos que se utilizan configuración de los mensajes a presentar, en formato XML. La sintaxis de este archivo es la siguiente:

<?xml version="1.0" encoding="utf-8"?> <Advertisements> <Ad> <ImageUrl>Url de la imagen</ImageUrl> <NavigateUrl>Url del link</NavigateUrl> <AlternateText>Texto alternativo y mostrado como ToolTip</AlternateText> <Keyword>Palabras claves usadas como filtro</Keyword> <Impressions>Relevancia</Impressions> </Ad> </Advertisements>

Los elementos usados en este archivo de configuración se describen a continuación:
ImageUrl: Especifica una URL relativa o absoluta a un archivo de imagen, que será la que se presente en el navegador.
NavigateUrl: Determina la dirección URL de la página a la que se va a acceder cuando el usuario pulsa la imagen mostrada.
AlternateText: Indica el texto alternativo que aparecerá en pantalla en caso de que no se pueda acceder a la imagen correspondiente, o como ToolTip en caso de que esta sí se muestre.
Keyword: Parámetro que determina la categorías utilizadas para filtrar anuncios, como pueden ser informática, tutoriales, discos, ...
Impressions: Parámetro que indica, en forma de número, el orden del anuncio en la secuencia de rotación con respecto al resto de anuncios del archivo de configuración. Cuando mayor sea el número, el mayor valor es 1, con mayor frecuencia aparecerá y a igualdad de valores, es el propio AdRotator el que gestionará y presentará aleatoriamente los anuncios.

2- KeywordFilter: Esta propiedad especifica el filtro de categoría que se pasa al origen del anuncio. Este filtro permite que el control AdRotator muestre sólo anuncios que coincidan con una determinada palabra clave. Por lo tanto, se pueden mostrar anuncios sensibles al contexto de la página.

3- Target: Esta propiedad especifica el nombre de la ventana o marco del navegador en el que aparecerá el anuncio. Este parámetro admite cualquiera de los siguientes valores: _top (carga el documento en la ventana situada en la parte superior), _blank (carga el documento en una ventana nueva), _self (carga el documento en la misma ventana) y _parent (carga el documento en la ventana principal de la ventana que contiene el anuncio).

La aplicación realizada permite la presentación de distintas creatividades o banner en nuestras páginas, gestionadas de forma automática por este control.

Los pasos a seguir para llevar a cabo este desarrollo son:

1. Creación del site en el IIS (Internet Information Services)
2. Creación del proyecto con la herramienta de desarrollo Microsoft Visual Studio
3. Creación del directorio Adrotator como aplicación en el IIS
4. Renombrar la página por defecto (WebForm1.aspx)
5. Creación y configuración del archivo de recursos de anuncios (advertisements.xml)
6. Añadir el control AdRotator a la página
7. Configuración y programación de la página .aspx
8. Pruebas y publicación de la página

2- IMPLEMENTACIÓN DEL SISTEMA

2.1- Creación del site en el IIS (Internet Information Services)

Creamos el site en el IIS, para este ejemplo estará en un servidor local en el puerto 8002.

Primeramente se crea en nuestro disco duro una carpeta donde se guardarán los archivos a crear. Seguidamente, abrimos la administración del IIS (Inicio --> Programas --> Herramientas Administrativas --> Administración de Servicios de Internet). Desde el IIS y con el botón derecho del ratón en el servidor, se elige la opción de nuevo web site, se indica el nombre, por ejemplo: Adrotator, se configura el puerto a utilizar, en este caso es el 8002 y se indica la ruta de la carpeta, anteriormente creada, que contendrá los archivos.

2.2- Creación del proyecto con la herramienta de desarrollo Microsoft Visual Studio

Abrimos la herramienta de desarrollo Microsoft Visual Studio y elegimos la opción de crear nuevo proyecto de la opción "Archivo - File" del menú superior.

Se presentarán todas las opciones de proyectos que podemos crear, nosotros vamos a elegir, dentro de los proyectos de Visual Basic, la opción de Aplicaciones Web ASP .NET, indicando en el campo de localización la url de nuestro proyecto, en este caso, "http://localhost:8002/adrotator", esta dirección deberá coincidir con el site y puerto creados en el paso anterior desde la consola de gestión del IIS, siendo la denominación "localhost" la correspondiente a nuestro equipo, que por defecto correspondiente a la IP: 127.0.0.1.

Una vez finalizado este proceso, se presentarán en la parte superior derecha del Visual Studio, todos los archivos que componen nuestro proyecto para comenzar a trabajar con ellos. También se pueden comprobar con el Explorador de Windows, en la carpeta que se ha creado para este website, como automáticamente se ha creado la carpeta adrotator y los archivos correspondientes en nuestro disco duro.

2.3- Creación del directorio Adrotator como aplicación en el IIS

Hay que realizar un paso muy importante para que nuestra aplicación se ejecute correctamente, hay que configurar en el IIS la nueva carpeta creada, adrotator, como aplicación para que se pueda ejecutar la página .aspx que vamos a crear, para ello hay que seguir estos pasos:

1. Abrimos la consola del IIS.
2. Seleccionamos la carpeta adrotator y examinamos sus propiedades, con la ayuda del botón derecho del ratón.



3. Creamos como aplicación esta carpeta, dentro de la pestaña de directorio que se nos presenta. Inicialmente esta opción estará desactivada como se puede ver en esta imagen.



4. Pulsando en el botón "Create", se activa esta opción, como se puede observar en la siguiente imagen:

Una vez realizada esta acción cerramos la ventana de propiedades y ya tenemos lista como aplicación esta carpeta, y podemos continuar con la creación de nuestra página web.

2.4- Renombrar la página por defecto (Webform1.aspx)

A continuación, y utilizando la herramienta Visual Studio, procederemos a renombrar la página creada por defecto WebForm1.aspx por adrotator.aspx, para ello desde la columna de propiedades, seleccionaremos con el ratón la propiedad "Nombre del archivo o File Name", donde realizaremos el cambio del nombre de la página, no es recomendable realizar este cambio directamente en la parte del explorador de soluciones, desde la ventana de propiedades el propio Visual Studio gestionará este cambio en los archivos de configuración correspondientes.

CONSEJO: Cambiamos el método de ejecución, pasando de Debug (Opción por defecto) a Release, eso nos facilitará la posterior tarea de publicación y distribución de la aplicación.

2.5- Creación y configuración del archivo de recursos de anuncios (advertisements.xml)

Desde propio Visual Studio, podemos incluir un nuevo archivo, desde el explorador de soluciones, con el botón derecho, seleccionamos la opción de añadir un nuevo archivo, en este caso será .xml.

Este archivo será el utilizado para incluir y configurar los anuncios que se van a presentar en nuestras páginas, siguiendo la estructura que al inicio de este tutorial he detallado.

Para este ejemplo, el archivo que hemos creado, cuyo nombre es "advertisements.xml" contiene la siguiente información:

<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>http://www.carixma.com/img/adrotator/carixma.gif</ImageUrl> <NavigateUrl>http://www.carixma.com</NavigateUrl> <AlternateText>Carixma: Servicios para profesionales</AlternateText> <Keyword>Servicios</Keyword> <Impressions>1</Impressions> </Ad> <Ad> <ImageUrl>http://www.carixma.com/img/adrotator/adictos.gif</ImageUrl> <NavigateUrl>http://www.adictosaltrabajo.com</NavigateUrl> <AlternateText>Adictos al Trabajo: Tutoriales, trabajo, ...</AlternateText> <Keyword>Tutoriales</Keyword> <Impressions>1</Impressions> </Ad> <Ad> <ImageUrl>http://www.carixma.com/img/adrotator/autentia.gif</ImageUrl> <NavigateUrl>http://www.autentia.com</NavigateUrl> <AlternateText>Autentia: Consultora y cursos</AlternateText> <Keyword>Consultora</Keyword> <Impressions>1</Impressions> </Ad> </Advertisements>

Cabe destacar que en la etiqueta "Impressions", se ha indicado para todos los anuncios la misma relevancia, para ello se ha puesto el mayor valor (en este caso 1) en todos los casos.

2.6- Añadir el control AdRotator a la página

Desde el explorador de soluciones (ventana superior derecha del Visual Studio), hacemos un doble click en la página adrotator.aspx, pasándose a la zona central para poder empezar a trabajar con ella.

En modo de diseño, vamos a seleccionar el control AdRotator de la barra de herramientas que hay en la parte de la izquierda, dentro de la categoría de controles web, tal y como se indica en la imagen siguiente, simplemente arrastramos este control a nuestra página y lo colocamos donde queremos que aparezcan los anuncios, también configuramos su tamaño, bien utilizando sus propiedades o directamente desde la zona central de desarrollo.

2.7- Configuración y programación de la página .aspx

A continuación hay que indicarle al control AdRotator la localización del fichero de configuración de anuncios, para ello desde la parte de edición de código HTML del Visual Studio añadidos la siguiente propiedades al control AdRotator: AdvertisementFile="advertisements.xml"

Para este ejemplo también he añadido una etiqueta (control label) para el título de la página y un botón (control button) que al pulsarlo refresca la página, por lo que podemos ver claramente el funcionamiento de este control, al refrescar la página, AdRotator mostrará un anuncio diferente.

A continuación se presenta el listado final de la página:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="adrotator.aspx.vb" Inherits="adrotator.WebForm1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:AdRotator id="AdRotator1" style="Z-INDEX: 101; LEFT: 216px; POSITION: absolute; TOP: 80px" runat="server" Width="170px" Height="50px" AdvertisementFile="advertisements.xml"></asp:AdRotator> <asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 128px; POSITION: absolute; TOP: 32px" runat="server" BorderColor="Black" BorderStyle="Solid" Font-Bold="True">Página de prueba del control AdRotator con .NET</asp:Label> <asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 232px; POSITION: absolute; TOP: 176px" runat="server" Width="136px" Height="32px" Text="Refrescar Página"></asp:Button> </form> </body> </HTML>

Para descargate todos los archivos necesarios para este ejemplo, puedes hacerlo pulsando aquí.

2.8- Pruebas y publicación de la página

Finalmente, una vez guardado el proyecto, lo pasamos a su ejecución, para ello escribimos en un navegador web la URL: http://localhost:8002/adrotator/adrotator.aspx y se presentará la página y un anuncio, como en la imágenes siguientes:

Si queréis publicarlo en un site público, debéis subir a vuestro servidor los archivos siguientes: advertisements.xml, web.config, adrotator.aspx y la carpeta bin completa que se ha creado y que contiene la "dll" del proyecto, puedes ver el resultado final de esta página en la siguiente URL: http://www.carixma.com/adrotator.aspx

Espero que os haya sido útil, este ejemplo nos permite utilizar el control AdRotator, bastante sencillo y práctico para nuestras aplicaciones web.

SOBRE EL AUTOR...