Upload
debora-bruno
View
229
Download
0
Embed Size (px)
Citation preview
a.a. 2004/05 Tecnologie Web 1
INTRODUZIONE• Che cos’è Internet
• Che cos’è il WWW (browsers, url, http, …)
• Internet, Intranet, Extranet
• Pagine statiche: HTML, CSS
• Pagine dinamiche: JavaScript (client-side); ASP, PHP e JSP(server-side)
• Principi di HCI: usabilità, accessibilità
a.a. 2004/05 Tecnologie Web 2
• www.learnthenet.com (tutorial su vari aspetti, soprattutto pratici, di Internet) solo on-line
• Laganà, Righi, Romani, Informatica. Concetti e sperimentazioni, Apogeo, 2003 [cap. 3 (3.1, 3.2, 3.3) + pp.205-208]
• Paparella, Torre, Tecnologia internet e comunicazione aziendale, UTET, 1999 [cap 2 (da 2.1 a 2.5 +pp.123-124): alcune parti sono più approfondite rispetto al corso, saltate i dettagli… :-) ]
• Kalata, Programmazione Internet con VBScript e JavaScript, Apogeo, 2001 [cap. 2 (pp. 45-56)]
• Baravalle, PHP: un'introduzione: www.baravalle.it/articoli/3/1/ (contiene anche una breve discussione sul confronto PHP/ASP)
• Baravalle, MySQL: un'introduzione: www.baravalle.it/articoli/4/1/ [p.1 e p.6]
• JavaServer Pages Fundamentals - Short Course, Sun: developer.java.sun.com/developer/onlineTraining/JSPIntro/contents.html [i primi 2 cap: Introduction e JSP Architecture]
PER APPROFONDIRE:• Comparing JSP(TM) and Microsoft ASP(TM) Technologies, Sun
Bibliografia
a.a. 2004/05 Tecnologie Web 3
Prima di InternetI computer di una singola azienda erano connessi in rete tra loro con protocolli (insiemi di regole di comunicazione) e tecnologie (hardware e software per gestire i collegamenti) proprietari
Cos’è Internet - I
a.a. 2004/05 Tecnologie Web 4
Nascita di InternetNegli anni ’70 il Dip. della Difesa americano mette a punto la prima rete eterogenea (formata da sottoreti diverse) che connette università e centri di ricerca: ARPANETLo sviluppo di ARPANET darà origine a Internet
Cos’è Internet - II
a.a. 2004/05 Tecnologie Web 5
Caratteristiche di Internet
1. Infrastruttura di comunicazione basata su tecnologie eterogenee (linee telefoniche, fibre ottiche, collegamenti satellitari, ecc.)
2. Protocollo TCP/IP (regole per la trasmissione di informazioni)
3. Architettura client/server
Cos’è Internet - III
a.a. 2004/05 Tecnologie Web 6
Caratteristiche di TCP/IPTCP/IP funziona con un meccanismo detto commutazione di pacchetto:
• Ogni computer nella rete è identificato univocamente da un numero (indirizzo IP, per es. 114.132.12.47)
• Non esiste un controllo centralizzato• Ogni messaggio in partenza è scomposto in una
serie di pacchetti, con allegate varie informazioni, tra cui l’indirizzo del destinatario e le indicazioni per ricomporre il messaggio a partire dai vari pacchetti
• Il percorso dei diversi pacchetti non è prestabilito, ma deciso “on the road”: questo rende la rete particolarmente flessibile e quindi robusta
Cos’è Internet - IV
a.a. 2004/05 Tecnologie Web 7
Architettura client-serverUn server è un programma “in ascolto” su una porta (punto di accesso) TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al clientUn client è un programma che si connette ad un server, fa una richiesta ed aspetta una risposta.Un server, generalmente, può servire più client contemporaneamente
Cos’è Internet - V
client
clientServer
clientrequest
response
a.a. 2004/05 Tecnologie Web 8
Protocolli supportati da Internet (1)
TELNET Emula sul client un terminale video collegato al server. La comunicazione consiste nello scambio di caratteri (è quindi possibile inviare comandi al server)
SMTP SMTP (Simple Mail Transfer Protocol) è il protocollo utilizzato per trasmettere messaggi di posta elettronica
Cos’è Internet - VI
a.a. 2004/05 Tecnologie Web 9
Protocolli supportati da Internet (2)
FTP FTP (File Transfer Protocol) è il protocollo di comunicazione utilizzato da un client e da un server (FTP Server) per trasferire file generici (trasferimento dal server al client = download; trasferimento dal client al server = upload)
HTTP HTTP (HyperText Transfer Protocol) è il protocollo di comunicazione utilizzato da un client (browser) e da un server (HTTP Server) per trasferire ipertesti (file che contengono ipertesti)
Cos’è Internet - VII
a.a. 2004/05 Tecnologie Web 10
Cos’è il WWW - I
Il World Wide Web:Il World Wide Web è un modo per “vedere” Internet, per interagire con i servizi offerti da Internet
a.a. 2004/05 Tecnologie Web 11
Cos’è il WWW - II
Brevissima storia del World Wide WebIl WWW nasce nel 1990 al CERN (European Particle Physics Laboratory) di Ginevra, come mezzo per facilitare la collaborazione scientifica tra centri di ricerca di fisica delle particelle. Il suo ideatore è il fisico Tim Berners-Lee
La prima interfaccia grafica per il WWW (il browser Mosaic) uscì all’inizio del 1993, per opera di Marc Andreessen, che un anno dopo fondò la Netscape Communication Corp.
Nel 1994, CERN e MIT stipularono un accordo per costituire il Consorzio WWW (W3C), dedicato alla standardizzazione e allo sviluppo di protocolli e linguaggi per il Web. Al W3C hanno in seguito aderito centinaia di altri enti e resta il principale punto di riferimento per tutto ciò che riguarda il Web (www.w3.org)
a.a. 2004/05 Tecnologie Web 12
Cos’è il WWW - III
IpertestoUn ipertesto è un documento (o un insieme di documenti) costituito da un insieme di nodi e da un insieme di archi che collegano i vari nodi
Un ipertesto può essere visto come una rete, dentro la quale si può navigare, passando da un nodo all’altro percorrendo gli archi
a.a. 2004/05 Tecnologie Web 13
Cos’è il WWW - IV
World Wide WebIl WWW è un gigantesco ipertesto. I nodi (pagine Web) risiedono su macchine sparse in tutto il mondo e collegate tra loro tramite Internet
Percorrere un arco (hyperlink - collegamento ipertestuale) significa attivare una connessione tra un client (browser) e un server. Questa connessione utilizza il protocollo HTTP e corrisponde alla richiesta di una pagina Web che viene inviata dal server e visualizzata dal client
Il WWW è un ipertesto “aperto” perché la sua strutttura non è definita a priori, ma chiunque può inserire nuovi nodi (pagine Web) e nuovi archi (collegamenti)
a.a. 2004/05 Tecnologie Web 14
Cos’è il WWW - V
Pagina WebUna pagina Web è un nodo dell’ipertesto WWW. Una pagina Web può contenere testo, immagini, filmati, suoni, ecc...
Sito WebUn sito Web è un insieme di pagine Web, generalmente residenti sullo stesso server, gestite da un unico Web master e con un contenuto omogeneo
Home pageUna home page è generalmente la pagina di accesso ad un sito Web
a.a. 2004/05 Tecnologie Web 15
Cos’è il WWW - VIHome page: esempio
a.a. 2004/05 Tecnologie Web 16
URLUn URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una pagina WebHa la seguente forma:
http://www.di.unito.it/people/goy.html
Cos’è il WWW -VII
protocollo DNS del sito Web
nome del file
a.a. 2004/05 Tecnologie Web 17
DNSIl DNS (Domain Name System) è un sistema di denominazione gerarchico, ripartito in domini, sotto-domini, sotto-sotto-domini, ecc…
Un sito Web viene univocamente identificato dal suo DNS:
www.di.unito.it = sito Web del Dipartimento di Informatica
Cos’è il WWW - VIII
dominiosotto-dominio
sotto-sotto-dominio
server(host)
DNS Server: programma che conosce le corrispondenze tra DNS e indirizzi IP dato un DNS (www.di.unito.it) restituisce l’IP (130.192.239.1) necessario per la connessione
a.a. 2004/05 Tecnologie Web 18
Cos’è il WWW - IX
I Web browser
Un Web browser è un programma, dotato di interfaccia grafica, che:
• interagisce con un server, richiedendone i servizi (per es. pagine Web)
• visualizza le pagine Web, mostrandone il contenuto e interpretando le indicazioni relative all’aspetto (colori, immagini, tipi di carattere, ecc…)
a.a. 2004/05 Tecnologie Web 19
Cos’è il WWW - XI Web browser: Microsoft Internet Explorer
a.a. 2004/05 Tecnologie Web 20
Cos’è il WWW - XII Web browser: Netscape Communicator
a.a. 2004/05 Tecnologie Web 21
Cos’è il WWW - XII
I Web browser: funzioni principaliNon descriviamo tutte le funzioni dei browser in dettaglio: l’interfaccia utente infatti è molto intuitiva ed è facile imparare ad usarla (anche senza manuale…)
Torna alla pagina precedente/Vai alla pagina successiva
Vai al seguente indirizzo (URL)
Lista di siti (URL) “interessanti”(archiviati dall’utente)
a.a. 2004/05 Tecnologie Web 22
Cosa vuol dire “navigare” sul Web
Quando un utente si connette ad un sito Web, per es. facendo click su un link, succedono le seguenti cose:
• Il browser analizza l’URL
• Chiede al DNS Server l’indirizzo IP corrispondente al DNS contenuto nell’URL
• Effettua una connessione al server corrispondente all’IP ricevuto e gli invia una richiesta per il file indicato nell’URL
• Il server risponde inviando il file richiesto
• Il browser intepreta il file ricevuto, visualizzandolo secondo le specifiche in esso contenute
Cos’è il WWW - XIII
a.a. 2004/05 Tecnologie Web 23
Internet
• Internet ci mette in comunicazione con il mondo intero, senza confini (tutti possono, potenzialmente, essere utenti di Internet)
• I contenuti, le finalità, i servizi su Internet sono estremamente diversificati
• La tecnologia che permette il funzionamento di Internet e del web può essere sfruttata per gestire reti di dimensioni limitate (con caratteristiche e contenuti specifici)
Intranet ed Extranet - I
a.a. 2004/05 Tecnologie Web 24
Intranet
• E' una rete limitata entro i confini di un’organizzazione i suoi utenti sono i membri dell'organizzazione
• Si basa sulla stessa tecnologia di Internet e del Web
• Il suo principale obiettivo è la condivisione e l'integrazione di conoscenze
• "Dietro le quinte" ci sono generalmente archivi di informazioni strutturate (per es. database aziendali)
Intranet ed Extranet - I
a.a. 2004/05 Tecnologie Web 25
Extranet
• Estensione della Intranet ai partner (fornitori, agenti, clienti, …)
• Gli utenti sono conosciuti e registrati
• Supporta la comunicazione business-to-business
• Estrema importanza dei meccanismi di sicurezza
• "Dietro le quinte" ci sono ancora (generalmente) archivi di informazioni strutturate
Intranet ed Extranet - III
a.a. 2004/05 Tecnologie Web 26
Quando ci connettiamo ad una risorsa in rete, identificata da un URL (digitando l’indirizzo nel browser, cliccando su un link, …):
• Nel caso più semplice l'URL contiene l'indirizzo di una pagina (generalmente scritta in HTML) il cui contenuto è fisso, definito nel momento in cui la pagina è stata scritta; per es:
http://www.di.unito.it/~goy/dida.html
Pagine Web statiche e dinamiche - I
a.a. 2004/05 Tecnologie Web 27
• In altri casi, l'URL può contenere:
– l'indirizzo di una pagina “dinamica” (per esempio scritta in ASP, PHP, o JSP) il cui contenuto viene generato (selezionato, composto) al momento della richiesta; per es:http://www.di.unito.it/~goy/dida.php
– l'indirizzo di un programma (per esempio una Java Servlet) il cui compito è quello di generare dinamicamente una pagina Web, in base alla richiesta del client; per es:
http://www.di.unito.it/~goy/didaServlet
Pagine Web statiche e dinamiche - II
a.a. 2004/05 Tecnologie Web 28
HTMLHTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)
Linguaggi di mark-up
• I linguaggi di programmazione servono a scrivere programmi: un programma è una sequenza di istruzioni
• I linguaggi di mark-up servono a scrivere documenti ("formattati"): un documento "formattato" (con un linguaggio di mark-up, per es. HTML o LATEX) è un file di testo che contiene indicazioni (tag) per la sua visualizzazione (struttura)
• I linguaggi di mark-up tendono a separare in modo chiaro contenuto (testo) e aspetto (visualizzazione)
Pagine Web statiche: HTML - I
a.a. 2004/05 Tecnologie Web 29
• Una pagina Web è un documento "formattato" con HTML, cioè un file di testo (per es. home.html) che contiene indicazioni per:(a) la visualizzazione(b) i link (connessioni ipertestuali)
Pagine Web statiche: HTML - II
home.html: contenuto+aspetto+link
pagina Web visualizzata da un Web browser (per es. Microsoft Interner Explorer)interpretati
a.a. 2004/05 Tecnologie Web 30
<HTML> <BODY> <H1> Anna Goy </H1> <P><B>Dipartimento di Informatica - Università di Torino</B></P> <UL> <LI><FONT COLOR="red">Research and development:</FONT> Web technologies, ... </LI> <LI><FONT COLOR="red">Teaching activity:</FONT> Introduction to programming, ... </LI> </UL></BODY> </HTML>
TAG:definisconol'aspettodella pagina
contenuto
Pagine Web statiche: HTML - III(a) la visualizzazione
a.a. 2004/05 Tecnologie Web 31
Pagine Web statiche: HTML - IV
home page:
link1
link2
pagina papers:
link3
pagina di un editore
pagina di celi srl
link4
(b) i link (connessioni ipertestuali)
che fanno sì che la pagina diventi (si inserisca all'interno di) un ipertesto
a.a. 2004/05 Tecnologie Web 32
Ulteriore separazione (rispetto al semplice uso di HTML) tra contenuto (testo) e aspetto (indicazioni che vengono interpretate dal programma che visualizza il documento)
creazione di un documento separato dalla pagina Web (file .html) che contiene le informazioni relative all'aspetto (alla "formattazione") della pagina
Principale vantaggio: risparmio di tempo e maggior praticità nella gestione del sito: se si vuole modificare l'aspetto dell'intero sito (magari costituito da molte pagine) non è necessario modificare tutte le pagine, una per una, ma è sufficiente modificare il file che contiene il foglio di stile
Pagine Web statiche: CSS - I
a.a. 2004/05 Tecnologie Web 33
I fogli di stile più comunemente usati con HTML sono i CSS (Cascading Style Sheets)
Un foglio di stile CSS è costituito da un insieme di regole del tipo: tag {proprietà1:"valore1"; proprietà2:"valore2"} ogni regola è associata ad un tipo di tag (HTML) ogni regola è formata da due parti: proprietà:valore
Per esempio: P {font-family:"Times New Roman"; font-size:10pt; color:blue}
dice che i paragrafi di testo (identificati dal tag <P></P>) vanno scritti col font Times New Roman, grandezza 10 punti, blu
Pagine Web statiche: CSS - II
a.a. 2004/05 Tecnologie Web 34
In realtà le regole per gli stili possono essere posizionate:1. All'interno di un singolo tag2. All'interno della singola pagina (nella sez. HEAD)3. In un file separato, con estensione .css
Il caso 3 è in realtà l'unico che garantisce i vantaggimenzionatiAll'interno delle pagine del sito occorre inserire unriferimento al file contenente il foglio di stile:
<HEAD> ... <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="css/miostile.css"> ...</HEAD>
Pagine Web statiche: CSS - III
a.a. 2004/05 Tecnologie Web 35
BODY {background-color:white}A:link {color:red} A:visited {color:maroon}A:active {color:purple} P {font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10pt; color:black}UL {font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10pt; color:black; font-style:italic}H1 {font-family:"Comic Sans MS"; font-size:18pt; color:green; font-weight:bold; text-align:center}H2 {font-family:"Comic Sans MS"; font-size:14pt; color:olive; font-weight:bold; text-align:center}
Pagine Web statiche: CSS - IV (miostile1.css)
proprietà generali della pagina
proprietà dei link
proprietà dei paragrafi
proprietà delle liste
proprietà dei titoli (di primo livello)
proprietà dei titoli (di secondo livello)
a.a. 2004/05 Tecnologie Web 36
Pagine Web statiche: CSS - V (miostile1.css)
BODY...A:link...
A:visited...P...UL...
H1...
H2...
Nella pagina Web (index.html) inseriamo un riferimento al foglio stile miostile1.css
a.a. 2004/05 Tecnologie Web 37
BODY {background-color:yellow}A:link {color:blue} A:visited {color:navy}A:active {color:teal} P {font-family:"Times New Roman"; font-size:12pt; color:black}UL {font-family:"Times New Roman"; font-size:10pt; color:black; font-style:normal}H1 {font-family:"Courier New"; font-size:18pt; color:#660099; font-weight:bold; text-align:left}H2 {font-family:"Courier New"; font-size:14pt; color:#9933CC; font-weight:bold; text-align:left}
Pagine Web statiche: CSS - VI (miostile2.css)
a.a. 2004/05 Tecnologie Web 38
Pagine Web statiche: CSS - VII (miostile2.css)
BODY...A:link...
A:visited...P...UL...
H1...
H2...
Senza modificare la pagina Web (index.html), modifichiamoil foglio stile (miostile2.css) e aggiorniamo il riferimento
a.a. 2004/05 Tecnologie Web 39
Pagine Web "dinamiche" = pagine il cui contenuto viene generato (selezionato, composto) al momento della richiesta
• Pagine Web "debolmente" dinamiche: utilizzano tecnologie client-side
• Pagine Web autenticamente dinamiche: utilizzano tecnologie server-side
Pagine Web dinamiche - I
a.a. 2004/05 Tecnologie Web 40
Client-side:
Server-side:
Pagine Web dinamiche - II
Server clientrequest
(pag.html)
Server clientresponse(pag.html)
HTML +JavaScript
elaborazione(interpretazion
e del codice JavaScript)
visualizzazione
Server clientrequest
(pag.php)
Server client
Server clientresponse
?
elaborazione(interpretazione
del codice PHP)
HTML (+JavaScript) HTML (+
JavaScript)
a.a. 2004/05 Tecnologie Web 41
Infatti (1) ...
• Per visualizzare una pagina Web "debolmente" dinamica (che utilizza una tecnologia client-side) NON HO bisogno di un server posso aprire la pagina fornendo al browser il path sul file system locale:
• Per visualizzare una pagina Web autenticamente dinamica (che utilizza una tecnologia server-side) HO bisogno di un server devo connettermi al server (e richiedere la pagina) tramite un URL:
Pagine Web dinamiche - III
a.a. 2004/05 Tecnologie Web 42
Infatti (2) se chiedo al browser di visualizzare il codice sorgente della pagina...
• nel caso di una pagina Web "debolmente" dinamica (che utilizza una tecnologia client-side) vedo l'HTML + il codice "dinamico" client-side (per es. JavaScript)
• nel caso di una pagina Web autenticamente dinamica (che utilizza una tecnologia server-side) vedo solo l'HTML: al posto del codice "dinamico" server-side (per es. PHP), il server ha infatti sostituito il risultato dell'elaborazione (cioè codice HTML)
Pagine Web dinamiche - IV
a.a. 2004/05 Tecnologie Web 43
Client-side:• JavaScript (e VBScript)• Java AppletNB: Per ogni tecnologia è necessario che il Browser la supporti (sappia interpretarla)!
Server-side:• ASP di Microsoft [www.asp.net]
• PHP - open source [www.php.net]
• JSP (Java Server Pages) [java.sun.com/products/jsp/]
• Java Servlet (+ XML) [java.sun.com/products/servlet/]
NB: Per ogni tecnologia è necessario che il Server la supporti (sappia interpretarla)!
Pagine Web dinamiche: tecnologie - I
a.a. 2004/05 Tecnologie Web 44
JavaScript è un linguaggio di "scripting" = linguaggio di programmazione "piccolo" e "leggero", che serve per scrivere degli script = piccoli programmi contenuti nelle pagine HTML, che vengono interpretati (ed eseguiti ) dal browser
Gli script vengono utilizzati per: creare dinamicamente il contenuto di una pagina
Web aggiungere interattività alle pagine Web
Note:• JavaScript (nonostante la somiglianza nel nome) è un
linguaggio completamente separato da Java
• JavaScript è un linguaggio interpretato (il codice non deve essere compilato per essere eseguito)
Pagine dinamiche client-side: JavaScript
a.a. 2004/05 Tecnologie Web 45
Costruiamo un pannello di controllo per una presentazione (sequenza di diapositive)
JavaScript: un esempio - I
VEDI: slidesStart.html, slidesControl.html, slidesShow.html
click su "START"
si apre la finestradi controllo click sui link viene visualizzata
l'immagine corrisp.
a.a. 2004/05 Tecnologie Web 46
JavaScript: un esempio - II
click su "START"
si apre la finestradi controllo
click sui link
viene visualizzata l'immagine
corrisp.
slidesStart.html
codice HTML: link “START”+codice JavaScript (che dice “quando l’utente clicca sul link, apri una nuova finestra, diapositive, e carica il file slideControl.html”)
slidesControl.html
codice JavaScript che dice “apri una nuova finestra, diapositive, e carica il file slideShow.html +codice HTML: link delle varie diapositive+codice JavaScript che dice “quando l’utente clicca sui vari link carica le diverse immagini nella finestra diapositive”
codice HTML: immagine diapo
slidesShow.html
a.a. 2004/05 Tecnologie Web 47
Il codice (rilevante) in dettaglio:
slidesStart.html:
<A HREF="#" onClick="window.open('slideControl.html','pannello',
'width=200,height=120, status=no,location=no,toolbar=no,menubar=no'); window.focus();">START</A>
cioè quando l’utente clicca (onClick) su START apri una nuova finestra (window.open) e carica il file slideControl.html
JavaScript: un esempio - III
a.a. 2004/05 Tecnologie Web 48
slidesControl.html:
var diapositive = window.open("slideShow.html","diapos", "width=500, height=500");
window.focus();
cioè apri una nuova finestra (window.open) e carica il file slideShow.html
<A HREF="#" onClick="diapositive.document. diapo.src='colonna.jpg'; return false;">Nora: rovine romane</A>
cioè quando l’utente clicca (onClick) su Nora: rovine romane carica l’immagine colonna.jpg nella finestra diapositive
slidesShow.html:
<IMG SRC="coltellazzo.jpg" name=" diapo " height="400" width="400">
cioè nel file slidesShow.html c’è un immagine (IMG) che si chiama diapo (questo riferimento è usato in slidesControl.html)
JavaScript: un esempio - IV
a.a. 2004/05 Tecnologie Web 49
Pagine dinamiche client-side: Java Applet - I
Applet = piccolo programma Java che viene scaricato automaticamente insieme ad una pagina Web e viene eseguito sul client dal browser, o da un plug-in (interprete Java) installato nel browserLa pagina HTML contiene un riferimento all’applet (programma Java che si trova in un file esterno)
Server clientrequest
(pag.html)
Server clientresponse(pag.html+ applet)
elaborazione(esecuzione dell’applet)
visualizzazione
HTML +rif.applet
Applet…+
a.a. 2004/05 Tecnologie Web 50
Alcune osservazioni sulle applet:
• Possono appesantire la pagina Web (se richiedono molto tempo per essere scaricate)
• Possono esserci problemi di compartibilità tra browser e plug-in (a volte le applet… non funzionano!)
• Ma se si tratta di programmi che vengono eseguiti sul computer dell’utente, non creano problemi di sicurezza?
No, perché le applet vengono esguite all’interno di una “barriera di sicurezza” (definita dall’interprete Java che risiede nel browser) che impedisce loro di scrivere sul file system (su disco) del client
Pagine dinamiche client-side: Java Applet - II
a.a. 2004/05 Tecnologie Web 51
ESEMPIO: screw2Il file screw2.zip contiene i seguenti file:• license.txt = info sul copyright• screw2.class = il programma (Java) eseguibile• default.html = la pagina HTML che “opsita” l’applet (al
suo interno fa riferimento al programma screw2.class)• una serie di file (.gif e .jpg) contenenti le immagini
Per vedere l’esempio: 1. “spacchettare” il file .zip 2. fare doppio click su default.html
NB Le cartelle sample2 e sample3 contengono altre varianti dell’esempio
Pagine dinamiche client-side: Java Applet - III
a.a. 2004/05 Tecnologie Web 52
Pagine dinamiche server-side: esempi - I
a.a. 2004/05 Tecnologie Web 53
Pagine dinamiche server-side: esempi - II
a.a. 2004/05 Tecnologie Web 54
Pagine dinamiche server-side: esempi - III
a.a. 2004/05 Tecnologie Web 55
Active Server Pages = ASP = tecnologia server-side di Microsoft per realizzare siti Web dinamici
NB: Per utilizzare una tecnologia server-side è necessario che il Server sia in grado di interpretarla
Per ASP, la soluzione più semplice è Microsoft Internet Information Server (IIS)
IIS 5.0 (per Windows 2000):
• Documentazione su IIS: http://www.microsoft.com/windows2000/en/advanced/iis/
• IIS Community Center: http://www.microsoft.com/windowsserver2003/community/centers/iis/default.asp
Pagine dinamiche server-side: ASP - I
a.a. 2004/05 Tecnologie Web 56
Applicazione ASP = insieme di pagine ASP + file (global.asa) che contiene le informazioni condivise
Pagina ASP = file di testo, con estensione .asp, che può contenere:– Codice HTML
– Script client-side (es: JavaScript)
– Script server-side (es: VBScript)
Pagine dinamiche server-side: ASP - II
interpretatidal browser
interpretatidal server
Server clientrequest
(pagina.asp)
Server clientresponse(pagina)
paginahtml
(+ script client-side)
MotoreASP
elaborazione
a.a. 2004/05 Tecnologie Web 57
Pagine dinamiche server-side: ASP - III
Esempio di pagina ASP:...<P ALIGN="CENTER"> <FONT FACE="Verdana" COLOR="black" SIZE="3"> <B>Prova form 1 (asp)</B> </FONT></P>
<% Dim id, pwd id = request.form("login") pwd = request.form("password") if id="admin" AND pwd="pippo" then response.write("<P>Benvenuto amministratore!</P>") else response.write("<P>Buongiorno “ & id & "</P>") end if%>...
HTML
script server-side (VBScript interpretato dal motore ASP)
a.a. 2004/05 Tecnologie Web 58
= libreria a collegamento dinamico (raccolta di programmi) = file asp.dll
Pagine dinamiche server-side: ASP - IV
MotoreASP
Global Application File (global.asa) = file di testo che contiene degli script che vengono eseguiti all'avvio e alla chiusura dell'applicazione e/o all'avvio e alla chiusura di ogni sessione
Quando il Motore ASP riceve una richiesta di una pagina .asp:• esegue gli script contenuti nel file global.asa• include gli eventuali file SSI (Server Side Include)[*]
• invia gli script server-side a un motore di script, che li interpreta
[*] File SSI = file (di testo) contenenti parte del codice della pagina .asp (servono a rendere più modulare l'applicazione)
a.a. 2004/05 Tecnologie Web 59
Pagine dinamiche server-side: ASP - V
Gli script ASP interagiscono con una serie di oggetti definiti nell’Object Model ASP:
• Request = la richiesta del client al server• Response = la risposta del server al client• Session = una "sessione di lavoro" tra un client e il
server• Application = la sequenza di pagine .asp che
rappresenta l'applicazione• Server = il server, con le sue proprietà e funzioni• ASPError = l'ultimo errore che si è verificato
Gli script server-side possono accedere alle proprietà diquesti oggetti, ma è anche possibile creare nuovi oggetti…
a.a. 2004/05 Tecnologie Web 60
Pagine dinamiche server-side: ASP - VI
… o meglio: creare “istanze” di oggetti forniti da produttori esterni
Per es, supponiamo di voler inviare un messaggio di posta elettronica al client, in risposta alla compilazione di un modulo abbiamo bisogno di un oggetto che sia in grado di farlo!
Nel server di posta SMTP esiste un oggetto SendMail che può essere usato per inviare messaggi di posta utilizzando la funzione createObject del server HTTP possiamo creare un'istanza di SendMail e inviare il messaggio
a.a. 2004/05 Tecnologie Web 61
Pagine dinamiche server-side: ASP - VII
L'oggetto request contiene tutte le informazioni relativealla richiesta che il client (browser) fa al server
Per es: l'utente compila un modulo on-line (form HTML); quando clicca sul pulsante di invio del modulo, parte la richiesta al server; l'oggetto request conterrà varie informazioni relative alla richiesta del client, tra cui tutti i dati del modulo (per es: i nomi dei campi e i rispettivi valori)
L'oggetto response viene utilizzato dal server per inviareinformazioni al client (browser)
Server clientrequest
response
Un esempio: gli oggetti request e response
a.a. 2004/05 Tecnologie Web 62
Pagine dinamiche server-side: ASP - VIII
Se vogliamo tener traccia di varie informazioni (per esempio dati sull'utente) e renderle disponibili al di là della singola sessione di lavoro (e potenzialmente anche al di là dell'esistenza dell'applicazione stessa) dobbiamo salvarle su file system
In un'architettura client-server abbiamo due possibilità:
• il file system del client (cookies)
• il file system del server (files di testo o databases)
a.a. 2004/05 Tecnologie Web 63
Pagine dinamiche server-side: ASP - IX
Cookies = file temporanei che il server salva sul client; su Windows 2000, per es, vengono salvati in:
C:\Documents and Settings\user\Cookies
• Per poterli utilizzare è necessario che il client "accetti" i cookies bisogna configurare il browser! Con Internet Explorer 5.0:Strumenti Opzioni Internet Protezione Personalizza livello nelle impostazioni relative ai cookies, selezionare "Attiva"
• L'utente può cancellarli quando vuole!
non sono un metodo tanto affidabile per mantenere informazioni importanti…
a.a. 2004/05 Tecnologie Web 64
Breve parentesi sull'open source [www.opensource.org]
Open Source Initiative (OSI) = associazione no-profit che ha l'obiettivo di gestire e promuovere la produzione di software open source Il software open source (o software libero) deve rispettare una serie di criteri:
• Il software deve essere distribuito gratuitamente (senza dititti d'autore o profitti)
• Il codice sorgente del programma deve essere disponibile e gratuito
• La licenza del software deve consentire a chiunque di ridistribuire il software in qualunque forma
• Il software può essere modificato e distribuito (con un nome diverso) alle stesse condizioni
• Chiunque può partecipare allo sviluppo del software
Open Source - I
a.a. 2004/05 Tecnologie Web 65
L'idea che sta alla base dell'Open Source Initiative è la seguente: quando i programmatori hanno la possibilità di leggere, ridistribuire e modificare il codice sorgente di un programma, quel software si evolve. La gente lo migliora, lo adatta, lo corregge. E tutto questo può avvenire con una rapidità che appare impressionante a chi è abituato ai ritmi lenti dello sviluppo del software convenzionale. La comunità dell'open source ha imparato che che questo rapido processo evolutivo produce software migliore rispetto al tradizionale modello chiuso, nel quale solo pochissimi programmatori hanno accesso al codice sorgente e tutti gli altri devono avere a che fare con un imperscrutabile e oscuro blocco di bit.[da www.opensource.org]
Open Source - II
a.a. 2004/05 Tecnologie Web 66
PHP = tecnologia server-side, open source per realizzare siti Web dinamici
NOTA: PHP inizialmente (1994) significava Personal Home Page Poi diventa PHP Hypertext Preprocessor (la versione corrente è PHP 4)
NB: Per utilizzare una tecnologia server-side è necessario che il Server sia in grado di interpretarla
Tipicamente:
Linux + Apache + MySQL + PHP
Pagine Web dinamiche server-side: PHP - I
sistemaoperativo
Web Server DBMS tecnologia server-side per generare pagine Web dinamiche
a.a. 2004/05 Tecnologie Web 67
Applicazione PHP = insieme di pagine PHP
Pagina PHP = file di testo, con estensione .php, che può contenere:– Codice HTML– Script client-side (es: JavaScript)– Script server-side (PHP)
interpretati dal browser
interpretati dal server
Server client
request(pagina.php)
Server clientresponse(pagina)
paginahtml
(+ script client-side)
Interprete(Parser) PHP
elaborazione
Pagine Web dinamiche server-side: PHP - II
a.a. 2004/05 Tecnologie Web 68
Esempio di pagina ASP:...<P ALIGN="CENTER"> <FONT FACE="Verdana" COLOR="black" SIZE="3"> <B>Prova form 1 (asp)</B> </FONT></P>
<? $id = $HTTP_POST_VARS["login"]; $pwd = $HTTP_POST_VARS["password"]; if ($id == "admin" && $pwd == "pippo") { echo "Benvenuto amministratore!"; } else { echo "Buongiorno " . $id; }?>...
HTML
script server-side (PHP interpretato dall’interprete PHP)
Pagine Web dinamiche server-side: PHP - III
a.a. 2004/05 Tecnologie Web 69
Anche con PHP è possibile includere file (di testo) contenenti parte del codice della pagina vengono spesso usati per inserire codice che verrà riutilizzato in altre pagine .php, come per es. intestazioni e piè di pagina
Possono contenere codice HTML, script client-side (es: JavaScript), script server-side (es: PHP)
Per includere un file: <? include("percorso/nomefile") ?>nel punto in cui si vuole inserire il codice contenuto nel file esterno
Pagine Web dinamiche server-side: PHP - IV
a.a. 2004/05 Tecnologie Web 70
Per esempio, per inviare una response al client:<? echo "Hello!"; ?>
<? print "Ciao!"; ?>
Server clientrequest
response
Anche PHP si basa su concetti come request e response, session, ecc. visti nell’Object Model ASP (anche se lo fa in modo implicito)
Pagine Web dinamiche server-side: PHP - V
a.a. 2004/05 Tecnologie Web 71
Pagine Web dinamiche server-side: PHP/MySQL
• MySQL (http://www.mysql.com) è un database Server, basato su SQL, multi-processo, multi-utente; è veloce e robusto
• MySQL è distribuito gratuitamente, con una licenza GNU (http://www.gnu.org/gnu/thegnuproject.it.html)
• La distribuzione di MySQL include il database server (DBMS) e diversi client: il database server risiede sulla macchina su cui si trovano i dati: riceve le richieste (query) dai client, accede al database e fornisce le risposte (risultati delle query)– MySQL = database server (DBMS)– mysql = un client– mysqladmin = programma per l'amministrazione
• In linea di massima, funziona da linea di comando (prompt DOS)
a.a. 2004/05 Tecnologie Web 72
Java Server Pages = JSP = tecnologia server-side di Sun Microsystem per realizzare siti Web dinamici
NB: Per utilizzare una tecnologia server-side è necessario che il Server sia in grado di interpretarla
Per JSP, la soluzione migliore è Tomcat [http://java.sun.com/products/jsp/tomcat/]:
Tomcat è un insieme di strumenti open-source che supportano le tecnologie Java Servlet e le Java Server Pages, sviluppato nell'ambito del progetto Jakarta, della Apache Software Foundation
E' possibile utilizzare la versione di Tomcat inclusa nel Java Web Services Developer Pack:
http://java.sun.com/webservices/jwsdp/index.jsp
http://java.sun.com/webservices/docs/1.1/tutorial/doc/index.html
Pagine Web dinamiche server-side: JSP - I
a.a. 2004/05 Tecnologie Web 73
Applicazione JSP = insieme di pagine JSP
Pagina JSP = file di testo, con estensione .jsp, che può contenere:– Codice HTML– Script client-side (es: JavaScript)– Script server-side (Java!)
Pagine Web dinamiche server-side: JSP - II
interpretatidal browserinterpretatidal server
Server clientrequest
(pagina.jsp)
Server clientresponse(pagina)
paginahtml
(+ script client-side)
Interprete JSP (Java Servlet)
elaborazione
(*)
a.a. 2004/05 Tecnologie Web 74
Pagine Web dinamiche server-side: JSP - III
(*) Cosa succede “dietro le quinte” (cioè: cosa fa l'interprete delle JSP)?
1) HTML (+ script client-side) e script server-side (Java) vengono "tradotti" (compilati) in una Servlet
Le vedremo più avanti…
2) La Servlet genera il codice (HTML + script client-side) da inviare, attraverso l'oggetto response, al client
NB: L'interprete delle JSP è a sua volta una Servlet!