Hace ya un tiempo que Chrome superó las el número de usuarios de Firefox, y seguro que ya lo habéis visto de varias fuentes..

extremetech.com/computing/116885-the-death-of-firefox genbetadev.com/desarrollo-web/la-muerte-anunciada-de-firefox

firefox-market-share-trend-640x374

Lo que no se menciona, y que se puede observar fácilmente viendo las estadísticas de statscounter, es que Internet Explorer sigue éste mismo camino. Si miramos la gráfica podemos preveer fácilmente que en menos de medio año Chrome superaría Internet Explorer del mismo modo que lo hizo con Firefox.

StatCounter-browser-ww-monthly-201101-201201

Ésto, claro, sin tener en cuenta que pronto sacarán Internet Explorer 10 con su nuevo y flagrante Windows 8, cosa que podría ampliar el tiempo hasta finales de año.

Sea como sea… el caso es que Internet Explorer también tiene los días contados.. y no sabéis qué ganas tengo de que llegue ese día xDD

Puede que os interese hacer capturas de pantalla de páginas web para poder mostrar una previsualización de una web en el apartado de links de vuestro site.

Para ello podéis utilizar alguno de los muchos servicios que corren por ahí —como Websnapr, WebShotsPro, thumbalizr… O bien, si disponéis de un servidor dedicado (véase el que todos tenemos en la cocina o el baño) podéis crear vuestro propio script para tomar capturas de pantalla. Y ésto es a lo que vamos :P

Antes de empezar.. os advierto que he hecho las pruebas desde ubuntu server maverick, pero esto en teoría debería de ser más o menos igual para el resto de versiones (tanto desktop como server).

Si lo que queréis es hacer capturas de pantalla desde Windows, quizás os interese IECapt.

Primero de todo, necesitamos unos cuantos paquetes esenciales…

  • Vnc4server
  • Firefox
  • ImageMagick

Con VNCServer crearemos una instancia virtual en la que ejecutaremos Firefox para, posteriormente, tomar la captura de la pantalla con el método import de imagemagick.

Instalad los paquetes como haríais habitualmente…

1
sudo apt-get install vnc4server firefox imagemagick

Si trabajáis con ubuntu server os va a doler porque firefox baja un huevo de paquetes.. pero es lo que hay U_U

Una vez instalados todos los paquetes, vamos a crear nuestro script para generar screenshots:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/bash

display=':23'
export DISPLAY=':23'

vncserver -geometry 1280x1024 -depth 24 -name 'screenshoots' $display &
# esperamos a que cargue vnc sin problemas...
sleep 5
# cargamos firefox con una página en blanco
firefox -display $display -width 1280 -height 1024 -url 'about:blank' &

while read -a line ; do
  echo 'Carregant... ${line[1]}'
  firefox -remote 'openURL(${line[1]})'
  # o bien... firefox -display $display '${line[1]}'
  sleep 5
  echo 'Desant... ${line[0]}.jpg'
  import -window root '${line[0]}'.jpg
done < listado.txt

vncserver -kill $display

¿Qué hace este script?

  1. Crea una instancia de vncserver a 1280x1024px
  2. Carga firefox en esa instancia a la misma resolución
  3. Carga el fichero "listado.txt" (que ahora veremos) que contiene una línea con una palabra única seguida de un tabulador y una URL.
  4. Abre la página web que pertoque, esperando 5 segundos para dar tiempo a cargar
  5. Toma la captura de pantalla y la guarda con la palabra única y extensión .jpg

El fichero “listado.txt” deberá estar en el mismo directorio que el script y ser en este formato:

1
2
3
4
underave  http://www.underave.net
musicavermella  http://www.musicavermella.com
thefuture http://www.thefutureimperfect.com
snooppets http://www.snooppets.com

Es importante que este fichero tenga un salto de línea al final, sino la última url dará error.

Hecho esto ya debería de funcionar, simplemente ejecutad el script y veréis que en pantalla van saliendo los mensajes “Carregant” (Cargando) y “Desant” (Guardando) a medida que va avanzando en el listado.

Cuando tengáis los screenshots probablemente os daréis cuenta de que la imagen no es sólo de la página web, sino que también sale el navegador.

Para evitar esto he estado probando con parámetro -screen en lugar de -window pero supongo que no hace lo que pensaba que hacía xD. Así que la única solución que se me ocurre es que ejecutéis una instancia de VNCServer con firefox para poder ocultarle todas las barras posibles (la de navegación y la de favoritos).

1
2
3
export DISPLAY=':23'
vncserver -geometry 1280x1024 -depth 24 -name 'screenshoots' :23 &amp;
firefox -display :23 -width 1280 -height 1024 -url 'about:blank' &amp;

Una vez esté corriendo utilizad vuestro cliente de vnc habitual (yo utilizo TightVNC) y conectaros para poder configurar firefox. En el caso de TightVNC, para indicar el display que estamos utilizando simplemente hay que concatenarlo al final de la ip o nombre de host ([IP|HOST]:DISPLAY), por ejemplo 192.168.1.2:23

Si además queréis que no se muestren las pestañas, abrid las opciones de firefox, buscad la opción que dice “Mostrar pestañas siempre” y desmarcadla. Ahora, para que esto funcione, tenemos que decirle a firefox que nos abra las nuevas ventanas en la ventana que esté abierta, ya que si nos abre una pestaña más nos mostrará de nuevo la barra de pestañas.

