Mostrar entradas recientes

Encontré un JavaScript que muestra las entradas más recientes de una categoría:


<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://lineadecomandos.blogspot.com/feeds/posts/summary/-/awk?max-results=999&amp;alt=json-in-script&amp;callback=recentpostslist">
</script>


Este código se puede usar dentro de una entrada (decid al editor que muestre HTML literalmente). Por ejemplo, aquí listo mis entradas sobre awk:




También se puede poner en un gadget HTML/Javascript.

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.

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

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.

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 &gt;,
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<