Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de codeBrackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.
La structure élémentaire d’une page Web
Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.
Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active. Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>.
Le titre de la page est placé dans la tête du code source (à ne pas confondre avec la têtière qui se trouve généralement en tête de page affichée dans le navigateur…). La tête de code source est délimitée par les balises <head> et </head>.
Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.
Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source »… après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.
Je vous montre un gabarit de ce type, disponible sur le site w3schools.com. N’hésitez pas à demander la traduction automatique de ce site. Il y a dans le menu du site de w3schools (un site norvégien) une icône en forme de planète qui permet d’activer la traduction automatique du site dans la langue de son choix.
Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut.
En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec Brackets et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.
J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…
➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com
En savoir plus à ce sujet (en bonus…)
Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Plus dans le sujet tu meurs… mais vous verrez que les choses se compliquent assez vite.
Le site w3schools.com, que nous venons de mentionner plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton « Try it Yourself » ou « Essayez vous-même« ).
Pour les plus intéressés, je recommande vivement de s’inscrire aux cours gratuits decodecademy.com. Le cours de HTML est très bien conçu.
Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet. Ma préférence va vers le site apprendre-a-coder.com, même si on n’est pas sur YouTube… et que la rigueur n’est pas toujours au rendez-vous.
Vous ne serez pas perdu, car l’auteur utilise Brackets (mais sans les extensions qui vont bien, nous y reviendrons). Il y existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder). Pour les plus exigeants, allez plutôt voir du côté de grafikart.fr, c’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !
Pour éditer le code source d’une page Web, je vous recommande l’utilisation d’un éditeur de code nommé Brackets.
Il est téléchargeable gratuitement et sans limitation sur le site brackets.io. Brackets fonctionne sous Windows, MacOs et Linux. Ceux d’entre vous qui utilisent un PC prêté par le GRETA disposent de Brackets parmi les programmes installés sur le portable.
Si vous avez l’habitude d’utiliser un autre éditeur de code, vous pouvez l’utiliser sans que cela gêne votre apprentissage. Vous trouverez une liste des principaux éditeurs de code sur de nombreux sites dont le BlogDuWebdesign.
Je vous propose, avant d’aller plus loin avec Brackets, de personnaliser cet éditeur de code. En lui ajoutant qualques extensions, Brackets va se révéler très pratique pour commencer à manipuler le code source d’une page HTML, une feuille de style CSS et plus tard un script JS.
Pour savoir comment ajouter des fonctionnalités à Brackets, consultez la fiche extensions-brackets.
Infos sur Brackets
Premiers pas avec Brackets, texte affiché à l’ouverture de l’éditeur, mis en ligne sur graphizm.fr
Bienvenue chez Brackets, un article à traduire en français avec Chrome, sur github.com
L’aide de Brackets, à traduire automatiquement si nécessaire, toujours sur github.com
Découvrir les usages de Brackets en vidéo avec grafikart.fr (très complet)
La même vidéo est intégrée dans un article de jenseign.com, un site consacré à l’apprentissage du HTML-CSS (niveau avancé).
Ce cours est une liste de références en ligne sur la couleur, complétée par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign.
La couleur au quotidien
Un designer graphique est sans cesse confronté à la couleur. Son impact sur l’utilisation des produits qu’il réalise est ÉNORME !
Dans cette vidéo, Pierre Appell, enseignant, peintre et musicien, présente sans parole le rôle de la couleur et son importance dans le monde du design graphique et du marketing.
Le lexique de la couleur
➜ Activité en préambule Listez les termes que vous utilisez pour décrire la couleur et ses variations. Ajoutez à ces termes ceux que vous allez découvrir en consultant les sites mentionnés ci-dessous.
Attention : dans le dernier article mentionné ci-dessus, les définitions de la saturation et de la luminosité ne font pas consensus !
Il est nécessaire de clarifier le sens des termes que nous utilisons. Qu’est ce qu’une couleur assourdie, une couleur ternie, une couleur amortie, une couleur rompue, une couleur rabattue, une teinte désaturée, une couleur dominante, une couleur tonique, un camaïeu de couleurs, etc. ?
Teinte, saturation et luminosité
La couleur se définit le plus simplement par 3 paramètres faciles à différencier et à percevoir :
la teinte ou tonalité (bleu turquoise, rouge orangé, jaune citron, vert bouteille, etc.)
la valeur ou luminosité (couleur très sombre, couleur foncée, couleur claire, couleur pastel, blanc coloré, etc)
la saturation ou intensité (couleur vive, couleur pure, couleur ternie ou amortie, couleur assourdie, gris coloré, etc.)
Dans cette vidéo Pierre Appell présente les variations de teinte, de valeur et de saturation dans la peinture digitale.
Dans notre pratique du design graphique nous élargirons le concept de palette tel qu’il l’envisage ici, nous rapprochant davantage de l’ensemble des couleurs présentes sur la palette d’un peintre, au sens propre du terme “palette” (le support sur lequel le peintre dispose toutes les couleurs qu’il utilise pour peindre un sujet).
Un schéma de synthèse sur les variations de la couleur
Un concept voisin de la saturation : le chroma ou la chromaticité
➜ Exercice Sur l’illustration ci-dessus, extraite du sélecteur d’andrewwerth.com , dans quelle direction s’échelonne la luminosité ?
L’échelle de variation de la chromaticité varie entre une couleur donnée (plus ou moins lumineuse et saturée) et son équivalent sur une échelle de gris. Autrement dit, toutes les couleurs présentes sur le même niveau (échelon horizontal) d’une échelle de chromaticité ont toutes la même valeur (le même degré de luminosité).
Le système de Munsell (système HVC, Hue – Value – Chroma)
Les planches visibles dans le sélecteur de couleurs d’andrewwerth.com sont construites sur la base du système de Munsell.
➜ Vous rencontrerez souvent le schéma ci-dessus sous une forme dans laquelle l’auteur assimile chromaticité et saturation (exemple ci-dessous). Cette assimilation importe peu pour notre compréhension de l’articulation entre teinte, valeur et luminosité.
Les schémas précédent illustrent très bien le dispositif à partir duquel se construit un arbre de Munsell. Cet arbre nous permet de visualiser concrètement les faits suivants :
Toutes les couleurs pures n’ont pas la même valeur ou luminosité.
Plusieurs couleurs, de même teinte ou non, peuvent avoir la même valeur.
La perception de la couleur et les normes d’accessibilité
Discrimination chromatique
➜ Exercice Faites avant tout letest de discrimination chromatique proposé par le site de X-Rite. Si vous constatez une difficulté à distinguer certaines nuances, refaites le test une seconde fois. Si les difficultés persistent n’hésitez pas à consulter un spécialiste pour identifier plus précisément votre trouble de la vision.
Il est indispensable de situer votre perception des couleurs par rapport à la majorité des utilisateurs des produits colorés que vous allez concevoir en tant que designer graphique. Plusieurs graphistes et illustrateurs sont daltoniens (exemple de Loïc qui en tire même quelques avantages !).
Voici des sites sur lesquels une personne ayant une vision normale des couleurs peut se rendre compte dela manière dont les personnes ayant des difficultés à percevoir toutes les couleurs voient les choses.
Même si nous distinguons très bien les couleurs, plusieurs facteurs perturbent notre perception des couleurs dans l’environnement où se trouvent les objets colorés observés. En prendre conscience vous conduira à plus de rigueur dans les tests précédant la réalisation de vos projets de communication.
Contrastes de couleurs
Les couleurs voisines s’influencent mutuellement. C’est ce qui est expliqué dans la vidéo ci-dessous.
Métamérisme
Deux couleurs perçues identiques dans un contexte lumineux donné sont perçues différentes sous un autre éclairage. Cet effet se nomme le métamérisme
N’hésitez pas à télécharger les images proposées par les sites ci-dessus pour mesurer les couleurs indiquées comme identiques et vues comme différentes !
La notation informatique de la couleur
Les modes colorimétriques et les synthèses de couleurs
Le mode RVB s’appuie sur la synthèse additive (on ajoute des rayonnements les uns aux autres pour obtenir du blanc, soit le maximum de lumière). Le mode CMJN s’appuie sur la synthèse soustractive (on retire de la lumière en opacifiant le support pour obtenir du noir, soit le minimum de lumière).
L’affichage numérique des couleurs à l’écran s’appuie sur une synthèse additive par juxtaposition de pixels dont les 3 composants (luminophores) émettent chacun un rayonnement plus ou moins intense de rouge, de vert et de bleu.
L’impression en quadrichromie s’appuie sur un mélange de synthèse soustractive (pigments mixés sur le papier) et de synthèse additive (rayonnements réfléchis mélangés au niveau perceptif) obtenu par superposition et juxtaposition de points de trames.
Les différentes techniques de reproduction de la couleur ne couvrent pas toutes le même champ de couleurs. Les techniques d’impression utilisant des encres pigmentées couvrent les champs de couleurs les plus restreints.
Les conversions d’un mode colorimétrique dans un autre doivent donc se faire avec beaucoup de prudence et de précautions. Il en est de même pour la validation à l’écran de documents destinés à l’impression (la restriction du champ des couleurs imprimable doit être simulée à l’écran par le choix du mode colorimétrique approprié).
RGB, RGBa et notation hexadécimale
La notation hexadécimale est une notation “simplifiée” de la notation RGB. La notation RGBa prend en compte la transparence (canal alpha).
Le système de notation RVB (ou RGB) et le système de notation hexadécimal répondent au même besoin : indiquer au système informatique une valeur entre 0 et 255 pour chaque canal de couleur primaire, en synthèse additive.
➜ Exercices Pour ceux qui souhaitent s’entrainer à manipuler les couleurs en mode RVB (ou RGB), il existe un jeu intéressant sur CodePen. Il s’agit de deviner, parmi plusieurs couleurs, celle qui correspond aux paramètres affichés. Un autre jeu fonctionne sur le même principe avec les couleurs codées en hexadécimal : Guess a Color.
Les webdesigners utilisent principalement le système HEXADÉCIMAL (notation spécifique du codage RVB) pour paramétrer leurs feuilles de style. Les graphistes travaillant avec les imprimeurs privilégient la notation CMJN, associée au mode colorimétrique des documents qu’ils destinent à l’impression. Toutefois, plusieurs de leurs travaux étant publiés en ligne, ils utilisent aussi le codage RGB.
Se souvenir du code hexadécimal de quelques couleurs (gag !)
Le site http://bada55.io propose une liste de couleurs hexadécimales dont le nom dérive de leur codification informatique. Pour cela, l’auteur du site utilise le code suivant pour transposer les chiffres en lettres :
1 = I ou L • 2 = R • 3 = E • 4 = A • 5 = S • 6 = G • 7 = T • 8 =“ATE” • 9 = P … à vrai dire, chacun peut adapter le code ou le détourner !
Attention : cette notation n’a rien d’officiel, c’est un gag collaboratif, mis en ligne il y a plusieurs années (et toujours en http non sécurisé…). Le plus amusant est que dans certains cas, le nom codé de la couleur et la couleur elle-même collent plutôt bien (#e2071c – erotic, #907A70 – potato, #9a5720 – gastro, #acac1a – acacia, #ba6e15 – bagels) ! Vous en repèrerez plusieurs autres 😉
Ce codage humoristique ne doit pas être confondu avec les noms anglais normalisés attribués à quelques couleurs Web et pouvant être utilisés dans le paramétrage CSS des couleurs d’un site !
Avouez tout de même que, désormais, vous pourrez facilement coder en hexadécimal le vert acacia : #acac1a !
La notation HSL et ses limites
Pour faciliter le codage des couleurs RVB, les développeurs ont mis au point un système faisant appel aux 3 paramètres de la couleur : la teinte (Hue), la saturation (Saturation) et la luminosité (Luminosity).
Normalisé et reconnu par tous les navigateurs, ce système de notation intuitif a été très apprécié en son temps.
Lorsque les normes d’accessibilité ont vu le jour et qu’il a fallu étager les couleurs en tenant compte de leur ratio de contraste, HSL a vite montré ses limites !
Image extraite de l’article “Utiliser HSL pour vos couleurs”, sur lacascade.io
➜ Exercice
En utilisant le calculateur HSL de w3schools.com, comparez la luminosité perçue d’un bleu et d’un jaune paramétrés en HSL avec la même valeur de luminosité et de saturation. Que constatez-vous ? Comment expliquez-vous le succès rencontré par cette notation informatique des couleurs ?
Bien qu’incohérent sur les plans perceptif et normatif, HSL a toujours des défenseurs convaincus :
L’existence de plusieurs systèmes de notation informatique des couleurs pour les écrans nécessite l’usage de convertisseurs. En voici une liste (les formats de conversion disponibles sont indiqués sous chaque adresse).
Essayez de paramétrer un vert olive ou un bleu turquoise avec un sélecteur CMJN, RVB ou héxadécimal et un sélecteur HSL, HSV ou LCH (utilisez par exemple les sélecteurs proposés par w3schools. Avec quel outil et quel système de couleur parvenez-vous le plus facilement à paramétrer la couleur que vous avez en tête ?
Vérifiez la fiabilité des valeurs proposées par les convertisseurs en croisant les conversions. Utilisez par exemple le sélecteur Munsell-rgb-hex et vérifiez la luminosité des couleurs d’une même échelle de chromaticité dans le sélecteur hexa-hsluv.
Notez, pour une même couleur, les différentes positions des curseurs dans les systèmes de paramétrage présentés dans l’interface de l’outil Lch and Lab colour and gradient picker. Pour une même couleur, notez par exemple les différentes valeurs de Hue dans les différents modes. Examinez également les valeurs de luminosité et de saturation.
Le choix d’un système de notation des couleurs pour l’écran est souvent une question de pratique, individuelle ou sectorielle. Ce choix varie aussi en fonction des outils utilisés et des résultats attendus. Vous avez peut-être remarqué que les nuanciers générés par Lch and Lab colour and gradient picker ne sont pas constitués des mêmes couleurs suivant le mode de codage des couleurs !
Nous allons voir maintenant un système très performant pour lequel il faudra utiliser le codage hexadécimal des couleurs pour en exploiter les fonctionnalités.
La notation HSLuv et les notations dites perceptives
https://www.hsluv.org/ est l’adresse du site d’un nouveau système de notation de la couleur. Il n’est pas encore normalisé et il nécessite l’intégration d’un script JS pour que sa notation soit prise en compte par les navigateurs. Toutefois, ce système est beaucoup plus cohérent que le système HSL.
“HSLuv is a human-friendly alternative to HSL”. En français : “HSLuv est une alternative humaine à HSL” ! Autrement dit, HSLuv prend en compte la perception humaine de la couleur, de telle sorte que 2 couleurs codées avec le même pourcentage de luminosité sont vraiment perçue comme ayant la même luminosité !
Comparatifs des systèmes HSLuv et HSL
Dans le tableau ci-dessous, toutes les couleurs et tous les gris sont codés avec une luminosité fixé à 60%.
Vérifiez le contraste de luminosité entre les couleurs proposées par slidescarnival.com. Qu’en concluez-vous ?
Prendre en compte la répartition quantitative des couleurs ne suffit pas ! La présentation visuelle nécessite de prendre en compte la norme AAA Large (voire AAA) pour garantir une bonne visibilité des textes dans les conditions de projection sur écrans blancs opaques.
Dans cette partie du cours nous allons aborder 3 points :
Écriture structurée
Recherches de mots-clés
Utilisation des mots-clés
Les outils de la rédaction Web
Les principes et les méthodes de la rédaction Web
Le référencement des images
Écriture structurée
Le premier point concerne la rédaction d’un premier jet, sur tel ou tel sujet. Une structure simple est proposée. dans le cadre de la formation suivie, il est impératif de suivre cette structure pour que les corrections portent sur des textes courts. Essayez de suivre le principe suivant : une seule idée par paragraphe, en quelques phrases courtes et bien articulées entre elles.
La structure proposée est la suivante :
Titre h1
Chapô p
Premier titre h2
Premier paragraphe p
Second paragraphe p
Second titre h2
Premier paragraphe p
Second paragraphe p
Je vous invite à rédiger, dans Stackedit, un texte à publier sur le Web, sur le sujet de votre choix. Utilisez la structure rédactionnelle indiquée (h1-p-h2-p-p-h2-p-p).
Le premier jet sera retravaillé par la suite. Sa rédaction permet de faire le point sur l’angle par lequel on souhaite aborder le sujet. Il permet d’esquisser un plan (ce qui constituera les parties du texte). Si vous n’avez pas besoin de référencer votre article sur le Web, il se peut que vous n’ayez que peu de choses à reprendre par la suite…
Choix des mots clés
Ici commence de véritable travail de rédaction Web.
Le plus simple pour réaliser cette étape est d’utiliser un éditeur de cartes heuristiques (ou cartes mentales, mind map en anglais).
Je vous propose d’utiliser l’application en ligne Text2MindMap. Celle-ci permet de saisir un texte indenté d’un côté et de visualiser une carte heuristique de l’autre côté, c’est d’une simplicité élémentaire !
Il s’agit, en partant du sujet principal abordé, de déterminer dans un premier temps l’expression courte ou le mot clé de la page (le tronc de l’arbre). Notez qu’il s’agira des premiers mots de votre titre h1.
Ensuite, en explorant le champ lexical et sémantique du sujet, il s’agit de trouver et noter les expressions et mots clés voisins, en les regroupant par affinité. Vous obtiendrez ainsi un arbre (ou plutôt la ramure d’un arbre) plus ou moins étendu selon le temps que vous y consacrerez.
Le site rimesolides.com permet d’élargir le champ lexical d’un sujet.
En activant les préférences de Text2Mindmap, vous avez le choix entre 2 types de colorations de la carte. La première (Branch) met en évidence les expressions et mots issus d’une même branche. La seconde (Level) met en évidence les expressions et mots clés situés à un même niveau hiérarchique.
Utilisation des mots clés
Cette section concerne l’utilisation des mots ou expressions clés et leur placement dans la structure HTML. Il s’agit ici de reprendre la rédaction produite à l’étape 1 et d’y insérer un mot ou expression clé principal et plusieurs mots clés secondaires.
Les rédacteurs Web chevronnés commencent par choisir leurs mots clés. Cela leur permet d’établir un riche lexique avant de rédiger leur article. De plus, en choisissant la manière de les répartir dans le texte, ils matérialisent un plan facile à percevoir, à la seule lecture des titres.
Dans le cadre des exercices proposés dans ce cours, voici quels seraient les attendus à un niveau débutant (ne pas utiliser les synonymes simplifie le travail à produire quand on débute) :
Titre h1 ➜ Expression ou mot clé principal en début de h1
Chapô ➜ Expression ou mot clé principal en début de chapô
Premier titre h2 ➜ Mot clé secondaire #1 en début de h2
Premier p ➜Mot clé secondaire #1 en début de p
Second p ➜ Rédaction libre
Premier titre h2 ➜ Mot clé secondaire #2 en début de h2
Premier p ➜Mot clé secondaire #2 en début de p
Second p ➜ Rédaction libre
Voici quels seraient les attendus à un niveau plus avancé (utilisation des synonymes et expressions connexes) :
Titre h1 ➜ Expression ou mot clé principal en début de h1
Chapô ➜ Synonyme du mot clé principal en début de chapô
Premier titre h2 ➜ Expression ou mot clé secondaire #1 en début de h2
Premier p ➜ Synonyme du mot clé secondaire #1 en début de p
Second p ➜ Synonymes du mot clé secondaire #1 dans le p
Second titre h2 ➜ Expression ou mot clé secondaire #2 en début de h2
Premier p ➜ Synonyme du mot clé secondaire #2 en début de p
Second p ➜ Synonymes du mot clé secondaire #2 dans le p
Les outils de la rédaction Web
Voici une liste de sites sur lesquels les auteurs partagent leur choix des meilleurs outils de rédaction Web.
Pour ma part, si je devais choisir un seul outil parmi tous ceux dont il est question ici et là, ce serait un outil de synthèse vocale !
J’utilise la synthèse vocale proposée par MacOs (réglages dans Préférences Système > Dictée et parole). Windows 10 propose un outil nommé « lecteur immersif » (que je n’ai jamais utilisé 😱). Pour des textes courts vous avez la possibilité d’utiliser les outils de démonstrations cités dans la carte XMind mentionné plus haut.
Paramétrage et utilisation de la synthèse vocale sur MacOs
La lecture automatique d’un texte par un robot permet de repérer à l’oreille (de manière infaillible) tous les points suivants :
les phrases trop longues
les erreurs de ponctuation
les fautes de syntaxe
les oublis dans une phrase
etc.
Inutile d’apprendre des règles compliquées. Écoutez les textes que vous avez rédigés et corrigez les pour faire en sorte que leur lecture automatique soit fluide et agréable à entendre. Vous serez étonnés par l’efficacité du procédé !
Raccourcissez les phrases trop longues (en les divisant par 2 si nécessaire). N’hésitez pas à insérer des virgules pour mieux cadencer le rythme de lecture du robot.
Principes et méthodes de la rédaction Web
Disposant désormais d’outils pour explorer le champ sémantiques des mots clés sélectionnés, sachant où insérer ces mots clés et leurs synonymes, ayant expérimenté à quel point la rédaction Web est un travail de longue haleine… voyons rapidement quels sont les grands principes à suivre pour développer nos idées dans un article plaisant à lire pour notre lecteur cible.
L’essentiel en premier
Rédigez de manière à présenter au lecteur l’essentiel des informations dans les premières parties du texte. Vous avez certainement lu des choses sur le plan en pyramide inversée. C’est un plan rédactionnel parmi d’autres qui présente l’avantage de mettre l’accent sur ce point : l’essentiel en premier !
Vous avez noté que j’insistais beaucoup sur le fait de placer les expressions ou mots clés en début de titre ou de paragraphe. Cela va dans le même sens et permet au lecteur de saisir d’emblée votre propos.
Ce principe ou méthode est vivement conseillé pour toute publication en ligne. Il n’est pas toujours possible de l’appliquer, mais en suivant ce principe chaque fois que vous le pouvez, vous optimisez vos contenus.
Mentionner l’essentiel en premier permet de répondre très vite aux questions que se posent les lecteurs : qui ? quoi ? où ? quand ? … Je vous renvoie à la formule CQQCOQP (c’est cucul, c’est occupé !) ou hexagramme de Quintilien. Cette petite séquence mnémotechnique est très utilisée en communication écrite.
Toujours être simple et concis
« Entre deux solutions, toujours choisir la plus simple.” Il ne s’agit pas d’appauvrir le sens de votre propos mais de supprimer tout ce qui n’est pas indispensable. “La perfection est atteinte quand il n’y a plus rien à supprimer” écrivait Antoine de Saint-Exupéry. Pas de généralités, pas de tournures de phrases alambiquées, pas d’adjectifs ou d’adverbes superflus : écrivez, éliminez !
Écrire sans en rajouter prend plus de temps que d’écrire avec concision. Un texte se travaille, non pas seulement pour se développer mais aussi pour se simplifier, sans perdre de sa substance. Il s’agit d’élaguer, non de déraciner !
Faire des phrases courtes et écrire plus simplement
Une quinzaine de mots par phrase est l’idéal. Dès qu’une phrase approche les trente mots il faut impérativement faire 2 phrases (qui feront une quinzaine de mots chacune).
L’utilisation de la synthèse vocale, comme nous l’avons vu plus haut, permet de repérer à l’oreille les phrases trop longues. Il est parfois nécessaire de mettre en œuvre d’autres moyens pour améliorer notre rédaction (… et la lecture de nos textes).
La chasse aux ”qui-que” est un sport très pratiqué par les rédacteurs Web. Pour en savoir plus sur cette activité, je vous recommande de lire Comment rédiger des phrases plus courtes ?, sur web-creatif.net
J’ai mentionné dans la première partie de ce cours la nécessité de traiter une seule idée par paragraphe. On peut élargir ce principe. Un sujet par article, une idée par chapitre (sous un titre h2), une idée par paragraphe (entre balises <p> et </p>) et une idée par phrase !
📌 Editoile est une agence de visibilité Web, spécialisée en rédaction SEO. Leur blog est une mine de renseignements fiables. Vous trouverez dans un des articles de leur blog d’excellents conseils pour écrire plus simplement.
Le référencement des images
Le référencement des images devient primordial dans un contexte où les utilisateurs effectuent de plus en plus de recherches par ce biais. Google Images permet d’accéder rapidement à ce que nous cherchons, sans avoir à lire des lignes de texte sur les SERP. Pourtant Google ne reconnaît pas le contenu des images, il se fie au titre des images et au texte alternatif associé aux images.
Repérer et compléter le texte alternatif
Dans le code source d’une page Web, le texte alternatif se trouve entre guillemets, après l’attribut alt inséré dans la balise autofermante <img>. Rien de tel qu’un exemple visuel :
<img src="img/nom-image.jpg" alt="description de l'image">
Le texte en lien avec l’attribut alt de l’élément <img> a plusieurs fonctions :
il décrit l’image pour les moteurs de recherche qui ne savent pas encore interpréter correctement les images mais qui se servent de ce texte pour référencer les images
il s’affiche dans le navigateur, à la place de l’image, quand l’image ne peut être affichée correctement (pour diverses raisons)
il est lu par les lecteurs de site utilisés par les personnes malvoyantes quand elles naviguent sur le Web
Document complémentaire
Gabarit rédactionnel pour le Web : ce modèle au format pdf offre une grille de composition des différentes parties à rédiger pour constituer un article pour le Web.
L’exercice qui suit concerne une pratique courante de SEO (Search Engine Optimization ou Optimisation pour les Moteurs de Recherche). L’expression « triplette du bourrin » est signée Laurent Bourrelly.
Voici un petit TP pour manipuler le code source d’un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site “Pangrammes” étudiée brièvement sur graphizm.fr/fcs/manipulation-code-source.
Le fonctionnement du site
Le type de site que vous allez manipuler est composée d’une seule page Web. En cliquant sur le bouton “EN SAVOIR PLUS”, on ouvre ce qui s’appelle une fenêtre modale. Il est possible de refermer cette fenêtre en cliquant sur la croix placée en haut à droite de la fenêtre modale. Vous avez certainement déjà rencontré ce type d’animation lors de vos navigations sur le Web.
Le modèle (ou template) de ce site a été téléchargé sur ce site : https://codyhouse.co/library . On y trouve plein de gabarits à personnaliser. Quand vous serez plus aguerris, vous pourrez utiliser ces ressources pour les personnaliser selon vos besoins 😉
➜ Pour réaliser l’exercice sans avoir à copier-coller le code de tous les fichiers qui composent le site « ma-couleur », je vous invite à télécharger le site complet sous la forme d’un fichier zippé.
➜ Avec l’éditeur de code Brackets,ouvrez le dossier « ma-couleur » (Fichier > Ouvrir un dossier > sélectionner le dossier > Ouvrir). Éditez le fichier « index.html » et prenez vos repères en vous rappelant ce que vous avez vu précédemment sur graphizm.fr/fcs/manipulation-code-source.
Des consignes plus détaillées vous sont données dans le fichier « index.html ». Vous pouvez les lire plus confortablement en activant l’aperçu en direct (le petit éclair en haut à droite de la fenêtre d’édition de Brackets).
Dans ce cours vous allez apprendre à identifier les composantes d’un site Web statique.
Identifier le fichier index.html
Tous les sites Web ont une page d’accueil. Cette page est généralement nommée index.html. On désigne généralement un fichier enregistré au format HTML sous le nom de page HTML ou page Web.
Une page Web est donc un document enregistré au format HTML dans lequel des informations de plusieurs types sont codées. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants :
la ou les feuille(s) de style associées
la ou les images insérée(s)
le ou les script(s) utilisé(s)
La ou Les feuilles de style se rapportent au codage de l’apparence d’un site. Le ou les scripts se rapportent au codage de l’animation des composants d’un site.
Chacun de ces fichier n’est pas obligatoirement associé à une page Web mais la plupart des pages publiées en intègrent un ou plusieurs (notamment les 2 premiers).
Repérer le contenu d’un dossier de site
Pour organiser l’édition et la publication des pages Web, on place de préférence ces fichiers dans des dossiers nommés de façon explicite. On utilise le plus souvent les dossiers suivants :
un dossier nommé css (ou styles) pour y placer les feuilles de style au format .css
un dossier nommé img (ou images) pour y placer les images aux formats .jpg, .png ou .gif
un dossier nommé js (ou scripts) pour y placer les scripts au format .js
Tous ces dossiers sont ensuite placés dans un dossier qu’on nomme communément dossier du site (pour le désigner entre designers et développeurs). Ce dossier porte toutefois un nom (informatiquement) et ce nom est utilisé dans l’URL du site en question.
Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.
Par exemple, le documents que vous allez ouvrir dans un instant est accessible à cette adresse : http://graphizm.fr/contenu-dossier-page-web/
Quel est le nom du dossier dans lequel ce document se trouve placé ?
Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document ?
➜ Manipulez le document ci-dessous pour découvrir plus de détails au sujet du contenu d’un site Web.
Si d’autres ressources doivent être associées à une page Web, il est possible de créer d’autres dossiers pour les classer convenablement. Il est ainsi possible d’utiliser un dossier fonts ou fontes pour y placer des polices de caractères.
➜Affichez le code source du document ci-dessus et répondez aux questions suivantes :
Quel est le nom du dossier dans lequel se trouve le fichier intitulé style.css?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Quel est le nom du dossier dans lequel se trouve le fichier intitulé index.js?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Le type de page Web dont il est question ici est nommée page Web “statique” et le site qu’elle présente est nommé ”site statique”.
Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s’agit d’une page HTML dont le contenu ne varie pas en fonction de la demande de l’utilisateur. On oppose les pages statiques aux pages dynamiques.
Faites une recherche sur le Web en utilisant la requête suivante : page web statique vs page web dynamique. Cela vous amènera très probablement à éclaircir plusieurs autres concepts en rapport avec la publication Web.
Manipuler le code source
Pour examiner le contenu d’un dossier de site Web, téléchargez le fichier pangrammes.zip, décompressez-le et examinez son contenu.
Comment organiser ses fichiers sur apprendre-html-et-css.com . Les nombreuses fautes d’orthographe présentes sur les pages de ce site nous montrent l’importance d’une relecture des textes avant publication…
