Auteur/autrice : Yves Goguely

Formateur au GRETA Auvergne

Catégories
FCIL FCIL-cours

Personnaliser un gabarit de portfolio HTML

Vous avez commencé à produire des photomontages intéressants sur le thème de la pandémie à laquelle le monde actuel est confronté. Vous avez utilisé l’outil Photo Creator pour réaliser ces images. Vous avez sauvegardé vos productions sur votre poste de travail ou sur un support amovible pour pouvoir travailler chez vous.

Si vous ne l’avez pas fait, vous pourrez quand même réaliser cette activité en téléchargeant une sélection de photomontages mis à votre disposition.

Il s’agit maintenant de publier sur un document HTML (un site) une sélection des photomontages réalisés en classe. Pour cela vous allez utiliser un gabarit de portfolio pré-paramétré. Consultez le sommaire ci-dessous pour avoir une vision claire de toutes les étapes à suivre.

Vous allez intégrer 9 images dans une galerie de photos, dans la page d’accueil d’un site. Vous aurez également à présenter l’outil Photo Creator ainsi que votre sélection d’images. Des textes seront mis à votre disposition pour compléter en partie le gabarit du portfolio.

Observer le gabarit de portfolio

En cliquant sur le bouton ci-dessous vous accéder au modèle du portfolio à personnaliser. Prenez le temps d’examiner comment se présente ce type de site. Observez, par exemple, comment les zones des images réagissent au clic sur l’une d’elle.

Voir le gabarit du portfolio

Un site “onepage”

Ce gabarit de site HTML-CSS présente tous les contenus (images et textes) sur une seule page Web. Cette page est découpée en sections auxquelles il est possible d’accéder de deux manières :

  • en “scrollant” verticalement avec la molette de la souris (ou le doigt)
  • en utilisant le menu accessible en cliquant sur le petit “hamburger” (en haut à droite de la page)

Une grille d’images

Fonctionnement de la grille d’images

Les images sont présentées sur une grille de 3 colonnes de 3 images chacune.

En cliquant sur chaque image, celle-ci s’ouvre dans ce qui est nommé une image modale. Cette image modale se referme en cliquant n’importe où dans la fenêtre (et pas seulement sur la petite croix située en haut à droite de la fenêtre).

Une légende s’affiche sous chaque image dans la fenêtre modale. Nous verrons qu’il s’agit en fait du texte alternatif de l’image.

Modifications envisageables ultérieurement pour la grille d’images

Lors d’autres utilisation de ce gabarit, vous n’aurez peut-être pas neuf photos à présenter. Cela a été prévu.

➜ En supprimant 1 image dans chaque colonne, il est envisageable de présenter seulement 6 images (3 colonnes de 2 images).

Une présentation en 2 colonnes est mise à votre disposition dans le dossier du portfolio. Cette maquette présente les images sur une grille de 6 images sur 2 colonnes. En supprimant 1 image dans chaque colonne, il sera donc possible de présenter seulement 4 images (2 colonnes de 2 images).

Un bouton d’appel à l’action

La deuxième section du portfolio, intitulée “Photo Creator”, comporte un bouton d’appel à l’action (nommé bouton CTA pour Call To Action, en anglais). Il s’agit d’un lien stylisé permettant d’accéder à une autre page. Vous aurez à le paramétrer pour qu’il fonctionne correctement car pour le moment ce bouton renvoie en haut de la page du portfolio.

Des barres d’évaluation

Ce portfolio “onepage” présente dans sa deuxième section 3 barres d’évaluation. Elles permettent d’afficher un pourcentage de manière visuelle et elles serviront à évaluer l’outil Photo Creator selon trois critères.

Un pied de page ou “footer”

Le bas de la page de ce site mentionne les acteurs de sa structuration et l’outil utilisé pour sa stylisation.

Personnaliser le portfolio

Pour pouvoir personnaliser ce gabarit de portfolio, je vous invite à effectuer les opérations suivantes :

  • télécharger le dossier du site (bouton ci-dessous)
  • décompresser le dossier .zip (à l’aide de WinRar)
  • supprimer dans le dossier et ses sous-dossiers tous les fichiers .ds_store (visibles sur PC)
  • placer le dossier du site (téléchargé et nettoyé) sur le bureau de votre poste de travail
  • ouvrir le dossier avec Brackets
Télécharger le dossier du site

➜ Vous devez voir s’afficher dans la colonne de gauche de Brakets les éléments encadrés sur la capture d’écran ci-dessus.

En présentiel, le dossier du site sera mis à votre disposition dans le volume “ressources”.

Le fichier intitulé “texte-rubriques.md” vous permet d’accéder aux textes fournis pour les intégration dans l’index.html que vous choisirez.

➜ En fonction du nombre d’images mises à votre disposition, choisissez le fichier index présentant une grille de 2 ou 3 colonnes.

Récupérer les images à intégrer

Les images à intégrer sont une sélection des meilleures images produites par chacune et chacun d’entre vous. J’en ai rassemblé 12 dans un dossier que je vous invite à télécharger. Vous choisirez parmi ces 12 images les 9 images que vous souhaitez intégrer dans le portfolio.

Télécharger les photomontages

En présentiel, les images sont mises à votre disposition dans l’espace “Ressources”, sur le serveur du lycée.

➜ Plusieurs images ont été recadrées ou redimensionnées pour qu’elles aient toutes les dimensions prévues dans le gabarit proposé. Toutes les images doivent être allégées avant d’être intégrées (voir ci dessous)

Alléger les images à intégrer

Pour pouvoir intégrer vos photomontages dans le porfolio, il va d’abord falloir nécessairement les alléger.

Si, dans Brakets, vous cliquez sur l’image d’exemple nommée img-1.png, vous constaterez qu’elle fait plus de 1,10 MB. Si vous intégrez 10 images dans votre page Web, cela représentera 10 MB à afficher. C’est beaucoup trop lourd pour des connexions de petit débit. Les images s’afficheraient beaucoup trop lentement !

➜ Ceux qui savent comment procéder avec Photoshop peuvent le faire avec cet outil professionnel. Sinon il existe un petit utilitaire en ligne très pratique pour convertir une image png en image jpg plus légère. Vous pouvez convertir toutes vos images à la fois.

➜ Le test réalisé avec le photomontage d’exemple à ramené de poids de l’image à environ 160 KB. 10 photos de 160 KB pèseront 1,6 MB (… un peu plus que le poids d’une seule image png ).

Quand plusieurs images sont converties simultanément, elles sont téléchargées en un seul fichier zip. Il est alors nécessaire de les extraire de l’archive pour les placer dans le dossier « images » du portfolio.

Les images compressées sont toutes précédées d’un numéro entre crochets. Vous pouvez supprimer cette mention si cela vous gêne.

Attention de ne pas utiliser de lettres accentuées et d’espaces dans le nom de vos images.

Ajouter une balise title

Le gabarit fourni ne dispose pas d’une balise <title></title>, de telle sorte qu’aucun message clair n’apparaît dans l’onglet du navigateur. Créez une ligne supplémentaire dans le <head> pour mentionner vos prénoms (voir la capture d’écran ci-dessous).

Intégrer les images allégées et les légender

En examinant comment a été intégrée l’image d’exemple, vous allez pouvoir intégrer vos propres photomontages, en remplaçant chaque lien src="https://..." pointant vers le site placeholder.com par un lien pointant vers le dossier “images” du portfolio, vers l’image de votre choix (src="images/img-1.jpg").

Vous devez mentionner dans le texte alternatif de chaque image (propriété de l’attribut alt) le titre de l’image et les prénoms de leurs créateurs-trices (voir la capture d’écran ci-dessous)

➜ Le contenu entre guillemet proposé dans le gabarit après l’attribut alt de chaque image doit donc être personnalisé par vos soins. Ce texte est affiché en légende de chaque photo quand on clique sur une image et qu’elle s’affiche dans une fenêtre modale.

➜ Vous noterez que le code source de ce gabarit liste les images par colonne et non par rangée. Vous le constaterez dès l’insertion de la deuxième image 😉

L’image d’exemple doit être impérativement remplacée par l’un des photomontages produits.

Remplacer le texte de maquettage

Comme nous l’avons vu plus haut, vous disposez d’un fichier .md dans lequel le texte à intégrer est à récupérer.

➜ Ouvrez le fichier Markdown (fichier texte-rubriques.md) directement dans Brackets pour en récupérer le contenu (sélectionner et copier dans le presse-papier) puis intégrez le texte copié aux endroits appropriés dans le corps du portfolio (fichier index.html ).

Le fichier textes-rubriques.md ouvert dans Brackets

➜ Les textes placés entre astérisques dans le fichier textes-rubriques.md ne sont pas à intégrer dans le code source du portfolio. Ils apportent juste quelques précisions.

Premières intégrations du texte à insérer dans le code source du portfolio

Le format Markdown (.md) remplace progressivement le format Texte (.txt), utilisé pour éditer des documents lisibles sur toutes les plateformes (en particulier les fichiers « lisez-moi » — « read-me » — et les notices d’utilisation des logiciels).

Personnaliser le bouton CTA

À la fin de la première rubrique consacrée à Photo Creator, un bouton d’appel à l’action (Call To Action ou CTA, en anglais) doit permettre de se rendre directement sur le site de la plateforme de photomontage.

Modifiez les paramètres du bouton CTA selon les indications données.

Personnaliser les barres d’évaluation

Je vous propose d’évaluer l’outil Photo Creator en fonction des trois critères suivants :

  • Facilité de prise en main
  • Possibilités créatives
  • Qualité de l’exportation

➜ Observez comment sont codées les 3 barres d’évaluation et modifiez les données du gabarit pour que l’affichage corresponde à votre propre évaluation.

Vous pouvez rajouter d’autres critères et placer chaque barre d’évaluation à la position voulue.

Expliquer ses choix

La dernière section vous oblige à rédiger vous même un texte composé de paragraphes courts. Vous commenterez vos choix concernant les photomontages sélectionnés. Vous apporterez d’éventuelles précisions sur tel ou tel photomontage présenté.

➜ N’oubliez pas d’intégrer votre texte dans les balises HTML qui conviennent !

Compléter le pied de site (footer)

Pour terminer, vous devez signer votre travail en indiquant vos prénom(s) et nom(s), dans la zone affichée en gris clair, en bas du portfolio. Mentionnez également la date à laquelle vous avez terminé votre travail.

Transmettre le dossier du site

Utiliser une clé USB

Il sera nécessaire de me transmettre tout le dossier du site, pour que je puisse évaluer la qualité de votre travail. Si nous nous voyons en présentiel, n’oubliez pas de placer tout le dossier du portfolio sur une clé USB pour le transférer en classe sur le serveur du lycée.

Utiliser WeTransfer (option facultative)

Vous pouvez passer par WeTransfer et mon adresse mail académique (yves.goguely(arobase)ac-clermont.fr) pour me transmettre vos dossiers. Vous êtes obligés de compresser le dossier pour utiliser WeTransfer (idéalement, compressez-le au format zip). Voir la page Consignes générales pour plus de précisions.

Quels sont les usages possibles d’un site du type portfolio ?

Vous venez de personnaliser un gabarit de portfolio permettant de montrer des images légendées et de communiquer plusieurs informations à leur sujet. Vous avez créé un site qui pourrait être mis en ligne. Réfléchissez aux usages que vous pourriez faire de ce type de communication si vous aviez la possibilité de mettre vous-même un tel site en ligne. Nous en parlerons bientôt.

Catégories
CC2-cours Com-Créa

Récap’ avec Balo

Dans ce court article (cours-article…), je voudrais partager avec vous quelques ressources particulièrement pertinentes concernant le travail de designer graphique.

Vous allez devoir, au cours du TP final PAO-Com-Créa, réaliser un logo puis l’intégrer dans plusieurs produits de communication. Ce qui a été vu au niveau 1 est plus que jamais d’actualité. À cela s’ajoute, en communication créative, la méthode de design graphique que vous avez eu l’occasion de mettre en pratique au cours du niveau 2.

Les 10 règles de base

Pour ancrer tout cela dans la réalité professionnelle du métier auquel vous êtes en train de vous former, je vous invite à visionner cette vidéo de Balo (prenez des notes) :

➜ Après avoir visionné cette vidéo, je vous invite à lister de mémoire les 10 point commentés dans cette première vidéo (en masquant vos notes si vous en avez prises…).

Le design de logo

Balo est un graphiste complet et le design de logo est l’une de ses activités phares. Il propose donc plusieurs vidéos sur le sujet dont une série de 4 vidéos au cours desquels Balo nous invite à voir comment il a réalisé l’identité visuelle d’un restaurant.

Vous retrouverez des étapes vues en cours, avec des adaptations propres à la manière dont Balo travaille. D’autres étapes, comme l’arbre thématique ou la planche de style sont absentes… et vous verrez que passer par là lui aurait sans doute évité quelques déconvenues.

➜ Brief, documentation et moodboard

Tout commence assez bien et même si le cahier des charges se résume à une todo list… On pourrait penser que tout va fonctionner à merveille !

➜ Recherches manuscrites, vectorisation, illustration et préparation de la présentation au client

Balo a voulu aller trop vite : pas de planche de style validée préalablement, l’enthousiasme graphique l’emporte sur le questionnement et l’analyse des attentes du client et du contexte concurrentiel dans lequel doit s’insérer le logo attendu… Ses premières propositions (qui pourtant lui plaisaient beaucoup) sont refusées !

➜ Rebond et nouvelles propositions au client

Cette fois les choses sont menées plus rigoureusement et on retrouve des propositions mieux structurées avec présentation des typos et des nuanciers utilisés…

➜ Finalisation de la version définitive et début de l’intégration sur la papeterie

Les choses avancent bien et Balo prépare le 5e épisode avec la déclinaison de l’identité visuelle sur les produits de communication du restaurant.

➜ Les maquettes du menu et du site Web

L’identité visuelle se concrétise mais le contexte sanitaire ralentit dramatiquement le suivi du projet. On découvre avec intérêt Adobe XD pour le maquettage du site Web.

Catégories
CC2-exos Com-Créa

Quatre cahiers des charges

Pour vous permettre de mettre en pratique le contenu du cours de com-créa sur la création de logos, je vous propose quatre cahiers des charges.

Basés sur des contextes de communication d’entreprise tout à fait réalistes, ces cahiers des charges posent les bases des attendus de quatre clients fictifs. Toutes les entreprises concernées sont en Auvergne.

LIRE les cahiers des charges

Après avoir réalisé le logo de l’entreprise de votre choix, vous aurez à concevoir la papeterie d’entreprise : tête de lettre, tête de fax, carte de correspondance, carte de visite, enveloppe à fenêtre, etc. Il s’agit d’un élément clé de l’identité visuelle et vous aurez besoin de renseignement précis sur les mentions à faire figurer sur la papeterie d’entreprise.

Lire des textes pour la papeterie

Catégories
CC1-exos Com-Créa

Réaliser une affiche inspirée du style international

Au cours de ce TD, vous allez réaliser la mise en page d’une affiche inspirée du modernisme suisse international, en utilisant un nuancier de 3 ou 4 couleurs.

Étapes du TD

➜ Ce TD se déroule en 7 étapes et chacun est invité à suivre scrupuleusement ce déroulé.

  • Étape 1 : effectuer des recherches sur Pinterest pour repérer des affiches composées dans le style du modernisme international.
  • Étape 2 : caractériser le style moderniste suisse international en utilisant une grille de détermination.
  • Étape 3 : créer un tableau Pinterest sur le modernisme suisse international en collectant des affiches réalisés dans ce style.
  • Étape 4 : préparer les contenus à intégrer dans la page pour composer l’affiche
  • Étape 5 : construire un nuancier fonctionnel de 3 ou 4 couleurs en utilisant l’application en ligne Coolors.
  • Étape 6 : composer l’affiche en y intégrant éventuellement une image en accord avec le thème et le style imposés.
  • Étape 7 : proposer des variantes de l’affiche en changeant la couleur dominante (2 variantes pour un nuancier de 3 couleurs et 3 variantes pour un nuancier de 4 couleurs).
Affiche 4 couleurs collectée sur Pinterest

Étape 1 : effectuer des recherches sur Pinterest

Pinterest est une source d’inspiration particulièrement riche en matière de design graphique. Pour le travail à réaliser, vous disposer d’une direction artistique précise : le style de l’affiche doit se rapporter clairement au courant graphique nommé modernisme suisse international. Ce style est aussi appelé “style graphique international” ou “style suisse” ou encore “modernisme suisse”.

➜ Il s’agit de “convertir” cette directive en collecte d’éléments visuels susceptibles de constituer ultérieurement une planche de tendances (moodboard).

Rechercher par les noms du style

Vous devez être inscrits sur Pinterest et disposer d’un compte pour pouvoir effectuer les recherches proposées.

Voici des intitulés de recherche à utiliser :

  • modernism graphic poster
  • modernism graphic design
  • modernism graphic design poster
  • swiss modernist graphic design
  • international style graphic design

Des recherches sur le modernisme américain ne vous éloigneront pas trop du sujet. Il convient cependant de bien préciser “graphic design” !

  • american modernism graphic design

Sans les précisions sur le caractère suisse ou international du style recherché, vous pouvez accéder dans un premier temps à des images d’un autre style, antérieur à celui qui nous intéresse dans ce TD. Nommé aussi “modernisme” en français, ce style concerne les années charnières entre XIXe et XXe siècle, en Europe et particulièrement en Catalogne (voir le site dosde.com concernant le modernisme catalan).

Rechercher par le nom des designers

