Catégorie : FCS

Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.

Pour tirer profit de ce cours, vous devez avoir suivi les cours intitulés Le fonctionnement du Web et Contenu d’un dossier de page Web.

Utiliser une plateforme d’édition en ligne

Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.

Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.

Utiliser la plateforme Netboard

Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.

Un site Netboard complet détaille le mode d’emploi de la plateforme : https://jmd85.netboard.me/presentation/?tab=132247

➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessous — un prof d’anglais explique à d’autres profs comment utiliser Netboard.

Netboard peut donc servir à :

• regrouper et partager des collections de liens (veille informationelle)
• organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
• regrouper en mode collaboratif des documents sur une thématique
• rassembler et partager une documentation sur un sujet précis
• maquetter un site Web en testant la répartition des contenus sous différents onglets
• etc.

En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.

Utiliser Google Sites

Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.

Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.

Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.

➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.

Vous trouverez en ligne des tutoriels plus détaillés (attention de bien sélectionner les articles les plus récents car l’éditeur classique n’est plus disponible depuis novembre 2020). Voici un exemple de tuto assez complet : https://fr.techtribune.net/google/google-sites-comment-utiliser-le-createur-de-site-web-de-google/102077/

D’autres vidéos vous sont proposées sur YouTube :
• Comment Utiliser Google Sites (réalisée peut-être avec une voix ia)
• Cooment faire un site internet avec Google Sites (plus ancien mais avec une présence plus crédible…)

Autres plateformes de publication en ligne

Padlet

Padlet est une plateforme de publication de tableaux ou « padlets » à usage initialement académique. Au delà de trois tableaux, le service est payant (la création de 20 tableaux revient à environ 10 euros par mois). La prise en main de l’outil est très rapide.

La diversité des modèles de tableaux encourage une publication sous diverses formes.

https://padlet.com/yvesgoguely/sitePadlet (modèle personnalisé de blog)

Canva

Canva est une plateforme d’édition plurimédia permettant de réaliser de très nombreux produits de communication. La platefome est utilisable gratuitement mais de nombreuses fonctions sont alors inaccessibles. L’abonnement annuel se monte à 110 euros par an (9,17 euros par mois).

Canva permet notamment de créer des site Web. Les sites Web de Canva se présentent sous forme de site “onepage” divisés en section. De nombreux modèles sont proposés pour guider la mise en forme.

https://urls.fr/OtrnTP (modèle de portfolio)

Utiliser un éditeur WYSIWYG

À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.

Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide.
➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.

Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).

Utiliser des éditeurs WYSIWYG gratuits

Parmi les outils disponibles en ligne je vous propose de tester les outils suivants (faciles à prendre en main) :

• HTML5 Editor
• Editeur HTML de One Tools
• Editor HTML Online
• https://wysiwyghtml.com
• https://iotools.cloud/fr/tool/wysiwyg-html-editor/

Ces éditeurs gratuits permettent de générer un code HTML propre mais ne disposent pas de fonction d’exportation des contenus en HTML. Ces éditeurs ont utiles à ceux qui doivent injecter du code HTML dans un système prenant en charge la stylisation globale d’un site ainsi que sa mise en ligne.

Je propose donc d’utiliser un éditeur Markdown puis d’exporter le texte codé sous forme de fichier HTML stylisé.

Utiliser un éditeur Markdown

Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.

Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :

La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :

Vous pouvez visualiser cette page en ligne en cliquant sur ce lien : https://graphizm.fr/fcs/stackedit/langage-markdown-toc.html

Autres éditeurs Markdown

Dans le document ci-dessus je mentionne l’éditeur en ligne dillinger.io. Dillinger, aussi facile à prendre en main soit-il, exporte un code HTML beaucoup moins propre que StackEdit. Après une remise en forme du code exporté depuis Dillinger, on se retrouve avec 5600 lignes d’instructions CSS et un nombre incalculable de classes (identifiants d’éléments HTML). Ce constat met en valeur la sobriété de StackEdit.

Le document mentionne également Typora, un éditeur Markdown multiplateformes, hors ligne mais payant (Un peu plus de 16 euros TTC). Il en existe plusieurs autres, gratuits, dont Macdown et PanWriter, pour MacOs.

La personnalisation des pages HTML exportées

Une page HTML proprement codée structure le contenu rédactionnel. StackEdit associe une stylisation simple au code HTML. Ainsi paramétrée, Une page HTML exportée depuis StackEdit est transférable sur un serveur, présentant un contenu lisible (identique à ce qui était affiché dans la fenêtre de prévisualisation de l’éditeur).

La stylisation par défaut de StackEdit peut être modifiée en utilisant une feuille de style dite “classless”, en remplacement de la feuille de style proposée par défaut.

Cette opération nécessite l’usage d’un éditeur de code, pour modifier le lien d’appel de la feuille de style utilisée, dans l’entête du code source de la page Web.

Vous pouvez voir des stylisations “classless” sur le site classlesscss.com. Plusieurs feuilles de style “classless” étant disponibles sur des serveurs (CDN), cela facilite la personnalisation des pages exportées depuis StackEdit.

L’utilisation de StackEdit et la personnalisation d’une page HTML avec un éditeur de code sont détaillé dans les autres cours de la formation FCS niveau 1.

Utiliser d’autres modes de publication en ligne

Je me contenterai de les mentionner, sans entrer dans les détails, car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3).

Utiliser des frameworks CSS

Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.

Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation FCS, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.

Utiliser des CMS sans base de données

Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.

Pour en apprendre davantage sur le sujet, je vous invite à consulter mes ressources mises en ligne sur Netboard.

Utiliser des CMS classiques et des plateformes de création de sites

Le CMS le plus populaire est de loin WordPress. Viennent ensuite Shopify, Wix, Squarespace, Joomla et Drupal.

Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.

Dans ce cours vous allez découvrir comment fonctionne le Web et réaliser plusieurs activités en lien avec ce sujet. De nombreux liens vers des ressources externes vous seront proposés, vous pourrez les explorer tranquillement, le moment venu.

Utiliser une analogie pour comprendre le Web

Pour commencer, je vous invite à lire les trois premières partie de l’article intitulé “Le fonctionnement du Web”, sur le site developer.mozilla.org :

• Des clients et des serveurs
• Les autres composants du Web
• Donc que se passe-t-il, exactement ?

L’idée à laquelle je vous invite à être attentif est celle ci :

“Faisons un parallèle entre le Web et une rue. D’un côté de la rue, il y a une maison qui correspond au client. De l’autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.”

➜ Faites un dessin commenté (façon sketchnoting) en vous inspirant de l’analogie développée dans la deuxième partie de l’article mentionné ci-dessus.

Votre dessin commenté sera partagé pour en contrôler l’exactitude (mais non la qualité graphique) 😉

Créer une infographie

Pour fixer davantage dans la réalité les concepts abordés à l’étape précédente, je vous propose de réaliser vous même une infographie en utilisant des éléments graphiques mis à votre disposition (cliquez sur l’image ci-dessous).

Si vous ne parvenez pas à faire glisser les éléments de la zone de droite vers la zone de gauche, rafraîchissez la page (ctrl/cmd-R).

➜ Voici les consignes à respecter pour positionner les différents éléments constitutifs d’un large réseau informatique.

➜ Pour connecter les éléments du réseau entre eux, je vous invite à utiliser (en présentiel, sur Mac) l’application Aperçu. En effet, cette application dispose d’une fonctionnalité permettant de simuler un cable de liaison entre 2 box. Il vous faudra pour cela effectuer une capture d’écran de votre “réseau”.

Vous pourrez légender votre infographie en utilisant Aperçu ou l’application Skitch, disponible sur votre poste de travail en présentiel.

