E ve lo dice uno che voleva scaricare La casa di Topolino.
Category Archives: Network
Qua la mano, cumbar’… to’, la mano scumbar’!
Ovvero: volevo inviare una mail a hubrys però ho pensato che: 1) se gli avessi mandato un messaggio privato per spiegarglielo Splinder si sarebbe mangiato il codice HTML che serviva senza far capire una cippa al destinatario, come accadde con Ossimorosa, e 2) alla fine è una cosa che può interessare anche altri.
Ovvero, ancora: se nel post precedente avevo ricercato quel minimo di comprensibilità, adesso non ci capirete na mazza pe’ ddavero.
Allora.
Capita, in una pagina HTML, quale può essere appunto il proprio blog, di avere dei blocchi di testo che occupano un po’ troppo spazio. Ad esempio, c’è chi ha molti link ad altri blog, c’è chi invece mette da parte una lista di link ai vari post che fan parte di una serie (ad esempio la tragica Telecomachia ^^), e così via.
Ebbene, noi vi possiamo aiutare. Dove noi sta per io e il DHTML, che a sua volta sta per Dynamic HyperText Markup Language, che a sua volta sta semplicemente per combinazione di CSS, Javascript e HTML (anzi, XHTML perché noi siamo fighi e usiamo le ultime novità del mercato).
Premesse generali, sostanzialmente inutili in questo contesto, ma che posson sempre servire in futuro.
Il CSS serve a definire molto più facilmente le proprietà di un oggetto HTML. Ad esempio, mettiamo di voler rendere un paragrafo di testo rosso. Senza CSS avremmo scritto:
<p>
<font color="red">
Questo è il testo che diventa rosso.
</font>
</p>
Invece noi che siamo bravi e vogliamo fare i fighi che tra l’altro risparmiano pure un po’ di spazio, scriveremo:
<p style="color: red;">
Questo è il testo che diventa rosso.
</p>
Voi direte: l’effetto è lo stesso, allora che ci frega? In verità vi dico, questa cosa ha un suo senso, ma se non lo capite in questo post come se fosse una rivelazione divina non ve lo potrò spiegare altrimenti, anche perché se no a quest’ora lavorerei alla Jackson Libri e voi comprereste libri da 700 pagine per la modica cifra di 50 euro (ehi, ci devo pensare…).
Ok, ve lo dico. La vera utilità del CSS risiede nelle classi. Sono una cosa fighissima: mettiamo il caso di avere 10 paragrafi disseminati qua e là, e noi vogliamo che siano mostrati tutti alla stessa maniera. Per esempio, questi 10 paragrafi, al contrario degli altri, devono essere tutti gialli su sfondo nero.
Ciao! Sono un paragrafo giallo su sfondo nero!
Per renderli così dovremmo scrivere qualcosa tipo:
<p style="background-color: black; color: yellow;">
Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
Me' basta. Fate finta che io sia già il decimo.
</p>
Sai che rottura se decidiamo, all’improvviso, di cambiare qualcosa, tipo mettere uno sfondo verde anziché uno sfondo nero? Se invece ci inventiamo una classe, e la chiamiamo, chessò, pippo, ci risparmiamo un altro po’ di rotture. La prima rottura che ci risparmiamo consiste nello scrivere, invece, così:
<p class="pippo">
Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
Me' basta. Fate finta che io sia già il decimo.
</p>
Chiaramente dobbiamo anche spiegare a qualcuno ‘sto pippo che mi rappresenta. Questo lo andiamo a fare all’inizio del codice HTML, nella sezione compresa fra <head>
e </head>
(intestazione), e più in particolare in uno spazio delimitato da <style type="text/css">
e </style>
(che troverete già, bello come il sole e pronto per essere manipolato):
p.pippo
{
background-color: black;
color: yellow;
}
A questo punto, se volessimo cambiare qualcosa, ad esempio appunto lo sfondo, faremo una semplice modifica alla definizione di pippo anziché andare a modificare dieci paragrafi:
p.pippo
{
background-color: black;
color: green;
}
Ok, smettetela di scorrere la pagina: la parte interessante è qui.
Esiste una proprietà del CSS chiamata display
, che può assumere alcuni valori. Quelli che servono a noi sono block
e none
. Senza scendere nei dettagli, se impostiamo display: block
, l’oggetto viene mostrato, se mettiamo invece display: none
, l’oggetto c’è ma non si vede.
Piccolo esempio:
Per prima cosa dobbiamo inserire una piccola funzione Javascript, possibilmente nell’intestazione (cioè, come detto prima, quella sezione del codice HTML compresa fra <head> e </head>). Il codice l’ho rubato a Trentamarlboro, che ringrazio e con cui mi complimento davvero se per caso è lui l’autore, vista l’implementazione semplice ma efficace:
<script type="text/javascript">
function toggle(id) {
if (document.all) {
if (document.all[id].style.display == 'none') {
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>
Successivamente dobbiamo modificare tutte quelle parti del codice HTML che vogliamo modificare. Per esempio, prendiamo quello che avrebbe dovuto fare hubrys per la serie della Telecomachia (mi permetto di aggiustarlo un po’ perché in realtà ci sono dei piccoli errori nel codice originale):
<div class="boxSidebar">
<h2 class="sectiontitle">Biastemario:</h2>
<h3>TELECOMACHIA</h3>
<a href="http://...">Prima puntata</a><br />
<a href="http://...">Seconda puntata</a><br />
<a href="http://...">Terza puntata</a><br />
...
</div>
In questo caso diventa:
<div class="boxSidebar">
<h2 class="sectiontitle">Biastermario:</h2>
<h3>
<a href="javascript: void(0);" onClick="toggle('biast_telecom');">TELECOMACHIA</a>
</h3>
<div id="biast_telecom">
<a href="http://...">Prima puntata</a><br />
<a href="http://...">Seconda puntata</a><br />
<a href="http://...">Terza puntata</a><br />
...
</div>
In questo modo apparirà più o meno come segue:
Biastemario:
TELECOMACHIA
Ok. Attendo notizie.
Siamo la società dei blog.
Vero.
Solo su Splinder ci sono pressapoco 217mila blog aperti. Ok, alcuni belli, alcuni brutti, alcuni abbandonati, alcuni provvidi di interventi interessanti… ma son comunque una marea.
Pensate in proporzione. Beh, sì, su due piedi è difficile, perciò ve lo dico io in che ordine di grandezza dobbiamo immaginare la blogosfera. Anzi, ve lo dice Technorati: siamo quasi a quota 50 milioni.
Pensate un po’: 50 milioni di soggetti che parlano di sé, o parlano di un tema specifico, o più semplicemente di quello che gli passa per la testa in quel momento. Ci sono blog di persone normali così come di VIPpps, di aspiranti poeti, scrittori o semplicemente blogstar, di tifosi di una squadra di calcio o dell’altra, di persone interessate alla politica, o ad uno sport, o all’associazionismo, o chissà che altro. Certo, perché prima era da fighi farsi un sito, adesso è molto più figo (e facile) farsi un blog.
C’è questa tendenza globale a voler comunicare in qualche modo, a voler parlar di sé ad un esterno composto da chissà quante e quali persone. Spesso usiamo il blog come canale per comunicare un messaggio ad una persona in particolare, a volte in modo esplicito, altre volte in modo velato, quasi codificato, in modo tale che sia solo la persona prescelta (e magari qualcun altro) a capirla. Una sorta di lettera elettronica aperta. Altro che SMS.
Godiamo un po’ nel vedere contatori incrementarsi e spulciare distrattamente le statistiche per scoprire chi ci ha visto. Non per altro, ma perché si sa che spesso sarà anche piacevole rispondergli, e magari trovare un assiduo lettore di un assiduo blog-da-leggere.
Beh, cari blogger, visto che sta società dei magnaccioni è così grande e così piena di belle speranze, dedico a tutti voi questa notte, sia a voi che sarete passati di qui sia a voi che non saprete mai dell’esistenza di questo post.
Un abbraccio.