Visualizzazione post con etichetta Web Accessibile. Mostra tutti i post
Visualizzazione post con etichetta Web Accessibile. Mostra tutti i post

lunedì 1 dicembre 2008

Le regole d'oro per creare un buon sito web

1 commenti
Per realizzare un buon sito internet occorre attenersi ad una serie di principi guida, evitando così alcuni errori molto comuni, che pregiudicano irrimediabilmente la qualità del sito.

Questi consigli vi aiuteranno a progettare al meglio il vostro sito.

1. Navigazione in evidenza.
Il visitatore si aspetta di trovare il menu di navigazione nella parte superiore o nel lato sinistro. Non è strettamente necessario seguire questa impostazione, ma è sempre consigliabile metterlo particolarmente in evidenza.

2. Utilizzare pochi colori, coerenti con il logo scelto.
E' sconsigliabile utilizzare un numero eccessivo di colori, che distolgono l'attenzione dell'utente dai contenuti principali. E' meglio limitare la scelta tra 2 o 3 colori, possibilmente gli stessi utilizzati nel logo, e loro sfumature.

3. Attenzione ai font.
Nella progettazione del nostro sito dobbiamo ricordare che i caratteri preinstallati nei computer sono relativamente pochi, e non possiamo correre il rischio che il nostro visitatore non abbia il font che abbiamo scelto. E' meglio quindi limitare la nostra scelta ai caratteri standardi: Arial, Verdana, Tahoma, Times New Roman, Georgia, Courier. E cercate di evitare il Comic Sans, ormai terribilmente obsoleto. Date al vostro carattere un colore che lo renda facilmente distinguibile dallo sfondo, senza diventare fastidioso. La combinazione migliore è sfondo bianco / testo nero. Ricordate che per testi molto lunghi l'accoppiata sfondo nero / testo bianco è da evitare perchè rende meno agevole la lettura.

4. Repeat repeat repeat.
Nelle pagine interne del sito è utile ripetere la stessa struttura della home, o meglio collocare gli stessi elementi nelle stesse posizioni. Inoltre è meglio mantenere lo stesso stile per i titoli di uguale rilevanza. In questi casi ci viene in aiuto il foglio di stile (CSS). Infatti è buona norma creare un solo foglio di stile per tutto il sito, che setti le caratteristiche degli elementi ricorrenti, quali titoli, tag, paragrafi, link. In questo modo l'utente si sente più "sicuro" e può navigare con più facilità.

5. Stop al contatore.
Al giorno d'oggi, nei siti "ufficiali", non si utilizza più il contatore utenti "a vista". E' molto più comodo ed elegante inserire uno dei tanti script gratuiti come Google Analytics o PHP Stats, che oltre a darci il numero dei visitatori, ci fornisce notevoli informazioni su chiavi di ricerca, pagine più visitate, percorsi di visita, provenienze, browsers utilizzati, ecc.

6. Evitare testi lampeggianti o in movimento.
I testi lampeggianti o in movimento stile insegna non vanno più di moda. Evitate di usarli, serviranno solo ad irritare i vostri visitatori e a dare al vostro sito un aspetto non professionale.

7. Titoli coerenti.
Il titolo è molto importante per la pagina web, sia per il visitatore, che si aspetta di trovare un contenuto coerente, sia per il motore di ricerca, che lo ritiene la "chiave" di lettura della pagina. E' necessario che il titolo sia semplice ma chiaro, e correlato strettamente con i contenuti presenti nella pagina.

8. No ai frame.
Non utilizzare più i frames! Sono obsoleti, inaccessibili, sconsigliati per l'ottimizzazione sui motori di ricerca.

9. Evitate i trucchetti per posizionarvi nei motori di ricerca.
Fino a poco tempo fa si utilizzavano dei "trucchetti" per posizionare meglio il proprio sito nei motori di ricerca, come per esempio l'inserimento di centinaia di parole chiave con il testo invisibile (stesso colore di sfondo, posizionamento negativo, ecc).
Queste tecniche sono altamente sconsigliate in quanto oggi Google penalizza il sito "truccato", arrivando perfino ad inserirlo in una Black List o bannandolo completamente dai propri archivi.

10. Oddio, lo sfondo musicale no!
Alcuni pensano che l'introduzione di un sottofondo musicale nel proprio sito renda la navigazione più accattivante, ma non è così. Se la musica ha una ragione precisa per esserci (sito a tema musicale o con particolari tematiche o ancora in flash), bene (ma mi raccomando, prevedete sempre un sistema di ON/OFF), altrimenti evitatela completamente, per due motivi:
  1. I file sonori sono tipicamente ‘pesanti’, e richiedono un elevato tempo di scaricamento.
  2. Molti computer non hanno l'audio attivo, e quindi questo 'elemento' risulta inutile.


Consiglio fuori lista: in generale usate il buon senso e il buon gusto. Se una soluzione risulta particolarmente pesante, e porta il visitatore a lunghi tempi di attesa per visualizzare la pagina, evitatela. Se un elemento è troppo chiassoso rispetto al sito, non inseritelo. Create sempre siti accessibili a tutti, senza distinzione di browsers o plugin installati.
Non dovete pensare al vostro sito come al vostro cassetto della scrivania, dove buttare di tutto un po', ma come una bella foto, dove ogni elemento deve occupare il giusto spazio.
Leggi tutto...

lunedì 7 gennaio 2008

CSS: Simulare i frame

4 commenti
Per un sito che sto realizzando, si è presentata la necessità di creare una struttura con una parte fissa (il menu), e una parte "scrollabile" (il contenuto), senza ricorrere all'uso dei frame (in questo caso indubbiamente utili!). Mi è venuto in aiuto questo articolo, realizzato dal L. A. U. (Laboratorio di Accessibilità e User Innovation), che spiega come sfruttare i vantaggi dei frame senza utilizzare un frameset, ovvero creando, grazie alle istruzioni CSS, dei div "fissi" sulla pagina, che sembrino appunto frame.


IL PROBLEMA
Avere un div fisso sulla pagina (div id="menu"), con una soluzione funzionante su tutti i browser e utilizzando solo i CSS.


LA SOLUZIONE
1^. Creiamo innanzitutto la struttura html:
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>

2^. Ora creiamo il css.
Per i browser moderni (Firefox 2+, Opera 9+, Safari 3+, IE 7+) sarebbe sufficiente usare la proprietà position:fixed;, che risolverebbe completamente tutti i nostri problemi.
Purtroppo, però, gli altri browser (ad esempio IE 6 e precedenti) non recepiscono correttamente questa istruzione, ma la interpretano come position:static;, che non produce alcun risultato sulla nostra pagina.

Dobbiamo quindi ricorrere ad un piccolo trucco.
Diamo un posizionamento assoluto al nostro div fisso, e poi rendiamo l'istruzione fixed interpretabile solo per i browser moderni:
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}

E diamo al nostro div di contenuto un padding pari alla larghezza del menu:
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}

Questa soluzione funziona correttamente sui browser moderni, ma non su IE 6, che visualizza il div con posizionamento assoluto. Certo è meglio di niente, ma non è sufficiente.
Dobbiamo quindi inserire un commento condizionale, con del codice visibile solo da IE6 e precedenti, e forzare il browser ad operare in Quirksmode.

Il commento condizionale sarà il seguente:
<!--[if lte IE 6]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->

Il commento condizionale non fa altro che forzare l'altezza del nostro div di contenuto al 100% della finestra del browser, e quindi mostrare la barra di scorrimento verticale per il contenuto eccedente tale altezza.

Per forzare il browser ad operare in modalità Quirksmode, invece, è sufficiente inserire un commento prima della dichiarazione del DOCTYPE. Questa soluzione presenta però un inconveniente, in quanto inserendo un commento, forziamo anche IE7 ad operare in Quirksmode, quando in realtà il browser già funziona correttamente.
Ci sono quindi due possibilità: estendiamo il commento condizionale a IE7 (<!--[if lte IE 7]>), oppure inseriamo prima del DOCTYPE la dichiarazione XML (<?xml version="1.0" encoding="utf-8"?>). Attenzione, però. Utilizzando la dichiarazione in un file .php, questo smette di funzionare (<? è anche il tag di apertura del php). Consiglio quindi la prima soluzione.

Il nostro codice finale:
<!-- comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>
</html>



Ritengo che questo sito sia fonte di grande ispirazione per chi vuole creare siti con contenuti pienamente accessibili, e voglia rispettare in pieno quanto previsto dalla legislazione in materia.
Leggi tutto...