Come costruire file "animati" in Html

Il modo forse più semplice e facilmente modificabile è il seguente.  Prima di leggere quanto segue vedi, come esempio, questo file (tienilo aperto per almeno una ventina di secondi senza fare niente, poi prova a cliccare "avanti" ed "indietro").

(1)  Si costruisce una cartella in cui mettere tutti i file.  Supponiamo che si chiami ANIM.

(2)  Costruiamo il primo file, da chiamare per far partire l'animazione.  Se vogliamo che l'animazione parta mettendo come indirizzo solo percorso/ANIM, se percorso è il percorso in cui è ANIM, chiamiamo questo file index.html  (non dovremo poi mettere il suo nome per aprirlo perché questo è il nome "standard" dei file: se metto l'indirizzo di una cartella che contiene un file con questo nome, esso viene automaticamente aperto)

Un modo facile per costruire i file è scriverli con una applicazione per scrivere testi (ad esempio BloccoNote) e poi salvarli con l'estensione "html" o modificare dopo l'estensione originale (che era ad esempio "txt").

(3)  I file hanno tutti una struttura molto semplice.  L'utente deve solo modificare le parti evidenziate in viola:


<head>
<title>Titolo</title>
<meta http-equiv="refresh" content="Durata in sec;
url=File in avanti a cui si è trasferiti">
</head>

<center><b>
<a href="File indietro a cui si è trasferiti">INDIETRO</a>  
<a href=File in avanti a cui si è trasferiti>AVANTI</a><br>
<img src=Immagine>
</b>
<br>
<b style="font-size:125%">testo</b>
</b></center>

<head> e </head> delimitano alcuni comandi per il browser.
Il Titolo è il nome che compare sulla barra della applicazione usata per aprire i file html.
Durata in sec è il tempo che trascorre prima che ci si trasferisca automaticamente al nuovo file.
File in avanti a cui si è trasferiti è il nome del file Html a cui si verrà trasferiti automaticamente o cilccando AVANTI.
File indietro a cui si è trasferiti è il nome del file Html a cui si verrà trasferiti cliccando INDIETRO.
<center> e </center> racchiudono quanto si vuole vedere visualizzato al centro.
<b> e </b> racchiudono quanto si vuole vedere in Bold (grassetto).
<br> indica un Break (a capo).
font-size dimensiona i caratteri (100% è la dimensione standard).
Immagine è il nome del file immagine che si vuole inserire. Se poi inseriamo altre immagini che vogliamo corrispondano esattamente a questa immagine, a parte alcuni particolari, dovremo inserirle delle stesse dimensioni (vedi qui per immagini realizzate con R).
Testo è l'eventuale testo che vogliamo visualizzare.

(4)  Il primo file può non contenere "INDIETRO". Ecco un esempio di come si può modificare tale file in modo che "AVANTI" rimanga nella stessa posizione (scrivo INDIETRO in "bianco" e non metto il link, che è comandato da <a…>…</a>).


<head>
<title>Anim</title>
<meta http-equiv="refresh" content="5;
url=1.html">
</head>
<center><b>
<b style="color:white">INDIETRO</b>  
<a href=1.html>AVANTI</a><br>
<img src=0.gif>
</b>
<br>
<b style="font-size:125%">y = sin(k*x), k = 4</b>
</b></center>

(5)  L'animazione che hai esaminato inizialmente parte proprio con il file precedente (che supponiamo si chiami index.html) e prosegue con i seguenti (1.html, …, 8.html). I tempi di durata di ogni file possono essere diversi da quelli di questo esempio (basta cambiare in ogni file il numero dopo "content") e, ovviamente, il numero di file potrebbe essere minore o maggiore di 8. I nomi dei file e delle immagini (qui indicati con numeri interi) potrebbero essere qualunque (senza contenere spazi bianchi).


<head>
<title>Anim</title>
<meta http-equiv="refresh" content="3;
url=2.html">
</head>
<center><b>
<a href="index.html">INDIETRO</a>  
<a href=2.html>AVANTI</a><br>
<img src=1.gif>
</b>
<br>
<b style="font-size:125%">y = sin(k*x), k = 3</b>
</b></center>
                ...

<head>
<title>Anim</title>
<meta http-equiv="refresh" content="9;
url=0.html">
</head>
<center><b>
<a href="7.html">INDIETRO</a>  
<a href=0.html>AVANTI</a><br>
<img src=8.gif>
</b>
<br>
<b style="font-size:125%">y = sin(k*x), k = -4</b>
</b></center>

(6)  L'ultimo file potevamo farlo tornare al file index.html; in questo caso lo abbiamo fatto andare ad un nuovo file 0.html, sotto riportato, che a differenza di index.html, visualizza anche "INDIETRO":


<head>
<title>Anim</title>
<meta http-equiv="refresh" content="3;
url=1.html">
</head>
<center><b>
<a href="8.html">INDIETRO</a>  
<a href=1.html>AVANTI</a><br>
<img src=0.gif>
</b>
<br>
<b style="font-size:125%">y = sin(k*x), k = 4</b>
</b></center>

(7)  Per realizzare grafici o immagini con R che siano egualmente dimensionate dobbiamo usare il comando dev.new o se si è caricato il file source("http://macosa.dima.unige.it/r.R") aprendo ogni grafico con BF <- xxx, HF <- yyy con gli stessi valori di xxx e yyy (ad esempio con BF <- 6 e HF <- 4).