Making of NachoLabs v8

Si bien estaba medianamente contento con la forma en que manejaba el contenido de nacholabs7 (había desarrollado una consola online mediante la cual podía autentificarme y subir, editar o eliminar contenido, entre otras cosas), una cosa que me molestó incluso desde el inicio fue que el sitio nunca jamás tuvo un concepto gráfico que lo soportara. El único anclaje estilístico era el fondo, que tenía un pattern vintage muy bonito pero muy insulso. Nacholabs7 atravesó subsecuentes actualizaciones en las cuales intenté patéticamente de dotarlo de algun estilo. Fracasé, señores.

Diseñando v8

Hace un par de semanas me puse a diseñar seriamente v8. Lo que ven a la derecha son referencias gráficas que busqué para extraer elementos del estilo que estaba buscando. Comencé buscando packaging retro en The Dieline; las primeras dos fotos que hay acá son dos de muchos packagings que descargué.
Luego, Google Images y Flickr para buscar ads en viejas publicaciones. Buscaba escpecíficamente revistas que por cuestiones de presupuesto o tecnología, dispusieran de colores contados, porque me interesaba el estilo de bicromía, ese que resulta en que las fotos salgan solarizadas o posterizadas («quemadas», en la vernácula); las próximas dos imágenes pertenecen a esa búsqueda de publicidades impresas.
Por último, se me ocurrió googlear retro web design. Encontré numerosos posts en blogs de diseño mostrando ejemplos de diseño web retro. A esa búsqueda corresponden el resto de las capturas.
Guardé en una carpeta 44 imágenes en total de todo lo que acabo de describir, que constituyeron mi brief gráfico.

Lo siguiente que hice fue copiar en lápiz y papel los elementos gráficos que me interesaban de esa compilación. Sellos, cuadros, divisiones, firuletes, composiciones tipográficas, caracteres, titulares, copetes, retículas, grillas, grafismos. No me preocupé en imitarlos a la perfección: la idea era familiarizarme con el estilo.

Luego, a diseñar en Illustrator. No pongo screenshots porque es lo mismo que ven ahora. Unas cuantas cosas las resolví sobre esta última etapa, no en el papel y no en mis ideas previas; por ejemplo, el fondo de rayas verticales fue un tácate de inspiración y probé en Illustrator, me gustó, y quedó.

La última imagen son outtakes de la sesión de fotos que me hizo don Guillote para mi foto del header. Enjoy.

Maquetado

Una vez que se tiene el diseño en Illustrator o en Photoshop tal como se quiere ver en el navegador, es hora de empezar a exportar las imágenes que van a ser necesarias en el layout del sitio. Para nacholabs v8 fueron sorprendentemente pocas, supongo que porque el diseño es de colores plenos, y por lo tanto no hay necesidad de emular gradientes, sombras, brillos, reflejos, bordes groovies y tal.
Paso siguiente, escribir el layout HTML. Ninguna ciencia acá. Dato curioso: en nacholabs v8 uso tags HTML5 estructurales. En lugar de tener:

...tengo:

Para más información sobre qué uso darle a esto y cómo correrlo compatibilizando con incluso IE5, leete este artículo. Finalmente, una vez que estuve contento con el layout y la paleta de colores y todo, me mandé a maquetar todo.

Normalmente en mis otros proyectos echo mano de algunos recursos de CSS3 para evitar sobrecargar de imágenes el sitio, por ejemplo: bordes redondeados usando border-radius, sombras usando box-shadow. Incluso linkeando algunas fuentes online usando el directorio de fuentes de google. En el caso de nacholabs v8 usé 3 estilos poco comunes:

transition para animar los banners en el header y algunos elementos como las redes sociales en al sección

transform, que permite transformar un objeto por escala, rotación y tal, que es precisamente lo que hacen dichos banners animados. Escalarse al 1.2, es decir, al 120% de su tamaño original.
columns, que permite dividir el texto en columnas. Yo no conocía su existencia antes de toparme con esta propiedad por accidente y ahora me pregunto cómo podría haber vivido sin implementar columnas, dado que si el texto ocupara los ~800px de ancho que tiene la caja de texto máxima, sería bastante ilegible en este cuerpo.

Hay un plugin para jQuery llamado masonry, que hace lo siguiente: toma un conjunto de elementos y los apila en columnas, encajándolos lo mejor posible según sus anchos. Con CSS se puede lograr esto horizontalmente con float:left; o float:right; pero no verticalmente. Cuestión, masonry es lo que uso para «apilar» las entradas en la portada. Y creo que queda fantástico.

El cosito que rota constantemente en el header es un .gif transparente cuya propiedad transform modifico perpetuamente mediante un loop de javascript:

estampaRot=0;
   setInterval(function(){
      estampaRot+=0.3;
      $('.estampa')
         .css('-webkit-transform','rotate('+estampaRot+'deg)')
         .css('-moz-transform','rotate('+estampaRot+'deg)')
         .css('transform','rotate('+estampaRot+'deg)');
   },50);

Originalmente iba a hacer que el header fuera completamente animado, usando transitions css iba a hacer que cada elemento apareciera y todo el escenario se construyera en un máximo de 5 segundos.

Stacey

Hace algún tiempo me topé con la web del señor David DeSandro, quien además de jugar extensivamente con CSS3 y jQuery que opino son el futuro de la web , comentaba su implementación de Stacey.

Stacey tiene la característica llamativa de manejar todo el contenido del sitio sin bases de datos y sin panel de control. Para crear contenido sólo hay que crear una carpeta y poner un .txt adentro. Adicionalmente, es muy flexible para crear templates, y tiene algunas ventajas interesantes, como generar automáticamente un feed ATOM del contenido del sitio, generar un sitemap.xml y generar cachés para ahorrar tiempo de procesamiento de servidor si el sitio es bastante concurrido.

Aún así es un proyecto joven y me topé con algunas barreras. La primera fue que no podía usar PHP en los templates, elemento que necesitaba sí o sí para leer mi último update de twitter, para imprimir la fecha actual, y para rotar azarosamente los banners de la izquierda del header. Bueno, me puse a destripar el código y lo resolví. Si te interesa cómo, podés ver mis commits en github.

La otra ventaja que le exprimí a Stacey fue un sistema rudimentario de tags. Observarás que en el header aparecen las categorías experimentos, portfolio y artículos. Stacey no soporta tags, sino que se maneja por estructuras de árbol de carpetas. De esa forma, todos los posts que yo hago, independientemente de si son experimentos, obras para el portfolio o artículos, están catalogadas en la subcarpeta /aventura — el truco está en que cada post tiene definida una variable, y el parser de Stacey interpreta cláusulas condicionales.
Entonces, cuando vos entrás a la sección /portfolio, Stacey lee todos los posts, pero sólo imprime los que tienen definida la variable @portfolio.

Conclusión

Estoy mucho muy contento con v8 y espero que pase un laaargo tiempo hasta que me canse. Espero que este artículo haya sido de utilidad a alguien; yo aprendí unas cuantas cosas en la realización del sitio.

Me caigo de sueño. Buenas noches, señores.