Module 4Préparer l'environnement de développement web
Chapitre 12 sur 12
Examen blanc et fiche mémo
Un examen blanc corrigé de 40 points sur un cas complet et une fiche mémo de tout le module.
- ≈ 75 min
- 1 leçon
- 3 exercices
- TP
Module 4Préparer l'environnement de développement web
Chapitre 12 sur 12
Un examen blanc corrigé de 40 points sur un cas complet et une fiche mémo de tout le module.
Objectifs
Avec ce chapitre, tu sauras…
L'examen blanc dure 2 h 30 et compte 40 points. Il porte sur un seul cas : l'application de réservation de terrains de sport « Match.ma ». Fais-le sans le cours, sur papier, puis corrige-toi avec le barème.
Leçon 1
Tableau: Le projet web
| Notion | À retenir |
|---|---|
| cycle de vie | cadrage, planification, réalisation, clôture ; cascade ; cycle en V (chaque conception a son test) ; MOA (client) et MOE (prestataire) |
| étapes du projet web | besoins (cahier des charges) → conception (fonctionnelle, graphique, technique) → développement → tests et déploiement → maintenance |
| cahier des charges | entreprise, contexte, objectifs, fonctionnel et technique, planning et budget, juridique ; spécifications opérationnelles, fonctionnelles, techniques, qualitatives |
| conception fonctionnelle | structures hiérarchique, séquentielle, en réseau ; rubriquage, plan du site, navigation, SFD |
| tests | unitaires, intégration, système, recette ; fonctionnels et non fonctionnels (performance, charge, compatibilité, ergonomie, sécurité) |
| maintenance | technique et de contenu ; corrective, évolutive, adaptative, préventive |
| Diagramme | Question | Éléments clés |
|---|---|---|
| cas d'utilisation | qui, pour quoi faire ? | acteurs (rôles ; principaux à gauche, secondaires à droite) ; cas (verbe à l'infinitif) ; <<include>> (obligatoire, base → inclus) ; <<extend>> (optionnel, condition, extension → base) ; généralisation ; fiche (pré/postconditions, scénarios nominal, alternatifs, d'exception) |
| classes | quelles données, quels liens ? | + - # ~ ; nom : type [mult] = défaut {contrainte} ; statique souligné ; dérivé / ; association (rôles, multiplicités lues à l'autre bout, navigabilité) ; classe-association ; agrégation ◇ ; composition ◆ ; héritage ▷ ; interface et réalisation (pointillé ▷) ; abstraite en italique |
| séquence | comment, dans quel ordre ? | DSS (boîte noire) et boîte blanche ; lignes de vie, activations ; messages synchrone (flèche pleine), asynchrone (ouverte), retour (pointillé), création, destruction (croix), perdu, trouvé ; fragments opt, alt, loop, par, break, ignore, assert |
| Outil | À retenir | ||
|---|---|---|---|
| StarUML | modèle ≠ vues (Ctrl+Suppr) ; projets .mdj (JSON) ; export PNG, SVG, PDF, HTML ; génération de code par extensions | ||
| PlantUML | diagrammes as code, versionnables ; `-- | >, .. | >, o--, *--, ->, ->>, alt/else/end` ; Mermaid, draw.io |
| Figma | frames, grille (4 / 12 colonnes, grille de 8), auto layout (= Flexbox), composants, instances, variantes, variables et styles, prototype, mode développeur, export SVG |
| Notion | À retenir |
|---|---|
| UX / UI | facilité et ressenti / apparence ; 10 heuristiques de Nielsen ; lois de Jakob, Fitts, Hick, proximité ; lecture en F et Z ; WCAG AA (contraste 4,5:1) ; mobile first |
| démarche | personas → parcours → zoning → wireframe → maquette → prototype → tests |
| environnement | VS Code et extensions ; DevTools (Réseau, Console, Lighthouse) ; PHP, Node.js LTS ; Composer et npm (manifestes et verrous versionnés, pas vendor/ ni node_modules/ ni .env) ; EditorConfig, Prettier, ESLint ; dev, test, production ; Docker |
| frameworks | inversion de contrôle ; React, Angular, Vue ; Bootstrap, Tailwind ; Laravel, Symfony, Express, Django ; monolithe MVC, API + SPA, MERN ; grille pondérée |
1Le document contractuel rédigé par le client pour exprimer son besoin est…
2Dans le cycle en V, les tests d'intégration vérifient…
3« Réserver un terrain » inclut toujours « S'authentifier » : la flèche <<include>> va…
4Une réservation et ses créneaux, qui disparaissent avec elle, sont reliés par…
5Un message dont l'émetteur n'attend pas la fin du traitement est…
6after(15 min) sur une transition est un événement…
7Dans un diagramme d'activités, la barre qui attend la fin de toutes les branches est…
8L'auto layout de Figma correspond en CSS à…
L'essentiel du chapitre
| états-transitions | comment un objet évolue-t-il ? | état initial ●, final ◉ ; événements signal, appel, when(), after() ; transition événement [garde] / effet ; entry, do, exit ; jonction, décision [else] ; composite ; historique H, H* |
| activités | comment s'enchaîne un traitement ? | actions, décision et fusion ◇, bifurcation et union (barres), fin d'activité ◉ et de flux ⊗, couloirs, nœuds d'objet, signaux, sablier |
Tableau: Les diagrammes UML
Tableau: Les outils
Tableau: UX, UI et environnement
« Match.ma permet aux visiteurs de consulter les terrains (football à 5, padel, basket) et leurs créneaux libres. Pour réserver, il faut un compte. Un joueur connecté réserve un créneau et paie un acompte en ligne (traité par la passerelle de paiement) ; s'il réserve un terrain de padel, il peut louer des raquettes. Il peut annuler jusqu'à 24 h avant ; l'acompte est alors remboursé. Le gérant d'un complexe sportif gère ses terrains et ses tarifs, et consulte le planning. L'administrateur valide les nouveaux complexes. »
<<include>>, <<extend>> avec condition, généralisation). (5 points):PageRéservation, :RéservationController, t:Terrain, r:Réservation (créée pendant la séquence) et :PasserellePaiement, avec un fragment alt sur le résultat du paiement. (4 points)Réservation avec ses attributs, son association vers le terrain et une méthode montantAcompte() qui renvoie 30 % du prix. (2 points)