aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Alfredo Artiles nos vuelve a deleitar con un espectacular script con el que aprovecharemos al máximo los recursos del usuarios y los de nuestro servidor haciendo peticiones Ajax solo cuando estemos en una aplicación web.

El script montado para funcionar con MooTools, se basa en que cuando cambiamos de pestaña el navegador continua ejecutando nuestros scripts de actualización mediante Ajax. Estas llamadas consumen recursos sin ser necesarios, ya que estamos en otra pestaña. Alfredo ha optado por controlar el movimiento del ratón y teclado sobre la página y en caso de pasar un tiempo sin que este actúe sobre nuestra página cancelará nuestras peticiones Ajax.

Modo de empleo

var idleSpy = new IdleSpy({
 idleTime: 300000
});
idleSpy.addEvents({
 'idle': function() { /* on user idle code here */ },
 'back': function() { /* on user back code here */ }
});
idleSpy.start();

Básicamente lo que nos ofrece el script es la posibilidad de definir un tiempo de espera antes de activar el evento idle en el que definiremos que hacer cuando llevemos X segundos sin actuar sobre nuestra página. Posteriormente, definiremos el evento back que se encargará de reestablecer todo lo que hayamos parado previamente.

¿Para jQuery?

Los que usamos jQuery tambien tenemos un plugin que nos permite realizar la misma tarea. jQuery idleTimer, nos permite definir ambos eventos.

// timeout en milliseconds; defaults 30000
$.idleTimer(10000);

$(document).bind("idle.idleTimer", function(){
// ....
});

$(document).bind("active.idleTimer", function(){
// ....
});

$.idleTimer('destroy');

Nicholas C. Zakas, implementó hace ya tiempo una versión para YUI que los desarrolladores que usen pueden tener en cuenta.

Actualizo (11:58)

Alfredo me avisa de que ha encontrado uno para funcionar con Prototype.

Pues eso, entre uva y uva me he acordado de todos vosotros y he parado para desearos un feliz año nuevo!!

$("#2010 *").attr("felicidad", ∞);

Mucho cuidado en la carretera, empieza el año teniendo cabeza.

Este artículo ha sido la inocentada del 28 de Diciembre de 2009. Siento las molestias que haya podido originar.

Cuando Google anunció Google Chorme el mundo se preguntó por el apoyo que Mozilla recibía para desarrollar su navegador (Firefox) y el significado que tenía la aparición de Google Chrome en la batalla contra Internet Explorer.

Sin duda, este fue el detonante de la tensa situación en la que están inmersas las dos compañías de ahí que Asa Dotzler recomendara usar Bing en lugar de Google, tras las desafortunadas declaraciónes de Eric Schmidt (CEO de Google) en las que decía básicamente que “…el que quiere ocultar sus búsquedas es por que hizo algo malo…“.

Ahora Mozilla nos sorprende con la decisión de integrar V8 en la próxima versión de Firefox, algo que a los desarrolladores web nos ha sorprendido gratamente. Al ser un proyecto open source, muy ligado a la filosofía de Firefox, han tomado la decisión trabajar en el proyecto TraceMonkey (motor de Javascript de Firefox) y desvincularlo de Firefox hasta que este ofrezca unos resultados dignos de competir con V8, mientras tanto, usarán V8 como motor de render de Javascript en el propio Firefox.

(Ver Imagen)

Como podemos ver, las gráficas son realmente sorprendentes, ya que al integrar el motor V8 con Gecko han conseguido incrementar la velocidad general del navegador en un 15% sobre la velocidad ofrecida por Chrome (segun SunSpider) y un 6% según Dromaeo. Esto pinta bien, y seguramente en breve podremos testearlo nosotros mismo cuando publiquen la primera alpha de la siguiente versión de Firefox.

Reducisaurus es un servicio desarrollado sobre App Engine y basado en YUI Compressor que nos permite comprimir nuestros y servir nuestros ficheros CSS y JS.

<script src="http://reducisaurus.appspot.com/js?file1=...&url1=...&max-age=604800"></script>
<link rel="stylesheet" href="http://reducisaurus.appspot.com/css?file1=...&url1=...&max-age=604800"></script>

Es posible enviar múltiples ficheros por GET o POST mediante los parámetros fileX para pasar el contenido del fichero o mediante urlX para cargar el fichero remotamente. Si lo necesitamos podemos usar file y url en la misma llamada.

Además dispone de un parámetro extra que nos permite especificar el tiempo de caché (&max-age=XXX) que deseamos que esté disponible nuestro fichero, por defecto tenemos 600 segundos. O desactivar la caché (&expire_urls=0)

Esta mañana he recibido, por fín, el premio bitácoras que el pasado día 14 de Noviembre me otorgaron los chic@s de Bitácoras.

(Ver Imagen)

El conjunto del premio es genial, un portatil (Toshiba NB200) que no pesa nada, ideal para convencer a la novia de poner la estatuilla donde a mi me de la gana

De nuevo, muchas gracias a todos por vuestro apoyo!! GRACIAS!!

Hace unos días que recibí la invitación para usar Google Wave, y desde entonces he estado intentado encontrarle una utilidad a el sistema propuesto por Google.

(Ver Imagen)

¿Que dice Google que és?

Google nos explica en una infinidad de videos que Google Wave nace para reemplazar al, ya entradito en años, email. Que aunque parezca mentira tiene ya más de 30 años.

Para entenderlo, imaginemos un mail que enviamos a nuestro amigo X en el que indicamos un tema, le añadimos imágenes, videos,… una vez enviado, recordamos que Y también te pidió información al respecto, así que cambias la dirección de destino y vuelves a enviar el correo.

Sin darnos cuenta, estamos duplicando la cantidad de información que está navegando por Internet. Y Google pretende innovar en este sentido.

La idea es alojar ese contenido en un Wave y en lugar de duplicarlo, simplemente haremos que más gente lo pueda ver, añadiendo los que queramos puedan ver dicho contenido.

Ya que estamos, añadimos más opciones

Aprovechando dicho cambio, y ahí es donde está la espectacularidad de Google Wave, se añade una capa de javascript que se encarga de ofrecer un interface muy rico y cargado de funcionalidades.

Waves enriquecidos

Además de las opciones WYSIWYG que ya teníamos en gMail, nos encontramos con la capacidad de incrustar imágenes/videos entre el texto para generar “minipáginas web”.

(Ver Imagen)

Anidamiento

Para olvidarnos de responder emails, Google Wave nos permite anidar comentarios dentro de un Wave, como vemos en la imagen.

(Ver Imagen)

Modificar el contenido ya escrito en un Wave

Otra funcionalidad que podemos encontrarnos al editar un wave es la posibilidad de editar contenido (tuyo o de otro usuario) al más puro estilo Wiki.

Para siempre tener un control de los cambios realizados tenemos la opción Playback que nos permite visualizar la correlación de cambios realizados en ese Wave.

(Ver Imagen)

Escritura en tiempo real

También es muy curioso ver como los usuarios que están online y editando el Wave, van escribiendo en él.

(Ver Imagen)

Gadgets

Los gadgets, nos sirven para insertar elementos dinámicos que aportan una funcionalidad extra dentro de nuestro Wave, hasta ahora solo he probado los de encuesta, sudoku y mapas, aunque hay mucha información para crear tus propios Gadgets.

(Ver Imagen)

Mi opinión

Aún es muy pronto y es una versión alpha, lo que indica que le faltan muchas opciones y que aún no podemos ver todas las funcionalidades que podremos llegar a usar en un futuro. Pero así y todo, no convence.

MarcosBL, en un Wave lo describía como:

‘El resultado de una orgía entre un Foro, el MSN y un Wiki’

Y creo que no se podría haber expresado mejor, ya que una vez entras en Google Wave, eso es lo que te encuentras… y ya está. La primera impresión es de decepción total, el que te hayan estado metiendo Google Wave por todos ojos todos los días y a todas horas, quizás ha hecho que las espectativas fueran más altas de lo que deberían ser.

Hay que alabar la labor de Google en la creación del interface, que es impresionante y muy completo, aunque lento como el solo.

Por el momento, está la cosa muy verde y aún queda mucho camino por recorrer, pero las primeras impresiones han sido, por lo menos en mi caso, decepcionantes.

Aclaración

Cuando accedí la primera vez, Google Wave me obsequió con 8 invitaciones las cuales volaron en el primer minuto en el que me pude sentar delante del PC. Lo siento, pero no me quedan ninguna más.

Via Ajaxian descubro una solución para disponer de una versión rápida (casi como la nativa )  de querySelector() en Internet Explorer 4+. Muy similar a la propuesta por Dean Edwards en 2006.

/*@cc_on
 if (!document.querySelector)
 document.querySelector = function(selector) { 

 // Añadimos un nuevo tag <style />
 var head = document.documentElement.firstChild;
 var styleTag = document.createElement("STYLE");
 head.appendChild(styleTag); 

 // Creamos un array global
 document.__qsResult = []; 

 // Añadimos los elementos seleccionados mediante un SECE
 document.__qsResult.styleTag.styleSheet.cssText = selector + "{qs: expression(this.__qs?0:(function(t){document.__qsResult.push(t);t.__qs=0;})(this));}";

 // Recargamos la página. Sin esto el SECE no se ejecutará.
 window.scrollBy(0, 0); 

 // Limpiamos el nuevo elemento y devolvemos los resultados.
 head.removeChild(styleTag);
 return document.__qsResult;
 }
@*/

La mágia del script, que nos permite implementar una versión del Selectors API,  reside en los SECE (Single Execution CSS Expressions), pero ¿que son?

Single Execution CSS Expressions (SECEs)

En Internet Explorer (4.0+) tenemos una implementación que únicamente podremos usar en este navegador que nos permite ejecutar expression() en nuestros CSS.

 .post-body img { // Ejemplo Max-width para IE
   max-width:400px;
   width: expression(this.width > 400 ? 400: true);
 }

Ya lo llevamos usando mucho tiempo y lo hemos visto en varios ejemplos a lo largo de los últimos años.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Incluso nos permite cambiar (solo en IE) el color del fondo de un elemento cada hora par (8,10,…)

Pero unas mentes inquietas llegaron a sacarle más partido a esta curiosa implementación, haciendo que la capa de estética interactue directamente con la capa de funcionalidad.

<script>
function setOnetimeBgcolor(elem) {
  elem.style.backgroundColor = <some calculation>;
}
</script>
<style>
P {
  background-color: expression(setOnetimeBgcolor(this));
}
</style>

Esto me hace pensar en algo asi

<style>
/* Enviamos a la versión IE */
html {
 background-color: expression(location.href = 'index_ie_version.html';);
}
</style>

Aunque hará que nuestro CSS no valide según los estándares de la W3C.

Problemas

El propio John Resig contesta al artículo de Ajaxian y expone los problemas que podríamos encontrarnos con este sistema.

• Las expresiones CSS de IE son conocidas por su excesiva sobrecarga
• No hay una forma clara de abordar la gestión de errores. ¿Que sucede si se usa un selector no soportado?

Vía Twitter, @jeroguidi me muestr WP JS, un plugin para Wordpress que nos promete comprimir nuestros ficheros JS automáticamente para hacer que estos carguen más rápido y en menos tiempo.

(Ver Imagen)

La idea es muy sencilla, únicamente debemos definir que ficheros han de comprimirse y él se encarga de comprimir el resultado. Despues en nuestro theme deberemos usar la función wp_js() para llamar a los ficheros JS donde queramos que estos sean cargados.

<script src="<?php wp_js('/javascript/sifr-addons.js,/javascript/sifr.js') ?>" type="text/javascript" charset="utf-8"></script>

¿Sencillo no? Y además en mucho casos, expectacularmente práctico.