SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida Linee guida CSS Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7

Transcript

1 Sommario SOMMARIO INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida Linee guida Linee guida 2 5 CAPITOLO 2 7 Fogli di stile La sintassi Ereditarietà degli attributi Regole di cascading I tag <SPAN> e <DIV> I selettori Tag HTML Classi Identificatori Pseudo-classi e Pseudo-elementi Selettori in cascata Raggruppamento Le proprietà Lunghezze, percentuali, colori, url Font Colore e sfondo Testo Box model Classificazione Associare i fogli di stile ai documenti (X)HTML Fogli di stile esterni Fogli di stile incorporati La in linea 29 Salvatore Sole 1

2 Sommario CAPITOLO 3 31 Tecniche per l utilizzo dei ai fini dell accessibilità Linee guida per l accessibilità ai contenuti del Web Fornire alternative equivalenti al contenuto audio e visivo Non fare affidamento solo sul colore Usare marcatori e fogli di stile e farlo in modo appropriato Chiarire l uso di linguaggi naturali Creare tabelle che si trasformino in maniera elegante Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante Assicurarsi che l utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo Assicurare l accessibilità diretta delle interfacce utente incorporate Progettare per garantire l indipendenza da dispositivo Usare soluzioni provvisorie Usare le tecnologie e le raccomandazioni del W3C Fornire informazione per la contestualizzazione e l orientamento Fornire chiari meccanismi di navigazione Assicurarsi che i documenti siano chiari e semplici Tecniche per l accessibilità ai contenuti del Web Ridurre la manutenzione ed accrescere la coerenza L utente ha la precedenza sugli stili Unità di misura Contenuto generato Font Effetti di stile per il testo Testo al posto di immagini Formattazione e posizione del testo Tabelle Colori Contrasto di colore Assicurarsi che l informazione non sia convogliata solo dal colore Fornire indicazioni contestuali nelle liste HTML Configurazione, posizionamento, scalamento ed allineamento Immagini e distanziatori Righe e bordi 49 Salvatore Sole 2

3 Sommario Uso del foglio di stile per il posizionamento e uso della marcatura per trasformare finemente Creare movimento con fogli di stile e script Fogli di stile a cascata per sintetizzatori vocali Accesso a rappresentazioni alternative del contenuto Media type Retrocompatibilità 57 CAPITOLO 4 59 Analisi dei principali browser Opera Netscape 7.0/Mozilla Ms Internet Explorer Principali differenze 61 CAPITOLO 5 62 Regole pratiche 62 CAPITOLO 6 73 Esempio 73 CONCLUSIONI 78 BIBLIOGRAFIA 79 Appendice A 80 Salvatore Sole 3

4 Introduzione INTRODUZIONE Lo scopo di questa monografia è la definizione teorica delle tecniche relative all utilizzo dei fogli di stile a cascata () 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. Anteriormente all introduzione delle tecniche 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, 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 consente a chiunque di poter visitare la rete. Sino all introduzione delle tecniche 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 è 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. Il terzo capitolo offre ai progettisti i metodi per rendere un sito accessibile mediante i. 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 nella riprogettazione della home-page del sito di un noto provider. Salvatore Sole 4

5 Cap. 1 Linee guida CAPITOLO 1 Linee Guida Il presente capitolo, espone le linee guida formali proposte dal W3C per il corretto utilizzo dei. 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 1 Un interprete che utilizza i 1 per visualizzare i documenti è conforme alle specifiche 1 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 1 nei limiti del mezzo di presentazione (ad esempio, risorse limitate e limitata risoluzione). 4. Emette fogli di stile 1 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 2 I seguenti punti devono essere osservati da un interprete che voglia conformarsi alle specifiche 2: 1. Uno o più media type 2 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

6 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 ) è 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

7 Cap. 2 Fogli di stile CAPITOLO 2 Fogli di stile Il presente capitolo espone le principali regole sintattiche dei. 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. 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; proprietà2: valore2; proprietà3: valore3; } Nel codice seguente si definiscono il colore (tramite l attributo color ) e le dimensioni del testo (con l attributo font-size ) per i selettori H1 e H2: 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

8 Cap. 2 Fogli di stile 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> ): <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: 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

9 Cap. 2 Fogli di stile 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> 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. Il selettore consente, infatti, di specificare a quale settore del documento la regola di stile debba essere applicata. Nel codice 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 Tag HTML Ogni tag HTML è un selettore. Ad esempio: (X)HTML p { font-family: Times New Roman, sans-serif; Salvatore Sole 9

10 Cap. 2 Fogli di stile 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 Classi Per comodità è possibile associare ad un tag HTML diversi stili, ciò è reso possibile dalle classi. 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. 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..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

11 Cap. 2 Fogli di stile 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: #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> 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: A:link { color: #00F; } A:visited { color: ; } Salvatore Sole 11

12 Cap. 2 Fogli di stile 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. p#paragrafo-iniziale:first-letter { font: 1.2em italic georgia; float: left; margin: -5px 3px 0 0; } 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: p i { font-style: italic; } (X)HTML <p>testo normale <i>testo corsivo</i> testo normale</p> 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 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h4 { font-family: sans-serif } h5 { font-family: sans-serif } h6 { font-family: sans-serif } Salvatore Sole 12

13 Cap. 2 Fogli di stile 2.6 Le proprietà In questo paragrafo saranno brevemente illustrate le proprietà dei. Le proprietà dei possono essere raggruppate in sei categorie: Lunghezze, percentuali, colori, url Font Testo Colore e Sfondo Box model Classificazione Lunghezze Font-family Word-spacing Color Margin Display Percentuali Font-style Letter-spacing Background Padding List-style Colori Font-variant Line-height Border Url Font-weight Text-indentation Width Font-size Vertical-align Height Font Text-decoration Float Text-transform Clear Text-align White-space Lunghezze, percentuali, colori, url 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

14 Cap. 2 Fogli di stile pc: picas (1pc=12pt) Percentuali Le percentuali (positive o negative) sono relative alla dimensione di altri elementi. La percentuale viene applicata al valore dell elemento padre. Esempio: p { font-size: 80% } /* l 80% della dimensione dei font dell'elemento parent */ 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 (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) URL Un valore URL viene fornito attraverso la seguente sintassi: url(indirizzo); l indirizzo può essere riportato fra apici o virgolette. Esempio: body { background: url(immagini/sfondo.gif) } body { background: url("immagini/sfondo.gif") } body { background: url('immagini /sfondo.gif') } body { background: url(../../immagini/sfondo.gif) } Salvatore Sole 14

15 Cap. 2 Fogli di stile Font 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" 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 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

16 Cap. 2 Fogli di stile Esempio:.maiuscolo { font-variant: small-caps } 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 */ Font-size font: Indica la dimensione del font. Abbiamo quattro modi per indicare la dimensione dei dimensione assoluta dimensione relativa lunghezza percentuale Per il dimensionamento assoluto abbiamo diversi valori: xx-small x-small small medium large Salvatore Sole 16

17 Cap. 2 Fogli di stile x-large xx-large Il dimensionamento relativo invece si effettua attraverso due valori: larger smaller Esempio: p { font-size: 0.80em } 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 } Colore e sfondo Color Esempio: Questo attributo ha la funzione di definire il colore di un selettore. a { color: #F00 } em { color: red } 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

18 Cap. 2 Fogli di stile valori: Per quel che riguarda la ripetizione dell immagine l attributo può assumere quattro 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 Esempio: Qualunque sia il valore utilizzato ci si riferisce sempre all angolo superiore sinistro. 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) Testo 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

19 Cap. 2 Fogli di stile Esempio:.parole-distanziate { word-spacing: 1.00em }.parole-ravvicinate { word-spacing: -0.20em } 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 } 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% } 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; } 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

20 Cap. 2 Fogli di stile 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) Esempio: Possono essere utilizzati anche valori percentuali. img { vertical-align: top }.apice { vertical-align: super }.pedice { vertical-align: sub } 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 */ 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

21 Cap. 2 Fogli di stile 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 } 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 } 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 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

22 Cap. 2 Fogli di stile Il seguente diagramma mostra come questi settori sono collegati 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

23 Cap. 2 Fogli di stile 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 } 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

24 Cap. 2 Fogli di stile none dotted dashed solid double groove ridge inset outset Lo stile può essere definito con le seguenti parole chiave: 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 # }.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

25 Cap. 2 Fogli di stile 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 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 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 } 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

26 Cap. 2 Fogli di stile Esempio: img.figura { float: right; } blockquote { float: left; } 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. none left right both Esempio: I valori possibili sono: p.nofloat { clear: both; } pre { clear: left; } L immagine seguente mostra il funzionamento degli attributi float e clear. Salvatore Sole 26

27 Cap. 2 Fogli di stile 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:.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>.ripristino-float { clear: left } Classificazione 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 } 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

28 Cap. 2 Fogli di stile 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 :.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 ai documenti (X)HTML. I metodi sono: Fogli di stile esterni Fogli di stile incorporati La in linea Salvatore Sole 28

29 Cap. 2 Fogli di stile 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> Fogli di stile incorporati Le regole dei 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> La Ad esempio: La permette di importare regole da un altro foglio di special.css; body { font:80% Verdana,Helvetica,sans-serif; } p { font: 1em Verdana, Helvetica, sans-serif } [...] Se presenti, le devono precedere le altre regole in linea Attraverso l'attributo STYLE è possibile specificare le regole 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

30 Cap. 2 Fogli di stile <span style="background: yellow">questo testo</span> sarà evidenziato in giallo </p> </body> Salvatore Sole 30

31 Cap. 3 Tecniche per l utilizzo dei ai fini dell accessibilità CAPITOLO 3 Tecniche per l utilizzo dei ai fini dell accessibilità In questo capitolo vengono date delle direttive per la creazione di un sito accessibile mediante l utilizzo dei. 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 nel rispetto delle WCAG. 3.1 Linee guida per l accessibilità ai contenuti del Web 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 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

32 Cap. 3 Tecniche per l utilizzo dei ai fini dell accessibilità 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 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 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 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

33 Cap. 3 Tecniche per l utilizzo dei ai fini dell accessibilità 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 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 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 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