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:
  1. 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.
  2. 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ì!
  3. È 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.
  4. 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.
  5. 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.
  1. 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.
  2. 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.


Buon divertimento (È giunto il momento di applicare ciò che avevamo imparato riguardo al modo corretto di porre le domande...)






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
  1. questo
  2. codesto
  3. quello

Un link

Un’immagine: Gatto Zurli



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.


  1. Primo punto in numeri romani
    1. Primo punto del sottoelenco in lettere greche
    2. Secondo punto del sottoelenco in lettere greche
  2. Secondo punto in numeri romani
    1. Primo punto del sottoelenco in numeri che iniziano da 100
    2. Secondo punto del sottoelenco in numeri
    3. 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:
  1. il codice HTML che determina gl elementi di contenuto, condensato fra <body> e </body> (a destra in alto)
  2. il codice CSS che determina i colori degli elementi, anche in diverse fasi dinamiche (a destra in basso)
  3. 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.









Note

[1] La fonte è una conoscenza personale ed è seria ma mi piacerebbe verificare ulteriormente. Se qualcuno conferma e dà ulteriori riferimenti mi fa piacere.
Torna indietro


[2] È stato Tim Berners-Lee a inventare il protocollo HTTP. Ebbe questa pensata durante un contratto a termine di 6 mesi con il CERN, nel 1980 (aveva 25 anni). Si occupava di trovare un sistema che consentisse ai fisici delle particelle di scambiarsi agevolmente le ingenti informazioni che si producono in quel campo, in particolare era un sistema pensato per funzionare all’interno del CERN. Tornato nel 1984 come ricercatore, ebbe modo di continuare a sviluppare il progetto e, quando nel 1989 il CERN era il più importante nodo internet del mondo – allora internet era tutta accademica e vi si accedeva solo attraverso gli schermi neri pieni di comandi dei computer di allora – ebbe l’intuizione che quel sistema avrebbe potuto funzionare per realizzare un servizio planetario di accesso alle informazioni. Bene: la bolla finanziaria internet (Dot-com bubble) ha avuto luogo solamente sette-otto anni dopo: 1997-2000. Oggi, nell’era del web 2.0, solo una ventina d’anni dopo, il web è molto più di un mero sistema di accesso alle informazioni, è diventato un sistema planetario di creazione, elaborazione e ridistribuzione delle informazioni accessibile a chiunque, stravolgendo il paradigma dell’uomo novecentesco, primariamente fruitore passivo delle creazioni di pochi veicolate da pingui mercanti, per arrivare al paradigma del cittadino del terzo millenio, creatore e ricettore ad un tempo. Diciamo che oramai la tecnica c’è tutta, manca la formazione ancora, per trarre beneficio da tutto ciò…
Torna indietro


[3] Queste indicazioni dovrebbero valere nella maggior parte dei casi, ma talvolta possono cambiare in funzione dei setting del proprio sistema. Per esempio non sono sicuro che con Internet Explorer sia tutto uguale quando si usa il sistema Windows 8, che io non ho sottomano.
Torna indietro


[4] Qualcuno si può domandare perché un server in Svizzera. Intanto l'esempio è istruttivo perché mostra come Internet abbia abbattuto i confini degli stati nazionali, per molti versi - ho degli amici che hanno optato per servizi americani, o di altri paesi. Fino a poco tempo fa disponevo di un server che avevo pagato e mantenevo con i fondi per le ricerche che svolgevo prima. Avendo cambiato attività ed essendosi esauriti i fondi, il server è andato avanti per un bel po' ma poi è giunto alla fine della sua lunga corsa. In quel caso l'indirizzo era lai.dfc.unifi.it e significava che il server (detto anche host) si chiamava lai, il quale si trovava nel dominio dfc (Dipartimento di Fisiopatologia Clinica, che a sua volta sta nel dominio unifi (Università degli Studi di Firenze), il quale ancora a sua volta è incluso nel dominio it (Italia). Ora che mi sono trovato senza, sono andato a vedere vari servizi di hosting in giro per il mondo. Si tratta di servizi che ti danno uno spazio che ti appare come un tuo computer completamente a tua disposizione. In realtà si tratta di macchine simulate all'interno di computer molto potenti, ma il risultato è perfettamente adeguato, a meno che uno non abbia bisogno di prestazioni speciali - tipo servizi con altissimi numeri di accessi - in quel caso puoi disporre di macchine dedicate ma i costi sono ovviamente significativamente maggiori. Così ho cercato quello che aveva le caratteristiche che mi piacevano ad un costo sostenibile, influenzato anche dal fatto che la Svizzera, oltre ad essere commercialmente molto affidabile è il paese più rispettoso della privacy dei cittadini, e per me questo è un valore importante, specialmente in materia di Internet.
Torna indietro


[5] Appena notata l'imperfezione nella figura, mi sono accinto a correggere la figura ma poi ci ho ripensato, perché mi sembrava utile commentarla. Per comodità riporto qui la figura.


Non si tratta di un errore, perché il codice è perfettamente funzionante. Si tratta di un'imperfezione estetica, che non altera in nessun modo la funzionalità ma inficia un po' la leggibilità del codice. L'osservazione che stiamo facendo quindi ha il sapore della calligrafia: l'estetica non è fine a se stessa ma contribuisce alla trasmissione dei pensieri, contribuendo così a sua volta a un aspetto funzionale. Intendiamoci, il frammento di codice che stiamo analizzando è talmente piccolo che anche il danno è lieve ma quando i testi sono molto lunghi una rappresentazione del codice disordinata può renderne molto difficile la lettura ed essere addirittura fonte di errori, questi sì portatori di disfunzione vera e propria. In questo esempio l'imperfezione consiste in uno scorretto rientro dell'elemento di chiusura </body> che non è lo stesso di quello di apertura, <body>. I navigatori Internet, che sono quelli che processano il codice HTML per rappresentare le pagine, ignorano questo fatto; si tratta quindi di una questione meramente estetica. Se in questo esempio la cosa può facilmente parere marginale ma prova a dare un'occhiata al codice di questa pagina, se la stai leggendo in Internet con un navigatore, e potrai avere un'idea di come la corretta gestione dei rientri possa facilitare molto la lettura del codice. In inglese c'è una parola apposta, indentation, che designa la presenza dei rientri in un codice. L'utilità è dovuta al fatto che l'indentation contribuisce a svelare la struttura di un codice. In tutti i linguaggi moderni si fa uso dell'indenting, in alcuni i rientri hanno addirittura significato funzionale, come nel caso del linguaggio Python, dove anche i rientri determinano la funzionalità del codice. Con questa nota si vuole mettere in evidenza un aspetto che contribuisce al valore didattico del codice e che richiama la cura che si attribuiva una tempo al bello scrivere.
Torna indietro
Torna all'indice