Primera veamos el código de una página que no ha tenido en cuenta la configuración adecuada para ser compartida en Facebook:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SEO Parser | Search Engine analysis tool</title>

Se puede ver que sólo se ha utiliza el tag para el título de la página, si esta se comparte en Facebook se obtiene el siguiente resultado el cual no muestra la imagen de nuestra página y un resumen del contenido.

Utilizando og:tags

Para personalizar el contenido que se desea compartir, Facebook pone a disposición una seria de metatags HTML llamados og:tags, los mas importantes para compartir son los siguientes:

• og:url es el url absoluto de la página que se esta compartiendo.
• og:title es el título que se mostrará al compartir en Facebook.
• og:description es un resumen del contenido que se comparte.
• og:image contiene la ruta de la imagen que se mostrará.

Luego si tenemos en cuenta estas metatags, podemos personalizar el contenido que deseamos compartir para nuestra página.

<meta http-equiv="Content-Type" content"text/html; charset=UTF-8" />
<title>SEO Parser | Search Engine analysis tool</title>
<meta property="og:url" content="http://seoparser.com" />
<meta property="og:title" content="SEO Parser" />
<meta property="og:description" content="SEO Parser is a SEO analysis tool that can examine and understand how to view a Web page on Search Engines." />
<meta property="og:image" content="http://seoparser.com/img/seo-parser.png" >

Con lo cual obtenemos el siguiente resultado, el cual obviamente es muestra de manera correcta el contenido de nuestra web.

Depuración de los og:tags

Finalmente hay que saber que Facebook hace una copia temporal de contenido que se esta intentando compartir, por lo que una vez que se ha intentado compartir este contenido se utilizará posteriormente compartir en Facebook y se actualizará es las siguientes horas.

Entonces para visualizar el contenido final que estamos compartiendo Facebook ha creado una herramienta llamada: Open Graph Object Debugger que muestra: el contenido actual de nuestra página, un resumen de los tags utilizados y alertas en caso falten o esten errados alguns tags.

Mas Información

• Facebook: Basics for Webmasters
• Facebook: Open Graph Object Debugger
• Facebook Open Graph META Tags

Este artículo es antiguo, puedes leer una versión actualizada en:
Cómo agregar un Precargador a tu Página Web

Precargar una página es importante para mejorar la experiencia del usuario, esto en caso nuestra página sea muy pesada o por que cuando la página no se ha cargado completamente se puede ver desordenada o incompleta.

Un poco de teoría

Para inicializar una página se realiza con el evento ready es decir cuando se cargado el DOM o HTML, además de ello existe el evento load el cual se ejecuta cuando ademas del HTML se ha cargado todo el contenido (imágenes, css, etc).

$(document).ready(function(e) {
   // html loaded
});
$(document).load(function(e) {
   // html + images + css loaded
});

Entonces lo que haremos es agregar un div que cubra toda la página y una vez que todo el contenido se haya cargado ocultar este div para develar el contenido de nuestra web.

Implementado en Precargador

Lo primero es editar nuestro HTML y crear un div que contendrá la imagen de un precargador.

<div id="preloader">
    <div id="loader">&nbsp;</div>;
</div>;

Luego agregamos código CSS para hacer que este div recién creado se muestre cubriendo completamente nuestra página:

body {
    overflow: hidden;
}
/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    z-index: 100;
}
#loader {
    width: 100px;
    height: 100px;
    position: absolute;
    left:50%; top:50%;
    background: url(../img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}

Finalmente agregamos el código javascript, para ello detectamos que se ha completado la carga de todo el contenido del HTML utilizando el método ready y utilizamos una transición para ocultar el div creado previamente con lo cual se devela nuestra página.

$(window).load(function() {
	$('#preloader').fadeOut('slow');
	$('body').css({'overflow':'visible'});
})

Finalizando

Ahora que tenemos todo el proceso lo vamos a unir en un solo archivo html para hacer las pruebas respectivas:

<html>
<head>
<title>Preloader Demo</title>
<style type="text/css">
body {
    overflow: hidden;
}
/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    z-index: 100;
}
#loader {
    width: 100px;
    height: 100px;
    position: absolute;
    left:50%; top:50%;
    background: url(img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}
</style>
</head>
<body>
<div id="preloader">
   <div id="loade">&nbsp;</div>
