Progetto per lo sviluppo di siti web di promozione professionale per psicologi iscritti all Ordine degli Psicologi della regione Lombardia.

Transcript

1 Progetto per lo sviluppo di siti web di promozione professionale per psicologi iscritti all Ordine degli Psicologi della regione Lombardia. di Emanuele Crosti

2 Indice PARTE 1: SITUAZIONE ED OPPORTUNITÀ... 4 CAPITOLO 1: INTRODUZIONE Internet nel CAPITOLO 2: UTILITÀ Visibilità Diffusione...9 PARTE 2: SVILUPPO DEI MODELLI...12 CAPITOLO 1: SCELTE INFORMATICHE Introduzione XHTML e CSS Caratteristiche tecniche dei siti proposti Scelte nell alberatura logica CAPITOLO 2: SCELTE GRAFICHE Impostazione grafica (dimensioni in pixel, numero di colori) Navigabilità e accessibilità PARTE 3: ANALISI DEI SINGOLI TEMPLATE...19 CAPITOLO 1: SITO A SVILUPPO ORIZZONTALE SENZA BOX CENTRALE (MODELLO 1) Interfaccia grafica Gestione dei contenuti Possibili modifiche grafiche e tipografiche CAPITOLO 2: SITO A SVILUPPO ORIZZONTALE CON BOX CENTRALE SEMITRASPARENTE (MODELLO 2) Interfaccia grafica Gestione dei contenuti Possibili modifiche grafiche e tipografiche CAPITOLO 3: SITO A SVILUPPO VERTICALE CON STRUTTURA A LIBRO (MODELLO 3) Interfaccia grafica Gestione dei contenuti Possibili modifiche grafiche e tipografiche PARTE 4: VOCI DI COSTO E CONVENZIONE...38 CAPITOLO 1: SERVIZIO DI REGISTRAZIONE E HOSTING Registrazione ed hosting Caratteristiche tecniche CAPITOLO 2: SVILUPPO SOFTWARE Adattamento grafico ai template Adattamento dei contenuti CAPITOLO 3: PROPOSTA DI CONVENZIONE Tipologie di convenzione PARTE 5: SERVIZI AGGIUNTIVI...41 CAPITOLO 1: AGGIORNAMENTO E CREAZIONE Modifiche puntuali e sostanziali CAPITOLO 2: IMPLEMENTAZIONE DEL SITO SU CMS (CONTENT MANAGEMENT SYSTEM) Caratteristiche di un CMS Da utenti a redattori Open source e CMS I vantaggi dell evoluzione PARTE 6: LE FONTI

3 CAPITOLO 1: DOCUMENTI E SITI WEB Documenti Siti web

4 PARTE 1: SITUAZIONE ED OPPORTUNITÀ Capitolo 1: Introduzione 1.1 Internet nel 2010 L ultimo rapporto Istat 2010 Cittadini e nuove tecnologie 1 è stato presentato nel dicembre 2010, e le informazioni relative sono tratte dall indagine svolta nel febbraio 2010 Aspetti della vita quotidiana Rispetto al 2009, cresce la percentuale di famiglie che possiede un computer (dal 54,3% al 57,6%), che ha l accesso ad internet (dal 47,3% al 52,4%) e che dispone di una connessione a banda larga (dal 34,5% al 43,3%). Viene ribadito che le famiglie con almeno un minorenne sono le più tecnologiche, condizione che influisce positivamente sull acquisizione di nuove tecnologie e la manifestazione di esigenze ormai considerate fondamentali (banda larga). In realtà di questo tipo si attenua il divario tecnologico riconducibile a fattori di tipo generazionale; infatti, le famiglie costituite solo da persone di 65 anni e più continuano ad essere escluse dal possesso di beni tecnologici: appena il 9,8% di esse possiede il personal computer e soltanto l 8,1% ha l accesso ad Internet. I dati diffusi da Audiweb riportano il superamento della soglia dei 23 milioni di italiani sul web, nonostante questo, in base all Connectivity Scorecard che determina i livelli di competenza tecnologica e l uso delle ICT, l Italia si colloca al 22 posto. Posizione dovuta all accresciuto divario fra le performance di connessione tra il mondo business e il mondo domestico, penalizzato dalla debole penetrazione della banda larga e dalla qualità e della velocità delle infrastrutture disponibili in ambito domestico. Le analisi di Eurisko confermano un numero compreso fra i 22 e i 24 milioni di italiani (analisi novembre 2010) che ha acceduto, anche solo occasionalmente, ad Internet: 1 Il testo integrale è scaricabile all indirizzo web: 4

5 Utenti internet in Italia Numeri in milioni Il totale si basa su una definizione di utente molto estesa.l uso frequente si riferisce a persone che dicono di essersi collegate almeno una volta negli ultimi sette giorni. *Le indicazioni per il 2010 sono proiezioni basate sui dati del primo semestre. Negli ultimi anni c è stata un evoluzione del luogo di collegamento con una crescita esponenziale dell uso da casa: Utenti internet in Italia aprile 2004 novembre 2010 Numeri in migliaia 5

6 Secondo Nielsen elaborando i dati di Audiweb si ha: Fonte: Audiweb powered by Nielsen, AW Database, luglio 2010, applicazioni internet incluse Fonte: Audiweb powered by Nielsen, AW Database, luglio 2010, applicazioni internet incluse Più in dettaglio, risultano 6 milioni (55.8%) gli uomini e 4,8 milioni (44.2%) le donne on line nel giorno medio, con una maggiore distribuzione nella fascia d'età anni (45.7%), seguita dalla fascia anni (23.3%). Il 17.5% degli utenti nel giorno medio ha meno di 25 anni e solo il 13.5% ha più di 55 anni. 6

7 Per ultimo la suddivisione geografica per bene tecnologico (estrapolazione fonti Istat - Cittadini e nuove tecnologie 2010): Famiglie per beni tecnologici posseduti e ripartizione geografica. Anni 2009 e 2010 (per 100 famiglie nella stessa zona) Ripartizione Personal computer Accesso ad internet Connessione a Connessione geografica banda stretta banda larga Italia Nord Occidentale ,6 48,4 7 36, ,8 54,6 5,6 45,5 Italia Nord Orientale ,6 50,4 7,4 35, ,6 54,3 5,3 46,6 Italia Centrale ,6 50,6 6,5 38, ,1 55,6 6,9 46,9 Italia Meridionale ,7 42,3 6,2 28, ,8 47,2 7,5 36,9 Italia Insulare ,5 42,3 4,8 30, ,5 47,3 4,7 38,1 Italia ,3 47,3 6,6 34, ,6 52,4 6,1 43,4 In particolare l accesso ad internet si distribuisce geograficamente: Accesso a internet e ripartizione geografica. Anni 2009 e 2010 (per 100 famiglie nella stessa zona) 7

8 Capitolo 2: Utilità 2.1 Visibilità Nella società post-industriale in cui ormai siamo entrati a far parte, senza fare facili moralismi, l apparire insieme all avere ha in parte sostituito l essere, sebbene una delle esigenze nata negli ultimi 20 anni sia diventata quella di essere su internet. Inizialmente la propria presenza coincideva con l avere un indirizzo mail, un qualche cosa chiocciola qualche cosa d altro punto it, net, org, com, indirizzo che non si riusciva mai a ricordare a memoria e che si sfoggiava con orgoglio tra gli amici che non erano ancora sul web. Il web, o tecnicamente il World Wide Web (abbreviato in www Rete ampia che avvolge il mondo) era chiamato cyberspace dagli appassionati di fantascienza, tradotto malamente in cyberspazio con orrore degli Accademici della Crusca Avere un indirizzo mail, da privilegio dell ambito lavorativo era diventato il lasciapassare, simbolico ma anche effettivo, utilizzato per guadagnare l accesso a internet, accesso a caro prezzo dato dai primi fornitori di connettività in Italia. Si tratta dei primi anni 90, dopo che, grazie alla geniale intuizione di Tim Berners- Lee al CERN di Ginevra, una forma di ipertesto la pagina HTML (Hyper-Text Markup Language) era diventata la base di tutti i server web di internet come lo conosciamo oggi; internet però non è solo www, diciamo che ne è solo il lato più visibile e chiacchierato Proprio l esigenza, vera o presunta, di visibilità è stata la molla alla creazione dei primi siti web, quando ancora la gente confondeva l indirizzo mail con l indirizzo del sito (tecnicamente chiamato URL Uniform Resource Locator 2 - l indirizzo univoco per un sito web.) Un sito web, dal punto di vista sociologico, può essere definito come una vetrina sul mondo, sempre aperta, sempre limpida nel bene e nel male sul contenuto che è stato caricato e su come viene presentato; da qui l importanza della forma grafica e della accessibilità: un libro interessante è valorizzato da una confezione gradevole ma se poi non si riesce a sciogliere il nodo del fiocco 2 Indirizzo che inizialmente poteva coincidere anche con il singolo server (computer) fisico, ora non è più così un server fisico può gestire moltissimi siti web. 8

9 Una caratteristica propria di internet e quindi dei siti web è l indipendenza dal tempo e dallo spazio, come viene indicato sinteticamente anytime/anywere access, quindi sempre disponibile e raggiungibile da qualunque computer (oggi anche da cellulari avanzati) collegato alla rete. I contenuti e i servizi, o le possibilità di acquistare all interno di un sito web sono, almeno parzialmente indipendenti dall intervento umano, se non per l aggiornamento o per la tempestiva riparazione in caso di malfunzionamenti, una quasi no man s land anche se, senza l uomo, non ci sarebbe stato nessun www 2.2 Diffusione La diffusione di internet nel mondo ha raggiunto e mantiene indici di crescita elevati; questo è l andamento del numero di host (server) dal : 3 Valutazioni della Internet Domain Survay ( ) 9

10 La curva di sviluppo negli ultimi 19 anni (fino al 2009) è riassunta in questo grafico: La tendenza ha un andamento apparentemente semplice, ma in realtà è il risultato di molti fattori diversi, in continua evoluzione. Perciò è difficile definire un modulo di sviluppo. La rete esiste da quarant anni, la prima rete Arpanet 4, creata dal Dipartimento della Difesa USA, è del La connettività globale inizia molto prima della diffusione ufficiale, il CERN ha rilasciato la tecnologia web di dominio pubblico il 30 aprile Poche decine di anni sono un periodo molto breve nella storia delle culture umane; internet ha quindi le caratteristiche (non solo quantitative) di una realtà giovane, lontana da ogni ipotizzabile fase di assestamento. La crescita comunque continua a essere veloce. La dimensione complessiva delle attività nell internet è decuplicata in dieci anni ed è raddoppiata negli ultimi quattro. Questo substrato in fermento è l ambiente ideale in cui farsi conoscere e conoscere anche professionalmente; la relazione terapeutica, il colloquio consulenziale o di selezione/assessment sono tipicamente basati sull interazione interpersonale in presenza ma a questo si può accompagnare la propria immagine pubblica sul web: un serio professionista che valorizza i propri ambiti d intervento e l ambiente in cui si svolgerà la seduta. Questo luogo è inserito in uno specifico contesto geografico, il potenziale cliente, ritrova in un ambiente spiccatamente non-spaziale come il web 4 Valide informazioni sulla storia di internet si trovano su wikipedia 10

11 le coordinate spaziali - un persona fisica in un indirizzo fisico di un professionista a cui rivolgersi. E risaputo che, specialmente nell ambito delicato dell aiuto fisico e psicologico alla persona, si arriva al professionista attraverso il passa-parola, ma la possibilità di avere la propria impressione personale, su come si presenta il professionista, può rinforzare o attenuare la motivazione di quella scelta. Certamente non si possono giudicare le capacità di uno psicologo dal relativo sito web, ma questo è comunque un biglietto da visita distribuito al mondo. 11

12 PARTE 2: SVILUPPO DEI MODELLI Capitolo 1: Scelte informatiche 1.1 Introduzione Il World Wide Web ha cambiato per sempre il modo di memorizzare, organizzare e ricercare le informazioni: esso è basato sul concetto di ipertesto, una struttura elastica e multiforme di collegamento fra informazioni. Un ipertesto consiste essenzialmente in un testo non lineare e non sequenziale, formato da documenti a loro volta composti da una collezione di nodi (frammenti di testo o altri media) connessi da collegamenti. I collegamenti hanno dovuto ovviamente superare i limiti del singolo sito e interconnettere tutti i siti del mondo che contenessero informazioni; la struttura logica di collegamento è di tipo client <---> server: un programma residente sul computer dell utente (browser) invia una richiesta di una pagina residente sul server, che a sua volta risponde inviando una pagina di informazioni in formato HTML (Hyper-Text Markup Language), che è un linguaggio di markup creato da Tim Berners-Lee al CERN di Ginevra nei primi anni 90. A Berners-Lee si deve anche la creazione del protocollo di trasferimento HTTP (Hyper-Text Transfer Protocol); da quel momento ogni pagina e ogni altra risorsa (immagini, file, ecc) può essere raggiunta con uno specifico indirizzo, o URL, che indica il protocollo da usare e il nome del server: http :// www. x. it Protocollo servizio web del server X Nome del server Estensione (nazionale o tipologica, es, com, edu,) Poi si indica il percorso all interno del server, il nome e il tipo di risorse in questione: immagini/ pippo.jpg Directory che contiene l immagine Nome dell immagine e tipo di file ( con estensione jpg) La sintassi del linguaggio HTML nel tempo ha subito numerose revisioni, ampliamenti e miglioramenti, codificati dal World Wide Web Consortium (W3C) 5 ed 5 Ente internazionale di codifica delle specifiche standard per i linguaggi utilizzati nel web ( ) 12

