|
|
| Ligne 85 : |
Ligne 85 : |
| | <br> | | <br> |
| | CSS : | | CSS : |
| − | Dimensions et couleur de fond des pages. Position, typographie, taille de la typographie, désactivation de l'aspect hyperlien, transparence de la typographie pour utiliser seulement son ombre de manière floue afin de symboliser les pensées. Lorsque le curseur rencontre une phrase, celle-ci se précise. Autrement, les phrases sont floues. | + | Dimensions et couleur de fond des pages. |
| − | <br>
| |
| − | JavaScript :
| |
| − | Un script js permet de placer les phrases "aléatoirement" dans l'espace de la fenêtre au moment de l'ouverture de la page, puis de les déplacer, "aléatoirement" aussi.
| |
| − | <br>
| |
| − | J'aimerais par la suite créer plus de niveaux et incorporer d'autres types de contenus (images, vidéos, sons, documents..)
| |
| − | J'aimerais également développer les aspects visuels et les comportements des éléments.
| |
| − | <br>
| |
| − | <br>
| |
| − | HTML :
| |
| − | <br>
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Niveau 1</title>
| |
| − | <meta charset="utf-8">
| |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
| |
| − | <script src="scriptalt3.js"></script>
| |
| − | <link href="style.css" rel="stylesheet" />
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class='d1'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quoi maintenant ?</a></p>
| |
| − | </div>
| |
| − | <div class='d2'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quand maintenant ?</a></p>
| |
| − | </div>
| |
| − | <div class='d3'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">qui maintenant ?</a></p>
| |
| − | </div>
| |
| − | <div class='d4'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">où maintenant ?</a></p>
| |
| − | </div>
| |
| − | <div class='d5'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">aller de l'avant, appeler ça aller, appeler ça de l'avant</a></p>
| |
| − | </div>
| |
| − | <div class='d6'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">longuement, brièvement, c'est égal</a></p>
| |
| − | </div>
| |
| − | <div class='d7'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quelle liberté</a></p>
| |
| − | </div>
| |
| − | <div class='d8'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quelle heure est-il ?</a></p>
| |
| − | </div>
| |
| − | <div class='d9'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quelle heure est-il ?</a></p>
| |
| − | </div>
| |
| − | <div class='d10'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quoi manger ?</a></p>
| |
| − | </div>
| |
| − | <div class='d11'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">penser, c'est imaginer de manière raisonnée ?</a></p>
| |
| − | </div>
| |
| − | <div class='d12'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">fixer un point, se concentrer, ne pas se projetter</a></p>
| |
| − | </div>
| |
| − | <div class='d13'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">définir les choses, les nommer, les classer, les ranger</a></p>
| |
| − | </div>
| |
| − | <div class='d14'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">comment penser sans projetter ? comment projetter sans penser ?</a></p>
| |
| − | </div>
| |
| − | <div class='d15'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quelles pensées adopter ? quelle posture s'imposer ?</a></p>
| |
| − | </div>
| |
| − | <div class='d16'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">ne sachant pas parler, ne voulant pas parler, j'ai à parler</a></p>
| |
| − | </div>
| |
| − | <div class='d17'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">et voilà que je glisse déjà, avant d'être à la dernière extremité, vers les secours de la fable</a></p>
| |
| − | </div>
| |
| − | <div class='d18'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">quels trucs que ces histoires de clarté et d'obscurité</a></p>
| |
| − | </div>
| |
| − | <div class='d19'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">est-ce que je roule, ou suis-je en équilibre quelque part, sur un de mes innombrables pôles ?</a></p>
| |
| − | </div>
| |
| − | <div class='d20'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">je ne sens rien, je ne sais rien et pour ce qui est de penser, je le fais juste assez pour ne pas me taire, on ne peut pas appeler ça penser...</a></p>
| |
| − | </div>
| |
| − | <div class='d21'>
| |
| − | <p><a href="niveaux/niveau2/niveau2.html">pourquoi aurais-je un sexe, moi qui n'ai plus de nez ?</a></p>
| |
| − | </div>
| |
| − | <div class='d22'>
| |
| − | <p><a href="niveaux/niveau3/niveau3.html">suis-je vêtu ?</a></p>
| |
| − | </div>
| |
| − | <div class='d23'>
| |
| − | <p><a href="niveaux/niveau3/niveau3.html">il n'y a plus que moi ici, personne ne tourne autour de moi, personne ne vient vers moi</a></p>
| |
| − | </div>
| |
| − | <div class='d24'>
| |
| − | <p><a href="niveaux/niveau4/niveau4.html">quoi suis-je ?</a></p>
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |
| − | <br>
| |
| − | <br>
| |
| − | CSS :
| |
| − | <br>
| |
| | <br> | | <br> |
| | html, body { | | html, body { |
| Ligne 195 : |
Ligne 93 : |
| | padding: none; | | padding: none; |
| | background-color: black; | | background-color: black; |
| − | }
| |
| − |
| |
| − | * {
| |
| − | cursor: none;
| |
| − | }
| |
| − |
| |
| − | div.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14, .d15, .d16, .d17, .d18, .d19, .d20, .d21, .d22, .d23, .d24 {
| |
| − | position:fixed;
| |
| − | font-size: 20px;
| |
| − | text-decoration: none;
| |
| − | font-family: Arial, Helvetica, sans-serif;
| |
| − | cursor: none;
| |
| − | color: transparent;
| |
| − | text-shadow: 0px 0px 5px #ffffff;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | text-decoration: none;
| |
| − | color: transparent;
| |
| − | }
| |
| − |
| |
| − | a:visited {
| |
| − | text-decoration: none; color: transparent;
| |
| − | }
| |
| − |
| |
| − | a:hover {
| |
| − | color: none;
| |
| − | text-decoration:none;
| |
| − | cursor:crosshair;
| |
| − | text-shadow: 0px 0px 3px #ffffff
| |
| | } | | } |
| | <br> | | <br> |
| | + | Position, typographie, taille de la typographie, désactivation de l'aspect hyperlien, transparence de la typographie pour utiliser seulement son ombre de manière floue afin de symboliser les pensées. Lorsque le curseur rencontre une phrase, celle-ci se précise. Autrement, les phrases sont floues. |
| | <br> | | <br> |
| | JavaScript : | | JavaScript : |
| | + | Un script js permet de placer les phrases "aléatoirement" dans l'espace de la fenêtre au moment de l'ouverture de la page, puis de les déplacer, "aléatoirement" aussi. |
| | + | <br> |
| | + | J'aimerais par la suite créer plus de niveaux et incorporer d'autres types de contenus (images, vidéos, sons, documents..) |
| | + | J'aimerais également développer les aspects visuels et les comportements des éléments. |
| | + | <br> |
| | <br> | | <br> |
| − | $(document).ready(function () {
| |
| − | moveDiv('.d1');
| |
| − | moveDiv('.d2');
| |
| − | moveDiv('.d3');
| |
| − | moveDiv('.d4');
| |
| − | moveDiv('.d5');
| |
| − | moveDiv('.d6');
| |
| − | moveDiv('.d7');
| |
| − | moveDiv('.d8');
| |
| − | moveDiv('.d9');
| |
| − | moveDiv('.d10');
| |
| − | moveDiv('.d11');
| |
| − | moveDiv('.d12');
| |
| − | moveDiv('.d13');
| |
| − | moveDiv('.d14');
| |
| − | moveDiv('.d15');
| |
| − | moveDiv('.d16');
| |
| − | moveDiv('.d17');
| |
| − | moveDiv('.d18');
| |
| − | moveDiv('.d19');
| |
| − | moveDiv('.d20');
| |
| − | moveDiv('.d21');
| |
| − | moveDiv('.d22');
| |
| − | moveDiv('.d23');
| |
| − | moveDiv('.d24');
| |
| − | animateDiv('.d1');
| |
| − | animateDiv('.d2');
| |
| − | animateDiv('.d3');
| |
| − | animateDiv('.d4');
| |
| − | animateDiv('.d5');
| |
| − | animateDiv('.d6');
| |
| − | animateDiv('.d7');
| |
| − | animateDiv('.d8');
| |
| − | animateDiv('.d9');
| |
| − | animateDiv('.d10');
| |
| − | animateDiv('.d11');
| |
| − | animateDiv('.d12');
| |
| − | animateDiv('.d13');
| |
| − | animateDiv('.d14');
| |
| − | animateDiv('.d15');
| |
| − | animateDiv('.d16');
| |
| − | animateDiv('.d17');
| |
| − | animateDiv('.d18');
| |
| − | animateDiv('.d19');
| |
| − | animateDiv('.d20');
| |
| − | animateDiv('.d21');
| |
| − | animateDiv('.d22');
| |
| − | animateDiv('.d23');
| |
| − | animateDiv('.d24');
| |
| − | });
| |
| − |
| |
| − | function moveDiv(myclass) {
| |
| − | var newq = makeNewPosition();
| |
| − | $(myclass).css({ top: newq[1], left: newq[0] });
| |
| − | }
| |
| − |
| |
| − | function makeNewPosition(){
| |
| − |
| |
| − | var h = $(window).height() - 50;
| |
| − | var w = $(window).width() - 50;
| |
| − |
| |
| − | var nh = Math.floor(Math.random() * h);
| |
| − | var nw = Math.floor(Math.random() * w);
| |
| − |
| |
| − | return [nh,nw];
| |
| − | }
| |
| − |
| |
| − | function animateDiv(myclass){
| |
| − | var newq = makeNewPosition();
| |
| − | $(myclass).animate({ top: newq[1], left: newq[0] }, 25000, function(){
| |
| − | animateDiv(myclass);
| |
| − | });
| |
| − |
| |
| − | };
| |
9 octobre / workshop : un réseau
1ère étape : mise en place du réseau
2ème étape : investir le réseau et les lieux qu'il contient, utiliser les avatars, déposer ça et là des fichiers, créer des liens
3ème étape : cartographier le réseau en fonction de ce qui interpelle, relever des activités, comportements ou informations. pour cette étape, je me suis intéressé à la représentation statistique ; quantité de fichiers déposés et créés, formats représentés, temporalité, ce que j'ai fait à l'aide d'un outil infographique online (piktochart) ; mais il fallait trouver des outils plus pertinents. suite à une discussion avec un ami géographe-urbaniste, j'ai découvert tulip-perspective, un software de cartographie-statistique. avec ce software, je me suis concentré sur des représentations quantitatives et sur la nature des fichiers. plusieurs graphiques ont été générés, deux on été retenus.
après quelques expérimentations
et finalement
--
quoi ?
Un site composé de plusieurs pages organisées par "niveaux". La page d'accueil est le niveau 1. Sur chaque page il y a des phrases en mouvement. Ces phrases représentent des pensées, des sensations, des idées. Les pensées vont et viennent, sortent par moments de la page. Pour se balader entre les pages, il faut cliquer sur les phrases.
Cette idée vient d'une lecture récente pour l'examen du cours de littérature : L'Innommable de Samuel Beckett. Ce livre présente un narrateur dont la forme reste abstraite, et dont on ne peut cerner la nature. La seule caractéristique qu'il partage avec un être humain est une forme de conscience, remplie de pensées tantôt éparses, tantôt absurdes, tantôt insensées. Il ne sait pas ce qu'il est, si il est.
schéma de construction des pages et des déplacements
Pour chaque niveau il y a un fichier HTML, un fichier CSS et un fichier JavaScript.
Les fichiers HTML contiennent une vingtaine de phrases, chacune contenue dans un paragraphe, lui-même contenu dans un div. Elles sont écrites à l'intérieur d'une balise a, ce qui en fait des liens cliquables.
CSS :
Dimensions et couleur de fond des pages.
html, body {
height: 100%;
width: 100%;
margin: none;
padding: none;
background-color: black;
}
Position, typographie, taille de la typographie, désactivation de l'aspect hyperlien, transparence de la typographie pour utiliser seulement son ombre de manière floue afin de symboliser les pensées. Lorsque le curseur rencontre une phrase, celle-ci se précise. Autrement, les phrases sont floues.
JavaScript :
Un script js permet de placer les phrases "aléatoirement" dans l'espace de la fenêtre au moment de l'ouverture de la page, puis de les déplacer, "aléatoirement" aussi.
J'aimerais par la suite créer plus de niveaux et incorporer d'autres types de contenus (images, vidéos, sons, documents..)
J'aimerais également développer les aspects visuels et les comportements des éléments.
