Un giorno no…
Per logica avremo nel nostro calendario due tipi di giorni: giorni con eventi e giorni senza eventi.
Un giorno senza eventi è un elemento che strutturalmente è meno lavorato rispetto ad uno che indicherà la presenza di eventi.
Un giorno in una struttura a calendario (dove è presente esclusivamente il numero del giorno ) viene interpretato cognitivamente dalle persone secondo un modello: Lunedì 1 Gennaio 2007 anche se in effetti quello che vediamo è solo il numero del giorno.
Comunque visivamente se questo giorno volesse presentare una serie di eventi avrebbe un aspetto differente rispetto ad un giorno senza eventi.
Ok! Considerando quello che abbiamo appena descritto riscriviamo il modello, indicando cosa è visibile e cosa non lo è… Anzi diamo per scontato che tutto sia visibile, tranne quello che viene chiaramente indicato come invisibile.
Lunedì (invisibile perché solitamente ci si basa sull’etichetta in intestazione) 1 Gennaio (solo gennaio sarà invisibile perché l’etichetta del mese in cui siamo ci fa intendere che quello è un giorno del mese specifico). Un qualcosa poi ci farà dedurre che ci sono degli eventi o che non ci sono eventi. Il caso che stiamo trattando ci descriverà che “non ci sono eventi”.
Riportiamo in codice quello che abbiamo appena descritto:
<li class="giorno" id="giorno-1"> <span class="hidden"> <abbr title="Martedì">M</abbr> </span> 1 <span class="hidden"> Gennaio </span> <span class="hidden"> Non ci sono eventi </span> </li>
… E un giorno si!
Riprendendo le considerazioni fatte per un giorno senza eventi, ma convertendole in un giorno con degli eventi schedulati, possiamo affermare che: un giorno con degli eventi schedulati sarà visivamente descritto da un numero (il giorno) che sarà integrato in un collegamento al dettaglio degli eventi.
Come per i giorni senza eventi pianificati, visivamente avremo l’informazione necessaria (il numero del giorno) la posizione incolonnata ci consentirà di associare il numero al giorno della settimana, quindi è un informazione che noi, pur non vededendo diamo per scontato, il mese è un informazione che assumiamo dall’intestazione del calendario. Inoltre facciamo una considerazione già introdotta in fase di analisi: quando guardiamo un calendario, di solito un giorno che vuole segnalare degli eventi, è rappresentato con una formattazione differente rispetto ad un giorno senza eventi quindi visivamente abbiamo modo di saltare da un evento all’altro senza dover necessariamente guardare tutti i giorni del calendario. Perché precludere queste informazioni ad un cieco? Quindi la strutturazione di un giorno con eventi sarà simile a quella prima rappresentata per un giorno senza eventi:
<li class="giorno" id="giorno-2"> <span class="hidden"> <abbr title="Martedì">M</abbr> </span> <a href="#" title="accedi agli eventi del giorno"> 2 <span class="hidden"> Gennaio </span> </a> <span class="hidden"> , <a href="#giorno-7">vai al prossimo evento</a> </span> </li>
Quindi come potrete notare, la formattazione del giorno è molto simile alla struttura rappresentata prima: esiste l’informazione sul giorno, opportunamente resa invisibile tramite la classe hidden, esiste l’informazione sul giorno e mese presente in un collegamento ipertestuale che punterà alla ipotetica pagina degli eventi e notificherà (tramite il titolo) la possibilità di accedere al dettaglio degli eventi schedulati. Inoltre dopo tutti i dettagli ci sarà un link che ci farà saltare al giorno con l’ultimo evento schedulato.
Commenti
6 risposte a “Calendario senza tabella? Da oggi è possibile!”
A quanto pare, prescindendo dal fatto che un calendario di per sè non è accessibile, un calendario senza tabelle è semanticamente scorretto: http://dougal.gunters.org/blog/2003/02/21/tables-vs-css
Sicuramente quello che dichiara Dougal non è affatto sbagliato, però quello che ho voluto indicare con questo articolo è che se una qualsiasi persona volesse proporre un calendario che semanticamente resta valido (come lo è la struttura di una tabella) può implementare degli elenchi puntati nidificati.
Fornire tutte le informazioni presentate nell’esempio con solo una tabella avrebbe comportato una deformazione dei contenuti così da renderla illeggibile senza CSS.
Ti propongo di fare una prova e riportare esattamente quello che ho fatto in tabella: con un CSS sicuramente resterà gradevole a leggersi, credo lo sia molto meno senza. :)
Perché semanticamente scorretto?
Visivamente non cambia nulla, per di più è Usabile da parte di tutti …
Un layout table-less non vuol dire che non si possano usare tabelle (dove ha un senso) ma semplicemente che non sono state usate le tabelle per realizzare il layout. IMHO per un calendario è un controsenso, se non che si più modificare il modo di visualizzarlo ricorrendo ad interpretazione diversa del CSS per i diversi dispositivi (per esempio per i palmari/smartphone), ma se si vuole visualizzare come tabella è un uso sbagliato (nonche ci si complica la vita :P )
Altra cosina da aggiungere, manca il mese, e il modo di cambiare mese, ma non dovrebbe essere un problema aggiungere quelle 5 righe di codice :P
ciao
PS: buona pasqua
Questo tutorial è stato pensato per mostrare che con i CSS è possibile ottenere risultati realmente soddisfacenti: riuscendo ad elaborare un calendario altamente accessibile e gradevole d’aspetto. Disattivando i CSS il risultato non è dei peggiori. Anzi paragonato al possibile risultato ottenuto con una tabella che vuole mostrare le stesse informazioni, io credo che forse quanto ottenuto è anche superiore.
Tableless vuol dire layout senza tabelle, ma se volessimo diventare così pignoli da richiedere un sito tableless nel senso stretto della parola?
Credo di aver dato la soluzione per uno degli elementi che di fatto sono più adatti ad essere presentati con una tabella.
IMHO richiedere un layout tableless nel senso stretto della parola non ha senso, il tag <table> esiste nella definizione dello standard XHTML1.1 e anche nella bozza del 2.0 semplicemente perchè ha un senso se usato con coscienza, non vedo perche lo si voglia evitare (quando è utile e gusto usarlo).
E’ come volere un sito con le immagini fatte di <div> di vari colori da un pixel posizionati con l’absolute perchè il sito non deve assolutamente avere immagini, si può fare, ma ha un senso?
Ciao
PS: non voglio sicuramente sminuire il tuo lavoro, ma ritengo che non sia giusto creare calendari senza tabelle, per lo meno se li si vuole visionare in quel modo…