Materiali per l'esercitazione

Da giovedì 9 ottobre 2003 sarà disponibile un CD contenente shareware vario e manualistica.

Appunti per il progetto

Tre questioni concorrenti:

• L’interfaccia

• I materiali (immagini, filmati, suoni, testi,…)

• Gli strumenti software necessari

A chi ci si rivolge l’opera multimediale? A specialisti, a gente comune, a studenti, ad appassionati? Si modifica il linguaggio e lo stile in funzione del pubblico al quale si rivolge l’opera. E’ dunque necessario prevedere le richieste dell’utente.

Cosa si vuole ottenere dall’opera multimediale oggetto dell’esercitazione? Spiegare e illustrare un’opera d’arte, spiegarne il metodo e la genesi creativa, dare informazioni, proporre rielaborazioni (dichiarandolo e come sezioni a parte)…

E’ dunque necessario suddividere il problema e identificarne molto accuratamente obiettivi e metodi di comunicazione.

L’opera deve comunque:

• Essere semplice da creare, aggiornare e modificare

• Essere semplice da esplorare

• Essere ‘portabile’ su più piattaforme hardware e software (Windows, Mac, Linux, Internet Explorer, Netscape, …: il formato Acrobat ne è un esempio)

• Contenere informazioni omogenee tra loro (sia per quanto riguarda il tipo, sia per la logica di presentazione)

• Essere interessante almeno per una categoria abbastanza vasta di utenti

• Prevedere vari livelli di approfondimento (non si deve mai dimenticare che si ha a disposizione una pagina per volta)

• Usare un solo font di caratteri (nelle sue varie articolazioni: neretto, corsivo, normale; caratteri grandi, medi, piccoli; eventuale uso di colori)

• Usare una grafica univoca (scelta dei colori, del formato delle immagini,…)

• Usare una impaginazione univoca (griglia)

• Evitare troppe informazioni poste in un’unica pagina

• Ogni pagina deve avere uno scopo ed uno solo, immediatamente individuabile

Il primo obiettivo del progetto riguarda quindi la massima portabilità, la massima semplicità d’uso, la massima ‘pulizia’ dell’insieme, il massimo contenuto di informazioni.

E’ essenziale ricordare che un’opera multimediale non è un libro:

• non permette di avere una semplice visione di insieme (dunque: chiarezza complessiva, un argomento per pagina, mappa del sito…)

• ha una qualità dell’immagine peggiore (dunque: uso di immagini non troppo complesse)

• è più difficile da leggere (dunque: usare poco testo)

• costringe all’uso di un PC

In compenso:

• permette l’uso di video e animazioni

• permette l’uso di suoni

• permette l’interattività (ad esempio consente di cercare una parola in tutto il sito)

Pertanto: è necessario valorizzare al massimo i pregi e ridurre i difetti.

In sintesi:

• Dividere il problema in ‘pillole’ e legare una pillola all’altra

• Testi brevi: spiegare con le immagini

• Unico font (normale, grassetto, corsivo, massimo due/tre corpi diversi)

• Partire dalle conclusioni: spiegare poi come si sono ottenute

• Evidenziare le parole chiave

• Definire la struttura logica del testo (elenchi puntati, paragrafi, titoli, tabelle)

• Definire una griglia di impaginazione

• Scegliere uno stile generale (impaginazione, scelta delle immagini, testo)

• Inserire i link correttamente (evidenziandoli senza l’obbligo di click)

• Prestare molta attenzione alla combinazione di colori (testo e sfondo)

• Evitare parole tutte maiuscole

• Rivedere i testi, le immagini e l’interfaccia alla fine della fase di costruzione

• Eseguire test di leggibilità da parte di terze persone

• Inserire i credits

• Inserire una mappa dell’opera

Alcuni consigli sull'uso delle immagini:

• Usare parti significative di immagini invece dell'intera immagine. Eventualmente, iniziare dalla rappresentazione di una parte per giungere al tutto gradatamente, per ingrandimenti successivi.

• Usare cambi di scala di intere immagini o di loro parti.

• Accostare immagini tra loro contrastanti, sia per dominante di colore, sia per soggetto, sia per composizione di linee.

• Accostare immagini simili tra loro.

• Ripetere le immagini, con eventuali varianti, mettendo in risalto le variazioni stesse.

• Evidenziare ed usare parti evocative di immagini.

• Di un'immagine isolare e mettere in risalto solo alcuni particolari (mediante desaturazione delle restanti parti, oppure scontornando le parti o con altri mezzi).

• Combinare assieme particolari significativi di immagini diverse.

• Accostare ad immagini di Luzzati altre immagini in relazione con quelle.

• Usare il tempo: far comparire vari particolari di un'immagine in tempi successivi.

Link da vedere:

http://www.html.it/java/a197/applet.htm
Attraverso il semplice uso del mouse puoi ingrandire ed esplorare l'immagine

http://www.html.it/java/02/index.html
L'Applet di questo esempio genera un cubo tridimensionale, che su ognuna delle proprie facciate riporta un'immagine preimpostata.
Le immagini devono essere di uguali dimensioni, e ad ognuna di esse e' possibile associare un link.

http://www.html.it/java/03/slide.htm
Questa applet genera un effetto di trascinamento da sinistra verso destra di immagini preimpostate.
Nell'esempio che segue sono state create due solo immagini che si estendono in orizzontale.

http://www.html.it/java/57/57.htm
Applet per la generazione di un effetto tridimensionale di un'immagine preimpostata. Buono l'effetto grafica; scarsa la possibilita' di personalizzazione. L'effetto e' simile ad una stanza guardata dal centro in tutte le direzioni.

http://www.html.it/java/64/64.htm
Splendido effetto grafico per questo applet che genera immagini in sequenza come se cadessero dall'alto.

http://www.html.it/java/89/applet.htm
Tipico effetto grafico delle insegne luminose dei negozi

http://www.html.it/java/a171/applet.htm
Questa applet consente di gestire immagini con relativi tasti "avanti" "indietro" e "stop". Un display mostra l'immagine di riferimento. Se non impostato altrimenti l'applet visualizza in sequenza continua tutte le immagini impostate. Funziona con formati GIF e JPG.

http://www.html.it/java/a173/applet.htm
Impostato un certo numero di immagine quest'applet le visualizza a cadenza temporale stabilita nella configurazione del codice HTML.

http://www.html.it/java/a209/applet.htm
Da un'unica immagine GIF o JPG, quest'applet genera un classico bottone animato al passaggio del mouse con link associato.

http://www.html.it/java/a212/applet.htm
Zoom d'immagine progressivo su un file con estensione .cgm.

http://www.html.it/java/a254/applet.htm
Tracciano delle linee con il mouse è possibile deformare un'immagine a scelta.

http://www.html.it/java/a280/applet.htm
Grazie a quest'applet e' possibile inserire immagini a piacere in un cubo 3D in continua rotazione.

http://www.html.it/java/a284/applet.htm
Quest'applet visualizza immagini a rotazione, sostituendo l'una alle altre con diversi effetti di transizione.

http://www.html.it/java/a315/applet.htm
Quest'applet crea bottoni con il classico effetto onmouseover, cioe' al passaggio del mouse il bottone cambia aspetto.

http://www.html.it/java/a316/applet.htm
Un bottone che, al passaggio del mouse, cambia aspetto ed al quale e' possibile associare un link.

http://www.html.it/java/a319/applet.htm
Passando il puntatore del mouse sull'immagine, questa cambia senza, pero', tornare all'immagine precedente quando ne esce. Ritornando col puntatore sull'immagine vengono visualizzate altre immagini diversa dalla prima.

http://www.html.it/java/a327/applet.htm
Gli oggetti vengono deformati fino al punto da assumere fattezze umane.

http://www.html.it/java/a358/applet.htm
Passando il puntatore del mouse su alcune aree dell'immagine si attivano rumori di sottofondo

http://www.html.it/java/a379/applet.htm
Quest'applet produce uno scroller sia di testo che di immagini in varie direzioni.

http://www.html.it/java/a406/applet.htm
Un'immagine coperta da un'altra immagine che vieni mostrata progressivamente ad ogni click del mouse.

http://www.html.it/java/a408/applet.htm
Una serie di immagini geometriche 3D in movimento e con suoni associati.

http://www.html.it/java/a439/applet.htm
Un vero e proprio programma di fotoritocco per colorare immagini a piacere.

http://www.html.it/java/a461/applet.htm
Effetto fade che trasforma e scurisce i colori dell'immagine.

http://www.html.it/java/a484/applet.htm
Diversi immagini si sostituisco l'una all'altra con il classico effetto sfumato.

http://www.html.it/java/a487/applet.htm
Mezzi di locomozione in movimento per quest'applet dall'effetto esclusivamente grafico.

http://www.html.it/java/a525/applet.htm
Immagini visualizzate con effetto fade.

http://www.html.it/java/a526/applet.htm
Un'applet con lo sfondo in movimento e la possibilità di utilizzare un menu di link.

http://www.html.it/java/a527/applet.htm
Ancora un effetto fade che sostituisce immagini.

http://www.html.it/java/a534/applet.htm
Ancora un cubo 3D. Ogni faccia contiene un'immagine e un link relativo. E' possibile bloccare e ingrandire ogni singola immagine.

http://www.html.it/java/a542/applet.htm
Effetto lago con animali in movimento e diverse ambientazioni.

http://www.html.it/java/a556/applet.htm
Cinque diversi tipi di movimento di una o piu' immagini.

http://www.html.it/java/a557/applet.htm
Quest'applet mostra in sequenza qualsiasi tipo di immagine con effetti di dissoluzione.

http://www.html.it/java/a607/applet.htm
Un vero e proprio libro fotografico da sfogliare, con tanto di numero di pagina e possibile di passare alla pagine precedente o successiva.

http://www.html.it/java/a640/applet.htm
Un vero e proprio desktop modello Windows, con tanto di icone.

http://www.html.it/java/a643/applet.htm
Permette di visualizzare i particolari di un'immagine e di muoversi grazie ad una mappa.

http://www.html.it/java/a161/applet.htm
Ottimo menu espandibile verticale. I link con i relativi nomi e commenti vanno inseriti nel file txt esterno che trovi nello zip.

http://www.html.it/java/a160/applet.html
Menu orizzontale che riprende la grafica dei bottoni del notissimo browser di Redmond

http://www.html.it/java/a146/applet.html
Un menu relativamente semplice che si anima solo al click del mouse. L'unico punto qualificante sono le cartelle modello Windows, che da chiuse si aprono al click del mouse.

http://www.html.it/java/a147/applet.html
Splendido menu sul modello di "gestione risorse" di Win95. E' possibile annidare link e sottolink creando in questo modo sottosezioni espandibili.

http://www.html.it/java/04/tendina.htm
Questa applet genera un ottimo menu a tendina. L'impostazione risulta, purtroppo, di difficile realizzazione.

http://www.html.it/java/a185/applet.htm
Menu costruito con clipart in formato GIF. Ottimo per effetti grafici accattivanti e poco dispendiosi in termin di Kb. Per personalizzarlo modifica le immagini presenti nell'apposita cartella.

http://www.html.it/java/a219/applet.htm
Semplici bottoni resi cliccabili e con testo di commento variabile. E' possibile inserire sui bottoni anche immagini.

http://www.html.it/java/a220/applet.htm
Da un'unica immagine grazie a quest'applet e' possibile inserire commenti e una sorta di pannello di controllo.

http://www.html.it/java/a269/applet.htm
Un semplice menu verticale con link in semplice testo, ma sfondo che varia al passaggio del mouse.

http://www.html.it/java/a568/applet.htm
Un menu verticale che permette di espandere vari livelli e sottolivelli.

http://www.html.it/java/a312/applet.htm
Un'applet che riproduce uno degli effetti piu' apprezzi di Javascript: quando il mouse passa sul link lo stesso si modifica sostituendo un'altro colore e sfondo.

http://www.html.it/java/a313/applet.htm
Splendido e utilissimo menu, assolutamente da vedere.

http://www.html.it/java/a353/applet.htm
Questa ottima applet genera un effetto del tutto identico alla pressione del tasto destro del mouse nei sistemi WIndows: l'apertura di un menu con voci selezionabili.

http://www.html.it/java/a355/applet.htm
Un classico menu verticale con voci di sottomenu che si espandono e restringono.

http://www.html.it/java/a372/applet.htm
Un menu di navigazioni con voci di testo che, quando attivate, mostrano un commento nella parte inferiore

http://www.html.it/java/a373/applet.htm
Quando il mouse sfiora le immagini, da bianco e nero diventano colorate.

http://www.html.it/java/a374/applet.htm
Un menu modello WIndows con sottocategorie aperte o chiuse e possibilita' di utilizzare icone personalizzate.

http://www.html.it/java/a390/applet.htm
Immagini che al passaggio del mouse si muovono come un bottone. E' possibile collegare qualsiasi tipo di link e non servono doppie immagini come in Javascript.

http://www.html.it/java/a391/applet.htm
In questo menu è possibile inserire icone grafiche, ad ognuna delle quali viene assegnato un menu simile al tasto destro del mouse in Windows.  

http://www.html.it/java/a453/applet.htm
Un menu testuale in forma di barra orizzontale.

http://www.html.it/java/a496/applet.htm
Un altro menu a discesa gerarchico.

http://www.html.it/java/a507/applet.htm
Un menu con sottocartelle da espandere. Simile ai sistemi Windows.

http://www.javaobjects.net/pages/jonetImageViewer/jonetImageViewer.html
Image viewer

http://www.javaobjects.net/pages/jonetMenu2/jonetMenu2.html
auto scrolling menu

http://www.javaobjects.net/pages/jonetImageViewer/jonetImageViewer.html
Image viewer

http://www.javaobjects.net/pages/jonetHoverPic/jonetHoverPic.html
Hover-Image Button

http://www.javaobjects.net/pages/jonetScroll/jonetScroll.html
scrolling time

http://javaboutique.internet.com/ImageMap/
Image map

http://javaboutique.internet.com/AnPuzzle/
Puzzle

http://javaboutique.internet.com/FindIt2/