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.

Catégories
W3CSS W3CSS-cours

Créer son portfolio avec w3.css

Dans ce cours nous allons voir comment personnaliser un gabarit de portfolio mis au point à l’aide du framework w3.css. Les prérequis sont les suivants :

  • utiliser l’éditeur de code Brackets
  • identifier et modifier la structure HTML d’un site
  • identifier et modifier une feuille de style CSS
  • rédiger des textes pour la publication en ligne
  • collecter, concevoir et traiter des images pour le Web

Une partie de ce cours est un rappel des fonctionnalités de base de w3.css. Elles ont été vues lors du cours intitulé Se familiariser avec w3.css

Télécharger les gabarits

Pour vous permettre de réaliser rapidement un portfolio de qualité professionnelle, je mets à votre disposition plusieurs gabarits de portfolios. Collectés sur le site de w3schools, ils ont été optimisés pour vous permettre de gagner du temps lors de leur mise en œuvre.

Vous êtes invités à télécharger les gabarits optimisés pour en prendre connaissance et analyser la manière dont ils ont été construits.

➜ La solution optimale pour travailler sur l’ensemble de ces ressources est d’ouvrir le dossier contenant tous les gabarits avec Brackets (Fichier > Ouvrir un dossier). La liste de tous les gabarits s’affiche alors dans la colonne de gauche, dans Brackets, vous permettant d’accéder à l’ensemble des contenus mis à votre disposition.

Pour l’utilisation et la personnalisation de Brackets, je vous renvoie vers le cours des fondamentaux de la création de site intitulé Personnaliser Brackets.

Pour l’utilisation du framework w3.css, voir le cours intitulé Se familiariser avec w3css. L’utilisation de w3.css est détaillée sur le site w3schools.com que je vous invite à consulter ce site aussi souvent que nécessaire.

Les gabarits mis à votre disposition sont présentés sous leur forme originale (avant optimisation par mes soins) sur cette page : https://www.w3schools.com/w3css/w3css_templates.asp

La structure d’un portfolio

Disposés sur une seule page ou sur plusieurs pages Web, vous retrouverez dans tous les portfolios les éléments, sections ou pages suivantes :

  • un menu permettant la navigation quel que soit la taille de la fenêtre de navigation
  • une têtière mentionnant le nom du studio ou du designer (parfois réduite à une mention dans le menu)
  • une biographie du designer à laquelle est associée la mention des compétences du designer et un cv téléchargeable au format pdf
  • des listes de services auxquelles sont parfois associés des témoignages de clients, des statistiques de satisfaction et des listes de références
  • une présentation de travaux ou de projets (le portfolio proprement dit), souvent sous forme de grille dont le comportement varie selon les gabarits proposés
  • une section contact mentionnant les diverses possibilités offertes pour rencontrer le designer, éventuellement étayée par un plan d’accès à son bureau
  • un pied de page comportant quelques mentions utiles

Il est recommandé, à un niveau professionnel, d’expliquer dans son portfolio comment nous travaillons. Il est donc envisageable de créer une section « Méthodologie », en plus de celles mentionnées plus haut.

Retrouvez les différentes éléments mentionnés dans les gabarits mis à votre disposition. Vous pouvez aussi repérer ces éléments dans les portfolios de graphistes connus.

Une liste de portfolios est disponible sous forme de carte XMind à cette adresse (l’inscription à Biggerplate est obligatoire pour pouvoir télécharger la ressource) : https://www.biggerplate.com/mindmaps/6cV6PxzD/portfolios-de-graphistes-fev-2020

En savoir plus

Voici un diaporama sur les différentes options s’offrant à un designer graphique souhaitant présenter ses travaux sans dépenser une fortune 😉

Les images de travaux

La grille de présentation des travaux permet de prendre connaissance des projets menés par vos soins, dans le cadre de votre formation, dans le cadre de votre stage en entreprise ou à titre personnel. Cette grille est constituée d’images dont le comportement peut être différent d’un gabarit à l’autre.

Repérez les comportements des images dans les modèles mis à votre disposition. Le portfolio intitulé « darkPortfolio-w3css » présente, dans sa section « Travaux » trois comportement d’images différents (un comportement par colonne d’images). Cela vous permettra de repérer les avantages et les inconvénients de chacun de ces comportements.

Inventaire des comportements d’image

  • L’image ne réagit pas au survol du curseur ou au clic. C’est le cas dans quelques modèles proposés sur le site w3schools.com. Observez par exemple le comportement des images du template Photolio ou celle du gabarit Art Template
  • Lorsque nous cliquons sur l’image, celle-ci s’ouvre dans une nouvelle fenêtre. C’est le cas des images de la première colonne du gabarit « darkPortfolio-w3css »
  • Lorsque nous cliquons sur l’image, une fenêtre modale s’ouvre et nous permet de voir l’image en plus grand. L’image est parfois accompagnée d’une légende. C’est le cas des images de la deuxième colonne du gabarit « darkPortfolio-w3css ». C’est aussi le cas des images du template en ligne People Portfolio Template. Un clic sur l’image referme la fenêtre modale.
  • Lorsque nous cliquons sur l’image, une nouvelle page s’affiche dans notre navigateur. L’image sur laquelle nous venons de cliquer est présentée en grand, accompagnée parfois d’autres images (ayant elles aussi des comportements variables). C’est le cas des images de la troisième colonne du gabarit « darkPortfolio-w3css » ou des photographies présentées sur le gabarit « BlackAndWhitePhoto-w3css ».

La préparation des contenus

La mise en œuvre la plus simple consiste bien sûr à présenter les travaux de telle manière que nous n’ayons pas à multiplier le nombre d’images par projet.

Chacun choisit donc le mode de présentation des travaux qui lui convient le mieux. Quel que soit le choix effectué, il s’agit maintenant de lister les contenus à produire.

Lister les images à produire

Il faut établir une liste précise de ses besoins iconographiques pour ne pas être pris au dépourvu au moment de finaliser son portfolio.

Lister les dimensions de images à produire

Dans les gabarits que je mets à votre disposition, certaines “images” ont été générées par le site placeholder.com. Leurs dimensions sont affichées automatiquement (paramétrée directement dans le code d’appel de l’image). Il s’agit d’images sans sujet, résumées à un aplat de couleur (paramétrable) et un texte (également paramétrable). Cet outil est utilisé en maquettage Web pour faire du « zoning » (déterminer la place occupée par les contenus).

➜ Faites vos tests d’affichage d’images en utilisant placeholder.com et déterminez la taille optimale des images que vous souhaitez utilisez. Notez les dimensions requises et préparez vos images de travaux en conséquence !

Choisir un style de présentation des images de travaux

Les grilles d’images nécessitent parfois de penser à l’unité graphique de la page de présentation des travaux. Pour cela, w3schools.com nous aide à appliquer quelques astuces.

Plusieurs options s’offrent à vous :

  • Utiliser un détail de l’image totale, à utiliser comme image d’appel positionnée en « maçonnerie »
  • Appliquer le même filtre sur toutes les images de la grille
  • Assombrir toutes les images de la grille et révéler les véritables couleur d’une image au survol de celle-ci par le curseur
  • Animer les images à l’ouverture de la page ou de la fenêtre modale
  • etc.

Voyez les pages suivantes sur w3schools.com :

Ne soyez pas trop ambitieux et notez que l’impact visuel d’un portfolio repose en grande partie sur la qualité et sur l’unité des images présentées.

Lister les textes à produire

➜ Après avoir listé les images à produire il convient de lister les textes à rédiger. Le plus délicat est souvent la rédaction de la biographie.

Le curriculum vitae proposé en téléchargement est à mettre à jour ou à concevoir professionnellement. Réalisé dans InDesign et exporté au format pdf, il démontre parfaitement vos compétences acquises en PAO. Il est également possible d’utiliser les services en ligne de la plateforme Canva.

➜ Pour trouver de l’inspiration en matière de formulation des textes de votre biographie, je vous invite à consulter les portfolios de plusieurs graphistes. Utilisez la liste de portfolios disponible sous forme de carte Xmind téléchargeable sur Biggerplate (après inscription).

Si vous souhaitez insérer un logo personnel dans votre portfolio, il vous faudra mener à son terme la démarche expliquée dans le cours intitulé Designer un logo. Là encore, si vous êtes pressés, vous pouvez utiliser les services de la plateforme Canva. Vous y serez guidés dans la démarche de conception de votre logo. Dans les gabarits que je vous ai fournis, une simple icône est utilisée.

La personnalisation des gabarits fournis

À cette étape de la préparation de votre portfolio, le plus simple est d’utiliser l’un des gabarits fournis en l’état, sans en modifier ni les polices de caractères, ni les couleurs et encore moins l’agencement des contenus.

Toutefois, je vais vous indiquer comment effectuer quelques modifications élémentaires en vous rappelant comment utiliser le framework w3.css. Vous agirez ensuite comme bon vous semblera. 😉

➜ N’hésitez pas à consulter le cours intitulé Se familiariser avec W3CSS.

L’utilisation des identifiants « class »

Comme tous les frameworks CSS, w3.css utilise les identifiants HTML de classe, pour appliquer aux éléments ainsi identifiés des instructions CSS préétablies. Une classe permet de cibler un élément HTML en vue de lui attribuer des propriétés définies dans une feuille de style.

Par exemple, avec le framework w3.css, si un élément HTML est identifié avec la classe « w3-red », la couleurs d’arrière-plan de cet élément sera rouge et le texte qu’il contient sera blanc. Dans le code source des gabarits de portfolios fournis vous constaterez que les classes utilisées identifient souvent des éléments <div> (divisions génériques).

➜ La capture d’écran ci-dessus a été faite à partir de l’éditeur de code Try-it, intégré à w3school.com. Si vous effectuez un changement dans le code source, avec cet éditeur, cliquez sur le bouton “Run” pour afficher le résultat dans l’espace de prévisualisation. Vous pouvez retrouver cet exemple sur w3shools.com.

Si vous souhaitez en apprendre davantage sur l’utilisation des classes (et des id) en général, vous pouvez consulter le cours de Pierre Giraud consacré aux attributs HTML class et id.

L’appel des CSS et des polices de caractères

Pour que les classes utilisées dans le code HTML soient effectives, il est indispensable que la feuille de style CSS correspondantes soit chargée par le navigateur. Tout se passe dans le « head » de la page (ou tout simplement au dessus du « body »). Le feuille de style du framework est nommée « w3.css », comme le framework lui-même !

Les polices de caractères utilisées sont appelées depuis le serveur de Google Fonts, où elles ont été sélectionnées. Pour savoir comment procéder pour charger une police de caractères sélectionnée sur Google Fonts puis pour l’utiliser dans une page Web, je vous recommande de visionner la vidéo qui suit.

Le code présenté dans cette vidéo est disponible sur CodePen. Vous y accèderez directement par le lien suivant :

https://codepen.io/believemy/pen/gOaRXGL

➜ En ce qui vous concerne, le lien <link … > se trouve bien dans le <head> des pages de vos gabarits et si vous consultez les feuilles de style de personnalisation de ces pages (nommés « style.css »), vous constaterez qu’il est bien spécifié que les polices chargées sont utilisées dans le corps des pages concernées. Les instructions contenus dans le fichier style.css annulent celles contenues dans le fichier w3.css (elles sont prises en compte prioritairement puisque style.css est appelé après w3.css).

➜ Vous pouvez maintenant modifier sans difficulté la police de caractères utilisée dans tel ou tel gabarit. Choisissez votre police avec soin et optez toujours pour la simplicité et la lisibilité. Pensez bien à modifier à la fois le <link> dans la page HTML et l’instruction « font-family » dans le fichier « style.css » 😉

Si vous souhaitez utiliser la méthode @import dans la feuille de style personnalisée de tel ou tel gabarit, rien ne vous en empêche. C’est en effet ce que recommande l’auteur de la vidéo proposée plus haut, mais ce n’est pas avec cette méthode que les gabarits ont été construits à l’origine par w3schools.

➜ N’hésitez pas, en revanche, à appeler toutes les fontes dont vous aurez besoin (light, regular, bold, black, etc), que ce soit avec la méthode link” ou @import.

Les icônes Font Awesome

Les gabarits de portfolios construits avec w3css utilisent les icônes de la bibliothèque Font Awesome version 4.7 (notez bien ce numéro de version…).

Comme pour les feuilles de style et les polices de Google Fonts, les icônes sont appelées depuis les serveurs de Font Awesome. Vous avez déjà fait ce constat sur les captures d’écran précédentes.

➜ J’ai mentionné dans le commentaire encadré sur l’image ci-dessous l’adresse du site sur lequel vous pouvez choisir d’autres icônes disponibles (si vous souhaitez remplacer celles proposées sur les pages fournies).

