SAGA Suite: OpenCms Newsletter Module

Extensión del módulo de newsletter de Alkacon (Alkacon OAMP Newsletter Module version 2.0.0) para ampliar las opciones a la hora de generar nuestro boletín.

Descripción funcional

Este módulo nos ofrece la posibilidad de enviar un boletín electrónico mucho más completo y a medida de nuestras necesidades que el recurso por defecto del Alkacon OAMP Newsletter Module version 2.0.0. Para el que no conozco dicho módulo, nos ofrece un recurso de tipo boletín donde nos ofrece un campo de texto (editor WYSIWYG) donde podemos añadir el html que deseamos enviar. La edición de dicho recurso es muy limitada y para el envío de correos complejos se queda un poco corto.

Con nuestro módulo hemos incorporado un nuevo recurso "puente" que nos permite enviar cualquier HTML, tanto externo como interno a nuestras listas de correo en OpenCms. Este recurso tan solo tiene que apuntar a otro recurso de OpenCms y enviará el HTML generado en dicha página.

Por lo tanto, nosotros podemos generar un containerpage a medida, con un template preparado para enviar un correo, y usar el sistema de drag & drop del ADE para formar nuestros emails. De esta forma es mucho más simple para el usuario editor generar un newsletter.

Para usuarios más avanzados, incluso es posible crear un recurso de tipo plain y añadir el html directamente que queremos enviar.

De esta forma usando nuestra extensión se podrá enviar cualquier newsletter, desde un simple correo con texto, hasta un complejo boletín con mucho texto e imágenes.

Guía de instalación y configuración

Los pasos a seguir para la instalación y configuración son:

  1. Instalar módulo: Alkacon OAMP Newsletter Module version 2.0.0
  2. Instalar módulo SAGA Suite Newsleter Module
  3. Añadir al módulo OAMP Newsletter un nuevo parámetro:
    • class_maildata=com.saga.sagasuite.newsletter.CmsNewsletterSagaExternalHtmlMailData
  4. Reiniciar servidor

Guía del usuario

Para crear un nuevo boletín electrónico, tan solo tendremos que crear en cualquier carpeta de nuestro VFS un recurso de tipo sgselectnewsletter, para ello, nos vamos al boton de Nuevo / Saga Suite / Selector de Newsletter.

Este recurso tiene 4 campos:

  • Título: título del boletín que nos permitirá localizarlo rápidamente desde la vista de administración antes de su envío
  • Correo De: dirección de correo que le aparecerá como remitente a los usuarios destinatarios
  • Asunto del boletín: Asunto del correo electrónico que se enviará
  • URL de la página a enviar: Enlace a la página que vamos a enviar. Puede ser un enlace interno o externo.

Roadmap

Para futuras versiones nos planteamos los siguientes desarrollos:

  • Crear un recurso nuevo que podamos arrastrar a un containerpage y le permita añadir al usuario: Título, texto, imágen y enlaces.
  • Ofrecer por defecto un templates preparado y optimizado para el envío de correos.

Recomendaciones a seguir en HTML para la Creación de Emails

USO DE TABLAS PARA DISEÑAR

1. Debemos usar tablas para la estructuración del contenido puesto que no todos los correos nos interpretan los div correctamente.
2. Las dimensiones deben darse por medios de los atributos de tablas.
3. Para la cabecera, el contenido y el pie de página establecer la anchura de la tabla al 98%.Resulta que Yahoo! toma como cojín el 1% a ambos lados para mostrar el correo electrónico correctamente.

 

EVITAR USO DE CSS EN LA CABECERA

1. Hay que dar estilos a las etiquetas de forma individual porque los proveedores de correo no permiten el uso de la declaración de estilos en la cabecera <style>…</style>.
Debemos emplear
<td style=”color: red”>
2. Utilice los atributos de la tabla y las etiquetas td. Google Mail, busca cualquier estilo en el correo electrónico y lo borra.
3. No hay que hacer referencias a hojas de estilo externas pues los proveedores de correo las modifican o eliminan.
4. El estilo hay que ponerla en la etiqueta más cercana a la información que vaya a afectar.
5. No se deben usar atributos CSS de posicionamiento, dimensiones e imágenes.

 

MANEJO DE TIPOGRAFÍAS

Cuando en el código le asignas aun texto un estilo de tipografía o fuente, se debe incluir tres opciones: font-family:’Trebuchet MS‘, Verdana, Arial. De este modo permitimos al usuario tener la fuente instalada en su ordenador y visualizar el texto. Se debe escoger fuentes similares para no romper la continuidad con el diseño.

IMÁGENES

1. Se debe Emplear rutas absolutas. Hay que evitar que sean largas.
2. Las imágenes han de estar subidas en un servidor.
3. Los proveedores y programas de manejo de correo electrónico deshabilitan las imágenes. No podemos utilizar las imágenes como contenido principal. La información relevante no debe estar incluida en las imágenes.
Se debe lograr que cuando las imágenes no se muestran, no quede un espacio vacío en su lugar que moleste o que esté muy destacado.
4. Asegúrese de que todas las imágenes usan los atributos alt, height, width (mejora los resultados de Google Mail).
5. Oculta la barra de herramientas de imagen. Inserta en las imagenes el atributo galleryimg=”no” (ej. <img … galleryimg=”no” …>. Con esto evitamos la barra de herramientas encima de las imágenes. Se hace bastante pesado en Explorer ver cuando pasas con el ratón una información que te distrae del resto del mail.
6. Los nombres de las imágenes deben ser numéricos para que no sean confundidas como spam.

 

ETIQUETAS

1. No usar las siguientes etiquetas: <body>, <title>, <script>, <applet>, <frame>, <head>, <html>.Esto es básicamente para los webmails que directamente suelen eliminar esa parte del código.
2. <span> Al ser un elemento en línea funciona perfectamente.
3. Evitar la etiqueta <p> ya que dependiendo del cliente de correo se obtiene márgenes diferentes.

 

ATRIBUTOS

1. Empleo del atributo bgcolor para dar el color de fondo en la etiqueta <td>.
2. Usa alt en las imágenes, mientras carga el mail, o si hay problemas de conexión sabremos que va a salir o que debería salir en esa imagen.