Página del estudiante

Aprende a crear una página de estudiante que mejore la experiencia de aprendizaje.

La interfaz del estudiante es la base de tu curso. Un diseño limpio y fácil de usar mantiene a los estudiantes enfocados y motivados, convirtiendo a los visitantes ocasionales en alumnos comprometidos.

Los temas y ajustes personalizados te permiten adaptar el aspecto y la sensación de tu página de estudiante, creando un diseño pulido y atractivo en solo unos clics. Esta guía te mostrará cómo configurar esta página de forma eficiente, transformándola en un centro principal que refleje el estilo de tu curso y garantice una experiencia de aprendizaje fluida.

¿Qué es una página de estudiante? Dentro de la plataforma Salebot, la página de estudiante es un panel personalizado que actúa como el espacio de trabajo principal de tu curso. Reúne todas las herramientas que necesita un alumno, permitiéndole:

  • Acceder a todo el contenido y los materiales del curso,

  • Hacer seguimiento de su progreso a través de módulos y lecciones,

  • Completar lecciones y entregar tareas,

  • Interactuar con instructores o facilitadores.

Este entorno integrado está diseñado para simplificar el recorrido de aprendizaje, manteniendo a los estudiantes enfocados, organizados y motivados.

¿Por qué es importante la página de estudiante?

La página de estudiante estructura y agiliza el proceso de aprendizaje. Permite a los estudiantes:

  • Localizar rápidamente los materiales necesarios y retomar sus estudios exactamente desde el punto en que los dejaron.

  • Hacer seguimiento fácilmente de su progreso, viendo qué tareas están completadas y cuáles siguen pendientes.

  • Recibir comentarios del instructor, facilitando un recorrido de aprendizaje más personalizado y eficaz.

Dónde configurar la página de estudiante

circle-check

Para empezar, ve a la sección “Cursos” en MaviBot.

A continuación, selecciona el curso para el que quieres configurar la página de estudiante, y ve a su ajustes.

Entonces serás llevado a la página principal de ajustes del curso, donde debes abrir laPágina de estudiante”.

Ahora, para empezar a personalizar la página de estudiante, localiza el icono de engranaje para abrir el menú de ajustes.

Cuando hagas clic en el icono de engranaje, se abrirá un menú con ajustes para el tema predeterminado (personalizado), tu propio tema (editable), así como ajustes adicionales y la opción de añadir botones personalizados.

Tema principal

El tema principal de la página de estudiante consiste en temas preinstalados y listos para usar que te permiten personalizar la página en un par de clics.

Paso 1: Elige un esquema de color para el Tema principal

Puedes elegir entre 7 temas claros y 2 temas oscuros.

Cuando se aplica un tema personalizado, se actualizan los colores de todos los elementos principales de la página, incluidos:

  • Fondos (imágenes de portada, fondo de la página, barra de progreso, bloques de lección)

  • Botones

  • Relleno de la barra de progreso

  • Bordes, contornos, etc.

Paso 2: Elige el nivel de radio del borde

a) Radio cero – todas las esquinas y los elementos de la página se verán cuadrados.

b) Radio medio – las esquinas y los elementos se verán redondeados o con forma ovalada.

c) Radio máximo – todas las esquinas y los elementos de la página tendrán bordes totalmente redondeados.

circle-check

Tema personalizado

Los ajustes en la pestaña “Tema personalizado” te permiten aplicar tus propios esquemas de color únicos y variados a los elementos de la página de estudiante.

circle-exclamation

Tenga en cuenta

Color de fondo

Este ajuste cambia el color de fondo de toda la página, excluyendo los elementos individuales.

Haz clic en el cuadrado para abrir la paleta de colores y seleccionar el color deseado.

Además de una amplia paleta de colores para cada elemento, también puedes ajustar la intensidad del color usando la escala de transparencia.

Color de superposición del fondo

Usa los ajustes de superposición del fondo para aplicar un color unificado a los contenedores visuales principales de la página:

a) La barra de progreso;

b) Bloques de lección individuales,;

c) El área de la imagen de portada del curso.

Color de acento

Los ajustes de color de acento te permiten cambiar el esquema de color de los principales elementos destacados de la página de estudiante, incluidos:

a) los botones de navegación de lecciones;

b) el relleno de la barra de progreso;

c) los bordes, los fondos de los números de lección y elementos similares.

Color del texto del fondo de la página

Este ajuste te permite elegir un esquema de color atractivo para el texto que se muestra sobre el fondo de la página.

Color del texto de superposición

Este ajuste te permite cambiar el color del texto de los elementos principales de la página de estudiante que aparecen sobre superposiciones de fondo.

Color del texto de acento

Usa este ajuste para definir el color del texto (fuente) de cualquier elemento que esté sobre un fondo de color de acento, incluidos los cuadros de llamada y los botones interactivos.

Ajustes adicionales

En los ajustes adicionales de la página de estudiante, puedes subir una imagen para usarla como portada de la página.

circle-exclamation

Tenga en cuenta

Paso 1: Subir una imagen

Puedes subir una imagen directamente desde tu computadora.

O subir una imagen mediante un enlace desde tu almacenamiento de archivos.

La ventaja de subir una imagen mediante un enlace desde el almacenamiento de archivos es que puedes usar una imagen de cualquier tamaño como portada.

circle-info

Para obtener más detalles sobre cómo usar el almacenamiento de archivos, consulta el artículo "Almacenamiento de archivos".

Paso 2: Altura de la portada

Después de subir la imagen, establece la altura adecuada de la portada en la página de estudiante.

Altura: 260px
Altura: 400px

Paso 3: Posición de la imagen

Puedes usar la opciones preestablecidas de posicionamiento para alinear la imagen al centro, izquierda, derecha o abajo, o elige configuración personalizada.

Moviendo el control circular, puedes colocar la imagen exactamente como quieras.

Paso 4: Tamaño de la imagen

El el campo de tamaño de imagen acepta valores de contain / cover, así como valores numéricos en píxeles (px) y porcentajes (%).

1) valores contain/cover

2) valores numéricos

Paso 5: Repetición de la imagen

La imagen puede repetirse a lo largo del eje Y, es decir, verticalmente; a lo largo del eje X, es decir, horizontalmente o sin repetición.

Paso 6: Casillas de verificación

Para mejorar la experiencia del estudiante en su página personal, puedes habilitar la visualización de:

  • la barra de progreso,

  • el número de lecciones completadas, y

  • el número de tareas aprobadas.

Si no quieres usar estos elementos en la página, puedes desactivar las casillas de verificación.

Botones

La página de estudiante incluye una función para añadir botones personalizados de llamada a la acción debajo de la barra de progreso. Puedes vincular estos botones a sitios web externos, documentos u otras páginas importantes.

Para añadir un botón, abre la pestaña correspondiente en los ajustes de la página de estudiante.

Luego haz clic en "Añadir botón".

Entonces se abrirá una ventana modal para la configuración del botón e introduce un texto para el botón.

Ahora, especifica el enlace de destino (URL) para este botón.

Los colores del botón heredarán automáticamente la paleta del tema principal. Sin embargo, puedes sobrescribir esto estableciendo un color personalizado tanto para su fondo como para su texto.

Luego, haz clic en "Guardar".

El botón ya está guardado y activo. Lo verás mostrado debajo de la barra de progreso en la página de estudiante.

Puedes añadir varios botones; para ello, simplemente ve al menú de ajustes y haz clic en "Añadir botón" debajo del existente.

Banners

Para promocionar recursos clave, puedes añadir banners clicables a la página de estudiante. Estos banners pueden enlazar a cualquier URL que especifiques, como un bot de mensajería, un grupo de la comunidad, un documento importante o un sitio web externo.

Sigamos con la configuración.

Paso 1: Acceder a los ajustes del banner

En los ajustes de la página del curso, localiza y despliega "Banners" sección.

Para hacerlo, haz clic en la sección del menú desplegable de ajustes.:

Paso 2: Sube una imagen.

Después de subirla, la imagen aparecerá en el campo de ajustes.

Paso 3: Ve a los ajustes de la imagen.

Para hacerlo, haz clic en el icono de engranaje en la esquina superior izquierda de la imagen subida, y se abrirá una ventana modal de ajustes:

Paso 4: Establece el enlace de destino Introduce la URL completa a la que serán redirigidos los estudiantes al hacer clic en el banner. Puede ser una página web, un bot de mensajería o cualquier otro recurso en línea.

Paso 5: Configura las dimensiones del banner Establece el tamaño de visualización del banner introduciendo valores para el ancho y la altura.

Importante: Introduce solo valores numéricos en estos campos (por ejemplo, 300). No incluyas unidades como px o %.

Paso 6: Guarda tu configuración Haz clic en "Guardar" para aplicar todos los ajustes del banner.

¡Configuración completa! Tu banner clicable ya está activo. Aparecerá en el lado derecho de la página de estudiante, debajo de la barra de progreso (siempre que la función de banners esté habilitada).

Cómo añadir varios banners

Puedes añadir varios banners a una sola página. Para ello, sube una imagen en los ajustes y configúrala como se describe arriba.

Si haces clic en "Añadir imagen" debajo de una imagen ya subida, el nuevo banner aparecerá debajo del banner añadido previamente en la página del estudiante.

  1. Selecciona la opción de carga de imagen debajo del banner añadido (el botón grande de carga en la parte inferior):

  1. La imagen se ha subido debajo del banner añadido previamente.

  1. En la página del estudiante, el banner aparecerá en la siguiente línea después del añadido previamente.

Si haces clic en el botón "+" a la derecha de una imagen ya subida, el nuevo banner aparecerá en la misma fila que el banner añadido previamente en la página del estudiante.

  1. Haz clic en el botón "+" a la derecha de la imagen subida en los ajustes de la página.

La imagen recién subida se colocará a la derecha.

  1. En la página del estudiante, el banner se mostrará en la misma fila que el subido previamente.

Puedes añadir banners tanto en la misma fila como en filas posteriores al mismo tiempo.

Página de estudiante
Ajustes del banner
circle-check

Vista previa de la página

Después de configurar la página del estudiante, no olvides guardar tus cambios.

Después de guardar los ajustes, haz clic en el botón "Vista previa".

A continuación, selecciona "Ir a la página de estudiante".

Serás llevado a la vista previa de la página de estudiante.

Mientras estás en modo edición, el panel de vista previa te permite inspeccionar visualmente el diseño final. Puedes ver cómo se posicionan y se estilizan todos los elementos, como la barra de progreso, los banners, los botones y los bloques de lección, según tus configuraciones.

circle-exclamation

Tenga en cuenta

Última actualización