Volver la dirección del texto de izquierda a derecha en Firefox

Me ha sucedido en múltiples ocasiones que cuando estaba escribiendo en un campo de texto de un sitio web en Firefox, al presionar una combinación de teclas, que no me daba cuenta cuál era, el puntero y todo el texto escrito se alineaban a la derecha, y lo que escribía se iba mostrando hacia la izquierda.

Siempre terminar reiniciando el navegador, no sin antes copiar el texto para no perderlo…

La combinación en cuestión es

Ctrl+Shift+X

la cual cambia la dirección del texto. Volviendo a ejecutarla, se vuelve a la dirección normal.

Anuncios

Reubicar la metadata al ver un video en Youtube

Cada tanto me pasa que al ver un video de Youtube se referencia a su metadata (descripción del video) y me interesa poder verla mientras sigue la reproducción. Actualmente esta información se presenta más abajo (si es extensa, también está colapsada)  y obliga a hacer scroll, perdiendo de vista el video.

Teniendo una pantalla ancha existe el lugar para posicionar este contenido a la derecha del video, pero Youtube lo ocupa con la lista de reproducción o bien los videos relacionados (encabezado por el “A continuación”).

Ajustando con estilos

A continuación les comparto unos estilos CSS que permiten hacer estos ajustes a la hora de reproducir un video:

/* Ubicar la metadata a la derecha */
 #main > #meta {
   position:absolute;
   background-color:white;
   top:65px;
   right:0;
   width:700px !important;
   height:500px;
   overflow:auto;
 }

/* Ubicar videos relacionados y playlist debajo */
 #related, #playlist {
   position:absolute;
   top:565px
 }

/* Forzar que el video quede por encima al agrandarlo */
 #player {
   z-index:2;
 }

Disclaimer: Es posible que existan casos no contemplados y que Youtube cambie la estructura HTML haciendo que lo expuesto anteriormente tenga fallos o no funcione directamente… pero siempre se puede ajustar! Seguramente también existan formas más limpias y apropiadas de reubicar los elementos 🙂

Extensiones para facilitar la tarea

Para evitar tener que agregar estos estilos mediante las herramientas del desarrollador cada vez que se carga la página (algo no deseable) encontré extensiones (complementos o addons) para los principales navegadores que lo resuelven bastante bien. Ambas permiten definir una serie de estilos que quedan asociados al sitio y los podés activar/desactivar desde el botón de la extensión.

  • Chrome: User CSS es muy fácil de usar, con una interfaz sencilla para la configuración
  • Firefox: Custom Style Script requiere acceder a una pestaña de configuración, pero al mismo tiempo permite establecer código javascript

 

Esta publicación fue originada a partir de un pedido de los seguidores del Resumen Semanal de FabioTV.

Proteger las contraseñas guardadas en Firefox con una contraseña maestra

Cada vez que guardamos una clave en Firefox, la misma está disponible para cualquier otra persona que tenga acceso al navegador. La solución más drástica sería desactivar el guardado de contraseñas en Firefox, pero como es algo realmente útil vamos a ir por otro camino.

Un usuario puede acceder a las contraseñas guardadas desde:

  • Botón de identidad del sitio: icono a la izquierda de la url en la barra de direcciones
    1. Presionar el icono
    2. Presionar el botón “Más información…”
    3. Presionar el botón “Ver contraseñas guardadas” en la solapa Seguridad
  • Opciones
    • Abrir el menú Herramientas > Opciones
    • Presionar el botón “Contraseñas guardadas” en la solapa Seguridad

Una vez allí, al presionar “Mostrar contraseñas” solicita una simple confirmación y listo, tenemos a la vista TODAS las contraseñas almacenadas en el navegador.

Adcionalmente, tenemos que saber que aún sin conocer las contraseñas, con el solo hecho de ingresar al login de un sitio donde se hayan almacenado las credenciales de acceso, podremos ingresar!

Para protegernos de ambos casos, Firefox provee de la posibilidad de establecer una contraseña maestra, la cual se solicitará antes de:

  • utilizar las credenciales guardadas para completar los campos de un formulario de login
  • mostrar las contraseñas guardadas

Para configurarla debemos:

  • Abrir el menú Herramientas > Opciones
  • Marcar la opción “Usar una contraseña maestra” en la solapa Seguridad
  • Ingresar la contraseña nueva y su confirmación
  • Confirmar con Aceptar la creación
  • Aceptar nuevamente para completar el cambio de las opciones

Agregar marcador con palabra clave en Firefox

Firefox permite crear marcadores donde cada uno tenga asociada una palabra clave, de manera que se pueda utilizar como una búsqueda rápida de contenido en el sitio vinculado. Para ello, al agregar o modificar un marcador debemos indicar:

  • Dirección: Una URL que contenga la cadena “%s” (sin las comillas) en el querystring, es decir, después del “?”
  • Palabra clave: Una palabra que se asocie al tipo de búsqueda y/o al sitio donde se realizará

Luego, al escribir en la barra de direcciones la palabra clave, seguida de un espacio y un valor, se invocará la dirección asociada a dicha palabra clave y se reemplazará la cadena %s por el valor previamente indicado.

 

Ejemplos:

Vamos a ver unos ejemplos con el sitio Bugzilla de Mozilla

  1. Si accedemos seguido a los bugs allí cargados por su identificador, podemos crear un marcador:

Al escribir en la barra de direcciones: “bug 314”, se accederá a la dirección “https://bugzilla.mozilla.org/show_bug.cgi?id=314”

  1. Si queremos buscar bugs a partir de ciertos términos podemos crear un marcador:

Al escribir en la barra de direcciones: “search blank name”, se accederá a la dirección “https://bugzilla.mozilla.org/buglist.cgi?quicksearch=blank%20name”

 

TIP: En todo lugar donde vean un input de texto que permita llevar a cabo una búsqueda, Firefox asiste en la creación del marcador si hacemos:

  1. Click derecho sobre el input de texto
  2. Elegir la opción “Agregar una palabra clave a esta búsqueda…”
  3. Completar la plabra clave del marcador (la Dirección la obtiene internamente Firefox)
  4. Guardar para confirmar

Abrir automáticamente las pestañas de la última sesión en Firefox

Si cada vez que iniciamos Firefox, queremos volver a las pestañas de la sesión previa tenemos 2 opciones:

  • Presionar el botón Restaurar sesión previa, que se muestra en la página de Inicio
  • Abrir el menú Historial y luego seleccionamos la opción Restaurar sesión previa

Para automatizar esta acción procederemos de la siguiente forma:

  1. Abrir Herramientas
  2. Seleccionar Opciones
  3. Elegir la solapa General
  4. En el apartado Inicio, para la opción “Al iniciar Firefox” seleccionar “Mostrar las ventanas y pestañas de la última vez”
  5. Confirmar con “Aceptar”

Adicionalmente esto evita que al cerrar el navegador alerte por el cierre de múltiples pestañas, si está activada esa opción.

Respaldar preferencias y datos de la sesión de Firefox en Windows

Me sucede cada cierto tiempo que debido a un reinicio espontáneo del equipo, un corte de luz o un cuelgue de Firefox, se pieden o bien las preferencias del navegador o bien los datos de la sesión: principalmente las pestañas abiertas y los grupos de pestañas!

Como me gusta Firefox y quiero seguir usándolo, busqué la forma de respaldar esta información y poder recuperarla en caso de fallo. A continuación les presento el contenido del script para realizar esta tarea (tomando como base un script de respaldo en Windows), el cual pueden programar para que se ejecute por ejemplo en cada inicio de sesión en Windows.

Obs: Debemos conocer la ubicación del perfil de Firefox para poder avanzar.

Estructura del script

@echo off
for /f "tokens=1-3 delims=/- " %%a in ('date /t') do set FECHA=%%c%%b%%a
for /f "tokens=1-2 delims=: " %%a in ('time /t') do set HORA=%%a%%b

copy <PATH_FIREFOX_PROFILE>\sessionstore.js <PATH_BACKUP>\sessionstore-%FECHA%-%HORA%.bak
copy <PATH_FIREFOX_PROFILE>\pref.js <PATH_BACKUP>\sessionstore-%FECHA%-%HORA%.bak

Entonces tendremos en PATH_BACKUP una copia de los archivos sessionstore.js (datos de la sesión) y pref.js (preferencias) del perfil de Firefox, renombrados con extensión bak y con la fecha y hora en que se copiaron.

Para no tener que ir cada cierto tiempo a eliminar las copias viejas, podemos hacer que el script lo haga automáticamente borrando los archivos .bak de más de N días desde su última modificación, agregando al final:

forfiles /P <PATH_BACKUP> /M *.bak /D -<N> /C "cmd /c del @path"

Donde N indica la cantidad de días previos a la fecha actual, lo cual determina una fecha tope. Se seleccionan los archivos cuya fecha de última modificación sea menor o igual a esa fecha tope.

Atención: Si el script no se ejecuta por mucho tiempo es posible que eliminemos las únicas copias de las que disponemos!

Ejemplo:

@echo off
for /f "tokens=1-3 delims=/- " %%a in ('date /t') do set FECHA=%%c%%b%%a
for /f "tokens=1-2 delims=: " %%a in ('time /t') do set HORA=%%a%%b

copy C:\Profiles\Firefox\q7v2je1d.default\sessionstore.js <PATH_BACKUP>\sessionstore-%FECHA%-%HORA%.bak
copy C:\Profiles\Firefox\q7v2je1d.default\pref.js D:\firefox_backups\sessionstore-%FECHA%-%HORA%.bak

forfiles /p D:\firefox_backups\ /M *.bak /D -90 /C "cmd /c del @path"

De esta forma cada vez que se ejecute el script estaremos respaldando las preferencias e información de la sesión de Firefox y automáticamente borrando los archivos copiados de más de 90 días (cada par ocupa menos de 350 Kb.)

Evitar que el navegador solicite recordar los datos de acceso en formulario de login

Al ingresar los datos de acceso en un sitio, el navegador propondrá almacenarlos excepto cuando se haya desactivado el guardado de contraseñas. En la mayoría de los casos es el comportamiento deseado, dado que el usuario puede decidir si quiere o no hacerlo.

Existen contadas ocasiones donde sería bueno que el sitio pudiera indicar al navegador que no realice esta esta propuesta (por ejemplo, el sitio web de un banco). Al momento de escribir esta publicación, no hay una forma simple. Hasta hace un tiempo los navegadores se comportaban de esta manera cuando se agregaba el atributo autocomplete=”off” al formulario, pero ya no más a partir de IE11, Chrome 34 y Firefox 30.

Igualmente, la seguridad en el acceso debería pasar por otro lado y no por evitar que el navegador recuerde la clave. El usuario puede tener otras aplicaciones o plugins del navegador donde se almacenen, hasta puede tenerlas anotadas en un papel.

Lo que les propongo es un formulario de login que NO fomenta al navegador a solicitar recordar el usuario y la clave, compatible con casi todas las versiones de Firefox, Chrome e Internet Explorer que pude probar. Tengan en cuenta que podría funcionar hasta que cambien las reglas nuevamente.

 

Tomaremos como base el formulario de login seguro que fomenta el recordar datos de acceso, al cual le realizaremos una serie de modificaciones:

Modificaciones sobre el formulario

Modificación 1: cambiamos el tipo de input submit por button. Esto es lo que evita que la mayoría de los navegadores proponga recordar la clave.

Modificación 2: agregamos al formulario el atributo autocomplete=”off”. Aunque no es esencial hacerlo, en versiones de los navegadores previas a las indicadas se contempla.

<form action="index.cgi" autocomplete="off" method="post" id="login_form" name="login_form">
  Email: <input type="text" name="e" id="email"  /><br />
  Password: <input type="password" name="p" id="password" /><br />
  <input type="hidden" name="ps" id="secret">
  <input type="button" value="Login" id="login_button" />
</form>

OBS: en el atributo action del formulario se indica el script que procesará los datos ingresados, en este caso index.cgi pero podría ser cualquiera.

Modificaciones sobre el código javascript

Modificación 3: establecemos el login_button como elemento a observar y el evento click (en lugar del submit del elemento login_form):

Event.observe( 'login_button', 'click', formProcess);

Modificación 4: agregaamos al final de la función formProcess la acción de submit del formulario

$('login_form').submit();

 

Un detalle de color: podemos darle el toque final capturando el Enter en los campos del formulario para procesarlo (esto se hace automáticamente cuando está presente el input submit).

Agregamos el atributo onkeypress en cada uno invocando a una nueva función checkEnter, la cual al detectar que se presionó Enter invoca la función de procesamiento del formulario:

Email: <input type="text" name="e" id="email" onkeypress="checkEnter(event)" /><br />
Password: <input type="password" name="p" id="password" onkeypress="checkEnter(event)" /><br />
function checkEnter(e){
  var codigoCaracter = (e && e.which) ? e.which : event.keyCode;
  if(codigoCaracter == 13) {
    formProcess();
  }
  else {
    return true;
  }
}

 

Formulario completo

A continuación les dejo el código del formulario completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test Site</title>
    <script type="text/javascript" src="sha512.js"></script>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
      Event.observe(window, 'load', function(){
        Event.observe( 'login_button', 'click', formProcess);
      });
      function formProcess(){
        //agregar validaciones
        $('secret').value = hex_sha512($('password').value);
        $('password').value = '';
        $('login_form').submit();
      }
      function checkEnter(e){
        var codigoCaracter = (e && e.which) ? e.which : event.keyCode;
        if(codigoCaracter == 13) {
          formProcess();
        }
        else {
          return true;
        }
      }
    </script>
  </head>

  <body>
    <form action="index.cgi" autocomplete="off" method="post" id="login_form" name="login_form">
      Email: <input type="text" name="e" id="email" onkeypress="checkEnter(event)" /><br />
      Password: <input type="password" name="p" id="password" onkeypress="checkEnter(event)" /><br />
      <input type="hidden" name="ps" id="secret">
      <input type="button" value="Login" id="login_button" />
    </form>
  </body>
</html>