Time

Lieu de l’action

Action observable

Description de l’activité par le sujet

00:00:00

navigateur web

Saisie « svg filter duotone » dans la barre de recherche

Tu savais déjà que ça existait ?

Oui, parce que je fais de la veille sur ça et que je vois passer des choses, notamment un tutoriel qui datait de 2018 qui était sur comment faire l'effet Spotify sur les images qui était tellement à la modeà l'époque. (…) SVG filter, c'était quelque chose que javais découvert il y a deux ans avant peut être ce travail qu'on est en train de commenter. C'est le fait de pouvoir appliquer une bichromie sur des images.

00:00:12

navigateur web

Clique sur le lien « Duotone SVG Filters – Code Pen » dans la page de résultat et ouvre une page web dans un nouvel onglet

  

00:00:12

navigateur web

Regarde la page web, scroll dans les différentes zones de la page

 

Elle a mis des commentaires, ça m’aide un peu à comprendre à quoi servent les différentes parties du code .

00:00:35

navigateur web

Change certaines valeurs dans la zone « HTML » du codePen

Je vois comment elle a fait, je bidouille dans son code pen par moment pour comprendre quelle valeur à quelle incidence sur un exemple qui fonctionne.

Tu as besoin de modifier des valeurs pour comprendre le fonctionnement ?

Oui, limite, j'essaie de casser la chose pour voir jusqu'où je peux aller. Voilà, je fais un truc, je vois que ça fait, je vois le résultat: je comprends que ça agit sur la luminosité, sur la couleur, sur les contrastes, ce genre de chose. Ça m'évite de lire la doc d'une certaine manière

00:01:26

navigateur web

Clique sur le lien « Spotify’s Year in Music » dans la page web du codePen, cela ouvre un nouvel onglet

 

00:01:27

navigateur web

Scroll dans la page web su site css-tricks.com (Titre de la page : « Using SV to Create a Duotone Effets on Images »)

C’est l’article qui est lié au code, qui donne plus de détail. Je lis un peu.

00:02:03

navigateur web

Reviens sur la page du codePen (clique sur l’onglet)

  

00:02:16

navigateur web

Sélectionne les lignes de code 13 à 27 dans la zone « HTML » (copie)

  

00:02:25

Éditeur de texte / base.html

Clique sur différents onglets dans l’éditeur de texte

Puis sélectionne le fichier `base.html` dans la liste des fichier (zone à gauche dans l’éditeur)

 Je me mets sur la bonne feuille de  style

00:02:38

Éditeur de texte / base.html

Ajoute du code le la ligne 30 à 45

Je colle.

00:02:55

Éditeur de texte / base.html

Ligne 30, ajoute `class=’’visibility-hidden’’` avant le dernier caractère

Je rajoute une classe `visibility-hidden` pour que le code  existe dans le DOM mais qu'il ne s'affiche pas.

00:03:08

Éditeur de texte / base.html

Sur la même ligne, supprime `class=dutone-filters`

  

00:03:14

Éditeur de texte / base.html

Ligne 31, modifie `id=duotone-darkblue` par `id=duotone`

Je suis en train de  renomme mon filtre, parce que c'est ma manière de l'appeler en fait. Dans mon code CSS, je vais devoir appeler mon filtre `id duotone`, donc je  suis en train de le renommer. (Comme ça je créé un raccourci pour appeler mon morceau de code après.)

00:03:38

Navigateur web /

Outil d’inspections

Recharge la page web « localhost:8080 » (le rapport d’activité)

Clique sur un élément image dans le DOM des outils d’inspections

Dans les outils d’inspection, ajoute sur les règles CSS de l’élément `filter ; url(#duotone)`

C'est une image que je détourne en  quelque sorte parce que c'est du svg mais qui n'affiche rien. Dans cette image, je peux reprendre un des filtres de l'image et le réappliquer  ailleurs avec juste ce bout de code, ce raccourci.

00:03:40

Navigateur web

Donc là, le filtre s'applique ?

Très bleu, trop bleu.

Trop bleu pour toi ?

Il est pas dans la charte graphique escomptée. La charte graphique est très succinte mais ça va de l'anthracite au vert turquoise.

Donc là, c'est trop bleu par rapport à ce qui est prévu dans la charte graphique ?

C'est pas que c'est trop bleu, c'est que pour le moment, le code n'a pas encore était adapté à la charte graphique. Il fonctionne en soi - à ce moment là je suis très content - mais il me reste encore une partie du travail qui est de modifier les couleurs qui s'adaptent à la charte graphique.

00:03:40

Navigateur web

Reviens sur la page web du code Pen

Scrolle dans la zone HTML

Survole (over) la deuxième image (rouge et bleu)

 

00:04:38

Navigateur web

Sélectionne les lignes de code 30 à 42 dans la zone « HTML » (copie)

  

00:05:04

