AdRotator en Página ASP .Net

0
26956

Uso del Control AdRotator en web ASP .NET

 

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:

<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…

OPINIÓN: Si deseas dar tu opinión sobre este artículo
puedes hacerlo pulsando aquí.

 

Dejar respuesta

Please enter your comment!
Please enter your name here