Más ancho para las entradas

Ya tenemos todos los GIF ensanchados, ahora hay que cambiar la plantilla de Blogger para los use.

Como he guardado la plantilla antes y después de editarla, puedo usar diff para ver los cambios:

diff -u lineadecomandos_plantilla-2009-05-16\ 1223.xml lineadecomandos_plantilla-2009-05-16\ 1616.xml

--- lineadecomandos_plantilla-2009-05-16 1223.xml 2009-05-16 12:34:06.015625000 +0200
+++ lineadecomandos_plantilla-2009-05-16 1616.xml 2009-05-16 16:53:48.312500000 +0200
@@ -102,15 +102,15 @@
these measurements, the images will also need to change.
*/
#outer-wrapper {
- width:740px;
+ width:960px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
- width:485px;
+ width:705px;
float:$startSide;
- background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
+ background:$mainBgColor url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_main_bot705.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
@@ -122,13 +122,13 @@
#main-wrap2 {
float:$startSide;
width:100%;
- background:url("http://www1.blogblog.com/rounders3/corners_main_top.gif") no-repeat $startSide top;
+ background:url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_main_top705.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
- background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y $startSide;
+ background:url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/rails_main705.gif") repeat-y $startSide;
padding:0;
- width:485px;
+ width:705px;
}
#sidebar-wrap {
width:240px;
@@ -142,14 +142,14 @@

.main .widget {
margin-top: 4px;
- width: 468px;
+ width: 688px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
- width: 484px;
+ width: 704px;
}

/* Links
@@ -171,7 +171,7 @@
/* Blog Header
----------------------------------------------- */
#header-wrapper {
- background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;
+ background:$titleBgColor url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_cap_top960.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
@@ -183,7 +183,7 @@
color:$titleTextColor;
}
#header {
- background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;
+ background:url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_cap_bot960.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}
#header h1 {
@@ -585,11 +585,11 @@
padding:15px 0 0;
}
#footer-wrap2 {
- background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;
+ background:$titleBgColor url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_cap_top960.gif") no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
- background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;
+ background:url("http://usuarios.arsystel.com/wzrlpy/lineadecomandos/corners_cap_bot960.gif") no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
@@ -614,7 +614,7 @@
}

body#layout #outer-wrapper {
- width: 730px;
+ width: 950px;
}

body#layout #footer-wrap1 {


Cortando y pegando GIFs (III)

Recordemos que queremos pasar el ancho de 960 a 740, así que el aumento de ancho es 960-740=220

Mientras que el GIF de cabecera es 740x8, el de las entradas es 485x15, por lo tanto:

• el tamaño del trozo curvo es 15x15.
• la posición del trozo curvo derecho 485-15=470
• nuevo ancho de entradas 485+220=705
• nueva posición del trozo curvo derecho 485+220-15=590

Con esto generamos los nuevos GIFs de las entradas:
for i in top bot
do
img=corners_main_$i
gifsicle --same-background --crop 0,0+15x15 $img.gif --crop 470,0+15x15 --p 590,0 $img.gif | gifsicle -U "#1" > ${img}705.gif
done

Hay otro GIF para hacer una línea vertical a ambos lados de las entradas, de 485x10.

• el tamaño del trozo significativo es 10x10.
• la posición del trozo significativo derecho 485-10=475
• nuevo ancho de entradas 485+220=705
• nueva posición del trozo curvo derecho 485+220-10=695

Con esto generamos el nuevo GIF:
img=rails_main
gifsicle --same-background --crop 0,0+10x10 $img.gif --crop 475,0+10x10 --p 695,0 $img.gif | gifsicle -U "#1" > ${img}705.gif

Y ya tenemos todos los GIFs. Falta subirlos a algún sitio de la Web. Si tienes ADSL, tu proveedor te suele dar entre 10 y 100 MB de espacio. Para subirlos, se puede usar el cliente ftp que venga con tu sistema operativo, wput, o FileZilla.

svg2swf

svg2swf convierte de SVG (el formato que gasta Inkscape) a SWF (vamos, a Flash).
Así que podemos convertir dibujitos vectoriales bastante bien.

He probado con mi avatar, y no queda tan mal:
svg2swf --cubic 20 --default-font test_sans.fdb avatar.svg avatar.swf

SVG	SWF

Si usáis Internet Explorer, igual no véis el SVG: bajaos en tal caso el visor.

Cortando y pegando GIFs (II)

Vamos a probar con gifsicle.

Cortamos la esquina de la izquierda y la de la derecha (740-8=732):
gifsicle --same-background --crop 0,0+8x8 corners_cap_top.gif > corners_cap_top_left8.gif
gifsicle --same-background --crop 732,0+8x8 corners_cap_top.gif > corners_cap_top_right8.gif

Y luego las ponemos en sus nuevas posiciones (960-8=952):
gifsicle corners_cap_top_left8.gif --p 952,0 corners_cap_top_right8.gif | gifsicle -U "#1" > corners_cap_top960.gif

También podemos hacer todo en una única línea, sin ficheros intermedios:

gifsicle --same-background --crop 0,0+8x8 corners_cap_top.gif --crop 732,0+8x8 --p 952,0 corners_cap_top.gif | gifsicle -U "#1" > corners_cap_top960.gif

Y como tenemos que hacerlo con las esquinas de arriba y las de abajo:
for i in top bot
do
img=corners_cap_$i
gifsicle --same-background --crop 0,0+8x8 $img.gif --crop 732,0+8x8 --p 952,0 $img.gif | gifsicle -U "#1" > ${img}960.gif
done

BusyBox

Una multitud de programas Unix, con mínimo tamaño pero intentando que cumplan POSIX, y en un único ejecutable: eso es BusyBox.

Es interesante porque es muy modular: durante la configuración eliges que programas quieres, con lo que puedes controlar el tamaño final del binario.

Hice una prueba con el fuente de BusyBox 1.13.3, y con unos poquitos cambios, lo compilé dentro de Cygwin; lo configuré para generar sólo awk.

Hoy he encontrado una versión para Windows que tengo que probar.

La idea que llevo en mente es empezar por un binario que tenga hush y awk.

Cortando y pegando GIFs (I)

Resulta que Internet Explorer 6 no entiende los PNG con transparencias, excepto usando trucos realmente inmundos.

Así que tenemos usar GIF, un formato algo anticuado pero que entiende todo el mundo, para por ejemplo las esquinas redondeadas de esta plantilla de Blogger.

Los GIFs se pueden manipular con Irfanview, MS Paint, Paint.NET, GIMP, etc. pero aquí usamos la línea de comando.

Podemos usar ImageMagick, como explican aquí.

Pero aquí buscamos la utilidad de menor tamaño que permita realizar la tarea. Veamos giflib.

La tarea es ensanchar el GIF de cabecera, de 740x8 a 960x8.

Separamos la esquina redondeada izquierda, y la derecha:

gifclip -i 0 0 7 7 corners_cap_top.gif | gifpos -s 960 8 > corners_cap_top_left8.gif
gifclip -i 732 0 739 7 corners_cap_top.gif | gifpos -s 960 8 -i 952 0 > corners_cap_top_right8.gif


Cogemos un trocito de en medio, y lo ensanchamos hasta 960 -8 -8= 944:

gifclip -i 8 0 125 7 corners_cap_top.gif | gifrsize -x 8 | gifpos -s 960 8 -i 8 0 > corners_cap_mid944.gif


Y juntamos todo:

gifasm corners_cap_top_left8.gif corners_cap_mid944.gif corners_cap_top_right8.gif > multi.gif

GIF-LIB error: Wrong record type detected.


Vaya, hombre, giflib no entiende los GIFs que genera ella misma.
Habrá que usar otra cosa.