B2-B3 2021-2022 : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎Pages des étudiant.e.s)
(→‎Sessions)
 
(9 révisions intermédiaires par 3 utilisateurs non affichées)
Ligne 9 : Ligne 9 :
  
 
[[Julie]]
 
[[Julie]]
 +
 +
[[Utilisateur:Celia|Celia]]
 +
 +
[[Utilisateur: Capucine|Capucine]]
 +
 +
[[Utilisateur: Tom|Tom]]
  
 
= Sessions =
 
= Sessions =
 +
 +
== 29 mars 2022 ==
 +
=== Rappel structure html css js pour les B1 ===
 +
<syntaxhighlight lang="html">
 +
<!doctype html>
 +
<html>
 +
    <head>
 +
        <title>
 +
            Test page
 +
        </title>
 +
        <meta charset="utf-8">
 +
        <link href="styles.css" rel="stylesheet">
 +
 +
    </head>
 +
    <body>
 +
 
 +
        <audio controls>
 +
            <source src="track.mp3" type="audio/mp3">
 +
         
 +
          </audio>
 +
        <article>
 +
        <h1>Titre principal</h1>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
        <h2>Sous-titre</h2>
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
        </article>
 +
        <article>
 +
            <h1>Titre principal</h1>
 +
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
            <h2>Sous-titre</h2>
 +
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
        </article>
 +
        <script src="script.js"></script>
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
<syntaxhighlight lang="css">
 +
 +
body{
 +
   
 +
    font-family:Arial, Helvetica, sans-serif;
 +
 +
}
 +
article{
 +
    border:1px solid black;
 +
    margin-bottom:10px;
 +
    width:50%;
 +
    font-size:12px;
 +
}
 +
 +
p{
 +
    color:green;
 +
}
 +
</syntaxhighlight>
 +
 +
<syntaxhighlight lang="js">
 +
    //alert('bonjour');
 +
 +
    //1: attacher un événement sur un élément html
 +
    //quand on passe sur un paragraphe, la propriété css font-size devient 21px
 +
 +
    function agrandirTypo(){
 +
        //alert('ok');
 +
        paragraphe.style.fontSize = '21px';
 +
    }
 +
    function jouerArreterAudio(){
 +
        if(isPlaying == false){
 +
            audio.play();
 +
            isPlaying = true;
 +
        }
 +
        else{
 +
            audio.pause();
 +
            isPlaying = false;
 +
        }
 +
       
 +
    }
 +
 +
 +
    var paragraphe = document.querySelector('p');
 +
    paragraphe.addEventListener('mouseenter', agrandirTypo);
 +
 +
 +
    var audio = new Audio('track.mp3');
 +
 +
    var article = document.querySelector('article');
 +
    article.addEventListener('click', jouerArreterAudio);
 +
 +
    var isPlaying = false;
 +
 +
</syntaxhighlight>
 +
 +
== 15 février 2022 ==
 +
=== D'abord un rappel javascript ===
 +
<syntaxhighlight lang="js">
 +
 +
 +
 +
//viser le premier élément html .carre
 +
//faire un événement 'click' sur le premier élément html .carre
 +
//lier cet événement à une action
 +
//action: viser le deuxième élément html .carre
 +
//et sur cet élément, changer la propriété css background
 +
 +
function changerFond(){
 +
    var carre = document.querySelector('.carre:nth-child(2)');
 +
    console.log(carre);
 +
    carre.style.backgroundColor = "red";
 +
 +
}
 +
 +
var carre = document.querySelector('.carre');
 +
 +
//keypress, mouseover, mouseenter, mouseleave,
 +
//mouseup, mousedown, scroll, resize, click, (dbleclick), submit, focus
 +
carre.addEventListener('click', changerFond);
 +
 +
 +
 +
//faire un bloc rouge qui, à chaque fois qu'on clique dessus avance de 10px à droite et 10 px en bas
 +
</syntaxhighlight>
 +
 +
<syntaxhighlight lang="js">
 +
//faire un bloc rouge qui, à chaque fois qu'on clique dessus avance de 10px à droite et 10 px en bas
 +
 +
function avance(){
 +
    marcheur.style.marginLeft = position+"px";
 +
    marcheur.style.marginTop = position+"px";
 +
 +
    position = position+10;
 +
}
 +
 +
var position = 10;
 +
 +
var marcheur = document.querySelector('.marcheur');
 +
marcheur.addEventListener('click', avance);
 +
 +
 +
 +
</syntaxhighlight>
 +
 +
== 03 décembre 2021 ==
 +
=== Énoncé exercice de fin de quadri ===
 +
# Choisir un texte en rapport avec le numérique. Cela peut être un article, une nouvelle de fiction, une poésie, etc. Une fois le texte choisi, le copier / coller dans sa page personnelle du wiki.
 +
# Imaginer un scénario de navigation, un principe d'interaction au sein d'une page web qui influe sur la lecture de ce texte. Si vous donnez ce texte à lire dans une page web, quelles interactions apporteraient du sens, créeraient une expérience particulière à la lecture de ce texte. Décrire ce scénario de navigation et le mettre dans le wiki (un schéma convient aussi). Mots clés: obscurcir, agrandir, diminuer, flouter, découper, narration interactive, ...
 +
# Réaliser cette page.
 +
# La mettre en ligne et mettre le lien dans le wiki.
 +
 +
 +
  
 
== 15 octobre 2021 ==
 
== 15 octobre 2021 ==

Version actuelle datée du 29 mars 2022 à 16:35

Pages des étudiant.e.s

Camille

Mondher

La page d'Audrey

Oualid

Julie

Celia

Capucine

Tom

Sessions

29 mars 2022

Rappel structure html css js pour les B1

<!doctype html>
<html>
    <head>
        <title>
            Test page
        </title>
        <meta charset="utf-8">
        <link href="styles.css" rel="stylesheet">

    </head>
    <body>
   
        <audio controls>
            <source src="track.mp3" type="audio/mp3">
           
          </audio> 
        <article>
        <h1>Titre principal</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Sous-titre</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
        <article>
            <h1>Titre principal</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <h2>Sous-titre</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
        <script src="script.js"></script>
    </body>
</html>

body{
    
    font-family:Arial, Helvetica, sans-serif;

}
article{
    border:1px solid black;
    margin-bottom:10px;
    width:50%;
    font-size:12px;
}

p{
    color:green;
}

    //alert('bonjour');

    //1: attacher un événement sur un élément html
    //quand on passe sur un paragraphe, la propriété css font-size devient 21px

    function agrandirTypo(){
        //alert('ok');
        paragraphe.style.fontSize = '21px';
    }
    function jouerArreterAudio(){
        if(isPlaying == false){
            audio.play();
            isPlaying = true;
        }
        else{
            audio.pause();
            isPlaying = false;
        }
        
    }


    var paragraphe = document.querySelector('p');
    paragraphe.addEventListener('mouseenter', agrandirTypo);


    var audio = new Audio('track.mp3');

    var article = document.querySelector('article');
    article.addEventListener('click', jouerArreterAudio);

    var isPlaying = false;

15 février 2022

D'abord un rappel javascript

//viser le premier élément html .carre
//faire un événement 'click' sur le premier élément html .carre
//lier cet événement à une action
//action: viser le deuxième élément html .carre
//et sur cet élément, changer la propriété css background

function changerFond(){
    var carre = document.querySelector('.carre:nth-child(2)');
    console.log(carre);
    carre.style.backgroundColor = "red";

}

var carre = document.querySelector('.carre');

//keypress, mouseover, mouseenter, mouseleave, 
//mouseup, mousedown, scroll, resize, click, (dbleclick), submit, focus
carre.addEventListener('click', changerFond);



//faire un bloc rouge qui, à chaque fois qu'on clique dessus avance de 10px à droite et 10 px en bas

//faire un bloc rouge qui, à chaque fois qu'on clique dessus avance de 10px à droite et 10 px en bas

function avance(){
    marcheur.style.marginLeft = position+"px";
    marcheur.style.marginTop = position+"px";

    position = position+10;
}

var position = 10;

var marcheur = document.querySelector('.marcheur');
marcheur.addEventListener('click', avance);

03 décembre 2021

Énoncé exercice de fin de quadri

  1. Choisir un texte en rapport avec le numérique. Cela peut être un article, une nouvelle de fiction, une poésie, etc. Une fois le texte choisi, le copier / coller dans sa page personnelle du wiki.
  2. Imaginer un scénario de navigation, un principe d'interaction au sein d'une page web qui influe sur la lecture de ce texte. Si vous donnez ce texte à lire dans une page web, quelles interactions apporteraient du sens, créeraient une expérience particulière à la lecture de ce texte. Décrire ce scénario de navigation et le mettre dans le wiki (un schéma convient aussi). Mots clés: obscurcir, agrandir, diminuer, flouter, découper, narration interactive, ...
  3. Réaliser cette page.
  4. La mettre en ligne et mettre le lien dans le wiki.



15 octobre 2021

Ressources

Deux paragraphes par ligne

Tableau d'images en 3 colonnes

Animation d'un bloc en js

Positionnement scrolls

8 octobre 2021

Début de développement de prototypes de pages web.

Ressources

Structure html/css/js

1er octobre 2021

Focus sur un élément d'interface très particulier par sa longévité (il existe depuis les années 70), son rapport à l'écran (on déplace du contenu à l'intérieur d'un cadre ou on déplace un cadre par rapport à un contenu); le scroll. Lancement d'un premier exercice autour du scroll; comment détourner / utiliser le scroll au sein d'une expérimentation sur une page web.

Ressources

https://scrollbars.matoseb.com/

https://www.theverge.com/2019/11/1/20943552/scroll-bar-visual-history-30-years

https://www.youtube.com/watch?v=NqKyHEJe9_w (smalltalk)

Structure html/css

24 septembre 2021

Introduction générale au cours et au sujet de ce début d'année. Nous abordons le web et les interfaces numériques par le biais d'un élément très spécifique: Le scroll. Rappel/introduction sur un langage de structuration de données fondamental; l'HTML, et sur un langage de mise en forme; le CSS.

Ressources

https://www.newrafael.com/websites/

https://evasive.tech/

http://simon-bouvier.xyz/projets/multiple-stories/index.html

Structure de base html

Récupérée de « https://designnumerique.be/w/index.php?title=B2-B3_2021-2022&oldid=3678 »