Aller au contenu

« Utilisateur:Sable » : différence entre les versions

De Design numérique
← Modification précédente
 
(30 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :


<div style="position:fixed; top:-200px;left:-200px; color:whitesmoke; display:grid;gap:50px;grid-template-columns:repeat(13, 1fr)">
<div style="position:fixed; top:-200px;left:-200px; color:whitesmoke; display:grid;gap:50px;grid-template-columns:repeat(13, 1fr)">
<div style="transform:rotate(3deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(6deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(9deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(12deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(15deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(18deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(21deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(24deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(27deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(30deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(33deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(36deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(39deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(42deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(45deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div>
<div style="z-index:-999;transform:rotate(3deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(6deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(9deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(12deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(15deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(18deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(21deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(24deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(27deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(30deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(33deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(36deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(39deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(42deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div><div style="transform:rotate(45deg);clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,00);height:200vh; width:100px; box-shadow: white 10px 10px 50px 5px, #ffa 30px 30px 50px 10px;"></div>
</div>
</div>
<div style="position:absolute;top:600px;right:150px;width:fit-content;height:min-content;border:red 6px dashed;padding:5px;background:white">J'ai restructuré entièrement ma page pcq c'était un bordel sans nom à maintenir</div>


<div style="margin-top:25px; transform:skew(0deg, 5deg);width: auto; font-family:sans; background:blue; color:#fff; padding:20px; padding-top:10px;font-size:120%;  box-shadow: white 0px 0px 0px 2px inset, blue 10px -10px 0px -3px, white 10px -10px,blue 20px -20px 0px -3px,white 20px -20px, blue 30px -30px 0px -3px, white 30px -30px, blue 40px -40px 0px -3px, white 40px -40px, Fuchsia 40px -40px 50px 0px, inset 0px 0px 30px 5px black; position:absolute; top:0px;right:200px;">
<div style="margin-top:25px; transform:skew(0deg, 5deg);width: auto; font-family:sans; background:blue; color:#fff; padding:20px; padding-top:10px;font-size:120%;  box-shadow: white 0px 0px 0px 2px inset, blue 10px -10px 0px -3px, white 10px -10px,blue 20px -20px 0px -3px,white 20px -20px, blue 30px -30px 0px -3px, white 30px -30px, blue 40px -40px 0px -3px, white 40px -40px, Fuchsia 40px -40px 50px 0px, inset 0px 0px 30px 5px black; position:absolute; top:50px;right:200px;">
Parmis les choses que j'aime fort :
Parmis les choses que j'aime fort :
<div style="display:grid;grid-template-columns:1fr 1fr;">
<div style="display:grid;grid-template-columns:1fr 1fr;">
Ligne 10 : Ligne 11 :
* les vélos
* les vélos
* les ordinateurs
* les ordinateurs
* les CDs
* les cassettes et les librairies
* voyager
* linux et le libre
* Avoir des obsessions avec du hardware
 
</div>
</div>
<div>
<div>
Ligne 18 : Ligne 21 :
* mes ami.e.s
* mes ami.e.s
* la techno et la musique forte
* la techno et la musique forte
* le soleil en toute saison
</div>
</div>
</div>
</div>
</div>
<div style="transform:skewY(-10deg)translateY(30%)translateX(30%);width: fit-content; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) -10px -10px 0px -3px, rgb(0,0,0) -10px -10px,rgb(248,248,248) -20px -20px 0px -3px, rgb(0,0,0) -20px -20px, rgb(248,248,248) -30px -30px 0px -3px, rgb(0,0,0) -30px -30px, rgb(248,248,248) -40px -40px 0px -3px, rgb(0,0,0) -40px -40px, #DFFF00 -40px -40px 150px 75px; border:3px solid black; position:absolute;">
__TOC__
</div>
</div>
<br><br>
<br><br>
Ligne 26 : Ligne 34 :
= Présentation de moi =
= Présentation de moi =


Salut, bienvenue,je m'appelle Sable, j'ai 21 ans et je suis étudiante en cours de '''Design Numérique'''. C'est ici que je viens documenter les projets que je mène au sein de ce cours à l'erg. Mais il y a aussi des petits trucs marrants qui se promènent.<br>
Salut, moi c'est Sable, j'ai 22 ans, je suis étudiante en cours de '''Design Numérique'''. <br>
Je suis actuellement en B2, c'est ma première année ici.<br>
Je suis actuellement en B3, c'est ma deuxième année à l'ERG.<br>
J'essaie de voir jusqu'où une page mediawiki peut être poussée, sans avoir les droits administrateur.ices.<br><br>
<br>
Bonne lecture !
 
'''<br><br>
<div align="center" style="border:2px red dotted;padding:2px;width:fit-content"><i>[https://designnumerique.be/w/index.php?title=Utilisateur:Sable&action=edit Modifier la page]</i></div>
 
 
== Early life ==
== Early life ==
Cela fait maintenant à peine plus d'un an que j'ai pour la première fois de ma vie écrit ma première ligne de code. C'est quelque chose qui me faisait très très peur et que j'avais toujours vraiment appréhendé. En école de graphisme, là où j'étudiais avant, on nous montrait ça comme une bizarrerie, un petit jouet un peu chelou et ésotérique. Une prof s'était mis en tête de nous apprendre un peu à en faire, mais ne sachant pas coder elle-même, l'apprentissage fut un peu compliqué.<br>
Cela fait maintenant à peine plus d'un an que j'ai pour la première fois de ma vie écrit ma première ligne de code. C'est quelque chose qui me faisait très très peur et que j'avais toujours vraiment appréhendé. En école de graphisme, là où j'étudiais avant, on nous montrait ça comme une bizarrerie, un petit jouet un peu chelou et ésotérique. Une prof s'était mis en tête de nous apprendre un peu à en faire, mais ne sachant pas coder elle-même, l'apprentissage fut un peu compliqué.<br>
C'est un peu plus tard lors d'un workshop de développement web, auxquel je suis allé à reculons, que j'ai vraiment pris conscience de ce que ça recouvrait, et des possibilités créatives qu'un tel outils pouvait offrir. Je me suis un peu lancée dans la gueule du loup, j'ai lâché toutes les recherches que j'avais réalisé pour mon projet de diplôme, et j'ai commencé à coder, sans avoir aucune idée de ce que je faisais, aucune connaissance des bonnes pratiques, aucun truc et astuce.
C'est un peu plus tard lors d'un workshop de développement web, auxquel je suis allé à reculons, que j'ai vraiment pris conscience de ce que ça recouvrait, et des possibilités créatives qu'un tel outils pouvait offrir. Je me suis un peu lancée dans la gueule du loup, j'ai lâché toutes les recherches que j'avais réalisé pour mon projet de diplôme, et j'ai commencé à coder, sans avoir aucune idée de ce que je faisais, aucune connaissance des bonnes pratiques, aucun truc et astuce.
<br>
<br>
Quatre mois plus tard j'ai rendu ce projet, un petit outils qui permettait de transformer des articles wikipédias en éditions imprimables. C'était mal foutu, totalement bugué, pas très beau, mais ça faisait le taff ! (acptures d'écran à venir)
Quatre mois plus tard j'ai rendu ce projet, un petit outils qui permettait de transformer des articles wikipédias en éditions imprimables. C'était mal foutu, totalement bugué, pas très beau, mais ça faisait le taff ! (captures d'écran à venir).  <span style="color:red">Edit 1 an plus tard : ça ne viendra jamais, j'ai perdu les fichiers je crois</span>
<br>
<br>
Je n'ai pas arrêté de coder depuis
Je n'ai pas arrêté de coder depuis. <span style="color:red">Edit 2 ans plus tard : Vrai</span>
<br>
<br>
Me voici, maintenant un an après ce rendu, toujours en train d'éditer du [[Syntaxe wiki | Wikitexte]] (language de balisage utilisé sur les pages de MediaWiki, le moteur de wiki de Wikipédia) et des lignes de [[css]]...
Me voici, maintenant un an après ce rendu, toujours en train d'éditer du [[Syntaxe wiki | Wikitexte]] (language de balisage utilisé sur les pages de MediaWiki, le moteur de wiki de Wikipédia) et des lignes de [[css]]...
<br><br>
<br><br>
Ce que je vois quand j'édite cette page :
Ce que je vois quand j'édite cette page :
<div style="position:absolute">
 
[[Fichier:Wiki-edit-sable.png|500px]]
[[Fichier:Wiki-edit-sable.png|500px]]
</div>
 
<br>
<br>
<div align="center">J'aime particulièrement créer des interfaces et des petits trucs rigolos qui bougent un peu.</div>
<div align="center">J'aime bien créer des interfaces et des petits trucs rigolos qui bougent un peu. J'aime aussi la décroissance numérique, faire avec le minimum possible, essayer de faire le maximum avec du css et du html vanilla, sans caser de javascript, et - j'ose sortir ces mots de ma bouche - des librairies et des frameworks.........
 
Cela tient aussi bien pour les sites, l'interface, tout le fichier statique, que l'infrastructure derrière, le serveur sur lequel c'est hébergé, etc.</div>
</div>
</div>


<div style="position:absolute;">
<div style="position:absolute;">
<div style="margin-top:50px; transform:translateY(10%)translateX(50%)skew(5deg, 5deg);width: 40vw; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px -10px 0px -3px, rgb(0,0,0) 10px -10px,rgb(248,248,248) 20px -20px 0px -3px, rgb(0,0,0) 20px -20px, rgb(248,248,248) 30px -30px 0px -3px, rgb(0,0,0) 30px -30px, rgb(248,248,248) 40px -40px 0px -3px, rgb(0,0,0) 40px -40px, rgb(0, 0, 255) 40px -40px 150px 75px,inset 0px 0px 30px 5px black;">
== Projets de l'ERG ==
== Projets de l'ERG ==
<div style="margin-top:50px; transform:translateY(10%)translateX(60%)skew(5deg, 10deg);width: 40vw; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px -10px 0px -3px, rgb(0,0,0) 10px -10px,rgb(248,248,248) 20px -20px 0px -3px, rgb(0,0,0) 20px -20px, rgb(248,248,248) 30px -30px 0px -3px, rgb(0,0,0) 30px -30px, rgb(248,248,248) 40px -40px 0px -3px, rgb(0,0,0) 40px -40px, rgb(0, 0, 255) 40px -40px 150px 75px,inset 0px 0px 30px 5px black;">
=== Work ===
Un peu le premier exercice, et mon premier site entièrement à moi où je peux y mettre un peu ce que je veux, des expérimentations en tout genre, des choses qui parlent de moi.... <br>
Un peu le premier exercice, et mon premier site entièrement à moi où je peux y mettre un peu ce que je veux, des expérimentations en tout genre, des choses qui parlent de moi.... <br>
Je me suis amusée avec du javascript assez simple pour afficher des fichiers médias au survol de texte, tout en gardant une esthétique très simple, bichrome, qui rappelle un peu CSS 1.0.
Je me suis amusée avec du javascript
<br>
<br>
[https://www.work.designnumerique.be/sable Mon site avec des trucs dessus un peu marrants]
[https://www.work.designnumerique.be/sable Mon site avec des trucs dessus un peu marrants]
</div>
<br><br><br><br><br>
<div style="margin-top:50px; transform:translateX(25vw)translateY(10%)skew(-0deg,5deg);width: 60vw; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%; box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px -10px 0px -3px, rgb(0,0,0) 10px -10px,rgb(248,248,248) 20px -20px 0px -3px, rgb(0,0,0) 20px -20px, rgb(248,248,248) 30px -30px 0px -3px, rgb(0,0,0) 30px -30px, rgb(248,248,248) 40px -40px 0px -3px, rgb(0,0,0) 40px -40px, rgb(0, 0, 255) 40px -40px 150px 40px,inset 0px 0px 30px 5px black;">
=== Publier la parole ===
Projet en cours, je crée un outils permettant une écoute interactive de conférences, tables rondes, et tout autre contenu parlé et intéressant, en permettant à l'utilisateurice d'annoter des passages, mais aussi d'avoir des médias et textes embedded dans le texte.<br>
==== Fonctionnement technique ====
Je me base sur l'API Fetch de javascript, qui est la solution ni trop simple ni trop complexe, mais qui utilise un protocole HTTP avec une requête GET, impossible de faire fonctionner le <code>import</code>, et l'API File a l'air bien complexe.<br>
Maintenant je vais devoir écrire un parser. J'utilise un fichier '''.srt''' qui est formaté ainsi :<br> <pre>30
00:01:04,768 --> 00:01:06,048
The primary things we really want</pre>
<br>
Donc dans l'ordre : combientième ligne de sous-titre, timing du sous-titre, contenu textuel. <br>
<br>
A ça est ajouté un fichier [[JSON]] permettant de stocker des métadonnées relatives à des lignes spécifiques des sous-titres, pour pouvoir associer les deux plus tards.<br>
Ce fichier doit être importé, cela est fait encore avec '''fetch''' : <br>
<pre>
export async function fetchJson() {
  try {
    const response = await fetch("../sources/sample.json");
    if (!response.ok) {
      throw new Error("Erreur de recuperation JSON");
    }
    return await response.json();
  } catch (error) {
    return null;
  }
}
</pre> <br>
Il se passe plusieurs trucs compliqués mais en gros ça fonctionne. Ca c'est son propre fichier, qui n'a pas besoin d'être appelé dans l'HTML. On va plutôt l'appeler dans d'autres fichiers JavaScript ainsi : <code> import { fetchJson } from "./fetchData.js"; </code> <br> Puis on peut en faire ce qu'on veut dans une fonction async en assignant une variable à notre document importé <code> const data = await fetchJson(); </code> <br>
Les éléments de ce JSON sont des commentaires censés venir ajouter des éléments de contexte aux sous-titres. On doit les faire apparaître dynamiquement au moment où les sous-titres concernés sont visualisés. <br> <br>
Pour comprendre comment cela fonctionne intéressons-nous déja au scroll (ça a un rapport, promis). <br>
=====Le scroll=====
Le scroll fonctionne de deux façons dans l'outil :
* Scroll automatique d'avancement des sous-titres
* Scroll par l'utilisateur·ice
<br>
Le premier est assez simple, on va venir regarder le timing de la vidéo en cours, et on va regarder plusieurs fois par secondes quel sous-titre est censé être affiché. Cela est rendu pratique par la manière dont le fichier '''.srt''' est agencé. <br>
Le scroll manuel est un niveau un peu au dessus. <br>
Il est rendu possible grace au magnifique <code> window.addEventListener("wheel", foo);</code> Contrairement à son cousin '''"scroll"''', l'event listener '''"wheel"''' va écouter quand n'importe quelle opération est faite avec la roue de scroll de la souris. Ce qu'on va maintenant faire c'est identifier quel sous-titre se situe au milieu de la fenêtre, on va lui donner un <code> id="isactive"</code> pour pouvoir s'y réferer ensuite. Une fois que ce sous-titre est identifié, on va aller chercher son timing, celui-même utilisé pour savoir quand l'afficher lors de la lecture de la vidéo, et on va donner cette valeur à la vidéo, pour qu'elle avance automatiquement là où l'on en est.<br>
Ces deux manières de scroll ont des fonctionnements inverses, mais qui se complètent.<br>
Une limitation pour l'instant de ce scroll est qu'il va être interrompu au bout d'un moment, le code va prendre le sous-titre qui se trouve actuellement au milieu et l'assigner à la vidéo, cela peut se passer pendant le scroll et l'interrompre totalement.<br> <br>
Revenons en aux
=====Commentaires=====
Le fichier de données est constitué ainsi :
<pre>
    {
      "id": "10",
      "text": "Image de linux.",
      "comment": "Ceci est une image de Damn Small Linux. C'est un système d'exploitation.",
      "image_link": "http://www.damnsmalllinux.org/damnsmall.jpg",
      "show_duration": "5",
      "css_addition": "#subtitles{color: aqua;} "
    }
</pre>
Il se passe un paquet de choses, voyons cela ligne par ligne :
* "id" va permettre de retrouver à quel sous-titre ce commentaire est associé
* "text" est le titre du commentaire
* "comment" est le texte (eh oui c'est mal foutu) du commentaire
* "image_link" permets de pouvoir insérer une image dans le commentaire
* "show_duration" indique la durée pendant laquelle ce commentaire devra rester actif après que le sous-titre soit passé. Il se réfère là au nombre de sous-titres passés et non à une donnée temporelle.
* "css_addition" permets de modifier l'apparence entière de la page pendant que ce commentaire est actif. Ceci doit être écris en css pur.
<br>
C'est donc un bon nombre d'informations qu'on va venir récupérer pour chaque commentaire. Ce qu'on en fait pour le coup est assez simple, simplement l'insérer dans une section "commentaire", en séparant les différents éléments de titre, texte, etc. <br>
Pour l"id", on va écouter le data-id du sous-titre possédant la classe "isactive" et venir les comparer pour savoir s'il faut afficher le commentaire ou non, tout en prenant en compte le "show_duration". Le "css_addition" lui est inséré dans un élément "<style></style>" dans le '''head''' du document.
<br>
<br>
====L'apparence====
En ce qui concerne l'apparence de l'outils j'ai été très indécise sur à quel point agir, et potentiellement contraindre les utilisateur·ices. J'ai décidé d'un layout assez simple et relativement responsive, permettant surtout le bon fonctionnement des sous-titres (ceux-ci sont pour l'instant obligatoirement ligne par ligne, avec le sous-titre actif au milieu). Les utilisateur·ices ont le contrôle total sur les couleurs, fonds, caractéristiques typographiques, et tout autres attributs ne relevant pas de la disposition des éléments.
====Une platforme====
L'usage de cet outils est limité, il a été pensé pour la rediffusion de conférences, en permettant un ajout communautaire d'éléments contextuels. Il peut être utilisé aussi plus largement pour tous types de médias vidéos dans lequel une personne parle. <br>
L'idée originale était de pouvoir permettre à l'utilisateur·ice d'ajouter en temps réel d'ajouter, de modifier des commentaires au fil du visionnage. Cela s'est trouvé ête un poil ambitieux au vu du temps imparti. Mais ce serait un élément intéressant à développer plus tard. <br>
Mais il faut que ces contenus existent quelque part, c'est un format particulier, qui ne se prête qu'à une platforme qui a été construite pour. C'est donc ma proposition pour les temps qui viennent, de construire une platforme permettant le partage, le relayage entre pairs de ces contenus, que ces annotations deviennent un effort et un enrichissement collectif. C'est un dispositif qui peut être déployé lors d'un événement spécifique, puis exister sur un long terme, permettant la conservation et la mise à jour des informations transmises.
</div>
<div style="transform:skewY(-10deg)translateY(-350%);width: min-content; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) -10px -10px 0px -3px, rgb(0,0,0) -10px -10px,rgb(248,248,248) -20px -20px 0px -3px, rgb(0,0,0) -20px -20px, rgb(248,248,248) -30px -30px 0px -3px, rgb(0,0,0) -30px -30px, rgb(248,248,248) -40px -40px 0px -3px, rgb(0,0,0) -40px -40px, #DFFF00 -40px -40px 150px 75px; border:3px solid black; position:absolute;">
__TOC__
</div>


<div style="transform:translateY(-510%)translateX(40%)skewY(-10deg);width: 20%; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) -10px -10px 0px -3px, rgb(0,0,0) -10px -10px,rgb(248,248,248) -20px -20px 0px -3px, rgb(0,0,0) -20px -20px, rgb(248,248,248) -30px -30px 0px -3px, rgb(0,0,0) -30px -30px, rgb(248,248,248) -40px -40px 0px -3px, rgb(0,0,0) -40px -40px, #FF0 -40px -40px 150px 75px,inset 0px 0px 20px 0px black; border:3px solid black; position:absolute;padding:40px;">
[[Html2print moi]]
=== html2print-moi cet article ===
Un bout d'article parlant du graphisme du jeu Wipeout, une interview menée par Benjamin Vertu pour le site [https://www.t-o-m-b-o-l-o.eu tombolo] <br>
Cet article peut maintenant être imprimé sous format A5 facilement grace à [[Paged.js]].<br>
[http://work.designnumerique.be/sable/article/ Mon article est là] '''(WIP, ne fonctionne pas)'''
</div>
<div style="transform:translateY(-250%)translateX(-40%)skewY(-10deg);width: 20%; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) -10px -10px 0px -3px, rgb(0,0,0) -10px -10px,rgb(248,248,248) -20px -20px 0px -3px, rgb(0,0,0) -20px -20px, rgb(248,248,248) -30px -30px 0px -3px, rgb(0,0,0) -30px -30px, rgb(248,248,248) -40px -40px 0px -3px, rgb(0,0,0) -40px -40px, #DFFF00 -40px -40px 150px 75px; border:3px solid black; position:absolute;padding:30px;">


=== Read me if you can ===
[[Annotateur de conférences]]
Morceaux de ''L'éloge du bug'', mis bouts à bouts, avec une lecture complexifiée par des mini-jeux web.<br>
Petit exercice de [[javascript]] bien sympa.
<br><br>
Pour ce paragraphe là, je me suis inspirée du site [https://www.monkeytype.com monkeytype] qui est un jeu/test d'écriture sur clavier qui mesure simplement la vitesse d'écriture sur des mots aléatoires.<br>
[http://work.designnumerique.be/bug/p2/ Tape le texte] <br><br>
Pour celui-ci je me suis inspirée de méthodes de lecture rapide que certain.es utilisent<br>
[http://work.designnumerique.be/bug/p8/ Lis moi vite]
</div>
<div style="margin-top:50px; transform:translateX(-20%)translateY(-40%)skew(5deg,0deg);width: 35%; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px -10px 0px -3px, rgb(0,0,0) 10px -10px,rgb(248,248,248) 20px -20px 0px -3px, rgb(0,0,0) 20px -20px, rgb(248,248,248) 30px -30px 0px -3px, rgb(0,0,0) 30px -30px, rgb(248,248,248) 40px -40px 0px -3px, rgb(0,0,0) 40px -40px, rgb(0, 0, 255) 40px -40px 150px 75px;position:absolute">
=== Digital Artefacts ===


[[Fichier:Digital-Artefacts.png|vignette]]<br>
[[Read me if u can]]
http://work.designnumerique.be/sable/website/


Ce projet fictif vise à questionner l'évolution de nos données digitales au fil du temps, au fil de leur partage massif et de leur accumulation. Qu'en restera-t-il dans 2000 ans ? <br>
[[Digital artefacts]]
C'est aussi une exploration des compressions utilisées dans les formats d'images vernaculaires, qui composent l'écrasante majorité des médias qui circulent sur internet aujourd'hui.
<ref name="A vernacular of File Formats">[https://beyondresolution.info/A-Vernacular-of-File-Formats A Vernacular of File Formats - Rosa Menkman]</ref>
<br><br>
J'ai donc voulu simuler une dégradation graduelle mais violente et inexorable de la donnée, puis j'ai ensuite exploré ce qu'il était possible d'en ressortir, à la fois d'un aspect très plastique de ces dégradations, mais aussi très scientifique, orienté sur la donnée elle même, ainsi que les métadonnées des fichiers.
<br><br>
Le projet prends alors la forme d'une fiction se passant plusieurs millénaires dans un futur dans lequel les humain.e.s elleux-mêmes sont dématérialisé.e.s en des données numériques, et cherchent à revenir sur leur passé, quels informations pourront-iels retirer de ces amas de données hexadecimales qui forment des lambeaux d'images ?
<br><br>
Les images sont tirées de Google Image grâce à des outils de [[Scraping]], les images sélectionnées (plus de 35000) sont thématisées autour de l'art,de l'architecture, de paysages et de nourriture, un peu comme un diaporama d'antropologue.
<br><br>
Quand les données disparaissent lentement, est-ce que le sens des images disparaît également ? Est-ce qu'elles perdent du sens ? Cette perte est-elle une fatalité ? Qu'est-ce que cela représente comme danger à une époque où de plus en plus de données sont accumulées et n'existent plus que sous forme d'électrons et de silicone ?
<br><br>
Le site internet en lui même prends une esthétique qui s'inspire du structuralisme ou du brutalisme, pas d'effets particulièrements ''fancy'', rien de très gourmand en ressources, un juste milieu entre la pratiqualité de l'usage, et de la proximité avec la structure brut de la donnée.
<br>
Les données apparaissent comme dans un catalogue, peuvent rapidement être parcourues, et sommairement comparées ensemble.
<br><br>
Ce projet se base sur un récit de science fiction inventé, dans un hypothétique futur où le monde physique n'existe plus, les humains ayant choisi de se dématérialiser, comme une étape supérieure de l'évolution naturelle, l'humain ultime. Dans cette nouvelle ère d'information et de signaux, les images ont alors peu de places,et sont totalement supprimées afin de libérer de la place pour augmenter la puissance de calculs des cerveaux. Dans l'incapacité de produire des images nouvelles, elles sont  répétées, partagées, modifiées. Et petit à petit elles viennent à se dégrader, perdant doucement leur signifiance, leur symbole, ce qu'elles portent, ce qu'elles représentent. Bientôt elles viennent à être oubliées. On oublie ce qu'est le monde phyisque, ce à quoi il ressemblait, ce n'est plus qu'un vague relent d'une humanité lointaine
</div>
<div style="margin-top:50px; transform:translateY(30%)translateX(60%)skew(-5deg, -5deg);width: 40vw; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%;  box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px 10px 0px -3px, rgb(0,0,0) 10px 10px,rgb(248,248,248) 20px 20px 0px -3px, rgb(0,0,0) 20px 20px, rgb(248,248,248) 30px 30px 0px -3px, rgb(0,0,0) 30px 30px, rgb(248,248,248) 40px 40px 0px -3px, rgb(0,0,0) 40px 40px, orange 40px 40px 150px 75px,inset 0px 0px 30px 5px black;">
<span id="la-prise-de-notes-par-ordinateur-au-sein-dune-école-dart"></span>


=== La prise de notes par ordinateur au sein d’une école d’art ===  
== Du blablatage ==
Dans cette école,
[[Prise de note]]
comme dans les précédentes et prochaines écoles d’art, la prise de notes est un
<br><br><br><br><br>
acte valorisé. Les étudiant·es, carnet en main, inscrivent sur leurs pages des
mots, des croquis à l’aide de stylos, crayons, marqueurs, règles. C’est tout un
système d’outils et de pratiques créatives, qui fait sens au vu des
professeur·es. Un cours entier y est d’ailleurs consacré, montrant l’importance
qu’on lui accorde. C’est nombreux de ces carnets qui se retrouvent exposés lors
des jurys de fin d’année de l’erg : posés sur la table, c’est une entrée dans
l’intimité de l’artiste, un aperçu totalement décontextualisé d’une recherche
aboutie ou non. Pourtant, cette pratique reste très distante pour moi, je n’ai
jamais su bien écrire (on me l’a reproché depuis le tout premier mot que j’ai
déposé sur du papier), je ne sais pas particulièrement dessiner, ni réaliser
quoi que ce soit qui puisse être inscrit par la main dans un carnet. Ne me
sentant pas légitime dans ma pratique de la prise de notes, cette dernière année
fut une quête pour essayer de trouver l’outil informatisé me permettant de
prendre du plaisir à &lt;b&gt;annoter&lt;b&gt; des bouts de textes, de les
&lt;b&gt;formater&lt;b&gt; comme je pourrais le faire avec des outils manuels,
et de les partager.
 
<span id="le-libre"></span>
==== Le libre ====
 
Cette réflexion sur la prise de notes viens d’abord d’une réflexion sur les
outils que j’utilise dans mon travail, pour la conception graphique, mais
également des outils de recherche, et de consommation de contenu adjacents. J’ai
commencé à m’intéresser à ces outils après avoir découvert le système
d’exploitation Linux. Je me suis tourné vers l’open source, utilisant jusque là
des outils comme VSCode, appartenant à Microsoft, et encore la suite Adobe, pour
la quasi-intégralité de la conception graphique que je produisais. Je ne prenais
quasiment aucune note alors, ou me forçais à utiliser un carnet de croquis, dont
je noircissais les pages sans satisfaction. Au début de cet année scolaire, je
me suis équipée d’un nouvel ordinateur portable petit et léger, dans le but de
m’en servir exclusivement pour les cours. J’ai testé tout un tas de logiciels de
prise de notes et d’organisation, toujours open source (Zim, QOwnNotes). Malgré
ça je n’ai pas trouvé de moyen d’efficacement organiser ce que je prenais en
note, de les manipuler, mais surtout prendre du plaisir à prendre ces notes.
Vous saurez maintenant que je code beaucoup, des sites internets, des
configurations pour mes ordinateurs, des scripts pour me faciliter la vie. En
parallèle de ma recherche de logiciels de prise de note, je cherchais également
de quoi écrire du code efficacement et avec satisfaction. Je suis rapidement
tombée sur les logiciels Vim, et Emacs, les deux outils monstres historiques des
développeurs, qui se font guéguerre depuis leur création dans les années 80 et
90. Vim étant le plus populaire des deux, et mon cerveau cherchant des moyens de
se complexifier la vie, j’ai installé Emacs, sans savoir du tout à quoi
m’attendre.
 
<span id="emacs"></span>
==== Emacs ====
 
Emacs est un logiciel libre, écrit dans un language créé pour l’occasion (ELisp,
pour Emacs Lisp). C’est un éditeur ''plaintext'', c’est à dire qu’il interprète
nativement les fichiers tels qu’ils sont encodés, caractère par caractère. Sa
 
nature open-source en fait un logiciel très expansible. Des rudiments d’ELisp
permettent déjà d’en agrandir ses capacités. Une des blagues souvent faites dans
ce milieu est qu’«Emacs est un très bon système d’exploitation». Il est capable
de gestion de fenêtres, il intègre plusieurs terminaux, il peut lire des images,
documents, il dispose d’un lecteur de musique intégré, d’un client mail, d’un
réseau social, de plusieurs navigateurs webs, de gestionnaires de fichiers,et
encore beaucoup d’autres fonctionalitées customisables à l’infini. Ce qui va
nous intéresser ici, c’est ORG, pour Organisation.
 
<span id="org-mode"></span>
===== Org Mode =====
[[Fichier:Orgnotessable.png|500px]]<br>
Org Mode est un vaste système de fonctions entremêlées permettant la prise de
notes relationnelles (qui se relient les unes entre elles, formant un réseau)
ainsi que leur mise en forme, la journalisation, la conception d’un agenda, d’un
calendrier, d’un suivi des taches et du temps de travail. On peut y intégrer des
bibliographies, des blocs de codes, du LaTeX (mise en forme avancée et
caractères spéciaux).
 
===== Partager =====
<p>J’ai écris quelques scripts permettant de
transformer mes prises de notes directement en pdfs mis en forme avec du CSS,
donc entièrement customisable. Il est également possible de les transformer en
articles de blogs, ou bien d’automatiquement les publier sur un blog personnel,
ou sur un Wordpress. J’écris actuellement cette rubrique dans Emacs, je peux en
3 clics de claviers la transformer en rubrique MediaWiki. C’est un outils qui me
simplifie la vie, car il centralise tout, le code et les prises de notes sont
entremêlées, le tout est personnalisable jusqu’au bout. Je n’ai plus assez de
doigts pour compter le nombre d’heure que j’ai passé à rendre cet outils aussi
efficace que possible, à l’adapter à mon utilisation personnelle, à apprendre à
m’en servir, tout en ayant conscience que je ne sais m’en servir qu’à 20% de ses
capacités totales. Je conseille à tous·tes ayant la curiosité de s’y
lancer.</p>
 
<span id="tout-un-art"></span>


==== Tout un art ====
La prise de note est devenue une pratique créative à part entière dans ma vie.
J’y consacre du temps, j’y prends plaisir, elle m’aide à m’orienter et à m’y
retrouver. Nombreuses des personnes que je connais possédant un carnet de notes
qu’ils chérissent l’ont fabriqué elleux même, fait sur mesure. Ma pratique se
rapproche de ça dans le sens où elle part d’un outils simple, une page blanche
(page blanche sur laquelle on tombe d’ailleurs en lançant Emacs pour la première
fois), et elle s’approprie en profondeur du moyen de création, en comprends les
rouages, s’immisce dans les fichiers sources. C’est une pratique difficile à
mettre en valeur, il n’est pas simple de venir montrer à des jurys un fichier de
notes et de s’attendre à ce qu’iels soient impressionné·es. L’intégralité des
cartels de ces jurys, ainsi que certains textes présents ont été rédigés de la
manière ci-tôt décris.
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="padding-bottom:50px;>
<div style="padding-bottom:50px;>


==== Références (GAFAM-less) ====
==== Références (GAFAM-less) ====
<span style="color:orange">'''Map complète de références sur https://work.designnumerique.be/sable/mindmap/'''</span>
===== Formats d’images et compression =====
===== Formats d’images et compression =====
''Rosa Menkman'' https://beyondresolution.info <br>
''Rosa Menkman'' https://beyondresolution.info <br>

Dernière version du 15 février 2026 à 17:36

J'ai restructuré entièrement ma page pcq c'était un bordel sans nom à maintenir

Parmis les choses que j'aime fort :

  • les vélos
  • les ordinateurs
  • les cassettes et les librairies
  • linux et le libre
  • Avoir des obsessions avec du hardware
  • apprendre des choses aux gens
  • faire des sites internets
  • mes ami.e.s
  • la techno et la musique forte
  • le soleil en toute saison



Présentation de moi

Salut, moi c'est Sable, j'ai 22 ans, je suis étudiante en cours de Design Numérique.
Je suis actuellement en B3, c'est ma deuxième année à l'ERG.


Early life

Cela fait maintenant à peine plus d'un an que j'ai pour la première fois de ma vie écrit ma première ligne de code. C'est quelque chose qui me faisait très très peur et que j'avais toujours vraiment appréhendé. En école de graphisme, là où j'étudiais avant, on nous montrait ça comme une bizarrerie, un petit jouet un peu chelou et ésotérique. Une prof s'était mis en tête de nous apprendre un peu à en faire, mais ne sachant pas coder elle-même, l'apprentissage fut un peu compliqué.
C'est un peu plus tard lors d'un workshop de développement web, auxquel je suis allé à reculons, que j'ai vraiment pris conscience de ce que ça recouvrait, et des possibilités créatives qu'un tel outils pouvait offrir. Je me suis un peu lancée dans la gueule du loup, j'ai lâché toutes les recherches que j'avais réalisé pour mon projet de diplôme, et j'ai commencé à coder, sans avoir aucune idée de ce que je faisais, aucune connaissance des bonnes pratiques, aucun truc et astuce.
Quatre mois plus tard j'ai rendu ce projet, un petit outils qui permettait de transformer des articles wikipédias en éditions imprimables. C'était mal foutu, totalement bugué, pas très beau, mais ça faisait le taff ! (captures d'écran à venir). Edit 1 an plus tard : ça ne viendra jamais, j'ai perdu les fichiers je crois
Je n'ai pas arrêté de coder depuis. Edit 2 ans plus tard : Vrai
Me voici, maintenant un an après ce rendu, toujours en train d'éditer du Wikitexte (language de balisage utilisé sur les pages de MediaWiki, le moteur de wiki de Wikipédia) et des lignes de css...

Ce que je vois quand j'édite cette page :


J'aime bien créer des interfaces et des petits trucs rigolos qui bougent un peu. J'aime aussi la décroissance numérique, faire avec le minimum possible, essayer de faire le maximum avec du css et du html vanilla, sans caser de javascript, et - j'ose sortir ces mots de ma bouche - des librairies et des frameworks......... Cela tient aussi bien pour les sites, l'interface, tout le fichier statique, que l'infrastructure derrière, le serveur sur lequel c'est hébergé, etc.

Projets de l'ERG

Un peu le premier exercice, et mon premier site entièrement à moi où je peux y mettre un peu ce que je veux, des expérimentations en tout genre, des choses qui parlent de moi....
Je me suis amusée avec du javascript
Mon site avec des trucs dessus un peu marrants

Html2print moi

Annotateur de conférences

Read me if u can

Digital artefacts

Du blablatage

Prise de note




Références (GAFAM-less)

Map complète de références sur https://work.designnumerique.be/sable/mindmap/

Formats d’images et compression

Rosa Menkman https://beyondresolution.info
Leegte https://jpeg.leegte.org/about.html

Archivage et classement

SICV https://sicv.activearchives.org/mondo/
Guttormsgard https://guttormsgaard.activearchives.org/

Pour construire cette page

CSS Tricks https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
CSS Scan https://getcssscan.com/css-box-shadow-examples
W3C CSS Colors https://www.w3schools.com/cssref/css_colors.php
Radical Web Design https://radicalweb.design/themes/bricole/
SoftGlossary https://softglossary.space/
(RIGHT IN) THE FEELS https://rightinthefeels.copyright.rip/#archive_docs
Multidimensional.link https://multidimensional.link/southland

Récupérée de "https://designnumerique.be/w/index.php?title=Utilisateur:Sable&oldid=5428"