Catégories
FCS FCS1-cours

Les modes de publication en ligne

Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.

Pour tirer profit de ce cours, vous devez avoir suivi les cours intitulés Le fonctionnement du Web et Contenu d’un dossier de page Web.

Utiliser une plateforme d’édition en ligne

Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.

Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.

Utiliser la plateforme Netboard

Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.

Un site Netboard complet détaille le mode d’emploi de la plateforme : https://jmd85.netboard.me/presentation/?tab=132247

➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessousun prof d’anglais explique à d’autres profs comment utiliser Netboard.

Netboard peut donc servir à :

  • regrouper et partager des collections de liens (veille informationelle)
  • organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
  • regrouper en mode collaboratif des documents sur une thématique
  • rassembler et partager une documentation sur un sujet précis
  • maquetter un site Web en testant la répartition des contenus sous différents onglets
  • etc.

En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.

Utiliser Google Sites

Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.

Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.

Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.

➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.

Vous trouverez en ligne des tutoriels plus détaillés (attention de bien sélectionner les articles les plus récents car l’éditeur classique n’est plus disponible depuis novembre 2020). Voici un exemple de tuto assez complet : https://fr.techtribune.net/google/google-sites-comment-utiliser-le-createur-de-site-web-de-google/102077/

Utiliser un éditeur WYSIWYG

À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.

Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide.
➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.

Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).

Utiliser rakko.tools

Parmi les outils disponibles en ligne je vous propose d’utiliser rakko.tools, basé sur l’éditeur TinyMCE

Je vous invite à consulter cette page Web, réalisée avec rakko.tools : https://graphizm.fr/fcs/rakko-tools. Il a fallu en compléter le code source pour rendre le fichier conforme aux normes du Web. Le plus gros du travail avait toutefois été fait automatiquement au moment de l’export HTML.

Utiliser d’autres éditeurs WYSIWYG

Les éditeurs WYSIWYG grand public ne permettent pas de manipuler confortablement le code source et d’enrichir ainsi une page Web. Pour effectuer cela convenablement, il est nécessaire d’utiliser des éditeurs WYSIWYG plus élaborés comme BlueGriffon ou Dreamweaver. Leur prise en main est plus laborieuse et leur prix beaucoup plus élevé !

Utiliser un éditeur Markdown

Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.

Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :

La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :

Vous pouvez visualiser cette page en ligne en cliquant sur ce lien : https://graphizm.fr/fcs/stackedit/langage-markdown-toc.html

Utiliser d’autres modes de publication en ligne

Je me contenterai de les mentionner, sans entrer dans les détails car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3). La préparation au titre pro Designer Web permet de compléter utilement ces compétences.

Utiliser des frameworks CSS

Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.

Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.

Utiliser des CMS sans base de données

Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.

Pour en apprendre davantage sur le sujet, je vous invite à consulter mes ressources mises en ligne sur Netboard.

Utiliser des CMS classiques et des plateformes de création de sites

Le CMS le plus populaire est de loin WordPress. Viennent ensuite Shopify, Joomla, Squarespace, Drupal et Wix. Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.

Catégories
FCS FCS1-cours

Le fonctionnement du Web

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

Utiliser une analogie pour comprendre le Web

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

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

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

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

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

Créer une infographie

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

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

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

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

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

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

Visionner quelques vidéos

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

Vidéo de 3 minutes et 4 secondes

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

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

Vidéo de 9 minutes et 26 secondes

Compléter une carte heuristique

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

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

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

Faire un peu d’histoire

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

Liens sur l’histoire d’Internet

Liens vers Wikipedia

Catégories
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-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
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 😉

Catégories
FCS FCS1-cours RWRN RWRN-cours

Identifier la structure HTML d’une page Web

Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de code Brackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.

La structure élémentaire d’une page Web

Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.

Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active. Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>.

Le titre de la page est placé dans la tête du code source (à ne pas confondre avec la têtière qui se trouve généralement en tête de page affichée dans le navigateur…). La tête de code source est délimitée par les balises <head> et </head>.

Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.

Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source »… après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.

Je vous montre un gabarit de ce type, disponible sur le site w3schools.com. N’hésitez pas à demander la traduction automatique de ce site. Il y a dans le menu du site de w3schools (un site norvégien) une icône en forme de planète qui permet d’activer la traduction automatique du site dans la langue de son choix.

Capture d'écran d'une structure HTML assez simple collectée sur le site w3schools.com

Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut.

En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec Brackets et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.


J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…

Présentation de la BD en ligne consacrée à la section "head" et la la section "body" dans le code source d'une page HTML.

➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com

En savoir plus à ce sujet (en bonus…)

Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Plus dans le sujet tu meurs… mais vous verrez que les choses se compliquent assez vite.

Le site w3schools.com, que nous venons de mentionner plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton « Try it Yourself » ou « Essayez vous-même« ).

Pour les plus intéressés, je recommande vivement de s’inscrire aux cours gratuits de codecademy.com. Le cours de HTML est très bien conçu.

Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet. Ma préférence va vers le site apprendre-a-coder.com, même si on n’est pas sur YouTube… et que la rigueur n’est pas toujours au rendez-vous.

Vous ne serez pas perdu, car l’auteur utilise Brackets (mais sans les extensions qui vont bien, nous y reviendrons). Il y existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder). Pour les plus exigeants, allez plutôt voir du côté de grafikart.frc’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !

Test de connaissance (facultatif)

Un petit test de connaissance est disponible sur ce site. Vérifiez vos connaissances fraîchement acquises en allant sur Identifier les éléments de la structure HTML

Activités

Plusieurs activités vous sont proposées pour consolider vos acquis sur la page intitulée Activités sur la structure HTML d’une page Web

Catégories
FCS FCS1-cours

Personnaliser Brackets

Pour éditer le code source d’une page Web, je vous recommande l’utilisation d’un éditeur de code nommé Brackets.

Il est téléchargeable gratuitement et sans limitation sur le site brackets.io. Brackets fonctionne sous Windows, MacOs et Linux. Ceux d’entre vous qui utilisent un PC prêté par le GRETA disposent de Brackets parmi les programmes installés sur le portable.

Si vous avez l’habitude d’utiliser un autre éditeur de code, vous pouvez l’utiliser sans que cela gêne votre apprentissage. Vous trouverez une liste des principaux éditeurs de code sur de nombreux sites dont le BlogDuWebdesign.

Je vous propose, avant d’aller plus loin avec Brackets, de personnaliser cet éditeur de code. En lui ajoutant qualques extensions, Brackets va se révéler très pratique pour commencer à manipuler le code source d’une page HTML, une feuille de style CSS et plus tard un script JS.

Pour savoir comment ajouter des fonctionnalités à Brackets, consultez la fiche extensions-brackets.

Infos sur Brackets

  • Premiers pas avec Brackets, texte affiché à l’ouverture de l’éditeur, mis en ligne sur graphizm.fr
  • Bienvenue chez Brackets, un article à traduire en français avec Chrome, sur github.com
  • L’aide de Brackets, à traduire automatiquement si nécessaire, toujours sur github.com
  • Découvrir les usages de Brackets en vidéo avec grafikart.fr (très complet)
  • La même vidéo est intégrée dans un article de jenseign.com, un site consacré à l’apprentissage du HTML-CSS (niveau avancé).