Dalla Progettazione alla Pubblicazione delle

Pagine Web

I siti web presenti nel Web sono strutturati e organizzati in un’infinità di modi diversi. Sul web è possibile incontrare siti composti di una singola pagina oppure siti commerciali a livello globale composti di un’infinità di pagine collegate tra loro.

A dispetto delle dimensioni di un sito, il processo di sviluppo, che porta dalla progettazione alla sua pubblicazione finale in rete, è sempre lo stesso e può essere suddiviso in sette fasi fondamentali.

Da un’idea alla sua realizzazione

Di seguito sono riportati i passaggi che un web designer professionista dovrebbe seguire nella progettazione e nello sviluppo di un nuovo sito web.

1. Progettazione e finalità

2. Creazione e organizzazione del contenuto

3. Sviluppo del “look and feel”

4. Produzione di un prototipo

5. Controllo del funzionamento (Testing)

6. Pubblicazione del sito

7. Mantenimento del sito

Tutte le fasi elencate sono aspetti che appartengono a quel processo proprio del web design che conduce da un’idea di base, attraverso il suo sviluppo, alla pubblicazione e al mantenimento di un sito web.

Ogni sito web dovrebbe essere realizzato partendo da queste premesse, con delle precise finalità che andremo ad analizzare a breve.

1. Progettazione e finalità

In questa fase preliminare bisognerebbe progettare in dettaglio gli obiettivi delle nostre pagine web e le modalità con cui il sito dovrà essere realizzato.

Pertanto la prima cosa da decidere sarà il titolo del nostro sito e le intestazioni e le funzioni delle singole pagine.

E’ inutile cominciare a creare una struttura (X)HTML senza avere un’idea chiara di come vogliamo far apparire il sito e cosa vogliamo comunicare attraverso di esso.

Potremmo voler creare un sito su iniziativa personale oppure potremmo dover sviluppare un sito per conto di un cliente e pertanto con delle caratteristiche ben precise, indipendenti dalla nostra volontà e dai nostri gusti.

E’ inoltre fondamentale, oltre a formulare un’idea di base, stabilire il pubblico cui il sito sarà rivolto e in base a questo creare un progetto base.

Molte aziende nel campo della realizzazione grafica e dello sviluppo di siti web investono un’enorme quantità di risorse proprio per stabilire le finalità di ogni sito da lanciare in rete, conducendo ricerche di mercato specifiche per indentificare il target a cui il sito dovrà essere rivolto.

Naturalmente per un sito di carattere più personale e non commerciale l’importanza di questa fase sarà minore e certamente richiederà meno tempo.

E’ tuttavia ugualmente fondamentale determinare a chi le nostre pagine in rete potrebbero interessare.

2. Creazione e organizzazione del contenuto

La parte più importante di un sito web è sicuramente rappresentata dal suo contenuto.

La parte testuale è fondamentale per attrarre l’interesse degli eventuali visitatori anche in un sito commerciale.

Tuttavia è soprattutto in un sito con materiale divulgativo o in blog che il contenuto diventa lo strumento principale per catturare un gran numero di utenti.

Normalmente è la persona che vuole pubblicare un sito la diretta responsabile dei contenuti da inserire in questo.

Design informativo

Una volta realizzato il contenuto, il passo successivo sarà quello di organizzarlo affinché sia facilmente fruibile dal pubblico.

Per quei siti web a livello globale, tale processo proprio del design informativo viene spesso gestito da specialisti di architettura informativa.

Tuttavia anche per siti web di carattere personale è necessario prestare particolare attenzione alla divisione e all’organizzazione delle informazioni presentate.

Si tratta di un compito che chiunque, con un po’ di pratica, può svolgere, tenendo in considerazione i seguenti elementi chiave:

E’ necessario stabilire di partenza cosa dovrà essere inserito nella pagina principale.

Il contenuto, già preparto prima della costruzione del sito, dovrebbe essere suddiviso in categorie e organizzato secondo criteri di importanza.

E’ bene creare un diagramma di come il sito sarà organizzato, inserendo le varie pagine in rettangoli e inserendo frecce secondo i collegamenti che si vogliono realizzare tra le diverse pagine.

Questo tipo di diagramma serve proprio a stabilire le relazioni tra le diverse sezioni e le pagine del nostro sito, secondo dei criteri di

accessibilità e finalità: tale schematizzazione deve essere realizzata ben prima della costruzione del sito.

Esempio di diagramma base di un sito web

Home Page

Contatti Domande Frequenti

Chi siamo Documenti

Articoli Recenti

Articoli Recenti

Articoli Recenti

Siti Partner

Link esterni

Link esterni

3. Sviluppo del “look and feel”

Il cosiddetto “look and feel” di un sito riguarda il design grafico e il suo aspetto generale finale, con uno speciale riguardo alla scelta dei colori, all’aspetto tipografico e allo stile generale delle immagini.

In questo passaggio si determina quello che nell’ambiente del visual design o design grafico è comunemente definito il tema del sito.

In questa fase chi si occupa della parte artistica e grafica di un sito realizza i bozzetti di tutti gli elementi grafici da inserire, per poi realizzare quella scelta per una sua maggior efficacia nella trasmissione dei contenuti.

I bozzetti, file grafici bidimensionali che riproducono l’aspetto generale della home page e delle pagine principali dipendenti, vengono normalmente realizzati con programmi base per l’editing di immagini, come ad esempio Adobe Photoshop.

Attraverso la creazione dei diversi bozzetti si sceglie, secondo gli obiettivi finali e secondo un criterio di omogeneità, quale sarà lo stile grafico complessivo del sito web da realizzare.

Con il bozzetto davanti agli occhi sarà molto più semplice per il Web Designer progettare le pagine (X)HTML e definirne gli stili.

In molti casi, nella progettazione di siti complessi, chi si occupa della direzione artistica realizza diversi bozzetti per mostrare anche quali saranno gli eventuali cambiamenti di stile, a seconda delle sezioni in cui sarà organizzato il sito e la tipologia grafica dei collegamenti tra le diverse parti.

I bozzetti, infatti, vengono realizzati per mostrare anche in che modo si passerà da un particolare tipo di grafica e visualizzazione a un’altra, attraverso i vari elementi presenti nelle pagine: immagini, elementi per la navigazione, parti testuali, ecc.

Curare la grafica del sito

Per quanto riguarda l’aspetto puramente grafico, nel modulo successivo tratteremo in dettaglio cosa si intende per design grafico e quali sono i compiti principali di un web designer specializzato in questo campo specifico.

Tuttavia in questa analisi sul processo di sviluppo di un sito web è comunque opportuno prendere in considerazione anche il passaggio relativo alla realizzazione dell’aspetto grafico di un sito, prima della sua pubblicazione.

A meno che un sito non sia composto interamente da elementi testuali, uno step fondamentale nel suo sviluppo riguarda la realizzazione degli elementi grafici per il web.

Una conoscenza base di come utilizzare i programmi di editing delle immagini è senz’altro importante per realizzare e ottenere manualmente quegli elementi grafici necessari per il web.

Chi ha già dimestichezza con i programmi di grafica deve tuttavia adattare le proprie conoscenze e il proprio stile per creare degli elementi grafici adatti alla rete.

Come vedremo in seguito, durante le lezioni del corso, è necessario conoscere le basi per utilizzare oppure creare autonomamente le immagini necessarie, conoscendo i formati disponibili per il web e le basi per un’ottimizzazione delle

immagini (risoluzione, trasparenza, ridimensionamento) da mettere online.

4. Produzione di un prototipo

Una volta scelti i contenuti e il design grafico, il sito entra nella fase di produzione, attraverso la creazione di un prototipo alla base della successiva realizzazione finale.

I Web Designer creano gli elementi grafici scelti, realizzano la struttura e lo stile alla base delle diverse pagine del sito, attraverso la marcatura in (X)HTML e l’inserimento degli stili CSS.

I programmatori creano tutti gli script necessari all’esatto funzionamento del sito così come da progetto.

Le diverse parti vengono infine assemblate insieme per creare il prototipo del sito web, di cui verrà testato il funzionamento.

Così come nello sviluppo dei software, il primo prototipo realizzato in questa fase viene definito “alfa”. Questa prima versione viene resa disponibile per una verifica all’interno dello stesso team impegnato nello sviluppo del sito.

Il secondo prototipo, la versione “beta” è invece destinato a essere utilizzato e testato da un pubblico selezionato e dai clienti che magari l’hanno commissionato.

5. Controllo del funzionamento (Testing)

Tutti i siti web, anche quelli di carattere personale, dovrebbero essere testati in tutti i loro aspetti prima di essere resi pubblici.

Il primo aspetto da verificare è sicuramente la funzionalità del sito, la sua facilità di utilizzo e le sue prestazioni attraverso le diverse tipologie di browser attualmente disponibili.

Il sito va testato localmente (su un proprio disco fisso) prima di essere caricato nelle sua dimora finale, sul server di rete.

Controllo della qualità minima

Un primo test da effettuare sul sito riguarda sicuramente la verifica di alcuni criteri minimi di qualità (QA, Quality Assurance).

