Ça fait un moment que je parle de certaines de mes applis au fil de billets ou de commentaires, en particulier de celle que j'utilise au boulot. Un très long billet totalement dispensable destiné à ceux que l'enseignement intéresse (ou les logiciels dans l'enseignement)

Je me suis dit que ça pouvait intéresser des gens de voir avec quoi je taffe.

Les attentes (le pourquoi du comment j'ai décidé de faire mon propre truc)

Tout est venu de l'aspect pour le moins instable et aléatoire des logiciels et environnements proposés dans le cadre de mon boulot que ce soit au niveau du ministère, de l'académie, du département ou même du collège.

1- du problème des évolutions 👎

En gros, on change soit de logiciel soit d'environnement soit de machines à peu près tous les ans ou les deux ans, ce qui induit une certaine appréhension au niveau de la conservation de nos données: les exercices réalisés dans les exerciseurs disparaissent, les données et documents de l'ENT également... bref: c'est du taf inutile à se retaper tous les ans (ou deux ans) 💩

2- du problème des logiciels 👎

Mon autre souci, c'est que les logiciels proposés sont rarement utilisés par ceux qui les codent puisqu'il s'agit d'applis à caractère administratif (appel/cahier de texte etc) ou pédagogiques (exerciseurs / stockage de données / expos etc)

Résultat, l'UI est merdique et il est impossible de faire la moindre opération sans un nombre de clics qui à lui seul justifierait qu'on vire le bureau d'études. Quand tu dois swapper clavier souris trois fois pour juste une case à cocher, on a un problème. 😬

Ce problème vient du fait qu'à vouloir donner la possibilité de réaliser des choses complexes, on complexifie inutilement la réalisation des choses simples... or, on fait plus souvent des cases à cocher ou des cases de texte à remplir que des formulaires insérés dans des vidéos. 😭

3- de mes attentes persos quant aux applis

Pour ma part, j'attends d'une appli destinée aux élèves et aux professeurs que:

Pour les élèves:

1. la consultation et les exercices se retrouvent sur la même plate-forme et dans des espaces clairs
2. les élèves n'aient pas à se logger pour pouvoir consulter ou s'exercer ( limiter la friction de travail selon mon adage: «si c'est galère il va pas le faire» 😅)
3. ça passe partout y compris et surtout SUR LEUR PITIN DE TELEPHONES ! Quand tu vois l'ENT sur mobile, ça te donne des envies de suicide collectif.
4. que ce soit clair, lisible et simple.
5. que tous les documents / pdf etc utilisés lors d'un cours soient dispo depuis un seul lien de partage

Pour moi:

1. pas de perte de temps au moment de mettre en ligne: je copiecolle le lien de partage de mon document dans l'ENT et c'est tout.
2. pas de perte d'énergie au moment de réaliser les documents et travaux (limiter la friction d'usage selon mon adage «la vie est trop courte pour se faire chier deux heures sur un document»)
3. mise en ligne rapide et simple des documents (et possibilité de partager des documents sur une page sans la réaliser vraiment: génération auto de la page de partage)
4. pas de perte de mon boulot: c'est sur mon serveur, pas sur une merde académique hébergée aux USA qui va se perdre ou être fliquée.
5. pas de flicage ni de moi ni de mes élèves.
6. rapidité et simplicité de la création d'exercices

Naissance de Documentos

Il s'agit d'une appli en ligne de consultation libre des documents utilisés en cours.

Côté élève, un lien de partage conduit à la page que j'utilise en classe pour faire cours: il a donc toutes les ressources pour revoir la leçon ou récupérer le cours en un seul lien.

Cette même page me permet de mettre une image en plein écran en un clic, de faire plusieurs diapos simplement etc.

Côté enseignant, elle fournit un explorateur de fichiers , un éditeur de pages etc. On peut ainsi créer un nouveau dossier de travail pour les 5ème, y déposer en une fois mp3, images etc, y créer une page dans laquelle on organise le tout et même créer des exercices numériques sans que ça prenne plus de temps de le faire là que de le faire sous libreoffice (souvent, la version papier me prend grave plus de temps que la version numérique en fait 😅)

Ok, mais ça a quelle tronche ton truc ?

La racine de la page d'accueil donne accès à tous les niveaux

et dans chaque niveau, une page unique liste tous les documents disponibles. Quand le prof cherche le document du jour, il peut filtrer en tapant une partie du nom du dossier contenant lesdits documents.

Une fois sur le document, l'élève (ou le prof en classe) a une page claire avec documentation, questions, liens vers les fiches de révision et pdf éventuellement distribué.

L'enseignant peut également ajouter des éléments de formulaire dynamiques permettant de sélectionner, cocher, ordonner, compléter

Vous noterez au passage qu'on peut ajouter un bouton permettant de se rendre directement à un temps T d'une vidéo ou d'un enregistrement, pour guider les élèves.

J'ai ajouté un bouton servant à changer la police de caractères pour l'opendyslexic:

Et côté admin alors ?

Le prof a un filemanager pour créer des dossiers et des fichiers simplement, uploader en glisser-déposer, éditer des fichiers. L'accent a été mis sur la rapidité et la simplicité d'utilisation.

Si on se contente d'uploader sans mettre de page, le lien générera une page complète avec les documents. Sinon, on ajoute une page html qu'on édite ensuite (deux clics)

Tous les fichiers constituant un «document de classe» se trouvent dans le même dossier par défaut: si on crée des sous-dossiers dans celui du document, chaque sous-dossier devient une diapo indépendante générée comme des pages individuelles. Lorsqu'on se rend sur la page de partage, on passera de l'une à l'autre avec les flèches du clavier ou celles apparaissant sur les côtés de l'écran... pas besoin de se faire chmir à créer les diapos, les lier que sais-je.

On a donc: ROOT> niveau> document> fichiers ou ROOT> niveau> document> diapo1>fichiers , ROOT> niveau> document> fichiers>diapo2>fichiers etc.

Et la réalisation d'exercices alors ?

Pour la mise en page, on utilise markdown, donc, du texte brut. Hors de question pour moi de devoir me prendre le chou avec des mises en page compliquées.

Sur ce principe, pas de boîtes de dialogue, de clics multiples pour créer des exos: tout se fait par deux types de «balises» sans lâcher son clavier:

les {{}}

Propres à mon framework perso, je les ai adaptées à Documentos:

• pour insérer un fichier à un endroit: {{fichier.ext}} et c'est tout.
• pour insérer tous les fichiers d'un type {{*.jpg}}, et si on ne se souvient pas bien du nom {{*moncul.jpg}} fonctionne très bien.
• pas de boutons ou balises spéciales selon les documents: documentos se démerde seul... ainsi {{fichier.jpg}} crée une image qui passe en fullscreen au clic, {{fichier.mp3}} crée un lecteur audio, {{fichier.mp4}} crée un lecteur video etc...
• on peut ajouter facilement des choses plus poussées en insérant des {{fichier.css}} ou {{fichier.js}}spécifiques.
• L'appli offre certaines constantes accessibles de la même façon: {{BLEU}} change le fond en bleu, {{FULLSCREEN}} passe en fullscreen dès le chargement, {{FECHA}} ajoute la date du jour en espagnol...

les []

Les éléments de formulaire sont générés via des commandes gu genre {{app->flashcards("")}} qui ne sont pas super simple à mémoriser ou sexy à voir. Du coup, j'ai créé des aliases plus simples qui utilisent les crochets. Ainsi:

• une case texte ? [texte à trouver]
• Il faut accepter plusieurs réponses ? [réponse1+réponse2]
• une liste déroulante ? [choix 1,choix 2, +bon choix,choix3]
• Une case à cocher ? []texte d'une case à ne pas cocher], [+]texte d'une à case cocher]
• un verbe à conjuguer ? [conjugaison:llamo,llamas,llama,llamamos,llamáis,llaman]
• une phrase à ordonner ? [ordonne:La primera pelota está en la estantería.]
• des flashcards ? [flashcards:texteface:textedos;texteface2:textedos2]
• Une liste de mots à trouver ? [mots:textefr:texteesp;textefr2:texteesp2]
• Un mot avec traduction ? [texte es=texte fr]
• Un bouton pour aller au temps T d'un media ? [espana.mp3>0:07] ou [>0:07] si un seul media est présent sur la page.
• Un bouton pour stocker les réponses de l'élève ? [envoyer]
• Un enregistreur pour les élèves n'ayant pas d'appli d'enregistrement ? [enregistreur]

Le fait de ne jamais quitter le clavier supprime la plupart des clics et la perte de temps du passage entre clavier et souris. ça s'avère redoutable dès qu'on a un peu l'habitude: on ne s'occupe que du contenu sans jamais perdre de temps à chercher comment faire (friction d'utilisation minimale)

Tu as parlé de stocker les réponses des élèves ! ET LE RGPD ? 😱

T'inquiète, mon con de chef m'a suffisamment fait chier avec ça pour que je ne coure aucun risque (faire une recherche sur ce site avec le mot clé «j'abandonne» 😡):

1. rien n'est hébergé hors serveur,
2. je n'utilise rien que je n'ai fait moi-même (aucune lib notamment)
3. les données des formulaires remplis qui sont sauvegardées le sont dans un fichier anonymisé: à aucun moment l'élève ne renseigne son nom et à aucun moment une donnée perso n'est utilisée pour le nommage de fichiers. Quand l'élève a envoyé le formulaire, le site lui donne un code à fournir au prof afin qu'il ait accès à la copie.

J'utilise Documentos depuis 2018 et je le modifie régulièrement. L'utilisation au quotidien est top et lors du confinement, je n'ai pas eu à changer grand-chose pour que le distanciel soit possible... je pouvais fournir presque en temps réel et mes élèves ont pu bosser dès les premières minutes de confinement sans être déroutés et depuis n'importe quel appareil (là où l'ENT était à genoux dès 8:10)

Pas de lien ?!

Je ne fournis pas le code de Documentos pour plusieurs raisons:

1. c'est codé pour moi, avec mes habitudes... ça peut ne pas convenir à d'autres
2. c'est fait pour l'espagnol: on peut l'adapter, mais faut coder
3. il y a toujours des bugs par ci par là: je m'en accommode parce que je n'ai pas le temps de coder plus que ça et que ça ne touche pas le côté élève... mais ce serait chiant pour un autre.
4. j'ai beau essayer de maintenir la cohérence et la logique du code, le patch à la truelle nécessite de reprendre certains aspects.
5. pas de lien de démo car les documents fournis aux élèves sont copyrightés et que je ne veux pas d'emmerdes avec les éditeurs de bouquins

Après, on peut discuter, hein 😉

Bon, fô qu'jeul lis... un jour

Pas bête du tout ça: quand on met en place un cache en PHP, on crée le contenu s'il n'existe pas ou on le lit puis le renvoie s'il existe.

Grâce à un .htaccess bien placé, on peut servir directement le fichier s'il existe et on renvoie vers la page php censée le générer s'il n'existe pas (erreur 404)

Du coup, on n'exécute du PHP que si le contenu n'existe pas.

Pas con du tout !

Merci SebSauvage (et le Duke ) pour cette page dans laquelle je découvre que PHP propose levenshtein() en natif pour calculer la proximité entre deux chaînes...

En ce qui concerne la réducton phonétique, c'est pas forcément simple, en effet (surtout pour le français ) !

Pour un jeu de rôles que j'avais fait quand j'étais jeune (au tout début du jurassique), j'avais fait un petit algo de «traduction» dans la langue du jeu et ça passait par une réduction phonétique puis par une substitution de voyelles apparentées ou de consonnes apparentées, ce qui donnait toujours quelque-chose de prononçable...

Haaa, c'est intéressant ça ! Merci ! <?php echo date(DateTime::RFC2822); ?>

Le confinement nouveau est arrivé et avec lui plein de nouvelles raisons de se poser des questions exitentielles (non, j'ai pas fait de faute) (GAG)

Pour y répondre et vous guider dans vos choix, plutôt que de vous fier aux oracles, haruspices et autres politiciens qui vous noieront sous des mensonges, des billevesées voire même des promesses électorales, pourquoi ne pas utiliser la bonne vieille 8 ball magique ?

Du coup, je vous en propose une. Sous forme d'API. Oui.

Tu poses ta question dans ta tête, tu vas sur https://api.warriordudimanche.net/8ball et tu as ta réponse. Par contre, elle est parfois un peu franche...

Bon, je lis ça ce soir...

Peut-être.

Aujourd'hui, je vous passe un petit bout de code que j'ai fait autant par défi personnel qu'avec l'objectif de l'autonomie pédagogique

J'ai pas les mots

Une petit appli qui génère une grille de mots-mélés à partir du titre et de la liste de mots: on peut l'utiliser via la GUI minimale...

... ou en «API» avec les arguments GET suivants:

• title: le titre (opt.)
• mots : les mots séparés par une virgule
• size : la taille de la grille
• list : la liste de mots à trouver (ou n'importe quelle autre consigne)
• download: télécharger l'appli pour auto hébergement (télécharger )

Et ça fait des chocapics

ça donne ça :

Bon, on ne m'enlèvera pas de la tête que c'est pas super intuitif, ni super simple, mais bon, je n'ai trouvé que ça qui fonctionne...

Mon souci

1. Je crée une image côté navigateur avec canvas
2. je veux l'envoyer à mon serveur pour stockage

On pourrait croire que c'est simple, hein... ben j'ai pas trouvé, personnellement.

J'ai essayé

1. de transformer le canvas en blob et de l'envoyer via un formdata
2. de transformer le canvas en blob et de l'envoyer comme un objet simple
3. de transformer le canvas en DataURL et de l'envoyer via un formdata
4. de transformer le canvas en DataURL et de l'envoyer comme un objet simple

Mais à chaque fois, j'ai pas été foutu de récupérer les données côté PHP (bon, je me doute qu'il doit y avoir un pacson de trucs que j'ignore encore, hein...)

Ensuite, j'ai pensé

«et si je passais les données au format base64, je devrais pouvoir les récupérer facilement...» car je pratique couramment un optimisme ridicule au sujet duquel il m'arrive encore de sombrer dans la stupéfaction à grand fracas...

Dont acte: je recommence à farfouiller avec des fetch, des posts pis tout mais sans succès: les données décodées font une image invalide.

en désespoir de cause

Je décide de procéder moins élégamment: je copie les données vers un formulaire caché que je poste en target blank pour pas perdre ma page de travail... Oui, je sais, c'est sale, c'est moche, c'est pas secure, j'en ai conscience, c'est pas la peine de m'enfoncer, j'ai déjà assez honte comme ça...

Je reçois bien de la base 64, je décode... Et l'image n'est toujours pas valide. Puis une recherche m'apprend qu'il faut virer l'en-tête base64 côté serveur avant de décoder pour que ça fonctionne...

Je teste et... ça marche.

SUPER INTUITIF MERCI

Un excellent article, très simple d'accès. Résumé pour mémoire mais je vous conseille d'aller lire le tout tant c'est clair et bien documenté:

1.Tout typer

... pour pouvoir compter sur le type des données

• Les paramètres des fonctions function moncul(string $str) pour éviter de vérifier les paramètres puisqu'un type erroné provoquera une erreur
• Les valeurs de retour des fonctions function moncul(string $str): int car en cas de retour d'un autre type, il y aura erreur. (pour les fonctions ne retournant rien, :void )
• Les propriétés de classe : private int $mon_cul; pour qu'une erreur se déclenche en cas d'initialisation d'un type erroné.

2.Protéger ses classes par défaut

• ajouter «final» à la déclaration de classe final class monCul(){ pour éviter tout héritage, même fortuit.
• laisser ses propriétés en private par défaut
• laisser ses méthodes en private par défaut jusqu'à ce qu'on ait besoin de les appeler de l'extérieur

3.Utiliser les comparaisons strictes

... pour éviter les confusions false/0 etc

4.Se passer des «if»

En utilisant l'opérateur ternaire condition ? valeur retournée si true : valeur retournée si false;

Pourquoi ? Parce que c'est plus court mais aussi parce qu'on peut placer la condition directement dans une assignation ou à la place d'un paramètre: $count += ($value === CONTROL_VALUE) ? 1 : 0;

Par contre, je trouve qu'on y perd BEAUCOUP en lisibilité et en organisation.

5.La fonction « sscanf »

Pour analyser une chaîne selon un format (et à la place d'un explode plus lourd). C'est l'inverse de printf(). ( https://www.php.net/manual/fr/function.sscanf.php )

6.L'inversion de valeurs en une ligne

et avec autant de valeurs qu'on veut

[$var1, $var2, $var3, $var4] = [$var4, $var3, $var2, $var1];

7. L’opérateur de décomposition « … »

$intersection = array_intersect(...$bigArray); au lieu de $intersection = array_intersect($bigArray[0], $bigArray[1], $bigArray[2]); // Etc.

8. Toujours ajouter un compteur de boucle pour sortir des while

Ça m'a rappelé un épisode de BigBang Theory dans lequel Sheldon est prisonnier d'une boucle dans son algorithme HowToMakeANewFriend... (c'est Howard qui l'en sort en implémentant un compteur comme condition de sortie).

$block++;
    if ($block > 1000) {
        break;
    }

9.Utiliser les fonctions liées aux tableaux

Je plussoie vigoureusement ce point particulier

Avant de se lancer dans un traitement de tableau en créant une fonction ou une méthode exprès, relisez la doc de toutes les fonctions commençant par Array_ ... histoire de ne pas réinventer la roue.

10.Manipuler les tableaux avec les callbacks et les Collections

Pour manipuler un tableau, penser à utiliser array_map plutôt que foreach si c'est possible:

• utilisation simple array_map('trim',$tableau)
• fonction anonyme ```array_map(function($k){ code de traitement },$tableau);
• avec une méthode array_map(array($instance, 'methode'), $tableau)

Au menu du jour une API qui permet de memiser une image du ouebe en une ligne...

Koitesce

Ben, je viens de vous le dire ! vous m'écoutez ou pas quand je parle ?!

Il s'agit de pouvoir fabriquer un meme en un minimum de temps: une image glanée sur le net et pouf, c'est parti.

Comment que ça marche-t-il ?

Les arguments GET sont les suivants:

• t: le texte à afficher (on peut mettre des /n pour sauter des lignes)
• i: l'url de l'image et c'est tout.

Comme pour fancytation et les autres API:

• help: affiche une aide
• download: permet de télécharger le script php de l'api

Cerise sur le cageot

Vous pouvez générer un bookmarklet destiné à utiliser l'API en utilisant l'argument $_GET bookmarklet ce qui donnera :

Copier ce lien de bookmarklet: Mematic

Ainsi, il suffit d'utiliser la fonction «afficher l'image» de votre navigateur puis de cliquer sur le bookmarklet pour entrer le texte du meme et récupérer l'image générée.

Allez dans le pet du saigneur

MMMouaip... Oui, c'est minimaliste, mais ce n'est pas un CMS: il ne permet pas du tout de gérer le contenu, il se contente de mettre en HTML des fichiers txt écrits en MD et collés sur le serveur via FTP...

En gros, c'est un simple script php qui liste le contenu d'un dossier à l'aide d'un glob, parse le contenu à la recherche de balises normailsées (author etc) et génère le HTML à l'aide de la lib parsedown.

Alors, ce n'est pas pour autant que c'est nul, hein: c'est simple et uber minimaliste, en effet... C'est bien que ça existe.

Mais ce n'est pas un CMS, on ne peut RIEN gérer sans accès FTP, on ne peut pas utiliser de plugins, de configuration etc...

(...)

Comme je le disais dans le billet précédent à propos de SVGBox, l'idée était bonne mais le poids était rédhibitoire.

Pourtant, ça peut être sympa d'avoir un catalogue d'icônes prêtes à servir et dont on puisse altérer la couleur, sans compter que ce serait une bonne alternative aux webfonts tout en étant plus accessible.

Donc, j'ai récupéré le pack d'icônes de fontAwesome et j'ai bidouillé une API qui permette de faire la même chose que SVGBox.net, à savoir obtenir une icône svg dans la couleur que l'on souhaite.

Par exemple:

api.warriordudimanche.net/iconeleon/?i=headphones donne:

et si on ajoute le paramètre c on peut changer la couleur: api.warriordudimanche.net/iconeleon/?i=headphones&c=red

La couleur peut-être au format HTML, un nom de couleur css ou un rgba quelconque...

api.warriordudimanche.net/iconeleon/?i=headphones&c=rgba(255,0,255,0.5)

Comme pour fancytation

Toute icône modifiée est sauvegardée en cache pour éviter une surcharge du serveur

help: affiche une aide

iconlist: renvoie la liste des icones au format json

search=string: renvoie le résultat de la recherche au format json

download: permet de télécharger le script php de l'api

Et en plus

Je vous ai ajouté un frontend minimaliste pour rechercher les icones dans les 1615 du pack.

liens

• le front: http://api.warriordudimanche.net/iconeleon/
• Téléchargement du script: http://api.warriordudimanche.net/iconeleon/?download
• La «doc» : http://api.warriordudimanche.net/iconeleon/?help

Voilà

Du coup, si ça peut être utile, n'hésitez pas à vous servir voire à proposer un frontend plus... comment dire ? abouti ?