Module 1Modéliser un projet web
Chapitre 1 sur 12
Le projet web, son cycle de vie (cascade, cycle en V), le cahier des charges, la conception, les tests, le déploiement et la maintenance.
Objectifs
Avec ce chapitre, tu sauras…
Leçon 1
Pourquoi « modéliser » un site web ? Parce qu'avant de coder, il faut répondre à trois questions : que vient faire l'internaute sur le site et quelles informations s'attend-il à trouver ? Comment ces informations sont-elles structurées, reliées entre elles et mises à jour ? Comment garantir que les choix de réalisation correspondent aux objectifs des utilisateurs ? Les applications web, de plus en plus complexes, sont d'excellentes candidates à la modélisation avec UML.
| Objectif d'un projet web | Ce que l'entreprise attend |
|---|---|
| notoriété, crédibilité, e-réputation | renforcer l'image de marque |
| visibilité, popularité | être trouvé (référencement, réseaux sociaux) |
| mobilité | être utilisable sur tous les écrans (responsive web design) |
| qualité et pérennité | un site à l'état de l'art, maintenable |
| rentabilité et productivité | un retour sur investissement (ventes, économies de temps) |
| simplicité et utilisabilité | un site facile à utiliser |
| Catégorie | Exemples |
|---|---|
| Internet | site vitrine statique, site dynamique, boutique en ligne, portail |
| extranet | portail réservé aux clients ou aux fournisseurs d'une entreprise |
| intranet | réseau social et outils internes d'une entreprise |
| web mobile | site ou application web pensée pour le téléphone |
| collaboratif | wiki, plateforme de travail partagé |
| objets connectés | interface web qui pilote des capteurs ou des appareils |
Leçon 2
| Phase | Ce qui s'y passe |
|---|---|
| cadrage | identifier le besoin à l'origine du projet, ses enjeux, ses objectifs, le contexte, le périmètre et ses limites |
| planification (ou préparation) | le chef de projet et l'équipe définissent qui fait quoi, quand et comment : tâches, planning, budget, ressources |
| réalisation (ou exécution) | les actions sont réalisées dans le respect du planning, du budget et des échéances, avec un suivi régulier |
| clôture |
Leçon 3
| Rubrique du cahier des charges | Contenu |
|---|---|
| présentation de l'entreprise | activité, organisation, chiffres clés |
| contexte | situation actuelle, site existant, concurrents |
| objectifs du projet | ce que le site doit apporter, cibles, indicateurs de réussite |
| éléments fonctionnels et techniques | fonctionnalités attendues, contenus, contraintes techniques (hébergement, langages, compatibilité) |
Leçon 4
| Structure des contenus | Principe | Usage |
|---|---|---|
| hiérarchique | une page d'accueil reliée à des rubriques, elles-mêmes reliées à des sous-rubriques ; éviter les arborescences trop profondes (trois clics maximum pour atteindre un contenu est un bon repère) | la plupart des sites, structures complexes |
| séquentielle (linéaire) | les pages se suivent dans un ordre : étape 1, étape 2… comme un livre | tutoriels, formations en ligne, tunnel de commande |
| en réseau | les pages sont reliées librement entre elles, comme des idées associées | wikis, sites pour utilisateurs expérimentés |
Leçon 5
| Réalisation | Contenu |
|---|---|
| technique | mise en place de l'environnement et des frameworks ; création et alimentation de la base de données ; développement front-end (mise en page, navigation, interactions, animations, saisie) et back-end (traitements, stockage, gestion des utilisateurs, statistiques de visite) ; reprise de l'existant (migration d'un ancien site) |
| graphique | images pertinentes, simples et homogènes, composition équilibrée, palette de couleurs, visualisation des données ; images optimisées (poids, formats) et décrites (attribut alt) pour l'accessibilité et le référencement |
| éditoriale | rédaction des textes, traductions, animation du site (actualités, blog) |
1Le cahier des charges est rédigé par…
2Dans le cycle en V, chaque étape de conception est associée à…
3Une structure de site où les pages se suivent dans un ordre fixe est…
4Les tests réalisés par le client pour valider le cahier des charges sont…
5Vérifier que le site supporte 5 000 visiteurs simultanés est un test…
6Les spécifications fonctionnelles détaillées sont rédigées par…
7Ajouter un module de paiement à un site existant est une maintenance…
8Pour l'analyse des besoins utilisateurs, on rencontre en général…
L'essentiel du chapitre
Vidéo · À regarder
FRLe (vrai) cycle de vie d'un projet - les phases d'un projet
La gestion de projet facile · YouTube
| planning, budget, qualité, organisation |
| délais, jalons, budget, interlocuteurs, critères de validation |
| éléments juridiques | propriété du code et des contenus, mentions légales, données personnelles (loi 09-08) |
| Type de spécification | Décrit… | Exemple pour une librairie en ligne |
|---|---|---|
| opérationnelles (besoins métier) | les objectifs et bénéfices attendus en termes marketing et métier | augmenter les ventes de 20 % ; réduire les appels au service client |
| fonctionnelles (besoins utilisateurs) | les attentes des utilisateurs et la façon dont ils interagiront avec le site | chercher un livre par titre, auteur ou ISBN ; suivre sa commande |
| techniques | le comportement des services, des fonctionnalités et des contenus à développer | paiement par carte via la passerelle du CMI ; temps de réponse < 2 s |
| qualitatives | les caractéristiques des services et leurs effets sur les processus existants | le stock du site est synchronisé avec le logiciel de la librairie |
| Analyse | Orientation | Méthode |
|---|---|---|
| besoins métier (besoins projet) | plutôt back-office : ce dont ont besoin les équipes de l'entreprise | définir la feuille de route (objectifs, enjeux, audience, concurrents, moyens) et le périmètre ; entretiens par service ; tableau besoin → contenus et fonctionnalités |
| besoins utilisateurs | plutôt front-office : ce que voit et attend l'utilisateur | rencontrer 3 à 8 profils d'utilisateurs représentatifs ; techniques marketing (entretiens, questionnaires, personas) ; identifier, affiner et prioriser |
| analyse fonctionnelle | orientée solutions | tableau entrées (informations recueillies sur le terrain) → sorties (réponses que le site apportera) |
Vidéo · À regarder
FRBien rédiger le cahier des charges d'un site web + Modèle gratuit
Matchfolio · YouTube
| Type de navigation | Usage |
|---|---|
| menu horizontal | le plus répandu, pour 4 à 7 rubriques |
| menu vertical | pour une longue liste d'éléments (boutiques, tableaux de bord) |
| sous-menus et menus déroulants | montrer la profondeur des contenus |
| texte avec descriptions | guider le visiteur avec une courte explication sous chaque lien |
| Qui ? |
|---|
| Quoi ? |
|---|
| tests unitaires (de composants) | le développeur | chaque fonction, classe ou composant, isolément |
| tests d'intégration | un testeur de la MOE | plusieurs composants ensemble : ils communiquent correctement |
| tests système | un testeur de la MOE | le site complet : scénarios des cas d'utilisation, sur les terminaux visés |
| tests de recette (d'acceptation) | le client (MOA) | l'adéquation au cahier des charges ; la recette validée déclenche la mise en production |
| Famille | Exemples |
|---|---|
| tests fonctionnels | le site fait-il ce qui est attendu ? (les quatre niveaux ci-dessus) |
| tests non fonctionnels | performance (temps de réponse, CPU, mémoire) ; montée en charge (de plus en plus d'utilisateurs simultanés) ; robustesse (cas extrêmes, pannes) ; compatibilité (navigateurs, systèmes, appareils) ; ergonomie (expérience utilisateur) ; interface (présentation graphique) ; sécurité (M108) ; accessibilité |
| Type | Exemples |
|---|---|
| maintenance technique (corrective et évolutive), souvent sous contrat avec l'agence | corriger les bugs, optimiser le code, mettre à jour les extensions, les bibliothèques et la base, appliquer les correctifs de sécurité |
| maintenance du contenu | publier des actualités et des articles, enrichir les pages, optimiser les textes pour le référencement |
Le cycle de vie d'un projet décrit le processus à suivre pour mener le projet de sa date de démarrage jusqu'à sa clôture. Il comprend en général quatre phases.
Le cahier des charges est le document qui décrit les objectifs, les besoins et les résultats attendus du projet. Il est rédigé par la MOA dans un langage non technique, à destination de la MOE (interne ou externe). Il est contractuel : il sert de référence en cas de litige.
La conception utilise les spécifications pour décider des solutions. Elle a trois facettes.
La conception fonctionnelle
Les acteurs du projet imaginent et décrivent le site : la structure des contenus, la navigation et les spécifications fonctionnelles détaillées.
Tableau: La réalisation
Les tests
Les tests détectent les défauts le plus tôt possible, quand ils coûtent le moins cher à corriger, et garantissent l'acceptation du projet par le client.
La librairie « Kitab » (deux magasins, à Rabat et à Fès) veut vendre en ligne. Rédige dans ton dossier de conception : (1) le sommaire du cahier des charges (six rubriques) ; (2) trois objectifs mesurables ; (3) au moins huit besoins fonctionnels côté internaute et quatre côté libraire (administration) ; (4) l'arborescence du site (structure hiérarchique, deux niveaux).
Pour la librairie en ligne, classe chaque exigence (opérationnelle, fonctionnelle, technique, qualitative) : (1) l'internaute peut ajouter un livre à sa liste d'envies ; (2) le site doit générer 30 % des ventes de la librairie d'ici deux ans ; (3) les pages s'affichent en moins de 2 secondes en 4G ; (4) les commandes en ligne sont transmises automatiquement au logiciel de caisse du magasin ; (5) l'administrateur peut importer le catalogue depuis un fichier CSV ; (6) le site est hébergé au Maroc et utilise PHP 8.3.
Indique le niveau ou la famille de chaque test : (1) le développeur vérifie que la fonction calculerTotal() renvoie 150 pour deux livres à 75 DH ; (2) on vérifie que le module panier transmet bien la commande au module paiement ; (3) le libraire passe une vraie commande sur le site de préproduction avant de signer le procès-verbal ; (4) on teste le site sur Safari iPhone et Chrome Android ; (5) on mesure le temps d'affichage de la page de recherche ; (6) on joue le scénario complet « chercher, commander, payer, recevoir l'e-mail ».
Le résumé appelle la deuxième phase « conception, nommée aussi planification ». Ce sont deux choses différentes : la planification organise le projet (tâches, planning, budget, c'est le sujet du M202), la conception décrit le produit (fonctionnalités, données, maquettes, c'est le sujet de ce module). Dans un projet web, la conception a lieu pendant la réalisation du projet, après le cadrage.
Le modèle en cascade
Analyse des besoins
└──► Conception
└──► Réalisation (codage)
└──► Tests
└──► Déploiement
└──► MaintenanceLes étapes s'enchaînent en séquence : on ne passe à l'étape suivante que lorsque la précédente est terminée et validée, et on ne revient pas en arrière. Le modèle est simple et rassurant, mais le client ne voit le résultat qu'à la fin, et une erreur dans les besoins coûte très cher à corriger.
Le cycle en V
Le cycle en V associe à chaque étape de conception (branche descendante) une étape de validation (branche ascendante). Les tests sont préparés dès la conception : c'est sa particularité.
Expression des besoins (MOA) ─────────────────────────── Recette (MOA)
Spécifications (cahier des charges) ─────────────── Tests de validation (système)
Conception générale (architecture) ───────── Tests d'intégration
Conception détaillée ────────────────── Tests unitaires
\ /
\──── Codage ────────/
phase descendante : concevoir phase ascendante : vérifierLa maîtrise d'ouvrage (MOA) est le client : elle exprime le besoin, finance le projet et valide le résultat (la recette). La maîtrise d'œuvre (MOE) est le prestataire (agence web, service informatique) : elle conçoit et réalise la solution.
La cascade et le cycle en V sont des méthodes prédictives : tout est prévu au départ. Les méthodes agiles (Scrum) découpent le projet en courtes itérations qui livrent régulièrement une partie du produit. C'est l'objet du module M202. Les diagrammes UML de ce module servent dans les deux cas.
Les étapes d'un projet web
1. Analyse des besoins ─► 2. Conception ─► 3. Développement ─► 4. Tests et ─► 5. Maintenance
(cahier des charges) (fonctionnelle, (codage) déploiement et évolutivité
graphique, technique)Ce que tu vas voir (vidéo courte, entièrement sur ce sujet) : une présentation des phases d'un projet, du lancement à la clôture, avec ce que l'on produit à chaque étape. Elle illustre les étapes du cycle de vie de cette section.
Les spécifications permettent de hiérarchiser les développements et de fixer des priorités :
Tableau: Les trois analyses
Exemple (résumé) pour le service après-vente d'un site de commerce : besoin : désengorger les appels, répondre aux questions fréquentes, valoriser le support des meilleures ventes ; contenus à créer : une FAQ générale, un espace support par produit (notice, FAQ, forum).
Ce que tu vas voir (jusqu'à la fin) : les chapitres « Pourquoi faire un cahier des charges ? », « La présentation du projet », « L'arborescence et le contenu », « Le design et l'ergonomie », « Les fonctionnalités attendues », « Les contraintes techniques », « Le contenu et le référencement », « Le planning et le budget », « La maintenance et l'évolutivité ». C'est le contenu d'un cahier des charges tel que décrit dans cette section : présentation, arborescence, fonctionnalités, contraintes, planning et budget.
@startuml
rectangle "Accueil" as A
rectangle "Livres" as L
rectangle "Auteurs" as Au
rectangle "Mon compte" as C
rectangle "Aide" as H
rectangle "Romans" as L1
rectangle "Jeunesse" as L2
rectangle "Scolaire" as L3
rectangle "Commandes" as C1
rectangle "Profil" as C2
rectangle "FAQ" as H1
rectangle "Contact" as H2
A --> L
A --> Au
A --> C
A --> H
L --> L1
L --> L2
L --> L3
C --> C1
C --> C2
H --> H1
H --> H2
@endumlUne fois la structure choisie, on procède au rubriquage (choisir les rubriques et les intitulés des menus, qui forment l'arborescence) et on établit le plan du site : une page qui liste toutes les pages, utile à l'internaute et aux robots des moteurs de recherche (on fournit aussi un fichier sitemap.xml).
Les spécifications fonctionnelles détaillées (SFD) sont rédigées par la MOE. Elles décrivent précisément le comportement de chaque fonctionnalité pour confirmer la prise en compte des besoins et obtenir la validation du client. Les diagrammes UML des chapitres 2 à 7 en sont le cœur.
La conception graphique
Elle définit l'identité visuelle du site. Les graphistes proposent au client des pistes graphiques qui aboutissent, après validation, à la charte graphique (couleurs, typographies, logo, styles des boutons). On définit le gabarit des pages (template, layout), puis on réalise les wireframes (maquettes fonctionnelles en noir et blanc) et les maquettes graphiques (avec l'identité visuelle). C'est l'objet de la partie 3.
La conception technique
Réalisée par le développeur, l'intégrateur, le webdesigner et l'hébergeur ensemble, elle fait les choix techniques :
Le résultat est le document des spécifications techniques. La partie 4 aide à faire ces choix.
Le résumé annonce « 4 niveaux de tests » mais n'en nomme que trois : le texte des tests d'intégration est présent (« s'assurer que plusieurs composantes interagissent ») sans son titre. Les quatre niveaux sont bien : unitaires, intégration, système, recette.
Le déploiement
Déployer, c'est installer ou mettre à jour le site sur un environnement donné : choisir un hébergement, transférer les fichiers et la base de l'environnement de développement vers l'environnement de production, tester toutes les pages, puis mettre en ligne (nom de domaine, HTTPS, référencement, réseaux sociaux). Aujourd'hui, le déploiement est souvent automatisé par une chaîne d'intégration et de déploiement continus (CI/CD, module M202).
Tableau: La maintenance
On distingue aussi la maintenance corrective (corriger un défaut), évolutive (ajouter une fonctionnalité), adaptative (suivre un changement d'environnement : nouvelle version de PHP, nouvelle loi) et préventive (agir avant la panne : surveiller l'espace disque, les certificats). Un site mal entretenu donne une mauvaise image et perd des positions dans les moteurs de recherche.
Explique la différence entre le modèle en cascade et le cycle en V. Dans quel cas le cycle en V est-il particulièrement adapté ? Quel est leur défaut commun, que les méthodes agiles cherchent à corriger ?