Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Il 404 perfetto

Il 404 perfetto

di Ian Lloyd, traduzione di Gdesign e Chenoa, 25 Febbraio 2004

Versione Stampabile

L'articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Oops. Qualcosa è andato storto. Non siete sicuri - colpa vostra? Colpa del sito web? Adesso che cosa fate?

Benvenuti nel mondo della pagina di Errore 404. Avete chiesto una pagina - digitando un URL direttamente nella barra degli indirizzi o cliccando su un vecchio collegamento che avete trovato nel bel mezzo del cyberspazio che ormai non esiste più. Un sito web "user-friendly" vi darebbe una mano per assistervi mentre molti altri semplicemente non farebbero nulla per spiegare quale sia il problema. Che cosa possiamo fare di meglio?

Non entrerò nei particolari su come impostare il vostro server per rilasciare una pagina 404 personalizzata, piuttosto, farò riferimento a questi articoli:

Tuttavia, vi suggerirò delle strategie per costruire una pagina 404 su misura che per molti non è altro che una causa persa.

Per cominciare, dobbiamo esaminare le ragioni più comuni per cui la gente si trova davanti ad una pagina 404:

Equivalgono tutti alla stessa cosa, ma bisogna che siano utilizzati in modo differente e con cura - il messaggio 404 deve essere personalizzato per ogni eventualità. Ci sono alcuni trucchi che potete applicare a tutti gli scenari, ma il mio primo suggerimento è semplice...

Non puntate il dito

Ditegli qual'è l'errore, ma non ammonite l'utente, anche se sapete che è colpa sua! Le frasi, "potrebbe avere" e "possibilmente" sono ottime da utilizzare. Non partite con il piede sbagliato con questo visitatore del vostro sito - potrebbe crearvi dei problemi.

Il 404 deve avere

Oltre al testo "qualcosa non è andato a buon fine" ,dovete assicurarvi che le vostre pagine di errore abbiano:

Inoltre siate sicuri di ridurre l'uso del linguaggio professionale. Cioè, qui abbiamo parlato dei 404 non è vero? Siamo in ottima compagnia. Ma la sessantenne Doris, che naviga in un sito web e si trova davanti ad un link interotto, non ha alcun indizio su cosa sia un errore 404. Se volete usare la frase "Errore 404", fatelo in maniera precisa inserendo una nota in calce, un cenno per far comprendere anche a chi non capisce il linguaggio web.

Adesso vediamo come il 404 possa lavorare per voi, anziché contro di voi.

Su questo dobbiamo essere intelligenti

A questo punto, dovrei far notare che questo può richiedere una determinata quantità di JavaSscript (a seconda delle impostazioni del vostro server, potreste non essere in grado di utilizzare scripting "server-side" per fare questo lavoro). Dobbiamo essere sicuri di adoperare il <noscript> servendoci di un messaggio appropriato per coloro che hanno disabilitato lo scripting. Sarebbe preferibile, se possibile, utilizzare lo scripting "server-side", in modo da adottare un codice appropriato senza problemi di accessibilità e di supporto da parte dei browser.

Prima di tutto, abbiamo bisogno di impostare alcune variabili:

var strReferrer=document.referrer.toLowerCase();
var blnSearchReferral = false;
var blnInsiteReferral = false;
var str="";
var strSite = "";

Adesso come le utilizzato?

L'URL digitato male

Un URL digitato male (o un bookmark di vecchia data) non avrà nessun "referrer", così il nostro codice per identificare questo scenario dovrebbe assomigliare a qualcosa di simile:

Notate che il carattere "»" viene utilizzato per mandare a capo il codice soltanto per una migliore visualizzazione in queste pagine — non è un ritorno a capo da mettere nel nostro codice.

if (strReferrer.length==0)
  {
  str+='We think you will find one of the following 
    links useful:<\/p>';
  str+='<a href="\/home.php"><img src="/images/ 
    home.gif" alt="Home Page" width="100" height="30" 
    \/> <\/a>';
  str+='<a href="\/site-map.php"><img src="/images/ 
    site-map.gif" alt="Site Map" width="100" height= 
    "30" \/><\/a>';
  str+='<hr \/>';
  str+='<p><strong>You may not be able to find the 
    page you were after because of:<\/strong><\/p>';
  str+='<ol type="a">';
  str+=' <li>An <strong>out-of-date bookmark\/favorite 
    <\/strong><\/li>';
  str+=' <li>A search engine that has an <strong>out- 
    of-date listing for us</strong><\/li>';
  str+=' <li>A <strong>mis-typed address</strong><\/li>';
  str+='<\/ol>';
  document.write(str);
	}

Il riferimento datato del motore di ricerca

Se c'è un valore di referrer, possiamo cercare un esempio specifico nei motori di ricerca (ed evidentemente prelevarlo a nostro piacimento). Quindi possiamo dividere i parametri di ricerca, individuare per un elenco di termini i corrispondenti di rilievo che vogliamo intercettare e suggerire una pagina che sia adatta a quello che si cerca:

if (strReferrer.length!=0)
  {
  if ((strReferrer.indexOf(".looksmart.co")>0)||
  (strReferrer.indexOf(".ifind.freeserve")>0)||
  (strReferrer.indexOf(".ask.co")>0)||
  (strReferrer.indexOf("google.co")>0)||
  (strReferrer.indexOf("altavista.co")>0)||
  (strReferrer.indexOf("msn.co")>0)||
  (strReferrer.indexOf("yahoo.co")>0))
  {
  blnSearchReferral=true;
  //get site domain - split at the first forward-slash
  var arrSite=strReferrer.split("/");
  // now find search parameters
  var arrParams=strReferrer.split("?"); 
  var strSearchTerms = arrParams[1];
  arrParams=strSearchTerms.split("&");
  
  strSite=arrSite[2];
  var sQryStr="";
  
  //define what search terms are in use by the 
  different engines
  var arrQueryStrings = new Array();
  arrQueryStrings[0]="q=";  //google, altavista, msn
  arrQueryStrings[1]="p=";  //yahoo
  arrQueryStrings[2]="ask=";  //ask jeeves
  arrQueryStrings[3]="key=";  //looksmart
  
  for (i=0;i<arrParams.length;i++)
  //loop through all the parameters in the referring 
  page's URL
    {
    for (q=0;q<arrQueryStrings.length;q++)
    {
    sQryStr = arrQueryStrings[q];
    if (arrParams[i].indexOf(sQryStr)==0)
      {//we've found a search term!
      strSearchTerms = arrParams[i];
      strSearchTerms = strSearchTerms.split(sQryStr);
      strSearchTerms = strSearchTerms[1];
      strSearchTerms = strSearchTerms.replace("+", " ");
      }
    }
    }
  //Tell the visitor what site is at fault, what the 
  //search terms were
  document.write ("<p>You did a search on <strong> 
    <a href='" + strReferrer + "' target='_blank'>" + 
    strSite + "<\/a> <\/strong> for \"<strong>"
    + strSearchTerms + "<\/strong>\". However, 
    their index appears to be out of date.<\/p> 
    <h2>All is not lost!<\/h2><p>We think that the 
    following page(s)on our site will be able to help 
    you:<\/p>");

Possiamo ora aggiungere alcune linee per identificare le frasi chiave di ricerca che non vogliamo che siano perse. Per esempio, diciamo di ottenere degli ottimi risultati di ricerca per le parole "electronics" e "widgets" ma ci siamo appena mossi intorno alle pagine del nostro sito - non è piacevole perdersi in tutto ciò che è già esistente in Google, non è vero?

  if (
  (strSearchTerms.indexOf("widgets")>=0)||
  (strSearchTerms.indexOf("electronics")>=0)
  )
    {
    document.write("<a href='\/cool-widgets.htm'>Our 
    excellent widgets page<\/a><br \/>");
    }
  }
  }

Naturalmente, se abbiamo una motore di ricerca interno per il sito, potremmo usare i parametri di ricerca trovati nell'URL per generare automaticamente una ricerca, piuttosto che utilizzare questo processo molto manuale.

Il link interrotto all'interno del sito

Ci siamo occupati dei riferimenti sbagliati dei motori di ricerca, adesso dobbiamo dare un'occhiata ai riferimenti che non provengono da un motore di ricerca (almeno non dal motore di ricerca che abbiamo scelto). Dobbiamo aggiungere alcune altre condizioni:

if (!blnSearchReferral)
  {
  strSite = strReferrer;
  strSite = strSite.split("/");
  strSite = strSite[2];
  document.write("<p>You were incorrectly referred to  
    this page by: <strong><a href='" + strReferrer + " 
    'target='_blank'>" + strSite + "</a></strong> 
    <br />We suggest you try one of the links below: 
    </p>");
  }

...tali link essendo la mappa del sito e l'homepage devono essere menzionati nella parte superiore destra.

Se il problema è nel proprio sito?

Nella nostra pagina 404 non possiamo scrivere: "Questo sito ha un link errato" quando il riferimento sbagliato è effettivamente all'interno del nostro sito. In questo caso, potremmo avere bisogno di cambiare linguaggio per ammettere una certa colpevolezza!

blnInsiteReferral =((strReferrer.indexOf("http:// 
  www.mysite.co.uk")>=0)||
    (strReferrer.indexOf("http://www.myothersite.com") 
    >=0))
  if (blnInsiteReferral)
    {
    document.write("<p>This one's down to us! Please 
      accept our apologies for this - we'll see to it 
      that the developer responsible for this broken 
      link is given 20 lashes (but only after he or 
      she has fixed this problem).<\/p>");
    }

Risolvere il problema

Adesso vi abbiamo fornito la via d'uscita dal buco nero 404. Ma abbiamo realmente riparato qualche cosa? No. Comunque abbiamo alcune opzioni, poiché conosciamo la pagina chiesta e la pagina di riferimento (se effettivamente ci fosse un referrer). Potremmo salvare automaticamente queste informazioni in un database, oppure in modo manuale, offrire all'utente che si trova in una pagina 404 un bottore "riporta il link interotto". Inoltre dovremmo diminuire il problema, e la speranza è quella di trovare i link interrotti più importanti. Come poterli riparare spetta a voi.

Links correlati

Per vedere questi consigli in azione, provate i seguenti esempi ospitati in Accessify e in A List Apart:

Scaricate l'esempio di errore 404 page descritto sopra (e miglioratelo per soddisfare le vostre esigenze).

^Top

Dai un voto a questo articolo:   HITS: 47435 | VOTI: 453 | MEDIA VOTI: 5.4    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 7