Configuración Wizad

La configuración del producto se realiza a través del Asistente de configuración, en el que se lleva a cabo el proceso de mantenimiento de temas de diseño, temas de widgets, navegadores, estandarización del entorno y copia de páginas. Los cambios en los parámetros se ven en la vista previa, lo que permite comprender cada personalización.

Nota: Solo los usuarios con rol de administrador o los usuarios con permiso pueden acceder y editar la página de configuración. Los widgets contenidos en la página no se pueden eliminar, de lo contrario, el uso del producto se verá comprometido.

¿Qué es un tema de diseño?

 

El tema de diseño controla los colores principales, los menús de página y la personalización de los widgets predeterminados (búsqueda, alerta y perfil).

Los temas están agrupados por categorías: fabricación, comercio minorista y servicios. Nuestros profesionales de la comunicación evaluaron cada segmento e identificaron características, que dieron lugar a temas estándar.  

El usuario puede cambiar los temas predeterminados o crear nuevos temas a través del botón "Copiar". Sugerimos copiar el tema predeterminado que esté más en línea con su identidad visual.

tema de layout.jpg

A través del asistente de configuración es posible migrar todas las páginas de TOTVS Fluig Plataforma (personalizadas y estándar) a un tema de diseño de Digital Workplace by Digte. 

¿Dónde se usa el tema de diseño?

 

El tema de diseño se puede utilizar en cualquier página con el diseño de Digte.

Para identificar el diseño de Digte, simplemente observe los bordes de colores alrededor del elemento, como en el siguiente ejemplo:

layout_página.PNG

Puede elegir el diseño al crear una nueva página, crear una comunidad o cambiar el diseño de una página existente. Por ejemplo: Al elegir la opción "Cambiar diseño", verá varias opciones para el diseño de la página, simplemente seleccione la opción que desee y haga clic en "Aplicar diseño".

trocar layout.jpg

Los temas de diseño se utilizan al editar páginas, y diferentes páginas pueden tener diferentes temas de diseño. Por ejemplo: la página "Inicio" tiene un tema de diseño diferente al de la página "Acerca de la empresa".

tema de layout-seta.png

Configurar tema de diseño

 

Dentro de un tema, el usuario puede cambiar varias características, tales como: parte superior, menú, página, widgets, espacios, pie de página. Mientras el usuario está editando, es posible ver en la vista previa cómo se verán los cambios.

configurando layout.jpg

Identificación del tema:

  • Código: Código de identificación del tema. No debe llenarse con espacios, caracteres especiales y letras mayúsculas, escriba solo letras minúsculas

  • Nombre: ingrese el nombre del tema creado

Arriba y menú:

Cima:  

  • Altura: establezca una altura para su parte superior

  • Comportamiento:

    • Corregido: la parte superior se fija al principio de la página

    • Track scroll: la parte superior sigue el scroll de la pantalla

  • Posición del logotipo: defina si el logotipo estará a la izquierda, a la derecha o centrado

  • Logotipo de visualización:

    • Sí: el logo aparecerá en la parte superior.

    • No: el logo no aparecerá en la parte superior

  • Color de fondo: elige cuál será el color de fondo de tu top

  • Imagen de fondo: si elige poner una imagen de fondo en la parte superior, primero inserte la imagen en su ECM  y luego haga clic en el campo de búsqueda para seleccionar la imagen deseada. NOTA: Si coloca una imagen, se superpondrá al color de fondo.

  • Repetir imagen: establezca si la imagen de fondo se repetirá en la parte superior

Menú horizontal y vertical:

  • Habilitar: establezca si el menú se habilitará

    • Sí: habilita la visualización del menú

    • No: desactiva la visualización del menú

  • Versión:

    • 1:Habilita el submenú en cascada al pasar el mouse sobre páginas que tienen un submenú.

    • 2: Desactiva la visualización del submenú en cascada y habilita una funcionalidad que le permite hacer clic en el botón de página en el menú y reemplazar todo el menú con los elementos que estarían dentro del submenú en cascada.

  • Posicionamiento: establezca si el posicionamiento del menú

    • Izquierda: el menú estará a la izquierda de la página

    • Arriba: el menú estará en la parte superior de la página

  • Alto: establece el alto del menú en píxeles (px). Si no se completa, el valor predeterminado será de 60 píxeles (px)

  • Color de fondo: establece el color de fondo del menú

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color de fondo (cursor superpuesto): establezca el color de fondo al pasar el cursor

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del marcador: establezca el color de la línea debajo del botón de página activa

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Imagen de fondo: si elige poner una imagen de fondo en el menú, primero inserte la imagen en su ECM  y luego haga clic en el campo de búsqueda para seleccionar la imagen deseada. NOTA Si coloca una imagen, sobrescribirá el color de fondo.

  • Repetir imagen: establezca si la imagen de fondo se repetirá en el menú

    • No repetir: la imagen no se repetirá

    • Derecha del widget: las imágenes se repetirán solo a la derecha de los widgets superiores

    • Debajo del widget: las imágenes se repetirán solo debajo de los widgets superiores

    • Ambas direcciones: las imágenes se repetirán en la parte inferior y a la derecha de los widgets superiores.

  • Formato de texto: Defina el formato que deben tener los textos en el menú

    • Capitalizar: la primera letra de cada palabra se escribirá en mayúscula

    • Minúsculas: todas las letras estarán en mayúsculas

    • Mayúsculas: todas las letras estarán en minúsculas

  • Color del título: establece el color del título del menú

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del título (superposición del cursor): establezca el color del título al pasar el cursor

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Tamaño del título: establece el tamaño del título en píxeles (px)

  • Tamaño del título en el submenú (versión 1): establezca el tamaño de los títulos en la versión 1 del menú en píxeles (px)       - Solo en el menú Horizontal

  • Alineación del título en el submenú (versión 1): Establecer alineación del título : solo menú horizontal

    • Izquierda: los títulos estarán a la izquierda

    • Centralizado: los títulos se centralizarán

    • Derecha: los títulos estarán a la izquierda

  • Tipo de submenú abierto (versión 1): defina qué submenú se abrirá  - Solo en el menú Vertical

    • Acordeón: el submenú se abrirá hacia abajo

    • Apertura lateral: el submenú se abrirá en el lado derecho

  • Color del icono: defina el color del icono en el menú. NOTA: El color elegido solo se aplicará a los iconos estándar de TOTVS Fluig Plataforma

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Tamaño del icono: establezca el tamaño en píxeles (px) de los iconos

  • Color del icono (superposición del cursor): establece el color del título al pasar el cursor por encima. NOTA  La superposición de colores solo se aplicará a los iconos estándar de TOTVS Fluig Plataforma

 

 

 

Página:

  • Color de fondo: establece el color de fondo de la página.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Centro de contenido: establezca si el contenido de la página debe estar centrado

    • Sí: el contenido está en el medio de la página.

    • No: el contenido ocupa todo el ancho de la página

  • Ancho del contenido centrado: defina en píxeles (px) qué tan ancho debe ser el contenido centrado

  • Imagen de fondo: si elige poner una imagen de fondo en el menú, primero inserte la imagen en su ECM  y luego haga clic en el campo de búsqueda para seleccionar la imagen deseada.  El tamaño recomendado es 1024 x 768 píxeles (px)  NOTA Si coloca una imagen, sobrescribirá el color de fondo.

 

 

 

Widgets:

Buscar:

  • Personalizar: le permite habilitar la personalización del campo de búsqueda

    • Sí: habilita la personalización

    • No: deshabilita la personalización

    • Ocultar: oculta el componente

  • Curvatura: establezca la curvatura del campo de 0 a 50

    • 0 permanece cuadrado

    • 50 está en su máxima curvatura,  ronda

  • Color de fondo: establece el color de fondo del componente.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del icono: establezca el color del icono (lupa)

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

​​

Alerta (sin notificación):

  • Personalizar: le permite habilitar la personalización del campo de búsqueda

    • Sí: habilita la personalización

    • No: deshabilita la personalización

  • Curvatura: establezca la curvatura del campo de 0 a 50

    • 0 permanece cuadrado

    • 50 está en su máxima curvatura,  ronda

  • Color de fondo: establece el color de fondo del componente.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del icono: establezca el color del icono

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

Alerta (con notificación):

  • Color de fondo: establece el color de fondo del componente.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del icono: establezca el color del icono

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

Mensajería (sin notificación):

  • Personalizar: le permite habilitar la personalización del campo de búsqueda

    • Sí: habilita la personalización

    • No: deshabilita la personalización

  • Curvatura: establezca la curvatura del campo de 0 a 50

    • 0 permanece cuadrado

    • 50 está en su máxima curvatura,  ronda

  • Color de fondo: establece el color de fondo del componente.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del icono: establezca el color del icono

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

Mensajería (con notificación):

  • Color de fondo: establece el color de fondo del componente.

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Color del icono: establezca el color del icono

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

Perfil:

  • Personalizar: le permite habilitar la personalización del campo de búsqueda

    • Sí: habilita la personalización

    • No: deshabilita la personalización

  • Curvatura: establezca la curvatura del campo de 0 a 50

    • 0 permanece cuadrado

    • 50 está en su máxima curvatura, redondo

 

 

 

ranuras

  • Fuente: elija la fuente para aplicar a sus componentes. Solo puede incrustar fuentes de Google Fonts

  • Espacio entre ranuras: defina si habrá espacio entre ranuras

    • Sí: las ranuras tendrán espacio entre ellas

    • No: las ranuras no tendrán espacio entre ellas

  • Color de fondo: establece el color de fondo de las ranuras

    • RGBA: ponga el código en RGBA

    • Hexadecimal: ponga el código en hexadecimal. Este código se convertirá a RGBA

  • Imagen de fondo: si elige poner una imagen de fondo en el menú, primero inserte la imagen en su ECM  y luego haga clic en el campo de búsqueda para seleccionar la imagen deseada.  El tamaño recomendado es 1024 x 768 píxeles (px)  NOTA Si coloca una imagen, sobrescribirá el color de fondo.

 

 

 

Zócalo

  • Habilitar: Defina si debe aparecer el pie de página predeterminado de TOTVS Fluig Plataforma

    • Sí: habilita el pie de página

    • No: desactiva el pie de página.

¿Cómo utilizar un diseño de página?

 

Para usar un diseño de Digital Worplace by Digte y los temas que se crearon, simplemente siga los pasos a continuación:

1) Cree una página a través del "Panel de control"

2) Elija un diseño de página que tenga bordes de colores, son diseños de Digital Workplace de Digte

Recordando que después de elegir el diseño de Digte, simplemente siga el flujo normal para terminar de crear su página.

minhas paginas.gif
 

¿Qué es un tema de widget?

Widget Theme controla los colores del título, las fuentes, los bordes, el fondo, los iconos, los rizos, las sombras y muchas otras configuraciones de marca para los widgets de productos de Digital Workplace by Digte.

Los temas están agrupados por categorías: fabricación, comercio minorista y servicios. Nuestros profesionales de la comunicación evaluaron cada segmento e identificaron características, que dieron lugar a temas estándar.  

El usuario puede cambiar los temas predeterminados o crear nuevos temas a través del botón "Copiar". Sugerimos copiar el tema predeterminado que esté más en línea con su identidad visual.

 

¿Dónde se usa el tema del widget?

El tema del widget se utiliza al configurar los widgets. Los diferentes widgets pueden tener diferentes temas, por ejemplo: el componente de horarios tiene un tema de widget diferente al componente de cumpleaños

 

Los temas de los widgets son independientes de los temas de diseño, por lo que puede combinar temas de diferentes categorías.

tema de widget - configuracao.png
 

Configurar un tema de widget

Dentro de un tema, el usuario puede cambiar varios recursos, tales como: título, herramientas, imágenes, contenedor y mucho más. Mientras el usuario está editando, es posible ver en la vista previa cómo se verán los cambios.

configurar tema de layout.jpg

Detalles de los campos de diseño:

Tipo

Grupo de información utilizado para identificar el tema del diseño.

 

Id (código del tema): Debe llenarse con caracteres en minúscula, sin espacios y sin caracteres especiales.

 

Nombre (nombre del tema): se debe completar el nombre del tema a crear.

 

Categoría (categoría de tema): este campo tiene 3 (tres) opciones:

- Segmento de fabricación.

- Segmento minorista.

- Segmento de servicios.

Posteriormente, consultará estos segmentos para editar su tema.

Título

Alinear (alinear el título dentro de la barra de título): le permite alinear el título y tiene 3 (tres) opciones:

- Izquierda: alinea el título a la izquierda dentro de la barra de título.

- Derecha: alinea el título a la derecha dentro de la barra de título.

- Centro: alinea el título dentro de la barra de título.

 

Tamaño (tamaño del título): le permite establecer el tamaño del texto en píxeles (px).

 

Color (color del texto): le permite definir el color del texto y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Fondo (color de fondo de la barra de título): le permite definir el color de fondo de la barra de título y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Case (formato de fuente): Tiene 4 (cuatro) opciones.

- Ninguno: deshabilita el formateo.

- Capitalizar: cada palabra comienza con una letra mayúscula.

- Minúsculas: todas las palabras están en minúsculas.

- Mayúsculas: todas las palabras están en mayúscula.

 

Familia (fuente del título): le permite definir la fuente del título predeterminada con solo ingresar el nombre de la fuente y tiene 2 (dos) opciones:

- Google Fonts: cualquier fuente de Google Fonts

- Fuentes del sistema: fuentes del sistema estándar (por ejemplo, Calibri y Arial).

 

Margen superior (margen superior de la barra de título): le permite establecer el margen superior de la barra de título en píxeles (px).

 

Margen derecho (margen derecho de la barra de título): le permite definir el margen derecho de la barra de título en píxeles (px).

 

Margen inferior (margen inferior de la barra de título): le permite establecer el margen inferior de la barra de título en píxeles (px).

 

Margen izquierdo (margen izquierdo de la barra de título): le permite definir el margen izquierdo de la barra de título en píxeles (px).

 

Espacio interno superior (espacio interno de la barra de título): le permite definir el espacio interno superior de la barra de título en pxiels (px).

 

Espacio interno derecho (espacio interno de la barra de título): le permite definir el espacio interno derecho de la barra de título en pxiels (px).

 

Espacio interno inferior (espacio interno de la barra de título): le permite definir el espacio interno inferior de la barra de título en pxiels (px).

 

Espacio interno izquierdo (espacio interno de la barra de título): le permite definir el espacio interno izquierdo de la barra de título en pxiels (px).

 

Curva superior izquierda (curva de la esquina superior izquierda de la barra de título): define la curva de la esquina superior izquierda de la barra de título y tiene un rango de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Curvatura superior derecha (Curvatura de la punta superior derecha de la barra de título): Permite definir la curvatura de la punta superior derecha de la barra de título y tiene un rango de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Curvatura inferior izquierda (Curvatura de la punta inferior izquierda de la barra de título): Permite definir la curvatura de la punta inferior izquierda de la barra de título y tiene un rango de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Curvatura inferior derecha (Curvatura de la punta inferior derecha de la barra de título): Permite definir la curvatura de la punta inferior derecha de la barra de título y tiene un rango de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

Habilitar borde inferior (Insertar un borde debajo de la barra de título): le permite insertar un borde debajo de la barra de título y tiene 2 (dos) opciones:

- Sí: habilita el borde.

- No: desactiva el borde.

 

Espesor (Espesor del borde inferior): Permite definir el grosor del borde inferior en píxeles (px).

 

