Generare immagini on the fly e’ molto utile per prevenire furto di contenuto da parte di spider o per prevenire eventuali attacchi di Spam ormai esageratamente diffuso nelle nostre caselle di posta.
Di seguito elenchiamo i passi da seguire per generare un’immagine a partire dal testo. Innanzitutto occorre abilitare l’estensione GD. Per fare cio’ occorre editare il file php.ini ed abilitare:
extension=php_gd2.dll
Riavviare il server Apache e creiamo una cartella chiamata dynatext all’interno del nostro esempio. Copiamo i font che utilizzeremo in questa cartella. Scaricare:
http://www.alistapart.com/d/dynatext/heading.php.txt
e salvarlo come heading.php all’interno della cartella dynatext.
Apriamo heading.php ed impostare $font_file con il nome del file che abbiamo copiato nella stessa cartella; cambiare la dimensione del font.
Scaricare http://www.alistapart.com/d/dynatext/replacement.js e salvarlo nella cartella dynatext.
Modificare il replaceSelector con H2 ed H1 e cambiare hideFlickerTimeout con un valore piccolo (per es. 100).
Di seguito un esempio dei due file modificati:
heading.php
<?php
/*
Dynamic Heading Generator
By Stewart Rosenberger
http://www.stewartspeak.com/headings/
This script generates PNG images of text, written in
the font/size that you specify. These PNG images are passed
back to the browser. Optionally, they can be cached for later use.
If a cached image is found, a new image will not be generated,
and the existing copy will be sent to the browser.
Additional documentation on PHP’s image handling capabilities can
be found at http://www.php.net/image/
*/
$font_file = ‘trebuc.ttf’ ;
$font_size = 23 ;
$font_color = ‘#000000’ ;
$background_color = ‘#ffffff’ ;
$transparent_background = true ;<br />
$cache_images = true ;
$cache_folder = ‘cache’ ;
replacement.js:
function com_stewartspeak_replacement() {
/*
Dynamic Heading Generator
By Stewart Rosenberger
http://www.stewartspeak.com/headings/
This script searches through a web page for specific or general elements
and replaces them with dynamically generated images, in conjunction with
a server-side script.
*/
replaceSelector(“h1”,”dynatext/heading.php”,true);
var testURL = “dynatext/test.tif” ;
var doNotPrintImages = false;
var printerCSS = “replacement-print.css”;
var hideFlicker = false;
var hideFlickerCSS = “replacement-screen.css”;
var hideFlickerTimeout = 100;
Adesso occorre creare un’immagine PNG (Es.: test.tif) all’interno del nostro sito. E’ bene che sia piu’ piccola possibile (1×1 pixel). Questa immagine verra’ utilizzata per testare le funzionalita’ del browser. Se test.tif non e’ presente il testo non puo’ essere rimpiazzato. E’ adesso possibile modificare il file php aggiungendo i riferimenti a replacement.js:
testImg.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
<head>
<title>Test Rimpiazzo immagine</title>
<script src=”dynatext/replacement.js” type=”text/javascript”></script>
</head>
<body onload=”window.resizeTo(800, 600);”
onresize=’setTimeout(“window.resizeTo(800, 600);”, 100);’>
<h1>Contenuto H1</h1>
Carichiamo l’immagine testImg.php con un browser che supporti le immagini e vedremo il title sostituito con un’immagine.
Per maggiori informazioni visitare:
http://www.alistapart.com/articles/dynatext/
Una corretta disposizione degli elementi nella pagina aiuta lo spider. Pur non cambiando nulla e’ ad esempio migliore una struttura table less ma anche nel caso di uso di tabelle e’ piu’ utile una struttura del tipo:
<table>
<tr>
<td><!– empty table cell –></td>
<td rowspan=”2” valign=”top”>Content</td>
</tr>
<tr>
<td valign=”top”>Navigation</td>
</tr>
</table>
rispetto all’uso della seguente struttura:
<table>
<tr>
<td valign=”top”>Navigation</td>
<td valign=”top”>Content</td><br />
</tr>
</table>
E’ assolutamente sconsigliato l’uso di frames.