Cómo configurar diapositivas HTML en los módulos interactivos paso a paso

Una tasa de finalización al 100 % no garantiza que tres semanas después la misma persona reconozca un correo de phishing antes de hacer clic. Leer no es lo mismo que decidir bajo presión, y esa diferencia se entrena.

Las diapositivas HTML en los módulos interactivos de SMARTFENSE están pensadas para cerrar ese hueco. En lugar de pantallas estáticas que se atraviesan con el botón “siguiente”, cada pantalla activa un proceso mental distinto: observar, clasificar, decidir, responder. Y como las diapositivas son HTML, puedes adaptarlas a la marca, al sector y al caso real de tu cliente sin tener que cargar contenido desde cero.

Este artículo es una guía operativa para administradores y partners que quieren configurarlas hoy. Si te interesa primero el porqué del rediseño (el cambio de paradigma, los principios y la lógica del feedback positivo), te recomendamos leer antes el artículo del blog público sobre diapositivas HTML y e-learning interactivo.

Antes de empezar: ¿dónde viven las diapositivas?

En la plataforma encuentras dos puertas de entrada al mismo recurso:

• Galería de contenidos: las plantillas predefinidas que mantiene el equipo de contenidos de SMARTFENSE. Más de 50 módulos listos para usar, agrupados por temática (phishing, contraseñas, ingeniería social, IA, BYOD, etc.). Es el punto de partida recomendado en el 90 % de los casos.
• Contenido personalizado → Módulos interactivos: tu biblioteca propia. Acá viven los módulos que adaptas de la galería y los que creas desde cero.

La decisión sobre desde dónde arrancar es práctica: si existe una plantilla cercana al objetivo, siempre conviene adaptarla antes que construir desde cero. La galería ya trae el armado conceptual (anatomía de un caso, feedback positivo, evaluación final), y tu trabajo se reduce a vestirla con la marca y los ejemplos del cliente.

Paso 1: Crear un módulo desde plantilla

1. Entra a Contenido personalizado → Módulos interactivos.
2. Elige Nuevo módulo interactivo → Desde plantilla.
3. En el listado, selecciona la plantilla que más se acerca al objetivo de la campaña. Por ejemplo, Seguridad en dispositivos móviles si vas a trabajar BYOD.
4. La plataforma te lleva a la primera vista de edición con todas las configuraciones precargadas.

En Datos visibles por el administrador defines lo operativo: nombre interno, descripción, etiquetas, categorías, temáticas, tiempo estimado, dificultad, catálogo y, si usas el componente de normativas, la cláusula correspondiente. Esta vista es la que ven los administradores; ayuda a clasificar el módulo dentro de tu propia biblioteca y a vincularlo con auditorías.

En Datos visibles por el usuario defines lo que el usuario final va a ver: título del módulo, imagen de tapa e imagen de fondo. Si tu cliente tiene una identidad visual fuerte, este es el lugar donde aparece.

Guardas y la plataforma te lleva directo a la edición de las diapositivas, con todo el contenido de la plantilla ya cargado.

Paso 2: Personalizar la marca con cambios mínimos de HTML

Acá viene la primera ganancia rápida. No necesitas saber HTML avanzado; con dos o tres modificaciones puntuales puedes transformar una plantilla genérica en algo que parece hecho a medida.

Cada diapositiva tiene su propio editor HTML. Las operaciones más habituales:

• Cambiar el color de un bloque destacado (por ejemplo, el box de “buenas prácticas”). Buscas la sección de columnas en el código, identificas el bloque por el nombre que ya viene comentado, y reemplazas el código de color. Si tu cliente es una entidad financiera, puedes alinearlo a su brand book.
• Agregar el logo del cliente en la parte superior izquierda. Insertas una etiqueta apuntando a una imagen que ya tengas cargada en la plataforma, ajustas el width y listo.
• Reemplazar textos que mencionan dominios o áreas genéricas por los reales del cliente. Los datos de organización se pueden manejar con variables (ver paso 4), pero a veces es más simple cambiar el copy directo si es un dato fijo.

Después de cada cambio, el botón Previsualizar te lleva a la vista del usuario final. Prueba cada modificación antes de guardar la diapositiva; la previsualización no afecta nada y evita sorpresas en producción.

Una vez que terminas de personalizar una diapositiva, guardas esa diapositiva en particular. En la edición general los cambios se guardan automáticamente, pero a nivel de cada slide tienes que confirmar.

Si todavía tienes dudas sobre cómo editar HTML en la plataforma, la propia vista de edición tiene una ayuda en línea desplegable con ejemplos. También está el centro de ayuda de SMARTFENSE con artículos dedicados al editor.

Paso 3: Crear una diapositiva desde cero

Cuando la galería no tiene lo que necesitas, puedes sumar una diapositiva nueva sin salir del editor.

1. En la vista de diapositivas, busca la opción Agregar diapositiva.
2. Elige el layout: título y cuerpo, dos columnas, una columna, etc.
3. Elige Contenido HTML.
4. Se abre un editor vacío donde pegas el código HTML que quieras.

Un patrón útil para cuando empiezas: parte de una diapositiva ya armada de la galería, copias su HTML, lo pegas en la diapositiva nueva y desde ahí lo modificas. Te ahorra recrear estructura, estilos y comportamiento.

Si en tu organización hay alguien con perfil más técnico, esta es la palanca que abre el techo: cualquier interacción que se pueda armar con HTML, CSS y un mínimo de JavaScript inline cabe acá. Por ejemplo, ejercicios de drag-and-drop para clasificar tipos de phishing, simuladores de bandeja de entrada o cuestionarios con feedback condicional.

Paso 4: Usar variables organizacionales

Esta es la parte que más impacto tiene en la percepción del usuario final, y la que más se subutiliza. Cuando un módulo le habla al usuario por su nombre, menciona su área real y muestra el correo correcto al que tiene que reportar incidentes, deja de sentirse un curso genérico.

La plataforma expone dos juegos de variables:

Variables de usuario (vienen de la base de datos de usuarios):

• nombre y apellido
• correo electrónico
• manager directo
• correo del manager

Variables de organización (se configuran en Configuración → Organización → Datos de la organización):

• nombre del área (mesa de ayuda, SOC, etc.)
• correo del área
• teléfono del área
• nombre del CISO
• nombre del director de tecnología
• correo de reporte de incidentes

Para usar una variable dentro del HTML, basta con insertar el placeholder en el lugar correspondiente. Cuando el usuario abre el módulo, la plataforma reemplaza cada placeholder con el valor real.

Lo que conviene aprovechar es que una variable se actualiza una sola vez y se propaga a todo el contenido. Si mañana cambia el correo al que se reportan incidentes, no tienes que abrir cada diapositiva; editas la variable en la configuración de organización y todos los módulos que la usan se actualizan automáticamente. Lo mismo si cambia el CISO, el área de soporte o el director comercial.

Para clientes con filiales en distintos países, la variable también respeta el idioma del usuario; cada persona ve el correo y los datos del área correspondiente a su geografía.

Paso 5: Lanzar la campaña

Una vez creado o personalizado el módulo, lo vas a ver en la galería de contenidos, ahora con tu adaptación incluida.

Tres caminos para activarlo:

• Previsualizarlo desde la galería. Te lleva a la vista del usuario final y te deja recorrerlo igual que lo va a hacer una persona del cliente.
• Crear una campaña directamente desde el módulo con el botón Crear campaña. La plataforma carga el módulo en el tópico de la campaña automáticamente.
• Sumarlo a una campaña existente desde la configuración normal de campañas.

La configuración de la campaña (audiencia, fechas, recordatorios) sigue siendo la misma que ya conoces para el resto de los módulos interactivos. Lo único que cambia es la experiencia que recibe el usuario final.

Una decisión de venta, no solo técnica

Si trabajas como partner, hay un punto que conviene tener arriba al conversar con un cliente. El foco del trabajo se está moviendo del contenido al comportamiento, y las diapositivas HTML son la pieza que reabre esa conversación de venta. Cuando puedes sentarte frente a un CISO y mostrarle una demo navegable donde un usuario detecta señales de phishing y recibe feedback en cada decisión, la oferta deja de parecer una biblioteca de cursos y empieza a tomar forma de sistema de entrenamiento. La lógica detrás se conecta con cómo los nudges y los momentos educativos moldean el comportamiento sin pedirle al usuario que recuerde un curso entero.

Esa diferencia también abre la conversación sobre métricas más útiles. El porcentaje que completó el curso pasa a segundo plano, y lo que empieza a pesar es cuántos comportamientos mejoraron después del entrenamiento.

Para profundizar

• Workshop completo (35 minutos): la grabación del workshop incluye una demo en vivo del módulo de phishing con IA y los tres bloques completos (estrategia, personalización paso a paso y creación desde cero con variables).
• Artículo de awareness: El cambio de paradigma detrás de las diapositivas HTML. Pensado para presentárselo a un cliente que pregunta por qué este formato.
• La plataforma: la sección de módulos interactivos en SMARTFENSE explica las capacidades transversales (lifecycle de campaña, métricas, normativas) que se cruzan con este tipo de contenido.

Si configuras un módulo para algún cliente y quieres que le demos una mirada antes de lanzarlo, escríbenos. Las primeras adaptaciones suelen ser las que más rinden si las pulimos juntos.