Progettazione e costruzione di un sito - Introduzione

Transcript

1 Differenza fra pagina web, sito e portale Le pagine web sono documenti di testo pubblicati sul Web, che comprendono collegamenti verso file grafici e verso altre pagine web. Una pagina web è costituita dall'insieme delle informazioni (testo e grafica) e dagli strumenti di navigazione (Iink, pulsanti, icone) visualizzabili entro una schermata. Solitamente il colore dei link attivi è blu mentre quello dei link visitati è porpora. Essendo questo lo standard è sottointeso che all'utente la navigazione risulterà più chiara ed immediata se si manterranno questi colori peraltro conosciuti. Un sito web è costituito da un certo numero di pagine web. Attivando un link ipertestuale, a partire da un documento presente in rete, otteniamo come risposta una pagina web, che può essere contenuta all'interno dello stesso sito, oppure appartenere ad un sito del tutto diverso, magari collocato fisicamente lontanissimo da quello che stavamo consultando. Se in un sito sono presenti collegamenti con altri siti, per evitare di perdere il visitatore, conviene fare in modo di caricare le informazioni all'interno di una finestra (frame), dando così la possibilità di consultare documenti interessanti presenti in siti diversi senza lasciare quello da cui si è partiti. La prima pagina di un sito web è la home page. Questa pagina, essendo la pagina introduttiva del sito, deve avere la funzione di sommario, spiegando ed illustrando brevemente al visitatore, come sono organizzati gli argomenti e i contenuti del sito, nonché fornendogli un quadro dei collegamenti e dei percorsi da compiere per trovare le informazioni desiderate. Un portale è un sito, luogo di comunicazione verticale tra comunità e soggetto e al tempo stesso anche orizzontale tra target di utenza. Oltre a contenere pagine di presentazione dell'azienda o dell'ente e dei prodotti offerti, il sito portale offre servizi interattivi, ovvero dei servizi per la "community" di riferimento, quindi forum di discussione, newsletter, bacheche. Un sito per ogni esigenza Prima di procedere con la realizzazione del sito vi dovete chiedere cosa desiderate ottenere e quali strumenti utilizzare. Il processo può essere diviso in quattro fasi fondamentali: progettazione costruzione test pubblicazione in rete Esiste inoltre una fase successiva che riguarda la manutenzione del sito, cioè l aggiornamento dei contenuti, l espansione, la verifica del corretto funzionamento. Ogni buon sito è frutto di una attenta organizzazione su carta: definite quindi in prima analisi quali saranno i livelli delle diverse categorie di argomenti, e quali saranno i percorsi e i collegamenti ipertestuali delle varie pagine che compongono il sito web. La più diffusa organizzazione delle pagine è in forma gerarchica (struttura ad albero): si parte da una home page da cui si passa ad un certo numero di sottosezioni, che a loro volta portano ad altre sottosezioni. Questo schema risulta facile da aggiornare e consente di definire con precisione i layout di pagina. Se però il sito ospita una raccolta di foto o un racconto si può progettare una struttura lineare: una pagina conduce alla successiva, che a sua volta porta alla pagina dopo, e così via. Secondo lo schema di struttura scelto, occorre quindi stabilire il layout delle pagine del sito, e decidere quali link inserire e dove inserirli all'interno delle pagine del sito: dalla struttura si definiscono le gerarchie degli argomenti delle pagine interne, i collegamenti ipertestuali e la grafica che caratterizzerà lo stile del sito. Ovviamente lo schema della struttura potrà essere rielaborato fintanto che il sito e le pagine che lo compongono non saranno ritenute funzionali rispetto agli obiettivi e alle aspettative iniziali. pag.1

2 Durante questa fase di analisi per la definizione dello schema di struttura del sito, non dimenticatevi alcune regole di buona progettazione: 1. la barra di navigazione non deve mancare: serve a dare un idea dei contenuti e aiuta durante l esplorazione del sito 2. in ogni pagina deve esserci un collegamento con la home page e al fondo un link che riporti in cima alla pagina 3. tutte le informazioni rilevanti devono essere raggruppate in cima 4. il sito deve essere aggiornato periodicamente: meglio prevedere una sezione di news 5. lasciate al navigatore la possibilità di contattarvi, indicando il vostro indirizzo di posta elettronica HTML Una volta definita la struttura del vostro sito e i layout delle pagine che lo compongono, passiamo ad analizzarne il codice di base, l'html (Hypertext Markup Language, linguaggio ipertestuale a marcatura). Il mio consiglio è quello di provare ad analizzare una pagina a vostra scelta, per consentirvi di comprendere in maniera dettagliata, come funzionano gli elementi che in essa sono contenuti. Cercate quindi una pagina che vi sembri adatta al vostro scopo, e iniziate ad osservarne gli elementi, visualizzandone il codice sorgente scegliendo dal menù "visualizza", l'opzione "visualizza codice sorgente" con Netscape, o "HTML" per gli utenti di le (Internet Explorer). Tale linguaggio contiene dei comandi testuali, racchiusi tra i simboli di maggiore e minore, non visibili a chi visita la pagina, ma solo al browser. E' quindi il navigatore che, leggendo il codice HTML, definisce la visualizzazione degli elementi contenuti nella pagina: testo, grafica, files multimediali e i comandi per collegare ogni pagina alle altre pagine e alle risorse di Internet. Lo scopo che ci siamo prefissati però non è quello di creare pagine web digitando HTML (cosa che si può fare con un qualsiasi word processor): esistono programmi che generano automaticamente il codice, facilitandovi il compito; ma avere un'idea delle regole base dell'html consentirà di intervenire direttamente sull' HTML, qualora si presentasse la necessità di modificare o di "pulire" parti del codice del documento da informazioni inutili che alcuni programmi creano (come per esempio Frontpage di Microsoft), nonché di comprendere meglio il funzionamento dei programmi utilizzati per realizzare pagine web. Programmi per lo realizzazione delle pagine web Fra i programmi più utilizzati per la creazione di pagine web troviamo: editor testuali: sono programmi che permettono modifiche dirette sul codice HTML puro, con la possibilità di vedere in anteprima il risultato. Questi programmi facilitano la scrittura del codice mettendo a disposizione dell'utente comandi attivabili con un semplice clic. Uno di questi è 1 st page 2000, facile ed immediato da utilizzare. Lo potete scaricare direttamente dalla rete senza nessun costo editor visuali: Frontpage di Microsoft e Dreamweaver di Macromedia sono fra i più utilizzati. Questi programmi fanno parte degli editor WYSIWYG, acronimo per "'What You See Is What You Get" ovvero quello che viene visualizzato sullo schermo corrisponde a quello che si vede caricando la pagina con il browser. In altre parole questi editor non visualizzano il codice HTML, a meno che non venga scelta l'apposita opzione di visualizzazione, ma esclusivamente gli oggetti, le immagini ed il testo delle vostre pagine. In questo modo non dovrete lavorare sul codice HTML, ma solo con gli elementi da inserire nella pagina, che verranno visualizzati come nel browser. Potrete spostare gli oggetti trascinandoli semplicemente con il mouse, sfruttando layout di pagina predefiniti, minimizzando così notevolmente i tempi di realizzazione Paint Shop Pro, Adobe Photoshop, CoreIDRAW, possono essere utilizzati per la grafica e per il trattamento delle immagini. Solitamente il Paint Shop Pro e il CorelDRAW sono utilizzati per le immagini piane, per le icone e i bottoni, nonché per ottenere ombreggiature ed effetti tridimensionali con il testo. Photoshop, invece, oltre a consentire l'acquisizione delle immagini attraverso lo scanner, consente di ritoccare le fotografie importate e di applicare filtri ed effetti particolari alle immagini in generale pag.2

3 Fireworks e Flash di Macromedia: il primo offre la possibilità di creare gif animate e di comprimere tutti i tipi di immagini; il secondo è in grado di creare animazioni per le pagine web su base vettoriale e quindi estremamente leggere da caricare. Flash viene spesso utilizzato per animazioni in splash page (pagine introduttive) oltre che per realizzare interi siti. L importanza della grafica L aspetto più complesso della creazione di un sito Web è l impostazione grafica. Non solo bisogna creare pagine accattivanti, ma anche facili e veloci da navigare. Non è cosa da poco, considerando che sul Web si comunica prevalentemente per immagini. Una delle fonti possibili per l'acquisizione di immagini da elaborare e ritoccare, è lo scanner. 1 Il primo passo per l'acquisizione di immagini attraverso lo scanner, è quello di impostare intorno ai 300/400 dpi (punti/pollice) l'opzione di scansione A questo punto l'immagine potrò essere ritoccata ed elaborata con un qualunque programma di grafica Perché sia possibile intervenire sull'immagine acquisita, è necessario convertire la stessa al metodo RGB (acronimo per Rosso/Verde/Blu), questo consentirà l'utilizzo di filtri ed effetti speciali, essendo il sistema utilizzato dalle schede video per definire il colore di ogni singolo punto Solo dopo aver ottenuto l'effetto desiderato, si possono modificare le dimensioni dell'immagine, a seconda dello spazio di inserimento disponibile all'interno della vostra pagina web. L'immagine andrò salvata in formato GIF o JPG prima di essere inserita nella pagina web. Solo dopo aver compiuto tutte le operazioni precedenti, l'immagine potrò essere compressa, abbassandone la risoluzione fino a 72 dpi (punti/pollice), valore più che sufficiente per una corretta visualizzazione sul monitor. Questa compressione permetterò di ottimizzare i tempi di caricamento delle pagine. Le immagini per il Web: vettoriali o bitmap Nel caso della grafica vettoriale, le immagini vengono create attraverso una combinazione di linee, curve e formule matematiche e la colorazione avviene attraverso la colorazione delle linee e delle aree chiuse. L'immagine risulta più definita e netta, estremamente leggera (in termini di memoria), ma molto meno particolareggiata rispetto ad un 1 immagine bitmap elaborata pixel per pixel. La grafica vettoriale si presta per i disegni semplici e per le forme piatte. La grafica bitmap o raster, invece, crea le Immagini usando punti colorati chiamati pixel, per cui la composizione avviene come un mosaico, e la memorizzazione avviene attraverso una sorta di database, basato su pixel e colori. La grafica bitmap riesce quindi a rendere le immagini di qualità maggiore, poiché conserva un elevato numero di colori. La grafica bitmap è adatta per rappresentare la realtà, quindi per le fotografie e per la visualizzazione su video delle immagini rendendole più leggere. Ricordate che l'uso di immagini vettoriali sul Web è limitato a casi particolari, come ad esempio animazioni Flash. Fra le immagini bitmap, i formati GIF e JPG sono quelli utilizzati per il Web. Vediamone di seguito le differenze: GIF (Graphics Interchange Format) è un formato adatto alle immagini che presentano grandi blocchi di colori a tinta unita, come disegni, grafici e icone. I file GIF sono limitati a 256 colori (8 bit di colore). GIF INTERLACCIATE: per gli utenti che accedono al Web attraverso connessioni lente, il trasferimento di elementi grafici di grandi dimensioni non risulta conveniente. Per migliorare questa situazione è stato introdotto il formato GIF interlacciato. I file interlacciati appaiono in modo incrementale: ogni passo migliora la risoluzione dell'immagine. Questo consente di far intuire all'utente il risultato finale e, nel caso non fosse interessato, consente di procedere prima 1 Dovete evitare di scaricare immagini da altri siti o di scansionare dai cataloghi di agenzie fotografiche: potreste incorrere in forti sanzioni per lesione dei diritti di autore pag.3

4 che l'immagine venga completamente caricata, con un semplice clic del mouse. GIF TRASPARENTI: un file GIF permette la creazione di elementi grafici bitmap che hanno un colore impostato sulla trasparenza. Questi elementi, collocati sullo sfondo, consentono di visualizzare il colore o l'immagine sottostante. In questo modo è possibile creare complesse relazioni tra testo e immagine (o tra immagine e immagine) senza che sia necessario trattare l'intera pagina come un unico grande elemento grafico. GIF ANIMATE: per realizzare GIF animate occorre creare una serie di immagini che, visualizzate una dopo l'altra come fotogrammi di un film, formino una scena animata. A differenza di altri formati di animazione, quello GIF non richiede, per funzionare, l'installazione di programmi aggiuntivi (plug-in come shockwave o quicktime), necessari, invece, per visualizzare altri tipi di animazioni. Esistono in rete molti siti dove trovare GIF animate di ogni genere. JPEG (formato proposto dal comitato Joint Photographic Experts Group) è un formato adatto a comprimere immagini complesse, con molte sfumature di colori, come le fotografie. I file JPEG sono immagini a 24 bit o milioni di colori. In base alla scelta dell'impostazione della qualità (Photoshop per esempio ne offre quattro: bassa, media, alta e massima), è possibile ridurre le dimensioni di un'immagine. Dato che la risoluzione massima dello schermo del computer è di 72 punti per pollice (dpi), si possono ottenere facilmente immagini a tutto schermo, senza superare i 50 Kilobyte. 2 Una cosa da non dimenticare mai nel caso di immagini, è l'inserimento del testo alternativo, ovvero testo che appare quando il mouse passa su un'immagine e che prende il posto dell'immagine se questa non viene scaricata. La struttura della pagina Uno dei sistemi più semplici e diffusi per definire i campi in cui inserire gli elementi che compongono le pagine web, è l'utilizzo di tabelle invisibili, che attraverso lo definizione di aree fisse all'interno della pagina, forniscano una struttura in cui collocare testo e grafica. Sempre su carta potete definire quante tabelle occorrono per impostare lo vostra pagina, e quante celle le tabelle dovranno contenere. Potrete quindi definire, allo stesso modo, gli spazi fra gli elementi e preparare i contenuti e lo grafica in base alla struttura scelta. Le dimensioni di una tabella possono essere fissate in pixel oltre che in percentuale, e quindi rese immodificabili rispetto al ridimensionamento della finestra. Questo garantisce una corretta lettura della pagina indipendentemente dal browser utilizzato. Un altro sistema per impaginare è rappresentato dall'utilizzo di frame 3 : si divide la pagina stessa in finestre multiple, dove ogni finestra (frame) contiene dati unici e separati Un frame può essere, per esempio, impostato per lo scorrimento della pagina, mentre un altro rimane fisso. Per quanto riguarda lo scorrimento, è possibile impostare le barre in modo che siano visibili indipendentemente dalla dimensione del contenuto del frame, oppure soltanto quando il contesto si espande oltre la dimensione della finestra. I frame consentono ai collegamenti ipertestuali di modificare soltanto una parte della pagina e rappresentano lo strumento ideale per separare i pannelli di controllo della navigazione dal contenuto della pagina. Anche le dimensioni di un frame,come per le tabelle, possono essere impostate in base ad un numero di pixel o in percentuale, rispetto alla finestra del browser, oppure possono occupare tutto lo spazio rimanente. I frame consentono di visualizzare il contenuto di una pagina con diverse modalità, grazie all'utilizzo delle ancore (target). Queste permettono di aprire le pagine in nuove finestre o in specifici frame. I target sono associati direttamente ai collegamenti ipertestuali e controllano in che punto della struttura del frame viene visualizzato il file in arrivo. 2 L algoritmo di compressione è distruttivo, nel senso che prevede delle perdite di informazioni che si traducono in un abbassamento della qualità. Inoltre la compressione è irreversibile. 3 I frames non sono supportati da tutti i browsers pag.4

5 Un altro sistema per impaginare gli elementi grafici e testuali all'interno delle vostre pagine web è l'utilizzo dei CSS ("Cascading Stile Sheets") o fogli di stile a cascata. I CSS sono un utile strumento per posizionare gli elementi all'interno delle pagine web. Gli elementi vengono infatti collocati in base a scostamenti stabiliti, misurati in pixel o in percentuale, rispetto ai bordi della finestra. I CSS offrono la possibilità di comporre gli elementi su vari strati consentendone la sovrapposizione. L'utilizzo dei fogli di stile ha dei limiti, imposti dall'inadeguatezza di molti browser utilizzati. Un trucco per facilitare l'impaginazione degli elementi dello vostro pagina web è quello di fare uso di file GIF a pixel singolo. Questi file vi consentiranno di gestire l'allineamento degli elementi all'interno delle celle delle tabelle presenti nella vostra pagina senza appesantirla poiché, si tratta di immagini piccolissime. Queste immagini GIF sono invisibili, o perché impostate su un colore trasparente o perché impostate sullo stesso colore dello sfondo della pagina. Potrete utilizzare questi spaziatori a pixel singolo in vari punti della vostra pagina per collocare le immagini o per allargare lo spazio al centro delle tabelle. Se volete provare a creare un file GIF a pixel singolo per controllare meglio l'impaginazione degli elementi grafici e di testo all'interno della vostra pagina web, non dovete fare altro che aprire un nuovo disegno con un programma di grafica qualunque e impostare le dimensioni dell'immagine ad un pixel. Una volta individuato il colore dello sfondo della vostra pagina, riempite l'immagine dello stesso colore o rendetela trasparente nel caso in cui vogliate utilizzare questo spaziatore in più pagine, anche con sfondi di diverso colore. Lo stesso effetto potete ottenerlo creando file GIF a linee di pixel orizzontali o verticali modificando il valore di larghezza e/o altezza. Si tenga presente che utilizzare più volte la stessa immagine in una pagina non significa ricaricarla più volte, quindi l'utilizzo ripetuto della stessa immagine a pixel singolo non appesantirà la pagina. Il colore può costituire un efficace strumento per indicare lo relazione tra le varie pagine di un sito; esso può essere utilizzato per diversificare i diversi livelli di informazione delle pagine del sito: il colore della home page o delle pagine generali può essere diverso da quello delle pagine interne. Quindi ogni colore corrisponde ad un diverso livello di specificità dell'informazione. Il testo Il testo deve essere chiaro e leggibile, ben strutturati i contenuti, i paragrafi ordinati e brevi; più le linee di testo sono lunghe, più difficile è la lettura. Non utilizzate quindi una colonna più larga di 450 pixel circa, ovvero le dimensioni che normalmente utilizziamo con un word processor. Abbondate con gli spazi vuoti, poiché aiutano la lettura e fanno risaltare il testo e le immagini rendendo la pagina più leggera. Conviene prevedere sempre un doppio spazio tra un paragrafo e l'altro, servirà a rendere più chiara ed immediata la lettura del testo. Inoltre, cercate di scrivere blocchi di testo di lunghezza uniforme. Impaginate preferibilmente a sinistra, ma non giustificate il testo poiché questo introduce spesso buchi al suo interno. Preferite sempre font che diano la sicurezza di essere letti da qualsiasi browser, per esempio: Arial, Times New Roman, Verdana, Tahoma, Impact, Comic, Courier. Ricordatevi, inoltre, che se il navigatore non trova il font specificato lo sostituirà con uno di default e l'effetto sarà sicuramente diverso da quello desiderato. Non utilizzare troppi font nella stessa pagina perché potreste confondere il visitatore. La cosa migliore è di sceglierne due: uno per titoli ed uno per il corpo del testo. Usate il grassetto o il colore quando dovete evidenziare qualcosa piuttosto che il corsivo, poiché le sue curve ne rendono difficile la lettura sullo schermo. Non usate le parole sottolineate perché si confondono con i link e il lettore potrebbe cliccarci sopra rimanendone deluso. Evitate, se possibile, di scrivere parole o frasi in MAIUSCOLO all'interno del corpo testo, poiché in Internet equivale ad "URLARE". Ottima tecnica di impaginazione è l'utilizzo degli elenchi puntati poiché, oltre ad essere facili da scorrere, fanno risaltare subito al nostro sguardo le cose più importanti. Inoltre chiariscono la sequenza e la relazione tra le idee o i fatti esposti nel testo, semplificando l'esposizione e la lettura di un argomento complesso. Anche il titolo e i sottotitoli sono importantissimi perché costituiscono già da soli un livello di lettura, dal momento che fanno capire immediatamente il contenuto di una pagina. pag.5

6 Interattività Se volete che il vostro sito abbia successo non dimenticatevi di aggiornarlo: non intervenite solo con l'aggiornamento dei contenuti ma ricordatevi di verificare anche i collegamenti agli altri siti. Prestate quindi attenzione ai link forniti e alla veridicità delle informazioni in essi contenute, altrimenti le vostre pagine perderanno di credibilità. Non dimenticate di prevedere servizi interattivi all'interno del vostro sito, ovvero delle pagine che consentano al visitatore di esprimere un parere e di dare suggerimenti sugli argomenti presentati. Questi "feedback" diventeranno per voi un ottimo strumento per verificare i contenuti delle vostre pagine e l'utilità delle informazioni in esse presenti. Per fare questo un sistema molto semplice è quello di rendere attivo il link al vostro programma di posta elettronica, permettendo al visitatore di scrivervi direttamente. Non dimenticate che un sito non dovrebbe risultare "chiuso", ovvero tenete presente che i vostri visitatori si aspettano di utilizzare le vostre pagine come veicolo di ulteriori informazioni. Pensate quindi ad una serie di link utili che approfondiscano e rendano interessanti gli argomenti trattati nel vostro sito. Sommario Differenza fra pagina web, sito e portale...1 Un sito per ogni esigenza...1 HTML...2 Programmi per lo realizzazione delle pagine web...2 L importanza della grafica...3 Le immagini per il Web: vettoriali o bitmap...3 La struttura della pagina...4 Il testo...5 Interattività...6 Sommario...6 pag.6