Développer en html, css et javascript

Détails
Écrit par : Webmestre
Catégorie : Logiciels Libres
Clics : 2062

Page aide-mémoire pour m'aider à développer des applications web...
Les applications web ont l'énorme avantage d'être utilisables à travers un navigateur web et sont donc interopérables par défaut quels que soient les systèmes d'exploitation et le matériel (tablettes par exemple).

Ressources en ligne :

 

I- Choix de l'outil pour développer : VSCodium

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. Je dois reconnaître que pour une fois Microsoft propose une application très intéressante avec des outils facilitant grandement la programmation : visualiseur MarkDown pour les ReadMe, visualiseur HTML, erreurs de syntaxes, ...

Autre bonne surprise : VSCode est intégré dans Gitlab et en particulier la forge https://forge.apps.education.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) :

A- Pour lier ses dossiers locaux avec le Gitlab de la Forge Éduc
B- Comment jongler avec différents projets sur la Forge avec VSCodium

Si l'on travaille sur des projets différents dans la Forge, par défaut VSCodium s'ouvre sur le dernier. Pour en changer, il faut ouvrir une nouvelle fenêtre (CTRL+Maj+N) dans VSCodium et choisir le dossier local contenant les sources : la synchronisation se mettra en place automatiquement (grâce au dossier caché .git).

 

II- Tutoriels

Pour commencer, il est nécessaire de suivre des tutoriels...

Ensuite, on peut se faire aider par des IA comme ChatGPT ou Perplexity qui génèrent du code tout en apportant des explications qui vous feront monter en compétences. Attention, il y a des erreurs (et ça tourne parfois en rond) mais ça permet de dégrossir le travail et de vous mettre sur la voie. Par contre, ça ne vous dispensera pas d'aller lire la documentation sur les API si besoin (cas vécu pour construire une extension pour Thunderbird 128).

 

III- Réalisation d'une horloge interactive

Il existait une application flash (en .swf) qui permettait d'apprendre l'heure de manière interactive.

Je trouvais que c'était l'application idéale à utiliser en classe avec un vidéoprojecteur mais avec la disparition de flash, je n'ai pas retrouvé équivalent en html5. J'ai donc décidé d'essayer de reproduire cette application en html, css et javascript. C'est aussi l'occasion de monter en compétence 😉.

Ressources :

A- Réalisation de l'horloge au format .svg avec Inkscape

J'ai reproduit l'horloge de l'application flash originelle avec Inkscape (téléchargeable au bas de cette page) avec une couche pour chaque partie différente :

Remarque : il est nécessaire de convertir en chemin les textes pour avoir un bon alignement.

B- Programmation avec VSCodium
C- Programmation en Vanilla Javascript

Programmer en Vanilla Javascript consiste à se passer des librairies externes (comme jQuery par exemple) pour avoir un programme plus facile à maintenir et non tributaires des librairies extérieures pour une meilleure pérennité.

D- Utilisation de Chat GPT OpenAI

Pas mal décrié pour des raisons tout à fait justifiées, Chat GPT OpenAI https://chat.openai.com/ est par contre un formidable outil pour apprendre rapidement des langages de programmation car il propose des solutions concrềtes (des petits programmes) à des questions que l'on peut lui poser. Il explique aussi sa stratégie et ses choix, ce qui est très pédagogique ! J'ai pu ainsi grâce à ses propositions (que j'ai amendées par moment car les solutions données n'étaient pas satisfaisantes directement) me passer de la librairie Interact.js pour permettre de raliser la rotation avec la souris des aiguilles manipulables.
Il faut cependant être un peu à l'aise avec la langue anglaise.

E- Réalisation de l'horloge

Toutes les info sont sur la forge : https://forge.apps.education.fr/thierrym/horloge-ecole

Application en ligne : https://thierrym.forge.apps.education.fr/horloge-ecole/

Pour utilisation dans Openboard au format .wgt : https://github.com/OpenBoard-org/OpenBoard/wiki/Creating-Web-Widgets

 

F- Prise en compte des tablettes tactiles

La détection du tactile ne se fait pas de la même façon que pour une utilisation avec une souris. Pour simuler une tablette tactile, il faut aller dans les options développeur de Firefox (ou Chromium) pour avoir un affichage adaptatif (responsive design) et simuler le tactile. Plus d'info ici : https://www.digitalcitizen.life/emulate-mobile-device-desktop-browser/

Fonction pour gérer le tactile en javascript :

// Add event listeners for mouse or touch interactions
let touchScreen;
 
function determineTypeAppareil(){
touchScreen = ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
if (touchScreen) {
canvas.addEventListener('touchstart', handleMouseDown, false);
canvas.addEventListener('touchend', handleMouseUp, false);
canvas.addEventListener('touchmove', handleMouseMove, false);
}
else {
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;
}
}

 

Bouts de code pour les fonctions servant au déplacement des aiguilles :

function handleMouseDown(event) {
if (touchScreen) {
event.preventDefault();
event = event.touches[0]; // Gestion du tactile
}
...

 

G- Créer une application autonome via un paquet installable

Pour partager facilement cette appli, l'idéal serait de créer un paquet .deb pour l'installer sur un ordinateur sous Debian, Ubuntu, Linux Mint, ... Pour cela, on peut utiliser l'outil FPM que m'a indiqué Arnaud Champollion et qu'on trouve ici : https://github.com/jordansissel/fpm. Il demande que Ruby soit installé.
Documentation ici : https://fpm.readthedocs.io