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.

Anuncios

Clases de direccionamiento IP

A continuación voy a detallar las clases de direccionamiento IP (siempre hablando de IPv4). El énfasis se realizará sobre las mayormente utilizadas y considerando las máscaras de subred por defecto (no se avanza sobre el concepto de subnetting o subredes). Este conocimiento es interesante tenerlo para cuando se defina el direccionamiento (simple) de una red interna ya sea de una organización o un hogar.

Dirección clase A

Estas direcciones tenían la finalidad de utilizarse en grandes organizaciones, debido a que para cada red posible (126) pueden existir muchísimos hosts.

  • El primer octecto se encuentra en el rango 1 – 126
  • La máscara de subred por defecto correspondiente es 255.0.0.0
  • Para direccionamiento privado (no enrutado) se utiliza 10 como primer octeto
    • Ejemplo de dirección IP de un host que pertenece a la red 10.0.0.0: 10.0.0.1

Dirección clase B

Estas direcciones se plantearon para organizaciones de tamaño medio donde se destinan los 2 primeros octectos de la dirección IP para definir la red y los otros 2 para los hosts.

  • El primer octecto se encuentra en el rango 128 – 191
  • La máscara de subred por defecto correspondiente es 255.255.0.0
  • Para direccionamiento privado (no enrutado) se utiliza 172.16 como primer y segundo octectos
    • Ejemplo de dirección IP de un host  que pertenece a la red 172.16.0.0: 172.16.0.1

Dirección clase C

Estas direcciones se establecieron para organizaciones pequeñas, donde solo se utiliza el último octeto para los hosts (máximo 254) y los primeros 3 determinan la red.

  • El primer octecto se encuentra en el rango 192- 223
  • La máscara de subred por defecto correspondiente es 255.255.255.0
  • Para direccionamiento privado (no enrutado) se utiliza 192.168 como primer y segundo octectos
    • Ejemplo de dirección IP de un host que pertenece a la red 192.168.0.0: 192.168.0.1

Dirección clase D

Estas direcciones se utilizan para multicast (comunicación hacia un grupo de destinatarios)

  • El primer octecto se encuentra en el rango 224-239

Dirección clase E

Estas direcciones tienen fines experimentales.

  • El primer octecto se encuentra en el rango 240-255

Dirección de loopback

Se utiliza para hacer pruebas que determinen el correcto funcionamiento del protocolo TCP/IP en el equipo.

  • El primer octeto comienza con 127
  • Por lo general se utiliza la dirección 127.0.0.1 y se la asocia al nombre de host localhost.

Una de las pruebas que se puede hacer con ella es generar un ping:

ping 127.0.0.1
Haciendo ping a 127.0.0.1 con 32 bytes de datos:
Respuesta desde 127.0.0.1: bytes=32 tiempo<1m TTL=128
Respuesta desde 127.0.0.1: bytes=32 tiempo<1m TTL=128
Respuesta desde 127.0.0.1: bytes=32 tiempo<1m TTL=128
Respuesta desde 127.0.0.1: bytes=32 tiempo<1m TTL=128

Estadísticas de ping para 127.0.0.1:
    Paquetes: enviados = 4, recibidos = 4, perdidos = 0
    (0% perdidos),
Tiempos aproximados de ida y vuelta en milisegundos:
    Mínimo = 0ms, Máximo = 0ms, Media = 0ms

Guardar notas y subrayados de Kindle

El dispositivo Kindle permite subrayar textos de los libros y adicionalmente escribir notas y establecer marcadores. Los mismos se almacenan en un archivo de texto plano llamado “Mis recortes.txt” o “My clippings.txt”, dentro del directorio “documents”. El formato en que se encuentran los datos si bien es claro, no permite organizarlos de manera simple fuera del dispositivo ni consultarlos posteriormente. Por otro lado, si bien podemos hacer un respaldo de este archivo, no podemos hacerlo de manera incremental.

Hace tiempo descubrí el sitio Clippings.io que brinda una interfaz muy cómoda para trabajar con los subrayados, marcadores y anotaciones de Kindle. Les enseño cómo:

  1. Acceder a https://www.clippings.io/
  2. Iniciar sesión
  3. Pueden crearse una cuenta gratuita si lo poseen una
  4. Presionar “Import”
  5. Presionar “Click to upload”
  6. Conectar el Kindle a la computadora
  7. Seleccionar el archivo “Mis recortes.txt” o “My clippings.txt”, dentro del directorio “documents”.
  8. Cerrar con Close, el mensaje que indica la cantidad de registros agregados

