Introducción a la programación de un boletín electrónico HTML

Por Maikel González Suárez | 2008-01-31 | email, html

Los boletines electrónicos HTML son un medio de comunicación satisfactorio, tanto para los editores como para sus lectores. Estos son visualmente más atractivos y fáciles de navegar que su variante de texto plano, pues la información es mostrada de manera similar a una página Web. Sin embargo, su programación no es totalmente similar a la usada en las páginas Web usualmente vistas.

Antes de comenzar a diseñar, programar y finalmente enviar, deben conocerse cómo trabaja el mismo y que herramientas necesitará.

Formato Multipart/Alternative MIME

Una de las cosas más importantes a conocer sobre un correo electrónico HTML es que no se adjuntarán ficheros HTML ni imágenes a la hora del envio. La mayoría de las aplicaciones de correo envían mensajes en formato “texto plano” por defecto, por tanto el HTML no funciona. Eso significa que al recibir el mensaje se mostrará el código fuente en lugar de un atractivo correo como se suponía de antemano. Por tanto se necesita enviar el correo HTML en formato Multipart-Alternative MIME desde el servidor. Esto significa que el agente de correo combina el código HTML y la versión en texto plano ambos en un único correo. Por tanto, si el cliente de correo no puede ver la versión HTML, la versión se mostrará automáticamente.

Las ficheros de imagines en un correo HTML

El hecho de poder incluir imágenes y fotos en mensajes es una de las razones por las cuales se envían correos HTML. La manera correcta de colocar imágenes en correos HTML es alojarlas en el servidor Web, entonces llamarlas desde allí al mensaje, usando caminos absolutos en el código HTML. Ejemplo de ello sería :

 <img src=”http://www.su-servidor.com/email/images/logo.gif” >

En lugar de:

<img src=”images/logo.gif” >

Téngase en cuenta que muchos clientes de correo bloquean por defecto las imágenes; al activar la descarga manualmente las mismas por el usuario final se verá correctamente en mensaje, con todos sus imágenes.

Maqueteado simple con tablas

Cuando se programa una página Web debe garantizarse una correcta visualización en múltiples navegadores (Mozilla, Internet Explorer, Safari, etc), algo similar ocurre con los clientes de correo. Cada cliente de correo muestra peculiaridades, lo cual origina una tarea ardua para lograr mostrar correctamente en todos los clientes un correo HTML. El maqueteado del correo debe ser simple. No es aconsejable el uso de complejas tablas que a su vez anidan otras tablas con varias filas y columnas, conteniendo a su vez atributos colspans.

Consideraciones finales para clientes de correo basados en navegadores

Muchos de los clientes de correos están basados en navegadores web, tales como: Yahoo!Mail, Hotmail o Gmail. Es aconsejable conocer antes de comenzar programar el HTML los siguientes puntos:

Eliminar todas las etiquetas <HTML>, <HEAD> y <BODY> de manera que no interfieran con la página web principal.
Cualquier color de fondo como atributo de una etiqueta <BODY> será eliminado, debiéndose colocar en una tabla en su lugar.
Cualquier sentencia CSS dentro de la etiqueta <HEAD> será eliminada igualmente no debe hacer enlaces a hojas de estilos externa que estén en el servidor web. Las sentencias CSS deben colocarse directamente a cada una de las etiquetas HTML por medio del atributo style.
No se recomienda el uso de la etiqueta <DIV> pues algunas de las sentencias CSS fallan, tales como los enlaces a imágenes de fondo cosa que no sucede al utilizar el atributo background en las tablas.
No debe usarse sentencias CSS de posicionamiento.