Formation FCS
Tout commence par une rédaction structurée : une formulation ordonnée des idées à transmettre.
Le texte reste brut (sans stylisation) et ceci peut être fait dans NotePad++ (sous Windows) ou TextEdit (sous MacOs). Le document est enregistré au format .txt (compatible Mac-PC-Linux).
L'étape suivante est le balisage du texte, pour identifier le titre, le chapô, les sous-titres, les paragraphes, les listes, etc.
L'apparence des différents éléments textuels importe peu. L'important est de pouvoir bien différencier le rôle joué par chaque élément textuel.
Ce premier balisage du texte s'effectue avec un éditeur Markdown. Le plus souvent on saute l'étape précédente... on rédige et on balise en même temps.
Vous pouvez utiliser Stackedit (directement en ligne) ou PanWriter, installé sur votre poste.
Le balisage doit ensuite être adaptée pour la publication en ligne. La page doit être balisée en HTML. Une simple exportation du Markdown en HTML suffit !
La présentation du texte change selon les réglages du navigateur mais on conserve la même structuration.
On peut rajouter une illustration, choisir une famille de caractères typographiques plus adaptée, mettre des mots en gras, placer des séparateurs, mettre de la couleur : ça le fait !
Les contenus sont alors présentés de manière plus plaisante à regarder !
On fait cela en associant la structure HTML de la page à une feuille de style CSS. Les titres, les sous-titres et les paragraphes se voient alors dotés de propriétés visuelles plus intéressantes.
Pour chaque élément de la structure s'applique une stylisation prédéfinie !
On peut aussi enrichir les contenus et rajouter par exemple une citation ou des liens vers d'autres sites traitant du sujet !
Des informations annexes peuvent aussi être placées en pied de page. On commence à anticiper les attentes du lecteur !
Une fois la page mise au point sur le plan structurel et visuel (en HTML et en CSS), on publie la page sur le Web. On place le fichier HTML et le fichier CSS dans un dossier et on transfert le tout sur le serveur d'un hébergeur.
La page est désormais visible par tous ceux qui en connaissent l'adresse URL.
C'est tout de suite plus sympa de pouvoir consulter la page sur son ordinateur... ou sur son smartphone !
Par contre, quand il y beaucoup de choses à lire, sur petit écran : bonjour le scrolling* vertical !
* défilement
C'est là qu'il faut optimiser la présentation sur écrans en rajoutant par exemple un menu en tête de page.
La navigation peut se faire dans une même page ou de page à page... ou encore de site à site !
On place des “ancres” dans le texte et des liens vers ces ancres dans les onglets du menu...
ni vu, ni connu !
Cela optimise l'expérience utilisateur, une expression très utilisée dans le métier ! L'ajout d'une texture, c'est un petit plus
(à utiliser avec modération).
C'est clair, c'est tout de suite beaucoup mieux ! Je peux aller directement sur la partie qui m'intéresse ou revenir en haut de page, au fil de mes besoins...
Le menu reste fixé en en haut de page, c'est cool !
On termine par l'amélioration de la disposition des contenus en fonction de la taille des écrans de consultation.
Ces adaptations sont indispensables... et il vaut mieux y penser dès le départ : mobile first !
Vous pouvez consulter le site montré en exemple dans ce diaporama à cette adresse :
graphizm.fr/fcs/pollution-numerique
Il n'y a pas à tortiller, les gars... vous faites du bon travail, au GRETA !
Réalisation : Yves Goguely
Dessins originaux : Vijay Verma
Les acteurs de ce diaporama
s'autorisent une pratique
vivement déconseillée...
Saurez-vous trouver laquelle ?