Lo Furòl

... de l'ouverture (en occitan)

Vous êtes ici : Accueil / Logiciels Libres / Développer en html, css et javascript

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

III- Réalisation d'une horloge interactive

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

Horloge flash

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.aeif.fr/ThierryM/horloge-ecole

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

 

 

 

Pièce(s) jointe(s):
Télécharger ce fichier (horloge.svg)horloge.svg[Fichier .svg de l'horloge]86 Ko
Vous êtes ici : Accueil / Logiciels Libres / Développer en html, css et javascript