Anima Mail.app con una firma CSS

Esto puede horrorizar a los que hayan conocido mi etapa “ASCII-ribbon” (por mails sin HTML ni formatos propietarios adjuntos). A los que ayudé en su día a configurar los excelsos Pine o Mutt quizá ni me saluden por la calle. Pero todo el mundo tiene derecho a cambiar, y cuando uno quiere dar a conocer su blog todo vale. Una de estas maneras de venderse y rendirse así al fenómeno weboscero es adjuntar en cada mail código HTML con un feed con las últimas noticias del blog, y de paso información acerca del remitente. Ésta es mi nueva firma, chicos:

Consiste en código HTML formateado con una hoja de estilo embebida (inline) en el propio código (de lo contrario, GMail puede dar problemas). En la cabecera de la firma hay una foto de 24×24 pixels, almacenada en un servidor, y mis datos de contacto – En el pie, un precioso GIF animado con las últimas noticias de El Geek Errante, que Feedburner se encarga de refrescar.

Cabecera
Una firma no sería tal sin datos como nombre, e-mail, screen-name de AIM, etc. Salvad este archivo y cambiadlo a placer en cualquier editor de texto. Si no tenéis un servidor donde poner la foto (seguro que podéis en el de vuestro ISP), quitad el enlace correspondiente. Después de trastear con la firma, dejad la ventana del editor abierta.

Pie (bloggers usuarios de Feedburner)
La gente de feedburner se preocupa por nosotros y pone a nuestra disposición un servicio llamado “Headline Animator” al que puede accederse desde las páginas de administración del feed:

Una vez dentro del servicio, elegimos el tema “Email Signature” y cambiamos el formato de la fecha. Después, activamos el servicio. En la página resultante, hay que pedir que se nos muestre el HTML para embeber en la firma:

Al aceptar, se abre un pequeño popup. Desactivad la opción “Include a Grab this link”. Ahora podemos guardar el HTML con un simple ?C. Seguidamente, ?V en la ventana del editor del primer paso. Aseguráos de copiar el código de Feedburner justo antes del </div> que hay al final. Salvamos… et voilá! Ya tenemos la firma con el feed de nuestro blog. Hora de configurar el cliente de mail.

Pie (lectores y fandom de El Geek Errante)
Copypastead esto justo antes del </div> del fichero guardado en el primer paso:

<a href="http://feeds.feedburner.com/~r/elgeekerrante/~6/1"><img src="http://feeds.feedburner.com/elgeekerrante.1.gif" alt="El Geek Errante" style="border:0"></a>

¡Excelente! Ahora a configurar el Mail.app

Configuración de Mail.app (Apple Mail)
OK. Has guardado el archivo HTML. Ahora ábrelo con Safari (?O) y sálvalo (?S) en el escritorio en formato “Web Archive”. El truco es que Mail.app guarda todas las firmas en formato .webarchive – incluso las que sólo contienen ASCII (doh!).

Ahora abre Mail.app – Vamos a configurarlo; pulsa: ?,

Una vez que nos ponemos en “Firmas”, creamos una nueva apretando al botón “+”. El nombre será por ejemplo “firma chula”. No hagas nada más. Cierra la ventanita de configuración clickando sobre la gominola roja y luego cierra completamente Mail.app (?Q)

Ahora abre un Finder. Vete a “<tu_usuario>/Librería/Mail/Signatures”. Dentro de esta carpeta habrá uno o varios ficheros con nombres de la forma “A40CADAA-F59E-40F8-B284-3FB35980DB1E.webarchive” – No te asustes y navega hasta encontrar el archivo correspondiente a “firma chula”, el cual tiene que ser el último en haberse creado. Cuando lo hayas encontrado, clicka una sóla vez sobre su nombre para poder copiarlo (?C). Pulsa “esc” para salir, pero no cierres la ventana de Finder.

Una vez con este nombre tan complicado en el portapapeles, renombra el .webarchive correspondiente a tu firma CSS+Feedburner: click sobre el nombre del icono y ?V. Ahora arrastra el icono correspondiente al .webarchive renombrado a “<tu_usuario>/Librería/Mail/Signatures”, justo en la ventana de Finder que sigue abierta.

Ahora vuelve a lanzar Mail.app y ¡a configurar otra vez! ?,

Verás que “firma chula” se ha actualizado, pero parece que no hay imágenes. Esto es normal. No desesperes. Cosas de la usabilidad y facilidad de Apple, ¿no?

El último paso es asociar “firma chula” a cualquiera de tus cuentas de mail POP o IMAP, para lo cual pinchas “firma chula” con el ratón, y la arrastras sobre la o las cuentas que quieras. Antes de acabar, hay que seleccionar esta nueva firma como la firma por defecto de la cuenta:

Cerramos las preferencias de Mail.app ¡y a escribir a todos tus amigos para que vean la firma tan chula que tienes!

(*) Las primeras veces puede pasar que tampoco se vean las imágenes en la ventana de composición del correo. A los pocos minutos (o al reniciar Mail.app) se debe refrescar alguna caché. Una vez más: don’t panic!

Para Thunderbird, Outloox Express, GMail y demás
Consulten este link (en inglés). Se refiere al ticker RSS de Feedburner, pero puede generalizarse a cualquier HTML/CSS.

Para mis amigos del ASCII-Ribbon
El formato “text/html” del MIME/Multipart no ataca vuestros clientes de terminal, ya que Mail.app transforma en texto parte de mi firma CSS :-P

--Apple-Mail-2-550163138
Content-Transfer-Encoding: 7bit
Content-Type: text/plain;
	charset=US-ASCII;
	format=flowed

Hola!

Esto es una prueba

Un saludo,
//^&0

Nando Sola: Part-time geek & blogger at El Geek Errante
mail - nando | aim - popdakar | skype - nando.sola

--Apple-Mail-2-550163138
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html;
	charset=US-ASCII

<HTML><BODY style=3D"word-wrap: break-word; -khtml-nbsp-mode: space; =
-khtml-line-break: after-white-space; ">Hola!<DIV><BR =
class=3D"khtml-block-placeholder"></DIV><DIV>Esto es una =
prueba</DIV><DIV><BR class=3D"khtml-block-placeholder"></DIV><DIV>Un =
saludo,</DIV><DIV>//^&0</DIV><DIV><BR><DIV> <DIV id=3D"sig" style=3D" =
line-height: 13px; margin: 6px 0; padding: 8px; border-top: 1px #999999 =
dotted; border-bottom: 1px #999999 dotted; font-family: 'Lucida Grande', =
Verdana, Arial, Sans-Serif; font-size: 11px; color: #339999; "><IMG =
src=3D"http://elgeekerrante.com/nando/me-24px.jpg" alt=3D"me" =
style=3D"float: left; padding: 2px 6px 0 0;"><STRONG style=3D"color: =
#339999;">Nando Sola</STRONG>: Part-time geek & blogger at <A =
href=3D"http://elgeekerrante.com" title=3D"visit elgeekerrante.com" =
style=3D"color: #339999; text-decoration: none; border-bottom: 1px =
#999999 dotted;">El Geek Errante</A><BR>mail - <A =
href=3D"nando" style=3D"color: #339999; =
text-decoration: none; border-bottom: 1px #999999 =
dotted;">nando</A> | aim - popdakar | skype - =
nando.sola<BR><A =
href=3D"http://feeds.feedburner.com/~r/elgeekerrante/~6/2"><IMG =
src=3D"http://feeds.feedburner.com/elgeekerrante.2.gif" alt=3D"El Geek =
Errante" style=3D"border:0"></A></DIV> </DIV><BR></DIV></BODY></HTML>=

--Apple-Mail-2-550163138--

Fuentes/Linkografía

• Hawk Wings: Rotating FeedBurner signature in Mail.app
• All Forces: Custom CSS Signatures in Mail

Comparte la noticia

Hide Sites