Tecnologie Web

Fulvio Ferroni fulvioferroni@teletu.it

2011.08.09

Copyright Fulvio Ferroni fulvioferroni@teletu.it Via Longarone, 6 - 31030 - Casier (TV) Le informazioni contenute in questa opera possono essere diffuse e riutilizzate in base alle condizioni poste dalla licenza GNU General Public License, come pubblicato dalla Free Software Foundation. In caso di modica dellopera e/o di riutilizzo parziale della stessa, secondo i termini della licenza, le annotazioni riferite a queste modiche e i riferimenti allorigine di questa opera, devono risultare evidenti e apportate secondo modalit appropriate alle caratteristiche dellopera stessa. In nessun caso consentita la modica di quanto, in modo evidente, esprime il pensiero, lopinione o i sentimenti del suo autore. Lopera priva di garanzie di qualunque tipo, come spiegato nella stessa licenza GNU General Public License. Queste condizioni e questo copyright si applicano allopera nel suo complesso, salvo ove indicato espressamente in modo diverso.

II

Indice generale
Premessa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VIII Lautore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VIII

Parte i Nozioni preliminari sulla rete Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1 La rete Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.1 1.2 1.3 1.4 Cenni storici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Protocolli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Intranet e Extranet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Il World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 1.4.1 1.4.2 1.5 1.5.1 1.5.2 1.6 Ipertesti e ipermedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Come funziona il Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 URL completi di percorso e nome di le . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 URL con altri protocolli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Gli indirizzi delle risorse in Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Collegarsi ad Internet da casa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Parte ii

Il Web statico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2 Il linguaggio HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.1 2.2 2.3 2.4 2.5 Storia dellHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Contenuto di un le HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Strumenti per la creazione di documenti HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Uso dei validatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Struttura di un documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 2.5.7 2.5.8 2.5.9 2.5.10 2.5.11 2.6 2.7 Lelemento html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Lelemento head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Lelemento body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Elementi di blocco e elementi di testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Intestazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Paragra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Lelemento span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Righello orizzontale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Centratura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Interruzione di linea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Grassetto, corsivo e sottolineato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Nidicazione dei tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Insiemi di caratteri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 2.7.1 2.7.2 2.7.3 Entit per caratteri speciali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Entit per caratteri riservati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Lo spazio unicatore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2.8

Altri elementi di uso frequente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 III

2.8.1 2.8.2 2.8.3 2.8.4 2.8.5 2.8.6 2.8.7 2.8.8 2.9 2.9.1 2.9.2 2.9.3 2.10 2.10.1 2.10.2 2.10.3 2.10.4 2.10.5 2.11 2.11.1 2.11.2 2.11.3 2.11.4 2.12

Commenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Uso dei colori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Elemento font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Elemento address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Elemento div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Elemento pre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Elementi subscript e superscript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Elementi emphasis e strong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Liste numerate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Liste puntate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Liste a glossario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Collegamenti esterni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Collegamenti a etichette in un documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Usare i collegamenti insieme ad altri elementi . . . . . . . . . . . . . . . . . . . . . . . . . 42 Collegamenti interni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Collegamenti ad altre parti dello stesso documento . . . . . . . . . . . . . . . . . . . . 44 Inserimento di immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Posizionamento delle immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Dimensionamento delle immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Collegamenti con immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Elenchi o liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Collegamenti ipertestuali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Immagini nei documenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Lattributo title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

3 HTML: nozioni avanzate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 3.1 Informazioni supplementari nellintestazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 3.1.1 3.1.2 3.1.3 3.2 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.3 3.3.1 3.3.2 3.4 3.5 3.4.1 Lelemento meta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Lelemento link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Gli elementi base, script, style, isindex . . . . . . . . . . . . . . . . . . . . 51 Esempi di tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Attributi dellelemento table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Attributi del titolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Attributi delle righe e delle celle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Creazione di celle vuote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Tabelle nidicate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Uso dei riquadri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Riquadri in linea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Attributi degli oggetti multimediali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Uso delle tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Riquadri e riquadri in linea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Oggetti multimediali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Immagini mappate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 IV

4 I fogli di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 4.1 4.2 Caratteristiche dei fogli di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Struttura delle regole di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 4.2.1 4.2.2 4.3 4.3.1 4.3.2 4.3.3 4.3.4 4.3.5 4.4 4.5 Denizione dei selettori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Dichiarazione di regole di stile per la formattazione . . . . . . . . . . . . . . . . . . . . . 74 Fogli di stile in linea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Fogli di stile incorporati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Fogli di stile collegati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Organizzazione a cascata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Fogli di stile alternativi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Tipi di fogli di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Posizionamento con i fogli di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Fogli di stile per la stampa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 4.5.1 4.5.2 Fogli di stile per media diversi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Impostazione di un foglio di stile per la stampa . . . . . . . . . . . . . . . . . . . . . . . . . 93

Parte iii

Il Web dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

5 Introduzione al Web dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 6 Moduli e programmi CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 6.1 6.2 Creazione di moduli HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Controlli dei moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 6.2.1 6.2.2 6.2.3 6.2.4 6.3 6.4 Elemento input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Lelemento select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Lelemento textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Raggruppamento e ordinamento dei controlli di un modulo . . . . . . . . . . . . . 106

Lattributo accesskey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Prerequisiti per luso di CGI (cenni alla congurazione di Apache) . . . . . . . . . 107 6.4.1 6.4.2 6.4.3 Congurazione di Apache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Gestione dei siti-utente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Permessi su le e directory di un sito Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 La richiesta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 La risposta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Simulazione di una connessione HTTP da linea di comando . . . . . . . . . . . . 117

6.5

Approfondimenti sul protocollo HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 6.5.1 6.5.2 6.5.3

6.6 6.7 6.8 6.9

Creazione della pagina di risposta da parte del CGI . . . . . . . . . . . . . . . . . . . . . . . . . 118 Variabili di ambiente per i CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Passaggio dei dati del modulo al programma CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Decodica dei dati di input del CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 6.9.1 6.9.2 Esempio di decodica dati in Perl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Altri strumenti per la decodica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

6.10

Esempio completo di esecuzione di un CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 V

6.11

Considerazioni nali sui CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

7 Web, basi di dati e linguaggio PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 7.1 7.2 7.3 Architetture three-tier e pattern MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Strumenti necessari per la gestione di basi di dati via Web . . . . . . . . . . . . . . . . . . . 133 Basi di dati con MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 7.3.1 7.3.2 7.3.3 7.3.4 7.4 7.4.1 7.4.2 7.4.3 7.4.4 7.5 7.6 7.7 7.8 Attivazione del servente MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Dialogo con il servente MySQL con mysql . . . . . . . . . . . . . . . . . . . . . . . . . 136 Comandi utili per usare MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Creazione di una tabella in MySQL per le prove . . . . . . . . . . . . . . . . . . . . . . . 139 Attivazione del servente PostgreSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Dialogo con il servente PostgreSQL con psql . . . . . . . . . . . . . . . . . . . . . . . 142 Comandi utili per usare PostgreSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Creazione di una tabella in PostgreSQL per le prove . . . . . . . . . . . . . . . . . . . 145

Basi di dati con PostgreSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Introduzione al linguaggio PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Cenni alla sintassi del linguaggio PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Validazione dellinput con PHP (cenno alle espressioni regolari) . . . . . . . . . . . . . . 153 Le sessioni in PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 7.8.1 7.8.2 7.8.3 Il concetto di stato di un applicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Mantenere lo stato nelle applicazioni con PHP . . . . . . . . . . . . . . . . . . . . . . . . 157 Sessioni native in PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

7.9 7.10 7.11 7.12 7.13

Pagine PHP che richiamano se stesse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Gestione degli errori in PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Inclusione di codice e scrittura di funzioni in PHP . . . . . . . . . . . . . . . . . . . . . . . . . 168 La funzione header() di PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Gestione di basi di dati MySQL e PostgreSQL con PHP . . . . . . . . . . . . . . . . . . . . 171

8 Script attivi, DHTML, applet, servlet (cenni) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 8.1 8.2 JavaScript e Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Script attivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 8.2.1 8.2.2 8.3 8.4 Attributi di evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Limiti di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 8.4.1 8.4.2 Caratteristiche del linguaggio Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Creazione ed esecuzione delle applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

8.5

Servlet Java e JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Parte iv Nuovi sviluppi del Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

9 Da HTML a XML (cenni) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 9.1 Limiti dellHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 VI

9.2 9.3 9.4

Genesi e natura dellXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Documenti XML ben formati e validi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Parser ed applicazioni XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

10 Programmazione distribuita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 11 Introduzione ai Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 11.1 Componenti dei Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

12 Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 12.1 12.2 12.3 12.4 Web 2.0: punto di vista sociale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206 Web 2.0: punto di vista tecnologico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Generalit su Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Loggetto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Chiamate di tipo get . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Chiamate di tipo post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Chiamate sincrone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Esempio di gestione di un modulo con Ajax . . . . . . . . . . . . . . . . . . . . . . . . . 216

12.4.1 12.4.2 12.4.3 12.4.4

13 Bibliograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 13.1 13.2 13.3 Testi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Siti Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Altre fonti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

VII

Premessa
Queste dispense sono scritte allo scopo di fornire una panoramica sugli strumenti utili alla creazione di applicazioni Web; sono basate sui precedenti lavori dello stesso autore, Corso HTML e (dalla versione 2010.08.31) Creazione di pagine Web e li sostituiscono completamente. Nella prima parte viene fatta una breve storia di Internet e del Web e vengono date le nozioni fondamentali per comprenderne il funzionamento. Si passano poi, nella seconda parte, ad esaminare gli strumenti per la creazione di pagine Web statiche: HTML e CSS. Riguardo invece alla terza parte sul Web dinamico, data la vastit del tema, vengono approfonditi solo i CGI e, in parte, luso del PHP e linterfacciamento con le basi di dati; altri strumenti come JavaScript, le servlet Java, JSP, vengono esaminati in modo pi superciale. La quarta parte (da completare), inne, dedicata ad un breve esame di XML e dei Web Services e agli ultimi sviluppi che hanno portato allavvento del Web 2.0. Gli strumenti cui si fa riferimento nelle dispense sono quasi esclusivamente appartenenti alla categoria del software libero o Open Source; non vengono prese in esame tecnologie o piattaforme proprietarie.

Lautore

Fulvio Ferroni via Longarone,6 31030 Casier (TV) fulvioferroni@teletu.it Laureato in matematica, insegnante di informatica dal 1992 dopo una precedente esperienza di sistemista presso la Unisys Italia. Usa GNU/Linux dal 1997 quando install con successo una Slackware su un 386 usando 50 dischetti.
Fulvio Ferroni ... nel 1961, quando era ancora carino. |

VIII

Parte i

Nozioni preliminari sulla rete Internet

Capitolo

La rete Internet
In questo capitolo vengono date alcune informazioni sulla genesi ed il funzionamento della rete Internet e del WWW (World Wide Web) (denominato pi brevemente Web).

1.1 Cenni storici

Internet una rete internazionale formata dallinterconnessione di molte migliaia di reti di computer. La sua storia inizia alla ne degli anni cinquanta e precisamente nel 1958 quando negli Stati Uniti viene creata, nellambito del Dipartimento della Difesa, unagenzia di nome DARPA ( Defence Advanced Research Projects Agency). Il suo scopo fondamentale era quello di riacquisire il primato tecnologico nei confronti dellUnione Sovietica che nel 1957 aveva lanciato il primo satellite articiale della storia, lo Sputnik e qualche anno dopo inviato anche il primo uomo, Yuri Gagarin, in orbita. Siccome il programma spaziale venne poi assegnato alla NASA, DARPA si dedic alla ricerca informatica di base. Stante il clima di ostilit esistente in quel periodo tra le due superpotenze, la cosiddetta guerra fredda, DARPA doveva in particolare progettare un sistema di telecomunicazioni in grado di funzionare in caso di un attacco bellico particolarmente distruttivo, anche di tipo nucleare. I primi studi portarono alla denizione della rete Arpanet cio di quella che pu essere considerata lantenata di Internet: essa non aveva nessuna autorit centrale, i nodi che ne facevano parte erano autonomi ed in grado di operare in una situazione di forte instabilit in modo che la rete potesse sopportare anche la distruzione di uno o pi dei nodi stessi. Il 30 agosto 1969 venne installato il primo nodo presso lUniversit della California a Los Angeles dotata di un computer Processore di messaggi di interfaccia Honeywell numero 1; la sua attivazione avvenne il 2 settembre 1969 e questa pu essere a tutti gli effetti considerata la data di nascita di Internet. Nel giro di 3 mesi i nodi divennero quattro: Stanford Research Institute, Universit della California a Santa Barbara, Universit dello Utah. Nel corso degli anni 70 molte istituzioni collegarono le loro reti o i loro computer ad Arpanet e gli utenti iniziarono ad usare la rete principalmente per scambiarsi a distanza messaggi sotto forma di posta elettronica o per inviare e ricevere le contenenti dati o programmi. Allinizio degli anni 80, la rete cominci ad espandersi in modo massiccio e divenne a tutti gli effetti una rete di reti utilizzando ancora Arpanet come dorsale (rete ad alta velocit che unisce tra loro altre reti locali). Nel 1981 i computer collegati erano 213. Rimanevano per esclusi gli atenei e i centri di ricerca che non avevano rapporti con il Dipartimento della Difesa degli Stati Uniti. Per potere estendere laccesso a tutti gli interessati fu necessario il disimpegno dei militari che nel 1983 crearono una loro rete (Milnet) mentre Arpanet assunse il nome di Internet e pass allutilizzo del protocollo di rete TCP/IP (Transmission Control Protocol al posto del precedente NCP (Network Control Protocol). Nel 1985 si collegavano a Internet 100 reti diverse, divenute 500 nel 1989, saturando completamente la capacit della dorsale Arpanet. Fu a questo punto che la NSF (National Science Foundation), istituita dal governo degli Stati Uniti con lo scopo di favorire la crescita di sistemi di comunicazione tra le universit, decise di creare la nuova dorsale Nfsnet al ne di sostituire Arpanet che fu infatti denitivamente smantellata nel 1990. Adesso esistono molte altre dorsali afancate a Nfsnet ed quindi possibile il collegamento ad Internet di migliaia di reti (oltre 50.000 nel 1995) e milioni di singoli computer o host (5 nel

La rete Internet

1994, saliti a 110 nel 2000 e a 320 a ne 2004); tale collegamento pu avvenire con vari mezzi trasmissivi come: cavi in bra ottica, cavi coassiali, cavi telefonici, satelliti, onde radio. Nella tabella seguente viene mostrato il numero di utenti di Internet nel Mondo, negli USA e in Italia negli ultimi anni (i dati sono espressi in milioni):
Anno 1995 1997 2000 2005 Mondo (% su ab.) 14 (0,4%) 90 (2%) 260 (4,5%) 900 (15%) USA (% su ab.) 10 (4%) 40 (15%) 105 (35%) 200 (68%) Italia (% su ab.) 0,45 (0,7%) 2,3 (4%) 10 (16%) 28 (49%)

Come si vede da queste cifre in Italia il numero di utenti stato a lungo molto basso rispetto al totale ma ultimamente sta crescendo con grande rapidit. Anche nel nostro paese Internet si sta affermando come fondamentale mezzo di comunicazione ed efcace strumento di lavoro nonch come sbocco commerciale di notevole importanza; molte aziende infatti stanno spostando del tutto o in parte la loro attivit sulla rete dando impulso al cosiddetto Commercio Elettronico. La caratteristica pi interessante di Internet che nessuno ne proprietario; tutti gli enti che sono collegati alla rete ne gestiscono una parte e sono responsabili di una frazione dellimmensa mole di informazioni in essa contenute. In ultima analisi anche un utente nale (cio chiunque di noi) che crea e pubblica delle pagine e le diffonde in rete diviene comproprietario di Internet. Siamo dunque in presenza di un mezzo di comunicazione moderno, in continua espansione, diffuso in tutto il Mondo e soprattutto libero. La differenza con le televisioni, i giornali, le case editrici, discograche e cinematograche infatti evidente: esse sono sempre o quasi di propriet di qualcuno che, volendo, pu manipolarle a piacimento in modo da inuenzare le opinioni, i gusti e le scelte degli utenti per i propri scopi pi o meno leciti (ogni riferimento allattuale situazione italiana puramente voluto). Inoltre con tali mezzi difcilmente si riesce ad avere un ruolo attivo nel processo di comunicazione, come invece spesso possibile in Internet. Grazie al computer e alle reti nato dunque questo mezzo di comunicazione e di condivisione delle informazioni totalmente libero con ci smentendo le paure di molte persone (espresse anche in tanti libri o lm) che temevano che il calcolatore potesse divenire una sorta di Grande Fratello in grado di controllare e condizionare la vita di tutti i cittadini limitandone in modo inaccettabile la libert. Almeno per ora queste macchine cos bistrattate sono servite esattamente al contrario: sono infatti uno strumento di libert di cui praticamente tutti possono usufruire (almeno nei paesi economicamente avanzati). Credo inne sia da sottolineare il fatto che Internet uno strumento e come di tutti gli strumenti se ne pu fare un uso buono o uno cattivo. Sono quindi profondamente sbagliate le campagne giornalistiche, per fortuna ora meno frequenti, che, basandosi sulla sostanziale ignoranza del fenomeno, sia da parte del grande pubblico sia, cosa molto pi grave, da parte dei giornalisti che le conducono, tendono a criminalizzare Internet dipingendola come la fonte delle peggiori nefandezze ed arrivando ad affermare che darebbe addirittura assuefazione come la droga. Questo modo di dipingere la situazione non fa altro che favorire chi, a vari livelli, vorrebbe introdurre vincoli, controlli, limitazioni, censure, allinterno della rete e riguardo al suo utilizzo.

La rete Internet

1.2 Protocolli

Il funzionamento di Internet basato su tutta una serie di protocolli. Per protocollo si intendono la procedura e le regole da seguire nel trasmettere e ricevere dati su una rete, oppure su una linea di comunicazione, in modo che gli utenti possano usare macchine elettroniche per scambiare informazioni in modo ordinato, cos da riprodurre fedelmente al punto di ricezione quello che stato inviato dal punto di trasmissione. Il protocollo specica il formato dei dati, la temporizzazione dei segnali, la sequenza dinvio e i sistemi per vericare la presenza di eventuali errori di trasmissione. Prima di parlare dei protocolli di Internet opportuno introdurre un concetto molto importante su cui essi sono basati, quello della differenza tra clienti e serventi. Un servente un computer (con apposito software) che fornisce informazioni o servizi; un cliente uno strumento o programma, di solito su un computer diverso, che usufruisce delle informazioni o dei servizi. La caratteristica fondamentale di tutti i protocolli di Internet il loro essere gratuiti e aperti cio in grado di funzionare con la quasi totalit delle reti siche e in maniera indipendente dallhardware di un particolare produttore. Il protocollo pi importante senza dubbio il TCP/IP basato sulla tecnologia a commutazione di pacchetto: i dati da inviare vengono suddivisi nel nodo (computer) di partenza in diverse parti o pacchetti) il cui cammino attraverso la rete pu seguire differenti percorsi; nel nodo di arrivo vengono poi ricomposti controllandone anche lintegrit. Un primo vantaggio di tale metodo consiste nel fatto che non necessario n denire n conoscere il cammino da seguire; compito di appositi dispositivi, i router, instradare i dati evitando le eventuali interruzioni e scegliendo, comunque, il percorso pi veloce. Un altro vantaggio che vengono sfruttati al meglio i canali trasmissivi che non sono mai interamente occupati da ununica trasmissione come avviene ad esempio nelle comunicazioni telefoniche nelle quali la linea tra il chiamante ed il ricevente occupata per tutta la durata della telefonata (in tal caso si parla di commutazione di circuito). Osserviamo la gura 1.2 e consideriamo che il computer A invii dati al computer B, senza che le due macchine siano collegate in modo diretto in quanto sono presenti altri nodi intermedi (i succitati router, qui indicati con dei cerchi) attraverso i quali vengono smistati i pacchetti; a tale scopo questi ultimi contengono al loro interno lindirizzo del nodo di destinazione, oltre che di quello di origine.
Figura 1.2. |

La rete Internet

Se supponiamo che il messaggio inviato da A a B sia suddiviso in tre pacchetti possiamo ipotizzare i seguenti percorsi (fra quelli possibili): pacchetto 1: A - R1 - R2 - R3 - R6 - R7 - B pacchetto 2: A - R1 - R2 - R5 - R9 - R10 - R7 - B pacchetto 3: A - R1 - R4 - R8 - R10 - R7 - B Approfondimenti sul protocollo TCP/IP e sulle reti di computer in generale esulano dagli scopi di questo corso, si consiglia la consultazione di testi specici. Altri protocolli e servizi importanti in Internet sono: TELNET per collegarsi a distanza ad un computer e SSH (Secure Shell) per farlo in modalit sicura; SMTP (Simple Message Transfer Protocol) e POP3 (Post Ofce Protocol 3) rispettivamente per invio e ricezione della posta elettronica; FTP (File Transfer Protocol) per lo scambio di le; NNTP (Network News Transport Protocol) per la distribuzione di messaggi nei newsgroup (bacheche elettroniche); HTTP (HyperText Transfer Protocol) per il trasferimento di documenti ipertestuali (pagine Web);

1.3 Intranet e Extranet

Una Intranet una rete invariabilmente imperniata sul protocollo TCP/IP e che spesso utilizza serventi Web (di cui parliamo in seguito) come punto di centralizzazione e pubblicazione delle informazioni. Viene realizzata entro i conni di una azienda o di una qualunque organizzazione ed invisibile o solo parzialmente visibile dallesterno o perch non collegata con Internet o perch collegata tramite un dispositivo rewall che ha il compito di proteggere i dati dalle intrusioni esterne non desiderate. Viene utilizzata come struttura per convogliare informazioni utili alle attivit interne e per facilitarne luso da parte degli utenti. In una Intranet si usano infatti gli stessi strumenti di Internet, come ad esempio i programmi di navigazione graci, molto amichevoli e facili da usare e i programmi per la gestione della posta elettronica. Una Extranet invece lopposto di Internet, nel senso che ancora una rete geograca di ampia portata imperniata sul protocollo TCP/IP che per viene utilizzata unicamente per scopi privati e alla quale possono accedere solamente le persone autorizzate da una determinata azienda che ne gestore oltre che proprietaria. Con essa si ha lesportazione allesterno dei conni aziendali delle informazioni che sono reperibili sulla Intranet aziendale. La Extranet comprende le aziende e le persone che si trovano allesterno del rewall con le quali lazienda desidera comunque mantenere uno scambio di informazioni. Un esempio tipico quello di una grossa azienda che crea una Extranet con le aziende sue fornitrici e/o clienti.

La rete Internet

1.4 Il World Wide Web

Il World Wide Web rappresenta uno spazio denito allinterno di Internet. Si usa la parola spazio perch difcile descriverlo in altro modo. Infatti non si tratta di un oggetto sico e nemmeno di unentit riconducibile a conni geograci, bens un sistema di presentazione e soprattutto dinterconnessione tra le informazioni, concepito in modo da favorire il passaggio automatico da un documento allaltro e consentire la navigazione in un grande mare informativo, basandosi esclusivamente su ci che appare sullo schermo del computer. Il World Wide Web fa parte di Internet ma comprende solo una parte delle risorse disponibili in essa, ecco perch lo deniamo come uno degli spazi contenuti allinterno del grande universo Internet. Il progetto del Web nato nel 1991 presso i1 CERN (Consiglio Europeo per la Ricerca Nucleare) di Ginevra, quale sistema per semplicare lo scambio di informazioni tra ricercatori scientici che gi utilizzavano Internet per far circolare i loro articoli e pubblicazioni. Il metodo che veniva usato era infatti basato sul protocollo FTP e presupponeva la conoscenza esatta della dislocazione sica delle informazioni da scaricare dalla rete . Era inoltre essenziale possedere i programmi adatti ad aprire i documenti scaricati che potevano essere scritti con gli strumenti pi diversi. Inne non era previsto nessun meccanismo di collegamento automatico tra le varie informazioni, cosa invece possibile con gli ipertesti. Il 13 marzo del 1989, Tim Berners Lee, un ricercatore del CERN che pu essere considerato il padre del Web, scrisse un documento dal titolo Information Management: a Proposal" in cui si chiedeva di creare un sistema che rendesse pi agevole la condivisione di informazioni, a livello mondiale, tra scienziati e ricercatori, risolvendo i tre problemi prima evidenziati. La proposta prevedeva tre componenti essenziali: uninterfaccia utente comune per tutti (indipendente quindi dal tipo di computer utilizzato); la capacit di incorporare nel sistema i tipi pi diversi di documento e le tecnologie pi varie; laccessibilit universale a tutte le informazioni contenute in questo ambito. Il nome stesso del progetto, Ragnatela estesa quanto il Mondo, sottolinea linterconnessione tra informazioni; in sostanza si trattava di trasformare lenorme capacit informativa disponibile su Internet in qualcosa che chiunque potesse usare e consultare con facilit. Per questo fu necessario denire: un nuovo linguaggio universale per la creazione di documenti con caratteristiche ipertestuali, il linguaggio HTML (HyperText Markup Language); una notazione universale di localizzazione degli stessi, gli URL (Uniform Resource Locator) o URI (Uniform Resource Identier); un nuovo protocollo ottimizzato per il trasferimento di ipertesti, lHTTP. Larchitettura risultante di tipo cliente/servente. Il Web infatti funziona grazie a dei computer, dotati di apposito software, chiamati Web server su cui sono depositati documenti il cui formato e sistema di visualizzazione conforme alle speciche denite dal CERN; gli utenti possono usufruire di queste informazioni grazie a dei programmi clienti chiamati browser o navigatori.

La rete Internet

Le idee di Berners Lee furono considerate interessanti e meritevoli di approfondimento da parte del CERN; cos nel giro di due anni, con il contributo del collega Robert Cailliau, si arriv alla denizione delle basi del Web e fu attivato il primo servente su un computer NeXT. Fondamentale fu comunque la creazione dei primi strumenti utili alla fruizione delle informazioni: il primo browser che si chiamava www e aveva una interfaccia a caratteri, inizi a essere utilizzato su scala ridotta nel marzo del 1991. Unaltra tappa determinante fu linstallazione di WAIS (Wide Area Information Servers) per consentire dal Web la ricerca di documenti su scala mondiale usando come parole chiave i termini contenuti nel testo dei documenti stessi. Verso la ne del 1991, il CERN, annunciando lesistenza del progetto a tutti gli scienziati impegnati nella ricerche sulla sica nucleare per le alte energie, e rinunciando ad ogni diritto dautore sul progetto stesso, diede il battesimo ufciale al World Wide Web. Nel gennaio del 1993 erano operativi 50 serventi Web, alla ne dello stesso anno erano diventati 623. La progressione negli anni seguenti stata impressionante:
Periodo gennaio 1993 dicembre 1993 giugno 1994 dicembre 1994 giugno 1995 gennaio 1996 gennaio 1999 gennaio 2000 gennaio 2001 gennaio 2002 gennaio 2003 gennaio 2004 gennaio 2005 gennaio 2008 Numero di serventi Web 50 623 2.738 10.022 23.500 90.000 4.000.000 10.000.000 27.500.000 37.000.000 35.000.000 46.000.000 58.000.000 180.000.000 (1.500.000 Italiani)

Un ruolo fondamentale in questa crescita stato assunto dai browser graci il primo dei quali si chiamava Viola e funzionava su terminali X-Window cio su terminali graci collegati in rete locale ad a un minicomputer dotato del sistema operativo Unix. Nel 1993 lNCSA ( National Center for Supercomputing Applications) diffuse la prima versione di Mosaic per X-Window sviluppata da Marc Andreesen. Per molto tempo Mosaic stato il principale browser per il Web ed il suo impiego si esteso alle piattaforme pi diverse, tra cui anche Windows; dal suo ceppo sono nati molti dei programmi di navigazione successivi. Nel 1994 nacquero le prime societ di software specializzate nella produzione di prodotti per il Web e per Internet. Una delle pi importanti fu la Mosaic Communication Corporation fondata in California dallo stesso Marc Andreesen che alla ne del 1994 rilasci un navigatore per Windows, Macintosh e X Window che si chiamava Netscape Navigator. Il prodotto divenne talmente popolare da trasferire il proprio nome anche allazienda medesima, che divenne Netscape Communications. Nel luglio del 1994 il CERN inizi a trasferire il progetto Web a un altro ente, il W3C ( World

La rete Internet

Wide Web Consortium), al quale partecipano vari soggetti come il MIT (Massachusetts Institute of Technology) e, per lEuropa, lINRIA (Institut National de Recherche en Informatique et en Automatique - Istituto nazionale della ricerca sullinformatica e sullautomazione). Tale ente, libero e senza ni di lucro, attualmente impegnato in attivit nalizzate allevoluzione delle tecnologie e nella denizione degli standard del Web ed presieduto da Tim Berners Lee. Nel frattempo Microsoft, che in un primo momento aveva sottovalutato limportanza commerciale di Internet, lanci sul mercato il proprio browser Internet Explorer, scatenando quella che fu denominata guerra dei browser contro il programma della Netscape. La battaglia venne vinta nettamente e velocemente da Internet Explorer grazie al fatto che, a partire da Windows 98, il programma di navigazione veniva incorporato nel sistema operativo. Questo avvenne malgrado il programma concorrente non fosse inferiore dal punto di vista tecnologico e anzi avesse il vantaggio di essere multi-piattaforma (era disponibile per macchine Unix o GNU/Linux). Netscape Navigator, che nel 1997 era il navigatore nettamente pi diffuso, nel 2000 era ridotto ad un ruolo del tutto marginale; inoltre lazienda Netscape non esisteva pi essendo stata acquistata nel 1998 da AOL (American On Line) (a sua volta assorbita nel 2000 in Time Warner). Per fortuna nel 1998, con una mossa che fece scalpore, Netscape non solo aveva reso gratuito il suo programma (scelta ormai obbligata dato che il programma concorrente era gratuito) ma aveva anche deciso di rilasciare il codice sorgente. Questo permise la nascita del progetto Mozilla, interamente Open Source, dellomonimo browser e di tanti altri basati sullo stesso motore di rendering denominato Gecko: Epiphany, Galeon, Firefox, Netscape (rinato a nuova vita grazie al codice del progetto Mozilla). Questi oggi sono i programmi di navigazione di riferimento fuori dalla piattaforma Microsoft (in GNU/Linux soprattutto) e, grazie alle loro ottime qualit, si stanno ritagliando uno spazio signicativo anche fra gli utenti Windows (come nel caso dellottimo Firefox utilizzato, nel 2008, da circa il 20% dei navigatori). In queste dispense non vengono approfonditi i temi relativi al software libero, allopen source, a GNU/Linux per i quali si rimanda alla vastissima documentazione presente in rete; ci non toglie che lautore privilegi nettamente luso di tali strumenti come evidenziato in seguito, ad esempio nel paragrafo sul Web e le basi di dati (paragrafo 7).

1.4.1 Ipertesti e ipermedia

La proposta originariamente avanzata da Tim Berners Lee descriveva in dettaglio lutilit di avere un sistema che fosse facile da consultare su qualsiasi tipo di computer o terminale, nel quale fosse possibile eseguire ricerche e che creasse una connessione il pi tta possibile tra documenti pubblici e privati, al ne di facilitare e incoraggiare la navigazione tra questi ultimi. Lattuale struttura del Web rispecchia queste speciche iniziali ed basata su tre componenti essenziali: la rete Internet; gli ipertesti; la multimedialit Con il termine multimedialit si intende luso di una pluralit di mezzi di comunicazione (media) per la trasmissione di messaggi e informazioni; i pi importanti tra tali mezzi sono: testo scritto, suoni, immagini, lmati.

10

La rete Internet

Lefcacia della trasmissione di un messaggio notoriamente legata alla ridondanza dei mezzi elementari con cui essa effettuata. Pensiamo ad esempio alla narrazione, nella Bibbia, della consegna dei comandamenti a Mos in mezzo a bufere, lampi, tuoni e forti sensazioni siche, oppure alla differenza che corre tra leggere il testo di una commedia o vederla rappresentata, o ancora alla molteplicit di stimoli con cui vengono bombardati i giovani di oggi nelle discoteche. Recenti studi dimostrano che nella mente umana il ricordo di una comunicazione persiste tanto pi quanto maggiore il numero dei mezzi impiegati per trasmetterla e tale persistenza massima se c interazione tra le parti coinvolte nella comunicazione, come emerge dalla gura 1.4.
Figura 1.4. |

Dal punto di vista informatico la multimedialit consiste in un insieme di tecnologie, basate su un personal computer, con le quali vengono combinati testo, immagini, suoni, lmati, per formare un unico messaggio ricco di informazioni ed efcace dal punto di vista della comunicazione. Pi precisamente pu essere chiamato sistema interattivo multimediale un sistema di elaborazione in grado di utilizzare contemporaneamente almeno tre dei seguenti media: testo, graci, animazioni grache, segnali audio, suoni musicali, voce, immagini, lmati. La tecnologia oggi disponibile comunque gi in grado di assicurare lintegrazione di tutti questi mezzi su una stessa macchina; tutti i personal computer sul mercato sono infatti equipaggiati con scheda audio, casse acustiche, scheda video in grado di gestire lmati, microfono, lettore di DVD-ROM. Fra le applicazioni multimediali meritano unattenzione particolare gli Ipermedia che sono estensioni degli Ipertesti. Gli Ipertesti nascono da unidea di Ted Nelson che nel 1965 ipotizz un sistema software in grado di memorizzare articoli, annotazioni, relazioni ed altre informazioni testuali nel quale lutente poteva navigare liberamente. Alla base dellidea di Nelson cera losservazione che luomo parla in modo sequenziale perch dotato di un solo tratto vocale, legge e scrive sequenzialmente perch in tal modo sono organizzati i testi, ma ha una capacit di pensiero molto pi sosticata. Infatti la nostra mente opera spesso per associazione di idee ed in grado di costruire una vera e propria rete di conoscenze molto complessa in cui molti elementi sono in relazione non lineare tra loro. Gran parte dei sistemi informatici forniscono strumenti, anche sosticati, in grado di gestire e manipolare dati ed informazioni in modo solo sequenziale e senza alcuna visione integrata. Gli

La rete Internet

11

ipertesti invece permettono di stabilire collegamenti e rimandi allinterno dei documenti o fra documenti diversi creando una organizzazione non lineare del testo che non pu essere resa su una singola pagina; si aggiunge in pratica una terza dimensione al testo in modo da entrare dentro di esso. Pensiamo ad esempio di avere un testo riguardante Foscolo e leggiamo che in un certo periodo della sua vita egli fu ammiratore di Napoleone; se vogliamo maggiori informazioni su questultimo dobbiamo cambiare testo e passare ad uno che lo riguardi. Con un ipertesto invece si pu passare con un semplice comando (un click del mouse sul nome Napoleone) alle informazioni che ci interessano. Inoltre possiamo continuare la nostra navigazione nel documento in modo molto libero sfruttando i collegamenti in esso presenti ed arrivando ad esempio alla Napoli dei primi anni dell800 passando per Gioacchino Murat, cognato di Napoleone, che fu re nella citt in quel periodo. Tecnicamente gli ipertesti si basano su gra (reti) di nodi (concetti, idee, documenti) tra loro collegati e vengono creati con appositi programmi e con tecniche di cui comunque lutilizzatore non deve preoccuparsi. I collegamenti tra i vari documenti avvengono grazie a dei riferimenti. Il riferimento (detto iperlink o collegamento ipertestuale) deve essere evidenziato in qualche modo rispetto al resto del testo, ad esempio con un colore diverso o con la sottolineatura. Si parla poi di Ipermedia quando in un ipertesto vengono integrati suoni, immagini, lmati ed altro ancora. Nellesempio precedente si potrebbe pensare di avere a disposizione, nello stesso documento, anche limmagine digitalizzata di un quadro rafgurante Napoleone oppure un paesaggio della Napoli di inizio 800 o, ancora, lattacco della Terza Sinfonia di Beethoven che era stata inizialmente dedicata al Bonaparte.

1.4.2 Come funziona il Web

Come abbiamo visto gli ipertesti e la multimedialit (e quindi gli ipermedia) sono componenti essenziali del Web che, non a caso, viene anche denito iperspazio. In essi lelemento fondamentale liperlink attraverso il quale si pu passare ad unaltra sezione dello stesso documento, ad un altro documento che pu trovarsi sul nostro computer, sul servente a cui siamo collegati o addirittura su un altro servente situato in qualunque parte del mondo purch collegato ad Internet. Se il sistema ipertestuale ben fatto il documento a cui ci si collega contiene un link a quello di provenienza cos che sia sempre possibile ritornare sui propri passi. Siccome questo non sempre avviene, i browser sono in grado di tenere traccia del percorso e permettono in qualsiasi momento di muoversi a ritroso (tasto [ Indietro ]). Lelemento cardine per il funzionamento del Web il protocollo HTTP che basato sul modello cliente/ servente e si appoggia sul TCP/IP. Si tratta di un protocollo per lo scambio di documenti ipertestuali molto semplice che regola linterazione tra il nostro navigatore e il servente con cui questultimo di volta in volta si connette a seguito di una nostra richiesta diretta oppure seguendo un collegamento ipertestuale. Il dialogo tra queste due entit si svolge in quattro fasi: connessione; richiesta documento;

12 risposta; disconnessione.

La rete Internet

Le prime tre fasi sono di solito segnalate nella nestra del browser con scritte che ci spiegano cosa sta succedendo. Nella richiesta il programma di navigazione deve specicare al servente quale protocollo deve essere utilizzato (HTTP oppure FTP o altro ancora) in quanto lo stesso browser pu essere utilizzato per collegarsi anche con serventi che non fanno parte del Web e che offrono servizi Internet pi tradizionali, come appunto lo scaricamento di le attraverso il protocollo FTP. Dopo che la pagina giunta sulla nostra macchina la connessione col servente sinterrompe e viene ripresa quando si chiede di passare a una seconda pagina sul medesimo o su un altro servente. Questo talvolta vale anche per il percorso a ritroso, dove si chiede di visualizzare una seconda volta una pagina che avevamo gi visto. Leventuale presenza di graca rende il procedimento abbastanza lento poich i le corrispondenti agli elementi graci (spesso molto voluminosi in termini di occupazione di memoria) devono essere scaricati autonomamente rispetto alla pagina in cui sono contenuti. Una soluzione pratica per eliminare questo inconveniente consiste nel creare una cache o memoria di transito sul disco della nostra macchina oppure sul servente che fa da proxy, cio da porta di accesso verso Internet, nella nostra rete privata. Cos, ogni volta che chiediamo una pagina gi vista, questa viene caricata dal disco locale oppure dal disco del servente locale anzich essere ritrasferita da Internet. Un sistema per non dover scaricare continuamente la stessa pagina consiste nel salvarla sulla propria macchina come le autonomo e nel richiamarla dallinterno del browser come si richiamerebbe un qualsiasi documento dallinterno di un word processor (tra laltro, alcuni programmi di elaborazione dei testi permettono di visualizzare e modicare queste pagine scaricate in locale senza dover ricorrere a programmi di navigazione specializzati). Maggiori dettagli sul funzionamento del protocollo HTTP vengono forniti nellambito del capitolo riguardante il Web dinamico (paragrafo 6.5).

1.5 Gli indirizzi delle risorse in Internet

Abbiamo visto come, con il protocollo HTTP, si possa accedere alle informazioni presenti in Internet; questo per possibile solo se si conosce lindirizzo della risorsa (pagina Web o altro) a cui si vuole fare riferimento e cio il suo URL o URI. Ogni URL della rete identica una certa risorsa e non possono esistere due risorse diverse con stesso indirizzo. Spesso si dice anche che un URL identica un sito Internet dove con il termine sito si intende la sezione del disco di un particolare computer nella quale risiedono dei documenti Web; il signicato viene per solitamente esteso no a comprendere anche la macchina nel suo complesso e lorganizzazione che la usa per pubblicare le proprie informazioni in Internet. Un URL una stringa che inizia con il nome del protocollo da utilizzare per reperire la risorsa (esempio http://). Per illustrare correttamente la sua struttura occorre per fare prima riferimento al modo in cui i computer sono identicati in Internet (o in qualsiasi rete basata su protocollo TCP/IP): ogni computer individuato univocamente da un indirizzo IP o IP-address che nella versione

La rete Internet

13

IP V 4 (Internet Protocol version 4) composto da quattro ottetti di bit (cio da quattro gruppi di 8 cifre binarie). Ad esempio il servente Web del Ministero della Pubblica Istruzione su un computer che ha indirizzo 11000001.11001110.00001111.11001001. Come si vede lIP-address espresso con quattro numeri binari (separati da un punto); ci si giustica in quanto sappiamo benissimo che il linguaggio dei computer il sistema binario costituito dai soli simboli 0 e 1. Per comodit per gli indirizzi IP vengono sempre indicati tradotti in decimale e cos il precedente diventa 193.206.15.201. Gli indirizzi IP sono suddivisi in classi e ne esistono alcuni che sono riservati per usi speciali (ad esempio quelli che iniziano con 10 oppure da 172.16 a 172.31, o con 192.168 e che sono usati per le reti private). Largomento dellindirizzamento IP richiederebbe comunque una trattazione ben pi ampia di questi brevi cenni ma questo va al di l degli scopi di queste dispense. Per maggiore completezza si deve aggiungere che, per usufruire di un certo servizio in Internet, lindirizzo della macchina che lo fornisce solo una parte dellinformazione che il cliente deve conoscere; infatti necessario indicare anche la porta, cio un numero intero compreso tra 0 e 65.535 che identica il programma attivo sul servente e adibito a fornire quel servizio. Il dialogo in rete tra cliente e servente avviene infatti grazie alla creazione di una coppia di socket, uno per ognuna dei due nodi di rete coinvolti, costituiti dallindirizzo IP e dalla porta da essi utilizzati. La sintassi con cui si indicano i socket : IP:Porta, ad esempio 193.206.15.201:80. Nellambito del TCP/IP esistono una serie di porte dette porte ben note (quelle comprese tra 0 e 1.023) che sono associate ai servizi di rete pi diffusi e importanti; ad esempio: porta 20 e 21 per FTP, 22 per SSH, 23 per TELNET, 25 per SMTP, 80 per HTTP, 110 per POP3.

Si noti che la conoscenza della porta utilizzata da un certo servizio importante solo relativamente al servente in quanto solitamente il socket del cliente viene creato (dal programma cliente) prendendo il proprio indirizzo IP e un numero di porta scelto G6(port(us-27.49-portsETB)-246(i.970Td970elatsETB

14

La rete Internet

www.icann.org), la quale a sua volta delega ad enti nazionali la gestione degli indirizzi di rete nei vari paesi. In Italia tale gestione stata curata no al 1998 dal GARR (Gruppo Armonizzazione delle Reti di Ricerca) e adesso dalla RA (Registration Authority) italiana, che fa capo al CNR (Consiglio Nazionale delle Ricerche), in base alle indicazioni fornite dalla Naming Authority italiana (che opera in stretto rapporto con il Ministero delle poste e delle telecomunicazioni). Maggiori dettagli sullassegnazione degli indirizzi IP si possono trovare allindirizzo http://www.nic.it . Un difetto del complesso, ma efciente, metodo di indirizzamento degli host di Internet che gli indirizzi sono limitati e con gli attuali ritmi di crescita della rete si corre seriamente il rischio di esaurire entro poco tempo tutti gli indirizzi disponibili. Per questa ragione stata sviluppata recentemente una versione evoluta del protocollo IP, denominata IP Next Generation o IP V 6 (Internet Protocol version 6), basata su un sistema di indirizzamento a 128 bit che assicurer un massiccio incremento nella disponibilit di indirizzi di rete. Lindirizzo numerico comunque non utilizzabile comodamente e non facile da ricordare; molto meglio poter individuare i vari computer con un nome. Questo possibile grazie allintroduzione nella rete del DNS (Domain Name Service). Il DNS il meccanismo con cui si riesce a indirizzare le risorse su Internet utilizzando una notazione mnemonica, allettante anche dal punto di vista commerciale, garantendo al tempo stesso una individuazione univoca della risorsa sulla rete. Attraverso il DNS ogni host di Internet pu essere dotato di un nome composto da stringhe di caratteri. Tali stringhe, a differenza che nellindirizzo numerico, possono essere di lunghezza illimitata. Lindirizzo del servente del Ministero della Pubblica Istruzione diviene www.istruzione.it che senzaltro pi comodo da utilizzare e da ricordare. quindi

Come si pu vedere, anche i nomi mnemonici sono sequenze di simboli separati da punti e questo rispecchia la struttura gerarchica del DNS. Esso infatti suddivide lintera rete in settori, denominati domini, a loro volta divisi in sottodomini, e cos via per vari livelli; ogni sottodominio fa parte del dominio gerarchicamente superiore: allultimo livello della gerarchia ci sono i singoli computer. Lidenticativo di un host riassume le varie gerarchie di domini a cui appartiene; illustriamo il concetto servendoci di un altro esempio di nome mnemonico: www.progaut.itis.biella.it; in realt il nome del computer solo www, il resto della stringa serve ad indicare chi ha la responsabilit di tale computer e del suo nome. Scorrendo la stringa da destra a sinistra troviamo it che il dominio di primo livello e sta ad indicare che il computer si trova in una gerarchia facente capo ad una autorit nazionale italiana (it per Italy). Successivamente abbiamo biella che un sottodominio di primo livello e indica che lautorit facente capo alla citt di Biella ha ricevuto il permesso da quella immediatamente superiore (in questo da quella del dominio it) di poter a sua volta concedere sottodomini ad altre autorit sottostanti o nomi ai propri computer. Continuando troviamo itis che un sottodominio di secondo livello che viene gestito da una autorit per questo delegata da quella di livello superiore (in questo caso biella). Ancora pi a sinistra troviamo prog-aut che un sottodominio di terzo livello gestito da una autorit gerarchicamente sottostante a quella che gestisce il sottodominio itis.

La rete Internet

15

Questa autorit ha deciso di chiamare www il computer che contiene la pagina iniziale (e presumibilmente anche le altre pagine) del sito in questione. Naturalmente non tutti gli identicativi sono cos articolati; ad esempio in www.linux.it, abbiamo solo il sottodominio di primo livello linux, e lautorit che lo gestisce ha deciso di chiamare www il computer che ospita la home page del sito. Il numero e le sigle dei domini di primo livello, o domini principali, sono ssati a livello internazionale e vengono gestiti da appositi organismi. Nellambito di ognuno di tali domini possono essere creati un numero qualsiasi di sottodomini rispettando per le regole stabilite da ogni autorit nazionale di gestione del DNS. Quando il DNS stato sviluppato, Internet era diffusa, salvo rare eccezioni, solo negli Stati Uniti e la rete venne suddivisa in sei domini principali o G T LD (general Top level domain), tuttora esistenti, le cui sigle caratterizzano il tipo di ente o organizzazione che possiede un certo sito: com per le organizzazioni commerciali; edu per gli enti di ricerca e universit; gov per gli enti governativi; int per le organizzazioni sorte a seguito di trattati internazionali; mil per gli enti militari; net per gli enti di gestione della rete; org per gli enti diversi (volontariato, associazioni senza ni di lucro). Quando la rete ha cominciato a diffondersi a livello internazionale sono stati creati altri domini, chiamati regionali o CC T LD (country code Tld), uno per ogni nazione, ad esempio: it per lItalia uk per lInghilterra fr per la Francia de per la Germania Talvolta anche negli Stati Uniti si usano sufssi geograci. A partire dal 2000 lICANN ha aumentato il numero dei gTld introducendo anche: aero aeronautica; biz affari; coop cooperative; info informazione; jobs risorse umane; museum musei; name pagine personali; pro professionisti;

16 travel societ di viaggi. Vediamo altri esempi di URL completi: http://www.tin.it lindirizzo del sito della Telecom Italia Net; http://www.deejay.it lindirizzo del sito di Radio Deejay; http://www.cambridge.edu lindirizzo del sito delluniversit di Cambridge negli USA; http://www.fbi.gov lindirizzo del sito dellFBI; http://www.ci.berkeley.ca.us lindirizzo della rete civica della citt di Berkeley in California.

La rete Internet

Dal punto di vista tecnico il DNS costituito da un sistema di archivi distribuiti nella rete e collegati tra loro chiamati name server. Essi svolgono la funzione di tradurre i nomi in indirizzi numerici (tecnicamente si parla di risoluzione dei nomi) per conto degli host o di altri name server. Infatti la comunicazione effettiva tra i computer della rete avviene sempre e solo attraverso gli indirizzi IP numerici. Quando un computer deve collegarsi ad un altro, con nome ad esempio www.linux.it, esso interroga il proprio name server locale per risolvere il nome in questione ( per questo che quando ci abboniamo con un fornitore di servizio, o provider per navigare in Internet, fra i parametri che ci vengono forniti per impostare il browser c anche lindirizzo IP di un servente DNS). Nel caso il name server non sia in grado di risolvere il nome richiesto, chiede aiuto ad un altro servente, detto name server di primo livello la cui scelta determinata dal dominio principale dellindirizzo in questione. Questo servente, a sua volta, pu non essere in grado di rispondere e ricorre quindi ad altri name server (di livello inferiore). Il procedimento continua no al reperimento dellindirizzo del computer cercato, se esiste. Nello svolgere questo compito il name server memorizza gli indirizzi che ha conosciuto in modo da rispondere pi velocemente a successive richieste. Grazie a questo meccanismo il DNS sempre aggiornato in modo automatico e non necessaria alcuna autorit centrale che memorizzi nomi ed indirizzi dei milioni di computer collegati ad Internet. Come avviene per gli indirizzi IP, la gestione del DNS in un dominio di primo livello viene afdata a degli enti specici. Questi enti hanno il compito di assegnare i nomi di sottodominio, controllando che non ci siano omonimie, e di gestire larchivio principale del dominio di cui sono responsabili. In Italia lente che si occupa dellassegnazione dei nomi di dominio e della gestione dei registri e del name server primario per il ccTld it ancora la Registration authority sotto il controllo della Naming Authority che ne stabilisce procedure operative e regolamento. Negli Stati Uniti la gestione dei nomi afdata a delle compagnie private sotto il controllo della gi citata ICANN.

La rete Internet

17

I servizi forniti dalla RA sono rivolti ai provider, cio a quelle organizzazioni che registrano domini per conto terzi (ad esempio http://www.register.it o http://www.cyb.it) e ai mantainer, cio a quelle persone o organizzazioni che gestiscono autonomamente il proprio sito senza rivolgersi ad un provider esterno. Per concludere notiamo che, quando navighiamo, possiamo tralasciare la scrittura del protocollo prima dellURL (oltre che, come notato in precedenza, quella della porta dopo di esso) in quanto viene assegnato automaticamente dal programma come http://; inoltre nessuno vieta luso di indirizzi numerici per fare riferimento ad un certo sito anche se molto pi difcile ricordarli; ad esempio per collegarsi al sito di Radio Deejay si potrebbe anche digitare lURL: http:// 213.92.17.218.

1.5.1 URL completi di percorso e nome di le

Gli esempi visti sinora si riferiscono sempre allindirizzo della home page dei siti considerati; se si vuole visualizzare una pagina particolare, contenuta in una certa directory del servente, dovremo aggiungere allURL il percorso completo delle directory ed il nome del le che contiene la pagina desiderata. Ad esempio: http://www.linux.it/GNU/articoli/index.shtml fa riferimento alla pagina contenuta nel le index.shtml nella directory /GNU/articoli/ del sito www.linux.it. Si noti come nellindicazione del percorso si usa il simbolo / per indicare le sottodirectory, anzich il simbolo \ come si fa, ad esempio, in ambiente Windows. Limportante comunque conoscere lURL della pagina iniziale di un sito in quanto da essa, seguendo i vari collegamenti, sar possibile rintracciare le altre pagine che fanno parte del sito stesso. A questo proposito importante notare che non quasi mai necessario conoscere il nome esatto di tale pagina in quanto quasi sempre index.html, o default.html, o simile e i serventi Web sono predisposti per cercare automaticamente pagine con questi nomi. Ad esempio se digitiamo lindirizzo www.linuxdidattica.org oppure www.linuxdidattica.org/index.html otteniamo in risposta lo stesso documento.

1.5.2 URL con altri protocolli

Gli URL permettono di individuare risorse Internet generiche e non solo siti Web come negli esempi visti sinora; infatti possibile inserire altri protocolli al posto di http:// come ad esempio ftp://. Questo il protocollo usato per il trasferimento di le da un computer ad un altro. Di solito i siti FTP si trovano su macchine che si chiamano ftp (e non www) e allora i loro URL saranno simili a ftp://ftp.unipd.it che il sito ftp dellUniversit di Padova. Altri protocolli come gopher://, mailto:, news: sono molto meno usati. Importante invece la stringa file:// (usata al posto del protocollo anche se non un protocollo). Con essa si fa riferimento a dei le contenuti sul computer locale, cio quello che stiamo usando per navigare in Internet. Ad esempio lURL file://esempi/indice.htm fa riferimento alla pagina contenuta nel le indice.htm, che nella directory esempi del nostro computer.

18

La rete Internet

1.6 Collegarsi ad Internet da casa

Per collegarsi a Internet sono necessari (oltre naturalmente ad un computer) un modem o adattatore ed un abbonamento ad un ISP (Internet Service Provider ). Un ISP una azienda che fornisce a pagamento o, per i collegamenti pi lenti, anche gratis, la possibilit di collegarsi alla rete, di avere una o pi caselle di posta elettronica e, talvolta, anche un po di spazio sul proprio servente per pubblicare pagine in Internet. In Italia possiamo citare tra i provider pi noti TIN (Telecom Italia Net ), Libero, Tiscali. Si deve inoltre avere il protocollo TCP/IP sul proprio computer ed anche il protocollo PPP (Point to Point Protocol). Questo non un problema visto che questi protocolli sono forniti a corredo di tutti i sistemi operativi pi diffusi per personal computer. Il protocollo PPP consente di usare i protocolli Internet (IP), normalmente utilizzati su connessioni Ethernet, cio in reti locali, su linee seriali e quindi per i collegamenti via modem attraverso la porta seriale RS-232 o la porta USB del personal computer. Il MODEM (MODulatore DEModulatore), una periferica che permette il collegamento tra computer sicamente distanti usando le normali linee telefoniche in quanto trasforma (in un modo che qui non approfondiamo) i segnali digitali (bit), propri degli elaboratori, in segnali analogici adatti a essere trasportati su tali linee (originariamente progettate per la comunicazione vocale). Se due computer distanti (chiamiamoli C1 e C2) si devono scambiare informazioni saranno necessari due modem (rispettivamente M1 e M2), uno per ogni elaboratore, collegati alla linea telefonica; se il computer C1 invia un messaggio questo sar convertito (modulato) in analogico da M1 e instradato sulla linea; allarrivo presso C2 il messaggio viene riconvertito (demodulato) in digitale da M2. Se C2 a inviare un messaggio i ruoli dei dispositivi sono naturalmente invertiti. I modem si classicano secondo la loro velocit, misurata in base ai bit al secondo (bps) che riescono ad inviare o ricevere; gli apparecchi di ultima generazione arrivano a 55.600 bps ed i loro prezzi sono ormai molto bassi (poche decine di euro). Da qualche tempo possibile collegarsi al provider anche con lADSL (Asymmetric Digital Subscriber Line), che sfrutta, nelle zone raggiunte dal servizio, le normali linee telefoniche. In tal caso si possono raggiungere velocit tra i 2 Mbps e i 20 Mbps (teorici) in download (trasferimento dei dati dal provider al nostro computer) e tra i 128 Kbps e i 512 Kbps (sempre teorici) in upload (trasferimento inverso); ovviamente gli abbonamenti ADSL sono tutti a pagamento. Anche per lADSL necessario un dispositivo aggiuntivo che pu essere un modem ADSL USB oppure un routerADSL a cui ci si collega con un cavo di rete; la seconda alternativa migliore perch spesso il router ADSL ha anche funzioni di switch (con almeno quattro porte) e talvolta pure di Access Point WiFi, a costi sempre abbastanza contenuti. Nel caso del modem ADSL, usare il termine modem comunque scorretto in quanto si tratta solo di un adattatore; infatti non necessaria alcuna modulazione o demodulazione data la natura digitale dei segnali ADSL.

Parte ii

Il Web statico

19

20

21

Capitolo

Il linguaggio HTML
I documenti presenti nel Web hanno un formato particolare che comprende dei codici speciali grazie ai quali un browser in grado di visualizzare in modo appropriato tali documenti. Il linguaggio utilizzato lHTML (HyperText Markup Language - linguaggio per la codica degli ipertesti attraverso marcatori) che costituisce una versione semplicata dellSGML (Standard Generalized Markup Language - linguaggio di codica standard e generalizzato). LSGML stato sviluppato dallorganizzazione internazionale per gli standard nel 1986 per denire linguaggi markup progettati per vari scopi. Ogni linguaggio della famiglia SGML deve rispettare certi requisiti fra i quali quello che tutti i simboli siano deniti e descritti usando un DTD (Document Type Denition); il DTD per lHTML denisce i marcatori disponibili e il modo di usarli. LHTML non un linguaggio di programmazione e un documento scritto in HTML non assolutamente un programma cio una serie di istruzioni che lelaboratore deve eseguire su dei dati; piuttosto il documento HTML esso stesso un dato ed il linguaggio denisce le regole per linserimento di particolari tag (o marcatori) che indicano ai programmi di navigazione quale struttura avr la pagina da visualizzare. La funzione principale dellHTML quella di classicare le varie parti che compongono un documento: si pu indicare quale parte rappresenta il titolo, in quali posizioni inserire delle immagini, quali parti enfatizzare e cos via. Sono presenti anche alcuni comandi per la formattazione e la denizione del layout e questo ha portato ad una contaminazione del linguaggio alla quale si cercato di porre rimedio proponendo luso dei fogli di stile o CSS (Cascading Style Sheet). Di questo si occupa pi diffusamente il capitolo 4 riguardante i CSS. Un aspetto importantissimo dellHTML che indipendente da qualsiasi piattaforma hardware e software: in altre parole una volta scritto un documento con gli elementi standard di HTML, si pu essere sicuri che la pagina verr visualizzata nello stesso modo con qualsiasi browser su qualsiasi computer. Inoltre il suo utilizzo libero, non ci sono licenze n aggiornamenti da comprare e non si dipende da nessuna azienda produttrice di software.

2.1 Storia dellHTML

LHTML si sta evolvendo rapidamente e ne sono state gi rilasciate varie versioni. E stato ideato nel 1989 insieme al Web da Tim Berners Lee. Attualmente la denizione degli standard dellHTML (oltre che di quelli dellHTTP e di altre tecnologie Web) sotto la responsabilit del consorzio W3C. La prima versione dellHTML si chiamava HTML (senza numero di versione) e non ha avuto una grande diffusione perch quando apparsa esistevano pochissimi serventi Web; comunque servita da base per le successive versioni che hanno sempre conservato la compatibilit allindietro (i documenti scritti con la prima versione possono essere tranquillamente usati con le versioni pi recenti). Nel 1993 Dave Ragget ha sviluppato una versione aggiornata di HTML, chiamata HTML+ che non mai diventato uno standard ufciale ma le cui innovazioni sono state incorporate nella versione 2.0. Alla ne del 1994 stato approvato lo standard HTML 2.0, pi afdabile e un po pi semplice delle versioni precedenti; esso ha conosciuto una grande diffusione anche se stato criticato dagli

22

Il linguaggio HTML

sviluppatori di siti Web perch permetteva lutilizzo di un numero troppo esiguo di comandi di formattazione del documento. Per questo motivo, e anche per la lentezza con la quale il W3C approvava i nuovi standard, le societ produttrici di programmi di navigazione (principalmente Netscape e Microsoft) hanno iniziato a supportare tag non standard e non approvati dal W3C, conosciuti come estensioni per lHTML. Naturalmente ogni browser gestiva le proprie estensioni e i programmi rimasti fedeli agli standard non erano in grado di interpretare i nuovi tag. Nel 1995 stato redatto lo standard HTML 3.0 che per prevedeva troppi cambiamenti rispetto alla versione precedente e quindi non stato preso in considerazione dagli sviluppatori. Migliore fortuna ha avuto la versione HTML 3.2 del 1996 che era maggiormente compatibile con la versione 2.0 e comprendeva anche le estensioni usate dai browser pi diffusi (Netscape Navigator e Internet Explorer). La versione pi recente di HTML la 4.0 del 1997 (revisionata con la 4.01) che rispetto alla precedente incorpora alcune funzioni che no a quel momento erano estensioni, gestisce un insieme di caratteri (Unicode) pi esteso del precedente (Latin-1) ed anche un nuovo marcatore per gli oggetti multimediali. Occorre comunque osservare che la versione di HTML supportata sicuramente anche dai browser meno moderni e di minore diffusione la 3.2.

2.2 Contenuto di un le HTML

Le pagine scritte in HTML sono costituite da puro testo, non contengono informazioni speciche di una certa piattaforma o di un certo programma e possono essere scritte o modicate con qualsiasi editor di testo (ad esempio Edit di MS-Dos, Blocco note di MS-Windows, o vi di GNU/Linux). Tali pagine sono chiamate anche sorgenti HTML e contengono al loro interno due tipi di oggetti: il testo del documento; i marcatori HTML. Un marcatore (o tag, o elemento) HTML una stringa di simboli con un signicato speciale: inizia con il simbolo di minore <, continua con una parola riservata e termina con il segno di maggiore >. I seguenti sono esempi di tag: <html>, </B>, <BODY>, <P>. Nei tag non si ha distinzione tra lettere maiuscole e minuscole, quindi <BODY>, <body>, <Body> rappresentano lo stesso elemento. In questo testo gli elementi del linguaggio HTML sono quasi sempre indicati in minuscolo in quanto questo diviene obbligatorio in XHTML che levoluzione dellHTML e del quale si occupa brevemente il capitolo 9. Esistono due tipi di tag: quelli di inizio con i quali si attivano certe opzioni o funzioni, e quelli di ne con i quali si disattivano le stesse opzioni e funzioni.

Il linguaggio HTML

23

Il testo inserito tra il tag di inizio e quello di ne viene visualizzato dai programmi di navigazione in modo appropriato secondo le speciche dei marcatori utilizzati. I marcatori di ne si scrivono nello stesso modo di quelli di inizio eccetto per il fatto che dopo il simbolo di minore (<) si ha sempre il simbolo della barra /; se ad esempio scriviamo nel documento HTML:
|<b>Questo testo sar in grassetto</b>

il testo compreso tra i due tag, (cio il contenuto di quellelemento) sar visualizzato in grassetto (b sta per bold). Esistono anche degli elementi per cui la stringa di ne non obbligatoria, come <p>, che indica linizio dellelemento paragrafo ed il cui contenuto il testo del paragrafo stesso. Ci sono poi dei tag senza neanche il contenuto come <hr>, che serve ad inserire nel documento una righello orizzontale. Alcuni marcatori prevedono degli attributi, (indicati esclusivamente al momento dellapertura del tag prima del simbolo >) che specicano determinate propriet dei marcatori e possono avere un valore. La sintassi da utilizzare prevede che ogni attributo sia separato dal precedente o dalla stringa di apertura del tag da uno spazio; leventuale valore deve essere preceduto dal simbolo = e racchiuso tra virgolette ("). La cosa pi importante da capire riguardo ai tag che essi non vengono mai visualizzati dal browser, piuttosto viene visualizzato il loro effetto sul testo della pagina Web. Questo avviene grazie alloperazione di rendering effettuata da un apposito motore incorporato in ogni browser. I motori di rendering pi importanti sono: Gecko, per Firefox, Galeon, Epiphany e altri; KHTML, per Konqueror; Presto, per Opera; Trident, per Internet Explorer; Webkit, per Chrome e Safari. I migliori sono: Presto e Gecko riguardo alla velocit, KHTML riguardo alladerenza agli standard. Se qualche tag scritto male, contiene errori di sintassi o non riconosciuto per qualsiasi altro motivo, viene semplicemente ignorato dal browser che non da nessuna segnalazione di errore al riguardo. Molte volte inoltre il programma di navigazione riesce a interpretare correttamente e quindi a presentare in modo accettabile anche pagine Web contenenti errori e imperfezioni nelluso dei marcatori. Questo non signica che si possa prestare poca attenzione nella realizzazione di pagine Web con la scusa che poi i browser digeriscono tutto, anche in vista delluso del molto meno permissivo XHTML.

24

Il linguaggio HTML

2.3 Strumenti per la creazione di documenti HTML

Per scrivere un documento in linguaggio HTML, come detto, si pu usare un comunissimo e semplicissimo editor di testo; esistono per anche altri strumenti pi sosticati che si suddividono fondamentalmente in due categorie: editor dedicati cio studiati appositamente per la scrittura di codice HTML ma sempre a formattazione differita (il risultato della formattazione del documento visibile solo successivamente usando un programma di navigazione); editor a formattazione immediata (il risultato nale della formattazione del documento visibile immediatamente) che creano automaticamente il codice HTML. Nel primo caso si tratta di editor con delle funzioni aggiuntive per la scrittura degli elementi HTML, per il controllo ortograco, per lordinamento del testo ed altre ancora. Nel secondo caso si tratta di strumenti come Macromedia Dreamweaver, Microsoft Frontpage o come il programma libero Kompozer, che permettono di comporre la pagina partendo dal suo aspetto e generano automaticamente il sorgente non richiedendo quindi alcuna conoscenza del linguaggio HTML. Questi programmi sono detti anche editor WYSIWYG (What You See Is What You Get, ci che vedi ci che ottieni) ed il loro uso pu apparire conveniente no a far ritenere superuo un corso di HTML. I sostenitori delluso di tali strumenti affermano tra laltro che con essi i creatori di pagine Web sono sollevati dalla necessit di imparare comandi molto complicati e che la produttivit e la qualit del lavoro sono migliori. Esistono per motivi molto importanti che invece ne sconsigliano lutilizzo: il linguaggio HTML molto semplice e non dovrebbero essere necessari molti aiuti per usarlo correttamente; se si conosce il linguaggio si hanno maggiori possibilit di correggere errori e risolvere problemi sfruttando a pieno le sue potenzialit e si pu intervenire sui propri documenti da qualsiasi computer e con qualunque editor; il codice HTML creato automaticamente solitamente di cattiva qualit, non efciente, male organizzato e pu contenere elementi incompatibili con gli standard ufciali del linguaggio. Quindi utile conoscere lHTML e per la creazione di documenti non consigliabile luso di programmi troppo sosticati; al massimo si consiglia luso di editor dedicati.

2.4 Uso dei validatori

Per essere sicuri di avere realizzato un documento HTML aderente agli standard si pu ricorrere ai validatori che sono programmi che ispezionano un sorgente HTML individuando gli errori nelluso dei tag oppure luso di elementi considerati deprecati o proposti da qualche azienda ma non riconosciuti ufcialmente dal W3C come facenti parte dellHTML standard. Molti di questi strumenti sono disponibili direttamente in rete; un esempio il validatore del consorzio W3C allindirizzo http://validator.w3.org al quale si possono sottoporre documenti gi presenti in rete, fornendo il relativo indirizzo, oppure le da caricare al momento per la validazione.

Il linguaggio HTML

25

2.5 Struttura di un documento HTML

La struttura generale di un documento HTML viene denita con i seguenti elementi fondamentali: html head title body Questi elementi anche se mancanti vengono considerati presenti da quasi tutti i programmi di navigazione; comunque buona norma includere tutti e quattro questi elementi in qualsiasi documento HTML. Allinizio del sorgente HTML si deve inoltre inserire una riga che specichi quale la versione di HTML utilizzata. Per fare questo si usa la dichiarazione <!DOCTYPE> che non un tag HTML ma una entit SGML. Molti browser gestiscono anche documenti Web mancanti di tale elemento; comunque opportuno inserirlo per evitare incompatibilit e per poter usare senza problemi gli strumenti di validazione del sorgente HTML. Per la versione HTML 4.01 la linea da scrivere una delle seguenti:
|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | "http://www.w3.org/TR/html4/strict.dtd">

|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | "http://www.w3.org/TR/html4/loose.dtd">

|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" | "http://www.w3.org/TR/html4/frameset.dtd">

Nel primo caso si intende utilizzare la variante strict dellHTML, cio una versione in cui non ammesso lutilizzo di una serie di elementi considerati deprecati come i riquadri (frame) o i tag <center> e <b>. Nel secondo caso invece si intende usare la variante Transitional in modo da poter inserire anche i marcatori deprecati. Nel terzo caso inne si intende usare la variante Frameset in modo da avere a disposizione i marcatori deprecati e poter utilizzare anche i riquadri. La suddivisione in varianti stata proposta dal W3C con la versione 4.01 dellHTML (e 1.0 dellXHTML), nel gennaio del 2000, per i seguenti scopi: imporre regole pi rigide nelluso del linguaggio grazie alla variante strict eliminando tutta una serie di marcatori non riguardanti la struttura del documento ma il suo aspetto; incoraggiare luso dei CSS per la denizione del layout delle pagine;

26 favorire la transizione dallHTML allXHTML;

Il linguaggio HTML

permettere comunque un passaggio morbido alla nuova versione senza provocare un riuto da parte degli sviluppatori Web grazie alle pi permissive varianti Transitional e Frameset. Un elenco dei tag deprecati si pu trovare allindirizzo http://www.w3.org/TR/REC-html40/appendix/ . Il presente documento fa riferimento alla variante Frameset dellHTML che tuttora la pi utilizzata per la creazione di pagine Web.

changes.html#h-A.3.1.2

2.5.1 Lelemento html

Lo scopo di questo elemento quello di indicare che il le che si sta scrivendo realizzato in linguaggio HTML. Tutto il testo, comprensivo degli altri tag, dovr essere racchiuso tra i suoi tag di inizio e ne:
|<html> |.... |.... contenuto del documento |.... |</html>

Un documento HTML deve sempre contenere due sezioni o parti: la sezione intestazione (head) che contiene elementi che non inuenzano la visualizzazione da parte dei programmi di navigazione ma specicano propriet comunque importanti del documento; la sezione corpo (body) in cui presente il contenuto da visualizzare.

2.5.2 Lelemento head

La sezione intestazione inizia con il tag <head> e termina con </head> e contiene almeno il titolo del documento racchiuso tra i tag <title> e </title>; pu contenere altre informazioni come i dati sullautore e sul programma che ha generato il documento, o anche degli script cio insiemi di comandi scritti in un qualche linguaggio di programmazione e che possono svolgere varie attivit interagendo con il browser. Il titolo deve essere una descrizione del documento breve, perch viene visualizzato dai programmi di navigazione nella barra del titolo della nestra, e signicativa, perch viene utilizzato dai programmi che catalogano i documenti di Internet per creare indici di ricerca.

Il linguaggio HTML

27

2.5.3 Lelemento body

La sezione corpo racchiusa tra i tag <body> e </body> e contiene la parte del documento che viene visualizzata dai browser quando si apre la pagina. Il seguente un semplicissimo esempio che riassume la struttura generale di una pagina Web con luso dei tag sinora illustrati:
|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" | "http://www.w3.org/TR/html4/frameset.dtd"> |<html> |<head> |<title>Istituto Max Planck Esempio in HTML</title> |</head> |<body> |Testo che viene visualizzato |</body> |</html>

In gura 2.7 si vede laspetto di questa pagina una volta aperta con un browser.
Figura 2.7. |

2.5.4 Elementi di blocco e elementi di testo

I marcatori che possono essere presenti nel corpo di un documento si possono suddividere in due tipologie: elementi di testo o in linea (inline); elementi di blocco (block-level). I primi si usano per inserire immagini, creare collegamenti, modicare laspetto del testo, i secondi per denire gruppi di testo con uno scopo specico, come intestazioni, sezioni, tabelle. La differenza principale tra i due tipi di elementi che quelli di blocco provocano interruzioni di paragrafo e quelli di testo invece no.

28

Il linguaggio HTML

2.5.5 Intestazioni

I titoli o intestazioni sono elementi di blocco disponibili in sei livelli diversi; al crescere del livello diminuisce il grado di evidenza del testo contenuto. Luso dei titoli non obbligatorio ma sicuramente utile per organizzare in modo razionale le pagine. Ogni intestazione inizia con <hn> e termina con </hn> dove n il numero corrispondente al livello desiderato; sono previsti i seguenti attributi: align="left"; align="right"; align="center"; align="justify". Il loro effetto quello di allineare le intestazioni rispettivamente a sinistra, destra, centro e ad entrambi i margini.

2.5.6 Paragra

In HTML linizio di un paragrafo indicato con il tag <p> mentre non obbligatorio il tag di ne </p>. In vista del passaggio a XHTML comunque consigliabile abituarsi a chiudere tutti i tag, anche quelli che non lo richiedono esplicitamente in HTML. Nel caso dei tag vuoti si pu anche utilizzare la forma abbreviata di chiusura che consiste nel posporre al tag di apertura la barra obliqua; ad esempio invece di scrivere:
|<hr></hr>

si pu scrivere:
|<hr/>

Si noti che la presenza di spazi o righe vuote nel sorgente HTML viene ignorata dai browser (gli spazi vengono compattati) e quindi lunico modo per separare correttamente i paragra , appunto, luso del tag <p>. A tale proposito consideriamo le seguenti porzioni di codice HTML:
|<h1>Semplice esempio</h1> |<p> Questo un semplice esempio con due righe di testo.</p> |<p>Questa la seconda riga.</p>

oppure:

Il linguaggio HTML
|<h1> |Semplice esempio |</h1> |<p> Questo un semplice esempio con due righe di testo.</p> | |<p>Questa la seconda riga.</p>

29

oppure:
|<h1>Semplice esempio |</h1> |<p> Questo un semplice |esempio con due righe di testo.</p> |<p>Questa la seconda riga.</p>

Questi tre esempi produrranno esattamente lo stesso effetto al momento della visualizzazione con il browser, quello mostrato in gura 2.13.
Figura 2.13. |

A proposito dei paragra si deve anche ricordare che non opportuno cercare di inserire righe vuote con una sequenza di <p> consecutivi perch molti programmi di navigazione in questo caso li riducono ad un solo <p> annullando lo sforzo compiuto dallautore del sorgente HTML. Allinterno dellelemento paragrafo si possono utilizzare gli attributi di allineamento visti per le intestazioni. Naturalmente il tag <p> un elemento di blocco.

30

Il linguaggio HTML

2.5.7 Lelemento span

Con il tag <span> si pu denire un contenitore generico di testo, cio un qualcosa di molto simile ad un paragrafo, tenendo per presente che in questo caso si tratta di un elemento in linea e non di blocco.

2.5.8 Righello orizzontale

Con il tag <hr> si inserisce nel documento una riga orizzontale, oltre a separare il testo in due paragra. Questo elemento di blocco e ha vari attributi, il pi interessante dei quali size che permette di impostare lo spessore della linea in pixel.

2.5.9 Centratura

Il tag <center>, che di blocco, viene usato per centrare tutto ci che contenuto tra tale elemento e la rispettiva chiusura </center>.

2.5.10 Interruzione di linea

Per interrompere una linea e andare a capo senza denire un nuovo paragrafo, si usa il tag <br>. Questo elemento di testo e si differenzia da <p> perch questultimo, oltre a terminare la linea, termina anche il paragrafo iniziandone uno nuovo. Il problema citato in precedenza, relativo allinserimento di pi righe vuote tra due porzioni di testo, pu essere risolto utilizzando una sequenza di tag <br> invece che tag <p>.

2.5.11 Grassetto, corsivo e sottolineato

Con gli elementi <b> e </b> si enfatizza il testo tra essi contenuto, con <i> e </i> si visualizza in corsivo, con <u> e </u> si sottolinea; questi sono tutti elementi di testo.

2.6 Nidicazione dei tag

In un documento HTML i tag sono sempre nidicati (cio inseriti uno nel contenuto di uno precedente); abbiamo infatti visto come lelemento <body> sia contenuto allinterno dellelemento <html>. Consideriamo ora la seguente porzione di codice HTML:
|<p> |<b>Esempio con tag <i>nidificati</i></b> |</p>

Il marcatore per il corsivo allinterno di quello per il grassetto che, a sua volta allinterno di quello per la separazione dei paragra; leffetto di quello di visualizzare il testo in grassetto e la parola nidicati anche in corsivo.

Il linguaggio HTML Riguardo alla nidicazione ci sono alcune regole da ricordare: gli elementi devono essere completamente nidicati e non chiusi nellordine sbagliato; gli elementi di testo possono essere nidicati in elementi di blocco o in altri di testo; gli elementi di blocco possono essere nidicati solo in altri elementi di blocco. Quindi i seguenti esempi risultano errati:
|<b><i> | Esempio di nidificazione errata a causa dei tag di chiusura |</b></i> | |<b>Esempio sbagliato con tag di <p>blocco</p> interno a uno di testo</b>

31

Alcuni programmi di navigazione riescono ugualmente ad interpretare sorgenti HTML contenenti errori simili a questi ma, come detto pi volte in precedenza, sempre bene rispettare le regole data la minore permissivit di strumenti pi moderni come lXHTML.

2.7 Insiemi di caratteri

Le prime versioni di HTML, no alla 3.2, utilizzano un insieme di caratteri chiamato Latin-1 o ISO 8859-1. LISO (International Organization for Standardization) ha il compito di denire gli standard in vari ambiti a livello mondiale; lacronimo dovrebbe essere IOS ma stato preferito ISO che in lingua greca indica uguaglianza. Questo insieme di caratteri comprende tutti i simboli stampabili del codice ASCII (American Standard Code for Information Interchange), cio quelli di valore decimale da 32 a 126, e altri caratteri numerati da 160 a 255 che includono simboli speciali e lettere straniere. Con lHTML 4.0 viene introdotto luso del set di caratteri Unicode o UCS (Universal Character Set) o ISO-10646 che comprende 38.885 caratteri, appartenenti alle lingue di tutto il Mondo, e che pu essere codicato in molti modi diversi (UCS-2 UTF-8 (Unicode Transformation Format 8) e altri ancora. Essendo questo standard ancora abbastanza nuovo pu capitare che un programma di navigazione non gestisca i caratteri UCS; inoltre non detto che il computer che utilizziamo contenga il font di caratteri in grado di visualizzare determinati simboli UCS.

2.7.1 Entit per caratteri speciali

Torniamo quindi allinsieme di caratteri Latin-1, e vediamo come si possono utilizzare i simboli speciali cio quelli che non hanno codice ASCII compreso tra 32 e 126 (in decimale). A tale scopo si ricorre alle entit per caratteri speciali che sono oggetti HTML scritti con una sintassi particolare: iniziano con il simbolo &, terminano con ; e prevedono lindicazione di un codice con un nome o in forma numerica. Ad esempio la lettera "" corrisponde allentit &agrave; oppure &#224;. Di seguito sono elencati alcuni dei caratteri speciali pi usati (almeno in Italia) con i rispettivi codici:

32
Carattere e Nome &agrave; &egrave; &eacute; &igrave; &ograve; &ugrave; &Egrave; &pound; &euro; Numero &#224; &#232; &#233; &#236; &#242; &#249; &#200; &#163; &#8364;

Il linguaggio HTML

2.7.2 Entit per caratteri riservati

In modo simile viene risolto anche il problema delluso di caratteri normali ma che per HTML hanno un signicato particolare, come i simboli di maggiore e minore, la & e altri. In questo caso si usano le entit per caratteri riservati da scrivere con le stesse regole di sintassi:
Carattere " < > & Nome &quot; &lt; &gt; &amp; Numero &#34; &#60; &#62; &#38;

2.7.3 Lo spazio unicatore

Tra i caratteri speciali ce n uno molto importante: lo spazio unicatore con il quale si inserisce uno spazio tra due parole facendo in modo per che esse rimangano sempre nella stessa riga. Per inserire tale elemento si usano le entit &nbsp; oppure &#160;. Con lo spazio unicatore si riesce anche a ottenere il rientro della prima riga di un paragrafo, cosa impossibile da realizzare con gli spazi normali o i tabulatori, visto che questi verrebbero compattati dal browser in fase di visualizzazione. Questo effetto (insieme a molti altri) si ottiene comunque in modo molto pi elegante, efcace e aderente agli standard, utilizzando gli strumenti messi a disposizione dai CSS. Questa osservazione deve essere ritenuta valida, e non viene quindi ripetuta, per tutti gli elementi o attributi che deniscono caratteristiche di formattazione e aspetto del testo (colori, allineamento, sfondi ecc.).

2.8 Altri elementi di uso frequente

Vediamo adesso una rapida carrellata di marcatori usati abbastanza frequentemente.

Il linguaggio HTML

33

2.8.1 Commenti

In un documento HTML si possono inserire commenti e annotazioni che non verranno visualizzate ma che possono essere utili per chi esamina il codice sorgente. I commenti devono essere racchiusi tra <!-- e -->.

2.8.2 Uso dei colori

In un documento HTML si possono gestire i colori dello sfondo e del testo e si pu denire unimmagine come sfondo usando alcuni attributi del tag body. Come prerequisito occorre per conoscere il sistema additivo dei colori che alla base della graca dello schermo: ogni colore viene ottenuto sommando una certa quantit di rosso, di verde e di blu che sono i colori fondamentali; sommando il massimo di ognuno dei tre colori si ottiene il bianco. Per stabilire la quantit dei colori fondamentali da usare si deve indicare un insieme di 3 coppie di cifre esadecimali precedute dal simbolo #: la prima relativa al rosso, la seconda al verde, la terza al blu. Ad esempio il valore "#000000" rappresenta il nero mentre "#00FF00" il verde e "#F0F0F0" un grigio chiaro. C anche la possibilit di indicare i colori con il loro nome (in inglese) che per deve essere conosciuto e che non disponibile per tutte le sfumature possibili (256*256*256 = 24061070). Gli attributi del tag body da usare sono bgcolor per il colore dello sfondo e text per il colore del testo; inoltre, anche se non riguarda i colori, importante lattributo background per usare unimmagine come sfondo del documento. Nel seguente esempio viene denito un documento con sfondo nero e testo bianco:
|<html> |<head> |<title>Esempio con i colori</title> |</head> |<body bgcolor="#000000" text="#FFFFFF"> |<b>Testo</b> |</body> |</html>

Se si vuole usare come sfondo limmagine contenuta nel le clouds.jpg presente nella stessa directory dove risiede il sorgente HTML, si scrive invece:
|<body background="clouds.jpg">

Se gli attributi di body non vengono specicati la visualizzazione del documento avviene secondo lo standard del programma di navigazione, di solito testo nero su sfondo bianco.

34

Il linguaggio HTML

2.8.3 Elemento font

Si tratta di un elemento di testo che consente di cambiare il colore, la dimensione ed il tipo dei caratteri utilizzando rispettivamente gli attributi color, size e face. Per i colori si usano i codici esadecimali visti in precedenza, per il tipo carattere si usa il suo nome, per la dimensione ci sono sette possibilit numerate da 1, la pi piccola, a 7, la pi grande. Si pu per anche indicare una dimensione relativa rispetto alla dimensione normale del testo; ecco alcuni esempi:
|<font size="5">Esempio con dimensione 5</font> |<font size="-1">Esempio con dimensione minore di uno di quella normale</font> |<font size="+1">Esempio con dimensione maggiore di uno di quella normale</font>

Gli ultimi due esempi equivalgono ai seguenti in cui si usano i tag small e big:
|<small>Esempio con dimensione minore di uno di quella normale</small> |<big>Esempio con dimensione maggiore di uno di quella normale</big>

Naturalmente i tre attributi possono essere combinati come nel seguente esempio:
|<font color="#00FF00" size="2" |face="Arial">Esempio con colore verde, grandezza 2 e tipo Arial</font>

Lelemento font pu essere utilizzato anche per modicare colore e dimensione delle intestazioni se viene nidicato allinterno dei tag <h1>, <h2> ecc.

2.8.4 Elemento address

Questo elemento di blocco viene usato per inserire informazioni che riguardano lautore del documento tra i tag <address> e </address>.

2.8.5 Elemento div

Lelemento di blocco div suddivide il documento in sezioni ed delimitato dai tag <div> e </div>. Ogni sezione pu essere denita con un particolare allineamento del testo grazie alluso degli stessi attributi visti per paragra e intestazioni; se ad esempio si vuole centrare una porzione di testo composta da molti paragra, invece di centrarli uno ad uno si pu ricorrere al tag div nel seguente modo:
|<div align="center"> |testo da centrare |</div>

Il linguaggio HTML

35

2.8.6 Elemento pre

Si tratta di un elemento di blocco che permette di visualizzare del testo nel modo in cui viene scritto nel le sorgente, senza che gli spazi siano compattati dal programma di navigazione; tutto il testo contenuto fra i tag <pre> e </pre> viene visualizzato cos come scritto usando un carattere monospaziato (generalmente il Courier).

2.8.7 Elementi subscript e superscript

Sono elementi di testo che servono a scrivere caratteri rispettivamente nelle posizioni di pedice e apice. I tag da usare sono <sub> e <sup> come mostrato nel seguente esempio:
|<html> |<head> |<title>Esempio con sup e sub</title> |</head> |<body> |Equazione di secondo grado: a*x² + b*x + c = 0 |<p/> |Formula chimica dellacqua: H₂O |</body> |</html>

che viene visualizzato come mostrato in gura 2.25.

Figura 2.25. |

36

Il linguaggio HTML

2.8.8 Elementi emphasis e strong

Sono elementi di testo che servono rispettivamente a enfatizzare e a enfatizzare molto, quanto viene racchiuso tra i rispettivi tag <em> e </em>, <strong> e </strong>. In qualche caso questi elementi hanno lo stesso effetto dei tag <i> e <b>.

2.9 Elenchi o liste

Gli elenchi o liste sono elementi di blocco molto usati e sono deniti in cinque tipologie: liste numerate e ordinate; liste puntate con richiamo graco; liste a glossario o di denizione; liste a menu; liste a directory. Gli ultimi due tipi sono usati molto raramente e sono anzi sconsigliati; esaminiamo quindi solo le altre tre tipologie di elenchi.

2.9.1 Liste numerate

I tag di inizio e ne di una lista numerata sono <ol> e </ol>; ciascuna voce dellelenco deve essere poi preceduta dal marcatore <li> e seguita (non obbligatoriamente) da </li>. C la possibilit di stabilire il tipo di numerazione desiderata con lattributo type del tag <ol>: type="1" per i numeri arabi; type="a" per i caratteri minuscoli; type="A" per i caratteri maiuscoli; type="i" per i numeri romani minuscoli; type="I" per i numeri romani maiuscoli. Si pu anche stabilire il punto di partenza della numerazione con lattributo start. Le impostazioni per difetto sono: numerazione araba e partenza dal valore 1. Anche il tag <li> prevede un attributo, value per assegnare ad una certa voce un valore specico e alterare quindi la normale sequenza di numerazione della lista. Il seguente codice:
|<html> |<head><title>Esempio lista numerata</title></head> |<body> |<ol type="1" start="1"> |<li>Penne</li>

Il linguaggio HTML
|<li>Matite</li> |<li>Quaderni</li> |<li value="5">Libri</li> |<li>Zaini</li> |</ol> |</body> |</html>

37

viene visualizzato come mostrato in gura 2.27.

Figura 2.27. |

In questo esempio la lista contiene solo testo non formattato; comunque possibile inserire qualsiasi elemento di blocco o di testo come voce dellelenco.

2.9.2 Liste puntate

I tag di inizio e ne di una lista puntata (o non numerata) sono <ul> e </ul>; anche in questo caso serve poi <li> per ogni voce dellelenco. Si pu stabilire il tipo di carattere di richiamo delle voci listate con lattributo type: type="circle" per usare un cerchio vuoto; type="disc" per usare un cerchio pieno; type="square" per usare un quadrato. Le liste (anche quelle numerate) possono essere nidicate in modo da creare delle sottoliste. I caratteri standard di richiamo dovrebbero essere il disco per le liste principali, il cerchio per le sottoliste di primo livello e il quadrato per le altre, ma questa cosa dipende molto dal browser usato. Vediamo un esempio:

38
|<html> |<head><title>Esempio lista puntata</title></head> |<body> |<h1>Lista materiali</h1> |<ul> | <li>Hardware | <ul> | <li>Unit centrale | <ul> | <li>CPU</li> | <li>Memoria centrale</li> | <li>Clock</li> | </ul> | </li> | <li>Periferiche | <ul> | <li>Memorie di massa | <ul> | <li>Nastro</li> | <li>Floppy Disk</li> | <li>Hard Disk</li> | <li>CD-ROM</li> | </ul> | </li> | <li>Stampante</li> | <li>Tastiera</li> | <li>Mouse</li> | <li>Schermo</li> | </ul> | </li> | </ul> | </li> | <li>Software | <ul> | <li>Software di base</li> | <li>Software applicativo</li> | </ul> | </li> |</ul> |</body> |</html>

Il linguaggio HTML

In questo esempio lindentatura serve solo ad aumentare la leggibilit del sorgente in quanto, come pi volte detto, gli spazi sono ignorati dal browser. Il risultato visibile in gura 2.29.

Il linguaggio HTML
Figura 2.29. |

39

2.9.3 Liste a glossario

Le liste a glossario sono delimitate dai tag <dl> e </dl>; le voci dellelenco sono contrassegnate dal marcatore <dt> mentre <dd> viene usato per fornirne la denizione. Ecco un esempio:
|<html> |<head><title>Esempio lista a glossario</title></head> |<body> |<dl> |<dt>Hardware</dt> |<dd>Insieme degli elementi del computer che hanno una |consistenza fisica</dd> |<dt>Software</dt> |<dd>Insieme dei programmi</dd> |</dl> |</body> |</html>

che viene visualizzato come in gura 2.31.

40
Figura 2.31. |

Il linguaggio HTML

Alcune osservazioni: un elemento <dd>, come anche <li>, pu contenere sia elementi di blocco che di testo; in <dt> invece possono esserci solo elementi di testo; ad una voce <dt> possono essere associate pi denizioni <dd> ma vero anche il viceversa: una denizione associata a pi voci.

2.10 Collegamenti ipertestuali

La possibilit di denire collegamenti ipertestuali o link tra documenti diversi senzaltro uno dei motivi del successo del Web in quanto permette di passare facilmente da una pagina ad unaltra senza preoccuparsi delle rispettive collocazioni siche. I documenti collegati possono infatti risiedere nella stessa macchina o su macchine diverse, distanti anche migliaia di chilometri, purch collegate ad Internet; inoltre possibile denire dei link anche ad altre parti di una stessa pagina. Lentit HTML da usare per denire i collegamenti chiamata ancora, un elemento di testo e corrisponde ai tag <a> e </a> accompagnati da vari attributi tra i quali i pi usati sono name e href. Il testo che si trova tra i marcatori di apertura e chiusura quello che il programma di navigazione evidenzia in qualche modo per attirare lattenzione sulla presenza del collegamento e viene denominato zona sensibile o zona attiva del documento (si parla di zona e non di testo sensibile perch un collegamento pu essere denito anche su elementi diversi, come le immagini). Ogni browser mette in risalto i link in modo diverso: vengono differenziati quelli gi visitati, da quelli da visitare e da quelli attivi (un link attivo per il breve tempo in cui viene selezionato dallutente); di solito i colori standard usati sono rispettivamente: blu (#0000FF), violetto (#800080) e rosso (#FF0000). Si possono comunque personalizzare i colori del testo dei collegamenti ricorrendo a degli attributi del tag <body> e precisamente: link per il colore dei collegamenti, vlink per il colore dei collegamenti gi visitati, alink per il colore dei collegamenti attivi. Per esempio per avere rispettivamente verde, marrone, fucsia:

Il linguaggio HTML

41

|<body link="#00FF00" vlink="#800000" alink="#FF00FF">

2.10.1 Collegamenti esterni

Per collegamenti esterni si intendono quelli che puntano a documenti memorizzati su macchine diverse da quella che ospita la pagina che stiamo denendo. Per denire questo tipo di collegamenti necessario usare lattributo href (che sta per hypertext reference) seguito dallURL della pagina alla quale ci si vuole collegare. Ad esempio:
|<a href="http://www.istruzione.it">Ministero della Pubblica Istruzione</a>

La scritta Ministero della Pubblica Istruzione viene evidenziata dal navigatore; la selezione di tale voce, con il mouse o con la tastiera, attiva il collegamento con il sito del Ministero ed il browser visualizza la pagina iniziale di tale sito (di solito la pagina contenuta nel le index.html che viene aperta per difetto se, come nellesempio in questione, non indicato espressamente un nome di le). Altro esempio:
|<a href="http://www.linuxdidattica.org/docs/filosofia/manifesto-gnu-it.html"> |Manifesto GNU di R. Stallmann</a>

In questo modo si denisce un collegamento con un documento contenente il Manifesto GNU di R, Stallman memorizzato presso il sito http://www.linuxdidattica.org sul percorso docs/ filosofia/ con nome manifesto-gnu-it.html. Altro esempio:
|<a href="mailto:pippo@tin.it">Invia messaggio a pippo</a>

In questo modo si denisce un collegamento attivando il quale si accede alla denizione di un messaggio di posta elettronica da inviare a pippo@tin.it.

2.10.2 Collegamenti a etichette in un documento

Lattributo name del tag <a> permette di inserire delle etichette (o label) che fanno riferimento a diverse sezioni di un documento. La presenza di queste etichette pu essere sfruttata denendo, in unaltra pagina HTML, dei collegamenti che puntano al documento non pi in modo generico ma indicando una sezione specica associata ad una di tali etichette. Se ad esempio deniamo una pagina di nome esempio.html sulla macchina pc01.max.planck in modo che contenga etichette:
| | | |<a
.... .... (testo del documento) .... name="E1">Esempio di etichetta numero 1</a>

42
| | | |<a | | |
.... .... (testo del documento) .... name="E2">Esempio di etichetta numero 2</a> .... .... (testo del documento) ....

Il linguaggio HTML

diviene possibile collegarsi ad essa da un altro documento in vari modi come mostrato di seguito:
|Da <a href="http://pc01.max.planck/esempio.html"> |qui </a> ci si collega allinizio della pagina esempio | |Da <a href="http://pc01.max.planck/esempio.html#E1"> |qui </a> ci si collega alla pagina esempio alletichetta 1 | |Da <a href="http://pc01.max.planck/esempio.html#E2"> |qui </a> ci si collega alla pagina esempio alletichetta 2

Quindi per collegarsi ad una certa etichetta di un documento basta aggiungere allindirizzo di questultimo il simbolo "#" seguito dal nome delletichetta a cui vogliamo fare riferimento.

2.10.3 Usare i collegamenti insieme ad altri elementi

Lelemento <a> pu essere utilizzato insieme ad altri marcatori HTML ma si deve ricordare che proibito nidicarlo in altri elementi <a>. Vediamo alcuni esempi: collegamento allinterno di una intestazione:
|<h3><a href="http://pc01.max.planck/"> |Esempio di intestazione con link</a></h3>

si noti che <a> che un elemento di testo deve essere interno al tag di intestazione che un elemento di blocco; collegamento in corsivo:
|<i><a href="http://pc01.max.planck/"> |Esempio di collegamento in corsivo</a></i>

oppure:
|<a href="http://pc01.max.planck/"> |<i>Esempio di collegamento in corsivo</i></a>

lista di collegamenti:
|<p>I seguenti sono i serventi |a cui ci possiamo collegare:</p>

Il linguaggio HTML
|<ul> |<li><a |<li><a |<li><a |<li><a |</ul>

43

href="http://serlinux1.max.planck/">serlinux1</a></li> href="http://serlinux3.max.planck/">serlinux3</a></li> href="http://serlinux5.max.planck/">serlinux5</a></li> href="http://serlinux7.max.planck/">serlinux7</a></li>

Sarebbe anche possibile cambiare il colore del testo dei collegamenti, nidicando il marcatore <font> allinterno del marcatore ancora; questa per unoperazione sconsigliata in quanto si verrebbero a perdere le impostazioni preimpostate relative ai colori dei collegamenti con la distinzione tra quelli visitati, non visitati e attivi e si potrebbe quindi creare disorientamento nellutente.

2.10.4 Collegamenti interni

I collegamenti interni sono quelli che fanno riferimento a le residenti sul proprio sito Web; si deniscono nello stesso modo di quelli esterni eccetto per il fatto che possibile fare riferimento anche a indirizzi relativi. Se ad esempio stiamo scrivendo una pagina HTML residente su pc01.max.planck/ classi/4d/pippo/ e vogliamo fare riferimento al documento esempio2.html presente sulla stessa macchina e stessa directory, basta scrivere:
|<a href="esempio2.html">Link alla pagina esempio2</a>

Se invece vogliamo collegarci ad un documento, presente sulla stessa macchina ma in una directory differente, dovremo specicare il percorso per raggiungerlo ricorrendo, se necessario, alla notazione .. che indica la directory madre della directory corrente. Vediamo alcuni esempi:
|<a href="pluto/esempio2.html">Link alla pagina esempio2</a>

in questo caso ci colleghiamo al le esempio2.html che in pc01.max.planck/ classi/4d/pippo/pluto/;

|<a href="../paperino/esempio2.html">Link alla pagina esempio2</a>

in questo caso ci colleghiamo al le esempio2.html che in pc01.max.planck/ classi/4d/paperino/. Per i collegamenti interni sempre consigliato luso di indirizzi relativi in modo che tutto continui a funzionare senza modiche (o quasi) anche in caso si spostino tutti i documenti del nostro sito in unaltra posizione del disco o addirittura su unaltra macchina. Se si usano indirizzi assoluti questo naturalmente non possibile e si devono modicare i vari collegamenti in caso di spostamento dei documenti.

44

Il linguaggio HTML

2.10.5 Collegamenti ad altre parti dello stesso documento

Grazie alluso delle etichette possibile denire collegamenti ad altre parti dello stessa pagina in modo da poter saltare immediatamente ad esse. Questo pu servire in caso di pagine molto lunghe oppure per creare degli indici del contenuto di un documento HTML. Ad esempio se si denisce in un documento una etichetta:
|<a name="sezione1">Sezione 1</a>

poi si pu stabilire il link ad essa scrivendo:

|<a href="#sezione1">Link alla sezione 1</a>

Nel caso si voglia denire lindice di un documento (di nome esempio.html) opportuno inserire delle etichette ad ogni intestazione del documento stesso:
|<h1><a name="cap1">CAPITOLO 1</a></h1> | .... | .... |<h1><a name="cap2">CAPITOLO 2</a></h1> | .... | ecc. ecc.

Lindice pu risiedere nel documento stesso (di solito allinizio) oppure in un altro; nel primo caso viene denito cos:
|<a href="#cap1">Capitolo 1. Il sistema di elaborazione</a> |<a href="#cap2">Capitolo 2. I sistemi operativi</a> | .... | ecc. ecc.

Nel secondo caso invece (supponendo che lindice sia in un altro documento ma nella stessa macchina e directory):
|<a href="esempio.html#cap1">Capitolo 1. Il sistema di elaborazione</a> |<a href="esempio.html#cap2">Capitolo 2. I sistemi operativi</a> | .... | ecc. ecc.

2.11 Immagini nei documenti

Nei documenti HTML possibile inserire immagini ed i formati pi comunemente utilizzati sono GIF (Graphic Interchange Format) e JPEG (Joint Photographic Experts Group); i le corrispondenti hanno rispettivamente le estensioni .gif e .jpg o .jpeg. Il formato GIF stato sviluppato da Compuserve alla ne degli anni 80 ed particolarmente adatto per linee, icone, immagini generate dal computer e con colori netti, non sfumati; inoltre,

Il linguaggio HTML

45

grazie a specici software, le immagini GIF possono anche essere rese trasparenti e animate (qui per non approfondiamo queste possibilit). Il formato JPEG si diffuso dal 1993 ed progettato per le fotograe e per altre immagini con colori sfumati. Tra i due il formato GIF senzaltro il pi diffuso per il fatto che le immagini GIF sono solitamente poco pesanti e quindi si trasferiscono in tempi brevi. Si deve infatti notare che, quando viene richiesta ad un servente Web una pagina contenente immagini, questultimo invia in risposta il le HTML corrispondente alla pagina e, separatamente, i le dove sono memorizzate le immagini; se questi ultimi sono molto grandi (e in presenza di collegamenti lenti alla rete) avremo dei tempi di attesa abbastanza lunghi per il completamento a video della pagina richiesta. A vantaggio delle immagini JPEG c la maggiore qualit (sono "a 24 bit" cio possono avere 16 milioni di colori contro gli "8 bit" e 256 colori delle GIF) e la compattezza: la stessa immagine in formato JPEG occupa circa un quarto dello spazio in byte del formato GIF. Di solito comunque le immagini JPEG hanno un maggiore occupazione di memoria perch create con apparecchi fotograci, mediante acquisizione dallo scanner o da altre fonti ad alta qualit e denizione. Nel 1995 il W3C ha denito un nuovo formato di immagini per la rete, il PNG (Portable Network Graphics) che, almeno nelle intenzioni, avrebbe dovuto sostituire gli altri formati; infatti PNG prevede il supporto da 256 colori (con PNG-8 che pu essere considerato il sostituto di GIF) no a 16,7 milioni di colori (con PNG-24 che dovrebbe sostituire JPEG). Nella realt il formato PNG, pur utilizzato, non ha mai sostituito del tutto gli altri formati. In conclusione possiamo dire che la scelta tra i formati dipende fortemente dalle caratteristiche delle immagini che si vogliono utilizzare; di solito in un documento Web si trovano immagini di tutti i formati citati.

2.11.1 Inserimento di immagini

Lelemento che si utilizza per linserimento di immagini <img>; un elemento di testo, prevede lattributo src per specicare il le contenente limmagine e lattributo alt per indicare un testo alternativo nel caso questultima non possa essere visualizzata. Esempio:
|<img src="topolino.gif" alt="Topolino"/>

In questo modo si inserisce limmagine contenuta nel le di nome topolino.gif residente nella directory corrente; il testo alternativo Topolino. I motivi per cui pu essere necessario il testo alternativo sono i seguenti: il browser non supporta la graca; il browser programmato per pronunciare testo al posto di immagini (per utenti non vedenti); il browser stato congurato solo per il testo in modo da velocizzare il caricamento dei documenti Web;

46

Il linguaggio HTML dare la possibilit al browser di visualizzare il testo alternativo mentre limmagine viene caricata; limmagine da visualizzare non viene trovata dal servente Web.

2.11.2 Posizionamento delle immagini

Le immagini possono essere posizionate con lattributo align del tag <img>; i valori possibili sono "top", "bottom" e "middle" per lallineamento verticale e "left" e "right" per lallineamento orizzontale. Il valore per difetto "top" grazie al quale il bordo superiore dellimmagine allineato con la riga di testo di cui essa fa parte (si ricordi che lelemento <img> di testo). Invece con "bottom" il bordo inferiore dellimmagine ad essere allineato con la riga di testo, mentre con "middle" questultimo viene allineato con la parte centrale dellimmagine. Con le scelte "right" e "left" limmagine viene posizionata rispettivamente al margine destro o sinistro della pagina ed il testo che segue lelemento <img> viene visualizzato afancato allimmagine stessa. Se si vuole interrompere la visualizzazione del testo afancato e far posizionare gli elementi successivi sotto limmagine si deve usare linterruzione di linea con attributo clear nel seguente modo:
|<br clear="left/"> |<!-- oppure --> |<br clear="right/"> |<!-- oppure --> |<br clear="all/">

rispettivamente nel caso che limmagine sia sul bordo sinistro o sul bordo destro o ci siano immagini su entrambi i lati. Lesempio seguente mostra luso di alcuni degli attributi appena illustrati:
|<html> |<head><title>Esempio posizionamento immagini</title></head> |<body> |<h1>Esempio posizionamento immagini</h1> |Prima immagine a destra e top con testo non affiancato |<img src="tux.jpg" align="right"/> |<br clear="right/"> |Altra immagine allineata bottom |<img src="tux.jpg" align="bottom"/> |<p><br/> |<img src="tux.jpg" align="left"/> |Immagine a sinistra con<br/> testo affiancato</p> |</body> |</html>

Nella gura 2.53 viene mostrato laspetto della pagina aperta con un browser.

Il linguaggio HTML
Figura 2.53. |

47

2.11.3 Dimensionamento delle immagini

Attraverso luso di altri attributi del tag <img> si possono dimensionare le immagini, impostare lo spessore del bordo e stabilire quanto spazio vuoto lasciare tra esse e il testo che le circonda. Gli attributi width e height permettono di specicare rispettivamente la larghezza e laltezza di unimmagine espressa in pixel. Esempio:
|<img src="topolino.gif" width="100" height="200" alt="Topolino"/>

Lattributo border permette di specicare un bordo di un certo spessore espresso in pixel; il valore di difetto zero che signica nessun bordo. Esempio:
|<img src="topolino.gif" width="100" height="200" border="10" alt="Topolino"/>

Si noti che in questo caso limmagine avr una larghezza totale di 120 pixel e unaltezza totale di 220 pixel. Con gli attributi hspace e vspace si indica inne lo spazio vuoto, sempre espresso in pixel, da lasciare a sinistra o destra (con hspace) e sopra e sotto (con vspace) allimmagine.

48

Il linguaggio HTML

2.11.4 Collegamenti con immagini

E possibile usare immagini al posto del testo o anche insieme al testo come ancore per i collegamenti. Esempi:
|<a href="http://pc01.max.planck/"><img src="topolino.gif"/></a> |<a href="http://pc01.max.planck/">Link a pc01<img src="topolino.gif"/></a>

Nel primo caso il collegamento denito sullimmagine, nel secondo denito sia sullimmagine che sul testo. Occorre ricordare che alcuni navigatori aggiungono automaticamente un bordo blu intorno ad una immagine collegamento per evidenziare la presenza di questultimo, quindi non opportuno denire bordi personalizzati per tali immagini.

2.12 Lattributo title

Questo attributo, che pu essere usato praticamente con tutti i marcatori, permette di inserire una etichetta di testo che viene visualizzata come tooltip dal programma di navigazione quando lutente si posiziona con il puntatore del mouse sullelemento cui lattributo associato. Occorre prestare attenzione al fatto che qualche browser visualizza come tooltip per le immagini il testo alternativo ad esse associato (se presente); nel caso venga inserita qualche immagine che ha sia lattributo alt che lattributo title, questultimo che viene preso in considerazione. Nellesempio seguente viene usato lattributo title associato ad una immagine e in gura 2.58 viene mostrato leffetto ottenuto.
|<html> |<head><title>Esempio di attributo title su immagine</title></head> |<body> |<h1>Esempio attributo title su immagine</h1> |Posizionare il puntatore del mouse sullimmagine per ottenere la didascalia |<p/> |<img src="tux.jpg" alt="Immagine di Tux" title="Tux la mascotte di GNU/Linux"/> |</body> |</html>

Figura 2.58. |

49

Capitolo

HTML: nozioni avanzate

In questo capitolo vengono esaminati alcuni aspetti del linguaggio HTML che possiamo denire avanzati: i tag ulteriori da usare nellintestazione, le tabelle, i riquadri, gli oggetti multimediali, le immagini mappate.

3.1 Informazioni supplementari nellintestazione

La sezione intestazione di un documento HTML pu contenere altre informazioni oltre al titolo del documento che, come abbiamo visto nel capitolo precedente, viene assegnato tramite il tag <title>. Esistono infatti i seguenti elementi che possono essere inseriti al suo interno: <meta>, <link>, <base>, <style>, <script>, <isindex>.

3.1.1 Lelemento meta

E un elemento usato per descrivere alcune propriet del documento ed solitamente accompagnato dallattributo name o da http-equiv che a loro volta necessitano dellattributo content. Vediamo alcuni esempi di uso del marcatore <meta> con attributo name:
|<meta name="Author" content="Paolino Paperino"/> |<meta name="Copyright" content="Walt Disney Italia"/>

In questo modo si informa il programma di navigazione su chi lautore del documento e si danno informazioni sul copyright.
|<meta name="generator" content="Mozilla/4.04 [en] (Win95; I) [Netscape]"/>

Qui invece si indica il programma usato per creare il documento HTML; quando si usano editor HTML una linea simile a questa viene automaticamente inserita nella sezione di intestazione. Nellesempio leditor usato la versione 4.04 in inglese di Netscape Navigator (conosciuta con il "soprannome" di Mozilla). Altri esempi:
|<meta name="description" content="Breve descrizione del documento"/> |<meta name="keywords" content="Qui, Quo, Qua, 313, Paperopoli, Paperina"/>

In questi esempi si danno informazioni utili per i motori di ricerca (programmi in grado di indicizzare i siti Web per poi permettere agli utenti di Internet ricerche basate sui criteri pi vari); qui si forniscono una piccola descrizione della pagina Web ed una serie di parole chiave riguardanti il suo contenuto, inserendo rispettivamente description e keywords nellattributo name e i valori corrispondenti in content. Lattributo http-equiv usato per vari scopi, ad esempio: per causare il refresh automatico della pagina dopo un certo tempo (nellesempio 15 secondi):

50
|<meta http-equiv="refresh" content="15"/>

HTML: nozioni avanzate

per richiamare automaticamente unaltra pagina trascorso un certo tempo:

|<meta http-equiv="refresh" content="10;url=http://www.aaa.it/altrapagina.html"/>

per evitare che il documento venga memorizzato nella cache e quindi il navigatore richieda sempre una nuova copia dello stesso:
|<meta http-equiv="expires" content="0"/>

Inoltre pu essere usato per indicare la data di scadenza della pagina in modo che i navigatori prelevino la versione aggiornata al momento opportuno:
|<meta http-equiv="expires" content="Sat, 4 Nov 2000 12:00:00 GMT"/>

Metodi alternativi per evitare la memorizzazione del documento nella cache sono i seguenti:
|<meta http-equiv="Pragma" content="no-cache"/> |<meta http-equiv="Cache-Control" content="no-cache, must revalidate"/>

Lattributo http-equiv pu essere utilizzato anche per classicare il contenuto del documento in modo che possano essere attivati meccanismi di protezione per i minori da parte dei programmi di navigazione; tali aspetti non vengono comunque approfonditi in questa sede.

3.1.2 Lelemento link

Con questo elemento si possono denire delle relazioni tra il documento ed altre pagine Web. Attenzione a non confondere questo tag con un collegamento (link in inglese) che, come abbiamo visto, si realizza con il tag <a>. Sono previsti i due attributi rel e rev, con il primo si stabilisce una relazione tra il nostro documento ed unaltra pagina Web, con il secondo invece si indica che unaltra pagina in relazione con la nostra. Se ad esempio abbiamo una pagina chiamata pagina1.html che fa parte di un sito il cui indice memorizzato (come avviene di solito) in index.html, pu essere opportuno indicare nella testata di pagina1.html:
|<link rel="index" href="index.html">

in tal modo i navigatori e i motori di ricerca saranno informati della relazione esistente tra i due documenti e lo saranno ancora meglio se nella testata di index.html si inserisce:
|<link rev="index" href="pagina1.html">

Queste informazioni potrebbero anche essere sfruttate da browser avanzati che includano tra i pulsanti di navigazione un tasto Index che permetta di saltare immediatamente allindice del

HTML: nozioni avanzate sito in cui contenuta la pagina visualizzata.

51

3.1.3 Gli elementi base, script, style, isindex

Gli elementi <base> (con il quale si pu indicare la URL in cui risiede il documento) e <isindex> (indica che la pagina in effetti un programma che effettua operazioni di ricerca) sono poco importanti ed usati molto raramente. Invece i marcatori <style> e <script> sono molto importanti in quanto servono per utilizzare fogli di stile e istruzioni di certi linguaggi di scripting allinterno delle pagine Web; tali argomenti vengono approfonditi pi avanti in queste dispense (capitolo 4 e paragrafo 8).

3.2 Uso delle tabelle

Le tabelle sono elementi molto usati per la realizzazione di documenti in HTML in quanto permettono di organizzare i dati in strutture formate da righe e colonne ma soprattutto perch con esse si pu impostare laspetto di una pagina disponendo i paragra in colonne, oppure creando dei margini, o ancora distribuendo testo ed immagini in modo pi vario. Questo modo di usare le tabelle, pur ancora molto frequente, da considerare deprecato a vantaggio del posizionamento ottenuto attraverso i fogli di stile. Nelle tabelle di un documento HTML, come in qualsiasi tabella si identicano i seguenti componenti: il titolo, opzionale, della tabella; le celle, cio le intersezioni tra righe e colonne, che contengono i dati; le intestazioni delle righe o colonne, cio delle celle contenenti le etichette che identicano i tipi di dati delle righe o colonne corrispondenti. La tabella pi piccola che si pu creare contiene una sola cella, cio una riga e una colonna; non ci sono invece restrizioni teoriche sul numero massimo di celle denibili; esiste per un limite dettato da ragioni pratiche in quanto opportuno che la tabella entri per larghezza nella nestra del browser onde evitare il ricorso, scomodo e spesso sgradito, alla barra di scorrimento orizzontale di questultimo. Le tabelle sono supportate da tutti i programmi di navigazione e ne esistono due diversi modelli: quello dellHTML 3.2 contenente una serie molto semplice di elementi e quello dellHTML 4.0 che ha introdotto nuovi attributi conservando per la compatibilit con il precedente. Nella maggior parte dei casi sufciente conoscere il modello di tabelle pi semplice che quindi quello trattato in questa sede; le funzioni pi complesse dellHTML 4.0 sono necessarie solo per lavori abbastanza sosticati.

52

HTML: nozioni avanzate

3.2.1 Esempi di tabelle

Introduciamo gli elementi per la denizione delle tabelle con un semplice esempio:
|<html> |<head> |<title>Esempio 1 con tabelle</title> |</head> |<body> |<p> |<table border> |<caption>Tabella di prova</caption> |<tr> |<th>Alunno</th> |<th>Voto orale</th> |<th>Voto scritto</th> |<th>Media</th> |</tr> |<tr> |<td>Pippo</td> |<td>5</td> |<td>7</td> |<td>6</td> |</tr> |<tr> |<td>Pluto</td> |<td>6</td> |<td>8</td> |<td>7</td> |</tr> |</table> |</p> |</body> |</html>

Lelemento da usare per la creazione di una tabella <table>; un elemento di blocco e richiede il tag </table> alla ne della denizione della tabella stessa. Con <caption> e </caption> si pu inserire il titolo della tabella. Il tag <tr> denisce le varie righe, suddivise in celle il cui contenuto denito con <td> per le celle normali, o con <th> per le intestazioni. I tag </tr>, </td>, </th> non sono obbligatori. Lesempio precedente viene visualizzato nel modo mostrato nella gura 3.12.
Figura 3.12. |

HTML: nozioni avanzate

53

Vediamo anche un esempio di tabella in cui le intestazioni sono per riga invece che per colonna:
|<html> |<head> |<title>Esempio 2 con tabelle</title> |</head> |<body> |<p> |<table border cellpadding="9"> |<caption>Tabella 2</caption> |<tr> |<th>Matematica</th> |<td>Prof. Pippo</td> |<td>Ore: 5</td> |</tr> |<tr> |<th>Storia</th> |<td>Prof. Pluto</td> |<td>Ore: 3</td> |</tr> |</table> |</p> |</body> |</html>

Il risultato in questo caso quello di gura 3.14.

Figura 3.14. |

54

HTML: nozioni avanzate

Nel seguente, ulteriore esempio si ha invece una tabella con le intestazioni sia nelle righe che nelle colonne:
|<html> |<head> |<title>Esempio 3 con tabelle</title> |</head> |<body> |<p> |<table align="center" border="15"> |<caption>Terza tabella</caption> |<tr> |<th>Alunni/Materie</th> |<th>Italiano</th> |<th>Storia</th> |<th>Matematica</th> |<th>Diritto</th> |</tr> |<tr> |<th>Pippo</th> |<td>5</td> |<td>7</td> |<td>6</td> |<td>6</td> |</tr> |<tr> |<th>Pluto</th> |<td>6</td> |<td>8</td> |<td>7</td> |<td>7</td> |</tr> |<tr> |<th>Paperino</th> |<td>6</td> |<td>6</td> |<td>7</td> |<td>7</td>

HTML: nozioni avanzate

|</tr> |</table> |</p> |</body> |</html>

55

In questo caso si ottiene quanto mostrato in gura 3.16.

Figura 3.16. |

3.2.2 Attributi dellelemento table

Gli attributi degli elementi per la denizione delle tabelle sono tutti opzionali; se non se ne specica alcuno si ottiene una tabella allineata a sinistra e senza bordi. Iniziamo a considerare gli attributi del marcatore <table> che sono: align, border, cellspacing, cellpadding, bgcolor, width. Con lattributo align, usato nel terzo degli esempi precedenti, si specica lallineamento della tabella; i valori possono essere "left" (valore per difetto), "center" e "right". Attraverso bgcolor si specica il colore dello sfondo della tabella usando i codici dei colori visti in precedenza. Lattributo border permette di aggiungere i bordi a tutte le celle della tabella; se si specica anche un valore in pixel, come nel terzo esempio, si ottiene il dimensionamento dei bordi, ma solo di quelli esterni. Con cellspacing e cellpadding si pu specicare di quanti pixel distanziare rispettivamente una cella da unaltra cella e il bordo delle celle dal loro contenuto (come stato fatto nel secondo esempio). Con width si imposta la grandezza della tabella, in percentuale rispetto alla larghezza della nestra del browser, oppure in base a un valore espresso in pixel. Ad esempio:

56
|<table width="50%">

HTML: nozioni avanzate

oppure:
|<table width="300">

Se questo attributo non viene usato, la tabella dimensionata in base al contenuto della sue celle; a questo proposito opportuno sottolineare, come emerge anche dagli esempi, che la larghezza di una colonna di una tabella determinata dalla larghezza della cella pi grande appartenente alla colonna stessa; allo stesso modo laltezza di una riga si adegua allaltezza della cella pi grande presente in essa.

3.2.3 Attributi del titolo

Allinterno del titolo, cio tra <caption> e </caption> si possono inserire solo elementi di testo. Con lattributo align si pu decidere se il titolo sta sopra (impostazione per difetto) o sotto la tabella:
|<caption align="top">Titolo sopra</caption>

oppure:
|<caption align="bottom">Titolo sotto</caption>

3.2.4 Attributi delle righe e delle celle

I tag <tr>, <th>, <td> prevedono gli attributi align, valign, bgcolor; esistono inoltre gli attributi rowspan, colspan, width che si applicano solo a <th> e <td>. Con align si imposta lallineamento orizzontale dei dati in una cella o in tutte le celle di una riga a seconda che tale attributo sia abbinato a <td> e <th> oppure a <tr>; il valore per difetto "left" e gli altri possibili sono "center" e "right". Con valign invece si imposta lallineamento verticale dei dati; i valori possibili sono: "top", "middle" (valore per difetto), "bottom", "baseline". Il valore "baseline" simile a "top" e imposta quindi un posizionamento in alto nella cella; la differenza nel fatto che con "baseline" la parte inferiore della prima riga di testo di ogni cella sempre allineata qualunque sia la dimensione dei caratteri usati nelle varie celle. Lattributo bgcolor permette di specicare il colore di sfondo di una riga o di una cella e questa impostazione prevale sullimpostazione dellintera tabella; se ad esempio abbiamo:
|<table bgcolor="#FF0000"> |<tr> |<td>Cella 1</td> |<td>Cella 2</td> |</tr> |<tr bgcolor="#00FF00">

HTML: nozioni avanzate

|<td>Cella 3</td> |<td bgcolor="#0000FF">Cella 4</td> |</tr> |</table>

57

La tabella ha lo sfondo rosso ma la seconda riga lo ha verde e la cella 4, che fa parte della seconda riga, ha lo sfondo blu. Gli attributi colspan e rowspan servono ad unire orizzontalmente e verticalmente pi celle di una tabella; vediamone il funzionamento con un esempio in cui si usa rowspan (lutilizzo di colspan analogo):
|<html> |<head> |<title>Esempio 4 con tabelle</title> |</head> |<body> |<p> |<table border> |<caption>Tabella n. 4</caption> |<tr> |<th rowspan="2">Milano</th> |<td>Minima</td> |<td>-2</td> |</tr> |<tr> |<td>Massima</td> |<td>10</td> |</tr> |<tr> |<th rowspan="2">Roma</th> |<td>Minima</td> |<td>4</td> |</tr> |<tr> |<td>Massima</td> |<td>13</td> |</tr> |</table> |</p> |</body> |</html>

Il risultato che si ottiene quello mostrato in gura 3.23.

58
Figura 3.23. |

HTML: nozioni avanzate

Inne lattributo width permette di specicare la larghezza in pixel di una cella indipendentemente dal suo contenuto; ad esempio:
|<td width="20"></td>

Si ricordi comunque che le celle di una colonna assumono sempre una larghezza pari a quella della cella pi larga della colonna stessa. In una cella si pu inserire praticamente tutto ci che pu essere denito nella sezione body di un documento: testo; elementi di blocco (paragra, elenchi, altre tabelle, ecc.) elementi di testo (font, collegamenti, immagini, ecc.) Grazie a questo, come detto in precedenza, le tabelle vengono anche usate per denire la disposizione degli elementi allinterno della pagina; ovviamente in questo caso si evita di denire i bordi, le celle di intestazione, il titolo e tutto quello che pu rendere visibile la tabella stessa. Il documento HTML dellesempio seguente appunto impaginato usando una tabella che qui serve a posizionare con precisione tre piccole immagini allineate orizzontalmente e le relative didascalie sotto di esse:
|<html> |<head><title>Esempio di posizionamento usando tabella</title> |</head> |<body> |<h1 align="center">Prova di posizionamento attraverso tabella</h1> |<p>Le seguenti immagini, con relative didascalie, sono |posizionate grazie alluso di una tabella: le immagini sono |inserite nelle tre celle della prima riga, le stringhe nelle |tre celle della seconda riga.</p> |<p/><br/><p/>

HTML: nozioni avanzate

59

|<table cellpadding="10"> |<tr> |<td width="200" align="center"><img src="tux.jpg" width="100" height="120"/></td> |<td width="200" align="center"><img src="tux_univ.jpg" width="100"
height="120"/></td> height="120"/></td>

|<td width="200" align="center"><img src="Family_linux.png" width="160" |</tr> |<tr> |<td align="center">Tux</td> |<td align="center">Tux studente</td> |<td align="center">Tux ... e famiglia</td> |</tr> |</table> |</body> |</html>

Nella gura 3.26 vediamo come viene visualizzata la pagina.

Figura 3.26. |

Il risultato che si ottiene inserendo i vari elementi come contenuto delle celle di una grossa tabella solitamente accettabile, ma utile ribadire che lo stesso risultato (se non migliore) si ottiene in modo pi appropriato ed elegante con i fogli di stile.

3.2.5 Creazione di celle vuote

Per creare una cella vuota sufciente digitare il tag <td> seguito immediatamente da </td>; pu per accadere che qualche browser non visualizzi i bordi di una cella vuota. Per essere sicuri che i bordi siano visibili possibile inserire nella cella vuota uno spazio unicatore:
|<td>&#160;</td>

60

HTML: nozioni avanzate

3.2.6 Tabelle nidicate

Una tabella nidicata quando viene inserita in una cella di unaltra tabella. Luso di tabelle nidicate anche un modo per ottenere due tabelle afancate; basta infatti inserire le due tabelle da afancare in due celle di una tabella madre denita senza bordo:
|<html> |<head> |<title>Esempio 5 con tabelle</title> |</head> |<body> |<p> |<table align="center"> |<caption>Tabella n. 5</caption> |<tr> |<td> | <table border="10"> | <caption>I Quadrimestre</caption> | <tr><td></td><th>Orale </th><th>Scritto</th> | <th>Pratico </th></tr> | <tr><td>Pippo </td><td>6 </td><td>7 </td><td>7</td></tr> | <tr><td>Pluto </td><td>7 </td><td>8 </td><td>8</td></tr> | </table> |</td> |<td> | <table border="10"> | <caption>II Quadrimestre</caption> | <tr><td></td><th>Voto finale </th></tr> | <tr><td>Pippo </td><td>7 </td></tr> | <tr><td>Pluto </td><td>8 </td></tr> | </table> |</td> |</tr> |</table> |</p> |</body> |</html>

Il risultato che si ottiene quello mostrato in gura 3.29.

Figura 3.29. |

HTML: nozioni avanzate

61

3.3 Riquadri e riquadri in linea

In questo paragrafo vengono illustrati i riquadri (frame) e i riquadri in linea (inline frame). Si ricorda che luso di questi elementi deprecato a meno che non si faccia riferimento alla variante Frameset dellHTML; qui vengono trattati perch permettono in modo semplice di gestire pi documenti HTML in una singola pagina.

3.3.1 Uso dei riquadri

I riquadri sono delle suddivisioni della nestra del browser in cui possono essere visualizzati documenti HTML diversi. Un esempio in cui possono essere utili se si hanno siti Web con molti livelli di pagine: in tal caso si potrebbe pensare di usare un riquadro per visualizzare un indice del sito in modo permanente ed un altro per contenere le varie pagine che si richiamano durante la navigazione. Per denire una pagina che deve contenere riquadri si usa un documento HTML particolare chiamato frameset che si differenzia da quelli visti nora in quanto contiene lelemento <frameset> al posto di <body>. Vediamo un esempio:
|<html> |<head> |<title>Esempio con riquadri</title> |</head> |<frameset cols="35%,65%" bordercolor="#00FF00"> |<frame src="doc1.html"/> |<frame src="doc2.html" name="frame2"/> |<noframes> |<body> |Se vedete questo messaggio il vostro browser non gestisce i frame. |Per visualizzare i documenti cliccare sui link: |<a href="doc1.html">Primo documento</a> |<a href="doc2.html">Secondo documento</a> |</body>

62
|</noframes> |</frameset> |</html>

HTML: nozioni avanzate

Il bordo dei riquadri viene impostato di colore verde con lattributo bordercolor (per difetto il colore assegnato il grigio); grazie allattributo cols con valore "35%,65%" si ha una suddivisione in due colonne contenenti rispettivamente i documenti doc1.html e doc2.html. La parte del documento compresa tra i marcatori <noframes> e </noframes> serve a rendere fruibile la pagina anche ai programmi di navigazione che non gestiscono i riquadri; essa alternativa al frameset e contiene una sezione body come i normali documenti HTML. Laspetto del documento viene mostrato nella gura 3.31; i messaggi di le non trovato dipendono dal fatto che i due documenti doc1.html e doc2.html non sono stati creati.
Figura 3.31. |

Volendo ottenere una suddivisione in riquadri orizzontali si deve usare lattributo rows al posto di cols; anche possibile usare entrambi gli attributi per denire delle "griglie" di riquadri come nel seguente esempio:
|<frameset cols="300,*" rows="25%,50%,25%">

La grandezza dei riquadri pu essere specicata anche in pixel: nellesempio la prima colonna grande 300 pixel, mentre il carattere * signica che la seconda colonna occupa lo spazio restante nella nestra. Esiste anche la possibilit di usare riquadri nidicati continuando a dividerli in pi parti no ad un massimo di nove riquadri presenti nella nestra. Si deve per tenere presente che luso contemporaneo di pi di due o tre riquadri in una nestra pu favorire errori nella realizzazione del documento e pu creare disorientamento nellutente che lo visualizza. Quando si usano i riquadri nidicati, il primo frameset si chiama frameset di appartenenza e gli altri frameset dipendenti.

HTML: nozioni avanzate Vediamo un esempio con riquadri nidicati:

|<html> |<head> |<title>Esempio con riquadri nidificati</title> |</head> |<frameset cols="250,*"> | <frame src="doc1.html"/> | <frameset rows="50%,50%"> | <frame src="doc2.html" name="frame2"/> | <frame src="doc3.html" name="frame3"/> | </frameset> |</frameset> |</html>

63

In questo modo si ottiene una nestra suddivisa in due colonne, una larga 250 pixel, laltra la restante parte dello spazio, a sua volta suddivisa in due righe di uguale grandezza. Lattributo name del tag <frame> serve ad assegnargli un nome; questo utile nel caso si voglia fare in modo che i collegamenti attivati su un riquadro abbiano "effetto" su un altro. Ad esempio possiamo avere in doc1.html il collegamento seguente in cui si fa uso dellulteriore attributo target:
|<a href="doc4.html" target="frame2">Cliccare per vedere documento 4</a>

Se viene attivato questo collegamento, il riquadro che lo contiene non si altera mentre in quello chiamato "frame2" si ha la visualizzazione della pagina doc4.html, come mostrato nella gura 3.35.
Figura 3.35. |

Nel caso in un documento ci siano molti collegamenti tutti con stesso target si pu evitare di scrivere lattributo per ognuno di essi ricorrendo allelemento <base> da inserire nella sezione head nel seguente modo:

64
|<head> |<title>Titolo</title> |<base target="nome_frame"> |</head>

HTML: nozioni avanzate

Esistono quattro nomi di destinazioni "speciali" che possibile assegnare allattributo target e precisamente: "_blank": indica di caricare il documento aprendo una nuova nestra del navigatore; "_parent": fa riferimento al frameset di appartenenza (pu essere utile se si usano riquadri nidicati); "_self": indica di caricare il documento nel riquadro corrente (questa limpostazione per difetto e quindi ha senso usarla solo nel caso si voglia cambiare la destinazione stabilita con un base target precedente); "_top" forse lopzione pi utile e permette di rimuovere tutti i riquadri presenti nella nestra. Altri attributi del tag <frame> sono: frameborder, con valori "0" oppure "1" (per difetto "1"): con "0" si elimina il bordo di separazione tra un riquadro e quello adiacente; si possono usare anche i valori "no" per avere un bordo normale e "yes" per averlo tridimensionale e si pu anche impostare lo spessore del bordo con lattributo border del tag <frameset>; questi attributi comunque sono estensioni HTML fuori dallo standard; borderwidth, borderheight, si possono usare per stabilire quanto spazio in pixel deve essere inserito tra i bordi del riquadro (rispettivamente i bordi destro e sinistro oppure superiore e inferiore) ed il suo contenuto; noresize, permette di impedire il ridimensionamento del riquadro da parte dellutente; scrolling, con valori "yes" oppure "no" oppure "auto"; il valore per difetto "auto" ed indica che le barre di scorrimento vengono aggiunte al riquadro automaticamente quando necessario; il valore "yes" le fa inserire sempre ed il valore "no" mai (sconsigliato).

3.3.2 Riquadri in linea

I riquadri in linea sono elementi di testo che permettono di visualizzare un documento separato come parte di una pagina; i marcatori da usare sono <iframe> e </iframe> con gli stessi attributi del tag <frame> ed in pi width, height e align>, con ovvio signicato. Un riquadro in linea dovrebbe sempre contenere anche del testo alternativo da visualizzare se il browser non supporta tale elemento. Vediamo un esempio:
|<html> |<head> |<title>Esempio con gli iframe</title> |</head>

HTML: nozioni avanzate

|<body> |<i>Dopo questo testo abbiamo un elemento iframe contenente un altro |documento HTML.</i> |<p/> |<div align="center"> |<iframe src="doc2.html" name="riquadro"/> |<p>Testo alternativo: il browser non supporta i riquadri in linea.</p> |<p><a href="doc1.html">Cliccare qui per il documento</a></p> |</iframe> |</div> |</body> |</html>

65

Nella gura 3.38 vediamo laspetto del documento.

Figura 3.38. |

Anche ai riquadri in linea pu essere assegnato un nome, esattamente allo stesso scopo visto per i riquadri: riferendosi allesempio, possibile denire in un altra pagina un collegamento che, grazie allattributo target con valore "riquadro", fa aprire un documento allinterno del riquadro in linea.

3.4 Oggetti multimediali

Per inserire oggetti multimediali (suoni e lmati) in un documento HTML si usa principalmente lelemento di testo <object>. Grazie alla tecnica dello streaming anche possibile ascoltare suoni e vedere lmati in tempo reale (cio durante il trasferimento, senza dover attendere che il le relativo alloggetto multimediale sia stato completamente scaricato dalla rete) ma sono necessari appositi programmi come RealPlayer. Si deve comunque tenere conto che in assenza di connessioni veloci alla rete la riproduzione di lmati e brani musicali scaricati da Internet avviene con una qualit praticamente inaccettabile. I formati pi comuni dei le audio sono: .au: Unix audio; .wav: Microsoft Wave;

66 .aif: Macintosh audio; .ra o .ram: RealAudio; .mid o .midi: MIDI (Music Instrument Digital Interface); .mp3: standard MPEG-1 audio layer III.

HTML: nozioni avanzate

I primi quattro contengono suoni digitalizzati con una qualit non eccezionale e una richiesta di memoria notevole per pochi secondi di registrazione. I le MIDI invece contengono "istruzioni musicali" che vengono interpretate ed eseguite dalla scheda audio del computer che cos pu riprodurre il brano; sono le molto piccoli e offrono suoni di elevata qualit. I le mp3 sono sicuramente i pi "famosi" e stanno cambiando la maniera di acquisire, ascoltare, archiviare musica. Lmp3 uno standard di compressione di musica digitalizzata che permette di memorizzare brani con qualit pari a quella dei CD musicali occupando circa un decimo dello spazio che sarebbe necessario senza la compressione (una canzone di tre minuti occupa circa 3 MB di memoria). Diventa quindi possibile scaricare i brani da Internet anche con una normale connessione casalinga, ascoltarli con opportuni lettori software, conservarli sulle proprie memorie di massa o copiarli su lettori mp3. Passando ai formati video possiamo citare: .mpg o .mpeg: MPEG (Moving Pictures Expert Group); .avi: Microsoft AVI (Audio Video Interleave); .mov o .qt: QuickTime. Tutti i tipi di le video supportano anche laudio associato ma occupano una grande quantit di memoria (almeno 1 Mb per 30 secondi di lmato). I migliori sono i lmati MPEG che offrono anche una buona qualit di riproduzione.

3.4.1 Attributi degli oggetti multimediali

Lelemento <object> prevede gli attributi data, type e molti degli attributi gi visti per le immagini (per denire larghezza, altezza, allineamento, bordo, ecc.). Non invece previsto lattributo alt in quanto il testo alternativo si inserisce semplicemente tra i tag <object> e </object>. Esempi:
|<object data="symphony.mid" type="audio/midi"> |Sinfonia in formato midi</object> |<object data="meteo.mov" type="video/quicktime" align="left"
width="200" height="150">

|Filmato da satellite meteo</object>

Lattributo type pu essere tralasciato a patto che il browser sia in grado di identicare il tipo di oggetto multimediale solo dallestensione del suo nome. In certi casi possibile specicare altri tag: ad esempio, nel caso di le midi, per far partire

HTML: nozioni avanzate automaticamente la riproduzione del brano:

|<object data="symphony.mid" type="audio/midi"> |<param name="autostart" value="true"/> |Sinfonia in formato midi con autostart |</object>

67

3.5 Immagini mappate

Abbiamo visto in precedenza come sia possibile inserire in un documento un collegamento ancorato su una immagine; solitamente leffetto dellattivazione del collegamento sempre lo stesso in qualsiasi punto dellimmagine si agisca. Con le immagini mappate invece possibile denire collegamenti diversicati per le varie zone di una immagine. Gli elementi da utilizzare per includere delle immagini a mappa in un documento sono <map>, <area> e lattributo usemap di img nel seguente modo:
|<map name="nomemappa"> |<area shape="rect" coords="x1,y1,x2,y2" href="doc1.html" /> |<area shape="rect" coords="x3,y3,x4,y4" href="doc2.html" /> |</map> |<img src="nome_immagine.jpg" usemap="#nomemappa"/>

In questo modo viene denita una immagine di mappa con nome nomemappa e due aree denite come rettangoli con vertici (x1,y1), (x2,y2) e (x3,y3), (x4,y4) che puntano rispettivamente a doc1.html e doc2.html. I valori possibili di shape sono: "rect", permette di denire unarea rettangolare specicando con coords le coordinate dei vertici alto a sinistra e basso a destra; "circle", in tal caso larea un cerchio e con coords si specicano x,y,r cio le coordinate del centro e il raggio; "poly", in questo modo si denisce un poligono e con coords si indicano le coordinate dei suoi vertici. Per usare la mappa cos denita si deve poi ricorrere al tag img con lattributo usemap come mostrato nellesempio precedente. Si deve notare che il riferimento allimmagine con img non deve necessariamente essere inserito subito dopo la denizione della mappa fatta con <map>, ma pu essere in qualsiasi punto del documento; si noti inoltre che il valore si usemap un indirizzo URL: nellesempio si fa riferimento ad una mappa denita nello stesso documento in cui inserito lelemento <img>, ma si potrebbe usare una mappa denita in un altro le o addirittura in un altro sito Web.

68

HTML: nozioni avanzate

69

Capitolo

I fogli di stile
In questo capitolo vengono esaminati gli aspetti fondamentali della natura e delluso dei fogli di stile a cascata o CSS (Cascading Style Sheet) della cui importanza si gi accennato precedentemente.

4.1 Caratteristiche dei fogli di stile

I CSS sono raccolte di regole riguardanti la presentazione di un documento HTML e che non inuiscono sulla sua struttura interna. Questo un primo motivo per cui essi si fanno preferire rispetto ai tag HTML utilizzabili per variare laspetto del documento. Altri vantaggi sono: la maggiore variet di interventi realizzabili, grazie ai CSS, sullaspetto della pagina; la possibilit di creare facilmente ununica denizione delle caratteristiche di un certo sito esternamente alle sue pagine, cosa che porta un duplice ulteriore benecio: laspetto di tutte le pagine risulta uniforme; le modiche riguardanti lesteriorit delle varie pagine non devono essere fatte in ognuna di esse ma solo una volta nel le contenente le denizioni del foglio di stile. Occorre comunque segnalare che, a fronte di questi vantaggi, i fogli di stile presentano anche un inconveniente dovuto al mancato rispetto degli standard CSS da parte di qualche programma di navigazione; pu infatti accadere che le stessa pagina, costruita con determinate regole di stile, venga visualizzata in modo diverso da browser diversi. Al momento gli standard riguardanti i fogli di stile, rilasciati dal W3C, sono CSS1, CSS2 e CSS3; la sintassi non prevede distinzione fra maiuscole e minuscole ma in queste dispense si preferisce luso delle minuscole in coerenza con la scelta fatta riguardo ai sorgenti HTML.

4.2 Struttura delle regole di stile

Un foglio di stile costituito da varie regole ognuna delle quali formata da un selettore e da un blocco di dichiarazioni; ogni dichiarazione consiste poi nellassociazione tra una propriet e il relativo valore. Linsieme delle dichiarazioni deve essere racchiuso tra i simboli { e }; ogni dichiarazione deve essere conclusa con ; e fra propriet e rispettivo valore deve essere inserito un :. Il selettore determina, nellambito del documento HTML che fa uso di quella regola di stile, a quale elemento o a quali elementi si applicano le formattazioni specicate con le successive dichiarazioni. Dei modi con cui le regole di stile possono essere associate a un documento HTML si occupa il prossimo paragrafo (4.3). Come primo esempio di regola di stile si consideri la seguente:
|h1 {color: red; font-style: italic;}

Anche senza conoscere ulteriori dettagli sulla denizione delle regole di stile abbastanza semplice capire che la regola in questione permette di ottenere intestazioni di primo livello (selettore

70
h1) con testo di colore rosso e in corsivo.

I fogli di stile

4.2.1 Denizione dei selettori

Un selettore pu denire gli elementi da formattare nei seguenti modi: in base al nome dellelemento; in base a raggruppamenti di elementi in classi e in ID; in base al fatto che gli elementi abbiano certi attributi e valori; in base al contesto cui lelemento appartiene; in base a pseudo-classi e a pseudo-elementi. La denizione pu anche avvenire combinando uno o pi dei succitati criteri. Inoltre possibile applicare le stesse dichiarazioni a pi selettori semplicemente elencandoli separati da una ,.

4.2.1.1 Selettori basati sul nome di elementi

Questa categoria di selettori molto semplice in quanto gli elementi cui si vogliono applicare le regole si identicano con il nome che hanno nel linguaggio HTML. Nellesempio precedente si visto un selettore di questo tipo, identicato con h1, che permette di applicare le regole specicate nelle successive dichiarazioni a tutti i marcatori <h1>. Vediamo un altro esempio con il quale facciamo in modo che tutti i paragra e le intestazioni di livello tre abbiano testo di colore verde e giusticato:
|p,h3 {color: green; text-align: justify;}

4.2.1.2 Selettori di classe e selettori ID

Attraverso le classi e gli ID si possono specicare regole da applicare in modo indipendente dai marcatori HTML. Una classe si denisce utilizzando il simbolo . seguito dal nome della classe e preceduto (non obbligatoriamente) dal nome di un marcatore. Vediamo un esempio:
|p.classe1 {color: red; text-align: left;} |.classe2 {font-weight: bold;}

In questo modo vengono denita una classe classe1 relativa al marcatore <p> e una classe classe2 relativa a qualsiasi marcatore. Nel codice HTML si pu fare riferimento a queste regole usando lattributo class per i tag cui si vogliono applicare; ad esempio:

I fogli di stile
|<h1 class="classe2">Titolo di classe2</h1> |<p class="classe1"> |Testo di colore rosso e allineato a sinistra</p> |<p> |Paragrafo normale</p> |<p class="classe2"> |Paragrafo con caratteri in grassetto</p>

71

Come si vede la classe classe2 si pu associare a qualsiasi tag, mentre la classe classe1 solo a marcatori <p>. Un ID si denisce utilizzando il simbolo # seguito dal nome della classe e preceduto (non obbligatoriamente) dal nome di un marcatore. Vediamo un esempio:
|#ident1 {color: green; font-style: italic;}

Nel codice HTML si pu fare riferimento a questa regola usando lattributo id per il tag cui si vuole applicare tali formattazioni, ad esempio nel modo seguente:
|<h1 id="ident1">Titolo con ID ident1</h1> |<p> |Paragrafo normale</p>

La differenza fondamentale tra i selettori di classe e i selettori ID che i primi si possono usare in associazione a quanti si vuole elementi, i secondi invece una sola volta allinterno di un documento HTML. Quindi le regole da utilizzare per molteplici elementi del documento si deniranno per selettori di classe, mentre quelle uniche per selettori di ID. Gli ID hanno il vantaggio che possono funzionare da segnaposti individuabili dai programmi di navigazione; se abbiamo un indirizzo come http://www.dominio.it#id1, il browser cerca di localizzare lelemento con ID id1 e se lo trova si posiziona in quel punto della pagina. Notiamo comunque che un tag pu tranquillamente essere associato contemporaneamente ad una classe e ad un ID in modo da avere delle peculiarit comuni anche ad altri elementi e contemporaneamente altre uniche, oltre che essere essere individuabile facilmente dal programma di navigazione.

4.2.1.3 Selettori in base a attributi e valori

La selezione di marcatori pu avvenire anche in base alla presenza di un attributo oppure di un attributo con un dato valore (anche parziale); lindicazione dellattributo, semplice o valorizzato deve avvenire tra i simboli [ e ]. Lesempio seguente mostra nellordine luso di un selettore di attributo semplice, di un selettore di attributo esatto e di un selettore di attributo parziale (si noti in questo caso luso delloperatore ~=):
|[align] {font-style: italic;} |a[href="www.google.com"] {font-weight: bold;} |a[href~="google"] {font-weight: bold;}

72

I fogli di stile

4.2.1.4 Selettori in base al contesto

I selettori basati sul contesto tengono conto della struttura del documento HTML e permettono di fare riferimento a marcatori che sono discendenti, gli, adiacenti di altri marcatori. Un marcatore discendente di un altro (che viene detto antenato) quando annidato in esso a un qualunque livello di profondit; invece glio di un marcatore (che viene detto genitore) se un discendente diretto; inne due marcatori si dicono adiacenti se hanno lo stesso genitore. Si tenga presente che in documento HTML il tag <html> lantenato di qualsiasi altro marcatore e per questo viene detto elemento radice. Nel prossimo esempio viene mostrata una porzione di codice HTML in cui abbiamo due tag <h1> e <p> adiacenti e gli di <body>, e i tag <em> e <b> gli rispettivamente di <h1> e <p> (oltre che, ovviamente, discendenti di <body>).
|<body> |<h1>Esempio per mostrare <em>struttura</em></h1> |<p> |Testo normale, <b>testo in grassetto</b></p> |</body>

La selezione in base alla struttura avviene con la sintassi mostrata nellesempio seguente:
|h1 em {color: yellow;} |p > b {font-style: italic;} |h1 + p {text-align: justify;}

I tre selettori dellesempio si interpretano nel seguente modo: seleziona i tag <em> che siano discendenti di un <h1>; seleziona i tag <b> che siano gli di un <p>; seleziona i tag <p> che siano adiacenti di un <h1>;

4.2.1.5 Selettori basati su pseudo-classi e pseudo-elementi

Questo tipo di selettori particolarmente importante perch permette di assegnare stili non in base alla struttura del documento o alla presenza di certi elementi con determinati attributi e valori, ma in base allo stato in cui si trovano determinati oggetti in un certo momento. In particolare con le pseudo-classi possibile selezionare, in base allo stato in cui si trovano, certi tag che vengono utilizzati per linterazione con lutente. Al momento lunico esempio che abbiamo incontrato di tale tipo di marcatori quello per i collegamenti <a> e quindi vediamo luso dei selettori di pseudo-classi solo relativamente ad esso; quanto mostrato pu poi essere facilmente applicato anche ad altri tipi di tag interattivi, quelli relativi ai moduli, presentati pi avanti (paragrafo 6). Nellesempio seguente viene mostrato luso di selettori di pseudo-classi:
|a:link {color: magenta;} |a:visited {color: red;} |a:hover {color: yellow;} |a:active {color: brown;}

I fogli di stile

73

Con :link si selezionano tutti i collegamenti che sono davvero tali (si ricordi che il tag <a> viene anche usato per inserire le etichette con lattributo name); :visited permette di selezionare i collegamenti gi visitati; :hover si riferisce a elementi sui quali posizionato il puntatore del mouse; :active si riferisce a elementi attivati da operazioni dellutente (ad esempio un collegamento nel momento in cui lo si attiva con il pulsante del mouse. Le prime due sono pseudo-classi per i collegamenti; le altre due insieme a :focus (seleziona qualsiasi elemento che attivo cio che sta ricevendo linput dellutente) sono dette dinamiche e possono essere applicate a qualsiasi tag (come detto, il loro uso importante relativamente ai moduli HTML). Esiste anche la possibilit di combinare le pseudo-classi come mostrato di seguito:
|a:link:hover {color: magenta;} |a:visited:hover {color: red;} |a:link:visited {color: black;}

Nel primo caso si vogliono selezionare i collegamenti non visitati su cui posizionato il puntatore del mouse; nel secondo caso stessa cosa per i collegamenti visitati; il terzo caso assurdo (un collegamento non pu essere allo stesso tempo visitato e non visitato) e viene solitamente ignorato dai browser. Concludiamo il paragrafo con gli pseudo-elementi grazie ai quali possibile selezionare, e applicare gli stili, alla prima lettera o alla prima riga o anche prima e dopo un certo elemento. Riguardo alla prima lettera e alla prima riga la sintassi molto semplice e intuitiva, come dimostrato dal prossimo esempio:
|p:first-letter {color: green;} |p:first-line {color: red;}

Molto interessanti sono gli pseudo-elementi :before e :after che usati congiuntamente alla regola content permettono di inserire un contenuto (chiamato contenuto generato) nel documento HTML prima o dopo un certo marcatore; un esempio pu chiarire facilmente le potenzialit di questi selettori:
|h1:before {content: "Nuovo capitolo"; display: block; color: green;} |body:after {content: "Fine del documento"; font-style: oblique;}

Leffetto quello di inserire la stringa Nuovo capitolo di colore verde prima di ogni intestazione di livello 1 e la stringa Fine del documento, obliqua, alla ne del testo visualizzato. Interessante anche luso della propriet display che nellesempio serve a inserire il testo generato come elemento di blocco e quindi a fare proseguire il testo contenuto nel tag <h1> su un nuovo paragrafo; tale propriet pu assumere vari altri valori, che qui non consideriamo, tra cui "inline" che il valore per difetto. Le possibilit offerte dalla propriet content e da altre riguardanti tipi speciali di contenuto generato (virgolette generate, contatori) sono molto maggiori di quelle appena mostrate ma non vengono approfondite in questa sede.

74

I fogli di stile

4.2.2 Dichiarazione di regole di stile per la formattazione

Una volta visto come possibile selezionare le parti del documento cui applicare gli stili passiamo ad elencare alcuni di quelli relativi alla formattazione del testo. Alcune propriet possono essere ereditate; ci signica che gli stili vengono applicati a un marcatore e anche a tutti i suoi discendenti. Lelenco non completo e viene fornito in modo molto sintetico con una tabella contenente le propriet, il loro signicato, i valori (almeno i pi importanti) che esse possono assumere e se sono ereditate oppure no; in caso di necessit, queste informazioni possono essere integrate consultando testi e manuali riguardanti i CSS. Altri tipi di regole di stile, stavolta relative al posizionamento degli oggetti nel documento, vengono invece illustrate nel paragrafo 4.4. Quando si fa riferimento a grandezze (misura di caratteri, interlinea ecc.) si possono utilizzare varie unit di misura; alcune sono assolute: pixel (px); punti (pt); millimetri (mm); centimetri (cm); pollici (in); picas (pc, pari a 12 pt). Altre unit di misura sono relative, come: em-height (em), altezza media dellinsieme di caratteri usato; ex-height (ex), altezza del carattere x dellinsieme di caratteri usato. Esiste poi la possibilit di esprimere grandezze in percentuale, calcolata di solito in base alle dimensioni del tag genitore di quello considerato.
Propriet Signicato Valori Ereditata Commento Si applica a qualsiasi elemento; nomi multipli devono essere racchiusi tra virgolette; possibile inserire pi valori di famiglie di caratteri separati da , per avere una gerarchia di scelta; il valore per difetto dipende dal browser.

font-family:

Famiglia di caratteri

Arial, "Helvetica Bold" ....

Si

I fogli di stile
Propriet Signicato Valori xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, dimensione esatta in una delle unit di misura elencate in precedenza, dimensione in percentuale (nn%) Ereditata Commento

75

font-size:

Grandezza carattere

del

Si

font-style:

Stile del carattere

normal, italic, oblique

Si

font-variant font-weight:

Maiuscoletto

normal, small-caps normal, bold, bolder, lighter normal, valore intero da moltiplicare per la dimensione del carattere, valore in percentuale (nn%) sulla dimensione del carattere, valore esatto espresso con una delle unit di misura previste. transparent, colore espresso in esadecimale (preceduto da #) o con codice mnemonico (red, green,...) none, URI dellimmagine center, left, right, top, bottom top left, top right, bottom left, bottom right, valori delle coordinate assolute o in percentuale rispetto allangolo superiore sinistro no-repeat, repeat, repeat-x, repeat-y

Si

Peso del carattere

Si

Si applica a qualsiasi elemento; il valore per difetto medium; nel caso di valore in percentuale, o di valore em, o di indicazione smaller o larger, viene presa come base la dimensione del carattere dellelemento genitore; esempi: 15px, 20pt, 75%, 0.75em. Si applica a qualsiasi elemento; il valore per difetto normal. Si applica a qualsiasi elemento; il valore per difetto normal. Si applica a qualsiasi elemento; il valore per difetto normal.

line-height:

Interlinea

Si

Si applica a qualsiasi elemento; il valore per difetto normal.

backgroundcolor:

Colore di sfondo

No

Si applica a qualsiasi elemento; il valore per difetto transparent. Si applica a qualsiasi elemento; il valore per difetto none.

backgroundimage:

Immagine sfondo

di

No

backgroundposition:

Posizione di partenza dellimmagine di sfondo

No

Si applica a elementi di blocco; il valore per difetto 0% 0%.

backgroundrepeat:

backgroundattachment:

Modo di ripetizione dellimmagine di sfondo Per far scorrere limmagine di sfondo insieme allelemento di cui sfondo

No

Si applica a qualsiasi elemento; il valore per difetto no-repeat. Si applica a qualsiasi elemento; il valore per difetto scroll.

scroll, xed

No

76
Propriet Signicato Valori colore espresso in esadecimale (preceduto da #) o con codice mnemonico (red, green,...) left, center, justify right, Ereditata Commento

I fogli di stile

color:

Colore del testo

Si

Si applica a qualsiasi elemento; il valore per difetto dipende dal browser. Si applica a elementi di blocco; il valore per difetto dipende dal browser, di solito left. Si applica a qualsiasi elemento; il valore per difetto none. Si applica a elementi di blocco; il valore per difetto 0; il valore in percentuale viene calcolato in base alla larghezza dellelemento di blocco che contiene lelemento considerato; si possono inserire anche valori negativi che permettono di avere rientri a sinistra del testo. Si applica a qualsiasi elemento; il valore per difetto none; con capitalize si fa in modo che la prima lettera di ogni parola sia maiuscola. Si applica a elementi di blocco; il valore per difetto normal; con nowrap si evita che gli spazi facciano spezzare una riga; con pre si fa in modo che gli spazi e le righe vuote vengano mantenute e non compattate; con normal si ha il comportamento consueto del programma di navigazione relativamente agli spazi e righe vuote. Si applica a qualsiasi elemento; il valore per difetto normal. Si applica a qualsiasi elemento; il valore per difetto normal.

text-align:

Allineamento del testo Effetti speciali sul testo

Si

textdecoration:

none, underline, overline, line-through, blink

No

text-indent:

Indentazione della prima riga

valore o percentuale specicati come per i valori in font-size

Si

texttransform:

Capitalizzazione del testo

none, uppercase, lowercase, capitalize

Si

white-space:

Trattamento degli spazi vuoti

normal, nowrap, pre

No

word-spacing:

Controllo del tracking (spazio tra le parole) Controllo del kerning (spazio tra le lettere)

letter-spacing:

normal, valore espresso con una delle unit di misura citate in precedenza normal, valore espresso con una delle unit di misura citate in precedenza

Si

Si

I fogli di stile
Propriet Signicato Valori Ereditata Commento

77

vertical-align:

Allineamento verticale del testo

baseline, sub, super

No

Si applica a elementi in linea; il valore per difetto baseline; si noti che con sub e super si ottiene la trasformazione del testo in pedice e apice ma senza riduzione della dimensione dei caratteri, per la quale occorre intervenire con la propriet font-size.

Una osservazione importante riguarda la propriet font-family: possibile che si imposti un tipo di carattere non disponibile presso lelaboratore dellutente; in tal caso si pu includere il carattere nella pagina nel modo illustrato sotto:
|@font-face {font-family: pippo; src: url(pippo.eot);} |h1 {font-family: pippo;}

Nellesempio pippo.eot il le che contiene la denizione del carattere e che deve ovviamente essere presente nel servente Web. Inne importante segnalare che esistono anche propriet a sintassi abbreviata, come ad esempio font: o background:, con le quali si possono assegnare, scrivendoli separati da spazi, i valori elencati in precedenza e relativi rispettivamente ai font e allo sfondo.

4.3 Tipi di fogli di stile

I fogli di stile contengono delle denizioni di propriet da applicare a documenti HTML o a parti di essi e per questo devono essere associati al codice HTML; tale associazione pu avvenire in varie maniere e questo differenzia in modo abbastanza netto i tipi di CSS.

4.3.1 Fogli di stile in linea

In questo caso gli stili vengono assegnati direttamente agli elementi HTML a cui si vogliono applicare grazie allattributo style; ad esempio:
|<p style="font-size: 12px; color: #FF0000"> |Testo contenuto nel paragrafo |</p>

78

I fogli di stile

4.3.2 Fogli di stile incorporati

In questo caso i fogli di stile sono deniti allinterno della pagina con luso del tag <style>; esempio:
|<html> |<head> |<title>Esempio con foglio di stile |</title> |<style type="text/css"> |h1, h2 { text-transform: capitalize; | text-align: center; } |body { color: #10AA10; background-color: #C0C0C0; } |p.pippo { font-size: larger; | font-weight: bolder; | text-align: center; } |</style> |</head> |<body> |<h1> titolo di tipo h1 </h1> |<p> |Questo documento realizzato con un foglio di stile |incorporato.</p> |<p class="pippo"> Questo paragrafo |definito nel CSS come paragrafo di classe "pippo".</p> |<hr/> |<p> |Questo invece un paragrafo normale.</p> |</body> |</html>

Il risultato che si ottiene con il sorgente dellesempio mostrato in gura 4.18.

Figura 4.18. |

I fogli di stile

79

4.3.3 Fogli di stile collegati

Il modo migliore per associare un foglio di stile ad una pagina HTML quello di denirlo esternamente alla pagina stessa (come detto in precedenza questo permette di denire uno stile standard anche per un intero sito Web e di concentrare le modiche solo sul foglio di stile e non su tutte le pagine). Per il collegamento al foglio esterno si usa il tag <link> nella sezione di intestazione, con gli attributi href, rel e type; vediamo un esempio:
|<html> |<head> |<title>Esempio con foglio di stile esterno</title> |<link href="foglio1.css" rel="stylesheet" type="text/css"/> |</head>

Lattributo rel pu avere anche il valore "alternate stylesheet" per denire un foglio di stile alternativo; inoltre si pu aggiungere lattributo title per indicare il nome del foglio (questo utile nel caso i programmi di navigazione siano in grado di mostrare allutente la lista dei fogli di stile associati ad un documento permettendo di scegliere il preferito). Il foglio di stile a cui si riferisce lesempio si chiama foglio1.css e potrebbe avere il seguente contenuto (denito con un normale editor di testo):
|/* Esempio di foglio di stile | da collegare */ |@import url(http://www.maxplanck.it/libcss/foglio2.css) |h1, h2 { text-transform: capitalize; | text-align: center; } |body { color: #10AA10; background-color: #C0C0C0; } |p.pippo { font-size: larger; | font-weight: bolder; | text-align: center; }

Le righe racchiuse tra /* e */ sono un commento; il costrutto @import serve ad importare allinterno del foglio di stile ulteriori denizioni contenute nel foglio a cui fa riferimento lindirizzo specicato (in questo caso foglio2.css nella directory libcss del servente Web www.maxplanck.it; le altre denizioni sono le stesse utilizzate nellesempio con il CSS incorporato. Se, per qualche motivo, si avessero problemi con il collegamento dei fogli di stile si pu ricorrere allimportazione; a tale scopo basta usare il costrutto @import, in modo simile allesempio precedente, inserito per direttamente nel documento HTML, racchiuso tra un tag <style> e un </style>. A proposito del costrutto @import importante osservare che esso fa parte, insieme a @media, @charset, @font-face, delle cosiddette @-rules con le quali si possono fare alcune operazioni particolari. Fra queste, @media, riveste una notevole importanza per i CSS per la stampa, come mostrato nel paragrafo 4.5.

80

I fogli di stile

4.3.4 Organizzazione a cascata

Lorganizzazione a cascata dei fogli di stile consiste semplicemenite nel fatto che c un ordine di priorit tra regole di stile denite con tipi di CSS diversi; in altre parole se abbiamo un documento HTML in cui si utilizzano regole di stile denite in un foglio collegato, altre regole incorporate ed altre ancora in linea, in caso di conitto sono queste ultime ad essere applicate. Quindi le regole di stile in linea prevalgono su quelle incorporate (e importate) e queste a loro volta su quelle collegate. Questo fatto pu essere sfruttata quando, nella denizione degli stili delle pagine di un sito, si vogliono denire delle regole generali ma si vogliono avere delle eccezioni per alcune pagine; in tal caso si deniscono le regole globali in fogli collegati da usare in tutte le pagine, ma nelle pagine particolari si inseriscono delle regole di stile incorporate o in linea che sovrascrivono le altre.

4.3.5 Fogli di stile alternativi

In precedenza si visto come impostando lattributo rel del tag <link> con il valore "alternate stylesheet" sia possibile denire un foglio di stile alternativo da collegare a un certo documento HTML. Per maggiore completezza occorre chiarire che ad un documento HTML si possono collegare: un foglio di stile chiamato persistente, o di base, che viene applicato indipendentemente dalle preferenze degli utenti; tale foglio di stile viene collegato impostando il valore "stylesheet" nellattributo rel e senza attributo title; un foglio di stile chiamato automatico che viene applicato se lutente non fa alcuna scelta; tale foglio di stile viene collegato impostando il valore "stylesheet" nellattributo rel e un nome nellattributo title; uno o pi fogli di stile alternativi che vengono collegati impostando per ognuno il valore "alternate stylesheet" nellattributo rel e un nome univoco nellattributo title; lutente pu scegliere tra uno di questi e il foglio di stile automatico agendo su apposite voci di menu disponibili nei programmi di navigazione. Nel prossimo esempio abbiamo una pagina HTML cui sono collegati un foglio persistente, uno automatico e due fogli alternativi; nella gura 4.22 viene mostrato il menu di scelta degli stili disponibili al momento della visualizzazione di tale documento con il browser Firefox.
|<html> |<head><title>Esempio per collegamento fogli di stile</title> |<link rel="stylesheet" href="foglio_pers.css" type="text/css"/> |<link rel="stylesheet" href="foglio_auto.css" type="text/css"
title="Stile di default"/>

|<link rel="alternate stylesheet" href="foglio1.css" type="text/css"

title="Stile alternativo 1"/> title="Stile alternativo 2"/>

|<link rel="alternate stylesheet" href="foglio2.css" type="text/css" |</head> |<body> |<h1>Prova fogli di stile alternativi</h1> |Selezionare uno degli stili disponibile attraverso |lapposito menu nel programma di navigazione.

I fogli di stile
|<p></p> |</body> |</html>

81

Figura 4.22. |

4.4 Posizionamento con i fogli di stile

Per parlare di posizionamento con i fogli di stile occorre prima di tutto chiarire come questi ultimi considerano e gestiscono gli elementi presenti in una pagina; ogni elemento genera un riquadro rettangolare (o box) non visibile comprendente: larea del contenuto dellelemento; lo spazio tra il contenuto dellelemento e i bordi dellarea (padding); i bordi esterni dellarea (border); lo spazio intorno ai bordi (margin). Lunica parte sempre presente larea del contenuto, le altre possono essere impostate ad ampiezza nulla. Vediamo (o ricordiamo) anche altri concetti molto importanti riguardanti gli elementi di una pagina HTML. I riquadri degli elementi possono essere di blocco o in linea, con le conseguenze che questo comporta e che sono gi state chiarite in precedenza (paragrafo 2.5.4). Gli elementi possono essere non rimpiazzati o rimpiazzati; nel primo caso il contenuto si trova allinterno del riquadro, nel secondo il tag solo un segnaposto per un altro oggetto (lesempio pi banale di questo tipo di elemento <img>). Ogni elemento contenuto in un blocco contenitore, ad esempio:
|<body> |<div> |<h1>Titolo</h1> |<p>Testo</p>

82
|</div> |</body> |</html>

I fogli di stile

qui i tag <h1> e <p> hanno <div> come blocco contenitore ed esso, a sua volta contenuto in <body>. Il usso di visualizzazione di un documento HTML da sinistra a destra e dallalto verso il basso, questo il comportamento normale di tutti i browser almeno per le lingue occidentali; un elemento pu essere estrapolato dal usso normale solo posizionandolo oppure rendendolo uttuante con la propriet float. Nel resto del paragrafo vediamo appunto le propriet dei CSS da utilizzare per il posizionamento oltre a quelle riguardanti le varie caratteristiche dei box degli elementi. Il posizionamento pu essere: statico, quello applicato per difetto; lelemento rimane nel usso normale del testo; relativo; lelemento risulta spostato rispetto a quella che sarebbe stata la sua posizione naturale; assoluto; lelemento rimosso dal usso e posizionato specicando le coordinate rispetto al suo blocco contenitore, cio allantenato pi prossimo posizionato non staticamente (in assenza viene considerato come contenitore il documento); sso; come per assoluto ma considerando come blocco contenitore la nestra del browser. In caso alcuni riquadri si sovrappongano, anche possibile ordinarli in base allasse perpendicolare allarea di visualizzazione, immaginando che il documento sia costituito da livelli sovrapposti. Esiste inne la possibilit di rendere lelemento uttuante, cio di spostarlo dal normale usso, ma facendo in modo che esso inuisca ancora sul resto del testo (che solitamente gli viene fatto scorrere intorno). In ogni caso con i CSS si ottiene un tipo di posizionamento che viene detto liquido in quanto tiene conto automaticamente del variare delle dimensione dellarea di visualizzazione della pagina (nestra del browser dellutente). Come abbiamo fatto nel paragrafo 4.2.2 relativamente agli stili per la formattazione del testo, ricorriamo anche qui ad una tabella per elencare le propriet riguardanti il posizionamento dei riquadri e le loro caratteristiche.
Propriet Signicato Valori auto, valore espresso con una delle unit di misura consentite o in percentuale auto, valore espresso con una delle unit di misura consentite Ereditata Commento Si applica a elementi di blocco e rimpiazzati; il valore per difetto auto; il valore in percentuale calcolato in base allelemento contenitore. Si applica a elementi di blocco e rimpiazzati; il valore per difetto auto;

width:

Larghezza di un elemento

No

height:

Altezza di un elemento

No

I fogli di stile
Propriet Signicato Valori Ereditata Commento

83

visibility:

Visibilit di un elemento

visible, hidden

No

border-color:

Colore dei bordi di un riquadro

transparent, codice colore in esadecimale o mnemonico

No

Si applica a qualsiasi elemento; il valore per difetto visible; un elemento nascosto risulta comunque presente (cio inuenza comunque il comportamento degli elementi vicini). Si applica a qualsiasi elemento; il valore per difetto il colore dellelemento contenuto; se si inserisce un solo colore esso vale per tutti e quattro i bordi, altrimenti si possono inserire quattro colori separati da spazi relativi nellordine a: bordo alto, bordo destro, bordo basso, bordo sinistro (oppure si possono usare le propriet speciche border-top-color,
border-right-color border-bottom-color border-left-color).

border-style:

Stile dei bordi di un riquadro

none, dotted, dashed, solid, double, groove, ridge, inset, outset

No

Si applica a qualsiasi elemento; il valore per difetto none; se si inserisce un solo stile esso vale per tutti e quattro i bordi, altrimenti si possono inserire quattro stili separati da spazi relativi nellordine a: bordo alto, bordo destro, bordo basso, bordo sinistro (oppure si possono usare le propriet speciche border-top-style,
border-right-style border-bottom-style border-left-style).

84
Propriet Signicato Valori Ereditata Commento

I fogli di stile

border-width:

Spessore dei bordi di un riquadro

thin, medium, thick, valore espresso con una delle unit di misura consentite

No

Si applica a qualsiasi elemento; il valore per difetto medium; se si inserisce un solo valore o codice esso vale per tutti e quattro i bordi, altrimenti si possono inserire quattro valori o codici separati da spazi relativi nellordine a: bordo alto, bordo destro, bordo basso, bordo sinistro (oppure si possono usare le propriet speciche border-top-width,
border-right-width border-bottomwidth border-left-width).

margin:

Ampiezza dei margini di un riquadro

auto, valore espresso con una delle unit di misura consentite o in percentuale

No

Si applica a qualsiasi elemento; il valore per difetto 0; valori in percentuale vengono calcolati in base alla larghezza dellelemento genitore; se si inserisce un solo valore esso vale per tutti e quattro i margini, altrimenti si possono inserire quattro valori separati da spazi relativi nellordine a: margine alto, destro, basso, sinistro (oppure si possono usare le propriet speciche margin-top,
margin-right margin-bottom margin-left).

I fogli di stile
Propriet Signicato Valori Ereditata Commento

85

padding:

Ampiezza del padding di un riquadro

valore espresso con una delle unit di misura consentite o in percentuale

No

Si applica a qualsiasi elemento; il valore per difetto 0; valori in percentuale vengono calcolati in base alla larghezza dellelemento genitore; se si inserisce un solo valore esso vale per tutti e quattro i lati, altrimenti si possono inserire quattro valori separati da spazi relativi nellordine a: padding alto, destro, basso, sinistro (oppure si possono usare le propriet speciche padding-top,
padding-right padding-bottom padding-left).

position:

posizionamento di un riquadro Scostamento in basso di un riquadro posizionato Scostamento a sinistra di un riquadro posizionato Scostamento a destra di un riquadro posizionato Scostamento in alto di un riquadro posizionato

static, relative, absolute, xed auto, valore espresso con una delle unit di misura consentite o in percentuale auto, valore espresso con una delle unit di misura consentite o in percentuale auto, valore espresso con una delle unit di misura consentite o in percentuale auto, valore espresso con una delle unit di misura consentite o in percentuale

No

bottom:

No

left:

No

right:

No

top:

No

z-index:

Posizionamento sullasse perpendicolare allarea di visualizzazione

auto, numero intero

No

Si applica a qualsiasi elemento; il valore per difetto static. Si applica a qualsiasi elemento posizionato (con valore di position diverso da static); il valore per difetto auto. Si applica a qualsiasi elemento posizionato (con valore di position diverso da static); il valore per difetto auto. Si applica a qualsiasi elemento posizionato (con valore di position diverso da static); il valore per difetto auto. Si applica a qualsiasi elemento posizionato (con valore di position diverso da static); il valore per difetto auto. Si applica a qualsiasi elemento posizionato (con valore di position diverso da static); il valore per difetto auto; i riquadri con valori di z-index alti sono pi vicini allutente di quelli con valori bassi. Si applica a qualsiasi elemento; il valore per difetto none.

oat:

Direzione di spostamento di un elemento uttuante

none, left, right

No

86
Propriet Signicato Valori Ereditata Commento

I fogli di stile

clear:

Controllo scorrimento elementi uttuanti

none, left, right, both

No

overow:

Modalit di gestione del traboccamento del testo

visible, hidden, scroll, auto

No

clip:

Denizione di unarea di taglio

auto, rect(valore_su, valore_dx, valore_giu, valore_sx)

No

Si applica a elementi di blocco; il valore per difetto none; si usa per impedire che elementi uttuanti compaiano a sinistra, a destra o da entrambi i lati dellelemento cui si assegna questa propriet (tale elemento si posizioner quindi dopo eventuali elementi uttuanti e non accanto ad essi). Si applica a elementi di blocco e rimpiazzati; il valore per difetto visible; con visible il contenuto che eccede le dimensioni del contenitore viene reso comunque visibile adattando queste ultime, con hidden invece nascosto, con scroll e auto vengono aggiunte delle barre di scorrimento sul riquadro, nel primo caso sempre, nellaltro solo se necessario. Si applica a elementi posizionati in modo assoluto; il valore per difetto auto; si usa per denire unarea rettangolare in cui reso visibile il contenuto del riquadro; il contenuto eccedente viene trattato in base a quanto stabilito con la propriet overflow.

Prima di concludere osserviamo che per utilizzare procuamente i fogli di stile per il posizionamento degli elementi di un documento HTML opportuno usare abbondantemente il tag <div> in modo da denire le sezioni della pagina cui applicare le necessarie regole di stile. Questa non deve essere per una forzatura: una buona suddivisione del documento in sezioni, che tenga conto correttamente della sua struttura logica, sar quasi sicuramente idonea anche alluso per lassegnazione degli stili di formattazione e di posizionamento. Inne vediamo due esempi molto simili di pagine contenenti un riquadro di testo con gestione del traboccamento dello stesso, tre immagini con relative didascalie posizionate con precisione e una immagine uttuante contornata da testo sulla sua destra o sulla sua sinistra. Il tutto realizzato con regole di stile di un foglio incorporato, nel primo caso usando il posizionamento relativo nellaltro il posizionamento assoluto. La scelta del CSS di tipo incorporato dettata solo da ragioni di praticit: in questo modo infatti, per ognuno dei due esempi, sufciente mostrare il sorgente HTML e non pi le separati.

I fogli di stile Vediamo il primo esempio:

|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | "http://www.w3.org/TR/html4/strict.dtd"> |<html> |<head> |<title>Posizionamento relativo con CSS |</title> |<style type="text/css"> |body { font-family: "DejaVu Sans"; font-size: 14px; } |h1.titolo { color: green; | font-style: italic; | text-align: center; } |.box_immagini { position: relative; | top: 0px; | left: 50px; } |.box_fluttua { width: 350px; | height: 100px; } |.fluttua { float: left; | margin-top: 5px; | margin-right: 15px; | width: 140px; | height: 120px; } |.riga11 { position: relative; | top: 0%; | left: 0%; | width: 120px; | height: 135px; } |.riga12 { position: relative; | top: 0%; | left: 20%; | width: 120px; | height: 135px; } |.riga13 { position: relative; | top: 0%; | left: 40%; | width: 180px; | height: 135px; } |.riga21 { position: relative; | top: 0%; | left: 0%; | margin-top: 10px; | width: 120px; | height: 15px; | text-align: center; } |.riga22 { position: relative; | top: -2em; | left: 33%; | margin-top: 10px; | width: 120px; | height: 15px; | text-align: center; } |.riga23 { position: relative; | top: -4em; | left: 66%;

87

88

I fogli di stile

| margin-top: 10px; | width: 180px; | height: 15px; | text-align: center; } |p.testo { width: 300px; | height: 100px; | overflow: auto; } |</style> |</head> |<body> |<h1 class="titolo">Prova di posizionamento relativo con CSS</h1> |<p class="testo"> |Le tre immagini seguenti con le relative didascalie sono |posizionate con la propriet position dei CSS e posizionamento |relativo. Limmagine successiva fluttuante a sinistra ed |inserita dopo la parola "fluttuante".</p> |<div class="box_immagini"> | <img class="riga11" src="tux.jpg"/> | <img class="riga12" src="tux_univ.jpg"/> | <img class="riga13" src="Family_linux.png"/> |</div> |<p/> |<p class="riga21"> | Tux</p> |<!-- Le ultime due didascalie sono posizionate correttamente in |verticale ricorrendo a un posizionamento relativo negativo rispettivamente |di -2 e -4 em cio 2 volte e 4 volte lampiezza media del carattere |usato; questo le fa allineare alla prima didascalia. --> | <p class="riga22"> | Tux laureato</p> | <p class="riga23"> | Tux family</p> |<div class="box_fluttua"> | <p>Questa immagine fluttuante, | <img class="fluttua" src="Linux-Inside-small.gif"/> | a sinistra; quindi il testo si affianca alla sua destra.</p> |</div> |</body> |</html>

Il risultato che si ottiene mostrato nella gura 4.26.

Figura 4.26. |

I fogli di stile

89

Ecco invece il sorgente del secondo esempio:

|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | "http://www.w3.org/TR/html4/strict.dtd"> |<html> |<head> |<title>Posizionamento assoluto con CSS |</title> |<style type="text/css"> |h1.titolo { color: blue; | font-style: italic; | text-align: center; } |.box_immagini { position: relative; | top: 1px; | left: 15px; | width: 66%; | height: 50%; } |.box_fluttua { position: relative; | top: 180px; | left: 50px; | width: 350px; } |.fluttua { float: right; | margin-top: 5px; | margin-right: 15px; | width: 140px; | height: 120px; } |img.dim1 { width: 120px; | height: 135px; } |img.dim2 { width: 180px; | height: 135px; } |.riga11 { position: absolute; | top: 0%; | left: 0%; } |.riga12 { position: absolute; | top: 0%; | left: 33%; } |.riga13 { position: absolute; | top: 0%;

90

I fogli di stile

| left: 66%; } |.riga21 { position: absolute; | top: 135px; | left: 0%; | margin-top: 5px; } |.riga22 { position: absolute; | top: 135px; | left: 33%; | margin-top: 5px; } |.riga23 { position: absolute; | top: 135px; | left: 66%; | margin-top: 5px; } |p.testo { width: 300px; | height: 100px; | overflow: auto; } |</style> |</head> |<body> |<h1 class="titolo">Prova di posizionamento assoluto con CSS</h1> |<p class="testo"> |Le tre immagini seguenti con le relative didascalie sono |posizionate con la propriet position dei CSS e posizionamento |assoluto. Limmagine successiva fluttuante a destra |ed inserita dopo la parola "fluttuante".</p> |<div class="box_immagini"> |<!-- le immagini e le didascalie sono ognuna in una sezione |figlia della sezione box_immagini che non posizionata |staticamente (position:relative) e quindi ha effetto il posizionamento |assoluto rispetto a questa ultima. --> | <div class="riga11"> | <img class="dim1" src="tux.jpg"/> | </div> | <div class="riga12"> | <img class="dim1" src="tux_univ.jpg"/> | </div> | <div class="riga13"> | <img class="dim2" src="Family_linux.png"/> | </div> | <div class="riga21"> | <p>Tux</p> | </div> | <div class="riga22"> | <p>Tux universitario</p> | </div> | <div class="riga23"> | <p>Tux family</p> | </div> |</div> |<div class="box_fluttua"> |<!-- La sezione box_fluttua posizionata relativamente con |uno scostamento verticale tale da "scavalcare" immagini e didascalie --> |<p>Questa immagine fluttuante, |<img class="fluttua" src="Linux-Inside-small.gif"/>

I fogli di stile
|a destra; quindi il testo si affianca alla sua sinistra.</p> |</div> |</body> |</html>

91

Il risultato che si ottiene mostrato nella gura 4.28.

Figura 4.28. |

Si possono confrontare i risultati di questi due esempi con la pagina, simile, presentata nel paragrafo 3.2.4 ottenuta posizionando gli elementi tramite una tabella.

4.5 Fogli di stile per la stampa

Una delle caratteristiche pi interessanti dei CSS la loro capacit di denire stili diversi per mezzi di comunicazione diversi; possibile infatti associare allo stesso documento HTML un foglio di stile dedicato alla visualizzazione a video, uno per la stampa su carta, uno per dispositivi portatili (palmari), uno per alfabeto braille ed altri ancora. In queste dispense si prende in esame solo il caso della stampa su carta che riveste sicuramente una notevole importanza viste le difcolt che di solito si incontrano quando si stampano documenti visualizzati con un programma di navigazione. Le pagine Web, infatti, sono quasi sempre concepite e realizzate per essere visualizzate a video e quindi contengono tutta una serie di oggetti e di formattazioni che al momento della stampa sono inutili se non addirittura dannosi; pensiamo ad esempio a barre di scorrimento, barre contenenti menu, immagini di sfondo, sfondi colorati. C poi il caso, abbastanza comune, di pagine impostate con larghezza ssa maggiore di quella dei fogli A4 e che quindi risultano tagliate a destra quando trasferite su carta. A questi inconvenienti possibile dare una soluzione anche senza luso dei CSS; basta infatti predisporre versioni diverse della stessa pagina: una per il video e una per la stampa, premunendosi di inserire nella prima un collegamento alla seconda a disposizione dellutente e da utilizzare al momento di effettuare la stampa.

92

I fogli di stile

In questo modo abbiamo per un notevole aggravio di lavoro per la scrittura di una doppia versione delle pagine del sito, senza contare poi che lutente potrebbe non notare il collegamento alla versione da stampare e continuare quindi a usare la versione sbagliata. Meglio quindi ricorrere ai CSS tanto pi che lidea di base la stessa: una pagina (o meglio, un foglio di stile) per il video e una per la carta, solo che stavolta la scelta viene fatta in automatico dal programma di navigazione al momento che si decide di mandare in stampa il documento.

4.5.1 Fogli di stile per media diversi

La specica del mezzo di comunicazione cui rivolto un foglio di stile avviene nel seguente modo: per i fogli collegati con lattributo media del tag <link>; ad esempio:
|<link rel="stylesheet" type="text/css" href="stile_video.css" media="screen"> |<link rel="stylesheet" type="text/css" href="stile_carta.css" media="print">

per i fogli incorporati con il costrutto @media; ad esempio:

|<style type="text/css"> |@media screen { | /* regole di stile per il video */ |} |@media print { | /* regole di stile per la stampa su carta */ |} |</style>

per i fogli importati:

|<style type="text/css"> |@import url(stile_video.css) screen; |@import url(stile_carta.css) print; |</style>

Oltre ai media video e stampa sono previste altre possibilit che per sono molto meno usate e anche meno supportate dai vari browser; il pieno supporto si ha per screen, print e all che il valore assegnato per difetto e signica che quel foglio di stile si applica a qualsiasi mezzo di comunicazione. Lelenco completo dei media utilizzabili il seguente: all; aural: dispositivi di sintesi vocale; braille; embossed: stampanti braille; handheld: palmari; print;

I fogli di stile projection: proiezioni a tutto schermo; screen; tty: terminali a caratteri; tv: web tv.

93

Quando si deniscono i fogli di stile per il video e la stampa occorre fare in modo che non risultino collegati al documento HTML anche fogli di stile per qualsiasi media perch le impostazioni presenti in essi avrebbero effetto anche sul documento stampato, con effetti potenzialmente deleteri.

4.5.2 Impostazione di un foglio di stile per la stampa

Prima di tutto occorre osservare che per poter denire procuamente un foglio di stile per la stampa occorre che il documento HTML contenga solo tag relativi alla sua struttura e non alla formattazione e presentazione; infatti, solo se queste ultime sono completamente demandate a regole di stile, possibile alterare laspetto della pagina semplicemente cambiando il CSS collegato. Nel foglio di stile per la stampa occorre eliminare gli elementi che non hanno senso per questo tipo di output associando ad essi la propriet display con valore none; si possono poi ridimensionare e riposizionare gli altre elementi per sfruttare lo spazio guadagnato. Sicuramente utile anche eliminare colori e immagini di sfondo, denendo il documento con caratteri neri su fondo bianco e togliere eventuali impostazioni della dimensione della pagina lasciando che il browser possa sfruttare tutta la dimensione del foglio in stampa. Anche la scelta del tipo di carattere importante: sullo schermo si preferiscono di solito caratteri senza grazie (sans-serif ) come Arial e Verdana; per la stampante invece meglio usare caratteri con grazie (serif ) come Times o Georgia. Per esprimere la dimensione dei caratteri (e tutte le altre grandezze assolute) per la stampa preferibile abbandonare i pixel a vantaggio di altre unit di misura pi legate al mezzo cartaceo come i punti (pt), i millimetri (mm) o i pollici (in); inoltre, visto che la lettura su carta meno faticosa che sullo schermo, possibile diminuire la dimensione dei caratteri per risparmiare carta e inchiostro. Tra gli elementi che non hanno grande utilit passando dallo schermo alla carta ci sono i collegamenti ipertestuali che, ovviamente, sul foglio non possono essere attivati. Per essi pu allora essere utile far apparire in stampa lindirizzo a cui puntano nel modo seguente:
|a:link:after, a:visited:after {content " ["attr(href)"]";}

In questo modo, dopo ogni collegamento, visitato o no, viene stampato lindirizzo a cui esso punta, racchiuso tra parentesi quadrate. Inne segnaliamo la possibilit di controllare le interruzioni di pagina in stampa grazie alle propriet page-break-before, page-break-after, page-break-inside che possono valere auto (valore per difetto), always, avoid in modo da forzare o evitare interruzioni prima, dopo o allinterno di un certo blocco.

94

I fogli di stile

Parte iii

Il Web dinamico

95

96

97

Capitolo

Introduzione al Web dinamico

Tra i documenti del Web esiste una importante suddivisione: ci sono pagine statiche, di cui ci siamo occupati no a questo momento, e pagine dinamiche che ci accingiamo a esaminare nel presente capitolo. La spiegazione del signicato dei due termini molto importante anche perch permette di chiarire che le pagine dinamiche non sono assolutamente quelle che contengono oggetti in movimento (come ad esempio immagini gif animate) ma sono qualcosa di molto pi sosticato. Un documento statico quando viene denito una volta per tutte e messo a disposizione degli utenti in una forma che non concede loro la possibilit di alterazioni; il contenuto e laspetto della pagina possono essere variati solo dalle persone responsabili del sito di cui essa fa parte. Un documento invece dinamico quando viene creato, tutto o in parte, in seguito ad operazioni interattive svolte dallutente. Un esempio classico quello di una persona che richiede sul sito Internet di una azienda informazioni su un prodotto da essa commercializzato inserendo i parametri di ricerca in una pagina denita a tale scopo; i dati vengono inviati al servente Web dellazienda che interroga la base di dati dei prodotti e costruisce al volola pagina HTML di risposta da inviare al browser dellutente. La tecnologia che per prima ha permesso la realizzazione di documenti Web dinamici stata la CGI (Common Gateway Interface); si tratta di un protocollo standard che descrive come un servente Web possa invocare programmi esterni per elaborare dati ricevuti dallutente ed inseriti in appositi moduli deniti in pagine HTML. Ulteriori possibilit di creazione di pagine Web dinamiche sono offerte dalle applet Java, dagli script attivi scritti con linguaggi di scripting come JavaScript, dal linguaggio PHP. Vediamo una prima classicazione di questi strumenti in base alle loro caratteristiche: una applicazione CGI pu essere scritta con uno qualsiasi dei linguaggi di programmazione esistenti, anche quelli pi tradizionali come c o Fortran; lato servente (serverside) in quanto viene eseguita sulla macchina in cui risiede il servente Web ed esterna, cio sicamente scritta in un le separato da quello contenente il codice della pagina HTML; le applet e gli script attivi sono lato cliente (client-side) cio eseguiti sulla macchina in cui in esecuzione il programma di navigazione; le prime sono esterne i secondi invece sono incorporati (embedded) in quanto il loro codice scritto allinterno dello stesso le che contiene il sorgente HTML; gli script PHP, inne, sono lato servente e incorporati. Anche il linguaggio HTML mette a disposizione degli strumenti utili alla denizione di documenti dinamici: i form o moduli, grazie ai quali possono essere raccolti i dati immessi dagli utenti. Iniziamo lesame delle pagine interattive proprio dai moduli illustrandone luso in associazione ai programmi o agli script CGI. Gli argomenti successivi sono: linterfacciamento alle basi di dati con PHP, gli script attivi, le applet, alcuni cenni al dynamic HTML, alle servlet Java e al Web ad oggetti. Non vengono invece prese in considerazione soluzioni proprietarie come le pagine ASP (Active Server Page).

98

Introduzione al Web dinamico

99

Capitolo

Moduli e programmi CGI

I moduli si deniscono in un documento HTML con il tag <form> ma la loro gestione, o meglio, la gestione dei dati in essi contenuti, non avviene con gli strumenti dellHTML ma grazie a dei programmi esterni chiamati programmi o script CGI. Occorre quindi esaminare due aspetti distinti: denizione in HTML degli elementi che compongono il modulo; scrittura, in linguaggio di programmazione, del programma che deve gestire i dati immessi con il modulo. Pi in dettaglio, la corretta gestione di un modulo passa attraverso le seguenti fasi: inserimento nella pagina HTML dei tag per la denizione del modulo; indicazione, tramite un attributo dellelemento <form>, del nome del programma esterno che deve elaborare i dati; visualizzazione del modulo da parte del browser con raccolta degli input dellutente e invio degli stessi al servente Web; attivazione, da parte del servente Web, del programma indicato; ad esso vengono forniti i dati ricevuti dal modulo; elaborazione dei dati da parte del programma; restituzione dei risultati al programma di navigazione, solitamente tramite la creazione di una nuova pagina Web da visualizzare. La gura 6.1 schematizza le fasi appena illustrate.
Figura 6.1. |

I CGI si differenziano in due categorie in base al linguaggio di programmazione utilizzato per realizzarli: programmi CGI, se si usano linguaggi compilati come c, c++, Java;

100

Moduli e programmi CGI

script CGI, se si usano linguaggi interpretati come Perl, shell di Unix o Linux, Python. Nel proseguo usiamo indifferentemente il termine programma CGI, o anche solo CGI, per riferirci ad entrambe le tipologie di strumenti. Nei prossimi paragra esaminiamo le due fasi della gestione di un modulo: la sua denizione in HTML e lelaborazione dei dati con i programmi CGI.

6.1 Creazione di moduli HTML

I moduli iniziano con il tag <form> e terminano con </form>; si tratta di un elemento di blocco che pu contenere qualsiasi altro elemento ma non altri moduli; i suoi attributi sono: action, per specicare lURI a cui inviare i dati del form; method, per specicare lazione da svolgere sui dati; i valori possibili sono "get" o "post"; enctype, per indicare il tipo di MIME usato per il trasferimento delle informazioni; target, per denire una nuova nestra dove visualizzare la risposta elaborata dal CGI. Esistono poi i cosiddetti attributi di evento come onmouseover, onclick, onsubmit, onreset che per vengono solitamente gestiti con gli script attivi. Gli attributi pi importanti sono action e method. Il valore di action corrisponde allindirizzo a cui inviare i dati; pu essere o un indirizzo di posta elettronica o il nome del programma CGI (completo di percorso) che dovr ricevere ed elaborare in qualche modo i dati del form. Il valore di method pu essere "get" oppure "post"; nel primo caso i dati vengono accodati allURI indicato in action, nel secondo caso i dati vengono passati attraverso lo standard input al servente. Questi aspetti vengono ripresi e approfonditi nel paragrafo 6.8 relativo al passaggio dei dati di un modulo a un programma CGI. Riguardo allattributo enctype opportuno soffermarsi brevemente sui tipi MIME (Multipurpose Internet Mail Extension) creati originariamente per descrivere gli allegati di posta elettronica e ora usati, pi generalmente, per riconoscere la natura dei le presenti sul Web. Sono composti da due parti: tipo-principale/tipo-specico, come ad esempio: image/gif (immagini di tipo gif), text/plain (testo puro) e molti altri. Elenchi completi di tipi MIME si trovano facilmente in Internet, ad esempio allindirizzo http:// www.asciitable.it/mimetypres.asp . Il tipo di MIME da usare per trasferire i dati dal modulo al servente Web : application/x-www-form-urlencoded e deve essere specicato solo nel caso si usi il metodo "post"; questo valore comunque quello attribuito per difetto allattributo enctype. In pratica serve a comunicare al servente che i dati saranno inviati attraverso lo standard input ma codicati alla stessa maniera di quando sono inviati accodati allURI.

Moduli e programmi CGI

101

6.2 Controlli dei moduli

Gli elementi specici usati allinterno dei moduli sono tag di testo chiamati controlli; i pi importanti sono: <input>, per creare vari tipi di input diversi; <select>, per creare menu a scorrimento le cui opzioni sono indicate con il tag <option>; <textarea>, per limmissione di testo esteso; <fieldset>, per raggruppare pi controlli di un modulo. I primi tre prevedono lattributo name che permette di indicare il nome della variabile o del campo che contraddistingue lelemento in questione. Talvolta si utilizza anche lattributo value per assegnare un valore alla variabile o al campo; pi spesso per il valore assunto corrisponde a ci che lutente ha digitato o scelto in corrispondenza di quel campo. Il nome ed il valore dei campi sono naturalmente di fondamentale importanza per il programma CGI che deve elaborare i dati inviati dal modulo; in pratica siamo in presenza della distinzione tra nome e contenuto di una variabile, ben nota a chi conosca i rudimenti della programmazione.

6.2.1 Elemento input

Vediamo prima di tutto un esempio molto semplice di modulo con un campo di input:
|<html> |<head> |<title>Esempio di modulo</title> |</head> |<body> |<h4>ESEMPIO DI INPUT CON RICHIAMO DI PROGRAMMA CGI</h4> |<form action="/cgi-bin/cgi-prova.sh" method="get"> |<p/><br/><b>Inserire dato da passare al programma&nbsp;&nbsp;</b> |<input type="text" name="datoin" size="5" maxlentgh="3"/> |<input type="submit" value="Invio"/> |</form> |</body> |</html>

Laspetto del modulo quello mostrato in gura 6.3.

Figura 6.3. |

102

Moduli e programmi CGI

In questo esempio si chiede linserimento di un dato che viene passato con metodo "get" al programma "cgi-prova.sh" (presumibilmente scritto con i comandi della shell di GNU/Linux o Unix, data lestensione .sh) residente nella directory /cgi-bin. Il dato viene identicato come "datoin" dal programma, viene immesso in una casella lunga cinque caratteri ma pu essere lungo al massimo tre caratteri. Linvio dei dati avviene premendo sul pulsante denito dal controllo "submit"; in questo esempio tale controllo non ha lattributo name che pu servire nel caso si debbano distinguere pi pulsanti di invio presenti in uno stesso modulo. Tra gli attributi di <input> il pi importante type, il cui valore permette di denire vari tipi di controlli: "submit", crea un pulsante da usare per linvio dei dati; "reset", crea un pulsante per la reinizializzazione dei campi del modulo; "text", crea un campo di testo di una sola riga; "radio", crea un pulsante di opzioni; "checkbox", crea una casella di selezione "image", come "submit" ma con una immagine al posto del pulsante; "hidden", crea un elemento che non appare nel modulo ma ha un nome e un valore; "password", crea un campo per limmissione di password in cui i dati immessi sono visualizzati come asterischi; "button", crea un pulsante generico denito e gestito dal programmatore; "le", usato per inviare un le insieme ai dati del modulo. Nei prossimi due esempi sono presenti tutti i controlli della lista ancora non esaminati (ad eccezione di "button" che viene usato in seguito) nonch altri possibili attributi del tag <input>:
|<html> |<head><title>Esempio con controlli vari</title></head> |<body> |<div align="center"><b>Esempio con controlli vari</b></div> |<p/> |<form action="/cgi-bin/cgi-prova.sh" method="get"> |<input type="hidden" name="nascosto" value="aaa"/> |<p>Fascia di et:</p> |<p><input type="radio" name="fascia" value="0-15"/>0-15</p>

Moduli e programmi CGI

|<p><input type="radio" name="fascia" value="16-30" checked/>16-30</p> |<p><input type="radio" name="fascia" value="30-50"/>30-50</p> |<p><input type="radio" name="fascia" value="50-99"/>50-99</p> |<p/> |Seleziona i tuoi campi di interesse: |<p/> |<input type="checkbox" name="int" value="computer" checked/>&nbsp;Computer |<input type="checkbox" name="int" value="musica"/>&nbsp;Musica |<input type="checkbox" name="int" value="sport"/>&nbsp;Sport |<p/> |Inserisci la password:&nbsp; |<input type="password" name="psw" size="8" maxlength="8"/> |<p/> |<input type="image" src="tux.jpg" width="50" height="55" |title="Premi qui per inviare i dati" alt="Invio" align="right"/></p> |<p><input type="reset" value="Pulisci campi"/></p> |</form> |</body> |</html>

103

Laspetto di questo modulo quello della gura 6.5.

Figura 6.5. |

Alcuni degli attributi utilizzati in questo esempio sono di immediata comprensione, anche perch gi visti in precedenza (come src, alt, align). Lattributo checked viene usato in caso di controlli che prevedono pi alternative per preimpostarne una o alcune. I controlli "hidden" possono essere utili nel caso si debbano inviare dei dati ssi al programma CGI senza che lutente possa vederli e tantomeno variarli. Linvio dei dati del modulo avviene cliccando sullimmagine che appare in fondo a destra.
|<html> |<head><title>Esempio con trasferimento di file</title></head> |<body>

104

Moduli e programmi CGI

|<div align="center"><b>Trasferimento di file</b> |</div> |<p/> |<form enctype="multipart/form-data" action="/cgi-bin/cgi-prova.sh"> |<p/> |File da inviare:&nbsp;<input type="file" name="file"/> |<p/> |<input type="submit" size="5" value="Invio"/> |</form> |</body> |</html>

Questo modulo ha laspetto mostrato in gura 6.7.

Figura 6.7. |

Il controllo "le" permette di inviare un le al programma CGI; presenta un bottone "Browse" o "Sfoglia", inserito automaticamente, per permettere la ricerca del le nellambito della macchina locale. Si noti che in questo contesto si deve valorizzare lattributo enctype con "multipart/formdata".

6.2.2 Lelemento select

Con il tag <select> si crea un menu a cascata le cui opzioni sono indicate ognuna con un tag <option> e la cui denizione si conclude con </select>. Il tag <select> prevede obbligatoriamente lattributo name; altri attributi utilizzabili in questo contesto sono: size (attributo di select), per indicare il numero di voci di menu visibili contemporaneamente; multiple (attributo di select), per dare la possibilit allutente di selezionare pi di una voce; selected (attributo di option), per indicare una voce selezionata per difetto; value (attributo di option), per indicare un testo, associato alla scelta effettuata, da inviare al programma CGI; in assenza di tale attributo, il testo inviato coincide con il nome dellopzione.

Moduli e programmi CGI

105

6.2.3 Lelemento textarea

Con il tag <textarea> si pu creare una casella di testo contenente pi righe. Si deve chiudere con </textarea> ed obbligatorio lattributo name. Ci sono anche gli attributi rows e cols con i quali si indica lampiezza della casella di testo senza per limitare la quantit di caratteri inseribili; quasi tutti i browser infatti inseriscono le barre di scorrimento a sinistra ed in basso in caso la quantit di caratteri immessi superi la dimensione della casella. Si pu inoltre denire un testo pre-inserito semplicemente scrivendolo tra i tag <textarea> e </textarea>. Nel seguente esempio viene mostrato luso di un menu a cascata e di una casella di testo.
|<html> |<head><title>Esempio con menu a cascata e casella di testo</title> |</head> |<body> |<div align="center"><b>Esempio con menu a cascata e casella di testo</b> |</div> |<p/> |<form action="/cgi-bin/cgi-prova.sh" method="post"> |Componenti da acquistare:<p/> |<select name="comp" multiple size="6"> |<option selected>Main board</option> |<option selected>Cpu</option> |<option selected>Ram</option> |<option>Floppy disk 120 Mb</option> |<option>Floppy disk 1,44 Mb</option> |<option>Hard disk IDE</option> |<option>Hard disk SCSI</option> |<option>Scheda video</option> |<option>Scheda audio</option> |</select> |<p/> |Inserire un commento<p/> |<textarea name="commento" rows="5" cols="50"> |Testo inserito preventivamente |</textarea> |<p/> |<input type="submit" value="Invio"/> |</form> |</body> |</html>

Il modulo che si ottiene quello della gura 6.9.

106
Figura 6.9. |

Moduli e programmi CGI

6.2.4 Raggruppamento e ordinamento dei controlli di un modulo

Con lelemento <fieldset> si possono raggruppare, incorniciandoli automaticamente, pi controlli di un modulo, tutti quelli presenti no al tag di chiusura </fieldset>; allinterno si pu usare il tag <legend> per aggiungere una legenda posizionandola con lattributo align. Resta inne da segnalare lattributo tabindex, utilizzabile per tutti i controlli di un modulo, con il quale si pu cambiare lordine di selezione degli stessi assegnandogli un valore intero. Valori alti hanno la precedenza rispetto a quelli bassi o negativi; in caso di assenza di questo attributo, lordine di selezione dei controlli corrisponde a quello di inserimento allinterno del modulo: dallalto in basso e da sinistra verso destra.

6.3 Lattributo accesskey

Lattributo accesskey pu essere usato con i controlli <input>, <textarea>, <button> e anche con i tag per i collegamenti <a> e <area>; il suo scopo quello di denire una scorciatoia da tastiera per attivare il controllo o il collegamento. Il suo uso molto banale, come mostrato nel seguente esempio riguardante un controllo per linvio dei dati di un modulo:
|<input type="submit" value="[I]nvio" accesskey="I"/>

In questo modo diventa possibile attivare linvio dei dati, oltre che come di consueto attraverso il mouse, anche con la tastiera; la modalit di selezione della scorciatoia dipende dal browser utilizzato. Nel nostro esempio, in cui la scorciatoia il carattere I, se usiamo Firefox si devono premere i tasti [ Shift+Alt+I ], se usiamo Internet Explorer i tasti [ Alt+I ].

Moduli e programmi CGI

107

6.4 Prerequisiti per luso di CGI (cenni alla congurazione di Apache)

Gli esempi di pagine Web mostrati nora possono essere visualizzati, con un programma di navigazione, anche semplicemente aprendoli come le locali (usando quindi il protocollo file://); da questo momento le pagine devono invece essere richieste ad un servente Web (con http://) in modo che possano essere correttamente eseguiti i CGI richiamati dai moduli presenti in esse. Inoltre necessario che sul servente sia possibile eseguire i programmi nel linguaggio di programmazione scelto per realizzare i CGI (ad esempio se si scrivono in linguaggio Perl, deve essere installato linterprete di questo linguaggio). In questo paragrafo e nei successivi si fa riferimento al servente Web Apache (usato in circa i due terzi dei siti Web esistenti), su piattaforma GNU/Linux.

6.4.1 Congurazione di Apache

Viene presa in considerazione la versione pi recente del programma, cio la 2 e si suppone di utilizzare una distribuzione GNU/Linux derivata da Debian (nel nostro caso Ubuntu-7.04). Nel proseguo, anche in paragra successivi, si fa spesso riferimento alla documentazione di alcuni pacchetti software di GNU/Linux o al manuale in linea di certi comandi; pu allora essere utile chiarire quanto segue: il manuale in linea relativo a un comando si ottiene eseguendo:
$ man nome_comando

si scorre il testo una riga alla volta con i tasti freccia e il tasto [ Invio ]; e una pagina alla volta con la barra spaziatrice e i tasti [ pagina su ] e [ pagina giu ]; si possono effettuare ricerche di testo premendo [ shift / ] e inserendo la stringa da cercare seguita da [ Invio ] e dalla pressione di [ n ] per trovare successive occorrenze; si esce dal manuale premendo [ q ]; i le di documentazione dei pacchetti installati in un sistema GNU/Linux sono solitamente in /usr/share/doc/nome_pacchetto; gli HOWTO e le FAQ (Frequently Asked Questions) sono rispettivamente in /usr/ share/doc/HOWTO e /usr/share/doc/FAQ. Si tenga presente che sulla congurazione e luso di Apache sono stati scritti interi volumi; qui ci accontentiamo di fornire le informazioni necessarie al suo funzionamento su un singolo nodo di rete (localhost o numero IP 127.0.0.1), contesto sufciente per i nostri scopi, e alla congurazione richiesta per lesecuzione di programmi CGI.

108

Moduli e programmi CGI

Quello che segue presuppone il possesso dei diritti dellutente amministratore di un sistema GNU/Linux cio dellutente root. In Ubuntu, dopo linstallazione del sistema, esso non abilitato, ma lutente denito in sede di installazione appartiene al gruppo dei cosiddetti utenti sudoers cio abilitati, previo reinserimento della loro password quando richiesto, ad eseguire comandi con i privilegi dellutente amministratore. Si pu allora operare come segue per attivare un terminale nellambiente graco in cui eseguire i comandi come utente root: 1. premere [ Alt+F2 ] per ottenere linterfaccia di esecuzione comandi; 2. scrivere nella riga di comando:
gksudo gnome-terminal

e cliccare su esegui; 3. rispondere alla richiesta di password dellutente corrente. Nella gura 6.11 vediamo il modulo per lesecuzione dei comandi con inserito il comando appena citato.
Figura 6.11. |

Nella gura 6.12 vediamo il successivo modulo per linserimento della password.
Figura 6.12. |

Inne nella gura 6.13 vediamo il terminale aperto in cui si possono eseguire i comandi con i privilegi di root (lo si capisce dal fatto che il prompt dei comandi termina con il carattere # anzich con $).
Figura 6.13. |

Moduli e programmi CGI

109

La prima operazione da svolgere naturalmente linstallazione del pacchetto Apache2; si consiglia di utilizzare le versioni gi pronte per la distribuzione utilizzata e, nel caso di Ubuntu, di procedere con uno dei programmi dedicati allaggiornamento dei pacchetti software, come Synaptic (in ambiente graco) o apt-get (in ambiente testuale nel terminale in cui si hanno i diritti dellamministratore). Per maggiori dettagli si consultino manuali e altra documentazione, anche in linea, relativa a questi programmi o in generale allaggiornamento dei pacchetti software in GNU/Linux e in Ubuntu in particolare. Alla ne dellinstallazione il programma ha gi una congurazione sufciente per poter essere utilizzato e viene anche inserito tra i cosiddetti demoni (programmi costantemente in esecuzione, in background, cio dietro le quinte, e pronti a rispondere a richieste di servizi provenienti dalla stessa macchina o da altre collegate in rete) che vengono attivati automaticamente ad ogni avvio della macchina. Se comunque fosse necessario avviare manualmente il demone di Apache2 si pu provvedere con il seguente comando:
# apache2ctl start

Invece per fermarlo:

# apache2ctl stop

Per riavviarlo:
# apache2ctl restart

Per vericarne lo stato:

# apache2ctl status

I le di congurazione del servente Apache2 risiedono nella directory /etc/apache2/; il le pi importante apache2.conf. Ci sono poi le sottodirectory mods-available, site-available, mods-enabled, site-enabled; nelle prime due sono presenti i le di congurazione rispettivamente dei moduli aggiuntivi e dei siti gestibili, nelle altre due i le di congurazione (che non sono altro che dei collegamenti simbolici a le delle altre due sottodirectory) rispettivamente dei moduli e dei siti abilitati. Per gli scopi che ci preggiamo, nel le /etc/apache2/apache2.conf non necessario alcun intervento; di seguito riportiamo un piccolo estratto di tale le.
1 2 3 4 5 6 7 8 9 10 11 12 13

|# |# ServerRoot: The top of the directory tree under which the servers |# configuration, error, and log files are kept. |# |# NOTE! If you intend to place this on an NFS (or otherwise network) |# mounted filesystem then please read the LockFile documentation (available |# at <URL:http://httpd.apache.org/docs-2.1/mod/mpm_common.html#lockfile>); |# you will save yourself a lot of trouble. |# |# Do NOT add a slash at the end of the directory path. |# |ServerRoot "/etc/apache2" |

110
14 15 16 17 18 19 20 21 22

Moduli e programmi CGI

|User www-data |Group www-data | |# Include module configuration: |Include /etc/apache2/mods-enabled/*.load |Include /etc/apache2/mods-enabled/*.conf | |# Include the virtual host configurations: |Include /etc/apache2/sites-enabled/

La numerazione delle righe non presente nel le ed stata aggiunta per spiegarne pi agevolmente il contenuto: il le contiene molte righe di commento (quelle che iniziano con #) a scopi esplicativi; questa una buona consuetudine spesso rispettata nellambiente GNU/Linux; la riga 12 riguarda la dislocazione dei le di congurazione; le righe 14 e 15 indicano utente e gruppo con i diritti dei quali viene eseguito il demone di Apache2; infatti, per motivi di sicurezza, solitamente i demoni non vengono eseguiti con i diritti dellutente root ma con quelli di un utente non privilegiato spesso denito appositamente nel sistema, in questo caso www-data; le righe 18, 19 e 22 servono ad includere, in questo le di congurazione, i le relativi alla congurazione di moduli aggiuntivi e siti abilitati. Nella directory /etc/apache2/sites-enabled troviamo il le 000-default che un collegamento simbolico al le /etc/apache2/sites-available/default e che contiene le congurazioni necessarie per la gestione del sito predenito. I collegamenti simbolici sono ulteriori riferimenti a le esistenti nel le system; in GNU/Linux se ne fa un uso molto frequente per vari scopi che qui non approfondiamo. Per visualizzare o modicare uno di questi le si pu agire indifferentemente sul le effettivo o su uno dei suoi collegamenti simbolici. Nel caso della congurazione di Apache lidea quella di avere nelle sottodirectory -available tutti i le utilizzabili e rendere attivi solo quelli che servono creando un collegamento ad essi nelle rispettive sottodirectory -enabled. Anche nel le /etc/apache2/sites-enabled/000-default non sono normalmente necessari molti interventi; di seguito viene riportato il suo contenuto.
1 2 3 4 5 6 7 8 9 10 11 12

|NameVirtualHost * |<VirtualHost *> | ServerAdmin webmaster@localhost | | DocumentRoot /var/www/ | <Directory /> | Options FollowSymLinks | AllowOverride None | </Directory> | <Directory /var/www/> | Options Indexes FollowSymLinks MultiViews | AllowOverride None

Moduli e programmi CGI

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

111

| Order allow,deny | allow from all | # This directive allows us to have apache2s default start page | # in /apache2-default/, but still have / go to the right place | RedirectMatch ^/$ /apache2-default/ | </Directory> | | ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/ | <Directory "/usr/lib/cgi-bin"> | AllowOverride None | Options ExecCGI -MultiViews +SymLinksIfOwnerMatch | Order allow,deny | Allow from all | </Directory> | | ErrorLog /var/log/apache2/error.log | | # Possible values include: debug, info, notice, warn, error, crit, | # alert, emerg. | LogLevel warn | | CustomLog /var/log/apache2/access.log combined | ServerSignature On | | Alias /doc/ "/usr/share/doc/" | <Directory "/usr/share/doc/"> | Options Indexes MultiViews FollowSymLinks | AllowOverride None | Order deny,allow | Deny from all | Allow from 127.0.0.0/255.0.0.0 ::1/128 | </Directory> | |</VirtualHost>

Illustriamo brevemente almeno le opzioni di congurazione pi importanti: la riga 5 permette di stabilire quale la directory radice del sito, cio quella dove risiedono i documenti da esso relativi; questo signica che quando con un browser si effettua la richiesta: http://localhost/esempi/esempio1.html, il servente cerca il le esempio1.html nella directory /var/www/esempi e se esso risulta presente e leggibile dallutente www-data, lo invia come risposta al programma di navigazione; le righe da 10 a 18 deniscono le propriet della directory radice; in particolare con Options Indexes si fa in modo che quando una richiesta relativa a una directory senza indicazione di un le specico, viene inviata come risposta la lista del contenuto di quella directory; la riga 17 pu essere commentata (inserendo un # in testa) in modo da evitare che le richieste inviate a localhost senza indicazione di una risorsa specica siano dirottate sulla directory /var/www/apache2-default; la riga 20 indica che la directory in cui devono risiedere i programmi CGI /usr/lib/ cgi-bin/ e viene riconosciuta dal servente come /cgi-bin/; ecco il motivo per cui

112

Moduli e programmi CGI negli esempi dei paragra precedenti il valore dellattributo action dei vari moduli era "/cgi-bin/nome_cgi"

le righe da 21 a 26 deniscono le propriet della directory /cgi-bin/; in particolare importante che ci sia Options ExecCGI, condizione necessaria afnch si possano eseguire i CGI ma non sufciente, nel senso che questi ultimi devono anche avere i giusti permessi di esecuzione relativamente allutente www-data; le righe da 28 a 35 riguardano il log di Apache; non entriamo nei dettagli della loro descrizione (comunque di solito non occorre modicarle). Riguardo ai log di Apache sottolineiamo limportanza della consultazione dei relativi le: /var/log/apache2/access.log e /var/log/apache2/error.log (gli altri le con nomi simili presenti nella directory /var/log/apache2 vengono creati automaticamente dal meccanismo di rotazione dei le di log e contengono messaggi meno recenti). Nel primo si trovano i messaggi di log riguardanti gli accessi fatti al servente. Laltro le contiene i messaggi ed importantissimo se ci sono problemi nellesecuzione di un CGI; in tal caso infatti la risposta che il servente invia al browser un enigmatico e poco utile messaggio del tipo: 500 Internal Server Error senza alcuna indicazione sui motivi che hanno causato il malfunzionamento; solo consultando il le /var/log/apache2/error.log si pu sperare di avere qualche informazione utile per cercare di individuare e correggere lerrore nel CGI incriminato.

6.4.2 Gestione dei siti-utente

Una modica interessante che pu essere fatta alla congurazione predenita di Apache2 quella riguardante lattivazione dei cosiddetti siti-utente che sono degli spazi Web, uno per ogni utente del sistema GNU/Linux, gestiti dal servente Apache2 e raggiungibili allURI: http:// localhost/~nome_utente/. Per attivare questa funzionalit occorre (sempre con i diritti dellutente root) attivare e congurare il modulo userdir creando i necessari collegamenti simbolici in /etc/apache2/ mods-enabled con i seguenti comandi:
# cd /etc/apache2/mods-enabled # ln -s ../mods-available/userdir.load . # ln -s ../mods-available/userdir.conf .

Si ricordi di riavviare il servente dopo ogni modica alla sua congurazione. Il le /etc/apache2/mods-enabled/userdir.conf ha il seguente contenuto:
1 2 3 4 5 6 7 8 9

|<IfModule mod_userdir.c> | UserDir public_html | UserDir disabled root | | <Directory /home/*/public_html> | AllowOverride FileInfo AuthConfig Limit | Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec | </Directory> |</IfModule>

Moduli e programmi CGI Anche in questo caso commentiamo alcune direttive importanti.

113

La riga 2 stabilisce che il nome della directory contenente i documenti del sito personale public_html; questo signica che ogni utente deve creare e gestire una sottodirectory con questo nome allinterno della propria directory personale (di solito /home/ nome_utente) e fare in modo che essa sia raggiungibile, e il suo contenuto leggibile, da parte dellutente www-data; la riga 3 stabilisce che il sito personale non attivo per lamministratore (per motivi di sicurezza); le righe da 5 a 8 deniscono le propriet delle directory dei siti personali (notare luso di * per indicare qualsiasi nome di utente). Per fare in modo che sia possibile eseguire dei CGI residenti nella directory del sito personale anzich solo nella directory /usr/lib/cgi-bin/ occorre modicare la riga 7 inserendo, tra le opzioni, anche ExecCGI e aggiungere in coda una riga ulteriore con questo aspetto:
|AddHandler cgi-script .cgi .pl .sh

In tale riga .cgi, .pl, .sh sono alcune estensioni usate spesso nei nomi dei CGI (se ne possono aggiungere altre). Con queste modiche lutente pu eseguire dei CGI memorizzati nella directory del proprio sito personale che, come detto, solitamente /home/nome_utente/public_html; comunque consigliabile creare in essa delle sottodirectory in cui posizionare le varie risorse del sito suddivise per tipologia, ad esempio: doc per i le HTML, imm per le immagini, cgi per i CGI e cos via. Con uno spazio personale organizzato in questo modo, per aprire un modulo HTML contenuto nel le doc/modulo.html, dovremmo collegarci al seguente URI: http://localhost/ ~nome_utente/doc/modulo.html; al suo interno, per inviare i dati al CGI cgi/provacgi.cgi, occorrerebbe valorizzare lattributo action del modulo con il valore "../cgi/provacgi.cgi". Il vantaggio di poter usare i siti personali risiede principalmente nel fatto che ogni utente pu manipolare a suo piacimento i documenti del proprio sito senza essere costretto dopo ogni variazione a trasferire i le nelle posizioni predenite da Apache (/var/www, /usr/lib/ cgi-bin), senza contare poi che gli amministratori di sistema spesso impediscono queste operazioni. Luso dei siti-utente poi senza dubbio utile, forse indispensabile, nel caso si debbano collaudare siti o applicazioni Web e nelle attivit didattiche riguardanti questi argomenti.

6.4.3 Permessi su le e directory di un sito Web

In precedenza si accennato al fatto che certe directory devono essere raggiungibili e certi le leggibili o eseguibili da parte dellutente www-data; ricordiamo infatti che, solitamente, i processi (programmi in esecuzione) del servente Apache2 vengono eseguiti con i diritti di tale utente e del gruppo di uguale nome. Questo signica appunto che le directory che devono essere attraversate e i le che devono essere letti o eseguiti devono permettere queste operazioni allutente o al gruppo succitati.

114

Moduli e programmi CGI

Occorre quindi fornire alcune informazioni su come assegnare i permessi adeguati afnch il nostro sito funzioni regolarmente. Nel caso del sito predenito le operazioni di assegnazione o variazione dei permessi devono essere fatte dallamministratore; nel caso di sito personale, invece, pu farle anche lutente proprietario di quel sito, visto che le risorse risiedono nel proprio spazio personale dove egli ha pieni poteri. Riassumiamo quali devono essere i permessi delle varie risorse fornendo anche possibili comandi per loro assegnazione (ricordando comunque che essa pu essere fatta anche in ambiente graco con strumenti pi amichevoli): le directory /var e /var/www devono essere attraversabili da tutti gli utenti (other nel gergo Linux) in modo da esserlo anche per www-data; questo dovrebbe essere gi vero in un sistema GNU/Linux normale, se cos non fosse si pu provvedere nel modo seguente:
# chmod o+x /var # chmod o+x /var/www

i documenti del sito devono essere leggibili per tutti gli utenti (e quindi anche per www-data):
# chmod o+r /var/www/*

le directory /usr e /usr/lib/cgi-bin devono essere attraversabili da tutti gli utenti (quasi sempre lo sono gi) e i programmi CGI ivi contenuti devono essere leggibili e eseguibili da tutti gli utenti in modo da esserlo anche per www-data:
# chmod o+rx /usr/lib/cgi-bin/*

Analoghe considerazioni valgono per le risorse utilizzate in un sito-utente: deve essere possibile per tutti raggiungere la directory /home/nome_utente/public_html e eventuali sottodirectory e i le in esse contenuti devono essere leggibili e, nel caso di CGI, anche eseguibili per tutti gli utenti. A titolo di esempio ecco il comando per rendere leggibili e attraversabili tutte le sottodirectory di public_html e leggibili e eseguibili tutti i le in esse contenuti, per tutti gli utenti, in modo ricorsivo:
$ chmod -R o+rx ~/public_html/*

6.5 Approfondimenti sul protocollo HTTP

Come accennato in precedenza, i CGI ricevono dati in input dal browser tramite il servente Web e possono manipolarli liberamente per produrre una risposta da inviare indietro al programma di navigazione. Prima di proseguire dunque importante fornire maggiori dettagli (senza pretese di completezza) sui principi di funzionamento del protocollo HTTP che sovrintende al dialogo tra programma di navigazione e servente Web (e quindi programma CGI). Nel paragrafo 1.4.2 si gi visto come il protocollo HTTP regoli linterazione tra un programma di navigazione e un servente Web tramite una sequenza di quattro fasi:

Moduli e programmi CGI

115

connessione: il cliente apre una connessione sulla porta 80 verso lindirizzo del servente; richiesta documento: se il servente in ascolto sulla porta 80 e accetta la connessione, il cliente invia la richiesta della pagina desiderata (ad esempio index.html); risposta: il servente prepara la risposta e la invia al cliente; disconnessione: la connessione viene chiusa dal servente mentre il browser del cliente interpreta la pagina di risposta e la presenta sullo schermo. Vediamo in dettaglio le fasi pi importanti che sono quelle della richiesta e della risposta.

6.5.1 La richiesta

La richiesta deve essere cos strutturata: una riga iniziale indicante il metodo, la risorsa richiesta e la versione del protocollo HTTP; una serie di intestazioni facoltative; un eventuale corpo. Il corpo della richiesta deve essere preceduto da CRLF (ritorno di carrello e riga nuova, codici ASCII 13 e 10) in modo da rendere la richiesta stessa compatibile con i sistemi operativi della famiglia Unix (che concludono una riga con il solo LF) e con quelli tipo MS-Dos, MS-Windows (che concludono una riga con CRLF). Non viene fatta distinzione tra maiuscole e minuscole eccetto che nellindicazione del le richiesto. Le versioni del protocollo accettate sono: HTTP/1.0 e HTTP/1.1; con questa ultima possibile anche effettuare pi richieste per ogni connessione anzich una sola come previsto dalla versione precedente. Il metodo permette di specicare il tipo di richiesta da effettuare sulla risorsa specicata; i metodi previsti sono: GET, il pi usato nelle normali attivit di navigazione e permette di inviare informazioni al servente in coda allURI della risorsa richiesta; POST, si usa principalmente per trasmettere, nel corpo della richiesta, i dati di un modulo HTML al servente; HEAD, simile a GET ma richiede solo le intestazioni della risorsa; usato prevalentemente per scopi diagnostici, cio per vericare se un indirizzo accessibile; PUT, trasmette la risorsa specicata al servente; in questo modo sarebbe possibile fare upload di le, ma di solito i serventi Web sono congurati per impedire questa operazione; DELETE, permette di cancellare la risorsa dal servente; anche in questo caso unoperazione spesso non abilitata; OPTIONS, permette di ottenere la lista dei metodi gestiti dal servente; TRACE, restituisce copia della richiesta; usato solo per scopi diagnostici; CONNECT, permette ai serventi proxy di cambiare versione del protocollo HTTP.

116 Le intestazioni servono ad aggiungere informazioni

Moduli e programmi CGI alla richiesta; ad esempio

Accept-Language: che indica quali lingue vuole il programma di navigazione, oppure Host: che indica il nome del servente.

Vale la pena soffermarsi su questultima intestazione che obbligatoria a partire dalla versione 1.1 del protocollo. A prima vista parrebbe che essa fornisca uninformazione ridondante in quanto, nel momento in cui il cliente effettua la richiesta, il nome del servente cui si rivolge gi stato specicato nella precedente fase di connessione. Invece questa informazione importantissima perch permette di congurare i serventi Web in modo che possano gestire pi siti Web associati allo stesso indirizzo IP e identicati da nomi diversi. Vediamo come questo possibile: supponiamo di avere i siti www.sito1.it e www.sito2.it entrambi associati allindirizzo IP 82.88.114.44 e gestiti da un servente Web Apache; quando i clienti effettuano richieste ai due siti esse vengono indirizzate, grazie alla risoluzione dei nomi fatta dal DNS, allo stesso indirizzo 82.88.114.44. Il servente non sarebbe quindi in grado di distinguere le richieste originariamente dirette a sito1 da quelle dirette a sito2; ecco perch indispensabile linformazione circa il nome del sito Web interessato dalla richiesta, fornita con lintestazione Host:. Per questo motivo ormai tutti i programmi di navigazione utilizzano il protocollo HTTP/1.1 e specicano il nome del servente, mediante lintestazione Host:, nelle loro richieste di documenti HTML. Laspetto di una tipica richiesta pu essere il seguente:
|GET /index.html HTTP/1.1 |Host: www.maxplanck.it |Accept-Language: it en |<CRLF> (riga vuota)

6.5.2 La risposta

Anche la risposta ha una struttura ben denita: una riga contenente un codice di stato di tre cifre; una o pi intestazioni; il corpo della risposta preceduto da una riga vuota. Ad ogni codice di stato associata una stringa esplicativa e i codici sono divisi in categorie in base alla prima cifra: 1xx, codici informativi; ad esempio: 101 Switching Protocol; 2xx, richiesta servita con successo; ad esempio: 200 OK o 204 No content; 3xx, richiesta reindirizzata allURI indicato nella direttiva location; ad esempio: 301 Moved permanently; 4xx, richiesta errata; ad esempio: 400 Bad request, 403 Forbidden, 404 Not Found;

Moduli e programmi CGI 5xx, errore del servente; ad esempio: 500 Internal Server Error.

117

Le intestazioni servono ad aggiungere informazioni alla risposta; ad esempio Date: che indica data e ora della trasmissione, oppure Server: che descrive il servente. Esistono anche altri tipi di intestazioni che permettono di fornire informazioni aggiuntive circa la trasmissione del corpo della risposta; ad esempio: Content-Type: per indicare il tipo MIME del contenuto della risposta, oppure Content-Length: per specicarne la lunghezza in byte. Ecco laspetto di una possibile risposta:
|HTTP/1.1 200 OK |Date: Sun, 12 Aug 2007 20:00:00 GMT |Content-Type: text/html |Content-Length: 75 |<CRLF> (riga vuota) |<html><head><title>Risposta</title></head><body>Prova risposta</body></html>

6.5.3 Simulazione di una connessione HTTP da linea di comando

Il protocollo HTTP regola un semplice scambio di le di testo tra due nodi di rete; si pu allora vericarne il funzionamento utilizzando lapplicazione TELNET per effettuare la connessione e la successiva richiesta di una risorsa ad un servente Web. Il servizio TELNET risponde di solito alla porta 23 ma si pu utilizzare il comando telnet per connettersi ad altri tipi di servizi semplicemente indicando il relativo numero di porta (se non si indica la porta viene usata la 23); quindi per connettersi al servente Web installato sulla macchina locale si esegue il comando:
$ telnet localhost 80

Se la connessione viene stabilita correttamente si pu poi effettuare la richiesta rispettando le regole illustrate in precedenza; la risorsa desiderata viene ricevuta (a meno di errori) sul terminale usato per la connessione e questultima termina (dopo alcuni secondi nel caso del protocollo HTTP/1.1). Nella gura 6.20 viene mostrato il procedimento no allottenimento della risposta; gli unici input sono le righe sottolineate che corrispondono allattivazione della di connessione e alleffettuazione della richiesta HTTP (si noti la riga vuota dopo lintestazione Host:). Come si vede la risposta appare come testo puro, quindi senza che i tag HTML vengano interpretati, cosa del tutto normale in questo contesto, data la mancanza di un programma di navigazione in grado di interpretarli.
Figura 6.20. |

118

Moduli e programmi CGI

6.6 Creazione della pagina di risposta da parte del CGI

I programmi CGI, nel momento in cui devono creare pagine Web di riposta da inviare al cliente, devono rispettare le regole appena illustrate; quindi devono creare un le di testo con una intestazione Content-Type: con lindicazione del tipo MIME, seguita da una riga vuota e dal contenuto effettivo della risposta. Il tipo MIME pi utilizzato in questo contesto ovviamente text/html. Ovviamente il corpo della risposta deve essere coerente con quanto dichiarato nellintestazione e quindi deve essere un sorgente HTML. Un altro tipo di risposta che pu essere fornita da un programma CGI consiste nellinvio di una pagina Web gi pronta, residente sul servente o presso qualsiasi altro indirizzo in rete; in tal caso la risposta deve contenere solo una intestazione di tipo Location in questa forma:
|Location: URI della pagina da inviare

Anche in questo caso necessario aggiungere una riga vuota dopo lintestazione.

6.7 Variabili di ambiente per i CGI

Un programma CGI ha a disposizione un gruppo di variabili di ambiente che vengono valorizzate automaticamente dal servente HTTP e che il programma pu usare per i suoi scopi. Segue lelenco delle pi importanti di tali variabili con una breve descrizione del loro signicato:
Nome variabile CONTENT_LENGTH CONTENT_TYPE GATEWAY_INTERFACE HTTP_ACCEPT HTTP_REFERER HTTP_USER_AGENT PATH_INFO Signicato Numero di byte nello standard input, se il metodo di invio "post". Tipo MIME dei dati inviati. Versione del CGI in esecuzione (di solito CGI/1.1). Elenco di tipi MIME che il browser in grado di accettare. Nome della pagina HTML che ha inviato i dati. Nome e versione del browser che ha inviato i dati. Informazioni aggiuntive passate aggiungendo un percorso in coda allURI specicato come valore di action.

Moduli e programmi CGI

Nome variabile PATH_TRANSLATED QUERY_STRING REMOTE_ADDR REMOTE_HOST REMOTE_USER REQUEST_METHOD SCRIPT_NAME SERVER_ADMIN SERVER_NAME SERVER_PORT SERVER_PROTOCOL SERVER_SOFTWARE Signicato Percorso completo ottenuto da quello contenuto nella variabile precedente aggiungendo in testa il document root del servente Web cio il percorso di base dei documenti HTML (di solito /var/www/). Stringa di input se il metodo di invio "get". Indirizzo IP della macchina che ha inviato i dati. Nome della macchina che ha inviato i dati. Nome dellutente che ha inviato i dati (valorizzato solo se il servente richiede lautenticazione dellutente). Metodo usato per linvio dei valori: "post" o "get". Nome del programma CGI completo di percorso. Indirizzo di posta elettronica dellamministratore del servente. Nome della macchina su cui viene eseguito il programma CGI Porta per il collegamento al servente Web (quasi sempre 80). Protocollo HTTP usato dal servente (di solito HTTP/1.1). servente Web utilizzato, ad esempio Apache 2.2.3

119

Il valore di queste variabili si ottiene nellambiente della shell di GNU/Linux anteponendo al loro nome il simbolo $. In altri linguaggi loperazione meno immediata; ad esempio in Perl occorre usare il vettore associativo $ENV (per maggiori dettagli si consiglia di consultare manuali riguardanti tale linguaggio). Di seguito vediamo un esempio in cui si usa un modulo di input che richiama un programma CGI, denominato cgi-var.sh, scritto con i comandi della shell Bash di GNU/Linux; tale programma crea un documento di risposta in cui sono visualizzati i valori delle variabili appena elencate. Sorgente HTML del modulo:
|<html> |<head> |<title>Esempio di modulo per visualizzare variabili</title> |</head> |<body> |<h2>Esempio di input e visualizzazione di variabili dambiente</h2> |<form action="/cgi-bin/cgi-var.sh" method="get"> |<p><br/><b>Inserire dato da passare al programma&nbsp;&nbsp;</b> |<input type="text" name="dato" size="5" maxlength="3"/> |</p> |<input type="submit" value="Invio"/> |</form> |</body> |</html>

Laspetto del modulo quello mostrato in gura 6.24.

120
Figura 6.24. |

Moduli e programmi CGI

Di seguito viene riportato il programma CGI cgi-var.sh:

|#!/bin/sh |# |# Programma cgi scritto in shell per la visualizzazione delle variabili di ambiente |# |echo "Content-type: text/html" |echo |echo "<html>" |echo "<head>" |echo "<title>Test variabili di ambiente CGI</title>" |echo "</head>" |echo "<body>" |echo "<h4>Test variabili di ambiente CGI</h4>" |echo "<pre>" |echo |echo "CONTENT_LENGTH = $CONTENT_LENGTH" |echo "CONTENT_TYPE = $CONTENT_TYPE" |echo "GATEWAY_INTERFACE = $GATEWAY_INTERFACE" |echo "HTTP_ACCEPT = $HTTP_ACCEPT" |echo "HTTP_REFERER = $HTTP_REFERER" |echo "HTTP_USER_AGENT = $HTTP_USER_AGENT" |echo "PATH_INFO = $PATH_INFO" |echo "PATH_TRANSLATED = $PATH_TRANSLATED" |echo "QUERY_STRING = $QUERY_STRING" |echo "REMOTE_ADDR = $REMOTE_ADDR" |echo "REMOTE_HOST = $REMOTE_HOST" |echo "REMOTE_USER = $REMOTE_USER" |echo "REQUEST_METHOD = $REQUEST_METHOD" |echo "SCRIPT_NAME = $SCRIPT_NAME" |echo "SERVER_ADMIN = $SERVER_ADMIN" |echo "SERVER_NAME = $SERVER_NAME" |echo "SERVER_PORT = $SERVER_PORT" |echo "SERVER_PROTOCOL = $SERVER_PROTOCOL" |echo "SERVER_SOFTWARE = $SERVER_SOFTWARE" |echo |echo "Standard input:" |cat |echo "</pre>" |echo "</body>"

Moduli e programmi CGI

|echo "</html>"

121

Laspetto del documento di risposta creato da cgi-var.sh mostrato nella gura 6.26.
Figura 6.26. |

Se nel modulo cambiamo il metodo di invio dei dati da "get" a "post" otteniamo la risposta mostrata nella gura 6.27.
Figura 6.27. |

122

Moduli e programmi CGI

6.8 Passaggio dei dati del modulo al programma CGI

Al momento della denizione di un modulo, come abbiamo visto, occorre specicare il nome e la locazione del CGI che deve trattare i dati e anche il modo in cui essi vengono trasferiti al CGI stesso. Ricordando che allo scopo si usano gli attributi action e method del tag <form>, vediamo il seguente esempio di denizione di un modulo (tralasciando i dettagli dei controlli) in cui si fanno queste ipotesi: il programma CGI si chiama cgi-prova.sh e risiede nella directory /cgi-bin del servente Web; nel modulo sono inseriti due campi con attributo name "cognome" e "nome" rispettivamente; i valori dei due campi inseriti dallutente sono "Paperino" e "Paolino" rispettivamente.
|<form action="/cgi-bin/cgi-prova.sh" method="get"> |... |(controlli vari del modulo) |.... |</form>

In caso di invio con metodo "get" i dati, nella forma nome=valore, vengono accodati allURI indicato come valore di action separati da esso con il simbolo ?; inoltre ogni coppia nomevalore separata dalla successiva dal carattere &. Quindi lURI effettivo diventa:
|/cgi-bin/cgi-prova.sh?cognome=Paperino&nome=Paolino

Il programma cgi-prova.sh riceve i dati nella variabile di ambiente QUERY_STRING che assume il valore "cognome=Paperino&nome=Paolino". Lalternativa usare il metodo "post" nel qual caso i dati vengono passati attraverso il canale di input standard mentre la variabile QUERY_STRING rimane vuota; il programma CGI deve quindi preoccuparsi di leggere lo standard input dove trova la stringa: "cognome=Paperino&nome=Paolino". Il metodo "post" quello da usare obbligatoriamente nel caso i dati debbano essere trasferiti ad un indirizzo di posta elettronica; negli altri casi si possono usare indifferentemente i due metodi. Occorre per osservare che il metodo "get" il meno indicato per due motivi: rende visibili i dati accodati agli URI, anche se questi sono di tipo password, ed soggetto ai limiti di lunghezza degli stessi (circa 2 Kbyte) e quindi d problemi in presenza di una grossa mole di dati da trasferire. Inoltre il metodo "get" , secondo le speciche del protocollo HTTP, sicuro (non genera variazioni nello stato interno del servente) ma anche idempotente (leffetto sul servente di pi richieste identiche lo stesso di quello di una sola richiesta) e questo fa si che i programmi di navigazione possano memorizzare nella propria memoria cache le relative pagine di risposta. Con il metodo "post" invece il servente viene ricontattato ogni volta che la pagina viene ricaricata e appare anche una opportuna domanda allutente circa la sua reale volont di inviare di nuovo i

Moduli e programmi CGI

123

dati; per questo consigliabile usare il metodo "post" in tutte le situazioni in cui lelaborazione dei dati del modulo provoca un qualche aggiornamento di dati residenti sul servente. Se il modulo di provenienza dei dati prevede la possibilit di pi valori per uno stesso campo (si pensi ad un controllo <select> con attributo multiple), nella stringa dei dati troviamo pi coppie nome-valore riguardanti quel campo, ad esempio: "cognome=Paperino&nome=Paolino&hobby=musica&hobby=pittura". Nel caso inne si usi un modulo per trasferire un le, il programma CGI deve essere di tipo particolare: non deve aspettarsi stringhe in input n in QUERY_STRING n nello standard input, ma deve essere predisposto alla lettura del le inviato attraverso questultimo.

6.9 Decodica dei dati di input del CGI

Come abbiamo visto, indipendentemente dal metodo usato per linvio, linput arriva al programma CGI come una stringa composta da coppie nome=valore come la seguente:
|nome1=valore1&nome2=valore2&nome3=valore3.....

Questo formato di invio prende il nome di codica URL e si basa sulle seguenti regole: ogni coppia nome=valore separata dal carattere &; gli elementi di ogni coppia sono separati dal simbolo di uguale; se un campo non contiene alcun valore, la coppia corrispondente diventa nome=; gli spazi nellinput sono rappresentati da simboli +; i caratteri speciali, cio quelli con codice ASCII maggiore di 127, e i caratteri riservati =, &, %, /, ~, @, + vengono rappresentati con il loro valore esadecimale preceduti dal simbolo %. Vediamo in dettaglio le codiche dei caratteri riservati:
Carattere % & + / = @ ~ Codica %25 %26 %2B %2F %3D %40 %7E

Il programma CGI deve per prima cosa fare il parsing dellinput, cio scandirlo e decodicarlo, tenendo conto di tutte le regole appena illustrate, e deve ottenere dalla stringa di input i nomi delle variabili e i rispettivi valori in modo che siano utilizzabili a ni elaborativi; solo successivamente pu svolgere le elaborazioni sulle variabili cos ottenute.

124

Moduli e programmi CGI

6.9.1 Esempio di decodica dati in Perl

Come esempio viene proposto un programma scritto in Perl che svolge i compiti appena illustrati:
|#!/usr/bin/perl |# |# cgi per decodifica variabili da modulo html |# versione autonoma con output variabili |# |print "Content-type: text/html\n"; |print "\n"; |print "<html>\n"; |print "<head>\n"; |print "<title>Decodifica</title>\n"; |print "</head>\n"; |print "<body>\n"; | |$metodo=$ENV{REQUEST_METHOD}; |if ($metodo eq "POST" || $metodo eq "post") { | read (STDIN,$dati,$ENV{CONTENT_LENGTH}); |} |else { | $dati =$ENV{QUERY_STRING}; |} |print "<p>Dati = $dati\n"; |# decodifica di +, & %xx ecc.) |$i=0; |@vars=(); |@vars = split(/&/,$dati); |foreach $_ (@vars) |{ | s/\+/ /g; |# sostituisce %xx con il relativo carattere; |# g = sost. globale; e=2.a parte una espressione | s/%([0-9a-fA-F][0-9a-fA-F])/sprintf("%c",hex($1))/eg; | /=/; | @val[$i]=$; | @nom[$i]=$; | $i++; |} |for ($j=0;$j<$i;$j++) { | print "<p>nomevar = $nom[$j]<br>valore = $val[$j]<br><br>\n"; |} |print "</body>\n"; |print "</html>\n";

Tralasciamo la spiegazione dei dettagli di funzionamento del programma per la quale necessaria la conoscenza almeno delle basi del linguaggio Perl. Osserviamo solo (per chi conosce tale linguaggio o per chi, invogliato da questo esempio, si accinge a conoscerlo) che il programma proposto effettua la decodica dellinput e presenta una risposta banale contenente nomi e valori delle variabili; tale risposta, nellipotesi che la stringa di input sia: "cognome=Paperino&nome=Paolino", viene mostrata nella gura 6.33.

Moduli e programmi CGI

Figura 6.33. |

125

Con opportune modiche si pu far diventare il programma un modulo utilizzabile da altri programmi Perl (con listruzione use) allo scopo di ottenere la sola decodica dellinput per una successiva elaborazione: sicuramente occorre eliminare tutte le istruzioni di output (le print); per le altre modiche da effettuare si rimanda alla consultazione di manuali sul linguaggio Perl in particolare sulla creazione e uso di sottoprogrammi. Facendo ancora riferimento alla risposta mostrata nella gura 6.33 possiamo fare un paio di osservazioni interessanti: il CGI eseguito risiede nel sito personale dellutente fulvio e non nel sito predenito del servente Apache; il CGI stato eseguito senza passare da un modulo HTML scrivendo nella barra di navigazione direttamente lURI: http://localhost/~fulvio/ decod.pl?cognome=Paperino&nome=Paolino; si cio simulata la sua attivazione da un modulo Web con passaggio dei dati effettuato con metodo "get"; questo trucco molto utile e spesso utilizzato sia in fase di verica dei CGI sia nellambito di applicazioni Web che devono attivare dei CGI, inviando dei dati, senza passare necessariamente da un modulo HTML.

6.9.2 Altri strumenti per la decodica

Essendo la fase di decodica necessaria in qualsiasi elaborazione CGI, esistono moltissimi strumenti, reperibili anche in Internet, che svolgono questa operazione; un esempio e il programma uncgi scritto in linguaggio c, scaricabile allindirizzo http://www.midwinter.com/~koreth/uncgi.html . Il programma freeware ed utilizzabile anche in applicazioni commerciali previa richiesta allautore. Una volta scaricato il programma si deve compilarlo, seguendo le istruzioni allegate, e installare leseguibile ottenuto nella directory dei CGI. Per illustrarne il funzionamento facciamo ancora riferimento alla stringa di input: "cognome=Paperino&nome=Paolino". Per fare in modo che tale input venga decodicato dal programma uncgi lattributo action deve assumere il valore "/cgi-bin/uncgi/cgi-prova.sh". In questo caso il suo effetto non quello di far eseguire il programma cgi-prova.sh residente nella sottodirectory uncgi di /cgi.bin in quanto uncgi non una sottodirectory; il

126

Moduli e programmi CGI

valore dellattributo viene invece interpretato come richiesta di eseguire in sequenza i programmi uncgi e cgi-var.sh entrambi memorizzati in /cgi-bin. Il programma uncgi riceve la stringa contenente i dati di input e la decodica indifferentemente rispetto al metodo di invio utilizzato ("get" o "post"); al termine della sua esecuzione rende disponibili, come variabili di ambiente, le variabili della stringa di input decodicate con nome preceduto dal presso "WWW_". Laltro programma quindi pu essere scritto senza preoccuparsi della fase di decodica e tenendo conto che le variabili provenienti dal modulo sono disponibili come variabili di ambiente con nomi: "WWW_cognome" e "WWW_nome".

6.10 Esempio completo di esecuzione di un CGI

A questo punto possiamo illustrare un esempio completo in cui vengono utilizzati: un modulo per limmissione di alcuni dati di input; il programma CGI per il trattamento degli stessi, scritto in Perl con utilizzo di uncgi per la decodica; il documento di risposta creato da tale programma. Sorgente HTML del modulo:
|<html> |<head> |<title>Modulo di prova</title> |</head> |<body> |<h2 style="text-align:center;">Immissione dei dati</h2> |<form action="/cgi-bin/uncgi/cgi-modulo.pl" method="post"> | <table> | <tr> | <td>Inserire il cognome&nbsp;&nbsp;</td> | <td><input type="text" name="cognome" size="20" maxlength="20"/></td> | </tr><tr> | <td>Inserire il nome&nbsp;&nbsp;</td> | <td><input type="text" name="nome" size="20" maxlength="20"/></td> | </tr><tr> | <td>Inserire la professione&nbsp;&nbsp;</td> | <td><input type="text" name="professione" size="20" maxlength="20"/></td> | </tr><tr> | <td>Vuoi informazioni via e-mail?&nbsp;&nbsp;</td> | <td>Si<input type="checkbox" name="risp" value="si"/> | No<input type="checkbox" name="risp" value="no"/></td> | </tr><tr> | <td>Indirizzo e-mail&nbsp;&nbsp;</td> | <td><input type="text" name="email" size="40" maxlength="40"/> | </tr><tr> | <td><input type="submit" value="Invio"/> | <td><input type="reset"/> | </tr> | </table> |</form>

Moduli e programmi CGI

|</body> |</html>

127

La pagina contenente il modulo ha laspetto mostrato in gura 6.35.

Figura 6.35. |

Il programma CGI si chiama cgi-modulo.pl e questo il suo listato:

|#!/usr/bin/perl |# |# cgi-modulo.pl |# |#============================================================================== |# Funzione messaggio |#============================================================================== |sub messaggio { | print ("<p>Clicca <a href=$ENV{HTTP_REFERER}> qui</a> per correggere\n"); | return 0 | }; |#============================================================================= |# Main |#============================================================================= |$cognome = $ENV{WWW_cognome}; |$nome = $ENV{WWW_nome}; |$professione = $ENV{WWW_professione}; |$risp = $ENV{WWW_risp}; |$email = $ENV{WWW_email}; |print ("Content-type: text/html\n"); |print ("\n"); |print ("<html>\n"); |print ("<head>\n"); |print ("<title>Test CGI</title>\n"); |print ("</head>\n"); |print ("<body>\n"); |print ("<h1>Resoconto immissione dati</h1>\n"); |if ($cognome eq "") { | print ("<p>Cognome obbligatorio\n"); | &messaggio;

128

Moduli e programmi CGI

| } |else { | if ($nome eq "") { | print ("<p>Nome obbligatorio\n"); | &messaggio; | } | else { | if (($risp eq "si") && ($email eq "")) { | print ("<p>Se vuoi e-mail inserisci il tuo indirizzo\n"); | &messaggio; | } | else { | print ("<p>Cognome:&#160;&#160;&#160;&#160;"); | print ("&#160;&#160;&#160; $cognome </p>\n"); | print ("<p>Nome:&#160;&#160;&#160;&#160;&#160;&#160;"); | print ("&#160;&#160;&#160;&#160;&#160;&#160;&#160; $nome </p>\n"); | print ("<p>Professione:&#160;&#160;&#160;&#160;"); | print ("&#160;$professione </p>\n"); | print ("<p>Richiesta mail:&#160; $risp </p>\n"); | print ("<p>Indirizzo:&#160;&#160;&#160;&#160;&#160;"); | print ("&#160;&#160;&#160;&#160;&#160;&#160;$email </p>\n"); | } } }; |print ("</body>\n"); |print ("</html>\n");

Inne nella gura 6.37 vediamo laspetto del documento di risposta creato dal programma.
Figura 6.37. |

6.11 Considerazioni nali sui CGI

Come pi volte fatto notare, i programmi CGI vengono sempre eseguiti sul servente Web al quale ci si collega; ci comporta alcuni limiti, in particolare: problemi di sicurezza, in quanto attraverso i programmi CGI alcuni utenti potrebbero accedere, volontariamente o meno, a dati condenziali contenuti nel servente;

Moduli e programmi CGI

129

problemi di prestazioni, perch il servente deve elaborare le richieste provenienti da pi utenti anche contemporaneamente, e la velocit di risposta pu diminuire anche drasticamente in caso di sovraccarico del sistema; inoltre le prestazioni dipendono fortemente dalla velocit della connessione tra i nodi di rete coinvolti visto che tra essi c un continuo scambio di dati; problemi di accessibilit, in quanto, a causa dei problemi di sicurezza, molti gestori di siti Web non consentono agli utenti di creare CGI personalizzati sul proprio servente. Ci sono per anche importanti aspetti positivi relativi alla natura dei CGI: compatibilit, perch i CGI, essendo eseguiti sulla macchina remota e producendo risultati in formati universalmente riconosciuti come HTML, non risentono di eventuali differenze di comportamento dei vari programmi di navigazione; utilit, in quanto i CGI possono raccogliere dati statistici sugli accessi ad un sito, leggere e scrivere dati centralizzati su un servente, interrogare o aggiornare basi di dati in esso gestite. Di questultimo aspetto, cio linterazione tra pagine Web e basi di dati, che molto importante, si occupa in modo pi esteso il prossimo paragrafo.

130

Moduli e programmi CGI

131

Capitolo

Web, basi di dati e linguaggio PHP

La possibilit di interfacciare una base di dati relazionale con il Web senza dubbio assai interessante in quanto unisce la potenza, lafdabilit, la sicurezza dei moderni RDBMS (Relational Data Base Management System) con la facilit duso e la diffusione ormai universale degli strumenti di navigazione sia in Internet che nelle Intranet aziendali. I campi di impiego di questa tecnologia sono numerosissimi: si pensi ad esempio alla possibilit di fornire ai cittadini laccesso via Internet a dati di interesse pubblico o personale, oppure, allinterno di una azienda, alla gestione di archivi con interfacce basate sui normali, e molto amichevoli, programmi di navigazione, con le quali si riducono al minimo i problemi di compatibilit e di installazione sui computer degli utilizzatori.

7.1 Architetture three-tier e pattern MVC

Le applicazioni Web si basano generalmente su una architettura a tre livelli (three-tier): front-end o presentation tier o interfaccia: il livello costituito dai moduli visualizzati con i browser sui computer clienti; middle tier o logica applicativa: il livello occupato dal servente Web o meglio da un Application server (ad esempio Tomcat) che sovrintende allelaborazione dei dati, grazie a strumenti quali i CGI, PHP, ASP, servlet Java, Jsp e simili; back-end o data tier o gestione dati persistenti: qui risiede il servente RDBMS. Tale architettura schematizzata nella gura 7.1.
Figura 7.1. |

Tra i tre componenti il dialogo avviene secondo il modello client-server, nel senso che linterfaccia cliente della logica applicativa che a sua volta cliente della gestione dati persistenti.

132

Web, basi di dati e linguaggio PHP

Il motivo delladozione di una architettura con dei livelli distinti risiede essenzialmente nella possibilit di progettare, costruire, manutenere ciascuno dei moduli in modo indipendente dagli altri. Non necessariamente i vari livelli devono appartenere a nodi di rete distinti; spesso anzi i due serventi, Web e RDBMS, sono installati sulla stessa macchina. Generalmente invece in esecuzione su nodi distinti il livello front-end a meno che non si effettuino prove di collegamento direttamente sulla macchina servente (identicata in tal caso come localhost) cosa che pu avvenire generalmente nelle fasi di realizzazione o di prova dei programmi. Quando si parla di livelli architetturali delle applicazioni Web si fa spesso riferimento anche allo schema (pattern) MVC (Model View Controller) proposto originariamente con il linguaggio Smalltalk e ora molto diffuso per lo sviluppo di interfacce grache in applicazioni orientate agli oggetti. Il suo uso presente in numerose tecnologie attuali, anche in ambito Web: nei framework basati su PHP (Symfony, Zend Framework), su Ruby (Ruby on Rails), su Python (Django), su Java (Swing, Struts), o su .NET di Microsoft. Con lappena citato termine framework (piano di lavoro) si intende una struttura di supporto per la progettazione e realizzazione del software basata su librerie usabili con uno o pi linguaggi e corredate da strumenti di aiuto alla programmazione come editor avanzati e debugger. I principali vantaggi delluso dei framework risiedono nella standardizzazione delle operazioni pi comuni per lo sviluppo del software e nella possibilit di riutilizzare componenti gi pronti senza doverli riprogettare e riscrivere ogni volta da zero. Anche lo schema MVC comprende tre livelli con compiti distinti: model: fornisce i metodi per accedere ai dati usati dallapplicazione; view: visualizza i dati e gestisce il dialogo con gli utenti; controller: riceve, tramite la view, i comandi dellutente e li esegue alterando eventualmente lo stato degli altri due componenti. Lo schema non in contrasto con quanto richiesto in una applicazione three-tier in quanto implica la separazione fra la logica applicativa che spetta al controller e al model, e linterfaccia utente che a carico della view. In qualche caso si tende anzi a confondere lo schema MVC con le architetture a tre livelli; ci non corretto per almeno due motivi: esso opera una separazione logica ulteriore nel solo livello di interfaccia organizzando le relative funzionalit e gestendo linterazione con gli altri strati applicativi; nelle applicazioni three-tier il livello interfaccia non comunica direttamente con il data tier e le comunicazione transitano sempre attraverso il middle tier; nello schema MVC invece abbiamo una interazione triangolare (vedi gura 7.2), con la view che invia gli aggiornamenti al controller, il controller che aggiorna il model, e la view che riceve aggiornamenti direttamente dal model.

Web, basi di dati e linguaggio PHP

Figura 7.2. |

133

Dal punto di vista storico, si pu inoltre notare che larchitettura three-tier si presenta negli anni 90 nellambito delle applicazioni distribuite, con la separazione dei tre livelli su piattaforme distinte, mentre MVC nasce nel decennio precedente, presso lo Xerox PARC, inizialmente per applicazioni non distribuite. Maggiori dettagli sulle architetture three-tier e, in generale, sulle applicazioni multi-livello, sono disponibili nel capitolo 10 dedicato alla programmazione distribuita. Nei prossimi paragra esaminiamo pi da vicino i metodi e gli strumenti utili alla gestione dei dati di un database tramite uninterfaccia Web.

7.2 Strumenti necessari per la gestione di basi di dati via Web

Gli strumenti scelti per trattare questo argomento e per produrre qualche semplice esempio fanno tutti parte del software libero. Ovviamente questa non lunica scelta che poteva essere fatta, data la presenza sul mercato di molte alternative proprietarie anche tecnicamente molto valide; la preferenza per questa categoria di programmi per ampiamente motivata da tutta una serie di considerazioni per approfondire le quali si consiglia di consultare i numerosi documenti, dedicati a tali argomenti, sul sito http:// www.linuxdidattica.org . Qui elenchiamo brevemente solo alcuni dei motivi pi importanti per la scelta di programmi e strumenti liberi: motivi etici: opportunit di usare software libero anzich proprietario in ambito educativo; motivi didattici: maggiore validit dei programmi liberi in ambito didattico (si pensi alla possibilit di sfruttare in tale contesto i sorgenti dei programmi); motivi pratici e di legalit: disponibilit e di copie illimitate e legali dei programmi da far utilizzare a chi ne ha necessit in qualsiasi ambito (didattico e non); motivi economici: gratuit del software; motivi tecnologici: si parla di prodotti che sono allavanguardia nel loro settore e molto diffusi anche in ambito professionale (ad esempio Apache nellambito dei serventi Web).

134

Web, basi di dati e linguaggio PHP

Gli strumenti cui si fa riferimento nel proseguo di questo paragrafo sono: GNU/Linux (distribuzione Debian, o derivata, nel nostro caso Ubuntu-7.04) come sistema operativo delle macchine che fungono da serventi Web; Apache (versione 2) come servente Web; MySQL versione 5.0 e PostgreSQL versione 8.2 come RDBMS; PHP versione 5 come linguaggio per il motore applicativo e linterfaccia tra Web e le basi di dati. Anche se in questa sede non vengono forniti dettagli sul reperimento e linstallazione dei pacchetti software necessari (come al solito si rimanda ad appositi testi o alla documentazione presente anche in Internet o ai manuali in linea in ambiente GNU/Linux), forniamo un elenco degli stessi facendo riferimento alla piattaforma Ubuntu-7.04: apache2, il servente Web; apache2-mpm-prefork, modulo da usare nel caso si voglia avere un servente Web non basato sui thread ma sui processi come la vecchia versione Apache 1.3; apache2-utils, programmi di utilit per Apache2; apache2.2-common, moduli standard di Apache2; libmysqlclient15off, librerie per la parte cliente di MySQL; mysql-client-5.0, eseguibili del cliente MySQL; mysql-common, le richiesti da MySQL; mysql-server-5.0, eseguibili del servente MySQL; postgresql-8.2, eseguibili del servente PostgreSQL; postgresql-client-8.2, eseguibili del cliente PostgreSQL; postgresql-client-common, gestore di versioni multiple del cliente PostgreSQL; postgresql-common, gestore di versioni multiple o di cluster multipli del servente PostgreSQL; libapache2-mod-php5, modulo per PHP5 per Apache2 (solo versione a processi); php5, interprete PHP5; php5-common, esempi e documentazione di PHP5; php5-mysql, modulo per la connessione a una base di dati MySQL da script PHP5; php5-pgsql, modulo per la connessione a una base di dati PostgreSQL da script PHP5; php5-cli, interprete PHP5 da linea di comando (non essenziale); phpmyadmin, applicazione Web, scritta in PHP, per gestire basi di dati MySQL (non essenziale); phppgadmin, applicazione Web, scritta in PHP, per gestire basi di dati PostgreSQL (non essenziale).

Web, basi di dati e linguaggio PHP

135

Supponiamo di avere installato con successo tutto il software sulla macchina su cui effettuare le prove e di avere quindi il servente Apache che risponde allindirizzo http://localhost; dotato di tutto il necessario per lesecuzione di script PHP5 e per linterfacciamento a basi di dati MySQL e PostgreSQL. Segnaliamo che possibile lavorare con questi strumenti anche in ambiente MS-Windows (versioni superiori alle 9x o alla home) in quanto esistono pacchetti Apache, MySQL, PostgreSQL, PHP5 anche per questa piattaforma. Inoltre esistono prodotti come EasyPHP o XAMPP installando i quali si hanno a disposizione in MS-Windows, gi pronti alluso: un servente Apache, un servente MySQL, un interprete PHP5 e lapplicazione phpmyadmin per la gestione via Web delle basi di dati, cui si accede collegandosi a http://localhost/mysql. A proposito dei due RDBMS prescelti segnaliamo come il primo sia nettamente pi utilizzato nellambito delle applicazioni di rete: molti siti di commercio elettronico si appoggiano infatti su archivi gestiti con MySQL. Per sottolineare questo fatto facciamo notare che stato addirittura coniato un acronimo: LAMP, le cui lettere indicano i componenti che sono alla base di molte applicazioni Web esistenti: Linux, Apache, MySQL, PHP. Tra i motivi della grande diffusione di MySQL ci sono lestrema semplicit di congurazione e gestione e le buone prestazioni specialmente per basi di dati di dimensioni non elevate (come quelle su cui si basano solitamente i negozi in rete). Tali pregi hanno superato, per gli sviluppatori, i difetti che erano presenti almeno nelle versioni precedenti alla 5.0 e che consistono principalmente nella non completa aderenza allo standard SQL (Structured Query Language), nellassenza di viste logiche, di trigger, di selezioni annidate. Nel caso di PostgreSQL, tali difetti non erano presenti neanche nelle prime versioni, ma questo non gli ha permesso di godere delle preferenze degli addetti ai lavori (non il primo caso, in ambito informatico, in cui un prodotto superiore dal punto di vista tecnologico ha meno successo di uno con caratteristiche inferiori). In queste dispense, per eliminare ogni possibile discussione, si scelto di considerare entrambi i prodotti. Nei due RDBMS la gestione sica dei dati non banale e non prevede la memorizzazione degli stessi in su un unico le per ogni base di dati, come avviene invece per altri gestori di basi di dati (ad esempio Access di Microsoft o SQLite); quindi, a differenza che in questi ultimi, per fare salvataggi di sicurezza dei dati di un archivio, non sufciente salvare un le, ma occorre utilizzare gli appositi strumenti messi a disposizione dai serventi RDBMS. La trattazione su MySQL e PostgreSQL ovviamente parziale: vengono introdotti solo i comandi necessari alla gestione di piccole basi di dati in vista di una successiva interrogazione con il linguaggio PHP; si considerano note le nozioni relative alle basi di dati relazionali in generale, al loro progetto (passando per i modelli concettuale e logico), alla sintassi e alle regole del linguaggio SQL.

136

Web, basi di dati e linguaggio PHP

7.3 Basi di dati con MySQL

MySQL un sistema di gestione di basi di dati relazionali multi-piattaforma distribuito da MySQL AB come software libero sotto licenza GPLV 2 (General Public License version 2).

7.3.1 Attivazione del servente MySQL

Una volta installato MySQL con successo si pu iniziare ad usarlo senza grosse difcolt; la directory predenita a partire dalla quale vengono salvati gli archivi /var/lib/mysql e lamministratore della base di dati , almeno inizialmente, lutente root (si rimanda al paragrafo 6.4.1 per quanto riguarda il modo in cui si possono acquisire i privilegi di tale utente in Ubuntu). Prima di iniziare si deve attivare il demone mysqld con il comando (eseguito sempre con i diritti di root):
# /etc/init.d/mysql start

Con comandi analoghi contenenti, invece di start, restart, stop, status si ottiene il riavvio, la fermata, lo stato corrente del demone. Si tenga comunque presente che, in caso di corretta installazione del pacchetto, il demone viene inserito tra quelli attivati automaticamente allaccensione della macchina grazie alla presenza del le /etc/rc2.d/S19mysql che un collegamento simbolico a /etc/init.d/mysql; in mancanza si pu provvedere a denire tale collegamento con i comandi:
# cd /etc/rc2.d # ln -s ../init.d/mysql .

Il servente MySQL risponde alle richieste sulla porta 3306; questa limpostazione predenita modicabile intervenendo nel le di congurazione /etc/mysql/my.cnf cambiando la riga:
|port
= 3306

7.3.2 Dialogo con il servente MySQL con mysql

Per vericare il funzionamento del servente MySQL possiamo collegarci ad esso come utente root eseguendo mysql che il programma di interfaccia in modalit testuale. Il comando prevede numerose opzioni, qui elenchiamo solo le pi importanti: -u: per indicare il nome dellutente con il quale ci colleghiamo al servente; -p: per immettere la password dellutente; -h: per indicare quale il servente cui ci si collega. Per avere tutte le informazioni sulluso di questo comando si pu consultare il manuale in linea eseguendo:
$ man mysql

Vediamo un esempio di comando per il collegamento a un servente MySQL:

Web, basi di dati e linguaggio PHP

$ mysql -h localhost -u root -p mysql

137

si riceve la richiesta di inserire la password per lutente root e, se non ci sono errori, ci si collega alla base di dati mysql (quella che contiene tutte le informazioni amministrative del servente). La stringa di invito dei comandi (prompt dei comandi) di MySQL ha il seguente aspetto:
mysql>

Per chiudere la connessione occorre digitare il comando:

mysql> \q

Si pu anche eseguire mysql senza alcuna opzione e senza indicazione della base di dati da utilizzare; in questo caso si effettua un collegamento alla macchina locale senza socket di rete ma usando il cosiddetto Unix-domain socket, lutente usato ha stesso nome di quello correntemente collegato al sistema GNU/Linux e la base di dati da utilizzare indenita. Per cambiare la base di dati corrente si esegue il comando (lutente deve avere i permessi di uso su di essa come mostrato pi avanti):
mysql> use nome_basi_dati

Per creare una base di dati si esegue:

mysql> CREATE DATABASE nome_base_dati;

e per cancellarla:
mysql> DROP DATABASE nome_base_dati;

Lavorare come utente root quasi sempre inopportuno per motivi di sicurezza e questo vale anche nel caso di MySQL; vediamo allora come si crea un utente, chiamato dba, normale per GNU/Linux, ma dotato di tutti i privilegi necessari per essere lamministratore del RDBMS. Prima di tutto creiamo (da utente root) lutente nel sistema GNU/Linux, supponendo ovviamente che non esista gi:
# adduser dba

inserendo la password, confermandola e rispondendo alle altre richieste di informazioni sullutente che sono comunque non essenziali. Poi colleghiamoci a MySQL e deniamo anche qui il nuovo utente:
mysql> CREATE USER dba;

quindi assegniamogli i privilegi:

mysql> GRANT ALL PRIVILEGES ON *.* TO dba@"%" IDENTIFIED BY parola_segreta WITH GRANT OPTION;

spieghiamo brevemente le parti salienti del comando: *.* signica che ci riferisce a qualsiasi base di dati e qualsiasi tabella in essa contenuta; "%" pu essere sostituito da una indicazione pi restrittiva dei nodi di rete da cui lutente pu collegarsi, ad esempio: 172.16.% oppure 172.16.1.1;

138

Web, basi di dati e linguaggio PHP

se si vuole dare la possibilit allutente di collegarsi senza password (sconsigliato) basta eliminare la parte IDENTIFIED BY ....; inne con WITH GRANT OPTION che facoltativo, si da allutente dba, visto che deve essere lamministratore, la possibilit di assegnare i privilegi ad altri utenti. A questo punto si pu chiudere il collegamento come utente root e accedere da una console al sistema GNU/Linux come utente dba, oppure da utente root eseguire il cambio di identit con il comando:
# su dba

Quindi ci si collega a MySQL:

$ mysql -h localhost -u dba -p mysql

Notiamo che in questo caso luso di -u dba superuo ma non provoca alcun errore. Si possono creare altri utenti, altre basi di dati e assegnare i relativi privilegi; ad esempio per assegnarli allutente fulvio per la base di dati prova:
mysql> GRANT ALL PRIVILEGES ON prova.* TO fulvio@"%" IDENTIFIED BY parola_segreta;

Per togliere questi privilegi:

mysql> REVOKE ALL PRIVILEGES ON prova.* FROM fulvio@"%";

7.3.3 Comandi utili per usare MySQL

Elenchiamo una serie di informazioni utili allamministrazione e alluso di un servente MySQL, sottolineando come esse siano solo una piccola parte di quelle necessarie e come presuppongano, in qualche caso, la conoscenza delle regole del linguaggio SQL: accesso da remoto: nel le /etc/mysql/my.cnf, commentare la riga:
|skip-networking

o valorizzare opportunamente la riga:

|bind-address=127.0.0.1

o fare entrambe le cose. cambiare password ad un utente:

mysql> SET PASSWORD FOR nome_utente = PASSWORD(parola_segreta);

ottenere laiuto rispettivamente per i comandi di mysql e di SQL:

mysql> help mysql> help comando

connettersi ad altra base di dati:

mysql> use nome_base_dati

Web, basi di dati e linguaggio PHP ottenere la lista delle basi di dati gestite dal servente:
mysql> SHOW DATABASES;

139

ottenere la lista delle tabelle presenti nella base di dati:

mysql> SHOW TABLES;

visualizzare la struttura di una tabella:

mysql> DESCRIBE nome_tabella

cancellare un utente:
mysql> DROP USER nome_utente

salvare una base di dati (comprese le denizioni delle strutture delle tabelle) in un le:
$ mysqldump nome_base_dati > nome_file

il comando mysqldump prevede le opzioni -u, -p, -h, con lo stesso signicato visto per mysql, e tante altre per le quali si rimanda alla consultazione del manuale in linea; per ripristinare in una base dati, appositamente creata, il contenuto di un le di salvataggio si pu usare il comando:
$ mysql nome_base_dati < nome_file

Si noti che le parole riservate del linguaggio SQL si scrivono in maiuscolo anche se vengono

140

Web, basi di dati e linguaggio PHP

Il comando viene considerato concluso quando si incontra il simbolo ;. Inseriamo alcune registrazioni allinterno della tabella con i comandi:
mysql> INSERT INTO rubrica (cognome, nome, indirizzo, telefono, data_nas, email) -> VALUES(Paperino, Paolino, via Roma 1 Paperopoli, -> 010011234567,1980-01-01,paperino.paolino@maxplanck.it); mysql> INSERT INTO rubrica (cognome, nome, indirizzo, telefono, data_nas, email) -> VALUES(Rossi, Mario, via Roma 34 Treviso, -> 04220101010,1981-01-01,rossi.mario@maxplanck.it);

Si noti come i valori del campo codice non vengano inseriti perch, essendo esso auto-incrementante, viene opportunamente valorizzato dal servente MySQL. Verichiamo i dati inseriti con il comando:
mysql> SELECT * FROM rubrica;

che dovrebbe dare il risultato mostrato in gura 7.6.

Figura 7.6. |

Le stesse operazioni possono essere fatte mediante il pi amichevole programma phpmyadmin utilizzabile, dopo linstallazione e la congurazione per le quali si rimanda alla documentazione del programma stesso, collegandosi allURI: http://localhost/phpmyadmin.

Web, basi di dati e linguaggio PHP

141

7.4 Basi di dati con PostgreSQL

PostgreSQL un sistema di gestione basi di dati relazionali multi-piattaforma molto avanzato e quasi del tutto rispondente allo standard SQL; stato sviluppato originariamente dal dipartimento di informatica dellUniversit di Berkeley in California ed distribuito come software libero con una licenza speciale.

7.4.1 Attivazione del servente PostgreSQL

Una volta installato PostgreSQL con successo si pu iniziare ad usarlo senza grosse difcolt; la directory predenita a partire dalla quale vengono salvati gli archivi /var/lib/ postgresql/8.2/main/ e lamministratore della base di dati lutente postgres al quale consigliabile assegnare una password, operazione che deve essere svolta dallutente root di Linux (si rimanda al paragrafo 6.4.1 per quanto riguarda il modo in cui si possono acquisire i privilegi di tale utente in Ubuntu). Prima di iniziare si deve attivare il demone postgres con il comando (eseguito sempre con i diritti dellutente root):
# /etc/init.d/postgresql-8.2 start

Con comandi analoghi contenenti, invece di start, restart, stop, status si ottiene il riavvio, la fermata, lo stato corrente del demone. Si tenga comunque presente che, in caso di corretta installazione del pacchetto, il demone viene inserito tra quelli attivati automaticamente allaccensione della macchina grazie alla presenza del le /etc/rc2.d/S19postgresql-8.2 che un collegamento simbolico a /etc/init.d/ postgresql-8.2; in mancanza si pu provvedere a denire tale collegamento con i comandi:
# cd /etc/rc2.d # ln -s ../init.d/postgresql-8.2 .

Il servente PostgreSQL risponde alle richieste sulla porta 5432; questa limpostazione predenita modicabile intervenendo nel le di congurazione /etc/postgresql/8.2/main/ postgresql.conf cambiando la riga:
|port = 5432

La prima volta che viene eseguito il programma di amministrazione delle basi di dati, vengono creati i le fondamentali per la loro gestione. Per vericare il buon funzionamento del servente PostgreSQL creiamo (da utente root) un utente nel sistema GNU/Linux con nome, ad esempio, fulvio, supponendo ovviamente che non esista gi:
# adduser fulvio

Poi ci si connette su una console come utente postgres, oppure da utente root si esegue il cambio di identit con il comando:
# su postgres

e si crea lutente fulvio anche per PostgreSQL:

Web, basi di dati e linguaggio PHP Per cancellare una base di dati il comando invece:
$ dropdb nome_base_dati

143

7.4.3 Comandi utili per usare PostgreSQL

Elenchiamo a questo punto una serie di informazioni utili allamministrazione e alluso di un servente PostgreSQL, sottolineando, ancora una volta, come esse siano solo una piccola parte di quelle necessarie e come presuppongano la conoscenza delle regole del linguaggio SQL: abilitare la connessione da clienti remoti: nel
/etc/postgres/8.2/main/

postgresql.conf valorizzare opportunamente la riga:

|listen_addresses = localhost

che inizialmente commentata (il valore per difetto comunque localhost); aggiungere poi in /etc/postgres/8.2/main/pg_hba.conf una riga come questa:
|host all all ip_rete mashera_rete trust

oppure, se si vuole limitare laccesso con password MD5:

|host all all ip_rete maschera_rete md5

eventualmente commentare la riga:

|local all all
ident sameuser

se si vuole disattivare la possibilit di collegarsi in locale al servente PostgreSQL, senza immettere password, per gli utenti del sistema GNU/Linux; vedere i commenti presenti in entrambi i le e la documentazione di PostgreSQL per avere maggiori dettagli; amministrare un utente: collegarsi come utente postgres e eseguire:
$ psql template1

poi:
template1=> UPDATE pg_authid SET rolpassword=parola_segreta WHERE rolname=nome_utente;

per le versioni di PostgreSQL precedenti alla 8.1 il comando invece:

template1=> UPDATE pg_shadow SET passwd=parola_segreta WHERE usename=nome_utente;

cambiare password ad un utente:

template1=> ALTER user nome_utente WITH password parola_segreta;

assegnare privilegi per una tabella:

template1=> GRANT [ALL] [priv] ON nome_tabella TO public;

144

Web, basi di dati e linguaggio PHP in questo caso i privilegi (tutti se ALL, o quelli specicati) vengono assegnati allo schema public quindi a tutti gli utenti, in alternativa si pu specicare il nome di un utente;

togliere privilegi per una tabella ad un utente:

template1=> REVOKE [ALL] [priv] ON nome_tabella FROM nome_utente;

creare utente con password criptata MD5 (sempre da utente postgres):

$ createuser -e nome_utente

ottenere laiuto rispettivamente per i comandi di psql e di SQL:

template1=> \? template1=> \h [comando]

premere [ q ] per uscire dalla visualizzazione dellaiuto; connettersi ad altra base di dati:
template1=> \c nome_base_dati

ottenere la lista delle basi di dati gestite dal servente:

template1=> \l

ottenere la lista delle tabelle presenti nella base di dati:

template1=> \dt

visualizzare la struttura di una tabella:

template1=> \d nome_tabella

salvare una base di dati (comprese le denizioni delle strutture delle tabelle) in un le:
$ pg_dump nome_base_dati > nome_file

il comando pg_dump prevede le opzioni -U, -W, -h, con lo stesso signicato visto per psql, e tante altre per le quali si rimanda alla consultazione del manuale in linea; per ripristinare in una base dati, appositamente creata, il contenuto di un le di salvataggio si pu usare il comando pg_restore (vedere manuale in linea) o, pi semplicemente, il comando:
$ psql -d nome_base_dati -f nome_file

Si pu notare che, ancora una volta, le parole riservate del linguaggio SQL si scrivono in maiuscolo, anche se non obbligatorio, e che i comandi SQL, a differenza di quelli di psql, devono sempre terminare con ;.

Anche relativamente alla possibilit di connettersi a PostgreSQL da remoto vale la stessa considerazione fatta in precedenza per MySQL: non indispensabile nel contesto delle applicazioni Web che si interfacciano con una base di dati; infatti, siccome il servente PostgreSQL quasi sempre residente sulla stessa macchina del servente Web, per questultimo sufciente connettersi localmente a PostgreSQL.

Web, basi di dati e linguaggio PHP

145

7.4.4 Creazione di una tabella in PostgreSQL per le prove

Creiamo, come utente fulvio nella base di dati omonima, una tabella di nome rubrica per le successive prove di gestione via Web con PHP; la tabella contiene alcuni indirizzi e numeri telefonici e ha una chiave costituita da codice auto-incrementante:
fulvio=> CREATE TABLE rubrica(codice serial, cognome VARCHAR(20), nome VARCHAR(20), fulvio(> indirizzo VARCHAR(40), telefono VARCHAR(15), data_nas DATE, email VARCHAR(30));

come si vede il comando pu essere spezzato su pi righe; le righe successive alla prima sono righe di continuazione come evidenziato anche dalla stringa di invito che cambia aspetto. Il comando viene considerato concluso quando si incontra il simbolo ;. Inseriamo alcune registrazioni allinterno della tabella con i comandi:
fulvio=> INSERT INTO rubrica (cognome, nome, indirizzo, delefono, data_nas, email) fulvio-> VALUES(Paperino, Paolino, via Roma 1 Paperopoli, fulvio(> 010011234567,1980-01-01,paperino.paolino@maxplanck.it); fulvio=> INSERT INTO rubrica (cognome, nome, indirizzo, telefono, data_nas, email) fulvio-> VALUES(Rossi, Mario, via Roma 34 Treviso, fulvio(> 04220101010,1981-01-01,rossi.mario@maxplanck.it);

Si noti come i valori del campo codice non vengano inseriti perch, essendo esso auto-incrementante, viene opportunamente valorizzato dal servente PostgreSQL. Verichiamo i dati inseriti con il comando:
fulvio=> SELECT * FROM rubrica;

che dovrebbe dare il risultato mostrato in gura 7.12.

Figura 7.12. |

146

Web, basi di dati e linguaggio PHP

Le stesse operazioni possono essere fatte mediante il pi amichevole programma phppgadmin utilizzabile, dopo linstallazione e la congurazione per le quali si rimanda alla documentazione del programma stesso, collegandosi allURI: http://localhost/phppgadmin.

7.5 Introduzione al linguaggio PHP

Il PHP (inizialmente Personal Home Pages, adesso PHP Hypertext Preprocessor) nasce nel 1995 per mano di Rasmus Lerdorf allo scopo di semplicare la gestione di alcune pagine HTML. La primissima versione era originata dal alcuni script Perl ma successivamente Lerdorf ne scrisse una versione in linguaggio c. Le tappe pi importanti della successiva evoluzione sono state: nel giugno 1998 esce PHP3 con il nuovo motore Zend (frutto del lavoro di Zeev Suraski e Andi Gutmans), il supporto per molte basi di dati (oltre a quello gi presente per mSQL, PostgreSQL, MySQL) e la possibilit di essere usato su macchine MS-Windows; PHP risulta installato in circa il 10% dei domini esistenti; nel maggio 2000 esce PHP4 e la licenza passa da GPL a licenza speciale (PHP); viene inserito il supporto per le sessioni; nel 2004 la volta di PHP5 che, grazie al motore Zend versione 2 estende il linguaggio secondo il modello della programmazione ad oggetti; inoltre viene introdotto il supporto allXML e ai Web Services; attualmente PHP installato su oltre il 30% dei serventi Web. Si tratta di un linguaggio interpretato, multi-piattaforma, che viene utilizzato principalmente per dotare di capacit elaborativa i documenti HTML (anche se esiste la possibilit di eseguire script da linea di comando grazie al pacchetto php5-cli). Le istruzioni PHP sono incorporate allinterno dei sorgenti HTML e vengono eseguite dal lato servente grazie alla presenza del motore Zend. Il linguaggio si presta particolarmente per la scrittura di applicazioni Web per lamministrazione di basi di dati; i gestori di basi di dati supportati sono moltissimi e fra essi troviamo MySQL, PostgreSQL, Oracle, Sybase, Informix. Una trattazione completa del linguaggio PHP non rientra negli scopi di queste dispense; ci limitiamo a illustrare le sue caratteristiche di base, aiutandoci con degli esempi, per essere poi in grado di realizzare dei banali interfacciamenti a basi di dati MySQL e PostgreSQL.

Web, basi di dati e linguaggio PHP

147

Qualche dettaglio in pi viene fornito sulla gestione delle sessioni e sulla prevenzione della SQL injection che sono argomenti molto importanti ma non sempre considerati in modo adeguato nei testi, nei manuali e in genere nella documentazione riguardante luso di PHP.

7.6 Cenni alla sintassi del linguaggio PHP

I comandi PHP si inseriscono allinterno di un documento HTML in qualunque posizione ma si tengono separati dal resto del sorgente racchiudendoli tra le stringhe ;<?php e ?>. I documenti contenenti comandi PHP devono avere estensione .php e non .html; il viceversa non vero: si possono cio scrivere documenti privi di istruzioni PHP il cui nome ha estensione .php senza temere alcun malfunzionamento (semplicemente, malgrado lestensione, essi non vengono elaborati dal motore Zend di PHP). Vediamo subito un esempio che permette anche di vericare il buon funzionamento del PHP sulla nostra macchina: deniamo nella directory radice del servente Web (solitamente /var/www/) un le chiamato phpinfo.php contenente questa unica riga:
|<?php phpinfo(); ?>

Se si apre il documento collegandosi a http://localhost/phpinfo.php e se tutto funziona correttamente, si ottiene una risposta, mostrata parzialmente nella gura 7.14, contenente numerose informazioni riguardanti il PHP, il servente Web ed altro ancora.
Figura 7.14. |

Il linguaggio PHP pu essere utilizzato anche indipendentemente dalla connessione a basi di dati, come evidenziato dal seguente esempio in cui vediamo un documento HTML per con un modulo per limmissione di dati, arricchito con alcuni comandi PHP; i dati di input vengono passati ad un altro le e trattati ancora con istruzioni PHP.

148 Ecco il sorgente del primo documento:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

Web, basi di dati e linguaggio PHP

|<html> |<head> |<title>Modulo 1 con php</title> |</head> |<body> |<h2>Modulo gestito con PHP</h2> |<p/> |Sei collegato al servente Web: |<b><?php |//echo $SERVER_NAME; |echo $_SERVER[SERVER_NAME] |?></b> |<p/>&nbsp;allindirizzo: |<b><?php echo $_SERVER[SERVER_ADDR]; ?></b> |<p/>Servente fornito da: |<b><?php echo $_SERVER[SERVER_SOFTWARE]; ?></b> |<p/>Sei collegato dallindirizzo: |<b><?php echo $_SERVER[REMOTE_ADDR]; ?></b> |<p/><br/> |Inserisci i tuoi dati anagrafici |<p/> |<form action="./modulo1_ris.php" method="post"> |<p/>Cognome: <input type="text" name="cognome" size="20" maxlength="20"/> |<p/>Nome: <input type="text" name="nome" size="20" maxlength="20"&/gt; |<p/>Eta: <input type="radio" name="eta" value="1-18"/>1-18 |&nbsp;&nbsp;<input type="radio" name="eta" value="19-40"/>19-40 |&nbsp;&nbsp;<input type="radio" name="eta" value="41-65"/>41-65 |&nbsp;&nbsp;<input type="radio" name="eta" value="66-99"/>66-99 |<p/>E-mail: <input type="text" name="email" size="30" maxlength="30"/> |<p/><input type="reset" value="Reset"/> |<input type="submit" value="Invia"/> |</form> |</body> |</html>

Come al solito i numeri di riga sono stati aggiunti per facilitare la spiegazione delle varie parti del sorgente; prima per di commentarlo in dettaglio forniamo alcune informazioni sulla sintassi dei comandi PHP che ha grandi somiglianze con quella del linguaggio c: le istruzioni PHP si scrivono in minuscolo e si concludono sempre con ;; i blocchi di istruzioni sono delimitati da { e } i commenti si inseriscono con // su una riga singola oppure compresi tra /* e */ anche su pi righe gli operatori e molte istruzioni (ad esempio if, for, while) sono gli stessi del linguaggio c. Altre caratteristiche il linguaggio PHP le ha invece ereditate dal Perl: i nomi delle variabili devono iniziare con il simbolo $

Web, basi di dati e linguaggio PHP

149

nelle istruzioni di output le variabili vengono interpolate se contenute tra doppi apici e lasciate inalterate se tra apici singoli; c il supporto alle espressioni regolari; esiste listruzione foreach e si possono usare vettori associativi. Notiamo inoltre che, come il Perl, anche PHP un linguaggio debolmente tipizzato; ci signica che non occorre dichiarare il tipo delle variabili prima di utilizzarle e che le conversioni di tipo eventualmente necessarie vengono fatte, quando possibile, automaticamente a tempo di esecuzione. Vediamo adesso qualche dettaglio riguardante il documento precedente: nella prima parte (righe 9-18) vengono visualizzate informazioni sulla connessione grazie allistruzione echo e alluso di alcune variabili di ambiente; il resto del documento contiene la denizione del modulo per limmissione di semplici dati anagraci; le variabili di ambiente di cui sopra fanno parte del gruppo di variabili messe a disposizione dal servente HTTP (vedi paragrafo 6.7) e sono utilizzabili dal PHP grazie al vettore associativo $_SERVER; un vettore associativo un vettore contenente una serie di coppie chiave-valore cui si accede specicando la chiave dellelemento cercato invece di un indice come nei vettori tradizionali; quindi, ad esempio, a riga 14, riferendosi alla chiave SERVER_ADDR. si ottiene il rispettivo valore, cio lindirizzo IP del servente; a riga 10 abbiamo una istruzione PHP commentata che stata inserita per poter accennare al vecchio metodo con cui venivano gestite le variabili di ambiente in PHP: no alla versione 4.2 era possibile accedere direttamente a tali variabili, come si vede nellistruzione commentata, ed era addirittura possibile usare le variabili provenienti da un modulo semplicemente facendo riferimento al loro nome preceduto da un $ (questo fatto illustrato nel listato del prossimo documento); nelle versioni pi recenti di PHP tutto questo non pi possibile a meno che non si cambi nel le di congurazione /etc/php5/apache2/ php.ini la riga:
|register_globals = Off

in:
|register_globals = On

cosa comunque altamente sconsigliata per motivi di sicurezza; in luogo di questo accesso diretto alle variabili, ormai deprecato, si devono utilizzare i vettori associativi superglobali (cio accessibili da qualsiasi punto di un sorgente PHP) di cui un esempio $_SERVER e altri molto importanti sono $_POST e $_GET introdotti nel prossimo documento. Laspetto del documento quello mostrato nella gura 7.18.

150
Figura 7.18. |

Web, basi di dati e linguaggio PHP

Molto importante notare che, se si visualizza il sorgente della pagina con lapposita funzione disponibile nel programma di navigazione, il codice PHP non risulta visibile; esso infatti non viene inviato alla macchina cliente visto che non compito di questultima lelaborazione di quelle istruzioni. Si noti che i dati del modulo vengono inviati a modulo1-ris.php che risiede nella stessa directory del documento di partenza; qui infatti non obbligatorio denire una directory apposita, come la /cgi-bin usata per i CGI, dove memorizzare gli script PHP. Il le per lelaborazione dei dati e la creazione della risposta non altro che un ulteriore pagina HTML corredato da istruzioni PHP; il suo contenuto :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

|<html> |<head> |<title>Modulo 1 risposta con php</title> |</head> |<body> |<h2>Risposta gestita con PHP</h2> |<p/> |Sei collegato al servente Web: |<b><?php echo $_SERVER[SERVER_NAME] ?></b> |&nbsp;allindirizzo: |<b><?php echo $_SERVER[SERVER_ADDR]; ?></b> |<p/> |Servente fornito da: |<b><?php echo $_SERVER[SERVER_SOFTWARE]; ?></b> |<p/> |Sei collegato dallindirizzo: |<b><?php echo $_SERVER[REMOTE_ADDR]; ?></b> |<p/><br/> |Hai inserito i seguenti dati: |<!-- <p/>Cognome: <?php echo $cognome; ?> -->

Web, basi di dati e linguaggio PHP

21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

151

|<?php |if ($_SERVER[REQUEST_METHOD]=="post") { | $cognome=$_POST[cognome]; | $nome=$_POST[nome]; | $eta=$_POST[eta]; | $email=$_POST[email]; |} |else { | $cognome=$_GET[cognome]; | $nome=$_GET[nome]; | $eta=$_GET[eta]; | $email=$_GET[email]; |} |?> |<p/>Cognome:<b> <?php print("$cognome"); ?> |<!-- <p/>Cognome:<b> <?php print($cognome); ?> --> |<?php print("</b><p/>Nome:<b> $nome"); ?> |</b><p/>Eta:<b> <?php echo $eta; ?> |</b><p/>E-mail:<b> <?php echo $email; ?> |</b><p/><br/> |<?php |$var1 = strstr($_SERVER[HTTP_USER_AGENT], "Mozilla"); |if (!strstr($var1, "compatible") and ($var1)) { | echo "Stai usando il browser Mozilla o uno da esso derivato"; } |elseif (strstr($var1, "MSIE")) { | echo "Stai usando il browser Internet Explorer"; } | else { | echo "Stai usando un browser diverso da Explorer e Mozilla"; } |?> |</body> |</html>

La prima parte ricalca quella del primo documento; successivamente vengono visualizzati i dati inviati dal modulo. Notiamo subito che, a differenza di quanto avviene con i CGI, non necessario far precedere il contenuto della risposta dallintestazione HTTP e dalla riga vuota in quanto questo a questo provvede automaticamente il motore PHP nel momento in cui viene incontrata la prima istruzione di output (echo o print()). Commentiamo pi in dettaglio le parti pi signicative del sorgente: la riga 20 commentata e mostra come si potrebbe accedere direttamente alle variabili del modulo se fosse attivata lopzione register_globals; la cosa, come detto, decisamente da evitare e quindi si usa il vettore super-globale $_POST oppure $_GET in base a quale il metodo di invio dei dati (righe dalla 22 alla 33); in alternativa si potrebbe usare il vettore super-globale $_REQUEST che contiene i dati provenienti dal modulo qualunque sia il metodo utilizzato per linvio; alle righe 35 e 36 vediamo luso della funzione print() al posto della echo; la riga 37 pu essere considerata speculare rispetto alle altre righe in cui si emette un output in quanto in essa abbiamo la funzione di uscita del PHP che si preoccupa di emettere una

152

Web, basi di dati e linguaggio PHP parte di codice HTML oltre al valore di una variabile; nelle altre righe abbiamo invece luscita PHP inserita allinterno dei normali tag HTML (separata ovviamente dalle stringhe <?php e ?>); i due modi di far convivere il codice HTML con le istruzioni PHP sono ugualmente efcaci e la preferenza dipende dalle caratteristiche del documento di risposta o dellelaborazione che si sta effettuando: si pu addirittura scrivere un le PHP in cui tutto il contenuto della risposta, compresi i tag HTML, viene emesso allinterno di istruzioni echo o funzioni print() nel codice PHP;

sempre osservando le righe 35, 36 e 37 possiamo sottolineare il concetto di espansione di una variabile: quando si usa una variabile in output ad essa viene sostituito il suo valore anche se contenuta fra doppi apici come una costante stringa; per evitare questo comportamento occorre usare gli apici singoli come mostrato nella riga 36 che commentata; il suo effetto sarebbe quello di emettere la stringa "$cognome" piuttosto che il valore di tale variabile; alle righe 41-49 si cerca di determinare con quale browser lutente ha compilato il modulo e inviato i dati: a riga 42 viene denita una variabile con il risultato della funzione strstr() denita sulla stringa contenuta nella variabile di sistema HTTP_USER_AGENT e sulla stringa "Mozilla"; il risultato la stringa ottenuta da quella di partenza escludendo la parte precedente la parola "Mozilla"; nelle righe 43-48 ci sono alcune istruzioni condizionali la cui sintassi esattamente uguale a quella del linguaggio c (si noti ad esempio luso del simbolo ! per la negazione) in cui si usa ancora la funzione strstr(); la logica complessiva la seguente: se $var1 diversa dalla stringa vuota e non contiene la stringa "compatible" stiamo usando il programma di navigazione Mozilla o uno da esso derivato, altrimenti se contiene la stringa "MSIE" stiamo usando Internet Explorer, altrimenti stiamo usando un programma di navigazione diverso da entrambi. Laspetto della risposta quello mostrato nella gura 7.20.
Figura 7.20. |

Web, basi di dati e linguaggio PHP

153

Se il modulo di provenienza dei dati prevede la possibilit di pi valori per uno stesso campo (caso di un controllo <select> con attributo multiple), occorre attribuire al campo un nome terminante con [] in modo che in PHP siano poi disponibili i valori immessi allinterno di un vettore; se ad esempio il nome nel modulo scelte[] in PHP abbiamo che $_REQUEST[scelte] un vettore e non un singolo valore.

7.7 Validazione dellinput con PHP (cenno alle espressioni regolari)

Le istruzioni PHP possono essere anche utilizzate per controllare la correttezza dei dati inseriti in un modulo. In certi casi per controlli di questo tipo vengono svolti direttamente sulla macchina cliente con codice eseguito su questultima usando ad esempio JavaScript. Questa soluzione presenta lindubbio vantaggio di far diminuire il carico di lavoro del servente ma non sempre praticabile: se ad esempio si deve controllare la presenza di un codice prodotto in un archivio residente sulla macchina remota, non si pu fare a meno di utilizzare un modulo di elaborazione che venga eseguito su questultima e cio lato servente. Inoltre lutente che sta usando la procedura potrebbe aver disabilitato lesecuzione di codice JavaScript sul suo programma di navigazione, rendendo cos inefcaci i controlli inseriti sul lato cliente. Facendo riferimento allesempio del paragrafo precedente, supponiamo di voler controllare che il campo denominato email sia non vuoto e sia un indirizzo di posta elettronica scritto correttamente; il controllo viene fatto usando istruzioni PHP da aggiungere ovviamente al le modulo1_ris.php. Vengono mostrate le singole istruzioni da utilizzare lasciando al lettore lindividuazione delle opportune modiche alla logica di elaborazione necessarie al loro inserimento nel le in oggetto. Il controllo sulla valorizzazione del campo email pu essere fatto con la funzione strlen() che restituisce la lunghezza in byte dellargomento:
|if (strlen($email)==0) { | echo "<p/>Il campo E-mail obbligatorio; torna al modulo e correggi!" |} |else { | ........

Per quanto riguarda invece la correttezza dellindirizzo di posta possiamo supporre che esso debba avere la seguente forma: almeno 2 caratteri diversi da spazio e da @; il simbolo @; almeno un carattere diverso da spazio, da punto e da @; un punto; almeno altri due caratteri diversi da spazio, da punto e da @.

154

Web, basi di dati e linguaggio PHP

Per controllare che la variabile sia aderente a questo formato (nel gergo tecnico si dice che si ha un match tra essa e la sequenza di cui sopra, chiamata pattern) si utilizza uno strumento molto efcace, proposto originariamente per il linguaggio Perl, ma ormai esportato in molti altri linguaggi: le espressioni regolari (REGEXP). Le espressioni regolari sono tanto potenti quanto ostiche, specialmente per i non esperti, anche a causa della loro sintassi davvero succinta e per niente amichevole. Una loro trattazione, anche solo superciale, richiederebbe probabilmente una dispensa apposita; ci limitiamo quindi a pochi esempi, fra i quali includiamo la soluzione da adottare per il controllo del nostro indirizzo di posta, condando che questo piccolo assaggio possa spingere chi necessita di approfondimenti a consultare la vasta mole di documentazione reperibile sullargomento. La funzione da usare per le espressioni regolari preg_match() che, nella forma pi comune ha due argomenti: il pattern e la stringa da controllare; se la stringa soddisfa il pattern la funzione ritorna vero, altrimenti ritorna falso. Ecco dunque listruzione per effettuare il controllo di correttezza sullindirizzo di posta elettronica:
|if (!preg_match("/^[^@ ]{2,}@[^@ \.]+\.[^@ \.]{2,}$/",$email)) { | echo "<p/>Il campo E-mail non valido; torna al modulo e correggi!" |} |else { | ......

Nella tabella seguente cerchiamo di fornire una spiegazione del pattern scandendolo da sinistra a destra e sottolineando ancora una volta che la mole di nozioni trascurate nella spiegazione nettamente superiore a quella delle nozioni presenti:
Simbolo pattern ^ [^@ ] {2,} @ [^@ \.] nel Spiegazione inizio della stringa, essa deve iniziare come specicato nel proseguo del pattern; un carattere diverso da @ e da spazio; le parentesi quadrate indicherebbero la scelta di uno qualsiasi dei caratteri in esse contenuti e il carattere ^ indica la negazione; il carattere o il gruppo di caratteri indicati in precedenza devono essere ripetuti due o pi volte; deve esserci il carattere @; un carattere diverso da @, da spazio e da punto; il carattere punto viene indicato mascherandolo con il carattere di escape \ perch un carattere speciale per i pattern (signicherebbe qualsiasi carattere); quanto appena indicato deve essere ripetuto una o pi volte (equivale a {1,}); deve esserci il carattere punto; un carattere diverso da @, da spazio e da punto; quanto appena indicato deve essere ripetuto due o pi volte; ne della stringa, essa deve nire secondo quanto appena indicato nel pattern.

+ \. [^@ \.] {2,} $

Come ulteriore esempio supponiamo di voler controllare la validit del campo cognome del modulo del paragrafo precedente; la regola che deve essere soddisfatta che siano presenti solo caratteri alfabetici minuscoli (eccetto la prima maiuscola), il carattere spazio e lapostrofo (sem-

Web, basi di dati e linguaggio PHP

155

plichiamo leggermente la questione imponendo che nei cognomi composti sia maiuscolo solo il primo carattere).
|$cognome=stripslashes($cognome); |if (!preg_match("/^[A-Z]{1}[ a-z]*$/",$cognome)) { | echo "<p/>Il campo Cognome non valido; torna al modulo e correggi!" |} |else { | ......

In questo esempio vediamo anche luso della funzione stripslashes() che permette di eliminare il carattere \ aggiunto automaticamente nellinput per mascherare eventuali . Esiste anche la funzione addslahes() che permette invece di aggiungere il carattere \ prima di caratteri che possono causare problemi se presenti in campi da inserire in una base di dati; si tratta dei caratteri , " e \. Anche in questo caso utilizziamo una tabella per la spiegazione del pattern per il controllo del cognome:
Simbolo pattern ^ [A-Z] {1} [ a-z] * $ nel Spiegazione inizio della stringa; un carattere qualsiasi compreso tra A e Z, quindi maiuscolo; il carattere o il gruppo di caratteri indicati in precedenza devono essere presenti solo una volta; un carattere spazio o alfabetico minuscolo o apostrofo; quanto appena indicato deve essere ripetuto zero o pi volte; ne della stringa.

Inne ipotizziamo di dover controllare un numero di telefono (contenuto nella variabile $telefono) imponendo che debba essere costituito da un insieme di due, tre o quattro cifre, seguite dal segno meno e da almeno altre 4 cifre.
|if (!preg_match("/^[0-9]{2,4}-[0-9]{4,}$/",$telefono)) { | echo "<p/>Il campo Telefono non valido; torna al modulo e correggi!" |} |else { | ......

Ed ecco la tabella per la spiegazione del pattern:

Simbolo pattern ^ [0-9] {2,4} [0-9] {4,} $ nel Spiegazione inizio della stringa; un carattere qualsiasi compreso tra 0 e 9, quindi una cifra; il carattere o il gruppo di caratteri indicati in precedenza devono essere presenti da due a quattro volte; deve esserci il segno meno; una cifra; quanto indicato in precedenza deve essere presente quattro o pi volte; ne della stringa.

156

Web, basi di dati e linguaggio PHP

7.8 Le sessioni in PHP

In questo paragrafo prendiamo in esame un argomento molto interessante: la gestione delle sessioni in PHP; prima di entrare nei dettagli e di illustrare qualche esempio per opportuno introdurre il concetto di stato di una applicazione e le motivazioni per cui le sessioni sono importanti per la gestione dello stato nelle applicazioni Web.

7.8.1 Il concetto di stato di un applicazione

Quando si utilizza una normale applicazione su un singolo sistema di elaborazione (quindi senza coinvolgere la rete come accade invece per le applicazioni Web) non si riesce a cogliere immediatamente lesistenza di due entit al suo interno: la parte dellapplicazione che svolge le funzioni di interfaccia con lutente; la parte di logica di programmazione. In molti casi questi due componenti appaiono indistinti, ma ogni volta che lutente interagisce con linterfaccia (ad esempio inserendo dei dati o effettuando delle scelte su un menu) essa comunica con la logica di programmazione la quale svolge certe elaborazioni ed eventualmente fornisce una risposta ancora allinterfaccia utente. Possiamo anche dire che ogni azione svolta con linterfaccia utente provoca un cambiamento nello stato dellapplicazione, cio alla condizione in cui si trovano, istante per istante, i dati e le variabili dellapplicazione stessa. Questo cambiamento di stato pu essere provocato anche da altri fattori indipendenti dalle azioni dellutente e previsti direttamente nella logica di programmazione. Il punto interessante per il seguente: mentre nelle applicazioni tradizionali la comunicazione tra interfaccia e logica di programmazione avviene con continuit e quindi la gestione dei cambiamenti di stato non problematica e talvolta non viene neppure affrontata in modo esplicito, nelle applicazioni Web siamo costretti ad affrontare il problema in quanto il protocollo HTTP privo di stato. Questo signica che non esiste alcun meccanismo automatico che tenga traccia dei cambiamenti di stato degli oggetti dellinterfaccia utente (i moduli visualizzati con il browser sulle macchine clienti) e li comunichi alla logica di programmazione (ad esempio script PHP eseguiti sul servente) e viceversa. Nelle applicazioni Web la comunicazione tra interfaccia e logica di programmazione non automatica ma guidata dallutente e talvolta pu essere anche molto lenta. Inoltre uno script della logica di programmazione (supponiamo scritto in PHP) viene attivato solo al momento della richiesta dellutente e dellinvio dei dati e quando termina vengono persi i valori di tutti i dati e di tutte le variabili usate nellelaborazione; anche se lutente ha limpressione che lapplicazione sia ancora attiva (perch vede comparire sul suo browser una qualche risposta) in effetti nessun programma in quel momento in esecuzione ed una nuova attivazione dello script non pu avere a disposizione i valori dei dati dellelaborazione precedente. Questo naturalmente avviene a meno che non si individui un meccanismo che permetta di mantenere lo stato nellambito di una applicazione che usa il protocollo HTTP facendo in modo che tutti i dati dellapplicazione (o almeno quelli che interessano) siano persistenti. Si tratta quindi di trovare il modo di attivare e gestire una sessione di lavoro che consiste in tutte le interazioni che lutente svolge dal momento in cui si collega la prima volta allapplicazione

Web, basi di dati e linguaggio PHP

157

residente sul servente (eventualmente accreditandosi), al momento in cui chiude il collegamento oppure scade un contatore di tempo di inattivit.

7.8.2 Mantenere lo stato nelle applicazioni con PHP

Esistono vari metodi per mantenere lo stato usando il linguaggio PHP; illustriamoli brevemente eccetto quello considerato migliore (sessioni native in PHP) che viene approfondito maggiormente: campi nascosti nei moduli: si tratta di utilizzare controlli <input> di tipo "hidden" per comunicare allapplicazione i dati che devono essere conservati tra una attivazione e laltra di uno script; questo metodo utilizzabile solo in presenza di un esiguo volume di dati da rendere persistenti; accodamento alla stringa dellURI: si tratta di passare i dati allapplicazione accodandoli allURI del ricevente come accade quando si invia un modulo con metodo "get"; in questo caso si soggetti alle stesse limitazioni gi discusse nel paragrafo riguardante linvio dei dati dei moduli HTML (paragrafo 6.8); uso di basi di dati: i valori delle variabili possono essere memorizzati in una tabella di una base di dati; anche questa soluzione ha una controindicazione: il sovraccarico di lavoro per il servente per effettuare gli accessi alla base di dati; uso dei cookies (biscottini): i cookies sono un modo per memorizzare sul computer cliente un piccolo quantitativo di dati che devono persistere nellambito di una sessione di lavoro; sebbene lidea non sia tecnicamente da scartare, bene non fare troppo afdamento su questa soluzione perch, avendo i cookies acquisito una cattiva fama presso il pubblico dei navigatori in Internet (si pu abusare del loro uso per acquisire ad esempio informazioni sulle preferenze degli utenti a loro insaputa), spesso vengono addirittura disattivati con apposite scelte nella congurazione del browser; eventualmente quindi il caso di usarli solo per compiti utili ma non fondamentali per il funzionamento di una procedura Web (ad esempio per memorizzare le preferenze estetiche di un utente relativamente a un certo sito); sessioni native in PHP: si tratta senza dubbio della soluzione migliore e quindi le dedichiamo un piccolo approfondimento nel prossimo paragrafo.

7.8.3 Sessioni native in PHP

Lidea fondamentale che sta alla base della gestione delle sessioni in PHP quella di memorizzare i dati, che devono rimanere persistenti nellambito di queste ultime, sul servente; in questo modo si elimina la necessit di comunicare i dati stessi al cliente con i conseguenti problemi di riservatezza o di ingombro. Al cliente viene comunque assegnata una chiave chiamata identicatore di sessione che gli permette di identicarsi univocamente per una certa sessione e di vedersi associare i relativi dati persistenti. In PHP la chiave di sessione si chiama SID (Session Identier) ed un numero intero associato ad una e una sola sessione. Schematizzando al massimo la gestione di una sessione nativa in PHP pu quindi essere cos riassunta:

158

Web, basi di dati e linguaggio PHP

quando si crea la sessione (con opportuna funzione illustrata pi avanti) il servente genera il relativo SID e lo comunica al cliente; le variabili registrate per quella sessione (anche qui con apposita funzione) vengono memorizzate nella memoria di massa del servente in un le identicabile in base al numero di sessione (a volte il nome del le proprio il SID o almeno lo contiene); quando il cliente deve accedere alle variabili registrate per la sessione, basta che comunichi al servente il SID; se possibile usare i cookies il SID viene gestito sul cliente grazie ad essi, altrimenti viene passato al servente ponendolo in coda allURI delle richieste; la cosa fondamentale per che di tutto questo si occupa il motore PHP in modo trasparente per lo sviluppatore che si deve preoccupare solo di usare in modo adeguato le funzioni di avvio e chiusura di una sessione e di registrazione e lettura delle relative variabili. La gura 7.28 rappresenta quanto appena illustrato.
Figura 7.28. |

Le funzioni da usare per gestire le sessioni in PHP sono le seguenti: session_start(): serve ad avviare una sessione; session_register(nome_var): serve a registrare la variabile nome_var (da indicare senza $ iniziale e tra apici o virgolette); le variabili di sessione registrate sono disponibili nel vettore associativo super-globale $_SESSION; session_unregister(nome_var): serve a eliminare la registrazione della variabile nome_var (da indicare senza $ iniziale e tra apici o virgolette); session_destroy(): serve a chiudere la sessione; una sessione viene chiusa automaticamente terminando lesecuzione del browser da cui si generata oppure

Web, basi di dati e linguaggio PHP

159

dopo 1440 secondi (24 minuti) di inattivit; tale valore pu essere cambiato modicando nel le di congurazione /etc/php5/apache2/php.ini il valore di session.gc_maxlifetime. Si tenga presente che una sessione viene avviata automaticamente al momento che si esegue per la prima volta una session_register() anche in mancanza di una session_start(). Si osservi anche che la funzione session_start() deve essere invocata in ogni pagina in cui si vuole fare riferimento a quella sessione. Le istruzioni che provocano lavvio di una sessione devono essere posizionate in un punto dello script PHP che non interferisca con linvio automatico di intestazioni HTTP e quindi prima di qualsiasi istruzione PHP che emetta un output e anche di qualsiasi contenuto HTML scritto esternamente al codice PHP; la cosa migliore da fare allora denire un blocco PHP apposito proprio allinizio del le.

In certi casi (ad esempio quando pi applicazioni sono ospitate in un unico servente) pu essere importante che il le con i dati di sessione venga salvato in una posizione separata per ogni applicazione; in questo modo si pu evitare il rischio che altri script PHP accedano ai dati di unaltra sessione. A tal ne si deve usare la direttiva ini_set() prima di session_start() nel modo seguente:
| |
ini_set("session.save_path", "percorso_in_cui_salvare");

Concludiamo questa panoramica sulle sessioni in PHP con un esempio in cui gestiamo un contatore di accessi ad un sito Web (o, pi in piccolo, ad una pagina). Il valore del contatore viene memorizzato in un le, ovviamente sul servente (in questo modo accenniamo anche alluso dei le in PHP) e letto e incrementato ad ogni nuova richiesta di scaricamento della pagina. Se questo meccanismo fosse gestito senza uso di sessioni avremmo un inconveniente molto grave: ogni volta che la pagina viene ri-visitata senza essere usciti dalla sessione di lavoro (ad esempio con un semplice rinfresco oppure tornando indietro dopo avere seguito un collegamento che si origina da essa) otterremmo un incremento del contatore, cosa evidentemente non corretta (a meno che non vogliamo gonare i dati di accesso al nostro sito). Con luso delle sessioni, invece, lincremento del contatore pu essere fatto solo in presenza di una sessione appena avviata e non nelle visite successive nellambito della stessa sessione. Vediamo dunque il listato del le, chiamato conta_sisess.php, che gestisce il contatore delle visite correttamente:
1 2 3 4 5 6 7 8 9

|<?php |session_start(); |session_register(sessione); |$nomefile="conta.txt"; |if (!file_exists($nomefile)) { | $fp=fopen($nomefile,"w"); | fclose($fp); |} |$fp=fopen($nomefile,"r");

160
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Web, basi di dati e linguaggio PHP

|$num=fread($fp,4); |fclose($fp); |$sess=$_SESSION[sessione]; |$sess++; |$_SESSION[sessione]=$sess; |if ($sess == 1) |{ | $fp=fopen($nomefile,"w"); | $num++; | fwrite($fp,$num,4); | fclose($fp); |} |$sid=session_id(); |print ("<html><head><title>Contatore con sessione</title></head>\n"); |print ("<body><h2 style=\"text-align:center;\">Pagina
con contatore</h2>\n");

|print ("<p/>Numero visite (con gestione sessione - SID = $sid) = $num\n"); |print ("<p/>Clicca <a href=\"chiudi_sess.php\">qui</a> per
chiudere la sessione\n");

|print ("</body></html>"); |?>

Commentiamo il listato servendoci dei numeri di riga aggiunti per questo scopo: Lo script inizia con lattivazione della sessione e la regitrazione della variabile $sessione (righe 2 e 3); alla riga 4 si assegna il nome del le in cui memorizzare il valore del contatore a $nomele; nel nome non presente alcuna indicazione di percorso, questo signica che tale le risiede nella stessa directory in cui memorizzato lo script; con le righe da 5 a 8 si crea il le, se non esiste, tramite una operazione di apertura in scrittura (riga 6) con successiva chiusura; si noti la forte somiglianza tra queste funzioni di PHP per la gestione dei le e quelle analoghe del linguaggio c; la creazione del le ha successo solo se lutente www-data (che ricordiamo essere quello con i cui privilegi vengono eseguiti i processi del servente Web) ha il permesso di scrivere nella directory in cui il le deve essere memorizzato; rimaniamo ancora sulla riga 6 per sottolineare come la funzione di apertura di un le restituisca un valore, chiamato puntatore al le, (nel nostro caso assegnato a $fp) che poi deve essere utilizzato per tutte le successive operazioni da svolgere su quel le; in pratica con lapertura si viene a creare un legame tra il nostro programma e il le sico residente nella memoria di massa e tale legame esplicitato dal puntatore al le; nelle righe da 9 a 11 si apre il le in lettura (a questo punto esiste sicuramente), si legge il valore del contatore e si chiude il le; anche qui si possono notare forti analogie con il linguaggio c; la riga 10 merita qualche ulteriore chiarimento: viene assegnato alla variabile $num il valore letto nel le partendo dallinizio (il le stato appena aperto) e per una lunghezza di quattro byte; tale valore infatti un contatore, quindi un numero intero, e gli interi vengono memorizzati utilizzando quattro byte come in c e in molti altri linguaggi; con le righe dalla 12 alla 14 si legge il valore della variabile di sessione, lo si incrementa facendolo transitare in $sess (anche loperatore ++ ripreso dal linguaggio c) e lo si memorizza ancora nella variabile di sessione;

Web, basi di dati e linguaggio PHP

161

se il valore appena incrementato uno signica che la prima volta che tale operazione stata fatta e quindi deduciamo che la sessione stata appena avviata e dobbiamo incrementare il contatore; questo il ragionamento svolto nel blocco di selezione presente alle righe da 15 a 21; in particolare a riga 17 si apre il le in scrittura; nella successiva si incrementa il valore del contatore e a riga 19 lo si scrive nel le a partire dallinizio (il le stato appena aperto in scrittura) utilizzando quattro byte come specicato dal terzo parametro della funzione fwrite; inne a riga 20 si chiude il le; a riga 22 si pone in $sid lidenticativo della nostra sessione per poi visualizzarlo (questo non riguarda la gestione del contatore di accessi ed stato aggiunto solo per mostrare laspetto di un SID); le righe da 23 a 27, con una serie di print() creano la risposta in formato HTML da inviare al browser che si collegato a questa pagina; viene anche previsto un collegamento ad unaltra pagina (chiudi_sess.php) per poter chiudere la sessione; importante notare, nelle righe 24 e 26, luso delle virgolette sia nellambito dellistruzione PHP (cio la print()) sia allinterno del codice HTML da essa creato; ovviamente queste ultime non possono essere usate liberamente, perch causerebbero errore di sintassi nellistruzione PHP, e quindi vengono mascherate facendole precedere dal simbolo \ notiamo anche, sempre in queste istruzioni di ouput, luso del carattere speciale \n che corrisponde al codice ASCII 10 cio a riga nuova o line feed (LF); serve per scrivere il sorgente HTML della pagina di risposta su pi righe invece che su ununica riga (cosa che sarebbe comunque lecita). Nella gura 7.31 viene mostrato laspetto della risposta accompagnato dalla nestra di visualizzazione del relativo sorgente.
Figura 7.31. |

Aggiungiamo anche i listati dei le chiudi_sess.php, da attivare, per chiudere la sessione, tramite collegamento presente nella pagina appena mostrata, e conta_nosess.php che la versione di pagina con contatore di accessi non corretta in quanto non gestita con le sessioni. Per questi due le non viene mostrato laspetto in caso di apertura con il browser e non vengono commentate le istruzioni in quanto non contengono sostanziali novit rispetto a quanto illustrato nora.

162 Questo il listato di chiudi_sess.php:

Web, basi di dati e linguaggio PHP

|<?php |session_start(); |session_destroy(); |print ("<html><head><title>Chiusura sessione</title></head><body>\n"); |print ("Sessione chiusa! Arrivederci\n"); |print ("</body></html>"); |?>

Mentre questo conta_nosess.php:

|<?php |$nomefile="conta.txt"; |if (!file_exists($nomefile)) { | $fp=fopen($nomefile,"w"); | fclose($fp); |} |$fp=fopen($nomefile,"r"); |$num=fread($fp,4); |fclose($fp); |$fp=fopen($nomefile,"w"); |$num++; |fwrite($fp,$num,4); |fclose($fp); |print ("<html><head><title>Contatore senza sessione</title></head>\n"); |print ("<body><h2 style=\"text-align:center;\">Pagina
con contatore disonesto</h2>\n");

|print ("<p/>Numero visite (senza gestione sessione) = $num\n"); |print ("</body></html>"); |?>

7.9 Pagine PHP che richiamano se stesse

Una tecnica molto diffusa, nellambito della applicazioni scritte in PHP, quella di scrivere pagine che svolgono sia il compito di raccolta dati attraverso un modulo, sia quello di elaborazione invio della risposta. Prima di tutto occorre fare in modo che lo script invii i dati a se stesso; a tale scopo occorre inserire "$_SERVER[PHP_SELF]" (variabile globale contenente il nome dello script PHP in esecuzione) come valore dellattributo action del modulo. Usando poi una campo nascosto del modulo come variabile ag si riesce a discriminare se lo script viene attivato per la prima volta, e allora deve emettere il modulo per linput dei dati, oppure se stato richiamato dal modulo, e allora deve elaborare questi ultimi e, eventualmente, emettere una risposta. La logica di funzionamento dello script quella rappresentata nello schema visibile nella gura 7.34, realizzato in stile diagramma di usso.

Web, basi di dati e linguaggio PHP

Figura 7.34. |

163

Nellesempio viene anche fatto uso di campi riguardanti data e ora in modo da poter illustrare alcune funzioni PHP dedicate a questo tipo di dati.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

|<?php |print ("<html><head><title>Modulo autocontrollante</title></head>\n"); |print ("<body>\n"); |$giorno=date("d/m/Y"); |$ora=date("H:m:s"); |$PHP_SELF=$_SERVER[PHP_SELF]; |// se nascosto settato prende i valori in arrivo dal form |if (isset($_REQUEST[nascosto])) { | $cogn=$_REQUEST[cognome]; | $nom=$_REQUEST[nome]; | $datan=$_REQUEST[data_nas]; | $g=substr($datan,0,2); | $m=substr($datan,2,2); | $a=substr($datan,4,4); | |// controlli | $controlli=1; | if (!preg_match("/^[A-Z]{1}[ a-z]*$/",$cogn)) { | echo "<p/>Il campo Cognome non valido!\n"; | $controlli=0; | } | if (!preg_match("/^[A-Z]{1}[ a-z]*$/",$nom)) { | echo "<p/>Il campo Nome non valido!\n";

164
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

Web, basi di dati e linguaggio PHP

| | | | | | |} |// |if | | | | |
$controlli=0; } if(!checkdate($m,$g,$a)) { print("<p/>Errore nella data!\n"); $controlli=0; } se controlli ok e nascosto settato -- tutto ok (($controlli) and (isset($_REQUEST[nascosto]))) { print ("<h2>Dati inviati</h2>\n"); print ("<p/>Cognome: $cogn\n"); print ("<p/>Nome: $nom\n"); print ("<p/>Data di nascita: $g/$m/$a\n"); print ("<p/>Grazie. Clicca <a href=\"$PHP_SELF\">qui</a>

per tornare al modulo iniziale");

|} |else { |// emette il modulo | print ("<h1>Modulo raccolta dati</h1>\n"); | print ("<p/>Treviso, $giorno $ora<p/>\n"); | print ("<h2>Inserisci i tuoi dati</h2>\n"); | print ("<p/><form action=\"$PHP_SELF\" method=\"post\">\n"); | print ("Cognome: <input type=\"text\" size=\"15\" name=\"cognome\"
value=\"$cogn\"/>\n"); value=\"$nom\"/>\n");

| |

print ("<p/>Nome: <input type=\"text\" size=\"15\" name=\"nome\"

print ("<p/>Data di nascita (ggmmaaaa): <input type=\"text\" size=\"8\" maxlength=\"8\" name=\"data_nas\" value=\"$datan\"/>\n");

| print ("<input type=\"hidden\" name=\"nascosto\" value=\"1\"/>\n"); | print ("<p/><input type=\"submit\" value=\"Invia\"/>\n"); | print ("<input type=\"reset\" value=\"Reset\"/>\n"); | print ("</form>\n"); |} |print ("</body></html>"); |?>

Vediamo le parti pi signicative del listato: le righe 2,3 e 53 creano la parte di pagina HTML necessaria sia per il modulo che per la risposta; alle righe 4 e 5 viene usata la funzione date() che prevede due parametri: un formato e una marca temporale (timestamp); una marca temporale un numero intero che rappresenta il numero di secondi trascorsi dalle ore 00:00 del 1 gennaio 1970 (istante zero per i sistemi Unix e derivati); per ottenere la marca temporale corrente si pu usare la funzione time() che non prevede argomenti, mentre con la funzione mktime(ora, minuto, secondo, giorno, mese, anno) si ottiene la marca temporale calcolata dallistante zero a quello indicato negli argomenti; quando nella funzione date() si indica solo il primo parametro, come nelle righe 4 e 5, si suppone che il secondo sia il valore restituito da time() e quindi si ottiene la data e ora corrente formattata secondo quanto indicato nel primo parametro; i formati qui utilizzati sono solo due fra quelli possibili e il loro signicato del tutto intuitivo: notiamo solo che con a si indica lanno di due cifre mentre con A di quattro, con h lora tra zero e dodici mentre con H tra zero e ventiquattro;

Web, basi di dati e linguaggio PHP

165

alla riga 6 si acquisisce il nome del le che in esecuzione per usarlo per il richiamo a se stesso; la riga 8 quella fondamentale per la logica dello script: viene controllato se la variabile del modulo chiamata "nascosto" possiede un valore oppure no (a questo serve la funzione isset()); il controllo di riga 8 da esito positivo se lo script stato richiamato per linvio dei dati che quindi vengono acquisiti (righe 9-15); il ramo vero della selezione si estende no a riga 30 comprendendo anche i controlli sui valori il caso contrario si ha quando lo script stato avviato per la prima volta e in tal caso non si fa niente (il ramo falso della selezione vuoto); nelle righe da 12 a 14 vengono estratti dalla data inserita nel modulo i tre componenti giorno, mese e anno con luso della funzione substr() che serve a estrarre una sottostringa da una stringa e prevede tre parametri: la stringa, il byte di partenza, la quantit di byte da estrarre (si tenga presente che il primo byte di una stringa quello di posto zero); in questa parte dello script si nota bene come il linguaggio PHP operi le conversioni automatiche di tipo delle variabili: $g, $m, $a sono stringhe e vengono fornite come parametri ad una funzione che si aspetta numeri; siccome per il loro contenuto effettivamente numerico, il tipo viene convertito automaticamente e non si ha alcuna segnalazione di errore (cosa che invece accadrebbe se fossimo in presenza di linguaggi pi rigorosi nella gestione delle variabili come il linguaggio c). nelle righe da 16 a 29 ci sono i controlli sui valori in arrivo dal modulo con il banale uso di un ag (variabile $controlli); in particolare a riga 26, per il controllo sulla data, viene usata unaltra funzione riguardante le date: checkdate() che serve a controllarne la validit; i parametri, come si vede, devono essere passati nellordine usato negli Stati Uniti: mese, giorno, anno; se la data valida la funzione restituisce vero altrimenti restituisce falso; da riga 32 a riga 52 c laltra selezione fondamentale per lo script: se il campo nascosto settato e i controlli sono andati bene, viene emesso un riepilogo dei dati inseriti seguito da un collegamento per il ritorno al modulo iniziale (righe da 33 a 38); in caso contrario viene emesso il modulo in cui i campi di input sono eventualmente precaricati con i valori precedenti (righe da 40 a 52); questa seconda eventualit pu infatti vericarsi in due casi: prima esecuzione dello script, e allora i campi sono vuoti, oppure errore nellinput, e allora i campi contengono i valori immessi precedentemente. Nelle due successive gure 7.36 e 7.37 vediamo il caso in cui si hanno errori nellinput e quello in cui limmissione si conclude positivamente.
Figura 7.36. |

166

Web, basi di dati e linguaggio PHP

Figura 7.37. |

7.10 Gestione degli errori in PHP

Come per tutti gli altri linguaggi di programmazione, anche programmando in PHP possibile commettere tre tipi di errori: errori di sintassi: si sbaglia la scrittura di una istruzione o di una funzione; il motore PHP rileva lerrore e lesecuzione dello script neanche inizia; errori a tempo di esecuzione (runtime): si manifestano al momento che il codice viene eseguito (esempio tipico la divisione per zero); possono essere fatali se interrompono lesecuzione dello script, oppure non fatali; errori logici: lo script funziona regolarmente ma non produce i risultati aspettati (ad esempio se si inverte la logica di funzionamento di una selezione a due vie); questi errori non vengono ovviamente segnalati dal motore PHP, deve essere il programmatore ad individuarli con una attenta attivit di verica del comportamento dei programmi. Nelle due successive gure, 7.38 e 7.39 vediamo quello che appare nella nestra del browser rispettivamente in caso di un errore di sintassi e di un errore a tempo di esecuzione (si vuole aprire un le che non esiste).
Figura 7.38. |

Web, basi di dati e linguaggio PHP

167

Figura 7.39. |

Come si vede, nel secondo caso lerrore non fatale e lo script prosegue ugualmente fornendo un risultato ovviamente non corretto. Quando una procedura scritta in PHP viene resa attiva presso gli utenti (si dice che passa in produzione), lecito aspettarsi che tutti gli errori di sintassi siano stati eliminati; gli errori a tempo di esecuzione sono invece pi subdoli perch possono manifestarsi solo in certe condizioni (il le da aprire esisteva no a ieri e oggi non esiste pi); in questo caso un buon programmatore dovrebbe prevedere opportuni controlli allinterno dello script in modo da intercettare le possibili situazioni di errore gestendole con opportuni messaggi allutente (Larchivio xyz, fondamentale per la procedura si danneggiato; contattare lamministratore del sistema). Nellambito della gestione degli errori possono essere procuamente utilizzate i comandi break, per forzare luscita da un blocco di istruzioni (ad esempio da un ciclo), e exit per forzare la conclusione dello script. Se lo sviluppatore ragionevolmente certo di avere previsto la gestione di tutti gli errori a tempo di esecuzione della sua procedura (o almeno dei pi probabili), pu essere opportuno disabilitare la visualizzazione sul browser dei messaggi di errore PHP che pu generare sconcerto nellutente oltre che fornirgli informazioni inopportune. Per fare questo occorre intervenire nel le di congurazione /etc/php5/apache2/php.ini per cambiare la riga:
|display_errors = On

ponendo il valore a Off . Questa modica fa si che, in caso di errore, lutente riceva una pagina bianca; ci probabilmente

168

Web, basi di dati e linguaggio PHP

non fa diminuire il suo sconcerto, ma almeno evita che gli vengano visualizzate informazioni inopportune. Avendo disattivato la visualizzazione dei messaggi di errore pu essere opportuno attivare la loro registrazione in un le apposito del servente; per fare questo occorre (sempre nel le di congurazione) cambiare la riga:
|log_errors = Off

ponendo il valore a On e togliere il commento (che in questo le si ottiene con il ;) alla riga:
|;error_file = filename

inserendo il nome del le desiderato (ad esempio /var/log/php.log) al posto di lename; il le in prescelto deve essere scrivibile dallutente www-data per i motivi ormai pi volte spiegati. Rimanendo nella sezione di gestione degli errori del le di congurazione, pu servire intervenire sulla riga della variabile error_reporting per alterare il livello di errori che vengono segnalati; a tale proposito sono presenti nel le molte righe commentate che spiegano in dettaglio i valori che possono essere assegnati.

7.11 Inclusione di codice e scrittura di funzioni in PHP

Quando si realizzano applicazioni Web di una certa portata, pu essere molto utile denire una volta per tutte alcune caratteristiche comuni a tutte le pagine del sito oppure porzioni di codice da utilizzare in punti diversi dellapplicazione stessa; per questo motivo sono presenti in PHP due funzioni con le quali si possono caricare in un uno script porzioni di codice o di sorgente HTML. Le due funzioni sono include() e require(); entrambe caricano, al momento dellesecuzione,il le indicato come argomento e segnalano un problema nel caso esso non esista; la require() in tale situazione blocca lesecuzione, la include() invece prosegue comunque. Al ne di evitare possibili problemi dovuti alla inclusione successiva di uno stesso le, talvolta utile usare le funzioni include_once() e require_once() che si comportano come le precedenti alla prima inclusione ma ignorano tentativi di caricamento successivi. I le da includere possono avere dei nomi arbitrari, ma c la consuetudine di assegnare .html a le contenenti HTML e estensione .inc a le con codice PHP; questultima scelta pu essere pericolosa perch, in caso di errata congurazione del servente Web, i programmi di navigazione potrebbero visualizzare il contenuto di tali le, mostrando quindi eventuali dati riservati (ad esempio i parametri di connessione ad una base di dati gestita dallapplicazione scritta in PHP). Si suggerisce quindi di assegnare lestensione .php ai le da includere contenenti istruzioni del linguaggio. Come esempio vediamo un tipico utilizzo della include() in cui si effettua linclusione di due le HTML contenenti rispettivamente la testata e la coda che si suppongono comuni a tutte le pagine del nostro sito; evidentemente linclusione deve essere fatta in modo analogo in tutte le pagine interessate:
|<?php |include("testata.html"); |?>

Web, basi di dati e linguaggio PHP

|..... |(contenuto della pagina) |..... |<?php |include("coda.html"); |?>

169

Linclusione di codice PHP si usa molte volte per rendere disponibili, allinterno degli script, le denizioni di una serie di funzioni che essi possono utilizzare; ovviamente qui parliamo di funzioni denite dal programmatore, che vanno ad aggiungersi a quelle predenite nel linguaggio PHP. Rendere disponibili le funzioni in modo centralizzato in uno o pi le da includere permette una gestione pi comoda delle modiche nel caso in cui esse siano necessarie in molti script diversi; questo naturalmente non signica che la denizione di funzioni non possa avvenire direttamente allinterno degli script; nel proseguo, per comodit di esposizione, faremo proprio riferimento al caso in cui le funzioni siano denite nello stesso script in cui sono richiamate. Dal punto di vista del motore PHP non c alcuna differenza rispetto al fatto che la dichiarazione di una funzione sia nello script che la usa piuttosto che in un le esterno da includere; infatti linclusione provoca la copia delle istruzioni contenute in questultimo nello script prima che esse siano eseguite. Una funzione PHP caratterizzata da un nome, un insieme di parametri opzionali e, in genere, da un valore di ritorno. Vediamo un esempio di denizione di una funzione:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

|<?php |function inverti($p) |{ | if ((!isset($p)) || ($p!="")) { | $ris=""; | for ($i=strlen($p);$i>0;$i--) { | $ris=$ris.substr($p,$i-1,1); | } | return $ris; | } | else { | return ""; | } |} |?>

Nella riga 2 c lintestazione della funzione con la parola riservata function seguita dal nome e dal parametro (se fossero pi di uno si separano con virgole, se assenti si lasciano vuote le parentesi); il corpo della funzione racchiuso tra le consuete parentesi graffe (righe 3 e 14); se il parametro contiene una stringa non vuota (riga 4), tale stringa viene invertita (righe 5-10), altrimenti non si inverte (righe 11-13);

170

Web, basi di dati e linguaggio PHP

alle righe 9 e 12 (che sono ovviamente alternative) si ha la restituzione del valore di ritorno della funzione grazie alla parola riservata return. Una possibile invocazione della funzione pu essere la seguente:
|<?php |$b=inverti($a); |?>

La variabile $a il parametro attuale passato alla funzione; il valore restituito da essa assegnato a $b. Il passaggio dei parametri avviene per valore a meno che nella denizione della funzione non sia presente un & prima del nome del parametro; in tal caso il passaggio avviene per riferimento (in queste dispense si danno per scontate le conoscenze teoriche circa le due modalit di passaggio dei parametri ad una funzione). Le variabili hanno un campo dazione o scope coincidente con la funzione in cui sono denite oppure con la pagina se sono denite fuori da qualsiasi funzione. Per fare in modo che una variabile denita fuori da una funzione sia visibile anche al suo interno, occorre usare, nel corpo della funzione, la parola riservata global seguita dal nome della variabile; in mancanza di ci la variabile usata nella funzione viene ad essere a tutti gli effetti nuova e del tutto diversa da quella, con stesso nome, denita esternamente (anche questi concetti, presenti in tutti i linguaggi di programmazione, vengono dati per noti e non sono ulteriormente approfonditi). Notiamo inne come una funzione possa anche non prevedere un valore di ritorno: potrebbe essere ad esempio una funzione che esegue solo una serie di print(), oppure una funzione che contiene solo del sorgente HTML (cosa possibile anche se non di uso frequente); in tal caso non necessario return al suo interno e la sua invocazione avviene senza la presenza di una assegnazione.

7.12 La funzione header() di PHP

La funzione header() utile in tutti quei casi in cui si vuole alterare il comportamento del motore PHP che automaticamente provvede ad inserire, prima di qualsiasi output, lintestazione HTTP normale cio quella contenente la riga Content-Type: text/html seguita da una riga vuota. La funzione deve essere usata prima che sia stato emesso qualsiasi output sia con le funzioni a ci preposte del PHP sia a causa della presenza di sorgente HTML nella pagina che preceda la funzione stessa. Grazie al suo uso possibile alterare lintestazione per gli scopi sotto elencati: denire tipi di contenuti diversi da text/html; ad esempio:
|header("Content-Type: image/png");

permette di denire un output in formato png; reindirizzare ad altra pagina; ad esempio:

Web, basi di dati e linguaggio PHP

|header("Location: http://www.maxplanck.it/index.html);

171

costringere il browser a richiedere sempre lultima versione di una pagina senza usare quella eventualmente memorizzata nella memoria cache:
|header("Cache-Control: no-cache, must-revalidate");

7.13 Gestione di basi di dati MySQL e PostgreSQL con PHP

In questo paragrafo vengono prese in esame alcune delle funzioni che PHP mette a disposizione per lavorare con basi di dati MySQL e PostgreSQL; lelenco completo si pu trovare in molti documenti o siti, ad esempio in http://www.php.net/manual . Essendo le problematiche di uso di una base di dati simili qualunque sia il software di gestione, facciamo gli esempi riferendoci solo a PostgreSQL evidenziando le differenze con MySQL riguardo alle funzioni PHP da richiamare.
Compito Apertura connessione ad una base di dati Selezione di una base di dati Esecuzione di una istruzione SQL Numero record restituiti da una istruzione SQL Valori estratti con una interrogazione SQL Chiusura di una connessione ad una base di dati Funzione per MySQL mysql_connect() mysql_select_db() mysql_query() mysql_num_rows() mysql_fetch_array() mysql_close() Funzione per PostgreSQL pg_connect() pg_query() pg_num_rows() pg_fetch_array() pg_close()

Non vengono forniti dettagli sui parametri richiesti dalle funzioni e sui loro valori di ritorno; queste informazioni possono essere desunte dalluso delle funzioni fatto nei prossimi esempi e poi approfondite consultando i manuali di PHP. Nellesempio seguente viene realizzato un modulo per inserire i dati nella tabella rubrica denita in precedenza nella base di dati fulvio in PostgreSQL e in MySQL. Con lo stesso modulo anche possibile effettuare uninterrogazione allarchivio specicando alcuni parametri; i dati da inserire o da usare per la ricerca vengono passati ad un le PHP che effettua loperazione richiesta e crea una opportuna pagina di risposta. La gestione del modulo non rinita: mancano molti controlli sui campi di input e le funzionalit sono molto lontane da quelle che dovrebbero essere previste in una procedura di gestione di dati via Web reale; daltra parte questo esempio inserito solo a scopo didattico ed quindi volutamente limitato. Il sorgente del modulo, chiamato modulo.html denito come segue (il le pu avere estensione .html in quanto non contiene codice PHP):
|<html> |<head> |<title>Gestione tabella Rubrica</title> |</head> |<body> |<h3 style="text-align:center;">Gestione Rubrica</h3> |<form method="post" action="./phpsql.php">

172

Web, basi di dati e linguaggio PHP

|<p><b>Cognome: </b> |<input type="text" name="cognome" maxlength="25" size="20"/>** |</p> |<p><b>Nome &#160;&#160;&#160;&#160;&#160;&#160;:</b> |<input type="text" name="nome" maxlength="25" size="20"/>** |<p><b>Data di nascita (ggmmaaaa): </b> |<input type="text" size="8" maxlength="8" name="data_nas"/> |</p> |<p><b>Indirizzo &#160;:</b> |<input type="text" name="indirizzo" maxlength="40" size="40"/> |</p> |<p><b>Telefono &#160;:</b> |<input type="text" name="telefono" maxlength="15" size="15"/>** |</p> |<p><b>E-mail &#160;&#160;&#160;&#160;&#160;:</b> |<input type="text" name="email" maxlength="30" size="30"/> |</p><br/> |** = campi validi per linterrogazione<p/> |(lasciarli <b>tutti vuoti </b>per ottenere la |<b>lista completa </b>del contenuto dellarchivio)<p/> |<input type="reset" value="Azzera"/> |<input type="submit" value="Inserisci" name="sub"/> |<input type="submit" value="Interroga" name="sub"/> |</form> |</body> |</html>

Il modulo viene visualizzato come mostrato nella gura 7.51.

Figura 7.51. |

Il le "phpsql.php" che svolge le operazioni sulla base di dati il seguente:

1 2

|<html> |<head>

Web, basi di dati e linguaggio PHP

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

173

|<title>Interrogazione / inserimento Rubrica</title> |</head> |<body> |<?php |// include il file con le impostazioni per la connessione |require("connetti_psql.php"); |// per mysql: require ("connetti_mysql.php"); |// la variabile della connessione $conn |$cognome=$_POST[cognome]; |$nome=$_POST[nome]; |$data_nas=$_POST[data_nas]; |$indirizzo=$_POST[indirizzo]; |$telefono=$_POST[telefono]; |$email=$_POST[email]; |$sub=$_POST[sub]; |// verifica se richiesto un inserimento o una interrogazione |if ($sub == "Interroga") { | echo "<p/><h3>Risultato dellinterrogazione | </h3>"; |// interrogazione: prepara la variabile alt in base ai parametri richiesti | $alt=0; | if ($cognome != "") $alt=100; | if ($nome != "") $alt += 10; | if ($telefono != "") $alt += 1; |/* Listruzione switch permette di eseguire linterrogazione appropriata | in base allimpostazione dei parametri */ | switch ($alt) { | case 111: | $query="SELECT * FROM rubrica WHERE cognome=$cognome AND | nome=$nome AND telefono=$telefono;"; | break; | case 110: | $query="SELECT * FROM rubrica WHERE cognome=$cognome AND | nome=$nome;"; | break; | case 101: | $query="SELECT * FROM rubrica WHERE cognome=$cognome AND | telefono=$telefono;"; | break; | case 100: | $query="SELECT * FROM rubrica WHERE cognome=$cognome;"; | break; | case 11: | $query="SELECT * FROM rubrica WHERE | nome=$nome AND telefono=$telefono;"; | break; | case 10: | $query="SELECT * FROM rubrica WHERE nome=$nome;"; | break; | case 1: | $query="SELECT * FROM rubrica WHERE telefono=$telefono;"; | break; | default: | $query="SELECT * FROM rubrica;";

174
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110

Web, basi di dati e linguaggio PHP

| } // fine switch | $richiesta=pg_query($conn,$query); |// per mysql: $richiesta=mysql_query($query); | $righe=pg_num_rows($richiesta); |// per mysql: $righe=mysql_num_rows($richiesta); | |/* se linterrogazione ha restituito un risultato, da esso vengono | estratti i dati e vengono formattati nel documento di risposta */ | if ($righe > 0) { | $cont=0; | while ($cont < $righe) { | $riga = pg_fetch_array($richiesta); |// Per mysql: |// $riga = mysql_fetch_array($richiesta); | $v1 = $riga["cognome"]; | $v2 = $riga["nome"]; | $v3 = $riga["data_nas"]; | $v4 = $riga["indirizzo"]; | $v5 = $riga["telefono"]; | $v6 = $riga["email"]; | print ("<p/>Cognome : "); | print ($v1); | print ("<br/>Nome : "); | print ($v2); | print ("<br/>Data nas. : "); | print ($v3); | print ("<br/>Indirizzo : "); | print ($v4); | print ("<br/>Telefono : "); | print ($v5); | print ("<br/>Email : "); | print ($v6); | print ("<p/>"); | $cont++; | } // fine while | } | else { | print ("<p/>Nella base dati non presente alcuna | informazione<br/> con le caratteristiche specificate!"); | } // fine if ($righe) |} |else { |// Inserimento: il cognome deve essere indicato | if (! $cognome) | echo "<p/><B> Il cognome &egrave; obbligatorio"; | else { | $g=substr($data_nas,0,2); | $m=substr($data_nas,2,2); | $a=substr($data_nas,4,4); | if(!checkdate($m,$g,$a)) { | echo "<p/>Errore nella data\n"; | } | else { | $inser = "insert into rubrica

Web, basi di dati e linguaggio PHP

111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130

175

| (cognome, nome, indirizzo, telefono, data_nas, email) | values ($cognome, $nome, $indirizzo, $telefono, | $a-$m-$g, $email)"; | $ris = pg_query($conn, $inser ); |// per mysql: $ris = mysql_query($inser); | if ($ris != 1) | echo "Errore SQL in inserimento"; | else | echo "Inserimento di $cognome $nome effettuato"; | } | }// fine if (! $cognome) |} // fine if ($sub.....) |pg_close($conn); |// per mysql: mysql_close($conn); |print ("<p/>"); |print ("<hr width=\"30%\"><p/> |<a href=\"./modulo.html\">Nuova operazione</a>"); |?> |</body> |</html>

Nel caso venga richiesta una interrogazione fornendo come unico parametro il cognome Paperino si ottiene la risposta riportata nella gura 7.53.
Figura 7.53. |

Di

seguito viene mostrato il contenuto dei due le connetti_psql.php connetti_mysql.php utilizzati per la connessione alle rispettive basi di dati.
|<?php |// imposta le variabili per la connessione al database e lo apre |$pg_database="fulvio"; |$pg_host="localhost"; |$pg_port=5432; |$pg_user="fulvio"; |$pg_psw="laurai"; |$conn=pg_connect("dbname=$pg_database host=$pg_host port=$pg_port
user=$pg_user password=$pg_psw");

|if (! $conn) { | echo "<p/>Connessione al database non riuscita";

176
| |} |?>
exit();

Web, basi di dati e linguaggio PHP

|<?php |// imposta le variabili per la connessione al database e lo apre |$my_database="fulvio"; |$my_host="localhost"; |$my_user="fulvio"; |$my_psw="laurai"; |$conn=mysql_connect($my_host, $my_user, $my_psw); |if (! $conn) { | echo "<p/>Connessione al database non riuscita"; | exit(); |} |else { | mysql_select_db($my_database, $conn); |} |?>

Le funzioni per la connessione alle basi di dati usate in questi due le sono di facile comprensione e il ruolo dei parametri richiesti dovrebbe apparire chiaro dal nome degli stessi. Qualche parola in pi pu essere spesa per spiegare almeno alcune parti del listato di phpsql.php completando i commenti gi in esso presenti: con il test sulla variabile $sub (riga 19) si stabilisce se lutente ha richiesto una interrogazione o un inserimento; nel primo caso viene preparata la variabile $alt in base ai parametri di ricerca selezionati e poi viene controllata listruzione switch per impostare le interrogazioni appropriate alla base di dati; a riga 58 viene eseguita linterrogazione: il risultato viene posto in $richiesta e il numero di record estratti in $righe; se sono stati estratti dei dati dallarchivio (controllo a riga 65) si esegue un ciclo con listruzione while (riga 67) tante volte quante sono le righe estratte; ad ogni iterazione si estraggono i dati di un record (righe da 68 a 76) e si stampano a video (righe da 77 a 89); nel caso invece lutente abbia richiesto un inserimento (riga 99 e seguenti), si controlla che sia stato indicato almeno il cognome e che la data di nascita sia valida; superati i controlli si inseriscono in archivio i dati provenienti dal modulo (righe da 110 a 114) controllando anche che loperazione sia conclusa positivamente (righe da 116 a 119); a questo punto resta solo da chiudere la connessione alla base di dati (riga 123) ed emettere sul documento di risposta la stringa che funge da collegamento per tornare al modulo di partenza.

177

Capitolo

Script attivi, DHTML, applet, servlet (cenni)

In questo paragrafo vengono presi brevemente in esame strumenti che permettono di aggiungere logica elaborativa alle pagine Web dal lato cliente come gli script attivi e le applet Java; in questo contesto viene anche dato un accenno al DHTML (Dynamic HTML) e alle servlet altra espressione delle potenzialit del linguaggio Java nellambito della realizzazione di applicazioni Web (in questo caso dal lato servente).

8.1 JavaScript e Java

Gli script attivi sono programmi o porzioni di codice eseguiti dal lato cliente e sono molto usati per rendere pi dinamiche e interattive le pagine Web. Esistono fondamentalmente due linguaggi per la scrittura di script attivi: JavaScript creato dalla Netscape (JScript nella versione della Microsoft) e VBS CRIPT (Visual Basic Scripting edition); questultimo un linguaggio di script sviluppato da Microsoft per essere simile a Visual Basic e si rivolge esclusivamente agli utenti che usano piattaforme Windows essendo supportato solo da Internet Explorer. JavaScript invece supportato da tutti i browser pi importanti e quindi continuiamo ad occuparci solo di questultimo. Prima di proseguire per opportuno chiarire le notevoli differenze tra i linguaggi Java e JavaScript malgrado la somiglianza dei nomi (in effetti il nome originale di JavaScript era LiveScript e fu cambiato per motivi commerciali): Java un linguaggio compilato (anche se non nel senso classico del termine, mentre JavaScript interpretato; le applicazioni Java possono essere anche indipendenti ed essere eseguite fuori da qualsiasi applicazione Web (si dice che Java pu essere usato anche per applicazioni stand-alone, il codice JavaScript invece sempre legato ad un documento HTML e non pu essere eseguito separatamente (da questo punto di vista tra Java e JavaScript c la stessa differenza esistente tra Perl e PHP, se non si fa uso del pacchetto php5-cli); le applet Java sono connate in una ben denita regione della pagina, il codice JavaScript invece pu controllare un intero documento e rispondere alla pressione di pulsanti, click del mouse o altri eventi simili; le applet Java sono programmi separati dal codice HTML, vengono scaricati dalla rete ed eseguiti da un browser compatibile con Java; il codice JavaScript invece generalmente incorporato allinterno del sorgente HTML ed eseguito da un browser compatibile con JavaScript. Ci che accomuna le applet Java e i JavaScript invece il fatto che, per motivi di sicurezza, non possono interagire con il le system del sistema su cui in esecuzione il programma di navigazione e quindi non possono leggere o scrivere le. Questa attenzione alla sicurezza differenzia fortemente le applet Java dalla tecnologia concorrente delle ACTIVE X (Active eXtension) di Microsoft. ActiveX non un linguaggio di programmazione ma un formato per dati ricavato da due tecnologie Microsoft esistenti: OLE (Object Linking and Embedding) che permette ai programmi di comunicare con altre applicazioni e COM (Component Object Model) che un formato per la denizione di interazioni tra oggetti, poi evolutosi nella tecnologia DCOM (Distributed COM) per la denizione di iterazioni remote tra oggetti.

178

Script attivi, DHTML, applet, servlet (cenni)

Gli ActiveX possono essere scritti in molti linguaggi ma sono molto difcili da includere nelle pagine Web senza usare altri strumenti Microsoft, inoltre sono supportati solo da Internet Explorer e, cosa pi grave, possono interagire con la macchina cliente salvando o modicando le, lanciando lesecuzione di altri programmi, aprendo documenti ed altro ancora. Ovviamente tali strumenti, se non usati con i dovuti accorgimenti, possono rappresentare un pericolo riguardo ad esempio alla diffusione attraverso Internet di virus informatici o alla violazione della riservatezza dei dati contenuti nel computer di un utente. Attualmente gli ActiveX si sono evoluti nei cosiddetti componenti WinForm, nellambito del nuovo ambiente di sviluppo .NET della Microsoft.

8.2 Script attivi

Come detto prendiamo in esame il linguaggio JavaScript per la scrittura di script attivi. Lelemento da utilizzare nel sorgente HTML <script> che pu essere posizionato sia nella sezione head che nella sezione body e prevede la scrittura di istruzioni JavaScript prima del tag di chiusura </script>. Pu essere opportuno mascherare le istruzioni JavaScript come commenti HTML per evitare che vecchi programmi di navigazione, per errore, le mostrino insieme al contenuto della pagina; ecco un esempio:
|<!-- Begin script | |(istruzioni JavaScript) | |// -->

Si noti che i commenti di JavaScript si inseriscono con i caratteri // oppure /* e */ nel caso di commenti multilinea. Il tag <script> prevede come attributi language e type da valorizzare, nel caso si usi JavaScript, rispettivamente con "JavaScript" e "text/javascript". Un altro attributo src con il quale si pu fare riferimento ad uno script esterno che viene caricato dal browser ed eseguito.
|<script type="text/javascript" src="nome_file.js"></script>

Il le nome_le.js deve contenere solo codice JavaScript e non necessita delle righe di commento iniziale (quella con Begin script) e nale. Gli script esterni (da non confondere assolutamente con gli script CGI di cui abbiamo parlato in precedenza e che sono entit completamente separate ed eseguite dal lato servente) risiedono su le autonomi che hanno di solito estensione .js, contengono esclusivamente comandi JavaScript e possono essere utili in quanto permettono di modicare una volta sola il codice usato in molti documenti HTML diversi. Si tenga per conto dellaggravio di tempo necessario a ricevere dal servente anche il le contenente lo script oltre alla pagina Web che lo richiama e del fatto che alcuni serventi Web possono non essere congurati per un corretto invio degli script esterni.

Script attivi, DHTML, applet, servlet (cenni)

179

Vediamo adesso un semplice esempio in cui si usa una funzione scritta in JavaScript per far immettere allutente il proprio nome e poi presentarlo in una pagina di risposta.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

|<html> |<head><title>Esempio con JavaScript</title> |<script language="JavaScript" type="text/javascript"> | <!-- Begin script | function InsNome() { | nomeut = prompt("Inserire il proprio nome:",""); | if (nomeut == "" || nomeut == null) { | nomeut = "Utente sconosciuto"; | } | return (nomeut); | } | // --> |</script> |</head> |<body> |<div style="text-align: center;"> |<b>Esempio con JavaScript</b></div> |<p/><br/> |Il nome inserito &egrave;: |<script language="JavaScript" type="text/javascript"> | <!-- Begin script | document.write (InsNome()); | // --> |</script> |</body> |</html>

Alcuni brevi commenti al listato: nella prima parte (righe da 3 a 13) viene denita una funzione chiamata InsNome() che non necessita di alcun parametro e serve a far inserire allutente il proprio nome con la funzione prompt(); il nome inserito viene poi controllato con listruzione if (riga 7) nella cui condizione vediamo luso di || che signica or (in questo anche JavaScript segue le convenzioni del linguaggio c, tanto vero che la and si scrive &&); il nome valorizzato automaticamente se vuoto (riga 8); lultima istruzione della funzione return (riga 10) che serve a restituire il risultato della funzione stessa, in questo caso il nome inserito dallutente; nella seconda parte (righe da 20 a 24) del documento c un altro blocco di codice JavaScript: in esso viene richiamata la funzione InsNome() allinterno dellistruzione document.write (riga 22) con la quale il nome inserito viene scritto allinterno della pagina HTML. La visualizzazione di questo documento avviene secondo la seguente logica: viene iniziata la visualizzazione della sezione corpo;

180 c

Script attivi, DHTML, applet, servlet (cenni)

viene eseguito il codice JavaScript allinterno del corpo e quindi listruzione di scrittura;

allinterno di questultima c per il ricctimain364(ricctimain364(riccin364(rterno)-263(di)-265(questultim

Script attivi, DHTML, applet, servlet (cenni) ondbclick: quando si fa doppio clic con il mouse su un elemento; onkeypress: quando un tasto viene premuto e rilasciato su un elemento; onkeydown: quando un tasto viene premuto su un elemento; onkeyup: quando un tasto viene rilasciato su un elemento;

181

onmousedown: si verica quando si clicca con il mouse su un elemento (senza rilasciare); onmouseup: si verica quando si rilascia il pulsante del mouse su un elemento; onmouseover: quando il puntatore del mouse passa su un elemento provenendo da fuori di esso; onmouseout: quando il puntatore del mouse lascia un elemento. I seguenti attributi si possono usare solo allinterno dei moduli: onsubmit: si verica quando un modulo viene inviato (si usa solo nel tag <form>); onreset: quando il contenuto di un modulo viene ripristinato (si usa solo nel tag <form>); onselect: quando si seleziona del testo (si usa solo con i tag <input> e <textarea>); onchange: quando cambia il valore di un controllo (si usa solo con i tag <input>, <textarea> e <select>). I seguenti attributi si possono usare con i moduli e con i collegamenti: onfocus: si verica quando un elemento viene selezionato (si dice che riceve il fuoco) con il mouse o la tastiera; onblur: quando un elemento perde il fuoco. Inne i seguenti attributi si possono usare solo nei tag <body> e <frameset>: onload: si verica quando il navigatore termina il caricamento del documento; onunload: quando il navigatore accede ad un altro documento. Per usare correttamente gli attributi di evento si deve denire il linguaggio di script di default del documento: a questo scopo si usa il seguente elemento <meta>:
|<meta http-equiv="Content-Script-Type" content="text/javascript"/>

Nel seguente esempio abbiamo luso di JavaScript per controllare linput in due campi di un modulo:
|<html> |<head><title>Esempio con JavaScript</title> |<meta http-equiv="Content-Script-Type" |content="text/javascript"/>

182

Script attivi, DHTML, applet, servlet (cenni)

|<script language="JavaScript" type="text/javascript"> | <!-- Begin script | function Contr(campo) { | if (campo.length > 0) { | return (true); | } | else { | alert("Campo " + campo.name + " obbligatorio!"); | return (false); | } | } | // --> |</script> |</head> |<body> |<div style="text-align:center;"> |<b>Input gestito con JavaScript</b></div> |<p/><br/> |<form action="/cgi-bin/uncgi/cgi-modulo.pl" method="get"> |Cognome: <input name="cognome" type="text" |onblur="Contr(cognome)"/><p/> |Nome: <input name="nome" type="text" |onblur="Contr(nome)"/><p/> |<input type="submit" value="invio"/> |</form> |</body> |</html>

Inne ecco un esempio in cui viene presentata una immagine cliccando sulla quale si apre unaltra pagina HTML:
|<html> |<head><title>Finestra da aprire in JavaScript</title> |<meta http-equiv="Content-script-type" |content="text/javascript"/> |</head> |<body> |<div style="text-align:center;"> |<b>Finestra da aprire con JavaScript</b></div> |<p/><br/> |<a href="#" onclick=window.open("esejs3b.html")> |<img src="tux.jpg" width="80" height="80"/></a> |</body> |</html>

Per vericare il comportamento del codice JavaScript, soprattutto in presenza di risultati inaspettati, possibile utilizzare la console degli errori del programma di navigazione; in Mozilla Firefox si accede ad essa selezionando lapposita voce nel menu Strumenti.

Script attivi, DHTML, applet, servlet (cenni)

183

8.2.2 Limiti di JavaScript

Luso di JavaScript offre senzaltro grandi possibilit (che gli esempi appena illustrati mostrano in misura molto modesta) ma non bisogna sottovalutare alcuni aspetti negativi: alcuni browser non supportano gli enunciati JavaScript e anche quelli che li supportano si comportano spesso in modo diverso di fronte ad una stessa istruzione; il linguaggio ha dei limiti dovuti alle importanti ragioni di sicurezza citate in precedenza; JavaScript viene spesso usato per creare effetti che alla lunga possono risultare noiosi e fastidiosi; alcuni utenti preferiscono addirittura disabilitare, intervenendo su opportune opzioni dei programmi di navigazione, lesecuzione degli script. Per questi motivi lecito aspettarsi che un documento contenente istruzioni JavaScript possa venire visualizzato da programmi di navigazione non in grado di eseguirle correttamente; quindi opportuno prevedere, subito dopo la ne di uno script, luso dei tag <noscript> e </noscript> allinterno dei quali inserire le parti di sorgente HTML alternative allo script stesso.

8.3 DHTML

Il DHTML non uno specico linguaggio e neanche una qualche evoluzione dellHTML, invece un insieme di tecniche utilizzabili in modo coordinato per costruire pagine Web dinamiche dal lato cliente. Le tecnologie coinvolte nelluso del DHTML sono: un linguaggio per script attivi; i fogli di stile; un modello ad oggetti del documento o DOM (Document Object Model) che permette di integrare le altre due tecnologie denendo uninterfaccia di programmazione indipendente da linguaggio e piattaforma per accedere a contenuto, stile e struttura di un documento DHTML; grazie al DOM possibile gestire e controllare ogni singolo oggetto del documento con una opportuna sintassi derivata dalla programmazione ad oggetti. Il consorzio W3C ha denito gli standard ufciali per ognuna delle tre entit appena elencate che sono (ad agosto 2011) : ECMAScript, per il linguaggio di scripting; nato da JavaScript 1.1 e la versione pi recente la Edition 5.1 (JavaScript 1.8); CSS Level 2.1, per i fogli di stile; il CSS Level 3 in via di denizione ed parzialmente supportato dai programmi di navigazione; DOM Level 3, per il modello di documento; levoluzione, proposta nel 2004, del DOM Level 1 (1998) e del DOM Level 2 (2000). Maggiori dettagli sui livelli DOM e, pi in generale, sulluso delle tecniche del DHTML, si possono reperire sui testi relativi allargomento cui si fa riferimento nella bibliograa.

184

Script attivi, DHTML, applet, servlet (cenni)

8.4 Applet Java

Le Applet Java sono state uno dei primi strumenti usati per rendere dinamiche le pagine Web ma ultimamente hanno perso molto dimportanza a vantaggio di altri prodotti come le animazioni e i lmati ottenuti con Macromedia Flash; qui accenniamo molto brevemente al loro utilizzo.

8.4.1 Caratteristiche del linguaggio Java

Java un linguaggio di programmazione creato nel 1995 da Sun Microsystem (forse la pi agguerrita concorrente di Microsoft) e deve il suo nome a una variet di caff tropicale. Inizialmente ideato per essere incorporato nei microchip che governano gli elettrodomestici si poi affermato come linguaggio di programmazione soprattutto nellambito del Web. Uno dei principali motivi del successo di Java in tale contesto la sua sicurezza intrinseca: si viene infatti a creare un rewall, cio una barriera protettiva, tra lapplicazione di rete in ambiente Java e il computer dellutente. Quando si scaricano con un browser compatibile le applicazioni Java non ci sono rischi di comportamenti illeciti da parte di queste ultime o di infezioni virali in quanto i programmi Java vengono connati in un apposito ambiente di esecuzione senza alcuna possibilit di accedere ad altre risorse dei computer. Altro aspetto fondamentale quello della portabilit: un programma scritto in Java pu essere eseguito indifferentemente su ogni sistema operativo e su ogni piattaforma senza necessit di modiche. Ci che consente a Java di essere cos sicuro e portabile il fatto che loutput della compilazione di un sorgente non codice eseguibile ma bytecode cio un codice intermedio costituito da un insieme ottimizzato di istruzioni che vengono eseguite da una macchina virtuale detta JVM (Java Virtual Machine). Tale macchina virtuale viene emulata dallambiente di esecuzione di Java, attingendo alle risorse della macchina reale. Il programma eseguibile non ha alcuna possibilit di uscire dai conni dellambiente emulato e questo va a tutto benecio della sicurezza. Inoltre sufciente realizzare sistemi run-time di Java diversi, per le varie piattaforme esistenti, afnch su tutte possano essere eseguite le applicazioni scritte in Java; in questo anche la portabilit assicurata. Lambiente di esecuzione (o run-time) di Java non altro che un interprete del bytecode; il fatto che i programmi Java vengano interpretati e non compilati e poi eseguiti, comporta senza dubbio problemi a livello di prestazioni. Tali problemi per vengono largamente compensati, almeno a livello di applicazioni per il Web, dai vantaggi riguardanti la sicurezza e la portabilit. Altri motivi per cui Java molto apprezzato dai programmatori sono: semplice (almeno per chi gi conosce i linguaggi c e c++); orientato agli oggetti con un approccio molto rigoroso e usabile (il tema della programmazione ad oggetti di una tale vastit e complessit che scoraggia qualsiasi tentativo di semplicazione e sintesi; gli interessati a tale argomento a anche a maggiori approfondimenti sul linguaggio Java possono consultare i numerosissimi testi dedicati a questi argomenti);

Script attivi, DHTML, applet, servlet (cenni)

185

multithreaded perch consente di scrivere programmi suddivisi in thread indipendenti grazie ad una sosticata soluzione, presente nellambiente di esecuzione, per la sincronizzazione multiprocesso; solido e afdabile sia perch fortemente tipizzato (le variabili devono essere dichiarate prima di essere utilizzate e non sono possibili conversioni implicite di tipo), sia perch privo di puntatori (il cui uso da parte di programmatori non esperti spesso fonte di errori), sia perch dotato di un meccanismo automatico per la garbage collection che analizza la memoria e libera quella inutilizzata (in altri linguaggi come il c++ questa operazione invece a carico del programmatore ed spesso fonte di errori); distribuito in quanto stato progettato appositamente per lo sviluppo di applicazioni distribuite; quindi unapplicazione Java pu essere costituita da pi moduli, residenti su diversi computer, in grado di operare congiuntamente attraverso una rete telematica.

8.4.2 Creazione ed esecuzione delle applet Java

Per creare una applet Java si devono compiere le seguenti operazioni: scrivere il sorgente Java salvandolo in un le con estensione .java e con nome uguale a quello della classe denita nel sorgente stesso (supponiamo sia EseJava); compilare il sorgente utilizzando un compilatore Java come JDK (Java Development Kit) disponibile gratuitamente presso http://java.sun.com/j2se/ ; il comando :
$ javac EseJava.java

si ottiene un le con stesso nome ed estensione .class; nel nostro esempio

EseJava.class;

leseguibile ottenuto pu essere eseguito anche indipendentemente da qualsiasi pagina Web, tramite linterprete java con il comando:
$ java EseJava.class

Per inserire lapplicazione Java allinterno di una pagina Web si usa lelemento di testo <applet> con chiusura </applet>; qualsiasi testo inserito tra questi due marcatori viene visualizzato nel caso il browser non sia in grado di eseguire le applet Java. Vediamo gli attribuiti di questo elemento (i primi tre sono obbligatori): code, per indicare il nome del le bytecode da eseguire; width e height, per indicare le dimensioni in pixel dellarea rettangolare nella quale eseguire lapplet; hspace, vspace, align, con lo stesso signicato visto per il tag <img>; name, per assegnare un nome allapplet (pu servire in caso pi applet debbano comunicare tra loro); codebase, indica la directory che contiene tutti i le a cui la applet fa eventualmente riferimento per il suo funzionamento.

186

Script attivi, DHTML, applet, servlet (cenni)

Un altro elemento che si pu usare con le applet <param> che serve ad indicare un parametro da passare allapplicazione Java; si possono passare pi parametri usando pi volte questo tag (lordine con cui avviene il passaggio non inuente). Naturalmente si possono passare parametri solo ad una applet che sia stata scritta per accettarli e utilizzarli in qualche maniera; di solito le applet gi pronte sono documentate ed quindi possibile sapere se sono previsti parametri, con quali scopi e con quali nomi. Lelemento <param> si inserisce tra <applet> e </applet> e prevede gli attributi name, per indicare il nome del parametro e value, per indicare il valore. Quando un documento contenente lapplet viene richiesto, questultima viene inviata dal servente insieme a tutti gli altri eventuali le multimediali; se il programma di navigazione in grado di interpretare il linguaggio, grazie alle opportune estensioni (plugins), il programma viene eseguito. Vediamo un esempio di pagina contenente una applet:
|<html> |<head><title>Esempio con applet Java</title> |</head> |<body> |<div> |<b>Esempio con applet Java</b></div> |<p/><br/> |Qui sotto ci dovrebbe essere lapplet <p/> |<applet code="EseJava2.class" width="500" height="500"> |Java non va |</applet> |</body> |</html>

Concludiamo con una osservazione circa il fatto che con HTML 4.x sconsigliato luso dellelemento <applet> che dovrebbe essere sostituito da <object> di cui abbiamo parlato nel paragrafo 3.4. Lesempio precedente dovrebbe quindi essere inserito nella pagina Web in questo modo:
|<object codetype="application/octet-stream" classid="java:EseJava2.class" | width="500" height="500"> |Il Browser non supporta Java |</object>

Non tutti i browser, specie le vecchie versioni, accettano questa sintassi per linserimento delle applet; per il futuro comunque da preferire luso dellelemento <object> in quanto permette di inserire anche applicazioni scritte in linguaggi di programmazione diversi da Java. Nella gura 8.11 viene mostrata la pagina dellesempio precedente dove eseguita una applet che disegna alcune gure geometriche.

Script attivi, DHTML, applet, servlet (cenni)

Figura 8.11. |

187

8.5 Servlet Java e JSP

Le servlet Java, come suggerisce il nome, hanno delle analogie con le applet, sono scritte in Java, ma vengono eseguite sul servente anzich sul cliente. Esse vengono quindi attivate dalle pagine Web esattamente come i programmi CGI, con i relativi vantaggi (indipendenza dalla piattaforma cliente, possibilit di accedere a basi di dati ecc.) ma si differenziano (in meglio) anche da questi ultimi. Infatti in presenza di normali CGI il servente HTTP esegue un processo ex-novo ogni volta che riceve una nuova richiesta di attivazione di una certa applicazione; le servlet invece vengono eseguite e conservate in un determinato spazio di memoria in modo da potere essere richiamate in modo rapidissimo al sopraggiungere di successive richieste di esecuzione. Per potere utilizzare le servlet Java occorre installare una estensione di Apache di nome JServ (reperibile presso http://www.apache.org ); al termine dellinstallazione non dovrebbero essere necessarie altre operazioni o congurazioni particolari, si ricordi solo che le applicazioni servlet eseguibili devono risiedere per default nella directory /home/http/servlets anzich in /home/http/cgi-bin. Il principale difetto delle servlet java che esse, come le applicazioni CGI, costruiscono la risposta al loro interno denendo delle stampe virtuali in codice HTML; quindi evidente che ogni variazione nella risposta comporta la necessit di ricompilare la servlet. Le JSP (Java Server Pages) sono un tentativo di risolvere questo inconveniente in quanto non sono altro che pagine HTML che incorporano codice Java, sempre eseguito dal lato servente. In pratica possiamo affermare che una JSP sta ad una servlet come una pagina PHP sta ad un programma CGI. Pi in dettaglio le JSP rappresentano un esempio di tecnologia Java in grado di integrare in uno stesso le codice HTML, componenti riutilizzabili come i Javabeans, codice Java e script Java-like.

188

Script attivi, DHTML, applet, servlet (cenni)

Una pagina JSP appare come una normale pagina HTML contenente anche tag JSP attraverso i quali si possono denire singole operazioni (ad esempio chiamate al codice esterno di un componente riusabile Javabeans) o blocchi di codice Java, chiamati scriptlet, che vengono compilati ed eseguiti quando si accede al documento. Una pagina JSP viene eseguita da un motore JSP installato sul servente Web, che non fa altro che creare dinamicamente ed in modo trasparente la servlet corrispondente. Questo permette di conservare i vantaggi delle servlet e di superare i problemi dovuti alla loro eccessiva rigidit riguardo alla creazione e alla modica delle pagine di risposta. Ovviamente i lati positivi di una soluzione sono sempre, almeno in parte, bilanciati da quelli negativi: le JSP impongono la presenza sul servente di un compilatore Java, non necessario per le servlet, e hanno una minore velocit di esecuzione.

Parte iv

Nuovi sviluppi del Web

189

190

191

Capitolo

Da HTML a XML (cenni)

Come abbiamo visto allinizio di queste dispense, lHTML deriva dallSGML che un linguaggio a marcatori molto pi potente e complesso, disponibile da molti anni in varie forme e per vari scopi. LSGML specica degli identicatori di contenuto con i quali formattare il testo in modo coerente per permettere ai sistemi di gestione dei documenti di reperire facilmente le informazioni; si presta bene per la gestione di grandi quantit di dati con struttura omogenea come cataloghi, manuali tabelle statistiche. Siccome usa marcatori basati sul contenuto e non sul formato, possibile cambiare agevolmente le regole di formattazione per inviare il documento a dispositivi di memorizzazione o di visualizzazione di tipo diverso. Nonostante questi pregi lSGML utilizzato solo da organizzazioni di una certa mole, come lIBM o alcuni enti statali americani, in quanto notevolmente complesso e difcile da usare in modo corretto. Il grande pregio dellSGML di non essere solo un linguaggio di formattazione o di contrassegno ma un metalinguaggio con il quale si possono denire linguaggi di contrassegno per oggetti molto diversi: formule matematiche, spartiti musicali, formule chimiche, ipertesti (questo il caso dellHTML). In questo capitolo ci occupiamo di uno di tali linguaggi, lXML (eXtensible Markup Language), che ha ultimamente assunto un ruolo molto importante in numerosi ambiti della gestione e della comunicazione dei dati.

9.1 Limiti dellHTML

LHTML conserva traccia delle sue origini soprattutto nella sintassi dei marcatori ma indubbiamente molto pi semplice e molto pi limitato nelle funzionalit rispetto a SGML. Malgrado questo ha svolto un ruolo importante contribuendo in modo decisivo alla diffusione e al successo delle pagine Web presso il grande pubblico. I limiti pi evidenti dellHTML sono: la rigidit, in quanto ha un numero nito di tag; la scarsa coerenza, in quanto prevede sia tag che indicano la natura di un elemento, come <title>, sia tag che indicano la sua rappresentazione, come <font>, sia, ancora, tag ibridi, come <p align="center"> o <TABLE> usato per migliorare il layout del documento. E utile soffermarsi a questo punto sulle caratteristiche che ogni elemento di un documento possiede: sintassi: cio come scritto; semantica: cosa signica, cosa rappresenta, in che relazione sta con gli altri elementi; rappresentazione: come appare sullo schermo o in stampa; comportamento: come reagisce allinterazione con lutente (vale per gli elementi dinamici).

192

Da HTML a XML (cenni)

La maggior parte dei tag dellHTML ha sintassi, semantica, rappresentazione e comportamento predeniti e quindi i programmi di navigazione dovrebbero essere in grado di trattarli uniformemente; il condizionale dipende dal fatto, pi volte evidenziato, che spesso i browser non rispettano gli standard. Come abbia o gi osservato, con il passare degli anni e con la sempre maggiore diffusione, lHTML si via via discostato dalla sua natura iniziale di strumento per la denizione della struttura dei documenti, per divenire un linguaggio di formattazione, spostando quindi laccento dalla semantica alla rappresentazione degli elementi. Questo avvenuto malgrado lintroduzione dei CSS che permettono di denire la formattazione della pagina, liberando da questo onere i tag HTML e restituendoli alla loro funzione originale di descrittori del contenuto. Abbiamo quindi, da una parte un linguaggio ricco di potenzialit, molto rigoroso e versatile ma eccessivamente complesso come lSGML, dallaltra un linguaggio molto semplice e di larga diffusione ma molto rigido e incoerente come lHTML; in questo contesto si inserisce il linguaggio XML.

9.2 Genesi e natura dellXML

XML un linguaggio a marcatori derivato dallSGML con lo scopo dichiarato di conservarne l80% delle potenzialit con solo il 20% della complessit. E stato creato da un gruppo di lavoro del W3C coordinato da Tim Berners Lee e si propone come base per gli sviluppi futuri del Web. Con XML possibile denire nuovi marcatori (questo il motivo del termine extensible) e specicare separatamente sintassi, semantica, rappresentazione e comportamento di ogni tag. Grazie alla possibilit di denire nuovi marcatori si pu affermare che anche lXML, come lSGML un metalinguaggio attraverso il quale denire linguaggi da usare in vari ambiti; ad esempio gi esistono: CML (Chemical Markup Language) per la chimica; M ATH ML (Mathematical Markup Language) per la matematica; WML (Wireless Markup Language) per le navigazione con i telefonini. La differenza sostanziale tra HTML e XML che questultimo si usa per descrivere il signicato dei dati e non il loro aspetto; questo un grosso passo avanti che, insieme alla essibilit e versatilit del linguaggio, apre prospettive di utilizzo al di l della rappresentazione dei dati nelle reti e nel Web. LXML si propone infatti come possibile formato universale per la rappresentazione dei dati superando i cronici problemi di incompatibilit tra formati generati con applicazioni diverse. Si noti che il nuovo standard per i documenti di ufcio, ODF (Open Document Format) e anche il formato proprietario (non standard) di Microsoft OOXML (Ofce Open XML) si basano su XML, e sono solo due delle numerose tecnologie informatiche che si appoggiano a tale linguaggio. Si deve inne notare come lXML non sia stato concepito per sostituire HTML, ma per integrarlo ed estenderlo, tanto vero che questultimo pu essere reinterpretato nellarchitettura XML dando origine ad un nuovo linguaggio: lXHTML (eXtensible HTML).

Da HTML a XML (cenni)

193

9.3 Documenti XML ben formati e validi

Un documento XML un semplice le di testo, realizzabile quindi con un qualsiasi editor, contenente testo e marcatori; questi ultimi sono racchiusi fra i simboli < e > come in HTML ma con regole sintattiche molto pi rigide: ogni tag deve essere necessariamente chiuso con il relativo tag di chiusura; non possibile avere annidamenti con tag sovrapposti; ci signica che la seguente porzione di codice:
|<u>Testo sottolineato<b> e grassetto </u></b>

che in HTML accettata, anche se scorretta, in XML (o meglio in XHTML, dato il contesto) del tutto vietata; i valori degli attributi devono essere sempre racchiusi tra virgolette; deve essere sempre presente almeno un elemento e fra gli elementi uno ed uno solo ha un ruolo speciale ed chiamato radice; gli altri elementi sono tutti gli, nipoti e comunque discendenti della radice secondo una struttura gerarchica. Un documento che rispetti queste regole si dice ben formato o conforme. Vediamo un primo esempio di documento XML (biblioteca.xml) in cui si deniscono dati relativi ad una biblioteca usando dei tag deniti liberamente a questo scopo:
|<?xml version="1.0" standalone="yes" ?> |<biblioteca> | <libro> | <titolo>XML - Le basi</titolo> | <autore>S. St. Laurent</autore> | <casaed>Tecniche Nuove</casaed> | <argomento>Web - XML</argomento> | <annoed>1999</annoed> | </libro>11 | <libro> | <titolo>Primi passi con Linux</titolo> | <autore>P. DIgnazio</autore> | <casaed>Infomedia</casaed> | <argomento>S.O. - Linux</argomento> | <annoed></annoed> | </libro> |</biblioteca>

Lindentatura, come al solito, serve solo ad aumentare la leggibilit del sorgente. Si deve notare che il linguaggio case sensitive, quindi <LIBRO> e <libro> sono tag diversi.

194 Nel caso di elementi vuoti si pu usare la notazione abbreviata:

|<annoed></annoed>

Da HTML a XML (cenni)

pu essere sostituito con

|<annoed/>

Nellesempio lelemento radice <biblioteca> mentre la prima riga un po particolare in quanto rappresenta una istruzione di elaborazione XML; tali istruzioni iniziano con i caratteri <? e terminano con ?>. Questa istruzione presenta due attributi: version il cui ruolo ovvio e standalone il cui signicato verr chiarito pi avanti. Le regole elencate in precedenza forniscono solo un primo livello di validazione; un secondo livello si ottiene grazie alla DTD (Document Type Denition) che un testo che descrive le regole sintattiche per il documento XML e pu essere contenuto in questultimo oppure, pi frequentemente, risiedere in un le autonomo. La seconda alternativa ovviamente da preferire in caso di pi documenti deniti con una stessa DTD in quanto permette di scrivere questultima una volta sola. Un documento che rispetti le regole sintattiche di una DTD si dice valido. Il le biblioteca.xml deve essere cos modicato nella parte iniziale:
|<?xml version="1.0" standalone="yes" ?> |<!DOCTYPE biblioteca [ | <!ELEMENT biblioteca (libro+)> | <!ELEMENT libro (titolo, autore*, casaed, argomento,annoed?)> | <!ELEMENT titolo (#PCDATA)> | <!ELEMENT autore (#PCDATA)> | <!ELEMENT casaed (#PCDATA)> | <!ELEMENT argomento (#PCDATA)> | <!ELEMENT annoed (#PCDATA)> | ]> |<biblioteca> |<libro> |......

La DTD pu essere esterna e residente, ad esempio, nel le biblioteca.dtd seguente:

|<?xml version="1.0" ?> |<!ELEMENT biblioteca (libro+)> |<!ELEMENT libro (titolo, autore*, casaed, argomento, annoed?)> |<!ELEMENT titolo (#PCDATA)> |<!ELEMENT autore (#PCDATA)> |<!ELEMENT casaed (#PCDATA)> |<!ELEMENT argomento (#PCDATA)> |<!ELEMENT annoed (#PCDATA)>

Da HTML a XML (cenni) Allora il documento biblioteca.xml assumerebbe questo aspetto:

|<?xml version="1.0" standalone="no" ?> |<!DOCTYPE biblioteca SYSTEM "biblioteca.dtd"> |<biblioteca> | <libro> |......

195

A questo punto dovrebbe essere chiaro il signicato dellattributo standalone: vale "no" quando almeno una denizione DTD esterna al documento. La parola chiave SYSTEM si usa per DTD denite localmente; in certi casi utile usare DTD pubbliche gi denite con questa sintassi:
|<!DOCTYPE nome
PUBLIC "nome DTD" "url DTD">

Le linee contenute nella DTD si chiamano dichiarative, iniziano con i simboli <!, seguiti dal tipo di dichiarativa e terminano con >. Il nome scritto nella dichiarativa !DOCTYPE (che ricordo essere presente anche nei sorgenti HTML) deve coincidere con la radice del documento XML a cui la DTD si riferisce; tra le parentesi quadrate racchiusa la denizione del documento. Il tipo !ELEMENT permette di specicare il tipo di elemento; la sua sintassi :
|<!ELEMENT nome contenuto>

Nel nostro esempio il primo elemento ha nome biblioteca e contiene uno o pi di uno (questo il signicato del simbolo+) elementi libro. A sua volta libro contiene una sequenza di elementi (la sequenza si indica elencando gli oggetti separati da virgola) titolo, autore, casaed, argomento, annoed. Se invece si dovesse avere la scelta tra una lista di elementi, la sintassi da usare sarebbe: (el1 | el2 | el3 ....).
autore opzionale e pu esserci una o pi volte ( il signicato del simbolo *); PREZZO

pu esserci zero o una volta ( il signicato del simbolo?). Gli altri elementi devono tutti comparire una ed una sola volta. La parola chiave #PCDATA indica che quellelemento un elemento di testo. Un altro tipo di dichiarativa !ATTLIST che permette di indicare gli attributi di un elemento, con questa sintassi:
|<!ATTLIST nome terna*>

dove terna composta da nome-attributo tipo-attributo valore-default; ad esempio:

|<!ATTLIST argomento | id ID | nome-fig CDATA | visible (yes | no)

#REQUIRED #IMPLIED "yes" >

196

Da HTML a XML (cenni)

ID indica lidenticativo del tag e permette di identicarlo univocamente nel documento, CDATA una stringa di testo, #REQUIRED impone che lattributo sia specicato, #IMPLIED

indica che lattributo non obbligatorio. Un altro valore possibile #FIXED che indica un attributo con valore sso. Il terzo tipo di dichiarativa quello per le entit, !ENTITY che pu essere di due tipi: generale o di parametro. Le entit generali sono denite nelle DTD ma si usano poi nei documenti XML; la loro sintassi :
|<!ENTITY nome definizione>

ad esempio per denire il carattere & si usa:

|<!ENTITY amp "&#38">

oppure per denire unentit associata ad un testo ripetitivo da inserire pi volte in un documento:
|<!ENTITY sost "Questo il testo sostitutivo">

Il riferimento alle entit si effettua anteponendo il simbolo & e posponendo il simbolo ;. Quindi se in un documento si vuole inserire il testo dellesempio sopra illustrato si scrive:
|&sost;

Le entit di parametro si usano esclusivamente nelle DTD esterne; la loro sintassi :

|<!ENTITY % nome definizione>

Queste entit vengono di solito usate per fare riferimento a denizioni di dati contenute in le esterni. Non approfondiamo ulteriormente questi argomenti; maggiori dettagli sulle DTD si possono reperire liberamente sul sito del consorzio W3C: http://www.w3.org .

9.4 Parser ed applicazioni XML

Come abbiamo visto un documento XML contiene solo la denizione di un insieme di dati ottenuta grazie ad un set arbitrario di marcatori; sorgono a questo punto due problemi: 1. il documento deve essere analizzato e validato; 2. i dati devono in qualche modo essere gestiti (ad esempio visualizzati con un browser). Gli stessi problemi in verit esistono anche per i documenti HTML che per contengono tag appartenenti ad un insieme rigido e pressato; quindi bastato costruire in modo opportuno i programmi di navigazione, istruendoli su come interpretare e gestire i vari tag ed i problemi sono stati risolti. Nel caso dellXML le cose sono un po pi complicate; la questione della validazione viene affrontata dai parser XML che svolgono le seguenti operazioni:

Da HTML a XML (cenni)

197

analizzano il documento vericando che sia conforme e, nel caso sia specicata una DTD, valido; lo suddividono nelle sue componenti generando una qualche forma di output specico per la piattaforma di esecuzione. Esistono due tipi di parser: i parser DOM, che forniscono in output una struttura gerarchica ad albero che rispecchia la struttura del documento XML; tale struttura indipendente dalla piattaforma ed adatta per applicazioni interattive perch viene sempre mantenuta interamente in memoria centrale; i parser SAX (Simple Api for XML), che leggono il documento XML e generano eventi corrispondenti alla sua struttura; richiedono un uso pi limitato della memoria ma impediscono di tornare indietro nellanalisi degli elementi XML; sono preferiti nel caso di ltraggio dei dati o di applicazioni lato servente nelle quali non sia richiesta la rappresentazione in memoria dei dati. Attualmente tutti i browser pi recenti sono in grado di effettuare il parsing di un documento XML. Il problema della gestione dei dati viene invece affrontato dalle applicazioni XML che si occupano di manipolare le informazioni ricevute dal parser trasformandole in elementi di varia natura adatti ad essere visualizzati, stampati, memorizzati o inviati ad altri dispositivi di output. Nel caso il documento XML debba essere solo visualizzato con un programma di navigazione possibile ricorrere semplicemente ai CSS, a patto che il browser sia almeno in grado di fare il parsing. Riprendendo lesempio biblioteca.xml vediamo un possibile biblioteca.css, che permette la sua visualizzazione con Firefox:
|/* CSS per esempio biblioteca.xml */ |biblioteca { background-color: white} |libro { display: block; | padding-bottom: 0.4in} |titolo { display: block; | text-align: center; | color: blue; | padding: 0.2in; | font-style: italic; | font-weight: bold; | font-size: 18pt} |autore, casaed, argomento, annoed { display: block; | text-align: left; | text-indent: 3.8in; | color: black; | font-size: 12pt}

foglio

di

stile,

Per usarlo occorre aggiungere a biblioteca.xml, come seconda linea:

|<?xml-stylesheet type="text/css" href="biblioteca.css" ?>

198

Da HTML a XML (cenni)

Il risultato che si ottiene aprendo biblioteca.xml con Firefox quello mostrato nella gura 9.19.
Figura 9.19. |

Con i fogli CSS si pu comunque solo modicare il formato degli elementi XML ed agire solo sui singoli elementi; se si vuole invece manipolare in modo pi consistente un documento XML, ad esempio riordinando gli elementi o nascondendone alcuni, si deve ricorrere ai fogli XSL. LXSL (eXtensible Style Language) comprende sia un linguaggio di trasformazione, lXSLT (XSL Transformation), che uno di formattazione, lXSL:FO (XSL: Formatting Object), entrambi deniti usando XML. La trattazione sulluso di questi linguaggi nonch dei linguaggi XLink e XPointer per il collegamento tra documenti XML e anche dellXMLSchema denito anchesso in XML e alternativo alle DTD, esula dagli scopi di queste dispense; si rimanda, come al solito, allampia letteratura disponibile sullargomento.

199

Capitolo

10

Programmazione distribuita
Nellambito delle applicazioni informatiche si soliti distinguere tra: architetture locali: tutti i componenti sono sulla stessa macchina; architetture distribuite: le applicazioni e i componenti possono risiedere su nodi diversi messi in comunicazione da una rete. I vantaggi della seconda alternativa consistono principalmente nella possibilit di uso concorrente dei programmi, nella centralizzazione dei dati, nella distribuzione del carico elaborativo, il tutto al prezzo di una maggiore complessit specialmente riguardo alla comunicazione fra i vari compenenti. Le applicazioni distribuite si possono classicare in base al grado di distribuzione: 1. Applicazioni client-server: sono presenti solo due livelli e le operazioni sono svolte quasi interamente sul servente. Come esempio possiamo citare i classici siti Web statici o dinamici; gli strumenti per la realizzazione di tale tipo di applicazioni sono i socket di rete, la cui programmazione possibile in vari linguaggi, tra cui c, c++, Java. Qui non viene approfondito tale argomento; per chi fosse interessato possibile consultare la mia dispensa Programmazione dei socket di rete in GNU/Linux reperibile presso il sito http://www.linuxdidattica.org , oppure lottimo lavoro di Simone Piccardi Guida alla programmazione in Linux presso http://gapil.truelite.it . 2. Applicazioni multi-livello: si ha un numero maggiore di livelli, allo scopo, soprattutto, di alleggerire il carico elaborativo dei serventi. Quelle che vengono suddivise infatti sono le funzionalit del lato servente, lasciando sostanzialmente invariate le caratteristiche della parte cliente che ha il compito di ospitare linterfaccia dellapplicazione. Un esempio di tale tipo di architettura quello del modello three-tier gi citato nel paragrafo 7.1; ricordiamo brevemente la sua struttura in tre strati o livelli: front-end o presentation tier o interfaccia; middle tier o logica applicativa; back-end o data tier o gestione dati persistenti. Questa nomenclatura tipica delle applicazioni Web; pi in generale si pu fare riferimento ad una suddivisione in tre livelli, applicabile a qualsiasi applicazione software, che la seguente: PL (Presentation Layer): la parte di visualizzazione dei dati (moduli, controlli di input, ecc.) necessari per linterfaccia utente; BLL (Business Logic Layer): la parte principale dellapplicazione, che denisce le varie entit e le loro relazioni indipendentemente dalle modalit di presentazione allutente e di salvataggio negli archivi; DAL (Data Access Layer): contiene tutto il necessario alla gestione dei dati persistenti (sostanzialmente sistemi di gestione di basi di dati). Il numero di livelli pu essere anche maggiore di tre, allo scopo di suddividere ulteriormente i compiti dei vari strati; in questo caso si parla di applicazioni multi-tier o n-tier.

200

Programmazione distribuita

3. Applicazioni completamente distribuite: in questo ogni livello non risiede pi su un singolo nodo di rete ma distribuito geogracamente; siamo in presenza di una architettura ad oggetti, con oggetti clienti che invocano servizi offerti da oggetti serventi e con una distribuzione del carico elaborativo che diviene la massima possibile. Uno scenario di questo tipo viene talvolta denominato Web a oggetti e contribuisce alla diffusione della componentistica software, termine con il quale si indica una tecnologia tendente a portare nel campo della produzione del software alcune metodologie di tipo industriale classico, migliorando o superando i metodi artigianali preesistenti. Con essa lo sviluppo delle applicazioni si scompone in due attivit distinte: creazione di componenti (semilavorati software); costruzione di applicazioni integrando i componenti gi pronti. Il problema principale, nelle architetture completamente distribuite, quello della denizione di regole per linterazione fra i vari componenti; a tale proposito sono state proposte soluzioni eterogenee, che hanno portato alla nascita di tecnologie diverse per la rappresentazione degli oggetti coinvolti nelle applicazioni, e che dipendono da protocolli di comunicazione differenziati. Le tecnologie pi importanti sono: CORBA (Common Object Request Broker Architecture): uno standard aperto e multipiattaforma sviluppato da OMG per permettere la comunicazione fra componenti indipendentemente dalla loro collocazione sui nodi di una rete e dal linguaggio di programmazione utilizzato. OMG (Object Management Group un consorzio creato nel 1989 da varie aziende tra cui Microsoft, HP, NCR, SUN, allo scopo di creare sistemi di gestione di architetture distribuite. RMI (Remote Method Invocation): una tecnologia che consente a processi Java distribuiti di comunicare attraverso una rete; specica appunto del mondo Java. DCOM (Distributed Component Object Model): una tecnologia informatica introdotta nel 1996 da Microsoft come contraltare di CORBA ed basato lestensione in rete della precedente tecnologia COM. Occore notare come RMI, nelle versioni pi recenti, sia completamente compatibile con CORBA e questo riduce praticamente a due le alternative in ambito di architetture completamente distribuite. La comunicazione tra gli oggetti avviene solitamente in reti TCP/IP e pu usare protocolli come lHTTP oppure protocolli deniti appositamente come, per CORBA, lIIOP (Internet InterOrb Protocol). Lindipendenza dal linguaggio di programmazione pone la questione di come descrivere gli oggetti CORBA o DCOM in modo che i programmi possano fare riferimento ad essi qualunque sia il linguaggio in cui sono scritti; a questo scopo stato denito un apposito linguaggio per la denizione di interfacce, lIDL (Interface Denition Language) per CORBA e lMIDL (Microsoft IDL) per DCOM. La creazione di soluzioni software basate su queste tecnologie richiede risorse considerevoli (un broker CORBA ha costi molto elevati) e pone spesso problemi di funzionamento in Internet: con DCOM infatti ci sono difcolt di dialogo con oggetti posti allesterno di una rete locale e entrambe le tecnologie richiedono di congurare appositamente eventuali rewall presenti nella rete.

Programmazione distribuita

201

A questo aggiungiamo che la stessa Microsoft considera deprecata DCOM a vantaggio del suo nuovo ambiente integrato di sviluppo .NET. Non deve quindi stupire che siano state cercate ulteriori soluzioni per la programmazione distribuita che fossero davvero universali e meno complicate delle precedenti. Una prima proposta stata XML-RPC (XML-Remote Procedure Call) che consiste nelluso dei servizi RPC appoggiandosi a XML come formato per la codica delle richieste di esecuzione remota; RPC nato per linvocazione di subroutine residenti su computer remoti nel modello client-server e non particolarmente adatto ad applicazioni orientate agli oggetti. Il passo avanti decisivo stato allora quello di proporre la distribuzione in rete, non pi dei componenti software, ma dei servizi che essi forniscono; questo ha portato alla denizione e alluso dei Web Services (Servizi Web) ai quali dedicato il prossimo capitolo.

202

Programmazione distribuita

203

Capitolo

11

Introduzione ai Web Services

Con i Web Services si supera denitivamente il modello client-server classico; i servizi sono visti come mattoni con cui costruire altri servizi, eventualmente pi complessi e sosticati. Non pi importante conoscere quale sia il servente o fornitore e quale il cliente o fruitore di un servizio; il fruitore pu a sua volta divenire fornitore aggregando servizi esistenti e creandone di nuovi. Quindi, con i Web Services, larchitettura delle applicazioni non si basa pi sui ruoli bens sui servizi; ciascun componente espone, i suoi rendendoli utilizzabili agli altri componenti grazie ad appositi registri che contengono le informazioni sui registri pubblicati. La denizione di Web Service fornita dal consorzio W3C la seguente: sistema software progettato per supportare linteroperabilit tra diversi elaboratori su di una medesima rete. Unaltra possibile denizione pu essere: servizio riutilizzabile che pu essere richiamato con tecnologie Internet e che dialoga in XML. Si pu subito notare che non viene fatto alcun riferimento a tecnologie speciche (ad esempio ai linguaggi da utilizzare) ma si pone laccento sulluso di XML e sugli strumenti di Internet; questo per due motivi fondamentali: XML un linguaggio di formattazione delle informazioni nato per essere multipiattaforma e quindi permette di denire ussi di dati fruibili in qualsiasi ambiente; inoltre, a differenza di quanto accade con i ussi di comunicazione degli altri sistemi per la programmazione distribuita, la formattazione avviene in testo puro e questo facilita la leggibilit dei dati e le eventuali attivit di debug; luso dei protocolli Internet (HTTP, SMTP, FTP ecc.) permette di superare con poco sforzo la barriera dei rewall perch essi sono solitamente congurati per lasciar transitare informazioni veicolate con tali strumenti; inoltre il supporto per i protocolli di Internet ormai diffuso nella globalit dei sistemi esistenti e fa parte del software di base di qualsiasi piattaforma. I motivi che stanno portando ad una grossa diffusione dei Web Services sono: semplicit delle speciche; uso di tecnologie standard aperte (come XML e HTTP) gi esistenti e diffuse; uso concreto da parte di molte aziende; disponibilit di numerosi strumenti per la loro realizzazione. A fronte di questi vantaggi c per anche qualche punto a sfavore: solitamente richiesto un grosso volume di trafco di dati in rete; il carico computazionale per la codica e decodica dei dati elevato; siccome una tecnologia di moda, qualche volta viene usata a sproposito, anche quando si ha il completo controllo su tutte le tecnologie coinvolte in una certa applicazione e quindi non ci sono grosse esigenze di interoperabilit.

204

Introduzione ai Web Services

A causa dei primi due svantaggi appena elencati c la tendenza ad usare strumenti di comunicazione maggiormante ottimizzati ma proprietari (ad esempio RMI nel mondo Java, .Net Remoting per .Net di Microsoft) con il rischio di compromettere lessenza stessa dei Web Services cio linteroperabilit.

11.1 Componenti dei Web Services

Dal punto di vista tecnologico i Web Services sono basati su: protocollo di comunicazione: lo standard che si affermato maggiormente SOAP (Simple Object Access Protocol) basato su HTTP e XML; strumenti per la descrizione dei servizi; in questo caso lo standard costituito dal linguaggio formale WSDL (Web Services Denition Language); strumenti per la catalogazione e la scoperta dei servizi: in questo caso si affermato lo standard UDDI (Universal Description Discovery and Integration) che un registry (archivio di registrazioni indicizzato) basato su XML e indipendente dalla piattaforma che permette la scoperta e linterrogazione dei servizi offerti sul Web, delle aziende che li offrono e delle modalit di fruizione. Lo schema della gura 11.1 riassume il ruolo dei componenti appena elencati.
Figura 11.1. |

(..... Da completare .......) Questo capitolo sar completato in una delle prossime versioni di questa dispensa.

205

Capitolo

12

Web 2.0
A partire dal 2004 si iniziato a sentir parlare sempre pi frequentemente di Web 2.0 relativamente ad una serie di nuovi servizi e applicazioni presenti in Internet. Il termine viene per anche usato per sottolineare una nuova fase di vitalit della rete, successiva alla crisi della new economy registrata nei primi anni del nuovo millennio, nonch per sottolineare una modalit innovativa di uso delle le risorse di Internet con un ruolo pi attivo da parte degli utenti. Una possibile denizione di Web 2.0 la seguente: insieme delle diverse applicazioni presenti nel Web che permettono un elevato livello di interazione tra lapplicazione stessa e lutente che ne fa uso. Occorre notare che questa terminologia stata proposta solo per designare lattuale stato evolutivo del Web rispetto alla condizione precedente, per la quale, in origine, non era previsto alcun numero di versione. Dal momento per che il termine Web 2.0 diventato di uso comune, si pensato di battezzare con un numero di versione anche le fasi evolutive precedenti; abbiamo dunque: Web 1.0: il Web statico, diffuso nei primi anni 90; Web 1.5: il Web dinamico, che ha portato, tra laltro, alla diffusione delle applicazioni Web, allavvento del Commercio Elettronico, allintegrazione con le basi di dati. Una osservazione importante riguarda la natura evolutiva della storia del Web: ogni versione non ha cancellato quanto gi presente ma ha portato ampliamenti e miglioramenti soprattutto a livello di servizi per gli utenti. Dal punto di vista tecnologico le basi sono rimaste immutate e sono costituite dal protocollo HTTP e dal linguaggio HTML, risalenti al Web 1.0, cui si sono via via afancate altre tecnologie come i CSS, i CGI, i linguaggi per le elaborazioni lato servente. Per completezza opportuno segnalare che si parla gi anche di Web 3.0 per indicare vari possibili sviluppi futuri fra i quali quello prevalente sembra essere il Web Semantico, che qui per non approfondiamo. Tornando al Web 2.0, utile distinguere due punti di vista, o accezioni, per la sua descrizione: accezione filosofica o sociale: sottolinea gli aspetti innovativi delluso del Web che privilegiano la condivisione e la creazione dei contenuti rispetto alla loro semplice fruizione; accezione tecnologica: descrive gli strumenti che stanno alla base del Web 2.0 e che permettono una forte integrazione, dinamicit e efcienza dei contenuti e delle applicazioni.

206

Web 2.0

12.1 Web 2.0: punto di vista sociale

A partire dal 2004 si hanno una serie di novit che giocano un ruolo decisivo per laffermazione del Web 2.0: la connettivit in rete aumenta in modo considerevole grazie alla sempre maggiore diffusione della banda larga; luso della rete da parte degli utenti aumenta quantitativamente ma soprattutto muta dal punto di vista qualitativo in quanto essi diventano sempre pi coautori dei contenuti e non pi semplici fruitori; vediamo alcuni esempi: diffusione di strumenti di autoproduzione e pubblicazione sul Web di contenuti digitali, (soprattutto foto e video) come youtube.com e flickr.com; esplosione del fenomeno delle comunit in rete, come facebook.com, twitter.com, last.fm e molte altre; esse possono essere considerate le discendenti delle BBS (Bullettin Board System) e dei Newsgroup, affermatisi in rete in epoca pre-Web, ma con livelli di diffusione e partecipazione enormemente superiori; affermazione dei siti personali e dei Blog, facilmente gestibili e aggiornabili, con conseguente nascita del cosiddetto Citizen Journalism o Giornalismo Partecipativo nascita delle enciclopedie collettive in rete (come Wikipedia) in cui i contenuti sono inseriti dagli utenti; la loro affermazione, pur positiva sotto molti punti di vista, comporta per, al pari di altri fenomeni nuovi, come il Giornalismo Collettivo, problematiche di tipo deontologico e di attendibilit; si affermano le Web Applications (applicazioni modulari, interoperabili e di estrema semplicit duso) dotate di sempre maggiori possibilit di integrazione o convergenza, accompagnate dal grande successo di piattaforme per la fruizione dei contenuti alternative al tradizionale Computer; anche in questo caso possiamo illustrare qualche esempio: grazie al meccanismo del Mashup lutente pu usufruire dei servizi di pi applicazioni Web che lavorano in sinergia come nel caso del sito flickr.com che permette di condividere foto indicando il luogo dello scatto grazie allintegrazione con maps.yahoo.com; altro esempio simile quello di housingmaps.com che, negli Stati Uniti, integra gli annunci immobiliari di craiglist.com con le mappe di maps.google.com in modo fa fornire lubicazione delle abitazioni oggetto degli annunci; negli ultimi anni letteralmente esploso il fenomeno delle Apps per i dispositivi iPhone e iPaddella Apple e parallelamente per la piattaforma Android, proposta da Google, basata su Linux e utilizzata in numerosi smartphone e dispositivi mobili di vari altri produttori. Sicuramente in questi anni un ruolo fondamentale per laffermazione del Web 2.0 stato svolto da Google, sia per limportanza dei servizi offerti da questa azienda, che vanno al di l del tradizionale motore di ricerca e che hanno rivoluzionato il mondo delle applicazioni Web, sia per la proposta della piattaforma Android, sia inne, per il lancio di A JAX, che come vedremo tra breve, uno dei pilastri tecnologici su cui si basano le applicazioni del Web 2.0.

Web 2.0

207

Tali applicazioni vengono spesso denite beta, cio non denitive, e siccome la loro evoluzione continua, anche grazie allinterazione con gli utenti e fra gli utenti, si pu prevedere che difcilmente raggiungeranno uno stato consolidato; questa situazione viene illustrata denominando le applicazioni del Web 2.0 come never ending beta applications.

12.2 Web 2.0: punto di vista tecnologico

La novit tecnologica pi importante degli ultimi anni per il Web stata A JAX (Asynchronous JavaScript And XML). Questo acronimo stato proposto per la prima volta nel 2005 in un articolo del Jesse James Garrett, intitolato: Ajax: A New Approach to Web Applications, in cui spiega il nuovo approccio per le applicazioni Web che Google aveva iniziato ad usare (e che ancora usa), nelle piattaforme Google Suggest e Google Maps. Secondo la denizione di Garrett Ajax non una nuova tecnologia, ma un aggregato di pi tecnologie gi esistenti, le quali, se usate in sinergia, permettono di aumentare linterazione, la dinamicit e lefcienza delle applicazioni Web. Grazie anche ad Ajax si avuta una massiccia evoluzione e diffusione delle cosiddette RIA (Rich Internet Application) progettate e realizzate come le corrispondenti applicazioni desktop e che forniscono gli stessi servizi di queste ultime, pur essendo sulla rete (Web based) e quindi usabili dagli utenti in modo diffuso e decentrato. Il concetto di ricchezza in queste applicazioni va interpretato sotto due punti di vista: ricchezza del modello dati; signica che dal lato del cliente possibile rappresentare e gestire strutture dati pi complesse, riducendo in questo modo il carico elaborativo dal lato del servente e interagendo con questultimo in modo pi snello ed essenziale grazie alla comunicazione asincrona; le risposte elaborate dal servente possono essere parti di pagine e non pi necessariamente intere pagine HTML (pagine modulari); ricchezza dellinterfaccia; signica avere interfacce che sono esteticamente e funzionalmente simili a quelle delle tradizionali applicazioni desktop. Nei prossimi paragra vengono forniti alcuni dettagli relativi alluso di Ajax.

12.3 Generalit su Ajax

Ajax si basa sui seguenti elementi: 1. presentazione standard utilizzando XHTML e CSS; 2. interazione con lutente e visualizzazione dinamica dei contenuti tramite DOM; 3. scambio e manipolazione delle informazioni utilizzando preferibilmente XML e XSLT; 4. richiesta delle informazioni in maniera asincrona tramite loggetto JavaScript XMLHttpRequest; 5. uso di JavaScript per legare insieme tutte le tecnologie sopracitate.

208

Web 2.0

Con Ajax si pu superare il modello classico richiesta/risposta delle applicazioni Web, effettuando chiamate asincrone verso il servente. Ricordiamo infatti che il usso tradizionale delle applicazini Web, secondo il protocollo HTTP, il seguente: richiesta pagina da parte del cliente al servente; elaborazione richiesta ed invio risposta da parte del servente; Qualsiasi aggiornamento dei dati presentati nella risposta presuppone linvio di ulteriori richieste da parte del cliente. Ricordiamo inoltre che in questo tipo di applicazioni il front-end (moduli HTML e risposte) separato anche sicamente dalla logica applicativa (oltre che dal back-end), cosa che non avviene nei normali programmi desktop nei quali tutte le componenti coesistono in ununica unit elaborativa. Questo rende il comportamento delle applicazioni Web particolarmente complesso, lento e macchinoso. La novit di Ajax consiste nella possibilit di effettuare chiamate asincrone verso il servente, utilizzando codice JavaScript, anche senza che lutente faccia una richiesta esplicita tramite il programma di navigazione. Cos possibile ad esempio aggiornare alcuni dati presenti sulla pagina senza necessit di ricaricarla interamente. Gli schemi delle gure 12.1 e 12.2 illustrano il comportamento delle applicazioni Ajax paragonandolo a quello delle applicazioni Web tradizionali.
Figura 12.1. |

Web 2.0
Figura 12.2. |

209

Il cardine di tutto il meccanismo loggetto JavaScript XMLHttpRequest grazie al quale si effettuano richieste sincrone e asincrone sfruttando il protocollo HTTP. Lo scambio di dati che si pu realizzare con questo oggetto sarebbe da effettuare, secondo chi ha coniato lacronimo Ajax, usando il formato XML; in realt ci non assolutamente obbligatorio e si possono utilizzare molti altri formati fra cui il testo puro. Grazie ad Ajax la pagina Web pu divenire unentit attiva, dinamica e fortemente responsiva con un comportamento interattivo simile a quello delle applicazioni desktop; ecco quindi che sempre pi spesso anche nel campo delle applicazioni Web si sente parlare di oggetti come controlli, eventi, nestre ed altri, tipici della programmazione tradizionale. Con Ajax la navigazione pu essere pi piacevole, dinamica e coinvolgente per lutente; inoltre buona parte dellelaborazione viene spostata nel cliente alleggerendo il carico del servente e diminuisce anche la quantit di dati da scambiare non essendo pi necessario richiedere intere pagine. Ci sono per anche alcuni svantaggi o problemi da tenere in considerazione: le applicazioni Ajax non garantiscono compatibilit tra i diversi browser; necessario che JavaScript sia attivo nel cliente e questo rende necessarie alternative che consentano il corretto funzionamento dellapplicazione nel caso ci non sia vero;

210

Web 2.0

il pulsante indietro del programma di navigazione diventa inutile in quanto le applicazioni Ajax possono aggiornare di volta in volta una singola porzione di documento; linserimento di segnalibri praticamente impossibile perch i contenuti delle pagine Ajax sono dinamici; per lo stesso motivo anche lindicizzazione da parte dei motori di ricerca pu essere molto difcoltosa; laccessibilit e lusabilit dei contenuti pu essere compromessa; si pensi ad esempio alla necessit da parte di ipovedenti o ciechi di disabilitare o sovrascrivere il foglio di stile della pagina compromettendo il corretto funzionamento di Ajax che diventerebbe solo un ulteriore intralcio per la navigazione.

12.4 Loggetto XMLHttpRequest

Storicamente loggetto XMLHttpRequest trova origine nel pacchetto di supporto a XML introdotto da Microsoft nel browser Internet Explorer 5 e precisamente da un componente Activex chiamato XMLHttp. Successivamente anche tutti gli altri programmi di navigazione hanno seguito questa strada, privilegiando per il linguaggio JavaScript e adottando loggetto XMLHttpRequest. Dalla versione 7 del suo browser, anche Microsoft supporta questo oggetto e questo sicuramente un benecio per gli sviluppatori che non sono pi costretti a usare oggetti diversi per creare applicazioni Ajax funzionanti con i pi diffusi programmi di navigazione. Per usare loggetto XMLHttpRequest occorre compiere le seguenti operazioni fondamentali: istanziare loggetto; eseguire il metodo open() in modo da inizializzarlo; associare la funzione che deve gestire la risposta del servente e che prende il nome di callback function; effettuare la richiesta al servente Vediamole in dettaglio: per istanziare loggetto basta scrivere:
|var oggXHR = new XMLHttpRequest();

il metodo open() prevede come parametri il tipo di richiesta (get o post), lindirizzo URL a cui inviarla, una variabile booleana da impostare a true afnch la richiesta sia asincrona (con false si ha invece una richiesta sincrona) e opzionalmente un nome utente e relativa password; avremo quindi, ad esempio:
|var oggXHR = new XMLHttpRequest(); |oggXHR.open("get","esempio.xml", true);

la callback function (necessaria solo nel caso di chiamate asincrone) viene uti-

Web 2.0

211

lizzata per ricevere le notiche sullo stato di avanzamento della richiesta, in modo che il codice JavaScript possa comportarsi di conseguenza e viene associata allevento onreadystatechange. Nellesempio che segue si suppone che la funzione si chiami funzCallback:
|var oggXHR = new XMLHttpRequest(); |oggXHR.open("get","esempio.xml", true); |oggXHR.onreadystatechange = funzCallback;

Per utilizzare al meglio tale funzione opportuno conoscere almeno le principali propriet delloggetto XMLHttpRequest, riassunte nella tabella seguente:
Propriet Descrizione valore intero che indica lo stato della richiesta: 0 = non ancora aperta (corrispondente alla costante UNSENT dellogetto XMLHttpRequest) 1 = aperta ma non ancora partita (OPEN) 2 = inviata (SENT) 3 = risposta in caricamento (LOADING) 4 = completata (DONE) risposta del servente in formato stringa risposta del servente elaborata dal parser XML e convertita in oggetto DOM valore numerico dello stato HTTP (ad esempio 404) stringa associata allo stato (ad esempio "Not Found")

readyState

responseText responseXML status statusText

Naturalmente la funzione di callback ha a disposizione i dati della risposta e anche i valori delle altre propriet come status e statusText solo nel momento in cui il valore della variabile readyState 4. Vediamo una possibile funzione di callback che effettui qualche controllo sullesito della richiesta:
|function funzCallback() { | try { | if (oggXHR.readyState == 4) { // risposta completa | if (oggXHR.status == 200) { | alert (Test Ajax OK); | } | else { | alert (Errore HTTP); | } | } | } catch (e) { | alert (Errore nella funzione di callback: + e); | } |}

linvio della richiesta si effettua con il metodo send() che ha come parametro il corpo della richiesta (necessario solo se il tipo di richiesta post).

212

Web 2.0

12.4.1 Chiamate di tipo get

Vediamo adesso un listato che riepiloga quanto illustrato nora eseguendo una richiesta di tipo get con lo scopo di ricevere il le eseAjax.html> al caricamento della pagina Web in cui il codice JavaScript inserito:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

|<html> |<head><title>Esempio Ajax</title> |<script language="JavaScript" type="text/javascript"> | <!-- Begin script | var oggXHR = new XMLHttpRequest(); | function funzCallback() { | try { | if (oggXHR.readyState == 4) { // risposta completa | if (oggXHR.status == 200) { | risTesto = oggXHR.responseText; | document.getElementById(carica).innerHTML = risTesto; | } | else { | alert (Errore HTTP); | } | } | } catch (e) { | alert (Errore nella funzione di callback: + e); | } | } | function provaAjax() { | oggXHR.onreadystatechange = funzCallback; | oggXHR.open("get","eseAjax.html", true); | oggXHR.send(); | } | // --> |</script> |</head> |<body onLoad="provaAjax()";> |<div id="carica" style="text-align:center;"> |Ajax non funziona! |</div> |</body> |</html>

Al ne di vericare il funzionamento di quanto esposto, opportuno ricordare che Ajax si appoggia comunque al protocollo HTTP e quindi la pagina deve essere richiesta ad un servente Web (eventualmente http://localhost) e non aperta con file:// o con la scelta Apri le del menu File. Soffermiamoci sulle parti salienti del listato: alla riga 5 c listanziazione di XMLHttpRequest con la variabile oggXHR denita globalmente in modo che sia visibile in tutte le parti del codice JavaScript; il comportamento della funzione di callback funzCallback dovrebbe essere abbastanza chiaro: in particolare si notino le righe 10 e 11 nelle quali, in caso di richiesta esaudi-

Web 2.0

213

ta positivamente, viene acquisito il contenuto della pagina ricevuta e inserito come testo HTML dellelemento inviduato dallidenticativo carica; tale elemento una sezione (<div>) del corpo della pagina, denita alla riga 30; da riga 21 a riga 25 troviamo la funzione che denisce la richiesta e la invia con il metodo send; tale funzione viene richiamata al caricamento di questa pagina grazie allevento onLoad denito a riga 29; se va tutto bene si vede apparire sul browser il contenuto della pagina eseAjax.html, altrimenti la scritta denita a riga 31.

12.4.2 Chiamate di tipo post

Con una chiamata di tipo post si pu richiedere una risposta al servente inviandogli contemporaneamente dei dati, da inserire nel corpo della richiesta, come argomento del metodo send. Afnch linvio dei dati funzioni correttamente necessario che: venga impostata una intestazione della richiesta con il metodo setRequestHeader nella quale si specica la chiave Content-Type e il valore application/x-www-form-urlencoded in modo da simulare linvio dei dati da un modulo HTML;
|oggXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

si codichino le informazioni nel modo previsto cio con codica URL, (della quale abbiamo parlato nel paragrafo 6.9); per effettuare tale codica pu essere usata la funzione JavaScript encodeURIComponent(). Come esempio realizziamo un modulo con un singolo campo in cui inserire il nome di una localit che viene inviato con una chiamata di tipo post al servente; la risposta sar il corrispondente codice di avviamento postale da far apparire a anco del campo di input.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

|<html> |<head><title>Esempio2 AJAX</title> |<script language="JavaScript" type="text/javascript"> | <!-- Begin script | var oggXHR = new XMLHttpRequest(); | function funzCallback() { | try { | if (oggXHR.readyState == 4) { // risposta completa | if (oggXHR.status == 200) { | risTesto = oggXHR.responseText; | document.getElementById(cap).innerHTML = risTesto; | } | else { | alert (Errore HTTP); | } | } | } catch (e) {

214
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

Web 2.0
| | | | | | | |
alert (Errore nella funzione di callback: + e); } } function provaAjax() { oggXHR.onreadystatechange = funzCallback; oggXHR.open("post","elabora.php", true); oggXHR.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

var dati = "loc=" + encodeURIComponent(document.forms.modulo1.loc.value);

| oggXHR.send(dati); | } | function pulisci() { | document.getElementById(cap).innerHTML = ""; | } | // --> |</script> |</head> |<body> |<div style="text-align:center;font-weight:bold;"> |Ricerca CAP |<p/> |<form id="modulo1"> |<input type="text" name="loc"/> |<span id="cap"></span> |<p /><br /> |<input type="button" value="Trova CAP" onClick="provaAjax();"/> |<input type="reset" value="Pulisci" onClick="pulisci()"/> |</form> |</body> |</html>

Rispetto allesempio precedente le differenze principali sono alle righe da 23 a 26 dove viene effettuata la chiamata di tipo post, viene impostata lintestazione della richiesta e viene fatto linvio passando il parametro contenente il dato raccolto dal campo di input del modulo. Il dato ricevuto in risposta (righe 10 e 11) viene inserito nel modulo a anco del campo di input (riga 40). Il piccolo modulo usato nellesempio viene gestito con funzioni JavaScript, sia per linvio della richiesta (riga 42) che per la pulizia dei dati (riga 43). Per lelaborazione dal lato del servente si predispone uno script PHP, elabora.php che effettua lassociazione tra codice e localit usando un piccolo vettore associativo contente nomi e codici delle localit Milano, Treviso e Roma (naturalmente questa soluzione non realistica ed proposta solo a titolo di esempio).
|<?php |$tab[Milano]="20100"; |$tab[Roma]="00100"; |$tab[Treviso]="31100"; |$nomeLoc=$_POST[loc]; |$ris=$tab[$nomeLoc]; |if ($ris=="") { | $ris="Non trovato";

Web 2.0
|} |print ("$ris"); |?>

215

Nelle due gure 12.12 e 12.13 vediamo il comportamento della pagina appena realizzata.
Figura 12.12. |

Figura 12.13. |

12.4.3 Chiamate sincrone

Anche se non importante nellambito di Ajax, il metodo XMLHttpRequest permette di effettuare anche chiamate sincrone; basta usare il metodo open passando come terzo parametro il valore false. In questo caso non necessario gestire levento onreadystatechange e quindi non serve la funzione di callback.
|<html> |<head><title>Esempio Ajax sincrono</title> |<script language="JavaScript" type="text/javascript"> | <!-- Begin script | function provaAjax() { | var oggXHR = new XMLHttpRequest(); | oggXHR.open("get","eseAjax.html", false); | oggXHR.send(); | risTesto = oggXHR.responseText; | document.getElementById(carica).innerHTML = risTesto;

216
| } | // --> |</script> |</head> |<body onLoad="provaAjax()";> |<div id="carica" style="text-align:center;"> |Ajax non funziona! |</div> |</body> |</html>

Web 2.0

Questo esempio produce lo stesso risultato di quello asincrono mostrato nel paragrafo 12.4.1 con la differenza che il cliente, rimane bloccato in attesa della risposta per tutto il tempo necessario al servente ad elaborare e inviare la risposta stessa. Si ha quindi un comportamento del tutto analogo a quello classico delle applicazioni Web tradizionali con tutte le conseguenze che da ci discendono dal punto di vista della logica elaborativa e dei tempi di risposta della procedura.

12.4.4 Esempio di gestione di un modulo con Ajax

Per concludere questa rapida carrellata su Ajax vediamo un esempio un po pi complesso in cui viene gestito un modulo di immissione dati su una macchina cliente grazie ad una interazione continua con il servente che deve ricevere e controllare le informazioni. In particolare supponiamo che il modulo serva a registrarsi ad un qualche tipo di servizio e richieda obbligatoriamente un nome utente, una password con relativa conferma, un indirizzo di posta elettronica. La logica di funzionamento dellinterfaccia la seguente: il nome utente non deve essere gi esistente; la password deve essere lunga almeno 6 caratteri; lindirizzo di posta deve essere sintatticamente corretto (secondo quanto stabilito nellesempio del paragrafo 7.7) e non essere gi esistente; i controlli sui campi avvengono quando ognuno di essi perde il focus e prevedono la visualizzazione di un riscontro positivo o di un breve messaggio di errore, a anco del campo stesso; lacquisisione denitiva dei dati da parte del servente avviene alla pressione di un apposito tasto, previo controllo sulleffettivo inserimento di tutti i campi. Anche stavolta il motore applicativo sul servente, scritto in PHP, viene solo abbozzato utilizzando dei vettori associativi con dati predeniti e non, come sarebbe logico, archivi gestiti dal back-end della procedura. A differenza degli esempi dei paragra precedenti, la parte relativa allinterfaccia viene realizzata scrivendo le funzioni JavaScript in un le separato dal le HTML. Analogamente agli esempi precedenti, non viene invece curato laspetto esteriore della pagina e dei messaggi di risposta; quindi luso dei CSS ridotto al minimo indispensabile. Iniziamo mostrando il sorgente HTML con il modulo di immissione dei dati:

Web 2.0
|<html> |<head><title>Modulo AJAX</title> |<style type="text/css"> |div.titolo { font-weight: bold; | } |div#risposta { | color: blue; | } |.campo { position: absolute; | left: 160px; | } |.campoCheck { position: absolute; | left: 370px; | color: blue; | } |</style> |<script language="JavaScript" type="text/javascript" src="moduloAjaxFunz.js"> |</script> |</head> |<body> |<div class="titolo"> |Immissione dati |</div> |<p/> |<form id="modulo1"> |Nome utente: <input class="campo" onblur="controlla(nomeUtente, 1);" |type="text" name="nomeUtente" id="nomeUtente"/> |<span class="campoCheck" id="campoCheck1"></span> |<br /> |Password: <input class="campo" onblur="controlla(psw, 2);" |type="password" name="psw" id="psw"/> |<span class="campoCheck" id="campoCheck2"></span> |<br /> |Ripeti password: <input class="campo" onblur="controlla(psw2, 3);" |type="password" name="psw2" id="psw2"/> |<span class="campoCheck" id="campoCheck3"></span> |<br /> |Indirizzo di posta: <input class="campo" onblur="controlla(indPosta, 4);" |type="text" name="indPosta" id="indPosta"/> |<span class="campoCheck" id="campoCheck4"></span> |<p /><br /> |<input type="button" value="Conferma" onClick="inviaDati();"/> |<input type="reset" value="Pulisci" onClick="pulisci(4)"/> |</form> |<div id="risposta"> |</div> |</body> |</html>

217

Importante notare, allinterno del modulo, il richiamo della funzione controlla alla perdita del focus di ogni campo, la denizione delle aree per accogliere i messaggi di risposta di tale funzione (con uso del tag <span>), il richiamo delle funzioni inviaDati e pulisci rispettivamente alla pressione dei pulsanti di conferma e di reset.

218 Il le con le funzioni JavaScript e le chiamate Ajax il seguente:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Web 2.0

|var flagErr=0; |function controlla(campo, numCampo) { | oggXHR = new XMLHttpRequest(); | oggXHR.onreadystatechange = function() { // funzione di callback | try { | if (oggXHR.readyState == 4) { | if (oggXHR.status == 200) { | campoCheck = campoCheck + numCampo; | risTesto = oggXHR.responseText; | document.getElementById(campoCheck).innerHTML = risTesto; | if (risTesto!=OK! && risTesto!=) { | flagErr=1; | } | else { | flagErr=0; | } | if (numCampo == 3 && risTesto != OK!) { | document.getElementById(campo).value =""; | } | } | else { | alert (Errore HTTP); | } | } | } catch (e) { | alert (Errore nella funzione di callback: + e); | } | } // fine funzione di callback | oggXHR.open("post","moduloAjax.php", true); | oggXHR.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");

var dati = campo + = + encodeURIComponent(document.getElementById(campo).value);

| if (numCampo == 3) { | dati = dati + &psw= + document.getElementById(psw).value; | } | oggXHR.send(dati); |} |function pulisci(num) { | flagErr=0; | for (i=1;i<=num;i++) { | campoCheck=campoCheck + i; | document.getElementById(campoCheck).innerHTML = ""; | } |} |function inviaDati() { | if (flagErr==1) { | exit; | } | oggXHR = new XMLHttpRequest(); | oggXHR.onreadystatechange = function() { // funzione di callback | try { | if (oggXHR.readyState == 4) {

Web 2.0
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

219
if (oggXHR.status == 200) { risTesto = oggXHR.responseText; document.getElementById(risposta).innerHTML = risTesto; } else { alert (Errore HTTP); } } } catch (e) { alert (Errore nella funzione di callback: + e); } } // fine funzione di callback oggXHR.open("post","moduloAjaxInvio.php", true); oggXHR.setRequestHeader("Content-Type",

| | | | | | | | | | | | | | | | | |

"application/x-www-form-urlencoded");

var dati = nomeUtente= + encodeURIComponent(document.getElementById(nomeUtente).value); dati = dati + &psw= + encodeURIComponent(document.getElementById(psw).value); dati = dati + &psw2= + encodeURIComponent(document.getElementById(psw2).value); dati = dati + &indPosta= + encodeURIComponent(document.getElementById(indPosta).value); oggXHR.send(dati);

| |}

Servendoci della numerazione delle righe commentiamo i punti pi importanti del listato: la funzione controlla (riga 2) viene richiamata passando come parametri il nome del campo da controllare e il numero progressivo dello stesso; la sua funzione di callback (righe da 4 a 28) scritta direttamente allinterno e non separatamente come negli esempi precedenti; alla riga 31 viene preparato il dato da passare allo script moduloAjax.php sul servente grazie al nome (parametro campo) e al rispettivo valore (acquisito con la funzione JavaScript getElementById()); se il campo da controllare la seconda password vengono passate entrambe le password per permettere il controllo sulla loro uguaglianza (righe da 32 a 34); nella funzione di callback, alla riga 8, viene impostata il nome dellarea in cui far apparire il messaggio di risposta; nelle righe dalla 11 alla 16 si imposta il ag agErr in base al fatto che il campo sia errato o no; tale ag serve poi nella funzione inviaDati; se il terzo campo errato, cio se la seconda password non coincide con la prima, si pulisce la seconda password (righe da 17 a 19); la funzione pulisci elimina il testo di output dalle relative aree; il parametro che riceve indica il numero di aree da pulire (righe da 39 a 42); la funzione inviaDati agisce solo se il relativo pulsante stato attivato in assenza di errori sui campi (righe da 45 a 47) e prosegue passando tutti i dati allo script moduloAjaxInvio.php sul servente (righe da 66 a 70);

220

Web 2.0

nella sua funzione di callback si ha la visualizzazione del messaggio di risposta proveniente da tale script (riga 54). Vediamo inne i due listati PHP rispettivamente per il controllo dei singoli campi e per lelaborazione nale dei dati inviati:
|<?php |$ute[pippo]="pippo@dominio.it"; |$ute[pluto]="pluto@dominio.it"; |$ute[paperino]="pap@dominio.it"; |$uteRev=array_flip($ute); |$nomeUtente=$_POST[nomeUtente]; |$psw=$_POST[psw]; |$psw2=$_POST[psw2]; |$indPosta=$_POST[indPosta]; |if (! empty($nomeUtente)) { | $ris="OK!"; | if ($ute[$nomeUtente]!="") { | $ris="Errore: utente esistente"; | } |} |if (! empty($psw)) { | $ris="OK!"; | if (strlen($psw) < 6) { | $ris="Errore: password troppo corta"; | } |} |if (! empty($psw2)) { | $ris="OK!"; | if ($psw != $psw2) { | $ris="Errore: password diverse"; | } |} |if (! empty($indPosta)) { | $ris="OK!"; | if (!preg_match("/^[^@ ]{2,}@[^@ \.]+\.[^@ \.]{2,}$/",$indPosta)) { | $ris="Errore: ind. posta non valido"; | } | else { | if ($uteRev[$indPosta]!="") { | $ris="Errore: ind. mail esistente"; | } | } |} |print ("$ris"); |?>

|<?php |$nomeUtente=$_POST[nomeUtente]; |$psw=$_POST[psw]; |$psw2=$_POST[psw2]; |$indPosta=$_POST[indPosta]; |if (empty($nomeUtente) || empty($psw) || empty($psw2) || empty($indPosta)) {

Web 2.0
| $ris="Errore: tutti i campi sono obbligatori!"; |} |else { | // eventuali istruzioni per la memorizzazione dei dati | $ris="Dati ricevuti!"; |} |print ("$ris"); |?>

221

Data la banalit delle elaborazioni svolte, non necessario fornire grosse spiegazioni sul comportamento dei due script; si noti solo luso della funzione array_flip grazie alla quale si ha a disposizione un vettore associativo in cui scambiato il ruolo dei valori con quello delle chiavi (la cosa possibile solo se anche i valori, oltre alle chiavi, sono univici) e che viene usato per il controllo di non esistenza dellindirizzo di posta. Per il resto sottolineiamo, ancora una volta, le semplicazioni presenti sia nello script dei controlli che in quello per linvio dai dati, nel quale, tra laltro, manca del tutto la parte di elaborazione e memorizzazione dei dati ricevuti. Le due gure 12.19 e 12.20 mostrano sommariamente il funzionamento dellinterfaccia nel caso ci sia un campo errato e in quello in cui linvio dei dati andato a buon ne.
Figura 12.19. |

Figura 12.20. |

222

Web 2.0

223

Capitolo

13

Bibliograa
13.1 Testi

"Accesso a database via Web" di Luca Mari - Ed. Apogeo 2001 "Ajax per applicazioni Web" di Andrea Guidi, Andrea Romagnoli, Pasquale Salerno - Ed. Apogeo 2007 "Cascading Style Sheets la guida completa" di Eric A. Meyer - Ed. Hops 2004 "HTML per il World Wide Web" di Elisabeth Castro - Ed. Pearson 2003 "Linux e programmazione Web" II.a edizione di Michele Sciabarr - Ed. McGraw-Hill 2001 "Linux la guida completa" III edizione di Richard Petersen - Ed. McGraw-Hill 2001 "PHP5 guida per lo sviluppatore" di autori vari - Ed. Hoepli 2004 "Programmare in PHP" di Rasmus Lerdorf e Kevin Tatroe - Ed. Hops 2002 "Reti di calcolatori" IV edizione di Andrew S. Tanenbaum - Ed. Pearson 2003 "Web 2.0 Ajax di Luciano Noel Castro - Ed. Sprea 2008 "Web Services guida pratica" di Ivan Venuti - Ed. Master 2003

13.2 Siti Web

"Apache" - Uri: http://www.apache.org "Appunti di informatica libera" - Uri: http://informaticalibera.net "Elenco tag HTML deprecati" -Uri: http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2 "Elenco dei tipi MIME" -Uri: http://www.asciitable.it/mimetypres.asp "Linuxdidattica" -Uri: http://www.linuxdidattica.org "HTML.IT" - Uri: http://www.html.it "Manuale PHP" -Uri: http://www.php.net/manual "Nic" -Uri: http://www.nic.it "Programma uncgi.c per decodica input CGI" -Uri: http://www.midwinter.com/~koreth/uncgi.html "Sun" - Uri: http://www.sun.com "Validatore HTML" -Uri: http://validator.w3.org "W3C" - Uri: http://www.w3.org

13.3 Altre fonti

Tesina per lesame di Stato di Cester Samuele, classe 5a-inf, a.s. 2009-2010, ITIS "Max Planck" Lancenigo (TV), dal titolo: "Web 2.0 e Social Network