Voir la source de Outils d'écriture

== 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]]