Per fare in modo che gli utenti che accedono al nostro sito web siano tenuti aggiornati circa gli ultimi argomenti trattati, si ricorre al sistema di visualizzare una breve descrizione delle news, accompagnata dal link alle news stesse. Per far ciò si utilizza il banner, cioè un supporto grafico dove appare, una alla volta, la descrizione delle notizie alle quali vogliamo dare risalto.
Esistono molti sistemi per realizzare un banner, quello che vi vado ad illustrare non é il più semplice ma é estremamente versatile dal momento che ogni componente del progetto é realizzato autonomamente. Il progetto consente future implementazioni come quella di interfacciare dinamicamente il banner con un archivio notizie.
Nel corso della realizzazione
 |
utilizziamo il software The GIMP, con il quale realizziamo la grafica |
|
|
il linguaggio PHP che ci consente di scrivere le nostre news sulla grafica |
|
|
il linguaggio JavaScript con il quale
visualizziamo ciclicamente le notizie |
The GIMP è un software di grafica appartenente al Mondo Open Source, con licenza GNU, il che ci consente di utilizzarlo senza restrizioni. The GIMP è reperibile sul sito http://gimp.linux.it/www/: sono disponibili versioni per Linux, Window e Mac. Una piccola guida sul funzionamento di The GIMP si trova su http://grafica.html.it/guide/leggi/15/guida-gimp/ e risorse per The GIMP su http://www.volalibero.it/gimp.html
L'immagine precedente che utilizziamo come base per visualizzare le nostre news é stata realizzata con The GIMP tramite i seguenti passaggi:
|
|
apriamo The GIMP e scegliamo FILE > nuovo > larghezza 728, altezza 90 |
|
|
Script-Fu > Decorazioni > Angoli arrotondati |
|
|
nella finestra Livelli selezionare il livello Background |
|
|
nella finestra di The GIMP scegliere il colore di sfondo (normalmente è settato sul bianco) |
|
|
nella finestra IMMAGINE > Modifica > Riempi con il colore di sfondo |
|
|
nella finestra IMMAGINE > Immagine > Scala immagine > cliccare sulla catena per rendere le due dimensioni indipendenti e scrivere: larghezza 730, altezza 70 |
|
|
nella finestra IMMAGINE > file > Salva con nome > Seleziona tipo di file scegliere JPG > esporta > OK |
The GIMP è un software che richiede una notevole applicazione per scoprirne tutte le possibilità ma i risultati ripagano ampiamente lo studio.
<?php
// Set the content-type
header("Content-type:
image/jpeg");
// Create the image
$im
= imageCreateFromJpeg("immagine.jpg");
// Create some colors
$white
= imagecolorallocate($im,
255, 255, 255);
$gray
= imagecolorallocate($im,
128, 128, 128);
$black
= imagecolorallocate($im,
0, 0, 0);
// The text
to
draw
$text
= $_GET["messaggio"];
// Replace
path
by
your
own
font path
$font
= 'arial.ttf';
// Add
some shadow
to
the text
imagettftext($im,
20, 0, 16, 37, $gray,
$font,
$text);
// Add
the text
imagettftext($im,
20, 0, 14, 35, $black,
$font,
$text);
// Using
imagepng()
results
in clearer
text
compared
with
imagejpeg()
imagejpeg($im);
imagedestroy($im);
?>
PHP è un software Server (cioè interagisce direttamente con il server e produce in output una pagina HTML che sarà visualizzata dal browser) di script (trattasi di piccoli programmi autonomi contenuti all'interno dei tag <?php ... ?>) . Per testare i propri script al di fuori dell'Host Web è necessario creare sul computer l'ambiente PHP, reperibile in rete su http://www.easyphp.org/telechargements.php3 (in questo caso essendo presenti istruzioni grafiche si deve abilitare la dll gd2 nella configurazione PHP togliendo il segno ; presente all'inizio della riga). Per testare il funzionamento del banner è necessario scaricare i tre files del progetto dentro la cartella www di easyphp. Va da se che lo spazio web che si utilizza dovrà avere abilitato il PHP e le librerie grafiche.
Risorse, guide e manuali su PHP sono scaricabili da http://pro.html.it
Analizziamo le istruzioni contenute nello script creaimage.php
|
|
con l' istruzione header("Content-type: image/jpeg"); stabilisco il corretto tipo d'immagine |
|
|
con l'istruzione $im = imageCreateFromJpeg("immagine.jpg"); riservo spazio dove memorizzare nella variabile $im l'immagine |
|
|
con le istruzioni: $white =
imagecolorallocate($im, 255, 255, 255); predispongo i tre colori (bianco, grigio e nero) che utilizzo nelle scritte |
|
|
con l'istruzione $text = $_GET["messaggio"]; carico nella variabile $text il contenuto della variabile messaggio inclusa nella chiamata dello script (creaimage.php?messaggio=news n. 1) |
|
|
con l'istruzione $font = 'arial.ttf'; scelgo il font (in questo caso arial: i font disponibili sono nella cartella fonts di window) |
|
|
con le due istruzioni successive imagettftext($im,
20, 0, 16, 37, $gray, $font, $text); |
|
|
costruisco l'immagine completa dalla variabile $im imagejpeg($im); |
|
|
distruggo la variabile $im per recuperare spazio imagedestroy($im); |
<body
bgcolor="#80A0C0">
<a href=""
id="link"><img
border="0"
src=""
id="immagine"
class="cursore" alt=""
onmouseover="ritardo=ritardo*2;"
onmouseout="ritardo=ritardo/2;"></a>
<script>
<!--
var frames=0;
var ritardo=3000;
link1="http://www.ir3ip.net/i0jfe";
link2="http://www.qsl.net/i0jfe";
link0="http://www.csarieti.it";
messaggio1="Ultime dal sito:
attenuatore
PGreco";
messaggio2="Ultime dal sito: calcoli con le impedenze";
messaggio0="Ultime dal sito: gli Italiani in classifica Morse
Runner";
var primimm=new
Image();
var secoimm=new
Image();
var zeroimm=new
Image();
primimm.src="creaimage.php?messaggio="+messaggio1;
secoimm.src="creaimage.php?messaggio="+messaggio2;
zeroimm.src="creaimage.php?messaggio="+messaggio0;
function
doblink
(){
++frames;
switch
(frames)
{
case (1):
document.getElementById("immagine").src=primimm.src;
document.getElementById("immagine").alt=messaggio1;
document.getElementById("link").href=link1;
break;
case (2):
document.getElementById("immagine").src=secoimm.src;
document.getElementById("immagine").alt=messaggio2;
document.getElementById("link").href=link2;
break;
default:
frames=0;
document.getElementById("immagine").src=zeroimm.src;
document.getElementById("immagine").alt=messaggio0;
document.getElementById("link").href=link0;
}
setTimeout("doblink()",ritardo);
}
doblink();
//-->
</script>
<noscript>
<h3 align="center">Attenzione:<br
/> il browser non supporta
JavaScript!</h3>
</noscript>
</body>
JavaScript è un software Client (cioè interagisce direttamente con il browser dell'utente) di script (trattasi di piccoli programmi autonomi contenuti all'interno dei tag <script> ... </script>). JavaScript è un programma orientato agli eventi (l'evento è posizionare o meno il mouse sopra l'immagine del banner) e agli oggetti (gli oggetti in questo caso sono l'immagine del banner identificata con id=immagine e il collegamento ipertestuale identificato con id=link).
Mi servo dell'istruzione setTimeout per richiamare dopo un certo numero dei secondi la funzione doblink tramite la quale visualizzo ciclicamente le news.
Risorse, guide e manuali su JavaScript sono scaricabili da http://pro.html.it
Analizziamo le istruzioni contenute nella pagina provaimage.htm
|
|
<body bgcolor="#80A0C0"> |
|
|
var frames=0; |
|
|
var primimm=new Image(); |
|
|
function doblink
(){ Con l'istruzione switch (frames) vado ad attribuire agli oggetti immagine: src e alt e all'oggetto link dei valori a seconda che frames valga 1, 2 o 3; in particolare se frames vale 3 gli sarà attribuito il valore 0 per far si che il ciclo ricominci dall'inizio. Tramite setTimeout richiamo la funzione doblink dopo un certo numero di secondi stabilito dal valore assunto dalla variabile ritardo. |
|
|
doblink(); |
L'intero progetto è contenuto nel file scritta_grafica.zip
Giovanni Franceschini