Prologo

Questo post continua il filone della paginetta sfrucugnata, che avevamo lasciato nel post del diario della nonna. Vi invito a frugare negli esempi che seguono con la solita tecnica per vedere la sorgente delle pagine html: tasto destro del mouse e Pagina sorgente o HTML, a seconda del tipo di browser.

Anche se ci dilungheremo mostrando alcuni spezzoni di codice, lo scopo non è quello di diventare programmatori. Non fatevi venire l’ansia di voler sapere tutto di HTML, CSS o altro. Noi qui vogliamo familiarizzare ulteriormente con il codice, semplicemente abituarsi a vederlo, senza chiudere l’occhio della mente quando lo sguardo cade su un pezzetto di codice, frammisto al testo. Noi qui vogliamo anche percepire, anzi toccare con mano la caratteristica gemmante del codice, una caratteristica che credo sia propria della lingua, in generale. Sarebbe interessante poter vedere in maniera visiva e dinamica, l’evoluzione dell’insieme delle lingue da diecimila anni a questa parte, contraendo la scala dei tempi a qualche minuto, forse qualcuno l’ha fatto. Assisteremmo a qualcosa di estremamente dinamico, una fantastica proliferazione fiammeggiante di lingue, dialetti e gerghi. Il codice fa parte di questo, credo, solo che evolva appunto in tempi molto più contratti di quelli caratteristici delle lingue parlate.

Il perseguimento di tali obiettivi generali non preclude la possibilità che qualcuno di voi finisca per manipolare effettivamente qualche frammento di codice, in pratica. Qualcuno lo sta già facendo, sulla scorta di esperienze pregresse. Per esempio, avete già visto che con pochi rudimenti di HTML si possono scrivere commenti più ornati ai post dei blog, o anche inserire link attivi. Ma nei vostri stessi blog si possono fare molte altre cose ancora, se si possiede una minima confidenza con il codice, per esempio potete personalizzare ampiamente il loro aspetto grafico, ma non precorriamo i tempi, non abbiamo alcuna fretta. Aggiungo invece che questa agilità che ci proponiamo di acquisire, può tornare molto utile nella vita pratica. Questa blogoclasse è popolata principalmente da insegnanti i quali sono interessati anche, e presumibilmente in modo non trascurabile, all’impiego delle tecnologie nella pratica didattica. Vi sono fra di voi persone che lo stanno già facendo, in maniera anche approfondita. È inevitabile, lavorando con questi strumenti, “sporcarsi le mani”, progressivamente, cambiando oggi una cosa qua, domani una là. Non ci si deve sentire soli, Internet è prodiga di consigli, esperienze, soluzioni, ma non va dimenticata l’eredità di un’esperienza come quella della blogoclasse. Potrà essere molto naturale chiedere ad un ex compagno di blogoclasse un consiglio su un problema che si sospetta lui abbia già affrontato.

C’è poi un aspetto molto interessante. Quando si insegna, si è a contatto con gli studenti, che talvolta possono avere delle competenze o delle capacità incredibili. Ricordo di uno studente che aveva scoperto delle gravi falle in un database di una grande organizzazione, alla quale io appartenevo. Mi disse: “Prof, dica qualcosa a questa gente perché chi ha fatto quel sistema non sa lavorare …”. E non era uno studente di informatica! Queste non sono circostanze da temere, sono colpi di fortuna, che possono essere volti a vantaggio di tutti, insegnante compreso. Io ho imparato molte cose da alcuni miei studenti.

Ultima osservazione, gli esempi qui sotto potrebbero essere svolti in molti altri modi. Il codice si può sempre scrivere in modi differenti, specialmente quando codici diversi si intrecciano in un’unica cosa. Il criterio che ho privilegiato qui è quello della massima semplicità, preferendo i costrutti più semplici e riducendo al massimo il numero di nuovi simboli.

Un testo codificato in HTML

Con tali premesse, partiamo da questa semplicissima pagina. Riporto la sorgente qui sotto per agevolare la lettura del post, anche se potete accedervi direttamente dalla pagina stessa, con il solito metodo. Anzi, vi invito a copiare le sorgenti di questi documenti in file sul vostro disco in modo da provare voi stessi a sperimentare delle varianti, tornando bambini, come si diceva in un commento precedente.

<html>
	<body>
		<h1>Animali</h1>
		<h2>Mammiferi</h2>
		<p>Cane</p>
		<p>Gatto</p>
		<h2>Uccelli</h2>
		<p>Passerotto</p>
		<p>Aquila</p>
	</body>
</html> 

… ornamentato …

Rendiamo ora la pagina più gaia, per esempio colorando un po’ il testo. L’avevate già visto fare nella paginetta sfrucugnata, ecco la versione colorata della nuova pagina. Già che ci siamo, introduciamo un minimo di nomenclatura. I codici HTML, tipo <p> o <h1>, si chiamano elementi o tag. I tag possono avere attributi. Per esempio, nel codice dell’ultimo link che ho scritto

<a href="http://lai.dfc.unifi.it/lab/p2.html">versione colorata della nuova pagina</a>

Abbiamo usato il tag <a> arricchito dall’attributo href al quale abbiamo dato il valore di http://lai.dfc.unifi.it/lab/p2.html. Ricordo, per chi vuole approfondire le meraviglie di HTML, la Scuola W3, che è veramente ottima. Può convenire rifarsi dalla prima pagina, leggendo e sperimentando con gli esercizi proposti, una dopo l’altra, almeno all’inizio.

Ebbene, nella versione colorata della nuova pagina abbiamo arricchito i tag <p>, <h1> e <h2> con l’attributo style, al quale abbiamo assegnato i valori color:red, color:blue e color:green, come si vede nel codice qui sotto:

<html>
	<body>
		<h1 style="color:red">Animali</h1>
		<h2 style="color:green">Mammiferi</h2>
		<p style="color:blue">Cane</p>
		<p style="color:blue">Gatto</p>
		<h2 style="color:green">Uccelli</h2>
		<p style="color:blue">Passerotto</p>
		<p style="color:blue">Aquila</p>
</body>
</html> 

Fin qui non molto di nuovo, rispetto alla paginetta. Siamo contenti di poter colorare il testo e ci rallegriamo di poter fare chissà quante altre cose – basta frugare fra i materiali della Scuola W3. Dobbiamo tuttavia ammettere che fino ad ora è stato facile perché abbiamo lavorato su di un documento molto breve, molto più breve dei documenti che manipoliamo quotidianamente. La prospettiva di editare un testo molto lungo per cambiare il colore di tutti i paragrafi non è molto piacevole. Sì, ci possiamo aiutare con gli automatismi che molti editori forniscono, ma si fa presto a combinare pasticci in un documento lungo e complesso. Ci vorrebbe una magia per poter dire in un colpo solo: “Colorami tutti i paragrafi con l’arancione!” Fortunatamente, questa magia è stata già fatta. Vediamola prima di darle un nome (qui la pagina in rete):

<html>
	<head>
		<style>
			h1{color:red;}
			h2{color:green;}
			p{color:blue;}
		</style>
	</head>
	<body>
		<h1>Animali</h1>	
		<h2>Mammiferi</h2>
		<p>Cane</p>
		<p>Gatto</p>
		<h2>Uccelli</h2>
		<p>Passerotto</p>
		<p>Aquila</p>
	</body>
</html> 

È facile vedere come sia stata attuata la magia invocata. Il testo codificato è stato separato in due parti, una racchiusa fra i tag <head> e </head>, che ho evidenziato mediante lo sfondo grigio, e l’altra fra i tag <body> e </body>. Nella sezione head troviamo tutte le specifiche relative agli ornamenti e nella sezione body troviamo il testo codificato in HTML.

In questo modo, se vogliamo cambiare il colore di tutti i paragrafi del documento, non abbiamo da fare altro che da alterare adeguatamente il codice opportuno nella sezione che descrive le ornamentazioni.