Estilo (estilo del borde inferior): le permite definir el estilo del borde inferior y tiene 7 (siete) opciones.

- Ninguno: sin estilo para el borde inferior.
- Punteado: estilo punteado.
- Punteado: estilo punteado
- Doble: estilo doble.
- Surco: Estilo biselado interno.
- Cresta: Estilo biselado externo.
- Sólido: estilo sólido.

 

Color (color del borde inferior): le permite definir el color del borde inferior y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

Herramientas

 

Habilitar (Habilitar herramientas): le permite habilitar las herramientas de colapso y ayuda en la barra de título y tiene 2 (dos) opciones:

- Sí: habilita las herramientas.

- No: desactiva las herramientas.

 

Fondo de herramientas (color de fondo de la herramienta): le permite definir el color de fondo de las herramientas de colapso y ayuda en la barra de título y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA. - RGBA: introduzca el código de color RGBA.

 

Color de herramientas (Color de los iconos dentro del botón de herramientas): Permite definir el color de los iconos de las herramientas de colapso y ayuda en la barra de título y tiene 2 (dos) opciones: - Hexadecimal: Coloca el código hexadecimal del color. Este código se convertirá a RGBA. - RGBA: introduzca el código de color RGBA.

 

Posición de las herramientas (Posición de las herramientas dentro de la barra de título): Le permite definir la posición de las herramientas dentro de la barra de título y tiene 2 opciones:

- Izquierda: coloque las herramientas a la izquierda dentro de la barra de título.

- Derecha: coloque las herramientas a la derecha dentro de la barra de título.

 

Herramientas Píxeles (margen derecho de la herramienta): le permite establecer el margen derecho de la herramienta en píxeles (px).

 

Colapso

Habilitar (botón Contraer): le permite habilitar solo el botón Contraer y tiene 2 (dos) opciones:

- Sí: habilita el colapso.

- No: desactiva el colapso.

 

Envase

Margen superior (margen superior del contenedor de widgets): le permite establecer el margen superior del contenedor de widgets en píxeles (px).

 

Margen derecho (margen derecho del contenedor del widget): le permite definir el margen derecho del contenedor del widget en píxeles (px).

 

Margen inferior (margen inferior del contenedor del widget): le permite establecer el margen inferior del contenedor del widget en píxeles (px).

 

Margen izquierdo (margen izquierdo del contenedor del widget): le permite definir el margen izquierdo del contenedor del widget en píxeles (px).

 

Espacio interior (Espacio interior del contenedor): Le permite definir el margen interior del contenedor del widget en píxeles (px).

 

Imagenes

Curvatura (Curvatura de la imagen): Permite definir la curvatura de la imagen y tiene una variación de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Tabla

Línea impar (color de línea impar): le permite definir el color de la línea impar y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Línea par (Color de línea par): Permite definir el color de la línea par y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Fuente

Color P y Textos (Color de párrafos y textos comunes): Le permite definir el color del texto y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Familia P (fuente de párrafo): le permite definir la fuente predeterminada para el tema de diseño simplemente colocando el nombre de la fuente y tiene 2 (dos) opciones:

- Fuentes de Google: Cualquier fuente de fuentes de Google .

- Fuentes del sistema: fuentes del sistema estándar (por ejemplo, Calibri y Arial).

 

(H1, H2, H3, H4, H5, H6 y formulario de título de texto)

 

Familia (fuente de párrafo): le permite definir la fuente predeterminada para el tema de diseño con solo colocar el nombre de la fuente y tiene 2 (dos) opciones:

- Fuentes de Google: Cualquier fuente de fuentes de Google .

- Fuentes del sistema: fuentes del sistema estándar (por ejemplo, Calibri y Arial).

 

Tamaño (tamaño del título): le permite establecer el tamaño del texto en píxeles (px).

 

Color (color de fuente): le permite definir el color de fuente y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Transformación (formato de origen): Tiene 4 (cuatro) opciones.

- Ninguno: deshabilita el formateo.

- Capitalizar: cada palabra comienza con una letra mayúscula.

- Minúsculas: todas las palabras están en minúsculas.

- Mayúsculas: todas las palabras están en mayúscula.

 

Botón

 

Común

Color (Color de fuente dentro del botón): Le permite definir el color de fuente dentro del botón y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Case (formato de fuente): Tiene 4 (cuatro) opciones.

- Ninguno: deshabilita el formateo.

- Capitalizar: cada palabra comienza con una letra mayúscula.

- Minúsculas: todas las palabras están en minúsculas.

- Mayúsculas: todas las palabras están en mayúscula.

 

Color de fondo (color del botón): le permite definir el color de la fuente dentro del botón y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Borde (Insertar un borde alrededor del botón): le permite insertar un borde alrededor del botón y tiene 2 (dos) opciones:

- Sí: habilita el borde.

- No: desactiva el borde.

 

Grosor (grosor del borde): le permite definir el grosor del borde en píxeles (px).

 

Estilo (estilo de borde): le permite definir el estilo de borde y tiene 7 (siete) opciones.

- Ninguno: sin estilo para el borde inferior.

- Punteado: estilo punteado.

- Punteado: estilo punteado.

- Doble: estilo doble.

- Surco: Estilo biselado interno.

- Cresta: Estilo biselado externo.

- Sólido: estilo sólido.

 

Color (Color del borde): le permite definir el color del borde y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Curvatura (Curvatura de la imagen): Permite definir la curvatura de la imagen y tiene una variación de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Navegación

 

Color (Color de los botones de navegación. Ej .: Flechas a la derecha e izquierda del widget Rotating Highlights): Le permite definir el color del borde y tiene 2 (dos) opciones.

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Ver más

Color del texto (Color del texto "Ver más"): Le permite definir el color del texto y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Color del icono (Color del icono del texto "Ver más"): Le permite definir el color del icono y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Fondo

Color (color de fondo del widget): le permite definir el color de fondo y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Repetir (Repetir imagen de fondo del widget): si la imagen de fondo es pequeña, esta opción le permite habilitar la repetición de la imagen y tiene 4 (cuatro) opciones.

- No repetir: No repita la imagen.

- X: repite la imagen en la dirección correcta.

- Y: repite la imagen en la dirección izquierda.

- Repetir ambos: repite la imagen en la dirección izquierda y derecha.

 

Fijo (efecto de imagen): le permite colocar un efecto en la imagen de fondo y tiene 3 (tres) opciones.

- Desplazamiento: habilita un efecto donde la imagen de fondo se desliza a medida que la página se mueve hacia arriba o hacia abajo.

- Corregido: habilita un efecto donde la imagen se fija en el fondo.

- Sitio: ###

 

Comportamiento del contenedor (comportamiento de la imagen en la parte inferior del widget): le permite definir el comportamiento de la imagen en la parte inferior del widget y tiene 3 (tres) opciones:

- Original: sin cambios en la imagen de fondo.

- Ajustar: ajusta la imagen según el espacio.

- Expandir: agranda la imagen.

 

Imagen (imagen de fondo del widget): le permite colocar una imagen de fondo en el widget.

- Inserción: Simplemente haga clic en la Lupa, se abrirá la interfaz de GED, elija la imagen marcando "marcar" junto al nombre de la imagen.

- Eliminar: Simplemente haga clic en la "X", se eliminará la imagen de fondo.

 

Posición (posición de la imagen de fondo): le permite colocar la imagen en la parte inferior del widget y tiene 5 (cinco) opciones:

- Superior: coloca la imagen en el área superior del fondo.

- Derecha: coloque la imagen en el área derecha del fondo.

- Abajo: coloque la imagen en el área inferior de la parte inferior.

- Izquierda: coloque la imagen en el área izquierda del fondo.

- Centrado: coloca la imagen en el centro del fondo.

 

Borde

Espesor (Espesor del borde superior, derecho, inferior o izquierdo): Permite definir el espesor del borde superior, derecho, inferior o izquierdo en píxeles (px).

 

