Realizzare un banner di sfondo cliccabile

Si stanno diffondendo molto i banner di sfondo cliccabili. L’idea di base è avere un’immagine di sfondo che venga visualizzata all’esterno dei “contorni” del nostro sito, e che sia cliccabile.

Dopo aver consultato diverse guide, come sempre sono arrivato a una soluzione che è un mix di varie tecniche e tentativi. L’ho applicata a WordPress ma è valida su qualsiasi sito.

Supponiamo di avere 1000 pixel come larghezza del nostro sito, dovremo preparare un’immagine di sfondo più larga di quei 1000px, ad esempio 2000px, l’altezza è a piacere, ad esempio 1500px.
Lasciamo uno spazio di 100px (sempre modificabile a piacere) in alto, in modo che il banner sia visibile anche sui tablet (dove quasi sicuramente le bande laterali del banner verranno “tagliate” via).

Ecco un esempio di immagine “a ferro di cavallo”:

Banner di sfondo

vedete che viene lasciato vuoto lo spazio che verrà occupato dal sito.

Aggiungiamo nel body del codice html le seguenti righe:

<body>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank"><span>&nbsp;</span></a>

e aggiungiamo al foglio di stile i seguenti parametri:

body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
a#skinlink {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 display: block;
 z-index: 1;
}
#skinlink span {
 display: none;
}

dove al posto di bannersfondo.jpg dovete mettere il percorso alla vostra immagine di sfondo.

Ulteriore personalizzazione: se volete, potete rendere visibile lo sfondo solo in determinati giorni della settimana, basta racchiudere il codice in questo blocco condizionale:

<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank">
<span>&nbsp;</span></a>
<?
}
?>

dove date(‘w’) restituisce il numero di giorno della settimana corrente, ponendo 0 = Domenica e 6 = Sabato. Nell’esempio, il banner viene mostrato solo il sabato e la domenica.
Per evitare che il sito venga spostato di 100px di margine dall’alto negli altri giorni, si può lasciare nel foglio di stile generale le impostazioni “standard” per il body vostro sito, e aggiungere nell’header, dopo aver richiamato tutti i fogli di stile, il seguente codice:

<head>
...
<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<style>
body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
</style>
<?
}
?>
</head>

Controllare se il browser è mobile con php

Ecco una semplice funzione PHP per controllare se il browser internet che sta visitando la vostra pagina web è una versione mobile:

function web_mobile() {

$useragent = $_SERVER[‘HTTP_USER_AGENT’];

$mobileagents = Array(
“acer”, “acoon”, “acs-“, “abacho”, “ahong”, “airness”, “alcatel”, “amoi”, “android”,  “applewebkit/525”, “applewebkit/532”, “asus”, “audio”, “au-mic”, “avantogo”, “becker”, “benq”, “bilbo”, “bird”, “blackberry”, “blazer”, “bleu”, “cdm-“, “compal”, “coolpad”, “danger”, “dbtel”, “dopod”, “elaine”, “eric”, “etouch”, “fly ” , “fly_”, “fly-“, “go.web”, “goodaccess”, “gradiente”, “grundig”, “haier”, “hedy”, “hitachi”, “htc”, “huawei”, “hutchison”, “inno”, “ipaq”, “ipod”, “jbrowser”, “kddi”, “kgt”, “kwc”, “lenovo”, “lg “, “lg2”, “lg3”, “lg4”, “lg5”, “lg7”, “lg8”, “lg9”, “lg-“, “lge-“, “lge9”, “longcos”, “maemo”, “mercator”, “meridian”, “micromax”, “midp”, “mini”, “mitsu”, “mmm”, “mmp”, “mobi”, “mot-“, “moto”, “nec-“, “netfront”, “newgen”, “nexian”, “nf-browser”, “nintendo”, “nitro”, “nokia”, “nook”, “palm”, “panasonic”, “pantech”, “philips”, “phone”, “pg-“, “playstation”, “pocket”, “pt-“, “qc-“, “qtek”, “rover”, “sagem”, “sama”, “samu”, “sanyo”, “samsung”, “sch-“, “scooter”, “sec-“, “sendo”, “sgh-“, “sharp”, “siemens”, “sie-“, “softbank”, “sony”, “spice”, “sprint”, “spv”, “symbian”, “tablet”, “talkabout”, “tcl-“, “teleca”, “telit”, “tianyu”, “tim-“, “toshiba”, “tsm”, “up.browser”, “utec”, “utstar”, “verykool”, “virgin”, “vk-“, “voda”, “voxtel”, “vx”, “wap”, “wellco”, “wii”, “windows ce”, “wireless”, “xda”, “xde”, “zte” );

$is_mobile = false;

foreach ($mobileagents as $device) {

if (stristr($useragent, $device)) {

$is_mobile = true;
break;

}

}

return $is_mobile;
}

Cosa fa questa funzione? Prende il parametro “HTTP_USER_AGENT” che identifica il browser di chi sta navigando il nostro sito, e lo confronta con un elenco fornito attraverso l’array “$mobileagents”, che potete personalizzare aggiungendo o togliendo voci (l’ho creato, come sempre, partendo da varie liste di browser mobili trovate in rete).
Se il browser è mobile il valore di ritorno è TRUE (vero), altrimenti FALSE (falso).
Facile e semplice!

Convertire CString in char*

(CString to char* conversion)

Per convertire una stringa in formato CString in una in formato char:

char temp[256]; //esempio
CString string;
//codice...
strcpy(temp,LPCTSTR(string)); //strcpy(destinazione, sorgente)

ora la stringa temp contiene la CString.