WiLi cresce e migliora!

Introduzione

Come promesso a molte persone al momento del rilascio ufficiale di Wi.Li., ho sempre dichiarato che ci sarebbero stati degli aggiornamenti nel giro di qualche settimana, ma non credevo di riuscire a rilasciare il primo aggiornamento nell’arco di soli 7 giorni.

Le nuove funzionalità consentono di avere popup accessibili ancora più performanti e danno al webmaster ed al programmatore maggiore flessibilità d’uso.

Le nuove caratteristiche

Le nuove caratteristiche introdotte in WiLi possono essere distinte in 2 diverse categorie: caratteristiche comportamentali e caratteristcihe di presentazione.

Caratteristiche comportamentali

Per le caratteristiche comportamentali ci sono 3 nuove possibili elementi di configurazione interni alla classe:

wiLi.forcedNewWindowURL = new Array(
    '/tutorials/examples/'
);

wiLi.newWindowForceCSSClass = 'wili-forced';

ed una variabile di controllo esterna alla classe:

wiLi_autoStart = true;

La prima caratteristica ( wiLi.forcedNewWindowURL ) è stata pensata per i portali di informazione e formazione che di solito corredano gli articoli di esempi (un po’ come fa questo sito) che di solito vengono aperti in una nuova finestra. Quindi, specificando semplicemente delle directory dello stesso sito che devono essere aperte in una nuova finestra, pur risultando interne, verranno aperte in una finestra popup.

La seconda caratteristica (wiLi.newWindowForceCSSClass) comportamentale di WiLi, introduce la possibilità di specificare una classe a livello di link che obbligherà WiLi (a prescindere da suo stato) ad aprire quello specifico link sempre in una nuova finestra.

L’ultima caratteristica (wiLi_autoStart), infine consente agli sviluppatori più esperti di decidere di lanciare WiLi solo quando più preferiscono e con l’esecuzione della semplice istruzione:

wiLi()

Avendo cura che lo script sia stato già caricato.

Caratteristiche di presentazione

Per le Caratteristiche di presentazione sono disponibili due nuove proprietà che promettono di migliorare l’interazione con le finestre popup.

wiLi.popupWindowName = '';
wiLi.popupProperties = '';

La prima proprietà consente di attribuire un nome alla finestra popup da aprire, così chi cura il sito potrà decidere se far aprire ciascun link esterno in una nuova finestra (lasciando la proprietà vuota) oppure se tutti i link esterni dovranno essere aperti nella stessa finestra popup, a condizione che l’utente abbia deciso di aprire i link esterni in una nuova finestra.

La seconda proprietà permette di specificare le caratteristiche della finestra popup in accordo con il parametro Options della funzione window.Open( ).

Bug Fix

Con questa versione ho sistemato un piccolo bug che in caso di presenza di una o più classi presenti sul link, l’ultima veniva invalidata generando un nome di classe sbagliato come nell’esempio che segue:

<a href="http://www.w3.org/">Sito W3</a>

con WiLi diventava (se specificata la proprietà className) per esempio:

<a href="http://www.w3.org/">Sito W3</a>

mentre ora è correttamente interpretato come:

<a href="http://www.w3.org/">Sito W3</a>

Conclusioni

Un esempio completo delle funzionalità di wili è consultabile a questo indirizzo.

Per sostituire la precedente versione con quella attuale, è necessario ricopiare il blocco delle proprietà dal vecchio script in quello nuovo non sovrascrivendo le proprietà presenti nella versione 1.1 (ben delineate dalla dicitura Features available from Version 1.1.0).

Felice upgrade a tutti! :-)

Popup accessibili? Facile a farsi con WindowedLinks

«Mamma diceva sempre: La vita è come una scatola di ioccolatini, 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

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à tante 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!

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

%d blogger hanno fatto clic su Mi Piace per questo: