Edición de iconos

Probablemente, la imagen más visualizada de un sitio web no es otra que el icono que la representa, el famoso "favicon".

Y no sé si alguna vez os habréis visto en la tesitura de crear un icono. Curiosamente, el formato .ico no suele estar soportado por muchos de los programas de edición gráfica más habituales.

De la mano de Microsoft, ya que hacen un uso algo más extensivo de los iconos en la última versión de su navegador Internet Explorer, llegamos a X-Icon Editor. Se trata de una herramienta web, creada en HTML5 (basada en el elemento canvas), que nos permite generar iconos, bien desde cero, bien a partir de una imagen que podemos cargar. Los iconos creados pueden ser de hasta 64x64 píxeles.

jWYSIWYG - Editor HTML en Javascript

De toda la vida, no sé si por costumbre o por qué razón, hemos usado TinyMCE como editor HTML en Javascript para todos los campos de formulario en los que es necesario insertar código HTML.

El caso es que últimamente se nos hace pesado y complicado de mantener. Necesitamos algo más ligero y flexible. Seguro que es por torpeza nuestra.

Investigando en StackOverflow (una de nuestras páginas de cabecera), llegamos a jWYSIWYG.

Las premisas de la búsqueda fueron que el editor fuera fácilmente configurable y basado en jQuery. De esa forma, con la experiencia que estamos cogiendo últimamente con este framework, nos sería más fácil su integración y manejo.

Una de las cosas que pretendíamos conseguir, y que hemos conseguido con jWYSIWYG, era cargar sólo una instancia del editor en el momento en que hacemos clic en un textarea, y descargarlo cuando terminamos la edición. También queríamos tener un editor sencillito con los 3 ó 4 botones básicos (negrita, cursiva, etc.). Todo eso seguro que se puede hacer con TinyMCE, y con las decenas de soluciones semejantes que hay, tanto libres como de pago. Pero con jWYSIWYG lo hemos logrado en apenas un rato de investigación y cacharreo.

JSFiddle - Desarrollo sobre la marcha

A la hora de desarrollar, muchas veces tenemos la necesidad de probar cosas sobre la marcha, especialmente cuando hacemos desarrollos cliente (HTML, CSS, Javascript) sobre temas que no dominamos. En esos casos, tener un mecanismo de pruebas ágil nos puede ahorrar mucho tiempo.

Pero siempre tendremos que editar, publicar, y abrir en el navegador. También tendremos que bajar e instalar recursos externos (CSS, JS) cuando queramos probarlos, aun cuando no nos vayamos a quedar con ellos al final.

JSFiddle es una herramienta de prototipado que permite probar código HTML, CSS y JS en la misma ventana del navegador, sin necesidad de todo lo anterior.

Tenemos tres ventanas en las que podremos editar HTML, CSS y JS. Podremos cargar recursos externos, así como algunos de los frameworks JS más usados (Mootools, jQuery, Prototype...). Además, aporta extras como validar nuestro JS o limpiar el código que hayamos introducido.

Por último, si nos registramos, podremos almacenar nuestros "fiddles" para usarlos en otro momento.

Vídeos para Flash e iPhone

Andaba buscando la forma de que los vídeos de 20minutos.tv se puedan reproducir también en el iPhone, aunque sea a pantalla completa, y he encontrado esta página: http://code.google.com/p/swfobject/wiki/iphone_mp4. Ahí exponen una forma de codificar el tag de vídeo que funciona en todos los navegadores y también en el teléfono, sin llegar a usar los tags de HTML5 (ya que usamos un player Flash personalizado para servir el vídeo en streaming pudiendo ver capturas al hacer seeking y también para poder servir publicidad).

El código, adaptado a nuestras necesidades, sería algo así:


<object id="videoContent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="544" height="330">
<param name="movie" value="http://estaticos.20minutos.es/player/player.swf" />
<param name="flashvars" value="status=200&dynconf=http://www.20minutos.tv/videoconfig/4340dsm330XX/d/&still=http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://estaticos.20minutos.es/player/player.swf" width="544" height="330">
<param name="flashvars" value="status=200&dynconf=http://www.20minutos.tv/videoconfig/4340dsm330XX/d/&still=http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<object type="video/mp4" data="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" width="544" height="330">
<param name="controller" value="false" />
<param name="src" value="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" />
<param name="href" value="http://download.cdn.com/4340dsm330XX.mp4" />
<param name="target" value="myself" />
<!--<![endif]-->
<img src="http://estaticos.20minutos.es/20minutostv/img/abcd7.jpg" alt="" />
<!--[if !IE]>-->
</object>
</object>
<!--<![endif]-->
</object>


El object de tipo video/mp4 es el que hace el "milagro" de que el vídeo se pueda ver en el iPhone. Eso y que está codificado con un codec que es compatible con el terminal.

Procesando ficheros

Ayer me surgió la necesidad de procesar un montón de ficheros, distribuidos por diferentes directorios. En concreto, tenía que generar un fichero JPEG a partir de un PDF.

Dividimos la tarea en dos partes: por un lado, extraer la lista de ficheros que queremos procesar. Por el otro, el comando que los procesa en sí.

El resultado sería algo como esto:


find . -type f -name "*.pdf" | while read i ; do convert -geometry 100x135 -quality 80 $i `dirname $i`/`basename $i .pdf`.jpg; done


La lista de ficheros la generamos a partir de un find: find . -type f -name "*.pdf" (suponiendo que estemos ubicados en el directorio a partir del que vamos a buscar los ficheros para procesar.

El bucle de procesado sería: while read i ; do COMANDO_PROCESADO; done.

En nuestro caso, el comando de procesado es la herramienta convert: convert -geometry 100x135 -quality 80 $i `dirname $i`/`basename $i .pdf`.jpg. Lo que hace es generar una miniatura en JPEG de 100x135px y 80 de calidad alojada en el mismo directorio que el PDF original.

Ahora imaginemos que lo que necesitamos es modificar la ruta, no el nombre del fichero. Lo podemos lograr usando sed:


find . -type f -name "*.jpeg" | while read i ; do echo convert -geometry 74x74 -quality 80 $i `echo $i | sed 's/RUTA1/RUTA2/g'`; done


En el ejemplo, sustituimos RUTA1 por RUTA2 en el nombre del fichero destino.