Cosas de programación para recordar y de todo un poco
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.
He subido a Github un plugin de jQuery que permite introducir en las cajas de texto de los formularios textos en varios idiomas.
El plugin se llama i18nInput y su página es http://koas.github.io/i18nInput/
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;
}
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.
En ocasiones querremos poder acceder a un servidor por SSH sin tener que meter la clave, bien porque sea un servidor al que accedemos frecuentemente y nos aburre meter la clave cada vez (porque la hemos hecho larga y complicada, claro) o porque queremos automatizar operaciones de copia de ficheros desde un script o algo parecido.
Hay que recordar que esto solamente debemos hacerlo en nuestro propio ordenador.
El proceso es el siguiente, llamamos a nuestro ordenador A y al servidor al que queremos entrar sin la clave B. Supondremos que nuestro usuario es koas en nuestro ordenador A y queremos entrar en el servidor B como root.
En nuestro ordenador escribimos:
ssh-keygen -t rsa
Cuando nos pida la passphrase la dejamos vacía.
Entramos en el servidor B por SSH, aún tendremos que poner la clave. Nos vamos a la carpeta del usuario con el que queremos entrar (en este caso /root) y creamos (si no existiera ya) la carpeta .ssh:
mkdir .ssh
Salimos de B y desde A escribimos:
cat .ssh/id_rsa.pub | ssh root@B 'cat >> .ssh/authorized_keys'
Nos volverá a pedir la clave de root en B, y con esto el proceso habrá terminado.
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.
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.
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 root o jailbreak al dispositivo y editar el fichero /etc/hosts.
Con la extensión Deluminate para Google Chrome podemos poner el navegador en “modo noche” para que las páginas aparezcan con los colores invertidos: las páginas con fondo blanco y texto negro pasarán a tener fondo negro y texto blanco, mucho menos agresivo para los ojos.
Se hace un poco raro al principio, pero se acostumbra uno rápido y realmente se cansa mucho menos la vista.
En Windows y Mac resulta muy sencillo utilizar un iPad o cualquier tableta Android como monitor adicional: basta con instalar el programa Air Display. Es una forma genial de aprovechar la tableta y permite seguir usándola muchos tiempo después de que se haya quedado obsoleta.
Por desgracia esta aplicación no funciona con Linux, pero podemos conseguir casi lo mismo de otra manera: utilizando VNC. Para ello seguiremos estos pasos:
– Instalamos los paquetes necesarios
sudo apt-get install vnc4server xvnc4viewer x2x
– A continuación arrancamos el servidor VNC, indicando que la pantalla que genere debe ser de 1024×768 píxeles (la resolución de la tableta que tengamos).
vncserver -geometry 1024x768 -alwaysshared :1
Para detenerlo el comando sería este:
vncserver -kill :1
– Acto seguido editamos el fichero xstartup que está en la carpeta .vnc de nuestro usuario. Aquí podremos especificar qué programas se iniciarán al crear el servidor VNC. Un ejemplo puede ser este:
#!/bin/sh export XKL_XMODMAP_DISABLE=1 unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS xsetroot -solid grey gnome-panel & gnome-settings-daemon & metacity &
– Una vez hecho esto, y tras haber instalado en la tableta un programa visor de VNC, nos conectamos a la IP local de nuestro ordenador especificando como puerto el 5901 (ya que al crear el servidor VNC le hemos pasado como identificador :1).
Y…¡ya está! Ya tenemos en la tableta una sesión gráfica en nuestro ordenador, en la que podremos abrir programas y hacer lo que queramos.
Bueno, no está del todo. La única forma de controlar esa sesión es tocando la tableta, y lo más cómodo sería poder usar el teclado y el ratón del ordenador. Para eso simplemente ejecutamos este comando:
x2x -east -to :1
El parámetro -east indica que el cursor pasará a la sesión VNC cuando nos salgamos de nuestra pantalla por la derecha (útil si colocamos la tableta a la derecha de nuestro monitor). Si queremos colocarla a la izquierda usaremos el parámetro -west.
Con este sistema podemos abrir tantas sesiones como queramos. Como prueba aquí podéis ver mi ordenador con el monitor principal, el monitor secundario (arriba a la izquierda), un iPad (abajo a la izquierda) y una tableta Samsung (abajo en el centro).
Hay dos cosas a tener en cuenta:
– No podremos enviar ventanas de nuestro monitor principal a la tableta. Este es el mayor inconveniente, y aunque creo que hay forma de hacerlo utilizando un programa llamado xpra y he estado investigando un rato no he encontrado cómo hacerlo funcionar. Personalmente no me preocupa mucho, mi idea es usar la tableta para hacer debug con Maurina o para tener abiertas ventanas con phpmyadmin o similares, por lo que no necesito andar moviendo ventanas de un monitor a otro.
– Hay un bug que hace que al pulsar las teclas s y d en la sesión de VNC se abra el menú de aplicaciones o se muestre el escritorio. Para corregir esto basta con ejecutar el programa dconf-editor, abrir la clave org\gnome\desktop\wm\keybindings y hacer estos cambios:
Si la siguiente vez que accedamos a la sesión de VNC no se han conservado estos cambios, editamos el fichero .gconf/apps/metacity/global_keybindings/%gconf.xml y le ponemos este contenido:
<?xml version="1.0"?> <gconf> <entry name="show-desktop" mtime="1422027140" type="string"> <stringvalue></stringvalue> </entry> <entry name="panel-main-menu" mtime="1422027140" type="string"> <stringvalue></stringvalue> </entry> </gconf>
Actualización para Linux Mint 17 con Cinnamon: para conseguir el entorno en Linux Mint 17 con Cinnamon este es el fichero xstartup que uso:
#!/bin/sh # Uncomment the following two lines for normal desktop: unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS sh /etc/X11/xinit/xinitrc xrdb $HOME/.Xresources export XKL_XMODMAP_DISABLE=1 exec startxfce
Otra cosa interesante es que si intentamos ejecutar Google Chrome en la pantalla del iPad la ventana se abre en la ventana principal. Para eso la solución es crear un fichero de arranque con permisos ejecutables (por ejemplo /usr/bin/xchrome) con este contenido:
#!/bin/sh exec /opt/google/chrome/chrome --disable-webgl --enable-greasemonkey --enable-user-scripts --enable-extensions --user-data-dir=~/.config/google-chrome/1 "$@"
Si ejecutamos este comando en la pantalla del iPad Chrome se nos abre allí, aunque tarda bastante en arrancar.