aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Tecniche di progettazione del sito

  Fase 4b: mappa - ipertesto
 
 

L'ipertesto, nella natura stessa del Web
L'organizzazione ipertestuale delle informazioni ha trovato la sua vasta diffusione con la nascita del World Wide Web, anche se risale a un tempo precedente. Un sistema di organizzazione ipertestuale si fonda su due elementi principali: i blocchi d'informazioni da collegare e i collegamenti che li uniscono. Questi collegamenti sono diretti da un elemento all'altro e non seguono necessariamente un percorso logico o lineare. Sono molto utili per richiamare all'interno di una pagina contributi periferici o aggiuntivi, che magari si trovano su un sito completamente diverso.

È facile confondersi nella navigazione ipertestuale e per tale motivo è raro che la si usi come modello primario della struttura di un sito. Serve invece per aggiungere flessibilità e ricchezza all'interno della gerarchia e per collegare direttamente rami diversi di una struttura gerarchica consentendo di saltare dall'uno all'altro senza attraversare il percorso gerarchico in salita e in discesa.

L'unione della struttura gerarchica e di quella ipertestuale danno nuove forme di organizzazione di un sito, come quella a rete dove tutte le pagine sono collegate direttamente alla home page e a loro volta direttamente collegate tra loro (tipica di siti molto piccoli), oppure la struttura a catalogo, tipica dei negozi online, dove ogni prodotto dispone di una scheda di approfondimento e si può passare direttamente alla pagina del carrello oppure a quella della "cassa" da qualsiasi punto del sito.

Struttura ipertestuale "pura"
La navigazione ipertestuale identifica due blocchi d'informazione da collegare e il tipo di collegamento che le unisce. Non c'è struttura predefinita ed è possibile saltare liberamente da una parte all'altra e da un sito all'altro, come si vede in figura senza limiti. Costituisce l'essenza del Web, ma all'interno di un sito va usato con parsimonia perché tende facilmente a confondere il navigatore. In questo caso la si è utilizzata unicamente per collegare siti e risorse esterne, le quali a loro volta collegano ad altre risorse.


Clicca per ingrandire

Ipertesto unito a gerarchia
Il collegamento ipertestuale (hyperlink) va utilizzato con parsimonia e funziona al meglio quando abbinato alla gerarchia. Nell'esempio, saltiamo direttamente da un ramo della gerarchia (Editor HTML gratuiti) al ramo adiacente (Ambienti di sviluppo) senza dover risalire e ridiscendere l'albero gerarchico.


Clicca per ingrandire

L'organizzazione a "rete"
Quando in un sito oppure in una sezione del sito ciascuna pagina è direttamente collegata alla pagina pricipale da cui dipende e a a ciascuna altra pagina del gruppo/sito abbiamo un'organazzione a rete. Si tratta della combinazione tra una gerarchia molto semplice (un livello se consideriamo il singolo gruppo) e il collegamento ipertestuale. Si differenzia dal cluster perché qui tutte le pagine hanno collegamenti diretti con tutte le altre e non c'è un percorso di navigazione definito.


Clicca per ingrandire

Strutture lineari
Dal mondo dei CD-ROM e della formazione ereditiamo un sistema di navigazione molto semplice, detto lineare, dove le pagine non sono collegate da una gerarchia bensì da una sequenza, la quale può variare lungo il percorso, ma solo per imboccare una diramazione piuttosto che un'altra, oppure per arretrare nei passi già compiuti. Ricalca il metodo di lettura di una rivista piuttosto che di un libro, consentendo, alla pari del libro e della rivista, di balzare a un altro capitolo oppure alle appendici e all'indice.

È comune nei corsi online e serve a guidare lo studente lungo percorsi che gli forniscono informazioni in modo graduale e gl'impediscono di perdersi nella complessità dell'interfaccia. La libertà di movimento, naturalmente, è minima in questo caso.

Viene usata anche nella parte finale degli acquisti online per regolare lo svolgersi della transazione: controllo del carrello, compilazione delle informazioni di spedizione, immissione dei dati di pagamento, validazione degli stessi e accredito/addebito con conferma dell'acquisto avvenuto.

Diagramma lineare
Il più semplice e vincolante tra gli schemi di organizzazione di un sito: le pagine sono collegate secondo una rigida sequenza. E' utile nella realizzazione di corsi online e nella gestione delle fasi finali di una transazione di acquisto.


Clicca per ingrandire

Tutti i documenti relativi a questo articolo:
Introduzione
Fase 1: raccolta d'informazioni sugli scopi del sito
Fase 2: analisi della concorrenza
Fase 3: organizzazione delle informazioni
Fase 4: costruzione della mappa - gerarchia
Fase 4b: mappa - ipertesto
Fase 4c: mappa - struttura lineare
Fase 5: strumenti di navigazione - URL e cronologia
Fase 5b: strumenti di navigazione - preferiti
Fase 5c: strumenti di navigazione - tasti dedicati e altro
Fase 5d: regole di navigazione
Fase 5e: sistemi di navigazione
Fase 5f: elementi di navigazione
Fase 5g: sistemi di labeling

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
1. Che cosa fa un Webmaster
2. Gli strumenti di lavoro
  1. Editor orientati al testo
  2. Editor visuali semplificati
  3. Ambienti di sviluppo integrati
3. Le altre figure con cui opera
4. Le risorse online
5. Tecniche di progettazione
del sito
  1. Raccolta d'informazioni sul sito
  2. Analisi della concorrenza
  3. Organizzazione delle informazioni
  4. Costruzione della mappa - gerarchia
  4b. Mappa- ipertesto
  4c. Mappa - struttura lineare
  5. Strumenti di navigazione - URL e cronologia
  5b. Strumenti di navigazione
- preferiti
  5c. Strumenti di navigazione
- tasti dedicati e altro
  5d. Regole di navigazione
  5e. Sistemi di navigazione
  5f. Elementi di navigazione
  5g. Sistemi di labeling
6. Definizioni dei termini comuni
7. Esercizi
  1. Riepilogo dei concetti della lezione
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits