Aprende Robotica

Aprende robótica con Arduino en español

Seguimiento visual de visitas en nuestro sitio web

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
calulado 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.