Guida al sito
Struttura del sito
Il sito è strutturato in 7 sezioni principali:- Il progetto
Una introduzione al come e perché del progetto Utility System; - Le innovazioni
Le innovazioni e le caratteristiche fondamentali del sistema Utility; - Gli elementi
Una presentazione dei principali elementi che costituiscono il sistema, ciascuno corredato da esempi fotografici della loro applicazione a diverse cucine Scavolini; - La scelta e l'utilizzo
Semplici consigli per la scelta e l'utilizzo degli elementi del sistema Utility; - L'Ospedale Niguarda
La realizzazione degli spazi cucina per la nuova Unità Spinale dell'Ospedale Niguarda Ca' Granda di Milano; - L’azienda Scavolini
Una presentazione dell'azienda Scavolini; - Scavolini nel sociale
La sensibilità e l'impegno nei confronti del proprio territorio e delle tematiche socio-culturali.
Struttura delle pagine
La struttura-tipo delle pagine del sito, unica per le tre tipologie documentali che saranno illustrate più sotto, è la seguente:Testata
La testata, che è possibile saltare mediante l'utilizzo del tasto TAB, è composta dai seguenti elementi:- logo di SCAVOLINI;
- sezione dei link di meta-navigazione (Home Page, accessibilità, guida al sito, personalizza la visualizzazione e mappa del sito).
Corpo del documento
La parte relativa al corpo del documento è composta essenzialmente da due sezioni:- Sezione del "ti trovi in:"
Questa sezione, il cui inizio è contraddistinto dal testo "ti trovi in:" contiene tutti quegli elementi che sono utili a contestualizzare il documento all'interno del sito e a consentire quindi una più facile navigazione agli utenti; si compone a sua volta essenzialmente di due elementi:- Percorso - Costituito dalla sequenza di tutti quei link, separati l'uno dall'altro dal segno >, che consentono all'utente di navigare agevolmente all'interno del sito (per ripercorrere all'indietro i propri passi o per rinvenire documenti afferenti alla stessa sezione di quello che sta esaminando);
- Titolo del documento - Costituito dal nome della sezione o del documento che l'utente sta esaminando; in considerazione della rilevanza di questo elemento ai fini della navigazione del sito e della indicizzazione dei contenuti, è stato implementato mediante l'utilizzo di un tag H1.
- Sezione dei contenuti - La sezione destinata ad accogliere i contenuti documentali del sito.
Barra dei menu
La barra dei menu è visivamente collocata a sinistra della sezione dei contenuti. Contiene l'elenco dei link alle 7 sezioni del sito.Piè di pagina
Posta a delimitare la fine dei documenti visualizzati, la sezione del piè di pagina contiene quattro elementi:- link "Torna a inizio pagina";
- link al sito dell'azienda Websolute srl che ha curato la realizzazione tecnica del sito;
- l'indirizzo mail a cui indirizzare domande, commenti e suggerimenti relativi all'accessibilità e all'usabilità.
- link ai validatori del W3C relativi al XHTML, ai CSS e al WAI-AAA.;
Tipologie delle pagine
Come già anticipato, il sito è composto essenzialmente da tre pagine-tipo che, rispetto alla struttura delle pagine appena descritta, differiscono fra loro solamente per la sezione dei contenuti; nell'elenco che segue descriviamo quindi le tre tipologie di pagina e gli elementi della sezione dei contenuti che le contraddistinguono:- Home page
La home page del sito è suddivisa in tre sezioni che anticipano contenuti poi sviluppati per esteso all'interno delle specifiche sezioni del sito:- Utility System
contenente una breve introduzione al progetto; - L’azienda SCAVOLINI
contenente un breve testo di presentazione della realtà aziendale Scavolini; - SCAVOLINI nel sociale
contenente un breve testo di presentazione delle attività socio-culturali sostenute dall'azienda.
- Utility System
- Pagine di sezione
Le pagine di ciascuna sezione sono pagine di documento; la sezione dei contenuti è quindi interamente dedicata alla presentazione di tali documenti e sono costituite essenzialmente da testi accompagnati in alcuni casi da immagini fotografiche e da disegni. - Pagine della sezione "gli elementi"
Questa è l'unica sezione che contiene delle sotto-sezioni ciascuna delle quali illustra un elemento del sistema Utility:- La prima pagina funge da indice e raccoglie i link che conducono alle relativi sotto-sezioni; questo tipo di link è riconoscibile per la posizione (posta subito sotto la sezione del percorso) e per il TITLE associato al link, che inizia con le parole "Vai alla sezione...".
- Ogni sotto-sezione è costituita da una pagina di documento che illustra un elemento del sistema. In queste pagine la sezione dei contenuti è suddivisa in due colonne: quella più a sinistra presenta tali elementi mediante un testo descrittivo ed un esempio fotografico di sua applicazione a un modello di cucina Scavolini: nella colonna di destra sono presenti dei link che consentono la visualizzazione di immagini di particolari; anche questo tipo di link è riconoscibile per la posizione (appunto nella colonna di destra) e per il TITLE associato al link, che inizia con le parole "Visualizza il particolare..."
Presentazione delle pagine
Le pagine del sito, realizzate in forma essenzialmente testuale, vengono presentate mediante l'utilizzo dei fogli di stile. Con quei browser che non supportano i fogli di stile oppure che li supportano in maniera incompleta, gli elementi di decoro (implementati come immagini di background) non sono visibili. Il contenuto delle pagine risulta in ogni caso leggibile, sia che il browser non supporti i fogli di stile, sia che questi ultimi vengano disattivati. Il dimensionamento dei caratteri è stato realizzato mediante l'utilizzo di dimensioni relative dei font, al fine di consentire all'utente di selezionare la grandezza preferita, sfruttando le apposite funzionalità dei browser grafici. La visualizzazione è comunque ulteriormente personalizzabile dalla apposita pagina accessibile dal menu di testata (sia in termini di contrasto dei colori testo-sfondo che nella dimensione dei caratteri).Accessibilità
ll sito è stato sviluppato secondo i principi di accessibilità per i disabili, seguendo in particolare i dettami delle linee guida WCAG 1.0 della WAI; nei paragrafi seguenti indichiamo alcuni degli accorgimenti che sono stati adottati.Collegamenti (link)
Tutti i collegamenti sono realizzati mediante elementi testuali; alcuni di questi elementi sono visualizzati, mediante l'impiego dei fogli di stile, in forma grafica; gli altri collegamenti sono riconoscibili per la evidenziazione che appare quando si porta il puntatore sopra di essi. Tutti i link sono stati dotati dell'attributo TITLE, contenente una descrizione significativa della destinazione del collegamento; tale descrizione, per quei link che conducono al di fuori del sito, termina con le parole "...[link a sito esterno]".Immagini
Tutte le immagini sono state dotate dell'attributo ALT, che ne descrive sinteticamente il contenuto; è stato evitato l'inserimento di immagini puramente decorative.Per immagini più complesse può essere presente l'attributo LONGDESC o il cosiddetto D-LINK, link descrittivo. Ques'ultimo è realizzato con una D maiuscola posta immediatamente dopo l'immagine cui si riferisce ed è un collegamento ad un file nel quale l'immagine viene descritta in modo dettagliato.
Tabelle
L'uso delle tabelle è stato limitato ai soli casi nei quali questi elementi assolvono alla funzione per la quale sono stati concepiti: la presentazione di dati in forma strutturata; è stato quindi evitato l'uso di tabelle quale strumento per la definizione del layout della pagina. Quando sono state impiegate, le tabelle sono state sempre dotate di tutti quegli accorgimenti (SUMMARY, CAPTION, TH e definizione del verso di lettura) utili a renderne accessibile il contenuto ai disabili.Testi
Anche al fine di offrire il miglior supporto possibile ai browser a sintesi vocale, all'interno di ogni pagina sono stati definiti:- il linguaggio principale del documento;
- il linguaggio relativo a specifici termini stranieri.
Conformità agli standard
Le pagine del sito, come è facilmente verificabile grazie alla presenza di un apposito link, posizionato sull'estremità inferiore destra delle pagine, sono state elaborate in conformità agli standard del linguaggio XHTML 1.0 Strict.La definizione degli attributi stilistici del sito è stata realizzata in conformità alle specifiche CSS 2; la conformità del foglio di stile è verificabile utilizzando il link sottostante.
Si è cercato di raggiungere nella maggior parte delle pagine il livello di accessibilità AAA (priorità 3) delle WCAG 1.0.