Catégories
FCS FCS1-cours

Personnaliser un gabarit de site HTML-CSS

Nous avons utilisé StackEdit (➞ voir ce cours) pour rédiger un texte tenant compte des contraintes du référencement naturel (➞ voir ce TD). Voyons maintenant comment donner une forme attrayante à notre travail. Nous allons intégrer le texte structuré dans un gabarit de site responsive.

Les gabarits responsives

Vous trouverez sans aucun doute des centaines de gabarits responsives sur Internet. Il est très probable qu’ils soient stylisés en faisant appel au framework Bootstrap. Or, à ce stade de votre formation, vous ne maîtrisez pas encore cette boîte à outil !

Il existe pourtant quelques gabarits HTML5-CSS3 utilisables par des débutants. Je me suis inspiré de quelques uns d’entre eux pour bâtir plusieurs gabarits de site one page (ils sont présentés sans index récapitulatif). Je vous propose de les télécharger et de les examiner d’un peu plus près.

Vous constaterez qu’ils n’utilisent pas de code JavaScript. Ils ont tous été optimisés pour l’affichage sur mobiles. Certains gabarits s’adaptent mieux que d’autres aux petits écrans. Les versions “bis” sont un peu plus complexes que les version sur lesquelles elles se basent.

Utiliser les fonctions d’affichage “responsive” de votre navigateur pour tester le rendu de chaque gabarit pour différentes largeurs de fenêtre du navigateur.

Affichez le code source, examinez-le avec attention. Dans la fenêtre affichant le code source, cliquez sur le lien menant à la feuille de style. Parcourez-là pour repérer l’articulation entre la feuille de style CSS et le fichier HTML. Notez que les feuilles de style sont partiellement commentées.

Les feuilles de syles CSS listent des instructions qui s’appliquent aux éléments HTML. Pour mieux comprendre les procédés utilisés dans les feuilles de style des gabarits, je vous invite à visionner cette vidéo qui explique comment fonctionnent les feuilles de style externes.

Préparer le travail de personnalisation

Collecter ou créer des images

Choisissez le gabarit qui vous semble le mieux convenir à votre texte et à votre propos. Vous allez avoir besoin d’images pour remplacer celles que j’ai utilisées. N’hésitez pas à explorer les possibilités offertes par le site pexels.com pour trouver des images libres de droit.

Vous pouvez créer des illustrations thématiques adaptées à votre sujet en utilisant les services de Vector Creator. Vous pouvez aussi composer vos propres “photos” en faisant des montages grâce à Photo Creator.

Choisissez vos photos avec soin. Je vous recommande de veiller à l’unité des couleurs et du style sur l’ensemble de la page Web. Ne vous contentez pas de regrouper des photos sur le seul critère de leur rapport avec le sujet traité.

➜ Si vous ne trouvez pas assez de photos dans les mêmes teintes colorées, retouchez-les en utilisant Photoshop ou une application en ligne comme Pixlr-x.

Compresser les images

Rassemblez les images collectées dans un dossier de collecte que vous nommerez explicitement. Les images collectées dans les banques d’images sont généralement de grandes dimensions (plus de 5000 pixels de large) et peuvent peser plusieurs Mo.

L’image de bandeau dont vous avez besoin na pas besoin de dépasser 2000 pixels de large. Il est donc nécessaire que vous réduisiez la taille de vos images et par conséquent leur poids. Compressez vos images en jpg à 70% (7 sur une échelle de 1 à 10), elle ne pèseront plus que quelques centaines de Ko…

Placez dans le dossier “img” les seules images que vous envisagez de publier. Si vous placez davantage d’images dans ce dossier, le temps de faire votre choix, retirez ensuite celles que vous n’avez pas utilisées.

Sur le Web, on voyage léger !

Préparer un nuancier étagé

Vous allez modifier les couleurs utilisées dans les gabarits fournis. Vous allez donc devoir utiliser des couleurs dont le degré de luminosité autorise la superposition d’une couleur sur l’autre. Pensez au confort oculaire de vos futurs lecteur !

L’application en ligne Coolors vous aidera à choisir vos couleurs. N’hésitez pas à lire ou relire le cours intitulé Créer des nuanciers fonctionnels avec Coolors.

Choisir des polices de caractères

Le moment venu, vous aurez sans doute besoin de changer la police de caractères utilisée pour le titrage dans les gabarits. Les polices de Google Fonts sont une aubaine pour les créateurs débutants !

Pour vous aider dans votre choix, je vous invite à vous rendre sur fontpair.co. Et si vous ne trouvez pas votre bonheur, vous pouvez toujours utiliser un des outils proposés sur la page Typography resources.

Intégrer le texte rédigé dans le gabarit

La personnalisation d’un gabarit nécessite souvent une intégration du texte titre par titre et paragraphe par paragraphe. Faute de quoi certaines parties du code implémentées dans le gabarit risquent de disparaître.

La démarche n’est pas la même que celle qui consiste à construire un site à partir de zéro (from scratch). Elle est aussi très différente de la méthode qui consiste à changer de feuille de style externe pour modifier l’apparence d’une page HTML.

L’avantage d’utiliser un éditeur markdown lors de la rédaction est de bénéficier à l’export d’un contenu proprement balisé. Cela facilite l’intégration des différentes parties du texte dans la structure du gabarit.

Remarques sur les balises <br>

Soyez vigilants sur la structuration du texte. Il se peut que le texte exporté depuis StackEdit comporte de nombreuses balises <br>. C’est souvent le résultat d’une erreur de saisie lors de la rédaction dans l’éditeur Markdown. Corrigez ce défaut lors de l’intégration et constituez des paragraphes courts, de taille homogène.

➜ Dans StackEdit, en Markdown, il faut sauter 2 lignes pour faire un saut de paragraphe. Un simple saut de ligne génère un saut de ligne dans le paragraphe (un <br>).

Conseils pratiques

Travaillez sur le bureau

Dans le cadre des salles du GRETA, sur le Pôle Plurimédia du lycée La Fayette, vous pouvez être tentés de modifier directement des fichiers placés sur votre session individuelle.

➜ Je vous recommande plutôt de copier le dossier du gabarit que vous avez l’intention de modifier sur le bureau de votre poste de travail.

Quand vous aurez terminé, vous sauvegarderez alors votre travail sur votre session (… et sur votre clé USB ou votre disque dur personnel).

Personnaliser le gabarit

Vous pouvez modifier la feuille de style CSS pour personnaliser le gabarit utilisé. Il est ainsi possible de modifier les couleurs, la police de titrage et bien d’autres choses.

Soyez très prudents concernant des modifications touchant à la disposition des éléments dans la page (menu, têtière, contenu principal, etc.). Gardez à l’esprit que toute modification envisagée sur grand écran doit être répercutée sur petits écrans.

Des “media queries” se trouvent en fin de feuille de style. Elles permettent de spécifier précisément, à l’aide de nouvelles instructions CSS, comment doivent s’afficher les éléments HTML quand la fenêtre de navigation fait telle ou telle largeur. Toute la “responsivité” (capacité d’adaptation) du gabarit repose sur ces requêtes médias.

Recommandations

Ne vous lancez pas dans de grandes modifications du modèle choisi. Soignez plutôt vos images, vos couleurs et vos typos.

Pour neutraliser une instruction CSS utilisez la mise en commentaires plutôt que l’effacement de l’instruction. Cela facilitera le retour à la version originale. Les balises de mise en commentaire CSS sont /* et */.

➜ Si une tentative de modification de la feuille de style échoue, revenez à la version originale. Ne laissez pas des instructions inopérantes dans le code.

Modifications premières

Voici une série de modification faciles à mettre en œuvre. Une fois que vous les aurez faites, votre site devrait déjà avoir un look satisfaisant.

Nous verrons plus tard, en utilisant notamment la feuille de style w3.css, comment optimiser la présentation d’une page en insérant des diaporamas, des grilles de photos, des colonnes suplémentaires, etc.

Pour le moment, vous pouvez mettre en œuvre les modifications indiquées ci-dessous.

Choisir des mots “strong” (importants)

Cette modification concerne la structuration et la stylisation du texte en même temps. En effet, les lecteurs devraient pouvoir parcourir votre texte en lisant les seuls titres et les seuls mots en gras.

Les moteurs de recherche lisent votre texte de cette façon. Ils en déduisent la cohérence de votre propos en analysant le champ sémantique des mots importants et des titres.

C’est à vous d’indiquer aux moteurs de recherche et à vos lecteurs quels sont les mots importants. Pour cela, utilisez les balises <strong> et </strong> pour baliser chaque mot ou expression importante.

Quand on veut afficher en gras des mots qui ne sont pas importants , on utilise les balises <b> et </b>.

Changer l’image de fond du header

Sur les gabarits que je vous propose, l’image de la têtière est insérée dans le header via la feuille de style. Repérez dans la feuille de style les instructions de ce type, rattachées au header :

background-image: url(../css/img/nom-image-2000x500.jpg);
background-size: cover;

Pour que certains gabarits fonctionnent en ligne, l’appel de l’image a été modifié comme suit :

background-image: url(img/nom-image-2000x500.jpg);

Changez le nom de l’image utilisée par celui de l’image de votre choix. Utilisez une image de 2000 pixels de large et de la hauteur de votre choix.

➜ Pour optimiser le positionnement de l’image dans l’espace disponible, rajouter l’instruction CSS suivante :

background-position: center;

Suivant l’image que vous avez utilisée et son contexte d’affichage, vous pouvez donner à background-position les valeurs top, bottom, left ou right. Vous modifierez ainsi la manière dont l’image se positionne dans le cadre disponible.

Changer les couleurs utilisées

