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 , 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!

Independientemente del software que utilices, ya sabrás que los atajos de teclado son el mejor aliado de la productividad y la vagancia.

Lo que a lo mejor no sabes es que los atajos de teclado de Fireworks, además de ser personalizables de una forma bastante sencilla, pueden asignarse a tus propios comandos.

Para personalizar los atajos de teclado, abre el menú Fireworks » Keyboard Shortcuts…

Puedes seleccionar varios grupos de atajos por defecto (Illustrator, Freehand, Photoshop…) para que no tengas que reaprender lo que ya sabes, y puedes guardar tu propio set personalizado (ideal para transportarlo de un equipo a otro si usas varios ordenadores)

Si te fijas en el panel verás que aparece el menú “Commands”, que es donde se encuentran cosas como Reticulator y otros comandos personalizados:

Si seleccionas un item de menú podrás asignarle la combinación de teclas que más rabia te de, y lo mejor es que el atajo funcionará siempre (ahora veremos por qué esto es importante)

Un ejemplo práctico (al menos para mi : )

Una cosa que siempre me ha molestado de Fireworks (y de Illustrator, y de Freehand, y de…) es que no es fácil cambiar el color de una selección sin hacer malabarismos con el ratón. Tienes que moverlo a donde tengas la paleta de colores, seleccionar el color, y luego volver a donde estabas. Si además tienes las paletas ocultas la operación es un coñazo. Y en el caso de Fireworks, si tienes un texto seleccionado el 90% de las veces te lo acabarás cargando al darle a TAB para mostrar las paletas.

Solución: un comando de Fireworks, claro : )

Guarda el fichero Show Color Picker.jsf en tu carpeta de comandos (en Mac es ~/Library/Application Support/Adobe/Fireworks CS3/Commands/) y asígnale un atajo de teclado (yo he usado Ctrl + Shift + C). A partir de ahora, cuando quieras cambiar el color de cualquier cosa sólo tienes que pulsar el atajo de teclas, y un bello selector de color aparecerá en la posición donde tengas el ratón:

Aún tengo que arreglar un par de bugs, a saber:

• si el objeto seleccionado no tiene relleno, inexplicablemente no funciona con el color #FFFFFF (con todos los demás si). Esto parece un bug de Fireworks, pero tengo que confirmarlo. Bug corregido! Es un fallo de Fireworks, pero he encontrado un bonito “workaround” :P
• si usas el comando con una selección de texto se colorea toda la caja de texto y no sólo la selección. Más que un bug es un “así funciona Fireworks”, pero ya tengo más o menos claro cómo resolverlo, sólo es cuestión de tiempo.

Espero que os sea útil!

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:

Le asignamos un bonito nombre:

lo rellenamos de contenido:

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:

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…

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:

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

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” ;)

Si trabajas asiduamente con retículas y Fireworks, habrás querido asesinar más de una vez al equipo de programadores que decidió que las guías en Fireworks no podían copiarse.

Si eres del Club del Vago™, quizá tengas plantillas para tus retículas habituales.

Pero si quieres entrar en el Club de los Realmente Vagos™, no hay nada como programar tus propios comandos.

Reticulator es un comando para Fireworks 8 o superior (Windows y Mac) que te permitirá crear guías siguiendo una retícula en cuestión de segundos. Desde que empecé a usarlo me ha ahorrado montañas de trabajo, y hoy te lo ofrezco a ti, diseñador estresado, para que dediques tu escaso tiempo a diseñar en vez de a mover guías.

Cómo funciona Reticulator

La cosa es fácil:

• Lo instalas con Adobe Extension Manager
• Creas un documento nuevo
• Seleccionas Commands » Grids » Reticulator
• Rellenas los datos que te pide el comando (a saber: ancho de la retícula, número de columnas y espacio entre columnas)
• Te maravillas de la tecnología moderna

Bola extra: si tienes un objeto seleccionado, la retícula se creará a partir de la posición X de dicho objeto.

Bola extra 2: si (como yo) casi siempre usas una retícula de 960 pixels, 16 columnas y 9 pixels entre columna, tienes un comando que genera esa retícula sin que tengas que introducir los datos.

Reticulator es gratis total, pero se admiten invitaciones a cerveza si acabas usándolo para algo productivo.

Sin más dilación, aquí lo tienes:

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

Pero lo que quizá no supieras es que en tu carpeta $HOME/.ssh/ puedes configurar algunos atajos para tus servidores habituales.

La cosa es tan simple como crear un fichero ‘config’ en $HOME/.ssh/ y añadir esto:

Host sn
HostName sofanaranja.com
User nombre_de_usuario

A partir de entonces, puedes usar el atajo ‘sn’ para acceder al servidor sofanaranja.com usando SSH:

ssh sn

y no tendrás que preocuparte de añadir el nombre de usuario o el nombre de host.

También funciona con SCP:

scp mi_fichero.png sn:www/img

y para ejecutar comandos remotos:

ssh sn ls www/img

(que te dará un listado de todos los ficheros remotos en www/img)

Si tienes más de un servidor “favorito” (estoy pensando en la Ruby Room y su colección de máquinas con nombres atómicos) la cosa es tan fácil como separar cada host en el fichero por una línea en blanco:

Host sn
HostName sofanaranja.com
User nombre_de_usuario

Host bs
HostName bomberstudios.com
User nombre_de_usuario

Yo no es que tenga muchas máquinas… según DreamHost todos mis sitios (unos 15) están en 4 máquinas. Lo que pasa es que como dijo aquel: “Good Programmers Are Lazy And Dumb”. Trabajar menos, en mi opinión, es una obligación moral de todo el que use ordenadores ;)

Y para terminar, otra gran cita:

“I am rarely happier than when spending an entire day programming my computer to perform automatically a task that it would otherwise take me a good ten seconds to do by hand” — Douglas Adams

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

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.

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

• James Edward Gray II (el tipo que está escribiendo el libro de TextMate, para más señas) añadió la librería rcodetools al repositorio de TextMate.
• Unos días más tarde, en un derroche de generosidad, añadió soporte para rcodetools en el bundle de Ruby.

¿Y para qué sirve todo esto, amigos lectores?

Sirve para que, cuando pulsas ⌥ + ⎋ suceda esto:

Así que ya tardas en actualizarte a la última versión del bundle de Ruby :)

Mientras tanto, aquí va un previo de dos programas que hacen lo mismo:

Arriba AppleScript (una buena idea muy mal implementada) y abajo Ruby (el lenguaje de programación zen)

Más detalles, en el próximo post…