Développer en html, css et javascript
Page aide-mémoire pour m'aider à développer des applications web...
I- Choix de l'outil pour développer
Après quelques recherches sur Internet, j'ai choisi VSCodium qu'on peut installer dans Ubuntu. C'est la version libre de VSCode proposé par Microsoft (oui, oui...) et qui dispose de nombreuses extensions : https://github.com/VSCodium/vscodium
Autre bonne surprise : VSCode est intégré dans Gitlab et en particulier la forge https://forge.aeif.fr/, ce qui permet de ré-investir ses connaissances/habitudes !!!
Du coup, on peut installer l'extension "Gitlab Workflow" pour lier VSCodium et le dépôt Gitlab du projet : https://blog.jbriault.fr/vscode-gitlab-workflow/.
Extensions utiles de VSCodium (attention certaines nécessite NodeJS) :
- GitLab Workflow de GitLab
- Live Preview de Microsoft
- open in browser de TechER
- vscode-icons de VSCode Icons Team
- Svelte for VS Code de Svelte (NodeJS)
- ESLint (NodeJS)
II- Tutoriels
Pour commencer, il est nécessaire de suivre des tutoriels...
Openboard pour VPI, TBI, TNI, ENI
En classe, avec le développement des Tableaux Blancs Interactifs (TBI), il est plus que nécessaire de disposer d'applications pour les exploiter au mieux. L'application incontournable qui marche sous différents systèmes d'exploitation, avec n'importe quelle marque de VPI, ENI et qui est libre est OpenBoard (anciennement connue sous Uniboard, Sankoré puis Open-Sankoré).
Si vous cherchez des explications plus générales sur l'utilisation des VPI ou ENI, vous trouverez d'autres info sur cette page : VPI, TBI, TNI, ENI : Applications pour tableau blanc interactif
Son principal avantage réside dans le fait qu'on peut aussi l'installer sur les ordinateurs des enseignant⋅e⋅s qui pourront ainsi préparer des activités en dehors de la classe et ensuite les importer sur l'ordinateur commandant le VPI.
Même s'il possède beaucoup de fonctionnalités intégrées par défaut, il lui en manque cependant quelques-unes. L'avantage, c'est qu'on peut y intégrer des appliquettes pour lui en rajouter mais cela demandera quelques manipulations... surtout depuis la fin de la technologie Flash...
Site officiel : https://openboard.ch/
[Primtux] Un OS dédié pour les écoles
I. Préambule :
Beaucoup d’écoles possèdent des ordinateurs " obsolètes " d’un point de vue système d’exploitation avec Windows XP notamment qui n'est plus mis à jour. Du coup se posent beaucoup de problèmes de fonctionnement, de lenteurs… qui font qu’en l’état, ces ordinateurs ne sont pas utilisables de façon satisfaisante.
On pourrait régler ce problème en faisant acheter de nouvelles machines par la municipalité mais ça serait dans beaucoup de cas, anti-économique et anti-écologique : en effet, beaucoup de machines peuvent retrouver une seconde jeunesse en installant un autre système d’exploitation que Windows très gourmand en ressources. Ces systèmes d'exploitation (ou O.S. pour Operating System en anglais) sont connus sous le nom de GNU/Linux (plus généralement Linux tout court). Il existe de très nombreuses variantes que l'on appelle distributions. Une de ces distributions est particulièrement adaptée pour les écoles françaises (et francophones) : il s'agit de Primtux. Ses auteurs mettent gratuitement à disposition de tous et de toutes, leurs compétences et leur travail afin de permettre à nos élèves (et aux enfants avec leurs parents) d'utiliser des outils numériques sur des "vieux" ordinateurs mais tout à fait fonctionnels. Cette démarche, qui repose sur le mouvement des logiciels libres, n'est pas du tout une solution au rabais de par la richesse des outils proposés et évite en plus aux collectivités d'avoir à refaire de lourds investissements en permettant de "recycler" des ordinateurs dont on se serait débarrassés alors qu'ils fonctionnent. Merci à eux !
Cette page est surtout un aide-mémoire pour m'aider à installer Primtux dans les écoles. Elle s'appuie sur les informations que j'ai pu trouver ici : https://wiki.primtux.fr/doku.php , dans la documentation https://primtux.fr/documentation/ et sur le forum https://forum.primtux.fr/ grâce aux contributeurs (qui ont eu la patience de répondre à mes questions).
Par contre, pour fonctionner " confortablement " dans une classe de cycle 3, j'estime qu'il faut que les ordinateurs aient au moins 1Go de mémoire vive et des processeurs Athlon 64 (dans le graphique ci-dessous, cela correspond à du matériel assemblé à partir de 2004 qui peut faire fonctionner la version Debian 9, ce qui est le cas des portables de 11 pouces ayant des puces Atom N450). Pour la mémoire vive, on peut récupérer des barrettes sur d’autres ordinateurs ou sur les sites d'enchères en ligne (on peut même se rapprocher d'une déchetterie).
Pour une installation sur le Raspberry Pi, voir la page Installation de Primtux sur un Raspberry Pi 3B+ ou la page Installation pour un Raspberry Pi 4.
Pour les réglages de l'affichage (résolution, multi-écrans), voir l'article sur l'utilisation avec un TBI.
[Vidéo] Applications utiles
Page regroupant des applications utiles autour de la vidéo à destination des écoles (mais pas uniquement) et la visio aussi. Je la compléterai au fil de l'eau...
I- Hébergement et diffusion en direct avec Peertube
Pour héberger une vidéo, le mieux sera de passer par le Peertube académique. Si on veut limiter l'accès, on choisira le mode privé (avec éventuellement un mot de passe) qui permettra de la visionner uniquement si on connaît le lien.
Tutoriel vidéo ici : https://invidious.fdn.fr/watch?v=ebjIK_RdMgw.
Prochainement, il sera possible de diffuser en direct (streaming) une intervention filmée avec Peertube grâce à une nouvelle fonctionnalité financée par de généreux⋅euses donateur⋅rice⋅s. Plus de détails, bientôt...
II- Applications de montage
Pour ce qui est du montage, tous les logiciels de montage vidéo nécessitent une prise en main. En général, d'une application à l'autre, les manipulations se ressemblent.
Il existe 4 logiciels intéressants sous Windows/Apple/Linux voire Android qui sont complémentaires :
Avidemux : le plus simple http://circo71.cir.ac-dijon.fr/wp-content/uploads/sites/6/Tutoriels/Avidemux_convertir_traiter_videos.pdf.
Vous trouverez aussi un petit tutoriel sur ce site.ShotCut : https://shotcut.fr/.
Vous trouverez un "tutoriel" ShotCut sur ce site.
Flouter une partie de l'image avec des images-clés : https://invidious.fdn.fr/watch?v=0ZzAMjWyOsUOpenShot : https://www.openshot.org/fr/
Kdenlive : https://kdenlive.org/fr/, vers le site de tutoriels : https://userbase.kde.org/Kdenlive/Manual/fr
Flouter une vidéo avec le masquage automatique : https://invidious.fdn.fr/watch?v=zF-g8vXN1QU
Pitivi (uniquement sous GNU/Linux) : http://www.pitivi.org/.
Plus d'infos ici : https://doc.ubuntu-fr.org/pitiviVLC, le célèbre lecteur vidéo mais pour un usage plus limité (pour du montage, avec extraction d'un passage ou réduction de la taille d'une vidéo). Vous trouverez un tutoriel à télécharger au bas de cette page.
Le site Clubic propose pas mal de tutoriels autour de VLC. Par exemple, cette page (au bas de laquelle on trouve toute une liste de tutoriels) : https://www.clubic.com/lecteur-multimedia-mediacenter/vlc-media-player/article-854877-1-comment-decomposer-video-captures-ecran.html.
Une page de 10 astuces très pratiques : https://www.01net.com/astuces/10-astuces-et-fonctions-cachees-pour-maitriser-vlc-comme-un-pro-2036165.htmlYouCut sous Android : https://play.google.com/store/apps/details?id=com.camerasideas.trimmer&hl=fr&gl=US
Shutter Encoder : outil libre et français, multi-OS qui permet de convertir et réduire des vidéos : https://www.shutterencoder.com/fr/
Remarques :
- Shotcut, OpenShot, Kdenlive et Pitivi se valent. Tout dépendra de vos préférences.
- Avidemux, tout comme ShutterEncoder a une fonctionnalité très intéressante qui permet de fixer une taille finale afin que le traitement, la compression vise à s'en rapprocher. C'est très utile pour limiter la taille des vidéos qui peuvent vite être énormes.
III- Exemple de process pour une vidéo d'école regroupant le travail de différentes classes
[Firefox] Extensions utiles
Je liste ici les extensions que j'utilise pour Firefox.
- Brief, un lecteur de flux RSS : http://brief.mozdev.org/
- ColorZilla, permet de récupérer les couleurs d'un site Web (existe aussi pour Chromium/Chrome) : https://www.colorzilla.com/firefox/
- Firefox Multi Accounts Container, permet de se connecter sur un même site avec des identifiants différents : https://addons.mozilla.org/fr/firefox/addon/multi-account-containers/
- Video DownloadHelper, permet de récupérer des vidéos en ligne : http://www.downloadhelper.net/
- uBlock Origin, pour se débarrasser des trackers, pubs et autres nuisances sur Internet : https://addons.mozilla.org/fr/firefox/addon/ublock-origin/
- Exemple de script pour ne plus avoir la fenêtre de consentement pour Youtube :
www.youtube.com###dialog ||www.gstatic.com/youtube/img/promos/growth/dmod_si_horizontal_ver1_240x400.png$image www.youtube.com##opened www.youtube.com##.opened
-
Exemple de script pour ne plus avoir la fenêtre de consentement pour Google :
www.google.com###lb www.google.com##:root:style(overflow-y: visible !important;) www.google.fr###cnsm www.google.fr###cnsw www.google.fr##.m114nf.aID8W
- Exemple de script pour ne plus avoir la fenêtre de consentement pour Youtube :
- Show/hide passwords, pour afficher ou masquer les mots de passe de connexion sur un site via un lien rajouté : https://addons.mozilla.org/fr/firefox/addon/showhide-passwords/
- Form History Control (II), permet de sauvegarder automatiquement le contenu saisi dans un formulaire (utile pour ne pas perdre le contenu en cas de problème) : https://addons.mozilla.org/fr/firefox/addon/form-history-control/
- TextArea Cache qui fait exactement la même chose que l'extension précédente (ça permet de gagner pas mal de temps en ne perdant pas une saisie à cause d'une déconnexion intempestive) : https://addons.mozilla.org/firefox/addon/textarea-cache/
- ClearURLs qui permet de nettoyer les liens contenant des mouchards : https://addons.mozilla.org/fr/firefox/addon/clearurls/
- Bypass Paywalls Clean qui permet d'accéder à des pages de journaux réservées aux abonné⋅e⋅s. Elle désactive par exemple les scripts javascript empêchant de voir les pages en entier. Extension utile lorsqu'on veut consulter à titre exceptionnel un seul article sans avoir à s'abonner. Si vous l'utilisez régulièrement, cela signifie qu'il faudra songer à s'abonner 😉 : https://addons.mozilla.org/fr/firefox/addon/bypass-paywalls-clean/
- Greasemonkey est une extension permettant d'exécuter des javascripts sur des pages selon des règles. Par exemple, faire une redirection de page de Youtube vers des instances Invidious : https://addons.mozilla.org/fr/firefox/addon/greasemonkey/
Exemple de scripts pour rediriger automatiquement une page Youtube (Source : https://openuserjs.org/scripts/jaidedctrl/Invidious_Redirect/source avec une correction sur le @match) :
// ==UserScript== // @name Invidious Redirect // @description Redirect YouTube to Invidious. // @author jaidedctrl // @license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt // @match *://www.youtube.com/* // @run-at document-start // ==/UserScript== var invInstance = "https://invidious.fdn.fr"; var url = window.location.href; if ( url.match("youtube.com") != null ) { url = url.replace( /.*youtube.com/, invInstance ); window.location.replace( url ); }
-
Extension Redirector pour rediriger vers un autre site (intéressant pour Youtube) : https://addons.mozilla.org/fr/firefox/addon/redirector/
Exemple d'utilisation :
Extensions intéressantes à garder sous le coude :
- SingleFile, pour sauvegarder dans un fichier .html une page Web (avec scripts, ...) : https://addons.mozilla.org/fr/firefox/addon/single-file/
- Firefox Translation, pour traduire des pages sans faire appel à un site externe (sans passer par le cloud) : https://addons.mozilla.org/fr/firefox/addon/firefox-translations/
[Android] Applications utiles
Pour mon ordiphone sous Android puis LineageOS (tout comme pour ma tablette), j'utilise un certain nombre d'applications que je trouve très utiles. Ces applications peuvent se télécharger via le store Google Play mais aussi via F-Droid qu'il faut installer (https://f-droid.org/FDroid.apk, dépôt libre où l'on peut trouver des versions gratuites légales des appli payantes chez Google). On pourra aussi trouver des applications sur le site https://apkpure.com, ce qui évite d'avoir un compte chez Google. Il faudra pour certaines autoriser l'installation à partir de sources inconnues.
Il est tout à fait possible de connecter au Play Store de façon anonyme, sans avoir besoin d'avoir un compte Google, en utilisant l'application Aurora : https://f-droid.org/fr/packages/com.aurora.store/
Avec le temps, et l'expérience 😉, je privilégie des applications libres, le moins intrusives possible et pouvant communiquer avec mon système d'exploitation sous Ubuntu. Il peut arriver que certaines virent mal dans le temps (publicité, envois de données exagérées) auquel cas, je les supprime.
Pour aide-mémoire (en cas de nouvelle installation ou ré-installation par exemple pour passer à LineageOS), je les liste ci-dessous.
[QGIS3] Créer une carte à partir de données ouvertes
QGIS est un formidable outil professionnel libre permettant d'élaborer des cartes géographiques et d'y adjoindre des données (SIG = Système d'Information Géographique).
Site officiel : https://www.qgis.org/fr/site/index.html.
Voir aussi cette page où je répertorie différents liens concernant QGIS.
Tutoriel pour débutants (mais pas seulement) proposé par le CNRS : https://ouvrir.passages.cnrs.fr/tutoqgis/index.php
Dernier manuel d'utilisation pour QGIS : https://docs.qgis.org/latest/fr/docs/user_manual/index.html (la dernière version en français est ici : https://docs.qgis.org/3.22/fr/docs/user_manual/index.html).
Je décris ci-dessous une méthode permettant d'obtenir des cartes de données géographiques rapidement en utilisant des données ouvertes fournies par l'Éducation nationale. Je me suis servi des données fournies par ce site concernant l'Occitanie : https://data.occitanie.education.gouv.fr mais il existe aussi le site national https://data.education.gouv.fr.
A- Récupérer les données ouvertes au format GeoJSON
- Il faut se placer sur l'onglet "Données" et faire une recherche avec le mot "annuaire". Voici la page que l'on cherche : https://data.occitanie.education.gouv.fr/explore/dataset/fr-en-annuaire-education/
- On filtre les données qui nous intéressent en fonction des critères choisis dans la colonne de gauche. J'ai filtré par "nom_circonscription" pour n'avoir que les écoles de ma circonscription (celle de Lézignan-Corbières Minervois) et les écoles publiques.
- On se place sur le sous-onglet "Export".
- On choisit ses données au format GeoJSON.