Come si fa un link – #loptis

Nei post “Un passo indietro”, I e II, abbiamo smontato l’URL, l’indirizzo che consente di raggiungere una pagina web in internet. Quelle discussioni ci sono servite per avere un’idea di com’è che si manovra la Macchina, di come sono fatti i comandi che le inviamo. Forse quelle considerazioni vi potranno tornare utili in qualche circostanza concreta, ma soprattutto ci sono servite ad introdurre l’idea di codice, seppur in forma embrionale. In questo articolo, analizzando la costruzione di un link, portiamo avanti l’esplorazione del codice. Sì, perché il link è un frammento di codice, un frammento molto piccolo ma magico, perché è quello che trasforma un testo in un ipertesto.

I veterani conoscono questo articolo. Avranno pazienza, magari potranno aiutare qualche matricola in difficoltà. E poi, ho sempre sentito i miei insegnanti che repetita iuvant, diciamo che mi vendico 😉

Qualche altro elemento HTML – #ltis13

Locandina del connectivist Massive Open Online Course: Laboratorio di Tecnologie Internet per la Scuola - #LTIS13

Belle le risorse che vengono fuori con l’esercizio del link! Si pone la questione dell’abbondanza. Tenteremo di affrontarla nella seconda parte del percorso, ora occupiamoci dei fatti tecnici.

Una prima questione è emersa con i commenti #16 e #17 di @Monica Terenghi e #27 #28 di @Mario (@iciaunord), che hanno avuto lo stesso problema: intendevano che il loro link aprisse una nuova pagina anziché
sostituire quella corrente…

Costruire un link con HTML – #ltis13

Locandina del connectivist Massive Open Online Course: Laboratorio di Tecnologie Internet per la Scuola - #LTIS13

Non di rado nei commenti vengono proposte risorse o testimonianze che possono essere interessanti per gli altri partecipanti. Un fatto pregevole che fa percepire immediatamente il valore della cooperazione. Non è difficile andare a ritrovare le fonti o i siti web relativi a queste proposte ma forse a qualcuno sarebbe piaciuto fornire il link diretto e non lo ha messo perché non è abituato a farlo, o forse perché nel box riservato ad un commento non sembra esserci il comando per inserire un link.

Ecco, questa è un’ottima occasione per vedere come si costruisce un link nel testo di un post o anche di un commento.

L’attimo fuggente (ancora colori) – #linf12

Nel giro quotidiano dei vostri blog, guidato da RSSOwl, mi imbatto nel post PASTRUGNAMO di Flavia. Scopro che lei è andata oltre perché nel suo post compaiono delle tabelle, che io non avevo mostrato. L’attimo fuggente… getto un seme:

Continua a leggere…

Ancora un po’ di balocchi con i colori – #linf12

Serve baloccarsi, per crescere, quindi vi invito a giocare ancora un po’ con i “colori” del codice. Si imparano piccole cose che possono tornare utili, ma soprattutto si acquisisce una diversa dimestichezza con la macchina. La nostra è l’epoca della interfacce grafiche, del point-and-click. Tuttavia in determinati contesti le cose si possono fare anche “a mano”, ovvero impartendo comandi, scrivendo codici o testi marcati con codice, come nel caso dell’HTML.

Nel video seguente mostro un paio di esempi di controllo del testo mediante l’HTML
Continua a leggere…

Iniziamo a sporcarci con i colori – #linf12

Questa piccola comunità è attualmente composta da 16 persone che in meno di un mese hanno scritto 350 contributi, fra post e commenti reciproci. All’inizio sia i post che i commenti erano più timidi, poi il clima è andato scaldandosi. Ora qua e là compaiono richieste di aiuto, consigli, testimonianze e notizie di risorse interessanti. Tutto questo in meno di un mese e fra 16 individui che nella quasi totalità dei casi erano perfetti sconosciuti gli uni per gli altri. Molto bene, continuiamo così.

Testimonianze e notizie, dicevo. Il cacio sui maccheroni per iniziare a sporcarsi le mani con i colori. Siamo o non siamo in una bottega artigiana? – Ma i colori quali sono? Quelli di Paint? O di Gimp? – si chiederà qualcuno. Magari, perché no, ma ora intendo un altro tipo di colori, intendo quella materia che forma il software, o più in generale quella materia di cui è fatto il magico collante universale che tiene insieme tutto ciò che chiamiamo ora internet, ora rete, ora cyberspazio. Questa materia si chiama codice.
Continua a leggere…

Non catalogare, organizzare bensì esplorare, scoprire, riconoscere


Oggi, devo andare ad una conferenza e forse poi ne dirò qualcosa. Domani devo andare ad un’altra conferenza e forse poi ne dirò qualcosa. Mercoledì parto per un viaggio che non ho potuto rimandare e tornerò Domenica. Continuerò ad essere reattivo qui ma con qualche ovvio impedimento. Per esempio, salvo inconvenienti, il prossimo incontro online, mercoledì alle 21, sarà condotto da Romina.

Pensando alle vostre reazioni, che ricevo attraverso vari canali e che sono la cosa più importante, trovo una grande varietà, che va dall’entusiasmo allo sconforto. Lo sconforto concerne la sensazione di non acchiappare tutto, il timore di disperdersi: “Devo organizzare, devo catalogare …”.

No no, almeno qui, almeno per questa volta, lasciate perdere, infischiatevene di organizzare e di catalogare. Accedete a questi spazi per “vedere che combinano oggi quei perditempo …” o qualcosa del genere. E invece provate a fare le piccolezze che vi suggeriamo – che a volte appaiono curiosamente difficili. Non scambiate alcuni vostri inevitabili fallimenti per un vostro problema. Come ho scritto in un commento stamani

Tu sapessi quante cose a me non riescono … diciamo che su 10 che ne provo ne azzecco forse 2 alla prima, 5 ce la faccio con un po’ di fatica, 3 proprio non mi riescono, e allora cerco un’escamotage, una via alternativa, e questi iniziali fallimenti si trasformano sempre nelle più feconde occasioni di crescita …

Fate come hanno fatto Gaetano e Claude nei commenti al post precedente, dove si vede che io ieri non ho risolto loro un bel niente!

Allora stamani ho un po’ esplorato, scoprendo che questa faccenda di quale codice HTML sia consentito inserire nei commenti ad un blog WordPress.com è un po’ fumosa.

In primo luogo, pare che l’autore del blog e i commentatori esterni abbiano diritti diversi, come Claude aveva ipotizzato a metà discussione, ma dico questo solo in base al fatto che io ho potuto inserire i titoli e gli altri no.

Inoltre ho trovato che la quantità di tag HTML che si possono inserire nei commenti dipende dal tema adottato nel blog. In questo, sembra, ma non sono sicuro, che possano essere usati i seguenti:

<a href="" title=""> 
<abbr title=""> 
<acronym title=""> 
<b> 
<blockquote cite=""> 
<cite> 
<code> 
<pre> 
<del datetime=""> 
<em> 
<i>
<q cite=""> 
<strike>
<strong> 

Fate delle prove, scrivetemi dei commenti giusto per provare questi tag. Alcuni non li conosco nemmeno io. Cercate voi, provateli qui e spiegateceli a tutti. Provateci tutti. Se trovate che alcuni tag sono stati già descritti, provate con altri. Senza ansia per carità, come in un gioco …

E fate questo anche con qualche blog in blogger, di qualcuno di voi, poi cerchiamo con il contributo di tutti, di mettere un punto fermo su questa faccenda.

Il codice gemmante


Prologo

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

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

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

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

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

Un testo codificato in HTML

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

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

… ornamentato …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

… dinamizzato …

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

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

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

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

Il compleanno del web

17 novembre 15:04: aggiungo in blu un’altra precisazione dovuta al commento di Alessandra. Un commento interessante che concerne la questione spicciola di come accedere alla sorgente di una pagina ma che introduce anche un concetto importante, che riprendiamo in un altro post.
17 novembre 9:04: aggiungo in rosso più giù alcune precisazioni, grazie al commento che Claude ha scritto a questo post (vedete il valore aggiunto dai cyberpartecipanti?). Per inciso, il commento era stato mangiato dall’antispam, quindi: se qualcuno si vedesse rifiutato un commento, mi scriva subito un’email, in modo che io lo possa recuperare tempestivamente.

Banner Italian University Line

Mi sono innervosito non poco lunedì scorso, quando ho capito che avrei dovuto dissipare due o tre ore in macchina per una stupida ma ineludibile incombenza, con tutte le cose che avevo in mente di realizzare ..

Ho acceso la radio nella speranza di mitigare il nervoso. Accontentato subito: una voce simpatica stava spiegando che a Roma, al Tempio di Adriano, aveva luogo l’evento “Happy birthday web”, ovvero il ventesimo compleanno di Internet. All’evento è intervenuto Tim Berners Lee in persona, il fisico del CERN che inventò la tecnologia del web.
Continua a leggere …

%d blogger hanno fatto clic su Mi Piace per questo: