{"id":7577,"date":"2017-02-15T23:11:30","date_gmt":"2017-02-15T21:11:30","guid":{"rendered":"http:\/\/ospublish.constantvzw.org\/blog\/?p=7577"},"modified":"2017-02-16T18:09:48","modified_gmt":"2017-02-16T16:09:48","slug":"html-sauce-cocktail-sauce-a-part","status":"publish","type":"post","link":"http:\/\/ospublish.constantvzw.org\/blog\/news\/html-sauce-cocktail-sauce-a-part","title":{"rendered":"HTML sauce cocktail, sauce \u00e0 part"},"content":{"rendered":"

PREFACE<\/h2>\n

Ce\u00a0texte a \u00e9t\u00e9 initialement \u00e9crit pour la revue Back Office<\/a>. Pour des raisons de format, il\u00a0n’y sera pas publi\u00e9, mais nous sommes heureux de le partager ici avec vous dans sa version longue.<\/p>\n

HTML2PRINT SANS SAUCE<\/h2>\n

Depuis sa cr\u00e9ation en 2006, Open Source Publishing dessine des mises en page et code avec des logiciels libres ou open source. Il\u00a0s’agit d’abord de questionner nos pratiques avec ces m\u00e9diateurs omnipr\u00e9sents que sont les outils num\u00e9riques et les communaut\u00e9s dont ils sont issus. Alors que la mat\u00e9rialit\u00e9 de l’informatique s’efface derri\u00e8re des interfaces \u00abintuitives\u00bb2<\/a><\/sup>, le\u00a0logiciel libre, par\u00a0sa nature ouverte, invite \u00e0 saisir l’\u00e9paisseur culturelle des formats, interfaces et usages.<\/p>\n

Splines spirographiques, filtres ImageMagick ou lignes de commande sont quelques-unes des rencontres qui ont chang\u00e9 notre mani\u00e8re d’appr\u00e9hender le vecteur, le\u00a0bitmap ainsi que la mani\u00e8re de construire et de partager nos propres outils. Mais pour ce qui est de la mise en page, nous nous retrouvons face \u00e0 un dilemme corn\u00e9lien: celui d’avoir \u00e0 choisir entre d’un c\u00f4t\u00e9 une approche essentiellement visuelle, incarn\u00e9e par Scribus et InDesign, et\u00a0de l’autre une approche int\u00e9gralement programmatique incarn\u00e9e par TeX, LaTeX ou Context.<\/p>\n

Dans sa tentative de simuler la manipulation directe de l’objet final, l’approche WYSIWYG se heurte aux limites du paradigme papier\/ciseaux. Prisonni\u00e8re de l’h\u00e9ritage de Gutenberg, elle ignore le potentiel de r\u00e9invention du m\u00e9dia num\u00e9rique. L’approche programmatique s’av\u00e8re elle aussi d\u00e9cevante car syst\u00e9matique et lin\u00e9aire. Fonctionnant \u00e0 sens unique, du\u00a0code vers le visuel, elle fonctionne bien pour mettre en page des flux continus mais permet tr\u00e8s difficilement de d\u00e9brayer et de cr\u00e9er des mises en pages plus articul\u00e9es, notamment car le format final n’est plus \u00e9ditable.<\/p>\n

Apr\u00e8s nous \u00eatre au d\u00e9part plus particuli\u00e8rement concentr\u00e9s sur des objets imprim\u00e9s, nous avons commenc\u00e9 \u00e0 investir le web comme espace de publication. Ce\u00a0qui nous s\u00e9duit 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\u00e9s et bas\u00e9s sur des formats ouverts \u00e9labor\u00e9s par diff\u00e9rents acteurs dans un souci de dialogue 3<\/a><\/sup> et de continuit\u00e9, les\u00a0langages du web sont de v\u00e9ritables lingua franca<\/em>: ils sont \u00e9ditables par de nombreuses mani\u00e8res, \u00ab\u00e0\u00a0la main\u00bb et via un large spectre de logiciels visuels ou programmatiques. Le\u00a0navigateur web, pi\u00e8ce ma\u00eetresse, r\u00e9unit en un m\u00eame espace ces diff\u00e9rentes approches. Par\u00a0sa nature distribu\u00e9e (une page \u00e9tant g\u00e9n\u00e9ralement le r\u00e9sultat de l\u2019agr\u00e9gation de nombreuses ressources telles des feuilles de style ou des images), les\u00a0formats du web permettent un travail collaboratif entre des personnes aux comp\u00e9tences diverses, contrastant avec l’approche solitaire des logiciels comme InDesign ou Scribus.<\/p>\n

\u00c0 divers niveaux tous les membres d’OSP\u00a0ont une pratique du web et cette question revient : \u00abNe\u00a0pourrions-nous pas utiliser les m\u00eames m\u00e9thodologies et outils pour le design imprim\u00e9?\u00bb. Apr\u00e8s un petit audit nous d\u00e9cidons de nous lancer. Le\u00a0premier projet sera pour le programme annuel du Th\u00e9\u00e2tre la Balsamine. Mais si un grand nombre de propositions pour l’imprim\u00e9 sont d\u00e9j\u00e0 pr\u00e9vues par les standards CSS, de\u00a0nombreuses fonctionnalit\u00e9s indispensables (traits de coupe, pagination, titres courants\u2026) ne sont pas encore impl\u00e9ment\u00e9es dans les navigateurs web. Pour palier \u00e0 ces lacunes, nous compilons une s\u00e9rie de recettes pouvant d\u00e9sormais servir de gabarits pour de futurs projets. Nous l’intitulons html2print.<\/p>\n

\"\"
image issue de la premi\u00e8re pr\u00e9sentation d’OSP\u00a0d’utilisation d’HTML pour des documents multi-pages, Libre Graphics Meeting 2013, Madrid<\/figcaption><\/figure>\n

<\/h2>\n

SAUCE COCKTAIL<\/h2>\n

Mars 2015, apr\u00e8s deux ann\u00e9es de pratique d’html2print en interne pour diverses commandes graphiques, nous pensons que l’outil est pr\u00eat \u00e0 \u00eatre \u00abb\u00eata<\/em>-test\u00e9\u00bb par d’autres, notamment par des designers qui ne sont pas n\u00e9cessairement d\u00e9veloppeurs. L’occasion d’un workshop \u00e0 la HEAR de Strasbourg tombe \u00e0 pic: quatre journ\u00e9es pour apprendre les bases HTML + CSS\u00a0et produire un objet imprim\u00e9.<\/p>\n

Par\u00a0ses contraintes de tailles d’\u00e9crans multiple devices<\/em>, la\u00a0mise en page web se doit d’\u00eatre adaptative, quelque part consciente de l’environnement dans lequel elle s’installe. De\u00a0ce point de vue, elle s’oppose au design imprim\u00e9 o\u00f9 la plupart des interfaces traditionnelles gardent nos mains fix\u00e9es sur les blocs de Gutenberg. Nous proposons aux \u00e9tudiants d’exp\u00e9rimenter les media queries<\/em>, conditions CSS\u00a0qui adaptent le design d’un site en fonction du dispositif de lecture (ordinateur, tablette, GSM\u2026) ou de la taille de l’\u00e9cran du lecteur. La\u00a0fluidit\u00e9 du HTML rend tr\u00e8s facile le changement de format: un changement dans les dimensions de la page et le reste coule. Pour \u00e9picer la sauce, nous proposons aux \u00e9tudiants de travailler sur un Etherpad 4<\/a><\/sup> permettant de produire ces diff\u00e9rents formats \u00e0 partir d’un m\u00eame document. La\u00a0taille de la fen\u00eatre du navigateur change le format de la page imprim\u00e9e ainsi que son design. Et,\u00a0le fait de partager un seul et m\u00eame document rend l’apprentissage de HTML et CSS\u00a0beaucoup plus excitant et rapide. Les\u00a0\u00e9tudiants apprennent par eux-m\u00eames en voyant les changements des autres en direct.<\/p>\n

\"Screenshot
Le\u00a0pad<\/em> de la feuille de styles commune<\/figcaption><\/figure>\n

\"\"<\/p>\n

\"\"
Pyramide des diff\u00e9rents formats produits: du A8\u00a0au A0.
\nPhoto \u00a9 Hugo Serraz, licence Art\u00a0Libre<\/figcaption><\/figure>\n

Pour profiter pleinement de l’outil, nous proposons de travailler \u00e0 partir d’un contenu d’une certaine longueur, avec plusieurs niveaux d’informations. Nous glanons sur le projet Gutenberg5<\/a><\/sup> The\u00a0Belgian Cook Book<\/em> de Mrs. Brian Luck, une\u00a0compilation de recettes d’\u00e9migr\u00e9s belges au Royaume-Uni\u00a0en 1915. L’avantage de cette archive \u00e9tant que les livres y sont propos\u00e9s dans diff\u00e9rents formats dont HTML.<\/p>\n

La\u00a0premi\u00e8re journ\u00e9e est consacr\u00e9e \u00e0 un cours acc\u00e9l\u00e9r\u00e9 sur les expressions rationelles (grep)6<\/a><\/sup> et syntaxe de base des langages HTML\/CSS. Le\u00a0jour suivant, des\u00a0groupes ad hoc<\/em> et perm\u00e9ables se forment autour de plusieurs chantiers: nettoyage et optimisation des contenus en utilisant des expressions rationnelles; structuration s\u00e9mantique des contenus HTML (titres, sous-titres, termes techniques, listes, etc.) et enfin la d\u00e9finition des styles visuels communs \u00e0 tous les formats imprimables.<\/p>\n

Puis, cinq \u00e9quipes sont form\u00e9es, chacune prenant en charge un format d’impression: A7\u00a0? micro-format travaillant sur une mise en page en miroir; A6\u00a0paysage ? fiches de cuisine cannibale o\u00f9 les ingr\u00e9dients sont remplac\u00e9s par des noms de personnes avec grep; 215\u00d7330mm ? grand format \u00e0 consulter pos\u00e9 sur une table; 990\u00d71075mm ? affiches s\u00e9rigraphi\u00e9es avec zoom sur les adverbes avec grep; multi-format ? gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 float<\/em> de CSS, les\u00a0blocs de recettes coulent de gauche \u00e0 droite comme du texte, la\u00a0mise en page s’adapte ainsi d’elle-m\u00eame selon la taille du livre. Une\u00a0sixi\u00e8me \u00e9quipe se consacre \u00e0 la r\u00e9alisation d’illustrations ASCII via Etherpad.<\/p>\n

\"Screenshot
Le\u00a0pad<\/em> de la feuille de styles commune<\/figcaption><\/figure>\n

Nous travaillons sur Etherpad4<\/a><\/sup>, un\u00a0\u00e9diteur de texte collaboratif. C’est un des points cl\u00e9s du workshop: la mise en commun du code rend son apprentissage beaucoup plus excitant et rapide. Les\u00a0\u00e9tudiants apprennent les uns des autres en voyant les changements en direct. Un\u00a0seul document d\u00e9finit l’ensemble des objets \u00e0 produire: la taille de la fen\u00eatre du navigateur change le format de la page imprim\u00e9e ainsi que son design, suivant les r\u00e8gles de tailles, d\u00e9finies en CSS.<\/p>\n

\"\"
Pyramide des diff\u00e9rents formats: du A0\u00a0au A7. Photo \u00a9 Hugo Serraz, licence Art\u00a0Libre<\/figcaption><\/figure>\n

Le\u00a0dernier jour du workshop est consacr\u00e9 \u00e0 l’impression, \u00e0\u00a0la prise de vue8<\/a><\/sup> et pr\u00e9sentation des objets \u00e9ditoriaux. Les\u00a0fichiers sources et l’historique du projet sont mises en ligne sur GitHub. 9<\/a><\/sup>.<\/p>\n

\"\"
Mise \u00e0 plat des diff\u00e9rents objets imprim\u00e9s.
\nPhoto \u00a9 Hugo Serraz, licence Art\u00a0Libre<\/figcaption><\/figure>\n

<\/h2>\n

DEGUSTATION<\/h2>\n

Concevoir un objet imprim\u00e9 avec HTML est une exp\u00e9rience nouvelle pour tous et la diff\u00e9rence de niveaux des \u00e9tudiants (degr\u00e9 d’\u00e9tude, connaissances techniques) ne s’est pas manifest\u00e9e. Html2print est un outil p\u00e9dagogiquement int\u00e9ressant car il supprime le clivage \u00e9cran\/imprim\u00e9. De\u00a0plus, les\u00a0navigateurs web \u00e9tant par conception tol\u00e9rants \u00e0 l’erreur, ils\u00a0permettent toujours d’obtenir un r\u00e9sultat, m\u00eame imparfait. Par\u00a0ailleurs, le\u00a0fait d’avoir plusieurs objets sur un m\u00eame document \u00e9tait tr\u00e8s stimulant pour les \u00e9tudiants qui pouvaient \u00e0 tout moment suivre leur \u00e9volution. Au-del\u00e0 leur int\u00e9r\u00eat ortho-typographique, les\u00a0expressions rationnelles furent grandement utilis\u00e9es pour tordre les contenus et leur design. Enfin, le\u00a0fait que les technologies abord\u00e9es dans le workshop soient tr\u00e8s populaires et document\u00e9es sur le web, en\u00a0anglais mais aussi en fran\u00e7ais, aiguise la motivation des \u00e9tudiants.<\/p>\n

<\/h2>\n

SAUCE SAMOURAI<\/h2>\n

Suite au workshop donn\u00e9 \u00e0 la HEAR Strasbourg, la\u00a0sauce html2print commence doucement \u00e0 prendre et continue de s’imprimer sur papier. Ainsi deux participants au workshop ont poursuivi leur travaux: Hugo Serraz et L\u00e9na Robin.<\/p>\n

\"\"<\/a>
Hugo Serraz a r\u00e9alis\u00e9, \u00e0\u00a0l’aide de notre outil, deux \u00e9ditions, chacune imprimant les actualit\u00e9s d’une journ\u00e9e enti\u00e8re du site lemonde.fr<\/em>.
\nPhoto \u00a9\u00a0Hugo Serraz<\/figcaption><\/figure>\n
<\/a>
L\u00e9na Robin http:\/\/lenarobin.github.io\/<\/a> a concoct\u00e9 une recette alternative avec Python et Prince XML. \u00abContextualised Informations<\/em> est une r\u00e9flexion sur la pr\u00e9vention et l’analyse des rumeurs et fausses informations qui circulent en ligne.\u00bb
\nPhoto \u00a9 L\u00e9na Robin<\/figcaption><\/figure>\n

<\/h3>\n

LIENS<\/h3>\n