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="https://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.
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="https://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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...