Abilitare la cache del browser delle risorse statiche

Per abbattere i tempi di attesa e caricamento delle pagine del sito occorre configurare correttamente gli header HTTP delle varie risorse servite al browser di navigazione in modo da consentirne il caching lato client sul browser.

Configurando opportunamente il vostro web server potrete fare in modo di far scaricare dal browser immagini, video, script e css solo la prima volta che verranno richiesti e mantenendoli nella cache del browser per tutte le richieste successive.

Soluzione con file .htaccess (Linux)

Per poter abilitare la cache HTTP delle risorse statiche dovete semplicemente verificare che il vostro sito o blog utilizzi Apache con i moduli mod_headers e mod_expires attivi, dopodiché non dovete far altro che aggiungere al vostro file .htaccess (solitamente posizionato nella root del sito) una configurazione analoga alla seguente:

  # Abilita l'Expires ed imposta il default to 0
  ExpiresActive On
  ExpiresDefault "access plus 0 seconds"

  # Imposta la cache dei file multimediali ad 1 anno
  ExpiresDefault "access plus 1 year"
  Header append Cache-Control "public"
 
  # Imposta la cache delle immagini a 1 settimana
  ExpiresDefault "access plus 1 week"
  Header append Cache-Control "public"
 
  # Imposta la cache delle risorse aggiornate di frequente a 1 mese
  ExpiresDefault "access plus 1 month"
  Header append Cache-Control "proxy-revalidate"
 
  # Forza la disabilitazione della cache per le risorse dinamiche
  ExpiresActive Off
  Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
  Header set Pragma "no-cache"
 
Riferimenti:

- http://httpd.apache.org/docs/current/mod/mod_expires.html
- https://gtmetrix.com/add-expires-headers.html

Soluzione con  web.config (Windows)

E' possibile ottenere il risultato inserendo nella cartella contenente i file di cui forzare il caricamento in cache un file web.config con il seguente contenuto:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMaxAge="14.00:00:00" cacheControlMode="UseMaxAge"/>         </staticContent>
  </system.webServer>
</configuration>

Così forziamo il cache dei file contenuti nella cartella (images, css o js che siano) per un giorno.
Volendo forzare la cache per 30 giorni occorre impostare il parametro cacheControlMaxAge al valore "30.00:00:00"

Per forzare il caching di una sola risorsa occorre inserire il web.config nella cartella contenente la risorsa ed utilizzare l'elemento location nel seguente modo:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <location path="path/to/the/file">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="10.00:00:00" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

Per disabilitare la cache invece degli elementi della cartella utilizzare il seguente web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Cache-Control" value="no-cache" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Riferimenti:
- http://blog.janjonas.net/2011-08-21/microsoft-iis-7-enable-client-side-browser-caching-static-content-web-config

Securimage PHP captcha

Securimage è un CAPTCHA in PHP open-source che, attraverso la generazione di immagini complesse e codice di controllo, protegge i form del proprio sito dagli spam bots.

Può facilmente essere inserito in un form già esistente, richiede un web server con PHP e le librerie grafiche GD e fornisce anche una versione audio del codice.

Può essere scaricato a questo indirizzo: http://www.phpcaptcha.org/download/

Installazione
Securimage non richiede particolari congigurazioni; una volta scaricato occorre visualizzare l'immagine del captcha all'intetno del form e far controllare il codice inserito dall'utente al codice di controllo.
Una volta scaricato il codice e caricati i file sul web server nella directory www.yoursite.com/securimage/ inseriamo l'immagine nel form con il codice:


Ora inseriamo il campo input per raccogliere l'input dell'utente:

Quindi inseriamo all'inizio del file che valida i dati del form l'attivazione delle variabili di sessione:

Ora inseriamo la parte di codice che effettua il controllo dell'input:

// Creo un istanza della classe securimage
include_once $_SERVER['DOCUMENT_ROOT'].'/securimage/securimage.php';
$securimage = new Securimage();

// Effettuo il controllo che il codice inserito sia corretto
if ($securimage->check($_POST['captcha_code']) == false) {
  // Se il codice è errato gestisco l'errore
  echo "Il codice inserito non risulta corretto.

";
  echo "Riprova.";
  exit;
}

Per maggiori informazioni il sito di riferimento è http://www.phpcaptcha.org/

URL dei Feed RSS di blogger

Blogger consente di leggere i post del blog con un feed reader o inserirli in un sito web collegandosi a specifici URL.
Se il blog ha indirizzo http://blog.itcline.it i post saranno disponibili in ordine cronologico all'inidirizzo http://blog.itcline.it/feeds/posts/default?alt=rss.
E' possibile selezionare solo n sottoinsieme di post utilizzando le etichette.
Come?
Attribuisco ai post che mi interessano un etichetta e poi posso richiamare i post con l'etichetta assegnata all'indirizzo: http://blog.itcline.it/feeds/posts/default/-/"etichetta".

Per maggiori informazioni è disponibile una esauriente guida di google all'indirizzo:  http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=97933

jQuery-AJAX con $.get() e $.post()

Pagina in aggiornamento

$.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url: stringa contenente l'url verso il quele è inviata la richiesta.
data: stringa o array chiave:valore contenente i dati da inviare al server insieme alla richiesta.
success(data, textStatus, jqXHR): callback function che viene eseguita se la richiesta ha avuto successo.
dataType: Tipo di dato in risposta alla richiesta. Default: Intelligent Guess (xml, json, script, text, html).

jQuery-AJAX con $.load()

La chiamata AJAX con il metodo $.load() carica codice HTML contenuto o generato da un file remoto in un elemento (solitamente un "div") della pagina HTML.
La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.

La sintassi è la seguente:

$(document).ready(function(){  
  $("a#link_che_attiva_la_chiamata_ajax").click(function(){   
    $("div#dove_inserisco_il_codice_ricevuto").load(
      url,    
      {data},    
      function(){     
        // funzione callback da eseguire alla fine    
      });    
    });   
});

I parametri che possono essere gestiti sono:

Nome Opzione	Tipo	Default	Descrizione
url	String		L'URL della pagina contenente l'HTML da caricare.
data (opzionale)	Map, String		Coppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST.
callback (opzionale)	Callback		Funzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest. La callback può anche essere utilizzata senza paramentri se questi non servono. Es: function (responseText, textStatus, XMLHttpRequest).

Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".

File "chiamante.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>jQuery - Test funzione load()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  $("a#ancoraAjax").click(function(){
   $("div#contenutoAjax").load(
    "remoto.php",
    {numero: 10, stringa: 'pippo'},
    function(){
     alert('dati caricati');
    });
    });
   });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
File remoto.php:

<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>

Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax