506 views
###### tags: `paged-js` `design commun` # [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://gitlab.com/design-commun/situer-le-numerique ::: ## 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`: ```html <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 ```html {{ define "main" }} <main> <header> <h1>{{.Title}}</h1> </header> {{ range .Pages.ByWeight.Reverse }} <section class="chapter"> {{ .Content }} </section> {{ end }} </main> {{ end }} ``` #### Screenshots ![2020-06-08-02_02_21-screencapture-les-numeriques-situes.png](https://i.imgur.com/lvK8efo.jpg) ## 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 ```html <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 : ```html <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 #### Screenshots 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) ![2020-06-15-15_00_25-screencapture-les-numeriques-situes.png](https://i.imgur.com/M5CFhYz.jpg) ## 2 septembre ### Settings - bascule de GitHub à GitLab https://gitlab.com/design-commun/situer-le-numerique - renommage du projet ~~Les numériques situés~~ > Situer le numérique ### Déploiement :::danger Tentative de deploiement via Netlify, mais la page affichée est vide : https://situer-le-numerique.netlify.app/. Le build en local donne le même résultat. Le problème vient sans doute du du fait que le script Paged JS intervienne une fois l'HTML construit… à voir si il y a une solution. ::: À voir si en reprenant le code du [thème pagedjs-hugo de Julien](https://gitlab.pagedmedia.org/julientaq/pagedjs-hugo) si ça résoud pas le problème. ### Contenus - mise à jour des contenus de l'introduction et du cahier n°1 à partir de la dernière version du texte - ajout du [`cahier2.md`](https://gitlab.com/design-commun/situer-le-numerique/-/blob/master/content/cahier2.md) (en cours) ### HTML :::warning **Footnotes** À chaque nouveau cahier (un fichier `.md` par cahier), la numérotation repart de `1` alors qu'ell démarre bien à [^20] dans le fichier [`cahier2.md`](https://gitlab.com/design-commun/situer-le-numerique/-/blob/master/content/cahier2.md) - comment faire en sorte que les chiffres se suivent et ne recommencent pas à 1 ? ::: ### CSS - ajout de style basique pour les titres (`font-size`, `line-height`, `margin`) - `max-width: 100%` sur les `img` - gestion des marges pour les `p` et les `img` à l'intérieur des encadrés `<aside>` - `position: absolute; bottom: 0` pour les `.footnotes`. Ça pose des problèmes en page 25 quand les notes sont trop nombreuses. #### Screenshots ![2020-09-02-13_24_34-screencapture-les-numeriques-situes-1.png](https://gitlab.com/design-commun/situer-le-numerique/-/raw/master/documentation/2020-09-02-13_24_34-screencapture-les-numeriques-situes-1.jpg) ![2020-09-02-13_24_34-screencapture-les-numeriques-situes-2.png](https://gitlab.com/design-commun/situer-le-numerique/-/raw/master/documentation/2020-09-02-13_24_34-screencapture-les-numeriques-situes-2.jpg) ## 14 octobre ### Settings - correction des problème de chargement des scripts de façon à pouvoir prévisualiser le résultat depuis Netlify https://situer-le-numerique.netlify.app/ ### Contenus - ajout de (presque) tous les contenus par Gauthier - ajout de l'auteur de l'éditeur sur la `#first-page` - ajout d'un colophon à la fin ### HTML ### CSS - alignement des contenus sur une **grille de ligne de base de 8px** : gestion du `line-height`, `padding` et `margin` au cas par cas pour chaque niveau hiérachique, très long et laborieux mais on y arrive. Après ce n'est pas facile à maintenir en cas de changement de corps, il faut revoir toutes les valeurs et vérifier que ça tombe bien. À voir si je finis par utiliser la fonction `snapBaseline()` si je comprends ce qu'elle fait et comment l'utiliser. - ajout d'un `max-height` pour les images pour éviter qu'elle dépassent de la page verticalement - génération des "Cahier n°X" de façon dynamique en CSS, pour pouvoir le styler de façon spécifique pour que ça ne figure pas dans le titre courant si on l'ajoute. - **footnotes** : retour à des notes de bas de page dans le flux en supprimant le positionnement en `absolute` avec un `bottom: 0` qui posait des problèmes car ne pouvoit être splité sur plusieurs pages en l'état en cas de notes longues. ### JS - **ligne de base** : tentative d'utilisation de la fonction `snapBaseline()` montrée en exemple [ici](https://gitlab.pagedmedia.org/tools/experiments/tree/master/baseline), mais je l'ai trouvé trop complexe pour moi (je ne comprennais pas comment elle fonctionnait et je n'ai pas eu vraiment la patience de m'y confronté), donc j'ai préféré le faire « à la main » pour les textes en CSS sans automatisation, ce qui n'étais pas sans effort mais au moins j'avais une vision de clair de ce qu'il se passait. Pour les images, j'ai créé une petite fonction `snapImgBaseline()` qui permet d'arrondir la hauteur des images au multiple de 8px inférieur. - **ToC** : ### Export PDF https://gitlab.com/design-commun/situer-le-numerique/-/blob/master/documentation/20201014-situer-le-numerique.pdf ## 16 octobre ### Settings - création de tickets sur le repo GitLab par Gauthier pour les retours et les corrections : https://gitlab.com/design-commun/situer-le-numerique/-/issues ### Contenus - correction et mise à jour des contenus par Gauthier - ajout de la licence CC BY-NC-SA au sein du colophon ## 28 octobre ## 1er novembre ## 5 novembre ## 6 novembre ## 10 novembre ## 11 novembre ## 22 novembre :::warning **À compléter** La fin du projet n'a pas encore été documentée. ::: --- ### To do - [x] finir d'ajouter tout le contenu - [x] trouver une solution pour les notes de bas de page - [x] trouver une solution pour visualiser le résultat sur Netlify - [x] gérer l'alignement du texte sur une ligne de base - [x] sommaire (ToC automatique en JS) - [x] page de couverture