Aller au contenu

Outil d’analyse

de sites web Sonde

Projet personnel

Voir l’application
Sonde sur un iMac et un téléphone : l’accueil « See any site clearly. » devant la fumée colorée, et les scores par objectif d’un rapport (Find errors 74, Better UX 82, More leads 81, Security 88).

Sonde est un outil d’analyse de sites web : on colle une adresse, on choisit ce qui compte, et on obtient un rapport qui sépare ce qui a été mesuré de ce qui a été interprété. Je voulais un rapport auquel on peut faire confiance : chaque affirmation indique si elle a été mesurée, observée, interprétée par l’IA, ou si c’est une hypothèse à vérifier.

Mandat et objectif

Analyser n’importe quel site public selon les objectifs choisis (erreurs, UX, prospects, sécurité, vitesse, accessibilité, référencement…), son propre site ou celui d’un autre, et livrer un rapport où chaque affirmation indique son origine.

Rôle et responsabilités

Projet personnel : conception de l’outil, architecture, direction visuelle, programmation avec Claude Code, tests sur de vrais sites et mise en ligne sur Firebase.

Crédits

Projet personnel. La conception de l’outil, la direction visuelle et la programmation avec Claude Code sont faites par moi.

Utilisation d’IA

J’ai utilisé Claude Code pour programmer, tester, déboguer et mettre en ligne Sonde, et l’API Gemini dans l’outil lui-même pour lire les sites, rédiger les constats et répondre aux questions sur le rapport ; j’ai aussi utilisé Claude Code pour intégrer cette fiche au portfolio, à partir de la documentation du projet. Ma contribution personnelle comprend l’idée de l’outil, les consignes, la direction visuelle, les choix d’interaction, la révision des rapports et la validation.

Étapes de production

  1. Création de l’architecture

    J’ai commencé par définir l’architecture avec Claude Code : une interface React en TypeScript, hébergée sur Firebase, et une seule fonction infonuagique qui exécute l’analyse et transmet sa progression en direct. La clé de l’API Gemini reste dans le Secret Manager de Google, jamais dans le navigateur, et les mêmes schémas valident les données des deux côtés. Dès le départ, chaque affirmation du rapport devait indiquer son origine : mesurée, observée, interprétée ou hypothèse.

    Analyse en direct de htmx.org dans Sonde : les sept phases, de l’inventaire à la révision, un radar des pages découvertes et lues, et le journal en direct.

  2. Mesurer avant d’interpréter

    Avant de laisser parler l’IA, Sonde fait l’inventaire du site (sitemap, robots.txt, technologies) et passe environ 45 vérifications déterministes : HTTPS, en-têtes de sécurité, liens brisés, titres, textes alternatifs, formulaires et plus. Gemini lit ensuite les pages et rédige les constats ; en analyse approfondie, il refait aussi le parcours d’un visiteur, puis une passe de révision relit chaque affirmation et retire ce que les preuves ne soutiennent pas.

    Section « Measured, not guessed » d’un rapport de Sonde : les mesures classées en échecs, avertissements et réussites, comme les scripts bloquants et les liens brisés.

  3. Premier design

    J’ai d’abord conçu une interface nocturne à partir d’une planche d’ambiance : bleu nuit, typographie monospace légère, une soie en WebGL derrière le titre et une planète qui se lève sous l’appel à l’action. Les animations sont faites sur mesure, sans bibliothèque d’animation.

    Première version de l’accueil de Sonde, en bleu nuit : le titre « See any site clearly. » en monospace devant une soie bleutée et un bouton « Analyze » pervenche.

  4. Tests sur de vrais sites

    J’ai testé l’outil sur de vrais sites, en analyse rapide et approfondie, en anglais et en français. Ces tests ont révélé un faux constat : l’IA signalait une documentation « tronquée » alors que c’était l’outil qui coupait les longues pages. Les pages sont maintenant coupées proprement, avec une marque claire, et les consignes interdisent de signaler ces coupures ; le même test a confirmé un vrai problème, des pages de référence vides.

    Section « What we found » d’un rapport de Sonde sur htmx.org : un constat de priorité haute, un lien brisé et une page d’attributs vide, avec ses preuves mesurées et observées, sa recommandation et son impact.

  5. Refonte visuelle et mise en ligne

    La première version avait l’air trop « faite par l’IA » : des contours partout, un logo de sonar et des boutons qui suivaient le curseur. Je l’ai refaite avec des surfaces pleines, un nouveau logo, un seul geste au survol, réservé à ce qui se clique, et une palette tirée d’une image de référence : corail, saumon, souci, citron et turquoise. L’outil est en ligne sur Firebase.

    Section des objectifs de l’accueil de Sonde dans la nouvelle palette : dix cartes roses pleines sur un fond bleu-vert foncé, la carte « Security » survolée.

Technologies

Défis

Un rapport d’analyse n’est utile que si on peut lui faire confiance, alors que l’IA peut affirmer des choses fausses sur un site. Le premier design, lui, avait l’air fait par l’IA.

Solutions

Les mesures passent avant l’IA, chaque affirmation affiche son origine et une passe de révision relit tout ; quand l’IA n’est pas disponible, l’outil livre quand même un rapport de mesures. Pour le design, j’ai remplacé les contours par des surfaces pleines et gardé un seul geste au survol.

Résultat final

Une application web en ligne, en français et en anglais : une analyse rapide (environ une minute) ou approfondie (3 à 4 minutes), puis un rapport avec des scores par objectif, des constats sourcés, un plan Maintenant / Ensuite / Plus tard, les mesures, un assistant de questions, un lien de partage et l’export PDF.