Revisar los vínculos o enlaces web

Figura
Figura. Vínculos con elementos "a" y atributos "href"

Los vínculos o enlaces son elementos clave en una página web. Hay que asegurarse que funcionan correctamente cuando publicamos una página e incluso en momentos posteriores, pues en algún caso el destino del vínculo pudiera modificarse o eliminarse. Esta herramienta se dedica a comprobar la corrección de los vínculos al propio sitio. No revisa vínculos externos a otros sitios.

En síntesis se trata de usar el parseador XML para construir el Array de Nodos del documento a chequear, rastreando atributos de elementos que puedan contener un vínculo, como href, src o action entre otros. Revisa también los vínculos internos a un documento, es decir, los que apuntan con "#" a un elemento identificado con el atributo id o name. En CSS también se chequean los vínculos contenidos en los valores url(...).

Recordemos que podemos expresar dos tipos de vínculos en el propio sitio: con rutas absolutas y con rutas relativas. Cuando iniciamos un sitio hay que decidirse por una de las dos formas y mantenerlas en todo el sitio con el objetivo de ser coherentes. Una ruta absoluta sería como la siguiente, suponiendo que nuestro sitio es http:⁄⁄example.com:

<a href="http:⁄⁄example.com⁄folder⁄index.html">INDEX</a>
    

La relativa sería la siguiente:

<a href="⁄folder⁄index.html">INDEX</a>
    

Cuando estamos en una página web de ese sitio http:⁄⁄example.com, el navegador ya habrá reconocido previamente el dominio de esa página. Cuando encuentra una ruta relativa en un vínculo procede de la siguiente forma:

  • Si empieza con una barra como ⁄folder⁄index.html entiende que es referenciada a la carpeta de inicio, por lo que antepone http:⁄⁄example.com a esa ruta quedando http:⁄⁄example.com⁄folder⁄index.html, ruta que enviará en la petición al servidor.
  • Si empieza como subfolder⁄ entiende que es referenciada a la carpeta actual de la página donde está contenido ese vínculo. Si por ejemplo estamos en la página ⁄folder⁄index.html que contiene el vínculo subfolder/sample.html, antepone la carpeta de la página actual para formar el vínculo final http:⁄⁄example.com⁄folder⁄subfolder⁄sample.html.

La principal ventaja de usar rutas relativas es que si en un momento posterior queremos cambiar el dominio del sitio lo podemos hacer sin tener que estar modificando todos los vínculos. De hecho esto me sucedió cuando tuve que actualizar de HTTP a HTTPS, no suponiendo mas esfuerzo que modificar sólo los vínculos de algunos elementos especiales que requieren la ruta absoluta, como el siguiente:

<link rel="canonical" href="https:⁄⁄www.wextensible.com⁄herramientas⁄web-tools-online⁄vinculos.html" />
    

Ese vínculo se agrega en todas las páginas e informa a los buscadores de la ruta canónica que preferimos que se use para indexar cada página. En la herramienta que comprueba vínculos podemos chequear que se cumple la ruta canónica, de tal forma que si establecemos que debe ser https:⁄⁄example.com resultarán erróneas si encuentra algo diferente como https:⁄⁄www.example.com, http:⁄⁄www.example.com o http:⁄⁄example.com.

Hay que tener en cuenta que el navegador enviará la ruta al servidor quien se encarga de resolverla dentro del sitio. Cabe la posibilidad de configurar el servidor para definir los páginas índice denominándolas generalmente como index.html. Así que una petición como <a href="⁄folder⁄">INDEX</a> cuando llega al servidor le agregará index.html recuperando ⁄folder⁄index.html. En la herramienta podemos configurar que revise archivos index, de tal forma que una ruta que termine en ⁄index.html será advertida de que debe finalizar en barra. Esto puede ser una facilidad si tenemos varios tipos de archivos index configurados en el servidor, como index.html e index.php. Así una ruta como ⁄folder⁄ nos llevará a la página índice que se encuentre en esa carpeta sin tener que saber exactamente como se denomina. En la herramienta podemos configurar este aspecto.

Los servidores pueden permitir que las rutas pueden ser combinadas con uno o dos puntos. Así algo como ..⁄ retrocederá una carpeta. Particularmente prefiero evitar las rutas que retroceden y me planteo que si una ruta es previa a la página actual la referencio desde la carpeta de inicio y si es posterior la referencio con respecto a la carpeta actual. Supongamos que tenemos esta estructura de carpetas y páginas:

[http:⁄⁄example.com]
    index.html
    [folder]
        index.html
        [subfolder1]
            index.html
        [subfolder2]
            index.html
    

Si estamos en ⁄folder⁄index.html y queremos vincular con una ruta en la primera subcarpeta pondremos subfolder1⁄index.html. Si estamos en ⁄folder⁄subfolder1⁄index.html y queremos ir a ⁄folder⁄subfolder2⁄index.html podríamos usar los "..⁄" que retroceden ..⁄subfolder2⁄index.html, pues con ".." retrocedemos una carpeta y luego formamos la ruta desde ahí. Como dije antes, yo prefiero no usar rutas que retroceden pues una cadena de secuencias ".." no nos dice nada acerca de adónde apunta y es díficil de escribir. Sin embargo si que utilizo la referencia a la propia carpeta usando un sólo punto ".⁄" como veremos más abajo.

Una ruta relativa también podría estar vacía. En general es preferible evitar un valor vacío, pues pudiera estar vacío por omisión y no lo detectaríamos. Con algo como <a href="">abc</a> donde el vínculo es una ruta vacía, esa URL apuntará al propio documento. Un vínculo al propio documento no es de mucha utilidad a no ser que sea a un vínculo interno, en cuyo caso pondríamos algo como <a href="#xyz">abc</a>. Si quisiéramos apuntar a la misma página con el objetivo de recargarla podríamos poner <a href="doc.html">abc</a>, siendo "doc.html" el nombre de esa página.

Si lo que pretendemos es vincular con el archivo index en la misma carpeta y el propósito es no especificar los "index", deberíamos usar <a href=".⁄">abc</a>. Y si el objetivo fuese vincular con el index del sitio usaríamos <a href="⁄">abc</a>.

En estos vínculos reales puede ver como enlazan. Pasando el cursor sobre el enlace se puede observar la URL en la barra de estado que los navegadores suelen tener en el margen inferior y así no necesitará actuar sobre el enlace.

  • href="/" enlaza con la página de inicio del sitio https://www.wextensible.com
  • href="" enlaza con la página actual https://www.wextensible.com/herramientas/web-tools-online/vinculos.html
  • href="vinculos.html" enlaza con la página actual https://www.wextensible.com/herramientas/web-tools-online/vinculos.html
  • href="sitemap.html" enlaza con otra página en la misma carpeta que la de la página actual https://www.wextensible.com/herramientas/web-tools-online/sitemap.html
  • href="./sitemap.html" usando "./" desde una carpeta referenciará a la misma carpeta, en este caso la carpeta actual /herramientas/web-tools-online/ y luego a otra página en esa carpeta sitemap.html
  • href="././././sitemap.html" como referencia la misma carpeta se puede repetir "./" oteniéndose la misma referencia a esa página sitemap.html como en el caso anterior. Parece que "./" no es muy útil, a excepción del uso en el siguiente caso.
  • href="./" enlaza con la página índice de la carpeta donde está ubicada la página actual https://www.wextensible.com/herramientas/web-tools-online/index.html. Equivale a href="index.html", pero así evitamos escribir archivos index.
  • href="../resaltador/" retrocede una carpeta desde la de la página actual y va al index de otra https://www.wextensible.com/herramientas/resaltador/index.html

Aunque active "..⁄" no tendrá efecto en la carpeta raíz. Así https:⁄⁄example.com⁄..⁄privado⁄modulo.php será solicitado por el navegador como https:⁄⁄example.com⁄privado⁄modulo.php, eliminando las retrocesiones. Si no existe tal documento en la carpeta pública el servidor devolverá un error de no encontrado.

Cargando un Sistema de Archivos Locales

El chequeo de vínculos se limita a los vínculos del sitio comprobando que existe el documento en el Sistema de Archivos Locales. Si no se cargan el total de archivos locales que pudieran ser destino de los vínculos nos dará error de que no encontró el archivo. Recordemos como cargar ese conjunto de archivos en la pestaña de configuración del marco principal. Si tenemos nuestro documentos de desarrollo en una carpeta del ordenador que se llame "devweb" podemos seleccionar o arrastrar esa carpeta hasta el botón de elegir archivos:

Figura
Figura. Cargando un Sistema de Archivos Locales

Una vez cargados los archivos aparecerán el número de documentos y la carpeta raíz enlazada junto a un botón para tener la posibilidad de desconectar ese sistema de archivos.

Figura
Figura. Sistema de Archivos Locales cargado

Realmente no se cargan los archivos sino un conjunto de punteros a los archivos, así que la desconexión lo que hace es vaciar ese conjunto. El hecho de que no se cargue el contenido del archivo nos permite modificar ese contenido y el puntero al archivo seguirá siendo válido. Esto es muy útil cuando estamos pasando test a un archivo, arreglando lo que hay incorrecto y chequeando de nuevo, todo ello sin tener que volver a cargar el Sistema de Archivos. Por supuesto que el puntero ya no será válido si eliminamos, movemos o renombramos el archivo.

No olvide que esta herramienta puede acceder a los archivos que seleccione, pero en ningún caso puede crear, modificar o eliminar carpetas y/o archivos en su ordenador. Esto es una limitación de los navegadores para evitar un uso indebido. El marco de herramientas contempla sólo la posibilidad de realizar una falsa descarga en la carpeta de descargas del navegador. Desde ahí usted puede, si lo desea, trasladar manualmente ese archivo a donde proceda.

Recuerde que al cargar un Sistema de Archivos Locales buscará una archivo wt.txt con la configuración del marco de herramientas. El primer archivo con la configuración que encuentre hará que el marco entre en modo local, así que podemos salvar las configuraciones para una ejecución en otro momento.

Iniciando herramienta chequeadora de vinculos

