La herramienta Builder es el sistema de diseño basado en una interfaz gráfica de usuario (GUI) de Korbyt que permite crear nuevos mensajes de señalización (Signage) Layouts o mensajes de escritorio (Desktop Messages).

Ambas interfaces son muy similares y funcionan igual desde el punto de vista de las herramientas de diseño, pero cada una tiene algunas opciones exclusivas de Signage Layouts o Desktop Messages

Este artículo da por hecho que ya dispone de un diseño para editar

Para obtener más información sobre cómo crear un nuevo diseño, consulta

Gestión y creación de mensajes de señalización (Layouts)

Crear y gestionar mensajes de escritorio (InViews)

La herramienta Builder tiene muchas opciones de uso; si busca una herramienta específica, utilice la sección «En esta página» situada a la derecha para navegar

Conceptos básicos

Opciones del panel de control de Builder

El panel de control es la interfaz principal que se utiliza en la herramienta Builder para crear su diseño

• El panel de control se puede contraer utilizando el icono de la lupa situado en la parte superior izquierda

• El panel de control tiene varias secciones en la parte superior que cambian lo que está disponible

  • Básico, Avanzado, Dibujar, Plantilla

• Las secciones del panel de control se pueden contraer o expandir utilizando las flechas situadas a la derecha de los encabezados

La vista avanzada del panel de control muestra más iconos de control en la parte superior y reduce los iconos de elementos en la sección «Añadir elementos». El panel de control avanzado se analiza más adelante en este artículo

Añadir y controlar elementos

Haga clic y arrastre los elementos que desee desde el panel de control al área del lienzo.
Los mismos elementos están disponibles tanto en la vista básica como en la avanzada del panel de control:

Para obtener una lista completa de los elementos disponibles de la herramienta Builder, consulte el artículo nLayout y elementos de Message Builder

Al arrastrar un elemento al área del lienzo, se creará un contenedor para dicho elemento.

Este contenedor tendrá un contorno rojo cuando lo seleccione y un contorno azul tenue cuando no esté interactuando con él (estos contornos no se muestran en la pantalla final).

Hay controles disponibles en tres esquinas si pasa el ratón por encima del área y hace clic

• La esquina inferior derecha es donde puede hacer clic y arrastrar para cambiar el tamaño del elemento

• La esquina superior izquierda es donde puedes editar los desencadenantes que afectan al elemento: icono del rayo

• La esquina superior derecha es donde puedes abrir el menú de configuración para editar el elemento o sus propiedades (icono de engranaje).

  • Los controles de «Editar elemento» muestran el tipo de elemento y ofrecen diferentes tipos de configuración
    

    

    • «Editar elemento» tiene ajustes exclusivos de ese tipo de elemento

      • Así es como se selecciona una fuente, se establece la URL para un elemento de URL externa o se configura el comportamiento de redimensionamiento de una imagen

      • Los diferentes elementos tienen diferentes configuraciones.

      • Layout Y «Elementos del generador de mensajes» muestra los elementos y enlaces a artículos sobre la configuración de cada elemento

    • «Propiedades» abre un panel de control que afecta al contenedor

      • Como establecer el color de fondo del contenedor o ajustar el tamaño del contenedor

      • Para obtener más detalles sobre las propiedades, consulte Menú de propiedades para elementos en la herramienta de creación

    • «Seguridad» permite bloquear el elemento para grupos de usuarios

      • Esta configuración solo está disponible para los administradores de inquilinos

      • Para obtener más detalles, consulte Cómo gestionar usuarios y grupos de usuarios de CMS

    • Eliminar elimina el elemento del lienzo

Organización de las capas de elementos

Cada vez que se añade un elemento al diseño, se crea una nueva capa para ese elemento
Las capas se pueden ver y ajustar en la sección «Capas de elementos» del panel de control

• Los nuevos elementos añadidos crearán una nueva capa en la parte superior de la lista de la sección «Capas de elementos» del panel de control

  • Cuanto más abajo se encuentre un elemento en la lista, más atrás estará en el diseño

  • El elemento situado al final es el que está más atrás, y el situado en la parte superior se encuentra delante de todos los demás

• La posición de la capa de un elemento se puede ajustar haciendo clic y arrastrando hacia arriba o hacia abajo en la lista

• Las capas se pueden renombrar

  • Al crearse, tienen un nombre predeterminado de «element_#_#»

  • Al hacer doble clic en el nombre de una capa, podrás cambiarle el nombre

    • Pulsa Intro para guardar el cambio

• El icono junto al nombre indica de qué tipo de elemento se trata y coincide con el icono de la sección «Añadir elementos»

• A medida que muevas el ratón hacia arriba y hacia abajo por la lista, verás cada capa correspondiente resaltada en rojo en el diseño

  • Si haces clic en un elemento de la lista, se seleccionará dicho elemento en el diseño

  • Si haces clic en el icono que representa el tipo de elemento, se abrirá el menú de edición de elementos

• El icono del ojo hará que la capa sea visible o invisible

  • Si un elemento está oculto al publicarse, permanecerá oculto en la pantalla

    • Esto es habitual en elementos controlados por «Acciones rápidas» o «Data Triggers»

• El icono de la cruz animará el elemento para mostrarlo en el lienzo

• El candado bloqueará el elemento para evitar cambios accidentales

• La papelera eliminará una capa

Guardar y publicar

Guardar frente a publicar

Cuando estés satisfecho con tu diseño, se recomienda utilizar el botón Guardar situado en la parte inferior del panel de control para guardar tu trabajo. De lo contrario, si cierras el navegador o sales del generador, se perderá todo el progreso no guardado.
Al guardar, el diseño pasará al estado Borrador

La publicación no solo guardará tu trabajo, sino que ahora estará disponible para compartirlo y añadirlo a un playlist.

Guardar sin publicar solo crea un registro de tu diseño en el que aún puedes modificar el contenido, pero tu diseño no se podrá utilizar con otras funciones de Korbyt Anywhere.

Funciones avanzadas

Panel de control avanzado

La pestaña «Avanzado» muestra más controles en la parte superior del panel de control

Icono	Descripción
	Control de visualización: establece la forma, la resolución y la orientación del lienzo. Disponible tanto en la vista básica como en la avanzada del panel de control
	Vista previa: abre una nueva ventana para ver el diseño en acción (los elementos de Playlist no se previsualizan en la herramienta Builder). Disponible tanto en la vista básica como en la avanzada del panel de control
	Elementos: muestra los iconos de los elementos y las secciones normales del Panel de control
	Acciones: abre la ventana para crear interacciones y cambios en el diseño basados en código; para obtener más detalles, consulte «Interactividad en un diseño» más adelante en este artículo
	CSS y JavaScript: cambia la herramienta Builder para que puedas interactuar con el CSS y el JavaScript dentro del diseño; para obtener más detalles, consulta «JavaScript y CSS personalizados» más adelante en este artículo
	Consola: abre la ventana de la consola para programar
	Zoom: amplía o reduce el lienzo sin afectar al resto de la interfaz . También puede utilizar la función de zoom de su navegador, pero esto ampliará o reducirá todo
	Regla: si está activada, muestra reglas en la parte superior e izquierda de la pantalla Una vez activada, puede hacer clic y arrastrar desde la regla hasta el lienzo para añadir guías azules Si mantienes pulsada la tecla Mayús mientras arrastras, se moverán en incrementos del 1 % Las líneas se activarán y desactivarán con el icono de la regla Las líneas de la cuadrícula no se muestran en la pantalla
	Recursos: abre la lista de recursos de programación disponibles

Controles avanzados para organizar elementos

Estas opciones están disponibles en el Panel de control avanzado; asegúrate de haberlo seleccionado en el panel de control

Las opciones de disposición funcionan mejor con un nivel de zoom del 100 %

Botones de alineación de un solo elemento

Los iconos de seguimiento aparecen en la vista avanzada cuando se selecciona un elemento en el lienzo

Icono	Descripción
	Centrar horizontalmente: mueve el elemento seleccionado para que quede centrado horizontalmente en la pantalla
	Centrar verticalmente: mueve el elemento seleccionado para que quede centrado verticalmente en la pantalla
	Al hacer clic en ambos, el elemento se centrará en el centro de la pantalla

Si se alinea un elemento de imagen cuyo tamaño no sea «cover», lo mejor es centrar la imagen en el contenedor con un desplazamiento del 50 % en ambas direcciones

Botones de alineación de varios elementos

Los iconos «Seguir» aparecen en la vista avanzada cuando se seleccionan dos o más elementos en el lienzo

Puedes seleccionar varios elementos en el lienzo manteniendo pulsada la tecla Ctrl del teclado mientras haces clic en el contenedor o en el nombre de la capa

El primer elemento en el que haga clic será el punto de anclaje para todos los demás (si se centra, se centrará en el primer elemento en el que se haya hecho clic). Debe colocarse en una posición tal que los demás puedan desplazarse hacia él

Icono	Descripción
	Alinear horizontalmente: alinea varios elementos horizontalmente con respecto al primer elemento Izquierda: los bordes izquierdos de los elementos se alinearán con el primero Centro: todos los elementos se centrarán en el primero Derecha: los bordes derechos de los elementos se alinearán con el primero
	Alinear verticalmente: alinea varios elementos verticalmente con respecto al primero Arriba: los bordes superiores del elemento se alinearán con el primero Centro: todos los elementos se centrarán con respecto al primero Abajo: los bordes inferiores del elemento se alinearán con el primero
	Espacio horizontal: distribuye varios elementos horizontalmente Espacio alrededor: distribuye los elementos a lo largo de todo el lienzo Espacio entre: distribuye los elementos de forma equidistante entre el primero y el último
	Espacio vertical: distribuye varios elementos verticalmente Espacio alrededor: distribuye los elementos a lo largo de todo el lienzo Espacio entre: distribuye los elementos equitativamente entre el primero y el último. Tras hacer clic, puedes elegir entre «Espacio alrededor de los elementos» o «Espacio entre».
	Tamaño: cambia el tamaño de varios elementos a la vez Es útil renombrar los elementos en la lista de capas aquí . Puede introducir el tamaño en la parte inferior o, si un elemento tiene el tamaño correcto, hacer clic en el nombre para establecer ese valor para todos Haga clic en la casilla de verificación azul cuando haya terminado
	Agrupar: agrupa varios elementos en la lista de capas A continuación, se puede hacer clic en la colección y arrastrarla como un grupo, con cuidado de no hacer clic y arrastrar un miembro del grupo Desde la lista de capas se pueden desagrupar o eliminar juntos
	Eliminar: elimina todos los elementos a la vez

Herramienta de anclaje para la colocación de elementos

La herramienta de anclaje se utiliza para alinear o conectar dos elementos con precisión a través de la ventana de Propiedades.

La utilizarás como referencia para todos los demás.
Ese primer elemento debe estar en su posición antes de intentar anclar los demás elementos a él.

Estos anclajes no son permanentes; una vez colocados los elementos, si no quieres que se muevan accidentalmente, lo mejor es utilizar el símbolo del candado en la lista de capas para fijar el elemento en su sitio.

Para utilizar el menú Ancla para mover un elemento

• Coloca el primer elemento en la pantalla donde desees

• En el elemento que estás alineando, haz clic en el icono de engranaje situado en la esquina superior derecha

• Haz clic en Propiedades

• Si es necesario, haz clic en la pestaña «Avanzadas».

• Haz clic en el icono de Ancla

• A continuación, puedes elegir a qué elemento vincular este, es decir, su «padre»

  • Puede resultar útil renombrar tus elementos en la Lista de capas del Panel de control para que tengan nombres más claros aquí, como en este ejemplo

    

    • Véase Disposición de las capas de elementos Consulte la sección anterior de este artículo para obtener más detalles sobre cómo nombrar capas

    • El botón Resplandor añadirá los nombres de los elementos a cada elemento del diseño si es necesario

  • El elemento «Padre» será aquel al que se alineará el elemento con el que estás trabajando

• Después de seleccionar el padre, debes seleccionar cómo se relacionará el hijo con el padre, ya sea conectando diferentes bordes o centrándolos

  • En este ejemplo, he alineado el elemento secundario (botón de la izquierda) con el principal (botón de menú) a lo largo de sus bordes superiores, colocándolos a la misma altura

    

  • A continuación, puedo colocarlos uno al lado del otro seleccionando el borde derecho del «Hijo» y el borde izquierdo del «Padre»

    

  • A continuación, puedo utilizar el desplazamiento X para mover el elemento secundario una distancia determinada respecto al principal

    

  • Si utilizara los bordes interiores, podría seleccionar el punto central de un elemento en lugar de su borde; por ejemplo, centrando el botón de menú en el carrusel

    

• A continuación, puedes repetir este proceso para otros elementos que deban alinearse

  

Acciones rápidas para la interactividad en un diseño a través de

Las acciones rápidas permiten a los diseñadores integrar lógica interactiva y macros en cualquier Layout.
Esto se hace utilizando la interfaz de usuario para seleccionar un elemento, configurar un desencadenante y, a continuación, la respuesta deseada.

Casos de uso habituales de las acciones rápidas:

• Alternar la visibilidad de un mensaje o elemento concreto

• Enviar un comando a un elemento como «Playlist» o «Carousel» para cambiar el elemento que se muestra

• Actualizar datos

• Activar animaciones

Para abrir las acciones rápidas

• En la herramienta Builder, selecciona la pestaña Avanzado del panel de control

  

• Haga clic en el icono del rayo para abrir el panel de Acciones rápidas y Desencadenantes de datos

  

• Las acciones rápidas se encuentran en la parte superior de la ventana

• Haz clic en el signo + situado a la derecha para crear una nueva Acción rápida

  

Para obtener más información sobre cómo crear acciones rápidas, consulta Acciones rápidas para la interactividad en un Layout o un mensaje

Los desencadenantes de datos permiten que los datos en tiempo real afecten a los elementos de la página de inicio de sesión de Lightning

Los desencadenantes de datos permiten a los diseñadores integrar lógica reactiva y macros en un «Layout» o un mensaje.
Esto se hace utilizando la interfaz de usuario para seleccionar un elemento, configurar un desencadenante y, a continuación, la respuesta deseada.

Casos de uso habituales de los desencadenantes de datos:

• Cambiar el formato del texto para llamar la atención sobre los valores de los KPI

• Alternar la visibilidad de un mensaje o elemento establecido para impulsar acciones específicas

Para abrir Acciones rápidas

• En la herramienta Builder, selecciona la pestaña «Avanzado» del panel de control

  

• Haga clic en el icono del rayo para abrir el panel de Acciones rápidas y Desencadenantes de datos

  

• Los desencadenantes de datos se encuentran en el centro

• Haz clic en el signo + a la derecha para crear una nueva acción rápida

  

Para obtener más información sobre cómo crear desencadenantes de datos, consulta Desencadenantes de datos para aplicar datos en tiempo real a los elementos deLayout

JavaScript y CSS personalizados

Esta es una función avanzada del generador que te permite crear, editar y guardar JavaScript y CSS para los elementos de tu layout.

Para abrir el panel de control de JavaScript y CSS

• En la herramienta de creación, selecciona la pestaña «Avanzado» del panel de control

  

• Haga clic en el botón de alternancia <> y, a continuación, haga clic en el botón CSS/JavaScript

  
  

Editor de CSS – Menú de la izquierda

• Resaltar: esta opción resalta todos los elementos del constructor, donde podrás ver información importante, como el ID del elemento y las clases.

• Enviar a vista previa: al seleccionar esta opción, se actualiza la vista previa de tu layout con el CSS actualizado.

• Rehacer/Deshacer: revierte los cambios o deshace las reversiones que realices

• Guardar fragmento: esto te permitirá guardar los fragmentos de código que crees.

• Maximizar/minimizar: esto ampliará o reducirá el editor a las dimensiones de la página.

• Historial de versiones: esto abrirá una lista de las versiones anteriores de cualquier código CSS personalizado (hasta las últimas 10).

Editor de JavaScript – Menú de la derecha

• Resaltar: esta opción resalta todos los elementos del constructor, donde podrás ver información importante, como el ID del elemento y las clases.

• Generador de reglas de datos: esta opción te permitirá insertar JavaScript basado en reglas de suscripción de datos.

• Táctil: esta opción te permite añadir funciones con las que puedes ampliar o desplazar un elemento del constructor.

• Carrusel: esta opción te permite añadir funciones que pueden modificar el comportamiento del elemento carrusel.

• Playlist - Esta opción te permite añadir funciones que pueden modificar el comportamiento del elemento «Playlist».

• Elegir imagen: esta opción te permite añadir una referencia de imagen a tu editor

• Rehacer/Deshacer: revierte los cambios o deshace las reversiones que realices.

• Guardar fragmento: esto te permitirá guardar los fragmentos de código que crees.

• Maximizar/minimizar: esto ampliará o reducirá el editor a las dimensiones de la página.

• Elemento de texto: añade rápidamente un bloque de código dirigido a un elemento de nota de texto específico

• Historial de versiones: esto abrirá una lista de las versiones anteriores de cualquier código CSS personalizado (hasta las últimas 10)

Para volver a la vista Elementos del panel de control, haz clic en el botón de alternancia Elementos

Línea de tiempo de animación

Esta función abre un panel de línea de tiempo en la parte inferior del contenedor del constructor, donde puedes modificar qué animaciones se producen para cada elemento y cuándo se producen.

• Selecciona el icono del portapapeles en las capas de elementos, debajo del panel de controles

• Una vez abierto el panel de la línea de tiempo, puedes empezar a añadir animaciones a tus elementos. Haz clic en cualquier punto de la línea de tiempo junto al elemento que elijas y aparecerá una ventana emergente con una lista de animaciones. Si se coloca una animación a los 10 segundos de la línea de tiempo, la animación no afectará a tu elemento hasta pasados 10 segundos

• Cuando hayas terminado de añadir animaciones a tus elementos en la línea de tiempo, haz clic en el ojo de vista previa del panel de controles para ver tus animaciones en marcha.

Animación mágica

Esta función ofrece un conjunto de animaciones especiales que se pueden aplicar a todos los elementos de tu «layout».

• Haz clic en el botón «Animación mágica» debajo de «Añadir animación» en el panel de controles y aparecerá una ventana emergente.

• Ahora puedes seleccionar diferentes animaciones para tus elementos. En la esquina superior izquierda de la página, en «Animación», hay dos botones: «Individual» y «Al unísono». Si seleccionas «Individual», cada elemento de la página se animará en un orden diferente; si seleccionas «Al unísono», todos los elementos se animarán al mismo tiempo. Para obtener más información sobre cómo controlar las animaciones de tus elementos, consulta la línea de tiempo de animación en este artículo.

Colores/fuentes recientes y colores/fuentes favoritos

Estas secciones del panel de control solo afectan a los elementos basados en texto, como «Texto-Nota» y «Ticker»

La sección Colores/fuentes usados recientemente muestra los colores y las fuentes seleccionados durante la edición del diseño.

Si selecciona un color o una fuente en la sección «Usados recientemente», puede hacer clic en el botón azul «Más» para añadir ese color o fuente a la sección «Colores/fuentes favoritos» y utilizarlos en otros diseños.

Para utilizar un color o una fuente favorita o reciente, abra una nota de texto o un ticker para editarlos, seleccione el texto que desea cambiar y haga clic en el color o la fuente reciente o favorita del panel de control para aplicarla.

Suscripciones

La sección Suscripciones contiene los controles para integrar datos en un diseño, lo que permite ver información en tiempo real que se envía a Korbyt a través de integraciones de datos

Para obtener más detalles sobre las suscripciones de datos y las integraciones de datos, consulta:

• Data Integration y adaptadores de datos

• Cómo añadir datos a un Layout o a un mensaje

Panel de control de dibujo

Opciones de dibujo:

• Estilos básicos: se trata de un conjunto de objetos comunes, como flechas y estrellas.

• Formas de diseño: conjunto de formas comunes que se pueden añadir a tu layout.

• Bocadillo: conjunto de bocadillos para añadir contexto a tu layouts.

• Crea tu propia forma: se trata de un conjunto de herramientas que encontrarías en un editor gráfico y que te permite dibujar en tu «layout» y crear formas personalizadas.

  • Al seleccionar un pincel o una forma, aparecerá un conjunto de opciones en las que puedes modificar el color, el grosor, la sombra y el tipo de pincel.

Fondo y textura

En el panel de controles del generador, selecciona «Fondo y textura» para abrir las opciones que cambiarán el fondo de tu «layout».

Esta función incluye un conjunto de imágenes predefinidas para seleccionar, un selector de color y un selector de imágenes.