Avant de passer au chapitre suivant, je vous invite à terminer la lecture de l’article publié sur developer.mozilla.org. Vous allez en effet avoir besoin de quelques informations supplémentaires pour bien comprendre les vidéos proposées plus bas.

Visionner quelques vidéos

La première vidéo que je vous propose de visionner survole le sujet mais sans oublier aucun point essentiel.

La seconde vidéo offre un panorama complet de ce qui se passe lorsque vous regardez une vidéo en ligne. Pour éclairer leur propos, les auteurs abordent tous les points avec lesquels vous vous êtes déjà familiarisés (plus quelques autres dont je vous ai peut-être déjà parlé…).

Faire un peu d’histoire

L’histoire du Web est pleines d’anecdotes amusantes ou dramatiques. Elle commence beaucoup plus tôt qu’on se l’imagine et connait des rebondissements inattendus. Voici quelques ressources disponibles pour parfaire votre culture Web.

Liens sur l’histoire d’Internet

• Sur Wikiwand :
  https://www.wikiwand.com/fr/Histoire_d%27Internet
• Sur evolutionoftheweb.com :
  http://www.evolutionoftheweb.com/?hl=fr
• Sur le blog du modérateur :
  https://www.blogdumoderateur.com/10-anecdotes-sur-internet/

Liens vers Wikipedia

• Charles BABBAGE
  https://fr.wikipedia.org/wiki/Charles_Babbage
• Alan TURING
  https://fr.wikipedia.org/wiki/Alan_Turing
• Tim BERNERS-LEE
  https://fr.wikipedia.org/wiki/Tim_Berners-Lee
• World Wide Web
  https://fr.wikipedia.org/wiki/World_Wide_Web
• Bill GATES
  https://fr.wikipedia.org/wiki/Bill_Gates
• Steve JOBS
  https://fr.wikipedia.org/wiki/Steve_Jobs
• Google
  https://fr.wikipedia.org/wiki/Google

Pour vous consolider vos acquis en matière de création de site, je vous recommande un livre de Sonia BAIBOU : Oh my code ! Je crée mon premier site Web. Certainement le meilleur ouvrage publié sur le sujet !

Je vous fais part du texte placé en 4e de couverture…

PLONGEZ DANS LE CODE MAIS SANS VOUS NOYER !

Je veux apprendre à coder, mais par où commencer ? Par ce livre qui va vous initier au développement web, au travers d’un projet de création de site Internet avec HTML, CSS et JavaScript. Textes, images, liens, design responsive, tout y est pour faire de ce projet fil rouge, éprouvé et approuvé en ateliers de coding, un véritable condensé de connaissances.

Conçu spécialement pour les débutants et les débutantes en programmation, souhaitant découvrir l’envers du décor d’une façon 100% pratique, cet ouvrage qui va droit au but vous délivrera un contenu de qualité et d’une grande pédagogie, héritée de l’expérience de formatrice de son auteur. Il s’adresse à tous les curieux du code, que ce soit pour de nouvelles perspectives professionnelles, une reconversion ou par défi personnel.

C’est clair, le ton est sympathique, l’approche est très progressive et surtout, cela rejoint parfaitement ce que nous apprenons tout au long de la formation FCS ! Les illustrations sont nombreuses et toujours pertinentes, le site proposé en fil rouge est simple et motivant.

Le livre va beaucoup plus loin que le programme de la formation FCS, mais “c’est tout l’intérêt du bazar”… Vous pourrez progresser en toute autonomie, réviser sans vous prendre la tête et retrouver toutes les manipulations essentielles permettant de publier son site chez un hébergeur.

Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transférer le dossier d’un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d’Alwaysdata.

Lors du cours précédent (Utiliser les services gratuits d’Alwaysdata), vous avez ouvert un compte gratuit chez l’hébergeur Alwaysdata. Je vous ai indiqué comment récupérer les paramètres de connexion FTP dont vous allez avoir besoin. Assurez-vous de les avoir à portée de main !

