3) I siti web

Premessa alla parte terza: siti web

Riassunto:

Adesso che abbiamo visto le tecniche di codifica, di trasporto, e di visualizzazione delle informazioni contenute nelle pagine di un sito , esaminiamo quali sono le piu’ importanti caratteristiche tecniche che deve avere un sito web nel suo insieme per poter essere commercialmente utile e per potere adempiere a pieno alle funzioni per le quali esso viene costruito e pubblicato.

 

Il sito deve essere:

  • 1) Responsivo (si deve adattare a ogni strumento di visualizzazione)
  • 2) Accessibile (deve poter essere usufruito e utilizzato anche da persone diversamente abili)
  • 3) SEO friendly (Deve poter essere facilmente indicizzabile dai motori di ricerca e rintracciabile dai navigatori)- vedi parte quarta web marketing

Il “responsive design” di un sito web

Cos’è il responsive design di un sito web

 

La lingua inglese designa genericamente con l’aggettivo “responsive” tutto ciò che “reagisce o risponde rapidamente e in modo appropriato ad uno stimolo”.

In italiano l’aggettivo che rende al meglio il termine inglese (avendo ‘responsivo‘ un altro significato) è adattativo (o adattivo). Così la definizione dello Zingarelli:

  • 1 (biol.) Che facilita l’adattamento fisiologico o genetico, che è capace di adattamento, che tende verso l’adattamento.
  • 2 (tecnol.) Capace di adattamento (sistema adattativo: capace di modificarsi per soddisfare nuovi requisiti SIN. adattivo).

Se applichiamo questa idea ad un sito web, se cioè consideriamo quest’ultimo come un ‘sistema adattivo’, possiamo facilmente ricavare una definizione come quella fornita da Kayla Knight in questo articolo di Smashing Magazine:

Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.

Quando l’utente passa dal suo PC desktop ad un iPad, il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente.

Ora possiamo anche passare a specificare cosa non è il responsive design:

non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche per il mobile: un principio cardine del responsive design è che il web è uno e unico, non c’è pertanto necessità di versioni diverse per un singolo sito (magari ricorrendo a domini ad hoc per il mobile); quello che progetto e realizzo deve essere auto-adattante rispetto all’enorme e crescente varietà di dispositivi con cui viene (e verrà) fruito;
salvo pochissime eccezioni , non prevede l’introduzione di nuove tecniche: non dobbiamo imparare nuovi linguaggi o astruse tecnologie, ma soltanto applicare in un nuovo contesto e guidati da un diverso approccio tutto quello che conosciamo e applichiamo in fatto di markup (HTML), presentazione e layout (CSS), scripting (Javascript, Ajax, PHP, etc).

“Pattern” per il responsive design

Intorno a queste idee sta crescendo non soltanto l’interesse degli sviluppatori ma anche la volontà di iniziare a fissare un insieme di buone pratiche, individuando per esempio i principali pattern in fatto di design, che si tratti di menu di navigazione o di layout.

Esiste anche un sito che è proposto come modello e riferimento, vista la sua complessità, quello del Boston Globe. Molti hanno considerato la presentazione di questo sito una sorta di pietra miliare, paragonando l’evento al rilascio dei primi siti ‘importanti’ realizzati con layout CSS invece che con le tabelle.

Quei siti furono la prova che, dopo la fase pionieristica in cui la nuova idea veniva applicata per lo più a progetti personali o di limitato impatto in termini di traffico sul web, ci si poteva spingere a implementarli in contesti ben più ampi. Tutti sanno com’è proseguita la storia delle “tabelle vs. CSS”.

Responsive design nella pratica

Da quanto si è detto finora, si potrebbe ricavare l’idea che il responsive design abbia a che fare essenzialmente con i CSS o con l’adattamento del layout. Certo, il meccanismo che oggi è l’architrave di questo approccio sono le media queries CSS. E se si tratta di costruire layout che si adattano, è sempre con i CSS che operiamo. Ma, naturalmente, al crescere della complessità del progetto, aumenta la necessità di coinvolgere linguaggi come Javascript, tecnologie come Ajax (jQuery), interazioni lato server.

Quello che vorremmo rendere chiaro, però, è che a prescindere dai mezzi è la filosofia di fondo che conta. Di base sono questi gli obiettivi minimi da porsi per realizzare un’esperienza utente positiva nei contesti d’uso più diversi:

adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
servire immagini ‘meno pesanti’ ai dispositivi che non possono sempre sfruttare la banda larga;
semplificare il layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli;
nascondere gli elementi non essenziali su questi stessi dispositivi;
fornire un’interfaccia adatta all’interazione touch per i device che la supportano;
individuare e sfruttare, quando serve, funzionalità adatte al mobile (come la geolocalizzazione).

Accessibilità dei siti web

Accessibilità dei siti web

 

Negli ultimi anni le tecniche per rendere i siti web accessibili si sono affinate e consolidate facendo diventare internet più democratico e con meno ostacoli per tutti. Le aziende che oggi richiedono lo sviluppo di siti con i requisiti di accessibilità sono sempre più numerose perchè un sito accessibile è un sito che rispetta gli standard web, questi assicurano funzionalità e facile aggiornamento a costi contenuti anche quando browser e dispositivi si evolveranno.

Le regole internazioni per l’ accessibilità sono state sviluppate dal World Wide Web Consortium (W3C) che nella sezione dedicata del sito presenta le linee guida Web Content Accessibility Guidelines (WCAG).
In Italia il Parlamento ha definitivamente approvato la Legge Stanca in materia di accessibili
Consigliamo vivamente le aziende e i privati che vogliono realizzare un nuovo sito o aggiornare quello esistente di richiedere questi requisiti perchè – ripetiamo – un sito accessibile è un sito che rispetta gli standard web.

Quelli che segueno sono brevi consigli per rendere un sito web accessibile :

Immagini ed animazioni. Utilizzare l’attributo alt per descrivere la funzione di ogni elemento grafico.
Immagini cliccabili. Utilizzare l’elemento map e descrivere le zone attive.
Multimedia. Fornire sottotitoli e trascrizioni per l’audio, e descrizione di filmati.
Link ipertestuali. Utilizzare enunciati che conservino il loro senso al di fuori del contesto. Per esempio, evitare «cliccare qui».
Organizzazione. Utilizzare titoli, liste e una struttura coerente. Utilizzare CSS per l’impaginazione.
Figure e diagrammi. Descriverli all’interno della pagina o utilizzare l’attributo longdesc.
Script, applet e plug-in. Fornire una pagina alternativa quando tali funzionalitá sono inaccessibili o non supportati.
Cornici (frames). Utilizzare noframes e titoli sigificativi.
Tabelle. Facilitare la lettura linea per linea. Riassumere.
Verificare il lavoro. Validare. Utilizzare gli strumenti, la lista di controllo e le linee guida
Questi “QuickTips” sono presenti alla pagina web: WAI – QuickTips

Di seguito riportiamo l’elenco dei 22 requisiti di accessibilità (obbligatori per i siti internet pubblici) previsti dalle regole tecniche per l’attuazione della Legge Stanca e il collegamento al sito “Web per tutti” dove è possibile trovare molti approfondimenti e link.

Elenco dei requisiti di accessibilità per i siti Internet
(Dal Decreto Ministeriale previsto dalla Legge 4/2004 sulle regole tecniche pubblicato sulla Gazzetta Ufficiale n. 183 dell’8/8/2005)

Requisito n. 1

Enunciato: Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. In particolare, per i linguaggi a marcatori HTML (HypertText Markup Language) e XHTML (eXtensible HyperText Markup Language):
a) per tutti i siti di nuova realizzazione utilizzare almeno la versione 4.01 dell’HTML o preferibilmente la versione 1.0 dell’XHTML, in ogni caso con DTD (Document Type Definition – Definizione del Tipo di Documento) di tipo Strict;
b) per i siti esistenti, in sede di prima applicazione, nel caso in cui non sia possibile ottemperare al punto a) è consentito utilizzare la versione dei linguaggi sopra indicati con DTD Transitional, ma con le seguenti avvertenze:
1. evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
2. evitare la generazione di nuove finestre; ove ciò non fosse possibile, avvisare esplicitamente l’utente del cambiamento del focus;
3. pianificare la transizione dell’intero sito alla versione con DTD Strict del linguaggio utilizzato, dandone comunicazione alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie e al Centro nazionale per l’informatica nella pubblica amministrazione.
Riferimenti WCAG 1.0: 3.1, 3.2, 3.5, 3.6, 3.7, 11.1, 11.2
Riferimenti Sec. 508: Non presente
Requisito n. 2
Enunciato: Non è consentito l’uso dei frame nella realizzazione di nuovi siti. In sede di prima applicazione, per i siti Web esistenti già realizzati con frame è consentito l’uso di HTML 4.01 o XHTML 1.0 con DTD frameset, ma con le seguenti avvertenze:
a) evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
b) fare in modo che ogni frame abbia un titolo significativo per facilitarne l’identificazione e la navigazione; se necessario, descrivere anche lo scopo dei frame e la loro relazione;
c) pianificare la transizione a XHTML almeno nella versione 1.0 con DTD Strict dell’intero sito dandone comunicazione alla Presidenza del Consiglio dei Ministri – Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie e alCentro nazionale per l’informatica nella pubblica amministrazione.
Riferimenti WCAG 1.0: 12.1, 12.2
Riferimenti Sec. 508: 1194.22 (i)

Requisito n.° 3

Enunciato: Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l’alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall’oggetto originale nello specifico contesto.
Riferimenti WCAG 1.0: 1.1, 6.2
Riferimenti Sec. 508: 1194.22 (a)

Requisito n.° 4

Enunciato: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
Riferimenti WCAG 1.0: 2.1
Riferimenti Sec. 508: 1194.22 (c)

Requisito n.° 5

Enunciato: Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative richiedano comunque il loro utilizzo, avvertire l’utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi.
Riferimenti WCAG 1.0: 7.1, 7.2, 7.3
Riferimenti Sec. 508: 1194.22 (j)

Requisito n.° 6

Enunciato: Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini; ove non sia possibile, ricorrere agli stessi criteri di distinguibilità indicati in precedenza.
Riferimenti WCAG 1.0: 2.2
Riferimenti Sec. 508: non presente

Requisito n.° 7

Enunciato: Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite indicate nella DTD adottata.
Riferimenti WCAG 1.0: 9.1
Riferimenti Sec. 508: 1194.22 (f)

Requisito n.° 8

Enunciato: In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa.
Riferimenti WCAG 1.0: 1.2
Riferimenti Sec. 508: 1194.22 (e)
Requisito n.° 9

Enunciato: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.
Riferimenti WCAG 1.0: 5.1, 5.5, 5.6
Riferimenti Sec. 508: 1194.22 (g)

Requisito n.° 10

Enunciato: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne.
Riferimenti WCAG 1.0: 5.2
Riferimenti Sec. 508: 1194.22 (h)

Requisito n.° 11

Enunciato: Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.
Riferimenti WCAG 1.0: 3.3, 6.1
Riferimenti Sec. 508: 1194.22 (d)

Requisito n.° 12

Enunciato: La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.
Riferimenti WCAG 1.0: 3.4
Riferimenti Sec. 508: non presente

Requisito n.° 13

Enunciato: In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato.
Riferimenti WCAG 1.0: 5.3, 5.4
Riferimenti Sec. 508: non presente

Requisito n.° 14

Enunciato: Nei moduli (form), associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie assistive.
Riferimenti WCAG 1.0: 10.2, 12.4
Riferimenti Sec. 508: 1194.22 (n)

Requisito n.° 15

Enunciato: Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo analogo a quanto indicato nel requisito n. 3.
Riferimenti WCAG 1.0: 6.3
Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m)

Requisito n.° 16

Enunciato: Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input.
Riferimenti WCAG 1.0: 6.4, 9.2, 9.3
Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m)

Requisito n.° 17

Enunciato: Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili.
Riferimenti WCAG 1.0: 8.1
Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m)

Requisito n.° 18

Enunciato: Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la completezza dell’informazione fornita o del servizio erogato, predisporre una alternativa testuale equivalente, sincronizzata in forma di sotto-titolazione o di descrizione vocale, oppure fornire un riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale.
Riferimenti WCAG 1.0: 1.3, 1.4
Riferimenti Sec. 508: 1194.22 (b)

Requisito n.° 19

Enunciato: Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.
Riferimenti WCAG 1.0: 13.1, 13.6
Riferimenti Sec. 508: 1194.22 (o)

Requisito n.° 20

Enunciato: Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente l’utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso.
Riferimenti WCAG 1.0: 7.4, 7.5
Riferimenti Sec. 508: 1194.22 (p)

Requisito n.° 21

Enunciato: Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una pagina; per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta.
Riferimenti WCAG 1.0: non presente
Riferimenti Sec. 508: non presente
Requisito n.° 22

Enunciato: Per le pagine di siti esistenti che non possano rispettare i suelencati requisiti (pagine non accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il collegamento alla pagina conforme deve essere proposto in modo evidente all’inizio della pagina non accessibile.
Riferimenti WCAG 1.0: 11.4
Riferimenti Sec. 508: 1194.

 

SEO Frendly

A questa caratteristica del sito web dedichiamo la quarta parte di questo corso.

Lascia un Commento