Pantallazos.es: Outlook 2013: Crear firmas HTML

En el artículo de hoy crearemos una plantilla HTML para luego usarla como firma de nuestros correos electrónicos de Microsoft Outlook 2013.

Para crear la plantilla HTML que sirva para nuestro propósito, sólo deberemos tener en cuenta unos cuantos detalles antes de empezar:

No incluiremos enlaces a CSS en nuestra plantilla.
No es nada recomendable usar capas.
No incluiremos tampoco código Javascript.

Solo usaremos tablas y nada más en nuestra plantilla HTML de firma de correo.

Si no tenéis experiencia previa en programación HTML, a continuación encontrareis un pequeño código muy básico pero suficiente para crear una firma para nuestros correos electrónicos del diseño de una tabla en formato HTML.

La idea es que podáis usar este fragmento de código, para practicar y probar que hacen cada una de las distintas etiquetas HTML que lo forman.

Solo necesitaremos nociones muy básicas de lenguaje HTML para realizar éste trabajo, pero si tenéis inquietud en aprender a programar en HTML, os aconsejo visitéis el enlace siguiente:

www.w3schools.com/

Código HTML de ejemplo.

<body>
<table align="center" border="3" cellpadding="0" cellspacing="0" width="385" style="font-family: Arial, Helvetica, sans-serif; font-size:30pt; color:#0380fd; padding:0; border:solid 3px #0903fa">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>

</tr>
<tr>
<td align="center" valign="top" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
1
</td>
<td align="left" valign="bottom" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
2
</td>
</tr>
<tr>
<td align="right" valign="middle" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
1
</td>
<td align="center" valign="baseline" width="190" height="190" style="background-color:#9cdaf4; padding:0px">
2
</td>
</tr>
</table>
</body>

Visión final del código de ejemplo:

Encabezado 1	Encabezado 2
1	2
1	2

Una tabla HTML está formada por un una única etiqueta <table> y una o más etiquetas de tipo <tr> , <td> y <th>.

Con la etiqueta <table> se definirá una nueva tabla HTML, abriremos la definición de la tabla usando la etiqueta <table> y la cerraremos con la etiqueta </table>.

Haciendo uso de la la etiqueta <tr>, vamos a definir una nueva fila de nuestra tabla HTML, con el elemento <td> se definen las celdas que en conjunto formarán la tabla y con la etiqueta <th> podremos definir el encabezado en las columnas de la tabla.

Cuando tengamos la estructura básica de nuestra tabla podemos agregar complejidad a nuestra tabla HTML, incluyendo etiquetas como las que mostraremos a continuación:

table align - Alinearemos toda la tabla en la página web.

table style - Nos permitirá definir estilos en nuestra tabla, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...

En la lista siguiente encontrareis algunas de las posibilidades que podemos usar conjuntamente con la etiqueta style.

En primer lugar podremos cambiar los tipos de letra que usaremos para mostrar el contenido de nuestra tabla, el tamaño de las fuentes o el color.

font-family: Arial, Helvetica, sans-serif
font-size:31pt
color:#9cdaf4

También podemos jugar con los bordes de la tabla, su grosor y color.

border:solid 1px #fa0303

Del mismo modo, también podremos personalizar las celdas de nuestra tabla.

td width - Definiremos la anchura de una celda.

td height - Definiremos la altura de una celda.
td align - Alinearemos horizontalmente el contenido de una celda.
td valign - Alinearemos verticalmente el contenido de una celda.

td style - Podremos definir estilos de las celdas, de fuentes, grueso o color de los bordes, separación entre las celdas, colores, etc...

background-color:#fdee00
padding:0px

Cuando tengamos la disposición exacta de cada una de las celdas de nuestra tabla las rellenaremos, usando texto o imágenes.

Podemos incrustar imágenes usando la etiqueta <img src="" />, podéis ver una construcción más elaborada a continuación. Hemos de tener en cuenta que las imágenes tienen que estar en un repositorio público para que el receptor de nuestros correos pueda leer correctamente nuestra firma.

<img src="https://www.pantallazos.es/imagenes/linkedin.png" width="81" height="82" border="0" alt="LinkedIn" />

Una vez creada nuestra plantilla de firma, procederemos a incrustarla en los mensajes de correo electrónico.

Con las versiones más antiguas de Outlook, usar un código HTML como firma para nuestros correos electrónicos era una tarea muy sencilla.

Solo teníamos acceder al menú de opciones, situado en la parte superior de la ventana de Outlook (Herramientas/Opciones), y seguidamente , en la ventana de opciones de Outlook seleccionar la sección Formato de correo.

Dentro de la ventana de opciones de Formato de correo, nos dirigiremos a la sección de Firmas y pulsamos el botón Firmas.

En la ventana de Crear firma, pulsábamos el botón Nuevo... y en la ventana emergente que nos aparecía podíamos seleccionar Utilizar este archivo como plantilla:

Seleccionábamos nuestra plantilla HTML y listo.

Configuración de firma HTML de Outlook con Outlook 2003

En Microsoft Outlook 2013, el proceso es bastante distinto. En primer lugar, accederemos a la sección ARCHIVO, situada en la parte superior izquierda de la ventana de Outlook.

En el nuevo menú de opciones que nos aparecerá situado en la parte izquierda de la ventana, seleccionaremos la opción Opciones. Esto abrirá una nueva ventana emergente llamada Opciones de Outlook, en el menú izquierdo de dicha ventana seleccionaremos la opción Correo.

De todas las opciones de la sección Correo, pulsaremos en el botón llamado Firmas.

Configuración de firma HTML de Outlook con Outlook 2013

En la ventana llamada Firmas y Plantilla, pulsaremos el botón llamado Nueva, asignaremos un nombre a nuestra nueva firma de correo y cerraremos la ventana Nueva firma pulsando el botón Aceptar.

Vamos a dejar la firma en blanco y cerraremos la ventana Firmas y Plantilla pulsando el botón Aceptar.

Seguidamente, buscaremos en nuestro disco duro local una de estas dos carpetas, dependiendo del idioma de nuestro sistema operativo.

C:\Users\[NOMBRE_USUARIO]\AppData\Roaming\Microsoft\Signatures

C:\Users\[NOMBRE_USUARIO]\AppData\Roaming\Microsoft\Firmas

En ella, encontraremos tres archivos creados con el mismo nombre que nuestra recién creada firma en blanco y una carpeta.

Abrirremos el archibo de la firma que tiene como formato htm. Buscaremos las etiquetas <body>...</body>. Seleccionaremos el código que se encuentra contenido entre las etiquetas y lo borraremos.

Copiaremos el nuevo código de la firma que hemos creado y lo pegaremos sustituyendo el fragmento de código que hemos borrado en el paso anterior.

En nuestro ejemplo, el código contenido entre las etiquetas <body>...</body> es el que mostramos a continuación en color rojo:

</head>

<p class=MsoAutoSig><span style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:

minor-latin'><o:p> </o:p></span></p>

</div>

</body>

</html>

El código que vamos a usar en nuestro laboratorio para nuestra firma será el que mostramos a continuación.

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="6"><a href="contacto@pantallazos.es" target="_blank">contacto@pantallazos.es</td>

</tr>

</table>

</td>

</tr>

</table>

Seguidamente guardaremos los cambios que hemos realizado y cerraremos el archivo HTML.

Comprobaremos que si creamos un nuevo mensaje de correo electrónico aparecerá nuestra firma HTML en el pie del mensaje.

Espero os sea de utilidad.

Enlaces relacionados

Búsqueda de Outlook no funciona.
Diseñar correos electrónicos para Outlook 2003/2013 usando una plantilla HTML.
Recuperar Mensaje enviado con Outlook.

Cómo reparar los archivos de carpetas personales de Outlook PST.

Cómo localizar un archivo de carpetas personales de Outlook PST.

Translate

domingo, 25 de septiembre de 2016

Outlook 2013: Crear firmas HTML

No hay comentarios:

Publicar un comentario