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.


8 thoughts on “Abrir Nueva Ventana en (X)HTML Strict

  1. Hola Martin.
    No, lo que explico en este post es una forma de abrir un vínculo en una ventana nueva. En el caso que me dices, crean un div que funciona como una ventana flotante dentro de la misma página. Cuando tenga tiempo (que últimamente me resulta escaso) haré un post al respecto.

  2. Yo soy un super novato y de esto no entiendo nada.pero el caso es que algunas veces me toca que hacer un link y me vuelvo un ocho.
    se trata esta de tener que dar un código en html a mis lectors y no sé donde ponerlo o mejor en que tipo de documento. porque hacerlo en una ventana nueva, al montarlo sale la imagen y no el código.
    Ojala! tu tiempo te de la oportunidad de entrar en mi página.
    hay un link que a mi me abre paro no los visitantes de mi página.

    gracias por todo lo que puedas hacer.

    Un abrazo para tu alma.

    1. Lo que quieres hacer se llama “popup”. No es exactamente de lo que se trata este artículo pero existe mucho material en la web al respecto, así que una simple búsqueda en Google te dará toda la información que necesitas al respecto.
      Una vez que tengas el código para abrir el popup, podrías aplicar la técnica de la que hablo acá para mantener válido el XHTML

  3. Muchas gracias, me sirvio para resolver la pagina q estoy haciendo…. debido a q no soy un gran conocedor sobre el tema. Te agradezco el tiempo dedicado. Gracias nuevamente.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s