ALCUNI ELEMENTI PER LA COSTRUZIONE DI UN SITO WEB

Gli strumenti messi a disposizione dal Web, consentono di costruire il proprio sito web
senza conoscenze approfondite di programmazione. Bastano impegno e qualche buona idea. La
parte difficile è farlo funzionare.

Che sia un blog, un portale o un servizio di e-commerce, poco importa: quello che conta, è essere
presenti sulla rete con il proprio sito. Fino a poco tempo fa i webmaster erano figure proprie della
mitologia nerd, oggi è la stessa Rete a fornire una serie di strumenti che rendono possibile a tutti
costruire un sito WEB.

Prima di iniziare: Si deve scegliere la piattaforma giusta.

Selezione della piattaforma

Per un blog, una soluzione utilizzata è WORDPRESS. Per siti generici, come la vetrina di
un’azienda o una galleria fotografica, si potrebbe optare per JOOMLA o DRUPAL, i cosiddetti
CMS (Content Management System). Un sistema di gestione dei contenuti è uno strumento
software, installato su un server web, il cui compito è facilitare la gestione dei contenuti di siti web,
svincolando il webmaster da conoscenze tecniche specifiche di programmazione Web.
I CMS a fronte di una complessità lievemente superiore permettono di realizzare gratuitamente
qualsiasi tipo di prodotto.

Logo e contenuti
Prima di REALIZZARE un sito, è opportuno concentrarsi sugli OBIETTIVI che si vogliono
raggiungere. Gli obiettivi devono essere chiari. Obiettivi chiari=Adesso sarà possibile trovare il
nome, il logo e la tipologia di contenuti più adatti.

Dominio
Il dominio è l’indirizzo completo del sito (quello che si digita nella barra di navigazione del motore
di ricerca).
Il dominio può essere gratuito o a pagamento. Deve essere scelto facendo attenzione a:
• Lunghezza;
• Pronunciabilità;
• Difficoltà di scrittura.
Il consiglio è di scegliere, se disponibile, un nome breve, pertinente rispetto ai contenuti e facile da
ricordare.

Marchi e Copyright
Un modo per proteggere la proprietà del contenuto pubblicato (articoli, documenti, fotografie, etc.)
• Copyright;
• licenze Creative Commons.

1
Creative Commons
Creative Commons (CC) è un'organizzazione statunitense non profit dedicata ad ampliare la gamma
di opere creative disponibili alla condivisione e all'utilizzo pubblico in maniera legale.
L'organizzazione ha pubblicato diversi tipi di licenze note come licenze Creative Commons (CC):
queste licenze permettono ai creatori di scegliere e comunicare quali diritti riservarsi e a quali diritti
rinunciare a beneficio dei destinatari.
Le licenze forniscono un modo semplice e standardizzato per dare pubblicamente il permesso di
condividere e utilizzare il lavoro creativo in base alle condizioni stabilite dai creatori.

Introducono il nuovo concetto di:

Alcuni diritti riservati (some rights reserved).
• copyright (C) (Tutti i diritti riservati, All rights reserved).
• pubblico dominio (PD) (Nessun diritto riservato, No rights reserved).

Template
L’insieme delle componenti grafiche e funzionali di un sito privo di contenuto. Sulla rete se ne
possono trovare gratuitamente centinaia, scaricabili, modificabili e riutilizzabili a piacimento.

Servizio di analisi Web

Esempi:
Google Analytics o Stat Counter danno la possibilità di monitorare costantemente il sito:
• visitatori generali;
• sezioni più lette;
• provenienza dei visitatori e così via.
Si tratta di applicazioni formidabili per aumentare l’audience o vendere spazi pubblicitari

Social network
Per pubblicizzare il sito è fondamentale avere una pagina sui principali social network, almeno
Facebook e Twitter. per creare e consolidare ancora di più l’idea di brand.

Per creare e mantenere un pubblico, è assolutamente necessario pianificare qualità e quantità dei
contenuti del sito. Aggiornamenti frequenti, pertinenti e ben impostati attirano sicuramente più
visitatori rispetto a un sito spoglio e statico.

Il consolidamento di un pubblico fedele passa anche per la qualità dei contenuti del sito, la presenza
attiva sulla rete, la quantità di rimandi esterni (dal proprio sito verso la rete) e interni presenti.

2
 PROGETTARE SITI WEB

Progettare un sito non è cosa semplice. Bisogna avere innanzitutto radicato nella propria esperienza
alcuni meccanismi di navigazione che bisogna aver studiato, approfondito e fatto propri. Viene
pertanto da sé che, per giungere ad un modello utile e definitivo bisogna ragionare su vari piani
quali: la destinazione d’uso del sito, le esigenze particolari del sito, la tipologia di utenti che vi
navigheranno, creare modelli e prototipi che possano aiutare a confrontarsi e migliorare gli
standard, e infine testare il tutto.

Una parte significativa nella progettazione di un sito è proprio quella che sta nel mezzo: creare cioè
un modello semi-grafico più o meno accurato che ci permetta di definire navigazione, strumenti,
contenuti e interazione del sito in oggetto.

La fase antecedente alla creazione del WireFrame/MockUp/prototipo

Pochi semplici passi ci possono aiutare a comprendere e definire l’aspetto che dovrà avere il sito
finale, sebbene alcuni tratti piuttosto standard siamo già in grado di definirli a priori.

1. Un primo meeting con il cliente è ciò che ovviamente può chiarirci le idee sui primi passi da
compiere, attraverso un brainstorming in cui si definiranno obiettivi e funzionalità.
2. Un’analisi dei siti concorrenti ci aiuterà inoltre a definire alcuni meccanismi e le strategie
vincenti da attuare, per capire cosa porta più utenti e/o vendite.
3. Definite inoltre tramite delle simulazioni di navigazione (detti “profili utente”) o degli
“scenari” (situazioni combinate di un particolare tipo di utente / compito da svolgere) i
metodi d’interazione con l’interfaccia del sito e gli obiettivi che volete raggiungere.
Prima di passare alla fase vera e propria di creazione del WireFrame, studiamo alcuni standard di
fatto.

Definire i componenti di una pagina

Ciò che non può mancare mai in una pagina web, che sia una homepage di un blog o un e-
commerce, o ancora un sito vetrina o aziendale è:

• Testata, dove vi sia un titolo o logo identificativo ed eventualmente un sottotitolo, slogan o

tag-line. È molto importante che l’utente capisca al primo impatto sul sito di chi ci troviamo e,
poiché sul web non abbiamo l’interazione fisica fra persone, è il logo a svolgere questo compito
d’interfaccia. Il logo deve essere il nostro punto di riferimento sempre e comunque
all’interno di tutte le pagine del sito. Normalmente per i siti occidentali è posto in alto a
sinistra, che è l’area su cui l’occhio cade subito. Ovviamente per gli orientali, la cui scrittura
parte da destra verso sinistra, vale il ragionamento contrario.
• Un sottotitolo, slogan o tag-line (termine prettamente “da stampa”) è importante per far
comprendere al visitatore di che parla il sito. Molte volte capita di entrare in un sito, vedere il
logo, ma non capire assolutamente neanche dai contenuti, di cosa si parla, gli scopi di quel sito.
Eventualmente in quest’area è opportuno spesso inserire il menu principale di navigazione,
anche se non sono deprecate alcune pratiche più creative, come metterlo in una colonna laterale
o in posizioni diverse, a vantaggio però sempre di un’immediatezza e chiarezza nella
navigazione. Spesso la testata conterrà anche le cosiddette “briciole di pane” o breadcrumbs,
che serviranno a determinare il “dove siamo” nelle navigazioni più profonde e complicate.
• Contenuti. Il corpo, la vita del sito, che secondo il suo uso avrà differenti caratteristiche.
• Il footer, o “piè di pagina”, dove saranno contenute informazioni riepilogative su titolo,
sottotitolo, diritti copyright o eventuali licenze, nonché i dati societari e la partita iva, da
scrivere obbligatoriamente in Italia per i detentori.

3
Caratteristiche tipiche di alcuni siti

Alcuni siti si differenziano da altri per alcuni elementi tipici. Fin da subito, anche a sito privo di
contenuti, è intuivo capire su che tipo di sito si sta navigando.

I siti principali in cui ci si imbatte sono: siti aziendali, siti vetrina, e-magazine, e-commerce, blog
e possono avere strutture differenti, a una, due o tre colonne.

Un sito aziendale, ad esempio, avrà come contenuti un’esposizione più o meno creativa dei servizi
o prodotti offerti, foto rappresentative, contatti. Idem per il sito vetrina, che si chiama in tal modo
perché espone proprio come in una vetrina virtuale, un prodotto, un servizio, un evento e raccoglie
tutte le informazioni relative.

Un e-magazine, com’è intuibile, avrà una struttura più ricca e costruita, per esporre nella sua
homepage più informazioni possibili. Proprio come un quotidiano, infatti, avrà una notizia
principale in evidenza con una grande foto, le ultime 5/6 notizie in ordine cronologico discendente,
o ancora l’ultima per ogni tipologia, trafiletti e spazi pubblicitari nei punti più strategici. Molto
similmente si comporterà un blog, che secondo la sua complessità riporterà le ultime notizie e in
una o due colonne laterali altre informazioni utili alla funzione sociale del blog, quali commenti,
feed RSS, sondaggi, etc.

Un e-commerce avrà invece un’altra struttura tutta sua, piuttosto rigida ma necessaria, quale il
richiamo alle categorie di articoli posti in testata o in una colonna, la scheda del prodotto in bella
evidenza, box che racchiudono informazioni sul carrello e sulla navigazione e le procedure di
acquisto o acquisizione dell’ordine. Più chiaro è, meno difficoltà avrà l’utente nell’interazione.

Ma non è detto che tali strutture non possano essere stravolte in modo creativo e innovativo, purché
si effettuino dovuti test di navigazione per valutarne l’efficacia.

La gestione degli spazi nella creazione di un WireFrame/MockUp/prototipo

Il primo passo è di prendere carta e penna (sì, carta e penna) e cominciare a buttare giù le prime
idee tramite il cosiddetto sketch.

In questa fase, avere un foglio bianco dinanzi, non pone limiti al posizionamento dei vari oggetti
all’interno della pagina né alla creatività. È in questa fase, infatti, che si gestiscono entrambi gli
aspetti della creazione di un sito: struttura e presentazione. All’inizio si devono definire i punti
fissi di cui abbiamo parlato precedentemente, e solo dopo, dedicarsi alla parte creativita fino a
raggiungere un giusto compromesso.

4
Alla fine va eliminato di tutto ciò che è inutile, ripetitivo o esagerato. Le giuste proporzioni danno
aria e respiro ad un layout che altrimenti risulterebbe affollato e non focalizzerebbe la giusta
attenzione dove deve. La simmetria non deve essere la regola, ma la giusta compensazione si.

Trasporre il wireframe in digitale: Qualsiasi strumento si voglia utilizzare, vale, purché si cominci a
ragionare in termini di pixel e di spazi più verosimilmente reali rispetto al tipo di griglia o di layout
che si ha intenzione di usare. È sufficiente delineare i bordi o colorare le aree che racchiudono
alcune informazioni principali. Si devono simulare i testi, considerare margini e padding come nella
rappresentazione più veritiera possibile del sito.

L’utilità effettiva di un WireFrame e il suo uso

Il cliente, se non è pratico del mestiere, capirà ben poco dal WireFrame preliminare, che avrete
steso in seguito ai primi colloqui conoscitivi. Il suo uso, dovrebbe essere prettamente vostro o
interno alla web agency per facilitare la comprensione del posizionamento degli oggetti del sito
all’interno delle pagine.

Al cliente finale è sempre opportuno consegnare invece la bozza grafica, elaborata sulla base di
questo WireFrame. L’esposizione grafica, la simulazione dell’aspetto che avrà il sito è lo strumento
di cui il cliente può più facilmente disporre e che può più facilmente comprendere. In questo modo
se le modifiche successive riguarderanno esclusivamente l’aspetto grafico, e non la “posizione”
degli oggetti, la struttura del sito sarà al 99% quella del WireFrame.

Joomla

Il CMS Joomla presenta alcuini elementi fondamentali che vale la pena descrivere. In generale si
parla di estensioni. Servono a completare e arricchire le già ampie possibilità offerte dal
programma. Sono 5 tipi diverse e possono intervenire in vario modo.

• Template: ha lo scopo di definire la grafica del sito, le impostazioni di stile del markup (per
esempio le dimensioni e il font da usare nei titoli o nei paragrafi, le tabelle etc etc), ma
anche il layout del sito con la suddivisione, per esempio, in due o in tre colonne, la posizione
dei moduli, delle immagini e così via.
• Moduli: servono per mostrare informazioni non strettamente correlate alla pagina sulla
quale sono presenti o vengono utilizzati da alcuni componenti per visualizzare elementi
interattivi. Possono essere agevolmente indirizzati in qualsiasi punto del template e mostrati
solo nelle pagine in cui si desidera che appaiano.
• Componenti: possono essere assimilati a vere e proprie applicazioni che possono essere
installate per integrarsi pienamente con le funzionalità di base del CMS (es. banner, contatti,
link web, gallerie immagini, etc.). Mostrano il risultato delle loro elaborazioni nella parte
centrale del tema grafico.
• Plugin: sono porzioni di script o di codice in grado di potenziare le funzionalità di base del
CMS. Quando vengono richiamati, eseguono funzioni di utilità o di effetto come
nell’apertura delle immagini o nel trattamento del testo (es. editor di testo in backend). I
plugin possono agire per migliorare le prestazioni e le funzionalità di ricerca, della gestione
del testo, delle immagini e del sistema in generale.
• Lingua: implementa nuove lingue