Scratching the web

Exercice

En partant de votre histoire sur la page wikipedia, on va la raconter en CSS, en modifiant le layout, la mise en forme et les styles de la page original.

Pour cela on télécharge l'extension firefox wiki-scratching Il faut ensuite ajouter l'extension à firefox.

entrer about:debugging dans la bar d'adresse
clicker sur Ce Firefox
clicker sur Load Temporary Add-on
selectionner le fichier .zip de l'extension

Une foi ajouté sur firefox, en cliquant sur la pièce de puzzle en haut à droite on peut ouvrir le menu popup de l'extension qui permet de selectionner un pad.

Sur le pad de votre histoire, on la commente, et on peut commencer à remixer.

Tips

Sur base de votre histoire, réfléchissez a ce que vous voudriez faire sur la page. D'une seule phrase peut découler tout un système de forme d'HTML et de CSS. On est pas obligé de de tout traduire non plus, on se concentre sur ce qui fait sense pour nous. Exprimer votre histoire

par interpretation, en essayant de traduire les phrase de l'histoire en déclaration CSS.
par symbole, en jouant avec les métaphores.
par sensibilité, en changeant l'interaction avec la page, les liens, l'animation, le fond, etc
en transformer le layout (columns, float, flex, grid) et les espaces (margin ou padding)
en cachant des choses (display: none;)
en injectant du nouveau contenu grâce à :before ou :after
en superposer des couches (position: absolute; ou position: sticky;)
en changer les images par d'autre grâce à background: url('');, note les images doivent déjà être sur le web
en animant des parties (:hover)
en augmentant sont accessibilité
en volant des styles qui viennent d'un autre site