Category Archives: Código

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!

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…

Panel de asignación de atajos de teclado de Fireworks

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:

Panel de atajos con teclas personalizadas

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:

Show Color Picker en acció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:

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

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:

Reticulator 1.5.4

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:

Trucos con SSH

Si trabajas habitualmente con servidores remotos, probablemente ya te estés autentificando con llaves RSA.

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

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

TextMate + rcodetools, el paraiso de Ruby

Si usas TextMate y programas en Ruby, te interesa saber un par de cosas que han sucedido en las últimas semanas en la lista de correo de TextMate Developers:

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

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

Textmate Rcodetools Autocomplete

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

Technorati tags: ,