</div>
<div id="main">
   ...
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('#preloader').fadeOut('slow');
	$('body').css({'overflow':'visible'});
})
</script>
</body>
</html>

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/html-preloader/. Obviamente este es un precargador básico pero que cumple con lo necesario para mostrar al usuario una precarga.

Les dejo los archivos para que puedan hacer sus pruebas: cambiando el color de fondo o cambiando la imágen de precarga, todo depende de su creatividad y de gráfica que desean utilzar.

[download id=»62″ format=»2″]

Mas Información

• PreLoadMe, a lightweight jQuery website preloader
• QueryLoader v2 demo page
• CSS3 Preloader Animation for only User Agent supports it

Cada vez que uno carga un «Page Tab» este carga el contenido de nuestra página en un iframe y para mantener la comunicación Facebook le pasa el parámetro signed_request, veamos que contiene utilizando código PHP:

print_r($_REQUEST["signed_request"]);

El cual devuelve el siguiente resultado:

iP42q6CeqojKjTV8XSWFcbaShHFtqqreb93rPz2Byew.eyJhbGdvcml0aG0iOiJITUFDLVNI
QTI1NiIsImlzc3VlZF9hdCI6MTM5OTM1MjE0OSwicGFnZSI6eyJpZCI6IjU3MjY5NzYyNDYw
IiwibGlrZWQiOnRydWUsImFkbWluIjp0cnVlfSwidXNlciI6eyJjb3VudHJ5IjoicGUiLCJs
b2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19

Como podemos el resultado está codificado y no se puede entender a simple vista. Pero gracias a las multiples contribuciones de los desarrolladores en internet, tenemos la función parse_signed_request que sirve para decodificar esta información.

function parse_signed_request($request) {
	list($sig, $pay) = explode('.', $request, 2); 
	$data = json_decode(base64_decode(strtr($pay, '-_', '+/')), true);
	return $data;
}

Utilizando esta función para decodificar la información que viene de Facebook:

$fbdata = parse_signed_request($_REQUEST["signed_request"]);
print_r($fbdata);

Este código devuelve el siguiente resultado:

Array
(
    [algorithm] => HMAC-SHA256
    [issued_at] => 1399352590
    [page] => Array
        (
            [id] => 57269762460
            [liked] => 1
            [admin] => 1
        )
    [user] => Array
        (
            [country] => pe
            [locale] => en_US
            [age] => Array
                (
                    [min] => 21
                )
        )
)

Ahora si podemos identificar que el resultado devuelto es un array el cual contiene un parámetro llamado liked que contiene el valor de «1» cuando se ha dado like a la página o vacío cuando no se ha dado like a la página.

Finalmente en base a toda la información podemos detectar si un usuario le ha dato like a una página:

function parse_signed_request($request) {
	list($sig, $pay) = explode('.', $request, 2); 
	$data = json_decode(base64_decode(strtr($pay, '-_', '+/')), true);
	return $data;
}

$fbdata = parse_signed_request($_REQUEST["signed_request"]);

if ($fbdata["page"]["liked"] == 1) {
	echo "LIKED";
} else {
	echo "NO LIKED";	
}

Para los usuarios que necesitan todo terminado les dejo el archivo con el ejemplo básico para descarga.

[download id=»61″ format=»2″]

Seguimiento de Enlaces salientes

Los enlaces externos o salientes son los enlaces a webs externas, conocer a que páginas se van los usuarios nos permitirá detectar que buscan los usuarios así como las páginas de salida.

Para hacer el seguimiento necesitamos incluir el código de seguimiento de Google Analytics, si aún no lo han hecho pueden leer Tips para incluir el código de Google Analytics.

Seguimiento de Enlaces salientes con Javascript

Si tenemos enlaces salientes, podríamos agregar una función que registre estos enlaces como un evento de Google Analytics. Creamos una función que registra un evento sobre la categoría ‘Outbound’.

function trackLink(link) {
	_gaq.push(['_trackEvent', 'Outbound', 'Click', link.href]);
}

Luego cuando coloquemos algún enlace externo, utilizaremos la función recién declarada:

<a href="http://www.google.com" onclick="trackLink(this);">Google</a>

Seguimiento de Enlaces salientes con jQuery

Si estamos utilizando jQuery, podemos aprovechar la potencia de los selectores, entonces podemos crear una rutina para detectar automáticamente todos los enlaces externos, le agregamos la propiedad target para que el enlace abra en ventana nueva y posteriormente registrarlo como un evento de Google Analytics.

$('a').each(function(e) {
	var _this = this;
 	if (_this.hostname && _this.hostname !== location.hostname) {
		$(_this).attr('target', '_blank').bind('click keypress', function(event) {
			var code = event.charCode || event.keyCode;
			if (!code || (code && code == 13)) {
				var fixLink = _this.href;
				fixLink = fixLink.replace(/https?:\/\/(.*)/, "$1");
				_gaq.push(['_trackEvent', 'Outbound', 'Click', fixLink]);
			};
		});
	};
});

Este código lo agregamos a todas las páginas y con ello registraremos todos las veces que los usuarios han salido de nuestra página hacia un enlace externo.

Mas Información

• Event Tracking Guide
• How to Count Your Outbound Click Stats with Onclick in Google Analytics
• Using MooTools to Instruct Google Analytics to Track Outbound Links

Código básico de Google Analytics

Actualmente se recomienda el uso de la versión asíncrona de Google Analytics, esto hace que la carga del archivo javascript se haga sin afectar la carga de nuestra pagina. Para ello colocamos el siguiente código justo antes de cerrar el tag <head>, en donde UA-XXXXX-Y es el identificador de la pagina que vamos a seguir.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Este código también se puede colocar antes de cerrar la etiqueta <body>, pero si el usuario cierra la pagina antes que se haya completado la carga, entonces es probable que no se registre la visita.

Dos identificadores de seguimiento en una página

Si por algún motivo necesitamos que una pagina tenga dos identificadores diferentes, no se puede duplicar el código anterior pues Google Analytics solo permite un código de seguimiento por pagina. Entonces para utilizar dos identificadores podemos utilizar el método _gaq.push el cual permite enviar múltiples instrucciones, luego tendríamos:

_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['b._setAccount', 'UA-XXXXX-2']);
_gaq.push(['b._trackPageview']);

Donde hemos colocado los dos identificadores que deseamos seguir. Ademas se observa recibe como parámetros un serie a arrays, por lo que también podríamos utilizar:

_gaq.push(
  ['_setAccount', 'UA-XXXXX-1'],
  ['_trackPageview'],
  ['b._setAccount', 'UA-XXXXX-2'],
  ['b._trackPageview']
);

Un identificador de seguimiento para varios Dominios

Si queremos utilizar un mismo identificador para diferentes dominios (Por ejemplo si tenemos una pagina y la tienda esta alojada en otro servidor), podemos emplear el siguiente método donde your-domain.com el el dominio donde estas insertando el código:

_gaq.push(['_setAccount', 'UA-XXXXX-Y']);
_gaq.push(['_setDomainName', 'your-domain.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['b._trackPageview']);

Adicionalmente para hacer el seguimiento de los enlaces es necesario agregar a cada enlace una llamada para registrar las llamadas a los enlaces.

<a href="http://other-site.com/intro"
onclick="_gaq.push(&#91;'_link', 'http://other-site.com/intro.html'&#93;); return false;">Intro</a>

Seguimiento de Descargas

Si deseamos registrar las descargas de archivos que se hacen en nuestro site (.zip, .pdf, .avi, etc) es necesario agregar un codigo javascript a cada enlace que apunte a este tipo de archivos.

Podemos utilizar la función _trackPageview el cual crea una estructura de directorio virtual en los reportes de Google Analytics.

_gaq.push(['_trackPageview', '/virtual-path-to-file']);

Entonces para registrar las descargas, modificamos los enlaces de la siguiente forma:

<a href="report.pdf" 
onclick="_gaq.push(&#91;'_trackPageview', '/downloads/report.pdf'&#93;); return false;">Reporte</a>

Mas Información

• Set Up the Tracking Code – Analytics Help
• Tracking Multiple Domains – Google Analytics
• Enlaces de descarga – Analytics Help

SEO Parser esta basado en las diferentes reglas que aplican los buscadores al contenido y a los enlaces, estas reglas están detalladas en el libro The Art of SEO: Mastering Search Engine Optimization (Theory in Practice).

Para utilizar SEO Parser solo hace falta ingresar el URL del enlace que se desea analizar y devolverá como resultado una página con los resultados de: análisis de contenido, análisis de enlaces, análisis de imágenes y una previsualización en los resultados de Google.

Análisis de Contenido

SEO Parser elimina los bloques que no son visibles a los buscadores (Javascript, Flash, Vídeos, Applets, etc) por lo cual solo muestra el contenido basado en texto HTML.

Adicionalmente muestra las etiquetas de cabecera (h1, h2, h3, h4, h5, h6) que permiten definir el nivel de importancia del contenido. Por ejemplo el titulo de todo el contenido (h1), el titulo de cada sección (h2) y así sucesivamente.

Análisis de Enlaces

Todos los enlaces dentro de la página se analizan y muestran en diferentes colores para diferenciarlos. Para ello se agrupan en cuatro tipo de enlaces.

• Enlaces Internos, son enlaces naturales y permiten posicionar secciones internas de un web.
• Enlaces Externos, son enlaces a otros dominios y mejoran el posicionamiento del dominio de destino.
• Enlaces No Follow, son enlaces que no pasan ningún beneficio de posicionamiento.
• Enlaces Javascript, son enlaces creados con javascript o anchors los cuales son invisibles para los buscadores.

Análisis de Imágenes

Los buscadores no pueden interpretar el contenido de las imágenes, pero tienen una señal de lo que contienen gracias a la propiedad alt o en su defecto por el nombre del archivo de la imagen. SEO Parser reemplaza las imágenes por el texto Alt y si no existe por el nombre del archivo. Esto permite distinguir rápidamente si hace falta la propiedad alt a nuestras imágenes.

Previsualizar en Google

SEO Parser toma los datos del title y description o en su defecto el contenido filtrado de la página para simular como se mostrará la página en los resultados de Google. De esta forma identificaremos rápidamente como se verá nuestra página en Google.

Adicionalmente se muestra en detalle todos los metatags que contiene la página así como un resumen de las cantidades de enlaces, imágenes e incluso el tamaño del archivo leído.

Finalmente ofrece documentación acerca de las reglas que aplica al contenido, también tiene un formulario de feedback donde pueden enviar sus sugerencias, errores y comentarios para mejorar esta herramienta.

Sintaxis de las Transiciones con CSS

En la especificación del CSS3 se introduce la nueva propiedad transition la cual permite especificar las transiciones con CSS, la sintaxis básica es:

.style {
   transition: property time easing;
}

Donde se tiene:

• property: propiedad a aplicar la transición (color, width, etc).
• time: tiempo de duración expresado en segundos de la transición.
• easing: tipo de aceleración de la animación (ease, linear, ease-in, ease-out, ease-in-out).

Obviamente este código solo funciona en navegadores que tienen implementada la especificación CSS3, entonces para que los navegadores actuales puedan interpretarlo hace falta agregar líneas especificas de acuerdo a cada navegador.

.style {
   	-webkit-transition: property time easing; /* Safari 3.2+, Chrome */
	-moz-transition: property time easing;    /* Firefox 4.0+ */  
	-o-transition: property time easing;      /* Opera 10.5+ */
	transition: property time easing;
}

Esto garantiza que las transiciones se verán correctamente en Chrome, Safari 3.2+, Firefox 4.0+ y Opera 10.5+. En los otros casos (incluyendo Internet Explorer) no se verá la transición solo se verá un cambio brusco entre uno y otro estado.

Ejemplo básico de Uso

Una vez que conocemos la sintaxis, veamos un ejemplo en el cual al pasar el mouse sobre un enlace cambiaremos el color del enlace pero con una pequeña transición del color.

Para comenzar el rollover de un enlace se hace mediante:

a {
	color: #06C;
}
a:hover {
	color: #C00;
}

Luego aplicamos la transición al color durante 0.35 segundos, con lo cual tendríamos:

a {
	color: #06C;	
	-webkit-transition: color .35s ease-out;  
	-moz-transition: color .35s ease-out;  
	-o-transition: color .35s ease-out; 
	transition: color .35s ease-out;
}
a:hover {
	color: #C00;
	-webkit-transition: color .35s ease-in;  
	-moz-transition: color .35s ease-in;  
	-o-transition: color .35s ease-in; 
	transition: color .35s ease-in;
}

Como se aprecia hemos aplicado la transición sobre la propiedad color el cual durará 0.35 segundos, además hemos aplicado la transición cuando el mouse pasa sobre el enlace y cuando sale del mismo.

Ejemplo de Menú con CSS Transitions

Como segundo ejemplo crearemos un menú de navegación, en el cual cuando el cursor pasa sobre el elemento cambiaremos el color y el ancho del fondo con lo cual obtendremos un resultado interesante. Para ello primero creamos el código HTML para los elementos del menú.

<ul class="menu">
	<li>Home</li>
    <li>Productos</li>
    <li>Ofertas</a></li>
    <li>Contactenos</a></li>
</ul>

Luego, creamos la hoja de estilos en el cual definimos primero las propiedades del elemento de menú y también las propiedades del elemento esta en rollover.

.menu li {
	list-style: none;
	padding: 0 0 0 10px;
	width: 200px;
	color: #fff;
	background: #6CF;
	
	-webkit-transition: all .35s ease-in;  
	-moz-transition: all .35s ease-in;  
	-o-transition: all .35s ease-in; 
	transition: all .35s ease-in;
}
.menu li:hover {
	background: #06F;
	width: 220px;
	
	-webkit-transition: all .35s ease-out;  
	-moz-transition: all .35s ease-out;  
	-o-transition: all .35s ease-out; 
	transition: all .35s ease-out;
}

Notese que hemos utilizado all como propiedad, lo cual indica que se debe hacer la transición sobre todos las propiedades del elemento. Pueden ver el ejemplo funcionando en CSS Transitions Demo.

Ahora solo queda a la creatividad para lograr efectos destacables, por ejemplo en Original Hover Effects with CSS3 pueden ver una lista de ejemplos muy vistosos de rollover utilizando CSS Transitions.

[download id=»60″ autop=»false»]

Mas Información

• CSS Transitions Module Level 3
• MDN: CSS transitions
• Safari CSS Visual Effects Guide: Automatic Animation

Este artículo ya se encuentra obsoleto.
Para una referencia actual leer: Incluir fuentes en CSS con @font-face

@font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados.

Sintaxis Básica

El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como «HelveticaNeueLight» para utilizarlo posteriormente.

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('fonts/helveticaneue_light.ttf') format("truetype");
    font-style: normal;
    font-weight: normal;
}

Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente.

h3 {
    font-family: 'HelveticaNeueLight';
    font-size: 18px;
    color: #F36;
}

Sintaxis Completa

Lamentablemente no todos los navegadores aceptan el mismo formato de archivo para las fuentes, por ello existe una sintaxis mas compleja la cual asegura mayor compatibilidad con los navegadores. En donde se requiere tener las fuentes en diferentes formatos: .eot, .woff, .ttf y .svg.

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('../fonts/helveticaneue_light.eot');
    src: url('../fonts/helveticaneue_light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue_light.woff') format('woff'),
         url('../fonts/helveticaneue_light.ttf') format('truetype'),
         url('../fonts/helveticaneue_light.svg#HelveticaNeueLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Como convertir las fuentes

Si no tenemos las fuentes en todos los formatos antes mencionados, existe un servicio gratuito @font-face Generator que permite hacer la conversión a todos los formatos necesarios para la máxima compatibilidad.

Seleccionan la fuente y esta devolverá un archivo zip que contiene las fuentes en los formatos necesarios así como el código CSS necesario para colocarlo en nuestra hoja de estilos.

Como obtener las fuentes

La mayoría de las fuentes tienes derechos de autor asi que no las podremos utilizar a menos que tengamos la licencia de uso. Pero también existen fuentes gratuitas, para descargar estas fuentes existen dos páginas con gran variedad de tipografías.

• Font Squirrel: FREE fonts for graphic designers
• Google Web Fonts

Para finalizar les dejo los archivos fuente con un ejemplo de uso de fuentes utilizando @font-face.

[download id=»59″ autop=»false»]

Mas Información

• The New Bulletproof @Font-Face Syntax
• @font-face Generator
• MDN: @font-face

Utilizando Google Analytics

El primer paso es utilizar el código de seguimiento en nuestra página, actualmente se utiliza la versión asincrona la cual se debe colocar justo antes de la etiqueta </head>

En donde UA-XXXXX-X es el código de seguimiento del sitio web el cual lo podemos obtener al registrar un sitio web en nuestra cuenta de Google Analytics.

Seguimiento de descargas con Google Analytics

Si en nuestra página tenemos archivos de descarga, en enlace de descarga es:

<a href="/files/map.pdf">map</a> 

Para que Google Analytics pueda registrar las descargas es necesario agregar una llamada al método _gaq.push en donde el segundo parámetro es un nombre con el cual se identificará la descarga.

<a href="/files/map.pdf" onClick="_gaq.push(&#91;'_trackPageview','/files/map.pdf'&#93;);">map</a> 

El código es muy sencillo y hay que colocarlo en cada enlace de descarga que se tenga.

Seguimiento de descargas con Google Analytics y Mootools

Si utilizas Mootools en tu página, entonces puedes utilizarlo para agregar el código de seguimiento de manera sencilla. Para ello a todos los enlaces de descarga le agregaremos un estilo llamado download.

<a href="/files/map.pdf" class="download">map</a> 

Luego podemos agregar el siguiente código con el cual se busca todos los enlaces con el estilo download y le agrega la llamada al método _gaq.push.

window.addEvent('load', function() {
   $$('.download').addEvent('click',function() {
      _gaq.push(['_trackPageview', this.get('href').replace('http://','')]);
   });
});

Seguimiento de descargas con Google Analytics y jQuery

Si utilizamos jQuery podríamos modificar el código anterior el cual se convertiría en:

$(document).ready(function () {
   $('a.download').click(function() {
      _gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
   });
});

Seguimiento de descargas automático

Si todas estas formas te parecen complicadas o ya tienes un sitio con muchas páginas y resulta complejo agregar el código de seguimiento, existe una solución llamada Entourage.js el cual agregará de forma automática el código de seguimiento a todos los enlaces que contengan archivos: .pdf, .zip, .doc, .xls, .ppt, .exe, .dmg, .mov, .avi y .mp3.

Para utilizar este método descargan los archivos y copian el archivo entourage.min.js y lo adjuntan a la página donde desean hacer el seguimiento, esto justo antes de colocar el código de Google Analytics.

<script src="js/entourage.min.js"></script>

Esta pequeña librería con un tamaño de solo 579 bytes y que nos facilita de manera muy sencilla el trabajo de hacer el seguimiento de descargas en nuestra página.

Mas Información

• Google Analytics: Tracking Site Activity
• Track File Downloads in Google Analytics Using MooTools
• Entourage.js – Automatic Download Tracking for Asynchronous Google Analytics

Las sesiones se manejan internamente por un identificador llamado SID (Session ID) el cual esta asociado a una única sesión y que ayuda a identificar el contenido de la sesión actual. Esta variable se propaga automaticamente a traves de Cookies o mediante URL.

Manejo de sesiones en PHP

Todas la variables de sesión son accesibles mediante arrays en la variable global $_SESSION. Adicionalmente ofrece una serie de funciones que permiten manejar detalladamente las sesiones de manera sencilla:

• session_start inicializa una sesión y crea el identificador de sesión.
• session_id devuelve el identificador de la sesión actual.
• session_regenerate_id genera un nuevo identificador para la sesión actual.
• session_unset limpia todas la variables de sesión registradas.
• session_destroy elimina todas la variables de sesión registradas.

Crear variables de Sesión

Si deseamos crear variables de sesión para que se puedan utilizar a través de diferentes páginas inicializamos el manejo de sesiones con al función session_start y luego guardamos el dato deseado como variable de sesión utilizando la variable global $_SESSION.

// home.php
session_start();
$_SESSION["country"] = "Peru";

Podríamos mejorar el código si verificamos la existencia de la variable de sesión, si no existe entonces le asignamos un valor.

// home.php
session_start();
if (!isset($_SESSION["country"])) {
	$_SESSION["country"] = "Peru";	
}

Recuperar variables de Sesión

En las páginas siguientes podríamos acceder a las variables de sesión utilizando:

// user.php
session_start();
echo $_SESSION["country"];

Podríamos utilizar las variables de sesión para verificar si se han hecho acciones previas por parte del usuario, como haber seleccionado tu país por ejemplo si aún no lo ha hecho lo redireccionamos a la página inicial.

// user.php
session_start();
if (!isset($_SESSION["country"])) {
	header("Location: home.php");	
}
echo $_SESSION["country"];

Eliminando datos de sesión

Si deseamos eliminar una determinada variable de sesión le asignamos un valor vacío.

// clear.php
session_start();
$_SESSION["country"] = "";

Ahora si deseamos eliminar todas las variables de sesión lo hacemos de la siguiente forma:

// clear.php
session_start();

session_unset();
session_destroy();

Depurando Sesiones

Si se desea depurar las variables de sesión con sus respectivos valores se puede utilizar la función print_r.

// debug.php
session_start();
print_r($_SESSION);

Para mas información acerca del manejo y de las funciones disponibles para el manejo de sesiones pueden leer PHP: Session Functions. Para concluir les dejo los archivos fuente de este artículo para que puedan hacer sus pruebas.

[download id=»58″ autop=»false»]