Design numérique - Contributions [fr]

MediaWiki:Common.css

2026-02-19T13:41:32Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

MediaWiki:Common.css

2026-02-19T13:40:32Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */
body{
background: red;
}

MediaWiki:Common.css

2026-02-16T13:20:48Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

MediaWiki:Common.css

2026-02-16T13:20:33Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */
body{
background:red;
}

MediaWiki:Sidebar

2026-02-05T15:53:47Z

Lionel :

Éditions chimères

2026-02-05T15:47:23Z

Lionel : /* les étudiant.e.s */

== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

==== qu'est-ce une édition hybride? ====
https://www.design-research.be/hybrid/publications.html

une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

==== hybride? Chimère? ====

''Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Constant vzw, 2001.''

Via http://justfortherecord.space/cyber-2017-FR.html

==== Imprimer le web? ====

https://en.wikipedia.org/wiki/Printing_out_the_Internet

https://printwikipedia.com/

http://jamesbridle.com/works/iraq-war-wikihistoriography

https://soulellis.com/entries/lotpw.html

https://soulellis.com/entries/apparition.html

==== des outils des langages ====

https://prepostprint.org/resources/

https://wiki.prepostprint.org/

==== des projets ====
https://p-dpa.net/

https://expandedpublishing.net/

==== les étudiant.e.s ====

[[ma nouvelle page]]

[[Utilisateur:Lionel|le lien de ma page utilisateur lionel]]

Éditions chimères

2026-02-05T15:45:27Z

Lionel :

Éditions chimères

2026-02-05T15:44:29Z

Lionel :

[[Fichier:4 Anoek Luyten - PBOL 06.jpg|sans_cadre]]
== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

==== qu'est-ce une édition hybride? ====
https://www.design-research.be/hybrid/publications.html

une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

==== hybride? Chimère? ====

''Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Constant vzw, 2001.''

Via http://justfortherecord.space/cyber-2017-FR.html

==== Imprimer le web? ====

https://en.wikipedia.org/wiki/Printing_out_the_Internet

https://printwikipedia.com/

http://jamesbridle.com/works/iraq-war-wikihistoriography

https://soulellis.com/entries/lotpw.html

https://soulellis.com/entries/apparition.html

==== des outils des langages ====

https://prepostprint.org/resources/

https://wiki.prepostprint.org/

==== des projets ====
https://p-dpa.net/

https://expandedpublishing.net/

==== les étudiant.e.s ====

[[ma nouvelle page]]

Fichier:4 Anoek Luyten - PBOL 06.jpg

2026-02-05T15:44:05Z

Lionel :

mon image

Éditions chimères

2026-02-05T15:35:12Z

Lionel :

Éditions chimères

2026-02-05T14:33:17Z

Lionel :

Éditions chimères

2026-02-05T12:46:51Z

Lionel :

== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

==== qu'est-ce une édition hybride? ====
https://www.design-research.be/hybrid/publications.html

une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

==== hybride? Chimère? ====

''Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Conslan vxw, 2001.''

Via http://justfortherecord.space/cyber-2017-FR.html

==== Imprimer le web? ====

https://en.wikipedia.org/wiki/Printing_out_the_Internet

https://printwikipedia.com/

http://jamesbridle.com/works/iraq-war-wikihistoriography

https://soulellis.com/entries/lotpw.html

https://soulellis.com/entries/apparition.html

==== des outils des langages ====

https://prepostprint.org/resources/

https://wiki.prepostprint.org/

==== des projets ====
https://p-dpa.net/

https://expandedpublishing.net/

Éditions chimères

2026-02-05T12:46:11Z

Lionel :

== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

==== qu'est-ce une édition hybride? ====
https://www.design-research.be/hybrid/publications.html
une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

==== hybride? Chimère? ====

''Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Conslan vxw, 2001.''

Via http://justfortherecord.space/cyber-2017-FR.html

==== Imprimer le web? ====

https://en.wikipedia.org/wiki/Printing_out_the_Internet
https://printwikipedia.com/
http://jamesbridle.com/works/iraq-war-wikihistoriography
https://soulellis.com/entries/lotpw.html
https://soulellis.com/entries/apparition.html

==== des outils des langages ====

https://prepostprint.org/resources/
https://wiki.prepostprint.org/
https://gitlab.com/lionelmaes/pdfutils

==== des projets ====
https://p-dpa.net/
https://expandedpublishing.net/

Éditions chimères

2026-02-05T12:45:00Z

Lionel :

== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

* qu'est-ce une édition hybride?
https://www.design-research.be/hybrid/publications.html
une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

*hybride? Chimère?

''Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Conslan vxw, 2001.''

Via http://justfortherecord.space/cyber-2017-FR.html

- Imprimer le web?
https://en.wikipedia.org/wiki/Printing_out_the_Internet
https://printwikipedia.com/
http://jamesbridle.com/works/iraq-war-wikihistoriography
https://soulellis.com/entries/lotpw.html
https://soulellis.com/entries/apparition.html

- des outils des langages
https://prepostprint.org/resources/
https://wiki.prepostprint.org/
https://gitlab.com/lionelmaes/pdfutils

- des projets
https://p-dpa.net/
https://expandedpublishing.net/

Éditions chimères

2026-02-05T12:44:25Z

Lionel :

== Éditions chimères ==

=== Objectif ===
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

=== Lectures et ressources ===

* qu'est-ce une édition hybride?
https://www.design-research.be/hybrid/publications.html
une lecture de Loraine Furter dans le cadre du colloque PrePostPrint en 2018

- hybride? Chimère?

Mesdames et Messœurs, Bienvenue sur le plus hybride des espaces de travail que cette planète ait jamais engendré : le mot « hybride » a deux significations : d’abord, la bâtardisation des genres, leur immixtion sexuelle, l’interpénétration de leurs essences, leur croisement génétique, leur métissage actif. Deuxièmement : être arrogant, outrancier, osé, impertinent, intrépide. En deux mots, soyez audacieuses dans le mélange des genres et des gens. Ulrike Bergermann, « Do X », Cyberféminisme, Conslan vxw, 2001.

Via http://justfortherecord.space/cyber-2017-FR.html

- Imprimer le web?
https://en.wikipedia.org/wiki/Printing_out_the_Internet
https://printwikipedia.com/
http://jamesbridle.com/works/iraq-war-wikihistoriography
https://soulellis.com/entries/lotpw.html
https://soulellis.com/entries/apparition.html

- des outils des langages
https://prepostprint.org/resources/
https://wiki.prepostprint.org/
https://gitlab.com/lionelmaes/pdfutils

- des projets
https://p-dpa.net/
https://expandedpublishing.net/

Éditions chimères

2026-02-05T12:43:01Z

Lionel :

Éditions chimères

2026-02-05T12:42:22Z

Lionel :

== Édition chimère ==
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
* se compléter; l'un des médium permet d'approfondir quelque chose du premier
* donner accès; les deux médiums doivent être combinés pour accéder à un contenu
* se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

Éditions chimères

2026-02-05T12:42:04Z

Lionel : Page créée avec « == Édition chimère == Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple: - se compléter; l'un des médium permet d'approfondir quelque chose du premier - donner accès; les deux médiums doivent être combinés pour accéder à un contenu - se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu etc. En terme de contenu: * possibilité de p... »

== Édition chimère ==
Réaliser une édition combinant le web et le print. Comment une édition peut-elle s'articuler entre les deux médiums, par exemple:
- se compléter; l'un des médium permet d'approfondir quelque chose du premier
- donner accès; les deux médiums doivent être combinés pour accéder à un contenu
- se contredire; les deux médiums produisent deux versions contradictoires d'un même contenu
etc.

En terme de contenu:

* possibilité de poursuivre l'outil d'écriture
* contenu lié à une pratique en dehors du cours
* contenu d'une enquête de terrain - fournir du contenu à mesure que l'enquête se fait
* contenu d'un projet perso de recherche en développement (Masters)
* en lien avec d'autres cours
* contenu non édité/publié d'une autre personne -> projet éditorial dont l'auteur du contenu n'est pas vous mais dont la démarche s'inscrit dans une recherche singulière que vous voulez défendre/explorer (concept éditorial)

MediaWiki:Sidebar

2026-02-05T12:40:58Z

Lionel :

Outils d'écriture

2025-11-06T15:13:52Z

Lionel : /* 06/11 */

== Définition ==
Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série d'interactions, nous permettent de produire du texte.

== Hypothèse ==
Les outils d'écriture conditionnent non seulement ce que l'on écrit - notre production textuelle - mais aussi l'ensemble des gestes, échanges, pensées et relations qui s'actionnent *alors* que l'on écrit, dans le moment de l'écriture.

== Anecdotes ==

