Cards & Research, site web dédié aux références sur les cartes numériques

10 mars 2025

À l'opacité du code s'ajoute une véritable action de dissimulation qui caractérise de plus en plus les environnements numériques mainstream : tous les « mécanismes » nous sont cachés, nous sont rendus invisibles.

Marcello Vitali-Rosati, Éloge du bug, être libre à l'époque du numérique (éd. La Découverte, Mars 2025)

Depuis les récentes annonces concernant les réseaux sociaux Facebook/Instagram et X, je me suis posé la question de continuer à partager mon travail sur ces plateformes, voir de les quitter. La réponse est finalement plus complexe, car quitter Instagram (facebook et X sans trop de problème) me semble encore difficile car il n’y n’a pas vraiment de concurrent. Tous les gens que je suis et dont le travail m’intéresse sont sur ce réseaux et le quitter voudrait dire se couper de la découverte de projets qui m’intéressent. Je ne peux pas vraiment me le permettre, ce réseau étant directement lié à mon travail.

Dans cette réflexion sur la réappropriation des contenus et des plateformes qui les diffusent, je me suis posé un objectif : la création d’un site web dédié aux références sur les cartes à jouer numériques, en extension du site Cards & Coding. Actuellement, je fais ce travail sur un channel dans le site are.na et cela fonctionne très bien. Attention, are.na n’a rien à voir avec les réseaux Facebook, Instagram et X et le site n’a pas du tout la même vision. Are.na est très bien et je n’ai rien à lui reprocher. Ce qui me fait changer de plateforme c’est tout simplement l’envie de revenir à des espaces numériques que je peux mieux contrôler, d’héberger sur mon serveur les contenus et au final penser un site web en cohérence.

Un dernier point qui me pousse à faire ce site est la sortie récente de mon dernier article dans les Nouveaux Cahiers de Marge N°9. C’est l’occasion idéale pour moi de continuer dans cette dynamique de recherche sur le sujet de la carte à jouer numérique et ses extensions.

Un back-office et une base de données

Sur les conseils du designer graphique et photographe Alexandre Texier, je me suis intéressé au CMS (le système de gestion de contenu) ProcessWire. Ce CMS est open source et plutôt bien documenté. Il me semble répondre à mes besoins qui sont : ajouter une référence via un back office et pouvoir la consulter dans le site. Cela va un peu plus loin avec la possibilité d’ajouter des étiquettes (tags) à une référence afin de pouvoir filtrer les contenus dans des pages dédiées, enrichir la référence d’une url pour renvoyer à sa source initiale et enfin pouvoir ajouter un court texte de description. Après la lecture de la rubrique getting started de la documentation de ProcessWire, je me suis lancé dans la configuration du CMS et la programmation (php, css et js). Spoiler : le CMS est vraiment agréable à mettre en place et plutôt simple à prendre en main.

La structure des informations dans le channel are.na m’a beaucoup aidé, car au final je voulais retrouver une approche similaire dans la hiérarchie des références. Le premier travail que j’ai fait sur l’organisation des contenus est de dresser une liste d’étiquettes afin de classer par domaines les références. Cette organisation n’est pas disponible sur are.na et je n’avais donc pas fait ce travail en amont. J’ai classé les contenus selon 15 étiquettes et je compte les faire évoluer avec l’utilisation du site.

Après plusieurs essais dans le code (merci Claude AI pour le coup de pouce !), j’avais une structure qui me convenait : le back office me permet maintenant d’enregistrer une référence en saisissant les informations suivantes : titre, image, description, url et étiquettes. Chaque référence vient augmenter la base de données et s’afficher dans la partie front du site, le code est maintenant fronctionnel. Je vais aborder justement dans la suite de l’article le design du site.

Cards & Research

Ce site s’inscrit dans la continuité de Cards & Coding, je souhaite donc utiliser des éléments graphiques et les couleurs afin de garder une cohérence entre les deux sites. Les éléments principaux du design sont : la couleur de fond, la typo et les trois couleurs des cartes dans les headers des pages. Je vais donc garder ces éléments et les utiliser à nouveau dans ce second site.

Mais avant de développer plus les parties graphique, la première chose que j’ai travaillé est la grille qui organisera les références. Sur ce point j’ai fait pas mal de tests comme le nombre de blocs par ligne (j’ai longtemps utilisé trois blocs sur un ligne puis j’ai changé pour quatre, plus lisible), ou encore les bords arrondis. J’ai aussi varié les formes des blocs, passant de rectangulaire à carré. Finalement, le résultat reste simple mais lisible.

Après cela, je me suis attaché à imaginer deux éléments (une interaction et une animation ) afin de casser le côté un peu statique du site. Celui-ci reste un site de documentation, et je pense qu’il faut rester un peu sobre pour ne pas perturber la lecture, mais deux détails viennent donner des indices sur l’origine du projet, et les liens avec le jeu.

Le premier élément est un interaction qui se situe dans la partie haute du site avec les trois cercles. Ils font références aux trois cartes chez Cards & Coding, mais également aux points sur les faces d’un dé à six faces. Ces trois cercles, qui ont des positions aléatoires à chaque affichage de la page, peuvent se déplacer avec la souris, sur l’axe horizontal afin de rappeler les jeux de billes et autres bouliers. Pour cela, j’ai utilisé la libraire javascript Draggabilly qui permet d’utiliser l’interaction de drag and drop sur des éléments dans la page.

Le deuxième élément est l’animation du titre du site. L’animation est un rappel du nom du projet initial Cards & Coding. L’animation du texte de type “machine à écrire” corrige le mot “Coding” pour le remplacer par “Research”. J’ai été étonné de voir que ce genre d’effet n’est pas forcement simple à coder, j’ai essayé pas mal de choses avec au départ que du CSS mais l’animation de correction ne fonctionnait pas bien. J’ai fait plusieurs recherches jusqu’à tomber sur la librairie TypeIt (que je ne connaissais pas) et que j’ai trouvé géniale. Cette librairie correspondait à 100% à ce que je voulais faire, ce qui est incroyable ! Je vous la conseille sur ce genre d’animation de texte :)

Le site est à présent en ligne (je continue d'ajouter des références au fur et à mesure) et vous pouvez aller le consulter à cette adresse : https://research.cards-and-coding.click/. Je suis content de cette première version mais je compte améliorer des choses dans le futur. Je pense à la possibilité d’ajouter un lien dans une référence et que cela fasse une image automatiquement (une capture du site). Actuellement c’est un process assez long car je dois faire la capture moi même, la redimensionner et optimiser le poids de l’image.
Je vais continuer à définir les étiquettes pour le classement, et pourquoi pas (on peut rêver), lors de la saisie d’une url, que cela récupère toutes les infos dont j’ai besoin (titre, image, lien, description).

Je conçois cet outil et tout me semble possible. Quitter une plateforme pour réaliser son propre environnement demande un investissement certain, mais la finalité en vaut le coup.