introduzione al web designer-its lab-is minzoni

ITS Lab/ IS G.Minzoni
INTRODUZIONE AL WEB DESIGNER
Il Web DESIGNER è l'arte di creare template e layout per siti o per singole pagine Web che abbiano le
caratteristiche di:
 essere comunicative;
 essere graficamente accattivanti;
 avere colori, toni ed elementi indicati all'oggetto del sito;
 veloci da caricare;
 fare un utilizzo parsimonioso di immagini e concentrare effetti sui CSS.
 essere usabili, navigabili accessibili.
Vediamo adesso cosa si intende, in gergo, per template e layout.
In effetti non esiste grandissima differenza, dato che, tradotto in termini di uso più quotidiano, si tratta in
entrambi i casi dell'aspetto di un sito e delle relative pagine che lo compongono.
Per essere però più precisi possiamo dire che:
 il template è l'aspetto complessivo della pagina, formata dall'impaginazione, dal logo, dal menu di
navigazione, dagli elementi grafici e multimediali, dal contenuto, da eventuali elementi pubblicitari,
etc...
 il layout è inteso come lo scheletro che dovrà contenere tutti gli elementi del template, ovvero le
tabelle HTML o dei semplici livelli stilizzato e disposti esclusivamente con i CSS, come le regole
dell'usabilità e dell'accessibilità consigliano.
Allo scopo di soddisfare tutte le enormi esigenze descritte in queste poche righe introduttive, è necessario:
1. conoscere una serie di linguaggi per il Web;
2. conoscere una serie di software per il design e per la grafica;
3. acquisire una forma-mentis da designer.
Indicheremo una serie di risorse tra cui i linguaggi ed i software da conoscere, dalle quali è possibile
attingere per ampliare il proprio know-how è iniziare un percorso per definire una propria formazione
professionale nell'ambito del Web design.
I linguaggi da conoscere: HTML e CSS
In genere il primo linguaggio che un neofita del Web impara è l'HTML dato che non si tratta di un
linguaggio di programmazione bensì di marcatura degli elementi e dell'ipertesto; per questo motivo è
semplice da imparare ma... posso assicurarvi che non è semplice poi tirare fuori dei siti ben fatti.
Che si tratti o meno di un concetto nuovo è bene fissare un concetto: l'HTML da solo serve a poco, anche
restando in tema di Web design e non di programmazione. All'HTML è necessario affiancare i fogli di stile
CSS per dare un tocco grafico ed artistico non solo migliore, ma anche più potente e versatile alle pagine di
un sito.
Un buon designer deve sapere che ogni singolo carattere scritto nel codice HTML di una pagina rappresenta
un byte ed è quindi bene ottimizzare il codice al fine di non rendere inutilmente pesante una pagina. Anche
in questo caso ci vengono incontro i CSS, dato che questo stesso codice
<p><font color="#FF0000">Hello, World in rosso!</font></p>
può essere scritto come segue
<p>Hello, World sempre in rosso!</p>
ottenendo lo stesso effetto impostando questo codice in un foglio di stile CSS
p
{
color: #FF0000;
1
}
ed è possibile anche ottenere altri effetti come il grassetto, il corsivo, il sottolineato, la bordatura, senza
cambiare di una virgola il codice HTML ma agendo sul CSS
p
{
color: #FF0000;
border: Solid 1px #000000;
}
Prego quindi vivamente di approfondire questi due linguaggi.
I software da conoscere: Dreamweaver
Anche se la perfetta conoscenza dell'HTML e dei CSS è fondamentale, a mio avviso almeno per il 90%, è
molto comodo per un Web designer usufruire di alcuni software di sviluppo, chiamati anche Editor
HTML i quali, attraverso funzioni visive di tipo WYSIWYG (What You See Is What You Get, ovvero quel
che vedi è quel che ottieni) facilitano e velocizzano il compito di creazione del layout e dell'intero template
di una pagina.
Esistono moltissimi software per la gestione del design di una pagina Web ma noi prendiamo in
considerazione Dreamweaver della Adobe; a mio avviso il miglior software in assoluto che un designer
possa desiderare.
In definitiva:
 Dreamweaver permette la completa gestione di un sito dal punto di vista del design, offrendo una
vasta gamma di strumenti grafici e la possibilità di inserire anche script DHTML ed elementi
multimediali; ha anche la caratteristica di essere un buon gestore di script lato server come ASP e
PHP.
I software per la grafica: Photoshop e Flash
Una pagina Web va corredata da immagini, sia per chiarezza e per rendere meglio il senso descrittivo, sia
per una questione di professionalità, dato che i soli HTML e CSS da soli non possono rendere, graficamente
parlando, quanto un'immagine.
Nell'utilizzo delle immagini, tuttavia e come in qualsiasi cosa, ci sono pro e contro. Oltre a rendere più
accattivante e descrittivo una pagina Web, un'immagine rende la pagina stessa anche più lenta e difficile da
caricare.
Lo stesso discorso vale per i filmati o elementi multimediali in genere: un utilizzo oculato tende ad abbellire
una pagina, ma un eccesso tende a renderla molto o addirittura troppo lenta da caricare e l'utente (io sono
uno di questi) tende a chiudere la pagina prima che venga del tutto caricata, a meno che non so per certo che
sono interessato al contenuto e non a vedere quanto sono belli e bravi quelli che l'hanno fatta.
E' importante non mettersi in competizione se non con se stessi: lo scopo è quello di ottenere il miglior
risultato nei tempi più brevi possibile e con meno sforzo possibile, evitando anche appesantimenti in fase di
caricamento.
I migliori software di grafica e di grafica multimediale attualmente sul mercato sono Adobe
Photoshop e Flash i quali si occupano rispettivamente: della gestione, della creazione e dell'ottimizzazione
delle immagini; della creazione di elementi multimediali.
In definitiva:
 Photoshop permette di creare immagini sia secondo le regole della grafica vettoriale che della
grafica bitmap, permettendo la loro perfetta gestione e l'ottimizzazione; permette di salvare immagini
nei migliori formati disponibili, tra cui JPEG, GIF e PNG.
 Flash permette la realizzazione di filmati, giochi, elementi come menu e banner e di interi siti; la sua
potenza sta nel fatto che, grazie ai suoi strumenti, è possibile creare elementi sia usando
semplicemente detti strumenti che includendo vero e proprio codice di scripting,
chiamato ActionScript.
2
Tecniche di design: layout e tabelle
Vediamo adesso di mettere in pratica quanto appreso fino a questo momento in tema di Web design e di
costruzione (o che dir si voglia creazione) di layout e template per una pagina Web.
Esistono decine e decine di interfacce standard per la realizzazione di un sito, di un portale o di una Web
application ma adesso ci limiteremo a prendere in considerazione le mere tecniche di realizzazione.
Prendiamo in considerazione il seguente sito:
Presenta le seguenti caratteristiche:
 un layout centrato rispetto all'intero schermo, ottimizzato per essere visualizzabile a dimensione
900X700 senza far comparire le barre di scorrimento orizzontali, decisamente antiestetiche e poco
professionali;
 troviamo poi la barra orizzontale contenente il logo sulla sinistra ed un elemento di comune utilità
come un motore di ricerca interno sulla destra;
 al di sotto troviamo una barra orizzontale (blu) in cui poter piazzare un menu o uno spot testuale, o
qualsiasi altro elemento di generica utilità; anche in questo caso lo scopo principale è creare un gioco
di colori;
 a questo punto inizia la fase riguardante i contenuti veri e propri del sito, ovvero i menu contestuali
laterali ed il corpo centrale della pagina che contiene materialmente i contenuti della pagina o della
sezione corrente.
Usabilità e accessibilità nel Web designer
Siamo arrivato ad una nota dolente del lavoro di un Web designer, ovvero realizzare i propri lavori in modo
da renderli conformi alle norme dell'usabilità e dell'accessibilità, il che non è un compito semplice e a volte
addirittura ingrato, ma davvero fondamentale.
Prima di affrontare i pro ed i contro e di vedere quali linee guida seguire allo scopo di rendere i propri lavori
usabili ed accessibili, tentiamo di capire cosa intendiamo per usabilità ed accessibilità di un sito Web.
3
 Per usabilità si intende il principio secondo il quale un sito deve essere semplicemente navigabile,
ovvero in cui compaia il famoso menu molliche di pane * o barra di navigazione e dove i veri e
propri menu di navigazione ** siano disposti e gestiti ad hoc.
 L'accessibilità, invece, non è un concetto in qualche modo astratto come quello dell'usabilità ma
esistono regole concrete legate alla gestione di particolari elementi del template della pagina quali
i menu ed i link in generale ***, i form **** e la struttura vera e propria della pagina Web in
questione. Nei due capitoli precedenti, ad esempio, abbiamo visto come costruire un layout
utilizzando le tabelle ed i livelli ed abbiamo accennato che i livelli, stilizzati con i CSS, permettono
non solo una maggiore velocità di caricamento della pagina, ma si tratta anche di una tecnica testata
per browser particolari come dispositivi per cellulari e palmari e per browser per disabili.
* Il menu molliche di pane è un classico esempio di usabilità in cui vediamo il percorso logico della pagina
locale, come in questa pagina
Homepage + Chi siamo + Lezione...
e torna molto utile all'utente per "capire dov'è e come tornare indietro".
E' possibile realizzare questo tipo di menu sia con script lato server o lato client che identifichi il percorso
fisico del file sul server Web e ne costruiscano la dinamica, sia a mano... soluzione meno pratica ma
altrettanto funzionale.
** I menu di navigazione di un sito si definiscono usabili quando, ad esempio, la voce del menu
corrispondente alla pagina corrente resti in qualche modo evidenziata.
Altra importante caratteristica dei menu di navigazione che rendono un sito usabile è quella di inserire un
box con link contestuali a seconda della sezione del sito in cui ci si trova. Immaginiamo un portale generico
che offre tre servizi: in ognuna delle sezioni inserire tutti i link specifici della sezione di appartenenza, in
modo da rendere più semplice ed appetibile la navigazione da parte dell'utente.
**** Grazie alle Access Key (chiavi di accesso) possiamo permettere ad un utente che non voglia usare il
mouse, che non abbia per una qualsiasi causa il mouse, oppure ad un disabile, di navigare il nostro menu di
navigazione attraverso il solo utilizzo della tastiera, creando ad hoc degli shortcut, ovvero tasti di scelta
rapida.
***** Sempre grazie alle Access Key possiamo rendere accessibile anche un form HTML ad un utente che
non dispone della possibilità di utilizzare il mouse.
I concetti di accessibilità e di Web designer, rivolti al futuro, sono indissolubilmente legati al concetto
di XHTML, ovvero all'estensione dell'HTML reso valido a tutti gli effetti.
In conclusione vi dico che riuscendo ad seguire queste linee guida in concomitanza della creazione di un
layout piacevole e professionale vuol dire aver fatto un buon lavoro, da vero designer professionista!
Siti, portali ed applicazioni
Il Web designer, in generale, non ha il compito di "far funzionare" un sito, ma solo il compito di renderlo
accattivante, veloce, accessibile, usabile e quant'altro. Far funzionare il sito è compito del programmatore,
ma il Web designer deve mettere a disposizione del programmatore un template adatto al tipo di sito da
realizzare.
Il termine sito è piuttosto generico. Esistono diverse categorie di siti, probabilmente alcune decine, ma per
praticità ci limiteremo a distinguerli in tre macrocategorie:
 Siti
Per sito intendiamo una vetrina di prodotti, una presentazione personale o aziendale. Insomma, un
sito è inteso come una presentazione senza particolari pretese dal punto di vista programmatico e con
moltissime pretese da un punto di vista sia di design che puramente grafico.
 Portali
Un portale è un punto di raccolta di informazioni, news ed articoli a 360 gradi o per un determinato
settore. Un esempio di portale a 360 gradi potrebbe essere Libero.
 Applicazioni
Un'applicazione Web non è altro che la trasduzione di un generico software gestionale (scritto ad
esempio in Visual Basic o in C++ o in Java, etc...) in interfaccia Web.
Lo scopo di questa distinzione cosi netta è far capire che è necessario essere ferrati nella creazione di layout
e template atti a soddisfare diverse esigenze di diversi potenziali clienti.
4
Nei prossimi tre capitoli vedremo come definire le struttura base di queste tre tipologie di siti Web.
Strutturare un sito Web
Nel capitolo precedente abbiamo visto che ci sono notevoli differenza, in termini di aspetto e quindi di
design, tra un sito vetrina, un portale ed un'applicazione ad interfaccia Web. In questo capitolo vediamo,
con degli esempi, come strutturare un sito vetrina per noi stessi o per un nostro potenziale cliente.
Un sito vetrina, appunto, necessita di molta grafica e di un design non complicatissimo, dato che il lavoro
maggiore è demandato al grafico. Il designer altro non deve fare che costruire un layout adatto ad ospitare le
immagini utilizzate per il logo, per i menu e per elementi grafici in generale, costruiti ad hoc dal grafico e
tagliati in maniera tale da essere ospitati nelle celle della tabella strutturale della pagina.
Naturalmente non è detto che un sito vetrina debba essere composto necessariamente da grosse immagini
adattate ad hoc o di filmati Flash che svolgano ruoli determinanti piuttosto che essere impiegati come
elementi secondari come titoli, menu di navigazione etc... Ragion per cui possiamo immaginare di costruire
un sito dal bell'aspetto anche con poche immagini e molti CSS ed effetti DHTML. Il tutto dipende da alcuni
fattori, legati per lo più alle esigenze del cliente, al quale vanno fatte presente cose tipo l'accessibilità e
l'usabilità del sito, la pesantezza e la lentezza di caricamento, potenziali problemi di compatibilità e di
corretta visualizzazione della pagina e cosi via.
Vediamo un esempio di sito particolarmente accattivante da cui prendere spunto (solo come idea
naturalmente) per lo sviluppo di un sito vetrina.
Il sito mostrato nell'immagine precedente, è appunto un classico esempio di un sito dedicato alla
presentazione di un'attività, nel caso specifico di uno sport, ma può essere preso da esempio per la
realizzazione di qualsiasi, modificando naturalmente le immagini e le diciture dei link a seconda delle
proprie esigenze.
5
Raccomando particolare attenzione all'impaginazione ed al modo in cui le immagini sono state
accuratamente tagliate e disposte nel layout della pagina; attenzione anche al metodo in cui sono stati
predisposti i menu in modo da essere semplici, visibili ed accattivanti al tempo stesso.
Strutturare un portale Web
Un portale Web è una raccolta di informazioni, link e servizi strutturata gerarchicamente e divisa in
categorie, eventuali sottocategorie ed argomenti finali.
La struttura grafica di un simile lavoro si discosta, per esigenze, notevolmente da quella di un sito vetrina,
preso in esame nel capitolo precedente. Un portale è in genere anche ricco di spot (banner di varie
dimensioni) e pubblicità a prodotti e servizi interni o esterni.
A seconda delle esigenze viene scelto un template differente. Le esigenze variano molto spesso anche in
tempi brevi, quindi è necessario organizzarsi in partenza in maniera tale da ottenere il massimo risultato col
minimo sforzo in fase di aggiornamento.
In merito alla pubblicità, ad esempio, ci sono periodi in cui sono più cliccati banner o spot testuali di
determinate dimensioni e forma ed è quindi importante, per chi fa di un portale un'attività economica,
organizzarsi in maniera ottimale senza far diventare le proprie pagine dei curiosi alberi di Natale dove
l'unica cosa che spicca sono gli spot.
Strutturare un'applicazione Web
Da alcuni anni ormai moltissime aziende ed enti preferiscono commissionare o addirittura revisionare i
propri software gestionali verso l'interfaccia Web.
Un'applicazione Web, quindi, non è altro che un software gestionale, con tanti di autenticazione e maschere
di inserimento, modifica, cancellazione, calcolo e ricerca dei dati da e verso un database, scritti con un
linguaggio di scripting lato server come ASP, ASP.NET, PHP, JSP, CGI, Cold Fusion etc...
Per quanto povera di pretese a livello grafico, un'applicazione Web risulta in genere il compito più duro da
sviluppare a livello di design, dato che, in genere, la figura del designer e del programmatore è divisa in due
persone diverse e spesso l'una non conosce a pieno il lavoro dell'altra e si finisce per creare lavori poco
accattivanti.
E' quindi necessario, almeno, avere conoscenza del lavoro dell'altro al fine di trovare una buona, se non
ottimale, integrazione nell'ambito dello sviluppo di un'applicazione Web.
Ho tenuto a precisare questa cosa perchè mi sono trovato molto spesso, in varie aziende, a collaborare con
designer o programmatori ed essere a mia volta, sui vari progetti, designer o programmatore di quel progetto
ed una buona conoscenza di entrambe le competenze ha giovato sia a me che ai colleghi, e non meno alla
buona riuscita del software finale sia dal punto di vista grafico che programmatico.
6