2 - Scrivere una pagina

 

indice La pagina è una funzione

Aprendo il file gioco.js, sempre nella cartella Dati dentro la cartella Base (o nella sua copia di lavoro Prova) si può vedere che esso contiene tra l'altro, nella sezione "Pagine del racconto": 
function Introduzione() {
  titolo("Ciao")
  testo("Io sono un racconto-gioco.")
  continua(Pag1)
}
In Idra tutte le pagine vanno scritte come funzioni, devono cioè iniziare con la riga: 
function NomeDellaPagina() {
incluse la parola function, la coppia di parentesi tonde e la parentesi graffa aperta; la descrizione della pagina deve terminare con una singola parentesi graffa chiusa: 
}
Dimenticare queste regole è probabilmente la principale causa di errori durante la scrittura. Formalmente si tratta infatti di un programma JavaScript, che deve seguire precise regole per essere accettato dal browser.

Una nota importante per i programatori (chi legge per la prima volta può ignorarla): benché la pagina sia tecnicamente una funzione, non la si deve mai chiamare direttamente. Vedremo nei capitoli 3 e 6 le apposite funzioni vai() e mostra() che Idra mette a disposizione per cambiare pagina.
 

indice Nomi di pagina

Il nome della pagina deve iniziare con una lettera maiuscola; si tratta di una convenzione introdotta per evitare possibili problemi (se per caso quel nome fosse già usato all'interno del meccanismo di gioco).
I caratteri successivi devono essere lettere, numeri o il segno di sottolineato ( _ ), altrimenti si riceverà una segnalazione di errore, non sempre immediatamente comprensibile.

Esempi di nomi di pagina validi:

  PrimaPagina
  A2D2
  PRIMO_PILONE
  Z

Esempi di nomi di pagina non validi:

  pag3   (inizia con una minuscola)
  128K   (inizia con un numero)
  Pag.3  (contiene un punto)
  Di qui (contiene uno spazio)
 

indice Il titolo

La prima riga contenuta nella funzione che descrive la pagina, cioè subito dopo la parentesi graffa aperta, fa apparire il titolo "Ciao" in grassetto e in carattere più grande in testa alla pagina: 
titolo("Ciao")
Tecnicamente anche questa è una chiamata di funzione: fa infatti eseguire la funzione titolo() fornita da Idra; essa provvede a mostrare il titolo con uno stile predefinito. Idra offre varie funzioni, dettagliate nella guida riassuntiva dell'appendice A, che sono tutte scritte con caratteri minuscoli per distinguerle da quelle delle pagine o da altre che l'autore può aggiungere.

La funzione che descrive la pagina, Introduzione() nel nostro caso, può quindi a sua volta chiamare le varie funzioni offerte dal meccanismo di Idra, come appunto titolo(), testo() o continua(). Le parentesi qui nel manuale indicano che si tratta del nome di una funzione.

Alla funzione titolo() viene passata la stringa "Ciao"; una stringa non è altro che una scritta racchiusa tra virgolette ( " ) o tra singoli apici ( ' ), che non vengono mostrati nella pagina.
 

indice Il testo

La seconda riga mostra il testo vero e proprio della pagina: 
testo("Io sono un racconto-gioco.")
Il testo può essere lungo quanto si desidera: esso verrà automaticamente impaginato dal browser sulla base della larghezza disponibile, come in ogni pagina Web. Scrivendo ad esempio su un'unica riga: 
function Caverna() {
  testo("Nel fondo di quella caverna, dove nessun raggio di luce era mai penetrato, vi era una pozza d'acqua assolutamente immobile.")
  continua(Pozza)
}
il risultato sarà:


Nel fondo di quella caverna, dove nessun raggio di luce era mai penetrato, vi era una pozza d'acqua assolutamente immobile.

Notiamo che, non avendo indicato alcun titolo(), esso non viene mostrato. Molti editor di testo consentono di lavorare comodamente su linee lunghe, ma lo stesso risultato si può comunque ottenere chiamando più volte la funzione testo(), come in questo esempio: 

function Caverna() {
  testo("Nel fondo di quella caverna, ")
  testo("dove nessun raggio di luce era mai penetrato, ")
  testo("vi era una pozza d'acqua assolutamente immobile.")
  continua(Pozza)
}
Questa pagina viene presentata in modo assolutamente identico a quella sopra mostrata: il testo non va a capo a fine riga. Gli spazi alla fine delle prime due stringhe sono necessari, altrimenti esse apparirebbero 'incollate' a quelle seguenti.
 

indice Gli a capo

Per inserire un ritorno a capo bisogna usare esplicitamente l'apposito comando (tag) HTML, cioè <br>, inclusi i simboli di minore ( < ) e maggiore ( > ) che lo delimitano, mentre per fare uno stacco tra due paragrafi si usa <p>; per esempio, scrivendo: 
function Disastro() {
  testo("Il pilone cede.<br>Il ponte crolla.<p>Ti fermi appena in tempo.")
  continua(Finale)
}
si otterrà un risultato simile a questo:


Il pilone cede.
Il ponte crolla.

Ti fermi appena in tempo.

Anche in questo caso è del tutto indifferente che il testo della pagina sia scritto in un'unica funzione testo() o ripartito in più chiamate successive.

Un ultimo richiamo di HTML: il comando <p>, anche se ripetuto, inserisce sempre e comunque un singolo stacco; per ottenere più righe vuote si può usare &nbsp;<br> per ciascuna riga, in questo modo: 

function Pag27() {
  testo("Aspetta un attimo...<br>")
  testo("&nbsp;<br>&nbsp;<br>")
  testo("Ah, eccolo qui!")
  continua(Pag28)
}
L'effetto dei due &nbsp;<br> è appunto quello di inserire due ulteriori a capo forzati (quindi due righe vuote) nella pagina:


Aspetta un attimo...
 
 
Ah, eccolo qui!

Dato che la pagina verrà comunque reimpaginata dal browser del lettore, il suo aspetto potrà essere diverso da quello mostrato dal proprio browser; in particolare, le righe troppo lunghe potranno essere spezzate per andare a capo in qualsiasi punto, oltre a quelli forzati con <br>.
 

indice Lettere accentate

Alcuni sistemi, per esempio Windows, codificano gran parte delle lettere accentate con lo standard ISO 8859-1, che in genere è interpretato correttamente da molti browser anche su computer di tipo diverso o con altri sistemi operativi, almeno in molti Paesi europei.

Tuttavia, per garantire la leggibilità in ogni condizione, sia del racconto-gioco che del file gioco.js che lo descrive, può essere preferibile usare le apposite descrizioni (entità) HTML per le lettere accentate, ad esempio:

  &egrave;   è
  &eacute;   é
  &agrave;   à
  &igrave;   ì
  &ograve;   ò
  &ugrave;   ù

Lo stesso vale per le maiuscole accentate, ad esempio:

  &Egrave;   È

e soprattutto per vari simboli e caratteri speciali tra cui specialmente:

  &amp;      &
  &lt;       <
  &gt;       >
  &copy;     ©

Le descrizioni speciali per le virgolette ( " ) e per l'apostrofo o apice ( ' ) possono essere utili per inserire questi caratteri in una stringa delimitata, appunto, da virgolette o da singoli apici. Il carattere che inizia e termina una stringa non può infatti essere contenuto nella stringa stessa:

  &quot;     "
  &#39;      '

È tuttavia più comodo usare un altro sistema: precedere le virgolette o l'apice con una barra inversa ( \ ) per indicare che essi non terminano la stringa ma vanno riprodotti tali e quali; al posto delle descrizioni speciali (entità) sopra mostrate si può quindi scrivere semplicemente:

  \"         "
  \'         '

Ad esempio, nel caso sotto illustrato la stringa è delimitata da virgolette, quindi le virgolette al suo interno vanno precedute da una barra inversa, mentre l'apice (apostrofo) si può scrivere normalmente: 

function Saluti() {
  testo("L'autista esclam&ograve;: \"Ehil&agrave;, Beppe!\"")
  continua(Risposta)
}
Il risultato sarà:


L'autista esclamò: "Ehilà, Beppe!"

Alcuni editor consentono di convertire manualmente o automaticamente i caratteri accentati o speciali nelle corrispondenti entità HTML, risparmiando lavoro ed evitando errori.

È bene tuttavia non impiegare editor troppo orientati al Web, perché un racconto scritto per Idra è tecnicamente un programma JavaScript, non una pagina Web: quest'ultima viene creata dal programma al momento opportuno.
 

indice Scelte per il lettore

La caratteristica fondamentale di un racconto a scelte è appunto quella di offrire più alternative al lettore; nel nostro caso esse appaiono sotto forma di link, cioè parole evidenziate come i rimandi delle pagine Web, ad esempio in questo modo.

Idra offre due tipi di scelte: i rinvii all'interno del testo e le scelte da menu separate dal testo vero e proprio, poste ciascuna su una riga a sé stante e precedute da un pallino, come il "Continua" degli esempi visti finora.

In entrambi i casi l'effetto del clic su una scelta puo essere fisso o variabile in base alla situazione, cioè alle precedenti scelte compiute o ad altri fattori, come ad esempio il tiro di un dado. In questo capitolo vediamo il caso più semplice, quello delle scelte il cui effetto è definito una volta per tutte.
 

indice Rinvii nel testo

Per aggiungere un rinvio nel testo si usa la funzione rinvio(), in questo modo: 
function Pagina7() {
  testo("Non ci vedi un accidente. Sei indeciso se ")
  rinvio("proseguire", Pagina34)
  testo(" o ")
  rinvio("tornare sui tuoi passi", Pagina27)
  testo(", abbandonando l'esplorazione.")
}
La pagina di nome Pagina7 verrà presentata più o meno così:


Non ci vedi un accidente. Sei indeciso se proseguire o tornare sui tuoi passi, abbandonando l'esplorazione.
 

In questo caso il lettore avrà due possibilità: o fare clic sul link "proseguire" oppure fare clic sul link "tornare sui tuoi passi". Nel primo caso verrà mostrata la Pagina34, nel secondo la Pagina27, ciascuna descritta nella funzione dal nome corrispondente.

Notiamo che nella pagina sopra mostrata non è presente la scelta "Continua", che comunque si potrebbe aggiungere usando la funzione continua() come negli esempi precedenti, anche se in questo caso non avrebbe molto senso dato che le scelte nel testo sono già sufficienti.
 

indice Menu di scelte

La funzione scelta() serve per inserire delle scelte ben evidenziate, ciasuna su una propria riga. Riprendendo l'esempio appena visto, lo si potrebbe organizzare diversamente: 
function Pagina7() {
  testo("Non ci vedi un accidente. Sei indeciso sul da farsi.")
  scelta("Prosegui", Pagina34)
  scelta("Torni sui tuoi passi", Pagina27)
}
In questo caso la pagina avrà un aspetto di questo genere:


Non ci vedi un accidente. Sei indeciso sul da farsi.

Dal punto di vista del funzionamento non cambia nulla: un clic sul primo link va a Pagina34 mentre un clic sul secondo link va a Pagina27, esattamente come prima.

Come vedremo nel prossimo capitolo, le scelte di questo tipo possono essere mostrate o meno a seconda della situazione corrente, ottenendo così dei menu che offrono diverse possibilità al lettore in base allo svolgersi della vicenda.
 

indice Pagine mancanti

Scrivendo rinvii e scelte nel contenuto di una pagina, capita spesso di fare riferimento a un'altra pagina che non è ancora stata scritta, come in questo esempio: 
scelta("Consulti la bussola", Bussola)
Non esistendo ancora la pagina citata, o più esattamente la funzione Bussola() che la descrive, si riceverà una segnalazione di errore e il tutto non funzionerà correttamente; per evitare questo inconveniente conviene creare una pagina vuota, che ha il compito di 'segnare il posto' in modo che il browser non protesti: 
function Bussola() { }
La parentesi graffa chiusa, come si vede, può anche stare sulla stessa riga per risparmiare spazio. Più avanti nella scrittura, naturalmente, la pagina Bussola() verrà riempita in modo da farle mostrare il contenuto desiderato.
 

indice La pagina di Informazioni

Una pagina speciale è quella che viene richiamata se il lettore fa clic sul link Informazioni sul gioco; si tratta di una speciale pagina temporanea (vedi capitolo 6) che nel file gioco.js è descritta dalla funzione Info(), modificando la quale si può mostrare ciò che si vuole: 
function Info() {
  testo("&nbsp;<p>")
  titolo("Informazioni")
  testo("<center>")
  testo("Racconto di Pinco Pallino") //Sostituire con il proprio testo
  testo("<p>")
  rinvio("Continua", "ridisegna()")
  testo("</center>")
}
Il meccanismo di funzionamento della pagina Info() è un po' più complesso delle altre ed è illustrato nel citato capitolo 6; non occorre comunque conoscerlo per usarla: basta modificare la riga indicata scrivendovi le informazioni desiderate, occupando naturalmente più righe se necessario.

Per cambiare il colore di fondo di questa pagina speciale si deve invece agire sulla funzione Informazioni() che la chiama, modificando la descrizione del colore (o sostituendola con un riferimento a un file contenente un'immagine) secondo le regole illustrate nel capitolo 4 a proposito del colore e dell'eventuale immagine di fondo: 

function Informazioni() {
  mostra(Info, 'bgcolor="#ccccff"')
}
Infine, nella pagina Info non si devono aggiungere rinvii o scelte, almeno non prima di aver capito a fondo il meccanismo delle pagine speciali e del ridisegno. È meglio, per ora, limitarsi a modificare il testo per inserirvi le proprie informazioni.

 


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