ola5doc/sys/tmp/content.textile

<header id='header'>

h1. OLA#4 Documentation : OSP html2print

<nav id='menu'>

* "00-ola":#00-ola
* "alex":#alex
* "bachir":#bachir
* "gabriel":#gabriel
* "kenji":#kenji
* "Kenji-Elie":#Kenji-Elie
* "kevin":#kevin
* "Lucile":#Lucile
* "nicolas":#nicolas
* "PierreYves":#PierreYves
* "Sarah":#Sarah
* "timothee_goguely":#timothee_goguely
* "Pad":#pad
* "CookBook":#cookbook

</nav>
</header>
<section id='main'>
<div id='00-ola' class='user'>
<section class='content'>

h1. Le workshop

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.

Dans cet espace, la notion de flux est centrale: le flux des données, allant de la conversion de documents "bruts" 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.

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?

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/))

Questions sous-jacentes

modèles de production non-linéaires (ex. book sprint via ethertoff)
comment penser la spécificité des différents supports de publication (éviter le plus petit dénominateur commun pour le design)
penser et tester différentes versions (branches)

</section>
<section class='images'>

* <a data-lightbox='00-ola' href='images/00-ola-00.JPG'>!thumbs/00-ola-00.JPG!</a>
* <a data-lightbox='00-ola' href='images/00-ola-01.JPG'>!thumbs/00-ola-01.JPG!</a>
* <a data-lightbox='00-ola' href='images/00-ola-02.JPG'>!thumbs/00-ola-02.JPG!</a>
* <a data-lightbox='00-ola' href='images/00-ola-03.jpg'>!thumbs/00-ola-03.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-04.jpg'>!thumbs/00-ola-04.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-05.jpg'>!thumbs/00-ola-05.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-06.jpg'>!thumbs/00-ola-06.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-07.jpg'>!thumbs/00-ola-07.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-08.jpg'>!thumbs/00-ola-08.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-09.jpg'>!thumbs/00-ola-09.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-10.jpg'>!thumbs/00-ola-10.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-11.jpg'>!thumbs/00-ola-11.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-12.jpg'>!thumbs/00-ola-12.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-13.jpg'>!thumbs/00-ola-13.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-14.jpg'>!thumbs/00-ola-14.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-15.jpg'>!thumbs/00-ola-15.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-16.jpg'>!thumbs/00-ola-16.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-17.jpg'>!thumbs/00-ola-17.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-18.jpg'>!thumbs/00-ola-18.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-19.jpg'>!thumbs/00-ola-19.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-20.jpg'>!thumbs/00-ola-20.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-21.jpg'>!thumbs/00-ola-21.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-22.jpg'>!thumbs/00-ola-22.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-23.jpg'>!thumbs/00-ola-23.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-24.jpg'>!thumbs/00-ola-24.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-25.jpg'>!thumbs/00-ola-25.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-26.jpg'>!thumbs/00-ola-26.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-27.jpg'>!thumbs/00-ola-27.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-28.jpg'>!thumbs/00-ola-28.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-29.jpg'>!thumbs/00-ola-29.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-30.jpg'>!thumbs/00-ola-30.jpg!</a>
* <a data-lightbox='00-ola' href='images/00-ola-31.jpg'>!thumbs/00-ola-31.jpg!</a>

</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='alex' class='user'>
<section class='content'>

h1. Alex

h2. Mettre en page un Médor (WIP)

<a data-lightbox='alex' href='images/alex-02.png'>!thumbs/alex-02.png!</a>

h2. Grid system en CSS (WIP)

Utiliser css pour dessiner une grille et utiliser la fonctionalité `display: grid` de css.

<a data-lightbox='alex' href='images/alex-00.png'>!thumbs/alex-00.png!</a>

https://jsfiddle.net/zw9c7owa/17/

</section>
<section class='images'>

* <a data-lightbox='alex' href='images/alex-01.pdf'>!thumbs/alex-01.pdf!</a>

</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='bachir' class='user'>
<section class='content'>

h1. La Convivialité New Generation

h2. Bachir Soussi Chiadmi

<a data-lightbox='bachir' href='images/bachir-00.jpg'>!thumbs/bachir-00.jpg!</a>

Projet de Transposition de "La Convivialité", Ivan Illich, en 2017 et à propos des espaces numériques


</section>
<section class='images'>

* <a data-lightbox='bachir' href='images/bachir-01.png'>!thumbs/bachir-01.png!</a>
* <a data-lightbox='bachir' href='images/bachir-02.png'>!thumbs/bachir-02.png!</a>
* <a data-lightbox='bachir' href='images/bachir-03.png'>!thumbs/bachir-03.png!</a>
* <a data-lightbox='bachir' href='images/bachir-04.png'>!thumbs/bachir-04.png!</a>
* <a data-lightbox='bachir' href='images/bachir-05.png'>!thumbs/bachir-05.png!</a>
* <a data-lightbox='bachir' href='images/bachir-06.png'>!thumbs/bachir-06.png!</a>

</section>
<section class='sources'>

* "conv-ng.zip":sources/conv-ng.zip

</section>
</div>
<div class="pagebreak"></div>
<div id='gabriel' class='user'>
<section class='content'>

h1. README.intern

h2. Gabriel Vaury

Premier test d'un rapport de stage sous forme de "README" revisité et commenté

<a data-lightbox='gabriel' href='images/gabriel-06.png'>!thumbs/gabriel-06.png!</a>

Matière première

<a data-lightbox='gabriel' href='images/gabriel-01.png'>!thumbs/gabriel-01.png!</a>

* *-3 flux de texte* :
** 	-_log_ initial sous forme de carnet de bord
** 	-_commentaires_ post-rédaction amenant un recul et un 'décryptage' des activités faites
** 	-_commandes_ apprises recontextualisées

* *-2 flux d'images* :
** 	-Screenshots pris pendant le stage
** 	-Photos prises "en dehors" du stage

Objectif

* -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
* -Mettre en relation les rapports fait _à chaud_ lors du stage et les prises de conscience _à froid_
* -[Optionel] Réaliser une version print et une version web de ce rapport

To Do

* - -Intégrer un système de "CMS" pour appeler le contenu dans la structure HTML-
* - -Mise en forme gérée par Markdown ou autre (?)-
**   Problème reglé avec "BeautifulSoup et pypandoc":https://figureslibres.io/gogs/bachir/gitbook-html2print

* - Gérer les listes en tant que footnotes pour les extraire du flux et les imbriquer dans le flux principal

Avancement

Nettoyage et Markdownisation du texte initial

<a data-lightbox='gabriel' href='images/gabriel-02.png'>!thumbs/gabriel-02.png!</a>

Premier test avec pandoc seul

<a data-lightbox='gabriel' href='images/gabriel-03.png'>!thumbs/gabriel-03.png!</a>

<a data-lightbox='gabriel' href='images/gabriel-04.png'>!thumbs/gabriel-04.png!</a>

Utilisation du script

<a data-lightbox='gabriel' href='images/gabriel-07.png'>!thumbs/gabriel-07.png!</a>

<a data-lightbox='gabriel' href='images/gabriel-05.png'>!thumbs/gabriel-05.png!</a>

Se pose maintenant le problèmes des footnotes

<a data-lightbox='gabriel' href='images/gabriel-00.png'>!thumbs/gabriel-00.png!</a>

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

</section>
<section class='images'>


</section>
<section class='sources'>

* "sources.zip":sources/sources.zip

</section>
</div>
<div class="pagebreak"></div>
<div id='kenji' class='user'>
<section class='content'>

h1. magic system

h3. Kenji Luyeye

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.

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.

h2. SAMEDI 

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. 

[alt text](images/2.png"")

Je me familiarise avec grid et transpose mes croquis en HTML/CSS. 
Le CSS est beaucoup trop long, Alexandre me suggère donc d'insérer du style directement dans le HTML. 
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. 

La solution la plus évidente serait d'utiliser javascript et de créer des boucles. Nous essayerons demain.

h2. DIMANCHE 

Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire. 
</section>
<section class='images'>


</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='Kenji-Elie' class='user'>
<section class='content'>

h1. Grid

h3. Kenji Luyeye

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.

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.

h2. SAMEDI 

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. 

[alt text](images/2.png"")

Je me familiarise avec grid et transpose mes croquis en HTML/CSS. 
Le CSS est beaucoup trop long, Alexandre me suggère donc d'insérer du style directement dans le HTML. 
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. 

La solution la plus évidente serait d'utiliser javascript et de créer des boucles. Nous essayerons demain.

h2. DIMANCHE 

Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire. 
</section>
<section class='images'>

* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-01.png'>!thumbs/Kenji-Elie-01.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-02.png'>!thumbs/Kenji-Elie-02.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-03.png'>!thumbs/Kenji-Elie-03.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-04.png'>!thumbs/Kenji-Elie-04.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-05.png'>!thumbs/Kenji-Elie-05.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-06.png'>!thumbs/Kenji-Elie-06.png!</a>
* <a data-lightbox='Kenji-Elie' href='images/Kenji-Elie-07.png'>!thumbs/Kenji-Elie-07.png!</a>

</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='kevin' class='user'>
<section class='content'>

h1. Le nom de mon projet

h2. Kévin Tessier

</section>
<section class='images'>

* <a data-lightbox='kevin' href='images/kevin-00.png'>!thumbs/kevin-00.png!</a>
* <a data-lightbox='kevin' href='images/kevin-01.png'>!thumbs/kevin-01.png!</a>
* <a data-lightbox='kevin' href='images/kevin-02.png'>!thumbs/kevin-02.png!</a>
* <a data-lightbox='kevin' href='images/kevin-03.png'>!thumbs/kevin-03.png!</a>
* <a data-lightbox='kevin' href='images/kevin-04.png'>!thumbs/kevin-04.png!</a>
* <a data-lightbox='kevin' href='images/kevin-05.png'>!thumbs/kevin-05.png!</a>

</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='Lucile' class='user'>
<section class='content'>

h1. Reverse

h2. Lucile Béal
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.
Question: Comment transcrire l'organisation d'un site dans la mise en page d'un livre? Liens/menus/les 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 utile/enrichissant de référencer physiquement ces créations sur papier?
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.
Objet de création web mis en page: "ClickClickClick" par le Studio Moniker

!images/tutorial-getting-started-krita_part1_14_net.jpg!

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
puis ajouter cette ligne:

bc. !images/nomdemonimage.jpeg!

Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.

</section>
<section class='images'>


</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='nicolas' class='user'>
<section class='content'>

h1. CtrlPtoSurvive

h2. Nicolas Tilly


Inspiré du "Whole Earth Catalog" 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.
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.

Imprimer un format différent graphiquement de la page Web.
Gérer une mise en page Web et une mise en page print (A3).
Visualiser dans le navigateur la mise en page print (emulate css media).


h1. Recherches graphiques du Whole Earth Catalog:

<a data-lightbox='nicolas' href='images/nicolas-12.png'>!thumbs/nicolas-12.png!</a>


h1. Concept de mise en page Web qui s'imprime en poster A3 :

<a data-lightbox='nicolas' href='images/nicolas-08.jpg'>!thumbs/nicolas-08.jpg!</a>


h1. Work in progress du projet :


p. Emulate CSS Media : prévisualisation de la feuille de style pour le print dans Chrome.

<a data-lightbox='nicolas' href='images/nicolas-07.png'>!thumbs/nicolas-07.png!</a>

h1. Construction du poster A3:

<a data-lightbox='nicolas' href='images/nicolas-03.png'>!thumbs/nicolas-03.png!</a>

h1. Construction de la page Web:

<a data-lightbox='nicolas' href='images/nicolas-11.png'>!thumbs/nicolas-11.png!</a>

J'ai ajouté un bouton pour pouvoir imprimer la page Web :

bc.. <button onclick="onimprime()">vite ! j'imprime le poster !</button>

    <script>
        function onimprime() {
            window.print();
        }

    </script>

p. La mise en page est basée sur "flexbox":http://cssreference.io/flexbox/

<a data-lightbox='nicolas' href='images/nicolas-09.png'>!thumbs/nicolas-09.png!</a>
<a data-lightbox='nicolas' href='images/nicolas-10.png'>!thumbs/nicolas-10.png!</a>


h1. Rendus du poster A3 à partir de la page Web:

Grâce à :

bc.. 

@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%;
    }
    ...
}

p. j'ai modifié la mise en page de la page Web pour l'adapter au format cible A3.

<a data-lightbox='nicolas' href='images/nicolas-04.png'>!thumbs/nicolas-04.png!</a>
<a data-lightbox='nicolas' href='images/nicolas-05.png'>!thumbs/nicolas-05.png!</a>
<a data-lightbox='nicolas' href='images/nicolas-06.png'>!thumbs/nicolas-06.png!</a>
<a data-lightbox='nicolas' href='images/nicolas-01.png'>!thumbs/nicolas-01.png!</a>
<a data-lightbox='nicolas' href='images/nicolas-02.png'>!thumbs/nicolas-02.png!</a>


h1. html2print:

<a data-lightbox='nicolas' href='images/nicolas-00.jpg'>!thumbs/nicolas-00.jpg!</a>


</section>
<section class='images'>


</section>
<section class='sources'>

* "CtrlPtoSurvive.pdf":sources/CtrlPtoSurvive.pdf
* "nicolastilly.zip":sources/nicolastilly.zip

</section>
</div>
<div class="pagebreak"></div>
<div id='PierreYves' class='user'>
<section class='content'>

h1. update

h2. Pierre-Yves Fave

J'ai fait quelques tests.

J'ai été initié au rudiments des css.
C'est bien agréable d'apprendre comme ça.

Mon but était de récuperer un flux rss issu de wordpress,
et de comprendre comment mettre en page
avec des techniques actuelles.
L'imprimer ou l'extraire pour pouvoir le manipuler,
et continuer à intervenir dessus.


Bachir a programmé une moulinette, devant moi.
et c'est comme ça que je comprends le mieux le code,
dans le temps de son écriture.
Il n'y a rien de tel que le direct.

Sarah Alex et les autres , merci pour vos conseils.
Il me reste des trucs a comprendre,
mais là, je bloquais depuis un bout de temps sur ces trucs.
en div, j'suis con.

</section>
<section class='images'>

* <a data-lightbox='PierreYves' href='images/PierreYves-00.jpg'>!thumbs/PierreYves-00.jpg!</a>
* <a data-lightbox='PierreYves' href='images/PierreYves-01.jpg'>!thumbs/PierreYves-01.jpg!</a>
* <a data-lightbox='PierreYves' href='images/PierreYves-02.jpg'>!thumbs/PierreYves-02.jpg!</a>
* <a data-lightbox='PierreYves' href='images/PierreYves-03.jpg'>!thumbs/PierreYves-03.jpg!</a>
* <a data-lightbox='PierreYves' href='images/PierreYves-04.jpg'>!thumbs/PierreYves-04.jpg!</a>

</section>
<section class='sources'>

* "Mon_poster.pdf":sources/Mon_poster.pdf
* "postsrecup_1.zip":sources/postsrecup_1.zip
* "postsrecup.zip":sources/postsrecup.zip
* "pyRss2html-starter.zip":sources/pyRss2html-starter.zip
* "python-rss2html.zip":sources/python-rss2html.zip

</section>
</div>
<div class="pagebreak"></div>
<div id='Sarah' class='user'>
<section class='content'>

