Catégories
FCS FCS2-cours W3CSS W3CSS-cours

Se familiariser avec W3.CSS

Vous avez vu dans des cours précédents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons découvrir pendant ce cours un type de gabarits particulier, basé sur une feuille de style prête à l’usage : w3.css.

On nomme ce type de feuille de style “framework CSS”, ce qui pourrait être traduit par “boîte à outils CSS”. En effet, tout repose sur un système de classes CSS pré-paramétrées que chacun utilise en fonction de ses besoins.

Il existe de nombreux frameworks CSS, le plus utilisé étant Bootstrap. Ce dernier peut d’ailleurs être pris en main en suivant les tutoriels publiés sur w3schools.com.

Le framework W3.CSS a été mis au point par les concepteurs du site w3schools.com. Ce site d’apprentissage des techniques fondamentales de la création de site utilise cette feuille de style.

Découvrez l’essentiel des possibilités offertes par W3.CSS en lisant la présentation des fonctionnalités du framework (visuel ci-dessus).

Naviguer sur le site w3schools.com

➜ Pour le bon déroulé de la formation, je vous recommande de vous familiariser avec la structure du site w3schools.com.

Ce site s’affiche par défaut en anglais. Il est cependant très facile d’en obtenir la traduction en français. Cliquez sur la petite planète située à droite de la barre de navigation du site et choisissez votre langue.

➜ Ce site permet d’apprendre de manière autonome à utiliser plusieurs techniques de création de sites. Vous y trouverez notamment une rubrique intitulée HOW TO qui regroupe des tutoriels répondant à de nombreux besoins.

Le site w3schools.com publie également :

Vous trouverez sur ce site des quizz et des exercices vous permettant de tester vos connaissances en HTML et CSS. Vous y découvrirez aussi des démos et des gabarits de sites réalisés en appui sur la feuille de style w3.css.

Les templates de w3schools.com

J’ ai rassemblé dans plusieurs dossiers les gabarits proposés par w3schools. Vous disposerez ainsi de plusieurs gabarits de portfolios et de quelques gabarits de sites à personnaliser selon vos besoins.

J’ai modifié les originaux à des degrés divers. J’ai parfois commenté le code et modifié une partie des contenus. Les gabarits de porfolios révisés sont les plus aboutis.

➜ Jetez un œil sur les différents modèles proposés mais ne vous attardez pas sur le code source. Vous travaillerez à partir de ces gabarits après vous êtes familiarisés avec W3.CSS. Je vous montre pour le moment ce vers quoi nous allons tendre au fil de la formation 😉

D’autres gabarits proposés par w3schools ont été rassemblés. Ils vous sont présentés sur ce site où vous pourrez passez facilement de l’un à l’autre. Pour les utiliser, vous devez les télécharger.

Comme pour les portfolios révisés, ne vous attardez pas sur le code source des gabarits téléchargés. Prenez juste connaissance des modèles proposés et testez leur navigabilité et leur réactivité. Nous en utiliserons quelques uns pour les exercices qui vont suivre.

Le bac à sable de w3schools

On nomme “bac à sable” un espace de test, d’exercice et de tâtonnement. Le site w3schools.com dispose d’un outil très pratique pour s’exercer en ligne sans recourir à VS Code ou à tout autre éditeur de texte. Vous y accédez chaque fois que vous cliquez sur le bouton « Try It yourself » (« Essayez vous-même », en français).

Vous pouvez enregistrer “dans le cloud” vos exercices ou vos tests en cliquant sur la disquette, dans le menu de l’éditeur. Une adresse URL permettant d’accéder à votre code vous sera communiqué.

N’oubliez pas de copier l’URL communiqué lors de la sauvegarde, si vous souhaitez archiver dans le cloud vos essais de codage.

Je vous invite à faire quelques essais de codage à partir d’un exercice d’initiation concernant l’usage de la couleur avec W3.CSS. Le lien ci-dessous est un exemple d’exercice sauvegardé.

Cliquez sur le bouton Run >> pour afficher la page dans la fenêtre de prévisualisation.

Nous reviendrons un peu plus loin sur l’usage de la couleur avec la feuille de style w3.css.

Les classes CSS

Vous l’avez compris : la feuille de style w3.css est une grande liste de classes CSS. Tous les noms de classe commencent par w3-. Il est ainsi envisageable de les combiner avec d’autres classes ne commençant pas par w3-.

Pour vous rafraîchir la mémoire, vous pouvez consulter la page du site w3schools consacrée aux classes CSS.

➜ Lisez attentivement le cours proposé par w3schools.com en cliquant sur l’onglet W3.CSS colors et faites l’exercice ci-dessous :

Vous trouverez les 30 couleurs disponibles pour le texte à cette adresse :

➜ Vous constatez qu’il est possible d’associer plusieurs classes à un même élément HTML et de définir ainsi un style complexe pour l’élément sélectionné.

Les bibliothèques et les thèmes chromatiques

En plus des couleurs par défaut paramétrées dans la feuille de style w3.css, le site w3schools met à notre disposition de nombreuses bibliothèques de couleurs.

➜ Vous pouvez visualisez quelques bibliothèques chromatiques regroupées dans un même document. Comme pour les couleurs par défaut, les classes correspondantes définissent à la fois la couleur du fond et une couleur de texte par défaut.

Nous disposons également de plusieurs thèmes chromatiques. Il s’agit d’une déclinaison monochrome d’une couleur par défaut, paramétrée sous forme de classes comprenant 10 nuances supplémentaires pour chaque couleur.

➜ Là aussi, je vous propose de visualiser quelques thèmes chromatiques regroupés dans un même document. Soyez attentif à la manière dont sont déclinés les noms de classes de chaque nuance.

Le d de d3 ou d4 correspond à la première lettre de l’anglais “dark”. Le l de l3 ou l4 (il s’agit bien d’un L minuscule et non d’un i majuscule…) correspond à la première lettre de l’anglais “light”.

Modifiez l’appel du thème chromatique dans l’exercice proposé sur Try-it et constatez le résultat de cette modification

➜ Je vous propose d’effectuer l’exercice suivant : il s’agit, à partir du nouveau thème chromatique que vous avez choisi précédemment de modifier l’ordre d’affichage des nuances (le plus clair en bas et le plus foncé en haut.

➜ Pour la suite de cette formation je vous invite à utiliser un dossier “css” dans lequel se trouvent toutes bibliothèques et tous les thèmes de couleurs proposées par w3schools (améliorés sur le plan des normes d’accessibilité). Les feuilles de style révisées sont placées dans les sous-dossiers « lib-colors » et “theme-colors”.

Utiliser les couleurs avec w3.css

Pour utiliser les bibliothèques ou les thèmes chromatiques dans une page Web, il est nécessaire d’appeler la feuille de style correspondante dans un <link>, au niveau du <head> (ou au dessus du body quand il n’y a pas de balises <head>).

Soit on choisit de les appeler depuis les serveurs de w3schools avec un lien du type :

<link rel="stylesheet" href="https://w3schools.com/lib/w3-colors-signal.css>

Soit on choisit d’utiliser le dossier “css” fourni dans ce cours et pour la même bibliothèque de couleurs on aura un lien du type :

<link rel="stylesheet" href="css/lib-colors/w3-colors-signal.css>

➜ Voir par exemple le code source de lib-colors-signal-w3css.htm

Faites l’exercice suivant : https://www.w3schools.com/code/tryit.asp?filename=GKJN3H6EGJYF
(cliquez sur le bouton “Run” pour prévisualiser le rendu du codage).

Personnaliser un gabarit de cv

Je vous propose maintenant de personnaliser le gabarit de CV que vous avez téléchargé en début de cours avec les autres gabarits. Vous pouvez le télécharger seul à l’aide du bouton ci-dessous.

Utilisez le thème chromatique de votre choix, placez votre photo ou l’image qui vous semble la plus appropriée, adaptez les textes à votre parcours professionnel

Changer les icônes utilisée sur le CV

Le gabarit de CV proposé utilise les icônes de la bibliothèque Font Awesome version 4.7 (notez bien ce numéro de version…).

Comme pour des feuilles de style ou des polices Google Fonts, Les icônes sont appelées depuis les serveurs de Font Awesome. Vous trouvez le lien d’appel des icônes dans le head du code source.

➜ Repérez dans le code HTML les endroits où sont utilisées des icônes (entre balises <i> et </i>. Pour les modifier, changez simplement le nom des icônes. Vous trouverez toutes les icônes disponibles dans cette version de Font Awesome sur le site https://fontawesome.com/v4.7.0/icons/ 😉

Dans un gabarit basé sur w3.css, n’utilisez pas le code proposé sur le site de Font Awesome ! Modifiez juste le nom de l’icône dans la portion de code source concernée.

Activer les liens sur les petites icônes du footer

Pour les plus perfectionnistes d’entre vous va se poser le problème de l’activation des liens en relation avec les icônes de réseaux sociaux, en pied de CV. Voici ce que Sophie a expliqué à Éléonore à ce sujet :

C’est comme quand tu insères un lien pour aller vers un site internet et que tu dois cliquer sur un texte pour y aller, dans ce cas là tu tapes

<a href="https://copiercollerdunomdusite.fr">texte qui va supporter le lien</a>

Ça c’est la balise type.

Si tu ne veux pas que ce soit du texte cliquable mais plutôt une icône, il faut que tu « appelles » dans ta page l’icône (grâce à une feuille de style dédiée).

Ici les icônes sont déjà appelés (via une feuille de style fournie par le site FontAwesome.com et les classes qu’elle contient).

<i class="fa fa-linkedin w3-hover-opacity"></i>

Du coup, il suffit juste de mettre l’icône à la place de « texte qui va supporter le lien », ce qui donne : 

<a href="https://www.linkedin.com/in/sophie-rxxr-1a157a98/" target="_blank"><i class="fa fa-linkedin w3-hover-opacity"></i></a>

Et bien sûr, tu mets un petit target= »_blank » (comme placé dans le lien que je viens de te montrer), pour que la fenêtre s’ouvre dans un nouvel onglet.

“Tout est dans le target !” a ajouté Sophie 😉

Grilles réactives avec w3.css

Quand vous aurez terminé de personnaliser le gabarit du CV, je vous invite à aller voir comment il est possible de rendre une page plus réactive (responsive) sur petits écrans.

La première solution proposée se trouve dans l’onglet W3.CSS responsive.

➜ Voici un premier exercice à réaliser (transformer une rangée de 2 colonnes en rangée de 3 colonnes) : https://www.w3schools.com/code/tryit.asp?filename=GKKEN07VCLAM

Attention, il faudra modifier les titres et les textes que vous dupliquez pour que cela reste cohérent. Vous pouvez même traduire les contenus en français. Mieux encore, vous pouvez saisir un contenu qui fasse sens avec la disposition des divisions !

Pour égaliser la hauteur des divisions, je vous propose d’examiner le code de cet exercice :

https://www.w3schools.com/code/tryit.asp?filename=GKKMHQE0V65J

➜ Je vous propose maintenant un dernier exercice, à faire en local, avec Brackets. Vous me ferez le seul fichier “index.html” modifié. Je le placerai dans le dossier dans lequel sont déjà placées les css et je pourrai voir ce que vous avez fait.

Réalisations avec w3.css

W3.CSS est bien moins utilisé que Bootstrap. Il existe cependant plusieurs sites revendiquant leur appui sur cette boîte à outil assez simple à prendre en main. L’abondante documentation en ligne permet à des personnes autodidactes de produire des sites de qualité satisfaisante.

➜ Pour les trouver, avec Google ou Duckduckgo, saisissez entre guillemets “Made with w3css” ou “Powered by w3css ». Consultez à la fois les résultats “textes” et “images”.

En voici quelques sites réalisés avec w3.css :

Voici des cv réalisés avec w3.css :

Vous trouverez sur l’ancien support de cours une liste de sites réalisés avec w3.css. Quelques sites ne sont plus accessibles. D’autres ont évolué vers des présentations plus sophistiquées. Vous constaterez une nette prédominance de sites scientifiques par rapport à la sélection 2020. Vous retrouverez aussi des sites que j’ai présentés cette année. Ils sont toujours d’actualité et montrent des contenus de qualité… c’est bien là l’essentiel !

W3.CSS et Bootstrap

Le framework CSS le plus utilisé est sans aucun doute Bootstrap. la courbe d’apprentissage de Bootstrap est cependant plus raide que celle de W3.CSS. Plusieurs articles comparent les 2 frameworks.

Le cours sur les frameworks d’Olivier Nocent, permet de se faire une idée des différences et des points communs entre les 2 boîtes à outils.

W3.CSS vs Bootstrap est un comparatif entre le ténor des frameworks CSS et le framework que vous venez de découvrir.

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne