diff --git a/404.html b/404.html
index 8d0f3d9..0e3d20c 100644
--- a/404.html
+++ b/404.html
@@ -405,7 +405,7 @@ <h1>404</h1>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:12.984034+00:00
+    Build Date UTC : 2023-09-22 06:19:05.983394+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/advanced-notes/index.html b/advanced-notes/index.html
index 5791bb5..7d79fda 100644
--- a/advanced-notes/index.html
+++ b/advanced-notes/index.html
@@ -467,7 +467,7 @@ <h3 id="notes-iconographiques">Notes iconographiques</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.002518+00:00
+    Build Date UTC : 2023-09-22 06:19:05.985932+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/appendices/index.html b/appendices/index.html
index f320396..6455e01 100644
--- a/appendices/index.html
+++ b/appendices/index.html
@@ -463,7 +463,7 @@ <h3 id="a-laide">À l’aide !</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.006507+00:00
+    Build Date UTC : 2023-09-22 06:19:05.991417+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/autofolder/index.html b/autofolder/index.html
index 85a3af3..b7217ac 100644
--- a/autofolder/index.html
+++ b/autofolder/index.html
@@ -559,7 +559,7 @@ <h4 id="etape-5-modifications-de-print_headphp">Étape 5 : Modifications de <cod
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.007576+00:00
+    Build Date UTC : 2023-09-22 06:19:05.992952+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/booklet/index.html b/booklet/index.html
index d696e2c..49f078f 100644
--- a/booklet/index.html
+++ b/booklet/index.html
@@ -384,7 +384,7 @@ <h2 id="livret-a5">Livret A5</h2>
 <p>Le thème <em>booklet</em> comprend le code résultant de cette modification du thème par défaut. Il est possible de l’activer en le configurant dans le fichier <code>config.yml</code>:</p>
 <pre><code class="language-yml">theme: booklet
 </code></pre>
-<p>Une démo est visible sur <a href="http://ateliers.esad-pyrenees.fr/pagetypetoprint-booklet/?print">ateliers.esad-pyrenees.fr/pagetypetoprint-booklet</a></p>
+<p>Une démo est visible sur <a href="http://ateliers.esad-pyrenees.fr/pagetypetoprint/booklet/?print">ateliers.esad-pyrenees.fr/pagetypetoprint/booklet</a></p>
 <h3 id="etapes">Étapes</h3>
 <ul>
 <li><code>js/print/pagedjs.css</code><ul>
@@ -586,7 +586,7 @@ <h3 id="details-css-print">Détails CSS print</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.008901+00:00
+    Build Date UTC : 2023-09-22 06:19:05.994667+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/contenu/index.html b/contenu/index.html
index 868ae43..05a2ffb 100644
--- a/contenu/index.html
+++ b/contenu/index.html
@@ -459,7 +459,7 @@ <h3 id="le-contenu">Le contenu</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.010051+00:00
+    Build Date UTC : 2023-09-22 06:19:05.995968+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/credits/index.html b/credits/index.html
index 3aac0a5..8fb1a35 100644
--- a/credits/index.html
+++ b/credits/index.html
@@ -436,7 +436,7 @@ <h2 id="credits">Crédits</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.010845+00:00
+    Build Date UTC : 2023-09-22 06:19:05.996824+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/entretiens/index.html b/entretiens/index.html
index 6682385..9cde874 100644
--- a/entretiens/index.html
+++ b/entretiens/index.html
@@ -444,7 +444,7 @@ <h2 id="entretiens">Entretiens</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.011615+00:00
+    Build Date UTC : 2023-09-22 06:19:05.997599+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/extend/index.html b/extend/index.html
index 8c20942..e6f5a73 100644
--- a/extend/index.html
+++ b/extend/index.html
@@ -439,7 +439,7 @@ <h2 id="extension">Extension</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.012266+00:00
+    Build Date UTC : 2023-09-22 06:19:05.998277+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/extendcss/index.html b/extendcss/index.html
index e745689..0ed95aa 100644
--- a/extendcss/index.html
+++ b/extendcss/index.html
@@ -504,7 +504,7 @@ <h3 id="modifier-le-format">Modifier le format</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.012953+00:00
+    Build Date UTC : 2023-09-22 06:19:05.998998+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/gabarits/index.html b/gabarits/index.html
index 0852d74..572c525 100644
--- a/gabarits/index.html
+++ b/gabarits/index.html
@@ -446,7 +446,7 @@ <h2 id="etendre-ou-modifier-loutil">Étendre ou modifier l’outil</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.013770+00:00
+    Build Date UTC : 2023-09-22 06:19:05.999807+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/glossaire/index.html b/glossaire/index.html
index e3497f6..6275d64 100644
--- a/glossaire/index.html
+++ b/glossaire/index.html
@@ -446,7 +446,7 @@ <h2 id="glossaire">Glossaire</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.014544+00:00
+    Build Date UTC : 2023-09-22 06:19:06.000553+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/images/index.html b/images/index.html
index c45eddd..4899a52 100644
--- a/images/index.html
+++ b/images/index.html
@@ -463,7 +463,7 @@ <h3 id="videos">Vidéos</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.015193+00:00
+    Build Date UTC : 2023-09-22 06:19:06.001252+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index aacced5..0aeb266 100644
--- a/index.html
+++ b/index.html
@@ -392,7 +392,7 @@ <h3 id="fonctionnement">Fonctionnement</h3>
 <li>et en générer un PDF imprimable, via Paged.js et les fonctionnalités internes des navigateurs.</li>
 </ol>
 <h3 id="demo">Démo</h3>
-<p>Une démo est accessible en ligne sur <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/">ateliers.esad-pyrenees.fr/pagetypetoprint</a> avec sa version <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/?print"><em>print</em></a> et le <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/document.pdf">document pdf</a> généré. </p>
+<p>Une démo est accessible en ligne sur <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/">ateliers.esad-pyrenees.fr/pagetypetoprint</a> avec sa version <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/esadpyrenees/?print"><em>print</em></a> et le <a href="https://ateliers.esad-pyrenees.fr/pagetypetoprint/esadpyrenees/document.pdf">document pdf</a> généré. </p>
 <h3 id="open-source">Open source</h3>
 <p>PageTypeToPrint est un logiciel libre. Son code est accessible sur : <a href="https://github.com/esadpyrenees/PageTypeToPrint/">github.com/esadpyrenees/PageTypeToPrint</a>.</p>
 <p><a class="bigbutton" href="https://github.com/esadpyrenees/PageTypeToPrint/zipball/main/">↓ Télécharger </a> </p>
@@ -422,7 +422,7 @@ <h3 id="open-source">Open source</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.001080+00:00
+    Build Date UTC : 2023-09-22 06:19:05.983947+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/installation/index.html b/installation/index.html
index fb1c6c7..0ab714f 100644
--- a/installation/index.html
+++ b/installation/index.html
@@ -468,7 +468,7 @@ <h3 id="version-de-php">Version de PHP</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.016123+00:00
+    Build Date UTC : 2023-09-22 06:19:06.002911+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/markdown/index.html b/markdown/index.html
index 329ae5b..4b41f50 100644
--- a/markdown/index.html
+++ b/markdown/index.html
@@ -586,7 +586,7 @@ <h3 id="aller-plus-loin">Aller plus loin</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.017237+00:00
+    Build Date UTC : 2023-09-22 06:19:06.004274+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/notes/index.html b/notes/index.html
index 1410232..490723b 100644
--- a/notes/index.html
+++ b/notes/index.html
@@ -469,7 +469,7 @@ <h3 id="modifier-laffichage-des-notes">Modifier l’affichage des notes</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.019056+00:00
+    Build Date UTC : 2023-09-22 06:19:06.006517+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/online/index.html b/online/index.html
index 3f89aa4..5926b8f 100644
--- a/online/index.html
+++ b/online/index.html
@@ -446,7 +446,7 @@ <h3 id="pttp-comme-generateur-de-site-statique">PTTP comme générateur de site
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.020004+00:00
+    Build Date UTC : 2023-09-22 06:19:06.007731+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/pads/index.html b/pads/index.html
index 1eab247..2a702b9 100644
--- a/pads/index.html
+++ b/pads/index.html
@@ -447,7 +447,7 @@ <h2 id="edition-collaborative">Édition collaborative</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.020752+00:00
+    Build Date UTC : 2023-09-22 06:19:06.008641+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/print/index.html b/print/index.html
index 0ed4012..f41c7b9 100644
--- a/print/index.html
+++ b/print/index.html
@@ -438,7 +438,7 @@ <h3 id="version-finale-telechargeable">Version finale téléchargeable</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.021576+00:00
+    Build Date UTC : 2023-09-22 06:19:06.009825+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/references/index.html b/references/index.html
index 8f7c8f1..1669d4f 100644
--- a/references/index.html
+++ b/references/index.html
@@ -496,7 +496,7 @@ <h2 id="colonnes">Colonnes</h2>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.022296+00:00
+    Build Date UTC : 2023-09-22 06:19:06.010840+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/search.html b/search.html
index 081ee44..888c473 100644
--- a/search.html
+++ b/search.html
@@ -407,7 +407,7 @@ <h1>Résultats</h1>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.000515+00:00
+    Build Date UTC : 2023-09-22 06:19:05.966515+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/search/search_index.json b/search/search_index.json
index 6e88ed9..2b31165 100644
--- a/search/search_index.json
+++ b/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"PageTypeToPrint est un outil de mise en page et de publication web + print . Con\u00e7u originellement comme un gabarit de mise en forme des m\u00e9moires des \u00e9tudiant\u22c5es de l\u2019\u00c9cole sup\u00e9rieure d\u2019art et de design des Pyr\u00e9nes, il est bas\u00e9 sur la simplicit\u00e9 de l\u2019\u00e9dition (contenu textuel au format markdown ), mais peut \u00eatre adapt\u00e9, augment\u00e9 et personnalis\u00e9. Il produit un contenu lisible en ligne sous la forme d\u2019une page web et permet de g\u00e9n\u00e9rer un document PDF t\u00e9l\u00e9chargeable et imprimable. Fonctionnement PageTypeToPrint est un outil qui\u2026 utilise le langage PHP, pour transformer des textes au format markdown en une page HTML, afin de pouvoir l\u2019afficher dans un navigateur web, et en g\u00e9n\u00e9rer un PDF imprimable, via Paged.js et les fonctionnalit\u00e9s internes des navigateurs. D\u00e9mo Une d\u00e9mo est accessible en ligne sur ateliers.esad-pyrenees.fr/pagetypetoprint avec sa version print et le document pdf g\u00e9n\u00e9r\u00e9. Open source PageTypeToPrint est un logiciel libre. Son code est accessible sur : github.com/esadpyrenees/PageTypeToPrint . \u2193 T\u00e9l\u00e9charger","title":"Accueil"},{"location":"#fonctionnement","text":"PageTypeToPrint est un outil qui\u2026 utilise le langage PHP, pour transformer des textes au format markdown en une page HTML, afin de pouvoir l\u2019afficher dans un navigateur web, et en g\u00e9n\u00e9rer un PDF imprimable, via Paged.js et les fonctionnalit\u00e9s internes des navigateurs.","title":"Fonctionnement"},{"location":"#demo","text":"Une d\u00e9mo est accessible en ligne sur ateliers.esad-pyrenees.fr/pagetypetoprint avec sa version print et le document pdf g\u00e9n\u00e9r\u00e9.","title":"D\u00e9mo"},{"location":"#open-source","text":"PageTypeToPrint est un logiciel libre. Son code est accessible sur : github.com/esadpyrenees/PageTypeToPrint . \u2193 T\u00e9l\u00e9charger","title":"Open source"},{"location":"advanced-notes/","text":"Notes avanc\u00e9es PageTypeToPrint g\u00e8re nativement deux types de notes : des notes \u00ab textuelles \u00bb et des notes \u00ab iconographiques \u00bb. Notes textuelles Elles sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce \u00e0 l\u2019extension MarkdownItFootnote et suivent le format d\u2019appel et de cr\u00e9ation de notes markdown le plus commun : Ins\u00e9rer un appel de note[^appel], puis cr\u00e9er un paragraphe contentant : [^appel]: Contenu de la note. Les appels de notes sont ins\u00e9r\u00e9s au fil du texte : <p>Ins\u00e9rer un appel de note<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">1</a></sup>, puis cr\u00e9er un paragraphe contentant : </p> L\u2019ensemble des notes se retrouve \u00e0 la fin du document, dans une liste. Un lien de retour vers l\u2019appel de note est ins\u00e9r\u00e9 \u00e0 la fin de son contenu : <hr class=\"footnotes-sep\"> <section class=\"footnotes\"> <ol class=\"footnotes-list\"> <li id=\"fn1\" class=\"footnote-item\"><p>Contenu de la note <a href=\"#fnref1\" class=\"footnote-backref\">&#8617;&#65038;</a><p></li> [\u2026] </ol> </section> Affichage \u00e9cran : notes textuelles en marge Pour l\u2019affichage \u00e0 l\u2019\u00e9cran, le script js/screen/sideNotes.js parcourt les appels de note, r\u00e9cup\u00e8re leur contenu cible et l\u2019ins\u00e8re au fil du texte, \u00e0 la place de l\u2019appel de note initial, dans une structure HTML constitu\u00e9e de trois \u00e9l\u00e9ments : <label class=\"sn-toggle-label\" for=\"sn-note-fn1\">1</label> <input type=\"checkbox\" id=\"sn-note-fn1\" class=\"sn-toggle\"> <aside class=\"sn-note\" data-ref=\"2\"><p>Contenu de la note</p></aside> Ces \u00e9l\u00e9ments permettent un affichage responsive des notes : soit sur le c\u00f4t\u00e9 du texte si le viewport est suffisamment grand, soit au sein du texte apr\u00e8s un clic sur le label en affichage mobile (voir la section \u201cNotes\u201d du fichier css/styles.css ). Impression : notes textuelles en bas de page En contexte d\u2019impression, la structure HTML des notes textuelles est soumise \u00e0 une modification similaire gr\u00e2ce au script js/screen/footNotes.js afin de suivre le balisage recommand\u00e9 dans la sp\u00e9cification HTML du W3C. Les notes textuelles seront ainsi int\u00e9gr\u00e9es au bas de chaque page par la librairie paged.js . Si l\u2019on souhaite d\u00e9placer les notes de bas de page en marge, ce script devra \u00eatre d\u00e9sactiv\u00e9 et une op\u00e9ration similaire \u00e0 celle \u00e0 laquelles sont soumises les notes iconographiques devra \u00eatre op\u00e9r\u00e9e. Notes iconographiques Les notes iconographiques ( ou images de note ) sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce au shortcode (imagenote: fichier.jpg) ins\u00e9r\u00e9 apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg caption: Gustave Dor\u00e9) sont grav\u00e9es dans les m\u00e9moires. Elles peuvent b\u00e9n\u00e9ficier de l\u2019ensemble des attributs li\u00e9s aux figures ( class et caption ) et sont ins\u00e9r\u00e9es au fil du texte gr\u00e2ce au parsing des shortcodes de la librairie _inc/Specials/Tags.php . En contexte d\u2019impression, elles mises en marge gr\u00e2ce au script js/print/imageNotes.js .","title":"Notes avanc\u00e9es"},{"location":"advanced-notes/#notes-avancees","text":"PageTypeToPrint g\u00e8re nativement deux types de notes : des notes \u00ab textuelles \u00bb et des notes \u00ab iconographiques \u00bb.","title":"Notes avanc\u00e9es"},{"location":"advanced-notes/#notes-textuelles","text":"Elles sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce \u00e0 l\u2019extension MarkdownItFootnote et suivent le format d\u2019appel et de cr\u00e9ation de notes markdown le plus commun : Ins\u00e9rer un appel de note[^appel], puis cr\u00e9er un paragraphe contentant : [^appel]: Contenu de la note. Les appels de notes sont ins\u00e9r\u00e9s au fil du texte : <p>Ins\u00e9rer un appel de note<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">1</a></sup>, puis cr\u00e9er un paragraphe contentant : </p> L\u2019ensemble des notes se retrouve \u00e0 la fin du document, dans une liste. Un lien de retour vers l\u2019appel de note est ins\u00e9r\u00e9 \u00e0 la fin de son contenu : <hr class=\"footnotes-sep\"> <section class=\"footnotes\"> <ol class=\"footnotes-list\"> <li id=\"fn1\" class=\"footnote-item\"><p>Contenu de la note <a href=\"#fnref1\" class=\"footnote-backref\">&#8617;&#65038;</a><p></li> [\u2026] </ol> </section>","title":"Notes textuelles"},{"location":"advanced-notes/#affichage-ecran-notes-textuelles-en-marge","text":"Pour l\u2019affichage \u00e0 l\u2019\u00e9cran, le script js/screen/sideNotes.js parcourt les appels de note, r\u00e9cup\u00e8re leur contenu cible et l\u2019ins\u00e8re au fil du texte, \u00e0 la place de l\u2019appel de note initial, dans une structure HTML constitu\u00e9e de trois \u00e9l\u00e9ments : <label class=\"sn-toggle-label\" for=\"sn-note-fn1\">1</label> <input type=\"checkbox\" id=\"sn-note-fn1\" class=\"sn-toggle\"> <aside class=\"sn-note\" data-ref=\"2\"><p>Contenu de la note</p></aside> Ces \u00e9l\u00e9ments permettent un affichage responsive des notes : soit sur le c\u00f4t\u00e9 du texte si le viewport est suffisamment grand, soit au sein du texte apr\u00e8s un clic sur le label en affichage mobile (voir la section \u201cNotes\u201d du fichier css/styles.css ).","title":"Affichage \u00e9cran : notes textuelles en marge"},{"location":"advanced-notes/#impression-notes-textuelles-en-bas-de-page","text":"En contexte d\u2019impression, la structure HTML des notes textuelles est soumise \u00e0 une modification similaire gr\u00e2ce au script js/screen/footNotes.js afin de suivre le balisage recommand\u00e9 dans la sp\u00e9cification HTML du W3C. Les notes textuelles seront ainsi int\u00e9gr\u00e9es au bas de chaque page par la librairie paged.js . Si l\u2019on souhaite d\u00e9placer les notes de bas de page en marge, ce script devra \u00eatre d\u00e9sactiv\u00e9 et une op\u00e9ration similaire \u00e0 celle \u00e0 laquelles sont soumises les notes iconographiques devra \u00eatre op\u00e9r\u00e9e.","title":"Impression : notes textuelles en bas de page"},{"location":"advanced-notes/#notes-iconographiques","text":"Les notes iconographiques ( ou images de note ) sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce au shortcode (imagenote: fichier.jpg) ins\u00e9r\u00e9 apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg caption: Gustave Dor\u00e9) sont grav\u00e9es dans les m\u00e9moires. Elles peuvent b\u00e9n\u00e9ficier de l\u2019ensemble des attributs li\u00e9s aux figures ( class et caption ) et sont ins\u00e9r\u00e9es au fil du texte gr\u00e2ce au parsing des shortcodes de la librairie _inc/Specials/Tags.php . En contexte d\u2019impression, elles mises en marge gr\u00e2ce au script js/print/imageNotes.js .","title":"Notes iconographiques"},{"location":"appendices/","text":"Annexes Pour les annexes, organis\u00e9es sur une grille de 12 colonnes ( template appendices ), quelques class sont pr\u00e9d\u00e9finies pour faciliter la mise en page : offset0 : pas de d\u00e9calage (valeur par d\u00e9faut) offset2 d\u00e9cale l\u2019image en colonne 3 offset4 d\u00e9cale l\u2019image en colonne 5 offset6 d\u00e9cale l\u2019image en colonne 7 offset8 d\u00e9cale l\u2019image en colonne 9 quarter dimensionne l\u2019image sur 3 colonnes (un quart de la largeur \u2014 valeur par d\u00e9faut) third dimensionne l\u2019image sur 4 colonnes (un tiers de la largeur) half dimensionne l\u2019image sur 6 colonnes (la moiti\u00e9 de la largeur) twothird dimensionne l\u2019image sur 8 colonnes (deux tiers de la largeur) threequarter dimensionne l\u2019image sur 9 colonnes (trois quarts de la largeur) full dimensionne l\u2019image sur 12 colonnes (toute la largeur) Par exemple : (figure: url/de_limage.jpg class: notwhite offset6 half) Web vs print Pour dif\u00e9rencier la mise en page des images entre l\u2019\u00e9cran et l\u2019impression, on peut \u00e9tablir des styles diff\u00e9rents pour chaque contexte : (figure: images/01.jpg class: half print: full) \u2191 Cette image occupera la moiti\u00e9 de la largeur de l\u2019empagement en version \u00e9cran, et la pleine largeur en version imprimable. \u00c0 l\u2019aide ! Pour aider \u00e0 la mise en page \u201cvisuelle\u201d des images, on peut activer un utilitaire visuel qui aide \u00e0 d\u00e9terminer le code d\u2019int\u00e9gration des images. En contexte \u00e9cran, ajouter /?layout \u00e0 l\u2019URL. En contexte de pr\u00e9visualisation print : /?print&layout . Chaque figure se voit alors dot\u00e9 d\u2019un outil permettant de d\u00e9finir la largeur de la figure ( quarter , third , half , twothird , threequarter ou full ) et son d\u00e9calage ( offset0 , offset2 , offset4 , offset6 ou offset8 ). \u26a0\ufe0f Le code d\u2019int\u00e9gration de la figure est alors copi\u00e9 dans le presse-papier, et doit \u00eatre coll\u00e9 dans le document markdown source. Attention, en contexte d\u2019impression, la mise en page n\u2019est pas recalcul\u00e9e. Il faut modifier le code d\u2019int\u00e9gration de la figure concern\u00e9e dans le fichier markdown, l\u2019enregistrer, puis actualiser la page dans le navigateur.","title":"Annexes"},{"location":"appendices/#annexes","text":"Pour les annexes, organis\u00e9es sur une grille de 12 colonnes ( template appendices ), quelques class sont pr\u00e9d\u00e9finies pour faciliter la mise en page : offset0 : pas de d\u00e9calage (valeur par d\u00e9faut) offset2 d\u00e9cale l\u2019image en colonne 3 offset4 d\u00e9cale l\u2019image en colonne 5 offset6 d\u00e9cale l\u2019image en colonne 7 offset8 d\u00e9cale l\u2019image en colonne 9 quarter dimensionne l\u2019image sur 3 colonnes (un quart de la largeur \u2014 valeur par d\u00e9faut) third dimensionne l\u2019image sur 4 colonnes (un tiers de la largeur) half dimensionne l\u2019image sur 6 colonnes (la moiti\u00e9 de la largeur) twothird dimensionne l\u2019image sur 8 colonnes (deux tiers de la largeur) threequarter dimensionne l\u2019image sur 9 colonnes (trois quarts de la largeur) full dimensionne l\u2019image sur 12 colonnes (toute la largeur) Par exemple : (figure: url/de_limage.jpg class: notwhite offset6 half)","title":"Annexes"},{"location":"appendices/#web-vs-print","text":"Pour dif\u00e9rencier la mise en page des images entre l\u2019\u00e9cran et l\u2019impression, on peut \u00e9tablir des styles diff\u00e9rents pour chaque contexte : (figure: images/01.jpg class: half print: full) \u2191 Cette image occupera la moiti\u00e9 de la largeur de l\u2019empagement en version \u00e9cran, et la pleine largeur en version imprimable.","title":"Web vs print"},{"location":"appendices/#a-laide","text":"Pour aider \u00e0 la mise en page \u201cvisuelle\u201d des images, on peut activer un utilitaire visuel qui aide \u00e0 d\u00e9terminer le code d\u2019int\u00e9gration des images. En contexte \u00e9cran, ajouter /?layout \u00e0 l\u2019URL. En contexte de pr\u00e9visualisation print : /?print&layout . Chaque figure se voit alors dot\u00e9 d\u2019un outil permettant de d\u00e9finir la largeur de la figure ( quarter , third , half , twothird , threequarter ou full ) et son d\u00e9calage ( offset0 , offset2 , offset4 , offset6 ou offset8 ). \u26a0\ufe0f Le code d\u2019int\u00e9gration de la figure est alors copi\u00e9 dans le presse-papier, et doit \u00eatre coll\u00e9 dans le document markdown source. Attention, en contexte d\u2019impression, la mise en page n\u2019est pas recalcul\u00e9e. Il faut modifier le code d\u2019int\u00e9gration de la figure concern\u00e9e dans le fichier markdown, l\u2019enregistrer, puis actualiser la page dans le navigateur.","title":"\u00c0 l\u2019aide !"},{"location":"autofolder/","text":"Catalogue d\u2019images On peut d\u00e9terminer que la source d\u2019un contenu ne soit ni un fichier markdown, ni l\u2019URL d\u2019un pad, mais un dossier d\u2019images. C\u2019est une solution moins souple et moins pr\u00e9cise que la structuration d\u2019une s\u00e9rie d\u2019images via les logiques d\u00e9crites dans la gestion des annexes , mais beaucoup plus rapide :) parts: - title: Images en vrac file: \"\" # la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) folder: images/dossier # on d\u00e9clare le chemin vers le dossier template: autofolder # le gabarit de mise en page \u2026 Les fichiers gif, jpg, png, svg et webp seront automatiquement int\u00e9gr\u00e9s dans une succession d\u2019\u00e9l\u00e9ments <figure> . Les images verticales (hauteur > largeur) auront une class portrait ; les horizontales une class landscape . Exemple pas \u00e0 pas Le th\u00e8me catalogue simplifie \u00e0 l\u2019extr\u00eame les logiques initiales de PageTypeToPrint pour n\u2019en conserver qu\u2019une structure minimale : \u00e0 l\u2019\u00e9cran : une simple page qui liste des images en faisant varier leur taille et leur mise en page de mani\u00e8re al\u00e9atoire. en version imprim\u00e9e : un format A4 ferm\u00e9 impos\u00e9 automatiquement sur format A3 (feuilles \u00e0 plier et encarter pour fabriquer un livret). Une d\u00e9mo est accessible dans sa version \u00e9cran et dans sa version imprimable . \u00c9tape 1 : configuration du document # Le th\u00e8me theme: \"catalogue\" # Le titre title: Three D Scans # Des m\u00e9ta-donn\u00e9es sp\u00e9cifiques peuvent \u00eatre cr\u00e9\u00e9es url: threedscans.org date: 19/09/2023 # Structure du contenu parts: - title: Three D Scans folder: content/images # \u2190 le dossier d\u2019images template: autofolder # \u2190 le gabarit - title: About file : content/about.md template : default \u00c9tape 2 : simplification de body.php Suppression de la navigation, du sommaire et des titres courants. <header id=\"header\"> <!-- Le titre --> <h1><?= $title ?></h1> <!-- le folio --> <span class=\"folio\"></span> <!-- affichage des m\u00e9ta-donn\u00e9es sp\u00e9cifiques --> <div class=\"meta\"> <span class=\"meta-url\"><a href=\"<?= $url ?>\"><?= $url ?></a></span> <span class=\"meta-date\"><?= $date ?></span> </div> </header> <main id=\"main\"> <!-- le contenu --> <?= $html() ?> </main> \u00c9tape 2 : simplification de la CSS style.css Une large part de la feuille de style par d\u00e9faut n\u2019est pas utile dans le cadre d\u2019un simple catalogue d\u2019image. On peut ainsi supprimer une grande part des r\u00e8gles de mise en forme : m\u00e9ta-donn\u00e9es, typographie, navigation, gabarits interview , appendices , glossaire, colonnes, images de note, notes de marge, etc. Les r\u00e8gles correspondant au gabarit autofolder peuvent d\u00e9terminer une grille responsive et pr\u00e9ciser le comportement des images et des l\u00e9gendes : .autofolder .content { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: var(--spacer); } .autofolder .figure { margin: 0; padding: 0; } .autofolder img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } .autofolder figcaption { text-align: center; font-size: .75em; text-transform: uppercase; letter-spacing: 0.15em; height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } \u00c9tape 3 : Modifications de screen_head.php Les appels du script screen/sidenotes.js et des scripts d\u2019 aide \u00e0 la mise en page sont supprim\u00e9s. Dans l\u2019exemple de th\u00e8me catalogue , on ajoute un appel au script ( screen/script.js ), qui intervient pour modifier al\u00e9atoirement la largeur des figures et d\u00e9structurer la grille. \u00c9tape 4 : Modifications de la CSS print.css D\u00e9claration du format de page et de la pagination par d\u00e9faut, ainsi que de la page de couverture et des pages vides. @page { size: 210mm 297mm; } @page:right { margin: 1cm 2cm 2.5cm 1cm; @bottom-right-corner { content: element(folioRunning); text-align: left; } } @page:left { margin: 1cm 1cm 2.5cm 2cm; @bottom-left-corner { content: element(folioRunning); text-align: left; } } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } \u00c9tape 5 : Modifications de print_head.php Les appels des scripts li\u00e9s aux notes iconographiques et de bas de page, au sommaire, etc. sont supprim\u00e9s. Le format ferm\u00e9 (A4) \u00e9tant d\u00e9fini en CSS, on inclue l\u2019appel du script print/imposition.js qui permet de g\u00e9n\u00e9rer l\u2019imposition des pages A4 et de modifier le format de sortie pour que deux pages puissent \u00eatre imprim\u00e9es sur la m\u00eame face. Si besoin, ce script ins\u00e8re des pages blanches pour que la pagination soit un multiple de quatre. Dans l\u2019exemple de th\u00e8me catalogue \u2013juste pour montrer que c\u2019est possible\u2026\u2013, on ajoute un appel au script print/bigfigures.js , qui intervient pour modifier la largeur et la hauteur de certaines figures, s\u00e9lectionn\u00e9es manuellement via leur id .","title":"Catalogue d\u2019images"},{"location":"autofolder/#catalogue-dimages","text":"On peut d\u00e9terminer que la source d\u2019un contenu ne soit ni un fichier markdown, ni l\u2019URL d\u2019un pad, mais un dossier d\u2019images. C\u2019est une solution moins souple et moins pr\u00e9cise que la structuration d\u2019une s\u00e9rie d\u2019images via les logiques d\u00e9crites dans la gestion des annexes , mais beaucoup plus rapide :) parts: - title: Images en vrac file: \"\" # la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) folder: images/dossier # on d\u00e9clare le chemin vers le dossier template: autofolder # le gabarit de mise en page \u2026 Les fichiers gif, jpg, png, svg et webp seront automatiquement int\u00e9gr\u00e9s dans une succession d\u2019\u00e9l\u00e9ments <figure> . Les images verticales (hauteur > largeur) auront une class portrait ; les horizontales une class landscape .","title":"Catalogue d\u2019images"},{"location":"autofolder/#exemple-pas-a-pas","text":"Le th\u00e8me catalogue simplifie \u00e0 l\u2019extr\u00eame les logiques initiales de PageTypeToPrint pour n\u2019en conserver qu\u2019une structure minimale : \u00e0 l\u2019\u00e9cran : une simple page qui liste des images en faisant varier leur taille et leur mise en page de mani\u00e8re al\u00e9atoire. en version imprim\u00e9e : un format A4 ferm\u00e9 impos\u00e9 automatiquement sur format A3 (feuilles \u00e0 plier et encarter pour fabriquer un livret). Une d\u00e9mo est accessible dans sa version \u00e9cran et dans sa version imprimable .","title":"Exemple pas \u00e0 pas"},{"location":"autofolder/#etape-1-configuration-du-document","text":"# Le th\u00e8me theme: \"catalogue\" # Le titre title: Three D Scans # Des m\u00e9ta-donn\u00e9es sp\u00e9cifiques peuvent \u00eatre cr\u00e9\u00e9es url: threedscans.org date: 19/09/2023 # Structure du contenu parts: - title: Three D Scans folder: content/images # \u2190 le dossier d\u2019images template: autofolder # \u2190 le gabarit - title: About file : content/about.md template : default","title":"\u00c9tape 1\u00a0: configuration du document"},{"location":"autofolder/#etape-2-simplification-de-bodyphp","text":"Suppression de la navigation, du sommaire et des titres courants. <header id=\"header\"> <!-- Le titre --> <h1><?= $title ?></h1> <!-- le folio --> <span class=\"folio\"></span> <!-- affichage des m\u00e9ta-donn\u00e9es sp\u00e9cifiques --> <div class=\"meta\"> <span class=\"meta-url\"><a href=\"<?= $url ?>\"><?= $url ?></a></span> <span class=\"meta-date\"><?= $date ?></span> </div> </header> <main id=\"main\"> <!-- le contenu --> <?= $html() ?> </main>","title":"\u00c9tape 2 : simplification de body.php"},{"location":"autofolder/#etape-2-simplification-de-la-css-stylecss","text":"Une large part de la feuille de style par d\u00e9faut n\u2019est pas utile dans le cadre d\u2019un simple catalogue d\u2019image. On peut ainsi supprimer une grande part des r\u00e8gles de mise en forme : m\u00e9ta-donn\u00e9es, typographie, navigation, gabarits interview , appendices , glossaire, colonnes, images de note, notes de marge, etc. Les r\u00e8gles correspondant au gabarit autofolder peuvent d\u00e9terminer une grille responsive et pr\u00e9ciser le comportement des images et des l\u00e9gendes : .autofolder .content { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: var(--spacer); } .autofolder .figure { margin: 0; padding: 0; } .autofolder img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } .autofolder figcaption { text-align: center; font-size: .75em; text-transform: uppercase; letter-spacing: 0.15em; height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }","title":"\u00c9tape 2 : simplification de la CSS style.css"},{"location":"autofolder/#etape-3-modifications-de-screen_headphp","text":"Les appels du script screen/sidenotes.js et des scripts d\u2019 aide \u00e0 la mise en page sont supprim\u00e9s. Dans l\u2019exemple de th\u00e8me catalogue , on ajoute un appel au script ( screen/script.js ), qui intervient pour modifier al\u00e9atoirement la largeur des figures et d\u00e9structurer la grille.","title":"\u00c9tape 3 : Modifications de screen_head.php"},{"location":"autofolder/#etape-4-modifications-de-la-css-printcss","text":"D\u00e9claration du format de page et de la pagination par d\u00e9faut, ainsi que de la page de couverture et des pages vides. @page { size: 210mm 297mm; } @page:right { margin: 1cm 2cm 2.5cm 1cm; @bottom-right-corner { content: element(folioRunning); text-align: left; } } @page:left { margin: 1cm 1cm 2.5cm 2cm; @bottom-left-corner { content: element(folioRunning); text-align: left; } } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } }","title":"\u00c9tape 4 : Modifications de la CSS print.css"},{"location":"autofolder/#etape-5-modifications-de-print_headphp","text":"Les appels des scripts li\u00e9s aux notes iconographiques et de bas de page, au sommaire, etc. sont supprim\u00e9s. Le format ferm\u00e9 (A4) \u00e9tant d\u00e9fini en CSS, on inclue l\u2019appel du script print/imposition.js qui permet de g\u00e9n\u00e9rer l\u2019imposition des pages A4 et de modifier le format de sortie pour que deux pages puissent \u00eatre imprim\u00e9es sur la m\u00eame face. Si besoin, ce script ins\u00e8re des pages blanches pour que la pagination soit un multiple de quatre. Dans l\u2019exemple de th\u00e8me catalogue \u2013juste pour montrer que c\u2019est possible\u2026\u2013, on ajoute un appel au script print/bigfigures.js , qui intervient pour modifier la largeur et la hauteur de certaines figures, s\u00e9lectionn\u00e9es manuellement via leur id .","title":"\u00c9tape 5 : Modifications de print_head.php"},{"location":"booklet/","text":"Livret A5 Cet exemple se propose de transformer le gabarit d\u2019une simple page A4 (recto seul) vers une double page A5 (recto-verso) en supprimant l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es. Le th\u00e8me booklet comprend le code r\u00e9sultant de cette modification du th\u00e8me par d\u00e9faut. Il est possible de l\u2019activer en le configurant dans le fichier config.yml : theme: booklet Une d\u00e9mo est visible sur ateliers.esad-pyrenees.fr/pagetypetoprint-booklet \u00c9tapes js/print/pagedjs.css desactivation de la feuille de style interface/recto-verso.css body.php courants et folio: suppression du logo ESAD et du dipl\u00f4me courants et folio: r\u00e9organisation pour positionnement en bas de page uniquement suppression des notes de marge au profit de notes de bas de page : suppression des scripts js/screen/sideNotes.js et js/print/imageNotes.js css/print.css format et marges gestion des titres courants notes de marge mise en page du sommaire D\u00e9tails CSS print Format et marges: @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left { content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right { margin: 1cm 2cm 2.5cm 1cm; } @page:left { margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-left { display: none; } } Couverture, r\u00e9organisation : .meta-year { grid-column: 3; grid-row: 1; } .meta-data { grid-column: 1; grid-row: 1; } Modifications des titres courants : /* running title */ .runningtitle { display: none; position: running(titleRunning); } .folio{ font-weight: bold; text-align: right; } .folio::before{ content: counter(page); font-weight: bold; } .pagedjs_margin .runningtitle { gap:var(--spacer); padding: 1cm 0 .5cm; display: flex !important; justify-content: space-between; } .pagedjs_left_page .runningtitle { flex-direction: row-reverse; } .pagedjs_right_page .runningtitle { flex-direction: row; } .pagedjs_left_page .runningtitle .title, .pagedjs_right_page .runningtitle .name { display: none; } Modification des images de note : .imagenote { width: 33%; display: block; margin: var(--spacer) 0 0 var(--spacer); font-size: var(--smallsize); } .imagenote.printleft { float: left; margin: var(--spacer) var(--spacer) 0 0; } .imagenote.printright { float: right; margin: var(--spacer) 0 0 var(--spacer); } Pour les annexes, suppression des marges sp\u00e9cifiques, affichage du titre et suppresion du retrait dans les interviews : section.appendices { /* margin-left: -6.5cm; */ } .appendices > h2 { /* display: none; */ } section.references { /* margin-left: -6.5cm; */ } .references > h2 { /* display: none; */ } .interview > h2 { /* display: none; */ } .interview p { --indent: 0px; } Glossaire et r\u00e9f\u00e9rences bibliographiques sur deux colonnes uniquement : .glossary, .columns { font-size: 0.85em; columns: 2; column-gap: var(--spacer); } Saut de page avant le sommaire : #nav { page-break-before: right; page-break-after: right; counter-reset: page 1; height: auto; } Mise en page du sommaire : #list-toc-generated .toc-element a::before { /* position: absolute; */ /* margin-left: calc(-4em - 20px); */ display: inline-block; text-align: left; } #list-toc-generated .toc-element-level-2 a::before { /* margin-left: calc(-4em - 40px); */ }","title":"Livret"},{"location":"booklet/#livret-a5","text":"Cet exemple se propose de transformer le gabarit d\u2019une simple page A4 (recto seul) vers une double page A5 (recto-verso) en supprimant l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es. Le th\u00e8me booklet comprend le code r\u00e9sultant de cette modification du th\u00e8me par d\u00e9faut. Il est possible de l\u2019activer en le configurant dans le fichier config.yml : theme: booklet Une d\u00e9mo est visible sur ateliers.esad-pyrenees.fr/pagetypetoprint-booklet","title":"Livret A5"},{"location":"booklet/#etapes","text":"js/print/pagedjs.css desactivation de la feuille de style interface/recto-verso.css body.php courants et folio: suppression du logo ESAD et du dipl\u00f4me courants et folio: r\u00e9organisation pour positionnement en bas de page uniquement suppression des notes de marge au profit de notes de bas de page : suppression des scripts js/screen/sideNotes.js et js/print/imageNotes.js css/print.css format et marges gestion des titres courants notes de marge mise en page du sommaire","title":"\u00c9tapes"},{"location":"booklet/#details-css-print","text":"Format et marges: @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left { content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right { margin: 1cm 2cm 2.5cm 1cm; } @page:left { margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-left { display: none; } } Couverture, r\u00e9organisation : .meta-year { grid-column: 3; grid-row: 1; } .meta-data { grid-column: 1; grid-row: 1; } Modifications des titres courants : /* running title */ .runningtitle { display: none; position: running(titleRunning); } .folio{ font-weight: bold; text-align: right; } .folio::before{ content: counter(page); font-weight: bold; } .pagedjs_margin .runningtitle { gap:var(--spacer); padding: 1cm 0 .5cm; display: flex !important; justify-content: space-between; } .pagedjs_left_page .runningtitle { flex-direction: row-reverse; } .pagedjs_right_page .runningtitle { flex-direction: row; } .pagedjs_left_page .runningtitle .title, .pagedjs_right_page .runningtitle .name { display: none; } Modification des images de note : .imagenote { width: 33%; display: block; margin: var(--spacer) 0 0 var(--spacer); font-size: var(--smallsize); } .imagenote.printleft { float: left; margin: var(--spacer) var(--spacer) 0 0; } .imagenote.printright { float: right; margin: var(--spacer) 0 0 var(--spacer); } Pour les annexes, suppression des marges sp\u00e9cifiques, affichage du titre et suppresion du retrait dans les interviews : section.appendices { /* margin-left: -6.5cm; */ } .appendices > h2 { /* display: none; */ } section.references { /* margin-left: -6.5cm; */ } .references > h2 { /* display: none; */ } .interview > h2 { /* display: none; */ } .interview p { --indent: 0px; } Glossaire et r\u00e9f\u00e9rences bibliographiques sur deux colonnes uniquement : .glossary, .columns { font-size: 0.85em; columns: 2; column-gap: var(--spacer); } Saut de page avant le sommaire : #nav { page-break-before: right; page-break-after: right; counter-reset: page 1; height: auto; } Mise en page du sommaire : #list-toc-generated .toc-element a::before { /* position: absolute; */ /* margin-left: calc(-4em - 20px); */ display: inline-block; text-align: left; } #list-toc-generated .toc-element-level-2 a::before { /* margin-left: calc(-4em - 40px); */ }","title":"D\u00e9tails CSS print"},{"location":"contenu/","text":"Configuration Le fichier config.yml doit \u00eatre \u00e9dit\u00e9 afin d\u2019y r\u00e9f\u00e9rencer les diff\u00e9rentes parties du document, saisir son titre, votre ann\u00e9e, nom et dipl\u00f4me. Le th\u00e8me Les logiques d\u2019affichage screen et print sont d\u00e9pendantes du th\u00e8me s\u00e9lectionn\u00e9 dans le fichier config.yml : theme: esadpyrenees Le contenu Le contenu du document est organis\u00e9 sous la forme d\u2019une s\u00e9rie de documents au format markdown , correspondant \u00e0 chacune des sections du document. Ces diff\u00e9rentes sections sont d\u00e9clar\u00e9es dans le fichier config.yml : parts: - title: Introduction # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: content/text/1.intro.md # \u2191 le fichier markdown du contenu (texte de la section) template: default # \u2191 le gabarit de mise en page \u00e0 utiliser - title: Titre 2 file: content/text/2.deuxieme-partie.md template: default \u2026 Le title sert \u00e0 d\u00e9terminer l\u2019 id de la section et \u00e0 g\u00e9n\u00e9rer le sommaire. Les fichiers markdown (\u00e0 l\u2019extension .md ) peuvent \u00eatre num\u00e9rot\u00e9s pour une meilleure organisation ; ils sont plac\u00e9s par convention dans le dossier \u201ccontent/text\u201d mais peuvent \u00eatre stock\u00e9s ailleurs. \u00c0 chaque partie peut \u00eatre affect\u00e9 un gabarit ( template ), qui permet de d\u00e9finir sa mise en forme (\u00e0 la fois \u00e9cran et print).","title":"Configuration et contenu"},{"location":"contenu/#configuration","text":"Le fichier config.yml doit \u00eatre \u00e9dit\u00e9 afin d\u2019y r\u00e9f\u00e9rencer les diff\u00e9rentes parties du document, saisir son titre, votre ann\u00e9e, nom et dipl\u00f4me.","title":"Configuration"},{"location":"contenu/#le-theme","text":"Les logiques d\u2019affichage screen et print sont d\u00e9pendantes du th\u00e8me s\u00e9lectionn\u00e9 dans le fichier config.yml : theme: esadpyrenees","title":"Le th\u00e8me"},{"location":"contenu/#le-contenu","text":"Le contenu du document est organis\u00e9 sous la forme d\u2019une s\u00e9rie de documents au format markdown , correspondant \u00e0 chacune des sections du document. Ces diff\u00e9rentes sections sont d\u00e9clar\u00e9es dans le fichier config.yml : parts: - title: Introduction # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: content/text/1.intro.md # \u2191 le fichier markdown du contenu (texte de la section) template: default # \u2191 le gabarit de mise en page \u00e0 utiliser - title: Titre 2 file: content/text/2.deuxieme-partie.md template: default \u2026 Le title sert \u00e0 d\u00e9terminer l\u2019 id de la section et \u00e0 g\u00e9n\u00e9rer le sommaire. Les fichiers markdown (\u00e0 l\u2019extension .md ) peuvent \u00eatre num\u00e9rot\u00e9s pour une meilleure organisation ; ils sont plac\u00e9s par convention dans le dossier \u201ccontent/text\u201d mais peuvent \u00eatre stock\u00e9s ailleurs. \u00c0 chaque partie peut \u00eatre affect\u00e9 un gabarit ( template ), qui permet de d\u00e9finir sa mise en forme (\u00e0 la fois \u00e9cran et print).","title":"Le contenu"},{"location":"credits/","text":"Cr\u00e9dits PageTypeToPrint est d\u00e9velopp\u00e9 par Julien Bidoret pour la mise en page normalis\u00e9e des m\u00e9moires et documents \u00e9crits de l\u2019option Design graphique multim\u00e9dia de l\u2019 \u00c9SAD Pyr\u00e9n\u00e9es . La maquette originale a \u00e9t\u00e9 d\u00e9velopp\u00e9e par Perrine Saint Martin . L\u2019outil s\u2019appuie sur plusieurs librairies : MarkdownIt et MarkdownIt-php , pour la transformation du contenu markdown en HTML. \u00a9 Vitaly Puzrin, Alex Kocharin. JoliTypo pour la correction microtypographique, \u00a9 Damien Alexandre . Paged.js pour l\u2019impression et la g\u00e9n\u00e9ration de PDF \u00a9 Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet + Nicolas Taffin ! Un script d\u2019 0gust1 pour transformer les notes de bas de page markdown en notes de marge. Le caract\u00e8re typographique est \u00c9cole, variation du Inter , d\u00e9velopp\u00e9e par WA75 pour l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es.","title":"Credits"},{"location":"credits/#credits","text":"PageTypeToPrint est d\u00e9velopp\u00e9 par Julien Bidoret pour la mise en page normalis\u00e9e des m\u00e9moires et documents \u00e9crits de l\u2019option Design graphique multim\u00e9dia de l\u2019 \u00c9SAD Pyr\u00e9n\u00e9es . La maquette originale a \u00e9t\u00e9 d\u00e9velopp\u00e9e par Perrine Saint Martin . L\u2019outil s\u2019appuie sur plusieurs librairies : MarkdownIt et MarkdownIt-php , pour la transformation du contenu markdown en HTML. \u00a9 Vitaly Puzrin, Alex Kocharin. JoliTypo pour la correction microtypographique, \u00a9 Damien Alexandre . Paged.js pour l\u2019impression et la g\u00e9n\u00e9ration de PDF \u00a9 Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet + Nicolas Taffin ! Un script d\u2019 0gust1 pour transformer les notes de bas de page markdown en notes de marge. Le caract\u00e8re typographique est \u00c9cole, variation du Inter , d\u00e9velopp\u00e9e par WA75 pour l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es.","title":"Cr\u00e9dits"},{"location":"entretiens/","text":"Entretiens Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les retranscriptions d\u2019entretiens. Un gabarit sp\u00e9cifique ( interview ) est pr\u00e9vu pour d\u00e9clarer l\u2019entretien dans les sections du fichier config.yml : - title: Entretien file: content/text/6.entretien-avec-PI.md template: interview Le contenu textuel de l\u2019entretien peut \u00eatre structur\u00e9 ainsi dans le fichier markdown : **Votre nom** **Votre question** **Nom de la personne interview\u00b7\u00e9e** Sa r\u00e9ponse **VN** **Votre 2e question (VN sont vos initiales)** **PI** Sa 2e r\u00e9ponse (PI sont ses initiales)","title":"Entretiens"},{"location":"entretiens/#entretiens","text":"Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les retranscriptions d\u2019entretiens. Un gabarit sp\u00e9cifique ( interview ) est pr\u00e9vu pour d\u00e9clarer l\u2019entretien dans les sections du fichier config.yml : - title: Entretien file: content/text/6.entretien-avec-PI.md template: interview Le contenu textuel de l\u2019entretien peut \u00eatre structur\u00e9 ainsi dans le fichier markdown : **Votre nom** **Votre question** **Nom de la personne interview\u00b7\u00e9e** Sa r\u00e9ponse **VN** **Votre 2e question (VN sont vos initiales)** **PI** Sa 2e r\u00e9ponse (PI sont ses initiales)","title":"Entretiens"},{"location":"extend/","text":"Extension PageTypeToPrint propose une exp\u00e9rience de publication et de mise en page web + print qui ne n\u00e9cessite pas d\u2019\u00e9crire de code (ni PHP, ni JavaScript, ni HTML ou CSS). L\u2019outil est n\u00e9anmoins con\u00e7u pour \u00eatre modifi\u00e9, augment\u00e9 ou d\u00e9tourn\u00e9 ; et servir de base \u00e0 une appropriation progressive des logiques web to print . Premiers pas dans l\u2019extension de PageTypeToPrint Faire un livret A5 recto-verso Utiliser un pad public pour engager une \u00e9criture collaborative Automatiser l\u2019importation d\u2019un dossier d\u2019images Parcourir les usages avanc\u00e9s des notes de bas de page / de c\u00f4t\u00e9","title":"Extensions"},{"location":"extend/#extension","text":"PageTypeToPrint propose une exp\u00e9rience de publication et de mise en page web + print qui ne n\u00e9cessite pas d\u2019\u00e9crire de code (ni PHP, ni JavaScript, ni HTML ou CSS). L\u2019outil est n\u00e9anmoins con\u00e7u pour \u00eatre modifi\u00e9, augment\u00e9 ou d\u00e9tourn\u00e9 ; et servir de base \u00e0 une appropriation progressive des logiques web to print . Premiers pas dans l\u2019extension de PageTypeToPrint Faire un livret A5 recto-verso Utiliser un pad public pour engager une \u00e9criture collaborative Automatiser l\u2019importation d\u2019un dossier d\u2019images Parcourir les usages avanc\u00e9s des notes de bas de page / de c\u00f4t\u00e9","title":"Extension"},{"location":"extendcss/","text":"Modifications rapides Changer le caract\u00e8re typographique Modifier le fichier css/style.css du th\u00e8me pour d\u00e9clarer le (ou les) nouveau(x) catact\u00e8re(s), et modifier la valeur de --fontfamily dans les propri\u00e9t\u00e9s personnalis\u00e9es. @font-face { font-family: \"Superserif\"; src: url(\"fonts/superserif.woff2\") format(\"woff2\"); font-weight: normal; font-style: normal; } :root { /* typographie */ --fontfamily: \"Superserif\", serif; \u2026 } Supprimer l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es Pour la couverture, supprimer l\u2019arri\u00e8re-plan du header dans le fichier css/print.css : #header { /*background: url(logo.svg) no-repeat 0 100%;*/ } Pour les titre courants, supprimer l\u2019image dans le fichier body.php : <!-- le folio courant (version print) --> <div class=\"runningfolio\"> <span class=\"folio\"></span> <!-- <img src=\"css/logo.png\" alt=\"ESAD Pyr\u00e9n\u00e9es\"> --> </div> Modifier le format Format et marges @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left{ content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right{ margin: 1cm 2cm 2.5cm 1cm; } @page:left{ margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left{ display: none; } } @page:blank{ @bottom-left-corner { display: none; } @bottom-left{ display: none; } }","title":"Premiers pas"},{"location":"extendcss/#modifications-rapides","text":"","title":"Modifications rapides"},{"location":"extendcss/#changer-le-caractere-typographique","text":"Modifier le fichier css/style.css du th\u00e8me pour d\u00e9clarer le (ou les) nouveau(x) catact\u00e8re(s), et modifier la valeur de --fontfamily dans les propri\u00e9t\u00e9s personnalis\u00e9es. @font-face { font-family: \"Superserif\"; src: url(\"fonts/superserif.woff2\") format(\"woff2\"); font-weight: normal; font-style: normal; } :root { /* typographie */ --fontfamily: \"Superserif\", serif; \u2026 }","title":"Changer le caract\u00e8re typographique"},{"location":"extendcss/#supprimer-lidentite-de-lesad-pyrenees","text":"Pour la couverture, supprimer l\u2019arri\u00e8re-plan du header dans le fichier css/print.css : #header { /*background: url(logo.svg) no-repeat 0 100%;*/ } Pour les titre courants, supprimer l\u2019image dans le fichier body.php : <!-- le folio courant (version print) --> <div class=\"runningfolio\"> <span class=\"folio\"></span> <!-- <img src=\"css/logo.png\" alt=\"ESAD Pyr\u00e9n\u00e9es\"> --> </div>","title":"Supprimer l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es"},{"location":"extendcss/#modifier-le-format","text":"Format et marges @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left{ content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right{ margin: 1cm 2cm 2.5cm 1cm; } @page:left{ margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left{ display: none; } } @page:blank{ @bottom-left-corner { display: none; } @bottom-left{ display: none; } }","title":"Modifier le format"},{"location":"gabarits/","text":"Templates Les diff\u00e9rents gabarits, ou templates , sont: default : le gabarit de base. appendices : le gabarit pour les annexes g\u00e9n\u00e9rales et l\u2019iconographie. interview : le gabarit pour les entretiens. references : le gabarit pour les r\u00e9f\u00e9rences, bibliographie, sitographie, etc. autofolder : un gabarit tr\u00e8s similaire \u00e0 appendices pour automatiser l\u2019inclusion d\u2019un dossier d\u2019images Les logiques de templates peuvent \u00eatre \u00e9tendues pour prendre en charge d\u2019autres logiques de mise en page. \u00c9tendre ou modifier l\u2019outil La structure HTML englobante de chaque gabarit est d\u00e9finie dans le fichier _inc/PageTypeToPrint.php . On peut souhaiter la modifier pour g\u00e9n\u00e9rer un balisage sp\u00e9cifique \u00e0 un nouveau type de page ou pour modifier la gestion des titres courants. Les styles sp\u00e9cifiques associ\u00e9s \u00e0 chaque gabarit de page sont g\u00e9r\u00e9s dans les deux fichiers css/style.ccss et css/print.ccss pr\u00e9sents dans le th\u00e8me, dans des sections ais\u00e9ment rep\u00e9rables gr\u00e2ce aux commentaires.","title":"Gabarits"},{"location":"gabarits/#templates","text":"Les diff\u00e9rents gabarits, ou templates , sont: default : le gabarit de base. appendices : le gabarit pour les annexes g\u00e9n\u00e9rales et l\u2019iconographie. interview : le gabarit pour les entretiens. references : le gabarit pour les r\u00e9f\u00e9rences, bibliographie, sitographie, etc. autofolder : un gabarit tr\u00e8s similaire \u00e0 appendices pour automatiser l\u2019inclusion d\u2019un dossier d\u2019images Les logiques de templates peuvent \u00eatre \u00e9tendues pour prendre en charge d\u2019autres logiques de mise en page.","title":"Templates"},{"location":"gabarits/#etendre-ou-modifier-loutil","text":"La structure HTML englobante de chaque gabarit est d\u00e9finie dans le fichier _inc/PageTypeToPrint.php . On peut souhaiter la modifier pour g\u00e9n\u00e9rer un balisage sp\u00e9cifique \u00e0 un nouveau type de page ou pour modifier la gestion des titres courants. Les styles sp\u00e9cifiques associ\u00e9s \u00e0 chaque gabarit de page sont g\u00e9r\u00e9s dans les deux fichiers css/style.ccss et css/print.ccss pr\u00e9sents dans le th\u00e8me, dans des sections ais\u00e9ment rep\u00e9rables gr\u00e2ce aux commentaires.","title":"\u00c9tendre ou modifier l\u2019outil"},{"location":"glossaire/","text":"Glossaire Un glossaire n\u2019est souhaitable que si de nombreux termes sp\u00e9cifiques au document n\u00e9cessitent d\u2019\u00eatre explicit\u00e9s. Le glossaire ob\u00e9it \u00e0 une logique de structuration singuli\u00e8re. Il est englob\u00e9 dans un \u00e9l\u00e9ment personnalis\u00e9 ( \u00b6\u00b6\u00b6 glossary ), et chaque terme est \u00e9galement englob\u00e9 dans un \u00e9l\u00e9ment ::: term : \u00b6\u00b6\u00b6 glossary ::: term Premier terme : D\u00e9finition du premier terme ::: ::: term Second terme : D\u00e9finition du second terme ::: \u00b6\u00b6\u00b6","title":"Glossaire"},{"location":"glossaire/#glossaire","text":"Un glossaire n\u2019est souhaitable que si de nombreux termes sp\u00e9cifiques au document n\u00e9cessitent d\u2019\u00eatre explicit\u00e9s. Le glossaire ob\u00e9it \u00e0 une logique de structuration singuli\u00e8re. Il est englob\u00e9 dans un \u00e9l\u00e9ment personnalis\u00e9 ( \u00b6\u00b6\u00b6 glossary ), et chaque terme est \u00e9galement englob\u00e9 dans un \u00e9l\u00e9ment ::: term : \u00b6\u00b6\u00b6 glossary ::: term Premier terme : D\u00e9finition du premier terme ::: ::: term Second terme : D\u00e9finition du second terme ::: \u00b6\u00b6\u00b6","title":"Glossaire"},{"location":"images/","text":"Images & vid\u00e9os Des images et vid\u00e9os l\u00e9gend\u00e9es peuvent \u00eatre ins\u00e9r\u00e9es gr\u00e2ce \u00e0 des \u00ab shortcodes \u00bb sp\u00e9cifiques. Images Les images peuvent \u00eatre int\u00e9gr\u00e9es au fil du texte sous forme de note de c\u00f4t\u00e9 : (imagenote: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) Mais \u00e9galement sous forme de blocs : (figure: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) On peut ajouter des class aux images : (figure: url/de_limage.jpg class: maclass monautreclass) Pour distinguer les images \u00e0 l\u2019arri\u00e8re-plan blanc de celui de la page, une class d\u00e9di\u00e9e ( notwhite ) est disponible : (figure: url/de_limage.jpg class: notwhite) Pour aligner les images de note \u00e0 gauche ou \u00e0 droite (en contexte d\u2019impression) utiliser les class suivantes : printleft printright : (imagenote: url/de_limage.jpg class: printleft) Pour des images sous forme de blocs qui demandent une grande largeur d\u2019affichage, on peut utiliser la class: full : (imagenote: url/de_limage.jpg class: full) Vid\u00e9os Pour int\u00e9grer une vid\u00e9o Youtube ou Vimeo, utiliser le shortcode video et l\u2019URL de la page : (video: https://www.youtube.com/watch?v=yfskVxCn_qo class: maclass caption: La l\u00e9gende de la vid\u00e9o) (video: https://vimeo.com/708803521 class: maclass caption: La l\u00e9gende de la vid\u00e9o) Pour la version imprimable, il est souhaitable de d\u00e9terminer quelle image sera imprim\u00e9e, gr\u00e2ce \u00e0 l\u2019attribut poster : (video: https://www.youtube.com/watch?v=yfskVxCn_qo poster: images/videocover.jpg) En version print, l\u2019URL de la vid\u00e9o est affich\u00e9e sous sa l\u00e9gende.","title":"Images et vid\u00e9os"},{"location":"images/#images-videos","text":"Des images et vid\u00e9os l\u00e9gend\u00e9es peuvent \u00eatre ins\u00e9r\u00e9es gr\u00e2ce \u00e0 des \u00ab shortcodes \u00bb sp\u00e9cifiques.","title":"Images &amp; vid\u00e9os"},{"location":"images/#images","text":"Les images peuvent \u00eatre int\u00e9gr\u00e9es au fil du texte sous forme de note de c\u00f4t\u00e9 : (imagenote: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) Mais \u00e9galement sous forme de blocs : (figure: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) On peut ajouter des class aux images : (figure: url/de_limage.jpg class: maclass monautreclass) Pour distinguer les images \u00e0 l\u2019arri\u00e8re-plan blanc de celui de la page, une class d\u00e9di\u00e9e ( notwhite ) est disponible : (figure: url/de_limage.jpg class: notwhite) Pour aligner les images de note \u00e0 gauche ou \u00e0 droite (en contexte d\u2019impression) utiliser les class suivantes : printleft printright : (imagenote: url/de_limage.jpg class: printleft) Pour des images sous forme de blocs qui demandent une grande largeur d\u2019affichage, on peut utiliser la class: full : (imagenote: url/de_limage.jpg class: full)","title":"Images"},{"location":"images/#videos","text":"Pour int\u00e9grer une vid\u00e9o Youtube ou Vimeo, utiliser le shortcode video et l\u2019URL de la page : (video: https://www.youtube.com/watch?v=yfskVxCn_qo class: maclass caption: La l\u00e9gende de la vid\u00e9o) (video: https://vimeo.com/708803521 class: maclass caption: La l\u00e9gende de la vid\u00e9o) Pour la version imprimable, il est souhaitable de d\u00e9terminer quelle image sera imprim\u00e9e, gr\u00e2ce \u00e0 l\u2019attribut poster : (video: https://www.youtube.com/watch?v=yfskVxCn_qo poster: images/videocover.jpg) En version print, l\u2019URL de la vid\u00e9o est affich\u00e9e sous sa l\u00e9gende.","title":"Vid\u00e9os"},{"location":"installation/","text":"Installation T\u00e9l\u00e9chargez le projet : \u2193 Code source Le fichier doit \u00eatre d\u00e9compress\u00e9 dans un environnement de serveur web b\u00e9n\u00e9ficiant d\u2019une version de PHP sup\u00e9rieure \u00e0 8.0 (par exemple, le dossier htdocs dans MAMP ; voir ci-dessous). Si vous pouvez d\u00e9marrer un serveur web local avec PHP 8, passez \u00e0 : \u2192 Configuration et contenu Sinon, poursuivez ci-dessous\u2026 En d\u00e9tails PageTypeToPrint utilise PHP, un langage web qui s\u2019ex\u00e9cute du c\u00f4t\u00e9 du serveur, disponible chez l\u2019immense majorit\u00e9 des h\u00e9bergeurs web. Sur un ordinateur \u201cdomestique\u201c, on peut installer un logiciel qui int\u00e8gre les diff\u00e9rents fonctionnalit\u00e9s d\u2019un serveur web. On parle alors de serveur local ou de serveur de d\u00e9veloppement . Les outils les plus simples \u00e0 utiliser sont MAMP , utilisable sur Mac OS et sur Windows et XAMPP , multiplateforme (\u00e0 utiliser si MAMP ne fonctionne pas sur votre ordinateur). AMP ? L\u2019accronyme AMP signifie Apache + MySQL + PHP. Apache est un serveur web : le serveur HTTP r\u00e9pond aux requ\u00eates et transmet les pages Web au navigateur. MySQL est un serveur de base de donn\u00e9es, inutile dans ce contexte. PHP est un langage de script : il va permettre d\u2019effectuer des op\u00e9rations sur le seveur et fabriquer des pages HTML. MAMP ou Xampp? MAMP est l\u2019outil le plus simple. Il s\u2019installe comme une application habituelle (double-clicker sur l\u2019installeur puis suivre les \u00e9tapes), avec comme sp\u00e9cificit\u00e9 sur Windows de pr\u00e9f\u00e9rer \u00eatre install\u00e9 \u00e0 la racine du disque dur, dans un dossier C:\\\\MAMP ou C:\\\\Xampp . Xampp n\u2019est gu\u00e8re plus compliqu\u00e9 \u00e0 installer mais offre une interface moins simple. Attention \u00e0 ne pas installer MAMP Pro (inutile dans ce contexte, et payant). L\u2019installation g\u00e9n\u00e8re un sous-dossier nomm\u00e9 htdocs qui est destin\u00e9 \u00e0 stocker vos sites web locaux. Sur OSX et MAMP, ce dossier est situ\u00e9 dans Applications/MAMP/htdocs , sur Windows dans C:\\\\MAMP\\htdocs ou C:\\\\Xampp\\htdocs . Cet emplacement est configurable dans les pr\u00e9f\u00e9rences de MAMP ou Xampp. C\u2019est dans ce dossier qu\u2019il convient de d\u00e9compresser le code de PageTypeToPrint, afin de pouvoir le visualiser dans un navigateur web. D\u00e9marrer Une fois l\u2019application de serveur install\u00e9e, il faut la d\u00e9marrer : \u201cD\u00e9marrer les serveurs\u201d avec MAMP ou \u201cApache > Start\u201d avec Xampp. Le site devient alors accessible \u00e0 l\u2019adresse http://localhost/PageTypeToPrint ou http://localhost:8888/PageTypeToPrint si le port d\u2019Apache est configur\u00e9 sur 8888 (c\u2019est parfois le cas par d\u00e9faut). Version de PHP Si rien ne s\u2019affiche (ou seulement le sommaire du document), la version de PHP est vraisemblablement inf\u00e9rieure \u00e0 8.0. MAMP et XAMPP permettent de configurer cette version dans leur param\u00e8tres.","title":"Installation"},{"location":"installation/#installation","text":"T\u00e9l\u00e9chargez le projet : \u2193 Code source Le fichier doit \u00eatre d\u00e9compress\u00e9 dans un environnement de serveur web b\u00e9n\u00e9ficiant d\u2019une version de PHP sup\u00e9rieure \u00e0 8.0 (par exemple, le dossier htdocs dans MAMP ; voir ci-dessous). Si vous pouvez d\u00e9marrer un serveur web local avec PHP 8, passez \u00e0 : \u2192 Configuration et contenu Sinon, poursuivez ci-dessous\u2026","title":"Installation"},{"location":"installation/#en-details","text":"PageTypeToPrint utilise PHP, un langage web qui s\u2019ex\u00e9cute du c\u00f4t\u00e9 du serveur, disponible chez l\u2019immense majorit\u00e9 des h\u00e9bergeurs web. Sur un ordinateur \u201cdomestique\u201c, on peut installer un logiciel qui int\u00e8gre les diff\u00e9rents fonctionnalit\u00e9s d\u2019un serveur web. On parle alors de serveur local ou de serveur de d\u00e9veloppement . Les outils les plus simples \u00e0 utiliser sont MAMP , utilisable sur Mac OS et sur Windows et XAMPP , multiplateforme (\u00e0 utiliser si MAMP ne fonctionne pas sur votre ordinateur).","title":"En d\u00e9tails"},{"location":"installation/#amp","text":"L\u2019accronyme AMP signifie Apache + MySQL + PHP. Apache est un serveur web : le serveur HTTP r\u00e9pond aux requ\u00eates et transmet les pages Web au navigateur. MySQL est un serveur de base de donn\u00e9es, inutile dans ce contexte. PHP est un langage de script : il va permettre d\u2019effectuer des op\u00e9rations sur le seveur et fabriquer des pages HTML.","title":"AMP ?"},{"location":"installation/#mamp-ou-xampp","text":"MAMP est l\u2019outil le plus simple. Il s\u2019installe comme une application habituelle (double-clicker sur l\u2019installeur puis suivre les \u00e9tapes), avec comme sp\u00e9cificit\u00e9 sur Windows de pr\u00e9f\u00e9rer \u00eatre install\u00e9 \u00e0 la racine du disque dur, dans un dossier C:\\\\MAMP ou C:\\\\Xampp . Xampp n\u2019est gu\u00e8re plus compliqu\u00e9 \u00e0 installer mais offre une interface moins simple. Attention \u00e0 ne pas installer MAMP Pro (inutile dans ce contexte, et payant). L\u2019installation g\u00e9n\u00e8re un sous-dossier nomm\u00e9 htdocs qui est destin\u00e9 \u00e0 stocker vos sites web locaux. Sur OSX et MAMP, ce dossier est situ\u00e9 dans Applications/MAMP/htdocs , sur Windows dans C:\\\\MAMP\\htdocs ou C:\\\\Xampp\\htdocs . Cet emplacement est configurable dans les pr\u00e9f\u00e9rences de MAMP ou Xampp. C\u2019est dans ce dossier qu\u2019il convient de d\u00e9compresser le code de PageTypeToPrint, afin de pouvoir le visualiser dans un navigateur web.","title":"MAMP ou Xampp?"},{"location":"installation/#demarrer","text":"Une fois l\u2019application de serveur install\u00e9e, il faut la d\u00e9marrer : \u201cD\u00e9marrer les serveurs\u201d avec MAMP ou \u201cApache > Start\u201d avec Xampp. Le site devient alors accessible \u00e0 l\u2019adresse http://localhost/PageTypeToPrint ou http://localhost:8888/PageTypeToPrint si le port d\u2019Apache est configur\u00e9 sur 8888 (c\u2019est parfois le cas par d\u00e9faut).","title":"D\u00e9marrer"},{"location":"installation/#version-de-php","text":"Si rien ne s\u2019affiche (ou seulement le sommaire du document), la version de PHP est vraisemblablement inf\u00e9rieure \u00e0 8.0. MAMP et XAMPP permettent de configurer cette version dans leur param\u00e8tres.","title":"Version de PHP"},{"location":"markdown/","text":"Markdown Le contenu textuel du document est saisi dans le langage de balisage l\u00e9ger markdown , tr\u00e8s largement utilis\u00e9 et document\u00e9 partout sur le web. On trouvera ci-dessous une br\u00e8ve documentation sur l\u2019usage de markdown , sinon poursuivre vers la version imprimable / pdf . Syntaxe \u00c9lement Syntaxe Markdown Titres # H1 ## H2 ### H3 Gras **texte en gras** Italique _texte en italique_ Citation > blockquote Liste ordonn\u00e9e 1. Premier item 2. Deuxi\u00e8me item 3. Troisi\u00e8me item Liste non-ordonn\u00e9e - Premier item - Deuxi\u00e8me item - Troisi\u00e8me item Code `code` Filet horizontal --- Lien [titre](https://www.example.com) Image ![alternative textuelle](image.jpg) \u26a0\ufe0f cf. Images Note de bas de page Cici est une phrase avec une note de bas de page. [^1] [^1]: Ceci est la note. \u26a0\ufe0f cf. Notes ID de titre ### Mon titre avec id {#custom-id} Liste de d\u00e9finition terme : d\u00e9finition Barr\u00e9 ~~La terre est plate.~~ Indice H~2~O Exposant X^2^ Surlign\u00e9 Je veux souligner ces ==mots tr\u00e8s importants== Paragraphes et sauts de ligne Pour cr\u00e9er un paragraphe, laisser une ligne blanche entre deux lignes de texte : Un premier paragraphe. Un deuxi\u00e8me paragraphe. Pour forcer un saut de ligne, saisir deux espaces en fin de ligne : Un premier vers. Un deuxi\u00e8me vers. Styles de texte Vous pouvez utiliser _ ou * autour d'un mot pour le mettre en italique (deux pour le mettre en gras). _italique_ s'affiche ainsi : italique **gras** s'affiche ainsi : gras **_gras-italique_** s'affiche ainsi : gras-italique ~~barr\u00e9~~ s'affiche ainsi : barr\u00e9 ==surlign\u00e9== s'affiche ainsi : surlign\u00e9 Liens On peut cr\u00e9er un lien en mettant le texte cliquable entre crochets et l\u2019URL associ\u00e9e entre parenth\u00e8ses : Un [lien](https://esad-pyrenees.fr) s\u2019affiche ainsi : Un lien Images Pour ins\u00e9rer une image, on peut utiliser la syntaxe Markdow native : ![Texte alternatif](url/de_limage.jpg) \u26a0\ufe0f La syntaxe sp\u00e9cifique (non markdown) (figure: fichier.jpg) est plus appropri\u00e9e \u00e0 la structuration des documents et m\u00e9moires (notamment du fait de la possibilit\u00e9 de l\u00e9gendes). Voir Composition : images et vid\u00e9os . Citations Des citations peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce au signe > : > Le texte de la citation ! Titres Les titres et intertitres peuvent \u00eatre cr\u00e9es gr\u00e2ce \u00e0 # r\u00e9p\u00e9t\u00e9 une ou plusieurs fois en d\u00e9but de ligne : # Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 Dans le contexte de ces documents, on \u00e9vitera le niveau de titre 1, r\u00e9serv\u00e9 au titre du document. Listes Des listes ordonn\u00e9es et non-ordonn\u00e9es peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce \u00e0 la syntaxe suivante : 1. \u00e9l\u00e9ment 2. \u00e9l\u00e9ment 3. \u00e9l\u00e9ment Ou * \u00e9l\u00e9ment * \u00e9l\u00e9ment * \u00e9l\u00e9ment Aller plus loin Lire la documentation sur markdownguide.org et MarkdownIt (cette librairie ajoute des \u00e9l\u00e9ments utiles : abbr\u00e9viations, notes de bas de page, listes de d\u00e9finition, tableaux, attributs class et id pour les \u00e9l\u00e9ments\u2026).","title":"Contenu au format markdown"},{"location":"markdown/#markdown","text":"Le contenu textuel du document est saisi dans le langage de balisage l\u00e9ger markdown , tr\u00e8s largement utilis\u00e9 et document\u00e9 partout sur le web. On trouvera ci-dessous une br\u00e8ve documentation sur l\u2019usage de markdown , sinon poursuivre vers la version imprimable / pdf .","title":"Markdown"},{"location":"markdown/#syntaxe","text":"\u00c9lement Syntaxe Markdown Titres # H1 ## H2 ### H3 Gras **texte en gras** Italique _texte en italique_ Citation > blockquote Liste ordonn\u00e9e 1. Premier item 2. Deuxi\u00e8me item 3. Troisi\u00e8me item Liste non-ordonn\u00e9e - Premier item - Deuxi\u00e8me item - Troisi\u00e8me item Code `code` Filet horizontal --- Lien [titre](https://www.example.com) Image ![alternative textuelle](image.jpg) \u26a0\ufe0f cf. Images Note de bas de page Cici est une phrase avec une note de bas de page. [^1] [^1]: Ceci est la note. \u26a0\ufe0f cf. Notes ID de titre ### Mon titre avec id {#custom-id} Liste de d\u00e9finition terme : d\u00e9finition Barr\u00e9 ~~La terre est plate.~~ Indice H~2~O Exposant X^2^ Surlign\u00e9 Je veux souligner ces ==mots tr\u00e8s importants==","title":"Syntaxe"},{"location":"markdown/#paragraphes-et-sauts-de-ligne","text":"Pour cr\u00e9er un paragraphe, laisser une ligne blanche entre deux lignes de texte : Un premier paragraphe. Un deuxi\u00e8me paragraphe. Pour forcer un saut de ligne, saisir deux espaces en fin de ligne : Un premier vers. Un deuxi\u00e8me vers.","title":"Paragraphes et sauts de ligne"},{"location":"markdown/#styles-de-texte","text":"Vous pouvez utiliser _ ou * autour d'un mot pour le mettre en italique (deux pour le mettre en gras). _italique_ s'affiche ainsi : italique **gras** s'affiche ainsi : gras **_gras-italique_** s'affiche ainsi : gras-italique ~~barr\u00e9~~ s'affiche ainsi : barr\u00e9 ==surlign\u00e9== s'affiche ainsi : surlign\u00e9","title":"Styles de texte"},{"location":"markdown/#liens","text":"On peut cr\u00e9er un lien en mettant le texte cliquable entre crochets et l\u2019URL associ\u00e9e entre parenth\u00e8ses : Un [lien](https://esad-pyrenees.fr) s\u2019affiche ainsi : Un lien","title":"Liens"},{"location":"markdown/#images","text":"Pour ins\u00e9rer une image, on peut utiliser la syntaxe Markdow native : ![Texte alternatif](url/de_limage.jpg) \u26a0\ufe0f La syntaxe sp\u00e9cifique (non markdown) (figure: fichier.jpg) est plus appropri\u00e9e \u00e0 la structuration des documents et m\u00e9moires (notamment du fait de la possibilit\u00e9 de l\u00e9gendes). Voir Composition : images et vid\u00e9os .","title":"Images"},{"location":"markdown/#citations","text":"Des citations peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce au signe > : > Le texte de la citation !","title":"Citations"},{"location":"markdown/#titres","text":"Les titres et intertitres peuvent \u00eatre cr\u00e9es gr\u00e2ce \u00e0 # r\u00e9p\u00e9t\u00e9 une ou plusieurs fois en d\u00e9but de ligne : # Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 Dans le contexte de ces documents, on \u00e9vitera le niveau de titre 1, r\u00e9serv\u00e9 au titre du document.","title":"Titres"},{"location":"markdown/#listes","text":"Des listes ordonn\u00e9es et non-ordonn\u00e9es peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce \u00e0 la syntaxe suivante : 1. \u00e9l\u00e9ment 2. \u00e9l\u00e9ment 3. \u00e9l\u00e9ment Ou * \u00e9l\u00e9ment * \u00e9l\u00e9ment * \u00e9l\u00e9ment","title":"Listes"},{"location":"markdown/#aller-plus-loin","text":"Lire la documentation sur markdownguide.org et MarkdownIt (cette librairie ajoute des \u00e9l\u00e9ments utiles : abbr\u00e9viations, notes de bas de page, listes de d\u00e9finition, tableaux, attributs class et id pour les \u00e9l\u00e9ments\u2026).","title":"Aller plus loin"},{"location":"notes/","text":"Notes Pour cr\u00e9er une note, ins\u00e9rer [^identifiant_de_la_note] au fil du texte, puis, ailleurs dans le m\u00eame document, cr\u00e9er un paragraphe contentant : [^identifiant_de_la_note]: Contenu de la note mise en forme. Il est prf\u00e9rable de ne pas identifier les notes via des identifiants num\u00e9riques (1, 2, 3\u2026) afin de laisser la num\u00e9rotation automatique \u00e0 la charge de l\u2019outil. Appels de notes et citations Dans le texte, un appel de note pr\u00e9c\u00e8de toujours le signe de ponctuation. Il se placera donc toujours avant le point final d\u2019une phrase. En fin de citation, il se place avant le guillemet fermant. On le saisit sans le faire pr\u00e9c\u00e9der d\u2019une espace : C\u2019est ainsi que Paul Watzlawick formule son axiome d\u2019impossibilit\u00e9[^axiome]. <!-- ici, avant le point --> L\u2019axiome d\u2019impossibilit\u00e9, \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb, est formul\u00e9 [\u2026] <!-- ici, avant le point concluant la citation, avant le guillemet qui l\u2019encadre (pr\u00e9c\u00e9d\u00e9 d\u2019une espace fine ins\u00e9cable) --> Paul Watzlawick affirme \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb. Ainsi [\u2026] <!-- ici, un point final conclut la phrase comportant une citation --> De la m\u00eame mani\u00e8re, les images de note doivent \u00eatre saisies imm\u00e9diatement (sans espace) apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg) sont grav\u00e9es dans les m\u00e9moires. Probl\u00e8mes de notes En contexte d\u2019impression, si trop d'images de note sont pr\u00e9sentes sur une seule page, l\u2019outil ne peut pas g\u00e9rer automatiquement le \u201creflux\u201d de la note sur la page suivante. Une alert est alors affich\u00e9e. Plusieurs solutions : Utiliser une grande figure au fil du texte pour d\u00e9velopper la pagination diff\u00e9remment: (figure: nomdufichier.jpg caption: La l\u00e9gende de l\u2019image) D\u00e9porter certaines images de notes en annexes. Forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Modifier l\u2019affichage des notes Pour \u00e9tendre ou modifier l\u2019affichage des notes, il importe de comprendre comment elles sont g\u00e9n\u00e9r\u00e9es et mises en page. Une documentation d\u00e9di\u00e9e est accessible ici : Pour aller plus loin avec les notes .","title":"Notes"},{"location":"notes/#notes","text":"Pour cr\u00e9er une note, ins\u00e9rer [^identifiant_de_la_note] au fil du texte, puis, ailleurs dans le m\u00eame document, cr\u00e9er un paragraphe contentant : [^identifiant_de_la_note]: Contenu de la note mise en forme. Il est prf\u00e9rable de ne pas identifier les notes via des identifiants num\u00e9riques (1, 2, 3\u2026) afin de laisser la num\u00e9rotation automatique \u00e0 la charge de l\u2019outil.","title":"Notes"},{"location":"notes/#appels-de-notes-et-citations","text":"Dans le texte, un appel de note pr\u00e9c\u00e8de toujours le signe de ponctuation. Il se placera donc toujours avant le point final d\u2019une phrase. En fin de citation, il se place avant le guillemet fermant. On le saisit sans le faire pr\u00e9c\u00e9der d\u2019une espace : C\u2019est ainsi que Paul Watzlawick formule son axiome d\u2019impossibilit\u00e9[^axiome]. <!-- ici, avant le point --> L\u2019axiome d\u2019impossibilit\u00e9, \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb, est formul\u00e9 [\u2026] <!-- ici, avant le point concluant la citation, avant le guillemet qui l\u2019encadre (pr\u00e9c\u00e9d\u00e9 d\u2019une espace fine ins\u00e9cable) --> Paul Watzlawick affirme \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb. Ainsi [\u2026] <!-- ici, un point final conclut la phrase comportant une citation --> De la m\u00eame mani\u00e8re, les images de note doivent \u00eatre saisies imm\u00e9diatement (sans espace) apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg) sont grav\u00e9es dans les m\u00e9moires.","title":"Appels de notes et citations"},{"location":"notes/#problemes-de-notes","text":"En contexte d\u2019impression, si trop d'images de note sont pr\u00e9sentes sur une seule page, l\u2019outil ne peut pas g\u00e9rer automatiquement le \u201creflux\u201d de la note sur la page suivante. Une alert est alors affich\u00e9e. Plusieurs solutions : Utiliser une grande figure au fil du texte pour d\u00e9velopper la pagination diff\u00e9remment: (figure: nomdufichier.jpg caption: La l\u00e9gende de l\u2019image) D\u00e9porter certaines images de notes en annexes. Forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\">","title":"Probl\u00e8mes de notes"},{"location":"notes/#modifier-laffichage-des-notes","text":"Pour \u00e9tendre ou modifier l\u2019affichage des notes, il importe de comprendre comment elles sont g\u00e9n\u00e9r\u00e9es et mises en page. Une documentation d\u00e9di\u00e9e est accessible ici : Pour aller plus loin avec les notes .","title":"Modifier l\u2019affichage des notes"},{"location":"online/","text":"Mise en ligne et publication Une fois termin\u00e9 le processus d\u2019\u00e9dition sur un serveur local, le document peut \u00eatre mis en ligne sur un serveur web de production (le serveur de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es ou un compte \u00e9tudiant h\u00e9berg\u00e9 par Alwaysdata \u2013 me demander ). Il faut alors s\u2019assurer que le serveur est bien capable de servir le site via une version de PHP sup\u00e9rieure \u00e0 8.0 (sur Alwaysdata, voir ici ). Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier index.php peut \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb. PTTP comme g\u00e9n\u00e9rateur de site statique Si l\u2019on souhaite g\u00e9n\u00e9rer un \u00ab site statique \u00bb (une simple page HTML, sans PHP ; par ex. pour h\u00e9berger la page sur Neocities), on peut utiliser PHP en ligne de commande : # pour g\u00e9n\u00e9rer la version web php index.php > index.html # pour g\u00e9n\u00e9rer la version imprimable # (pas tr\u00e8s utile, mieux vaut mettre en ligne le PDF final) php index.php '&print' > print.html Dans le cas de PHP fourni par MAMP, il faut conna\u00eetre le chemin de l\u2019ex\u00e9cutable PHP : # Exemple sur Mac OSX (v\u00e9rifier la version de PHP) /Applications/MAMP/bin/php/php8.1.0/bin/php index.php > index.html","title":"Mise en ligne"},{"location":"online/#mise-en-ligne-et-publication","text":"Une fois termin\u00e9 le processus d\u2019\u00e9dition sur un serveur local, le document peut \u00eatre mis en ligne sur un serveur web de production (le serveur de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es ou un compte \u00e9tudiant h\u00e9berg\u00e9 par Alwaysdata \u2013 me demander ). Il faut alors s\u2019assurer que le serveur est bien capable de servir le site via une version de PHP sup\u00e9rieure \u00e0 8.0 (sur Alwaysdata, voir ici ). Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier index.php peut \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Mise en ligne et publication"},{"location":"online/#pttp-comme-generateur-de-site-statique","text":"Si l\u2019on souhaite g\u00e9n\u00e9rer un \u00ab site statique \u00bb (une simple page HTML, sans PHP ; par ex. pour h\u00e9berger la page sur Neocities), on peut utiliser PHP en ligne de commande : # pour g\u00e9n\u00e9rer la version web php index.php > index.html # pour g\u00e9n\u00e9rer la version imprimable # (pas tr\u00e8s utile, mieux vaut mettre en ligne le PDF final) php index.php '&print' > print.html Dans le cas de PHP fourni par MAMP, il faut conna\u00eetre le chemin de l\u2019ex\u00e9cutable PHP : # Exemple sur Mac OSX (v\u00e9rifier la version de PHP) /Applications/MAMP/bin/php/php8.1.0/bin/php index.php > index.html","title":"PTTP comme g\u00e9n\u00e9rateur de site statique"},{"location":"pads/","text":"\u00c9dition collaborative Sur le principe largement r\u00e9pandu de \u00ab pad-to-print \u00bb ( pad2print de Luuse, Ethertoff ou Ether2html d\u2019Open Source Publishing, Collabprint de Quentin Juhel, Octomode de Varia), l\u2019outil permet de d\u00e9terminer des pads comme source de contenus. La structure de contenu du document (une s\u00e9rie de documents au format markdown ) est d\u00e9clar\u00e9e dans le fichier config.yml , mais plut\u00f4t que l\u2019usage standard, d\u00e9di\u00e9 \u00e0 des documents stock\u00e9s dans un sous-dossier, on d\u00e9clare alors l\u2019url de pads publics : parts: - title: Introduction collective # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: \"\" # \u2191 la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) pad: https://annuel2.framapad.org/p/pagetypetoprint?lang=fr # \u2191 on d\u00e9clare l\u2019URL du pad public template: default # \u2191 le gabarit de mise en page \u2026 Il est attendu que le contenu du pad soit nativement r\u00e9dig\u00e9 en markdown ; le format d\u2019exportation utilis\u00e9 \u00e9tant la version texte brut. NB: contrairement aux fichiers markdown locaux, il n\u2019est pas possible d\u2019\u00e9crire de HTML au sein des pads, mis \u00e0 part pour l\u2019usage de <br> . Les \u00e9ventuelles class sont autoris\u00e9es : <br class=\"breakprint\"> , <br class=\"breakpage\"> , <br class=\"breakcolumn\"> ou <br class=\"breakscreen\"> . Les entit\u00e9s HTML ( $nbsp; , &#8239; , etc.) sont pr\u00e9serv\u00e9es.","title":"Collaboration"},{"location":"pads/#edition-collaborative","text":"Sur le principe largement r\u00e9pandu de \u00ab pad-to-print \u00bb ( pad2print de Luuse, Ethertoff ou Ether2html d\u2019Open Source Publishing, Collabprint de Quentin Juhel, Octomode de Varia), l\u2019outil permet de d\u00e9terminer des pads comme source de contenus. La structure de contenu du document (une s\u00e9rie de documents au format markdown ) est d\u00e9clar\u00e9e dans le fichier config.yml , mais plut\u00f4t que l\u2019usage standard, d\u00e9di\u00e9 \u00e0 des documents stock\u00e9s dans un sous-dossier, on d\u00e9clare alors l\u2019url de pads publics : parts: - title: Introduction collective # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: \"\" # \u2191 la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) pad: https://annuel2.framapad.org/p/pagetypetoprint?lang=fr # \u2191 on d\u00e9clare l\u2019URL du pad public template: default # \u2191 le gabarit de mise en page \u2026 Il est attendu que le contenu du pad soit nativement r\u00e9dig\u00e9 en markdown ; le format d\u2019exportation utilis\u00e9 \u00e9tant la version texte brut. NB: contrairement aux fichiers markdown locaux, il n\u2019est pas possible d\u2019\u00e9crire de HTML au sein des pads, mis \u00e0 part pour l\u2019usage de <br> . Les \u00e9ventuelles class sont autoris\u00e9es : <br class=\"breakprint\"> , <br class=\"breakpage\"> , <br class=\"breakcolumn\"> ou <br class=\"breakscreen\"> . Les entit\u00e9s HTML ( $nbsp; , &#8239; , etc.) sont pr\u00e9serv\u00e9es.","title":"\u00c9dition collaborative"},{"location":"print/","text":"Version imprimable On peut acc\u00e9der \u00e0 la pr\u00e9visualisation de la version imprimable depuis l\u2019URL /?print . Par exemple, http://localhost:8888/pagetypetoprint/?print . Un fichier PDF devra \u00eatre produit en utilisant la fonction \u00ab d\u2019impression vers PDF \u00bb d\u2019un navigateur compatible (Chromium ou Chrome) : Fichier > Imprimer > Format PDF . Quelques r\u00e9glages de param\u00e8tres d\u2019impression sont souvent n\u00e9cessaires : d\u00e9sactiver les ent\u00eates et pieds de pages du navigateur, contr\u00f4ler la mise \u00e0 l\u2019\u00e9chelle, v\u00e9rifier le format, d\u00e9sactiver les marges par d\u00e9faut et cocher l\u2019option permettant d\u2019imprimer les arri\u00e8re-plans. Version finale t\u00e9l\u00e9chargeable Suite \u00e0 l\u2019exportation du document au format PDF, le fichier r\u00e9sultant devra \u00eatre stock\u00e9 dans le dossier de travail, et nomm\u00e9 en fonction de l\u2019option configurable dans le fichier config.yml . Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier body.php du th\u00e8me pourra alors \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Version imprimable / pdf"},{"location":"print/#version-imprimable","text":"On peut acc\u00e9der \u00e0 la pr\u00e9visualisation de la version imprimable depuis l\u2019URL /?print . Par exemple, http://localhost:8888/pagetypetoprint/?print . Un fichier PDF devra \u00eatre produit en utilisant la fonction \u00ab d\u2019impression vers PDF \u00bb d\u2019un navigateur compatible (Chromium ou Chrome) : Fichier > Imprimer > Format PDF . Quelques r\u00e9glages de param\u00e8tres d\u2019impression sont souvent n\u00e9cessaires : d\u00e9sactiver les ent\u00eates et pieds de pages du navigateur, contr\u00f4ler la mise \u00e0 l\u2019\u00e9chelle, v\u00e9rifier le format, d\u00e9sactiver les marges par d\u00e9faut et cocher l\u2019option permettant d\u2019imprimer les arri\u00e8re-plans.","title":"Version imprimable"},{"location":"print/#version-finale-telechargeable","text":"Suite \u00e0 l\u2019exportation du document au format PDF, le fichier r\u00e9sultant devra \u00eatre stock\u00e9 dans le dossier de travail, et nomm\u00e9 en fonction de l\u2019option configurable dans le fichier config.yml . Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier body.php du th\u00e8me pourra alors \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Version finale t\u00e9l\u00e9chargeable"},{"location":"references/","text":"Bibliographie Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les annexes bibliographiques. Un gabarit sp\u00e9cifique ( references ) est pr\u00e9vu pour d\u00e9clarer la bibliographie dans les sections du fichier config.yml : - title: Bibliographie file: content/text/7.biblio.md template: references Pr\u00e9conisations Dans la bibliographie, les r\u00e9f\u00e9rences sont ordonn\u00e9es par ordre alphab\u00e9tique du nom d\u2019auteur\u22c5ice (s\u2019il y a plusieurs r\u00e9f\u00e9rences d\u2019un\u22c5e m\u00eame auteur\u22c5ice, elles sont class\u00e9es chronologiquement). Toutes les sources cit\u00e9es dans le texte doivent aussi \u00eatre cit\u00e9es dans la bibliographie. Les normes recommand\u00e9es ci-dessous sont issues de la sp\u00e9cification ISO-690:2010 . Abbr\u00e9viations utiles Ibid. s\u2019utilise lorsque la note porte sur le m\u00eame ouvrage que la note pr\u00e9c\u00e9dente. Op. cit. s\u2019utilise lorsqu\u2019un ouvrage a d\u00e9j\u00e0 \u00e9t\u00e9 cit\u00e9 pr\u00e9c\u00e9demment, mais que d\u2019autres ouvrages ont \u00e9t\u00e9 cit\u00e9s depuis. Avec op. cit. , on mentionne quelques mots du titre, mais on fait l\u2019\u00e9conomie de la r\u00e9p\u00e9tition de la source compl\u00e8te. Ces deux abbr\u00e9viations se composent en italique. Pour citer un livre Le titre du livre doit \u00eatre en italique. En cas de d\u2019ouvrage collectif, indiquer \u00ab . Pr\u00e9nom NOM des auteurs principaux, dir. \u00bb apr\u00e8s le titre de l\u2019ouvrage. Si vous citez un chapitre, ajouter \u00ab Num\u00e9ro et titre du chapitre. Pages. \u00bb. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre du livre . \u00c9dition. Ville d\u2019\u00e9dition\u202f: Nom de l\u2019\u00e9diteur, Ann\u00e9e de publication. Collection. PAPANEK, Victor. _Design for the Real World: Human Ecology and Social Change_. New-York&#8239;: Pantheon Books, 1971. Pour citer un article Le titre de l\u2019article doit \u00eatre entre guillemets. Le titre de la revue ou du journal doit \u00eatre en italique. Si vous citez un quotidien, indiquer la date du jour. NOM, Pr\u00e9nom des auteur\u22c5ices. \u00ab Titre de l\u2019article \u00bb. Dans\u202f: Titre de la revue . Ann\u00e9e de publication, Volume (Num\u00e9ro), Pages. URL si publication en ligne. DREYFUS, John et Fernand BAUDIN. \u00ab&#8239;L\u2019invention des lunettes et l\u2019apparition de l\u2019imprimerie&#8239;\u00bb. Dans&nbsp;: _Communication & Langages_. 1989, (N^o^&nbsp;79), pp. 73-86. Pour citer une page web Le titre de la page doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la page . Date de publication (ou de mise \u00e0 jour) si disponible. Site Internet. URL [Consult\u00e9 le \u2026]. ERTZSCHEID, Olivier. _Une question de g\u00e9n\u00e9ration. Vers un capitalisme s\u00e9miotique_. 12 octobre 2022. Affordance.info. https://affordance.framasoft.org/2022/10/question-generation-capitalisme-semiotique/ [Consult\u00e9 le 13 octobre 2022]. Pour citer une vid\u00e9o en ligne Le titre de la vid\u00e9o doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la vid\u00e9o . Date si disponible. Disponible sur URL [Vid\u00e9o consult\u00e9e le \u2026]. PRADIER, Manon. _Avec Vincent_. 2016. Disponible sur https://youtu.be/3DNsGRUHF7s [Vid\u00e9o consult\u00e9e le 13 octobre 2022]. NB: les vid\u00e9os YouTube ont une URL courte (accessible via la commande \u201cPartager\u201d) pr\u00e9f\u00e9rable pour une mise en page plus condens\u00e9e. Colonnes Hors de la bibliographie, au sein du texte, le contenu peut \u00e9galement \u00eatre r\u00e9parti en trois colonnes en utilisant la notation\u202f: ::: columns Contenu :::","title":"R\u00e9f\u00e9rences et bibliographie"},{"location":"references/#bibliographie","text":"Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les annexes bibliographiques. Un gabarit sp\u00e9cifique ( references ) est pr\u00e9vu pour d\u00e9clarer la bibliographie dans les sections du fichier config.yml : - title: Bibliographie file: content/text/7.biblio.md template: references","title":"Bibliographie"},{"location":"references/#preconisations","text":"Dans la bibliographie, les r\u00e9f\u00e9rences sont ordonn\u00e9es par ordre alphab\u00e9tique du nom d\u2019auteur\u22c5ice (s\u2019il y a plusieurs r\u00e9f\u00e9rences d\u2019un\u22c5e m\u00eame auteur\u22c5ice, elles sont class\u00e9es chronologiquement). Toutes les sources cit\u00e9es dans le texte doivent aussi \u00eatre cit\u00e9es dans la bibliographie. Les normes recommand\u00e9es ci-dessous sont issues de la sp\u00e9cification ISO-690:2010 .","title":"Pr\u00e9conisations"},{"location":"references/#abbreviations-utiles","text":"Ibid. s\u2019utilise lorsque la note porte sur le m\u00eame ouvrage que la note pr\u00e9c\u00e9dente. Op. cit. s\u2019utilise lorsqu\u2019un ouvrage a d\u00e9j\u00e0 \u00e9t\u00e9 cit\u00e9 pr\u00e9c\u00e9demment, mais que d\u2019autres ouvrages ont \u00e9t\u00e9 cit\u00e9s depuis. Avec op. cit. , on mentionne quelques mots du titre, mais on fait l\u2019\u00e9conomie de la r\u00e9p\u00e9tition de la source compl\u00e8te. Ces deux abbr\u00e9viations se composent en italique.","title":"Abbr\u00e9viations utiles"},{"location":"references/#pour-citer-un-livre","text":"Le titre du livre doit \u00eatre en italique. En cas de d\u2019ouvrage collectif, indiquer \u00ab . Pr\u00e9nom NOM des auteurs principaux, dir. \u00bb apr\u00e8s le titre de l\u2019ouvrage. Si vous citez un chapitre, ajouter \u00ab Num\u00e9ro et titre du chapitre. Pages. \u00bb. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre du livre . \u00c9dition. Ville d\u2019\u00e9dition\u202f: Nom de l\u2019\u00e9diteur, Ann\u00e9e de publication. Collection. PAPANEK, Victor. _Design for the Real World: Human Ecology and Social Change_. New-York&#8239;: Pantheon Books, 1971.","title":"Pour citer un livre"},{"location":"references/#pour-citer-un-article","text":"Le titre de l\u2019article doit \u00eatre entre guillemets. Le titre de la revue ou du journal doit \u00eatre en italique. Si vous citez un quotidien, indiquer la date du jour. NOM, Pr\u00e9nom des auteur\u22c5ices. \u00ab Titre de l\u2019article \u00bb. Dans\u202f: Titre de la revue . Ann\u00e9e de publication, Volume (Num\u00e9ro), Pages. URL si publication en ligne. DREYFUS, John et Fernand BAUDIN. \u00ab&#8239;L\u2019invention des lunettes et l\u2019apparition de l\u2019imprimerie&#8239;\u00bb. Dans&nbsp;: _Communication & Langages_. 1989, (N^o^&nbsp;79), pp. 73-86.","title":"Pour citer un article"},{"location":"references/#pour-citer-une-page-web","text":"Le titre de la page doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la page . Date de publication (ou de mise \u00e0 jour) si disponible. Site Internet. URL [Consult\u00e9 le \u2026]. ERTZSCHEID, Olivier. _Une question de g\u00e9n\u00e9ration. Vers un capitalisme s\u00e9miotique_. 12 octobre 2022. Affordance.info. https://affordance.framasoft.org/2022/10/question-generation-capitalisme-semiotique/ [Consult\u00e9 le 13 octobre 2022].","title":"Pour citer une page web"},{"location":"references/#pour-citer-une-video-en-ligne","text":"Le titre de la vid\u00e9o doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la vid\u00e9o . Date si disponible. Disponible sur URL [Vid\u00e9o consult\u00e9e le \u2026]. PRADIER, Manon. _Avec Vincent_. 2016. Disponible sur https://youtu.be/3DNsGRUHF7s [Vid\u00e9o consult\u00e9e le 13 octobre 2022]. NB: les vid\u00e9os YouTube ont une URL courte (accessible via la commande \u201cPartager\u201d) pr\u00e9f\u00e9rable pour une mise en page plus condens\u00e9e.","title":"Pour citer une vid\u00e9o en ligne"},{"location":"references/#colonnes","text":"Hors de la bibliographie, au sein du texte, le contenu peut \u00e9galement \u00eatre r\u00e9parti en trois colonnes en utilisant la notation\u202f: ::: columns Contenu :::","title":"Colonnes"},{"location":"sommaire/","text":"Sommaire \u00c9cran \u00c0 l\u2019\u00e9cran, le sommaire est g\u00e9n\u00e9r\u00e9 automatiquement depuis les \u00e9l\u00e9ments contenus dans la liste d\u00e9finie dans le fichier config.yml . Seuls les titres de section apparaissent. L\u2019\u00e9l\u00e9ment <nav> qui le contient est clon\u00e9 via javascript, afin d\u2019appara\u00eetre \u00e0 la fois en introduction du document et au fil de la lecture. Impression En contexte d\u2019impression, il est g\u00e9n\u00e9r\u00e9 \u00e0 partir des balises <h2> et <h3> (\u00e0 l\u2019int\u00e9rieur de l\u2019\u00e9l\u00e9ment <main> ) du document (c\u2019est \u00e0 dire, des titres pr\u00e9c\u00e9d\u00e9s de ## et ### dans les fichiers markdown). Les titres de section ainsi que les \u00ab sous-parties \u00bb sont donc visibles.","title":"Sommaire"},{"location":"sommaire/#sommaire","text":"","title":"Sommaire"},{"location":"sommaire/#ecran","text":"\u00c0 l\u2019\u00e9cran, le sommaire est g\u00e9n\u00e9r\u00e9 automatiquement depuis les \u00e9l\u00e9ments contenus dans la liste d\u00e9finie dans le fichier config.yml . Seuls les titres de section apparaissent. L\u2019\u00e9l\u00e9ment <nav> qui le contient est clon\u00e9 via javascript, afin d\u2019appara\u00eetre \u00e0 la fois en introduction du document et au fil de la lecture.","title":"\u00c9cran"},{"location":"sommaire/#impression","text":"En contexte d\u2019impression, il est g\u00e9n\u00e9r\u00e9 \u00e0 partir des balises <h2> et <h3> (\u00e0 l\u2019int\u00e9rieur de l\u2019\u00e9l\u00e9ment <main> ) du document (c\u2019est \u00e0 dire, des titres pr\u00e9c\u00e9d\u00e9s de ## et ### dans les fichiers markdown). Les titres de section ainsi que les \u00ab sous-parties \u00bb sont donc visibles.","title":"Impression"},{"location":"theme/","text":"Th\u00e8me Le th\u00e8me par d\u00e9faut ( theme/esadpyrenees ) contient deux dossiers \u2013 pour les scripts js et les feuilles de style CSS \u2013 et trois fichiers: body.php , print_head.php et screen_head.php . Modifier le th\u00e8me Pour modifier l\u2019apparence des documents, il est possible de dupliquer le th\u00e8me par d\u00e9faut, pour \u00eatre en mesure d\u2019\u00e9diter \u00e0 la fois les styles graphiques, les scripts et la structure HTML du document. body.php Ce fichier contient l\u2019ensemble de la structure HTML du document. Les contenus HTML des versions \u00e9cran et imprimable sont identiques par d\u00e9faut, mais il est possible de les diff\u00e9rencier en utilisant une condition : // \u00e0 la place de : include( \"$theme_url/body.php\" ); // utiliser : include( isset($_GET[\"print\"]) ? \"$theme_url/print_body.php\" : \"$theme_url/screen_body.php\"); print_head.php Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019affichage \u00e9cran. screen_head.php Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019impression, notamment, l\u2019appel \u00e0 la librairie paged.js .","title":"Th\u00e8me"},{"location":"theme/#theme","text":"Le th\u00e8me par d\u00e9faut ( theme/esadpyrenees ) contient deux dossiers \u2013 pour les scripts js et les feuilles de style CSS \u2013 et trois fichiers: body.php , print_head.php et screen_head.php .","title":"Th\u00e8me"},{"location":"theme/#modifier-le-theme","text":"Pour modifier l\u2019apparence des documents, il est possible de dupliquer le th\u00e8me par d\u00e9faut, pour \u00eatre en mesure d\u2019\u00e9diter \u00e0 la fois les styles graphiques, les scripts et la structure HTML du document.","title":"Modifier le th\u00e8me"},{"location":"theme/#bodyphp","text":"Ce fichier contient l\u2019ensemble de la structure HTML du document. Les contenus HTML des versions \u00e9cran et imprimable sont identiques par d\u00e9faut, mais il est possible de les diff\u00e9rencier en utilisant une condition : // \u00e0 la place de : include( \"$theme_url/body.php\" ); // utiliser : include( isset($_GET[\"print\"]) ? \"$theme_url/print_body.php\" : \"$theme_url/screen_body.php\");","title":"body.php"},{"location":"theme/#print_headphp","text":"Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019affichage \u00e9cran.","title":"print_head.php"},{"location":"theme/#screen_headphp","text":"Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019impression, notamment, l\u2019appel \u00e0 la librairie paged.js .","title":"screen_head.php"},{"location":"typo/","text":"Typographie La majeure partie des probl\u00e9matiques de micro-typographie est corrig\u00e9e automatiquement (points de suspension, espaces avant et apr\u00e8s ! ? \u00ab \u00bb \u201c \u201d, unit\u00e9s). Cete automatisation ne dispense aucunement du soin \u00e0 apporter \u00e0 la composition typographique du texte ! Sauts de page ou de colonnes \u00c0 l\u2019impression, on peut forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Pour forcer un saut dans des colonnes (notes de bas de page, notamment), utiliser : <br class=\"breakcolumn\"> Des sauts de ligne conditionnels (\u00e9cran ou impression) peuvent \u00eatre g\u00e9n\u00e9r\u00e9s gr\u00e2ce aux balises : <br class=\"breakscreen\"><!-- uniquement \u00e0 l\u2019\u00e9cran --> <br class=\"breakprint\"><!-- uniquement \u00e0 l\u2019impression --> Espaces Pour une espace mot ins\u00e9cable, utiliser &nbsp; Pour une espace fine ins\u00e9cable, utiliser &#8239; Apostrophe courbe et guillemets Les apostrophes sont compos\u00e9es gr\u00e2ce au signe \u2019 et pas '. Les \u00ab guillemets droits \u00bb, simples ou doubles (\" et ') devraient \u00eatre proscrits. Dans PageTypeToPrint, en Markdown, ils sont automatiquement remplac\u00e9s par des guillemets fran\u00e7ais (\u00ab\u00bb). Les guillemets fran\u00e7ais devraient \u00eatre utilis\u00e9s dans l\u2019immense majorit\u00e9 des cas. Les guillemets anglais (\u201c\u201d) sont r\u00e9serv\u00e9s \u00e0 la mise entre guillemets au sein-m\u00eame d\u2019un texte d\u00e9j\u00e0 entre guillemets fran\u00e7ais : \u00ab Une citation peut contenir des mots \u201centre guillemets\u201d. \u00bb Les caract\u00e8res dans le tableau ci-dessous peuvent \u00eatre compos\u00e9s directement (les entit\u00e9s HTML ne sont pr\u00e9sent\u00e9es qu\u2019\u00e0 titre informatif). Nom Entit\u00e9 HTML Commentaire \u2019 & rsquo; Apostrophe courbe \u00ab \u00bb & laquo; & raquo; Guillemet fran\u00e7ais ouvrant et fermant \u201c \u201d & ldquo; & rdquo; Guillemet anglais ouvrant et fermant Exposants Pour un exposant, utiliser XX^e^ si\u00e8cle , afin d\u2019afficher XX e si\u00e8cle. Les abbr\u00e9viations premier, deuxi\u00e8me, etc. se composent \u00e9galement en exposants : \u00ab la 1^re^ vague et la 2^e^ vague \u00bb pour afficher \u00ab la 1 re vague et la 2 e vague \u00bb. Points de suspension Les points de suspension doivent \u00eatre compos\u00e9s gr\u00e2ce au caract\u00e8re d\u00e9di\u00e9 : \u00ab \u2026 \u00bb. (Pas en faisant se succ\u00e9der trois points : ...). Spacing Pour r\u00e9duire une ligne de texte et emp\u00eacher un saut malencontreux (veuves ou orphelines), on peut introduire au sein du texte markdown des balises span qui vont permettre de r\u00e9gler finement le spacing d\u2019une phrase ou d\u2019une ligne: Lorem <span style=\"--ls:4\">ipsum dolor sit amet, consectetur adipiscing elit.</span> Sed non risus [\u2026] Dans la CSS doit \u00eatre pr\u00e9sent : [style^=\"--ls\"] { letter-spacing: calc(var(--ls, 0) * -0.001em); } La valeur attribu\u00e9e \u00e0 la propri\u00e9t\u00e9 --ls permettra d\u2019\u00e9tendre le spacing (si elle est n\u00e9gative) ou de le resserrer si elle est positive. L\u2019inspecteur web permet de modifier la valeur \u00e0 la vol\u00e9e afin de l\u2019ajuster pr\u00e9cis\u00e9ment. \u26a0\ufe0f Attention, ne proc\u00e9der \u00e0 ces ajustements qu\u2019en toute fin de mise en forme, quand tout le reste a \u00e9t\u00e9 fait !","title":"Typographie"},{"location":"typo/#typographie","text":"La majeure partie des probl\u00e9matiques de micro-typographie est corrig\u00e9e automatiquement (points de suspension, espaces avant et apr\u00e8s ! ? \u00ab \u00bb \u201c \u201d, unit\u00e9s). Cete automatisation ne dispense aucunement du soin \u00e0 apporter \u00e0 la composition typographique du texte !","title":"Typographie"},{"location":"typo/#sauts-de-page-ou-de-colonnes","text":"\u00c0 l\u2019impression, on peut forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Pour forcer un saut dans des colonnes (notes de bas de page, notamment), utiliser : <br class=\"breakcolumn\"> Des sauts de ligne conditionnels (\u00e9cran ou impression) peuvent \u00eatre g\u00e9n\u00e9r\u00e9s gr\u00e2ce aux balises : <br class=\"breakscreen\"><!-- uniquement \u00e0 l\u2019\u00e9cran --> <br class=\"breakprint\"><!-- uniquement \u00e0 l\u2019impression -->","title":"Sauts de page ou de colonnes"},{"location":"typo/#espaces","text":"Pour une espace mot ins\u00e9cable, utiliser &nbsp; Pour une espace fine ins\u00e9cable, utiliser &#8239;","title":"Espaces"},{"location":"typo/#apostrophe-courbe-et-guillemets","text":"Les apostrophes sont compos\u00e9es gr\u00e2ce au signe \u2019 et pas '. Les \u00ab guillemets droits \u00bb, simples ou doubles (\" et ') devraient \u00eatre proscrits. Dans PageTypeToPrint, en Markdown, ils sont automatiquement remplac\u00e9s par des guillemets fran\u00e7ais (\u00ab\u00bb). Les guillemets fran\u00e7ais devraient \u00eatre utilis\u00e9s dans l\u2019immense majorit\u00e9 des cas. Les guillemets anglais (\u201c\u201d) sont r\u00e9serv\u00e9s \u00e0 la mise entre guillemets au sein-m\u00eame d\u2019un texte d\u00e9j\u00e0 entre guillemets fran\u00e7ais : \u00ab Une citation peut contenir des mots \u201centre guillemets\u201d. \u00bb Les caract\u00e8res dans le tableau ci-dessous peuvent \u00eatre compos\u00e9s directement (les entit\u00e9s HTML ne sont pr\u00e9sent\u00e9es qu\u2019\u00e0 titre informatif). Nom Entit\u00e9 HTML Commentaire \u2019 & rsquo; Apostrophe courbe \u00ab \u00bb & laquo; & raquo; Guillemet fran\u00e7ais ouvrant et fermant \u201c \u201d & ldquo; & rdquo; Guillemet anglais ouvrant et fermant","title":"Apostrophe courbe et guillemets"},{"location":"typo/#exposants","text":"Pour un exposant, utiliser XX^e^ si\u00e8cle , afin d\u2019afficher XX e si\u00e8cle. Les abbr\u00e9viations premier, deuxi\u00e8me, etc. se composent \u00e9galement en exposants : \u00ab la 1^re^ vague et la 2^e^ vague \u00bb pour afficher \u00ab la 1 re vague et la 2 e vague \u00bb.","title":"Exposants"},{"location":"typo/#points-de-suspension","text":"Les points de suspension doivent \u00eatre compos\u00e9s gr\u00e2ce au caract\u00e8re d\u00e9di\u00e9 : \u00ab \u2026 \u00bb. (Pas en faisant se succ\u00e9der trois points : ...).","title":"Points de suspension"},{"location":"typo/#spacing","text":"Pour r\u00e9duire une ligne de texte et emp\u00eacher un saut malencontreux (veuves ou orphelines), on peut introduire au sein du texte markdown des balises span qui vont permettre de r\u00e9gler finement le spacing d\u2019une phrase ou d\u2019une ligne: Lorem <span style=\"--ls:4\">ipsum dolor sit amet, consectetur adipiscing elit.</span> Sed non risus [\u2026] Dans la CSS doit \u00eatre pr\u00e9sent : [style^=\"--ls\"] { letter-spacing: calc(var(--ls, 0) * -0.001em); } La valeur attribu\u00e9e \u00e0 la propri\u00e9t\u00e9 --ls permettra d\u2019\u00e9tendre le spacing (si elle est n\u00e9gative) ou de le resserrer si elle est positive. L\u2019inspecteur web permet de modifier la valeur \u00e0 la vol\u00e9e afin de l\u2019ajuster pr\u00e9cis\u00e9ment. \u26a0\ufe0f Attention, ne proc\u00e9der \u00e0 ces ajustements qu\u2019en toute fin de mise en forme, quand tout le reste a \u00e9t\u00e9 fait !","title":"Spacing"}]}
\ No newline at end of file
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"PageTypeToPrint est un outil de mise en page et de publication web + print . Con\u00e7u originellement comme un gabarit de mise en forme des m\u00e9moires des \u00e9tudiant\u22c5es de l\u2019\u00c9cole sup\u00e9rieure d\u2019art et de design des Pyr\u00e9nes, il est bas\u00e9 sur la simplicit\u00e9 de l\u2019\u00e9dition (contenu textuel au format markdown ), mais peut \u00eatre adapt\u00e9, augment\u00e9 et personnalis\u00e9. Il produit un contenu lisible en ligne sous la forme d\u2019une page web et permet de g\u00e9n\u00e9rer un document PDF t\u00e9l\u00e9chargeable et imprimable. Fonctionnement PageTypeToPrint est un outil qui\u2026 utilise le langage PHP, pour transformer des textes au format markdown en une page HTML, afin de pouvoir l\u2019afficher dans un navigateur web, et en g\u00e9n\u00e9rer un PDF imprimable, via Paged.js et les fonctionnalit\u00e9s internes des navigateurs. D\u00e9mo Une d\u00e9mo est accessible en ligne sur ateliers.esad-pyrenees.fr/pagetypetoprint avec sa version print et le document pdf g\u00e9n\u00e9r\u00e9. Open source PageTypeToPrint est un logiciel libre. Son code est accessible sur : github.com/esadpyrenees/PageTypeToPrint . \u2193 T\u00e9l\u00e9charger","title":"Accueil"},{"location":"#fonctionnement","text":"PageTypeToPrint est un outil qui\u2026 utilise le langage PHP, pour transformer des textes au format markdown en une page HTML, afin de pouvoir l\u2019afficher dans un navigateur web, et en g\u00e9n\u00e9rer un PDF imprimable, via Paged.js et les fonctionnalit\u00e9s internes des navigateurs.","title":"Fonctionnement"},{"location":"#demo","text":"Une d\u00e9mo est accessible en ligne sur ateliers.esad-pyrenees.fr/pagetypetoprint avec sa version print et le document pdf g\u00e9n\u00e9r\u00e9.","title":"D\u00e9mo"},{"location":"#open-source","text":"PageTypeToPrint est un logiciel libre. Son code est accessible sur : github.com/esadpyrenees/PageTypeToPrint . \u2193 T\u00e9l\u00e9charger","title":"Open source"},{"location":"advanced-notes/","text":"Notes avanc\u00e9es PageTypeToPrint g\u00e8re nativement deux types de notes : des notes \u00ab textuelles \u00bb et des notes \u00ab iconographiques \u00bb. Notes textuelles Elles sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce \u00e0 l\u2019extension MarkdownItFootnote et suivent le format d\u2019appel et de cr\u00e9ation de notes markdown le plus commun : Ins\u00e9rer un appel de note[^appel], puis cr\u00e9er un paragraphe contentant : [^appel]: Contenu de la note. Les appels de notes sont ins\u00e9r\u00e9s au fil du texte : <p>Ins\u00e9rer un appel de note<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">1</a></sup>, puis cr\u00e9er un paragraphe contentant : </p> L\u2019ensemble des notes se retrouve \u00e0 la fin du document, dans une liste. Un lien de retour vers l\u2019appel de note est ins\u00e9r\u00e9 \u00e0 la fin de son contenu : <hr class=\"footnotes-sep\"> <section class=\"footnotes\"> <ol class=\"footnotes-list\"> <li id=\"fn1\" class=\"footnote-item\"><p>Contenu de la note <a href=\"#fnref1\" class=\"footnote-backref\">&#8617;&#65038;</a><p></li> [\u2026] </ol> </section> Affichage \u00e9cran : notes textuelles en marge Pour l\u2019affichage \u00e0 l\u2019\u00e9cran, le script js/screen/sideNotes.js parcourt les appels de note, r\u00e9cup\u00e8re leur contenu cible et l\u2019ins\u00e8re au fil du texte, \u00e0 la place de l\u2019appel de note initial, dans une structure HTML constitu\u00e9e de trois \u00e9l\u00e9ments : <label class=\"sn-toggle-label\" for=\"sn-note-fn1\">1</label> <input type=\"checkbox\" id=\"sn-note-fn1\" class=\"sn-toggle\"> <aside class=\"sn-note\" data-ref=\"2\"><p>Contenu de la note</p></aside> Ces \u00e9l\u00e9ments permettent un affichage responsive des notes : soit sur le c\u00f4t\u00e9 du texte si le viewport est suffisamment grand, soit au sein du texte apr\u00e8s un clic sur le label en affichage mobile (voir la section \u201cNotes\u201d du fichier css/styles.css ). Impression : notes textuelles en bas de page En contexte d\u2019impression, la structure HTML des notes textuelles est soumise \u00e0 une modification similaire gr\u00e2ce au script js/screen/footNotes.js afin de suivre le balisage recommand\u00e9 dans la sp\u00e9cification HTML du W3C. Les notes textuelles seront ainsi int\u00e9gr\u00e9es au bas de chaque page par la librairie paged.js . Si l\u2019on souhaite d\u00e9placer les notes de bas de page en marge, ce script devra \u00eatre d\u00e9sactiv\u00e9 et une op\u00e9ration similaire \u00e0 celle \u00e0 laquelles sont soumises les notes iconographiques devra \u00eatre op\u00e9r\u00e9e. Notes iconographiques Les notes iconographiques ( ou images de note ) sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce au shortcode (imagenote: fichier.jpg) ins\u00e9r\u00e9 apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg caption: Gustave Dor\u00e9) sont grav\u00e9es dans les m\u00e9moires. Elles peuvent b\u00e9n\u00e9ficier de l\u2019ensemble des attributs li\u00e9s aux figures ( class et caption ) et sont ins\u00e9r\u00e9es au fil du texte gr\u00e2ce au parsing des shortcodes de la librairie _inc/Specials/Tags.php . En contexte d\u2019impression, elles mises en marge gr\u00e2ce au script js/print/imageNotes.js .","title":"Notes avanc\u00e9es"},{"location":"advanced-notes/#notes-avancees","text":"PageTypeToPrint g\u00e8re nativement deux types de notes : des notes \u00ab textuelles \u00bb et des notes \u00ab iconographiques \u00bb.","title":"Notes avanc\u00e9es"},{"location":"advanced-notes/#notes-textuelles","text":"Elles sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce \u00e0 l\u2019extension MarkdownItFootnote et suivent le format d\u2019appel et de cr\u00e9ation de notes markdown le plus commun : Ins\u00e9rer un appel de note[^appel], puis cr\u00e9er un paragraphe contentant : [^appel]: Contenu de la note. Les appels de notes sont ins\u00e9r\u00e9s au fil du texte : <p>Ins\u00e9rer un appel de note<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">1</a></sup>, puis cr\u00e9er un paragraphe contentant : </p> L\u2019ensemble des notes se retrouve \u00e0 la fin du document, dans une liste. Un lien de retour vers l\u2019appel de note est ins\u00e9r\u00e9 \u00e0 la fin de son contenu : <hr class=\"footnotes-sep\"> <section class=\"footnotes\"> <ol class=\"footnotes-list\"> <li id=\"fn1\" class=\"footnote-item\"><p>Contenu de la note <a href=\"#fnref1\" class=\"footnote-backref\">&#8617;&#65038;</a><p></li> [\u2026] </ol> </section>","title":"Notes textuelles"},{"location":"advanced-notes/#affichage-ecran-notes-textuelles-en-marge","text":"Pour l\u2019affichage \u00e0 l\u2019\u00e9cran, le script js/screen/sideNotes.js parcourt les appels de note, r\u00e9cup\u00e8re leur contenu cible et l\u2019ins\u00e8re au fil du texte, \u00e0 la place de l\u2019appel de note initial, dans une structure HTML constitu\u00e9e de trois \u00e9l\u00e9ments : <label class=\"sn-toggle-label\" for=\"sn-note-fn1\">1</label> <input type=\"checkbox\" id=\"sn-note-fn1\" class=\"sn-toggle\"> <aside class=\"sn-note\" data-ref=\"2\"><p>Contenu de la note</p></aside> Ces \u00e9l\u00e9ments permettent un affichage responsive des notes : soit sur le c\u00f4t\u00e9 du texte si le viewport est suffisamment grand, soit au sein du texte apr\u00e8s un clic sur le label en affichage mobile (voir la section \u201cNotes\u201d du fichier css/styles.css ).","title":"Affichage \u00e9cran : notes textuelles en marge"},{"location":"advanced-notes/#impression-notes-textuelles-en-bas-de-page","text":"En contexte d\u2019impression, la structure HTML des notes textuelles est soumise \u00e0 une modification similaire gr\u00e2ce au script js/screen/footNotes.js afin de suivre le balisage recommand\u00e9 dans la sp\u00e9cification HTML du W3C. Les notes textuelles seront ainsi int\u00e9gr\u00e9es au bas de chaque page par la librairie paged.js . Si l\u2019on souhaite d\u00e9placer les notes de bas de page en marge, ce script devra \u00eatre d\u00e9sactiv\u00e9 et une op\u00e9ration similaire \u00e0 celle \u00e0 laquelles sont soumises les notes iconographiques devra \u00eatre op\u00e9r\u00e9e.","title":"Impression : notes textuelles en bas de page"},{"location":"advanced-notes/#notes-iconographiques","text":"Les notes iconographiques ( ou images de note ) sont g\u00e9n\u00e9r\u00e9es gr\u00e2ce au shortcode (imagenote: fichier.jpg) ins\u00e9r\u00e9 apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg caption: Gustave Dor\u00e9) sont grav\u00e9es dans les m\u00e9moires. Elles peuvent b\u00e9n\u00e9ficier de l\u2019ensemble des attributs li\u00e9s aux figures ( class et caption ) et sont ins\u00e9r\u00e9es au fil du texte gr\u00e2ce au parsing des shortcodes de la librairie _inc/Specials/Tags.php . En contexte d\u2019impression, elles mises en marge gr\u00e2ce au script js/print/imageNotes.js .","title":"Notes iconographiques"},{"location":"appendices/","text":"Annexes Pour les annexes, organis\u00e9es sur une grille de 12 colonnes ( template appendices ), quelques class sont pr\u00e9d\u00e9finies pour faciliter la mise en page : offset0 : pas de d\u00e9calage (valeur par d\u00e9faut) offset2 d\u00e9cale l\u2019image en colonne 3 offset4 d\u00e9cale l\u2019image en colonne 5 offset6 d\u00e9cale l\u2019image en colonne 7 offset8 d\u00e9cale l\u2019image en colonne 9 quarter dimensionne l\u2019image sur 3 colonnes (un quart de la largeur \u2014 valeur par d\u00e9faut) third dimensionne l\u2019image sur 4 colonnes (un tiers de la largeur) half dimensionne l\u2019image sur 6 colonnes (la moiti\u00e9 de la largeur) twothird dimensionne l\u2019image sur 8 colonnes (deux tiers de la largeur) threequarter dimensionne l\u2019image sur 9 colonnes (trois quarts de la largeur) full dimensionne l\u2019image sur 12 colonnes (toute la largeur) Par exemple : (figure: url/de_limage.jpg class: notwhite offset6 half) Web vs print Pour dif\u00e9rencier la mise en page des images entre l\u2019\u00e9cran et l\u2019impression, on peut \u00e9tablir des styles diff\u00e9rents pour chaque contexte : (figure: images/01.jpg class: half print: full) \u2191 Cette image occupera la moiti\u00e9 de la largeur de l\u2019empagement en version \u00e9cran, et la pleine largeur en version imprimable. \u00c0 l\u2019aide ! Pour aider \u00e0 la mise en page \u201cvisuelle\u201d des images, on peut activer un utilitaire visuel qui aide \u00e0 d\u00e9terminer le code d\u2019int\u00e9gration des images. En contexte \u00e9cran, ajouter /?layout \u00e0 l\u2019URL. En contexte de pr\u00e9visualisation print : /?print&layout . Chaque figure se voit alors dot\u00e9 d\u2019un outil permettant de d\u00e9finir la largeur de la figure ( quarter , third , half , twothird , threequarter ou full ) et son d\u00e9calage ( offset0 , offset2 , offset4 , offset6 ou offset8 ). \u26a0\ufe0f Le code d\u2019int\u00e9gration de la figure est alors copi\u00e9 dans le presse-papier, et doit \u00eatre coll\u00e9 dans le document markdown source. Attention, en contexte d\u2019impression, la mise en page n\u2019est pas recalcul\u00e9e. Il faut modifier le code d\u2019int\u00e9gration de la figure concern\u00e9e dans le fichier markdown, l\u2019enregistrer, puis actualiser la page dans le navigateur.","title":"Annexes"},{"location":"appendices/#annexes","text":"Pour les annexes, organis\u00e9es sur une grille de 12 colonnes ( template appendices ), quelques class sont pr\u00e9d\u00e9finies pour faciliter la mise en page : offset0 : pas de d\u00e9calage (valeur par d\u00e9faut) offset2 d\u00e9cale l\u2019image en colonne 3 offset4 d\u00e9cale l\u2019image en colonne 5 offset6 d\u00e9cale l\u2019image en colonne 7 offset8 d\u00e9cale l\u2019image en colonne 9 quarter dimensionne l\u2019image sur 3 colonnes (un quart de la largeur \u2014 valeur par d\u00e9faut) third dimensionne l\u2019image sur 4 colonnes (un tiers de la largeur) half dimensionne l\u2019image sur 6 colonnes (la moiti\u00e9 de la largeur) twothird dimensionne l\u2019image sur 8 colonnes (deux tiers de la largeur) threequarter dimensionne l\u2019image sur 9 colonnes (trois quarts de la largeur) full dimensionne l\u2019image sur 12 colonnes (toute la largeur) Par exemple : (figure: url/de_limage.jpg class: notwhite offset6 half)","title":"Annexes"},{"location":"appendices/#web-vs-print","text":"Pour dif\u00e9rencier la mise en page des images entre l\u2019\u00e9cran et l\u2019impression, on peut \u00e9tablir des styles diff\u00e9rents pour chaque contexte : (figure: images/01.jpg class: half print: full) \u2191 Cette image occupera la moiti\u00e9 de la largeur de l\u2019empagement en version \u00e9cran, et la pleine largeur en version imprimable.","title":"Web vs print"},{"location":"appendices/#a-laide","text":"Pour aider \u00e0 la mise en page \u201cvisuelle\u201d des images, on peut activer un utilitaire visuel qui aide \u00e0 d\u00e9terminer le code d\u2019int\u00e9gration des images. En contexte \u00e9cran, ajouter /?layout \u00e0 l\u2019URL. En contexte de pr\u00e9visualisation print : /?print&layout . Chaque figure se voit alors dot\u00e9 d\u2019un outil permettant de d\u00e9finir la largeur de la figure ( quarter , third , half , twothird , threequarter ou full ) et son d\u00e9calage ( offset0 , offset2 , offset4 , offset6 ou offset8 ). \u26a0\ufe0f Le code d\u2019int\u00e9gration de la figure est alors copi\u00e9 dans le presse-papier, et doit \u00eatre coll\u00e9 dans le document markdown source. Attention, en contexte d\u2019impression, la mise en page n\u2019est pas recalcul\u00e9e. Il faut modifier le code d\u2019int\u00e9gration de la figure concern\u00e9e dans le fichier markdown, l\u2019enregistrer, puis actualiser la page dans le navigateur.","title":"\u00c0 l\u2019aide !"},{"location":"autofolder/","text":"Catalogue d\u2019images On peut d\u00e9terminer que la source d\u2019un contenu ne soit ni un fichier markdown, ni l\u2019URL d\u2019un pad, mais un dossier d\u2019images. C\u2019est une solution moins souple et moins pr\u00e9cise que la structuration d\u2019une s\u00e9rie d\u2019images via les logiques d\u00e9crites dans la gestion des annexes , mais beaucoup plus rapide :) parts: - title: Images en vrac file: \"\" # la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) folder: images/dossier # on d\u00e9clare le chemin vers le dossier template: autofolder # le gabarit de mise en page \u2026 Les fichiers gif, jpg, png, svg et webp seront automatiquement int\u00e9gr\u00e9s dans une succession d\u2019\u00e9l\u00e9ments <figure> . Les images verticales (hauteur > largeur) auront une class portrait ; les horizontales une class landscape . Exemple pas \u00e0 pas Le th\u00e8me catalogue simplifie \u00e0 l\u2019extr\u00eame les logiques initiales de PageTypeToPrint pour n\u2019en conserver qu\u2019une structure minimale : \u00e0 l\u2019\u00e9cran : une simple page qui liste des images en faisant varier leur taille et leur mise en page de mani\u00e8re al\u00e9atoire. en version imprim\u00e9e : un format A4 ferm\u00e9 impos\u00e9 automatiquement sur format A3 (feuilles \u00e0 plier et encarter pour fabriquer un livret). Une d\u00e9mo est accessible dans sa version \u00e9cran et dans sa version imprimable . \u00c9tape 1 : configuration du document # Le th\u00e8me theme: \"catalogue\" # Le titre title: Three D Scans # Des m\u00e9ta-donn\u00e9es sp\u00e9cifiques peuvent \u00eatre cr\u00e9\u00e9es url: threedscans.org date: 19/09/2023 # Structure du contenu parts: - title: Three D Scans folder: content/images # \u2190 le dossier d\u2019images template: autofolder # \u2190 le gabarit - title: About file : content/about.md template : default \u00c9tape 2 : simplification de body.php Suppression de la navigation, du sommaire et des titres courants. <header id=\"header\"> <!-- Le titre --> <h1><?= $title ?></h1> <!-- le folio --> <span class=\"folio\"></span> <!-- affichage des m\u00e9ta-donn\u00e9es sp\u00e9cifiques --> <div class=\"meta\"> <span class=\"meta-url\"><a href=\"<?= $url ?>\"><?= $url ?></a></span> <span class=\"meta-date\"><?= $date ?></span> </div> </header> <main id=\"main\"> <!-- le contenu --> <?= $html() ?> </main> \u00c9tape 2 : simplification de la CSS style.css Une large part de la feuille de style par d\u00e9faut n\u2019est pas utile dans le cadre d\u2019un simple catalogue d\u2019image. On peut ainsi supprimer une grande part des r\u00e8gles de mise en forme : m\u00e9ta-donn\u00e9es, typographie, navigation, gabarits interview , appendices , glossaire, colonnes, images de note, notes de marge, etc. Les r\u00e8gles correspondant au gabarit autofolder peuvent d\u00e9terminer une grille responsive et pr\u00e9ciser le comportement des images et des l\u00e9gendes : .autofolder .content { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: var(--spacer); } .autofolder .figure { margin: 0; padding: 0; } .autofolder img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } .autofolder figcaption { text-align: center; font-size: .75em; text-transform: uppercase; letter-spacing: 0.15em; height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } \u00c9tape 3 : Modifications de screen_head.php Les appels du script screen/sidenotes.js et des scripts d\u2019 aide \u00e0 la mise en page sont supprim\u00e9s. Dans l\u2019exemple de th\u00e8me catalogue , on ajoute un appel au script ( screen/script.js ), qui intervient pour modifier al\u00e9atoirement la largeur des figures et d\u00e9structurer la grille. \u00c9tape 4 : Modifications de la CSS print.css D\u00e9claration du format de page et de la pagination par d\u00e9faut, ainsi que de la page de couverture et des pages vides. @page { size: 210mm 297mm; } @page:right { margin: 1cm 2cm 2.5cm 1cm; @bottom-right-corner { content: element(folioRunning); text-align: left; } } @page:left { margin: 1cm 1cm 2.5cm 2cm; @bottom-left-corner { content: element(folioRunning); text-align: left; } } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } \u00c9tape 5 : Modifications de print_head.php Les appels des scripts li\u00e9s aux notes iconographiques et de bas de page, au sommaire, etc. sont supprim\u00e9s. Le format ferm\u00e9 (A4) \u00e9tant d\u00e9fini en CSS, on inclue l\u2019appel du script print/imposition.js qui permet de g\u00e9n\u00e9rer l\u2019imposition des pages A4 et de modifier le format de sortie pour que deux pages puissent \u00eatre imprim\u00e9es sur la m\u00eame face. Si besoin, ce script ins\u00e8re des pages blanches pour que la pagination soit un multiple de quatre. Dans l\u2019exemple de th\u00e8me catalogue \u2013juste pour montrer que c\u2019est possible\u2026\u2013, on ajoute un appel au script print/bigfigures.js , qui intervient pour modifier la largeur et la hauteur de certaines figures, s\u00e9lectionn\u00e9es manuellement via leur id .","title":"Catalogue d\u2019images"},{"location":"autofolder/#catalogue-dimages","text":"On peut d\u00e9terminer que la source d\u2019un contenu ne soit ni un fichier markdown, ni l\u2019URL d\u2019un pad, mais un dossier d\u2019images. C\u2019est une solution moins souple et moins pr\u00e9cise que la structuration d\u2019une s\u00e9rie d\u2019images via les logiques d\u00e9crites dans la gestion des annexes , mais beaucoup plus rapide :) parts: - title: Images en vrac file: \"\" # la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) folder: images/dossier # on d\u00e9clare le chemin vers le dossier template: autofolder # le gabarit de mise en page \u2026 Les fichiers gif, jpg, png, svg et webp seront automatiquement int\u00e9gr\u00e9s dans une succession d\u2019\u00e9l\u00e9ments <figure> . Les images verticales (hauteur > largeur) auront une class portrait ; les horizontales une class landscape .","title":"Catalogue d\u2019images"},{"location":"autofolder/#exemple-pas-a-pas","text":"Le th\u00e8me catalogue simplifie \u00e0 l\u2019extr\u00eame les logiques initiales de PageTypeToPrint pour n\u2019en conserver qu\u2019une structure minimale : \u00e0 l\u2019\u00e9cran : une simple page qui liste des images en faisant varier leur taille et leur mise en page de mani\u00e8re al\u00e9atoire. en version imprim\u00e9e : un format A4 ferm\u00e9 impos\u00e9 automatiquement sur format A3 (feuilles \u00e0 plier et encarter pour fabriquer un livret). Une d\u00e9mo est accessible dans sa version \u00e9cran et dans sa version imprimable .","title":"Exemple pas \u00e0 pas"},{"location":"autofolder/#etape-1-configuration-du-document","text":"# Le th\u00e8me theme: \"catalogue\" # Le titre title: Three D Scans # Des m\u00e9ta-donn\u00e9es sp\u00e9cifiques peuvent \u00eatre cr\u00e9\u00e9es url: threedscans.org date: 19/09/2023 # Structure du contenu parts: - title: Three D Scans folder: content/images # \u2190 le dossier d\u2019images template: autofolder # \u2190 le gabarit - title: About file : content/about.md template : default","title":"\u00c9tape 1\u00a0: configuration du document"},{"location":"autofolder/#etape-2-simplification-de-bodyphp","text":"Suppression de la navigation, du sommaire et des titres courants. <header id=\"header\"> <!-- Le titre --> <h1><?= $title ?></h1> <!-- le folio --> <span class=\"folio\"></span> <!-- affichage des m\u00e9ta-donn\u00e9es sp\u00e9cifiques --> <div class=\"meta\"> <span class=\"meta-url\"><a href=\"<?= $url ?>\"><?= $url ?></a></span> <span class=\"meta-date\"><?= $date ?></span> </div> </header> <main id=\"main\"> <!-- le contenu --> <?= $html() ?> </main>","title":"\u00c9tape 2 : simplification de body.php"},{"location":"autofolder/#etape-2-simplification-de-la-css-stylecss","text":"Une large part de la feuille de style par d\u00e9faut n\u2019est pas utile dans le cadre d\u2019un simple catalogue d\u2019image. On peut ainsi supprimer une grande part des r\u00e8gles de mise en forme : m\u00e9ta-donn\u00e9es, typographie, navigation, gabarits interview , appendices , glossaire, colonnes, images de note, notes de marge, etc. Les r\u00e8gles correspondant au gabarit autofolder peuvent d\u00e9terminer une grille responsive et pr\u00e9ciser le comportement des images et des l\u00e9gendes : .autofolder .content { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: var(--spacer); } .autofolder .figure { margin: 0; padding: 0; } .autofolder img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } .autofolder figcaption { text-align: center; font-size: .75em; text-transform: uppercase; letter-spacing: 0.15em; height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }","title":"\u00c9tape 2 : simplification de la CSS style.css"},{"location":"autofolder/#etape-3-modifications-de-screen_headphp","text":"Les appels du script screen/sidenotes.js et des scripts d\u2019 aide \u00e0 la mise en page sont supprim\u00e9s. Dans l\u2019exemple de th\u00e8me catalogue , on ajoute un appel au script ( screen/script.js ), qui intervient pour modifier al\u00e9atoirement la largeur des figures et d\u00e9structurer la grille.","title":"\u00c9tape 3 : Modifications de screen_head.php"},{"location":"autofolder/#etape-4-modifications-de-la-css-printcss","text":"D\u00e9claration du format de page et de la pagination par d\u00e9faut, ainsi que de la page de couverture et des pages vides. @page { size: 210mm 297mm; } @page:right { margin: 1cm 2cm 2.5cm 1cm; @bottom-right-corner { content: element(folioRunning); text-align: left; } } @page:left { margin: 1cm 1cm 2.5cm 2cm; @bottom-left-corner { content: element(folioRunning); text-align: left; } } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-right-corner { display: none; } }","title":"\u00c9tape 4 : Modifications de la CSS print.css"},{"location":"autofolder/#etape-5-modifications-de-print_headphp","text":"Les appels des scripts li\u00e9s aux notes iconographiques et de bas de page, au sommaire, etc. sont supprim\u00e9s. Le format ferm\u00e9 (A4) \u00e9tant d\u00e9fini en CSS, on inclue l\u2019appel du script print/imposition.js qui permet de g\u00e9n\u00e9rer l\u2019imposition des pages A4 et de modifier le format de sortie pour que deux pages puissent \u00eatre imprim\u00e9es sur la m\u00eame face. Si besoin, ce script ins\u00e8re des pages blanches pour que la pagination soit un multiple de quatre. Dans l\u2019exemple de th\u00e8me catalogue \u2013juste pour montrer que c\u2019est possible\u2026\u2013, on ajoute un appel au script print/bigfigures.js , qui intervient pour modifier la largeur et la hauteur de certaines figures, s\u00e9lectionn\u00e9es manuellement via leur id .","title":"\u00c9tape 5 : Modifications de print_head.php"},{"location":"booklet/","text":"Livret A5 Cet exemple se propose de transformer le gabarit d\u2019une simple page A4 (recto seul) vers une double page A5 (recto-verso) en supprimant l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es. Le th\u00e8me booklet comprend le code r\u00e9sultant de cette modification du th\u00e8me par d\u00e9faut. Il est possible de l\u2019activer en le configurant dans le fichier config.yml : theme: booklet Une d\u00e9mo est visible sur ateliers.esad-pyrenees.fr/pagetypetoprint/booklet \u00c9tapes js/print/pagedjs.css desactivation de la feuille de style interface/recto-verso.css body.php courants et folio: suppression du logo ESAD et du dipl\u00f4me courants et folio: r\u00e9organisation pour positionnement en bas de page uniquement suppression des notes de marge au profit de notes de bas de page : suppression des scripts js/screen/sideNotes.js et js/print/imageNotes.js css/print.css format et marges gestion des titres courants notes de marge mise en page du sommaire D\u00e9tails CSS print Format et marges: @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left { content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right { margin: 1cm 2cm 2.5cm 1cm; } @page:left { margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-left { display: none; } } Couverture, r\u00e9organisation : .meta-year { grid-column: 3; grid-row: 1; } .meta-data { grid-column: 1; grid-row: 1; } Modifications des titres courants : /* running title */ .runningtitle { display: none; position: running(titleRunning); } .folio{ font-weight: bold; text-align: right; } .folio::before{ content: counter(page); font-weight: bold; } .pagedjs_margin .runningtitle { gap:var(--spacer); padding: 1cm 0 .5cm; display: flex !important; justify-content: space-between; } .pagedjs_left_page .runningtitle { flex-direction: row-reverse; } .pagedjs_right_page .runningtitle { flex-direction: row; } .pagedjs_left_page .runningtitle .title, .pagedjs_right_page .runningtitle .name { display: none; } Modification des images de note : .imagenote { width: 33%; display: block; margin: var(--spacer) 0 0 var(--spacer); font-size: var(--smallsize); } .imagenote.printleft { float: left; margin: var(--spacer) var(--spacer) 0 0; } .imagenote.printright { float: right; margin: var(--spacer) 0 0 var(--spacer); } Pour les annexes, suppression des marges sp\u00e9cifiques, affichage du titre et suppresion du retrait dans les interviews : section.appendices { /* margin-left: -6.5cm; */ } .appendices > h2 { /* display: none; */ } section.references { /* margin-left: -6.5cm; */ } .references > h2 { /* display: none; */ } .interview > h2 { /* display: none; */ } .interview p { --indent: 0px; } Glossaire et r\u00e9f\u00e9rences bibliographiques sur deux colonnes uniquement : .glossary, .columns { font-size: 0.85em; columns: 2; column-gap: var(--spacer); } Saut de page avant le sommaire : #nav { page-break-before: right; page-break-after: right; counter-reset: page 1; height: auto; } Mise en page du sommaire : #list-toc-generated .toc-element a::before { /* position: absolute; */ /* margin-left: calc(-4em - 20px); */ display: inline-block; text-align: left; } #list-toc-generated .toc-element-level-2 a::before { /* margin-left: calc(-4em - 40px); */ }","title":"Livret"},{"location":"booklet/#livret-a5","text":"Cet exemple se propose de transformer le gabarit d\u2019une simple page A4 (recto seul) vers une double page A5 (recto-verso) en supprimant l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es. Le th\u00e8me booklet comprend le code r\u00e9sultant de cette modification du th\u00e8me par d\u00e9faut. Il est possible de l\u2019activer en le configurant dans le fichier config.yml : theme: booklet Une d\u00e9mo est visible sur ateliers.esad-pyrenees.fr/pagetypetoprint/booklet","title":"Livret A5"},{"location":"booklet/#etapes","text":"js/print/pagedjs.css desactivation de la feuille de style interface/recto-verso.css body.php courants et folio: suppression du logo ESAD et du dipl\u00f4me courants et folio: r\u00e9organisation pour positionnement en bas de page uniquement suppression des notes de marge au profit de notes de bas de page : suppression des scripts js/screen/sideNotes.js et js/print/imageNotes.js css/print.css format et marges gestion des titres courants notes de marge mise en page du sommaire","title":"\u00c9tapes"},{"location":"booklet/#details-css-print","text":"Format et marges: @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left { content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right { margin: 1cm 2cm 2.5cm 1cm; } @page:left { margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left { display: none; } } @page:blank { @bottom-left-corner { display: none; } @bottom-left { display: none; } } Couverture, r\u00e9organisation : .meta-year { grid-column: 3; grid-row: 1; } .meta-data { grid-column: 1; grid-row: 1; } Modifications des titres courants : /* running title */ .runningtitle { display: none; position: running(titleRunning); } .folio{ font-weight: bold; text-align: right; } .folio::before{ content: counter(page); font-weight: bold; } .pagedjs_margin .runningtitle { gap:var(--spacer); padding: 1cm 0 .5cm; display: flex !important; justify-content: space-between; } .pagedjs_left_page .runningtitle { flex-direction: row-reverse; } .pagedjs_right_page .runningtitle { flex-direction: row; } .pagedjs_left_page .runningtitle .title, .pagedjs_right_page .runningtitle .name { display: none; } Modification des images de note : .imagenote { width: 33%; display: block; margin: var(--spacer) 0 0 var(--spacer); font-size: var(--smallsize); } .imagenote.printleft { float: left; margin: var(--spacer) var(--spacer) 0 0; } .imagenote.printright { float: right; margin: var(--spacer) 0 0 var(--spacer); } Pour les annexes, suppression des marges sp\u00e9cifiques, affichage du titre et suppresion du retrait dans les interviews : section.appendices { /* margin-left: -6.5cm; */ } .appendices > h2 { /* display: none; */ } section.references { /* margin-left: -6.5cm; */ } .references > h2 { /* display: none; */ } .interview > h2 { /* display: none; */ } .interview p { --indent: 0px; } Glossaire et r\u00e9f\u00e9rences bibliographiques sur deux colonnes uniquement : .glossary, .columns { font-size: 0.85em; columns: 2; column-gap: var(--spacer); } Saut de page avant le sommaire : #nav { page-break-before: right; page-break-after: right; counter-reset: page 1; height: auto; } Mise en page du sommaire : #list-toc-generated .toc-element a::before { /* position: absolute; */ /* margin-left: calc(-4em - 20px); */ display: inline-block; text-align: left; } #list-toc-generated .toc-element-level-2 a::before { /* margin-left: calc(-4em - 40px); */ }","title":"D\u00e9tails CSS print"},{"location":"contenu/","text":"Configuration Le fichier config.yml doit \u00eatre \u00e9dit\u00e9 afin d\u2019y r\u00e9f\u00e9rencer les diff\u00e9rentes parties du document, saisir son titre, votre ann\u00e9e, nom et dipl\u00f4me. Le th\u00e8me Les logiques d\u2019affichage screen et print sont d\u00e9pendantes du th\u00e8me s\u00e9lectionn\u00e9 dans le fichier config.yml : theme: esadpyrenees Le contenu Le contenu du document est organis\u00e9 sous la forme d\u2019une s\u00e9rie de documents au format markdown , correspondant \u00e0 chacune des sections du document. Ces diff\u00e9rentes sections sont d\u00e9clar\u00e9es dans le fichier config.yml : parts: - title: Introduction # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: content/text/1.intro.md # \u2191 le fichier markdown du contenu (texte de la section) template: default # \u2191 le gabarit de mise en page \u00e0 utiliser - title: Titre 2 file: content/text/2.deuxieme-partie.md template: default \u2026 Le title sert \u00e0 d\u00e9terminer l\u2019 id de la section et \u00e0 g\u00e9n\u00e9rer le sommaire. Les fichiers markdown (\u00e0 l\u2019extension .md ) peuvent \u00eatre num\u00e9rot\u00e9s pour une meilleure organisation ; ils sont plac\u00e9s par convention dans le dossier \u201ccontent/text\u201d mais peuvent \u00eatre stock\u00e9s ailleurs. \u00c0 chaque partie peut \u00eatre affect\u00e9 un gabarit ( template ), qui permet de d\u00e9finir sa mise en forme (\u00e0 la fois \u00e9cran et print).","title":"Configuration et contenu"},{"location":"contenu/#configuration","text":"Le fichier config.yml doit \u00eatre \u00e9dit\u00e9 afin d\u2019y r\u00e9f\u00e9rencer les diff\u00e9rentes parties du document, saisir son titre, votre ann\u00e9e, nom et dipl\u00f4me.","title":"Configuration"},{"location":"contenu/#le-theme","text":"Les logiques d\u2019affichage screen et print sont d\u00e9pendantes du th\u00e8me s\u00e9lectionn\u00e9 dans le fichier config.yml : theme: esadpyrenees","title":"Le th\u00e8me"},{"location":"contenu/#le-contenu","text":"Le contenu du document est organis\u00e9 sous la forme d\u2019une s\u00e9rie de documents au format markdown , correspondant \u00e0 chacune des sections du document. Ces diff\u00e9rentes sections sont d\u00e9clar\u00e9es dans le fichier config.yml : parts: - title: Introduction # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: content/text/1.intro.md # \u2191 le fichier markdown du contenu (texte de la section) template: default # \u2191 le gabarit de mise en page \u00e0 utiliser - title: Titre 2 file: content/text/2.deuxieme-partie.md template: default \u2026 Le title sert \u00e0 d\u00e9terminer l\u2019 id de la section et \u00e0 g\u00e9n\u00e9rer le sommaire. Les fichiers markdown (\u00e0 l\u2019extension .md ) peuvent \u00eatre num\u00e9rot\u00e9s pour une meilleure organisation ; ils sont plac\u00e9s par convention dans le dossier \u201ccontent/text\u201d mais peuvent \u00eatre stock\u00e9s ailleurs. \u00c0 chaque partie peut \u00eatre affect\u00e9 un gabarit ( template ), qui permet de d\u00e9finir sa mise en forme (\u00e0 la fois \u00e9cran et print).","title":"Le contenu"},{"location":"credits/","text":"Cr\u00e9dits PageTypeToPrint est d\u00e9velopp\u00e9 par Julien Bidoret pour la mise en page normalis\u00e9e des m\u00e9moires et documents \u00e9crits de l\u2019option Design graphique multim\u00e9dia de l\u2019 \u00c9SAD Pyr\u00e9n\u00e9es . La maquette originale a \u00e9t\u00e9 d\u00e9velopp\u00e9e par Perrine Saint Martin . L\u2019outil s\u2019appuie sur plusieurs librairies : MarkdownIt et MarkdownIt-php , pour la transformation du contenu markdown en HTML. \u00a9 Vitaly Puzrin, Alex Kocharin. JoliTypo pour la correction microtypographique, \u00a9 Damien Alexandre . Paged.js pour l\u2019impression et la g\u00e9n\u00e9ration de PDF \u00a9 Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet + Nicolas Taffin ! Un script d\u2019 0gust1 pour transformer les notes de bas de page markdown en notes de marge. Le caract\u00e8re typographique est \u00c9cole, variation du Inter , d\u00e9velopp\u00e9e par WA75 pour l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es.","title":"Credits"},{"location":"credits/#credits","text":"PageTypeToPrint est d\u00e9velopp\u00e9 par Julien Bidoret pour la mise en page normalis\u00e9e des m\u00e9moires et documents \u00e9crits de l\u2019option Design graphique multim\u00e9dia de l\u2019 \u00c9SAD Pyr\u00e9n\u00e9es . La maquette originale a \u00e9t\u00e9 d\u00e9velopp\u00e9e par Perrine Saint Martin . L\u2019outil s\u2019appuie sur plusieurs librairies : MarkdownIt et MarkdownIt-php , pour la transformation du contenu markdown en HTML. \u00a9 Vitaly Puzrin, Alex Kocharin. JoliTypo pour la correction microtypographique, \u00a9 Damien Alexandre . Paged.js pour l\u2019impression et la g\u00e9n\u00e9ration de PDF \u00a9 Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet + Nicolas Taffin ! Un script d\u2019 0gust1 pour transformer les notes de bas de page markdown en notes de marge. Le caract\u00e8re typographique est \u00c9cole, variation du Inter , d\u00e9velopp\u00e9e par WA75 pour l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es.","title":"Cr\u00e9dits"},{"location":"entretiens/","text":"Entretiens Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les retranscriptions d\u2019entretiens. Un gabarit sp\u00e9cifique ( interview ) est pr\u00e9vu pour d\u00e9clarer l\u2019entretien dans les sections du fichier config.yml : - title: Entretien file: content/text/6.entretien-avec-PI.md template: interview Le contenu textuel de l\u2019entretien peut \u00eatre structur\u00e9 ainsi dans le fichier markdown : **Votre nom** **Votre question** **Nom de la personne interview\u00b7\u00e9e** Sa r\u00e9ponse **VN** **Votre 2e question (VN sont vos initiales)** **PI** Sa 2e r\u00e9ponse (PI sont ses initiales)","title":"Entretiens"},{"location":"entretiens/#entretiens","text":"Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les retranscriptions d\u2019entretiens. Un gabarit sp\u00e9cifique ( interview ) est pr\u00e9vu pour d\u00e9clarer l\u2019entretien dans les sections du fichier config.yml : - title: Entretien file: content/text/6.entretien-avec-PI.md template: interview Le contenu textuel de l\u2019entretien peut \u00eatre structur\u00e9 ainsi dans le fichier markdown : **Votre nom** **Votre question** **Nom de la personne interview\u00b7\u00e9e** Sa r\u00e9ponse **VN** **Votre 2e question (VN sont vos initiales)** **PI** Sa 2e r\u00e9ponse (PI sont ses initiales)","title":"Entretiens"},{"location":"extend/","text":"Extension PageTypeToPrint propose une exp\u00e9rience de publication et de mise en page web + print qui ne n\u00e9cessite pas d\u2019\u00e9crire de code (ni PHP, ni JavaScript, ni HTML ou CSS). L\u2019outil est n\u00e9anmoins con\u00e7u pour \u00eatre modifi\u00e9, augment\u00e9 ou d\u00e9tourn\u00e9 ; et servir de base \u00e0 une appropriation progressive des logiques web to print . Premiers pas dans l\u2019extension de PageTypeToPrint Faire un livret A5 recto-verso Utiliser un pad public pour engager une \u00e9criture collaborative Automatiser l\u2019importation d\u2019un dossier d\u2019images Parcourir les usages avanc\u00e9s des notes de bas de page / de c\u00f4t\u00e9","title":"Extensions"},{"location":"extend/#extension","text":"PageTypeToPrint propose une exp\u00e9rience de publication et de mise en page web + print qui ne n\u00e9cessite pas d\u2019\u00e9crire de code (ni PHP, ni JavaScript, ni HTML ou CSS). L\u2019outil est n\u00e9anmoins con\u00e7u pour \u00eatre modifi\u00e9, augment\u00e9 ou d\u00e9tourn\u00e9 ; et servir de base \u00e0 une appropriation progressive des logiques web to print . Premiers pas dans l\u2019extension de PageTypeToPrint Faire un livret A5 recto-verso Utiliser un pad public pour engager une \u00e9criture collaborative Automatiser l\u2019importation d\u2019un dossier d\u2019images Parcourir les usages avanc\u00e9s des notes de bas de page / de c\u00f4t\u00e9","title":"Extension"},{"location":"extendcss/","text":"Modifications rapides Changer le caract\u00e8re typographique Modifier le fichier css/style.css du th\u00e8me pour d\u00e9clarer le (ou les) nouveau(x) catact\u00e8re(s), et modifier la valeur de --fontfamily dans les propri\u00e9t\u00e9s personnalis\u00e9es. @font-face { font-family: \"Superserif\"; src: url(\"fonts/superserif.woff2\") format(\"woff2\"); font-weight: normal; font-style: normal; } :root { /* typographie */ --fontfamily: \"Superserif\", serif; \u2026 } Supprimer l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es Pour la couverture, supprimer l\u2019arri\u00e8re-plan du header dans le fichier css/print.css : #header { /*background: url(logo.svg) no-repeat 0 100%;*/ } Pour les titre courants, supprimer l\u2019image dans le fichier body.php : <!-- le folio courant (version print) --> <div class=\"runningfolio\"> <span class=\"folio\"></span> <!-- <img src=\"css/logo.png\" alt=\"ESAD Pyr\u00e9n\u00e9es\"> --> </div> Modifier le format Format et marges @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left{ content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right{ margin: 1cm 2cm 2.5cm 1cm; } @page:left{ margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left{ display: none; } } @page:blank{ @bottom-left-corner { display: none; } @bottom-left{ display: none; } }","title":"Premiers pas"},{"location":"extendcss/#modifications-rapides","text":"","title":"Modifications rapides"},{"location":"extendcss/#changer-le-caractere-typographique","text":"Modifier le fichier css/style.css du th\u00e8me pour d\u00e9clarer le (ou les) nouveau(x) catact\u00e8re(s), et modifier la valeur de --fontfamily dans les propri\u00e9t\u00e9s personnalis\u00e9es. @font-face { font-family: \"Superserif\"; src: url(\"fonts/superserif.woff2\") format(\"woff2\"); font-weight: normal; font-style: normal; } :root { /* typographie */ --fontfamily: \"Superserif\", serif; \u2026 }","title":"Changer le caract\u00e8re typographique"},{"location":"extendcss/#supprimer-lidentite-de-lesad-pyrenees","text":"Pour la couverture, supprimer l\u2019arri\u00e8re-plan du header dans le fichier css/print.css : #header { /*background: url(logo.svg) no-repeat 0 100%;*/ } Pour les titre courants, supprimer l\u2019image dans le fichier body.php : <!-- le folio courant (version print) --> <div class=\"runningfolio\"> <span class=\"folio\"></span> <!-- <img src=\"css/logo.png\" alt=\"ESAD Pyr\u00e9n\u00e9es\"> --> </div>","title":"Supprimer l\u2019identit\u00e9 de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es"},{"location":"extendcss/#modifier-le-format","text":"Format et marges @page { size: 148mm 210mm; @bottom-left-corner { content: element(folioRunning); text-align: left; } @bottom-left{ content: element(titleRunning); text-align: left; } @footnote { float: bottom; } } @page:right{ margin: 1cm 2cm 2.5cm 1cm; } @page:left{ margin: 1cm 1cm 2.5cm 2cm; } @page cover { margin: 1cm 1cm 2.5cm 1cm; @bottom-left-corner { display: none; } @bottom-left{ display: none; } } @page:blank{ @bottom-left-corner { display: none; } @bottom-left{ display: none; } }","title":"Modifier le format"},{"location":"gabarits/","text":"Templates Les diff\u00e9rents gabarits, ou templates , sont: default : le gabarit de base. appendices : le gabarit pour les annexes g\u00e9n\u00e9rales et l\u2019iconographie. interview : le gabarit pour les entretiens. references : le gabarit pour les r\u00e9f\u00e9rences, bibliographie, sitographie, etc. autofolder : un gabarit tr\u00e8s similaire \u00e0 appendices pour automatiser l\u2019inclusion d\u2019un dossier d\u2019images Les logiques de templates peuvent \u00eatre \u00e9tendues pour prendre en charge d\u2019autres logiques de mise en page. \u00c9tendre ou modifier l\u2019outil La structure HTML englobante de chaque gabarit est d\u00e9finie dans le fichier _inc/PageTypeToPrint.php . On peut souhaiter la modifier pour g\u00e9n\u00e9rer un balisage sp\u00e9cifique \u00e0 un nouveau type de page ou pour modifier la gestion des titres courants. Les styles sp\u00e9cifiques associ\u00e9s \u00e0 chaque gabarit de page sont g\u00e9r\u00e9s dans les deux fichiers css/style.ccss et css/print.ccss pr\u00e9sents dans le th\u00e8me, dans des sections ais\u00e9ment rep\u00e9rables gr\u00e2ce aux commentaires.","title":"Gabarits"},{"location":"gabarits/#templates","text":"Les diff\u00e9rents gabarits, ou templates , sont: default : le gabarit de base. appendices : le gabarit pour les annexes g\u00e9n\u00e9rales et l\u2019iconographie. interview : le gabarit pour les entretiens. references : le gabarit pour les r\u00e9f\u00e9rences, bibliographie, sitographie, etc. autofolder : un gabarit tr\u00e8s similaire \u00e0 appendices pour automatiser l\u2019inclusion d\u2019un dossier d\u2019images Les logiques de templates peuvent \u00eatre \u00e9tendues pour prendre en charge d\u2019autres logiques de mise en page.","title":"Templates"},{"location":"gabarits/#etendre-ou-modifier-loutil","text":"La structure HTML englobante de chaque gabarit est d\u00e9finie dans le fichier _inc/PageTypeToPrint.php . On peut souhaiter la modifier pour g\u00e9n\u00e9rer un balisage sp\u00e9cifique \u00e0 un nouveau type de page ou pour modifier la gestion des titres courants. Les styles sp\u00e9cifiques associ\u00e9s \u00e0 chaque gabarit de page sont g\u00e9r\u00e9s dans les deux fichiers css/style.ccss et css/print.ccss pr\u00e9sents dans le th\u00e8me, dans des sections ais\u00e9ment rep\u00e9rables gr\u00e2ce aux commentaires.","title":"\u00c9tendre ou modifier l\u2019outil"},{"location":"glossaire/","text":"Glossaire Un glossaire n\u2019est souhaitable que si de nombreux termes sp\u00e9cifiques au document n\u00e9cessitent d\u2019\u00eatre explicit\u00e9s. Le glossaire ob\u00e9it \u00e0 une logique de structuration singuli\u00e8re. Il est englob\u00e9 dans un \u00e9l\u00e9ment personnalis\u00e9 ( \u00b6\u00b6\u00b6 glossary ), et chaque terme est \u00e9galement englob\u00e9 dans un \u00e9l\u00e9ment ::: term : \u00b6\u00b6\u00b6 glossary ::: term Premier terme : D\u00e9finition du premier terme ::: ::: term Second terme : D\u00e9finition du second terme ::: \u00b6\u00b6\u00b6","title":"Glossaire"},{"location":"glossaire/#glossaire","text":"Un glossaire n\u2019est souhaitable que si de nombreux termes sp\u00e9cifiques au document n\u00e9cessitent d\u2019\u00eatre explicit\u00e9s. Le glossaire ob\u00e9it \u00e0 une logique de structuration singuli\u00e8re. Il est englob\u00e9 dans un \u00e9l\u00e9ment personnalis\u00e9 ( \u00b6\u00b6\u00b6 glossary ), et chaque terme est \u00e9galement englob\u00e9 dans un \u00e9l\u00e9ment ::: term : \u00b6\u00b6\u00b6 glossary ::: term Premier terme : D\u00e9finition du premier terme ::: ::: term Second terme : D\u00e9finition du second terme ::: \u00b6\u00b6\u00b6","title":"Glossaire"},{"location":"images/","text":"Images & vid\u00e9os Des images et vid\u00e9os l\u00e9gend\u00e9es peuvent \u00eatre ins\u00e9r\u00e9es gr\u00e2ce \u00e0 des \u00ab shortcodes \u00bb sp\u00e9cifiques. Images Les images peuvent \u00eatre int\u00e9gr\u00e9es au fil du texte sous forme de note de c\u00f4t\u00e9 : (imagenote: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) Mais \u00e9galement sous forme de blocs : (figure: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) On peut ajouter des class aux images : (figure: url/de_limage.jpg class: maclass monautreclass) Pour distinguer les images \u00e0 l\u2019arri\u00e8re-plan blanc de celui de la page, une class d\u00e9di\u00e9e ( notwhite ) est disponible : (figure: url/de_limage.jpg class: notwhite) Pour aligner les images de note \u00e0 gauche ou \u00e0 droite (en contexte d\u2019impression) utiliser les class suivantes : printleft printright : (imagenote: url/de_limage.jpg class: printleft) Pour des images sous forme de blocs qui demandent une grande largeur d\u2019affichage, on peut utiliser la class: full : (imagenote: url/de_limage.jpg class: full) Vid\u00e9os Pour int\u00e9grer une vid\u00e9o Youtube ou Vimeo, utiliser le shortcode video et l\u2019URL de la page : (video: https://www.youtube.com/watch?v=yfskVxCn_qo class: maclass caption: La l\u00e9gende de la vid\u00e9o) (video: https://vimeo.com/708803521 class: maclass caption: La l\u00e9gende de la vid\u00e9o) Pour la version imprimable, il est souhaitable de d\u00e9terminer quelle image sera imprim\u00e9e, gr\u00e2ce \u00e0 l\u2019attribut poster : (video: https://www.youtube.com/watch?v=yfskVxCn_qo poster: images/videocover.jpg) En version print, l\u2019URL de la vid\u00e9o est affich\u00e9e sous sa l\u00e9gende.","title":"Images et vid\u00e9os"},{"location":"images/#images-videos","text":"Des images et vid\u00e9os l\u00e9gend\u00e9es peuvent \u00eatre ins\u00e9r\u00e9es gr\u00e2ce \u00e0 des \u00ab shortcodes \u00bb sp\u00e9cifiques.","title":"Images &amp; vid\u00e9os"},{"location":"images/#images","text":"Les images peuvent \u00eatre int\u00e9gr\u00e9es au fil du texte sous forme de note de c\u00f4t\u00e9 : (imagenote: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) Mais \u00e9galement sous forme de blocs : (figure: url/de_limage.jpg caption: La l\u00e9gende de l\u2019image) On peut ajouter des class aux images : (figure: url/de_limage.jpg class: maclass monautreclass) Pour distinguer les images \u00e0 l\u2019arri\u00e8re-plan blanc de celui de la page, une class d\u00e9di\u00e9e ( notwhite ) est disponible : (figure: url/de_limage.jpg class: notwhite) Pour aligner les images de note \u00e0 gauche ou \u00e0 droite (en contexte d\u2019impression) utiliser les class suivantes : printleft printright : (imagenote: url/de_limage.jpg class: printleft) Pour des images sous forme de blocs qui demandent une grande largeur d\u2019affichage, on peut utiliser la class: full : (imagenote: url/de_limage.jpg class: full)","title":"Images"},{"location":"images/#videos","text":"Pour int\u00e9grer une vid\u00e9o Youtube ou Vimeo, utiliser le shortcode video et l\u2019URL de la page : (video: https://www.youtube.com/watch?v=yfskVxCn_qo class: maclass caption: La l\u00e9gende de la vid\u00e9o) (video: https://vimeo.com/708803521 class: maclass caption: La l\u00e9gende de la vid\u00e9o) Pour la version imprimable, il est souhaitable de d\u00e9terminer quelle image sera imprim\u00e9e, gr\u00e2ce \u00e0 l\u2019attribut poster : (video: https://www.youtube.com/watch?v=yfskVxCn_qo poster: images/videocover.jpg) En version print, l\u2019URL de la vid\u00e9o est affich\u00e9e sous sa l\u00e9gende.","title":"Vid\u00e9os"},{"location":"installation/","text":"Installation T\u00e9l\u00e9chargez le projet : \u2193 Code source Le fichier doit \u00eatre d\u00e9compress\u00e9 dans un environnement de serveur web b\u00e9n\u00e9ficiant d\u2019une version de PHP sup\u00e9rieure \u00e0 8.0 (par exemple, le dossier htdocs dans MAMP ; voir ci-dessous). Si vous pouvez d\u00e9marrer un serveur web local avec PHP 8, passez \u00e0 : \u2192 Configuration et contenu Sinon, poursuivez ci-dessous\u2026 En d\u00e9tails PageTypeToPrint utilise PHP, un langage web qui s\u2019ex\u00e9cute du c\u00f4t\u00e9 du serveur, disponible chez l\u2019immense majorit\u00e9 des h\u00e9bergeurs web. Sur un ordinateur \u201cdomestique\u201c, on peut installer un logiciel qui int\u00e8gre les diff\u00e9rents fonctionnalit\u00e9s d\u2019un serveur web. On parle alors de serveur local ou de serveur de d\u00e9veloppement . Les outils les plus simples \u00e0 utiliser sont MAMP , utilisable sur Mac OS et sur Windows et XAMPP , multiplateforme (\u00e0 utiliser si MAMP ne fonctionne pas sur votre ordinateur). AMP ? L\u2019accronyme AMP signifie Apache + MySQL + PHP. Apache est un serveur web : le serveur HTTP r\u00e9pond aux requ\u00eates et transmet les pages Web au navigateur. MySQL est un serveur de base de donn\u00e9es, inutile dans ce contexte. PHP est un langage de script : il va permettre d\u2019effectuer des op\u00e9rations sur le seveur et fabriquer des pages HTML. MAMP ou Xampp? MAMP est l\u2019outil le plus simple. Il s\u2019installe comme une application habituelle (double-clicker sur l\u2019installeur puis suivre les \u00e9tapes), avec comme sp\u00e9cificit\u00e9 sur Windows de pr\u00e9f\u00e9rer \u00eatre install\u00e9 \u00e0 la racine du disque dur, dans un dossier C:\\\\MAMP ou C:\\\\Xampp . Xampp n\u2019est gu\u00e8re plus compliqu\u00e9 \u00e0 installer mais offre une interface moins simple. Attention \u00e0 ne pas installer MAMP Pro (inutile dans ce contexte, et payant). L\u2019installation g\u00e9n\u00e8re un sous-dossier nomm\u00e9 htdocs qui est destin\u00e9 \u00e0 stocker vos sites web locaux. Sur OSX et MAMP, ce dossier est situ\u00e9 dans Applications/MAMP/htdocs , sur Windows dans C:\\\\MAMP\\htdocs ou C:\\\\Xampp\\htdocs . Cet emplacement est configurable dans les pr\u00e9f\u00e9rences de MAMP ou Xampp. C\u2019est dans ce dossier qu\u2019il convient de d\u00e9compresser le code de PageTypeToPrint, afin de pouvoir le visualiser dans un navigateur web. D\u00e9marrer Une fois l\u2019application de serveur install\u00e9e, il faut la d\u00e9marrer : \u201cD\u00e9marrer les serveurs\u201d avec MAMP ou \u201cApache > Start\u201d avec Xampp. Le site devient alors accessible \u00e0 l\u2019adresse http://localhost/PageTypeToPrint ou http://localhost:8888/PageTypeToPrint si le port d\u2019Apache est configur\u00e9 sur 8888 (c\u2019est parfois le cas par d\u00e9faut). Version de PHP Si rien ne s\u2019affiche (ou seulement le sommaire du document), la version de PHP est vraisemblablement inf\u00e9rieure \u00e0 8.0. MAMP et XAMPP permettent de configurer cette version dans leur param\u00e8tres.","title":"Installation"},{"location":"installation/#installation","text":"T\u00e9l\u00e9chargez le projet : \u2193 Code source Le fichier doit \u00eatre d\u00e9compress\u00e9 dans un environnement de serveur web b\u00e9n\u00e9ficiant d\u2019une version de PHP sup\u00e9rieure \u00e0 8.0 (par exemple, le dossier htdocs dans MAMP ; voir ci-dessous). Si vous pouvez d\u00e9marrer un serveur web local avec PHP 8, passez \u00e0 : \u2192 Configuration et contenu Sinon, poursuivez ci-dessous\u2026","title":"Installation"},{"location":"installation/#en-details","text":"PageTypeToPrint utilise PHP, un langage web qui s\u2019ex\u00e9cute du c\u00f4t\u00e9 du serveur, disponible chez l\u2019immense majorit\u00e9 des h\u00e9bergeurs web. Sur un ordinateur \u201cdomestique\u201c, on peut installer un logiciel qui int\u00e8gre les diff\u00e9rents fonctionnalit\u00e9s d\u2019un serveur web. On parle alors de serveur local ou de serveur de d\u00e9veloppement . Les outils les plus simples \u00e0 utiliser sont MAMP , utilisable sur Mac OS et sur Windows et XAMPP , multiplateforme (\u00e0 utiliser si MAMP ne fonctionne pas sur votre ordinateur).","title":"En d\u00e9tails"},{"location":"installation/#amp","text":"L\u2019accronyme AMP signifie Apache + MySQL + PHP. Apache est un serveur web : le serveur HTTP r\u00e9pond aux requ\u00eates et transmet les pages Web au navigateur. MySQL est un serveur de base de donn\u00e9es, inutile dans ce contexte. PHP est un langage de script : il va permettre d\u2019effectuer des op\u00e9rations sur le seveur et fabriquer des pages HTML.","title":"AMP ?"},{"location":"installation/#mamp-ou-xampp","text":"MAMP est l\u2019outil le plus simple. Il s\u2019installe comme une application habituelle (double-clicker sur l\u2019installeur puis suivre les \u00e9tapes), avec comme sp\u00e9cificit\u00e9 sur Windows de pr\u00e9f\u00e9rer \u00eatre install\u00e9 \u00e0 la racine du disque dur, dans un dossier C:\\\\MAMP ou C:\\\\Xampp . Xampp n\u2019est gu\u00e8re plus compliqu\u00e9 \u00e0 installer mais offre une interface moins simple. Attention \u00e0 ne pas installer MAMP Pro (inutile dans ce contexte, et payant). L\u2019installation g\u00e9n\u00e8re un sous-dossier nomm\u00e9 htdocs qui est destin\u00e9 \u00e0 stocker vos sites web locaux. Sur OSX et MAMP, ce dossier est situ\u00e9 dans Applications/MAMP/htdocs , sur Windows dans C:\\\\MAMP\\htdocs ou C:\\\\Xampp\\htdocs . Cet emplacement est configurable dans les pr\u00e9f\u00e9rences de MAMP ou Xampp. C\u2019est dans ce dossier qu\u2019il convient de d\u00e9compresser le code de PageTypeToPrint, afin de pouvoir le visualiser dans un navigateur web.","title":"MAMP ou Xampp?"},{"location":"installation/#demarrer","text":"Une fois l\u2019application de serveur install\u00e9e, il faut la d\u00e9marrer : \u201cD\u00e9marrer les serveurs\u201d avec MAMP ou \u201cApache > Start\u201d avec Xampp. Le site devient alors accessible \u00e0 l\u2019adresse http://localhost/PageTypeToPrint ou http://localhost:8888/PageTypeToPrint si le port d\u2019Apache est configur\u00e9 sur 8888 (c\u2019est parfois le cas par d\u00e9faut).","title":"D\u00e9marrer"},{"location":"installation/#version-de-php","text":"Si rien ne s\u2019affiche (ou seulement le sommaire du document), la version de PHP est vraisemblablement inf\u00e9rieure \u00e0 8.0. MAMP et XAMPP permettent de configurer cette version dans leur param\u00e8tres.","title":"Version de PHP"},{"location":"markdown/","text":"Markdown Le contenu textuel du document est saisi dans le langage de balisage l\u00e9ger markdown , tr\u00e8s largement utilis\u00e9 et document\u00e9 partout sur le web. On trouvera ci-dessous une br\u00e8ve documentation sur l\u2019usage de markdown , sinon poursuivre vers la version imprimable / pdf . Syntaxe \u00c9lement Syntaxe Markdown Titres # H1 ## H2 ### H3 Gras **texte en gras** Italique _texte en italique_ Citation > blockquote Liste ordonn\u00e9e 1. Premier item 2. Deuxi\u00e8me item 3. Troisi\u00e8me item Liste non-ordonn\u00e9e - Premier item - Deuxi\u00e8me item - Troisi\u00e8me item Code `code` Filet horizontal --- Lien [titre](https://www.example.com) Image ![alternative textuelle](image.jpg) \u26a0\ufe0f cf. Images Note de bas de page Cici est une phrase avec une note de bas de page. [^1] [^1]: Ceci est la note. \u26a0\ufe0f cf. Notes ID de titre ### Mon titre avec id {#custom-id} Liste de d\u00e9finition terme : d\u00e9finition Barr\u00e9 ~~La terre est plate.~~ Indice H~2~O Exposant X^2^ Surlign\u00e9 Je veux souligner ces ==mots tr\u00e8s importants== Paragraphes et sauts de ligne Pour cr\u00e9er un paragraphe, laisser une ligne blanche entre deux lignes de texte : Un premier paragraphe. Un deuxi\u00e8me paragraphe. Pour forcer un saut de ligne, saisir deux espaces en fin de ligne : Un premier vers. Un deuxi\u00e8me vers. Styles de texte Vous pouvez utiliser _ ou * autour d'un mot pour le mettre en italique (deux pour le mettre en gras). _italique_ s'affiche ainsi : italique **gras** s'affiche ainsi : gras **_gras-italique_** s'affiche ainsi : gras-italique ~~barr\u00e9~~ s'affiche ainsi : barr\u00e9 ==surlign\u00e9== s'affiche ainsi : surlign\u00e9 Liens On peut cr\u00e9er un lien en mettant le texte cliquable entre crochets et l\u2019URL associ\u00e9e entre parenth\u00e8ses : Un [lien](https://esad-pyrenees.fr) s\u2019affiche ainsi : Un lien Images Pour ins\u00e9rer une image, on peut utiliser la syntaxe Markdow native : ![Texte alternatif](url/de_limage.jpg) \u26a0\ufe0f La syntaxe sp\u00e9cifique (non markdown) (figure: fichier.jpg) est plus appropri\u00e9e \u00e0 la structuration des documents et m\u00e9moires (notamment du fait de la possibilit\u00e9 de l\u00e9gendes). Voir Composition : images et vid\u00e9os . Citations Des citations peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce au signe > : > Le texte de la citation ! Titres Les titres et intertitres peuvent \u00eatre cr\u00e9es gr\u00e2ce \u00e0 # r\u00e9p\u00e9t\u00e9 une ou plusieurs fois en d\u00e9but de ligne : # Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 Dans le contexte de ces documents, on \u00e9vitera le niveau de titre 1, r\u00e9serv\u00e9 au titre du document. Listes Des listes ordonn\u00e9es et non-ordonn\u00e9es peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce \u00e0 la syntaxe suivante : 1. \u00e9l\u00e9ment 2. \u00e9l\u00e9ment 3. \u00e9l\u00e9ment Ou * \u00e9l\u00e9ment * \u00e9l\u00e9ment * \u00e9l\u00e9ment Aller plus loin Lire la documentation sur markdownguide.org et MarkdownIt (cette librairie ajoute des \u00e9l\u00e9ments utiles : abbr\u00e9viations, notes de bas de page, listes de d\u00e9finition, tableaux, attributs class et id pour les \u00e9l\u00e9ments\u2026).","title":"Contenu au format markdown"},{"location":"markdown/#markdown","text":"Le contenu textuel du document est saisi dans le langage de balisage l\u00e9ger markdown , tr\u00e8s largement utilis\u00e9 et document\u00e9 partout sur le web. On trouvera ci-dessous une br\u00e8ve documentation sur l\u2019usage de markdown , sinon poursuivre vers la version imprimable / pdf .","title":"Markdown"},{"location":"markdown/#syntaxe","text":"\u00c9lement Syntaxe Markdown Titres # H1 ## H2 ### H3 Gras **texte en gras** Italique _texte en italique_ Citation > blockquote Liste ordonn\u00e9e 1. Premier item 2. Deuxi\u00e8me item 3. Troisi\u00e8me item Liste non-ordonn\u00e9e - Premier item - Deuxi\u00e8me item - Troisi\u00e8me item Code `code` Filet horizontal --- Lien [titre](https://www.example.com) Image ![alternative textuelle](image.jpg) \u26a0\ufe0f cf. Images Note de bas de page Cici est une phrase avec une note de bas de page. [^1] [^1]: Ceci est la note. \u26a0\ufe0f cf. Notes ID de titre ### Mon titre avec id {#custom-id} Liste de d\u00e9finition terme : d\u00e9finition Barr\u00e9 ~~La terre est plate.~~ Indice H~2~O Exposant X^2^ Surlign\u00e9 Je veux souligner ces ==mots tr\u00e8s importants==","title":"Syntaxe"},{"location":"markdown/#paragraphes-et-sauts-de-ligne","text":"Pour cr\u00e9er un paragraphe, laisser une ligne blanche entre deux lignes de texte : Un premier paragraphe. Un deuxi\u00e8me paragraphe. Pour forcer un saut de ligne, saisir deux espaces en fin de ligne : Un premier vers. Un deuxi\u00e8me vers.","title":"Paragraphes et sauts de ligne"},{"location":"markdown/#styles-de-texte","text":"Vous pouvez utiliser _ ou * autour d'un mot pour le mettre en italique (deux pour le mettre en gras). _italique_ s'affiche ainsi : italique **gras** s'affiche ainsi : gras **_gras-italique_** s'affiche ainsi : gras-italique ~~barr\u00e9~~ s'affiche ainsi : barr\u00e9 ==surlign\u00e9== s'affiche ainsi : surlign\u00e9","title":"Styles de texte"},{"location":"markdown/#liens","text":"On peut cr\u00e9er un lien en mettant le texte cliquable entre crochets et l\u2019URL associ\u00e9e entre parenth\u00e8ses : Un [lien](https://esad-pyrenees.fr) s\u2019affiche ainsi : Un lien","title":"Liens"},{"location":"markdown/#images","text":"Pour ins\u00e9rer une image, on peut utiliser la syntaxe Markdow native : ![Texte alternatif](url/de_limage.jpg) \u26a0\ufe0f La syntaxe sp\u00e9cifique (non markdown) (figure: fichier.jpg) est plus appropri\u00e9e \u00e0 la structuration des documents et m\u00e9moires (notamment du fait de la possibilit\u00e9 de l\u00e9gendes). Voir Composition : images et vid\u00e9os .","title":"Images"},{"location":"markdown/#citations","text":"Des citations peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce au signe > : > Le texte de la citation !","title":"Citations"},{"location":"markdown/#titres","text":"Les titres et intertitres peuvent \u00eatre cr\u00e9es gr\u00e2ce \u00e0 # r\u00e9p\u00e9t\u00e9 une ou plusieurs fois en d\u00e9but de ligne : # Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 Dans le contexte de ces documents, on \u00e9vitera le niveau de titre 1, r\u00e9serv\u00e9 au titre du document.","title":"Titres"},{"location":"markdown/#listes","text":"Des listes ordonn\u00e9es et non-ordonn\u00e9es peuvent \u00eatre cr\u00e9\u00e9es gr\u00e2ce \u00e0 la syntaxe suivante : 1. \u00e9l\u00e9ment 2. \u00e9l\u00e9ment 3. \u00e9l\u00e9ment Ou * \u00e9l\u00e9ment * \u00e9l\u00e9ment * \u00e9l\u00e9ment","title":"Listes"},{"location":"markdown/#aller-plus-loin","text":"Lire la documentation sur markdownguide.org et MarkdownIt (cette librairie ajoute des \u00e9l\u00e9ments utiles : abbr\u00e9viations, notes de bas de page, listes de d\u00e9finition, tableaux, attributs class et id pour les \u00e9l\u00e9ments\u2026).","title":"Aller plus loin"},{"location":"notes/","text":"Notes Pour cr\u00e9er une note, ins\u00e9rer [^identifiant_de_la_note] au fil du texte, puis, ailleurs dans le m\u00eame document, cr\u00e9er un paragraphe contentant : [^identifiant_de_la_note]: Contenu de la note mise en forme. Il est prf\u00e9rable de ne pas identifier les notes via des identifiants num\u00e9riques (1, 2, 3\u2026) afin de laisser la num\u00e9rotation automatique \u00e0 la charge de l\u2019outil. Appels de notes et citations Dans le texte, un appel de note pr\u00e9c\u00e8de toujours le signe de ponctuation. Il se placera donc toujours avant le point final d\u2019une phrase. En fin de citation, il se place avant le guillemet fermant. On le saisit sans le faire pr\u00e9c\u00e9der d\u2019une espace : C\u2019est ainsi que Paul Watzlawick formule son axiome d\u2019impossibilit\u00e9[^axiome]. <!-- ici, avant le point --> L\u2019axiome d\u2019impossibilit\u00e9, \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb, est formul\u00e9 [\u2026] <!-- ici, avant le point concluant la citation, avant le guillemet qui l\u2019encadre (pr\u00e9c\u00e9d\u00e9 d\u2019une espace fine ins\u00e9cable) --> Paul Watzlawick affirme \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb. Ainsi [\u2026] <!-- ici, un point final conclut la phrase comportant une citation --> De la m\u00eame mani\u00e8re, les images de note doivent \u00eatre saisies imm\u00e9diatement (sans espace) apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg) sont grav\u00e9es dans les m\u00e9moires. Probl\u00e8mes de notes En contexte d\u2019impression, si trop d'images de note sont pr\u00e9sentes sur une seule page, l\u2019outil ne peut pas g\u00e9rer automatiquement le \u201creflux\u201d de la note sur la page suivante. Une alert est alors affich\u00e9e. Plusieurs solutions : Utiliser une grande figure au fil du texte pour d\u00e9velopper la pagination diff\u00e9remment: (figure: nomdufichier.jpg caption: La l\u00e9gende de l\u2019image) D\u00e9porter certaines images de notes en annexes. Forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Modifier l\u2019affichage des notes Pour \u00e9tendre ou modifier l\u2019affichage des notes, il importe de comprendre comment elles sont g\u00e9n\u00e9r\u00e9es et mises en page. Une documentation d\u00e9di\u00e9e est accessible ici : Pour aller plus loin avec les notes .","title":"Notes"},{"location":"notes/#notes","text":"Pour cr\u00e9er une note, ins\u00e9rer [^identifiant_de_la_note] au fil du texte, puis, ailleurs dans le m\u00eame document, cr\u00e9er un paragraphe contentant : [^identifiant_de_la_note]: Contenu de la note mise en forme. Il est prf\u00e9rable de ne pas identifier les notes via des identifiants num\u00e9riques (1, 2, 3\u2026) afin de laisser la num\u00e9rotation automatique \u00e0 la charge de l\u2019outil.","title":"Notes"},{"location":"notes/#appels-de-notes-et-citations","text":"Dans le texte, un appel de note pr\u00e9c\u00e8de toujours le signe de ponctuation. Il se placera donc toujours avant le point final d\u2019une phrase. En fin de citation, il se place avant le guillemet fermant. On le saisit sans le faire pr\u00e9c\u00e9der d\u2019une espace : C\u2019est ainsi que Paul Watzlawick formule son axiome d\u2019impossibilit\u00e9[^axiome]. <!-- ici, avant le point --> L\u2019axiome d\u2019impossibilit\u00e9, \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb, est formul\u00e9 [\u2026] <!-- ici, avant le point concluant la citation, avant le guillemet qui l\u2019encadre (pr\u00e9c\u00e9d\u00e9 d\u2019une espace fine ins\u00e9cable) --> Paul Watzlawick affirme \u00ab&#8239;On ne peut pas ne pas communiquer[^axiome].&#8239;\u00bb. Ainsi [\u2026] <!-- ici, un point final conclut la phrase comportant une citation --> De la m\u00eame mani\u00e8re, les images de note doivent \u00eatre saisies imm\u00e9diatement (sans espace) apr\u00e8s le mot qu\u2019elles pr\u00e9cisent : Les illustrations de Gustave Dor\u00e9(imagenote: images/gustave.jpg) sont grav\u00e9es dans les m\u00e9moires.","title":"Appels de notes et citations"},{"location":"notes/#problemes-de-notes","text":"En contexte d\u2019impression, si trop d'images de note sont pr\u00e9sentes sur une seule page, l\u2019outil ne peut pas g\u00e9rer automatiquement le \u201creflux\u201d de la note sur la page suivante. Une alert est alors affich\u00e9e. Plusieurs solutions : Utiliser une grande figure au fil du texte pour d\u00e9velopper la pagination diff\u00e9remment: (figure: nomdufichier.jpg caption: La l\u00e9gende de l\u2019image) D\u00e9porter certaines images de notes en annexes. Forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\">","title":"Probl\u00e8mes de notes"},{"location":"notes/#modifier-laffichage-des-notes","text":"Pour \u00e9tendre ou modifier l\u2019affichage des notes, il importe de comprendre comment elles sont g\u00e9n\u00e9r\u00e9es et mises en page. Une documentation d\u00e9di\u00e9e est accessible ici : Pour aller plus loin avec les notes .","title":"Modifier l\u2019affichage des notes"},{"location":"online/","text":"Mise en ligne et publication Une fois termin\u00e9 le processus d\u2019\u00e9dition sur un serveur local, le document peut \u00eatre mis en ligne sur un serveur web de production (le serveur de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es ou un compte \u00e9tudiant h\u00e9berg\u00e9 par Alwaysdata \u2013 me demander ). Il faut alors s\u2019assurer que le serveur est bien capable de servir le site via une version de PHP sup\u00e9rieure \u00e0 8.0 (sur Alwaysdata, voir ici ). Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier index.php peut \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb. PTTP comme g\u00e9n\u00e9rateur de site statique Si l\u2019on souhaite g\u00e9n\u00e9rer un \u00ab site statique \u00bb (une simple page HTML, sans PHP ; par ex. pour h\u00e9berger la page sur Neocities), on peut utiliser PHP en ligne de commande : # pour g\u00e9n\u00e9rer la version web php index.php > index.html # pour g\u00e9n\u00e9rer la version imprimable # (pas tr\u00e8s utile, mieux vaut mettre en ligne le PDF final) php index.php '&print' > print.html Dans le cas de PHP fourni par MAMP, il faut conna\u00eetre le chemin de l\u2019ex\u00e9cutable PHP : # Exemple sur Mac OSX (v\u00e9rifier la version de PHP) /Applications/MAMP/bin/php/php8.1.0/bin/php index.php > index.html","title":"Mise en ligne"},{"location":"online/#mise-en-ligne-et-publication","text":"Une fois termin\u00e9 le processus d\u2019\u00e9dition sur un serveur local, le document peut \u00eatre mis en ligne sur un serveur web de production (le serveur de l\u2019\u00c9SAD Pyr\u00e9n\u00e9es ou un compte \u00e9tudiant h\u00e9berg\u00e9 par Alwaysdata \u2013 me demander ). Il faut alors s\u2019assurer que le serveur est bien capable de servir le site via une version de PHP sup\u00e9rieure \u00e0 8.0 (sur Alwaysdata, voir ici ). Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier index.php peut \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Mise en ligne et publication"},{"location":"online/#pttp-comme-generateur-de-site-statique","text":"Si l\u2019on souhaite g\u00e9n\u00e9rer un \u00ab site statique \u00bb (une simple page HTML, sans PHP ; par ex. pour h\u00e9berger la page sur Neocities), on peut utiliser PHP en ligne de commande : # pour g\u00e9n\u00e9rer la version web php index.php > index.html # pour g\u00e9n\u00e9rer la version imprimable # (pas tr\u00e8s utile, mieux vaut mettre en ligne le PDF final) php index.php '&print' > print.html Dans le cas de PHP fourni par MAMP, il faut conna\u00eetre le chemin de l\u2019ex\u00e9cutable PHP : # Exemple sur Mac OSX (v\u00e9rifier la version de PHP) /Applications/MAMP/bin/php/php8.1.0/bin/php index.php > index.html","title":"PTTP comme g\u00e9n\u00e9rateur de site statique"},{"location":"pads/","text":"\u00c9dition collaborative Sur le principe largement r\u00e9pandu de \u00ab pad-to-print \u00bb ( pad2print de Luuse, Ethertoff ou Ether2html d\u2019Open Source Publishing, Collabprint de Quentin Juhel, Octomode de Varia), l\u2019outil permet de d\u00e9terminer des pads comme source de contenus. La structure de contenu du document (une s\u00e9rie de documents au format markdown ) est d\u00e9clar\u00e9e dans le fichier config.yml , mais plut\u00f4t que l\u2019usage standard, d\u00e9di\u00e9 \u00e0 des documents stock\u00e9s dans un sous-dossier, on d\u00e9clare alors l\u2019url de pads publics : parts: - title: Introduction collective # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: \"\" # \u2191 la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) pad: https://annuel2.framapad.org/p/pagetypetoprint?lang=fr # \u2191 on d\u00e9clare l\u2019URL du pad public template: default # \u2191 le gabarit de mise en page \u2026 Il est attendu que le contenu du pad soit nativement r\u00e9dig\u00e9 en markdown ; le format d\u2019exportation utilis\u00e9 \u00e9tant la version texte brut. NB: contrairement aux fichiers markdown locaux, il n\u2019est pas possible d\u2019\u00e9crire de HTML au sein des pads, mis \u00e0 part pour l\u2019usage de <br> . Les \u00e9ventuelles class sont autoris\u00e9es : <br class=\"breakprint\"> , <br class=\"breakpage\"> , <br class=\"breakcolumn\"> ou <br class=\"breakscreen\"> . Les entit\u00e9s HTML ( $nbsp; , &#8239; , etc.) sont pr\u00e9serv\u00e9es.","title":"Collaboration"},{"location":"pads/#edition-collaborative","text":"Sur le principe largement r\u00e9pandu de \u00ab pad-to-print \u00bb ( pad2print de Luuse, Ethertoff ou Ether2html d\u2019Open Source Publishing, Collabprint de Quentin Juhel, Octomode de Varia), l\u2019outil permet de d\u00e9terminer des pads comme source de contenus. La structure de contenu du document (une s\u00e9rie de documents au format markdown ) est d\u00e9clar\u00e9e dans le fichier config.yml , mais plut\u00f4t que l\u2019usage standard, d\u00e9di\u00e9 \u00e0 des documents stock\u00e9s dans un sous-dossier, on d\u00e9clare alors l\u2019url de pads publics : parts: - title: Introduction collective # \u2191 le titre de la section, tel qu\u2019il apparaitra dans le sommaire file: \"\" # \u2191 la d\u00e9claration \"file\" reste vide (ou est supprim\u00e9e) pad: https://annuel2.framapad.org/p/pagetypetoprint?lang=fr # \u2191 on d\u00e9clare l\u2019URL du pad public template: default # \u2191 le gabarit de mise en page \u2026 Il est attendu que le contenu du pad soit nativement r\u00e9dig\u00e9 en markdown ; le format d\u2019exportation utilis\u00e9 \u00e9tant la version texte brut. NB: contrairement aux fichiers markdown locaux, il n\u2019est pas possible d\u2019\u00e9crire de HTML au sein des pads, mis \u00e0 part pour l\u2019usage de <br> . Les \u00e9ventuelles class sont autoris\u00e9es : <br class=\"breakprint\"> , <br class=\"breakpage\"> , <br class=\"breakcolumn\"> ou <br class=\"breakscreen\"> . Les entit\u00e9s HTML ( $nbsp; , &#8239; , etc.) sont pr\u00e9serv\u00e9es.","title":"\u00c9dition collaborative"},{"location":"print/","text":"Version imprimable On peut acc\u00e9der \u00e0 la pr\u00e9visualisation de la version imprimable depuis l\u2019URL /?print . Par exemple, http://localhost:8888/pagetypetoprint/?print . Un fichier PDF devra \u00eatre produit en utilisant la fonction \u00ab d\u2019impression vers PDF \u00bb d\u2019un navigateur compatible (Chromium ou Chrome) : Fichier > Imprimer > Format PDF . Quelques r\u00e9glages de param\u00e8tres d\u2019impression sont souvent n\u00e9cessaires : d\u00e9sactiver les ent\u00eates et pieds de pages du navigateur, contr\u00f4ler la mise \u00e0 l\u2019\u00e9chelle, v\u00e9rifier le format, d\u00e9sactiver les marges par d\u00e9faut et cocher l\u2019option permettant d\u2019imprimer les arri\u00e8re-plans. Version finale t\u00e9l\u00e9chargeable Suite \u00e0 l\u2019exportation du document au format PDF, le fichier r\u00e9sultant devra \u00eatre stock\u00e9 dans le dossier de travail, et nomm\u00e9 en fonction de l\u2019option configurable dans le fichier config.yml . Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier body.php du th\u00e8me pourra alors \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Version imprimable / pdf"},{"location":"print/#version-imprimable","text":"On peut acc\u00e9der \u00e0 la pr\u00e9visualisation de la version imprimable depuis l\u2019URL /?print . Par exemple, http://localhost:8888/pagetypetoprint/?print . Un fichier PDF devra \u00eatre produit en utilisant la fonction \u00ab d\u2019impression vers PDF \u00bb d\u2019un navigateur compatible (Chromium ou Chrome) : Fichier > Imprimer > Format PDF . Quelques r\u00e9glages de param\u00e8tres d\u2019impression sont souvent n\u00e9cessaires : d\u00e9sactiver les ent\u00eates et pieds de pages du navigateur, contr\u00f4ler la mise \u00e0 l\u2019\u00e9chelle, v\u00e9rifier le format, d\u00e9sactiver les marges par d\u00e9faut et cocher l\u2019option permettant d\u2019imprimer les arri\u00e8re-plans.","title":"Version imprimable"},{"location":"print/#version-finale-telechargeable","text":"Suite \u00e0 l\u2019exportation du document au format PDF, le fichier r\u00e9sultant devra \u00eatre stock\u00e9 dans le dossier de travail, et nomm\u00e9 en fonction de l\u2019option configurable dans le fichier config.yml . Le lien \u00ab Imprimer \u00bb, pr\u00e9sent dans le fichier body.php du th\u00e8me pourra alors \u00eatre supprim\u00e9 pour ne conserver que le seul \u00ab T\u00e9l\u00e9charger \u00bb.","title":"Version finale t\u00e9l\u00e9chargeable"},{"location":"references/","text":"Bibliographie Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les annexes bibliographiques. Un gabarit sp\u00e9cifique ( references ) est pr\u00e9vu pour d\u00e9clarer la bibliographie dans les sections du fichier config.yml : - title: Bibliographie file: content/text/7.biblio.md template: references Pr\u00e9conisations Dans la bibliographie, les r\u00e9f\u00e9rences sont ordonn\u00e9es par ordre alphab\u00e9tique du nom d\u2019auteur\u22c5ice (s\u2019il y a plusieurs r\u00e9f\u00e9rences d\u2019un\u22c5e m\u00eame auteur\u22c5ice, elles sont class\u00e9es chronologiquement). Toutes les sources cit\u00e9es dans le texte doivent aussi \u00eatre cit\u00e9es dans la bibliographie. Les normes recommand\u00e9es ci-dessous sont issues de la sp\u00e9cification ISO-690:2010 . Abbr\u00e9viations utiles Ibid. s\u2019utilise lorsque la note porte sur le m\u00eame ouvrage que la note pr\u00e9c\u00e9dente. Op. cit. s\u2019utilise lorsqu\u2019un ouvrage a d\u00e9j\u00e0 \u00e9t\u00e9 cit\u00e9 pr\u00e9c\u00e9demment, mais que d\u2019autres ouvrages ont \u00e9t\u00e9 cit\u00e9s depuis. Avec op. cit. , on mentionne quelques mots du titre, mais on fait l\u2019\u00e9conomie de la r\u00e9p\u00e9tition de la source compl\u00e8te. Ces deux abbr\u00e9viations se composent en italique. Pour citer un livre Le titre du livre doit \u00eatre en italique. En cas de d\u2019ouvrage collectif, indiquer \u00ab . Pr\u00e9nom NOM des auteurs principaux, dir. \u00bb apr\u00e8s le titre de l\u2019ouvrage. Si vous citez un chapitre, ajouter \u00ab Num\u00e9ro et titre du chapitre. Pages. \u00bb. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre du livre . \u00c9dition. Ville d\u2019\u00e9dition\u202f: Nom de l\u2019\u00e9diteur, Ann\u00e9e de publication. Collection. PAPANEK, Victor. _Design for the Real World: Human Ecology and Social Change_. New-York&#8239;: Pantheon Books, 1971. Pour citer un article Le titre de l\u2019article doit \u00eatre entre guillemets. Le titre de la revue ou du journal doit \u00eatre en italique. Si vous citez un quotidien, indiquer la date du jour. NOM, Pr\u00e9nom des auteur\u22c5ices. \u00ab Titre de l\u2019article \u00bb. Dans\u202f: Titre de la revue . Ann\u00e9e de publication, Volume (Num\u00e9ro), Pages. URL si publication en ligne. DREYFUS, John et Fernand BAUDIN. \u00ab&#8239;L\u2019invention des lunettes et l\u2019apparition de l\u2019imprimerie&#8239;\u00bb. Dans&nbsp;: _Communication & Langages_. 1989, (N^o^&nbsp;79), pp. 73-86. Pour citer une page web Le titre de la page doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la page . Date de publication (ou de mise \u00e0 jour) si disponible. Site Internet. URL [Consult\u00e9 le \u2026]. ERTZSCHEID, Olivier. _Une question de g\u00e9n\u00e9ration. Vers un capitalisme s\u00e9miotique_. 12 octobre 2022. Affordance.info. https://affordance.framasoft.org/2022/10/question-generation-capitalisme-semiotique/ [Consult\u00e9 le 13 octobre 2022]. Pour citer une vid\u00e9o en ligne Le titre de la vid\u00e9o doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la vid\u00e9o . Date si disponible. Disponible sur URL [Vid\u00e9o consult\u00e9e le \u2026]. PRADIER, Manon. _Avec Vincent_. 2016. Disponible sur https://youtu.be/3DNsGRUHF7s [Vid\u00e9o consult\u00e9e le 13 octobre 2022]. NB: les vid\u00e9os YouTube ont une URL courte (accessible via la commande \u201cPartager\u201d) pr\u00e9f\u00e9rable pour une mise en page plus condens\u00e9e. Colonnes Hors de la bibliographie, au sein du texte, le contenu peut \u00e9galement \u00eatre r\u00e9parti en trois colonnes en utilisant la notation\u202f: ::: columns Contenu :::","title":"R\u00e9f\u00e9rences et bibliographie"},{"location":"references/#bibliographie","text":"Une logique de mise en forme sp\u00e9cifique est propos\u00e9e pour les annexes bibliographiques. Un gabarit sp\u00e9cifique ( references ) est pr\u00e9vu pour d\u00e9clarer la bibliographie dans les sections du fichier config.yml : - title: Bibliographie file: content/text/7.biblio.md template: references","title":"Bibliographie"},{"location":"references/#preconisations","text":"Dans la bibliographie, les r\u00e9f\u00e9rences sont ordonn\u00e9es par ordre alphab\u00e9tique du nom d\u2019auteur\u22c5ice (s\u2019il y a plusieurs r\u00e9f\u00e9rences d\u2019un\u22c5e m\u00eame auteur\u22c5ice, elles sont class\u00e9es chronologiquement). Toutes les sources cit\u00e9es dans le texte doivent aussi \u00eatre cit\u00e9es dans la bibliographie. Les normes recommand\u00e9es ci-dessous sont issues de la sp\u00e9cification ISO-690:2010 .","title":"Pr\u00e9conisations"},{"location":"references/#abbreviations-utiles","text":"Ibid. s\u2019utilise lorsque la note porte sur le m\u00eame ouvrage que la note pr\u00e9c\u00e9dente. Op. cit. s\u2019utilise lorsqu\u2019un ouvrage a d\u00e9j\u00e0 \u00e9t\u00e9 cit\u00e9 pr\u00e9c\u00e9demment, mais que d\u2019autres ouvrages ont \u00e9t\u00e9 cit\u00e9s depuis. Avec op. cit. , on mentionne quelques mots du titre, mais on fait l\u2019\u00e9conomie de la r\u00e9p\u00e9tition de la source compl\u00e8te. Ces deux abbr\u00e9viations se composent en italique.","title":"Abbr\u00e9viations utiles"},{"location":"references/#pour-citer-un-livre","text":"Le titre du livre doit \u00eatre en italique. En cas de d\u2019ouvrage collectif, indiquer \u00ab . Pr\u00e9nom NOM des auteurs principaux, dir. \u00bb apr\u00e8s le titre de l\u2019ouvrage. Si vous citez un chapitre, ajouter \u00ab Num\u00e9ro et titre du chapitre. Pages. \u00bb. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre du livre . \u00c9dition. Ville d\u2019\u00e9dition\u202f: Nom de l\u2019\u00e9diteur, Ann\u00e9e de publication. Collection. PAPANEK, Victor. _Design for the Real World: Human Ecology and Social Change_. New-York&#8239;: Pantheon Books, 1971.","title":"Pour citer un livre"},{"location":"references/#pour-citer-un-article","text":"Le titre de l\u2019article doit \u00eatre entre guillemets. Le titre de la revue ou du journal doit \u00eatre en italique. Si vous citez un quotidien, indiquer la date du jour. NOM, Pr\u00e9nom des auteur\u22c5ices. \u00ab Titre de l\u2019article \u00bb. Dans\u202f: Titre de la revue . Ann\u00e9e de publication, Volume (Num\u00e9ro), Pages. URL si publication en ligne. DREYFUS, John et Fernand BAUDIN. \u00ab&#8239;L\u2019invention des lunettes et l\u2019apparition de l\u2019imprimerie&#8239;\u00bb. Dans&nbsp;: _Communication & Langages_. 1989, (N^o^&nbsp;79), pp. 73-86.","title":"Pour citer un article"},{"location":"references/#pour-citer-une-page-web","text":"Le titre de la page doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la page . Date de publication (ou de mise \u00e0 jour) si disponible. Site Internet. URL [Consult\u00e9 le \u2026]. ERTZSCHEID, Olivier. _Une question de g\u00e9n\u00e9ration. Vers un capitalisme s\u00e9miotique_. 12 octobre 2022. Affordance.info. https://affordance.framasoft.org/2022/10/question-generation-capitalisme-semiotique/ [Consult\u00e9 le 13 octobre 2022].","title":"Pour citer une page web"},{"location":"references/#pour-citer-une-video-en-ligne","text":"Le titre de la vid\u00e9o doit \u00eatre en italique. NOM, Pr\u00e9nom des auteur\u22c5ices. Titre de la vid\u00e9o . Date si disponible. Disponible sur URL [Vid\u00e9o consult\u00e9e le \u2026]. PRADIER, Manon. _Avec Vincent_. 2016. Disponible sur https://youtu.be/3DNsGRUHF7s [Vid\u00e9o consult\u00e9e le 13 octobre 2022]. NB: les vid\u00e9os YouTube ont une URL courte (accessible via la commande \u201cPartager\u201d) pr\u00e9f\u00e9rable pour une mise en page plus condens\u00e9e.","title":"Pour citer une vid\u00e9o en ligne"},{"location":"references/#colonnes","text":"Hors de la bibliographie, au sein du texte, le contenu peut \u00e9galement \u00eatre r\u00e9parti en trois colonnes en utilisant la notation\u202f: ::: columns Contenu :::","title":"Colonnes"},{"location":"sommaire/","text":"Sommaire \u00c9cran \u00c0 l\u2019\u00e9cran, le sommaire est g\u00e9n\u00e9r\u00e9 automatiquement depuis les \u00e9l\u00e9ments contenus dans la liste d\u00e9finie dans le fichier config.yml . Seuls les titres de section apparaissent. L\u2019\u00e9l\u00e9ment <nav> qui le contient est clon\u00e9 via javascript, afin d\u2019appara\u00eetre \u00e0 la fois en introduction du document et au fil de la lecture. Impression En contexte d\u2019impression, il est g\u00e9n\u00e9r\u00e9 \u00e0 partir des balises <h2> et <h3> (\u00e0 l\u2019int\u00e9rieur de l\u2019\u00e9l\u00e9ment <main> ) du document (c\u2019est \u00e0 dire, des titres pr\u00e9c\u00e9d\u00e9s de ## et ### dans les fichiers markdown). Les titres de section ainsi que les \u00ab sous-parties \u00bb sont donc visibles.","title":"Sommaire"},{"location":"sommaire/#sommaire","text":"","title":"Sommaire"},{"location":"sommaire/#ecran","text":"\u00c0 l\u2019\u00e9cran, le sommaire est g\u00e9n\u00e9r\u00e9 automatiquement depuis les \u00e9l\u00e9ments contenus dans la liste d\u00e9finie dans le fichier config.yml . Seuls les titres de section apparaissent. L\u2019\u00e9l\u00e9ment <nav> qui le contient est clon\u00e9 via javascript, afin d\u2019appara\u00eetre \u00e0 la fois en introduction du document et au fil de la lecture.","title":"\u00c9cran"},{"location":"sommaire/#impression","text":"En contexte d\u2019impression, il est g\u00e9n\u00e9r\u00e9 \u00e0 partir des balises <h2> et <h3> (\u00e0 l\u2019int\u00e9rieur de l\u2019\u00e9l\u00e9ment <main> ) du document (c\u2019est \u00e0 dire, des titres pr\u00e9c\u00e9d\u00e9s de ## et ### dans les fichiers markdown). Les titres de section ainsi que les \u00ab sous-parties \u00bb sont donc visibles.","title":"Impression"},{"location":"theme/","text":"Th\u00e8me Le th\u00e8me par d\u00e9faut ( theme/esadpyrenees ) contient deux dossiers \u2013 pour les scripts js et les feuilles de style CSS \u2013 et trois fichiers: body.php , print_head.php et screen_head.php . Modifier le th\u00e8me Pour modifier l\u2019apparence des documents, il est possible de dupliquer le th\u00e8me par d\u00e9faut, pour \u00eatre en mesure d\u2019\u00e9diter \u00e0 la fois les styles graphiques, les scripts et la structure HTML du document. body.php Ce fichier contient l\u2019ensemble de la structure HTML du document. Les contenus HTML des versions \u00e9cran et imprimable sont identiques par d\u00e9faut, mais il est possible de les diff\u00e9rencier en utilisant une condition : // \u00e0 la place de : include( \"$theme_url/body.php\" ); // utiliser : include( isset($_GET[\"print\"]) ? \"$theme_url/print_body.php\" : \"$theme_url/screen_body.php\"); print_head.php Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019affichage \u00e9cran. screen_head.php Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019impression, notamment, l\u2019appel \u00e0 la librairie paged.js .","title":"Th\u00e8me"},{"location":"theme/#theme","text":"Le th\u00e8me par d\u00e9faut ( theme/esadpyrenees ) contient deux dossiers \u2013 pour les scripts js et les feuilles de style CSS \u2013 et trois fichiers: body.php , print_head.php et screen_head.php .","title":"Th\u00e8me"},{"location":"theme/#modifier-le-theme","text":"Pour modifier l\u2019apparence des documents, il est possible de dupliquer le th\u00e8me par d\u00e9faut, pour \u00eatre en mesure d\u2019\u00e9diter \u00e0 la fois les styles graphiques, les scripts et la structure HTML du document.","title":"Modifier le th\u00e8me"},{"location":"theme/#bodyphp","text":"Ce fichier contient l\u2019ensemble de la structure HTML du document. Les contenus HTML des versions \u00e9cran et imprimable sont identiques par d\u00e9faut, mais il est possible de les diff\u00e9rencier en utilisant une condition : // \u00e0 la place de : include( \"$theme_url/body.php\" ); // utiliser : include( isset($_GET[\"print\"]) ? \"$theme_url/print_body.php\" : \"$theme_url/screen_body.php\");","title":"body.php"},{"location":"theme/#print_headphp","text":"Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019affichage \u00e9cran.","title":"print_head.php"},{"location":"theme/#screen_headphp","text":"Ce fichier contient l\u2019ensemble des styles et des scripts n\u00e9cessaires \u00e0 l\u2019impression, notamment, l\u2019appel \u00e0 la librairie paged.js .","title":"screen_head.php"},{"location":"typo/","text":"Typographie La majeure partie des probl\u00e9matiques de micro-typographie est corrig\u00e9e automatiquement (points de suspension, espaces avant et apr\u00e8s ! ? \u00ab \u00bb \u201c \u201d, unit\u00e9s). Cete automatisation ne dispense aucunement du soin \u00e0 apporter \u00e0 la composition typographique du texte ! Sauts de page ou de colonnes \u00c0 l\u2019impression, on peut forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Pour forcer un saut dans des colonnes (notes de bas de page, notamment), utiliser : <br class=\"breakcolumn\"> Des sauts de ligne conditionnels (\u00e9cran ou impression) peuvent \u00eatre g\u00e9n\u00e9r\u00e9s gr\u00e2ce aux balises : <br class=\"breakscreen\"><!-- uniquement \u00e0 l\u2019\u00e9cran --> <br class=\"breakprint\"><!-- uniquement \u00e0 l\u2019impression --> Espaces Pour une espace mot ins\u00e9cable, utiliser &nbsp; Pour une espace fine ins\u00e9cable, utiliser &#8239; Apostrophe courbe et guillemets Les apostrophes sont compos\u00e9es gr\u00e2ce au signe \u2019 et pas '. Les \u00ab guillemets droits \u00bb, simples ou doubles (\" et ') devraient \u00eatre proscrits. Dans PageTypeToPrint, en Markdown, ils sont automatiquement remplac\u00e9s par des guillemets fran\u00e7ais (\u00ab\u00bb). Les guillemets fran\u00e7ais devraient \u00eatre utilis\u00e9s dans l\u2019immense majorit\u00e9 des cas. Les guillemets anglais (\u201c\u201d) sont r\u00e9serv\u00e9s \u00e0 la mise entre guillemets au sein-m\u00eame d\u2019un texte d\u00e9j\u00e0 entre guillemets fran\u00e7ais : \u00ab Une citation peut contenir des mots \u201centre guillemets\u201d. \u00bb Les caract\u00e8res dans le tableau ci-dessous peuvent \u00eatre compos\u00e9s directement (les entit\u00e9s HTML ne sont pr\u00e9sent\u00e9es qu\u2019\u00e0 titre informatif). Nom Entit\u00e9 HTML Commentaire \u2019 & rsquo; Apostrophe courbe \u00ab \u00bb & laquo; & raquo; Guillemet fran\u00e7ais ouvrant et fermant \u201c \u201d & ldquo; & rdquo; Guillemet anglais ouvrant et fermant Exposants Pour un exposant, utiliser XX^e^ si\u00e8cle , afin d\u2019afficher XX e si\u00e8cle. Les abbr\u00e9viations premier, deuxi\u00e8me, etc. se composent \u00e9galement en exposants : \u00ab la 1^re^ vague et la 2^e^ vague \u00bb pour afficher \u00ab la 1 re vague et la 2 e vague \u00bb. Points de suspension Les points de suspension doivent \u00eatre compos\u00e9s gr\u00e2ce au caract\u00e8re d\u00e9di\u00e9 : \u00ab \u2026 \u00bb. (Pas en faisant se succ\u00e9der trois points : ...). Spacing Pour r\u00e9duire une ligne de texte et emp\u00eacher un saut malencontreux (veuves ou orphelines), on peut introduire au sein du texte markdown des balises span qui vont permettre de r\u00e9gler finement le spacing d\u2019une phrase ou d\u2019une ligne: Lorem <span style=\"--ls:4\">ipsum dolor sit amet, consectetur adipiscing elit.</span> Sed non risus [\u2026] Dans la CSS doit \u00eatre pr\u00e9sent : [style^=\"--ls\"] { letter-spacing: calc(var(--ls, 0) * -0.001em); } La valeur attribu\u00e9e \u00e0 la propri\u00e9t\u00e9 --ls permettra d\u2019\u00e9tendre le spacing (si elle est n\u00e9gative) ou de le resserrer si elle est positive. L\u2019inspecteur web permet de modifier la valeur \u00e0 la vol\u00e9e afin de l\u2019ajuster pr\u00e9cis\u00e9ment. \u26a0\ufe0f Attention, ne proc\u00e9der \u00e0 ces ajustements qu\u2019en toute fin de mise en forme, quand tout le reste a \u00e9t\u00e9 fait !","title":"Typographie"},{"location":"typo/#typographie","text":"La majeure partie des probl\u00e9matiques de micro-typographie est corrig\u00e9e automatiquement (points de suspension, espaces avant et apr\u00e8s ! ? \u00ab \u00bb \u201c \u201d, unit\u00e9s). Cete automatisation ne dispense aucunement du soin \u00e0 apporter \u00e0 la composition typographique du texte !","title":"Typographie"},{"location":"typo/#sauts-de-page-ou-de-colonnes","text":"\u00c0 l\u2019impression, on peut forcer un saut de page en int\u00e9grant le code : <br class=\"breakpage\"> Pour forcer un saut dans des colonnes (notes de bas de page, notamment), utiliser : <br class=\"breakcolumn\"> Des sauts de ligne conditionnels (\u00e9cran ou impression) peuvent \u00eatre g\u00e9n\u00e9r\u00e9s gr\u00e2ce aux balises : <br class=\"breakscreen\"><!-- uniquement \u00e0 l\u2019\u00e9cran --> <br class=\"breakprint\"><!-- uniquement \u00e0 l\u2019impression -->","title":"Sauts de page ou de colonnes"},{"location":"typo/#espaces","text":"Pour une espace mot ins\u00e9cable, utiliser &nbsp; Pour une espace fine ins\u00e9cable, utiliser &#8239;","title":"Espaces"},{"location":"typo/#apostrophe-courbe-et-guillemets","text":"Les apostrophes sont compos\u00e9es gr\u00e2ce au signe \u2019 et pas '. Les \u00ab guillemets droits \u00bb, simples ou doubles (\" et ') devraient \u00eatre proscrits. Dans PageTypeToPrint, en Markdown, ils sont automatiquement remplac\u00e9s par des guillemets fran\u00e7ais (\u00ab\u00bb). Les guillemets fran\u00e7ais devraient \u00eatre utilis\u00e9s dans l\u2019immense majorit\u00e9 des cas. Les guillemets anglais (\u201c\u201d) sont r\u00e9serv\u00e9s \u00e0 la mise entre guillemets au sein-m\u00eame d\u2019un texte d\u00e9j\u00e0 entre guillemets fran\u00e7ais : \u00ab Une citation peut contenir des mots \u201centre guillemets\u201d. \u00bb Les caract\u00e8res dans le tableau ci-dessous peuvent \u00eatre compos\u00e9s directement (les entit\u00e9s HTML ne sont pr\u00e9sent\u00e9es qu\u2019\u00e0 titre informatif). Nom Entit\u00e9 HTML Commentaire \u2019 & rsquo; Apostrophe courbe \u00ab \u00bb & laquo; & raquo; Guillemet fran\u00e7ais ouvrant et fermant \u201c \u201d & ldquo; & rdquo; Guillemet anglais ouvrant et fermant","title":"Apostrophe courbe et guillemets"},{"location":"typo/#exposants","text":"Pour un exposant, utiliser XX^e^ si\u00e8cle , afin d\u2019afficher XX e si\u00e8cle. Les abbr\u00e9viations premier, deuxi\u00e8me, etc. se composent \u00e9galement en exposants : \u00ab la 1^re^ vague et la 2^e^ vague \u00bb pour afficher \u00ab la 1 re vague et la 2 e vague \u00bb.","title":"Exposants"},{"location":"typo/#points-de-suspension","text":"Les points de suspension doivent \u00eatre compos\u00e9s gr\u00e2ce au caract\u00e8re d\u00e9di\u00e9 : \u00ab \u2026 \u00bb. (Pas en faisant se succ\u00e9der trois points : ...).","title":"Points de suspension"},{"location":"typo/#spacing","text":"Pour r\u00e9duire une ligne de texte et emp\u00eacher un saut malencontreux (veuves ou orphelines), on peut introduire au sein du texte markdown des balises span qui vont permettre de r\u00e9gler finement le spacing d\u2019une phrase ou d\u2019une ligne: Lorem <span style=\"--ls:4\">ipsum dolor sit amet, consectetur adipiscing elit.</span> Sed non risus [\u2026] Dans la CSS doit \u00eatre pr\u00e9sent : [style^=\"--ls\"] { letter-spacing: calc(var(--ls, 0) * -0.001em); } La valeur attribu\u00e9e \u00e0 la propri\u00e9t\u00e9 --ls permettra d\u2019\u00e9tendre le spacing (si elle est n\u00e9gative) ou de le resserrer si elle est positive. L\u2019inspecteur web permet de modifier la valeur \u00e0 la vol\u00e9e afin de l\u2019ajuster pr\u00e9cis\u00e9ment. \u26a0\ufe0f Attention, ne proc\u00e9der \u00e0 ces ajustements qu\u2019en toute fin de mise en forme, quand tout le reste a \u00e9t\u00e9 fait !","title":"Spacing"}]}
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index 2b31c7f..d345edd 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,117 +2,117 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/advanced-notes/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/appendices/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/autofolder/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/booklet/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/contenu/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/credits/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/entretiens/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/extend/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/extendcss/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/gabarits/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/glossaire/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/images/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/installation/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/markdown/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/notes/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/online/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/pads/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/print/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/references/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/sommaire/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/theme/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://esadpyrenees.github.io/PageTypeToPrint/typo/</loc>
-         <lastmod>2023-09-21</lastmod>
+         <lastmod>2023-09-22</lastmod>
          <changefreq>daily</changefreq>
     </url>
 </urlset>
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index c1491ea..e58f8f0 100644
Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ
diff --git a/sommaire/index.html b/sommaire/index.html
index 0885b23..8c0ec92 100644
--- a/sommaire/index.html
+++ b/sommaire/index.html
@@ -439,7 +439,7 @@ <h3 id="impression">Impression</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.023460+00:00
+    Build Date UTC : 2023-09-22 06:19:06.012251+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/theme/index.html b/theme/index.html
index 8124402..284b886 100644
--- a/theme/index.html
+++ b/theme/index.html
@@ -447,7 +447,7 @@ <h4 id="screen_headphp">screen_head.php</h4>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.024165+00:00
+    Build Date UTC : 2023-09-22 06:19:06.013111+00:00
     -->
   </body>
 </html>
\ No newline at end of file
diff --git a/typo/index.html b/typo/index.html
index 36efc89..5d51634 100644
--- a/typo/index.html
+++ b/typo/index.html
@@ -508,7 +508,7 @@ <h3 id="spacing">Spacing</h3>
     <!--
     MkDocs version : 1.4.2
     PageTypeToPrint MkDocs theme version : 1.0.0
-    Build Date UTC : 2023-09-21 17:26:13.024953+00:00
+    Build Date UTC : 2023-09-22 06:19:06.013946+00:00
     -->
   </body>
 </html>
\ No newline at end of file