Web Developer

Para ver la estructura de las páginas Web, resulta muy práctico navegar con Firefox y tener instalado Web Developer.
Por cierto, tiene una versión traducida.

Para entender las CSS que gasta Blogger en particular, conviene activar el menú Information-> Display class & ID details y también Outline -> Outline block level elements, e imprimir el blog.
Con esta especia de mapa, es más fácil seguir el código de las CSS.

Barra lateral con tres cajitas

Hoy he creado esta bitácora, con la plantilla inicial "Rounders 3", y la he modificado un poquito para que en la barra lateral tenga tres cajitas en vez de dos.
¿Y qué he modificado?

Es muy importante salvar la plantilla antes y después de cada cambio, así tenemos la posibilidad de ver las modificaciones con el comando 'diff':


$ diff -u lineadecomandos_plantilla-2009-04-27\ 2230.xml lineadecomandos_plantilla-2009-04-27\ 2334.xml


La pena es que incrustar etiquetas XML dentro del editor de Blogger produce basura.
Así que hay protegerlas para que no las interprete.
Una manera es hacer una sustitución global de todos los > por >,
y de todos los < por &lt;.


$ diff -u lineadecomandos_plantilla-2009-04-27\ 2230.xml lineadecomandos_plantilla-2009-04-27\ 2334.xml


--- lineadecomandos_plantilla-2009-04-27 2230.xml 2009-04-27 22:34:02.538687800 +0200
+++ lineadecomandos_plantilla-2009-04-27 2334.xml 2009-04-27 23:34:32.163687800 +0200
@@ -13,6 +13,7 @@
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
+Updated by Víctor Paesa, April 2009
----------------------------------------------- */

/* Variable definitions
@@ -27,20 +28,16 @@
type="color" default="#586" value="#558866"<
>Variable name="borderColor" description="Post Border Color" type="color"
default="#bbb" value="#bbbbbb"<
-
-
>Variable name="mainLinkColor" description="Link Color" type="color"
default="#456" value="#445566"<
>Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#234" value="#223344"<
-
>Variable name="titleBgColor" description="Page Header Background Color"
type="color" default="#357" value="#335577"<
>Variable name="titleTextColor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff"<
-
- >Variable name="topSidebarHeaderColor"
- description="Top Sidebar Title Color"
+ >Variable name="sidebarHeaderColor"
+ description="Sidebar Title Color"
type="color" default="#fff" value="#ffffff"<
>Variable name="topSidebarBgColor"
description="Top Sidebar Background Color"
@@ -52,13 +49,21 @@
>Variable name="topSidebarVisitedLinkColor"
description="Top Sidebar Visited Link Color"
type="color" default="#fff" value="#ffffff"<
- >Variable name="bottomSidebarHeaderColor"
- description="Bottom Sidebar Title Color"
- type="color" default="#abc" value="#aabbcc"<
-
+ >Variable name="middleSidebarBgColor"
+ description="Middle Sidebar Background Color"
+ type="color" default="#586" value="#6f6f5f"<
+ >Variable name="middleSidebarLinkColor"
+ description="Middle Sidebar Link Color"
+ type="color" default="#99ddbb" value="#ffffff"<
+ >Variable name="middleSidebarVisitedLinkColor"
+ description="Middle Sidebar Visited Link Color"
+ type="color" default="#ffffff" value="#ffffff"<
+ >Variable name="bottomSidebarBgColor"
+ description="Bottom Sidebar Background Color"
+ type="color" default="#586" value="#aaccc0"<
>Variable name="bottomSidebarLinkColor"
description="Bottom Sidebar Link Color"
- type="color" default="#99ddbb" value="#99ddbb"<
+ type="color" default="#99ddbb" value="#ffffff"<
>Variable name="bottomSidebarVisitedLinkColor"
description="Bottom Sidebar Visited Link Color"
type="color" default="#ffffff" value="#ffffff"<
@@ -475,8 +480,8 @@

#sidebartop h2 {
line-height:1.5em;
- color:$topSidebarHeaderColor;
- border-bottom: 1px dotted $topSidebarHeaderColor;
+ color:$sidebarHeaderColor;
+ border-bottom: 1px dotted $sidebarHeaderColor;
font: $headerFont;
margin-bottom: 0.5em;
}
@@ -512,18 +517,6 @@
margin-top: 0.5em;
}

-#sidebarbottom-wrap1 {
- background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
- margin:0 0 15px;
- padding:10px 0 0;
- color: $titleTextColor;
-}
-
-#sidebarbottom-wrap2 {
- background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
- padding:0 0 8px;
-}
-
.sidebar h2 {
margin-top:0;
margin-$endSide:0;
@@ -556,10 +549,34 @@
}

#sidebar h2 {
- color: $bottomSidebarHeaderColor;
- border-bottom: 1px dotted $bottomSidebarHeaderColor;
+ color: $sidebarHeaderColor;
+ border-bottom: 1px dotted $sidebarHeaderColor;
}

+#sidebarmiddle-wrap1 {
+ background:$middleSidebarBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
+ margin:0 0 15px;
+ padding:10px 0 0;
+ color: $titleTextColor;
+}
+
+#sidebarmiddle-wrap2 {
+ background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
+ padding:0 0 8px;
+}
+
+#sidebarbottom-wrap1 {
+ background:$bottomSidebarBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;
+ margin:0 0 15px;
+ padding:10px 0 0;
+ color: $titleTextColor;
+}
+
+#sidebarbottom-wrap2 {
+ background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;
+ padding:0 0 8px;
+}
+
/* Footer
----------------------------------------------- */
#footer-wrap1 {
@@ -1105,8 +1122,55 @@
>/b:section<
>/div<>/div<

+ >div id='sidebarmiddle-wrap1'<>div id='sidebarmiddle-wrap2'<
+ >b:section class='sidebar' id='sidebarmiddle' preferred='yes'<
+>b:widget id='Label1' locked='false' title='Etiquetas' type='Label'<
+>b:includable id='main'<
+ >b:if cond='data:title'<
+ >h2<>data:title/<>/h2<
+ >/b:if<
+ >div class='widget-content'<
+ >ul<
+ >b:loop values='data:labels' var='label'<
+ >li<
+ >b:if cond='data:blog.url == data:label.url'<
+ >span expr:dir='data:blog.languageDirection'<
+ >data:label.name/<
+ >/span<
+ >b:else/<
+ >a expr:dir='data:blog.languageDirection' expr:href='data:label.url'<
+ >data:label.name/<
+ >/a<
+ >/b:if<
+ >span dir='ltr'<(>data:label.count/<)>/span<
+ >/li<
+ >/b:loop<
+ >/ul<
+
+ >b:include name='quickedit'/<
+ >/div<
+>/b:includable<
+>/b:widget<
+>/b:section<
+ >/div<>/div<
+
>div id='sidebarbottom-wrap1'<>div id='sidebarbottom-wrap2'<
- >b:section class='sidebar' id='sidebar' preferred='yes'/<
+ >b:section class='sidebar' id='sidebarbot' preferred='yes'<
+>b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'<
+>b:includable id='main'<
+
+>b:if cond='data:title'<>h2<>data:title/<>/h2<>/b:if<
+ >div class='widget-content'<
+ >ul<
+ >b:loop values='data:links' var='link'<
+ >li<>a expr:href='data:link.target'<>data:link.name/<>/a<>/li<
+ >/b:loop<
+ >/ul<
+ >b:include name='quickedit'/<
+ >/div<
+>/b:includable<
+>/b:widget<
+>/b:section<
>/div<>/div<

>/div<


GIFs animados comprimidos

Un poco de Google y encuentro esta utilidad para manipular GIFs.
Trivial de compilar en Cygwin:
./configure --disable-gifview
make
strip src/*.exe
make install


Sólo depende de la biblioteca estándar de C, así que también es trivial compilarlo para Windows:

make distclean
CC=gcc-3 CFLAGS=-mno-cygwin ./configure --disable-gifview
make
strip src/*.exe
make install


Y el comando mejorado para crear GIFs animados se queda en:

ffmpeg -i avión.wmv -r 10 -vframes 50 -f gif -pix_fmt rgb24 -s 80x60 - |gifsicle -O2 > avión.gif

GIFs animados

Hay montones de herramientas para generar GIFs animados.
Y FFmpeg también puede crearlos.

No es el mejor en cuanto a la calidad resultante (no busca la paleta de colores óptima), ni cuanto a espacio (los GIF que produce no están comprimidos), pero sí es el que más formatos de entrada admite.

La situación puede mejorar pronto, porque en marzo se apuntó un voluntario para crear GIFs comprimidos.

Y ahora, un ejemplo de cómo convertir a GIF animado:

ffmpeg -i avión.wmv -r 10 -vframes 50 -f gif -pix_fmt rgb24 -s 80x60 avión.gif

KDE sobre Windows

¡Quién lo podía pensar, si hay KDE para Windows!

El instalador es muy similiar al de Cygwin.
Tiene su entorno de desarrollo basado en MinGW (dice que también puede ser MSVC).
De momento me he bajado las dependencias (iconv, expat, libpng, libjpeg) de libGD y xgawk, para ver si compilo una versión para MinGW y lo cuelgo junto a los binarios que ya tengo para Cygwin, aquí.

Con algo más de tiempo, igual se puede compilar Kdenlive, el editor de video.

SWFTools

Hoy freshmeat anuncia versiones nuevas en un par de cosillas de mi interés: SWFTools y Mathomatic.

Con SWFTools se pueden hacer animaciones Flash realmente curiosas.

Gráficos desde awk

Por mi edad y mi ser austero, soy un fanático de awk.
Maravilloso para procesar ficheritos de texto, descubrí que había una variante que procesaba XML, bautizada con el no muy original y sí muy descriptivo nombre de XMLgawk

La variante tenía un interesante interfaz para añadir extensiones al lenguaje, así que contribuí con una extensión para usar las funciones gráficas de libGD.

Aquí tenéis una austera página con los binarios para Cygwin, y unas someras explicaciones de cómo compilarlos desde los fuentes.

Polinomios

Pues sí, uno de los paquetes de Cygwin es una calculadora algebraica, que permite hacer derivadas, integrales, límites, resolver sus raíces, todo sobre polinomios.

¡Ah si lo hubiera tenido en los tiempos que estudiaba! :-)

Traducción de WinFF

Hace algún tiempo hice la traducción a mi lengua nativa de WinFF.

Si no lo conocéis, os lo recomiendo, creo que es el mejor de los programas que le ponen un interfaz gráfico a FFmpeg.

Matt ha sacado la versión 1.0beta, así que le he actualizado la traducción.