Contenido

FireQuery, jQuery con Firebug con cualquier página

31 oct

+ 3

Jose Dueñas publica en Twitter una interesante aplicación que nos permite disponer de jQuery en cualquier página con Firebug.

jQueryfy
(Ver Imagen)

De esta forma tienes a tu disposición todas las facilidades que jQuery en cualquier página que este editando. Ideal para depurar las aplicaciones que no podemos editar directamente.

Versión sin plugin

Básicamente podemos conseguir lo mismo sin necesidad de usar ningún plugin ejecutando un pequeño script desde Firebug.

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(s);

De esta forma, usaremos Google Ajax Libraries para cargar jQuery desde los servidores de Google.

Firefox 3.6 beta 1 disponible para descargar

31 oct

+ 4

Hoy Firefox 3.6 Beta 1 ha visto la luz, lo desarrolladores tenemos que frotarnos las manos ante de las novedades que esta nueva versión nos ofrece. Algunas de las que me han parecido más interesantes:

Y esto es solo para ir calentando ya que esta versión tiene alguna mejora y nueva funcionalidad realmente interesante que aunque no esté en esta beta, está previsto que esta versión estable las incorpore:

Tenemos que ser pacientes y no perdernos nada. :D

Spotify libera su API

31 oct

+ 7

Spotify, el servicio de música online pone a nuestra disposición su API pública con la que podremos realizar consultas sobre canciones/artístas/grupos/… La API, basada en peticiones HTTP nos retornará un XML que podremos usar para lanzar canciones contra la aplicación Spotify del usuario.[Demo]

Mu Connect, librería Javascript para conectar con Facebook

31 oct

+ 4

Mu Connect es una librería JS que nos facilitará la tarea de conectar con Facebook desde nuestras aplicaciones. Al tratarse de una librería en Javascript nos permite visualizar esta conexión como una capa superior a nuestra aplicación ofreciéndola como un extra más y hacer que nuestra aplicación no dependa de ella.

<div id="fb-root"></div>
 <script src="http://mu.daaku.org/m.js"></script>
 <script>
 // Inicializamos la librería con la API de nuestra Aplicación
 FB.init({ apiKey: '48f06bc570aaf9ed454699ec4fe416df' });

 // Controlamos el login al acceder
 FB.loginStatus(handleSessionResponse);

 // Activamos login
 $('#login').bind('click', function() {
 FB.login(handleSessionResponse);
 });

 // Activamos logout
 $('#logout').bind('click', function() {
 FB.logout(handleSessionResponse);
 });

 // Activamos disconnect
 $('#disconnect').bind('click', function() {
 FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
 clearDisplay();
 });
 });

 function clearDisplay() {
 $('#user-info').hide('fast');
 }

 // Gestionamos el login
 function handleSessionResponse(response) {
 if (!response.session) {
 clearDisplay();
 return;
 }

 // Preparamos la petición FQL
 FB.api(
 {
 method: 'fql.query',
 query: 'SELECT name, pic FROM profile WHERE id=' + FB.getSession().uid
 },
 function(response) {
 var user = response[0];
 $('#user-info').html('<img src="' + user.pic + '">' + user.name).show('fast');
 }
 );
 }
 </script>

En la página nos encontramos con una serie de ejemplos de como usar esta librería con cualquier Framework JS, algo de agradecer y que nos permite integrarla en cualquier aplicación web. Además dispone de una API bien documentada que permite hacer una integración muy completa en unas pocas horas.

FQL

El FQL (Facebook Query Language) es la versión del SQL que Facebook permite usar para realizar consultas una serie de tablas que Facebook ofrece a los desarrolladores de sus bases de datos. Gracias a estas peticiones es posible obtener casi cualquier dato de los usuarios de Facebook con el fin de integrarlos en nuestra aplicación.

FB.api()

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM profile WHERE id=' + FB.getSession().uid
  },
  function(response) {
    alert(response[0].name);
  }
);

Quizás de todas las funciones que vemos en la API de Mu Connect, esta es la más interesante ya que está pensada para atacar a Facebook mediante FQL y nos procesa la respuesta mediante un callback que nos permitirá trabajar cómodamente con ella.

ZeroClipboard: Copia al portapapeles desde Javascript

29 oct

+ 8

David Walsh publicó hace unos días una implementación del método con flash para poder interactuar con el portapapeles desde nuestro Javascript.

// HTML
<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
 The David Walsh Blog is the best blog around!  MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>

// Javascript

 ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
 // Creamos el cliente
 var clip = new ZeroClipboard.Client();

 // Eventos
 clip.addEventListener('mousedown',function() {
 clip.setText(document.getElementById('box-content').value);
 });
 clip.addEventListener('complete',function(client,text) {
 alert('copied: ' + text);
 });

 clip.glue('copy');

Este sistema se basa en el uso de un pequeño componente SWF al que le puedes enviar un texto y este se encarga de alojarlo en el portapapeles para posteriormente usarlo con cualquier aplicación.

David pone a nuestra disposición el script en un proyecto de Google Code para que podamos integrarlo fácilmente en nuestros proyectos.

70 de los mejores theme para WordPress

28 oct

+ 6

Trazos web publica una recopilación de los mejores themes para nuestros WordPress. Entre estos 70 themes encontrarás calidad gratuita para cualquier proyecto que tengas en mente.

WordPress 2.9 permite la actaulización de plugins a la vez

28 oct

+ 5

La nueva versión de WordPress, nos permitirá actualizar varios plugins a la vez. Al igual que ahora podemos actualizar los plugins que dispongan de una versión actual, dispondremos de la posibilidad de seleccionar N plugins y actualizarlos a la vez. Se agradece con la cantidad de actualizaciones que tenemos que tener en cuenta.

Acelerándo la carga de Javascript con eval()

28 oct

+ 16

En el blog de SproutCore publican un interesante artículo sobre como mejorar el tiempo de carga de nuestras páginas al usando eval(). Es por todos conocidos las anomalías con las que nos encontramos al usar esta función del lenguaje,  pero en algunos casos, puede ayudarnos a mejorar la carga de nuestras páginas.

Okito, nos comenta que la inspiración le llegó al revisar como Gmail gestionaba el Javascript de la página en su versión móvil, usándo un sistema de carga asíncrona que posteriormete es parseada con regexp y evaluada con eval().

En la versión 1.0 de SproutCore han implementado esta técnica y presume una mejora de 8 segundos en una aplicación de prueba sobre Internet Explorer.

El problema

El problema radica en que las aplicaciones muy ricas en Javascript suelen ser muy pesadas para el procesador y el navegador, despues de descargar el JS, parsear el script lo ha de evaluar (internamente) para poner a nuestra disposición todas las funcionalidades que hayamos desarrollado, en este último punto es donde más se penaliza la ejecución de JS (hasta un 80% del tiempo de carga total).

La propuesta

Para solventar el problema, nos propone cargar el Javascript de una forma diferente, en lugar de código usar comentarios. Osea, hacer que todo el código Javascript sea un gran comentario.

/*
function mifuncion(){
....
}

var lala = mifuncion();
lala.prototype.bla = function(){
 ...
}

....
*/

Explicación

Al tratarse de un comentario el navegador no lo evalua y nos ahorramos un tiempo de carga muy valioso y podemos hacer que la carga del código sea cosa nuestra haciendo uso únicamente de él cuando lo necesitemos. Esto nos permite tener un control sobre el Javascript que está ejecutado en todo momento.

quick_test_data-20091027-145104
(Ver Imagen)

Como vemos en el gráfico, la evaluación de comentarios es ligeramente menor a la de una cadena de texto y muy menor a la de funciones.

En dispositivos móviles este tiempo parece más significativo como podemos ver en la imagen siguiente:

quick_test_data_-_iphone-20091027-142630
(Ver Imagen)

Implementándolo

<html>
[...]
<!-- Javascript que será ejecutado posteriormente -->
<script id="lazy">
/*
Código Javascript
*/
</script>
[...]
<script>
 // Función encargada de recoger el contenido del <script id="lazy" /> y evaluarlo
 function lazyLoad() {
 var lazyElement = document.getElementById('lazy');
 var lazyElementBody = lazyElement.innerHTML;
 var jsCode = lazyElementBody.replace(/(\/\*|\*\/)/g,''); // Eliminamos (/*|*/)
 eval(jsCode);
 }
</script>
[...]
<!-- Activamos la carga del JS al hacer click-->
<div onclick=lazyLoad()> Lazy Load </div>
</html>

Como vemos en el código, el sistema básicamente lo que hace es cargar el javascript como un tag con un el código Javascript comentado completamente por lo que el navegador lo omitirá en el momento de evaluarlo.

lazyLoad() se encarga de coger el innerHTML del elemento que hemos cargado previamente con el javascript comentado, elimina los carácteres que indica que sea un comentario (en el ejemplo elminará todos los carácteres /* y */ del innerHTML, por que hay que usarlo con cabeza) y posteriormente lo evalua con eval().

Resultado

La ventaja de este sistema es que nos permite ejecutar ese código cuando queremos y no cuando está cargando la página, mayor control y sobretodo mayor velocidad global de la aplicación.

En los ejemplo de SproutCore obtienen una mejoría de entre 3x y 20x frente a la versión de carga secuencial de Javascript.

Optimizando, que es gerundio

Gerardo hace una puntualización en un comentario que me hace rectificar. Como en el 100% de los casos las expresiones regulares son más lentas que las funciones nativas de los objetos Javascript. En este caso, hacer un substring() nos hace reducir el tiempo de carga considerablemente.

Primero he hecho una prueba con HTML y cargando un fichero JS pesado, he usado Ext.js (versión comprimida 130kb) y he hecho una carga limpia del fichero.

ext.js
(Ver Imagen)

Vemos el tiempo de carga del fichero Javascript acercándose a los 4 segundos. Y despues he hecho una quitando la llamada al fichero externo y lo he añadido como comentario en el HTML.

ext.js-enHTML
(Ver Imagen)

El tiempo de carga se reduce considerablemente. Pero este tiempo es únicamente el que tarda el navegador en recibir el fichero no tiene en cuenta el tiempo de ejecución del mismo.

Por otro lado he hecho pruebas de uso entre replace() y substring().

Código

// Versión usando replace
function conreplace(){
 var el = document.getElementById("lazy");
 var text = el.innerHTML;
 jsCode = text.replace(/(\/\*|\*\/)/g,'');
 eval(jsCode);
 }

 // Versión usando substring
 function consubstring(){
 var el = document.getElementById("lazy");
 var text = el.innerHTML;
 var ini = text.indexOf("/*") + 2;// 2 == "/*".length
 var fin = text.lastIndexOf("*/");
 jsCode = text.substring(ini , fin);
 eval(jsCode);
 }

Resultados

  • Replace: 322ms.
  • SubString: 159ms.

Obviamente el replace elimina más comentarios del código que el subString, pero para este caso no necesitamos complicarnos más. Dejo el ejemplo optimizando a continuación.

<html>
[...]
<!-- Javascript que será ejecutado posteriormente -->
<script id="lazy">
/*
Código Javascript
*/
</script>
[...]
<script>
 // Función encargada de recoger el contenido del <script id="lazy" /> y evaluarlo
 function lazyLoad() {
 var lazyElement = document.getElementById('lazy');
 var lazyElementBody = lazyElement.innerHTML;
 var ini = lazyElementBody.indexOf("/*") + "/*".length;
 var fin = lazyElementBody.lastIndexOf("*/");
 jsCode = lazyElementBody.substring(ini , fin); // Eliminamos (/*|*/)
eval(jsCode);
}
</script>
[...]
<!-- Activamos la carga del JS al hacer click-->
<div onclick=lazyLoad()> Lazy Load </div>
</html>

Estos pequeños detalles son intersantes a tener en cuenta.

JavascriptMVC 2.0 ha visto la luz

28 oct

+ 1

Uno de los patrones de desarrollo más extendidos en los diferentes lenguajes de programación es el conocido como MVC (Modelo Vista Controlador). Este modelo nos permite separar fácilmente la lógica de negocio de la capa cliente o página web.

MVCMVC
(Ver Imagen)

En Javascript tambien podemos hacer uso de este patrón con JavascriptMVC, un framework desarollado por Justin B. Meyer y Brian Moschel y que pretende ofrecer las ventajas que este patrón nos puede llegar a aportar.

//Instead of:
$(function(){
 $('#tasks').click(someCallbackFunction1)
 $('#tasks .task').click(someCallbackFunction2)
 $('#tasks .task .delete').click(someCallbackFunction3)
});

//do this
$.Controller.extend('TasksController',{
 'click': function(){...},
 '.task click' : function(){...},
 '.task .delete' : function(){...}
})
$().tasks_controller();

Entre las mejoras que nos encontramos en esta última versió, nos encontramos con que jQuery pasa a formar parte del core del proyecto y se ha implementado una muy interesante integración con Selenium para las pruebas unitarias y algunas cosas más.

Controla el teclado con Javascript

27 oct

+ 8

En OpenJS publican un interesante script para facilitarnos una forma de controlar el teclado desde Javascript. Debido a la facilidad con la que ha sido desarrollado permite realizar combinaciones de teclas de una forma fácil y sobretodo fácil de comprender al mirar el código.

shortcut.add("Ctrl+Shift+X",function() {
 alert("Hi there!");
});

Instalación

Al igual que cualquier script de Javascript la instalación comienza por la inclusión del fichero JS que contiene la lógica del script.

<script src="shortcut.js" type="text/javascript"></script>

Una vez incluido a nuestro proyecto, ya podemos indicar nuestras combinaciones de teclas.

shortcut.add()

Añadir una combinación de teclas es sencillo como podemos ver en el siguiente código:

shortcut.add("Ctrl+B",function() {
	alert("The bookmarks of your browser will show up after this alert...");
},{
	'type':'keydown',
	'propagate':true,
	'target':document
});

Opciones disponibles:

  • type: Podemos indicar el tipo de evento que queremos controlar para esa combinación. [keydown, keyup, keypress] (Por defecto keydown)
  • disable_in_input: (Boolean) que nos activa o desactiva la combinación para elementos de introducción de texto (input, textarea,…)
  • target:  Elemento que será visible desde la ejecución del evento. (Por defecto document)
  • propagate: ¿Se ha de propagar el evento? (Por defecto false)
  • keycode:  Indicamos que usamos el formato keyCode.

shortcut.remove()

Eliminar una combinación de teclas nos permite desactivar una combinación anterior.

shortcut.add("Ctrl+B",function() {
 alert("Bold");
});
//Remove the shortcut
shortcut.remove("Ctrl+B");

Descargar y Demo

Puedes ver una demo y descargar directamente desde aquí.