Tutorial: Firmas HTML en Apple Mail
24-IV-2009
A partir de OS X 10.8 Mountain Lion el proceso cambia. Sólo sigue leyendo este tutorial si tienes una versión del sistema operativo anterior, si no sigue este tutorial: Firmas HTML en Apple Mail (Mountain Lion).
Hoy 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
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.
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.
A partir de OS X 10.8 Mountain Lion el proceso cambia. Sólo sigue leyendo este tutorial si tienes una versión del sistema operativo anterior, si no sigue este tutorial: Firmas HTML en Apple Mail (Mountain Lion).
¿Una ayudita?
Todo esto que ves es totalmente gratis para ti; dedico buena parte de mi tiempo por el simple placer de ayudar a gente como tú, para hacer las cosas más fáciles a los demás. No obstante, de vez en cuando, viene muy bien una muestra de apoyo que me anime a seguir creando todo este tipo de contenido. Si te ha gustado esto, si te ha servido de ayuda, si quieres colaborar: puedes donar algo. Por pequeña cantidad que sea lo agradeceré enormemente.
También, si lo prefieres, puedes entrar en mi lista de deseos literaria en Amazon donde podrás enviarme alguno de los libros listados. Estaría encantado de hacerle un hueco en mi casa a cualquiera de todos ellos.
¿Has encontrado algún error en el texto anterior? Me ayudarías mucho si lo reportaras.
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!
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.
Va… estuvo bueno el tip… gracias!
Super y muy bien explicado
FELICIDADES!
Muchas gracias.. Excelente el aporte 🙂
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!
¡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í:
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.
Hola Javier. Necesito ayuda…
Quiero insertar un archivo Html fabricado en Dreamweaver en el Apple Mail y no me deja. Sabes como hacerlo??
Gracias,
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.
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
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…
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?
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!
Un placer 🙂
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.
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.
Hola, buenas Tardes… en el OS X 10.7 (Lion) no está la carpeta de Mail en la Librería… como lo hago entonces?
¡Hola Andrés! Ya actualicé en el artículo el lugar exacto donde se encuentra ahora la carpeta Signatures en Lion.
Un saludo.
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!
¡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:
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:
Para después ocultarlas nada más se necesita cambiar nohidden por hidden.
Gracias!!!! Eres lo mejor!!! Mil Gracias!
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.
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 😉
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.
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 😛 (es más difícil de lo que creía XD)
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?
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:
Un saludo.
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…
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.
Muchísimas gracias! No se puede explicar mejor.
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!!!
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
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
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!
No, porque tienen que enlazarse imágenes, no permite enviarlas adjuntas por correo.
Muchas Gracias!!!…
Hola!
Hice todo tal cual como explicas en el Entourage, y no veo reflejada la firma en el mail. Cometí algún error?… Muchas gracias!
Nunca utilicé Entourage, este tutorial es para Apple Mail, desconozco si esto mismo funcionará en Entourage, si serán los mismos pasos, o habrá que hacer más cosas.
Hola Javier, sabes que realizo todos los paso y cuando abro mail voy a preferencia firma, veo mi firma html, pero cuando le doy nuevo correo y activo la firma no se ve.. 🙁
Pues no entiendo a qué pueda deberse este error. Como verás en la captura de pantalla, a mí me funciona. Y desde entonces las tengo creadas así, sin problemas. Asegúrate de haberlo hecho todo bien, por si acaso.
¡Suerte!
Hola, tengo un texto escrito en Illustrator y cuando lo pego en el mail de apple me aparece como una imagen. Qué puedo hacer?
Muchas gracias bro! Salió perfecto en Lion, pero no me sirvió el editor de texto como dices, me toco crear un post en WordPress, y luego seguir con el webarchive. Pero dió. Gracias
Pues yo tengo un problemilla, en web y en el mail mac me sale perfecto, pero al entrar en hotmail o gmail me separa dos imagenes, la firma está compuesta en html con varias imagenes, sectores que llevan a mis redes sociales. No sé si me explico. Haber cual seria la solución, porque no encuentro errores en el html, está todo ok. No sé que pasa. GRACIAS
Igual es por el espacio que deja la web de Hotmail o Gmail. No entiendo muy bien lo que me dices, pero si es lo que me imagino, si no tiene suficiente espacio de ancho puede que lo baje una línea.
Gracias, a la primera!
[…] tiempo escribí un tutorial en el cual enseñaba a adjuntar firmas con código HTML a nuestras cuentas de Apple Mail —sólo versiones anteriores de OS X. Ya que Apple no pensó —y sigue sin hacerlo, al […]
Hola, estoy intentando esto pero me resulta misión imposible 🙁 Pegando la foto al old style en Firmas en Mail al parecer llega como archivo adjunto, pero llega.. Ahora lo he intentado y sólo me llega el texto html, que he pegado en el .htm y en el archivo web… Como han dicho he escogido ImageShack, la url html que aparece sería esta
He probado las otras, he probado a cortarla desde <img src, y nada, al enviar la firma, me envía el texto y punto. ¿Qué me estoy saltando? Gracias de antemano…!!