Voir la source de B2-B3 2021-2022

= Pages des étudiant.e.s =
[[ Camille]]

[[Mondher]]

[[La page d'Audrey]]

[[Oualid]]

[[Julie]]

[[Utilisateur:Celia|Celia]]

[[Utilisateur: Capucine|Capucine]]

= Sessions =

== 15 février 2021 ==
=== 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 ==

===Ressources===
[https://pratiquesnumeriques.be/b2b3/20211015layout.zip Deux paragraphes par ligne]

[https://pratiquesnumeriques.be/b2b3/20211015layout2-imgs.zip Tableau d'images en 3 colonnes]

[https://pratiquesnumeriques.be/b2b3/20211015animate.zip Animation d'un bloc en js]

[https://pratiquesnumeriques.be/b2b3/20211015scrolls3.zip Positionnement scrolls]

== 8 octobre 2021 ==

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

=== Ressources ===

[http://designnumerique.be/b2b3/20211008scrolljs.zip 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)

[http://designnumerique.be/b2b3/20211008scroll2.zip 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

[http://designnumerique.be/b2b3/scroll.zip Structure de base html]