Section outline

    • L'outil SAN-Tools développé par la MAPI sous la forme d'une application Web dans le cadre d'un projet STEP est hébergé sur le serveur 'pedagotec' de l'université de Bordeaux (le même qui héberge les ressources pédagogiques)

      Chaque module est utilisable de façon autonome est accessible via une adresse spécifique.

      Pour une utilisation permettant la connexion entre modules, une page index permet de stocker et transmettre des valeurs entre certains modules.

  • 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
  • L'outil SANTool peut être utilisé sans connexion internet. 

    Pour cela, il faut télécharger l'application à l'adresse suivante.

    https://pedagotec.u-bordeaux.fr/SANTools/admin/SANTools_v1.1.zip

    Puis dezipper le fichier téléchargé dans le dossier de votre choix.
    Un dossier SANTool_v1.1 est alors créé :
     SANTools_v1.1
     css
     img
     js
     credits.html
     home.html
     index.html
     mod_extraction.html
     mod_gradient.html
     mod_resolution.html
     mod_uvvis.html

    Pour utiliser l'application mode local entrez dans le dossier SANTool_v1.1 et double-cliquez sur le fichier "index.html"

    Cela aura pour effet d'ouvrir un navigateur sur la page d'accueil de l'outil SANTools en mode intégré.

    Pour ouvrir l'outil en mode standalone double-cliquez sur le fichier "home.html" ou, pour ouvrir directement l'outil sur un module, double-cliquez sur un fichier dont le nom commence par "mod_" suivi du nom du module.html selon le module que vous souhaitez ouvrir.

    Pour utiliser des données personnalisées en mode hors ligne il reste possible de spécifier un fichier de données au format JavaScript en ajoutant un paramètre "data" dont la valeur prendra l'adresse du fichier (Cf paramètre data décrit dans partie "Paramètre du menu d'accès" de la section "Intégration dans Moodle").
    En mode local cette adresse sera relative au dossier de l'application (SANTools_v1.1).
    Il peut être judicieux de créer un dossier "config" (le nom importe peu) pour contenir un ou plusieurs fichiers de données.
    Par exemple en copiant un fichier de donnée "san_data_custom.js" dans un dossier "config", l'application pourra charger ce fichier en ajoutant "?data=config/san-data.js" à l'adresse qui s'affiche dans le navigateur lorsque vous ouvrez un des fichiers "html" situé dans le dossier SANTools_v1.1.

    Une seconde alternative consiste à remplacer directement le contenu du fichier SANTools/js/san_data.js par le contenu de votre fichier "san_data_custom.js". L'outil chargera alors les données personnalisées sans qu'il y ai besoin de modifier de paramètre dans l'adresse du navigateur.