Niquelao » Archivio del weblog » Identificare i tipi di link

» Archivio del weblog » Identificare i tipi di link Niquelao Identificare i tipi di link 3 settembre 2006, di Rumoroso Una buona pratica che influisce positivamente sull’accessibilità e sull’usabilità delle nostre pagine è quella di identificare il tipo di link presenti nel nostro sito in base alla loro destinazione. Per farlo, oltre alle corrispondenti misure da adottare in materia di accessibilità, potremmo creare differenze di stile tramite il CSS (cercando sempre di mantenere la coerenza che permetta di identificare i link come tali ).

Grazie a questa pratica, gli utenti che utilizzano browser grafici potranno riconoscere se il documento a cui stanno per accedere è, ad esempio, un pdf o se la destinazione si trova al di fuori del nostro portale. Problemi Dovremo identificare ogni tipo di link tramite una classe che permetta di applicargli lo stile. In molte occasioni le persone che inseriscono i link sono i responsabili dei contenuti e non hanno accesso alla marcatura del codice. Soluzione Tramite una semplice funzione scritta in javascript, e inserita in modo non invasivo, potremo identificare il tipo di documento in base al contenuto dell’attributo “title” (se presente) e/o all’estensione del file di destinazione.

Per nota : è una buona pratica che gli editori/responsabili dei contenuti adottino il protocollo comune di identificare il tipo di destinazione del link nell’attributo “title” dello stesso, poiché la maggior parte degli strumenti di editing ne permette l’inserimento. Inoltre, è stata aggiunta allo script la funzionalità di includere un testo nell’attributo “title” di quei link che non lo possiedono e che puntano a un documento riconoscibile dallo script stesso. Link di Esempio Google Documento in formato pdf Questo link non possiede l’attributo “title” e con la funzione gli viene aggiunto: File di Word Lo script Lo script è dettagliato di seguito e puoi scaricarlo direttamente La prima cosa è dichiarare un array con il frammento di testo da inserire da parte dell’editore/responsabile dei contenuti e che descrive il tipo di destinazione del link: var tFormat = [“enlace externo”, “formato pdf”, “formato word”]; Dichiariamo una tipologia di link (dichiarata nello stesso ordine della precedente): var Format = [“externo”, “pdf”, “doc”]; Dichiariamo le classi per formattare ogni tipo di link (dichiarate nello stesso ordine delle precedenti).

Queste avranno il loro corrispondente stile nel CSS: var classFormat = [“externo”, “pdf”, “doc”]; function enlaces() { // Selezioniamo tutti i link del documento var links = document.getElementsByTagName(“a”); for (var i = 0; i < links.length; i++) { // Verifichiamo che non siano ancore if(links[i].href.indexOf(”.”) > -1) { // Verifichiamo se hanno l’attributo “title” if(links[i].getAttribute(“title”)) { // Otteniamo l’attributo “title” in minuscolo var title = links[i].getAttribute(“title”).toLowerCase(); // Facciamo un ciclo che verifica se nel “title” si // trova uno dei testi indicati nell’array // tFormat.

Se lo trova, gli aggiunge la classe // dichiarata nella stessa posizione del testo // nell’array classFormat for(var f = 0; f < tFormat.length; f++) if(title.indexOf(tFormat[f]) > -1) links[i].className += ” ” + classFormat[f]; } // Dato che non sempre tutti i link hanno l’attributo “title” // verificheremo, per sicurezza, l’attributo “href” ottenendo // l’estensione del documento di destinazione e confrontandola // con quelle dichiarate nell’array Format. var ini = links[i].href.length-4; var fin = links[i].href.length; var wFormat = links[i].href.substring(ini,fin).toLowerCase(); for(var f = 0; f < Format.length; f++) if(wFormat.indexOf(Format[f]) > -1) { links[i].className += ” ” + classFormat[f]; // Se non ha l’attributo “title” glielo aggiunge if(!links[i].getAttribute(“title”)) links[i].setAttribute(“title”, tFormat[f]) } } } } Infine carichiamo lo script: window.onload = enlaces; Identificare i tipi di link Categoria: CSS, Javascript —> 2 commenti Jorge del Casar 14 maggio 2007 È da un po’ che leggo il tuo sito e ne sono rimasto piuttosto impressionato.

Hai cose molto interessanti, complimenti. Dato che ho visto che ci lavori parecchio per far sì che tutto venga perfetto, volevo darti un contributo. Non hai tenuto conto del fatto che se il link è già contrassegnato con la classe corrispondente all’esecuzione dello script, tale classe viene duplicata. Non è un grosso problema, ma si potrebbe verificare se possiede una classe dell’array Format all’inizio e, in caso affermativo, passare all’elemento successivo, altrimenti continuare con lo script.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Sembra che questo bug si sia verificato nel link di esempio “Documento in formato pdf”. Complimenti di nuovo per il tuo buon lavoro. Spero di vedere presto altro qui.

PS: Controlla la validazione dell’email, perché non me l’accetta, potrebbe essere perché il login contiene un punto (o un asterisco ripetuto). Rumoroso 14 maggio 2007 Grazie per il contributo. In linea di principio quello che bisognerebbe fare è modificare la riga: if(title.indexOf(classFormat[f]) > -1) con quest’altra: if(title.indexOf(tFormat[f]) > -1 && links[i].className.indexOf(classFormat[f])) Non l’ho provato, ma suppongo che funzionerebbe. Per quanto riguarda la validazione dell’email, suppongo che sia un problema del validatore stesso.

Ci darò un’occhiata. Grazie per il tuo contributo. Spero che non sia l’unico. Puoi seguire i commenti grazie al feed RSS 2.0 . Puoi anche inviare un trackback dal tuo sito.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Articolo precedente: Script per scambiare css Articolo successivo: Ritoccare i Formulari (episodio I) —> —> —> Quest’opera è distribuita con licenza Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.