SkillCenter
(Encore en développement)
Qu'est ce que c'est ?
Cette application est un site web interactif permettant d'évaluer et de faire un bilan "par compéténces".
Screen-shot d'une évaluation en cours...
Concrètement, un évaluateur (administrateur du site) crée un certain nombre de domaines de compétences. Chaque domaine contient des compétences. Chaque compétence est elle-même évaluée par une série de critères d'évaluation.
Les personnes évaluées peuvent avoir deux statuts. Elles peuvent être :
- des "étudiants" : dans ce cas, seuls les évaluateurs (les profs) peuvent évaluer en
cliquant sur les critères adéquats. - des "étudiants en auto-évaluation" : dans ce cas, l'étudiant lui-même peut s'auto-évaluer. Le professeur peut aussi évaluer l'étudiant de son coté, sans restriction.
Un récapitulatif graphique du pourcentage de compétences atteintes est donné en page de garde du site, au moment de la connexion de l'étudiant, lui permettant d'avoir du recul sur ses éventuelles lacunes.
Graphique récapitulatif pour un élève.
Un système de badges est également proposé : L'étudiant valide un certain nombre de "badges" (comme des "trophés") lorsque certaines actions sont déclenchées (ex : "10 critères validés", "un domaine complété", etc.)
Obtention de badges.
Installation
Avant de télécharger...
![[Logo PHP]](./images/HTML5_Logo.png){kind=logo}
![[Logo PHP]](./images/css3-logo.png){kind=logo}
![[Logo PHP]](./images/PHP-Logo.png){kind=logo}
![[Logo PHP]](./images/MySQL-Logo.png){kind=logo}
![[Logo PHP]](./images/jquery-logo.png){kind=logo}
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, cette appli utilise MySQL, qui est un système de gestion base de donndée installé sur la plupart des serveurs web (renseignez-vous auprès du votre).
Enfin, il est à noter que cette appli utilise les normes du HTML 5, du CSS3 Javascript (avec une forte utilisation de la bibliothèque JQuery et JQuery-UI qui devrait garantir une certaine stabilité sur de nombreux navigateurs). Néanmoins, vos ordinateurs clients doivent avoir un navigateur "suffisamment" récent (voir la section "Ça ne marche pas !")
Téléchargement
Télécharger la dernière version
En cliquant sur ce bouton, vous téléchargerez la dernière version depuis le dépot Github.
Pour ceux qui souhaitent faire un clone Git (plutôt que de simplement télécharger), vérifier que votre serveur a les droits d'écriture sur le dossier
Nouvelle installation
Après avoir téléchargé le dossier précédent, dézippez le paquet. L'installation se fera en trois temps :
- Téléverser (uploader) les fichiers sur votre serveur.
- Préparer sa base de données
- Lancer le programme d'installation.
Téléversez les fichiers
Avec votre logiciel de transfert favoris (FTP ou autre...) copiez tout les fichiers précédemment dézippés dans un des dossiers de votre serveur. Cela peut être :
- à la racine de votre site-web. Dans ce cas, un fois installée, l'application se lancera avec l'adresse du site web (Exemple : "http://monsite.fr").
- dans un sous-dossier de votre site web. Dans ce cas, il faudra l'indiquer dans l'adresse (Par exemple : "http://monsite.fr/sous-dossier/").
Préparer sa base de données (BDD)
Le programme utilise une base de données MySQL.
Il vous appartient de vérifier que vous avez une telle base sur votre serveur (c'est souvent le cas chez les hébergeurs classiques).
Si vous installez votre propre serveur, sachez que la connexion à la base de données utilise la bibliothèque PDO.
Il faudra donc vérifiée que cette dernière est bien activée
(Chez moi, c'est le cas par défaut).
Pour la suite, il vous faudra prendre une feuille, un stylo, et relever les informations utiles suivantes :
- l'adresse de votre serveur de base de données (Par exemple "localhost" si c'est un serveur local, "sql.free.fr" pour les utilisateurs de free, etc.) ;
- un nom d'utilisateur suceptible de se connecter à la BDD, avec des droits en écriture (Chez les hébergeurs classique, vous n'avez souvant qu'un seul nom d'utilisateur, et c'est généralement votre nom de compte) ;
- le mot de passe associé à votre compte utilisateur ; Attention : ce mot de passe sera écrit en clair dans un fichier de configuration (normalement, ce fichier n'est pas censé être accessible par un utilisateur lambda). Mais comme le risque 0 n'existe pas, il est préférable (si vous en avez la possibilité) d'avoir créé un utilisateur SQL uniquement pour Skillcenter.
- un nom de base de données (Note : chez de nombreux fournisseurs, vous ne possédez qu'une seule base de données. Chez Free, par exemple, le nom de l'unique base de données est le même que votre nom d'utilisateur). Si vous en avez la possibilité, vous pouvez créer une nouvelle BDD pour ce site.
Le programme d'installation
Une fois téléversée, et après avoir bien écrits vos paramètres de BDD,
l'application s'installe en ouvrant votre navigateur internet, et en tapant l'adresse ci-dessous puis en suivant les instructions :
http://monsite.fr/install.php
(Bien entendu, vous remplacez monsite.fr par l'adresse de votre propre site, avec les éventuels sous-dossiers).
Étape 1 : Début de l'installation
Cliquez juste sur [Commencer]
Étape 2 : Configuration générale
Rentrez le titre de votre site d'évaluation (Par exemple : "Évaluation en Informatique").Choisissez également une couleur de bandeau (noir par défaut).
Étape 3 : Paramètres de base de données
C'est là qu'il faut ressortir vos petits papiers !
- Adresse du serveur SQL : C'est l'adresse où est installé votre base de données. Si vous utilisez un serveur local, c'est sans doute "localhost". Si vous utilisez un hébergeur externe (Free, 1&1, etc.), il vous faudra vous renseigner auprès de lui. (Pour Free : "sql.free.fr")
- Nom de la base de données : C'est le nom de la BDD sur laquelle seront enregistrées les données du site.
- Nom d'utilisateur : Le site se connectera à la BDD sous ce nom. Il doit avoir des droits de lecture et d'écriture sur la BDD.
- Mot de passe : Celui associé au nom d'utilisateur. Attention : je vous renvoie à la mise en garde évoquée plus haut (concernant l'écriture en clair du mot de passe dans un fichier de configuration).
- Préfixe pour les tables : (facultatif) Vous avez la possibilité de nommer toutes vos tables SQL avec un préfixe (par exemple, "evalInfo_"). Ceci permet d'installer plusieurs fois Skillcenter sur une même base de donnée (sans que les tables n'interfère).
Voilà ! C'est fini ! Vous n'avez plus qu'à lancer SkillCenter.
Installer une mise à jour
Installer une mise à jour se fait en deux temps :
- Dans un 1er temps, il vous suffit de télécharger la dernière version, puis de la téléverser en écrasant les fichiers précédemment installés..
- Dans un 2nd temps, il vous faudra relancer la page "install.php". Normalement, vos précédentes options sont récupérées et il vous suffira de cliquer successivement sur "OK" (regarder tout de même si de nouvelles options n'ont pas été ajoutées...).
Utilisation
Connexion / Déconnexion
Pour vous connecter, que vous soyez élève, évaluateur ou administrateur, rentrez votre identifiant et mot de passe dans les deux champs en haut à droite de la fenêtre. Validez en cliquant sur le bouton vert, ou en appuyant sur [ Entrer ].
Pour se déconnceter, il suffit de cliquer sur le bouton rouge, également en haut à droite de la fenêtre.
Gestion des utilisateurs
La gestion des utilisateurs se fait en étant administrateur, en cliquant sur l'onglet Utilisateurs.
![[Icone en forme de bonhomme]](images/icone_utilisateurs.png "Icone de l'onglet 'Utilisateurs'")
L'onglet ouvert présente la liste des utilisateurs triés par classe, puis par ordre alphabétique. Pour modifier les paramètres d'un utilisateur, il suffit de mettre la souris sur la ligne de l'utilisateur pour faire apparaître un menu.
Les différents profiles d'utilisateur :
Cette liste possède un jeu de couleur en fonction du statut de l'utilisateur :
- Rouge pour les administrateurs (avec l'icône
![[Icone de Superman]](images/super.png "Icône d'un administrateur")
) :
L'administrateur a tous les pouvoirs. Il peut ajouter/supprimer des utilisateurs ou des compétences et peut évaluer les élèves. - Orange pour les évaluateurs (avec l'icône
![[Icone de Prof]](images/teaching.png "Icône d'un évaluateur")
) :
L'évaluateur peut évaluer les élèves. Il ne peut, en revanche, modifier aucun paramètre quel qu'il soit. - Bleu pour les élèves classiques (avec l'icône
![[Icone d'élève]](images/student.png "Icône d'un élève classique")
- Profile par défaut) :
L'élève "classique" peut simplement consulter les évaluations qui lui ont été données. - Vert pour les élèves auto-évaluateurs (avec l'icône
![[Icone d'élève en auto-évaluation]](images/student_autoeval.png "Icône d'un élève auto-évaluateur")
) :
L'élève "auto-évaluateur" peut, en plus de consulter les évaluations, s'attribuer lui même des évaluations sur ses compétences.
Pour changer le statut d'un utilisateur, il faut cliquer successivement sur l'icône de droite (dans le menu d'un utilisateur), jusqu'à obetnir le bon profile.
Pour les connexions un peu lente, il ne faudra pas cliquer trop vite...
Paramétrer les compétences
parametrage
Evaluation / Bilan
Evaluation
Historique : Modifier une évaluation
Historique
Configuration
Les paramètres réglables
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 :
Configurations principale
| 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"). | "" |
Graphismes et apparance
| 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). | "§" |
Animations
| 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.
Gérer les utilisateurs
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 !
Ça ne marche pas ?
Le message "⌛ Chargement..." reste affiché, et rien d'autre ne se passe...
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 :
- Soit la connexion est VRAIMENT très lente. Dans ce cas, le script Javascript n'a pas encore eu le temps de créer le dessin. Soyez patient... Ou changez de fournisseur d'accès.
- Soit vous n'avez pas activé Javascript. Dans ce cas, il vous faudra l'activer dans les configuration de votre navigateur.
- Soit c'est qu'il y a un bug dans le script Javascript. Dans ce cas, c'est de ma faute. Merci de reporter les bugs via la messagerie en bas de page !
Au bout d'un moment, on ne peut plus cliquer sur rien... (seule le "drop & drag" fonctionne)
Je ne sais pas... 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.
Navigateur trop ancien ?
Cet applications utilise la norme HTML 5, notamment avec la balise <canvas> (pour dessiner...). De plus, pour piloter les canvas, la bibliothèque javascript kineticJS V5.1.0. D'après ce site, cette version devrait fonctionner pour :
Firefox (V2.0 et +)
Chrome (V4.0 et +)
Internet Explorer (V9 et + ; Il parait qu'un pluggin existe pour la V8)
Opéra (V9.0 et +)
Safari (V3.1 et +)
Pour les versions récentes d'Internet Explorer, j'ai découvert qu'on pouvait changer le comportement d'IE. En effet, il est possible de simuler les anciennes versions du navigateur (pour lesquelles la carte mentale ne foncitonne pas). Sur mon lieu de travail, la version 7 était utilisée par défaut (alors que nous avions IE9). Le comportement "récent" peut être rétabli dans les options d'IE.
A propos
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 via le formulaire suivant :
À faire...
- Permettre le renommage des bulles,
- Insérer des nouvelles bulles directement à partir de la carte mentale,
- Un bouton pour télécharger les fichiers sans les ouvrir dans le navigateur,
- Mettre des lecteurs (image, son, vidéo...) directement dans les bulles,
- Gérer les évênements "touch" pour tablette et smartphone,
- Déconnexion automatique au bout d'un certain temps.
- Séparerer le "index.php" en deux fichiers, pour permettre une éventuelle intégration dans une autre page.
- Rendre l'ajout des utilisateurs plus simple...
- Créer des bulles "fantôme" (sans qu'elles n'existent sur le disque dur)...
- Sécuriser la 1ere connection.