Dans ce cours, vous allez identifier les différents éléments constitutifs d’un diaporama commenté (ou présentation visuelle et orale). Pour cela, je vous invite à envisager l’exposé accompagné de diapositives projetées sous l’angle des canaux de communication utilisés.
Identifier Visio, Audio et Gestuo
Quoiqu’il se dise et s’écrive en ligne sur le sujet, il est certain que la mise en œuvre d’une présentation visuelle, commentée en direct devant un public, passe par 2 canaux sensoriels (vue et ouïe) et 3 canaux de communication (visuel, auditif, gestuel).
Une présentation visuelle commentée est un produit de communication audio-visuelle. Le public observe — vision — cependant 2 choses bien distinctes : d’une part les images projetées (communication visuelle) et d’autre part la posture du commentateur (communication gestuelle). Le public prête aussi l’oreille — audition — aux commentaires (communication verbale) et aux intonations de voix du commentateur (communication paraverbale).
Pour donner un peu de vie à ces concepts, je vous propose de faire plus ample connaissance avec Visuo, Audio et Gestuo.
Utiliser tous les canaux et toutes les formes de communication
De nombreuses statistiques circulent sur l’importance du visuel par rapport à l’auditif, au vocal et au gestuel. Sont-elles fondées, vraies ou fausses (voir l’article de David Vellut sur les neuromythes). L’objectif visé est l’optimisation de la communication sous toutes ses formes.
Vous lirez sûrement des articles sur les travaux d’Albert Mehrabian. En voici un résumé visuel :
Les recherches menées par Albert Mehrabian datent de 1967. Elles ont souvent été remises en question ou très “librement” interprétées (lire l’article de Wikipedia à ce sujet). D’autres travaux ont été effectués depuis.
➜ Une recherche Google sur “intonation de voix et communication para verbale” permettra de vous faire une idée plus précise sur le sujet.
Retenez que l’important passe par le visuel et le paraverbal. Soignez donc vos compositions graphiques, choisissez vos couleurs et votre typographie avec soin. Lorsque vous commentez des diapositives, veillez sur votre gestuelle et sur le ton de votre voix !
Identifier les données du référentiel de certification DW
Le référentiel du titre pro Designer Web est téléchargeable sur le site de l’AFPA.
Voici ce qui est indiqué concernant la suite de l’entretien avec le jury (la première partie étant consacré à la production réalisée lors de la mise en situation professionnelle) :
Le candidat dispose de 25 minutes pour présenter au jury sur un poste informatique :
un site Web adaptable à différents périphériques, qu’il a réalisé à partir d’un système de gestion de contenu (CMS) dans le cadre d’un projet professionnel ;
un dossier de conception du site Web réalisé ;
une animation destinée à promouvoir le(s) produit(s) ou service(s) proposé(s) dans le site Web réalisé. Cette animation est adaptée à une publication sur le Web.
Informations complémentaires concernant le questionnement à partir de production(s) :
Le site Web réalisé dans le cadre du projet ne doit pas être le press-book du candidat. Il peut être réalisé pour une association, ou tout type de structure ou organisation. Il doit avoir été testé pour tenir compte des retours utilisateurs
Le dossier de conception du site est présenté au jury sous forme numérique au format « .pdf ». Il doit comprendre de 10 à 20 pages-écrans. Sa mise en page doit privilégier la lisibilité et la hiérarchisation des informations.Il doit décrire l’objectif, la cible, et l’arborescence du site Web réalisé. Il doit contenir des schémas de type wireframe ou zoning, une charte graphique ou une planche de tendances.
Le press-book professionnel est à réaliser sous forme numérique.Il doit contenir des productions professionnelles complémentaires (entre 10 et 20) réalisées par le candidat (ex. : design de sites, sites Web,maquettes, illustrations). Le choix de ces productions est laissé libre au candidat.Le candidat peut choisir de proposer au jury de visualiser le press-book sur un poste informatique ou sur un périphérique mobile type tablette
Définir le rôle de la présentation à commenter
Les données du référentiel du titre pro Designer Web permettent à l’équipe pédagogique du GRETA Clermont-Auvergne de proposer plusieurs mises en œuvre en fin de formation.
Les candidats à la validation du titre professionnel Designer Web sont invités à présenter un diaporamacomplet permettant aux membres du jury de prendre connaissance des éléments à évaluer. Il s’agit de présenter, par le biais de diapositives séquencées de manière structurée, les réalisations suivantes :
un site Web “responsive” réalisé avec un CMS (WordPress) dans le cadre d’un projet professionnel mené en autonomie — Ce site est mis en ligne par chaque candidat sur le serveur distant le plus adapté au projet ;
une animation de promotion d’un produit ou service du site réalisée avec un logiciel dédié (After Effect) — L’utilisation d’un autre outil est envisageable, du moment que le format de diffusion de l’animation est adapté à l’intégration dans un site Web ou sur les réseaux sociaux ;
un dossier ou journal de conception du site, élaboré numériquement de manière à être présenté hors ligne, projeté, imprimé ou hébergé en ligne — L’impression du dossier est envisageable par reprographie (avec concertation préalable des acteurs concernés) dans le cadre de l’atelier d’imprimerie du Pôle Plurimédia du lycée La Fayette ;
un portfolio en ligne présentant divers produits de communication réalisés lors de la formation ou en dehors de celle-ci — La réalisation de ce portfolio est l’occasion de promouvoir les compétences attendues par des éventuels recruteurs ou partenaires du secteur.
La présentation visuelle à construire pour pouvoir la commenter face au jury est le ciment des quatre productions mentionnées plus haut.
Notez que les cibles visées par ces quatre produits de communication (auxquels s’ajoute la présentation visuelle commentée) sont différentes.
La cible du site Web et de l’animation intégrée est le public auquel le site est destiné. La cible du dossier de conception et de la présentation visuelle commentée est le jury du titre professionnel DW. La cible du portfolio est composée des recruteurs et partenaires futurs de chaque candidat.
La spécificité de la présentation à commenter devant le jury du titre pro Designer Web nécessite quelques aménagements supplémentaires.
Utiliser le plan type
Parmi les différents plans utilisables, dans le contexte de la validation du titre, un plan se dégage aisément du contenu à présenter :
Titre
Intro et/ou sommaire
La conception du site Web et la production de ses contenus
La présentation du site Web mis en ligne
Le portfolio personnel
Les perspectives professionelles
Conclusion et/ou remerciement
Optimiser le temps imparti
Le temps imparti (25 minutes en tout) laisse donc 4 minutes pour présenter chaque section et 1 minute pour la mise en route en projetant la diapo titre.
Il est habituel de prévoir 1 minute de commentaires par diapositive. Cela nous conduit à envisager 4 ou 5 diapositives par section (selon que nous comptons ou non la diapositive de sous-titrage présentant la section).
Prendre en compte les spécificités du contexte
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 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é.
Dans la présentation envisagée, 2 documents sont nécessairement en ligne : le site Web et le portfolio. Des liens, intégrés dans les diapositives, doivent permettre à l’orateur d’accéder au site à montrer et au portfolio à présenter rapidement.
Présenter le dossier de conception
La mise en ligne du dossier de conception est envisageable, dans la mesure où cela peut faciliter sa présentation. Ce dernier point n’est pas en contradiction avec la possibilité de permettre au jury de consulter une version papier du dossier de conception.
➜ Interrogez-vous sur la forme à donner à votre dossier de conception en fonction de la manière dont vous envisagez de le porter à la connaissance du jury.
Quel format numérique allez-vous adopter ?
Quelle orientation allez-vous choisir pour les pages ou les écrans
Quelle quantité d’information allez-vous présenter sur chaque page/écran
La consultation de votre dossier se fera-t-elle de manière fluide et intuitive ?
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).
Ces documents imprimés sont à remettre au jury en cours de présentation, au moment opportun.
Choisir l’outil de finalisation du diaporama
L’outil le plus simple à utiliser est celui avec lequel vous êtes le plus à l’aise pour créer des diaporamas.
Plusieurs plateformes permettent de créer directement en ligne des diaporamas très efficaces : canva.com, genial.ly, beautiful.ai, etc. Les services proposés ne sont pas entièrement gratuits. La plateforme la plus intéressante à utiliser dans sa version gratuite est probablement Canva. Son utilisation nécessite toutefois un apprentissage plus ou moins long selon les habitudes déjà prises.
Les designers graphiques, dont la formation privilégie l’utilisation professionnelle des logiciels Illustrator Photoshop et InDesign, choisissent généralement de réaliser leurs diaporamas avec ces outils.
Du fait de leurs compétences en intégration HTML-CSS-JS, les designers Web disposent d’un choix bien plus large. Il existe en effet des outils, mis au point dans le milieu des développeurs, faciles à prendre en main et souvent amplement satisfaisants. En voici une liste abrégée :
Slide, la version en ligne du précédent (pour les débutants)
Shower, un framework très facile à prendre en main
Big, le plus surprenant de la liste (… à télécharger sur Github)
La qualité de votre présentation ne repose pas sur l’outil utilisé pour éditer vos diapositives ! C’est la qualité de votre structuration (plan global), la lisibilité de vos contenus (textes et images) et la qualité du commentaire qui les complète qui font de votre diaporama commenté un produit de communication efficace.
Vous trouverez une liste complète des outils de présentation visuelle, et un peu plus d’informations concernant les présentations visuelles commentées (PVC) sur y-goguely.netboard.me
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.
Quelle formule allez-vous adopter pour la présentation de votre projet professionnel face au jury du titre pro ?
Mettez-vous à la place du jury, imaginez-vous en train de présenter votre travail, faites la présentation commentée que vous avez mise au point devant un public test (proches, parents, ami(e)s, etc.)… Vous trouverez ainsi, en acceptant les critiques constructives, des solutions pertinentes et convaincantes !
Lors de cette activité pratique (niveau 3 de la formation Com-Créa), vous allez réaliser une mascotte simplifiée en lien avec l’identité visuelle d’une entreprise. Vous effectuerez des recherches sur le sujet, guidés par les consignes données et les ressources mises à votre disposition sur Netboard et sur Pinterest.
Prérequis : avoir suivi les niveaux 2 des formations Com-Créa et PAO-Tech.
Suivre un processus de design
La création d’une mascotte suit le même processus que la création d’un logo (voir niveau 2). Les étapes du processus sont celles du design graphique en général :
Brief et rédaction du cahier des charges
Documentation marketing et sectorielle
Planche de tendances
Arbre thématique
Planche de stylisation (formes, proportions, couleurs, traitement graphique)
Recherches graphiques (premières esquisses)
Vectorisation et prototypage
Tests et affinage
Propositions au client
Finalisation et charte d’utilisation
Utilisation et retours sur l’utilisation
Débriefing avec l’équipe de design et le client
Schématiser la succession des étapes de création
Processus de design adapté au design de mascotte
Il s’agit dans un premier temps de s’immerger dans le projet, les besoins du client et des utilisateurs, les tendances du moment dans le domaine concerné (étape formalisée par le brief, la documentation au sens large, la rédaction du cahier des charges et la planche de tendances).
Dans un second temps, il s’agit de définir le ou les axes de création sur lesquels vont se baser les recherches graphiques (arbre thématique, planche de style, premières esquisses)
Dans un troisième temps, il s’agit de réaliser vectoriellement la ou les propositions au client, en prenant soin de les tester et de les affiner si nécessaire au préalable.
Enfin, la dernière série d’étapes concerne la finalisation de la mascotte en la déclinant pour les différents usages envisagés et en concevant sa charte d’utilisation (charte graphique).
Visionner un processus complet
Vous pouvez visionner un processus complet de création de mascotte sur behance.net, depuis les croquis préparatoires jusqu’aux intégrations en vidéo et sur salons promotionnels.
➜ Sans aller jusqu’à ce niveau de professionnalisme, vous êtes invités, au cours du niveau 3 de la formation Com-Créa, à réaliser une mascotte simple en suivant la démarche indiquée. Vous pouvez vous baser sur les projets de logo menés au niveau 2 de la formation ou entreprendre une création pour répondre aux besoins d’une marque que vous connaissez.
Incarner les caractéristiques d’une entreprise
La mascotte incarne des valeurs de l’entreprise, elle donne corps à tel ou tel aspect de la vie de l’entreprise (sa production, ses services, son point fort, sa raison d’être, etc.).
Inventorier toutes les possibilités
Voici une liste de quelques éléments d’une entreprise “incarnables” par une mascotte :
Le nom de l’entreprise (ex : Miss Queen > mascotte reine)
Un produit créé par l’entreprise (ex : fruit > mascotte fruit)
Un ingrédient d’un produit (ex : chips aux crevettes > mascotte crevette )
Le bâtiment de l’entreprise (ex : tour Eiffel > mascotte tour Eiffel)
Les utilisateurs du service de l’entreprise (ex : le stade G. Guichard > mascotte footballeur)
Les bénéficiaires des services de l’entreprise (ex : société de protection des ours blancs > mascotte ours blanc)
Mascotte citron (produit) et mascotte diagnostique (service)
Utiliser la symbolique animalière
Selon les cultures, les animaux sont dotés de traits de caractère qui leur permettent d’incarner des valeurs, des conduites à tenir. Dans la culture occidentale, je vous propose quelques repères.
Identifier les traits de caractères animaliers
Les nourriciers : vaches, pélicans
Les protecteurs : lions, tigres
Les voyageurs : hirondelles, oies
Les royaux : aigles, lions, cerfs
Les laborieux : abeilles, fourmis
Les donateurs : cigognes, geais
Les bâtisseurs : castors, hirondelles
Les résistants au froid : ours polaires, manchots, pingoins
Les bavards : peroquet, maynate
Les sorciers et magiciens : hiboux, chouettes, corbeaux, chats noirs, araignées, chauve-souris
Les colériques : rhinocéros, bouledogues
Les économes : écureuils, fourmis
Les gourmands : ours, fourmilier (tamanoir)
Les voraces : cochons, sangliers
Les météorologues : grenouilles, hirondelles
Les malins : renards, singes
Les méchants : loups, araignées, chauves-souris, guêpes, crocodiles
Le choix du style graphique d’une mascotte est guidé par les recherches effectuées sur les tendances et les codes du secteur concerné. Les mascottes ci-dessus (guêpe et taureau) sont adaptées à l’identité visuelles de clubs sportifs. Un puissant contour, un relief contrasté mis en valeur par le trait, un traitement vectoriel franc et une expressivité agressive correspondent aux attendus des clubs et de leurs supporters.
Choisir un niveau de complexité et un mode de rendu
Le style graphique d’une mascotte repose sur le mode de rendu graphique et sur le niveau de complexité du dessin.
Le tableau ci-dessous différencie trente styles graphiques combinant niveaux de complexité et modes de rendu.
Il est plus facile de créer une mascotte dans les styles des trois premières colonnes du tableau. Le choix du style “cartoon modulaire” (3e colonne) permet assez facilement la réalisation d’animations détaillées.
Animer ou ne pas animer la mascotte
En tenant compte de votre niveau de technicité, tant en dessin qu’en PAO, choisissez un style graphique que vous pourrez exploiter sans difficulté dans la suite du projet.
En effet, il importe de prendre en compte l’éventuelle animation de la mascotte et le nombre de dessins à réaliser pour cela.
Sur les animations ci-dessus, notez les exagérations des mouvements (anticipation et inertie des gestes les plus simples). Renseignez vous sur les 12 principes de l’animation si vous envisagez de réaliser de telles images.
Attention : l’expression “animer une mascotte” renvoie très souvent au fait d’utiliser un acteur costumé pour incarner la mascotte (lors d’un événement en lien avec la marque promue par la mascotte).
Choisir l’angle de vue et la pose de la mascotte
Pour rendre la mascotte plus vivante aux yeux des utilisateurs de la marque, il est souhaitable de pouvoir la représenter sous plusieurs angles de vue.
Dessiner des “model sheets” et des “turnarounds”
Les créateurs de mascottes les représentent ainsi dans des planches nommées en anglais model sheets ou turnarounds.
Il est évidemment plus facile de proposer des poses et des angles de vue différents dans les styles graphiques les plus simples.
Utiliser des poses dynamiques
Les poses des planches précédentes sont souvent statiques. Pour élargir l’expressivité de la mascotte, il est recommandé de la présenter dans des poses dynamiques.
Étudiez le travail des designers de personnage (character designers) pour diversifier vos dessins.
➜ Effectuez des recherches avec les mots clés characters poses ou chibi action. Collectez des exemples et donnez à vos personnages le mouvement des modèles retenus.
Pour gagner du temps ou suppléer à des compétences de dessin insuffisantes, vous pouvez personnaliser des gabarits vectoriels proposés en ligne sur diverses plateformes.
Mascotte créée en personnalisant une des poses de la planche précédente
Charter le design de la mascotte
Une fois les tests d’utilisation effectués et les correctifs apportés au design du personnage, il convient de consigner les points clés du dessin de la mascotte dans une planche de synthèse ou une charte graphique plus complète.
Préciser les formes, les proportions et les couleurs
Pour faciliter l’utilisation ultérieure de la mascotte, il est intéressant de mettre au point des versions modulaires du personnage. Plusieurs poses sont réalisables en assemblant différentes parties du personnage.
Intégrer la mascotte dans les produits de communication
Associer un univers à la mascotte
Une mascotte est comme un héros de bande dessinée ou un personnage de dessin animé. Elle évolue dans un univers personnel. Elle est porteuse d’une histoire et peut être accompagnée d’un(e) ou plusieurs ami(e)s ou partenaires.
Faire interagir les produits et la (les) mascotte(s)
Dans les exemples présentés ici, les petites mascottes utilisent le produit et le produit les montre en train d’évoluer dans l’univers associé à la marque. Photos et dessins sont combinés pour mêler réel et imaginaire.
Sur les sites mentionnés sur y-goguely.netboard.me, vous pouvez voir des mascottes imprimés sur des badges, des magnets, des coques de téléphone, des supports de PLV (Publicité sur Lieu de Vente), etc.
Animées à des degrés divers, elles sont aussi présentées sur les réseaux sociaux et sur les sites web de la marque.
➜ Mettez vos mascottes en situation et anticipez les besoins en communication de votre client.
Dans ce cours, vous allez apprendre à présenter professionnellement vos propositions graphiques. Il s’agit du développement de la phase finale du travail de création. Les indications données dans ce cours s’appliquent en premier lieu à la création d’un logo mais aussi de tout produit de communication (affiche, flyer, site Web, etc.).
Ce cours vise l’acquisition de compétences professionnelles avancées.
Le premier chapitre en dit assez pour les débutant-e-s. Celles ou ceux qui souhaitent aller plus loin tireront profit des données partagées dans la suite du cours. De nombreux liens sont proposés pour approfondir les sujet.
Présenter visuellement et oralement ses travaux
La présentation des propositions d’un designer graphique au(x) commanditaire(s) est le résultat d’une véritable démarche de communication visuelle. Le produit de communication le plus utilisé est une présentation visuelle, la plupart du temps commentée oralement.
Comme tout produit de communication, un diaporama doit être envisagé comme le fruit d’une interaction entre 4 éléments indissociables :
La production de contenus (rédaction, illustration, commentaires)
Le contexte de communication (les modalités de lecture)
Le style de présentation des contenus (couleurs, typos, formes, séparateurs, motifs, textures, visuels)
La structuration des contenus (plan rédactionnel, découpage, hiérarchisation, ordonnancement sur une grille)
Cela se traduit par la nécessité d’accorder contenus, styles et structure au public visé, dans le contexte de lecture du message à transmettre.
Concrètement, il s’agit de :
regrouper les visuels les plus significatifs de l’ensemble du travail réalisé
choisir un plan de présentation (chronologique, méthodologique, SPRI, etc.)
mettre au point ou collecter un gabarit de diaporama adapté à l’outil de présentation envisagé
rédiger les textes et les commentaires prévus pour accompagner les visuels
Les décideur-euse(s) à qui sont présentées les propositions graphiques doivent être informé-e(s) le plus clairement possible sur les critères pris en compte pour parvenir aux solutions présentées. Il s’agit donc de veiller à mettre en œuvre les opérations suivantes :
expliquer la démarche suivie, centrée sur les besoins de l’utilisateur-trice final
immerger les participant-e(s) dans l’univers graphique envisagé en tenant compte de toutes les données collectées
recueillir les remarques éventuelles pour la suite du travail à fournir.
Suivre des recommandations
Voici une liste de documents ou d’articles traitant de la proposition des solutions graphiques au client :
Il n’est pas toujours possible de défendre son projet de vive voix. Le plan B consiste alors à envoyer le diaporama au client (sous forme de pdf, le plus souvent), en inscrivant les commentaire dans les diapositives, sans oublier les détails pratiques comme vos coordonnées sur chaque diapo, le foliotage des diapositives, etc.
Voici comment procède Balo, un jeune graphiste et youtubeur belge. Sans doute envoie-t-il une loupe virtuelle avec son pdf pour permettre à ses clients de lire ses commentaires 😉
La solution détaillée dans cette vidéo est plus simple à mettre en œuvre qu’un diaporama commentée oralement !
Suivre les conseils d’un pro
➜ Voici ce qu’affirme Jean-Philippe Cabaroc, designer graphique stéphanois, concernant la présentation du design d’un site Web. Les principes énoncés s’appliquent en grande partie pour d’autres produits de communication.
la promesse faite à la cible (les réponses apportées aux attentes de l’utilisateur-trice)
les bénéfices à retirer pour la cible en utilisant le produit
le ton adopté en fonction du contenu, de la cible et du média choisis — Voir le dossier “Communication” surmanager-go.com
la mission du (de la) designer graphique (élaborer une solution centrée sur les attentes de l’utilisateur-trice final-e du produit) — Lire les articles deGeoffrey Dorneet celui deTancrède d’Aspremont Lynden
Il s’agit de présenter l’univers visuel choisi :
planches de tendances (moodboards ou tableaux Pinterest) — Découvrir les alternatives à Polyvore
planches de style (ébauches de planches de marque ou guides de style montrant le parti pris du designer graphique)
planches de recherches manuscrites et assistées numériquement
planches de propositions
Pour terminer, il s’agit de s’assurer que :
l’ (les) interlocuteur-trice(s) a (ont) bien compris ce qui a été énoncé et montré
les remarques effectuées par les participant-ante-s ont bien été collectées
les besoins de l’utilisateur-trice final-e demeurent au centre des travaux de finalisation à venir
La mise en œuvre d’un tel argumentaire relève de la fiction dans le cadre des attendus de la préparation au titre pro Infographiste Metteur en Page. Cet exposé met cependant en relief le niveau de professionnalisme des designers graphiques exerçant depuis de nombreuses années ou ayant suivi des études poussées dans de grandes écoles de design.
Élargir son champ de compétences
L’exercice du métier de designer graphique nécessite des compétences allant bien au delà de la maîtrise des outils de PAO et des méthodes de création graphique. La défense d’un projet de design graphique s’inscrit dans une stratégie marketing touchant à la fois le graphiste et son client. Le lexique utilisé par jean-Philippe Cabaroc est celui des stratèges de la mercatique.
Simplifier sa présentation
➜ Ayant pris connaissance des avis des professionnels du secteur, je vous invite à trouver le moyen le plus adapté pour défendre vos propositions graphiques.
La gamme des réalisations possibles va de la simple planche de proposition (voir les propositions au client, dans le cours sur le design d’un logo) au diaporama détaillé destiné à être commenté oralement face à des décisionnaires expérimentés.
Le facteur temps entre aussi en ligne de compte dans le cadre de la formation suivie au Greta. La finalisation d’un diaporama complet est en effet particulièrement chronophage.
Des templates sont disponibles en ligne sur le site de w3schools.com. Vous les trouverez sur le page W3.CSS templates.
Le code source est disponible dans l’application Try-it. Il peut être copié et collé dans un éditeur de texte. Cependant, les liens vers les images des modèles seront rompus.
J’ai regroupé quelques templates en reconstituant les dossiers des sites en local. Utilisez ces modèles pour les personnaliser selon vos besoins;
Vous trouverez sur le site w3schools un template intégrant un très grand nombre de fonctionnalités mises en œuvre grâce aux classes de W3.CSS. Ce template utilise un thème coloré monochromatique.
➜ Trois thèmes chromatiques sont proposées sur le site, sur la base du même template :
Supprimez les fonctionnalités dont vous n’avez pas besoin et diversifiez vos pages pour créer des sites pleinement fonctionnels.
Utiliser les thèmes chromatiques de w3.css
Il est très facile de modifier la couleur principale du template en changeant l’appel du thème coloré dans l’entête de la page (appel du thème via un link dans le header.
Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.
Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.
Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.
Utiliser la plateforme Netboard
Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.
➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessous — un prof d’anglais explique à d’autres profs comment utiliser Netboard.
Netboard peut donc servir à :
regrouper et partager des collections de liens (veille informationelle)
organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
regrouper en mode collaboratif des documents sur une thématique
rassembler et partager une documentation sur un sujet précis
maquetter un site Web en testant la répartition des contenus sous différents onglets
etc.
En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.
Utiliser Google Sites
Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.
Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.
Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.
https://www.youtube.com/watch?v=uLiw4tpUkis
➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.
À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.
Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide. ➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.
Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).
Utiliser rakko.tools
Parmi les outils disponibles en ligne je vous propose d’utiliser rakko.tools, basé sur l’éditeur TinyMCE
Je vous invite à consulter cette page Web, réalisée avec rakko.tools :https://graphizm.fr/fcs/rakko-tools. Il a fallu en compléter le code source pour rendre le fichier conforme aux normes du Web. Le plus gros du travail avait toutefois été fait automatiquement au moment de l’export HTML.
Utiliser d’autres éditeurs WYSIWYG
Les éditeurs WYSIWYG grand public ne permettent pas de manipuler confortablement le code source et d’enrichir ainsi une page Web. Pour effectuer cela convenablement, il est nécessaire d’utiliser des éditeurs WYSIWYG plus élaborés comme BlueGriffon ou Dreamweaver. Leur prise en main est plus laborieuse et leur prix beaucoup plus élevé !
Utiliser un éditeur Markdown
Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.
Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :
La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :
Je me contenterai de les mentionner, sans entrer dans les détails car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3). La préparation au titre pro Designer Web permet de compléter utilement ces compétences.
Utiliser des frameworks CSS
Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.
Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.
Utiliser des CMS sans base de données
Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.
Utiliser des CMS classiques et des plateformes de création de sites
Le CMS le plus populaire est de loinWordPress. Viennent ensuite Shopify, Joomla, Squarespace, Drupal et Wix. Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.
Dans ce cours, vous allez apprendre à utiliser des outils en ligne vous permettant de modifier un dessin vectoriel. Vous pourrez ainsi envisager de créer des animations simple image par image.
Cette animation a été réalisée par Wilfried, un élève de la classe passerelle du lycée La Fayette.
Utiliser Vecta pour personnaliser un dessin
Dans le tuto ci-dessous, vous allez apprendre à utiliser Vecta, un éditeur vectoriel en ligne pour retoucher le dessin d’un avatar très simple.
Voici le personnage tel qu’il sera, une fois les retouches terminées :
Avant
Après
Le tutoriel complet
Un tutoriel en ligne vous permet, pas à pas, de prendre en main l’application Vecta.
Quand votre personnage sera prêt, vous pourrez créer des animations simples, ajouter des textes et plein d’autres effets. Nous verrons comment faire dans un prochain cours.
Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-déposer (drag and drop).
➜ Il s’agit, en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p
Cliquez sur l’image pour faire l’exercice
L’introduction dont il est question est un simple paragraphe dont le contenu est affiché en gras.
Reconstituer une structure HTML plus complexe
Le second exercice développe la structure du premier exemple en ajoutant une feuille de style interne, un second titre h2 avec ses paragraphes puis un script d’animation.
➜ Il s’agit cette fois, toujours en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p-h2-p-p intégrant les éléments ajoutés.
Dans cet exercice, vous allez composer un flyer au format A4 en utilisant la plateforme d’édition en ligne Canva.
Vous allez utiliser une image de fond, une forme structurante et un bloc texte. Vous allez décliner le flyer et créer plusieurs variantes dans le même document, en testant diverses dispositions de la forme structurante et du texte.
Toutes les instructions nécessaires vous sont communiquées sur cette page Web.
Dans cet exercice, vous allez repérer des blocs-dates composés de différentes manière et les collecter dans un tableau Pinterest.
L’ordonnancement visuel des éléments constitutifs d’un texte dans une page doit se faire en tenant compte de la nécessité de produire non pas une seule mise en page mais de nombreuses déclinaisons d’un même message.
Pour simplifier la mise en œuvre de ces déclinaisons sur divers supports ou produits de communication, il est souhaitable de constituer des blocs informatifs dont l’ordonnancement des éléments ne varie pas.
Sur l’image ci-dessus vous pouvez repérer plusieurs éléments typographiques constituant des blocs informatifs dont le bloc-titre et le bloc-date, ainsi que le bloc-url.
Je vous invite à faire un relevé de blocs-dates sur plusieurs documents. Vous allez créer un tableau Pinterest regroupant des flyers, des affiches ou des encarts Web sur lesquels figurent des blocs-dates tous différents.