Pour changer les couleurs du gabarit, il faut repérer dans la feuille de style tous les endroits où un nom de couleur a été utilisé. Les formes de codage de la couleur utilisées dans les gabarits proposés sont la forme hexadécimale (#FFF, #FF00DD, #80F80F, etc.) et les formes rgb ou rgba (rgb(255, 255,255), rgba(255, 255, 0, 0.5), etc.).

➜ Vous trouverez rapidement les codes de couleurs insérés dans la feuille de style en utilisant la fonction “Rechercher” (cmd-F sur MacOs). Recherchez “#” ou ”rgb”, vous trouverez immédiatement les couleurs codées avec ces intitulés.

On peut aussi rechercher l’occurence “color” (… toujours en utilisant la fonction “Rechercher” dans Brackets). Le nom de la couleur choisie n’est pas très loin des expression comprenant cette occurence !

➜ Pensez à utiliser des couleurs aux valeurs étagées et ne multipliez pas le nombre des couleurs utilisées. Veillez au contraste entre le texte et le fond pour garantir à vos lecteurs une lisibilité optimale.

Accordez vos couleurs avec l’image de têtière utilisée. Votre site gagnera en unité et en harmonie.

Modifier la variable d’une couleur moyenne

Les feuilles de style CSS des gabarits dont le numéro de version se termine par la lettre c sont paramétrées de telle sorte que les couleurs puissent être modifiées en une seule fois.

Pour cela, des variables de couleur sont définies en tête de feuille de style (exemple ci-dessous).

/* Déclaration des variables des couleurs appliquées sur la page */
:root {
--dark-color: #000;
--dark-grey: #333;
--medium-color: #307d9a;
--light-color: #fff;
--light-grey: #ddd;
}

Il s’agit de gris (clair et foncé), du noir, du blanc et d’une couleur moyenne choisie pour répondre à la norme d’accessibilité AA sur le noir et sur le blanc.

➜ Pour modifier la couleur moyenne dans tout le gabarit, il suffit de changer la valeur de --medium-color.

Changer la police de titrage

Les polices de titrages sont appelées depuis les serveurs de Google Fonts par la méthode @import, au tout début de la feuille de style.

Si vous n’avez jamais utilisé Google Fonts, je vous invite à regarder cette vidéo pour en apprendre davantage (durée : 16 min).

Ajouter des onglets au menu

En fonction de la structuration du contenu rédactionnel, vous pouvez être amenés à ajouter des onglets au menu du gabarit. Choisissez des intitulés courts en reprenant un terme du titre de la partie vers laquelle renvoie l’onglet.

Modifications non recommandées

Modifier l’alignement du texte

Le Web, avec la diversité des écrans de consultation des sites, supporte mal la justification des textes. Privilégiez l’alignement du texte à gauche et quand cela se justifie, utilisez l’alignement centré.

Habiller les photos avec le texte

Pour la même raison que celle évoquée plus haut, évitez d’habiller vos images avec du texte. Pour vous convaincre, examinez la manière dont votre texte se positionne à proximité de l’image sur les largeurs de fenêtre légèrement plus grandes que la largeur de l’image.

Un gabarit de site multipage

Seulement pour les apprenants de la formation Designer Web.

J’ai combiné plusieurs feuilles de style trouvées sur le Web pour composer un gabarit de site multipage. Les explications concernant sa mise en œuvre sont affichées dans le gabarit !

Concernant la mise en œuvre de Luxbar (la feuille de style utilisée dans ce gabarit pour l’insertion du menu…), vous trouverez des précisions sur la page intitulée Insertion d’un menu avec Luxbar.

Catégories
FCS FCS1-exos

Structuration et stylisation en 4 étapes

Cette série d’activités vous permet d’élaborer un site one page simple. Vous n’aurez pas à vous soucier de toutes les contraintes de la rédaction pour le Web. Il ne sera pas question de choix et de positionnement de mots clés. Il ne sera pas question d’optimisation des titres, de longueur des phrases, etc.

➜ Dans un premier temps il s’agit de produire ou collecter un texte en suivant une structure rédactionnelle simple.

➜ Dans un second temps, le texte produit est structuré en langage HTML. Il devient une page Web élémentaire, consultable à l’aide d’un navigateur.

La page HTML est ensuite stylisée en faisant appel à des instructions CSS simples. La page prend ainsi des couleurs, la typographie est plus originale et le futur site commence à se montrer sous un jour satisfaisant.

➜ Enfin, à la dernière étape, un menu est intégré en tête de la page Web stylisée, pour faciliter la navigation dans le texte (… et donc dans le site). Une feuille de style particulière est utilisée pour cela.

Liste des activités

Voici les activités correspondantes à ces 4 étapes.

Réaliser l’ensemble des activités proposées ici nécessite plusieurs journées de travail persévérant. Le résultat de vos efforts vous permettra d’envisager la mise en ligne une page Web du type de celle présentée ci-dessous.

Bon courage à tous 😉

Catégories
FCS FCS1-cours RWRN RWRN-exos

Rédiger une page Web en 10 étapes

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

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

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

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

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

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

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

Étape 1 – Collecter la documentation

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

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

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

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

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

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

Le plus simple pour réaliser cette étape est d’utiliser un éditeur de cartes heuristiques (ou cartes mentales, mind map en anglais).

Je vous propose d’utiliser l’application en ligne Text2MindMap. Celle-ci permet de saisir un texte indenté d’un côté et de visualiser une carte heuristique de l’autre côté, c’est d’une simplicité élémentaire !

XMind est aussi un bon outil en local, disponible sur toutes les plateformes (télécharger et installer XMind 2020 — Free download — via xmind.net). Une version d’XMind fonctionne en ligne, à condition d’être connecté à un espace cloud pour y enregistrer les données.

Il s’agit, en partant du sujet principal abordé, de déterminer dans un premier temps l’expression courte ou le mot clé de la page (le tronc de l’arbre). Notez qu’il s’agira des premiers mots de votre titre h1.

Ensuite, en explorant le champ lexical et sémantique du sujet, il s’agit de trouver et noter les expressions et mots clés voisins, en les regroupant par affinité. Vous obtiendrez ainsi un arbre (ou plutôt la ramure d’un arbre) plus ou moins étendu selon le temps que vous y consacrerez.

Le site rimesolides.com permet d’élargir le champ lexical d’un sujet.

En activant les préférences de Text2Mindmap, vous avez le choix entre 2 types de colorations de la carte. La première (Branch) met en évidence les expressions et mots issus d’une même branche. La seconde (Level) met en évidence les expressions et mots clés situés à un même niveau hiérarchique.

Anticiper le référencement naturel

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

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

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

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

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

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

Distinguer l’arbre et le plan

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

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

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

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

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

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

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

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

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

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

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

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

Poser une question pour trouver un plan

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

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

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

Étape 4 – Optimiser la rédaction des titres

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

Règle incontournable de référencement naturel

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

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

La loi de proximité

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

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

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

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

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

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

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

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

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

Étape 6 – Rédiger l’introduction

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

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

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

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

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

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

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

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

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

Étape 7 – Rédiger les paragraphes

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

Pensez SEO

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

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

Soyez concis et précis

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

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

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

Étape 8 – Tester la syntaxe avec un robot lecteur

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Annexe

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

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

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

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

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

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

Bonus

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

Voici un lien vers l’une de ces variantes :

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

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

Approfondir le sujet

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

Catégories
FCS FCS1-cours RWRN RWRN-cours

Utiliser StackEdit

Dans ce cours nous allons apprendre à utiliser le langage Markdown pour structurer un article destiné à la publication Web, en nous appuyant sur les fonctionnalité d’une application en ligne : StackEdit. Nous verrons aussi comment exporter au format HTML les contenus structurés avec StackEdit.

StackEdit est un éditeur Markdown en ligne ergonomique, facile à prendre en main et parfaitement adapté à la structuration de contenus textuels.

Ses fonctionnalités permettent (entre autres choses…) de publier des contenus directement sur les principales plateformes de blogging. Elles permettent aussi d’éditer les contenus des sites construits avec des CMS basés sur Markdown (Pico, Grav, etc)

Présentation de StackEdit

Le fichier immédiatement visible au lancement de l’application est un texte d’accueil en anglais (intitulé “Welcome”). Dans Chrome, un clic droit dans la zone des boutons de formatage du texte (bandeau noir) permet d’accéder à la traduction en français. Tout est expliqué… ou presque, et cela devient un peu compliqué vers la fin du document !

Nous disposons d’une fenêtre (ou zone) d’édition — à gauche — et d’une fenêtre (ou zone) de prévisualisation — à droite .

Les boutons placés entre les 2 zones verticales permettent de gérer l’affichage des différentes zones.

Les boutons situés en haut à gauche et en haut à droite permettent d’ouvrir des menus complémentaires. Le menu de gauche répertorie vos documents et celui de droite permet d’accéder à de nombreux sous-menus.

Test de codage Markdown

Je vous propose de coder en Markdown un texte très simple, dans un document que vous intitulerez “test”. Voici la première partie du texte à coder :

Rien de compliqué ! Il est vrai que le code Markdown en gris clair ne se voit pas très bien… Si vous ne parvenez pas à coder en Markdown en saisissant le bon code, vous pouvez toujours utiliser les boutons de la barre d’outils noire (ou barre de formatage, au dessus de la zone d’édition).

Si vous souhaitez voir une liste de toutes les balises Markdown pour mieux vous y retrouver (ou tester l’utilisation d’autres balises), cliquez sur le bouton avec le signe # (en haut à droite), puis cliquez sur l’onglet “Markdown cheat sheet”.

Pour ceux qui souhaitent aller un petit peu plus loin, voici la deuxième partie du texte à coder :

Saut de ligne et saut de paragraphe

Les éditeurs Markdown gèrent de manière très simple les sauts de ligne et les sauts de paragraphe. Cependant nos habitudes de traitement de texte nous amènent à répéter la même erreur.

En effet, avec StackEdit (et tout éditeur Markdown) il faut saisir 2 retours à la lignes (taper 2 fois sur la touche “entrée”) pour coder un saut de paragraphe. Un simple retour à la ligne code un saut de ligne (un <br> en HTML).

➜ Ce point est très important en matière de structuration rédactionnelle du texte pour le Web. En effet, pour ce type de publication, il convient de rédiger des paragraphes concis, traitant d’une seule idée à la fois. Évitez dans la mesure du possible les sauts de ligne au sein d’un même long paragraphe.

➜ Jetez un œil sur cet article du site audreytips.com et interrogez-vous sur ce qu’apporte le découpage en paragraphes courts (3 ou 4 phrases maximum).

Exporter le fichier test en .md

Vous savez baliser en Markdown des titres, des paragraphes, des listes à puces ou ordonnées, des citations… C’est super ! Il est grand temps maintenant de sauvegarder votre travail.

Le document saisi dans StackEdit est automatiquement sauvegardé dans notre navigateur. C’est cool mais pour plus de sûreté vous allez exporter sur votre bureau le fichier “test”, en utilisant le format markdown (extension .md).

➜ Un clic sur l’icône de StackEdit pour ouvrir les onglets supplémentaires… Ouvrez l’onglet “Import/export”. Choisissez “Export as Markdown” et nommez votre fichier selon les règles de nommage apprises 😉

Exporter le fichier en HTML

Le plus intéressant, avec StackEdit, c’est la qualité de l’export au format HTML. En effet, la plateforme propose plusieurs modalités d’exportation et le code généré par StackEdit est particulièrement propre.

L’exportation en HTML débute comme l’exportation en Markdown (icône de StackEdit et onglet “Import/export”). Cliquez ensuite sur l’onglet “Export as HTML”. Les recommandations concernant le nommage des fichiers exportés restent valables !

Parmi les options proposées à l’exportation, 2 d’entre elles nous intéressent plus particulièrement : l’option “Styled HTML” et l’option “Styled HTML with TOC”. TOC est l’acronyme de “Table Of Content” (table des matières ou sommaire…). En effet, ces deux options génèrent des pages HTML prêtes à la publication en ligne.

L’option par défaut “Plain HTML” génère une page HTML dans laquelle figure seulement le contenu du <body> (la structure à partir du <h1>). Une telle page est lisible en local par un navigateur mais elle ne contient aucune instruction CSS et n’est pas publiable en l’état. Cette option est cependant utilisable quand il s’agit de copier une partie du code pour le coller dans un gabarit de site, par exemple.

➜ Faites des tests d’exportation en HTML en utilisant les différents formats proposés. Examinez le rendu dans le navigateur des fichiers HTML et jetez un œil sur le code source.

Vous constaterez qu’avec les 2 options “Styled HTML” et Styled HTML with TOC”, la feuille de style utilisée n’est pas incorporée dans le fichier HTML mais appelée depuis le serveur de StackEdit.

Cela nous ouvre des perspectives de personnalisation de la page exportée. En effet, en modifiant le lien d’appel de la feuille de style, nous pourrons faire pointer ce lien vers un dossier “css” placé à la racine du fichier HTML (dans le même dossier que le fichier HTML) puis vers une feuille de style de notre choix (placée au préalable dans le dossier “css”).

L’export avec l’option “TOC” génère un fichier HTML incorporant une colonne latérale dans laquelle s’affiche un sommaire reprenant le titre de niveau 1 et les sous-titres de niveau h2 du texte structuré dans Stackedit.

StackEdit est donc aussi un éditeur de pages Web, très simple d’utilisation, permettant de générer des documents agréables à lire et diffusables sur toutes les plateformes (le format HTML est universel…).

Utiliser du HTML directement dans StackEdit

Importer un fichier HTML

StackEdit permet d’importer des fichiers HTML via l’onglet “Import/export ». Vous accédez à 2 boutons d’importation :

  • Import Markdown
  • Import HTML

Le second bouton permet de transformer automatiquement une page HTML en page Markdown.

Saisir du code HTML dans la fenêtre d’édition

Il est possible d’insérer des balises HTML dans le code Markdown. On peut ainsi compléter la structuration du texte en introduisant des commentaires dans le code ou intégrer des signes conventionnels augmentant l’accessibilité de la page Web.

On peut aussi anticiper la stylisation en insérant des espaces insécables entre les mots et les signes de ponctuation. On peut encore anticiper l’adaptativité aux écrans mobiles (ou entre les mots d’une expression qu’on voudrait voir toujours sur la même ligne).

Dans StackEdit, il n’est cependant pas possible d’utiliser l’élément <span> pour intégrer une instruction CSS en ligne (… inline style, en anglais), comme dans l’exemple ci-dessous.
<span style="color: red;">Texte en rouge</span>

D’autres éditeurs Markdown permettent l’utilisation des instructions css en ligne.

Lectures complémentaires

Un équipe de 3 rédacteurs en ligne présentent StackEdit sur leur blog : bibliotech.fr. La présentation des premières choses à savoir pour utiliser l’éditeur en ligne est abondamment illustrée (➜  cliquez sur les photos pour les voir en entier).

Une traduction en français du texte de bienvenue sur StackEdit (version 4) a été réalisée par Bruno Lesieur. Elle est disponible à cette adresse : https://blog.lesieur.name/stackeditio-l-editeur-markdown-en-ligne-par-excellence/ (suivez la flèche… et soyez indulgents si vous repérez des fautes d’orthographe).

Catégories
FCS1-exos

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

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

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

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

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

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

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

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

Comme vous avez déjà eu l’occasion d’utiliser l’éditeur de code Brackets, de manière intuitive, pour remplacer des textes aux endroits que je vous avez indiqués, vous êtes capables de réaliser cet exercice.

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

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

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

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

Je vous montre ci-dessous le diaporama intégrant quelques diapos complètes (la modification des dialogues déjà en place est facultative…) et les diapositives à compléter par vos soins. J’espère ainsi vous donner le ton du dialogue et des expressions utilisables pour effectuer votre travail.

Vous pouvez cependant choisir d’adopter un autre ton, mais il faudra alors adapter la rédaction des premières diapositives.

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

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

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

Astuce : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées.

4 – Utiliser l’éditeur de code Brackets pour récupérer du code personnalisable

Pour manipuler le code source d’une page Web (ou page HTML), je vous ai recommandé d’utiliser l’éditeur de code Brackets, téléchargeable gratuitement sur brackets.io.

Un cours sur la personnalisation de Brackets est disponible à cette adresse : http://graphizm.fr/greta/fcs/personnaliser-brackets/

Nous avons déjà utilisé Brackets pour modifier le rédactionnel d’une page Web (exercices de personnalisation des diaporamas construits avec BIG). Lors de ces exercices, nous avons focalisé notre attention sur les paragraphes (sur le texte qui devait s’afficher dans le navigateur).

Nous allons maintenant utiliser Brackets pour mettre en place une page Web simple, tout en gagnant du temps pour ne pas avoir à coder toutes les informations nécessaires. Pour cela, nous allons récupérer un code simple existant et le copier dans un nouveau fichier de code source créé avec Brackets.

En procédant par copier-coller, il est facile de créer une nouvelle page Web. Le tout est de savoir réaliser les opérations suivantes :

  • trouver une page Web avec un code source simple (voir plus bas)
  • afficher le code source de la page dans un navigateur
  • copier ce code source
  • ouvrir Brackets
  • créer un nouveau fichier dans Brackets
  • coller le code source copié précédemment dans le nouveau fichier créé dans Brackets
  • enregistrer le fichier en .html (en rajoutant soi-même l’extension) en le nommant de manière explicite (structure-elementaire.html, par exemple…).
  • ouvrir le fichier (double clic) pour l’afficher dans un navigateur

4a – Trouver des codes sources simples

Première opération listée : trouver une page Web avec un code source simple. Deux solutions s’offrent à nous. Soit on trouve des sites nous présentant directement le code à copier, soit on trouve de sites dont le code source (assez simple) peut être copié.

➜ Solution 1

On trouve des codes simples sur plusieurs sites mentionnés dans ce cours, notamment sur w3schools.com. Vous en trouverez également sur cette fiche : La structure HTML.

Sur ces sites, les codes sont présentés directement sur les pages ou dans des fenêtres spéciales accessibles en un clic. Il suffit alors de sélectionner le code affiché à tel ou tel endroit, de le copier, puis de le coller dans un nouveau fichier créé avec Brackets.

➜ Solution 2

Voici maintenant des pages construites avec des codes sources simples :

Le code source de ces pages n’est pas affiché dans la page. Il s’agit cette fois-ci du code source de la page elle-même. Il est donc nécessaire, pour le récupérer, de l’afficher au préalable dans le navigateur.

Pour afficher le code source d’une page Web ouverte dans le navigateur Chrome, allez dans Afficher > Options pour les développeurs > Code source.

Dans la plupart des navigateurs, un clic-droit puis “Afficher le code source de la page” s’avère très pratique.

Les raccourcis claviers pour afficher le code source dans un navigateur sont ctrl-U sur PC et cmd-alt-U sur Mac.

Kezako ?

Quand vous voyez dans le code source la suite de caractères &nbsp; vous êtes face à un espace insécable. Quand vous rencontrez &#8209; vous croisez le grand copain du premier, le tiret insécable !

4b – Récupération d’un code source

Je vous demandede récupérer le code source d’une des pages proposées plus haut (dans « trouver des codes sources simples… ») puis de placer ce code dans un nouveau fichier créé dans Brackets.

Pour rendre le contenu plus intéressant, je vous demande également de personnaliser le contenu rédactionnel du code source.

Vous pouvez remplacer les textes du code source par des textes choisis par vos soins (textes trouvés sur Wikipedia, par exemple, si vous ne vous sentez pas l’âme d’un rédacteur ou d’une rédactrice Web) !

Simplifiez les textes longs en retirant les phrases qui ne s’avèrent pas indispensables à la compréhension du message essentiel. Équilibrez la longueur des paragraphes. Respectez la structure rédactionnelle du modèle HTML choisi (h1 + p + h2 + p + p + h2 + p + p… par exemple)

Pour que tout se passe correctement il est indispensable, dans Brackets, de créer une nouvelle page (vide). Pour mémoire : menu Fichier > Nouveau (raccourci ctrl-N sous Windows et Linux, cmd-N sous MacOs). La page créée est appelée « sans-titre » mais elle n’existe pas vraiment tant qu’elle n’est pas enregistrée et que vous ne lui avez pas attribué d’extension.

Brackets ne dispose pas d’un format de fichier par défaut. C’est à vous de saisir, au moment de l’enregistrement, à la fin du nom de fichier, l’extension correspondant au langage de codage de votre page. Dans notre cas, l’extension sera .html !

Petite précision importante : pour nommer le fichier .html, comme pour les images, n’utilisez pas de majuscules (en début de nom de fichier), ni de lettres accentuée, ni d’espaces (remplacer les espaces par des tirets bas ou haut, tirets du 6 ou tirets du 8 sur PC).

N’utilisez pas de point avant celui qui sépare le nom du fichier de son extension (ni aucun autre symboles, mis à part les tirets, et surtout pas de slash ! )

Une chose est sûre, le résultat affiché dans le navigateur est minimaliste (aussi minimaliste que les pages nues dont je vous ai communiqué les liens un peu plus haut). Nous verrons (ou nous avons vu) dans un autre cours comment améliorer la présentation d’une page Web avec des instructions CSS. Pour le moment, l’important est la mise en place de la structure HTML et rédactionnelle de la page (ce n’est pas le look de la page…).

Si vous avez choisi un des fichiers proposés plus haut, toute l’information de la page est contenue dans le seul fichier .html que vous avez créé et nommé convenablement.

Easter eggs (œufs de Pâques)

Il y a un « easter egg » dans l’url des fichiers page-web-nue.html et page-pangrammes-nue.html… à vous de le découvrir 😀

Faites une recherche avec « easter egg informatique » si vous ne savez pas de quoi il s’agit. Ici, pour les fichiers que je vous ai indiqués, il ne s’agit pas de combinaison de touches mais de navigation…

Catégories
FCS FCS3-cours

Utiliser le CMS Bludit

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

Les prérequis sont les suivants :

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

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

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

Qu’est-ce qu’un CMS ?

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

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

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

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

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

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

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

Comment fonctionne Bludit ?

Dossier du CMS et serveurs

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

Blogs et sites, articles et pages

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

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

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

Pages dynamiques VS pages statiques

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

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

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

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

Les catégories et les thèmes

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

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

Se procurer et installer Bludit

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

La version disponible janvier 2021 est la 3.13.1

Transférer le dossier du CMS sur un serveur

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

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

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

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

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

Consulter la documentation de Bludit

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

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

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

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

Effectuer les premiers paramétrages

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

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

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

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

Utiliser le tableau de bord de Bludit

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

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

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

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

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

Modifier la traduction du tableau de bord (optionnel)

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

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

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

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

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

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

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

Publier des contenus avec Bludit

Publier des articles ou des pages

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

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

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

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

Editer des pages en Markdown

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

Publier des images

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

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

Personnaliser un site avec Bludit

Changer le thème par défaut

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

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

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

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

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

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

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

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

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

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

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

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

Explorer le potentiel d’un thème

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

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

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

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

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

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

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

Compléter la traduction d’un plugin

Traduire la mention “Home page”

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

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

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

Améliorer l’utilisation d’un plugin

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

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

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

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

Personnaliser un thème

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

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

Catégories
FCS FCS3-cours

Utiliser les services gratuits d’Alwaysdata

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

Nos besoins

Capacités d’hébergement

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

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

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

Base de données

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

Aide en ligne

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

Adresse du site

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

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

Créer un compte chez Alwaysdata

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

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

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

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

S’inscrire chez Alwaysdata

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

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

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

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

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

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

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

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

Il s’agit donc de noter les informations suivantes :

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

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

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

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

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

Rendez vous ensuite sur le cours Utiliser Filezilla.

Catégories
FCS FCS1-cours

Insertion d’un menu avec Luxbar

Pour finaliser la production d’un site simple créé à partir de la rédaction structurée d’un article, je vous propose maintenant d’insérer en tête de page un menu fixe.

Chacun dispose désormais d’un dossier de site dans lequel se trouvent :

  • le fichier index.html,
  • le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
  • le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)

➜ Pour insérer un menu fixe, nous allons utiliser l’application Web Luxbar. Celle-ci génère le code HTML dont nous avons besoin.

Préparation

Le code proposé par l’appli Luxbar est opérationnel dans la mesure ou la feuille de style correspondante est disponible dans le dossier du site.

➜ Il est donc nécessaire de télécharger la feuille de style “luxbar.css” puis de la placer dans le dossier “css” du site.

Paramétrer Luxbar

Il s’agit maintenant d’utiliser l’application Luxbar pour générer le code HTML du menu.

interface de l'application Luxbar

Inutile de télécharger l’appli Web (comme cela vous est proposé en début de page. Tous les réglages s’effectuent directement sur la page de l’application. Il suffit de cocher les options souhaitées. Quoiqu’il en soit, tout est modifiable dans le code ultérieurement.

Choix du nombre d’onglets

➜ Le nombre d’onglets dépend à priori du nombre de sous-titre h2, auquel il faut ajouter un onglet “Accueil”, pour revenir en haut de page quand on en a besoin.

Choix de la position du menu et de sa couleur

➜ Je vous invite à choisir la position “Fixed”. En effet, elle se révèle la plus intuitive et la plus pratique sur tous les écrans.

Sur la capture d’écran, j’ai coché “Fixed Bottom” pour des raisons pratiques de positionnement des commentaires 😉

Choix des modalités d’affichage dans la barre de navigation

➜ Choisissez ici les options qui vous conviennent le mieux.

L’option d’animation du hamburger concerne l’icône des 3 traits superposés qui s’affiche pour accéder au menu quand l’écran ou la fenêtre de navigation est de petite taille.

Paramétrer le code HTML du menu

Une fois les options choisies, l’application Luxbar vous propose de copier dans votre code source une série de lignes HTML (un bouton “Copy” apparait au survol du code).

➜ Copiez le code HTML proposé et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. Choisissez la balise <nav> à la place de la balise <header>.

Établir les liens avec la page dans le code du menu

Sur la capture d’écran précédente, j’indique que des changements doivent être effectués dans le code HTML du menu Luxbar. En effet, il s’agit d’établir un lien entre chaque onglet et l’endroit de la page vers lequel l’onglet est sensé pointer.

Pour installer proprement un menu Luxbar avec les styles que je vous ai proposé, il est nécessaire de procéder à des améliorations dans le code HTML et dans les CSS.

➜ Téléchargez les CSS adaptées et placez-les dans le dossier “css”. Ensuite, appelez celle qui vous convient via la balise <link>, dans le head de votre site.

➜ Mettez en place les bandeaux qui vont permettre aux titres <h2> de s’afficher sous la barre de menu. Positionnez ensuite les différents id (ancres de navigation) dans les <div class= »bandeau »> (voir l’exemple donné dans la capture d’écran précédente).

Pour que les feuilles de style adaptées au menu Luxbar puissent s’appliquer correctement à votre page HTML, il est nécessaire de créer de créer 2 boîtes (divisions) importantes :

  • une boite <main></main>
  • une boîte <footer></footer>

La boîte <main></main> englobera les contenus principaux (h1 – p – h2 – p – p – etc.). Dans notre cas, elle sera chapeautée par la boîte <nav></nav> contenant le menu et elle sera suivie de la boîte <footer></footer> contenant des informations annexes sur le site et ses contenus.


Je vous propose de télécharger un exemple de réalisation similaire pour voir quels sont précisément les attendus à ce stade des opérations 😉

Vous pouvez consulter le site exemple à cette adresse : http://graphizm.fr/fcs/exemples-realisations/pollution-numerique. Notez que ce site n’est pas optimisé pour le référencement naturel.

Catégories
FCS FCS1-cours

Stylisation après structuration

Dans ce cours, après avoir pris le temps de soigner la structuration d’un texte intégré dans une page HTML, nous allons appliquer à la page un style graphique (un look, un habillage, une apparence soignée…).

Préparatifs

➜ Pour réaliser l’exercice, nous allons établir un lien entre une feuille de style CSS et la page HTML que nous avons élaborée lors du cours précédent. Téléchargez les pages HTML sur lesquelles vous avez travaillées lors de la séance précédente.

La démarche que nous suivons vous amènera, pas à pas, à la mise en ligne d’une page Web optimisée pour la consultation en ligne sur tous les écrans. Le diaporama ci-dessous détaille la démarche complète.

Appuyez sur la touche J pour voir les vignettes de toutes les diapos, sur la touche P pour imprimer le diaporama et sur la touche T pour visionner le diaporama normalement

Le fichier HTML présenté sur la 5e diapositive est mis à votre disposition avec les fichiers HTML sans CSS à télécharger précédemment.

Compléter et faire valider son code

Nous devons nous assurer que le code que nous avons produit est conforme aux exigences du Web. Pour vérifier cela, nous utiliserons des extensions de Brackets, installées préalablement par nos soins. Il s’agit de :

  • Beautify
  • HTML Skeleton
  • Nu Markup Checker

Leur installation et leur prise en main sont présentées sur cette fiche de cours : Utiliser les extensions de Brackets. Il n’est pas nécessaire d’installer pour le moment l’extension “Open in browser” mentionnée en dernier sur la fiche.

Je rappelle qu’un cours assez bref, intitulé Personnaliser Brackets, est disponible sur ce site.

Je vous demande donc d’installer les 3 extensions mentionnées et d’en tester l’usage. Concernant HTML Skeleton, prenez bien la précaution d’ouvrir une nouvelle page avant de faire des tests !

➜ Je vous propose ensuite de nous retrouver en classe audio sur Zoom, pour faire un point sur l’usage de ces extensions. Je vous montrerai en partage d’écran ou sur de courtes vidéos comment utiliser ces extensions pour optimiser le code de vos pages HTML.

Nous verrons notamment :

  • Comment indenter rapidement le code source avec “Beautify”
  • Comment insérer la balise meta viewport avec “HTML Skeleton”
  • Comment repérer d’éventuels erreurs de codage avec “Nu Markup Checker”

Appliquer un style graphique déjà codé

Pour réaliser la suite du cours, vous avez besoin de télécharger un dossier intitulé « css », dans lequel se trouvent 4 feuilles de style déjà prêtes :

  • cursus.css
  • dark-one.css
  • light-one.css
  • simple.css

➜ Pensez à décompresser l’archive en .zip pour accéder aux feuilles de styles. Ne modifiez surtout pas le nom du dossier “css” et placez ce dossier dans un dossier nommé comme votre fichier HTML (“django” ou “bilbo” ou “rancoon” etc.) dans lequel se trouvera donc, l’un à côté de l’autre, le fichier “nom-de-fichier.html et le dossier “css”.

Pour appliquer ces styles à votre page il va être nécessaire de placer dans le <head> une instruction HTML qui va permettre au navigateur de savoir

  • que telle feuille de style doit être appliquée aux éléments HTML
  • où trouver cette feuille de style (dans le dossier “css”)

➜ Après avoir placé fichier HTML et dossier CSS dans un même dossier, vous allez donc intégrer la ligne de code ci-dessous, soit en la recopiant, soit en effectuant un copier-coller, soit en utilisant HTML Skeleton puis en complétant la ligne insérée.

Voici la ligne à insérer dans le <head>, sous le <title>, dans sa forme définitive (avec l’url de la feuille de style nommée « simple.css ») :

<link rel="stylesheet" href="css/simple.css">

➜ Le navigateur est averti par le code qu’il va devoir prendre en compte une ressource externe (<link>). Il est averti que cette ressource est une feuille de style (« stylesheet » = feuille de style, en anglais…) et le code lui indique où se trouve la feuille de style et comment elle se nomme (il n’est pas question qu’il tienne compte des feuilles de style voisines…).

➜ Voyez comment le navigateur affiche désormais votre page HTML…

Cela n’a plus rien à voir avec du texte en Times, noir sur fond blanc, collé à gauche de la fenêtre de navigation ! 😀

Changez maintenant le nom de la feuille de style en le remplaçant par celui d’une des 3 autres feuilles placées dans le dossier « css ». Observez les changements.

Vous comprenez maintenant pourquoi il est si important de bien structurer son texte dès le départ. En effet, il est possible de proposer des variantes de présentation, sans toucher au texte. Il suffit de changer ou modifier la feuille de style. Il y a la structure HTML d’un côté et la présentation CSS de l’autre. Ces deux types d’instructions sont pris en compte simultanément par le navigateur.

Le gros avantage de ce procédé est de pouvoir utiliser une même feuille de style pour des textes différents ou des styles différents pour un même texte… en modifiant une simple ligne de code ! 😉

Intégrer une des images collectées

Nous avons vu (à la fin du cours précédent) comment collecter et intégrer une image. Le moment est venu de placer les instructions HTML adéquates dans votre code source, pour que l’image de votre choix soit affichée dans le corps de la page. Je vous montre donc le code à placer à l’endroit qui vous semble le mieux adapté pour illustrer votre texte.

Placez le dossier « img » dans lequel vous avez placé vos images (cours précédent) dans le dossier qui contient déjà le fichier .html et de dossier « css ». Intégrez le code indiqué plus bas en indiquant le nom de l’image de votre choix à la place de « nom-image.jpg ».

<img src="img/nom-image.jpg" alt="Description du sujet de l'image à des personnes malvoyantes">

➜ Ce code indique au navigateur qu’il doit afficher une image (<img>). Il indique également au navigateur l’endroit où se trouve l’image (ici, dans le dossier « img » situé à la racine — à coté — du fichier HTML). Le texte alternatif est complété afin de remplir pleinement son rôle (voir la fin du cours précédent).

Observez alors le résultat dans la fenêtre de votre navigateur. Testez l’affichage en version mobile ou responsive (touche F12 dans Chrome…).

Capture d'écran de la stylisation d'une page HTML stylisée avec la feuille de style light-one.css

Changez de feuille de style (en modifiant le nom de la feuille appelée dans le <head>… Observez les changement de présentation dans votre navigateur !

Parvenus à ce stade, je vous invite à partager vos productions en commençant par renommer votre page HTML. Nommez-la “index.html”. Celle-ci sera la page d’accueil de votre futur site “one-page”. Ce site sera donc constitué du dossier contenant :

  • le fichier index.html,
  • le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
  • le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)

Compressez le dossier complet du futur site avant de le partager sur l’espace Slack de la formation.

Personnaliser les feuilles de style CSS

Pour vous faciliter la tâche, je vous ai préparé des feuilles de style prêtes à l’usage. Il se peut qu’elles ne vous satisfassent pas tout à fait et que vous ayez envie de les modifier. C’est tout à fait envisageable.

Pour faire cela, il va falloir apprendre à parler CSS. Comme pour le HTML, au début on y comprend pas grand chose et petit à petit on apprend à discerner les endroits où il est possible d’effectuer des modifications sans tout détruire.

Évidemment, vous allez parfois casser des feuilles de style… Ce n’est pas grave ! Cela ne va pas endommager votre navigateur ou votre éditeur de code, encore moins votre navigateur. Vous reviendrez en arrière, vous repartirez de votre point de départ et vous serez plus vigilants 😉

Changer les couleurs du site

Maintenant que nous disposons d’un dossier complet avec index, css et dossier d’images, nous ne parlerons plus de page HTML mais de site Web. Certes, le dossier du site n’est pas encore hébergé sur un serveur mais il s’agit bien d’un produit de communication destiné à la consultation avec un navigateur !

Les couleurs utilisées dans les feuilles de styles que je vous ai transmises ne vous plaisent pas forcément… Elles ont cependant été choisies pour fonctionner de manière optimale les unes avec les autres.

Nous allons envisager de modifier les couleurs utilisées dans la feuille de style nommée “dark-one.css”. Pour cela nous allons commencer par la dupliquer et par la renommer “dark-two.css”

En ouvrant le dossier de votre site dans Brackets et en ouvrant la feuille de style “dark-two.css”, vous remarquerez que j’ai indiqué en commentaire, en tête de fichier, les références des 3 couleurs utilisées dans la feuille de style “dark-one.css”. En survolant avec votre curseur le nom des couleurs, un aperçu de la couleur s’affiche dans un petit cadre.

Si vous cliquez sur le nom de la couleur et que vous tapez “cmd-E”, une fenêtre de paramétrage des couleurs s’ouvre dans Brackets et facilite grandement les changements à effectuer.

Vous constaterez que les 3 couleurs utilisées sont des variantes de teintes semblables ou analogues : une variante sombre, une variante moyenne et une variante claire. Pour modifier le nuancier, je vous propose de changer la teinte moyenne puis, à partir de cette teinte moyenne, de créer les variantes sombres et claires (une vidéo à ce sujet est disponible sur Slack).

Commencez par faire vos changements dans une duplication de la ligne de commentaires. Vous utiliserez ensuite la fonction “rechercher-remplacer” pour changer les mentions des couleurs dans toute la feuille de style.

Observez les changements de couleurs opérés. La couleur sombre est toujours la couleur de fond. La couleur claire est utilisée pour le texte. La mouleur moyenne met en valeur les titres,le chapô, les filets et les bordures du cadre de l’image.

En apprendre un peu plus sur les CSS

Voici quelques sites que je vous recommande pour débuter avec les CSS.

Catégories
FCS FCS1-cours

Structuration avant stylisation

Pour suivre ce cours, il est nécessaire d’avoir réalisé la dernière activité proposée sur la page Activités sur la structure HTML d’une page Web.

Dans ce cours nous allons apprendre à organiser les contenus d’une page HTML pour préparer leur stylisation. Pour cela nous allons utiliser deux structures rédactionnelles basées les 2 plans indiqués ci-dessous.

  • h1 – p – h2 – p – p – h2 – p – p – h2 – p – ul – p
  • h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p – h2 – p – ul – p

Nous allons utiliser des séparateurs pour isoler certains contenus et intégrer dans la page une citation, une liste de liens et des mots importants, afin d’enrichir le contenu de l’article. Nous verrons pour terminer comment intégrer une image.

Auparavant, nous allons détailler deux points importants :

  • les 4 composants de toute rédaction
  • les similitudes entre design “print” et design “hosted”

Les 4 composants de toute rédaction

Faisons le point sur le rôle central de la rédaction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.

La rédaction Web (et toute rédaction, en général) est la combinaison de 4 composants : une structure cohérente, un vocabulaire précis, une syntaxe pertinente et une juste orthographe.

Composants de la rédaction : structure, vocabulaire, syntaxe, orthographe.

Sur MapsOfMind, pour ramener la carte à une vue d’ensemble après avoir zoomé sur un des sujets : rafraîchir simplement la page . 😉

Lors de la création d’une page HTML simple, la structure rédactionnelle est mise en place en même temps que les balises de titrage (heading), de paragraphes et de listes. La structure de base sur laquelle vous avez travaillé jusqu’à maintenant était celle-ci :

  • h1 – p – h2 – p – p – h2 – p – p

Concernant le choix du vocabulaire, de la syntaxe et de l’orthographe, vous avez collecté sur le Web des textes que je vous ai invité à simplifier (ou à étayer…) pour coller davantage à la structure ci-dessus.

➜ Je vous recommande cependant de relire vos textes simplifiés et, si nécessaire, de modifier la syntaxe (l’ordre des mots ou des phrases).
➜Ajustez également le vocabulaire pour que les idées à transmettre soit clairement communiquées…
➜ Pour terminer, faites relire vos textes à des personnes compétentes si vous avez du mal à orthographier correctement vos textes.

Similitudes en design “printed” et “hosted”

Avant de vous demander de travailler sur la structuration du texte intégré dans votre page HTML, je voudrais revenir sur les opérations communes à la communication sur papier et la communication sur fenêtre de navigation. Je vais insister sur 3 points :

  • La structuration quelque soit le format
  • la stylisation pour montrer l’important
  • la coloration pour favoriser la lecture

Structurer quel que soit le format

Je mets en relation de similitude la communication imprimée (printed) et la communication hébergée (hosted). La première a pour support de lecture un support analogique de dimensions fixes (le plus souvent une feuille de papier). La seconde a pour support de lecture un support numérique de dimensions variables (la fenêtre d’un navigateur, affichée en plein écran ou non).

La page imprimée est structurée dans un format donné, une fois pour toutes, mais la page hébergée est structurée, une fois pour toutes, pour plusieurs dimensions d’affichage. 😉

Cela nous oblige, en design graphique (quel que soit le mode de publication), à concentrer nos efforts sur la structuration des informations. Nous devons veiller à ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de présentation au public.

S = DHO
(Structuration = découpage à chaud =
Découpage + Hiérarchisation + Ordonnancement)

La nécessité de structurer les contenus ou blocs d’informations, à l’échelle de la page entière ou des différentes parties de la page n’est pas le seul point commun entre le design pour l’imprimé et le design pour l’hébergé.

Styliser pour montrer l’important

La stylisation est la modification des formes et des couleurs du contenu d’une page pour rendre la communication plus efficace (et non principalement plus belle…). il s’agit de mettre en évidence ce qui est le plus important.

En design graphique, cela se traduit très rapidement par le choix d’un nuancier de couleurs et d’une combinaison typographique, tous deux fonctionnels. Cependant, les concepteurs des navigateurs n’ont pas jugé utile d’aller plus loin que la mise en place de styles graphiques très simples (styles par défaut des navigateurs). Ils laissent aux designers graphiques le soin d’assurer toute la stylisation supplémentaire voulue, en fonction des contextes des projets de publication.

Les styles par défaut des navigateurs

Les navigateurs disposent de styles graphiques par défaut. Ces styles, très simples, permettent de visualiser les choix structurels effectués.

Les deux couleurs utilisées sont le noir et le blanc. Noir pour les textes et blanc pour l’arrière plan. La famille typographique utilisée par défaut est le Times, utilisée en 4 fontes (Regular, Bold, Italic et Bold italic).

Les titres de niveau 1 sont présentés avec une force de corps plus importante que les titres de niveau 2. Il en est de même pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. Tous les titres sont en caractères gras (Bold) et tous les paragraphes sont affichés en caractères normaux (Regular)

Notez qu’en design pour le Web, la graisse d’un caractère est indiquée par un nombre allant de 100 à 900. Un caractère normal (Regular) a une graisse de 400, un caractère gras (Bold) a une graisse de 700.

UTILISER L’EXTENSION WHATFONT

Pour analyser les polices de caractères d’une page Web, je vous recommande l’utilisation de l’extension Whatfont. Même s’il est possible d’inspecter les polices de caractères avec les outils de développement de Chrome (Afficher > Options pour les développeurs > Outils de développement), l’extension WhatFont offre quelques avantages (voir ci-dessous)

Désactiver les CSS dans Chrome

➜ Ayant finalisé la rédaction de vos textes intégrés dans une page HTML, pouvez-vous percevoir la structuration de vos contenus rédactionnels (titres, sous-titres, paragraphes), en l’absence de toute stylisation CSS ?

Pour désactiver l’affichage des styles d’une page Web, dans le navigateur Chrome (recommandé dans le cadre de ce cours), je vous recommande l’installation de l’extension Web Developper.

Capture d'écran du menu CSS de l'extension Web Developer pour Chrome.

En cliquant sur “Disable All Styles”, vous désactivez les CSS de la page consultées. En cliquant également sur “Disable Browser Default Styles”, vous désactivez les feuilles de styles par défaut appliquées par le navigateur.

Évaluer la perception de la structure sans stylisation

Le résultat est un affichage des contenus sous leur forme la moins sophistiquée qui soit. Dans ce cas, pouvez-vous affirmer que le plan rédactionnel est visible et que le message transmis est clairement compréhensible ? Si c’est le cas, c’est que la structuration (DHO) est bonne !

Vous constaterez visuellement qu’il est plus facile de percevoir la structure d’un texte lorsque ce texte est présenté (ou affiché) sur une petite largeur que sur une grande largeur.

Pour vous en rendre compte, quand vous êtes dans Chrome, appuyez sur la touche F12 de votre clavier (ou menu Afficher > Options pour les développeurs > Outils de développement) puis sur le bouton de simulation d’affichage sur mobile (Toggle device toolbar). Veillez à ce que le réglage de votre fenêtre de simulation soit réglée sur “Responsive” et actionnez la poignée de réglage de la largeur de l’affichage.

Capture d'écran de la fenêtre  d'inspection des éléments à l'aide des outils de développement de Chrome.

Coloriser pour favoriser la lecture

Nous avons vu quelle était l’importance du contraste de valeurs en design graphique, en particulier dans la communication imprimée. Voir pour rappel le cours intitulé Les couleurs en design graphique.

Dans la communication hébergée, la question du contraste des couleurs est centrale ! Il existe même des normes d’accessibilité très contraignantes imposant des ratios de contraste très élevés. La norme AAA, par exemple, permet difficilement d’utiliser plus de 2 couleurs pouvant être appliquées à des textes de taille inférieure à 14 pt (19 px environ) sur un fond donné.

Une couleur, en design imprimé ou en design hébergé, doit toujours être envisagée appliquée à une forme disposée sur un fond. Une couleur considérée isolément n’a aucune fonctionnalité en communication visuelle !

La couleur noire utilisée par défaut par les navigateurs pour afficher les textes codés en HTML ne présente de lisibilité maximale que sur fond blanc.

Que penseriez-vous d’un navigateur qui afficherait les textes de cette manière ? Pourtant le texte est bien noir !

Compléter la structure de la page HTML

Ce qui a été produit

Lors des activités proposées à la fin du cours précédent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis à votre disposition. Ces gabarits présentaient 2 structures rédactionnelles schématisées ainsi :

  • h1 – p – h2 – p – p – h2 – p – p
  • h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p

Je vous ai laissé libres de choisir la structure qui vous semblait la mieux correspondre à vos besoins en matière de rédaction. La seconde structure nécessite en effet la mise en place d’un texte plus long (et demande donc plus de travail) !

J’ai insisté sur le découpage des textes collectés pour qu’il corresponde à ces plans. Je vous ai demandé de bien équilibrer la longueur de vos paragraphes (en simplifiant le texte si nécessaire).

Je vous ai également demandé de bien aérer la présentation de votre code source pour faciliter la vision de votre structure dans votre éditeur de code (et aussi dans Slack, quand vous publiez votre fichier html en pièce jointe).

➜ Avant d’aller plus loin, veillez à ce que vos titres permettent immédiatement de comprendre de quoi il est question. Il s’agit de faire en sorte que le message essentiel du texte soit perceptible au premier coup d’œil, à la lecture des titres et des sous-titres.

Le premier paragraphe est un paragraphe d’introduction nommé chapô. Il résume tout ce dont il va être question dans le suite du texte. Sa lecture doit donner envie de lire l’article, en informant déjà très clairement l’internaute sur l’essentiel !

Ce que nous allons ajouter

1 – Ajouter des filets séparateurs

Comme vous avez pu le voir sur la précédente image, quand tous les styles sont désactivés, les séparateurs revêtent une importance particulière. Dans l’exemple qui nous intéresse, ils permettent de mettre en valeur le chapô.

➜ Je vous invite donc à placer un filet séparateur avant et après le premier paragraphe qui suit le titre de niveau 1. Cela se code à l’aide de la balise autofermante <hr> (à ne pas confondre avec <br>).

Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une épaisseur ou une longueur différente.

➜ Vous allez également ajouter un filet séparateur à la fin de votre texte avant d’insérer un nouveau paragraphe d’une seule ligne de texte mentionnant votre nom dans une phrase comme celle-ci “Exercice réalisé par Prénom Nom”.

Cela va me permettre de ne pas trop me mélanger les pinceaux en prenant connaissance de vos publications 😉

2 – Ajouter une citation

➜ À l’endroit que vous jugerez le plus approprié, je souhaiterais que vous intégriez une citation. Inutile d’ajouter les guillemets, ceux-ci seront affichés (ou non…) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non…) avec l’application des styles.

Il est intéressant de savoir comment les navigateurs gèrent l’affichage de ce type de contenu (généralement en décalant la citation par rapport à l’alignement à gauche des paragraphes de texte courant)

Une citation s’intègre dans le code source entre les balises <blockquote> et </blocquote>.

3 – Ajouter une liste de liens

Votre texte traite d’un sujet dont il a sûrement été question dans d’autres articles en ligne, sur d’autres sites ou même, dans des livres publiés chez tel ou tel éditeur. Communiquez ces références à vos lecteurs.

➜ Commencez par élargir le champ de votre recherche et faites une sélections des meilleurs articles et des meilleurs références en ligne concernant le sujet de votre texte. Vous intègrerez les liens menant aux sites sélectionnés dans une liste non ordonnée que vous allez créer, dans un chapitre intitulé “En savoir plus”. Ce chapitre et la liste de liens seront placés entre le dernier chapitre de votre texte actuel et le dernier séparateur mis en place précédemment.

Une liste non ordonnée est aussi nommée “liste à puces” du fait que les navigateurs affichent chaque item d’une telle liste précédé d’une puce.

La création d’une liste non ordonnée se code entre les balises <ul> et </ul>, chaque item de liste (chaque lien dans notre cas…) étant positionné entre les balises <li> et </li>.

