 |
E' una GIF! Si Muove! E' una GIF Animata! |
| abbiamo la tua attenzione, ora? | |
|
E' una GIF! Si Muove! E' una GIF Animata! |
| abbiamo la tua attenzione, ora? | |
Dubitiamo che sia il caso di descrivere cosa si intende per GIF animata, puoi trovarle ovunque nel web. Queste vanno da icone animate, ad inserti commerciali ("ad banner"), ai web site "credit", prime pagine di web site che assomigliano ai titoli di testa dei film. Le GIF animation sono utili perche' puoi contare sul fatto che possono essere visualizzate su ogni web browser e non richiedono speciale lavoro aggiuntivo.
| media type: | animated GIF | |
| cosa fa meglio: | informazioni temporizzate, sequenze, processi, animazioni cartoon style/flip card style | |
| elementi da considerare | giudizio | commenti |
|---|---|---|
| "difficoltà" o barriera per creazione media | bassa  alta |
Molti dei nuovi programmi di grafica freeware/shareware possono GIF image. Molti siti offrono collezioni gratuite di animazioni da usare |
| "ampiezza" di audience che puo' vedere il media | ristretta ampia |
GIF animation possono essere viste con qualsiasi browser grafico odierno; nessun plug-in richiesto |
| consumo di banda | basso alto |
possono essere file di dimensioni ridotte e simulare un flusso di immagini. |
Una animated GIF e' solo un'estensione dello stesso formato di file che abbiamo usato per le immagini inlinea nella lezione 7. Ma invece di mostrare solo una figura, una animated GIF ha livelli di immagini diverse e le informazioni nel file possono controllare quanto aspetta prima di visualizzare l'immagine successiva, e quante volte il ciclo si deve ripetere nell'intera sequenza.
Diversi programmi grafici attuali dovrebbero avere opzioni per la creazione di animated GIF file. In più, puoi trovare programmi shareware gratuiti o economici (vedi http://shareware.com/) che possono rendere una serie di immagini in una GIF animation. E dal momento che la rete e' piena di balletti, luccichii e GIF in movimento, ci sono mucchi di siti di clip-art gratuiti da cui scaricare materiale per le tue pagine. Forniamo una lista di link a questi siti alla fine della lezione.
Un altro vantaggio di questo media type e' che l'intero file grafico non deve essere scaricato prima di cominciare a funzionare; una animated GIF comincera' a visualizzare la prima "inquadratura" appena abbastanza informazioni saranno state scaricate. Oltre tutto, essa appare come uno "scorrere" e puoi creare file d'animazione di vari k che possono cominciare a funzionare quando almeno il 20% del file e' stato ricevuto dell'utente.
Quali sono gli effetti negativi delle animated GIF? Il primo e' che a causa dell'attrazione esercitata dal movimento, possono distrarre dagli altri contenuti della pagina. L'altro svantaggio e' che esse sono usate normalmente come novita', e dopo un po' cominci a vedere lo stesso orsacchiotto animato. Puo' cominciare a sembrare scontata o infantile.
Le animazioni possono essere molto utili per mostrare informazioni temporizzare, come mostrare i cambiamenti nel tempo di una certa caratteristica (ad esempio l'erosione di una spiaggia, crescita di una pianta, variazioni nei prezzi del mercato azionario) o per dimostrare processi (ad esempio come cambiare un pneumatico, come il sangue attraversa il cuore). Come le immagini GIF, i file sono minori per grafici che hanno ampie regioni continue a colore pieno e contorni definiti, rispetto a immagini con maggiori variazioni spaziali come le fotografie.
Questa dovrebbe essere una lezione semplice perche' il codice HTML per l'inserimento di una GIF animata e' esattamente uguale a quello che abbiamo studiato per quelle "regolari" (o inanimate?) alla lezione 7a:
<img src="filename.gif" alt="alternative text" width=X height=Y>
dove X e' la larghezza ed Y e' l'altezza dell'immagine in pixel. Puoi anche includere le opzioni per l'allineamento sinistro e destro che abbiamo visto nella lezione 20.
Nota: Se non possiedi il documento di lavoro dalla precedente lezione, scaricane una copia ora.
Per il nostro sito Volcano Web aggiungeremo un animated GIF slide show che ripropone gli eventi che occorsero il 18 Maggio 1980, giorno dell'eruzione del Monte St Helens. Questo consiste in foto e diagrammi, per cortese collaborazione del USGS/Cascades Volcano Observatory.
Per vedere e scaricare l'animazione GIF, visita il Lesson 29a Image Studio. Salva questa immagine dentro pictures.
Per prima cosa andremo a creare una pagina HTML di base che mostri la GIF animation. Poi costruiremo un link dalla nostra pagina Luoghi Vulcanici negli USA che carichera' l'animazione in una finestra web separata.
<html> <head> <title>Mount St Helens: Eventi del 18 Maggio 1980</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> <center> <img src="../pictures/msh_events.gif" alt="Animazione Mount St Helens" vspace=10 width="400" height="135"><br> <font face="verdana,helvetica,arial" size=2 color=#999999> lo slide show si carichera' ed eseguira' automaticamente</font><p> <i>Cortesia del <a href="http://vulcan.wr.usgs.gov/">USGS/Cascades Volcano Observatory</a>.</i> </center> </body> </html>
NOTA: Dal momento che la GIF animation puo' scorrere in "pezzetti" piu' lenti attraverso una connessione web piu' lenta, noi forniamo un messaggio nel breve testo sotto l'immagine perche' il visitatore sappia che deve aspettare un po' mentre l'animazione si carica e parte.
Ora modificheremo l'HTML nel file usa.html in modo che usi JavaScript per mostrare il nostro nuovo documento in una finestra web rimpicciolita.
<p>
<a href="#fotos" onClick="window.open('msh_may18.html',
'msh', 'width=440,height=280,status,menubar')"
onMouseOver="window.status='guarda l\'animazione degli eventi eruttivi';
return true"><img src="../pictures/projector.gif" alt="showtime!"
width="46" height="32" align="left" border=0></a>
Guarda la <a href="#fotos" onClick="window.open('msh_may18.html',
'msh', 'width=440,height=280,status,menubar')"
onMouseOver="window.status='guarda l\'animazione degli eventi eruttivi';
return true">animazione degli eventi</a> per questa eruzione vulcanica
[194k GIF Animation].
NOTA: Stiamo usando il codice JavaScript dalla lezione 27d per l'apertura di un file HTML specifico msh_may18.html in una nuova web window che sia 440 pixel in larghezza e 280 pixel in altezza. Abbiamo anche incluso il codice JavaScript mouseOver per fornire un testo descrittivo quando l'utente muove il mouse sul link (vedi lezione 27a). La pagina dello slide show e' impostata per aprirsi sia con il click sull'icona del proiettore che sul link vicino all'icona.
Nota anche che l'informazione sul link da' al visitatore anche un senso di quale tipo di media ( e la dimensione del file) sia incluso nella pagina che segue il link.
Ora dovresti renderti conto che se continuiamo a aggiungere feature che aprono nuove finestre via JavaScript, alcuni visitatori potrebbero non essere sicuri su come tornare alla pagina principale e quindi tendere a lasciare un ammasso di finestre che ostruiscano completamente il loro desktop. Li possiamo aiutare un po' aggiungendo un bottone JavaScript per chiudere una finestra.
<form> <input type=button value="Ritorna a Luoghi Vulcanici negli USA" onClick="self.close()"> </form>
NOTA: Abbiamo aggiunto un nuovo elemento FORM, type=button che inserisce un bottone con stile a normale interfaccia, con l'etichetta di testo nell'opzione value=.... Aggiungiamo un JavaScript event da verificarsi quando il bottone e' premuto che dice al documento che risiede in (self) di chiudersi. In realta', abbiamo creato un bottone personalizzato che chiude questa finestra come se fosse stato il bottone della barra di Windows ad essere stato premuto.
Aggiungi una animated GIF alle tue pagine personali. Prova alcune di queste fonti per usare immagini da usare:
Se sei stanco di vedere le animazioni in una web page, le puoi congelare cliccando il bottone Stop nel tuo web browser. Quando crei i tuoi file di GIF animation, hai alcune opzioni per il controllo del numero delle volte con cui l'animazione si ripropone, quindi puoi evitare che ci sia un movimento infinito.
E come le GIF statiche, le puoi usare come link, vedi la lezione 8e. Se troviamo, in un sito sulla Cheeselover's Free Clip art, una GIF animata di un pezzo di formaggio ballerino, possiamo creare un link ad un altro sito o file HTML scrivendo:
<a href="http://www.cheeseanonymous.com/"><img src="dancing_cheese.gif" width=200 height=100 alt="animazione del formaggio ballerino" border=0></a>
Per altre informazioni sulle GIF Animation, vedi Royal E. Frazier's GIF Animation on the WWW e Web Developer's Virtual Library
Viva I Video! Film nelle tue pagine web!
Writing HTML: Lezione
29a: Anima la mia GIF!
©1994-1999 Maricopa Center for Learning and
Instruction (MCLI)
Maricopa Community
Colleges
The 'net connection at MCLI is Alan Levine
Comments to
mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML