Creare una pagina personale da
hobby si trasforma spesso in necessità. Ma come emergere
dall'uniformità che spesso accomuna troppi siti? Per
distinguersi dal mucchio sono almeno due le parole chiave:
originalità e impatto visivo
Realizzare la propria Home page è un desiderio di tanti
navigatori. Essere presenti nel Web significa lasciare traccia di
sé a tutto il popolo telematico. È un pizzico di protagonismo
che ci rende più partecipi nel mondo virtuale e veri cittadini
della Rete. Oltretutto lo spazio dove inserirla non rappresenta
più un ostacolo in termini di costi; sono molti i provider che
offrono nel pacchetto di abbonamento la possibilità di
usufruire, a scopo non commerciale, di qualche centinaio di KB
sui propri server, oppure, come descritto più avanti, si può
ottenere gratuitamente aderendo a una delle numerose comunità
virtuali presenti in Rete.
Realizzare una pagina Html non è difficile. La documentazione
necessaria per imparare a costruire le nostre pagine è
disponibile su parecchi siti di taglio tecnico (alcuni indirizzi
sono contenuti nel box), oppure sugli scaffali delle librerie.
L'aspetto sul quale ci vogliamo soffermare non è, dunque, il
linguaggio, bensì la realizzazione di un modello originale
frutto della nostra creatività. Per sviluppare un sito prima di
tutto occorre avere le idee ben chiare su cosa si vuole
realizzare. Iniziamo quindi a scrivere su carta quella che dovrà
essere la struttura, riportando ogni aspetto, nota e spunto che
possa tornarci utile. Tenete sotto mano fogli e penna, non
esitate a usarli nei momenti di particolare ispirazione e se
questa tarda ad arrivare non disperate, le fonti d'ispirazione
sono infinite. Non possiamo però lasciare alla nostra fantasia
il campo completamente libero, altrimenti correremmo il rischio
di trovarci di fronte una selva disorganica di immagini frutto di
buone idee che non siamo riusciti a organizzare. Per ottenere un
prodotto il più possibile professionale che rispecchi la nostra
personalità, dobbiamo imporci delle regole. Originalità e
impatto visivo saranno le nostre "parole chiave". La
fretta, si sa, è cattiva consigliera, quindi a ogni particolare
dedicheremo il tempo necessario: ci occuperemo del layout della
pagina, sceglieremo i colori, svilupperemo le idee e infine
realizzeremo le immagini grafiche.
I vantaggi di un buon layout sono
molteplici. La pagina dovrà essere ben bilanciata, non
presentare delle lacune e dovrà essere funzionale, cioè
permettere a chi vi accede per la prima volta di orientarsi con
facilità. Conviene organizzare una struttura logica,
posizionando i tasti di navigazione, il testo e le informazioni
sempre nella stessa posizione. Evitiamo di "inventare"
un layout diverso per ogni pagina del sito, abituiamo il nostro
ospite a muoversi in casa nostra sempre con le stesse modalità.
Non nascondiamo i link, sono gli elementi più importanti del
documento, e cerchiamo, per quanto possibile, di rendere le
pagine non scrollabili: alcune informazioni importanti potrebbero
perdere valore o essere ignorate; se è proprio necessario
facciamolo solo verticalmente. Per i più creativi potrebbe
essere interessante utilizzare i frame, dividendo la zona
relativa alla navigazione, in genere più stretta, da quella
principale dei contenuti. La posizione delle varie sezioni non
deve essere in contrasto con "l'uso comune" in
Internet. Una barra di navigazione collocata in basso potrebbe
essere un'idea originale, ma risulterebbe inusuale e quindi più
difficile da individuare rispetto a quella posta in alto o a
sinistra: è qui che solitamente risiede ed è qui che l'utente
si aspetta di trovarla.
Un discorso a parte meritano le immagini mappate, che presentano
diverse aree sensibili al loro interno. Può essere una tecnica
interessante per caratterizzare il sito. Per esempio, potremmo
utilizzare una foto in cui ogni elemento colleghi un'area diversa
(cliccando sulla nostra foto si potrebbe raggiungere il
curriculum e così via). Il suo limite è rappresentato proprio
all'utilizzo delle immagini che possono confondere il nostro
ospite quando non sono ben rappresentative della sezione linkata.
Inoltre, le aree sensibili non immediatamente individuabili
rischiano di essere ignorate. Per ovviare a questi inconvenienti
si possono realizzare immagini contenenti un elemento che
identifica ogni area: per esempio un testo o un simbolo grafico
la cui funzione è quella di attirare l'attenzione di chi naviga.
Una volta fatta la scelta, l'impaginazione andrà mantenuta nelle
pagine interne del sito, in modo da permettere al nostro
visitatore di muoversi agevolmente all'interno delle varie
sezioni (il curriculum, gli hobby, i link preferiti ecc.); anche
la struttura complessiva del sito (la profondità dei link, i
collegamenti incrociati) dovrà essere semplice e lineare per
evitare che il nostro ospite si perda.
In Html le tabelle sono un buon metodo per la realizzazione di
una struttura d'impaginazione. Offrono il vantaggio di poter
strutturare la pagina su più colonne (nel caso della pagina di
esempio la tabella contiene tre colonne: quella di sinistra per i
bottoni di navigazione, quella al centro per il testo, quella a
destra per il logo), permettendo un ridimensionamento dinamico
(centrando la tabella e utilizzando al suo interno gli attributi
Width e Height impostati come valori percentuali) per adattarsi a
diverse risoluzioni video.
Il primo crea una tabella con due colonne che dividono verticalmente la pagina e ogni colonna ne occuperà il 50% della larghezza; la seconda tabella ha la stessa struttura della prima distribuita però orizzontalmente; nella terza tabella le colonne sono tre e quella centrale occupa una larghezza maggiore delle altre. Infine nell'ultimo esempio si creano due frame orizzontali, nei quali vengono caricati i documenti top.html e main.html.
Realizzata la struttura che si
adatta meglio alle nostre esigenze, spostiamo la nostra
attenzione sulla parte grafica che riveste particolare
importanza.
In quest'ambito i colori rappresentano un elemento fondamentale;
trasmettono sensazioni ed emozioni e possono essere un ottimo
strumento per "attirare" il navigatore che passa dalle
nostre parti. Accostando colori di tonalità diversa si ottiene
l'effetto di aumentarne la diversità, generando un forte impatto
visivo. Utilizzando gradazioni diverse di uno stesso colore o di
colori simili sarà possibile ottenere un effetto armonioso. Dai
toni cromatici deve trasparire la nostra personalità, anche se
dobbiamo tenere un po' a freno la fantasia: l'eccesso potrebbe
essere un elemento di disturbo (pensate per esempio a una pagina
realizzata con i soli colori primari). Quindi usiamo insieme ai
colori anche un briciolo di buon senso, non dimenticando il
bianco, il nero e le loro sfumature. Questo non significa
eliminare a priori certe sfumature o preferirne altre. La scelta
dei colori rispecchia la personalità di ognuno, ma anche gli
scopi del sito. Solitamente, in quelli commerciali sono molto
forti per aumentare la caratterizzazione e l'impatto visivo,
mentre per le pagine personali la distinzione sembra decidersi
sul sesso dell'autore…quello femminile si orienta di più
sull'aspetto distensivo e armonioso utilizzando varie gradazioni
di un unico colore tenue, mentre i maschi amano di più i
contrasti e le "tinte forti". Un sito che tratta musica
tecno potrà usare colori e accostamenti azzardati, mentre uno
dedicato alla classica userà toni più soffici. Esistono però
regole che prescindono dal tipo di sito e riguardano gli
accostamenti di colore. Scegliamo due, al massimo tre colori di
base per non rendere la pagina troppo piena.
Gli elementi cromatici dovranno essere opposti per dare
"equilibrio emotivo": due colori troppo sgargianti,
come pure due troppo tenui, ispirano emozioni simili e quindi
possono stancare. Usiamo un colore debole per moderare la forza
dell'altro.
Infine, i colori dovranno offrire un buon contrasto. Devono
essere cioè perfettamente distinguibili una volta sovrapposti
per evitare difficoltà di lettura che comportano uno stato di
confusione e di mancanza di precisione nei contorni e nelle
linee.
Per un ulteriore approfondimento riguardante le colorazioni
possiamo consigliarvi il sito Ufficiale Pantone®
http://www.pantone.com
che offre spunti di riflessione sui molti aspetti dell'universo
cromatico, oltre a suggerire accostamenti accattivanti e
tendenze.
Per la nostra pagina di esempio sceglieremo un blu scuro per lo
sfondo, un giallo e un arancio per gli altri elementi, testo e
immagini. Quest'accostamento è molto gradevole e otterremo un
buon effetto di contrasto. Il testo sarà ben leggibile e le
immagini potranno risaltare e catturare l'attenzione anche se il
risultato finale, grazie alla prevalenza del blu di sfondo, non
sarà eccessivamente "forte".
È molto importante segnare su un foglio i codici dei colori che
usiamo (meglio se in entrambi i formati), ci potranno tornare
utili se dovremo aggiungere immagini o altri elementi in seguito.
Bottoni e logo dovranno seguire le stesse regole di colore
espresse fin qui. Utilizzeremo quindi gli stessi toni per i
pulsanti di navigazione e per le altre immagini.
Esaurita la sezione cromatica ora
viene la parte, forse, più difficile. Dobbiamo inventare la
grafica.
Se abbiamo molta fantasia, avremo buone probabilità di trovare
uno stile e una caratterizzazione soddisfacente. Se invece non
siamo proprio degli artisti possiamo cercare in giro (cioè
dovunque, non solo in Rete ma negli oggetti, nelle situazioni di
ogni giorno) gli spunti per idee creative che, nonostante non
siano proprio farina del nostro sacco, diverranno comunque
personalizzati, perché elaborato e modificato da noi.
Anche qui non bisogna esagerare. Possiamo partire da figure molto
semplici (circonferenze, linee rette, quadrati…) e ottenere,
componendole in vari modi, immagini finali gradevoli e d'impatto.
Aggiungendo delle ombre potremo dare un senso di profondità alla
struttura.
La caratterizzazione dovrà comunque sempre essere presente, ogni
immagine dovrà essere realizzata in modo da avere un senso di
appartenenza all'insieme. Avremo quindi uno stile comune, un tema
da seguire e un filo logico al quale dovranno adeguarsi tutte le
immagini che realizzeremo, anche se poi ognuna avrà la sua
specificità. Ogni foto dovrà avere una funzione propria e
identificarne il ruolo. Anche i bottoni di navigazione dovranno
rendere immediatamente evidente la loro funzione e saranno
omogenei pur nella loro diversità. Per facilitarne
l'individuazione può essere utile raggrupparli in un'unica
struttura continua, in modo da creare una "barra di
navigazione" (per i più esperti di Html questa barra
potrebbe risiedere in un frame a parte).
Il logo, il nostro simbolo distintivo, dovrà concentrare in sé
le caratteristiche della pagina e avere un impatto maggiore delle
altre immagini. Se ben realizzato rappresenta l'elemento che
induce il navigatore ad approfondire l'esplorazione delle nostre
pagine: deve quindi essere originale e attirare l'attenzione. Gli
altri elementi di contorno dovranno essere ben distinti dai
principali, ma avere comunque dei fattori di appartenenza
all'immagine globale. Saranno quelli in cui verrà focalizzata
l'attenzione solo in un secondo momento.
Per le immagini i formati più utilizzati sono GIF e JPEG. La
scelta tra quale usare deriva dal contesto: le GIF sono più
pesanti ma supportano un colore di trasparenza, le JPEG
permettono un buon rapporto qualità/pesantezza. Attenzione alle
immagini troppo grandi: pagine che complessivamente pesano più
di 100 KB vengono caricate in tempi lunghi. Quindi scontorniamo
le immagini più grandi per ridurne le dimensioni e non abusiamo
nel numero.
Ogni foto dovrà avere lo sfondo blu scuro che abbiamo scelto,
così non ci saranno discontinuità tra i bordi dell'immagine e
la pagina. L'aggiunta di uno sfondo alla figura (logo, bottone o
altro) darà poi un effetto di tridimensionalità all'insieme.
Seguiremo questo procedimento anche se abbiamo la possibilità di
salvare immagini GIF trasparenti: elimineremo così pixel di
colore non desiderato ai margini.
Bisognerebbe applicare un filtro anti-alias alle immagini per
smussare gli spigoli eliminando, se possibile, l'eccessivo
contrasto tra gli elementi che la costituiscono.
I più esperti possono utilizzare tecniche come GIF animate o
"effetti speciali" con Javascript per rendere più
interattiva e vivace la propria pagina. Questi sono solo piccoli
"optional" che possono essere usati, con moderazione,
in una struttura che ha già i requisiti di funzionalità,
gradevolezza e una personalità ben definita.
Dove trovare la documentazione tecnica
La documentazione necessaria per imparare a costruire le nostre
pagine è disponibile su numerosi siti "tecnici". Di
seguito vi segnaliamo alcuni indirizzi
Html 4.0
http://www.w3.org/TR/REC-html40/
Html e CSS
http://www.w3.org/TR/WD-style
Html Library
http://hjs.geol.uib.no/news/htmlib/htmlib.htm
Html Station
http://www.december.com/html/
Html 4 Reference
http://valsvc.webtechs.com/sgml/HTML4/ALL-ELEM.html
Html Compendium
http://www.htmlcompendium.org
Html Guide
http://werbach.com/barebones/
Html 3.0
http://www.sirius.com/~paulus/html30.html