Appearance
Lab 01 — Enquête technique : comparer deux sites
Objectifs du laboratoire
- Utiliser des outils gratuits pour découvrir comment un site Web est construit.
- Relever les ressources techniques d'un site : plateforme, hébergement, domaine, sécurité, services externes.
- Évaluer la performance et l'affichage mobile d'un site.
- Comparer deux sites et justifier un jugement à partir d'observations.
Modalités
- En duo (salle de sous-groupe).
- Durée : environ 1 h 30, puis mise en commun en grand groupe.
- Remise : la fiche d'observation remplie, déposée dans l'équipe Teams du cours. Ce travail est formatif (non noté).
Contexte
Deux restaurants peuvent offrir le même service, mais avec des sites construits de façons complètement différentes. Votre travail : enquêter sur deux sites, comme le ferait un analyste avant de conseiller un client.
À la fin, vous devrez répondre à une question de jugement :
Lequel de ces deux sites serait le plus facile à faire évoluer ? Pourquoi ?
Il n'y a pas de réponse évidente. Ce qui compte, c'est la qualité de vos observations et de votre justification.
Le parcours de l'enquête
Les paires de sites
L'enseignant attribue une paire à chaque duo.
| Paire | Thème | Site A | Site B |
|---|---|---|---|
| 1 | Deux poutineries | La Banquise | Casse-Croûte Courteau |
| 2 | Deux chaînes | Thaï Express | Ashton |
| 3 | Deux restaurants qui vendent leurs produits | Schwartz's | Commensal |
| 4 | Deux tables gastronomiques | Joe Beef | Épi, buvette de quartier |
Préparation (10 min)
1. Télécharger la fiche
Télécharger la fiche d'observation (Word)
Une seule fiche par duo. Travaillez dans un document partagé (OneDrive, Google Docs…) pour la remplir à deux.
2. Installer les outils
3. Quel outil répond à quelle question ?
WappalyzerAvec quoi le site est-il construit ?Partie 2 →ICANN LookupDepuis quand existe le domaine ? Chez qui est-il loué ?Partie 3 →Le cadenasQui a émis le certificat ? Jusqu'à quand est-il valide ?Partie 3 →PageSpeed InsightsLe site est-il rapide et accessible ?Partie 4 →F12 — mode appareilS'affiche-t-il bien sur un téléphone ?Partie 4 →Ctrl + U — code sourceLes indices confirment-ils la plateforme ?Partie 5 →
Partie 1 — Première impression (10 min)
Parcourez les deux sites sans outil, comme un client ordinaire.
Partie 2 — Les technologies (15 min)
Sur la page d'accueil de chaque site, cliquez sur l'icône Wappalyzer.
Wappalyzer peut se tromper
Il devine les technologies à partir d'indices. Il en rate parfois, ou en voit qui n'y sont pas. Si un résultat vous surprend, cherchez une preuve dans le code source (partie 5).
Il devine les technologies à partir d'indices. Il en rate parfois, ou en voit qui n'y sont pas. Si un résultat vous surprend, cherchez une preuve dans le code source (partie 5).
Partie 3 — Domaine et sécurité (15 min)
Le nom de domaine
Dans ICANN Lookup, entrez le nom de domaine (sans https:// ni www).
Le certificat
Cliquez sur l'icône à gauche de l'adresse, puis sur La connexion est sécurisée → Le certificat est valide (les libellés varient selon le navigateur).
Témoins et langue
Ouvrez le site dans une fenêtre de navigation privée.
Partie 4 — Performance et mobile (20 min)
PageSpeed Insights
Analysez l'adresse de la page d'accueil de chaque site.
Les scores varient
Deux analyses du même site peuvent donner des scores différents. Lancez l'analyse deux fois et notez les deux résultats.
Deux analyses du même site peuvent donner des scores différents. Lancez l'analyse deux fois et notez les deux résultats.
Situer vos résultats
Entrez les résultats mobiles de vos deux sites pour les situer sur l'échelle de PageSpeed Insights.
Site A
Site B
- ● 90 à 100
- Bon
- ■ 50 à 89
- À améliorer
- ▲ 0 à 49
- Faible
- LCP
- Temps d'affichage du plus gros élément visible (image, titre…). Bon : 2,5 s ou moins.
L'affichage sur téléphone
Dans le navigateur, ouvrez les outils de développement (F12), puis le mode appareil (Ctrl + Shift + M). Choisissez un téléphone dans la liste. Si possible, ouvrez aussi le site sur votre vrai téléphone.
Partie 5 — Le code source (10 min)
Affichez le code source de la page d'accueil (Ctrl + U), puis cherchez (Ctrl + F) :
Partie 6 — Les contraintes probables (10 min)
Pour chaque site, imaginez une contrainte probable de chaque sorte. Appuyez-vous sur vos observations.
| Sorte | Question |
|---|---|
| Technique | Qu'est-ce que la technologie de ce site rendrait difficile ? |
| Organisationnelle | Qui doit probablement mettre ce site à jour ? Est-ce simple pour cette personne ? |
| De ressources | Qu'est-ce que ce site coûte probablement à entretenir : argent, temps, compétences ? |
Partie 7 — Le verdict (10 min)
Lequel de ces deux sites serait le plus facile à faire évoluer ? Pourquoi ?
Par exemple : le restaurant veut ajouter la commande en ligne, traduire le site ou changer complètement son image.
Rédigez une justification de 5 à 8 lignes qui s'appuie sur au moins trois observations de votre fiche.
Défi bonus
Trouvez un site de restaurant québécois dont le score de performance mobile dans PageSpeed Insights est plus bas que ceux de votre paire. Notez l'adresse, le score et deux causes probables de sa lenteur.
Remise
Mise en commun
En grand groupe, chaque duo présente en une minute :
- la plateforme de chacun de ses deux sites ;
- les scores de performance mobile ;
- son verdict et la meilleure raison qui l'appuie.
On remplit ensemble un tableau des quatre paires pour comparer les approches.