Creación y gestión de páginas de widgets

Exención de responsabilidad: Parte del contenido de este artículo define cómo usar funcionalidades que podrían no estar disponibles para todos los planes. Contacte con su gestor de cuentas (si su plan incluye esta opción) o póngase en contacto con Docebo usando el Centro de ayuda si desea cambiar su plan a uno de nivel superior.

Presentación

Las páginas de widgets personalizadas pueden configurarse en su totalidad y se utilizan para crear un diseño de página desde cero (una página en blanco) o empleando plantillas predefinidas listas para el uso pero que también pueden personalizarse.

Cada página que cree estará disponible automáticamente tanto para la versión de escritorio como para la aplicación móvil. Puede crear hasta 1000 páginas y 250 menús, incluyendo páginas integradas y el menú predeterminado.

Este artículo abarca cómo crear y configurar una página de widgets personalizada. Una vez configurada su página, también deberá añadirla a los menús adecuados para que sus usuarios puedan acceder a ella. Para saber cómo hacerlo, consulte el artículo Mostrar páginas y menús a los usuarios > Mostrar una página a sus usuarios.

Creación de páginas de widgets personalizadas

Para crear una página de widgets:

1. Seleccione Menú de navegación > Personalización (icono de formas) > Páginas. A continuación, haga clic en el botón más de la esquina superior derecha.  
2. En el panel Nueva página personalizada, seleccione la opción Página de widget personalizada y pulse Siguiente.
3. En la pestaña Detalles, introduzca el Nombre de la página. De manera opcional, también puede añadir una Descripción de la página y un Código que sirva como identificador único para su página.
   → No utilice códigos que empiecen por DOC_ o doc_, ya que estos prefijos están reservados para el uso por parte de la plataforma. 

Pulse Siguiente para continuar con la configuración de la página.

En la pestaña Plantilla, seleccione bien una plantilla de la lista para utilizar un diseño de página predefinido o bien la opción En blanco para diseñar su página desde cero. A continuación, pulse Crear y editar. Se le redirigirá a la pestaña Propiedades de la página.

Utilice la barra inferior para determinar el estado de su página. Las páginas nuevas se publican de forma predeterminada. Si anula su publicación, los usuarios no podrán verlas en su plataforma ni sus menús de usuario para dispositivos móviles aunque tengan visibilidad para ellas. La página se ocultará del menú del usuario hasta que vuelva a estar Publicada. La barra de publicación inferior estará siempre visible mientras se mueve por las pestañas del área Administrar páginas.

En la pestaña Propiedades, abra el menú Configuración general para comprobar y editar los detalles que haya configurado en el menú deslizante al crear la página. Seleccione un icono para identificar su página haciendo clic en el icono existente y seleccionando otro en el panel derecho. Opcionalmente, puede buscar el nombre del icono, pero recuerde que solo se puede buscar en inglés. El icono se mostrará antes del nombre de la página en el menú. Seleccione el icono del panel deslizante y pulse Confirmar.

En la sección Botones de página adicionales, marque si desea mostrar el botón Compartir contenido y el botón Preguntar al experto de la esquina superior derecha de su página. Cuando se muestren estos botones, los usuarios podrán cargar activos y formular preguntas a expertos directamente desde esta página mediante los botones correspondientes. Recuerde que estas opciones solo están disponibles si tiene activo el módulo Discover, Coach & Share en su plataforma.

Si su página incluye un Widget de catálogo, defina si habilitar el botón Compartir esta vista para que los usuarios puedan utilizarlo para copiar el enlace de la página en su portapapeles con el fin de compartir con otros usuarios los resultados filtrados de su búsqueda en el catálogo. Más información acerca de cómo compartir enlaces profundos de páginas filtrados, así como sobre cómo configurar el widget Catálogos.

Nota: La opción de mostrar el botón Compartir esta vista disponible en la sección Botones de página adicionales es solo para las páginas de escritorio, sin ser compatible para las de la aplicación móvil. Esto significa que, en la aplicación móvil, no estará disponible el botón para compartir la vista, si bien debe recordarse que el enlace que se comparte con este botón puede abrirse y la página enlazada puede verse también desde la aplicación.

Cuando haya finalizado, pulse el botón Guardar los cambios y vaya a la pestaña Compositor para ver el esquema de diseño de la página.

Las páginas se crean siempre en la pestaña Compositor y se lanzan también automáticamente para la aplicación móvil en la pestaña Diseño móvil, pero solo si al menos uno de los widgets que componen la página está disponible también para dispositivos móviles.

Definición del diseño de su página

La pestaña Compositor muestra el esquema de diseño de su página de widget, con el diseño de la plantilla que seleccionara o en blanco si seleccionó el tipo de página En blanco al crear la página.

Cada página se compone de una o muchas filas horizontales. Una fila es un área de la página que se divide en columnas, de una a tres. Las columnas contienen los widgets. Al trabajar con plantillas, las filas se configuran automáticamente con los widgets necesarios para la finalidad de la plantilla, pero puede editarlas o añadir filas adicionales a la página.

Pulse el botón más sólido redondo para añadir una fila a la página. Seleccione el diseño de widget que desee dar a la fila desde el panel deslizante y pulse Crear. Puede editar el diseño de las filas en todo momento pulsando el icono de menú al final de la fila y seleccionando la opción Cambiar diseño de filas para definir el diseño de la fila. Seleccione la opción de fila que más le convenga desde el panel deslizante y pulse el botón Cambiar diseño para confirmarlo.

Si cambia el diseño a un tamaño inferior (por ejemplo, cambiando de un diseño de fila 1/3 - Tres columnas a un diseño de fila 1/2 - Media anchura), los widgets de la columna eliminada se trasladarán a la más a la derecha de las columnas restantes. Para desplazar las filas en la página, pase el ratón por el encabezado de la fila hasta que aparezca un icono de cruz. Ahora, haga clic y arrastre y suelte la fila al lugar en el que desee colocarla.

Ancho de los widgets

El siguiente esquema representa el ancho de las columnas expresado en píxeles en una ventana con el 100% de zoom en un navegador. Tenga en cuenta que, para las pantallas más pequeñas (con un ancho inferior a 1400 píxeles), los tamaños de las columnas se reducirán en correspondencia.

Tamaños recomendados de las imágenes para los widgets de páginas

Para asegurar que las imágenes se vean nítidas en todas las pantallas, los anchos de imagen recomendados deben ser del doble del ancho del widget (regla del 2x).

Anchos de widgets estándar con el zoom al 100% (en pantallas de 1400px o más anchas):

• Widget de ancho completo: 1320px → El ancho de la imagen debe ser de 2640px
• Widget de 2/3: 888px → El ancho de la imagen debe ser de 1776px
• Widget de 1/2: 660px → El ancho de la imagen debe ser de 1320px
• Widget de 1/3: 444px → El ancho de la imagen debe ser de 888px

Los formatos de archivo aceptados para las imágenes son PNG y JPG, y el tamaño máximo de archivo es de 4MB. Si tiene dudas sobre el tamaño de su imagen, compruebe las propiedades del archivo en su dispositivo o póngase en contacto con el equipo de asistencia de su sistema.

Número de widgets por página

El número máximo de widgets permitidos para una página (tanto de escritorio como para la aplicación móvil) depende del tipo de widget que desee insertar en la página. Algunos widgets, conocidos como widgets dinámicos, influyen mucho en la carga de la página, ya que su contenido se actualiza constantemente. El tener muchos widgets dinámicos en una sola página puede afectar al rendimiento de carga de la página en sí. Otros widgets, los llamados widgets estáticos, afectan poco a la carga de la página porque su contenido nunca cambia, con lo que es posible añadir más widgets de este tipo en una página.

Aquí presentamos la lista de widgets, divididos entre widgets dinámicos y estáticos:

El número máximo de widgets permitidos por página es de 20, pero el número de widgets dinámicos no puede superar los 10. Por ejemplo, una página puede incluir 10 widgets dinámicos y 10 widgets estáticos, o 5 widgets dinámicos y 15 widgets estáticos, o bien 20 widgets estáticos.

Para la aplicación móvil, solo se permiten widgets dinámicos entre los primeros 10 widgets de la página; a continuación, empezando por el 11º widget, el tipo de widget debe ser estático. Recuerde también que, para la aplicación móvil, el widget HTML/WYSIWYG se considera un widget dinámico.

Una vez alcanzado el número máximo de widgets dinámicos para una página, al añadir otro widget, el panel derecho para crear widgets tan solo enumerará widgets estáticos.

Duplicar una fila

El diseño de la fila puede duplicarse para acelerar la configuración de la página de widget. Para duplicar un diseño de fila, pulse el icono de menú al final de la fila y seleccione la opción Duplicar diseño de fila. La nueva fila se diseñará bajo la fila seleccionada con el mismo diseño que la original, pero sin contener widgets. 

Eliminar una fila

Para eliminar una fila, pulse el icono de menú al final de la fila y seleccione Eliminar fila. Pulse Confirmar y eliminar en la casilla de diálogo para completar la operación. Recuerde que se eliminarán también todos los widgets incluidos en la fila y que deberá estar presente en la página al menos una fila. No se le permitirá eliminar una fila si es la única que queda.

Añadir widgets a filas

Para añadir un widget a una fila, pulse el botón más y seleccione el widget desde el panel deslizante Añadir nuevo widget. Configure el widget y pulse Añadir widget para insertarlo en la columna seleccionada. Los widgets pueden tener distintos diseños en función del tamaño del área en que se coloquen.

Cuando se selecciona un widget de la lista, su vista previa se muestra en el panel derecho para que pueda hacerse una idea de qué aspecto tendrá en la página. Recuerde que algunos widgets disponibles para escritorio no están disponibles para la aplicación móvil, el icono del móvil en el área del widget le ayudará a comprender qué widgets están disponibles para la aplicación móvil.

Para cambiar los ajustes de un widget, pulse el icono de menú en la esquina superior derecha del área del widget y seleccione Editar. Los ajustes del widget cambian en función del widget, consulte la lista completa de widgets para más información.

Desplazar widgets y definir el tamaño de los widgets

Para desplazar widgets en la página, pase el ratón por el área del widget hasta que aparezca un icono de cruz. Arrastre el widget y suéltelo en otra columna de la misma fila u otra fila de la página. Tenga en cuenta que los widgets con scroll infinito deben colocarse en la fila inferior de la página, sin widgets debajo, ya que lo que se coloca bajo un widget de scroll infinito podría no verse. Pulse Guardar los cambios cuando haya terminado. 

Uso del compositor de diseño móvil

Al estructurar el diseño de su página de escritorio desde el Compositor, el diseño de la página de la aplicación móvil correspondiente se realizará automáticamente en la pestaña Diseño móvil si al menos uno de los widgets que añadió en el compositor está disponible para la aplicación móvil. Puesto que algunos widgets disponibles para escritorio no están disponibles para la aplicación móvil, las páginas de la aplicación móvil no incluirán widgets de escritorio no admitidos.

Los widgets disponibles actualmente para la aplicación móvil son:

• Caja de contenido personalizado (al representar el widget en la aplicación móvil Go.Learn, se adapta el ancho al ancho de la pantalla, y la altura se aplica rellenando la caja con la imagen y cortándola en caso necesario)
• Canales
• Catálogos
• Gamificación
• HTML/WYSIWYG (sugerimos usar el editor WYSIWYG para las páginas de la aplicación móvil, ya que no podemos garantizar la representación del widget si se usa el editor HTML)
• Imagen
• Lista de tareas
• Mi calendario
• Cursos y planes de aprendizaje
• Mi perfil
• Preguntas y respuestas
• Resumen de la actividad
• Stream de actividades
• Vídeo incrustado

