Dar a los usuarios una rapida salida encubierta de una página web a otra.

por: Chris Coyier

Un lector escribió una pregunta muy interesante e importante. La respuesta podría salvar a la gente de cualquier daño o, literalmente, salvar vidas.

Estoy rediseñando un sitio web para las víctimas de abuso doméstico. El director del programa quiere que se incluya un botón donde las víctimas pueden hacer clic rápidamente para ocultar la ventana si se les sorprende. No sé qué opciones están disponibles… ¿Alguna sugerencia?

Lo primero que pensé literalmente fue en el asunto técnico: ¿se puede cerrar una ventana con un clic en un botón? ¿Hay quizas un método window.close (), para este trabajo?

<buttononclick="window.close();">Cerrar Ventana</button>

No. No podemos contar con ese método. Eso sólo se cierra una ventana que se abrió con JavaScript , lo que en un sitio web típico no es el caso.

Pero, ¿realmente queremos hacer esto de todos modos? ¿Alguna vez se acercó a alguien que usa una computadora y cierra la ventana del navegador cuando se aproxima? Incluso si es una coincidencia, se ve muy sospechoso ¿no? Creo que especialmente se quiere evitar sospechas en este caso.

Una acción más simple y menos sospechoso sería redirigir la página a algo genérico y sin mucha importancia, como weather.com. Otra ventaja es que usted puede contar con que funcione en cualquier navegador.

<buttononclick="window.location ='http://weather.com';">Go</button>

Pero podemos hacerlo un poco mejor. ¿Qué pasa si el abusador que camina cerca de la victima determinana que el cambio repentino en el sitio web se ve sospechoso? Tal vez va a tratar de forzar a la víctima para dar clic en el botón de retroceder para ver lo que estaba viendo, o hacerlo el mismo. Para evitar esto, debemos abrir el enlace en una pestaña nueva si es posible, que esté libre del historial de navegación.

Si empezamos a abstraer el código JavaScript desde el propio botón de salida, tendremos:

$("#get-away").on("click",function(){ 
window.open("http://weather.com","_newtab");});

La nueva pestaña no tienen historial de navegación directa, así que pulsando el botón de atrás no irá a ninguna parte. Eso es bueno, pero abrir una nueva pestaña se ve un poco diferente que simplemente cambiar de página. Si el perpetrador se da cuenta, tal vez haga clic en la última pestaña y ver lo que estaba allí. Podemos tratar de proteger lo que estaba viendo la victima cambiando lo que estaba en la otra pestaña:

$("#get-away").on("click", function() {
  window.open("http://weather.com", "_newtab");
  window.location.replace('http://google.com');
});

Mediante la sustitución de la dirección URL de la página original, no se va a añadir un elemento al historial del explorador. Así el botón de retroceso queda desactivado. Pero si la víctima ya había navegado un poco en el sitio original, el botón de atrás regresara a estas páginas por desgracia. Una solución sería que tal vez el sitio original podría utilizar algún tipo de carga de las páginas mediante Ajax que no afecta el historial del navegador para evitar este problema. Por lo que sé y he investigado, no hay forma de borrar completamente el historial del navegador a través de JavaScript.

Otra consideración para el sitio de víctimas es la ubicación, el estilo y el contenido de este botón de “escape”. Nosotros podemos borrar el historial del sitio de forma manual, cambiar de sitio web, abrir nuevas pestañas, y cerrar las ventanas del navegador. El punto aquí es hacerlo muy rápido , en una situación de emergencia. Así que tener un pequeño botón escondido en algún lugar de una página no hace mucho bien, sobre todo porque la víctima no va a recordar o saber por donde llegar a ese botón rápidamente. Lo más probable es que la victima haga clic a los controles que utiliza más a menudo como el botón de cerrar ventana.

Diseño racional, creo que el mejor plan es a lo grande, claro y persistente.

Esa barra verde grande sería un barra ancha de posición fija. Por lo tanto, se adhiere a la parte inferior de la página, sin importar qué. El texto “Go” es sencillo, descriptivo, y no genera sospechas (La palabra “go” se utiliza en toda la web). Los marcas de color verde con la palabra “Go” no son indicadores de peligro.

Existe un signo de interrogación allí también, que lo vincula a otra página lo que explica por que este barra es enorme y extraña.

Todo va bien hasta ahora, pero a pesar de la gran meta, mover el ratón puede ser un poco torpe y lento. Tal vez la víctima está escribiendo algo cuando el abusador camina cerca, el sitio podría proporcionarnos un atajo de teclado que haga lo mismo que al hacer clic en la barra. La tecla de ESCAPE parece apropiado.

Puesto que necesitamos para desencadenar acciones similares de dos maneras diferentes (pulsación de tecla o clic) es el momento de resumir la funcionalidad en la función.

function getAway(){
// Get away right now 
window.open("http://weather.com","_newtab");
// Replace current site with another benign site 
window.location.replace('http://google.com');}

$(function() { 
$("#get-away").on("click", function(e) { 
getAway(); 
}); 

$("#get-away a").on("click", function(e) { 
// allow the (?) link to work 
e.stopPropagation(); 
}); 

$(document).keyup(function(e) { 
if (e.keyCode == 27) { 
// escape key 
getAway(); 
} 
}); 
});

La nueva pulsación de una tecla de “escape” funciona de forma idéntica en Chrome y Opera. En Safari abre una nueva pestaña, pero la sustitución de la antigua página, la abre en blanco (al parecer no se puede abrir una nueva ventana con una ubicación de una pulsación de tecla en Safari). Firefox reemplazará la página actual de forma inmediata, pero bloquea la ventana emergente de forma predeterminada a menos que explícitamente se lo permitamos al sitio.

He empleado el “KeyUp” evento. Es tentador usar “KeyDown” para que sea un poco más inmediata, pero lamentablemente IE no da lugar a un código de clave 27 en un KeyDown de la tecla Escape.

Ver demo

¿Qué les parece? ¿Será que cubre la necesidad lo mejor posible? ¿Tienen algunas ideas mejores para ofrecer a las víctimas de violencia doméstica una rápida salida encubierta de un sitio web?

Artículo original: http://css-tricks.com/website-escape/

Traducción por Jazdian Blog

Anuncios

Responder

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