Una favola per la reteDigerito l'HTML ed acquisita un pOi di confidenza con JavaScript, ci siamo

avventurati nella realizzazione di un prodotto ipermediale per la rete.

Nello specifico, come dice il titolo, si tratta di una favola (Bianca neve e

l'Aritmetica!) ristrutturata in maniera che le scene principali si colleghino in

qualche maniera con alcuni momenti didattici.

Piu' in generale, piaccia o meno il soggetto, è comunque il raggiungimento

dello scopo prefissoci -realizzare un prodotto ipermediale per il Web!- che

ci pare giusto evidenziare. Invitandovi pertanto a fare "un giro" su C&Vweb

n. 10 (dove troverete già in linea la versione demo della favola) in questo

articolo cercheremo di analizzare la serie di risvolti tecnici che hanno

caratterizzato la fase realizzativa del prodotto.

C dfBruno Rosati)

Biancaneve e l'Aritmetica: è questo il ti-tolo imposto alla fatica estiva che il sot-toscritto, grazie pure al contributo delWebmaster Marco Tau che ringraziopubblicamente per la preziosa supervi-sione, è riuscito a compiere.Nel prodotto, pensato per la rete, maovviamente giocabile anche in locale, cisono molte cose interessanti da eviden-ziare. A partire dall'uso massiccio di varicostrutti JavaScript (counter, proceduredi caricamento casuale, controlli su"click-event", ecc.) per arrivare alle "tro-vate" poste alla base di ogni pagina digioco. Lo scopo di tutto ciò è quello diarrivare a dimostrare quanto è possibilerealizzare d'ipermediale per il Web.Vediamo insieme su queste pagine (esu quelle telematiche di C&Vweb n. 10)cosa siamo stati capaci di realizzare.

La struttura principaleL'idea di base era quella di prendere lafavola, dividerla per scene (scritte, reci-tate vocalmente come estratte, previoliberatoria, da qualchefilm) ed inserire, tra una scena e l'altra,

292

dei moduli di gioco.I moduli di gioco a loro volta, potevanoessere strettamente attinenti ai conte-nuti della scena (com'è nei moduli "Adomanda rispondi!", l'Anagramma e ilParoliere con i quali, saltando suC&Vweb n. 10, potrete interagire) oppu-re esulare completamente. In quest'ulti-mo caso, idea nell'idea, si èpensato di realizzare un gioco aritmeti-co. Una sorta di espediente didatticocon il quale "interrogare" il concorrenteper verificare le sue capacità dicalcolo (le quattro operazioni servite intutte le salse I) ed il livello di deduzionelogica applicata alla risoluzione di alcunisemplici problemi (tipo:AI mercato la mamma ha comprato ...).Letta, vista o sentita ogni singola scena(nel demo ne abbiamo inserite cinque)parte la pagina di gioco. Per ciascun gio-co (ne abbiamo messi a punto ben sei)si è cercato di realizzare almeno tre va-rianti, in modo che la giocabilità della fa-vola interattiva risultasse più varia e pro-lungata nel tempo. In ogni gioco biso-gna dare risposte (digitandole diretta-mente oppure c1iccando su di una seriedi bottoni). Le risposte giuste devono

dare dei punti, quelle sbagliate delle pe-nalità (tentativi).Da questa rapida elencazione dei criteristabiliti, deriva immediatamente l'interalista delle cose che si è dovuto fare, siaa livello di codice che a livello di creati-vità multimediale.Dal punto di vista del codice ciò che an-dava realizzato, era una serie di controlliin grado di gestire:- un totalizzatore di punti (risposte giu-ste) e di tentativi (risposte sbagliate);- il caricamento casuale delle variantipreviste (tre) per ciascun modulo di gio-co ideato;- la verifica delle risposte date (via mou-se o digitate in campi prefissati).Questo, ovviamente, in generale. Nelparticolare sono state realizzate almenouna dozzina tra funzioni, variabili ed ar-ray per le specificità portate dall'ideazio-ne di ogni singolo gioco.A sua volta, dal punto di vista multime-dia le, lo sviluppo della favola ha richie-sto la creazione di:-una serie di GIF animate (alcune pura-mente estetiche, altre in funzione delgioco e quindi con controlli più particola-reggiati sulle temporizzazioni delle sin-

MCmicrocomputer n. 177 - ottobre 1997

I

l'8 L..!....J 12 1 4 '3

---!...J 15 ~ 7 ~ 5 Il11 17 -D 2 9 ~

Letlw6loo_ •••_1II'''a_~'W.'Vn'idoa, elle ••• a ••••••1lI."'" dtI __ •

lòIldo a f4tw. _pr.~ •••••• -

del pt6 pltcol.0......-.,•••O*t dwor.liIltl

cativi multimediali dall'altro, vediamo al-lora un po' più nei particolari cosa e co-me si è dovuto realizzare. Lo spazio, co-me al solito tiranno, non ci consenteche rapidi excursus.

L'organizzazionedelle pagineL'impostazione data ai criteri interattividella favola ha subito richiesto d'orga-nizzare le pagine su due distinti frame.In tal modo ci siamo ritrovati a poter di-sporre di una prima cornice costante-mente dedicata alla zona dei dati (icampi di testo relativi all'eventuale in-serimento del nome, il contatempo el'aggiornamento di punti e tentativi) eduna seconda cornice, più ampia dellaprima, a disposizione delle scene o deigiochi. Tale impostazione è schematiz-zata in figura 2.Nel particolare, la struttura così derivataviene gestita attraversola page principa-le (identificata come framing.htm) nellaquale sono settati tutti i parametri chegoverneranno le pagine, Per avere un'i-dea sul tipo di controlli applicati allastruttura delle pagine è sufficiente os-servare la tabella 1, In questa è possibi-le rilevare la presenza di tutti i TAG indi-spensabili per stabilire il settaggio delnumero di righe/colonne e per l'asse-gnazione delle cornici.Nello specifico la cornice superiore,quella pari al 24% e denominata "main-game", è stata assegnata al caricamen-to stabile della pagina principale, la

Figura 2 - La struttu-ra a cornici della pagi-na di gioco. Nel fra-me superiore i dativariabili (nome, punti,tentativi); in quello in-feriore le varie situa-zioni di gioco.

Figura 3 - /I modulo digioco dell'Anagramma.

.:.

Figura l -L 'home pagedi '8iancaneve e l'Arit-metica" presente all'indi-rizzo telematica diC&Vweb n. IO.

.,ok. n.di •• !Jiwul

GIUSTO o.. _LilTO?1

GIUSTO •• S&toOLllTo?1

GIUSTO o, S&toOLllTO?!

Juj,

l'Anagramma!

SII.()T'()

INC'RIPPf'RARUZZ()

gole immagini che le compongono);- dei brani MIDI (tagliati nella giusta du-rata richiesta oppure mandati in loop. Inquest'ultimo caso facendo attenzionead istruire la page ai rispettivi TAG usatida Explorer e Navigator;-delle acquisizioni audio (in WAV-True-Speech) ed altre video (dei single-frameda convertire poi in GIF);-una serie di titoli, logo ed altri clip divaria natura.Cosa si è utilizzato per realizzare tuttociò?Per quanto riguara il codice è parso su-bito naturale fare ricorso al JavaScript,con il quale (tra variabili, funzioni, gesto-ri di eventi mouse/tastiera, ecc.) si è in-tegrata la scarsa dinamicità dell'HTML.Per quel che concerne il supporto mul-timediale, oltre al-l'irrinunciabile PaintShop Pro, si è ricor-si ai servigi del Mi-crosoft GIF Anima-tor per quanto ri-guarda il montaggiodelle GIF animate;al Microsoft MusicProducer per elabo-rare i brani MIDI edal semplice, maprezioso Sound Re-corder di Win95(l'unico, che io sap-pia, che consentedi acquisire ed edi-tare il Wav-True-Speech).Codice JavaScriptda un lato ed appli-

MCmicrocomputer n, 177 - ottobre 1997 293

(La versione completa del frame principale FRAMING.htm è scaricabile da C&Vweb n.lO)

<frameset rows="24%. 76%" cols="l*" border="4" onLoad="tipo_browser()"><frame src="maingame.htm" name="maingame" scrolling="no" toolbar=O menubar=O border="O"frameborder="no"><frame src="doman038.htm" name="domande" scrolling="auto" border="O" frameborder="no">

Tra queste evidenzia-mo ovviamente quelleche in tale parte di arti-colo ci interessano:var punti=O,tentati-vi=O;A tali variabili, a secon-da di come è struttura-to ogni singolo gioco,vi fanno continuo rife-rimento le funzioni (es:"function Nome_Fun-zione(){" ), le condizioni(if. .. ) ed i gestori dieventi (OnClick, On-MouseOver, ecc.) chelo JavaScript pone co-me struttura di con-trollo ad ogni specificasituazione di ogni spe-

scena e di gioco) che compongono lafavola.Per assegnare tali posizioni s'è fatto ri-corso all'usuale TAG:<FRAME SRC="nome_deUile" na-me= "nome_della_corn ice">comprensivo dei controlli su margini,possibilità di scrolling e presenza o me-no delle barre del menu e di stato.Sempre comprese tra i TAG "<SCRIPT>... </SCRIPT>", nell'head dello stesso fi-le principale "framing.htm", sono pre-senti le istruzioni JavaScript relative alladefinizione delle variabili globali (checontrolleranno il numero dei punti e deitentativi), la funzione per il caricamentorandom delle pagine dei giochi e la fun-zione che individua il tipo di browser uti-lizzato dall'utente.Nel caso specifico di quest'ultima (vedisempre la tabella n. 1) appare evidenteche la nostra funzione si limita alla soladistinzione tra il Netscape Communica-tor 4.x e il Microsoft Internet Explorer4.0x per Windows 95. Va comunqueevidenziato subito il fatto che "Bianca-neve e l'Aritmetica" funziona perfetta-mente con tutte le versioni di Navigator(a partire dalla 3.xx) e di Explorer (a par-tire dalla versione 3.01).Fatta questa doverosa introduzione,scendiamo un po' più in profondità an-dando finalmente a vedere il funziona-mento generale delle funzioni di con-trollo del gioco.La prima domanda che ci poniamo è sucome funziona il controllo per i'asse-gnazione dei punti. Ovvero com'è ope-rata la distinzione tra risposte giuste erisposte sbagliate?Osserviamo di nuovo la tabella n. 1 (re-lativa al file principale framing.htm).Proprio come prima serie di istruzioniJavaScript abbiamo definito delle sem-plici variabili.

I«DI ~-I ••••IWl MUICIlI

llWììD9 "

Quella inferiore, d'ampiezza pari al76%, è stata a sua volta assegnata allavisualizzazione di tutte le altre pagine (di

LI!.m&mm, al mercato. ha compulto 2 Kg eh arance Il. 3 Kg di.mde, spendendo 1tl.tutto 8.300 hnS. un Kg dt uance costa 2C((l bre, quanto sono cost,ta 3 Kg di mel.?

Costo 12lm r 12UnI:o•••. ··1 a-••..? I _1:o?1

Costo 18300 t 1400:1

••• s--I a-••..? I e-_ ......I

5 I l. (') l' (')

Struttura della tabella di gioco

INCRIPPI

l/funzione che cambia le "domande"function procedi (livello) {var tempOI=O;var temp02="";

l/livello O (dal bottone VAI!) :domanOl-03if (livello==O) {

tempOl=Math.floor(Math.random()*3)+l;temp02="domanO"+tempOl+" ,htm";return temp02; }

Figura 5 . Terza variabiledella parte 'didattica'della favola interattiva èquesto momento arit·metico incentrato sullarisoluzione di alcuni·problemini". Come ap·pare evidente, oltre aidati ed ai campi dove di·gitare le proprie rispo·ste, c'è una serie di bot·toni di controllo. Cficcar·ci sopra costa sempreun tentativo, ma non ab·bandona mai il 'piccologiocatore'!

l/definizione variabili globalivar punti=O,tentativi=O;

TABELLA 1(Script estratti dal file principale)

Figura 4 . La strutturaschematizzata posta'dietro' la tabella delgioco de L'Anagram·=:.:.-om: ma. Per avere un im·

••••••••••••• _ mediato riscontro delle

% funzionalità di ognil'A' controllo è bene osser·

l.o.- •••_ .•.••.•••__ . n.~~~ .._.~.......... vare contemporanea·_ ••..--..__ _ ~......, mente anche la tabella

___ r- GllSTO •. _SMGlIllTO?1 ,,:,! __n_. _2. ...J

....::... r- GllSlo •... SMGlIllTO?1 n::.~PSP4.12 __r- GllSIO •... SMGlIlllo?1 •••••••

T ~~l=:C:::::=;]-._ •••• __ ._ •• --....-: __ .rlnce.-.-- - - ..--.pu6_ -

<INPUT TYPe-"button" NAME· •••.inuncta.• VAlUE-'1ijnunciot";onCllck·"op.doInando.locatlon.reploce(top.procOdl(nl">

"maingame.htm", appunto dedicata allavisualizzazione della serie dei campi dicontrollo.

294 MCmicrocomputer n. 177 - ottobre 1997

_____________ ,(Wl

Figura 7 - Abbiamo acquisito l'AVI in "full-frame"di una scena del film. Ora ne estrarremo i foto-grammi più significativi e li faremo diventare GIFanimate da incastonare, via Paint5hop Pro, all'in-terno di un riquadro statico ..

GY M•••k In: GJJ Mari< Out:

I:B:§] [.;.J~J~••J I ~IClI2iJ47/501 ,INS ,P= iV'deo

TiV,dEdll - INTR02 AVI (Frame 47) IIII~EJ

Se queste effettivamente corrispondo-no verrà incrementato (top.tentativi++;)ed assegnato(top. mai ngame .docu ment. score. tentati-

trollo relativo al primo anagramma (nellatabella n. 2 corrisponde all'istruzione"d") l'evento, cioè il click, lancerà (on-Click="Risposta l O") il controllo di quan-to scritto nel campo. Il controllo è asse-gnato alla funzione denominata "Rispo-stalO" (che, sempre nella tabella n. 2,corrisponde all'insieme delle istruzioni"a").Tale funzione verifica se, nel campo ditesto costituito dall'istruzione "c", il valo-re digitato (cioè il "value') corrispondealla parola esatta.A tale compito, in questo caso, vi assol-ve una semplice condizione IF, cheistruita dov'è posizionato il value dacontrollare (la posizione viene specifica-ta segnalando i parametri document,nome del FORM e nome dell'INPUTTYPE) va a vedere se la parola è uguale(==) a quella corretta ("pisolo").

Figura 6 - Un modello .••• __ S""",(da valutare ancora se r ...•••_ cIoi bo.cbo.rl!urope

preferire a quello at-tuale] relativo al mo-dulo di gioco "A do-manda ... rispondi'". In questo caso la domanda comporterebbe il "checking" di più risposte. Forse verràpreferito al precedente.

cifico gioco.Esemplifichiamo andando ad osservaresia la forma estetica (Figura - 3) che gli"estratti' dal codice operativo (tabella n.2) del gioco L'Anagramma.Com'è possibile dedurre sia osservandola schermata che il codice stesso, talegioco basa essenzialmente sulla solu-zione di tre distinti anagrammi. Tali so-luzioni vanno digitate nei relativi campidi testo posti subito alla destra deglianagrammi (stilizzati come GIF da Paint-Shop Pro). Accanto a ciascun campo èpoi posizionato il relativo bottone dicontrollo "Giusto o ... Sbagliato?". Nelladinamica del gioco, una volta che si èdigitata la soluzione di un anagramma,si può cliccare sul relativo bottone dicontrollo per vedere se la risposta è giu-sta oppure errata.Premendo ad esempio il bottone di con-

TABELLA 2(Script estratti dalle funzioni di controllo dell'ANAGRAMMA)a) funzione che verifica se la Prima Risposta (pisolo) è giusta o sbagliata

function Rispostal () (if(document.Terzogioco.anagOl.value=="pisolo"){

window. alert ("OK, risposta esatta!");top.tentativi++;top.maingame.document.score.tentativi.value=top.tentativi;

else (window.alert("No, la risposta è sbagliata!");top.tentativi+2;top.maingame.document.score. tentativi.value=top. tentati vi; }}

b) funzione di controllo sull'esattezza dei tre anagrammi (pisolo, azzurro, principe)function Valid_Anagl() (

if(document.Terzogioco.anagOl.value=="pisolo") (if(document.Terzogioco.anag02.value=="azzurro") (

if(document.Terzogioco.anag03.value=="principe"){window.alert("OK, risposta esatta: prendi 3 punti! ");top.punti=top.punti+3;top.maingame.document.score.punti.value=top.punti;top.domande.location.replace(top.procedi(7));else (window.alert("Oh no! Risposta sbagliata: hai sprecato 3 tentativi!");top. tentativi=top. tentativi+3;top.maingame.document.score.tentativi.value=top.tentativi; }}}}

c) Primo Campo di scrittura delle parole (relativo a "pisolo")<INPUT TYPE="text" NAME="anagOJ." VALUE="" SIZE="lO" >d) Bottone di controllo sul singolo campo ("GIUSTO o ...SBAGLIATO?")<INPUT TYPE="button" NAME="giusto_sbagliatol" VALUE="GIUSTO o ... SBAGLIATO?"; onClick="Rispostal()">e) Bottone di controllo su tutti i campi ("Ho Vinto?")<INPUT TYPE="button" NAME="risposta" VALUE="Ho Vinto?"; onClick="Valid_Anagl() ;">f) Bottone di "salvataggio" per uscire dal gioco<INPUT TYPE="button" NAME="uscita" VALUE="Rinuncio! "; onClick="top.domande.location.replace(top.proce-di (7)) ">

(La versione completa del frame principale FRAMING.htm è scaricabile da C&Vweb n.lO)

MCmicrocomputer n. 177 - ottobre 1997 295

Quelle che andavano realizzate eranosia GIF di pura estetica (Iogo, titoli stiliz-zati, clip d'abbellimento, ecc.) che più

Le GIF animate

le due variabili.Ad esempio, se (IF) il livello invocato èpari a zero, verrà istruita un'istruzioneche valorizza la variabile temp01 comesegue:temp01 =Math.floor(Math.ran-domO*3)+ 1;Se, al contrario, il livello invocato è paria 1, l'istruzione valorizzerà la variabilesommandovi un valore tre volte (cioè 3numeri di pagine) superiore:temp01 =Math.floor(Math.ran-domO*3)+4;In ciascuna di queste due circostanzeesemplificative verranno ricostruite leURL delle pagine assegnate alla variabi-le temp02.Nel primo caso (livello zero) l'operazio-ne generale(temp02="domanO"+temp01 +".htm"; )darà come risultato doman001.htm (op-pure doman002/doman003) .Nel secondo caso (livello 1) darà invececome risultato: doman004.htm (oppuredoman005/doman006),Andando a denominare con tale succes-sione cronologica tutte le pagine che sirealizzano ed assegnando un valore cre-scente per ogni livello della funzione"procedi", si riesce a realizzare una strut-tura a ricerca casuale ogni tre, specifi-che pagine.Ovviamente, aumentando il numerodelle pagine alternative (per dare cioèpiù "vivibilità" al gioco in questione) biso-gnerà aumentare anche il fattore "X" dainserire nell'operazione:Math. floor(Math, randomO *X).Benché ancora in fase di "Iimaggio", taliistruzioni costituiscono una base inte-rattiva già sufficientemente collaudatache, per la sua flessibilità è riadattabilealle situazioni più varie.Va comunque precisato il fatto che talistrutture logiche, nel corso delle ultimerevisioni del codice della favola, poteb-bero subire alcune modifiche. In realtàquanto stiamo scrivendo avviene intor-no alla seconda metà del mese di ago-sto (i tempi di compilazione degli artico-li!) e non coincide ancora con il prodottofinito. Malgrado ciò, le variazioni di codi-ce non saranno più strutturali, ma solomarginali.Passiamo ora a vedere il lato multi me-diale della faccenda (anche qui trovere-te ad attendervi delle applicazioni Java-Script sicuramente interessanti.

Figura 8 - ... sul qualesono già posizionati ilnumero della scena ed iltipo di azione a cui si ri-ferisce!

5,"-/h!rp r IRiJing l'::J r ~'lIl

l..eIùIt ~ (101:55 T) • e- I

top.punti+3; ) invocando la giusta posi-zione del campo "punti" allo stesso mo-do di come, più sopra, il controllo avevaintercettato il campo dei tentativi.Se il controllo dà esito negativo al con-trario (else) verrà visualizzato un mes-saggio negativo e quindi assegnati tretentativi sbagliati.Solo nel caso che l'IF viene soddisfatta,con un'ultima istruzione (inserita primadella graffa che separa dall'ELSE) vieneinfine chiamata la funzione per il carica-mento di una delle tre pagine che costi-tuiscono il gioco successivo. La funzio-ne invocata si chiama "Procedi" ed èstrutturata (vedi di nuovo la tabella n. 1)da due variabili temporali (temp01, ini-zializzata a zero, e temp02) e gestite dauna serie di IF che verificano il valoreassegnato al parametro (livello) dellafunzione "procedi" e che, di conseguen-za a questo valore, vanno a conteggiare

RomanlocSod

...J s•••chongSetoJ

iandDel••.•Glit ••

.:.J_ed5~i'ogo5~.

::::::::~::::::~

T_ 210Key. C

COtriDO'.\mC",,",IVCou"hy Fai(Otri.)' Pleh .•COU'".tryPopC"'-"'IV RfXlCQt,.'ltrySwlt'lQD.v'tCéHopDanceMPlO •• , Tec"""

___ ~ISI)lo ~ChIn.

• ?Unllllcd MU"IU:wfl Muslc PlmJuccl fllliJ EJFigura 9 - Un momentod'estro di Music Produ-cero Riposizionando glistrumenti, diminuendooppure aumentando iltempo e provando varistili, stiamo per realizza-re un brano da dedicarealla presentazione dellesingole scene che ca-ratterizzano la favola inquestione'

vi.value=top.tenta- 1_tivi;) il numero deitentativi aggiornati.Ciò avverrà nel fra-me superiore F•• H"",IlIO"F1.(dov'è posizionato,nel file "mainga-me.htm, il value del campo denominatotentativi e relativo al form score),Oltre a ciò verrà anche visualizzato (win-dow.alert) un messaggio di conferma.Se al contrario (else) la condizione IFnon sussiste, invece di incrementare diun valore il numero dei tentativi, proprioper dare una distinzione tra giusto/sba-gliato, aumenterà di due (top.tentati-vi+2;). Oltre a ciò verrà visualizzato unmessaggio negativo.Sempre nello specifico del gioco dell'A-nagramma, al bottone "Ho Vinto" è as-sociato a sua volta un controllo "onClick"che lancia la più complessa funzione(function Valid_Anag1 O()per mezzo della quale vengono control-lati, sempre via IF, tutti e tre i campi discrittura.Se tali campi risultano corretti (==) vie-ne visualizzato un messaggio di confer-ma ed assegnati 3 punti ( top.punti

296 MCmicrocomputer n, 177 - ottobre 1997

complesse animazioni, d'armonizzarepoi al contesto di una scena o di un gio-co. Banali le prime, preferiamo sfruttarel'intero spazio di questo capitolo per de-scrivere più dettagliata mente le secon-de.Diversamente da quanto teorizzato insede di progetto (e da quanto prospet-tato nell'articolo "propedeutico" apparsosul numero di settembre) le GIF anima-te non le abbiamo più utilizzate per cer-care di fondere la parte grafica con i ri-ferimenti testuali delle singole scene.Tale tecnica, al momento pratico, s'è di-mostrata talmente complessa e lunganella sua fase di applicazione da richie-dere uno slitta mento della pubblicazio-ne. Ci abbiamo rinunciato e preferitoimboccare un'altra strada.In realtà, la soluzione adottata per lapresentazione di ogni singola scena(com'è possibile verificare su C&Vwebn. 10) è organizzata in maniera più razio-nale e per certi versi più interessante.Di certo è più completa.Osservando difatti la figura 10 possia-mo vedere una struttura tabellare all'in-terno della quale, sono presenti:- una GIF animata (composta da unidentificativo statico relativo al numerodella scena attuale, l'effettivo quadroanimato, e di nuovo un identificativostatico per il titolo della scena stessa);- una semplice GIF, usata per l'ancorag-gio alla tabella del gioco collegato allascena specifica;- il testo in HTML della specifica scena(e quindi via via "copia bile" fino a rico-struire l'intera favola);- il player multimediale per poter ascol-tare la ripresa audio (estratta da un filmconcessoci, con un colpo di fortuna, inlicenza!). Tale riproduzione avviene inautomatico grazie all'utilizzo di una nor-male istruzione "embedded" del tipo:<EMBED SRC="audio/audscn01.wav"NAME='snd" WIDTH="143" HEI-GHT ="33" MASTERSOUND>.Credo che appaia subito evidente (so-prattutto a chi ci naviga dentro!) quantosia più completo tale assetto che nonquello preventivato. Invece di animarein un'unica GIF i frame del film e il testodella favola, la soluzione adottata per-mette al giocatore di disporre di tutto iltempo che gli necessita per leggere lafavola, di godersi il loop dei frame e, sevuole, d'ascoltare la colonna sonora delfilm grazie al player incorporato nella ta-bella.Dal punto di vista del codice, la realizza-zione del modello base prima e di tuttele specifiche scene poi, è quanto di piùsemplice possa esistere nell'ambitodell'HTML.

MCmicrocomputer n. 177 - ottobre 1997

Figura IO - Il gioco nellafase di presentazione diuna scena. Da notare,oltre al blocco delle GIFed al player 'embedded'nella cella dedicata, lapresenza della GIF 'Ini-zio del gioco'. Quest'ul-tima è ancorata alla pri-me parole ("A doman-da· ...) del titolo assegna-to alla tabella del giocoche segue. Un sempliceclick sulla GIF in que-stione ...

Dimensionata la tabella (da 500 pixel ecomposta di quattro celle disposte sudue righe) e sistemati testo e GIF, leuniche parti di codice più "complesse"risultano essere quelle per il link in "em-bedding" con il file audio da riprodurre equella per l'ancoraggio dalla tabella inquestione alla tabella del gioco annessoalla scena.Una complessità comunque relativa sesi è un poco infarinati sui TAG e se so-prattutto si dispone di un editor HTM Ldi tipo WYSIWYG. Personalmente housato il Composer di Netscape Commu-nicator 4.01 e, per quanto riguarda ilsettaggio dell'Anchor (Figura - 12) tut-to è avvenuto in pieno automatismo ri-chiamando dei semplici menu.Per chi non lo sapesse, gli Anchorsono dei comandi che vengono uti-lizzati per andare da un punto ad unaltro specifico punto detto "target",presente sia più avanti nella pagina

In"" littldo li6tt"' t1'm'_," R<jjdo di "" _,.oH••.••.•de..,.""'ìf"' •.0iI1I;&u -Ji'U'iH '*ittu,6

•••• ..,.clo" •..".. ctdd< ••••••••• M doto".."~yona Q""reunafiglla bianca come fa ne"~e con le

labbra ross.e C'ama il mlO sangue ..•1.f r••• d<ol_ •• C•••••••• ~ •••• d<ofilU1lo., """"""..,o d6ptJ,i8R#Ii"»NH iI~UMbtIth.eòIJ.e'".6IM._•••,.••_u_lo_.1.f-''''S'V*iOfetli& di'M., la dìl4IlMfOM~trìn"

Figura Il - .. ed eccoposizionarsi in schermola tabella del gioco.

che su altre pagi-ne.Nel caso della sce-na in questione laGIF statica denomi-nata "Inizio del gio-co" è stata ancorata,

7 sulla stessa pagina" della scena, alla pa-

rola "domanda" pre-sente nel titolo assegnato al gioco "Adomanda .. rispondi!". Tale titolo è po-sto in testa alla tabella contenente loschema del gioco.L'Anchor che n'è derivato, a soddisfa-zione dei puristi, è il seguente:<AH R EF="#domanda"> < I MGSRC="botgame.GIF" BORDER=O HEI-GHT =23 WIDTH=160></A>ed ha come riferimento il TAG:<A NAME="domanda"></A>collegato a sua volta alla riga d'intesta-zione della tabella del gioco che è la se-guente:<FONT SIZE=+3>A domanda ... <I>ri-spondi! </I></FONT>Con tali istruzioni il codice HTML, unavolta c1iccato sulla GIF "Inizio del gioco'(Figura - 10) ci ha permesso di spostarela visione della pagina (così come mo-strato in Figura - 11) direttamente sullatabella del gioco.Un altro, interessante uso delle GIF ani-

297

dio: dal VCR è meglio') fissa in una fra-se quanto ho potuto verificare in sededi acquisizione ed editing delle parti del-la colonna sonora che abbiamo avuto lafortuna di utilizzare. Partito con l'acqui-sire in Wave-PCM per poi convertire oin Wave-TrueSpeech oppure in MPEG-mp2 (quest'ultimo ora leggibile permezzo dell'ActiveMovie anche dal Net-scape Communicator 4.x) mi sono pre-sto trovato nella situazione di doveroperare una scelta:-scegliere la conversione in Wav-True-Speech, codec rapidissimo al carica-mento (un vero streamer, ovvero già inriproduzione via via che il file viene sca-ricato), ma anche di qualità notevolmen-te inferiore al formato mp2?-oppure scegliere il formato mp2, dimaggiore qualità, ma anche di maggioritempi di attesa per il caricamento?Dovendo scegliere ... non ho scelto! Fat-to un'altra serie di prove, riacquisendodall'output audio del VCR direttamentein TrueSpeech, ho potuto constatareche tale formato (grazie ai tagli impostidal filtro posto all'output del VCR) quan-do acquisce direttamente sforna unaqualità di sintesi decisamente superioread un file equivalente derivato da unaconversione.La scoperta dell'acqua calda! Comun-que sia i file in Wav-TrueSpeech cheparlano dalle page della favola sonomiei testimoni. Navigando su C&Vwebn.10 lo potrete constatare per vostroconto.Per quanto poi concerne le sequenze vi-deo, sempre prese dagli spezzoni delfilm concessoci di utilizzare, queste, do-po averle acquisite in Avi-full frame, leabbiamo desequenziate in GIF,estrapolando quindi i fotogrammi più si-gnificativi (un primo piano, uno staccodi scena, un movimento diverso, un'e-spressione che cambia, ecc.) per inca-stonarli via via in un quadro preesisten-te, nel quale sono già inseriti i riferimen-ti statici relativi al numero della scena edel titolo relativo all'azione che, per laspecifica animazione, si svolgerà in es-so.Tale lavoro s'è svolto utilizzando, in fasedi acquisizione la mia fedele, VideoBla-ster RT-300in congiunzione con il VidCap32 e l'inos-sidabile VidEdit.In ambiente di cattura ho provveduto adacquisire con un iniziale quadro videopari a 240x180, con un frame rate pari a15 frame al secondo e con metodo dicompressione escluso (full-frame).In sede di editing, il quadro video, ripuli-to dalle linee periferiche eventualmentedisturbate (effetto shifting), è stato ri-

x

__ irr('e.-_r._••.

Figura 12 - La strutturadella tabella di presenta-zione alle scene quischematizzata con tutti iriferimenti ai controlli in-seriti sia in HTML che inJavaScript.

Lo strano titolo di questo capitolo (Au-

GIF animata di "turno" poteva benissimorappresentare un momento di aiuto.Quello che abbiamo allora pensato direalizzare è una specie di lavagna scola-stica dove un gessetto invisibile dise-gna ciclicamente numeri, segni aritmeti-ci e spunti di vario genere, in modo dacostituire un continuo suggerimento ed,al tempo stesso, un'altra fonte di ap-prendimento. Lo storyboard di tale svi-luppo animato (Figura - 15) è in gradodi rendere più evidente tale soluzione.

Audio: dal VCR èmeglio! ... filmati chediventano GIF animatee creazioni MIOI!

lri.•••.••••.~~,.... .•.••..~""""'"~~-~~~..:....,J.i*1o.PIIIIlDcIIiDnar ••••

•••_. __ "h__ """"1-

-J------

1DUD.&tddo giomo cfiun:mo,.1a Re~ dì. \Xl ~ paesesWn Dc •••••••. fiDestR. DistAltt. si puose un dito ed

un•.gocci•.ci senp cadde NIl. n••• del cb.•.anRlt..Porrel alle'TE: unafigfuJ bIanca come lo >HI'e e con le

labbra ro.su co~ ,l mJO sangzu ..

Le'" delc:idoucoa.oao il NO de.ticIaio •• qu*beteIIpO dopo." ReciDI -. ti aoodo UDa biatM. COft ictlptli

coIor.tMDo .Ia ptAt bl-.ce. e••• la Dtn. Le labbn...-bn,ftDO petM di rose. La chì-.uoco a.c4lDtft t

Figura 13 - NetscapeComposer al lavoro sulpannello delle pro-prietà di un'immagineper fissare un "anchor". i; 1_ 9r-

_lri.l~

<EMBEO SROf""aucliofaudKn01.WIIV- NAIIE"'and'"WIOTH-""14f'" HEtGHT"')T IllASTERSOUNO>

COMPONENTE TESTUALEr:1__ "_----

<l:GFSTA1lCA _

- lo _ MI ••••••

<A HREF-""IdomandII"><tMO SRC-"bolprM.gII'"SORDERaO HEtGKT-23 W1OTH-11O><IA>

GF_~'"a.c: I•••••••••••••••••••....- __ I_pll...--

mate, è quello che abbiamo organizzatoper l'ultimo gioco della favola (Figura -14).Tale gioco, denominato 'Il Trovarispo-ste", si basa sulla cosiddetta tecnica delbottone rotante. Un bottone cioè, sulquale appaiono sequenzialmente le va-rie risposte tra cui scegliere (in realtà sitratta di link che, se cliccati, possonoportare ciascuno verso una specifica pa-gina o URl)o Tra queste risposte, che sivisualizzano una dopo l'altra ogni 'x' se-condi, solo una è ovviamente quella chesoddisfa la domanda e che fa procederenel gioco. Le altre, un po' com'è nel'gioco dell'oca', portano indietro versole pagine delle scene e dei giochi prece-denti.Da quello che abbiamo potuto verifica-re, in un quadro dinamico così articolato(dove anche la domanda a cui risponde-re è esposta in modo abbastanza sub-dolo), oltre che per abbellire la scena, la

298 MCmicrocomputer n. 177 - ottobre 1997

dotto a soli 160x120 dot per poi proce-dere all'estrazione da questo dei foto-grammi più significativi. Quest'ultimi,una volta salvati come .dib, l'ho infinecaricati in ambiente PaintShop Pro 4.12per convertirli definitiva mente in GIF(256 colori 'ditherati'). A questo punto ècominciata l'opera finale, ovvero l'inseri-mento di ogni GIF-frame all'interno delquadro preesistente. Ogni file così otte-nuto (composto dalla denominazionedella scena, dal singolo frame significa-tivo e dal commento all'azione) l'hoquindi salvato con una denominazionecronologica.A completamento dell'opera le GIF pre-parate dal Paintshop Pro sono state ca-ricate nel GIF Animator di Microsoft esettate ciascuna per durata in schermo,fino a costituire il file animato finale.Dall'audio e dal video un salto, infine,nel mondo dell'elaborazione musicaleper la realizzazione della colonna sonoraoriginale. AI riguardo ci siamo saggia-mente avvalsi dell'apporto (determinan-te!) del Microsoft Music Producer.Avremmo potuto utilizzare dei brani Ml-DI già belli e confezionati e probabil-mente più d'atmosfera. Ma avremmosfruttato il lavoro di altri (tali Chopin,Schumann, Haydn, ecc.!).Standoci l'opportunità abbiamo preferi-to utilizzare il Music Producer e ricavaredei tessuti musicali in tutto e per tuttooriginali e tutt'altro che scontati!Tutti i file musicali che accompagnano ilcaricamento delle pagine (per le sceneuno specifico genere musicale, per igiochi un altro genere ancora) sono statirealizzati dal Music Producer. Ridisposi-zione stereofonica degli strumenti, scel-ta del tempo, della chiave, dello stile edella personalità del brano, nonché glieventuali tagli ad hoc della durata. Il ri-sultato finale è in circa 30 brani MIDI di-versi per un totale di appena 150-200Kbyte di musiche originali. Se volete, vipasso i file-progetto ...

ConclusioniOK, lo confesso: realizzare 'una favolaper la rete" mi ha entusiasmato.In realtà s'è trattato di una vera e pro-pria sfida che ho lanciato a me stesso,al Web ed all'HTML! Quelle che ritengodi aver ottenuto sono tutte risposte po-sitive. Il Web può essere conquistatoanche dall'ipermedialità, purché questosia il frutto di ideazioni che sappianoconciliarsi con i limiti del solito "doppinotelefonico" che condiziona la vita di ogninavigatore.Va subito detto che con il solo HTML

MCmicrocomputer n. 177 - ottobre 1997

Figura 14 - Modulo digioco ·11trovarisposte·.La domanda è un ·pic-colo enigma· ... la ri-sposta giusta si alter-na ogni due secondi(su di un bottone ro-tante) ad una serie dirisposte sbagliate. Sesi sbaglia risposta siviene portati indietronel gioco. Come se neesce fuori?

saremmo riusciti a tirar fuori cose mo-deste. Corroboratolo invece col suppor-to del JavaScript, anche il semplice lin-guaggio della rete, s'è come rivitalizza-to. E' stato possibile discernere tra le ri-sposte, assegnare punti, far appariremessaggi, aiuti e dare consigli. Insom-ma, introdurre una buona dose d'inte-rattività.Facendo tutto ciò non abbiamo certosegnato una tappa fondamentale nellastoria del Web ma, forse un po' immo-destamente, già applicato ciò che franon molto con l'avvento dell'Explorer4.0 (quale estensione verso Windows98 dell'attuale Windows 95!) sarà pos-sibile, anzi quasi obbligatorio fare. Ov-vero, scrivere il codice dei prodotti iper-mediali di ogni produzione di DesktopPresentation, in HTML. Meglio ancora,in Dynamic-HTML.Tra non molto difatti tutto ciò che è pre-sentazione ipermediale verrà realizzato

x Figura 15 - ... magaricon l'aiuto di una GIFanimata che. in loop,prova a dare consigli esuggerimenti!

abbandonando i famigerati runtime o gli(in)eseguibili da 100 Mbyte. Diventeràtutto Dynamic-HTML e potrà indifferen-temente girare su Internet oppure in lo-cale, sul PC oppure sul Mac o altri Si-stemi Operativi.Vi sembra poco?Noi, la nostra brava esercitazione l'ab-biamo fatta e su C&Vweb n. 10 ne ri-schiamo giudizi e lazzi. AI riguardo unaprecisazione: se siete ancora imbarcatisu vecchie versioni di Navigator (la2.00) e di Explorer (la 3.00) è ora di di-smetterle. Non solo perché non rispon-dono pienamente ai controlli JavaScriptda noi utilizzati, ma anche perché è orache facciate l'upgrade!In definitiva ... navigate sulla favola gen-te, e se eventualmente v'interessa pro-varia off-line, mandate un messaggio almio solito recapito su MC-link e vedre-mo cosa si può fare.

299