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)

Alex

Mettre en page un Médor (WIP)

Grid system en CSS (WIP)

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

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

La Convivialité New Generation

Bachir Soussi Chiadmi

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

README.intern

Gabriel Vaury

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

Matière première

• -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

• - 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

Premier test avec pandoc seul

Utilisation du script

Se pose maintenant le problèmes des footnotes

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

magic system

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.

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.

DIMANCHE

Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire.

Grid

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.

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.

DIMANCHE

Nous avons joint nos forces sur javascript et réussi à créer un gabarit aléatoire.

Le nom de mon projet

Kévin Tessier

Reverse

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

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:

!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.

CtrlPtoSurvive

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

Recherches graphiques du Whole Earth Catalog:

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

Work in progress du projet :

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

Construction du poster A3:

Construction de la page Web:

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

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

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

    </script>

La mise en page est basée sur flexbox

Rendus du poster A3 à partir de la page Web:

Grâce à :

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

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

html2print:

update

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.

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)

arena2print

Timothée Goguely

24.06.17

The idea of this project is to connect are.na API with html2print to be able to print any Arena channel – like this one about Ivan Illich for example – at any format.

Create a new Rails app called "arena2print".

Install the Arena Ruby interface arena-rb into my app.

Implement authentication

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:

1. parse HTML to select all blocks
2. extract and store all block’s content
3. create a new HTML page from this content
4. add custom print CSS
5. launch browser print modal window!

Need to read and watch some tutorials to get an idea about the technical difficulty…

Ok, let’s try this one

Yeah, I just write my first Chrome Extension!
Right now, it’s only an dumb alert() script, but let’s continue…

…

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.

…

25.06.17

Yesterday, I have succeeded in displaying all the block’s content of a channel on pages.

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
  

…

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:

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!

Workshop Ola HTML2Print

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

Cookbook

Participants

• Sarah
• Nicolas
• Pierre-Yves
• Elie
• Kenji
• Timothée
• Bach
• Gab
• Elodie _Kévin _Angélique

Markdown primer

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

#titre 1
## titre 2 -> 6

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

*bold*²
**italique**

- liste
- liste
`code`

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.

Paquet de base

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

télécharger le dossier html2print.tiny

découverte des variables css o_O

:root{
    --ma-variable:210mm;
}

@page{
    width: var(--ma-variable);    
}

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

Documentation

howto

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

rendu

192.168.99.35:8000

textile

https://txstyle.org/

mise en commun projets (sam 14 juin, 14h)

OSP

prendre cet occase pour faire un cookbook de htmltoprint - césures - conversion RVB --> CMJN - faire couler du txt d'une page à une autre

Elie & Kenji

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

Angelique

contenu du wordpress de PY ou faire de la documentation html2print

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

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/

transfo des scripts de téâtre

Bachir

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

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 - 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-existance, une web et une print

Élodie

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

Nicolas

Whole Earth Catalogue
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

Outil dans l'esprit du Whole earth catalog, réactiver cette idée.
Plans pour construction de machines, comment se protéger de ___
Grille dans laquelle injecter du contenu pour faire cet objet catalogue (forme non définie pour l'instant: poster, magazine)
Libre Création - Libre Design
Libre Création - Libre Design (sources)

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

Pierre-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

tempsdereaction
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?

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

Show and tell

Bachir

Projet inspiré de Gitbook

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

Élodie

https://ordigami.net/

version écran on voit les faces du cube côte-côte et en version

Nicolas

http://perles-du-bon-coin.fr/

**Kevin http://csswarp.eleqtriq.com/

Lucile https://studiomoniker.com/projects/click-click-click https://clickclickclick.click/#e8d0c8a17bce3955716c16b413ee946b

## CSS obscure rule: margin-top of

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: "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

therefore taken and applied to the parent

. 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.

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/ -> 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-totally-forgot-about-print-style-sheets-f1e6604cfd6

processing connections

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

visualer les media print en redimensionnant la page

@media screen and (max-width: 699px) or media print { ... }

John Resig Micro template

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

https://johnresig.com/blog/javascript-micro-templating/

Césures

http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify

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

interdire les césures

-webkit-hyphens: none;
   -moz-hyphens: none;
        hyphens: none;

autoriser les césures

-webkit-hyphens: auto;

Gérer les césures

-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

CSS variables in @page

https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules

Convertir tous les fichiers HTML en Markdown

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

for file in *.html; do pandoc --from html --to markdown --output "{file%.*}.md" "file"; done

HTML2Print readme

exemples de readme visuels

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

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

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

workflow d'un numéro de Médor

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

python rss to html

https://figureslibres.io/gogs/bachir/python-rss2html

#!/usr/bin/python
# -*- coding: utf-8 -*-


import feedparser
from bs4 import BeautifulSoup

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

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

   # base template du fichier html
   base = "<html><head></head><body></body></html>"
   # create dom for html file base
   base_dom = BeautifulSoup(base, 'html.parser')

   # page base template
   page_base = "<section class='page'></section>"

   # 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[ "items" ] )

      # 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("index.html", 'w') as fp:
      fp.write(base_dom.prettify(formatter=None))


if __name__ == "__main__":
   main()

python pandoc and template

https://figureslibres.io/gogs/bachir/gitbook-html2print

#!/usr/bin/python
# -*- coding: utf-8 -*-

from bs4 import BeautifulSoup
import pypandoc

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


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

      pdoc_filters = []

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

      # print("output :\n"+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__ == "__main__":
   main()

Ajuster une image

voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

CSS regions

flow-main {

-webkit-flow-into: flow-main;
        flow-into: flow-main;

}

.flow-main { -webkit-flow-from: flow-main; flow-from: flow-main; }

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