Configuración de la marca y el diseño de su plataforma

Presentación

El diseño de su plataforma se compone 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 y el diseño de su plataforma de escritorio. Más información sobre la configuración para dispositivos móviles.

Acceso a sus ajustes de marca y diseño

Para acceder al área de marca y diseño de su plataforma, vaya al Menú de navegación, busque Personalización (icono de formas) y haga clic en Marca y diseño. 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.

Notas sobre las imágenes o medios cargados

En muchos ajustes de diseño de la plataforma puede subir imágenes u otros archivos multimedia. Entre estos se incluyen el logo y el favicono del encabezado, la imagen o vídeo de fondo para la página de registro, el fondo del reproductor de cursos y la imagen de portada de la página de descripción general del curso. 

Después de subir un archivo, verá un icono de papelera roja que le permitirá eliminarlo si lo necesita. Tenga en cuenta que, al hacer esto, se eliminará la imagen de inmediato, aunque no guarde sus cambios.

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.

Modo de concentración

Utilice esta área para configurar el ajuste del modo de concentración predeterminado para el reproductor de cursos en todos los cursos y planes de aprendizaje.

Cuando está habilitado el modo de concentración, el reproductor de cursos se abre de forma predeterminada en pantalla completa y: 

• Los widgets del curso se agrupan por áreas y son superpuestos por el reproductor, pero los alumnos pueden siempre acceder a ellos haciendo clic en el nombre del grupo de widgets en la parte inferior de la página.
• Cuando los alumnos cierran el reproductor, se les redirige siempre a la página desde donde abrieron el curso, ya se trate de una página que incluya el widget Cursos y planes de aprendizaje o de la página Mis cursos y planes de aprendizaje.
• Cuando el curso incluye un solo material de formación, se ignoran los ajustes de visibilidad del plan de estudios y de navegación en modo cine para maximizar el espacio para el contenido. Esto significa que el plan de estudios del curso no se mostrará y se ocultarán los botones de navegación para los materiales de formación que se reproduzcan en modo cine.
• La reproducción automática del curso está activada automáticamente.
• Si el curso contiene múltiples materiales de formación, los botones Siguiente lección y Lección anterior aparecen en el lado derecho del encabezado, facilitando la navegación entre lecciones y mejorando la experiencia de aprendizaje. Al pasar por encima de estos botones, una sugerencia emergente muestra el título de la siguiente lección.
• Para los cursos incluidos dentro de un plan de aprendizaje, la navegación es dinámica, ofreciendo a los usuarios una forma simple e intuitiva de moverse entre el contenido del curso y otros cursos del plan. Una vez que los alumnos completen la última lección de un curso, el botón Siguiente lección cambiará al de Siguiente curso, facilitando la navegación por el plan de aprendizaje.
• El modo de concentración está disponible para los cursos de formación guiada por un instructor (ILT) para ayudar a mantener la atención de los alumnos centrada en el contenido más importante: el siguiente evento de la sesión. Si no están inscritos en ninguna sesión, podrán navegar por ellas e inscribirse en las sesiones disponibles sin salir de la página.
• Para los Superadministradores, Usuarios avanzados e instructores, el botón de gestión en el encabezado de la página del curso se minimiza como un botón de engranaje sin texto.
• Se notifica a los alumnos acerca de los certificados y las certificaciones emitidos para el contenido que estén visualizando a través del botón Logros en la parte superior de la página del contenido.

Esta configuración es ideal para una experiencia de aprendizaje inmersivo y minimiza las distracciones.

Es posible eludir el comportamiento predeterminado para cursos concretos (pestaña Propiedades > Reproductor), así como para planes de aprendizaje concretos (pestaña Propiedades > Reproductor). El ajuste del modo de concentración elegido a nivel de plan de aprendizaje se aplica como predeterminado a todos los cursos del plan, eludiendo las posibles configuraciones a nivel de curso para asegurar una navegación homogénea.

Visibilidad del plan de estudios

A continuación, administre la visibilidad predeterminada del plan de estudios personalizado para todos los cursos seleccionando si ocultarlo o mostrarlo cuando un usuario accede al curso.

Los alumnos también pueden administrar directamente la visibilidad del plan de estudios con el botón del panel en la página del reproductor de cursos, utilizando los botones Mostrar el programa del curso - Cerrar el programa del curso en la parte superior del área del plan de estudios.

Cuando esté habilitado el modo de concentración, el plan de estudios se ocultará de forma predeterminada, pero los alumnos seguirán pudiendo optar por mostrarlo manualmente.

Navegación en modo cine

Decida si mostrar u ocultar de forma predeterminada los botones de navegación para cualquier material de formación reproducido en modo cine en todos los cursos de e-learning.

Cuando esté habilitado el modo de concentración, la configuración de la navegación en modo cine se desactivará automáticamente.

Imagen de fondo del reproductor

En la sección Imagen de fondo del reproductor, 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.

Apariencia del reproductor 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. 

A tener en cuenta: Al configurar la marca y el diseño en clientes de Extended enterprise, si desactiva la configuración personalizada de la Apariencia del reproductor de cursos, el reproductor pasará de forma predeterminada al Modo oscuro, independientemente de lo que haya configurado en la plataforma raíz.

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

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:

• Siga el diseño 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.