Date:
05.12.2016

valence_blog2

Nous intervenons à l’ESAD Valence (http://esad-gv.net/) dans le cadre du programme « Invité annuel » de l’école. Quatre fois une semaine de workshop avec les étudiants de quatrième année de l’option design graphique.

Description du projet en date du 5 décembre 2016:
Le design comme l’écriture de projet pour la recherche – l’échange, la confrontation et la transmission – de connaissances à travers des programmes de (prise de) parole en collectif. Nous entendons la parole comme acte individuel d’actualisation du langage; le débat comme événement d’activation ou espace de réalisation de ce projet. Le design comme écriture de questions ou écriture de programmes générateurs de problèmes. Se débattre, se quereller, ne pas être poli, questionner les structures. Utiliser le design comme un outil. Écrire, designer des programmes. Être utilisateur de ses propres programmes. En privilégiant la parole. La parole incertaine, précaire qui porte « la chair vivante du flux signifiant ». En tant que designers, un des problèmes qui est posé est comment permettre la diffusion et la réalisation de cette parole sur pour et dans l’École et quels outils numériques utiliser? Parce que le design se situe dans différents champs d’action et se pense à différents niveaux, le projet propose de considérer ce qui est à l’oeuvre en amont dans les processus de design; ce qui relève des intentions, de la formulation des problèmes, de la discussion comme l’essence même du design et, d’autre part, questionne son enseignement en tant que discipline en école d’art.

Avec les étudiants de Valence, DG4:
Alexis BOSCARIOL
Maxime BOUTON
Benoît CANAUD
Baptiste BIGNON
Jennifer LEMOY
Elise HODE
Laetitia AYRAULT
Maïa BOUMPOUTOU
Johan CHANEAC
Sarah DISCOURS
Sarah WOODHOUSE


Date:
21.12.2015

Entre juillet et septembre 2015, à la demande de la caravane graphique OSP, j’ai contribué au développement des outils de mise en page pour la réalisation du magasine Médor. Médor est ce « magazine trimestriel belge et coopératif d’enquêtes et de récits » qui, à peine imprimé, a été interdit de diffusion pour être autorisé 12 jours après (voir ici puis ici, et ). Une des particularités de Médor est qu’il est mis en page via des outils utilisés habituellement pour le web et que cette mise en page, par les outils utilisés qui sont des langages standards du web, est essentiellement (d)écrite. Les graphistes d’OSP explorent depuis un moment les possibilités d’utilisation des ces outils web pour l’édition (voir leur outil html2print) et j’ai de mon côté développé l’idée dans le cadre des supports imprimés pour le BRASS.

Pour Médor, ma contribution a été essentiellement d’écrire un court script (en less) qui permet de générer automatiquement des règles de positionnement de blocs en CSS selon une grille donnée. L’idée était de donner la possibilité aux graphistes de créer des blocs de contenu attachés à la grille, sans devoir calculer la position ou les dimensions des blocs. Où le code html suivant:

 <div class="x3 y2 w3 h4"></div>

Crée un bloc aligné sur la 3ème colonne et sur la 2ème ligne de la grille, dont la largeur est égale à 3 colonnes et la hauteur à 4 lignes. Pour que cela fonctionne, il faut que les classes x3 y2 w3 et h4 aient été générées et c’est précisément l’utilité du script, que voici:

/*Page setup*/
@page-width: 482pt;
@page-height: 652pt;

/* Margins */
@page-margin-inside: 34pt;
@page-margin-outside: 24pt;
@page-margin-top: 24pt;
@page-margin-bottom: 40pt;

@body-width:@page-width - @page-margin-inside - @page-margin-outside;
@body-height:@page-height - @page-margin-top - @page-margin-bottom;

/*Grid setup*/
@col-number: 9;
@col-gutter: 6pt;

@row-number: 9;
@row-gutter: 6pt;

/*Grid builder*/
@col-width: (@body-width - ((@col-number - 1) * @col-gutter)) / @col-number;
@row-height: (@body-height - ((@row-number - 1) * @row-gutter)) / @row-number;

@col-gutter-width: @col-width+@col-gutter;
@row-gutter-height: @row-height+@row-gutter;

/* x classes */
.create-x-classes(@i:0) when(@i < @col-number){
    .x@{i}{
       left:@i * @col-width + @i * @col-gutter;
    }
    .create-x-classes(@i + 1);
}
.create-x-classes();

/* y classes */
.create-y-classes(@i:0) when(@i < @row-number){
    .y@{i}{
       top:@i * @row-height + @i * @row-gutter;
    }
    .create-y-classes(@i + 1);
}
.create-y-classes();

/* width classes */
.create-w-classes(@i:1) when(@i <= @col-number){
    .w@{i}{
       width:@col-width * @i + @col-gutter * (@i - 1);
    }
    .create-w-classes(@i + 1);
}
.create-w-classes();

/* height classes */
.create-h-classes(@i:1) when(@i <= @row-number){
    .h@{i}{
       height:@row-height * @i + @row-gutter * (@i - 1);
    }
    .create-h-classes(@i + 1);
}
.create-h-classes();

La conversion colorimétrique des documents pdfs à envoyer à l’imprimeur a été assurée par l’outil « color_convert.sh » dont j’ai déjà parlé dans un article sur le BRASS.


Date:
09.10.2015

blog3

82400012

82400010

82400011

blog1

82400002

82390015

Samedi passé, j’ai présenté pour la première fois l’installation Homeopape, dans le cadre de la Nuit Blanche à Bruxelles. Projet directement lié aux travaux que j’ai mené au sein de La Villa Hermosa ou en dehors sur les flux d’actualité sur Internet, Homeopape est une installation qui se nourrit des dépêches diffusées par l’agence de presse BELGA.

Le dispositif est le suivant: à chaque dépêche publiée par l’agence de presse, un mur de 20 imprimantes l’impriment en 20 parties. La dépêche n’est lisible qu’à la fin de l’impression, juste avant que les feuilles de papier ne tombent et ne soient dispersées par des ventilateurs.

Le lieu mis à disposition pour l’installation était un abri datant de la deuxième guerre mondiale situé en dessous d’un bassin dans le centre de la ville. Deux écrans de projection étaient placés sur le bassin, le premier affichant l’image d’une caméra filmant l’intérieur de l’abri et le deuxième affichant la sortie du programme chargé de surveiller le flux de BELGA.

Merci à Koen de Leeuw, Marc Dewit, Nancy Galant, Jean-Louis et l’équipe technique « Nuit Blanche », à Tom Wuytack et Vincent Fréry de l’agence BELGA pour m’avoir permis d’accéder au flux, à iMAL et Yannick Antoine, à Sophie Martin, Dominique Maes, Yonghi Yim, Alexis Jurdant, Colette Hellings, Eglantine Maes, Pierre-Philippe Duchâtelet et David Widart.

lire la suite


Date:
21.05.2015

hersh

Autour de 1967, dans le laboratoire Naval Weapons Laboratory en Virginie, un certain Dr. A. V. Hershey a développé une collection de caractères destinés à être tracés (avec de la lumière ou de l’encre) par des dispositifs électroniques. Le NWL report 2101 (Calligraphy for computers), contenant notamment la description des caractères développés parait le premier août 1967. Nous sommes en 2015 et nous avons utilisé ces caractères pour réaliser les différents supports réalisés pour et avec le photographe David Widart. Ces caractères ont la particularité d’être dessinés par leur squelette, pas par leur contour, ce qui les rend parfait pour les traceurs que nous avons utilisés. L’épaisseur du trait dépend de l’outil utilisé pour tracer.

Pour pouvoir utiliser ces caractères avec nos traceurs, nous avons utilisé un plugin pour le programme de dessin vectoriel Inkscape, qui utilise non pas le format original des caractères mais leur équivalent en svg. Cette traduction du format initial vers le svg a été faite par un certain Marty McGuire. Pour les notices des photographies sur le site web de David, je voulais utiliser ces caractères. Je suis tombé sur le projet Hershey Text JS qui est une adaptation du plugin Inkscape en javascript, utilisable donc sur une page web. Ce code fonctionne bien, mais ne répondait pas entièrement aux besoins du site. J’ai donc écrit une librairie javascript, HersheyReturns, qui permet de convertir des éléments textuels d’une page en images svg avec les caractères Hershey. Le principe général (remplacer les lettres par des chemins vectoriels) est identique à Hershey Text JS, mais la librairie, écrite dans l’idée de pouvoir s’appliquer facilement à l’ensemble d’une page web contenant du texte à convertir, a ses propres particularités :

  • elle remplace le texte présent dans un conteneur html par un élément svg et utilise les attributs css du conteneur pour régler le rendu. La largeur du bloc de texte, la couleur et la taille du texte, l’interlignage et l’interlettrage se règlent donc dans le css, pas besoin de spécifier une énorme liste d’options dans le javascript.
  • les espacements (entre les lettres, entre les mots, entre les lignes), s’adaptent automatiquement au corps de texte et à l’échelle spécifiés.
  • une option permet de mettre à l’échelle la typo en hauteur (scaleHeight) ou largeur (scaleWidth). L’épaisseur du trait n’est pas affectée par le changement d’échelle.
  • la gestion des retours charriot est différente : il y a passage à la ligne avant (et pas après) qu’un mot ne déborde du bloc de texte.
  • la hauteur du bloc de texte s’adapte automatiquement en fonction du contenu.
  • le rendu peut-être recalculé à chaque redimensionnement de l’écran (le rendu s’adapte à la largeur de l’écran).


HersheyReturns est téléchargeable ici.

screenshot


Date:
03.04.2015

brass-print-tool---New-Page(2)

Dans le cadre de la conception de l’identité visuelle du BRASS — Centre Culturel de Forest, nous avons développé un outil de génération automatique de documents pdf pour supports imprimés. Les fichiers pour affiches et flyers peuvent être directement créés par l’équipe du centre culturel via l’interface d’administration de leur site Internet (www.lebrass.be). Cet outil, dont la première version est utilisable par l’équipe du BRASS, sera amené à évoluer au sein de notre collaboration avec le BRASS, mais aussi, dans la mesure où il s’agit pour nous d’un premier résultat provenant d’une recherche plus large, dans la réalisation de prochains travaux.
L’objectif est multiple : profiter de la centralisation des informations relatives aux activités du BRASS sur le site (utiliser les mêmes informations encodées à la fois pour le site web et pour les supports imprimés, donc éviter les multiples encodages) ; permettre à l’équipe interne de gérer elle même la production de supports imprimés relatifs à la programmation du centre (affiches et flyers), donc ne plus dépendre de notre intervention systématique pour la production de ces supports et utiliser l’identité comme un outil ; expérimenter de nouvelles façons de produire des fichiers destinés à l’impression (tendre vers des systèmes de layout qui réagissent au contenu).


lire la suite


Date:
19.10.2012

Le site Diwans.org, projet commencé en février 2011, est en ligne. Ce travail a énormément évolué au fil du temps ; devenu participatif, il est ouvert au visiteur désireux de répondre par du son ou de la vidéo au contenu déjà présent. Les trois parties du site ; Explore, Experience, Dialogue correspondent à trois degrés de lectures différents. Une visualisation de la structure formée par le contenu pour Explore, le visionnage et l’écoute du contenu audio-visuel pour Experience et le détail textuel de ce contenu pour Dialogue. Les premières oeuvres encodées dans le site sont des poèmes de Goethe et Hafez. Le dialogue entamé par Goethe en réponse aux poèmes d’Hafez est perpétué à travers des oeuvres audiovisuelles qui appellent elles-mêmes d’autres réponses.

Ce projet a été présenté lors de la Sufi Night, le 19 septembre au Bozar (Bruxelles) et sera présent lors du Zebra poetry film festival (Berlin) le 20 octobre.


Date:
12.07.2012

Bande son de la conférence de la villa hermosa à l’ESAD, Valence, le 23 avril 2012.


Date:
20.10.2010


Date:
25.05.2010

Lionel de la villa hermosa sera à Limoges du 3 au 6 juin à l’occasion du « webdesign international festival » (WIF). Il participera le samedi 5 à une table ronde sur le design d’information. Si vous habitez Limoges ou si l’envie vous prend de vous égarer jusqu’à cette délicieuse petite ville, n’hésitez pas, venez.


Date:
24.03.2010

[swf]http://blog.lavillahermosa.com/wp-content/uploads/external/alecstruct01/global.swf, 500, 450[/swf]

Ci-dessus une version miniature de la structure formée par les relations entre les travaux d’Alec De Busschère (voir le précédent post et le projet sur notre site). Dans cette version (dont les sources  sont disponibles ici), les données (fictives pour l’instant) sont définies dans des fichiers xml. Prochaine étape: le développement de la « couche html » qui communiquera avec la structure. lire la suite