Cosas de programación para recordar y de todo un poco
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.
He actualizado el ordenador a Linux Mint 17.1 Rebecca, y estoy en el proceso de reinstalar todos los programas que tenía.
Uno de ellos es Kupfer, un programa para invocar programas. Pulsando Super + Space (o la combinación de teclas que queramos) aparece el interfaz, escribimos la primera o dos primeras letras del programa que queremos abrir, pulsamos enter y a correr.
El problema es que al empezar a usarlo me he dado cuenta de que tenía pulsar dos veces espacio para que saliera, así que rebuscando he encontrado este hilo donde explican cómo solucionarlo. El problema es que la tecla Super está asociada a abrir el menú de aplicaciones y por eso interfiere.
Para arreglarlo vamos a System settings -> Keyboard -> Keyboard layouts -> Options y en Alt / Win key behaviour seleccionamos Hyper is mapped to Win-keys.
He encontrado una aplicación para Android que es una maravilla: Llama.
Es un gestor de perfiles de localización que te permite definir acciones a realizar en el teléfono según diferentes criterios (ubicación, hora, etc). Llevo poco cacharreando con él pero ya me he creado un perfil de sonido bajo y Wifi activado para cuando estoy en casa, sonido apagado entre las 24:00 y las 07:30 (también cuando esté en casa) y desactivar el Wifi al salir de casa (lo que supone un interesante ahorro de batería).
En definitiva, muy recomendable para quien tenga un móvil Android.
Bonus: el clásico vídeo que muchos recordaréis de Barrio Sésamo con la llama.
Por cierto, cuando lo vi en su momento (igual tenía yo cuatro o cinco años) no me di cuenta, pero este vídeo está lleno de contradicciones y es claramente inadecuado para ser visto por niños pequeños:
– La repelente niña Margarita dice claramente antes de empezar a cantar que la llama se llama Marichari, pero en la canción repite una y otra vez que su llama se llama “llama”.
– Margarita es una psicópata a la que no se le ocurre una fecha mejor para llevar a Marichari al dentista que en su cumpleaños. Es lo que todos los niños y las llamas quieren en su cumpleaños, que te hurguen en los dientes.
– En el video no intentan siquiera disimular el horrible chirrido de los instrumentos que usan para la limpieza de boca de Marichari. Grima 100% garantizada.
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>
He encontrado en YouTube un video con seis horas de música de Vivaldi que está genial para escuchar mientras trabajas. El único problema es que ocupa una pestaña del navegador si lo escuchamos desde YouTube; lo ideal sería tenerlo como MP3 en el disco duro.
La extensión de Google Chrome que uso habitualmente para descargar vídeos (FVD Downloader) no funciona con YouTube. Entonces me acordé de que había visto una entrada en javierin.com que trataba precisamente sobre esto y explicaba cómo hacerlo usando un programa llamado clive, pero a mí no me funcionó.
Rebuscando un poco más encontré uno llamado youtube-dl; este tiene la ventaja de que según Google va poniendo trabas para descargar los vídeos de YouTube ellos van actualizando el programa. Con este fue muy sencillo:
koas@koas-desktop:~$ ./youtube-dl "http://www.youtube.com/watch?v=E2uOGOqIyC4" [youtube] Setting language [youtube] Confirming age [youtube] E2uOGOqIyC4: Downloading webpage [youtube] E2uOGOqIyC4: Downloading video info webpage [youtube] E2uOGOqIyC4: Extracting video information [youtube] E2uOGOqIyC4: Encrypted signatures detected. [youtube] E2uOGOqIyC4: Downloading js player vflx8EenD [youtube] E2uOGOqIyC4: Downloading js player vflx8EenD [download] Destination: Antonio Vivaldi - I Solisti Veneti-E2uOGOqIyC4.mp4 [download] 100% of 641.05MiB in 00:52
Una vez con el fichero .mp4 descargado simplemente hay que extraer el audio. Para ello primero nos aseguramos de tener las librerías y programas necesarios:
sudo apt-get install ffmpeg libavcodec-extra-53 libav-tools
Y hacemos la conversión:
avconv -i "Antonio Vivaldi - I Solisti Veneti-E2uOGOqIyC4.mp4" Vivaldi_6_horas.mp3
La conversión tarda un rato (al fin y al cabo son seis horas de música) pero finalmente obtenemos un MP3 de 528 MB.
Todo este proceso es bastante interesante para aplicaciones web: nos permite descargar vídeos y hacer cosas con ellos como extraer fotogramas para vistas previas y cosas parecidas.
He instalado Lubuntu en un portátil Acer Aspire E15 (E5-521-29Q4) y de primeras el sonido no funcionaba. Rebuscando un poco por Internet he visto un mensaje en el que recomendaban instalar PulseAudio:
sudo apt-get install pulseaudio pavucontrol
Una vez hecho esto, y tras reiniciar, el sonido funcionaba correctamente pero no las teclas de función para subir y bajar el volumen. Para que funcionen hay que editar el fichero ~/.config/openbox/lubuntu-rc.xml y dejar estos tres nodos así:
<keybind key="XF86AudioRaiseVolume">
<action name="Execute">
<command>amixer -q -D pulse sset Master 3%+ unmute</command>
</action>
</keybind>
<keybind key="XF86AudioLowerVolume">
<action name="Execute">
<command>amixer -q -D pulse sset Master 3%- unmute</command>
</action>
</keybind>
<keybind key="XF86AudioMute">
<action name="Execute">
<command>amixer -q -D pulse sset Master toggle</command>
</action>
</keybind>
Después de hacer esto ejecutamos el comando
openbox --reconfigure
y ya funcionarán las teclas de volumen.
Ya hablé la última vez sobre Amazon S3 y sobre lo útil que es para descargar tráfico de un servidor. Además de imágenes y vídeos también podemos subir a S3 ficheros de fuentes si nuestra página los utiliza.
Sin embargo Firefox no permite cargar fuentes de un dominio que no sea el de la página, así que nos devolverá un error en la consola como este:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ******. This can be fixed by moving the resource to the same domain or enabling CORS
Para solucionar esto debemos entrar en S3, seleccionar nuestro bucket y pulsar en Permissions – Edit CORS configuration. Allí podremos editar la configuración en XML; yo lo tengo así:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
En el campo AllowedOrigin tengo un asterisco porque quiero que se puedan leer desde varios dominios distintos, pero si se quisiera restringir solamente a un dominio en lugar del asterisco pondríamos el dominio. Podemos tener tantos nodos CORSRule como necesitemos.