OSP-BLOG

Open Source Publishing – Graphic Design Caravan

HTML sauce cocktail, sauce à part

News · February 15th, 2017 · · No Comments

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»2, 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 3 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.

image issue de la première présentation d’OSP d’utilisation d’HTML pour des documents multi-pages, Libre Graphics Meeting 2013, Madrid

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

Screenshot Etherpad

Le pad de la feuille de styles commune

Pyramide des différents formats produits: du A8 au A0.
Photo © Hugo Serraz, licence Art Libre

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

Screenshot Etherpad

Le pad de la feuille de styles commune

Nous travaillons sur Etherpad4, 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.

Pyramide des différents formats: du A0 au A7. Photo © Hugo Serraz, licence Art Libre

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

Mise à plat des différents objets imprimés.
Photo © Hugo Serraz, licence Art Libre

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.

Hugo Serraz a réalisé, à l’aide de notre outil, deux éditions, chacune imprimant les actualités d’une journée entière du site lemonde.fr.
Photo © Hugo Serraz

Léna Robin http://lenarobin.github.io/ a concocté une recette alternative avec Python et Prince XML. «Contextualised Informations est une réflexion sur la prévention et l’analyse des rumeurs et fausses informations qui circulent en ligne.»
Photo © Léna Robin

LIENS

NOTES

  1. Nous avons nommé notre workshop «HTML sauce cocktail» en référence au contenu apporté pour le workshop, un livre de recettes de cuisine belges, et aux sauces typiques des fritkots du royaume. 
  2. Qui ne demande pas à penser, basé sur des reflexes, des habitudes, des gestes familier. 
  3. Cela ne signifie pas qu’il n’y ait pas des jeux de pouvoir dans la définition de ces formats. 
  4. Etherpad est un éditeur de texte collaboratif et synchrone: les utilisateurs peuvent écrire en même temps sur un même doculent http://etherpad.org/. Dû aux restrictions de sécurité web des institutions publiques, nous ne pouvons pas utiliser le serveur Etherpad personnel d’OSP. Nous avons dû aller sur Framapad http://framapad.org/ pour contourner ce problème. 
  5. Le  projet Gutenberg est une archive de livres du domaine public: des livres que l’on peut redistribuer et réutiliser librement parce que les droits d’auteur ont expiré 70 ans après la mort de celui-ci. http://gutenberg.org/ 
  6. Ensemble de fonctions permettant d’automatiser la recherche et le remplacement d’éléments définis au préalable dans un texte. Une fonctionnalité que l’on retrouve dans divers langages de programmation, d’éditeurs de code et même dans… InDesign. 
  7. Intervenants : Stéphanie Vilayphiou, Colm O’Neill et Ludi Loiseau. Avec les étudiants en communication graphique années 2 à 5 : So-Hyun Bae, Laura Burucoa, Charlotte Chowdurry, Victor Donati, Montasser Drissi, Angéline Girard, Romain Goetz, Manon Hachad, Quentin Juhel, Théophile Martin, Arman Mohtadji, Clara Neumann, Lisa Pagès, Benjamin Riollet, Lena Robin, Hugo Serraz, Caroline Sorin. 
  8. Consultable sur le blog des étudiants de la HEAR : http://comgraph.hear.fr/2015/03/html-sauce-cocktail
  9. https://github.com/HEAR/HTML_sauce-cocktail-workshop-OSP

What’s the Matter with Cooperation @ BUDA

News · May 27th, 2016 · and · No Comments

Print Party What’s the Matter with Cooperation BUDA

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.

IMG_20160428_130300-s

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.

ethertoff-buda-screenshot

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.

Print Party What’s the Matter with Cooperation BUDA

Print Party What’s the Matter with Cooperation BUDA

Publication What’s the Matter with Cooperation BUDA

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.

Publication What’s the Matter with Cooperation BUDA

README.OSP: Exhibition @ Une Saison Graphique

News · May 7th, 2016 · · No Comments

Poster Une Saison Graphique 2016

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, 19th of May at 17:30, at the Maison de l’étudiant du Havre. The exhibition is on from the 20th of May to the 2nd 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.

cartonverso

OSP retreat in the Netherlands

News · April 25th, 2016 · · No Comments

Two days together to think about OSP in the future.

Discussion + Updating the website + Party.

Workshop Up Pen Down

News · October 9th, 2015 · · 1 Comment

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 24th and Sunday 25th of October in the Balsamine theatre, Brussels. On the 25th the doors will be open to the public from 16:00 onwards.

hoppe-pume-ton-og-image
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.

children_with_turtle_robot

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

din-stroke

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 24th 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:

Théâtre la Balsamine
Avenue Félix Marchal 1
1030 Bruxelles

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

OSP retreat in the Netherlands

News · April 25th, 2016 · · No Comments

Two days together to think about OSP in the future. Discussion + Updating the website + Party.

Workshop Up Pen Down

News · October 9th, 2015 · · 1 Comment

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 24th and Sunday 25th of October in the Balsamine theatre, Brussels. On the 25th the doors will be open […]

A new home for OSP

News · October 6th, 2015 · · No Comments

In what might be a some-what surprising move (even to ourselves) OSP has taken up offices in the World Trade Center. Do not hesitate to pass by! Send us a mail, and we will meet you in the lobby! Or write us a letter at: Avenue Roi Albert II / Koning Albert II laan 30, […]

Up Pen Down — Huppe plume tonne

Conversations · Education · Live · News · Print Party · Workshop · August 7th, 2015 · · No Comments

Announcing Up Pen Down — Huppe plume tonne a workshop and preformance during the Quinzaine Numérique 2015: specifics of the workshop are on their way, but for now, here is the introduction text: En 2012, OSP (Open Source Publishing) construit un workshop de plusieurs mois avec des étudiants de l’École Supérieure d’Art et Design de […]

OSP in 2014

News · July 13th, 2015 · · No Comments

Last February, OSP officially became an asbl/vzw: a Belgian association with no lucrative purposes. We are trying to get more structured and this goes through making precise activity reports. Here is the one for 2014 : OSP2014.pdf.

Relearn 2015

Live · News · June 28th, 2015 · Tags: · · · · · · · No Comments

Relearn is back for 2015! We’re very happy to see the summer school continue and morph into a new being again this year, with a new set of people taking care of the organization. Quick recap: OSP set up the first edition of Relearn in 2013. In 2014, Relearn was a jointed venture with all […]

ASBL Print party outcome

News · June 5th, 2015 · · No Comments

When you mix travel stories with non profit association elation, within the zero boundary format of a print party, what do you get? We came up with a mix of different things we wanted to share and show, and mixed them in with some more down to earth writing extracted from our Statutes. One article […]

Article III: Goal, social object, field of action

News · June 5th, 2015 · · No Comments

This is an extract from our association statutes. Links at the end of the page. The association OSP has as its main goal to propagate Free and Open Source culture in Brussels and internationally. More specifically, OSP asbl aims to stimulate the social movements of Free Culture and Free Software in the field of graphic […]

OSP ASBL VZW Celebration Print Party

News · May 28th, 2015 · · No Comments

We are happy to announce an OSP ASBL/VZW* celebration evening and Print Party. Back from our yearly travel to the Libre Graphics Meeting, full of Toronto stories, and soon to be tattooed with a VAT number, OSP welcomes you in their transit tavern. Join us in cutting, plotting and browsing recent works. Come to celebrate […]

HTML sauce cocktail

News · March 19th, 2015 · · No Comments

We just finished a great workshop week @HEAR Strasbourg on the topic of printing HTML. Printing HTML is not a new idea, but in the last few years we’ve been compiling sets of tools and scripts to properly use HTML as a base for proper layout. This idea has taken on several flavors over different […]

[More posts by browsing the archive →]