Una portadilla pasada por agua

Hay días en que Photoshop es tu peor enemigo y otros en que le darías un beso a la pantalla si luego no tuvieras que limpiarla. Hoy, a partir de un par de fotos (un camión circulando, el lateral de otro vehículo "molto longo") y de un montón de imágenes de agua, me ha salido en un tiempo record una portadilla (no estáis viendo la imagen completa ni en todo su esplendor) de esas que te gritan: "esta pa'el currículum". Pues eso.

¿Salir arriba en Google? Toma un poco de SEO

¿Y eso de SEO qué es? Traducido, algo así como optimización de motores de búsqueda (search engine optimization) y, más traducido aún, una serie de técnicas para los algoritmos de los buscadores tipo Google o Yahoo pongan tus páginas lo más alto posible (sin pagar).
En Web Desginer Wall enumeran muchos de esos consejos, particularmente los que los diseñadores podemos encontrar más útiles en nuestro trabajo y que no conviene ignorar. En resumen, estos:

1. Que tu primera página no sea un pantallazo precioso pero sin contenido indexable.
2. Los motores de búsqueda no suelen indexar elementos flash ni pueden acceder a su contenido, ¿menús en flash? No, gracias.
3. No abuses de Ajax, el buscador indexa lo primero que carga, no las recargas asíncronas posteriores.
4. No cambies la ruta principal con redirecciones.
5. Da personalidad a tus enlaces. No pongas en todos "haz click aquí" o "más" (un error que estaba cometiendo yo ayer mismo). El buscador no saca información de textos tan genéricos y además puede pensar que tu web es puro spam.
6. Titula bien. Cada una de tus páginas debe tener su título y debe empezar por los más específico, no por lo más genérico.
7. 65 caracteres. Ese es el espacio que tienes para tus encabezados y títulos de página si no quieres que los motores de búsqueda los seccionen.
8. No por repetir la misma palabra clave en un título seis veces tendrás mejor posición en una búsqueda aunque sí es buena idea que si tu palabra clave tiene más de un sinónimo habitual en las búsquedas te las apañes para que aparezcan.
9. Incluye un "alt" en tus imágenes.
10. URLs legibles. Si es posible, la ruta a tus páginas debe tener sentido y no ser un galimatías tipo lamalamemoria.blogspot.com/?p=135458

Bueno, todo esto (y muchas otras cosas) lo comentan mejor en el artículo original pero las pistas básicas están aquí para que los desmemoriados nos acordemos.

Morrissey al Saturday Night Fiber 08

Los Morán vuelven a la carga intentando hacerle la cama al Summercase. Cuando algunos ya dábamos por cerrado el cartel del Saturday Night Fiber, la reducida versión madrileña del FIB, la organización se nos descuelga con un nombre de mucho peso, Morrissey. Muchos recordamos su último concierto en Benicassim, allá por el 2006 y otros recordarán, yo incluido, su espantada del mismo festival en 2004 (esos operarios retirando las letras gigantes del escenario...). Pues ahora, si nos creemos tanta formalidad por parte del ex de los Smiths, estará dos veces, en Benicassim y en Madrid.
Ahora sí que se nos pone caro decidirnos, ¿dos días de Summercase o un día de FIB y otro en Boadilla? Y eso que las vacaciones y los festivales son para relajarse...

Los atajos de teclado también dan juego

De las cosas más comunes se pueden sacar grandes diseños, quizás más llamativos precisamente por apoyarse en algo que usamos o vemos cada día pero que nunca se nos hubiera ocurrido sacar de contexto para convertirlo en algo distinto. Y para que veáis que no hablo por hablar, que ya sé que a veces lo parece, os dejo un poster de una serie que he encontrado gracias a Speak Up y que usa a nuestros viejos amigos los atajos de teclado como excusa para que nos llegue algún que otro mensaje que en cualquier otro caso probablemente ni nos esforzaríamos en leer.
Para los que no estéis habituados a los atajos del Mac, ese símbolo raro es el equivalente al Ctrl de los PC. Y ya puestos, que se que hay más de un seguidor de Steve Jobs por ahí, ¿alguien sabe cuál es el origen de ese símbolo tan raro?

sIFR

Bajo tan extraño nombre se esconde una técnica para incorporar fuentes específicas a una página web. Para los que no estén muy situados en la materia, una web, salvo que esté hecha en Flash, muestra fuentes que estén instaladas en el ordenador de aquel que la visita. El diseñador puede especificar una lista de fuentes y el navegador del cliente irá probando, una por una, hasta que encuentre una que esté instalada en su equipo. En caso de que ninguna coincida usará una fuente por defecto del sistema. Esto nos deja las manos atadas en cuanto al aspecto que presentará nuestra web dependiendo de quién la esté visitando, pero todo en esta vida, o casi, tiene solución.
Vaya por delante que en todos los textos más allá de los títulos o cabeceras de sección, tendremos que seguir asumiendo trabajar con las fuentes del sistema pero, al menos para esos elementos que dan personalidad a la página, no carecemos de recursos.
Un "truco" clásico y que se usa prácticamente desde que los navegadores comenzaron a mostrar algo más que texto (en el pleistoceno, más o menos), es sustituir textos por imágenes. Esto, obviamente, aumenta el peso de la web, el tiempo de descarga y convierte el mantenimiento en una pequeña pesadilla si tus encabezados cambian frecuentemente. Con todos estos inconvenientes, y dejando aparte cuestiones de accesibilidad, os imaginaréis que la sustitución de textos por imágenes se viene usando, como comentaba antes, en encabezados, elementos fijos y poco más.
Uno de los problemas de esta técnica, el hecho de que el texto real no aparece en el HTML (imaginad que alguien desactiva las imágenes o usa un lector de pantalla, nuestro títulos no existen para esa persona), se solventó cuando el CSS nos permitió mantener nuestro texto en HTML y, al mismo tiempo, esconderlo a la vista y sustituirlo por una imagen (encontraréis una pequeña explicación de una de estas técnicas aquí). Pero se mantienen los problemas de mantenimiento además del trabajo extra que es ir creando una imagen y situándola en la web para cada texto que queramos que use una fuente en particular.
sIFR (os dejo la página oficial y un ejemplo de su uso por uno de sus desarrolladores) es una alternativa basada en Flash, JavaScript y CSS que se sirve de un único archivo swf de Flash en el que se incrusta la fuente que escojamos. A través de JavaScript, este sistema consigue sustituir aquellos textos que indiquemos (todos los h2 o todos los h3 con clase "titular", etc, etc...) por ese mismo texto con la fuente que hayamos incrustado en el swf. El texto en HTML sigue ahí y nuestro JavaScript se encarga de encontrar los textos y hacer la sustitución de forma automática. Seguimos aumentando el peso de nuestra página pero de forma controlada y los problemas de usabilidad y mantenimiento desaparecen (por ejemplo, si queremos cambiar de fuente nos es suficiente con cambiar una única vez nuestro archivo swf).
En principio puede parecer que instalar este sistema en nuestras webs es algo complejo pero el otro día tuve la fortuna de tropezarme con una página que explica, paso a paso, el proceso. La encontraréis en designintellection.com y realiza un seguimiento paso a paso de la instalación, desde de dónde hay que bajarse los archivos, dónde incluir nuestras llamadas a los JS y CSS en el HTML y qué cambios hay que hacer en los archivos para usarlo (ya veréis que realmente sólo hay que manipular un archivo de JavaScript de forma mínima). Baste decir que yo conseguí hacerlo funcionar anoche en veinte minutos así que complejo, lo que se dice complejo, no es.

CSS: Reseteando

Incluso aunque no incluyas CSS en una página web, hay ciertos estilos que cada navegador define por defecto al interpretar el HTML. Así pues, conviene ser conscientes de que existen unos estilos CSS definidos por nuestro navegador (llámese Firefox, IE, Opera, Safari...) que pueden interferir en nuestros diseños, aplicando una regla por defecto cuando hayamos dejado sin definir una por nuestra parte.
Para evitar sorpresas podemos incluir un CSS en nuestras páginas que "resetee" los estilos del navegador, permitiéndonos trabajar desde cero sin interferencias indeseables. En las siguientes dos páginas podéis encontrar dos ejemplos de reglas CSS de este tipo.

• Eric Meyer en meyerweb.com
• En la librería del Yahoo UI

Morgan Freeman recibe el nuevo disco de Radiohead

Aquí os dejo un par de vídeos de Radiohead dirigidos por Adam Buxton y Garth Jennings. En el primero veréis una peculiar interpretación de Faust Arp y en el segundo, Morgan Freeman recibirá su copia de In Rainbows ante la atónita mirada de Brad Pitt.
Ah, podéis leer una pequeña entrevista con Buxton en CR.