Utilisateur:Celia

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

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.

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.

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