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

1

Web Information Systems Progettazione di siti web

Prof. Stefano Paraboschi

2

Il Web: una grande opportunità

• Il Web (e i browser) sono diventati un’interfaccia standard per l’utente finale– Il protocollo è molto semplice e pubblico– L’interfaccia è uniforme– Il contenuto è molto ricco (in ampiezza e

profondità)

• Sta diventando un’interfaccia 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

– l’uso 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 un’interfaccia 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 WebComplessitàdei dati

Complessitàdei servizi

Siti data-intensive

Siti di presenza

Siti orientatiai 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 dall’utente• 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é l’intero 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”: l’estremo 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 l’organizzazione logica”

• Ipertesto “come sono organizzati I dati in pagine e quali link navigazionali collegano le diverse pagine”

• Presentazione “l’aspetto di ogni informazione nelle pagine”

21

Design

• Datiscelta del contenuto

• Ipertestoscelta dell’organizzazione in pagine e dei cammini navigazionali

• Presentazionedefinizione del layout e degli oggetti grafici

Manutenzione

• Daticambiamento del (tipo di) contenuto

• Ipertestomodifica dell’organizzazione in pagine e dei cammini navigazionali

• Presentazionemodifica del layout e degli oggetti grafici

22

Modelli e componenti

dati ER e Relazioniipertestopresentazione HTML

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

NamePositionAddress

EMailResearchList

AreaToResP

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

ProfessorListNameToProfP

32

An ADM Scheme

ProfessorListPage

ProfessorListNameToProfP

ProfessorPage

NamePositionAddress

EMailResearchList

AreaToResP

33

Heterogeneous Union and Forms

34

Heterogeneous Union and Forms in ADM

ProfessorListPage

ProfessorListName

ToProfP

ProfessorPageNamePosition

Address

EMailResearchList

Area

ToResP

Name

Submit

U

SearchProfPage

35

Data Models

ER

ADM

Database ConceptualScheme

(entities - relationships)

Hypertext LogicalScheme

(page-schemes, links)

There is a lot of ‘distance’ between the two!

39

A simple ER scheme

40

An ADM scheme

41

NCM Hypertext ConceptualScheme

(macroentities,directed relationships,

aggregations)

42

Data Models

Hypertext LogicalScheme

(page-schemes, links)

ER

NCM Hypertext ConceptualScheme

(macroentities,directed relationships,

aggregations)ADM

NCM fills the gap between the two

Database ConceptualScheme

(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

Email

Name

Description

Day

Room

HourLessonN

1:1

1:N

1:1Name

...

45

NCM: aggregation nodes

Professor CourseStudent

TeacherTutorship1:11:N1:1

Seminar

People

Department

Activities

46

An NCM scheme

49

The Araneus Methodology

Database conceptual design

Hypertext logical design

Presentation design

Page GenerationSite generation

Presentation design

Requirements analysis

Database logical design


Hypertext conceptual design

50

design from scratch



Presentation design


Presentation design





51

design from an existing database

(with an ER scheme)



Presentation design


Presentation design





52

design from an existing database

(without an ER scheme)

Database conceptual design(reverse engineering)


Presentation design


Presentation design





53

Hypertext conceptual design:from ER to NCM



Presentation design


Presentation design





54

Hypertext Conceptual DesignER scheme NCM Scheme

• step 1 choose and describe macroentities: design “views” over the input ER scheme

• step 2choose navigation paths

• step 3shape the hypertext access structure on the basis of (“bottom-up”) conceptual aggregation

55


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

DescriptionName

Description

Day

HourLesson

Day

Hour

1:1

1:N

1:N

ER NCM

56


step 2 choose navigation paths

it may introduce redundancies

Professor

Research-Group

1:1

1:N

ER NCM

Paper

Professor

Research-Group

1:1

1:NPaper

1:N

1:N

1:N

1:N

1:N

1:N

57


step 3 shape the hypertext access structure it is based on “bottom-up” conceptual

aggregations

Professor

Research-Group

1:1

1:N

NCM NCM

Seminar

Professor

Research-Group

1:1

1:N

Seminar

...

...

ResearchActivities

58

The Input ER scheme

59

The resulting NCM scheme

60

Hypertext logical design:from NCM to ADM



Presentation design


Presentation design





61

Hypertext Logical DesignNCM scheme ADM Scheme

step 1 map each macroentity into either

a page-scheme or a list inside a page-scheme

step 2map each directed relationship into a (list of) link attribute(s)

step 3map each aggregation into a unique page-scheme with link attributes to the target page-schemes

62

Hypertext Logical DesignStep 1 (example)

63


64


65


66

R e s u l t i n g A D M S c h e m e

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

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

Documents

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