Design numérique - Contributions [fr]

Lingo

2025-02-03T16:42:54Z

Feuf : Page créée avec « = Présentation = “Lingo” est le travail que j’ai présenté en croisement entre le projet “''Publier la parole''” de design nu... »

= Présentation =

“Lingo” est le travail que j’ai présenté en croisement entre le projet “''Publier la parole''” de design numréique et le projet “''Collections''” de média.

Trainer sur internet, peu importe combien de temps on y passe, laisse forcément une trace sur notre manière de parler. C’est un endroit qui rassemble tellement de cultures, qui unit tellement de gens, et qui donc brasse beaucoup de sphères linguistiques différentes.

Chaque langue comporte son lot de mots qui ont émergé dans les dernières années / mois ; depuis l’arrivée des mêmes, beaucoup de nouveaux mots sont créés, et beaucoup de mots plus anciens se voient attribuer de toutes nouvelles significations.

C’est tout particulièrement le cas avec l’Anglais ; Cette langue a la particularité d’être hégémonique, c’est la langue par défaut pour l’immense majorité du contenu en ligne, et elle évolue constamment.

En passant naturellement une grande partie de mon temps en ligne et consommant une immense partie de mon contenu en anglais, je me suis mis peu à peu à naturellement intégrer par mimétisme les mots que je vois défiler tous les jours dans mes phrases du quotidien.

Cependant, je me suis vite heurtée à la réalisation que très peu de gens sont en autant investis dans le langage commun du web et ses codes, ce qui m’a valu plusieurs moments d’incompréhension de la part de mes ami.es, mais aussi des supers moments de partage de culture.

J’ai alors décidé de créer une sorte de dictionnaire personnel, pour donner une fenêtre sur ma personnalité, partager des clés de compréhension, mais aussi collectionner et me rendre compte du vocabulaire que j’utilise, et réfléchir à comment l’expliquer à des personnes qui n’ont pas forcément de lien spécifique avec l’anglais, internet, et ses sphères.

Ma collection prends alors la forme d’un site internet, permettant ainsi de l’agrandir au fur et à mesure que de nouvelles expressions apparaissent, mais aussi pour pouvoir partager et publier ce contenu, sous forme virtuelle ou physique.

Les expressions ont été sélectionnées par rapport à mon utilisation, ce que mes ami.es remarquent chez moi, pas seulement parce que leur utilisation est populaire en ligne.


= Documentation =

Mon projet a été réalisé uniquement en html, css, javascript et python. Les définitions, ainsi que les enregistrements, ont entièrement été réalisés par mes soins.

. ├── app.py ├── pages │ ├── Cooked.md │ ├── Crashout.md │ ├── Deadass.md │ └── … ├── static │ ├── audio │ │ ├── Cooked.mp3 │ │ ├── Crashout.mp3 │ │ ├── Tap_in.mp3 │ │ └── … │ ├── interface.css │ ├── paged.esm.js │ ├── paged.js │ ├── pictures │ ├── print.css │ ├── print.js │ ├── script.js │ └── style.css ├── templates │ ├── index.html │ └── main.html └── !TOWRITE ├── Asl.md ├── Aura.md ├── Based.md └── … ## Html Le site ne comportant que deux layout, la partie html a été assez simple à réaliser.

L’interface consiste simplement d’une landing page (index.html), avec un élement interactif utilisant du javascript, et de la page principale (main.html). L’interface principale est elle un petit peu plus complexe; - Le header, qui comporte des boutons de navigation - La zone main-content, qui comporte : - Des boutons de navigation - Les définitions - Une zone audio - Une image

L’organisation du code n’a pas grand chose de particulier, à part du Jinja, pour intégrer flask au code et reprendre le contenu markdown.


== Css ==

Pas grand chose à dire sur sa conception, j’ai juste enfin pu en comprendre un peu plus sur la propriété <code>display</code>, et comment gérer l’alignement des éléments. La seule zone qui m’a demandé de rechercher de l’aide est pour l’alignement du titre de la landing page, où j’avais du mal à aligner le code au centre exact de la page :

<code>#landing-title-container {</code> text-align: center; <code>justify-content: center;</code> align-items: center; <code>position: fixed;</code> top: 50%; <code>transform: translateY(-50%);</code> width: 100vw; ` }


== Javascript ==

Le site comporte 3 scripts distincts qui font fonctionner le projet : ### Landing page Le script de la landing page est l’élément qui a lancé le projet du site, et qui a possiblement été le script qui a le plus demandé de rework.

<code>document.addEventListener('DOMContentLoaded', () => { `` const landingTitle = document.getElementById('landing-title'); `` if (landingTitle) { `` fetch('/words') `` .then((response) => { `` if (!response.ok) { `` throw new Error('Failed to fetch words'); `` } `` return response.json(); `` }) `` .then((data) => { `` const words = data.words; `` let currentWordIndex = 0; `` `` landingTitle.addEventListener('mouseover', () => { `` currentWordIndex = (currentWordIndex + 1) % words.length; `` landingTitle.textContent = words[currentWordIndex]; `` landingTitle.href =</code>/word/${words[currentWordIndex]}`; <code>});</code> <code>landingTitle.addEventListener('mouseleave', () => {</code> landingTitle.textContent = ‘Lingo’; <code>landingTitle.href = '/';</code> }); <code>})</code> .catch((error) => { <code>console.error('Error fetching words:', error);</code> }); `` }

Le script vient interagir avec la route flask qui crée l’index de tous les mots, et donne un mot différent à chaque mouseover, venant ainsi rediriger vers la route flask correspondant au mot spécifique. ### Navigation Pour le dropdown menu en haut à droite du site, un script simple viens agréger dans une liste toutes les pages qui figurent sur le site. Le css fait en sorte que le menu ne soit pas affiché au début du site, mais seulement lors de l’interaction avec l’élément.

<code>const trigger = document.getElementById('dropdown-trigger');</code> const menu = document.getElementById(‘dropdown-menu’); <code></code> if (trigger && menu) { <code>trigger.addEventListener('click', (event) => {</code> event.preventDefault(); <code>menu.classList.toggle('hidden');</code> }); <code></code> document.addEventListener(‘click’, (event) => { <code>if (!trigger.contains(event.target) && !menu.contains(event.target)) {</code> menu.classList.add(‘hidden’); <code>}</code> }); <code>}</code> });


=== Html to print ===

Le script print.js viens intéragir avec le bouton en bas à droite de la page : Le script viens créer un nouvel onglet, appliquer un css customisé, et charger la librairie paged.js.

<code>document.getElementById("print").addEventListener("click", function () {</code> // Ouvre un nouvel onglet pour l’impression <code>const printTab = window.open("", "_blank");</code> <code>// Récupère le contenu actuel de la page</code> const content = document.querySelector(“body”).innerHTML; <code></code> // Structure de base pour le nouvel onglet <code>const htmlTemplate =</code> <code><!DOCTYPE html></code>
<html lang="en">
<code><head></code>
<meta charset="UTF-8">
<code><meta name="viewport" content="width=device-width, initial-scale=1"></code>
<title>
Impression
</title>
<code><link href="/static/print.css" rel="stylesheet"></code> <link href="/static/interface.css" rel="stylesheet"> <code><script type="module" src="/static/print.js" defer></script></code>
</head>
<code><body>${content}</body></code>
</html>
<code></code>; <code></code> // Injecte le contenu dans le nouvel onglet <code>printTab.document.open();</code> printTab.document.write(htmlTemplate); <code>printTab.document.close();</code> <code>// Une fois chargé, affiche la boîte de dialogue d'impression</code> printTab.onload = function () { <code>console.log("Paged.js et CSS personnalisés chargés.");</code> printTab.focus(); <code>printTab.print();</code> }; ` });


== Python ==

Pour le traitement du contenu du site, j’ai décidé d’utiliser Flask pour créer des pages statiques et afficher le contenu de mes fichiers markdown qui contiennent les définitions.

Le code contient en réalité deux principales routes d’application : - Une route “words”, qui sers d’index pour enregistrer tous les mots qui sont dans le dossier “pages” (dossier où je mets tous les fichiers qui contiennent une définition). La route repère tous les fichiers en .md, et les ajoute à une liste - Une route “word”, qui récupère le contenu des fichiers, les trie par ordre alphabétique, permet la gestion des sections dans le markdown pour pouvoir styliser les fichiers paragraphes par paragraphes Les autres routes du fichier permettent l’intégration du markdown et des attachements dans le code.


= Markdown =

Les fichiers markdown suivent tous la même template, contenue dans le dossier !TOWRITE.

Ils contiennent un heading pour chaque partie de la définition, ainsi qu’une zone pour l’audio, l’image, et un blockquote pour les exemples. Chaque heading, grace au markdown, est une section individuelle, qui peut être stylisée dans le css.

La template n’est pas encore optimisée pour la publication sur un site, car les attachements sont répertoriés par rapport au dossier local.

B2-B3 2024-2025

2024-12-19T15:31:27Z

Feuf :

Feuf

2024-12-19T15:30:34Z

Feuf : tra

="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=

,dPYb, ,dPYb,
IP'`Yb IP'`Yb
I8 8I I8 8I
I8 8' I8 8'
I8 dP ,ggg, gg gg I8 dP 　　　　　　　　　　　　　　　　　ヽ.､　　　ｶﾞｯ　　.／(
I8dP i8" "8i I8 8I I8dP 　 ∧＿∧　　　　　　　　　　　-=＝,'ヽ-..､　　(｀(Д，'＞←>>1
I8P I8, ,8I I8, ,8I I8P 　（　・∀・）　ミ　　,ｨ､,　　　　　､～;;;;;;,o.､ヽ,,_r..､∴､:.＼
d8b YbadP d8b d8b d8b 　「￣~l　つ||ニニ二三＞､,ｨ;;;;;;;;;;,::ゞ　　-vｪｪｪ' },`. (`ｰ'
PI8"8888888P"Y8888P'"Y88P"`Y8PI8"8888 　ヽ_,ノ　ﾉ;;;;;;;;;;;;;;;;;;;;;;;;ｨ､;;;;;;;;;;;;;　_,, -　｀ー
I8 `8, I8 `8, 　し^(＿）　　,ｨ-､,,_ノ　｀''-'v-'´
I8 `8, I8 `8,
I8 8I I8 8I
I8 8I I8 8I
I8, ,8' I8, ,8'
"Y8P' "Y8P'

[[Fichier:Lowkey.jpg|200px]]

==Présentation==
Bonjour. Je m'appelle feuf (she/they).
Je fais partie des élèves du cours de design numérique ; Je suis à l'erg depuis deux ans à l'heure où j'écris ce texte, je fais de la sérigraphie, des collages, de la typo et des sites internet.
Je suis méga intéressée par le web et toute la culture qui en découle, je me suis inscrite à ce cours aussi parce que je suis de plus en plus passionnée par la culture du logiciel libre, de linux et plus généralement de tout le courant d'utilisation de la technologie de manière active et consciente.

Je réfléchis beaucoup à comment partager ce hobby et en faire quelque chose d'informatif et chouette pour tout le monde à apprendre, je m'intéresse aussi donc pas mal aux questions de diffusion et de partage de l'information, qui sont des notions principales dans le cours de design numérique.

Pour l'instant, je travaille sur la conception d'un dictionnaire pour le projet [[Publier la parole]], mais également sur l'entretien de mon blog www.blog.feuf.fun, sur comment est ce que je pourrais en faire un espace de diffusion hors de mes réseaux sociaux, le sortir de son état actuel de simple site internet qui sers de dépot de mes projets, et le transformer en un blog qcomme on pourrait trouver sur le site neocities par exemple.
Je m'intéresse aussi pas mal au vieux web, à ses modes de diffusion et au minimalisme digital en général, à comment on pourrait agir en tant que collectif et groupe pour peu à peu se dissocier des grandes plateformes de diffusion.

==Projets==
A l'heure où j'écris ce texte, nous travaillons sur 3 projets différents en design numérique :
====[[Coucoudesignnumerique]]====
====[[Html2print-moi cet article]]====
====[[Publier la parole]]====
Dans le cadre de ce projet, comme dit plus haut, je travaille sur la conception d'un site internet sous forme de dictionnaire personnel, avec des définitions de mots de franglais et d'anglais que j'utilise régulièrement mais qui ne sont pas faciles à comprendre pour tout le monde. Je souhaitais partir sur quelque chose qui symbolise mon rapport à la vie en ligne, et à la communication sur internet, parce que l'immense majorité des gens n'ont pas eu un éveil à la langue anglaise
====[[Read me if you can!]]====je trava

==Références==
===Minimalisme digital===
Derrière ce nom un petit peu prétentieux qui rappelle un peu les influenceurs de développement personnel se cache un courant de pensée intéressant. Je pense que c'est un peu ce qui a propulsé mon envie d'étudier cette matière et de m'inscrire dans ce cours.
J'en ai entendu parler pour la première fois par un youtuber du nom de James Scholz (insérer lien youtube, et peut être même un embed).
James scholz est un youtuber qui faisait à l'origine des lives "study with me", où il étudiait en direct devant des milliers de gens, et il s'est mis peu à peu à se dévier de ce format de vidéos pour publier des vidéos sur ses hobbies, son rapport au numérique et à la vie, mais aussi beaucoup à la technologie en général.

James scholz m'a beaucoup appris parce que c'est un des seuls youtubers dont le contenu est centré sur l'utilisation de la technologie qui n'en fait pas directement l'apologie de manière non réflechie.
Son setup et le materiel qu'il montre dans ses vidéos est daté, avec une très forte esthetique retro, mais aussi réflechie pour être moins pratique à utiliser.

J'avais déjà un rapport plus intentionel à la technologie deupuis quelques années,
===Jeux Vidéos===

===Art===

===Diffusion===

Web2print

2024-12-19T14:53:59Z

Feuf : /* Références */

== Présentation ==

Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de créer une mise en page pleinement open source.

Plusieurs frameworks existent pour permettre une mise en page automatique d'un document web, le plus connu étant paged.js, facilitant le processus en proposant une pagination automatique et en proposant des balises css pour modifier l'apparence page par page.

== Exemples ==

<syntaxhighlight lang="css">
@font-face {
font-family: "Hedvig";
src:
url("fonts/HedvigLettersSerif-Regular.ttf")
}

@font-face {
font-family: "Compagnon";
src:
url("fonts/Compagnon-Bold.otf")
}

@font-face {
font-family: "CodeNewRoman";
src:
url("fonts/CodeNewRomanNerdFont-Regular.otf")
}

html, body{
font-size:9pt;
}

@page {
size: A5;
margin-top: 10mm;
margin-bottom: 10mm;
}

@page:left {
margin-right: 10mm;
margin-left: 15mm;
}

@page:right {
margin-left: 10mm;
margin-right: 15mm;
}

@page:first {
}
</syntaxhighlight>

Ce snippet de code css me permet de modifier les marges selon les pages, de modifier la mise en page selon l'orientation de la page et son nombre, en utilisant des selecteurs css.

== Références ==
[https://designnumerique.be/wiki/Intro_web2print](Intro Web2print)

Web2print

2024-12-19T14:53:30Z

Feuf : /* Exemples */

Web2print

2024-12-19T14:52:56Z

Feuf : /* Exemples */

== Présentation ==

Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de créer une mise en page pleinement open source.

Plusieurs frameworks existent pour permettre une mise en page automatique d'un document web, le plus connu étant paged.js, facilitant le processus en proposant une pagination automatique et en proposant des balises css pour modifier l'apparence page par page.

== Exemples ==

<syntaxhighlight>
@font-face {
font-family: "Hedvig";
src:
url("fonts/HedvigLettersSerif-Regular.ttf")
}

@font-face {
font-family: "Compagnon";
src:
url("fonts/Compagnon-Bold.otf")
}

@font-face {
font-family: "CodeNewRoman";
src:
url("fonts/CodeNewRomanNerdFont-Regular.otf")
}

html, body{
font-size:9pt;
}

@page {
size: A5;
margin-top: 10mm;
margin-bottom: 10mm;
}

@page:left {
margin-right: 10mm;
margin-left: 15mm;
}

@page:right {
margin-left: 10mm;
margin-right: 15mm;
}

@page:first {
}
</syntaxhighlight>

Ce snippet de code css me permet de modifier les marges selon les pages, de modifier la mise en page selon l'orientation de la page et son nombre, en utilisant des selecteurs css.

== Références ==
[https://designnumerique.be/wiki/Intro_web2print]

Web to print

2024-12-19T14:52:17Z

Feuf : Feuf a déplacé la page Web to print vers Web2print

#REDIRECTION [[Web2print]]

Web2print

2024-12-19T14:52:17Z

Feuf : Feuf a déplacé la page Web to print vers Web2print

== Présentation ==

Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de créer une mise en page pleinement open source.

Plusieurs frameworks existent pour permettre une mise en page automatique d'un document web, le plus connu étant paged.js, facilitant le processus en proposant une pagination automatique et en proposant des balises css pour modifier l'apparence page par page.

== Exemples ==

<pre>
@font-face {
font-family: "Hedvig";
src:
url("fonts/HedvigLettersSerif-Regular.ttf")
}

@font-face {
font-family: "Compagnon";
src:
url("fonts/Compagnon-Bold.otf")
}

@font-face {
font-family: "CodeNewRoman";
src:
url("fonts/CodeNewRomanNerdFont-Regular.otf")
}

html, body{
font-size:9pt;
}

@page {
size: A5;
margin-top: 10mm;
margin-bottom: 10mm;
}

@page:left {
margin-right: 10mm;
margin-left: 15mm;
}

@page:right {
margin-left: 10mm;
margin-right: 15mm;
}

@page:first {
}
</pre>

Ce snippet de code css me permet de modifier les marges selon les pages, de modifier la mise en page selon l'orientation de la page et son nombre, en utilisant des selecteurs css.

== Références ==
[https://designnumerique.be/wiki/Intro_web2print]

Feuf

2024-12-19T14:43:26Z

Feuf :

="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=

,dPYb, ,dPYb,
IP'`Yb IP'`Yb
I8 8I I8 8I
I8 8' I8 8'
I8 dP ,ggg, gg gg I8 dP 　　　　　　　　　　　　　　　　　ヽ.､　　　ｶﾞｯ　　.／(
I8dP i8" "8i I8 8I I8dP 　 ∧＿∧　　　　　　　　　　　-=＝,'ヽ-..､　　(｀(Д，'＞←>>1
I8P I8, ,8I I8, ,8I I8P 　（　・∀・）　ミ　　,ｨ､,　　　　　､～;;;;;;,o.､ヽ,,_r..､∴､:.＼
d8b YbadP d8b d8b d8b 　「￣~l　つ||ニニ二三＞､,ｨ;;;;;;;;;;,::ゞ　　-vｪｪｪ' },`. (`ｰ'
PI8"8888888P"Y8888P'"Y88P"`Y8PI8"8888 　ヽ_,ノ　ﾉ;;;;;;;;;;;;;;;;;;;;;;;;ｨ､;;;;;;;;;;;;;　_,, -　｀ー
I8 `8, I8 `8, 　し^(＿）　　,ｨ-､,,_ノ　｀''-'v-'´
I8 `8, I8 `8,
I8 8I I8 8I
I8 8I I8 8I
I8, ,8' I8, ,8'
"Y8P' "Y8P'

[[Fichier:Lowkey.jpg|200px]]

==Présentation==
Bonjour. Je m'appelle feuf (she/they).
Je fais partie des élèves du cours de design numérique ; Je suis à l'erg depuis deux ans à l'heure où j'écris ce texte, je fais de la sérigraphie, des collages, de la typo et des sites internet.
Je suis méga intéressée par le web et toute la culture qui en découle, je me suis inscrite à ce cours aussi parce que je suis de plus en plus passionnée par la culture du logiciel libre, de linux et plus généralement de tout le courant d'utilisation de la technologie de manière active et consciente.

Je réfléchis beaucoup à comment partager ce hobby et en faire quelque chose d'informatif et chouette pour tout le monde à apprendre, je m'intéresse aussi donc pas mal aux questions de diffusion et de partage de l'information, qui sont des notions principales dans le cours de design numérique.

Pour l'instant, je travaille sur la conception d'un dictionnaire pour le projet [[Diffuser la parole]], mais également sur l'entretien de mon blog www.blog.feuf.fun, sur comment est ce que je pourrais en faire un espace de diffusion hors de mes réseaux sociaux, le sortir de son état actuel de simple site internet qui sers de dépot de mes projets, et le transformer en un blog qcomme on pourrait trouver sur le site neocities par exemple.
Je m'intéresse aussi pas mal au vieux web, à ses modes de diffusion et au minimalisme digital en général, à comment on pourrait agir en tant que collectif et groupe pour peu à peu se dissocier des grandes plateformes de diffusion.

==Projets==
A l'heure où j'écris ce texte, nous travaillons sur 3 projets différents en design numérique :
====[[Coucoudesignnumerique]]====
====[[Html2print-moi cet article]]====
====[[Publier la parole]]====
====[[Read me if you can!]]====

==Références==
===Minimalisme digital===
Derrière ce nom un petit peu prétentieux qui rappelle un peu les influenceurs de développement personnel se cache un courant de pensée intéressant. Je pense que c'est un peu ce qui a propulsé mon envie d'étudier cette matière et de m'inscrire dans ce cours.
J'en ai entendu parler pour la première fois par un youtuber du nom de James Scholz (insérer lien youtube, et peut être même un embed).
James scholz est un youtuber qui faisait à l'origine des lives "study with me", où il étudiait en direct devant des milliers de gens,
===Jeux Vidéos===

===Art===

===Diffusion===

Feuf

2024-12-19T14:41:53Z

Feuf :

="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=

,dPYb, ,dPYb,
IP'`Yb IP'`Yb
I8 8I I8 8I
I8 8' I8 8'
I8 dP ,ggg, gg gg I8 dP 　　　　　　　　　　　　　　　　　ヽ.､　　　ｶﾞｯ　　.／(
I8dP i8" "8i I8 8I I8dP 　 ∧＿∧　　　　　　　　　　　-=＝,'ヽ-..､　　(｀(Д，'＞←>>1
I8P I8, ,8I I8, ,8I I8P 　（　・∀・）　ミ　　,ｨ､,　　　　　､～;;;;;;,o.､ヽ,,_r..､∴､:.＼
d8b YbadP d8b d8b d8b 　「￣~l　つ||ニニ二三＞､,ｨ;;;;;;;;;;,::ゞ　　-vｪｪｪ' },`. (`ｰ'
PI8"8888888P"Y8888P'"Y88P"`Y8PI8"8888 　ヽ_,ノ　ﾉ;;;;;;;;;;;;;;;;;;;;;;;;ｨ､;;;;;;;;;;;;;　_,, -　｀ー
I8 `8, I8 `8, 　し^(＿）　　,ｨ-､,,_ノ　｀''-'v-'´
I8 `8, I8 `8,
I8 8I I8 8I
I8 8I I8 8I
I8, ,8' I8, ,8'
"Y8P' "Y8P'

[[Fichier:Lowkey.jpg|200px]]

==Présentation==
Bonjour. Je m'appelle feuf (she/they).
Je fais partie des élèves du cours de design numérique ; Je suis à l'erg depuis deux ans à l'heure où j'écris ce texte, je fais de la sérigraphie, des collages, de la typo et des sites internet.
Je suis méga intéressée par le web et toute la culture qui en découle, je me suis inscrite à ce cours aussi parce que je suis de plus en plus passionnée par la culture du logiciel libre, de linux et plus généralement de tout le courant d'utilisation de la technologie de manière active et consciente.

Je réfléchis beaucoup à comment partager ce hobby et en faire quelque chose d'informatif et chouette pour tout le monde à apprendre, je m'intéresse aussi donc pas mal aux questions de diffusion et de partage de l'information, qui sont des notions principales dans le cours de design numérique.

Pour l'instant, je travaille sur la conception d'un dictionnaire pour le projet [[Diffuser la parole]], mais également sur l'entretien de mon blog www.blog.feuf.fun, sur comment est ce que je pourrais en faire un espace de diffusion hors de mes réseaux sociaux, le sortir de son état actuel de simple site internet qui sers de dépot de mes projets, et le transformer en un blog qcomme on pourrait trouver sur le site neocities par exemple.
Je m'intéresse aussi pas mal au vieux web, à ses modes de diffusion et au minimalisme digital en général, à comment on pourrait agir en tant que collectif et groupe pour peu à peu se dissocier des grandes plateformes de diffusion.

==Projets==
A l'heure où j'écris ce texte, nous travaillos sur 3 projets différents en design numérique :
====[[Coucoudesignnumerique]]====
====[[Html2print-moi cet article]]====
====[[Publier la parole]]====
====[[Read me if you can!]]====

==Références==
===Minimalisme digital===
Derrière ce nom un petit peu prétentieux qui rappelle un peu les influenceurs de développement personnel se cache un courant de pensée intéressant. Je pense que c'est un peu ce qui a propulsé mon envie d'étudier cette matière et de m'inscrire dans ce cours.
J'en ai entendu parler pour la première fois par un youtuber du nom de James Scholz (insérer lien youtube, et peut être même un embed).
James scholz est un youtuber qui faisait à l'origine des lives "study with me", où il étudiait en direct devant des milliers de gens,
===Jeux Vidéos===

===Art===

===Diffusion===

Feuf

2024-12-19T14:30:19Z

Feuf :

Feuf

2024-12-19T14:29:07Z

Feuf :

Feuf

2024-12-19T14:13:11Z

Feuf :

Feuf

2024-12-19T13:55:57Z

Feuf :

Feuf

2024-12-19T13:50:24Z

Feuf : /* "feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】 */

Feuf

2024-12-19T13:46:21Z

Feuf :

Feuf

2024-12-19T13:43:19Z

Feuf : /* "feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】 */

Feuf

2024-12-19T13:39:57Z

Feuf :

="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=

,dPYb, ,dPYb,
IP'`Yb IP'`Yb
I8 8I I8 8I
I8 8' I8 8'
I8 dP ,ggg, gg gg I8 dP
I8dP i8" "8i I8 8I I8dP
I8P I8, ,8I I8, ,8I I8P
d8b YbadP d8b d8b d8b
PI8"8888888P"Y8888P'"Y88P"`Y8PI8"8888
I8 `8, I8 `8,
I8 `8, I8 `8,
I8 8I I8 8I
I8 8I I8 8I
I8, ,8' I8, ,8'
"Y8P' "Y8P'

Hello ! Moi c'est feuf

Utilisateur:Feuf

2024-12-19T13:39:31Z

Feuf : /* "feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】 */

Feuf

2024-12-19T13:39:19Z

Feuf : Page créée avec « ="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=... »

Web2print

2024-11-14T13:02:00Z

Feuf :

== Présentation ==

Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de créer une mise en page pleinement open source.

Plusieurs frameworks existent pour permettre une mise en page automatique d'un document web, le plus connu étant paged.js, facilitant le processus en proposant une pagination automatique et en proposant des balises css pour modifier l'apparence page par page.

== Exemples ==

<pre>
@font-face {
font-family: "Hedvig";
src:
url("fonts/HedvigLettersSerif-Regular.ttf")
}

@font-face {
font-family: "Compagnon";
src:
url("fonts/Compagnon-Bold.otf")
}

@font-face {
font-family: "CodeNewRoman";
src:
url("fonts/CodeNewRomanNerdFont-Regular.otf")
}

html, body{
font-size:9pt;
}

@page {
size: A5;
margin-top: 10mm;
margin-bottom: 10mm;
}

@page:left {
margin-right: 10mm;
margin-left: 15mm;
}

@page:right {
margin-left: 10mm;
margin-right: 15mm;
}

@page:first {
}
</pre>

Ce snippet de code css me permet de modifier les marges selon les pages, de modifier la mise en page selon l'orientation de la page et son nombre, en utilisant des selecteurs css.

== Références ==
[https://designnumerique.be/wiki/Intro_web2print]

Web2print

2024-11-14T12:32:20Z

Feuf : Page créée avec « == Présentation == Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de cr... »

== Présentation ==

Le web to print est un procédé de mise en page qui consiste à produire un fichier imprimable uniquement à partir de code web, ce qui permet de créer une mise en page pleinement open source.

Plusieurs frameworks existent pour permettre une mise en page automatique d'un document web, le plus connu étant paged.js, facilitant le processus en proposant une pagination automatique et en proposant des balises css pour modifier l'apparence page par page.

== Exemples ==

<pre>
@font-face {
font-family: "Hedvig";
src:
url("fonts/HedvigLettersSerif-Regular.ttf")
}

@font-face {
font-family: "Compagnon";
src:
url("fonts/Compagnon-Bold.otf")
}

@font-face {
font-family: "CodeNewRoman";
src:
url("fonts/CodeNewRomanNerdFont-Regular.otf")
}

html, body{
font-size:9pt;
}

@page {
size: A5;
margin-top: 10mm;
margin-bottom: 10mm;
}

@page:left {
margin-right: 10mm;
margin-left: 15mm;
}

@page:right {
margin-left: 10mm;
margin-right: 15mm;
}

@page:first {
}
</pre>

Utilisateur:Feuf

2024-11-07T18:25:14Z

Feuf : /* "feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】 */

Utilisateur:Feuf

2024-11-07T18:19:06Z

Feuf : Page créée avec « ="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】= »

="feuf" x design_numerique ► [2024_2025].page_de_presentation ►【feuf shit only...】=