SiteInfo – Una clase para obtener información de una web

Trabajando en la sección de links de hive.ly necesitábamos obtener una imagen de los enlaces que suben los usuarios. He hecho una pequeña clase de PHP que obtiene algunos datos de una URL que se le proporcione, entre ellos una imagen. Primero se buscan imágenes grandes (como las de las etiquetas OpenGraph) y si no imágenes de MS, Twitter o iconos de Apple.

La clase es gratuita y está disponible en Github.

Efecto de bote para iconos

Hace mucho tiempo probé una distribución de GNU Linux (no recuerdo cuál) que usaba KDE como entorno de escritorio, y me hizo mucha gracia que al iniciar un programa aparecía al lado del cursor el icono de la aplicación botando.

Lo implementé en su momento en mi entorno de ventanas para aplicaciones web, para indicar al usuario que la aplicación se estaba cargando, y ahora como he visto que llevaba un tiempo sin publicar nada de código libre he decidido subirlo a GitHub.

Así que presento al mundo bouncingIcon, una función muy sencilla que permite poner a botar un icono (bien fijo en una esquina, bien siguiendo al cursor como hacía KDE) que le indique al usuario que se está realizando una operación en la página. El repositorio de GitHub es https://github.com/koas/bouncingIcon y la página de demo para verlo funcionar es http://koas.github.io/bouncingIcon/

Espero que le resulte útil a alguien.

Detectar si una página deja de ser visible: Page Visibility API

Hay veces que nos interesa saber si la página web en la que estamos ha dejado de ser visible. Por ejemplo, si el usuario no está viendo nuestra página quizá queramos notificarle de novedades mediante una notificación o un cambio de título de la pestaña del navegador.

Para esto, y para navegadores relativamente modernos, disponemos de la Page Visibility API. Con esto podremos saber cuándo nuestra página ha dejado de ser visible y cuándo vuelve a serlo, y actuar en consecuencia.

Detectar el ancho de la barra de scroll del navegador con JavaScript

Para detectar el ancho de la barra de scroll del navegador podemos usar este pequeño código:

function anchoBarraNavegador()
{
    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; \
    			       position: absolute; top: -9999px;';
    document.body.appendChild(scrollDiv);

    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
	
    document.body.removeChild(scrollDiv);

    return scrollbarSize;
}

Ejecutar código de jQuery cuando todas las imágenes se hayan cargado

En jQuery podemos ejecutar un código cuando la página haya terminado de cargarse de dos formas:

A) Cuando el DOM se haya cargado:

$(document).ready(function() 
{
    // Nuestro código
});

Esto significa que ese código se ejecutará cuando el navegador haya cargado todo el código HTML de la página y lo haya interpretado, teniendo así ya disponible el DOM.

B) Cuando se hayan cargado todos los elementos de la página:

$(window).load(function() 
{
    // Nuestro código
});

Este código se ejecutará cuando todos los elementos de la página se hayan cargado. Es lo que querremos usar si queremos ejecutar nuestro código cuanto todas las imágenes se hayan cargado.

Automatizar prefijos CSS con Sublime Text

Hay muchas propiedades CSS que todavía no están implementadas en los navegadores con los nombres que define el estándar, sino que cada navegador las implementa con un prefijo.

Por ejemplo, si queremos que un usuario no pueda seleccionar el texto de un elemento tendremos que escribir este código CSS para asegurarnos de que funciona en todos los navegadores:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Esto, por supuesto, es un tostón hacerlo a mano. Aquí es donde el plugin AutoPrefixer para Sublime Text nos puede echar una mano. Nos lo instalamos y al seleccionarlo en la paleta de comandos (Ctrl + Shift + P) revisará nuestro fichero (o el texto que tengamos seleccionado) y añadirá todas las propiedades específicas para navegadores allí donde haga falta.

Además se puede configurar indicando el número de versiones anteriores a la actual de los navegadores que queremos soportar.

Inspeccionar Local Storage en Firefox

Las developer tools de Chrome son una maravilla, desde su pestaña Resources se pueden ver las cookies y el Local Storage de una página muy fácilmente. Sin embargo en Firebug para Firefox no existe la posibilidad de ver / editar el contenido del Local Storage.

A no ser que instalemos FireStorage Plus!, un plugin para Firefox que añade una pestaña para consultar y editar el contenido del Local Storage de una página web.

Acceder a virtualhost de un servidor local desde dispositivos de nuestra red (sin root ni jailbreak)

Casi todos los proyectos de desarrollo web que hago los pruebo en mi ordenador mediante un virtualhost. De esta forma las normas del mod_rewrite son las mismas en mi ordenador y en el servidor final y además resulta muy sencillo saber desde el código si estamos en un entorno de desarrollo o de producción (basta con mirar la variable “superglobal” $_SERVER[‘HTTP_HOST’]).

