Creación de boletines en formato HTML

  • Por
Los boletines con formato HTML resultan muy atractivos y nos permiten incluir más que simple texto. Vemos como se construyen.
Muchas veces nos han preguntado cómo fabricamos y distribuimos nuestro boletín de novedades en formato HTML. Esta es una pregunta muy repetida cada mes, después del lanzamiento de nuestro boletín. Resulta muy fácil realizar un boletín como el nuestro, por lo que con unas pocas líneas vamos a tratar de dar luz a este tema.

Podemos ver el boletín de novedades de DesarrolloWeb.com para hacernos una idea de o que estamos proponiendo y por si alguien no lo conoce.

Forma del mensaje

Nuestro mensaje de correo electrónico para enviar al boletín ha de tener formato HTML, dado que dicho formato es imprescindible para insertar imágenes en el correo y para la inserción de enlaces y otros elementos.

Podríamos proponer dos técnicas para la inserción de estas imágenes en el boletín. Aunque sólo vamos a ilustrar una de ellas, merece la pena comentar las dos para que quede todo mucho más claro.

1) Mandar las imágenes como archivos adjuntos
Esta opción es interesante porque así nos aseguramos que las imágenes que salen en el mensaje se verán siempre perfectamente. Es la opción más complicada y no veremos su implementación. Además, tiene la desventaja de que el mensaje pesa más y lo peor es que contiene archivos adjuntos. El problema de tales archivos adjuntos es que pueden contener virus, mientras que un mensaje sin archivos adjuntos es casi imposible que contenga virus. Actualmente, recibo más de 100 mensajes con virus al cabo de un día. Esto hace que borre directamente sin leer casi todos los mensajes que me llegan con archivos adjuntos.

2) Mandar el mensaje sin imágenes adjuntas
Lo que se hace es que cualquier imagen que aparece en el boletín se extrae directamente desde su dirección de Internet, de modo que cuando se lee el correo se accede a la dirección en la web que contiene dicha imagen y no a un archivo adjunto al mensaje. Esta opción es mucho más fácil de desarrollar y también más segura, puesto que el mensaje llegaría sin datos adjuntos y por tanto con menores posibilidades de virus. El único problema es que si el usuario no está conectado a Internet a la hora de leer el mensaje las imágenes aparecerán "rotas" y no saldrán en el cuerpo del correo hasta que el usuario se conecte.

Así pues, vamos a ver cómo lo hacemos nosotros: no enviamos correos con archivos adjuntos. Lo que hacemos es enviar el mensaje en formato HTML y enlazar todas las imágenes, otros recursos y links con URLs absolutas.

Lo que hacemos es crear la página con un editor, tal como deseamos que se envíe,
pero poniendo todas las direcciones de los enlaces y las imágenes dirigidas
hacia páginas e imágenes que están en la web, en lugar de dirigirlas a otras
páginas e imágenes que están en tu disco duro.

Así, los atributos HREF de los enlaces y los SRC de las imágenes quedarían con URLs absulotas:

<a href="http://www.desarrolloweb.com/manuales">Manuales de DesarrolloWeb.com</a>

<img src="http://www.desarrolloweb.com/images/logo.gif" width=120 height=70>

Vistos los códigos de unos ejemplos de imágenes y enlaces podemos imaginarnos el código de la página entera. Un código HTML perfectamente común donde, insisto, tenemos URLs absolutas en todos los recursos con los que hay que enlazar.

Hay una etiqueta que también solemos incluir dentro del código HTML del boletín, en este caso para conseguir que todos los enlaces se muestren en una ventana a parte y no dentro del cuerpo del mensaje. De este modo, la navegación sobre los contenidos de nuestra web se realizará con todo el espacio de la ventana del navegador.

<base target="_blank">

En el siguiente capítulo veremos cómo enviar el archivo HTML a la lista de nuestro boletín.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Revista Orígenes

16/7/2002
Yo he hecho el Newsletter con Dreamweaver, ya que no se diseñar directamente con código HTML. ¿Hay algún problema?

Respuesta:

Por supuesto que no importa si lo diseñas con Dreamweaves o si lo haces con HTML escrito por ti misma. Lo importante es que se vea bien en los programas de correo habituales, por lo que, si lo deseas, puedes hacer una prueba de envío de ese boletín para recogerlo en Outlook Express, Eudora o Composser de Netscape. Si lo recibes correctamente en esos programas de correo puedes deducir que cualquier usuario lo recibirá también adecuadamente.

daniel

22/4/2003
Tengo una pequeña duda ¿Cómo adjunto el archivo htm/html de manera que se vea directamente al abrir el mail y no aparezca como archivo adjunto?

RESPUESTA

En Outlook Express puedes hacerlo, desde la ventana de edición del mensaje, seleccionando Insertar > Texto de archivo. Y te permite seleccionar el archivo HTML donde tienes el código a insertar en el mensaje. Fíjate que el mensaje esté en formato HTML que si no sólo te dejará colocar archivos de tipo .txt.

De todos modos, eso se explica más adelante en el artículo Enviando correo en formato HTML a la lista.

vanessa

20/1/2006
hola quisera que expliquen la opción en que las imagenes insertadas se envian como archivo adjunto, en el boletin

rocio

09/4/2009
sobre URLs absolutas
Creo que hasta el momento es la explicación más simple y clara que he leido.

Bueno, lo que no se, pues soy muy novata, pero infiero y quiero confirmar es que,
para poder linkear las imagenes, URLs absolutas,
debería para cada newsleter colgarlas en algun sitio previamente para descargarlas de alli.

Recomiendan tener entonces opr ejemplo un blog donde alojar las imagenes?, o algo así?

gracais!!!
rOX

Santiago

11/9/2009
Insertar Elementos HTML en un correo
Hola, soy Santiago de San Luis Argentina..queria exponer un problema que estamos teniendo. Les cuento. Trabajo, junto a un compañero, en un proyecto comercial de Newsletter. El proyecto se llama San Luis Para Lo Que Quieras - Agenda Cultural (www.slplqq.com.ar/archivo/269.html). Se trata de una agenda de todas las actividades culturales de mi ciudad en formato newsletter, lo enviamos una vez por semana a 9500 direcciones hace mas de 4 años.

Particularmente lo que nos está pasando desde hace unos meses es que el volumen de la agenda a crecido descomunalmente y tenemos idea de seguir agregando cosas. Seguramente llegaremos a un punto en que ya no podamos seguir estructurando el newsletter de la misma manera, debido al largor del correo. Invito a que vean el boletin y vean lo que les digo sobre lo largo de este.

Es en busca de una solución a esto que estuvimos pensando un metodo. Se nos ocurrio implementar un mini menu de navegacion dentro del mail haciendo uso de los marcadores HTML o anclas. Las distintas secciones tienen un id fijo, por lo que con hipervinculos apuntados a "#SECCION1" esto me serviria como menú de navegación. De hecho hicimos una prueba satisfactoria (slplqq.com.ar/archivo/269.alt.html) pero al enviar esto por la lista, lo que recibimos en nuestro correo no funciona ya q el correo (GMAIL, HOTMAIL, YAHOO, DominioPropio) agrega cosas a la supuesta URL que tendria q funcionar.

Seguramente lo que estamos intentando hacer va en contra de lo que debe ser un boletin comercial, ya q cada ves se parece mas a una página..la idea de ir migrando a un sitio está y estamos trabajando sobre eso. Pero realmente nuestro fuerte es el newsletter por lo q lo queremos llevar al maximo. Ojala entiendan mi duda, me gustaria recibir aportes, si han intentado algo similar, si alguien sabe como hacer para que funcione correctamente, etc. Cualquier conclusión nos vendrá bien.

Desde ya muchas gracias a todos!

Santiago - Agenda Cultural San Luis Para Lo Que Quieras

jefazo666

16/12/2010
Y la otra forma?
Veo que no se explica cómo se haría para que la imagen se envíe adjunta al email. Es para mí muy interesante esta opción, ya que la opción de alojar la imagen en mi servidor, no funciona ya que me dice que los permisos para cargar la imagen como usuario anónimo no son correctos.

Sabe alguien dónde puedo encontrar una explicación para saber el código html que debo usar para mostrar imágenes que viajan adjuntas, en el cuerpo del mail? gracias.

Hugo

01/8/2011
Sobre Boeltines
Si hice un boletin HTML con divs y lo puedo ver perfecto en HOTmail pero en Outllok 2007 y Gmail no :S como puedo hacer para visualizarlo correctamente.
Use hoja de estilo, despues se la quité para ponerla directo en HTML y sigue igual.

ernestosoto

01/8/2011
Coloca los estilos en el html
Algunos sitios web y programas gestores de correo tranforman el css de tu boletin, por lo q t sugiero que metas tus estilos en el html y maquetes con tablas... Se q es un paso atras con respecto a usar css, pero funciona mejor.

Gabbs

03/8/2011
Tablas!!
Hola, como muchos aquí también soy nueva en esto del html. Desarrollé un boletín en DW usando tablas, y al momento de checarlo en vista previa con Google Chrome y IExplorer lo visualizo bien, pero cuando lo mando por correo desde el Outlook al verlo en mi bandeja de recibidos en un correo de hotmail y de google no me respeta el ancho y largo de algunas celdas y además me separa unas tablas de otras. La verdad ya no sé que hacer! alguna sugerencia de porque me esta pasando esto y como solucionarlo.

Muchas Gracias!

angy

16/5/2012
boletin
buenas, mi pregunta es la siguiente:
estoy tratando de usar unas de mi pagina web para enviarlo como boletin, hice todo lo que estaba explicado en el informe, pero mi web esta hecha con un editor flash que se llama web acappella !!
podria hacer el boletin desde este formato??