Acaba de ser anunciado en el blog de Google Social Web un nuevo módulo para Joomla (también para Drupal) que permite integrar fácilmente el sistema de web social de Google Friend Connect con Joomla. Aunque esto ya era posible antes mediante módulos de tipo “custom HTML”. Con este nuevo módulo, cada vez que alguien accede al sitio mediante Google Friend Connect usando el botón de Sign In, se crea una nueva cuenta en la base de datos de Joomla y se asocia a la cuenta de Google Friend Connect, después el usuario puede modificar sus datos de usuario mediante la interfaz nativa de Joomla y loguearse normalmente usando el sistema nativo de Joomla si así lo prefiere.
Esto es algo muy importante, ya que muchos administradores son reacios a usar este tipo de sistemas por que pierden información de sus usuarios que quieren aprovechar para realizar boletines, etc..

Otra característica que me ha llamado la atención es la posibilidad de usar AdSense integrado con Google Friend Connect, con lo que los bloques de publicidad no solo se mostrarían usando la información contextual del sitio web, sino también las preferencias del usuario que obtiene Google de su cuenta de usuario, algo que podría aumentar el CTR de la página.

El módulo implementa todos los gadgets disponibles para Google Friend Connect como:

• Social Bar
• Members
• Comentarios de página
• Ratings and Reviews
• Suscripción a newsletter
• Encuestas
• Contenido destacado
• Recomendaciones
• Adsense

Puedes ver las características del módulo en la Wiki del proyecto.

La instalación es muy sencilla, solamente hay que instalar el módulo que puedes descargar de la página de Google Code de joomla-friendconnect.

Después tienes que crear tantas instancias del módulo como gadgets quieras e indicar el tipo de gadget que quieres mostrar.

Ver manual de instalación.
Ver demo del sistema implementado en Joomla.

Artículos relacionados:

1. Tutorial para desarrollar componente con el API de Joomla 1.6 y Google Maps
2. Nueva API de Google: Google Contacts API
3. Estadísticas de eCommerce para VirtueMart con Google Analytics

El seguimiento de eventos en Google Analytics es una herramienta muy potente y útil. En esta ocasión la he implementado en el blog como prueba para llevar las estadísticas de los comentarios que se van recibiendo. La finalidad es curiosear con la herramienta, conocerla un poco más y comprobar el comportamiento de los lectores de nosolocodigo.

Para gestionar el control de eventos, he creado la categoría Blog, y la acción Comentario. El Label es la URL de la página donde se realiza el comentario, de esta forma, cuando vaya a contenido > Seguimiento de eventos, podré ordenar los resultados por número de comentarios por artículo.

Para implementarlo, he utilizado jQuery, aunque sería muy sencillo hacerlo con otra librería o incluso sin ninguna. Como utilizo WordPress, me he dirijído a los ficheros del theme, y he abierto el fichero comments.php, donde se encuentra el código necesario para enviar comentarios. Al abrirlo, me encuentro con algo como lo que se muestra a continuación.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">;

<?php if ( $user_ID ) : ?>
<p>
    Has ingresado como <a id="url" href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>.
    <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Salir de esta cuenta">Salir</a>
</p>

<?php else : ?>
<p>
    <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
    <label for="author"><small>Nombre <?php if ($req) echo "(Requerido)"; ?></small></label></p>
<p>
    <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
    <label for="email"><small>Email (No será publicado) <?php if ($req) echo "(requerido)"; ?></small></label>
</p>
<p>
    <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
    <label for="url"><small>Website o Blog</small></label>
</p>
<?php endif; ?>
<p>
    <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
</p>
<p>
    <input name="submit" type="submit" id="submit" tabindex="5" value="Enviar Comentario" />
    <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>

<?php do_action('comment_form', $post->ID); ?>
</form>

El input de tipo submit que se encuentra al final del formulario es el encargado de enviar la información del formulario al servidor. Para interceptar el evento click, introduzco el siguiente código de jQuery, que define un handler que avisa a Google Analytics para que se registre el evento. El código se muestra a continuación.