Si queréis evitar esto, en la barra de navegación (utilizad Control+L si os la habéis cargado ya) introducid la URL about:config, buscad el registro browser.link.open_newwindow y cambiad su valor de 3 a 2.

Cerrad vuestro firefox con normalidad y volved a ejecutar el script para ver el resultado.

Pues ahí lo tenéis, utilizando un poco la imaginación, con algún cron y alguna clase en PHP podríais tener las miniaturas guardadas en vuestra web.

Si queréis recortar las imágenes para que no se vean el resto de bordes de firefox podéis tratar de utilizar el método mogrify de ImageMagick para hacer un crop.

O podéis hacerlo mediante PHP con alguna clase como Watimage :D

Fuentes…

Aunque la cosa parezca estar un poco muerta, seguimos por aquí!

Como todos sabemos el tiempo es oro y el oro escasea últimamente así que por A o por B no hemos podido estar muy por actualizar el blog.

Yo mismo hace ya tiempo que tengo ganas de hacer algunas entradas de CakePHP, que desde las últimas que hice creo que he avanzado notablemente. Entre ellas me gustaría eliminar las que corren por aquí de subidas de ficheros, que me dan auténtico repelús cada vez que las veo.. y hacer una con un sencillo sistema de permisos para CakePHP pero con las ventajas de cualquier sistema de permisos avanzados (grupos de usuarios, permisos y demás).

Pues eso, pasad un buen verano y cuando volváis de vacaciones no olvidéis echar un vistazo al racó! :D

El Audioblog* de underave ha sido, hasta el día de hoy, un punto de encuentro donde algunos Djs y Productores se habrán dejado caer alguna que otra vez, ya fuera para leer novedades sobre música, o para inspirarse con alguna de las entradas reflexivas que contenía.

La inspiración por parte de los redactores colaboradores duró un año y desde entonces no se le ha dado más uso que el de consulta de sus antiguos contenidos.

Desde underave decidimos ya hace tiempo clausurar el blog por tal de poder destinar los recursos que ocupaba para otros fines.

Es por eso que hoy escribo esta entrada, para notificaros que todos los contenidos rescatables de dicho blog han sido traspasados a aquí, al Racó Tècnic, donde podréis consultarlos bajo la categoría “General”.

A continuación os dejo un listado con los artículos rescatados:

  • El enlace está puesto simbólicamente ya que voy a eliminar el blog ahora mismo xD

Actualizado: Tanto la clase como este post han sido actualizados a fecha 14 de enero de 2012.

Hace ya un tiempo publiqué (en inglés) un Componente para el tratamiento de imágenes en CakePHP. Hoy me he pasado un rato actualizándolo y aprovechando he decidido publicar una entrada con los cambios.

Aunque la he modificado considerablemente, he procurado no modificar el funcionamiento de ésta. Aquí vienen los cambios:

  • He eliminado el uso del método obsoleto mime_content_type.
  • Ahora utilizo la clase Exception para tratar los errores.
  • He añadido el método "flip" para hacer espejo de la imagen.
  • He limpiado el código y he arreglado algún que otro fallo.
  • Ahora las transparencias funcionan correctamente.

Podéis descargar el proyecto desde GibHub:

https://github.com/elboletaire/Watimage/archives/master

Si queréis utilizar la clase desde CakePHP simplemente tenéis que descomentar la primera línea de la clase, donde dice //Component extends Object, y utilizarlo como un componente cualquiera.

Aplicando marcas de agua

1
2
3
4
5
6
7
8
9
<?php
$wm = new Watermark();
$wm->setImage('test.png');
$wm->setWatermark(array('file' => 'watermark.png', 'position' => 'top right'));
$wm->applyWatermark();
if (!$wm->generate('test1.png')) {
  // handle error...
  print_r($wm->errors);
}

Redimensionando

1
2
3
4
5
6
$wm = new Watermark('test.png');
$wm->resize(array('type' => 'resizecrop', 'size' => array(400, 200)));
if (!$wm->generate('test2.png')) {
  // handle error...
  print_r($wm->errors);
}

Rotando

1
2
3
4
5
6
$wm = new Watermark('test.png');
$wm->rotate(90);
if (!$wm->generate('test3.png')) {
  // handle error...
  print_r($wm->errors);
}

Guardando en otros formatos

1
2
3
4
5
$wm = new Watermark('test.png');
if (!$wm->generate('test4.jpg')) {
  // handle error...
  print_r($wm->errors);
}

Espejo

1
2
3
4
5
6
$wm = new Watermark('test.png');
$wm->flip('vertical');
if (!$wm->generate('test5.png')) {
  // handle error...
  print_r($wm->errors);
}

Todo junto

1
2
3
4
5
6
7
8
9
$wm = new Watermark('test.png', 'watermark.png');
$wm->resize(array('type' => 'resizecrop', 'size' => 400));
$wm->flip('horizontal');
$wm->rotate(90);
$wm->applyWatermark();
if (!$wm->generate('test6.png')) {
  // handle error...
  print_r($wm->errors);
}

Gracias a los comentarios de Francisco he podido arreglar la clase para que trate correctamente las transparencias.

Si véis cualquier fallo hacédmelo saber o haced un fork en github directamente!