Protege tu PC y tus discos externos de robos y pérdidas con TPM y Bitlocker

Cualquiera que maneje una computadora, especialmente si es un portátil, corre el riesgo de perderla o de que se la roben. Incluso un ordenador de sobremesa puede verse comprometido y hay bandas que roban en las empresas solo por los datos que pueden sacar de los PCs.

Por ello es importante proteger los datos de cualquier sistema portátil que manejemos, en especial si se trata de una computadora de la empresa. Ya no solo por la información que tengamos, sino porque si perdemos o nos roban un ordenador empresarial, el asaltante podría tener acceso a toda la red interna de la organización. Además, si almacenamos claves u otra información valiosa en la maquina (nunca debemos hacerlo sin cifrar esa información) es todavía peor.

Si tienes acceso físico a una maquina es bastante sencillo poder saltarse toda la seguridad y acceder usando cualquiera de las cuentas de usuario existentes, cambiándoles la contraseña. También es posible extraer el disco duro, pincharlo a otro equipo y utilizar herramientas de «cracking» de contraseñas para averiguar la clave de acceso de cualquier cuenta, incluso de las del dominio de la empresa. Este caso es especialmente peligroso ya que, una vez dentro del equipo, con las mismas credenciales podremos conectarnos a la red de la empresa a través de la VPN que todas las empresas suelen tener.

El caso es que por nuestra seguridad y la de la empresa deberíamos proteger nuestro equipo de la mejor manera posible para evitar accesos no deseados en caso de que alguien tenga acceso físico al mismo. Y eso implica hoy en día cifrar por completo las unidades de disco duro.

Para ello tenemos varias opciones, pero si podemos escoger, lo mejor sería sacar partido al chip TPM de nuestra máquina, si es que lo tiene.

SIGUE LEYENDO para descubrir:

  • Qué es el chip TPM y para qué se utiliza
  • Cómo activar el chip TPM
  • Qué sistemas ofrecen Linux y Windows para sacarle partido
  • Cómo activar BitLocker en Windows
  • Cómo proteger discos externos y llaves USB
  • Cifrar discos usando otros sistemas
  • Cifrar el móvil con Windows 10 Mobile

TRUCO: Visualizar datos JavaScript en la consola como tablas de datos

Cuando depuramos código JavaScript estamos acostumbrados a utilizar las facilidades que nos proporciona la consola de los navegadores para mostrar datos de depuración de manera inadvertida para los usuarios.

De este modo, podemos escribir en nuestro código una línea del estilo:

console.log(miObjeto);

que provocará que se escriba en la consola de desarrollo del navegador (pulsa F12 para verla) un resumen del objeto, el cual podemos inspeccionar también si lo deseamos.

Esto está muy bien, la verdad, y es más que suficiente en la mayoría de los casos. Sin embargo, muchas veces nos resultaría mucho más útil disponer de alguna forma de ver de un solo golpe todos los datos de un objeto.

Por ejemplo, si tenemos definido un objeto con esta información:

var o1 = {
    nombre: "Pepe",
    apellidos: "Fernández",
    fechaNacimiento: new Date(1980, 4, 20)
};

y lo mostramos por la consola con el método log habitual, lo que veremos será lo siguiente en Firefox:

Resultado de un console.log en Firefox

y este sería el resultado en Chrome:

Resultado de un console.log en Chrome

y en Edge/Internet Explorer:

Resultado de un console.log en Edge/Internet Explorer

Como vemos en los tres casos podemos ver el objeto sin demasiado problema: simplemente hay que expandir la línea que genera el console.log y podremos ir desplegando sus propiedades para examinarlo.

Esto está muy bien en la mayor parte de los casos. Pero si necesitamos inspeccionar de forma más rápida y de un golpe de vista las propiedades de un objeto, existe una forma mejor de hacerlo, aunque no es muy conocida.

SIGUE LEYENDO para aprender:

  • Cómo podemos mostrar los datos de manera mejor
  • Qué diferencias e inconsistencias existen entre los navegadores
  • Cómo podemos limitar éstas

Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores.

Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón «adelante» hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de «adelante» se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en cargar y por lo tanto no se visualicen correctamente durante unos instantes, o quizá se vayan cargando progresivamente de arriba a abajo, con un efecto muy feo. Seguro que lo has sufrido alguna vez.

HTML dispone de una característica muy interesante para casos así denominada Prefetch, o carga previa de recursos.

Esta carga previa sirve para situaciones como la descrita: cuando sabemos de antemano que es muy probable que el usuario vaya a necesitar uno o varios recursos (páginas, imágenes, fuentes, scripts…) justo a continuación de haber visitado la página actual, podemos avisar al navegador de este hecho y conseguir que los vaya pre-cargando para ahorrar tiempo.

SIGUE LEYENDO para descubrir:

  • Cómo podemos precargar en segundo plano cualquier conjunto de recursos sin tener que programar.
  • Cómo podemos pre-renderizar páginas completas
  • Qué navegadores soportan estas técnicas.
  • Cuáles son los posibles problemas

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página.

Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias.

Un caso «extraño» se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros.

Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo <div>, uno dentro de otro:

<div id="Uno">
    <div id="Dos">
        Lorem ipsum...
    </div>
</div>

Y les aplicamos los siguientes estilos:

html, body{
    width: 100%;
    height: 100%;
    margin:0px;
    padding:0px;
}

#Uno{
    background-color: aqua;
}

#Dos{
    background-color: blue;
    padding: 20px;
    margin: 30px;
    height: 200px;
    width: 200px;
}

Fíjate en que el div exterior (‘Uno’) no incluye ningún tipo de dimensión ni otras propiedades. Es un elemento de bloque (display:block) porque es su comportamiento por defecto, pero nada más.

Este fragmento tan sencillo se visualiza de la siguiente manera:

CSS-Anidados-01

Es decir, si nos fijamos, la caja exterior ocupa todo el ancho disponible en la página extendiéndose hacia la derecha, se respeta el margen horizontal de 30px de la caja interior (por eso está desplazada hacia dentro, a la derecha) pero aparentemente no se respeta el margen vertical que se ha indicado (también de 30px). Además la caja exterior no está pegada al borde superior de la página a pesar de tener un margen y un relleno de 0 (son sus valores por defecto).

Es decir, en este caso se dan dos comportamientos extraños, en apariencia independientes, que son los que he marcado en negrita en el párrafo anterior que vamos a analizar a continuación.

SIGUE LEYENDO para aprender:

  • Cómo funciona el derrumbe de márgenes en elementos adyacentes
  • De qué manera diferente funciona cuando los elementos están anidados
  • Cómo podemos prevenir el derrumbe de márgenes
  • Cómo afecta la propiedad overflow sobre la visualización de márgenes
  • Qué es un contexto de formato de bloque
  • Cómo afectan otras propiedades sobre la visualización de márgenes

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Front-endSupongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser «verde», o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase «rojo», a éstos se la retira con removeClass y luego le añade la clase «verde» usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

  • Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
  • Cómo quitar clases
  • Cómo añadir clases
  • Cómo alternar clases
  • Cómo comprobar si un elemento tiene aplicada o no una determinada clase
  • Cómo dar soporte a navegadores muy antiguos

Utilidades: Vigilar páginas web en busca de cambios

Una de las herramientas más interesantes que he descubierto en los últimos meses es de la que voy a hablar a continuación. Se trata de una utilidad para verificar periódicamente el contenido de una página y recibir alertas cuando cambia.

Lo interesante es que la comparación la hace visualmente, de modo que analiza una captura visual de la página y si hay un cambio en determinado % de los píxeles, salta la notificación. esto permite obtener alertas no solo cuando cambia un texto, sino cuando cambia un color, una imagen, o la forma de un objeto por culpa del CSS.

Yo lo uso, por ejemplo, para enterarme de cuándo hay nuevas versiones de algunas aplicaciones que no tienen actualización automática ni tampoco RSS u otra forma de estar al día de los cambios.

Un ejemplo paradigmático es Filezilla Server. Este excelente servidor FTP Open Source se actualiza de tarde en tarde, y generalmente cuando lo hace es porque hay algún problema de seguridad que han solucionado. Su conocidísima versión cliente se actualiza sola cuando entras en el programa, pero el servidor (al que accedes muy poco), no lo hace. Por lo tanto, si quieres estar al día de cuándo sacan una actualización debes visitar su página a menudo y acordarte de cuál era la última versión ya que ni siquiera ponen la fecha de la descarga que está disponible.

Filezilla-Server-version

Es terrible y deberían mejorarlo.

¿Cómo lo soluciono yo?

SIGUE LEYENDO para conocer la herramienta que utilizo y qué posibilidades te da.

Cómo procesar y tratar datos JSON con Excel

Hace 15 años parecía que el futuro del intercambio de datos pasaba por XML. Este lenguaje de marcas permitía definir estructuras de datos todo lo complejas que necesitáramos, con varios niveles de estructura anidados, y de manera sencilla pues está basado en texto. De hecho recuerdo que cuando apareció la plataforma .NET lo que más destacaban en la documentación era el soporte para XML (hasta el propio nombre se derivaba en cierto modo de que estaba preparado para la Red gracias a este soporte).

Desde entonces ha llovido mucho, y las cosas han cambiado mucho también. En la actualidad existe un consenso bastante amplio en que el formato de intercambio de datos por antonomasia es JSON: JavaScript Object Notation. Este formato, basado en sintaxis JavaScript, tiene todas las ventajas del XML como el poder describir estructuras todo lo complejas que queramos, pero añade varias ventajas, como que es más fácil de leer y escribir por los humanos y, sobre todo, que es mucho más compacto para ser transmitido por la Red. Además, si consideramos su uso en la Web, el consumo de datos JSON desde una aplicación escrita en JavaScript es directo. No podría ser más cómodo.

Si necesitamos tratar información que está en formato JSON desde una herramienta más convencional como una hoja de cálculo o una base de datos, es cuando podemos tener más dificultades. Este tipo de herramientas están pensadas para manejar datos de forma tabular, por lo que acceder desde ellas a estructuras complejas, con datos anidados dentro de otros datos, etc… puede ser complejo.

Microsoft Excel es una herramienta que la mayor parte de la gente desaprovecha. Una gran mayoría de usuarios la usa de una manera muy básica, pero realmente para mi (y para mucha otra gente) es la verdadera estrella de la suite de Office, y la que de verdad marca una diferencia brutal entre Office y otros conjuntos de herramientas ofimáticas. Sus características avanzadas son bastante desconocidas, pero lo cierto es que se pueden hacer verdaderas «virguerías» con ella.

En el siguiente vídeo te cuento cómo puedes usar Excel para beber datos en formato JSON directamente desde la fuente (o sea, desde Internet por ejemplo), cómo puedes decidir exactamente cómo convertirlos en una tabla, cómo los puedes expandir y transformar y, finalmente, usarlos desde una hoja de cálculo para filtrarlos, analizarlos, graficarlos o introducirlos en otros sistemas como una base de datos. Se puede conseguir gracias a Power Query y un poco de habilidad y es algo que te puede resultar muy útil en muchas ocasiones.

SIGUE LEYENDO PARA VER EL VÍDEO COMPLETO.

Cómo instalar ChromeOS en VirtualBox

Aunque en España no se ven mucho todavía, en EEUU hace tiempo que los «Chromebooks» son muy populares, hasta tal punto que están empezando a dominar las ventas de portátiles de gama baja, especialmente en el mundo estudiantil. Se trata de portátiles, generalmente baratos, que incorporan el sistema operativo ChromeOS de Google.

ChromeOS

ChromeOS consiste básicamente en una base Linux para lanzar un navegador Chrome, que es la única aplicación que se ejecuta de cara al usuario. Es decir, al arrancar la máquina lo que se nos ofrece es un escritorio vacío con un acceso directo a Chrome y a varias aplicaciones basadas en Chrome.

Esto, que puede parecer muy limitado, en realidad es más que suficiente para la mayor parte de los usuarios. Si te fijas, el 90% o más de las aplicaciones que usas hoy en día están basadas en la web, por lo que una máquina como esta tiene mucho sentido, especialmente si no quieres gastarte mucho dinero. Incluso si eres un desarrollador (aunque no es la mejor opción para éstos) puedes desarrollar con editores avanzados en la nube como Cloud9, CodeAnywhere o Nitrous.

Aunque las máquinas Chromebook tienen un pequeño almacenamiento local, la mayor parte del mismo se delega a Google Drive (que funciona off-line también) , de modo que tienes casi todo siempre disponible desde cualquier sitio. De hecho una de sus ventajas es que siempre tienes todo donde lo dejaste aunque cambies de equipo, lo pierdas o se estropee. A mayores dispones de «sistemas de archivos» para otros almacenamientos online como Dropbox o OneDrive, que te dejan usarlos en local también de manera transparente. Y para cuando no te llegue tu máquina puedes conectarte a otra remota con Mac o Windows usando la aplicación «Remote Desktop» que funciona en Chromebook.

En general son una buena opción, pero debes comprar equipos que lleven de serie este sistema operativo si quieres utilizarlo. No puedes descargarlo e instalarlo en un equipo que ya tengas, lo cual es un fastidio.

Por suerte ahora la empresa Neverware ha lanzado un ChromeOS que puedes instalar en cualquier PC que tengas por casa. Se llama CloudReady y es gratuito para uso personal (cobran si quieres usarlo en empresas y gestionar remotamente los equipos).

Te permite crear una llave USB para poder arrancar desde la misma e instalarlo en casi cualquier PC que tengas por casa. La verdad es que es genial para darle «vidilla» a un portátil viejo que tengas por ahí ya que el sistema es muy ligero y va muy bien.

Puedes instalarlo ocupando todo el disco o bien puedes instalarlo con un arranque dual junto con Windows, teniendo así las dos opciones.

Si, como yo, simplemente te interesa probarlo sin necesidad de usar una máquina real, VirtualBox es una buena opción.