jQuery('#commentform input[type = submit]').click(function(){
      pageTracker._trackEvent('Blog' , 'Comentario' , document.location.pathname,document.getElementById('comment').value.length  );
});

Explicación:
El método _trackEvent admite 4 parámetros:

1. Nombre de la categoría.
2. Nombre de la acción.
3. Nombre de la etiqueta. El pathname de la URL.
4. Valor numérico del evento, en este caso el número de caracteres que contiene el comentario.

Con esto ya se empezarán a registrar todos los comentarios en Google Analytics. Ahora vamos a ver que datos obtenemos.

Cuando entramos a Google Analytics, vamos a Contenido > Seguimiento de eventos. Después pulsamos sobre Categorías y seleccionamos la categoría Blog. En la categoría Blog seleccionamos la acción Comentario, y se muestra algo como lo que se puede ver en la imagen.

Después, si quieres puedes definir un segmento avanzado para que se filtren las visitas que hayan hecho un comentario y poder realizar informes más precisos. Una vez realizado el segmento avanzado, si pulsas sobre Panel, se verá algo como lo siguiente.

Ahora, si vas a Usuarios, puedes obtener más información sobre los usuarios que comentan en tu blog. Los datos se empiezan a mostrar a partir del día 10 de Septiembre, como se puede ver en el gráfico, día en que puse el código de seguimiento.

Datos de los usuarios por ubicación

Datos de los usuarios por ubicación en España

Como curiosidad decir que el 100% de las personas que comentan aquí usa Firefox. El 86% usa Windows , el resto Linux.

Artículos relacionados:

1. Estadísticas de eCommerce para VirtueMart con Google Analytics
2. Seguimiento de eventos con el API de Google Analytics
3. Controla las imágenes rotas de tu web con jQuery y Google Analytics

Hay pocas cosas más feas que el icono que se muestra cada vez que se intenta cargar una imagen y por algún motivo no se encuentra. Este icono resulta muy feo, además de provocar en el usuario la sensación de que el sitio web está descuidado y con errores.
Una solución podría ser visitar todo el sitio en busca de imágenes no encontradas y arreglando el problema uno a uno, aunque no creo que tengas ganas de hacerlo, la verdad, sobre todo en sitio que tienen bastantes páginas.

Existe otra solución mucho más inteligente que pasa por usar Javascript y jQuery puede ayudarnos mucho en esta tarea.

Esta solución consiste en poner un pequeño código Javascript en la plantilla de tu web que nos avise cuando encuentre alguna imagen rota. Se supone que se tiene cargado el framework jQuery y el código de Google Analytics ga.js.

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).attr({
				src: 'http://www.nosolocodigo.com/imagen-rota.jpg',
				alt: 'Lo siento, imagen no disponible.',
				style:'border: 1px solid #000000;'
			});
		});
});

El código recorre todas las imágenes de la página y les asigna una función al evento error. El evento error se dispara cuando una imagen no se ha podido cargar por cualquier motivo, generalmente porque no se encuentra disponible en la ruta especificada. La función envía un evento a Google Analytics con la categoría Blog, acción Imagen_rota y una etiqueta con el atributo src, es decir, la imagen que no carga debidamente.

Después de reportar el evento a Google Analytics, se cambia la imagen por una imagen creada a nuestro gusto que indique al usuario que la imagen pedida no está disponible, de esta forma queda todo mucho más homogéneo y el usuario sabe que la imagen no se ha cargado. También se le añade un atributo alt y un estilo inline, esto último queda a gusto del consumidor. De esta forma el usuario no tiene que verse el horrible icono de la discordia cada vez que una imágen no se encuentre disponible.

Otra opción sería reportar a Google Analytics y eliminar la imagen para que no aparezca nada, en este caso el código a utilizar sería el siguiente:

1
2
3
4
5
6

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).remove();
		});
});

Una vez puesto esto solo falta esperar a recibir los informes de Google Analytics, ir a la sección Contenido > Seguimiento de Eventos y consultar la categoría Blog. Luego pinchar la acción Imagen_rota y aparecerá una lista de URLs con imágenes que por algún motivo no se han podido cargar.

Artículos relacionados:

1. Como llevar las estadísticas de los comentarios de tu blog con Google Analytics
2. Seguimiento de eventos con el API de Google Analytics
3. Carga lento Google analytics en tu web?

Google Analytics es uno de los mejores sistemas para llevar las estadísticas de un sitio web. Además de tener un panel de control muy completo, mediante el cual observar y medir las estadísticas de nuestra web, también tiene un API Javascript que permite llevar a cabo métricas más afinadas, como por ejemplo medir eventos de interfaz de usuario.El uso normal que se le da a Google Analytics una vez instalado, e ver las páginas vistas, las visitas, el navegador más utilizado del sitio, el porcentaje de rebote…Con el API de Google Analytics se puede ir un paso más allá y llevar la cuenta de eventos personalizados, lo que los de Google llaman seguimiento de eventos (event tracking). También se pude llevar la cuenta de los enlace salientes, es decir, cuales son las páginas externas de tu sitio que la gente más visita, llevar la cuenta de eventos de usuario, como darle al play en un video, pasar las diapositivas de un slideshow, etc… Otro uso interesante que se le puede dar a Google Analytics es, por qué no, llevar las estadísticas de las excepciones lanzadas por Javascript en tu sitio web, es decir, usar Google Analitycs como herramienta de reporte de errores de tu aplicación Javascript.

El seguimiento de eventos se introdujo con el fichero ga.js. Hasta entonces, para seguir eventos de usuario había que crear URLs virtuales, luego se contaban las visitas de esa URLs y se podía saber cuantas veces se había efectuado el evento. El problema es que con esta forma de manejar los eventos, al número de visitas se le sumaba el número de eventos, por lo que pierdes veracidad en el análisis del sitio al inflarse las estadísticas. Por lo tanto es mejor usar eventos.

Implementación con Javascript

En todo momento se supone que se ha cargado la librería ga.js que proporciona Google Analytics para llevar el seguimiento, como se muestra a continuación.

1
2
3
4
5
6
7
8
9
10

 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
var pageTracker = _gat._getTracker("TuClaveDeAnalytics");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Imagina que quieres llevar un control del número de personas que pincha sobre el icono RSS del blog y del número de personas que se suscribe al RSS por email mediante el formulario de FeedBurner.
Para ello se puede crear la categoría RSS, y la acción “click” para cuando se haga click, y submit para cuando se envíe un formulario. Las etiquetas sirven para diferenciar las acciones, por ejemplo si tengo 3 iconos diferentes de RSS, puedo ponerle a cada uno la categoría “RSS”, acción “click”, pero cambiarles las etiquetas, y ponerle (por ejemplo) a uno “icono_grande”, “icono_footer” e “icono_barra_lateral”. De esta forma se pueden diferenciar claramente en que icono se ha hecho click, y saber que icono es el que llama más la atención a los usuarios.

Número de gente que pincha sobre el enlace del Feed/Twitter

1
2
3
4
5
6
7
8
9
10
11
12

 
Icono de RSS que enlaza a mi feed
<a href="http://feeds.feedburner.com/nosolocodigo" id="enlace_feed">
	<img src="icono_rss.jpg" />
</a>
 
 
Formulario de envío del email
<form  id="suscribete_email">
<input type="text" >
<input type="submit" value="Enviar" id="enviar_email" />
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13

 
/* Sintaxis:  pageTracker._trackEvent('Categoría', 'acción', 'etiqueta');" */
 
/* Código que realizará el seguimiento */
/*Se presupone que se ha cargao la librería y las llamadas se están realizando en el evento ready*/
 
$('#enlace_feed').click(function(){
      pageTracker._trackEvent('RSS', 'click', 'Icono');
});
 
$('# enviar_email ').click(function(){
      pageTracker._trackEvent('RSS', 'submit', 'formulario de envío');
});

Una vez Google reciba los datos, accede a tu panel de control, en la sección Contenido > Seguimiento de eventos.

Seguimiento de enlaces salientes

Puede resultar muy útil saber a que sitios se quieren dirigir nuestros usuarios. Si el enlace en el que pinchan es interno, Analytics nos lo dirá, por que la página de destino lleva el código de seguimiento y lo registra. Pero si el enlace es de un dominio que no manejamos nosotros Analytics no lo puede saber. Para averiguarlo podemos generar un evento cada vez se haga click en cualquier enlace que no sea de nuestro dominio, y enviar la URL de destino como etiqueta del evento. Mira el ejemplo y verás.

Mootools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

window.addEvent('load', function() {
   if(pageTracker) {
	$$('a[href^=http]').each(function(el) {
 
		if(!el.get("href").match('^http://nosolocodigo.com') || !el.get("href").match('^http://www.nosolocodigo.com')){
 
			el.addEvent('click',function() {
				var destino =  el.get('href').replace('http://','');
                                        pageTracker._trackEvent('External', 'Click', destino );  
			}.bind(this));
 
		}
	});
   }
});

jQuery

1
2
3
4
5
6
7
8
9

$('a').each(function(){  
       var href = $(this).attr('href');  
 
       if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){  
              $(this).click(function() {  
                  var destino = href.replace(/^https?\:\/\//i, '');  
                  pageTracker._trackEvent('External', 'Click', destino );  
              });  
       }

Tiempo de carga de la página

Un dato interesante es el tiempo que tarda en cargar la página de media a nuestros usuarios, de esta forma podemos saber si tenemos que optimizar la velocidad o no. Google Analytics no informa de este dato, pero se puede generar un evento que envíe el tiempo que tarda en cargar la página, y luego ver cual es la velocidad media con la que se carga nuestra web. Una aproximación muy buena es la que hacen en panalysis. Para calcular el tiempo que tarda en cargar la página (aproximadamente) hay que poner este código en el head.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
var inicio = new Date;
 
function trackPageLoadTime()
{
	var fin = new Date;
 
	mlsegundos = fin.getTime() - inicio.getTime();
        valoracion = "";
        if(mlsegundos  < 2000){
            valoracion = "Muy Rapido";
        }else if(mlsegundos  < 5000){
            valoracion = "Rapido";
        }else if(mlsegundos  < 10000){
           valoracion = "Medio-Lento";
        }else if(mlsegundos  < 30000){
                 valoracion = "Lento";
        }else{
                valoracion = "Catastrofe";
        }
	pageTracker._trackEvent("Page load time" , valoracion , document.location.pathname ,  Math.round(mlsegundos /1000));
 
}
window.onload = trackPageLoadTime;

Si te fijas, ahora utilizamos un cuarto parametro. Este parametro es el valor, y ha de ser un entero. Por tanto al final queda de la siguiente manera: Categoría->Page load time, Acción-> valoracion (Rapido, muy rapido…), Etiqueta-> path, Valor->Tiempo en segundos.

Más ocurrencias

Haciendo un uso inteligente de los bloques try/catch/finally podemos saber si nuestros usuarios tienen errores en la aplicación o no. Puede resultar útil para depurar aplicaciones que ya están en marcha, obteniendo datos estadísticos bastante jugosos, como por ejemplo, haciendo uso de los segmentos avanzados podemos saber que navegador genera más errores, que sistema operativo, si las conexiones lentas son más propicias a errores que las rápidas, si la tasa de errores es muy elevada…En fin, mucha información. Implementarlo es muy simple, mira este pequeño ejemplo.

1
2
3
4
5
6
7

try{
   	//Codigo javascript
 
}catch(err){
 
 	pageTracker._trackEvent(DEBUG, excepciones, err.description);
 }

Otro posible uso sería en formularios. En el evento click del botón de envío, al hacer las validaciones, puedes llevar un log y ver cuantas veces el usuario se está equivocando al rellenarlo. De esta forma puedes obtener datos y saber si el formulario es usable o no.

Otros usos interesantes del API de Google Analytics

• Páginas AJAX incrustadas. Páginas que se van recargando asíncronamente, como Tuenti o Facebook, no podrían llevar la cuenta de visitas si no fuera por estas características. En este caso sería mejor usar el evento trackPageView(“/URL”)
• Descarga de ficheros. Contabilizar cuantas veces se descarga un fichero. Se pueden utilizar etiquetas para diferenciar entre ficheros. Una buena catalogación sería: Categoría-> Ficheros, Acción->PDF/ZIP/RAR/DOC…, Etiqueta->Nombre del fichero. Utilizar un sistema de nombrado coherente es esencial.
• Llevar un control estadístico de los comentarios que te hacen en el blog. Generando un evento cada vez que alguien envíe un comentario podemos sacar muy buen información, como a que horas se comenta más, que perfil de gente comenta más; los usuarios recurrentes o los nuevos, en que países te comentan más… se me hace la boca agua…). Una buena catalogación sería: Categoría-> Blog, Acción->Comentario, Etiqueta->URL_articulo/nombre_usuario.

Creo que con estos ejemplos queda clara la potencia de los eventos de Google Analytics, que si encima lo combinamos con los nuevos frameworks Javascript, como jQuery o Mootools, te permite hacer cosas, que años atrás hubieran resultado imposibles. Próximamente más tips de Google Analytics.

Artículos relacionados:

1. Como llevar las estadísticas de los comentarios de tu blog con Google Analytics
2. Controla las imágenes rotas de tu web con jQuery y Google Analytics
3. Chuleta de Google Analytics en PDF

Hoy he necesitado cargar un RSS externo desde una web, y había que hacerlo con Javascript. El problema es que desde Javascript solo se puede hacer peticiones asíncronas a URL’s de tu propio dominio, debido a restricciones de seguridad.

El otro día estuve viendo cómo cargar los frameworks más famosos y las API’s de Google desde el CDN de Google. Google también permite cargar sus API’s AJAX mediante este método, y entre estas API’s se encuentra el API AJAX de Google para feeds, que permite cargar cualquier RSS de cualquier dominio haciendo uso solamente de Javascript, eliminando la necesidad de crear un proxy en el servidor, ya que Google lo crea por ti. Las ventajas están bastante claras:

1. Menos lógica en el servidor.
2. Menos sobrecarga en el servidor
3. Las ventajas de usar un CDN externo para cargarJavascript.

La dirección del feed RSS que voy a utilizar es la de mi cuenta de Twitter. Para obtener la dirección solamente hay que abrir el enlace que proporciona Twitter en su página web.

Usando el objeto FeedControl

El objeto FeedControl, permite añadir todos los feeds que quieras mediante le método addFeed y luego, mediante el método draw, inyecta el contenido de estos en el elemento DOM especificado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2");
	google.load("feeds", "1");
 
	function inicio() {
		var feedControl = new google.feeds.FeedControl();
                feedControl.addFeed("http://twitter.com/statuses/user_timeline/29672915.rss", "Twitter");
                feedControl.draw(document.getElementById("contenedor"));
	}
	google.setOnLoadCallback(inicio);
 
 
</script>

El código HTML se muestra a continuación:

1
2
3

   <body>
         <div id="contenedor" > </div>
   </body>

En el div identificado con la palabra “contenedor” se cargará automáticamente el contenido del Feed. En la imagen se puede observar el resultado.

Luego, viendo el código HTML generado mediante un inspector HTML como Firebug o el que trae IE 8, se puede crear un código CSS para cambiarle la apariencia. Este método es muy cómodo, pero si se necesita más control sobre el código generado se puede utilizar el objeto Feed, que proporciona más control.

Usando el objeto Feed

El objeto Feed permite cargar el documento XML que compone el Feed y tratarlo como un objeto JSON (comportamiento por defecto). Después se itera sobre el objeto JSON y se inyecta directamente sobre el DOM de la página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
 
function inicio() {
        var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/29672915.rss");
	feed.setNumEntries(3); //Por defecto son 4
		feed.load(function(result) {
			if (!result.error) {
				var contenedor = document.getElementById("contenedor");
				var tmpStr = "";
				tmpStr += "<h2> <a href='"+result.feed.link+"'> " + result.feed.title + "</a></h2>";
				contenedor.innerHTML +=  tmpStr;
 
				for (var i = 0; i < result.feed.entries.length; i++) {
					var entry = result.feed.entries[i];
					var tmpStr = "";
					tmpStr += "<div class='entrada'> ";
					tmpStr += "<img src='twitter.png' alt='Icono de Twitter' class='icono' /> ";
					tmpStr += "<div class='contenido'><a href='"+entry.link+"'>"+ entry.contentSnippet + "</a></div>";
					var fecha = entry.publishedDate.split(" ");
					tmpStr += "<div class='fecha'> " + fecha[1]+ " " +fecha[2]+" " + fecha[3]+ " "+ fecha[4]+"</div>";
					tmpStr += "</div> ";
					contenedor.innerHTML +=  tmpStr;
				}
 
			}
		});
}
 
google.setOnLoadCallback(inicio);
 
</script>

Breve explicación del código:

1. En el constructor del objeto Feed se pasa como parámetro la URL del feed RSS.
2. El método setNumEntries establece el número de items descargados del feed.
3. El método load carga el feed en la variable result.
4. result.feed.entries es un array de objetos con la información de cada item del feed. Se itera sobre este array y se va inyectando la información de los feed en el DOM.

El código HTML es el mismo que el usado en el primer ejemplo. Luego con un poco de CSS se le da un poco de apariencia al widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
*{
margin:0;
padding:0;
}
#contenedor{
	width:280px;
	padding-left:15px;;
}
#contenedor h2 a{
	color:#FF4D07;
	font-size:20px;
	font-family:"Trebuchet MS";
	text-decoration:none;
}
div.entrada{
	margin:10px;
 
}
div.entrada img.icono{
	float:left;
	margin-right:15px;
}
div.contenido a{
	color:#09399F;
	text-decoration:none;
}
div.fecha{
	font-family:"Trebuchet MS";
	font-size:12px;
	color: #7F7F7F;
}

