Une carte mentale (ou carte heuristique de son vrai nom) est un diagramme représentant une arborescence d'idées, construites hierarchiquement. En bref : c'est un arbre.
Ce dessin de carte-mentale se dessine (et s'actualise) automatiquement à partir d'un système de fichiers simple stocké sur un disque de votre serveur.
Vous pouvez consulter les exemples ci-dessous afin de voir le rendu (en développement) :
Cette application utilise du php et nécessite donc d'être installée sur un serveur web. Si vous êtes en réseau local (ou sur un unique ordinateur), vous pouvez installer votre propre serveur. Si vous avez un fournisseur d'accès Internet, il est probable que celui-ci vous propose un "espace-perso" pour y stocker des sites web (renseignez-vous).
De plus, il est à noter que cette appli utilise les normes du HTML 5 (utilisation de canvas pour dessiner) ainsi que de Javascript (activé, of course !). Vos ordinateurs clients doivent avoir un navigateur "suffisamment" récent (voir la section "Ça ne marche pas !")
(Note : la version de développement est disponible sur Github. À noter qu'il se présente sous la forme d'un test (avec un dossier déjà rempli), et non d'une carte mentale vierge.
Elle n'est pas directement installable avec un simple pull. Il est toutefois possible d'aller y piocher les dernières versions des scripts.)
Copiez les fichiers téléchargés (après les avoir dezippés) sur n'importe quel dossier de votre serveur. C'est tout.
Concernant les mises à jour, pour l'instant, il s'agit d'écraser les fichiers déjà existants. Le fichier "parametres.php" et le dossier "dossier" ne sont pas écrasés. (Dans ce cas, les paramères supplémentaires éventuels prennent les valeurs par défaut)
Pour information :
Mettez tous vos fichiers ressources dans les dossiers racine : "dossier". Dans votre navigateur Web, lancez la page index.php.
La carte-mentale se dessine alors, faisant apparaitre les "bulles" correspondant aux sous-dossiers et fichiers contenus dans votre dossier racine : "dossier". Les titres des bulles correspondront aux noms des fichiers ou dossiers (parfois légèrement modifiés. Voir ci-après). Chaque fois vous ajouterez de nouveaux fichiers ou nouveaux dossiers dans votre dossier racine "dossier", la carte-mentale se mettra automatiquement à jour au prochain chargement de la page.
Actuellement, il existe 3 types de bulles que peut afficher la carte-mentale :
Comme dit précédemment, les titres des bulles correspondent aux noms de fichiers ou des dossiers. Si vous souhaitez sauter une ligne, dans le titre d'une bulle, il faudra l'indiquer dans le nom de votre fichier, par le caractère "paragraphe" : § (Si ce caractère ne vous convient pas, vous pouvez le changer via la variable $caractereSautLigneTitre. Voir le paragraphe sur la configuration).
Par exemple, le dossier "X-Files§(confidentiel)" s'affichera dans la bulle comme dans l'exemple ci-dessous :
Ce comportement peut être supprimé via le paramètre $autoriseSautLigneTitre (Voir le paragraphe sur la configuration).
Le zoom et le dézoom sur un point de l'écran s'obtiennent en faisant rouler la roulette de la souris.
Pour déplacer la carte-mentale, deux possibilités :
Le programme possède une partie privée accessible pour des utilisateurs possédant un login et un mot de passe. En effet, le programme gère 3 types d'utilisateurs :
Si vous êtes utilisateur privilégié, et que vous ne souhaitez pas que le grand public accède à toutes les branches de l'arborescence, un système de login/mot de passe vous permet de "bloquer" ou non certaines bulles.
Rien de plus simple : il suffit de placer une image portant le nom "icone" dans le dossier concerné, au format JPEG, PNG ou GIF (au choix):
Certains fichiers sont automatiquement invisibles, car souvent créés par le système d'exploitation, de manière involontaire. En voici la liste :
Tous les paramètres sont exprimés sous forme de variables PHP, dans le fichier "parametres.php". On les modifies en éditant ce fichier avec un éditeur de texte. Ils se présentent sous la forme suivante : $maVariable="la_valeur_de_mon_paramètre".
Le tableau ci-dessous recence la liste de ces paramètres :
Variable | Rôle | Valeur par défaut |
---|---|---|
$rootDefaut | (string) Chemin du dossier qui correspond à la racine de l'arborescence (lorsqu'on ne le passe pas via méthode $_GET). | "./dossier" |
$ouvrirPremiereBulle | (booléen) Indique s'il faut déployer la 1ere bulle ou non dès le chargement de la page. | true |
$autoriseDossierParent | (booléen) Dans l'adresse de la racine de l'arborescence (voir $rootDefaut), ce paramètre autorise (ou non) le pointage d'un dossier situé en amont de "index.php" (l'utilisation de "../" de manière générale). | false |
$nomBulleRacine | (Entier) Nom de la bulle principale. Lorsqu'on laisse du texte vide (""), le nom du dossier principale (racine) est utilisé. | "" |
$autoriseModifierOptions | (booléen) Autorise (ou non) l'affichage du bouton "Option", permettant à l'utilisateur de modifier certaines options pendant sa navigation. | true |
$titrePage | (string) Titre de la page HTML. Si cette variable est un texte vide (""), c'est le titre de la bulle principale qui est choisi par défaut (lui-même étant par défaut le nom du dossier "racine"). | "" |
$activeMiroir | (booléen) Active la redirection, lorsque l'on veut télécharger un fichier. Une fois activé (true), le lien de téléchargement sera le fichier "sources/PHP/miroir.php". Ce fichier se charge de récupérer les données du fichier voulu, et les renvoie, à la manière d'un miroir | true |
Variable | Rôle | Valeur par défaut |
---|---|---|
$autoriseOmbres | (booléen) Permet de mettre/supprimer les ombres (pour les PC un peu lents...). | true |
$afficheExtensions | (booléen) Affiche (ou non) les extensions en fin de fichier (L'îcone peut suffir à identifier les fichiers...). | false |
$couleurBullesDossiers | (string) Couleur des bulles "dossier". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) | "#CCDDFF" |
$couleurBullesFichiers | (string) Couleur des bulles "fichier". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) | "#FFCC99" |
$couleurBullesLiens | (string) Couleur des bulles "Lien". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) | "#BBEEBB" |
$couleurConnecteurs | (string) Couleur des connecteurs entre les bulles. Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) | "#CCDDFF" |
$afficheBackground | (booléen) Affiche (ou non) une couleur d'arrière plan. Si "False", alors l'arrière plan sera transparent. | true |
$couleurBackground | (string) Couleur de l'arrière plan (quand il est visible). Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) | "#FFFFFF" |
$autoriseSautLigneTitre | (booléen) Formate les titres des bulles en remplaçant (ou non) les caractères "|" par des sauts de ligne "/n". | true |
$caractereSautLigneTitre | (string) Caractère qui servira de séparateur de ligne dans le nom des bulles (i.e. nom des fichiers ou dossiers). Ce caractère peut être n'importe lequel à condition qu'il soit accepté par le système de fichier de l'OS de votre serveur (voir cet article de forum). | "§" |
Variable | Rôle | Valeur par défaut |
---|---|---|
$vitesseZoom | (flottant) Vitesse de zoom à chaque coup de molette. Pour inverser l'effet de la molette, il suffit de changer le signe (par exemple : mettre -1) | 1. |
$autoCentre | (Booléen) Centre automatiquement (ou non) les bulles-dossiers lorsqu'elle s'ouvrent. Seule les bulles "suffisamment loin du centre" sont impactées (Voir $rayonAutoCentre pour régler la distance limite). | true |
$rayonAutoCentre | (Entier) Distance minimale (en pixel) entre bulle-dossier et le centre de l'écran à partir de laquelle une bulle-dossier est auto-centrée à l'ouverture. | 200 |
$delaiAutoCentre | (Entier) Temps d'attente (en millisecondes (ms)) avant de faire l'auto-centrage (0 pour un autocentrage qui démarre de suite après le clic). | 200 |
$vitesseAutoCentre | (Entier) Temps (en millisecondes (ms)) que met le programme pour faire l'animation d'auto-centrage. | 700 |
$dureeOuvertureFermeture | (Entier) Temps (en millisecondes (ms)) que met le programme pour faire l'animation d'ouverture (ou de fermeture) des bulles. | 200 |
$autoFermeFreres | (Booléen) Autorise le programme à fermer automatiquement les bulles "soeurs" (dans le même dossier) lorsqu'on ouvre une bulle dans ce dossier. | false |
Bon, on pourrait rajouter plein d'autres paramètres, mais je n'ai pas eu le courage de le faire. Je les rajouterai selon la demande.
Dans le fichier "sources/parametres.php", les utilisateurs sont listés dans un tableau PHP. Ce tableau se compose d'une ligne par utilisateur. Chaque ligne contient : le nom d'utilisateur (login), son mot de passe, et éventuellement le mot "admin" si l'utilisateur est un utilisateur "privilégié".
Pour rajouter une utilisateur, il suffit de rajouter une ligne avec la syntaxe suivante :
array( "nom_dutilisateur","Mot_de_passe","admin"),
Il suffit donc de remplacer les éléments entre guillemets par votre nom d'utilisateur et votre mot de passe. Vers la fin de la ligne, la chaîne "admin" indique que l'utilisateur est "administrateur". Dans le cas contraire, il faut laisser des guillemets vides : "". Voici un exemple un peu plus parlant :
$listeUsers =array( array( "proviseur","123456789","admin"),
array( "proviseur-adjoint","azerty","admin"),
array( "professeur","jf1832",""),
array( "élève","5Juillet",""),
);
Dans l'exemple précédent, l'utilisateur proviseur (dont le mot de passe est 123456789) peut se connecter, voir les bulles "cachées" et modifier la carte-mentale (car il est administrateur).
Il en est de même pour l'utilisateur proviseur-adjoint (dont le mot de passe est azerty)
L'utilisateur professeur (dont le mot de passe est jf1832) peut se connecter et voir les bulles cachées.
Il ne peut en revanche pas les modifier (il n'est pas administrateur ; la dernière case est laissée vide entre les guillemets).
Il en est de même pour l'utilisateur élève (dont le mot de passe est 5Juillet).
J'avoue que ce n'est pas très éléguant comme méthode, mais c'est en attendant de faire mieux !
Par défaut, il y a un login : "root" (mot de passe : "root"), sans les guillemets. A vous de modifier !
Si cela vous arrive, c'est que le dessin de la chaîne fonctionnelle n'a pas été réalisée par javascript. Trois raisons essentielles à cela :
Je ne sais pas... Ce bug avait lieu avec une ancienne version de Carmen. Je ne l'ai plus revu depuis. Si cela se produit : un truc qui marche chez moi : dans votre navigateur, prenez l'onglet contenant la carte mentale, et sortez-là de votre navigateur (remettez là éventuellement après). Ça suffit à débloquer l'ensemble, mais je ne sais pas encore pourquoi.
Cet applications utilise la norme HTML 5, notamment avec la balise <canvas> (pour dessiner...). De plus, pour piloter les canvas, la bibliothèque javascript CreateJS (version du 12 Octovre 2017, me semble-t-il). Il utilise des définitions des classes (au sens de la POO) d'après la norme introduites avec ECMAScript 2015. D'après ce site, cette version devrait fonctionner pour :
Attention, il n'est pas compatible avec Internet Explorer .
Cette appli a été développée par Raphaël ALLAIS, inspiré des travaux de mes collègues de TSI. Pour toute remarque, commentaire, bugs ou autre, merci de me contacter en cliquant sur l'icone ci-dessous :