Allez, pour une fois, j'ai un peu de temps devant moi, je vais éplucher un peu la lib Image magick dont je parlais il n'y à guère...

La base

charger UNE image

Simple: pas besoin de plusieurs fonctions selon le format, il suffit de $images = new Imagick('image.jpg');

charger DES images (et là c'est fort)

Même pas nécessaire de passer par un foreach, on fournit le tableau des fichiers voire directement un glob: $images = new Imagick(glob('images/*.JPG'));

Sauver une image

$im->writeImage('image.jpg');

Faire une miniature

Si on laisse une dimension à 0, les proportions sont conservées (quand tu vois la merde que c'est avec GD !) $image->thumbnailImage(100, 0);

Output une image

header('Content-type: image/jpeg');
$image = new Imagick('image.jpg');
# ici on effectue un traitement puis on sort le résultat
echo $image;

Récupération d'infos sur les images

• taille $im->getImageWidth() $im->getImageHeight()
• format $im->getImageFormat()
  • 🆒 ⮕ pour fixer le format de l'image, c'est juste $im->setImageFormat('png'); ! 😍
  • 📘 on peut fixer le type de compression et l'intensité de celle-ci avec ->setCompression() et ->setCompressionQuality()

création d'une nouvelle image

$im->NewImage(largeur,hauteur,couleur de fond);

création d'une couleur

Comme pour GD, il faut créer un objet couleur dans les traitements d'image, mais c'est plus simple qu'avec GD (et plus complet): il suffit de passer une couleur selon les normes CSS. Du coup, la transparence n'est pas gérée par une connerie de paramètre «alpha» mais simplement par ... rgba()... 💖

$couleur=new ImagickPixel("white");
$couleur=new ImagickPixel("#FFF");
$couleur=new ImagickPixel('rgb(255,255,200)');
$couleur=new ImagickPixel('rgba(255,255,200,0.5)');

🆒 ⮕ Ça peut paraître compliqué, mais en fait, dans les fonctions où on est sensé utiliser ImagickPixel, je me suis aperçu qu'on pouvait tout simplement passer une string contenant la couleur css... elles se démerdent seules. 😍

Traitements

Ajouts

• de bordure ->borderImage(couleur,largeur bords verticaux, largeur bords horizontaux): $im->borderImage(new ImagickPixel("white"), 5, 5);
• de texte :
  • ->setFont() : $im->setFont("example.ttf");
  • ->annotateImage(objet ImagiDraw,x,y,angle,texte) : là il faut utiliser un objet ImagiDraw, que je n'ai pas encore regardé: https://www.php.net/manual/fr/class.imagickdraw.php
• de stéganographie (cacher un filigrane dans une image) ->steganoImage():

Modification de couleurs

• sepia ->sepiaToneImage(force) : une valeur raisonnable est 80 (sic)
• solarisation ->solarizeImage(force)
• négatif ->negateImage(gris): $im->negateImage(0);
• niveaux
  • $im->normalizeImage();
  • $im->autoLevelImage();
• gamma ->gammaImage(niveau) : $im->gammaImage(5);
• contraste $im->contrastImage(niveau)
• luminosité et contraste $im->brightnessContrastImage(niveau luminosite, niveau contraste);
• égalisation $im->equalizeImage()
• coloriser ->colorizeImage(couleur,opacite) : $im->colorizeImage("red",0.5); 🤬 pas réussi à l'utiliser pour ce test...

Modification de taille et d'orientation

• redimensionner :
  • ->resizeImage(largeur,hauteur, filtre, flou) : $i->resizeImage(250,0,Imagick::FILTER_POINT,0);
    • ⭐ note 1: le filtre influe sur la qualité et sur la vitesse: voir https://www.php.net/manual/fr/imagick.resizeimage.php#94493
    • 🆒 note 2 : si on laisse une des dimensions à 0, les proportions sont conservées
  • ->scaleImage(largeur,hauteur): pas encore compris la différence avec la précédente
  • recadrer ->cropImage(largeur,hauteur,x,y): $im->cropImage(200,200,50,50);
  • 💖 créer une miniature à la taille donnée en recadrant l'image autour du centre ->cropThumbnailImage(largeur,hauteur)
• retourner :
  • $im->flipImage() pour retourner horizontalement
  • $im->flopImage() pour retourner verticalement
• pivoter ->rotateimage(color, $angle): $im->rotateImage(new ImagickPixel('#00000000'), 75);

Modifications de qualité

• modification d'opacité ->setImageOpacity(0-1) : $im->->setImageOpacity(0.3);
• netteté ->sharpenImage(rayon, deviation,canal):
• amélioration ->enhanceImage()
• flou :
  • flou tout court ->blurImage(rayon, décalage): $im->blurImage(5,2);
  • gaussien ->gaussianBlurImage(rayon, deviation) : $im->gaussianBlurImage(5,2);
  • de mouvement ->motionBlurImage(rayon,deviation,angle) : $im->motionBlurImage(5,5,45);
• réduction du nombre de couleurs ->posterizeImage(nb de couleurs, 0/1) :$im->posterizeImage(5,0);
• ajout de bruit ->addNoiseImage(type) : `$im->addNoiseImage(imagick::NOISE_GAUSSIAN ); voir les constantes de type de bruit

Modification d'aspect et déformations

• aspect crayon $im->sketchImage(rayon, deviation, angle);
• aspect fusain $im ->charcoalImage(rayon, deviation);
• aspect emboss ->shadeImage(gris, angle, hauteur):
  • $im->->shadeImage(1, 90, 2); # emboss + image grisée
  • $im->shadeImage(0, 90,2) # emboss sur l'image d'origine (couleur)
• peinture à l'huile ->oilPaintImage(rayon) : $im->oilPaintImage(5);
• détection de bords ->edgeImage(rayon) : $im->edgeImage(5);
• vagues ->waves(amplitude,longueur): $im->waveImage( 10, 10);
• déformation ->distortImage(methode, arguments[],0) : voir les constantes de déformation

interactions d'images

• clonage d'une image ->clone(): $imageclonee=$image->clone();
• mélange d'images ->compositeImage($image,composition,x,y,[canal]): $im->compositeImage($autreimage, imagick::COMPOSITE_OVER, 0, 0); (la composition, la façon de mélanger les images, peut être une de celles-ci https://www.php.net/manual/fr/imagick.constants.php#imagick.constants.compositeop)

Conclusion

Image Magick me semble particulièrement bien nommée tant les possibilités sont énormes et la simplicité d'utilisation étonnante: on sent une volonté de se simplifier la vie lors de l'utilisation... c'est juste beau.

Je voulais mettre une image de chaque effet dans les descriptions mais:

1. ça prenait une place de ouf
2. je préfère reprendre certaines de mes applis/api avec imagick
3. j'ai plus le temps, les autres arrivent
4. j'ai la flemme.

[EDIT] En fait, j'ai fait une page de test même si tout n'est pas concluant : http://test.warriordudimanche.net/imagick/

Tout le monde connaît les licences libres habituelles mais il y en a de moins connues et - souvent - moins compliquées à comprendre : petit florilège...

Les licences les plus libres

---

Les licences les plus WTF

---

Les plus utilisables en vrai

Sources :

• Merci à Bendia qui m'a fourni les deux dernières sur le mammouth
• https://javascript.plainenglish.io/11-funny-software-licenses-you-might-have-never-heard-before-87e702d31388 (article ouvert aux seuls abonnés, je copie ici gratos )
• https://github.com/benlk/misc-licenses

(...)

Ouate ?

Après avoir fait goofi puis Getlib j'ai codé vite fait une petite «api» destinée à ramener en local n'importe quelle ressource distante... «quelle différence avec getlib ?» allez-vous me demander sur un ton narquois à propos de la cruauté duquel je tairais scrupuleusement tout commentaire.

J'ai eu envie de faire ça car j'en avais assez de passer par le combo

bouton droit sur une ressource ➜ télécharger ➜ envoyer sur mon site ➜ faire un lien ou une img

Du coup, il suffit d'ajouter l'adresse de l'api à l'url vers la ressource distante... Donc http://insta.com/image.jpg devient par exemple http://api.warriordudimanche.net/fetchit?url=http://insta.com/image.jpg

Fetchit va récupérer la ressource en local et vous servir cette version au lieu de la distante. Comme d'hab' si cette ressource a déjà été récupérée elle n'est pas re téléchargée.

Le deuxième effet kiskool (paye ta réf de vieux) c'est que du coup, comme getlib, ça permet de récupérer toute lib en local et être plus RGPD friendly.

Examples:

utiliser directement une image distante : <img src="http:www.distantserver.com/pic.png"/> ➜ <img src="http://api.url.com?url=http:www.distantserver.com/pic.png"/>

lien vers une ressource distante : <a href="http:www.distantserver.com/file.pdf"> Link to distant file</a> ➜ <a href="http://api.url.com?url=http:www.distantserver.com/pic.png"> Link to distant file</a>

utiliser une lib hébergée sur un CDN distant : <script src="http:www.distantnastyserver.com/lib.js"></script> ➜ <script src="http://api.url.com?url=http:www.distantnastyserver.com/lib.js"></script>

Con figue ?

Afin d'éviter que votre server ne se retrouve floodé par des fichiers vidéos 8K à 60 gigots l'unité, il y a une limite de taille configurée dans la constante SIZE_LIMIT, fixée par défaut à 10 Mo.

Le code ?! c'est... le code.

Ceux qui aiment farfouiller verront que cette fois, j'ai fait une classe fetchit_class.php qui se charge de tout. Son fonctionnement est tellement simple que je me fissure même pas le joufflu à vous le détailler, démerdez-vous.

License

Comme d'hab', c'est cadeau... Utilisez, partagez, modifiez... juste respectez la Dont be a dick licence

donne le ouade

Comme tout ça n'a de sens que si on héberge soi-même, vous pouvez récup' le zip qui va bien ici : https://api.warriordudimanche.net/fetchit/?download

Le mot final

Mes chers cons-patriotes, non aux fuites de données, vive le oueb libre et participatif et vive la france et bisou !

https://antoineboursin.fr/courses/creez-un-editeur-de-texte-wysiwyg

La vie est mal faite: je découvre document.execCommand() permettant de faire du richtext dans un élément contentEditable juste quand il est officiellement déclaré obsolète...

Bon, en même temps, sur stackoverflow, the holy baïbol, certains affirment que:

1. oui, il est obsolète mais n'a pas d'alternative
2. execCommand semble requis pour tout navigateur prétendant sortir sur le marché,
3. son implémentation semble sujette à variations selon le navigateur (le fameux internet explorer syndrome de triste mémoire)

Petit bout de code fait à la va-vite dans le but de vérifier la validité des liens d'une page. Mon objectif est de pouvoir à terme montrer automatiquement les liens ne répondant plus sur la page où je regroupe les liens de téléchargement illégal

Le bout de code actuel

Dans le code ci-dessous, j'utilise fetch et les promesses pour lancer des requêtes afin de styler les liens testés:

function checkLinks(nodelist){
    function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        }).catch(function(error){
            return error.status;
        });
    }
    if (!nodelist){
        checkLinks(document.querySelectorAll('.checkLink'));
        return;
    }
    for (let obj of nodelist){
        if (obj.tagName=="A"){
            checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
        }else if (obj.hasAttribute("src")){
            checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
        }else{
            checkLinks(obj.querySelectorAll("*[href],*[src]"));
        }
    }
}
checkLinks();

Explication rapide

Étape 1

J'ai d'abord fait une fonction qui appelle une URL et renvoie une promesse qui, une fois résolue, renverra le statut de la requête. On y retrouve .then qui renvoie le statut d'une requête qui aboutit et .catch qui renvoie celui d'une requête se soldant par une erreur.

function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        }).catch(function(error){
            return error.status;
        });
    }

Les plus coquinous d'entre-vous me feront remarquer à juste titre que, vu ce que je renvoie, je pouvais me contenter de

function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        });
    }

Ceci dit, en prévoyant les deux cas, je m'autorise à gérer le retour différemment selon si ça aboutit ou pas (par exemple retourner «ok200» ou «error404»

Étape 2:

Ce block n'est là que pour simplifier la vie de l'utilisateur en lui évitant de procéder lui-même au querySelectorAll()

if (!nodelist){
        checkLinks(document.querySelectorAll('.checkLink'));
        return;
    }

Étape 3:

Je parcours la nodeList en vérifiant l'URL passée en href (pour les A) ou en src (pour les img par exemple).

Le dernier cas est celui où l'on souhaite vérifier les liens contenus dans un div portant la classe .checkLink : il suffit d'appeler la même fonction de façon récursive en lui fournissant le nodeList des liens contenus das le DIV en question. (ça permet de vérifier un grand nombre de liens sans avoir à leur ajouter individuellement la classe .checkLink, ce qui est particulièrement utile quand on publie des articles en utilisant markdown )

for (let obj of nodelist){
        if (obj.tagName=="A"){
            checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
        }else if (obj.hasAttribute("src")){
            checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
        }else{
            checkLinks(obj.querySelectorAll("a,img"));
        }
    }

Comment on l'utilise ?

Il suffit de mettre la classe .checkLink à tout objet dont on veut tester les liens et de coller la fonction dans la page puis de l'appeler via un checkLinks(); de bon aloi.

En l'état, la fonction ajoutera une classe .status200 pour les liens ok ou .status404 pour les URL qui ne répondent plus.

Il ne reste plus qu'à styler ces classes en changeant la couleur, le fond ou en ajoutant des emoji avec un petit content. On peut même éventuellement masquer un objet dont l'URL ne répond pas...

Limites

Le script étant en JS, il se heurte évidemment aux règles de la politique CORS: toute requête hors du domaine en cours va échouer à moins de redéfinir le CORS dans le Head de la page via

<meta http-equiv="Content-Security-Policy" content="Content-Security-Policy:..."/>

Licence

Comme d'habitude, il s'agit autant d'un proof of concept que d'une truc utile... en tout cas, n'hésitez pas à en faire rigoureusement ce que vous voulez: c'est cadeau...

Parfois, un post en entraîne un autre... Ainsi, tu t'es mis à coder un BOT presque par inadvertance - avec les difficultés qu'on connaît - et tu le partages parce qu'il n'y a pas de raison que l'auteur soit le seul à pleurer... pis t'as un copain qui te lit et qui prend le truc au sérieux... en tout cas suffisamment pour te proposer d'en faire un autre !

Donc, me v'la reparti pour un tour...

Objectif de la demande: récupérer les données de l'API RTE tempo ( https://data.rte-france.com/catalog/-/api/consumption/Tempo-Like-Supply-Contract/v1.1 ) pour dire la couleur du jour et celle du lendemain et les poster sur un bot mastodon (mais pouvoir appeler le script comme une API aussi)

Je suis donc parti pour tester ladite API: pour la faire courte, ça m'a permis - après les galères d'usage - de comprendre comment tout ça fonctionnait (en particulier la demande d'un token, l'appel d'une api en php etc)

J'en suis arrivé à un script qui produit un texte donnant la couleur du jour et celle du lendemain.

«Oui, mais ce serait cool...»

Le texte c'est bien, mais ce serait mieux si on pouvait récup les données en HTML et intégrer ça avec une Iframe, comme un code d'intégration.

Pis éventuellement en RSS aussi...

Bon, tant que j'y étais, j'ai aussi fait un mode json, au cas où on voudrait ça dans un frontend à soi...

Du coup, mon API s'appelle de plusieurs façons différentes:

• URL seule ➜ retour en texte RAW (prêt à poster)
• URL?html ➜ retourne le code HTML
• URL?json ➜ renvoie les données en JSON
• URL?rss ➜ le flux RSS de l'API
• (cadeau bonux) URL?embed_code ➜ retourne le code pour mettre ça sur son site avec une iframe.

Pour faire bonne mesure

Le script produit un fichier pour chaque type de retour et ne le régénère qu'une fois par jour afin d'éviter de se faire «hammerer» comme dit @parigotmanchot

Jusque là, tout va à peu près dans un monde couci, couça

À ce stade, le script fonctionne même si le code est un peu sale et pas bien rangé... il fait ce qu'on lui demande. A part que parfois, il ne donne pas la couleur du lendemain... mais pas en local... juste en distant. Je n'ai pas encore vraiment cherché pourquoi, mais je pense que c'est dû au moment où l'on appelle l'API de RTE.

Pourquoi s'en tenir là ?

Tant que j'y étais, j'ai regardé l'API ECOWATT ( https://data.rte-france.com/catalog/-/api/consumption/Ecowatt/v4.0 ) qui donne une couleur et un message décrivant le niveau de stress du réseau.

Du coup, le script appelle les deux API et retourne les données cumulées des deux.

ce qui donne ça

J'en veux j'en veux...

Si ça vous intéresse, le zip est là : RTETempo.zip et il est distribué sous stricte licence faites-en ce que vous voulez. 😅

Les constantes au début permettent de configurer un peu:

• TOKEN_BASE64 : pour mettre votre propre jeton si vous voulez vous inscrire sur RTE (qui accepte les emails jetables type yopmail, je dis ça je dis rien 😬)
• TEMPO_BEFORE_TODAY, TEMPO_BEFORE_TOMORROW, ECOWATT_BEFORE_TODAY, ECOWATT_BEFORE_TOMORROW : pour définir le texte renvoyé avant la couleur.
• HTML_STYLE : pour changer le style du HTML généré
• TEMPO_HTML_TEMPLATE, ECOWATT_HTML_TEMPLATE : pour changer le code HTML à utiliser en cas de retour HTML
• ECOWATT, TEMPO : deux booléens permettant de débrayer l'un ou l'autre des appels (si vous ne voulez que ECOWATT ou que TEMPO)

Et le BOT ?!

Ben j'ai fait un autre BOT pour poster les couleurs du réseau une fois par jour... https://piaille.fr/@RTE_color ( @RTE_color@piaille.fr )

Hier, je me suis aperçu que le bookmarklet que j'avais fait pour trouver le flux RSS d'une chaîne youtube ne fonctionnait pas toujours 🤬: en effet, si l'URL de la chaîne n'est pas du type www.youtube.com/channel/xxxCHANNEL_IDxxx ça ne fonctionne pas... Or, les chaînes peuvent être aussi sous une forme dans laquelle le channel_id n'apparaît pas.

Du coup, je m'y mets

Au lieu de laisser youtube me chier dans les bottes, je me suis dit que, si le channel_id n'est pas dans l'URL, il doit être planqué quelque part dans le html de la page.

En fouillant un peu, twingo bongo jannielongo bingo 🥳 J'ai trouvé ça en parsant avec (presque) la même regex que pour l'URL.

J'ai donc codé vite fait une «api» qui renvoie l'URL du flux RSS d'une chaîne Youtube dont on fournit l'adresse.

On peut l'utiliser avec le frontend minimaliste prévu, en faisant une requête GET ou via le bookmarklet qui va bien.

Le tout est bien entendu utilisable, autohébergeable et modifiable, comme d'habitude

Allez !

🥇 Plugin N°1 : uniquePagePreview

Si toi aussi t'en as marre que le bouton Aperçu de la page article t'ouvre à chaque fois un nouvel onglet aboutissant rapidement à une accumulation visuellement insupportable du nombre d'échecs qu'il te faut avant de parvenir à un billet un tant soit peu abouti ? Alors ce ... «plugin» est pour toi: il se contente de changer le «_blank» de l'attribut onclick du bouton en «article_preview»... et ça, tu vois, ça change tout...

Désormais, la visualisation de l'article se fera toujours dans le même onglet (ouvert lors de la première visualisation)

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/uniquePagePreview.zip

🥈 plugin N°2 : resizeArticleTextarea

Un truc qui me chiffonnait dans la rédaction d'articles un peu longs, c'était:

1. de ne jamais voir l'article en entier pendant la rédaction
2. de passer mon temps à défiler DANS le textarea en plus de défiler DANS la page...

Grâce à ce plugin, on ne passe plus son temps à défiler QUE dans la page

En effet, il redimensionne les textareas de la page article en fonction de leur contenu. La zone de texte grandit avec le volume de texte tapé dedans.

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/resizeArticleTextarea.zip

🥉 plugin N°3 : adminPanel

Un plugin dérivé d'un de mes anciens qui s'avérait obsolète avec la nouvelle maquette. Il permet d'afficher un menu visible uniquement quand l'admin est connecté. Ce menu regroupe plusieurs icônes:

• un lien vers l'espace admin
• un lien vers un tag particulier: je m'en sers pour accéder aux articles publiés pour lecture ultérieure sous le tag «riditleteur»
• un lien vers la page commentaires avec un décompte des commentaires non lus
• un bouton de déconnexion

Il affiche de plus un lien sur chaque article pour éditer directement ce dernier (pratique pour corriger ou mettre à jour un article)

Ces deux fonctions sont accessibles via deux hooks, «editArticleIcon» et «adminPanel», dont il faut placer l'appel dans les pages header.php et articles.php du thème

Une page de config permet de redéfinir les icônes et texte des boutons ainsi que le tag du raccourci.

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/AdminPanel.zip

Si ça peut vous servir, c'est cadeau !

Bon, je ne vous cache pas que c’est long niveau processing et je ne pense pas que ce sera vraiment utilisable pour de l’application web grand public. Mais c’est rigolo.

Ç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 😉

Unicode, c'est bien joli, mais c'est chiant à coller quand t'en as besoin. Du coup, tu lâches l'affaire.

Bon, ben j'ai bricolé une page pour copier ces caractères qu'on utilise le plus.

Le but est de copier rapidement dans le presse-papier le (ou les) caractères unicode désirés.

Quand on clique sur un caractère il se passe deux choses:

• 🥇 ledit caractère est copié dans le presse-papier
• 🥈 il est également ajouté à la suite dans le bouton du haut qui donne la possibilité de cumuler plusieurs caractères de suite. (clic sur le bouton copie le contenu du bouton, double-clic l'efface)

Et pour configurer ?

Vous noterez que les chaînes peuvent n'être qu'un seul caractère unicode ou toute une série, si vous en utilisez régulièrement.

unicode={
    "ONGLET1":"chaine1,chaine2,chaine3,etc",
    "ONGLET2":"chaine1,chaine2,chaine3,etc",
}

Comme c'est du html+js+css, pas besoin d'un serveur, on peut l'utiliser en local. 🎉

Ok, mais à quoi ça sert en vrai ?!

Ben je sais pas moi ! Vu que vous pouvez mettre les caractères/chaînes que vous voulez, ça peut servir pour les matheux (coucou les profs) qui ont besoin des symboles de math simplement ou ponctuellement , en musique, ou en électronique... explorez unicode !

Download

⭐ Pour l'utiliser, c'est par là (∩｀-´)⊃━━☆ﾟ.*･｡ﾟ http://outils.warriordudimanche.net/outils/unibar

⭐ Pour le télécharger, c'est par ici (ﾉʘヮʘ)ﾉ*:･ﾟ✧ http://outils.warriordudimanche.net/outils/unibar/unibar.zip

📢 Petite mise à jour du plugin Markdown_parser qui permet d'ajouter la gestion du markdown dans PluXML.

☑ J'ai étendu le markdown aux commentaires

☑ j'ai ajouté la possibilité d'accéder à des caractères unicodes directement.

☑ Vous pouvez choisir lesquels en passant par la page de config et en collant les caractères à la suite. Le plugin générera un bouton par caractère.

📎 Pour télécharger : https://repo.warriordudimanche.net/ZIPFILES/Markdown_parser.zip

Ma future licence favorite ?

# DON'T BE A DICK PUBLIC LICENSE

> Version 1.1, December 2016

> Copyright (C) [year] [fullname]

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document.

> DON'T BE A DICK PUBLIC LICENSE
> TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

1. Do whatever you like with the original work, just don't be a dick.

   Being a dick includes - but is not limited to - the following instances:

 1a. Outright copyright infringement - Don't just copy this and change the name.
 1b. Selling the unmodified original with no work done what-so-ever, that's REALLY being a dick.
 1c. Modifying the original work to contain hidden harmful content. That would make you a PROPER dick.

2. If you become rich through modifications, related works/services, or supporting the original work,
share the love. Only a dick would make loads off this work and not buy the original work's
creator(s) a pint.

3. Code is provided with no warranty. Using somebody else's code and bitching when it goes wrong makes
you a DONKEY dick. Fix the problem yourself. A non-dick would submit the fix back.

Et allez, encore une matinée de perdue pour un truc que j'avais pas prévu et qui devrait fonctionner parfaitement: la balise <video> et la balise <track> pour ajouter les sous-titres.

Pour afficher une video pour les élèves avec les sous-titres que j'ai traduit de youtube, en gros, je fais un truc comme ça:

<video controls title="sdfgsdfg" preload="auto" >
    <source src="http://serveur/Marco Castelblanco.mp4"  type="video/mp4">
    <track kind="subtitle" srclang="fr" label="sous-titre" src="http://serveur/Marco Castelblanco.vtt" default="true"/>
    Sorry, your browser doesn't support embedded videos.
</video>

Pour ce fichier de sous-titres, J'ai :

• récupéré vidéo+sous-titres avec JDownloader
• j'ai traduit les sous-titres
• j'ai converti le format .srt fourni par yt en .vtt, le format compatible avec track

MAIS ÇA MARCHE PAS

• J'ai beau essayer en local, en distant,
• en http et en https,
• dans un fichier html ou php,
• sur firefox/chromium/vivaldi,
• tous les fichiers se chargent normalement (ils n'apparaissent pas comme 404 dans la console-réseau.)
• l'encodage est bon
• le format de fichier (vtt) est bon aussi...
• [edit] l'attribut crossorigin sur video ne change rien

J'ai cherché partout, je me prends la tête depuis des heures...

J'ai même essayé de forcer le track.mode à "showing" au cas où. Mais non.

Si quelqu'un a une idée, je prends...

Solution !

Il suffit de mettre kind="captions" au lieu de kind="subtitle" pour que ça fonctionne...

Merci à Bill2 pour la solution !

EN FAIT C'EST MOI K'É COUILLON

Une matinée perdue pour un «s» manquant à subtitleS : kind="subtitles"

En passant, je vous mets le lien vers un petit outil pour convertie en et de Base64.

Bon, yen a plein, hein, en particulier celui de Timo ... J'en ai quand même refait un from scratch pour pouvoir l'utiliser comme une appli online (le front end ci-dessous) ou bien comme une «API» utilisable via un bookmarklet par exemple: ainsi, en sélectionnant du texte puis en lançant le bookmarklet qui va bien, on peut encoder/décoder en un clic...

Comme d'habitude, si ça intéresse quelqu'un, on sait jamais... https://api.warriordudimanche.net/b64/ et pour télécharger