Aller au contenu

TP – La page des salles du portail

BTS SIO SISR 2e année – Bloc 1 – S06 – individuel

Note

But. Tu construis, sans bibliothèque, la page « Salles communales » du portail de la mairie de Bellevigne : tableau des salles, formulaire de demande, mise en forme adaptée au téléphone, puis audit d'accessibilité.

Durée : 2 h 45 (parties A à D), plus le bilan. Prérequis : cours S06 lu. Outils : éditeur de texte, navigateur (outils de développement).

Note

Comment ce TP fonctionne. Avant chaque étape, tu écris ce que tu anticipes (« J'anticipe »). Puis tu confrontes avec les éléments de réponse.

Nom : ____________

Contraintes

  • Aucune bibliothèque, aucun fichier ou police chargé depuis Internet.
  • Les salles, noms et adresses sont fictifs.
  • Tu enregistres tes fichiers dans un dossier portail/ : salles.html, style.css.

Partie A – La structure HTML (≈ 40 min)

Crée salles.html avec :

  1. le doctype, lang="fr", charset, viewport, un title explicite et le lien vers style.css ;
  2. un header contenant le h1 « Salles communales » et un nav de deux liens (Les salles, Réserver) ;
  3. un main contenant deux section (« Les salles disponibles », « Demander une réservation ») ;
  4. un footer.

J'anticipe. Pourquoi main et nav plutôt que deux div ? ______________________

Éléments de réponse

Les balises sémantiques donnent un sens : un lecteur d'écran peut proposer « aller au contenu principal » ou « aller à la navigation », et un moteur de recherche distingue le contenu du reste. Une div ne dit rien de son rôle.

Partie B – Tableau et formulaire (≈ 50 min)

  1. Dans la première section, ajoute le tableau des six salles : salle des fêtes (200 places, scène, sonorisation, cuisine), salle du conseil (40, vidéoprojecteur), salle des associations A (25, tables modulables), salle des associations B (15, tableau blanc), gymnase (120, vestiaires), salle d'exposition (60, cimaises, éclairage). Utilise caption, thead, tbody, th scope="col". Donne l'id="tableau-salles".
  2. Dans la seconde section, ajoute le formulaire (id="formulaire", action="reserver.php", method="post") avec : nom de l'association (texte), courriel, salle (liste), date, heure de début, heure de fin, bouton d'envoi, et un paragraphe id="message" avec role="status". Chaque champ a son label.

Je comprends. Quelle est la différence entre l'attribut id et l'attribut name d'un champ ? ______________________

Éléments de réponse

id identifie l'élément dans la page (lier le label, cibler en CSS ou JavaScript). name est le nom sous lequel la valeur est envoyée au serveur. Un champ sans name n'est pas transmis.

Contrôle attendu de ta page : une seule h1, th scope sur les en-têtes, tous les champs avec label for.

Partie C – La mise en forme CSS (≈ 45 min)

Dans style.css :

  1. définis des variables (fond, texte, bandeau, accent, erreur) ;
  2. mets box-sizing: border-box partout, une police du système, un interligne de 1,5 ;
  3. donne un bandeau coloré à l'en-tête avec texte clair et une navigation en ligne (flex) ;
  4. centre le main (largeur maximale de 60 rem) ;
  5. mets des bordures au tableau, un fond aux en-têtes ;
  6. aligne les champs du formulaire, boutons colorés ;
  7. rends le focus visible (:focus-visible).

J'anticipe. Pourquoi utiliser des variables CSS pour les couleurs ? ______________________

Éléments de réponse

On change une couleur à un seul endroit (cohérence), et on peut offrir plus tard un thème sombre ou à fort contraste sans réécrire les règles.

Partie D – Adaptation et audit (≈ 30 min)

  1. Active le mode adaptatif des outils de développement (largeur 360 px). Ajoute une media query (sous 600 px) : navigation en colonne, champs sur toute la largeur. Vérifie qu'il n'y a pas de défilement horizontal.
  2. Contraste. Relève le rapport de contraste du texte du bandeau, du texte courant et du bouton (inspecteur, sélecteur de couleur, ou vérificateur local). Complète :
Élément Couleur du texte Fond Rapport Conforme (≥ 4,5:1) ?
Texte courant
Bandeau
Bouton
  1. Clavier. Parcours la page avec Tab uniquement : l'ordre est-il logique, le focus est-il visible partout ? Tu notes un problème et sa correction : ______________________
Éléments de réponse

Avec les couleurs de référence : texte #1a1a1a sur blanc 17,4:1 ; bandeau blanc sur #1f3a5f 11,48:1 ; bouton blanc sur #0b5cad 6,67:1 : tous conformes. Si tu utilises d'autres couleurs, c'est ta mesure qui fait foi. Problèmes fréquents au clavier : focus supprimé par outline: none sans remplacement ; ordre faussé par une mise en page qui déplace visuellement les éléments ; lien sans texte explicite.

Retour en entreprise (si ta situation le permet)

Ouvre avec ton tuteur une page du site de l'organisation et regarde son plan de titres et son contraste avec les outils de développement. Quel défaut d'accessibilité repères-tu ? Anonymise tes captures.

Rendu

Archive RENDU-B1A2-S06-NOM.zip contenant salles.html, style.css, le tableau des contrastes et deux captures datées (écran large et 360 px).

Bilan de la séance

Remplis ce bilan seul, honnêtement : il sert à décider ce qu'il faut reprendre. Niveau : Non maîtrisé, Maîtrise partielle, Bonne maîtrise ou Excellente maîtrise (le vocabulaire des grilles nationales d'évaluation), ou Non évalué.

Compétence du référentiel Ce que j'ai fait dans cette séance Niveau
B1.3 – Développer la présence en ligne de l'organisation
B1.5 – Mettre à disposition des utilisateurs un service informatique

Note

Les codes sont ceux du référentiel.

Je sais faire, sans aide :

  • Écrire une page HTML sémantique
  • Construire un tableau et un formulaire accessibles
  • Mettre en forme avec CSS (variables, flex, media query)
  • Mesurer un contraste et tester au clavier
  • Utiliser les outils de développement

Ce que je dois reprendre : ______________________

Ma question à poser à l'enseignant : ______________________