Développer en html, css et javascript
- Détails
- Catégorie : Logiciels Libres
- Mis à jour : 5 juin 2023
- Publication : 21 mai 2023
- Écrit par Webmestre
- Affichages : 87
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...
- "Créez votre site web avec HTML5 et CSS3" : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3
- Pour un affichage "responsive" : https://kinsta.com/fr/blog/design-web-responsive/#questce-que-le-design-web-responsive-
- Sur Flexbox et Grid CSS :
- "Apprenez à programmer avec JavaScript" sur OpenClassRooms : https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript
- "Créez des pages web dynamiques avec JavaScript" sur OpenClassRooms : https://openclassrooms.com/fr/courses/7697016-creez-des-pages-web-dynamiques-avec-javascript
- Utiliser le framework Svelte (et d'autres dans VSCode) mais nécessite Node.js : https://fr.jeffprod.com/blog/2020/svelte-configuration-de-vscode-et-internationalisation/
- Installer NodeJS sous Linux Mint 21 : https://linuxhint.com/install-nodejs-linux-mint/ (remplacer la version "18" par la "20").
- Utiliser Svelte.js : https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started
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 :
- Réaliser une horloge : https://cssanimation.rocks/clocks/
- Intégrer une image svg avec mise à l'échelle : https://css-tricks.com/scale-svg/
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
- Création à la racine du projet d'un fichier "index.html" ainsi que 3 dossiers : images (qui contient toutes les images SVG), css (avec fichier "style.css") et js (avec fichier "script.js").
- Fonction utile pour avoir les propriétés d'un objet javascript : console.dir https://developer.mozilla.org/fr/docs/Web/API/console/dir
- Comment mettre une image .svg à l'échelle : https://css-tricks.com/scale-svg/
- Grille CSS : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
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/
 horloge.svg | [Fichier .svg de l'horloge] | 86 Ko |