Landings

La sección de Landings permite a los administradores gestionar, subir y organizar páginas de aterrizaje personalizadas. Al proporcionar el código HTML de tu sitio, puedes vincular cada landing directamente con activaciones o eventos, garantizando una integración fluida y una experiencia de usuario coherente en toda la plataforma.

El Panel de Landings ofrece una vista centralizada de todas las páginas activas y archivadas asociadas con las activaciones de la plataforma. Cada entrada muestra información clave como el nombre de la página, la ruta, el tamaño del archivo, las fechas de creación y actualización, y el estado de publicación.

En la parte superior de la página encontrarás:

• Pestañas Activas / Archivadas – Cambia entre las landings actualmente en uso y las archivadas.
• Barra de Búsqueda – Filtra páginas por nombre o palabra clave.
• Botón de Subida – Agrega una nueva página de aterrizaje al sistema.
• Contador Total – Muestra el número de landings disponibles (por ejemplo, “Total: 15”).

Descripción del Panel de Landings

Cada fila en el panel corresponde a una landing individual e incluye la siguiente información:

Columna	Descripción
Nombre	El título de la landing (por ejemplo, Audio/Vision, Media Under Dystopia 3.0).
Ruta	La ruta URL única que conecta la landing con su activación (por ejemplo, /xr-creator/activations/the-sound-of-art).
Tamaño	Tamaño del paquete de la landing en megabytes (MB).
Creación	Fecha y hora en que se subió la landing por primera vez.
Actualización	Fecha y hora de la última modificación.
Estado	Indica el estado de publicación (por ejemplo, Borrador o Publicado).

Subir una Landing

Al hacer clic en el botón Subir, se abre la ventana Subir Nueva Landing, donde puedes agregar y configurar una nueva página.

Campos de Subida

Campo	Descripción
Nombre	El título de la landing. Se muestra en el panel y sirve para identificarla en el sistema.
Descripción	Un breve resumen que describe el propósito de la landing (opcional).
Ruta	La URL donde la landing será accesible (por ejemplo, /activations/mi-activacion).

Subida de Archivos

En la parte inferior del formulario, carga tu paquete de landing:

• Arrastra y suelta tu archivo .zip en el área de subida o haz clic para buscarlo manualmente.
• Tipo de archivo permitido: .zip
• Tamaño máximo de archivo: 200 MB

Importante:

Tu archivo .zip debe seguir la estructura correcta para que el sistema reconozca y despliegue la landing adecuadamente.

• El archivo index.html debe estar en el nivel raíz del ZIP (no dentro de una subcarpeta).
• Los directorios de soporte como /css, /js, /fonts y /images deben incluirse junto al archivo index.

Ejemplo de estructura:

/css
/fonts
/images
/js
401.html
404.html
index.html

Una vez subida, la landing aparecerá en la lista Activa con el estado Borrador hasta que sea publicada.

Opciones de Gestión de Landings

Cada landing incluye un menú contextual accesible a través del ícono de tres puntos (⋮).

Desde este menú, los administradores pueden gestionar, previsualizar o publicar las páginas según sea necesario.

Publicar

Activa esta opción para hacer que la landing sea accesible públicamente. Al publicarla, la página quedará disponible en su ruta designada y vinculada a su activación correspondiente.

Previsualizar

Abre una vista previa de la landing en una nueva ventana, permitiendo revisar su diseño, medios y contenido antes de publicarla.

Editar

Abre la landing para modificarla. Usa esta opción para actualizar el contenido, reemplazar recursos o revisar texto antes de volver a publicar.

Descargar

Descarga el paquete de la landing (archivos HTML/CSS/JS) para edición local o respaldo.

Archivar

Mueve la landing a la pestaña Archivadas. Esto ayuda a mantener la lista activa organizada sin eliminar la página permanentemente.

Pestañas Activas y Archivadas

• Pestaña Activas – Muestra todas las landings disponibles o en desarrollo.
• Pestaña Archivadas – Contiene landings antiguas o no utilizadas, almacenadas para referencia o futura reactivación.

Los administradores pueden cambiar entre estas pestañas en cualquier momento para revisar o restaurar contenido archivado.

Conectar Landings con Activaciones

Cada landing puede asociarse directamente con una activación o evento específico.
Esto garantiza que los usuarios experimenten una página de aterrizaje personalizada antes de ingresar al entorno XR.

Casos de uso comunes:

• Formularios de registro o confirmación de asistencia (RSVP)
• Páginas informativas previas al evento
• Secciones de patrocinadores o colaboradores
• Páginas interactivas o con cuenta regresiva

Para vincular una landing con una activación, asegúrate de que la ruta definida coincida con la URL asignada a la activación en el sistema.

Clases Personalizadas para Landings Personalizadas

Puedes agregar clases personalizadas a tus elementos HTML para habilitar funciones interactivas específicas, como botones RSVP, temporizadores de activación o programas dinámicos.

Botón RSVP

Para habilitar el botón de RSVP y permitir que los usuarios confirmen su asistencia, agrega la siguiente clase al elemento del botón:

rsvp-button

Botón de Ticket

Para habilitar el acceso a boletos en activaciones presenciales, agrega la siguiente clase:

ticket-button

Esta clase debe aplicarse al botón que los usuarios hacen clic para ver sus boletos de activación.

Cómo Habilitar un Temporizador en Landings de Activaciones

Agrega las siguientes clases requeridas a tu estructura HTML para mostrar un temporizador regresivo:

timer
days
hours
minutes
seconds

Ejemplo:

Estos elementos deben existir en el diseño para que el sistema pueda inyectar dinámicamente el tiempo restante.

Cómo Habilitar Programas Dinámicos en Landings Personalizadas

Para habilitar programas dinámicos de activaciones, se deben agregar clases específicas en una jerarquía organizada.
Estas clases permiten que el sistema reconozca y muestre correctamente los datos del cronograma o programa de la activación.

Solo necesitas crear un día de calendario y una presentación como estructura base; la plataforma la replicará dinámicamente.

Clases Requeridas:

program
program-day
program-day-text
program-presentations
program-presentations-list
program-presentation
program-presentation-time
program-presentation-image
program-presentation-name
program-presentation-description
program-presentation-button
program-presentation-presenters-list
program-presentation-presenter
program-presentation-presenter-name
program-presentation-presenter-image
program-presentation-presenter-bio

Ejemplo:

Estas clases aseguran que todos los elementos del programa (días, presentaciones, ponentes y horarios) se muestren correctamente y se actualicen de forma dinámica.

Consejo:
Antes de subir tu landing, pruébala localmente para confirmar que todas las rutas de recursos (CSS, JS, imágenes) cargan correctamente y que las clases personalizadas funcionan según lo esperado.
Esto evita errores de diseño, estilos faltantes o botones que no respondan después de la publicación.

Notas

• Solo los administradores o creadores autorizados pueden subir y publicar landings.
• Archivar no elimina el contenido; las landings archivadas pueden restaurarse en cualquier momento.
• Asegúrate de que cada ruta de landing sea única para evitar conflictos con las activaciones.
• Previsualiza las páginas antes de publicarlas para confirmar su diseño y funcionalidad.
• Usa nombres consistentes para facilitar la identificación y organización de las landings.