INTRODUZIONE - Sardegna2007

Internet e Web Dinamico
• 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 (Human Computer Interaction ):
usabilità, accessibilità
1
Cos’è Internet - I
Prima di Internet
I 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
Nascita di Internet
Negli 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: ARPANET
Lo sviluppo di ARPANET darà origine a Internet
2
Cos’è Internet - III
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
3
Cos’è Internet - IV
Caratteristiche di TCP/IP
TCP/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
4
Cos’è Internet - V
Architettura client-server
Un 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 client
Un client è un programma che si connette ad un server, fa
una richiesta ed aspetta una risposta.
Un server, generalmente, può servire più client
contemporaneamente
Server
request
client
client
client
response
5
Cos’è Internet - VI
Protocolli supportati da Internet
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)
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)
TELNET Emula sul client un terminale video collegato al
server. La comunicazione consiste nello scambio di caratteri (è
quindi possibile inviare comandi al server)
SMTP (Simple Mail Transfer Protocol) è il protocollo utilizzato
per trasmettere messaggi di posta elettronica
6
Cos’è il WWW - I
Il World Wide Web:
è un servizio di Internet] che permette di navigare ed usufruire di un insieme
vastissimo di contenuti (multimediali e non) e di ulteriori servizi accessibili
a tutti o ad una parte selezionata degli utenti di Internet.
Il 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.
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)
7
Cos’è il WWW - III
Un 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
Il 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)
8
Cos’è il WWW - V
Una pagina Web è un nodo dell’ipertesto WWW. Una pagina Web può
contenere testo, immagini, filmati, suoni, ecc...
Un sito Web è un insieme di pagine Web, generalmente residenti sullo
stesso server, gestite da un unico Web master e con un contenuto omogeneo
Una home page è generalmente la pagina di accesso ad un sito Web
Un URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una
pagina Web. Ha la seguente forma:
http://www.di.unito.it/people/goy.html
protocollo
DNS del
sito Web
nome del file
9
Cos’è il WWW - VIII
DNS
Il DNS (Domain Name System) è un sistema di
denominazione gerarchico, ripartito in domini, sottodomini, sotto-sotto-domini, ecc…
Un sito Web viene univocamente identificato dal suo DNS:
www.di.unito.it = sito Web del Dipartimento di Informatica
server
(host)
dominio
sotto-dominio
sotto-sotto-dominio
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
10
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…)
11
Cos’è il WWW - XIII
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
12
Pagine Web statiche e dinamiche - I
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
13
Pagine Web statiche e dinamiche - II
• 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
14
Pagine Web statiche: HTML - I
HTML
HTML (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)
15
Pagine Web statiche: HTML - II
• 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)
home.html:
contenuto
+
aspetto
+
link
interpretati
pagina Web
visualizzata da
un Web browser
(per es. Microsoft
Interner Explorer)
16
Pagine Web dinamiche - I
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
17
Pagine Web dinamiche - II
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:
18
Pagine Web dinamiche - III
Client-side:
request
(pag.html) client
Server
response
(pag.html)
Server
HTML +
JavaScript
client
elaborazione
(interpretazion
e del codice
JavaScript)

visualizzazione
Server-side:
elaborazione
(interpretazione
del codice
PHP)

HTML (+
JavaScript)
Server
request
(pag.php)
client ?
Server
Server
client
response
HTML (+
JavaScript)
client
19
Pagine Web dinamiche - IV
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)
20
Pagine Web dinamiche: tecnologie - I
Client-side:
• JavaScript (e VBScript)
• Java Applet
NB: 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)!
21
Pagine dinamiche server-side: ASP - I
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 7.0 (per Windows 7):
22
Pagine dinamiche server-side: ASP - II
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:
interpretati
– Codice HTML
dal browser
– Script client-side (es: JavaScript)
– Script server-side (es: VBScript) interpretati
dal server
Motore
ASP
elaborazion
e

Server
request
(pagina.asp) client
Server
response
(pagina)
pagina
html
(+ script
client-side)
client
23
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>
HTML
<%
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
%>
... script server-side (VBScript interpretato dal motore ASP)
24
Pagine dinamiche server-side: ASP - IV
Motore
ASP
= libreria a collegamento dinamico (raccolta di
programmi) = file asp.dll
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)
25
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à di
questi oggetti, ma è anche possibile creare nuovi oggetti…
26
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
27
Pagine dinamiche server-side: ASP - VII
Un esempio: gli oggetti request e response
request
Server
client
response
L'oggetto request contiene tutte le informazioni relative
alla 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 inviare
informazioni al client (browser)
28
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)
29
Pagine dinamiche server-side: ASP - IX
Cookies = file temporanei che il server salva sul client; 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:
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…
30
Pagine Web statiche: HTML - III
(a) la visualizzazione
contenuto
<HTML> <BODY>
<H1> Anna Goy </H1>
TAG:
di Informatica - Università di Torino</B></P>
definiscono<P><B>Dipartimento
<UL>
l'aspetto
<LI><FONT COLOR="red">Research and development:</FONT>
della pagina Web technologies, ... </LI>
<LI><FONT COLOR="red">Teaching activity:</FONT>
Introduction to programming, ... </LI>
</UL>
</BODY> </HTML>
31
Pagine Web statiche: HTML - IV
(b) i link (connessioni ipertestuali)
home page:
pagina papers:
link1
link3
pagina di un
editore
link2
pagina di celi
srl
link4
che fanno sì che la pagina diventi (si inserisca
all'interno di) un ipertesto
32
Pagine dinamiche client-side: JavaScript
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)
33
JavaScript: un esempio - I
Costruiamo un pannello di controllo per una presentazione
(sequenza di diapositive)
click su "START"

