1 Web Information Systems Progettazione di siti web Prof. Stefano Paraboschi

2 Il Web: una grande opportunità Il Web (e i browser) sono diventati uninterfaccia standard per lutente finale –Il protocollo è molto semplice e pubblico –Linterfaccia è uniforme –Il contenuto è molto ricco (in ampiezza e profondità) Sta diventando uninterfaccia standard per accedere a diversi servizi, per sistemi informativi e basi di dati di ogni tipo

3 Integrazione di sistemi informativi Varie motivazioni: –Interazione di componenti sviluppati indipendentemente –Cooperazione di processi di business precedentemente separati –Cooperazione (o fusione) di aziende Requisiti tipici: –distribuzione –eterogeneità –autonomia

4 Una situazione classica La richiesta degli utenti: –I servizi informatici dovrebbero diventare come gli altri servizi di prima necessità (gas, telefono, energia elettrica, etc.) La risposta tipica: –I servizi informatici sono legati strettamente alle applicazioni e soluzioni standard sarebbero troppo limitate Rimane il dubbio –Quale potrebbe essere un servizio informatico standard?

5 La grande opportunità Internet (con le Intranet e le Extranet) e il World-Wide-Web offrono una grande opportunità Una pila di protocolli semplificata: –cooperazione (di applicazioni) –interoperabilità (ftp, telnet, mail, http,...) –connettività La standardizzazione risale la pila (i servizi divengono standardizzati e scendono: esempio, i DBMS)

6 Sistemi informativi su Web (WIS) (Nota: ci riferiamo al Web come strumento produttivo; il surfing è marginale) Pubblicazione (permanente?) e consultazione su Web: siti catalogo –richiedono un approccio sistematico, sempre più importante al crescere delle dimensioni: i dati possono cambiare, come si evolve il sito? i siti presentano ridondanza, per vari motivi –luso di basi di dati può risultare conveniente (spesso poi la base di dati esiste già!) Transazioni su Web: perché solo interrogazioni? –il sito può essere aggiornato attraverso il Web stesso –il browser diventa uninterfaccia standard per sistemi informativi

7 WIS, nuove applicazioni Commercio elettronico: –se i cataloghi sono la principale applicazione dei siti di consultazione, è naturale pensare alla vendita per corrispondenza (ma con funzionalità aggiuntive: commenti, discussioni, verifiche); sicurezza e affidabilità diventano essenziali Gruppi di discussione: ad esempio, recensioni di libri Sistemi di supporto al lavoro cooperativo: workflow Sistemi embedded: telefonini, sistemi di navigazione, Internet TV, … Nota: alcune applicazioni potrebbero essere su Intranet (con possibilità di uniformazione degli strumenti) o Extranet (attività B2B)

8 Sistemi informativi su Web Complessità dei dati Complessità dei servizi Siti data-intensive Siti di presenza Siti orientati ai servizi WIS

9 Portali Siti che supportano l'utente nell'utilizzo del Web: –servizi generali: posta elettronica, gruppi di discussione motori di ricerca e/o ricerca guidata, con classificazione hosting di siti –servizi specializzati (portali "verticali"), dipendenti dallo specifico dominio, in particolare con: basi di dati "locali" specializzate integrazione a grana fine di informazioni e servizi locali e/o offerti (più o meno spontaneamente) da terzi

10 Web e DB: un conflitto? le basi di dati sono ben strutturate e organizzate quanta struttura e organizzazione esiste nel Web? dipende sia dalla sorgente che dallutente vi sono diversi livelli di granularità e struttura per I propri dati bisogna essere in grado di realizzare delle conversioni (da DB a HT e viceversa)

11 Due mondi? Le basi di dati possono essere interrogate in modo flessibile; gli ipertesti sono facili da accedere, ma non possono essere interrogati I siti Web sono spesso difficili da esplorare, usare e monitorare Le metodologie di progetto per basi di dati sono consolidate I siti Web sono difficili da progettare ed è difficile fare manutenzione

12 Approcci per Database bottom-up: si accede alle informazioni presenti nelle sorgenti Web, e si integrano top-down: si progettano e si mantengono I siti Web globale: si integrano I siti esistenti e si offrono informazioni attraverso nuovi siti

13 Progettazione Web, prospettive Il Web è un sistema informativo: eccessivo, perché lintero Web non è certo sotto il controllo di un singolo soggetto (neanche di più soggetti coordinati fra loro) Ogni pagina è diversa, potenzialmente autonoma, e la considero separatamente: lestremo opposto, ugualmente impraticabile se le pagine di interesse sono più di qualche unità e vanno mantenute aggiornate e coordinate Prospettiva equilibrata: un sito è un sistema informativo e il Web è una federazione di siti fra loro autonomi; ciascun sito è sotto la responsabilità di un soggetto (o un gruppo di soggetti)

14 Web-based information systems: il punto di vista dei database Data-Intensive Web Sites: –grandi quantità di dati –significatività della struttura ipertestuale

15 Problemi di molti siti Web (design) le informazioni sono spesso male organizzate e difficili da trovare non è neppure chiaro quali siano le informazioni disponibili la struttura di accesso è casuale e vi sono molti riferimenti pendenti lo stile della presentazione è eterogeneo

16 Problemi di molti siti Web (manutenzione) difficile aggiornare il contenuto (tipologia e valori) difficile cambiare la struttura definita inizialmente difficile cambiare i dettagli della presentazione

17 Esistono pagine con la stessa struttura

18 Indipendenza dei dati negli ipertesti: stessi dati, diversa struttura ipertestuale

19 Indipendenza dei dati negli ipertesti: stessi dati e stessa struttura ipertestuale, diversa presentazione

20 Hypertext data-independence Dati quali informazioni vengono offerte attraverso il sito e quali sono I dettagli concettuali e lorganizzazione logica Ipertesto come sono organizzati I dati in pagine e quali link navigazionali collegano le diverse pagine Presentazione laspetto di ogni informazione nelle pagine

21 Design Dati scelta del contenuto Ipertesto scelta dellorganizzazione in pagine e dei cammini navigazionali Presentazione definizione del layout e degli oggetti grafici Manutenzione Dati cambiamento del (tipo di) contenuto Ipertesto modifica dellorganizzazione in pagine e dei cammini navigazionali Presentazione modifica del layout e degli oggetti grafici

22 Modelli e componenti datiER e Relazioni ipertesto presentazioneHTML Ciò che manca è un modello per gli ipertesti!

23 Metodologie per lo sviluppo di siti Web data-intensive Nei siti Web data-intensive (e spesso anche in altri siti) vi sono (molte) pagine con una struttura simile (o identica) Le metodologie WebML (Politecnico di Milano) e Araneus (Università di Roma Tre) partono da questa considerazione

24 Pagine con la stessa struttura

25 Pagine con un'altra struttura

26 La metodologia Araneus Università di Roma Tre

27 Una pagina Web

28 A page-scheme: ProfessorPage ProfessorPage Name Position Address ResearchList Area ToResP

29 ADM (Araneus Data Model): a logical model for Web hypertexts page-schemes unique pages simple attributes –text, images,... –link (anchor, URL) complex attributes: lists (possibly nested) heterogeneous union form (as virtual list over form fields and link to the result)

30 A Web page (containing a list of links)

31 A unique page-scheme: ProfessorListPage ProfessorListPage ProfessorList Name ToProfP

32 An ADM Scheme ProfessorListPage ProfessorList Name ToProfP ProfessorPage Name Position Address ResearchList Area ToResP

33 Heterogeneous Union and Forms

34 Heterogeneous Union and Forms in ADM ProfessorListPage ProfessorList Name ToProfP ProfessorPage Name Position Address ResearchList Area ToResP Name Submit U SearchProfPage

35 Data Models ER ADM Database Conceptual Scheme (entities - relationships) Hypertext Logical Scheme (page-schemes, links) There is a lot of distance between the two!

36

37

38

39 A simple ER scheme

40 An ADM scheme

41 NCM Hypertext Conceptual Scheme (macroentities, directed relationships, aggregations)

42 Data Models Hypertext Logical Scheme (page-schemes, links) ER NCM Hypertext Conceptual Scheme (macroentities, directed relationships, aggregations) ADM NCM fills the gap between the two Database Conceptual Scheme (entities - relationships)

43 Navigation Conceptual Model (NCM) Hypertext Conceptual Features Which concepts should be the hypertext nodes Which should be the navigation paths between nodes How nodes should be aggregated to build the hierarchical access structure NCM Constructs Macroentity Directed Relationship Aggregation

44 NCM: Macroentities and directed relationships Professor Course Student Teacher Tutorship Name Room Name Description Day Room Hour Lesson N 1:1 1:N 1:1 Name...

45 NCM: aggregation nodes Professor Course Student Teacher Tutorship 1:1 1:N 1:1 Seminar People Department Activities

46 An NCM scheme

47

48

49 The Araneus Methodology Database conceptual design Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

50 design from scratch Database conceptual design Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

51 design from an existing database (with an ER scheme) Database conceptual design Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

52 design from an existing database (without an ER scheme) Database conceptual design (reverse engineering) Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

53 Hypertext conceptual design: from ER to NCM Database conceptual design Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

54 Hypertext Conceptual Design ER scheme NCM Scheme step 1 choose and describe macroentities: design views over the input ER scheme step 2 choose navigation paths step 3 shape the hypertext access structure on the basis of (bottom-up) conceptual aggregation

55 Hypertext Conceptual Design ER scheme NCM Scheme u step 1 choose and describe macroentities: design views over the input ER scheme +usually it corresponds to de-normalize the input ER scheme Course Lesson Course Name Description Name Description Day Hour Lesson Day Hour 1:1 1:N ER NCM

56 Hypertext Conceptual Design ER scheme NCM Scheme u step 2 choose navigation paths +it may introduce redundancies Professor Research-Group 1:1 1:N ERNCM Paper Professor Research-Group 1:1 1:N Paper 1:N

57 Hypertext Conceptual Design ER scheme NCM Scheme u step 3 shape the hypertext access structure +it is based on bottom-up conceptual aggregations Professor Research-Group 1:1 1:N NCM Seminar Professor Research-Group 1:1 1:N Seminar... Research Activities

58 The Input ER scheme

59 The resulting NCM scheme

60 Hypertext logical design: from NCM to ADM Database conceptual design Hypertext logical design Presentation design Page Generation Site generation Presentation design Requirements analysis Database logical design Hypertext logical design Hypertext conceptual design

61 Hypertext Logical Design NCM scheme ADM Scheme u step 1 map each macroentity into either l a page-scheme or a list inside a page-scheme u step 2 map each directed relationship into a (list of) link attribute(s) u step 3 map each aggregation into a unique page- scheme with link attributes to the target page-schemes

62 Hypertext Logical Design Step 1 (example)

63 Hypertext Logical Design Step 1 (example)

64 Hypertext Logical Design Step 2 (example)

65 Hypertext Logical Design Step 3 (example)

66 Resulting ADM SchemeResulting ADM Scheme

67 Maintenance The Schemes help designers to maintain the hypertext structure Maintenance activities correspond to apply scheme transformations: –introduce multilevel lists –introduce forms –split pages –...

68 Maintenance: example