Un sito ben strutturato prima di essere reso pubblico dovrebbe garantire i seguenti requisiti minimi:

a) visibilità, chiarezza e correttezza grammaticale dei contenuti testuali.

b) corretto funzionamento dei collegamenti interni tra le pagine.

c) corretta visualizzazione degli elementi grafici.

d) corretto funzionamento degli script e delle eventuali applicazioni presenti.

Criteri di accessibilità e usabilità

“Per accessibilità web si indica la capacità di un sito web di essere acceduto efficacemente (alla sua interfaccia e al suo

contenuto) da utenti diversi in differenti contesti. Rendere un sito web accessibile significa permettere l'accesso all'informazione contenuta nel sito anche a persone con disabilità fisiche di diverso tipo e a chi dispone di strumenti hardware e software limitati.”

Standard W3C – Italia - http://www.w3c.it/it/7/l-accessibilit-.html

Una parte importante nella valutazione della qualità di un sito web riguarda anche il suo corretto funzionamento e la sua accessibilità attraverso il maggior numero di sistemi operativi e browser esistenti.

In teoria se la struttura base (X)HTML è scritta correttamente, le nostre pagine dovrebbero venir lette e visualizzate senza problemi attraverso ogni tipo di browser.

Tuttavia prima di rendere pubblico un sito è buona prassi verificare le prestazioni delle proprie pagine web in tutte le condizioni di navigazione possibili.

Durante il processo di sviluppo è sicuramente utile avere a disposizione diversi sistemi operativi e molteplici versioni di browser, per un maggior numero di verifiche della qualità.

Un sito pubblico di ampia diffusione e utilizzo dovrebbe rispettare i seguenti criteri navigazionali:

a) Controllo dell’interfaccia grafica del sito nei vari browser e attraverso diverse piattaforme (Windows, Mac, Linux). E’ possibile a riguardo utilizzare alcuni servizi presenti in rete che permettono di vedere le pagine web create attraverso diversi browser senza doverli installare sul proprio computer.

b) Controllo della funzionalità delle pagine attraverso il maggior numero di browser.

c) Controllo della fruibilità del sito anche attraverso i browser per il solo testo (text web browser). I browser di maggior utilizzo come Internet Explorer, Google Chrome e Firefox, sono browser di tipo grafico (graphical browsers) poichè visualizzano tutti i contenuti di una pagina web: testi, immagini, filmati e animazioni

flash. Al contrario i text based web browser, come ad esempio Links, non possono visualizzare altro che i materiali testuali.

d) Bisogna controllare che il sito possa essere correttamente visualizzato anche senza i suoi elementi grafici. Infatti molti utenti in rete navigano scegliendo di non visualizzare gli elementi grafici presenti nei siti per velocizzare la visualizzazione dei contenuti.

e) Controllo della corretta visualizzazione dei file grafici. Le immagini utilizzate all’interno di un sito dovrebbero sempre poter essere visualizzate con facilità dai browser: pertanto sarà sempre opportuno controllarne le dimensioni e il peso. Bisognerebbe inoltre utilizzare sempre il tag alt per descrivere l’immagine,

affinché se ne possa conoscere il contenuto anche in mancanza di una sua visualizzazione.

f) Controllo della corretta visualizzazione degli elementi multimediali. In molti casi affinché ogni utente possa visualizzare questo tipo di elementi è necessario fornirgli durante la navigazione l’opportunità di installare i componenti o plug-in necessari.

g) Controllo delle funzioni del logo del sito. Il logo rappresenta un elemento grafico presente in tutti i siti web. In termini di accessibilità il logo dovrebbe servire come strumento di navigazione fondamentale, in grado di ricondurre l’utente sempre all’home page del sito che sta visitando.

Gli sviluppatori di un sito web, per migliorare l’accessibilità di un sito, possono avvalersi dell’aiuto di utenti disponibili a eseguire dei controlli di qualità, verificando il rispetto degli standard di usabilità, utili per determinare quanto sia fruibile un sito e quanto sia semplice corretto il suo funzionamento.

Per migliorare l’usabilità di un sito web è senz’altro necessario sapere quali elementi utilizzare ma soprattutto in che modo impiegarli nelle nostre pagine.

Vediamo ora in dettaglio quali sono i principali elementi, presenti comunemente nel web, utilizzati per migliorare l’esperienza “navigazionale” degli utenti.

I principali criteri di usabilità

Uso corretto delle breadcrumbs

Per breadcrumbs (lett. “briciole di pane”) si intende una specifica metodologia, utilizzata nel campo del web design, concepita per facilitare la navigazione all’interno di un sito.

Queste linee guida o “briciole”, solitamente collocate orizzontalmente nella parte alta della finestra del browser, sotto la barra dei titoli, servono ad indicare un “sentiero” composto da quei collegamenti che gli utenti utilizzano per tornare alla home page di un sito oppure ad altre pagine visitate in precedenza.

Un esempio di Breadcrumbs – L’ultima voce a destra rappresenta la pagina attiva, che l’utente sta

visitando.

Per rendere un sito accessibile è necessario usare questi elementi guida (o “briciole”) in maniera omogenea.

Questi elementi dovrebbero avere lo stesso nome della collocazione corrispondente. Un elemento guida in una pagina chiamata “merende”, dovrebbe essere chiamato allo stesso modo.

Le linee guida dovrebbero inoltre funzionare come punti fermi per indicare sempre l’esatta posizione degli utenti all’interno del sito.

Mai creare collegamenti ad una stessa pagina. L’ultima “briciola”, corrispondente alla pagina attiva, che l’utente sta visualizzando, non dovrebbe essere cliccabile.

Al contrario le “briciole” relative al percorso fatto per raggiungere la pagina attiva dovranno essere cliccabili.

Utilizzo delle etichette (tabs)

Nell’ambito del web design, con il termine “etichette” si intendono quegli elementi utilizzati ormai in ogni sito web per identificare le varie categorie in cui questo è organizzato.

Ad esempio sono etichette quegli elementi su cui l’utente può cliccare per spostarsi da una home page alle faq, al servizio di ricerca in linea, alla sezione partners ecc.

La creazione delle etichette dovrebbe seguire parametri di assoluta semplicità, prevedendo l’inserimento solo di quelle etichette indispensabili per diversificare nettamente i contenuti del sito e renderli immediatamente accessibili ad una prima occhiata.

Esempio di Etichette

Inoltre ogni etichetta dovrebbe essere diversificata con un nome breve e semplice, adatto a comunicare immediatamente un contenuto specifico.

Sebbene non si tratti di una regola sempre valida, anche l’home page del sito dovrebbe essere indicata da un’etichetta, testuale o grafica, per facilitare ancora di più la navigazione nel sito.

Utilizzo dei collegamenti

Secondo gli standard minimi di qualità, ogni collegamento dovrebbe essere sottolineato e possibilmente rappresentato in blu affinché sia sempre facilmente identificabile.

Volendo ovviare a questo standard specifico, i link possono apparire anche in modalità diverse ma devono comunque risaltare ed essere ben identificabili all’interno delle pagine.

Inoltre è necessario, soprattutto se il link è costituito da un pulsante o da un’immagine, che il suo aspetto cambi al momento dell’attivazione del collegamento.

E’ importante che i collegamenti stessi indichino la loro destinazione e finalità.

Ad esempio un collegamento ad un file PDF dovrebbe risultare ben distinto da un link ad un file audio. A questo scopo è possibile associare ai link delle specifiche icone per differenziare la destinazione dei collegamenti presenti.

E’ inoltre importante evitare l’utilizzo di collegamenti all’interno di una stessa pagina (i cosiddetti anchor tag). Normalmente, quando un utente clicca su un link si aspetta di essere indirizzato altrove, non di rimanere nella pagina di partenza, anche se in un’altra sezione di questa. I link ad una stessa pagina vanno utilizzati solo per la fruizione di contenuti testuali molto estesi: in questo caso è importante che lo stesso link comunichi all’utente il passaggio ad un’altra sezione della pagina.

I collegamenti agli indirizzi di posta elettronica (i cosiddetti mailto link) dovrebbero essere evitati a meno che lo stesso link non appaia chiaramente come un indirizzo mail.

Esempio

<a href=mailto:giorgio.rossi@email.it>mailto:giorgio.rossi@email.it </a>

L’apertura automatica e inaspettata di un programma di posta elettronica non rende piacevole l’esperienza di navigazione.

Utilizzo dei menu a tendina (Drop Down Menu)

Per natura, i menù di questo tipo, una volta attivi, bloccano la visualizzazione degli altri contenuti. Pertanto è necessario stabilirne e verificarne l’estensione affinché le pagine non vengano eccessivamente nascoste.

Così come per le “briciole” e le etichette, i menu a tendina dovrebbero utilizzare una nomenclatura breve e chiara, di facile intuizione per gli utenti.

Inoltre, sempre per facilitare la navigazione interna, è bene evitare l’inserimento di sotto-menù e lo scorrimento orizzontalmente

delle tendine, dal momento che potrebbe creare difficoltà per una visualizzazione corretta della pagina.

Utilizzo delle icone

Le icone realizzate senza un preciso criterio potrebbero seriamente limitare l’esperienza di navigazione. Le “etichette”, anche se realizzate con una scarsa considerazione dei principi di usabilità, rimangono comunque fruibili.

Un’immagine scelta male è senz’altro meno comunicativa e chiara di un termine breve e ben scelto. Ad esempio è più chiaro l’inserimento di un’icona a forma di valigetta 24 ore, oppure l’utilizzo dell’etichetta “opportunità di lavoro”?

Nel caso si decida di utilizzare delle icone come strumenti di navigazione è importante che queste vengano create secondo un modello preciso (colore, forma, luce ecc.), che segua uno stile comune interno al sito.

Visualizzazione dei contenuti

Nell’organizzazione dei contenuti è senz’altro fondamentale l’inserimento di una gerarchia per i titoli.

Questi ultimi devono risultare sempre distinguibili rispetto agli altri elementi testuali. A questo riguardo è fondamentale un uso ragionato dei font. E’ essenziale scegliere una famiglia di caratteri

ben leggibile anche a seconda degli altri elementi presenti nelle pagine, affinché il testo possa risaltare.

Organizzazione dei testi

I testi contenuti all’interno delle pagine web dovrebbero rispettare dei criteri specifici di lunghezza.

Le parti testuali non dovrebbero mai superare un certo numero di caratteri e non dovrebbero mai riempire completamente le pagine.

Solitamente i testi per essere considerati “leggibili” sulle pagine web dovrebbero contenere dalle 2000 alle 5000 battute. Solo in casi eccezionali, come in alcuni siti di carattere strettamente

divulgativo, si possono utilizzare per pagina anche testi più estesi (fino alle 10000 battute).

Anche in questo caso e non solo nella realizzazione dei titoli, la scelta del font e delle dimensioni è fondamentale per un miglioramento dell’accessibilità. I caratteri adatti alla parti testuali di un sito dovrebbero avere una dimensione compresa tra i 12 e i 10 punti.

Il testo presente dovrebbe inoltre essere visualizzato sulla pagina in maniera omogenea e ben distribuita. Non potendo ovviamente conoscere le dimensioni dei monitor che gli utenti useranno per vedere il nostro sito, è bene suddividere il contenuto del testo inserendo degli spazi tra righe composte da 12-16 parole.

I caratteri adatti

A questo riguardo è bene sapere che alcuni font specifici sono stati progettati proprio per il web. Tra questi i più utilizzati sono sicuramente il Tahoma e il Verdana progettati specificamente per migliorare l’esperienza di navigazione.

Video

Per la realizzazione e l’utilizzo dei file video sul web il programma specifico maggiormente utilizzato è sicuramente Flash.

Per inserire correttamente un file video sul web è necessario in primo luogo utilizzare la giusta risoluzione.

Nell’inserimento di un video in una pagina è necessario, se si vuole focalizzare l’attenzione degli utenti su un particolare filmato, che non siano presenti altri video nella stessa pagina.

Infine è opportuno che siano direttamente gli utenti a decidere se e quando visualizzare il video presente su una pagina, di cui inoltre dovrebbe essere indicata la durata temporale.

6. La Pubblicazione del sito

Dopo la realizzazione e il controllo del funzionamento dei diversi prototipi, dopo la verifica dei criteri di accessibilità e usabilità, il sito è finalmente pronto per essere lanciato e diventare pubblico.

A questo punto il sito può essere caricato sul server finale e reso disponibile ad ogni utente in rete. Dopo il caricamento è necessario eseguire un ultimo test per controllare che l’operazione sia avvenuta correttamente e che le pagine funzionino nella configurazione del server ospitante.

7. Manutenzione del sito

Ovviamente il lavoro di chi si occupa di progettazione web non termina con la pubblicazione di un sito.

E’ infatti importante formulare subito una strategia preventiva riguardante eventuali futuri problemi o malfunzionamenti.

E’ inoltre necessario stabilire quali parti del sito dovranno essere eventualmente aggiornate e ogni quanto.

Un altro aspetto importante riguarda la “vita” stessa di un sito web. E’ stato progettato per rimanere per sempre in rete e quindi essere periodicamente aggiornato nei contenuti oppure solo per un determinato lasso di tempo in base ad una specifica finalità?

Pertanto nel caso di un sito destinato a durare sarà opportuno definire le varie persone e figure professionali che dovranno occuparsi delle modifiche e degli aggiornamenti affinché il sito risulti sempre aggiornato e fruibile.

FINE LEZIONE