Los componentes personalizados le permiten ampliar la funcionalidad del contenido disponible en sus páginas de inicio para satisfacer las necesidades específicas de su organización o curso. Puede agregar código HTML personalizado para crear una amplia variedad de componentes. Puede crear componentes personalizados para sus cursos o usar componentes personalizados compartidos con las ofertas de cursos en el nivel de la organización, departamento o semestre.
|
Nota: Los Es posible que el administrador haya optado por implementar una salvaguarda adicional en los componentes personalizados denominados "espacios aislados". Cuando un componente personalizado contiene espacios aislados, se crea un iFrame seguro alrededor del componente y evita que se ejecuten secuencias de comandos fuera del componente. Puede ver si un componente contiene espacios aislados o no en la lista de componentes personalizados. Los componentes sin espacios aislados no son inseguros por sí mismos, pero solo deben ser creados por roles de confianza. |
En la lista de componentes, los componentes sin espacios aislados tienen un ícono de advertencia:
Para crear un componente personalizado
- En la página de inicio de su curso, haga clic en Administración del curso > Componentes.
- Haga clic en Crear componente.
- En la pestaña Propiedades, ingrese un nombre y una descripción para el componente.
- Para agregar su propio contenido HTML al componente con el Editor de fuente de HTML, haga clic en la pestaña Contenido > ícono
Editor de fuente de HTML. Agregue su código HTML personalizado.
- Para aplicar diferentes opciones de estilos al componente, haga clic en Personalizar estilo del componente.
- En Configuración del componente, puede realizar cualquiera de las siguientes acciones:
- Para ocultar la barra de título, desmarque la casilla de selección Mostrar barra de título.
- Para activar los espacios aislados del contenido del componente, haga clic para seleccionar Componente contiene espacios aislados o Representar en iFrame.
| Nota: si su rol no tiene permiso para alternar esta configuración, pero cree que su componente no debe contener espacios aislados para comportarse como se espera, comuníquese con un administrador que cuente con permiso de Seguridad del componente. |
- Para eliminar el estilo de borde predeterminado, desmarque la casilla de selección Mostrar el estilo de contenedor del componente.
- Seleccione Prohibir minimización del componente para impedir que los usuarios cierren el componente en la página de inicio.
- Para configurar un título personalizado, en la sección Nombre del componente, seleccione el botón de opción Personalizar. Ingrese su texto en el campo.
- Haga clic en Guardar. Para adjuntar condiciones de publicación al componente, haga clic en la pestaña Condiciones de publicación y realice una de las siguientes acciones:
- Haga clic en Adjuntar existente y luego seleccione una de las condiciones de publicación existentes disponible para la unidad de organización. Haga clic en Guardar. En la lista desplegable, seleccione Se debe cumplir con todas las condiciones o Se debe cumplir con cualquiera de las condiciones.
- Haga clic en Crear y adjuntar para crear una condición de publicación y adjuntarla. Haga clic en Crear. En la lista desplegable, seleccione Se debe cumplir con todas las condiciones o Se debe cumplir con cualquiera de las condiciones.
- Haga clic en Guardar y cerrar.
Agregar CSS y JavaScript externos a un componente
Los componentes personalizados de Brightspace le permiten personalizar la página de inicio del curso con contenido y funcionalidad únicos. Si bien el editor de componentes predeterminado es compatible con HTML y estilos en línea, puede mejorar sus componentes mediante la vinculación de archivos externos de CSS y JavaScript.
El uso de recursos externos permite aplicar estilos e interactividad más avanzados, a la vez que mantiene el contenido del componente con mayor facilidad.
¿Por qué agregar recursos externos?
Vincular archivos externos de CSS y JavaScript le permite:
- Agregar comportamientos dinámicos con JavaScript, como animaciones o elementos interactivos.
- Aplicar estilos personalizados con CSS externo, más allá del tema predeterminado de Brightspace.
- Centralizar las actualizaciones de diseño mediante la administración de estilos y secuencias de comandos en una sola ubicación.
Antes de comenzar
Cuando vincule archivos CSS y JavaScript externos a un componente personalizado, debe decidir lo siguiente:
- Dónde almacenar los archivos del componente:
- A nivel de curso, para componentes que se utilicen en un solo curso.
- A nivel de organización (archivos públicos), para componentes que se comparten varios cursos.
- Cómo hacer referencia a esos archivos en el HTML del componente mediante la ruta relativa correcta.
Las siguientes secciones proporcionan instrucciones paso a paso para ambas opciones.
Almacene los componentes a nivel de curso
El almacenamiento a nivel de curso es mejor para los componentes que se utilizan en una sola oferta de cursos.
Paso 1: Cargue sus archivos
- Vaya a Administración del curso > Administrar archivos.
- Cree una nueva carpeta para almacenar los archivos del componente (por ejemplo, ClickAndReveal).
- Cargue los archivos CSS y JavaScript.
|
Consejo: Cree los archivos en un editor de código antes de cargarlos (por ejemplo, click-reveal.css y click-reveal.js). |
Paso 2: Abra el editor HTML del componente
- Vaya a Administración del curso > Componentes.
- Cree un componente personalizado o edite uno existente.
- Seleccione la pestaña Contenido.
- Cambie al Editor de código de origen HTML.
Paso 3: Vincule archivos CSS y JavaScript externos
- Vaya a Administración del curso > Información de oferta de cursos.
- Copie la Ruta de oferta de cursos que se muestra en la página.
- En la sección <head> del HTML del componente, vincule sus archivos con la Ruta de oferta de cursos seguida de la estructura de la carpeta.
Figura: Ejemplo de cómo vincular archivos externos de CSS y JavaScript en la sección HTML <head> del componente mediante la Ruta de oferta de cursos.
Paso 4: Cree su componente
Use el editor de HTML para agregar el contenido del componente. Los archivos CSS y JavaScript vinculados controlan el estilo y el comportamiento del componente.
Almacenar componentes en archivos públicos (nivel de organización)
Almacenar componentes en archivos públicos le permite volver a utilizarlos en varios cursos. Por lo general, esta opción requiere permisos de administrador.
Paso 1: Cargue sus archivos
- Haga clic en el ícono de engranaje de Administración en la minibarra de Brightspace.
- Seleccione Archivos públicos.
- Cree una nueva carpeta para almacenar los archivos del componente (por ejemplo, ClickAndReveal).
- Cargue los archivos CSS y JavaScript.
|
Consejo: Cree los archivos en un editor de código antes de cargarlos (por ejemplo, click-reveal.css y click-reveal.js). |
Paso 2: Abra el editor HTML del componente
- Vaya a Administración de página de inicio.
- Seleccione la pestaña Componentes.
- Cree un componente personalizado o edite uno existente.
- En la pestaña Propiedades, busque la opción Hacer que el componente esté disponible para y haga clic en Agregar unidades de organización.
- Seleccione las unidades de organización en las que desea que el componente esté disponible.
- Seleccione la pestaña Contenido y cambie al Editor de código de origen de HTML.
Paso 3: Vincule archivos CSS y JavaScript externos
En la sección <head> del HTML del componente, vincule los archivos almacenados en archivos públicos mediante una ruta relativa que comience con /shared, seguida de la estructura de carpetas.
|
Sugerencia: La ruta /shared distingue mayúsculas y minúsculas. |
Figura: Ejemplo de vinculación de archivos CSS y JavaScript externos almacenados en archivos públicos mediante una ruta /shared.
Paso 4: Cree e implemente el componente
Use el editor de HTML para agregar el contenido del componente. Una vez completado, agregue el componente a la página de inicio correspondiente a fin de que aparezca para los estudiantes o instructores.