Sofa Naranja ahora, con un 125% más de naranja

Atajos de teclado en Fireworks

Ya he comentado en alguna ocasión que en la Gran Corporación somos fans de Fireworks. Tengo pendiente un post más detallado explicando por qué, pero de momento aquí va un pequeño adelanto : )

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!

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:

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…

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:

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

Reticulator, un creador de retículas para Fireworks

Una de las herramientas esenciales en el diseño de webs (aparte de un café decente y cantidades industriales de música) es la retícula o grid.

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:

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