I85PREP
⌘ K
BUT Métiers du Multimédia et de l'Internet study materials
BUT Métiers du Multimédia et de l'Internet study resources

BUT Métiers du Multimédia et de l'Internet: Développement web et dispositifs interactifs - produire, expliquer, sécuriser

BUT Métiers du Multimédia et de l'Internet · Work through your exam, one topic at a time.

All guide sections

Développement web et dispositifs interactifs - produire, expliquer, sécuriser

Le domaine Développement web et dispositifs interactifs vérifie votre maîtrise du socle front-end et de la logique client-serveur : produire un document valide, accessible et responsive, ajouter une interaction, puis expliquer vos choix. Les questions portent souvent sur HTML sémantique, CSS, JavaScript/DOM, HTTP/API, sécurité et Git.

Socle technique

  • HTML : structure sémantique (header, nav, main, footer), titres hiérarchisés, label associé à chaque champ, alt utile ou vide si décoratif, button pour une action et a pour une navigation, attribut lang.
  • CSS : cascade (origine, spécificité, ordre), modèle de boîte, box-sizing, unités relatives, mobile-first, media queries. Éviter !important comme solution par défaut.
  • JavaScript : const/let, fonctions, sélection DOM, addEventListener, preventDefault, fetch avec async/await, vérification de response.ok, gestion des erreurs. Ne pas mettre la logique métier dans le HTML.
  • HTTP : méthodes GET, POST, PUT/PATCH, DELETE ; codes 200, 201, 204, 301, 304, 400, 401, 403, 404, 409, 422, 500. Distinguer non authentifié (401) et non autorisé (403).
  • Accessibilité : principes POUR, navigation clavier, focus visible, contraste, ARIA seulement si le HTML natif ne suffit pas.
  • Sécurité : validation côté serveur, échappement des sorties contre le XSS, requêtes préparées contre l’injection SQL, jeton CSRF, aucun secret dans le code client.
  • Git : commits atomiques, branches, fusion, fichier .gitignore.

Exemple raisonné

Un menu mobile est codé avec <div onclick='toggle()'> et le contenu est masqué par display:none. Le problème n’est pas seulement visuel : un div n’est pas focusable, n’a pas de rôle de bouton et ne réagit pas à Entrée ou Espace. Correction : utiliser <button aria-expanded='false' aria-controls='menu'>, garder un nav avec hidden ou inert quand il est fermé, gérer Échap et le retour du focus. Ensuite, tester au clavier et avec un lecteur d’écran. La justification doit relier chaque choix à un critère : opérabilité, annonce vocale, état perceptible.

Pièges qui coûtent des points

  • Cliquer sur div plutôt que button.
  • Utiliser un placeholder comme seule étiquette.
  • Écrire un alt égal à « image » au lieu de décrire l’information portée.
  • Croire que la validation HTML dispense de la validation serveur.
  • Appeler fetch sans tester le statut HTTP ni traiter l’échec.
  • Confondre CORS (contrôle navigateur côté serveur) et authentification.
  • Empiler les identifiants et les !important au lieu de structurer la cascade.