➜ Repérez dans le code HTML les endroits où sont utilisées des icônes (entre balises <i> et </i>. Changez simplement le nom des icônes et vous verrez s’afficher en remplacement l’icône que vous avez choisie sur le site https://fontawesome.com/v4.7.0/icons/ 😉

Utilisez des photos de maquette

Certains gabarits fournis utilisent les services du site placeholder.com pour importer des images présentant un fond uni avec la mention des dimensions de l’image.

Vous pouvez également utiliser les services du site picsum.photos (Lorem Picsum) pour insérer des photographies aux dimensions voulues. Par défaut, les photos sont choisies aléatoirement dans une liste de photos disponibles (provenant de la banque d’images Unsplash). Vous pouvez choisir la photo souhaitée dans la liste disponible. Vous pouvez aussi appliquer un filtre flou et éventuellement un filtre gris.

Le paramétrage des grilles

Les gabarits de porfolios fournis comportent tous des grilles sur lesquelles sont positionnées les images des travaux présentées. Leur affichage (nombre de colonnes et de rangées) dépend de la largeur de la fenêtre de navigation (et donc de la taille de l’écran en navigation plein écran…)

Les grilles Half-Third-Quarter et Small-Medium-Large

Le framework w3.css utilise 2 types de grilles dont la documentation sur le site de référence de w3schools se trouve sur ces 2 pages :

Le premier type de grille, désigné comme méthode adaptative (réactive ou responsive), permet de diviser une rangée en colonnes occupant une moitié, un tiers, deux tiers, un quart ou trois quart de l’espace disponible en pleine largeur. Dans ce cours, nous nommerons ce type de grille « half-third-quarter » ou grille HTQ.

Le second type de grille permet de diviser une rangée en colonnes de 1 à 12 fractions (ou unités) de large, en déterminant la largeur des colonnes sur petits écrans (small), sur écrans moyens (medium) et larges écrans (large). Dans ce cours, nous nommerons ce type de grille « small-medium-large » ou grille SML

Repérez dans le code source des gabarits de portfolios fournis quel est le type de grille utilisée (il est possible que les 2 types de grilles soient imbriqués ou utilisés successivement).

Rappel : dans la grille présentée ci-dessus (gabarit « parallaxTemplate-w3css), les images sont appelées depuis le site placeholder.com, un service en ligne permettant de placer des images neutres dans une maquette, en affichant les dimensions de l’image appelée (et non les dimensions de l’image dans la page Web…)

➜ En modifiant le nom des classes utilisées, vous pouvez modifier l’apparence de la grille du portfolio que vous souhaitez personnaliser. Attention, si vous passez d’une division aux quarts à une division aux tiers, il faudra supprimer une image dans la rangée concernée. Si vous réalisez l’opération inverse, n’oubliez pas d’ajouter une image.

➜ Notez bien que la disposition des images dans une grille est une chose distincte du comportement des images lorsque vous cliquez sur l’une d’elles.

Aller plus loin en intégrant des textures

Je vous propose de personnaliser un gabarit de portfolio basé sur une navigation par l’intermédiaire de cartes cliquables. Basé sur le gabarit Starter, cette version s’en éloigne cependant par l’ajout de nombreuses fonctionnalités dont des effets au survol (très faciles à mettre en œuvre), créés à partir de la feuille de style imagehover.css.

Ce gabarit intègre de nombreuses textures, dans le but de vous montrer le potentiel de ce type de rendu graphique. Il est nécessaire de faire un choix et de se limiter à tel ou tel type de texture.

La page “galerie.html” présente de nombreuses manières d’afficher des images, depuis la grille de cartes jusqu’au diaporama actionné manuellement en passant par les images en onglets et les grilles de cellules.

➜ Les différentes pages de ce gabarit peuvent servir de base à de nombreux sites “one page” ou multipages. Exercez-vous en créant des sites en complément des affiches que vous réalisez lors de la formation PAO-Tech (expo requin blanc, international jazz day, etc).

Aller plus loin en utilisant Bootstrap

Pour élargir vos connaissances sur les grilles, je vous recommande la lecture du cours d’Olivier Nocent sur les frameworks CSS. Il y est question de Bootstrap, un autre framework CSS avec lequel sont construits de nombreux gabarits de portfolios. J’ai optimisé quelques templates réalisés avec Bootstrap. Je vous propose de les télécharger si vous souhaitez les utiliser.

Personnalisation du gabarit Freelancer

La syntaxe des classes de Bootstrap est moins intuitive que celle de w3.css mais avec l’aide de la documentation en ligne, disponible sur w3shools.com, vous devriez parvenir à personnaliser ces gabarits comme vous le souhaitez.

Bootstrap n’est pas au programme de la préparation au Titre Pro Infographiste Metteur en Page (niveau Bac). Par contre il est abordé, après avoir vu W3.CSS, lors de la préparation au Titre Pro Designer Web (niveau BTS).

Pour les plus curieux d’entre les apprenants préparant le titre pro IMeP, n’hésitez pas à vous lancer. Vous risquez juste de devoir ajouter une ligne de plus à votre cv… ou augmenter le seuil de la barre de compétence “Design Web” sur votre portfolio 😀

➜ J’ai proposé aux stagiaires les plus avancés en webdesign de transformer le gabarit Bootstrap du portfolio ci-dessus (Freelancer) en gabarit W3.CSS. Le défi a été relevé et nous disposons aujourd’hui d’une partie de la structure de la page d’accueil… Affaire à suivre !