Les composants graphiques personnalisés vous permettent d’adapter les fonctionnalités de contenu de vos pages d’accueil aux besoins de votre organisation et de vos cours. Vous pouvez ajouter du code HTML personnalisé pour créer une gamme plus étendue de composants graphiques. Vous pouvez créer des composants graphiques personnalisés pour vos cours, ou utiliser des composants graphiques personnalisés partagés avec vos offres de cours depuis un niveau d'organisation, de département ou de semestre.
|
Remarque : Votre administrateur a peut-être choisi de mettre en œuvre une protection supplémentaire sur les composants graphiques personnalisés appelée la mise en bac à sable. Lorsqu'un composant graphique personnalisé est mis en bac à sable, un iFrame sécurisé est créé autour du composant graphique et empêche l'exécution de scripts en dehors du composant graphique. Vous pouvez voir si un composant graphique est mis en bac à sable ou non dans la liste des composants graphiques personnalisés. Les composants graphiques qui ne sont pas mis en bac à sable ne sont pas non sécurisés en soi, mais ils ne doivent être créés que par des rôles de confiance. |
Dans la liste des composants graphiques, les composants graphiques qui ne sont pas en bac à sable sont identifiés par une icône d’avertissement :
Créer un composant graphique personnalisé
- Sur la page d'accueil de votre cours, cliquez sur Administration du cours > Composants graphiques.
- Cliquez sur Créer le composant graphique.
- Dans l'onglet Propriétés, entrez le nom et la description de votre composant graphique.
- Pour ajouter votre propre contenu HTML au composant graphique à l'aide de l'Éditeur de source HTML, cliquez sur l'onglet Contenu, puis sur l'icône
Éditeur de source HTML. Ajoutez votre code HTML personnalisé.
- Pour appliquer diverses options de style au composant graphique, cliquez sur Personnaliser le style du composant graphique.
- Procédez de l'une des façons suivantes dans la zone Composants graphiques :
- Pour masquer la barre de titre, désélectionnez la case Afficher la barre du titre.
- Pour activer la mise en bac à sable du contenu du composant graphique, sélectionnez l’option Composant graphique est en bac à sable ou Effectuer un rendu en image iframe.
| Remarque : Si votre rôle ne dispose pas de l'autorisation nécessaire pour activer ce réglage, mais que vous pensez que votre composant graphique devrait être mis en bac à sable pour se comporter comme prévu, veuillez communiquer avec un administrateur qui a l'autorisation relative à la Sécurité du composant graphique. |
- Pour supprimer le style de bordure par défaut, décochez la case Afficher un style de contenant de composant graphique.
- Sélectionnez l'option Interdire la réduction du composant graphique pour empêcher les utilisateurs de fermer le composant graphique sur la page d'accueil.
- Pour définir un titre personnalisé, accédez à la section Nom du composant graphique et sélectionnez l'option Personnaliser. Saisissez votre texte dans le champ.
- Cliquez sur Enregistrer. Pour associer des conditions de diffusion au composant graphique, cliquez sur l’onglet Conditions de diffusion et effectuez l’une des actions suivantes :
- Cliquez sur Joindre la condition existante, puis sélectionnez-en une parmi celles utilisables par l’UO. Cliquez sur Enregistrer. Dans la liste déroulante, sélectionnez Toutes les conditions suivantes ou Une des conditions suivantes.
- Sélectionnez Créer et joindre pour créer une condition de diffusion et l’associer. Cliquez sur Créer. Dans la liste déroulante, sélectionnez Toutes les conditions suivantes ou Une des conditions suivantes.
- Cliquez sur Save and Close (Enregistrer et fermer).
Ajouter des CSS externes et JavaScript à un composant graphique
Les composants graphiques personnalisés de Brightspace vous permettent de personnaliser la page d’accueil de votre cours avec un contenu et des fonctionnalités uniques. Bien que l’éditeur de composant graphique par défaut prenne en charge le style HTML et intégré, vous pouvez améliorer vos composants graphiques en reliant des fichiers CSS et JavaScript externes.
L’utilisation de ressources externes permet un style et une interactivité plus avancés tout en facilitant l’entretien du contenu de vos composants graphiques.
Pourquoi ajouter des ressources externes?
La liaison de fichiers externes CSS et JavaScript vous permet d’effectuer les actions suivantes :
- Ajouter un comportement dynamique à l’aide de JavaScript, comme des animations ou des éléments interactifs.
- Appliquer un style personnalisé avec un CSS externe au-delà du thème par défaut de Brightspace.
- Centraliser les mises à jour de conception en gérant les styles et les scripts dans un seul endroit.
Avant de commencer
Lorsque vous liez des fichiers externes CSS et JavaScript à un composant graphique personnalisé, vous devez décider :
- Où stocker vos fichiers de composants graphiques :
- Au niveau du cours, pour les composants graphiques utilisés dans un seul cours.
- Au niveau de l’organisation (fichiers publics), pour les composants graphiques partagés entre plusieurs cours.
- Comment faire référence à ces fichiers dans le HTML du composant graphique en utilisant le bon chemin relatif.
Les sections suivantes fournissent des instructions étape par étape pour les deux options.
Stocker les composants graphiques au niveau du cours
Le stockage au niveau du cours est préférable pour les composants graphiques utilisés dans une seule offre de cours.
Étape 1 : téléversez vos fichiers
- Accédez à Administration de cours > Gérer les fichiers.
- Créez un nouveau dossier pour stocker vos fichiers de composant graphique (par exemple, CliquezEtRévélez).
- Téléversez vos fichiers CSS et JavaScript.
|
Conseil : créez vos fichiers dans un éditeur de code avant de les téléverser (par exemple, cliquer-révéler.css et cliquer-révéler.js). |
Étape 2 : ouvrez l’éditeur HTML du composant graphique
- Accédez à Administration de cours > Composants graphiques.
- Créez un nouveau composant graphique spécial ou modifiez un composant graphique existant.
- Sélectionnez l'onglet Contenu.
- Passez à l’Éditeur de source HTML.
Étape 3 : lier des fichiers externes CSS et JavaScript
- Accédez à Administration de cours > Information sur l’offre du cours.
- Copiez le chemin de l’offre de cours affiché sur la page.
- Dans la section <head> HTML du composant graphique, liez vos fichiers à l’aide du chemin de l’offre du cours, suivi de la structure de votre dossier.
Image : exemple de liaison de fichiers externes CSS et JavaScript dans la section <head> HTML du composant graphique à l’aide du chemin de l’offre de cours.
Étape 4 : créer votre widget
Utilisez l’éditeur HTML pour ajouter votre contenu de composant graphique. Les fichiers CSS et JavaScript liés contrôlent le style et le comportement du composant graphique.
Stocker les composants graphiques dans les fichiers publics (au niveau de l’organisation)
Le stockage du composant graphique dans les fichiers publics vous permet de le réutiliser dans plusieurs cours. Cette option nécessite généralement des autorisations d’administrateur.
Étape 1 : téléversez vos fichiers
- Sélectionnez l’icône de roue dentée Admin dans la minibarre de Brightspace.
- Sélectionnez Fichiers publics.
- Créez un nouveau dossier pour stocker vos fichiers de composant graphique (par exemple, CliquezEtRévélez).
- Téléversez vos fichiers CSS et JavaScript.
|
Conseil : créez vos fichiers dans un éditeur de code avant de les téléverser (par exemple, cliquer-révéler.css et cliquer-révéler.js). |
Étape 2 : ouvrez l’éditeur HTML du composant graphique
- Accédez à Gestion de la page d’accueil.
- Sélectionnez l’onglet Composants graphiques.
- Créez un nouveau composant graphique spécial ou modifiez un composant graphique existant.
- Dans l’onglet Propriétés, repérez Rendre le composant graphique disponible pour et cliquez sur Ajouter des unités organisationnelles.
- Sélectionnez les unités organisationnelles pour lesquelles vous désirez rendre le composant graphique disponible.
- Sélectionnez l’onglet Contenu et passez à l’Éditeur de source HTML.
Étape 3 : lier des fichiers externes CSS et JavaScript
Dans la section <head> HTML du composant graphique, liez vos fichiers stockés dans des fichiers publics à l’aide d’un chemin relatif commençant par /shared, suivi de la structure de votre dossier.
|
Conseil : le chemin /shared est sensible à la casse. |
Image : exemple de liaison de fichiers externes CSS et JavaScript stockés dans Fichiers publics à l’aide d’un chemin /shared.
Étape 4 : créer et lancer votre composant graphique
Utilisez l’éditeur HTML pour ajouter votre contenu de composant graphique. Une fois terminé, ajoutez le composant graphique à la page d’accueil appropriée afin qu’il s’affiche pour les apprenants ou les enseignants.