Personalizar la plantilla del Resumen de evento
La herramienta de difusión de resúmenes de eventos por email se sirve de una plantilla genérica diseñada por Symposium. Los Administradores de plataforma pueden generar plantillas adicionales a partir de la genérica. En este artículo se documenta el fondo conceptual sobre el que se ha construido esta herramienta con objeto de que los diseñadores de plantillas de cada institución dispongan del conocimiento necesario para mantener la compatibilidad con clientes de correo electrónico.
Tecnologías aplicadas
La herramienta se ha diseñado utilizando tres tecnologías:
- Handlebars
- Foundation email templates CSS
- Style inliner
Fundamentos
La plantilla principal está escrita usando Handlebars y el framework Foundation. Handlebars se usa para la lógica de la plantilla y Foundation, para la compatibilidad con navegadores y diferentes dispositivos. Por su parte, el style inliner introduce en los tags de la maquetación los estilos para dar compatibilidad con los distintos clientes de correo electrónico. En este sentido, sin embargo, es posible que algunas aplicaciones, a pesar de todo, no interpreten correctamente el código en función del grado de adhesión a los estándares.
Apariencia de una plantilla
El contenedor principal tiene este aspecto:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="../../assets/img/icons/foundation-favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css"
rel="stylesheet">
<title>{{templateTitle}}</title>
</head>
<body>
<!-- Docs - https://foundation.zurb.com/emails/docs/css-guide.html -->
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<!-- The content of your email goes here. -->
<table class="container">
<tr>
<td>
<!-- Header -->
<table class="row padding">
<tr>
<th class="partner-logo">
<a href="{{partnerUrl}}" target="_blank"><img src="{{partnerLogoUrl}}" /></a>
</th>
</tr>
</table>
</td>
</tr>
{{#if eventImageUrl}}
</table>
</center>
</td>
</tr>
</table>
</body>El elemento header dentro del body es un ejemplo de cómo crear una fila con un enlace a la imagen del evento.
{{partnerUrl}}y
{{partnerLogoUrl}}son variables que al generar el resumen a partir de la plantilla se sustituirán por los contenidos a los que hacen referencia.
Variables disponibles, cuándo usarlas y qué representan
| variable | contenido |
|---|---|
| contactEmail | El email de contacto del evento (si no lo hay, se deja en blanco) |
| contactInfo | Verdadero o Falso, según si hay o no información de contacto |
| contactName | Nombre de contacto del evento (si no lo hay, se deja en blanco) |
| contactPhone | Teléfono de contacto del evento (si no lo hay, se deja en blanco) |
| eventDate | Fechas del evento ya formateadas |
| eventDateStartYear | Año de la fecha de inicio del evento en formato YYYY |
| eventDateStartMonth | Mes de la fecha de inicio del evento en formato mm (con ceros iniciales) |
| eventDateStartDay | Día de la fecha de inicio del evento en formato dd (con ceros iniciales) |
| eventDateStartHour | Hora de la fecha de inicio del evento en formato HH (24h con ceros iniciales) |
| eventDateStartMinute | Minuto de la fecha de inicio del evento en formato ii (con ceros iniciales) |
| eventDateEndMonth | Análogo a la fecha de inicio |
| eventDateEndHour | Análogo a la fecha de inicio |
| eventDateEndMinute | Análogo a la fecha de inicio |
| eventTypeName | Tipo del evento |
| eventDateEndDay | Análogo a la fecha de inicio |
| eventDateEndYear | Análogo a la fecha de inicio |
| eventDescription | Descripción completa del evento en HTML que aparece en la home de su website. Debe usarse con precaución porque podría romper el estilo de la plantilla en caso de que contenga estilos en línea o tablas |
| eventIcsUrl | URL del fichero ICS para integración con aplicaciones de calendario personal |
| eventImageUrl | Imagen principal del evento (si no la hay, se deja en blanco) |
| eventInscriptionUrl | URL de la página de inscripción al evento, si está configurado para aceptar asistentes. Si no, queda en blanco |
| eventMapUrl | URL de la ubicación del evento proporcionada por Google Maps |
| eventPlace | Lugar de celebración del evento |
| eventPlaceDetail | Si existe ese contenido, información adicional sobre la ubicación del evento |
| eventShortDescription | Descripción breve del evento, si la hay (este contenido no es traducible en Symposium) |
| eventTitle | Título del evento |
| partnerLogoUrl | URL del logo de la institución que se haya configurado en la plataforma |
| partnerUrl | URL del partner, es decir, la home de la plataforma de eventos |
| templateTitle | Nombre de la plantilla de este resumen |
Cuestiones adicionales
Dado que Symposium utiliza Handlebars para esta herramienta, es posible crear una plantilla específica que use cualquier proceso lógico que permita Handlebars. Por ejemplo, es posible utilizar sentencias
{{#if}}y llamadas a variables
{{variable}}y
{{{variable}}}Esta última si contiene HTML que no debe escaparse.