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:

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 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?

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]

Ya está disponible para su descarga una nueva versión de etiquetags : etiquetags1.1, que incorpora los siguientes cambios:

1. Corrección del fallo de inserción de imágenes en IExplorer y Opera.
2. Una nueva función de previo en la misma ventana. El botón “vista previa” conmuta entre el modo de edición y el de previsualización.

Y ya, aprovechando, se han modificado los paquetes para WordPress y Dotclear, facilitando así la instalación de etiquetags:

1. Ya no hace falta renombrar el archivo etiquetags.js como quicktags.js o toolbar.js.
2. Ya no hace falta editar las rutas para los iconos y formularios, a no ser que el blog no esté instalado el directorio root de vuestro servidor.

Para echar un vistazo:

• Demo: http://sisifodichoso.org/etiquetags/Es/demo.html.
• Descarga: http://sisifodichoso.org/etiquetags/descarga.html.
• Instalación y FAQ: http://sisifodichoso.org/etiquetags/faq.html.

Hará un mes más o menos que os hablaba de mis pinitos con Javascript y ciertas modificaciones de la barra de edición quicktags (y de JS-Quicktags, creados ambos por Alex King) que utiliza WordPress 2.0.4 para la edición no WSYIWYG de nuestros artículos.
Lo que empezó como un pasatiempo, fue poco a poco cobrando cada vez más entidad, en gran medida gracias a Cruzul y su entusiasmo, y se ha convertido en lo que ambos creemos es el editor de etiquetas HTML que queríamos tener y no encontrábamos: ligero, sencillo, escribiendo código totalmente limpio y de acuerdo con el estándar XHTML1.0 Strict del W3C, con funciones de previsualización del resultado, formularios para rellenar cómodamente los atributos de las etiquetas, construcción automática de listas y ¿por qué no? todo ello con un diseño muy atractivo y fácilmente configurable al gusto de cada usuario.



Disponible, hasta ahora, en cinco idiomas, en-es-fr-gl-pt, etiquetags incorpora herramientas lingüísticas tales como diccionarios, correctores o traductores (dependiendo de la disponibilidad de dichas herramientas para cada idioma) o búsqueda de acrónimos …
En fin, que si queréis saber más sobre etiquetags podéis dirigiros a su web: http://sisifodichoso.org/etiquetags/
donde, además de secciones de documentación y descarga, existe una demo en los cinco idiomas para que podáis probar todas las funciones del programa.
Y, por supuesto, que toda sugerencia o comentario será bienvenido