Matteo Arnone

Comprendre et situer le Web

Thu, 05 Nov 2026 10:01:00 +0100

Internet et le Web : deux choses différentes

On utilise souvent les deux mots comme des synonymes, mais ils ne désignent pas la même chose.

Internet est un réseau : des millions d’ordinateurs reliés entre eux dans le monde entier, qui peuvent s’échanger des données. Il est né en 1969 avec ARPANET, un réseau militaire américain, bien avant le Web.
Le Web (World Wide Web) est un service qui fonctionne sur Internet : un ensemble de pages reliées entre elles par des liens, que l’on consulte avec un navigateur. Il a été inventé en 1989 au CERN par Tim Berners-Lee.

Internet et le Web

Évolution du Web

Le Web n’a pas toujours ressemblé à ce qu’on connaît aujourd’hui. On peut résumer son histoire en quelques grandes étapes.

Architecture du Web

Thu, 05 Nov 2026 10:02:00 +0100

Anatomie d’une URL

Lorsqu’on clique sur un lien, beaucoup de choses se passent en coulisses et c’est ce que nous allons voir en décortiquant une URL.

Décomposition annotée d'une URL

Décomposition de l’URL
Partie	Valeur	Rôle
Protocole	`https://`	Règles d’échange ; le « s » indique une connexion chiffrée
Sous-domaine	`www`	Service précis du domaine (ici, le site Web)
Nom de domaine	`bloomberg`	Nom réservé par l’entreprise
Extension	`.com`	Domaine de premier niveau, générique (commercial)
Chemin	`/features/…/`	Emplacement de la page sur le serveur
Paramètre `accessToken`	`?accessToken=…`	Information envoyée au serveur : ici, un jeton JWT

Le paramètre accessToken et son jeton JWT

Parmi les particularités d’une URL, il y a le fait de lui passer des paramètres afin de nous rendre une page spécifique. Dans notre cas, il y a un accessToken qui est très explicite et nous permet d’accéder à l’article en n’ayant pas d’abonnement. Mais, comment est-ce possible ?

Propriété intellectuelle et droit du numérique

Thu, 05 Nov 2026 10:03:00 +0100

Au chapitre 2, nous avons vu que nous pouvons restreindre l’accès à du contenu sous certaines conditions. Nous allons développer cette thématique dans ce chapitre.

Le droit d’auteur

Le droit d’auteur protège toute création originale : un texte, une photo, une musique, une vidéo ou un logiciel. En Belgique, il est prévu par le Code de droit économique. La protection est automatique : pas besoin de déposer son œuvre ni d’afficher le symbole ©, elle existe dès sa création.

Daily Wird

Thu, 05 Nov 2026 00:00:00 +0000

Le Qur’an, sans détour. C’est la devise de l’application.

L’idée

Un wird (وِرْد), c’est une portion de récitation que l’on fait régulièrement. Daily Wird sert à une seule chose : réviser ce que l’on a appris du Coran. On choisit les sourates à travailler, on récite, puis on vérifie.

L’application reste volontairement centrée sur cet usage. Elle ne doit pas devenir une application « à tout faire ».

Fonctionnalités

choix de plusieurs sourates à réviser ;
traductions et nombre de versets de chaque sourate ;
choix du récitateur, avec l’audio ;
texte arabe affiché avec la police KFGQPC Uthmanic Hafs.

Architecture

Couche	Rôle	Outil
Interface	un seul code pour iOS, Android et le web	Flutter
État	la session de révision en cours	Provider
Stockage local	les préférences (sourates, récitateur…)	SharedPreferences
Données	textes, traductions, audio	API de Quran.com
Version web	hébergement de dailywird.org	Cloudflare Pages

Choix et leçons

Flutter ou natif ?

À un moment, des problèmes de fluidité m’ont fait envisager de tout réécrire en Swift et en Kotlin. J’ai finalement décidé de rester sur Flutter. Pour Mushaf, où la vitesse est l’objectif principal, j’ai fait le choix inverse.

Compilateur C

Thu, 05 Nov 2026 00:00:00 +0000

Pourquoi

Je fais ce projet pour apprendre, et parce que ça me plaît. Je suis le livre chapitre par chapitre avec une règle : comprendre le raisonnement derrière chaque étape plutôt que recopier du code qui marche. Je garde donc l’approche du livre, par exemple un lexer à base d’expressions régulières, même quand ce n’est pas l’implémentation la plus rapide.

Le chemin d’un programme

Un compilateur transforme un texte en un autre texte, par étapes. Chacune a un rôle précis :

Réveil ESP32

Thu, 05 Nov 2026 00:00:00 +0000

Le problème

Quand le téléphone sert de réveil, il dort à côté du lit. L’idée : un appareil qui ne fait que réveiller, pour que le téléphone puisse rester dans une autre pièce.

Le matériel

Composant	Rôle
LilyGO T5	carte ESP32 avec un écran e-ink : le « cerveau » et l’affichage
DFRobot MAX98357	amplificateur I²S : transforme le son numérique en signal pour le haut-parleur
Haut-parleur	la sonnerie
Kit de soudure	pour souder les connexions

Pourquoi un écran e-ink ?

Un écran e-ink (encre électronique) n’émet pas de lumière : rien n’éclaire la chambre la nuit. Il garde aussi son image sans consommer d’énergie et n’en utilise que pour changer l’affichage.

Mushaf

Thu, 05 Nov 2026 00:00:00 +0000

D’où vient le projet

J’utilise souvent l’application القرآن الكريم - مصحف المدينة. Elle est utile, et ses lettres sont plus grandes que dans les autres applications de mushaf. Mais il lui manque deux choses dont j’ai besoin : des menus en français et en anglais, et des marque-pages sur plusieurs pages. J’ai donc décidé d’écrire ma propre version.

Les objectifs

La vitesse avant tout. L’application doit faire peu, mais très bien. Le point le plus important : passer de la page actuelle à une autre sourate (par le menu) ou à une page marquée doit être instantané.
Des menus en français et en anglais.
Plusieurs marque-pages.
De grandes lettres, nettes : garder la taille de l’application d’origine, avec un rendu vectoriel.

Flutter ou natif ? Mesurer avant de choisir

Au départ, je voulais utiliser Flutter, surtout pour faciliter le portage sur Android. Plutôt que de deviner, j’ai comparé deux versions optimisées, l’une native iOS et l’autre en Flutter, sur mon iPhone 12.

Glossaire

Thu, 05 Nov 2026 10:04:00 +0100

Adresse IP: Suite de chiffres qui identifie un appareil sur Internet, comme un numéro de téléphone.
APD: Autorité de protection des données : l’organisme belge qui veille au respect du RGPD.
ARPANET: Réseau militaire américain créé en 1969, l’ancêtre d’Internet.
CC0: Licence Creative Commons qui place une œuvre dans le domaine public : on peut l’utiliser sans aucune condition.
CGU: Conditions Générales d’Utilisation : le contrat qu’on accepte pour utiliser un service.
Chemin: Partie de l’URL qui indique où se trouve la page sur le serveur.
Consentement: Accord libre, éclairé et donné par un geste clair, que l’internaute doit donner avant qu’un site dépose des cookies non nécessaires.
Cookie: Petit fichier qu’un site dépose dans le navigateur pour se souvenir d’une information (panier, connexion, pages visitées).
Creative Commons (CC): Licences qui permettent à un auteur d’autoriser à l’avance certaines utilisations de son œuvre.
CSS: Standard qui décrit la mise en page et l’apparence d’un site Web.
DNS: Domain Name System : l’annuaire d’Internet, qui traduit un nom de domaine en adresse IP.
Domaine public: Situation d’une œuvre que tout le monde peut utiliser librement, sans demander d’autorisation.
Donnée personnelle: Toute information qui permet d’identifier une personne : nom, e-mail, identifiant de compte, adresse IP…
Droit d’auteur: Protection automatique d’une création originale : seul l’auteur décide de son utilisation.
Extension (TLD): Dernière partie d’un nom de domaine, comme .com, .be ou .org.
GPL: Licence libre pour les logiciels, comme Linux : on peut copier et modifier le code, à condition de le partager sous la même licence.
Hébergement: Serveur allumé en permanence qui stocke les fichiers d’un site et les envoie aux visiteurs.
HTTPS: Protocole de communication entre le navigateur et le serveur, dont les échanges sont chiffrés.
IA générative: Intelligence artificielle capable de produire du texte, des images ou du code, comme ChatGPT.
Internet: Réseau mondial qui relie des millions d’ordinateurs entre eux.
JWT (jeton): JSON Web Token : jeton signé défini par la norme RFC 7519, formé de trois parties (en-tête, contenu, signature). Placé par exemple dans le paramètre accessToken d’une URL, il prouve un droit d’accès.
Licence: Autorisation donnée par l’auteur, qui fixe ce qu’on a le droit de faire avec son œuvre.
Navigateur: Logiciel qui permet de consulter le Web, comme Safari, Chrome ou Firefox.
Nom de domaine: Nom facile à retenir qui désigne un site, comme bloomberg.com.
Paramètre: Information ajoutée à la fin d’une URL après le ?, sous la forme clé=valeur.
Résolution DNS: Étape où le navigateur obtient l’adresse IP d’un nom de domaine auprès d’un serveur DNS, avant de contacter le serveur Web.
Protocole: Ensemble de règles qui permettent à deux machines de communiquer.
Registrar: Entreprise agréée par laquelle on passe pour louer un nom de domaine, comme Porkbun.
RGPD: Règlement Général sur la Protection des Données : la loi européenne qui protège les données personnelles.
Serveur: Ordinateur qui stocke des fichiers et répond aux demandes des autres ordinateurs.
Signature: Code calculé avec une clé secrète qui empêche de modifier un jeton sans que ça se voie.
Standard: Règle commune, publique et gratuite, que tout le monde s’accorde à respecter.
Sous-domaine: Partie placée avant le nom de domaine, comme www, qui désigne un service précis.
Timestamp Unix: Nombre de secondes écoulées depuis le 1^er janvier 1970.
URL: Adresse complète d’une ressource sur le Web.
W3C: World Wide Web Consortium : l’organisme qui écrit les standards du Web.
Web: Service qui fonctionne sur Internet : des pages reliées par des liens, consultées avec un navigateur.
Web 2.0: Le Web participatif, apparu vers 2004 : les utilisateurs publient eux-mêmes le contenu.

Comment ce site est construit

Thu, 05 Nov 2026 00:00:00 +0000

Un site statique

Ce site n’a ni base de données, ni serveur qui calcule les pages à chaque visite. Les textes sont des fichiers Markdown. Le générateur Hugo les transforme une fois pour toutes en pages HTML, que l’hébergeur n’a plus qu’à envoyer.

	Site dynamique (ex. WordPress)	Site statique (Hugo)
Page construite	à chaque visite	une fois, à la publication
Côté serveur	PHP et base de données	de simples fichiers
Surface d’attaque	plus large	très réduite
Hébergement	un serveur à maintenir	n’importe quel hébergeur de fichiers

Le chemin d’une page

content/projets/mushaf.md le texte, en Markdown
 │
 ▼ hugo
public/projets/mushaf/index.html la page finale

Chaque type de page a son gabarit (template) dans le dossier layouts/ : home.html pour l’accueil, list.html pour les listes, page.html pour les articles.

À propos

Mon, 01 Jan 0001 00:00:00 +0000

Moi

Je m’appelle Matteo Arnone et je suis étudiant. Je développe surtout des applications mobiles (Flutter, et Swift ou Kotlin quand la vitesse compte), et j’apprends en construisant : un compilateur C, un réveil à base d’ESP32.

Je suis plus algorithmes que design, et j’aime optimiser : une application qui fait peu, mais très bien.

Ce site

Projets : une page par projet, façon wiki.
Blog : notes, carnets de bord et portfolio de cours.
Appuie sur / n’importe où pour chercher une page.

Le site est généré avec Hugo. Les articles sont mis en page avec LaTeX.css ; le reste imite un terminal, en clin d’œil au thème Shell.