Aller au contenu
EN

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 reçoit un rapport qui sépare ce qui est mesuré de ce qui est interprété. Je voulais qu’on puisse s’y fier : chaque affirmation dit si elle est mesurée, observée, interprétée par l’IA ou si c’est une hypothèse.

Mandat et objectif

Analyser n’importe quel site public selon les objectifs choisis (erreurs, UX, prospects, sécurité, vitesse, accessibilité, référencement…) 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, puis pour intégrer cette fiche au portfolio, et l’API Gemini dans l’outil pour lire les sites, rédiger les constats et répondre aux questions. 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 défini l’architecture avec Claude Code : une interface React en TypeScript sur Firebase et une seule fonction infonuagique qui fait l’analyse et montre sa progression en direct. La clé de l’API Gemini reste dans le Secret Manager de Google, jamais dans le navigateur. Dès le départ, chaque affirmation du rapport devait indiquer son origine.

    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

    D’abord, Sonde fait l’inventaire du site et passe environ 45 vérifications sans IA : HTTPS, en-têtes de sécurité, liens brisés, 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. Enfin, une passe de révision retire tout 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, dans les deux modes et les deux langues. Un test a révélé un faux constat : l’IA disait qu’une documentation était « tronquée », alors que c’était l’outil qui coupait les longues pages. C’est corrigé, et 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 trop l’air « 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 effet au survol 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. Si l’IA ne répond pas, l’outil livre quand même un rapport de mesures. Pour le design, j’ai remplacé les contours par des surfaces pleines.

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 d’action, un assistant de questions et l’export PDF.