Débugue tes humanités Saison 3b

Séance 03 - Les formats des fichiers

Définitions et usages. Markdown, HTML, PDF.

Chaire de recherche du Canada sur les écritures numériques, Bibliothèque des lettres et des sciences humaines, Ouvroir d'histoire de l'art et de muséologie numérique. — roch.delannay@umontreal.ca ; giulia.ferretti@umontreal.ca ; louis-olivier.brassard@umontreal.ca

Plan de la séance #

  1. Définitions
  2. Les formats : docx, pdf, markdown, HTML, XML
  3. La conversion entre formats
  4. Pandoc

1. Définitions #

1. Définitions #

1.1. Origines des formats #

1. Définitions #

1.2. Qu’est-ce qu’un format informatique ? #

Structurer les informations avec des spécifications techniques.

1. Définitions #

1.3. Pourquoi s’intéresser aux formats ? #

Comprendre les rouages du numérique.

2. Implications techniques et politiques #

2. Implications techniques et politiques #

2.1. L’interopérabilité #

La condition du numérique : faire dialoguer les machines.

2. Implications techniques et politiques #

2.2. Ouvert ou fermé ? #

Standards et licences.

3. Les formats #

3. Les formats #

3.1. PDF #

  • Portable Document Format : pour afficher et imprimer les fichiers toujours de la même manière
  • 1991 par Adobe
  • Depuis 2008 : ISO standard 32000-1:2008
  • Le fichier est structuré sur quatre niveaux
    • Header : indique la version de la spécification PDF du fichier
    • Body : contenant les objets qui constituent le document contenu dans le dossier
    • Cross-reference Table : contenant les informations sur les objets indirects dans le fichier
    • Trailer : indiquant l’emplacement de la cross-reference table dans le corps du fichier.
  • Dans body, Chaque page est traitée individuellement

3. Les formats #

3.2. Office Open XML (DOCX) #

  • 2007 par Microsoft
  • .doc + x(ml)
  • dossier zip contenant des fichiers xml
  • permet de lire comment le fichier a été encodé
  • vs .doc, un format binaire lisible uniquement par le logiciel Word - à partir de Word97

3. Les formats #

3.3. XML #

  • Extensible Markup Language
  • crée en 1998
  • conçu pour la structuration stricte de données
  • les informations sont validées par des schémas

Démo sur Oxygen, un éditeur de texte pour XML

3. Les formats #

3.4. HTML #

  • Hypertext Markup Language
  • créé en 1993
  • conçu pour les liens entre les documents (hyperlinks)
  • cinquième version (en 2008), s’adapte à l’évolution du Web

3. Les formats #

3.5. HTML #

La structure d’un fichier HTML #

<html>
    <head>
        <meta charset="utf-8">
        <title>Titre dans l'onglet</title>
    </head>
    <body>
        <h1>Titre</h1>
        <p>Ceci contient un paragraphe.</p>
    </body>
<html>

3. Les formats #

3.5. Markdown #

4. Conversion entre formats #

4. Conversion entre formats #

4.1. La conversion #

La conversion est la transformation de balises en d’autres balises.

Les contenus en entrée :

  • texte balisé
  • métadonnées sérialisées
  • bibliographie structurée

4. Conversion entre formats #

4.2. Pandoc #

Des logiciels permettent de convertir automatiquement les contenus, comme Pandoc par exemple :

  • 2006, par John MacFarlane
  • Pandoc est un convertisseur agnostique, il n’impose pas une pratique par rapport à un balisage.
  • Mais certaines conversions sont impossibles : un format complexe est trop difficile à réduire au risque de perdre la majorité des informations, ou de ne pas savoir quoi en faire.

4. Conversion entre formats #

4.3. Fonctionnement de Pandoc #

programme fichier.entrée optionnel=fichier.sortie

4. Conversion entre formats #

4.4. Pandoc -examples #

pandoc mon-fichier-markdown.md

pandoc -f markdown -t html mon-fichier-markdown.md -o mon-fichier-html.html

pandoc -f markdown -t html --template=mon-modele.html mon-fichier-markdown.md -o mon-fichier-html.html

5. Découverte de Pandoc par la manipulation #

5. Découverte de Pandoc par la manipulation #

5.1. Installation du logiciel - Première étape #

  • Terminal
    • Windows : Start > Windows Power Shell
    • Mac : chercher « terminal »
    • Linux : chercher « terminal »

5. Découverte de Pandoc par la manipulation #

5.2. Installation du logiciel - Deuxième étape #

Suivre les instructions sur cette page : https://docs.zettlr.com/fr/installing-pandoc/

  • Pandoc
    • Windows avec application Ubuntu : sudo apt update –> sudo apt install pandoc
    • Mac
    • Linux

5. Découverte de Pandoc par la manipulation #

5.3. Créer un document Markdown et le convertir en HTML #

  • créer un document Markdown avec des niveaux de titre, une liste, une citation longue et de l’emphase (italique et gras)
  • lancer la commande pandoc mon-fichier.md en l’adaptant
  • ouvrir le fichier HTML obtenu

5. Découverte de Pandoc par la manipulation #

5.4. Ajouter des métadonnées #

  • ajouter des métadonnées à votre document avec un entête du type :
---
title: Le titre de mon document
author: Mon Nom
---
  • convertir ce fichier Markdown en HTML puis en DOCX
  • ouvrir les fichiers obtenus, que remarquez-vous ?

5. Découverte de Pandoc par la manipulation #

5.5. Appliquer un modèle #

  • créer un fichier HTML avec le code suivant :
<html>
    <head>
    <title>$titre$</title>
    <meta name="author" content="$auteur$">
    </head>
    <body>
    <h1 class="titre">$titre$</h1>

    <p class="auteur">$auteur$</p>

    $if(date)$
    <p class="date">$date$</p>
    $endif$


    <div>$body$</div>

    </body>
</html>
  • lancer la conversion en HTML en appliquant le modèle/template
  • ouvrir le document obtenu

5.6. Appliquer un modèle - 2 #

Ajouter dans le YAML du fichier Markdown le code suivant :

---
titre: The document title
auteur:
- nom: Auteur 1
  affiliation: Université de Montréal
- nom: Auteur 2
  affiliation: Université de Laval
...

5.7. Appliquer un modèle - 2 #

Modifier le fichier HTML comme suit :

<html>
    <head>
    <title>$titre$</title>
    <meta name="author" content="$auteur$">
    </head>
    <body>
    <h1 class="titre">$titre$</h1>

    $for(auteur)$
    $if(auteur.nom)$
    <p class="author">$auteur.nom$</p>
    $if(auteur.affiliation)$ <p class="author">($auteur.affiliation$)</p>$endif$
    $else$
    <p class="author">$auteur$</p>
    $endif$
    $endfor$

    $if(date)$
    <p class="date">$date$</p>
    $endif$


    <div>$body$</div>

    </body>
</html>

Ressources #