h1. Le workshop

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.

Dans cet espace, la notion de flux est centrale: le flux des données, allant de la conversion de documents "bruts" 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.

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?

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/))

Questions sous-jacentes

modèles de production non-linéaires (ex. book sprint via ethertoff)
comment penser la spécificité des différents supports de publication (éviter le plus petit dénominateur commun pour le design)
penser et tester différentes versions (branches)

</section>
<section class='images'>


</section>
<section class='sources'>


</section>
</div>
<div class="pagebreak"></div>
<div id='timothee_goguely' class='user'>
<section class='content'>

h1. arena2print

h2. Timothée Goguely

h3. 24.06.17

The idea of this project is to connect "are.na API":https://dev.are.na/documentation with "html2print":http://osp.kitchen/tools/html2print/ to be able to print any Arena channel – like "this one about Ivan Illich":https://www.are.na/csaba-osvath/ivan-illich for example – at any format.

Create a new Rails app called "arena2print".
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-00.png'>!thumbs/timothee_goguely-00.png!</a>

Install the Arena Ruby interface "arena-rb":https://github.com/aredotna/arena-rb into my app.
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-01.png'>!thumbs/timothee_goguely-01.png!</a>

Implement "authentication":https://dev.are.na/documentation/authentication
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-02.png'>!thumbs/timothee_goguely-02.png!</a>

__lunch__

… Moment of doubt, wondering about technical difficulty…
Why not develop a Chrome extension instead of a webapp?
A simple @arena2print@ button may be the most effective solution.

Rough pseudo-code of the extension script:
# parse HTML to select all blocks
# extract and store all block’s content
# create a new HTML page from this content
# add custom print CSS
# launch browser print modal window!

Need to read and watch some tutorials to get an idea about the technical difficulty…
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-03.png'>!thumbs/timothee_goguely-03.png!</a>

Ok, let’s try "this one":https://robots.thoughtbot.com/how-to-make-a-chrome-extension

Yeah, I just write my first Chrome Extension!
Right now, it’s only an dumb @alert()@ script, but let’s continue…
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-04.png'>!thumbs/timothee_goguely-04.png!</a>

…

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.
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-05.png'>!thumbs/timothee_goguely-05.png!</a>

…

h3. 25.06.17

Yesterday, I have succeeded in displaying all the block’s content of a channel on pages.
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-06.png'>!thumbs/timothee_goguely-06.png!</a>

Here is what I need to do today:
* implement conditionnal statement for detecting and displaying images, attachments and so on.
* 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 @page-break-before: always@ on titles.
* displaying the page on top of Arena channel, not instead of it, so the user doesn’t lose the context.
* crafting CSS to improve the layout, hierarchy and typography
* convert datetime into a human readable format
* 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.

Here we go!

…

__lunch__

* Display umages and attachments > done
* Multi-page blocks > done
* Layout > in progress
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-07.png'>!thumbs/timothee_goguely-07.png!</a>

…

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:
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-08.png'>!thumbs/timothee_goguely-08.png!</a>
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-09.png'>!thumbs/timothee_goguely-09.png!</a>
<a data-lightbox='timothee_goguely' href='images/timothee_goguely-10.png'>!thumbs/timothee_goguely-10.png!</a>

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.

So thank you OLA, OSP & 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.
Keep up the good work!

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 __effective__ and __useful__ Chrome Extension!



</section>
<section class='images'>


</section>
<section class='sources'>

* "arena2print.pdf":sources/arena2print.pdf
* "arena2print.zip":sources/arena2print.zip

</section>
</div>
<div class="pagebreak"></div>
<div id='pad' class='user'>
<h1>Pad</h1>
<section class='content'>

h1(#workshop-ola-html2print). Workshop Ola HTML2Print

https://listes.domainepublic.net/listinfo/html2print

"Cookbook":http://pads.osp.kitchen/p/ola-cookbook

h2(#participants). Participants

* Sarah
* Nicolas
* Pierre&#45;Yves
* Elie
* Kenji
* Timothée
* Bach
* Gab
* Elodie _Kévin _Angélique

h2(#markdown-primer). Markdown primer

* "$":https://daringfireball.net/projects/markdown/
* "$":https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

<pre class="markdown">
#titre 1
## titre 2 -&gt; 6

![la legende](le/chemin/vers/le/fichier.jpeg)
[texte du lien](http://tapage.com)

*bold*²
**italique**

- liste
- liste
`code`
</pre>

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.

h2(#paquet-de-base). Paquet de base

https://cloud.osp.kitchen/s/siUuVs7UD93ZeS0

télécharger le dossier html2print.tiny

découverte des variables css o&#95;O

<pre>
:root{
    --ma-variable:210mm;
}

@page{
    width: var(--ma-variable);    
}
</pre>

En fait, ce cas précis ne marche pas :P Voir "$":https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules

h2(#documentation). Documentation

h3(#howto). howto

readme : https://figureslibres.io/gogs/bachir/ola4doc

h3(#rendu). rendu

192.168.99.35:8000

h3(#textile). textile

https://txstyle.org/

h2(#mise-en-commun-projets-sam-14-juin-14h). mise en commun projets (sam 14 juin, 14h)

h3(#osp). OSP

prendre cet occase pour faire un cookbook de htmltoprint &#45; césures &#45; conversion RVB &#45;&#45;&gt; CMJN &#45; faire couler du txt d'une page à une autre

h3(#elie-kenji). Elie &amp; Kenji

forme générative BD en scketch processing booklate de l'évolution de cette forme Lafkon make art

h3(#angelique). Angelique

contenu du wordpress de PY ou faire de la documentation html2print

h3(#timothée). Timothée

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

h3(#kévin-t). Kévin T

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

http://epicpedia.org/

!http://annemiekevanderhoek.nl/werk/epic03.jpg(epicpedia)! transfo des scripts de téâtre

h3(#bachir). Bachir

Projet d'écriture. Transposer &quot;La convivialité&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.

h3(#gabriel). Gabriel

Utiliser le workshop comme prétexte pour écrire rapport de son stage chez OSP
Tenais un journal de ses apprentissages, un retour sur expériences.
confrontation txt bruts &#45; commentaires
mini readme sur chacunes des choses qu'il a utilisées et qui pourraient intéresser d'autres prsn.
Avoir deux version en co&#45;existance, une web et une print

h3(#élodie). Élodie

Retravailler le site internet de synesthésie. Peut&#45;être en faire une version imprimable. Se familiariser au code.

h3(#nicolas). Nicolas

"Whole Earth Catalogue":https://duckduckgo.com/?q=whole+earth+catalogue&iax=1&ia=images
Aux sources de l'utopie numérique: de la contre culture à la cyberculture, Stewart Brand, un homme d'influence

"Aux sources de l'utopie numérique, Fred Turner":http://cfeditions.com/utopieNumerique/

Outil dans l'esprit du Whole earth catalog, réactiver cette idée.
Plans pour construction de machines, comment se protéger de &#95;&#95;&#95;
Grille dans laquelle injecter du contenu pour faire cet objet catalogue (forme non définie pour l'instant: poster, magazine)
"Libre Création &#45; Libre Design":http://projets.esadhar.fr/usable/dashboard/
"Libre Création &#45; Libre Design (sources)":https://esadhar.net/gogs/libre-creation_libre-design/usable

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

Fonts:

* http://osp.kitchen/foundry/fluxisch&#45;else/
* https://github.com/uplaod/YoungSerif ou http://areyoubeingserved.constantvzw.org/static/fonts/YoungSerif&#45;Regular.otf (version modifiée par Stéphanie avec la a minuscule plus)

h3(#pierre-yves). Pierre&#45;Yves

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]

"dearchrome":https://web.archive.org/web/20150220014329/http://www.phil-cao.com:80/dearchrome/lines/

"tempsdereaction":https://tempsdereaction.wordpress.com/
est&#45;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?

imprimer une version de ce blog sous forme de post&#45;it ou de poster par exemple, avoir un format adaptable // automatisation

h2(#show-and-tell). Show and tell

h3(#bachir-1). Bachir

Projet inspiré de Gitbook

Libriis https://figureslibres.io/gogs/bachir/libriis

h3(#élodie-1). Élodie

https://ordigami.net/

version écran on voit les faces du cube côte&#45;côte et en version

h3(#nicolas-1). Nicolas

http://perles&#45;du&#45;bon&#45;coin.fr/

&#42;&#42;Kevin http://csswarp.eleqtriq.com/

Lucile https://studiomoniker.com/projects/click&#45;click&#45;click https://clickclickclick.click/#e8d0c8a17bce3955716c16b413ee946b


</section>
</div>
<div class="pagebreak"></div>
<div id='cookbook' class='user'>
<h1>CookBook</h1>
<section class='content'>

## CSS obscure rule: margin&#45;top of
<h1>
affects parent's margin

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&#45;top is the one of the
<h1>
therefore taken and applied to the parent
<div>
. This rule is cancelled for: &#42; Floated elements &#42; Absolutely positioned elements &#42; Inline&#45;block elements &#42; Elements with overflow set to anything other than visible (They do not collapse margins with their children.) &#42; Cleared elements (They do not collapse their top margins with their parent block's bottom margin.) &#42; The root element That is the reason why overflow:hidden solved the issue.

h2(#css-grids). CSS grids

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/ &#45;&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/

Emulate CSS media print : https://uxdesign.cc/i&#45;totally&#45;forgot&#45;about&#45;print&#45;style&#45;sheets&#45;f1e6604cfd6

h2(#processing-connections). processing connections

https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/

h3(#visualer-les-media-print-en-redimensionnant-la-page). visualer les media print en redimensionnant la page

&#64;media screen and (max&#45;width: 699px) or media print { ... }

h3(#john-resig-micro-template). John Resig Micro template

Si jamais vous avez besoin de générer du HTML en javascript...

https://johnresig.com/blog/javascript&#45;micro&#45;templating/

h2(#césures). Césures

http://gitlab.constantvzw.org/osp/tools.html5lib&#95;typogrify

Les version récentes de webkit gèrent les césures

interdire les césures

bc. -webkit-hyphens: none;
   -moz-hyphens: none;
        hyphens: none;


autoriser les césures

bc. -webkit-hyphens: auto;


Gérer les césures

bc. -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 */


NE PAS OUBLIER D'INSTALLER HYPHEN!

sur arch

@sudo pacman -S hyphen@ ou @yaourt -S hyphen@

h2(#css-variables-in-page). CSS variables in &#64;page

https://stackoverflow.com/questions/44735420/using&#45;custom&#45;properties&#45;with&#45;page&#45;rules

h2(#convertir-tous-les-fichiers-html-en-markdown). Convertir tous les fichiers HTML en Markdown

attention, vous allez perdre le contenu non&#45;sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code

for file in &#42;.html; do pandoc &#45;&#45;from html &#45;&#45;to markdown &#45;&#45;output &quot;<span class="math">{file%.*}.md&quot; &quot;</math>file&quot;; done

h2(#html2print-readme). HTML2Print readme

h3(#exemples-de-readme-visuels). exemples de readme visuels

* http://organon.osp.kitchen/70
* http://blog.lavillahermosa.com/brass&#45;%E2%86%92&#45;print&#45;tool&#45;v1/
* http://design.lavillahermosa.com/works&#45;288&#45;le&#45;brass&#45;2014
* http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory&#45;learning&#45;archives&#45;et&#45;bidouillages&#45;workshop&#45;au&#45;mundaneum&#45;24&#45;261016/
* http://lorainefurter.net/readme/readme&#45;workflows.html
* https://hpg.io/
* https://youtu.be/eIgX6sPOqCY?t=2m40s

<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen>
</iframe>
!http://hpg.io/img/multi_format.png! https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET&#45;EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf&#95;generator&#95;1&#95;00&#95;WEB.gif

http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png

h3(#workflow-dun-numéro-de-médor). workflow d'un numéro de Médor

* http://organon.osp.kitchen/90

h3(#python-rss-to-html). python rss to html

https://figureslibres.io/gogs/bachir/python&#45;rss2html

<pre class="python">
#!/usr/bin/python
# -*- coding: utf-8 -*-


import feedparser
from bs4 import BeautifulSoup

def main():
   # url du flux rss
   tpsreac_feed_url = &quot;https://tempsdereaction.wordpress.com/feed/&quot;

   # on aspire le flux rss avec feedparser
   tpsreac_feeds = feedparser.parse(tpsreac_feed_url)

   # base template du fichier html
   base = &quot;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&quot;
   # create dom for html file base
   base_dom = BeautifulSoup(base, 'html.parser')

   # page base template
   page_base = &quot;&lt;section class='page'&gt;&lt;/section&gt;&quot;

   # boucle sur les entrées racine du flux
   for key in tpsreac_feeds:
      print(key)

   # on boucle sur les entrées du flux rss
   for entrie in tpsreac_feeds['entries']:
      print('- - - - -',entrie['title'])
      # just display entrie keys
      for key in entrie:
         print(key)
         #     entries.extend( feed[ &quot;items&quot; ] )

      # create page dom
      p_dom = BeautifulSoup(page_base, 'html.parser')
      # add content in page dom
      p_dom.section.append(entrie['summary'])

      # add newly created page dom to html dom
      base_dom.body.append(p_dom)

   # create main html file from filled base html dom
   with open(&quot;index.html&quot;, 'w') as fp:
      fp.write(base_dom.prettify(formatter=None))


if __name__ == &quot;__main__&quot;:
   main()

</pre>

h3(#python-pandoc-and-template). python pandoc and template

https://figureslibres.io/gogs/bachir/gitbook&#45;html2print

<pre class="python">
#!/usr/bin/python
# -*- coding: utf-8 -*-

from bs4 import BeautifulSoup
import pypandoc

def main():
       # create main html dom from template
       template_f = open(&quot;templates/main.tpl.html&quot;, &quot;r&quot;)
       template_html = template_f.read()
       template_dom = BeautifulSoup(template_html, 'html.parser')
    

      pdoc_args = ['--mathjax',
                   '--smart']

      pdoc_filters = []

      output = pypandoc.convert_file(&quot;lechemin/de/monfichier.md&quot;,
                               to='html5',
                               format='markdown+header_attributes+link_attributes+bracketed_spans',
                               extra_args=pdoc_args,
                               filters=pdoc_filters)
                              #  outputfile=out_f)

      # print(&quot;output :\n&quot;+output)

      output_dom = BeautifulSoup(output, 'html.parser')

      template_dom.append(output_dom)
      
    # create main html file from filled template html dom
    html_f = 'monfichier.html'
    with open(html_f, 'w') as fp:
        fp.write(template_dom.prettify(formatter=None))



if __name__ == &quot;__main__&quot;:
   main()

</pre>

h2(#ajuster-une-image). Ajuster une image

voir https://developer.mozilla.org/en&#45;US/docs/Web/CSS/object&#45;fit et https://developer.mozilla.org/en&#45;US/docs/Web/CSS/object&#45;position

h2(#css-regions). CSS regions

h1(#flow-main). flow&#45;main {

bc. -webkit-flow-into: flow-main;
        flow-into: flow-main;


}

.flow&#45;main { &#45;webkit&#45;flow&#45;from: flow&#45;main; flow&#45;from: flow&#45;main; }

ex: https://jsfiddle.net/asmqaheq/


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