Aprovecho y copio un ejemplo de parámetros de configuración de un virtualhost en Apache:

<VirtualHost *:80>
	ServerName proyecto1dev
	ServerAlias proyecto1dev_a proyecto1dev_b proyecto1dev_c
        ServerAdmin koas@localhost

	DocumentRoot /home/koas/Server/htdocs/proyecto1
	
	<Directory /home/koas/Server/htdocs/proyecto1/>
		Options Indexes Includes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		allow from all
	</Directory>

	ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
	<Directory "/usr/lib/cgi-bin">
		AllowOverride None
		Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
		Order allow,deny
		Allow from all
	</Directory>

	ErrorLog ${APACHE_LOG_DIR}/error.log
	LogLevel warn
	CustomLog ${APACHE_LOG_DIR}/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>
</VirtualHost>

Bueno, a lo que vamos. Para acceder a estos virtualhosts simplemente edito el fichero /etc/hosts y añado esta línea:

127.0.0.1 proyecto1dev

De esta forma al escribir http://proyecto1dev en el navegador llegamos al virtualhost deseado.

¿Dónde está el problema aquí? Pues en que algo tan sencillo como añadir una línea al fichero /etc/hosts es complicado de hacer en un móvil o en una tableta. No sé cómo será en otros sistemas operativos, pero en Android requiere hacerle root al teléfono y en iOS hacer jailbreak. Para evitarnos ese engorro usaremos una solución alternativa: instalar en nuestro ordenador (en el que podemos editar el fichero /etc/hosts) un servidor proxy y configurar los dispositivos móviles para que lo utilicen. Estos son los pasos necesarios:

– Instalamos el servidor proxy en nuestro ordenador.

sudo apt-get install tinyproxy

– Editamos el fichero de configuración /etc/tinyproxy.conf y añadir tantas líneas de este tipo como necesitemos para las direcciones IP de nuestros móviles, tabletas, etc:

Allow 192.168.0.2

– Una vez hecho esto nos vamos a la configuración de internet del teléfono o de la tableta y activamos el proxy: como dirección IP pondremos la del ordenador en el que hemos configurado el proxy y como puerto 8888. No es necesaria autentificación.

¡Y listo! Después de estos pasos si en una tableta ponemos http://proyecto1dev (muy importante el http://) accederemos sin problemas a nuestro virtualhost.

Este método no es perfecto, ya que si apagamos el ordenador el proxy deja de funcionar y nos quedaremos sin acceso a internet en la tableta o teléfono. Para recuperarlo tendremos que volver a la configuración de internet del dispositivo y desactivar el proxy.

Por este motivo el proceso se puede hacer un poco engorroso y quizá sea una solución más sencilla hacer rootjailbreak al dispositivo y editar el fichero /etc/hosts.

Cómo limpiar el caché de la imagen de compartir página en Facebook y LinkedIn

Para definir cómo queremos que una página web se comparta en las redes sociales se utilizan las etiquetas META de Open Graph. Así podemos definir la miniatura que queremos que aparezca cuando alguien comparta nuestra página en alguna red social.

Tanto Facebook como LinkedIn guardan en caché una copia de esta miniatura, y hacen muy bien: si una página es muy compartida no tiene sentido que cada vez que alguien la comparta descarguen la miniatura del servidor, usando un caché se ahorran (y nos ahorran) tráfico.

Ahora bien, ¿qué pasa si estamos aún en desarrollo y queremos cambiar esa miniatura? Pues que aunque cambiemos el contenido de la etiqueta META correspondiente tanto Facebook como LinkedIn siguen mostrando al compartir la página la miniatura que tenían en su caché. Y esto es algo que queda fuera de nuestro control. ¿Cómo resolverlo?

Facebook nos ofrece un modo: a través de su depurador de objetos Open Graph. Esta herramienta es una gozada. Primero porque tiene un botón para que Facebook descargue en el momento la información Open Graph de nuestra página (refrescando así su caché de nuestra miniatura). Y segundo porque nos dice un montón de cosas interesantes sobre nuestras etiquetas Open Graph, si las estamos usando correctamente, etc…

Siento si el título del artículo te ha hecho pensar que esto mismo o algo parecido se puede hacer en LinkedIn, porque no se puede. LinkedIn no ofrece ninguna forma de limpiar el caché de la miniatura de nuestra página web.

<ironía>Muy bien, LinkedIn, muchas gracias. Entiendo que es algo dificilísimo de hacer y que desde que la gente empezó a pedirlo en 2011 no habéis tenido tiempo para implementarlo. No os preocupéis, os seguiré incluyendo en mis páginas como red social aunque no me obliguen a ello mis clientes.</ironía>