Lecturas 2015

El año pasado apenas llegué a leer cinco libros, pero parece que estoy recuperando el hábito. Empecé con poca tracción, pero al final han sido 15 libros para superar el reto planteado por Skeku.

  1. How to make sense of any mess – Marzo. Organización y Arquitectura de Información, con especial atención a la importancia del lenguaje.
  2. Manual de tipografía (John Kane) – Junio. Conceptos básicos, historia, y algunas nociones de retículas y composición. Un poco básico pero interesante como introducción al tema.
  3. Ubik – Julio. Ciencia ficción muy entretenida, que engancha. Entre el humor y el desasosiego y paranoia. Mezcla rara, pero atrapa.
  4. La leona blanca – Julio. Serie del detective Wallander. Ambientado en los noventa y el apartheid. Policiaco, no tan ingenioso como Agatha Christie pero una entretenida lectura de verano.
  5. Asesinos sin rostro – Julio. Serie Wallander. Se presenta un caso con la xenofobia como trasfondo. Lectura ligera policiaca.
  6. Los perros de Riga – Agosto. Serie Wallander. Esta vez investiga en Letonia, con la corrupción del cuerpo de policía en un país despertando a la libertad.
  7. Viaje al centro de la Tierra – Agosto. Superclásico de aventuras. Tras encontrar un misterioso manuscrito, un profesor universitario obliga a su sobrino a acompañarle buscando el camino al centro del planeta.
  8. Matar a un ruiseñor – Septiembre. Lo que es la vida a través de los ojos de dos niños, hijos de un abogado defendiendo a un hombre de color en un pueblo americano del Sur en los años 30.
  9. Interacción del color – Septiembre. Enfocado de un modo práctico, como en sus clases. Se proponen ejercicios que se puede hacer con la app complementaria.
  10. Ve y pon un centinela – Septiembre. Precuela de “Matar a un ruiseñor”. Algo pesado, no tiene mucho ritmo. Algunas partes se salvan, pero prescindible para mi.
  11. Adiós a Berlín – Octubre. Diario de un profesor intentando ganarse la vida en Alemania en los años previos a la segunda guerra mundial. Cabaret, el musical, está basado en él.
  12. El hombre sonriente – Octubre. Serie Wallander. Un accidente de coche que resulta no ser tal. Un castillo inexpugnable donde un magnate espera a Wallander sin perder la sonrisa. Buenas premisas, pero flojea.
  13. Thinking with Type – Noviembre. Manual de tipografía bastante completo, con muchos ejemplos y fácil de leer. Se puede encontrar gratis online además de en su versión impresa.
  14. Cita con Rama – Noviembre. Un gran gran clásico de ciencia ficción. Un cometa se adentra en el sistema solar siguiendo una extraña órbita. Pero resulta que no es un cometa…
  15. Ojos de agua – Diciembre. Otra de intriga, esta vez española, localizada en Galicia. Un asesinato estremecedor, un inspector con carisma y un final como debe ser. De lectura muy ligera y entretenido.

Me han quedado en el tintero The Design of Everyday Things, que empecé en navidades, Civilización y barbarie, y Nada es gratis, aunque de éste he leído artículos sueltos. Quedan pues, los primeros de la lista para 2016.

Esclavos del e-mail. Algunas ideas para mejorar esa relación

Actualización TL;DR: aquí una guía más breve aún para mejorar con el email:

Hace unos días llegué gracias a @antonello a un interesante artículo de The Guardian donde cuentan cómo afecta a nuestro cerebro el uso que hacemos de la tecnología.

Del artículo me gusta especialmente la comparación del correo electrónico con el correo tradicional (o snail mail, como lo llama), sobre todo dos reflexiones:

– Que lleva mucho más trabajo escribir y enviar una carta analógica que un email.

– Que en el correo tradicional está más clara la jerarquía del mensaje en el envoltorio. La diferencia entre una carta, una “carta de Hacienda”, una postal, un post-it o mensaje que dejas en una pizarra es relativamente clara. Dos emails es más difícil clasificarlos por jerarquía hasta que has leído un poco, porque no hay un sistema universal que los identifique, y la mayoría no sabemos “titular” bien los asuntos.

Es un tema muy recurrente estos días, y a mi personalmente la gestión del email me ha dado muchos problemas, sobre todo por no darme cuenta de que tenía un problema con él.

Es una herramienta magnífica, pero adictiva. Es “gratis”, eficiente, flexible, asíncrono, tiene poca fricción comparado con llamar por teléfono o ir a hablar con alguien (oh! ir a hablar con alguien!), que parece que se reservan para grandes ocasiones en algunos sectores profesionales.

