Arreglando las teclas Inicio y Fin en Mac

Si eres un usuario de Mac que viene del mundo Windows (o Linux) te habrás dado cuenta de que el comportamiento de las teclas “Inicio” y “Fin” en Mac no tiene nada que ver con otros sistemas operativos.

Lo mismo sucede con las teclas “Avanzar Página” y “Retroceder Página”, que en Mac avanzan y retroceden, pero no mueven el cursor de sitio…

Si quieres que la tecla “Inicio” vaya al principio de la línea, la tecla “Fin” vaya al final, y las teclas de Avanzar y Retroceder página funcionen de una forma racional, sólo tienes que crear un ficherito de texto con este contenido:

{
  "\UF729"  = "moveToBeginningOfLine:";
  "$\UF729" = "moveToBeginningOfLineAndModifySelection:";
  "\UF72B"  = "moveToEndOfLine:";
  "$\UF72B" = "moveToEndOfLineAndModifySelection:";
  "\UF72C"  = "pageUp:";
  "\UF72D"  = "pageDown:";
}

y guardarlo en ~/Library/KeyBindings/DefaultKeyBinding.dict (creando la carpeta si no existe todavía)

Poseso! :)

Resumen de mi clase en el Programa Vostok

El pasado viernes 6 de julio tuve el inmenso placer de impartir una clase a los alumnos del Programa Vostok

En principio, el tema de la clase iba a ser “Diseño con Retícula”. Y este iba a ser el clásico post de “aquí está el PDF de la presentación”.

Pero ni el título es correcto ni el PDF tiene sentido si no estuviste allí, así que este será el ya-no-tan-clásico post de “voy a intentar contar de qué hablamos, a ver si tiene sentido” :)

Aquí está la primera diapositiva de mi presentación:

Presentacion Vostok 001

Empezamos mal… pensando en el título, me di cuenta de que hablar de “Diseño con Retículas” es casi lo mismo que hablar de esto:

Presentacion Vostok 002

Es por ello que, 13 minutos antes de mi clase, decidí que este era un título mucho más apropiado:

Presentacion Vostok 003

¿Cómo que la belleza está en las matemáticas?

Me explico…

A veces me gustaría pensar que la profesión del diseño (así, en general) se parece más a una ciencia que a una artesanía. De vez en cuando leo frases como esta:

Somewhere along the way an idea for the design pops into my head from out of the blue. I can’t really explain that part; it’s like magic — (De algún artículo de Design Observer)

Y la cita, aunque bella, no puede ponerme más nervioso… la idea del diseño como un producto exclusivo de la inspiración y el “talento” (signifique lo que signifique) va en contra de la propia definición de diseño (de una de las 3500, claro :).

En este contexto, el diseño es la solución (gráfica, conceptual, material…) a un problema (gráfico, conceptual, material…) que resulta de aplicar las reglas básicas de comunicación que sean compatibles con las limitaciones de ese proyecto.

¿Quiere esto decir que el diseño es una colección de fórmulas? ¿Que un cacharro hábilmente programado puede resolver un problema de diseño?

Y la respuesta a las dos preguntas es “No, pero casi” (o “No, pero en muchos casos nadie notaría la diferencia” :)

Dicho de otra forma: si has podido aprender matemáticas, puedes aprender a diseñar.

Si además has descubierto que la proporción entre los lados del rectángulo estadísticamente “más bonito” es la proporción áurea, que las curvas que menos “chirrían” corresponden a una fórmula matemática, y que los tamaños de las tipografías se miden con números y no con tallas, entonces llegarás a ser un buen diseñador.

Resumiendo: en tu arsenal de herramientas, tienes que tener una calculadora :)

Alguien que de esto sabía bastante era Charles Eames, y para profundizar un poco más en el tema de “qué es el diseño” es totalmente recomendable leer la entrevista que publicó la revista ARQ en diciembre de 2001.

En ella, Eames expone la idea del diseño como plan.

Presentacion Vostok 004

Y, volviendo al tema original de la clase:

La retícula como plan: tus amigas las limitaciones

Eames, mente preclara donde las haya, nos da en esa entrevista una de las claves fundamentales a la hora de diseñar: es obligación del diseñador buscar las limitaciones que atañen a nuestro proyecto.

“Limitación” es una palabra con ciertos tintes negativos. Impresión limitada a dos tintas. Diseño limitado a 800×600. Proyecto limitado en presupuesto. “No podemos hacerlo por una limitación de la plataforma…”

Y en este punto no puedo dejar de citar a Manuel González Noriega, autor de una de las mejores frases que he leído jamás sobre el diseño web:

La gente que afirma que son los estándares web lo que les limita como diseñadores son muy parecidos a la gente que afirma que es la Ley de la Gravedad la que les limita como bailarines clásicos

Pues eso, que acabarás descubriendo que son justo las limitaciones lo que hace interesante este trabajo. Y por eso, cuando un proyecto no tiene bastantes limitaciones nos inventamos las nuestras: la retícula :)

La retícula, esa gran desconocida

Una retícula no es más que una colección de guías que nos sirven para definir la posición de los elementos en un diseño. Simple, ¿no?

La belleza en el estilo, la armonía, la gracia y el buen ritmo dependen de la simplicidad – Platón

Cuando estás diseñando con grandes cantidades de incertidumbre (por ejemplo, un periódico), la retícula se convierte en una herramienta vital para dotar de orden y armonía al conjunto.

Un ejemplo:

Presentacion Vostok 005

Si piensas en adjetivos para esta ilustración, casi seguro que “claro” y “ordenado” están entre ellos. Y eso es así (aparte de por el “estilo infografía” :) porque los elementos de la ilustración están dispuestos en una retícula como esta:

Presentacion Vostok 006

Bonito, ¿verdad? :)

Muchas veces, “ver” la retícula que se ha usado en un diseño es un poco complicado. Lo que no te costará ningún trabajo es ver cuándo no se ha usado una retícula…

Presentacion Vostok 007

Se me quedan en el tintero algunos temas interesantes que debatimos en clase (¿cómo se crea una retícula? ¿ordenador o papel? ¿de verdad se usa? ¿es la retícula un entregable de diseño?) pero para no hacer este post infinito termino con la siguiente bibliografía:

Y para los que estuvieron allí, ahora sí, el PDF de la presentación en clase.

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