Web Engineering L5: Content Model (5/8)
0 likes63 views
Il documento tratta la progettazione di applicazioni web, evidenziando l'importanza del content design e dei modelli UML per garantire una relazione efficace tra contenuti, struttura navigazionale e presentazione. Vengono presentati diversi modelli, come il conceptual model e il navigation space model, e le regole per mappare questi modelli in strutture di navigazione efficienti. Infine, si forniscono indicazioni pratiche su come definire classi, associazioni e menu per ottimizzare la navigazione nell'applicazione web.
![MWT– Progettazione di Applicazioni Web Henry Muccini
3
Progettazione
.web contents modeling [dati e contenuti]
.navigation modeling -> actors
.architecture modeling + tecnologies
.component diagrams
.sequence diagrams
.design decisions
.UX modeling](https://image.slidesharecdn.com/webengineeringl5contentmodel-180415103305/85/Web-Engineering-L5-Content-Model-5-8-3-320.jpg)
![Navigation Space Model
[mandatory]](https://image.slidesharecdn.com/webengineeringl5contentmodel-180415103305/85/Web-Engineering-L5-Content-Model-5-8-17-320.jpg)
![Navigational Structure
[opzionale]](https://image.slidesharecdn.com/webengineeringl5contentmodel-180415103305/85/Web-Engineering-L5-Content-Model-5-8-25-320.jpg)
Web Engineering L5: Content Model (5/8)
- 1. Progettazione di Applicazioni Web corso del Master in Web Technology a.a. 2017-2018 https://app.schoology.com/course/1511186315/ Henry Muccini Università degli Studi dell’Aquila 5. Content Design
- 2. MWT– Progettazione di Applicazioni Web Henry Muccini 2 Copyright Notice Il materiale riportato in queste slide puo’ essere riutilizzato, parziale o totalmente, a patto che le fonti e gli autori vengano citati Henry Muccini
- 3. MWT– Progettazione di Applicazioni Web Henry Muccini 3 Progettazione .web contents modeling [dati e contenuti] .navigation modeling -> actors .architecture modeling + tecnologies .component diagrams .sequence diagrams .design decisions .UX modeling
- 5. MWT– Progettazione di Applicazioni Web Henry Muccini 5 Motivazioni • Hypermedia design e’ un nuovo ramo di sviluppo • Solitamente una applicazione Web e’ costruita ad hoc, partendo da sistemi piccoli che vengono man mano resi piu’ complessi difficolta’ di manutenzione • Lo sviluppo di applicazioni hypermediali presenta importanti differenze rispetto a normali processi di sviluppo...
- 6. MWT– Progettazione di Applicazioni Web Henry Muccini 7 Differenze nel design Struttura ipertestuale da modellare e controllare Necessita’ di informazione sulla navigazione Aspetti di presentazione e parte di contenuto Riassumendo: ci sono tre aspetti differenti da tenere in considerazione – Contenuti – Struttura navigazionale – Presentazione Questi tre aspetti vanno relazionati tra loro, per garantire maggior manutenibilita’
- 7. MWT– Progettazione di Applicazioni Web Henry Muccini 8 Relazione tra i vari modelli UWE
- 8. MWT– Progettazione di Applicazioni Web Henry Muccini 9 Modelli UML utilizzati 1. Use Case model: – Use Case Diagram – Class Diagram 2. Conceptual model: – Class Diagram 3.1 Navigation Space: – Class Diagram stereotipato 3.2 Navigation Structure: – Class Diagram stereotipato 4. Presentation: – static: Class Diagram stereotipato – dynamic: Sequence e State
- 9. MWT– Progettazione di Applicazioni Web Henry Muccini 10 Punto di partenza Attori Servizi Relazioni ____________ Plan
- 10. Conceptual Model
- 11. MWT– Progettazione di Applicazioni Web Henry Muccini 16 Conceptual Model L’obiettivo di tale modello e’ quello di modellare il dominio dell’applicazione, senza considerare aspetti navigazionali o di presentazione Questi aspetti verranno analizzati in diagrammi successivi Si cerca di realizzare una “separation of concerns” Per realizzare un Conceptual Model, si utilizzano tecniche OO al fine di ...
- 12. MWT– Progettazione di Applicazioni Web Henry Muccini 17 Come costruire un Conceptual M. … – Identificare le classi «di contenuto» • Specificare attributi, operazioni e varianti rilevanti – Determinare associazioni fra classi – Definire relazioni di ereditarieta’ – Identificare dipendenze, interfacce e vincoli
- 13. MWT– Progettazione di Applicazioni Web Henry Muccini 18 Esempio 1: Analizzando I requisiti “Si voglia sviluppare un sito Web che offra informazioni circa una compagnia, gli impiegati e la loro relazione ai progetti, clienti e dipartimenti.” Esempio 1 Customer Employee Department Project Company
- 14. MWT– Progettazione di Applicazioni Web Henry Muccini 19 Identifichiamo, le Relazioni fra le classi Customer Employee Department Project Company 1 * has orders performsworksAt leads workFor consistOf Esempio 1
- 15. MWT– Progettazione di Applicazioni Web Henry Muccini 20 Identifichiamo, Attributi ed Operazioni delle classi -name Customer -name -e-mail -picture -publications Employee +addProject() -name Department +editProject() -name -budget -logo -... Project -name -address Company 1 * has orders performsworksAt leads workFor consistOf Esempio 1
- 16. MWT– Progettazione di Applicazioni Web Henry Muccini 21 Per finire, multiplicita’ Nota: questo passo e’ fondamentale -name Customer -name -e-mail -picture -publications Employee +addProject() -name Department +editProject() -name -budget -logo -... Project -name -address Company 1 * has orders performsworksAt leads workFor consistOf 0..1 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1 1..* 1 1 Esempio 1
- 18. MWT– Progettazione di Applicazioni Web Henry Muccini 23 Navigation Space Model • Obiettivo di questo modello e’ evidenziare quali oggetti possono essere visitati in una navigazione • Non analizza come (in quale ordine) tali oggetti vanno visitati • Tale modello viene costruito a partire dai Req e dal conceptual model • In pratica, si tratta di un Class Diagram Stereotipato
- 19. MWT– Progettazione di Applicazioni Web Henry Muccini 24 Elementi principali Tale modello e’ costituito da: – Navigation Class: • Rappresenta una classe la cui istanza puo’ essere visitata da un utente • Assumono gli stessi nomi delle classi nel Conceptual • stereotipo usato: <<navigational class>> – External Node: • Modella un obiettivo di navigazione dipendente da un'altra applicazione Web – Direct Navigability: • E’ una associazione fra due Navigation class • identifica un flusso di navigazione • e’ orientata • stereotipo usato: <<direct navigability>>
- 20. MWT– Progettazione di Applicazioni Web Henry Muccini 25 Esempio 1: Navigation Space Model (step 3.1) Esempio 1 -name Customer -name -e-mail -picture -publications Employee +addProject() -name Department +editProject() -name -budget -logo -... Project -name -address Company 1 * has orders performsworksAt leads workFor consistOf 0..1 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1 1..* 1 1 Conceptual Model
- 21. MWT– Progettazione di Applicazioni Web Henry Muccini 26Regole di mapping Conceptual Navigation Space Classi, del Conceptual, non rilevanti per la navigazione, possono essere omesse Informazioni sulle classi omesse possono comunque essere mantenute nelle altre classi come attributi Nuove associazioni possono essere aggiunte per una piu’ diretta navigazione, evitando path troppo lunghi. Scenari realizzabili a livello degli Use Case, possono aiutare in questo step.
- 22. MWT– Progettazione di Applicazioni Web Henry Muccini 27 Analizziamo l’esempio Classi, del Conceptual, non rilevanti per la navigazione, possono essere omesse Conceptual -name Customer -name -e-mail -picture -publications Employee +addProject() -name Department +editProject() -name -budget -logo -... Project -name -address Company 1 * has orders performsworksAt leads workFor consistOf 0..1 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1..* 1 1..* 1 1 Esempio 1
- 23. MWT– Progettazione di Applicazioni Web Henry Muccini 28 Informazioni sulle classi omesse possono comunque essere mantenute nelle altre classi come attributi Navigation Esempio 1
- 24. MWT– Progettazione di Applicazioni Web Henry Muccini 29 Nuove associazioni possono essere aggiunte per una piu’ diretta navigazione, evitando path troppo lunghi. Scenari realizzabili a livello degli Use Case, possono aiutare in questo step. Esempio 1
- 26. MWT– Progettazione di Applicazioni Web Henry Muccini 31 Navigational Structure Tale modello mette in evidenza come gli oggetti precedentemente identificati possono essere navigati Si tratta sempre di un Class Diagram stereotipato Vengono introdotti nuovi elementi: – Indici – Guided Tour – Queries … e solo successivamente – Menu
- 27. MWT– Progettazione di Applicazioni Web Henry Muccini 32 Indici Un oggetto indice e’ costituito da un insieme di indici, ognuno dei quali possiede un link ad una navigational class
- 28. MWT– Progettazione di Applicazioni Web Henry Muccini 33 Guided Tour Un Guided Tour è un oggetto che fornisce un accesso sequenziale alle istanze di una classe di navigazione. Puo’ coincidere con una visita dove abbiamo piu’ pagine collegate – Pensa a pagine Google
- 29. MWT– Progettazione di Applicazioni Web Henry Muccini 34 Guided Tour
- 30. MWT– Progettazione di Applicazioni Web Henry Muccini 35 Queries Indica la possibilita’ di eseguire una query E’ la sorgente di due associazioni che possono o creare un indice o restituire un elemento (vincolo {xor}).
- 31. MWT– Progettazione di Applicazioni Web Henry Muccini 36 Navigation Space Navigational Structure,v1 Prima di tutto bisogna modificare il Navigation Space model, eliminando attributi ed operazioni Navigation Space senza attributi ed operazioni Esempio 1
- 32. MWT– Progettazione di Applicazioni Web Henry Muccini 37Considera solo le associazioni nel navigation space con moltiplicita’, sul target, superiore a 1. Per ogni associazione del genere, scegli un access element per realizzare la navigazione indice guided indice query indice indice Esempio 1
- 33. MWT– Progettazione di Applicazioni Web Henry Muccini 38 Arricchisci il modello esistente al momento, con gli access element identificati. Ricordarsi di spostare i roles names delle associazioni, so that arrivino fino all’access element Larger picture Esempio 1
- 34. MWT– Progettazione di Applicazioni Web Henry Muccini 39 Esempio 1
- 35. MWT– Progettazione di Applicazioni Web Henry Muccini 40 Regole di Mapping Navigation Space -> Navigation Structure, v1 1. Le associazioni bi-direzionali, che hanno molteplicità maggiore di uno ad entrambi gli estremi, sono sostituite con due associazioni unidirezionali. 2. Le associazioni bi-direzionali, che hanno molteplicità maggiore di uno ad un solo capo, sono sostituite con un’associazione diretta verso l’estremo con molteplicità maggiore di uno. La navigazione nell’altra direzione è garantita dall’uso dell’albero di navigazione, che sarà introdotto dopo nel progetto. 3. Si considerino solo quelle associazioni unidirezionali del modello dello spazio di navigazione che hanno molteplicità maggiore di uno.
- 36. MWT– Progettazione di Applicazioni Web Henry Muccini 41 Regole di Mapping Navigation Space -> Navigation Structure, v1 4. Per ogni associazione di questo tipo, si scelga una o più primitive di accesso per realizzare la navigazione. 5. Il modello dello spazio di navigazione è quindi completato con le primitive d’accesso corrispondenti. I nomi dei ruoli della navigazione nel modello dello spazio di navigazione adesso sono spostati nelle primitive d’accesso. 6. Si aggiungano dei vincoli per modellare invarianti e condizioni. Questi sono dedotti dalla descrizione dettagliata del modello dei casi d’uso.
- 37. MWT– Progettazione di Applicazioni Web Henry Muccini 42 Menu’ Menu è un indice o un insieme di elementi omogenei, come un indice, un guided tour, una query, un’istanza di una classe di navigazione o un altro menu. Sono modellati tramite degli oggetti composti che contengono un numero finito di menu item. Ogni menu item ha un nome costante ed un link che può puntare o ad un’istanza di una classe di navigazione o ad una primitiva d’accesso.
- 38. MWT– Progettazione di Applicazioni Web Henry Muccini 43 Menu’
- 39. MWT– Progettazione di Applicazioni Web Henry Muccini 44Navigational Structure, v1 Considerate le classi con almeno una navigational class uscente Navigational Structure Esempio 1
- 40. MWT– Progettazione di Applicazioni Web Henry Muccini 45 Associa un menu’ item ad ogni classe con almeno una associazione uscente. Il Menu’ risultera’ essere una componente composita della classe Esempio 1
- 41. MWT– Progettazione di Applicazioni Web Henry Muccini 46 Navigational Structure Model Esempio 1 Differenza Rispetto al Navigation Space M.
- 42. MWT– Progettazione di Applicazioni Web Henry Muccini 47 Navigational Structure Model Esempio 1
- 43. MWT– Progettazione di Applicazioni Web Henry Muccini 48 Regole di Mapping Navigation Space -> Navigation Structure, v2 1. Si considerino quelle associazioni, che hanno come sorgente una classe di navigazione. 2. Si associ ad ogni classe di navigazione, che ha (nell’ultimo diagramma ottenuto) almeno un’associazione uscente, una classe menu corrispondente. L’associazione fra la classe di navigazione e la sua classe menu è una composizione. 3. Si riorganizzi un menu con degli eventuali sottomenu.
- 44. MWT– Progettazione di Applicazioni Web Henry Muccini 49 Regole di Mapping Navigation Space -> Navigation Structure, v2 4. Si introduca per ogni ruolo, ai capi delle associazioni dirette introdotte nel modello precedente, un corrispondente menu item. Per default, il nome del ruolo è usato come nome del menu item. 5. Ogni associazione che nel modello precedente ha come sorgente una classe di navigazione adesso diventa un’associazione del menu item corrispondente introdotto nel passo precedente. 6. Si aggiungano dei vincoli per aggiungere precisione al modello.