Niquelao » Archivo del weblog » Identificando tipos de enlace

Identificando tipos de enlace

3 de September, 2006 por Rumoroso

Una buena práctica que afecta positivamente a la accesibilidad y usabilidad de nuestras páginas es la de identificar el tipo de enlaces que tenemos en nuestra web en función de su destino. Para ello, además de las correspondientes medidas a adoptar respecto a temas de accesibilidad, podríamos crear diferencias de estilo mediante la CSS (procurando siempre mantener la consistencia que permita identificar los enlaces como tal). Mediante esta práctica, los usuarios con acceso a los navegadores gráficos podrán reconocer si el documento al que van a acceder es, por ejemplo, un pdf o si el destino se encuentra fuera de nuestro portal.

Problemas

Tendremos que identificar cada tipo de enlace mediante una clase que permita aplicarle el estilo.
En muchas ocasiones las personas que introducen los enlaces son los responsables del contenido y no tienen acceso a marcar el código.

Solución

Mediante una sencilla función escrita en javascript, e introducida de forma no intrusiva, podremos identificar el tipo de documento en función del contenido del atributo “title” (si está presente) y/o de la extensión del archivo destino.

~~Para~~ nota: es una buena práctica el que los editores/responsables de contenido adopten el protocolo común de identificar el tipo de destino del enlace en el atributo “title” del mismo, pues la mayor parte de las herramientas de edición permiten su introducción.

Adicionálmente, se le ha añadido al script la funcionalidad de incluir un texto en el atributo “title” de aquellos enlaces que no lo posean y que apunten a un documento reconocible por el propio script.

Enlaces de Ejemplo

Google
Documento en formato pdf
Este enlace no posee atributo “title” y con la función se le añade: Archivo de Word

El script

El script se detalla a continuación y lo puedes descargar directamente

Lo primero es declarar un array con el fragmento de texto a introducir por el editor/responsable del contenido y que describe el tipo de destino del enlace:

var tFormat = ["enlace externo", "formato pdf", "formato word"];

Declaramos una tipología de enlaces (declarado en el mismo orden que el anterior):

var Format = ["externo", "pdf", "doc"];

Declaramos las clases para formatear cada tipo de enlace (declarado en el mismo orden que los anteriores). Estas tendrán su correspondiente estilo en la CSS:

var classFormat = ["externo", "pdf", "doc"];

function enlaces() {
// Seleccionamos todos los enlaces del documento
 var links = document.getElementsByTagName("a");
 for (var i = 0; i < links.length; i++) {
   // Comprobamos que no son anclas
   if(links[i].href.indexOf(".") > -1) {
     // Comprobamos si tienen atributo "title"
     if(links[i].getAttribute("title")) {
       // Obtenemos el atributo "title" en minúscula
       var title = links[i].getAttribute("title").toLowerCase();
       // Hacemos un bucle que comprueba si en el "title" se
       // encuentra uno de los textos indicados en el array
       // tFormat. Si lo encuentra, le añade la clase
       // declarada en la misma posición que el texto
       // en el array classFormat
       for(var f = 0; f < tFormat.length; f++)
         if(title.indexOf(tFormat[f]) > -1)
           links[i].className += " " + classFormat[f];
     }
     // Dado que no siempre todos los enlaces tienen atributo "title"
     // comprobaremos, por si acaso, el atributo "href" obteniendo
     // la extensión del documento destino y comparándolo
     // con las declaradas en el 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];
          // Si no tiene el atributo "title" se lo añade
          if(!links[i].getAttribute("title"))
             links[i].setAttribute("title", tFormat[f])
       }

   }
 }
}

Finalmente cargamos el script:

window.onload = enlaces;

Categoría: CSS, Javascript

2 comentarios

Jorge del Casar 14 de May de 2007

Llevo un rato leyendo tu sitio y me ha impresionado bastante. Tienes cosas muy interesantes, enhorabuena. Como he visto que le das varias vueltas hasta conseguir que quede todo perfecto, quería hacerte una contribución. No has tenido en cuenta que si el enlace ya está marcado con la clase correspondiente al ejecutarse el script se ducplica dicha clase. No lleva a mayores, pero podría comprobar si posee una clase del array Formart al inicio in en caso afirmativo pasar al siguiente elemento y en caso contrario seguir con el script. Parece que ha sucedido este bug en el enlace de ejemplo “Documento en formato pdf”. Enhorabuena de nuevo por tu buen trabajo. Espero ver pronto más por aquí. PD: Revisa la validación de email, que no me lo admite, podría ser porque el login lleva un punto (o asterisco repeindo).

Rumoroso 14 de May de 2007