bachir
/
ola5doc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title></title>
  <style type="text/css">code{white-space: pre;}</style>
  <style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
  </style>
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="bower_components/lightbox2/dist/css/lightbox.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id='header'>
<h1 id="ola4-documentation-osp-html2print">OLA#4 Documentation : OSP html2print</h1>
<p><nav id='menu'></p>
<ul>
<li><a href="#00-ola">00-ola</a></li>
<li><a href="#alex">alex</a></li>
<li><a href="#bachir">bachir</a></li>
<li><a href="#gabriel">gabriel</a></li>
<li><a href="#kenji">kenji</a></li>
<li><a href="#Kenji-Elie">Kenji-Elie</a></li>
<li><a href="#kevin">kevin</a></li>
<li><a href="#Lucile">Lucile</a></li>
<li><a href="#nicolas">nicolas</a></li>
<li><a href="#PierreYves">PierreYves</a></li>
<li><a href="#Sarah">Sarah</a></li>
<li><a href="#timothee_goguely">timothee_goguely</a></li>
<li><a href="#pad">Pad</a></li>
<li><a href="#cookbook">CookBook</a></li>
</ul>
<p></nav></p>
</header>
<section id='main'>
<div id='00-ola' class='user'>
<section class='content'>
<h1 id="le-workshop">Le workshop</h1>
<p>Les technologies du web offrent un environnement de publication ouvert et décentralisé. Les documents web sont ainsi éditables en différents endroits et temporalités par une variété de personnes et d'outils, rompant avec la logique linéaire de l'ère Gutenberg.</p>
<p>Dans cet espace, la notion de flux est centrale: le flux des données, allant de la conversion de documents &quot;bruts&quot; vers la production de multiples formats; le flux des formes produites, conditionné par la struture du HTML et la logique de «cascade» des feuilles de style; ou encore le flux des personnes et les nouveaux moyens de collaboration qui leurs sont offerts par le net.</p>
<p>Si cet espace offre de nouvelles possibilités, cela ne va pas sans poser de questions. Comment penser un design alors sans le subordonner au contenu? Comment publier sur différents formats sans nier la spécificité des différents supports? Comment tester et combiner différentes pistes de mise en page? Comment se partager les taches tout en permettant à tous d'avoir une vue d'ensemble sur l'objet produit?</p>
<p>Nous tenterons ensemble d'imaginer quelques réponses possibles à ces questions en imaginant et développant, à l'aide notamment de HTML, CSS et Javascript, des prototypes pour produire des objets imprimés. Venez simplement avec un ordinateur portable et un navigateur web à jour comme firefox](https://www.mozilla.org/fr/firefox/new/)) et, si possible, avec un éditeur de code comme atom](https://atom.io/))</p>
<p>Questions sous-jacentes</p>
<p>modèles de production non-linéaires (ex. book sprint via ethertoff)<br />
comment penser la spécificité des différents supports de publication (éviter le plus petit dénominateur commun pour le design)<br />
penser et tester différentes versions (branches)</p>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='00-ola' href='images/00-ola-00.JPG'><img src="thumbs/00-ola-00.JPG" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-01.JPG'><img src="thumbs/00-ola-01.JPG" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-02.JPG'><img src="thumbs/00-ola-02.JPG" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-03.jpg'><img src="thumbs/00-ola-03.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-04.jpg'><img src="thumbs/00-ola-04.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-05.jpg'><img src="thumbs/00-ola-05.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-06.jpg'><img src="thumbs/00-ola-06.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-07.jpg'><img src="thumbs/00-ola-07.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-08.jpg'><img src="thumbs/00-ola-08.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-09.jpg'><img src="thumbs/00-ola-09.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-10.jpg'><img src="thumbs/00-ola-10.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-11.jpg'><img src="thumbs/00-ola-11.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-12.jpg'><img src="thumbs/00-ola-12.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-13.jpg'><img src="thumbs/00-ola-13.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-14.jpg'><img src="thumbs/00-ola-14.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-15.jpg'><img src="thumbs/00-ola-15.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-16.jpg'><img src="thumbs/00-ola-16.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-17.jpg'><img src="thumbs/00-ola-17.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-18.jpg'><img src="thumbs/00-ola-18.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-19.jpg'><img src="thumbs/00-ola-19.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-20.jpg'><img src="thumbs/00-ola-20.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-21.jpg'><img src="thumbs/00-ola-21.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-22.jpg'><img src="thumbs/00-ola-22.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-23.jpg'><img src="thumbs/00-ola-23.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-24.jpg'><img src="thumbs/00-ola-24.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-25.jpg'><img src="thumbs/00-ola-25.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-26.jpg'><img src="thumbs/00-ola-26.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-27.jpg'><img src="thumbs/00-ola-27.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-28.jpg'><img src="thumbs/00-ola-28.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-29.jpg'><img src="thumbs/00-ola-29.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-30.jpg'><img src="thumbs/00-ola-30.jpg" alt="" /></a></li>
<li><a data-lightbox='00-ola' href='images/00-ola-31.jpg'><img src="thumbs/00-ola-31.jpg" alt="" /></a></li>
</ul>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='alex' class='user'>
<section class='content'>
<h1 id="alex">Alex</h1>
<h2 id="mettre-en-page-un-médor-wip">Mettre en page un Médor (WIP)</h2>
<p><a data-lightbox='alex' href='images/alex-02.png'><img src="thumbs/alex-02.png" alt="" /></a></p>
<h2 id="grid-system-en-css-wip">Grid system en CSS (WIP)</h2>
<p>Utiliser css pour dessiner une grille et utiliser la fonctionalité `display: grid` de css.</p>
<p><a data-lightbox='alex' href='images/alex-00.png'><img src="thumbs/alex-00.png" alt="" /></a></p>
<p>https://jsfiddle.net/zw9c7owa/17/</p>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='alex' href='images/alex-01.pdf'><embed src="thumbs/alex-01.pdf" /></a></li>
</ul>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='bachir' class='user'>
<section class='content'>
<h1 id="la-convivialité-new-generation">La Convivialité New Generation</h1>
<h2 id="bachir-soussi-chiadmi">Bachir Soussi Chiadmi</h2>
<p><a data-lightbox='bachir' href='images/bachir-00.jpg'><img src="thumbs/bachir-00.jpg" alt="" /></a></p>
<p>Projet de Transposition de &quot;La Convivialité&quot;, Ivan Illich, en 2017 et à propos des espaces numériques</p>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='bachir' href='images/bachir-01.png'><img src="thumbs/bachir-01.png" alt="" /></a></li>
<li><a data-lightbox='bachir' href='images/bachir-02.png'><img src="thumbs/bachir-02.png" alt="" /></a></li>
<li><a data-lightbox='bachir' href='images/bachir-03.png'><img src="thumbs/bachir-03.png" alt="" /></a></li>
<li><a data-lightbox='bachir' href='images/bachir-04.png'><img src="thumbs/bachir-04.png" alt="" /></a></li>
<li><a data-lightbox='bachir' href='images/bachir-05.png'><img src="thumbs/bachir-05.png" alt="" /></a></li>
<li><a data-lightbox='bachir' href='images/bachir-06.png'><img src="thumbs/bachir-06.png" alt="" /></a></li>
</ul>
</section>
<section class='sources'>
<ul>
<li><a href="sources/conv-ng.zip">conv-ng.zip</a></li>
</ul>
</section>
</div>
<div class="pagebreak">
</div>
<div id='gabriel' class='user'>
<section class='content'>
<h1 id="readme.intern">README.intern</h1>
<h2 id="gabriel-vaury">Gabriel Vaury</h2>
<p>Premier test d'un rapport de stage sous forme de &quot;README&quot; revisité et commenté</p>
<p><a data-lightbox='gabriel' href='images/gabriel-06.png'><img src="thumbs/gabriel-06.png" alt="" /></a></p>
<p>Matière première</p>
<p><a data-lightbox='gabriel' href='images/gabriel-01.png'><img src="thumbs/gabriel-01.png" alt="" /></a></p>
<ul>
<li><strong>-3 flux de texte</strong> :
<ul>
<li>-<em>log</em> initial sous forme de carnet de bord</li>
<li>-<em>commentaires</em> post-rédaction amenant un recul et un 'décryptage' des activités faites</li>
<li>-<em>commandes</em> apprises recontextualisées</li>
</ul></li>
</ul>
<ul>
<li><strong>-2 flux d'images</strong> :
<ul>
<li>-Screenshots pris pendant le stage</li>
<li>-Photos prises &quot;en dehors&quot; du stage</li>
</ul></li>
</ul>
<p>Objectif</p>
<ul>
<li>-Explorer la perméabilité entre la hiérarchie du contenu et du code et comment celle-ci peut nourrir visuellement la mise en page du rapport</li>
<li>-Mettre en relation les rapports fait <em>à chaud</em> lors du stage et les prises de conscience <em>à froid</em></li>
<li>-[Optionel] Réaliser une version print et une version web de ce rapport</li>
</ul>
<p>To Do</p>
<ul>
<li>- <del>Intégrer un système de &quot;CMS&quot; pour appeler le contenu dans la structure HTML</del></li>
<li>- <del>Mise en forme gérée par Markdown ou autre (?)</del>
<ul>
<li>Problème reglé avec <a href="https://figureslibres.io/gogs/bachir/gitbook-html2print">BeautifulSoup et pypandoc</a></li>
</ul></li>
</ul>
<ul>
<li>- Gérer les listes en tant que footnotes pour les extraire du flux et les imbriquer dans le flux principal</li>
</ul>
<p>Avancement</p>
<p>Nettoyage et Markdownisation du texte initial</p>
<p><a data-lightbox='gabriel' href='images/gabriel-02.png'><img src="thumbs/gabriel-02.png" alt="" /></a></p>
<p>Premier test avec pandoc seul</p>
<p><a data-lightbox='gabriel' href='images/gabriel-03.png'><img src="thumbs/gabriel-03.png" alt="" /></a></p>
<p><a data-lightbox='gabriel' href='images/gabriel-04.png'><img src="thumbs/gabriel-04.png" alt="" /></a></p>
<p>Utilisation du script</p>
<p><a data-lightbox='gabriel' href='images/gabriel-07.png'><img src="thumbs/gabriel-07.png" alt="" /></a></p>
<p><a data-lightbox='gabriel' href='images/gabriel-05.png'><img src="thumbs/gabriel-05.png" alt="" /></a></p>
<p>Se pose maintenant le problèmes des footnotes</p>
<p><a data-lightbox='gabriel' href='images/gabriel-00.png'><img src="thumbs/gabriel-00.png" alt="" /></a></p>
<p>Il reste encore beaucoup de travail mais la structure est la, il me reste les vacances pour finir le contenu (les commentaires) et ajouter les images</p>
</section>
<section class='images'>
</section>
<section class='sources'>
<ul>
<li><a href="sources/sources.zip">sources.zip</a></li>
</ul>
</section>
</div>
<div class="pagebreak">
</div>
<div id='kenji' class='user'>
<section class='content'>
<h1 id="magic-system">magic system</h1>
<h3 id="kenji-luyeye">Kenji Luyeye</h3>
<p>Notre projet (w/ Elie Partouche) consiste à générer une édition qui reprend une grille de Bande Dessinée dans laquelle figurent des formes aléatoires produites par Processing.</p>
<p>Nous partageons les tâches de la façon suivante : Elie s'occupe de mettre au point le sketch sur p5.js et il gère l'export des images, Kenji conçoit la mise en page dynamique.</p>
<h2 id="samedi">SAMEDI</h2>
<p>Je commence par le design des gabarits en croquis. Alexandre me montre les propriété grid sur css, qui convienne mieux pour ce projet que flexbox.</p>
<p>[alt text](images/2.png&quot;&quot;)</p>
<p>Je me familiarise avec grid et transpose mes croquis en HTML/CSS.<br />
Le CSS est beaucoup trop long, Alexandre me suggère donc d'insérer du style directement dans le HTML.<br />
Après m'être approprié le système de grid, je décide d'injecter de l'aléatoire car je constate que lorsque j'organise ma grille de façon illogique des formes amusantes se créent.</p>
<p>La solution la plus évidente serait d'utiliser javascript et de créer des boucles. Nous essayerons demain.</p>
<h2 id="dimanche">DIMANCHE</h2>
<p>Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire.</p>
</section>
<section class='images'>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='Kenji-Elie' class='user'>
<section class='content'>
<h1 id="grid">Grid</h1>
<h3 id="kenji-luyeye-1">Kenji Luyeye</h3>
<p>Notre projet (w/ Elie Partouche) consiste à générer une édition qui reprend une grille de Bande Dessinée dans laquelle figurent des formes aléatoires produites par Processing.</p>
<p>Nous partageons les tâches de la façon suivante : Elie s'occupe de mettre au point le sketch sur p5.js et il gère l'export des images, Kenji conçoit la mise en page dynamique.</p>
<h2 id="samedi-1">SAMEDI</h2>
<p>Je commence par le design des gabarits en croquis. Alexandre me montre les propriété grid sur css, qui convienne mieux pour ce projet que flexbox.</p>
<p>[alt text](images/2.png&quot;&quot;)</p>
<p>Je me familiarise avec grid et transpose mes croquis en HTML/CSS.<br />
Le CSS est beaucoup trop long, Alexandre me suggère donc d'insérer du style directement dans le HTML.<br />
Après m'être approprié le système de grid, je décide d'injecter de l'aléatoire car je constate que lorsque j'organise ma grille de façon illogique des formes amusantes se créent.</p>
<p>La solution la plus évidente serait d'utiliser javascript et de créer des boucles. Nous essayerons demain.</p>
<h2 id="dimanche-1">DIMANCHE</h2>
<p>Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire.</p>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-01.png'><img src="thumbs/Kenji-Elie-01.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-02.png'><img src="thumbs/Kenji-Elie-02.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-03.png'><img src="thumbs/Kenji-Elie-03.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-04.png'><img src="thumbs/Kenji-Elie-04.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-05.png'><img src="thumbs/Kenji-Elie-05.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-06.png'><img src="thumbs/Kenji-Elie-06.png" alt="" /></a></li>
<li><a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-07.png'><img src="thumbs/Kenji-Elie-07.png" alt="" /></a></li>
</ul>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='kevin' class='user'>
<section class='content'>
<h1 id="le-nom-de-mon-projet">Le nom de mon projet</h1>
<h2 id="kévin-tessier">Kévin Tessier</h2>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='kevin' href='images/kevin-00.png'><img src="thumbs/kevin-00.png" alt="" /></a></li>
<li><a data-lightbox='kevin' href='images/kevin-01.png'><img src="thumbs/kevin-01.png" alt="" /></a></li>
<li><a data-lightbox='kevin' href='images/kevin-02.png'><img src="thumbs/kevin-02.png" alt="" /></a></li>
<li><a data-lightbox='kevin' href='images/kevin-03.png'><img src="thumbs/kevin-03.png" alt="" /></a></li>
<li><a data-lightbox='kevin' href='images/kevin-04.png'><img src="thumbs/kevin-04.png" alt="" /></a></li>
<li><a data-lightbox='kevin' href='images/kevin-05.png'><img src="thumbs/kevin-05.png" alt="" /></a></li>
</ul>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='Lucile' class='user'>
<section class='content'>
<h1 id="reverse">Reverse</h1>
<h2 id="lucile-béal-objectif-créer-un-outil-qui-permette-dimprimer-une-création-web-pour-la-référencer-dans-une-édition.-dans-lidéal-la-mise-en-page-serait-automatique.-question-comment-transcrire-lorganisation-dun-site-dans-la-mise-en-page-dun-livre-liensmenusles-chemins-possibles-etc.-format-réflection-partir-du-constat-que-le-web-ne-sert-plus-quà-référencer-des-savoirs-des-activités-des-organisations-de-notre-monde-physique.-il-est-une-source-de-création-et-de-savoirs-serait-il-utileenrichissant-de-référencer-physiquement-ces-créations-sur-papier-web-et-print-sont-des-supports-de-savoirs-physiquevirtuels-mais-peuvent-aussi-être-considérés-comme-des-outils-de-création-qui-se-complètent.-objet-de-création-web-mis-en-page-clickclickclick-par-le-studio-moniker">Lucile Béal<br />
Objectif: créer un outil qui permette d'imprimer une création web, pour la référencer dans une édition. Dans l'idéal la mise en page serait automatique.<br />
Question: Comment transcrire l'organisation d'un site dans la mise en page d'un livre? Liens/menus/les chemins possibles etc. Format?<br />
Réflection: partir du constat que le web ne sert plus qu'à référencer des savoirs, des activités, des organisations de notre monde physique.<br />
Il est une source de création et de savoirs: serait-il utile/enrichissant de référencer physiquement ces créations sur papier?<br />
Web et print sont des supports de savoirs (physique/virtuels), mais peuvent aussi être considérés comme des outils de création qui se complètent.<br />
Objet de création web mis en page: &quot;ClickClickClick&quot; par le Studio Moniker</h2>
<p><img src="images/tutorial-getting-started-krita_part1_14_net.jpg" alt="" /></p>
<p>Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso<br />
puis ajouter cette ligne:</p>
<pre><code>!images/nomdemonimage.jpeg!</code></pre>
<p>Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.</p>
</section>
<section class='images'>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='nicolas' class='user'>
<section class='content'>
<h1 id="ctrlptosurvive">CtrlPtoSurvive</h1>
<h2 id="nicolas-tilly">Nicolas Tilly</h2>
<p>Inspiré du &quot;Whole Earth Catalog&quot; de Steward Brand, le site est un catalogue d'outils de survie qu'il est possible d'imprimer au format A3 à l'aide du bouton dans la page.<br />
CtrlPtoSurvive fonctionne comme un instrument d’évaluation et d’accès. À l’aide de ce catalogue, l’utilisateur saura mieux évaluer ce qu’il est nécessaire d’acquérir en cas de fin du monde imminente.</p>
<p>Imprimer un format différent graphiquement de la page Web.<br />
Gérer une mise en page Web et une mise en page print (A3).<br />
Visualiser dans le navigateur la mise en page print (emulate css media).</p>
<h1 id="recherches-graphiques-du-whole-earth-catalog">Recherches graphiques du Whole Earth Catalog:</h1>
<p><a data-lightbox='nicolas' href='images/nicolas-12.png'><img src="thumbs/nicolas-12.png" alt="" /></a></p>
<h1 id="concept-de-mise-en-page-web-qui-simprime-en-poster-a3">Concept de mise en page Web qui s'imprime en poster A3 :</h1>
<p><a data-lightbox='nicolas' href='images/nicolas-08.jpg'><img src="thumbs/nicolas-08.jpg" alt="" /></a></p>
<h1 id="work-in-progress-du-projet">Work in progress du projet :</h1>
<p>Emulate CSS Media : prévisualisation de la feuille de style pour le print dans Chrome.</p>
<p><a data-lightbox='nicolas' href='images/nicolas-07.png'><img src="thumbs/nicolas-07.png" alt="" /></a></p>
<h1 id="construction-du-poster-a3">Construction du poster A3:</h1>
<p><a data-lightbox='nicolas' href='images/nicolas-03.png'><img src="thumbs/nicolas-03.png" alt="" /></a></p>
<h1 id="construction-de-la-page-web">Construction de la page Web:</h1>
<p><a data-lightbox='nicolas' href='images/nicolas-11.png'><img src="thumbs/nicolas-11.png" alt="" /></a></p>
<p>J'ai ajouté un bouton pour pouvoir imprimer la page Web :</p>
<pre><code>&lt;button onclick=&quot;onimprime()&quot;&gt;vite ! j&#39;imprime le poster !&lt;/button&gt;

    &lt;script&gt;
        function onimprime() {
            window.print();
        }

    &lt;/script&gt;</code></pre>
<p>La mise en page est basée sur <a href="http://cssreference.io/flexbox/">flexbox</a></p>
<p><a data-lightbox='nicolas' href='images/nicolas-09.png'><img src="thumbs/nicolas-09.png" alt="" /></a><br />
<a data-lightbox='nicolas' href='images/nicolas-10.png'><img src="thumbs/nicolas-10.png" alt="" /></a></p>
<h1 id="rendus-du-poster-a3-à-partir-de-la-page-web">Rendus du poster A3 à partir de la page Web:</h1>
<p>Grâce à :</p>
<pre><code>

@media print {
    button {
        display: none;
    }
    .logo {
        left: 10mm;
        top: 5mm;
        margin-left: 0;
        width: 100px;
        height: 100px;
        /*        background: #000000;*/
    }
    img {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        width: 90%;
    }
    ...
}</code></pre>
<p>j'ai modifié la mise en page de la page Web pour l'adapter au format cible A3.</p>
<p><a data-lightbox='nicolas' href='images/nicolas-04.png'><img src="thumbs/nicolas-04.png" alt="" /></a><br />
<a data-lightbox='nicolas' href='images/nicolas-05.png'><img src="thumbs/nicolas-05.png" alt="" /></a><br />
<a data-lightbox='nicolas' href='images/nicolas-06.png'><img src="thumbs/nicolas-06.png" alt="" /></a><br />
<a data-lightbox='nicolas' href='images/nicolas-01.png'><img src="thumbs/nicolas-01.png" alt="" /></a><br />
<a data-lightbox='nicolas' href='images/nicolas-02.png'><img src="thumbs/nicolas-02.png" alt="" /></a></p>
<h1 id="html2print">html2print:</h1>
<p><a data-lightbox='nicolas' href='images/nicolas-00.jpg'><img src="thumbs/nicolas-00.jpg" alt="" /></a></p>
</section>
<section class='images'>
</section>
<section class='sources'>
<ul>
<li><a href="sources/CtrlPtoSurvive.pdf">CtrlPtoSurvive.pdf</a></li>
<li><a href="sources/nicolastilly.zip">nicolastilly.zip</a></li>
</ul>
</section>
</div>
<div class="pagebreak">
</div>
<div id='PierreYves' class='user'>
<section class='content'>
<h1 id="update">update</h1>
<h2 id="pierre-yves-fave">Pierre-Yves Fave</h2>
<p>J'ai fait quelques tests.</p>
<p>J'ai été initié au rudiments des css.<br />
C'est bien agréable d'apprendre comme ça.</p>
<p>Mon but était de récuperer un flux rss issu de wordpress,<br />
et de comprendre comment mettre en page<br />
avec des techniques actuelles.<br />
L'imprimer ou l'extraire pour pouvoir le manipuler,<br />
et continuer à intervenir dessus.</p>
<p>Bachir a programmé une moulinette, devant moi.<br />
et c'est comme ça que je comprends le mieux le code,<br />
dans le temps de son écriture.<br />
Il n'y a rien de tel que le direct.</p>
<p>Sarah Alex et les autres , merci pour vos conseils.<br />
Il me reste des trucs a comprendre,<br />
mais là, je bloquais depuis un bout de temps sur ces trucs.<br />
en div, j'suis con.</p>
</section>
<section class='images'>
<ul>
<li><a data-lightbox='PierreYves' href='images/PierreYves-00.jpg'><img src="thumbs/PierreYves-00.jpg" alt="" /></a></li>
<li><a data-lightbox='PierreYves' href='images/PierreYves-01.jpg'><img src="thumbs/PierreYves-01.jpg" alt="" /></a></li>
<li><a data-lightbox='PierreYves' href='images/PierreYves-02.jpg'><img src="thumbs/PierreYves-02.jpg" alt="" /></a></li>
<li><a data-lightbox='PierreYves' href='images/PierreYves-03.jpg'><img src="thumbs/PierreYves-03.jpg" alt="" /></a></li>
<li><a data-lightbox='PierreYves' href='images/PierreYves-04.jpg'><img src="thumbs/PierreYves-04.jpg" alt="" /></a></li>
</ul>
</section>
<section class='sources'>
<ul>
<li><a href="sources/Mon_poster.pdf">Mon_poster.pdf</a></li>
<li><a href="sources/postsrecup_1.zip">postsrecup_1.zip</a></li>
<li><a href="sources/postsrecup.zip">postsrecup.zip</a></li>
<li><a href="sources/pyRss2html-starter.zip">pyRss2html-starter.zip</a></li>
<li><a href="sources/python-rss2html.zip">python-rss2html.zip</a></li>
</ul>
</section>
</div>
<div class="pagebreak">
</div>
<div id='Sarah' class='user'>
<section class='content'>
<h1 id="le-workshop-1">Le workshop</h1>
<p>Les technologies du web offrent un environnement de publication ouvert et décentralisé. Les documents web sont ainsi éditables en différents endroits et temporalités par une variété de personnes et d'outils, rompant avec la logique linéaire de l'ère Gutenberg.</p>
<p>Dans cet espace, la notion de flux est centrale: le flux des données, allant de la conversion de documents &quot;bruts&quot; vers la production de multiples formats; le flux des formes produites, conditionné par la struture du HTML et la logique de «cascade» des feuilles de style; ou encore le flux des personnes et les nouveaux moyens de collaboration qui leurs sont offerts par le net.</p>
<p>Si cet espace offre de nouvelles possibilités, cela ne va pas sans poser de questions. Comment penser un design alors sans le subordonner au contenu? Comment publier sur différents formats sans nier la spécificité des différents supports? Comment tester et combiner différentes pistes de mise en page? Comment se partager les taches tout en permettant à tous d'avoir une vue d'ensemble sur l'objet produit?</p>
<p>Nous tenterons ensemble d'imaginer quelques réponses possibles à ces questions en imaginant et développant, à l'aide notamment de HTML, CSS et Javascript, des prototypes pour produire des objets imprimés. Venez simplement avec un ordinateur portable et un navigateur web à jour comme firefox](https://www.mozilla.org/fr/firefox/new/)) et, si possible, avec un éditeur de code comme atom](https://atom.io/))</p>
<p>Questions sous-jacentes</p>
<p>modèles de production non-linéaires (ex. book sprint via ethertoff)<br />
comment penser la spécificité des différents supports de publication (éviter le plus petit dénominateur commun pour le design)<br />
penser et tester différentes versions (branches)</p>
</section>
<section class='images'>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
<div id='timothee_goguely' class='user'>
<section class='content'>
<h1 id="arena2print">arena2print</h1>
<h2 id="timothée-goguely">Timothée Goguely</h2>
<h3 id="section">24.06.17</h3>
<p>The idea of this project is to connect <a href="https://dev.are.na/documentation">are.na API</a> with <a href="http://osp.kitchen/tools/html2print/">html2print</a> to be able to print any Arena channel – like <a href="https://www.are.na/csaba-osvath/ivan-illich">this one about Ivan Illich</a> for example – at any format.</p>
<p>Create a new Rails app called &quot;arena2print&quot;.<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-00.png'><img src="thumbs/timothee_goguely-00.png" alt="" /></a></p>
<p>Install the Arena Ruby interface <a href="https://github.com/aredotna/arena-rb">arena-rb</a> into my app.<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-01.png'><img src="thumbs/timothee_goguely-01.png" alt="" /></a></p>
<p>Implement <a href="https://dev.are.na/documentation/authentication">authentication</a><br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-02.png'><img src="thumbs/timothee_goguely-02.png" alt="" /></a></p>
<p><em>lunch</em></p>
<p>… Moment of doubt, wondering about technical difficulty…<br />
Why not develop a Chrome extension instead of a webapp?<br />
A simple <code>arena2print</code> button may be the most effective solution.</p>
<p>Rough pseudo-code of the extension script:</p>
<ol>
<li>parse HTML to select all blocks</li>
<li>extract and store all block’s content</li>
<li>create a new HTML page from this content</li>
<li>add custom print CSS</li>
<li>launch browser print modal window!</li>
</ol>
<p>Need to read and watch some tutorials to get an idea about the technical difficulty…<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-03.png'><img src="thumbs/timothee_goguely-03.png" alt="" /></a></p>
<p>Ok, let’s try <a href="https://robots.thoughtbot.com/how-to-make-a-chrome-extension">this one</a></p>
<p>Yeah, I just write my first Chrome Extension!<br />
Right now, it’s only an dumb <code>alert()</code> script, but let’s continue…<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-04.png'><img src="thumbs/timothee_goguely-04.png" alt="" /></a></p>
<p>…</p>
<p>All right, after 2 hours of try and fail, I’m now able to get channel’s id so I can get from Arena API a JSON with all channel’s contents. Now I need to store the data that interests me and them to build an HTML template.<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-05.png'><img src="thumbs/timothee_goguely-05.png" alt="" /></a></p>
<p>…</p>
<h3 id="section-1">25.06.17</h3>
<p>Yesterday, I have succeeded in displaying all the block’s content of a channel on pages.<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-06.png'><img src="thumbs/timothee_goguely-06.png" alt="" /></a></p>
<p>Here is what I need to do today:</p>
<ul>
<li>implement conditionnal statement for detecting and displaying images, attachments and so on.</li>
<li>fixing multi-paging issue for blocks containing long text: the easiest solution would be to have only I long page containing all the blocks and let the browser splitting it on different pages on print with <code>page-break-before: always</code> on titles.</li>
<li>displaying the page on top of Arena channel, not instead of it, so the user doesn’t lose the context.</li>
<li>crafting CSS to improve the layout, hierarchy and typography</li>
<li>convert datetime into a human readable format</li>
<li>fixing Chrome Extension behaviour: it needs to be triggered only if the active tab url is an Arena channel url and when the user is clicking on the extension button.</li>
</ul>
<p>Here we go!</p>
<p>…</p>
<p><em>lunch</em></p>
<ul>
<li>Display umages and attachments &gt; done</li>
<li>Multi-page blocks &gt; done</li>
<li>Layout &gt; in progress<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-07.png'><img src="thumbs/timothee_goguely-07.png" alt="" /></a></li>
</ul>
<p>…</p>
<p>Well, it’s good enough now, I guess I can stop here for today. Maybe just refactoring some code. And I just realized that I worked in A5 instead of A4 so I needed to print my PDF at 141%, but nevermind… Here is the result fo these two days of work:<br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-08.png'><img src="thumbs/timothee_goguely-08.png" alt="" /></a><br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-09.png'><img src="thumbs/timothee_goguely-09.png" alt="" /></a><br />
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-10.png'><img src="thumbs/timothee_goguely-10.png" alt="" /></a></p>
<p>And don’t know yet if I will continue to develop this little project (there’s still a lot of things to fix) but I’m glad to have started to understand how to build a Chrome Extension – it was simpler than I thought.</p>
<p>So thank you OLA, OSP &amp; Synesthésie for organizing this workshop: a lot of very interesting and inspiring insights, references and approaches. I definitely need to read Ivan Illich’s book about conviviality.<br />
Keep up the good work!</p>
<p>PS: Ok, refactoring is done! I also commented my code. The only crucial thing I didn’t achieve is to trig the extension not on page load but when the user is clicking on the extension’s button. I will try to figure out how to do it during the next week, and it will be an <em>effective</em> and <em>useful</em> Chrome Extension!</p>
</section>
<section class='images'>
</section>
<section class='sources'>
<ul>
<li><a href="sources/arena2print.pdf">arena2print.pdf</a></li>
<li><a href="sources/arena2print.zip">arena2print.zip</a></li>
</ul>
</section>
</div>
<div class="pagebreak">
</div>
<div id='pad' class='user'>
<h1>
<p>Pad</p>
</h1>
<section class='content'>
<h1 id="workshop-ola-html2print">Workshop Ola HTML2Print</h1>
<p>https://listes.domainepublic.net/listinfo/html2print</p>
<p><a href="http://pads.osp.kitchen/p/ola-cookbook">Cookbook</a></p>
<h2 id="participants">Participants</h2>
<ul>
<li>Sarah</li>
<li>Nicolas</li>
<li>Pierre-Yves</li>
<li>Elie</li>
<li>Kenji</li>
<li>Timothée</li>
<li>Bach</li>
<li>Gab</li>
<li>Elodie _Kévin _Angélique</li>
</ul>
<h2 id="markdown-primer">Markdown primer</h2>
<ul>
<li><a href="https://daringfireball.net/projects/markdown/" class="uri">https://daringfireball.net/projects/markdown/</a></li>
<li><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" class="uri">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a></li>
</ul>
<div class="sourceCode"><pre class="sourceCode markdown"><code class="sourceCode markdown">#titre 1
<span class="fu">## titre 2 -&amp;gt; 6</span>

<span class="al">![la legende](le/chemin/vers/le/fichier.jpeg)</span>
<span class="ot">[texte du lien](http://tapage.com)</span>

*bold*²
**italique**

- <span class="fl">liste</span>
<span class="fl">- liste</span>
<span class="bn">`code`</span></code></pre></div>
<p>Post css (// sass) Utilisation du le navigateur web Chromium fortement conseillée pour utiliser htmltoprint.css car il prend en compte directement les info renseignées ds le css tel que taille de la page, affichage du fond de page, etc.</p>
<h2 id="paquet-de-base">Paquet de base</h2>
<p>https://cloud.osp.kitchen/s/siUuVs7UD93ZeS0</p>
<p>télécharger le dossier html2print.tiny</p>
<p>découverte des variables css o_O</p>
<pre><code>:root{
    --ma-variable:210mm;
}

@page{
    width: var(--ma-variable);    
}</code></pre>
<p>En fait, ce cas précis ne marche pas :P Voir <a href="https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules" class="uri">https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules</a></p>
<h2 id="documentation">Documentation</h2>
<h3 id="howto">howto</h3>
<p>readme : https://figureslibres.io/gogs/bachir/ola4doc</p>
<h3 id="rendu">rendu</h3>
<p>192.168.99.35:8000</p>
<h3 id="textile">textile</h3>
<p>https://txstyle.org/</p>
<h2 id="mise-en-commun-projets-sam-14-juin-14h">mise en commun projets (sam 14 juin, 14h)</h2>
<h3 id="osp">OSP</h3>
<p>prendre cet occase pour faire un cookbook de htmltoprint - césures - conversion RVB --&gt; CMJN - faire couler du txt d'une page à une autre</p>
<h3 id="elie-kenji">Elie &amp; Kenji</h3>
<p>forme générative BD en scketch processing booklate de l'évolution de cette forme Lafkon make art</p>
<h3 id="angelique">Angelique</h3>
<p>contenu du wordpress de PY ou faire de la documentation html2print</p>
<h3 id="timothée">Timothée</h3>
<p>utiliser are.na (ce site est un genre de pinterest pour les graphistes) extraire un contenu web pour créer des booklates finalité: creer l'outil qui servirait à faire ça (codé en ruby) Scraping mettre en valeur les recherches faites par d'autres</p>
<h3 id="kévin-t">Kévin T</h3>
<p>documentation sur htmltoprint ou récupérer contenu d'une page wikipédia et si possible récupérer l'historique complet des modifications de la page (depuis sa création jusqu'à auj) et les mettre en forme</p>
<p>http://epicpedia.org/</p>
<p><img src="http://annemiekevanderhoek.nl/werk/epic03.jpg" title="epicpedia" alt="epicpedia" /> transfo des scripts de téâtre</p>
<h3 id="bachir">Bachir</h3>
<p>Projet d'écriture. Transposer &quot;La convivialité&amp;quot; de Ivan Illitch qui a été écrit dans les années 70, en 2017, en parlant de choses actuelles et plus particulièrement du numérique.</p>
<h3 id="gabriel">Gabriel</h3>
<p>Utiliser le workshop comme prétexte pour écrire rapport de son stage chez OSP<br />
Tenais un journal de ses apprentissages, un retour sur expériences.<br />
confrontation txt bruts - commentaires<br />
mini readme sur chacunes des choses qu'il a utilisées et qui pourraient intéresser d'autres prsn.<br />
Avoir deux version en co-existance, une web et une print</p>
<h3 id="élodie">Élodie</h3>
<p>Retravailler le site internet de synesthésie. Peut-être en faire une version imprimable. Se familiariser au code.</p>
<h3 id="nicolas">Nicolas</h3>
<p><a href="https://duckduckgo.com/?q=whole+earth+catalogue&amp;iax=1&amp;ia=images">Whole Earth Catalogue</a><br />
Aux sources de l'utopie numérique: de la contre culture à la cyberculture, Stewart Brand, un homme d'influence</p>
<p><a href="http://cfeditions.com/utopieNumerique/">Aux sources de l'utopie numérique, Fred Turner</a></p>
<p>Outil dans l'esprit du Whole earth catalog, réactiver cette idée.<br />
Plans pour construction de machines, comment se protéger de ___<br />
Grille dans laquelle injecter du contenu pour faire cet objet catalogue (forme non définie pour l'instant: poster, magazine)<br />
<a href="http://projets.esadhar.fr/usable/dashboard/">Libre Création - Libre Design</a><br />
<a href="https://esadhar.net/gogs/libre-creation_libre-design/usable">Libre Création - Libre Design (sources)</a></p>
<p>ESADHaR, projet de recherche avec des étudiants. Test d'outils libres pour la création graphiques, qu'ils aient été initialement créés dans ce but ou non. projets.esadhar.fr/usable/dashboard</p>
<p>Fonts:</p>
<ul>
<li>http://osp.kitchen/foundry/fluxisch-else/</li>
<li>https://github.com/uplaod/YoungSerif ou http://areyoubeingserved.constantvzw.org/static/fonts/YoungSerif-Regular.otf (version modifiée par Stéphanie avec la a minuscule plus)</li>
</ul>
<h3 id="pierre-yves">Pierre-Yves</h3>
<p>Comment transcrire l'Idée de calques // scribus, indesign dans/avec htmltoprint faire des boites imbriquées les unes dans les autres qui changent de couleur, qqch de génératif //dearchrome project [Alex]</p>
<p><a href="https://web.archive.org/web/20150220014329/http://www.phil-cao.com:80/dearchrome/lines/">dearchrome</a></p>
<p><a href="https://tempsdereaction.wordpress.com/">tempsdereaction</a><br />
est-ce que en veut reproduire en html le processus mis en place dans ce blog ou prendre des contenus du blog pour les mettre en page?</p>
<p>imprimer une version de ce blog sous forme de post-it ou de poster par exemple, avoir un format adaptable // automatisation</p>
<h2 id="show-and-tell">Show and tell</h2>
<h3 id="bachir-1">Bachir</h3>
<p>Projet inspiré de Gitbook</p>
<p>Libriis https://figureslibres.io/gogs/bachir/libriis</p>
<h3 id="élodie-1">Élodie</h3>
<p>https://ordigami.net/</p>
<p>version écran on voit les faces du cube côte-côte et en version</p>
<h3 id="nicolas-1">Nicolas</h3>
<p>http://perles-du-bon-coin.fr/</p>
<p>**Kevin http://csswarp.eleqtriq.com/</p>
<p>Lucile https://studiomoniker.com/projects/click-click-click https://clickclickclick.click/#e8d0c8a17bce3955716c16b413ee946b</p>
</section>
</div>
<div class="pagebreak">
</div>
<div id='cookbook' class='user'>
<h1>
<p>CookBook</p>
</h1>
<section class='content'>
<p>## CSS obscure rule: margin-top of</p>
<h1>
<p>affects parent's margin</p>
<p>As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins: &quot;In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero Basically in our example on the original question, the biggest margin-top is the one of the</p>
<h1>
<p>therefore taken and applied to the parent</p>
<div>
<p>. This rule is cancelled for: * Floated elements * Absolutely positioned elements * Inline-block elements * Elements with overflow set to anything other than visible (They do not collapse margins with their children.) * Cleared elements (They do not collapse their top margins with their parent block's bottom margin.) * The root element That is the reason why overflow:hidden solved the issue.</p>
<h2 id="css-grids">CSS grids</h2>
<p>https://jsfiddle.net/zw9c7owa/ https://jsfiddle.net/zw9c7owa/3/ https://jsfiddle.net/zw9c7owa/4/ https://jsfiddle.net/zw9c7owa/6/ https://jsfiddle.net/zw9c7owa/7/ https://jsfiddle.net/zw9c7owa/8/ https://jsfiddle.net/zw9c7owa/12/ -&gt; yeah! https://jsfiddle.net/zw9c7owa/13/ https://jsfiddle.net/zw9c7owa/14/ https://jsfiddle.net/zw9c7owa/15/ https://jsfiddle.net/zw9c7owa/16/ https://jsfiddle.net/zw9c7owa/17/</p>
<p>Emulate CSS media print : https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6</p>
<h2 id="processing-connections">processing connections</h2>
<p>https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/</p>
<h3 id="visualer-les-media-print-en-redimensionnant-la-page">visualer les media print en redimensionnant la page</h3>
<p>@media screen and (max-width: 699px) or media print { ... }</p>
<h3 id="john-resig-micro-template">John Resig Micro template</h3>
<p>Si jamais vous avez besoin de générer du HTML en javascript...</p>
<p>https://johnresig.com/blog/javascript-micro-templating/</p>
<h2 id="césures">Césures</h2>
<p>http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify</p>
<p>Les version récentes de webkit gèrent les césures</p>
<p>interdire les césures</p>
<pre><code>-webkit-hyphens: none;
   -moz-hyphens: none;
        hyphens: none;</code></pre>
<p>autoriser les césures</p>
<pre><code>-webkit-hyphens: auto;</code></pre>
<p>Gérer les césures</p>
<pre><code>-webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */
-webkit-hyphenate-limit-after:  2; /* 3 caractères minimum en début de ligne, donc en fin de mot */
-webkit-hyphenate-limit-lines:  4; /* 4 lignes consecutives max */</code></pre>
<p>NE PAS OUBLIER D'INSTALLER HYPHEN!</p>
<p>sur arch</p>
<p><code>sudo pacman -S hyphen</code> ou <code>yaourt -S hyphen</code></p>
<h2 id="css-variables-in-page">CSS variables in @page</h2>
<p>https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules</p>
<h2 id="convertir-tous-les-fichiers-html-en-markdown">Convertir tous les fichiers HTML en Markdown</h2>
<p>attention, vous allez perdre le contenu non-sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code</p>
<p>for file in *.html; do pandoc --from html --to markdown --output &quot;<span class="math">{file%.*}.md&amp;quot; &quot;</math>file&amp;quot;; done</p>
<h2 id="html2print-readme">HTML2Print readme</h2>
<h3 id="exemples-de-readme-visuels">exemples de readme visuels</h3>
<ul>
<li>http://organon.osp.kitchen/70</li>
<li>http://blog.lavillahermosa.com/brass-%E2%86%92-print-tool-v1/</li>
<li>http://design.lavillahermosa.com/works-288-le-brass-2014</li>
<li>http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory-learning-archives-et-bidouillages-workshop-au-mundaneum-24-261016/</li>
<li>http://lorainefurter.net/readme/readme-workflows.html</li>
<li>https://hpg.io/</li>
<li>https://youtu.be/eIgX6sPOqCY?t=2m40s</li>
</ul>
<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen>
</iframe>
<p><img src="http://hpg.io/img/multi_format.png" alt="" /> https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET-EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf_generator_1_00_WEB.gif</p>
<p>http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png</p>
<h3 id="workflow-dun-numéro-de-médor">workflow d'un numéro de Médor</h3>
<ul>
<li>http://organon.osp.kitchen/90</li>
</ul>
<h3 id="python-rss-to-html">python rss to html</h3>
<p>https://figureslibres.io/gogs/bachir/python-rss2html</p>
<div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="co">#!/usr/bin/python</span>
<span class="co"># -*- coding: utf-8 -*-</span>


<span class="im">import</span> feedparser
<span class="im">from</span> bs4 <span class="im">import</span> BeautifulSoup

<span class="kw">def</span> main():
   <span class="co"># url du flux rss</span>
   tpsreac_feed_url <span class="op">=</span> <span class="op">&amp;</span>quot<span class="op">;</span>https:<span class="op">//</span>tempsdereaction.wordpress.com<span class="op">/</span>feed<span class="op">/&amp;</span>quot<span class="op">;</span>

   <span class="co"># on aspire le flux rss avec feedparser</span>
   tpsreac_feeds <span class="op">=</span> feedparser.parse(tpsreac_feed_url)

   <span class="co"># base template du fichier html</span>
   base <span class="op">=</span> <span class="op">&amp;</span>quot<span class="op">;&amp;</span>lt<span class="op">;</span>html<span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;</span>head<span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;/</span>head<span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;</span>body<span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;/</span>body<span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;/</span>html<span class="op">&amp;</span>gt<span class="op">;&amp;</span>quot<span class="op">;</span>
   <span class="co"># create dom for html file base</span>
   base_dom <span class="op">=</span> BeautifulSoup(base, <span class="st">&#39;html.parser&#39;</span>)

   <span class="co"># page base template</span>
   page_base <span class="op">=</span> <span class="op">&amp;</span>quot<span class="op">;&amp;</span>lt<span class="op">;</span>section <span class="kw">class</span><span class="op">=</span><span class="st">&#39;page&#39;</span><span class="op">&amp;</span>gt<span class="op">;&amp;</span>lt<span class="op">;/</span>section<span class="op">&amp;</span>gt<span class="op">;&amp;</span>quot<span class="op">;</span>

   <span class="co"># boucle sur les entrées racine du flux</span>
   <span class="cf">for</span> key <span class="kw">in</span> tpsreac_feeds:
      <span class="bu">print</span>(key)

   <span class="co"># on boucle sur les entrées du flux rss</span>
   <span class="cf">for</span> entrie <span class="kw">in</span> tpsreac_feeds[<span class="st">&#39;entries&#39;</span>]:
      <span class="bu">print</span>(<span class="st">&#39;- - - - -&#39;</span>,entrie[<span class="st">&#39;title&#39;</span>])
      <span class="co"># just display entrie keys</span>
      <span class="cf">for</span> key <span class="kw">in</span> entrie:
         <span class="bu">print</span>(key)
         <span class="co">#     entries.extend( feed[ &amp;quot;items&amp;quot; ] )</span>

      <span class="co"># create page dom</span>
      p_dom <span class="op">=</span> BeautifulSoup(page_base, <span class="st">&#39;html.parser&#39;</span>)
      <span class="co"># add content in page dom</span>
      p_dom.section.append(entrie[<span class="st">&#39;summary&#39;</span>])

      <span class="co"># add newly created page dom to html dom</span>
      base_dom.body.append(p_dom)

   <span class="co"># create main html file from filled base html dom</span>
   <span class="cf">with</span> <span class="bu">open</span>(<span class="op">&amp;</span>quot<span class="op">;</span>index.html<span class="op">&amp;</span>quot<span class="op">;</span>, <span class="st">&#39;w&#39;</span>) <span class="im">as</span> fp:
      fp.write(base_dom.prettify(formatter<span class="op">=</span><span class="va">None</span>))


<span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="op">&amp;</span>quot<span class="op">;</span>__main__<span class="op">&amp;</span>quot<span class="op">;</span>:
   main()</code></pre></div>
<h3 id="python-pandoc-and-template">python pandoc and template</h3>
<p>https://figureslibres.io/gogs/bachir/gitbook-html2print</p>
<div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="co">#!/usr/bin/python</span>
<span class="co"># -*- coding: utf-8 -*-</span>

<span class="im">from</span> bs4 <span class="im">import</span> BeautifulSoup
<span class="im">import</span> pypandoc

<span class="kw">def</span> main():
       <span class="co"># create main html dom from template</span>
       template_f <span class="op">=</span> <span class="bu">open</span>(<span class="op">&amp;</span>quot<span class="op">;</span>templates<span class="op">/</span>main.tpl.html<span class="op">&amp;</span>quot<span class="op">;</span>, <span class="op">&amp;</span>quot<span class="op">;</span>r<span class="op">&amp;</span>quot<span class="op">;</span>)
       template_html <span class="op">=</span> template_f.read()
       template_dom <span class="op">=</span> BeautifulSoup(template_html, <span class="st">&#39;html.parser&#39;</span>)


      pdoc_args <span class="op">=</span> [<span class="st">&#39;--mathjax&#39;</span>,
                   <span class="st">&#39;--smart&#39;</span>]

      pdoc_filters <span class="op">=</span> []

      output <span class="op">=</span> pypandoc.convert_file(<span class="op">&amp;</span>quot<span class="op">;</span>lechemin<span class="op">/</span>de<span class="op">/</span>monfichier.md<span class="op">&amp;</span>quot<span class="op">;</span>,
                               to<span class="op">=</span><span class="st">&#39;html5&#39;</span>,
                               <span class="bu">format</span><span class="op">=</span><span class="st">&#39;markdown+header_attributes+link_attributes+bracketed_spans&#39;</span>,
                               extra_args<span class="op">=</span>pdoc_args,
                               filters<span class="op">=</span>pdoc_filters)
                              <span class="co">#  outputfile=out_f)</span>

      <span class="co"># print(&amp;quot;output :\n&amp;quot;+output)</span>

      output_dom <span class="op">=</span> BeautifulSoup(output, <span class="st">&#39;html.parser&#39;</span>)

      template_dom.append(output_dom)

    <span class="co"># create main html file from filled template html dom</span>
    html_f <span class="op">=</span> <span class="st">&#39;monfichier.html&#39;</span>
    <span class="cf">with</span> <span class="bu">open</span>(html_f, <span class="st">&#39;w&#39;</span>) <span class="im">as</span> fp:
        fp.write(template_dom.prettify(formatter<span class="op">=</span><span class="va">None</span>))


<span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="op">&amp;</span>quot<span class="op">;</span>__main__<span class="op">&amp;</span>quot<span class="op">;</span>:
   main()</code></pre></div>
<h2 id="ajuster-une-image">Ajuster une image</h2>
<p>voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position</p>
<h2 id="css-regions">CSS regions</h2>
<h1 id="flow-main">flow-main {</h1>
<pre><code>-webkit-flow-into: flow-main;
        flow-into: flow-main;</code></pre>
<p>}</p>
<p>.flow-main { -webkit-flow-from: flow-main; flow-from: flow-main; }</p>
<p>ex: https://jsfiddle.net/asmqaheq/</p>
</section>
</div>
<div class="pagebreak">
</div>
</section>
<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- <script src="js/jquery.line/jquery.line.js" type="text/javascript"></script> -->
<script src="bower_components/lightbox2/dist/js/lightbox.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>