CAPITOLO 2 Fogli di stile - e-Lite

Transcript

Sommario
SOMMARIO
INTRODUZIONE ________________________________________________________ 4
CAPITOLO 1____________________________________________________________ 5
Linee Guida _____________________________________________________________ 5
1.1 Linee guida CSS1 __________________________________________________________ 5
1.2 Linee guida CSS2 __________________________________________________________ 5
CAPITOLO 2____________________________________________________________ 7
Fogli di stile _____________________________________________________________ 7
2.1 La sintassi_________________________________________________________________ 7
2.2 Ereditarietà degli attributi ___________________________________________________ 7
2.3 Regole di “cascading” _______________________________________________________ 8
2.4 I tag <SPAN> e <DIV> ______________________________________________________ 9
2.5 I selettori__________________________________________________________________ 9
2.5.1 Tag HTML ______________________________________________________________ 9
2.5.2 Classi __________________________________________________________________ 10
2.5.3 Identificatori ____________________________________________________________ 11
2.5.4 Pseudo-classi e Pseudo-elementi ____________________________________________ 11
2.5.5 Selettori in cascata _______________________________________________________ 12
2.5.6 Raggruppamento ________________________________________________________ 12
2.6 Le proprietà ______________________________________________________________ 13
2.6.1 Lunghezze, percentuali, colori, url __________________________________________ 13
2.6.2 Font ___________________________________________________________________ 15
2.6.3 Colore e sfondo __________________________________________________________ 17
2.6.4 Testo __________________________________________________________________ 18
2.6.5 Box model ______________________________________________________________ 21
2.6.6 Classificazione___________________________________________________________ 27
2.7 Associare i fogli di stile ai documenti (X)HTML ________________________________ 28
2.7.1 Fogli di stile esterni_______________________________________________________ 29
2.7.2 Fogli di stile incorporati___________________________________________________ 29
2.7.3 La regola @import _______________________________________________________ 29
2.7.4 CSS in linea_____________________________________________________________ 29
Salvatore Sole
1
Sommario
CAPITOLO 3___________________________________________________________ 31
Tecniche per l’utilizzo dei CSS ai fini dell’accessibilità _________________________ 31
3.1 Linee guida per l’accessibilità ai contenuti del Web _____________________________ 31
3.1.1 Fornire alternative equivalenti al contenuto audio e visivo ______________________ 31
3.1.2
Non fare affidamento solo sul colore ________________________________________ 31
3.1.3
Usare marcatori e fogli di stile e farlo in modo appropriato _____________________ 32
3.1.4
Chiarire l’uso di linguaggi naturali _________________________________________ 32
3.1.5
Creare tabelle che si trasformino in maniera elegante _________________________ 32
3.1.6 Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in
maniera elegante ______________________________________________________________ 32
3.1.7 Assicurarsi che l’utente possa tenere sotto controllo i cambiamenti di contenuto nel
corso del tempo _______________________________________________________________ 33
3.1.8
Assicurare l’accessibilità diretta delle interfacce utente incorporate______________ 33
3.1.9
Progettare per garantire l’indipendenza da dispositivo ________________________ 33
3.1.10
Usare soluzioni provvisorie_______________________________________________ 34
3.1.11
Usare le tecnologie e le raccomandazioni del W3C ___________________________ 34
3.1.12
Fornire informazione per la contestualizzazione e l’orientamento ______________ 34
3.1.13
Fornire chiari meccanismi di navigazione __________________________________ 35
3.1.14
Assicurarsi che i documenti siano chiari e semplici ___________________________ 35
3.2 Tecniche CSS per l’accessibilità ai contenuti del Web____________________________ 35
3.2.1 Ridurre la manutenzione ed accrescere la coerenza ____________________________ 35
3.2.1 L’utente ha la precedenza sugli stili _________________________________________ 35
3.2.2 Unità di misura __________________________________________________________ 37
3.2.3 Contenuto generato ______________________________________________________ 38
3.2.4 Font ___________________________________________________________________ 39
3.2.5 Effetti di stile per il testo __________________________________________________ 40
3.2.6 Testo al posto di immagini _________________________________________________ 41
3.2.7 Formattazione e posizione del testo _________________________________________ 41
3.2.8 Tabelle _________________________________________________________________ 42
3.2.9 Colori __________________________________________________________________ 44
3.2.9.1 Contrasto di colore _____________________________________________________ 44
3.2.9.2 Assicurarsi che l’informazione non sia convogliata solo dal colore ______________ 45
3.2.10 Fornire indicazioni contestuali nelle liste HTML_____________________________ 46
3.2.11
Configurazione, posizionamento, scalamento ed allineamento __________________ 47
3.2.12
Immagini e distanziatori _________________________________________________ 48
3.2.13 Righe e bordi __________________________________________________________ 49
Salvatore Sole
2
Sommario
3.2.14 Uso del foglio di stile per il posizionamento e uso della marcatura per trasformare
finemente ____________________________________________________________________ 50
3.2.15 Creare movimento con fogli di stile e script__________________________________ 54
3.2.16 Fogli di stile a cascata per sintetizzatori vocali _______________________________ 54
3.2.17 Accesso a rappresentazioni alternative del contenuto__________________________ 55
3.2.18 Media type_____________________________________________________________ 56
3.2.19 Retrocompatibilità ______________________________________________________ 57
CAPITOLO 4___________________________________________________________ 59
Analisi dei principali browser ______________________________________________ 59
4.1 Opera 6.01 _______________________________________________________________ 59
4.2 Netscape 7.0/Mozilla 1.1 ____________________________________________________ 60
4.3
Ms Internet Explorer 6.0 ___________________________________________________ 60
4.4 Principali differenze _______________________________________________________ 61
CAPITOLO 5___________________________________________________________ 62
Regole pratiche _________________________________________________________ 62
CAPITOLO 6___________________________________________________________ 73
Esempio _______________________________________________________________ 73
CONCLUSIONI ________________________________________________________ 78
BIBLIOGRAFIA________________________________________________________ 79
Appendice A____________________________________________________________ 80
Salvatore Sole
3
Introduzione
INTRODUZIONE
Lo scopo di questa monografia è la definizione teorica delle tecniche relative
all’utilizzo dei fogli di stile a cascata (CSS) in sede progettuale, tecniche orientate ad
incrementare l’accessibilità del sito web in base alle funzionalità supportate dai browser.
Rendere un sito accessibile significa consentire a tutte le tipologie di utenti la libera
fruizione di internet. Attualmente l’accessibilità dei siti web è bassa e pressoché ignorata in
fase di progettazione, per imperizia e pigrizia di molti webmaster. Tra essi domina infatti la
convinzione che lo sviluppo dell’accessibilità limiti fortemente l’estetica dei siti con esiti
negativi sulla frequentazione dei medesimi. Ne consegue che varie tipologie di utenti, a
prescindere dalla loro consistenza numerica, restano aprioristicamente estromesse
dall’accesso al web.
Lo strumento definito dal World Wide Web Consortium (W3C) per realizzare
l’aspetto di una pagina web sono i CSS. Anteriormente all’introduzione delle tecniche CSS il
layout veniva realizzato mediante l’uso di tag HTML, strumento caratterizzato da possibilità
alquanto limitate, cui si sopperiva attraverso un utilizzo scorretto delle tabelle.
Inizialmente un grosso limite alla diffusione dei fogli di stile a cascata era lo scarso
supporto offerto dai browser. Oggi tutti i browser supportano più o meno bene i CSS, perciò il
mancato utilizzo da parte dei progettisti non può trovare giustificazioni a fronte dei vantaggi
che essi offrono.
L’utilizzo di uno strumento molto potente come i CSS consente a chiunque di poter
visitare la rete. Sino all’introduzione delle tecniche CSS il layout ha rappresentato il fulcro del
modello progettuale dei siti internet. Ciò ha condotto all’utilizzo errato di istruzioni HTML
per scopi totalmente diversi dal fine per cui erano nate. È stato proprio lo scarto tra
l’originaria funzione di queste istruzioni e il loro differente impiego finale a determinare una
serie di problemi ad una non trascurabile fascia di utenza. Utenti dotati di browser datati,
utenti che soffrono di handicap visivi e che necessitano di screen reader o display braille,
oppure utenti che utilizzano computer palmari, non possono, secondo il modello menzionato,
comprendere il contenuto delle pagine.
Con i CSS è possibile effettuare una netta distinzione tra contenuto e layout. In questo
modo si ottengono due vantaggi significativi, uno per gli stessi progettisti, i quali avranno la
possibilità di realizzare siti accattivanti ed efficienti in modo semplice ed intuitivo, l’altro per
gli utenti, i quali potranno disporre di pagine caricate in modo più rapido, ma soprattutto,
grazie alla separazione tra forma e contenuti, di siti maggiormente accessibili.
Il presente lavoro è stato suddiviso in cinque capitoli: nel primo verranno esposte le
linee guida dettate dal W3C per i fogli di stile; nel successivo capitolo due si effettuerà una
panoramica sulle regole principali dei CSS.
Il terzo capitolo offre ai progettisti i metodi per rendere un sito accessibile mediante i
CSS. Si cercherà di esporre le tecniche standard per l’utilizzo dei fogli di stile seguendo le
regole sull’accessibilità esposte dal W3C, le Web Content Accessibility Guidelines (WCAG).
Nel quarto capitolo si effettua un’analisi di alcuni browser. Il supporto dei fogli di stile
non viene effettuato da tutti i browser allo stesso modo. Si cercherà di valutare quali tra le
numerose funzionalità verranno supportate, in che modo e sopratutto quali vantaggi offre un
browser rispetto ad un altro.
Nel quinto capitolo vengono esposte le tecniche che presiedono alla progettazione di
un sito.
Il sesto ed ultimo capitolo illustra le potenzialità pratiche e gli inconvenienti derivanti
dall’impiego dei CSS nella riprogettazione della home-page del sito di un noto provider.
Salvatore Sole
4
Cap. 1 – Linee guida
CAPITOLO 1
Linee Guida
Il presente capitolo, espone le linee guida formali proposte dal W3C per il corretto utilizzo dei
CSS. Esse sono delle regole alle quali un interprete dovrebbe uniformarsi. Queste
raccomandazioni non sono tuttavia normative, ma dovrebbero servire a creare, se
correttamente seguite, una sorta di punto di incontro tra utenti, autori e realizzatori.
1.1 Linee guida CSS1
Un interprete che utilizza i CSS1 per visualizzare i documenti è conforme alle specifiche
CSS1 se:
1. Analizza tutti i fogli di stile incontrati seguendo queste specifiche.
2. Seleziona le dichiarazioni secondo l’ordinamento a cascata.
3. Implementa le funzionalità del CSS1 nei limiti del mezzo di presentazione (ad
esempio, risorse limitate e limitata risoluzione).
4. Emette fogli di stile CSS1 validi.
Si dovrebbe inoltre:
1. Consentire agli utenti di avere scelte supplementari per la presentazione (ad esempio,
si possono offrire delle opzioni ai lettori con problemi visivi).
2. Consentire al lettore di specificare fogli di stile personali.
3. Permettere ai fogli di stile personali di essere abilitati e disabilitati.
1.2 Linee guida CSS2
I seguenti punti devono essere osservati da un interprete che voglia conformarsi alle
specifiche CSS2:
1. Uno o più media type CSS2 devono essere supportati.
2. Per ogni documento sorgente, deve cercare di caricare tutti i fogli di stile collegati che
sono adatti ai media type supportati. Se non è in grado di farlo (ad esempio, a causa di
errori della rete), deve visualizzare il documento facendo uso di quelli che riesce a
caricare.
3. Deve analizzare i fogli di stile secondo queste specifiche. In particolare, deve
riconoscere tutti gli at-rules, i blocchi, le dichiarazioni e i selettori. Se un interprete
incontra un attributo che si applica ad un media type supportato, deve analizzare il
valore secondo la definizione dell’attributo. Questo vuol dire che l’user agent deve
accettare tutti i valori validi e deve ignorare dichiarazioni con valori non validi. L’user
agent deve ignorare regole che vengono applicate a media type non supportati.
Salvatore Sole
5
Cap. 1 – Linee guida
4. Per ciascun elemento in un documento ad albero, ad ogni attributo deve essere
applicato un valore secondo la definizione degli attributi e nel rispetto delle regole di
cascata ed ereditarietà.
5. Se al documento sorgente sono collegati fogli di stile alternativi, l’interprete deve
consentire all’utente di selezionarne uno ed applicare quello selezionato.
Non è detto che tutti i punti debbano essere osservati da un user agent, tuttavia:
1. Un user agent che accetta fogli di stile deve rispettare i punti dall’uno al tre.
2. Per l’emissione di fogli di stile validi (ossia in accordo con la sintassi dei CSS) è
richiesto solo uno strumento di authoring, che sia in grado di produrre documenti e di
collegarli ai fogli di stile.
3. Un user agent che trasforma un documento con il foglio di stile associato deve
rispettare i punti dall’uno al cinque e trasformare il documento secondo i peculiari
requisiti dei media espressi in queste specifiche. Quando necessario ad un interprete, i
valori possono essere approssimati.
4. L’incapacità di un user agent di implementare parte di queste specifiche, a causa di
limitazioni di un particolare dispositivo (ad esempio, un user agent non può
trasformare i colori in un monitor o in una pagina monocromatica), non deve implicare
non conformità.
5. Lo user agent deve permettere all’utente di specificare fogli di stile personali.
Salvatore Sole
6
Cap. 2 – Fogli di stile
CAPITOLO 2
Fogli di stile
Il presente capitolo espone le principali regole sintattiche dei CSS. La realizzazione di
questo capitolo si è resa necessaria in quanto tali regole, verranno abbondantemente citate ed
utilizzate nei capitoli che verranno. Tuttavia, non trattandosi di un manuale vero e proprio, gli
argomenti sono stati trattati in maniera essenziale, ma comunque sufficiente a far
comprendere, anche tramite l’uso di esempi, il funzionamento dei costrutti dei CSS.
2.1 La sintassi
Le regole sintattiche devono essere specificate come segue:
selettore { proprietà: valore }
Il selettore è un nome dato ad una parte di un documento sulla quale si vuole applicare
un determinato stile. Tale stile viene assegnato attraverso le proprietà, che a loro volta devono
avere un valore associato.
Se ad un selettore si volessero assegnare più attributi, essi dovranno essere separati da
un punto e virgola:
selettore { proprietà1: valore1; proprietà2: valore2 }
Per rendere il codice più leggibile è possibile andare a capo:
selettore {
proprietà1: valore1;
}
Nel codice seguente si definiscono il colore (tramite l’attributo ‘color’)
dimensioni del testo (con l’attributo ‘font-size’) per i selettori H1 e H2:
e le
h1 { font-size: 25px; color: #660; }
h2 { font-size: 15px; color: #000; }
2.2 Ereditarietà degli attributi
I documenti hanno un’organizzazione ad albero. Ciascun elemento di questo albero, ad
eccezione dell’elemento radice, ha esattamente un elemento padre.
Salvatore Sole
7
Alcuni valori del documento ad albero vengono ereditati dagli elementi figli. Si
supponga di avere un elemento H1 con al suo interno un elemento enfatizzante ( <EM> ):
CSS
<H1>The headline <EM>is</EM> important!</H1>
Se al testo enfatizzato “is” non è stato assegnato alcun colore, esso erediterà il colore
dell’elemento padre, così, se all’elemento padre era stato assegnato il colore blu, anche
l’elemento figlio avrà questo colore.
Per assegnare uno stile di “default” al documento, il progettista potrebbe decidere di
dare un determinato valore all’attributo, alla radice del documento. Gli elementi <BODY> e
<HTML> potrebbero servire a questa funzione, ad esempio si consideri il seguente foglio di
stile:
CSS
BODY { font-size: 10pt }
H1 { font-size: 120% }
e il seguente frammento di documento:
(X)HTML
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
L’elemento <H1> avrà la dimensione del font pari al 120% di quella dell’elemento
padre. Dal canto suo <EM> erediterà la dimensione del font di 12pt, la stessa dell’elemento
padre.
2.3 Regole di “cascading”
I fogli di stile possono avere diverse origini. Possono essere stati realizzati dal
progettista, nel qual caso essi sono o all’interno del documento o all’esterno; possono essere
fogli di stile dell’utente; infine gli user agent possono avere fogli di stile di default.
Le regole utilizzate dallo user agent per il caricamento del foglio di stile più
opportuno, sono:
•
•
•
Le dichiarazioni vengono valutate per peso e origine; generalmente i fogli di stile degli
autori hanno la precedenza sui fogli di stile di default, tuttavia, i fogli di stile degli
utenti che abbiano la clausola ‘!important’, hanno la precedenza sui fogli di stile dei
progettisti.
Il secondo modo avviene in base alla specificità dei selettori: selettori più specifici
possono avere la precedenza su selettori dal carattere più generale.
Infine, si valuta l’ordine con il quale le regole sono specificate: se due regole hanno lo
stesso peso, la stessa origine e la stessa specificità, l’ultimo ad essere stato specificato
ha la meglio.
Salvatore Sole
8
2.4 I tag <SPAN> e <DIV>
Gli elementi <SPAN> e <DIV>, insieme con gli attributi ‘id’ e ‘class’, offrono
un meccanismo generico per aggiungere struttura ai documenti. Questi elementi definiscono il
contenuto o come in riga (<SPAN>) o come a livello di blocco (<DIV>), ma non impongono
alcun altro idioma presentazionale sul contenuto. Pertanto, gli autori possono usare questi
elementi in congiunzione con i fogli di stile, con l'attributo lang, etc., per adattare l'HTML ai
propri bisogni ed ai propri gusti.
Nel seguente esempio, le informazioni relative alla classe “info”, verrebbero
visualizzate in verde, quelle relative alla classe “avviso”, visualizzate in giallo e quelle
riguardanti la classe “errore”, in rosso.
(X)HTML
<p><SPAN id="msg1" class="info" lang="en">Variable declared
twice</SPAN></p>
<p><SPAN id="msg2" class="avviso" lang="en">Undeclared
variable</SPAN></p>
<p><SPAN id="msg3" class="errore" lang="en">Bad syntax for variable
name</SPAN></p>
CSS
SPAN.info { color: green }
SPAN.avviso { color: yellow }
SPAN.errore { color: red }
2.5 I selettori
Con il selettore è possibile creare una corrispondenza tra il codice (X)HTML ed i CSS.
Il selettore consente, infatti, di specificare a quale settore del documento la regola di stile
debba essere applicata. Nel codice CSS la regola verrà applicata richiamando il nome del
selettore.
Esistono selettori di diverso tipo, essi sono:
•
•
•
•
•
•
Tag HTML
Classi
Identificatori
Pseudo-classi e Pseudo-elementi
Selettori in cascata
Raggruppamento
2.5.1 Tag HTML
Ogni tag HTML è un selettore. Ad esempio:
(X)HTML
p {
font-family: “Times New Roman”, sans-serif;
Salvatore Sole
9
font-size: 1em;
text-indent: 2em; }
Il codice sopra riportato specifica al browser che il testo di ogni paragrafo deve essere
scritto utilizzando il font “Times New Roman” o in alternativa uno della famiglia sans-serif,
avere la dimensione di 1em e il capoverso con un rientro di due caratteri.
2.5.2
Classi
Per comodità è possibile associare ad un tag HTML diversi stili, ciò è reso possibile
dalle classi.
CSS
p.classe1 { font-family: Verdana; }
p.classe2 { font-family: Arial; }
Le due classi classe1 e classe2 vengono specificate separando il nome del tag e il
nome della classe con un punto. Nel codice HTML si specifica la classe con l'attributo ‘class’:
(X)HTML
<p class="classe1">...</p>
<p class="classe2">...</p>
Nel precedente esempio si sono utilizzate due classi diverse associate allo stesso tag
<P>. Analogamente si possono utilizzare gli stessi nomi per classi associate a tag diversi.
CSS
p.classe { font-family: Verdana; }
span.classe { font-family: Courier; }
(X)HTML
<p class="classe">Testo scritto con carattere Verdana</p>
<p>Testo Verdana (<span class="classe">testo Courier</span>) testo
Verdana</p>
Se si vuole consentire ad una classe di essere associata a più selettori è sufficiente non
indicare alcun tag.
CSS
.classe { font-size: 2em }
(X)HTML
<p class="classe"> Testo di dimensione 2em </p>
<div class="classe"> Testo di dimensione 2em </div>
Ad ogni selettore può essere associata soltanto una classe.
Salvatore Sole
10
2.5.3 Identificatori
Simili alle classi sono gli identificatori. In questi, però, al contrario di ciò che avveniva
con le classi, non si possono accorpare diverse entità, ma si possono definire solamente
elementi che non si ripetono all'interno del documento.
Il nome dell’ identificatore deve essere preceduto non più dal punto ma dal carattere
‘#'. Ad esempio:
CSS
#copyright { clear: left; color: #FFF }
L'identificatore verrà specificato nel codice HTML attraverso l'attributo ID:
(X)HTML
<div id="copyright"> Copyright © 2003 Salvatore Sole </div>
Non è possibile avere due tag associati allo stesso identificatore, così come non è
possibile avere due tag con lo stesso valore dell’attributo ‘id’.
Esempio errato:
(X)HTML
<div id="copyright"> ... </div>
<div id="copyright"> ... </div>
2.5.4
Pseudo-classi e Pseudo-elementi
Le pseudo-classi e gli pseudo-elementi sono classi ed elementi particolari. Essi non
hanno bisogno che venga specificato nulla nel codice HTML, basta specificare le regole
relative ad essi nel foglio di stile, il browser lo riconoscerà automaticamente. Le pseudo-classi
vengono utilizzate per creare distinzioni fra elementi, ad esempio è possibile effettuare una
distinzione tra link visitati e link attivi, mentre gli pseudo-elementi si riferiscono a sottoparti
di elementi. Il modo di rappresentarli è il seguente:
selettore:pseudoClasse { proprietà: valore }
selettore:pseudoElemento { proprietà: valore }
L’esempio che segue si riferisce alle pseudo-classi:
CSS
A:link { color: #00F; }
A:visited { color: 800080; }
Salvatore Sole
11
Il seguente esempio mostrerà il funzionamento degli pseudo-elementi: viene utilizzato
lo pseudo-elemento first-letter, che seleziona la prima lettera del testo del selettore a cui è
associato, in questo caso il paragrafo di classe paragrafo-iniziale.
CSS
p#paragrafo-iniziale:first-letter {
font: 1.2em italic georgia;
float: left;
margin: -5px 3px 0 0; }
2.5.5 Selettori in cascata
I selettori possono essere utilizzati in svariati modi, uno fra questi è quello di
utilizzarli in cascata, si deve per far questo utilizzare la sintassi seguente:
selettore1 selettore2 { proprietà: valore }
In sostanza la regola verrà applicata al selettore2 se questo è contenuto dal selettore1.
Ad esempio:
CSS
p i { font-style: italic; }
(X)HTML
<p>testo normale <i>testo corsivo</i> testo normale</p>
2.5.6
Raggruppamento
Qualora più selettori dovessero rispettare le stesse regole, è possibile raggrupparli
come segue:
h1, h2, h3, h4, h5, h6 { font-family: sans-serif }
Che è un modo più compatto per rappresentare il codice seguente:
h1
h2
h3
h4
h5
h6
{
{
{
{
{
{
font-family:
font-family:
font-family:
font-family:
font-family:
font-family:
Salvatore Sole
sans-serif
sans-serif
sans-serif
sans-serif
sans-serif
sans-serif
}
}
}
}
}
}
12
2.6 Le proprietà
In questo paragrafo saranno brevemente illustrate le proprietà dei CSS.
Le proprietà dei CSS possono essere raggruppate in sei categorie:
Lunghezze,
percentuali,
colori, url
Lunghezze
Percentuali
Colori
Url
Font
Testo
Font-family
Font-style
Font-variant
Font-weight
Font-size
Font
Word-spacing
Letter-spacing
Line-height
Text-indentation
Vertical-align
Text-decoration
Text-transform
Text-align
White-space
Colore e
Sfondo
Box
model
Color
Background
Margin
Padding
Border
Width
Height
Float
Clear
Classificazione
Display
List-style
2.6.1 Lunghezze, percentuali, colori, url
2.6.1.1
Lunghezze
Le lunghezze sono costituite da un numero (positivo o negativo) subito seguito
dall'unità di misura indicata con due lettere. Non è consentito inserire degli spazi fra il numero
e l'unità di misura.
Le lunghezze possono essere relative o assolute. Le unità relative forniscono una
lunghezza relativamente ad un'altra lunghezza e sono dunque preferibili poiché maggiormente
adattabili ai diversi media. Le unità di misura relativa sono:
•
•
em: l'altezza dei font dell'elemento.
px: pixel, la loro dimensione dipende dal dispositivo usato per la visione delle pagine
web.
Esempio:
.classeA { font-size: 10px }
.classeA { line-height: 1.50em }
Le lunghezze assolute dovrebbero essere utilizzate esclusivamente quando sono note
le proprietà fisiche dei media (ad esempio la dimensione dei fogli di una stampante).
Le unità assolute sono cinque:
•
•
•
•
in: inch (pollici -- 1in=2.54cm)
cm: centimetri
mm: millimetri
pt: punti (1pt=1/72in)
Salvatore Sole
13
•
pc: picas (1pc=12pt)
2.6.1.2
Percentuali
Le percentuali (positive o negative) sono relative alla dimensione di altri elementi. La
percentuale viene applicata al valore dell’elemento padre.
Esempio:
CSS
p { font-size: 80% }
/* l’ 80% della dimensione dei font dell'elemento parent */
2.6.1.3
Colori
Un colore è costituito da una keyword o da un codice RGB (Red Green Blue - Rosso,
Verde, Blu).
Le 16 keyword sono: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, e yellow.
I valori RGB possono essere forniti attraverso quattro sintassi:
•
•
•
•
#rrggbb (ad esempio #CC6600)
#rgb (ad esempio #C60 (#abc = #aabbcc))
rgb(r,g,b): dove r,g,b possono variare da 0 a 255 (ad esempio rgb(204,102,0))
rgb(r%,g%,b%): dove r,g,b possono variare da 0.0 a 100.0 (ad esempio
rgb(80%,40%,0))
La sintassi #rgb è molto utile poiché facilita l'indicazione dei colori della palette "web
safe" (costituita da 216 particolari colori che sono universalmente riconosciuti da tutti i
browser e dai sistemi operativi).
2.6.1.4
URL
Un valore URL viene fornito attraverso la seguente sintassi: url(indirizzo); l’indirizzo
può essere riportato fra apici o virgolette.
Esempio:
body
body
body
body
{
{
{
{
background:
background:
background:
background:
Salvatore Sole
url(immagini/sfondo.gif) }
url("immagini/sfondo.gif") }
url('immagini /sfondo.gif') }
url(../../immagini/sfondo.gif) }
14
2.6.2
Font
2.6.2.1
Font-family
Consente di specificare la famiglia del font. La sintassi è questa: i valori che si
possono indicare sono o il nome del font oppure un font generico.
Il nome del font può essere un qualsiasi nome di font, mentre per quel che concerne i
font generici è possibile scegliere tra cinque tipi diversi, essi sono:
•
•
•
•
•
serif
sans-serif
monospace
cursive
fantasy
Esempio:
p { font-family: verdana, sans-serif }
Il font adottato sarà il primo disponibile partendo da sinistra. E' consigliabile
specificare sempre un font generico che verrà applicato qualora nessuno dei font elencati
fosse disponibile. Font con nomi composti da due o più parole vanno indicati fra virgolette: ad
esempio "Times New Roman".
2.6.2.2
Font-style
Permette di stabilire lo stile del font. Si hanno tre valori possibili:
•
•
•
normal
italic
oblique
Esempio:
quote { font-style: italic }
Lo stile adottato sarà il primo disponibile partendo da sinistra.
2.6.2.3
Font-variant
Questa proprietà assegna al font uno stile tutto maiuscolo. I valori che si possono
assegnare sono due:
•
•
normal
small-caps
Salvatore Sole
15
Esempio:
.maiuscolo { font-variant: small-caps }
2.6.2.4
Font-weight
L'attributo font-weight stabilisce lo spessore del font. I valori assegnabili sono diversi
e possono essere o valori numerici o parole chiave:
•
•
•
•
•
100, 200, 300 fino a 900.
normal. Equivale al valore 400.
bold. Equivale al valore 700.
bolder. Specifica il peso successivo assegnato ad un font. Ciò significa che se il valore
dell’elemento parent è pari a ‘500’, il valore dell’elemento a cui è assegnato il valore
‘bolder’ è pari a ‘600’. Se non esiste tale peso viene selezionato il valore numerico
successivo, a meno che il valore ereditato non fosse ‘900’, in tal caso il peso
rimarrebbe invariato.
lighter. Specifica il peso precedente assegnato ad un font. Se non esiste tale peso viene
selezionato il primo valore numerico a precederlo, a meno che il valore ereditato non
fosse ‘100’, nel qual caso il peso rimarrebbe invariato.
Esempio:
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 se disponibile */
2.6.2.5
Font-size
Indica la dimensione del font. Abbiamo quattro modi per indicare la dimensione dei
font:
•
•
•
•
dimensione assoluta
dimensione relativa
lunghezza
percentuale
Per il dimensionamento assoluto abbiamo diversi valori:
•
•
•
•
•
xx-small
x-small
small
medium
large
Salvatore Sole
16
•
•
x-large
xx-large
Il dimensionamento relativo invece si effettua attraverso due valori:
•
•
larger
smaller
Esempio:
p { font-size: 0.80em }
2.6.2.6
Font
L’attributo “breve” ‘font’ consente di fissare contemporaneamente il valore di 'fontstyle', 'font-variant', 'font-weight', 'font-size', 'line-height' e 'font-family'.
Esempio:
p.paragrafo-speciale {
font: bold 1.00em/1.50em verdana, helvetica, sans-serif }
2.6.3 Colore e sfondo
2.6.3.1
Color
Questo attributo ha la funzione di definire il colore di un selettore.
Esempio:
a { color: #F00 }
em { color: red }
2.6.3.2
Background
Questa proprietà consente di definire diversi valori per lo sfondo, in particolare:
•
•
•
•
•
colore
immagini
ripetizione
scrolling
posizione
Per i valori del colore e dell’immagini si vedano rispettivamente le sezioni 1.3 e 1.4.
Salvatore Sole
17
Per quel che riguarda la ripetizione dell’immagine l’attributo può assumere quattro
valori:
•
•
•
•
repeat
repeat-x ( l’immagine viene replicata in orizzontale )
repeat-y ( l’immagine è ripetuta in verticale )
no-repeat
Con lo scrolling l’immagine si può muovere con il testo oppure rimanere fissa. A
seconda di quale soluzione viene adottata si possono avere due valori:
•
•
scroll
fixed
La posizione può essere espressa attraverso valori percentuali, lunghezze e con le
seguenti parole chiave:
•
•
•
•
•
top
center
bottom
left
right
Qualunque sia il valore utilizzato ci si riferisce sempre all’angolo superiore sinistro.
Esempio:
body { background:#FFFFFF url(/images/sfondo.gif) no-repeat fixed
top right; }
Come accade per altre proprietà, background è una proprietà “breve”. Esistono infatti
delle proprietà che consentono di specificare ciascuna delle singole caratteristiche in
precedenza elencate, esse sono:
•
•
•
•
•
background-color (per il colore)
background-image (per l’immagine)
background-repeat (per la ripetizione)
background-attachment (per lo scrolling)
background-position (per il posizionamento)
2.6.4 Testo
2.6.4.1
Word-spacing
La proprietà ‘word-spacing’ permette di impostare lo spazio tra le parole. Tale spazio
può essere o ‘normal’ o una lunghezza. Se viene specificata una lunghezza, questa va ad
aggiungersi o a sottrarsi alla spaziatura predefinita.
Salvatore Sole
18
Esempio:
.parole-distanziate { word-spacing: 1.00em }
.parole-ravvicinate { word-spacing: -0.20em }
2.6.4.2
Letter-spacing
L’attributo ‘letter-spacing’ stabilisce la distanza tra un carattere ed un altro all’interno
di un documento. Due i valori possibili: ‘normal’ oppure una lunghezza.
Esempio:
.lettere-distanziate { letter-spacing: 0.50em }
.lettere-ravvicinate { letter-spacing: -0.15em }
2.6.4.3
Line-height
Definisce la distanza verticale tra le varie linee di testo. Tre i valori possibili: ‘normal’,
lunghezze e valori percentuali.
Esempio:
.interlinea-ridotta { line-height: 100% }
2.6.4.4
Text-indent
La proprietà text-indent permette di impostare il rientro del capoverso. Può assumere
come valori o lunghezze o percentuali.
Esempio:
p { text-indentation: 2em; }
2.6.4.5
Vertical-align
La proprietà vertical-align permette di modificare il posizionamento verticale degli
elementi inline. La proprietà vertical-align è utile per gestire l'allineamento delle immagini
come pure per creare apici o pedici. I valori assunti sono i seguenti:
•
•
•
baseline (allinea la linea base del box dell’elemento figlio con la linea base del box
dell’elemento parent)
sub (l’elemento si trova leggermente al di sotto della base dell’elemento padre, ad
esempio un pedice)
super (l’elemento si trova leggermente al di sopra dell’elemento padre, ad esempio un
apice)
Salvatore Sole
19
•
•
•
•
•
top (l’elemento viene allineato alla parte alta dell’immagine)
text-top (la parte più alta dell’elemento è allineata alla parte più elevata del testo nella
linea)
middle (allinea la metà di un elemento, tipicamente un’immagine, con la metà
dell’altezza dell’elemento parent)
bottom (l’elemento viene allineato alla parte bassa dell’immagine)
text-bottom (allinea la base dell’elemento figlio con la base del testo dell’elemento
parent)
Possono essere utilizzati anche valori percentuali.
Esempio:
img { vertical-align: top }
.apice { vertical-align: super }
.pedice { vertical-align: sub }
2.6.4.6
Text-decoration
Questo attributo permette di arricchire il testo con effetti di vario genere. Può
assumere diversi valori:
•
•
•
•
•
none
underline (sottolinea il testo)
overline (traccia una linea sopra il testo)
line-through (traccia una linea attraverso il testo)
blink (permette il lampeggiamento del testo)
Esempio:
#barra-di-navigazione A { text-decoration: none }
/* link non sottolineato */
2.6.4.7
Text-transform
Questo attributo ci permette di manipolare le lettere maiuscole e minuscole del testo
grazie a tre opzioni:
•
•
•
•
capitalize (stampa il primo carattere di ogni parola in maiuscolo).
uppercase (rende maiuscole tutte le lettere del testo).
lowercase (stampa i caratteri di ciascuna parola in minuscolo).
none (elimina eventuali trasformazioni del testo).
Esempio:
.tutto-maiuscolo { text-transform: uppercase }
Salvatore Sole
20
2.6.4.8
Text-align
La proprietà text-align permette l'allineamento del testo:
•
•
•
•
left: allineamento a sinistra.
right: allineamento a destra.
center: testo centrato.
justify: testo giustificato (il testo occupa tutta la larghezza disponibile).
Esempio:
h1.titolo { text-align: center }
p.articolo { text-align: justify }
2.6.4.9
White-space
La proprietà white-space specifica come interpretare gli spazi fra gli elementi:
•
•
•
normal: due o più spazi bianchi collassano in un unico spazio.
pre: evita che gli User Agent facciano collassare sequenze di spazi bianchi. Le linee di
testo vengono interrotte solo in corrispondenza delle interruzioni di linea del codice
(X)HTML.
nowrap: due o più spazi collassano in un unico spazio (come per il valore normal), ma
le linee di testo vengono interrotte solo in corrispondenza delle interruzioni di linea del
codice (X)HTML (come per il valore pre).
Esempio:
p.testo-formattato { white-space: pre }
p.nowrap { white-space: nowrap }
2.6.5
Box model
Con il termine box, si intendono quelle aree rettangolari generate dagli elementi del
documento. Ciascun box è costituito da un’area che contiene i contenuti (un testo,
un’immagine) e da delle aree che lo circondano. Gli elementi vengono creati dai CSS
all’interno di questi box. Ogni box ha delle proprietà che possono essere raggruppate in tre
categorie:
•
•
•
Le proprietà dei margini che assegnano un bordo ai quattro lati del box.
Le proprietà di riempimento che assegnano uno spazio interno che separa il contenuto dai
margini.
Le proprietà dei bordi che definiscono le linee grafiche intorno al box.
Salvatore Sole
21
Il seguente diagramma mostra come questi settori sono collegati.
2.6.5.1
Margin
La proprietà margin permette di impostare il margine di un elemento. Possono essere
utilizzate lunghezze, valori percentuali o il valore ‘auto’.
Specificando un solo valore, si impostano tutti e quattro i margini al valore specificato,
mentre specificando due valori, si impostano il margine superiore e inferiore al primo valore
indicato, il margine destro e sinistro al secondo valore indicato. Specificando quattro valori, si
impostano il margine superiore, quello destro, quello inferiore e quello sinistro
rispettivamente (in senso orario a partire dal margine superiore).
Esempio:
body { margin: 10px } /* tutti i margini sono impostati a 10px */
p { margin: 10px 5px }
/* margini superiore e inferiore sono impostati a 10px mentre i
margini destro e sinistro a 5px */
BODY { margin: 10px 10px 10px 10px }/* vengono impostati i margini
superiore, destro, inferiore, sinistro */
E' possibile impostare i margini singolarmente attraverso le seguenti quattro proprietà:
•
•
•
•
margin-top
margin-right
margin-bottom
margin-left.
Ad esempio:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
Salvatore Sole
22
2.6.5.2
Padding
La proprietà padding permette di impostare la distanza tra i lati del box e gli elementi
che si trovano al suo interno. Può essere impostato con lunghezze, valori percentuali o con il
valore ‘auto’, ossia sarà lo stesso user agent ad assegnare il valore più appropriato.
Esempio:
body { padding: 10px } /* padding a 10px su ogni lato*/
H1 { padding: 1em 2em; }
.esempio { padding: 1px 2px 3px 4px }
Specificando un solo valore, si imposta il padding di tutti e quattro i lati al valore
specificato. Specificando due valori, si imposta il padding dei lati superiore e inferiore al
primo valore indicato, il padding dei lati destro e sinistro al secondo valore indicato.
Specificando quattro valori, si imposta il il padding del lato superiore, del lato destro, del lato
inferiore e del lato sinistro rispettivamente (in senso orario a partire dal margine superiore).
E' possibile impostare il padding di ogni singolo lato attraverso le seguenti quattro
proprietà:
•
•
•
•
padding-top
padding-right
padding-bottom
padding-left.
Ad esempio:
BODY {
padding-top: 10pt;
padding-right: 10px;
padding-bottom: 110%;
padding-left: 2in
}
2.6.5.3
Border
La proprietà border permette di impostare il bordo di un elemento. Possono essere
impostati lo spessore, lo stile e il colore.
Lo spessore può essere impostato o dando la dimensione con una lunghezza o con i
seguenti valori:
•
•
•
thin (sottile)
medium (medio)
thick (spesso)
Salvatore Sole
23
Lo stile può essere definito con le seguenti parole chiave:
•
•
•
•
•
•
•
•
•
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Per rendere il bordo visibile è necessario specificarne lo stile. Se lo stile è impostato su
none il bordo non è visibile (utile per le immagini).
Esempio:
.box1 { border: thick solid blue }
.box2 { border: 2px dotted red }
.box3 { border: thin dashed #000000 }
.bottone { border: 5px outset #666 }
Tramite la proprietà border è possibile specificare solo il bordo di tutti e quatto i lati,
qualora si volessero specificare i lati singolarmente è possibile utilizzare le seguenti proprietà:
•
•
•
•
border- top
border-right
border-bottom
border-left
che consentono, attraverso la stessa sintassi di border, di gestire i lati singolarmente.
Esempio:
.box {
border-top: 1px dashed red;
border-right: 2px dotted blue;
border-bottom: 3px double green;
border-left: 4px solid #000;
}
In alternativa è possibile specificare singolarmente spessore, stile e colore del bordo
attraverso le seguenti proprietà:
•
•
•
border-width
border-color
border-style.
Salvatore Sole
24
Il seguente codice è equivalente a quello sopra riportato:
.box {
border-width: 1px 2px 3px 4px; /* top right bottom left */
border-style:dashed dotted double solid; /*top right bottom left*/
border-color: red blue green #000; /* top right bottom left */
}
Il bordo può essere aggiunto anche a parole del testo.
2.6.5.4
Width
La proprietà width permette di impostare la larghezza di un elemento. Si utilizzano
lunghezze, valori percentuali o il valore ‘auto’.
Esempio:
div.box { width: 70%; }
img.icona { width: 50px; }
Le percentuali sono calcolate in base alla larghezza dell'elemento parent. Oltre che per
la definizione dei box, la proprietà width può risultare utile nei form per impostare la
larghezza dei campi e dei pulsanti.
2.6.5.5
Height
La proprietà height permette di impostare l'altezza di un elemento. I valori possono
essere una lunghezza, una percentuale o il valore ‘auto’.
Esempio:
IMG.icon { height: 100px }
2.6.5.6
Float
La proprietà float permette di disporre il testo attorno ad un elemento. Questa proprietà
funziona come gli attibuti align="left" o align="right" per le immagini (attributi sconsigliati
dal W3C), ma funziona con ogni elemento, non solo con le immagini.
I valori possibili sono tre:
•
•
•
left
right
none
Salvatore Sole
25
Esempio:
img.figura { float: right; }
blockquote { float: left; }
2.6.5.7
Clear
La proprietà clear permette di specificare se l'elemento permette la presenza di
elementi floating ai suoi lati. Il valore specificato posiziona l'elemento al di sotto di eventuali
elementi fluttuanti posti sul lato specificato dal valore.
I valori possibili sono:
•
•
•
•
none
left
right
both
Esempio:
p.nofloat { clear: both; }
pre { clear: left; }
L’immagine seguente mostra il funzionamento degli attributi ‘float’ e ‘clear’.
Salvatore Sole
26
La figura è stata suddivisa in due parti: nella parte alta il box blu viene affiancato da
altri due box più piccoli e da un testo che lo avvolge. Nella parte bassa, invece, i due box
piccoli si trovano ancora di fianco al box blu, mentre il testo è allineato in basso a sinistra.
Il risultato nella parte alta della figura è stato ottenuto applicando alla classe “.boxblu”, l’attributo ‘float’ impostato al valore ‘left’, in questo modo:
CSS
.box-blu { ... float: left; ... }
Nella sezione in basso, invece, l’allineamento a sinistra è stato ripristinato con la
classe “.ripristino-float”, collocata nel documento sorgente prima del testo, annullando così
l’effetto di ‘float’. Il risultato è stato ottenuto tramite l’attributo ‘clear’ con il valore ‘left’.
(X)HTML
<div class=”ripristino-float”></div>
CSS
.ripristino-float { clear: left }
2.6.6 Classificazione
2.6.6.1
Display
La proprietà display permette di definire un elemento come elemento block-level,
elemento inline, elemento di lista. Consente di alterare la normale interpretazione dello user
agent.
I valori possibili di visualizzazione sono quattro:
•
•
•
•
block (trasforma l’elemento a cui viene applicato in un elemento di blocco. Elementi di
blocco sono ad esempio <P>, <FORM> e così via)
inline (l’elemento a cui si riferisce, diventa un elemento “inline”, come ad esempio
<IMG>)
list-item (l’elemento a cui si applica diventa elemento di lista)
none (non si ha alcuna trasformazione. Può essere usato per fare in modo che alcuni
elementi non vengano visualizzati, come nel caso degli “horizontal rule”)
Esempio:
img.esempio { display: block }
img.icona { display: inline }
img.contatore { display: none }
li { display: list-item }
2.6.6.2
List-style
La proprietà list-style consente di sostituire i punti per gli elenchi di HTML standard
con immagini in formato GIF. La proprietà list-style permette di definire come debbano
Salvatore Sole
27
essere rappresentate le liste, permettendo di specificare sia lo stile dei marcatori, sia
l'allineamento. Tramite il valore ‘url’ è possibile specificare un'immagine per i marcatori.
Il marcatore ha i seguenti valori:
•
•
•
•
disc ( ● )
circle ( ○ )
square ( ■ )
decimal ( 1, 2, 3, … )
•
•
•
•
•
lower-roman ( i, ii, iii, … )
upper-roman ( I, II, III, … )
lower-alpha ( a, b, c, … )
upper-alpha ( A, B, C, … )
none
L’allineamento si ottiene con i valori che seguono:
•
•
inside (la lista viene rappresentata senza alcuna indentazione)
outside (la lista presenta una indentazione; questo valore è molto utile nel caso di liste
annidate)
Con il seguente esempio CSS:
CSS
.parent { list-style: inside disc; }
.inh1 { list-style: outside circle; }
otterremo un output di questo tipo:
• Questo elenco contiene una lista annidata.
o Primo elemento della lista annidata.
o Secondo elemento della lista annidata.
o Terzo elemento della lista annidata.
2.7 Associare i fogli di stile ai documenti (X)HTML
In questa sezione saranno illustrati i metodi per collegare i CSS ai documenti
(X)HTML.
I metodi sono:
•
•
•
•
Fogli di stile esterni
Fogli di stile incorporati
La regola @import
CSS in linea
Salvatore Sole
28
2.7.1
Fogli di stile esterni
I fogli di stile possono essere salvati in file specifici con estensione “.css”, per essere
poi collegati al codice (X)HTML tramite il tag LINK nella sezione <HEAD>:
<head>
[...]
<link rel="stylesheet" type="text/css" media="screen"
href="/css/foglio_di_stile.css" />
[...]
</head>
2.7.2
Fogli di stile incorporati
Le regole dei CSS possono essere specificate direttamente nel codice (X)HTML
tramite il tag STYLE posto nell'HEAD del documento (X)HTML:
<head> [...] <style type="text/css">
<!-body { font:80% Verdana, Helvetica,sans-serif; }
p { font: 1em Verdana, Helvetica, sans-serif; }
[...]
-->
</style> [...] </head>
2.7.3 La regola @import
La regola @import permette di importare regole da un altro foglio di stile.
Ad esempio:
@import url("advanced.css");
@import special.css;
body { font:80% Verdana,Helvetica,sans-serif; }
p { font: 1em Verdana, Helvetica, sans-serif }
[...]
Se presenti, le regole @import devono precedere le altre regole.
2.7.4
CSS in linea
Attraverso l'attributo STYLE è possibile specificare le regole CSS direttamente nei tag
a cui esse saranno applicate:
<body style="background: #CCC; color: #000; font: 1em Verdana,
Helvetica, sans-serif">
<p>
In questo paragrafo,
Salvatore Sole
29
<span style="background: yellow">questo testo</span>
sarà evidenziato in giallo
</p>
</body>
Salvatore Sole
30
Cap. 3 – Tecniche per l’utilizzo dei CSS ai fini dell’accessibilità
CAPITOLO 3
Tecniche per l’utilizzo dei CSS ai fini dell’accessibilità
In questo capitolo vengono date delle direttive per la creazione di un sito accessibile
mediante l’utilizzo dei CSS. Qui di seguito vengono elencate le quattordici linee guida per
l’accessibilità ai contenuti del Web, successivamente verranno presentate le tecniche per
l’utilizzo dei CSS nel rispetto delle WCAG.
3.1 Linee guida per l’accessibilità ai contenuti del Web
3.1.1 Fornire alternative equivalenti al contenuto audio e visivo
Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta
essenzialmente la stessa funzione o scopo del contenuto audio o visivo.
Benché alcune persone non possano usare immagini, film, suoni, applet etc.
direttamente, possono comunque usare pagine che includono un'informazione equivalente al
contenuto visivo o audio. L'informazione equivalente deve servire allo stesso scopo del
contenuto visivo e audio. Perciò un testo equivalente all' immagine di una freccia verso l'alto
che rinvia ad un sommario potrebbe essere "vai al sommario". In alcuni casi un equivalente
dovrebbe anche descrivere l'aspetto del contenuto visivo (per esempio per grafici, pannelli o
diagrammi complessi).
Questa linea guida rimarca l'importanza di fornire equivalenti testuali al contenuto non
testuale (immagini, audio pre-registrati, video). La potenzialità degli equivalenti testuali sta
nella loro capacità di essere resi secondo modalità accessibili a persone con differenti
disabilità usando tecnologie diverse.
Anche fornire equivalenti non testuali (come immagini, video e audio pre-registrati)
del testo scritto è di beneficio per alcuni utenti, specialmente per gli illetterati o per le persone
che hanno difficoltà di lettura.
3.1.2 Non fare affidamento solo sul colore
Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il
colore.
Se viene usato il solo colore per veicolare informazione, le persone che non possono
distinguere fra alcuni colori e utenti che hanno monitor in bianco e nero o non visuali non
riceveranno l'informazione. Quando i colori dello sfondo e degli oggetti in primo piano sono
troppo simili per tonalità, potrebbero dare un contrasto non sufficiente se consultati usando un
monitor monocromatico o da persone con varie disabilità percettive sul colore.
Salvatore Sole
31
3.1.3 Usare marcatori e fogli di stile e farlo in modo appropriato
Marcare i documenti con i corretti elementi strutturali. Controllare la
presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione.
Usare i marcatori in modo improprio, cioè non seguendo le specifiche, impedisce
l'accessibilità. Il cattivo uso di marcatori per un effetto di presentazione (ad esempio usare una
tabella per l'impaginazione o una intestazione per cambiare la dimensione dei caratteri) rende
difficile, per l'utente con software specialistico, la comprensione dell'organizzazione della
pagina o la navigazione attraverso questa. Inoltre, l'uso di marcatori di presentazione invece
che di marcatori strutturali per veicolare una struttura (per esempio costruire ciò che sembra
una tabella di dati con un elemento HTML PRE) rende difficile la comprensione di una
pagina per chi ha altri strumenti di lettura.
All'altro estremo, gli sviluppatori non devono sacrificare dei marcatori appropriati
perché un certo browser o una tecnologia assistiva non li gestiscono correttamente. Per
esempio, è corretto l'uso dell'elemento TABLE in HTML per segnare una informazione
tabellare anche se alcuni vecchi lettori di schermo possono non gestire correttamente il testo
giustapposto. Usare TABLE correttamente e creare tabelle che si trasformino bene permette al
software di restituire tabelle in altro modo rispetto alle griglie bidimensionali.
3.1.4 Chiarire l’uso di linguaggi naturali
Utilizzare marcatori che facilitino la pronuncia o l'interpretazione di testi
stranieri o abbreviati.
Quando lo sviluppatore contrassegna in un documento i cambiamenti di linguaggio
naturale, le sintesi vocali e le periferiche braille possono selezionare automaticamente la
nuova lingua, rendendo il documento più accessibile agli utenti multilingue. Gli sviluppatori
dovrebbero identificare il linguaggio naturale principale del contenuto di un documento
(mediante marcatori o intestazioni http). Gli sviluppatori dovrebbero anche sciogliere le
abbreviazioni e gli acronimi.
3.1.5 Creare tabelle che si trasformino in maniera elegante
Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate
dai browser accessibili e da altri interpreti.
Le tabelle dovrebbero essere usate per marcare informazioni realmente tabellari
("tabelle di dati"). Gli sviluppatori dovrebbero evitare di usarle per l'impaginazione ("tabelle
di impaginazione"). Le tabelle, in qualsiasi modo siano usate, presentano anche problemi
particolari per gli utenti con lettori di schermo.
3.1.6 Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in
maniera elegante
Assicurarsi che le pagine siano accessibili anche quando le tecnologie più recenti
non sono supportate o sono disabilitate.
Salvatore Sole
32
Sebbene gli sviluppatori siano incoraggiati a usare nuove tecnologie che risolvano
problemi creati da tecnologie esistenti, essi dovrebbero sapere come far sì che le loro pagine
funzionino anche con browser più vecchi e con persone che scelgono di disabilitare alcune
caratteristiche.
3.1.7 Assicurarsi che l’utente possa tenere sotto controllo i cambiamenti di contenuto nel
corso del tempo
Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si auto
aggiornano possano essere arrestati temporaneamente o definitivamente.
Alcune persone con disabilità cognitive o visive non riescono a leggere testo in
movimento con velocità sufficiente, oppure non sono in grado di leggerlo affatto. Il
movimento può anche causare una distrazione tale da rendere illeggibile il resto della pagina
per persone con disabilità. I lettori di schermo non sono in grado di leggere testo in
movimento. Persone con disabilità fisiche potrebbero non essere in grado di muoversi con
velocità o precisione sufficienti ad interagire con oggetti in movimento.
3.1.8 Assicurare l’accessibilità diretta delle interfacce utente incorporate
Assicurarsi che la progettazione delle interfacce utente segua i principi
dell'accessibilità: accesso alle diverse funzionalità indipendente dai dispositivi usati,
possibilità di operare da tastiera, comandi vocali, etc.
Quando un oggetto incorporato possiede una "sua propria interfaccia", l'interfaccia,
così come l'interfaccia dello stesso browser, deve essere accessibile. Se l'interfaccia
dell'oggetto incorporato non può essere resa accessibile, deve essere fornita una soluzione
alternativa accessibile.
3.1.9 Progettare per garantire l’indipendenza da dispositivo
Usare caratteristiche che permettono di attivare gli elementi della pagina
attraverso una molteplicità di dispositivi di input.
Accesso indipendente da dispositivo significa che gli utenti possono interagire con
l'interprete o con il documento con il dispositivo di input (output) preferito, mouse, tastiera,
voce, bacchette manovrate con la testa, o altro. Se, per esempio, il controllo di un modulo può
essere attivato solo con un mouse o un altro dispositivo di puntamento, qualcuno che sta
usando la pagina senza usare la vista, con input vocale o con una tastiera, oppure chi sta
usando qualche altro dispositivo di input non a puntamento non riuscirà ad usare il modulo.
Nota. Fornendo equivalenti testuali per immagini sensibili o per immagini usate come
collegamento si dà agli utenti la possibilità di interagire con esse senza un dispositivo di
puntamento.
In genere, le pagine che permettono di interagire tramite tastiera sono accessibili anche
tramite input vocale o interfaccia a linea di comando.
Salvatore Sole
33
3.1.10 Usare soluzioni provvisorie
Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser più
vecchi possano operare correttamente.
Per esempio, i browser più vecchi non permettono agli utenti di spostarsi su caselle per
l'immissione di testo vuote. I lettori di schermo più vecchi leggono liste di collegamenti
consecutivi come se fossero un unico collegamento. E’ quindi difficile se non impossibile
accedere a questi elementi attivi. Ugualmente, cambiare la finestra attiva oppure far venir
fuori nuove finestre può disorientare notevolmente gli utenti che non possono vedere ciò è
successo.
3.1.11 Usare le tecnologie e le raccomandazioni del W3C
Usare le tecnologie del W3C (in conformità con le specifiche) e seguire le
raccomandazioni sull'accessibilità. Nei casi in cui non sia possibile usare una tecnologia del
W3C, oppure se nell'utilizzarla si ottenesse materiale che non si trasforma in maniera
elegante, fornire una versione alternativa del contenuto che sia accessibile.
Questa linea guida raccomanda tecnologie del W3C (per es. HTML, CSS etc.) per
diversi motivi:
•
•
•
Le tecnologie W3C contengono elementi di accessibilità "integrati".
Le specifiche W3C subiscono una revisione preliminare per assicurarsi che gli
elementi di accessibilità siano presi in considerazione fin dalla fase progettuale.
Le specifiche W3C sono sviluppate all'interno di un processo aperto e con il consenso
dell'industria del settore.
Evitare l'uso di caratteristiche non W3C e non standard (elementi, attributi, proprietà
ed estensioni proprietarie) aiuterà a rendere le pagine più accessibili a un numero maggiore di
persone che usino una più ampia varietà di hardware e software. Quando devono essere usate
tecnologie non accessibili (proprietarie oppure no), devono essere fornite pagine equivalenti
accessibili.
Anche quando si usano le tecnologie W3C, lo si deve fare rispettando linee guida per
l'accessibilità. Nell'usare nuove tecnologie assicurarsi che esse si trasformino in maniera
elegante.
Nota. La conversione di documenti (da PDF, PostScript, RTF, etc.) ai linguaggi di
marcatura del W3C (HTML, XML) non sempre crea un documento accessibile. Quindi
validare ogni pagina per verificare l'accessibilità e la possibilità d'uso dopo il processo di
conversione.
3.1.12 Fornire informazione per la contestualizzazione e l’orientamento
Fornire informazione per la contestualizzazione e l'orientamento, per aiutare gli
utenti a comprendere pagine od elementi complessi.
Salvatore Sole
34
Il fatto di raggruppare gli elementi e di fornire informazione contestuale sulle relazioni
fra gli elementi può essere utile per tutti gli utenti. Relazioni complesse fra parti di una pagina
possono essere difficili da interpretare per persone con invalidità cognitive o visive.
3.1.13 Fornire chiari meccanismi di navigazione
Fornire meccanismi di navigazione chiari e coerenti, informazione per
l'orientamento, barre di navigazione, una mappa del sito, etc., per aumentare le
probabilità che una persona trovi quello che sta cercando in un sito.
Meccanismi di navigazione chiari e coerenti, sono importanti per persone con
invalidità cognitive o per i non vedenti, ma giovano comunque a tutti gli utenti.
3.1.14 Assicurarsi che i documenti siano chiari e semplici
Assicurarsi che i documenti siano chiari e semplici in modo che possano essere
compresi più facilmente.
Una disposizione coerente della pagina, una grafica riconoscibile e un linguaggio
facile da capire giovano a tutti gli utenti. In particolare essi aiutano persone con disabilità
cognitive o con difficoltà di lettura. Tuttavia assicurarsi che le immagini abbiano equivalenti
testuali per i non vedenti, gli ipovedenti, o per qualsiasi utente che non possa o abbia scelto di
non visualizzare la grafica.
L'uso di un linguaggio chiaro e semplice promuove una comunicazione efficace.
L'accesso all'informazione scritta può essere difficile per persone con disabilità cognitive o
dell'apprendimento. L'uso di un linguaggio chiaro e semplice giova anche alle persone la cui
madrelingua è diversa dalla vostra, comprese le persone che comunicano essenzialmente con
il linguaggio dei segni.
3.2 Tecniche CSS per l’accessibilità ai contenuti del Web
3.2.1 Ridurre la manutenzione ed accrescere la coerenza
La creazione di uno stile di presentazione coerente tra le pagine può essere ottenuta:
•
•
•
Usando un ristretto numero di fogli di stile per il proprio sito.
Usando fogli di stile esterni piuttosto che incorporati ed evitando i fogli di stile in
linea.
Se si utilizza più di un foglio di stile, è bene usare l’appellativo “class”, in maniera tale
da poter rappresentare in modi diversi i medesimi concetti.
3.2.2 L’utente ha la precedenza sugli stili
Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.
Salvatore Sole
35
Allo scopo di assicurare che gli utenti possano avere un controllo sugli stili, il CSS2
cambia la semantica dell’operatore “!important”, definito nel CSS1. Nel CSS1, gli autori
hanno sempre l’ultima parola sugli stili. In CSS2, se il foglio di stile di un utente contiene
“!important”, richiede la precedenza su ciascuna regola applicabile in un foglio di stile di un
autore.
Si tratta di una caratteristica importante per utenti che richiedono o sono costretti ad
evitare certe combinazioni di colore o contrasti, o utenti che richiedono caratteri di dimensioni
maggiori. Ad esempio la seguente istruzione specifica una dimensione di font estesa per un
paragrafo di testo e dovrebbe ignorare un’istruzione di un autore con ugual peso.
Esempio.
CSS
P { font-size: 1em ! important }
Il valore ‘inherit’ del CSS2, disponibile per tutti gli attributi, fa in modo che, la regola
di stile “!important”, regoli o tutto il documento o la maggior parte di esso. Ad esempio, il
seguente codice forza tutti gli sfondi al bianco e tutto ciò che è in primo piano al nero.
Esempio.
CSS
/*
Fissa il colore del testo al nero
e il colore dello sfondo al
bianco in tutto il corpo del documento.
*/
BODY {
color: black ! important ;
background: white ! important
}
/*
Induce i valori di 'color' e 'background'
ad essere ereditati da tutti gli altri elementi,
rafforzati da !important. Nota che questo stile di utente,
potrebbe essere ignorato da un altro stile più specifico. */
* {
color: inherit ! important ;
background: inherit ! important
}
Il CSS2 include anche queste caratteristiche di controllo utente:
•
Colori di sistema (con gli attributi ‘color’, ‘background-color’, ‘border-color’ e
‘outline-color’) e font di sistema (con l’attributo ‘font’).
•
Contorni dinamici (l’attributo ‘outline’) consentono agli utenti (ad esempio gli
ipovedenti), di creare contorni attorno al contenuto, che diano risalto all’informazione.
Ad esempio, per disegnare una linea spessa nera attorno ad un elemento quando viene
puntato e una spessa linea rossa quando è attivo, può essere usato il seguente codice.
Salvatore Sole
36
Esempio.
CSS
:focus { outline: thick solid black }
:active { outline: thick solid red }
3.2.3 Unità di misura
Usare unità relative e non assolute nei valori degli attributi del linguaggio dei
marcatori e dei valori delle proprietà del foglio di stile.
Tecniche:
•
•
•
Utilizzare l’unità “em” per fissare la dimensione dei font.
Uso di unità di lunghezza relative e percentuali. I CSS consentono di servirsi di unità
relative anche in posizionamento assoluto. Di conseguenza, un’immagine può essere
disposta in modo che possa essere bilanciata di “3em” dal top dell’elemento che la
contiene. Questa è una distanza fissata, ma è relativa alla dimensione corrente del font,
in questo modo viene adattata con precisione.
Utilizzare unità di lunghezza assolute solo quando le caratteristiche fisiche del mezzo
di uscita dei dati sono conosciute, come immagini bitmap.
Esempio.
Usare em per fissare le dimensioni del font, in questo modo:
CSS
H1 { font-size: 2em }
piuttosto che in quest’altro:
CSS
H1 { font-size: 12pt }
Esempio.
Utilizzare unità di lunghezza relative e percentuali.
CSS
BODY { margin-left: 15%; margin-right: 10%}
Esempio.
Utilizzare unità di lunghezza assolute solo quando le caratteristiche fisiche del mezzo
di uscita dei dati sono conosciute.
CSS
.businesscard { font-size: 8pt }
Salvatore Sole
37
Le unità di lunghezza relative adatte a definire le dimensioni dei caratteri sono:
•
•
em: se utilizzata per definire la dimensione dei font, l'unità 'em' è la dimensione del
carattere dell'elemento parent (ad esempio 0.80em indicano l'80% della dimensione
del carattere dell'elemento parent);
px: il pixel, la dimensione di un pixel dipende dalla risoluzione del dispositivo che si
utilizza per visualizzare le pagine.
L’utilizzo di ‘em’ può offrire vantaggi e svantaggi. Il vantaggio è costituito dal fatto
che l’utente può aumentare o ridurre la dimensiona del font agendo sul browser.
La comodità per il webmaster consiste nella coerenza che è possibile dare alle pagine.
Si possono infatti scegliere alcuni valori percentuali con i quali incrementare o ridurre i font
su schermo e mantenere omogenee le dimensioni degli stessi. Questa comodità può però
essere uno svantaggio, in quanto l’annidamento di troppi elementi, può portare in breve tempo
ad una dimensione del testo o troppo piccola o troppo grande. Bisogna pertanto prestare
attenzione alle proprietà degli elementi parent.
La soluzione più corretta è quella di utilizzare le percentuali nella definizione della
dimensione del testo del BODY. Per modificare la dimensione del testo di tutto il documento
è sufficiente modificare la dimensione nel body.
3.2.4 Contenuto generato
•
•
Quando esiste un linguaggio di marcatori adatto, per veicolare informazione
usare un marcatore piuttosto che le immagini.
Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per
esempio, quando un documento HTML viene reso senza i fogli di stile associati,
deve essere sempre possibile leggere il documento.
Tecniche:
•
•
Fornire un testo equivalente per ogni immagine importante o testo generato dai fogli
di stile (ad esempio, tramite gli attributi ‘background-image’, ‘list-style’ o ‘content’).
Assicurarsi che i contenuti importanti appaiano nell’oggetto del documento. Il testo
prodotto dai fogli di stile non è parte del documento sorgente e può non essere
disponibile alle tecnologie assistive che accedono al contenuto attraverso il Document
Object Model Level 1 ([DOM1]).
I CSS2 includono svariati meccanismi che consentono al contenuto di essere generato
dai fogli di stile:
•
•
Gli pseudo elementi :before e :after e l’attributo ‘content’. Quando usati insieme,
questi consentono agli autori di inserire marcatori (ad esempio, contatori e stringhe
costanti come “Fine esempio” al di sotto degli esempi) prima o dopo e il contenuto
degli elementi.
Gli attributi ‘cue’, ‘cue-before’ e ‘cue-after’. Questi attributi consentono agli utenti di
riprodurre un suono prima o dopo il contenuto di un elemento.
Salvatore Sole
38
•
L’elenco di stili, che possono essere numeri, decorazioni o immagini (abitualmente
associate all’elemento LI in HTML). I CSS2 aggiungono la lista di stili internazionale
agli stili definiti dai CSS1.
Il contenuto generato può servire come marcatore ad aiutare gli utenti a navigare un
documento, quando non possono accedere ad indizi visuali come scrollbar proporzionali,
frame e così via.
Ad esempio, il seguente foglio di stile di utente indurrebbe le parole “End Example”
ad essere generate dopo ciascun esempio, marcato con uno speciale valore di classe nel
documento:
Esempio:
CSS
DIV.example:after { content: End Example }
Gli utenti possono anche, ad esempio, numerare i paragrafi affinché possano
individuare la posizione di lettura corrente nel documento:
Esempio:
CSS
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph }
3.2.5 Font
Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.
Tecniche:
•
•
•
•
Specificare sempre font generici.
Invece di usare elementi di presentazione ed attributi disapprovati, fare uso dei
numerosi attributi dei CSS per controllare le caratteristiche dei font: ‘font-family’,
‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’ e ‘font-weight’.
Utilizzare i seguenti attributi CSS2 per controllare le informazioni dei font: ‘font’,
‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’ e
‘font-weight’ al posto dei seguenti attributi ed elementi di font, appartenenti
all’HTML che invece sono disapprovati: FONT, BASEFONT, “face” e “size”.
Se proprio devono essere utilizzati elementi HTML per il controllo dell’informazione
dei font, allora è bene usare BIG e SMALL che sono tollerati.
Esempio:
Specificare sempre font generici:
Salvatore Sole
39
CSS
BODY { font-family: "Gill Sans", sans-serif }
Esempio:
(X)HTML
<STYLE type="text/css">
P.important { font-weight: bold }
P.less-important { font-weight: lighter; font-size: smaller }
H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>
3.2.6 Effetti di stile per il testo
Fino a quando gli interpreti non permetteranno agli utenti di controllare il
lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la
presentazione a intervalli regolari, come se si accendesse e spegnesse).
Gli attributi CSS2 che seguono possono essere usati per lo stile del testo:
•
•
•
Case: ‘text-transform’ (per le maiuscole e per le minuscole).
Effetti di ombreggiatura: ‘text-shadow’.
Sottolineature, overlink, lampeggiamenti: ‘text-decoration’. Nota. Se viene utilizzato
un contenuto lampeggiante (ad esempio un titolo che appare e scompare ad intervalli
regolari), bisogna provvedere ad un meccanismo per il bloccaggio del
lampeggiamento. In CSS, l’istruzione ‘text-decoration: blink’, può indurre il contenuto
a lampeggiare e può consentire agli utenti di fermare l’effetto o disattivando il foglio
di stile oppure ignorando le istruzioni con il caricamento di un foglio di stile
personale. Non è lecito l’uso degli elementi BLINK e MARQUEE. Questi elementi
non appartengono ad alcuna specifica W3C sull’HTML (non si tratta quindi di
elementi standard).
Esempio.
L’esempio che segue è un foglio di stile personale nel quale è stato imposto il
bloccaggio del lampeggiamento assegnando all’attributo ‘text-decoration’ il valore ‘none’.
CSS
BODY {
font-family: arial ! important;
font-size: 2em ! important;
text-decoration: none ! important;
color: black ! important ;
background: white ! important ; }
Salvatore Sole
40
3.2.7 Testo al posto di immagini
•
•
•
Usare fogli di stile per controllare l'impaginazione e la presentazione.
Fornire un equivalente testuale per ogni elemento non di testo (per esempio,
mediante "alt", "longdesc" o contenuto nell'elemento stesso). Questo comprende:
immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di
immagini sensibili, animazioni (ad es. GIF animate), applet e oggetti
programmati, arte ASCII, frame, script, immagini usate come richiamo per
elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento
dell'utente), file di solo audio, tracce audio di video e video.
Fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine
sensibile sul lato server.
Gli sviluppatori di contenuti devono utilizzare i fogli di stile per lo stile del testo
piuttosto che rappresentare il testo con le immagini. Usare il testo al posto delle immagini
vuol dire che le informazioni saranno disponibili ad un maggior numero di utenti (con
sintetizzatori vocali, display braille, display grafici e così via). L’utilizzo dei fogli di stile può
anche consentire agli utenti di non tenere in nessun conto gli stili predefiniti delle pagine e, ad
esempio, di permettere loro di cambiare il colore o la dimensione dei font più facilmente.
Se si rivelasse necessario l’uso del bitmap per la creazione di effetti testuali (come ad
esempio font speciali, trasformazioni, ombre, etc.), dovrà essere reso accessibile. Se ad
esempio nella home page di un sito deve essere rappresentato un logo, questo dovrà essere
accompagnato da un testo alternativo che ne chiarisca la funzione.
Esempio:
In questo esempio, l’immagine caricata mostra la parola “Logo”, che viene “catturata”
dal valore dell’attributo “alt”, che in pratica fornisce un testo alternativo.
(X)HTML
<P> <IMG src="Logo.gif" alt="logo"> </P>
L’attributo ‘alt’ viene comunque utilizzato per brevi descrizioni, per descrizioni di
immagini più complesse può essere utilizzato l’attributo ‘longdesc’.
Esempio:
(X)HTML
<img src="immagine.jpg" alt="Immagine" longdesc="immagine.html">
3.2.8 Formattazione e posizione del testo
Gli attributi CSS2 che seguono possono essere usati per controllare la posizione e la
formattazione del testo:
•
Indentazione: ‘text-indent’. Non possono essere utilizzati BLOCKQUOTE o altri
elementi strutturali per indentare il testo.
Salvatore Sole
41
•
•
•
•
Spaziatura tra le lettere e tra le parole: ‘letter-spacing’, ‘word-spacing’. Ad esempio,
invece di scrivere “H E L L O” (che gli utenti normodotati generalmente
riconoscerebbero come la parola “hello”, ma che altri utenti, che devono fare
affidamento su lettori di schermo o altri dispositivi di lettura, percepirebbero come
lettere singole), gli autori possono creare lo stesso effetto visuale con l’attributo
‘letter-spacing’ applicato ad “HELLO”. Un testo senza spazi può essere trasformato
più efficacemente in parole.
Spazi bianchi: ‘white-space’. Questa proprietà controlla il trattamento dello spazio
bianco del contenuto di un elemento.
Direzione del testo: ‘direction’, ‘unicode-bidi’.
Gli pseudo-elementi :first-letter e :first-line consentono agli autori di riferirsi alla
prima lettera di una riga o di un paragrafo di testo.
L’esempio seguente mostra come usare i fogli di stile per creare un effetto drop-cap.
Esempio:
(X)HTML
<HEAD>
<TITLE>Drop caps</TITLE>
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>
Nota. Lo pseudo-elemento ‘:first-letter’, che permette agli sviluppatori di riferirsi alla
prima lettera di una parte del testo, non è largamente supportato.
3.2.9 Tabelle
•
•
•
•
•
•
Per tabelle di dati, identificare le intestazioni di righe e colonne.
Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile
se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire
una alternativa equivalente (che può essere una versione linearizzata).
Se per l'impaginazione viene usata una tabella non usare nessun marcatore di
struttura per la formattazione della resa visiva.
Per le tabelle, fornire sommari.
Fornire abbreviazioni per le etichette di intestazione.
Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in
modo corretto il testo affiancato, fornire un testo lineare alternativo (nella pagina
attiva o in qualche altra) per tutte le tabelle che dispongono testo su colonne
parallele e andando a capo.
Salvatore Sole
42
Le tabelle dovrebbero essere utilizzate per lo scopo per cui sono nate, ovvero per
intabellare. In realtà esse sono state largamente utilizzate per creare i layout delle pagine.
Annidando tabelle all’interno di altre tabelle si possono ottenere impaginazioni sempre più
complesse, ottenendo così pagine pesanti e lente da scaricare ed elaborare. Ciò rende un sito
non accessibile a molte tipologie di utenti. Un utente costretto ad utilizzare un browser vocale
o a linea di testo, non può comprendere il contenuto perché gli verrà letto dall’inizio alla fine
così come appare nel codice, ed essendo il contenuto informativo strettamente legato al codice
per la grafica, può accadere che l'ordine in cui sono lette le informazioni non sia corretto.
Esempio:
(X)HTML
<TABLE
summary="Supporto per le lingue in differenti versioni di MS
Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP >
<COLGROUP >
<COLGROUP >
<COLGROUP >
<COLGROUP >
<COLGROUP >
<COLGROUP >
<THEAD >
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS
<TR><TD>708<TD>Arabic
United States<TD><TD>X<TD>X<TD>X<TD>X
(ASMO 708)<TD><TD>X<TD><TD><TD>X
(ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
(Transparent Arabic)<TD><TD>X<TD><TD><TD>X
(Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
Salvatore Sole
43
Al documento contenente il precedente esempio di marcatura, verrà collegato il
seguente foglio di stile:
CSS
caption { font-weight: bold; }
colgroup { text-align: center; }
table { border: 4px double #000; }
th { background: #CCC; }
td { border: 1px solid #CCC; background: #ECECEC; }
Da questo codice si genererà la seguente tabella:
3.2.10 Colori
3.2.10.1
Contrasto di colore
Assicurarsi che le combinazioni fra i colori dello sfondo e del primo piano
forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o
se visti su uno schermo in bianco e nero.
Salvatore Sole
44
Tecniche:
Utilizzare numeri, non nomi, per i colori.
Esempio.
CSS
H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}
Esempio errato:
CSS
H1 {color: red}
Per specificare i colori è bene usare le seguenti proprietà CSS:
•
•
•
•
‘color’, per il colore del testo in primo piano.
‘background-color’, per il colore di sfondo.
‘border-color’ e ‘outline-color’ per i colori dei bordi.
Per i colori dei collegamenti ci si deve riferire alle pseudo-classi :link, :visited e
:active.
E’ bene assicurarsi che i colori che stanno in primo piano siano in contrasto con i
colori di sfondo. Specificando il colore che deve stare in primo piano, è bene specificarne
sempre uno di sfondo (e vice versa). In particolare evitare le combinazioni di rosso con verde
e giallo con blu che potrebbero non essere distinguibili da alcune categorie di utenti e
ricordare che in alcuni casi si potrebbe avere la completa cecità per i colori.
3.2.10.2
Assicurarsi che l’informazione non sia convogliata solo dal colore
Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche
senza, per esempio grazie al contesto o ai marcatori.
Assicurarsi che l’informazione non sia convogliata solo attraverso il colore. Ad
esempio, quando si chiede il contributo degli utenti, non si scrive “Per favore selezioni un
articolo fra quelli elencati in verde”. Invece, assicurarsi che l’informazione sia disponibile
attraverso altri effetti di stile (ad esempio un effetto di font) e attraverso il contesto (ad
esempio testi dei collegamenti comprensivi).
Per valutare se un documento svolge la sua funzione anche senza colori, dovrebbe
essere esaminato o con un monitor monocromatico o con i colori del browser disattivati.
Inoltre, cercare di stabilire nel proprio browser uno schema di colore che usi solamente il
nero, il bianco e i quattro grigi browser-safe e valutare in che modo la pagina si comporta.
Valutare se il contrasto del colore è sufficiente ad essere letto da persone con deficit
visivi o da chi possiede un monitor con una bassa risoluzione, da chi stampa pagine con
stampanti in bianco e nero (con sfondi e colori che appaiono in scale di grigio). Inoltre
prendere lo stampato e fotocopiarlo due o tre volte per vedere come si degrada. Questo può
mostrare dove aggiungere indicazioni ridondanti (per esempio, gli hyperlink sono
Salvatore Sole
45
abitualmente sottolineati nelle pagine Web), o se le indicazioni sono eccessivamente piccole o
indistinte dal resto.
3.2.11 Fornire indicazioni contestuali nelle liste HTML
•
•
Marcare le liste ed elencare le voci della lista in modo appropriato.
Fornire metadati per aggiungere informazione di tipo semantico alle pagine e ai
siti.
Gli sviluppatori sono incoraggiati ad utilizzare UL per le liste non ordinate e OL per le
liste ordinate in combinazione con i CSS per fornire indicazioni contestuali.
Il seguente foglio di stile CSS2 mostra come fornire numeri composti per liste
annidate create con gli elementi UL o OL. Le voci sono numerate come “1”, “1.1”, “1.1.1”,
etc.
Esempio:
(X)HTML
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item
}
</STYLE>
Finché i CSS2 non siano ampiamente supportati dagli interpreti o gli interpreti non
consentano agli utenti di controllare la rappresentazione delle liste attraverso altri mezzi, si
deve tener presente di procurare indicazioni contestuali nelle liste annidate. Il seguente
meccanismo CSS1 mostra come nascondere la fine di una lista quando i fogli di stile sono
aperti e mostrarla quando i fogli di stile sono chiusi o quando i fogli di stile non sono
supportati.
Esempio.
(X)HTML
.endoflist { display: none }
</STYLE>
<UL>
<LI>Paper:
<UL>
<LI>Envelopes
<LI>Notepaper
<LI>Letterhead
<LI>Poster paper
<span class="endoflist">(End of Paper)</span>
</UL>
<LI>Pens:
<UL>
<LI>Blue writing pens
Salvatore Sole
46
<LI>whiteboard pens
<span class="endoflist">(End of Pens)</span>
</UL>
<LI>Fasteners:
<UL>
<LI>paper clips
<LI>staples
<LI>Big lengths of rope.
<span class="endoflist">(End of Fasteners)</span>
</UL>
<span class="endoflist">(End of Office Supplies)</span></UL>
3.2.12 Configurazione, posizionamento, scalamento ed allineamento
•
•
Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile
se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire
una alternativa equivalente (che può essere una versione linearizzata).
La configurazione, il posizionamento, lo scalamento e l’allineamento devono essere
fatti attraverso i fogli di stile (specialmente utilizzando il posizionamento fluttuante ed
assoluto):
•
•
•
•
'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Ciascuna di queste proprietà
consente agli utenti di controllare la spaziatura senza aggiungere spazi addizionali. E’
bene utilizzare ‘text-align: center’ invece dell’elemento disapprovato CENTER.
‘margin’, ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’. Con questi
attributi, gli autori possono creare spazi nei quattro lati del contenuto di un elemento,
invece di aggiungere spazi non-breaking ( ).
‘float’, ‘position’, ‘top’, ‘right’, ‘bottom’, ‘left’. Con queste proprietà, l’utente può
controllare la posizione visibile di quasi ogni elemento in un certo qual modo
indipendentemente da dove l’elemento appare nel documento. Gli autori devono
sempre progettare documenti che abbiano senso anche senza i fogli di stile (per
esempio, il documento deve essere realizzato seguendo un ordine logico) e che usino i
fogli di stile per realizzare gli effetti visuali. Gli attributi per il posizionamento
possono essere usati per creare note a margine (che possono essere numerate
automaticamente), barre laterali, effetti frame-like, semplici titoli principali e titoli in
basso e altro.
L’attributo ‘empty-cells’, consente agli utenti di lasciare le celle delle tabelle vuote e
di dare correttamente i margini sullo schermo o su carta. Una cella di dati che è
destinata ad essere lasciata vuota non deve essere riempita con uno spazio bianco o
uno spazio non-breaking solo per realizzare un effetto visuale.
Gli esempi che seguono mostrano il funzionamento della proprietà ‘empty-cells’:
CSS
table { background: gray; width: 300px; border-collapse: separate; }
table td { background: #FF9; color: black; border: 1px solid green;
}
.tab1 { empty-cells: show; }
Salvatore Sole
47
Il precedente codice CSS, consente la creazione della seguente tabella. Si può notare
che l’elemento centrale non contiene valori, ma viene comunque rappresentato con lo sfondo
e i bordi:
Se invece abbiamo un codice di questo tipo:
CSS
table { background: gray; width: 300px; border-collapse: separate; }
table td { background: #FF9; color: black; border: 1px solid green;
}
.tab2 { empty-cells: hide; }
la tabella che si ottiene, manca completamente della casella centrale:
3.2.13 Immagini e distanziatori
Fornire testi equivalenti per tutte le immagini, incluse immagini invisibili o
trasparenti.
Se gli sviluppatori di contenuto non possono usare i fogli di stile e sono obbligati ad
usare immagini non visibili o trasparenti (ad esempio, con IMG), per disporre le immagini
sulla pagina, per esse devono specificare alt=” ”.
Esempio errato:
Se si vuole impedire che quando l’immagine non viene caricata appaia il testo, si
dovrebbe evitare l’uso di spazi per il valore di “alt”.
(X)HTML
my poem requires a bigspace<IMG src="10pttab.gif
"alt="   ">here
Nell’esempio successivo, una immagine viene usata per forzare un grafico ad apparire
in una determinata posizione:
Salvatore Sole
48
(X)HTML
<IMG src="spacer.gif" alt="spacer">
<IMG src="colorfulwheel.gif" alt="The wheel of fortune">
3.2.14 Righe e bordi
esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve
essere sempre possibile leggere il documento.
Righe e bordi possono comunicare il concetto di “separazione” agli utenti ma quel
significato non può essere dedotto fuori da un contesto visuale.
Per definire lo stile dei bordi è bene usare i seguenti attributi:
•
•
•
‘border’, ‘border-width’, ‘border-style’, ‘border-color’.
‘border-spacing’ e ‘border-collapse’ per le tabelle.
‘outline’, ‘outline-color’, ‘outline-style’ e ‘outline-width’ per i contorni dinamici.
I progettisti devono usare i fogli di stile per creare righe e bordi.
Esempio:
In questo esempio l’elemento H1 può avere il bordo alto che è definito 2px red e
separato dal resto di 1em:
(X)HTML
<HEAD>
<TITLE>Redline with style sheets</TITLE>
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>
Esempio.
In questo esempio, l’elemento DIV viene utilizzato per creare una barra di
navigazione, che includa un separatore orizzontale.
(X)HTML
<DIV class="navigation-bar">
<HR>
<A rel="Next" href="next.html">[Next page]</A>
<A rel="Previous" href="previous.html">[Prevous page]</A>
<A rel="First" href="first.html">[First page]</A>
</DIV>
Salvatore Sole
49
3.2.15 Uso del foglio di stile per il posizionamento e uso della marcatura per trasformare
finemente
esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve
essere sempre possibile leggere il documento.
Utilizzando le proprietà di posizionamento del CSS2, il contenuto può essere
visualizzato in qualsiasi posizione sull’interfaccia visuale dell’utente. La successione nella
quale le voci appaiono nello schermo può essere differente dall’ordine che esse hanno nel
documento sorgente. L’esempio seguente dimostra alcuni principi:
1. Il testo viene visualizzato nel browser in un ordine differente da quello della
marcatura.
2. Si può usare il posizionamento con i CSS per creare effetti tabellari.
Si noti che viene definita una classe per ogni oggetto che è stato posizionato. L’uso
dell’elemento “id” potrebbe essere sostituito dall’elemento “class” in questi esempi. Negli
esempi viene usata “Class” perché gli oggetti sono replicati e conseguentemente non sono
unici.
Esempio errato:
(X)HTML
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<span class="menu1">Products</span>
<span class="menu2">Locations</span>
<span class="item1">Telephones</span>
<span class="item2">Computers</span>
<span class="item3">Portable MP3 Players</span>
<span class="item5">Wisconsin</span>
<span class="item4">Idaho</span>
</div>
</body>
Quando sono applicati i fogli di stile, il testo appare in due colonne. Gli elementi di
classe “menu1” (Products) e “menu2” (Locations) appaiono come colonne dell’intestazione.
Salvatore Sole
50
“Telephones, Computers e Portable MP3 Players” sono elencati sotto Products, mentre
“Wisconsin” e “Idaho” sono elencati sotto Locations come mostrato nello screen-shot che
segue:
Quando i fogli di stile non sono applicati, tutto il testo appare rappresentato in
un’unica riga, “Products Locations Telephones Computers Portable MP3 Players Wisconsin
Idaho”. Tutti i nomi elencati in precedenza appaiono nello stesso ordine con il quale appaiono
nel documento sorgente. Perciò, ciò che appare come titolo di una colonna quando i fogli di
stile non sono applicati, altro non è che ciò che prima era stato definito nel codice sorgente.
Salvatore Sole
51
Lo screen shot seguente mostra ciò che accade:
L’esempio che segue mostra come possa essere creato lo stesso aspetto visuale in un
browser che supporti i fogli di stile, ma mostra anche come possa essere creata una
presentazione più significativa quando i fogli di stile non sono applicati.
Esempio.
(X)HTML
<head><style type="text/css">
#box { position: absolute; top: 5em; left: 5em }
Salvatore Sole
52
</style></head>
<body>
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</span>
<dd class="item5">Wisconsin</span>
</dt></dl></div></body>
Quando il foglio di stile è applicato le scritte appaiono correttamente come in
precedenza. Tuttavia, adesso, quando i fogli di stile non sono applicati, il testo appare in un
elenco di definizione piuttosto che in una sequenza di parole. Quello che appare come
intestazione di una colonna quando i fogli di stile sono applicati, ora appare come un termine
definito come dimostrato nello screen-shot seguente:
Salvatore Sole
53
3.2.16 Creare movimento con fogli di stile e script
Fino a quando gli interpreti non permetteranno agli utenti di bloccare il
contenuto in movimento, evitare il movimento nelle pagine.
Due sono principalmente le cose che non devono essere fatte:
•
•
Nascondere/visualizzare il contenuto. Si dovrebbe per quanto possibile evitare i
lampeggiamenti. Bisogna infatti ricordare che non tutti i browser consentono di
caricare fogli di stile alternativi o personali.
Cambiare la presentazione (movimento e colori). Non tutti i browser permettono di
bloccare le scritte in movimento, che non possono essere lette da uno screen reader
e che potrebbero non essere leggibili da molti utenti.
3.2.17 Fogli di stile a cascata per sintetizzatori vocali
Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti
in maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto etc.)
Gli attributi “uditivi” del CSS2 forniscono informazione agli utenti non vedenti e gli
utenti di browser vocali spesso nello stesso modo forniscono informazione visuale. L’esempio
seguente mostra in che modo svariati suoni (comprendente ‘voice-family’ che è una sorta di
font audio) possano consentire ad un utente di conoscere quale, tra i contenuti ascoltati, sia il
titolo:
Esempio.
CSS
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
Le seguenti proprietà fanno parte dei fogli di stile a cascata CSS2:
•
•
•
•
•
‘volume’ controlla il volume di un testo parlato.
‘speak’ controlla se il contenuto può essere parlato e, in tal caso, se deve essere
sillabato o parlato.
‘pause’, ‘pause-before’ e ‘pause-after’ controlla le pause prima e dopo che il contenuto
venga espresso. Questo concede agli utenti di separare le varie parti del contenuto per
una comprensione migliore.
‘cue’, ‘cue-before’ e ‘cue-after’ specifica un suono da eseguire prima e dopo il
contenuto. Ciò può essere prezioso per l’orientamento (simile ad un’icona visuale).
‘play-during’ controlla i suoni di sottofondo finchè non è avvenuta la riproduzione
(così come un’immagine di sfondo).
Salvatore Sole
54
•
•
•
‘azimuth’ e ‘elevation’ fornisce dimensione al suono, il che permette agli utenti di
distinguere le voci, ad esempio.
‘speech-rate’, ‘voice-family’, ‘pitch’, ‘pitch-range’, ‘stress’ e ‘richness’ controllano la
qualità dei concetti espressi. Variando queste proprietà per elementi differenti, gli
utenti possono mettere a punto elegantemente il contenuto che gli si presenta
oralmente.
‘speak-punctuation’ e ‘speak-numeral’ controllano in che modo i numeri e la
punteggiatura sono espressi oralmente. Inoltre, la proprietà ‘speak-header’ descrive
come saranno espresse le informazioni dei titoli delle tabelle.
3.2.18 Accesso a rappresentazioni alternative del contenuto
Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti in
maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto etc.)
I CSS2 consentono agli utenti di accedere a rappresentazioni alternative del contenuto,
che è specificato nei valori degli attributi quando i seguenti vengono usati insieme:
•
•
•
Attributi dei selettori.
La funzione attr() e l’attributo ‘content’.
Gli pseudo elementi :before e :after.
Nel seguente esempio, il valore dell’attributo “alt” per l’elemento IMG viene
riprodotto dopo l’immagine ( in modo visivo, orale, etc. ):
Esempio.
CSS
IMG:after { content: attr(alt) }
Si noti che il valore dell’attributo può essere visualizzato anche se l’immagine può non
esserci (ad esempio, l’utente ha disattivato le immagini attraverso l’interfaccia utente).
In alcuni browser è possibile il caricamento di fogli di stile alternativi, che consentono
agli utenti di avere uno stile più vicino alle proprie esigenze.
Nell’esempio che segue viene mostrato un frammento di codice HTML. Un browser
come Explorer caricherebbe il foglio di stile indicato nella prima riga e chiamato
“standard.css”. Altri browser come Mozilla/Netscape, creerebbero il layout sulla base di
quanto indicato nel foglio di stile “standard.css”, ma consentirebbero il caricamento
alternativo dei due fogli di stile “piccolo.css” e “grande.css”.
Esempio:
HTML
<LINK href="standard.css" rel="stylesheet" type="text/css">
<LINK href="piccolo.css" title="piccolo" rel="stylesheet"
type="text/css">
<LINK href="grande.css" title="grande" rel="alternate stylesheet"
type="text/css">
Salvatore Sole
55
In altri browser, come ad esempio Opera, si possono caricare fogli di stile personali
che consentono all’utente di impostare la presentazione del sito secondo le proprie esigenze.
In questo caso dopo ogni attributo del foglio di stile dovrà essere inserita la regola
‘!important’, che imporrà la priorità a quell’attributo.
Esempio:
CSS
body {
font-family: Arial, ”Times New Roman” !important;
font-size: 2em !important;
color: black !important;
background: white !important
}
3.2.19 Media type
Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti
in maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto etc.)
Nel paragrafo precedente si è visto come certi browser offrano la possibilità di caricare
stili che possano andare incontro alle esigenze di diverse tipologie di utenti. Esiste però un
altro mezzo che consente di adattare i documenti ai vari dispositivi. Infatti una pagina
realizzata per la visualizzazione su schermo, ad esempio, non sempre è adatta alla stampa
(caratteri troppo grandi, colori, etc.). I CSS2 affrontano il problema con i “media type” che
consentono ai progettisti e agli utenti di progettare fogli di stile che possano produrre
documenti da trasformare più appropriatamente su certi dispositivi. Questi fogli di stile
possono adattare il contenuto alla presentazione in dispositivi braille, sintetizzatori vocali o
dispositivi TTY. Utilizzando le regole “@media” si può anche ridurre il tempo di download
consentendo agli user agent di ignorare regole inapplicabili.
Esistono diversi tipi di media che i CSS2 possono supportare, essi sono:
•
•
•
•
•
•
•
•
•
•
all: tutti i dispositivi;
aural: sintetizzatori vocali (usati soprattutto dai non vedenti);
braille: dispositivi braille a lettura tattile (usati soprattutto dai non vedenti);
embossed: stampanti braille;
handheld: dispositivi palmari;
print: stampati e 'anteprima di stampa';
projection: proiettori per presentazioni;
screen: lo schermo di un pc;
tty: dispositivi con caratteri a larghezza fissa;
tv: televisori.
Salvatore Sole
56
3.2.20 Retrocompatibilità
Gli attuali browser supportano abbastanza bene i CSS, ve ne sono tuttavia in
circolazione di più datati che non offrono una corretta interpretazione. Browser datati come
MS Internet Explorer4 o Netscape4 potrebbero rendere le pagine illeggibili.
Tecniche:
Le possibilità per aggirare il problema sono tre:
•
•
•
Creare un foglio di stile che permetta una compatibilità anche con i browser più
datati.
Non utilizzare alcun foglio di stile per questi browser.
Creare un foglio di stile apposito.
Il primo metodo è probabilmente il più sconsigliabile, in quanto si avrebbero delle
limitazioni nell’utilizzo dei CSS che porterebbero alla rinuncia di tutte le potenzialità che essi
offrono.
Il secondo e il terzo punto sono maggiormente consigliabili. Di seguito vengono
riportati alcuni esempi.
Esempio:
Con l’esempio seguente viene caricato un foglio di stile per tutti i browser, compresi
quelli più datati, il che porta ai problemi di cui si è sopra parlato.
(X)HTML
<head>
<link rel="stylesheet" type="text/css" href="foglio-di-stile.css" />
</head>
Nell’esempio che segue viene utilizzata la regola ‘@import’, che viene ignorata da
browser datati come IE4 e NN4, ma che consente ai browser più recenti di poter caricare i
fogli di stile.
Esempio:
(X)HTML
<head>
<style type="text/css">
@import url("foglio-di-stile.css");
</style>
</head>
Oppure è possibile realizzare anche un foglio di stile apposito per, ad esempio, IE4,
utilizzando entrambi i metodi.
Salvatore Sole
57
Esempio:
(X)HTML
<head>
<link rel="stylesheet" type="text/css href=\"IE4.css" />
<style type="text/css">
@import url("foglio-di-stile.css");
</style>
</head>
Salvatore Sole
58
Cap. 4 – Analisi dei principali browser
CAPITOLO 4
Analisi dei principali browser
In questo capitolo vengono presi in esame alcune tra le ultime versioni di quattro tra i
browser più noti. Si tratta di Opera 6.01, Mozilla 1.1/Netscape 7.0, Microsoft Internet Explorer 6.0.
In modo particolare si cercherà di capire come questi browser supportano i fogli di stile, quali sono
le funzionalità che essi supportano e le differenze tra di essi.
4.1 Opera 6.01
•
Fogli di stile. Le principali funzionalità dei CSS vengono supportate da questo browser
abbastanza correttamente, in modo particolare gli attributi che consentono il controllo dei
font, dello stile e dello sfondo. In particolar modo sono supportate le seguenti proprietà:
1. L’operatore ‘!important’, che si rivela fondamentale per il caricamento dei fogli di
stile personali (gli attributi non marcati con esso vengono ignorati).
2. L’attributo ‘float’ che consente di realizzare un layout gradevole senza l’uso delle
tabelle (comunque evitabili!).
•
Funzionalità. Questo browser offre diverse funzionalità che in alcuni casi si rivelano molto
utili per utenti “normali” e per utenti con disabilità:
1. Permette di navigare agevolmente da tastiera, consentendo tra l’altro
l’ingrandimento delle pagine.
2. Possiede una interfaccia personalizzabile. E’ possibile selezionare la modalità di
presentazione preferita scegliendo tra “Modalità Autore” e “Modalità Utente”. In
questo modo un utente avrà la possibilità di vedere le pagine Web o come le voleva
l’autore delle stesse oppure impostando lo stile secondo le proprie preferenze.
Solitamente, si desidera cambiare le impostazioni per la "propria" modalità, la
modalità Utente, ma è possibile cambiare anche le impostazioni nella modalità
Autore, se lo si vuole. Le seguenti impostazioni possono essere modificate per
ognuna delle modalità:
a. Fogli di stile della pagina: utilizza i fogli di stile della pagina.
b. Caratteri e colori della pagina: utilizza i caratteri ed i colori esplicitamente
definiti nel linguaggio markup della pagina.
c. Fogli di stile personali: utilizza i propri fogli di stile.
d. Caratteri e colori personali: usa i propri caratteri e colori.
e. Aspetto dei collegamenti personale: usa il proprio stile per i collegamenti.
f. Tabelle: se si disattivano le tabelle, esse spariranno dalla pagina ed il testo
all'interno delle tabelle verrà mostrato come testo normale.
3. Le pagine web sono costituite da una combinazione di testo ed immagini. Le
immagini solitamente richiedono più tempo per essere trasferite rispetto al
testo. Per rinunciare alle immagini ottenendo un caricamento delle pagine più
veloce, si può scegliere di vedere pagine prive di esse.
4. Alcune immagini possono essere animate, e sono sostanzialmente utilizzate per
banner pubblicitari nelle pagine web. Se si disattivano le animazioni, verrà mostrata
Salvatore Sole
59
solo la prima immagine nella serie dell'animazione, con il risultato di ottenere una
percezione più calma della pagina.
5. Alcune pagine web hanno stream video e suoni di sfondo incorporati all'interno di
esse. Essi possono essere disabilitati e ciò ha una grande rilevanza in quanto la
sovrapposizione di un suono di sottofondo con le parole generate da uno screen
reader, potrebbero non consentire ad un cieco di comprendere il contenuto di una
pagina.
Le funzionalità non supportate vengono di norma ignorate, come nel caso degli stili
alternativi (viene infatti visualizzato lo stile di default).
4.2 Netscape 7.0/Mozilla 1.1
•
Fogli di stile. Come nel caso del browser Opera, gli attributi che controllano font, stile e
sfondo sono sufficientemente supportati. L’attributo ‘float’ è anche in questo caso sempre
usato correttamente.
•
Funzionalità. Anche in questi browser sono presenti diverse funzionalità che consentono
una buona navigabilità da parte di tutti gli utenti:
1. E’ possibile selezionare fogli di stile alternativi. Ciò consente di poter impostare
pagine con caratteristiche differenti in modo da venire incontro alle esigenze di un
gran numero di utenti.
2. E’ possibile bloccare le finestre di pop-up, esse potrebbero confondere molte
tipologie di utenti in particolare chi ha problemi percettivi.
3. Consente di portare il testo alla dimensione voluta, anche da tastiera.
4. Si possono bloccare le immagini, che normalmente servono a mostrare annunci
pubblicitari.
5. Il browser può essere personalizzato (è possibile ad esempio impostare caratteri,
colori o immagini di sfondo).
4.3 Ms Internet Explorer 6.0
•
Fogli di stile. Come nei casi precedenti si ha una discreta tolleranza verso i CSS.
L’attributo ‘float’ non è pienamente tollerato.
•
Funzionalità. Non sono supportati né i fogli di stile alternativi, né i fogli di stile personali,
tuttavia:
1. E’ possibile navigare da tastiera, così come impostare i caratteri, i colori e la
formattazione.
2. Si possono disattivare immagini per un rapido caricamento delle pagine.
3. E’ possibile riprodurre o disabilitare i suoni.
4. Si possono riprodurre o disabilitare animazioni o video.
Salvatore Sole
60
4.4 Principali differenze
Come si è potuto notare dalla precedente analisi, le tre tipologie di browser prese in esame
presentano delle differenze notevoli. In generale i browser meglio dotati di funzionalità sono Opera,
Mozilla e Netscape.
Mozilla e Netscape offrono la possibilità di scegliere tra più fogli di stile, funzionalità non
presente negli altri browser presi in esame (essa è presente però anche in altri browser non
analizzati come ad esempio Konqueror). Opera tuttavia ha un’opzione molto simile, permette infatti
il caricamento di fogli di stile personali, che consentono all’utente di vedere le pagine web secondo
il proprio gusto.
Entrambi permettono di navigare direttamente dalla tastiera, anche se Opera, oltre ad offrire
più possibilità, permette una navigazione più intuitiva. Entrambi consentono l’ingrandimento o il
rimpicciolimento delle pagine semplicemente pigiando uno o due tasti.
Per quel che concerne MS Internet Explorer è povero di opzioni. I fogli di stile alternativi o
personali non sono presi in considerazione, la pagina può essere aperta solo con le impostazioni di
default fornite dal progettista. La navigazione da tastiera è possibile, manca tuttavia la possibilità di
ingrandimento, che anche se effettuato dal menu offre solo cinque dimensioni predefinite.
Il supporto dei CSS da parte di tutti i browser è discreto, anche se può capitare che alcuni
attributi non godano di un efficace supporto da parte di tutti (come nel caso di ‘float’ per IE).
Salvatore Sole
61
Cap. 5 – Regole pratiche
CAPITOLO 5
Regole pratiche
Il capitolo seguente illustra alcune regole da seguire nell’ iniziare la realizzazione di
una pagina web.
L’utilizzo dei CSS per la creazione di un sito, rivoluziona il modo di operare di un
progettista. Esiste infatti una concezione diversa di struttura di un sito. Nella concezione
tradizionale di struttura era infatti inclusa anche quella di layout. I fogli di stile consentono
che nel codice (X)HTML prendano posto i soli contenuti, mentre l’aspetto relativo alla grafica
del sito è separato.
Quando si realizza un sito è necessario tenere in considerazione alcuni aspetti prima di
procedere.
Innanzitutto bisogna avere bene in mente quali sono i risultati che si vogliono ottenere;
questa considerazione potrebbe apparire scontata, ma è importante avere ben chiaro come i
contenuti dovranno apparire sullo schermo e questo sia per una questione organizzativa (il
lavoro viene semplificato) e sia per un discorso di accessibilità (se i contenuti sono ben
organizzati sono, di conseguenza, anche più fruibili!).
Un modo intelligente di operare può essere quello di non considerare la pagina come
un blocco unico, ma come l’insieme di più sezioni distinte, ciascuna con le proprie
caratteristiche. Ciò offre notevoli vantaggi, ma in modo particolare due ricoprono una
notevole importanza:
•
•
La manutenzione del sito viene semplificata. Si può infatti agire solo sulle sezioni
interessate.
La realizzazione è facilitata. Si possono così organizzare i contenuti in base
all’importanza che essi ricoprono, senza necessariamente dover ricorrere a tabelle o ad
altri sotterfugi.
Qui di seguito verranno illustrate alcune “linee guida pratiche”. Esse analizzano
diversi aspetti della realizzazione di un layout, in particolare mostreranno come:
•
•
•
•
•
Centrare il box
Come realizzare un layout a tre colonne
Come formattare un articolo
In che modo realizzare degli stili differenti per media type di vario genere
Stampare utilizzando i CSS
5.1 Centrare il box
Prima di iniziare è importante valutare l’area sulla quale si ha intenzione di operare. Se
si deve lavorare sull’intera superficie della pagina, si dovranno annullare i margini del corpo
della stessa, e dovrà essere fissata alla dimensione massima l’altezza dei tag BODY e HTML,
si dovrà perciò agire nel seguente modo:
Salvatore Sole
62
CSS
body, html { margin: 0; height: 100%; }
Supponendo di voler realizzare un box che abbia 350px di larghezza e 200px di
altezza, opereremo così:
CSS
#box { width: 350px; height: 200px; }
A questo punto l’angolo superiore sinistro del box dovrà essere puntato al centro della
pagina, attraverso l’uso del posizionamento assoluto si lavorerà in questo modo:
CSS
#box { ... position: absolute; top: 50%; left: 50%; ... }
A questo punto il box, si potrà sistemare esattamente al centro della pagina, fissando a
valori negativi l’attributo ‘margin’. Al ‘margin-top’ verrà assegnato un valore che è la metà
esatta del valore assegnato all’attributo ‘height’, mentre al ‘margin-left’, la metà del valore
dell’attributo ‘width’.
CSS
#box { margin: -100px 0 0 -175px; }
Nota:
Nell’inserire degli elementi con l’attributo ‘height’, bisogna stare attenti a non forzare
l’altezza prefissata, che potrebbe portare a comportamenti imprevisti da parte dei browser.
Bisogna considerare il fatto che i browser non hanno comportamenti identici tra loro,
perciò, la soluzione mostrata negli esempi potrebbe non essere pienamente supportata da tutti.
5.2 Layout a tre colonne
La gran parte dei siti web, hanno le proprie pagine suddivise in due o più colonne.
Generalmente la colonna centrale occupa i contenuti principali, mentre le colonne laterali, ma
in particolare quella di sinistra, i collegamenti alle altre sezioni del sito, si tratta cioè di
blocchi per la navigazione.
Nel realizzare la grafica di un sito con i fogli di stile a cascata, si può agire in due
modi: utilizzando il posizionamento assoluto, oppure utilizzando sezioni “floating”.
Generalmente un layout a tre colonne è costituito da cinque parti principali:
•
•
•
•
•
Intestazione, contenente il logo e banner pubblicitari
La colonna sinistra, dove sono contenuti i link alle varie sezioni del sito
La colonna destra, dove trovano posto banner pubblicitari e sezioni di vario genere
La colonna principale, che contiene i contenuti principali
Il fondo pagina, dove vengono inserite note relative al copyright o l’indirizzo e-mail
Salvatore Sole
63
L’esempio seguente mostra più chiaramente come sono organizzate le varie sezioni:
Allo schema della pagina deve corrispondere la struttura del codice (X)HTML. La
struttura viene ottenuta assegnando a ciascuna sezione un tag <DIV> seguito dall’attributo
‘id’. In sostanza il codice verrà strutturato in questo modo:
•
•
•
L'intestazione, che viene identificata dal selettore id="intestazione"
Il corpo, identificato dal selettore id="corpo", che viene a sua volta suddiviso in tre
colonne:
o Colonna sinistra: id="colonna-sx"
o Colonna principale: id="principale"
o Colonna destra: id="colonna-dx"
Il fondo pagina, identificato dal selettore id="fondo-pagina"
Il ‘body’ del documento sarà pertanto realizzato in questo modo:
(X)HTML
<body>

<div id="testa ... </div>

<hr />

<div id="corpo">
<div id="colonna-SX"> ... </div>
<hr />
<div id="principale"> ... </div>
Salvatore Sole
64
<hr />
<div id="colonna-dx"> ... </div>
</div>
<!—FINE DEL CORPO -->
<hr />

<div id="fondo-pagina"> ... </div>

</body>
Il foglio di stile che genererà il layout, verrà impostato nel modo seguente:
l’intestazione non è caratterizzata da particolari di gran rilievo; nell’esempio viene mostrata la
classe priva degli attributi.
CSS
#intestazione { /*qui verranno collocati i vari attributi*/ }
Nel caso delle tre colonne, si deve agire in modo differente. Si può notare una
caratteristica comune, ossia l’uso dell’attributo ‘float’, il cui valore è stato impostato in tutti i
casi a ‘left’. Questa scelta implica che le tre colonne si trovino affiancate e più vicine
possibile al bordo sinistro della pagina. Si può inoltre notare che le classi che rappresentano le
due colonne laterali sono state raggruppate, questo perché sono identiche; in tal modo si
riduce il numero di linee del codice e se ne migliora la leggibilità. Per ciò che concerne il
dimensionamento delle tre sezioni, si è scelto di realizzare la colonna principale di dimensioni
maggiori, per far sì che i contenuti principali abbiano maggior risalto.
CSS
/*...*/
#colonna-sx, #colonna-dx {
background: #EEC;
color: #000;
float: left;
width: 26%;
border: none;
}
/*...*/
#principale {
background: #FFF;
color: #000;
float: left;
width: 48%;
margin-bottom: 0;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
/*...*/
Salvatore Sole
65
Il caso del fondo pagina presenta una peculiarità: in esso è infatti presente l’attributo
‘clear’ impostato al valore ‘left’, il quale tende a ripristinare la situazione precedente
all’utilizzo dell’attributo ‘float’, che, spinge gli elementi che seguono quello a cui è stato
applicato, ad affiancarsi ad esso.
CSS
/*...*/
#fondo-pagina { clear: left; }
/*...*/
L’utilizzo del posizionamento assoluto rispetto all’uso di ‘float’ offre qualche
vantaggio in più. Accade infatti che alcuni browser collochino la colonna destra sotto la
colonna sinistra, mentre il posizionamento assoluto consente una maggiore robustezza del
codice. Un altro aspetto a favore di questo tipo di posizionamento, è relativo al fatto che,
l’ordine secondo il quale le classi vengono rappresentate nel codice, non è quello che poi
apparirà nel layout. Quest’ultimo aspetto ha una notevole importanza. Nel codice (X)HTML
infatti le classi relative alle colonne potrebbero apparire per ordine di importanza, così, ad
esempio un visitatore non vedente che debba necessariamente far affidamento su uno screen
reader (che come ordine di lettura segue il codice (X)HTML), potrebbe avrebbe accesso
prima al contenuto della colonna principale e successivamente ai contenuti delle altre colonne.
Nel realizzare questo tipo di layout si deve considerare un piccolo problema
facilmente risolvibile: la colonna centrale deve essere più lunga di quelle laterali. Nel caso
siano presenti molti contenuti il problema non si pone affatto, poiché essa crescerà al crescere
dei contenuti stessi. In caso contrario sarà sufficiente aumentarne le dimensione con
l’attributo ‘padding-bottom’. I motivi che portano le colonne laterali a dipendere dalla
colonna centrale, è che esse sono posizionate in modo assoluto; ciò significa che esse non
influiranno sulla disposizione degli altri elementi della pagina. Il fondo pagina si trova
attaccato al corpo, la cui altezza è data dalla colonna centrale, che è priva di posizionamento
assoluto. Se l’altezza della colonna centrale fosse inferiore all’altezza delle colonne laterali, il
piè di pagina si sovrapporrebbe ad esse.
Un layout realizzato in questo modo, avrebbe un codice CSS realizzato come segue:
per prima cosa sarebbe bene eliminare i padding e i margini predefiniti della pagina, così:
CSS
body { margin: 0; padding: 0; }
Successivamente, si imposterà la struttura delle tre sezioni principali della pagina,
imponendo come larghezza massima 760px e facendo in modo che le tre sezioni vengano
poste al centro della pagina:
CSS
#intestazione {
width:760px;
margin: 1em auto;
text-align: left;
}
Salvatore Sole
66
#corpo {
width: 760px;
margin: 1em auto;
text-align: left;
}
#fondo-pagina {
width: 760px;
margin: 1em auto;
text-align: center; }
A questo punto, prima di posizionare le due colonne esterne in modo assoluto, si deve
posizionare la sezione “corpo” in maniera relativa, in questo modo:
CSS
#corpo { position: relative; }
Ora è possibile posizionare le colonne laterali in modo assoluto:
#colonna-sx {
position: absolute;
top: 0;
left: 0;
width: 140px; }
#colonna-dx {
position: absolute;
top: 0;
right: 0;
width: 140px; }
Essendo la sezione “corpo” posizionata in maniera relativa, le due colonne laterali, il
cui posizionamento è assoluto, vengono poste rispettivamente in alto a sinistra e in alto a
destra di esso, grazie all’attributo ‘top’ impostato al valore ‘0’ che li pone in alto e agli
attributi ‘right’ e ‘left’, impostati anch’essi a ‘0’, che posizionano le colonne alle due
estremità.
Per separare i contenuti dai bordi delle tre colonne non è consigliabile l’utilizzo
dell’attributo ‘padding’, infatti, sia il padding destro che quello sinistro vanno a sommarsi alle
dimensioni laterali del box, con il rischio che i contenuti della pagina siano più larghi della
larghezza dello schermo. Al contrario il padding superiore e quello inferiore, possono essere
tranquillamente impostati. Per risolvere il problema, è necessario racchiudere i contenuti
all’interno di “contenitori”, la cui distanza dai bordi delle colonne è ottenuta attraverso l’uso
di ‘margin’.
CSS
#contenitore {
font: 80% verdana,helvetica,sans-serif;
margin: 0 1em 1em 1em;
}
Salvatore Sole
67
5.3 Aspetti realizzativi
In questo paragrafo verranno illustrate alcune informazioni pratiche relative alla
realizzazione del codice.
Come si è già accennato nel paragrafo precedente, l’organizzazione del codice, sia
esso codice di marcatura o codice CSS, deve essere molto curata.
Nella scelta del metodo più consono alla realizzazione del sito, si deve sempre avere
bene in mente che l’accesso ad esso, non è rivolto ad una singola tipologia di utente, ma deve
consentire l’accesso a tutti.
Nel paragrafo precedente si era detto che un utente che si affida ad uno screen reader
per accedere ad una pagina, riceverebbe le informazioni in essa contenuta, secondo l’ordine
che ai contenuti è stato dato nel codice (X)HTML. Di conseguenza è conveniente fare in
modo che la colonna centrale, che come si è detto dovrebbe contenere i contenuti principali,
venga definita per prima. In questo modo però, la tecnica che prevede il posizionamento delle
colonne tramite il ‘floating’, non è utilizzabile, in quanto le colonne rispettano l’ordine
imposto nel codice. Una soluzione potrebbe essere quella di inserire, nella parte alta della
colonna sinistra, un collegamento alla mappa del sito, solo così si avrebbe immediatamente
accesso a tutti i contenuti, suddivisi per categorie. Ciò faciliterebbe la navigazione
rendendola, di conseguenza, più piacevole.
Le tabelle, sono generalmente sconsigliate per la creazione del layout, tuttavia, se il
loro utilizzo è limitato all’intabellamento dei dati, esse vengono interpretate a dovere da tutti i
browser e da tutti i dispositivi. Riguardo a quest’ultimo caso, è comunque necessaria una
piccola accortezza: i programmi lettori di schermo, leggono come si è detto a più riprese, le
righe dei contenuti presenti nel codice (X)HTML, perciò i dati devono necessariamente essere
intabellati per righe e non per colonne, pena l’incomprensione degli stessi.
Gli autori dovrebbero fornire una sintesi del contenuto e della struttura di una tabella
in modo che chi utilizza programmi utente non visuali possa comprenderla meglio. Ciò è reso
possibile dall’attributo ‘summary’.
Riprodurre la didascalia, se ne è stata definita una, tramite l’attributo ‘caption’.
Ecco un esempio:
(X)HTML
<TABLE summary="Questo è un sommario che illustra il contenuto della
tabella.
Non sarà visibile, ma un utente che navighi
le pagine appoggiandosi ad un lettore di schermo, saprà
subito cosa la tabella contiene.">
<CAPTION>DIDASCALIA. VISIBILE A TUTTI</CAPTION>
<TR> ...Una riga d'intestazione...
<TR> ...Prima riga di dati...
<TR> ...Seconda riga di dati...
...il resto della tabella...
</TABLE>
Bisogna inoltre prestare massima attenzione alle dimensioni della pagina; se si realizza
una pagina su un monitor che abbia risoluzione 1024x768, bisogna tenere in seria
considerazione il fatto che non tutti gli utenti hanno la possibilità di aprire un documento con
simili impostazioni. Bisognerebbe quindi testare il documento con una risoluzione inferiore
(ad esempio 800x600), verificando che i contenuti siano perfettamente centrati.
Salvatore Sole
68
5.4 Formattazione di un articolo
Nel formattare un articolo vanno presi in esame i diversi elementi che lo andranno a
formare, essi sono:
•
•
•
•
•
•
Il titolo
L’autore
La descrizione
I paragrafi
Le immagini
Le citazioni
Nel realizzare il titolo si consideri che in un articolo, ha il compito di dare delle
indicazioni sugli argomenti trattati, perciò si sceglieranno una dimensione e un tipo di
carattere tali da consentire ad un visitatore di poter avere rapidamente idea dei contenuti, e
quindi scegliere di leggere l’articolo o passare alla pagina successiva.
Ad esempio:
CSS
H1 {
margin: 50px 0 0 0;
font: italic 5em Georgia,serif;
color: #F93;
border-top: 5px double #F93;
border-bottom: 2px solid #F93;
padding-left: 50px;
}
Una volta attirata l’attenzione di un utente sul nostro articolo, bisognerà illustrare in
modo più approfondito i contenuti, per far questo si ricorrerà ad una descrizione. Essa avrà
una dimensione più contenuta ed un diverso tipo di carattere, così:
CSS
H2 {
...
margin: 10px 0;
font: italic 1.5em Verdana,sans-serif;
color: #000;
text-align: right;
...
}
Le informazioni relative all’autore avranno dimensione minore, ma carattere identico a
quello della descrizione:
CSS
#autore {...font: italic 0.7em Verdana,sans-serif; color: #000; ...}
Salvatore Sole
69
Il corpo dell’articolo deve essere realizzato con in mente il fatto che deve essere
leggibile. Un utente tende ad essere scoraggiato dal leggere delle pagine che si leggono a
fatica e quindi potrebbe abbandonare il sito. Sarebbe bene scegliere dei font di tipo serif,
come il Georgia e delle dimensioni sufficientemente grandi.
Le indicazioni generali sul posizionamento e sulle caratteristiche dell’articolo devono
essere collocate in una apposita classe:
CSS
#articolo { font: 1em Georgia,serif; margin: 0 50px 50px 50px; }
Per ciò che riguarda le specifiche caratteristiche di ciascun paragrafo, generalmente
sono due: la prima riga risulta rientrata di qualche pixel, mentre la prima lettera del primo
paragrafo è più grande. Per il primo caso agiremo così:
CSS
#articolo { text-indent: 2em; text-align: justify; }
Mentre per il secondo:
CSS
#articolo #paragrafo1:first-letter {
float: left;
font: italic 3em;
color: #FFF;
background: #F93;
...
}
Si noti che l’aver impostato l’attributo ‘float’ al valore ‘left’ consente che il testo si
avvolga tutto attorno alla prima lettera. Lo sfondo e il colore differenti servono a dare
maggior risalto.
Immagini e citazioni sono generalmente “immerse” nel documento perciò è
conveniente creare un po’ di spazio attorno ad esse attraverso l’attributo ‘margin’ e, con la
proprietà ‘float’ impostata ai valori ‘left’ o ‘right’, far sì che il testo le avvolga.
5.5 Media type diversi
Quando si realizza una pagina web, si deve sempre prendere in considerazione il fatto
che, l’accesso al sito potrebbe avvenire con i mezzi più disparati.
Questo pone il progettista nella condizione di dover realizzare dei fogli di stile
separati, con caratteristiche diverse per ogni media type. In linea di massima si può comunque
dire che, progettando bene la pagina si può evitare questa “complicazione”. In particolare, ci
si dovrebbe però attenere ad alcune regole:
•
Valutare il fatto che non tutti i dispositivi visualizzano i colori. I palmari ad esempio
sono spesso in bianco e nero.
Salvatore Sole
70
•
•
Ricordarsi di dimensionare correttamente le varie parti del layout, evitando di
utilizzare elementi con una grandezza fissa troppo elevata, come ad esempio dei
banner con dimensione 468x60.
Alcuni dispositivi utilizzano caratteri con grandezza fissa. In questo caso sarebbe bene
non utilizzare unità espresse in pixel.
Nel caso si dovessero utilizzare dei banner pubblicitari o altri elementi aventi
grandezza fissa eccessiva, bisognerebbe evitare la visualizzazione da parte dei dispositivi
palmari, quella che segue dovrebbe essere la soluzione più opportuna:
(X)HTML
...
<style type=”text/css” media=”handheld”> @import
“palmare.css”</style>
...
CSS
...
.banner468x60 { display: none; }
...
Nel caso si volesse rendere il contenuto della pagina stampabile, è opportuno creare un
foglio di stile apposito. Bisogna infatti partire dal presupposto che, media differenti hanno
necessità differenti. Questo è tanto più vero nel caso della stampante, in quanto si presentano
notevoli problemi relativi alla stampa di una pagina. Alcuni progettisti tendono a creare delle
pagine separate con il layout impostato per la stampa. Tuttavia si va incontro a due problemi:
il primo è che il collegamento alla pagina non è sempre visibile, perciò in genere si stampa la
pagina con risultati scadenti (colori non adatti, ridondanze, etc.). Il secondo motivo è che si
dovrebbero realizzare due documenti, con un conseguente aumento delle dimensioni e del
lavoro, sia esso manutentivo o realizzativo. Bisogna pertanto agire come segue:
•
•
•
•
Il colore può andar bene sullo schermo, ma le stampanti in bianco e nero non
sarebbero in grado di riprodurre gli stessi risultati
I menu di navigazione e i banner sono inutili
Un carattere che su schermo ha una buona leggibilità, potrebbe non essere altrettanto
leggibile su carta
Le unità di misura utilizzate sullo schermo (ad esempio i pixel) non sono molto adatte
alla stampa (i millimetri e i punti sono infatti da preferire).
Se si volesse eliminare il superfluo, ad esempio banner pubblicitari e barre di
scorrimento, si dovrebbe utilizzare l’attributo ‘display’, impostato al valore ‘none’, nel
seguente modo:
CSS
#barra, .banner { display: none; }
Per ciò che concerne le unità di misura, l’esempio che segue mostra come creare due
bordi neri spessi 1mm sia sopra che sotto l’intestazione:
Salvatore Sole
71
CSS
#header {
border-top: 1mm solid #000; border-bottom: 1mm solid #000; }
Come si è detto il carattere deve essere leggibile. Ciò può essere ottenuto scegliendo
caratteri di tipo ‘serif’ come il ‘Georgia’ e dimensioni accettabili.
L’esempio seguente illustra le principali caratteristiche del corpo della pagina:
CSS
body {
font-family: Georgia, serif;
font-size: 10pt;
text-indent: 10mm;
text-align: justify;
color: #000;
background-color: #FFF;
}
Salvatore Sole
72
Cap. 6 – Esempio
CAPITOLO 6
Esempio
In questo capitolo viene presentato un esempio pratico sull’utilizzo dei CSS. Il codice
completo della pagina viene presentato nella Appendice A, mentre qui di seguito verranno
commentati gli aspetti più salienti.
Come si è visto nei capitoli precedenti i CSS si pongono come uno strumento in grado
di offrire numerose possibilità al progettista di siti. L’obbiettivo di questo capitolo è quello di
prendere una pagina esistente e ricostruirla mantenendo pressoché immutata la grafica nel
rispetto delle regole di accessibilità.
Il sito scelto è quello della società Tiscali S.p.A., del quale è stata riprogettata la
pagina principale, datata 11 marzo 2003.
A tale data i progettisti non utilizzavano più le tabelle per la realizzazione della grafica
bensì i CSS. Tuttavia il loro utilizzo non era corretto, in quanto si faceva largo uso di fogli di
stile in linea, che portavano ad una fusione tra i contenuti e il layout, ciò che durante la fase di
progettazione dovrebbe essere evitato. Nel sito in analisi sono presenti inoltre elementi
disapprovati dal W3C, come ad esempio il tag HTML <CENTER> o l’attributo ‘border’ e
viene fatto un uso eccessivo del javascript, spesso sostituibile con il normale codice HTML.
La scelta del sito è stata determinata dal fatto che esso presenta una pagina non
conforme alle regole dettate dal W3C e allo stesso tempo dotata di una certa complessità,
criteri fondamentali per dimostrare che i CSS rappresentano lo strumento adeguato a creare
layout eleganti e accessibili.
Il sito considerato è un tipico esempio di layout a tre colonne. Esso è costituito da una
intestazione, da un corpo suddiviso in tre parti (le tre colonne) e da un piè di pagina.
Il codice inizia con la definizione delle caratteristiche generali della pagina: vengono
impostati il tipo di font, la sua dimensione, i colori e la larghezza del box.
body { font: 64% verdana, helvetica, sans-serif;
text-align: center; background: #FFF; color: #000;
margin: 0; padding: 0; }
Eliminazione dei bordi dalle immagini.
img { border: none; }
Classe per il ripristino dell’allineamento dopo l’uso di ‘float’.
.ripristino-float { clear: left; }
Definizione del comportamento dei collegamenti.
a:link, a:hover, a:visited { color:#23396B; }
Inizio della struttura generale. Vengono definite le caratteristiche generali delle tre
parti principali della pagina: intestazione, corpo, pie-pagina. E’ stata fissata per ciascuna delle
Salvatore Sole
73
Cap. 6 – Esempio
tre parti il valore dell’attributo ‘margin’ a ‘0 auto’. In questo modo la pagina sarà
perfettamente centrata. Si è stabilita la stessa larghezza di 765px per tutte e tre le sezioni.
L’intestazione deve avere un posizionamento relativo per evitare che il corpo gli si
sovrapponga.
#intestazione { position: relative; background: #FFF; color: #000;
margin: 0 auto; width: 765px; text-align: left;}
Il corpo deve essere posizionato relativamente, per consentire alle colonne laterali un
allineamento corretto.
#corpo { position: relative; color: #000; background: #FFF;
margin: 0 auto; width: 765px; text-align: left; }
Posizionando relativamente il fondo pagina, si ottiene che esso si unisca alla colonna
principale.
#pie-pagina { position: relative; top: 0; left: 0; width: 765px;
margin: 12px auto; text-align: center; color: #000;
background: #FFF; border-top: 1px solid #FFF; }
Dopo aver definito la struttura generale ha inizio l’intestazione. Questa sezione è
suddivisa in tre parti: nella prima sono stati definiti la posizione del logo e di un banner
pubblicitario. Nella seconda viene definita una palette con i collegamenti alle principali
sezioni del sito. Nella terza riga, le parti che separano l’intestazione dalle tre colonne: a
sinistra la data odierna (nel sito ufficiale ottenuta con un codice realizzato in javascript), al
centro un collegamento e a destra un altro link.
In tutte le righe di questa sezione, si è fatto largo uso della proprietà ‘float’. Da quanto
esposto in precedenza, l’allineamento dovrà essere ripristinato dopo ciascuna delle tre
sottosezioni, mediante la classe “.ripristino-float”.
#intestazione .riga-1 .logo { float: left; padding: 2px 0; }
#intestazione .riga-1 .banner { float: right; padding: 2px 0; }
#intestazione .riga-2 { text-transform: uppercase; font-weight:
bold; text-align: center; }
#intestazione .riga-2 .arancio { float: left; padding: 4px 10px;
width: 73px;
text-align: center; background: #F90 url("immagini/sf4.gif") norepeat bottom; }
#intestazione .riga-2 .arancio a { color: #FFF; text-decoration:
none; }
#intestazione .riga-2 .violetto { float: left; border-left: 2px
solid #FFF; width: 74px; padding: 4px;
background: #D8D5E8; color: #2C2453; }
#intestazione .riga-2 .violetto a { text-decoration: none; }
#intestazione .riga-3 { background: #FFF; }
#intestazione .riga-3 .data { float: left; padding: 5px 0; textalign: left; }
Salvatore Sole
74
Cap. 6 – Esempio
#intestazione .riga-3 .centro { float: left; width: 463px; padding:
1px 0;
margin: 5px 0 0 20px; text-align: center; font-weight: bold; textdecoration: underline; color: #2C2453;
background: #E7E7E7; }
#intestazione .riga-3 .centro a { color:#23396B; text-decoration:
underline; }
#intestazione .riga-3 .end { float: right; padding: 5px 0; textdecoration: underline; }
Al termine dell’intestazione ha inizio la definizione della colonna sinistra.
E’ necessario il posizionamento assoluto della colonna, poiché solo in tal modo questa
potrà affiancarsi alla colonna principale. Trovandosi all’interno del corpo essa si posizionerà
in alto a sinistra per mezzo delle proprietà ‘top’ e ‘left’ impostate al valore ‘0’.
#corpo #colonna-sx { position: absolute; top: 0; left: 0;
width: 140px; color: #000; background: #FFF; text-align: left; }
I collegamenti ai servizi offerti dalla società sono stati inseriti nella colonna sinistra.
Avendo tutti le medesime caratteristiche, fanno capo alla stesse classi.
#corpo #colonna-sx .tipo-servizio { width: 110px;
padding: 2px 15px; color: #FFF;
background: #3F2B84
url("immagini/frtr.gif") no-repeat left;
font: bold 1em Verdana, sans-serif;
border-bottom: 1px solid #FFF; }
#corpo #colonna-sx .servizio-link { width: 110px; height: auto;
padding: 2px 15px; border-bottom: 1px solid #FFF;
background-color: #D9D5E6; }
#corpo #colonna-sx .servizio-link a {color: #0E3178;
text-decoration: none; font: bold 1em Verdana, sans-serif;}
#corpo #colonna-sx .servizio-link2 { width: 140px; height: 14px;
border-bottom: 1px solid #FFF; background-color: #D9D5E6; }
#corpo #colonna-sx #registrazione { padding: 2px 0;
background: #D9D5E6; }
#corpo #colonna-sx .formtxt { float: left; width: 85px;
text-transform: uppercase; margin: 0 4px 0 12px; }
#corpo #colonna-sx .p1 { padding-left: 12px;
font: bold 1em verdana, sans-serif; }
#corpo #colonna-sx #banner-sx { background: #EEE;
padding: 8px 0 8px 10px; }
#corpo #colonna-sx #radio { background: #145189; height: 70px;
padding: 2px 0; }
#corpo #colonna-sx .selezione { float: left; width: 75px;
margin-left: 2px; }
In seguito alla definizione della colonna sinistra, si definisce la sezione principale.
Salvatore Sole
75
Cap. 6 – Esempio
Nella sezione principale non si ha alcun posizionamento assoluto, per fare in modo che
le sezioni esterne possano affiancarsi ad essa. È fondamentale fissare i margini laterali, al fine
di evitare l’occupazione dell’intero corpo da parte della colonna principale.
#sezione-principale { margin: 0 152px 0 150px; color: #000;
background: #FFF; }
La classe “.form-ctrle” definisce, in tutta la colonna, lo stesso comportamento per tutti
i form.
#corpo #sezione-principale #top .form-ctrle { float: left;
width: 200px; text-transform: uppercase;
margin: 0 4px 0 12px; }
Il resto del codice non presenta caratteristiche di rilievo. La sezione è suddivisa in
diverse sottoclassi per facilitare il lavoro di progettazione, ma anche e soprattutto per
semplificarne la manutenzione.
La parte contenente il motore di ricerca e la palette ha il nome di “#principale1”. La
parte sottostante, dove si trovano foto unite ad alcuni collegamenti, consta di due parti:
“#colon-sx-pr” e ”#colon-dx-pr”. Di seguito sono stati raggruppati i numerosi collegamenti in
due classi, chiamate rispettivamente “#principale2” e “principale4”. L’ultima parte della
sezione è compresa all’interno della classe “#blocco-basso”. Essa comprende altre classi,
contenute in “#basso-sx” e “#basso-dx”.
La colonna destra non presenta differenze rilevanti rispetto alla colonna sinistra.
Tuttavia, al posto della proprietà ‘left’, si usa la proprietà ‘right’, sempre impostata al valore
‘0’.
L’ultima sezione del sito è il fondo pagina. Essa contiene informazioni relative al
diritto d’autore nella parte alta e collegamenti alle sezioni dei vari paesi europei nella parte
bassa.
#pie-pagina .testo-barra1 { background: #3F2B84; width: 765px;
float: left; text-align: left;
padding: 2px 0; color: #FFF; font-size: 0.9em; }
#pie-pagina .space { padding-right: 470px; }
#pie-pagina .paesi { width: 765px; float: left; text-align: center;
padding: 2px 0 2px 0; color: #0E3178;
font-size: 0.9em; }
Nella realizzazione del sito si sono riscontrati alcuni problemi derivanti dalle tecniche
impiegate. Tali problemi sono da attribuire ad una errata interpretazione dei CSS da parte dei
diversi browser, interpretazione che presiede alla scelta delle soluzioni più opportune in fase
progettuale. In questo senso l’attributo ‘padding’ non viene interpretato allo stesso modo da
tutti i browser. In alcuni casi infatti la soluzione adottata per realizzare alcune sezioni della
pagina non corrisponde esattamente all’originale, in quanto, un browser su tre (tra quelli
analizzati nel capitolo quattro), potrebbe, in determinate circostanze, non applicare affatto
questa regola o applicarla in maniera errata. La dimensione di default dei caratteri, inoltre,
varia da un browser all’altro comportando delle difficoltà nel rendere la distanza verticale tra i
vari elementi.
Salvatore Sole
76
Cap. 6 – Esempio
Nonostante le difficoltà riscontrate è possibile affermare che l’obbiettivo proposto sia
stato raggiunto, in quanto è stata ricreata la pagina con le tecniche prese in esame. Si è inoltre
ottenuta una pagina accessibile e conforme agli standard del W3C (la pagina è stata validata
on line nel sito www.w3.org con i validatori per i CSS e per l’(X)HTML ed è stata validata
dal validatore Bobby 3.1.1). Tuttavia, va sottolineato come la ricerca di un compromesso tra
differenti browser determini imprecisioni grafiche nella resa di alcuni dettagli.
Salvatore Sole
77
Conclusioni
CONCLUSIONI
Lo studio effettuato sui CSS ha posto in rilievo diversi aspetti legati alle possibilità e
ai limiti che essi presentano.
L’uso dei CSS consente la cura dettagliata di ogni minimo aspetto grazie all’ampio
numero di attributi che essi offrono. Forniscono inoltre al progettista la possibilità di poter
elaborare l’aspetto grafico di una pagina senza confonderlo con i contenuti, e consentono il
rispetto delle linee guida per l’accessibilità agli stessi.
L’esempio realizzato ha evidenziato vantaggi e svantaggi legati all’utilizzo dei fogli di
stile a cascata. È stato mostrato che una pagina concepita con delle tecniche errate può essere
ricostruita e resa conforme agli standard W3C nel rispetto delle scelte grafiche effettuate in
fase di progettazione. Ciononostante molte sono ancora le asperità progettuali, non sempre
dovute all’impiego dei CSS, quanto al fatto che non si ha un adeguato supporto da parte dei
browser.
Attualmente la progettazione di gran parte dei siti internet è orientata
all’ottimizzazione verso un solo browser. In questa sede, conformemente al lavoro svolto e
agli esiti raggiunti, si auspica un maggiore sforzo da parte dei produttori di software, volto ad
uniformare i propri prodotti ad un unico standard, al fine di estendere l’utilizzo dei CSS alla
totalità dei progettisti e facilitare la fruizione dei siti internet anche ad utenti svantaggiati.
Salvatore Sole
78
Bibliografia
BIBLIOGRAFIA
•
W3C, http://www.w3.org
•
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December
1996, modificato l’11 January 1999, http://www.w3.org/TR/1999/REC-CSS119990111.
•
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I.
Jacobs, eds., 12 May 1998, http://www.w3.org/TR/1998/REC-CSS2-19980512/.
•
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden,
and I. Jacobs, eds., 5 May 1999. Le raccomandazioni WCAG 1.0,
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
•
“Linee guida per l’accessibilità ai contenuti del Web”, traduzione a cura di
Vanni Bertini, Michelangelo Bottura, Annalisa Cichella, Maria Cristina Giavoni,
Adelmo Taddei, http://www.aib.it/aib/cwai/WAI-trad.htm/.
•
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G.
Vanderheiden, I. Jacobs, eds., http://www.w3.org/TR/WCAG10-TECHS/.
•
http://www.constile.org
•
http://www.diodati.org
•
http://www.meyerweb.com
Salvatore Sole
79
Appendice A
Appendice A
In questa appendice, viene riportato per intero, l’esempio illustrato nel capitolo 6. Esso verrà
suddiviso in due parti: nella prima il codice (X)HTML mentre nella seconda il codice CSS.
(X)HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Tiscali Italia</title>
<meta http-equiv="content-type" content="text/html; charset=iso8859-1" />
<style type="text/css" media="screen"> @import "stile.css"; </style>
</head>
<body>

<div id="intestazione">
<div class="riga-1">
<div class="logo"><img src="immagini/logo-tiscali.gif" alt="logo
Tiscali" title="logo Tiscali" /></div>
<div class="banner"><a href="#"><img src="immagini/ADSL.gif"
alt="ADSL" title="ADSL" /></a></div>
</div>
<div class="ripristino-float"></div>
<span class="arancio"><a href="#">abbonati</a></span>
<span class="violetto"><a href="#">adsl</a></span>
<span class="violetto"><a href="#">mail</a></span>
<span class="violetto"><a href="#">fax</a></span>
<span class="violetto"><a href="#">webspace</a></span>
<span class="violetto"><a href="#">netphone</a></span>
<span class="violetto"><a href="#">mobile</a></span>
<span class="violetto"><a href="#">foto</a></span>
<span class="violetto"><a href="#">assistenza</a></span>
</div>
Salvatore Sole
80
Appendice A
<div class="data">Data odierna Javascript</div>
<div class="centro"><a href="#">ING direct - Conto Arancio al 6% ai nuovi clienti per tutto aprile</a></div>
<div class="end"><a href="#">Fai di Tiscali la tua home!</a></div>
</div>
</div>


<div id="corpo">

<div id="sezione-principale">
<div id="principale1">
<div id="top">
<div id="search">
<div id="lente"><img src="immagini/lente.gif" alt=""/></div>
<form action="#" method="get">
<a href="#">SEARCH</a>
<input class="form-ctrle" type="text" maxlength="100" name="qs"/>
<a href="#" title="Vai"><img alt="Vai" src="immagini/vai.gif" /></a>
<span class="ric-avanzata"><a href="#">Ricerca avanzata</a></span>
</form>
</div>
<a href="#" title="Cerca nel web"><img alt="Cerca nel web"
src="immagini/tabweb.gif" /></a>
<a href="#" title="Mp3"><img alt="Mp3" src="immagini/tabmp3.gif"
/></a>
<a href="#" title="Immagini"><img alt="Immagini"
src="immagini/tabimage.gif"
/></a>
<a href="#" title="Video"><img alt="Video"
src="immagini/tabvideo.gif" /></a>
<a href="#" title="Mappe"><img alt="Mappe"
src="immagini/tabmappe.gif" /></a><br />
</div>
<div id="colon-sx-pr">
<a href="#" title="Indovina l'opera misteriosa"><img alt="Indovina
l'opera misteriosa"
src="immagini/gioco.jpeg" /></a><a href="#">Indovina l'opera
misteriosa</a><br />
Salvatore Sole
81
Appendice A
Scopri il capolavoro di questa settimana. Vai alle soluzioni degli
scorsi giorni e
ai nomi dei vincitori di "Gioca con Arte" <span
class="freccette"><a href="#">»</a></span>
<div id="notizie">
<div class="ora">13:51 <a href="#">IRAQ: ONU, VOTO SLITTA A
GIOVEDì</a></div>
<div class="ora">13:42 <a href="#">calcio: ENEL SPONSOR LEGA
DILETTANTI</a></div>
<div class="ora">13:37 <a href="#">SCI: CDM, ULTIME GARE IN
NORVEGIA</a></div>
</div>
</div>
<div id="colon-dx-pr">
<a href="#" title="Totti e Cassano"><img alt="Totti e Cassano"
src="immagini/roma.jpeg" /></a>
<a href="#">Inter e Roma: notte da leoni</a><br />
Sfida italo-inglese in Champions <span class="freccette"><a
href="#">»</a></span>
<a href="#" title="Saddam Hussein"><img alt="Saddam Hussein"
src="immagini/saddam.jpeg" /></a>
<a href="#">Iraq, salta l'ultimatum</a><br />
Slitta anche il voto dell'ONU<span class="freccette"><a
<div id="tg"><a href="#">Tg e video on line</a><br />
RaiNet: una finestra sull'informazione<span class="freccette"><a
</div>
</div>
<div class="colonna">
<div class="link1"><a href="#">Animali</a></div>
<span class="link2"><a href="#">Cani,Gatti...</a></span>
<div class="link1"><a href="#">Annunci</a></div>
<span class="link2"><a href="#">Auto,Case...</a></span>
<div class="link1"><a href="#">Arte</a></div>
<span class="link2"><a href="#">Mostre,Artisti...</a></span>
<div class="link1"><a href="#">Broadband</a></div>
<span class="link2"><a href="#">Film,Trailer...</a></span>
<div class="link1"><a href="#">Casa</a></div>
<span class="link2"><a href="#">Arredo,Beauty...</a></span>
Salvatore Sole
82
Appendice A
<br/><br/>
<span class="link3"><a href="#">Nuovi amici</a></span>
</div>
<div class="link1"><a href="#">Downloads</a></div>
<span class="link2"><a href="#">Mac,Windows...</a></span>
<div class="link1"><a href="#">Europa</a></div>
<span class="link2"><a href="#">Finanziamenti...</a></span>
<div class="link1"><a href="#">Finanza</a></div>
<span class="link2"><a href="#">News,Consigli...</a></span>
<div class="link1"><a href="#">Giochi</a></div>
<span class="link2"><a href="#">Gamesurf,News...</a></span>
<div class="link1"><a href="#">No Profit</a></div>
<span class="link2"><a href="#">Volontariato...</a></span>
<br/><br/>
<span class="link3"><a href="#">Musica gratis</a></span>
</div>
<div class="link1"><a href="#">Lavoro</a></div>
<span class="link2"><a href="#">Offerte,Concorsi...</a></span>
<div class="link1"><a href="#">Mode</a></div>
<span class="link2"><a href="#">Società,Foto...</a></span>
<div class="link1"><a href="#">Motori</a></div>
<span class="link2"><a href="#">Listino,Usato...</a></span>
<div class="link1"><a href="#">Musica</a></div>
<span class="link2"><a href="#">Concerti,Mp3...</a></span>
<div class="link1"><a href="#">Notizie</a></div>
<span class="link2"><a href="#">TiscaliOggi...</a></span>
<br/><br/>
<span class="link3"><a href="#">Web per bimbi</a></span>
</div>
<div class="link1"><a href="#">Shopping</a></div>
<span class="link2"><a href="#">Novità_Nokia...</a></span>
<div class="link1"><a href="#">Spettacoli</a></div>
<span class="link2"><a href="#">Cinema,Gossip...</a></span>
<div class="link1"><a href="#">Sport</a></div>
<span class="link2"><a href="#">Calcio,F1...</a></span>
<div class="link1"><a href="#">Tecnologia</a></div>
<span class="link2"><a href="#">Internet,Sfondi...</a></span>
<div class="link1"><a href="#">Viaggi</a></div>
<span class="link2"><a href="#">Crociere,Hotel...</a></span>
<br/><br/>
<span class="link3"><a href="#">Vinci premi JVC</a></span>
</div>
</div>
Salvatore Sole
83
Appendice A
<a href="#"><span class="grassetto">Broadband:</span> E' arrivato
"The Hours , scopri i
trailer dei nuovi
film"</a><br/>
<a href="#"><span class="grassetto">Musica:</span> Scarica i nuovi
successi di artisti
nazionali e
internazionali</a><br/>
<a href="#"><span class="grassetto">Mobile:</span> Tutte le notizie
e le quotazioni della
borsa sul tuo
telefonino</a>
</div>
<div id="blocco-basso">
<div id="basso-sx">
<span class="freccia-grigia"><img src="immagini/frgray.gif"
alt=""/></span>
<div id="titolo-basso-sx"> Da non perdere</div>
<div id="basso-sx-sfondo">
<div class="titoli-basso-sx"><a href="#">SFONDI: CUCCIOLI SUL
DESKTOP</a></div>
<div class="testi">Dodici fantastiche immagini di cani e gatti</div>
<div class="titoli-basso-sx"><a href="#">SPECIALE PETER
GABRIEL</a></div>
<div class="testi">Scarica il suo ultimo album "Up" dal Tiscali
Music Club</div>
<div class="titoli-basso-sx"><a href="#">STAMPA LE TUE
IMMAGINI</a></div>
<div class="testi">Con Tiscali Foto a casa tua in 48 ore a prezzi
imbattibili</div>
<div class="titoli-basso-sx"><a href="#">IL TUO PC SENZA
SEGRETI</a></div>
<div class="testi">Le guide ai sistemi operativi e ai programmi più
diffusi</div>
<div class="titoli-basso-sx"><a href="#">LAVORO: POSTI NELL'HITECH</a></div>
<div class="testi">Always on Networks e Saga cercano tecnici e
ingegneri</div>
<div class="titoli-basso-sx"><a href="#">VIDEOGAME</a></div>
<div class="testi">Le soluzioni agli ultimi giochi usciti per tutte
le piattaforme
<div id="anche">vedi anche: <a href="#">Scarica i tuoi
giochi</a></div></div>
</div>
<div class="tipo-servizio2">FINANZA</div>
<div id="finanza1">
Salvatore Sole
84
Appendice A
<a href="#" title="Mibtel"><img alt="Mibtel"
src="immagini/mibtel.gif" /></a>
<div class="spazio-dati"></div>
<span class="dati">Mibtel</span>15758 +0.46
<div class="riga-dati"></div>
<span class="dati">Numtel</span>1074 -0.74
<span class="dati">Nasdaq</span>1278 -2.06
</div>
<div id="dati-borsa">
<div class="p4">Cerca</div>
<input class="form-ctrle2" type="text" maxlength="100" name="qs" />
</form>
</div>
<div id="borsa-italiana">Dati borsa italiana ritardati di 20
minuti</div>
</div>
<div id="basso-dx">
<div class="foto-basso-dx"><a href="#" title="Grande Fratello"><img
alt="Grande fratello" src="immagini/victoria.jpeg"/></a></div>
<div class="titoli-basso-dx"><a href="#">I sogni proibiti di
Vic</a></div>
<div id="testo-basso-dx">E' l'ora della verità per i ragazzi della
Casa del Grande Fratello<a href="#">
»</a></div>
<div class="anche">vedi anche: <a href="#">Alle star piace
strano</a></div>
<div class="format-testo">
<div class="titoli-basso-dx"><a href="#">Gli immigrati sono
discriminati?</a></div>
<div id="testo-basso-dx">In Italia aumentano i regolari ma anche gli
espulsi. Cosa ne pensi?<a href="#">
»</a></div>
<div class="anche">vedi anche: <a href="#">Pace, invia la tua
foto</a></div>
</div>
<div class="foto-basso-dx"><a href="#" title="Ragazza"><img
alt="Ragazza" src="immagini/europa.jpeg"
/></a></div>
<div class="titoli-basso-dx"><a href="#">Le tue foto
dall'Europa</a></div>
<div id="testo-basso-dx">Condividi i ricordi di un viaggio in una
galleria fotografica virtuale<a href="#">
»</a></div>
<div class="anche">vedi anche: <a href="#">Studiare
nell'UE</a></div>
Salvatore Sole
85
Appendice A
</div>
<div class="titoli-basso-dx"><a href="#">"Sanremo è truccato":
Forum</a></div>
<div id="testo-basso-dx">La denuncia del Codacons, ribadita da
"Striscia la notizia". Indagini in corso. Il Forum<a href="#">
»</a></div>
<div class="anche">vedi anche: <a href="#">Da rapper a
fotografo</a></div>
</div>
<div class="titoli-form">OROSCOPO</div>
<div id="segno">
</form>
<div class="p5">Il segno del mese è:<a href="#"> Pesci</a></div>
</div>
<div class="titoli-form">METEO</div>
<div id="tempo">
</form>
<div id="roma">
<img alt="Sole" src="immagini/sole.gif" />
<div class="citta">Roma</div><br/>
<div class="minima">5</div>
<div class="massima">17</div>
</div>
<div id="milano">
<img alt="Poconuvoloso" src="immagini/poconuvoloso.gif" />
<div class="citta">Milano</div><br/>
<div class="minima">3</div>
<div class="massima">17</div>
</div>
</div></div></div></div>

<div id="colonna-sx">

<div class="tipo-servizio">TISCALI 10.0</div>
<div id="registrazione">
<div class="p1">userID</div>
<input class="formtxt" type="text" maxlength="100"
Salvatore Sole
name="qs" />
86
Appendice A
<div class="p1">password</div>
<input class="formtxt" type="text" maxlength="100" name="qs"/>
</form>
</div>
<div id="banner-sx"><a href="#" title="E-Bay"><img alt="E-Bay"
src="immagini/EBay.gif" /></a></div>
<div class="tipo-servizio">SERVIZI</div>
<div id="servizi-vari">
<div class="servizio-link"><a href="#">Mail</a></div>
<div class="servizio-link"><a href="#">Fax</a></div>
<div class="servizio-link"><a href="#">Agenda</a></div>
<div class="servizio-link"><a href="#">Netphone</a></div>
<div class="servizio-link"><a href="#">Mail by Phone</a></div>
<div class="servizio-link"><a href="#">Foto</a></div>
<div class="servizio-link"><a href="#">Music Club</a></div>
<div class="servizio-link2"></div>
</div>
<div class="tipo-servizio">ASSISTENZA</div>
<div id="assistenza-vari">
<div class="servizio-link"><a href="#">Pop d'accesso</a></div>
<div class="servizio-link"><a href="#">Cambio password</a></div>
<div class="servizio-link"><a href="#">Assistenza ADSL</a></div>
<div class="servizio-link"><a href="#">Sicurezza</a></div>
</div>
<div class="tipo-servizio">MOBILE</div>
<div id="mobile-vari">
<div class="servizio-link"><a href="#">Sms</a></div>
<div class="servizio-link"><a href="#">Loghi &
Suonerie</a></div>
<div class="servizio-link"><a href="#">Sms animati</a></div>
<div class="servizio-link"><a href="#">Giochi Java</a></div>
</div>
<div class="tipo-servizio">COMMUNITY</div>
<div id="community-vari">
<div class="servizio-link"><a href="#">Webspace</a></div>
<div class="servizio-link"><a href="#">People</a></div>
<div class="servizio-link"><a href="#">Messenger</a></div>
<div class="servizio-link"><a href="#">Chat IRC</a></div>
<div class="servizio-link"><a href="#">Clubs</a></div>
<div class="servizio-link"><a href="#">Blog</a></div>
</div>
<div class="tipo-servizio">TISCALI</div>
<div id="tiscali-vari">
Salvatore Sole
87
Appendice A
<div class="servizio-link"><a href="#">Chi siamo</a></div>
<div class="servizio-link"><a href="#">Investor Relations</a></div>
<div class="servizio-link"><a href="#">Contattaci</a></div>
<div class="servizio-link"><a href="#">Carta dei Servizi</a></div>
<div class="servizio-link"><a href="#">Pubblicità</a></div>
</div>
<div class="tipo-servizio">TISCALI RADIO</div>
<div id="radio">
<a href="#" title="Tiscali radio"><img alt="Tiscali radio"
src="immagini/tisradio.gif" /></a>
<input class="selezione" type="text" maxlength="100" name="qs" />
<a href="#" title="play"><img alt="play" src="immagini/play.gif"
/></a>
</form>
</div>
</div>


