Guide de création des "étiquettes Bootstrap"

Re: Guide de création des "étiquettes Bootstrap"

par Luiggi Sansonetti,
Nombre de réponses : 13
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs

Bonjour Gilles

Merci à toi pour ce tutorel concernant ces étiquettes assez belles et simples d'utilisation.


Je les avais utilisées l'an dernier dans le cadre d'un projet, mais j'ai mis de côté suite à quelques réserves.

Pas de blocage en soi, mais juste quelques détails pour l'utilisation clin d’œil


L'an dernier, quand je dupliquais une étiquette créée, c'était la même, même numéro...

Donc en modifiant l'une, l'autre changeait aussi

J'ai refait la chose ce matin, et ça semble ne plus le faire, la duplication se passe bien !


Mais si on regarde le rapport d'achèvement d'activités, ces étiquettes sont nommées "boostrapelementxx"

Donc pas possible de savoir ce dont il s'agit comme contenu clin d’œil


De même avec l'appli moodle mobile qui listera ces éléments de façon brute : boostrapelement

Pas très parlant pour l'utilisateur.


A voir si ça s'améliore par la suite car la présentation est sympathique quand même


Moyenne des évaluations Utile (1)
En réponse à Luiggi Sansonetti

Re: Guide de création des "étiquettes Bootstrap"

par Gilles Le Page,
Avatar Moodleurs particulièrement utiles

Bonjour Luiggi,

merci pour ton retour, je vais intégrer ça dans le chapitre "nconvénients".

J'ajouterai la ressource modifiée dans quelques jours : j'attends de voir s'il y a d'autres retours.

Bonne semaine

Gilles

En réponse à Gilles Le Page

Re: Guide de création des "étiquettes Bootstrap"

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour Gilles;

Merci pour ta contribution vis-à-vis de ces étiquettes que j'utilise et installe chez tous mes clients.
En effet elles permettent non seulement d'aérer les pages dans nos cours en affichant des textes, des images, des vidéos dans une fenêtre surgissante, mais les boutons d'accès personnalisables (icône) sont très pratiques.

Deux choses à rajouter:

  1. A moins de modification récente elles ne sont pas encore compatibles Moodle 3.5 alors qu'une simple modification permet de les rendres compatibles. Même moi j'ai osé ! clin d’œil Voici ci-joint, ce plugin compatible Moodle 3.5.
  2. Si on insère une vidéo dans une étiquette Bootstrap, elle n'occupe pas toute la taille de la fenêtre, même si on modifie la taille de cette dernière. Voici le texte que j'ai intégré dans mon dernier bulletin bi-mensuel:

______________________________________________________

Des vidéos plein écran dans les fenêtres des étiquettes Boostrap_ éléments

Nous avons tous installés dans nos MoodleBox et nos sites Moodle le très utile plugin tiers "Etiquettes Bootstrap_elements" qui permettent de clarifier la présentation dans nos cours en remplaçant les traditionnelles étiquettes par des boutons agrémentés d'un logo.
Un clic sur ce bouton nous fait apparaître une sobre fenêtre surgissante contenant texte, images, vidéos...
Les dernières versions de nos MoodleBox en 3.5 ne permettant pas d'y installer ce plugin car il n'avait pas encore été mis à jour, j'ai du le modifier récemment et vous livre, en fichier attaché la version correspondante à Moodle 3.5 afin que les dernières MoodleBox livrées puissent en être équipées.
Donc tout le monde dispose de ce plugin à présent.

Si on intègre une vidéo dans la fenêtre surgissante on s'apercevra qu'elle n'occupe qu'une partie de la fenêtre, même si on modifie les paramètres de taille. En effet si on agrandi la vidéo, la fenêtre augmente d'autant.
Pour permettre à la vidéo d'occuper toute la taille de la fenêtre surgissante, il faut placer le code suivant dans la fenêtre de l'onglet Couleur->SCSS brut initial, depuis l'administration du thème fordson . Pour ceux qui utilisent mon thème conseillé Fordson qui est celui de mes MoodleBox.

   .mediaplugin.mediaplugin_videojs > div {max-width: none!important; }

Moyenne des évaluations Utile (2)
En réponse à Daniel Méthot

Re: Guide de création des "étiquettes Bootstrap"

par Gilles Le Page,
Avatar Moodleurs particulièrement utiles

Merci Daniel pour ces précisions très utiles.

J'intègre les infos pérennes dans le livre ressource, que je mettrai en ressource dans quelques jours.

Bonne semaine sourire

Gilles

En réponse à Daniel Méthot

Re: Guide de création des "étiquettes Bootstrap"

par benoit Martinet,

Bonjour à tous et merci pour ces infos.

Je viens d'installer sur ma version 3.5 et cela fonctionne en revanche au niveau de la rubrique des icônes rien ne m'est proposé. 

En réponse à benoit Martinet

Re: Guide de création des "étiquettes Bootstrap"

par Gilles Le Page,
Avatar Moodleurs particulièrement utiles

Bonjour Benoit,

En attendant, essaie de saisir "fa-video-camera" dans la case, ça devrait faire apparaître l'icône d'une caméra dans l'étiquette.

la liste des autres étiquettes est accessible ici : https://mdbootstrap.com/docs/jquery/content/icons-list/

Bonne suite,

Gilles

Moyenne des évaluations Utile (1)
En réponse à Daniel Méthot

Re: Guide de création des "étiquettes Bootstrap"

par benoit Martinet,

Bonjour et merci 

La modification de votre plugin fonctionne bien sur 3.5 en revanche je n'ai pas accès aux icônes

En réponse à benoit Martinet

Re: Guide de création des "étiquettes Bootstrap"

par Gilles Le Page,
Avatar Moodleurs particulièrement utiles

Bonsoir Benoit

Quand tu cliques dans la case Icône, cela devrait générer l'affichage immédiat d'une case de présentation des icones de la "Font Awesome". 

Si cet affichage ne se produit pas, ce qui m'est arrivé une ou deux fois sans que je sache pourquoi, tu peux toujours tester cette solution :

  • tu saisis une des "descriptions", comme fa-suitcase pour l'icône d'une valise, et l'étiquette Bootstrap utilisera l'icône demandée.

Tu trouveras la liste des icônes ici : https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

Exemple avec l'icône automobile (fa-automobile) :  

Si ça marche tu bois un café à ma santé clin d’œil

Gilles

Moyenne des évaluations Utile (1)
En réponse à Gilles Le Page

Re: Guide de création des "étiquettes Bootstrap"

par benoit Martinet,

Bonjour Gilles cela marche parfaitement bien.

Pour info je viens de récupérer le plugin Unilabel sur ghitub pour test . C'est awesome sourire et sans problèmes de compatibilité avec Moodle 3.5

En réponse à Gilles Le Page

Re: Guide de création des "étiquettes Bootstrap"

par Jean-Roch Meurisse,
Avatar Développeurs Avatar Développeurs de plugins Avatar Testeurs

Hello,

Sur Moodle 3.5 et 3.6 la fenêtre de choix des icones fontawesome ne s'affiche pas à cause d'une erreur javascript (jquery n'est pas chargé). Pour résoudre ce problème il faut faire deux petits ajouts dans le fichier mod_form.php:

ajouter la variable $PAGE (ligne 34)

ajouter $PAGE->requires->jquery(); (ligne 35)

Jean-Roch


Moyenne des évaluations Utile (1)
En réponse à Luiggi Sansonetti

Re: Guide de création des "étiquettes Bootstrap"

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs

Bonjour

Je complète avec les petits problèmes avec l'appli Mobile Moodle et même l'appli Destop Moodle, ces formats ne sont pas (encore) supportés



Je n'ai pas testé l'autre plugin...

Moyenne des évaluations Utile (2)