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.

Modifier la page

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

@@ Ligne 1 : / Ligne 1 : @@
-Hello, ceci est ma page.<br><br>
-Projets en tout genre en webdesign, javascript & css enjoyer, '''dedicate all my time to hating python.
+<div style="position:fixed; top:-200px;left:-200px; color:whitesmoke; display:grid;gap:50px;grid-template-columns:repeat(13, 1fr)">
-'''<br><br>
+<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 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:50px;right:200px;">
+Parmis les choses que j'aime fort :
+<div style="display:grid;grid-template-columns:1fr 1fr;">
+<div>
+* les vélos
+* les ordinateurs
+* les cassettes et les librairies
+* linux et le libre
+* Avoir des obsessions avec du hardware
+</div>
+<div>
+* apprendre des choses aux gens
+* faire des sites internets
+* mes ami.e.s
+* la techno et la musique forte
+* le soleil en toute saison
+</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>
+<br><br>
+<div style="margin-top:50px; transform:translate(2.5%);width: 90%; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; color:#222; padding:20px; padding-top:10px;font-size:120%;  /* box-shadow: black 0px 0px 0px 2px inset, rgb(255, 0, 0) 20px -20px 150px 75px; */">
+= Présentation de moi =
+Salut, moi c'est Sable, j'ai 22 ans, je suis étudiante en cours de '''Design Numérique'''. <br>
+Je suis actuellement en B3, c'est ma deuxième année à l'ERG.<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 ==
-J'ai découvert le webdesign il y a très peu longtemps, lors d'un workshop de deux jours. Avant ça je ne connaissais pas du tout, même plus, j'avais du dédain à l'idée d'en faire. Mais ce workshop a changé tout ça. Juste après j'ai crée un petit site en quelques jours pour ranger et classer tous les mémoires de mon école, projet qui est toujours en cours de développement. Ce site utilise isotope.js pour l'agencement de toutes les images de couvertures des mémoires, et il y a un script externe (à l'époque entièrement généré par chatGPT) qui se gère de gérer le système de filtres, alors même que isotope.js propose une module exactement pour ça... j'ai un bon refactoring à faire je sens, je faisais un peu n'importe quoi aux tout débuts.
+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.
+<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 ! (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>
+Je n'ai pas arrêté de coder depuis. <span style="color:red">Edit 2 ans plus tard : Vrai</span>
+<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]]...
+<br><br>
+Ce que je vois quand j'édite cette page :
-== Projets de l'ERG ==
+[[Fichier:Wiki-edit-sable.png|500px]]
+<br>
+<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 style="position:absolute;">
-=== Work ===
+<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 ==
 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>
-[https://www.work.designnumerique.be/sable Mon site hub]
+[https://www.work.designnumerique.be/sable Mon site avec des trucs dessus un peu marrants]
+[[Html2print moi]]
+[[Annotateur de conférences]]
-=== Publier la parole ===
+[[Read me if u can]]
-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>
+[[Digital artefacts]]
-==== 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>
+== Du blablatage ==
-Maintenant je vais devoir écrire un parser. J'utilise un fichier '''.srt''' qui est formaté ainsi :<br> <pre>30
+[[Prise de note]]
-:01:04,768 --> 00:01:06,048
+<br><br><br><br><br>
-The primary things we really want</pre>
-<br>
+</div>
-Donc dans l'ordre : combientième ligne de sous-titre, timing du sous-titre, contenu textuel. <br>
+<div style="padding-bottom:50px;>
+==== 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 =====
+''Rosa Menkman'' https://beyondresolution.info <br>
+''Leegte'' https://jpeg.leegte.org/about.html
+===== Archivage et classement =====
+''SICV'' https://sicv.activearchives.org/mondo/ <br>
+''Guttormsgard'' https://guttormsgaard.activearchives.org/
+===== Pour construire cette page =====
+''CSS Tricks'' https://css-tricks.com/different-ways-to-get-css-gradient-shadows/ <br>
+''CSS Scan'' https://getcssscan.com/css-box-shadow-examples <br>
+''W3C CSS Colors'' https://www.w3schools.com/cssref/css_colors.php <br>
+''Radical Web Design'' https://radicalweb.design/themes/bricole/ <br>
+''SoftGlossary'' https://softglossary.space/ <br>
+''(RIGHT IN) THE FEELS'' https://rightinthefeels.copyright.rip/#archive_docs <br>
+''Multidimensional.link'' https://multidimensional.link/southland
-=== html2print-moi cet article ===
+</div>
-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à]
-=== Read me if you can ===
-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]