Siti interattivi e dinamici in poche pagine 1
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
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
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
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
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
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
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
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
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
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