Controles de Sites

<< Clic para mostrar Tabla de Contenidos >>

Navegación:  Bizagi Studio > Sites > Editor de Sites > Construyendo un sitio > Diseñador de Sites >

Controles de Sites

Introducción

Bizagi Sites ofrece una variedad de controles que lo ayudan a personalizar las páginas de su sitio a su gusto. Estos controles se encuentran a la izquierda en el Diseñador de Sites. Cada control muestra un menú flotante cuando se desplaza el puntero sobre él. Este menú tiene las opciones disponibles para administrar o modificar el control.

 

OnPremSites07

 

Hay varios controles disponibles para sus sitios, que están clasificados en diferentes categorías:

Encabezado de la página: Aparece en la parte superior de cada página. Al hacer clic en él, puede configurar la navegación a páginas internas y externas, mostrar el logo de su sitio y mostrar información sobre el usuario que está conectado actualmente.

 

Header_01

 

Banner superior: Muestra un banner debajo del encabezado con una imagen fija.

 

SitesControls09

 

Texto: Presenta textos de solo lectura en su sitio. Los textos pueden ser fijos (definidos en el Editor de sitios) o dinámicos, resolviendo el XPath de un atributo existente cuando la página está contextualizada. Puede utilizar los elementos de texto como títulos, como conjunto de instrucciones o información útil que puede mostrarse pero no modificarse.

 

SitesControls11

 

Media: presenta los controles de manejo de medios disponibles: mapa simple, imagen y mapa.

 

SitesControls14

 

Botones: presenta los controles que se pueden vincular a una página interna o externa, o inician una nueva instancia de un caso de cualquier proceso.

 

SitesControls15

 

Colecciones: presenta los controles que pueden mostrar varios elementos o colecciones en una variedad de diseños.

 

SitesControls07

 

Experiencia: presenta las opciones disponibles directamente vinculadas a Bizagi como el inbox y mis procesos relevantes.

 

SitesControls16

 

Figuras: presenta las diferentes figuras que puede utilizar para personalizar su sitio.

 

SitesControls17

 

Incrustados: presenta la lista de controles diseñados para contener información de otros sitios web.

 

SitesControls18

 

Opciones de configuración de control

Cada control tiene diferentes opciones de configuración. Dependiendo de la categoría de control y el tipo, algunas de estas opciones serán visibles. Las opciones disponibles son:

 

SitesControls00

 

Administrar contenido: Define lo que se mostrará dentro del control.

Configuración: Muestra un conjunto de propiedades que puede personalizar para cada control.

Editor de vínculo: Permite configurar la navegación a una página interna o externa, o iniciar una nueva instancia de caso de cualquier proceso alojado en el Proyecto de automatización.

Visible para: Permite seleccionar las partes interesadas que podrán ver el controlador una vez que se publique el sitio.

Layout: Permite seleccionar cómo se muestra el control.

Duplicar: Clona el control y coloca la copia bajo el control original.

Borrar: Elimina el control de la página. Cuando utiliza esta opción, aparece un mensaje de confirmación.

 

Administrar contenido

Esta sección explica las diferentes formas de administrar el contenido según el control de Bizagi.

 

Configuración del encabezado

El elemento de Banner superior muestra un banner bajo el encabezado con una imagen fija.

 

SitesControls10

 

Mostrar Encabezado: Habilita si la imagen del encabezado es visible o no.

Espacio de encabezado: Define si la imagen se expande para ajustarse al ancho de la página o si está contenida dentro de las líneas de guía.

Configuración de imagen: Define la imagen que se va a utilizar. Puede subir una imagen o utilizar una URL. Se admiten los siguientes formatos: .png, .jpg y .jpeg. Cuando se usa una imagen desde una URL, esta no se podrá ver en la miniatura del tablero de control.

Seleccione un ajuste: Define cómo se colocará la imagen en el espacio asignado. Puede elegir entre mantener el tamaño original, escalar para ajustarse o usar la imagen como mosaico.

Tamaño de imagen: Define el tamaño de la imagen en su sitio.

Posición de imagen: Estos controles te ayudan a mover hacia arriba, abajo, izquierda, derecha o en diagonal tu imagen.

Opacidad de imagen (%): Define la transparencia de tu imagen.

Color de fondo y opacidad: Si la imagen tiene transparencia, este control le ayuda a definir el color de fondo y su opacidad.

 

Para guardar los cambios, haga clic en Aplicar y para descartarlos, haga clic en Cancelar.

 

Administrar contenido de texto

Si la página está contextualizada, esta opción define si el contenido es dinámico o estático usando la propiedad Contextualizar datos. Cuando Contextualizar datos está activo, se muestra la propiedad Seleccionar xpath para poder especificar el atributo mostrado.

 

Text_02

 

Cuando Contextualizar datos está desactivado, se muestra la propiedad Mensaje para que pueda establecer su contenido estático.

 

Si la página no está contextualizada, el contenido solo será estático.

Utilice esta opción para proporcionar el contexto del elemento de texto

Text_03

 

Administrar contenido de botón

El control de botón le permite agregar un botón regular.

 

SitesControls22

 

Puede agregar íconos a su botón y cambiar el texto que se muestra.

También puede agregar un botón redondo y personalizar su ícono.

 

SitesControls23

 

Por último, el control de botón le permite agregar enlaces a su sitio. Puede configurar el texto para mostrar del enlace.

 

SitesControls24

 

Administrar contenido de Mis procesos relevantes

El control de Mis procesos relevantes le permite cambiar el título del control desde la opción Administrar contenido.

 

SitesControls21

 

Administrar contenido de Incrustados

El control de Incrustados le permite agregar un control de sitio incrustado donde puede agregar código HTML, CSS y JS.

 

SitesControls25

 

También puede agregar un control iframe HTML donde puede escribir una dirección de sitio web en el control.

 

SitesControls26

 

Si la página tiene contexto, se puede definir si el contenido es estático o dinámico por medio de la propiedad Contextualizar datos.

 

SitesControls38

 

Cuando se enciende Contextualizar datos, es posible crear URLs dinámicas para estos contenedores. Para lograrlo, ingrese la URL fuente, seleccione la sección de la cadena que quiere reemplazar y finalmente seleccione el XPath de dónde obtendrá el valor para la cadena reemplazada.

 

Contex_iFrame

 

Se pueden seleccionar varias secciones de la dirección para reemplazarlos con diferentes valores XPath.

 

Administrar contenido de Media

Los controles de media son los siguientes: imagen, mapa y mapa simple.

Cuando agrega una imagen a su sitio, puede cargar un archivo u obtenerlo de una URL. Se admiten los siguientes formatos: .png, .jpg y .jpeg.

 

SitesControls27

 

Si la página tiene contexto, se puede definir si el contenido es estático o dinámico por medio de la propiedad Contextualizar datos. Cuando esta propiedad se enciende, es posible seleccionar un XPath para la imagen.

 

SitesControls40

 

Cuando agrega un control de mapa, puede configurar los siguientes contenidos:

 

SitesControls28

 

Search place: aquí es donde se encuentra su pin en el mapa.

Mostrar Pin: hace visible el pin cuando está habilitado.

Texto: define un texto descriptivo debajo del icono del pin.

Título: define el nombre de la ubicación seleccionada.

Zoom: define el zoom del mapa.

 

El mapa simple, como su nombre lo indica, tiene una interfaz más simple. Por lo tanto, no es necesario configurar el texto o el título.

 

Configuración

Muestra un conjunto de propiedades que le ayudan a personalizar el control.

Esta lista muestra todas las opciones disponibles en este menú:

Alinear: define si el texto está alineado a la izquierda, a la derecha o al centro.

Organizar: define la ubicación del control con respecto a otros. Puede traer al frente, enviar al reverso, adelantar o enviar al revés.

Color de fondo: define el color de fondo para el control. El color predeterminado depende del tema seleccionado.

Negrita: define si el texto del encabezado está en negrita o no.

Color de borde: define el color de borde de la imagen.

Radio del borde: define la redondez de las esquinas del botón.

Tamaño del borde: establece el tamaño del borde de la imagen en píxeles.

Tipo de borde: define el tipo de borde para el control.

Color de fondo de los botones: define el color de fondo de los botones dentro del control, el color predeterminado se define por el tema seleccionado.

Contenedor de botones: Cambia el color de fondo de los botones con el color del texto.

Color del texto de los botones: define el color de fuente de los botones dentro del control. El color predeterminado está definido por el tema seleccionado.

Tamaño del botón: seleccione el tamaño del botón, ya sea Pequeño, Medio o Grande.

Radio de esquina: define la redondez de las esquinas del controlador.

Pantalla: establece cómo se organiza el control. Hay tres opciones disponibles: en caja, básica y mínima.

Color de fuente: define el color del texto que se muestra en el panel de navegación. El color predeterminado depende del tema seleccionado.

Familia de fuentes: define la familia de fuentes del elemento de texto.

Tamaño de fuente (px): tamaño del texto que se muestra en el panel de navegación.

Altura: define la altura en píxeles del encabezado.

Color del icono: define el color del icono.

Tamaño de imagen: define cómo encaja la imagen en el campo. El tamaño original mantiene las proporciones de la imagen dentro del campo. La escala para rellenar extiende la imagen, manteniendo sus proporciones originales, para rellenar el campo.

Mantener las proporciones originales: define si la forma sigue siendo un cuadrado o círculo perfecto.

Icono izquierdo: establece el botón para mostrar el icono en el lado izquierdo del botón.

Espaciado de letras: aumenta o disminuye el espacio entre los caracteres.

Tamaño del logo: define el ancho en píxeles del logo. La altura del logo se ajustará para mantener las proporciones correctas.

Opacidad: establece el porcentaje de transparencia de un control.

Color de información del pin: define el color de fondo para el icono de ubicación.

Color de texto de la información de pines: define el color del texto en el icono de ubicación.

Icono derecho: establece el botón para mostrar el icono en el lado derecho del botón.

Color de la imagen seleccionada: define el color de la línea debajo de la imagen seleccionada. El valor predeterminado está definido por el tema seleccionado.

Mostrar icono de botón: establece si el icono se muestra en el botón.

Mostrar logotipo: establece si se muestra el logotipo. El valor predeterminado es verdadero (se muestra el logotipo).

Mostrar barra superior: define si se muestra el título.

Mostrar botón de actualización: define si se muestra un botón de actualización.

Estirar al ancho completo: ensancha la figura para que se ajuste al ancho de la página.

Restablecer: establece los valores predeterminados para todas las propiedades.

Título: Establece el título para el control.

Contenedor de título: cambia el color de fondo del contenedor de título por el color del texto.

Color del texto del título: define el color de fuente del título. El valor predeterminado está definido por el tema seleccionado.

Color de fondo del título: define el color de fondo del título.

 

Editor de vínculo

El Editor de vínculo le permite configurar la navegación en una página interna o externa, o iniciar una nueva instancia de caso de cualquier proceso alojado en el Proyecto de automatización.

 

SitesControls19

 

Vínculo estático: Vincula el control a un enlace estático a través de una URL. Cuando esta opción está seleccionada, las siguientes propiedades están habilitadas:

oVínculo: La URL a la que el usuario será redirigido.

oAbrir en nueva pestaña: Define si la página de destino se abrirá en una nueva pestaña. El valor predeterminado es falso.

Vínculo interno: Vincula el control a una página del sitio actual.

oSeleccione una página: Define la página a la que será redirigido el usuario. Solo puede seleccionar una página que ya haya creado.

oAbrir en nueva pestaña: Define si la página se abrirá en una nueva pestaña. El valor predeterminado es falso.

Procesos: Vincula el control a un proceso existente en el proyecto de automatización.

oSeleccione un proceso: Define el proceso a iniciar.

 

Layout

La opción de layout le permite personalizar cómo se mostrarán sus controles. Esta opción está disponible en aquellos controles que muestran una lista de elementos.

 

Diseño

Define cómo se muestran los artículos

Mostrar normal: Define cómo se organizan los elementos dentro del control.

Posición de la barra de acciones: Define dónde se encuentra la barra de acciones en el control.

Comprimido para menos datos: Si se selecciona esta opción, el espacio entre los elementos de control se reduce.

 

Layout

Define el diseño del control: columnas, filas, número de elementos por página.

Columnas: Esta sección define la configuración de la columna.

oLayout: define el número de columnas que se mostrarán o el ancho de la columna Relevante para mí.

 

SitesControls20

 

Elementos mostrados: Define el número de elementos por página en el control.

Vista de elementos: muestra cómo se agrupan los elementos. Por defecto es paginación.

Filas: Esta sección define la configuración de la fila.

oEspacio vertical: Define la distancia entre filas en píxeles.