Cambia el title de la web en la pestaña del navegador al perder el foco 18.3.15
Traslación al español del artículo original de Dudley Storey publicado en su web demosthenes.info el 13 de Marzo de 2015 para cambiar con js el título de la página si ésta pierde el foco.
Cambia el title de la web en la pestaña del navegador al perder el foco
Traducción del sencillo y breve artículo de Dudley Storey aka @dudleystorey en su blog demosthenes.info en el que expone cómo cambiar el title de la página web que se muestra en la pestaña del navegador si el usuario la deja en segundo plano.
Puedes verlo en funcionamiento en este mismo artículo.
Hace poco escribí en Smashing Magazine sobre la API de Visibilidad de HTML5, mostrando su habilidad única para detectar cuando una página web ya no es visible para el usuario. Además de la buena práctica que supone cerrar los servicios que no son necesarios cuando el sitio está oculto (detener animaciones, silenciar o apagar vídeos y audio, y otros) es bueno recordar al usuario que la página todavía está ahí cargada, esperando su regreso. Si quieres hacer esto último, sólo es cuestión de unas pocas líneas de JavaScript.
En primer lugar, digamos que el título de nuestra página se establece como de costumbre en HTML:
<title>Título post - Site.com</title>
Esto lo podemos leer y cambiar con JavaScript cuando la página pierde el foco. Esto es, cuando el usuario deja de tener nuestra página en primer plano:
var title = document.title,
newTitle = "RECUERDA leerme " + title;
document.addEventListener("visibilitychange", function() {
document.title = ((document.hidden) ? newTitle : title);
});
title lee el valor del<title> de la página, newTitle añade el recordatorio a la misma, y un operador ternario establece la versión adecuada en función de la visibilidad de la pestaña actual.
Puedes ver este script funcionando en esta página si dejas la web cargada y pasas a ver otra que tengas abierta en otra pestaña.
Conclusión
Esta técnica sólo será efectiva siempre y cuando se cumplan estas dos condiciones:
- El número de ventanas abiertas en el navegador por el usuario sea relativamente bajo. Esto permitirá que el título del documento sea visible en la parte superior de cada pestaña. Si el usuario es como su humilde autor, puede que tenga 30 o más pestañas abiertas a la vez, reduciendo lo mostrado a sólo los favicons. Además, la mayoría de los usuarios de móviles no verán el cambio en la pestaña, a menos que estén en el modo de visión general del navegador.
- Que un pequeño número de sitios utilicen esta técnica. Características como esta son similares a una carrera armamentista: hay poca ventaja si todo el mundo utiliza la misma técnica.
Es importante que técnicas como ésta se usen con buen gusto y cortesía: por favor, no contribuyan con una web ruidosa añadiendo títulos y/o favicons animados.
Créditos y autoría del post
La totalidad de este artículo es obra de Dudley Storey publicado originalmente en su blog demosthenes.info.
Lo publico aquí al amparo y según las condiciones del propio autor: The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.
En este enlace tienes todas las formas de contacto con el autor original así como información adicional.
@Kseso Looking very good indeed! Will link from the original article and tweet very soon - many thanks for doing the translation!
— Dudley Storey (@dudleystorey) marzo 18, 2015
Je. Poner algo como esto es medio un abuso, ¿no?.
ResponderEliminar[code]
<title>UN TÍTULO.</title>
<script type="text/javascript">
var originalTitle = document.title;
function blink() {
if(document.hidden){
document.title = (document.title == "☺")? "☻" : "☺";
setTimeout(blink, 500);
}
else document.title = originalTitle;
}
document.addEventListener("visibilitychange", blink);
</script>
[/code]
Lo tuyo con blink es para hacérselo mirar...
Eliminaro escribir una trilogía
xD
Iba a hacer una maldad peor. ¿Que pasa si en el ejemplo del artículo cambiaba el contenido de la función y metía un mensaje de alerta con el texto "No quiero que me dejes!" ?
EliminarQué peligro.