Organizzare le risorse

Negli incontri precedenti abbiamo presentato in forme didattiche le principali caratteristiche del linguaggio HTML, via via alternandole con le necessarie informazioni teoriche: le esercitazioni venivano proposte e svolte con lo scopo di evidenziare la corretta sintassi dei tag e gli eventuali loro attributi: ciascuna esercitazione era da considerarsi fine a se stessa e, appunto, orientata all'acquisizione dello specifico marcatore.

In questo incontro intendiamo invece percorrere modalità più articolate e realistiche, modalità che sfruttando le conoscenze teorico/pratiche acquisite e assumendone di nuove, simulino la concreta realizzazione di un ipertesto. Vedremo quindi come, partendo da alcuni semplici testi, si possa in base ad un progetto stendere quella rete di collegamenti che trasforma un testo in un ipertesto.

Obiettivi e risorse disponibili

L'esercitazione che vogliamo sviluppare intende presentare le

• biografie (brevi) di due artisti, Sandro Botticelli e Marc Chagall, artisti ovviamente appartenuti ad epoche ben diverse e indipendenti.
• A ciascun artista vogliamo inoltre associare delle schede che permettano la consultazione di alcune delle loro opere (8 per la precisione).

L'ipertesto che intendiamo comporre si rivolge quindi a persone interessate ad un sintetico profilo biografico dei due artisti e alla consultazione delle rispettive opere: in sostanza una minuscola guida biografico-artistica ai due pittori.

Le risorse disponibili sono le seguenti:

• due file, decisamente brevi, scritti con Word e che contengono le biografie dei due artisti. I rispettivi nomi sono:
  biografia-botticelli.doc e biografia-chagall.doc.

Disponiamo inoltre di un certo numero (8+8) di

• immagini delle loro opere, alcune ottenute tramite la scansione da libri d'Arte ed altre reperite nel Web in siti museali.

Il formato dei file delle immagini è, ovviamente, il formato JPG (o JPEG) in quanto altri formati non permetterebbero di ottenere una riproduzione di qualità accettabile delle opere. I file possiedono i nomi

A ciascuna immagine, per i motivi che esporremo, è associata un'altra piccola immagine, ottenuta riducendo l'originale con un normale programma di grafica. Queste verranno usate come icone: in corrispondenza alle immagini, i nomi dei file-icone sono:

Vanno infine aggiunte poche altre immagini con funzioni di logo, di presentazione e di sfondo.

Progetto della struttura

Poiché i due artisti sono indipendenti la struttura che potremo scegliere per il nostro ipertesto è anche quella più facile e logica, ossia una struttura dove le diverse pagine sono disposte in modo gerarchico o a menu (fig. 1).

Fig. 1: Organizzazione gerarchica di pagine.

In un'organizzazione gerarchica, è in effetti facile per un lettore conoscere la propria posizione nella struttura; le scelte sono

• spostarsi verso l'alto per conoscere informazioni più generali o
• verso il basso per informazioni più specifiche.

Un salto diretto a un livello ancora superiore consente al lettore di saltare direttamente e rapidamente a una posizione nota. Nelle gerarchie, la pagina iniziale (anche detta home page) deve fornire le informazioni di natura più generale e definire i collegamenti principali con le pagine che si trovano a un livello più profondo della gerarchia.

1. Nel nostro caso converrà pertanto creare una pagina di questo tipo che indirizzi ai due artisti.
2. Volendo inoltre distinguere la biografia dalle schede contenenti le immagini delle opere converrà, sempre per ciascun artista, generare due altre pagine in ciascuna delle quali inseriremo dei link separati alla biografia e alle opere.
3. Le schede daranno quindi accesso alle immagini delle singole opere.

In sostanza stiamo definendo la struttura rappresentata nella figura seguente.

Fig. 2: Struttura dell'esercitazione.

Evidentemente ogni livello della struttura avrà una interfaccia consistente con le esigenze di consultazione (o di "navigazione", come si suol dire) e cioè dovranno esserci dei link che permettano di muoversi verso l'alto, il basso e il ritorno alla pagina di livello più elevato che contiene, indicizzate, le risorse dell'artista.

Creazione di un primo gruppo di file

Il primo file che risulta necessario è quello relativo alla pagina iniziale: questo dovrà contenere solo il nome dei due artisti e un titolo che nel nostro caso è del tutto generico. Entrati quindi in Word,

• immettiamo il titolo Piccola guida a due artisti e quindi
• ciascuno in una propria riga, Sandro Botticelli e Marc Chagall.
• Centriamo il testo di queste tre righe e
• aumentiamo a 16 punti le dimensioni del testo dei nomi dei due artisti.
• Salviamo infine il file (che appare come nella fig. 3) con il nome index.doc

Fig. 3: Il file index.doc.

Analogamente ci servono i file botticelli.doc e chagall.doc, file che costituiranno il secondo livello e conterranno i collegamenti alle risorse disponibili di ciascun artista.

Il contenuto di questi file è molto semplice: un'intestazione con il nome dell'artista quindi, separata da alcune righe vuote il testo che richiama la biografia e le schede (che per brevità supponiamo essere due): infine un richiamo per ritornare alla pagina iniziale (home page). In sostanza il file botticelli.doc apparirà come la figura sottostante.

Fig. 4: Il file botticelli.doc.

Del tutto analogo apparirà il file chagall.doc. Anche questi altri due file vanno salvati su disco.

Inserimento di link entro Word

Prima di iniziare la traduzione nel formato HTML di tutti i documenti generati da Word, vediamo come sia possibile inserire dei link già nei file di Word.

Apriamo pertanto il file biografia-botticelli.doc: il testo contiene un'appendice relativa al clima del periodo nel quale Botticelli completa l'illustrazione della Divina Commedia. Nel testo della biografia converrà quindi inserire un collegamento a questa appendice là dove si tratta del medesimo argomento.

Inseriamo per prima la destinazione che, in Word o in programmi analoghi, viene detta segnalibro. Pertanto,

• portato il cursore all'inizio dell'appendice (davanti alla data 1496-99),
• selezioniamo la voce di menu Inserisci e quindi
• ancora un clic sulla penultima voce del menu, Segnalibro...
• Nella prima cella della finestra che appare, inseriamo il nome del segnalibro, in questo caso commedia (non ci va il simbolo #): infine,
• clic sul tasto di Aggiungi.

Ora va definita l'origine del link. Portato quindi il cursore in corrispondenza del paragrafo contenente Divina Commedia (alcune righe più su),

• evidenziamo questi due termini.
• Si selezioni la voce Inserisci del menu principale seguita da
• Collegamento ipertestuale...
• Nella successiva finestra dobbiamo posizionare il cursore nella seconda cella, quella relativa a Indirizzo riportato nel file: basta a tal fine fare un clic entro tale cella. Per quanto già esposto comprendiamo che, in tal modo, Word obbliga a distinguere gli indirizzi (URL) interni al file attualmente aperto, da quelli esterni.
• Un altro clic sul pulsante Sfoglia ci permette di evidenziare le destinazioni precedentemente definite nel file: essendocene solo una, commedia, questa appare già evidenziata: si tratta quindi solo di
• accettarla con un altro clic su OK.
• Un ultimo clic su OK pone fine alla definizione dell'origine e ci fa ritornare in modalità di editazione del testo.

Il testo Divina Commedia è ora sottolineato, in colore e se si passa sopra il puntatore del mouse, questo si trasforma in una mano con l'indice puntato: il testo mostra in tal modo la sua natura di collegamento a qualche tipo di destinazione.
In definitiva abbiamo scoperto che, nello stesso Word

• è possibile disporre delle caratteristiche tipiche dell'ipertesto, indipendentemente dal linguaggio HTML.

Se dovessimo quindi distribuire ad un gruppo ristretto di persone in grado di leggere i file nel formato di Word, questa possibilità non va di certo trascurata: non è ovviamente percorribile se si intende pubblicare nel Web.

Prima di iniziare la traduzione di tutti i file Word aggiungiamo alla fine delle due biografie (quindi va aperto anche biografia-chagall.doc) un riferimento alla pagina iniziale. Pertanto, dopo aver premuto 3 o 4 volte il tasto di invio immettere il testo Ritorna all'indice e quindi centrarlo tra i margini attuali. Infine salvare tutti i file attualmente aperti in Word.