Una de las últimas virtudes de Fireworks en la nueva CS3 de Adobe es una feature ya conocida por viejos usuarios de Flash. La *9-slice scaling guides* aplicables a símbolos de librería.

El uso principal de esta acción es redimensionar elementos que tengan zonas y/o textos que sean susceptibles de deformarse … y no nos interese que eso ocurra, todo esto dicho así, en bruto (y a lo bruto ;)

Muy útil para generar botones que varían de tamaño, las tan sobadas cajas con esquinas redondeadas y todo lo que se te ocurra.

Voy a poner un ejemplo práctico de uso con una caja super-ajax-dospuntocero con sus pestañas. Por lo que tenemos algo tal que así:

Primero convertimos en símbolo todo el bloque (F8), asignamos el nombre que queramos y marcamos la opción 'Enable 9.slice scaling guides'. Double-click y tenemos algo como esto:

El funcionamiento de las guías es simple:
- Dividimos el área en 9 zonas.
- Las esquinas permanecen inalterables.
- Las zonas entre las dos guías verticales se redimensionan horizontalmente. De igual modo, entre las guías horizontales la redimensión es vertical.
- La zona central se redimensiona tanto vertical como horizontalmente.

Sabiendo esto, nuestro símbolo lo configuramos tal y como pinta lo siguiente:

Salimos del símbolo (cerrar ventana) y nos encontramos nuestro elemento listo para escalar sin deformarse.

Paso 1:

Paso 2:

y eso es todo por hoy, ya verás que le sacas partido ;) buen provecho!

Una de las máximas del diseño: sé detallista. No obvies cosas porque siempre son en las que se fijan los interesados. Por irrelevantes que parezcan.

Y a esas vamos. Es lo que se intenta hacer a diario, cuidar detalles.

Seguramente si lo digo yo no tiene ningún valor, pero dejemos que sea Dave Shea quien lo cuente (en un post ya algo viejo): Icond Design: Sizing.

Juraría que hasta ayer los resultados de las búsquedas en Google Imágenes se mostraban a la forma tradicional y hoy voy y me encuentro con esto:

No se al resto pero a mi me resultaba muy útil tener toda la información de la foto enlazada sin tener que realizar más acciones. Ahora resulta que me obligan a navegar por cada una de ellas para saber su url de origen, dimensiones, peso y formato. Muy cool si, pero poco funcional.

Que puedo decir... no me gusta. No tenéis más que probarlo.

ACT (25-01-07): Sabía que no pasaría mucho tiempo hasta que saliera un hermoso hack para evitarlo.

Genial artículo de Guillerno Brea que lleva por título El muro de los lamentos publicado en ForoAlfa.

Me quedo con una frase que me ha gustado, aunque hay muchas otras que recomiendo leer ...

La formación se logra estudiando, ejerciendo y viviendo, y el diseño es cada vez más una construcción colectiva.

Es de esas lecturas que mientras lees te duele y vas notando las bofetadas coma a coma. Que levante la mano quien no ...

a leer, a leer, he dicho. ;)

De la visita a Fundamentos Web 2006 me quedo con la exposición de Ben Hammersley que llevaba por título Eames, Bach, Michelangelo and the DOM (recomiendo leer el seguimiento en vivo de torresburriel).

De una forma similar a como lo hiciera en su día Javier Cañada para el cuarto aniversario de Cadius, comenzó ilustrando su tiempo con el video Powers of Ten de Charles y Ray Eames, demostrando la importancia de los patrones en la naturaleza y la belleza que lleva implícita.

Mencionó la sucesión de Fibonacci (1, 2, 3, 5, 8, 13, 21, 34, 55, ... ), pero yo me quedo con un paralelismo que me marcó: La Romanesca (Fractal Food - Self-similarity on the Supermarket Shelf).

Repasó varias obras de arte y fenómenos naturales, de espectaculares simetrías y magníficas composiciones, para cerrar con un mensaje claro:

Indent your fucking code!

Probablemente no haya sido literal, pero es el mensaje que me ha dejado grabado por su espontaneidad en el escenario, y fue cuando todos los allí presentes arrancamos con un aplauso al unísono.

No hay mejor ejemplo que recurrir a la naturaleza o al gran Velázquez para comprender que un código bien escrito, estructurado y ordenado es puro arte.

Intentó cerrar, al igual que lo hiciera Javier, con el homenaje que Matt Groening ofreciera usando a sus mejores comunicadores, los Simpsons, pero en este caso la tecnología lo dejó en un simple intento, así que aquí lo dejo para aquel que se haya quedado con las ganas: Powers of Ten by The Simpsons.

Veo en processblack un enlace que a su vez le han dejado a él en la bandeja de sugerencias de su del.icio.us (maravillas de la red; no tienes que buscar nada, las cosas interesantes se cruzan en tu camino de una forma u otra).

Cuando diseñamos una web, ya sea en Fireworks o en Photoshop, lo primerísimo que hacemos es trazar una líneas guía que nos sirven de retícula. Guardar las proporciones es, quizás, el paso más importante para realizar un diseño bien resuelto.

A la hora llevar el diseño a código, al lío con los XHTML y los CSS, normalmente confiamos en nuestro buen ojo para transportar las medidas del diseño al navegador, y tenemos que andar rectificando pixel arriba pixel abajo constantemente para calcar el diseño en programación.

En Smiley Cat nos animan a usar una retícula como fondo al plantear el layout básico del site, para eliminarlo posteriormente cuando esté todo perfectamente alineado y a la medidas oportunas.

A mi me ha picado, y lo pondré en práctica a la próxima oportunidad que tenga de meter mano a código. Si lo pones en práctica, cuenta la experiencia.

Tienes una retícula disponible para copypastear en el post de Smiley Cat.

Hace relativamente poco, en The Cocktail, lanzamos UEM Postgrado como la hermana pequeña de la Comunidad UEM, dos grandes sitios gestionados, pensados y materializados en tiempo record y en unas condiciones de las que estamos muy orgullosos. No es para menos; proyectos hechos enteramente en casa, con el mejor equipo humano.

Pues resulta que la mitad del proyecto, la parte de Postgrados UEM, es finalista en los CSS World Awards 05/06. La única web española selecionada en las 10 categorías, y seleccionada entre las 150 páginas que optaban a la nominación en la misma categoría.

Todo un honor para el equipo, sin duda.
enhorabuena a los culpables de todo ello... y suerte! ;)

Juro que he bebido cervezas las justas, pero estaba curioseando por Flickr y de repente todo cambió en mi pantalla.

Flickr rediseña en lo que han llamado versión Gamma. Se han cargado el famoso pié de flickr que tantos han usado/odiado/copiado y lo han sustituido por una navegación de primer nivel más concreta, eso sí, acompañada de un horrendo y espantoso desplegable.
Será cuestión de acostumbrarse, pero la mitad de esas opciones a priori me sobran.

Los listados de sets a la derecha, bien! El pié de página mucho más concreto y dirigido al usuario estándar; a simple vista no he encontrado los accesos directos dedicados a blogueros y desarrolladores que antes estaban en el pie.

Yo ya era capaz de navegar por flickr a ciegas... ahora tendré que aprender a andar de nuevo.

Y el buscador! no me puedo olvidar del tan deseado buscador de flickr. ¿utilidad? la que tú le encuentres, sin más.

La pregunta: ¿era necesario el cambio? ¿creeis que mejora la experiencia?

Para saber más datos del cambio, en el blog de flickr están todos los detalles de la revisión.