B2-B3 2022-2023
Révision datée du 7 octobre 2022 à 10:03 par Lionel (discussion | contributions) (→6 octobre 2022: lecture contrainte; sprint)
Sommaire
Pages des étudiant.e.s
Sessions
6 octobre 2022: lecture contrainte; sprint
- L'objectif est de réaliser en atelier le plus d'expériences possibles, de les mettre en ligne et de les éprouver.
- Méthode : écriture des énoncés (exemple: les mots du texte ne s'affichent qu'à proximité de la souris), décomposition du problème en petites parties à résoudre, résolution de chaque partie et assemblage.
- Projet parallèle: enquête sur un dispositif numérique contraignant.
Énoncés
- les mots du texte ne s'affichent qu'à proximité de la souris
- faire appararaitre une fenetre modale après une période d'inactivité
- le contenu devient lisible uniquement lorsque la fenêtre est à une certaine taille
- utiliser checkbox ou button pour faire apparaitre ou disparaitre
- cliquer sur une ligne du texte pour qu'elle s'affiche
- images apparaissent et cachent le texte au passage de la souris
- Le texte est lisible uniquement lors d'une certaine plage horraire
- Le texte est caché, il faut deviner la lettre suivante pour l'afficher
- Au passage de la souris le texte devient codé (les lettres changent) => https://pual.cool/
- Le texte s'insole quand il est exposé dans la fenêtre
- pour lire la suite du texte il faut réaliser des input (combinaisons de touches) spécifique
- le texte est caché dans le code source
Résolution du premier énoncé:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Énoncé 01</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<dialog>
<h1>COUCOU</h1>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
<article>
<p>Let me start by saying that beautiful websites come in all sizes and page weights. I love big websites packed with images. I love high-resolution video. I love sprawling Javascript experiments or well-designed web apps.</p>
<p>This talk isn't about any of those. It's about mostly-text sites that, for unfathomable reasons, are growing bigger with every passing year.</p>
<p>While I'll be using examples to keep the talk from getting too abstract, I’m not here to shame anyone, except some companies (Medium) that should know better and are intentionally breaking the web. </p>
</article>
</body>
</html>
style.css
html, body{
width:100%;
height:100%;
}
dialog{
width:80vw;
height:80vh;
}
dialog::backdrop{
background:rgba(255, 0, 0, 0.25);
}
script.js
//faire appararaitre une fenetre modale après une période d'inactivité
//fenêtre modale = rectangle qu'il faut fermer et qui réapparait toutes les x secondes
//intervale de temps, x secondes
//-> faire apparaitre la fenêtre modale
//lorsque l'utilisateur clique sur la fenêtre, elle se ferme -> ok
function showModal(){
dialog.showModal();
}
function launchTimer(){
setTimeout(showModal, 3000);
}
const dialog = document.querySelector('dialog');
dialog.addEventListener('close', launchTimer);
launchTimer();
//setInterval(showModal, 3000);
30 septembre 2022: lecture contrainte
- Lecture à plusieurs sur la page http://work.designnumerique.be/2022-2023/01-contraindre/martin/001/
- Discussion collective sur l'article lu + effet de l'interface sur la lecture
23 septembre 2022: Présentation du cours
- Le design numérique à l'ERG, contexte d'existence de l'orientation
- Ce qui nous occupe : pratiques du design, usages, systèmes, protocoles, interfaces, outils, ...
- Structure du cours : trois projets, place de la documentation, outils de publication.
- Le web et ses technologies au centre du cours en B2-B3.
- La place que l'on donne à la technique et à son apprentissage. Discussion collective.
- Présentation du premier projet : empêcher, contraindre, designer.