El resultado final es este:

Conclusión

La potencia de esta API está bastante clara, nos proporciona una forma rápida y cómoda de acceder a los feeds RSS de cualquier parte. Teniendo en cuenta que ahora hay muchos servicios como redes sociales, etc… que proporcionan esta información mediante RSS, nos abre un abanico de posibilidades a la hora de mejorar nuestros diseños añadiendo información en tiempo real sobre, por ejemplo, nuestros últimos tweets.

Enlaces relevantes

• Ver Ejemplo en funcionamiento
• Cargar frameworks y API’s Javascript desde el CDN de Google
• Sitio oficial del API AJAX de Google para feeds

Artículos relacionados:

1. Seguimiento de eventos con el API de Google Analytics
2. Como cargar tu framework Javascript más rápido usando el CDN de Google
3. Tutorial para desarrollar componente con el API de Joomla 1.6 y Google Maps

El API de bibliotecas AJAX de Google es una red de distribución de contenidos (CDN) creada por Google, que ofrece un servicio para que los desarrolladores web puedan cargar los frameworks Javascript más populares desde ella, evitando así la necesidad de alojar los ficheros Javascript en el servidor de la aplicación.

Últimamente he hecho bastante uso de este CDN de Google, por lo que me he decidido a escribir este post donde expongo las ventajas que he encontrado de usar este servicio de Google y también las posibles desventajas.

