Utilisateur:Mondher : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎--)
(→‎comment ?)
Ligne 90 : Ligne 90 :
 
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.
 
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>
 
<br>
−
<nowiki><!DOCTYPE html>
+
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>
 
<html>
 
     <head>
 
     <head>
Ligne 178 : Ligne 184 :
 
     </body>
 
     </body>
 
</html>
 
</html>
−
</nowiki>
 
 
<br>
 
<br>
−
J'aimerais par la suite créer plus de niveaux et incorporer d'autres types de contenus (images, vidéos, sons, documents..)
+
<br>
−
J'aimerais également développer les aspects visuels et les comportements des éléments.
+
CSS :
 +
<br>
 +
<br>
 +
html, body {
 +
    height: 100%;
 +
    width: 100%;
 +
    margin: none;
 +
    padding: none;
 +
    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>
 +
JavaScript :
 +
<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);
 +
    });
 +
 
 +
};

Version du 22 janvier 2021 à 12:47

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.

  • graph radial

  • graph hiérarchique

après quelques expérimentations

  • graph abstrait 1

  • graph abstrait 2

  • graph abstrait 3

  • graph lemonde/ et julie/

  • graph abstrait 4

  • Carto-abstrait.png
  • Ca2.png
  • Ca3.png
  • Ca4.png
  • Ca5.png
  • Ca6.png
  • Ca7.png
  • Ca8.png
  • Ca9.png
  • Ca10.jpg

et finalement

  • Carto-x-1.jpg
  • Carto-x-2.jpg
  • Carto-x-3.jpg
  • Carto-x-4.jpg
  • Carto-x-5.jpg
  • Carto-x-6.jpg
  • Carto-x-7.jpg
  • Carto-x-8.jpg
  • Carto-x-9.jpg
  • Carto-x-10.jpg
  • Carto-x-11.jpg
  • Carto-x-12.jpg
  • Carto-x-13.jpg
  • Carto-x-14.jpg
  • Carto-x-15.jpg
  • Carto-x-16.jpg
  • Carto-x-17.jpg
  • Carto-x-18.jpg
  • Carto-x-19.jpg
  • Carto-x-20.jpg
  • Carto-x-21.jpg
  • Carto-x-22.jpg
  • Carto-x-23.jpg
  • Carto-x-24.jpg
  • Carto-x-25.jpg

--


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.

  • Mndr Xx schema.png

schéma de construction des pages et des déplacements

comment ?

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. 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.

HTML :
<!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>

<a href="niveaux/niveau2/niveau2.html">quoi maintenant ?</a>

<a href="niveaux/niveau2/niveau2.html">quand maintenant ?</a>

<a href="niveaux/niveau2/niveau2.html">qui maintenant ?</a>

<a href="niveaux/niveau2/niveau2.html">où maintenant ?</a>

<a href="niveaux/niveau2/niveau2.html">aller de l'avant, appeler ça aller, appeler ça de l'avant</a>

<a href="niveaux/niveau2/niveau2.html">longuement, brièvement, c'est égal</a>

<a href="niveaux/niveau2/niveau2.html">quelle liberté</a>

<a href="niveaux/niveau2/niveau2.html">quelle heure est-il ?</a>

<a href="niveaux/niveau2/niveau2.html">quelle heure est-il ?</a>

<a href="niveaux/niveau2/niveau2.html">quoi manger ?</a>

<a href="niveaux/niveau2/niveau2.html">penser, c'est imaginer de manière raisonnée ?</a>

<a href="niveaux/niveau2/niveau2.html">fixer un point, se concentrer, ne pas se projetter</a>

<a href="niveaux/niveau2/niveau2.html">définir les choses, les nommer, les classer, les ranger</a>

<a href="niveaux/niveau2/niveau2.html">comment penser sans projetter ? comment projetter sans penser ?</a>

<a href="niveaux/niveau2/niveau2.html">quelles pensées adopter ? quelle posture s'imposer ?</a>

<a href="niveaux/niveau2/niveau2.html">ne sachant pas parler, ne voulant pas parler, j'ai à parler</a>

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

<a href="niveaux/niveau2/niveau2.html">quels trucs que ces histoires de clarté et d'obscurité</a>

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

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

<a href="niveaux/niveau2/niveau2.html">pourquoi aurais-je un sexe, moi qui n'ai plus de nez ?</a>

<a href="niveaux/niveau3/niveau3.html">suis-je vêtu ?</a>

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

<a href="niveaux/niveau4/niveau4.html">quoi suis-je ?</a>

   </body>

</html>

CSS :

html, body { 

   height: 100%;
   width: 100%;
   margin: none;
   padding: none;
   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

}

JavaScript :
$(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);
   });

};

Récupérée de « https://designnumerique.be/w/index.php?title=Utilisateur:Mondher&oldid=2899 »