Ateliers web

Hypertext superhéro vous propose de concevoir, d’écrire, de réaliser et de mettre en ligne une “séquence non linéaire interactive” ; ou en d’autres termes:

Un site Web dont vous êtes le (super) héros

Bifurcations contextuelles

La bibliothèque est illimitée et périodique. Si il y avait un voyageur éternel pour la traverser dans un sens quelconque, les siècles finiraient par lui apprendre que les mêmes volumes se répètent toujours, dans le même désordre qui répété deviendrait un ordre : l’Ordre. Ma solitude de se console à cette élégant espoir.

— Jorge-Luis Borges, La Bibliothèque de Babel, 1941

Le jardin aux sentiers qui bifurquent est une image incomplete, mais non fausse, de l'univers tel que le concevait Ts'ui Pên. A la différence de Newton et de Schopenhauer, votre ancêtre ne croyait pas à un temps uniforme, absolu. Il croyait à des séries infinies de temps, à un réseau croissant et vertigineux de temps divergents, convergents et parallèles¹. Cette trame de temps qui s'approchent, bifurquent, se coupent ou s'ignorent pendant des siècles, embrasse toutes les possibilités. Nous n’existons pas dans la majorité de ces temps ; dans quelques-uns vous existez et moi pas ; dans d'autres, moi, et pas vous ; dans d'autres, tous les deux. Dans celui-ci, que m'accorde un hasard favorable, vous êtes arrivé chez moi; dans un autre, en traversant le jardin, vous m'avez trouvé mort ; dans un autre, je dis ces mêmes paroles, mais je suis une erreur, un fantôme.

— Jorge-Luis Borges, Le jardin aux sentiers qui bifurquent, 1941

Hypertextualités, interactivité

Imaginons un appareil de l’avenir à usage individuel, une sorte de classeur et de bibliothèque personnels et mécaniques. […] Un memex, c’est un appareil dans lequel une personne stocke tous ses livres, ses archives et sa correspondance, et qui est mécanisé de façon à permettre la consultation à une vitesse énorme et avec une grande souplesse. Il s’agit d’un supplément agrandi et intime de sa mémoire.

— Vannevar Bush, « As we may think », 1945

Le memex est un ordinateur analogique fictif décrit par le scientifique Vannevar Bush dans l'article As We May Think publié en 1945 dans la revue The Atlantic Monthly. Le nom est la contraction de memory extender (« gonfleur de mémoire »). Dans son article², Bush décrit un appareil électronique relié à une bibliothèque capable d'afficher des livres et de projeter des films. Cet outil est aussi capable de créer automatiquement des références entre les différents médias. Cette vision a directement influencé des pionniers de l'informatique moderne tels que Douglas Engelbart et a posé les fondations de l'hypertexte créé par Ted Nelson, à l'origine du World Wide Web.

— https://fr.wikipedia.org/wiki/Memex

Ingénieur états-unien, inventeur et pionnier de l'informatique, Douglas Engelbart est célèbre pour avoir inventé la souris, pour ses travaux sur le développement de l'interface homme-machine et pour avoir développé l’hypertexte, les réseaux informatiques et les premières interfaces graphiques (GUI). Dans sa Mother of All Demos, en 1968, il donne une visio-conférence dans laquelle il annonce et montre pour la première fois ce qui allait devenir le paradigme de nos ordinateurs contemporains : un système multimédia doté d’un clavier, d’une souris et d’une interface graphique à fenêtres, accessible et contrôlable à distance.

Theodor Nelson est un sociologue américain, pionnier de l'histoire des technologies de l'information. Il est considéré comme l'inventeur du terme hypertexte en 1965. Développant les hypothèses élaborées par Vanevar Bush ou Paul Otlet³, il imagina le projet Xanadu, système d'information permettant le partage instantané et universel de données informatiques. Ce système, jamais complètement développé, fut rattrapé et dépassé par le Web, mais en fut un précurseur et un inspirateur.

Écritures hypertextuelles

Les écritures hypertextuelles visent un dépassement des contraintes de la linéarité du texte écrit. Notions clés : non-linéarité, serendipité, bifurcations, fragments, liens, associations…

Nous désignerons par littérature numérique toute forme narrative poétique qui utilise le dispositif informatique comme médium et met en œuvre une ou plusieurs propriétés spécifiques à ce médium. — Philippe Bootz, Leonardo/Olats

Désordre, site écrit, conçu et réalisé par Philippe De Jonckheere⁴, « dans lequel la question des grandes théories de l'information ne sera pas abordée, pas davantage celle de savoir si la photographie est un art à part entière au même titre que la peinture. Il y est parfois question de sexe, de sodomie, de fellation, de gros seins, de pubis et autres joyeusetés, qui font beaucoup de bien aux statistiques du site que nous ne consultons jamais. En revanche nous sommes au regret de vous dire que pas plus que vous nous ne connaissons la recette de l'omelette norvégienne. Le moteur de recherche a un fonctionnement parfaitement erratique et ne vous aidera en rien, au contraire. »

L’attracteur de Lorenz est une structure fractale correspondant au comportement à long terme de l'oscillateur de Lorenz. L'attracteur montre comment les différentes variables du système dynamique évoluent dans le temps en une trajectoire non périodique. — fr.wikipedia.org

L' « effet papillon » est une expression qui résume une métaphore concernant le phénomène fondamental de sensibilité aux conditions initiales de la théorie du chaos. La formulation exacte qui en est à l'origine fut exprimée par Edward Lorenz lors d'une conférence scientifique en 1972, dont le titre était : « Le battement d'ailes d'un papillon au Brésil peut-il provoquer une tornade au Texas ? » — fr.wikipedia.org

À sa façon, ce livre est plusieurs livres mais en particulier deux livres. Le lecteur est invité à choisir entre les deux possibilités suivantes : Le premier livre se lit comme se lisent les livres d'habitude et il finit au chapitre 56, là où trois jolies petites étoiles équivalent au mot fin. Après quoi, le lecteur peut laisser tomber sans remords ce qui suit. Le deuxième livre se lit en commençant au chapitre 73 et en continuant la lecture dans l'ordre indiqué à la fin de chaque chapitre. En cas d'incertitude ou d’oubli il suffira de consulter la liste ci-dessous. — Julio Cortazar, Marelle

Désirez-vous connaître l’histoire des trois alertes petits pois ?
– Raymond Queneau, Conte à votre façon

Écritures numériques

Fondateur d’UbuWeb, Kenneth Goldsmith expérimente, à la fois en tant qu’écrivain, enseignant, poète et artiste, les mutations imposées au texte par le numérique. ⁵

« Recopiez-moi cinq pages »
« Theorize your digital existence. »
« Where technology leads, literature follows. »
« I used to be an artist ; then I became a poet ; then a writer. Now when asked, I simply refer to myself as a word processor. »
« A contemporary poet is someone who doesn’t write poems. »
— Kenneth Goldsmith, suite de statuts Facebook.

À propos de Théorie de Kenneth Goldsmith, écouter François Bon

Objectif

Le projet sera réalisé sous la forme d’un site web : ensemble de pages / d’écrans, consultables dans un navigateur web et mis en ligne sur un serveur.

In today’s highly commercialized web of multinational corporations, proprietary applications, read-only devices, search algorithms, Content Management Systems, WYSIWYG editors, and digital publishers, it becomes an increasingly radical act to hand-code and self-publish experimental web art and writing projects. — J.R. Carpenter

Les contraintes et difficultés techniques doivent être envisagées comme un espace de potentialité (immense) plutôt qu’une limitation. Si l’approche favorisée au sein de l’atelier est celle de la production “manuelle” de pages web (HTML, CSS, javascript), toute stratégie oblique visant à exploiter la diversité des espaces de publication en ligne (pads, réseaux sociaux, documents Google, services de publication divers) de manière pertinente par rapport au projet est bienvenue.

Livrables

• Note d’intention textuelle
• Storyboard sommaire
• Représentation arborescente (diagramme permettant de visualiser les liens entre chaque page et les processus de navigation – voir ici)
• Wireframes (ensemble de maquettes du squelette des pages, hiérarchiquement structuré)
• Site web (URL)

Évaluation

Seront appréciés : l’inventivité et l’audace dans la construction hypertextuelle ; la pertinence des choix graphiques en regard du projet ; la cohérence de l’univers graphique produit ; ni la “qualité” ni la quantité de code ne sont des critères d’évaluation.

Contraintes

• Séquence : construire et articuler un propos par la succession d’écrans ou de pages.
• Non linéaire : permettre différentes expériences.
• Interactive : laisser l'utilisateur déterminer son propre parcours.

Méthode

• Narration / ou pas.
• Avoir un parti pris graphique : choisir un médium, ou un ensemble de médiums.
• Créer un univers graphique cohérent : maximalisme, minimalisme, ornemental, brutaliste, corporate…
• Déterminer un corpus ; un ensemble structuré (pas forcément homogène) de contenus à associer

Médiums

• Texte : phrases, dialogues, lettres, cut-up, copier/coller…
• Image : photo, gifs, dessins, documents, traces…
• Vidéo : vidéo, gif, found-footage, YouTube…
• Son: voix, musique, field-recording, vocodeur…

Références

Webdocs, vidéo

• Do Not Track, webdocumentaire de Brett Gaylor, upian + arte + ONF/NFB
• République, un film interactif sur mobile de Simon Bouisson
• Wei or die, un autre film interactif de Simon Bouisson
• Pour d’autres références, lire une histoire approximative et bien très brève de la forme du webdocumentaire, et parcourir le panthéon personnel de Benjamin Hoguet.

Narration hypertextuelle

• My Boyfriend Came Back from the War, un projet de Net art d’Olia Lialina (1996)
• Karrik – the Game, une narration non-linéaire éditée par Velvetyne Type Foundry
• Phallaina, une bande defilée (linéaire…)
• Jusqu’ici, une déambulation interactive et poétique de Vincent Morrisset
• L’infiltré, un jeu/enquête de docu/fiction politique en temps réel
• The Wilderness downtown, un film interatif basé sur "We Used To Wait" du groupe Arcade Fire
• Un thread Twitter de @FibreTigre sur le “narrative design”, l’écriture à non linéaire et à choix multiples dans le champ du jeu (vidéo, de rôle, etc.)

Expérimentations hypertextuelles graphiques, artistiques et conceptuelles

• La librairie de Babel en vrai (ou presque)
• wwwwwwwww.jodi.org, le site de Jodi, pour une plongée en apnée visuelle et hypertextuelle
• Déprise, un récit interactif de Serge Bouchardon et Vincent Volckaert, 2010

Miscellanées, écritures numériques singulières

• Le Désordre ! Un projet d’écriture, de photographie, d’images et de sens mené par Philippe de Jonckherre.
• Magasin général, compagnon webdocumentaire du livre de David Dufresne, avec Antonin Lhôte + upian
• Les antilivres d’abrüpt
• otherti.me, un projet de Raphaël Bastide

Jeux — scène aternative & itch.io

• Everest Pipkin
• A Desktop Love Story, jeu basé sur le système de fichiers de votre ordinateur, une histoire d’amour entre deux fichiers. Voir aussi Foldscape.
• A fine night, une fiction interactive racontée à l’intérieur de Twitter. Voir aussi @wnd_go, sur Twitter toujours, construit grâce à de multiples comptes.
• TimeTossed, un des nombreux jeux/fictions interactives de Popertine, construit à partir de formulaires Google
• Toujours de Popertine, Howling dogs à la structure narrative fractale (en anglais)
• Anxiety, un des nombreux jeux interactifs qu’on peut trouver sur itch.io

Écritures sociales

• Otherly, un compte Instagram qui présente 7 documentaires courts sur des parcours de femme, personnes non-binaires et queer.
• Sur Twitter, une histoire dont tu es le héros/l'héroïne par Mårābøüt.
• 3ème droite, un thriller sur Twitter, par @F_descraques.
• 60 secondes, une série produite par Arte. 73 vidéos d’une minute diffusées sur Facebook en 2011, racontant la vie mouvementée de Fantille.

Exemples

La section exemples du site propose de nombreux éléments liés aux logiques hypertextuelles et interactives. Si la plupart des propositions impliquent du code JavaScript, cela n’est pas du tout indispensable à la réalisation de ce projet.

• Un conte à votre façon réinterprète le texte à choix multiples de Raymond Queneau.
• Dialogue interactif à choix multiples est un exemple minimal basé sur une logique de choix multiples pour l’utilisateurs qui induisent le développement d’une branche (ou l’autre) d’un récit.
• Navigation javascript asynchrone offre la possibilité de changer d’écran sans changer de page, permettant notamment de ne pas couper un son, ou d’exécuter du javascript au chargement de la nouvelle page/écran.
• Navigation javascript est une version plus simple de l’hypothèse ci-dessus.
• Accumulation d’arrière-plans permet à une page de réagir aux choix successifs du visiteur en superposant des images d’arrière-plan.
• Image suivante au click, permet d’afficher un élément (présent dans la page mais masqué) quand l’utilisateur clique.
• Deux exemples de dialogue : un interactif (au clic) et l’autre automatique (sans clic) ; tous deux linéaires.
• Navigation aléatoire contrôlée par cookie permet de parcourir aléatoirement un ensemble de pages HTML sans jamais revisiter la même.

Outils

• Twine est un outil open-source pour raconter des histoires interactives et non linéaires. Voir les tutos vidéos produits par le studio Tourmaline.
• txti.es ou telegra.ph sont des espaces de publication anonyme en ligne sans inscription
• Tumblr, un des nombreux services qui permettent de publier textes, images, sons, vidéos “gratuitement” tout en maîtrisant complètement l’aspect visuel du site
• Ink, un langage de balisage pour créer des histoires interactives ou des jeux (principalement) textuels (un peu complexe…)
• Inklewriter, tout comme Ink, mais sans le code !
• Yarn Spinner permet d’écrire des dialogues pour des moteurs de jeu de type Unity ou Godot.
• Flicksy est un outil pour générer des jeux (lo-res) graphiques et hypertextuels.
• Ravel, ultra lo-tech html game engine.
• Moult autres outils sur fiction-interactive.fr et sur tinytools.directory…

Arborescences hypertextuelles

Onebook, many readings, une analyse sous la forme de visualisation de données de « livres dont vous êtes le héros » (Choose Your Own Adventure).

Extraits de Standard Patterns in Choice-Based Games