Abrir Nueva Ventana en (X)HTML Strict

Como ya lo había comentado en este post, voy a explicar acá una forma alternativa de abrir nuevas ventanas y al mismo tiempo no romper la validación de (X)HTML Estricto.

Nota: Éste post es una continuación del mencionado anteriormente, donde explico las razones por las que me parece un método válido de trabajo. Dándolo por sabido, sólo procederé a explicarlo si extenderme en las razones.

Muy bien, como ya sabemos, la recomendación de (X)HTML Estricto ha eliminado el atributo target en la etiqueta de hipervínculo (<a>), por lo que su uso en el código HTML o XHTML impedirá que nuestros sitios sean válidos ¿Pero cómo resolver el problema cuando realmente necesitamos (sin tener en cuenta los molestos pop-up) que nuestro vínculo se abra en una ventana/pestaña aparte? La respuesta: echando mano de un nuevo atributo de hipervínculo (el atributo rel) y de un pequeño código en Javascript.

El Atributo rel:

Ya existente en la etiqueta link, es añadido a la etiqueta a para darle significado semántico a los hipervínculos. En otras palabras, permite establecer la relación entre la página donde está el vínculo y la página a donde lleva. Aunque tiene algunos valores determinados, es permitido colocar valores personalizados por parte del diseñador/desarrollador.

Esta flexibilidad del atributo rel ha permitido darle otras aplicaciones por parte de los buscadores como Google o Yahoo!, que han acordado no hacer seguimiento de los hipervínculos cuyo atributo rel sea “nofollow”, para ayudar a combatir el endemoniado spam (Yeah! ), o el caso de Technorati, que promueve el uso del valor “tag” para ayudar en la búsqueda por etiquetas.

Esta misma flexibilidad es la que usaremos para nuestra técnica.

Vamos a lo Nuestro

Ok, lo primero que debemos hacer es agregar a nuestras etiquetas <a> el atributo rel, al que asignaremos el valor que usaremos para saber cuáles son los hipervínculos que queremos abrir en una ventana nueva (no es obligatorio, pero dado que se ha estado volviendo un estándar, usaremos el valor external). Por ejemplo, si queremos aplicar esta técnica a un hipervínculo a cesarfrick.com, colocaríamos:

<a href="http://www.cesarfrick.com" title="César Frick - Diseño Web y Multimedia" rel="external">cesarfrick.com</a>

Una vez hecho esto, creamos un documento .js donde escribiremos el código javascript que hará “la magia” . En él escribiremos esto:


function openExternal(){
if(!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++){
var thisAnchor = anchors[i];
if(thisAnchor.getAttribute('href') && thisAnchor.getAttribute('rel') == 'external'){
thisAnchor.target = '_blank';
}
}
}

window.onload = openExternal;
Expliquemos un poco el código:

Lo primero que hacemos es crear una función (en este caso la he llamado “openExternal”). Esta función es la que:

1. Chequeará que haya etiquetas en nuestro (X)HTML. Si no las encuentra, sale de la función sin devolver ningún resultado.
2. En caso de encontrarlas, las almacenará en un Array
3. Por medio de un Bucle for, chequeamos dos cosas:
   1. Que el vínculo tenga un atributo href.
   2. Que el atributo rel sea “external”.
4. Si ambas condiciones son ciertas, agregamos al vínculo el atributo target y le asignamos el valor _blank.

Esta sería toda la función. Ahora lo único que nos queda es llamarla cuando se cargue la página para que se ejecute después que todos los vínculos han sido cargados y antes que el usuario haga algo.

Una vez escrito el código, guardamos nuestro archivo y le colocamos un nombre que nos permita identificar qué hace (yo llamé al mío external_links.js).

¿Por qué guardarlo en un archivo aparte? Por dos razones:

1. Hacemos nuestro (X)HTML más limpio separando la maquetación (el HTML como tal) de la programación, así se lee mejor y podemos dedicarnos a cada cosa (la maquetación o la programación) separadamente sin afectar el otro archivo. Esta es la misma razón para usar archivos .css para dar estilo a nuestro HTML.
2. Hacemos nuestro código reusable porque, al estar en un archivo aparte, si lo necesitamos en otro proyecto sólo tendremos que copiarlo en la carpeta del siguiente proyecto sin tener que copiar y pegar el código cada vez.

Ahora lo único que nos falta es asociarlo a nuestro archivo .html, lo que hacemos a través de la etiqueta <script>, colocando entre las etiquetas <head> y </head>:

<script type="text/javascript" src="scripts/external_links.js"></script>

En este caso asumo que el archivo está dentro de una carpeta llamada “scripts”, que está en la raíz del sitio, si lo guardas en un sitio diferente, debes cambiar la ruta por la tuya.

¡Y eso es todo! Espero que les sea de ayuda

Como dije también en el post anterior, es recomendable, por razones de usabilidad, al menos advertir al usuario que los links se abrirán en una ventana nueva, o darle la opción de abrirlo también en la misma ventana, si así lo desea.

Update: En vista de la observación que hice en el párrafo anterior respecto a la usabilidad, hice unos cambios al script en este post.