Basi di dati e sistemi informativi su World Wide Web (WWW) Lucidi di B. Pernici, S. Castano, S....

Basi di dati e sistemi informativi su World Wide Web (WWW)

Lucidi di B. Pernici, S. Castano, S. Paraboschi

Introduzione

Sistemi informativi in rete:» Basati su web

– Tipologie– Qualita’ di un sistema informativo basato su Web– Introduzione alla tecnologia Web– Progettazione

Aspetti generali Metodologia di progettazione Progettazione della struttura

WORLD WIDE WEB

BREVE STORIA DI WWW PAGINE IN WWW ASPETTI TECNICI

DEFINIZIONE DI WWW

WORLD WIDE WEB (Web - WWW)

Sviluppato presso il CERN (1990, T. Berners-Lee)

per permettere a collaboratori presso siti diversi di condividere idee e tutti gli aspetti di un progetto comune

» sistema ipermediale

molteplici media + interconnessioni +

accesso prevalentemente navigazionale

» basato su Internet

BREVE STORIA DI WWW

marzo 1989 proposta iniziale presso il CERN maggio 1991 general release su macchine centrali del CERN giugno 1991 seminario su WWW al CERN febbr. 1993 NCSA Mosaic maggio 1994 prima conferenza WWW luglio 1994 annuncio creazione W3 Organization dicembre 1994 stimate 800000 pagine Web dicembre 1995 4.a Conferenza WWW (Boston) maggio 1996 5.a Conferenza WWW (Parigi) 1997 6.a Conferenza WWW (Los Angeles) - annuale

BREVE STORIA DI WWW

Rapidissima crescita iniziale

Siti registrati

aprile 1993 62

aprile 1994 829

maggio 1994 1248 (3000 tot)

luglio 1995 23000 tot

Non si parla piu’ di registrazione» Cfr: Google indicizza 2.200 milioni di pagine (2002)

Internet e Web

Internet: federazione di reti che comunicano mediante protocolli della famiglia TCP/IP (Transmission Control Protocol/Internet Protocol)

» ciascun nodo (calcolatore) ha un indirizzo numerico (indirizzo IP) unico nella rete mondiale di 32 bit rappresentato come 4 interi separati da punti (es., 193.204.162.9). A ciascun calcolatore e’ associato anche un nome simbolico (es., gauss.inf.uniboh.it) usato nelle applicazioni per fare riferimento all’indirizzo.

» domain name server (DNS): calcolatore che conosce le corrispondenze tra nomi e indirizzi IP numerici.

» si puo’ fare riferimento a qualunque nodo di cui si conosca l’indirizzo numerico direttamente, oppure attraverso un name server.

World Wide Web

Basato sul concetto di ipertesto: documento con struttura non sequenziale, costituito da varie porzioni collegate per favorire la consultazione a seconda delle esigenze (no rigidita’ di una struttura sequenziale)

Prefazione

Cap. 1

Cap. 2

Cap. 3

par. 1.1

par. 1.2

par. 2.1

par. 2.2

par. 3.1

par. 3.2

World Wide Web

WWW: ipertesto multimediale che collega documenti di vario genere distribuiti su tutta la rete Internet» Collegamenti tra documenti diversi prediposti da

persone diverse in momenti diversi» Legami all’interno di un documento e tra

documenti diversi sono analoghi» Documenti non solo testuali ma anche

multimediali (ipermedia)» I documenti si trovano in generale su nodi diversi

della rete

Testo G

Testo X

Testo W

Nodo A

Nodo C

Nodo B

Documenti su WebDocumenti su Web

Testo Y

Immagine Z Testo K

Testo U

Uniform Resource Locator (URL)Uniform Resource Locator (URL)

E’ una stringa strutturata, ad esempio:http://www.elet.polimi.it/people/fraterna.html

Protocollo: http, ma anche ftp e gopher Indirizzo della macchina:

» simbolico: www.elet.polimi.it» numerico (IP): 131.175.21.1» puo’ includere il numero di porta (es. :8080)

Path: sequenza di direttori Nome risorsa: identificativo di un file

» se la risorsa e’ un file html, puo’ includere un indirizzo interno, es.

fraterna.html#curriculum

Integrazione tecnologie

Elaborazione e trasmissione dati telefonia TV

Internet come

elemento di integrazione

Tecnologie dell’integrazione

Reti informatiche: Internet» servizi di rete: HTTP (ipertesti), e-mail (messaggi), DNS

