Version actuelle datée du 2 janvier 2023 à 18:06

Présentation

Travaux disponibles sur le site.

Contrainte

Le terme contrainte peut être interprété par l'action d'obliger ou forcer quelqu'un à agir contre sa volonté. On peut la définir comme une obligation créée par les règles en usage dans un milieu. En ce sens, la contrainte peut être physique ou psychologique et être appliquée dans des environnements variés.

Dans le cadre de ces recherches, l'environnement choisi est celui de l'interface, c'est-à-dire une zone de partage et réciprocité entre deux milieux. Celle-ci permet un système d'échanges ou l'information se transforme en influx nerveux. Sur une page web, les informations transmises par l'écran sont tout d'abord captées grâce à l’œil et traitées par le cerveau. Afin de contraindre cette interaction, il est possible d’altérer l'image produite, tant dans son traitement que son organisation.

Premiers essais

Modification de la couleur

Détourner l'attention de l'utilisateur.rice

Apparition d'alertes toutes les 3 secondes

Définir les contraintes

Après ces premiers tests, je pense qu'il est nécessaire de définir des contraintes plus précises

Contraintes

Faire apparaitre les mots au passage de la souris.
Changer la couleur du texte très rapidement.
Flouter le texte en donnant la possibilité à l'utilisateur.ice de le rendre net.
Réduire l'ergonomie en insérant le texte dans plusieurs colonnes.
Changer aléatoirement la typographie de certains mots.

Final

Application des différents effets afin de contraindre la lecture d'un article de Ken Knowlton.

Code

Html

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>DESIGN NUMERIQUE</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>