El siguiente paso después de cargar el Sistema de Archivos Locales es volver a la herramienta chequeadora de vínculos y seleccionar la carpeta raíz cuyos documentos vamos a chequear:

Figura
Figura. Carpeta pública o Home

La carpeta raíz es tal que si tenemos un vínculo href="⁄articulos⁄actualizar-sitio⁄index.html" hemos de localizar ese documento en la ruta ⁄devweb⁄wx⁄articulos⁄actualizar-sitio⁄index.html.

En mi caso la carpeta raíz equivale a la de desarrollo y es ⁄devweb⁄wx, aunque por supuesto puede usar otras estructuras y nombres. También hay otra carpeta ⁄devweb⁄pub⁄wx que contiene los mismos documentos pero preparados para subir al sitio. Son documentos ya minimizados y refactorizados para que ocupen un tamaño menor, aparte de otros añadidos que se incorporan al publicar. Por lo tanto hemos de chequear ambos sitios en desarrollo, acciones que no pueden ejecutarse en un mismo proceso. Para facilitar el cambio entre ambas carpetas se acompañan los botones "HOME" y "PUB" que extraen las sendas carpetas desde la pestaña de configuración del marco principal:

Figura
Figura. Carpeta pública o Home en la configuración del Marco de Herramientas

Tras seleccionar la carpeta raíz podemos extraer todas las rutas para chequear:

Figura
Figura. Extrayendo rutas para chequear vínculos

Chequeando vínculos de un archivo

La herramienta permite chequear los vínculos de un único archivo o de un lote de archivos. Veámos ahora el caso de un único archivo. He modificado a propósito el documento ⁄devweb⁄wx⁄index.html con el vínculo que apuntaba a ⁄temas⁄ por ⁄Temas⁄. Algunos servidores no diferencian mayúsculas de minúsculas, pero en esta herramienta si se diferencian. Chequeamos el documento y obtenemos lo siguiente, el documento resaltado y una tabla con los resultados de todos los vínculos de ese documento:

Figura
Figura. Chequeando vínculos en un documento con un error en uno de ellos

Se observa que localizó ese error pues no existe un documento en el Sistema de Archivos Locales en la ruta ⁄devweb⁄wx⁄Temas⁄index.html. Al pulsar sobre una fila nos localiza la URL en el documento agregando la marca "90-0-0". Además al situar el cursor sobre la fila se presenta la ruta que se está intentando buscar en el Sistema de Archivos Locales.

Las tres primeras columnas de la tabla sirven para marcar la posición de la URL en el documento. Se compone de número de nodo, número de atributo y número de URL. El número de nodo es el devuelto por el parseador incluyendo los nodos texto. En cuanto a los otros dos números serán distintos de cero si un elemento tiene más de un atributo que porte una URL y si un atributo tiene más de una URL. Vea como en este documento el elemento IMG (nodo 33) tiene los atributos SRC y SRCSET, donde el segundo tiene a su vez seis URL.

Figura
Figura. Un elemento IMG con URL en los atributos SRC y SRCSET. En el segundo tiene a su vez varias URL.

Los mensajes que podemos obtener tras el chequeo pueden ser alguno de los que se se observan en la imagen siguiente:

Figura
Figura. Mensajes de chequeo de vínculos

Los mensajes de corrección a vínculos internos al documento tienen al final el signo "#". Se omite chequeado para rutas con protocolos como explicamos antes. Tampoco se revisan URL que contengan nodos PHP y elementos que porten un atributo data-notestlink.

Los atributos sobre los que chequear vínculos se configuran en la herramienta. Por defecto se establecen los siguientes:

  • action, atributo del elemento <form>
  • data, atributo del elemento <object>
  • href, atributo de varios elementos como <a> o <link>
  • src, atributo de varios elementos como <img> o <script>
  • srcset, atributo del elemento <img>
  • style, atributo de cualquier elemento, se chequea el valor url(...)

En el CSS también podemos encontrar vínculos. Por ejemplo dentro del atributo style de un elemento. En la siguiente imagen se observa que el nodo 1276 contiene 3 URL en el atributo style:

Figura
Figura. Chequeando vínculos en un atributo STYLE

Todos los vínculos en CSS siempre los vamos a encontrar dentro de los paréntesis de la expresión "url(...)". El CSS puede estar en el atributo style, en un elemento <style> o en un archivo CSS. En el siguiente ejemplo verá que se chequea una URL en un elemento <style>, formando parte de una regla @import. En estos casos en la columna atributo se indica "_TEXT_" para aclarar que el chequeo se realiza sobre el texto del elemento <style> o del archivo CSS.

Figura
Figura. Chequeando vínculos dentro de un elemento STYLE, en una regla @import.

Chequeando vínculos de varios archivos

La otra posibilidad de la herramienta es chequear un conjunto de archivos. En la siguiente imagen observará que se incluyeron cuatro rutas para el chequeado, con error en una de ellas.

Figura
Figura. Chequeando vínculos en un conjunto de archivos

El menú contextual nos permite abrir esa ruta seleccionada en el chequeador para ver el detalle del error o errores descubiertos. También puede abrir el documento en el parseador XML para descubrir el detalle del error de parseado si fuera el caso.