(name server)

Terminali d’accesso (dispositivi)» Personal computer» Personal Digital Assistant (wireless)

Telefono: SMS (messaggi), WAP (ipertesti), telefoni intelligenti

TV: web TV (set top box per collegare apparecchio televisivo a Internet via servizio telefonico)

Accesso multicanale

Servizi dell’informazioneServizi dell’informazione

contenutocontenuto distribuzionedistribuzione utentiutenti

Catena del valoreCatena del valore

contenutocontenuto

Tempo liberoTempo libero

Video on demandVideo on demand

Video gameVideo game

EditoriEditori

Giornali /AziendeGiornali /Aziende

Reti commercialiReti commerciali

CataloghiCataloghi

PubblicitàPubblicità

Conversione

Compressione

Datawarehouse

Conversione

Compressione

Datawarehouse

distribuzionedistribuzione

Centro servizi

e gestione

di

gateway

Centro servizi

e gestione

di

gateway

Rete di

trasporto

fibre e ibride

Rete di

trasporto

fibre e ibride

utentiutenti

Rete di accessoRete di accesso

Didattica, affari e governoDidattica, affari e governo

ServerServerLANLAN

Set topSet top

ResidenzialeResidenziale

World Wide Web

Tecnologia basata su:» Un protocollo di rete (Internet – TCP/IP):

– HTTP: HyperText Transfer Protocol

» Un linguaggio HTML per scrivere i documenti ipertestuali: presentazione + contenuto

– Linguaggio di mark up (con TAG)

Gli attori di HTTPGli attori di HTTP

•cliente cliente (browser):(browser):genera richieste genera richieste di risorsedi risorse

•(origin) (origin) server:server:depositario depositario della risorsa della risorsa richiestarichiesta

Formato dei documentiFormato dei documenti

I documenti risiedono sul server come file e vengono inviati al client usando il campo entity-body della risposta

ES: Ipertesto = file ASCII scritto secondo la sintassi HyperText Markup Language (HTML)

Estensioni tipiche del file: *.html *.htm Il documento puo’ contenere inserti multimediali

(immagini, audio, video)» il programma client carica e visualizza il testo» poi richiede al server i file corrispondenti agli

inserti multimediali


» La creazione di documenti multimediali collegando tra loro documenti diversi si realizza mediante elementi di HTML che si chiamano ancore.

» Il riferimento all’elemento “puntato” da un’ancora e’ specificato come URL (Uniform Resource Locator): puo’ essere un elemento locale (e.g., pagina html) oppure una risorsa di un altro nodo della rete – <a href=“http://www.inf.uniboh.it/utenti/tizio/ tiziohome.html”> tizio </a>

– quest’ancora richiama con il protocollo HTTP il file tiziohome.html della directory utenti/tizio del server http://www.inf.uniboh.it)

tizio

http://www.inf.uniboh.it/utenti/tizio/tiziohome.html


Architettura client-server» I documenti contenenti collegamenti ipertestuali

sulla rete risiedono sui server» I documenti HTML possono essere visualizzati per

mezzo di opportuni clienti chiamati browser Web (presentano testo formattato secondo i comandi HTML; il testo associato alle ancore è visualizzato in maniera enfatizzata e per accedervi occorre eseguire un clic con il mouse).

Il browser HTTPIl browser HTTP

Applicazione in grado di:» accedere alla rete secondo il protocollo HTTP» richiedere risorse identificate da un URL a un server» interpretare e rendere a video la risposta del server


I diversi prodotti differenziano per:» La versione di HTML trattata» La capacita’ di trattare estensioni non standard di HTML (ad es.

JavaScript, VBscript)» La capacita’ di eseguire programmi (es. Java)


Le capacita’ possono essere ampliate con l’aggiunta di applicazioni esterne (plug-in):» per trattare audio, video, animazioni» per visualizzare interfacce 3D (ed es. VRML)» per eseguire applicazioni gestionali

Il server HTTPIl server HTTP

Funzioni base:» accesso alla rete secondo il protocollo HTTP» invio di risorse identificate da un URL a un client» controllo degli accessi» lancio di programmi in risposta a richieste» registrazione degli accessi (logging)

Funzioni avanzate:» monitoraggio e amministrazione» connessione a basi di dati» esecuzione efficiente di applicazioni esterne

Protocollo HTTP

I browser e i server comunicano attraverso il protocollo HTTP (HyperText Transfer Protocol) che realizza lo scambio di informazioni (utilizzando TCP a livello sottostante) nelle seguenti 4 fasi:

» apertura della connessione: il browser (client) contatta il server con l’indirizzo specificato nella URL verificando correttezza e disponibilità

» richiesta: il client invia un messaggio al server HTTP con la richiesta di un servizio, i dettagli delle risorsa ed eventuali parametri;

» risposta: il server comunica al client l’esito della richiesta e i risultati in caso positivo, preceduti da informazioni sugli stessi

» chiusura della connessione: la connessione termina senza che il server tenga memoria alcuna delle operazioni svolte (si dice il protocollo HTTP è stateless, ovvero senza memoria)

Gli attori di HTTPGli attori di HTTP

•cliente cliente (browser):(browser):genera richieste genera richieste di risorsedi risorse

•(origin) (origin) server:server:depositario depositario della risorsa della risorsa richiestarichiesta

Richiesta connessione

connected

Richiesta documento

documento

HyperText Markup LanguageHyperText Markup Language

•Linguaggio di descrizione di testi Linguaggio di descrizione di testi secondo lo schema SGML (Standard secondo lo schema SGML (Standard General Markup Language)General Markup Language)•Marcatura:Marcatura:

+ marcatura+ marcatura

<HTML> <HTML> <Head><Head><Title> <Title> </Title></Title></Head></Head><Body><Body></Body> </Body> </HTML></HTML>

contenutocontenuto

Home Page Home Page didi

Piero FraternaliPiero Fraternali

Fraternalititolo

IL LINGUAGGIO HTML

HTML: un linguaggio di mark-up basato su SGML - Standard Generalized Markup

Language (standard ISO8879, 1986) linguaggio logico piu' che fisico la pagina potra' assumere aspetti diversi

su browser diversi tag, ancore, link

tabelle avanzate, font, allineamento del tabelle avanzate, font, allineamento del testo, sub/superscript, testo attorno a testo, sub/superscript, testo attorno a immaginiimmagini

la versione originale: comandi di la versione originale: comandi di formattazione, liste, riferimenti formattazione, liste, riferimenti ipertestuali, immaginiipertestuali, immagini

level 1level 1

Evoluzione di HTMLEvoluzione di HTML

tabelle, form di inserimento dati, frame, tabelle, form di inserimento dati, frame, mappe client-sidemappe client-side

level 2level 2

level 3level 3

cascading style sheets (controllo cascading style sheets (controllo posizione e oggetti grafici posizione e oggetti grafici sovrapponibili), simboli matematicisovrapponibili), simboli matematici

level 4level 4

Concetti generali di HTMLConcetti generali di HTML

• La marcatura prevede l’uso di etichette, La marcatura prevede l’uso di etichette, dette TAGSdette TAGS

• I tag viaggiano (quasi) sempre in coppiaI tag viaggiano (quasi) sempre in coppia• <tag> testo </tag><tag> testo </tag>

• Il significato di un tag puo’ essereIl significato di un tag puo’ essere modificato tramite attributi modificato tramite attributi

• <tag attributo=valore> testo </tag><tag attributo=valore> testo </tag>•Es:Es:•<body bgcolor="#6699CC" text="#000000" ><body bgcolor="#6699CC" text="#000000" >

Struttura del documentoStruttura del documento

• File ASCII, struttura generale:File ASCII, struttura generale: <html> intestazione + corpo </html><html> intestazione + corpo </html>

• Intestazione: <head> .. </head>Intestazione: <head> .. </head> contiene informazioni sul documento: contiene informazioni sul documento:

• titolo <title> .. </title>titolo <title> .. </title>

•Corpo: <body> .. </body>Corpo: <body> .. </body>•contiene il testo del documento e i tag contiene il testo del documento e i tag per la resa visivaper la resa visiva

Formattazione del testoFormattazione del testo

• grassetto grassetto <b> <b> provaprova </b> </b> • corsivocorsivo <i> <i> provaprova </i> </i> • sottolineatosottolineato <u> <u> provaprova </u> </u>

Provaprovaprova

Formattazione del testoFormattazione del testo

•Dimensioni: Dimensioni: <font size=+3> <font size=+3> provaprova</font></font> <font size=9> <font size=9> provaprova</font> </font> •Colore RGB Colore RGB (rosso):(rosso): <font color=“#FF0000”> <font color=“#FF0000”> provaprova</font></font>•Colore background (bianco): <body Colore background (bianco): <body bgcolor="#FFFFFF">bgcolor="#FFFFFF">

TitoliTitoli

• titolo 1titolo 1 <h1>Titolo livello 1</h1> <h1>Titolo livello 1</h1> • titolo 2titolo 2 <h2>Titolo livello 2<h2>Titolo livello 2 </h2></h2>• titolo 3titolo 3 <h3>Titolo livello 3<h3>Titolo livello 3 </h3></h3>

Titolo di livello1Titolo di livello2Titolo di livello 3

Paragrafi, allineamentiParagrafi, allineamenti

• paragrafi: <p>testo</p>vai a capo: <p>testo</p>vai a capo

testovai a capo

prova prova

• testo formattato: <pre>prova prova</pre>

ListeListe

<ul><ul> <li> uno </li> <li> uno </li> <li> due </li> <li> due </li></ul></ul>

•uno•due

NB: per liste numerate NB: per liste numerate si usa <ol>si usa <ol>

Collegamenti ipertestualiCollegamenti ipertestuali

• Esempio di collegamento : Visita laEsempio di collegamento : Visita la<a href = http://www.elet.polimi.it/fraterna.html><a href = http://www.elet.polimi.it/fraterna.html>pagina di Piero </a>pagina di Piero </a>

Visita la pagina di Piero

Collegamenti ipertestualiCollegamenti ipertestuali

• Uso della posta: Uso della posta: Scrivi aScrivi a<a href = mailto:[email protected]><a href = mailto:[email protected]>Piero Fraternali</a>Piero Fraternali</a>

Scrivi a Piero Fraternali

ImmaginiImmagini

<p align=center >Ecco la mia foto: </p><p align=center >Ecco la mia foto: </p> <img src = “piero.gif” width=200 height=400 <img src = “piero.gif” width=200 height=400 alt=“Foto di Piero”> alt=“Foto di Piero”>

Ecco la mia foto

Foto di PieroFoto di Piero

GIF

formato GIF (Graphics Interchange Format)

sviluppato da Compuserve per trasferire immagini su linee telefoniche

colore 8 bit, compressione da 1,5:1 a 2:1

Immagine+collegamentoImmagine+collegamento

<p align=center >Clicca sulla foto per scrivermi: </p><p align=center >Clicca sulla foto per scrivermi: </p> <a href = mailto:[email protected] ><a href = mailto:[email protected] > <img src = “piero.gif” width=200 height=400 <img src = “piero.gif” width=200 height=400 alt=“Foto di Piero”> </a> alt=“Foto di Piero”> </a>

Clicca sulla foto per scrivermi

Foto di PieroFoto di Piero

Altri comandi

<BR> break (a capo semplice) il testo non viene interpretato<HR> inserisce una riga orizzontale continua

TabelleTabelle

<table border="1">

<tr>

<td bgcolor="#00FF00">cella 1</td>

<td >cella 2</td>

</tr>

<tr >

<td >cella 3</td>

<td >cella 4</td>

</tr>

TabelleTabelle

cella 1 cella 2

cella 3 cella 4

Frame

Divisione dello schemo in sottopagine

<html>

<frameset cols="150,*" frameborder="NO" border="0" framespacing="0" rows="*">

<frame name="menu" scrolling="NO" noresize src="menu.html"> <frame name="main" src="destra.html"></frameset><noframes><body bgcolor="#FFFFFF"></noframes></html>

menu

destra

Come creare un sito con pagine “statiche”

Editare le pagine con editor di testo (salvare come testo) o con Netscape composer, Dreamweaver, Frontpage, …

Collegare le pagine tramite ancore (URL “relative” alla posizione corrente oppure con indirizzi completi)

Caricarle sul file system, in posizione accessibile da un server web (“spazio web”)

www.boh.it

STANDARD

ISO

International Organization of Standardization IETF

Internet Engineering Task Force

http://www.ietf.cnri.reston.va.us/home.html

draft -> proposed (con decisioni via e-mail)

de facto standard WWW - W3C

vicino a standard IETF (indirizzi + protocolli + linguaggio markup)

PAGINE IN WWW

http://www.w3.com/World Wide Web Consortium(MIT + INRIA; progetto Commissione Europea Webcore)

www.html.it

Basi di dati e sistemi informativi su World Wide Web (WWW) Lucidi di B. Pernici, S. Castano, S....

Documents

Transcript of Basi di dati e sistemi informativi su World Wide Web (WWW) Lucidi di B. Pernici, S. Castano, S....