Exención de responsabilidad: Parte del contenido de este artículo muestra detalles disponibles solo con la nueva página de cursos. Como Superadministrador, puede activar la vista previa de la nueva página de cursos solo para su usuario, probarla y después activarla para todos los usuarios. Más información sobre la transición a la nueva página de cursos.

Presentación

La apariencia y el estilo de su plataforma se componen de una serie de elementos de la interfaz que usted, como Superadministrador, puede personalizar con el fin de optimizar la experiencia de aprendizaje y la experiencia de usuario general de su plataforma, tanto para la versión de escritorio como para dispositivos móviles. Estos elementos pueden determinarse de forma global o para clientes individuales de Extended Enterprise. Entre estos elementos se incluyen el encabezado y el pie de página o el CSS personalizado, cuyos botones aparecen en la página de inicio de sesión.

Este artículo describe cómo configurar la marca, la apariencia y el estilo de su plataforma de escritorio. Más información sobre la configuración para dispositivos móviles.

Acceso a sus ajustes de apariencia y estilo

Para acceder al área de gestión de apariencia y estilo de su plataforma, vaya al Menú de administrador desde el icono de engranaje de la esquina superior derecha de su plataforma y pulse el botón Configurar marca y apariencia de la sección Configuración. La página muestra de forma predeterminada la pestaña Escritorio. Vaya pasando por todas las secciones de la página de configuración para personalizar el tema como desee.

Personalizar encabezados

En la sección Encabezado, puede personalizar la plataforma con su título, mensaje del encabezado, logotipo y favicono. Tenga en cuenta que puede crear los campos de texto de esta sección en distintos idiomas utilizando el selector multilingüe, al que se puede acceder desde el icono del globo de la esquina superior derecha de la sección. Más información sobre el selector multilingüe.

Comencemos por la primera sección, Título de la página. Utilice el campo de texto correspondiente para escribir el título de su plataforma. Este aparecerá en las pestañas del navegador y en la barra superior de la página de inicio de su plataforma. Recuerde que para este campo de texto se aplica un límite de 1000 caracteres antes de interrumpirse con puntos suspensivos.

A continuación, marque la opción de habilitar un mensaje del encabezado en la sección pertinente. Cuando esté habilitada esta opción, podrá escribir su mensaje del encabezado en el campo de texto que aparece debajo. Este puede ser el eslogan de su empresa, su visión, etc. El texto puede editarse como desee con la barra de herramientas de la parte superior del cuadro de texto. El mensaje del encabezado aparecerá debajo de su logotipo en su plataforma, así como en la página de inicio de sesión. Recuerde que este campo de texto tiene un límite de 340 caracteres antes de interrumpirse con puntos suspensivos.

En la sección Logotipo, pulse el botón Cargar su logotipo para seleccionar una imagen para el logotipo. Con el fin de garantizar buenos rendimientos al cargar las páginas y evitar problemas con funciones como los informes, recomendamos cargar una imagen del logotipo de máximo 380 x 72 px, asegurando también que la altura de la imagen no sea inferior a 36 px. El tamaño máximo del archivo de imagen es de 2MB, y los formatos permitidos son JPG, PNG, JPEG y GIF. Su nuevo logotipo aparecerá ahora en la esquina superior izquierda de la plataforma. También puede cargar un favicono personalizado. Un favicono es el icono que se muestra en las pestañas y la barra superior del navegador. Pulse el botón Cargar el favicono y seleccione una imagen de 16 × 16 png de su ordenador. Recuerde que puede tener problemas de visualización del favicono si utiliza Safari debido a las limitaciones de este navegador para la carga de faviconos dinámicos.

A tener en cuenta: Puede utilizar el icono del globo de la esquina superior derecha de esta sección para crear el mensaje del encabezado en varios idiomas con la herramienta multilingüe de la plataforma, pero el título de la página solo puede añadirse en un idioma.

Personalizar la página de inicio de sesión

En la sección Fondo de la página de inicio de sesión, marque el tipo de fondo que desee. Si marca la opción de tener un fondo en color, seleccione el color con la herramienta que aparecerá más abajo o introduzca el código HEX correspondiente.

Si marca la opción de añadir una imagen de fondo de ancho completo, pulse Cargar su imagen. Los formatos compatibles son JPG y PNG. La resolución recomendada es de 1280 × 720 px, y el tamaño máximo del archivo es de 10 MB. Si desea eliminar la imagen, seleccione el icono de la papelera roja.

A tener en cuenta: Si tiene activado un catálogo público en la pestaña Catálogo de cursos del menú Ajustes avanzados, tenga presente que solo estarán disponibles el color y la imagen de fondo, y no el vídeo de fondo. Si tiene activado (o prevé activar) un catálogo público en su plataforma, considere el uso de una imagen de menor tamaño, ya que el área dedicada a la imagen de fondo se verá parcialmente superpuesta por el área del catálogo.

Si marca la opción de añadir un vídeo de fondo de ancho completo, pulse Cargar su vídeo. Los formatos de vídeo admitidos son MP4 y H264. Las especificaciones recomendadas para el archivo son: tamaño recomendado del archivo 1,5-2 MB; tasa de bits: 500-800 kbps; resolución mínima: 1280 x 720 px; tamaño máximo del archivo: 50 MB.

También puede insertar una imagen alternativa que se muestre si el vídeo no es compatible o no se carga correctamente. Si desea eliminar el vídeo o la imagen, seleccione el icono de la papelera roja.

En la sección Formulario de inicio de sesión, puede marcar la opción de ocultar el formulario de inicio de sesión estándar de la plataforma y mostrar tan solo los botones SSO de inicio de sesión (Gmail, OKTA, LinkedIn, etc), tanto en la versión de escritorio como para dispositivos móviles. Recuerde que debe contar con una integración SSO válida correctamente configurada y testada antes de habilitar esta opción.

Si está seleccionada esta opción, estará habilitado por defecto el ajuste Impedir que los usuarios cambien su contraseña en la pestaña Usuarios de Ajustes avanzados de la plataforma, y no podrá deshabilitarse hasta que se deshabilite también Mostrar solo los botones SSO y ocultar el formulario de inicio de sesión. Esta configuración impide a los usuarios cambiar su contraseña en la plataforma (tanto en la versión de escritorio como para dispositivos móviles), perdiendo la sincronización con la contraseña establecida en el proveedor de identidad.

Personalizar los colores

Puede seleccionar los colores de cada tipo de fuente de su plataforma en la sección Colores. Introduzca los códigos HEX en los cuadros de texto correspondientes o seleccione los colores con las ruedas de colores.

Hay diferentes formas de obtener el color HEX correcto, pero si no dispone de un software gráfico específico, puede simplemente utilizar este selector de colores HTML gratuito (se abre en una nueva pestaña).

Nota sobre accesibilidad: Tenga en mente la accesibilidad al configurar la interfaz de su plataforma y aproveche los colores accesibles incluidos en el tema de colores predeterminados de Docebo Learn.

Estilos personalizados

Si tiene nociones básicas de CSS, puede personalizar el diseño de su plataforma de escritorio a un nivel superior. Use las áreas de CSS de esta sección para personalizar los elementos de la plataforma de escritorio: fuente, tamaño, estilo, etc. Identifique el elemento que desee modificar junto con los atributos específicos. Las áreas de texto CSS tienen integrado un editor de código para que pueda hacer uso de las opciones disponibles dentro del mismo editor.

Algunas buenas prácticas para la personalización son:

• Guardar sus ajustes actuales en un documento o archivo para tenerlos a mano fácilmente en cualquier momento.
• Probar sus cambios en el inspector de su navegador antes de aplicarlos a su entorno en vivo.
• Mantener abiertas dos pestañas o ventanas, una para realizar sus cambios en esta área y otra para visualizar los posibles cambios en modo de incógnito o en otro navegador.

Asimismo, puede personalizar el diseño de cada página de escritorio y widget a través de CSS, ya que cada página y widget de la plataforma se identifica mediante un ID único en el HTML del CSS, asignado automáticamente por la plataforma.

A tener en cuenta: Las nuevas versiones pueden afectar a su CSS personalizado. En este caso, no se garantiza la compatibilidad de su código con versiones anteriores.

Personalizar el reproductor de cursos

En la sección Reproductor de cursos, puede personalizar el reproductor de cursos para que los ajustes configurados en esta sección se apliquen por defecto a todos los cursos. No obstante, puede determinar ajustes locales del reproductor de cursos para cursos concretos.

Vista del inicio del curso

A tener en cuenta: Esta sección no está disponible si ha activado la nueva página de cursos.

En esta sección, determine para todos los cursos si los usuarios llegarán directamente al reproductor de cursos al acceder a un curso o en la página de descripción general del curso.

La página de descripción general es lo que se muestra a los alumnos al seleccionar el curso y antes de la página del reproductor de cursos. Cuando está activa la página de descripción general, todos los widgets del curso se muestran en esta página en lugar de en la página del reproductor de cursos, y el contenido del curso se traslada a la pestaña Contenido. Con esta configuración se puede ayudar a los alumnos a concentrarse en el contenido del curso, dejando toda la información adicional en una página aparte.

La página de descripción general es opcional para los cursos de e-learning, pero obligatoria para los cursos ILT (formación guiada por un instructor). Con ello, la página de descripción general del curso se mostrará para los cursos ILT independientemente de la opción que seleccione en esta sección. 

Visibilidad de la tabla de contenidos

A continuación, administre la visibilidad predeterminada de la tabla de contenidos personalizada para todos los cursos seleccionando si ocultarla o mostrarla cuando un usuario entra al curso.  

Los alumnos también pueden administrar directamente la visibilidad de la tabla de contenidos con el botón del panel en la página del reproductor de cursos y aplicando una de las siguientes opciones:

• Visibilidad completa: la tabla de contenidos se muestra en su totalidad a la derecha del reproductor de cursos
• Visibilidad plana: la tabla de contenidos se muestra debajo del reproductor de cursos.
• Visibilidad compacta: la tabla de contenidos solo muestra los iconos del material de formación que compone el curso, a la derecha. Este modo de visibilidad no está disponible cuando los materiales de formación están ordenados en carpetas o si incluyen contenidos en capítulos múltiples.

Imagen de fondo

En la sección Imagen de fondo, puede cargar una imagen que se mostrará como fondo del reproductor de cursos.

Tras cargar una imagen, elija si desea estirar la imagen al tamaño de la página o mantener la relación de aspecto y centrar la imagen en la página del reproductor de cursos.

Navegación con Lightbox

Use la opción de esta área para decidir si mostrar o deshabilitar los botones de navegación para los materiales de formación reproducidos en el modo de vista de Lightbox.

Apariencia del reproductor de cursos

A tener en cuenta: Esta sección solo está disponible si ha activado la nueva página de cursos.

Use esta área para configurar la apariencia predeterminada del reproductor de cursos para todos los cursos: modo oscuro o modo claro. Este ajuste puede deshacerse para cursos determinados en las propiedades del curso. Este ajuste regula el color del texto, el encabezado del curso y el área Programa del curso para todos los alumnos.

Si ha configurado reglas de CSS personalizados para el reproductor en la sección CSS para el material de formación HTML, estas reglas tendrán prevalencia frente a este ajuste.

El reproductor de cursos se muestra de forma predeterminada en modo oscuro.

CSS para el material de formación HTML

Por último, puede añadir CSS personalizados para su material de formación de páginas HTML.

En esta sección puede copiar y pegar sus clases de CSS, que se aplicarán automáticamente a todo su material de formación de páginas HTML.

Personalizar la página de descripción general del curso

A tener en cuenta: Esta sección solo está disponible si ha activado la nueva página de cursos.

Diseño del encabezado

La sección Página de descripción general del curso le permite configurar un encabezado predeterminado del curso para todas las páginas de cursos y planes de aprendizaje en catálogos. Es posible sobrescribir esta configuración predeterminada a nivel de curso desde la sección Diseño del encabezado de la pestaña Propiedades del curso y a nivel de plan de aprendizaje desde la pestaña Detalles.

Las opciones disponibles son:

• Diseño de color sólido: Use un color sólido, por ejemplo, para resaltar los colores de su marca. Introduzca el código de color HEX en el área Código de color o seleccione un color mediante la rueda de colores. Recuerde que el color seleccionado se sombreará siempre en negro.
• Diseño de la imagen de portada: Seleccionar una imagen para el encabezado del plan de aprendizaje crea un alto impacto en la página de este. Más información sobre la gestión de imágenes de encabezado para cursos.
• Diseño de página básico: Seleccione esta opción para un diseño minimalista y limpio del encabezado, sin imágenes ni colores.

Vista inicial de e-learning

En esta sección, determine si los usuarios llegarán directamente a la página del reproductor de cursos al acceder a un curso o a la página de descripción general del curso. Esto se aplicará a todos los cursos de e-learning. La configuración de esta opción puede modificarse a nivel de curso desde las propiedades del curso, pestaña Reproductor, sección Vista inicial.

La página de descripción general se muestra antes del reproductor de cursos e incluye detalles del curso y la inscripción que ayudan a los alumnos a centrarse solo en el contenido del curso una vez accedan al reproductor, ya que este será el punto principal de la página.

Dependiendo de la configuración del curso y del estado de inscripción del alumno, la página de descripción general incluirá distintos tipos de información acerca del curso y la inscripción del alumno para aclarar qué esperar del curso.

Los widgets del curso se muestran siempre debajo del reproductor del curso y no en la página de descripción general, independientemente de si está activa o no.

Buenas prácticas

Si no es diseñador gráfico, siga estas sencillas sugerencias:

• Mantenga la apariencia y el estilo de su sitio web oficial. Intente seguir lo más posible la estructura y los colores.
• Que sea legible. Compruebe bien el contraste entre el texto y el fondo o entre el logotipo y el fondo. Si modifica el tamaño de la fuente, recuerde que deberá poder leerse en el dispositivo de su usuario.
• Menos es más (a veces). Si no dispone de una guía de estilo, intente comenzar con los colores de su logotipo.