Ventajas

• Velocidad de transmisión. Google tiene montada una infraestructura descomunal y seguramente tenga mayor velocidad de transmisión en sus conexiones que tu servidor.
• Latencia. Google aloja las librerías en varios servidores distribuidos por todo el mundo, por lo tanto, cada usuario descargará la librería desde el sitio más cercano posible, disminuyendo así la latencia introducida por los routers en cada salto. Tu seguramente solo tengas un servidor, por lo tanto si un usuario de Argentina quiere bajarse el fichero desde España, la latencia aumentará.
• Paralelismo. Al alojarse el fichero en otro dominio, el navegador web puede descargarlo paralelamente junto con los ficheros de tu aplicación (hojas de estilo etc..). Normalmente los navegadores tienen un número máximo de descargas paralelas para un mismo dominio, y una vez llegado al tope hay que esperar. Este hecho ralentiza la descarga de la página. Usando el CDN de Google, se evita aumentar la cola de descargas para el dominio de tu aplicación.
• Caché. Este CDN es usado por muchas aplicaciones online, por tanto es muy probable que un usuario que llegué a tu sitio web ya tenga el framework Javascript alojado en la caché si previamente a usado otra aplicación que implemente el API de bibliotecas AJAX de Google. De esta forma la velocidad se incrementa drásticamente por que ni siquiera hay necesidad de bajarse el fichero.
• Comodidad. Aunque parezca una tontería, a mi me resulta mucho más cómodo añadir una línea de código y disponer del framework en cuestión, que tener que bajarmelo del sitio oficial, moverlo al directorio de scripts (o subirlo al servidor por FTP) y referenciarlo. (Soy un poco vago, lo sé)