* Nous écrivons sur un smartphone, dans une application de messagerie instantanée, nos pouces appuient sur un écran affichant un "clavier virtuel". Les mots peuvent s'autocompléter pour améliorer la vitesse de frappe afin de ne pas faire attendre notre ou nos correspondant·e·s qui, alors que nous tapons, perçoivent au sein de la même interface affichée sur leur propre smartphone trois petits points qui bougent à côté de notre nom, leur signifiant que nous sommes en train d'écrire. Lorsque le message est validé, il est ajouté à la fin d'une liste dont les éléments s'alignent alternativement à droite ou à gauche en fonction de l'émeteur·ice, accompagné du symbole ✓en gris. Lorsque le message est transféré, un deuxième symbole ✓apparaît. Lorsqu'il est lu, les deux symboles ✓ deviennent bleus. Ces indices visuels permettent à chacun·e de savoir si leur correspondant·e est en train d'écrire, si ielle a reçu un message, si ielle a lu ce message. Nous observons donc ces symboles avec attention. Lorsque les trois petits points s'arrêtent de bouger mais que le message n'arrive pas, nous pensons qu'ielle hésite ou qu'ielle compose un message trop long. Lorsque les symboles ✓ restent gris, nous pensons qu'ielle n'a pas pris la peine de lire notre dernier message, ou qu'ielle l'a lu via une notification tout en prenant soin de ne pas ouvrir son application pour ne pas indiquer qu'ielle l'a lu, peut-être pour éviter l'attente d'une réponse que cela induirait, pour arrêter la conversation, faire une pause, passer à autre chose.

* On est en 1882 et Nietzche ne va pas bien. Malade, presque aveugle, il contemple la boule à écrire de Malling-Hansen dont il a fait acquisition quelques mois auparavant, directement auprès de son inventeur; Mr. Malling-Hansen de Copenhague. Son écriture manuscrite, laborieuse et continue, le geste de la main tenant la plume et traçant les lettres d'un trait ininterrompu, accompagnant le flux d'un raisonnement construit, cette écriture qu'il ne pourra plus produire, a laissé la place au martellement des touches de la boule à écrire. Alors qu'il ne voit presque plus, la boule lui permet d'écrire rapidement. C'est une écriture aveugle, la feuille de papier étant entièrement cachée par le dispositif au moment de l'écriture. Nietzche s'adapte donc et produira la suite de son oeuvre en aphorismes, pensées courtes, distinctes et compactes, produites de la relation entretenue avec ce nouvel outil. Il l'affirmera dans une lettre destinée à son ami Kozelitz: "Nos outils d'écriture contribuent à l'élaboration de notre pensée".

== Axes pour un outil d'écriture ==

* écrire à plusieurs, à deux, à trois, en collectif
** écrire en même temps
** écrire en différé
** écrire chacun·e à son tour
* écrire seul·e
* écrire lentement
* écrire rapidement
* écrire par fragments
* écrire pour commenter
* écrire pour proposer une autre version
* écrire pour augmenter
* écrire sans écrire
* écrire pour traduire
* écrire du début à la fin
* écrire par le milieu
* écrire pour cacher
* écrire pour révéler

== Exemples et références ==
* https://pads.erg.be/p/Designnumerique-25-26
* https://margi-nalia.site/
* https://those.tools/tools/marginalia/
* https://gitlab.com/editionsburnaout/padatrad
* Shulgin, Alexei (1997) : https://www.c3.hu/collection/form/index1.html
* https://flowchart.fun/
* https://kool.tools/domino/#2,1
* https://ash-k.itch.io/textreme
* https://www.telescopictext.org/write/

== Objectif ==
Développer un outil d'écriture faisant echo à l'un ou plusieurs axes définis plus haut. L'outil devra être développé pour le web, avec les langages HTML, CSS et Javascript. Un prototype sera mis en ligne pour la remise, le 23 octobre.

== Méthodologie ==
Chaque cours fera l'objet d'une introduction technique et d'une expérience à réaliser en atelier. Chacune de ces expériences devra être publiée à la fin du cours. Votre outil prendra forme à partir de ces expériences. Il vous est demandé de jouer le jeu, ne pas faire appel à une IA générative pour produire le code et de réaliser ces expériences (et votre outil) en utilisant les techniques vues au cours.

== Expériences ==
* 18/09: Hello formulaire. Mettre en page un texte donné au sein d'une page html en utilisant uniquement des éléments de formulaire.
* 25/09: Coucou l'interaction. À partir d'un texte donné à mettre en page au sein d'un document html, programmer des interactions qui modifient sa lisibilité.
* 2/10: Salut le clavier. Afficher un texte entré par le clavier en utilisant la vitesse de frappe comme facteur de changement visuel.
* 9/10: Bonjour l'enregistrement local. Utiliser l'enregistrement local du navigateur pour construire un texte personnel.
* 16/10: Hey l'enregistrement distant. Utiliser l'enregistrement dans un contexte web pour construire un texte à plusieurs.
* 23/10: Présentation des outils.

== Bibliographie ==
[https://flusserfrance.eur-artec.com/wp-content/uploads/2023/07/3000-le-geste-d-ecrire.pdf Vilem Flusser Le geste d'écrire]

[http://%5Bhttp://rosab.net/edit/spip.php?page=article&id_article=16%5D Une histoire d'amour ratée avec la machine à écrire Un extrait de Friedrich Kittler, Gramophone, Film, Typewriter (1986)]

‪Kenneth Goldsmith, L’Écriture sans écriture du langage à l’âge numérique‪

== Exemples de scripts ==
=== 25/09 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Le geste d'écrire</h1>
<h2>Vilém Flusser</h2>
<textarea>
Il s'agit d'une action par laquelle un matériau est mis sur une surface, (par exemple: de la craie sur un tableau noir, ou de l'encre sur une feuille), pour former des dessins, (par exemple: des lettres). Les outils de cette action, (par exemple: le crayon ou la machine à écrire), sont des instruments pour ajouter un matériau à un autre. On pourrait donc supposer que le geste d'écrire est un acte constructif, si par "con—struction" nous voulons dire: ajouter divers matériaux pour former une structure nouvelle. En réalité, le contraire est le fait. Par son "essence", (eidos), le geste d'écrire est un acte d'excavation, de gravure, et le verbe grec "graphein" en est toujours le témoin. Sa technique actuelle cache cette essence. Il y a quelques milliers d'années qu'on s'est mis à gratter des surfaces des briques mésopotamiennes, et c'est cela, pour notre tradition, l'origine de l'écriture. Il s'agit d'un geste dé—structif, d'un acte qui enlève. Écrire, c'est faire des trous. C'est in—scrire, et ce n'est pas sur—scrire, quoique la technique le nie à présent. Un texte êcrit n'est pas une formation sur une surface, mais une in—formation dans une surface. Il s'agit d'un geste pénétrant, négatif, par son origine, et par son in—tention, quoique par sa technique le geste soit son propre contraire.
</textarea>

<input type="button" value="coucou">
<button>coucou</button>
<input type="text">
<select>
<option>du chocolat</option>
<option>de la tarte</option>
</select>
<input type="checkbox"> coché
<input type="file">

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
color:white;
background:rebeccapurple;
}
</syntaxhighlight>

=== 02/10 ===

<syntaxhighlight lang="html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Un titre</h1>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
@font-face {
font-family: grotex;
src: url("Grotex.otf");
font-weight:normal;
font-style: normal;
}

body{
color:white;
background:rebeccapurple;
font-family: grotex;
}

h1{
color:greenyellow;
font-weight:normal;
}

p.type1{
color: red;
}

p.type2{
color:blanchedalmond;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const cacherLesP = function(){
//on va modifier le style des paragraphes
//en ajoutant l'attribut display:none;
const paragraphes = document.querySelectorAll('p');

//paragraphes.style.display = "none";
paragraphes.forEach(cacherLeP);

}

const cacherLeP = function(paragraphe){
paragraphe.style.display = "none";
}

const title = document.querySelector('h1');

//click, mouseenter, mouseleave, mouseup, mousedown, mousemove
//
title.addEventListener('mouseup', cacherLesP);
</syntaxhighlight>

=== 09/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>événements clavier</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="truc"></div>
</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
.truc{
background:red;
}

div.truc{
background: green;
width:100px;
height:100px;
margin-left:10px;
color:white;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const interaction = function(e){

console.log(e);

const truc = document.querySelector('.truc');

//console.log(truc);
console.log(margin);

if(e.key == 'r'){
margin = margin + 10;

}else if(e.key == 'e'){
margin = margin - 10;
}

truc.style.marginLeft = margin+'px';

truc.innerHTML = truc.innerHTML + e.key;

console.log(truc.innerText);
};

const supprimer = function(e){
console.log(e);
if(e.key == "Backspace"){
alert("ATTENTIOOON!");
}
}

let margin = 30;

document.body.addEventListener('keypress', interaction);

document.body.addEventListener('keydown', supprimer);

</syntaxhighlight>

=== 16/10 ===

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction 2</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<audio class="effet" autoplay src="ARMES/distinegration/fx_disintegration_01.wav"></audio>
<audio class="effet2" autoplay src="ARMES/explosion/fx_crawlerexplosion_a.wav"></audio>
<audio class="effet3" autoplay src="ARMES/plasma/fx_plasma_impact_01.wav"></audio>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
const okjoue = function(evenement){

console.log(evenement);

if(evenement.key == "a" || evenement.key == "b"){
const monEffet = document.querySelector('.effet');
monEffet.play();
}else if(evenement.key == "z"){
const effet = document.querySelector('.effet2');
effet.play();
}
else if(evenement.key == "e"){
const effet = document.querySelector('.effet3');
effet.play();
}

}

//const body = document.querySelector('body');

document.body.addEventListener('keypress', okjoue);

</syntaxhighlight>

=== 23/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local storage</title>
<script src="script.js" defer></script>
</head>
<body>
<textarea></textarea>
<button class="sauver">sauver</button>
<button class="supprimer">supprimer</button>
<div></div>

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
//quand je clique sur le bouton "sauver" / j'enregistre le contenu du textarea dans la mémoire du navigateur

const sauver = function(){
let ancienneValeur = '';

if(localStorage.getItem('texte') != null){
ancienneValeur = localStorage.getItem('texte')+" ";
}

localStorage.setItem('texte', ancienneValeur + champDeTexte.value);
memoire.innerHTML = ancienneValeur + champDeTexte.value;
};

const supprimer = function(){
//pour supprimer tout le localStorage
localStorage.clear();
memoire.innerHTML = '';
}

const champDeTexte = document.querySelector('textarea');
const boutonSauver = document.querySelector('button.sauver');
const boutonSupprimer = document.querySelector('button.supprimer');
const memoire = document.querySelector('div');

boutonSauver.addEventListener('click', sauver);
boutonSupprimer.addEventListener('click', supprimer);

//champDeTexte.value = localStorage.getItem('texte');
memoire.innerHTML = localStorage.getItem('texte');

</syntaxhighlight>

=== 06/11 ===
outil.html
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outil</title>
<script src="outil.js" defer></script>
</head>
<body>

</body>
</html>
</syntaxhighlight>
outil.js
<syntaxhighlight lang="js">
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/memoire.txt').
then(reponse => reponse.text()).
then((message) => {

alert(message);

const nouveauMessage = prompt('quelle est votre message?');
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/ecrire.php?texte='+nouveauMessage);
});

</syntaxhighlight>
ecrire.php
<syntaxhighlight lang="php">
<?php

file_put_contents('memoire.txt', $_GET['texte'], FILE_APPEND);

</syntaxhighlight>

[[Catégorie:2025-2026]]

Outils d'écriture

2025-11-06T15:13:18Z

Lionel : /* 06/11 */

== Définition ==
Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série d'interactions, nous permettent de produire du texte.

== Hypothèse ==
Les outils d'écriture conditionnent non seulement ce que l'on écrit - notre production textuelle - mais aussi l'ensemble des gestes, échanges, pensées et relations qui s'actionnent *alors* que l'on écrit, dans le moment de l'écriture.

== Anecdotes ==

* Nous écrivons sur un smartphone, dans une application de messagerie instantanée, nos pouces appuient sur un écran affichant un "clavier virtuel". Les mots peuvent s'autocompléter pour améliorer la vitesse de frappe afin de ne pas faire attendre notre ou nos correspondant·e·s qui, alors que nous tapons, perçoivent au sein de la même interface affichée sur leur propre smartphone trois petits points qui bougent à côté de notre nom, leur signifiant que nous sommes en train d'écrire. Lorsque le message est validé, il est ajouté à la fin d'une liste dont les éléments s'alignent alternativement à droite ou à gauche en fonction de l'émeteur·ice, accompagné du symbole ✓en gris. Lorsque le message est transféré, un deuxième symbole ✓apparaît. Lorsqu'il est lu, les deux symboles ✓ deviennent bleus. Ces indices visuels permettent à chacun·e de savoir si leur correspondant·e est en train d'écrire, si ielle a reçu un message, si ielle a lu ce message. Nous observons donc ces symboles avec attention. Lorsque les trois petits points s'arrêtent de bouger mais que le message n'arrive pas, nous pensons qu'ielle hésite ou qu'ielle compose un message trop long. Lorsque les symboles ✓ restent gris, nous pensons qu'ielle n'a pas pris la peine de lire notre dernier message, ou qu'ielle l'a lu via une notification tout en prenant soin de ne pas ouvrir son application pour ne pas indiquer qu'ielle l'a lu, peut-être pour éviter l'attente d'une réponse que cela induirait, pour arrêter la conversation, faire une pause, passer à autre chose.

* On est en 1882 et Nietzche ne va pas bien. Malade, presque aveugle, il contemple la boule à écrire de Malling-Hansen dont il a fait acquisition quelques mois auparavant, directement auprès de son inventeur; Mr. Malling-Hansen de Copenhague. Son écriture manuscrite, laborieuse et continue, le geste de la main tenant la plume et traçant les lettres d'un trait ininterrompu, accompagnant le flux d'un raisonnement construit, cette écriture qu'il ne pourra plus produire, a laissé la place au martellement des touches de la boule à écrire. Alors qu'il ne voit presque plus, la boule lui permet d'écrire rapidement. C'est une écriture aveugle, la feuille de papier étant entièrement cachée par le dispositif au moment de l'écriture. Nietzche s'adapte donc et produira la suite de son oeuvre en aphorismes, pensées courtes, distinctes et compactes, produites de la relation entretenue avec ce nouvel outil. Il l'affirmera dans une lettre destinée à son ami Kozelitz: "Nos outils d'écriture contribuent à l'élaboration de notre pensée".

== Axes pour un outil d'écriture ==

* écrire à plusieurs, à deux, à trois, en collectif
** écrire en même temps
** écrire en différé
** écrire chacun·e à son tour
* écrire seul·e
* écrire lentement
* écrire rapidement
* écrire par fragments
* écrire pour commenter
* écrire pour proposer une autre version
* écrire pour augmenter
* écrire sans écrire
* écrire pour traduire
* écrire du début à la fin
* écrire par le milieu
* écrire pour cacher
* écrire pour révéler

== Exemples et références ==
* https://pads.erg.be/p/Designnumerique-25-26
* https://margi-nalia.site/
* https://those.tools/tools/marginalia/
* https://gitlab.com/editionsburnaout/padatrad
* Shulgin, Alexei (1997) : https://www.c3.hu/collection/form/index1.html
* https://flowchart.fun/
* https://kool.tools/domino/#2,1
* https://ash-k.itch.io/textreme
* https://www.telescopictext.org/write/

== Objectif ==
Développer un outil d'écriture faisant echo à l'un ou plusieurs axes définis plus haut. L'outil devra être développé pour le web, avec les langages HTML, CSS et Javascript. Un prototype sera mis en ligne pour la remise, le 23 octobre.

== Méthodologie ==
Chaque cours fera l'objet d'une introduction technique et d'une expérience à réaliser en atelier. Chacune de ces expériences devra être publiée à la fin du cours. Votre outil prendra forme à partir de ces expériences. Il vous est demandé de jouer le jeu, ne pas faire appel à une IA générative pour produire le code et de réaliser ces expériences (et votre outil) en utilisant les techniques vues au cours.

== Expériences ==
* 18/09: Hello formulaire. Mettre en page un texte donné au sein d'une page html en utilisant uniquement des éléments de formulaire.
* 25/09: Coucou l'interaction. À partir d'un texte donné à mettre en page au sein d'un document html, programmer des interactions qui modifient sa lisibilité.
* 2/10: Salut le clavier. Afficher un texte entré par le clavier en utilisant la vitesse de frappe comme facteur de changement visuel.
* 9/10: Bonjour l'enregistrement local. Utiliser l'enregistrement local du navigateur pour construire un texte personnel.
* 16/10: Hey l'enregistrement distant. Utiliser l'enregistrement dans un contexte web pour construire un texte à plusieurs.
* 23/10: Présentation des outils.

== Bibliographie ==
[https://flusserfrance.eur-artec.com/wp-content/uploads/2023/07/3000-le-geste-d-ecrire.pdf Vilem Flusser Le geste d'écrire]

[http://%5Bhttp://rosab.net/edit/spip.php?page=article&id_article=16%5D Une histoire d'amour ratée avec la machine à écrire Un extrait de Friedrich Kittler, Gramophone, Film, Typewriter (1986)]

‪Kenneth Goldsmith, L’Écriture sans écriture du langage à l’âge numérique‪

== Exemples de scripts ==
=== 25/09 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Le geste d'écrire</h1>
<h2>Vilém Flusser</h2>
<textarea>
Il s'agit d'une action par laquelle un matériau est mis sur une surface, (par exemple: de la craie sur un tableau noir, ou de l'encre sur une feuille), pour former des dessins, (par exemple: des lettres). Les outils de cette action, (par exemple: le crayon ou la machine à écrire), sont des instruments pour ajouter un matériau à un autre. On pourrait donc supposer que le geste d'écrire est un acte constructif, si par "con—struction" nous voulons dire: ajouter divers matériaux pour former une structure nouvelle. En réalité, le contraire est le fait. Par son "essence", (eidos), le geste d'écrire est un acte d'excavation, de gravure, et le verbe grec "graphein" en est toujours le témoin. Sa technique actuelle cache cette essence. Il y a quelques milliers d'années qu'on s'est mis à gratter des surfaces des briques mésopotamiennes, et c'est cela, pour notre tradition, l'origine de l'écriture. Il s'agit d'un geste dé—structif, d'un acte qui enlève. Écrire, c'est faire des trous. C'est in—scrire, et ce n'est pas sur—scrire, quoique la technique le nie à présent. Un texte êcrit n'est pas une formation sur une surface, mais une in—formation dans une surface. Il s'agit d'un geste pénétrant, négatif, par son origine, et par son in—tention, quoique par sa technique le geste soit son propre contraire.
</textarea>

<input type="button" value="coucou">
<button>coucou</button>
<input type="text">
<select>
<option>du chocolat</option>
<option>de la tarte</option>
</select>
<input type="checkbox"> coché
<input type="file">

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
color:white;
background:rebeccapurple;
}
</syntaxhighlight>

=== 02/10 ===

<syntaxhighlight lang="html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Un titre</h1>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
@font-face {
font-family: grotex;
src: url("Grotex.otf");
font-weight:normal;
font-style: normal;
}

body{
color:white;
background:rebeccapurple;
font-family: grotex;
}

h1{
color:greenyellow;
font-weight:normal;
}

p.type1{
color: red;
}

p.type2{
color:blanchedalmond;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const cacherLesP = function(){
//on va modifier le style des paragraphes
//en ajoutant l'attribut display:none;
const paragraphes = document.querySelectorAll('p');

//paragraphes.style.display = "none";
paragraphes.forEach(cacherLeP);

}

const cacherLeP = function(paragraphe){
paragraphe.style.display = "none";
}

const title = document.querySelector('h1');

//click, mouseenter, mouseleave, mouseup, mousedown, mousemove
//
title.addEventListener('mouseup', cacherLesP);
</syntaxhighlight>

=== 09/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>événements clavier</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="truc"></div>
</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
.truc{
background:red;
}

div.truc{
background: green;
width:100px;
height:100px;
margin-left:10px;
color:white;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const interaction = function(e){

console.log(e);

const truc = document.querySelector('.truc');

//console.log(truc);
console.log(margin);

if(e.key == 'r'){
margin = margin + 10;

}else if(e.key == 'e'){
margin = margin - 10;
}

truc.style.marginLeft = margin+'px';

truc.innerHTML = truc.innerHTML + e.key;

console.log(truc.innerText);
};

const supprimer = function(e){
console.log(e);
if(e.key == "Backspace"){
alert("ATTENTIOOON!");
}
}

let margin = 30;

document.body.addEventListener('keypress', interaction);

document.body.addEventListener('keydown', supprimer);

</syntaxhighlight>

=== 16/10 ===

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction 2</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<audio class="effet" autoplay src="ARMES/distinegration/fx_disintegration_01.wav"></audio>
<audio class="effet2" autoplay src="ARMES/explosion/fx_crawlerexplosion_a.wav"></audio>
<audio class="effet3" autoplay src="ARMES/plasma/fx_plasma_impact_01.wav"></audio>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
const okjoue = function(evenement){

console.log(evenement);

if(evenement.key == "a" || evenement.key == "b"){
const monEffet = document.querySelector('.effet');
monEffet.play();
}else if(evenement.key == "z"){
const effet = document.querySelector('.effet2');
effet.play();
}
else if(evenement.key == "e"){
const effet = document.querySelector('.effet3');
effet.play();
}

}

//const body = document.querySelector('body');

document.body.addEventListener('keypress', okjoue);

</syntaxhighlight>

=== 23/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local storage</title>
<script src="script.js" defer></script>
</head>
<body>
<textarea></textarea>
<button class="sauver">sauver</button>
<button class="supprimer">supprimer</button>
<div></div>

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
//quand je clique sur le bouton "sauver" / j'enregistre le contenu du textarea dans la mémoire du navigateur

const sauver = function(){
let ancienneValeur = '';

if(localStorage.getItem('texte') != null){
ancienneValeur = localStorage.getItem('texte')+" ";
}

localStorage.setItem('texte', ancienneValeur + champDeTexte.value);
memoire.innerHTML = ancienneValeur + champDeTexte.value;
};

const supprimer = function(){
//pour supprimer tout le localStorage
localStorage.clear();
memoire.innerHTML = '';
}

const champDeTexte = document.querySelector('textarea');
const boutonSauver = document.querySelector('button.sauver');
const boutonSupprimer = document.querySelector('button.supprimer');
const memoire = document.querySelector('div');

boutonSauver.addEventListener('click', sauver);
boutonSupprimer.addEventListener('click', supprimer);

//champDeTexte.value = localStorage.getItem('texte');
memoire.innerHTML = localStorage.getItem('texte');

</syntaxhighlight>

=== 06/11 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outil</title>
<script src="outil.js" defer></script>
</head>
<body>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="js">
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/memoire.txt').
then(reponse => reponse.text()).
then((message) => {

alert(message);

const nouveauMessage = prompt('quelle est votre message?');
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/ecrire.php?texte='+nouveauMessage);
});

</syntaxhighlight>
<syntaxhighlight lang="php">
<?php

file_put_contents('memoire.txt', $_GET['texte'], FILE_APPEND);

</syntaxhighlight>

[[Catégorie:2025-2026]]

Outils d'écriture

2025-11-06T15:12:51Z

Lionel :

== Définition ==
Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série d'interactions, nous permettent de produire du texte.

== Hypothèse ==
Les outils d'écriture conditionnent non seulement ce que l'on écrit - notre production textuelle - mais aussi l'ensemble des gestes, échanges, pensées et relations qui s'actionnent *alors* que l'on écrit, dans le moment de l'écriture.

== Anecdotes ==

* Nous écrivons sur un smartphone, dans une application de messagerie instantanée, nos pouces appuient sur un écran affichant un "clavier virtuel". Les mots peuvent s'autocompléter pour améliorer la vitesse de frappe afin de ne pas faire attendre notre ou nos correspondant·e·s qui, alors que nous tapons, perçoivent au sein de la même interface affichée sur leur propre smartphone trois petits points qui bougent à côté de notre nom, leur signifiant que nous sommes en train d'écrire. Lorsque le message est validé, il est ajouté à la fin d'une liste dont les éléments s'alignent alternativement à droite ou à gauche en fonction de l'émeteur·ice, accompagné du symbole ✓en gris. Lorsque le message est transféré, un deuxième symbole ✓apparaît. Lorsqu'il est lu, les deux symboles ✓ deviennent bleus. Ces indices visuels permettent à chacun·e de savoir si leur correspondant·e est en train d'écrire, si ielle a reçu un message, si ielle a lu ce message. Nous observons donc ces symboles avec attention. Lorsque les trois petits points s'arrêtent de bouger mais que le message n'arrive pas, nous pensons qu'ielle hésite ou qu'ielle compose un message trop long. Lorsque les symboles ✓ restent gris, nous pensons qu'ielle n'a pas pris la peine de lire notre dernier message, ou qu'ielle l'a lu via une notification tout en prenant soin de ne pas ouvrir son application pour ne pas indiquer qu'ielle l'a lu, peut-être pour éviter l'attente d'une réponse que cela induirait, pour arrêter la conversation, faire une pause, passer à autre chose.

* On est en 1882 et Nietzche ne va pas bien. Malade, presque aveugle, il contemple la boule à écrire de Malling-Hansen dont il a fait acquisition quelques mois auparavant, directement auprès de son inventeur; Mr. Malling-Hansen de Copenhague. Son écriture manuscrite, laborieuse et continue, le geste de la main tenant la plume et traçant les lettres d'un trait ininterrompu, accompagnant le flux d'un raisonnement construit, cette écriture qu'il ne pourra plus produire, a laissé la place au martellement des touches de la boule à écrire. Alors qu'il ne voit presque plus, la boule lui permet d'écrire rapidement. C'est une écriture aveugle, la feuille de papier étant entièrement cachée par le dispositif au moment de l'écriture. Nietzche s'adapte donc et produira la suite de son oeuvre en aphorismes, pensées courtes, distinctes et compactes, produites de la relation entretenue avec ce nouvel outil. Il l'affirmera dans une lettre destinée à son ami Kozelitz: "Nos outils d'écriture contribuent à l'élaboration de notre pensée".

== Axes pour un outil d'écriture ==

* écrire à plusieurs, à deux, à trois, en collectif
** écrire en même temps
** écrire en différé
** écrire chacun·e à son tour
* écrire seul·e
* écrire lentement
* écrire rapidement
* écrire par fragments
* écrire pour commenter
* écrire pour proposer une autre version
* écrire pour augmenter
* écrire sans écrire
* écrire pour traduire
* écrire du début à la fin
* écrire par le milieu
* écrire pour cacher
* écrire pour révéler

== Exemples et références ==
* https://pads.erg.be/p/Designnumerique-25-26
* https://margi-nalia.site/
* https://those.tools/tools/marginalia/
* https://gitlab.com/editionsburnaout/padatrad
* Shulgin, Alexei (1997) : https://www.c3.hu/collection/form/index1.html
* https://flowchart.fun/
* https://kool.tools/domino/#2,1
* https://ash-k.itch.io/textreme
* https://www.telescopictext.org/write/

== Objectif ==
Développer un outil d'écriture faisant echo à l'un ou plusieurs axes définis plus haut. L'outil devra être développé pour le web, avec les langages HTML, CSS et Javascript. Un prototype sera mis en ligne pour la remise, le 23 octobre.

== Méthodologie ==
Chaque cours fera l'objet d'une introduction technique et d'une expérience à réaliser en atelier. Chacune de ces expériences devra être publiée à la fin du cours. Votre outil prendra forme à partir de ces expériences. Il vous est demandé de jouer le jeu, ne pas faire appel à une IA générative pour produire le code et de réaliser ces expériences (et votre outil) en utilisant les techniques vues au cours.

== Expériences ==
* 18/09: Hello formulaire. Mettre en page un texte donné au sein d'une page html en utilisant uniquement des éléments de formulaire.
* 25/09: Coucou l'interaction. À partir d'un texte donné à mettre en page au sein d'un document html, programmer des interactions qui modifient sa lisibilité.
* 2/10: Salut le clavier. Afficher un texte entré par le clavier en utilisant la vitesse de frappe comme facteur de changement visuel.
* 9/10: Bonjour l'enregistrement local. Utiliser l'enregistrement local du navigateur pour construire un texte personnel.
* 16/10: Hey l'enregistrement distant. Utiliser l'enregistrement dans un contexte web pour construire un texte à plusieurs.
* 23/10: Présentation des outils.

== Bibliographie ==
[https://flusserfrance.eur-artec.com/wp-content/uploads/2023/07/3000-le-geste-d-ecrire.pdf Vilem Flusser Le geste d'écrire]

[http://%5Bhttp://rosab.net/edit/spip.php?page=article&id_article=16%5D Une histoire d'amour ratée avec la machine à écrire Un extrait de Friedrich Kittler, Gramophone, Film, Typewriter (1986)]

‪Kenneth Goldsmith, L’Écriture sans écriture du langage à l’âge numérique‪

== Exemples de scripts ==
=== 25/09 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Le geste d'écrire</h1>
<h2>Vilém Flusser</h2>
<textarea>
Il s'agit d'une action par laquelle un matériau est mis sur une surface, (par exemple: de la craie sur un tableau noir, ou de l'encre sur une feuille), pour former des dessins, (par exemple: des lettres). Les outils de cette action, (par exemple: le crayon ou la machine à écrire), sont des instruments pour ajouter un matériau à un autre. On pourrait donc supposer que le geste d'écrire est un acte constructif, si par "con—struction" nous voulons dire: ajouter divers matériaux pour former une structure nouvelle. En réalité, le contraire est le fait. Par son "essence", (eidos), le geste d'écrire est un acte d'excavation, de gravure, et le verbe grec "graphein" en est toujours le témoin. Sa technique actuelle cache cette essence. Il y a quelques milliers d'années qu'on s'est mis à gratter des surfaces des briques mésopotamiennes, et c'est cela, pour notre tradition, l'origine de l'écriture. Il s'agit d'un geste dé—structif, d'un acte qui enlève. Écrire, c'est faire des trous. C'est in—scrire, et ce n'est pas sur—scrire, quoique la technique le nie à présent. Un texte êcrit n'est pas une formation sur une surface, mais une in—formation dans une surface. Il s'agit d'un geste pénétrant, négatif, par son origine, et par son in—tention, quoique par sa technique le geste soit son propre contraire.
</textarea>

<input type="button" value="coucou">
<button>coucou</button>
<input type="text">
<select>
<option>du chocolat</option>
<option>de la tarte</option>
</select>
<input type="checkbox"> coché
<input type="file">

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
color:white;
background:rebeccapurple;
}
</syntaxhighlight>

=== 02/10 ===

<syntaxhighlight lang="html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Un titre</h1>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
@font-face {
font-family: grotex;
src: url("Grotex.otf");
font-weight:normal;
font-style: normal;
}

body{
color:white;
background:rebeccapurple;
font-family: grotex;
}

h1{
color:greenyellow;
font-weight:normal;
}

p.type1{
color: red;
}

p.type2{
color:blanchedalmond;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const cacherLesP = function(){
//on va modifier le style des paragraphes
//en ajoutant l'attribut display:none;
const paragraphes = document.querySelectorAll('p');

//paragraphes.style.display = "none";
paragraphes.forEach(cacherLeP);

}

const cacherLeP = function(paragraphe){
paragraphe.style.display = "none";
}

const title = document.querySelector('h1');

//click, mouseenter, mouseleave, mouseup, mousedown, mousemove
//
title.addEventListener('mouseup', cacherLesP);
</syntaxhighlight>

=== 09/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>événements clavier</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="truc"></div>
</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
.truc{
background:red;
}

div.truc{
background: green;
width:100px;
height:100px;
margin-left:10px;
color:white;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const interaction = function(e){

console.log(e);

const truc = document.querySelector('.truc');

//console.log(truc);
console.log(margin);

if(e.key == 'r'){
margin = margin + 10;

}else if(e.key == 'e'){
margin = margin - 10;
}

truc.style.marginLeft = margin+'px';

truc.innerHTML = truc.innerHTML + e.key;

console.log(truc.innerText);
};

const supprimer = function(e){
console.log(e);
if(e.key == "Backspace"){
alert("ATTENTIOOON!");
}
}

let margin = 30;

document.body.addEventListener('keypress', interaction);

document.body.addEventListener('keydown', supprimer);

</syntaxhighlight>

=== 16/10 ===

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction 2</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<audio class="effet" autoplay src="ARMES/distinegration/fx_disintegration_01.wav"></audio>
<audio class="effet2" autoplay src="ARMES/explosion/fx_crawlerexplosion_a.wav"></audio>
<audio class="effet3" autoplay src="ARMES/plasma/fx_plasma_impact_01.wav"></audio>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
const okjoue = function(evenement){

console.log(evenement);

if(evenement.key == "a" || evenement.key == "b"){
const monEffet = document.querySelector('.effet');
monEffet.play();
}else if(evenement.key == "z"){
const effet = document.querySelector('.effet2');
effet.play();
}
else if(evenement.key == "e"){
const effet = document.querySelector('.effet3');
effet.play();
}

}

//const body = document.querySelector('body');

document.body.addEventListener('keypress', okjoue);

</syntaxhighlight>

=== 23/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local storage</title>
<script src="script.js" defer></script>
</head>
<body>
<textarea></textarea>
<button class="sauver">sauver</button>
<button class="supprimer">supprimer</button>
<div></div>

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
//quand je clique sur le bouton "sauver" / j'enregistre le contenu du textarea dans la mémoire du navigateur

const sauver = function(){
let ancienneValeur = '';

if(localStorage.getItem('texte') != null){
ancienneValeur = localStorage.getItem('texte')+" ";
}

localStorage.setItem('texte', ancienneValeur + champDeTexte.value);
memoire.innerHTML = ancienneValeur + champDeTexte.value;
};

const supprimer = function(){
//pour supprimer tout le localStorage
localStorage.clear();
memoire.innerHTML = '';
}

const champDeTexte = document.querySelector('textarea');
const boutonSauver = document.querySelector('button.sauver');
const boutonSupprimer = document.querySelector('button.supprimer');
const memoire = document.querySelector('div');

boutonSauver.addEventListener('click', sauver);
boutonSupprimer.addEventListener('click', supprimer);

//champDeTexte.value = localStorage.getItem('texte');
memoire.innerHTML = localStorage.getItem('texte');

</syntaxhighlight>

=== 06/11 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outil</title>
<script src="outil.js" defer></script>
</head>
<body>

</body>
</html>

<syntaxhighlight lang="js">
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/memoire.txt').
then(reponse => reponse.text()).
then((message) => {

alert(message);

const nouveauMessage = prompt('quelle est votre message?');
fetch('https://work.designnumerique.be/lionel/ecriture-serveur/ecrire.php?texte='+nouveauMessage);
});

</syntaxhighlight>
<syntaxhighlight lang="php">
<?php

file_put_contents('memoire.txt', $_GET['texte'], FILE_APPEND);

</syntaxhighlight>

[[Catégorie:2025-2026]]

Outils d'écriture

2025-10-23T16:47:44Z

Lionel :

Outils d'écriture

2025-10-16T13:56:53Z

Lionel :

Outils d'écriture

2025-10-16T13:55:52Z

Lionel :

== Définition ==
Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série d'interactions, nous permettent de produire du texte.

== Hypothèse ==
Les outils d'écriture conditionnent non seulement ce que l'on écrit - notre production textuelle - mais aussi l'ensemble des gestes, échanges, pensées et relations qui s'actionnent *alors* que l'on écrit, dans le moment de l'écriture.

== Anecdotes ==

* Nous écrivons sur un smartphone, dans une application de messagerie instantanée, nos pouces appuient sur un écran affichant un "clavier virtuel". Les mots peuvent s'autocompléter pour améliorer la vitesse de frappe afin de ne pas faire attendre notre ou nos correspondant·e·s qui, alors que nous tapons, perçoivent au sein de la même interface affichée sur leur propre smartphone trois petits points qui bougent à côté de notre nom, leur signifiant que nous sommes en train d'écrire. Lorsque le message est validé, il est ajouté à la fin d'une liste dont les éléments s'alignent alternativement à droite ou à gauche en fonction de l'émeteur·ice, accompagné du symbole ✓en gris. Lorsque le message est transféré, un deuxième symbole ✓apparaît. Lorsqu'il est lu, les deux symboles ✓ deviennent bleus. Ces indices visuels permettent à chacun·e de savoir si leur correspondant·e est en train d'écrire, si ielle a reçu un message, si ielle a lu ce message. Nous observons donc ces symboles avec attention. Lorsque les trois petits points s'arrêtent de bouger mais que le message n'arrive pas, nous pensons qu'ielle hésite ou qu'ielle compose un message trop long. Lorsque les symboles ✓ restent gris, nous pensons qu'ielle n'a pas pris la peine de lire notre dernier message, ou qu'ielle l'a lu via une notification tout en prenant soin de ne pas ouvrir son application pour ne pas indiquer qu'ielle l'a lu, peut-être pour éviter l'attente d'une réponse que cela induirait, pour arrêter la conversation, faire une pause, passer à autre chose.

* On est en 1882 et Nietzche ne va pas bien. Malade, presque aveugle, il contemple la boule à écrire de Malling-Hansen dont il a fait acquisition quelques mois auparavant, directement auprès de son inventeur; Mr. Malling-Hansen de Copenhague. Son écriture manuscrite, laborieuse et continue, le geste de la main tenant la plume et traçant les lettres d'un trait ininterrompu, accompagnant le flux d'un raisonnement construit, cette écriture qu'il ne pourra plus produire, a laissé la place au martellement des touches de la boule à écrire. Alors qu'il ne voit presque plus, la boule lui permet d'écrire rapidement. C'est une écriture aveugle, la feuille de papier étant entièrement cachée par le dispositif au moment de l'écriture. Nietzche s'adapte donc et produira la suite de son oeuvre en aphorismes, pensées courtes, distinctes et compactes, produites de la relation entretenue avec ce nouvel outil. Il l'affirmera dans une lettre destinée à son ami Kozelitz: "Nos outils d'écriture contribuent à l'élaboration de notre pensée".

== Axes pour un outil d'écriture ==

* écrire à plusieurs, à deux, à trois, en collectif
** écrire en même temps
** écrire en différé
** écrire chacun·e à son tour
* écrire seul·e
* écrire lentement
* écrire rapidement
* écrire par fragments
* écrire pour commenter
* écrire pour proposer une autre version
* écrire pour augmenter
* écrire sans écrire
* écrire pour traduire
* écrire du début à la fin
* écrire par le milieu
* écrire pour cacher
* écrire pour révéler

== Exemples et références ==
* https://pads.erg.be/p/Designnumerique-25-26
* https://margi-nalia.site/
* https://those.tools/tools/marginalia/
* https://gitlab.com/editionsburnaout/padatrad
* Shulgin, Alexei (1997) : https://www.c3.hu/collection/form/index1.html
* https://flowchart.fun/
* https://kool.tools/domino/#2,1
* https://ash-k.itch.io/textreme
* https://www.telescopictext.org/write/

== Objectif ==
Développer un outil d'écriture faisant echo à l'un ou plusieurs axes définis plus haut. L'outil devra être développé pour le web, avec les langages HTML, CSS et Javascript. Un prototype sera mis en ligne pour la remise, le 23 octobre.

== Méthodologie ==
Chaque cours fera l'objet d'une introduction technique et d'une expérience à réaliser en atelier. Chacune de ces expériences devra être publiée à la fin du cours. Votre outil prendra forme à partir de ces expériences. Il vous est demandé de jouer le jeu, ne pas faire appel à une IA générative pour produire le code et de réaliser ces expériences (et votre outil) en utilisant les techniques vues au cours.

== Expériences ==
* 18/09: Hello formulaire. Mettre en page un texte donné au sein d'une page html en utilisant uniquement des éléments de formulaire.
* 25/09: Coucou l'interaction. À partir d'un texte donné à mettre en page au sein d'un document html, programmer des interactions qui modifient sa lisibilité.
* 2/10: Salut le clavier. Afficher un texte entré par le clavier en utilisant la vitesse de frappe comme facteur de changement visuel.
* 9/10: Bonjour l'enregistrement local. Utiliser l'enregistrement local du navigateur pour construire un texte personnel.
* 16/10: Hey l'enregistrement distant. Utiliser l'enregistrement dans un contexte web pour construire un texte à plusieurs.
* 23/10: Présentation des outils.

== Bibliographie ==
[https://flusserfrance.eur-artec.com/wp-content/uploads/2023/07/3000-le-geste-d-ecrire.pdf Vilem Flusser Le geste d'écrire]

[http://%5Bhttp://rosab.net/edit/spip.php?page=article&id_article=16%5D Une histoire d'amour ratée avec la machine à écrire Un extrait de Friedrich Kittler, Gramophone, Film, Typewriter (1986)]

‪Kenneth Goldsmith, L’Écriture sans écriture du langage à l’âge numérique‪

== Exemples de scripts ==
=== 25/09 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Le geste d'écrire</h1>
<h2>Vilém Flusser</h2>
<textarea>
Il s'agit d'une action par laquelle un matériau est mis sur une surface, (par exemple: de la craie sur un tableau noir, ou de l'encre sur une feuille), pour former des dessins, (par exemple: des lettres). Les outils de cette action, (par exemple: le crayon ou la machine à écrire), sont des instruments pour ajouter un matériau à un autre. On pourrait donc supposer que le geste d'écrire est un acte constructif, si par "con—struction" nous voulons dire: ajouter divers matériaux pour former une structure nouvelle. En réalité, le contraire est le fait. Par son "essence", (eidos), le geste d'écrire est un acte d'excavation, de gravure, et le verbe grec "graphein" en est toujours le témoin. Sa technique actuelle cache cette essence. Il y a quelques milliers d'années qu'on s'est mis à gratter des surfaces des briques mésopotamiennes, et c'est cela, pour notre tradition, l'origine de l'écriture. Il s'agit d'un geste dé—structif, d'un acte qui enlève. Écrire, c'est faire des trous. C'est in—scrire, et ce n'est pas sur—scrire, quoique la technique le nie à présent. Un texte êcrit n'est pas une formation sur une surface, mais une in—formation dans une surface. Il s'agit d'un geste pénétrant, négatif, par son origine, et par son in—tention, quoique par sa technique le geste soit son propre contraire.
</textarea>

<input type="button" value="coucou">
<button>coucou</button>
<input type="text">
<select>
<option>du chocolat</option>
<option>de la tarte</option>
</select>
<input type="checkbox"> coché
<input type="file">

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
color:white;
background:rebeccapurple;
}
</syntaxhighlight>

=== 02/10 ===

<syntaxhighlight lang="html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Un titre</h1>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
@font-face {
font-family: grotex;
src: url("Grotex.otf");
font-weight:normal;
font-style: normal;
}

body{
color:white;
background:rebeccapurple;
font-family: grotex;
}

h1{
color:greenyellow;
font-weight:normal;
}

p.type1{
color: red;
}

p.type2{
color:blanchedalmond;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const cacherLesP = function(){
//on va modifier le style des paragraphes
//en ajoutant l'attribut display:none;
const paragraphes = document.querySelectorAll('p');

//paragraphes.style.display = "none";
paragraphes.forEach(cacherLeP);

}

const cacherLeP = function(paragraphe){
paragraphe.style.display = "none";
}

const title = document.querySelector('h1');

//click, mouseenter, mouseleave, mouseup, mousedown, mousemove
//
title.addEventListener('mouseup', cacherLesP);
</syntaxhighlight>

=== 09/10 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>événements clavier</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="truc"></div>
</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
.truc{
background:red;
}

div.truc{
background: green;
width:100px;
height:100px;
margin-left:10px;
color:white;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const interaction = function(e){

console.log(e);

const truc = document.querySelector('.truc');

//console.log(truc);
console.log(margin);

if(e.key == 'r'){
margin = margin + 10;

}else if(e.key == 'e'){
margin = margin - 10;
}

truc.style.marginLeft = margin+'px';

truc.innerHTML = truc.innerHTML + e.key;

console.log(truc.innerText);
};

const supprimer = function(e){
console.log(e);
if(e.key == "Backspace"){
alert("ATTENTIOOON!");
}
}

let margin = 30;

document.body.addEventListener('keypress', interaction);

document.body.addEventListener('keydown', supprimer);

</syntaxhighlight>

== 16/10 ==

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction 2</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<audio class="effet" autoplay src="ARMES/distinegration/fx_disintegration_01.wav"></audio>
<audio class="effet2" autoplay src="ARMES/explosion/fx_crawlerexplosion_a.wav"></audio>
<audio class="effet3" autoplay src="ARMES/plasma/fx_plasma_impact_01.wav"></audio>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="js">
const okjoue = function(evenement){

console.log(evenement);

if(evenement.key == "a" || evenement.key == "b"){
const monEffet = document.querySelector('.effet');
monEffet.play();
}else if(evenement.key == "z"){
const effet = document.querySelector('.effet2');
effet.play();
}
else if(evenement.key == "e"){
const effet = document.querySelector('.effet3');
effet.play();
}

}

//const body = document.querySelector('body');

document.body.addEventListener('keypress', okjoue);

</syntaxhighlight>

[[Catégorie:2025-2026]]

Outils d'écriture

2025-10-09T17:45:31Z

Lionel :

Outils d'écriture

2025-10-09T17:43:52Z

Lionel :

== Définition ==
Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série d'interactions, nous permettent de produire du texte.

== Hypothèse ==
Les outils d'écriture conditionnent non seulement ce que l'on écrit - notre production textuelle - mais aussi l'ensemble des gestes, échanges, pensées et relations qui s'actionnent *alors* que l'on écrit, dans le moment de l'écriture.

== Anecdotes ==

* Nous écrivons sur un smartphone, dans une application de messagerie instantanée, nos pouces appuient sur un écran affichant un "clavier virtuel". Les mots peuvent s'autocompléter pour améliorer la vitesse de frappe afin de ne pas faire attendre notre ou nos correspondant·e·s qui, alors que nous tapons, perçoivent au sein de la même interface affichée sur leur propre smartphone trois petits points qui bougent à côté de notre nom, leur signifiant que nous sommes en train d'écrire. Lorsque le message est validé, il est ajouté à la fin d'une liste dont les éléments s'alignent alternativement à droite ou à gauche en fonction de l'émeteur·ice, accompagné du symbole ✓en gris. Lorsque le message est transféré, un deuxième symbole ✓apparaît. Lorsqu'il est lu, les deux symboles ✓ deviennent bleus. Ces indices visuels permettent à chacun·e de savoir si leur correspondant·e est en train d'écrire, si ielle a reçu un message, si ielle a lu ce message. Nous observons donc ces symboles avec attention. Lorsque les trois petits points s'arrêtent de bouger mais que le message n'arrive pas, nous pensons qu'ielle hésite ou qu'ielle compose un message trop long. Lorsque les symboles ✓ restent gris, nous pensons qu'ielle n'a pas pris la peine de lire notre dernier message, ou qu'ielle l'a lu via une notification tout en prenant soin de ne pas ouvrir son application pour ne pas indiquer qu'ielle l'a lu, peut-être pour éviter l'attente d'une réponse que cela induirait, pour arrêter la conversation, faire une pause, passer à autre chose.

* On est en 1882 et Nietzche ne va pas bien. Malade, presque aveugle, il contemple la boule à écrire de Malling-Hansen dont il a fait acquisition quelques mois auparavant, directement auprès de son inventeur; Mr. Malling-Hansen de Copenhague. Son écriture manuscrite, laborieuse et continue, le geste de la main tenant la plume et traçant les lettres d'un trait ininterrompu, accompagnant le flux d'un raisonnement construit, cette écriture qu'il ne pourra plus produire, a laissé la place au martellement des touches de la boule à écrire. Alors qu'il ne voit presque plus, la boule lui permet d'écrire rapidement. C'est une écriture aveugle, la feuille de papier étant entièrement cachée par le dispositif au moment de l'écriture. Nietzche s'adapte donc et produira la suite de son oeuvre en aphorismes, pensées courtes, distinctes et compactes, produites de la relation entretenue avec ce nouvel outil. Il l'affirmera dans une lettre destinée à son ami Kozelitz: "Nos outils d'écriture contribuent à l'élaboration de notre pensée".

== Axes pour un outil d'écriture ==

* écrire à plusieurs, à deux, à trois, en collectif
** écrire en même temps
** écrire en différé
** écrire chacun·e à son tour
* écrire seul·e
* écrire lentement
* écrire rapidement
* écrire par fragments
* écrire pour commenter
* écrire pour proposer une autre version
* écrire pour augmenter
* écrire sans écrire
* écrire pour traduire
* écrire du début à la fin
* écrire par le milieu
* écrire pour cacher
* écrire pour révéler

== Exemples et références ==
* https://pads.erg.be/p/Designnumerique-25-26
* https://margi-nalia.site/
* https://those.tools/tools/marginalia/
* https://gitlab.com/editionsburnaout/padatrad
* Shulgin, Alexei (1997) : https://www.c3.hu/collection/form/index1.html
* https://flowchart.fun/
* https://kool.tools/domino/#2,1
* https://ash-k.itch.io/textreme
* https://www.telescopictext.org/write/

== Objectif ==
Développer un outil d'écriture faisant echo à l'un ou plusieurs axes définis plus haut. L'outil devra être développé pour le web, avec les langages HTML, CSS et Javascript. Un prototype sera mis en ligne pour la remise, le 23 octobre.

== Méthodologie ==
Chaque cours fera l'objet d'une introduction technique et d'une expérience à réaliser en atelier. Chacune de ces expériences devra être publiée à la fin du cours. Votre outil prendra forme à partir de ces expériences. Il vous est demandé de jouer le jeu, ne pas faire appel à une IA générative pour produire le code et de réaliser ces expériences (et votre outil) en utilisant les techniques vues au cours.

== Expériences ==
* 18/09: Hello formulaire. Mettre en page un texte donné au sein d'une page html en utilisant uniquement des éléments de formulaire.
* 25/09: Coucou l'interaction. À partir d'un texte donné à mettre en page au sein d'un document html, programmer des interactions qui modifient sa lisibilité.
* 2/10: Salut le clavier. Afficher un texte entré par le clavier en utilisant la vitesse de frappe comme facteur de changement visuel.
* 9/10: Bonjour l'enregistrement local. Utiliser l'enregistrement local du navigateur pour construire un texte personnel.
* 16/10: Hey l'enregistrement distant. Utiliser l'enregistrement dans un contexte web pour construire un texte à plusieurs.
* 23/10: Présentation des outils.

== Bibliographie ==
[https://flusserfrance.eur-artec.com/wp-content/uploads/2023/07/3000-le-geste-d-ecrire.pdf Vilem Flusser Le geste d'écrire]

[http://%5Bhttp://rosab.net/edit/spip.php?page=article&id_article=16%5D Une histoire d'amour ratée avec la machine à écrire Un extrait de Friedrich Kittler, Gramophone, Film, Typewriter (1986)]

‪Kenneth Goldsmith, L’Écriture sans écriture du langage à l’âge numérique‪

== Exemples de scripts ==
=== 25/09 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Le geste d'écrire</h1>
<h2>Vilém Flusser</h2>
<textarea>
Il s'agit d'une action par laquelle un matériau est mis sur une surface, (par exemple: de la craie sur un tableau noir, ou de l'encre sur une feuille), pour former des dessins, (par exemple: des lettres). Les outils de cette action, (par exemple: le crayon ou la machine à écrire), sont des instruments pour ajouter un matériau à un autre. On pourrait donc supposer que le geste d'écrire est un acte constructif, si par "con—struction" nous voulons dire: ajouter divers matériaux pour former une structure nouvelle. En réalité, le contraire est le fait. Par son "essence", (eidos), le geste d'écrire est un acte d'excavation, de gravure, et le verbe grec "graphein" en est toujours le témoin. Sa technique actuelle cache cette essence. Il y a quelques milliers d'années qu'on s'est mis à gratter des surfaces des briques mésopotamiennes, et c'est cela, pour notre tradition, l'origine de l'écriture. Il s'agit d'un geste dé—structif, d'un acte qui enlève. Écrire, c'est faire des trous. C'est in—scrire, et ce n'est pas sur—scrire, quoique la technique le nie à présent. Un texte êcrit n'est pas une formation sur une surface, mais une in—formation dans une surface. Il s'agit d'un geste pénétrant, négatif, par son origine, et par son in—tention, quoique par sa technique le geste soit son propre contraire.
</textarea>

<input type="button" value="coucou">
<button>coucou</button>
<input type="text">
<select>
<option>du chocolat</option>
<option>de la tarte</option>
</select>
<input type="checkbox"> coché
<input type="file">

</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
color:white;
background:rebeccapurple;
}
</syntaxhighlight>

=== 02/10 ===

<syntaxhighlight lang="html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form 2 text</title>
<style>

</style>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Un titre</h1>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>
<p class="type1">
Premier paragraphe
</p>
<p class="type2">
Deuxième paragraphe
</p>

</body>
</html>
</syntaxhighlight>
<syntaxhighlight lang="css">
@font-face {
font-family: grotex;
src: url("Grotex.otf");
font-weight:normal;
font-style: normal;
}

body{
color:white;
background:rebeccapurple;
font-family: grotex;
}

h1{
color:greenyellow;
font-weight:normal;
}

p.type1{
color: red;
}

p.type2{
color:blanchedalmond;
}
</syntaxhighlight>

<syntaxhighlight lang="js">
const cacherLesP = function(){
//on va modifier le style des paragraphes
//en ajoutant l'attribut display:none;
const paragraphes = document.querySelectorAll('p');

//paragraphes.style.display = "none";
paragraphes.forEach(cacherLeP);

}

const cacherLeP = function(paragraphe){
paragraphe.style.display = "none";
}

const title = document.querySelector('h1');

//click, mouseenter, mouseleave, mouseup, mousedown, mousemove
//
title.addEventListener('mouseup', cacherLesP);
</syntaxhighlight>

=== 09/10 ===
<syntaxhighlight lang="js">
const interaction = function(e){

console.log(e);

const truc = document.querySelector('.truc');

//console.log(truc);
console.log(margin);

if(e.key == 'r'){
margin = margin + 10;

}else if(e.key == 'e'){
margin = margin - 10;
}

truc.style.marginLeft = margin+'px';

truc.innerHTML = truc.innerHTML + e.key;

console.log(truc.innerText);
};

const supprimer = function(e){
console.log(e);
if(e.key == "Backspace"){
alert("ATTENTIOOON!");
}
}

let margin = 30;

document.body.addEventListener('keypress', interaction);

document.body.addEventListener('keydown', supprimer);

</syntaxhighlight>

[[Catégorie:2025-2026]]

Outils d'écriture

2025-10-02T14:37:25Z

Lionel :

Outils d'écriture

2025-10-02T13:35:42Z

Lionel :

Outils d'écriture

2025-10-02T13:35:15Z

Lionel :

Outils d'écriture

2025-10-02T09:22:40Z

Lionel :

Outils d'écriture

2025-09-25T15:05:20Z

Lionel :

MediaWiki:Sidebar

2025-09-25T13:28:23Z

Lionel :

Outils d'écriture

2025-09-17T09:03:58Z

Lionel :

Outils d'écriture

2025-09-17T09:03:28Z

Lionel : Page créée avec « == Définition == Les outils d'écriture qui nous intéressent ici sont les outils comportant une interface, affichée par l'écran d'un ordinateur et qui, par une série... »

Scraping

2025-02-27T17:16:10Z

Lionel : /* Un scraping "low tech" */

== Qu'est-ce que c'est? ==
Le web scraping permet d'extraire des données du web, de manière plus ou moins automatisées. Concrètement cela permet de récupérer en temps réel des flux d'information, de télécharger automatiquement de grandes quantités de données (à partir de bibliothèques en ligne par exemple), de créer des robots qui "naviguent" sur le web à la recherche d'informations. Les techniques sont multiples et peuvent passer par des API, par des navigateurs automatisés ou, plus simplement par des requêtes http et des techniques d'analyse des pages html reccueillies (le "parsing").

== Références ==

=== Cory Arcangel, "Working on my novel" ===
[[Fichier:Working-on-my-novel-5.jpg|vignette|gauche]]

<br style="clear:both">

=== Michael Mandiberg, "Print Wikipedia" ===
[[Fichier:PrintWikipedia-ASU-overStacks1.jpg|vignette|gauche]]
<br style="clear:both">
https://en.wikipedia.org/wiki/Print_Wikipedia

=== Nicolas Maigret, "The Pirate Cinema" ===
[[Fichier:Pirate-cinema exhibition.jpg|vignette|gauche]]
<br style="clear:both">
https://disnovation.org/thepiratecinema/installation/

=== Jonathan Puckey, "Skycatcher Wallpaper" & "Zeitgeist" ===
https://jonathanpuckey.com/projects/skycatcher-wallpaper/
https://jonathanpuckey.com/projects/zeitgeist/

=== Michael Bielicky, Kamila B. Richter, Dirk Reinbold, "The Falling Time" ===
http://fallingtimes.net/

=== Julius Popp, Bit.Fall ===
https://vimeo.com/219497580

== Un scraping "low tech" ==

Deux exemples sont disponibles sur le gitlab du cours. Le premier scanne une page web à la recherche d'une suite de mot pour en générer des affiches, le deuxième récupère toutes les images d'une recherche donnée. Ils utilisent tous deux les mêmes librairies Python: beautifulsoup et requests.

[[Fichier:Screenshot from 2025-02-27 18-14-32.png]]

Voir ici: https://gitlab.com/erg-design-numerique/demos/scraping

Fichier:Screenshot from 2025-02-27 18-14-32.png

2025-02-27T17:15:49Z

Lionel :

Scraping

2025-02-27T17:12:55Z

Lionel : /* Un scraping "low tech" */

== Qu'est-ce que c'est? ==
Le web scraping permet d'extraire des données du web, de manière plus ou moins automatisées. Concrètement cela permet de récupérer en temps réel des flux d'information, de télécharger automatiquement de grandes quantités de données (à partir de bibliothèques en ligne par exemple), de créer des robots qui "naviguent" sur le web à la recherche d'informations. Les techniques sont multiples et peuvent passer par des API, par des navigateurs automatisés ou, plus simplement par des requêtes http et des techniques d'analyse des pages html reccueillies (le "parsing").

== Références ==

=== Cory Arcangel, "Working on my novel" ===
[[Fichier:Working-on-my-novel-5.jpg|vignette|gauche]]

<br style="clear:both">

=== Michael Mandiberg, "Print Wikipedia" ===
[[Fichier:PrintWikipedia-ASU-overStacks1.jpg|vignette|gauche]]
<br style="clear:both">
https://en.wikipedia.org/wiki/Print_Wikipedia

=== Nicolas Maigret, "The Pirate Cinema" ===
[[Fichier:Pirate-cinema exhibition.jpg|vignette|gauche]]
<br style="clear:both">
https://disnovation.org/thepiratecinema/installation/

=== Jonathan Puckey, "Skycatcher Wallpaper" & "Zeitgeist" ===
https://jonathanpuckey.com/projects/skycatcher-wallpaper/
https://jonathanpuckey.com/projects/zeitgeist/

=== Michael Bielicky, Kamila B. Richter, Dirk Reinbold, "The Falling Time" ===
http://fallingtimes.net/

=== Julius Popp, Bit.Fall ===
https://vimeo.com/219497580

== Un scraping "low tech" ==

Deux exemples sont disponibles sur le gitlab du cours. Le premier scanne une page web à la recherche d'une suite de mot pour en générer des affiches, le deuxième récupère toutes les images d'une recherche donnée. Ils utilisent tous deux les mêmes librairies Python: beautifulsoup et requests.

Voir ici: https://gitlab.com/erg-design-numerique/demos/scraping

Scraping

2025-02-27T17:09:52Z

Lionel : Page créée avec « == Qu'est-ce que c'est? == Le web scraping permet d'extraire des données du web, de manière plus ou moins automatisées. Concrètement cela permet de récupérer en tem... »

Fichier:Pirate-cinema exhibition.jpg

2025-02-27T17:05:48Z

Lionel :

Fichier:PrintWikipedia-ASU-overStacks1.jpg

2025-02-27T16:57:27Z

Lionel :

Fichier:Working-on-my-novel-5.jpg

2025-02-27T16:49:23Z

Lionel : cory arcangel: working on my novel

== Description ==
cory arcangel: working on my novel

MediaWiki:Common.css

2024-12-19T14:58:14Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

MediaWiki:Common.css

2024-12-19T14:58:00Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

body{
background-color:blue;
}

MediaWiki:Common.css

2024-12-19T14:57:19Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

#mw-navigation{
background-color:blue;
}

Fichier:Lowkey.jpg

2024-12-19T14:27:19Z

Lionel :

MediaWiki:Common.css

2024-11-07T18:29:00Z

Lionel :

/* Le CSS placé ici sera appliqué à tous les habillages. */

MediaWiki:Common.css

2024-11-07T18:28:25Z

Lionel : Page créée avec « /* Le CSS placé ici sera appliqué à tous les habillages. */ body{ background:red; } »

/* Le CSS placé ici sera appliqué à tous les habillages. */
body{
background:red;
}

DESIGN NUMERIQUE

2024-09-19T09:11:51Z

Lionel : /* Description générale du cours */

= Description générale du cours =

L’orientation Design numérique propose d’explorer les modes d'inscription, d'édition et de diffusion en milieu numérique.

Comment les outils et les technologies du numérique affectent-ils les publications (le fait de rendre public)? Quels types de relation et de procédures collectives impliquent ces modes d'inscription/production/diffusion? Quels espaces questionnent-ils et à qui s'adresse-t-ils et qui y a accès?

En quoi la curation/diffusion/génération de contenu sont-elles affectées et comment peut-on agir à la fois sur des questions esthétiques, politiques, jurudiques et sociales par nos modes d'appropriation de la technologie et des espaces d'inscription/diffusion.

Qu'il s'agisse d'un site internet, d'un livre réalisé en html-to-print, de broadcast radio, d'une bibliothèque pirate stockée sur un raspberry, ou d'une expérimentation avec une machine à imprimer, les outils façonnent nos pensées, nos écritures tant que leurs formes d'inscription et les politiques édioriales qui sont liées.

Considérant que les outils numériques rendent certaines pratiques possibles et d'autres non, que non seulement les objets produits mais aussi les relations de travail ou les conditions de diffusion sont conditionnés par ces outils, nous proposons d'ouvrir les possibilités d'usage du numérique en favorisant des alternatives aux logiciels de production graphique hégémoniques. En cela, l'orientation s'inspire des logiciels libres et de la Culture Libre de manière plus générale.

Le cours abore la micro-politique de l'élaboration et du partage des connaissances avec une perspective féministe intersectionnelle et des processus potentiellement radicaux, politiques et émancipateurs par lesquelles une publication est réalisée (rédigée, éditée, imprimée, reliée), diffusée (circulée, décrite, cataloguée) et lue, décrite, cataloguée).

Qu'est ce qui légitimise la connaissance? Le fait de rendre public et accessible des connaissances est-il suffisant pour faire parler des savoirs minoritaires? Quels savoirs collectifs est-il possible de convoquer, d'inscrire et de diffuser quand il se transmettent uniquement par la parole, les liens sociaux et la révolte?

Quelle(s) langue(s) pour quel(s) accè(s)? Quelle parole, quel language hégémonique vs oralité, dialecte, langue minoritaire, mode de transmission, sous-culture.

Coucoudesignnumerique

2024-09-12T14:59:06Z

Lionel : /* Le squelette HTML */

== Le protocole ==
* Passez par le poste de travail "Rédiger"
* consultez l'adresse du wiki https://designnumerique.be/wiki/Coucoudesignnumerique
* copiez/collez le "squelette" html de la page du wiki dans un éditeur de texte (attention! un éditeur de texte qui permet de traiter du texte "brut". Exemple: vscodium, vim, gedit, nano, notepad, notepad++, textedit en format "texte", brackets)
* Remplacez le contenu de la balise <code>body</code> avec ce que vous souhaiteriez partager pour vous présenter. Notez la présence des balises <code>a</code> pour faire un lien, <code>img</code> pour ajouter une image <code>h1</h1></code> pour faire un titre, <code>h2</code> pour faire un sous-titre, <code>h3</code> pour faire un sous-sous titre.
* Sauvegardez le fichier sur votre ordinateur sous le nom "index.html" dans un dossier portant votre nom, sans espace et sans majuscule.
* N'hésitez pas à ajouter du CSS dans la balise <code>style</code> si vous le désirez.
* Ajoutez le dossier sur une clé usb prévue.

== Le squelette HTML ==
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>le titre de la page</title>
<style></style>
</head>
<body>
<img src="adressedelimage">
<h2>un titre</h2>
<p>un paragraphe</p>
<p>un autre paragraphe</p>

</body>
</html>
</syntaxhighlight>