Nos encontramos entonces con todos los registros y podemos realizar las siguientes acciones sobre cada uno:

  • Marcarlo como favorito
  • Modificarlo
  • Agregar una nota
  • Borrarlo
  • Agregarle etiquetas

Todo esto permite luego aplicar filtros y hacer búsquedas, de manera que contemos con toda esta información organizada y lista para ser consultada.

Para finalizar, podemos exportar a planillas de cálculo Excel, PDF, archivos de texto plano y documentos de Word con cierto grado de configuración. Si también tenemos cuenta en Evernote, podemos integrarlas para generar notas a partir de los registros en Clippings.io

Pasar al siguiente mail luego de mover el actual en Gmail

Por defecto, cuando estamos viendo un mail en Gmail y hacemos alguna de las siguientes acciones:

  • moverlo a otra etiqueta
  • archivarlo
  • eliminarlo
  • marcarlo como spam

volvemos automáticamente al listado de correos donde nos encontrábamos previamente.

Por lo general, cuando leo el correo me gusta ir organizándolo al mismo tiempo y este comportamiento me obliga cada vez a seleccionar el primer mail del listado para verlo.

Por suerte existe uno de los servicios de Lab de Gmail que trata justo esta temática: Avance automático, el cual según se indica “Muestra de forma automática la conversación siguiente, en lugar de volver a Recibidos, tras eliminar, archivar o silenciar una conversación”. Lo bueno es que no se limita solo a Recibidos, como indica el mensaje.

Para activarlo contamos con estos pasos:

  • Acceder a la cuenta de Gmail
  • Desde el icono del engranaje, elegir “Configuración”
  • Seleccionar la solapa “Labs”
  • Buscar la función “Avance automático
  • Marcar la opción “Habilitar” asociada a la misma

Una vez hecho esto, desde la solapa “General”, podremos configurar en el apartado “Avance automático” si queremos que vaya a la conversación más nueva o la más antigua. Yo tengo seleccionado “la más antigua”, dado que las tengo ordenadas por fecha descendente (desde la más reciente) y casi siempre accedo a la primera.

Configurar una redirección de puertos desde un router

El router local es la puerta de entrada de las conexiones que provengan desde Internet. En ciertos casos podemos necesitar configurar que cuando se solicite acceder a nuestra red local a través de cierto puerto, dicha petición sea redirigida hacia determinado equipo de la LAN y con un cierto puerto especificado (puede o no ser el mismo de la solicitud externa)

Para ello nuestro router debe soportar la opción de Port Forwarding (Redirección de puertos) o bien en algunos modelos la funcionalidad se presenta dentro de NAT > Virtual Server.

En cualquiera de los casos lo que se presenta es la posibilidad de agregar reglas, las cuales como mínimo requieren:

  • Nombre de la aplicación: solo a fines de presentación de la información de la regla
  • Protocolo: por lo general se brindan las opciones TCP, UDP o ambos
  • Puerto de ingreso, entrada o comienzo (start port): el puerto que indica la conexión externa a nuestra red local
  • Puerto de egreso, salida o fin (end port): el puerto al cual se realiza la petición en la red local
  • IP Local: dirección IP del equipo en la red local que recibirá la petición en el puerto de salida

Ejemplo:

Si nuestra red local tiene 5 equipos, una de ellas (192.168.0.5) tiene un servidor FTP y otra (192.168.0.7) posee un servidor WEB. El router que provee el acceso a Internet, está conectado a un switch el cual vincula a todos los equipos.

Para permitir conectarnos a ambos servicios desde Internet deberemos generar 2 reglas: una para el tráfico de FTP y otra para el tráfico WEB.

Regla 1: Tráfico FTP

  • Nombre: FTP
  • Protocolo: TCP
  • Puerto de entrada: 21
  • Puerto de salida: 21
  • IP Local: 192.168.0.5

El tráfico de FTP tiene establecido por defecto el puerto 21.

Regla 2: Tráfico WEB

  • Nombre: WEB
  • Protocolo: TCP
  • Puerto de entrada: 80
  • Puerto de salida: 80
  • IP Local: 192.168.0.7

El tráfico de WEB tiene establecido por defecto el puerto 80.

En ambos casos podríamos utilizar un puerto de entrada alternativo, por ejemplo 8080 para Web, sin necesidad de modificar la configuración del servidor web interno, por lo general (en realidad depende de la aplicación que se utiliza a través de ese servicio web y de la configuración del servidor web)

 

Configurar un DNS dinámico

Cuando nos conectamos a Internet nuestro proveedor nos asigna una dirección IP que puede variar en cada conexión. Es por ello que existe la posibilidad de comprar una dirección IP para poder establecerla de manera fija y siempre que lo necesitemos poder acceder a nuestro router local a partir de ella, como un punto único de entrada.