si apre la finestra
di controllo
click sui link  viene visualizzata
l'immagine corrisp.
VEDI: slidesStart.html, slidesControl.html, slidesShow.html
34
JavaScript: un esempio - II
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”)
click su "START"

si apre la finestra
di controllo
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”
slidesShow.html
codice HTML:
immagine
diapo
viene
visualizzata
l'immagine
corrisp.
click
sui link
35
JavaScript: un esempio - III
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
36
JavaScript: un esempio - IV
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)
37
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 browser
La pagina HTML contiene un riferimento all’applet
(programma Java che si trova in un file esterno)
Server
request
(pag.html) client
Server
response
(pag.html
+ applet)
client
HTML +
rif.applet
Applet
…
+
elaborazione
(esecuzione
dell’applet)

visualizzazione
38
Pagine dinamiche client-side: Java Applet - II
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
39
Pagine dinamiche client-side: Java Applet - III
ESEMPIO: screw2
Il 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
40
Pagine dinamiche server-side: esempi - I
41
Pagine dinamiche server-side: esempi - II
42
Pagine dinamiche server-side: esempi - III
43
Open Source - I
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
44
Open Source - II
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]
45
Pagine Web dinamiche server-side: PHP - I
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
sistema Web Server
operativo
DBMS tecnologia server-side
per generare pagine
Web dinamiche
46
Pagine Web dinamiche server-side: PHP - II
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)
Interprete
(Parser) PHP
elaborazion
e
Server

interpretati dal browser
interpretati dal server
request
(pagina.php)
client
pagina
html
(+ script
client-side)
Server
response
(pagina)
client
47
Pagine Web dinamiche server-side: PHP - III
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;
}
?>
... script server-side (PHP interpretato dall’interprete
HTML
PHP)
48
Pagine Web dinamiche server-side: PHP - IV
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
49
Pagine Web dinamiche server-side: PHP - V
Anche PHP si basa su concetti come request e response,
session, ecc. visti nell’Object Model ASP (anche se lo fa
in modo implicito)
request
Server
client
response
Per esempio, per inviare una response al client:
<?
echo "Hello!";
?>
<?
print "Ciao!";
?>
50
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)
51
Pagine Web dinamiche server-side: JSP - I
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
52
Pagine Web dinamiche server-side: JSP - II
Applicazione JSP = insieme di pagine JSP
Pagina JSP = file di testo, con estensione .jsp, che può
contenere:
interpretati
– Codice HTML
– Script client-side (es: JavaScript) dal browser
interpretati
– Script server-side (Java!)
dal server
Interprete JSP
(Java Servlet)
elaborazion
e

Server
request
(pagina.jsp) client
Server
response
(pagina)
pagina
html
(+ script
client-side)
client
(*)
53
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!
54
Pagine Web statiche: CSS - I
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
55
Pagine Web statiche: CSS - II
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
56
Pagine Web statiche: CSS - III
In realtà le regole per gli stili possono essere posizionate:
1. All'interno di un singolo tag
2. 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 vantaggi
menzionati
All'interno delle pagine del sito occorre inserire un
riferimento al file contenente il foglio di stile:
<HEAD>
...
<LINK REL="STYLESHEET" TYPE="TEXT/CSS"
HREF="css/miostile.css">
...
</HEAD>
57
Pagine Web statiche: CSS - IV (miostile1.css)
BODY {background-color:white} proprietà generali della pagina
A:link
{color:red}
A:visited {color:maroon} proprietà dei link
A:active {color:purple}
P {font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10pt; proprietà dei paragrafi
color:black}
UL {font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10pt; proprietà delle liste
color:black;
font-style:italic}
H1 {font-family:"Comic Sans MS";
font-size:18pt; proprietà dei titoli (di primo livello)
color:green;
font-weight:bold;
text-align:center}
H2 {font-family:"Comic Sans MS";
font-size:14pt; proprietà dei titoli (di secondo livello)
color:olive;
font-weight:bold;
text-align:center}
58
Pagine Web statiche: CSS - V (miostile1.css)
Nella pagina Web (index.html) inseriamo un riferimento
al foglio stile miostile1.css
BODY...
P...
UL...
H1...
A:link...
H2...
A:visited...
59
Pagine Web statiche: CSS - VI (miostile2.css)
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}
60
Pagine Web statiche: CSS - VII (miostile2.css)
Senza modificare la pagina Web (index.html), modifichiamo
il foglio stile (miostile2.css) e aggiorniamo il riferimento
BODY...
P...
UL...
H1...
A:link...
H2...
A:visited...
61
Intranet ed Extranet - I
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)
62
Intranet ed Extranet - I
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)
63
Intranet ed Extranet - III
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
64
Bibliografia
• 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
65