Skip to Content »

Google AJAX Libraries API

  • 27/05/2008
  • 10:59 pm
  • unijimpe

Google AJAX Libraries API es un nuevo servicio mediante el cual Google aprovechando de su gran infraestructura alojará las principales Frameworks Javascript para enlazarlos directamente. Con ello podremos acelerar la carga de nuestras librerías y por consiguiente una mejor velocidad de nuestras web.

Este servicio, tienes varias cualidades muy importantes:

  • Uso del Cache del Browser: Si un usuario visita una Web, descargará la librería desde Google. Si posteriormente entra a otra web que utiliza la misma librería, esta ya no se descargará nuevamente si no se utilizará la copia en el cache de navegador.
  • Compresión Gzip: se encuentran habilitadas las transferencia de datos comprimidas en Gzip con lo cual hay menor transferencia de datos.
  • Versiones minificadas: al llamar a una librería, se hará uso de las versiones minificadas, es decir donde se han eliminado los comentarios, saltos de linea, espacios en blanco innecesarios y reemplazado nombres de variables por otras mas cortas. Esto también acelera la carga del archivo.
  • Archivos distribuidos por en CDN de Google: se utiliza toda la infraestructura de Google, por lo cual el archivo se puede obtener de cualquiera de lo muchos servidores alrededor del mundo con los que cuenta Google.
  • Optimización de Header: se utilizaran headers innecesarios y tampoco se guardaran cookies lo cual es un ahorra de bytes.

Inicialmente se han puesto a disposición las librerías mas populares, pero se planea ir aumentando estas a medida que los usuarios lo soliciten. Las librerías disponibles actualmente son: jQuery, prototype, script.aculo.us, MooTools, dojo.

Como Utilizarlo
La forma mas sencilla de utilizar este servicio es enlazar directamente a los archivos utilizando el tag script como se hace normalmente, por ejemplo si deseamos cargar MooTools.

  1. <!-- versión minificada -->
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
  3. <!-- versión normal -->
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>

Para mayor información acerca de este servicio pueden leer la documentación en Developer's Guide, también pueden leer una explicación mas detallada del modo de uso en Google Ajax Libraries API, ajax sobre la arquitectura Google y finalmente les dejo un video con la presentación y explicación del funcionamiento de esta librería.

Cargando Flash

Posts Relacionados

Como utilizar Gravatar

  • 17/05/2008
  • 10:30 pm
  • unijimpe

Gravatar, es un servicio que brinda la posibilidad de mostrar un avatar (Avatar es la representación gráfica mediante un dibujo o fotografía de una persona para su identificación) asociado a nuestro e-mail.

Como funciona?
Los usuarios deben registrarse en Gravatar en donde podrán subir una imagen la cual desean asociar a una dirección e-mail, luego cada vez que registren este email, el sitio web hará una llamada a Gravatar para solicitar el avatar asociado a la cuenta e-mail, si existe se mostrará la imagen y de lo contrario mostrará una imagen por defecto.

Existe documentación detallada de como integrar Gravatar con nuestro sitio web en Gravatar implementor's guide, esto de acuerdo al lenguaje de programación o gestor de contenido que utilizamos.

Utilizar Gravatar con PHP
Como primer ejemplo veremos el colocarlo en cualquier página web utilizando PHP, ello se hace llamando a una imagen desde Gravatar, solo nos hace falta construir el URL apropiado al cual debemos acceder, esto lo hacemos de la siguiente forma:

  1. $grvMail = "username@domain.com"; // email que deseamos consultar
  2. $grvInit = "spacer.gif"; // imagen si no existe avatar
  3. $grvSize = 40; // tamaño del avatar
  4.  
  5. $grvHttp = "http://www.gravatar.com/avatar.php";
  6. $grvHttp.= "?gravatar_id=".md5($grvMail);
  7. $grvHttp.= "&default=".urlencode($grvInit);
  8. $grvHttp.= "&size=".$grvSize;

Luego de ello mostramos la imagen basado en el URL recién construido, esto lo hacemos de la forma:

  1. <img src="<?php echo $grvHttp; ?>" alt="User Gravatar">

WordPress Gravatar Plugin
wp-gravatar es un plugin para Wordpress que permite la integración automática con Gravatar de forma sencilla y rápida. Primero descargamos wp_gravatar.zip, extraemos los archivos y lo subimos a la carpeta de plugins (wp-content/plugins/), luego de ello activamos el plugin.

El siguiente paso es editar el archivo comments.php de nuestro template el donde insertamos el siguiente código en el lugar donde deseamos que se muestre el avatar.

  1. <img src="<?php gravatar(); ?>" alt="" />

Esto mostrará la imagen en su tamaño original de 80x80 pixels, si deseamos colocarlo en otras dimensiones, por ejemplo a 40x40 pixels podemos hacerlo de la siguiente forma:

  1. <img src="<?php gravatar("R", 40); ?>" alt="" />

Como pueden observar es muy sencillo de implementar y le dará una apariencia personalizada a nuestros comentarios, de esta forma podemos hacer nuestro web mas interactivo con nuestros visitantes.

Posts Relacionados

Nuevo código Google Analytics

  • 18/12/2007
  • 12:04 am
  • unijimpe

Google Analytics el popular servicio para registrar y reportear visitas a páginas webs se renueva y ahora nos presenta un nuevo código para hacer el seguimiento de las visitas. Esta nueva versión es mucho mas rápida y pequeña con lo cual se logra rapidez en el seguimiento de visitas

ga.gif

Características
Esta nueva versión es un cambio sustancial y nos trae las siguientes características:

  • Archivo mas pequeño y rápido
  • Fácil de utilizar y entender
  • Detección automática de HTTPS
  • Mayor seguridad de los nombres de espacio
  • Facilidad de personalizar el código de acuerdo a tus necesidades.
  • Conveniente para hacer seguimiento de e-commerce y cross-domain.

Hay que notar que el código actual va a seguir funcionando todavía, pero es recomendables cambiar el código para acelerar el seguimiento de visitas.

Implementando el Nuevo Código
El código de seguimiento de Google Analytics es un código Javascript que se coloca típicamente antes de cerrar el html que se desea analizar. Actualmente el código hace el llamado a un archivo de nombre urchin.js como el que se muestra a continuación, en donde UA-XXXXX-N el código de seguimiento del web.

  1. <script src="http://www.google-analytics.com/urchin.js"
  2. type="text/javascript"></script>
  3. <script type="text/javascript">
  4. _uacct = "UA-XXXXX-N";
  5. urchinTracker();
  6. </script>

Ahora el nuevo código va a llamar al archivo gs.js el cual es un nuevo script optimizado y con nuevas carácterisiticas. La nueva forma de escribir el código es de la forma:

  1. <script type="text/javascript">
  2. var gaJsHost = (("https:" == document.location.protocol)
  3. ? "https://ssl." : "http://www.");
  4. document.write("\<script src='" + gaJsHost +
  5. "google-analytics.com/ga.js' type='text/javascript'>\<\/script>")
  6. </script>
  7. <script type="text/javascript">
  8. var pageTracker = _gat._getTracker("UA-XXXXX-N");
  9. pageTracker._initData();
  10. pageTracker._trackPageview();
  11. </script>

Quiza para algunos es un poco mas complejo el código pero es mucho mas eficiente y autodetecta si se esta trabajando sobre protocolo seguro.

Seguimiento de descargas
Anteriormente para hacer el seguimiento de descargas se utilizaba la función urchinTracker de la forma:

  1. <a href="mydoc.pdf"
  2. onclick="urchinTracker('/mydoc.pdf');">Save PDF</a>

Desde ahora la función para el seguimiento de acciones es _trackPageview y lo podemos implementar de la forma:

  1. <a href="mydoc.pdf"
  2. onclick="pageTracker._trackPageview('/mydoc.pdf');">Save PDF</a>

Como pueden observar son cambios menores el código pero que van a acelerar en gran manera el seguimiento de visitas, acelerando de esta forma el acceso a nuestras páginas.

Si desean conocer mas detalles de las nuevas funciones e instrucciones disponibles se ha puesto disponible un documento PDF llamado Tracking Code Migration Guide Switching from urchin.js to ga.js con una guia detallada de como migrar al nuevo código.

Posts Relacionados