Section outline

  • Pour améliorer l'utilisabilité dans les cours Moodle il est possible d'intégrer un menu d'accès  à l'outil en insérant une balise "embed" dans le code html d'une étiquette ou un block HTML et en renseignant l'attribut 'src' avec l'adresse 'https://pedagotec.u-bordeaux.fr/SANTools/moodle/' suivi du caractère '?' puis du paramètre 'mode' permettant de générer les liens vers l'outil en mode "autonome" (standalone) ou "intégré" (integrated).

    <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=integrated" width="100%" height="20"></embed>


    Paramètre du menu d'accès

    D'autre paramètres permettent de personnaliser le menu. Pour les utiliser il suffit de les ajouter à l'adresse en les séparant par le caractère '&'

      • module : Ce paramètre permet de spécifier le module à afficher dans le cas ou aucun paramètre link_[module] n'est spécifié

      Exemple : 

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=integrated&module=resolution&link_resolution=<font color=grey>Résolution</font>" width="100%" height="20"></embed>

      • link_[module] (ou [module] correspond au nom du module (extraction, uvvis, résolution ou gradient) : Ce paramètre permet de spécifier l'affichage du lien vers le module correspondant. Si une valeur est attribué à ce paramètre celle ci sera utilisée comme texte du lien.

      Exemple : 

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=standalone&link_home&link_extraction&link_uvvis=Module UV-Visualisation&link_resolution=Module Résolution" width="100%" height="80"></embed>

      Note : On remarque que les deux premiers items portent leur nom par défaut car aucune valeur ne leur a été affectée. En effet bien que présents dans l'URL (ce qui leur permet d'être affichés) ces deux premiers paramètres ne sont pas suivi du caractère "=" et d'une valeur.

      On remarquera également la modification de la valeur de l'attribut "height" dans la balise "embed". Cette valeur a ici été augmentée à "80" afin de permettre l'affichage des items supplémentaires sur la hauteur. 

      • popup_width et popup_height : Ces deux paramètres permettent de spécifier respectivement la largeur et la hauteur de la fenêtre dans laquelle s'afficheront les outils.

      Exemple : 

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=integrated&module=resolution&popup_width=800&popup_height=500" width="100%" height="20"></embed>

      • styles : Ce paramètre permet de définir des styles sur les éléments du menu en fournissant une ou plusieurs listes de propriétés et valeurs. Ces listes doivent être formatées suivant la syntaxe suivante (ou chaque propriété et valeurs sont séparée par le caractère '_') : proprieté1_valeur1_propriété2_valeur2_ ... _propriétéN_valeurN.
        Chaque liste doit par ailleurs être précédée d'un entête (HEADER ou ITEMS) qui permet de spécifier sur quel élément de la liste seront appliquées les propriétés :
        - Les propriétés de la liste commençant par HEADER seront appliqués sur le lien vers la page d'accueil de l'application SANTools sous reserve que le paramètre 'link_home' soit définit.
        Les propriétés de la liste commençant par ITEMS seront appliqués sur les liens vers les modules

      Exemple : 

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=standalone&link_home&link_extraction=Extraction&link_uvvis=UV-Visualisation&link_resolution=Résolution&link_gradient=Gradient&styles=HEADER_color_#fff_background_#443a31_text-align_center_hcolor_#fff_ITEMS_color_#009de0_bshape_arrow_bcolor_#443a31_hbackground_#fefefe" width="100%" height="105"></embed>
      Note : Il est possible d'utiliser toutes les propriétés et valeurs compatible CSS dans la mesure ou celle ci-peuvent s'appliquer sur des liens (balise 'a'). Toutefois quelques propriétés ont été ajoutés pour simplifié l'écriture :

      hcolor : prend en comme valeur une couleur au format CSS et s'applique à la couleur des liens survolés

      hbackground : prend en comme valeur une couleur au format CSS et s'applique à la couleur d'arrière plan des liens survolés

      bshape : prend comme valeur 'square' ou 'cercle' ou 'arrow' et s'applique la 'puce' précédent les liens. Si cette propriétée est ommise aucune 'puce' ne s'affichera.

      bcolor : prend en comme valeur une couleur au format CSS et s'applique à la couleur de la 'puce' précédent les liens.

      • stylesheet : Ce paramètre permet de définir des styles sur les élément du menu en fournissant l'adresse d'une feuille de style. Cette feuille de style doit être écrite suivant la synatxe 'css' dans un fichier accessible par le web.  Dans un cours Moodle il est possible d'ajouter ce fichier via l'activité fichier puis de récupérer son URL (celle ci s'affichera dans la barre d'adresse du navigateur après avoir cliqué sur l'activité fichier nouvellement crée)

      Exemple : 

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/moodle?mode=standalone&link_home&link_extraction&link_uvvis=Module UV-Visualisation&link_resolution=Module Résolution&stylesheet=https://fad.u-bordeaux.fr/pluginfile.php/176767/mod_resource/content/1/moodlesan.css" width="100%" height="90"></embed>
       

      • data

      Ce paramètre à été ajouté dans la versio 1.1 afin de permettre la prise en compte des valeur autres que celles définies par défaut dans l'application pour réaliser les calculs nécessaires à l'affichage des graphiques.

      Il prend comme valeur l'url d'un fichier javascript qui contient les données personnalisées. Ce fichier peut être créé avec l'outil "csv2js" accessible à l'adresse : https://pedagotec.u-bordeaux.fr/SANTools/V1.1/admin/csv2js.html

      exemple :

      <embed src="https://pedagotec.u-bordeaux.fr/SANTools/V1.1/moodle?mode=integrated&module=extraction&data=https://fad.u-bordeaux.fr/pluginfile.php/176767/mod_resource/content/1/san-data-generate.js" width="100%" height="90" ></embed>

      Pour créer le fichier javascript "san-data-generate.js", il faut charger un fichier de format ".csv" dans l'outil de transformation csv2js le fichier. Une fois ce fichier chargé, un tableau des données importées s'affiche alors sur la page et le fichier javascript peut être télécharger en cliquant sur le bouton en bas de page.
      Note : Pour être correctement transformé en code javascript le fichier ".csv" doit incorporer un certain nombre de valeurs associées à des champs prédéfinis. Il se compose de 3 tableaux de données correspondant aux solvants, aux échantillons et aux valeurs utilisées pour le calcul des epsilons dans le module gradient.
      Un exemple de fichier au format ".csv" compatible est téléchargeable à l'adresse : https://pedagotec.u-bordeaux.fr/SANTools/admin/san_data.csv