Pero, este post es sobre la música, ¿no? Sin más, lo que estuvo sonando por acá este año, en formato ranking:

1. Grimes – Visions
2. Lotus Plaza – Spooky Actions at a Distance
3. The Walkmen – Heaven
4. Beach House – Bloom
5. The xx – Coexist
6. Chairlift – Something
7. John Talabot – Fin
8. Chromatics – Kill For Love
9. Alabama Shakes – Boys & Girls
10. Hot Chip – In Our Heads

También escuché mucho del 2011 —algo que siempre me pasa, escuchar mucho del año anterior—, sobre todo Metronomy, Destroyer, Frank Ocean, Atlas Sound, The Horrors, y claro, LCD Soundsystem. “A vos te definió mucho esa banda”, me dijo un gran amigo… y creo que tiene razón.

El tema que describe perfectamente este 2012: Heaven, de The Walkmen.

“Our children will always hear
romantic tales of distant years…”

¡Que tengan un excelente 2013!

Sin embargo, mi cafetera me es extraña. La siento compleja. No coincidimos, no tenemos piel; su belleza no radica en su simplicidad, sino solo en cuestiones superficiales y cosméticas. Me ha desilucionado por completo.

No hablo de la complejidad para preparar un café –después de todo, se trata de llenarla con un poco de agua, un par de cucharadas de café y esperar–-, sino hablo de la experiencia de uso: la complejidad para entender cómo preparar un café.

Les cuento una historia: hoy llegué a mi oficina y quise hacerme un café.

Abrí la tapa superior para ponerle un poco de agua, y ahí empezó el problema: tuve que pensar un poco para convencerme que el agua no mojaría algún circuito. Al no tener un contenedor con una forma identificable para mí –en forma de tubo, tal vez– mi cerebro me decía que estaba poniendo el agua en el lugar equivocado. Además, el contenedor es tan chico –por una cuestión estética– que debo tener mucho cuidado en no voltear agua fuera del recipiente, lo cual es frecuente si estoy distraído.

Luego, cuando agarré el recipiente en donde se filtraría el café ya preparado, sin querer mis torpes dedos tomaron la parte superior del mango y su tapa se levantó, desbalanceando el objeto. Me asusté. Qué pasaría si hubiera tenido café caliente, recién hecho? “Tal vez podría quemarme” me dije. El contenedor cumple dos funciones: cargar agua y tener el café filtrado listo. Dos funciones para un mismo objeto. Entonces, mi cabeza tiene ahora que pensar en no tratar de equivocarse de nuevo, y agarrar el mango pero sin tocar su parte superior accidentalmente.

Cuando fui a buscar el café recien preparado, levanté la tapa superior y casi doy vuelta la cafetera: demasiada fuerza aplicada en un punto que la desequilibró.

Al final del día, luego de esta ardua tarea mundana y de oficina, mi cerebro debe ahora entender que el acto de preparar café es sumamente complejo y debe hacerse con precaución, solo por manos delicadas, bajo supervisión y en un entorno controlado.

O no.

Los productos que compramos, que usamos todos los días, son pésimos. Son complejos: nos obligan a pensar para usarlos. El pensamiento racional para entender cómo funciona un producto es su barrera de entrada y los manuales de instrucciones son la barrera por excelencia en el diseño de experiencia.

El problema no es el qué, sino el cómo. Cómo hace café? Cuales son los pasos que hay que seguir para hacer un café? Qué tengo que pensar para hacer café? Después de todo, porque tengo que pensar en primer lugar cómo hacer una tarea tan pero tan sencilla?

Es por eso que los productos de Apple son tan geniales: el diseño de experiencia está tan bien pensado e integrado con el diseño del producto que no nos enfocamos jamás en el cómo, sino en el qué. A mi no me importa saber cómo hace esta máquina fabulosa para funcionar, solo me interesa saber qué puedo entrar a Internet y escribir un post en mi blog.

Ahora vuelvo. Creo que necesito un café…

For years, it has been my editor of choice, the first thing I open —if it’s not already opened— when I do client work.

However, I’ve been hearing good praise for Sublime Text 2. This relatively new, cross platform text editor has definitely caught my attention. And because the alpha version of TextMate 2 never grown on me, I decided to give it a try.

To make things fair and see if I will ever switch, I decided to use real templates from a real project. After all, if this was about to replace my main text editor, it should behave like that. This is what I’ve found after a week hacking with CSS3 and HTML5:

It’s beautiful. There’s something incredible beautiful in the lack of controls: it gives you the flexibility to make the interface what you want. Throw in your favorite color schemes and you will end up with an interface tailored to your tastes. Make sure to download Soda, a custom UI theme for extra gorgeous-ness. Menlo, the default font shipped with Sublime Text 2 is a refreshing twist on Monaco too.

It’s fast. And I mean, damn fast. How fast a black window could be? Just compare it with TextMate when opening files, and specially, when searching in files. Those extra microseconds you win really make the difference if you spend your day hacking at code.

It’s clever. Sublime Text 2 seems like a natural extension for your brain. Need to open a file? Hit CMD + P and start typing the file you need. No sidebars, no file dialogs, no nothing: just think and type. Writing CSS is damn inteligent too, the autocomplete module is super fast and predicts your previous/most used properties.

It’s functional. Sublime Text 2 has some cool window modes to help you focus, the one I’m using to write this text is called Distraction Free Mode, which blacks out whatever you have in your screen and presents just the text, slightly centered, in full screen mode. No dock, no menu bar, just a black canvas to work with.

It’s advanced if you want it to. In TextMate, I don’t only use Snippets —triggered by the convenient TAB— key, but Commands. These make certain operations with the text you have. For example, if I have a sentence that I want to mark it as a linked list item, I can just select the words and hit CMD + Shift + J to wrap them between LI and A tags. This makes coding a breeze. While TextMate Bundles are natively soported —just drop them out in the ~/Library/Application Support/Sublime Text 2/Packages/ folder—, Commands are a different story. I had a hard time figuring how to work this, but for now I just fixed this by adding some custom key bindings. Go to Key Bindings – User in the Sublime Text 2 menu and paste something similar to this:

[
  { "keys": ["super+shift+j"], "command": "insert_snippet", "args": {"contents": "<li><a href=\"\">${0:$SELECTION}</a></li>" } },
  { "keys": ["super+shift+p"], "command": "insert_snippet", "args": {"contents": "<p>${0:$SELECTION}</p>" } }
]

In short, this makes two new key bindings: the first one triggered by CMD + Shift + J (wraps selection in LI and A tags), and the second, triggered by CMD + Shift + P (wraps selection in P tags). Easy, no?

Extensible. Sublime Text 2 is extensible via Packages. Install the Sublime Package Control Manager for an easy way to browse and install new functionalities. I installed a simple, per-file ToDo Manager that I can always access via the Command Palette, by hitting Cmd + Shift + P, but literally there are tons of Packages out there.

So to sum up, the experiment was definitely an enjoyable experience. I had a learning curve of zero: switching from TextMate was very smooth and a matter of seconds. There are a lot of features that I didn’t review here, like the Minimap, the multiple select and so on, so do yourself a favor and try this gem out. It rocks.

Viajé mucho, muchísimo. Desde Nueva York hasta Londres, pasando por San Francisco, Los Angeles, Amsterdam, París, Barcelona y Ginebra. Trenes, incontables viajes en aviones, caminatas con mi mochila. Hice Couchsurfing, dormí en el piso, en hostels, en casas de amigos, alquilé bicicletas, un auto… no tenía nada, solo mi mochila, pero fui feliz.

Viví afuera. Tres meses en Nueva York y tres meses en Europa, en Ginebra principalmente. Todavía no me lo creo. Tener la oportunidad de vivir en otras ciudades, tan distintas entre sí, y en el mismo año, es un placer, un privilegio. Algo que me marcó para toda la vida, sin duda.

Descubrí que me apasiona la aviación. A mi fobia de volar, la convertí en pasión: amo la aeronáutica y todo lo relacionado a ella. Tal vez era un sentimiento muy guardado dentro mío, pero ya no hay vuelta atrás: en este año que comienza empezaré mi curso de Piloto Privado, en un caño y lona, pero a volar. Como hobby, para sentir la adrenalina de despegar, de aterrizar, la libertad que te dá volar.

Viví intensamente y sin temor. Desde ese atardecer con un nuevo amigo en alguna playa de la costa de Los Angeles, hasta esos tres locos días de sol y mucha música en Coachella, en algún lugar perdido de California. O los días de bicicleta en Amsterdam. O los viajes de subte en Brooklyn. O las charlas hasta la madrugada con mi amigo de Lausanne, Suiza. Todos los días, absolutamente todos, aprendí algo nuevo, entendí y me descubrí.

Cumplí 30 años. El milestone tan temido, llegó. Y los cumplí en Ginebra, festejando con nuevos amigos en una noche inolvidable. Hice todo para retrasar la fecha, no les voy a mentir: viajé, trabajé como un loco, dormí poco, hice todo lo que quería hacer antes de cumplir 30, y lo cumplí. Y estoy satisfecho y pleno… como decían por ahí: “mis 20 nunca hubiesen creído mis 30″.

Conocí gente maravillosa. Desde mi amigo Marco, que dejó absolutamente todo y se fue a pasear por el mundo solamente con su bicicleta, por dos años, hasta mis amigos de Innvatis, que me dejaron días inolvidables y charlas sinceras. Los aprecio, amigos, a todos, gracias por estar ahí, en todas.

Y por último, me fuí de Córdoba. Luego de 11 años de vivir en esta linda ciudad, me fuí. Vendí mis cosas, cerré el contrato de alquiler, y me vine a vivir a Jujuy, donde nací. Temporalmente, claro. Porque mi próximo destino será otro: quiero irme a vivir a Europa, quiero seguir conociendo el mundo, quiero seguir siendo libre, quiero seguir deslumbrándome.

Pero no puedo terminar mi balance sin nombrar a una persona que me apoyó durante todo el año, en las buenas y sobre todo, en las malas. La que me acompañó incondicionalmente en la distancia, a la que llevé en el asiento de atrás de mi bicicleta en Amsterdam, la que se bancó los fideos con pesto en París. La que aguantó mi mal humor, mis alegrías, la que me hace entrar en razón y bajar un cambio. Su amor incondicional me hizo sentir fuerte y realmente poco hubiera hecho sin su apoyo: Te amo, princesa.

Soy feliz: tengo una familia que me apoya, una novia que me ama, un trabajo respetado y llegué a los 30 como nunca me lo hubiera imaginado. Para mí, el 2012 será la continuación del 2011: no quiero parar, no voy a parar, mi vida es demasiado excitante como para dejarla pasar, como para pasármela durmiendo.

Brindo por este 2011 que fue intenso, excitante, algunas veces amargo, pero sobre todo, con mucha libertad.

Hoy me tomé 2 horas de mi día para rediseñar esto, directamente desde el browser. Está lejos de ser ideal, pero me pone muy contento poder sacarme el viejo traje de encima, y terminar un gran año con un nuevo diseño. Fresco, que salió de mi cabeza sin filtros, sin pensarlo. Estoy satisfecho de ahora poder tener un lugar simple en dónde pueda escribir—bastante oxidado estoy, y sobre todo, experimentar.

Allá vamos.

P.D.: El formulario de comentarios está en proceso de construcción, por favor dejen sus comentarios por Twitter.

Pero llegó el día en el que me encontraba trabajando 24 horas. Me despertaba, me preparaba un café, y trabajaba hasta la noche. Mi vida social prácticamente no existía: Solo dormía; y el resto de las horas trabajaba.

Hace un tiempo le pregunté a mi amigo Martin Aberastegue si conocía gente que quisiera compartir una oficina. Mi idea era iniciar un emprendimiento similar a Coworking Buenos Aires: en donde muchos freelancers se juntan a trabajar en una casa compartida. Martín me presentó a Emilio, uno de los dueños de la empresa Innvatis, que justamente tenía un espacio disponible en su oficina.

La semana pasada nos conocimos todos, y me invitaron a mudarme a su oficina. Hace un rato terminamos de acondicionar todo, y ya estamos trabajando todos juntos.

Hoy empiezo una nueva etapa en mi vida laboral: en oficina junto a mis nuevos compañeros, y tratando de limitarme a trabajar de 9 a 6pm. Una etapa que incluye valorar mas mi tiempo: desde leer mas, hasta finalmente empezar algo que venía posponiendo desde hace mucho tiempo: empezar el curso de piloto privado de avión, que bueno, les contaré en un próximo post :-)

Pero además, como quiero profundizar en este enfoque, que me parece sumamente interesante, he decidido crear un sitio ficticio que realmente muestre este concepto a fondo. El proyecto también me ha servido para experimentar más con HTML5 (y sacar mis conclusiones, que escribiré en este artículo). Las animaciones en CSS3 vienen de yapa con este artículo.

Este artículo es largo, y además de hablar sobre el Diseño Adaptable (una traducción gentilmente sugerida por José Kusunoki), también explica sobre el proceso de construcción de un sitio desde cero: desde bocetos en papel, pasando por conceptos en Fireworks, hasta el maquetado en HTML5 y CSS 3.

Espero poder escribir también sobre ciertos conceptos que andan dando vueltas en la web en inglés y casi nadie habla en español: Responsive Design, Design in the Browser, Progressive Enhancement, tipografías embebidas utilizando Typekit, grillas, etc.

Pero más allá de introducir las tecnologías y metodologías, reflexionaremos sobre lo que significan para nosotros en el día a día. De nada sirve leer un cómo, si no se entiende el porque.

Breve introducción al diseño adaptable

No es trivial reflexionar en que cada día mas y mas personas acceden la web desde dispositivos móviles. Hablamos de handhelds (un iPhone, un Android), o tablets (iPads, por ejemplo). Si pensamos que una visita puede generar una venta o conversión, es imprescindible entonces poder ofrecer una versión del sitio aunque sea mínimamente adaptada para pantallas pequeñas.

Hay varios enfoques para resolver este problema. El mas conocido tal vez sea diseñar el sitio con un layout líquido (o sea, que sus columnas estén definidas en porcentajes, y éstas se adapten al ancho de la ventana del navegador). Esto funciona hasta cierto punto, pero se complica cuando el tamaño de la ventana es extremadamente chico o muy ancho: algunos elementos se pueden cortar, o las proporciones pueden deformarlos.

El otro enfoque, con gran auge estos días y del que hablaremos en este artículo, es el diseño adaptable: optimizar el sitio, utilizando media queries, para ofrecer la mejor versión para el tamaño de la pantalla del usuario. Parece un tanto complejo, pero en la práctica no lo es.

En mi opinión, el diseño adaptable no se trata de una metodología de desarrollo: es un error pensar que todo se resume a sacar los float de los elementos y mostrar el contenido en una sola columna. En realidad, estamos hablando de optimizar los elementos de una página para el tamaño de la pantalla del dispositivo, pero sobre todo para las condiciones de uso de móviles.

Esto quiere decir que, si tenemos un sitio con un gran uso de imágenes, tal vez en un iPad éstas deban mostrarse mas prominentemente, y por lo tanto deban ser mas grandes que en su version desktop. O, que en un iPhone, el area para hacer clic deba ser mas grande para adecuarse al tamaño del dedo humano (una aplicación de la ley de Fitts, claramente).

No hay que olvidarse de las condiciones de los usuarios móviles: apurados, con muchas distracciones, generalmente requieren lo fundamental. Esto conlleva a hacer un serio análisis de lo que realmente importa en el sitio: ¿En el subte, apretado, con poca movilidad y tiempo, si el usuario está viendo mi sitio en un iPhone, que es lo imprescindible que debo ofrecer?

Como tantas cosas en la web, el diseño adaptable entonces es una mezcla de usabilidad, diseño de experiencia y algo de metodología de desarrollo.

Sobre el proyecto de ejemplo

El proyecto que vamos a diseñar servirá para mostrar trabajos de un negocio o un artista. Debe ser algo bastante general, que pueda adaptarse, con cambios mínimos, a diferentes tipos de mercados: de Negocios, Personal, de Fotografía, etc. Por lo tanto el énfasis, visualmente hablando, estará en las imágenes, aunque el diseño deberá ser lo suficientemente invisible como para dejar que el contenido sea lo mas importante.

Utilizaremos tipografías provistas por Typekit (en su momento hablaremos sobre esto también). Las imagenes de ejemplo serán de productos de Braun diseñados en la época de Dieter Rams. Rams es tal vez uno de los mejores diseñadores industriales de la historia, y comparto plenamente muchas de sus observaciones sobre lo que el diseño debe ser: funcional, simple, práctico, al punto.

El sitio estará fuertemente basado en grillas, que permitirán construir los templates mas rápidamente en forma modular: diseñaremos un sistema, no un sitio. Un sistema que funcionará tanto en un ambiente desktop, como en móviles o tablets.

Bocetos en papel y en el browser

Los bocetos en papel son importantísimos, porque permiten pensar ideas y desecharlas rápidamente, con costo prácticamente cero.

En diseño adaptable son indispensables: nos permiten pensar en los problemas que tendremos en las pantallas chicas, y por lo tanto, dibujar posibles esquemas de layouts que podríamos ofrecer. Yo personalmente trato de forzarme a bocetar mas y mas en papel y no pasar directamente al browser o Fireworks/Photoshop.

¿Pero cómo? ¿Bocetar en el browser?

Bocetar en el browser es mi adaptación a otro término en inglés con bastante hype el año pasado: Designing in the browser. Se trata ni mas ni menos de olvidarse de Fireworks/Photoshop y pasar a crear directamente las interfaces utilizando código, y un navegador para mostrar los cambios.

Aunque esto funciona para sitios relativamente simples, pequeños y poco funcionales, en la realidad es poco práctico: si hay un cambio drástico de diseño de experiencia, el trabajo puede ser frustante y duplicarse, al rehacer todo de nuevo.

Tal vez un ejemplo pueda aclarar esto. Imaginemos que tenemos un template en HTML, con los label de un formulario ubicados arriba de cada input. Pero por un análisis de usabilidad posterior, se deciden cambiar al costado de cada input, y esa será la versión final del sitio. Este cambio drástico generará un costo de maquetación muy superior al que se generaría al simplemente bocetar esto en papel desde el principio o en un mockup estático en Fireworks/Photoshop.

También limitan la creatividad: nos estaremos enfocando solamente en producir templates limitando el proceso de experimentación para “contar la historia”, o resolver el problema.

En cambio, parece ser que la única justificación para diseñar en el browser esté en el diseño de prototipos rápidos. Utilizando un buen framework de grillas y un set de módulos con componentes fácilmente reutilizables, podemos construir en pocas horas una aplicación para que posibles usuarios puedan testear rápidamente.

Esto es todo por ahora. En la próxima parte de este artículo hablaremos sobre frameworks de grillas (y explicaré el mío, que se usó para crear este sitio que están viendo), tipografía, prototipos y más diseño adaptable.

Colorful, affordable (about $100), relaxed, minimal, modern… this watch is just a mirror of my personality, and so then I couldn’t do anything but just run to a Billabong store and buy it (in green, because I didn’t know there was a yellow version until later!).

You can see all available colors in Nixon’s site.