Siti interattivi e dinamici (in poche pagine...)

Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Siti interattivi e
dinamici
in poche pagine…
1
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Siti Web interattivi
Pagine Web codificate esclusivamente per mezzo dell’HTML non permettono alcun tipo di
interazione con l’utente, se non quella rappresentata dal clic sui link (con relativo caricamento
dei file corrispondenti). L’utente può eventualmente compilare dei form, ma i dati inseriti non
potranno essere elaborati in alcun modo.
Si supponga invece di voler controllare che in un certo campo di un form sia effettivamente
stato inserito qualcosa, o di voler verificare che questo “qualcosa” sia un numero, mostrando
un messaggio di errore in caso contrario: in una situazione di questo tipo entra in gioco un
comportamento interattivo, ossia vengono eseguite certe “azioni” (viene mostrato un
messaggio di errore) solo se si verifica un evento particolare (viene inserito un dato scorretto
nel campo del form).
Altri esempi di interattività potrebbero essere rappresentati da una pagina che viene mostrata
dopo che i dati di un form sono stati inviati al server e il cui contenuto dipende proprio da tali
dati, oppure da un’immagine che cambia quando il cursore del mouse le passa sopra: anche in
questi casi, il verificarsi di determinati eventi provoca corrispondenti effetti.
2
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Interazione lato client
Quando il comportamento interattivo della pagina è definito da codice che viene eseguito
sulla macchina dell’utente, si parla di interazione lato client.
Coi fogli di stile, ad esempio, usando le pseudoclassi A:hover e A:active, è possibile
fare in modo che un link cambi di aspetto quando il cursore del mouse gli è sopra o viene
cliccato: per quanto semplice, anche questo è un comportamento interattivo.
Le applet Java e i controlli ActiveX possono essere progettati per realizzare qualunque
comportamento, ed essendo eseguiti in locale sulla macchina dell’utente fanno anch’essi parte
delle tecnologie lato client. Analogamente, Adobe Flash permette non solo di realizzare
animazioni vettoriali, ma anche di associare comportamenti interattivi agli elementi grafici
(con del codice di programmazione opportuno): i siti realizzati in Flash utilizzano questo
principio per creare, ad esempio, i link.
Le applet Java, i controlli ActiveX e le animazioni Flash interattive hanno in comune il fatto
di essere definiti esternamente al codice HTML (vengono solo caricati); ci sono però
tecnologie basate su linguaggi che si integrano con l’HTML e vengono interpretati dal
browser: la più famosa di queste è JavaScript.
3
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
JavaScript
JavaScript (da non confondere con Java) è un linguaggio di scripting che si integra con
l’HTML e può essere utilizzato per creare comportamenti interattivi nelle pagine Web.
Come esempio, la figura seguente mostra il codice HTML e JavaScript che definisce una
pagina contenente un form con un campo di input e un bottone; quando l’utente clicca sul
bottone, se la casella di testo è vuota (non contiene cioè nessun carattere o solo spazi) viene
visualizzato un messaggio di errore, altrimenti la stringa inserita viene inviata al server.
4
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Nell’esempio viene definita una funzione JavaScript (posta nella sezione HEAD dentro il tag
SCRIPT) che è poi chiamata dentro il form dal codice (sempre JavaScript) che viene eseguito
in risposta alla pressione del bottone.
onClick è un event handler, ossia un attributo che specifica “cosa deve essere fatto” quando
il bottone viene premuto (in questo caso, deve essere eseguito il codice indicato).
Le funzioni JavaScript possono anche essere poste in un file esterno e caricate per mezzo
dell’attributo src, sempre del tag SCRIPT; in tal modo pagine diverse possono sfruttare le
stesse funzioni.
Nota: JavaScript è un linguaggio “basato sugli oggetti”, nel senso che tutti gli elementi che
compongono la pagina vengono visti come “oggetti” legati da relazioni gerarchiche. Dal
punto di vista pratico, nel linguaggio tali relazioni vengono esplicitate attraverso una
“notazione puntata”: con riferimento all’esempio della figura,
document.f.username.value indica il valore del campo il cui nome è username,
del form che si chiama f del documento corrente (document). document, f e username
sono oggetti, contenuti uno nell’altro, che compongono la pagina.
Ogni oggetto (e anche le variabili sono ritenute tali) può avere associati degli attributi (cioè
delle proprietà) e dei metodi (cioè delle funzioni direttamente legate agli aggetti):
nell’esempio, length e value sono attributi, mentre charAt e submit sono metodi.
Oltre agli oggetti predefiniti, l’utente può creare oggetti propri, con relativi attributi e metodi.
Dal punto di vista sintattico, JavaScript è molto simile a Java (da cui il nome), anche se,
essendo un linguaggio di scripting, introduce diverse semplificazioni rispetto ad esso.
5
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
DHTML
Il DHTML non è un nuovo HTML, ma semplicemente l’unione di HTML, fogli di stile e
JavaScript. Attraverso JavaScript è infatti possibile agire dinamicamente sugli stili della
pagina e modificarne quindi l’aspetto “al volo”. Ad esempio, il codice mostrato nella figura
seguente fa in modo che quando il cursore del mouse sale sopra l’immagine il colore di
sfondo della pagina cambi da bianco a rosso.
Gli event handler onMouseOver e onMouseOut vengono invocati, rispettivamente,
quando il cursore del mouse sale sull’immagine e quando esce da essa. Il valore assegnato alla
proprietà background dell’oggetto style determina il colore di sfondo.
Va osservato che JavaScript non serve solo per creare comportamenti interattivi: può infatti
agire autonomamente sugli elementi della pagina, senza la necessità dell’intervento
dell’utente. Ad esempio, potrebbe essere usato per temporizzare l’apparizione di una sequenza
6
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
di immagini (creando un effetto simile a quello delle GIF animate), oppure per scrivere o
leggere cookie (file memorizzati sul client contenenti informazioni di vario tipo).
Nota (DOM, linguaggi e cookie): l’insieme degli oggetti sui quali è possibile agire attraverso
JavaScript, così come gli event handler che si possono usare per questo scopo, non fa parte
del linguaggio JavaScript, ma del cosiddetto Document Object Model (DOM), che è specifico
dei browser. Ciò, purtroppo, può portare a degli inconvenienti, in quanto alcuni oggetti ed
event handler riconosciuti da un browser non lo sono da altri e viceversa…
Oltre a JavaScript, i browser possono riconoscere anche altri linguaggi, eventualmente per
mezzo di appositi plugin. Ad esempio, MS Explorer interpreta anche il linguaggio VBScript,
sintatticamente diverso da JavaScript.
I cookie sono piccoli file testuali (memorizzati sull’hard disk della macchina dell’utente per
mezzo di codice JavaScript) che di solito sono usati dai siti Web per scopi statistici (e in
genere non costituiscono quindi un problema per la sicurezza del client o per la privacy). Ad
esempio, possono essere usati per controllare quante volte un utente accede ad un sito, o per
memorizzare informazioni relative al navigatore (il suo nome, le sue preferenze, ecc.).
7
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Interazione lato server – Implementazione di siti dinamici
Quando si compilano i campi di un form, i dati inseriti vengono di solito inviati al server,
dove sono elaborati in qualche modo da un programma o da una pagina “speciale” indicati
come valore dell’attributo action del tag FORM. L’utente potrebbe quindi ad esempio
ricevere una pagina di risposta il cui contenuto non è staticamente definito, ma dipende
proprio dai dati che aveva inserito nel modulo.
Analogamente, si pensi ai molti siti il cui contenuto proviene da database: anche in questo
caso i dati non sono memorizzati in file HTML predefiniti, ma sono generati “al volo” quando
servono (quando devono cioè essere inviati all’utente).
Comportamenti come quelli descritti fanno parte delle cosiddette interazioni lato server, dato
che implicano l’intervento attivo del server. In particolare, quando entra in gioco la non
staticità del contenuto, generato “on demand”, si parla di siti dinamici.
Le due principali tecnologie per la creazione di interazioni lato server e siti dinamici sono i
programmi CGI e gli application server.
8
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Programmi CGI
La tecnologia CGI (Common Gateway Interface) permette di interfacciare macchine client
con macchine server, per mezzo di programmi CGI.
Un programma CGI viene eseguito sul server (dove è memorizzato in una directory
particolare, che in genere si chiama cgi-bin) e può essere scritto utilizzando qualunque
linguaggio, sia interpretato che compilato. Solitamente, sono preferiti linguaggi di scripting
interpretati, più semplici da gestire, quali il Perl e il Tcl.
L’utilizzo tipico dei programmi CGI è l’elaborazione dei dati inseriti nei form (ad esempio la
loro memorizzazione in file o database) e la generazione di contenuto dinamico, che viene
inviato al client e visualizzato dal browser. Il codice HTML seguente, ad esempio, inizia la
definizione di un form i cui dati saranno inviati al programma Tcl elabora.tcl
(utilizzando il metodo get):
<FORM name=”f” method=”get” action=”/cgi-bin/elabora.tcl”>
Basandosi completamente su codice di programmazione, la tecnologia CGI può risultare
piuttosto complessa per chi non ha specifiche competenze informatiche; ecco perché le viene
spesso preferito l’approccio degli application server.
9
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Application server
La tecnologia degli application server permette di elaborare dati ricevuti dai form e di
generare pagine dinamiche, un po’ come avviene con i programmi CGI.
Un application server è software aggiuntivo che viene installato su una macchina server (in
genere quella che ospita il Web server) ed è in grado di interpretare ed eseguire codice di
programmazione scritto in un linguaggio specifico; gli application server più diffusi sono ASP
e PHP.
A differenza dei programmi CGI, il codice di programmazione degli application server può
essere integrato direttamente nell’HTML, cosa che risulta particolarmente comoda per la
generazione di pagine di risposta all’utente. Alcune funzionalità sono inoltre più semplici da
implementare, come l’interazione con i database.
Il seguente esempio mostra l’invio dei dati di un form a una pagina PHP. I dati del form della
schermata superiore vengono inviati al file result.php, che, dopo avere eseguito il codice
PHP in esso contenuto (in rosso), genera la risposta mostrata nella schermata inferiore. È da
notare che la pagina ricevuta dal client non contiene codice PHP, ma solo codice HTML (il
risultato dell’elaborazione sul server).
10
Siti interattivi e dinamici
Marco Porta – CIM: Web Design & Technologies
Nota: ASP è tipicamente diffuso sui server Windows, mentre il PHP è più comune sui server
Linux e Unix (anche se se ne esistono versioni per Windows). Altri application server
relativamente diffusi sono JSP (basato su Java) e ColdFusion; pur essendo il più semplice dei
quattro (adatto anche ai “non informatici”), quest’ultimo è l’unico a non essere gratuito.
11