Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

29d. Colpiscimi con una Shockwave

"Multimediale interattivo dentro una web page?" Sono sconcertata!"

Sì, lo sei, puoi avere shockwave col tuo HTML
e "buttarli al tappeto" con impatto...

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

Shockwave è una tecnologia introdotta all'inizio del 1996 da Macromedia che elevò la forza del suo potente e ampiamente diffuso programma di sviluppo multimediale, Director, così che il contenuto interattivo multimediale potesse essere incluso dentro una web page. Per dare un assaggino a quello che i web based multimedia possono fare, visita la Macromedia's Gallery.

media type: shockwave
cosa fa meglio: media sincronizzati, animazioni, simulazioni, manipolazioni, comunicazioni con database, interfaccia realistiche, contenuti non-lineari
elementi da considerare giudizio commenti
"difficoltà" o barriera per creazione media bassa alta
----		 Per creare contenuto Shockwave hai bisogno di Macromedia Director e la capacità/esperienza per progettarlo e programmarlo.
"ampiezza" di audience che puo' vedere il media ristretta ampia
----		 Far girare una shockwave dentro una web page richiede extra software (ActiveX control per Internet Explorer/NetScape Plug-in), ma le stime mostrano che più del 50% degli utenti web ne sono già in possesso. La tecnologia è migliorata e quindi puo' aggiornare automaticamente i componenti quando necessario.
consumo di banda basso alto
----		 Variabile e dipende dal tipo di interazione, media usato, e le abilità di programmazione del creatore del contenuto. Questo puo' ora essere fatto "fluire" e quindi consegnato in piccoli pezzi nel momento in cui l'utente vi comincia ad interagire. E' molto comprimibile in "peso", per essere sfruttabile in rete. L'audio di Shockwave e' buono e funziona senza hardware speciale.

Quello che Director faceva bene, e che Shockwave ti permette di fare in una web page, e' quello di portare situazioni a contenuto "ricco", con testi, figure, animazioni, suoni, video, in qualunque tipo di visual design immaginabile. E' potente perchè puo' manipolare e sincronizzare questi media diversi, come comunicare con altri sistemi come database o altri software.

Lo scoglio per un bravo web page designer e' che per far girare bene Shockwave, si deve imparare bene Director, beh, non e' una cosa semplice e il programma non e' economico. Dato che molti shockwave design sono unici, spesso non possono essere poi riproposti come "clip art" ma ci sono alcune eccezioni che vedremo dopo.

Una delle limitazioni e' che Shockwave richiama funzionalita' di altri software per funzionare nel tuo web browser. Molti web browser e nuovi computer sono spediti gia' pronti a questo. La tecnologia e' migliorata tanto che se una persona accede ad un sito che lo richiede, puo' o cominciare a scaricare le parti necessarie o rimandare a rimandare al sito di Shockwave. Il processo vale una volta per tutte.

Questa lezione non vuole coprire tutti gli aspetti creativi di Shockwave, ma ti mostrera' come aggiungere un'applicazione gia' esistente al tuo web site. I file Shockwave finiscono sempre con ".dcr"

A causa del fatto con cui Shockwave e' implementato nei web browser, dovremo in realta' scrivere un HTML duplice che funzioni con entrambi; Internet Explorer usa un tag <object> mentre NetScape usa il tag <embed> (simile a quanto visto per i video, lezione 29b e audio, lezione 29c, ma con alcuni parametri diversi).

Il codice generale HTML e' tipo:

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0" 
WIDTH="480" HEIGHT="300" NAME="sw" ID="swmovie">
	<PARAM NAME="SRC" VALUE="sw_file.dcr">
	<PARAM NAME="BGCOLOR" VALUE="#FFFFFF">

	<embed src="sw_file.dcr" 
	width=480 height=300 bgcolor=#FFFFFF 
	pluginspage="http://www.macromedia.com/shockwave/download/">
	</embed>
</OBJECT>

Come puoi vedere, il tag <embed> per NetScape (mostrato in porpora) è contenuto nel tag di Internet Explorer <object> (mostrato in rosso). Ciò significa che NetScape ignorera' i tag <object> e che Internet Explorer ignorera' quelli <embed>. Piccola spiegazione di altre opzioni presenti nei tag:

scopo opzione OBJECT EMBED
allocazione web codice installazione shockwave, reindirizza il browser qui per scaricare il software necessario se non presente object classid="....."
codebase="http://...."		 pluginspage="http://..."
dimensioni in pixel width=..., height=... width=..., height=...
codice identificativo, può essere usato con browser scripting (JavaScript, VBScript) NAME="..", ID="..." NAME=".." (non richiesto)
allocazione relativa shockwave file <PARAM NAME="SRC" VALUE="sw_file.dcr"> src="sw_file.dcr"
colore sfondo durante caricamento, aiuta integrazione colori pagina <PARAM NAME="BGCOLOR" VALUE="#FFFFFF"> bgcolor=#FFFFFF

Aggiungere Shockwave

Nota: Se non possiedi i documenti di lavoro dalla precedente lezione, scaricane una copia ora.

In questa lezione, aggiungeremo una applicazione shockwave che puo' leggere in qualsiasi numero delle immagini fotografiche dei vulcani, e che ha strumenti per permetterti di evidenziare l'altezza e la larghezza del vulcano e calcolarli come rapporto.

Se avessimo voluto, avremmo potuto aggiungere qualche altra funzione. Potremmo aver programmato anche un modo per salvare i dati elaborati facendo in modo che Shockwave mandassi i dati ad un form CGI. Avremmo potuto aggiungere un bottone per mandare una mail ad un istruttore, oppure un altro per salvare o stampare i risultati, oppure...

Ma abbiamo scelto la semplicità, dato che non e' un sito reale!

Il file di shockwave in se' non e' altro che 22k in size, e le immagini usate hanno link solo dove necessario. Questo lo fa caricare più velocemente e ti permette di aggiungere nuove immagini senza riprogrammarlo.

Prima di partire, visita una copia della pagina che costruirai. Ti permettera' di provare se l'applicazione shockwave e' funzionante.

Se sei pronto, possiamo mostrarti come settare questa pagina:

  1. Crea una nuova directory/folder chiamata dswmedia. In questa posizione conserveremo il file e le immagini usate da shockwave. Dobbiamo includere anche tutte le sue feature.
  2. Vai al Lesson 29d Image Studio per fare il download di quattro immagini di vulcani che useremo nel nostro Shockwave e salvale il dswmedia.
  3. Ora manca la copia del file shockwave.

    1. Per farlo, apriamo il menu nascosto con il pulsante destro del mouse (Windows, Unix) o premendo e tenendo il mouse (Macintosh) su questo link al file (volc_hw.dcr) fino a che non compare un pop-up menu.
    2. Selezionare Salva oggetto con nome...
    3. Selezionare Source se compare un menu intitolato Format.
    4. Salvalo come file chiamato volc_hw.dcr nella tua cartellina dswmedia, che ora dovrebbe contenere 4 immagini ed un file.


  4. Crea un nuovo file nel tuo editor, chiamalo measure.html, e salvalo assieme agli altri file HTML.

  5. Digita il seguente testo in questo nuovo file: 
    
<html>
<head>
<title>Misurazione Forma Vulcano</title>
<body bgcolor=#000000>
<center>

<!-- begin ---------= s h o c k w a v e =-------------------
The OBJECT tag is used by Internet Explorer and the EMBED tag 
is used by NetScape Navigator. You can add/edit the volcano
functionality by editing the values for:

  sw1 : names of all volcanoes
  sw2 : the file names of the volcano images ------------------>

<!-- OBJECT tag used by Microsoft Internet Explorer ----------->
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0" 
WIDTH="480" HEIGHT="400" NAME="volcs" ID="hw">
	<PARAM NAME="SRC" VALUE="../dswmedia/volc_hw.dcr">
	<PARAM NAME="BGCOLOR" VALUE="#000000">
	
	<PARAM NAME="sw1" 
	  VALUE="San Francisco Peaks AZ,Black Butte CA,Mauna Kea HI,Popacatepetl Mexico">
	<PARAM NAME="sw2" 
	   VALUE="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
	 
<!-- EMBED tag used by NetScape Navigator --------------------->  
<embed src="../dswmedia/volc_hw.dcr" 
	width=480 height=400 bgcolor=#000000
	pluginspage="http://www.macromedia.com/shockwave/download/"	
	sw1="San Francisco Peaks AZ,Black Butte CA,Mauna Kea HI,Popacatepetl Mexico" 
	sw2="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
</embed>
</OBJECT>
<!-- end -----------= s h o c k w a v e =------------------- -->

<form>
<input type="button" value="chiudi strumento" onClick="self.close()">
</form>
</center>
</body>
</html>
</font></pre>
    NOTA: La maggior parte del codice serve per includere l'applicazione Shockwave; l'altro elemento e' un form JavaScript sul fondo che crea un bottone per chiudere la finestra.

    La altezza e l'larghezza del file shockwave e' di 480x400 pixel (non si puo' scalare, se le dimensioni nel codice HTML sono minori, ne tagliera' una parte). Il file e' allocato in dswmedia, un livello sopra rispetto al file HTML.

    I valori del parametro sw1 elencano, in ordine, i titoli di ciascuna immagine caricata nel file Shockwave. Similmente i valori del parametro, sw2 elencano, in ordine, i nomi dei corrispondenti file grafici. Nota come questa informazione sia stata inclusa due volte, una per il tag di Internet Explorer, OBJECT, ed un'altra per quello di NetScape, EMBED.
  6. Salva e Apri nel tuo browser. Verifica che l'applicazione sia apra e funzioni correttamente.
NOTA: Se c'e' un problema di caricamento delle immagini, assicurati che tu abbia inserito le stringhe sw1 e sw2 in modo esatto (niente spazi dopo le virgole).

Una volta che la pagina sia funzionante, dobbiamo aggiungere un link che la apra nella sua finestra web, come abbiamo fatto nelle precedenti lezioni multimediali.

  1. Apri il file term.html nel text editor.
  2. Dopo la sezione che abbiamo creato nell'ultima lezione (l'intestazione "Vulcani in Azione" con il link al QuickTime movie), aggiungi questo HTML: 
    <a name="shape"><h3>Forme di Vulcani</h3></a>
La "forma" generale di un vulcano può aiutare nella loro classificazione attraverso una misura conosciuta come <b>aspect ratio</b>, o rapporto tra l'altezza e la larghezza. Dal momento che questo valore e' un rapporto, non e' importante l'unità di misura con cui viene espresso, è un numero puro. 
Usa lo <a href="#shape" onClick="window.open('measure.html', 
'pliniano', 'width=500,height=480,status,menubar')" 
onMouseOver="window.status='strumento misura rapporto dimensioni'; 
return true">strumento Volcano Web</a> per misurare il rapporto tra le dimensioni di alcuni vulcani. (Richiede
<a href="http://www.macromedia.com/shockwave/">Shockwave</a>)
  3. Salva ed Aggiorna nel tuo web browser. Verifica che il tutto funzioni a dovere.

Controlla il Tuo Lavoro

Confronta la tua pagina web con un esempio di come il documento dovrebbe apparire. Se la tua pagina web fosse diversa dall'esempio, o se i link non dovessero funzionare correttamente, controlla il testo che hai digitato nell'editor di testo. Confronta il tuo lavoro con il codice dell'esempio (cerca qualcosa tipo Source nel menu View).

Verifica

Argomenti di verifica per questa lezione:
  1. Alcune delle cose possibili con Shockwave e che lo rendono utile.
  2. Alcune delle limitazioni dell'uso di Shockwave.
  3. Quale e' il codice HTML per l'inclusione di un file Shockwave. Perche' presenta informazioni duplicate?

Pratica Indipendente

Esercitati con la pagina Shockwave che hai creato. Guarda se ti riesce di elaborare il modo con cui cambiare l'ordine con cui i vulcani sono visualizzati. Prova a trovare alcune altre immagini in cui siano presenti dei vulcani e vedi se riesci ad aggiungerle all'insieme che abbiamo usato in questa lezione.

Abbiamo anche creato due modelli di Shockwave che e' possibile usare anche senza conoscere per niente il funzionamento di questo programma. Questi sono parte di un gruppo di lavoro online che mostra come aggiungere funzionalià Shockwave e JavaScript alle tue pagine personali.

  1. The Quizzer ti permette di creare gruppi di quiz a risposta multipla, dove ogni volta che il quiz viene scelto, l'ordine con cui compaiono sia le risposte che le domande e' reso casuale.
  2. The Clicker ti permette di creare slide show basati sul web che possono includere set multipli di titoli e possono avere anche l'audio ad essi associato.

Informazioni Aggiuntive

Questo non e' altro che un esempio di come questo programma trasformi un sito in una posto che e' molto più di una statica collezione di testo e di figure. Puoi trovare numerosi altri esempi di Shockwave da: