Utilisateur:Celia : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎CODE JAVASCRIPT)
(→‎BASES DE DONNEES)
 
(20 révisions intermédiaires par le même utilisateur non affichées)
Ligne 129 : Ligne 129 :
  
 
== CODE JAVASCRIPT ==
 
== CODE JAVASCRIPT ==
 +
Z = Scroller vers le bas
 +
X = Scroller vers le haut
 +
A = Aller en bas de la page
 +
W = Aller en haut de la page
  
 
<syntaxhighlight lang="js">
 
<syntaxhighlight lang="js">
−
 
 
document.addEventListener('keydown', (e) => {
 
document.addEventListener('keydown', (e) => {
 
   if(e.key == 'z')
 
   if(e.key == 'z')
Ligne 155 : Ligne 158 :
 
      
 
      
 
  });
 
  });
 +
 +
</syntaxhighlight>
 +
 +
== MODIFICATION D'UNE PAGE HTML AVEC DES ELEMENTS GRAPHIQUES ==
 +
Code JS
 +
 +
<syntaxhighlight lang="js">
 +
console.log('yoplaboum');
 +
document.addEventListener('keydown', (e) => {
 +
  if(e.key == 'a')
 +
      getRandomImageUrl('soft1');
 +
  else if(e.key == 'b')
 +
      addBorders('bordure1');
 +
  else if(e.key == 'c')
 +
      replaceTypo('typo1');
 +
  else if(e.key == 'd')
 +
      glitters('glitters1');
 +
  else if(e.key == 'e')
 +
      replaceImages('runbitch');
 +
});
 +
 +
function getRandomImageUrl(mode){
 +
  if(mode == 'soft1'){
 +
    var urls = ['http://data.pixiz.com/output/user/frame/preview/api/big/0/3/7/2/1722730_8f936.jpg'];
 +
} 
 +
  var imageUrl = urls[Math.floor(Math.random() * urls.length)];
 +
  return imageUrl;
 +
 +
}
 +
function addBorders(mode){
 +
  if(mode == 'bordure1'){
 +
    var divElements = document.querySelectorAll('div');
 +
  }
 +
  for (var i = 0; i < divElements.length; i++){
 +
    var divElement = divElements[i];
 +
    divElement.classList.add('bordure1');
 +
    }
 +
}
 +
function replaceTypo(mode){
 +
  if (mode == 'typo1'){
 +
  document.body.addclass('typo1') 
 +
  }
 +
}
 +
function glitters(mode){
 +
  if (mode == 'glitters1'){
 +
  document.body.innerHTML = document.body.innerHTML + <div class='glitters1'></div>;
 +
  }
 +
}
 +
function replaceImages(mode){
 +
  if(mode == 'runbitch'){
 +
  var imageElements = document.querySelectorAll('img');
 +
  ['runbitch.jpg']}
 +
  for(var i = 0; i < imageElements.length; i++){
 +
  var imageElement = imageElements[i];
 +
    var modified = '<div class="bg" style="background-size:cover!important;background-image:url('+getRandomImageUrl(mode)+')!important;">' + imageElement.outerHTML + '</div>';
 +
    imageElement.outerHTML = modified;
 +
}
 +
}
 +
</syntaxhighlight>
 +
 +
== WEB 2 PRINT ==
 +
 +
'''Les conseils du homard''' <br>
 +
 +
''Code Js'' <br>
 +
<syntaxhighlight lang="js">
 +
var conseils = [
 +
  "Conseil N°1: N'essaie pas de changer pour plaire aux autres",
 +
  "Conseil N°2: Aie plus confiance en toi",
 +
  "Conseil N°3: Les erreurs que tu vas faire t'aideront à devenir une meilleure personne",
 +
  "Conseil N°4: N'écoute pas ceux qui essaieront de te décourager",
 +
  "Conseil N°5: Tu ne seras pas forever alone avec 101 chats plus tard",
 +
  "Conseil N°6: Sortir de ta zone de confort ne te tuera pas",
 +
  "Conseil N°7: Trouve le courage de dire ce que tu penses vraiment à ceux que tu aimes",
 +
  "Conseil N°8: Abuse moins des mauvaises mais bonnes choses",
 +
  "Conseil N°9: N'abandonne jamais ton passe-temps favori",
 +
  "Conseil N°10: Tu dois échouer plusieurs fois avant de pouvoir enfin réussir",
 +
  "Conseil N°11: Iel ne te méritait pas, de toute façon",
 +
  "Conseil N°12: Ose dire non plus souvent",
 +
  "Conseil N°13: Tu es responsable de ton propre bonheur",
 +
  "Conseil N°14: Écoute plus souvent les conseils de tes aînés",
 +
  "Conseil N°15: Profite encore plus de ta jeunesse",
 +
  "Conseil N°16: Ne dépense pas ton argent dans des objets inutiles",
 +
  "Conseil N°17: Prends des cours de cuisine/danse/chant/langues",
 +
  "Conseil N°18: Vis dans le présent et non dans le passé",
 +
  "Conseil N°19: Sors moins et lis plus de livres",
 +
  "Conseil N°20: Tu vas finir par t'en sortir",
 +
];
 +
 +
 +
var conseil = conseils[Math.floor(Math.random() * conseils.length)];
 +
 +
 +
console.log(conseil);
 +
 +
document.getElementById('conseil').innerHTML = conseil;
 +
 +
 +
document.addEventListener('click',peche);
 +
function peche (){
 +
  window.print()
 +
}
 +
</syntaxhighlight>
 +
 +
''Code 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">
 +
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
        <style>
 +
            @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
 +
            @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
 +
            @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
 +
            </style>
 +
        <link rel="stylesheet" href="styles.css">
 +
        <title>Les conseils du homard</title>
 +
    </head>
 +
 +
 +
<body>
 +
    <section>
 +
    <header><h1><span>Les conseils du homard</span></h1>
 +
    <h3><span>Choisis ton homard et pêche-le ! </span></h3></header>
 +
       
 +
    <div><img id="homard"src="homard.png" alt="homard"></div>
 +
    <div id="conseil"> </div> 
 +
    </section>
 +
    <script src="content.js"></script>
 +
 
 +
 +
</body>
 +
   
 +
</html></syntaxhighlight>
 +
''Code Css''
 +
 +
<syntaxhighlight lang="css">@font-face {
 +
    font-family: 'lack';
 +
    src: url('lack-line-regular-webfont.woff2') format('woff2'),
 +
        url('lack-line-regular-webfont.woff') format('woff');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
   
 +
 +
}
 +
html, body{
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
body{
 +
    background-image: url('gifff.png');
 +
    width: 100%;
 +
    height: 100%;
 +
    background-size: 100%;
 +
    background-repeat: no-repeat;
 +
    font-family: 'Raleway';
 +
    font-size: 30px;
 +
    margin: -5% 0% 0% 0.5%;
 +
    padding-right: 0%;
 +
   
 +
}
 +
 +
 +
 +
h1{
 +
    font-family: 'lack';
 +
    color: white;
 +
    font-size: 60px;
 +
    padding-top: 3%;
 +
    margin-bottom: 2%;
 +
    padding-bottom: 0%;
 +
    font-weight: lighter;
 +
}
 +
 +
h3{
 +
    font-family: 'Raleway', white;
 +
    color: white;
 +
    font-weight: 600;
 +
    font-style: italic;
 +
    font-weight: lighter;
 +
    margin-top: -2%;
 +
    padding-right: 1%;
 +
}
 +
 +
 +
@media print{
 +
    @page{
 +
        size:297mm 420mm;
 +
        background-color: black;
 +
    }
 +
 +
    section{
 +
        border:0;
 +
        width:297mm;
 +
        height:420mm;
 +
        background-color: black;
 +
    }
 +
    h1{
 +
        display: none;
 +
       
 +
    }
 +
 +
    #homard{
 +
        margin-top:10%;
 +
        width: 80%;
 +
        height: auto;
 +
        margin-left: 10%;
 +
        margin-top: 5%;
 +
    }
 +
    h3{
 +
        opacity: 0%;
 +
    }
 +
    #conseil{
 +
        margin-top: 5%;
 +
        font-family: 'lack';
 +
        font-size: 70px;
 +
        text-align: center;
 +
        margin-bottom: 0%;
 +
    }
 +
}
 +
@media screen{
 +
#homard{
 +
    display: none;
 +
}
 +
#conseil{
 +
    display: none;
 +
}
 +
header{
 +
 +
    margin:-10% 0% 3% 3%;
 +
    display: inline-block;
 +
    padding-top: 3%;
 +
    margin-top: -3%;
 +
    border-radius: 10px;
 +
}
 +
}</syntaxhighlight>
 +
 +
'''Recueil de poèmes érotique'''
 +
 +
''Code Html''
 +
 +
<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
 +
    <title>ether2html</title>
 +
 +
    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
 +
    <!-- <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"> -->
 +
 +
    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
 +
    <link href="https://pads.erg.be/p/stylescss/export/txt" rel="stylesheet" text="text/css">
 +
 +
    <!-- PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE -->
 +
    <!-- <script src="js/showdown.min.js"></script> -->
 +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
 +
    <script type="text/javascript" charset="utf-8">
 +
 +
        let $padContent;
 +
        function insertData(data) {
 +
           
 +
            let converter = new showdown.Converter();
 +
            let html = converter.makeHtml(data);
 +
            $padContent.innerHTML = html;
 +
        }
 +
 +
        function insertPagedJS(){
 +
            let $script = document.createElement('script');
 +
            // PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
 +
            // $script.setAttribute('src', 'js/paged.polyfill.js');
 +
            $script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
 +
            document.querySelector('head').appendChild($script);
 +
        }
 +
 +
        window.addEventListener('DOMContentLoaded', function(){
 +
            $padContent = document.getElementById('pad-content');
 +
            let request = new URL($padContent.getAttribute('data-md'));
 +
            fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
 +
                insertData(data);
 +
                insertPagedJS();
 +
            });
 +
        });
 +
       
 +
    </script>
 +
 +
    <!-- This is the default stylesheet of paged.js -->
 +
    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
 +
    <style type="text/css">
 +
        @font-face {
 +
            font-family: "fesse";
 +
            src: url(Typefesse_Pleine.woff) format("woff");
 +
            src: url(Typefesse_Pleine.woff2) format("woff2");
 +
        }
 +
        @font-face {
 +
            font-family: "compagnon1";
 +
            src: url(Compagnon-Roman.woff) format("woff");
 +
            src: url(Compagnon-Roman.woff2) format("woff2");
 +
        }
 +
     
 +
        </style>
 +
        <style>
 +
         
 +
@media print {
 +
        div.pagedjs_page{
 +
                background-image: url("https://i.ibb.co/c6d7zm7/page.jpg");
 +
                background-size: cover;
 +
               
 +
               
 +
            }
 +
            div.pagedjs_first_page{
 +
                background-image: url("https://i.ibb.co/BsZ14Ps/cov.jpg");
 +
 +
                background-size: cover;
 +
               
 +
            }
 +
       
 +
            }
 +
        </style>
 +
</head>
 +
<body>
 +
 +
    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
 +
    <div data-md="https://pads.erg.be/p/meremichel/export/txt" id="pad-content"></div>
 +
   
 +
</body>
 +
</html>
 +
</html></syntaxhighlight>
 +
 +
<br> Link texte : https://pads.erg.be/p/meremichel
 +
<br> Link style : https://pads.erg.be/p/stylescss
 +
 +
== DESIGN NUMERIQUE 21/22 ==
 +
 +
'''La balade des homard'''
 +
 +
<br> Essai d'animation en JavaScript <br>
 +
 +
''Code Html''
 +
<syntaxhighlight lang="html"><!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <meta charset="utf-8">
 +
        <title>scroll</title>
 +
        <link rel="stylesheet" href="styles.css">
 +
   
 +
        </head>
 +
        <body>
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
            <img class="myImg" src="gifff.png" > 
 +
            <img class="myImg" src="gifff.png" >
 +
 +
        <script src="script.js"></script></body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
''Code Js''
 +
<syntaxhighlight lang="js">function bouge(){
 +
    for(var compteur = 0; compteur < homards.length; compteur++){
 +
        var homard = homards[compteur];
 +
        vitesseX = parseFloat(homard.getAttribute('vitesseX'));
 +
        vitesseY = parseFloat(homard.getAttribute('vitesseY'));
 +
 +
        posX = parseFloat(homard.style.left);
 +
        posY = parseFloat(homard.style.top);
 +
       
 +
        if(posX > window.innerWidth - 212){
 +
            vitesseX = - vitesseX;
 +
            homard.setAttribute('vitesseX', vitesseX);
 +
        }
 +
        if(posX < 0 ){
 +
            vitesseX = - vitesseX;
 +
            homard.setAttribute('vitesseX', vitesseX);
 +
        }
 +
        if(posY > window.innerHeight - 300){
 +
            vitesseY = - vitesseY;
 +
            homard.setAttribute('vitesseY', vitesseY);
 +
        }
 +
        if(posY < 0 ){
 +
            vitesseY = - vitesseY;
 +
            homard.setAttribute('vitesseY', vitesseY);
 +
        }
 +
//calculer l'angle de rotation en fonction de la x et y  trigonométrie rotation en fonction en fonction de vitesse x et y
 +
// pour avoir les homard qui bougent       
 +
 +
        console.log(vitesseX);
 +
        homard.style.left = (posX + vitesseX)  + 'px';
 +
        homard.style.top  = (posY + vitesseY) + 'px';
 +
    }
 +
}
 +
 +
 +
function init(){
 +
    for(var compteur = 0; compteur < homards.length; compteur++){
 +
        var homard = homards[compteur];
 +
 +
        homard.setAttribute('vitesseX', -1 + Math.random() * 2);
 +
        homard.setAttribute('vitesseY', -1 + Math.random() * 2);
 +
        homard.style.left = Math.random() * (window.innerWidth - 212)  + 'px';
 +
        homard.style.top = Math.random() * (window.innerHeight - 300) + 'px';
 +
        homard.style.transformOrigin = Math.random() * 100 + '%';
 +
    }
 +
}
 +
 +
 +
var homards = document.querySelectorAll('.myImg');
 +
 +
init();
 +
 +
window.setInterval(bouge, 10);</syntaxhighlight>
 +
 +
''Code Css''
 +
<syntaxhighlight lang="css">body{
 +
    width: 90%;
 +
    height: 90%;
 +
    /* overflow: hidden; */
 +
}
 +
 +
body::-webkit-scrollbar {
 +
    display: none;
 +
  }
 +
 
 +
  /* Hide scrollbar for IE, Edge and Firefox */
 +
body {
 +
    -ms-overflow-style: none;  /* IE and Edge */
 +
    scrollbar-width: none;  /* Firefox */
 +
  }
 +
 +
.myImg {
 +
    position:absolute;
 +
 +
    transition: margin-left 3s, margin-top 3s;
 +
/*animation-name: rotate;
 +
animation-duration: 80s;
 +
animation-iteration-count: infinite;*/
 +
height:300px;
 +
width:auto;
 +
 +
 +
}
 +
@keyframes rotate{
 +
from{ transform: rotate(-360deg); }
 +
to{ transform: rotate(360deg); }
 +
} </syntaxhighlight>
 +
 +
'''Texte Nft''' <br>
 +
<p>Notion de certificat/ Calcules / imagé par le texte qui se complexifie et qui résulte à une transaction en cryptomonnaie / pluie de coins.</p>
 +
<br> Essai d'animation seulement en Css/Html
 +
 +
''Code Html''
 +
 +
<syntaxhighlight lang="html"><!doctype html>
 +
<head>
 +
    <meta charset="utf-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
 +
    <link rel="stylesheet" href="style.css">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
</head>
 +
<title>NF - WHAT THE - T</title>
 +
 +
<body>
 +
 +
 +
<div class="sticky" id="fixe"><h1>Les NFT révolutionnent-ils le monde de l'art ?</h1></div>
 +
<div class="sticky">Le marché des NFT ("non fungible tokens") s’envole ces derniers mois, notamment dans le milieu de l’art. Les sceptiques affirmaient que les NFT n’étaient qu’une bulle spéculative au bord de l’implosion. La dernière édition du rapport annuel Hiscox Online Art Trade suggère le contraire. Les ventes de NFT associé à une œuvre d’art ont généré près de 3,5 milliards de dollars (environ 3 milliards d’euros) durant les trois premiers trimestres de cette année. Elles se sont particulièrement accélérées en août, atteignant la somme inédite de 1,7 million de dollars (1,5 million d’euros).</div>
 +
    <div class="sticky">Problème : le marché de ces objets numériques à la propriété certifiée est extrêmement volatil et s’est effondré de 69% en septembre. Mais pas de quoi inquiéter les plus optimistes. Les transactions de NFT avaient déjà connu un premier ralentissement en avril après qu’un collage de Beeple ait été adjugé 69,3 millions de dollars (58,1 millions d’euros) chez Christie’s. Un montant qui l’a propulsé au troisième rang des artistes vivants les plus chers, après Jeff Koons et David</div>
 +
    <div class="sticky">La nouvelle technologique préférée des maisons d’enchères</div>
 +
    <div class="sticky">Bien que le marché des NFT connaît quelques variations, il ne cesse de prendre de l’ampleur et vient bousculer un monde de l’art souvent frileux vis-à-vis des avancées technologiques. Les jetons non fongibles en ont fait les frais en 2018, trois ans avant qu’ils ne deviennent un acronyme connu de tous les professionnels du milieu. À l’époque, l’artiste et chercheur en intelligence artificielle, Robbie Barrat, collabore avec Christie’s pour offrir 300 cartes cadeaux aux participants du sommet "Art + Tech" de la maison d’enchères. Elles leur permettent de récupérer un NFT exclusif de l’artiste… ce que ne font que quelques personnes présentes. </div>
 +
    <div class="sticky">La popularité des NFT a depuis décollé, et les principales maisons d’enchères proposent toutes ces objets numériques. Sotheby’s a ainsi annoncé la création d’un espace digital réservé aux collectionneurs d’art digital, et une vente bi-annuelle dédiée exclusivement aux NFT. Un choix judicieux étant donné que ces jetons non-fongibles battent des records dans les salles d’enchères. </div>
 +
    <div class="sticky">Une nouvelle façon de collectionner l’art</div>
 +
    <div class="sticky">Si certains exemplaires se distinguent par leur rareté, tous permettent aux collectionneurs de revendiquer leur appartenance à une communauté. Ce sentiment d’appartenance vaut son pesant d’or : un lot de 101 dessins numériques issus du Bored Apes Yacht Club s’est arraché à 24,4 millions de dollars (environ 20,3 millions d’euros) en septembre chez Sotheby’s. Dans le même registre, neuf CryptoPunks ont été vendus en mai pour 16,9 millions de dollars (14,6 millions d’euros) chez Christie’s. </div>
 +
    <div class="sticky">"Les collectionneurs d’art ne se contentent pas d’acheter des objets, ils achètent ce qui se cachent derrière. L’une des leçons à tirer du boom des objets cryptographiques est l’importance de la narration pour créer une grande communauté", peut-on lire dans le rapport. Bored Apes Yacht Club joue particulièrement sur cet aspect en proposant aux détenteurs de ses avatars de participer à des soirées exclusives. </div>
 +
    <div class="sticky">Qu’ils confèrent un sentiment d’appartenance ou non, les NFT se sont imposés dans le monde de l’art. Les optimistes y voient un moyen de redonner le pouvoir aux artistes, tandis que les autres s’interrogent sur leur impact écologique ou le manque de réglementation spécifique autour de cette nouvelle technologie. </div>
 +
    <div class="sticky">Les auteurs du rapport Hiscox Online Art Trade sont, eux, optimistes. </div>
 +
    <div class="sticky">"Les NFT comblent une lacune qui existe depuis longtemps dans le monde de l’art : une nouvelle façon de collectionner l’art. Les NFT répondent au même besoin des collectionneurs de posséder quelque chose de recherché, mais cette fois sous une forme numérique plutôt que physique. Ce marché connaîtra des hauts et des bas, mais le monde de l’art devrait y prêter attention s’il veut rester pertinent à l’avenir".</div>
 +
    <div class="sticky"><img id=coco src="1456113_72b94.gif" width= "100%" height="100%"></div>
 +
 +
 +
 +
</body>
 +
</html>
 +
 +
 +
 +
</html>
 +
</syntaxhighlight>
 +
 +
''Code Css''
 +
 +
<syntaxhighlight lang="css">
 +
 +
html{
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
#fixe{
 +
  color: black;
 +
  text-shadow: white 1px 0 5px;
 +
  z-index: 2;
 +
}
 +
 +
div.sticky {
 +
 
 +
  position: -webkit-sticky;
 +
  position: sticky;
 +
  top: 0;
 +
margin: 0%;
 +
padding: 0%;
 +
font-family: Verdana, Geneva, Tahoma, sans-serif;
 +
font: bold black;
 +
  font-size: 40px;
 +
  ;
 +
}
 +
 +
#coco{
 +
  opacity: 0;
 +
}
 +
#coco:hover{
 +
  opacity: 100%;
 +
  transition: 2s ease-in;
 +
 +
}</syntaxhighlight>
 +
 +
== BASES DE DONNEES ==
 +
 +
''''' Idées '''''
 +
 +
Quelles couleurs servent a quel site dans les sites les plus visité , le bleu = reseaux sociaux, infos ;
 +
le jaune, cinema etc.
 +
puis voir la signification des couleurs, est ce que ça corespond ? voir le but, aligné les ref couleurs
 +
 +
Index des couleurs pour la communication ou quelque chose de bien plus precis
 +
Tous les sites où ca parle "d'espace vital" quelles couleurs sont repertoriées ?
 +
Le but est que ça rende une image graphique may be ? Genre des degradées de couleurs ou des fresques
 +
que j'insère dans des illustration that would communicate smthg, un mot ou une sensation.

Version actuelle datée du 4 février 2022 à 14:30

LE MONDE

Mon monde
La cité des suicides :
- Sous le bois de Vincennes, à l’est de Paris. L’existence de cette ville cachée a été révélée lors de la construction de la ligne de métro Bastille et Vincennes. L’inspecteur de police Sauvage la découvrit alors qu’il recherchait un certain nombre d’ouvriers qui avaient disparu au cours des travaux de fondation.
- Chanson de la ville au silence absolu
- L’air se trouve e effet filtré, laissant entrer de grandes quantités d’ozone et bloquant la route aux microbes. En dépit des délices évidents qu’offre la ville, les visiteurs l’ont décrite comme lugubre et mélancolique.

Les personnages =

L’Anglais :
- Las de la vie par ennui
- Word of the day : Morose
- Tout me lasse ; je remorque avec peine mon ennui avec mes jours, et je vais partout bâillant ma vie.

Le Français :
- Fatigué de la débauche
- Et ta débauche ne leurre qu'un instant ton désespoir caché.
- J'ai trente ans et je n'ai encore rien pu réaliser de ce que je souhaitais. Toujours embauché, débauché, et chaque mois, je vieillis d'une année. Je n'ai rien vu du monde, rien obtenu de la vie si ce n'est cet espoir : cela viendra, c'est le commencement.

Le Médecin :
- L’alimentation se limite à l’absorption de minuscules pilules qui activent le cerveau.
- Chaque habitant doit observer la règle du silence absolu, sauf lorsqu’il est interrogé par son médecin.
- Cette sorte de praticiens appartient en fait à la police, car la communauté n’a pas de problèmes de santé : grâce aux murs protecteurs, datant des temps préhistoriques, qui entourent la ville, l’atmosphère est pure à cent pour cent. L’air se trouve en effet filtré, laissant entrer de grandes quantités d’ozone et bloquant la route aux microbes.

L’Espagnol :
- Les Espagnols, qui ont tenté de se supprimer par désespoir d’amour.


LA CARTOGRAPHIE (Dataviz)

Ambiance galaxy / représenter le monde vu de l'univers

image inspi 1

A travers des sortes de Milkyway

image inspi 2

Couleurs vives sur fond noir

image inspi 3

Quelques essais de planètes/ Milkyway


Essai1.png

Essai2.png Essai3.png Premier rendu .png

LA PAGE HTML VIVANTE

Inspiration :

Je souhaite faire une page Html qui représente une carte à gratter qui donne, soit bonne fortune, soit une prédiction astrologique. Je souhaite aligner si c'est possible trois cartes.

Comme les cartes gagnantes que l'on trouve dans les bureaux de tabac, mais cette fois-ci sans histoire d'argent.

Sources :

Carte 1

Carte 2

Carte 3

file:///C:/Users/HP/Desktop/carto/gratte.html

INTERACTION AVEC UNE INTERFACE

Première idée

- Des capteurs positionnés sur le corps qui permettrait d'interagir avec une interface telle que paint 3D. Ainsi, de faire de formes grâce à une chorégraphie. L'interaction avec ce logiciel se transformerait en performance. Chaque mouvement serait associé à une action qui aurait été faite avec le clavier ou la souris, en temps normal.


Note1.jpeg

Note2.jpeg Note3.jpg


Deuxième idée

Plus axé "web dev" / sous forme d'extension Chrome

Quelques idées de modifications d'interfaces en fonction de ce que je souhaiterais apprendre à coder :

- Inverser la logique de l'interface afin d'avoir une nouvelle approche. Par exemple: mettre les éléments du haut, en bas ou ceux de gauche, à droite.
- Suprimer les images, laisser que le texte ou l'inverse.
- Reprendre l'idée de la carte à gratter, mais cette fois-ci, sur des interfaces déjà existante pour choisir nous même, les images que l'on souhaite voir en fonction de leur titre.
- Traitement d'images: comment l'agrandir, autre que zoom avec deux doigts ou le double clic. Peut-être voir comment transformer la forme de l'image, par les angles ou complètement la modifier, l'effacer, en mettre une autre etc.
- Laisser que les mots clefs pour faciliter la lecture d'une page avec beaucoup d'informations.

Note4.jpg


INTERACTION AVEC LE CLAVIER

Suites de lettres qui émettent une action :

  • azertyuiop = Agrandir les images (Action cumulable)
  • qsdfghjklm = Agrandir la typo (Action cumulable)
  • wxcvbn,;:! = Aller à la page suivante (Action cumulable)
  • poiuytreza = Rétrécir les images (Action cumulable)
  • mlkjhgfdsq = Rétrécir la typo (Action cumulable)
  • !:;,nbvcxw = Revenir en arrière (Action cumulable)
  • aqw = Aller en bas de la page
  • zsx = Scroller vers le bas
  • edc = Aller à la barre de recherche
  • rfv = Afficher que les img ou jpg
  • tgb = Afficher que le texte
  • yhn = Inverser le sens d'affichage
  • uj, = Afficher seulement les mots clefs sans les images
  • ik; = Afficher le titre des images sans les images mais avec le texte
  • ol: = Activer le clavier normal (Action cumulable on/off)
  • pm! = Ouvrir un onglet au hasard dans un nouvel onglet
  • wqa = Aller en haut de la page
  • xsz = Scroller vers le haut
  • cde = Aller à l'accueil
  • vfr = Revenir à la normal (Valable pour chaque modification émise)
  • bgt = Sélectionner un élément (puis se balader avec les flèches)
  • nhy = Cliquer sur l'élément sélectionner
  • ,ju = Désactiver l'outil sélection
  • ;ki =
  • :lo = Rouvrir le dernier onglet fermé
  • !mp = Fermer le dernier onglet ouvert

CODE JAVASCRIPT

Z = Scroller vers le bas X = Scroller vers le haut A = Aller en bas de la page W = Aller en haut de la page 

document.addEventListener('keydown', (e) => {
   if(e.key == 'z')
        document.documentElement.scrollTop += 50;
    
});

document.addEventListener('keydown', (e) => {
    if(e.key == 'x')
         document.documentElement.scrollTop -= 50;
     
 });

document.addEventListener('keydown', (e) => {
    if(e.key == 'a')
         document.documentElement.scrollTop = 100000000000000;
     
 });

document.addEventListener('keydown', (e) => {
    if(e.key == 'w')
         document.documentElement.scrollTop -= 100000000000000;
     
 });

MODIFICATION D'UNE PAGE HTML AVEC DES ELEMENTS GRAPHIQUES

Code JS 

console.log('yoplaboum');
document.addEventListener('keydown', (e) => {
  if(e.key == 'a')
       getRandomImageUrl('soft1');
  else if(e.key == 'b') 
       addBorders('bordure1');
  else if(e.key == 'c')
       replaceTypo('typo1');
  else if(e.key == 'd')
       glitters('glitters1');
  else if(e.key == 'e')
       replaceImages('runbitch');
});

function getRandomImageUrl(mode){
  if(mode == 'soft1'){
    var urls = ['http://data.pixiz.com/output/user/frame/preview/api/big/0/3/7/2/1722730_8f936.jpg'];
}  
  var imageUrl = urls[Math.floor(Math.random() * urls.length)];
  return imageUrl;
 
}
function addBorders(mode){
  if(mode == 'bordure1'){
    var divElements = document.querySelectorAll('div');
  }
  for (var i = 0; i < divElements.length; i++){
    var divElement = divElements[i];
    divElement.classList.add('bordure1');
    }
}
function replaceTypo(mode){
  if (mode == 'typo1'){
  document.body.addclass('typo1')  
  }
} 
function glitters(mode){
  if (mode == 'glitters1'){
  document.body.innerHTML = document.body.innerHTML + <div class='glitters1'></div>; 
  }
}
function replaceImages(mode){
  if(mode == 'runbitch'){
  var imageElements = document.querySelectorAll('img');
  ['runbitch.jpg']}
  for(var i = 0; i < imageElements.length; i++){
  var imageElement = imageElements[i];
    var modified = '<div class="bg" style="background-size:cover!important;background-image:url('+getRandomImageUrl(mode)+')!important;">' + imageElement.outerHTML + '</div>';
    imageElement.outerHTML = modified;
}
}

WEB 2 PRINT

Les conseils du homard

Code Js 

var conseils = [
  "Conseil N°1: N'essaie pas de changer pour plaire aux autres",
  "Conseil N°2: Aie plus confiance en toi",
  "Conseil N°3: Les erreurs que tu vas faire t'aideront à devenir une meilleure personne",
  "Conseil N°4: N'écoute pas ceux qui essaieront de te décourager",
  "Conseil N°5: Tu ne seras pas forever alone avec 101 chats plus tard",
  "Conseil N°6: Sortir de ta zone de confort ne te tuera pas",
  "Conseil N°7: Trouve le courage de dire ce que tu penses vraiment à ceux que tu aimes",
  "Conseil N°8: Abuse moins des mauvaises mais bonnes choses",
  "Conseil N°9: N'abandonne jamais ton passe-temps favori",
  "Conseil N°10: Tu dois échouer plusieurs fois avant de pouvoir enfin réussir",
  "Conseil N°11: Iel ne te méritait pas, de toute façon",
  "Conseil N°12: Ose dire non plus souvent",
  "Conseil N°13: Tu es responsable de ton propre bonheur",
  "Conseil N°14: Écoute plus souvent les conseils de tes aînés",
  "Conseil N°15: Profite encore plus de ta jeunesse",
  "Conseil N°16: Ne dépense pas ton argent dans des objets inutiles",
  "Conseil N°17: Prends des cours de cuisine/danse/chant/langues",
  "Conseil N°18: Vis dans le présent et non dans le passé",
  "Conseil N°19: Sors moins et lis plus de livres",
  "Conseil N°20: Tu vas finir par t'en sortir",
]; 


var conseil = conseils[Math.floor(Math.random() * conseils.length)];


console.log(conseil);

document.getElementById('conseil').innerHTML = conseil;


document.addEventListener('click',peche);
function peche (){
  window.print()
}

Code Html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
            </style>
        <link rel="stylesheet" href="styles.css">
        <title>Les conseils du homard</title>
    </head>


<body>
    <section>
    <header><h1><span>Les conseils du homard</span></h1>
     <h3><span>Choisis ton homard et pêche-le ! </span></h3></header>
        
    <div><img id="homard"src="homard.png" alt="homard"></div> 
    <div id="conseil"> </div>  
    </section>
    <script src="content.js"></script>
   

</body>
    
</html>

Code Css 

@font-face {
    font-family: 'lack';
    src: url('lack-line-regular-webfont.woff2') format('woff2'),
         url('lack-line-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    

}
html, body{
    width: 100%;
    height: 100%;
}

body{
    background-image: url('gifff.png');
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: 'Raleway';
    font-size: 30px;
    margin: -5% 0% 0% 0.5%;
    padding-right: 0%;
    
}



h1{
    font-family: 'lack';
    color: white;
    font-size: 60px;
    padding-top: 3%;
    margin-bottom: 2%;
    padding-bottom: 0%;
    font-weight: lighter;
}

h3{
    font-family: 'Raleway', white;
    color: white;
    font-weight: 600;
    font-style: italic;
    font-weight: lighter;
    margin-top: -2%;
    padding-right: 1%; 
}


@media print{
    @page{
        size:297mm 420mm;
        background-color: black;
    }

    section{
        border:0;
        width:297mm;
        height:420mm;
        background-color: black;
    }
    h1{
        display: none;
         
    }

    #homard{
        margin-top:10%;
        width: 80%;
        height: auto;
        margin-left: 10%;
        margin-top: 5%;
    }
    h3{
        opacity: 0%;
    }
    #conseil{
        margin-top: 5%;
        font-family: 'lack';
        font-size: 70px;
        text-align: center;
        margin-bottom: 0%;
    }
}
@media screen{
#homard{
    display: none;
}
#conseil{
    display: none;
}
header{

    margin:-10% 0% 3% 3%;
    display: inline-block;
    padding-top: 3%;
    margin-top: -3%;
    border-radius: 10px;
}
}

Recueil de poèmes érotique

Code Html 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ether2html</title>

    <!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
    <!-- <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"> -->

    <!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
    <link href="https://pads.erg.be/p/stylescss/export/txt" rel="stylesheet" text="text/css">

    <!-- PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE -->
    <!-- <script src="js/showdown.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
    <script type="text/javascript" charset="utf-8">

        let $padContent;
        function insertData(data) {
            
            let converter = new showdown.Converter();
            let html = converter.makeHtml(data);
            $padContent.innerHTML = html;
        }

        function insertPagedJS(){
            let $script = document.createElement('script');
            // PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
            // $script.setAttribute('src', 'js/paged.polyfill.js');
            $script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
            document.querySelector('head').appendChild($script);
        }

        window.addEventListener('DOMContentLoaded', function(){
            $padContent = document.getElementById('pad-content');
            let request = new URL($padContent.getAttribute('data-md'));
            fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
                insertData(data);
                insertPagedJS();
            });
        });
        
    </script>

    <!-- This is the default stylesheet of paged.js -->
    <style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
    <style type="text/css">
        @font-face {
            font-family: "fesse";
            src: url(Typefesse_Pleine.woff) format("woff");
            src: url(Typefesse_Pleine.woff2) format("woff2");
        }
        @font-face {
            font-family: "compagnon1";
            src: url(Compagnon-Roman.woff) format("woff");
            src: url(Compagnon-Roman.woff2) format("woff2");
        }
       
        </style>
        <style>
          
 @media print { 
         div.pagedjs_page{
                background-image: url("https://i.ibb.co/c6d7zm7/page.jpg");
                background-size: cover;
                
                
            }
            div.pagedjs_first_page{
                background-image: url("https://i.ibb.co/BsZ14Ps/cov.jpg");

                background-size: cover;
                
            }
        
            } 
        </style>
</head>
<body>

    <!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
    <div data-md="https://pads.erg.be/p/meremichel/export/txt" id="pad-content"></div>
    
</body>
</html>
</html>


Link texte : https://pads.erg.be/p/meremichel
Link style : https://pads.erg.be/p/stylescss

DESIGN NUMERIQUE 21/22

La balade des homard


Essai d'animation en JavaScript

Code Html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>scroll</title>
        <link rel="stylesheet" href="styles.css">
    
        </head>
        <body>
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" >
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" >
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" >
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 
            <img class="myImg" src="gifff.png" >   
            <img class="myImg" src="gifff.png" > 

        <script src="script.js"></script></body>
</html>

Code Js 

function bouge(){
    for(var compteur = 0; compteur < homards.length; compteur++){
        var homard = homards[compteur];
        vitesseX = parseFloat(homard.getAttribute('vitesseX'));
        vitesseY = parseFloat(homard.getAttribute('vitesseY'));

        posX = parseFloat(homard.style.left);
        posY = parseFloat(homard.style.top);
        
        if(posX > window.innerWidth - 212){
            vitesseX = - vitesseX;
            homard.setAttribute('vitesseX', vitesseX);
        }
        if(posX < 0 ){
            vitesseX = - vitesseX;
            homard.setAttribute('vitesseX', vitesseX);
        }
        if(posY > window.innerHeight - 300){
            vitesseY = - vitesseY;
            homard.setAttribute('vitesseY', vitesseY);
        }
        if(posY < 0 ){
            vitesseY = - vitesseY;
            homard.setAttribute('vitesseY', vitesseY);
        }
 //calculer l'angle de rotation en fonction de la x et y  trigonométrie rotation en fonction en fonction de vitesse x et y
 // pour avoir les homard qui bougent         

        console.log(vitesseX);
        homard.style.left = (posX + vitesseX)  + 'px';
        homard.style.top  = (posY + vitesseY) + 'px';
    }
}


function init(){
    for(var compteur = 0; compteur < homards.length; compteur++){
        var homard = homards[compteur];

        homard.setAttribute('vitesseX', -1 + Math.random() * 2);
        homard.setAttribute('vitesseY', -1 + Math.random() * 2);
        homard.style.left = Math.random() * (window.innerWidth - 212)  + 'px';
        homard.style.top = Math.random() * (window.innerHeight - 300) + 'px';
        homard.style.transformOrigin = Math.random() * 100 + '%';
    }
}


var homards = document.querySelectorAll('.myImg');

init();

window.setInterval(bouge, 10);

Code Css 

body{
    width: 90%;
    height: 90%;
     /* overflow: hidden; */
}

body::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

.myImg { 
    position:absolute;

    transition: margin-left 3s, margin-top 3s; 
/*animation-name: rotate;
animation-duration: 80s; 
animation-iteration-count: infinite;*/
height:300px;
width:auto;


}
 @keyframes rotate{ 
 from{ transform: rotate(-360deg); } 
to{ transform: rotate(360deg); }
}

Texte Nft

Notion de certificat/ Calcules / imagé par le texte qui se complexifie et qui résulte à une transaction en cryptomonnaie / pluie de coins.


Essai d'animation seulement en Css/Html

Code Html 

<!doctype html>
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<title>NF - WHAT THE - T</title>

<body>


<div class="sticky" id="fixe"><h1>Les NFT révolutionnent-ils le monde de l'art ?</h1></div>
<div class="sticky">Le marché des NFT ("non fungible tokens") s’envole ces derniers mois, notamment dans le milieu de l’art. Les sceptiques affirmaient que les NFT n’étaient qu’une bulle spéculative au bord de l’implosion. La dernière édition du rapport annuel Hiscox Online Art Trade suggère le contraire. Les ventes de NFT associé à une œuvre d’art ont généré près de 3,5 milliards de dollars (environ 3 milliards d’euros) durant les trois premiers trimestres de cette année. Elles se sont particulièrement accélérées en août, atteignant la somme inédite de 1,7 million de dollars (1,5 million d’euros).</div>
    <div class="sticky">Problème : le marché de ces objets numériques à la propriété certifiée est extrêmement volatil et s’est effondré de 69% en septembre. Mais pas de quoi inquiéter les plus optimistes. Les transactions de NFT avaient déjà connu un premier ralentissement en avril après qu’un collage de Beeple ait été adjugé 69,3 millions de dollars (58,1 millions d’euros) chez Christie’s. Un montant qui l’a propulsé au troisième rang des artistes vivants les plus chers, après Jeff Koons et David</div>
    <div class="sticky">La nouvelle technologique préférée des maisons d’enchères</div>
    <div class="sticky">Bien que le marché des NFT connaît quelques variations, il ne cesse de prendre de l’ampleur et vient bousculer un monde de l’art souvent frileux vis-à-vis des avancées technologiques. Les jetons non fongibles en ont fait les frais en 2018, trois ans avant qu’ils ne deviennent un acronyme connu de tous les professionnels du milieu. À l’époque, l’artiste et chercheur en intelligence artificielle, Robbie Barrat, collabore avec Christie’s pour offrir 300 cartes cadeaux aux participants du sommet "Art + Tech" de la maison d’enchères. Elles leur permettent de récupérer un NFT exclusif de l’artiste… ce que ne font que quelques personnes présentes. </div>
    <div class="sticky">La popularité des NFT a depuis décollé, et les principales maisons d’enchères proposent toutes ces objets numériques. Sotheby’s a ainsi annoncé la création d’un espace digital réservé aux collectionneurs d’art digital, et une vente bi-annuelle dédiée exclusivement aux NFT. Un choix judicieux étant donné que ces jetons non-fongibles battent des records dans les salles d’enchères. </div>
    <div class="sticky">Une nouvelle façon de collectionner l’art</div>
    <div class="sticky">Si certains exemplaires se distinguent par leur rareté, tous permettent aux collectionneurs de revendiquer leur appartenance à une communauté. Ce sentiment d’appartenance vaut son pesant d’or : un lot de 101 dessins numériques issus du Bored Apes Yacht Club s’est arraché à 24,4 millions de dollars (environ 20,3 millions d’euros) en septembre chez Sotheby’s. Dans le même registre, neuf CryptoPunks ont été vendus en mai pour 16,9 millions de dollars (14,6 millions d’euros) chez Christie’s. </div>
    <div class="sticky">"Les collectionneurs d’art ne se contentent pas d’acheter des objets, ils achètent ce qui se cachent derrière. L’une des leçons à tirer du boom des objets cryptographiques est l’importance de la narration pour créer une grande communauté", peut-on lire dans le rapport. Bored Apes Yacht Club joue particulièrement sur cet aspect en proposant aux détenteurs de ses avatars de participer à des soirées exclusives. </div>
    <div class="sticky">Qu’ils confèrent un sentiment d’appartenance ou non, les NFT se sont imposés dans le monde de l’art. Les optimistes y voient un moyen de redonner le pouvoir aux artistes, tandis que les autres s’interrogent sur leur impact écologique ou le manque de réglementation spécifique autour de cette nouvelle technologie. </div>
    <div class="sticky">Les auteurs du rapport Hiscox Online Art Trade sont, eux, optimistes. </div>
    <div class="sticky">"Les NFT comblent une lacune qui existe depuis longtemps dans le monde de l’art : une nouvelle façon de collectionner l’art. Les NFT répondent au même besoin des collectionneurs de posséder quelque chose de recherché, mais cette fois sous une forme numérique plutôt que physique. Ce marché connaîtra des hauts et des bas, mais le monde de l’art devrait y prêter attention s’il veut rester pertinent à l’avenir".</div>
    <div class="sticky"><img id=coco src="1456113_72b94.gif" width= "100%" height="100%"></div>



</body>
</html>



</html>

Code Css 

html{
  width: 100%;
  height: auto;
}
#fixe{
  color: black;
  text-shadow: white 1px 0 5px;
  z-index: 2; 
}

div.sticky {
  
  position: -webkit-sticky;
  position: sticky;
  top: 0;
 margin: 0%;
 padding: 0%;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font: bold black;
  font-size: 40px;
  ;
}

#coco{
  opacity: 0;
}
#coco:hover{
  opacity: 100%;
  transition: 2s ease-in;

}

BASES DE DONNEES

Idées

Quelles couleurs servent a quel site dans les sites les plus visité , le bleu = reseaux sociaux, infos ; le jaune, cinema etc. puis voir la signification des couleurs, est ce que ça corespond ? voir le but, aligné les ref couleurs

Index des couleurs pour la communication ou quelque chose de bien plus precis Tous les sites où ca parle "d'espace vital" quelles couleurs sont repertoriées ? Le but est que ça rende une image graphique may be ? Genre des degradées de couleurs ou des fresques que j'insère dans des illustration that would communicate smthg, un mot ou une sensation.

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