Para instalarlo en Virtualbox debes tener realizar algunas operaciones y usar ciertos ajustes específicos.

SIGUE LEYENDO para ver paso a paso cómo hacerlo.

Detectar la aparición y desaparición de un elemento: evento "inViewport"

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario.

Aparecer-Desaparecer

Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos,  podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

El problema es que no existe ningún evento como este en HTML/JavaScript.

No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta.

En este artículo vamos a desarrollar desde cero la funcionalidad necesaria para conseguir tener un evento como este, listo para utilizar en cualquier página.

La funcionalidad la vamos a dividir en varios pasos individuales que, en conjunto, nos permitirán obtener lo que necesitamos.

SEGUIR LEYENDO para leer el artículo completo y obtener el código.

La solución al problema de las claves seguras: NullPass+

En la actualidad utilizamos tantos servicios on-line diferentes y heterogéneos que es muy complicado gestionar todas las claves que debemos manejar. Yo mismo manejo varios centenares de claves diferentes, lo cual por si mismo es todo un reto. Pero es que además, si realmente quieres que sean seguras, deberías usar una clave compleja, larga y diferente para cada uno de los servicios que utilices.

La realidad es que, al final, la mayor parte de los usuarios hacen justo lo que jamás deberían hacer: utilizar una misma clave, sencilla y fácil de recordar, para todos los servicios. Problema resuelto para ellos, pero luego pasan «cosas extrañas».

Algunas opciones para guardar tus claves de manera segura

Lo de las claves es algo que ha mejorado bastante en los últimos años gracias a la posibilidad de loguearse en muchos sitios usando tu cuenta en algún servicio popular como GMail, Facebook o Twitter. Lo bueno de eso es que solo tienes que preocuparte de una cuenta, así que puedes tener una clave robusta que recordar. Lo malo es que en muchos sitios no es posible hacerlo, y en otros simplemente no te da la gana de darles acceso a tus datos personales en la red social de turno. Así que es poco más que un paliativo.

Otra opción cada vez más popular es usar un gestor de claves on-line como LastPass o similar. Yo personalmente no lo veo una opción. Ningún sistema está blindado en lo que respecta a seguridad y me da igual que solo se puedan descifrar las claves usando tu clave principal: tarde o temprano aparecen problemas.

También existen gestores de claves seguros que funcionan off-line (en local) y que permiten sincronizar las claves entre equipos a través de alguna «nube» de archivos como Dropbox. A mi personalmente me gusta bastante KeePass, que encima es gratuito y funciona en casi cualquier dispositivo que te puedas imaginar. Lo que me ocurre con este tipo de servicios es que los veo poco operativos: tienes que mantener las claves bien clasificadas, localizarlas para leerlas, cambiarlas, etc… Y es un engorro mayor si tienes que acceder a ellas desde el móvil.

Al final tradicionalmente he venido utilizando un enorme archivo de texto que guardo en una unidad encriptada con una clave fuerte, que es la única que debo recordar. Esta unidad encriptada la sincronizo entre los diferentes equipos usando un disco «cloud». Me facilita la vida porque el manejo del archivo de texto es muy sencillo y ágil, pero sigue siendo un verdadero engorro, sobre todo -nuevamente- en el móvil :-S

Una solución mejor

Hace un par de semanas estaba en un restaurante con unos amigos, cuando surgió el tema de las malditas claves. Ellos son usuarios «de a pié», pero usan multitud de cuentas de todo tipo y deben recordar decenas de claves. Al final acababan haciendo lo de todo el mundo: usan una o dos claves sencillas en todas partes. ¡Error!.

Así que a raíz de esa conversación y de ver las malas prácticas que la situación está provocando, se me ocurrió pensar si habría algún sistema mejor para solucionar el problema, algo que no me había planteado antes.

Lo que pensé es que el sistema ideal debería cumplir los siguientes requisitos:

  1. Solo sería necesario recordar una única clave.
  2. Las claves no deberían almacenarse en ningún lado. Esto nos evita tener que andar almacenándolas en la nube, sincronizar archivos o dar la posibilidad de que alguien pueda acceder a ellas. Simplemente no estarían guardadas.
  3. Debería valer para cualquier tipo de servicio, aunque tengan requisitos de complejidad o longitud muy altos.

Y se me vino a la cabeza enseguida un sistema bastante sencillo pero efectivo capaz de conseguir todo lo anterior. Se trataba de crear un generador de claves que, a partir de una única clave larga y segura y el nombre del servicio, sería capaz de generar siempre la misma clave compleja, sin necesidad de anotarla en ningún lado.

SIGUE LEYENDO para obtener la solución y poder usar NullPass+, que te permitirá hacer todo lo que se indica más arriba, sin conexión a Internet y desde cualquier móvil, tablet o escritorio.