Pero es una tecnología relativamente reciente, así que las buenas prácticas no están muy extendidas, o no se conocen lo suficiente, y además, lo usamos mal.

Es asíncrono, pero muchos respondemos inmediatamente. Y eso se realimenta: cuanto más rápido respondes a los emails, más expectativas generas de que vas a responder rápido, y la gente se acostumbra.

Usarlo da sensación de estar “trabajando”, tanto que llega a apetecer a ver si puedes “despachar” algo y sentirte productivo, que hacer algo de trabajo real (más sobre esto en el mencionadoartículo de The Guardian).

Es demasiado fácil escribir o responder. Así, en lugar de ponernos a pensar cómo resolver por nosotros mismos un asunto, es habitual sentirse tentado a echar la pelota al campo de otro, y postergar el asunto hasta recibir la respuesta.

Y mucho más. Por ejemplo, una tontería, siempre dudo si enviar un último email diciendo “gracias”. Cortesía que en realidad molesta más que otra cosa, pues genera otro mensaje, que es una interrupción para el interlocutor. O la pesadilla que puede llegar a ser el responder a todos.

Así que haré una lista de herramientas y técnicas que yo estoy usando para intentar mejorar mi uso del correo electrónico.

1. Conocer mis números: ver cuánto y de quién recibes/envías más y conocer tu propio comportamiento para detectar las mayores anomalías y poder corregirlas. Yo he usado Gmail meter para controlar esto.

2. La mejor forma de dominar el email es recibir menos emails.

3. La mejor forma de recibir menos emails es escribir menos emails. Si yo dejo de escribir un email, yo me ahorro uno, y a alguien le he ahorrado otro. Así que, cuando es posible, intento buscar la respuesta por mi misma.

4. Dominar la bandeja de entrada, tenerla vacía. el sistema de Keith Rarick a mi me ha funcionado, a veces los que llevan estrella se descontrolan un poco, pero se elimina la ansiedad de lo pendiente.

5. El mute es tu mejor amigo.

6. Ayudarse de los filtros para los mensajes que se tienen previstos/clasificados (newsletters, github…). O mejor aún, si no los vas a leer, borra esa suscripción.

7. No me permito tener notificaciones de aplicaciones, en ningún dispositivo. No sólo las del email, también de redes sociales etc. Solamente tengo activas las de Whatsapp para los chats con contactos, ni siquiera grupos.

8. No usar el email para cosas que es mejor hacer de otra forma. Ej. cosas urgentes, rondas de feedback, presentación de trabajos… lo he hecho mucho por email o sistemas de gestión como basecamp (al final es lo mismo) pero ahora lo presento, aunque sea en remoto, y todo va mejor y más rápido.

9. Si nada de esto te sirve, echar 20cents. a una hucha cada vez que envías un email, como si fuera un sello, hará que lo uses con mesura.

Lo que más echo de menos es un sistema estándar para dar la jerarquía, como en el correo ordinario… pero es más complejo y desde que aparezca, llevará su tiempo que se extienda y se respete.

Todavía no he conseguido llegar a mi punto deseado: mirar el correo electrónico un par de veces al día, y evitar hacerlo porque me apetezca o por inercia, pero he mejorado mucho de esta forma.

Hay que tomar las riendas, porque el email es una herramienta para trabajar, pero no es el trabajo.

Frameworks y código semántico

Esta semana me llegó por Twitter el artículo Bootstrap without all the debt. En él se habla de cómo se utiliza Bootstrap, un framework para programación front-end muy popular, de forma que el HTML queda sometido a las clases CSS y propone una forma alternativa para evitar un HTML caótico, lleno de clases sin significado.

Y lo primero que pensé fue ¿es que esto no es lo usual?.

Nunca he sido muy amiga de los frameworks para mi desgracia, tienen muchas ventajas pero me parecen moles, grandes monstruos generalistas, así que intento coger partes y quedarme sólo con lo que me interesa para la producción real.

Y una de las razones es la que mencionan en este artículo: la deuda que asumes en el HTML si lo construyes directamente sobre un framework. Por bueno que sea, puedes acabar con código poco semántico, con cosas como class="span-8", que, meses después, cuando alguien tenga que volver a trabajar sobre ese código, no será fácil de comprender de un vistazo. Además de estar vendido si el framework deja de ser actualizado…

Tras años dando la lata con la importancia del HTML semántico, la independencia del contenido y aspecto, CSS Zen garden y demás, no es cuestión de olvidarse de ello tan rápidamente. Porque el HTML semántico son los elementos, pero también las clases, los id, y hasta los comentarios. Y también es importante el estilo del código, que sea sencillo, breve y elegante o código que ni tú mismo quieres leer.

Es igual de feo class="span-2" que <bold>, hace llorar a [inserte aquí su gurú favorito].

Hace un tiempo era complicado, pero ahora con los preprocesadores de CSS (ej. LESS, SAAS) no hay excusa que valga.

Un ejemplo sencillo es una implementación que estoy preparando de iconos con webfonts, manteniendo la independencia de estilos y HTML. Con una capa adicional de LESS, en este caso, se puede hacer fácil (y seguro que mejor que yo lo he hecho). No solamente ganas en que el código queda semántico y legible, sino en que luego tienes un sistema de iconos independiente y reutilizable para cualquier elemento.

Primero vemos cómo nos ofrece los iconos de forma genérica un framework, por ejemplo icomoon:

@font-face {
     font-family: 'icomoon';
     src:url('fonts/icomoon.eot');
     src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
          url('fonts/icomoon.woff') format('woff'),
          url('fonts/icomoon.ttf') format('truetype'),
          url('fonts/icomoon.svg#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
}

.icon-tag, .icon-comment {
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
}

.icon-tag:before {
     content: "\e00a";
     font-family: 'icomoon';
}

.icon-comment:before {
     content: "\e00b";
     font-family: 'icomoon';
}

Modificando un poco, con LESS en esta ocasión, podemos hacer que esto sea “extendible” fácilmente. Creamos una clase “tipo icono” .icon-webfont, que será extendida por todos los iconos, y éstos serán los que utilizaremos después:

.icon-webfont {
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
}
.icon-tag {
.icon-webfont;

     &:before {
     content: "\e00a";
     font-family: 'icomoon';
     }
}
.icon-comment {
.icon-webfont;

     &:before {
     content: "\e00b";
     font-family: 'icomoon';
     }
}

Si no hacemos esta modificación, LESS no sería capaz de mostrar correctamente el icono, pues no podría extender lo declarado para :before. Pero así podemos usar la misma clase .icon-comment previamente declarada, extendida, y modificar o añadir otras propiedades que los diferencien. Por ejemplo, un icono de comentario cuando queramos usar para un ancla a la zona de éstos, y para un botón de acción, para publicarlos:

.comment-shortcut {
.icon-comment;
color:#0ff;
}

button {
.icon-comment;
background:#090;
color:#fff;
padding:5px 10px;
border-radius:4px;
}

Aparte de no tener que aparecer clases como "icon-comment" directamente en nuestro HTML, tenemos la ventaja de poder reutilizar, centralización para cambios posteriores… qué os voy a contar que no sepáis.

Igual que con estos iconos, con el resto de cosas. Por ejemplo, clases “tipo” para definir los estilos de la tipografía y luego extenderlos en todo el sitio. Y lo mismo para cualquier otro elemento del diseño.

Os recomiendo el artículo original Bootstrap without all the debt, que pone sus ejemplos con SASS. Y, aunque cueste un pequeño esfuerzo, que mantengáis vuestro HTML semántico e independiente.

Vosotros mismos dentro de un año lo agradeceréis.

Curso online de diseño web profesional 2.0: lo básico sobre estándares, usabilidad y arquitectura de la información

Malos tiempos para encontrar trabajo… ¿Has pensado reorientar tu carrera profesional?

Hay mucha gente que necesita buenas páginas web, si te interesa hacerte desarrollador, puedes empezar con nuestro curso de iniciación al diseño web profesional http://www.um.es/estudios/cursos/webpro/

Es el mismo curso que Juan Carlos García Gómez, Yusef Hassan y yo damos desde hace unos años. Un curso de introducción, pero que pone la base necesaria para que se pueda profundizar de forma independiente después, teniendo claros los conceptos básicos.

Es barato, online y te puedes organizar como desees…

Matricúlate hasta este viernes! Pregúntame si tienes alguna duda.

Esta semana en mi Kindle… (5)

Es verdad que la semana pasada fue la primera que di palo, sí… pero aquí va mi recopilación de enlaces, ración doble incluyendo los guardados la semana anterior:

Política, economía, vida y el mundo en general:

Vida freelance, productividad, gestión personal:

Diseño y desarrollo web, UX:

Buen fin de semana a todos, haced algo especial, y ya sabéis… take it slow!