Archivio > Categoria: Markup

La filosofia delle intestazioni

Qualche giorno fa ho ripescato un vecchio articolo di Eric Meyer sulla semantica degli headings. Il senso del testo è molto critico nei confronti delle specifiche, e illustra in particolare quali sono gli approcci più frequenti nella suddivisione in sezioni di una pagina.

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Secondo Eric però, poche righe non bastano a chiarire le idee.

Nothing about what order they have to be in, or whether you can skip levels, or anything else besides the creation of a spectrum of importance, as it were.

Nessun riferimento sull'ordine che le intestazioni dovrebbero avere, nessun accenno alla possibilità di saltare i livelli, nessun approfondimento sul concetto di importanza.

A questo punto, quindi, l'autore inizia a parlare di interpretazione personale, affermando che ognuno di noi potrebbe approcciarsi alle specifiche in modi differenti, vista la mancanza di approfondimenti nei documenti W3C ufficiali. Eric, ad esempio, correla ad ogni titolo di sezione un certo livello di importanza (coincidente, se vogliamo, col numero): a conseguenza di ciò, questa tecnica permette di saltare da <h2> a <h4> seguendo un ordine logico, ma non necessariamente numerico. L'essenziale è attribuire ad ogni sezione un grado di rilevanza che sia proporzionato anche in rapporto agli altri blocchi presenti nella pagina. Ovviamente l'articolo è vecchio e forse non più valido, ma rimane buono lo spunto per parlare di semantica ed accessibilità.

Il ragionamento non fa una piega, ma questa volta non mi trovo molto d'accordo. Michele Diodati ne he parlato tanto nei suoi scritti: Le WCAG 1.0 raccomandano di non saltare livelli logici nell'uso delle intestazioni. Uno degli errori più frequenti è proprio quello di saltare i titoli, o di usarli in maniera spropositata semplicemente per beneficiare della loro formattazione. E' un grande ostacolo per la semantica del documento.

L'idea del signor Meyer, comunque, non sembra rientrare in questa categoria: in questo caso viene accentuato il significato semantico (senza che venga portato all'esasperazione), e contemporaneamente quello accessibile rimane abbastanza incurato. A quanto sembra, infatti, alcune misteriose applicazioni (come ad esempio i browser testuali) fanno meno fatica a "spezzettare" la pagina se i titoli seguono un preciso indice numerico: viene a crearsi una struttura gerarchica, quasi come in un libro scolastico diviso in più moduli, unità, capitoli e paragrafi. La decisione di ignorare questo ordine non è del tutto errata: la sensazione, però, è quella di un documento disordinato, confuso, e quasi irrecuperabile, dove ogni sezione è indipendente dalle altre, e la struttura ad albero delle informazioni quasi inesistente. E' altrettanto vero che queste sono per lo più frasi fatte, basate sul classico "sentito dire". Niente di dimostrabile e concreto, per ora, almeno per quel che mi riguarda.

Ecco che allora nascono le filosofie delle intestazioni, nelle quali ognuno di noi può rispecchiarsi per basare le proprie scelte di progettazione. Meglio <h2> o <h3>? Punto sulla logica oppure decido di rispettare anche raccomandazioni per l'accessibilità? E chi mi dice che la scelta sia quella giusta? A voi la risposta.

. Pubblicato sabato 05 agosto 2006 e archiviato in , .

Relazioni semantiche fra documenti

Chi ha sbirciato almeno una volta nel codice sorgente di questo weblog avrà sicuramente notato la massiccia presenza del tag <link> per esprimere relazioni tra il documento ed un altro oggetto: la citazione è presa da un articolo sulle relazioni tramite links presentato nella sezione di HTML.it dedicata al Webdesign. Sebbene la data possa lasciare qualche dubbio, l'argomento rimane recente, e meritevole di essere tuttora considerato valido.

L'elemento <link> viene attualmente utilizzato soprattutto per attribuire un foglio di stile ad un documento (rel="stylesheet"). Viene quindi a crearsi una connessione fra il documento corrente e quello collegato (in questo caso il foglio di stile), poichè al documento a vengono applicate le regole di presentazione espresse nel documento b destinatario. Questo concetto può essere sfruttato per stabilire rapporti di altro tipo.

Le relazioni fra oggetti si distinguono in due rami principali: dirette ed indirette; per riferirsi ad esse vengono usati rispettivamente gli attributi rel e rev: questi, in combinazione con l'elemento <link>, accettano una lista di valori standard necessari per creare collegamenti semantici tra documenti, così come espresso nel concetto di Link relationship.

Lo stesso Technorati.com, per indicizzare i links in entrata, sfrutta l'attributo rel="tag" combinato con l'elemento <a>: il documento corrente a, poichè etichettato col tag c, è collegato al destinatario b. Sembra un problema di matematica, ma non lo è!

Penso che questo sistema permetterà (o forse permette?!) di creare un tessuto di collegamenti molto più vasto e specifico di quello classico: è un'evoluzione nella navigazione, e nell'esperienza dell'utente (o chi per lui), che sarà in grado di comprendere immediatamente la valenza che ha il documento di destinazione nei confronti di quello corrente. Internet è talmente vasta che tanti contenuti, prima o poi, vanno persi. Con un sistema semantico come questo, recuperarli diventerebbe - a mio parere - facile e produttivo, permettendo uno sviluppo della rete quasi... "multidirezionale" (okay okay, forse ho esagerato un pò con i termini): quel che voglio dire è che non si tratta più di collegamenti in entrata o in uscita, ma di un sistema su più livelli e più direzioni.

Così come <strong> è semanticamente diverso da <b>, sono sicuro che il classico link comincerà ad assumere un valore logico decisamente più accentuato, perdendo il significato quasi esclusivamente fisico che aveva avuto sino a quel momento.

. Pubblicato venerdì 14 luglio 2006 e archiviato in , .

La semantica nei forum

In questi giorni sto lavorando con grande entusiasmo ad un vecchio progetto sulla grafica web e non. Nella lista delle cose da fare è sicuramente in cima a tutto l'organizzazione di un forum che sia in grado di accogliere un discreto numero di utenza. Tradotto, vuol dire sistemare le sezioni, configurare le opzioni di sicurezza, installare eventuali estensioni e realizzare una skin. E' un bel lavoraccio, ma nonostante un attimo di esitazione mi metto al lavoro e comincio subito a modificare il template.

All'inizio sono partito con l'idea di lasciare tutto così com'è, lavorando soprattutto sul CSS(Cascading Style Sheets) per puntare quindi ad un buon impatto visivo. Più ragionavo sul da farsi, però, e più mi sentivo turbato. Effettivamente, qualcosa che non andava c'era, e si chiamava semantica.

Il problema delle molte applicazioni a noi note per la realizzazione di forum, come IPB(Invision Power Board) o phpBB, è costituito proprio dalla noncuranza che gli sviluppatori continuano a dimostrare nella creazione delle skin di default: viene creato codice superfluo, poco semantico, e soprattutto l'esempio viene poi imitato da tutti coloro che (come me) vanno a modificare l'aspetto della board; essendoci molte aree da modificare, si tende a lasciare tutto immutato, risparmiando così molto tempo prezioso.

Il risultato è che oggi ci troviamo davanti a veri mattoni, seguiti poi da prodotti "amatoriali", mattoni anch'essi. Ovviamente, non oso criticare nessuno per il lavoro che ha fatto e per il tempo che ci ha impiegato, ma vorrei semplicemente dipingere nella maniera più precisa possibile la situazione odierna riguardo alla semantica nei forum.

L'obiettivo che mi sono imposto, quindi, è quello di marcare con obiettività ogni elemento del forum, in modo tale che sia immediatamente possibile comprendere il tipo di informazione comunicata dal contenuto. Questo significa che, in linea di massima, vorrei cercare di imitare la struttura di LineHeight (provate a guardare il sito disabilitando gli stili): in cima a tutto links di salto a contenuti e/o navigazione (per offrire un minimo di usabilità in più), poi testata del forum con descrizione, seguita dalla navigazione principale, dal contenuto, ed infine dai "piedi" del forum (ovvero quella parte con informazioni relative al copyright, alle richieste effettuate al database, ecc...), il tutto suddiviso da separatori.

I lavori sono iniziati da poco, e penso si protrarranno a lungo. Quando si segue questa linea di pensiero, penso che il problema risieda soprattutto nel sano utilizzo dei tag. Per cercare di lavorare in maniera semantica (o meglio, quando siamo convinti di farlo), si rischia di compromettere l'accessibilità: si usano certi tag al posto di altri perchè visivamente rendono meglio, e non ci rendiamo immediatamente conto dell'errore. Me ne accorgo io stesso, perchè ho già fatto alcuni inutili sacrifici a livello di codice, semplicemente per garantire una buona visione anche a CSS disattivati.

Insomma, per farla breve questa sfida che mi sono imposto può essere definita un vero e proprio esperimento, che spero mi porti a comprendere quale sia la via migliore per realizzare, in futuro, pagine costituite da codice di qualità.

Discuti [2]. Pubblicato giovedì 22 giugno 2006 e archiviato in , .


Paginatura: