Giorno 18 – Date al calendario una vera didascalia

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

Condividi:

Franco Carcillo

Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.