WordPress 2.1 (beta), JS comprimido y etiquetags

sisi escribió esto a las 16:55

Parece ser1 que la versión definitiva de WordPress 2.1 aparecerá el 22 de enero, así que ando haciendo pruebas con las versiones beta para comprobar la plena funcionalidad de etiquetags en esta nueva versión.
Para el que tenga curiosidad por saber si sus queridos plugins funcionarán en WP 2.1 pueden
comprobar las compatibilidades de los plugins aquí .
No voy a exponer el resultado de un análisis exhaustivo de las novedades de WordPress 2.1 , pues eso excede con mucho mis capacidades. Sólo quiero destacar aquí, un par de novedades que afectan a etiquetags directa o indirectamente.

1.- Compresión de archivos JS

(Actualización: 23-01-2007) Lo que se dice aquí sólo es válido para las ediciones beta. En WordPress 2.1 “Ella” se utilizan, como siempre, los archivos sin comprimir
Ha sido decisión del equipo de desarrollo de WP, la inclusión, como siempre en el directorio wp-includes/js , de dos versiones del mismo script: una comprimida del tipo nombrescript.compressed.js y otra sin comprimir, nombrescript.js.
La razón para comprimir los scripts está clara: se trata de optimizar la carga y optimizar el rendimiento de unos scripts que van siendo cada vez de mayor tamaño y más pesados en su ejecución. Por otro lado, en el blog de Matt Mullenweg se explica que, dado que este proceso de compresión da como resultado un archivo prácticamente ilegible por un humano, se ha decidido mantener las dos versiones, comprimida y sin comprimir, siguiendo el espíritu de una aplicación de código abierto: http://photomatt.net/2005/05/29/javascript-compression/
Puesto que el objetivo no es ocultar el código a nadie y no parece que los algoritmos de cifrado de algunos programas de compresión no estén exentos de problemas, basta, para llevar a cabo la compresión, con quitar los espacios en blanco, saltos de línea, tabulaciones y comentarios.
Existen por ahí bastantes herramientas online que comprimen e incluso “ofuscan” el código javascript.
En el artículo de Matt se nombran algunas y he encontrado una comparativa aquí: http://blogs.pathf.com/agileajax/performance/index.html
De todas las que se nombran, he probado dos de ellas que me parecieron las más sencillas en cuanto al resultado:

  1. CSS & JavaScript Compressor
  2. ShrinkSafe

El resultado ha sido el siguiente:

Tamaño Funciona con Firefox Funciona con IE Funciona con Opera
Archivo original 33.4 Kb
Comprimido con creativyst 23.5 Kb
Comprimido con shrinksafe 20.6 Kb

Echemos un vistazo al código resultante:

Código original:
// *************** OPTIONS *************//
var IconDir = '/wp-includes/js/iconos/'; //Icons Directory.
var FormDir = '/wp-includes/js/forms/'; //Forms Directory
// *************** END OPTIONS *************//
// ***** CREATING BUTTONS *****//
var edButtons = new Array();
var edLinks = new Array();
var edOpenTags = new Array();
function edButton(id, display, ico, tagStart, tagEnd, access, onClick, title, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.ico = ico; // button icon source
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // accesskey
this.onClick = onClick; //onclick button
this.title = title; // button title
this.open = open; // set to -1 if tag does not need to be closed
} ...

Código comprimido con creatyvist
var IconDir = '/wp-includes/js/iconos/'; var FormDir = '/wp-includes/js/forms/'; var edButtons = new Array(); var edLinks = new Array(); var edOpenTags = new Array(); function edButton(id, display, ico, tagStart, tagEnd, access, onClick, title, open) { this.id = id; this.display = display; this.ico = ico; this.tagStart = tagStart; this.tagEnd = tagEnd; this.access = access; this.onClick = onClick; this.title = title; this.open = open;}

Código comprimido con shrinksafe
var IconDir="/wp-includes/js/iconos/";
var FormDir="/wp-includes/js/forms/";
var edButtons=new Array();
var edLinks=new Array();
var edOpenTags=new Array();
function edButton(id,_2,_3,_4,_5,_6,_7,_8,_9){
this.id=id;
this.display=_2;
this.ico=_3;
this.tagStart=_4;
this.tagEnd=_5;
this.access=_6;
this.onClick=_7;
this.title=_8;
this.open=_9;
}

Se aprecia que shrinksafe comprime un poco más el código a costa de cambiar nombres de funciones y variables y me da en la nariz (después de utilizar el complicado método de abrir los archivos comprimidos y ver su aspecto) que éste ha sido el programa empleado por el equipo de WordPress para llevar a cabo la compresión. Yo, sin embrago, he elegido el compresor de creatyvist que lo único que hace es quitar saltos y comentarios.
(Corrección: 23-01-2007) Y ahora viene la pregunta del millón: ¿Hace falta comprimir etiquetags para que funcione con wordpress2.1? La respuesta es claramamente no; etiquetags funcionará igual de bien sin más que renombrándolo como quicktags.compressed.js y cambiando la llamada al script en las ventanas de formularios. Es decir abrimos /wp-includes/js/forms/formimg.html y donde pone
ponemos
y lo mismo para formlink.html.
Pero la solución de aportar un paquete nuevo con quicktags.js y quicktags.compressed.js y los formularios ya corregidos, me parece simplemente más estilosa y elegante. Los paquetes estarán listos, espero, antes de que liberen la versión estable de WP 2.1.

2.-Nueva interfaz de administración

Pues me ha hecho ilusión verla: la nueva versión de WP viene con la misma interfaz de administración que ya veníamos disfrutando en los blogs de wordpress.com Me estoy refiriendo a shuttle ; ahora ya no hace falta deshabilitar el editor WYSIWYG para poder disfrutar de etiquetags porque podemos utilizar ambos editores al tiempo para editar nuestros posts.
Cuando vi hace unos meses esta posibilidad en los blogs de worpress.com, la envidié inmediatamente :mrgreen: y resultó ser la fuente de inspiración para el mundialmente conocido botón-de-previo-en-el-mismo-textarea de etiquetags1.1.
Me parece simplemente la solución ideal: ¿Por qué renunciar a nada pudiendo tenerlo todo?

Visual editor en WP2.1

Etiquetags WP2.1

Aunque yo, me he decidido por uno de ellos y he optado por deshabilitar el otro ;-)

Notas

  1. http://www.diarioaborbo.com/2007/01/10/wordpress-21-beta-2/, [volver]
Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

3 comentarios en “WordPress 2.1 (beta), JS comprimido y etiquetags”


  1. Alfonso dice:

    Sisisfo, eres un pozo de ciberciencia. La de cosas que estoy aprendiendo. Me ha llamado la atención el algoritmo tan simple para reducir el peso de los scripts. Y que en este mundo de adsl, reducir 15 kb pueda ser tan importante. Lo que quiero decir, si tan crítico puede ser el tamaño del script, ¿por qué no emplear una compresión más radical ? Memoria y CPU ya se derrochan a montones por los navegadores actuales.
    Saludos


  2. sisifodichoso dice:

    Hola Alfonso :-D
    También me enteré que es posible ejecutar un javascript comprimido con gzip con lo que se comprimiría mucho más pero parece ser que puede dar problemas el explorer a la hora de ejecutarlo.
    Yo creo que han adoptado esta solución porque el tamaño de todo el código js de wp ha aumentado espectacularmente y claro, no quieren que se les vaya de las manos … me imagino que se trata de un equilibrio. También me gusta que se preocupen de los que no tienen adsl ni un cojo-pc. Pero vamos, que igual el 22 sacan la versión definitiva y ni archivos comprimidos ni nada y yo aquí piando … ;-)


  3. sisifodichoso dice:

    Si es que soy visionaria … :P
    En WordPress 2.1 “Ella” no hay ni rastro de los archivos comprimidos :P :P :P