Auteur/autrice : yves-goguely

Un des moyens les plus simples de faire des diaporamas à partir d’un texte en Markdown consiste à coder le diaporama dans son éditeur Markdown préféré puis à faire glisser le fichier sur la page Web de Remarkise.

Une syntaxe Markdown particulière doit être respectée et vous ne pourrez pas intégrer dans une diapositive plus de texte qu’elle n’est capable d’en contenir ! Cependant Vous éditerez des slidedocs tout à fait convenables…

Voyez par exemple la démo de Remark.

La syntaxe Markdown pour les diaporamas Remark

Comment utiliser Remarkise

Remarkise prend en compte la syntaxe Remark pour générer les diapositives d’un diaporama complet. Pour cela il faut donc :

• coder le contenu du diaporama en entier dans un seul fichier Markdown (en respectant la syntaxe Remark) ;
• Sauvegarder de fichier en local (sur son poste) ou en distant (sur un serveur)
• Faire glisser ce fichier sur la zone dédiée, sur la page d’accueil de Remarkise (ou entrer l’URL du fichier, si celui-ci est dans le cloud).

Remarkise affiche alors un diaporama Remark, prêt à être visualisé à l’écran ou projeté.

Respecter la syntaxe Remark

La syntaxe utilisée pour générer des diaporamas avec framework Remark.js est reès simple

1. Chaque diapositive est séparée de la suivante par trois tirets (placés entre 2 sauts de ligne).
2. Le langage Markdown est utilisé pour structurer chaque diapositive (des #pour les titres, un double saut de ligne pour séparer les paragraphes, des__ et des * pour le gras et l’italique, des -pour les listes, des >pour les citations, des ` pour les lignes de code, etc. ).

Uniquement pour les diaporamas réalisés avec Remark.js ou destinés à être automatiquement générés par Remarkise, d’éventuelles “classes” peuvent être utilisées. Elles sont appelées en tête du code d’une diapositive pour modifier le style d’une seule diapositive. Ces classes modifient le style de la présentation des contenus en fonction des styles CSS qui leur sont associés par défaut.

Les classes Remark

Pour intégrer une classe il faut simplement écrire :

class: nom-de-la-classe, nom-d-une-autre-classe

Les classes utilisées pour l’alignement vertical du texte dans la diapositive sont :

• top (par défaut)
• middle
• bottom

Les classes utilisées pour l’alignement horizontal du texte dans la diapositive sont :

• left (par défaut)
• center
• right

Voici un exemple de classes Remark positionnées en tête d’un diaporama constitué de 3 diapositives (les classes étant spécifiées en tête de la première diapositive, elle s’appliquent uniquement à cette diapositive) :

class: center, middle

# Test de présentation avec Remark

---

## Utilisation de la syntaxe Remark 

1. chaque diapositive est séparée de la suivante par trois tirets ;
2. le langage Markdown est utilisé pour structurer les diapositives ;
3. en tête de diapositive, d'éventuelles classes sont appelées en syntaxe Remark (*class: className, otherClassName*) afin modifier la présentation de la diapositive.

---

## Utilisation de la syntaxe Markdown

# Titre h1
## Titre h2
### Titre h3
Texte de paragraphe normal, **gras**, *italique*, ***gras italique***, ~~barré~~, etc.

Vous pouvez copier ce code à partir du site code-md pour créer un fichier Markdown avec l’éditeur Markdown de votre choix (StackEdit, Macdown, PanWriter, etc.)

Faites un test en faisant glisser le fichier Mardown contenant le code ci-dessus sur la zone de drop de Remarkise.

Les autres propriétés et valeurs intégrables dans le code Markdown

*Cours en construction*

Dans ce cours, vous allez apprendre à utiliser l’outil en ligne Markmap. Cet outil permet de réaliser des cartes mentales heuristiques à partir d’une simple structure textuelle éditée en langage Markdown.

Anticiper la réalisation

Comme pour tout projet de communication, il est important de bien préparer ses contenus. Dans notre contexte, nous allons livrer au public (publier) une carte mentale heuristique. Il s’agit d’une arborescence centrée sur un sujet central à partir duquel se ramifient des sujets secondaires sur plusieurs niveaux.

Voici la carte modèle proposée par Markmap à l’ouverture de sa fenêtre d’édition. Le texte permettant de créer cette carte est le code Markdown placé dans la partie gauche de l’éditeur.

➜ Pour vous aider à concrétiser ceci, je vous ai préparé un document en MarkDown que vous allez traiter de la manière suivante :

1. visualiser le code Markdown dans votre navigateur
2. sélectionner ce code et placer le code dans le presse-papier (couper tout le texte)
3. coller le texte dans la fenêtre d’édition de Markmap (après avoir supprimé le code de démonstration proposé à l’ouverture de l’éditeur)

Il est donc nécessaire d’avoir 2 onglets ou fenêtres de navigation ouvertes : celle qui pointe sur le contenu en ligne (le code Markdown mis à votre disposition) et celle qui pointe sur l’éditeur de Markmap.

➜ Si vous avez suivi les consignes formulées plus haut, vous devriez visualiser quelque chose qui ressemble à ceci (avec les légendes en moins) :

La carte a été générée automatiquement à partir du code Markdown intégré dans la fenêtre d’édition de gauche. Nous ne sommes pas en présence d’un éditeur de code Markdown et nous ne disposons d’aucun bouton pour mettre le texte en gras ou en italique.

Nous observons par ailleurs que, sur la carte, les titres de niveau 1 (codés avec un #) ne sont pas plus gros que les titres de niveau 2 (codés avec deux ##)

Personnaliser la carte

Je vous propose de personnaliser la carte en modifiant le code Markdown de manière à obtenir le rendu présenté ci-dessous. Les flèches bleues indiquent les changements attendus.

L’apparence de la carte peut être également modifiée en utilisant les fonctionnalités accessibles dans la barre d’outils de l’éditeur de carte. Vous pouvez par exemple unifier la couleur des branches de la carte en cliquant sur le lien (bouton) Colorize.

Cette opération ajoute un entête codé en langage YAML (utilisé notamment pour intégrer des métadonnées dans un fichier Markdown). Le code YAML est encadré par deux lignes de 3 tirets. dans notre cas, la couleur est indiquée en mode hexadécimal. Vous pouvez la remplacer par toute autre couleur, codée de la même manière, ou par le nom d’une couleur Web.

Exporter la carte

La carte ainsi générée est exportable dans deux formats. Un export HTML interactif (consultable avec un navigateur et intégrable dans une page Web) et un export SVG (consultable avec un navigateur et intégrable dans une page Web, mais non interactif).

Le lien suivant pointe vers la carte personnalisée, mise en ligne sur un serveur distant : http://graphizm.fr/markdown/exo-markmap-03.html

Ces deux fonctions d’exportation fonctionnent très bien avec Google Chrome mais font planter Vivaldi que j’utilise malgré tout quotidiennement… pour tout le reste 😉

Voici un résumé des informations apportées en cours concernant le texte brut et le texte enrichi. Plusieurs expérimentations ont accompagné ce cours.

Comment voir le code d’un fichier ?

• Tous les fichiers informatiques sont codés.
• Les informations contenues (enregistrées) dans un fichier sont encodées dans un format (type de code) particulier
• Le format de l’encodage permet ou non l’examen du code utilisé par un éditeur de texte (à ne pas confondre avec un traitement de texte)
• Si le format d’encodage le permet, il est possible d’examiner le code d’un fichier informatique (texte, image ou son) en modifiant son extension et en imposant l’extension de fichier .txt
• Cette modification de l’extension d’un fichier en .txt permet de visualiser le code utilisé avec TextEdit (sous macOs) ou Notepad++ (sous Windows). Ces deux applications sont des éditeurs de texte (et non des traitement de texte) !

Attention : modifier l’extension d’un fichier ne modifie pas l’encodage du fichier. Cela indique juste au système informatique utilisé quel type d’application utiliser pour tenter de lire le fichier avec cette application installée sur le poste.

Constats expérimentaux

• Un fichier contenant des textes stylisés (gras, italiques, affichés dans telle ou telle police de caractères, etc.) est enregistré avec TextEdit au format .rtf (rich text file)
• Le code d’un fichier .rtf code les informations de stylisation dans le fichier lui-même
• Le code d’une capture d’écran enregistrée au format .png indique le format d’enregistrement du fichier en tête de son code
• Le code d’un fichier enregistré au format Markdown correspond exactement au contenu textuel du document enregistré dans ce format (il en est de même pour les documents enregistrés au format .txt)

Plus le codage d’un fichier est simple plus celui-ci est léger et facilement éditable. Les outils d’édition de texte nécessitent un apprentissage (… et donc souvent un changement d’habitude) mais personne ne revient en arrière après avoir expérimenté ce mode d’édition !

Ce n’est pas parce que vous êtes aujourd’hui plus à l’aise avec Word ou avec InDesign que vos documents sont plus universels et davantage pérennes. Vous avez certainement déjà fait l’expérience de problèmes de version de documents. Imaginez ce qu’il en sera dans 5, 10 ou 20 ans !

Tous les développeurs éditent leur documentation en Markdown et la publient en HTML. Ces deux langages sont des codages au format texte, édités avec des éditeurs de textes et non avec des traitements de texte ou des logiciels de mise en page.

La solution Markdown

Sans être la solution idéale, l’édition de texte avec un éditeur Markdown présente pour le moment de réels avantages, notamment pour les rédacteurs Web. Un cours entier est dédié à ce format et un autre à l’utilisation de StackEdit, un éditeur Markdown en ligne.

Je vous invite à consulter les ressources suivantes :

• Éditer un texte en Markdown
• Utiliser StackEdit

En savoir plus sur la question

Le sujet peut paraître insignifiant à celui ou celle qui débute sa formation de designer graphique ou de web-designer. Il est pourtant crucial de réfléchir à cette question, dans un contexte d’échange de textes entres rédacteurs et développeurs, entre clients et graphistes, entre équipiers fonctionnant avec des outils différents sur des plateformes différentes.

Voici une listes d’articles sélectionnés pour vous aider à saisir les enjeux de l’usage du texte brut dans le secteur professionnel vers lequel vous vous dirigez. Ils sont listés des plus simples aux plus compliqués (ou complets, si vous préférez…). Les deux articles présentés sur Wikiwand approfondissent l’aspect technique de la question.

• Qu’est-ce que le texte brut ?
• L’écriture académique au format texte
• En finir avec les traitements de texte

• Texte brut (sur Wikiwand)
• Fichier texte (sur Wikiwand)

Simple d’utilisation, la plateforme Deskyo permet de disposer de tous ses favoris en ligne, à partir de tous vos périphériques. Deskyo est donc un gestionnaire de favoris. Si ceux-ci sont bien classés (cela ne tient qu’à vous…), vous disposez d’une base de signets toujours accessible, quel que soit le navigateur et le poste ou l’appareil que vous utilisez.

Deskyo permet donc de classer (manuellement) des favoris / signets / bookmarks / URL / adresses Web (tous ces termes sont pratiquement synonymes) dans des dossiers / répertoires / collections.

Le partage des favoris n’est pas autorisé, en sorte que vos collections de liens restent privées. Vous seul avez accès à vos signets !

Deskyo permet d’exporter au format HTML l’ensemble de tous les liens collectés, dans une page structurée respectant le classement effectué. Une fonctionnalité supplémentaire permet aux abonnés Premium de partager une collection de liens particulière (tous les favoris placés dans un dossier).

La génèse de Deskyo est détaillée par son fondateur, Stéphane Gloriot, sur le forum de la plateforme Openclassrooms. Un article, publié sur Blogger, présente brièvement Deskyo et en détaille les fonctionnalités.

Si la sauvegarde des liens nécessite plusieurs clics, cela permet de conserver en mémoire les classements effectués. Ce travail de classement est un excellent moyen pour fixer dans son esprit des concepts nouveaux et les articuler convenablement entre eux.

Deskyo et la validation des titres professionnels

Dans le cadre de la préparation à la validation des titres professionnels IMeP et CDUI, vous devez être capables de prouver au jury que vous effectuer sérieusement une veille informationelle et technologique en lien avec le métier que vous envisagez d’exercer.

Deskyo est un moyen d’atteindre cet objectif. Toutefois, l’outil numérique n’effectue pas le classement à votre place et il n’émet aucun avis sur la pertinence des liens collectés ! C’est donc à vous d’utiliser cette plateforme de manière cohérente. Vous n’y parviendrez pas du premier coup mais vous affinerez votre système de classement au fil de vos collectes.

Quelques astuces d’utilisation

Changer l’image de fond du bureau de Deskyo

Pour modifier l’image devant laquelle s’affichent les dossiers/collections ou les signets/favoris sur le bureau de Deskyo, faites un clic droit à droite d’un des signets ou dossiers (en dehors de l’élément mais pas trop loin tout de même…).

Un menu contextuel s’affiche et vous propose de “Personnaliser l’affichage”. Vous pouvez choisir une des images proposées ou parcourir votre ordinateur pour choisir l’image voulue. Prévoyez une image assez grande en pensant à vos écrans de bureau 😉

Manipuler les éléments épinglés sur le bureau de Deskyo

Comme vous le voyez sur le bureau de Deskyo, les éléments affichés présentent un petite épingle dans le coin supérieur droit. Cela indique que ces éléments affichés sont de simples alias / raccourcis / accès rapides pointant vers les éléments archivés sur le serveur de l’application.

En survolant les éléments avec le curseur de la souris, une zone grisée s’affiche et présente trois icônes permettant chacune d’effectuer des actions spécifiques.

• les 6 petits points permettent de déplacer l’élément
• le petit “i” affiche au survol des infos supplémentaires pour les éléments situés à l’intérieur des collections… mais sur le bureau seul s’affiche le nom de l’élément !
• les 3 points superposés permettent d’accéder à un menu permettant notamment de renommer le raccourci / alias (mais pas le dossier placé le répertoire des collections) ou de supprimer l’alias (et conserver toutefois le dossier original).

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, pour ceux que cela intéresse, 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, Yellow, etc)

StackEdit est aussi un outil convivial pour tenir un journal de formation (en tant qu’apprenant) ou un journal pédagogique (en tant que formateur).

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 :

Vous pouvez accéder au code Markdown de l’exercice finalisé sur graphizm.fr.

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 😉

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).

Je vous propose de visualiser un exemple en copiant le texte de la capture d’écran ci-dessus (codé en Markdown) dans StackEdit. ➜ Exportez le document en “plain HTML” ou en “Styled HTML” pour voir comment le texte s’affiche dans un navigateur.

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. Vous avez pu constater à quel point cela était une source de confusion dans l’exemple proposé plus haut.

➜ 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 en HTML

Cette partie concerne les apprenants ayant le besoin ou l’envie de créer des pages Web pour les consulter en local (sur leur poste de travail) ou en distant (après les avoir mis en ligne).

Un des point les plus intéressants de StackEdit concerne 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 ! Génial, non ?

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 et vidéo en ligne

Voici une liste de quelques sites parlant de StackEdit :

• StackEdit: un éditeur Markdown pour votre navigateur Web
• StackEdit, Markdown et WordPress : le trio gagnant
• StackEdit Markdown reference (en)

Voici maintenant une vidéo en français traitant de StackEdit :

• StackEdit, un éditeur puissant