13 indicate secondo la classica numerazione delle revisioni del software, l ultima versione rilasciata è la versione del 1999 (ma la 5.0 è attualmente allo stato di bozza). Un'ulteriore e importante caratteristica di HTML è che esso è stato concepito per definire il contenuto logico e non l'aspetto finale del documento. I dispositivi che possono accedere a un documento HTML sono molteplici e non sempre dotati di potenti capacità grafiche. Proprio per questo gli sviluppatori di HTML hanno optato per un linguaggio che descrivesse dal punto di vista logico, piuttosto che grafico, il contenuto dei documenti. Questo significa che non esiste alcuna garanzia che uno stesso documento venga visualizzato in ugual modo su due dispositivi. Attualmente le pagine html sono in grado di incorporare molte tecnologie che offrono la possibilità di aggiungere al documento ipertestuale controlli più ricercati sulla resa grafica, interazioni dinamiche con l'utente, animazioni interattive e contenuti multimediali, ad esempio utilizzando il concetto di fogli di stile (CSS, vedi più avanti.) 1.2 XHTML e CSS Negli anni 90 con il boom di internet nacque una serrata guerra fra Microsoft e Netscape per avere il controllo del mercato dei browser (in termini di % di diffusione e quindi di utilizzo), introducendo ad ogni nuova versione del proprio browser estensioni proprietarie rispetto all HTML ufficiale del W3C, estensioni ovviamente incompatibili con i browser concorrenti. Il W3C, proprio per evitare di dover inseguire queste modifiche arbitrarie e dover scegliere quali caratteristiche standardizzare e quali lasciare fuori dalle specifiche ufficiali, decise di creare un linguaggio di astrazione superiore all html (un metalinguaggio) che desse maggiore libertà di estendere, controllare o creare altri linguaggi, pur rimanendo in uno standard. Nel 1998 venne introdotta la versione 1.0 dell XML (extensible Markup Language) e nel 2000 nacque l'xhtml 1.0, una sorta di "ponte" tra l HTML 4.01 e l XML 1.0. Un altra delle motivazioni che hanno portato alla nascita dell XHTML è stata l apparizione sul mercato di nuovi dispositivi diversi dai tradizionali computer come i primi cellulari evoluti, dotati di risorse hardware e software non sufficienti ad interpretare il linguaggio HTML. Per sfruttare appieno le potenzialità dell'xhtml è necessario usarlo in abbinamento ai fogli di stile (CSS), in modo da scrivere un codice per pagine web in cui la 13

14 presentazione sia separata dalla struttura dei dati, cioè differenziando i contenuti veri e propri dalla formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente. Il CSS (Cascading Style Sheets) è un linguaggio usato per definire la formattazione di documenti XHTML; l uso dei CSS evita l inserimento delle indicazioni grafiche direttamente nella pagina XHTML che provoca l appesantimento delle pagine trasmesse e il rischio di un codice confuso e non aderente agli standard. Le istruzioni CSS possono essere raccolte in un file esterno che rimane memorizzato nella memoria del browser; questo riduce ulteriormente la quantità di dati che i server devono trasmettere e permette inoltre di modificare le caratteristiche grafiche comuni (ad esempio la scelta del font per i titoli) modificando solo il file CSS di riferimento e di conseguenza evitando di modificare manualmente ogni singola pagina. 1.3 Caratteristiche tecniche dei siti proposti Esiste uno strumento di validazione (cioè di controllo sintattico) del W3C per documenti XHTML; questo non assicura tuttavia al 100% la compatibilità con tutti i browser, principalmente per limiti di questi ultimi. Teoricamente, infatti, tutti i browser dovrebbero essere conformi agli standard W3C, e quindi essere in grado di rendere i documenti su qualsiasi piattaforma. Quando una pagina è verificata utilizzando il servizio di validazione del W3C; l ente validatore restituisce una piccola icona che può essere inserita nella pagina per comprovarne la conformità allo standard. Il W3C fornisce lo stesso servizio anche per i fogli di stile CSS. I tre siti proposti sono stati programmati in XHTML 1.0 Transitional 6, tutte le pagine sono risultate valide per il codice XHTML 1.0 Transitional e sono stati validati anche i relativi tre file CSS (come CSS 3.0) 7. L icona di conformità, presente in ogni pagina, porta automaticamente allo strumento di validazione per la pagina d origine; l utente può dunque in ogni momento verificare la veridicità delle dichiarazioni del webmaster, specialmente quando vengono modificati i contenuti. 6 Vedi su Wikipedia la voce XHTML 7 All indirizzo 14

