Skipstorm

Mi era stato chiesto se fosse possibile dare una dimensione in percentuale ad un’immagine di sfondo in modo da far adattare l’immagine alla finestra. Al momento non è possibile fare una cosa del genere con i css e per questo ho creato questo piccolo script javascript che risolve il problema.

Lo script è disponibile in due versioni, nella prima l’immagine viene deformata per adattarsi alla finestra:

Nella seconda l’immagine occupa lo spazio disponibile senza deformarsi e in caso facendo apparire le barre di scorrimento del browser:

Prosegui la lettura…

Non è mai una buona scelta inserire gli indirizzi email direttamente nella pagina dato che gli spam bot sono alla continua ricerca di indirizzi email verso i quali inviare spam.

Facendo una ricerca si trovano diversi script javascript per la protezione degli indirizzi ma li ho trovati un po obsoleti.

Prima di tutto fanno una document write per la quale bisogna inserire il tag script all’interno della pagina. Secondo, molti  non fanno altro che unire ‘nome’ + ‘@’+ ’server.bla’, sai che difficile capire che la c’è un indirizzo email.

Credo che questo script offra una protezione migliore e un utilizzo più semplice, soprattutto se avete pagine dinamiche.

Per il funzionamento richiede jQuery e il plugin base64.

<script type="text/javascript">
 /*
 * Protezione contro spam bot per le email
 * Inserire lo script nell'head e includere jquery e il plugin base64
 * Se vi piace questo script lasciate questo URL http://www.skipstorm.org
 */

 $(document).ready(function(){
 $('.email').each(
 function(){
 var address = $.base64Decode($(this).attr('rel'));
 $(this).attr('href', 'mailto:'+address);
 $(this).text(address);
 }
 );
 });
 </script>

che cosa fa lo script, una volta caricato il documento per ogni tag con la classe email (o cambiatela con quello che preferite) dall’attributo rel, dove si aspetta l’indirizzo encodato in base64, crea link e testo.

Nella pagina gli indirizzi risulteranno come questo qua sotto

<p>Email: <a rel="ZW1haWxAZW1haWwuY29t" class="email">Devi avere javascript abilitato per visualizzare questo indirizzo.</a></p>

Se generate le pagine serverside non vi sarà difficile trovare o creare uno script per convertire gli indirizzi, se vi serve un convertitore potete inserire questo bottone in una pagina dove avete incluso gli stessi script richiesti da quello qua sopra.

<input type="text" id="base64input" /><button onclick="$('#base64input').attr('value' , $.base64Encode($('#base64input').attr('value')));">Encode</button>

Un markup accessibile non significa solo dare la possibilità a tutti di poter accedere agevolmente ai contenuti del nostro sito, significa anche aiutare i motori di ricerca nel processo di indicizzazione.

Prendete ad esempio il tag <IMG>, molti inseriscono le immagini in un sito direttamente come escono dalla macchina fotografica

Ecco la mia ultima foto
<img src="DSC00213.JPEG" />

Non ci vuole molto a capire che un motore di ricerca non potrà mai indicizzare correttamente un’immagine inserita in questo modo, è un po meno ovvio dedurre che un tasto per la navigazione risulterebbe inutile ad un non vedente senza l’attributo alt.

<img src="paginaSuccessiva.jpeg" alt="pagina successiva" />

Un tag inserito come qua sopra visualizza la scritta inserita come attributo alt quando non può essere visualizzata l’immagine, lo stesso attributo viene utilizzato dai motori di ricerca per dedurre informazioni sull’immagine.

Quanto sto per presentarvi è una lista di regole che non solo faciliteranno la navigazione del vostro sito ma vi permetteranno di avere un punteggio più alto nei motori di ricerca. Non conosco nessun editor visuale (wysiwyg) che rispetta queste regole alla lettera e per questo motivo ritengo che l’unico modo di creare un buon sito sia conoscere a menadito i linguaggi (x)html e css, non significa comunque che bisogna utilizzare editor come il notepad, ide come netbeans permettono uno sviluppo coerente e rapido allo stesso tempo.

Prosegui la lettura…