I CSS di Elisa

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Cosa significa ACCESSIBILITA’ ?: Dopo aver navigato parecchio a questo proposito, ho riassunto questo “enorme” termine che è diventato quasi un chiodo fisso ..., in questo: Creare un sito accessibile significa creare un sito che possa essere visto e letto correttamente da tutti gli utenti, anche i disabili, quindi non solo da tutti i browsers, uditivi, e non, ma anche da quei dispositivi basati su Tv, PC, PDA, stampanti ecc… che ad oggi vengono utilizzati. Oltre a questo creare un sito accessibile significa renderlo compatibile a tutte le regole standard sull’accessibilita’ ossia a quelle regole sancite dal consorzio cosiddetto W3C (World Wild Web Consortium), (consorzio di aziende per lo sviluppo di standard per il Web).(notizie più dettagliate su di esso le si trovano qui!: http://www.w3c.it/w3cin7punti.html) e per saperne ancora di più : Cos'è una DTD e perché occorre dichiararne una).

Come fare a creare un sito che abbia caratteristiche?: Parliamo quindi di CSS.

tutte

queste

I CSS Cosa sono?

I Css o Cascading Style Sheets, sono Fogli di Stile a Cascata, e definiscono stili di formattazione del testo di un solo paragrafo, di una pagina web o di un intero Sito, Inoltre servono anche per creare layout strutturati per definire il design della pagina web.

Possono essere implementati o inseriti nelle pagine web in tre modi:

1

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

- in linea : ossia uno stile unico inserito all’interno del codice Html: - Incorporato : un foglio di stile che controlla gli elementi di una pagina web: - Esterno : un foglio di stile che controlla l’aspetto di molte pagine web Perché i CSS ?

I Css presentano grandi vantaggi da tutti i punti di vista e non costituiscono nessun ostacolo per il raggiungimento dell’accessibilità DI UN SITO WEB. L’ostacolo è costituito purtroppo dai browsers che li interpretano, alcuni infatti tendono ad interpretarli non correttamente ma questi sono “ostacoli” che possono essere facilmente aggirati, garantendo così la nascita di siti accessibili ai diversamente abili e a tutti coloro che navigano con qualsiasi browsers.

VANTAGGI: 1. I contenuti di un qualsiasi sito web possono tramite i css essere accessibili a qualsiasi browser; (come dicevo sopra) 2. Viene effettuata una separazione tra contenuti grafici e contenuti scritti, 3. Il contenuto viene organizzato in gruppi e sottogruppi; 4. Vengono eliminate le “ridondanze” che creavano nel codice HTML le tabelle, con al contrario creazione di codice pulito, chiaro e semplice da interpretare; 5. Si possono creare dei layout più complessi di quelli che invece venivano elaborati con l’uso delle tabelle: 6. Si possono associare layout diversi per altri dispositivi come gli screen reader , i PDA, le stampanti, ecc…

2

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

7. Ogni pagina avrà una maggiore coerenza grafica; 8. Possibilità di cambiare aspetto al sito, solamente agendo su di un unico file; 9. Risultato finale controllato e sicuro, grazie alla tecnica del WYCIWYG (Ossia ciò che CODIFICHI, è ciò che otterrai).

GLI SVANTAGGI DEI CSS: Più che di svantaggi, si parla di limitazioni, dovute non certo ai CSS, ma ai browsers più vecchi o datati che non li interpretano correttamente. Parliamo di browser come Nascape versione 4.0 e precedenti o Internet Explorer versione 4 e prec.

Succede questo: Se proviamo a vedere una pagina web realizzata con l’utilizzo dei fogli di stile utilizzando uno di questi browsers, vedremo la stessa con i parametri come colore testo, grandezza, posizione ecc.. di default del proprio browser.

Se però noi utilizziamo Dreamweaver per la creazione dei fogli di Stile, abbiamo la possibilità di poter convertire i CSS in html automaticamente, nel caso che si voglia creare una versione compatibile “All’indietro con gli altri browsers più vecchi”. (lo vedremo più avanti).

Diversamente è possibile creare CSS più semplici che siano facilmente interpretabili anche dai browsers “vecchio stampo”, poiché la cosa importante è non riuscire a mantenere la stessa grafica su qualsiasi browsers ma riuscire a vedere correttamente i contenuti su tutti loro.

3

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Non più tabelle: Costituiscono un “limite” per l’accessibilità: Con le tabelle si lavora bene con editor visuali con interfacce WISIWIG, ( dall’ inglese ciò che vedi in video è ciò che otterrai) ma nel momento in cui io penso di aver creato un ottimo layout tabellare, accade al contrario che venga creato codice html errato, appesentatito e ridondante. Inoltre creando tramite tabelle si mescola layout contenuto testuale, con il layout contenuto grafico e di conseguenza aumenta il peso delle nostre pagine. Infatti quando viene caricata una pagina web, prima viene caricata la tabella poi il contenuto grafico ed infine il contenuto testuale. Così se ci sono molte tabelle annidate dovremo aspettare (non so quanto), prima di vedere il contenuto della pagina web, con conseguente rallentamento di tutto. Pertanto se la velocità è “importante” l’uso delle tabelle non è buona cosa. …e concludendo non sarebbe bene utilizzare la tabelle in quanto impediscono agli screen reader (lettori monitor per i disabili) di essere correttamente interpretate, infatti, loro leggono il testo da sinistra verso destra, ma se io intabello il testo in modo diverso rischio sicuramente che il mio utente legga del testo che alla fine non ha senso.

Ma il design???

Io, che sto scrivendo questa dispensa, mi chiedo ma il design??. Naturalmente il design è importante, e non ci deve essere separazione tra coloro che scrivono in puro hmtl e coloro che ricercano la bellezza grafica necessaria per attirare l’attenzione dell’ utente finale. Detto questo procediamo per gradi e …

4

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Prima cosa importante da chiarire: Non vi è alcun controllo (Flash a parte) di come apparirà la nostra pagina web o il nostro intero sito su un qualsiasi dipositivo come i PDA, le stampanti, screen monitor o su i diversi browsers utilizzati a tutt’oggi, quindi a differenza di una pagina stampata come un giornale o una rivista, il nostro sito web può mutare in dipendenza a uno dei fattori sopra descritti.

Occorre pertanto essere sicuri che il contenuto delle nostre pagine web non cambi sia nel colore, nelle dimensioni, nello spazio tra una riga e l’altra e così via…

Quindi è giusto applicare un layout che sia flessibile.

E’ possibile dopo aver detto tutto questo, usare ancora le tabelle o no?? E se si, come renderle accessibili??

Si, le tabelle possono essere ancora usate, la cosa importante è sapere che devono essere ben strutturate, non avere celle o altre tabelle che si sovrappongono, e che contengano del testo in maniera che sia leggibile da sinistra verso destra senza intoppi ed ostacoli. Infatti, gli screen reader (dei quali si consiglia di scaricarsene uno per testare il lavoro finale della pagina web) che leggono il testo contenuto all’interno delle celle da sinistra verso destra, potrebbero trovare ostacoli di questo tipo e falsare o meglio rendere del tutto illeggibile la nostra pagina web.

Possiamo inoltre fornire del testo alternativo all’ interno delle tabelle, (come deve assolutamente accadere nel caso di inserimento d’ immagini –[attributo html : alt]) o meglio dell’elemento TABLE, che costituisca un riassunto di ciò che 5

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

contiene la tabella. Tutto ciò grazie all’ attributo “summary”.

Esempio: <TABLE summary= “Questa è una tabella di layout. La colonna di sinistra contiene la barra di navigazione e la colonna di destra il testo principale”> Dopo aver provato questi “trucchetti”, puoi testare la tua pagina web su programmi appositi per i disabili a solo testo o vocali, e vedere se risulta accessibile. Se ciò non accade è possibile creare una versione solo testo, del tuo sito, Diversamente dovremo usare i tag Div che servono nei CSS ad elaborare strutture grafiche al posto delle tabelle.

I tag Div per la struttura delle pagine ossia per graficamente strutturare le sezioni come intestazione, colonna destra, sinistra e piè di pagina (footer), altro non sono in dreamweaver che i “livelli”.

Mentre prima io disegnavo la mia tabella e la mia cella al suo interno per inserire testo, menu o altro ancora, ora disegno un livello. Attenzione!! un livello che non abbia altri attributi, che non siano il float (ossia la sua posizione o allineamento che mi serve da ancoraggio) e nel caso di livello che mi serva da contenere del testo, la sua larghezza (width) sempre espressa in percentuale. (per garantire flessibilità) Perché questo? Semplice perché avrei ancora dei problemi nella compatibilità del browsers più datati che non supportano alcune parti di codice css.

Insomma per farla breve i tag <div> servono a strutturare la nostra pagina, nel senso che se io intendo inserire un immagine d’intestazione, dovrò prima inserire il livello, che nella parte del codice è il tag <div> mettere gli attributi di cui sopra e nominarlo, ad esempio “intestazione”, poi andare in inserisci ed inserire la mia immagine d’ intestazione. In questo modo io non 6

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

lo vedo graficamente ma è come se la mia immagine “intestazione” si trovasse all’interno di una cella, che nella fattispecie è il tag div, con float left (o ancoraggio e fissaggio a sinistra).

Quindi ricordare che ogni volta che io voglio mettere qualcosa nella mia pagina devo prima inserire il tag div, attraverso se preferisco l’icona d’inserimento livello, e poi inserire ciò che preferisco testo o immagini.

Prima però è sempre bene progettare su carta la nostra pagina strutturata. Potrei anche utilizzare l’icona “inserisci livello”, ma si genera uno script di javascript ossia del codice nella pagina che impedisce ai browsers più vecchi (sempre loro), di essere interpretato. E poi ci sarebbero tanti tag da eliminare o vedere attentamente al fine che venga tutto reso accessibile. Si deve giocare molto tra progettazione e codice, il che sottintende che si conosca un minimo di html.

Detto questo, direi che chi come me è abituato a vedere graficamente la posizione d’inserimento degli oggetti nella pagina, non si trova a proprio agio e non lavora al massimo delle proprie potenzialità.

Quindi, una funzione molto utile ci viene data proprio da Dreamweaver stesso, ossia la possibilità di convertire in livelli le tabelle e celle, rendendo accessibile la struttura con alcuni accorgimenti.

Ad esempio, io creo come sempre la mia tabella, le mie celle per i vari contenuti, come meglio preferisco all’interno della mia pagina, poi inserisco la parte grafica, logo, menu , immagini, ed il testo (NON FORMATTATO), nudo e crudo. Poi vado in layout Standard e vado nel menu elabora – converti – tabelle in livelli.

7

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Osserviamo che nella vista codice, tutto è diventato div, un div per ogni cella inserita.

Ora bisogna avere un pochino di dimestichezza con l’Html, e quello lo si fa solo lavorandoci sopra ed osservando sempre cosa accade nel codice quando opero in maniera grafica.

Comunque la cosa che devo fare è: nominare l’id del livello, ad esempio il primo livello (layer1) contiene il logo, quindi invece di Layer 1 lo nominerò logo, e via dicendo. In pratica si identifica con un nome il numero del livello, e la maniera migliore è quella di chiamarlo come il contenuto che porta.

In ogni caso le versione di Nascape 4.0 crea ancora problemi, ma avremo creato in questo modo una struttura con i soli div, che contiene i nostri oggetti, menu e testi.

Dreamweaver ci da anche la possibilità di convertire il nostro codice, in maniera da creare un sito parallelo che sia leggibile alle versioni di Nascape. Basta andare in file – converti e il gioco è fatto. Prima di aprire il nostro sito porremo all’utente la possibilità di poter visualizzare il sito per le versioni dei diversi browsers.

8

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Creiamo ora gli stili Css per formattare il nostro testo: Passiamo alla pratica con il nostro editor Dreamweaver: Premessa: Innanzitutto bisogna chiedersi qual è il tipo di Css migliore che sfrutta tutte le potenzialità che possiede.

Dreamweaver utilizza i css in linea , demoninadoli “Livelli” per la struttura e per definire determinati effetti DHTML. Ad esempio: (graficamente succede questo)

Creare un livello : 1. Andare su Layout; 2. Standard; 3. Disegnare il livello

9

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Mentre se osserviamo il codice abbiamo la seguente scritta: <div id="Layer1" style="position:absolute; left:47px; top:65px; width:192px; height:230px; z-index:1; background: #CC66CC; layer-background-color: #CC66CC; border: 1px none #000000;"></div> Come si può notare vediamo subito che per definire un CSS il tag utilizzato è div con l’attributo id per definirne il nome e la tipologia, poi ovviamente a tale livello vengono attribuite caratteristiche come allinemanto, colore sfondo, bordo, colore bordo, altezza, larghezza ecc…

Vediamo ora graficamente come si crea uno stile Css incorporato tramite Dreamweaver:

10

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Basta andare nella barra “Elabora” – “Proprietà di pagina” e compilare attentamente tutte le finestrelle che appaiono, ossia l’aspetto come vediamo sopra, i collegamenti, le Intestazioni, ecc..ecc..

In questo caso il codice sarà fatto in questo modo: <style type="text/css"> <!-body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #00FF99; } body { background-color: #000000; } a{ font-family: Times New Roman, Times, serif; font-size: xx-small; color: #33CCFF; } a:visited { color: #999933; } a:hover { color: #3333CC; } a:active { color: #993300; } h1,h2,h3,h4,h5,h6 { 11

Rapporto tra AccessibilitĂ , Css e Come utilizzare a questo scopo Dreamweaver

By Helys

font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 16px; color: #00CCCC; } h2 {

font-size: 16px; color: #3366FF;

} h3 { font-size: 14px; color: #0099CC; } h4 {

} h5 {

font-size: 12px; color: #00FFFF;

font-size: 24px; color: #00FF99; } h6 { font-size: 16px; color: #333399; } --> </style></head> Osserviamo bene h1 ,h2,h3,h4, eccâ&#x20AC;Ś 12

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Essi sono tag html che definiscono le formattazioni dei paragrafi o meglio servono a strutturare i contenuti.

Ripetiamo sempre poiché è importantissimo, che una separazione dei contenuti in una pagina web o in qualsiasi altro tipo di pubblicazione anche su carta, è buona norma, ed ogni sezione o paragrafo deve essere separata dal tag <div></div> Tuttavia lo stile CSS incorporato non è l’ideale poiché incide sullo stile della pagina nella quale è scritto. Durante l’ update la mancanza di alcune pagine causa problemi di incongruenza del sito. Inoltre ogni volta che un utente visualizza una pagina dovrà caricare le informazioni sullo stile, esistenti sulle singole pagine del sito, con conseguente rallentamento di visualizzazione.

Benvenuti quindi i CSS esterni!

Creando un file Css che contiene tutte le informazioni sullo stile per il sito Web, potremo: 1. Mantenere un aspetto omogeneo su tutte le pagine che si collegano al foglio di stile.

2. Aggiornarle facilmente cambiando i valori solo di quel file.

3. Rendere le pagine molto più piccole e rapide per il download, poiché tutte le informazioni sullo stile sono contenute in quel file “esterno”.

13

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Procediamo con Dreamweaver: Apriamo la pallett tramite il menu “finestra”, stili CSS, e avremo questo:

In basso alle finestrella Stili css abbiamo due iconcine : Una per associare il foglio di stile (quindi si presuppone sia già stato creato) E Una per crearlo:

14

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Procediamo a creare lo stile Css:

Inseriremo le informazioni necessarie, ossia il nome (della classe), preceduto sempre da un punto, che sarebbe una variante di formattazione degli stessi TAG, PER RICHIAMARLI TRAMITE QUEL NOME OGNI VOLTA CHE VOGLIAMO FORMATTARE QUEL DATO TAG, IN MODO DIVERSO RISPETTO A TUTTI GLI ALTRI , PRESENTI NELLA PAGINA. Nella parte “Definisci in”, creiamo un foglio Css esterno solo se spuntiamo la parte “Nuovo file foglio di stile”, diversamente ne possiamo creare uno incorporato.

Andiamo avanti: In seguito apparirà la finestra nella quale vi chiede di salvarlo o nel documento corrente o per l’intero sito, e nel qual finestra dovrete dare un nome al file css che state creando.

15

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Esempio:

Nome dello stile css.

Come si può vedere io nella cartella Stile ho creato precedentemente anche altri tre tipi di fogli di stile.

Relativo a: Documento, o Cartella principale sito.

Ora ci apparirà una finestra simile a quella incontrata all’inizio da Proprietà pagina, nella quale definire tutte le caratteristiche di formattazione CSS Una volta creato il nostro stile possiamo: 16

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

o collegarcisi, o importarlo tramite l’iconcina posta a fianco a quella per crearlo.

Assoceremo quindi un foglio di stile.

La differenza tra il collegamento e l’importazione sta nella compatibilità ai diversi tipi di browsers.

A mio parere è meglio l’importazione ma una volta creata la vostra pagina web potrete testarla tramite la pallets “risultati” E vedere la “compatibilità ai browsers”.

Infatti Opera non supporta il tag “link” che serve a collegare il foglio si stile, quindi è meglio importarlo!.

Altro consiglio per testare sempre le vostre pagine con Dreamweaver: - Occorre impostare i tipi di browsers che faranno da tester: - Cliccate sull’ iconcina posta a fianco della barra titolo pagina: -

Poi cliccate su “Impostazioni” e potrete spuntare tutte le voci dei browsers che appaiono dalle versioni più vecchie. Vedi l’esempio: 17

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Poi date l’OK, e via…potrete vedere quando appaiono della irregolarità e vedere come riuscire ad aggirarle.

E’ ovvio che in questo caso occorre una certa conoscenza anche minima di html per potersi barcamenare al meglio ma il risultato sarà soddisfacente.

Una strategia per tutti i tipi di browsers: Potrete usare entrambi i metodi di collegamento ed importazione per associare due fogli di stile diversi, che insieme coprono più versioni dei browser, incluso Nescape 4. Solo un foglio di stile contiene i valori supportati nelle versioni precedenti, mente l’altro contiene proprietà aggiuntive o diverse per le nuove versioni di browser, con un supporto CSS più sicuro.

18

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Ecco il codice: <link href=”oldbrowser.css” rel=”stylesheet” type=”text/css”/> <style type="text/css> <!- @import url(“newbrowsers.css”); --> </style> Possiamo in dreamweaver trovare anche tanti modelli di stili Css, basta andare in nuovo – fogli di stile Css – e sceglierne uno.

19

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Ricordarsi sempre di tenere aperta la pallets chiamata “risultati”, nella quale analizzeremo la nostra pagina e convalideremo il nostro codice html.

Ogni volta che ci saranno degli errori nel codice, provare a correggerli se possibile, in maniera da creare un contenuto il più possibile accessibile!

Utilizzare anche programmi che verifichino i colori presenti nel sito, e se creano problemi di visualizzazione ai disabili… .

Programmi come Colour_Contrast_Analyser (vedi su google) . Prima di cominciare con la stesura del proprio sito impostare i colori come da menu e verificare se vanno bene oppure no, poi procedere; . Poi se possibile scaricarsi la barra dell’accessibilità: basta andare su google, potremmo testare e convalidare css e html; . Testare il nostro sito anche su altre piattaforme se ne abbiamo la possibilità.

Per flash il discorso è diverso, quindi il mio consiglio è di non rinunciare di certo al suo uso ma creare una versione accessibile, e una con flash per poter accontentare tutti gli utenti!. Il lavoro è duro ma potremmo definirci web designer a tutti gli effetti.

Flash non sarà mai completamente accessibile, anche se si è visto qualche passo in questa direzione.

20

Rapporto tra Accessibilità, Css e Come utilizzare a questo scopo Dreamweaver

By Helys

Per adesso, ciascuno sviluppatore si deve far carico di fornire, accanto ai filmati Flash e Shockwave, dei contenuti alternativi. Inoltre, nello sviluppo di contenuti e applicazioni multimediali, si dovrebbero adottare sempre le tecniche di design accessibili, come la piena navigabilità attraverso la tastiera, la sincronizzazione di audio e sottotitoli, e la fornitura di testo equivalente per tutte le informazioni di tipo grafico. Così non solo si migliorerà l'accessibilità a favore dei diversamente abili, ma anche per ciascuno di noi.

Questo ultimo paragrafo è stato preso direttamente dal seguente sito,nel quale poter trovare tante notizie utili ed approfondimenti sul tema accessibilità: http://www.webaccessibile.org/default.asp

21