Aprende Robotica

Aprende robótica con Arduino en español

Seguimiento visual de visitas en nuestro sitio web [Lorenzo M. Oliver]

Este proyecto nos ofrece la posibilidad de hacer un seguimiento visual, y en tiempo real, de las visitas que se producen en nuestro sitio web. Cada vez que alguien accede a una de las páginas de nuestro sitio, podremos observar cómo se enciende de manera intermitente un diodo LED; incluso podemos obtener una señal acústica para cuando se produce la visita. Cuando se dé el caso en que acceden dos o más visitantes, esto se reflejará en la frecuencia de parpadeo del LED. El número de páginas a controlar independientemente será posible según el número de salidas disponibles en el BASIC Stamp que empleemos.

Este es uno de los pocos proyectos que considero fascinantes y a la vez simples, puesto que permite unir dos mundos, el virtual y el físico, en un montaje de no más de un par de horas. Este proyecto nos ofrece la posibilidad de hacer un seguimiento visual, y en tiempo real, de las visitas que se producen en nuestro sitio web. Cada vez que alguien accede a una de las páginas de nuestro sitio, podremos observar cómo se enciende intermitentemente un diodo LED; incluso podemos obtener una señal acústica para cuando se produce la visita. Cuando se dé el caso en que acceden dos o más visitantes, esto se reflejará en la frecuencia de parpadeo del LED.

El número de páginas a controlar independientemente será posible según el número de salidas disponibles en el BASIC Stamp que empleemos.

ESQUEMA GENERAL

El esquema general está basado en los siguientes elementos:

Inserción de un pequeño código HTML en la página web que queremos controlar (Nuestra página web).
Utilización de un módulo PINK (Parallax Internet Netburner Kit) conectado a la red.
Creación de dos sencillas páginas HTML que alojaremos en el módulo PINK. Una de estas se encargará de hacer un "submit", mediante un formulario tipo POST, para cargar una de las variables del PINK con valor "1". la otra página será una simple página de respuesta, a nuestro gusto (Preparando el módulo PINK)
En nuestra BOE o HomeWork, un simple circuito LED (El circuito en la BOE) que el programa PBASIC de nuestro BASIC Stamp hará titilar, según la lectura que vaya ahciendo de la variable en el PINK (El programa para el BASIC Stamp).

El esquema general se puede graficar
de la siguiente manera:

NUESTRA PÁGINA WEB

Al principio, nos sentimos tentados a meter todo nuestro sitio web en el mismo módulo PINK, lo que facilitaría mucho las cosas ya que el Parallax Internet Netburner Kit constituye en sí un servidor web embebido (incrustado en el circuito del módulo) capaz de alojar nuestras propias páginas web. Pero esto implicaría ciertas limitaciones de capacidad y en el uso de ciertos códigos de página (Java, PHP, XML,...). Por lo tanto, lo que hacemos es insertar en nuestra página web (no importa en qué servidor esté alojada) una línea de código HTML que básicamente realizará una llamada a la página "clave" (enviadatos1.htm), que esta sí estará alojada en el módulo servidor PINK.

La etiqueta <IFRAME> muestra un tipo especial de ventanilla o cuadro en cualquier ubicación de nuestra página. Por ejemplo, se puede utilizar para visualizar una vista preliminar de un sitio web externo sin salir de la página que estamos visualizando. Esto es interesante porque en este proyecto nos permitirá hacer una llamada a la página "clave" que tenemos en el PINK para que ésta se cargue.

Hay que prestar atención a la parte de la url, "xx.xx.xx.xx", que debe ser la dirección IP Pública
que llega a nuestro módulo servidor PINK conectado a la red. El tamaño de esa ventana o cuadro viene especificado con los parámetros "width" y "height". El resto de parámetros hacen que no se muestre scroll, ni bordes, ni márgenes.

PREPARANDO EL MODULO PINK

Como hemos ido comentando en otros artículos y proyectos, el PINK constituye un servidor web embebido capaz de alojar páginas web con imágenes, desde las cuales poder mostrar datos que pueda gestionar nuestro circuito BASIC Stamp, o interactuar con estos, como es el caso de este proyecto.

Para más información sobre la gestión de variables en el módulo y el mantenimiento de los archivos y uso del FTP, lee por favor lo publicado en ¡Conecta tu BASIC Stamp al mundo! y Sistema de alarma doméstico conectado a Internet.

He aquí el código de la página "enviadatos1.htm", la cual se encarga, al ser llamada desde el <IFRAME>, de realizar un "submit automático" como si a través de un formulario normal y corriente tratáramos de enviar el valor de un campo o dato:

<html>
<head>
<title>Envía datos al PINK</title>
<script language="Javascript">
function enviar() {

document.forms.formulario.submit();
}
</script>
</head>

<body
onload="setTimeout('enviar()', 5000)">

<FORM method="post" name="formulario"
action="respuesta.htm">
<input type="hidden" name="Nb_var03"
value="1">

</FORM>
</body>
</html>

Decimos "automático" porque no haremos absolutamente ninguna acción en este formulario ya que, gracias a la función Javascript que se ejecuta al cargarse está página, no será necesario introducir dato alguno en algún campo del formulario (el dato que enviamos con este formulario se halla en un campo tipo "hidden", escondido) y tampoco sera necesario pulsar un botón tipo "submit" o "Enviar". De manera que, al cargarse esta página, se envía automáticamente el valor del campo "Nb_var03", es decir "1".

El módulo PINK dispone de 100 variables de uso por parte del usuario; nosotros hemos escogido "Nb_var03" para tratar de diferenciarla en el planteamiento de este proyecto.

La página respuesta

Y cuando el dato ha sido enviado ¿qué pasa después? Una página de respuesta (respuesta.htm), especificada en el código HTML comentado anteriormente (entre las etiquetas <FORM></FORM>), se carga para mostrarse en lugar de la anterior.

<html>
<head>
<title>Respuesta</title>
</head>

<body
bgcolor="#FFFFFF" text="#000000">

<p><font face="Verdana, Arial, Helvetica,
sans-serif" size="1" color="#72AA21"><b>¡Bienvenido!</b><br>
<font color="#666666">Tu visita ha sido
registrada en un módulo <b>PINK</b></font></font></p>

<p><font face="Verdana, Arial, Helvetica,
sans-serif" size="1" color="#666666">Si
quieres saber más, pulsa <a href="http://www.todomicrostamp.com/pink.php"
target="_blank"><u>aquí</u></a></font></p>

</body>
</html>

Es lo habitual, para comprobar que todo el proceso de envío de cualquier formulario se ha realizado con éxito. Aquí podemos aprovechar para mostrar un mensaje de bienvenida o algo parecido. Por ejemplo, con el código que se muestra aquí pretendemos dar cuenta al usuario de que su visita a nuestro sitio web ha sido registrada en un módulo PINK. En cualquier caso, esta página va a gusto del interesado.

Esta se mostrará en la misma página, ocupando el tamaño de la ventana o cuadro especificado ya con la etiqueta <IFRAME>.

EL CIRCUITO EN LA BOE

Ahora viene la parte práctica. El circuito a montar en la BOE o HomeWork con el correspondiente BASIC Stamp es bastante simple: se trata de montar un circuito para hacer titilar un diodo LED. Asi pues, precisaremos de los siguientes materiales:

Un diodo LED
Una resistencia de 470 ohmios (amarillo, violeta, marrón)

Es necesario prestar atención a la polaridad del LED: la patilla del lado plano del diodo es la que se conecta al Vss (-). En la siguiente imagen vemos todos los elementos al completo: el módulo PINK conectado a la BOE.

Observa que estamos usando los pines 7 y 8 (para lectura y escritura), así como la correspondiente alimentación, para conectar ambos módulos.

Los tiempos de encendido del LED y su intermitencia se ha calculado en base a un tráfico de visitas propio de un sitio web personal, no mayor de 5 visitas a la vez mientras transcurre 5 minutos. En los comentarios del programa se explica cómo aumentar este parámetro, así como también la manera de controlar más de una página del sitio.

EL PROGRAMA PARA EL BS

Este es el listado completo del programa PBASIC que deberemos cargar en el BASIC Stamp:

' {$STAMP BS2}
' {$PBASIC 2.5}

NBVAR VAR Byte
x VAR Byte
z VAR Byte(4)

LOW 0
NBVAR = 0
x = 0

lee_pink:
SEROUT 8,396,["!NB0R03"]
SERIN 7,396,[NBVAR]
IF NBVAR = 49 THEN GOSUB hay_visita 'comprueba
valor ASCII que nos deja la visita (49 -> "1")
FOR x = 0 TO 4
IF z(x)>0 THEN

HIGH 0 'enciende
LED
z(x)= z(x)+1 'suma
"1 tiempo"
IF z(x)=200 THEN z(x)=0 '
inicializa cuando ha llegado a 200 "tiempos" (5
min. aprox.)
ENDIF

PAUSE 150
LOW 0 'apaga LED
PAUSE 150
NEXT
GOTO lee_pink

hay_visita:
SEROUT 8,396,["!NB0W03:0",CLS] 'inicializa variable en el PINK para detectar otra visita
FOR x = 0 TO 4
IF z(x)=0 THEN
z(x)=z(x)+1 'carga
el primer array de los 5 que encuentre vacio
RETURN

ENDIF
NEXT
RETURN

Veamos de cerca lo que hace el programa:

SEROUT 8,396,["!NB0R03"]
SERIN 7,396,[NBVAR]
IF NBVAR = 49 THEN GOSUB hay_visita

Lee la variable "NBOR03" en el PINK y la recoje con el comando SERIN. En cuanto lea valor "1" (por defecto será "0"), ejecutará la subrutina "hay_visita".

hay_visita:
SEROUT 8,396,["!NB0W03:0",CLS]

Vuelve a dejar la variable a "0" para poder detectar otras posibles visitas.

FOR x = 0 TO 4
IF
z(x)=0 THEN
z(x)=z(x)+1
RETURN
ENDIF
NEXT

Busca un array vacio (hemos previsto hasta 5: z[0] a z[4]) para cargar un contador de tiempo (hemos estimado aproximadamente 5 minutos de duración para que se mantenga parpadeando el LED para cada visita). Si estimamos que vamos a recibir más visitas a la vez dentro de ese espacio de tiempo, bastará con aumentar el número de arrays en el rango del FOR-NEXT.

FOR x = 0 TO 4
IF z(x)>0 THEN
HIGH 0

z(x)= z(x)+1
IF z(x)=200 THEN z(x)=0
ENDIF
PAUSE 150
LOW 0
PAUSE 150

NEXT

En el ciclo principal de "lee_pink", se comprueba si hay algún array cargado con algún contador de tiempo, con lo que, si lo hay, iluminará el LED. Para cada uno de los array con contador se ejecutará el encendido del LED con HIGH 0 y su correspondiente apagado con LOW 0.

IF z(x)=200 THEN z(x)=0 es el tope de los contadores que hemos dispuesto para anunciar cada visita. Si hemos de aumentar este tiempo, no sólo habrá de aumentar ese número sino también cambiar la definición del tipo de variable (de tipo "Byte" a tipo "Word")

CONSIDERACIONES FINALES

Hemos mencionado al principio que es posible hacer que escuchemos una señal acústica cada vez que accede una visita.

Aunque no se ha contemplado en el esquema (porque resultaba algo molesto en la práctica), es posible añadirlo en el montaje. Tan sólo hay que añadir un parlante piezoeléctrico o zumbador, conectado al pin 1 del BASIC Stamp, e insertar la siguiente línea al comienzo de la subrutina "hay_visita":

FREQOUT
1, 200, 5000 donde hemos establecido una duracción de 200 y una frecuencia
de tono de 5000.

Ahora bien, existen diferentes posibilidades para el seguimiento del tráfico de visitas en nuestra web:

A- Realizando estrictamente las instrucciones comentadas a lo largo de este texto, podremos seguir el acceso a una sola página significativa del sitio, por ejemplo la página principal o home.

B- O insertamos el código HTML de llamada al programa "enviadatos1.htm" (el que contiene las etiquetas <IFRAME></IFRAME>) en varias de nuestras páginas del sitio, de manera que obtendremos varias lecturas procedentes de varias de esas páginas y que se reflejarán en un único LED. En este caso, tal vez debamos aumentar el número de arrays que deberán gestionar cada uno de los contadores por visita.

C- O bien, insertamos el código HTML de llamada al programa "enviadatos1.htm" en varias de nuestras páginas del sitio, pero renombrando cada página a la que llamará: "enviadatos1.htm", "enviadatos2.htm", "enviadatos3.htm", ... En cada una de estas páginas, preparamos el formulario para que cargue diferentes variables: "Nb_var01", "Nb_var02", "Nb_var03", ... La lectura que realizará el programa del BASIC Stamp deberá hacerla para cada una de las variables, por lo que la variable que usamos para este control (x) la renombraremos como x1, x2, x3,... de manera que podremos gestionar independientemente diferentes ciclos FOR-NEXT para diferentes lecturas de diferentes páginas. En este caso, podremos manejar diferentes LEDs para cada página. El límite lo establecerá el número de pines disponibles en nuestro BASIC Stamp.