Une liste ordonnée serait codée entre les balises <ol> et </ol>.

Comment coder un lien hypertexte ?

Un lien hypertexte est codé entre les balises <a> et </a>. Le texte placé entre ces balises est nommé “intitulé du lien”. Les navigateurs affichent les intitulés de lien en bleu et soulignent cet intitulé. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.

Pour rendre le lien efficace, il est nécessaire d’encoder l’adresse URL de la page cible dans la balise d’ouverture. On insère donc cette adresse de la manière suivante :

<a href="https://domaine-site-cible.xxx" target="_blank">

Dans cette ligne de code, https://domaine-site-cible.xxx est l’URL fictive du site cible et le code qui suit est une instruction spéciale. Elle ordonne au navigateur d’ouvrir la page Web ciblée dans une nouvelle fenêtre ou un nouvel onglet. Cette dernière instruction permet à l’internaute de ne pas perdre la page où il se trouvait avant de cliquer sur l’intitulé du lien, au cas où il rebondirait de lien en lien bien loin de votre page. 😉

Examinez ci-dessous un exemple de liste de liens encodés en HTML, précédée d’un paragraphe d’introduction et du titre de niveau 2 “En savoir plus”.

Capture d'écran de l'encodage d'une liste non ordonnée de liens paramétrés pour s'ouvrir dans une nouvelle fenêtre ou un nouvel onglet.

Vous repèrerez également sur cette capture d’écran le codage d’une citation, entre balises <blockquote> et </blockquote>. Dans cette citation, les mentions oranges (&nbsp;) sont le codage de caractères insécables. Vous constaterez aussi que le Prénom et le Nom écrits dans la dernière ligne sont placés entre les balises <strong> et </strong>, ce qui les affiche par défaut en gras dans une fenêtre de navigateur.

4 – Mettre en valeur les mots importants

Votre article commence à prendre tournure ! Il est cependant entendu que dans le cadre de ce cours, je ne vous parle pas de référencement naturel ni d’expressions ou de mots clés pouvant optimiser le référencement de votre article par les moteurs de recherche. Cela vous obligerait à remanier bien davantage vos textes. Si le sujet vous intéresse, vous pouvez toujours vous référer aux cours Rédaction Web et Référencement Naturel.

Il existe cependant une technique simple pour optimiser le contenu d’une page Web en vue d’une meilleure indexation sur les pages de résultats des moteurs de recherche. Il s’agit tout simplement de mettre en valeur les mots importants du texte, tous axés sur le sujet principal de l’article. Pour cela il convient de les encoder entres les balises <strong> et </strong>.

Mettez entre balises <strong> et </strong> les expressions ou mots importants de votre texte.

Le navigateur, comme nous venons de le voir, affiche en gras les mots “forts”. L’affichage en gras attire l’attention sur ces mots (comme pourrait aussi le faire un affichage en italique…). Mais c’est la rôle sémantique de la balise <strong> qui importe le plus ! La balise <strong> permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.

➜ Je vous propose un test imparable pour savoir si vous avez mis en évidence les bonnes expressions ou les bons mots. Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras. Si vous parvenez à saisir le message essentiel de votre article, alors vous avez fait du bon travail… Sinon, vous devinerez sans peine ce qu’il faut améliorer 😉

L’alternative <b>

Il existe une autre balise permettant d’afficher un texte en gras, sans pour autant que ces mots en gras soient jugés “forts” ou importants. Il s’agir de la balise <b>, qui n’a pas de fonction sémantique particulière.

➜ Je vous invite, pour tester l’usage de la balise <b>, de mettre entre <b> et </b> tout le premier paragraphe, le fameux chapô (ou chapeau, selon les orthographes…).

Si des mots ont été placés entre <strong> et </strong> dans le chapô, ils ne seront pas affichés “deux fois plus gras”. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.

Fin de la structuration et préparation de la stylisation

Si vous examinez maintenant votre texte dans la fenêtre de votre navigateur, même en désactivant les styles par défaut du navigateur, vous devriez vous rendre compte des avancées réalisées.

Votre texte est prêt à être stylisé ! Je ne vous ai pas fait intégrer d’image pour le moment. L’affichage des images sans application de style CSS détruirait l’ordonnancement visuel sur lequel nous avons travaillé jusqu’à maintenant, en particulier si ces images sont de grande taille.

Nous aurons l’occasion d’insérer plus tard une illustration dans notre page Web. Je vais vous montrer dès maintenant comment nous procèderons.

Collecter des illustrations

La première étape consiste à se mettre en quête d’une illustration pertinente pour votre article. J’utilise ici le terme “illustration” pour désigner une image servant à “illustrer” un texte. Il peut s’agir d’une photographie, d’un dessin, d’une infographie, d’un pictogramme, etc.

Pas question de choisir une image qui ne soit pas libre de droits ! Vous irez donc faire des recherches thématiques sur le site pexels.com (qui effectue ses sélections sur plusieurs sites d’images en même temps). Vous pourrez aussi choisir une illustration dessinée sur la banque d’images Ouch.

Si vous êtes inspirés, vous pourrez prendre en main de formidables outils de de photomontage et d’assemblage de dessins tels que Photo Creator et Vector Creator. Vous produirez alors sans difficulté des illustrations personnalisées correspondant parfaitement à nos sujets… et cela sans débourser un centime ni même devoir vous inscrire sur une plateforme Web.

Si vous souhaitez illustrer votre texte avec des icônes, vous en trouverez un grand nombre sur icones8.fr ou flaticon.com. Vous n’avez que l’embarras du choix (gratuit et payant…) !

Collectez ou produisez des images susceptibles d’illustrer votre texte avec pertinence. Partez du principe que pour une image publiée il faut en collecter 4, afin de faire le meilleur choix possible ! Placez le fruit de votre collecte dans un dossier que vous nommerez « img ».

Il n’est pas défendu d’utiliser Photoshop ou Illustrator. Souvenez-vous cependant que les images matricielles destinées à la publication en ligne sont en RVB et que leur formats d’enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (pas de PSD, de TIF ou TIFF !). Pour les images vectorielles, leur format d’enregistrement est uniquement le SVG (pas de AI ou d’EPS !)

Intégrer une image

L’intégration d’une image s’effectue en paramétrant correctement la balise autofermante <img>. Il est nécessaire d’une part de préciser dans la balise <img> quelle est la source de l’image (indiquer au navigateur où se trouve l’image à afficher). D’autre part, il est obligatoire de formuler un texte alternatif (toujours dans la balise <img>).

Le texte alternatif sert à trois choses :

  • décrire l’image aux moteurs de recherche
  • offrir une alternative d’affichage si le navigateur ne parvient pas à afficher l’image
  • permettre aux robots lecteurs utilisés par les personnes malvoyantes de leur décrire l’image

Ce rouage essentiel du référencement des images est donc un exercice supplémentaire de rédaction. Vous en saurez davantage en consultant le dernier chapitre du cours RWRN.

Examinez ci-dessous le code d’intégration de l’image “woman-typing-writing-1800×1200.jpg”. Dans quel dossier est-elle placée ? Où se trouve ce dossier ?

Capture d'écran montrant le code d'intégration d'une image placée dans un dossier nommé "img".

Vous noterez que l’image est nommée sans utilisation de lettre majuscule ni de chiffre en début d’intitulé, sans utilisation de point ailleurs que devant l’extension, sans lettre accentuée ni espace.

Par ailleurs, les dimensions de l’image, en pixels, sont indiquées en fin d’intitulé de l’image. Cela s’avère très utile en design pour le Web, vous le découvrirez très vite 😉