JS per caso: windowedLinks

NdR: Questo articolo è originario di Norisberghen.it ed è la prima testimonianza del Progetto “D-code” pensato per soluzioni Web più Accessibili ed Usabili. Segue le orme di “Apple D-User” progetto sempre di Norisberghen.it e volto a suggerire soluzioni che agevolino l’uso dei computer Apple e dei software per questi scritti.

“D-code” è realtà per mia volontà, ma è dedicato al Nostro Mondo ed alle Nostre Esigenze per questo ha bisogno del vostro protagonismo che dovrà far sentire: “Io vorrei che …”.
Solo così potremo sperare che validi sviluppatori come Diego La Monica siano sempre più impegnati in soluzioni FEP – For Every Person – a testimonianza che le Barriere non sono solo Architettoniche, ma pervadono ogni campo. Forse passiamo più ore davanti al computer che per strade, discese o vespasiani inaccessibili …

«Mamma diceva sempre: La vita è come una scatola di cioccolatini, non sai mai quello che ti capita!»
La mamma di Forrest Gump sapeva bene che sovente ciò che si vuol far succedere non capiterà mai, mentre una cosa che non ti aspetti può capitare. In passato mi era già successo di tentare iniziative a quattro mani, ma poche volte mi capitò che il caso fosse così generoso da trasformare una chiacchierata fra Web Amici in un progetto che sfociasse in un prodotto forse base per altre iniziative e progetti.
Io, Carlo Filippo Follis, stavo chiacchierando con Diego La Monica via Skype quando gli accennai ad un’idea che coincideva con un problema da risolvere. Io esperto in “esigenze” per la gestione di progetti di varia natura, ma con una preparazione tecnica che deriva da conoscenze autodidatte alimentate anche dalla passione per quello che faccio. Diego un Guru del codice Web espresso attraverso i sui principali linguaggi ed anch’egli mosso da passione tanto da essere “geniale al momento giusto”.
Senza che ce ne accorgessimo stavamo già progettando ognuno con i propri strumenti ed a quattro mani, come abbiamo scritto questo Tutorial, siamo giunti ad un JavaScript: windowedLinks.

Partiamo dall’idea
Descrizione dello Script
Soluzioni a Confronto
Funzionava perfettamente, ma …
In conclusione: una installazione che ricihede 5 minuti!
Siti che adottano < wi.li. /> – windowedLinks
Licenza/License
Download

Logo windowedLinks

torna in cima

Partiamo dall’idea

Tempo fa lessi in Internet che era possibile aprire pagine web in modalità “new window” pur rimanendo nei dettami dell'(X)HTML, dei CSS e soprattutto di quella Usabilità ed Accessibilità tanto rincorse quanto discusse e disattese in molti casi. Preso da altro rimandai sino a quando diedi una dritta ad un membro del Forum di WordPress Italia che a sua volta mi segnalò per la possibilità d’attuazione un Tutorial di HTML.it che offriva più varianti, più possibilità di venire incontro all’utente. Mi piaceva quindi l’idea di offrire la possibilità di scieglire come i links dovessero comportarsi anche a sostegno di chi Disabile ha maggiori esigenze per ottenere pari risultati. Un check avrebbe definito la modalità: i links avrebbero aperto una nuova finestra od avrebbero agito in quella corrente. C’erano due cose che non mi convincevano né come Admin dei miei siti né come Disabile che pensava ai suoi colleghi: un check non è il massimo della comodità e poi avrei dovuto inserire una particolare classe CSS nel Tag “a” per ottenere il funzionamento del sistema. Una casella di verifica può piacere oppure no, ma per nessun motivo ero disposto a correggere tutti i Tag già nel DB e dovermi preoccupare che io ed i miei User si ricordassero di inserire una data classe … Sovente devo già implementare i title="" mancanti, figuriamoci se era una soluzione proponibile …

A Diego lanciai quindi una sfida: “Saresti in grado di scrivere o modificare un JS in modo tale che questo riconosca i links esterni al sito e apra in modalità new window oppure no a seconda delle preferenze dell’Utente? ah! Dimenticavo: deve essere accessibile al 100% e di facilissima installazione …”.
Mi giunse un: “Umh?! Sì, si può fare!”

Links in - I links a Siti esterni si apriranno nella medesima finestra.

Links in – I links a Siti esterni si apriranno nella medesima finestra.

Links in - I links a Siti esterni si apriranno in una nuova finestra.

Links in – I links a Siti esterni si apriranno in una nuova finestra.

Partimmo con il progetto che avrebbe dato vita a windowedLinks che Diego ora vi spiegherà nei tecnicismi.

torna in cima

Descrizione dello script

Ora tocca a me, Diego La Monica. Partiamo dalle basi: per costruire un codice non invasivo che quindi non obblighi l’utente a scrivere una riga di codice nella sua pagina web se non l’inclusione dello script sulla pagina desiderata, e non volendo condizionare il funzionamento della pagina allo stesso script ho deciso di implementare una classe denominata wiLi .
In javascript l’implementazione di una classe non comporta conoscenze più approfondite di quelle necessarie per costruire una funzione. C’è bisogno solo di alcuni accorgimenti.
Per una questione didattica e di massima semplificazione del tutorial questo non sarà incentrato su come si sviluppa una classe, ma diremo semplicemente che essa è statica. Ovvero la classe non ha motivo di essere istanziata.
All’interno della classe ho previsto una serie di funzioni.
Analizzando il concetto alla base di questo script, che è stata la conversazione tra me, Diego, e Carlo Filippo, si può sintetizzare nei punti che seguono gli elementi funzionali della classe:

Lo script deve essere incluso nella pagina dell’utente e non deve richiedere alcuna manutenzione.
Lo script deve aprire di concetto tutte le pagine dello stesso dominio nella stessa finestra e solo le pagine di un altro sito in un’altra finestra a meno chè il gestore del sito non voglia specificare ulteriori eccezioni.
Lo script non deve alterare il funzionamento degli script preesistenti su eventuali links quindi non deve considerarli.
L’opzione di aprire i link in un’altra finestra deve essere demandata dall’utente navigatore del sito.
Il sistema dovrà ricordare la scelta dell’utente così quando ritornerà in un secondo momento non avrà da selezionare ulteriormente la modalità di apertura dei collegamenti.
In caso di assenza degli script il funzionamento dei links deve essere garantito comunque nella forma originale.

Analizziamo tutti i punti uno per uno:

Lo script deve essere incluso nella pagina dell’utente e non deve richiedere alcuna manutenzione. Sapendo come deve funzionare lo script possiamo iniziare ad implementare il file windowedLinks.js secondo lo schema che segue:

function wiLi(){
}
/* AttachEvent */
if (document.addEventListener) { // Moz. and Opera
window.addEventListener("load",function(){ wiLi() }, false);
} else {
window.attachEvent("onload", function(){ wiLi() } );
}
/* End AttachEvent */

wiLi (Windowed Links) sarà la nostra classe, mentre con il resto si indica al browser che sull’evento load della pagina, che corrisponde al momento in cui tutti gli elementi della pagina sono disponibli, deve richiamare la funzione/classe wiLi() così da eseguire tutte le inizializzazioni del caso.

Lo script deve aprire di concetto tutte le pagine dello stesso dominio nella stessa finestra e solo le pagine di un altro dominio in un’altra finestra a meno chè il gestore del sito non voglia specificare ulteriori eccezioni.
All’interno di wiLi imposteremo una serie di parametri per la configurazione del comportamento della classe tra cui:

wiLi.accessKey = 'w';
wiLi.newWindowHTMLDescription = 'Fuori';
wiLi.sameWindowHTMLDescription = 'Dentro';
wiLi.newWindowTitleDescription = 'Apre tutti i link definiti come esterni in una nuova finestra';
wiLi.sameWindowTitleDescription = 'Apre indiscriminatamente tutti i link nella stessa finestra';
wiLi.className = 'wl-ext';
wiLi.noNewWindowsURL = new Array();

La prima variabile (accesskey) stabilisce quale sarà l’access key per impostare l’apertura in una nuova finestra oppure nella stessa.
Poi ci sono newWindowHTMLDescription e sameWindowHTMLDescription che conterranno l’informazione presentata all’utente rispettivamente nel momento in cui i collegamenti identificati come esterni saranno aperti in una nuova finestra e quando invece non lo saranno.
Le due informazioni appena descritte possono essere opzionalmente corredate di un titolo (esclusivamente testuale) se viene compilato il contenuto delle rispettive variabili newWindowTitleDescription e sameWindowTitleDescription.
Esiste poi un modo per far modificare tutti i link riconosciuti come esterni semplicemente impostando il valore della proprietà className (nell’esempio sopra riportato wl-ext).
L’ultima proprietà infine è predisposta a contenere tutti gli url (compresi di http:// o https:// o ftp:// o quello che sia) che devono essere aperti nella stessa finestra che sta navigando l’utente.
Poi tramite l’istruzione che segue si indica che tutti i links provenienti dallo stesso dominio devono essere esclusi dall’eventuale apertura nella stessa finestra:

wiLi.noNewWindowsURL[wiLi.noNewWindowsURL.length] = window.location.protocol + '//' + window.location.host;

Ed infine eseguiamo l’inizializzazione degli elementi:

wiLi.newWindowYesNo(true);
wiLi.alterLinks();
[js]
Tralasciamo in questo momento il funzionamento di queste due funzioni che andremo a vedere in un secondo momento. Accontentiamoci di sapere che si preoccupano di garantire la corretta interazione tra la pagina e l'utente (o viceversa? ).
Lo script non deve alterare il funzionamento degli script preesistenti su eventuali links quindi non deve considerarli.
Per garantire ciò la funzione <code>alteraLinks()</code> dovrà essere costruita in un modo preciso. La sua implementazione è la seguente:
[js]
wiLi.alterLinks = function(){
var links = window.document.getElementsByTagName('a');
for(var i = 0; i<links .length; i++){
if( links[i].href != null && links[i].onclick == null){
var escludi = false;
for(var j = 0; j < wiLi.noNewWindowsURL.length; j++){
var escluso = wiLi.noNewWindowsURL[j];
if(links[i].href.substr(0, escluso.length) == escluso){
escludi = true;
break;
}
}
if(!escludi){
if(links[i].onkeypress!= null){
// Extends onkeypress event
links[i].realkeypress = links[i].onkeypress;
}
links[i].onkeypress = function (event){
if(this.realkeypress != null) this.realkeypress(event);
if(window.event){ // IE
var keynum = event.keyCode
}else if(event.which){ // Netscape/Firefox/Opera
var keynum = event.which
}
if(keynum == 13 || keynum==32){
wiLi.openLink(this.href);
return false;
}
}
links[i].onclick = function (){
return wiLi.openLink(this.href);
};
if(wiLi.className!=''){
if(links[i].className!='') links[i].className += ' ';
links[i].className += wiLi.className;
}
}
}
}
}

Spieghiamone il funzionamento.
Dopo aver ottenuto tutti i tags di tipo a (nella variabile links) li cicliamo e prendiamo in considerazione solo quegli elementi il cui attributo href sia specificato (quindi escludiamo le ancore) ed il cui evento onclick non sia specificato.
A quel punto verifichiamo se quello specifico link è presente nell’elenco dei siti da aprire sempre nella stessa finestra (per esempio html.it potrebbe per i suoi domini di terzo livello specificare l’apertura nella stessa finestra, mentre per link esterni promuovere l’apertura in finestre esterne).
Se il link non è da escludere, allora sarà soggetto all’apertura in una nuova finestra (a discrezione dell’utente) per ciascun click che verrà eseguito su di esso.

L’opzione di aprire i link in un’altra finestra deve essere demandata al navigatore del sito.
Proprio per questo motivo ci sarà una variabile booleana.
windowedLinks.apriNuovaFinestra che garantirà l’opzionalità della cosa e l’operazione di apertura del link sarà demandata ad una funzione:

wiLi.openLink = function(url){
if(wiLi.openNewWindow){
window.open(url);
return false;
}
return true;
}

Questa funzione come potrete notare restituisce true o false inversamente allo stato della variabile apriNuovaFinestra.
Il motivo di ciò è nel fatto che questa funzione è richiamata dall’evento click dei link e quindi il link non dovrà far nulla se il link viene aperto in un’altra finestra, altrimenti è il tag che comanderà.

Il sistema dovrà ricordare la scelta dell’utente così quando ritornerà in un secondo momento non avrà da selezionare ulteriormente la modalità di apertura dei collegamenti.
Questo è possibile tramite la gestione dei cookies.
Con l’insieme delle funzioni che seguono avremo una gestione dei cookies per quanto ci interessa: scrittura e lettura.

wiLi.setCookie = function (c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
wiLi.getCookie = function (c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

Quindi la variabile booleana apriNuovaFinestra sarà mantenuta in un cookie, purchè le protezioni di sistema siano tali da consentire la loro scrittura.
Il tutto sarà gestito nella funzione nuovaFinestraSiNo().

wiLi.newWindowYesNo = function(firstTime){
if(firstTime){
wiLi.openNewWindow = wiLi.getCookie('wiLi')=='true'?true:false;
}else{
wiLi.openNewWindow = !wiLi.openNewWindow;
wiLi.setCookie('wiLi', wiLi.openNewWindow,9000);
}
var l = document.getElementById(wiLi.id);
var buffer = wiLi.sameWindowHTMLDescription;
var title = wiLi.sameWindowTitleDescription;
if(wiLi.openNewWindow){
buffer = wiLi.newWindowHTMLDescription;
title = wiLi.newWindowTitleDescription;
}
title = title.replace(/"/g, """);
buffer = '<a href="#">' +
buffer + '</a>';
l.innerHTML = buffer;
return false;
}

Questa funzione è il fulcro di tutto il sistema: verifica se è la prima volta quindi proverà a prendere l’informazione dal cookie ed imposterà opportunamente la variabile apriNuovaFinestra. Altrimenti viene cambiato lo stato della variabile e scritto il suo valore in un cookie che scadrà dopo 9000 giorni ( un bel po’ di tempo, ma se continuerete a tornare sul sito se questa è la vostra preferenza perché modificarvela? Al massimo sarete costretti a cambiarla 3 volte in tutta la vita supponendo che la vostra età sia tra i 10 e i 20 anni). Successivamente identifica l’elemento sulla pagina denominato nwlm (che è l’unico requisito sulla pagina, un elemento che conterrà il link informativo per la possibile scelta della modalità di apertura delle finestre) ed imposta il link all’interno dell’elemento sopra citato per cambiare lo stato del nostro sistema.

In caso di assenza degli script il funzionamento dei links deve essere garantito comunque nella forma originale.
Questa parte non ha bisogno di essere troppo spiegata: come al solito io lavoro in modo che gli script non siano fondamentali per la pagina. Gli script devono dare quel valore aggiunto, quel qualcosa in più che decora, che facilita, ma che non sia fondamentale alla fruizione dei contenuti. Quindi se doveste avere un browser che non fa uso di script per policy di sicurezza aziendale, non avrete problemi: il sito vi funzionerà ugualmente ma tutti i links vi verranno aperti nella stessa finestra.

torna in cima

Soluzioni a confronto

Ecco le due soluzioni a confronto:

Invasività
La soluzione proposta su html.it lo è in quanto richiede che per ciascun link esterno deve essere specificata una classe ‘ext’.
Invece la nostra non lo è. Richiede solo che ci sia solamente un tag vuoto sulla pagina e l’inclusione dello script.
Usabilità
In caso di assenza degli script il nostro non mostra elementi che potrebbero indurre l’utente a pensare che il sito non funzioni a dovere.
In caso di assenza degli script quello proposto da html.it presenterà una check box che segnala la possibilità di aprire i link in una nuova finestra mentre non risulterà possibile.
Configurabilità
L’esempio proposto consente di essere completamente configurato nell’uso così da garantire che non solo i link esterni possono essere aperti in nuove finestre, ma è possibile escludere alcuni link esterni così da risultare valido anche in situazioni di network di siti.
L’esempio proposto da html.it per il punto 1 richiederebbe la verifica di tutti i links presenti su tutte le pagine di un sito e apportare per ciascun link la modifica manuale.

Senza togliere nulla alla validità dello script presentato da HTML.it, vi poniamo una domanda: avete dubbi su quale scegliere?!

torna in cima

Funzionava perfettamente, ma …

Carlo Filippo Follis Rieccomi … Diego aveva scritto un JS perfetto. L’avevo provato ed era strabiliante vedere il passaggio di funzionalità senza neppur dover ricaricare la pagina o … Io lo stavo considerando come “utilizzatore” senza particolari conoscenze tecniche.
Talune volte proprio la “deficienza tecnica” porta ad auspici di semplicità. Stavo pensando anche che ai testi avrei potuto sostituire un’immagine e che l’etichetta determinata dal title="" o alt="" poteva non coincidere con il testo del link. Cosa peraltro ovvia se in gioco c’era l’uso di un’immagine.
Confrontatomi con Diego venne fuori la sua genialità e mi sentii dire: “Risolvo in 30 secondi!”.
La soluzione prevedeva anche di facilitare la personalizzazione dello script raggruppando a monte i valori modificabili.
Diego integrò il codice riorganizzando alcune righe, questo è il risultato:

wiLi.id = 'nwlm';
wiLi.accessKey = 'w';
// Defines the access key value required for accessibility validation
wiLi.newWindowHTMLDescription = 'Fuori';
// Text/Image/HTML shown inside the action link when the status of the
// script is to open links in a new window.
wiLi.sameWindowHTMLDescription = 'Dentro';
// Text/Image/HTML shown inside the action link when the status of the
// script is to open links in the same window.
wiLi.newWindowTitleDescription = 'Apre tutti i link definiti come esterni in una nuova finestra';
// As for newWindowHTMLDescription property, but for the title attribute of the link.
// If this value is empty (but always must be defined) the title attribute will not be generated
wiLi.sameWindowTitleDescription = 'Apre indiscriminatamente tutti i link nella stessa finestra';
// The same than newWindowTitleDescription but related to property sameWindowHTMLDescription
wiLi.className = 'wl-ext';
// If defined each link identified as external will be marked with this class too.
// It is usefull both for presentation purpose and debugging
wiLi.noNewWindowsURL = new Array();
// Network sites array that must be open in the same window always.

Come avete potuto vedere i valori permettono una completa personalizzazione. Da notare la possibilità di definire il nome dell’ID in cui verrà collocata la sezione di interazione tra l’utente e lo script. Di default è wiLi.id = 'nwlm'; ma lo potreste ridefinire come wiLi.id = 'windowedLinks-actions'; ad esempio; così si evitano anche spiacevoli conflitti di ID sulla pagina nel caso già fosse specificato su un altro elemento l’ID proposto di default causando una conseguente invalidazione del codice della pagina.
L’esempio mostra due testi associati a rispettive immagini, è possibile usare comunque o solo i testi o solo le immagini. Potreste addirittura utilizzare dell’HTML per definire due valori più complessi. L’etichetta viene definita da due valori che agiranno sulla span di richiamo garantendo l’usabilità.
Come anche definire un Access Key diverso da “w”.

torna in cima

In conclusione: una installazione che ricihede 5 minuti!

Molte parole per spiegare ciò che installerete in 5 minuti. Inserite nell’header il link di collegamento al JS, così:

<head>
...
<script src="js/windowedLinks.js" type="text/javascript"></script>
...
</head>

Per gli utenti WordPress l’esempio è:

<head>
...
<script src="<?php bloginfo('template_url'); ?>/js/windowedLinks.js" type="text/javascript"></script>
...
</head>

Dove volete far comparire il testo, l’immagine o l’HTML di richiamo delle funzionalità del JS sarà sufficiente inserire questo codice:

// O come l'avrete personalizzato

Le parole d’ordine di questo script sono certamente: Semplicità, Produttivita, Usabilità ed Accessibilità. Poi, a voi il giudizio …

Carlo Filippo Follis – www e @ – & Diego La Monica – www e @

torna in cima

Siti che adottano < wi.li. /> – windowedLinks

La lista verrà aggiornata in base alle vostre segnalazioni e verrà rispettato l’ordine cronologico, quello alfabetico sarebbe più laborioso da gestire. Non mancate di segnalarci il vostro sito, è pur sempre una forma di maggiore visibilità …

Nota: Questa sezione viene mantenuta aggiornata su Norisberghen.it.

torna in cima

Licenza/License

Licenza Creative Commons

Questo script è rilasciato sotto licenza Creative Commons ed è scaricabile ed utilizzabile gratuitamente. Non esistono obblighi economici per l’utilizzo su siti commerciali o personali.
Esiste tuttavia l’obbligo morale di aggiungere un link alle pagine http://www.norisberghen.it/it/?p=430
e http://diegolamonica.info/wili tramite uno degli esempi di codice presentati di seguito.

Da un'idea di <a href="http://www.norisberghen.it" title="Carlo Filippo Follis - Norisberghen.it">Carlo Filippo Follis</a> un JavaScript firmato <a href="http://www.diegolamonica.info" title="Diego La Monica - Diegolamonica.info">Diego La Monica</a>: < wi.li. />. Questo Sito ha scelto una soluzione del Progetto “<a href="http://www.norisberghen.it/it/?page_id=438" title="Progetto D-Code">D-Code</a>”!

oppure

Da un'idea di <a href="http://www.norisberghen.it" title="Carlo Filippo Follis - Norisberghen.it">Carlo Filippo Follis</a> un JavaScript firmato <a href="http://www.diegolamonica.info" title="Diego La Monica - Diegolamonica.info">Diego La Monica</a>: < wi.li. />.

infine

Questo sito usa <a href="http://www.norisberghen.it/it/?p=430" title="Questo sito usa wi.li.">< wi.li. /></a>.

Inoltre per garantirci di informarti in caso di aggiornamenti dello script, ti preghiamo di inviare una mail ai seguenti indirizzi:
cffollis@norisberghen.it e me@diegolamonica.info indicando la data di installazione dello script ed il sito (o i siti) sul quale viene utilizzato.

Un collegamento al/ai sito/i verrà aggiunto nelle pagine predisposte per questo script nei siti di Diego La Monica (http://www.diegolamonica.info) e Carlo Filippo Follis (http://www.norisberghen.it)

Un tutorial completo sull’uso dello script è presente ai seguenti link:
1. http://www.norisberghen.it/it/?p=430
2. http://diegolamonica.info/wili

Diego La Monica e Carlo Filippo Follis non si assumono alcuna responsabilità sull’uso o sul mancato uso o su eventuali bugs conseguiti o non conseguiti a seguito dell’installazione di questo script.
Qualsiasi obiezione a quanto sopra vincola al non utilizzo di questo script.

torna in cima

Creative Commons License

This script is released under a Creative Commons license.
It can be freely dowloaded and there are no fees or costs whatsoever for either personal or commercial use.

You are nonetheless required to link to either http://www.norisberghen.it/it/?p=430
or http://diegolamonica.info/wili using one of the code snippets provided below.

By a <a href="http://www.norisberghen.it" title="Carlo Filippo Follis - Norisberghen.it">Carlo Filippo Follis</a> ideas, javascript made by<a href="http://www.diegolamonica.info" title="Diego La Monica - Diegolamonica.info">Diego La Monica</a>: < wi.li. />. This site has choosen a “D-code” project solution.

Da un'idea di <a href="http://www.norisberghen.it" title="Carlo Filippo Follis - Norisberghen.it">Carlo Filippo Follis</a> un JavaScript firmato <a href="http://www.diegolamonica.info" title="Diego La Monica - Diegolamonica.info">Diego La Monica</a>: < wi.li. />.

finally

This Site is using <a href="http://www.norisberghen.it/it/?p=430" title="This Site is using wi.li.">< wi.li. /></a>.

We also ask that you register by sending an e-mail to cffollis@norisberghen.it or me@diegolamonica.info with the address of the web sites you plan to use the scripts on.

The websites will be listed on the script’s pages at
http://www.diegolamonica.info and http://www.norisberghen.it.

A complete tutorial is available at
1. http://www.norisberghen.it/it/?p=430
2. http://diegolamonica.info/wili

Diego La Monica and Carlo Filippo Follis are not to be held liable for any damage, loss or wrong caused or related to any use or misuse of the script.

The script comes with absolutely no warranty to the extent permitted by applicable law.