15 1.4 Scelte nell alberatura logica Nel novembre 2010 è stata compiuta una breve ricerca indicativa, per studiare quale fosse la struttura logica in alcuni siti professionali di psicologi italiani: Cv Lo Psicologo/ Deontologia/ Tariffario Ambiti/ Cosa faccio Link Utili Contatti Documenti News 100,00% 57,14% 85,71% 85,71% 100,00% 42,86% 28,57% E evidente l importanza data al proprio cv e alla facilità nell essere contattato con modalità che vanno dal semplice indirizzo mail (con il rischio di finire nelle liste di spamming) fino ad una form espressamente dedicata alla richiesta di una seduta. In molti casi viene inserito l indirizzo dello studio o una mappa interattiva. Di solito vengono indicati, e quindi valorizzati, gli ambiti d intervento del professionista e link ad associazioni di categoria o a documenti professionali, come il codice deontologico o il tariffario, se non inseriti direttamente all interno del sito. Si segnala, in alcuni casi, la presenza di aree riservate (con la necessità di una registrazione), e anche la possibilità di consulenza psicologica on line su appuntamento. Seguendo le caratteristiche del web 2.0, in cui si è superata la logica di tipo solo fruitivo e si sono sviluppati ambienti collaborativi, in alcuni siti o è stata data la possibilità agli utenti di commentare le notizie pubblicate o sono stati inserti dei blog. Da queste indicazioni si è deciso di proporre, come struttura base del sito, le seguenti sezioni: 1. Home page, con eventuale introduzione. 2. Chi sono, per il proprio cv. 3. Cosa faccio, presentazione dei propri ambiti d intervento e di specializzazione. 4. Documenti, un area dedicata alle proprie pubblicazioni e alla documentazione deontologica e professionale. 5. Link, collegamenti a siti istituzionali, siti di colleghi o a documenti ritenuti utili. 6. Contatti, una mappa interattiva dell indirizzo del professionista e una form di contatto. 15

16 Capitolo 2: Scelte grafiche 2.1 Impostazione grafica (dimensioni in pixel, numero di colori) Partendo da una ricerca di ShinyStat 8 del 2007 (l ultima trovata in rete) sulle caratteristiche tecniche degli schermi in uso da parte degli utenti italiani (dati ricavati sull'utenza anonima di siti che hanno generato un campione complessivo di visite) si era potuto notare che quella che era la risoluzione modello di 800 x 600 pixel è diventato appannaggio di una sparuta minoranza: Questi dati, risalgono a 3 anni fa e sicuramente il divario fra le risoluzioni inferiori e quelle ormai comuni come 1024 x 768 pixel è ulteriormente cresciuto. Anche per quanto riguarda il numero dei colori visualizzati del monitor (o meglio il numero di colori impostato dall utente) è passato dai ai 16 milioni, ormai accessibili a più dell'ottanta per cento dei navigatori italiani: Per queste indicazioni statistiche si è deciso di sviluppare tutti i siti ad una risoluzione di 1024 x 768 pixel con immagini o sfumature a 32 bit quindi con oltre 16 milioni di colori visualizzabili. 8 Raggiungibile al sito web: 16

17 Si ribadisce il concetto che il numero di colori, oltre che dalla caratteristiche tecniche della scheda video, dipende anche dalle scelte dell utente, nel senso che se sono stati impostati 256 colori e le immagini sono a 16 milioni di colori, si avranno degli artefatti cromatici : 16 milioni di colori 256 colori 2.2 Navigabilità e accessibilità Un sito web oltre a dover essere ricco di contenuti interessanti, frequentemente aggiornati e presentati in forma gradevole, dovrebbe avere anche una struttura logica coerente, un architettura dei contenuti che tenga conto delle esigenze dell utente e che permetta una facile navigabilità: se volessimo usare una metafora, organizzare i contenuti è come progettare le prese elettriche, gli attacchi dell acqua, del telefono e dei caloriferi in un appartamento vuoto; in un futuro saranno anche elementi poco evidenti ma influiranno sulla qualità degli spazi una volta aggiunti i mobili (i contenuti) e se tutto sarà stato progettato bene, l ambiente sembrerà pratico e funzionale senza il rischio di scomode e poco estetiche prolunghe che attraversino le stanze Un sito web dovrebbe ad esempio, permettere sempre di capire in quale ramo logico ci si trova e facilitare il ritorno in home page per ricominciare la navigazione, evitare strade senza uscita nel senso di pagine senza link di ritorno ad un livello logico superiore (se non forzando il browser a ricaricare la pagina precedente vista). Un allargamento di questo discorso riguarda l accessibilità nel web, vale a dire come favorire l uso di tecnologie internet agli utenti disabili rimuovendo le relative barriere informatiche. 17

18 Le principali difficoltà che queste persone incontrano infatti derivano da cattiva progettazione software e nell architettura dei contenuti che non permetta l uso di dispositivi hardware o software come le tastiere e i mouse utilizzati in alcune disabilità motorie. Allo stesso modo per i non vedenti non possono essere utilizzati lo screen reader, cioè un software che riproduce la sintesi vocale di quanto visualizzato o la barra Braille che traduce in codici tattili i contenuti dei testi. La legge n. 4 del 9 gennaio 2004 (Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici) costituisce un primo, importante passo per lo sviluppo di un Web che permetta a tutti di accedere alle informazioni ed ai servizi che vengono proposti. La legge, ed i successivi decreti, definiscono un insieme di regole e procedure che consentono di valutare il livello di accessibilità di un sito e conseguentemente di certificarlo. Accessibilità significa anche usabilità, cioè la capacità di un sito di esporre le informazioni in modo efficace e intuitivo. Le principali accortezza utilizzate nella fase di progettazione sono state: 1. Si sono utilizzati di font di dimensioni non inferiori ai 14 punti e di colore ben contrastato rispetto al colore di sfondo. 2. Si sono scelti caratteri molto ben disegnati, che non siano troppo sottili (light) né troppo compressi (condensed) come ad esempio l Arial, il Verdana, il Century Gothic, il Tahoma, il Bookman Old Style 3. Si è utilizzato l attributo ALT per tutte le immagini, che garantisce una descrizione testuale se l immagine non venisse visualizzata. 4. Si è fatta un accurata revisione dei testi per non lasciare acronimi non risolti o abbreviazioni troppo incomprensibili sempre per aiutare la chiarezza linguistica. 5. Si sono evitati elementi grafici in movimento, anche se le versioni più attuali dei software screen reader riescono comunque a riconoscere i testi presenti nelle animazioni. 6. Si sono evitati elementi grafici in linguaggio Flash perché non sono riconosciuti dai software utilizzati dai disabili. 7. Si sono utilizzati i fogli di stile (CSS) con cui si può esercitare un controllo più accurato sulle pagine ed eliminare codice superfluo, rendendo in tal modo più leggere e navigabili le pagine ed assicurando nello stesso tempo una piena accessibilità ai disabili. 8. Si sono inseriti nelle form di contatti una sola etichetta per ogni campo da compilare: 18

19 9. Si sono evitate musiche di sottofondo al caricamento del sito perché la musica ovviamente interferisce con la sintesi vocale, con effetti che è facile immaginare 10. Si è sempre evitato il reindirizzamento automatico di una pagina (una pagina che porta automaticamente ad un altra) o il refresh automatico della stessa pagina dopo un determinato numero di secondi. 11. Si è evitato l attributo blink a qualunque parola, attributo che rende un testo visibile ad intermittenza o comunque lampeggiante. 12. Si è evitato il testo sottolineato che potrebbe essere interpretato con un link e creare confusione al navigatore non vedente. 13. Si sono evitate le linee separatorie orizzontali che non vengono lette dagli strumenti dei disabili. Oltre allo strumento del W3C di verifica della correttezza del codice XHTML già indicato precedentemente (che comunque rileva i più comuni errori di accessibilità, come la mancanza dell attributo ALT per un immagine), esistono strumenti specifici di verifica, come lo strumento Wave (all indirizzo: ) o quello presente sul sito di ContentQuality ( ). PARTE 3: ANALISI DEI SINGOLI TEMPLATE Capitolo 1: Sito a sviluppo orizzontale senza box centrale (modello 1) Indirizzo: Interfaccia grafica Il template proposto è a sviluppo orizzontale senza box centrale. Su di una texture continua chiara ma non piatta di tipo statico si appoggia l intero sviluppo del sito: 19

20 Il menu di navigazione orizzontale è inserito in una fascia scura (in questo caso di colore nero), nell angolo alto destro è stato pensato l inserimento di un logo o di citazione o un altro componente statico presente in tutte le pagine: barra dei menu logo La sezione centrale dell homepage in questo template è stata pensata solo grafica o meglio fotografica; è comunque possibile inserire un testo verificando la correttezza del contrasto rispetto allo sfondo e quindi la relativa leggibilità. 20

21 Cromaticamente i colori caldi del tramonto e i relativi riflessi sulle mura, sono stati utilizzati per il colore dei menu e nelle pagine interne. La fotografia in home page sfuma con una banda scura semi-trasparente che si ricongiunge con la fascia nera di fondo in cui si è ripreso cromaticamente il colore dei menu: Le pagine interne hanno il titolo della sezione connotato da un leggera ombra, il colore del testo è di qualche tono più chiaro in modo che stacchi su di uno sfondo neutro: Nella sezione relativa ai documenti scaricabili, sono state inserite delle icone che rappresentano i relativi formati: Nella sezione contatti è stata integrata la mappa di Google con l indirizzo del professionista: 21

22 E presente inoltre il link per visualizzare la stessa mappa ingrandita in una pagina separata: 22

23 1.2 Gestione dei contenuti I contenuti sono inseriti in forma tabellare invisibile, centrati a sinistra, quindi con tutta la larghezza della pagina a disposizione. Utilizzando le tabelle e modificando il numero delle colonne è possibile impostare a proprio piacimento la struttura della pagina; in questo esempio si vede una tabella a due colonne, il testo nella prima e nella seconda un immagine: Se la lunghezza della pagina dovesse superare quella disponibile, vengono automaticamente inserite delle barre di scorrimento: 23

24 1.3 Possibili modifiche grafiche e tipografiche La grafica è ampiamente modificabile, ad esempio usando come texture di sfondo un foglio di carta stropicciato: La fascia in alto è pensata di un colore scuro, ma dal nero si può passare ad esempio ad un blu intenso con i colori dei menu in tonalità di azzurro: e quindi coordinare anche l immagine centrale che sfuma nella fascia di fondo: 24

25 Per quanto riguarda le pagine interne si può utilizzare uno sfondo sfumato in diagonale: Per le modifiche tipografiche è possibile variare a piacimento oltre al colore anche la grandezza e la tipologia di font, ad esempio: (Times new Roman, corpo 20) (Comic Sans MS, corpo 20) (Apple Chancery, corpo 20) 25

26 Capitolo 2: Sito a sviluppo orizzontale con box centrale semitrasparente (modello 2) Indirizzo: Interfaccia grafica Questo template grafico è a struttura centrale con box semi-trasparente, lo sfondo è un colore piatto (in questo esempio il bianco) su cui risalta il sito grazie ad un leggera ombra: Il menu di navigazione orizzontale è inserito in una fascia semi-trasparente nel primo terzo superiore della fotografia di sfondo: 26

27 La sezione centrale dell homepage in questo template è stata pensata solo grafica o meglio fotografica; è comunque possibile inserire un testo verificando la correttezza del contrasto rispetto allo sfondo e quindi la relativa leggibilità. In questo template si è deciso, per i colori dei menu, di non riprendere i colori dell immagine principale (la gamma fulvo-arancione) ma di staccare proponendo un color vinaccia, ben contrastato sulla fascia semi-trasparente. Per quanto riguarda le pagine interne si è utilizzata la stessa fotografia opacizzata e con un ulteriore box semi trasparente si è ottenuto una zona per i contenuti, adatta sia per testi con colori chiari (ma non troppo ) che scuri: Nella sezione relativa ai documenti scaricabili, sono state inserite delle icone che rappresentano i relativi formati: 27