4 - Estetica e HTML

 

indice Decorare la pagina

Per rendere la pagina più attraente si possono usare alcune delle possibilità offerte dal linguaggio HTML, che il browser provvederà a interpretare. È ad esempio possibile variare la dimensione o il colore dei caratteri, introdurre righe di separazione o immagini, e così via.

Non si deve però scrivere del codice HTML direttamente nella funzione che descrive la pagina, ma lo si deve produrre impiegando la funzione testo(). Dato che ciò può causare confusione, vediamo in questo capitolo alcuni esempi.

Per altri tipi di decorazione o impaginazione, come il disegno di fondo, l'intestazione e il piè di pagina, Idra fornisce apposite funzioni per semplificare il lavoro dell'autore.

Infine, si può personalizzare l'aspetto d'insieme della finestra stessa e delle sue suddivisioni (frame) agendo sui file HTML che la producono.
 

indice Caratteri grandi e piccoli

Ecco un esempio di uso dell'istruzione (tag) <font> del linguaggio HTML per cambiare la dimensione dei caratteri: 
function Nevaio() {
  titolo("Neve fresca!")
  testo("Meglio stare in ")
  testo('<font size="-2">silenzio</font>') //più piccolo
  testo(" per evitare una ")
  testo('<font size="+1">valanga</font>')   //più grande
  testo(".")
  continua(Ghiacciaio)
}
La pagina descritta da questa funzione apparirà più o meno così:


Neve fresca!

Meglio stare in silenzio per evitare una valanga.

Da notare l'uso degli apici singoli ( ' ) al posto delle virgolette ( " ) per le stringhe che a loro volta contengono virgolette, come "+1". Volendo si possono usare apici singoli per tutte le stringhe passate alla funzione testo() (cioè messe tra le sue parentesi) per non confondersi.
 

indice Comandi separati e inclusi

Nell'esempio precedente, la riga che mostra la parola "silenzio" con un carattere (font) più piccolo è composta da tre parti, che si potrebbero anche produrre separatamente con altrettante chiamate della funzione testo(): 
testo('<font size="-2">')
testo("silenzio")
testo("</font>")
La prima riga riduce la dimensione del testo, la seconda mostra la parola "silenzio" e la terza rimette tutto a posto com'era prima, tornando alla dimensione precedente dei caratteri; da notare, anche qui, l'uso degli apici per la stringa che contiene virgolette (la prima).

Questa suddivisione non è per nulla obbligatoria, ma serve solo per leggibilità; si può anche fare il contrario, cioè unire testo normale e testo modificato (con le istruzioni HTML) in una stessa stringa: 

testo('Parla <font size="+2">forte</font>, non ti sento!')
Il risultato sarà comunque identico a quello ottenibile con chiamate separate alla funzione testo():


Parla forte, non ti sento!
 
 

indice Esempi di comandi HTML

Le istruzioni HTML per la formattazione del testo si trovano facilmente sui libri o nel Web, ad esempio nella comoda guida riassuntiva The bare bones guide to HTML di Kevin Werbach, facilmente reperibile in molti siti oltre che su werbach.com/barebones/. Ecco alcune istruzioni (tag) molto diffuse:

  <b>        (grassetto)
  </b>       (fine grassetto)
  <i>        (corsivo)
  </i>       (fine corsivo)
  <tt>       (spaziatura costante)
  </tt>      (fine spaziatura costante)
  <center>   (centrato)
  </center>  (fine centratura)
  <hr>       (separatore a riga orizzontale)

Gli esperti di HTML potranno impiegare anche istruzioni più complesse, come le tavole (<table>) per suddividere la pagina in più colonne o riquadri distinti, come nell'esempio del capitolo 6, facendo però attenzione a non impiegare istruzioni non-standard riconosciute solo da uno specifico browser (es. Internet Explorer o Netscape).

Sono invece da evitare i link, cioè le istruzioni HTML che iniziano con <a href> e che consentono al lettore di fare clic sul testo evidenziato: essi interferirebbero infatti col meccanismo usato da Idra per il cambio di pagina, rendendo impossibile il proseguimento della lettura o uscendo del tutto da Idra.
 

indice Testo colorato

L'istruzione <font color> consente di colorare i caratteri a piacere, ad esempio in questo modo: 
testo('Se vedi un semaforo <font color="#ff0000">rosso</font>, frena.')
il cui effetto è:


Se vedi un semaforo rosso, frena.
 

Il colore è definito in RGB (rosso, verde, blu) con sei cifre esadecimali, due per ciascun colore. In pratica, per garantire la massima compatibilità con diversi browser, sistemi operativi e impostazioni video (specie nel caso di 256 colori), conviene usare solo questi valori per ciascuna coppia di cifre:

  00  (colore assente)
  33  
  66  
  99  
  cc  
  ff  (colore al massimo)

Quindi #ff0000 significa: il massimo di rosso, niente verde e niente blu. Ecco qualche esempio di colori validi, tra i numerosi possibili: 

testo('<font color="#ff0000">Rosso</font>, ')
testo('<font color="#00ff00">Verde</font>, ')
testo('<font color="#0000ff">Blu</font>, ')
testo('<font color="#ffff00">Giallo = rosso + verde</font>, ')
testo('<font color="#ff00ff">Magenta = rosso + blu</font>, ')
testo('<font color="#00ffff">Ciano = verde + blu</font>, ')
testo('<font color="#660000">Rosso scuro</font>, ')
testo('<font color="#666600">Ocra = giallo scuro</font>, ')
testo('<font color="#999999">Grigio medio</font>, ')
testo('<font color="#000000">Nero</font>.')
e il loro effetto (togliamo qui il fondino giallo per non fare confusione):


Rosso, Verde, Blu, Giallo = rosso + verde, Magenta = rosso + blu, Ciano = verde + blu, Rosso scuro, Ocra = giallo scuro, Grigio medio, Nero.
 

Come si può facilmente vedere, non tutti i colori sono ben leggibili su fondo bianco; tra breve vedremo come modificare il colore di fondo della pagina.
 

indice Immagini nelle pagine

Si può illustrare il testo con immagini facendo uso dell'istruzione HTML <img> che consente di indicare il nome di un file contenente l'immagine, file che dovrà stare nella cartella (directory) Dati, cioè la stessa di gioco.js; ad esempio: 
titolo("Per Giove!")
testo('<center><img src="Giove.jpg"></center>')
continua(Saturno)
In questo caso, avendo specificato l'opzione <center>, l'immagine sarà centrata rispetto ai bordi della pagina:


Per Giove!
 
Giove

È preferibile usare immagini JPEG (di solito indicate con estensione .jpg), oppure PNG (.png), tenendo presente per queste ultime che alcune versioni precedenti dei browser possono richidere un plug-in (modulo aggiuntivo) per mostrarle.

Le immagini GIF (.gif) vanno invece evitate in quanto il relativo algoritmo di compressione è coperto da brevetto ed è quindi in contrasto con lo spirito FSF-GPL (ossia "open source") della distribuzione di Idra. A maggior ragione vanno evitati i BMP di Windows o altri formati non disponibili su tutti i computer.

È bene inoltre aggiungere a ciascuna immagine una scritta alternativa che verrà mostrata nel caso che l'immagine stessa non possa essere mostrata, ad esempio per effetto di una scelta nelle preferenze del browser; questa scritta può anche consentire la lettura ai non vedenti che impiegano un sintetizzatore vocale.

Per introdurre la scritta si aggiunge un alt="scritta" nell'istruzione HTML che crea l'immagine; l'esempio precedente diventa quindi: 

titolo("Per Giove!")
testo('<center><img src="Giove.jpg" alt="Giove"></center>')
continua(Saturno)
Con alcuni browser e sistemi operativi, la scritta indicata con alt= verrà mostrata anche portando il puntatore del mouse sopra l'immagine e lasciandolo fermo per qualche istante.
 

indice Immagini come scelte

Se un'immagine viene creata all'interno del testo passato a una funzione rinvio() o scelta(), essa diverrà attiva: vi si potrà cioè fare clic per eseguire la scelta corrispondente. Si può ad esempio scrivere: 
titolo("Pilota automatico")
testo("Preferisci andare su un satellite ben caldo come ")
rinvio('<img src="Io.jpg" alt="Io">', Io)
testo(" oppure su uno gelido come ")
rinvio('<img src="Ganimede.jpg" alt="Ganimede">', Ganimede)
testo(" o semplicemente tornare a ")
rinvio("casa", Terra)
testo("?")
Avendo usato rinvio() anziché scelta(), le immagini verranno inserite all'interno del testo, in questo modo:


Pilota automatico

Preferisci andare su un satellite ben caldo come Io oppure su uno gelido come Ganimede o semplicemente tornare a casa?
 

Usando le tecniche di programmazione illustrate nel capitolo 5, le immagini raffigurate si possono anche cambiare a seconda del valore delle variabili di gioco, come accade con le normali scelte.

Normalmente le immagini attive sono circondate da una cornice rettangolare più o meno colorata; se quest'ultima risultasse fastidiosa la si può eliminare aggiungendo border=0 nell'istruzione che le crea, in questo modo: 

rinvio('<img src="Ganimede.jpg" alt="Ganimede" border=0>', Ganimede)
Un'immagine così definita non verrà in alcun modo evidenziata quando il puntatore del mouse vi passa sopra, ma quest'ultimo cambierà forma (tipicamente in una manina) per inidcare che un clic in quel punto avrebbe un effetto.
 

indice Colore di fondo

Per impostare il colore di fondo della pagina occorre usare un sistema particolare: si tratta infatti di un'operazione da eseguirsi prima di iniziare a disegnare la pagina, e che quindi non può essere fatta con la funzione testo() come le altre sopra illustrate.

Si tratta di aggiungere una nuova funzione OpzioniPagina() all'inizio del file gioco.js, ad esempio dopo la funzione Inizia() già presente, in questo modo: 

// Opzioni della pagina: sfondo ciano pallido

function OpzioniPagina(pag) {
  return 'bgcolor="#ccffff"'
}
Il colore desiderato è ovviamente quello definito dalle sei cifre, come nel caso già visto del colore di carattere; il resto può essere copiato pari pari (la riga che inizia con // è, come sempre, un semplice commento). Il risultato sarà che tutte le pagine avranno uno sfondo come questo:


Questa pagina ha uno sfondo ciano pallido.
 

Per definire un colore di fondo diverso a seconda della pagina presentata (o delle condizioni di gioco) occorre un minimo di programmazione JavaScript; l'argomento è trattato più avanti nel manuale.

Un'ultima nota: i browser possono essere impostati in modo da non mostrare il colore di fondo richiesto; in tali condizioni alcune scritte potrebbero non essere leggibili, come ad esempio dei caratteri gialli previsti per un fondo nero. In questo caso è bene almeno indicare il possibile problema nella documentazione del racconto-gioco.
 

indice Immagine di fondo

La funzione OpzioniPagina ha un uso più generale: essa consente infatti di indicare qualsiasi opzione HTML che sarebbe valida in un'istruzione <body>, ad esempio:

  text="#ccff00"      (colore del testo per tutta la pagina)
  link="#00ff66"      (colore dei link, cioè delle scelte)
  background="b.jpg"  (immagine da usare come sfondo)

L'immagine indicata in quest'ultimo esempio verrà usata per tassellare la pagina, ripetendola come in un pavimento a piastrelle; se ad esempio nella directory Dati si trova un file grafico cielo.jpg contenente questa immagine (qui mostrata su fondo grigio per evidenziarla):


Sfondo
 

e nel file gioco.js vi è questa funzione: 

function OpzioniPagina(pag) {
  return 'background="cielo.jpg"'
}
le pagine avranno questo aspetto:


Crisi a bordo

Suona un insistente segnale d'allarme: gli strumenti della cabina indicano che la pressione dell'ossigeno sta scendendo senza apparente motivo.

Sei a 4,723 anni luce dalla più vicina stazione stellare che ti potrebbe inviare soccorsi: riparare il guasto al più presto è la tua unica possibilità di sopravvivenza.
 

Il colore dell'immagine è volutamente molto pallido: ciò è consigliabile per non disturbare la lettura del testo contenuto nelle pagine; l'effetto va sempre valutato osservando la pagina a pieno schermo e non, come in questo manuale, circondata da spazio bianco.

Come notato più sopra, è consigliabile usare immagini JPEG o PNG evitando le GIF o, peggio ancora, formati specifici di un certo sistema operativo.
 

indice Opzioni multiple

Nella funzione OpzioniPagina() si possono indicare anche più opzioni, separate da spazi, ad esempio: 
function OpzioniPagina(pag) {
  return 'background="cielo.jpg" link="#00ff66"'
}
In questo caso sono definiti sia l'immagine di fondo che il colore dei link, ossia quello delle scelte disponibili al giocatore (inclusi i rinvii incorporati nel testo).
 

indice Intestazione e piè di pagina

Altre due funzioni opzionali consentono di mostrare del testo (o, in generale, di eseguire istruzioni HTML) all'inizio e alla fine di ciascuna pagina del racconto; si tratta rispettivamente delle funzioni Intestazione() e PiePagina(). Come sempre maiuscole e minuscole vanno riportate esattamente, altrimenti le funzioni non sono riconosciute da Idra.

Già nel file gioco.js fornito nella cartella Dati dentro la cartella Base vi è una semplice funzione Intestazione(); essa ha il compito di lasciare un po' di spazio prima dell'inizio del testo: 

// All'inizio di ogni pagina: fa una riga di stacco

function Intestazione(pag) {
  testo("<br>")
}
Questa funzione può essere modificata per aggiungere, ad esempio, un'immagine decorativa in cima a ciascuna pagina; anche in questo caso con l'uso della programmazione JavaScript si possono ottenere intestazioni differenti, in base alla specifica pagina o al contenuto delle variabili di gioco.

La funzione reciproca PiePagina() viene eseguita, se esiste, al termine di ciascuna pagina; può essere usata ad esempio per mostrare informazioni sull'autore del racconto (anche se queste ultime trovano normalmnte posto nell'apposita pagina Info(), come illustrato nel capitolo 2): 

// Alla fine di ogni pagina: separatore e informazioni

function PiePagina(pag) {
  testo("<hr>")
  testo('<font size="-2">Tempesta, un racconto-gioco di Gigi Bombarda</font>')
}
Le pagine avrebbero dunque un aspetto di questo genere:


Fuoco a volontà

I quarantadue cannoni del galeone vomitano bordate di fuoco sul vascello nemico, che per un istante rimane invisible, coperto da una spessa nube di fumo.

Tempesta, un racconto-gioco di Gigi Bombarda

 

In questo caso il testo cambia a seconda della pagina, ma il piè di pagina rimane sempre uguale; un esempio di impiego utile del piè di pagina consiste nell'elenco degli oggetti posseduti dal lettore, o comunque di altre informazioni utili, con un minimo di programmazione in JavaScript.
 

indice Frame e HTML

La finestra che si presenta al lettore è normalmente suddivisa in due parti, costituite da altrettanti frame:


 
 
 
Frame di controllo

 
 
 
 
 
 
Frame di lettura

 
 
 

La suddivisione è definita nel file Racconto.html, nella linea: 

<frameset cols="95,*" border=0>
in cui il numero 95 indica la larghezza in pixel del frame di controllo, dove appaiono i comandi (ricomincia, salva, riprendi, ecc.); la si può modificare a piacere, ricordando comunque che alcuni lettori potrebbero impiegare una finestra più piccola di quella usata dall'autore; è bene quindi non allargare troppo quest'area.

Nello stesso file Racconto.html si possono aggiungere altri frame per motivi estetici o, più banalmente, modificare il titolo della finestra cambiando il contenuto della riga: 

<title>Un racconto-gioco</title>
Il frame di lettura è completamente controllato da Idra, come illustrato in precedenza. Il colore del frame di controllo si può invece cambiare nel relativo file ctrl.html, modificando il valore di bgcolor nella riga: 
<body bgcolor="#cc9966" link="#003300" vlink="#003300" onLoad="gioca()">
I colori di link e di vlink si riferiscono rispettivamente ai link normali e a quelli visitati, cioè già usati in precedenza; anch'essi sono naturalmente modificabili, in modo da adattarli al colore di fondo impostato. È meglio impostare in entrambi lo stesso valore, per evitare sgradevoli effetti estetici.

Sempre in ctrl.html si possono cambiare le scritte, ad esempio per modificare il riferimento a "gioco" nel link che richiama la pagina di informazioni: 

<a href="javascript:parent.ctrl.focus();Informazioni()">Informazioni sul gioco</a><br>&nbsp<br>
In sostanza, con un po' di esperienza di HTML l'aspetto di un lavoro creato con Idra è ampiamente personalizzabile.

 


 «--  Precedente 1 2 3 4 5 6 7 A B Indice Successivo  --»