Questo, nel nostro racconto, è il punto nel quale gemma un nuovo codice, quello che si trova fra <head> e </head>. Anzi, occorre essere più precisi, la “buccia” della nuova gemma è costituita dai tag <style> e </style>, evidenziati in giallo, perché la sezione delimitata dal tag <head>, può ospitare anche altre gemme. Accenneremo ad un’altra di queste dopo. Il nuovo codice è appunto nuovo, ha un sintassi diversa anche se si riconosce facilmente la sua origine, dai simboli p, h1, e h2.

Il nuovo codice si chiama CSS (Cascading Style Sheet) e serve a formattare (io ho parlato di “ornare” fin qui) i vari elementi di un testo codificato in HTML (e non solo). La sintassi base di una codifica CSS è molto semplice e si può riassumere così:

selettore {
	una_proprietà:un_valore;
	altra_proprietà:altro_valore;
	eccetera:eccetera
}
altro_selettore {
	eccetera:ecetera;
	}

Anche con il CSS, per chi vuole approfondire c’è la relativa scuola W3.

La gemmazione, nella sostanza è avvenuta, ma può essere perfezionata con un passo ulteriore. È vero che i due codici, HTML e CSS, sono stati completamente separati nell’esempio che abbiamo mostrato, ma continuano a risiedere in uno stesso documento, e come tale anche in uno stesso file. Il passo successivo è breve, eccolo (qui la pagina in rete):

<html>
	<head>
		<link rel="stylesheet" href="p4.css" type="text/css">
	</head>
	<body>
		<h1>Animali</h1>
		<h2>Mammiferi</h2>
		<p>Cane</p>
		<p>Gatto</p>
		<h2>Uccelli</h2>
		<p>Passerotto</p>
		<p>Aquila</p>
	</body>
</html> 

Anche qui c’è un “luogo” per il codice destinato all’ornamentazione, ovvero alla formattazione, ma è stato ridotto ad un mero riferimento, espresso dal tag <link> i cui attributi, ci dicono che il documento è collegato ad un altro che descrive lo stile (stylesheet), che si trova in un file di nome p4.css il quale contiene testo codificato in CSS. Ovviamente, affinché la cosa funzioni, il file p4.css deve esistere, eccolo (qui la pagina in rete):

h1 {color:red;}
h2 {color:green;}
p {color:yellow;}

… dinamizzato …

Senza spingersi troppo in là, può valer la pena di intravedere un’altra gemmazione, che negli ultimi anni ha ampliato molto le potenzialità del Web. Introduciamola questa volta bruscamente, alterando di poco i documenti precedenti:

<html>
	<head>
		<link rel="stylesheet" href="p5.css" type="text/css">
		<script type="text/javascript">
			document.getElementByClass('changeMe').onmouseover.style;
		</script>
	</head>
	<body>
		<h1>Animali</h1>	
		<h2>Mammiferi</h2>
		<p class="ChangeMe">Cane</p>
		<p class="ChangeMe">Gatto</p>
		<h2>Uccelli</h2>
		<p class="ChangeMe">Passerotto</p>
		<p class="ChangeMe">Aquila</p>
	</body>
</html>

h1 {color:red;}
h2 {color:green;}
p.changeMe {color:blue;}
p.changeMe:hover {color:yellow;}

Effettivamente una nuova gemma è spuntata fra i tag <head>;, e la sua “buccia” si chiama <script>. In generale il termine script designa una un insieme di istruzioni, ovvero, se vogliamo, un programma, un frammento di codice da eseguire. Questo è un fatto assai rilevante. Ci stavamo occupando della codifica di un documento ed eventualmente della sua ornamentazione, e ora all’improvviso scopriamo che nel nostro documento è emerso un frammento di codice da eseguire, ma per fare cosa? Provate voi stessi viaggiando con il mouse sulle parole dell’ennesima versione della nostra pagina (e qui la corrispondente pagina CSS in rete).

Visto l’effetto? È così che le pagine web divengono dinamiche. Il codice in questione, nel nostro semplice esempio una sola riga (la riga numero 5), è codice Javascript (qui la scuola W3. Con questo semplice esempio, vi potete rendere conto com’è che, quando caricate nel browser una pagina Web, in realtà non state caricando solo informazioni ma anche funzionalità, e questo ha anche varie altre implicazioni, che forse riprenderemo in qualche discorso successivo.