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

Actualizado: 30/07/2018

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 */
 #primary-inner > #meta {
   position:absolute;
   background-color:white;
   top:65px;
   right:0;
   width:25% !important;
   height:700px;
   overflow:auto;
 }

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

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

/*Optimizar el espacio disponible*/
 .description.ytd-video-secondary-info-renderer{
    margin-left:0;
 }

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 :).

Estos estilos se pueden aplicar dentro de un media query para aplicarlo solo a partir de cierto ancho:

@media (min-width: 999px){
  /* Ubicar la metadata a la derecha */
    #meta { position:absolute;
    ...
}

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

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>

Manejo de grupos de pestañas en Firefox

Para los que usamos mucho un navegador notamos que a veces la cantidad de pestañas abiertas nos sobrepasan. Intentamos ordenarlas para que las que tratan de un mismo tema queden juntas pero a veces no alcanza.

Firefox cuenta con una herramienta que facilita esta gestión y se llama “Agrupar pestañas”. La misma se activa al hacer click sobre el icono representando 4 rectángulos de distintas dimensiones, por defecto ubicado a la izquierda del botón “minimizar” o con la combinación de teclas: Ctrl + Shift + E.

Cuando lo hacemos tendremos una nueva vista con un recuadro que contiene las pestañas con las que estábamos trabajando. Este representa un grupo de pestañas.

Acciones disponibles

Las siguientes acciones pueden realizarse desde la vista de grupos de pestañas.

Crear un nuevo grupo de pestañas

  1. Doble click sobre el escritorio (donde no haya ningún grupo)

Borrar un grupo de pestañas

  1. Click izquierdo sobre la cruz en la esquina superior derecha del grupo.
  2. Se muestra un recuadro con el texto “Deshacer cerrar grupo” con una cruz a su derecha
    1. Click izquierdo sobre el texto, cancela la operación y vuelve el grupo a la normalidad
    2. Click sobre la cruz, elimina definitivamente el grupo. Lo mismo sucedería si saliéramos de esta vista. Importante: esta acción es irreversible!

Renombrar un grupo de pestañas

  1. Click izquierdo sobre la parte superior del grupo (aparece un icono de un lápiz cuando está vacío)

Redimensionar un grupo de pestañas

  1. Click derecho sobre la esquina inferior derecha del grupo y arrastrar hasta el tamaño deseado
  2. Los demás grupos ajustarán su posición y/o sus dimensiones para no solaparse

Reubicar un grupo de pestañas

  1. Click derecho sobre cualquier parte del grupo y arrastrar hasta la ubicación deseada.
  2. Al igual que en la acción anterior, los demás grupos ajustarán su posición y/o sus dimensiones para no solaparse

Mover una pestaña de un grupo a otro

  1. Click izquierdo sobre la pestaña, arrastrar hasta el grupo deseado y soltar
    1. Si se suelta sobre un lugar donde no haya un grupo, se genera uno nuevo y la pestaña se mueve a él

Fuera de la vista de grupos de pestañas podemos hacerlo así:

  1. Click derecho sobre la pestaña
  2. Elegir la opción “Mover a grupo”
  3. Seleccionar el grupo destino a partir de su nombre
    • Si se indica “Nuevo grupo”, se genera uno nuevo y la pestaña se mueve a él

Buscar dentro de los grupos de pestañas

  1. Click sobre el icono de la lupa que se ubica debajo del botón “cerrar ventana”, o bien,
    • Presionar la combinación de teclas: Ctrl + F
  2. Escribir el texto a buscar
  3. Las pestañas que coincidan con lo buscado se resaltan

Abrir un grupo de pestañas

  1. Click izquierdo sobre cualquier parte del grupo
    • Si se realiza sobre una de las pestañas del grupo, se abre el mismo con dicha pestaña seleccionada

Salir de la vista de grupos de pestañas

  • Presionar la tecla Escape, o bien,
  • Click sobre el icono representando 4 rectángulos de distintas dimensiones, que ahora se ubica debajo del botón “cerrar ventana”

Además…

Las pestañas pegadas (fijadas) se mantienen entre los diferentes grupos, lo que lo hace muy conveniente. En la vista de grupos de pestañas podemos verlas en el margen derecho de cada grupo.

Dejar pestañas fijas en Firefox

Existen sitios a los que accedemos frecuentemente, la mayoría de ellos son herramientas: calendario, lista de tareas, agenda, etc. Cada vez que iniciamos el navegador podemos cargarlos a partir de los marcadores (o favoritos) o dejar las pestañas siempre visibles.

En Firefox, existe una alternativa mejor: “Pegar la pestaña”.  Para ello simplemente debemos:

  • Click derecho sobre la pestaña
  • Elegir la opción “Pegar pestaña”

Cuando se realiza esta acción la pestaña se posiciona a la izquierda de las restantes y se contrae al ancho del icono (favicon) del sitio. Allí se quedará hasta que la cerremos o indiquemos “Despegar pestaña” de manera análoga a la descripta previamente.

Desactivar el guardado de contraseñas en los navegadores

Los principales navegadores tienen una funcionalidad incluida que permite guardar las contraseñas (y el nombre usuario) en los formularios de acceso de las aplicaciones web. Por lo general, se encuentra activada por defecto y es muy cómo contar con ella en la computadora del hogar. Cuando detecta que nos hemos identificado, nos consulta si queremos guardar los datos ingresados para no tener que volver a tipearlos en futuras ocasiones.

Pero si el equipo es compartido o nos encontramos en la empresa tal vez no deseemos contar con dicha característica. Para desactivar el guardado de contraseñas (y borrar las que se hayan guardado) debemos seguir los siguientes pasos, dependiendo el navegador:

Chrome

  1. Escribir en la barra de navegación chrome://settings/, o bien
    1. Abrir el menú de Chrome (desde el icono de las 3 líneas horizontales)
    2. Seleccionar la opción “Configuración”
  2. Buscar “Contraseñas” mediante el buscador situado arriba a la derecha, o bien
    1. Ir hasta el final y hacer click sobre “Mostrar opciones avanzadas…”
    2. Buscar el apartado Contraseñas y formularios
  3. Desmarcar la opción “Preguntar si quieres guardar tus contraseñas web”
  4. Presionar sobre “Administrar contraseñas guardadas
    1. Borrar cada uno de los registros

Internet Explorer

  1. Ir a “Herramientas” desplegando la barra de menú, o bien
    1. Abrir el menú de Herramientas (desde el icono de engranaje)
  2. Seleccionar “Opciones de Internet”
  3. Abrir la solapa Contenido
  4. Presionar el botón Configuración en el apartado Autocompletar
  5. Desmarcar la opción “Nombres de usuario y contraseñas en formularios”. Se desactiva la opción “Preguntar antes de guardar las contraseñas”
  6. Presionar el botón “Eliminar el historial de Autocompletar…
    1. Desmarcar la opción “Conservar los datos de sitios web favoritos”
    2. Marcar solamente la opción “Contraseñas” (se pueden marcar otras opciones si así se lo desea)
    3. Confirmar con Eliminar
  7. Confirmar con Aceptar
  8. Cuando se concluya la limpieza, aparece en la parte inferior del navegador el mensaje “Internet Explorer terminó de eliminar el historial de exploración seleccionado”

Firefox

  1. Ir a “Herramientas” desplegando la barra de menú, o bien
    1. Abrir el menú de Firefox (desde el icono de las 3 líneas horizontales)
  2. Seleccionar Opciones
  3. Elegir el bloque de Seguridad
  4. Desmarcar la opción “Recordar contraseñas para los sitios” en el apartado Contraseñas
  5. Presionar el botón “Contraseñas guardadas…
    1. Presionar el botón “Eliminar todo”
    2. Presionar Cerrar
  6. Confirmar con Aceptar

Si nos encontramos en un lugar temporal como ser la casa de un amigo, una notebook de un compañero o un cibercafé, lo mejor es usar la navegación privada y evitar todo tipo de inconvenientes.