Il codice gemmante – #loptis

Un ripasso e un passo fuori, in una delle tante possibili direzioni, ma una particolarmente importante – suggestiva. Vorremmo qui toccare con mano la caratteristica gemmante del codice, credo una cosa propria della lingua, in generale. Sarebbe interessante poter vedere in maniera dinamica l’evoluzione delle lingue da diecimila anni a questa parte, contraendo la scala dei tempi a qualche minuto. Forse qualcuno l’ha fatto: fiammeggiante proliferazione di lingue, dialetti, gerghi. Il codice fa parte di questo, credo, solo che evolve in tempi contratti, follemente contratti.

Gli esempi che stiamo per vedere potrebbero essere svolti in molti altri modi. Il codice si può sempre scrivere in modi diversi. Il criterio che ho privilegiato qui è quello della massima semplicità, preferendo i costrutti più semplici e riducendo al massimo il numero di nuovi simboli.

Con tali premesse, partiamo da questa semplice pagina. Come al solito, potete cliccare il link e copia-incollare gli esempi nel vostro laboratorio, per giocarci un po’. Ma riporto anche il codice qui sotto per chi vuole leggere di fila.

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

È una pagina veramente semplice, messa appena perbenino, con i tag <html> e </html> per specificare inizio e fino del codice HTML e i tag <body> e </body> per delimitare il corpo del documento – potrebbe esserci anche un header, un’intestazione – vedremo un esempio fra poco. Poi ci sono un titolo, due sottotitoli e quattro paragrafi. Poca roba. Decoriamola un po’, per esempio colorandola. Già che ci siamo, consolidiamo la nomenclatura. I codici HTML, tipo <p> o <h1>, si chiamano elementi o tag. I tag possono avere attributi. Per esempio, nel codice dell’ultimo link che ho scritto

<a href="http://lai.dfc.unifi.it/lab/p2.html">per esempio colorandola</a>

Abbiamo usato il tag <a> arricchito dall’attributo href al quale abbiamo dato il valore di http://lai.dfc.unifi.it/lab/p2.html.

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

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

Bene, siamo contenti di poter colorare il testo e ci rallegriamo di poter fare chissà quante altre cose. Ma che succederebbe se il documento fosse molto lungo e molto articolato? Se volessimo per esempio cambiare da blu a giallo tutti i paragrafi? Ci vorrebbe una magia per poter dire in un colpo solo: “Colorami tutti i paragrafi con il giallo!” Fortunatamente, questa magia è stata già fatta. Vediamola prima di darle un nome (qui la pagina in rete):

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

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

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

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

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

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

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

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

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

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

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

Ma può un comune mortale imbattersi in codice CSS? Più facilmente di quanto si possa pensare, basta avere un blog in wordpress per esempio. Se si va in Bacheca->Aspetto->Personalizza, sulla destra si apre un menu che consente di intervenire su una varietà di aspetti del blog. Le cose variano a seconda del tema, ma tipicamente si può intervenire sui colori, il tipo di caratteri, un’eventuale immagine per la testata e varie altre cose e… il CSS. La politica di WordPress è questa: il codice HTML lo faccio io e tu, utente, non lo tocchi mentre se vuoi puoi pasticciare il codice CSS. Che significa: la struttura e la funzionalità della pagina la determino io, WordPress.com, o chi ho autorizzato a fare i temi che ti offro, mentre sugli aspetti grafici determinabili con il codice CSS puoi intervenire anche tu, personalizzandoti il tema. Perché? Proviamo a capirlo con la prossima esplorazione, o perlomeno ad averne un’idea.

Anche qui siamo di fronte ad una gemmazione: all’interno di un codice se ne incista un altro, con dei compiti un po’ diversi, specializzati in qualche modo. Vediamo.

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

 

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

Anche la nuova gemma è spuntata fra i tag <head>, e la sua “buccia” si chiama <script>. In generale il termine script designa una un insieme di istruzioni, un frammento di codice da eseguire, vero e proprio software. Anche HTML è codice ma un codice di marcatura, che determina la presentazione grafica di un documento la quale viene attuata da un particolare software che è il browser. Anche il CSS è codice; incluso fra i tag style, coaudiva l’HTML per determinare le modalità di rappresentazione dei vari elementi grafici, e anche questo viene interpretato dal browser. Ma il codice inglobato nei tag script è vero e proprio software: istruzioni che vengono eseguite dal vostro computer per fare delle cose. Questo è un fatto assai rilevante. Ci stavamo occupando della codifica di un documento ed eventualmente della sua ornamentazione, e ora all’improvviso scopriamo che nel nostro documento è emerso un frammento di codice da eseguire, ma per fare cosa? Provate voi stessi viaggiando con il mouse sui paragrafi dell’ennesima versione della nostra pagina (e qui la corrispondente pagina CSS in rete).

Visto l’effetto? È così che le pagine web divengono dinamiche. Il codice in questione, nel nostro semplice esempio una sola riga (la riga numero 5), è codice Javascript (qui la scuola W3). Con questo semplice esempio, vi potete rendere conto com’è che quando caricate nel browser una pagina Web, in realtà non state caricando solo informazioni ma anche funzionalità. E fra queste funzionalità vi può essere di tutto, in principio, anche cosiddetto malware, software progettato per arrecare un danno di qualche tipo, o magari spyware, software progettato per tracciare le attività in maniera nascosta o dissimulata.

Ecco perché molto spesso i servizi di pubblicazione online, ad esempio quelli di blogging, ad esempio WordPress.com, tendono a porre dei limiti in ciò che si può inserire, in generale consentendo solo l’impiego di un ristretto insieme di tag HTML, escludendo tutto ciò che potrebbe invece “essere eseguito”.

Non ci aspettiamo che qui ci si metta a lavorare sul codice CSS e tanto meno su Javascript. Ci interessa invece che si abbia una minima idea di cosa si cela sotto ai luccichii del web. Ci interessa che si abbia una pur minima visione di dove ci si possa spingere con l’editing. Se poi qualcuno arzigogola anche qualcosa, tanto di guadagnato.

31 pensieri riguardo “Il codice gemmante – #loptis”

  1. Ho provato gli esercizi indicati sopra per la dimensione e la coloritura delle parole. Con Blocco Note la cosa funziona, salvando con estensione Html, ma se provo nel blog non funziona; viene pubblicato il “testo Html”; ho anche provato ad andare in Bacheca – Aspetto- Personalizza, ma non riesco a evadere le impostazioni date. Che passaggio mi perdo?

    Rispondi

    1. Non sono sicuro di avere capito. Provo a dire questo: nella finestra di editing di WordPress, in alto a destra hai due opzioni: Visuale e Testo; per insierire codice HTML l’editore deve essere in modo Testo, poi puoi passare all’altro modo per vedere subito l’effetto.

      Prova… era questo il problema? Sennò dicci ancora.

      In ogni caso non ti aspettare che in un blog tu possa fare tutto quello che vuoi con il codice HTML, come puoi fare in un file a se stante, perché i servizi di blogging – e tutti gli altri che consentono di introdurre un po’ di HTML – pongono un limite a ciò che puoi fare, per motivi di sicurezza.

      Rispondi

      1. Ho ancora molto da scoprire relativamente al Blog. Ho provato a cercare nell’editing di W la scelta tra Testo e Visuale, ma non li trovo (credo trattasi di analfabetismo da eccesso di stimoli visivi e contemporaneamente difetto di conoscenze e pratica); se entro in Modifica articolo allora questa opzione la trovo. Ho fatto un paio di prove. Rispetto alla dimensione del carattere l’esperimento funziona. Ne ho lasciato traccia sul Blog, ma quando ho tentato con il colore ho combinato qualche pasticcio (mi sa). Ho modificato:

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

        così

        h1{color:purple;}
        h2{color:orange;}
        p{color:pink;}

        e mi sono rimasti i caratteri neri.
        Non mi abbatto, ci torno dopo con calma.
        Le “istruzioni per l’uso” ci sono ora si tratta di tentare e ritentare prestando attenzione.
        Grazie per la solerte attenzione e il supporto costante.

        Rispondi

  3. io ho provato, ho incontrato difficoltà con blogger che mentre cerco di modificare il codice…mi cambia i simboli come vuole lui (specialmente quando salto dalla versione scrivi a quella html)….però sono riuscita a capire le cose che mi interessavano, cambiare colore al testo e formato del carattere! mi sento felice di questo. 😉

    http://lascatoladellescarpe.blogspot.it/2014/01/apollo-e-dafne.html

    ho sbagliato a non fare un elenco?

    Rispondi

    1. Ti suggerisco di iniziare iscrivendoti con il modulo che trovi in bacheca, e di cui metto il link nuovamente qui: https://iamarf.org/iscrizione/

      E poi, soprattutto scrivi qui le ragioni del tuo disagio. Come avevo già scritto, anche gli studenti di editing multimediale devono iscriversi a questo spazio, affinché io possa sapere chi sta facendo qualcosa e gestire adeguatamente i relativi dati.

      Perché è ben difficile aiutare una persona sulla base di quattro parole…

      Comunque, intanto hai fatto un commento, questo è già un passo utile.

      Rispondi

  6. Ho fatto le prove con formattazione dei caratteri, elenchi, immagini e colore qui https://docs.google.com/document/d/1wwSoqgMO-w03ywsMEyctZgau-YlckPZ0drsrn4VQrjA/edit?usp=sharing e qui http://fbartoli.wordpress.com/2013/12/07/79/ i risultati. Piccoli problemi. i video nel post del blog li ho inseriti con l’editor di wordpress e nel secondo file pur avendo usato immagini png ho visto che non hanno conservato la trasparenza ma vengono riquadrate. Continuerò a indagare…

    Rispondi

      1. Sì, ho letto l’istruzione ma … nella mia ignoranza infinita … pari solo alla mia curiosità e alla mia noncuranza nel mostrarle entrambe, mi chiedevo come realizzare questo collegamento.
        Un po’ come il discorso iniziale sull’allestimento del laboratorio personale in cui mi sfuggiva banalmente il salvataggio inutile in .txt.

        PS. Giuro che non ho idea di come mai sia comparso ( e di cosa sia) il Pingback qui sotto … se è qualcosa di grave chiedo venia.

        Rispondi
  8. Pingback: CSS | My Blog

  9. Bello l’esempio degli animali con i css che colorano i titoli.
    Mi permetto solo di osservare che il codice javascript mi sembra ridondante. La definizione “p.changeMe:hover {color:yellow;}” presente nei css è in grado da sola di colorare di giallo il testo al passaggio del mouse.
    L’intervento di codice javascript potrebbe essere utile, se si volesse ad esempio cambiare dinamicamente il blu delle scritte in un altro colore con una istruzione del tipo:

    function cambia() {
    lista = document.getElementsByClassName(‘changeMe’);
    for (i=0;i<lista.length;i++) {
    lista[i].style.color = "#C00";
    }
    }

    Rispondi

    1. Sì. Grazie mille!

      Si tratta tuttavia di aprire nuove porte, ma senza spalancarle subito completamente, pena la fuga di alcuni. Ci stiamo rivolgendo a persone che spesso sono lontanissime da questi mondi tecnici. Occorre quindi cercare le più semplici espressioni immaginabili che consentano di esporre il concetto. Chi voglia giocare per davvero con questo balocco avrà poi tutto il tempo per ottimizzare, ma questo è già un risultato opzionale, per quanto gradito. Il risultato centrale è che passino i concetti fondamentali, alla larga.

      Rispondi

  11. Nei blog, di solito con “Bacheca->Aspetto->Personalizza” di solito ci vado molto cauta, perché la mia assenza di senso estetico nel fare titoli con matite colorate alle elementari già orrificava le maestre, e non è migliorata da allora :D. Però ecco, il vantaggio con funzioni tipo “Bacheca->Aspetto->Personalizza” è che come dici, almeno il risultato è coerente su tutto il blog, e si può modificare con pochi click, altro che usare la gomma-pane.

    Fuori blog, ad es. in un documento testuale o una pagina html indipendente, modifico più spesso le definizioni di stili di paragrafi: spesso gli editori di testi tipo Write o Word propongono titoli H2 in corsivo grassetto e io tolgo il corsivo.

    Gli stili di paragrafi li ho scoperti grazie a qualcuno per chi facevo traduzioni. Lui li usava a casaccio, tipo H3 H7 H2 H1 anziché H1 H2 H3 H4, poi ne modificava l’apparenza sul testo di volta in volta. Perciò quando ci traducevo sopra veniva un casino. Ma è lì che mi sono accorta che qualcosa cambiava nelle cose in cima: appunto nella funzione degli stili. Capito cos’erano grazie al menù d’aiuto, da allora salvavo sistematicamente le cose che mi mandava come solo testo prima di tradurle, formattando con gli stili. Certo, significava anche rifare le tabelle da capo, ma era più veloce lo stesso.

    Poi una volta mi ha chiesto una cosa davvero bizzarra: retro-tradurre in italiano soltanto il sommario interattivo di un testo lungo, per ottenere lo stesso che un’altra traduttrice aveva prodotto in francese. Ho cercato di spiegargli che il sommario interattivo veniva automaticamente generato dagli stili di titoli adoperati nel testo, che quindi non c’era bisogno di tradurli separatamente, bastava adoperare quelli giusti: in effetti gli stili “gemmano” anche questo. Non capiva / non voleva cercare di capire e ha insistito. Allora in un minuto gli ho sistemato i titoli e ho chiesto il sommario: probabilmente il lavoro meglio pagato che ho mai fatto.

    Eppure lui era un ricercatore nel campo dell’uso delle “ICT per la formazione”, e scriveva cose molto interessanti in merito. Il problema era che allora venivano elargiti cosiddetti corsi di “informatica” dove ti “insegnavano” soltanto a usare i programmi di burotica di Microsoft ma per Word, soltanto la formattazione di superficie dell’apparenza, non quella strutturale con gli stili, cosa considerata “troppo difficile”.

    Anzi, ho anche collaborato con un’altra vittima di quei corsi “di informatica”: nel suo avevano detto di non utilizzare mai i paragrafi veri ma soltanto i ritorni a capo. Cioè produceva testi monolitici, con una falsa apparenza di struttura fatta in superficie con grassetto ecc. E lei non ne demordeva: se nel corso avevano detto di fare così, lei faceva così. Però ci ha finalmente ripensata quando le si è impiantato un testo di varie decine di pagine: non si salvava né si stampava più, mi ha detto al telefono, abbastanza angosciata. Da carogna, l’ho ricattata: sarei venuta a vedere cosa si poteva fare, a patto che lo facesse lei seguendo le mie indicazioni.

    Quindi, visto che “seleziona tutto” e “copia” funzionavano ancora, le ho fatto ripulire il testo incollandolo su Notes per ottenere una versione solo testo, poi incollare il risultato pulito su un nuovo documento Word e formattarlo ragionevolmente. E alla fine le ho mostrato il trucco del sommario: è quello che l’ha davvero convinta.

    Quel ignorare deliberatamente la strutturazione vera nei “corsi di informatica” era simile a quanto avveniva nell’insegnamento dell’italiano in Ticino: briciole di sintassi venivano soltanto presentate all’ultimo anno della scuola dell’obbligo. Perciò ad ogni incontro di insegnanti di italiano e di lingue straniere era la stessa solfa: noi di lingue straniere chiedevamo a quelli di italiano di introdurre la sintassi basilare prima, loro ribattevano “Non siamo qui per insegnare la differenza tra complemento di luogo statico e di movimento perché serve solo in tedesco” e i docenti di tedesco ri-ribattevano: “Di questo ci occupiamo noi: vogliamo soltanto che gli allievi capiscano cosa fanno il soggetto, il verbo, il complemento oggetto e il complemento di termine.” E i docenti di italiano giù a continuare a insegnare soltanto cos’erano un nome, un verbo, un aggettivo ecc. per quasi tutta la scolarità, fino al prossimo incontro dove si ricominciava il dialogo di sordi.

    Rispondi

  12. Si era detto che nei commenti, il codice non funzionava interamente, vero?
    Allora meglio le prove sul mio wordpress….ma in ogni caso, provo qui sotto…

    My First JavaScript
    Click the button to display the date.

    Try it

    function myFunction()
    {
    document.getElementById(“demo”).innerHTML = Date();
    }

    Rispondi

  13. Prof. questo sì che è complesso! Ma almeno, finalmente, riesco a capirne un po’ di più…fra css, java… voglio tentare delle prove, anche se hai scritto che non pretendi…ma non so se ne sarò capace. Grazie, davvero di informazioni importanti per chi come me, è sempre a girellare per la rete. E scopro così i motivi delle limitazioni che hanno i vari tipi di blog, che ritenevo solo commerciali e sono anche legati alla sicurezza mista all’imposizione, in ogni caso benevola (almeno credo), di una struttura che ci mettono a disposizione gratuitamente.
    Riguardo ai vari tipi di “aggeggi”, marcatori, programmi…che determinano la pagina web, allora a questo punto, puoi spiegarmi cosa sia il misterioso php?
    Buon sabato, Nicoletta

    Rispondi

Lascia un commento