|
Reconocer y saludar al visitante de una página
Antes de nada, un par de aclaraciones. Este no es un curso de
Javascript, sólo pretende explicar como aprovechar algunas
facilidades de dicho lenguaje para aquellos que quieran añadir
funcionalidad a sus páginas. Por ello, se va a explicar cómo poner
este código en tu página sin entrar en mucho detalle sobre el
código en sí. Pretendemos que sea algo práctico al alcance de
cualquiera.
Si aún así todo, te resulta complejo seguir el artículo. Bájate
este fichero y copia las líneas de código
que contiene dentro de tu página. Preferiblemente justo antes del
</head>. Sólo con eso te funcionará :)
El código está basado en el uso de galletas (cookies)
sobre las que hay una leyenda negra sobre si con ellas se vulnera
la seguridad de nuestro ordenador. Realmente las galletas no
tienen problemas de seguridad, aunque su uso malintencionado
podría interpretarse como una invasión de la privacidad. En otro
artículo hablaremos largo y tendido del tema. De momento, este
programilla se limita a guardar el nombre del visitante si es que
nos lo quiere dar por lo que nadie debería sentirse ofendido. A
cambio, nuestras páginas cobran un toque de personalidad que
siempre las hace más amigables.
Bueno, vamos allá. Como decía, el truco para identificar al visitante consiste en guardar esa galleta o cookie con su nombre.
Esta se almacena en un fichero que tiene el navegador en el disco duro de su ordenador, y podemos recuperarla cuando queramos.
Para realizar estos procesos vamos a utilizar un código sencillito en javascript que podrás poner en tu página con sólo seguir las instrucciones de este artículo paso a paso.
Lo primero que necesitas saber es que el javascript no es parte habitual del html, por lo que para ponerlo en una página hay que indicarlo de manera diferente.
Se puede incluir código javascript en cualquier lugar de una página. Para ello se debe poner el siguiente código dentro del html:
|
<script language="JavaScript">
<!-- Ocultar el código a los navegatas caducos --
|
|
A continuación vendrían las líneas de código en javascript, y para
finalizar, hay que poner:
|
<// -- hasta aquí ocultamos -->
</script>
|
|
Simplemente, creetelo ;)
Ahora lo que necesitamos es unas funcioncillas para trabajar con
las galletas. Yo tengo estas que cogí de por ahí y que he ido
adaptando. Gracias a ellas, nos podemos olvidar de la parte más
compleja del programa. Basta con pegarlas al principio del código
y a partir de ahí, nos bastará con escribir leer_galleta() o
poner_galleta() para conseguir nuestros objetivos.
Estas tres funciones son:
|
//___ función auxiliar para "despedazar" una galleta ___
function valor_galleta (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//___ función que lee la galleta a partir de su nombre ___
function leer_galleta(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return valor_galleta (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
//___ función que guarda el contenido de una galleta ___
function poner_galleta(name, value) {
var argv = poner_galleta.arguments;
var argc = poner_galleta.arguments.length;
var expdate = new Date();
expdate.setTime (expdate.getTime() + 365*(24 * 60 * 60 * 1000)); // dead in 1 año
var expires = (argc > 2) ? argv[2] : expdate;
var path = (argc > 3) ? argv[3] : "/";
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
|
|
Así que ya tenemos nuestras herramientas. Ya sólo hace falta
utilizarlas.
Lo primero que tiene que hacer nuestro programa
es comprobar si conoce al visitante. Para ello tratamos de leer la
galleta con lo que sabremos si había estado aquí antes...
|
//___ aquí empieza el programa para saludar a los visitantes ___
//___ lo primero, mirar a ver si lo conocemos ___
var visitante = leer_galleta("el_visitante");
|
|
A nuestra galleta la hemos llamado "el_visitante". Si nuestro
visitante había estado antes, la función leer_galleta() nos
devolverá su nombre. Si no, nos devolverá un valor identificado
como null y con ello sabremos que es la primera vez.
En ese caso le preguntamos su nombre mediante la instrucción
prompt() y lo que el visitante teclea nos lo guarda en la variable
visitante. Si no teclea nada, volvemos a obtener el valor
null por lo que nosotros mismos le bautizamos. En este caso
como "Navegante".
|
if ( visitante == null )
{
//___ era un desconocido y le preguntamos su nombre ___
visitante = prompt( "¡Hola! :) ¿Como te llamas?" , "");
if ( visitante == null )
{
//___ No nos lo ha querido decir :( ___
alert('Bueno, pues yo te llamaré Navegante');
visitante = 'Navegante';
}
}
|
|
Ahora que de una manera u otra lo tenemos identificado, lo que
vamos a hacer es guardar su nombre. Para ello, nada más sencillo
que utilizar la función poner_galleta().
|
//___ guardamos su nombre en una galleta ___
poner_galleta( "el_visitante", visitante );
|
|
Finalmente, vamos a componer el mensaje de saludo.
En la
variable visitante tenemos su nombre, por lo que montamos
un mensaje de la forma: "¡Hola, Vilma! :) ¡Qué alegría verte por aquí!"
|
//___ preparamos el mensaje de saludo ___
var mensaje = '¡Hola '
//___ le incoporamos el nombre que nos ha dado ___
mensaje += visitante + '! ¡Qué alegría verte por aquí! :)'
//___ y finalmente le saludamos ___
alert( mensaje );
|
|
Con la instrucción alert() nuestro mensaje de saludo se presentará
en una ventanita cada vez que el visitante vuelva a nuestra
página.
Esperemos que sea a menudo ;)
El código completo listo para que lo utilices lo puedes coger aquí. Copia las líneas de código que contiene
dentro de tu página. Preferiblemente justo antes del </head>.
|
|
Escrito por Colegota
|