</head>
  <body>
    <h1>ON THE FRUSTRATIONS OF COLLABORATING WITH ARTISTS</h1>
    <h2>Ken Knowlton, "former programmer"<br>[Invited contribution to Carl Machover's column <br>"Computer Graphics Pioneers," (SIGGRAPH) Computer <br>Graphics 35, No. 3 August 2001, pp. 20-22]  </h2>
    <div class="intro" id="hover">
      <p>As a sociologist-on-training-wheels in belated adolescence, I wrote an overview of art-and-technology. I explained in laypersons' terms that computer art would come from artists, or from artists working with programmers, not from programmers working alone, because both groups are creative, imaginative, intelligent, energetic, industrious, competitive and driven. But programmers, in my [vast world-embracing] experience, tend to be painstaking, logical, inhibited, cautious, restrained, defensive, methodical, and ritualistic. Their exterior actions are separated from their emotions by enough layers of logical defenses that they can always say "why" they did something. Artists, on the other hand, seem to be freer, alogical, intuitive, impulsive, implicit, perceptive, sensitive, and vulnerable. They often do things without being able to say why they do them, and one usually is polite enough not to ask.</p>
      <p>Though widely quoted, this blast of adjectives I now see as somewhat of a pothole in my life-long trail of paper. I later turned it into a crater, compounding my presumptuousness by flailing at the pretensions of "computer art" as a whole, because :</p>
      <p>(1) A work of Art must answer some of these questions: for what technical or emotional problem is it a demonstration or search? ... of what dialog is it a continuation? what does it state, demonstrate or ask? from what personal attitude or social culture does it come? by what syntax am I to parse it, by what semantics does it have meaning?</p>
      <p>(2) Every traditional medium makes possible an occasional expression of, for example, anxiety, remorse, tenderness, or nostalgia. In contrast to this, the most evocative quality of computer art to date [1986] seems, to me, to be antiseptic otherworldliness.</p>
      <p>(3) Any given graphics system has a rather strong flavor of what's permitted or excluded, and what's easy and what's hard. ... many systems could be adapted to a specific person or to a particular artistic intent, ... [however] a tool that is potentially very flexible is usually used in terribly unimaginative ways.</p>
      <p>(4) An artistic statement is not easily produced by committee. It is hard enough for a right brain to express itself through its left neighbor — much harder through someone else's. Furthermore, the production of art involves simultaneous command of the process — of all types and on all levels — that are involved, including a full intellectual and intuitive grasp of alternatives. The worth or excellence of a work of art comes largely from the vastness of the realm of possibilities that are (even unconsciously) discarded in the process of choosing a sequence or combination or method that is special. </p>
      <p>We are not yet beyond the gee-whiz state of cuteness, of stunts, and of novelty for its own sake.</p>
    </div>
    <div class="chapitre">
      <pre class="no-space">

                         .........
                      .'------.' |
                     | .-----. | |
                     | |     | | |
                   __| |     | | |;. _______________
                  /  |*`-----'.|.' `;              //
                 /   `---------' .;'              //
           /|   /  .''''////////;'               //
          |=|  .../ ######### /;/               //|
          |/  /  / ######### //                //||
             /   `-----------'                // ||
            /________________________________//| ||
            `--------------------------------' | ||
             : | ||      | || |__LL__|| ||     | ||
             : | ||      | ||         | ||     `""'
             n | ||      `""'         | ||
             M | ||                   | ||
               | ||                   | ||
               `""'                   `""'
         </pre>
    </div>
    <div class="second" id="second">
      <p>Recklessly broad generalizations, indeed. There were, nevertheless, a few sketchy truths there. I speak now from this historical perspective: I have been a member of the art-and technology organizations EAT, YLEM, and ASCI, all organizations for which the goal seems to be collaboration per se, maybe also "new" mediums, as on-beyond-fluorescent might be to painting.</p>
      <p>Also, at Bell Labs in the 1960s and 1970s I collaborated with a sequence of five artists: Leon Harmon, Stan VanDerBeek, Lillian Schwartz, Laurie Spiegel, and Emmanuel Ghent. As so often happens with electron microscopist physicists, I was (or saw myself) in each case as the "engineer" of the pair. To avoid insulting the dead or overly provoking the living, I'll retreat to statistics and generalizations in recalling these episodes.</p>
      <p>I do have fond memories, and a few others, of all five collaborators. Of the five, two were musicians, two were artists, one was a scientist (who became artist by flip of the coin so we could enter art-and-technology-collaboration shows). ![Stan VanDerBeek](http://www.kenknowlton.com/graphics/colab2SV.jpg)Three were arguably programmers at the outset (!) and one, impatient and protesting, became (also arguably) a programmer. One was so highly-charged mentally that it took me a day each time to recover from half a day of working together — I was constantly bombarded by proposals about what we could do if we only had ten times more time, money, equipment and patience.</p>
      <p>We did stuff and made stuff. As far as I was concerned, we were not making History — at that period of my life, I might have become immobilized by such a heady prospect. But it did turn out to be "history" in a number of ways. Inter alia, Billy Kluver says that one of those collaborations resulted in a nude being published, for the very first time, in the [New York Times](http://www.knowltonmosaics.com/xlink-alphabets.htm).</p>
      <p>In all cases, the work was a lot of fun, and I found myself involved in things that I never would have come upon by myself. The resulting art? Movies and stills, much of it looking like today's ho-hum screensavers, but many awards. Two of my collaborators were overwhelmingly impressed by the cultural significance of what we were doing. Another, on the other hand, was so unpromoting of self image that only three of our dozen or so films survive. One of my collaborators went on alone, to make pictures more compelling, I think, than my own. Three and a half generously credited me as co-author of our joint works. The later behavior of the other one and a half bordered on plagiarism and theft of intellectual property. One "collaboration" did not in fact produce any joint works, yet the innumerable hours of comparing programs and ideas had lasting and meaningful effects on both of us. </p>
      <p>It was, clearly, a varied set of experiences — perhaps a fair sample of what one ought to expect from collaborations — I simply don't know. Three of these people I would gladly work with again, on a project or two, not because of the importance of our results but because I just enjoyed working with them. As for myself: I ended up knowing more, and less, about art. I emerged with broader view, permission, and skepticism.</p>
      <p>During that period, I was developing experimental programming languages and methods — terms loosely defined, in those golden days of Bell Labs, and thus "artistic applications" was a plausible use of part of my time. I did not have to defend that interpretation in detail to my superiors, which was fortunate because I'm not sure that any of us really knew what we were doing, or why. As Yogi Berra (is reported to have) said: If you don't know where you're going, you'll surely end up somewhere else. Yes, indeed, for better or worse. Anyway, from these experiences, I think the issues and caveats cited in my intro above have turned out to be more or less valid, for reasons that I would now say come from the nature of art and the nature of people.</p>
    </div>
    <div class="chapitre">
      <pre class="no-space">
        _____                    _____                _____
       |\    \                  |\    \              |\    \
       | \ ...\                 | \____\           __|_\____\
   ____| :\    \__     _________| |    |___      _|\    \   |
  |\    \: \____\ \   |\    :    \|    |   \    |\| \____\  |
  | \____* |    |__\  | \ ...:____*....|____\   | * |    |..|
  | |    :\|    |  |  | :\    \   :    :    |   | ::|    |  |
   \|    : *____|  |   \: \____\  :    :    |    \: |....|  |
    *____:____:____|    \ |    |__:____:____|     \ |    |__|
                         \|    |                   \|    |
                          *____|                    *____|
         </pre>⠀⠀
    </div>
    <article>
      <p class="blur">A work of Art is a kind of puzzle: multilevel, indirect, suggestive. It often looks backward, as a statement of celebration or lament, or forward, as an expression of hope or fear. It deals with things that people emotionally care about. This mysterious object comes from an artist's desire, for whatever reasons, to make such a statement.</p>
      <p class="blur">People are also mysterious. They are presumed to be motivated to avoid pain, hunger and danger, and variously to seek fame, money, entertainment, sex, power, excitement, possessions, legacy — sometimes one or more of these being a means to achieve others. But what really motivates a particular person is largely unstated and unknowable.</p>
    </article>
    <div class="chapitre"><br>
      <pre class="no-space">
      |\                     ___
      | )                   /   '-.
   ||.+ L                  (__     \
   || '-.\              ___)a \__   \
   ||    `-.           /.__      J__//--.
   |J       `-.            |_       '-._ \        _.------.
   | L        `            L__.     _/`----.____ /  b a (__c>
  |J \      __,-_____      __._>\__/            ( c      " h\
  L L \   ./--+///___)_.--'      /\     -.       \ d e f g  /
 J  J  |       \\__//                     `--(_.( `--.....-'
 |   \ J           )_     _,- \__           \    `--'
 L    | L       `    )-)_/      \_._..--''-..)
J     | |        \                [_._._,.. _]
|     | |      ,,'              _/           (
__   | _   | J    ,' \  _________   /    \  \     |  _______a:f____
|     J_.L_.'    \            /     _\_/\    (
L          |      \          /    _|    /    \_
F           J       J        (      (_   L      `-.
/             L       \        \__.    `.  \__      \
/              J        ^          \      )   \____   \
/                L            .---.-)_   _/         )   \
/_                |           (    `-' \__/.         L__\_\
             |            `-.__.--.___) ---   / (_/  J
             |_                              (     .-' ---
                                              `---'
         </pre>
    </div>
    <div class="fourth">
      <div class="gauche">
      <p>Thus, for two (inscrutable) people to work together to produce (mysterious) Art is therefore a serious challenge. I do not deny that it can happen, particularly in circumstances where :  </p>
      <p>(1) One is in charge, hiring the other to exercise his/her expertise at performing an understood function, for example my hiring an ornamental plasterer to execute an ornate ceiling for which I have specified the complete 3-D surface geometry.</p>
      <p>(2) People as peers truly understand and appreciate each other's motives and areas of excellence, and agree on a goal or at least a direction — a plausible example being, say, Jeff and Colette Bangert, husband-and-wife programmer-and-artist team who have worked together for decades.</p>
      <p>For me this raises a question about groups like YLEM (San Francisco Bay) or ASCI (New York City). There was a time when I might say "I'm game. I don't know what art is but I want to help make some; spin your Rolodex and find me an artist." And there are and were artists who must have said to themselves exactly the converse. I really don't think that I have a real argument with ASCI or YLEM here: they must already know that the batting average is going to be low: enduring relationships among people thus bumped together are unlikely.</p>
      </div>
      <div class="droite">
      <p>What happens, of course, is that such pairs experiment, and they make new, dazzling, noisy, outlandish, or obnoxious things, which is not difficult with modern hardware and software. I'm a steamfitter and you're a musician? Good, I'll make and drive a road-running calliope like no other, and you play it as I drive us down the nave during the final movement of Bach's St. Matthew Passion. We'll be as noticed as cannons in the 1812 Overture — we, not Bach, will capture the eyeballs and ears! But sooner or later I learn something about music, or you become less of an in-your-face eccentric, and we lose interest in both vehicle and partnership. Perhaps we both learn that the best works of art tell stories and provoke questions, not about technology by which they were made, but about the way we think and feel about life. Perhaps, a hundred years from now — if there are still computers, and people with time and spirit for merriment — there may be a Spike Jones or a P.D.Q. Bach of computer art: technological art spoofing its own methods. But that's a long shot, in all respects.</p>
      <p>Anyway, good things do happen in and from these organizations. The artists begin to learn about computers and other technology, and in the best cases they become their own programmers, getting the whole creative process into one head, with just one coherent set of cultural values and personal attitudes driving it. This is not a super-high expectation (architects and product designers are good role models here). It simply means that the artist becomes more logical, organized, and aware of engineering details. The payoff is a mastery of the tools and the ability personally to build and modify tools, project by project.</p>
      <p>For the high-tech folk, the payoff is learning to be freer and more expressive. In the best cases they become more complete humans, in part from understanding that all behavior comes not from logic but, at the bottommost level, from intrinsically indefensible emotions, values and drives. Some ultimately become "artists," though the need for such classification fades.</p>
      <p>During a collaboration, however, the going can become quite rough: the unspoken motivations and uncertain goals so easily lead to a what-are-we-doing? and who's-driving? clash (spoken or not). Eventually there is likely to come a realization that the collaborators really do have a profound disagreement about motivation, purpose, and goal.</p>
      <p>An art-technology collaboration, presumably of peers, should be thought of as an early stage — a training period. The things that participants learn to do can be exhilarating, puzzling, enjoyable, and good background for future work. My advice is to consider it like discovering something new about sex: realize that it's personal fun, best not done publicly unless and until you really believe that the display has redeeming social value.</p>
      </div>
    </div>
    <div class="chapitre">
    </div>
    <div class="last" id="changesize">
      <p>(So, what about my own art these days, you might ask. This artist keeps a low profile, works alone, and would probably reject an invitation to collaborate if one arose from any direction. None do. He usually lets the art speak for itself, seldom describing it. When he does, he modestly relays comments from viewers who almost uniformly say "Wow!" in response to his mosaic portraits that have a hundred appearances from different viewing positions, lighting conditions, viewers' expectations and experiences. Why do you see a portrait at all, they say, especially such a good one, in a panel of dominoes or seashells? You can get just a hint of this wonderment by seeing it yourself. The artist, if pressed, will admit that his work may indeed be the fourth-best "interactive" technology-assisted art yet to arise, surpassed only by the isolation tank, the anechoic chamber, and the plane broadband reflective surface — each of which, ever so delicately, gives to you an exquisitely appropriate response to what you give to it.)</p>
      <p>Postscript about technological art: I have recently visited the Whitney's current show "Bitstreams" — a collaboration only in the sense that the artists unwittingly conspired in art-iconoclasm. The textual commentary supports some of my earlier comments: it squirmed with words like unreal, irreal, surreal. Actually, the artwork was meaningful to me, but as high sarcasm. Deplorably, the medium WAS the message — of alienation, of a future out of control, with machines and people trying to exchange their uncertain souls. We seem compelled to do new things, and old things in new ways, not because we should but simply because we can. Technology, born to ease the mechanics of life and free us for higher things, is insinuating itself into and polluting those very realms, while not simplifying the mechanics of living in the slightest. I might give the collection credit if I infer a caustic cynicism about technology and especially about technology in art. But that's as wrong-headed as thinking that Jack Benny was really demonstrating the violin to be a bad instrument. Perhaps the curator was trying to show how bad the "best" of it is? At any rate, if that's the future of art, of technology and/or the combination, then the best and brightest of us are showing no attempt to carry forward anything of value from the past, no cherishing, no preserving of either nature or culture, no gift to future generations other than confusion and impoverishment.</p>
    </div>
  </body>
</html>

CSS

body{
  font-family: sligoilmicro;
  background-color: white;
  transition: 0.5s all;
}

h1{
  text-align: center;
  font-size: 2rem;
}

h2{
  text-align: center;
  font-size: 1rem;
}

p{
  font-size: 18px;
}

.chapitre{
  margin-left: 25%;
  margin-right: auto;
  line-height: 18px;
  font-family: arial;
  font-size: 18px;
  margin-bottom: 15rem;
  margin-top: 15rem;
  letter-spacing: 0px;
}

.intro{
  color: white;
  margin-top: 8rem;
  text-align: justify;
}

.second{
  color:red;
  margin-bottom: 20rem
  width: 70vw;
  padding-left: 15vw;
  padding-right: 15vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

article{
  color:black;
  font-size: 36px;
  display: block;
  resize: vertical;
  overflow: hidden;
}

.blur{
  font-size: 36px;
}

.fourth{
  color:black;
}

.last{
  color: black;
  line-height: 10px;
}

.gauche {
  position: absolute;
  float: left;
  width: 48%;
  height: 400px;
  overflow:scroll;
  overflow-x: hidden;
  margin-bottom: 15rem;
}


.droite {
  float: right;
  padding-left: 50%;
  height: 400px;
  overflow: scroll;
  overflow-x: hidden;
  margin-bottom: 15rem;
}

JS

//INTRO
var $conteneur = document.getElementById('hover');

var textBalise = $conteneur.textContent.replace(/\b(\w+)\b/g, "<span>$1</span>");

$conteneur.innerHTML = textBalise;

var $spans = $conteneur.querySelectorAll('span');

for(var $span of $spans){
    console.log($span);
    console.log(this);
    /*
    span.addEventListener('mouseover', function(){
        //console.log(this);
        //console.log(span);
        this.style.color = "black";
    });*/
    $span.addEventListener('mouseover', (e) => {
        console.log(e);
        console.log(e.target);
        e.target.style.color = "black";
    });
}


//SOCOND

function changeColor(){
    $body.style.color = ($body.style.color == "black")?"white":"black";
}

var $body = document.getElementById('second');
$body.style.color = "black";

window.setInterval(changeColor, 20);



//THIRD

const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;

const article = document.querySelector('article')
const initHeight = article.offsetHeight

let ratio = article.offsetHeightHeight / initHeight

const resizeObserver = new ResizeObserver((e) => {

    console.log(initHeight, article.offsetHeight)
    ratio = article.offsetHeight / initHeight

    document.querySelectorAll('.blur').forEach((p) => {

        // continue
        p.style.filter = `blur(${map(ratio, 0, 1, 0, 5)}px)`

        // discret
        // p.style.filter = `blur(${ratio < .1 ? 0 : 10}px)`
    })
})

resizeObserver.observe(article)

//fourth

var wordsHover = document.getElementById('changesize');
//mots
var textBalise = wordsHover.textContent.replace(/\b(\w+)\b/g, "<span>$1</span>");
//lettres
wordsHover.innerHTML= textBalise;
console.log(textBalise)


//attribue un id à chaque span
var tagId = wordsHover.querySelectorAll('span')
//console.log(tagId);
tagId.forEach((span, index) => {  //utilisation de NodeList.forEach
  span.setAttribute('id', `${index}`);
//span.setAttribute('class', `${index}`);
});


//donne le nombre de spans
var long = tagId.length
console.log(long);


//créait une list de valeurs comprise en 0 et le nb de spans
const array = Array.from({length: long/3}, () => Math.floor(Math.random() * long));
console.log(array);
console.log(array[0]);

for(var value of array){
  var rdmSelect = document.getElementById(value)
  console.log(rdmSelect)
  rdmSelect.style.fontFamily = "arial";
  rdmSelect.style.fontSize = "50px";
}

La brique

La brique est un projet de publication web to print visant à mettre en relation et mettre en page un flux de données dans un objet imprimé.

Choix des données

Bien que mes premiers essais aient été réalisés à partir d'un flux provenant de Skyblog, j'ai décidé d'orienter mes recherches vers un medium permettant une expression artistique personnelle ou collective qui explore les possibilités graphiques des caractères Unicode. Cette pratique connue sous le nom d'ASCII Art est apparue en 1966, notamment grâce à Ken Knowlton. Elle s'est progressivement développée dans les années 1980, en permettant à toute personne en possession d'un ordinateur de pouvoir gouter aux prémices de l'infographie. Dans les années 1990, l'art ANSI s'est développée de manière plus collective, notamment grâce à des warez (groupes des hackers), qui se sont appropriés cette pratique en intégrant des visuels à leurs BBS ainsi que leurs fichier .nto, qui accompagnaient leurs logiciels et media piratés qu'ils proposaient. Ces visuels étaient composés de caractères unicodes en forme de blocs ░▒▓█ déclinables en 16 couleurs et 4 intensités lumineuses différentes. L'évolution de cette pratique et la découverte de nouvelles techniques ont poussés les différents groupes à produire des visuels toujours plus complexes et plus grands, à tel point qu'ils ne pouvaient plus être accompagnés par le contenu même du BBS. Cela a permis leur expansion en tant que médium à part entière.

Des groupes d'artistes underground comparables à des crews de graffitis on eux aussi permit à ce medium de prendre forme et évoluer.

Des groupes comme iCE et ACiD se sont mis à publier des packs de visuels de manières régulières. Cependant, l'apparition du protocole TCP/IP et la mise en place des IRC a mis fin aux BBS et un grand nombres de communautés ont disparu, emportant avec elles leurs créations. L'avènement d'interfaces graphiques plus développées a permis à certains groupes de perdurer tandis qu'une minorité d'artistes a continué à produire des visuels depuis leur terminal, faisant de l'ANSI art une pratique en décalage avec les outils nouvellement développés à cette période.

J'ai choisi d'extraire le contenu présent sur le site 16colors, galerie en ligne qui expose de l'ANSI et ASCII Art.

Publication

Création d'une plateforme de publication ouverte à tous.tes les étudiant.e.s de l'erg.

Plateforme

Cette plateforme permet de présenter différents travaux sous la forme d'une arborescence.

Ce site one page permet l'importation de projets (image, vidéo, son) et leur implentation dans une base de données retranscrite graphiquement sous la forme d'un graphique.

Il est aussi possible de consulter les projets grâce à un système de recherche.

Code

Html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body >
        <div class="header">
            <div class="left">
        <h1>Nom site </h1>
            </div>
            <div class="right">
            <button class="publier" onclick="publish()">publier</button>
                <input type="text" class="searchTerm" placeholder="chercher un projet">
                <button type="submit" class="searchButton">chercher
                </button>
            </div>
        </div>

        <div class="forcegraph">

        <button id="type1" class="type" type="button" onclick="revealSujet()">design numerique</button>

        <button id="sujet1" class= "sujet" type="button" onclick="revealContraindre()" style="display: none;">contraindre</button>

        <!-- <button  class="random"type="button" onclick="revealRandom()"">random</button> -->
        <button id="auteur1" class= "auteur"type="button" onclick="revealProject1()" style="display: none;" >Mathias</button>
        <button id="auteur2" class= "auteur"type="button" onclick="revealProject2()" style="display: none;">Clement</button>
        <button id="auteur3" class= "auteur"type="button" onclick="revealProject3()" style="display: none;">Martin</button>
        
        <a id="projet1" href="http://work.designnumerique.be/2022-2023/01-contraindre/mathias/contraindre4/" target="popup" 
        onclick="window.open('http://work.designnumerique.be/2022-2023/01-contraindre/mathias/contraindre4/','popup','width=960,height=590'); return false;" style="display: none;">contraindre</a>
        <a id="projet2" href="http://work.designnumerique.be/2022-2023/01-contraindre/clement/KEN%20KNOWLTON/" target="popup" 
        onclick="window.open('http://work.designnumerique.be/2022-2023/01-contraindre/clement/KEN%20KNOWLTON/','popup','width=960,height=590'); return false;" style="display: none;">contraindre</a>
        <a id="projet3" href="http://work.designnumerique.be/2022-2023/01-contraindre/martin/rendu/" target="popup" 
        onclick="window.open('http://work.designnumerique.be/2022-2023/01-contraindre/martin/rendu/','popup','width=960,height=590'); return false;" style="display: none;">contraindre</a>
        </div>

        <svg><line id="line1"/></svg>

<!--
        <iframe id="projet1" src="http://work.designnumerique.be/2022-2023/01-contraindre/mathias/contraindre4/" frameborder="0" style="display: none;" width="900px" height="500px" ></iframe>
        <iframe id="projet2"src="http://work.designnumerique.be/2022-2023/01-contraindre/clement/KEN%20KNOWLTON/" frameborder="0"  style="display: none;" width="900px" height="500px"></iframe>
        <iframe id="projet3" src="http://work.designnumerique.be/2022-2023/01-contraindre/martin/rendu/" frameborder="0"  style="display: none;" width="900px" height="500px"></iframe>
-->       
        <script src="script.js" async defer></script>
  
    </body>
</html>

CSS

.header {
    display: flex;
    justify-content: space-between;
}

.right{
    display: flex;
    padding:  15px 0px;
}

.left{
    display: inline-block;
}

h1{
    display: block;
    line-height: 0px;
}


.publier {
    position: relative;
    display: inline-block; 
}

.search {
    position: absolute;
    display: inline-block;
    
}

button{
    position: inherit;
}

.forcegraph {
    position: fixed;
}

.random {
    left: 55%;
    top: 45%;
}

.type {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(255, 180, 180);
    text-align: center;
    left: 57%;
    top: 55%;  
}

.sujet{   
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(255, 180, 180);
    text-align: center;
    left: 46%;
    top: 50%;
}

#auteur1{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(255, 180, 180);
    text-align: center;
    left: 40%;
    top: 35%;
}

#auteur2{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(255, 180, 180);
    text-align: center;
    left: 35%;
    top: 47%;   
}

#auteur3{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(255, 180, 180);
    text-align: center;
    left: 39%;
    top: 60%;   
}
#projet1{
    left: 37%;
    top: 39%;
}

#projet2{
    left: 33%;
    top: 51%;
}

#projet3{
    left: 36%;
    top: 64%;
}
a{
    position: fixed;
}

JS

var sujet = document.querySelectorAll('.sujet')
var authors = document.querySelectorAll('.auteur')
var project1 = document.getElementById('projet1')
var project2 = document.getElementById('projet2')
var project3 = document.getElementById('projet3')

function revealSujet(){
    console.log(sujet)
    
    for(i = 0; i<=sujet.length; i++){
        if(sujet[i].style.display === 'none'){
            sujet[i].style.display ='block'

        }
        else{
            sujet[i].style.display = 'none'
        }
    }
}


function revealContraindre(){
    console.log(authors)
    
    for(i = 0; i<=authors.length; i++){
        if(authors[i].style.display === 'none'){
            authors[i].style.display ='block'

        }
        else{
            authors[i].style.display = 'none'
        }
    }
}

function revealProject1(){
    if(project1.style.display === 'none'){
        project1.style.display = 'block'
    }
    else{
    project1.style.display = 'none'

    }
}

function revealProject2(){
    if(project2.style.display === 'none'){
        project2.style.display = 'block'
    }
    else{
    project2.style.display = 'none'

    }
}
function revealProject3(){
    if(project3.style.display === 'none'){
        project3.style.display = 'block'
    }
    else{
    project3.style.display = 'none'

    }
}

function revealRandom(){
    
        let pif = Math.random() * 3;
        console.log(pif)
        if(pif <= 1){
            project1.style.display = 'block'

        }

       else if (pif<=2){
           project2.style.display = 'block'
           
       }
       else if (pif<=3){
           project3.style.display = 'block'
           
       }
   }

   function publish(){
   
           window.open('popup1.html','newPopup', 'height=400,width=600,left=420,top=150,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
           
   }

Clément : Différence entre versions

Version actuelle datée du 2 janvier 2023 à 18:06

Sommaire

Présentation

Contrainte

Premiers essais

Modification de la couleur

Détourner l'attention de l'utilisateur.rice

Définir les contraintes

Contraintes

Final

Code

Html

CSS

JS

La brique

Choix des données

Publication

Plateforme

Code

Html

CSS

JS

Menu de navigation

Outils personnels

Espaces de noms

Variantes

Affichages

Plus

Rechercher

Navigation

Outils