Orange Commands v1.4.0

Anuncio rápido: ya tienes disponible la nueva y mejorada versión de Orange Commands.

Novedades de esta versión respecto a la anterior (v1.3.0):

  • Fallos corregidos:
    • El comando ‘Set Size’ ya no peta cuando le das a ‘Esc’ para cerrarlo sin cambiar el tamaño de un objeto.
    • Corregido un bug con los comandos de redimensionado que hacía que Fireworks se volviera loco después de redimensionar un grupo de objetos.
  • Nuevos comandos
    • Export » All Pages as PNG 24, que exporta todas las páginas del documento en PNG 24
    • Set Page Name, para cambiar los nombres de las páginas sin usar la interfaz demencial de Fireworks
    • Dos comandos de texto: Join y Join With… para fusionar cajas de texto
    • Dos comandos de páginas: Vertical Trim y Vertical Trim All Pages, que recortan las páginas verticalmente al tamaño de los elementos que haya en la página.

Postdata: estoy en proceso de actualizar el sistema que genera la documentación, y de momento la versión en castellano está un poco por detrás de la versión en inglés. Si quieres ver la documentación más reciente, la tienes disponible (en inglés) en http://bit.ly/PcTSMV

Presentando OrangeCommands

Orange Commands es una colección de comandos para Fireworks CS3 y CS4 que sirven, esencialmente, para hacer más fácil la vida del diseñador web.

Si eres lector habitual de este blog, ya sabrás cual es, en mi opinión, uno de los pilares de la productividad y la innovación.

En la línea habitual de “haz más haciendo menos”, Orange Commands surge de la imperiosa necesidad de perder menos tiempo haciendo cosas aburridas en Fireworks, para poder dedicarlo a menesteres mucho más interesantes.

La segunda motivación para Orange Commands es que me gusta trabajar a pantalla completa sin ninguna paleta abierta. ¿Las razones?:

  • Porque uno es así de raro.
  • Porque la interfaz de Fireworks es tan lenta que cuando ocultas las paletas va mucho más rápido.
  • Porque la interfaz de Fireworks es fea.

Vale, suena bien… ¿qué hace Orange Commands exactamente?

Pues empezó haciendo retículas (y llamándose Reticulator), y a día de hoy (que vamos por la versión 1.3) hace todas estas cosas (y alguna más, abajo tienes la lista completa):

  • Redimensionar objetos con el teclado. El por qué Adobe no ha puesto esto de serie en Fireworks continúa siendo un misterio…

    Si piensas que no necesitas redimensionar objetos con el teclado (que es lo mismo que pensé yo cuando Keko me pidió que le programara estos comandos) es porque todavía no lo has hecho. Si sólo me tuviera que quedar con una cosa de Orange Commands, sería esto…

  • Cambiar la transparencia de objetos con el teclado, que es algo que Photoshop tiene (mas o menos) pero Fireworks no tenía. Otra cosa que piensas que no vas a necesitar hasta que un día te sorprendes no pudiendo vivir sin ella.

  • Cambiar el color de relleno, de línea y de fondo de documento con el teclado, que es algo esencial si no quieres tener abiertas mil paletas (¿he dicho ya que Fireworks funciona mucho más rápido con las paletas ocultas?)

  • Exportar la página actual como un PNG a 24 bits con un sólo atajo de teclado, sin abrir la ventana de previsualización (¿adivinas por qué? porque es lenta de cojones) y sin tener que cambiar opciones en ninguna parte. Con este comando puedes tardar entre 1 y 5 segundos en mandarle a alguien por email un pantallazo de lo que estés haciendo :)

  • Reticulator, nuestro viejo conocido, ahora tiene un atajo de teclado para la retícula más habitual (la 960-16-9).

  • Rodear de guías una selección con el teclado. Selecciona lo-que-sea, dale a key_control.pngPlusShiftPlusW, y tendrás cuatro guías enmarcando tu selección. Esto debo usarlo unas 400 veces al día, y la inspiración (y el atajo de teclado :) vienen directamente de TextMate.

  • Posicionar elementos con el teclado. ¿He dicho que Fireworks es lento?

  • Y más cosillas…

¡Cáspita!, ¡Zapateta!, ¡Repámpanos!… ¡Lo quiero!

Estás de suerte, porque Orange Commands es gratis total. No sólo es Software Por La Patilla™, sino que es código abierto (a modo de homenaje a todas esas almas caritativas que han sembrado el mundo de software libre molón del que nos aprovechamos todos los días y que incluso nos da de comer)

Si eres de esa gente rara que quiere ver el código fuente, lo tienes disponible en http://github.com/bomberstudios/fireworks (por si quieres asegurarte de que los comandos no ejecutan nada raro, ni se beben tu cerveza, ni te levantan a la novia por la espalda sin avisar)

Si eres gente normal, tienes los comandos para descargar, y toda su documentación, en la página de Orange Commands

¡Feliz semana!

Autosave en TextMate

Hay una preferencia de TextMate (no muy conocida, a juzgar por las veces que se la he enseñado a alguien :) que guarda automáticamente tus ficheros cuando cambias de TextMate a otra aplicación:

TextMate: Save Files When Focus is Lost

Parece una tontería, pero no tener que acordarte de guardar los cambios cuando abres un navegador para recargar un HTML o una CSS es algo a lo que te acostumbras muy rápido.

De hecho, cuando uso un editor que no es TextMate, el 50% de las veces que falla algo es porque se me ha olvidado guardarlo antes de recargar la página en el navegador :P

Ahorrando tiempo con TextMate y Subversion

Como llevo una temporada sin postear, aprovecho unos segundos de tiempo libre para contaros un pequeño truco motivado por el espíritu de la Infinita Vagancia™ y el típico comentario de “molaría que TextMate hiciera…” (en este caso, de David Alonso)

El truco de hoy es la típica chorrada que te molesta 80 veces al día, y cuando la resuelves te das cuenta de lo poco que nos queremos en general (resolverlo no llevó más de 2 minutos)

Escenario: usas Subversion desde línea de comando, pero escribes tus mensajes de commit con TextMate (y si no lo haces, ahora te cuento cómo)

Problema: cuando escribes tu mensaje de commit, tienes que guardar el documento y luego cerrarlo para que se “registre” el mensaje y se haga el commit.

Idea: guardar y cerrar con un atajo de teclado, pero sólo en los mensajes de commit de Subversion.

Usando TextMate como editor de mensajes de commit

Si quieres usar TextMate para editar tus mensajes de commit, la cosa es bastante simple. Tienes que asegurarte de tener instalada la utilidad “mate” (usando el menú “Help » Terminal Usage…”) y añadir esto en tu fichero .bash_profile:

export SVN_EDITOR='mate -w'

Para ello, cuando hayas instalado ‘mate’ puedes abrir una ventana de Terminal.app (que por defecto inicia una sesión en tu carpeta $HOME) y escribir:

mate .bash_profile

Se abrirá el fichero .bash_profile si existe, y si no se creará.

Añade la línea “export …” donde quieras, cierra el fichero y cierra la ventana de Terminal.app (necesitas abrir una nueva para que el fichero .bash_profile se vuelva a leer)

Siguiente paso: el comando de TextMate

Una de las múltiples maravillas de TextMate es el sistema de “scoping”.

De una forma muy simplificada, el “scoping” es una forma de identificar qué tipo de texto estás editando. Mediante un sistema de expresiones regulares, TextMate puede reconocer en qué lenguaje estás programando; Y dentro de ese lenguaje, si estás editando un String, una función, un número…

Afortunadamente, los tipos que mantienen el bundle de Subversion tuvieron la deferencia de identificar cuándo un fichero es un mensaje de commit de Subversion.

El scope para un mensaje de commit es

text.subversion-commit

Otra maravilla de TextMate es que puedes limitar un comando a un scope, de forma que podemos escribir un comando que sólo funcione cuando estamos editando un mensaje de commit.

Para hacer nuestra vida más fácil, vamos a crear un comando que guarde y cierre el documento actual, y asignarlo a la combinación de teclas ⌘ + S (que ya estamos usando para guardar)

Así que abrimos el editor de Bundles con ⌃ + ⌥ + ⌘ + B y creamos un nuevo comando en el bundle de Subversion:

Nuevo Comando de TextMate

Le asignamos un bonito nombre:

Nombrando el Comando

lo rellenamos de contenido:

Comando Save and Commit

y cerramos la ventana del Bundle Editor.

A partir de ahora, cuando escribamos

svn ci nuestro_bello_fichero_modificado

se abrirá una ventana de TextMate con esta pinta:

Ventana de Commit

donde podemos escribir nuestro mensaje de commit, y al pulsar ⌘ + S para guardar, se cerrará automáticamente y empezará nuestro commit :)

Y eso es todo, de momento…

Reflection, un comando para Fireworks

Admitámoslo. El efecto “reflejo en hielo/agua/cristal” es el “bevel & emboss” de esta década.

Si alguna vez te ha tocado crear uno, sabrás que es un pelín coñazo. Si además tienes que añadir un reflejo a 50 imágenes, habrás estado al borde del suicidio.

Sobre todo si después de la paliza alguien te dice cosas como:

  • “Hmm… ¿por qué los reflejos no tienen todos la misma altura?”
  • “¿Sabes qué? Creo que habría que hacer los reflejos un poco más pequeños”
  • “Mira… mejor vamos a cambiarlo todo por un ‘drop shadow’, que vuelve a estar de moda”

(situaciones estas totalmente hipotéticas)

La cuestión es que, si eres un vago profesional, esta es una de esas veces en las que piensas… “hmmm… automatización…”

Así que, con ayuda de la terrible documentación de Fireworks CS3, me puse a programar un comando para hacer reflejos.

El resultado es que, con un sólo click, tienes un bonito efecto como este:

Reflection, baby

Bonito, ¿verdad? :)

Para conseguir este glamouroso comando, guarda el siguiente código en un fichero Reflection.jsf en la carpeta ~/Library/Application Support/Adobe/Fireworks CS3/Commands/ (o su equivalente en Windows que debería ser algo como C:/Documents and Settings/usuario/Application Data/Adobe/Fireworks CS3/Commands/), y luego selecciona un objeto en Fireworks y en el menú “Commands” elige la opción “Reflection”.

// Reflection Command 1.0
// Ale Muñoz <http://bomberstudios.com>

// Ask for shadow height:
shadow_height = prompt("Reflection Height","50");

// Get the original object
original = fw.selection[0];
original.name = "original";

// Clone, reflect and move original
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().reflectSelection(false, true, "autoTrimImages transformAttributes");
fw.getDocumentDOM().moveSelectionBy({x:0, y:original.height + 5}, false, false);

// Get the cloned object
copy = fw.selection[0]; // Current selection is now the copy
copy.name = "copy";

// Create the mask
fw.getDocumentDOM().addNewRectanglePrimitive({left:copy.left - 2, top:copy.top - 2, right:copy.width + copy.left + 2, bottom:copy.height + copy.top + 2}, 0);
// White to black gradient
fw.getDocumentDOM().setFill({ category:"fc_Linear", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:{ name:"cn_Custom", nodes:[ { color:"#ffffff", isOpacityNode:false, position:0 }, { color:"#000000", isOpacityNode:false, position:1 } ], opacityNodes:[ { color:"#000000", isOpacityNode:true, position:0 }, { color:"#000000", isOpacityNode:true, position:1 } ] }, name:"Linear Smooth", pattern:null, shape:"linear", stampingMode:"blend", textureBlend:0, webDitherTransparent:false });
// Reposition gradient
fw.getDocumentDOM().moveFillVectorHandleBy({x:0, y:shadow_height}, "end1", true, false);

// Get the mask
mask = fw.selection[0];
mask.name = "mask";

// Remove mask's stroke
fw.getDocumentDOM().removeBrush();

// Apply the mask to the cloned object
fw.selection = [copy, mask];
fw.getDocumentDOM().group("mask to image");

// Finally, set opacity to 30 so it looks like a reflection
fw.getDocumentDOM().setOpacity(30);

Para usarlo, selecciona un objeto y elige la opción “Reflection” del menú “Commands”.

Te pedirá que introduzcas la altura del reflejo en píxels (por defecto, 50)

Y ya está! :D

Reflection Code Reflection

Si encuentras algún fallo o se te ocurre alguna mejora, deja un comentario…

Y recuerda el lema de los vagos profesionales: “lo importante no es trabajar más, sino trabajar mejor” ;)

Adobe, me tienes contento…

Si has trasteado un poco con el nuevo Fireworks CS3, quizá hayas descubierto una nueva funcionalidad: la “Common Library”.

Básicamente, la Common Library es un repositorio de símbolos para todos tus proyectos, que tienen la particularidad de que pueden ser programados para “hacer cosas” de una forma bastante sencilla.

“Hacer cosas”, en este caso, significa que puedes crear un símbolo gráfico (un botón, por ejemplo) y hacer que cada instancia del símbolo tenga un texto distinto manteniendo el mismo fondo…

Caos de Botoncillos

…cosa que viene muy bien cuando tu cliente te pide que quiere un botón “más llamativo”:

Caos de Botoncillos Horteras

Un cambio = 11 botones actualizados. La Ley del Mínimo Esfuerzo™ en pleno efecto :)

Hasta aquí todo bien… cuando además descubres que Adobe ha incluido en la Common Library una colección de símbolos con todos los elementos de formularios de Windows y Mac, quizá empieces a ponerte nervioso pensando qué vas a hacer con tooooooodo el tiempo de trabajo que te vas a ahorrar.

Caos de Elementos

¡PERO…!

Todo en esta vida tiene un precio, y en Adobe decidieron que no estaban dispuestos a retrasar la salida de la Creative Suite CS3 para esperar que el equipo de Fireworks CS3 corrigiera los bugs de la Common Library y nos han obsequiado con un sistema potencialmente útil que, en su encarnación actual, es una auténtica castaña.

Un ejemplo: prueba a poner una ñ o una tilde en la etiqueta de un botón. Verás qué risa…

Por si esto fuera poco, la primera actualización de Fireworks CS3 ha roto lo poco que funcionaba de la Common Library. En concreto, ahora es imposible cambiar el tamaño de un símbolo sin que se rompa por todos lados:

Botones Escacharrados

Que conste que me encanta despotricar, pero como soy más de la filosofía de “Más vale encender una luz que maldecir la oscuridad”, aquí va una imagen llena de esperanza que he hecho para ilustrar este post:

Arreglando los Fallos de Adobe

No sé cuándo los terminaré (pronto, espero, porque me hacen falta para trabajar :) pero en cuanto estén listos los publicaré en el blog (y se los mandaré a Adobe junto con un tirón de orejas). Permanezcan atentos a sus pantallas ;)

Taller de TextMate Avanzado en The Cocktail

Si viniste al primer curso de TextMate en el Aula The Cocktail y te quedaste con ganas de más, el próximo Jueves 26 de Abril a las 19:30h haremos la segunda parte.

TextMate es un editor de texto super potente, pero un pelín impenetrable (aunque no tanto como Emacs :)

Si ya usas TextMate a diario con cierta soltura, quizá te esté picando el gusanillo de crear tus propias automatizaciones (snippets, comandos, macros…) y no sabes por dónde empezar.

En este taller crearemos un “bundle” personal, donde almacenaremos comandos y snippets que simplifiquen nuestro trabajo con toda clase de texto (que no sólo de código vive el hombre)

Aprenderemos que crear un script que haga nuestro trabajo más sencillo y menos repetitivo es más fácil de lo que parece.

Imprescindible:

  • Un ordenador. Será un taller muy práctico, y la idea es que te lleves algún comando terminado :)
  • Ser ya usuario (más o menos asiduo) de TextMate. No vamos a ver casi nada básico.

Recomendable, aunque opcional:

  • Conocer algún lenguaje de programación para fabricar nuestros scripts. Los ejemplos que pondré usan Ruby, Bash y AppleScript sobre todo, pero te servirá cualquier lenguaje que venga de serie con OSX (Python, Perl, PHP…)

Apúntate desde ya en el wiki del Aula The Cocktail

Y si quieres estar informado de próximos eventos, visita la página del Aula The Cocktail en Upcoming

Technorati tags:

Presentando la lista de correo de TextMate en Castellano

Hace tiempo que andaba dándole vueltas al asunto de crear “algo” para hablar de TextMate en Castellano. Después de desechar la idea de un blog y de un wiki, finalmente me he decidido a crear un grupo de Google para estos menesteres.

La dirección del recién creado grupo es

http://groups.google.com/group/textmate-es/

y el primer mensaje viene a decir:

Este es la lista de correo de TextMate en Castellano. La temática del grupo es, obviamente, TextMate: comandos, snippets, trucos…

Se admiten off-topics, siempre que la temática tenga alguna relación con el universo en el que se use TextMate (herramientas adicionales, trucos de OS X, etc…)

Está ABSOLUTAMENTE PROHIBIDO iniciar flames sobre cual es el mejor editor de texto. El mejor editor de texto es el que mejor uses, y punto : )

¡Que empiece la diversión!

Pues eso… ¡apúntate a la lista! :)

Technorati tags:

TextMate JavaScript Bundle

Si programas JavaScript de una manera más o menos asidua, y usas TextMate, tienes que probar el bundle “JavaScript Tools”

Textmate Javascript Tools

Javascript Tools pone a tu disposición dos herramientas que (dependiendo de tu nivel programando Javascript) pueden ser una bendición o una pesadilla:

JSLint, un verificador de sintaxis para Javascript. JSLint detecta errores tan comunes como:

  • Los ; que siempre se te olvidan al final de una línea.
  • Código que nunca se ejecuta.
  • case sin su switch correspondiente.
  • Comentarios dentro de comentarios.
  • Uso de = en comparaciones (en lugar de ==)
  • Etc, etc…

JSMin, un compresor de ficheros .js que te ahorrará un pico en tu factura de hosting.

La gracia del asunto está en que las dos herramientas se integran perfectamente con TextMate, y si tienes un error en tu código, JSLint te dirá dónde está (con un bonito enlace que te lleva a la línea y columna donde está el error).

Jslint en Textmate

De regalo, el bundle incluye un comando que verifica la sintaxis cada vez que guardas el fichero, mostrándote un tooltip si hay algún problema.

Jslint en Textmate 2

Así que ya tardan en descargarse el bundle y darle las gracias al autor :)

Technorati tags: , ,