Version actuelle datée du 22 janvier 2024 à 13:46

Sommaire

1 Archives
2 Sessions

Sessions

PAD du cours: https://pads.erg.be/p/dnum-web2print

17 décembre

PDF utils : un outils conçu par OSP pour convertir vos pdf en CMYK

Recherche de reliure: reférence: Sukrii Kural

10 décembre

Vous pouvez utilisez le serveur etherpad ici: https://pad.lvh2.com pour éviter les problèmes de requêtes.

Ether2html - Version avec imposition

Télécharger le fichier "imposition.js" ici: https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/-/raw/master/imposition_quentin_juhel/js/imposition.js Placer le fichier dans le même répertoire que le fichier ether2html.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ether2html</title>

    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
    <!--link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"-->

    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
    <link href="https://pad.lvh2.com/p/ether2html_css/export/txt" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
    
    <script type="text/javascript" charset="utf-8">

        let $padContent;
        function insertData(data) {
            console.log(data);
            let converter = new showdown.Converter();
            let html = converter.makeHtml(data);
            $padContent.innerHTML = html;
        }

        function insertPagedJS(){
            let $script = document.createElement('script');
            
            $script.setAttribute('src', 'paged.polyfill.js');
            $script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
            window.PagedConfig = {auto: false};

            $script.onload = (e) => {
                let $impoScript = document.createElement('script');
                $impoScript.setAttribute('src', 'imposition.js');
                //ACTIVER LA LIGNE SUIVANTE POUR LANCER L'IMPOSITION
                document.querySelector('head').appendChild($impoScript);
                setTimeout(() => {
                    window.PagedPolyfill.preview();
                }, 1000);

            };
            
            document.querySelector('head').appendChild($script);
            
        }

        window.addEventListener('DOMContentLoaded', function(){
            $padContent = document.getElementById('pad-content');
            let request = new URL($padContent.getAttribute('data-md'));
            fetch(request).then(response => response.text()).then(data => {
                console.log(data);
                insertData(data);
                insertPagedJS();
            });
        });
        
    </script>

    <!-- This is the default stylesheet of paged.js -->
    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>

</head>
<body>

    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
    <div data-md="https://pad.lvh2.com/p/ether2html_content/export/txt" id="pad-content"></div>
    
</body>
</html>

19 novembre

Voici la nouvelle version purger de jquery d'ether2html, reconverti en Vanilla du coup.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ether2html</title>

    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
    <!-- <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"> -->

    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
    <link href="https://pads.erg.be/p/MAPK_css/export/txt" rel="stylesheet" text="text/css">

    <!-- PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE -->
    <!-- <script src="js/showdown.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
    <script type="text/javascript" charset="utf-8">

        let $padContent;
        function insertData(data) {
            
            let converter = new showdown.Converter();
            let html = converter.makeHtml(data);
            $padContent.innerHTML = html;
        }

        function insertPagedJS(){
            let $script = document.createElement('script');
            // PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
            // $script.setAttribute('src', 'js/paged.polyfill.js');
            $script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
            document.querySelector('head').appendChild($script);
        }

        window.addEventListener('DOMContentLoaded', function(){
            $padContent = document.getElementById('pad-content');
            let request = new URL($padContent.getAttribute('data-md'));
            fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
                insertData(data);
                insertPagedJS();
            });
        });
        
    </script>

    <!-- This is the default stylesheet of paged.js -->
    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>

</head>
<body>

    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
    <div data-md="https://pads.erg.be/p/MAPK_markdown/export/txt" id="pad-content"></div>
    
</body>
</html>

===> Aussi, il semble belle et bien que le page-break-after marche, du moins sur la première page:

dans le pad texte, après l'élement titre:

<div class="pagebreak"></div>

Et dans le Css:

.pagebreak {
          break-before: left;
    }

Il me semble qu'il faille crée quatre type de div qui font certain page-break et les utiliser en fonction des besoins.

12 novembre

ATTENTION! Nouvelle version du ether2html!!!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ether2html</title>

    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
    <!-- <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"> -->
    
    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
    <link href="https://pads.erg.be/p/manifesto.css/export/txt" rel="stylesheet" text="text/css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
        function run() {
            let $padContent = document.getElementById('pad-content');
            let converter = new showdown.Converter();
            let html = converter.makeHtml($padContent.innerHTML);
            $padContent.innerHTML = html;
           
        }
        $(document).ready(function(){ 
            $("#pad-content").load($("#pad-content").attr("data-md"), function(){
		run();
		window.setTimeout(function(){
			$.getScript("https://unpkg.com/pagedjs/dist/paged.polyfill.js", function(data, textStatus, jqxhr) {})
			}, 2000);
		}); 
        });
    </script>

    <!-- This is the default stylesheet of paged.js -->
    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>

    <!-- As the markdown pad is loaded then converted to html, the following line hide the markdown version -->
    <!--style type="text/css" media="all">#pad-content{display: none;}</style-->

</head>
<body>

    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
    <div data-md="https://pads.erg.be/p/manifesto/export/txt" id="pad-content"></div>
    
    <!--div id="document"></div-->

</body>
</html>

29 octobre

pdftohtml Linux et windows Mac: via Brew

Visual studio code: préférences - extentions - installer: encode decode ctrl alt C: ouvre les commandes > Encode/decode convert

site expressions régulières : https://regex101.com/

Reset CSS

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Recette pour parser du html avec PHP

<?php
    $url = 'https://lyber.dansnoshistoires.org/spip.php?article29';

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $data = curl_exec($ch);
    curl_close($ch);
    //print_r($data);
    
    $dom = new DomDocument();
    $dom->loadHTML($data);

    $contenu = $dom->getElementById('contenu');

    print_r($contenu->C14N());

    

?>

15 octobre

Gutenberg to HTML

Télécharger l'outil ether2html conçu par Open source publishing.
Décompressez le dossier et déposez-le dossier à un endroit adéquat de votre ordinateur.
Connectez vous à la bibliothèque libre de droit Gutenberg.org et choisissez par groupe de 2 ou 3 un texte qui vous plait. Vu que les auteurs sont décédés depuis minimum 70 ans pour que leur œuvre entre dans le domaine public, il y a beaucoup de textes classiques, il y a des auteurs français même si la majorité sont en anglais. (voir ici la littérature française)
Exemple: https://www.gutenberg.org/ebooks/26812
Télécharger le code source html du texte que vous avez choisi.
Ouvrez un pad quelque part pour le contenu (ex:https://pads.erg.be/) et copier/coller le contenu html de l'œuvre que vous avez choisie.
Ouvrez un autre pad pour les CSS
Editez le fichier ether2html.html en remplaçant l'URL sous le commentaire par l'URL d'exportation du pad CSS que vous avez créé à l'étape 1, (c'est à dire l'url + export/txt à la fin) ou bien copiez l'emplacement du lien de l'exportation en texte brut du pad via le menu d'exportation.
Modifiez le fichier ether2html.html en remplaçant l'URL sous le commentaire par l'URL d'exportation du pad pour le contenu que vous avez créé à l'étape 2, (c'est à dire l'url + export/txt à la fin) ou bien copiez l'emplacement du lien de l'exportation en texte brut du pad via le menu d'exportation.

24 septembre

Recette pad to print:

- 1 etherpad par groupe pour coder HTML + CSS : <https://pads.erg.be/p/html2print>
- ouvrir un terminal et lancer la commande: 
    while 1; do sleep 1; curl https://pads.erg.be/p/html2print/export/txt > index.html ; done
- Ouvrir Firefox
- Installer le plugin Auto reload: <https://addons.mozilla.org/fr/firefox/addon/auto-reload/>
- Ouvrir la page index.html créée dans votre "maison"
- Inspecteur web

Affiche html2print

- interroger une fonction meta du web ou un élément propre à l’html ou au java script
- produire une affiche en html seul ou en binome que l'on imprimera ensuite
- format A3
- couleurs?

Quelques recettes Css:

- Clippy: http://bennettfeely.com/clippy/

- Filtres CSS: https://www.cssfiltergenerator.com/

- Générateur de css : https://cssgenerator.org/

first demo

Références

Présentation des outils web to print (Luus): Pourquoi utiliser des outils Web pour faire du print ?

WCC: CSS print

PAGED.JS Documentation paged.js

A propos des notes: Notes About Notes

Web2print 2021-2022 : Différence entre versions

Version actuelle datée du 22 janvier 2024 à 13:46

Sommaire

Archives

Sessions

17 décembre

10 décembre

Ether2html - Version avec imposition

19 novembre

12 novembre

29 octobre

Recette pour parser du html avec PHP

15 octobre

Gutenberg to HTML

24 septembre

Affiche html2print

Quelques recettes Css:

Références

Menu de navigation

Outils personnels

Espaces de noms

Variantes

Affichages

Plus

Rechercher

Navigation

Outils

@@ Ligne 1 : / Ligne 1 : @@
+= Archives  =
+[[Ma nouvelle page]]
+[[Amandine Alonso]]
+[[Utilisateur:Theophilegm|Théophile Gervreau-Mercier]]
+[[Elodie Goldberg Jacquemain]]
+[[Audrey-2021-2022]]
+[[Olivia Marly]]
+[[Celia Sallet]]
+[[Reading Lybers]]
+[[Antoin MP]]
 = Sessions =
 PAD du cours: https://pads.erg.be/p/dnum-web2print
+==17 décembre==
+[http://osp.kitchen/tools/pdfutils/ PDF utils] :  un outils conçu par [http://osp.kitchen/ OSP] pour convertir vos pdf en CMYK
+Recherche de reliure: reférence: [https://www.design-research.be/materiautheque/sukrii.html Sukrii Kural]
+==10 décembre==
+Vous pouvez utilisez le serveur etherpad ici: https://pad.lvh2.com pour éviter les problèmes de requêtes.
+===Ether2html - Version avec imposition===
+Télécharger le fichier "imposition.js" ici: https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/-/raw/master/imposition_quentin_juhel/js/imposition.js
+Placer le fichier dans le même répertoire que le fichier ether2html.html
+<syntaxhighlight lang="html">
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>ether2html</title>
+    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
+    <!--link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"-->
+    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
+    <link href="https://pad.lvh2.com/p/ether2html_css/export/txt" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
+    <script type="text/javascript" charset="utf-8">
+        let $padContent;
+        function insertData(data) {
+            console.log(data);
+            let converter = new showdown.Converter();
+            let html = converter.makeHtml(data);
+            $padContent.innerHTML = html;
+        }
+        function insertPagedJS(){
+            let $script = document.createElement('script');
+            $script.setAttribute('src', 'paged.polyfill.js');
+            $script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
+            window.PagedConfig = {auto: false};
+            $script.onload = (e) => {
+                let $impoScript = document.createElement('script');
+                $impoScript.setAttribute('src', 'imposition.js');
+                //ACTIVER LA LIGNE SUIVANTE POUR LANCER L'IMPOSITION
+                document.querySelector('head').appendChild($impoScript);
+                setTimeout(() => {
+                    window.PagedPolyfill.preview();
+                }, 1000);
+            };
+            document.querySelector('head').appendChild($script);
+        }
+        window.addEventListener('DOMContentLoaded', function(){
+            $padContent = document.getElementById('pad-content');
+            let request = new URL($padContent.getAttribute('data-md'));
+            fetch(request).then(response => response.text()).then(data => {
+                console.log(data);
+                insertData(data);
+                insertPagedJS();
+            });
+        });
+    </script>
+    <!-- This is the default stylesheet of paged.js -->
+    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
+</head>
+<body>
+    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
+    <div data-md="https://pad.lvh2.com/p/ether2html_content/export/txt" id="pad-content"></div>
+</body>
+</html>
+</syntaxhighlight>
 ==19 novembre==
-Voici la nouvelle version purger de jquery d'ether2html, reconverti en Vanilla du coup.
+Voici <strong>la nouvelle version</strong> purger de jquery d'<strong>ether2html</strong>, reconverti en Vanilla du coup.
 <syntaxhighlight lang="html">
@@ Ligne 65 : / Ligne 170 : @@
 </syntaxhighlight>
-Aussi, il semble belle et bien que le <code>page-break-after</code> marche, du moins sur la première page:
+===>  Aussi, il semble belle et bien que le <code>page-break-after</code> marche, du moins sur la première page:
 dans le pad texte, après l'élement titre:
@@ Ligne 246 : / Ligne 353 : @@
 </pre>
-Quelques recettes Css:
+== Affiche html2print ==
+* - interroger une fonction meta du web ou un élément propre à l’html ou au java script
+* - produire une affiche en html seul ou en binome que l'on imprimera ensuite
+* - format A3
+* - couleurs?
+==Quelques recettes Css:==
 - Clippy: http://bennettfeely.com/clippy/
@@ Ligne 256 : / Ligne 370 : @@
 [http://pratiquesnumeriques.be/web2print/first-demo.zip first demo]
-Références [https://www.w3.org/TR/css-page-3/ CSS print]
+==Références==
-[https://www.pagedjs.org/documentation/05-designing-for-print/ Documentation paged.js]
+Présentation des outils web to print (Luus): [http://www.luuse.io/fig-ref/ Pourquoi utiliser des outils Web pour faire du print ?]
+WCC: [https://www.w3.org/TR/css-page-3/ CSS print]
+PAGED.JS [https://www.pagedjs.org/documentation/05-designing-for-print/ Documentation paged.js]
+A propos des notes: [https://www.pagedjs.org/posts/2020-05-13-notes-about-notes/ Notes About Notes]