Académique Documents
Professionnel Documents
Culture Documents
1/21
Technologie Web
Conception de sites Web
Alexandre Pauchet
INSA Rouen - Dpartement ASI
BO.B.RC.18, pauchet@insa-rouen.fr
INSA - ASI
2/21
Plan
INSA - ASI
3/21
Dmarche
Besoin exprim
(1/4)
Logiciel recett
Spcication
Documents de Spcication (DSE, DSI)
Validation
Architecture teste
Conception globale
Document de Conception Prliminaire (DCP)
Intgration
Composants tests
Conception dtaille
Document de Conception Dtaille (DCD)
Tests unitaires
Composants dtermins
Codage
INSA - ASI
4/21
Dmarche
Approche
(2/4)
Systme
Casd'utilisation
Diagrammesde squencesystme
classe1 methode()
classe2
Besoins utilisateurs
methode()
classe3 methode()
Modle dudomaine
Diagrammede classesparticipantes
INSA - ASI
5/21
Dmarche
Documentation
(3/4)
Spcications
Externes : formalisation du besoin, contractuel Internes : points non ncessaires au client (domaine de comptence) Artefacts UML : maquette, diagramme de navigation, cas dutilisation
Plan de tests de validation et Cahier de recette raliss // la spcication Conception Prliminaire : modle du domaine, diagramme de classes participantes, diagrammes de squences et dinteraction, diagramme de packages Plan de tests dintgration et Journal des tests dintgration raliss // la conception prliminaire Conception Dtaille : diagramme de classes, pseudo-code Plan de tests unitaires et Journal des tests unitaires raliss // la conception dtaille
INSA - ASI
6/21
Dmarche
(4/4)
Approche simplie
Maquette Diagrammesdeclasses
Diagrammesdecollaboration
CODE
Diagrammedenavigation
INSA - ASI
7/21
(1/5)
Librairie en ligne
Ex : www.amazon.fr, www.fnac.com, www.eyrolles.com, etc. Exigences fonctionnelles : recherche, prsentation douvrages, slection, commande Exigences non fonctionnelles : ergonomie, simplicit dutilisation, performance, etc. Contraintes de conception :
Mise jour des donnes de rfrence Mise jour depuis les formulaires du site Panier Paiement scuris
INSA - ASI
8/21
(2/5)
Casd'utilisation
Identier les acteurs Identier les cas dutilisation Structurer les cas dutilisation en package tudier les relations entre cas dutilisation Hirarchiser les cas dutilisation
INSA - ASI
9/21
(3/5)
<<extends>>
<<include>>
Consulter l'aideenligne
S'identifier
Rechercher desouvrages
Effectuerune rechercheparthme
INSA - ASI
10/21
(4/5)
INSA - ASI
11/21
(5/5)
Remarque importante
Scenarios diagrammes de squence systme
Packages
UC de linternaute UC des employs Acteurs UC secondaires
INSA - ASI
12/21
Navigation
Approche
(1/2)
Approche
Maquette Diagrammedenavigation
Maquette
Dessins/canevas pouvant intgrer des fonctionnalits de navigation Vue concrte mais non dnitive de lIHM Support de discussion avec le client
INSA - ASI
13/21
Navigation
(2/2)
Diagramme de navigation
<<page>> Nouveauts <<page>> Paged'accueil <<page>> Aide <<frame>> Rechercherapide <<page>> Rechercheavance
livretrouv? [oui]
<<page>> Meilleursventes
<<page>> ...
<<exception>> erreur
[non]
<<action>> Recherche
<<action>> Recalculer
[ilresteau moins1livre]
<<action>> Mettredanslepanier
<<frame>> Rsultatderecherche
<<action>> Classement
[plusieurspages]
<<page>> Panier
<<page>> Ficheclientremplie
[clientidentifi]
<<action>> Parcoursdespages
<<action>> tablirundevis
<<action>> Commander
<<action>> Modificationcompte
<<page>> Fichedtailled'ouvrage
<<page>> Ficheclientvide
<<action>> Saisirinfoscommande
<<page>> Fiched'auteurs
[Finnormaleavecachat]
<<frame>> Devis
<<page>> Fichedecommande
<<action>> Acheter
INSA - ASI
14/21
Interaction
Approche
(1/3)
Diagrammes dinteraction
Diagrammes de squence Diagrammes de collaboration
Approche
Systme
Systme
Diagrammesde squencesystme
Diagrammesdecollaboration
INSA - ASI
15/21
Interaction
(2/3)
Diagramme de squence
chercher(phrase)
vrifierSyntaxeRecherche(phrase)
chercherLivres(phrase)
chercherLivresParAuteur(a) create
find()
rsultats:Livre
create(resultats)
rsultats
RsultatRecherche
pageSuivante()
pagePrcdente()
INSA - ASI
16/21
Interaction
(3/3)
Diagramme de collaboration
RechercheAvance
1.2.1.chercherLivresParAuteur(a)
Internaute
ContrleRecherche
1.2.2.create(rsultats)
1.2.1.1.1.2rsultats
Catalogue
1.2.1.1.1.1.create
1.2.1.1.find() 1.2.1.1.1.
2.pageSuivante() 3.pagePrcdente()
INSA - ASI
17/21
Modle objet
Rappel : MVC
(1/2)
MVC : Modle-Vue-Contrleur
observateur
Vue
servicesdemisejour
Notificationd'vnements demisejour+donnesmodifies
Contrleur
observable
Modle
servicesdumodle
Choix du paradigme
Au moment de lanalyse du problme (Cas dutilisation, modle du domaine, diagramme de navigation) 3 approches :
1 2 3
INSA - ASI
18/21
Modle objet
(2/2)
Diagramme de classes
Gestion du panier
Page total:real contenu PagePanier quantite[0...*]:integer=1 +afficher(idSession,code) +modifierQuantiteLigne(code,nombre) +supprimerLigne(code) +recalculer() +viderPanier() +demanderDevis() +commander() +verifierNombre():boolen +ajouterLigne(code,nombre=1) +modifierQuantiteLigne(code,nombre) +supprimerLigne(code) +viderPanier() Panier
PageResultatRecherche mettreDansPanier()
0...1
INSA - ASI
19/21
Conclusion
(1/3)
Qualits
Simple Expressif Mthodologique
Limites
Ne reprsente pas les tats du systme Rapidement limit (gros systmes) Pas dinterconnexion de systmes Pas dynamique (Agents informatiques, composants, etc.) Pas de vrication
INSA - ASI
20/21
Conclusion
Alternatives
(2/3)
p1 e1 t1 t3 t4 e3 p3 2 e2 t2 e4 t1
p2
Alternatives
Approche SMA Repsentation des interactions par automates/rseaux de Petri Vrication logique Contrainte : vnements discrets
INSA - ASI
21/21
Conclusion
Rfrences
(3/3)
UML : Modliser un site e-commerce, Pascal Roques, Eyrolles. http://laurent-audibert.developpez.com/Cours-UML/html/ index.html http://www.coredump.fr.to/category/modelisation/uml/ http://uml.free.fr/