Web2print 2021-2022 : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎15 octobre)
(→‎Version avec imposition)
 
(43 révisions intermédiaires par 10 utilisateurs non affichées)
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 =
 
= 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 <strong>la nouvelle version</strong> purger de jquery d'<strong>ether2html</strong>, reconverti en Vanilla du coup.
 +
 +
<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://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>
 +
</syntaxhighlight>
 +
 +
 +
 +
===>  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:
 +
<syntaxhighlight lang="html">
 +
<div class="pagebreak"></div>
 +
</syntaxhighlight>
 +
 +
Et dans le Css:
 +
<syntaxhighlight lang="css">
 +
.pagebreak {
 +
          break-before: left;
 +
    }
 +
</syntaxhighlight>
 +
 +
Il me semble qu'il faille crée quatre type de div qui font certain <code>page-break</code> et les utiliser en fonction des besoins.
 +
 +
==12 novembre==
 +
'''ATTENTION! Nouvelle version du ether2html!!!'''
 +
<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://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>
 +
 +
</syntaxhighlight>
 +
 +
== 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
 +
 +
<syntaxhighlight lang="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;
 +
}</syntaxhighlight>
 +
 +
== Recette pour parser du html avec PHP ==
 +
<syntaxhighlight lang="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());
 +
 +
   
 +
 +
?>
 +
</syntaxhighlight>
 +
== 15 octobre ==
 +
===Gutenberg to HTML===
 +
 +
 +
* Télécharger l'outil [http://osp.kitchen/tools/ether2html/ 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 [https://www.gutenberg.org/ 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 [https://www.gutenberg.org/ebooks/bookshelf/313 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 <!-- CHANGE THE URL OF YOUR CSS PAD BELOW --> 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 <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW --> 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 ==
 
== 24 septembre ==
  
Ligne 13 : Ligne 353 :
 
</pre>
 
</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/
 
- Clippy: http://bennettfeely.com/clippy/
Ligne 23 : Ligne 370 :
 
[http://pratiquesnumeriques.be/web2print/first-demo.zip first demo]
 
[http://pratiquesnumeriques.be/web2print/first-demo.zip first demo]
  
−
Référence [https://www.w3.org/TR/css-page-3/ CSS print]
+
==Références==
  
−
== 15 octobre ==
+
Présentation des outils web to print (Luus): [http://www.luuse.io/fig-ref/ Pourquoi utiliser des outils Web pour faire du print ?]
−
===Gutenberg to HTML===
+
 
 +
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]
  
−
* Télécharger l'outil [http://osp.kitchen/tools/ether2html/ ether2html] conçu par Open source publishing.
+
A propos des notes: [https://www.pagedjs.org/posts/2020-05-13-notes-about-notes/ Notes About Notes]
−
* Décompressez le dossier et déposez-le dossier à un endroit adéquat de votre ordinateur.
 
−
* Connectez vous à la bibliothèque libre de droit [https://www.gutenberg.org/ 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.
 
−
* Exemple: https://www.gutenberg.org/ebooks/26812
 
−
* télécharger la page 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 <!-- CHANGE THE URL OF YOUR CSS PAD BELOW --> 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 <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW --> 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.
 

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

Archives

Ma nouvelle page

Amandine Alonso

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

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

Récupérée de « https://designnumerique.be/w/index.php?title=Web2print_2021-2022&oldid=4477 »