no solo usabilidad: revista sobre personas, diseño y tecnología

Próximamente: Máster Universitario en Diseño de Experiencia de Usuario (online). UNIR. Inicio: 15 de Marzo de 2016

2 de Febrero de 2003

Pop-ups usables en Javascript

Razzari, Manuel

Resumen: Sin entrar en la discusión acerca de si es aconsejable o no el uso de pop-ups, se explica detalladamente cómo lanzar correctamente un pop-up mediante javascript, analizando también las formas incorrectas de hacerlo y los problemas que conllevan.

El problema

Para la mayoría de las personas resulta confuso que, al hacer click en un link o botón, la página responda lanzando una nueva ventana del navegador. Añade otra dimensión a la complejidad de la navegación. Sin embargo, muchas veces nuestro cliente necesita un pop-up, o nosotros mismos decidimos que el visitante de la página podrá manejarlo.

Más allá de las discusiones acerca de usar o no un pop-up, hay un problema que los corrompe sistemáticamente, que los hace perversos, que agrede a usuarios avanzados y principiantes en su navegación, confunde a los buscadores, y genera ruido en el código.

Este problema es que, existiendo varias formas de lanzar un pop-up con código Javascript, las más usadas son las incorrectas.

La forma correcta de lanzar una ventana pop-up con Javascript

El siguiente es el código a utilizar para lanzar un pop-up:

<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>
Lanzar correctamente

Simplemente cambiar en href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en pixeles).

El problema con las otras formas de lanzar un pop-up

La forma más común de lanzar un pop-up erroneamente es la siguiente:

<a href="#" onClick="window.open('/index.htm','popup','width=300,height=400')">Lanzar mal</a>
Lanzar mal

Aquí, el autor utiliza el atributo href="#" simplemente para obtener el efecto visual de la manito y el subrayado sobre el link. Luego, utiliza el evento onClick sobre ese link para abrir la ventana. Lo probamos en el navegador, y funciona perfectamente.

Sin embargo, veamos los problemas que resultan de este link.

Y todo puede ser peor... Existe una forma aún más perversa, que consiste en utilizar el pseudo-protocolo javascript: para utilizar el código directamente desde el href.

<a href="javascript:window.open('popups.htm','popup','width=300,height=400');">Lanzar peor</a>
Lanzar peor

Intenta hacer click derecho y Abrir en una ventana nueva. Lanzará una ventana en blanco, y de esta, con suerte, el pop-up. Una vergüenza.

Para quienes crean que pueden quedarse tranquilos confiando en que su herramienta visual lo hace bien, lamento decirles que la herramienta más usada para crear sitios web hoy en día también lo hace mal. Habrá que aprender a hacerlo a mano.

El funcionamiento de la forma correcta

<a href="/index.htm" target="popup" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>

Vemos aquí el código para hacer correctamente el link que lanza el pop-up. Simplemente, en lugar de definir la dirección del nuevo .htm dentro de la función window.open, lo que hacemos es indicarle que desde el mismo tag (this) deberá tomar el valor del atributo href.

Con esto logramos conservar el valor semántico del href, la dirección de la página con que se vincula, y le sumamos, si el cliente dispone de Javascript, el que se abra en un popup. Pero si no dispone de Javascript, si es un navegador sólo-texto, si es un motor de búsqueda, funcionará igual.

Y al ser un link normal, con href, podrá ser agregado a Favoritos, indexado por buscadores

Finalmente, si el cliente tiene Javascript y el link se lanza como pop-up, el agregado de return false al final hará que la página inicial no de "saltos" o se cargue de nuevo luego de hacer click.

Anexo 09/03/2003:
Para los usuarios de Dreamweaver, FlevOOware ha creado una extensión para lanzar los pop-ups de forma correcta.

Compartir:

Facebook Twitter Google LinkedIn

Acerca del autor/a:

Manuel Razzari. funkascript.

Citación recomendada:

Razzari, Manuel (2003). Pop-ups usables en Javascript. En: No Solo Usabilidad, nš 2, 2003. <nosolousabilidad.com>. ISSN 1886-8592


No Solo Usabilidad - ISSN 1886-8592. Todos los derechos reservados, 2003-2015
email: info (arroba) nosolousabilidad.com
Powered by Calmly Writer