Unobtrusive Javascript: pseudo & real

Lunedì 2 Aprile, 2007

In questo Post vorrei analizzare l'uso di script unobtrusive dal punto di vista del Web Designer. Normalmente, infatti, uno script non intrusivo è tale nei confronti del navigatore finale! Ma può esserlo anche per il Web Designer?

Unobtrusive Javascript dal punto di vista del Web Designer
Mettendoci nei panni di un Web Designer potremmo identificare due categorie di unobtrusive Javascript: true unobtrusive Javascript pseudo unobtrusive Javascript.

Entrambe le categorie, tuttavia, non sono completamente non intrusive (sempre dal punto di vista del Web Designer). Un reale e completo unobtrusive Javascript non dovrebbe richiedere nessun intervento nella pagina Web, ma questo è - per ora - sostanzialmente impossibile. L'operazione minima richiesta durante l'installazione di uno script è comunque l'inserimento dell'inclusione dello script stesso! Viene dunque ammessa tale operazione che - effettivamente - non costringe il Web Designer ad apportare modifiche straordinarie alla struttura della pagina. Il semplice posizionamento dell'inclusione dello script all'interno del Tag head può essere quindi considerato non intrusivo.

Il true unobtrusive Javascript
Gli script di questo tipo sono quelli che richiedono la sola inclusione dello script unobtrusive e non pretendono nessun'altra operazione! Script di questo tipo sono, ad esempio (il solito e citatissimo), Snap. Una volta inserito il codice di inclusione il Web Designer non deve svolgere nessuna operazione ulteriore, in quanto lo script di Snap opera su Tag standard.

Gli pseudo unobtrusive Javascript
Questi si differenziano dai precedenti in quanto richiedono una taggatura ulteriore per funzionare correttamente. Esempi di questo tipo sono i Control.Tabs di Ryan Johnson o la libreria per gli slideshow Lightbox JS. Quest'ultima soluzione, ad esempio, richiede l'inserimento nel Tag A dell'attributo rel per identificare i link che devono essere modificati. Lightbox JS, in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous. Come indicato sul sito di Lightbox JS, l'inclusione dello script deve essere di questo tipo:

HTML:
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>

I link che puntano ad unìimmmagine che si vuole visualizzare con il sistema Lightbox JS devono essere scritti in questo modo:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Inoltre per identificare un gruppo di immagini, per aggiungere la capacità di scorrere avanti e indietro le immagini, i Tag A devono essere impostati nel modo seguente:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

La necessità di tali costrizioni risulta evidente; non esiste un modo semplice per distinguere un elemento link (Tag A) da un'altro. In prarticolare non è possibile capire quale elemento il Web Designer vuole visualizzato in un modo o in un'altro. Dev'essere necessariamente il Web Designer ad identificare in qualche modo i Tag e i loro comportamenti. Sono quindi richieste - intrusive - del tutto comprensibili, che non sminuiscono affatto l'utilità e le potenzialità di questi script. Comportano solo un dettaglio maggiore e qualche riga di codice in più al Web Designer.

È interessante, comunque, il doppio aspetto dell'unobtrusive Javascript, analizzato sia dal punto di vista dell'utente finale sia dal punto di vista Web Designer.

Post correlati

Lascia un commento

TAG XHTML permessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Usa <pre> per racchiudere codice