Giorno 18: Date al calendario una vera didascalia

“Ma come,” vi sento gridare, “il mio calendario ha già  una didascalia. Eccola, mese ed anno in cima. Ed anche in grassetto.”

Ma se scavate bene nel codice sorgente HTML , scoprirete che il calendario non ha una  vera  didascalia. Ha una singola cella della tabella, un <td> che si estende per tutta la prima riga, con una regola CSS per il grassetto. Ma tutto questo sarebbe molto più semplice con un tag <caption>. E’ più facile da leggere nel modello, vi fa risparmiare qualche carattere, viene visualizzato allo stesso modo in un browser visuale, ed è più accessibile.

A chi serve?

A Marcus . Lynx visualizza la didascalia preceduta dalla parola “CAPTION:” rendendo così perfettamente chiaro che la linea è una didascalia e non l’intestazione della colonna o il dato di una  tabella.

A Jackie in modo indiretto. Il tag <caption> chiarisce il modo di usare vere intestazioni di tabelle. I vantaggi per Jackie li discuteremo domani.

Come fare

Potete farlo con gli strumenti che consentono l’uso di un calendario (escludendo quindi Blogger) e che vi consentono nel contempo di personalizzare il codice sorgente HTML generato per il calendario (escludendo pertanto Manila).

In Movable Type, probabilmente avete una tabella per il calendario nel modello Main Index che inizia così (cercate “calendarhead” per individuarla):

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan=”7″ align=”center”><span class=”calendarhead”><$MTDate format=”%B %Y”$></span></td>
</tr>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Lasciate intatto il tag di tabella, e rimpiazzate la prima riga della tabella <tr> con un tag <caption> così:

<table border="0" cellspacing="4" cellpadding="0">
<caption class=”calendarhead”><$MTDate format=”%B %Y”$></caption>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Lasciate il resto così, lo correggeremo domani.

L’attributo  class in <caption> è opzionale; l’ho lasciato lì perchè può essere un mezzo diretto, nel modello preimpostato di Movable Type, di usare una regola  CSS  per mettere in grassetto mese e anno. Usando il tag  <caption> come mostrato, la pagina rimane esattamente come prima.

In Greymatter, il concetto è identico ma i tag del modello sono differenti:

<caption>{{monthword}} {{yearyear}}</caption>

Di nuovo, potete cambiare l’aspetto visivo della didascalia usando i fogli di stile, se vi interessa.

In Radio, il processo è un pò più complicato, ma non impossibile. (Sono in debito con Tony Bowden per queste istruzioni)

  1. In Radio, aprite il programma  Radio. In Windows, doppio click sull’icona Radio nella barra di sistema e selezionate “Open Radio”.
  2. Nel menu “Tools”, selezionate “Developers”, e poi  ”Jump…” ( Control+J). Arrivate a “system.verbs.builtins.radio.weblog.drawCalendar” (senza virgolette).
  3. Ora nel menu “Edit” con “Find and Replace”, “Find…” ( Control+F ) cercate “hCalendarTable”. Rivelate così il blocco di codice che disegna il tag iniziale  <table> e la falsa didascalia del calendario.
  • Cambiate l’ultima linea di quel blocco (che scrive  monthYearString in un tag <tr>) così:

add ("<caption>" + monthYearString + "</caption>")

  1. Chiudete la finestra. Vi chiederà se volete compilare le modifiche apportate, dite di sì.
  • Se vi piace, potete aggiungere uno stile per la didascalia. Andate al modello di Home Page (dalla pagina Prefs) e aggiungete lo stile per   caption. Questo è quello che uso io. La mia sezione  <style> normalmente contiene questo:
body, td, p {

font-family: verdana, sans-serif;

font-size: 12px;

}

Ed ora è così:

body, td, p, caption {

font-family: verdana, sans-serif;

font-size: 12px;

}

caption {

text-align: center;

font-weight: bold;

}

Approfondimenti