Lingo

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é display, 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 :

#landing-title-container { text-align: center; justify-content: center; align-items: center; position: fixed; top: 50%; transform: translateY(-50%); 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.

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 =/word/${words[currentWordIndex]}`; }); landingTitle.addEventListener('mouseleave', () => { landingTitle.textContent = ‘Lingo’; landingTitle.href = '/'; }); }) .catch((error) => { console.error('Error fetching words:', error); }); `` }

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.

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

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.

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

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.