Estilo (estilo de borde superior, derecho, inferior o izquierdo): le permite definir el estilo de borde superior, derecho, inferior o izquierdo y tiene 7 (siete) opciones.

- Ninguno: sin estilo para el borde inferior.

- Punteado: estilo punteado.

- Punteado: estilo punteado.

- Doble: estilo doble.

- Surco: Estilo biselado interno.

- Cresta: Estilo biselado externo.

- Sólido: estilo sólido.

 

Curvatura (Curvatura del borde en la parte superior izquierda, superior derecha, inferior izquierda o inferior derecha): Permite definir la curvatura de la imagen y tiene una variación de 0 a 50, siendo:

- 0: Cuadrado.

- 50: Ronda.

 

Color (Color del borde superior, derecho, inferior o izquierdo): Permite definir el color del borde superior, derecho, inferior o izquierdo y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Sombra

X (eje de sombra derecho): define la dirección del eje de sombra derecho:

- Valor mínimo: 0.

- Valor máximo: Sin límite.

 

Y (eje izquierdo de la sombra): permite definir la dirección del eje izquierdo de la sombra:

- Valor mínimo: 0.

- Valor máximo: Sin límite.

 

Desenfoque (nivel de desenfoque de sombras): le permite establecer el nivel de desenfoque de sombras:

- Valor mínimo: 0.

- Valor máximo: Sin límite.

 

Propagación (tamaño de la sombra): define el tamaño de la sombra:

- Valor mínimo: 0.

- Valor máximo: Sin límite.

 

Color (Color de sombra): le permite definir el color de la sombra y tiene 2 (dos) opciones:

- Hexadecimal: ponga el código de color hexadecimal. Este código se convertirá a RGBA.

- RGBA: introduzca el código de color RGBA.

 

Funciones del navegador

En la pestaña "Recurso de navegadores" puedes jugar con logotipos,  favicon y fondo.

recurso de navegadores.jpg

Pronto

El logotipo es la imagen utilizada en la pantalla de inicio de sesión y en la parte superior de la página.

  • Elegir archivo: le permite elegir un archivo directamente desde su computadora

  • Altura recomendada: 60 píxeles (px)

  • Ancho recomendado: Sin límite

  • Formato: la imagen debe ser .png

favicon

O es la imagen que se muestra en la pestaña del navegador o en la pantalla de favoritos del navegador

  • Elegir archivo: le permite elegir un archivo directamente desde su computadora

  • Altura recomendada: 32 píxeles (px)

  • Ancho recomendado: 32 píxeles (px)

  • Formato: la imagen debe ser .ico

Plano de fondo

​​

  • Elegir archivo: le permite elegir un archivo directamente desde su computadora

  • Altura recomendada: 1024 píxeles (px)

  • Ancho recomendado: 768 píxeles (px)

  • Formato: la imagen debe ser .png

  • "X": te permite eliminar la imagen de fondo

Estandarización del medio ambiente

 

En la opción "Estandarización del entorno" puede aplicar el tema de diseño construido en los pasos anteriores a todas las páginas de TOTVS Fluig Plataforma.

padronizacao do ambiente.jpg

Tema

Seleccione el tema que desea aplicar a todas las páginas.

Botón Aplicar

Al presionar "Aplicar", el tema se aplicará a todas las páginas de la plataforma. NOTA:  Este proceso puede tardar unos minutos, ya que aplica el tema de diseño a todas las páginas de TOTVS Fluig Plataforma.

Botón de reinicio

Elimina el tema de diseño de Digte y vuelve al tema predeterminado de TOTVS Fluig Plataforma

Configurar comunidades 

 

Estas son páginas que tienen todo tratamiento de colaboración.

Al crear una comunidad, se creará automáticamente con el tema clásico de TOTVS Fluig Plataforma, y para permitir el uso de los widgets de Digital Workplace por parte de Digte, es necesario cambiar el diseño a Digte's.

Recordando que el diseño de Digte tiene bordes de colores, como la imagen a continuación:

layout_página.PNG

Siga la ruta a continuación para cambiar el diseño de una comunidad: 

"Tu comunidad"> Imagen de perfil> Editar página> Imagen de perfil> Cambiar diseño

trocar-layout.png

Al elegir la opción "Cambiar diseño", simplemente haga clic en el diseño deseado y haga clic en "Aplicar"

trocar layout.jpg

A través del asistente de configuración es posible migrar todas las páginas de TOTVS Fluig Plataforma (personalizadas y estándar) a un tema de diseño de Digital Workplace by Digte.

tema de layout-seta.png

Durante el proceso de instalación de Digital Workplace by Digte, se crea una carpeta denominada “Comunidades”, que recomendamos utilizar para centralizar los contenidos (documentos, formularios, artículos, videos, imágenes) de sus comunidades. NOTA:  Es importante destacar que cada comunidad debe tener su propia estructura de carpetas.

menú de configuración

 

El menú TOTVS Fluig Plataforma con Digital Workplace by Digte ahora tiene nuevas características como:

1) intercambio de iconos;

2) Cambio de orden de las páginas;

3) Inclusión de nuevos iconos, que no forman parte del arsenal de TOTVS Fluig Plataforma

4) Enlaces que apuntan a páginas externas, fuera de la plataforma

Esta personalización se realiza a través del formulario de configuración, ubicado en: Intranet by Digte> Registros> Personalizaciones del menú

configuracoes do menu.jpg

Elija la página que desea configurar y haga clic en "Editar".

formulario menu.jpg

  • Menú adicional?

    • Sí: Indica que no está vinculado a una página existente en TOTVS Fluig Plataforma y permitirá el acceso a una URL  directamente  ​

    • No: Indica que reemplazará la configuración de una página existente en TOTVS Fluig Plataforma

  • ¿Abrir una nueva pestaña?

    • Sí: al hacer clic en la página, se abrirá en una nueva pestaña.

    • No:  Al hacer clic en la página se abrirá en la misma pestaña.

  • Título (portugués, inglés, español): configure el título de la página que se mostrará en el menú. Configura para portugués, inglés y español.

  • Secuencia: defina en qué secuencia se mostrará la página en el menú

  • Icono:  Elija un icono para que se muestre junto con el título en el menú. NOTA:  Estos iconos son solo del arsenal de TOTVS Fluig Plataforma

  • Enlace:  Inserte un enlace si desea la redirección a una página de portal externa

  • URL de la imagen:  Al insertar una imagen en tu ECM puedes generar un enlace, a través de este puedes agregar tu propio icono

  • Imagen de documentos:  Inserte la imagen en su ECM, luego haga clic en la lupa y busque el icono que desea mostrar en el menú

  • Anchura y altura:  Establezca el ancho y la altura de sus iconos en píxeles (px)

Cuando termine, haga clic en "Guardar".

Formularios de página, widgets y diseño

 

Digital Workplace by Digte, por defecto, actualiza los formularios de Páginas, Widgets y Diseños, por esta razón le recomendamos que no cambie manualmente el formulario. Si esto sucede, existe el riesgo de que su entorno sufra algunos fallos de funcionamiento.

Las siguientes carpetas almacenan formularios que NO deben editarse manualmente.

A partir de la actualización del 21/01/2020, en la nueva versión Empower de Digital Workplace by Digte, se puso a disposición un centro de registro. Lo que antes era necesario para ir al GED para hacerse, ahora se utilizará en el nuevo centro. Hay dos formas de acceder a este nuevo centro:

1) Al hacer clic en el engranaje del widget:

Al hacer clic en el engranaje del widget, se dirige al usuario a la página "Registros" y al formulario correspondiente del widget preseleccionado.

2) Al hacer clic en la página "Registros" del menú:

Siguiendo la ruta: Intranet by Digte> Registros  podrá acceder a todos los formularios desde todos los widgets

Mire el video para obtener más aclaraciones: