Anthony Masure

Rapide historique

La première mise en ligne de mes travaux (archivée ici) date de septembre 2005, soit donc quelques mois après l’obtention de mon DSAA (M1) Mode et environnement à l’école de design Duperré à Paris. Réalisé sans CMS (en HTML/CSS), ce site mettait en commun mes projets et ceux de la designer Lucille Saliou afin de préfigurer un projet entrepreneurial de design de bijoux fantaisie (Molusk), qui m’a occupé jusqu’à 2012.

Souhaitant centrer mes activités sur la recherche, étant alors inscrit en thèse depuis 4 ans, j’ai mis en place en 2012 un premier site Web « vraiment » personnel, sous la forme d’un carnet de références (sous WordPress) liées à ma thèse (archivé ici), et d’un portfolio de projets, d’articles, de conférences et de cours, regroupés sous le nom de domaine anthonymasure.com à partir de 2012.

L’objectif principal de ce site était (et est toujours) de créer une archive de tous mes travaux afin de les faire connaître et de maîtriser leur stockage et référencement – sachant que la plupart d’entre eux sont placés sous licence libre. En effet, un article PDF, par exemple, est mal indexé par les moteurs de recherche et n’est pas « accessible » (mise en page fixe, difficile à lire sur téléphone, etc.), contrairement à des fichiers « balisés » en langage Web HTML, c’est-à-dire directement lisibles dans le navigateur. Outre une autonomie de gestion et une pérennité des contenus, un site Web de recherche personnel permet en outre de publier des documents que les archives scientifiques (HAL-SHS, etc.) ne prennent pas en compte pour des questions de format ou de légitimité, tels que des projets de design ou des fichiers audio (ITW radio, etc.).

Passage à Kirby CMS

Fin 2015, je passais mon site personnel de WordPress à Kirby CMS. En effet, WordPress était devenu trop compliqué à utiliser, et surtout trop lourd à maintenir : obligation d’utiliser une base de données SQL, code source dispersé entre les templates (gabarits), plugins (modules complémentaires) et contenus, failles de sécurité, etc. Par contraste, Kirby offre une simplicité de conception bienvenue. Si, comme WordPress, Kirby propose un panel d’administration (un back office), son architecture technique est toutefois radicalement différente car il n’utilise pas de base de données SQL mais un système de dossiers et de fichiers .txt rédigés en langage Markdown, très simple à prendre en main. De plus, l’utilisation du panel d’administration est facultative : on peut tout à fait s’en passer (c’est d’ailleurs mon cas) pour n’utiliser que des fichiers textes chargés manuellement via FTP.

Visuellement, mon site Web se présentait de façon basique, sur le modèle de celui dédié à ma thèse de doctorat (2014), avec un menu dépliable dans la colonne de gauche et le contenu principal dans le reste de la page.

Vers un portfolio de recherche

Peu satisfait, toutefois, de l’interface, je confiais en février 2016 à la designer graphique Marine Illiet le redesign (interface et réalisation) de mon site Web – via un cahier des charges détaillé – afin de lui donner une vraie identité visuelle, mais aussi de permettre une mise en réseau des différents types de documents.

Sur le plan graphique, il s’agissait de conserver les polices Skolar Sans (Rosetta Type) et Input Sans (David Jonathan Ross) que j’utilisais déjà pour mes documents imprimés. La Skolar Sans présente l’avantage d’une très bonne lisibilité et d’un large jeu de chasses et de graisses, une italique marquée visuellement, de même qu’un jeu de glyphes étendu propice aux usages académiques (petites capitales, exposants, flèches, etc.).

En complément, j’avais choisi la Input Sans (David Jonathan Ross, 2014), police initialement dessinée pour la programmation informatique (programming font) de par sa facture monochasse (toutes les lettres font la même largeur). Le choix s’est porté sur la version proportionnelle de la police Input (non mono), qui conserve l’aspect mécanique mais qui offre davantage de lisibilité pour des textes.

Toujours en 2016, il s’agissait aussi de revoir complètement les modèles de pages et l’occupation spatiale de la fenêtre, notamment dans sa largeur, avec une attention soutenue portée aux écrans de petites tailles. L’identité visuelle alors développée se base principalement sur une grille et sur des contrastes typographiques : le site affirme ainsi, dans sa facture, que des travaux de recherche prennant majoritairement la forme de textes lus à l’écran n’ont pas vocation à être traités avec moins de soin que des images ou autres éléments supposés plus visuels. Toujours dans ce soucis formel, un sélecteur, situé en haut à droite du site, permet de basculer entre les modes jour (clair) et nuit (sombre, choisi par défaut) pour permettre un confort de lecture accru.

Exposer des textes de recherche sur le Web

Les différents contenus du site sont mis en connexion via des mots-clés et des documents « relatifs » sélectionnés manuellement. Le parti pris, en terme de navigation, est de montrer comment des préoccupations de recherche traversent à la fois des articles, cours, conférences, etc. (un cours peut, par exemple, donner lieu à une conférence, puis à un article, puis à un cours retravaillé).

Cette coexistence – quasi exhaustive – de différents travaux dans un même espace (contrairement à leur dispersion dans différentes revues, sites Web et/ou plateformes d’archivage académiques), outre une facilité d’accès et de lecture, permet ainsi de tracer, a posteriori, des généalogies, rebonds et bifurcations dans mes démarches de recherche. Il ne s’agit donc pas seulement d’une visée d’archivage et de communication (valorisation), mais bien d’une méthodologie visant à considérer la recherche comme un processus pouvant toujours s’exposer, et donc « s’inachever » (se retravailler). Dans l’ouvrage Le jeu de l’exposition, le philosophe Pierre-Damien Huyghe note ainsi que :

« À l’idée, commode et médiatique, d’un public pré-défini et susceptible d’être visé comme une cible, il faut substituer l’idée, plus difficile mais plus juste, d’une rencontre au cours de laquelle œuvre et public se constituent réciproquement. Cette rencontre n’est pas foncièrement spectaculaire. Elle ne se produit pas sans risque pour le travail artistique. Le fruit en est un certain inachèvement de l’art : on ne parvient jamais qu’à exposer des œuvres dépourvues d’absolue finition. Mais de cette possibilité dépend l’ouverture ou l’espacement de l’existence, ouverture et espacement sans lesquels tout serait, pour nous, déjà décidé. Être exposés à des œuvres indécises – incertaines et problématiques – nous importe tout particulièrement : de l’indécision naissent la réflexion et le jugement.

Mais comment cela se fait-il ? Dans quels espaces l’indécision est-elle susceptible de se produire ? Quels sont les lieux et les moments d’une exposition artistique possible ? Est-ce dans l’atelier que se joue l’essentiel ? Est-ce plutôt dans ce que l’on nomme aujourd’hui une installation ? Est-ce encore au musée, dans la constitution des collections ? Ou bien dans la rue, la ville, voire le paysage quotidien ? ¹ Jean-Louis Déotte, Pierre-Damien Huyghe (dir.), Le jeu de l’exposition, Paris, L’Harmattan, 1998, p. 7 »

On peut dès lors se demander comment le Web pourrait devenir un espace d’exposition, c’est-à-dire d’indécision. En tant que matière programmable (et pas seulement programmée), le Web offre des perspectives intéressantes pour les productions de recherche. Les différents documents mis en ligne sur ce site, présentés de façon homogène car utilisant le même système visuel (contrairement à des PDF extraits de revues différentes) peuvent en effet être « augmentés », non seulement de mots clés, mais aussi de ressources diverses, de fichiers (audio, vidéo, etc.), d’indications de licences, et sont donc toujours ouverts à un travail ultérieur, démontrant ainsi la capacité intrinsèque au code informatique d’être maléable et réinscriptible.

Le site profite également de capacités propres au Web, notamment concernant les slides des conférences, conçues avec le framework HTML Reveal.js. Celles-ci ont pour avantage de pouvoir accueillir tout type de contenu (vidéos, etc.), et peuvent elles aussi être facilement intégrées dans des pages Web, (exemple ici) qui plus est de façon responsive.

Un redesign (presque) « invisible »

De 2016 à 2020, j’ai systématiquement mis à jours les contenus articles et conférences du site, avec toutefois un bémol, par manque de temps, concernant les syllabus de cours. Un blog, encore peu alimenté, a été ajouté en 2017 pour plus de souplesse. Le besoin se faisait toutefois sentir de « rafraichir » tant l’interface que l’architecture du site.

Sur un plan technique, le site a été mis à jour de la version 2 de Kirby CMS vers la 3.5. Cela a entraîné un certain nombre de changements dans le nommage des dossiers et fichiers (champ date, etc.), de même que dans les fonctions PHP des templates. J’ai de plus réduit sensiblement l’utilisation du JavaScript, en supprimant par exemple les alignements en quinconce (jQuery Masonry). Ces changements ont permis de réduire de moitié la quantité et la longueur des fichiers source (assets) PHP. J’en ai aussi profité pour passer les URLs de mon site en HTTPS (merci Gandi !).

Le principal changement fonctionnel concerne l’ajout de plusieurs niveaux de tags « réellement » fonctionnels (cliquables), tandis que l’ancienne version du site renvoyait vers la page de recherche. Chaque contenu (article, conférence, cours, projet, mémoire dirigé, etc.) a désormais la possibilité d’être étiquetté suivant quatre niveaux sémantiques : « notions » (concepts), « personnes mentionnées » (auteur·trice·s, designers, etc.), « objets mentionnés » (projets, etc.), « médias » (vidéos YouTube, fichiers audio, slides Reveal.js, etc.). Ce parti pris, en plus d’améliorer la connexion entre les contenus et la partage de thématiques de travail, met en évidence l’importance des études de cas dans ma méthodologie de recherche. Un tel changement nécessitera toutefois de repasser manuellement dans tous les contenus pour les tagger un par un.

Une nouvelle page, « Archives », liste toutes les productions par ordre chronologique, avec pour chacune les différentes métadonnées qui y sont associées. Dans les pages des documents, les contenus « relatifs » sont désormais automatisés via le plugin Kirby Similar.

La mise en page CSS est passée de display:flex (flexbox) à display:grid afin de gagner en simplicité et de résoudre un certain nombre de problèmes d’alignements, notamment verticaux. La grille est à présent plus cohérente et fonctionne mieux à différentes tailles et ratios d’écran. Par exemple, sur les grands écrans, une 4^e colonne a été ajoutée pour densifier les listes comme celles des articles et des conférences.

La police principale utilise désormais la (nouvelle) version « variable » (variable font) de la Skolar Sans pour un temps de chargement rapide, mais aussi pour avoir plus de souplesse dans les réglages typographiques. Cela a par exemple permis de raffiner les modes jour/nuit en modifiant légèrement la graisse des lettres pour optimiser leur lisibilité en fonction du contraste de fond.

Certaines pages ont fait l’objet d’une refonte complète, notamment la page CV qui a été remise aux normes suisses (FNS) et qui est mieux hiérarchisée qu’auparavant.

Quels développements ?

Le plus gros du travail ayant été fait au niveau de l’architecture des données et de la structure des pages, le plus chronophage sera de saisir en « plein texte » les articles manquants, et surtout d’étiquetter un par un tous les documents.

D’autres améliorations sont envisagées / envisageables :

• Réduire le poids des images, notamment pour la page d’accueil.
• Pouvoir filtrer les contenus par type de licence.
• Ajouter les liens vers les dépôts HAL-SHS.
• Affiner le fonctionnement du plugin Kirby Similar pour améliorer la pertinence des résultats des « pages liées ».
• Produire des bibliographies réutilisables.
• Améliorer l’affichage de la page d’archives, trop dense en l’état, et la navigation par tags (pourquoi pas avec de la dataviz, comme sur cet exemple).
• Permettre l’export PDF des articles de recherche.
• Rendre le CV imprimable voire paramétrable avant impression via le navigateur (hello Paged.js !).
• Revoir la gestion des flux RSS pour aujouter un flux « global » (actuellement, un seul existe pour le blog).