la vie est trop courte pour tout refaire à la main à chaque fois. L’utilisation de bibliothèques en informatique en général et en web en particulier permet de créer des sites bien plus rapidement, bien plus fonctionnel et bien plus maintenable que de le faire à la main. Ce n’est pas pédagogique de demander à des élève de tout faire sans bibliothèques “pour qu’ils voient la difficulté”. On ne le fait pas pour d’autres matières et ils peuvent aller plus loin s’ils utilisent les meilleurs outils tout de suite (pour le permis auto, on ne démonte pas un moteur).
C’est parfois/souvent une excuse parce que l’on ne s’est pas mis à jour. Au départ on faisait sans bibliothèques, mais on allait beaucoup moins loin et c’était vraiment barbant. En revanche ils y en a des millions et ça change tout le temps. Il faut que la méthode de travail soit organisée autour du changement pour ne pas avoir tout le temps un vieux site. Regardez du côté de http://web.archive.org/ pour retrouver l’évolution des sites. C’est marrant et ça montre que ça évolue très très vite. Regardez par exemple le site du https://lemonde.fr en 1998, en 2008 et maintenant.
un framework css de base gère :
A côté de ces gros frameworks qui organisent le site, il existe une multitude de bibliothèques plus petites, qui gèrent tous les autres aspects.
Il en existe pour quasi tous les usages auxquels vous pouvez penser. Un gros site web peut utiliser près d’une centaine différentes, les plus modestes quelques unes. Il ne faut pas hésiter à regarder ce qu’il se fait et à les utiliser. Il faut cependant ne pas oublier de les mettre à jour.
La première bibliothèque css qui a tout changé c’est https://getbootstrap.com/ en version 4 actuellement. Son fonctionnement était tellement pratique que tout le monde maintenant fonctionne pareil :
Actuellement, il y a quelques frameworks très utilisés : https://scotch.io/bar-talk/6-popular-css-frameworks-to-use-in-2019. On va utiliser https://bulma.io dans ce cours.
https://bulma.io est une bibliothèque css actuellement (en 2019) beaucoup utilisée. Elle est facile d’accès et possède tout ce qu’une bibliothèque css se doit d’avoir.
Le fichier bulma.html est un exemple d’utilisation de bulma. Ouvrez le fichier dans un navigateur pour voir le résultat et dans un éditeur pour voir comment c’est organisé.
Ne vous attardez pas sur les détails d’implémentation, essayez de comprendre gros grain comment ça fonctionne en vous aidant de la documentation https://bulma.io/documentation/. En particulier :
Une bibliothèques web (css ou javascript) possède grosso modo trois façon d’être chargée sur votre site :
link pour css et script pour javascript) : pour https://bulma.io ça va 1 unique fichier. Mais pour d’autre ca peut devenir gros.npm qui vient avec node). Réservé aux gros sites car la mise en œuvre est plus complexe, mais cela permet une mise à jour et une gestion aisée des bibliothèques.Il est important de garder une architecture claire dans votre projet. Essayer d’avoir un dossier (nommé lib par exemple à la racine de votre site (ie. dans le dossier où se trouve votre fichier index.html) où vous stockez toutes vos bibliothèques téléchargées.
Pour gérer les mise à jour. Pas forcément crucial en web front, cette partie est donc optionelle ici. Mais quand on commence à faire des serveurs il est indispensable d’avoir un workflow permettant de mettre à jour sans difficulté les bibliothèques et frameworks.
Plutôt que de tout installer à la main et de ne plus se souvenir qui est quoi, on a coutume d’installer un gestionnaire de package. Le plus célèbre en front est npm l’installeur de node (Node Package Manager). Il y a des alternatives comme yarn mais restons (pour une fois) classique.
On Commence par installer node : https://nodejs.org/en/
Puis : 1. on se place avec un shell dans le répertoire racine de votre projet. 2. npm init (on crée le fichier de configuration), 3. npm install bulma --save (ajout de la dépendance bulma dans :code:package.json).
Si on oublie :code:--save le package est installé mais pas ajouté dans le fichier de config (regardez le fichier de configuration). Il est toujours bon de se souvenir des packages que l’on installe (on le verra sur l’ovh).
Il y a de tout sur
npm. Quasiment tout le monde peut poster des packages. Donc Le meilleur y cotoie le pire.
Le lien vers bulma devient alors : <link href="./node_modules/bulma/css/bulma.css" rel="stylesheet">