Questo sito non usa cookies e non profila nulla
È un'estensione (e futuro sostituto) del blog
http://iamarf.org
CC Attribuzione - Condividi allo stesso modo - Italia 2.5
Le pagine sono costruite per la massima leggibilità e per fornire una versione relativamente uniforme anche nei formati EPUB e PDF:
EPUB (647 KB),
PDF (1.1 MB)
HTML
Piccolo laboratorio
Andreas R. Formiconi
16 luglio 2015
Introduzione
È da qui che dobbiamo partire per introdurre il lavoro del secondo modulo sul linguaggio HTML.
Gli uomini comunicano mediante linguaggi universali fondati su sistemi di simboli, grammatiche, notazioni musicali, formalismi matematici. Per utilizzare questi linguaggi occorre padroneggiare le rispettive simbologie, che non sono piovute dallo spazio ma sono un'emanazione della mente umana, o meglio dalla collettività delle menti umane, al di là di ogni limite spaziale e temporale. Le espressioni umane sono rese possibili dall'esistenza di specifici dispositivi mentali innati. Ad esempio Noam Chomsky, a proposito di lingue naturali, parla di una grammatica universale, espressione di un dispositivo linguistico che sarebbe presente nella mente di tutti, fin da bambini. Poi, l'esposizione ad un determinato contesto linguistico e culturale fa sì che il bambino moduli la sua grammatica universale in quella di una lingua specifica. In questo modo l'apprendimento della lingua madre non è una cosa che i bambini fanno ma una cosa che succede loro, se il contesto ambientale è favorevole in una certa finestra temporale. I sistemi di simboli si sono evoluti nel corso di un lungo processo evolutivo, attagliandosi a tale meccanismo; sono in altre parole figli dei dispositivi presenti nella nostra mente, a loro volta evolutisi dai tempi di Lucy ad oggi - un paio di milioni di anni. Questo vale probabilmente anche per i sistemi matematici e musicali. In generale, il pensiero ha una base innata ma è comunicabile grazie all'esistenza di precisi modelli formali, tutti basati su precisi sistemi di simboli.
La comunicazione point-and-click è una novità di un minuto fa, per così dire. Il sottoscritto era già un esperto programmatore quando vide un mouse per la prima volta, negli anni '80. Trent'anni, niente rispetto ad un'evoluzione che si misura in centinaia di migliaia di anni - trecentomila diviso trenta fa diecimila: l'era del point-and-click è un decimillesimo della storia della cultura umana, ad essere ottimisti. Ritenere che ora si possa volare ovunque grazie al point-and-click è - mi si perdoni la brutalità - un pensiero imbecille. Non si nega l'utilità del meccanismo point-and-click nell'uso delle risorse del Web, e nemmeno la straordinaria ricchezza delle risorse di quest'ultimo - vedi il commento sulle OER fatte in un post recente. Qualsiasi uomo curioso non può che entusiasmarsi di tutto questo e ogni rifiuto aprioristico di tale ricchezza costituirebbe una negazione dell'intelligenza ma questo non significa che si debba rinunciare all'apprendimento dei sistemi di simboli fondamentali che sorreggono il pensiero.
Venendo al contesto formativo - che ci interessa qui - di questi tempi proliferano le discussioni intorno all'impiego delle tecnologie nella scuola, in un panorama caotico dove qua i genitori finanziano la carta igienica, nel paese accanto ci si arrovella su come spendere un finanziamento di svariate migliaia di euro per fare la "classe 2.0", l'altro giorno una persona che si occupa di LIM racconta che abbiamo reso 780 milioni di Euro di finanziamenti europei PON perché non abbiamo saputo spenderli [
1]. In uno scenario simile prevalgono facilmente gli acquisti indiscriminati sotto la pressione pubblicitaria. Il risultato è che, di fatto, quasi tutto passa dal
touchscreen, che comprende smartphone, tablet, LIM compresa la quale, in sintesi, non consiste altro che nell'interfacciamento di un computer con un grande touchscreen.
Intendiamoci, la tecnologia touchscreen non ha niente di diabolico di per sé. Tutti i dispositivi sono computer oggi, dall'orologio al supercomputer parallelo, smartphone e tablet compresi, quindi hanno tutti un'architettura di base simile e tutti funzionano con la stessa logica. La differenza sta nel come sono stati messi sul mercato. Approfondiremo in altre occasioni ma la sostanza è che questi prodotti vengono offerti con la logica di fidelizzare il cliente, al punto di renderlo prigioniero del prodotto, una logica che è stato possibile realizzare con grande successo, mediante il lancio del nuovo hardware (touchscreen) e della nuova forma di distribuzione di software fatta di app, l'apoteosi del point-and-click che però ha estromesso qualsiasi linguaggio formale universalmente condiviso. Si parla di "nuove grammatiche" ma non confondiamoci: si tratta di banali regolette stabilite dal produttore della singola app che stabilisce cosa puoi cliccare e cosa puoi fare con ogni clic - magari in una app con un documento PDF puoi fare due cose mentre in un'altra no, o ne puoi fare di diverse, ma non sei tu che decidi. In altre parole, ci troviamo nella Torre di Babele; soprattutto, lasciamo che i giovani ci crescano. L'immagine è un po' quella del genitore che con l'idea peregrina di essere amico dei propri figli fa un gran pasticcio, ammiccando superficialmente al nuovo.
Ma perché proprio il linguaggio HTML? L'obiettivo che ci poniamo è più culturale che tecnico. Nessuno di noi ambisce a fare il progettista di siti, come qualcuno potrebbe immaginare, considerato che HTML è il codice di base con il quale si compongono le pagine web. No, approfondiamo qualche elemento di HTML per i seguenti motivi:
-
L'HTML è una delle prime cose che si trovano quando si cerca di sbucciare questo corpo tecnologico, quel tanto che basta per scorgere, subito sotto, i linguaggi e gli strumenti che ne costituiscono l’essenza (Ibidem).
L'HTML è uno dei linguaggi universali del Web, il primo. Tutto ciò che vedete poggia (anche) su di esso.
-
Può obiettivamente servire. Basta voler scrivere qualcosa in un blog, wiki o servizio similare, per rendersi conto che sapere manipolare un minimo il codice HTML dà maggiore libertà nel controllare la forma di quello che si scrive, rispetto ai comandi iconografici usualmente messi a disposizione. La forma nella scrittura digitale è tanto importante quanto lo è la calligrafia nella scrittura manuale - ebbene sì!
-
È un esempio interessante e importante di come oggi testo e metatesto si integrino: i comandi sono frammisti al testo medesimo su cui devono agire: scrivendo <b>Pippo</b> impartisco al navigatore che rappresenterà sul vostro schermo questo testo l'ordine di scrivere la parola "Pippo" in grassetto, così: Pippo. In questo caso per metatesto intendiamo comandi che impongono una qualche manipolzaione della forma grafica del testo e che non appariranno sul medesimo. Si tratta di un codice e questa particolare forma di codice ricade nella categoria dei linguaggi marcati, markup language, con i quali il testo viene marcato conn i comandi che devono agire su di esso. HTML: HiperText Markup Language.
-
Un laboratorio non potrà mai essere realizzato veramente in un contesto online ma se è a questo che siamo confinati, allora ne possiamo fare un surrogato forse decente mettendo su delle semplici esercitazioni in HTML, considerato che i risultati possono essere mostrati a tutti e quindi facilmente condivisi - non così facilmente in realtà ma anche questo è istruttivo.
-
Alla fine avremo comunque "smanettato un po'" e questo dovrebbe far bene alla confidenza con la Macchina, che è un discreto obiettivo per un laboratorio.
Gli strumenti
Gli strumenti per lavorare con i documenti HTML sono due: uno per la composizione e uno per la visualizzazione. I documenti HTML si visualizzano con il navigatore (browser) delle pagine Web: Firefox (tutti i sistemi), Chrome (tutti i sistemi), Chromium (Linux), Internet Explorer (Windows), Safari (Mac), Opera (Linux) sono i più comuni. Per comporre i documenti HTML ci vuole un editore di testo, che è una cosa diversa da un word processor, tipo Write di LibreOffice o OpenOffice, Word di MS Office.
Esercizio!
Tocchiamo la cosa con mano - scrivo le istruzioni per Windows, che è il sistema più diffuso. Crea da qualche parte nel tuo sistema una cartella per fare gli esercizi, vai in Avvio (pulsante in basso a sinistra con la "bandiera" di Windows), scrivi Blocco note (Notepad) e premi Invio (chi ha il Mac deve aprire il programma Textedit e porlo nel modo Testo, non RTF, c'è un'apposita voce di menu). Parte così l'editore di testo standard di Windows. Con il Blocco note così aperto scrivi il testo “pippo” - giusto questi 5 caratteri, senza l'Invio, salva il file dandogli il nome pippo.txt nella cartella che avevi creato. Apri quindi il tuo Word processor preferito - non importa quale - poi scrivi lo stesso testo “pippo”, senza premere Invio, e salva nella medesima cartella il file con il nome pippo.docx o pippo.odt o quello che vuoi, a seconda del word processor che hai usato. A questo punto abbiamo scritto la stessa identica cosa in due modi diversi, giusto? Guardando nella cartella che contiene tali file, confronta la dimensione dei file, cliccando con il tasto destro del mouse sul nome, poi scegliendo la voce Proprietà in fondo al menu volante che si sarà aperto. Io l’ho fatto in questo momento ed ho ottenuto 5 byte per il file pippo.txt e 11417 byte per pippo.docx!
Anche per chi non ha chiari i concetti di codifica dei caratteri (chi vuole può provare a chiarirsi le idee leggendo
questo articolo) la relazione fra la lunghezza del file
pippo.txt e il numero di caratteri che compongono il testo
pippo è evidente: sono ambedue 5. È sempre confortante quando le cose tornano. Potete verificare aggiungendo qualche carattere e vedere che succede. Perché invece la lunghezza del file
pippo.docx è enormemente maggiore? La bellezza di 11417 bye per avere scritto esattamente lo stesso testo di 5 lettere!
Ebbene, è proprio qui la differenza: un editore di testo lavora solo sui caratteri del testo e solo quelli scrive sul file, il word processor invece ti consente di lavorare sui medesimi caratteri ma si aspetta che tu definisca anche come debba apparire il testo, ecco perché tutti quei comandi sulla formattazione di caratteri, paragrafi, pagine ecc. Tutte informazioni che da qualche parte devono pur stare e che, nell'esempio che abbiamo appena fatto, stanno in quei 11417 - 5 = 11412 byte. Non importa che non si sia specificato nulla scrivendo pippo con Word, lui scrive comunque nel file tutte le informazioni, anche se queste sono tutte di default, ovvero quelle ovvie, che non si sta a specificare. Come dire che i word processor nei file scrivono testo e metatesto mentre gli editori di testo scrivono solo il testo. I Word processor ti fanno vedere il testo come dovrebbe apparire nella versione finale - WYSIWYG: What You See Is What You Get, quello che vedi è quello che ottieni - mentre lo componi. Lavorando invece con gli editori di testo, per esempio con file HTML (ma esistono anche altre codifiche simili), siamo noi che scriviamo il metatesto sotto forma di comandi HTML frammisti al testo vero e proprio. Poi per vedere il risultato dobbiamo vedere il file con un navigatore.
Esistono anche software di tipo
WYSIWYG per lavorare in HTML ma si tratta di software complessi utilizzati da chi produce siti Web. Non è il nostro caso, perché noi siamo invece interessati a sporcarci un po' le mani, per i motivi elencati nell'
Introduzione. Va anche detto che ci sono anche professionisti che preferiscono lavorare con gli editori di testo, per avere il controllo completo del codice prodotto. Sì, perché questo è un po' il problema dei software
WYSIWYG: tanto più si accetta la comodità quanto più si deve anche accettare che il software prenda delle decisioni al nostro posto, e non è sempre detto che queste siano quelle che noi preferiamo. Anche Word e i suoi simili, fra le mille cose che possono fare, possono anche leggere file HTML e scriverli ma lo fanno creando un codice HTML molto arzigogolato e per nulla ottimale -
questo articolo (in inglese) analizza un po' il problema.
Esercizio!
Anche qui possiamo sperimentare di persona con un esercizio. Apri nel tuo navigatore
questa semplice pagina. La struttura si commenta da sola: l'ho scritto nel più semplice ancorché sintatticamente corretto dei modi. È il momento di imparare un'altra cosa: Quando guardi una pagina Web tu ne puoi vedere anche il codice! In tutti i navigatori e in tutti sistemi si può visualizzare con una semplice combinazione di tasti:
Ctrl-u con Windows e Linux e
Mela-u con il Mac. Se confronti il testo con il suo codice inizi a farti un'idea di come funzioni la codifica HTML. Naturalmente, le pagine "vere" hanno un codice molto più complicato, puoi provare con questo stesso documento, che mi sto comunque sforzando di scrivere in maniera semplice pur ottenendo una qualità del testo che mi pare buona. Bene, puoi salvare nella solita cartella di lavoro il codice HTML che hai appena visualizzato con la combinazione
Ctrl-u, e dopo avere fatto un clic sulla finestra per essere sicuro che sia quella attiva, utilizzando quest'altra combinazione di tasti:
Ctrl-s (
Mela-s per il Mac). Appare così la classica finestra di dialogo che ti consente di scrivere il file dove vuoi e con il nome che vuoi. Una volta fatto questo, vai nel tuo word processor (Word o altro) e apri tale file. Fin qui nulla di diverso dal solito, dovresti vedere il documento come lo hai visto nel navigatore. Le cose si complicano quando provi a salvare il file dandogli un altro nome (comando
Salva con nome): il nuovo file è molto più grande, se lo apri con l'editore di testo ci trovi una marea di codice che prima non c'era e non solo, è apparsa anche una cartella che contiene altri file! È il modo di gestire i documenti HTML di Word - da dimenticare se ti interessa il controllo su ciò che fai.
Blocco note per Windows e Textedit per Mac non sono gli unici editori di testo. Ve ne sono tanti e anche molto sofisticati, pensati proprio per chi scrive software. Vedere in
questa pagina per avere un'idea di quanti ce ne sono! Se dovessi dare un'indicazione:
Notepad++ per Windows e
TextWragler per Mac mi sono sembrati ottimi, avendo avuto occasione di usarli entrambi. Ma non vi sono pareri assoluti in queste cose, le opinioni si sprecano. La cosa migliore è provarne alcuni e rimanere con quello che ci sembra meglio. Una caratteristica che quasi tutti questi editor più sofisticati hanno è la
colorazione sintattica (
evidenziazione sintattica,
syntax highlighting), vale a dire l’uso dei colori per differenziare gli elementi di un certo tipo di codice. Una cosa semplice ma di grande utilità quando si deve rovistare in codici lunghi e complessi, ma non solo.
Esercizio!
A questo punto potrebbe essere venuto il momento di esercitarsi un po', provando qualche variante intorno all'esempio semplice visto, soprattutto con lo scopo di sperimentare l'uso degli strumenti. Proponiamo due metodi e vi invitiamo a sperimentare entrambi, nella successione sotto indicata.
-
Nel laboratorio a casa
È semplice. Scrivi la tua pagina HTML con Blocco note o un altro editore di testo che ti sei divertito a scaricare e salvala con un nome che abbia estensione html, ad esempio, se vuoi chiamare il file pippo, quando lo salvi specifica il nome pippo.html. Così ci si assicura che il sistema operativo tratti correttamente il file in rapporto al suo contenuto. Poi apri il navigatore (Firefox, Chrome o quello che vuoi) e nel suo menu seleziona File->Apri... sì perché nel navigatore si possono tranquillamente caricare anche file HTML che si trovano sul proprio computer e non solo in Internet! Nella finestra di selezione del file vai a cercare quello che hai appena salvato e caricalo. Se ti sembra di dover cambiare qualcosa, torna nell'editore di testo, fai i cambiamenti, risalva il file e poi ricaricalo nel navigatore: in quest'ultimo si può dire di ricaricare una pagina anche con la combinazione di comandi Ctrl-r in Windwos e Mela-r nel Mac. È molto probabile che tu debba seguire questa sequenza reiterate volte prima che tu ti ritenga soddisfatto. Se vuoi velocizzare il workflow puoi divertirti a fare come fanno i professionisti, che toccano il meno possibile il mouse; ad esempio la sequenza Sono nell'editore e salvo il file -> Vado nel browser -> Ricarico il file nel Browser -> Torno nell'editore si può realizzare tutta sulla tastiera: Ctrl-s -> Alt-Tab -> Ctrl-r -> Alt-Tab e così via. Questo perché Alt-Tab consente di saltare ciclicamente da un'applicazione all'altra, fra quelle aperte. La prima che offre con il primo Alt-Tab che fai ti riporta all'ultima che avevi visitato, quindi se ripeti più volte il comando, salti avanti e indietro fra le ultime due applicazioni aperte. Se invece ne hai molte e vuoi scorrere alle altre devi tenere premuto il tasto Alt e battere successive volte il tasto Tab.
Quando sarai soddisfatto del risultato finale, mandami - per ora via email - il tuo file ed io lo caricherò nel mio server in maniera che lo si possa mostrare a tutti.
-
Nel blog della IUL
Probabilmente hai già aperto il tuo blog nell'ambiente IUL. Se non l'hai ancora fatto aprilo ora. In ogni caso inviami l'indirizzo URL del blog (per esempio il mio è http://www.iuline.it/ambiente/blog/iamarf/, il tuo sarà qualcosa del tipo http://www.iuline.it/ambiente/blog/qualcosadituo/. Se per caso hai già un altro blog e vuoi usare quello va bene lo stesso. Poi vi insegnerò un modo per tenere traccia di tutti questi blog. Ora però continuiamo l'esercizio. Apri l'editore di testo sulla pagina HTML che hai scritto nella prima parte. Evidenzia tutto e copiala nella clipboard - ti sto dicendo di fare il famoso copia/incolla - Con la combinazione Ctrl-c oppure con la voce di menu Modifica->Copia. Poi loggati nell'ambiente IUL, vai al tuo blog: http://www.iuline.it/ambiente/blog/qualcosadituo/. Inizia la scrittura di un nuovo post. Nella finestra di editing che si apre, selezionate l'icona <> che si trova sinistra. Si apre così una finestra intitolata Source code, ecco, lì dentro copia il tuo codice, con la combinazione Ctrl-v oppure con la voce di menu Modifica->Incolla. Salva e guarda il risultato. Ci potrebbero essere delle differenze rispetto al primo esercizio. Può essere normale. Non ci impazzire, le discuteremo insieme.
Il link
I link sono le sinapsi di Internet. Tutte le discussioni centrate sull'essenza negativa o meno di Internet sono mal poste e, sostanzialmente prive di senso. Sarebbe come stigmatizzare l'organo cerebrale perché anche i criminali hanno un cervello. Internet funziona, nel bene e nel male, se le sue sinapsi possono proliferare. La questione è attuale perché è giusto in atto una campagna intitolata
Salva il Link - Censurando i link si distrugge l'Internet. La campagna è volta a sensibilizzare l'opinione pubblica riguardo ad una votazione sulla libertà di link che deve avere luogo il 16 giugno presso il Parlamento Europeo. Pare che questa proposta sia il frutto di un lavoro di lobbying da parte delle industrie di media convenzionali per reprimere la libertà di link in Internet. Non ho trovato tracce di questo problema nei media nazionali e nemmeno una versione italiana del sito della campagna, posso quindi mettere solo un link alla
versione inglese.
Il link è anche il cuore del linguaggio HTML, il quale è nato per descrivere gli ipertesti: i testi diventano ipertesti quando contengono dei link. I link sono i punti del testo dai quali si può schizzare in qualsiasi parte del mondo, fisico e immaginario. Il link deve quindi contenere l'informazione relativa alla destinazione: l'indirizzo Internet.
La struttura di un indirizzo Internet
L’abbondanza produce superficialità. Oggi tutti corriamo il rischio di agire superficialmente, una volta o l’altra. Esposizione mediatica, iperattività e tempi brevi obbligano a sviluppare filtri per venire a capo della quantità, anzi, per sopravvivere. L’avvento del cyberspazio non ha certo migliorato le cose, da questo punto di vista. È sorprendente il livello di disattenzione con cui le persone guardano lo schermo. Non è un problema che affligge solo i nativi digitali. Persone di altre generazioni, abituate a leggere tranquillamente per ore il loro libro, sono estrememente disattente davanti a un computer. La quantità schiaccia. I nativi digitali non si scompongono più di tanto se sbagliano un clic o un comando, ne provano un altro perché confidano nel fatto che non possa succedere un granché – vero, ma non sempre… Chi invece è cresciuto nel mondo precedente ha una percezione molto più fisica delle cose – un colpo di lima sbagliato rovina il pezzo, tocca ricominciare da capo – esita di più e più facilmente demorde. Ma la superficialità delle percezioni di fronte alla quantità di stimoli vomitate dagli schermi non è poi così diversa, e forse è un problema più importante della diversità dei nativi digitali.
Facciamo quindi un passo indietro, non diamo per scontato l’uso del browser, il significato di un indirizzo, la funzione di una casella di scrittura, forse non ci sono poi così familiari come sembra. Osserviamo ciò che vediamo sullo schermo come se dovessimo smontarlo, e rigiriamoci un poco fra le mani qualche pezzo.
Focalizziamo l’attenzione sul browser (navigatore), il software che serve a vedere le pagine web. Ce ne sono tantissimi, i più noti sono Firefox, Internet Explorer, Chrome, Safari, giusto per ricordare alcuni nomi più noti. Tutti offrono nella parte superiore della finestra una o due piccole caselle per scrivere, più larghe che lunghe.
In molte occasioni – sia in questo tipo di corsi che in tante altre circostanze – ho constatato come il significato di queste due caselle venga confuso, malgrado il fatto che esse svolgano due servizi molto diversi. Ovviamente, i browser che offrono una sola casella per i due servizi alimentano ulteriormente la confusione: la comodità deprime l’intelligenza. Intanto vediamo qualche esempio – non posso mostrare casi con Mac OSX perché non dispongo di una macchina con questo sistema del genere dove sto scrivendo; li aggiungerò successivamente, se necessario.
Quando ci sono due caselle, la prima in alto a sinistra (di norma) serve a scrivere l’indirizzo del sito che si vuole vedere, mentre quella più a destra non è altro che la casella di un motore di ricerca, spesso Google, ma non necessariamente. Nelle immagini che ho riportato, nella casella di ricerca, quando è presente, ho scritto la parola URL, che ancora non sappiamo…
La confusione fra questi due oggetti è perniciosa perché il modo con cui si scrivono i due tipi di informazione è completamente diverso: nel primo caso dobbiamo scrivere qualcosa che non ammette errori, un codice di fatto, nel secondo caso invece possiamo anche scrivere una parola in modo impreciso, contando o addirittura sperando che ci pensi il motore di ricerca a completare ciò che manca. Cogliamo l’occasione per capire la struttura di un indirizzo Internet.
Questa scrittura ci dice
come trovare l’oggetto,
dove trovarlo e di
quale oggetto precisamente si tratta:
- http:// -> come accedere alll’oggetto, nel gergo di internet si dice con quale protocollo, ovvero con l’Hyper-Text Transfer Protocol
- lai.dfc.unifi.it -> dove trovarlo: in un server (computer) che in internet è identificato univocamente con questo nome
- /lab/index.html -> qual è l’oggetto da reperire nel server summenzionato.
Questa semplice scritturina esprime una potenza smisurata: con poche
decine di caratteri andiamo ad individuare uno di chissà quante
centinaia di migliaia di file contenuti in un preciso computer fra le
diverse centinaia di milioni – forse ora oltre il miliardo – che sono
collegati a internet 24 ore su 24 – i cosiddetti server. La
potenza del codice! Eh sì, perché anche un semplice indirizzo internet è
un frammento di codice, e anche se quasi nessuno di noi vuole scrivere
software da grande, perché non dovremmo cogliere l’occasione di
approfondire qualche idea utile su di un frammento che abbiamo sotto il
naso più volte al giorno? Un frammento di macchina, che trattiamo con
trascuratezza come facciamo con tante altre cose, sazi come ne siamo. Un
frammento strapazzato, pesticciato, incompreso.
Invece, ora che lo abbiamo preso in mano e che, avendolo un po’
pulito, ci siamo resi conto che luccica addirittura un po’, smontiamolo
in qualche altro pezzo, per vedere meglio come è fatto.
1. http://
Iniziamo dal pezzo verde –
http://
– il protocollo. Questo è talmente trascurato che neanche si scrive
più. Se lo dimentichiamo ce lo mette il browser da sé. Il fatto è che un
browser serve a vedere pagine web, che poi sono scritte in dei file nei
web server a giro per il mondo. Il protocollo internet per recuperare
questo tipo di informazione si chiama appunto Hyper-Text Transfer
Protocol [
2] e quasi sempre è di
http://
che abbiamo bisogno. Del resto tutto va nella direzione di massimizzare
la facilità nel fare le cose e le tecnologie vengono incontro alle
esigenze dell’utente – il che non sarebbe poi male, il fatto è che più
che altro vanno incontro alle esigenze del compratore, del consumer, che
dovrebbe essere solo una parte dell’utente.
E così finisce che dimentichiamo il protocollo – http:// – ovvero il come la macchina fa ciò che chiediamo. E questo è male. Vediamo un esempio che ci può concernere in pratica.
È vero che possiamo scrivere a diritto gli indirizzi web senza
specificare il protocollo, tanto il browser capisce da sè. Tuttavia
questo vi mostrerà se ha dovuto alterare l’indirizzo che gli avete
scritto: qualcuno avrà fatto caso che talvolta viene aggiunta la lettera
“s”: https://.
Che sarà mai! Una sola lettera, avrà i suoi motivi… Eh no! Quella
lettera rappresenta un mondo, un mondo che ci riguarda molto da vicino e
in maniera molto importante e concreta.
Qui ci interessa capire la sostanza – inutile riempirsi subito la
testa di acronimi ostili per i più, avremo tempo per affinare – quindi
per ora diciamo che quella “s” sta molto semplicemente per secure: connessione HTTP sicura, perché sicura?
Sfrucugneremo un bel po’ questo fatto. Intanto stabiliamo un punto fermo:
Normalmente, tutto ciò che facciamo in internet è totalmente
esposto al pubblico, nel senso che una quantità di persone, operatori di
vario tipo affaccendati alle infrastrutture di internet, eventualmente
anche autorità istituzionali, possono vedere tutto ciò che scriviamo e
possono seguire le nostre tracce.
In generale non c’è niente di male in questo: anche quando
passeggiamo per strada siamo esposti al pubblico: tanti sconosciuti
vedono dove andiamo, in quali negozi entriamo, in quali edifici ci
rechiamo a lavorare eccetera. La cosa funziona perché quando siamo al
pubblico ci comportiamo conseguentemente, per esempio non urlando i
fatti propri ai quattro venti.
Quando invece siamo di fronte a uno schermo, protetti dalle pareti
della propria casa, si tende a godere di un senso di intimità, reale dal
punto di vista fisico ma non da quello virtuale! Ecco perché è comparsa
la “s” in HTTP: quando dobbiamo interagire con siti con i quali
possiamo scambiare informazioni private – generalità personali,
informazioni private – questi, se sono seri, comunicano con il nostro
browser mediante un protocollo di comunicazione HTTP arricchito da
sistemi di crittografia dei dati e di certificazione delle identità dei
siti ai quali vi affidate. Approfondiremo i modi con cui avviene tutto
questo, nei limiti di quanto ci può servire. Per ora ci basti sapere che
il protocollo http:// ha perlomeno una rilevante alternativa, la sua versione sicura https://, e che quando accediamo a qualsiasi sito “importante” – tipo il proprio home banking – quella “s” ci deve essere!
C’è un altro protocollo che ci può riguardare,
anche se meno importante. Per conoscerlo possiamo fare un piccolo
esercizio. Ma se avete fretta, siete particolarmente impazienti o siete
veramente terrorizzati da questo genere di cose, allora è meglio che
saltiate al punto
2. successivo.
Andate alla pagina
http://iamarf.ch/lab/index.html
– vi risparmio la fatica di digitare: seguite pure il link (si apre in
un’altra pagina). Salvate ora la pagina che si è aperta – se usate
Firefox: nel menu in alto
File->Salva pagina con nome… – se usate Internet Explorer: cliccate sulla ruotina dentata in alto a destra e poi
File->Salva pagina con nome… [
3].
Si aprirà la solita finestra di dialogo che viene offerta quando si
deve salvare un file sul proprio computer. Scegliete un luogo per voi
usuale e comodo: il Desktop, la cartella Documenti o quello che volete;
scegliete anche il nome del file, oppure lasciate quello che viene
proposto, che è index.htm (o index.html – a seconda del sistema che
avete, Windows di solito propone htm).
Dopo, andate in tale luogo e cercate il file che avete salvato.
Cliccate sopra la sua icona con il tasto sinistro e scegliete l’ultima
voce che appare nel menu volante: Proprietà. Fra tutte le proprietà appare anche la posizione che dovrebbe essere qualcosa del tipo C:\qualcosa… – nel mio sistema ad esempio è C:\Users\arf\Desktop. Questo è il percorso (path)
del file sul vostro disco – o meglio sul vostro file system – ovvero,
dove si trova esattamente il vostro file. Copiate tale percorso su un
pezzo di carta, oppure se siete pratici e vi piace fare così,
anche con il copia-incolla mediante il mouse.
Tornate nel browser e scrivete in questo modo, usando come esempio il mio percorso (voi sostituite il vostro!):
file:///C:/Users/arf/Desktop/index.htm
Se avete fatto bene si apre la pagina. Cosa è successo? È successo che dicendo al browser di usare (il come) il protocollo file://, anziché html://,
lui invece di andare a cercare il file index.html in internet è andato a
cercarlo sul disco del vostro computer. Il protocollo, cioè il come, è completamente diverso, ovvero il browser deve fare cose diverse per reperire un file sul disco locale anziché in internet.
Va bene, la stessa cosa l’avreste potuta fare cliccando due volte
sull’icona del file index.htm, senza farsi venire il mal di testa con i
codici, ma avevamo detto di fare un passo indietro, no?
2.iamarfch.myhostpoint.ch
Questa è la sezione dell’indirizzo che serve a specificare in che parte
di mondo si trova il server che contiene il file (pagina web)
desiderato. In internet lo
spazio dei nomi (
namespace) è organizzato secondo uno schema gerarchico nel quale i diversi livelli gercarchici sono distinti da punti: “
.“. Ad esempio la scrittura
iamarfch.myhostpoint.ch significa che il server (detto anche
host) (o la parte di server) a me accessibile si chiama
iamarfch, il quale si trova nel dominio
myhostpoint (un dominio del servizio
http://www.hostpoint.ch" che utilizzo), che a sua volta si trova nel dominio
ch (Svizzera) [
4].
Approfondiremo alcuni aspetti relativi alla questione
dell’indirizzamento dei server in internet – anche in funzione di vostre
eventuali esigenze o curiosità. Per ora ci basta dare un significato ai
vari pezzi.
3./lab/index.html
E questo è il percorso del file nel server. Come si vede è del tutto
analogo al percorso di un file nel vostro computer, la logica è in
effetti la stessa. Se avete letto l’
esercizio del protocollo file://, riconoscerete facilmente che
/lab è il percorso vero e proprio e
index.html è il file.
Qualcuno ora si domanderà: – Ma come, possibile che non ci sia un acronimo per questi indirizzi internet? – c’è c’è: Uniform Resource Locator (URL).
È molto probabile che anche coloro che non hanno un’idea chiara di cosa
significhi, si siano già imbattuti in questo acronimo da qualche parte.
Ora sanno cos’è. Delle volte si trova anche un acronimo simile: Uniform Resource Identifier (URI).
L’URI è una codifica più generale che può essere applicata a qualsiasi
risorsa. L’URL è un particolare tipo di URI che punta ad una risorsa che
si trova in internet e specifica anche il modo di accesso – che nella
discussione precedente abbiamo chiamato protocollo.
Come si costruisce un link
Per iniziare, nel video che segue mostro come si fa a scrivere “a mano” un link. È un video di alcuni anni fa ed è riferito alla scrittura in HTML nei post in Wordpress.com o Blogger.com ma è valido anche nel nostro attuale contesto. Quest'anno agli studenti IUL abbiamo proposto l'impiego del
servizio novello di blogging della IUL e i problemi sono analoghi. Tutti i servizi di blogging offrono un editore per scrivere i testi online e quasi tutti si possono adoperare in due modi, uno visuale e l'altro testuale. La prima modalità è un po’ quella che tutti conosciamo e è quella dei programmoni di scrittura come Write di LibreOffice e Word di MS Office (e tanti altri), dove oltre al testo si sistema anche l’apparenza grafica, cioè come il tutto risulterà quando verrà stampato, la modalità WYSIWYG: What You See Is What You Get: ciò che vedi è ciò che otterrai. La modalità testuale è invece fatta di soli caratteri, senza nient'altro che determini alcun imbellettamento grafico: qualcosa che ricorda il vecchio dattiloscritto. Ebbene, il codice si scrive in questa seconda modalità. Capiremo in seguito meglio perché e lavoreremo in questo modo anche con altri strumenti, oltre che con il blog. Se stai leggendo questo testo su carta puoi trascrivere il seguente indirizzo per andare a vedere il video successivamente:
http://is.gd/video_link.
Ricapitolando, ecco il frammento di testo contenente il link che abbiamo costruito nel video:
che produce il testo seguente:
Questa commistione di testo e di codici prende il nome di testo marcato. Il linguaggio HTML (HyperText Markup Language) serve a scrivere testi marcati in modo da poter includere hyperlink, o brevemente link. In realtà si possono ottenere tanti altri effetti ma questo per ora ci basta.
Esercizio!
A questo punto scrivi un testo in HTML che contenga dei link, se vuoi anche rimaneggiando quello che hai già inviato. Cerca di farlo scrivendolo a memoria. Anche se poi la pratica del copia-incolla è più che onorevole nel scrivere codice, anzi raccomandabile, quando si impara è bene sforzarsi un po' di ricordare il codice corretto, al fine di comprendere bene il ruolo dei vari elementi.
Attenzione. Anche in un caso così semplice, come la scrittura di un link, è molto facile commettere errori, proprio quegli errori che si rimpoverano spesso ai ragazzi, quando il risultato di un’espressione non torna o quando viene persa qualche h del verbo avere – sì, i famigerati “errori di distrazione”. Ecco, è come nelle espressioni matematiche: un minimo errore fa saltare tutto. Nel codice, ogni carattere è importante perché la macchina è stupida. Ad esempio se la codifica HTML prevede che un frammento di testo debba essere compreso fra due virgolette ma tu ne dimentichi una, la macchina ti risponde per le rime, con un risultato assurdo. Non si rompe nulla, semplicemente il risultato non sarà quello ci si immagina.
Link interni alla pagina
Bene, per prima cosa inseriamo una
nota giusto per provare. Andate a vedere (con
Ctrl-u) il codice di questo link. È lo stesso di quello che conoscete per il link alle pagine web, in effetti è il link a questa medesima pagina, anzi a un punto preciso di questa pagina. Guardate l’espressione fra doppie virgolette: “#prima_nota”. Bene, se andate alla fine della pagina, trovate il codice dell’ancora, ovvero dell’oggetto al quale il link si aggancia: da qui il senso del tag
a,
anchor,
ancora. Confrontiamo quindi il codice del link
<a href=”#prima_nota”>nota giusto per provare</a>
con quello dell’ancora a cui punta
<a id=”prima_nota”></a>
Vedete che la funzionalità di link espressa dal tag a si realizza mediante due diversi attributi: href per designare la partenza del link, e id per designarne l’arrivo. Con l’attributo id si specifica il nome dell’ancora: “prima_nota” nel nostro esempio. Con l’attributo href il nome dell’ancora da raggiungere viene preceduto dal carattere #.
Il meccanismo non serve solo a raggiungere un punto preciso di questa pagina ma può essere usato anche per raggiungere un preciso punto di qualsiasi altra pagina. Ad esempio recentemente degli studenti di medicina mi hanno chiesto qualcosa sui software per fare i video tutorial. Qualche tempo fa avevo scritto qualcosa in proposito ma in un post molto lungo e articolato. Per non costringerli a cercare l'informazione dispersa nel post sono andato a piazzare un'ancora nel posto giusto, dando loro invece del link
http://iamarf.org/2015/01/21/video-discorsi-int-attivita-5-edmu14/
il link seguente
http://iamarf.org/2015/01/21/video-discorsi-int-attivita-5-edmu14/#lista
Questo link punta all'ancora che ho piazzato nel punto giusto ed ho codificato in questo modo:
<a id="lista"></a>
Volete vedere questa cosa nel mondo reale? Andate in
http://iamarf.org. Guardate il titolo di un post qualsiasi, ad esempio quello della bacheca, in vetta al blog: sapete che il numerino a destra (8 attualmente) rappresenta il numero di commenti e sapete che ci potete cliccare. Ebbene cliccatelo: vi trovate all’inizio della serie di commenti. Guardate l’URL nella casella degli indirizzi del browser: quello che vedete è l’URL che WordPress.com costruisce per puntare i commenti. Vediamo così che WordPress.com ottiene l’indirizzo dell’inizio dei commenti aggiungendo
#comments in fondo all’URL della pagina.
Esercizio!
Scrivi un documento HTML semplice ma abbastanza lungo da rendere sensato l'uso di una nota. Non occorre scervellarsi, puoi benissimo copiare una poesia o un racconto - qualcuno di voi lo ha già fatto. Metti un link da qualche parte all'inizio del testo, in maniera che punti alla nota che avrai scritto in fondo al medesimo. Poi, come al solito, inviami il documento per email e prova anche a inglobare lo stessso codice in un post sul tuo blog. Se qualcosa non funziona non ti impuntare, può essere che debba essere così... Descrivi semplicemente il problema, meglio nel forum che per email, così tutti possono contribuire.
Nota giusto per provare, dove sei arrivato cliccando all'inizio di questa sezione sui link interni. Puoi tornare indietro al punto di prima con la freccia di ritorno del navigatore. Si potrebbe anche mettere un link per tornare indietro, esattamente allo stesso modo, volendo...
Vari elementi HTML
Esercizio!
Introduciamo alcuni degli elementi principali di HTML, solo la punta dell'iceberg ma già molto per scrivere un testo abbastanza articolato. Allo stesso tempo illustriamo alcuni comportamenti virtuosi per fare le cose nel Web. Il primo consiste nel fare largo uso delle
OER (Open Educational Resources - risorse didattiche aperte), che in qualsiasi campo sono ormai sterminate, figuriamoci per l'HTML! Limitiamoci qui alla
W3Schools, un servizio Web dove è facile rendersi conto della funzionalità degli elementi di HTML come dei vari altri linguaggi che servono nel Web, CSS, Javascript ecc. Si usa un po' come un vocabolario che ha la piacevole caratteristica di offrire per ogni elemento la possibilità di sperimentarlo subito su degli esempi semplici, cliccando sui link "Try it yourself" - provalo da te. Un esempio interessante di come le OER non siano solo contenuto ma spesso consistano in servizi che consentono di operare su ciò che si sta imparando. È interessante che anche la gente di W3Scools la pensi come noi sull'impiego degli editori semplici di testo:
We believe using a simple text editor is a good way to learn HTML - pensiamo che usare un semplice editore di testo sia un buon modo per imparare l'HTML.
In questa pagina propongono esattamente la stessa cosa che abbiamo suggerito noi per realizzare il semplice laboratorio casalingo. Da segnalare anche lo
strumento per esercitarsi in HTML recentemente messo a disposizione dal team di sviluppo della IUL. Prova a giocare un po' con queste risorse, per esempio partendo dalla
pagina introduttiva di W3Schools e quella sui
principali elementi di HTML, o qualsiasi altra che tu voglia.
Se stai leggendo questa pagina nella versione HTML allora puoi vedere il video seguente, dove si mostra come negli editor di certi servizi si possano ampliare le potenzialità fornite dall'interfaccia grafica:
- soluzione di un piccolo problema di editing, inerente al grassetto che si estende dove non si vorrebbe – uno dei tanti problemi che possono emergere con i sistemi WYSWYG – ciò che vedi ciò che ottieni… ma non sempre
- come comporre un sottoelenco, che l’editore visuale non consente di fare
- come inserire una tabella, che l’editore visuale non consente di fare
Gli esempi si riferiscono ai servizi di blogging
Blogger.com e
Wordpress.com ma,
mutatis mutandis, valgono anche in altri casi. Il video illustra anche come nel Web convenga fare ampio uso del
copia-incolla: si usa dire che un buon programmatore debba esser "pigro" perché riscrivere a mano un frammento di codice che si sa essere corretto vuol dire andarsi a cercare una fonte di errore gratuita. Se stai leggendo questo testo su carta, puoi trascrivere il seguente indirizzo per andare a vedere il video successivamente:
http://is.gd/video_html.
Vediamo ora i codici degli elementi usati più frequentemente...
... e il loro effetto:
grassetto
anche questo è grassetto
corsivo (italic)
anche questo è corsivo (italic)
Titolo livello 1
Titolo livello 2
Titolo livello 3
Titolo livello 4
Titolo livello 5
Titolo livello 6
- questo
- codesto
- quello
Un link
Un’immagine:
Questi esempi sono molto semplici. In realtà il comportamento di quasi tutti gli elementi si possono alterare con gli attributi che si possono specificare a fianco del tag iniziale. Proviamo per esempio a "complicarci la vita" con gli elenchi.
- Primo punto in numeri romani
-
Primo punto del sottoelenco in lettere greche
-
Secondo punto del sottoelenco in lettere greche
- Secondo punto in numeri romani
-
Primo punto del sottoelenco in numeri che iniziano da 100
-
Secondo punto del sottoelenco in numeri
-
Terzo punto del sottoelenco in numeri
Ecco il codice che ha prodotto il testo precedente:
Abbiamo ottenuto gli effetti assegnando particolari valori agli attributi style e start dell'elemento <ol>. Ad esempio con il codice
diciamo di iniziare un elenco numerato con lettere greche minuscole partendo dalla seconda in ordine alfabetico. I vari stili per le liste li trovate nella pagina
CSS list-style-type Property.
Vediamo un altro esempio di impreziosimento del testo mediante appropriati attributi. utilizziamo un elemento fatto apposta per intervenire sulle proprietà di frammenti di testo: <span></span>. Se includiamo del testo, così semplicemente, fra questi tag non succede niente. L'elemento <span></span> serve proprio per utilizzare gli attributi di decorazione del testo. Ecco un esempio dove interveniamo sia sulla dimensione che sul colore di piccoli frammenti di testo (questi effetti nella versione EPUB non sono visibili):
0.25
0.50
0.75
1.00
1.25
1.50
1.75
Dove abbiamo usato il codice seguente:
In questo esempio abbiamo utilizzato nell'elemento
<span></span> l'attributo
style per assegnare dei valori alle proprietà
font-size e
color. Per quanto riguarda l'attributo
font-size con l'espressione
.25em intendiamo il valore numerico
0.25 espresso con l'unità di misura
em. L'unità di misura avrebbe potuto anche essere in
px ma questa è meno conveniente perché il risultato dipende dalle caratteristiche del sistema di display. Invece
em è una misurare relativa:
1.00em designa la misura standard dei caratteri di quella certa pagina, valori inferiori a
1 danno caratteri più piccoli e maggiori di
1 caratteri più grandi. In questo modo è possibile aggiustare a piacimento la dimensione. Una spiegazione più dettagliata si trova
qui. Per quanto riguarda i colori, questi si possono determinare in molti modi, in
questa pagina c'è la tabella della codifica più intuitiva.
Il codice gemmante
In questa sezione cercheremo di farci un'idea della complessità che soggiace alle pagine Web, che non sono fatte di solo HTML. Proviamo a farlo nel più semplice dei modi, ricorrendo alla metafora della gemmazione di un codice da un altro. Iniziamo da un piccolo semplicissimo frammento che, se stai leggendo questa pagina con il navigatore (Firefox, Chromium o altro), puoi leggere "dal vivo" in
http://iamarf.ch/lab/p1.html. Di questa pagina puoi controllare il codice sorgente con la combinazione di tasti
Ctrl-u e, volendo, puoi scaricarla sul tuo computer per lavorarci e cambiarla come vuoi. Altrimenti, se stai leggendo la versione EPUB o PDF
off-line, puoi leggere le "fotografie" qui sotto, e, a meno che tu non voglia scaricare il codice sorgente, una reale differenza con La versione "vera" si trova in HTML ci sarà solo nell'ultimo esempio. Nell'immagine seguente puoi quindi vedere a sinistra come appare la pagina e a destra il suo codice in questo primo semplice esempio.
Fig. 12 - La versione "vera" si trova in http://iamarf.ch/lab/p1.html, poi Ctrl-u per vedere il codice
Nell'esempio precedente non c'è molto di nuovo, ritroviamo semplicemente alcuni elementi noti: <html>, <body>, <h1>, <h2> e <p>. Proviamo ora ad aggiungere un po' di colori, come alcuni di voi hanno già sperimentato per conto loro.
Fig. 13 - La versione "vera" si trova in http://iamarf.ch/lab/p2.html, poi Ctrl-u per vedere il codice. Il codice rappresentato in questa figura ha un difetto. Prova a trovarlo e poi, se vuoi, vai a leggere questa nota [5]
Il codice è quasi lo stesso eccetto il fatto che abbiamo aggiunto l'attributo style negli elementi <h1>, <h2> e <p >, assegnandoli valori tipo "color:red" ecc. Facendo così abbiamo decorato il nostro testo ma abbiamo mescolato due concetti diversi nello stesso codice: il ruolo dei singoli elementi e la decorazione grafica dei medesimi. La cosa è perfettamente legittima nello standard attuale del linguaggio HTML ma si può fare di meglio. Spieghiamo subito perché. Supponiamo di avere un documento molto lungo e supponiamo che in esso siano disseminati molti titoli del tipo h1. Immaginiamo che ad un certo punto ci venga voglia di cambiare il colore di questi titoli. La cosa è perfettamente possibile ma altrattanto noiosa perché ci costringe a cercare e cambiare a mano tutti i titoli h1 disseminati nel documento. Come risolvere questo problema?
La riposta sta nell'identificazione di un secondo tipo di codice che si distacca da quello originale, con compiti diversi. Può essere utile immaginare che il primo gemmi dal secondo, vediamo come.
Fig. 14 - La versione "vera" si trova in http://iamarf.ch/lab/p3.html, poi Ctrl-u per vedere il codice
Qui si vede che la sezione delimitata dagli elementi
<body> e
</body> è la stessa della versione semplice, rappresentata in
Fig. 12, mentre nella versione colorata, in
Fig. 13, avevamo dovuto cambiare la medesima sezione proprio per decorare i vari elementi. Eppure anche questa versione è colorata, esattamente come quella in
Fig. 13. Il trucco è semplice, qui è stato introdotto un altro elemento,
<style>, che racchiude un nuovo tipo di codice che serve unicamente a specificare gli attributi da assegnare agli elementi HTML. In pratica le specifiche di "stile" sono state estratte dagli elementi HTML dalla versione in
Fig. 13 per essere messi una nuova sezione. È un passaggio cruciale perché realizza la separazione di due tipi di codici: da un lato il "vecchio" HTML che serve a determinare il ruolo delle diverse parti di testo, come titoli, paragrafi, elenchi e via dicendo, dall'altro abbiamo un nuovo codice, delimitato fra gli elementi
<style> e
</style>, che determina gli attributi grafici di quelle parti di testo: colore, dimensione e tipo dei caratteri ecc. Questo linguaggio si chiama CSS (Cascading Style Sheet, in pratica fogli di stile). Insomma, i due codici si occupano rispettivamente di contenuto e forma.
Noi non ci addentriamo nei meandri di questo linguaggio, a parte questi piccoli esempi, ma un vantaggio cruciale lo possiamo apprezzare subito. Questo sistema consente di apportare modifiche di forma in un documento anche molto complesso semplicemente agendo sul codice CSS nella sezione <style>: cambiando per esempio il colore dei titoli di livello <H1> da h1{color:red;} a h1{color:yellow;} cambierà automaticamente il colore di tutti i titoli di quel tipo in tutto il documento, a prescindere dal loro numero. Comodo, no?
In realtà la separazione può essere perfezionata ulteriormente collocando i codici HTML e CSS in file separati. È quello che possiamo vedere nella figura successiva, dove rappresentiamo lo stesso testo, decorato allo stesso modo, ma dove il codice CSS è scomparso definitivamente per essere collocato in un file diverso. Al posto dell'elemento <style> abbiamo un elemento <link> nel quale si specifica dove si trova il codice CSS da usare in quel documento HTML.
Fig. 15 - La versione "vera" si trova in http://iamarf.ch/lab/p4.html, poi Ctrl-u per vedere il codice; in http://iamarf.ch/lab/p4.css il codce CSS
In questa figura abbiamo a sinistra il testo così come appare quando lo si guarda con il navigatore, a destra in alto il codice HTML e a destra in basso il codice CSS richiamato nel documento HTML. In questo modo il vantaggio della separazione è ulteriormente potenziato: con una semplice modifica del file con il codice CSS posso alterare in un colpo solo la rappresentazione di un grande numero di documenti complessi.
Preghiera...
Noi qui non studiamo programmazione ma questi semplici esempi ci consentono di apprezzare l'incredibile capacità di generalizzazione che risiede nel software. La posibilità di generalizzare è una caratteristica fondamentale e pervasiva del codice, a sua volta ereditata dalla matematica. Il pensiero matematico è fondamentalmente questo: costruire un edificio di concetti coerente sulla base di un novero di concetti elementari espressi mediante appropriate simbologie, quindi porlo in un involucro e assegnargli un nome per utilizzarlo come concetto elementare in edifici ancora più complessi e più generali. E qui mi permetto di fare una raccomandazione accorata. Ho conosciuto molti giovani in grado di fare lavori sorprendenti al computer. E non mi riferisco all'impiego banale dei device, a quella confidenza con click e interfacce che troppo spesso scambiamo per competenza da nativi digitali ma che è solo una forma di familiarità. Mi riferisco invece a competenza vera, direi "all'antica", fatta di conoscenza di codici e di creatività espressa mediante la manipolazione di tali codici. Ho visto ragazzi delle medie programmare computer in modo incomprensibile per compagni, genitori e insegnanti, abbastanza indipendentmente dal "rendimento scolastico". Ho potuto apprezzare il lavoro fatto da ragazzi di liceo che avrebbe potuto essere oggetto di una ottima tesi in una laurea triennale di informatica, lavoro che è risultato totalmente incompreso dai propri insegnanti, che hanno liquidato quel lavoro come una forma di videogiochi, esclusivamente per la propria crassa ignoranza ma, che è molto più grave, per l'incapacità di vedere oltre il proprio mondo. Ho conosciuto studenti universitari in grado di scoprire falle nel sistema informatico di un ateneo e, si badi bene, non studenti di discipline tecnologiche. Ho "salvato" geniali programmatori ventenni dall'ambizione genitoriale di farne un impiegato con lo stipendio sicuro - ragazzi che scuola e famiglia avevano decretato asini in matematica. Ho conosciuto dottorandi in discipline umanistiche in grado di sviluppare complicatissimi sistemi software senza che nessuno, nel poprio contesto accademico, fosse in grado di capire cosa stessero facendo. Insomma, tanta istruzione ma in un deserto cognitivo e, direi, affettivo. Certo, quelle che sto citando sono eccezioni, è vero, ma sono tante! La questione è affine a quella dell'attribuzione di una colpa giudiziaria: per essere "totalmente" sicuri di mettere al fresco i mariuoli veri possiamo permetterci di schiaffare in prigione un innocente? Penso di no come probabilmente (spero) i più. Parimenti, per essere sicuro che tutti facciano il "programma" minimo, e facciano "le schede" secondo gli adempimenti del caso, è giusto che, così facendo, io rischi di piallare un germe di genialità nella mia classe? Ecco allora il mio appello: per carità, se vedete che una bambina o bambino, ragazza o ragazzo, sta facendo cose strane al computer, fermatevi un attimo e cercate di capire, se non capite - non cè niente di male, specie oggi non è possibile essere competenti in tutto - cercate di documentarvi e create dei contatti fra quel giovane e mondi nei quali la sua attività potrebbe essere compresa, guidata e valorizzata. Cercate di integrare quell'attività nella classe, aiutate quel ragazzo a comunicarla e trasmetterla a voi e agli altri. Scusate se mi sono permesso questa sorta di "ingerenza" ma in tutti questi anni ho visto troppi casi tristi: possono essere pochi, rispetto alla massa, ma il danno che si fa a non valorizzarli, o addiritura a sopprimerli, è gigantesco.
E per finire un ultimo sforzo. Tutto ciò che abbiamo visto fin qui attiene alla rappresentazione di pagine statiche: codifichiamo il contenuto e la forma, magari anche in maniera molto sofisticata perché siamo diventati bravini, ma poi quello è: le pagine si guardano così come sono state composte. Sono statiche mentre tutti tocchiamo con mano ogni giorno pagine che sono invece dinamiche. Talvolta basta passare con il mouse in qualche punto per vedere apparire qualcosa. Evidentemente ci manca un ingrediente che va oltre la forma e il contenuto. Ci deve essere da qualche parte qualcosa che determina dei comportamenti, automaticamente, in corrispondenza di certi eventi, come il passaggio del mouse o un click scattato in una certa posizione. Ebbene, possiamo farci un'idea confrontando la figura precedente con la successiva:
Fig. 16 - La versione "vera" si trova in http://iamarf.ch/lab/p5.html, poi Ctrl-u per vedere il codice; in http://iamarf.ch/lab/p5.css il codice CSS. L'ombreggiatura evidenza la "gemma" di un nuovo tipo di codice.
Descriviamo questa figura attraverso l'analogia con la figura
Fig. 15. A sinistra vediamo il solito testo ma con la freccia del mouse che punta la parola "cane" la quale è diventata gialla. Si tratta di un'immagine statica ma l'effetto è proprio quello: quando si passa con il mouse sulle parole queste cambiano colore. Per vedere l'effetto vero puoi andare nella pagina
http://iamarf.ch/lab/p5.html. In alto a destra, nell'intestazione, al posto dell'elemento
<style> abbiamo un nuovo elemento,
<script type="text/javascript"> che delimita un altro tipo di codice, scritto in
Javascript, e nel merito del quale non entriamo, eccetto dire che esso serve per cangiare il colore delle parole passandoci con il mouse. Abbiamo tre tipi di codice questo punto:
- il codice HTML che determina gl elementi di contenuto, condensato fra <body> e </body> (a destra in alto)
- il codice CSS che determina i colori degli elementi, anche in diverse fasi dinamiche (a destra in basso)
- il codice Javascript, "incistato" fra <script> e </script>, che determina quale sia la dinamica della pagina
Questa sommaria spiegazione serve unicamente ad avere un'idea di come oggi le pagine HTML che scarichiamo nel nostro computer portino anche funzionalità e non solo contenuto e forma. In altre parole: scaricare pagine Web non vuol dire solo scaricare pagine statiche ma vero e proprio software. Qui l'esempio è banale - una sola riga che cambia il colore al testo - ma al posto di quell'unica riga ci può essere di tutto. In effetti, molti servizi Web ci offrono delle funzionalità complicatissime, un esempio per tutti: il servizio Drive di Google, che rappresenta un discreto sostituto dei pacchetti tipo Office, ma se ne potrebbero fare tantissimi altri. Chi ha ancora voglia può andare a leggere
questo post dove si cerca di spiegare che succede quando si consulta un orario ferroviario online.