Diseños (Layouts) en Shining

¿Qué es un Layout ?

Un Layout es una composición de contenido que se reproduce en una pantalla: define el tamaño, las regiones y qué se ve en cada zona (texto, imágenes, vídeo, feeds, etc.).[web:64][web:60]

Puedes imaginarlo como una diapositiva de una presentación: cada Layout suele tener un mensaje o conjunto de mensajes, y Shining irá alternando entre los distintos Layouts según la programación que configures.[web:66]

Los Layouts se crean y gestionan desde el CMS, y son los elementos que asignarás a pantallas concretas o a campañas completas de cartelería digital.

Acceder a la lista de Diseños

Toda la gestión de Layouts se hace desde la sección de Diseños del CMS; allí verás el listado de diseños existentes, su estado y opciones para editarlos.

1. En el menú principal del CMS, entra en la sección Design o Diseño.
2. Haz clic en Layouts o Diseños.
3. Verás una tabla con todos los Layouts, donde se indica el nombre, la duración, el estado (borrador, publicado, inválido, etc.) y acciones rápidas.

Desde esta lista puedes filtrar por nombre, por estado o por usuario creador, lo que facilita mucho el trabajo cuando tienes muchos diseños en producción.

Crear un nuevo Layout

Crear un Layout nuevo es tan sencillo como usar el botón de añadir y luego trabajar en el editor visual de Shining.[web:60][web:64]

1. En la lista de Diseños, pulsa el botón Add Layout o Añadir diseño.
2. Rellena los datos básicos: nombre del Layout, orientación (horizontal/vertical), resolución o tamaño base.
3. Elige si quieres partir de una plantilla en blanco o de una plantilla predefinida.
4. Guarda; el CMS abrirá automáticamente el Layout Editor para que empieces a diseñar.

El editor de Layouts es un entorno gráfico de arrastrar y soltar, donde verás una representación de la pantalla y podrás ir añadiendo regiones y widgets sobre ella.

Regiones y Widgets

Un Layout se divide en Regiones: cada Región es un “bloque” independiente que tendrá su propia lista de contenidos, y esos contenidos son los Widgets.[web:63][web:65]

Para entenderlo mejor:

• Región: zona rectangular dentro del Layout donde se mostrará una secuencia de contenidos.
• Widget: cada elemento de contenido dentro de una Región (una imagen, un texto, un vídeo, un reloj, un ticker, etc.).

En el editor:

1. Activa el modo de edición de Regiones para poder añadir nuevas zonas al Layout.
2. Usa el botón de + Región para crear una o varias regiones, y ajústalas arrastrando o mediante las propiedades de posición.
3. Dentro de cada Región, añade Widgets desde la caja de herramientas (texto, imagen, vídeo, etc.) y configúralos a tu gusto.

Shining reproduce los Widgets de cada Región según el orden que defines, y los repite en bucle mientras el Layout está activo en una pantalla.

Fondos y plantillas

Además de las Regiones, cada Layout puede tener un fondo propio: puede ser un color plano o una imagen que sirva de base para el diseño.

• En la pestaña de Background del editor puedes elegir color de fondo y, si lo deseas, una imagen que ocupe todo el Layout.
• También puedes partir de plantillas que ya incluyen distribución de regiones y estilos preconfigurados.

Cuando tengas un diseño que vayas a reutilizar con frecuencia, shining permite guardarlo como Template para no tener que construirlo desde cero cada vez.

Vista previa y validación

Antes de mandar un Layout a producción, es buena práctica verlo en el propio CMS y comprobar que shining lo considera válido.

• Usa la opción de Preview Layout para ver una simulación del Layout a tamaño completo en el navegador.
• En el editor verás el estado del Layout (válido o con errores); Shining comprueba que no falte contenido obligatorio, que los tiempos tengan sentido, etc.
• Si hay problemas, el sistema te mostrará avisos para que los corrijas antes de publicar.

Este paso te ahorra muchos viajes a la pantalla física, porque puedes detectar errores de diseño directamente desde el navegador.

Publicar y usar un Layout

Mientras estás trabajando en un Layout, normalmente se queda en estado de borrador; para que se pueda usar en programación, hay que publicarlo.

1. Abre el Layout en el editor.
2. Desde el menú del Layout (normalmente un icono de tres líneas), elige la opción Publish o Publicar.
3. Puedes publicarlo inmediatamente o programar una fecha y hora de publicación futura.
4. Una vez publicado, el Layout ya se puede añadir a campañas o programar directamente sobre una o varias pantallas.

Recuerda que cualquier cambio posterior en un Layout publicado puede requerir volver a guardar o actualizar para que las pantallas descarguen la nueva versión.

Layouts superpuestos (Overlays)

Shining permite crear Layouts especiales llamados Overlay Layouts, que se superponen al contenido normal y se muestran por encima.

Son útiles, por ejemplo, para:

• Mostrar el logotipo corporativo en una esquina siempre visible.
• Mantener un mensaje fijo (aviso, número de emergencia, etc.) mientras van pasando diferentes Layouts de fondo.

Estos Overlays se crean igual que un Layout normal, pero se programan con una opción específica para que “floten” sobre el resto de contenidos que se reproduzcan al mismo tiempo.