Certains designers graphiques sont devenus des figures emblématiques du modernisme suisse ou américain. Voici quelques noms de designers dont le travail est représentatif du style moderniste international :

Sur Pinterest, rajoutez “design” après le nom des designers, pour mieux cibler les productions de ces grands noms du design graphique moderniste.

Étape 2 : caractériser le style moderniste suisse et international

➜ Vous commencez à voir de quoi il s’agit et je vous invite à formuler les grandes caractéristiques du modernisme suisse et international. Les sites mentionnés un peu plus bas vous apporteront des éléments de réponse.

Pour vous aider, je vous propose d’utiliser cette grille de détermination. Téléchargez et imprimez le pdf mis en ligne (… ou imprimez l’image ci-dessus).

Télécharger la grille de détermination (PDF)

Vous devez identifier, à l’aide de cette grille, quatre aspects fondamentaux du style étudié :

  • la palette des polices de caractères utilisées
  • la palette des couleurs utilisées
  • les caractéristiques des cadres utilisés (formes structurantes, encadrés, bulles ou tout contenant d’informations)
  • les caractéristiques de visuels intégrés

Les zones intitulées “inutilisables” vous permettent de caractériser le style par ce qu’il n’est pas. Ces caractéristiques négatives vont vous servir de repoussoir dans la suite de votre travail.

Approfondir ses connaissances

Pinterest n’est pas la seule source documentaire sur les styles graphiques. Si vous souhaitez en savoir davantage sur le modernisme, voici une liste de “bonnes adresses” :

Utiliser Google Images en complément

Google images est une excellente source de documentation graphique. En utilisant des opérateurs booléens dans la requête effectuée vous pouvez préciser les résultats de votre recherche. Essayer la requête suivante : modernism AND graphism (avec ou sans “e” à la fin de “modernisme” et “graphisme”).

➜ Les résultats de recherche sur Google Images peuvent être archivées sous forme de capture d’écrans globales, en utilisant l’extension GoFullPage.

Étape 3 : créer un tableau Pinterest sur le modernisme suisse international

Un tableau Pinterest consacré à un style graphique clairement identifié est une véritable planche de tendances. Cette planche (en l’occurence ce tableau…) est disponible en ligne pour cadrer votre travail sur tous les projets s’appuyant sur le style choisi.

➜ Pour ce TD, 2 directives supplémentaires vous ont été communiquées : l’affiche doit se limiter à 4 couleurs et le nuancier doit nécessairement être fonctionnel (c’est à dire étagé de manière à privilégier un contraste maximum entre les couleurs utilisées).

➜ Comme les affiches créées dans cette mouvance utilisent rarement plus de 4 couleurs, vous disposez d’un très large choix !

Je vous demande d’utiliser Pinterest pour plusieurs raisons :

  • Pinterest est d’abord un moteur de recherche et non un réseau social
  • Pinterest contient des tableaux très pertinents
  • Pinterest est un excellent outil de curation de contenu (et cette discipline est au programme du titre professionnel que vous envisagez de valider…)
  • Vous aurez besoin de Pinterest dans la suite de la formation Com-Créa

➜ Des précisions sur l’usage de Pinterest pour élargir vos recherches vous sont données sur studiobenziv.wordpress.com.

Remarque : il est possible de désactiver toutes les notifications envoyées par défaut aux utilisateurs de Pinterest. Allez dans les paramètres de votre compte et faites les réglages souhaités !

Sur Pinterest, épingler sur son propre tableau des images épinglées sur les tableaux des autres est une pratique vivement encouragée !

➜ Je vous invite à explorer les tableaux de emiliofr (pinterest.fr/emiliofr/). pour y trouver un tableau intitulé “Gráfica Suiza. Estilo Tipográfico Internacional” (à côté du tableau consacré à Matisse)… c’est en espagnol, mais il s’agit bien du style suisse international (avec quelques affiches moins neutres et plus expressives que d’autres)… Au passage, notez la richesse de ce compte Pinterest pour des recherches sur tel ou tel style graphique !

Étape 4 : préparer les contenus à intégrer dans la page

L’affiche à composer porte sur une exposition des œuvres l’artiste Mark Fadour, intitulée Karysm, au Musée d’Art Roger Quillot, à Clermont-Ferrand.

Le nom de cet artiste est totalement fictif : ne cherchez pas ses œuvres sur Internet !

Collecter les logos

➜ Doivent figurer sur l’affiche, le logo du MARQ, le logo de la Ville de Clermont-Ferrand, le logo du Département du Puy-de-Dôme et celui de la Région Auvergne Rhône-Alpes.

Vous êtes invités à faire une recherche sur le Web pour collecter les logos des institutions mentionnées. Vous téléchargerez les logos, de préférence dans un format vectoriel.

➜ À cette occasion vous pouvez commencer à vous constituer une banque de logos dans laquelle vous pourrez choisir, ultérieurement, les logos dont vous aurez besoin.

Choisir le modèle à suivre

Parmi les images collectées sur Pinterest, vous devez choisir un modèle d’affiche. Votre composition finale devra suivre ce modèle.

Il est probable que le modèle dont vous souhaitez vous inspirer ne soit pas composé en utilisant un nuancier fonctionnel. Vous adapterez les couleurs pour répondre à cette exigence du cahier des charges.

➜ Je vous demande de me soumettre le modèle choisi avant d’aller plus loin dans votre travail.

Vous devez donc choisir ce modèle parmi des affiches de style suisse international (j’insiste !). Ne prenez pas comme modèle des affiches traitées dans un autre style, même si le style repéré vous plait davantage. Vous travaillerez dans la majorité des cas en réponse à un cahier des charges mentionnant une charte graphique à respecter.

Structurer le texte de l’affiche

Le texte à intégrer dans l’affiche est le suivant :
Mark Fadour, Karysm. Exposition du 12 au 17 avril 2024,
au Musée d’Art Roger Quillot, Place Louis-Deteix, Clermont-Ferrand.

Le texte fourni n’est pas structuré. Vous pouvez dès maintenant en déterminer le découpage, la hiérarchie et l’ordonnancement.

Vous devez constituer les blocs d’information que vous aurez à mettre en page en suivant le modèle choisi.

Collecter les polices de caractères

D’une manière générale, le modernisme international utilise plutôt des polices de caractères sans-serif. Analyser les formes typographiques utilisées dans le modèle que vous avez choisi.

Voyez quelles sont les polices dont vous disposez sur votre poste de travail. Si vous n’avez pas de polices similaires à celle que vous avez repérées, faites une recherche sur les plateformes de distribution suivantes pour vous les procurer :

Voici une listes de polices gratuites en lien avec le style suisse moderniste :

Les typographes ayant réalisé les typographies présentées dans la liste ci-dessus sont tous d’excellents typographistes. La grande majorité de leurs fontes gratuites sont accentuées. Collectez le lien vers leur page Dafont, afin de pouvoir la consulter facilement lors de prochaines recherches.

Collecter ou produire le visuel

Les visuels abstraits, intégrés dans les affiches de style suisse moderniste international sont généralement géométriques. Ils peuvent donc être réalisés facilement dans le logiciel de mise en page en utilisant des formes de blocs primaires.

➜ Évitez tout recours à des artifices décoratifs, des contours, des ombres portées, des effets de biseaux, etc.

Si votre modèle comprend une image photographique, préparez votre photo en respectant le traitement stylistique du modèle de composition. Le modernisme suisse, particulièrement à ses débuts, privilégiait le traitement des photographies en niveaux de gris.

Étape 5 : construire un nuancier fonctionnel

En fonction des informations transmises plus haut (nature de l’événement, nom, date, lieu, etc.), du style imposé par la direction artistique et du modèle choisi comme guide de composition, choisissez les couleurs de l’affiche à réaliser.

➜ Dans la perspective de proposer des variantes chromatiques de votre première mise en page, veillez à construire un nuancier de couleurs réversibles. Un tel nuancier permet à toutes les couleurs de se substituer les unes aux autres sans perte de lisibilité.

➜ Dans le cadre particulier de ce projet, la symbolique des couleurs utilisées n’entre pas en ligne de compte.

Pour construire le nuancier fonctionnel, suivez les conseils donnés dans le cours Construire un nuancier fonctionnel.

➜ Vous pouvez exporter le nuancier construit dans Coolors au format ASE pour l’importer ensuite dans Illustrator, InDesign ou Photoshop.

Étape 6 : composer la maquette de l’affiche en suivant le modèle choisi

➜ Je vous invite à travailler sur un format A4 orientation portrait (210 x 297 mm). Vous finaliserez votre travail dans InDesign ou Illustrator, suivant votre maîtrise des outils de la suite Adobe. N’utilisez pas le logiciel Photoshop pour finaliser votre mise en page.

Les grilles de composition

Les graphistes de l’école suisse moderniste utilisent beaucoup les grilles de construction pour appuyer les éléments graphique sur des axes invisibles mais repérables.

➜ Pouvez-vous repérer si une grille de composition a été utilisée pour structurer le composition de l’affiche que vous avez choisi comme modèle ?

Voici par exemple une grille très simple utilisable dans une page A4. Il suffit de construire une grille de 4 x 3 carrés de 70 x 70 mm à insérer en tête document. Il reste en pied de page une bande de 210 x 17 mm qui peut être utilisée pour intégrer les logos.

Si votre modèle est construit sur une autre grille, prenez le temps de l’identifier puis de la mettre en place dans votre fichier de mise en page. C’est un élément clé de la composition à reproduire !

Les échelles typographiques

Pour la hiérarchisation des informations, le graphistes modernistes utilisent souvent des échelles typographiques. Je vous propose ci-dessous un document réalisé dans Illustrator, montrant comment utiliser une échelle typographique pour hiérarchiser les textes d’une affiche.

Le chiffre indiqué à gauche du texte correspond au corps du texte concerné. La finalité est de présenter des niveaux hiérarchiques nettement différenciables à l’œil nu.

➜ Dans le cas de cet exercice, inspirez-vous du modèle choisi et validé pour réaliser votre composition. S’il vous faut sauter un niveau pour mieux coller à votre modèle, c’est tout à fait envisageable 😉

À ce stade de votre travail, vous pouvez utiliser les 25 opérations à cocher pour valider une composition graphique.

Étape 7 : proposer des variantes de l’affiche

En utilisant un nuancier fonctionnel, il est très facile de créer des variantes de votre composition. Pour cela, il faut avoir réalisé sa maquette en utilisant des couleurs réversibles.

Ce point peut devenir un facteur essentiel de votre design graphique. Lors de vos créations, vous pourrez tester des atmosphères chromatiques différentes sans changer de nuancier (et donc de champ symbolique). Vous gagnerez du temps en pouvant proposer à vos clients des variantes colorées, sans modifier votre composition. Dans un projet comportant plusieurs sections ou rubriques, vous pourrez facilement les différencier les unes des autres, en conservant le même nuancier.

Changer la couleur dominante

Changer d’abord la couleur dominante (il s’agit généralement de la couleur du fond). Cela vous amènera à voir votre travail sous un aspect très différent ! Il vous faudra bien sûr redistribuer les autres couleurs pour éviter les superpositions de texte et de fond de la même couleur.

1 seul nuancier de 3 couleurs ➜ 2 dominantes utilisées ➜ 2 ambiances différentes

Ce type de manipulation permet de ne pas se focaliser sur une première version trop vite considérée comme satisfaisante. Lors des modifications de couleurs, demeurez attentifs aux résultats intermédiaires. En effet, même si des formes sont réunies par la même couleur, il se peut que le rendu soit très satisfaisant.

Pensez à utiliser des contours si cela s’avérait nécessaire. Moins vous utilisez de couleurs, plus vous pouvez avoir besoin de contours pour différencier les formes !

➜ Sauvegardez la première version réalisée et créez les variantes sur une nouvelle page ou dans un nouveau document. Toutes les versions (déclinaisons) créées doivent pouvoir être montrées ou exportées facilement.

Pour mieux saisir le principe de changement de dominante en utilisant le même nuancier, consultez le PDF intitulé Variations de dominante.

2 nuanciers de 4 couleurs étagées ➜ 4 dominantes ➜ 4 ambiances graphiques

Changer de nuancier (mais conserver l’étagement)

Vous pouvez même envisager de conserver la même composition et de changer de nuancier (et donc de couleurs et de symbolique).

➜ Tentez l’expérience en veillant à utiliser un second nuancier dont les valeurs des couleurs sont étagées sur les mêmes ratios de contraste.

Catégories
RWRN RWRN-cours

Le parapente de la rédaction Web

Dans ce cours nous allons aborder les différents éléments qu’il faut associer pour assurer le référencement naturel d’une page Web rédigée par vos soins.

Un message écrit parvient à son destinataire quand il est porté par une rédaction adaptée au média utilisé. La rédaction Web est une discipline très technique. On ne s’improvise pas rédacteur Web. On n’assemble pas un parapente sans mode d’emploi ni expérience préalable !

Vous n’êtes pas le pilote du parapente, vous êtes le fabriquant du parapente. Quand vous rédigez pour le Web vous construisez un dispositif (le parapente) pour porter un message (le parapentiste). Le dispositif porteur est complexe mais s’il est assemblé convenablement il remplit parfaitement son rôle.

Informer les moteurs de recherche pour informer les lecteurs

Une des fonctions de la rédaction Web est d’informer correctement les moteurs de recherche. Il s’agit de permettre au public visé de recevoir par l’intermédiaire des moteurs de recherche les messages attendus, en réponse aux recherches effectuée préalablement par le public sur les moteurs.

Vous ne rédigez pas prioritairement pour les moteurs de recherche. Vous rédigez pour des humains en composant avec des robots et leur comportement en partie prévisible.

Référencement naturel et rédaction journalistique

Sur le schéma présenté plus bas, plusieurs points sont surlignés en orange pâle. Il s’agit des points que les moteurs de recherche prennent en compte plus particulièrement. Ces points relèvent d’une technique rédactionnelle caractéristique de l’écrit pour le Web.

Les autres points se rapportent à une technique rédactionelle plus générale, relevant de l’écrit journalistique et libérée des contraintes du média Web.

En réalité, les deux aspects techniques de la rédaction (référencement naturel et rédaction journalistique) se complètent parfaitement. L’application de l’une et de l’autre des techniques rendront votre texte plus cohérent et plus facile à interpréter par vos lecteurs.

Les éléments du parapente

Nous allons nous intéresser à la forme et non au fond. Quel que soit le sujet traité (quelle que soit la physionomie du message porté — le parapentiste), la forme d’un écrit pour le Web sera toujours celle d’un parapente.

Référencement, rédaction et structuration sont étroitement liés, comme le sont l’aile du parapente, les suspentes, les élévateurs, la sellette et ses sangles.

L’aile du parapente

Composée de caissons juxtaposés, l’aile est associée à 4 points fondamentaux :

  • La pertinence du sujet
  • La fiabilité du propos
  • Le poids des références externes
  • La qualité du maillage interne

Sont associés sur l’aile deux premiers points relevant de choix de communication d’ordre journalistique et éthique. Les deux autres points sont en lien avec le média Web. Ces deux derniers points méritent quelques précisions.

Le poids des références externes

Les références externes désignent pas les liens que vous insérez dans votre texte pour illustrer ou compléter votre propos. Il s’agit ici de liens qui pointent de l’extérieur vers votre texte. Plus précisément, il s’agit de liens insérés dans les textes de sites à très forte fréquentation pointant vers votre propres site. On les nomment aussi liens entrants ou backlinks.

Si un site connu mentionne votre site en référence et met en place un lien pointant vers lui, c’est un levier puissant de référencement de votre propre site. La position de votre site dans les résultats de recherche est donc en grande partie liée à votre réputation auprès des ténors du secteur.

Ce “parrainage” des petits par les grands ne peut être envisagé qu’avec des contenus de qualité, pertinents et fiables, rédigés selon les règles en usage. Je vous invite à visionner cette vidéo de Jean-Marc Hardy pour évaluer à sa juste mesure le poids des références externes.

La qualité du maillage interne

Le maillage interne désigne le réseau de liens intégrés dans le texte et pointant vers les différentes parties du texte. C’est le cas quand il s’agit d’une seule page Web (site one page). Le maillage interne désigne aussi l’ensemble des liens qui pointent vers les différentes pages d’un même site (quand celui-ci est multipage).

Les liens de page à page peuvent pointer sur telle ou telle partie de la page cible (c’est même recommandé). C’est plus confortable pour le lecteur. De plus, cette précision de pointage est prise en compte par les moteurs de recherche.

La pertinence de ce maillage est aussi un point important pour l’optimisation du référencement naturel. La pertinence du maillage interne repose sur l’adéquation sémantique — les acteurs du SEO parlent d’affinité — entre la page source et la page cible. Il est nécessaire que le sujet de la page cible complète vraiment le sujet de la page source.

Pertinence du sujet et fiabilité du propos

La pertinence et la fiabilité ne sont seulement une question d’éthique journalistique. C’est la meilleure garantie pour être repéré par des lecteurs sérieux puis référencé rapidement par des ténors du Web ayant toute la confiance de leur lectorat.

Prenez le temps de peaufiner votre documentation, vérifiez vos sources, soyez honnête dans votre argumentation, bref, soyez pros !

Il est recommandé d’insérer au minimum trois types de liens dans un article ou une page Web :

  • Un lien vers une autre page du site
  • un lien vers un site partenaire (non concurrentiel), pour compléter vos écrits
  • un lien vers un site d’autorité, pour appuyer votre propos

Les suspentes du parapente

Les suspentes du parapentes représentent ici les ficelles du métier de rédacteur… Pour être plus exact, il s’agit de la grosse ficelle qui consiste à miser sur la proximité du propos avec les besoins du lecteur.

Le rédacteur Web s’adresse à un “persona”. Il écrit pour une personne virtuelle, un lecteur qu’il connaît à travers ses habitudes et besoins supposés. Il s’agit là d’un aspect courant dans une démarche centrée utilisateur. Pour plus de détails à ce sujet je vous renvoie vers quelques sites et articles édifiants :

Ayant identifié votre interlocuteur, vous allez pouvoir “suspendre” votre texte à votre sujet pertinent et à votre documentation fiable (l’aile du dispositif).

La sellette du parapente est relié à l’aile par 2 élévateurs auxquels sont fixées les suspentes. Notre schéma en montre 4 (… sur les 6 traits dessinés, 2 sont les freins). En réalité il y en a bien plus !

Convenons que chaque suspente est une affirmation ayant un rapport de proximité avec votre persona (votre lecteur ou lectrice cible). Nous pourrions classer ces affirmations en plusieurs groupes, chacun faisant respectivement appel à :

  • la proximité temporelle (actualité du sujet traité…)
  • la proximité géographique (proche du domicile ou du lieu d’activité du lecteur…)
  • la proximité socio-professionnelle (concernant le métier et le statut du persona…)
  • la proximité psycho-affective (proche des préoccupations et des désirs du lecteur-cible…)

Les élévateurs du parapente

Les élévateurs servent de liaison entre la sellette et les suspentes. Sur le schéma du parapente, ils sont repérés par 2 points verts se rapportant à l’adaptation du lexique au lectorat (public cible) et au respect des codes de l’écrit.

L’adaptation du lexique au public cible

L’adaptation du lexique au public cible consiste à choisir son vocabulaire en fonction des lecteurs auxquels le texte s’adresse. Faut-il utiliser tel ou tel mot technique appartenant aux jargons professionnels quand on s’adresse au grand public ? Est-il approprié d’utiliser des termes appartenant aux langages familiers dans un article de fond adressé à des scientifiques ?

Considérez le mot “lectorat” et l’expression “public cible”. Lequel de ces 2 termes vous semble le plus adapté au public des apprenants en formation au GRETA ? Ces 2 termes n’appartiennent pas exactement au même niveau de langage (registre de langue).

Les 2 termes ne s’insèrent pas non plus exactement dans le même champ sémantique. Nous reviendrons plus bas sur la question du champ sémantique.

En annexe d’une page Web utilisant des mots nouveaux ou inhabituels pour les lecteurs, il est recommandé d’insérer un glossaire. Proposer un lien vers un glossaire existant est une alternative envisageable. Elle conduit cependant votre lecteur hors de l’espace de communication mis en place.

Le mot “glossaire” est parfois remplacé par les mots “lexique” ou “vocabulaire”. Voici un exemple de lexique en annexe, concernant la formation professionnelle : https://www.helloworkplace.fr/lexique-formation-professionnelle/

Liens pour approfondir le sujet

Le respect des codes de l’écrit

Les codes de l’écrit dont il est question ici ne se cantonnent pas aux seuls codes de l’écrit pour le Web. Il s’agit des codes de l’écrit en général :

  • la syntaxe de la langue (la construction des phrases) ;
  • l’orthographe lexicale et grammaticale (l’écriture usuelle des mots et les changements d’écriture liés à leur fonction grammaticale dans la phrase) ;
  • la ponctuation (la manière de séparer les parties d’une phrase pour en améliorer la compréhension).

L’apprentissage de ces codes s’effectue dès les premières années de la scolarité. En réviser les nombreux aspects au cours de sa vie professionnelle est vivement recommandé. La rédaction est une activité très cadrée !

Lien pour approfondir le sujet

Les sangles (et le casque)

Sangles et casque sont des éléments de sécurité. Il s’agit de veiller à ce que le message soit bien attaché à la structure du texte. Il faut que toutes les conditions SEO soient remplies pour que le message arrive à destination.

Un choix pertinent de mots clés

Le choix des expressions et mots clés est une étape clé du SEO. La pertinence d’une expression ou mot clé repose sur plusieurs facteurs :

  • la fréquence de recherche de ce mot-clé sur Google
  • la cohérence de ce mot clé par rapport au sujet traité
  • l’efficacité du mots clé sur le plan marketing

Il existe plusieurs outils à disposition des rédacteurs et des référenceurs pour déterminer la pertinence d’un mot clé. Vous étudierez cela en web marketing. Un concept doit cependant être bien compris avant de mener cette étude : la courte, moyenne et longue traîne.

Voici une vidéo d’Oliver Andrieu, spécialiste SEO reconnu, qui explique assez clairement de quoi il s’agit.

Des mots clés aux endroits stratégiques

En SEO, il est primordial de prendre en compte les endroits de la page examinés prioritairement par Google. Ce sont dans ces endroits, qualifiés de stratégiques, que doivent être placées les expressions et mots clés. On les nomment les endroits chauds de la page.

Source : https://www.keacrea.com/position-mots-cles-page-web

Un champ sémantique cohérent

Pour être positionné dans une page de résultats de recherche, il est indispensable de travailler la cohérence du champ sémantique de chaque page Web. Cela consiste à utiliser un lexique parfaitement adapté au sujet traité, enrichi par des expressions en étroit rapport avec la thématique de la page.

L’outil le plus simple à mettre en œuvre pour évaluer la pertinence du champ sémantique utilisé est l’extension du navigateur Chrome nommée Text Optimizer. Cet outil est un produit annexe de l’application en ligne 1.fr, destinée à optimiser le choix lexical en rédaction Web. Limité dans leur version gratuite, ces outils peuvent cependant être testés une dizaine de fois dans une journée.

Lien pour approfondir le sujet

Les meilleurs outils d’analyse sémantique
Pourquoi et comment optimiser le champ sémantique SEO de vos articles

Une quantité suffisante de mots

Pour que Google puisse analyser correctement le contenu d’une page Web, il est nécessaire de lui fournir un maximum d’éléments. Il est recommandé de rédiger des textes d’au moins 1000 mots. Le référencement idéal s’effectue statistiquement sur des textes de 1500 à 3000 mots.

En SEO, il est souvent question d’une limite de 300 mots minimum (voir l’article d’Alain Vanolli, un peu plus bas…). Cela concerne des contenus rédactionnels relativement synthétiques. Se positionner dans le top10 des pages de résultat de Google avec si peu de mots suppose un traitement optimal du sujet. Avec une grande pertinence de propos et une grande qualité de structuration, c’est possible !

En vous documentant sur la question, vous allez voir que le longueur du texte est un paramètre SEO parmi d’autres. La longueur du texte entre en compte parallèlement à la pertinence du propos. Elle est à prendre en considération en fonction votre réputation en ligne et de la concurrence rencontrée sur le sujet traité.

Olivier Andrieu, a publié récemment une capsule vidéo sur le sujet, je vous invite à la visionner.

En apprendre davantage avec Alain Vanolli

La sellette du parapente

Les élévateurs sont fixés à la sellette du parapente. L’adaptation du lexique est “fixée” à l’accessibilité des contenus. Le respect des codes de l’écrit est “fixé” à la concision syntaxique.

L’accessibilité des contenus

Une page Web doit pouvoir s’afficher sur tous les écrans mais surtout pouvoir être lues par des robots lecteurs. En effet, les personnes malvoyantes ou non-voyantes utilisent des outils dédiés qui leur lisent les sites consultés. Il est donc important de rédiger des textes qui présentent aussi des qualités d’audition.

Pour rendre un site accessible, il est important de prévoir des textes alternatifs aux images significatives (photos documentaires, schémas descriptifs, graphiques, etc.). L’attribut alt="", dans la balise HTML <img> est notamment réservée à cet usage.

Les légendes, sous les images, sont des textes dont le contenu doit être différent de celui du texte alternatif. Les légendes sont lues par les robots lecteurs mais pour les voyants, il est inapproprié qu’elles mentionnent ce qui se voit parfaitement dans l’image.

En savoir plus sur l’accessibilité des textes et des images :

La concision syntaxique

La concision syntaxique consiste à privilégier l’usage de phrases courtes. En complément, pour faciliter la lecture du texte, l’utilisation de paragraphes courts est recommandée. Examinons cette question plus en détails.

Une phrase devrait contenir idéalement 15 à 22 mots. À partir de 24 mots, il est absolument nécessaire de couper la phrase en 2. Par ailleurs, un paragraphe de 3 ou 4 phrases d’une quinzaine de mots constitue une unité rédactionnelle idéale.

Le moyen le plus simple de vérifier si votre syntaxe est satisfaisante est d’utiliser des outils de lecture automatique. Vous discernerez à l’oreille la qualité de vos texte. Après avoir optimisé la longueur des phrases et des paragraphes, vous obtiendrez des textes faciles à lire et agréables à écouter.

Voici un site construit avec des phrases et les paragraphes courts :

Une structure hiérarchisée

La structure d’un site Web désigne plusieurs réalités. Suivant le contexte dans lequel il est question de structure, ce mot désigne :

  1. la structure HTML du site (l’ensemble des parties balisées du site, côté code source)
  2. le plan rédactionnel adopté (l’organisation logique des idées présentées sur le site)
  3. l’arborescence du site (un des aspects de l’architecture des l’informations du site et de la catégorisation des contenus)
  4. le maillage interne du site (l’articulation des pages et des parties du site entre elles)
  5. la structure visuelle des pages suivant la largeur de la fenêtre d’affichage (la disposition des éléments de la page dans l’espace disponible)

Tous ces aspects sont en effet structurés et tous doivent être hiérarchisés avec soin. Je les présente ici de manière ordonnée, simplement pour m’y référer plus facilement.

Dans la figure du parapente qui nous sert de fil conducteur, les 2 premières acceptions du terme “structure” (voir plus haut) forment l’assise et le dossier de la sellette du parapente. Le message porté par le dispositif rédactionnel y est installé confortablement.

La structure HTML

La structure HTML est souvent nommée le squelette d’un site Web. Cette structure va soutenir les contenus et soutenir le texte en particulier. C’est elle qui va vous permettre d’informer clairement le navigateur sur vos attentes en matière d’affichage.

Il s’agit de coder (en HTML) le découpage, la hiérarchisation et l’organisation du texte pour qu’il s’affiche correctement à l’écran. Ce codage s’adresse au navigateur d’abord puis au lecteur ensuite.

Codage HTML et plan rédactionnel sont inséparables. Pour faciliter leur mise en œuvre, l’utilisation d’un éditeur Markdown est vivement recommandée. Je conseille StackEdit en ligne et Typora hors ligne.

Le plan rédactionnel

Concernant le plan rédactionnel, vous entendrez beaucoup parler du plan journalistique en pyramide inversée. Isabelle Canivet et jean-Marc Hardy nous en parle dans la vidéo ci-dessous.

Ce plan n’est pas le seul à pouvoir être adopté lors de la rédaction d’un article pour le Web. Les plans chronologiques ou énumératifs sont fréquents et il en existent de nombreux autres.

Cependant, tous les plans ne se prêtent pas facilement au jeu des mots clés disposés en premier. Révéler dès l’introduction les principaux éléments de la conclusion n’est pas toujours possible. Ceci explique en partie le succès et les limites du plan en pyramide inversée.

J’ai recensé sur une carte heuristique 14 plans rédactionnels différents. Les uns ont pour vocation de structurer pour informer, les autres de structurer pour convaincre. Vous pouvez en prendre connaissance sur Mind Meister.

➜ À propos de structure(s) :

En savoir plus

Voici quelques adresses utiles pour se faire une idée encore plus précise du sujet :

Vous trouverez de nombreux liens complémentaires sur netboard.me.

Document complémentaire

Cours annexe de rédaction Web : ce cours, rédigé initialement par Vanina Noël, et publié ici en pdf, comprends tous les aspects les plus importants de la rédaction Web, listés par thème.

Catégories
FCS FCS1-cours

Personnaliser un gabarit de site HTML-CSS

Nous avons utilisé StackEdit (➞ voir ce cours) pour rédiger un texte tenant compte des contraintes du référencement naturel (➞ voir ce TD). Voyons maintenant comment donner une forme attrayante à notre travail. 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 (ils sont présentés sans index récapitulatif). Je vous propose de les télécharger et de les examiner d’un peu plus près.

Télécharger les gabarits

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-là 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.

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 Coolors vous aidera à choisir vos couleurs. N’hésitez pas à lire ou relire le cours intitulé Créer des nuanciers fonctionnels avec Coolors.

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. Et si vous ne trouvez pas votre bonheur, vous pouvez toujours utiliser un des outils proposés sur la page Typography resources.

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 est de bénéficier à l’export d’un contenu proprement balisé. 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.

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

Seulement pour les apprenants de la formation Designer Web.

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 !

Télécharger le gabarit multipage

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.

Catégories
RWRN RWRN-exos

Rédiger une page Web en 10 étapes

Dans ce TD nous allons apprendre à structurer et styliser une page Web en tenant compte des contraintes de la rédaction et du référencement des pages Web. Nous utiliserons 3 outils : un éditeur Markdown en ligne (StackEdit), un éditeur de carte heuristique en ligne (TextToMindMap) et un éditeur de code en local (Brackets).

Pour l’utilisation de l’éditeur Markdown, je vous renvoie vers le cours intitulé Utiliser StackEdit. Pour la prise en main et la personnalisation de l’éditeur de code Brackets, je vous renvoie vers les cours Personnaliser Brackets et les activités proposées dans le TD intitulé Manipuler le code source avec Brackets. Concernant TextToMindMap, la prise en main est très intuitive : aucun prérequis n’est exigé.

Pour réaliser ce TD, il est indispensable d’avoir une vision claire de ce qu’est une structure élémentaire HTML. Pour ceux qui découvriraient ce concept, je vous invite à consulter le cours intitulé Identifier la structure d’une page HTML

L’objectif de ce TD est d’afficher dans la fenêtre d’un navigateur une page HTML dont la structure rédactionnelle suit un plan logique simple à percevoir. De plus, dans la perspective d’une publication en ligne, nous souhaitons structurer le texte de manière à en optimiser le référencement c’est à dire l’indexation dans les pages de résultats des moteurs de recherche (= SEO ou Search Engine Optimisation).

Nous allons procéder en suivant les 10 étapes suivantes :

  1. Collecter la documentation
  2. Construire l’arbre des mots-clés
  3. Établir le plan dans un éditeur Markdown
  4. Optimiser la rédaction des titres
  5. Tester la cohérence de la structure en examinant le sommaire
  6. Rédiger l’introduction (chapeau ou chapô)
  7. Rédiger les paragraphes en utilisant les mots-clés disponibles
  8. Tester la syntaxe avec un robot lecteur
  9. Exporter en HTML la version finalisée
  10. Personnaliser la présentation de la page

Il existe bien sûr une étape préparatoire incontournable : le choix du sujet… Pour illustrer ce TD, je me baserai sur un texte proposé lors d’une session précédente par un stagiaire du GRETA.

Étape 1 – Collecter la documentation

Le sujet étant choisi, il est nécessaire de rassembler les informations susceptibles d’être publiées dans notre document.

Rédiger un premier jet (une sorte de brouillon), sans contraintes particulières, est une solution. Collecter des textes libres de droit et les assembler rapidement en est une autre.

Il faut cependant garder à l’esprit que les opérations à mener pour rendre le texte conforme aux exigences du Web vont vous amener à remanier profondément votre brouillon.

Utiliser StackEdit ou un autre éditeur Markdown est un bon choix pour rassembler les textes collectés et rédigés. Utiliser des outils comme Notepad++ sur PC ou TextEdit sur Mac sont aussi de bonnes alternatives.

Il est déconseillé d’utiliser Word, sous peine de devoir nettoyer le texte ultérieurement à cause plusieurs lignes de codes inappropriées, collées souvent en même temps que les textes copiés.

Étape 2 – Construire l’arbre des expressions et mots clés

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.

Anticiper le référencement naturel

Le référencement naturel se base sur 2 types d’expressions et mots clés :

  • les expressions ou mots clés courts, thématiquement et sémantiquement très proches du sujet et très “grand public”
  • Les expressions ou mots clés plus long, en rapport avec le sujet mais plus spécifiques à tel ou tel groupe de personnes.

Les premiers sont fréquemment utilisés dans le champ de saisie des moteurs de recherche et ils sont aussi très utilisés comme expressions ou mots clés sur les sites concurrents.

Les seconds sont moins souvent saisis sur Google ou Bing mais ils sont peu utilisés comme expressions ou mots clés sur les sites concurrents. On les appelle les mots clés longue traîne (ou mots clés de longue traîne ou long tail, en anglais).

Dans Text2MindMap, placez les premiers à proximité du sujet central (expression ou mot clé principal de la page) et placez les seconds à l’extrémité de vos branches.

Nous aurons l’occasion de revenir sur ce point pendant la formation mais vous pouvez vous documenter à ce sujet en consultant ces articles :

Distinguer l’arbre et le plan

Après avoir réalisé l’arbre des expressions et mots clés, vous aurez une idée plus claire de votre sujet. Vous commencerez aussi à distinguer des plans possibles pour présenter votre sujet.

Faites cependant attention à ne pas transformer inconsciemment l’arbre des expressions et mots clés en plan rédactionnel thématique.

Étape 3 – Établir le plan dans un éditeur Markdown

En vous appuyant sur la documentation collectée et sur l’arbre des mots-clés, établissez le plan de votre texte, en suivant un modèle adapté à votre propos et à votre public.

StackEdit est un outil parfaitement adapté pour commencer à établir la structure rédactionnel de votre contenu principal.

Saisissez votre plan en langage Markdown. Dans la fenêtre de droite (si elle est activée), vous pouvez voir à quoi ressemblera votre texte une fois exporté avec l’option “Styled HTML”.

Dans l’exemple utilisé pour illustrer ce TD, le plan a été choisi en utilisant les expressions clés d’une seule branche, celle des modèles célèbres de motos mythiques.

Le plan thématique n’est pas systématique

Utiliser Text2MindMap pour établir le plan du texte à rédiger est très tentant. Cela est d’autant plus tentant qu’il suffit de sélectionner la liste affichée dans la colonne de gauche de Text2MindMap pour la copier et la coller dans StackEdit. Un peu de balisage et le tour est joué…

Je vous conseille cependant de bien dissocier les 2 étapes, même si les expressions les plus proches de votre sujet central ont toutes les chances de s’insérer dans les sous-titres h2 de votre article.

En effet, Le choix d’un plan autre que le plan thématique doit être envisagé. Un plan chronologique ou par points de vue ne se structure pas comme un plan documentaire. Et le plan en pyramide inversée, recommandé pour la publication en ligne, se structure différemment.

Vous trouverez une liste de plans rédactionnels selon les besoins sur Mind Meister.

Poser une question pour trouver un plan

Un des moyens utilisés pour trouver le plan d’un article consiste à poser une question en rapport avec avec le sujet traité puis à choisir le plan en fonction du mot utilisé en début de question.

  • Si la question commence par “Comment” (Comment faire ceci ? Comment choisir cela ? etc.), le plan à adopter sera probablement un plan par étapes avec des explications techniques.
  • Si la question commence par “Quoi” ou “Que” (Quoi faire pour … ? Que choisir pour … ? etc.), le plan à adopter sera probablement un plan guide avec une ou plusieurs propositions.
  • Si la question commence par “Quel” ou “Quelle” (Quel est le … de ceci ? Quelle … choisir ?, etc.), le plan à adopter sera probablement une réponse précise plus où moins détaillée.
  • Si la question commence par “Quand” ou “Où” (Quand faire ceci ? Où choisir cela ? etc.), le plan à adopter sera probablement une réponse précise avec date(s) ou localisation(s) explicite(s).
  • Si la question commence par “Pourquoi” (Pourquoi faire ceci ? Pourquoi choisir cela ? etc.), le plan à adopter sera probablement un plan argumenté avec preuves à l’appui.

Il existe un outil en ligne conçu pour lister les questions les plus posées par les internautes sur telle ou telle thématique. Testez la version gratuite de l’application 1.fr

Étape 4 – Optimiser la rédaction des titres

Il s’agit maintenant d’optimiser la rédaction des titres pour permettre à vos lecteurs de percevoir d’un seul coup d’œil la logique de votre plan. La seule lecture des titres doit permettre de savoir précisément de quoi vous parlez dans votre article.

Règle incontournable de référencement naturel

L’expression ou mot clé principal de la page doit impérativement être placé dans les premiers mots du titre h1. Les expressions ou mots clés les plus pertinents seront ensuite placés dans les premiers mots des titres h2. Les autres expressions et mots clés seront plus tard répartis dans le texte des paragraphes.

De nombreux conseils sont publiés en ligne au sujet de la rédaction des titres. Je vous recommande la lecture (et la prise en compte…) du contenu des articles suivants :

La loi de proximité

J’attire votre attention sur un principe journalistique incontournable : plus ce que vous dites concerne le lecteur de près, plus celui-ci s’y intéressera.

Vous pouvez tenir compte de ce principe dans la rédaction des titres de votre article. Pensez-y également quand vous rédigerez l’introduction et les paragraphes de vos différentes parties.

Consultez le glossaire d’infowebmaster.fr pour en savoir plus sur la loi de proximité. Une recherche sur le Web à ce sujet (loi de proximité et rédaction) vous conduira vers de nombreux articles traitant de la rédaction Web en général.

Étape 5 – Tester la cohérence de la structure

Avec StackEdit, nous pouvons à ce stade de notre travail exporter notre plan en HTML, en choisissant l’option “Stylised HTML with TOC”. Je vous rappelle que TOC est l’acronyme de l’expression anglaise Table Of Content (… autrement dit sommaire ou table des matières).

Une fois l’exportation du plan effectuée (en ayant pris soin de nommer convenablement le fichier exporter), vous devriez pouvoir visualiser le sommaire de votre texte et en apprécier la cohérence.

Ouvrez le fichier exporté avec votre navigateur. Le sommaire est placé en colonne latérale… et les liens vers les ancres fonctionnent ! Si la lecture du sommaire ne vous semble pas offrir une vision claire de votre sujet, reprenez votre travail à l’étape précédente jusqu’à ce que vous soyez satisfaits.

Quand tout est au point, vous avez parcouru la moitié du chemin et vous allez pouvoir attaquer la rédaction proprement dite. Comme pour le plan, il faudra suivre les règles du référencement naturel (SEO).

Vous veillerez à ne pas oublier que vous vous adressez à un public précis, clairement identifié. Vous allez donc choisir un ton particulier, l’angle qui sous paraîtra le mieux convenir pour aborder le sujet et vous opterez pour un vocabulaire adapté à votre lectorat.

Étape 6 – Rédiger l’introduction

L’introduction, nommée aussi chapeau ou chapô, annonce clairement la couleur. Il s’agit de présenter clairement tout ce que vous allez développer dans la suite du texte.

Soyons clairs, la règle est incontournable : l’expression ou mot clé placé en tête du titre h1 doit être placée au tout début de l’introduction.

Ce n’est pas une option, c’est une obligation. Nous pourrons nuancer cette règle en utilisant des synonymes ou des expressions très voisines mais pour le moment, appliquons-la à la lettre.

Dans le même ordre d’idée, inutile de se creuser la cervelle pour savoir ce que vous allez mettre dans l’introduction. Vous allez rédiger des phrases courtes qui reprennent tous les mots clés placés dans les sous-titres. Plus tard, nous verrons comment nuancer cela mais, pour l’instant, suivez mes directives et vous y verrez tout de suite plus clair !

Inutile de créer un nouveau fichier, complétez le plan rédigé avec StackEdit.

Pour approfondir le sujet, je vous invite à lire l’article de Sophie Leclerc intitulé Rédiger un chapeau pour ses articles web : la méthode

Baliser ou ne pas baliser l’introduction-chapeau en h2

Quelques auteurs proposent de baliser l’introduction en h2 (https://www.g1site.com/rediger_chapeau_article/). Vous trouverez cette recommandation dans plusieurs articles en ligne. Ne suivez pas ce conseil. La balise h2 est une balise de titrage, c’est donc un moyen de structuration. Utilisé pour l’introduction la balise h2 contraint l’utilisation de balises h3 pour les sous-titres suivants ou l’utilisation d’une première balise h2 sans paragraphe.

L’introduction est le premier paragraphe de votre article, en tant que tel il focalise déjà l’attention des robots. Balisez plutôt le paragraphe d’introduction entre <strong> et </strong>. Si vous souhaitez donner à l’introduction une taille proche des titres h2, identifiez l’introduction (via un id ou une class) et stylisez-la de la manière voulue vis une instruction CSS.

Étape 7 – Rédiger les paragraphes

Rédiger les paragraphes de votre texte suit les mêmes règles de référencement que celles concernant la rédaction de l’introduction.

Pensez SEO

Il convient de placer en tête du premier paragraphe le mot clé du sous-titre qui précède (ou une expression équivalente, un synonyme, une expression connexe…).

Utiliser un synonyme ou une expression connexe évite les lourdeurs. Placez des expressions longue traîne au début des seconds ou troisièmes paragraphes puis au début des intertitres h3 et suivants (https://editoile.fr/optimiser-le-placement-des-mots-cles-dans-une-page-web/).

Soyez concis et précis

Ce conseil est à prendre en compte autant que possible : traitez une seule idée par paragraphe. Dans un paragraphe vous affirmez votre idée en la contextualisant puis vous prouvez votre affirmation. Vous développez ensuite l’idée, en articulant votre propos avec le paragraphe suivant.

Vous rédigerez vos paragraphe en veillant à la concision de vos phrases. Vous rédigerez des phases courtes (15 mots environ) et vous couperez systématiquement toute phrase de plus de 24 mots. Vous gagnerez ainsi en clarté et faciliterez la lecture de votre texte.

Restez simples, utilisez des mots concrets adaptés à votre lectorat et au média Web. Gardez vos envolées lyriques pour les médias imprimés, pour vos podcasts ou vos émissions radios. Quand vous avez terminé de rédiger vos paragraphes, il est nécessaire d’en tester la qualité.

Étape 8 – Tester la syntaxe avec un robot lecteur

Il existe un moyen simple et efficace pour évaluer la qualité de la rédaction d’un texte. Faites-le lire par un robot lecteur !

Vous trouverez sur MindMeister une liste de sites proposant des services de synthèse vocale. Il est parfois nécessaire de scinder le texte à faire lire pour pouvoir bénéficier du service offert.

Sur MacOs, un service intégré de lecture du texte est à la disposition des utilisateurs. Allez dans le menu Modifier > Voix > Commencer à parler. Ce service est notamment utilisable directement dans WordPress, depuis le navigateur.

Cette technique permet de repérer à l’oreille les phrases trop longues. Vous saurez également si la ponctuation de votre texte est à améliorer. Les étourderie de saisie et les répétitions gênantes seront vite repérées.

Faites également relire votre texte par de véritables lecteurs humains, ayant si possible une bonne orthographe.

Étape 9 – Exporter en HTML la version finalisée

Dans StackEdit, une fois effectuées les corrections à apporter au texte, exportez-le au format HTML. Choisissez l’option “Styled HTML” pour faciliter le travail qui va suivre.

Vous obtiendrez une simple page Web, stylisée avec clarté par la feuille de style mise au point pour StackEdit. Son code source est propre. Seules 2 classes identifient le <body> et la <div> servant de conteneur principal.

La seconde classe peut s’avérer utile pour utiliser des feuilles de style utilisant les identifiants “wrapper” ou “content”. Il faudra alors en modifier l’identification (voir plus bas).

Étape 10 – Personnaliser la présentation de la page

Utilisez des feuilles de style simples pour tester différentes présentations, selon la technique vue en début de formation.

Vous trouverez plusieurs feuilles de style à personnaliser à cette adresse : graphizm.fr/rwrn/css-simples.zip

Vous pouvez les tester en l’état en utilisant le code HTML suivant, à insérer dans le <head> à la place du lien existant puis à personnaliser…

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/nomdelafeuilledestyle.css">

➜ Remplacez nomdelafeuilledestyle.css par l’un des noms suivants :

  • abricotine-serif.css
  • ash.css
  • awsm.css
  • brackets.css
  • cursus.css
  • dark-three.css
  • dyslex.css
  • light-one.css
  • pyxill.css
  • simple.css
  • solarized-dark.css
  • solarized-light.css
  • swiss-fw.css
  • typeanything-lato.css

Annexe

On trouve souvent sur le Web des feuilles de style utilisant systématiquement une division identifiée avec id="wrapper". Ce nom signifie “enveloppe” et il identifie la plupart du temps une division englobant tous les éléments contenus dans le body.

Si vous avez à styliser rapidement une page HTML ainsi structurée, voici 2 feuilles de styles qui vous permettront de le faire. Dans ces feuilles de style, tous les sélecteurs sont de la forme #wrapper element {propriété: valeur}.

➜ En utilisant les liens ci-dessous, vous pouvez tester 2 feuilles de styles utilisant l’identifiant id=“wrapper” pour sélectionner les élément de la page HTML.

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/css-avec-wrapper/swiss-bt.css">

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/css-avec-wrapper/working.css">

Ces feuilles de style s’appliqueront correctement si et seulement si le contenu à styliser est placé dans une division identifiée avec id="wrapper".

Bonus

➜ Des variantes de la feuille de style awsm.css sont disponibles dans le dossier “awsm-themes” placé dans le dossier “css-simples”.

Voici un lien vers l’une de ces variantes :

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/awsm-themes/awsm_theme_black.css">

https://www.youtube.com/watch?v=OWhDTiXcWvU

Vous en découvrirez encore davantage en vous rendant sur le site du développeur d’awsm.

Approfondir le sujet

Le cours intitulé Le parapente de la rédaction Web vous apportera des informations complémentaires sur le référencement naturel d’une page Web. Plusieurs liens ont été insérés dans le cours, pour vous permettre d’aller encore plus loin. Ce cours concerne davantage les apprenants se préparant à valider le Titre Professionnel Designer Web.

Catégories
Index

Formation CC

Communication Créative

CC – 1 (cours)

Ressources pour la comvi

Les fondamentaux de la communication

L’orientation des objectifs de communication

Les écritures latines

Les contrastes typographiques

Typographie et lisibilité

Utiliser les couleurs en design graphique

La théorie des couleurs

La symbolique des couleurs

La construction de nuanciers fonctionnels

Structuration, stylisation et composition (présentation générale)

Composition, structuration, stylisation (approfondissement)

Les fondamentaux de la communication visuelle (synthèse)

CC-1 (exercices et activités)

Créer une collection de livrets de 8 pages (pour repérer les principales étapes d’un projet d’impression simple… et beaucoup d’autres choses !)

Créer un gabarit de livret dans Canva (pour utiliser ce gabarit et composer des livrets personnalisés avec Canva)

Composer un flyer avec Canva (pour s’entrainer à utiliser dans Canva les images de fond, les formes structurantes et les blocs de textes)

Collecter des blocs-dates (pour repérer les différentes manières de composer un bloc-date)

Caractériser une police de caractères (pour identifier les polices de caractères fondamentales utilisées en communication visuelle)

Créer une police de caractères (cursive italique géométrique… pour tester le potentiel créatif de consignes contraignantes)

Réaliser une affiche inspirée du style international (pour appliquer le cours sur la création de nuanciers fonctionnels)

CC-2 (cours)

Designer un logo, de la préparation à la finalisation

Le design de logo : idéation, création, réalisation

Présenter ses propositions graphiques

Récapitulatif avec Balo

CC-2 (exercices et activités)

Quatre cahiers des charges (pour mettre en pratique la méthode proposée dans le cours)

CC-3 (cours)

L’illustration modulaire

CC-3 (exercices et activités)

Créer des personnages typographiques

Illustrer un kit de communication

Créer une mascotte

Animer une mascotte

Catégories
CC1-exos Com-Créa

Caractériser une police de caractères

Au cours de cet exercice, vous allez utiliser une grille d’identification en 8 points. Cette grille vous permettra de collecter les caractéristiques d’une police ce caractères. Vous pourrez ainsi identifier plus facilement les polices de caractères fondamentales utilisées en communication visuelle.

Construire une matrice d’identification

Pour commencer l’exercice à la main, je vous propose de plier une feuille A4 en 9 cases égales. Pour cela il faut plier la feuille en 3, en hauteur et en largeur.

Appréciez l’égalité des 2 moitiés à l’œil, sans prendre de mesures !
Voilà ce que vous obtenez après avoir déplié votre feuille…

Dans les 9 cases obtenues, inscrivez les caractéristiques suivantes, dans l’ordre indiqué sur le schéma ci-dessous.

Désormais, vous pouvez utiliser cette matrice d’identification pour étudier de manière plus précise une police de caractères. Je vous propose un exemple complet avec la police de caractères GOTHAM, de Tobias Frere-Jones.

Collecter des informations sur plusieurs polices de caractères

Dans un premier temps, je vous invite à effectuer des recherches sur une sélection de polices de caractères que je qualifie de fondamentales. Voici une liste d’une vingtaine de typographies fondamentales :

  • Clarendon
  • Normande
  • Franklin Gothic
  • Cooper Black
  • Futura
  • Gill Sans
  • Times
  • Rockwell
  • Mistral
  • Antique Olive Nord
  • Helvetica
  • Univers
  • Optima
  • Eurostile
  • Avant Garde
  • Frutiger
  • Arial
  • Avenir
  • Interstate
  • Gotham

Commencez par étudier 4 d’entre elles en les choisissant selon vos affinités du moment. Vous en étudierez 4 autres ultérieurement et ainsi de suite. Vous élargirez progressivement votre culture typographique et vous utiliserez à bon escient les trésors typographiques à votre disposition.

Vous trouverez les renseignements demandés sur le Web et sur les documents indiqués en cours par votre formateur. En explorant le compte du Dendrographe sur Biggerplate, vous allez trouver des mines d’or sur le sujet !

Visionnez les vidéos de la série Sacrés caractères, éditées par France Culture, pour en savoir davantage sur quelques unes des polices de caractères de la liste ci-dessus !

Vous trouverez aussi une grande partie des renseignements demandés dans les ouvrages respectifs de David RAULT et Tony SEDDON : Guide pratique de choix typographique et Typo, l’essentiel – Anatomie, style et classification.

Apprendre à reconnaître des fontes en jouant

Pour apprendre à distinguer l’Helvetica, du Gill Sans, du Futura, du Verdana et de l’Optima puis le Didot du Times, du Baskerville et du Garamond, rendez vous sur le site typeware.com.

Après vous être échauffés en jouant à typewar.com, vous reconnaîtrez sans peine plusieurs polices de caractères utilisées pour ce “memory” typographique.

Un dernier pour la route… Il s’agit là aussi de reconnaître des polices fondamentales (et plusieurs autres, moins courantes). Jouez à The font game !

Il y en a d’autres sur ilovetypography.com…

Catégories
Cours annexes

Utiliser StackEdit

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 :

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).

➜ 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.

➜ 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 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 😉

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 (… inline style, 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 :

Voici maintenant une vidéo en français traitant de StackEdit :