... Des passages (en occitan)

Développer en html, css et javascript

Détails
Catégorie : Logiciels Libres
Affichages : 1062

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 quelques 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

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...

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 :

  • le cercle extérieur,
  • les graduations,
  • les heures du matin,
  • les heures de l'après-midi,
  • les minutes,
  • les minutes "moins",
  • les quarts et demie.

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