Dans ce cours, vous allez apprendre à utiliser l’outil en ligne Markmap. Cet outil permet de réaliser des cartes mentales heuristiques à partir d’une simple structure textuelle éditée en langage Markdown.
Anticiper la réalisation
Comme pour tout projet de communication, il est important de bien préparer ses contenus. Dans notre contexte, nous allons livrer au public (publier) une carte mentale heuristique. Il s’agit d’une arborescence centrée sur un sujet central à partir duquel se ramifient des sujets secondaires sur plusieurs niveaux.
Voici la carte modèle proposée par Markmap à l’ouverture de sa fenêtre d’édition. Le texte permettant de créer cette carte est le code Markdown placé dans la partie gauche de l’éditeur.
➜ Pour vous aider à concrétiser ceci, je vous ai préparé un document en MarkDown que vous allez traiter de la manière suivante :
visualiser le code Markdown dans votre navigateur
sélectionner ce code et placer le code dans le presse-papier (couper tout le texte)
coller le texte dans la fenêtre d’édition de Markmap (après avoir supprimé le code de démonstration proposé à l’ouverture de l’éditeur)
Il est donc nécessaire d’avoir 2 onglets ou fenêtres de navigation ouvertes : celle qui pointe sur le code Markdown mis à votre disposition) et celle qui pointe sur l’éditeur de Markmap.
➜ Si vous avez suivi les consignes formulées plus haut, vous devriez visualiser quelque chose qui ressemble à ceci (avec les légendes en moins) :
La carte a été générée automatiquement à partir du code Markdown intégré dans la fenêtre d’édition de gauche. Nous ne sommes pas en présence d’un éditeur de code Markdown et nous ne disposons d’aucun bouton pour mettre le texte en gras ou en italique.
Nous observons par ailleurs que, sur la carte, les titres de niveau 1 (codés avec un #) ne sont pas plus gros que les titres de niveau 2 (codés avec deux ##)
Personnaliser la carte
Je vous propose de personnaliser la carte en modifiant le code Markdown de manière à obtenir le rendu présenté ci-dessous. Les flèches bleues indiquent les changements attendus.
L’apparence de la carte peut être également modifiée en utilisant les fonctionnalités accessibles dans la barre d’outils de l’éditeur de carte. Vous pouvez par exemple unifier la couleur des branches de la carte en cliquant sur le lien (bouton) Colorize.
Cette opération ajoute un entête codé en langage YAML (utilisé notamment pour intégrer des métadonnées dans un fichier Markdown). Le code YAML est encadré par deux lignes de 3 tirets. dans notre cas, la couleur est indiquée en mode hexadécimal. Vous pouvez la remplacer par toute autre couleur, codée de la même manière, ou par le nom d’une couleur Web.
Exporter la carte
La carte ainsi générée est exportable dans deux formats. Un export HTML interactif (consultable avec un navigateur et intégrable dans une page Web) et un export SVG (consultable avec un navigateur et intégrable dans une page Web, mais non interactif).
Ces deux fonctions d’exportation fonctionnent très bien avec Google Chrome mais font planter Vivaldique j’utilise malgré tout quotidiennement… pour tout le reste 😉
Markdown est un langage de balisage léger créé en 2004 par John Gruber avec l’aide d’Aaron Swartz. Son but est d’offrir une syntaxe facile à lire et à écrire. Un document balisé par Markdown peut être lu en l’état sans donner l’impression d’avoir été balisé ou formaté par des instructions particulières. Wikipédia
Je vous invite à lire l’article dont est extrait la citation ci-dessus (cliquez sur le lien “Wikipédia”)
En moins de 10 mots : Markdown, c’est du code lisible par les humains !
Avec quels éditeurs créer des fichiers Markdown ?
Sur les postes de travail du Pôle Plurimédia du Greta-Auvergne, vous disposez des éditeurs Markdown et éditeurs de texte suivants :
Il y en a d’autres… mais il faut que je vérifie s’ils sont toujours là !
Dans les 2 salles du pôle et chez vous…
En utilisant des éditeurs en ligne, un simple navigateur permet d’éditer des document au format Markdown. Voici une sélection de quelques uns d’entre eux .
StackEdit (synchronisation avec Google Drive ou Github)
PanWriter (le même que sur vos postes de travail mais en ligne, en démo !)
Il en existe plusieurs autres, faites des recherches et testez-les. Vous me direz ce que vous en avez pensé 😉
Pourquoi éditer en Markdown ?
J’ai rassemblé sur une page Netboard les témoignages de quelques utilisateurs du Markdown. Je vous propose donc de vous rendre sur y-goguely.netboard.me pour en savoir plus.
En apprendre davantage sur le langage Markdown
Voici une liste de lien vers des articles en ligne ou des plateformes d’apprentissage sélectionnés pour vous permettre de vous familiariser avec le langage Markdown.
Les sites en anglais peuvent être traduits automatiquement en français par le biais de votre navigateur.
Voici un résumé des informations apportées en cours concernant le texte brut et le texte enrichi. Plusieurs expérimentations ont accompagné ce cours.
Comment voir le code d’un fichier ?
Tous les fichiers informatiques sont codés.
Les informations contenues (enregistrées) dans un fichier sont encodées dans un format (type de code) particulier
Le format de l’encodage permet ou non l’examen du code utilisé par un éditeur de texte (à ne pas confondre avec un traitement de texte)
Si le format d’encodage le permet, il est possible d’examiner le code d’un fichier informatique (texte, image ou son) en modifiant son extension et en imposant l’extension de fichier .txt
Cette modification de l’extension d’un fichier en .txt permet de visualiser le code utilisé avec TextEdit (sous macOs) ou Notepad++ (sous Windows). Ces deux applications sont des éditeurs de texte (et non des traitement de texte) !
Attention : modifier l’extension d’un fichier ne modifie pas l’encodage du fichier. Cela indique juste au système informatique utilisé quel type d’application utiliser pour tenter de lire le fichier avec cette application installée sur le poste.
Constats expérimentaux
Un fichier contenant des textes stylisés (gras, italiques, affichés dans telle ou telle police de caractères, etc.) est enregistré avec TextEdit au format .rtf (rich text file)
Le code d’un fichier .rtf code les informations de stylisation dans le fichier lui-même
Le code d’une capture d’écran enregistrée au format .png indique le format d’enregistrement du fichier en tête de son code
Le code d’un fichier enregistré au format Markdown correspond exactement au contenu textuel du document enregistré dans ce format (il en est de même pour les documents enregistrés au format .txt)
Plus le codage d’un fichier est simple plus celui-ci est léger et facilement éditable. Les outils d’édition de texte nécessitent un apprentissage (… et donc souvent un changement d’habitude) mais personne ne revient en arrière après avoir expérimenté ce mode d’édition !
Ce n’est pas parce que vous êtes aujourd’hui plus à l’aise avec Word ou avec InDesign que vos documents sont plus universels et davantage pérennes. Vous avez certainement déjà fait l’expérience de problèmes de version de documents. Imaginez ce qu’il en sera dans 5, 10 ou 20 ans !
Tous les développeurs éditent leur documentation en Markdown et la publient en HTML. Ces deux langages sont des codages au format texte, édités avec des éditeurs de textes et non avec des traitements de texte ou des logiciels de mise en page.
La solution Markdown
Sans être la solution idéale, l’édition de texte avec un éditeur Markdown présente pour le moment de réels avantages, notamment pour les rédacteurs Web. Un cours entier est dédié à ce format et un autre à l’utilisation de StackEdit, un éditeur Markdown en ligne.
Je vous invite à consulter les ressources suivantes :
Le sujet peut paraître insignifiant à celui ou celle qui débute sa formation de designer graphique ou de web-designer. Il est pourtant crucial de réfléchir à cette question, dans un contexte d’échange de textes entres rédacteurs et développeurs, entre clients et graphistes, entre équipiers fonctionnant avec des outils différents sur des plateformes différentes.
Voici une listes d’articles sélectionnés pour vous aider à saisir les enjeux de l’usage du texte brut dans le secteur professionnel vers lequel vous vous dirigez. Ils sont listés des plus simples aux plus compliqués (ou complets, si vous préférez…). Les deux articles présentés sur Wikiwand approfondissent l’aspect technique de la question.
Simple d’utilisation, la plateforme Deskyo permet de disposer de tous ses favoris en ligne, à partir de tous vos périphériques. Deskyo est donc un gestionnaire de favoris. Si ceux-ci sont bien classés (cela ne tient qu’à vous…), vous disposez d’une base de signets toujours accessible, quel que soit le navigateur et le poste ou l’appareil que vous utilisez.
Deskyo permet donc de classer (manuellement) des favoris / signets / bookmarks / URL / adresses Web (tous ces termes sont pratiquement synonymes) dans des dossiers / répertoires / collections.
Le partage des favoris n’est pas autorisé, en sorte que vos collections de liens restent privées. Vous seul avez accès à vos signets !
Deskyo permet d’exporter au format HTML l’ensemble de tous les liens collectés, dans une page structurée respectant le classement effectué. Une fonctionnalité supplémentaire permet aux abonnés Premium de partager une collection de liens particulière (tous les favoris placés dans un dossier).
La génèse de Deskyo est détaillée par son fondateur, Stéphane Gloriot, sur le forum de la plateforme Openclassrooms. Un article, publié sur Blogger, présente brièvement Deskyo et en détaille les fonctionnalités.
Si la sauvegarde des liens nécessite plusieurs clics, cela permet de conserver en mémoire les classements effectués. Ce travail de classement est un excellent moyen pour fixer dans son esprit des concepts nouveaux et les articuler convenablement entre eux.
Deskyo et la validation des titres professionnels
Dans le cadre de la préparation à la validation des titres professionnels IMeP et CDUI, vous devez être capables de prouver au jury que vous effectuer sérieusement une veille informationelle et technologique en lien avec le métier que vous envisagez d’exercer.
Deskyo est un moyen d’atteindre cet objectif. Toutefois, l’outil numérique n’effectue pas le classement à votre place et il n’émet aucun avis sur la pertinence des liens collectés ! C’est donc à vous d’utiliser cette plateforme de manière cohérente. Vous n’y parviendrez pas du premier coup mais vous affinerez votre système de classement au fil de vos collectes.
Quelques astuces d’utilisation
Changer l’image de fond du bureau de Deskyo
Pour modifier l’image devant laquelle s’affichent les dossiers/collections ou les signets/favoris sur le bureau de Deskyo, faites un clic droit à droite d’un des signets ou dossiers (en dehors de l’élément mais pas trop loin tout de même…).
Un menu contextuel s’affiche et vous propose de “Personnaliser l’affichage”. Vous pouvez choisir une des images proposées ou parcourir votre ordinateur pour choisir l’image voulue. Prévoyez une image assez grande en pensant à vos écrans de bureau 😉
Manipuler les éléments épinglés sur le bureau de Deskyo
Comme vous le voyez sur le bureau de Deskyo, les éléments affichés présentent un petite épingle dans le coin supérieur droit. Cela indique que ces éléments affichés sont de simples alias / raccourcis / accès rapides pointant vers les éléments archivés sur le serveur de l’application.
En survolant les éléments avec le curseur de la souris, une zone grisée s’affiche et présente trois icônes permettant chacune d’effectuer des actions spécifiques.
les 6 petits points permettent de déplacer l’élément
le petit “i” affiche au survol des infos supplémentaires pour les éléments situés à l’intérieur des collections… mais sur le bureau seul s’affiche le nom de l’élément !
les 3 points superposés permettent d’accéder à un menu permettant notamment de renommer le raccourci / alias (mais pas le dossier placé le répertoire des collections) ou de supprimer l’alias (et conserver toutefois le dossier original).
Dans ce cours nous allons apprendre à utiliser le langage Markdown pour structurer un article destiné à la publication Web, en nous appuyant sur les fonctionnalité d’une application en ligne : StackEdit. Nous verrons aussi, pour ceux que cela intéresse, comment exporter au format HTML les contenus structurés avec StackEdit.
StackEdit est un éditeur Markdown en ligne ergonomique, facile à prendre en main et parfaitement adapté à la structuration de contenus textuels.
Ses fonctionnalités permettent (entre autres choses…) de publier des contenus directement sur les principales plateformes de blogging. Elles permettent aussi d’éditer les contenus des sites construits avec des CMS basés sur Markdown (Pico, Grav, Yellow, etc)
StackEdit est aussi un outil convivial pour tenir un journal de formation (en tant qu’apprenant) ou un journal pédagogique (en tant que formateur).
Présentation de StackEdit
Le fichier immédiatement visible au lancement de l’application est un texte d’accueil en anglais (intitulé “Welcome”). Dans Chrome, un clic droit dans la zone des boutons de formatage du texte (bandeau noir) permet d’accéder à la traduction en français. Tout est expliqué… ou presque, et cela devient un peu compliqué vers la fin du document !
Nous disposons d’une fenêtre (ou zone) d’édition — à gauche — et d’une fenêtre (ou zone) de prévisualisation — à droite .
Les boutons placés entre les 2 zones verticales permettent de gérer l’affichage des différentes zones.
Les boutons situés en haut à gauche et en haut à droite permettent d’ouvrir des menus complémentaires. Le menu de gauche répertorie vos documents et celui de droite permet d’accéder à de nombreux sous-menus.
Test de codage Markdown
Je vous propose de coder en Markdown un texte très simple, dans un document que vous intitulerez “test”. Voici la première partie du texte à coder :
Rien de compliqué ! Il est vrai que le code Markdown en gris clair ne se voit pas très bien… Si vous ne parvenez pas à coder en Markdown en saisissant le bon code, vous pouvez toujours utiliser les boutons de la barre d’outils noire (ou barre de formatage, au dessus de la zone d’édition).
Si vous souhaitez voir une liste de toutes les balises Markdown pour mieux vous y retrouver (ou tester l’utilisation d’autres balises), cliquez sur le bouton avec le signe # (en haut à droite), puis cliquez sur l’onglet “Markdown cheat sheet”.
Pour ceux qui souhaitent aller un petit peu plus loin, voici la deuxième partie du texte à coder :
Vous pouvez accéder au code Markdown de l’exercice finalisé sur graphizm.fr.
Exporter le fichier test en .md
Vous savez baliser en Markdown des titres, des paragraphes, des listes à puces ou ordonnées, des citations… C’est super ! Il est grand temps maintenant de sauvegarder votre travail.
Le document saisi dans StackEdit est automatiquement sauvegardé dans notre navigateur. C’est cool mais pour plus de sûreté vous allez exporter sur votre bureau le fichier “test”, en utilisant le format markdown (extension .md).
➜ Un clic sur l’icône de StackEdit pour ouvrir les onglets supplémentaires… Ouvrez l’onglet “Import/export”. Choisissez “Export as Markdown” et nommez votre fichier selon les règles de nommage apprises 😉
Saut de ligne et saut de paragraphe
Les éditeurs Markdown gèrent de manière très simple les sauts de ligne et les sauts de paragraphe. Cependant nos habitudes de traitement de texte nous amènent à répéter la même erreur.
En effet, avec StackEdit (et tout éditeur Markdown) il faut saisir 2 retours à la lignes (taper 2 fois sur la touche “entrée”) pour coder un saut de paragraphe. Un simple retour à la ligne code un saut de ligne (un <br> en HTML).
Je vous propose de visualiser un exemple en copiant le texte de la capture d’écran ci-dessus (codé en Markdown) dans StackEdit. ➜ Exportez le document en “plain HTML” ou en “Styled HTML” pour voir comment le texte s’affiche dans un navigateur.
Ce point est très important en matière de structuration rédactionnelle du texte pour le Web. En effet, pour ce type de publication, il convient de rédiger des paragraphes concis, traitant d’une seule idée à la fois. Évitez dans la mesure du possible les sauts de ligne au sein d’un même long paragraphe. Vous avez pu constater à quel point cela était une source de confusion dans l’exemple proposé plus haut.
➜ Jetez un œil sur cet article du site audreytips.com et interrogez-vous sur ce qu’apporte le découpage en paragraphes courts (3 ou 4 phrases maximum).
Exporter le fichier en HTML
Cette partie concerne les apprenants ayant le besoin ou l’envie de créer des pages Web pour les consulter en local (sur leur poste de travail) ou en distant (après les avoir mis en ligne).
Un des point les plus intéressants de StackEdit concerne la qualité de l’export au format HTML. En effet, la plateforme propose plusieurs modalités d’exportation et le code généré par StackEdit est particulièrement propre.
L’exportation en HTML débute comme l’exportation en Markdown (icône de StackEdit et onglet “Import/export”). Cliquez ensuite sur l’onglet “Export as HTML”. Les recommandations concernant le nommage des fichiers exportés restent valables !
Parmi les options proposées à l’exportation, 2 d’entre elles nous intéressent plus particulièrement : l’option “Styled HTML” et l’option “Styled HTML with TOC”. TOC est l’acronyme de “Table Of Content” (table des matières ou sommaire…). En effet, ces deux options génèrent des pages HTML prêtes à la publication en ligne.
L’option par défaut “Plain HTML” génère une page HTML dans laquelle figure seulement le contenu du <body> (la structure à partir du <h1>). Une telle page est lisible en local par un navigateur mais elle ne contient aucune instruction CSS et n’est pas publiable en l’état. Cette option est cependant utilisable quand il s’agit de copier une partie du code pour le coller dans un gabarit de site, par exemple.
➜ Faites des tests d’exportation en HTML en utilisant les différents formats proposés. Examinez le rendu dans le navigateur des fichiers HTML et jetez un œil sur le code source.
Vous constaterez qu’avec les 2 options “Styled HTML” et Styled HTML with TOC”, la feuille de style utilisée n’est pas incorporée dans le fichier HTML mais appelée depuis le serveur de StackEdit.
Cela nous ouvre des perspectives de personnalisation de la page exportée. En effet, en modifiant le lien d’appel de la feuille de style, nous pourrons faire pointer ce lien vers un dossier “css” placé à la racine du fichier HTML (dans le même dossier que le fichier HTML) puis vers une feuille de style de notre choix (placée au préalable dans le dossier “css”).
L’export avec l’option “TOC” génère un fichier HTML incorporant une colonne latérale dans laquelle s’affiche un sommaire reprenant le titre de niveau 1 et les sous-titres de niveau h2 du texte structuré dans Stackedit.
StackEdit est donc aussi un éditeur de pages Web, très simple d’utilisation, permettant de générer des documents agréables à lire et diffusables sur toutes les plateformes (le format HTML est universel…).
Utiliser du HTML directement dans StackEdit
Importer un fichier HTML
StackEdit permet d’importer des fichiers HTML via l’onglet “Import/export ». Vous accédez à 2 boutons d’importation :
Import Markdown
Import HTML
Le second bouton permet de transformer automatiquement une page HTML en page Markdown ! Génial, non ?
Saisir du code HTML dans la fenêtre d’édition
Il est possible d’insérer des balises HTML dans le code Markdown. On peut ainsi compléter la structuration du texte en introduisant des commentaires dans le code ou intégrer des signes conventionnels augmentant l’accessibilité de la page Web.
On peut aussi anticiper la stylisation en insérant des espaces insécables entre les mots et les signes de ponctuation. On peut encore anticiper l’adaptativité aux écrans mobiles (ou entre les mots d’une expression qu’on voudrait voir toujours sur la même ligne).
Dans StackEdit, il n’est cependant pas possible d’utiliser l’élément <span> pour intégrer une instruction CSS en ligne (… inlinestyle, en anglais), comme dans l’exemple ci-dessous. <span style="color: red;">Texte en rouge</span>
D’autres éditeurs Markdown permettent l’utilisation des instructions css en ligne.
Lectures et vidéo en ligne
Voici une liste de quelques sites parlant de StackEdit :
Ce cours concerne la création d’un nuancier dont les couleurs sont étagées de telle sorte qu’elles respectent la norme d’accessibilité la moins contraignante (AA Large). Des ressources sont mises à disposition pour créer des nuanciers respectant la norme AA.
La construction d’un nuancier étagé normalisé permet de disposer de couleurs garantissant la visibilité optimale des textes, quelque soient les couleurs utilisées l’une sur l’autre.
Construire des nuanciers répondant à la norme AA Large
Dans un premier temps, nous souhaitons utiliser, pour la stylisation des textes d’un document, des couleurs contrastées répondant au moins à la norme d’accessibilité AA Large. Il s’agit de la norme d’accessibilité la moins contraignante. Elle correspond à un ratio de contraste supérieure à 3 (WCAG 2.0).
Il est donc nécessaire de s’assurer que le ratio de contraste entre deux couleurs du nuancier soit supérieur ou égal à 3. Cette contrainte peut se formuler ainsi : les couleurs du nuancier doivent avoir une différence de luminosité, en mode HSLuv, au moins égal à 40%.
Cet écart de luminosité de 40% vous est indiqué pour vous dispenser des contrôles de ratio de contraste. Une marge de sécurité vous est ainsi accordée et la lisibilité n’en est que meilleure ;-).
Nuanciers intégrant le blanc OU le noir
Plusieurs type de nuanciers peuvent être construits à partir des contraintes fixées préalablement. Les nuanciers seront caractérisés par la luminosité des couleurs qui les composent.
Parmi ces trois nuanciers, seul celui du milieu intrègre à la fois le blanc ET le noir.
➜ Vous pouvez utiliser une palette de couleurs moyennes normalisées pour composer des nuanciers de 3 couleurs régulièrement étagées, intégrant le noir ET le blanc. Ils répondent à une norme d’accessibilité plus contraignante (norme AA – ratio de contraste supérieur ou égal à 4,5).
Liste de couleurs moyennes normalisées
Les nuancier créés avec la palette ci-dessus entrent dans la catégorie :
00% + (60 à 40%) + 0% = blanc + couleur moyenne + noir (avec valeur médiante proche de 50%)
➜ Un moyen simple de créer ce type de nuancier consiste à utiliser le site hsluv.org pour sélectionner une couleur de valeur médiante (l’outil s’ouvre par défaut sur la palette des couleurs dont la luminosité est de 50%).
Nuancier n’intégrant ni le blanc ni le noir
Un seul type de nuancier peut être construit en tenant compte des contraintes fixée, sans intégrer ni le blanc ni le noir.
(95 à 90%) + 50% + (10 à 5%) = couleur très claire + couleur moyenne + couleur très foncée
On peut essayer d’intégrer des couleurs très claires allant jusqu’à 85% de luminosité et des couleurs très foncées allant jusqu’à 15% de luminosité. Il faut s’assurer alors que le ratio de contraste avec la couleur médiante est supérieur à 3 (normee AA Large). L’écart de luminosité est alors de 35% et avec certaine teintes, cela n’est pas suffisant pour entrer dans la norme.
Exercices pratiques
La sélection des couleurs s’effectue sur le site hsluv.org.
La présentation des nuanciers se fait sur une page print ou web, en mode RVB. Plusieurs modèles sont utilisables sur Canva dont celui-ci. (faire une recherche de modèles Canva avec l’expression clé ”color palette”).
Suggestion de présentation
Premier exercice
➜ Construire un nuancier de 3 couleurs étagées répondant à la norme AA Large et intégrant le noir et le blanc, de telle sorte que ce nuancier puisse être utilisé dans le secteur des cosmétiques haut de gamme. Proposer une variante répondant à la norme AA.
Deuxième exercice
➜ Construire un nuancier de 3 couleurs répondant à la norme AA Large et intégrant ni le noir ni le blanc, de telle sorte que ce nuancier puisse être utilisé dans le secteur des jouets pour enfants. Comment faire pour proposer une variante répondant à la norme AA ?
Remarques
Utiliser des couleurs supplémentaires
Les nuanciers envisagées plus haut ne peuvent pas intégrer plus de 3 couleurs étagées. L’intégration de couleurs supplémentaires nécessite soit de les choisir en tant que couleur de substitution (de même valeur que l’une des 3 couleurs initiales) soit de formuler des interdits (ou des obligations). Les couleurs ne présentant pas un ratio de contraste suffisant ne peuvent être utilisées l’une sur l’autre. Un tableau récapitulatif peut alors être édité en utilisant un outil comme Contrast Grid.
Utiliser des palettes étagées prédéfinies
Pour gagner un peu de temps, il est envisageable de construire des nuanciers accessibles en utilisant des palettes normalisées disponibles en ligne. J’en propose quelques-unes à cette adresse : https://graphizm.fr/couleurs/palettes-accessibles/. Il est facile de créer à l’aide de ces palettes des nuanciers entrant dans les catégories :
Le pourcentage de luminosité des couleurs proposées, mesuré en mode HSLuv, est proche des valeurs indiquées ci-dessus.
Palette interactive de couleurs normalisées
Des chartes chromatiques institutionnelles
Plusieurs institutions ou entreprises ont mis au point des palettes normalisées. Parties intégrantes de leur charte graphique, ces palettes sont publiées en ligne. Voici les palettes de la société IBM et celle du gouvernement des États-Unis.
Il existe également des outils en ligne pour créer des nuanciers accessibles. Leur prise en main nécessite toutefois une motivation certaine ;-). En voici quelques uns :
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.
Cet article est un complément d’information sur l’utilisation du contraste en design graphique.
Pour créer des tensions visuelles dans une composition et pour favoriser la lecture du message à transmettre, le designer graphique utilise plusieurs types de contraste. Concernant la structuration, la stylisation et la composition des textes, plusieurs contrastes peuvent être mis en œuvre. Ils s’appliquent généralement à la différenciation entre :
les titres (lecture de repérage – textes courts) et les paragraphes (lecture suivie – textes longs).
les textes normaux et les textes mis en évidence (textes importants ou emphatiques) ou mis en retrait (mentions obligatoires, conditions de ventes, etc.)
Tableau extrait de “Aide au choix de la typographie”, de Gérard BLANCHARD, publié aux ateliers Perrousseaux.
Les contrastes d’écriture ont été utilisés très tôt dans l’histoire de l’écriture, pour distinguer le début des chapitres (lettrine ou incipit) et le texte lui même. Cette distinction par un changement d’écriture s’est étendue à l’inscription des titres.
Les contrastes d’écriture sont une forme particulière des contrastes de forme et de structure.
romain (humanistique) / italique (chancelière)
romain (humanistique) / anglaise (cooperplate)
onciale (celtique) / romain (humanistique)
onciale (celtique) / italique (chancelière)
autres contrastes d’écriture
Les contrastes de famille typographique
Les contrastes de famille typographique sont une forme particulière des contrastes de forme ou de structure et une généralisation des contrastes d’écriture.
serif (sérieuses) / sans serif (neutres)
display (expressives) / sans serif (neutres)
handwriting (scriptes et cursives manuscrites – amicales) / sans serif (neutres)
handwriting (scriptes et cursives manuscrites – amicales) / serif (sérieuses)
lettres toscanes (tuscan letters) / lettres
autres contrastes de familles de polices
Les contrastes de forme ou de structure
Les contrastes de forme ou de structure précisent les différences identifiables entre plusieurs types d’écritures ou de lettrages.
Notez que le terme “lettre contrastée” désigne un type de lettres présentant une différence de graisse entre ses parties (https://fonts.google.com/knowledge/glossary/contrast). On parle de pleins et de déliés pour les lettres calligraphiques.
contrasté (différence entre pleins et déliés) / uniforme (traits de lettre de même épaisseur)
haut de casse (capitales ou majuscules) / bas de casse (minuscules)
avec empattements rectangulaires / sans empattement
avec empattements filiformes / sans empattement
avec empattements triangulaires / sans empattement
avec empattements fourchus / sans empattement
scripte (détaché) / cursive (attaché)
droit (vertical) / incliné (penché)
élargi (étendu) / étroitisé (condensé)
grand ou très grand / petit ou très petit
gras / maigre
rectiligne / curviligne
rectangulaire / circulaire
géométrique / organique
avec bordure ou contour / sans bordure ou contour
avec motif ou texture / sans motif ou texture
avec relief / sans relief
autres contrastes de forme ou de structure
Les contrastes de couleur
Les contrastes de couleur concernent la couleur des textes et la couleur du fond sur lequel le texte est présenté.
Notez que l’expression “couleur typographique” ou “gris typographique” désigne l’intensité du gris produit par le mélange optique du texte sur la couleur du papier.
Les contrastes de composition typographique concernent des moyens déployés pour différencier deux textes par leur positionnement dans la page. Il n’est plus question de formes ou de dessin des lettres, mais plutôt de mise en page des lettres, des mots, les lignes, des colonnes et des textes.
ligne de texte horizontale / ligne de texte verticale
ligne de texte horizontale / ligne de texte inclinée
Les combinaisons typographiques proposent d’associer 2 polices de caractères de manière harmonieuse. À vrai dire, l’esthétique n’est pas le seul critère d’association. la combinaison des polices de caractères doit aussi répondre à un besoin fonctionnel.
Pour associer 2 polices de caractères, il convient de définir quel est le type de lecture des textes utilisant l’une et l’autre des fontes sélectionnées. Une lecture suivie de texte courant de petite taille n’exige pas les mêmes caractères typographique qu’une lecture de repérage de titres courts présentés dans un corps important.
Si vous recherchez une police de caractères pour les textes de titrage et une police de caractères pour les textes de labeur, éliminez d’emblée les propositions associant deux polices expressives ou amicalesdécoratives. En effet aucune d’entre elles ne pourra être utilisée pour la lecture suivie.
Lors de cette activité, vous allez dessiner une police de caractères italique cursive géométrique.
Finalité de l’activité
Dessiner à la main un alphabet de lettres cursives basé sur la structure de l’italique. Cette alphabet sera utilisable pour la stylisation du texte d’affiches réalisées avec le logiciel Adobe Illustrator.
Prérequis et objectifs
Prérequis
Être capable d’utiliser un navigateur pour consulter des sites de référence
Être capable de dessiner au stylo à bille sur une feuille quadrillée
Être capable d’identifier une écriture cursive italique
Objectifs
Être capable de respecter les contraintes d’une consigne stricte
Être capable d’adapter des modèles complexes pour produire des lettres alphabétiques simples
Outils et matériel
Stylo à bille ou équivalent
Feuilles A4 quadrillées, à petit carreaux
Consignes et livrable
Consignes
Dessiner à la main, en s’appuyant strictement sur les lignes du quadrillage d’une feuille à petits carreaux utilisées, les lettres minuscules et majuscules d’un alphabet cursif italique.
Seules les côtés et les diagonales d’un petit carreau sont utilisables. Les lettres adoptent ainsi un style très géométrique.
Mettre au point un premier alphabet sur une matrice de 2×2 carreaux. Une matrice plus grande est utilisable dans un second temps.
Toute transgression des consignes données plus haut doit être argumentée par l’apprenant vis à vis du formateur. Pour être mise en œuvre, la transgression doit être validée par le formateur.
Livrable
Une feuille de papier quadrillée, présentant à minima toutes les lettres minuscules et majuscules de l’alphabet proposé est remise au formateur.
Critères de réussite
Critères élémentaires de réussite
La grille de construction de chaque lettre est une matrice minimale de carrés (2×2 au minimum).
La structure des lettres est bien celle de l’italique (formes triangulaires tracées en un minimum de traits).
Les lettres sont liées les unes aux autres.
Des majuscules sont proposées, liées ou détachées.
Critères avancés de réussite
Les fontes proposées sont toutes à chasse constante (toutes les lettres occupent un espace de même largeur dans une force de corps donnée).
Des caractères accentués ou spécifiques (æ, œ, $, €, etc. ) ainsi que des signes de ponctuation sont proposés.
Les projets remis au formateur seront vectorisés avec Illustrator, sur une grille magnétisée. Les caractères vectorisés seront utilisés pour composer une affiche simple. Voir la fiche d’activité intitulée Affiche avec fontes géométriques
Dans ce cours vous allez examiner avec attention les polices de caractères utilisées pour l’impression et l’affichage sur écran. Il s’agit de déterminer quelles sont celles qui se lisent le mieux et pour quelles raisons.
Lisibilité des polices sans serif (linéales)
Polices sans serif en général
Dans un premier temps, penchons-nous sur les polices de caractères sans empattement (sans serif, en anglais) nommées communément “polices bâtons”, utilisées dans tous les médias.
Les polices sans serif appartiennent au grand registre des polices neutres. Elles sont utilisées dans le secteur de la signalétique mais aussi pour accompagner les polices plus expressives ou plus amicales. Ces dernières sont réservées exclusivement au titrage et les polices sans serif servent alors pour les textes de paragraphe (texte courant).
Il est tout à fait possible, en jouant sur le nombre de styles (… ou fontes) disponibles, d’utiliser seulement une police de caractères sans serif pour styliser un document.
Police sans serif lisible disponible sur toutes les plateformes
Une dizaine de polices de caractères sont disponibles par défaut sur tous les systèmes d’exploitation. Parmi ces polices, Trebuchet MS se montre particulièrement lisible. Son défaut est d’être disponible dans seulement 4 fontes (normal, italique, gras, italique gras). Son avantage est d’être utilisable comme telle dans un site Web sans nécessiter de téléchargement. Éco-conception et lisibilité se conjuguent, même si le potentiel de design est limité 😉
Polices sans serif disponibles sur Google Fonts
La publication sur le Web s’effectue souvent en faisant appel à des polices distribuées gratuitement. Google Fonts proposant un service de téléchargement performant, les polices de caractères sans serif disponibles sur cette plateforme habillent de très nombreux sites Web.
Je vous propose d’examiner attentivement une sélection de polices sans serif disponibles sur Google Fonts.
➜ Notez quels sont les critères retenus pour effectuer cette sélection. Vérifiez par vous-même la pertinence du choix effectué.
Vérifiez également la pertinence des alternatives proposées pour certaines polices de caractères !
Choisissez une police sans serif sur une plateforme de distribution de caractères (Google Fonts, Squirrel Fonts, Dafont, etc.).
➜ Saisissez cette phrase dans le champ permettant de personnaliser le texte affiché en exemple : “Illisible !” s’écrie Ian en lisant l’Iliade…
Le prénom Ian est fréquent dans les pays anglo-saxons. Il s’écrie aussi Iain. L’Iliade et l’Odyssée est un texte du poète grec Homère.
Si vous ne parvenez pas à lire correctement cette phrase test avec la police choisie, pourquoi envisageriez-vous d’utiliser cette police de caractères pour vos publications ? Achèteriez-vous un appareil qui ne fonctionnerait pas dans certaines circonstances ?
Les polices avec empattements font partie du grand registre des polices sérieuses. Elles sont classées dans plusieurs sous-catégories parmi lesquelles les humanes, les garaldes, les réales, les didones, les mécanes, etc. (classification Vox ATYPI).
Moins neutres globalement, certaines polices avec serifs se montrent toutefois assez discrètes (Merriweather, Bitter, …) . Leur lisibilité à l’écran et sur le papier réside principalement dans la qualité de leur dessin. L’habitude que nous avons de lire des textes habillés par telle ou telle d’entre elles joue en faveur des plus fréquentes.
La police Georgia semble faire l’unanimité pour sa lisibilité. Elle n’a pas besoin d’être téléchargée dans une page Web, en effet, elle est disponible par défaut sur toutes les systèmes d’exploitation.
Voici un dernier site mentionnant des polices avec empattements particulièrement lisibles :
