---
title: Situer le numérique
---

###### tags: `paged-js` `design-commun`

# Situer le numérique

:::success
Producteur (actuel) : [Timothée Goguely](https://timothee.goguely.com/)
:::

:::warning
Ce journal documente le travail de mise en page de l’ouvrage <cite>Situer le numérique</cite> rédigé par [Gauthier Roussihle](http://gauthierroussilhe.com/fr) à l’aide du générateur de site statique [Hugo](https://gohugo.io) et de la bibliothèque [Paged.js](https://www.pagedjs.org/). La documentation de ce projet s’inscrit dans le cadre de la thèse en ergonomie et design graphique au laboratoire Paragraphe (Université Paris 8) et à EnsadLab-Paris de [Julie Blanc](https://julie-blanc.fr/).
:::

:::info
:link: https://github.com/design-commun/les-numeriques-situes
:::

## 8 juin

### Configuration et mise en place des bases de l’architecture du projet dans Hugo.

- création d’un site vierge à l’aide du framework [Hugo](https://gohugo.io/) `hugo new site les-numeriques-situes --format --yaml`
- création et configuration de base d’un thème Hugo en vue de sa réutilisation future pour d'autres ouvrages `hugo new theme cahiers-design-commun`
- intégration de Paged.js au thème via le fichier `layouts/partials/head.html`
- transposition et découpage du début de l'ouvrage rédigé dans Google Docs en fichiers markdown
- intérogations concernant les notes de bas de page : comment faire pour que l'appel de note et la note se situent toujours sur la même page ? Pour l'instant la syntaxe utilisée est la suivante:
- appel de note[^1]
- \[^1]: note
- les balises `<sup></sup>` ne fonctionnent pas de base, il faut activer `unsafe: true` dans les [options de markup](https://gohugo.io/getting-started/configuration-markup#goldmark) via le fichier de `config`
- pour les images, ajout d’un [markdown render hook](https://gohugo.io/getting-started/configuration-markup/#image-markdown-example) `layouts/_default/_markup/render-image.html` pour obtenir un balise `<figure>` avec un `<figcaption>` optionnel en détournant le contenu de l’attribut `title`:

<figure>
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
  {{ with .Title}} <figcaption>{{ . }}</figcaption>{{ end }}
</figure>

content/
├── _index.md
├── cahier1.md
├── figure01.jpg
├── figure02.jpg
└── introduction.md

- édition du fichier `layouts/index.html` afin d'importer les différents fichiers markdown (les différents chapitres) présents dans le dossier `/content`:
- utilisation de la metadonnée `weight` pour ordonner les différents fichiers markdown

{{ define "main" }}
<main>
    <header>
        <h1>{{.Title}}</h1>
    </header>
    {{ range .Pages.ByWeight.Reverse }}
    <section class="chapter">
    	{{ .Content }}
    </section>
    {{ end }}
</main>
{{ end }}

:::spoiler Screenshot (image)
:::

## 9 juin

### CMS
**Intégration et paramétrage de [Forestry](https://forestry.io) pour permettre à l’auteur d’éditer les contenus via une interface graphique.**

- déplacement des images du dossier `content` vers `static/media`
- problème en mode WYSIWYG au niveau des footnotes qui sont reconnues comme des liens par Forestry lorsque le contenu de la note est une url, et `[^3]` devient `\[^3\]`. Il vaut mieux éditer le contenu via le Raw Editor.
- ajout du reste des contenus du Cahier n°1 directement via Forestry pour tester si tout fonctionne : tout semble marcher comme prévu.

## 15 juin

### HTML
- le texte comporte des **encadrés** : quel balisage serait le plus approprié ? `<aside>` semble un bon candidat sémentiquement parlant, mais à partir du moment où je l'utilise, le markdown qui se trouve à l'intérieur de la balise n'est plus pris en compte (bold, italic, img, etc.). La solution que j'ai trouvé pour le moment est d'écrire le html brut à l'intérieur.

:x: Ne fonctionne pas

<aside>
#### Objectifs de l’Accord de Paris
![Encadré 1](media/encadre1.png "Schéma")
</aside>

:heavy_check_mark: Fonctionne

<aside>
    <h4>Objectifs de l’Accord de Paris</h4>
    <figure>
        <img src="media/encadre1.png" alt="Encadré 1">
        <figcaption>Schéma</figcaption>
    </figure>
</aside>

**Update** : L'utilisation d'un [custom shortcode](https://gohugo.io/templates/shortcode-templates/) `aside.html` permet de résoudre le problème :

<aside>
  {{ .Inner | markdownify }}
</aside>

- **espaces typographiques** : il y a-t-il un moyen au niveau de la config d’Hugo ou à l'aide du bibliothèque JS de gérer les espaces fines insécables et autres détails typographiques ?
- oui > https://github.com/jygastaud/hugo-microtypo

### CSS

Mise en place de styles de bases pour « cleaner » un peu le tout, corriger certains problèmes d'affichage (au niveau des images notamment).

- `@page` : format et marges
- réglages typographiques de bases
- pagination
- `figure` + `figcaption`
- citations
- footnotes

:::spoiler Screenshots (vidéo + image)
Vidéos :
1. [Part 1](https://github.com/design-commun/les-numeriques-situes/blob/master/documentation/2020-06-15-11_58_23-screencapture-les-numeriques-situes-720p-part1.mp4)
2. [Part 2](https://github.com/design-commun/les-numeriques-situes/blob/master/documentation/2020-06-15-11_58_23-screencapture-les-numeriques-situes-720p-part2.mp4)
3. [Part 3](https://github.com/design-commun/les-numeriques-situes/blob/master/documentation/2020-06-15-11_58_23-screencapture-les-numeriques-situes-720p-part3.mp4)

:::