Rappel

Vous disposez maintenant de toutes les données de paramétrage pour pouvoir mettre votre site en ligne en utilisant le client FTP Filezilla.

➜ Si ce logiciel n’est pas installé sur votre poste de travail, je vous invite à l’installer dès maintenant, en veillant à installer Filezilla-client depuis l’adresse https://filezilla-project.org/download.php?type=client.

Attention, soyez très vigilants : l’adresse filezilla.org (sans le ”-project”…) est un site malveillant ! N’essayez même pas d’y aller !

Les tutos

Je ne vais pas réinventer le fil à couper le beurre, il existe de nombreux tutos en ligne pour apprendre à utiliser Filezilla. Voici ma sélection.

Les vidéos

L’installation de Filezilla

Dans la vidéo ci-dessous, l’auteur va droit au but, installe Filezilla et transfère un fichier PSD dans un dossier nommé “public_html”. Pour aller plus loin, nous sommes invités à regarder une autre vidéo… sur laquelle il envisage de nous montrer comment installer WordPress ! Ben non, cela ne nous concerne pas (… pas maintenant du moins) mais, pour tout ce qui nous est présenté, du début jusqu’au transfert du fichier PSD, je valide !

L’utilisation de Filezilla

Dans la vidéo suivante, tout commence bien puis l’auteur s’emmêle un peu les pinceaux avec les ports 21 et 22 et les protocoles ftp et sftp… mais pour la suite c’est impeccable. Le dossier public côté serveur est un dossier “www” (comme chez Alwaysdata)… cela nous va donc parfaitement. Validé !

L’auteur de la vidéo ci dessus (Fabien Numelion) propose sur sa chaîne YouTube d’autres vidéos susceptibles de vous intéresser…

Les tutos écrits (et illustrés)

J’ai repéré il y a déjà longtemps un article qui expose les choses de manière détaillée. Filezilla a relooké légèrement son interface depuis le moment où cet article a été rédigé mais les boutons et les fenêtres n’ont pas changé de place…

Vous pouvez donc lire Comment ça marche Filezilla ?. Pour les curieux ou ceux qui souhaitent se rafraîchir la mémoire sur un point ou deux, il y a des liens vers d’autres articles comme C’est quoi un serveur FTP ?. On est en plein dans le sujet !

La pratique

Concrètement, il va falloir transférer dans le dossier “www” situé sur le serveur d’alwaysdata le dossier complet de votre site personnalisé situé en attendant sur votre poste de travail. En utilisant Filezilla comme cela vous a été montré et expliqué plus haut, tout devrait marcher comme sur des roulettes !

Précautions à prendre

Avant de vous lancer, vous allez faire attention à quelques petites choses…

Le fichier index.html

Il est impératif, pour que votre site s’affiche dans la fenêtre du navigateur de vos futurs lecteurs en saisissant une simple URL, que le dossier de votre site contienne un fichier nommé “index.html”. C’est la page d’accueil… même si elle est la seule page du site. Si le fichier html que vous voulez montrer au reste du monde porte un autre nom, renommez-le “index.html” !

Si vous le nommez autrement, il sera nécessaire de saisir le nom du fichier à la fin de l’url d’accès au dossier du site.

Les images dans le dossier img

Inutile de transférer sur le serveur d’Alwaysdata des images de maquette qui n’ont pas été utilisé dans la page HTML. Veillez à ce que vos images soient correctement compressées. Vos images doivent être à la dimension maximale de leur utilisation dans le site (affiché sur grand écran)… pas plus ! Compressées au format jpeg (qualité élevée ou 60%), vos photos ne surchargeront pas votre espace d’hébergement.

Si vous chargez excessivement l’espace mis gratuitement à votre disposition (100 Mo maximum), vous ne pourrez pas héberger votre portfolio et le CMS avec lequel nous travaillerons au niveau 3 de la formation !

Le nom du dossier

L’url permettant d’accéder à votre compte est de la forme nomducompte.alwaysdata.net. Quand vous aurez transféré votre dossier de site, pour accéder au fichier “index.html” il faudra saisir une adresse sous la forme nomducompte.alwaysdata.net/nom-du-dossier.

L’adresse de votre site se termine par le nom que vous allez donner au dossier qui contient le fichier “index.html” et les dossiers dépendants (le dossier “css”, le dossier “img”, etc.).

Nommez votre dossier de site sans mettre de majuscule ou de chiffre au début du nom, sans lettres accentuées ni espaces. Utilisez de préférence les tirets hauts (tirets du 6) pour séparer les mots. Soyez concis et explicites !

➜ Une fois ces précautions prises, vous pouvez transférer le dossier correctement nommé de votre poste de travail vers le dossier “www” (dans le dossier… pas à côté du dossier “www”).

Test de bon fonctionnement

Si tout s’est bien passé, vous devriez accéder à votre site en saisissant dans votre navigateur l’adresse nomducompte.alwaysdata.net/nom-du-dossier.

En transmettez-moi cette adresse, je pourrai voir votre site, comme tous ceux à qui vous communiquerez la même adresse !

➜ Transférez un autre dossier de page Web, nommé convenablement (avec son fichier “index.html” à l’intérieur)… Modifiez ensuite le nom du dossier à la fin de l’url précédente : vous devriez accéder à votre deuxième site Web !

Voilà qui vous ouvre de nouvelles perspectives pour l’avenir 😉

Dans ce cours, nous allons voir comment donner une forme attrayante au travail de rédaction pour le Web (assisté ou non par IA) réalisé en amont. Nous allons intégrer le texte structuré dans un gabarit de site responsive.

Les gabarits responsives

Vous trouverez sans aucun doute des centaines de gabarits responsives sur Internet. Il est très probable qu’ils soient stylisés en faisant appel au framework Bootstrap. Or, à ce stade de votre formation, vous ne maîtrisez pas encore cette boîte à outil !

Il existe pourtant quelques gabarits HTML5-CSS3 utilisables par des débutants. Je me suis inspiré de quelques uns d’entre eux pour bâtir plusieurs gabarits de site one page. Je vous propose de les télécharger et de les examiner d’un peu plus près.

Vous constaterez qu’ils n’utilisent pas de code JavaScript. Ils ont tous été optimisés pour l’affichage sur mobiles. Certains gabarits s’adaptent mieux que d’autres aux petits écrans. Les versions “bis” sont un peu plus complexes que les version sur lesquelles elles se basent.

➜ Utiliser les fonctions d’affichage “responsive” de votre navigateur pour tester le rendu de chaque gabarit pour différentes largeurs de fenêtre du navigateur.

Affichez le code source, examinez-le avec attention. Dans la fenêtre affichant le code source, cliquez sur le lien menant à la feuille de style. Parcourez-la pour repérer l’articulation entre la feuille de style CSS et le fichier HTML. Notez que les feuilles de style sont partiellement commentées.

Les feuilles de syles CSS listent des instructions qui s’appliquent aux éléments HTML. Pour mieux comprendre les procédés utilisés dans les feuilles de style des gabarits, je vous invite à visionner cette vidéo qui explique comment fonctionnent les feuilles de style externes.

Préparer le travail de personnalisation

Collecter ou créer des images

Choisissez le gabarit qui vous semble le mieux convenir à votre texte et à votre propos. Vous allez avoir besoin d’images pour remplacer celles que j’ai utilisées. N’hésitez pas à explorer les possibilités offertes par le site pexels.com pour trouver des images libres de droit.

Vous pouvez créer des illustrations thématiques adaptées à votre sujet en utilisant les services de Vector Creator. Vous pouvez aussi composer vos propres “photos” en faisant des montages grâce à Photo Creator.

Choisissez vos photos avec soin. Je vous recommande de veiller à l’unité des couleurs et du style sur l’ensemble de la page Web. Ne vous contentez pas de regrouper des photos sur le seul critère de leur rapport avec le sujet traité.

➜ Si vous ne trouvez pas assez de photos dans les mêmes teintes colorées, retouchez-les en utilisant Photoshop ou une application en ligne comme Pixlr-x.

Les IA génératives permettent de créer des images illustratives de tous styles (photos, dessins, peintures, etc.). Vous trouverez des IA génératives dédiées à tel ou tel style sur poe.com. Sur cette plateforme vous disposez de 3000 points par jour. les IA référencées annoncent chacune le nombre de points consommés à chaque production d’image.

Compresser les images

Rassemblez les images collectées dans un dossier de collecte que vous nommerez explicitement. Les images collectées dans les banques d’images sont généralement de grandes dimensions (plus de 5000 pixels de large) et peuvent peser plusieurs Mo.

L’image de bandeau dont vous avez besoin na pas besoin de dépasser 2000 pixels de large. Il est donc nécessaire que vous réduisiez la taille de vos images et par conséquent leur poids. Compressez vos images en jpg à 70% (7 sur une échelle de 1 à 10), elle ne pèseront plus que quelques centaines de Ko…

Placez dans le dossier “img” les seules images que vous envisagez de publier. Si vous placez davantage d’images dans ce dossier, le temps de faire votre choix, retirez ensuite celles que vous n’avez pas utilisées.

Sur le Web, on voyage léger !

Préparer un nuancier étagé

Vous allez modifier les couleurs utilisées dans les gabarits fournis. Vous allez donc devoir utiliser des couleurs dont le degré de luminosité autorise la superposition d’une couleur sur l’autre. Pensez au confort oculaire de vos futurs lecteur !

L’application en ligne gradients.app propose des combinaisons toutes prêtes de couleurs pour l’arrière-plan et le texte.

Vous pouvez aussi utiliser une couleur de luminosité moyenne, associée au noir et au blanc (ou à une couleur très foncée et une couleur très claire). Une liste de couleurs moyennes vous est proposée en ligne.

Choisir des polices de caractères

Le moment venu, vous aurez sans doute besoin de changer la police de caractères utilisée pour le titrage dans les gabarits. Les polices de Google Fonts sont une aubaine pour les créateurs débutants !

Pour vous aider dans votre choix, je vous invite à vous rendre sur fontpair.co. Si vous ne trouvez pas votre bonheur sur Fontpair, explorez le site Typewolf

Pour l’intégration de polices différentes dans le site personnalisé, voir un peu plus bas comment intégrer des polices Google.

Intégrer le texte rédigé dans le gabarit

La personnalisation d’un gabarit nécessite souvent une intégration du texte titre par titre et paragraphe par paragraphe. Faute de quoi certaines parties du code implémentées dans le gabarit risquent de disparaître.

La démarche n’est pas la même que celle qui consiste à construire un site à partir de zéro (from scratch). Elle est aussi très différente de la méthode qui consiste à changer de feuille de style externe pour modifier l’apparence d’une page HTML.

L’avantage d’utiliser un éditeur markdown lors de la rédaction des textes est de bénéficier à l’export en HTML d’un contenu proprement balisé (surtout avec StackEdit). Cela facilite l’intégration des différentes parties du texte dans la structure du gabarit.

Remarques sur les balises <br>

Soyez vigilants sur la structuration du texte. Il se peut que le texte exporté depuis StackEdit comporte de nombreuses balises <br>. C’est souvent le résultat d’une erreur de saisie lors de la rédaction dans l’éditeur Markdown. Corrigez ce défaut lors de l’intégration et constituez des paragraphes courts, de taille homogène.

➜ Dans StackEdit, en Markdown, il faut sauter 2 lignes pour faire un saut de paragraphe. Un simple saut de ligne génère un saut de ligne dans le paragraphe (un <br>).

Conseils pratiques

Travaillez sur le bureau

Dans le cadre des salles du GRETA, sur le Pôle Plurimédia du lycée La Fayette, vous pouvez être tentés de modifier directement des fichiers placés sur votre session individuelle.

➜ Je vous recommande plutôt de copier le dossier du gabarit que vous avez l’intention de modifier sur le bureau de votre poste de travail.

Quand vous aurez terminé, vous sauvegarderez alors votre travail sur votre session (… et sur votre clé USB ou votre disque dur personnel).

Personnaliser le gabarit

Vous pouvez modifier la feuille de style CSS pour personnaliser le gabarit utilisé. Il est ainsi possible de modifier les couleurs, la police de titrage et bien d’autres choses.

Soyez très prudents concernant des modifications touchant à la disposition des éléments dans la page (menu, têtière, contenu principal, etc.). Gardez à l’esprit que toute modification envisagée sur grand écran doit être répercutée sur petits écrans.

Des “media queries” se trouvent en fin de feuille de style. Elles permettent de spécifier précisément, à l’aide de nouvelles instructions CSS, comment doivent s’afficher les éléments HTML quand la fenêtre de navigation fait telle ou telle largeur. Toute la “responsivité” (capacité d’adaptation) du gabarit repose sur ces requêtes médias.

Recommandations

Ne vous lancez pas dans de grandes modifications du modèle choisi. Soignez plutôt vos images, vos couleurs et vos typos… et la qualité de votre texte.

Pour neutraliser une instruction CSS utilisez la mise en commentaires plutôt que l’effacement de l’instruction. Cela facilitera le retour à la version originale. Les balises de mise en commentaire CSS sont /* et */.

➜ Si une tentative de modification de la feuille de style échoue, revenez à la version originale. Ne laissez pas des instructions inopérantes dans le code.

Modifications premières

Voici une série de modification faciles à mettre en œuvre. Une fois que vous les aurez faites, votre site devrait déjà avoir un look satisfaisant.

Nous verrons plus tard, en utilisant notamment la feuille de style w3.css, comment optimiser la présentation d’une page en insérant des diaporamas, des grilles de photos, des colonnes suplémentaires, etc.

Pour le moment, vous pouvez mettre en œuvre les modifications indiquées ci-dessous.

Choisir des mots “strong” (importants)

Cette modification concerne la structuration et la stylisation du texte en même temps. En effet, les lecteurs devraient pouvoir parcourir votre texte en lisant les seuls titres et les seuls mots en gras.

Les moteurs de recherche lisent votre texte de cette façon. Ils en déduisent la cohérence de votre propos en analysant le champ sémantique des mots importants et des titres.

➜ C’est à vous d’indiquer aux moteurs de recherche et à vos lecteurs quels sont les mots importants. Pour cela, utilisez les balises <strong> et </strong> pour baliser chaque mot ou expression importante.

Quand on veut afficher en gras des mots qui ne sont pas importants , on utilise les balises <b> et </b>.

Changer l’image de fond du header

Sur les gabarits que je vous propose, l’image de la têtière est insérée dans le header via la feuille de style. Repérez dans la feuille de style les instructions de ce type, rattachées au header :

background-image: url(../css/img/nom-image-2000x500.jpg);
background-size: cover;

Pour que certains gabarits fonctionnent en ligne, l’appel de l’image a été modifié comme suit :

background-image: url(img/nom-image-2000x500.jpg);

Changez le nom de l’image utilisée par celui de l’image de votre choix. Utilisez une image de 2000 pixels de large et de la hauteur de votre choix.

➜ Pour optimiser le positionnement de l’image dans l’espace disponible, rajouter l’instruction CSS suivante :

background-position: center;

Suivant l’image que vous avez utilisée et son contexte d’affichage, vous pouvez donner à background-position les valeurs top, bottom, left ou right. Vous modifierez ainsi la manière dont l’image se positionne dans le cadre disponible.

Changer les couleurs utilisées

Pour changer les couleurs du gabarit, il faut repérer dans la feuille de style tous les endroits où un nom de couleur a été utilisé. Les formes de codage de la couleur utilisées dans les gabarits proposés sont la forme hexadécimale (#FFF, #FF00DD, #80F80F, etc.) et les formes rgb ou rgba (rgb(255, 255,255), rgba(255, 255, 0, 0.5), etc.).

➜ Vous trouverez rapidement les codes de couleurs insérés dans la feuille de style en utilisant la fonction “Rechercher” (cmd-F sur MacOs). Recherchez “#” ou ”rgb”, vous trouverez immédiatement les couleurs codées avec ces intitulés.

On peut aussi rechercher l’occurence “color” (… toujours en utilisant la fonction “Rechercher” dans Brackets). Le nom de la couleur choisie n’est pas très loin des expression comprenant cette occurence !

➜ Pensez à utiliser des couleurs aux valeurs étagées et ne multipliez pas le nombre des couleurs utilisées. Veillez au contraste entre le texte et le fond pour garantir à vos lecteurs une lisibilité optimale.

Accordez vos couleurs avec l’image de têtière utilisée. Votre site gagnera en unité et en harmonie.

Modifier la variable d’une couleur moyenne

Les feuilles de style CSS des gabarits dont le numéro de version se termine par la lettre c sont paramétrées de telle sorte que les couleurs puissent être modifiées en une seule fois.

Pour cela, des variables de couleur sont définies en tête de feuille de style (exemple ci-dessous).

/* Déclaration des variables des couleurs appliquées sur la page */
:root {
--dark-color: #000;
--dark-grey: #333;
--medium-color: #307d9a;
--light-color: #fff;
--light-grey: #ddd;
} 

Il s’agit de gris (clair et foncé), du noir, du blanc et d’une couleur moyenne choisie pour répondre à la norme d’accessibilité AA sur le noir et sur le blanc.

➜ Pour modifier la couleur moyenne dans tout le gabarit, il suffit de changer la valeur de --medium-color.

Changer la police de titrage

Les polices de titrages sont appelées depuis les serveurs de Google Fonts par la méthode @import, au tout début de la feuille de style.

Si vous n’avez jamais utilisé Google Fonts, je vous invite à regarder cette vidéo pour en apprendre davantage (durée : 16 min).

Ajouter des onglets au menu

En fonction de la structuration du contenu rédactionnel, vous pouvez être amenés à ajouter des onglets au menu du gabarit. Choisissez des intitulés courts en reprenant un terme du titre de la partie vers laquelle renvoie l’onglet.

Modifications non recommandées

Modifier l’alignement du texte

Le Web, avec la diversité des écrans de consultation des sites, supporte mal la justification des textes. Privilégiez l’alignement du texte à gauche et quand cela se justifie, utilisez l’alignement centré.

Habiller les photos avec le texte

Pour la même raison que celle évoquée plus haut, évitez d’habiller vos images avec du texte. Pour vous convaincre, examinez la manière dont votre texte se positionne à proximité de l’image sur les largeurs de fenêtre légèrement plus grandes que la largeur de l’image.

Un gabarit de site multipage

La personnalisation d’un gabarit de site multipage concerne en priorité les apprenants de la formation CDUI.

J’ai combiné plusieurs feuilles de style trouvées sur le Web pour composer un gabarit de site multipage. Les explications concernant sa mise en œuvre sont affichées dans le gabarit !

Concernant la mise en œuvre de Luxbar (la feuille de style utilisée dans ce gabarit pour l’insertion du menu…), vous trouverez des précisions sur la page intitulée Insertion d’un menu avec Luxbar.