Una alternativa tal vez más simple es la creación de un DNS dinámico o DDNS. Ya habíamos hablado de definir un DNS de manera local pero eso solamente sirve cuando desde un equipo de la red interna queremos acceder a otro de la misma red o incluso en internet. En este caso lo que buscamos es una forma para poder acceder desde Internet a nuestro router.

Para ello debemos crear una cuenta en un sitio que provea este servicio (de manera gratuita o pagando) y en ella declarar un host indicando como mínimo:

  • Hostname: un nombre de dominio propio, a partir de uno de los dominios que el servicio permita elegir
    • algunos de estos servicios proveen dominios gratuitos
  • IP address: la dirección IP actual que el proveedor de Internet nos asignó
    • por lo general, estos servicios la obtienen automáticamente

Ahora debemos esperar unos minutos a que se realice la actualización de los DNS y si indicamos en un navegador el Hostname que acabamos de definir, deberíamos tener acceso al router de nuestra red local.

El inconveniente aquí es mantener actualizada la dirección IP en el host que creamos en el servicio. Para ello deberemos optar por:

  • 🙂 configurar nuestro router, en la opción de DDNS para que automáticamente al realizar una nueva conexión, comunique la dirección IP al servicio y hostname que le indiquemos
  • 😐 instalar una aplicación propietaria que el servicio provea en uno de nuestros equipos, de manera que cuando la dirección IP de internet cambie, esta herramienta la comunique al servicio
  • 😦 acceder al sitio web del servicio y actualizar manualmente la dirección IP del host correspondiente

 

Evitar que los buscadores indexen páginas de nuestro sitio

Por defecto, los buscadores no tienen restricciones a la hora de indexar páginas de nuestro sitio web, y las utilizarán como resultados de las búsquedas que en ellos se realicen. Este proceso lo realizan sus crawlers, bots o spiders. Ahora veremos cómo indicarles lo que no deseamos que hagan.

Tengan en cuenta que estas son directivas que los bots podrían no respetar y cada buscador luego puede decidir si muestra o no la página en los resultados de búsqueda.

Definir un archivo robots.txt

En el directorio raíz de nuestro sitio, debemos crear un archivo de texto plano llamado robots.txt.

Si bien por definición soporta varias directivas, las más difundidas y contempladas son:

  • User-agent: bots a los cuales aplica la directiva posterior
    • *: Todos los bots
    • nombre-bot: La regla aplica solamente a ese bot. Algunos de los que existen hoy día: googlebot ,bingbot ,msnbot ,slurp ,scoutjet ,duckduckbot ,yandexbot ,baiduspider ,naverbot ,yeti ,exabot ,gigabot ,daumoa ,antbot ,botw ,ccbot ,mj12bot
  • Disallow: partes del sitio que no deben ser indexadas
    • vacío: Permite todo el contenido
    • /nombre-directorio/: Bloquea todo el contenido dentro de ese directorio
    • /patron: Bloquea los directorios y páginas que comiencen con el texto “patron”, ya sea el directorio “patronato” con todo su contenido o el archivo “patron.html”
  • Crawl-delay: cantidad de segundos que debe esperar el bot para indexar otra página del sitio. Evita que todas las peticiones se realicen en un periodo de tiempo muy breve, incrementando el tráfico.

Todo el texto que se agregue después de un caracter numeral (#) hasta el final de la línea, se considera un comentario.

No es obligatorio tener definido un robots.txt, pero de no existir es posible que el log del servidor registre un error 404 (no encontrado) cada vez que un bot intente obtenerlo. Si es solo por este motivo se puede crear el archivo vacío.

Esta solución es la más común ya que no ensucia el código de las páginas y puede aplicarse a nivel global de manera muy simple, pero muchos bots no la respetan y además cualquiera puede ver su contenido.

Ejemplo:

User-agent: *

Disallow: /private/

Disallow: /examples/test.php

Disallow: /error.htm

Estas líneas evitan que los bots indexen contenido dentro del directorio private, la página test.php dentro de examples y la página error.htm.

 

Usar el tag meta

En la cabecera de cada página que deseemos evitar que se indexe, debemos agregar (dentro del tag <head>):

Para bloquear todos los bots en la página

<meta name="robots" content="noindex" />

Para bloquear solamente el bot de Google en la página

<meta name="googlebot" content="noindex" />

Esta solución sólo es posible cuando se genera contenido HTML (no se pueden excluir otros tipos de documentos) y además los bots incrementan el tráfico verificando cada una de las páginas.