PREFACE

Ce texte a été initialement écrit pour la revue Back Office. Pour des raisons de format, il n’y sera pas publié, mais nous sommes heureux de le partager ici avec vous dans sa version longue.

HTML2PRINT SANS SAUCE

Depuis sa création en 2006, Open Source Publishing dessine des mises en page et code avec des logiciels libres ou open source. Il s’agit d’abord de questionner nos pratiques avec ces médiateurs omniprésents que sont les outils numériques et les communautés dont ils sont issus. Alors que la matérialité de l’informatique s’efface derrière des interfaces «intuitives»², le logiciel libre, par sa nature ouverte, invite à saisir l’épaisseur culturelle des formats, interfaces et usages.

Splines spirographiques, filtres ImageMagick ou lignes de commande sont quelques-unes des rencontres qui ont changé notre manière d’appréhender le vecteur, le bitmap ainsi que la manière de construire et de partager nos propres outils. Mais pour ce qui est de la mise en page, nous nous retrouvons face à un dilemme cornélien: celui d’avoir à choisir entre d’un côté une approche essentiellement visuelle, incarnée par Scribus et InDesign, et de l’autre une approche intégralement programmatique incarnée par TeX, LaTeX ou Context.

Dans sa tentative de simuler la manipulation directe de l’objet final, l’approche WYSIWYG se heurte aux limites du paradigme papier/ciseaux. Prisonnière de l’héritage de Gutenberg, elle ignore le potentiel de réinvention du média numérique. L’approche programmatique s’avère elle aussi décevante car systématique et linéaire. Fonctionnant à sens unique, du code vers le visuel, elle fonctionne bien pour mettre en page des flux continus mais permet très difficilement de débrayer et de créer des mises en pages plus articulées, notamment car le format final n’est plus éditable.

Après nous être au départ plus particulièrement concentrés sur des objets imprimés, nous avons commencé à investir le web comme espace de publication. Ce qui nous séduit dans le design web est l’approche collaborative ainsi que le va et vient qu’il permet entre design visuel et design par le code. Populaires, ultra-documentés et basés sur des formats ouverts élaborés par différents acteurs dans un souci de dialogue ³ et de continuité, les langages du web sont de véritables lingua franca: ils sont éditables par de nombreuses manières, «à la main» et via un large spectre de logiciels visuels ou programmatiques. Le navigateur web, pièce maîtresse, réunit en un même espace ces différentes approches. Par sa nature distribuée (une page étant généralement le résultat de l’agrégation de nombreuses ressources telles des feuilles de style ou des images), les formats du web permettent un travail collaboratif entre des personnes aux compétences diverses, contrastant avec l’approche solitaire des logiciels comme InDesign ou Scribus.

À divers niveaux tous les membres d’OSP ont une pratique du web et cette question revient : «Ne pourrions-nous pas utiliser les mêmes méthodologies et outils pour le design imprimé?». Après un petit audit nous décidons de nous lancer. Le premier projet sera pour le programme annuel du Théâtre la Balsamine. Mais si un grand nombre de propositions pour l’imprimé sont déjà prévues par les standards CSS, de nombreuses fonctionnalités indispensables (traits de coupe, pagination, titres courants…) ne sont pas encore implémentées dans les navigateurs web. Pour palier à ces lacunes, nous compilons une série de recettes pouvant désormais servir de gabarits pour de futurs projets. Nous l’intitulons html2print.

SAUCE COCKTAIL

Mars 2015, après deux années de pratique d’html2print en interne pour diverses commandes graphiques, nous pensons que l’outil est prêt à être «bêta-testé» par d’autres, notamment par des designers qui ne sont pas nécessairement développeurs. L’occasion d’un workshop à la HEAR de Strasbourg tombe à pic: quatre journées pour apprendre les bases HTML + CSS et produire un objet imprimé.

Par ses contraintes de tailles d’écrans multiple devices, la mise en page web se doit d’être adaptative, quelque part consciente de l’environnement dans lequel elle s’installe. De ce point de vue, elle s’oppose au design imprimé où la plupart des interfaces traditionnelles gardent nos mains fixées sur les blocs de Gutenberg. Nous proposons aux étudiants d’expérimenter les media queries, conditions CSS qui adaptent le design d’un site en fonction du dispositif de lecture (ordinateur, tablette, GSM…) ou de la taille de l’écran du lecteur. La fluidité du HTML rend très facile le changement de format: un changement dans les dimensions de la page et le reste coule. Pour épicer la sauce, nous proposons aux étudiants de travailler sur un Etherpad ⁴ permettant de produire ces différents formats à partir d’un même document. La taille de la fenêtre du navigateur change le format de la page imprimée ainsi que son design. Et, le fait de partager un seul et même document rend l’apprentissage de HTML et CSS beaucoup plus excitant et rapide. Les étudiants apprennent par eux-mêmes en voyant les changements des autres en direct.

Pour profiter pleinement de l’outil, nous proposons de travailler à partir d’un contenu d’une certaine longueur, avec plusieurs niveaux d’informations. Nous glanons sur le projet Gutenberg⁵ The Belgian Cook Book de Mrs. Brian Luck, une compilation de recettes d’émigrés belges au Royaume-Uni en 1915. L’avantage de cette archive étant que les livres y sont proposés dans différents formats dont HTML.

La première journée est consacrée à un cours accéléré sur les expressions rationelles (grep)⁶ et syntaxe de base des langages HTML/CSS. Le jour suivant, des groupes ad hoc et perméables se forment autour de plusieurs chantiers: nettoyage et optimisation des contenus en utilisant des expressions rationnelles; structuration sémantique des contenus HTML (titres, sous-titres, termes techniques, listes, etc.) et enfin la définition des styles visuels communs à tous les formats imprimables.

Puis, cinq équipes sont formées, chacune prenant en charge un format d’impression: A7 ? micro-format travaillant sur une mise en page en miroir; A6 paysage ? fiches de cuisine cannibale où les ingrédients sont remplacés par des noms de personnes avec grep; 215×330mm ? grand format à consulter posé sur une table; 990×1075mm ? affiches sérigraphiées avec zoom sur les adverbes avec grep; multi-format ? grâce à la propriété float de CSS, les blocs de recettes coulent de gauche à droite comme du texte, la mise en page s’adapte ainsi d’elle-même selon la taille du livre. Une sixième équipe se consacre à la réalisation d’illustrations ASCII via Etherpad.

Nous travaillons sur Etherpad⁴, un éditeur de texte collaboratif. C’est un des points clés du workshop: la mise en commun du code rend son apprentissage beaucoup plus excitant et rapide. Les étudiants apprennent les uns des autres en voyant les changements en direct. Un seul document définit l’ensemble des objets à produire: la taille de la fenêtre du navigateur change le format de la page imprimée ainsi que son design, suivant les règles de tailles, définies en CSS.

Le dernier jour du workshop est consacré à l’impression, à la prise de vue⁸ et présentation des objets éditoriaux. Les fichiers sources et l’historique du projet sont mises en ligne sur GitHub. ⁹.

DEGUSTATION

Concevoir un objet imprimé avec HTML est une expérience nouvelle pour tous et la différence de niveaux des étudiants (degré d’étude, connaissances techniques) ne s’est pas manifestée. Html2print est un outil pédagogiquement intéressant car il supprime le clivage écran/imprimé. De plus, les navigateurs web étant par conception tolérants à l’erreur, ils permettent toujours d’obtenir un résultat, même imparfait. Par ailleurs, le fait d’avoir plusieurs objets sur un même document était très stimulant pour les étudiants qui pouvaient à tout moment suivre leur évolution. Au-delà leur intérêt ortho-typographique, les expressions rationnelles furent grandement utilisées pour tordre les contenus et leur design. Enfin, le fait que les technologies abordées dans le workshop soient très populaires et documentées sur le web, en anglais mais aussi en français, aiguise la motivation des étudiants.

SAUCE SAMOURAI

Suite au workshop donné à la HEAR Strasbourg, la sauce html2print commence doucement à prendre et continue de s’imprimer sur papier. Ainsi deux participants au workshop ont poursuivi leur travaux: Hugo Serraz et Léna Robin.

LIENS

• Fichiers source d’html2print: http://osp.kitchen/tools/html2print/
• Article de blog des étudiants de la HEAR: http://comgraph.hear.fr/2015/03/html-sauce-cocktail/
• Fichiers source du workshop: https://github.com/HEAR/HTML_sauce-cocktail-workshop-OSP
• Site répertoriant des mises en page générées par du code: http://computedlayout.tumblr.com/

NOTES

What can we learn about our current society by looking at the increasing production of art works that are made in cooperation with their audience? And in reverse, how does the general raise of cooperative activism in the society influence the arts?

The art centre BUDA, located in the West Flemish city of Kortrijk, organised a three day festival around these questions: ‘What’s the matter with cooperation’. Reclaiming the idea of participation, people inside and outside the Arts do believe that one can take part in shaping the society. From the ‘emancipated spectator’ to the ‘empowered citizen’, BUDA was filled during 3 days with performances, lectures and co-learning situations that all implicitly and explicitly dealt with questions of cooperation.

Plotted instructions for the participants

OSP joined the festival to create in cooperation a publication, using the Ethertoff platform. We concentrated on the theoretical section of the festival: a series of lectures taking place in a makeshift forum. BUDA had constructed this forum space in its entrance hall especially for the event. OSP had setup a working station here. We projected the ethertoff install right next to where the lectures slides were projected, to lure attention to the tool and show there was activity there. As usual with Ethertoff, we designed live while the content was still being developed.

Screenshot of the ethertoff platform while editing was in progress

Ethertoff was first used in a similar context, to document the summer school Relearn. A marked difference this time was that a number of lecturers already provided a text beforehand, that we had already pasted into Ethertoff. In this way, the various editors that participated did not need to concentrate on just paraphrasing the lectures, but could spend their time annotating the lectures. Every morning started with a short workshop on the platform: how the etherpad collaborative works, the markdown syntax. But also to create a common understanding of how to treat the text, a common editing protocol.

The participants—most of them active in the milieu of the performing arts—where remarkably enthousiastic to participate in this editing process. We think this might have to do with the nature of performing arts, in which makers are always looking for new ways to deal with the ephemeral processes on which they work. To collaboratively create traces of a shared event makes sense more so then for the general public.

At the closing of the festival we organised a print party, where the participants eagerly took the (still laser-hot) papers out of Sarahs hands as she exited the elevator with the final chapters: we had underestimated the printing time. Everybody could learn how to use the ring binding system, and then collate and bind their own copy. We had created a stack of paper for each lecture, with the idea that one could pick and choose—it turned out everybody took everything.

You can download the PDF. There’s also a version without the coloured backgrounds, so you can print on coloured paper yourself.

A note on tooling: we installed Etherpad & -toff on a Raspberry Pi. It was a tiny bit slow, but very stable. We plugged it in to BUDA’s existing network infrastructure. This means the Ethertoff platform was not accessible from the general internet—only from inside BUDA. It’s great to have this self-contained unit, and not to be able to access the tools when you leave the space. Both for the notetakers and for us. It helps to combat a problem with the workflow: because it is a very free collaboration model, participants can always think: someone will do it later. Clear time constraints really help then. It also answers a question we always have after the event: who takes care of the website? We made it clear from the beginning that the tool would away at the end of the event with the unplugging of the Raspberry. What we did do, is create a HTML archive, next to the PDF—just like with the Relearn 2013 website.

As part of the yearly Design Festival Une Saison Graphique, and in collaboration with l’École Supérieure d’Art et Design Le Havre-Rouen, OSP would like to invite you to its exhibition README.OSP!

It has been 10 years since the first public OSP blog post, and README.OSP takes the opportunity to reflect on the potential of a shared process. For years, OSP has been publishing all source files of its projects, even if that means material that is in a rough state. For the exhibition, both OSP members and students of the ESADHaR have excavated the publicly available archives to extract patterns and recipes, to go beyond documentation to the proposal of a future tool.

You are cordially invited to the vernissage, Thursday 19/05 at 19h30, at the Galerie 65 de l’ESADHaR, 65 rue Demidoff, Le Havre.

The vernissage is preceded by a lecture, 19^th of May at 17:30, at the Maison de l’étudiant du Havre. The exhibition is on from the 20^th of May to the 2^nd of July, from Monday until Saturday, from 14h30 to 19h. The 21st of May a visit to the exhibition can be combined with a number of events, including a bicycle tour of the exhibitions, a graphical kermis and a party. For more info see the website of Une Saison Graphique.

Two days together to think about OSP in the future.

Discussion + Updating the website + Party.

Up Pen Down – Huppe Plume Tonne is a workshop linking typography and performance. It is a collaboration between OSP and choreographer Adva Zakai, and you are invited to participate!

The workshop will take place Saturday 24^th and Sunday 25^th of October in the Balsamine theatre, Brussels. On the 25^th the doors will be open to the public from 16:00 onwards.

OSP and the students of ÉSAD Grenoble Valence getting ready to draw letterforms.

In Up Pen Down – Huppe Plume Tonne the participants blow up the scale of the movements of both drawing (down) and non-drawing (up). Uprooting both the forms produced and the movements required, the workshop is meant both for performers and designers.

Seymour Papert taught mathematics through drawing instructions children would give to the computer, other children, or in this case—to a drawing robot.

The DIN typeface is specified through drawing instructions: defined by its stroke rather than its contour.

Up pen down – Huppe Plume Tonne takes inspiration from the work of the English mathematician Seymour Papert, who tried to create an embodied understanding of mathematics through his LOGO language. Papert created a language, understood both by humans and computers, that describes drawings not in an absolute cartesian grid, but from the perspective of the person that is drawing. LOGO prefigures similar languages that use drawing instructions to communicate between computers and early drawing devices. Up Pen Down – Huppe Plume Tonne builds on the research effectuated by OSP with the students of the ÉSAD Grenoble Valence in 2012-2013.

For Up Pen Down – Huppe Plume Tonne, OSP collaborates with Adva Zakai, Brussels-based choreographer and performer. Adva’s recent work explores how body and language are perceived through each other. Just as much as the body seems to recede under its textual interpretation, our very understanding of text becomes more embodied.

The first day of the workshop will be Saturday 24^th of October from 10:00 to 17:30. Sunday the 25th the workshop starts again at 10:00 also. From 16:00 onwards the doors will be open for the public.

Address:

Up Pen Down – Huppe Plume Tonne is part of the Festival des Arts Numériques and made possible by the Wallonia-Brussels Federation.