Desventajas

• Google también es humano (¿Es esto es una desventaja?)
• ¿Alguna más?

Para implementarlo se pueden usar dos métodos:

1. Cargar el framework Javascript usando el método load del API de bibliotecas AJAX
2. Cargar el framework directamente desde la URL proporcionada por Google

Cargar el framework usando el API de bibliotecas AJAX

Este método es más potente por que permite cargar el framework en el momento necesario, ya que es posible que no siempre sea necesario cargar todo un framework Javascript al inicio de la página. Su ventaja principal es que se puede cargar el framework programáticamente.

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 /*
Se puede especificar solamente la rama, por ejemplo:
  google.load("jquery", "1.3");
cargaría la última versión de la rama 1.3, es decir, la 1.3.2
y 
   google.load("jquery", "1");
cargaría la última versión de la rama 1, es decir la 1.3.2
 
*/
  google.load("jquery", "1.3.2");
 
  google.setOnLoadCallback(function() {
       // Utilizar este método en lugar del metodo ready del framework
  });
</script>

Cargar el framework desde la URL de Google

Este método es más sencillo, aunque menos potente. De esta forma se carga siempre el framework al inicio.

1
2
3
4
5
6

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
        // Utilizar el método ready del framework cargado
  });
</script>

Si se va a hacer uso obligatorio del framework en cuestión, yo utilizaría el segundo método, ya que evita descargarse el fichero “jsapi” y quita complejidad.

Conclusión

El API de bibliotecas AJAX de Google es otro gran servicio ofrecido por Google, que permite cargar Frameworks de Javascript de una manera más rápida, cómoda y eficiente. Las ventajas superan con creces las desventajas (si es que las tiene), por lo tanto, recomiendo totalmente su uso, tanto en desarrollo como en producción.

Enlaces relevantes

• Post de Anieto2k muy bien explicado
• Documentación oficial
• Documentación oficial para cargar las APIs de Google

Artículos relacionados:

1. Como crear un widget de Twitter con Javascript y el API AJAX de Google para feeds
2. Controla las imágenes rotas de tu web con jQuery y Google Analytics
3. Como llevar las estadísticas de los comentarios de tu blog con Google Analytics

Google ha sacado su nueva API para administrar contactos, con esta Api se posibilita a los programadores acceder a la lista de contactos de Google, que es compartida entre Gmail, Google Calendar y Google Reader entre otras…

Si te apetece trastear con ella, échale un ojo a la guía para desarrolladores y a la referencia

En el blog de Dirson ya han hecho un primer ejemplo usando el API.

Otra nueva API interesante que nos ofrece Google y que habrá que aprender…

Artículos relacionados:

1. Tutorial para desarrollar componente con el API de Joomla 1.6 y Google Maps
2. Google publica Google AJAX Translation API
3. Como crear un widget de Twitter con Javascript y el API AJAX de Google para feeds