Auteur/autrice : Yves Goguely

Formateur au GRETA Auvergne

Catégories
CC1-cours Com-Créa

Structuration, stylisation et composition

Dans ce cours, vous allez apprendre à identifier les trois opérations fondamentales de la mise en page.

Dans ce cours, les opérations de structuration sont envisagées avant les opérations de stylisation et de composition. Dans la pratique, ces opérations sont souvent menées de manière itérative (en revenant sur l’une ou l’autre au fil de la conception).

Introduction

Les 3 opérations fondamentales (structuration, stylisation et composition) sont encadrées par 2 opérations importantes : la préparation du projet et la réalisation des produits de communication. La phase de préparation commence par la définition des objectifs du projet et la phase de réalisation se termine par la publication des produits mis en page. J’ai schématisé cela dans le dessin ci-dessous.

La cuisine graphique

Pour mieux saisir l’articulation des 3 opérations centrales de la mise en page, nous pouvons comparer la mise en page (ou infographie — au sens de PAO) à la restauration (gastronomie).

schéma sur la publication de contenus
Schéma sur la présentation d'ingrédients

1- La structuration du texte

Dans la première partie de la formation Com-Créa, nous nous intéressons prioritairement au texte. La première chose à faire avant d’effectuer la mise en page d’un texte est, comme nous l’avons vu plus haut, de le structurer.

Cette structuration comprend trois opérations incontounables : le découpage en blocs d’information, la hiérarchisation des informations et leur ordonnancement selon l’ordre de présentation souhaité.

Le découpage du texte

Le découpage du texte s’effectue en deux temps, celui du découpage fonctionnel et celui du découpage visuel.

Le découpage fonctionnel

Le découpage fonctionnel permet d’identifier les blocs d’information ayant une fonction spécifique dans le texte à mettre en page (bloc-accroche, bloc-titre, bloc-date, bloc-lieu, bloc d’informations utiles, etc.).

Le découpage visuel

Le découpage visuel permet ensuite de déterminer à quels endroits les textes (titres, accroches) ou les lignes vont être coupés lors de la mise en page.

Mis en œuvre par des designers aguerris, ce découpage visuel peut enfreindre les règles habituelles de la typographie et produire un effet visuel original.

L’affiche ci-dessus montre comment le mot PHOTOGRAPHIE
est présenté en étant découpé en 3 parties, les tirets de césure
étant placés (hors règle orthotypographique…) en début de ligne.
Le but de cette disposition est de présenter le titre de l’affiche
sur une grille de 5 x 7 modules.

La hiérarchisation des informations

La hiérarchisation des informations consiste à attribuer à chaque partie du texte un niveau d’importance — numéroté de 1 à n… (n variant selon les types de texte).

Les niveaux hiérarchiques seront clairement perçus après la stylisation et la composition. Cependant, ils sont à définir assez tôt dans le processus de mise en page.

Le modèle de cette affiche, disponible sur Canva, est moins nettement hiérarchisé…

Saisissez “Brocante” dans le champ de recherche des modèles d’affiches, sur la plateforme Canva. Vous trouverez le modèle de l’affiche présentée ci-dessus.

Vous constaterez que la hiérarchisation des informations placée sur le modèle a été améliorée.

À gauche : modèle Canva – À droite : version améliorée

L’ordonnancement du texte découpé et hiérarchisé

Découpé et hiérarchisé, le texte à mis en page se présente souvent dans un ordre différent de l’ordre hiérarchique défini plus tôt.

➜ Dans l’exemple de l’affiche sur la brocante, le texte de la version améliorée est constitué de 4 niveaux hiérarchiques présentés dans l’ordre 2-1-3-4.

L’ordre dans lequel ce texte a été rédigé ou celui dans lequel il a été communiqué au designer graphique n’est pas nécessairement l’ordre de répartition du texte dans la page.

2 – La stylisation des contenus

La stylisation des contenus et du texte en particulier consiste à déterminer quelles sont les polices de caractères (fontes) à utiliser et la manière dont celles-ci doivent être utilisées. La stylisation détermine aussi quelles sont les couleurs à utiliser et la manière dont celles-ci doivent être étagées et réparties. Elle détermine aussi quelles sera la morphologie dominante des formes structurantes, des figures, motifs et textures éventuellement utilisées.

La combinaison typographique

La stylisation typographique détermine quelle est la famille de caractères envisagée pour les titres et quelle est la famille typographique est envisagée pour les paragraphes. Une troisième famille de caractères peut être envisagée pour les accroches ou slogans.

Cette étape de la stylisation est nommée en anglais font pairing. De très nombreuses ressources sont disponibles en ligne à ce sujet.

Source : designmantic.com

Vous trouverez des informations à ce sujet sur netboard.me, sur le site de ressources intitulé Fondamentaux du lettrage et de la typographie – Combiner des caractères.

L’étagement des valeurs des couleurs

L’étagement des valeurs des couleurs consiste à ménager un contraste de luminosité suffisant et si possible constant entre toutes les couleurs du nuancier envisagé.

➜ Le but de cette règle est de favoriser la création des variantes et des déclinaisons d’un produit de communication. En effet, les couleurs aux valeurs étagées sont permutables sans perte de qualité de contraste. Le confort de lecture est préservé, quelque soient les combinaisons de couleurs utilisées.

Permutations de 4 couleurs aux valeurs étagées sur une même composition

Dans l’exemple des permutations ci-dessus, les valeurs des couleurs ne sont pas étagées régulièrement. On se rend compte sans peine que le vert clair sur le blanc se lit moins bien que le rouge sur le blanc. Il en est de même du jaune sur le blanc en comparaison du rouge sur le blanc (cela se verrait encore plus si le texte le plus petit avait été stylisé en jaune).

La sélection des formes structurantes

La sélection des formes structurantes repose sur la cohérence entre le sujet traité et la symbolique ou la connotation culturelle (ou entreprenariale) des formes envisagées.

Cette sélection répond cependant le plus souvent à des impératifs de structuration visuelle, les formes structurantes permettant notamment d’isoler les textes des images en leur offrant un fond uni ou faiblement contrasté pour en faciliter la lecture. Ces formes peuvent servir de cadre ou d’enveloppe à certaines informations.

Ce visuel est un modèle de mise en page provenant du site Pix Teller

Le choix des figures et motifs utilisables

Le choix des figures et des motifs utilisables s’ajoute à la sélection des formes structurantes. Photographies et illustrations, icônes et pictogrammes sont choisis en cohérence avec la thématique abordé et les objectifs de communication fixés. Il en est de même pour les motifs et les textures devant figurer dans la composition.

La réalisation d’une planche de style

La stylisation se traduit par la réalisation d’une synthèse visuelle des choix effectués sous forme de planche de style (nommée aussi guide de style — style guide).

La réalisation d’une planche de style à partir d’une planche de tendances sera vue lors du niveau 2 de la formation Com-Créa. par ailleurs, dans la suite du niveau 1, la question de l’étagement des couleurs sera abordée de façon détaillée.

3 – La composition des éléments graphiques

Aligner, espacer, contraster

La composition consiste à organiser dans la page les contenus structurés en respectant les choix de stylisation effectués en amont.

Plusieurs opérations de composition sont généralement mis en œuvre à cette étape de la mise en page mais nous en retiendrons 3 dans un premier temps : l’alignement des contenus sur des axes directeurs, l’espacement des contenus et des blocs informatifs (voir plus bas) pour les différencier clairement et la mise en œuvre de plusieurs contrastes pour mettre en valeur les niveaux hiérarchiques.

Aligner pour guider le regard du lecteur

L’alignement des contenus permet au lecteur de repérer la structure visuelle sur laquelle est construit le document.

➜ L’alignement des contenus sur des lignes allant de point remarquable en point remarquable (début ou fin de ligne, angle de forme, etc.) crée des axes directeurs (ou lignes directrices) qui structurent visuellement la mise en page.

Il est opportun d’associer structure visuelle et structure rédactionnelle.

Espacer pour relier ou séparer des informations

L’espacement joue un rôle clé dans la mise en page. Il intervient dans la différenciation ou l’association des lettres, des mots, des lignes, des paragraphes, des colonnes et des sections de page.

Souvent utilisé de manière instinctive, il peut être mis en œuvre de façon consciente et créative, autant pour rapprocher que pour éloigner.

Divers espaces utilisés dans une composition

Prendre appui sur une grille

La troisième opération de composition consiste à prendre appui sur une grille pour positionner les différents éléments graphiques dans l’espace du cadre.

Plusieurs type de grilles sont utilisables, les plus simples sont des division du cadre de composition en surfaces égales proportionnelles.

Ces grilles sont obtenues en divisant la largeur et la hauteur du cadre en 2, en 3, ou en 4. D’autres divisions sont envisageables, à commencer par celles qui sont le double des deux dernières (6 et 8). Il n’est pas rare d’être amené à diviser des quarts en tiers et inversement (voir ci-dessous).

Division d’une page en tiers et quarts avec utilisation des diagonales

Opération annexe : contraster

D’autres opérations s’effectuent parallèlement lors d’une mise en page. L’une d’entre elles consiste à mettre en évidence les informations clés en jouant sur plusieurs contrastes. Il s’agit d’une opération touchant à la fois la stylisation et la composition.

Contraster pour différencier les niveaux hiérarchiques

Pour différencier les niveaux hiérarchiques au sein d’un bloc informatif ou de la page dans son ensemble, le graphiste peut mettre en œuvre plusieurs contrastes :

  • le contraste de taille
  • le contraste de graisse
  • le contraste de gris
  • le contraste de couleur
  • la mise en valeur par encadrement, surlignage, soulignage, ornementation, etc.
Cet exemple de mise en page a été réalisé sur la plateforme Pablo

Il est possible de combiner plusieurs contrastes mais n’oubliez le principe de design suivant : entre deux solutions choisir toujours la plus simple.

Catégories
FCS1-exos

Activités sur la structure HTML d’une page Web

Vous trouverez ci-dessous plusieurs activités vous permettant de consolider vos connaissances sur la structure élémentaire d’une page Web.

1 – Collecter des images sur la structure HTML élémentaire

Avant de lancer un éditeur de code et de modifier le code source d’une page HTML, je vous propose d’aller faire un tour sur le Web et de collecter des images qui mettent en évidence la structure élémentaire dont il a été question jusqu’ici.

Allez dans Google Images et saisissez “html structure” ou “structure html” (non, vous n’obtiendrez pas les mêmes résultats…). Vous allez très vite constater que les structures présentées sont loin d’être élémentaires et qu’elles concernent souvent la structure des contenus placés dans le corps de la page (et non la structure élémentaire proprement dite).

Collectez seulement les images qui se rapportent à la structure élémentaire. Laissez les autres images de côté pour le moment (celles montrant des structures avec « header », « main », « section », « aside », et d’autres encore…).

Voici une des images que vous pouvez collecter :

Placez les images collectées dans un dossier nommé « images » ou « img », en ayant soin de renommer correctement chaque image (sans majuscule ni lettres accentuées ni espace). Les 3 formats d’images acceptés sont .jpg (ou .jpeg), .png et .gif.

Ce dossier pourra vous servir ultérieurement si vous envisagez d’intégrer les images collectées dans une page Web réalisée par vos soins (activité facultative).

Vous placerez alors, dans un dossier nommé “structure-html”, le dossier “images” ou “img” contenant les images collectées. Ensuite, au même niveau que le dossier contenant les images, vous placerez le fichier “index.html” dans lequel seront intégrées les images et les textes d’accompagnement.

2 – Recherche de vidéos sur la structureHTML élémentaire

Rien de tel que de savoir se documenter soi-même en sélectionnant de bon documents. Je vous invite à faire une recherche sur les vidéos traitant de la structure élémentaire d’une page HTML. Je vous mets sur la piste, un peu plus haut dans ce cours. 😉 Vous réviserez les bases de la structuration d’une page Web pendant que vous tenterez d’évaluer la pertinence et le niveau de difficulté du contenu de la vidéo. Priorité aux approches simples, claires, et non soporifiques !

Proposition : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées. Utilisez par exemple StackEdit pour structurer en Markdown le contenu de la page. Exportez ensuite votre contenu, stylisé, avec ou sans TOC.

3 – Compléter les dialogues d’un diaporama pédagogique

Si vous avez déjà eu l’occasion d’utiliser un éditeur de code comme Brackets/Phoenix, pour remplacer des textes aux endroits indiqués, vous êtes capables de réaliser cet exercice.

Pour remplacer ou compléter des textes (affichés en noir dans Brackets/Phoenix), il faut d’abord les repérer. Ils sont placés dans le <body> entre les balises <p> et </p> (balises de paragraphe). La balise <br> (autofermante), souvent utilisée, force le retour à la ligne (br = abréviation de « break »).

Il s’agit de finaliser le dialogue imaginaire entre le code source d’une page HTML, d’une part, et un navigateur (auquel le code source s’adresse), d’autre part.

Tout est prêt côté codage… vous pouvez télécharger le dossier du diaporama à cette adresse : http://graphizm.fr/fcil/dixit-code.zip/.

Pensez bien à décompresser le fichier .zip avant d’ouvrir le dossier « dixit-code » avec Brackets.

Je vous montre ci-dessous le diaporama intégrant quelques diapos complètes et les diapositives à compléter par vos soins. La modification des dialogues déjà en place est facultative.

Je vous donne le ton du dialogue et des expressions utilisables pour effectuer votre travail. Si ce ton ne vous convient pas vous pouvez modifier les textes que j’ai saisi à titre de démonstration dans les premières diapositives.

 Attention : veillez à faire en sorte que ce soit bien le code source qui s’adresse au navigateur. Il s’agit de se mettre « dans la peau » du code source ! Quand le navigateur prend connaissance des instructions que lui transmet le code source, les instructions sont déjà rédigées (codées). En vérité, le navigateur n’a pas d’autre choix que de prendre en compte les instructions que le code lui transmet !

Catégories
Index

Formation FCS

Fondamentaux de la Création de Site

FCS – 1 (cours)

Expliquer comment fonctionne le Web

Identifier le contenu d’un dossier de page Web

Utiliser StackEdit (éditeur Markdown) pour structurer un texte destiné à la publication en ligne

Identifier la structure HTML d’une page Web

Manipuler le code source avec un éditeur de texte/code

Utiliser différents modes de publication en ligne pour partager des texte avec le reste du monde.

Personnaliser un gabarit de site HTML-CSS

FCS-1 (exercices et activités)

Memory sur les fondamentaux du Web pour exercer sa mémoire sur les concepts clés du fonctionnement du Web (ce n’est pas facile !)

Questionnaires FCS niveau 1a pour consolider les acquis de la première partie du cours (fonctionnement du Web et un peu plus…)

Coder sans coder pour manipuler des balises HTML virtuelles

Identifier les éléments de la structure HTML pour vérifier ses connaissances sur le rôle de quelques balises essentielles

Ma couleur préférée pour manipuler le code source et observer le contenu d’un dossier de site simple

Activités sur la structure HTML d’une page Web pour consolider ses acquis sur la structure HTML élémentaire d’une page Web

FCS 2 (cours)

Oh my code pour consolider paisiblement ses acquis

Utiliser les services gratuits d’Alwaysdata pour publier en ligne une page Web

Utiliser Filezilla pour transférer un site Web sur un serveur

Se familiariser avec le framework w3.css pour personnaliser des gabarits de sites web réactifs (responsives)

Créer son porfolio avec w3.css pour personnaliser des gabarits de portfolios réactifs (responsives)

FCS 2 (exos)

Tests de mise en page avec w3.css

Personnaliser le gabarit Starter

La toolbox du niveau 2

FCS 3 (cours)

Utiliser le CMS Bludit pour créer un site pratiquement sans coder

FCS 3 (exo)

Personnaliser le thème Massively pour créer un site vitrine ou un portfolio

Catégories
CC1-cours Com-Créa

Les écritures latines

Dans ce cours, vous allez apprendre à reconnaître une douzaine d’écritures latines. Certaines d’entre elles jouent un rôle important dans de design typographique des polices de caractères que vous utiliserez dans votre pratique professionnelle.

Histoire de l’alphabet

Toutes les écritures latines s’enracinent dans la graphie de l’alphabet latin dont la forme de référence, pour les lettres capitales ou majuscules, demeure l’alphabet monumental romain. Les lettres minuscules dérivent toutes de l’écriture caroline, imposée par Charlemagne dans tout son empire.

L’alphabet latin a été transmis au romains de l’antiquité par les étrusques qui l’avaient emprunté aux grecs. Ceux-ci le tenait des phéniciens qui le partageait avec plusieurs peuples de l’ancienne Palestine. Ceux-ci l’on développé en mixant langue sémitique et écriture hiératique égyptienne.

Vous trouverez des précisions à ce sujet sur les documents et les sites rassemblés sur netboard.me dans une page intitulée Les fondamentaux du lettrage et de la typographie .

Prenez le temps de vous documenter sur le sujet et faites une synthèse de l’itinéraire suivi par l’alphabet, de l’Égypte des pharaons à la Rome antique. Réalisez ce travail sous forme de sketchnote, en associant textes manuscrits et dessin, le long d’un itinéraire graphique que vous traduirez comme vous l’entendez.

Vous trouverez dans les albums Flickr d’Eva-Lotta Lamm des exemples de sketchnotes : https://www.flickr.com/photos/evalottchen/albums

Écritures latines fondamentales

Quand vous avez réalisé votre sketchnote sur l’itinéraire de l’alphabet, cliquez sur l’image ci-dessous, vous accèderez à un document pdf proposant le mot “graphisme”, écrit dans plusieurs écritures latines, de la capitale romaine à l’italique scolaire d’aujourd’hui.

En effet, l’alphabet latin a continué son évolution et les formes des lettres ont évoluées au fil des siècles, donnant naissances à de nombreuses écritures, dont la plupart sont encore utilisées de nos jours. Apprendre à les reconnaître permet d’identifier l’ancrage historique des formes de telle ou telle police de caractères.

En haut à droite de chaque planche, un lien permet d‘accéder au site de téléchargement de la police de caractères utilisée pour présenter l’écriture choisie. Des indications vous sont données concernant l’outil utilisé pour tracer les lettres et la période historique de conception de l’écriture mentionnée.

Imprimez chez vous les planches du document pdf ci-dessus. Découpez chaque planche de telle sorte que soit séparées l’illustration et la légende. Entraînez-vous à reconstituer les planches après avoir mélangé respectivement les légendes et les illustrations.

L’outil détermine la forme du trait

Vous avez certainement remarqué que pendant longtemps, les copistes et les calligraphes ont utilisé des outils dont l’extrémité formait un trait large (brosse ou pinceau plate, calame, plume d’oie taillée en biseau). Cette pratique se perpétue aujourd’hui.

Les pleins et les déliés de nombreuses polices de caractères utilisées sur nos ordinateurs ont leur origine dans l’angle de la plume large, maintenu lors du tracé de la lettre.

Il est possible d’obtenir un résultat similaire sans disposer d’un matériel spécialisé. Deux crayons ou stylos à bille suffisent.

Faites des essais sur une feuille de papier, en vous inspirant des modèles sur le document pdf mis à votre disposition/

Vous pouvez utiliser l’application en ligne sketchpad.io pour tracer vos premières lettres calligraphiques à la plume biseautée numérique. Sélectionnez l’outil “Calligraphy” et réglez la largeur (Size) de la plume à 30px. Réglez l’angle de la plume (Tip angle) à 140°.

Premiers tracés calligraphiques

Une tablette graphique et son stylet facilitent la pratique de la calligraphie et du lettrage numérique. Le top est l’utilisation d’un iPad compatible avec le stylet Apple… et le budget qui va avec !

Distinguer les formes romaines et italiques, scriptes et cursives.

Les formes romaines et italiques identifiables dans les textes imprimés aujourd’hui ont pour origines des écritures différentes. Cliquez sur l’image ci-dessous pour lire le document complet sur le sujet.

Les écritures dans l’histoire

Les écritures ont évolué au fil de l’histoire, la typographie aussi. Cependant, le développement de la typographie mécanique, électronique et numérique n’a pas empêché le développement des écritures calligraphiques.

Pour vous permettre de visualiser les évolutions ayant eu lieu depuis le bas Moyen-Âge, je vous propose une vision de l’histoire récente par sauts de 3 générations en 3 générations (75 ans).

Les lettres associées aux personnages figurés sur les schémas sont les initiales de leur prénom. Téléchargez le pdf complet (bouton plus bas) pour en savoir davantage. Ce pdf a été actualisé et le prénom de celui qui est né en 2020 est Léo (le prénom le plus attribué cette année là).

Les écritures calligraphiques

D’autres écritures sont nées avant les écritures mentionnées ci-dessus. Certaines d’entres elles sont toujours en usage aujourd’hui (capitales romaines et onciales celtiques, notamment).

Les écritures typographiques

Il existe de très nombreuses classifications des écritures typographiques. Les écritures mentionnées ci-dessus coïncident en partie avec la classification Vox-ATYPI.

Télécharger le PDF complet

Catégories
Index

Formation RWRN

Rédaction Web et Référencement naturel

RWRN (cours)

Identifier la structure HTML d’une page Web (prérequis)

Utiliser StackEdit (éditeur Mardown en ligne)

Bases de la rédaction Web

Le parapente de la rédaction Web (cours avancé)

RWRN (activités et exercices)

Identifier les éléments d’une structure HTML

Nuancer la triplette du bourrin

Rédiger une page Web en 10 étapes (TD)

Catégories
Cours annexes

Construire et commenter un diaporama

Dans ce cours, nous allons voir comment concevoir le diaporama sur lequel vous allez vous appuyer pour défendre un projet professionnel devant un jury, lors du passage d’un titre professionnel.

Nous allons également nous intéresser à la manière de préparer et de dérouler les commentaires qui accompagnent nécessairement ce diaporama (exposé oral).

Des ressources supplémentaires sont mises à votre disposition sur y-goguely.netboard.me/

Structurer la présentation visuelle et orale

Une présentation visuelle se conçoit et se finalise comme tout produit de communication. Une phase de documentation précède la phase de conception et de tests. Une finalisation précède la phase de publication, elle-même suivie par d’éventuelles mise à jour et un nécessaire archivage.

Utiliser un plan type

Quand on prend connaissance des modalités d’évaluation du titre concerné, un plan se dégage en fonction des contenus à présenter. Prenez connaissance du référentiel d’évaluation CDUI (document PDF) pour connaître les modalités de déroulement de la validation du titre.

Dans les titres validés par l’élaboration d’un projet (Graphiste ou Concepteur Designer UI), la structure du diaporama reprend en partie le plan du dossier de projet (dossier imprimé remis au jury).

Le diaporama, fil rouge de la présentation des données au jury, est introduit par une présentation contextualisée du candidat et de sa démarche de formation. Il est suivi par une mise en perspective professionnelle des acquis de la formation.

Optimiser le temps imparti

Le temps imparti (50 minutes de présentation et 20 minutes de débat avec le jury, pour le titre CDUI) détermine en théorie le nombre de diapositive

Il est habituel de prévoir 1 minute de commentaires par diapositive. Cependant de nombreux paramètres interviennent.

  • Toutes les diapositives ne sont pas commentées de la même manière (une diapositive de titre est affichée moins longtemps qu’une diapositive présentant un processus complexe, par exemple).
  • Une diapositive est parfois présentée en plusieurs fois (pour afficher de manière séquencée l’ensemble de ses contenus).

Seule la répétition chronométrée de la prestation peut donner une idée juste du temps nécessaire pour exposer images et commentaires.

Prendre en compte les spécificités des contenus présentés

La présentation d’un site Web ou d’un document accessible en ligne passe nécessairement par la consultation du site pendant la présentation. Il en est de même si il est fait référence à un travail de prototypage disponible en ligne, à votre portfolio, à un site réalisé en entreprise, etc.

Il est inutile de prévoir des diapositives montrant des captures d’écran d’un site auquel vous pouvez avoir accès depuis le poste utilisé.

Des liens, intégrés dans les diapositives, doivent permettre à l’orateur d’accéder rapidement aux sites à montrer pendant son exposé. Les captures d’écrans sont réservés à l’intégration dans les documents imprimés.

Présenter des planches imprimées

Imprimer en reprographie quelques unes des planches clés du dossier est vivement conseillé (planche de tendances — moodboard — ou planche de style — style tile, etc.).

Ces documents imprimés sont à remettre au jury en cours de présentation, au moment opportun.

Présenter des objets

Vous pouvez faire fabriquer des prototypes d’objets de communication tels que totbags ou mugs (goodies) et de présenter ces objets au jury pendant votre présentation. Des kakemonos, flags ou autres supports de communication peuvent être déployés dans la salle de présentation.

Nous verrons dans la suite du cours comment articuler paroles et diapositives. Auparavant, nous allons revenir sur la démarche de design graphique que nous avons suivie lors de nos productions en formation Com-Créa.

Utiliser les outils et plateformes d’édition appropriés

Il existe plusieurs outils permettant de réaliser des diaporamas. Ils se répartissent en différentes catégories :

  • les logiciels spécialisés hors ligne (sur poste)
  • les plateformes d’édition en ligne (sur le Web)
  • les suites logicielles d’édition polyvalente
  • les frameworks CSS dédiés à la présentation visuelle

Dans la première catégorie se trouvent l’incontournable Powerpoint et son alter ego Keynote mais aussi Impress, lié à la suite Open Office.

Dans la seconde catégorie se trouvent notamment Google Slides, Crello, Canva, Beautiful.ai et aussi Prezi ou Focusky (dans un genre différent). Il en existe de nombreux autres, gratuits ou payants.

Pour la validation du titre pro CDUI, l’outil Figma Slides est particulièrement adapté au type de contenus présentés.

Dans la troisième catégorie se trouvent les outils d’édition professionnels comme la suite Adobe ou la suite Infinity.

Dans la quatrième catégorie se trouve l’excellent Reveals (et son équivalent en ligne slides.com). Dans cette catégorie, vous disposez également de Big, de Shower, ou encore de Remark (utilisant le langage Markdown mais limité au format 4×3). Les utilisateurs du système MacOs peuvent se tourner vers Deckset (outil exclusif de stylisation de fichiers Markdown pour la projection).

Chacun(e) est libre d’utiliser l’outil qui lui convient le mieux, dans la mesure où il peut justifier que le résultat produit est bien ce qu’il comptait mettre en œuvre.

➜ Aucun défaut de conception ne pourra être mis sur le compte des limites de l’outil choisi.

Différencier slidedoc et diaporama commentée

Les nombreux gabarits de diaporama disponibles en ligne mélangent deux type de présentations visuelles : les diaporamas à lire sans commentaire et les diaporama à commenter devant un public.

Les premiers se nomment slidedocs. Ils sont présentés en détail par Nancy Duarte dans un diaporama disponible sur Slideshare. Ce sont des documents à lire à l’écran. Ils n’ont pas vocation à être projetés. Les diapositives sont chargées. Les texte sont longs. On approche ici du concept de livre électronique (e-book)… surtout quand le document fait plus de 150 pages !

Les seconds types de diaporamas sont des présentations visuelles commentées. Ces diaporamas sont destinés à être projetés et accompagnés d’un exposé oral. Les visionner sans le commentaire du présentateur prive le lecteur d’une grande partie de l’information. Les images sont impactantes, les textes sont brefs… mais il manque vraiment quelque chose !

Il est possible de se tenir à mi-chemin entre les 2 concepts. À condition toutefois de proposer des textes courts présentés de manière aérée.

Designer un diaporama

La conception d’un diaporama numérique suit les mêmes étapes que celle d’un produit imprimé ou hébergé.

  • Décision
  • Brief
  • Documentation
  • Production et structuration des contenus
  • Choix du style graphique
  • Maquettage, tests et affinage
  • Intégration des contenus structurés
  • Publication
  • Mise à jour
  • Archivage et débrief

On peut regrouper ces étapes par trois et ramener la démarche en trois phases : préparation, conception, publication.

La phase de préparation

Cette phase comprend le brief, la documentation et la production des contenus. Voyons ce qu’il en est concernant le diaporama à préparer.

Mener le brief technique

Le mode colorimétrique

Un diaporama projeté s’élabore en RVB. Les dimensions recommandées pour les images sont indiquées ci-dessous (tailles surlignées en gris).

Les dimensions des diapositives

Les diaporamas et documents projetés utilisent 2 ratios standards, le 16/9 et le 4/3. Nettement plus allongé horizontalement, le 16/9 est le plus moderne des deux. Le format 4/3 offre l’avantage de s’insérer dans une page A4 orientation paysage, ce qui en facilite l’édition imprimée en 1 ou 2 diapositive par page.

➜ Les résolutions des images affichées en plein écran au ratio 16/9 sont les suivantes :

  • HD = 1280 x 720
  • FHD = 1920 x 1080 (recommandé)
  • QHD = 2560 x 1440

➜ Les résolutions des images affichées en plein écran au ratio 4/3 sont les suivantes :

  • XGA = 1024 x 768
  • Format non standard = 1080 x 810
  • Format non standard = 1440 x 1080 (recommandé)
  • U-XGA = 1600 x 1200

Les écrans des salles du Pôle Plurimédia, dans lesquelles vous projeterez votre diaporama lors du passage du titre pro, permettent la projection plein écran de diapositives 4/3. Les diaporamas au format 16/9 s’afficheront sur une moindre hauteur.

Les formats numériques de diffusion

Les logiciels d’édition de présentations numériques disposent de formats natifs. Les utilisateurs de la suite Microsoft connaissent par exemple le format PPT, en lien avec le logiciel Powerpoint.

Les plateformes d’édition en ligne proposent généralement l’export des diaporams au format PDF. C’est aussi le format utilisé pour l’exportation de diaporamas réalisés avec Illustrator ou inDesign.

Les diaporamas réalisés avec un framework CSS sont au format HTML et se gèrent comme un site Web statique.

Le format le plus simple à utiliser lors du passage d’un diplôme est le format PDF. L’affichage d’un diaporama PDF, à partir de n’importe quel poste, sera toujours conforme à votre maquette.

Se documenter

Il existe de nombreux gabarits de diaporamas disponibles en ligne, en particuliers pour leur mise en œuvre avec Powerpoint, Keynote ou Google Slides.

Il s’agit de disposer d’une référence en matière de stylisation, pour créer ensuite un diaporama qui présente une unité graphique évidente, d’une diapo à l’autre.

Canva propose aussi des templates intéressants.

➜ Il est souhaitable qu’une unité de style existe entre le diaporama et le press-book, voire entre le diaporama et le portfolio en ligne.

Produire les contenus

Adopter un plan logique

Le plan du diaporama est la structure logique sur laquelle s’appuie votre présentation visuelle et orale. Déterminé en amont de la phase de conception, ce plan sert de cadre à l’ensemble du travail effectué.

Je vous propose ci-dessous le développement d’un plan type que vous êtes libre d’adapter à votre propos.

➜ Compte tenu du temps imparti pour présenter vos diapositives et du volume d’information à transmettre, il est indispensable de se focaliser sur l’essentiel.

Le message à transmettre est le suivant : “Je suis prêt à exercer le métier de [préciser le méteier en fonction du titre visé]. En effet, j’ai acquis en formation et sur le terrain toutes les compétences requises.”

Il s’agit de répertorier les compétences clés à faire valoir pour exercer le métier visé. Ces compétences, clairement définies dans le référentiel du titre, vous permettent d’envisager un plan comportant le nombre de sections correspondantes (une section par compétence).

Une section se présente sous forme d’une suite de diapositives structurée de la manière suivante :

  • Titre de section (1 diapo)
  • Présentation d’une réalisation finie (1 ou 2 diapos)
  • Présentation des étapes et de la méthode de conception (plusieurs diapositives)
  • Présentation de la compétence acquise (1 ou 2 diapos)

Une section comprendra un minimum de trois diapositives.

Ajoutez à votre diaporamas les diapositives de début de diaporama (titre principal, sommaire et/ou intro, présentation personnelle) et les diapositives de fin de diaporama (perspectives d’avenir professionnel, conclusion, signature et/ou remerciements).

Je ne mentionne pas de nombre idéal de diapositives en lien avec la durée de l’exposé. Cela dépend d’un nombre trop élévé de paramètres inhérents à vos choix éditoriaux et d’animation.

Réalisez un plan schématique, sur une feuille de papier ou sur un support numérique. Vous pouvez aussi utiliser des adhésifs repositionnables (réels ou virtuels) pour donner corps à votre plan.

Voici un exemple de découpage réalisé dans Lino puis dans Scrumblr. Le plan est très simplifié, il ne correspond en rien à un plan type idéal !

Plan type mis en place sur linoit.com
Plan type mis en place sur scrumblr.ca

➜  Voici une capture d’écran vous donnant quelques indications pour utiliser Scrumblr…

Collecter ou produire les images

Si vous avez bien préparé vos images pour votre portfolio en ligne, pour votre dossier de projet ou votre dossier professionnel, vous disposez déjà des images susceptibles d’être intégrées dans votre diaporama.

Collecter ou rédiger les textes

Dans une présentation visuelle commentée, l’essentiel du message verbal passe par l’oral. Le texte affiché doit être ramené au minimum et surtout ne pas être redondant avec l’image.

➜ Le texte accompagnant une image doit toujours amener des informations qui ne sont pas déductibles de la lecture de l’image.

La phase de conception

Cette phase comprend le choix du style, le maquettage et l’intégration des contenus structurés. le choix du style consiste à déterminer quelles seront les typos, les couleurs, les formes et les grilles utilisées pour la mise en page. Le maquettage inclue d’éventuelles recherches graphiques manuscrites et l’intégration peut relever du codage avec certains outils.

Choisir des couleurs contrastées

La projection sur écran opaque, en pleine journée, dans une salle dont les volets sont fermés, ne permettra jamais un affichage des couleurs aussi contrasté que sur un écran d’ordinateur.

La mise en œuvre d’un nuancier étagé allant du noir (ou très foncé) au blanc (ou très clair) est vivement recommandée. Pensez bien que le noir, votre couleur la plus foncée, ne sera jamais plus foncée que la couleur de l’écran une fois le projecteur éteint.

➜ Tout objet placé dans une diapositive sur un fond noir se trouve projeté comme flottant sur l’écran, sans que le cadre de la diapositive soit visible. Dans les salles du Pôle Plurimédia, c’est alors le tableau blanc, servant d’écran, qui devient l’espace de présentation. Un tel effet doit être maîtrisé.

Limitez vous autant que possible à 3 ou 4 couleurs (claire, moyenne et foncée ou très claire, claire, foncée et très foncée) avec un contraste de valeur entre 2 couleurs superposée d’au moins 60% pour le texte courant (ratio de contraste de 7 ou norme AAA) .

➜ En présentation visuelle, il est possible de construire des nuanciers en veillant à utiliser une couleur d’accent ou de focus. Cette couleur, généralement saturée (assez vive), est utilisée pour attirer l’attention sur certains mots ou certaines figures. C’est le rôle de la couleur rouge dans le diaporama intitulé “Les règles simples d’harmonie typographique” (voir plus bas).

Choisir une échelle typo adaptée à la lecture de diapositives

La lecture à l’écran nécessite de bien différencier les niveaux hiérarchiques entre les informations affichées.

Le choix d’une échelle typographique basée sur 1,618 (le nombre d’or) ou sur 1,5 est vivement recommandé.

➜ Sachant que la force du corps du texte courant affiché à l’écran doit être proche de 30 pt (ou 40 px), on peut utiliser les suites de Fibonacci ou de Lucas pour déterminer le corps des notes et celui des titres (2 à 3 niveaux successifs au dessus de celui du texte courant).

Sur la diapositive ci-dessus, la suite de Lucas a été utilisée pour différencier les niveaux d’information du titrage. Les valeurs suivantes se succèdent : 76pt, 123pt et 47pt.

D’autres exemples vous sont présentés dans ce document.

➜  Dans le diaporama suivant, les deux premières suites exponentielles (Fibonacci et Fibonacci x 2) sont combinées pour diversifier les niveaux de hiérarchisation.

Choix une grille de construction simple

La grille de construction est directement liée au ratio proportionnel des dimensions de chaque diapositive. La grille la plus simple à mettre en œuvre est par ailleurs une grille de carrés.

➜ Le ratio 4/3 présente naturellement une grille de 4 colonnes de 3 carrés superposés. Le ratio 16/9 présente une grille de 4 colonnes de 2 carrés superposés, à laquelle s’ajoute une rangée de 16 seizièmes de carrés (c’est un ratio de 4 par 2,25).

Télécharger les grilles au format PDF

Une grille de 4×3 est loin d’être limitative en matière de composition. Ses agencements sont plus nombreux qu’on le pense. Une agence de design a inventorié les 892 possibilités de combiner des carrés dans une grille 4×3.

Si vous choisissez de travaillez à partir d’un template mis à votre disposition sur une plateforme en ligne, les différents modèles de diapositives proposés sont déjà construits en appui sur une grille.

➜ Le format 4/3 permet la mise en œuvre d’une grille de 16×16 rectangles aux propriétés intéressantes. Lisez le pdf ci-dessous pour plus de précisions.

Établir un juste rapport Texte/Image/Parole

Ce rapport varie en fonction des diapositives et du type de diaporama. Il est inutile de présenter des images lorsque du texte suffit (et inversement). Il est également inutile de commenter un texte dont le sens est très clair ou une image dont l’interprétation ne présente pas de difficulté.

Le dosage du texte, de l’image et de la parole donne à chaque présentation son caractère. Il n’y a pas de formule parfaite. L’alternance stricte des textes et des images est plus simple à mettre en œuvre. Il est plus facile de caler le commentaire sur les seules images et de simplement faire défiler les textes lus alors par l’auditoire.

La phase de publication

Utiliser le format pdf

Un diaporama au format pdf est facile à transmettre, à dupliquer, à sauvegarder en plusieurs lieux. Même si vous avez prévu de montrer un diaporama réalisé avec Keynote, Powerpoint ou Keynote, exportez une version pdf de votre travail. Vous perdrez vos transitions mais vous assurez vos arrières s’il vous faut déployer un plan B le jour de l’exposé !

Sauvegarder le diaporama en lieu sûr

Enregistré ou exporté au format PDF, le diaporama réalisé doit être confié au GRETA avant le passage du titre. Vous pourrez le modifier ultérieurement mais vous êtes ainsi assurés de pouvoir disposer d’une version à projeter lors de l’entretien avec le jury le jour J.

L’exposé oral

Adopter une posture et une gestuelle adaptées

Je vous invite à visionner cette vidéo pour apprendre comment vous positionner face au jury. La vidéo dure en tout un peu plus d’un quart d’heure mais vous pourrez sauter la dernière partie consacrée à la prise de parole en étant assis. Prévoyez cependant une prise de notes afin de ne rien oublier 😉

Ne jamais lire ce qui est projeté

Il est contreproductif de lire un texte affiché ou de décrire une image projetée sur l’écran. Les membres du jury sont venus avec leur tête, ne l’oubliez pas !

Gardez à l’esprit le fait que les spectateurs lisent ce qui est projeté à l’écran plus vite que vous n’êtes capable de le lire à haute voix. Ils n’ont donc pas besoin que vous leur répétiez ce dont ils viennent de prendre connaissance. La lecture d’un texte affiché est dangereusement soporifique !

S’entraîner en connaissant le plan de l’exposé par cœur

Une présentation orale se prépare comme le jeu d’un acteur-auteur sur une scène de théâtre. Il faut écrire son texte, le connaître par cœur (au moins le plan directeur) et s’entraîner… Cela prend du temps !

Je vous propose de lire les conseils rassemblés sur netboard.me à ce sujet.

Participer à la séance d’exposé blanc

➜ Il vous est proposé, avant le passage du titre, de présenter et de commenter votre diaporama face à un(e) professionnel(le). Il (elle) évaluera la manière dont vous procédez. Vous noterez les conseils qui vous seront donnés et vous effectuerez les éventuelles corrections suggérées.

Catégories
FCS FCS3-cours

Utiliser le CMS Bludit

Cours sur fond noir

Dans ce cours nous allons voir comment utiliser Bludit, un CMS simple et fonctionnel, fonctionnant sans base de données. Ce type de CMS est nommé en anglais “CMS flat file”.

Les prérequis sont les suivants :

  • être capable de créer un compte chez un hébergeur et de récupérer les identifiants de connexion FTP de ce compte ;
  • être capable d’utiliser Filezilla pour transférer sur ce compte les données d’un site ;
  • être capable d’installer une extension du navigateur Chrome (Web Developer) ;
  • être capable de compresser une image pour le Web dans Photoshop ;
  • être capable de modifier du code CSS dans un éditeur de code tel que Bracket pour modifier l’apparence d’une page Web.

Bludit va vous permettre de réaliser rapidement un site de présentation d’une activité professionnelle ou associative. Ce site présentera une série d’articles catégorisés, présentés par ordre de publication antéchronologique (un blog), il disposera également de plusieurs pages au contenu permanent (page de type “À propos” ou page “Contact”, par exemple).

Qu’est-ce qu’un CMS flat file ?

Qu’est-ce qu’un CMS ?

Bludit est un système de gestion de contenu ou CMS (Content management System). Vous avez sans doute déjà entendu le terme, probablement au sujet de WordPress, Joomla, ou Prestashop. Un CMS rend la création d’un site Web plus facile en aidant ceux qui n’ont pas une connaissance approfondie de la programmation Web à réaliser des sites Web de qualité professionnelle. Les CMS disposent généralement pour cela d’un interface d’administration (nommé aussi tableau de bord — dashboard, en anglais). C’est en effet le cas avec Bludit.

Notez qu’un dossier de CMS, téléchargé depuis le site de l’éditeur-développeur, autorise la mise en œuvre d’un seul site. Un CMS n’est pas un programme (logiciel) permettant de créer plusieurs sites une fois le programme lancé.

Qu’est-ce qu’un CMS sans base de données ?

Un CMS sans base de donnée est un système de gestion de contenu stockant les données du site dans des fichiers (placés dans des dossiers, situés eux mêmes dans le dossier du site…). Il s’agit donc d’un gros dossier incluant tous les éléments nécessaires au bon fonctionnement du site et de son tableau de bord de gestion (son interface d’administration).

Ce gros dossier (le dossier du CMS flat file) contient généralement des fichiers PHP dont les contenus sont uniquement interprétables par un serveur. Pour faire fonctionner un CMS, il est donc indispensable de placer le dossier du CMS sur un serveur. Il est inutile de vouloir voir le CMS fonctionner en double cliquant simplement sur un fichier (comme on le fait avec le fichier index.html d’un site statique).

L’absence de base de données simplifie la maintenance, la sauvegarde et la portabilité du site créé avec le CMS.

Nous verrons par exemple que les textes d’un site géré avec Bludit sont stockés dans des fichiers index.txt, dans le dossier nommé bl-content

Comment fonctionne Bludit ?

Dossier du CMS et serveurs

Le diaporama ci-dessous illustre certains aspects techniques du fonctionnement du CMS Bludit une fois placé sur un serveur.

Blogs et sites, articles et pages

Bludit est conçu initialement pour construire des sites articulés autour d’un blog. Notez bien qu’un blog est avant tout un mode de présentation de contenus. Il s’agit d’articles (nommés aussi “posts” ou “billets”) présentés sur une même page, en ordre antéchronologique. L’étymologie du mot blog, contraction du terme anglais Web log, signifie “journal Web” ou ”journal de bord en ligne”.

Les CMS opposent en général les articles aux “pages”. Les pages présentent leurs contenus de manière structurée, unique pour chacune d’elles. Les articles, présentent leurs contenus de la même manière. Cependant, les articles se présentent tous ensemble les uns sous les autres, l’article le plus récent avant les articles les plus anciens. Les “pages”, quant à elles, se présentent indépendamment les unes des autres.

Articles et “pages” sont donc des pages… et Bludit propose par défaut l’édition de pages-articles présentées sous forme de blog (présentées groupées, les unes sous les autres) . Bludit permet toutefois de modifier le type des pages pour en faire ce qu’il appelle des pages statiques (présentées indépendamment les unes des autres).

Pages dynamiques VS pages statiques

Dans Bludit, les “pages” sont donc par défaut des articles, présentés par ordre antéchronologique, les uns sous les autres. La page-article la plus récente est présentée par défaut au dessus des pages-articles les plus anciennes. Elles pourraient être nommées pages dynamiques (comme dans d’autres CMS).

Transformées en pages présentées indépendamment les unes des autres elles deviennent des pages statiques. Ces pages contiennent généralement des contenus plus pérennes (plus durables) que les contenus des pages dynamiques.

Un site comprend le plus souvent les deux types de pages. Les pages statiques les plus courantes sont la page À propos — About — et la page Contact. Les pages dynamiques sont regroupées automatiquement sur une page généralement nommée Actualités — News — ou Blog. Cette page est très souvent la page d’accueil par défaut d’un site construit avec un CMS.

Une démonstration de site réalisé avec Bludit est consultable à cette adresse : https://demo.bludit.com/. Elle présente un blog avec plusieurs articles, ainsi qu’une page “About”.

Les catégories et les thèmes

Les catégories sont un système de classement des articles (pages dynamiques). Les thèmes sont un système graphique de présentation des contenus. Les thèmes sont aussi un système de gestion de la présentation du classement de ces contenus.

Consultez ce site de démonstration, réalisé avec Bludit. Les articles (pages dynamiques) sont regroupées en 3 catégories (design, programming et typograaccessibles directement dans le menu principal. Une seule page statique (Information) est présentée, accessible par le menu situé dans le footer. Dans ce site, la façon dont les menus fonctionnent et la manière dont ils sont disposés est propre au thème utilisé (DevTheme).

Se procurer et installer Bludit

Le dossier du CMS Bludit est disponible en ligne sur le site de son éditeur : https://www.bludit.com/

La version disponible janvier 2021 est la 3.13.1

Transférer le dossier du CMS sur un serveur

➜ Une fois l’archive « bludit-3-xx-x.zip » décompressée (les xx figurent le numéro de version), il est nécessaire de transférer le dossier « bludit » sur un serveur. Vous êtes invités à utiliser Filezilla pour effectuer ce transfert.

En fonction de l’hébergeur chez qui vous envisagez de transférer le dossier du CMS, celui-ci fonctionnera plus ou moins bien. Nous avons déjà testé l’hébergement gratuit de PlanetHoster… et nous avons rencontré de nombreuses difficultés !

La solution gratuite de Alwaysdata semble bien s’accorder avec Bludit… attention toutefois à la limite des 100 Mo de données hébergées.

➜ Pour des précisions concernant une solution d’hébergement chez Alwaysdata, voyez le cours : Utiliser les services gratuits de Alwaysdata

Le concepteur du CMS Bludit propose l’hébergement gratuit chez 000webhost.com (voir vidéo ci-dessous). Notez que dans la vidéo, les fichiers du dossier « bludit » sont placés à la racine du dossier « public-html ». L’url de l’espace d’hébergement conduit directement au site. Vous pouvez envisager de renommer le dossier « bludit » comme vous le souhaitez et choisir de laisser les fichiers du CMS dans ce dossier. Il vous faudra alors simplement saisir « /nomdudossier », après l’url, pour parvenir au site.

Consulter la documentation de Bludit

Le CMS Bludit est assez bien documenté sur le Web, en anglais, en espagnol, en arabe… mais pas en français. Il vous faudra donc utiliser la traduction automatique de Chrome pour lire la documentation dans la langue de Molière !

Voici quelques adresses où trouver une documentation détaillée (dont celles d’un forum et d’une chaîne YouTube) :

Quelque soit la richesse de la doc en ligne, vous pouvez aussi suivre ce cours…

Attention, sur la doc en ligne, les vidéos datent un peu et l’interface du tableau de bord a évolué depuis 😉

Effectuer les premiers paramétrages

Une fois le transfert du dossier ou des fichiers effectué, connectez-vous à l’adresse de votre hébergement. Vous devriez voir la page suivante (avec peut-être une autre langue sélectionnée)…

La suite est très simple, le temps de saisir un mot de passe et de cliquer sur le bouton installer !

Vous êtes sur votre nouveau site Bludit et vous pouvez vous connecter au tableau de bord d’administration du site. L’installation du CMS en elle-même n’est pas plus compliquée que cela !

Notez que si vous souhaitez installer 2 sites construits avec Bludit sur le même serveur, vous devrez renouveler l’installation à partir d’un autre dossier « vierge » puis choisir un nouveau mot de passe d’administration, etc.

Utiliser le tableau de bord de Bludit

L’un des principaux avantages d’un CMS est de permettre la modification d’un site Web par l’intermédiaire d’un tableau de bord (à priori sans avoir à manipuler le code source).

Accéder à l’espace d’administration du site ?

➜ Pour vous connecter au tableau de bord de votre site Bludit, rajoutez « /admin » à l’URL de votre site ou cliquer sur le lien indiqué sur la page d’accueil. Prenez le temps de bien noter votre login d’administrateur (« admin ») et votre mot de passe.

Contrairement à la personnalisation d’un site HTML-CSS qui s’effectue à l’aide d’un éditeur de code, la personnalisation d’un site basé sur un CMS s’effectue principalement par le biais d’un tableau de bord (et parfois un petit peu dans un éditeur de code).

Les tableaux de bord sont plus ou moins complexes selon les CMS. Celui de Bludit est assez sobre et vous allez voir qu’il est très facile à prendre en main.

Modifier la traduction du tableau de bord (optionnel)

Pour améliorer l’ergonomie du tableau de bord, je vous propose de modifier la traduction en français des intitulés de quelques sous-onglets. En effet, par défaut Bludit intitule “Pages” l’onglet qui liste pages dynamiques (nommées aussi articles, billets ou posts, selon les terminologies et les CMS).

Dans Bludit, sont nommés “Statique”, au singulier, les pages statiques du site… et “Planifiée”, au féminin, le contenu dont la publication est différée. Tout cela est grandement perfectible !

➜ Pour effectuer des modifications dans la traduction en français des termes utilisés dans Bludit, il faut ouvrir dans un éditeur de code (Bracket, par exemple) le fichier “fr_FR.json” qui se trouve dans le dossier du site, dans le dossier “bl-languages”.

Vous pouvez effectuer cette modification sur le fichier indiqué directement dans le dossier initialement téléchargé. Vous actualiserez le dossier du site en ligne en remplaçant le fichier fr_FR.json dans le dossier bl-langages (en utilisant Filezilla).

Vous en profiterez pour alléger le dossier du site en supprimant les fichiers de langue que vous n’utiliserez jamais (conservez les fichiers en.json et fr_FR.json).

Les modifications à apporter se trouvent notamment aux lignes 234, 263, 268 et 310. Une fois les modifications effectuées et le fichier enregistré, votre tableau de bord affichera de nouveaux intitulés dans l’onglet “Contenu”.

L’onglet “Articles” pourrait s’intituler “Pages dynamiques” et l’onglet “Contenu planifié” s’intituler “Publication programmée” ou “Publication différée”.

Publier des contenus avec Bludit

Publier des articles ou des pages

L’édition de contenus s’effectue dans un éditeur (Tiny MCE), accessible en cliquant sur l’onglet “Contenu” dans la colonne latérale du tableau de bord.

En cliquant sur le mot “PUBLICATION” précédé d’un rectangle vert, vous paramétrez Bludit pour placer votre contenu en brouillon. En cliquant sur “BROUILLON”, vous paramétrez de nouveau le CMS pour publier vos contenus sur le site.

Le positionnement d’une page en tant qu’article de blog ou page statique se paramètre dans les options de la page (onglet “avancé”).

Il est nécessaire de cliquer sur le bouton “Sauvegarder” pour publier la page et ses contenus.

Editer des pages en Markdown

Bludit propose d’éditer les articles en Markdown en utilisant le plugin EasyMDE. Attention, il est nécessaire de désactiver le plugin TinyMCE pour pouvoir utiliser EasyMDE. Si les deux sont activés, vous ne pourrez pas sauvegarder les modifications effectuées sur vos pages.

Publier des images

Deux types d’images sont utilisées par Bludit : les images d’illustration et les images d’accroche. Les premières sont insérées dans le fil de la page (en utilisant de préférence le bouton “Images”).

Les secondes sont insérées en tête de page et sont paramétrées soit comme les précédentes soit en utilisant le bouton “Options” et l’onglet “Généraux”, option “Sélectionner une image d’accroche”.

Personnaliser un site avec Bludit

Changer le thème par défaut

Vous êtes désormais outillés pour adapter le site de démonstration fourni lors de l’installation du CMS. Le thème utilisé par défaut se nomme “Alternative”. Un second thème est installé d’office, nommé “Blog X”. Vous pouvez l’activer d’un clic en allant dans l’onglet “Thèmes” du tableau de bord de Bludit.

La disposition des contenus est différente. Comme l’indique le nom du thème, ce dernier est conçu pour la publication d’un blog.

Télécharger et installer d’autres thèmes

Bludit propose de nombreux thèmes sur son site officiel : https://themes.bludit.com/. Plusieurs thèmes disposent d’un site de démonstration afin de voir concrètement comment le thème permet de structurer des contenus.

Comme nous l’avons vu plus haut, chaque thème gère les contenus du site à sa manière (menus, colonne latérale, images d’accroches, catégories, pages dynamiques et statiques, etc.). Dans un premier temps, il est recommandé de composer avec le thème tel qu’il est et de voir si en activant tel ou tel plugin il est possible d’en améliorer les fonctionnalités.

La personnalisation d’un thème nécessite de modifier des fichiers CSS et des fichiers PHP. pour les seconds, soyez prudents et suivez bien les consignes que vous pourrez trouver pour effectuer ces modifications.

Le choix d’un thème dépend en fait du type de lecture que nous souhaitons proposer aux internautes. Un thème offre une expérience utilisateur particulière, non pas au concepteur du site mais au lecteur du site !

Pour en savoir davantage sur l’usage potentiel de quelques thèmes adaptés à Bludit, je vous propose de consulter la fiche intitulée personnalisation de Bludit

➜ Prenez le temps d’explorer les sites de démonstration. Activez les onglets du menu pour voir comment chaque thème fonctionne.

Les thèmes conçus par Diego Najar, le créateur de Bludit, sont particulièrement soignés ! Vous disposez donc de nombreuses opportunités pour structurer visuellement vos contenus. Pour tester plusieurs thèmes, le plus simple est d’en installer plusieurs à la fois pour pouvoir, d’un clic, comme indiqué précédemment, changer le look et le fonctionnement du site.

➜ J’ai sélectionné 12 thèmes que je vous propose de télécharger en une seule archive. Vous décompresserez l’archive zip et vous placerez les 12 dossiers dans le dossier “bl-themes” de Bludit (sur votre serveur…). Vous pourrez ainsi les tester.

Télécharger 12 thèmes pour BLUDIT

Vous disposez maintenant de 14 thèmes pour répondre à différents besoins. Cliquez sur l’onglet Thèmes du tableau de bord. Ceux qui sont signés “Bludit” sont conçus par Diego Najar. Activez le thème que vous souhaitez tester et cliquez sur le bouton “Site” (ou rafraîchissez la page du site dans votre navigateur). Vous pouvez installer d’autres thèmes en téléchargeant leur dossier depuis la page “Themes” du site officiel.

Explorer le potentiel d’un thème

Pour se rendre vraiment compte du potentiel d’un thème, il est nécessaire de disposer de contenus plus riches que les simples textes proposés par défaut lors de l’installation du CMS.

➜ Créez plusieurs articles (pages dynamiques) et plusieurs pages statiques, catégorisez-les, insérez des images d’accroches sur certaines pages et pas sur d’autres. Insérez des images dans vos pages. Tout cela vous permettra de mieux évaluer le fonctionnement d’un thème et de faire des comparaisons utiles entre un thème et un autre.

Le choix d’un thème dépend en fait du type de lecture que nous souhaitons proposer aux internautes. Un thème offre une expérience utilisateur particulière, non pas au concepteur du site mais au lecteur du site !

Quelques thèmes sortent du lot. Massively est très plaisant sur le plan visuel. Sa personnalisation nécessite cependant un patient travail de codage. Un cours est spécialement consacré à ce thème.

Andy est un thème particulièrement fonctionnel, sobre et intemporel. Blekathlon est bien ficelé. BlogX “fait le job” et Kernel Panic, tout en étant très simple, répond aux besoins élémentaire de ce type de publication.

Portfolio et plusieurs autres thèmes présentent des défauts notoires. Le plus handicapant est l’impossibilité d’afficher les plugins proposés ! Quand il s’agit de défauts de taille de police de caractères ou d’espacement entre les blocs d’infos, un peu de temps dans les CSS peuvent remédier aux problèmes. Si il faut retravailler le code PHP, c’est plus gênant !

Pour en savoir davantage sur l’usage potentiel de quelques thèmes adaptés au CMS Bludit, je vous propose de consulter la fiche intitulée personnalisation de Bludit

Compléter la traduction d’un plugin

Traduire la mention “Home page”

Si vous utilisez un thème disposant d’une colonne latérale, vous aurez certainement envie d’activer les plugins Navigation et Pages Statiques. Le premier permet d’afficher automatiquement la liste des n dernières pages dynamiques publiées et le second la liste de toutes les pages statiques. Cela crée une sorte de menu pour chaque type de pages éditées.

Le problème rencontré est la mention en anglais de la page d’accueil en tête de liste, dans les deux plugins. Un assez gênant Home page inaugure les deux listes ! Il faut donc intervenir dans le fichier fr_FR.json des plugins en question. Pour ma part j’ai constaté qu’en effectuant la modification dans un seul fichier, le changement était effectif pour les deux listes ! Vous vérifierez si c’est aussi le cas pour vous 😉

➜ Voici le changement à effectuer (ici dans le fichier de traduction du plugin Navigation) :

Améliorer l’utilisation d’un plugin

Améliorer les plugins “Navigation” et “Pages Statiques”

Si vous utilisez un thème disposant d’une colonne latérale, vous aurez certainement envie d’activer les plugins Navigation et Pages Statiques. Le premier permet d’afficher automatiquement la liste des dernières pages dynamiques publiées. Le second permet d’afficher la liste de toutes les pages statiques. Ces extensions créent dans la colonne latérale du site une sorte de menu pour chaque type de pages éditées.

Le problème rencontré est la mention en anglais de la page d’accueil en tête de liste, dans les deux plugins. Un assez gênant Home page inaugure les deux listes ! Il faut donc intervenir dans le fichier fr_FR.json des plugins en question. Pour ma part j’ai constaté qu’en effectuant la modification dans un seul fichier, le changement était effectif pour les deux listes ! Vous vérifierez si c’est aussi le cas pour votre site 😉

➜ Voici le changement à effectuer (ici dans le fichier de traduction du plugin Navigation) :

Personnaliser un thème

La prise en main d’un thème nécessite beaucoup de pratique. Rien de tel que de réaliser un site avec tel ou tel thème pour découvrir le potentiel typographique et iconographique du thème.

➜ Je vous propose, pour terminer la formation FCS, de réaliser un site en utilisant le thème Massively. Vous trouverez de nombreux conseils et astuces pour créer un superbe site vitrine sur Personnaliser le thème Massively.

Catégories
FCS FCS3-cours

Utiliser les services gratuits d’Alwaysdata

Nous allons voir pendant ce cours comment procéder pour bénéficier des services gratuits de l’hébergeur Alwaysdata. Notre objectif à court terme est de pouvoir déposer des sites Web simples, personnalisés par nos soins lors des cours précédents.

Nos besoins

Capacités d’hébergement

Si vous compressez convenablement les images utilisées pour les sites personnalisés par vos soin, le poids total de chaque site à héberger ne devrait pas dépasser quelques Mo. Plus tard vous hébergerez votre portfolio sur le même espace. Bien conçu, votre portfolio ne devrait pas dépasser 20 Mo.

Pour la suite de la formation, nous aurons besoin d’héberger un CMS sans base de données (Bludit). Ce CMS, une fois utilisé pour réaliser la maquette d’un site vitrine, ne dépassera pas 50 Mo (images intégrées comprises). 70 Mo à 80 Mo d’espace d’hébergement suffisent donc amplement pour la mise en ligne des publications réalisées en cours de formation FCS.

Si vous envisagez de publier d’autres sites statiques sur le même espace d’hébergement, dans un but d’exercice, prévoir 20 à 30 Mo supplémentaires est réaliste. Cela porte notre besoin maximum à 100 Mo, pour le seul cadre de la formation FCS et la préparation du Titre Pro IMeP.

Base de données

Nous n’avons pas besoin d’accéder à une base de données dans le cadre de la formation actuelle. Nous n’avons pas besoin d’installer le CMS WordPress (ce qui nécessiterait le paramétrage d’une base de données et au moins 100 Mo supplémentaires pour installer sans souci quelques thèmes et extensions appropriés).

Aide en ligne

L’idéal est de pouvoir disposer d’une aide en français et d’une assistance rapide en cas de besoin.

Adresse du site

Les comptes gratuits ne permettent pas d’obtenir des noms de domaines gratuitement. Cependant la plupart des offres proposent de choisir des sous-domaines, dans la mesure où ils sont disponibles. Il s’agit alors de l’intitulé de votre compte

Généralement, l’intitulé de votre compte précède le nom de domaine de l’hébergeur et prend une forme comme moncompte.alwaysdata.net chez Alwaysdata.

Créer un compte chez Alwaysdata

➜ Je vous propose ici de créer un compte gratuit chez l’hébergeur Alwaysdata.

Vous disposerez de 100 Mo pour héberger vos publications, d’une aide en ligne en français, d’un tableau de bord de gestion de votre compte assez clair. L’adresse Web permettant d’accéder à vos sites (dont votre portfolio) se terminera par alwaysdata.net.

La démarche d’inscription est très simple. Si vous avez besoin de consulter l’aide en français, elle est accessible à cette adresse : https://help.alwaysdata.com/fr/

Attention : tous les 4 mois, il vous faudra vous connecter à votre compte en tant qu’administrateur. Si vous ne le faites pas, votre compte sera annulé. Vous serez avertis par mail avant la date butoir.

S’inscrire chez Alwaysdata

➜ La démarche d’inscription est très simple. Choisissez bien la formule gratuite mutualisée et complétez le formulaire d’inscription avec des données valides. L’inscription s’effectue à cette adresse : https://www.alwaysdata.com/fr/

Je vous recommande de saisir d’abord votre mot de passe dans un éditeur de texte. Choisissez un mot de passe fort puis copiez-le pour le coller dans le formulaire d’inscription d’Alwaysdata.

Pensez bien à enregistrer votre fichier de note. Nommez-le de manière explicite. En procédant ainsi vous éviterez les fréquentes erreurs de saisie et de copie qui vous obligeraient à redemander un mot de passe lors de connexions ultérieures infructueuses.

➜ Une fois votre compte créé, vous pouvez accéder à votre espace d’administration, à l’adresse suivante : https://admin.alwaysdata.com/.

Récupérer Les paramètres de connexion FTP

Pour placer vos sites Web en ligne, vous devrez utiliser les fonctionnalités d’un logiciel nommé “client FTP” (je vous propose dans un autre cours d’utiliser le client FTP “Filezilla”).

➜ Pour cela, vous devez noter dès maintenant les données dont vous aurez besoin ultérieurement. Sans ces données vous ne pourrez rien transférer chez Alwaysdata avec Filezilla ! Attention, vous en aurez besoin plusieurs fois…

Dans la colonne de gauche de votre espace d’administration, repérer l’onglet “Web”, ouvrez-le puis repérez l’onglet “Accès distant”. Ouvrez-le à son tour puis cliquez sur FTP. Toutes les informations dont vous avez besoin sont sur cette page…

Il s’agit donc de noter les informations suivantes :

  • l’adresse d’hôte FTP (sous la forme ftp-moncompte.alwaysdata.net)
  • votre identifiant de connexion FTP (nom d’utilisateur… c’est généralement le même que le nom du compte)
  • votre mot de passe de connexion FTP (c’est le même que votre mot de passe de connexion à l’espace d’administration)

Contrairement à ce que vous pourriez entendre sur certains tutoriels, je vous demande (dans un premier temps) de ne pas créer de nouvel utilisateur FTP.

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

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

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

Rendez vous ensuite sur le cours Utiliser Filezilla.

Catégories
CC3-exos Com-Créa

Illustrer un kit de communication

Dans cet activité de mise en pratique (TD), vous devez concevoir un visuel modulaire destiné à illustrer un kit de communication. Ce kit sert à promouvoir un événement par le biais de plusieurs produits personnalisables. Vous vous appuierez sur une réalisation existante que vous optimiserez dans le cadre fictif d’une reconduction de l’événement.

Vous allez dans un premier temps étudier le kit d’aide à la communication mis en place par la Fédération Française de Cyclotourisme pour promouvoir la Fête du Vélo prévue en juin 2019. Vous imaginerez ensuite un nouveau kit pour promouvoir le même événement envisagé en juin prochain (année suivant la date de session).

Prendre connaissance du cahier des charges

Consulter les documents fournis

Le bloc marque utilisé en 2019

Les documents à partir desquels vous allez travailler sont à télécharger sur votre poste de travail.

télécharger lE KIT de COM. FDV 2019

Le kit de communication de la FF Vélo avait été mis en ligne sur le site de la Fédération Française de Cyclotourisme. Il a été retiré depuis, remplacé par d’autres outils de communication que je vous invite à découvrir. Vous trouverez sur le site ffvelo.fr le lien de téléchargement de la charte graphique de la fédération.

Suivre la démarche de design vue au niveau précédent

Pour mener ce projet, vous reprendrez une démarche analogue à celle suivie pour la conception d’un logo (voir le cours précédent) : préparation-définition → idéation-conception → réalisation-publication.

Il vous faut donc mener un brief, analyser le cahier des charges, clarifier tous les points techniques relatifs aux livrables à produire. Vous allez vous documenter sur le sujet, prendre en compte la direction artistique du projet (la tendance et le style imposé), effectuer des recherches et faire des propositions. Vous allez finaliser la proposition retenue et décliner cette proposition sur tous les produits de communication envisagés.

Analyser le cahier des charges

➜ Après avoir analysé les éléments de la campagne 2019, une première version de cahier des charges a été rédigée. Ce cahier des charges doit être analysé et complété par les réponses aux questions à poser lors du brief (1re séance de cours).

Télécharger le cahier des charges

Il s’agit de réaliser un kit d’aide à la communication, proposé en ligne par la Fédération Française de Cyclotourisme, pour la Fête du Vélo envisagée durant les 2 premières semaines du mois de juin prochain.

Prendre en compte 4 axes positifs et négatifs

4 axes positifs sur lesquels s’appuyer :

  • communication festive
  • diverses pratiques (sportives, ludiques, touristiques, utilitaires, sur route, sur sentiers, sur circuits, etc.)
  • divers publics (hommes, femmes, ados, enfants, divers âges, etc.)
  • divers lieux (ville, campagne, montagne, littoral, complexes aménagés, etc.)

4 axes négatifs à éviter absolument (le contraire des 4 axes positifs…) :

  • communication formelle
  • 1 seule pratique
  • 1 seul public
  • 1 seul lieu

Identifier l’ensemble des livrables attendus

Les éléments à personnaliser devront prévoir un espace suffisant pour intégrer en impression numérique le nom de la ville où se déroulera l’événement ainsi que le lieu du principal rendez-vous (ex: Clermont-Ferrand | Place de Jaude).

En respectant la charte graphique publié par la FFC (couleurs, typographies, formes, etc.) Il est attendu la production des éléments suivants :

  • Un bloc marque optimisé (agrandir la zone événement et améliorer la présentation du texte)
  • Un bloc date optimisé (amélioration de la lecture des données)
  • Un visuel en appui sur les 4 axes définis plus haut – Format 297 x 297 mm – Résolution 300 dpi
  • Deux affiches (1 aff. A3 et 1 aff. A4 )avec zone de personnalisation
  • Un flyer A5 recto verso avec zone de personnalisation
  • Une couverture de guide pratique + gabarits pages intérieures (gauche + droite) – format fermé : 210 x 148 mm
  • Trois bannières Web (FB = 820 x 312 px + TWT 1500 x 500 px + ISTGRM = 1080 x 1080 px)
  • Trois GIF animés (billboard  970 x 250 px + leaderboard  970 x 90 px + pavé 300 x 250 px)

Il est également attendu la production des éléments graphiques permettant le marquage des objets suivants :

  • Stickers
  • Sacs
  • Gourdes
  • T-shirts
  • Casquettes

Préparer le travail de conception

Avant de se lancer dans le travail de conception de l’illustration il est nécessaire de mener à bien plusieurs opérations.

Analyser les documents fournis

Une rapide analyse des éléments existants (campagne 2019) montre que le visuel utilisé ne correspond pas aux axes proposés pour l’année concernée par le projet.

Le visuel présente un vélo de femme, pour une utilisation ludique ou utilitaire, placé devant un paysage rural de plaine. Le visuel 2019 est trop axé sur un seul type de pratique, dans un seul type d’environnement et pour un public trop spécifique !

Analyser une collecte d’affiches sur le même thème

➜ Pour trouver des éléments de réponse à la question posée par la nécessité de cibler diverses pratiques, divers publics et divers lieux, consultez les sites de quelques studios graphiques ayant travaillé sur un projet de communication en rapport avec la fête du vélo.

Une collecte d’affiches portant sur le même thème permet de mieux cerner les données du problème. La question posée pourrait-être Comment traduire visuellement la multiplicité des usages cyclistes ?

télécharger le dossier de collecte d’affiches

➜ Chaque graphiste a trouvé une manière différente de répondre à la question. Certains ont produit plusieurs visuels pour la même campagne, d’autres ont multiplié les figures de cyclistes, des graphistes ont inventé des vélos aux usages multiples… d’autres sont tombés dans le même biais que le graphiste du projet retenu par la fédération concernée en 2019.

Tenir compte de la direction artistique imposée

Pour vous permettre d’expérimenter un type de mise en page très pratique dans ce type de contexte, je vous propose une ligne directrice à suivre concernant le type d’illustration à mettre en œuvre.

Le cahier des charges nous invite à produire une illustration de format carré. Par ailleurs, vous serez amenés à décliner cette illustration dans plusieurs autres formats rectangulaires, horizontaux ou verticaux.

➜ Je vous propose donc de réaliser un visuel en appui sur une grille de carrés de 3×3 (9 carrés), dans une optique modulaire, chaque carré ou carreau de la grille pouvant être déplacé dans la composition en fonction des besoins.

Dans le diaporama ci-dessous, des exemples d’assemblages de carrés sont présentés. Les carrés blancs figurent des zones de texte et les carrés noirs des zones d’image.

grilles-carres-01
previous arrow
next arrow

➜ Il s’agit donc :

  • de mettre en place, sur une grille de 9 carrés (3 colonnes x3 rangées), une image d’arrière-plan composée de carrés juxtaposés indépendants, eux-mêmes composés de formes géométriques simples évoquant un environnement paysager ;
  • d’incorporer dans la composition des éléments graphiques (formes, couleurs, textures, motifs) évoquant la mer et la montagne, la ville et la campagne, le bâti et le naturel ;
  • d’ajouter à cet environnement des illustrations ou éléments figuratifs évoquant le cyclisme sous toutes ses formes et pour tous les âges (avec ou sans personnages-cyclistes).

Se documenter sur le style imposé

➜ Avant de se lancer dans le maquettage de l’illustration, il est nécessaire de se documenter au sujet des compositions graphiques sur une grille de carrés. Pinterest offre un premier champ de recherches.

https://www.pinterest.fr/dendrographe/composition-grilles-de-carr%C3%A9s/

Pinterest mentionne la présence de motifs géométriques sur le site de Freepik. Une recherche plus détaillée vous donnera accès à des éléments vectoriels susceptibles de fournir une base sur laquelle vous appuyer pour mettre au point composition sur grille.

Sélectionner le visuel le plus pertinent

➜ Prenez le temps d’examiner avec soin les motifs collectés. Dans Illustrator, créez un masque qui vous permette d’examiner le rendu d’une grille de 3×3 carrés, comme indiqué sur la capture d’écran ci-dessous.

Vous découvrirez ainsi le type de formes qui répondra le mieux au cahier des charges du projet. Il s’agit de trouver des formes qui soient ni trop urbaines ni trop rurales, évoquant un univers à la fois masculin et féminin, adulte et enfantin…

L’alternance des zones claires et des zones foncées entre aussi en ligne de compte. Veillez à ce que le regard circule facilement entre les différents motifs. Si les formes vous conviennent mais que les couleurs vous semblent mal réparties, n’hésitez pas à faire des modifications.

Le carré sélectionné servira de charpente à l’illustration définitive. Il est prévu d’insérer dans les formes du motif global des éléments visuels plus significatifs (photos, dessins figuratifs, etc.) ainsi que des textures si cela est jugé nécessaire.

L’équilibre final sera atteint quand toutes les composantes graphiques seront intégrées dans la composition. Ne cherchez à équilibrer trop tôt votre composition !

Affiner le visuel sélectionné

Les visuels collectés sur Freepik ne sont pas toujours construits avec rigueur. Suivant le temps dont vous disposez et surtout si vous envisagez de décliner une série de motifs géométriques de plusieurs manières, envisagez de rectifier l’alignement des traits.

➜ Pour effectuer ce travail de rectification des tracés, il est nécessaire de travailler en aperçu “Tracés”.

Vous pouvez régler le pas de la grille sur la dimension des modules et activer le magnétisme de la grille. Le reste est une question de persévérance…

➜ Rectifiez a minima les 9 carrés (3X3) que vous avez sélectionnés pour construire votre illustration. Utilisez les fonction d’alignement horizontal et vertical, dans Illustrator, pour rectifiez votre dessin.

Utiliser les couleurs de la charte

La FFC dispose d’une charte graphique proposant plusieurs couleurs.

Étager les couleurs fournies

Les couleurs imposées ne sont pas présentées de manière à mettre en évidence l’étagement de leur valeur de gris, base de toute composition visuelle structurée. Il est primordial, lors de la colorisation définitive du visuel, d’optimiser le contraste entre les différentes parties de votre composition.

Cela donne du rythme à l’image, en évitant toute impression de sous-exposition (image trop sombre) ou de surexposition (image trop claire). La lecture des formes clés doit être optimisée quelque soit les conditions d’éclairage et le visuel est plus impactant.

➜ Il convient donc de trier les couleurs fournies en utilisant 3 catégories (couleurs foncées, couleurs moyennes, couleurs claires). Je vous propose de compléter pour votre usage, la planche ci-dessous.

Vous pouvez ajouter une couleur dont la symbolique dans le monde cycliste est très forte, il s’agit du jaune (maillot jaune). Cette couleur est curieusement absente du nuancier de notre “client”.

Vérifier l’équilibre des valeurs

➜ Une fois que vous avez réparti vos couleurs dans votre composition, en veillant à utiliser les 3 catégories de couleurs (foncées, moyennes et claires), exportez votre travail en tant qu’image matricielle (ou faites une capture d’écran).

Ouvrez cette image matricielle dans Photoshop et convertissez l’image en niveaux de gris. Vous verrez alors au premier coup d’œil si votre composition est bien rythmée et bien contrastée. Si ce n’est pas le cas, vous saurez immédiatement quelle est la couleur à changer pour obtenir une valeur plus claire ou plus foncée dans les zones concernées.

Pour améliorer la qualité visuelle de votre image, vous pourrez ajouter ponctuellement des petites zones de blanc (ou de couleurs claires sur fond blanc).

Prévoir les fonds perdus

Il est maintenant nécessaire d’anticiper l’intégration du visuel créé dans les différents produits de communication. Le premier livrable est une affiche A3 sur laquelle le visuel occupe toute la partie supérieure.

➜ Prévoyez 5 mm de fonds perdus et anticipez le résultat d’un massicotage imprécis de l’affiche en disposant de manière cohérente les éléments débordants. faites bien attention de ne pas déformer les triangles et les cercles en vous contentant de décaler des points de contrôle.

Décliner le visuel sur les différents produits

Composer l’affiche

Le moment est venu de mettre en page votre visuel pour composer l’affiche A3. Le schéma ci-dessous vous indique comment se positionne le visuel dans l’affiche.

Il est assez déroutant, pour un illustrateur débutant, de voir le visuel qu’il a patiemment mis au point passer au second plan lors de la mise en page. Les textes ou leurs blocs d’encadrement dissimulent les motifs ajustés avec soin : c’est parfois assez frustrant ! Soyez rassurés, dans d’autres produits de communication du projet (notamment la couverture du livret), le visuel mis au point sera moins “encombré” par les différents blocs d’information.

➜ Effectuez le positionnement de tous les éléments qui doivent figurer sur l’affiche et, si vous le jugez nécessaire, vous rectifierez votre image pour l’adapter à son utilisation dans l’affiche. Ne cherchez pas à équilibrer votre affiche avant d’avoir intégré tous les éléments qui doivent y figurer.

Pour enrichir votre travail de recherche, référez-vous au cours intitulé L’illustration modulaire.

Créer des gifs animés

La création des gifs animés nécessite de disposer de plusieurs “écrans” sur lesquels s’affichent successivement les textes proposés au lecteur.

Il est tout à fait envisageable de préparer les écrans dans Adobe Illustrator, sur des plans de travail distincts, puis d’exporter pour les écrans à la taille réelle (x1), en jpg ou en png.

➜ Pour transformer les images exportées en gif animé, je vous propose d’utiliser l’outil en ligne gifmaker.org (voir tutoriel ci-dessous).

Catégories
W3CSS W3CSS-cours

Créer son portfolio avec w3.css

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

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

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

Télécharger les gabarits

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

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

Télécharger les gabarits de portfolios W3CSS

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

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

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

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

La structure d’un portfolio

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

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

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

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

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

En savoir plus

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

https://www.slideshare.net/cabaroc/creer-sonportfolio

Les images de travaux

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

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

Inventaire des comportements d’image

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

La préparation des contenus

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

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

Lister les images à produire

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

Lister les dimensions de images à produire

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

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

Choisir un style de présentation des images de travaux

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

Plusieurs options s’offrent à vous :

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

Voyez les pages suivantes sur w3schools.com :

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

Lister les textes à produire

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

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

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

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

La personnalisation des gabarits fournis

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

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

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

L’utilisation des identifiants « class »

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

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

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

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

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

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

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

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

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

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

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

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

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

Les icônes Font Awesome

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

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

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

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

Utilisez des photos de maquette

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

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

Le paramétrage des grilles

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

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

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

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

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

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

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

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

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

Aller plus loin en intégrant des textures

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

VOIR LE GABARIT

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

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

Télécharger le GABARIT

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

Aller plus loin en utilisant Bootstrap

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

Télécharger les gabarits de portfolios BOOTSTRAP
Personnalisation du gabarit Freelancer

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

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

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

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