Como cargar tu framework Javascript más rápido usando el CDN de Google

APIs, Javascript

David | 21/08/2009

API de bibliotecas AJAx de Google

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

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


Inspiración: 10 diseños para Joomla elegantes y de alta calidad

En speckyboy han realizado una recopilación de diseños para themes de Joomla. Se trata de themes elegantes y de alta calidad, que pueden servirnos como fuente de inspiración. Lectura recomendable sobre todo para los que dicen que los themes de Joomla son feos y de baja calidad.
Por : David           comentarios 9

AnythingSlider: otro plugin de jQuery para crear sliders

Javascript, Recursos

David | 18/08/2009

jquery-slide-plugin

Ultimamente me estoy planteando incorporar un slider al blog, por lo que estoy viendo las diferentes opciones disponibles. Hoy he descubierto Anythingslider que es un plugin de jQuery para crear sliders elaborado por CSS-Tricks. Puede presentar cualquier tipo de contenido HTML en el contenedor de cada slide.

Modo de empleo

$('.anythingSlider').anythingSlider({
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});

Puede verse una demo en CSS-Tricks y también descargarse los ficheros de ejemplo.


Lectura recomendada: 10 trucos para escribir mejor código en jQuery

Vía twitter de Jesús Conde, descubro este artículo realmente útil con 10 trucos para escribir mejor código en jQuery. Lectura recomendada sin duda.
Por : David           Comentarios desactivados

Taller de Fernando Tellado de AyudaWordpress en la CampusParty

Wordpress

David | 7/08/2009

Estos días se ha realizado en Valencia, como todos los años, la CampusParty. Una de las Partys más grandes del mundo y que más gente reúne. En ella se han realizado numerosos talleres relacionados con el mundo de la informática y los ordenadores, entre ellos me han llamado la atención el taller de seguridad y redes, el de diseño de una plantilla en Wordpress, el de  desarrollo web con PHP y el taller AfterEffects CS4.

Concretamente la ponencia/taller de Fernando Tellado, de ayudawordpres.com,  me ha servido mucho, por que da una idea de cuáles son los plugins que hay ahora mismo pegando en Worpress y como los puedo usar en una instalación limpia. Gracias al video me he instalado el BackWPup, que no lo conocía y ahora tengo respaldos diarios de mi blog, :)

Muy buena presentación Fernando, os dejo con el video.


Chuleta de Blogger en Blogandweb

General, Recursos

David | 6/08/2009

Blogger-Cheat-Sheet

Blogger es la plataforma de blogging de Google. Tiene un sistema de plantillas muy personalizable que permite modificar la plantilla por completo, pudiendo usar el servicio de Google como alojamiento gratuito (y de alta disponibilidad) y utilizar un diseño 100% personalizado para nuetsro negocio, blog personal, etc.

En Blog and Web han realizado un cheatsheet sobre la creación de plantillas para blogger. Se encuentra en formato pdf y png (1,2). Muy útil a la hora de crear las plantillas.


Instalación de Joomla en un servidor de desarrollo

Joomla

Ranomo | 6/08/2009

Dashboard de Joomla!

En la entrega anterior vimos cómo instalar XAMPP en Windows, paquete que contiene todos los servicios necesarios para que funcione Joomla. Ya ha llegado pues el momento de proceder a la instalación del CMS.

Paso 1: Enviar Joomla a nuestro servidor local

Para conseguir la versión más reciente de Joomla podemos dirigirnos a la página de Joomla Spanish. Veremos como se nos ofrece en distintas extensiones, nosotros hemos bajado a nuestro ordenador la versión 1.5.14 en formato zip.

Ya hemos comentado anteriormente que  la raíz del servidor Apache se encuentra en C:\xampp\htdocs. Dado que podemos efectuar más de una instalación web, y para mayor claridad en la gestión de las mismas, crearemos una subcarpeta en la raíz llamada, por ejemplo, sitio01. La ruta será pues, C:\xampp\htdocs\sitio01 y su URL http://localhost/sitio01/.

En la carpeta que hemos nombrado sitio01 descomprimiremos el contenido de nuestro zip, de tal forma que, al concluir el proceso, habremos enviado todos los ficheros de Joomla a nuestro servidor local.

Por último, si no lo hemos hecho ya, arrancaremos el panel de control de XAMPP y verificaremos que se encuentran activos los módulos correspondientes a MySql y Apache. Seguir leyendo..


Lectura recomendada: 10 errores comunes en diseño web

En Kabytes han hecho un repaso de algunos de los errores más comunes que se suelen realizar a la hora de crear un sitio web. Muchas veces necesitamos una lista de este tipo para darnos cuenta de los errores que comentemos.
Por : David           Comentarios desactivados