Los widgets disponibles para la aplicación móvil se identifican con un icono de móvil en el área del widget del compositor. Cuando su página de escritorio esté lista, vaya al área Diseño móvil para ver qué aspecto tendrá la página en un dispositivo móvil. Las páginas para dispositivos móviles tienen una sola columna, y los widgets se clasifican conforme a su orden en el diseño de la página, empezando por la primera columna a la izquierda, de arriba a abajo y pasando a las demás columnas.

El orden de los widgets en las páginas de la aplicación móvil no puede cambiarse, pero puede ocultar aquellas que no necesite en la página de la aplicación móvil haciendo clic en el icono del ojo. Vuelva a hacer clic en el icono del ojo para que estén visibles de nuevo. 

Uso de plantillas para páginas de widgets

Al seleccionar una de las plantillas disponibles para crear una página de widget, el Compositor y el Diseño móvil cargarán el conjunto de widgets en línea con la finalidad de la plantilla:

• Panel de control de la formación informal. Esta plantilla incluye el Stream de actividades, Cursos y planes de aprendizaje y Mi calendario.
• Panel de control de la formación formal. Esta plantilla incluye los Catálogos, Mi perfil, Cursos y planes de aprendizaje y los widgets de calendarios.
• Stream de la formación formal. Esta plantilla incluye el widget de canales.
• Panel de control de ofertas de cursos. Esta plantilla incluye el calendario, el perfil de usuario, Cursos y planes de aprendizaje y los widgets de catálogos.

Los widgets de las plantillas están configurados con los ajustes por defecto, como el título del widget, las opciones y el marco temporal. Las opciones se muestran en el área del widget de la plantilla.

No obstante, tenga en cuenta que las plantillas no están bloqueadas. Puede modificar los ajustes de los widgets y su tamaño y su posición en la página. También puede añadir otros widgets en la página o eliminar los existentes siguiendo los pasos descritos en otras secciones de este artículo.

Configuración de widgets a través de CSS

Si tiene nociones básicas de CSS, puede personalizar los widgets que componen las páginas de escritorio conforme a sus necesidades a través de CSS. Cualquier widget disponible en las páginas de widgets se identifica mediante un ID unívoco en el HTML del CSS, asignado automáticamente por la plataforma cuando se crea el widget, con el siguiente formato:

#doc-widget-{widget_id}

El valor {widget_id} es un código abreviado numérico. De igual modo, puede personalizar las páginas de su plataforma de escritorio a través de CSS. Más información sobre cómo personalizar el diseño de su plataforma a través de CSS.

Vista previa de la página

La función de vista previa de la página le permite ver qué aspecto tendrán sus páginas de escritorio para los usuarios. Acceda a la vista previa de la página haciendo clic en la pestaña Vista previa de la versión de escritorio, después de configurar su página con el Compositor. Para que su página tenga un aspecto más realista, los widgets de la pestaña Vista previa se rellenan con datos de muestra. 

Recuerde que la vista previa de la página está disponible solo para las páginas de escritorio. Mientras se configuran las páginas para dispositivos móviles, estas se actualizan en tiempo real al pulsar Guardar los cambios en la barra de publicación. Le recomendamos encarecidamente que pruebe sus páginas para la aplicación móvil antes de implementarlas creando un menú de prueba asignado a un usuario de prueba. 

Consejos y trucos

Puede enlazar otras páginas a botones de widgets con su URL específica. Si la página que desea enlazar no está presente en el menú cargado, aún puede enlazarla si la coloca en un menú diferente con la misma visibilidad que el menú de usuario (o visibilidad completa) y la pone al final de la lista para que no se cargue antes de cualquier otro menú.