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

Por fin voy a animarme a escupir algo de código en estas líneas y, ahora que estoy liado en faena, voy a empezar con las CSS's.

Como creo que lo mejor es empezar por el principio, voy a mostrar lo primero que suele ir en todas las hojas de estilo que me toca lidiar:


* {
margin:0;
padding:0;
}
body {
font-size:.8em;
}


Poniendo a 0 (cero) el margin y padding de * conseguimos que todos los elementos que existan en el HTML pierdan los márgenes, indentados y espacios que llevan por defecto. Ahora tenemos mejor control de las etiquetas y evitamos así el uso de márgenes con valores negativos (que tantos problemas dan), por ejemplo.

El font-size del body nos define un tamaño para las fuentes. A mi me resulta cómodo usar .8 (0.8em) porque de esta forma se crea una equivalencia aproximada de 1em=10px, con lo que se hace muy fácil trabajar con em's (cuidadín con las herencias).
Otro cálculo al que le tengo pilladas las medidas es fijar el font-size a 120%, pero esa es otra historia. Eso sí, en px nunca (!) o te perseguiran las fuerzas oscuras del ejército WCAG (Web Content Accessibility Guidelines).

Básico, básico... otro día más y mejor.

Rescatando links, haciendo limpieza en los bookmarks de Firefox y poblando del.icio.us (tarea que me llevará aún algo de tiempo), me he encontrado con un link imprescindible para todo desarrollador/maquetador que paso a publicar en mi rinconcito.

Imagino que muchos ya conocéis el sitio y los cheat sheets que le han hecho famoso, pero la última sorpresa es que Dave Child ha creado una chuletilla para los desarrolladores de Ruby on Rails.

Recapitulemos que me pierdo: ILoveJackDaniels es un site donde su autor ha ido publicando una serie de chuletillas básicas para desarrolladores y/o maquetadores (y porqué no, diseñadores2.0), con comandos, atributos, parámetros, valores, etc, etc de diferentes lenguajes como CSS, PHP, ASP/VBScript, Mod_rewrite, MySQL, JavaScript, HTML Character Entities y, por último, la novedosa chuleta de Ruby On Rails.

Los podrás encontrar en formato PDF y PNG en la mayoría de los casos, y su enlace directo está escondido tras este texto ;).