<div id="colonna-dx">
<a href="#" title="Vai a Tiscali ADSL"><img alt="Vai a Tiscali ADSL"
src="immagini/adsl.jpeg"
/></a>
<div id="rettangolo1">
<div class="freccia"><img src="immagini/frprimo.gif" alt=""/></div>
<div id="adsl">Adsl</div>
<div id="adsl-gratis"><a href="#">Gratis fino a 9 mesi!</a></div>
<div id="sfprimo"><img src="immagini/sfprimo.gif" alt=""/></div>
</div>
<div id="gratis">Internet gratis</div>
<div id="internet-gratis"><a href="#">Abbonati subito</a></div>
<div id="sfsecondo"><img src="immagini/sfsecondo.gif" alt=""/></div>
</div>
<div id="ricaricasa">Ricaricasa</div>
<div id="tis-ricaricasa"><a href="#">Acquistala on line</a></div>
<div id="sfterzo"><img src="immagini/sfterzo.gif" alt=""/></div>
</div>
<div class="freccia"><img src="immagini/frsecondo.gif"
alt=""/></div>
Salvatore Sole
88
Appendice A
<div id="point">Tiscali Point</div>
<div id="tis-point"><a href="#">L'offerta Tiscali</a></div>
<div id="sfquarto"><img src="immagini/sfquarto.gif" alt=""/></div>
</div>
alt=""/></div>
<div id="business">Business</div>
<div id="tis-business"><a href="#">Soluzioni per aziende</a></div>
<div id="sfquinto"><img src="immagini/sfquinto.gif" alt=""/></div>
</div>
alt=""/></div>
<div id="domini">Domini</div>
<div id="tis-domini"><a href="#">Il tuo nome in rete</a></div>
<div id="sfsesto"><img src="immagini/sfsesto.gif" alt=""/></div>
</div>
<div id="banner-dx">
<div class="immagine3"><a href="#" title="Tecnocasa"><img
alt="Tecnocasa" src="immagini/tecnocasa.gif" /></a></div>
</div>
<div class="tipo-servizio3">SHOPPING</div>
<div id="shopping">
<div class="immagini-piccole"><a href="#" title="Borsa in
jeans"><img alt="Borsa in jeans"
src="immagini/balestra.jpeg"
/></a></div>
<div class="link"><a href="#">R.Balestra</a></div>
<div class="testo-dx">Nuova borsa in jeans</div>
<div class="prezzo">61,00 €</div>
<div class="immagini-piccole"><a href="#" title="Computer Dell"><img
alt="Computer Dell" src="immagini/dell.jpeg"
/></a></div>
<div class="link"><a href="#">Dell</a></div>
<div class="testo-dx">Ora le consegne sono gratis!</div>
<div class="immagini-piccole"><a href="#" title="Nokia 3650"><img
alt="Nokia 3650" src="immagini/nokia.gif"
/></a></div>
<div class="link"><a href="#">Nokia 3650</a></div>
<div class="testo-dx">A colori e con Fotocamera</div>
<div class="prezzo">453,75 €</div>
<div class="immagini-piccole"><a href="#" title="Donna"><img
alt="Donna" src="immagini/yoox.jpeg" /></a></div>
<div class="link"><a href="#">Yoox</a></div>
Salvatore Sole
89
Appendice A
<div class="testo-dx">Cogli l'attimo! Ora c'è il 70% di sconto
</div>
<div class="link"><a href="#">VHS a soli 6.99€</a></div>
<div id="vhs-testo">Video sportivi, documentari, Discovery channel
in sconto</div>
<div class="link"><a href="#">bol.com-DVD</a></div>
<div class="testo-dx">Più di 40 titoli tutti allo straordinario
prezzo di 15,49 euro</div>
</div>
</div>

</div>


<div id="pie-pagina">
<span class="testo-barra1">The European Internet Company <span
class="space"></span> © Tiscali S.p.A. 2003</span>
<span class="paesi"><a href="#">Austria</a> | <a
href="#">Belgio</a> | <a href="#">Danimarca</a> |
<a href="#">Francia</a> | <a href="#">Germania</a> | <a
href="#">Norvegia</a> | <a href="#">Olanda</a> |
<a href="#">Regno Unito</a> | <a href="#">Repubblica Ceca</a>
<a href="#">Spagna</a> |
<a href="#">Sud Africa</a> | <a href="#">Svezia</a> | <a
href="#">Svizzera</a></span>
|
</div>

</body>
</html>
CSS
body {
font: 64% verdana, helvetica, sans-serif;
text-align: center;
background: #FFF;
Salvatore Sole
90
Appendice A
color: #000;
margin: 0;
padding: 0; }
img { border: none; }
hr { display: none; }
.ripristino-float { clear: left; }
a:link, a:hover, a:visited { color:#23396B; }
/* STRUTTURA GENERALE */
#intestazione { position: relative; background: #FFF; color: #000;
margin: 0 auto; width: 765px; text-align: left;}
#corpo { position: relative; color: #000; margin: 0 auto; width:
765px; text-align: left; }
#pie-pagina { position: relative; width: 765px; margin: 0 auto; }
/* FINE STRUTTURA GENERALE */
/* INTESTAZIONE */
#intestazione .riga-1 .logo { float: left; padding: 2px 0; }
#intestazione .riga-1 .banner { float: right; padding: 2px 0; }
#intestazione .riga-2 { text-transform: uppercase; font-weight:
bold; text-align: center; }
#intestazione .riga-2 .arancio { float: left; padding: 4px 10px;
width: 73px;
text-align: center;
background: #F90 url("immagini/sf4.gif") no-repeat bottom; }
#intestazione .riga-2 .arancio a { color: #FFF; text-decoration:
none; }
#intestazione .riga-2 .violetto { float: left;
border-left: 2px solid #FFF; width: 74px; padding: 4px;
background: #D8D5E8; color: #2C2453; }
#intestazione .riga-2 .violetto a { text-decoration: none; }
#intestazione .riga-3 { background: #FFF; }
#intestazione .riga-3 .data { float: left; padding: 5px 0;
text-align: left; }
#intestazione .riga-3 .centro { float: left; width: 463px;
padding: 1px 0; margin: 5px 0 0 20px; text-align: center;
font-weight: bold; text-decoration: underline; color: #2C2453;
background: #E7E7E7; }
#intestazione .riga-3 .centro a { color:#23396B;
text-decoration: underline; }
#intestazione .riga-3 .end { float: right; padding: 5px 0;
text-decoration: underline; }
/*FINE INTESTAZIONE*/
Salvatore Sole
91
Appendice A
/*COLONNA SINISTRA*/
#corpo #colonna-sx { position: absolute; top: 0; left: 0;
width: 140px; background: #FFF; text-align: left; }
#corpo #colonna-sx .tipo-servizio { width: 110px; padding: 2px 15px;
color: #FFF;
background: #3F2B84
url("immagini/frtr.gif") no-repeat left;
font: bold 1em Verdana, sans-serif; border-bottom: 1px solid #FFF; }
#corpo #colonna-sx .servizio-link { width: 110px; height: auto;
padding: 2px 15px;
#corpo #colonna-sx .servizio-link a {color: #0E3178;
text-decoration: none;
font: bold 1em Verdana, sans-serif;}
#corpo #colonna-sx .servizio-link2 { width: 140px; height: 14px;
#corpo #colonna-sx #registrazione { padding: 2px 0;
background: #D9D5E6; }
#corpo #colonna-sx .formtxt { float: left; width: 85px;
text-transform: uppercase; margin: 0 4px 0 12px; }
#corpo #colonna-sx .p1 { padding-left: 12px;
font: bold 1em verdana, sans-serif; }
#corpo #colonna-sx #banner-sx { background: #EEE;
#corpo #colonna-sx #radio { background: #145189; height: 70px;
padding: 2px 0; }
#corpo #colonna-sx .selezione { float: left; width: 75px;
margin-left: 2px; }
/* FINE DELLA COLONNA SINISTRA */
/* SEZIONE PRINCIPALE */
#sezione-principale { margin: 0 152px 0 150px; }
#corpo #sezione-principale #top .form-ctrle { float: left; width:
200px;
text-transform: uppercase; margin: 0 4px; }
#corpo #sezione-principale #top #lente { float: left;
margin: 4px 4px 0 6px; }
#corpo #sezione-principale #top a { color: #23396B;
font: bold 1em Verdana,sans-serif; float: left; }
#corpo #sezione-principale #top .ric-avanzata { float: left;
padding: 0 10px; }
#corpo #sezione-principale #top #search { float: left; width: 458px;
height: 30px; border-top: 1px solid #8C80B5;
Salvatore Sole
92
Appendice A
border-left: 1px solid #8C80B5; border-right: 1px solid #8C80B5;
padding: 8px 0 0 0; }
#corpo #sezione-principale #principale1 #colon-sx-pr { width: 280px;
padding: 20px 0px 4px 0; float: left; }
#corpo #sezione-principale #principale1 #colon-sx-pr a {
font: bold 1.1em Verdana,sans-serif; color: #900; }
#corpo #sezione-principale #principale1 #colon-dx-pr { margin-right:
5px;
float: right; padding: 20px 0 0 0px; text-align: left;
width: 160px; }
#corpo #sezione-principale #principale1 #colon-dx-pr a {
font: bold 1em Verdana,sans-serif; color: #900; }
#corpo #sezione-principale #principale1 #colon-sx-pr img,#colon-dxpr img { float: left; margin: 0 2px 5px 0; }
#corpo #sezione-principale #principale1 #notizie {
font: bold 0.9em Verdana,sans-serif; }
#corpo #sezione-principale #principale1 #notizie a { color: #0E3178;
font-weight: normal; text-transform: uppercase; text-align: left; }
#corpo #sezione-principale #principale1 .freccette a {
text-decoration:none; font: bold 1.2em Verdana,sans-serif; }
#corpo #sezione-principale #principale1 #colon-sx-pr .ora {
padding-right: 4px; color: #5D5D5C; }
#corpo #sezione-principale #principale1 #tg { background: #E7E7E7;
height: 42px;}
#corpo #sezione-principale #principale2 { width: 448px;
#corpo
width:
#corpo
left;
#corpo
float:
#sezione-principale #principale2 .colonna { float: left;
auto; margin-left: 8px; margin-top: 5px; padding-top: 5px; }
#sezione-principale #principale2 .colonna .link1 { clear:
font: bold 1.1em Verdana,sans-serif;
text-align: left; }
#sezione-principale #principale2 .colonna .link2 {
left; text-align: left; }
#corpo #sezione-principale #principale2 .colonna .link3 {
float: left; font: bold 1em Verdana,sans-serif; width: 100px; }
#corpo #principale4 { float: left; width: 400px; padding-top: 4px;
margin-left: 14px; }
#corpo #principale4 .grassetto { font-weight: bold; }
#corpo #blocco-basso { width: 460px; margin-top: 8px; }
#corpo .tipo-servizio2 { width: 210px; padding: 2px 15px;
color: #FFF;
background: #3F2B84 url("immagini/frtr.gif") no-repeat left;
font: bold 1em Verdana, sans-serif; border-top: 1px solid #FFF; }
#corpo #blocco-basso #basso-sx { float: left; width: 240px;
Salvatore Sole
93
Appendice A
#corpo #blocco-basso .freccia-grigia { float: left; }
#corpo #blocco-basso #titolo-basso-sx { text-transform: uppercase;
text-align: left; color: #5D5D5C; font-weight: bold; }
#corpo #blocco-basso #basso-sx-sfondo { border-top: 1px solid
#5D5D5C;
background: #E7E7E7; text-align: left; }
#corpo #blocco-basso .titoli-basso-sx { padding: 6px 12px;
text-transform: uppercase; font-weight: bold; }
#corpo #blocco-basso .testi { padding: 3px 12px 3px 12px;
border-bottom: 1px solid #D9D5E6; }
#corpo #blocco-basso #finanza { width: 240px; color: #FFF;
background: #3F2B84 url("immagini/frtr.gif") no-repeat left;
font: bold 1em Verdana, sans-serif; border-top: 1px solid #FFF; }
#corpo #blocco-basso #finanza1 { width: 238px; height: 100px;
border: 1px solid #3F2B84; }
#corpo #blocco-basso #finanza1 img { margin: 8px 2px 0 4px; float:
left;
border: 1px solid #8C80B5; }
#corpo #blocco-basso #finanza1 a { color: #0E3178; }
#corpo #blocco-basso .dati { font-weight: bold; color: #5D5D5C; }
#corpo #blocco-basso .spazio-dati { margin-top: 6px; }
#corpo #blocco-basso .riga-dati { border-bottom: 1px solid #8C80B5;
}
#corpo #blocco-basso #dati-borsa { float: left; width: 236px;
height: 35px; background: #8C80B5; border-right: 1px solid #3F2B84;
border-left: 1px solid #3F2B84; border-bottom: 1px solid #3F2B84;
#corpo #blocco-basso .p4 { float: left; padding: 6px 4px 0 4px;
color: #FFF; font-weight: bold; }
#corpo #sezione-principale #blocco-basso .form-ctrle2 { float: left;
width: 110px; text-transform: uppercase; margin: 0 12px; }
#corpo #blocco-basso #borsa-italiana { width: 238px;
border-right: 1px solid #3F2B84;
border-left: 1px solid #3F2B84; border-bottom: 1px solid #3F2B84;
background: #E7E7E7; padding: 1px 0; }
#corpo #blocco-basso #basso-dx { float: left; width: 180px;
text-align: left; margin-left: 15px; padding-top: 5px; }
#corpo #blocco-basso .foto-basso-dx { float: left; padding-right:
4px;
padding-top: 10px; }
#corpo #blocco-basso .titoli-basso-dx { font-weight: bold;
padding-top: 10px; }
#corpo #blocco-basso .format-testo { padding-top: 6px; }
#corpo #blocco-basso .titoli-form { margin-top: 20px;
padding: 6px 0 2px 15px; width: 180px; color: #0E3178;
background: #FFF url("immagini/frgray.gif") no-repeat left;
Salvatore Sole
94
Appendice A
font: bold 1em Verdana, sans-serif; border-top: 1px solid #FFF;
text-transform: uppercase; }
#corpo #blocco-basso #segno { background: #E7E7E7;
border-top: 1px solid #3F2B84; width: 180px; height: 60px; }
#corpo #blocco-basso .p5 { clear: left; padding-top: 5px; }
#corpo #blocco-basso #meteo { padding: 2px 15px; color: #0E3178;
background: #FFF url("immagini/frgray.gif") no-repeat left;
font: bold 1em Verdana, sans-serif; text-transform: uppercase; }
#corpo #blocco-basso #tempo { border-top: 1px solid #3F2B84;
background: #E7E7E7; width: 180px; height: 73px; }
#corpo #blocco-basso #basso-dx #tempo #roma { float: left; }
#corpo #blocco-basso #basso-dx #tempo #milano { float: left; }
#corpo #blocco-basso #basso-dx #tempo #roma img { float: left;
padding-left: 5px; }
#corpo #blocco-basso #basso-dx #tempo #milano img { float: left;
padding-left: 5px; }
#corpo #blocco-basso #basso-dx #tempo .citta { float: left;
font-weight: bold; }
#corpo #blocco-basso #basso-dx #tempo .minima { float: left;
font-weight: bold; color:#8C80B5; padding-right: 10px; }
#corpo #blocco-basso #basso-dx #tempo .massima { float: left;
font-weight: bold; color: #900; }
/* FINE DELLA SEZIONE PRINCIPALE */
/* COLONNA DESTRA */
#corpo #colonna-dx { position: absolute; top: 0; right: 0;
width: 144px;}
#corpo #colonna-dx #rettangolo1 { color: #FFF; background: #FF8410;
width: 144px; text-align: left; border-bottom: 1px solid #FFF; }
#corpo #colonna-dx #rettangolo2, #rettangolo3, #rettangolo4,
#rettangolo5, #rettangolo6 { color: #000; width: 144px;
border-bottom: 1px solid #FFF; text-align: left; }
#corpo #colonna-dx #rettangolo2 { background: #FF9933; }
#corpo #colonna-dx #rettangolo3 { background: #FFA521; }
#corpo #colonna-dx #rettangolo4 { background: #FFBD52; }
#corpo #colonna-dx #rettangolo5 { background: #FFCE63; }
#corpo #colonna-dx #rettangolo6 { background: #FFE076; }
#corpo #colonna-dx .freccia { float: left; padding: 4px; }
#corpo #colonna-dx #adsl, #gratis, #ricaricasa, #point, #business,
#domini { font: bolder 1.3em Verdana,sans-serif; padding: 4px 0 0
1px; }
#corpo #colonna-dx #adsl-gratis, #internet-gratis, #tis-ricaricasa,
#tis-point, #tis-business, #tis-domini { font: 1em Verdana,sansserif;
#corpo #colonna-dx #adsl-gratis a { color: #FFF; }
Salvatore Sole
95
Appendice A
#corpo #colonna-dx #internet-gratis a, #tis-ricaricasa a, #tis-point
a, #tis-business a, #tis-domini a { color: #0E3178; }
#corpo #colonna-dx #banner-dx { border-top: 1px solid #FFF; color:
#000;
background: #EEE; padding: 8px 0 8px 10px; }
#corpo #colonna-dx #shopping { border: 1px solid #3F2B84; height:
auto;
padding-left: 10px; padding-bottom: 4px; }
#corpo #colonna-dx .tipo-servizio3 { width: 110px; padding: 2px
15px;
color: #FFF;
background: #3F2B84 url("immagini/frtr.gif") no-repeat left; font:
bold 1em Verdana, sans-serif; border-top: 1px solid #FFF;
width: auto; }
#corpo #colonna-dx .immagini-piccole { float: left;
border: 1px solid #3F2B84; margin: 14px 5px 0 0; }
#corpo #colonna-dx .link { font: bold 1em Verdana, sans-serif;
padding-top: 12px; color: #0E3178; }
#corpo #colonna-dx .testo-dx { color: #000;
font: 0.9em Verdana, sans-serif; }
#corpo #colonna-dx .prezzo { color: #900;
font: bold 1.1em Verdana, sans-serif; }
/* FINE DELLA COLONNA DESTRA */
/* FONDO PAGINA */
#pie-pagina .testo-barra1 { background: #3F2B84; width: 765px;
float: left; text-align: left;
padding: 2px 0; color: #FFF; font-size: 0.9em; }
#pie-pagina .space { padding-right: 470px; }
#pie-pagina .paesi { width: 765px; float: left; text-align: center;
padding: 2px 0 2px 0; color: #0E3178; font-size: 0.9em; }
/* FINE FONDO PAGINA */
Salvatore Sole
96

CAPITOLO 2 Fogli di stile - e-Lite

Transcript

Documenti analoghi

Ricchi e Poveri - LIVE A GROTTE DI CASTRO (12-8-15)

La Baronessa di Carini

"Princesa De Mi Barrio", il rap italiano si fonde con il

Modulo d`iscrizione

IRCA SPA Div. RICA - Zoppas Industries

Organizzare i fogli di calcolo

Un clacson diventa musica "Così conquisto Fabri Fibra"

Div e Span - Filibusta

Esercitazione 2 - Scienze Politiche

La lista segreta degli istituti scolastici fuori norma