View
221
Download
4
Category
Preview:
Citation preview
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
Documenti su WebDocumenti su Web
» 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
Documenti su WebDocumenti su Web
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
Il browser HTTPIl browser HTTP
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)
Il browser HTTPIl browser HTTP
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:fraterna@elet.polimi.it><a href = mailto:fraterna@elet.polimi.it>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:fraterna@elet.polimi.it ><a href = mailto:fraterna@elet.polimi.it > <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)<!-- inizio commento - fino a--> 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
Recommended