Mathieu Champion

Portfolio

Site
Note intention

Céleste Vidal-Ayrinhac

Game Hover

Site
Note intention

Note d'intention

Céleste Vidal-Ayrinhac

« Game Hover »

unités relatives
css grid
css animation
boutons
z-index
cursor

Comment coder un jeu sans aucun élement de Java Script?

Le but du jeu est de faire apparaître le plus de balles possibles, qui sont empilées les unes sur les autres grâce au z-index de CSS. 9 balles se superposent et ont 9 versions différentes d'animations en :hover. Ce petit challenge permet d'expliquer cette dernière notion : la pseudo-classe :hover, qui permet d'obtenir une page interactive. Le passage de la souris génère des transformations : les transitions CSS permettent d'animer les couleurs et les emplacements. Pour ces derniers, la propriété transform (scale, rotate et translate) ainsi qu'une transform-origin différente pour chaque balle permettait une infinité de possibilités.

La limite de ce jeu avec le :hover reste le fait que l'animation s'arrête dès lors que la souris ne survole plus l'élément ; je me suis servie de cette contrainte pour challenger l'utilisateur.ice : il lui faut survoler le maximum de balles dans le temps imparti de la transition retour de chaque balle. L'animation du fond est créée par un emboîtement d'un élément à l'intérieur de lui-même.

Le :hover permet d'activer sa transformation et les unités relatives (en pourcentage de la <div> parent) permettent un emboîtement multiple en peu de lignes de code.

Cyrielle Pauly

Étoiles

Site
Note intention

Note d'intention

Cyrielle Pauly

Étoiles

CSS Grid
Unités relatives (web responsive)
CSS Animation
CSS Print

CSS Grid permet de positionner les éléments d’une page web selon une grille préétablie : images, zones de textes, formes générées par CSS. La grille se définit en termes de rangs (rows) et colonnes (columns), une sorte d’échiquier dont l’on détermine le nombre de cases, leur taille, et l’espace (gap) ou absence d’espace entre chaque case de la grille.

Je me suis intéressée à CSS Grid pour composer ma page et jouer sur la superposition d’éléments fixes, d’éléments hors et dans la grille, qui s’entrechoquent en scrollant la page. Le défilement vertical du scroll offre une continuité séduisante dans son aspect narratif, où plusieurs temporalités cohabitent : le temps de la lecture du texte, la durée des animations, le temps de faire défiler la page...

Mon site Etoiles est une sorte de carte stellaire fictive présentant le poème éponyme de Théophile Gautier extrait du recueil « La Comédie de la Mort » publié en 1838. Le lecteur découvre ce texte sur un fond étoilé ; des constellations et des planètes jalonnent la page, de manière à ponctuer visuellement le texte. Le scroll crée des superpositions entre un élément pictural fixe, à savoir le titre, et les divers éléments graphiques de la page que sont les strophes et les formes. Ainsi, nous pouvons percevoir différents plans sur lesquels se déploie la page web. J’ai décalé certains éléments pour que leur placement paraisse plus aléatoire et naturel. Des animations mettent en mouvement mes planètes.

La version print consiste en un A4 recto-verso proposant une pagination du site, avec d’un côté le titre et le texte du poème, et de l’autre une composition graphique créée avec le code. Elle pourrait donner lieu à un mini-dépliant (3 plis), imprimé en riso en 3 couleurs (rouge, jaune, bleu) pour créer une vibration par la superposition de couleurs ou avec une couleur métallique/brillante que permet la matérialité du support.

Lucie Lozano

En glissant, il se métamorphose

Site
Note intention

Note d'intention

Lucie Lozano

En glissant, il se métamorphose

Au début, j’expérimente des propriétés sur des images, sans vraiment savoir comment elles apparaitront. Je découvre le mix-blend-mode, propriété CSS permettant de mélanger deux éléments positionnés l’un sur l’autre. Par exemple, une image et un arrière plan coloré (background-color). Je recharge la page, spectatrice des effets que je cherche à comprendre. En additionnant des variantes colorées en arrière-plan par la propriété background-color, à des filtres d’ombre (drop-shadow(), de flou (blur()) et des calques de fusion (mix-blend-mode), je m’aperçois que mes images peuvent radicalement changer.

Je suis enthousiasmée par ces effets de transparence et d’altération des couleurs, qui amènent une complexité visuelle facilement. Je tâtonne parfois mais je répète la même image en variant ses propriétés pour constituer un répertoire de variations visuelles. L’organisation en grille (propriété grid-template) me permet de les disposer les unes par rapport aux autres, pour pouvoir les comparer, créant des compositions rythmées.

Le header (contenu introductif d’un site, barre horizontale au sommet de la page), réagit différemment avec chacun de ces modes de fusion. Je l’utilise en position: fixed, comme un papier calque coloré ou un tissu légèrement transparent que je viendrais appliquer devant mes yeux pour regarder autour de moi. Les images du corps de ma page, contenues dans le body, défilent en passant derrière cet élément fixe, qui les fait apparaitre autrement. Certaines images en passant sous cette barre horizontale s’estompent tandis que d’autres sont découvertes, ce qui perturbe la perception des plans. Je vois ainsi le header comme un révélateur de formes cachées.

Cette page propose aux personnes face à l’écran d’explorer un environnement hostile, où l’on peut s’enfoncer en scrollant dans les profondeurs de la terre. On assiste aux explosions et mutation d’une figurine de Kaiju en plastique, sûrement Godzilla, qui, selon les versions, est une bête étrange liée aux radiations dues à des essais nucléaires. Dans les descriptions que j’en ai lu, sa taille varie (de 50 à 100 mètres de haut) et son poids aussi (entre 20000 et 90000 tonnes). Pour renforcer l’effet narratif, certaines images s’activent avec la règle @keyframes (permettant de définir les étapes d’une séquence d’animation). Les propriétés utilisées confèrent à Godzilla des pouvoirs de radiations, d’invisibilité ou de déformation.

La nature de celui-ci, changeante, variant de taille et de poids, fait écho au système de création d’une animation, qui peut-être définie par plusieurs stades de transitions (from {} to {} | 0% {} 50% {} 100{}). J’ajoute des classes :hover, permettant de faire réagir un élément au moment où la souris le survole. Je m’en sers aussi comme d’un bouton d’activation d’animation en définissant un déplacement ou un changement d’opacité sur un élément lorsque la souris en survole un autre (.a:hover ~ .b {}). La personne aux commandes de la souris peut donc agir sur Godzilla, assistant à ses métamorphoses.

Timothée Casilli

Zabriskie Point

Site
Note intention

Note d'intention

Timothée Casilli

Zabriskie Point

Pour cette proposition autour des formes du web, je me suis intéressé à la notion de web responsive. Le web responsive permet d’adapter le contenu de sa page web à la taille de la fenêtre de son navigateur, depuis sa feuille de style CSS. Par exemple la valeur vw permet de donner une valeur de largeur à un élément qui s’adaptera proportionnellement à la taille de la fenêtre. Il est également possible d’appliquer des valeurs différentes dans son CSS, variants selon le nombre de pixels de la page grâce aux media queries.

A partir de ce bagage technique, je me suis interrogé sur la manière dont on pourrait montrer des images sur une page web, comment se comportent-t-elles selon la taille de leur support visuel. Je me suis intéressé à l’image cinématographique, et comment je pourrais la mettre en abime. Je me suis tourné vers des artistes s’étant déjà prêtés à l’exercice, à l’image des fragments de pellicules de Morgan Fischer dans son film « Standard Gauge » datant de 1984. Ces morceaux de films, glanés sur différents plateau de tournage, Fischer nous les donne à voir sur un banc titre. Il les fait défiler du bout de ses doigts, comme pour créer l’illusion d’une animation, habituellement opéré par le cinématographe. Il y aussi les planches contacts de William Klein, qui part d’une vision globale de ses films sur la table lumineuse, pour zoomer image après image et redessiner la narration d’une photo dans sa temporalité, avant et après l’évènement photographique.

Pour chacune de ces propositions montrant des images à l’écran, j’ai pensé une traduction en web: partant de l’étroite pellicule qu’il est possible de faire défiler à l’aide du scroll, en passant par la planche contact qui nous donne une vision globale des images, et enfin terminer avec la projection sur le grand écran du cinéma.

William Klein, Contacts, 2004

Morgan Fischer, Standard Gange, 1984

Alice Dezert

Brûlent-ils ?

Site
Note intention

Note d'intention

Alice Dezert

Brûlent-ils ?

CSS print

La technique CSS print permet de visualiser dans un navigateur web un code HTML et CSS dont le contenu est automatiquement paginé via la bibliothèque Paged.js, et de pouvoir l'enregistrer en PDF prêt à être imprimé. Cette technique permet notamment de voir comment les fichiers PDF seront lus dans les navigateurs et ainsi de les publier directement sur le web. Un autre avantage est de pouvoir utiliser l'inspecteur de certains navigateurs afin de mieux cibler d'éventuels problèmes dans le code.

Pour réaliser ma page web, je suis partie d'un recueil de nouvelles écrit par des étudiants dont j'ai été chargée de réaliser la maquette et l'impression, mais dont le projet n'a pas pu aboutir en raison du confinement. J'ai commencé par reproduire à l'identique une mise en page commencée sur InDesign, puis j'ai ajouté des nouvelles avec les attributs typographiques donnés par les auteurs et autrices (dialogues, citations, paragraphes décalés, italiques, etc) et mis en page leurs couvertures avec des illustrations. Le livre est organisé en "boîtes de chapitres" qui contiennent à chaque fois la couverture et la nouvelle, permettant de changer facilement l'ordre de lecture des nouvelles et de gérer les sauts de page avant chacune d'entre elles.

Dain Kim

Covid World

Site
Note intention

Charlotte Thouvenin

Conseils d'entretien pour plantes d'intérieur

Site
Note intention

Note d'intention

Charlotte Thouvenin

Conseils d'entretien pour plantes d'intérieur

Pour ma page web, je voulais créer une page de conseils d'entretien pour plantes d'intérieur pour débutants. Je voulais que ce soit organisé et clair, et que l'utilisateur puisse trouver les informations qu'il cherche facilement, sans avoir à passer plusieurs paragraphes avant de trouver celui qui l'intéresse. Je souhaitais aussi avoir des repères visuels, grâce à des images des plantes pour lesquelles on peut trouver des conseils. Dès le départ j'ai su que j'utiliserais grid pour organiser ma page, avec des cases carrées, afin d'avoir une image de plante par case, et que ce soit ordonné et lisible.

J'ai décidé de faire une grille fluide, afin que l'organisation de mes cases reste la même lorsqu'on modifie la taille de la fênetre, tout en adaptant sa taille. Je voulais également faire apparaître les conseils sous les images de plantes en passant simplement la souris, j'ai donc utilisé l'animation hover. Je souhaitais au départ que les conseils soient sous forme de texte, et utiliser la fonction scroll pour que l'entièreté du texte rentre dans mes cases, mais n'arrivant pas au résultat que j'attendais, j'ai décidé de mettre les conseils sous forme d'images également. Après avoir créé ma grille et y avoir inséré mes images de plantes et de conseils dans les cases, j'ai souhaité complexifier ma page.

J'ai d'abord rajouté un lien vers une page externe, puis j'ai créé des pages internes, afin d'en avoir une pour chaque plante représentée sur ma page principale, et pouvoir détailler les conseils mis en image. J'ai à nouveau utilisé grid pour mettre en page mes textes, en imposant une hauteur maximale et en utilisant scroll, afin de garder sur chaque page exactement la même disposition, peu importe la longueur du texte.

Pauline Aubry

Titre

Site
Note intention

Note d'intention

Pauline Aubry

Titre

Dans la première partie de ma page web, je raconte ma découverte du code. Ensuite, je mets en application les bases intégrées. J’ai souhaité réaliser des petits exercices/jeux simples pour enfant :

Dans le premier exercice, je me suis servie de l’élément HTML <map> qui est utilisé avec des éléments <area> afin de définir une image divisée en régions. L’élément <map> inclue un attribut « name » qui fournit un nom afin que l’image cliquable puisse être référencée. En cliquant sur un pays où « l’area » a été délimitée, un dessin du pays réalisé apparait sur un autre lien. Le format des dessins correspond au format d’un écran d’ordinateur.

Pour le second exercice, j’ai associé le même élément <map> avec le positionnement relatif de mes images ainsi que CSS Flexbox pour construire l’immeuble. L’enfant doit trouver les images cliquables qui lui ouvriront une nouvelle fenêtre sur des dessins d’intérieurs.

Le troisième exercice est une illusion d’optique réalisée avec CSS-Flexbox.

Enfin, je propose un labyrinthe effectué à partir de CSS-grid. Ma grille est un carré noir constitué de 22 « columns » et « rows », chaque cellule mesure 1fr. Ligne par ligne j’ai positionné mes cases bleues et ma pépite en utilisant, selon l’espace qu’occupait chaque case, <grid-column>, <grid-row>, <gridcolumn start>, <grid-column-end>.

Valentin Degnieau

Divine Comédie

Site
Note intention

Note d'intention

Valentin Degnieau

Divine Comédie

css grid
css animation
checkbox(button)

Tout d’abord j’ai voulu exploiter et étudier la question du Web Responsive et de ses possibilités narratives. L’idée derrière mon site se base sur les 9 cercles de l’enfer tel que décrit dans la divine comédie de Dante Alighieri ainsi que sur la carte de l’enfer réalisé par Sandro Botticelli basé sur la dite Divine Comédie. Cette « carte » prenant la forme d’un entonnoir vers se resserrant vers les derniers cercles des enfers. Le web responsive m’a donc permit de recréer cet entonnoir à travers la taille de la fenêtre web grâce aux médias queries. Plus la fenêtre va être réduite plus l’on descend profondément dans les enfers.

L’idée derrière cela était de pouvoir réaliser une forme de carte interactive et visuelle, en essayant d’explorer les possibilités narratives du web responsive et toutes les notions qui lui sont reliés. Il y a donc une volonté d’exploration visuelle à travers le css, les différents effets possibles, à la fois visuel et textuel. L’utilisation de son, de vidéo, de gif afin de servir la narration. L’intégration de javascript et son utilisation qui permet de renforcer le lien entre le site et le spectateur à travers l’utilisation de la webcam. La réalisation de ce site m’a aidé à explorer ne serait-ce qu’une petite partie des possibilités du web et de sa flexibilité.

Hippolyte Thillard

Hippolyte Thillard.com

Site
Note intention

Note d'intention

Hippolyte Thillard

Hippolyte Thillard.com

Bootstrap
CSS grid
HTML

Je créé la page principale, par convention appelée index.html qui est la première page du site, dessus j'ai fait une animation : la partie droite change de couleur assez rapidement de manière infinie, c'est l'animation 1 (il y en a 3), la deuxième, c'est ton nom qui s'élargie quand on le survole, si on clique dessus ça renvoie à la première page, ensuite sur chaque page il y a la video qui s'affiche, j'ai modifé le code pour que la vidéo soit responsive (elle s'adapte à la largeur de l'écran pour faire toujours la bonne taille), et sur les pages "en création", j'ai fait une animation, pour la faire j'ai utilisé des balises div vide pour lesquelles j'affiche seulement la bordure droite et je les fais bougé avec une animation pluie et pluie2 que j'ai créé dans le fichier style.css. J'ai utilisé aussi Key frames pour réalisé une animation de couleur évolutive. J'ai rendu le site plus adaptable sur mobile grâce à Boostrap. et j'ai changé le curseurr de la souris sur la partie droite.

Thi Thanh Hang Nguyen

Titre

Site

Enseignantes

Intervenants

Programme

6 novembre

Web responsive

13 novembre & 20 novembre

Positionnement et grille

27 novembre

Fontes variables

4 décembre

Animation interactive

11 décembre

Flux, page (CSS print)

14 – 18 décembre

Workshop final

Travaux des étudiant·es

Mathieu Champion

Portfolio

Céleste Vidal-Ayrinhac

Game Hover

Cyrielle Pauly

Étoiles

Lucie Lozano

En glissant, il se métamorphose

Timothée Casilli

Zabriskie Point

Alice Dezert

Brûlent-ils ?

Dain Kim

Covid World

Charlotte Thouvenin

Conseils d'entretien pour plantes d'intérieur

Pauline Aubry

Titre

Valentin Degnieau

Divine Comédie

Hippolyte Thillard

Hippolyte Thillard.com

Thi Thanh Hang Nguyen

Titre