Éditeur de texte / base.html

Remplace les lignes 32 à 43 par le nouveau bout de code copié

On voit que tu prends finalement un autre bout du code là. Pourquoi ?

Il y avait plusieurs exemple de couleurs dans le code pen. J'en copie un autre parce que j'avais un doute sur le fait que sur l'exemple noir et bleu le noir puisse être modifiable et donc j'ai pris le filtre bleu à rouge parce que visuellement je comprenais qu'on pouvait introduire la couleur bleu et introduire la couleur rouge

00:05:36

Navigateur web

Recharge la page web « localhost:8080 » (le rapport d’activité)

  

00:05:38

Éditeur de texte /

_article.scss

Clique sur l’onglet `_article.scss` et affiche le fichier

  

00:05:57

Éditeur de texte /  _article.scss

Ajoute 3 lignes de code (15 à 17)

J’applique le filtre à toutes les images du rapport, avec le raccourci.

00:06:20

Navigateur web

Recherche web « nunjucks hex to rgb »

Scroll dans la page des résultats

Là je me suis dit qu'il restait plus qu'à isoler dans le bout de code où se situe la couleur bleu et où se situe la couleur rouge et à partir de là je pourrais atteindre l'effet escompté.

Comment tu fais pour l'isoler ?

Je teste au pif. Là, j'essaie de découvrir si c'est une valeur hexadécimal que je vais devoir mettre ou si c'est une valeur rgb. C'est la recherche web que je suis en train de faire En même temps, ce qui est un peu confusant c'est que la matrice fonctionne avec des zéro et des uns, donc c'est ni une valeur hexadécimale, ni une valeur RGB. Ha... apparement je suis en train de faire une recherche pour convertir mes valeurs hexadecimales en RGB.

Pouquoi ?

Parce que les valeurs décimales c'est ce que j'ai dans ma charte graphique et partout ailleurs dans mon code.

Un de tes buts en utilisant des variables, c'est que ça puisse être facilement changé par toi ou par d'autres, sans revenir dans le code complexe ?

Exactement, c'est plus être dans cet espace varible.json qui est un espace partagé entre le commenditaire et moi

00:07:10

Navigateur web

Reviens sur la page web du site css-tricks.com (Titre de la page : « Using SV to Create a Duotone Effets on Images »)

00:07:22

Navigateur web

Reviens sur la page du code Pen

Surligne des parties dans les commentaires (lit?)

00:08:04

Navigateur web

Recherche web « nunjucks hex »

00:08:30

Navigateur web

Recharge la page web « localhost:8080 » (le rapport d’activité)

Dans les outils d’inspection, sélectionne la valeur hexadecimal (`#63bfc2`) de la valeur appelée `--color1`

  

00:08:34

Navigateur web

Recherche web « #63bfc2 »

Dans les résultats du navigateur web, google affiche une palette de couleur

Comme tu vois dans  Google j'ai fait une recherche et j'ai directement un petit outil sur  Google, donc un outil très facilement accessible pour trouver une  couleur et l'avoir en rgb.

00:08:45

Éditeur de texte / _variable.json

dans le fichier `_variable.json`, Remplace les valeurs de la ligne 7

Avant

Après

Note : copie le format hexadecimal dans l’outil google et récupère le format RGB pour son code

Je convertis mes valeurs au formats hexa vers le format  RGB, qui est trois valeurs de zéro à 255. (…) C'est-à-dire que là, on a un fichier json, qui va reprendre les variables de la publicaiton: le nom, le titre du rapport du  document, le logo principal à aller chercher, des trucs comme les  adresses et tout. Je mélange aussi une information qui est `colors` qui  contient les couleurs de lla charte graphique. Qui pourrait être un  élément purement fonctionnael aussi, que le commanditaire pourrait  utiliser lui-même; qu'il pourrait modifier s'il y a un changement dans  la charte graphique ou un fork de ce rapport d'activité. J'essaie de  faire une passerelle entre le contenu - des choses qui peuvent être  modifier par le commenditaire - et mon code en fait. (…) Je  fais cette distinction entre ce qui est éditable par le commenditaire et ce qui éditable par le designer.

00:10:50

Éditeur de texte / base.html

Dans le fichier `base.html`, modifie les lignes 16 à 19 en ajoutant `rgb(...)`autour des variables déjà présentes

Avant

Après

Dans le template HTML, Je suis en train d'appeler les couleurs que j'ai renseignées dans  variable.json et je suis en tain de les placer comme des variables CSS.  Déjà là on est dans une balise style et en plus je les mets à la racine, c'est à dire que ça puisse être accessible sur l'ensemble du document.  Couleur 1 ce serait une certaine variable rgb. J'appele les trois valeurs RGB de la couleur en même temps.

00:13:05

Éditeur de texte / base.html

Dans le fichier `base.html`, modifie les lignes 43 à 45 (transforme des chiffres en variables et calculs)

Avant

Après

Tu me décris ici ce que tu es en train de faire ?

Si on analyse un peu le bout de code, je travaille de la ligne 40 à 42, sur des fonctions qui s'appellent `fontR` `fontG` `fontB` et A. Je suis en train de modifier les couleurs RGB, rouge, vert; bleu et le A c'est le alpha donc c'est la transparence qui ne va pas être modifiée. Ce que je suis en train de faire, c'est que je prends les couleurs que j'ai renseignées dans mon fichier json. Qu'on s'entende bien, les valeurs que j'ai renseignées dans mon fichier json elles sont elles-même divisées en trois valeurs, c'est-à-dire R, G, B elles aussi. Un couleur qui est composée de trois valeurs. Ici je les place, la première couleur, couleur0, sur les trois lignes, et je replace la première valeur de cette première couleur, la deuxième valeur de cette première couleur et la troisième valeur de cette première couleur, qui correspondent normalement à RGB. Et cette valeur là en fait, je vais la mettre sur 1. Le RGB, c'est des valeurs qui vont de 0 à 255; ici j'ai bbesoin de faire un petit calcul qui va me permettre de ramener cette valeur de 0 à 1.

C'est-à-dire, variablcolor[0] ça veut dire que tu prends la première couleur à chaque fois, et tu prends le rouge de la première couelur sur la première ligne, le vert de la première couleur toujours sur la deuxième ligne, et le bleu sur la troisième.

Exactement.

Et pourquoi tu divises par 255 ?

Parce que si tu regardes l’ancien code, c’est une valeur de 0.93 et des poussières. À ce moment-là, j'ai compris qu'on transpose le spectre rouge sur deux valeurs de rouges et ces valeurs de rouges sont comprises entre 0 et 1, sont ramenées entre 0 et 1. C'est comme si on traduisait... C'est de la tradction en fait: dans ma couelur verte rurquoise il y a 144 sur 255 de rouge, et bien en fait, ici je ramène cette valeur 144 à une valeur sur 1, ce qui évaudrait 0.4 sur 1 de rouge. C'est juste des proportions. (..)

C'était une valeur en dur qu'il y avait avant. Tu compliques un peu le code pour que ça corresponde à quoi ?

Au format de couleur demandé. Parce que sinon je peux pas l'utiliser dans ces filtres. Comment dire, le filtre svg, il n'accepte que des valeurs de 0 à 1, du coup, comment je peux faire pour avoir une valeur de rouge ? Il faut que je transforme mon format RGB que j’utilise ailleurs dans le document. (…) J’utilise le format RGB parce que c’est celui que j’utilise aussi ailleurs dans le CSS. C’est une question de maintenabilité. Je choisi entre deux standards/formats de couleurs, celui qui est le plus couramment accepté et le plus facilement compréhensible. Je préfère faire cet effort ici sur le code, qui d'ailleurs sera modifié une fois, pour un travail de ma part une fois, et après je vais le laisser, j'aurais plus à y toucher, il fonctionnera dans tous les cas de figure possible en fait. je préfère faire cet effort maintenant et me laisser une plus grande marge de manoeuvre plus tard.

C'est-à-dire que tu pourras appeler ce bout de code que tu as créé ailleurs avec un raccourci ?

Oui, pour le filtre, en une seule ligne d'ailleurs. Et pour les autres couleurs, celles que je suis en train de modifier à l'instant à l'écran, je pourrais toujours les appeler telle quelle en valeur rgb. Donc c'est bénéf bénéf.

En fait, tu te crées un outil remobilisable.

Exactament. Et compréhensible. Parce que là, ça fait des jours que j'ai pas touché à ce morceaux de code et j'arrive à comprendre assez aisément que trois valeurs qui sont comprises entre zéro et 255, on parle de RGB. Que ce soit pour moi, ou pour d'autres

Bseq05bis

    

00:00:00

Navigateur web

Recharge la page web « localhost:8080 » (le rapport d’activité)

00:00:15

Éditeur de texte / base.html

Modifie des chiffres dans les lignes 43 à 45

Avant

Après

J'essaie de placer mes variables au  bon endroit dans mon code pour optenir les couleurs que je souhaite.  L'idée c'est que ce soit au bon endroit, mais est-ce que c'est au bon  endroit du bleu, au bon endroit de l’antracite. Il y a des moments où l'image  s'inverse parce que je teste des choses et que je confond entre les deux couleurs. Du coup l'image est en négatif de ce que je veux.

00:00:24

Navigateur web

Recharge la page web « localhost:8080 » (le rapport d’activité)

00:00:30

Éditeur de texte / base.html

Modifie des chiffres dans les lignes 43 à 45

00:00:39

Navigateur web

Recharge la page web « localhost:8080 » (le rapport d’activité)

…

  

change plusieurs fois les valeurs