Giorno 27 – Usate intestazioni vere

Giorno 27: Usate intestazioni vere

Pensate al vostro sito come ad uno schema a livelli. Il livello principale è intestato con il nome del sito. Sulla vostra pagina principale, vi sono elementi da parecchi giorni. Così’ il secondo livello riporta la data: “Marted’ 16 luglio 2002”, o qualcosa di simile. Ogni giorno, inserite più articoli, che hanno, ognuno, un proprio titolo. Se è così, avete anche un terzo livello, rappresentato dai titoli degli articoli.

Ora applicate questo schema utilizzano i tag <h1>, <h2>, <h3> . I lettori di schermo si affidano a questi tag per interpretare la struttura delle vostre pagine. Sì, le vostre pagine hanno una struttura, ma senza gli appropriati tag per le intestazioni, i lettori di schermo non la ritrovano. Tra un minuto, mostrerò come usare i CSS per far apparire, sempre allo stesso modo, le intestazione nei browser visuali, indipendentemente dal mostruoso tipo di <font> utilizzato.

A chi serve?

  1. A Jackie. Appena Jackie raggiunge la vostra pagina, JAWS annuncia che la pagina ha un certo numero di link ed un certo numero di intestazioni. Jackie può digitare INSERT+F6 per ascoltare tutte le intestazioni della pagina, oppure CTRL+INSERT+ENTER per navigare velocemente nella pagina, saltando alla successiva intestazione.
  2. A Michael. In Opera, può digitare S per saltare alla successiva intestazione, oppure W per tornare alla precedente.
  3. A Google. Google apprezza la pagina ben strutturata, e valuta di più le parole chiave che appaiono tra i tag delle intestazioni. (Dunque un’altra buona ragione per scrivere al meglio i titoli degli articoli)

Come fare: Movable Type

  • Definite gli stili per il logo del sito. Nel modello Stylesheet (styles-sites.css), aggiungete le seguenti linee:
h1, h2, h3 {
margin: 0;
padding: 0;
}
h1 {
font-size: 20px;
font-weight: normal;
}
/*/*/a{}
h1 {font-size: 100%}
/* */
  • Definite lo stile del logo con il tag <h1>. Nei 4 modelli principali (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), cercate questo:
<div id="banner">
<$MTBlogName$><br />

E sostituitelo con questo:

<div id="banner">
<h1><$MTBlogName$></h1>
  • Definite le date con i tag <h2>. Abbiamo già una classe definita per questa date, quindi non è necessario cambiare nulla; cambiamo solo il tag. Nei 4 principali modelli, cercate questo:
<div class="date">
<$MTEntryDate format="%B %d, %Y"$>
</div>

E sostituitelo con questo:

<h2class="date">
<$MTEntryDate format="%B %d, %Y"$>
</h2>
  • Definite i titoli degli articoli con il tag <h3>. Di nuovo, cambieremo solo il tag, non il foglio di stile. Nei 4 principali modelli, cercate questo:

    <span class="title"><$MTEntryTitle$></span>

    E sostituitelo con questo:

    <h3class="title"><$MTEntryTitle$></h3>

Come fare: Radio

  1. h2 {“ nel modello di Home Page. Se trovate questa regola, rimuovetela; non viene utilizzata da nessuna parte, e ci servirà a nostro modo:

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
}

  • Bene, ora aggiungete questi stili, non importa dove,  nella sezione <style> del modello di Home Page:
h1, h2 {
margin: 0;
padding: 0;
}
h1 {font-size: 24px}
h2 {font-size: 13px}
/*/*/a{}
h1 {
font-size: large;
voice-family: "\"}\"";
voice-family: inherit;
font-size: x-large;
}
html>body h1 {
font-size: x-large;
}
h2 {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body h2 {
font-size: small;
}
/* */

Notate che stiamo usando dimensioni di font relative nelle intestazioni per i browser che interpretano il dimensionamento relativo, e la dimensione assoluta per Netscape 4. Questa tecnica dovrebbe esservi familiare; l’abbiamo utilizzata infatti ieri.

  • Definite l’intestazione per il nome del sito. Nel modello di Home Page, cercate “<%siteName%>” ed individuate questa linea:

<font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

Cambiatela così:

<h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

  • Definite l’intestazione per le date. Nel modello Day , cercate “<%longDate%>” ed individuate questa linea:

<b><%longDate%></b>

Cambiatela così:

<h2><%longDate%></h2>

Approfondimenti

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Franco Carcillo
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'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni