Pendant quelques jours, nous allons explorer des manières non conventionnelles de produire des objets graphiques. Une règle guidera nos expérimentations : tous les contenus mis en forme ainsi que les outils employés devront être accessibles en ligne. À partir d’une thématique définie collectivement, nous adopterons une posture expérimentale, que les méthodes testées soient signifiantes ou non.
Les enjeux de cet atelier sont multiples. Il s'agira d'explorer des outils de transformation de l’image, du texte et de la mise en page, parfois artisanaux ou détournés. Ce processus nécessitera, par moments, de savoir lâcher prise et de tirer parti des qualités formelles issues d'accidents ou de hasards inattendus.
Une attention particulière sera portée aux pratiques de web-to-print, autrement dit à la création d'objets graphiques imprimés à partir de contenus web. À la différence des méthodes traditionnelles fondées sur des logiciels propriétaires comme Adobe, nous composerons ici avec les contraintes du web — poids des fichiers, langages HTML/CSS, adaptabilité des formats.
Travailler sous contrainte nous amènera aussi à adapter nos protocoles de création, tout en questionnant l’impact énergétique de nos outils numériques. Concevoir son propre site ou bâtir son environnement en ligne peut devenir un geste d’émancipation face à l’uniformisation du web et à la domination des GAFAM.
Les formats de restitution pourront être variés : site web, affiche, fanzine, livre, projet interactif projeté, ticket de caisse etc... Chaque participant·e pourra explorer plusieurs formes selon ses expérimentations.
Le dispositif mis en place : nous créerons des images et des contenus à l’aide d’outils en ligne, que nous hébergerons sur un serveur partagé. L’ensemble des ressources constituera une base commune, à partir de laquelle chacun·e pourra développer différentes propositions de mise en forme. Cette base partagée servira de point de départ pour explorer plusieurs formats. Nous travaillerons notamment avec les media queries pour adapter les contenus aux différents supports d’affichage ou d’impression.
Enfin, ce workshop sera l’occasion de réfléchir au sens de créer des liens. Comme l’écrit l’artiste et théoricienne du web Olia Lialina, reprendre en main ses espaces numériques en créant ses propres pages d’accueil, ce n’est pas seulement mieux se représenter en ligne, mais devenir un véritable nœud dans le réseau : unx acteurice actifive et autonome qui contribue à la structure et à la diversité du web. Face aux plateformes fermées et standardisées, il s’agit de revendiquer un espace d’expression libre et diversifié.
Pour Olia Lialina, une artiste et théoricienne du web, il est nécessaire de se réapproprier nos espaces numériques en créant nos propres pages d’accueil. Cette réappropriation ne signifie pas simplement que nos pages d'accueil personnelles représentent mieux notre individualité qu'une page de profil sur une plateforme comme Instagram. Au contraire, l'argument de Olia Lialina va au-delà de la simple représentation personnelle : il s'agit de devenir un « nœud dans le réseau », unx acteurice actifive et autonome qui contribue à la structure et à la diversité du web.
Ce rôle implique non seulement de créer du contenu mais aussi de soutenir la création de liens, de partager des connaissances, et de bâtir des connexions qui transcendent les simples interactions de surface. C’est une vision d’un web où chaque utilisateurice est non seulement unx acteurice, mais aussi unx bâtisseureuse de l’architecture du web.
Le rôle de ce nœud est en effet crucial dans l’architecture d’un web véritablement ouvert et participatif. Contrairement aux profils sur les réseaux sociaux, qui sont isolés dans les silos des plateformes et soumis à leurs algorithmes, une page d'accueil personnelle peut interagir avec d'autres sites, être liée par des hyperliens et s'intégrer dans un réseau plus vaste d'individus et de communautés en ligne. Ce type de contribution enrichit le web en renforçant sa nature décentralisée et en augmentant la diversité des voix et des perspectives présentes en ligne.
Olia Lialina explique que la création d'une page d’accueil est « une tâche philosophique ». Cela nécessite de répondre à des questions existentielles telles que : « Ai-je quelque chose à dire au monde ? Qu'est-ce que cela peut être ? ». En construisant son propre site, l’utilisateurice est amené·e à réfléchir non seulement à sa propre identité numérique, mais aussi à la manière dont cette identité interagit avec le reste du web.
Plutôt que de s'inscrire dans les cadres préconçus des plateformes, où les utilisateurices sont souvent réduit·es à des consommateurices de contenus et à des producteurices de données pour les entreprises, Olia Lialina propose de réinvestir l'espace web comme un lieu d'expression personnelle authentique et de création indépendante. En ce sens, la création d'une page d'accueil devient un geste d'autonomie et de résistance à la standardisation.
Le CSS print (ou feuille de style pour l’impression) permet de définir un style spécifique pour l’affichage d’une page web lorsqu’elle est imprimée.
Les media queries sont des extensions du langage de mise en forme CSS permettant de faire varier la composition visuelle des pages web en fonction du support sur lequel elles sont affichées : ordinateur, téléphone, tablette, vidéoprojecteur et papier.
Il existe quatre types de media queries :
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
Liste de toutes les pseudo-classe ici
On écrit un pseudo classe comme ceci:
.nom-de-la-classe:pseudo-classe
Il est possible de travailler l’animation de certaines propriétés CSS (en voici la liste). Il faut tout d'abord décrire son animation en haut de votre fichier CSS avec @keyframesen décrivant le nom de votre animation et ses différentes étapes. Ensuite votre animation est appelée dans votre classe par la propriété animation oùvous pourrez décrire entre autres le temps, la répétition et la vitesse de votre animation.
Les règles et propriétés CSS suivantes sont principalement supportées lors de l'impression sur des navigateurs comme Chrome ou Firefox. Leur compatibilité peut varier légèrement en fonction du moteur de rendu utilisé.
Paged.js est une bibliothèque JavaScript gratuite et open source qui permet de paginer dynamiquement du contenu HTML dans le navigateur afin de générer un fichier PDF. En d'autres termes, elle permet de concevoir des documents destinés à l'impression, tels que des livres, en s'appuyant uniquement sur le langage HTML et CSS. Elle offre également des fonctionnalités avancées, comme l'ajout automatique de la pagination, d'en-têtes et de pieds de page.
La documentation de PagedJs est présente sur cette page.
annuel.framapad.org/p/nom-du-pad (Attention : votre nom de pad ne doit pas avoir des caractères spécials de type ? = ; : etc.)demo-tool voulu et décompresser le dossierindex.php sur un éditeur de code$pad\_css = file\_get\_contents("lien-du-framapad/export/txt"); (Attention : ne pas oublier export/txt à la fin de l'URL)votre-site/nom-du-dossier/index.phpPour en savoir plus sur ce qu’est un CDN, cliquez ici.
Dans ce contexte, nous allons utiliser une logique proche de celle d’un CDN, mais sans en créer un véritable.
Nous allons simplement héberger des typographies sur un serveur en ligne, de manière à les rendre accessibles à toustes depuis cette page web. Pour cela, il suffit de télécharger des polices libres (voir la liste de typothèques et fonderies libres ci-dessous), puis de les transférer via FTP dans le dossier /fonts.
Ensuite, on peut copier l’URL de la police et l’utiliser dans la règle @font-face, comme ceci :
@font-face {
font-family: 'nom-de-la-font';
src: url('lien-de-la-font');
}
Pour celleux qui ont un serveur local (localhost) et que vous souhaitez faire des modifications dans le fichier index.php pour changer la structuration des contenus, vous pouvez télécharger le dossier zip l'onlyonline démo tool ici et le décrompresser sur votre serveur local.