2 sept 2009

Crear templates para Mail de Apple

Introducción

Una función que para mí es bastante importante en los clientes de e-mail es poder tener la posibilidad de realizar plantillas para nuestros mensajes. Esto nos permite dar un formato más complejo a nuestros e-mails, y que los mismos sean homogéneos. Tener la posibilidad de realizar templates se hace aún más importante en el ámbito laboral, en el cual muchas veces con solo una firma no es suficiente para los e-mails que enviamos.

En esta oportunidad voy a detallar como podemos crear plantillas de e-mail para la aplicación Mail de Apple (OS X).

Los pasos


Crear un template

El primer paso para poder crear un template es comenzar con uno vacio, para ello podes descargar mi template vacio y comenzar a trabajar con el (una vez que lo descarguemos debemos descomprimir el archivo, obtienendo de esta forma un archivo con nombre "obrea Basico.mailstationery").

Abrir el template

Para abrir el template solo debemos hacer CTRL-Click sobre el mismo (o botón derecho del mouse) y seleccionar la opción "Mostrar contenido del paquete"

Se abrirá el Finder dentro del contenido del archivo (los archivos mailstationary en realidad es un paquete con varios archivos dentro). Accedemos a la carpeta "Contents/Resources".

Editar el template

Con el editor de html que estemos acostumbrados a utilizar (yo utilizo Smultron) abrimos el archivo "content.html" el cual tiene un contenido similar a este:

<html>
<head>
        <title>Template creado obrea.blogspot.com</title>
</head>
<body style="margin: 0 0 0 10px;"> 
    
<div style="background-color: #fff; margin: 10px; padding: 10px;">
<div id="encabezado">
  <img src="obreaFondo.jpg" />
</div>

<br/>
<div id="mail-to" contenteditable="true" apple-content-name="to">Reemplazar por un saludo tipico,</div>
<br/>
<div id="mail-body"contenteditable="true" apple-content-name="body">
Reemplazar por un texto predeterminado
</div>
<p contenteditable="true" apple-content-name="bye">Reemplazar por un saludo final tipico,</p>


<div id="pie">
-----------<br/>
Reemplazar por mi nomrbre<br/>
Reemplazar por otros datos que quiera agregar al pie<br/>
</div>
</div>

</body>
</html>

Como podemos ver en el código es todo html puro, por lo tanto es muy fácil poder llevar un diseño que ya tenemos en HTML a un template para Mail de Apple.

Si viste el c&ooacute;digo en profundidad podrás ver que existen algunas propiedades en los tags que no son standares:

 
contenteditable="true"

apple-content-name="un_nombre"

Igualmente sus nombres describen bastante bien cual es su funcionalidad. el código contenteditable="true" le indica a la aplicación Mail que lo que se encuentra envuelto por el tag contenedor puede ser editado. Un punto importante a tener en cuenta, que no mencione anteriormente, es que todo aquello que no se indique explicitamente que puede ser modificado, queda fijo en el template (es decir, todo lo que no indica contenteditable="true" queda fijo como si fuera constante y no puede ser modificado cuando estamos editando el email).

La otra propiedad tiene menos importancia y realmente no es necesaria, pero igualmente la describiré. La propiedad apple-content-name indica el nombre con el cual la aplicación Mail de Apple identifica al contenido del tag. No es indispensable agregarla

En el código de ejemplo, existen 3 áreas editables:

Parte 1

<div id="mail-to" contenteditable="true" apple-content-name="to">Reemplazar por un saludo tipico,</div>

En esta secció podemos ingresar el saludo que tipicamente utilizamos con nuestros destinatarios de e-mail. Por ejemplo: "Hola ," para luego solo tener que ingresar el nombre entre "Hola" y ",".

Parte 2

<div id="mail-body"contenteditable="true" apple-content-name="body">
Reemplazar por un texto predeterminado
</div>

Si tenemos algún tipo de formato de texto que utilicemos siempre en nuestros e=mails, por ejemplo una introducción común podemos agregarlo en esta sección para no tener que escribirla por cada mensaje que enviamos

Parte 3

<p contenteditable="true" apple-content-name="bye">Reemplazar por un saludo final tipico,</p>

En esta última parte podemos indicar cual es el saludo que habitualmente utilizamos. Por ejemplo: "Saludos", "Un abrazo" o cualquier otro texto que utilicemos habitualmente.

Seguimos?

En el template que esta en el sitio, es muy básico, pero sirve para tener una idea de las opciones que nos da esta aplicación. En otro post indicaré como se puede reemplazar una imagen del template con solo hacer un drag and drop sobre la misma, cuando estamos editando el e-mail.

Recomiendo que al momento de estar editando el template, tengamos abierto el archivo content.html en un navegador, por ejemplo Safari, para poder ir viendo como quedan los cambios que vamos realizando

Cada vez que utilicemos una imagen en el template, y la misma no se ecuentre en un sitio web (es decir que se debe env&iactute;r con el e-mail), debemos copiarla en la misma carpeta en la cual se encuentra el archivo content.html (un ejemplo de ello es el archivo obreaFondo.jpg que contiene el banner superior del e-mail).

Una vez que adaptes el template a como más te guste, con tu logo, firma, y todo aquello que quieras agregar, estas en condiciones de seguir con el siguiente paso

Editamos Description.plist

En este archivo debemos ingresar el nombre de todos los archivos de imagen que hemos utilizado en nuestro template. A continuación copio el archivo del template básico:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Folder Name</key>
    <string>obrea Basico.mailstationery</string>
    <key>HTML File</key>
    <string>content.html</string>
    <key>Images</key>
    <array>
        <string>obreaFondo.jpg</string>
    </array>
    <key>Stationery ID</key>
    <string>52CF436E-68DA-4842-B638-1234567</string>
</dict>
</plist>

En este archivo debemos prestar atención a dos secciones, la primera:


    <string>obrea Basico.mailstationery</string>

Que indica cual es el nombre de nuestro archivo de templates, lo debemos modificar por el nombre que le vayamos a poner al archivo contenedor

La segunda sección a la cual debemos prestar atención es


    <key>Images</key>
    <array>
        <string>obreaFondo.jpg</string>
    </array>

Que indica cuales son las imagenes que estamos utilizando en nuestro template, debemos agregar un <string> </string> por cada archivo de imagen que utilicemos en el template. En este caso estamos utilizando solo uno obreFondo.jpg

Asignamos el nombre que se mostrará en Mail

Para ello abrimos el archivo "DisplayName.strings" que se encuentra en la carpeta "English.lproj" y vamos a la línea


"Display Name" = "Template basico";

En esta línea modificamos "Template basico" por el nombre con el cual queremos que aparezca identificado nuestro template dentro de la aplicación Mail

Copiamos el paquete modificado

Una vez que realizamos los pasos anteriores, estamos en condiciones de poder guardar ya nuestro template para comenzar a utilizarlo. Para ello cerramos la ventana del Finder que esta mostrando el contenido del paquete que abrimos (este paso no es necesario, pero es mejor realizarlo para no confundirnos con los archivos).

Vamos al directorio en el cual se encuentra el template que modificamos (el paquete con el template), y modificamos el nombre del mismo por el que hayamos ingresado en Description.plist.

Abrimos una nueva ventana del Finder y accedemos al siguiente directorio "/Library/Application Support/Apple/Mail/Stationery/Apple/Contents/Resources/" luego seleccionamos una carpeta en la cual deseamos incorporar nuestro template, en el ejemplo voy a elegir la carpeta "Announcements", dentro de dicha carpeta accedemos a "Contents/Resources" y dentro de dicho directorio copiamos el archivo que hemos generado a esta carpeta.

Usando el template

Ya estamos en condiciones de poder utilizar el template. Para ello solo debemos crear un nuevo e-mail.

Luego seleccionamos "Mostrar plantillas".

Seleccionamos la categoría que le asignamos al template que hemos realizado.

Seleccionamos el template que generamos (aparecerá el nombre que le hayamos asignado en "Display Name" del archivo "DisplayName.strings").

Aparecerá el template en el cuerpo del mensaje que estamos creando, permitiendonos editar en todas aquellas secciones que hayamos habilitado.

Conclusión

Si bien son varios pasos, es bastante sencilla la modificaci&acue;n y creación de templates para la aplicación Apple Mail.

Hasta el momento es la aplicación de e-mail que mejor integración con templates he encontrado, ya que Outlook, o Mozilla, tienen una buena integración, pero no nos permite con un solo drag and drop cambiar una imagen, o modificar solo partes del template (muy util para no equivocarnos y perder la estética general por borrar una parte que no queriamos)

Te recomiento probar los templates del Mail de Apple, y en caso que aún no hayas probado el Mail de Apple, te propongo que lo hagas, para que puedas ver si también se adapta a tus necesidades

No hay comentarios.: