Catégories
FCS FCS1-cours

Le fonctionnement du Web

Dans ce cours vous allez découvrir comment fonctionne le Web et réaliser plusieurs activités en lien avec ce sujet. De nombreux liens vers des ressources externes vous seront proposés, vous pourrez les explorer tranquillement, le moment venu.

Utiliser une analogie pour comprendre le Web

Pour commencer, je vous invite à lire les trois premières partie de l’article intitulé “Le fonctionnement du Web”, sur le site developer.mozilla.org :

L’idée à laquelle je vous invite à être attentif est celle ci :

“Faisons un parallèle entre le Web et une rue. D’un côté de la rue, il y a une maison qui correspond au client. De l’autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.”

Faites un dessin commenté (façon sketchnoting) en vous inspirant de l’analogie développée dans la deuxième partie de l’article mentionné ci-dessus.

Votre dessin commenté sera partagé pour en contrôler l’exactitude (mais non la qualité graphique) 😉

Créer une infographie

Pour fixer davantage dans la réalité les concepts abordés à l’étape précédente, je vous propose de réaliser vous même une infographie en utilisant des éléments graphiques mis à votre disposition (cliquez sur l’image ci-dessous).

Si vous ne parvenez pas à faire glisser les éléments de la zone de droite vers la zone de gauche, rafraîchissez la page (ctrl/cmd-R).

➜ Voici les consignes à respecter pour positionner les différents éléments constitutifs d’un large réseau informatique.

Pour connecter les éléments du réseau entre eux, je vous invite à utiliser (en présentiel, sur Mac) l’application Aperçu. En effet, cette application dispose d’une fonctionnalité permettant de simuler un cable de liaison entre 2 box. Il vous faudra pour cela effectuer une capture d’écran de votre “réseau”.

Vous pourrez légender votre infographie en utilisant Aperçu ou l’application Skitch, disponible sur votre poste de travail en présentiel.

Avant de passer au chapitre suivant, je vous invite à terminer la lecture de l’article publié sur developer.mozilla.org. Vous allez en effet avoir besoin de quelques informations supplémentaires pour bien comprendre les vidéos proposées plus bas.

Visionner quelques vidéos

La première vidéo que je vous propose de visionner survole le sujet mais sans oublier aucun point essentiel.

Vidéo de 3 minutes et 4 secondes

La seconde vidéo offre un panorama complet de ce qui se passe lorsque vous regardez une vidéo en ligne. Pour éclairer leur propos, les auteurs abordent tous les points avec lesquels vous vous êtes déjà familiarisés (plus quelques autres dont je vous ai peut-être déjà parlé…).

Je vous invite à regarder cette vidéo chez-vous, tranquillement, pour approfondir le sujet.

Vidéo de 9 minutes et 26 secondes

Compléter une carte heuristique

Toutes les réalités dont il est question sont abondamment documentées sur le Web. Vous allez rassembler sur une carte mentale numérique toutes les références que vous pourrez trouver sur les différents points abordés jusqu’à maintenant.

Téléchargez la carte heuristique au format .xmind pour pouvoir l’éditer en utilisant l’application XMind, disponible sur votre poste de travail. Si vous êtes chez vous, téléchargez la version gratuite de XMind8 et installez-la sur votre ordinateur.

Les explications concernant la prise en main de XMind et la manière de procéder pour compléter cette carte vous sont apportées de vive voix, en présentiel ou en distanciel.

Faire un peu d’histoire

L’histoire du Web est pleines d’anecdotes amusantes ou dramatiques. Elle commence beaucoup plus tôt qu’on se l’imagine et connait des rebondissements inattendus. Voici quelques ressources disponibles pour parfaire votre culture Web.

Liens sur l’histoire d’Internet

Liens vers Wikipedia

Catégories
IMeP-DW

Présentation des formations IMeP et DW

Au fil de cette présentation vous allez découvrir comment se découpent les formations pour la préparation aux Titres Professionnels Infographiste Metteur en Page (IMeP) et Designer Web (DW).

Il sera également question de communication et de processus éditorial. En effet, les formations IMeP et DW s’insèrent dans une réalité professionnelle en lien direct avec l’édition et la communication visuelle.

Vous découvrirez ici le fonctionnement de la roue des moulins de la com, la farine de concept et les autres ingrédients du pain du savoir

Repérer les articulations entre IMeP et DW

Deux niveaux différents et une succession logique

Les 2 titres professionnels visés correspondent chacun à un diplôme de niveau distinct. Le Titre Pro IMeP est un diplôme équivalent à un Bac Pro. Le Titre Pro DW est un diplôme équivalent à un BTS. Les compétences nécessaires pour valider le premier sont des pré-requis pour envisager de valider le second.

Des modules en commun

Plusieurs formations spécifiques ou modules particuliers sont communs aux 2 parcours.

  • Les compétences requises en PAO sont acquises au cours de premiers modules communs. Les premiers TP d’évaluation des compétences professionnelles sont communs aux 2 parcours.
  • Des cours de droit sont dispensés dans les 2 formations.
  • Un cours sur la manière de mener une veille informationnelle et technologique (VIT) est commun aux 2 formation, même s’il est dispensé à un moment différent pour les uns et les autres
  • La formation permettant à chacun de construire un diaporama numérique (PVN) afin de présenter son projet professionnel devant le jury du Titre pro est dispensée à tous.
  • Un module dédié à la gestion de projet professionnel est proposé à chacun dans les 2 parcours.
  • Les modules 1 et 2 de la formation FCS (Fondamentaux de la Création de Site – Parcours IMeP) abordent des thématiques approfondies sur le parcours DW.

Comme vous le constatez, il n’est pas envisageable de faire du design graphique à un niveau professionnel sans avoir des compétences dans l’édition plurimédia.

Des formateurs polyvalents

Plusieurs formateurs animent des formations pour la préparation des deux Titres Professionnels.

  • Vert clair : Benoit BARBE
  • Magenta : Yves GOGUELY
  • Jaune : David GOUINEAU
  • Vert foncé : Intervenante
  • Brun rouge : Isabelle NORDMANN et Karine MARGUERITE
  • Violet : Etienne RODDIER
  • Bleu foncé : Jérôme CRECY
  • Bleu clair : Marcel GOUTTE

L’édition plurimédia

L’édition plurimédia est le secteur professionnel sur lequel s’appuie les deux parcours IMeP et DW. Pour cerner plus précisemment ce secteur professionnel, je vous propose de prendre connaissance de ce qu’on nomme le cycle ou le processus éditorial.

La roue des 8 P

Il s’agit des étapes par lesquelles sont éditées tous les contenus, quel que soit le média utilisé pour communiquer ces contenus au public. Toutes ces étapes peuvent être désignées par un mot commençant par la lettre P (… P comme Plurimédia).

Les opérations menées à chaque étape du processus

Pour approfondir la question, je vous propose de réfléchir à toutes les opérations à mettre en œuvre lors de chaque étape du processus éditorial.

➜ Notez ces opérations sur les pages d’un livret réalisé avec une feuille A4, en suivant le découpage et le pliage indiqué sur ce mode d’emploi.

Vous constaterez que ces opérations doivent être menées aussi bien quand il s’agit de produire des imprimés que lorsqu’il s’agit de produire des sites à mettre en ligne.

Les moulins de la com et la farine de concept

➜ Les 8 P forment une roue de moulin. Ce type de roue actionne les moulins de la communication. Ceux-ci, comme tout moulin, produisent de la farine, livrée dans divers emballages (pages, écrans, diapositives numériques, etc.).

Sur le schéma de la roue, l’ordre des opérations du processus est inversé, de manière à ce que l’eau qui actionne le moulin exerce sa pression dans l’ordre chronologique du cycle.

Cette farine est essentiellement de la farine de concept ou de la farine d’idée (2 variétés de céréales cérébrales couramment cultivées)

L’énergie qui actionne la roue est celle de la connaissance et de l’expérience acquise. “5% d’inspiration et 95% de transpiration…”, certains auteurs sont plus réalistes et affirment produire leurs œuvres avec 1% d’inspiration créative et 99% d’efforts persévérants ! L’édition plurimédia est avant tout une méthode de travail rodée et expérimentée.

Les formations aux titres pros IMeP et DW apportent aux participants toutes les compétences requises pour produire de la farine d’idée et la livrer au(x) commanditaire(s) dans de solides et superbes emballages.

Les formateurs-trices et les intervenant(e)s extérieur(e)s transmettent aux formé(e)s, stagiaires ou apprenant(e)s de la farine de concept, emballée soigneusement dans divers types de contenants.

Les ingrédients du pain du savoir

La farine de concept n’est pas très digeste en l’état. Elle se consomme mélangée à de l’eau, du sel et divers ingrédients. La pâte obtenue doit ensuite être cuite au four ou sur une plaque chaude.

Il appartient aux formés de faire leur pain ! Avoir appris à apprendre est un prérequis, n’est-ce pas ? Les pédagogues rappellent (ou apprennent…) aux formés comment fabriquer le pain du savoir et comment le faire cuire dans le four de la mise en pratique.

Les ingrédients du pain du savoir

Le public visé par vos actions de communication doit lui aussi produire son pain. La farine dans un bel emballage n’est pas encore du pain… et sans farine, pas de pain !

Le pain du savoir se pétrit avec les mains du bon sens, dans le pétrin du contexte de production 😉

Le four de la mise en pratique est alimenté par les contraintes du projet de communication (les spécifications du cahier des charges).

Apprendre à apprendre

Pour esquisser le sujet, voici une note graphique faisant l’inventaire de 10 manières d’apprendre (pour tous les publics d’apprenants).

sketchnote de Bénédicte Vallette d’Osia (https://www.pinterest.fr/BenedicteValdo/_saved/)

Les outils d’aide à l’apprentissage

Outil de collecte de favoris

Outils de mind mapping

Outils d’épinglage

Catégories
IMeP-DW

Infographies – bilans

Pour vous aider à faire le point sur les formations CC et FCS, j’ai réalisé quelques infographies à imprimer et à compléter par vos soins. Ces bilans peuvent être réalisés à tout moment, pendant ou après la (ou les) formation(s).

Ces infographies sont des outils de pensée visuelle. Complétez les avec soin et conservez une trace de votre travail car cela vous aidera à préparer votre entretien professionnel avec le jury du Titre Pro.

L’expédition en montagne

À partir du camp de base, vous avez entrepris l’escalade de la montagne du design graphique ou/et de la publication en ligne. Un premier camp a été monté à l’altitude du niveau 1, puis un second au niveau 2. Un dernier camp intermédiaire a été monté à l’altitude du niveau 3. La dernière partie de l’itinéraire menant au titre professionnel reste à parcourir. La reconnaissance par les pairs, les partenaires et les clients seront également à conquérir.

L’ascension de la montagne du design graphique et/ou de la publication en ligne

Les espaces de commentaires peuvent être divisés en 2 parties, une partie pour les points positifs, une autre pour les points négatifs.

Vous pouvez aussi mettre en place 2 parties, l’une pour la formation Com-Créa et l’autre pour la formation FCS (Fondamentaux de la Création de Site).
Des commentaires peuvent être ajoutés en dehors des cadres.

La progression linéaire

Les remarques effectuées plus haut concernent également cette infographie. La progression indiquée mentionne les 3 niveaux des formations CC et/ou FCS.

La progression en 3 étapes principales

Le nom abrégé de la formation est à mentionner dans la banderolle.

La carte mentale

Entre carte heuristique et parcours en 3 étapes, cette infographie est à commenter librement. D’autres cercles peuvent se raccrocher à ceux figurant sur la carte.

La carte mentale et le parcours en 3 étapes

L’analyse SWOT

Cette infographie s’inspire des matrices d’analyse SWOT ou FFOM : Strengths (Forces), Weaknesses (Faiblesses), Opportunities (Opportunités), Threats (Menaces). Outil d’analyse stratégique utilisé en entreprise, ce type de matrice permet d’évaluer la pertinence d’une action.

Dans la perspective de continuer ou non votre formation, de rechercher un poste de salarié ou d’envisager sérieusement de créer votre entreprise, mener une analyse de ce type est indispensable.

Les termes utilisés ont été légèrement modifiés pour vous faciliter une première approche.

  • Facilités extérieures : appuis et opportunités
  • Facilités intérieures : forces et accélérateurs
  • Difficultés extérieures : obstacles et contrariétés
  • Difficultés intérieures : faiblesses et freins
Matrice d’analyse des appuis, des forces, des obstacles et des faiblesses

N’hésitez pas à faire des recherches en ligne sur les matrices d’analyse SWOT et la manière de les utiliser.

Catégories
CC3-cours Com-Créa

Schémas de synthèse

Ce cours présente une série de schémas de synthèse, conçus dans le but de vous permettre d’avoir un aperçu global de l’ensemble des sujets abordés en formation Com-Créa.

La plupart des schémas présentés mettent en évidence une relation chronologique entre des opération de design graphique. La manière dont ces opérations se succèdent dans la pratique est souvent itérative, c’est à dire qu’une série d’opérations est souvent répétée avant de passer à la suite du processus.

Améliorer une mise en page (niv. 1)

Le cycle éditorial

Le cycle éditorial peut se résumer en 6 étapes désignées chacune par un terme commençant par la lettre P :

  • Préparation (définition du projet, planification, etc.)
  • Production de contenus (textes, images, etc.)
  • Présentation (agencement, mise en page, etc.)
  • Publication (reproduction, diffusion, etc)
  • Post-publication (suivi, mise à jour, etc.)
  • Préservation (archivage, indexation, etc.)

Les opérations de création graphique

Les 2 étapes de la création graphique proprement dite (production de contenus et présentation, entre préparation et publication) se résument en 3 opérations :

  • Structuration
  • Stylisation
  • Composition

Chacune de ces étapes se résume à son tour par une série d’opérations primordiales. La structuration combine 3 opérations clés, la stylisation combine 7 choix (dont 3 choix primordiaux) et la composition combine 3 choix importants (de nombreux autres s’ajoutant à ces derniers).

Le contraste, en phase de composition, peut être remplacé (ou complété) par le choix de l’orientation, du rythme ou des proportions.

Concevoir, présenter et finaliser un logo (niv. 2)

Le brief

Tout projet de communication visuelle commence par un brief. Les lettres BRIEF synthétisent le déroulement de la première étape de tout processus de design graphique :

  • Brief — questionnement
  • Recherches — documentation thématique
  • Information — prise en compte du contexte d’utilisation
  • Empathie — prise en compte de l’expérience des utilisateurs
  • Formulation — rédaction d’un cahier des charges précis (avec reformulation des attentes du commanditaire ou du client)

Les étapes de création d’un logo

La création d’un logo suit une série de 8 étapes, du brief à la finalisation de la charte graphique ou de la planche de marque :

  • Brief (rédaction d’un cahier des charges)
  • Tendances (réalisation d’une moodboard)
  • Styles (mise au point d’une planche de synthèse avec nuancier, combo typo, formes, etc.)
  • Recherches (production d’une planche manuscrite et d’une planche vectorielle)
  • Propositions (présentation de 3 propositions : 1 sûre, 1 originale et 1 créative)
  • Validation (acceptation d’une seule proposition ou d’une combinaison de plusieurs propositions)
  • Déclinaisons (développement d’une véritable identité visuelle)
  • Charte graphique (livraison d’une planche de marque plus ou moins détaillée)

Un débrief est envisageable en fin de processus.

Dans un contexte de production où il s’agit avant tout de gagner du temps, un processus court est envisageable (fléchage ocre ci-dessus) :

  • Brief
  • Recherches
  • Propositions
  • Validation

Lors des mises en situation professionnelle ou TP, en fin de niveaux 2 et 3, le processus adopté est le suivant :

  • Brief
  • Planche de tendances
  • Recherches manuscrites et vectorielles
  • Validation
  • Planche de marque (charte graphique simplifiée)

Illustrer des produits de communication (niv. 3)

La mise en œuvre d’un projet de communication visuelle (création d’une mascotte, par exemple) suit les mêmes étapes que la création d’un logo. La dernière étape est remplacée par la livraison des éléments attendus pour l’impression ou la publication en ligne.

Les points abordés au niveau 3 dans le cadre d’un projet d’illustration de produits de communication se résument en 3 opérations dont les premières lettres forment l’acronyme MDR :

  • Modularisation (pour optimiser les déclinaisons)
  • Développement (pour diversifier les modes de publication)
  • Rationalisation (pour gagner globalement du temps)

Catégories
IMeP-DW

Questionnaires

Vous voici arrivés au bout de la formation et du ou des module(s) suivis dans le cadre du GRETA Clermont-Auvergne. Les questionnaires qui suivent concernent :

  • les formations Com-Créa (CC) et Fondamentaux de la Création de Site (FCS) dispensées dans le cadre de la préparation à la validation du Titre Pro IMeP ;
  • la formation Rédaction Web et Référencement Naturel (RWRN) et la formation à l’utilisation du framework w3.css (W3CSS), dispensées dans le cadre de la préparation à la validation du Titre Pro Designer Web.

Le but de ces questionnaires est de recueillir votre avis concernant les moyens déployés en ligne pour vous apporter le soutien documentaire nécessaire lors de votre formation professionnelle.
En effet, la forme des supports pédagogiques est en constante évolution et il me semble important de l’adapter aux besoins effectifs des apprenants, tout en prenant en compte les objectifs pédagogiques visés et ma propre conception de l’accompagnement digital en formation.

Je vous invite à répondre aux questionnaires en toute franchise, sans chercher à ménager ni votre formateur ni l’encadrement administratif. Soyez objectifs et factuels, cela permettra d’améliorer les cours en ligne en toute connaissance de causes.

Les champs marqués par un astérisque rouge doivent être obligatoirement remplis.

Lecture des cours (sondage)

Utilisation des cours (formulaire)


Catégories
CC3-cours Com-Créa

L’illustration modulaire

Dans ce cours, vous allez prendre connaissance des principes de l’illustration modulaire, de son potentiel et de ses limites.

Définir l’illustration modulaire

Dans le contexte de l’illustration et du graphisme, le principe de modularité correspond à la possibilité d’assembler des éléments graphiques simples (nommés modules) pour construire une image.

Illustration modulaire ornementale

Dans une approche ornementale, le module graphique est une forme simple, souvent géométrique, facile à juxtaposer dans les 2 dimensions du plan. Le plus souvent, le module s’inscrit dans un carré. Il peut cependant facilement s’inscrire dans un hexagone ou un triangle.

L’illustration modulaire ornementale n’est pas nécessairement répétitive, comme le sont les textures formées de motifs juxtaposés et répétés à l’infini.

Le dessin d’un module ornemental peut être abstrait ou figuratif. Sur la capture d’écran ci-dessous, la première composition est un assemblage de d’éléments figuratifs évoquant la nature.

Illustration modulaire ornementale programmée

Le principe de construction modulaire est facilement programmable. Il existe donc des applications permettant de construire automatiquement des images modulaires ornementales.

PatternPad permet de personnaliser de nombreux paramètres, même si la composition finale est mise au point de manière aléatoire. Cette application autorise le paramètrage de pourcentage d’occupation des motifs dans l’espace de composition. Les compositions sont exportables au format SVG (exploitable avec Adobe Illustrator).

Couverture aléatoire de motifs sur 50% de la grille de composition

Illustration modulaire figurative

Une illustration modulaire figurative ne s’inscrit pas nécessairement dans une grille. Les modules à assembler sont juxtaposés ou superposés pour former l’image voulue.

Personnages modulaires

Tous les personnages ci-dessous sont composés d’éléments modulables, à la manière des 2 personnages ci-dessus.

Source : https://www.humaaans.com/

On trouve de nombreuses ressources en ligne pour assembler des éléments dessinés en vue de composer des illustrations adaptées à différents besoins graphiques.

Illustration modulaire de cycliste

Décors isométriques

La composition par assemblage de modules permet, en remplissant certaines conditions, de simuler un espace en 3 dimensions. C’est notamment le cas de l’illustration isométrique dont le potentiel a été pleinement utilisé dans le secteur des jeux vidéos.

Faire varier le style d’une illustration modulaire

À partir du moment où vous disposez des éléments modulables avec lesquels vous envisagez de composer vos illustrations, vous pouvez faire varier le style de vos illustrations en jouant sur de nombreux paramètres.

Faire varier la surface et le trait

Des surfaces vectorielles pleines se transforment très facilement en formes linéaires dotées d’un contour. Cette simple opération modifie totalement la perception d’une image.

➜ En réduisant le nombre des couleurs et en alternant zones pleines et zones vides avec contours, on obtient des images différentes dont l’impact est souvent plus fort.

Les contours vectoriels sont stylisables et les surfaces peuvent être texturées ou ornées de motifs. L’utilisation d’un nombre de couleurs restreint renforce l’impact visuel et les contrastes d’une image.

Compositions modulaires en 2 couleurs (dont certaines avec dégradé linéaire)
Compositions modulaires texturées

Faire varier les contrastes

Une image modulaire est riche des contrastes qui l’animent. Dans l’illustration ci-dessus vous pouvez repérer plusieurs contrastes :

  • foncé (obscur) vs clair (lumineux)
  • coloré vs non-coloré
  • texturé (varié) vs non-texturé (uniforme)
  • grand vs petit
  • ligne vs point
  • surface vs trait
  • gras (épais) vs maigre (fin)
  • séparé vs associé
  • orthogonal vs incliné
  • rectiligne vs courbe
  • terrestre (lourd) vs aérien (léger)
  • etc.

➜ Je vous propose d’utiliser une check-liste interactive pour lister tous les contrastes utilisables en composition visuelle.

Voir des applications pour des identités visuelles

Mise en pratique

Une mise en pratique de l’illustration modulaire vous est proposée sur la page intitulée Illustrer un kit de communication.

Catégories
FCS FCS3-exos

Personnaliser le thème Massively

L’un des thèmes de Bludit les plus impactants visuellement, se nomme “Massively”. Il s’agit d’un thème adapté pour le CMS Bludit mais qui, initialement, a été créé par HTML5UP sous la forme d’un site statique HTML-CSS.

➜ Pour ce cours, je vous invite à activer Massively sur votre site Bludit. Vous allez ensuite apprendre à le personnaliser pour créer soit votre portfolio, soit une maquette de site pour le client pour lequel vous avez déjà travaillé lors du TP2.

Vous pourrez mentionner ce site dans votre portfolio, preuve de votre maîtrise de la publication en ligne à l’aide d’un système de gestion de contenus (CCP-3 du Titre Pro IMeP).

Analyser le thème Massively

Identifier les qualités de Massively

L’ambiance générale de votre site reposera essentiellement sur l’image de fond et sur la qualité des images d’accroche que vous associerez à chacun de vos articles.

L’image de fond, disposée en arrière plan, permet de plonger d’emblée le lecteur dans une atmosphère prégnante. En la choisissant avec soin, il est possible de créer un site extrêmement séduisant !

Le thème Massively affiche les pages dynamiques en mettant en avant l’image d’accroche de chaque article. Cette image s’accroche est associée à un lien vers l’article concerné. Le lien vers le dernier article publié occupe toute la largeur de la page d’accueil, avec son image d’accroche bien visible, sous le menu. Les liens vers les autres articles se répartissent sur une grille de 2 colonnes, sous le dernier article publié (ou l’article épinglé…).

Une couleur de focus est visible au survol des boutons et des titres d’article. Cette couleur de focus doit permettre la lisibilité des textes sur fond sombre (l’image de fond) et sur blanc (contenant des articles). Cette couleur et l’image de fond fondent le style visuel d’un site utilisant le thème Massively.

La couleur affichée au survol des titres (bleu #18bfef par défaut) pourra être modifiée en fonction de la charte graphique (ou planche de marque) du client.

Une des qualités cachées de Massively est le potentiel de sa feuille de style. Il est en effet possible d’insérer dans les pages des éléments typographiques et iconographiques stylisés nativement en plein accord avec le look du thème.

➜ Il sera nécessaire d’explorer le potentiel de cette feuille de style native pour appliquer ces styles sur les sites construits avec Bludit. Le sujet sera développé plus bas.

Identifier les défauts du thème

Massively présente toutefois des défaut, notamment concernant les réglages adaptatifs (responsives, en anglais…). En effet, ces réglages ne permettent pas, par défaut, de voir entièrement les images insérées dans les pages statiques ou dans les articles quand on navigue sur petit écran. Une solution a cependant été trouvée. Il en sera question dans le cours.

L’intitulé du premier onglet, “Page d’accueil”, ne semble pas modifiable dans les réglages du tableau de bord de Bludit. C’est en effet une caractéristique du thème qu’il faut modifier dans le fichier de traduction. Cet intitulé peut ne pas vous satisfaire pleinement. Sans doute le simple mot “Accueil” serait-il préférable.

Vous allez apprendre à corriger ces défaut et à personnaliser le thème en profondeur tout au long de ce cours.

Personnaliser l’image de fond

Comme nous venons de le voir, l’impact visuel de ce thème repose sur l’image utilisée en fond de page.

Choisir une image fonctionnelle

Elle devra être choisie avec soin et recadrée de manière à laisser voir en haut de l’image ce qui servira d’arrière-plan au titre du site.

Si vous choisissez une image très claire, il sera nécessaire de modifier la couleur d’affichage du titre (en blanc par défaut). Sur un fond photographique, seules deux couleurs sont utilisables : le blanc (sur photos claires) ou le noir (sur photos sombre).

L’image d’arrière plan du thème Massively se nomme “bg.jpg”. Elle fait 1680 x 2000 pixels. Pour en faciliter l’affichage, il est impératif de la compresser de manière à ce qu’elle soit la plus légère possible. Un enregistrement pour le Web, à partir de Photoshop, avec une compression JPEG moyenne, devrait être optimale.

Comment remplacer l’image de fond

Veillez à donner à votre nouvelle image le même nom que celui de l’image d’origine. Remplacez l’image originale nommée bg.jpeg par celle que vous souhaitez utiliser.

Voici dans quel dossier il faut remplacer l’image d’origine par celle de votre choix : `dossier-du-site/bl-themes/massively/images/`

Pour visualiser le changement d’image de fond, il est souvent nécessaire d’effacer les images placées en cache (mémoire temporaire) dans votre navigateur. Avec Chrome, cochez juste “Images et fichiers en cache” dans “Effacer les données de navigation”.

➜ Notez à quel point le changement d’image de fond modifie totalement la perception de la page 😉

Positionner une image d’accroche

Optimiser l’effet produit par la première image d’accroche

Pour accentuer cet effet d’immersion, je vous propose d’illustrer la page “À propos” en choisissant comme image d’accroche une partie de l’image de fond.

Source de l’image utilisée : https://littlevisuals.co/

Vous pouvez envisager de superposer le logo de votre client à cette image d’accroche pour indiquer clairement le lien entre la marque et le contexte visuel de sa présentation.

Épingler un article et modifier sa description

Bludit vous offre la possibilité d’épingler un article en tête de la liste des articles publiés. Sur la page d’accueil, celui-ci est alors présenté en premier, même si d’autres articles sont publiés après. Cela vous permet de mettre en avant un contenu clé, que les lecteurs verront d’emblée en arrivant sur la page d’accueil.

Dans notre cas, je vous propose d’épingler l’article dont l’image d’accroche est une reprise de l’image de fond (avec ou sans logo superposé).

➜ Profitez-en pour compléter la description de cet article. Dans Massively, celle-ci s’affiche sous le titre de l’article (en italique et en gris clair). Cette description sert d’accroche ou de châpo pour inciter le lecteur à lire l’article. Elle est utilisée comme extrait par les moteurs de recherche, il est donc recommandé de placer le mot clé de la page au début de la description.

Copier et coller du texte

Identifier le problème des textes collés

Quand on réalise un site à l’aide d’un CMS, il arrive qu’au lieu de saisir le texte directement dans l’éditeur de texte du CMS, on aille récupérer du texte sur un document existant. Se pose alors un problème agaçant : en collant le texte copié, on s’aperçoit que ce texte ne s’affiche pas sur le site comme les autres textes saisis directement.

Cela vient du fait qu’en copiant le texte dans le presse-papier, vous avez copié aussi les styles CSS associés au texte. Vous pouvez vous en rendre compte en activant la fenêtre d’édition HTML de l’éditeur de Bludit (cliquez sur le bouton <>, à droite de la barre d’outils). Vous verrez alors les styles CSS associés au texte collé.

Convertir le texte copié en texte brut

La solution au problème posé consiste à convertir le texte copié en texte brut en utilisant un éditeur de texte comme TextEdit (sur mac) ou Notepad (sur PC). Collez le texte dans un nouveau document et convertissez-le au format Texte (.txt).

Conversion d’un texte avec TextEdit, sur macOs (le texte surligné n’est pas converti)

Utiliser du texte brut

Pour rectifier les problèmes rencontrés dans Bludit, il faut effacer le code comprenant les styles, revenir en mode d’édition visuelle et coller dans le champ de saisie le texte converti préalablement au format Texte.

➜ Pour éviter ces manipulations, les développeurs saississent directement leurs articles en texte brut, directement dans leur éditeur de code favori.

Modifier la couleur de survol des titres

Si la couleur de survol à utiliser n’est pas déjà identifiée dans une charte graphique, vous devez la déterminer en fonction de la symbolique du thème traité. Vous devez surtout veiller à ce que cette couleur autorise la lecture des textes sur fond sombre ou sur fond clair.

Choisir une couleur de valeur moyenne

Le moyen le plus simple pour sélectionner une couleur de valeur moyenne est d’utiliser le site hsluv.org. En effet, le sélecteur de couleur s’ouvre par défaut sur un rouge avec une luminosité de 50%. Il suffit donc de déplacer le petit cercle blanc situé sur le côté droit du trapèze des couleurs pour modifier la teinte et la saturation de la couleur recherchée.

D’autres priorités que l’optimisation du contraste de luminosité peuvent vous amener à choisir des couleurs plus claires ou plus foncées. Veillez toutefois à ce que le ratio de contraste sur le blanc ou le noir soit au moins supérieur à 3 (norme d’accessibilité AA-Large).

Modifier le fichier CSS du thème

➜ Pour appliquer cette couleur aux liens du site il est nécessaire de modifier le fichier main.css (la principale feuille de style du thème) qui se trouve dans dossier-du-site/bl-themes/massively/assets/css.

Modifiez le fichier “main.css” avec un éditeur de code (Bracket), après l’avoir téléchargé sur votre poste de travail. Après modification il sera nécessaire de remplacer le fichier “main.css” situé sur le serveur. Vous utiliserez pour cela un client FTP (Filezilla).

Recharger les CSS de la page active

Pour que votre modification s’affiche sur la page de votre site il sera sans doute nécessaire de recharger les feuilles de style de la page active, dans votre navigateur. L’extension de Chrome “Web developer” permet cette manipulation.

Cette opération est à renouveller, dans un premier temps, chaque fois que vous allez sur une nouvelle page. Pensez-y car sinon vous douterez d’avoir effectué correctement les changements indiqués ! On peut aussi vérifier que nos modifications sont opérantes en changeant provisoirement de navigateur.

Veiller aux intitulés de pages statiques

Utiliser des titres courts

Le paramétrage d’une page en page statique sort la page en question du flux des pages dynamiques. Cette page n’est plus considérée par le CMS comme faisant partie du blog. Bludit utilise le titre des pages statiques pour l’insérer dans le menu principal (afin que l’utilisateur accède à cette page).

Si vous utiliser un titre long, l’onglet du menu affichera le titre en entier et cela posera vite un problème d’ergonomie si vous avez plusieurs pages statiques. Bludit, et le thème massively montrent ici leurs limites. À moins de trouver une astuce pour modifier les intitulés des onglets, il vaut mieux donner à ses pages statiques des titres courts 😉

Notez qu’il est possible de réécrire les URL d’une page dans les options de la page. Cela ne modifie pas pour autant le nom des pages du menu.

Modifier l’intitulé “Page d’accueil”

Comme nous l’avons mentionné plus haut, l’impossibilité de changer l’intitulé de la page des articles en utilisant le tableau de bord de Bludit peut être perçu comme un défaut du thème… ou du CMS.

➜ Cette modification est cependant possible en modifiant le fichier de traduction du CMS. Ce fichier est nommé fr_FR.json et il est placé dans dossier-du-site/langages. Vous pouvez le modifier en utilisant Brakets.

Personnaliser le thème Massively (niveau avancé)

La feuille de style de Massively, non minifiée, fait 4653 lignes ! Il y a dans cette feuille de style des instructions nombreuses pour styliser toutes sortes de contenus.

Consulter les pages de démonstration

➜ La première chose à faire pour se rendre compte de ce qu’il est possible de faire est de consulter la page intitulée Elements reference sur la démo du thème Massively proposée par HTML5-up.

J’en propose une adaptation provisoire en français réalisée rapidement dans Bludit, sur mon compte de démo Alwaysdata.

Vous allez découvrir que Massively permet l’usage d’une grille adaptative, qu’il propose une classe pour améliorer le comportement des images sur petits écrans, qu’il met à notre disposition des boutons de toutes sortes, qu’il autorise l’usage des icônes de FontAwesome, … et plein d’autres choses !

Images en grille avec gouttières et habillage avec marges confortables

Examiner le code source des pages de démo

La prise en main d’un thème passe inévitablement par l’examen du code source des pages de démonstration. Il s’agit de repérer quelles sont les classes utilisées et à quelles balises elles ont été attribuées.

L’application des classes ne peut se faire, avec Bludit, qu’en modifiant le code source dans la fenêtre d’édition du code HTML.

Pour y voir plus clair et profiter de la colorisation du code dans Brakets, je vous propose de copier le code source de ma page de démonstration et de le coller dans une nouvelle page créée avec Brackets.

Code source de ma page de démonstration

Vous pouvez aussi demander à votre navigateur d’afficher le code source de la page…

Résoudre le problème d’affichage “responsive” des images

Massively dispose de 2 classes qui, utilisées simultanément, permettent l’affichage correcte des images sur tous les écrans. Il s’agit des classes « image » et « fit ».

Pour qu’une image devienne “responsive”, il est donc nécessaire de lui attribuer, directement dans le code source (via l’éditeur de page de Bludit) les classes « image » et « fit ».

Le code à insérer dans chaque balise <img>, entre “img” et “src”, est le suivant : class="image fit"

Changer l’ordre des onglets du menu

Le titre des pages statiques est automatiquement utilisé en tant qu’intitulé d’onglet dans le menu du site. L’ordre des pages peut être modifié en attribuant une position à chacune d’entre elles. Pour cela, il suffit de paramétrer le champ “Position” dans les options de la page (onglet “avancé”).

Modifier les icônes des réseaux sociaux dans le menu du site

Pour modifier les icônes de lien vers les réseaux sociaux, il est nécessaire de se rendre dans les réglages généraux du site. Personnalisez les adresses des différents réseaux proposés. L’icône du réseau disposant d’une adresse valide s’affichera automatiquement.

Il manque la plateforme Pinterest dans la liste des réseaux proposé par Bludit et Massively.

Transformer des liens en boutons

Comme cela est suggéré sur la capture d’écran ci-dessus, l’attribution d’une classe « button » transforme un lien en bouton. En ajoutant d’autres classes il est possible de personnaliser l’apparence des boutons. Les classes disponibles pour cela sont :

  • « primary »
  • « fit »
  • « small »
  • « large »

En rajoutant les classes « icon » et « fa-icon-name » (remplacer « icon-name » par le nom de l’icone à afficher), il est possible d’intégrer une icône Font Awesome dans le bouton.

Personnaliser la page d’erreur 404

Dans Bludit, pour modifier la page d’erreur 404 (page not found), il est nécessaire de créer une nouvelle page statique puis, dans les réglages généraux, de la paramétrer pour qu’elle devienne la page d’erreur de navigation du site.

Un problème surgit cependant dans la version 3 du CMS : cette nouvelle page statique apparaît dans le menu et Bludit 3 ne permet pas de masquer une page dans le menu via le tableau de bord.

Une astuce consiste à paramétrer cette page en tant que brouillon. Pour cela il suffit de cliquer sur “PUBLICATION”, à droite du bouton “Aperçu”, en tête de la page d’édition. Le mot “BROUILLON” s’affiche alors (voir ci-dessous).

Personnaliser davantage le thème Massively (niveau expert)

Utiliser les classes incluses dans les CSS du thème pour afficher une grille

Le thème Massively prévoit l’utilisation d’une grille Flexbox basée sur 12 colonnes. Plusieurs largeurs de fenêtre de navigation (avec points de ruptures correspondants) sont envisagées :

  • xlarge (entre 1141 px et 1680 px)
  • large (entre 981 et 1140 px)
  • medium (entre 737 et 980 px)
  • small (entre 481 et 736 px)
  • xsmall (entre 321 et 480 px)
  • xxsmall (entre 0 et 320 px)

Chaque rangée apparente (row) est constituée de 12 colonnes. Les colonnes de la grille sont paramétrées pour occuper autant de colonne que nécessaire (col-1 à col-12).

Les concepteurs du thème proposent de créer des grille en paramétrant une seule rangée globale puis de créer des rangées apparentes en utilisant le code suivant : <!-- break -->.

Voici un exemple de code pour mettre en place une grille de 2 rangées apparentes de 2 et 3 colonnes. Ce dimensionnement est valable sur tous les écrans sauf sur les petits écrans où chaque colonne est paramétrée pour occuper toute la place disponible (col-12-small).

<div class="row gtr-150 gtr-uniform" style="line-height: 1.4; min-height: 100px;">
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 1re colonne 50% (100% sur petits écrans)</p>
</div>
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 2e colonne 50% (100% sur petits écrans)</p>
</div>
<!-- break -->
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 1re colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 2e colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 3e colonne 33,33% (100% sur petits écrans)</p>
</div>
</div>

➜ Vous pouvez visualisez cette grille à cette adresse : http://comptetestfpw.alwaysdata.net/bludit-massively/grilles-responsives#main

Les classes contenant l’expression gtr concernent le paramétrage des gouttières (gutters, en anglais). Les largeurs de gouttières disponibles s’étagent ainsi : gtr-0, gtr-25, gtr-50, gtr-150 et gtr-200.

Intégrer la feuille de style imagehover.css (niveau expert)

Pour créer des effets de transition au survol des images afin de permettre la lecture de textes sur fond coloré, il est nécessaire d’intégrer la feuille de style imagehover.css dans les css du thème.

Pour cela, il faut placer la feuille de style “imagehover.css” dans le dossier “css” de Massively (à l’intérieur du dossier “assets”). Il faut ensuite modifier le fichier “index.php” du thème pour qu’il prenne en compte la nouvelle feuille de style.

D’autres modifications sont nécessaires pour éviter l’affichage d’un bandeau gris clair sous les images animées. Il faut supprimer dans “main.css” les instructions liées aux classes “image” et “fit” demandant une marge supérieure et inférieure en grande et moyenne largeur. Il est ensuite nécessaire de modifier (toujours dans “main.css”…) le paramétrage des marges sur les paragraphes en choisissant margin: 1rem 0; plutôt que margin: 0 0 2rem 0; (ligne 270).

Catégories
FCIL FCIL-cours

Personnaliser un gabarit de portfolio HTML

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

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

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

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

Observer le gabarit de portfolio

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

Un site “onepage”

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

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

Une grille d’images

Fonctionnement de la grille d’images

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

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

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

Modifications envisageables ultérieurement pour la grille d’images

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

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

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

Un bouton d’appel à l’action

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

Des barres d’évaluation

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

Un pied de page ou “footer”

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

Personnaliser le portfolio

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

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

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

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

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

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

Récupérer les images à intégrer

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

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

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

Alléger les images à intégrer

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

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

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

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

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

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

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

Ajouter une balise title

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

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

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

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

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

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

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

Remplacer le texte de maquettage

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

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

Le fichier textes-rubriques.md ouvert dans Brackets

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

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

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

Personnaliser le bouton CTA

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

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

Personnaliser les barres d’évaluation

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

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

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

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

Expliquer ses choix

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

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

Compléter le pied de site (footer)

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

Transmettre le dossier du site

Utiliser une clé USB

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

Utiliser WeTransfer (option facultative)

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


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

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

Catégories
FCS FCS2-exos

La toolbox du niveau 2

Voici une sélection d’outils et de sites conçus pour faciliter l’édition pour le Web. Vous trouverez ci-dessous des ressources utiles en matière de création de site, pour le maquettage et la finalisation de vos portfolios.

Éditeurs de code en ligne

repl.it : éditeur de code à la manière de BRACKETS.

htmleditor.online : éditeur de code WYSIWYG.

Apprentissage HTML CSS et frameworks

w3schools.com : site norvégien d’apprentissage de HTML, CSS, W3.CSS, BOOTSTRAP et plusieurs autres langages.

w3docs : site de tutoriels HTML et CSS (et plusieurs autres langages)… en français.

Faux texte

loripsum.net : générateur de faux texte avec nombreux paramétrages.

quackit.com : « dummy text generator » simple et efficace.

Fausses et vraies images de maquette

placeholder.com : des images de zoning (aplat gris ou coloré), avec texte personnalisable.

picsum.photos : de vraies images intégrables à toutes les dimensions souhaitées.

Icônes Web

flaticon.com : une immense banque d’icônes téléchargeables aux formats svg, png ou jpeg.

fontawesome.com/v4.7.0 : toutes les icônes utilisées dans les gabarits w3.css.

Images libres de droits

pexels.com : une banque d’images rassemblant les images de plusieurs banques d’images gratuites.

freepik.com : une banque d’images vectorielle très riche (avec des icônes et des photos en bonus).

Pour accéder à davantage de ressources iconographiques, consultez le site https://y-goguely.netboard.me/banquesdimages/

Montage photos et illustrations

Photo Creator : outil de montage photo réaliste intuitif et très performant (contenus des montages mis à disposition).

Vector Creator : outil de montage d’illustrations dessinées très stylisées (contenus stylisés mis à disposition).

Autres ressources pour l’édition Web

Pour accéder à davantage de ressources pour l’édition en ligne, consultez le site https://y-goguely.netboard.me/publicationenligne/?tab=176628#

Catégories
CC2-cours Com-Créa

Récap’ avec Balo

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

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

Les 10 règles de base

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

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

Le design de logo

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

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

➜ Brief, documentation et moodboard

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

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

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

➜ Rebond et nouvelles propositions au client

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

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

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

➜ Les maquettes du menu et du site Web

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