|
Io e la mia homepage
Giampaolo Petrosemolo
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.
La struttura della pagina
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.
La scelta dei colori
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.
La costruzione grafica
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.
(gpetrosemolo@tecnet.it)
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 |