Firmas HTML en Apple Mail

24/04/2009

tutorialHoy he necesitado añadir una firma con formato HTML en Apple Mail y a simple vista no se podía, pero realmente sí se puede. Tras pegar un vistazo en Google he dado con la solución y la pongo aquí por si alguien más estuviera interesado en ello y a modo de recordatorio para futuras ocasiones en las que necesite crear una nueva firma con formato HTML para nuevas cuentas de correo electrónico.

El proceso es sencillo pero, como todo, hay que saber cómo hacerlo. Lo que no entiendo es como Apple no ha pensado que sus usuarios querríamos poder tener la posibilidad de meterle código HTML, CSS o al menos BBCODE a nuestras firmas. Aunque yo no soy de utilizarlo, sólo con que necesites poner un logo en la firma ya tienes que recurrir a ello. Y es algo muy básico y frecuentemente utilizado… En fin… ¡Vamos allá!

Creando nuestra firma en HTML

Lo primero es abrir un editor de textos y crear nuestra firma en HTML. Podremos poner también incrustado en las etiquetas HTML estilos CSS para hacer todavía más personal nuestra firma. Donde hay que prestar atención es en las imágenes que queramos insertar, pues no se enviarán con el correo. Así que tendremos que alojarlas en algún servidor y añadir la ruta completa de la imagen. Si no disponemos de ninguno se pueden utilizar servicios gratuitos como ImageShack teniendo siempre en cuenta el asegurarse de que la imagen sigue existiendo cuando se vayamos a enviar nuestros correos. Cuando lo tengamos guardamos el archivo con extensión .html y vamos al siguiente paso.

“Engañando” a Mail para que acepte nuestra firma

Como dije al principio Apple no ha pensado en la posibilidad de que quisiéramos adjuntar una firma con código HTML en nuestras firmas, así que hay que “engañarle”. Para ello debemos tener una firma ya creada, si no tendremos que crear una. Nos vamos a las preferencias de Mail y de ahí a la sección de firmas. Por defecto Mail nos pone como firma (al crearla) nuestro nombre y nuestra dirección de correo electrónico. Podemos dejar esa mismo, total, no va a servir para nada. xD

crear-firma-html-apple-mail

Ahora desde Safari abrimos el archivo HTML que habíamos creado con anterioridad. Nos vamos al menú de archivo, guardar como… (podemos utilizar el atajo de teclado cmd+s) y elegimos el formato Archivo Web.

Lo bueno que tiene Mail es que todas las firmas las guarda en este formato. Por tanto, cualquier archivo de texto puede ser exportado y Mail lo reconocerá como un archivo de firmas normal y corriente y tras ser exportado tendrá el mismo formato que le dimos a la firma HTML.

Cerramos Mail (importante este dato).

  • Si tienes Mac OSX Lion: nos vamos a la carpeta de nuestro usuario (en mi caso Javi) :) de ahí nos vamos a Librería, Mail, V2, MailData y Signatures.
  • Para anteriores versiones: nos vamos a la carpeta de nuestro usuario (en mi caso Javi) :) de ahí nos vamos a Librería, Mail y Signatures.

Si solamente hemos creado una firma lo tendremos fácil, si no para saber cuál es el archivo que pertenece a la firma que queremos cambiar podemos abrirlo desde Safari y comprobarlo. Cuando lo tengamos claro le damos a cambiar nombre del archivo, lo seleccionamos todo y lo copiamos. Ahora nos vamos al archivo que hemos exportado a formato Archivo Web desde Safari (el que contiene la firma que realmente queremos tener), le damos a cambiar el nombre y pegamos lo que teníamos en el portapapeles. Así hemos creado un archivo con nombre idéntico. Lo arrastramos a la carpeta donde están las firmas de Mail, reemplazamos, abrimos Mail y… ¡alehop! Ya tenemos firma.

correo-nuevo-apple-mail

Nota final

Si nos vamos a las preferencias de nuevo y al apartado firmas tendremos también ahí nuestra preciosa firma con formateado HTML. No podremos cambiar los enlaces que hayamos podido crear ni ningún carácter de HTML, pero dentro de lo que es el texto si nos hemos equivocado en algo sí podremos corregirlo. Vamos, una edición leve, si queremos modificarla totalmente tendríamos que volver a repetir el proceso.

Como siempre, dudas, comentarios, etc… aquí estoy.

Comentarios: 35 comentarios
Categorías: apple, tutoriales
Etiquetas: -
Vota: bitacoras.com
Guarda: delicious
Envía: twitter - facebook
  • javi

    Hola, primero que todo muchas gracias por la info, esta muy bien explicado….
    todo me sale bien con el texto, exeptuando que dentro de mi html hay una imagen .gif que no hay manera de que la encuentre, he probao con jpg y png, visualiso el html y las rutas estan bien, lo abro en el safari y tambien.. solo no me funciona al momento de enviar el email y al recivirlo no se ve la imagen…
    que podra ser?
    Gracias!

  • http://blog.fjp.es Javi

    Hola Javi:

    Si lo ves en Safari bien, es que la ruta está bien puesta. Ahora bien, lo que sí sería normal es que ni en la sección de Firmas en las Preferencias ni al componer un correo nuevo tú lo vieras. Lo que sí deberías verlo bien es cuando recibes el correo electrónico.

    Si no es así, trata de enviártelo a una cuenta que no tengas en Apple Mail, porque no sé si éste dispondrá de la opción (así como no la dispone en las firmas) de visualizar contenidos externos (Internet). Quizá Gmail sí disponga de esa opción.

    Yo no soy de poner imágenes en las firmas de correos, así que no puedo ayudarte demasiado en eso.

    Suerte tocayo.

  • http://www.facebook.com/profile.php?id=1714891638 Belis Za

    Va… estuvo bueno el tip… gracias!

  • Tinker Bell

    Super y muy bien explicado

    FELICIDADES!

  • madjo

    Muchas gracias.. Excelente el aporte :)

  • MacDary

    Hola Francisco. Gracia por tomarte el tiempo para explicar este tuto. Verás, he hecho mi firma tal como me gustaría que quedase, en Word. Imagen principal a la izquierda, texto a la derecha de la imagen y un pequeño (muy pequeño) .jpg al final de la última linea. El caso es que, al visualizarlo en el navegador (Safari) o exportarlo como .html, este se desbarata completamente. Las imágenes se ubican donde no las puse inicialmente.
    También, podrías precisar cómo es eso de hacer referencia a un host site para las imágenes? Se pone sólo el link o se pega el link a la imagen…? En imageshack, cuando subes una imagen, te aparecen varias opciones para referir el archivo, cuál es la opicón más conveniente? Un link directo? En fin, toma tiempo pero me pregunto si podrías ser más detallado con tu tuto. Muchos estaremos muy agradecidos por ello. Recibe un cordial saludo!

  • http://blog.fjp.es Javi

    ¡Hola MacDary!

    Supongo que el problema con las imágenes lo tienes en que MS Word al generar el fichero HTML no tiene en cuenta las medidas específicas donde tú quieres insertar las imágenes, y las genera sin contener CSS. Para ello, deberías optar por otro programa como Dreamweaver si es que no sabes generarte tú mismo el código. Éste sí integra CSS para que, tal como lo veas en tu pantalla, quede después en el navegador.

    En cuanto a la imagen, la ruta a la imagen no debe ser alguna que tú tengas en tu propio equipo si no, como dices, añadirle la ruta que aparece en enlace directo al subir la imagen. Dentro del código de inserción de la imagen en HTML quedaría algo así:

    <img src="http://la.ruta.de.imageshack.us/loquesea.jpg" alt="" />

    Como indiqué, al adjuntar tú la firma en Mail te aparecerá el ícono que sale cuando no puede cargar una imagen, pero realmente quien lo reciba sí lo visualizará correctamente.

    Espero haberte ayudado.

  • Coni Correa

    Hola Javier. Necesito ayuda…
    Quiero insertar un archivo Html fabricado en Dreamweaver en el Apple Mail y no me deja. Sabes como hacerlo??

    Gracias,

  • http://blog.fjp.es Javi

    Hola Coni:

    En principio sólo debes seguir los pasos que puse. Dreamweaver creo que no crea archivos aparte para integrar los estilos CSS, así que como va todo dentro del mismo archivo, no vas a tener ningún problema.

    Intenta especificar un poco mejor qué es lo que no te deja, o en qué parte te da el error, porque así no sé cuál es el problema.

    Un saludo.

  • Cristian Cuesta

    Hola Javi,
    He seguido tus pasos y todo funciona correcto…o casi todo:
    Al insertar la firma me aparece en el mail un símbolo de un interrogante con fondo azul, que interpreto que mail no puede leer bien la firma.
    Mi firma es una imagen que he mapeado con dreamweaver para poner varios links en ella. ¿puede que tenga eso algo que ver? el archivo que uso como firma es un archivo web tal y como nos explicas… estoy desesperado!!

    Mil gracias de antemano

  • Cristian Cuesta

    He probado de subir la imagen en imageshack y he hecho el mismo proceso, pero me sigue pasando lo mismo, no me aparece nada en el mail. Tengo una cuenta de gmail, y desde el navegador tampoco se ve la firma…

    • http://blog.fjp.es Javi

      Imagino que la ruta a la imagen, en el archivo HTML, no será ruta local, ¿no? Es decir, apuntará a la imagen que has subido a ImageShack, ¿no?

  • Cristian Cuesta

    PUES SI, SUBIR LA FOTO A UN SERVIDOR EN RED ERA LO QUE ME FALTABA… EL PROBLEMA ES QUE ESTA SEGUNDA VEZ NO HABÍA REALIZADO EL PASO MÁS IMPORTANTE… REINICIAR MAIL… CON ESO SI QUE ME FUNCIONA, MIL GRACIAS!

  • http://blog.fjp.es Javi

    Un placer :)

  • Cristian Cuesta

    Perdón por tanto mensaje, pero la desesperación (y las prisas pueden conmigo). Ahora, al crear un nuevo mail e insertar la firma, esta aparece. Pero al mandarlo, la persona que lo recibe no ve la firma, aparece el mail en blanco (estoy mandando un mail solamente con la firma).

    !!!?? no se que más probar.

  • http://blog.fjp.es Javi

    Depende como se tenga configurado el cliente de correo, para descargar las imágenes que vienen incrustadas en él, desde internet, pide confirmación. O depende del caso, puedes incluso desactivar la descarga de cualquier imagen desde internet, desde las opciones del cliente de correo. Si tú lo ves, pero otra persona no, quizá sea eso lo que ocurra.

  • http://gomezorea.com Andrés Gómez Orea

    Hola, buenas Tardes… en el OS X 10.7 (Lion) no está la carpeta de Mail en la Librería… como lo hago entonces?

  • http://blog.fjp.es Javi

    ¡Hola Andrés! Ya actualicé en el artículo el lugar exacto donde se encuentra ahora la carpeta Signatures en Lion.

    Un saludo.

  • Vanessa

    Muchas gracias! Pero tengo un problema, no consigo la carpeta Librería, tengo Mac OS X 10.7, no se si en algún momento la borre por error y no se como recuperarla. Help!!!
    Gracias!

  • http://blog.fjp.es Javi

    ¡Hola Vanessa!

    Eso es porque por defecto en Lion esa carpeta va oculta, para que la gente con menos experiencia en el sistema no pueda hacer algo, sin saber, que estropee el funcionamiento interno tanto del sistema operativo como de todas las aplicaciones instaladas, pero sabiendo cómo se usa, no pasa nada si se muestra. Desde la app Terminal, deberíamos meter esta orden:

    chflags nohidden ~/Library/

    Esto mostraría solamente la de nuestro usuario, que es la que necesitamos para completar con éxito este tutorial. Si queremos mostrar también la del sistema, sería esta otra orden la que deberíamos meter:

    chflags nohidden /Library/

    Para después ocultarlas nada más se necesita cambiar nohidden por hidden.

  • Vanessa

    Gracias!!!! Eres lo mejor!!! Mil Gracias!

  • http://www.areaveinte.com Gustavo

    En OSX Lion, aún mucho más fácil que antes. Tan solo tienen que hacer el HTML lo abren con Safari, seleccionan todo, y lo pegan en la firma de la generación de firmas de preferencias del mail. Funciona 10ptos! y es mucho más sencillo que antes.

  • Raziel

    Buenas javier,

    Yo he hecho mi firma HTML en iWeb y la he subido a un servidor que tengo, la firma es compleja tiene imágenes y enlaces …y un fondo (del cual podría prescindir) pero no consigo que aparezca en la firma, El problema es que consigo crear la firma siguiendo tus pasos,pero cuando hago un mail nuevo y adjunto la firma salen recuadros vacíos como si no vinculara nada y la mandarlo para probar el que recibe tampoco ve nada.

    Me podrías ayudar, si lo necesitas te adjunto la dirección de mi firma (http://web.me.com/raziel_jharkav/Mail/Firma.html)

    Gracias por adelantado, a ver si consigo apañarlo.

    Excelente post ;)

  • http://blog.fjp.es Javi

    Hola Raziel, el problema es que llevas tres archivos Javascript adjuntos, y además, el archivo CSS está por separado. Si el CSS lo juntas en el mismo HTML podrías hacer uso de él, pero de los Javascript olvídate, porque además en muchos clientes de correo están deshabilitados por defecto. iWeb quizá no te lo haga así, tendrías que hacerlo a mano.

  • Raziel

    Gracias, es lo que he hecho, lo he abierto en Dreamweaver y he editado el código vinculando las imágenes desde la dirección http://ftp... un lio :S per bueno ahora voy a probar a ver si me deja ponerlo en el Mail.

    Gracias por la ayuda :P (es más difícil de lo que creía XD)

  • Raziel

    Llámame pesado… pero tengo un nuevo problema, resulta que he puesto la imagen desfondo que ves que se va repitiendo. Pero esa image no se ve en el mail,¿se puede hacer algo para que se vea?

  • http://blog.fjp.es Javi

    Hola de nuevo, no te preocupes que para nada eres pesado. Esa imagen se repite mediante código CSS, que lo tenías en un archivo externo. En el archivo que vayas a emplear para hacerlo firma en Mail, debes incluir esa porción de código CSS en el mismo HTML, en la sección HEAD, bajo la etiqueta:

    <style type="text/css">

    Un saludo.

  • Conchi

    Me ha encantado el artículo, de echo está genial explicado.
    Mi duda es… supon que quieres modificar la firma… lo que yo pretendo es hacer una firma modificable, la preparé con iframes pero nada no me lo lee el Mail… se te ocurre algo??

    Gracias…

  • http://blog.fjp.es Javi

    Hola Conchi: ten en cuenta que Mail por sí mismo no admite código HTML, lo que hacemos con esto es “engañarle”, para que lo que para él es texto sin más, al plasmarlo con el visor de HTML que incorpora para correos, pueda visualizarlo como tal. Pero no incorpora un servidor como Apache, para poder hacer útiles los iframes, o cualquier archivo javascript o similares. La única forma que se me ocurre para, más o menos, conseguir lo que propones es: guardarte el archivo fuente en tu ordenador y, cuando vayas a modificarlo, generar de nuevo otro archivo web desde Safari y listo. Así no tienes que hacer de nuevo todo el trabajo, simplemente modificar la base. No es lo mismo, pero es la única opción.

    Un saludo.

  • David

    Muchísimas gracias! No se puede explicar mejor.

  • pulpillo

    Hola Javi,
    Necesito ayuda!!A mi tampoco se me ven las imágenes. Como le ha pasado ya a mas de uno. He sustituido el link directo por la ruta de la imagen en el código, lo guardo en html, y lo abro en safari y lo guardo en archivo web. Hasta aquí todo perfecto, se sigue viendo la imagen. Incluso cuando escribo el correo, la firma se ve correctamente. Es quando abro el correo que la firma ya no tiene la foto de fondo. Lo he provado de enviarla en un correo gmail y me produce el mismo problema… he provado todo y ya no se como hacerlo.

    Muchas gracias por adelantado!!!

  • http://blog.fjp.es Javi

    Hola pulpillo: ¿la ruta de la imagen que pones está en tu ordenador o en algún servidor de internet? Por los síntomas, supongo que estará en tu ordenador y por eso hasta que sale el correo de tu ordenador se ve bien. Si no es eso, no se me ocurre qué pueda ser, no tiene mucho sentido. :S

  • andrea

    Excelente la explicación!!!! Es lo que estaba buscando y necesitando… Además, super claro!!
    Me pasa lo mismo que a muchos, mi html tiene una imagen linkeada a un servidor externo, en el safari lo veo bien, en la ventana de las firmas también… pero aparece la imagen rota cuando pruebo de enviarla a un gmail, o a otra direccion de mail que no tengo seteada en el Apple Mail.
    Es muy raro!!

    No quiero molestarte, pero realmente respondes todas las dudas, me pareció excelente tu explicación ;)
    Muchas Gracias!
    Andrea

  • Kike

    Hola Javi,

    Muy bueno.
    Sabes si ademas existe algún modo que la imagen aparezca siempre sin necesidad de la autorización del receptor?

    Gracias!

  • http://www.asmartvision.com.mx Roberto Fonseca

    Muchas Gracias!!!…