Il formato del documento richiede la presenza di un particolare tipo di plug-in per il browser. Nello specifico, Open Office 2.1 permette di abilitare il plugin solo per i browser basati su Mozilla, come mostrato dalla seguente immagine.
L' utente deve selezionare la voce Opzioni → Internet →
Plugin per Mozilla e quindi Abilita.
Subito dopo aver eseguito questa operazione, Firefox riconoscerà i file correlati con questo formato di documento, come mostrato dall'immagine che segue.
In Firefox l'utente verifica il riconoscimento del plugin in Opzioni →
Contenuti → Tipi di file → Gestione. In questo caso viene evidenziato il tipo di file
con estensione .odt.
In un test eseguito in locale, Open Office è andato in crash durante l'apertura di un file .odt inserito in un collegamento ipertestuale, per quanto il funzionamento di Firefox non ne abbia risentito. Per questo motivo si raccomanda di utilizzare, se possibile, l'ultima versione del programma.
Entrambe le conversioni ci mostrano un significativo aumento delle dimensioni del documento di origine.
Formato | Vantaggi | Svantaggi |
---|---|---|
ODF |
|
|
DOC |
|
|
|
|
Come alternativa al formato (X)HTML possiamo scegliere, in ordine di priorità:
Il formato (X)HTML presenta tutti i vantaggi sopra elencati ed è, come noto, il formato predefinito dei siti web. Tuttavia, va operata un'importante distinzione tra HTML ed XHTML.
text/html
. Per questo motivo,
non è compatibile con i programmi utente XML.application/xhtml+xml
, mentre XHTML 1.1
deve essere servito come application/xhtml+xml
. Questo tipo MIME lo rende compatibile
con i programmi utente XML. Tuttavia esistono dei limiti all'applicazione del corretto formato:
application/xhtml+xml
.xht
o .xhtml
application/xhtml+xml
che come text/html
.application/xhtml+xml
un documento XHTML viene letto seguendo le regole sintattiche
dell'XML. Non vi è nessuna tolleranza all'errore. Ciò significa che la marcatura precedentemente
esaminata non verrebbe rappresentata, ma produrrebbe una pagina di errore come la seguente.
Figura 2: Firefox mostra una pagina di errore nel parsing XML
[D]
text/html
un documento XHTML viene letto esattamente come se fosse un documento
HTML, ossia come zuppa di tag. Ciò significa che la marcatura precedentemente esaminata verrebbe comunque
rappresentata e non produrrebbe alcuna pagina di errore.
Figura 3: Firefox mostra una pagina dal codice errato
[D]
XHTML presenta numerosi vantaggi.
application/xhtml+xml
è compatibile con i nuovi formati derivati da SGML, come MathML, SVG ed XMLtext/html
è compatibile con i programmi utente obsoletiAl momento Internet Explorer 7 (ed inferiori) non supporta il tipo MIME
application/xhtml+xml
, quindi i benefici sopra indicati vengono vanificati.
text/html
text/html
a quei programmi utente che non supportano questo tipo MIME e come
application/xhtml+xml
a quei programmi utente che lo supportanoIl punto 2 può essere ottemperato tramite la negoziazione del contenuto.
La negoziazione del contenuto può essere implementata tramite alcuni linguaggi lato server, come PHP o ASP. Di seguito alcuni esempi.
$accept = $_SERVER["HTTP_ACCEPT"];
$ua = $_SERVER["HTTP_USER_AGENT"];
if (isset($accept) && isset($ua)) {
if (stristr($accept, "application/xhtml+xml") || stristr($ua, "W3C_Validator")) {
header("Content-Type: application/xhtml+xml");
}
}
Dim strAccept, strUA
strAccept = Request.ServerVariables("HTTP_ACCEPT").Item
strUA = Request.ServerVariables("HTTP_USER_AGENT").Item
If InStr(1, strAccept, "application/xhtml+xml") > 0 Or InStr(1, strUA, "W3C_Validator") > 0 Then
Response.ContentType = "application/xhtml+xml"
End If
Alcuni riferimenti:
Bisogna tenere presente che gli attuali programmi utente che supportano il tipo MIME application/xhtml+xml
, non usano
un parser validante nell'analisi dei documenti. In altre parole, essi controllano solo se il documento è ben formato ma non
se il documento è valido secondo la DTD di riferimento. Per esempio, dato un documento XHTML 1.1 servito come
application/xhtml+xml
avente la seguente marcatura:
e i seguenti stili:
il risultato sarà il seguente:
Figura 4: Firefox mostra ugualmente la pagina
[D]
Occorre quindi validare sempre i propri documenti per assicurarsi che non vi siano errori sintattici. Questo si rivela fondamentale in fase di debugging al fine di verificare se il problema dipende dagli stili applicati o dalla marcatura utilizzata.
La directory /res/dtd contenuta nella directory di installazione di Mozilla Firefox non contiene le DTD dei vari linguaggi di marcatura, ma solo le entità SGML usate dal browser, come si evince dal seguente estratto:
<!--
* Predefined HTML entities to be loaded when parsing XHTML documents.
* The contents match mozilla/parser/htmlparser/src/nsHTMLEntityList.h,
* except that Navigator entity extensions are not included.
-->
Il punto di partenza è ovviamente il documento originale. Lo sviluppatore web potrebbe essere tentato di usare strumenti automatici per la conversione del documento in un formato diverso. Per esempio, sia Open Office che Microsoft Word permettono il salvataggio del documento in formato HTML. Tuttavia, la marcatura prodotta da questi due programmi è per lo più ridondante e presentazionale, costringendo di fatto lo sviluppatore ad un lungo e faticoso lavoro di "ripulitura". Ci si può rendere conto dell'output finale aprendo il documento convertito in formato .doc con l'editor interno di Microsoft Word.
Figura 5: La marcatura prodotta da Microsoft Word
[D]
La situazione non migliora in Open Office, che pur rinunciando ad una sintassi proprietaria, mostra una sovrabbondanza di elementi presentazionali usati per ricreare il layout di partenza. Occorre quindi cominciare da zero.
Quando si affronta la costruzione di un layout basato su un documento di un formato diverso da quello (X)HTML occorre porsi delle domande sul layout finale da ottenere.
Il documento originale presenta un layout di tipo monolitico, con una sola colonna che racchiude tutto il contenuto.
Il documento originale comprende delle immagini inserite al suo interno. Le immagini sono di due tipi:
Un font principale della famiglia sans-serif
, nello specifico l'Arial, ed un font
monospaziato (monospace
) per il codice di esempio.
Abbiamo intestazioni e link impostati sullo stesso colore (blu scuro). Le tabelle, il codice e il sommario presentano uno sfondo grigio scuro.
No. Va modificato.
Nel documento originale sono presenti i seguenti elementi strutturali:
Vi sono immagini allineate a sinistra con didascalia sottostante.
Sceglieremo il formato XHTML servito come
application/xhtml+xml
.
Scegliamo di usare XHTML servito come
application/xhtml+xml
per alcuni motivi che andiamo a riassumere:
Servendo il documento di destinazione come application/xhtml+xml
,
i browser rileveranno ogni errore riguardante il corretto annidamento degli elementi.
Questo ci permetterà di risparmiare tempo e, al contempo, acquisire quella disciplina necessaria
a scrivere codice sintatticamente valido.
Servendo il documento con questo tipo MIME, la conversione in altri formati diventa più semplice.
Data la correttezza formale necessaria ad ottenere un documento ben formato, si potrebbe convertire il documento
in formato text/html
(HTML 4.01 o XHTML 1.0 Strict) o text/xml
(
XML) venendo così incontro ad una vasta gamma di programmi utente.
Nello specifico, per questo documento scegliamo di usare la DTD XHTML 1.1 ed il seguente DOCTYPE:
Il documento di destinazione avrà l'estensione .xhtml
, indispensabile per il corretto riconoscimento
del tipo MIME in un file statico.
Un layout monolitico ha le seguenti caratteristiche:
Per essere efficace, un foglio di stile deve seguire un ordine preciso, cominciando da dichiarazioni generali per l'intero documento e passando quindi a definire delle dichiarazioni particolari per sezioni specifiche. Nello scrivere tale foglio di stile si dovrebbero seguire delle buone pratiche che andiamo a riassumere:
Passiamo quindi alle dichiarazioni generali per il nostro documento.
Il codice generale appare diviso in quattro blocchi principali:
Vengono qui date le dichiarazioni generali per l'elemento body
. Si impostano i margini orizzontali su un
valore in percentuale, in modo da avere un layout fluido. Si impostano il colore del testo e dello sfondo, l'interlinea
e il tipo di font per il documento, nonché la sua dimensione.
Vengono qui date le dichiarazioni per lo stile dei collegamenti ipertestuali presenti nel documento, seguendo l'ordine
:link
, :visited
, :hover
, :active
. Si noti che al fine della semplice
conversione del documento sarebbe sufficiente attribuire uno stile solo alla pseudo-classe :link
. Si noti altresi
come la sottolineatura dei link sia stata eliminata a favore di un bordo inferiore, al fine di garantire un certo spazio tra la
linea di base del testo e la sottolineatura.
Si attribuiscono degli stili alle intestazioni presenti nel documento, seguendo l'ordine di importanza
h1
-h6
. Viene ridotta l'interlinea, assegnato un colore specifico, una spaziatura tra le lettere
(elementi h3
-h6
), ridotto lo spazio inferiore tra le intestazioni
h2
-h6
e gli elementi contigui, e si rende in lettere maiuscole il testo dell'elemento
h5
. Da ultimo, la classe .example
applicata ai soli elementi h5
fa in modo che questi
ultimi abbiano il testo di colore nero, non siano in lettere maiuscole ed abbiano una dimensione del font pari a quella
dell'elemento body
con il testo in grassetto.
Nel documento sono presenti delle note di redazione, prive di valore contestuale ai fini della comprensione del documento.
Per questo motivo sopprimiamo la loro visualizzazione marcandole con l'elemento ins
a cui assegniamo un valore
none
per la proprietà display
. Si noti che in questo modo tali note non verranno lette
dai lettori di schermo che interpretano tale dichiarazione (come Jaws). Se si ritiene che tali note abbiamo un valore ai fini
della comprensione del documento, si può ricorrere a questa dichiarazione alternativa:
Assegnando un valore negativo altissimo alla proprietà top
facciamo in modo che l'elemento
scompaia dalla finestra di visualizzazione. Questa tecnica ci permette di avere un'ottima compatibilità con i lettori
di schermo e gli altri programmi che non supportano i fogli di stile.
Il logo è rappresentato dalla seguente immagine.
Figura 11: Il logo del documento
[D]
Per inserire il logo ricorriamo ad una marcatura molto semplice:
Volendo è possibile associare un link nascosto che rimandi ad una descrizione estesa dell'immagine. Questa tecnica
andrebbe usata in combinazione con l'attributo longdesc
, non ampiamente supportato. Possiamo nascondere il link
con la tecnica vista in precedenza per l'elemento ins
. Data la semplicità della marcatura, questa sezione
non necessita di stili particolari.
L'elenco degli autori e della versione del documento viene formattato con la seguente marcatura:
Scegliamo di usare un elenco di definizione per stabilire una precisa relazione semantica tra le voci dell'elenco. Ciascuna voce viene infatti definita dalla voce che segue. A questo punto passiamo ad applicare gli stili.
Abbiamo assegnato un colore agli elementi strong
presenti all'interno degli elementi dt
e abbiamo
quindi diminuito la dimensione del font per l'elenco di definizione (righe 5-7).
Le righe che vanno dalla 7 alla 14 presentano alcune caratteristiche interessanti nella formattazione degli elenchi non ordinati.
Il primo blocco di dichiarazioni (righe
8-11) annulla il classico rientro a sinistra degli elenchi non ordinati, azzerando il margine ed il padding sinistro dell'elemento
ul
. Questa doppia dichiarazione si rende necessaria in quanto alcuni browser (come Internet Explorer e Opera) usano
il margine sinistro per creare il rientro, mentre altri (come Safari e Firefox) usano il padding sinistro.
L'ultimo blocco di dichiarazioni
(righe 11-14) elimina il marcatore dell'elenco non ordinato dichiarando ogni voce di elenco come un elemento di blocco.
Secondo le specifiche, infatti, un elemento può avere un marcatore solo se il valore della proprietà display
è impostato su list-item
. In questo modo evitiamo di dover ricorrere alla dichiarazione
list-style-type: none
che potrebbe confondere i lettori di schermo, come già segnalato da Michele Diodati nel
sesto capitolo della sua Accessibilità. Guida completa.
Purtroppo questa soluzione non funziona in Internet Explorer 7 ed inferiori. Per questo browser, infatti, una voce di elenco viene già considerata come un elemento di blocco, e quindi il marcatore non viene soppresso. Se vogliamo ottenere una compatibilità anche con questo browser dobbiamo ricorrere ad un semplice stratagemma.
Un marcatore di elenco di norma eredita dalla voce cui appartiene il colore del testo. Quindi dichiarare per una voce di elenco
un colore del testo uguale a quello di sfondo equivale di fatto a rendere invisibile il marcatore oltre al testo della voce. Poiché quello che vogliamo è rendere invisibile solo il marcatore, dobbiamo modificare la marcatura
aggiungendo un elemento all'interno delle voci di elenco che vada a racchiudere il testo. Nel nostro caso
aggiungiamo un elemento span
:
Gli stili da applicare sono i seguenti:
Il primo blocco di dichiarazioni (righe 1-3) annulla il marcatore di elenco impostando un colore del testo uguale
a quello di sfondo (qui ereditato dall'elemento body
), mentre il secondo (righe 4-6) rende di nuovo visibile
il testo all'interno dell'elemento span
. Possiamo apprezzare il lavoro svolto sinora in
questa immagine.
Figura 12: L'elenco degli autori e della versione del documento
[D]
Il sommario si presenta come una serie di elenchi ordinati annidati, con una numerazione progressiva per ciascuna voce nei diversi livelli di annidamento. La marcatura necessaria alla sua formattazione è la seguente:
Decidiamo di usare i contatori del contenuto generato per ricreare la numerazione progressiva ordinata, consci dei notevoli limiti nel supporto a tale caratteristica dei fogli di stile da parte di alcuni browser e dei lettori di schermo. Offriremo tuttavia un'alternativa per venire incontro alle loro esigenze. Diamo quindi gli stili necessari a formattare il sommario usando il contenuto generato.
I contatori del contenuto generato si basano su quattro elementi fondamentali:
counter-reset
, che inizializza il contatore, a cui viene assegnato un nome
come identificativo univoco.counter-increment
, che incrementa il contatore dell'unità specificata.
Nel nostro caso non abbiamo specificato un unità, quindi viene incrementato di 1.counter()
(o la sua variante counters()
), che viene posta all'interno della
proprietà content
per controllare il contatore.content
, che inserisce materialmente il contatore nel layout.Il contenuto così creato viene inserito prima o dopo il contenuto effettivo di un elemento tramite gli pseudo-elementi
:before
(prima) e :after
(dopo).
Il nostro sommario presenta tre livelli di annidamento (1, 1.1, 1.1.1), quindi creeremo tre contatori distinti, nominandoli
rispettivamente item
, item2
e item3
. Vediamo in dettaglio il processo di inserimento dei contatori.
Viene creata l'istanza del contatore item
, il cui àmbito di applicazione è l'intero sommario
(elemento #toc
). Tutte le voci dell'elenco principale e degli elenchi annidati vengono privati del marcatore, che
altrimenti si andrebbe a sovrapporre al contenuto generato.
Il contatore item
viene inserito prima delle voci dell'elenco principale. Gli vengono assegnati un colore, un font
ed un peso del font particolari, oltre ad un punto dopo di esso (".").
Viene creata l'istanza del contatore item2
per il primo sottoelenco annidato. Il contatore viene quindi inserito
prima del contenuto delle voci del primo sottoelenco, ma dopo il contatore item
. Il peso del font viene ridotto.
Si aggiunge un ulteriore punto dopo l'ultimo contatore.
Viene creata l'istanza del contatore item3
per il secondo sottoelenco annidato. Il contatore viene quindi inserito
prima del contenuto delle voci del secondo sottoelenco, ma dopo il contatore item2
e dopo il contatore item
.
Lo stile del font viene impostato sul corsivo, e si aggiunge uno spazio (" ") dopo l'ultimo contatore.
La soluzione proposta ha tuttavia dei notevoli limiti nel supporto offerto da Internet Explorer 7 (ed inferiori), dai browser testuali e dai lettori di schermo. Occorre quindi ripiegare su una soluzione alternativa, modificando radicalmente la marcatura ed il foglio di stile. Per la marcatura avremo:
Abbiamo sostituito gli elenchi ordinati con elenchi non ordinati, inserendo per ciascuna voce un elemento span
aggiuntivo al fine di formattare la numerazione progressiva inserita direttamente nel sorgente. Gli stili diventano quindi i seguenti:
Nello specifico, siamo costretti ad usare classi ad hoc per ottenere gli stessi effetti ottenuti in precedenza tramite il contenuto generato. In un browser testuale come Lynx ogni singola voce avrà comunque il proprio marcatore oltre alla numerazione. È un prezzo da pagare se vogliamo mantenere una certa compatibilità. L'immagine che segue ci mostra i progressi ottenuti sino ad ora.
Figura 13: Il sommario del documento
[D]
La maggior parte del contenuto del nostro documento è inserita all'interno di una sequenza regolare di intestazioni di vari livelli, paragrafi ed elenchi (ordinati e non). La formattazione delle intestazioni è già stata definita nelle regole di stile principali del nostro CSS. I paragrafi non hanno alcuna formattazione particolare. Si noti come sia nel caso delle intestazioni che dei paragrafi, i valori dei margini verticali vengono definiti dal foglio di stile predefinito del browser. Tipicamente tali valori sono i seguenti:
Questi valori sono ricavati dal foglio di stile predefinito di Firefox (html.css), che si trova nella directory /res del programma.
Per quanto riguarda gli elenchi, solo alcuni di essi hanno bisogno di una formattazione particolare, che riportiamo di seguito.
Impostiamo due classi (righe 1-6) per definire due tipi di marcatori diversi per un elenco ordinato e non ordinato.
Nel primo caso (classe .literal
) usiamo il valore lower-alpha
della proprietà
list-style-type
per ottenere l'effetto dei marcatori costituiti da lettere minuscole dell'alfabeto.
Nel secondo caso (classe .squared
) usiamo invece il valore square
per avere un marcatore
costituito da un piccolo quadrato.
Nelle righe che vanno dalla 7 alla 14, usiamo il contenuto generato per inserire un
trattino prima del contenuto delle voci dell'elenco con classe .dash
. Ovviamente questo esempio non funziona
in Internet Explorer 7 ed inferiori, quindi siamo costretti ad inserire il trattino nel sorgente. Possiamo osservarne
l'effetto nell'immagine che segue.
Figura 14: L'elenco con le voci con il trattino
[D]
Nel nostro documento è presente anche del codice di esempio. Tale codice viene rappresentato in blocchi con sfondo grigio scuro e con carattere monospaziato. Il contrasto di colore, pur essendo in questo caso corretto, mal si combina con il tipo di carattere scelto, risultando a volte di difficile lettura. Per questo motivo abbiamo deciso di cambiare il contrasto di colore, pur mantenendo un font simile a quello originale.
Di norma quando si deve scegliere di formattare del codice si ricorre quasi sempre all'elemento pre
. Tuttavia
questa scelta non è la più indicata per una serie di ragioni:
L'elemento pre
ha per impostazione predefinita il valore pre
per la proprietà
white-space
. Ciò significa che le righe non andranno a capo a meno che non le si mandi a capo
direttamente nel sorgente. In questo modo, se si cambiano le dimensioni del layout o si ridimensiona la finestra o l'utente
decide di ridimensionare il font, il testo presente in tale elemento potrebbe fuoriuscire dall'elemento stesso. Questo fenomeno
comporta, in Internet Explorer 6 ed inferiori, la comparsa di una barra di scorrimento orizzontale a determinate risoluzioni
di schermo.
Se formattiamo il codice di esempio usando l'elemento pre
, viene a mancare l'ordine logico nel codice usato.
Se per esempio volessimo far riferimento ad una riga precisa nel codice, dovremmo aggiungere un elemento contenitore attorno
a tale riga, formattarlo ed inserirvi un identificatore univoco. Attualmente i CSS
possono selezionare solo la prima riga di un blocco (pseudo-elemento :first-line
), ma non dispongono di un meccanismo
per selezionare la n-esima riga di un blocco
Per questi motivi decidiamo di usare un elenco ordinato in cui per ogni voce andremo ad inserire la corrispettiva riga di codice. La marcatura usata sarà la seguente:
Gli stili saranno i seguenti:
In questo codice usiamo un contenitore per circondare l'elenco ordinato. Volendo si può fare a meno di tale contenitore ed assegnare gli stili delle righe 1-6 direttamente all'elenco ordinato. Per eliminare il marcatore dell'elenco usiamo la tecnica vista in precedenza, ossia dichiariamo di blocco le voci dell'elenco. Tuttavia per ottenere una compatibilità anche con Internet Explorer 7 (ed inferiori) è necessario ricorrere alla strategia vista in precedenza, modificando la marcatura come segue:
A questo punto si imposta il colore del testo dell'elemento li
sullo stesso colore dello sfondo dell'elemento
con classe .code
e poi si reimposta il colore appropriato per l'elemento code
che contiene il testo
all'interno delle voci di elenco. Si noti che in questo caso abbiamo usato un elemento con valenza semantica (code
),
in quanto il testo all'interno delle voci dell'elenco è del codice di computer.
Da ultimo, per ricreare l'effetto tipico dell'indentazione delle righe di codice si può utilizzare una soluzione come la seguente:
Assegniamo una classe differente a ciascuna voce, con un'indentazione del testo progressiva. In questo caso, avendo dichiarato
le voci dell'elenco come blocchi, possiamo applicare la proprietà text-indent
alle voci. Nel caso volessimo
distanziare un blocco di codice dall'altro, possiamo usare questa soluzione:
Assegniamo un margine inferiore ad una particolare voce dell'elenco, che si distanzierà dalle altre della misura specificata. L'immagine che segue ci mostra il risultato ottenuto.
Figura 15: I blocchi di codice formattati
[D]
Il documento presenta due tipi di tabelle di esempio: un tipo puramente presentazionale, senza dati di effettiva rilevanza ed un tipo strutturale con dati effettivi. La formattazione richiede quindi degli stili completamente diversi. È importante notare a questo punto che le tabelle del primo tipo non sono di fatto necessarie alla comprensione del testo, e quindi potrebbero essere sostituite da immagini con opportuna descrizione. Decidiamo di inserirle come marcatura a scopo puramente dimostrativo. Nel documento originale tali tabelle si presentano come segue.
Figura 16: Una tabella di esempio
[D]
La marcatura utilizzata per rendere questo tipo di tabella è la seguente:
Abbiamo usato l'attributo summary
per dare informazioni aggiuntive sulle tabelle presentate. In questo caso
avremmo potuto anche aggiungere una breve nota sul fatto che le tabelle sono puramente dimostrative e non presentano dati
essenziali.
La didascalia in fondo alla tabella non è stata marcata con l'elemento caption
, come ci si attenderebbe,
per un motivo molto semplice: attualmente per ottenere l'effetto della didascalia in fondo alla tabella si sarebbe dovuto
ricorrere alla dichiarazione caption-side: bottom
, che non è ampiamente supportata dai browser. Questo
è un altro motivo per cui tabelle dimostrative come questa andrebbero evitate ove possibile.
A questo punto passiamo all'applicazione degli stili:
Le 53 righe di codice necessario alla formattazione di questo tipo di tabelle ci convincono del fatto che un approccio del genere è controproduttivo. Tuttavia, il codice usato presenta alcune caratteristiche interessanti nella formattazione delle tabelle.
fixed
. Questo significa che la somma complessiva
della larghezza delle singole celle (compresi i bordi), dovrà essere uguale alla larghezza generale impostata
sulla prima tabella (450 pixel). Si noti comunque che anche se si supera tale larghezza, i browser si limiteranno semplicemente
ad allargare la tabella principale, senza nascondere il contenuto.border-collapse: collapse
), che fa in modo che i bordi
delle singole celle si fondano insieme per formare un unico bordo.Tuttavia, Internet Explorer 7 (ed inferiori), presenta un problema nel collassamento dei bordi, per cui si rende necessario aggiungere un commento condizionale con il seguente codice:
Il commento condizionale viene indirizzato alle versioni di Internet Explorer inferiori alla 8 (riga 1). Il risultato si può osservare nell'immagine che segue.
Figura 17: La tabella di esempio realizzata con i fogli di stile
[D]
Passiamo alle tabelle di dati effettivi. Nel documento originale, esse hanno il seguente layout:
Figura 18: La tabella di dati effettivi
[D]
La marcatura necessaria è la seguente:
In questa tabella abbiamo usato l'attributo scope
sulle intestazioni di tabella in modo da associare
ciascuna colonna ad un'intestazione. Abbiamo usato un elemento presentazionale (br
) per mandare a capo il testo.
Volendo si sarebbe potuta inserire ogni riga di testo in un elemento span
e poi trasformarlo in blocco. Gli stili,
meno ridondanti di quelli della precedente tabella, sono:
In questo caso viene usato il layout automatico di tabella, e il risultato è quello di una tabella fluida. Possiamo osservarlo nell'immagine che segue.
Figura 19: La tabella di dati effettivi realizzata con i fogli di stile
[D]
Il documento originale presenta anche delle immagini di esempio, solitamente allineate a sinistra rispetto al testo dei paragrafi e con una breve didascalia sottostante. Ne vediamo un esempio nell'immagine che segue.
Figura 20: Un'immagine di esempio
[D]
La marcatura usata per questo elemento è la seguente:
Ovviamente anche in questo caso sarebbe opportuno inserire una descrizione estesa dell'immagine, al fine di aumentare l'accessibilità della pagina. Gli stili relativi sono i seguenti:
L'elemento span
con classe .left
è stato flottato a sinistra, gli sono stati attribuiti dei margini,
un bordo ed il suo font è stato ridimensionato (righe 1-7). Si noti come l'elemento flottato non abbia una dimensione esplicita.
In questo caso, le specifiche prevedono che venga applicato l'algoritmo shrink-to-fit, ossia la dimensione dell'elemento
verrà determinata dal contenuto presente al suo interno. Questo permette di fatto di avere dei float liquidi, che avranno
le dimensioni necessarie ad ospitare il loro contenuto.
Successivamente (righe 8-11) abbiamo reso di blocco l'immagine e l'abbiamo centrata all'interno del suo blocco contenitore tramite i margini orizzontali automatici. Quindi abbiamo formattato la didascalia (righe 12-16), rendendola di blocco, cambiando lo stile del font ed assegnandole del padding.
Infine (righe 17-19) abbiamo creato una classe ad hoc per eliminare il bordo dalle immagini che non ne hanno bisogno. Si noti la sintassi usata, con i nomi delle classi scritti in sequenza (classi multiple).
Possiamo apprezzare l'effetto finale nell'immagine che segue.
Figura 21: Un'immagine di esempio formattata con i CSS
[D]
Purtroppo Internet Explorer 6 (ed inferiori) presenta dei problemi nel computo delle dimensioni dell'elemento flottato. È necessario modificare il codice CSS come segue:
In pratica si deve evitare di centrare l'immagine tramite margini orizzontali automatici, ricorrendo invece alla dichiarazione
text-align: center
(riga 7). Ovviamente in tal senso l'immagine non va dichiarata come blocco.
Il piè di pagina è molto simile all'elenco degli autori e della versione del documento visto in precedenza. La marcatura usata in questo caso è la seguente:
Gli stili da applicare sono estremamente semplici:
Le righe 8-10 sono interessanti: in questo caso veniva richiesta una sottolineatura del testo, che abbiamo realizzato usando
un bordo inferiore. Tale soluzione si rivela più incisiva della dichiarazione text-decoration: underline
, in
quanto quest'ultima non ci permette di controllare lo spazio tra la linea di base del testo e la sottolineatura. L'immagine
che segue mostra il risultato ottenuto.
Figura 22: Il piè di pagina e le note finali
[D]
Alla fine del nostro percorso ci troviamo di fatto di fronte ad un bivio. Infatti abbiamo creato due documenti, diversi nella struttura e negli stili applicati.
application/xhtml+xml
è
compatibile con i browser che attualmente supportano maggiormente gli standard. Abbiamo quindi una compatibilità
nel presente e nel futuro.text/html
è compatibile
con tutti i browser, anche con quelli dal supporto agli standard più problematico. Abbiamo quindi una compatibilità
nel presente, nel passato e nel futuro.Quale scegliere? A nostro avviso si dovrebbe operare, se possibile, una scelta onnicomprensiva, fornendo il secondo documento come documento principale ed il primo come alternativa per quei browser che supportano il tipo MIME specificato. Come alternativa praticabile, si può optare per la negoziazione del contenuto, come visto in precedenza.
Scrivere un documento servito come application/xhtml+xml
ci abitua ad un rigore formale e ad una precisione
non sempre possibile nel formato text/html
, data la già citata permissività dei browser con quest'ultimo
formato.
Tale rigore è necessario se pensiamo al futuro sviluppo del Web e alle nuove tecnologie che si stanno affermando. Esse richiedono una disciplina nella scrittura del codice impensabile fino a qualche tempo fa. Prepararci al futuro è il miglior modo per affrontare le sfide del presente.