Technorati Tags: etiquetags

También he aprovechado para arreglar un bug por el que no se cargaba correctamente la hoja de estilos para la barra de herramientas en todos los casos. Creo que ya está solucionado .

Los nuevos paquetes están disponibles, como en la versión anterior, en español e inglés, y se pueden descargar en la página de descargas de etiquetags.

Technorati Tags: etiquetags

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]

Technorati Tags: etiquetags

Así, el proceso de instalación de etiquetags en Drupal se reduce a:

1. Descarga el paquete de etiquetags para Drupal.
2. Descomprímelo y copia la carpeta ‘etiquetags’ en el directorio /modules de tu Drupal.
3. Activa el módulo desde tu página de administración.

El módulo etiquetags para Drupal está disponible, de momento, en español e inglés y, como siempre, podéis echar un vistazo en:

• 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.

Technorati Tags: etiquetags

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.

Technorati Tags: etiquetags

La instalación es exactamente igual que cualquier otro plugin.

1. Descargar el fichero
2. Descomprimir y subir a la carpeta wp-content/plugins/
3. Activar desde el menú administrador.
4. Disfrutarlo

E incluye instrucciones para instalar etiquetags en cualquier idioma, utilizando el plugin.
Más fácil, imposible

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

Technorati Tags: etiquetags

Linux: Ubuntu-Dapper

Sencilla página html con un sencillo formulario con un campo textarea (Corrección: 20-11-2006) que podría ser por ejemplo éste: demo de sp-quicktags3
Abrimos la página en Firefox y Opera.
Escribimos un texto en varias líneas.

primera linea
segunda linea
tercera linea

Lo seleccionamos con el ratón.
Mediante un sencillo script de Javacript mostramos qué caracteres se utilizan, en uno y otro caso, como salto de línea:
alert(escape(sel));
Donde sel es aquí una variable donde se almacena el texto seleccionado.
Ésta es la salida en Firefox:
primera%20linea%0Asegunda%20linea%0Atercera%20linea
Ésta es la salida en Opera:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea

Cambiamos ahora de escenario:

Windows XP

Salida de Firefox en Win XP:
primera%20linea%0Asegunda%20linea%0Atercera%20linea
Salida de Opera en WinXP:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea
Salida de IE:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea

Conclusión que saco yo (después de un rato de búsqueda totalmente infructuosa en Google):

• En Firefox un salto de línea es u000A
• En Opera, un salto de línea es u000Du000A

Independientemente de la plataforma en la que estemos…

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

Lo que aquí se cuenta no vale para etiquetags pero sí para JS_Quicktags.

El plugin WP-FLV facilita la tarea de insertar vídeos en flash en nuestros blogs, no sólo simplificando las líneas de código que debemos insertar, sino tambien proporcionandonos un botón en la barra Quicktags que hace la inserción aún más sencilla.
Pues bien, para que este botón aparezca también en nuestra nueva barra de herramientas, JS_Quicktags o SP-Quicktags+, hay que hacer un pequeñísimo cambio de código en el plugin.

Vamos a la función:
function flvAddQuickTag()

Donde pone:
var flvBut = flvToolbar.lastChild;

Hay que poner:
var flvBut = flvToolbar.lastChild.lastChild;

Es lógico, ya que ahora estamos utilizando una barra doble…

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

Integración en WordPress

Para integrar JS_Quicktags o SP_Quicktags+ en WordPress no hay más que copiar cualquiera de estos dos archivos en la carpeta /wp-includes/js/ y renombrarlo como quicktags.js. Eso sustituirá la barra original.

Claro que, para que la integración sea más “redonda” podemos darle un colorcillo a las teclas.
Para ello, seguimos el artículo del codex de WordPress:
http://codex.wordpress.org/Coloured_Quicktags
En particular, yo he insertado este código en la hoja de estilo de las páginas de administración wp-admin/wp-admin.css:

#quicktags .ed_button {
background-color: #F0F8FF;
}
#quicktags #ed_strong {
font-weight: bold;
}
#quicktags #ed_link {
color: blue;
text-decoration:underline;
}
#quicktags #ed_ext_link {
color: blue;
text-decoration:underline;
}
#quicktags #ed_del {
text-decoration: line-through;
}
#quicktags #ed_em {
font-style: italic;
}
#quicktags #ed_code {
font-family: "Courier New", Courier, mono;
}

y le da ese tono azulito mucho mejor integrado que el gris original:

Integración en Dotclear

Para integrar JS_Quicktags en Dotclear o en otra página con un cuadro de texto textarea hay que seguir las instrucciones de Alex King que aparecen en la cabecera del archivo
The variable 'edCanvas' must be defined as the <textarea> element you want to be editing in

Es decir, lo que tenemos, tanto en un gestor de contenidos complejo como Dotclear, WordPress o cualquier otro o en una simple demostración como esta, es básicamente la misma cosa: un elemento textarea donde queremos escribir y que tenemos que identificar de alguna manera con la variable edCanvas para que el editor JS_Quicktags pueda insertar etiquetas dentro de ella.

El código de la demostración es :

<form>
<fieldset>
<legend>Ejemplo</legend>
<script type="text/javascript">edToolbar();</script>
<textarea id="canvas" rows="20" cols="100"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById('canvas');</script>
</fieldset>
</form>


Como se puede apreciar, el área de texto “canvas” es asignada a la variable edCanvas.
En el caso de Dotclear, el área de texto y el editor están definidos en el archivo /ecrire/poster.php
Lo que haremos ahora será sustituir el código original


# Toolbar
echo
'<script type="text/javascript" src="js/toolbar.js"></script>'.
'<script type="text/javascript">'.
"if (document.getElementById) {
var tb = new dcToolBar(document.getElementById('p_content'),
document.getElementById('p_format'),'images/');
tb.btStrong('".str_replace("'","\'",__('Strong emphasis'))."');
tb.btEm('".str_replace("'","\'",__('Emphasis'))."');
tb.btIns('".str_replace("'","\'",__('Inserted'))."');
tb.btDel('".str_replace("'","\'",__('Deleted'))."');
tb.btQ('".str_replace("'","\'",__('Inline quote'))."');
tb.btCode('".str_replace("'","\'",__('Code'))."');
tb.addSpace(10);
tb.btBr('".str_replace("'","\'",__('Line break'))."');
tb.addSpace(10);
tb.btBquote('".str_replace("'","\'",__('Blockquote'))."');
tb.btPre('".str_replace("'","\'",__('Preformated text'))."');
tb.btList('".str_replace("'","\'",__('Unordered list'))."','ul');
tb.btList('".str_replace("'","\'",__('Ordered list'))."','ol');
tb.addSpace(10);
tb.btLink('".str_replace("'","\'",__('Link'))."',
'".str_replace("'","\'",__('URL?'))."',
'".str_replace("'","\'",__('Language?'))."',
'".DC_LANG."');
tb.btImgLink('".str_replace("'","\'",__('External image'))."',
'".str_replace("'","\'",__('URL?'))."');
tb.addSpace(10);
tb.btImg('".str_replace("'","\'",__('Internal image'))."','images-popup.php');
tb.draw('".str_replace("'","\'",__('You can use the following shortcuts to refine your layout.'))."');
}
</script>";
# Fin toolbar


Por este otro:


#####   Modificado para utilizar quicktags  #######
# Toolbar
echo
'<script type="text/javascript" src="js/toolbar.js"></script>'.
'<script type="text/javascript">edToolbar();</script>';
echo
'<p>'.form::textArea('p_content',60,$_SESSION['sess_user_edit_size'],
htmlspecialchars($content),6,'class="max"').'</p>';
echo
'<script type="text/javascript">'.
"edCanvas = document.getElementById('p_content');".
'</script>';
##### Fin modificación   ########


Por último, insertamos los mismos estilos que antes en la hoja de estilo de administración: /ecrire/style/default.css

Ésta es una imagen del resultado:

(Corrección: 20-11-2006) He empaquetado todos estos cambios en el paquete dot_sp-quicktags+.zip. No hay que hacer más que descargar el paquete y seguir las sencillas instrucciones del archivo leeme.txt.

(Actualización: 20-11-2006) SP-Quicktags ha ido creciendo y se ha convertido en etiquetags. Tenéis más información aquí:

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/