WebOnTheFly, il blog
Annunci, ispirazione, approfondimenti per i professionisti del web, Articoli guida e di approfondimento sul software, eventi e seminari, recensioni di libri e guide per il web, Utility, icone, componenti, filtri, font, texture, immagini royalty free, Tutorial e videotutorial su Photoshop, Illustrator, Flash, Xhtml e CSS, ajax, jquery, xhtml, css, php, accessibilità, usabilità, search engine optimization…

Tradotto dall’originale Invasion of the Body Switchers di Andy Clarke, James Edwards pubblicato su www.alistapart.com

Da quando è stato rilasciato nel 2001, lo Style Sheet Switcher di Paul Sowden è stato prelevato e usato da migliaia di progettisti e sviluppatori di siti web e ha avuto diversi utilizzi sia sul lato server sia sul lato client.

Avendolo usato io stesso su diversi progetti, ho cominciato a chiedermi come la selezione dei fogli di stile possa essere estesa per dare agli utenti più scelte o miglioramenti nell’accessibilità , percui mi sono rivolto al mio amico Brothercake per concretizzare questa idea nell‘Invasion of Body switchers.

Continua…

Tradotto dall’originale Let Them Eat Cake di Aaron Gustafson pubblicato su www.alistapart.com

C’é stato un crescente dibattito che vuole mettere contro accessibilità e usabilità ma non vi è ragione per non avere entrambi. Se possiamo rendere una pagina più usabile senza rinunciare all’accessibilità , allora è bene farlo; non lasciamo che la nostra incapacità a tradurre determinati principi di usabilità in funzioni o caratteristiche accessibili ne riduca l’uso. Nella misura in cui questi miglioramenti non restringono l’accessibilità è bene farlo.

Come molti sapranno, con javascript e il DOM, abbiamo la possibilità di controllare ogni elemento su una pagina web ben strutturata. Crediamo che, usando il DOM, possiamo migliorare l’usabilità di una pagina senza ridurre la sua accessibilità . Con un pò di CSS otteniamo una fantastica ricetta per una fantastica esperienza, indipendentemente dal browser, dalla piattaforma o dal dispositivo utilizzati.

Continua…

Tradotto dall’originale Keeping Navigation Current With PHP di Jason Pearce pubblicato su www.alistapart.com

Trasformare elenchi non ordinati in eleganti menu di navigazione è diventato il passatempo per molti sviluppatori di siti web. Aggiungere un attributo unico id o class per indicare quale elemento del menu si riferisce alla pagina attuale dell’utente, ad ogni modo, può diventare laborioso. Anche usando gli attributi body id al contrario, come noi di ALA, richiede lavoro ed è facile sbagliarsi. Ma grazie al PHP, possiamo aggiungere questi indicatori di pagina automaticamente.

Questo tutotial è l’unione tra lo script di Christopher Robbins, Manage Your Content With PHP, e quello di Mark Newhouse CSS Design: Taming Lists. Il risultato di questo matrimonio sarà un semplice documento di navigazione chiamato navigation.php. Usando PHP, includeremo il nostro menu di navigazione onnicomprensivo in ogni pagina del sito. Diversamente da altri inclusori generalisti, comunque, questo è in grado di individuare quale pagina l’utente sta visitando e adeguerà l’indicatore di pagina di conseguenza.

Continua…

Le esigenze specifiche degli utenti con disabilità motorie possono spesso essere ignorate o scarsamente applicate. Le disabilità motorie possono essere causate da un incidente, dal morbo di Parkinson, da sclerosi multipla, da una disabilità fisica o da arti fratturati. Questo gruppo di utenti sostanzialmente ha un’abilità limitata o nulla dell’uso del mouse.

Continua…

Tradotto dall’originale Improving link display for print di Aaron Gustafson pubblicato su www.alistapart.com

La pagina stampata di Eric Meyer

Diversi mesi fa, Eric Meyer scrisse un articolo fondamentale per A List Apart, in cui offriva una chicca di CSS2:

a:link:after,
a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

Se usiamo questa sintassi in un foglio di stile per la stampa, tutti i browser che interpretano il CSS2 (Mozilla & Netscape, tranne IE al momento, sebbene la prossima versione IE7 lo supporti) visualizzeranno il valore dell’attributo href associato a un’ancora, in sequenza, dopo il testo, appena più piccolo e tra parentesi:

Questo è incredibilmente utile per chi stampa la pagina, perché lo avverte della destinazione del link. Tuttavia, se abbiamo un paragrafo con molti collegamenti (specialmente quelli lunghi), questa tecnica danneggia la leggibilità:

Il piano

Le note a piè di pagina e a fine pagina sono una convenzione nella stampa percui sembra naturale andare in questa direzione. Seguendo questo ragionamento, i nostri obiettivi saranno:

• Raggruppare tutti i link presenti (href e citazioni) in un contenitore specifico all’interno della pagina,
• Inserire questi link (escluse le duplicazioni) in un elenco puntato che può essere collocato in un selettore id a nostra scelta e
• Associare a ogni link un numero di nota a piè pagina con un apice.

Fortunatamente, tutto ciò è nelle nostre possibilità grazie al DOM e a JavaScript.

Il codice javascript

Prima di iniziare la compilazione, evidenziamo gli elementi essenziali del codice:

function footnoteLinks() {
// individuo ed etichetto il contenitore
// creo un titolo per le note
// creo un elenco numerato per le note
// creo un array per depositare i link usati così da controllare
// i duplicati
// creo una variabile per tenere traccia del numero di ciascun
// link, così da usarlo come riferimento per le note
// raggruppo tutti gli elementi nel contenitore
// all’interno di un array
// creo un ciclo degli elementi all’interno dell’array, individuando gli href
// e le citazioni
// se trovo un duplicato
// prendo il numero del link usato dall’array
// altrimenti
// creo il tag <li> all’interno di <ol>
// deposito il link nell’array
// incremento la variabile numero
// creo il tag <sup> e lo inserisco dopo il link
// inserisco il titolo e il tag <ol> nel contenitore }

Questo ci fornisce una solida base per incominciare. Eseguiremo ogni compito separatamente, a cominciare dalla funzione stessa. Dobbiamo passarle due variabili: una per l’id del contenitore in cui raggruppiamo gli URI (containerID) e una per l’id del contenitore in cui inseriamo le nostre note (targetID):


function footnoteLinks(containerID,targetID) {


Una volta inseriti questi argomenti, possiamo facilmente identificare questi contenitori nel nostro script:

// individuo ed etichetto il contenitore
var container = document.getElementById(containerID); var target = document.getElementById(targetID);

Questo renderà le cose più facili in seguito.

Il prossimo passo è la titolazione del contenitore. Dal momento che vogliamo visualizzarlo solo nella versione stampata (come tutto il resto) gli daremo la classe “solo per la stampa” (scriveremo in seguito il selettore CSS):

// creo un titolo per le note
var h2 = document.createElement('h2');
addClass.apply(h2,['printOnly']);
var h2_txt = document.createTextNode('Links'); h2.appendChild(h2_txt);

[Nota: applichiamo la funzione addClass() ricavata da jsUtilities package per attribuire una classe ai nostri elementi.]

Ora possiamo creare il nostro elenco puntato e le variabili:

// creo un elenco <ol> per le note
var ol = document.createElement('ol');
addClass.apply(ol,['printOnly']);
// creo un array per i link
// e controllo le duplicazioni
var myArr = []; var thisLink; var num = 1;

Ora le modiche principali. Passiamo in rassegna tutti gli elementi del contenitore, alla ricerca degli attributi href e cite. Da notare che nell’XHTML 2.0 possiamo rendere in un link ogni elemento e attribuire il tag cite, non solo <blockquote> e <q>, percui non limitiamoci solo ad ancore, blocchi di testo e citazioni:

// raggruppo gli elementi in un contenitore
// all’interno di un array
var coll = container.getElementsByTagName('*');

Ora facciamo un ciclo tra gli elementi cercando gli attributi href e cite:

for (var i=0; i<coll.length; i++) {
// check for our attributes
if ( coll[i].getAttribute('href') || coll[i].getAttribute('cite') ) {
// grab the reference
thisLink = coll[i].getAttribute('href') ? coll[i].href : coll[i].cite;

Sin qui va bene, ora creiamo gli apici:

var note = document.createElement('sup');
addClass.apply(note,['printOnly']);

Assumiamo che ogni riferimento URI sia unico, in seguito cercheremo i duplicati:

var note_txt = document.createTextNode(num);
note.appendChild(note_txt);

Assumiamo anche di escludere i testi tra virgolette per ora, e passiamo ad associare i link in sequenza:

coll[i].parentNode.insertBefore(note, coll[i].nextSibling);

Associamo a ciascun elemento in elenco il corrispondente URI e inseriamo quest’ultimo nell’array (ci servirà per i duplicati):

var li = document.createElement('li');
var li_txt = document.createTextNode(thisLink);
li.appendChild(li_txt); ol.appendChild(li);
// store the link in the array myArr.push(thisLink);

[Nota: non tutti i browser supportano in modo nativo il push method, ma possiamo ovviare con un piccolo script. Vedi jsUtilities package.]

Incrementiamo il numero per il prossimo link e chiudiamo il ciclo:


num++;
}


Per finire, titoliamo e creiamo l’elenco numerato:

target.appendChild(h2);
target.appendChild(ol); }

Prima di inserire lo script dobbiamo fare un pò di pulizia. Eliminiamo gli URI duplicati. Cerchiamo nell’array (myArr) i riferimenti URI usati. Per farlo ci serviamo della funzione PHP inArray function (disponibile nel jsUtilities package). inArray cerca un valore e genera “true” se lo trova e “false” in caso contrario.

for (var i=0; i<coll.length; i++) {
if ( coll[i].getAttribute('href') || coll[i].getAttribute('cite') )
{ thisLink = coll[i].getAttribute('href') ? coll[i].href : coll[i].cite;
var note = document.createElement('sup'); addClass.apply(note,['printOnly']);
var note_txt; var j = inArray.apply(myArr,[thisLink]);
if ( j || j===0 )
{
// if a duplicate
// get the corresponding number from the array of // used links

note_txt = document.createTextNode(j+1);
}
else { // if not a duplicate
// build the <li> and append to the <ol>
var li = document.createElement('li');
var li_txt = document.createTextNode(thisLink);
li.appendChild(li_txt); ol.appendChild(li);
// store the link in the array myArr.push(thisLink);
note_txt = document.createTextNode(num);
// increment the number variable num++; }
note.appendChild(note_txt); … } }

Nel codice qui sopra cerchiamo thisLink all’interno di myArr e associamo l’apice di conseguenza. Se thisLink esiste (j è “true”), creiamo l’apice j+1. Se thisLink non esiste (j è “false”), creiamo l’elemento nell’elenco, lo inseriamo all’interno di <ol>, ricerchiamo thisLink in myArr e inseriamo l’apice incrementando i numeri. Da notare che poiché inArray genera l’array index, il valore di j può essere 0 se è il primo elemento dell’array. JavaScript interpreta ciò come false se abbiamo usato l’operatore “is equal to” (j==0), percui usiamo “is identical to” (j===0) per individuare i duplicati.

Il prossimo passo è aggiungere gli apici agli elementi del blocco di testo. Generalmente questo coincide col tag <blockquote>. Il nostro <blockquote> può contenere paragrafi (<p>) ed elenchi (<ul>, <ol>, <dl>). Vogliamo che gli apici appaiano alla fine del testo per cui cerchiamo l’ultima istanza di <blockquote>. Per fare ciò usiamo la funzione lastChildContainingText (sempre in jsUtilities):

function footnoteLinks(containerID,targetID)
{ … if (coll[i].tagName.toLowerCase() == 'blockquote')
{
var lastChild = lastChildContainingText.apply(coll[i]);

lastChild.appendChild(note);
} else
{
coll[i].parentNode.insertBefore(note, coll[i].nextSibling);
}
…
}

Per finire, facciamo in modo che lo script siano ben interpretato da tutti i browser, compresi quelli che non supportano questa funzione…

function footnoteLinks(containerID,targetID)
{ if (!document.getElementById ||
!document.getElementsByTagName ||

!document.createElement) return false;
…
}

…e nelle pagine in cui sono assenti gli elementi del contenitore:


function footnoteLinks(containerID,targetID) {
if (!document.getElementById ||
!document.getElementsByTagName ||
!document.createElement) return false;

if (!document.getElementById(containerID) ||

!document.getElementById(targetID)) return false;
…
}

Quindi eseguiamo la funzione nella pagina.


window.onload = function() {
footnoteLinks('container','container');
}


E creiamo la classe di stile .printOnly…


.printOnly {
display: none;
}


…ecco il nostro prodotto finito.

All’occorrenza…

Tutto ciò assume che JavaScript sia attivato, ma se non è così? Basta tornare al foglio di stile iniziale di Eric e rimuoverlo quando non ci occorre.

Quindi recuperiamo la dichiarazione iniziale nel CSS per gli elementi href e quando eseguiamo lo script attribuiamo al tag <html> la classe “noted.” Quindi facciamo in modo che il foglio di stile per la stampa disabiliti il contenuto se il link in questione deriva da html.noted:


html.noted a:link:after,
html.noted a:visited:after {
content: "";
}


Raccogliamo il tutto

Così otteniamo un documento stampabile, pulito e bello da vedere con tutti i link e le citazioni raccolti nelle note di pagina. Possiamo anche personalizzarlo, ad esempio ignorando determinati collegamenti ipertestuali.

E’ possible prelevare l’ultima versione di footnoteLinks da questa homepage o da questo articolo. Tutti i JavaScript si trovano nel pacchetto jsUtilities 2.1, disponibile in formato compresso a questo indirizzo.