Adios 2010

Y no, nada nada nos impide soñar ...

Deliremos, pues, por un ratito. El mundo, que está patas arriba, se pondrá sobre sus pies ...

Todos los penitentes serán celebrantes, y no habrá noche que no sea vivida como si fuera la última, ni día que no sea vivido como si fuera el primero.

Eduardo Galeano - Fragmento de El derecho de soñar

Esta es una de las tantas formas de crear botones sin imágenes, utilizando sombras, gradientes y otras características del CSS3 que, con ciertas limitaciones, funcionarán en cualquier navegador.

<style>
  ul.demobotones a {
    color: #FFF;
    float: left;
    font-size: 26px;
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 120px;
    -moz-border-radius: 9px; /* Firefox */
    -webkit-border-radius: 9px;
    border-radius: 9px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */
    background: #65A5ED;
    background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */
    background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */
    box-shadow: 0 0 4px #000; /* W3C */
  }
  ul.demobotones a:hover{
    border-color: #000062;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */
    background: #DCDCDC;
    background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */
    background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */
  }
  ul.demobotones a:active{
    -moz-box-shadow: 0 0 2px #000; /* Firefox */
    -webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */
    box-shadow: 0 0 2px #000; /* W3C */
  }
</style>

<ul class="demobotones">
  <li><a href="#">Blogger</a></li>
  <li><a href="#">RSS</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

• Blogger
• RSS
• Contacto

REFERENCIAS:Martin Ivanov

No. Esto no es para usar, sólo para divertirse un rato y asombrarse con la imginación ajena.

REFERENCIAS:dhteumeuleu.com

Algunos ejemplos del uso de la propiedad text-shadow, ideales para hacer títulos raritos aunque es algo que no fucionará en Internet Explorer.

retro

<style>
  #vintage {
    background-color: #EEE;
    color: #707070;
    font-family: Times New Roman;
    font-size: 160px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
  }
</style>

<h1 id="vintage">retro</h1>

Neon

<style>
  #neon {
    background-color: #000;
    color: #FFF;
    font-family: Garamond;
    font-size: 160px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #DD00DE;
  }
</style>

<h1 id="neon">neon</h1>

Inset

<style>
  #inset {
    background-color: #474747;
    color: #222;
    font-family: Helvetica;
    font-size: 200px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 2px 3px #666;
  }
</style>

<h1 id="neon">Inset</h1>

Arial

<style>
  #anaglyphic {
    background-color: #FFF;
    color: rgba(0,168,255,0.5);
    font-family: Arial;
    font-size: 200px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
  }
</style>

<h1 id="anaglyphic">Arial</h1>

Fire

<style>
  #fire {
    background: #000;
    color: #FFF;
    font-family: Courier;
    font-size: 200px;
    margin: 200px auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E;
  }
</style>

<h1 id="fire">Fire</h1>

Game

<style>
  #boardgame {
    background-color: #EEE;
    color: #FFF;
    font-family: Arial;
    font-size: 170px;
    margin: 200px auto;
    padding: 10px 0 50px 35px;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 10px 10px 0 #FFD217, 20px 20px 0 #5AC7FF, 30px 30px 0 #FFD217, 40px 40px 0 #5AC7FF;
  }
</style>

<h1 id="boardgame">Game</h1>

REFERENCIAS:line25.com

En un comentario reciente, Ariane hablaba sobre la forma de utilizar Json para generar una plantilla novedosa donde se mostrarán las entradas resumidas de ciertas categorías (ver demo) y se basaba en un código publicado por simplexdesign pero, el problema que se le presentaba era que ese código no funcionaba en Internet Explorer.

El error, en realidad, no tiene sentido explicarlo y las soluciones para evitarlo deben ser varias pero, como no soy versado en esto del JavaScript, se me ocurre que lo más simple es lo más seguro aunque no sea demasiado profesional así que, cumplo con Ariane y trataré de explicar la idea general que podría aplicarse en cualquier modelo de diseño ya que esto es posible agregarlo en la plantilla, en un widget de tipo HTML, en una página estática o incluso en un post.

Primero el script que podemos poner antes de </head>:

<script language="JavaScript">
//<![CDATA[
imgr = new Array();
var contarlabels = 0;

// esto es lo que deberíamos configurar
imgr[0] = "URL_imagenxdefecto"; // establecer la imagen por defectoq euse va a utilizar
showRandomImg = true; // poner false si no se quiere que la imagen sea aleatoria
summaryPost = 60; // cantidad de caracteres del resumen
summaryTitle = 25; // cantidad de caracteres del título
numposts = 5; // cantidad de entradas a ser mostradas

// la lista de etiquetas que queremos mostrar; acá hay dos pero puede haber mas
// siempre entre comillas y separadas por una coma
labelname = new Array("iconos","Twitter"); // los nombres de las etiquetas a mostrar
labeltitle = new Array("iconos","Twitter"); // los títulos a mostrar

// esta es la función general que elimina las etiquetas HTML
function removeHtmlTagEtiquetas(strx,chop){
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }    
  }
  s =  s.join("");
  s = s.substring(0,chop-1);
  return s;
}

// esta es la función que analiza las entradas y las muestra
function showrecentpostsetiquetas(json) {

  var salida = "";
  var salidainner= "";
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;

   // el titulo de la entrada
    var posttitle = entry.title.$t;

    // buscamos al url del post
    var posturl;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == "alternate") {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contenido del post
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else
      if ("summary" in entry) { var postcontent = entry.summary.$t; }
    else var postcontent = "";

    // aquí se busca entre las imágenes y se selecciona una
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    // terminada la lectura de cada post, se crea el HTML del contenido
    var trtd = "";
    trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
    trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagEtiquetas(posttitle,summaryTitle) + '</a><br/>';
    trtd += removeHtmlTagEtiquetas(postcontent,summaryPost);
    trtd += ' ...<div class="botline"></div>';

   // y continuamos con el siguiente
    salidainner += trtd;
    j++;
  }

  // una vez que se lee la cantidad de posts indicada en numposts, se crea el HTML del DIV y se muestra
  salida += '<div class="featured">';
  salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
  salida += salidainner;
  salida += '<a class="morelabels" href="http://vagabundia.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">ver otras entradas de  '+ labelname[contarlabels] +'</a>';
  salida += '</div>';
  document.write(salida);
  contarlabels ++;

}
//]]>
</script>

El script ese ha sido modificado un poco del original pero el concepto general es el mismo que con todos los scripts que utilizan Json; leemos, guardamos los datos que vamos a usar y leugo, creamos el HTML que es lo que se mostrará; en este caso, elimino etiquetas como <b></b> y le pongo clases a los diferentes sectores ya que de ese modo es mucho más fácil controlar el diseño mediante CSS que es lo que haremos a continuación de lo anterior:

<style>
  .featured { /* es el rectángulo contendor de cada etiqueta */
    float: left;
    font-size: 11px;
    height: 390px;
    margin: 0 10px;
    overflow: hidden;
    padding: 10px;
    width: 270px;
  }
  .featured h3 { /* el título general */
    background-color: #555;
    border-bottom: 1px solid #888;
    color: #BBB;
    margin: 0 0 10px;
    padding: 5px 0;
    text-align: center;
  }
  .featured img { /* las miniaturas */
    background-color: #555;
    float: left;
    height: 50px;
    margin: 0 8px 0 0;
    padding: 2px;
    width: 50px;
  }
  .featured .botline { /* la línea divisoria */
    border-bottom: 1px dotted #555;
    clear: both;
    margin-bottom: 5px;
    padding: 0 0 5px;
  }
  .featured a.tlabel { /* el título de cada post */
    font-size: 11px;
    display: block;
    float: left;
    max-width: 205px;
    overflow: hidden;
    white-space: pre;
  }
  .featured a.morelabels { /* el enlace final a las etiquetas */
    background-color: transparent;
    color: #AAA;
    display: block;
    padding: 4px 0;
     text-align: center;
  }
  .featured a.morelabels:hover {background-color: #555;}
</style>

Hecho todo eso no pasará nada; nos falta llamar a laa función tantas veces como etiquetas querramos ver y eso, lo hacemos con otro script tal como lo hacemos en todos los ejemplos anteriores y colocamos esos scripts exactamente allí donde quisiéramos que se mostraran; por ejemplo:

<div id="miejemplo">
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/UNA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/OTRA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <!-- y seguimos agregando todos los que se nos ocurra mostrar -->
</div>
<div style="clear:both;"></div>

Allí, solo debemos poner la URL de nuestro sitio e ir cambiando el nombre de la etiqueta que siempre, debe ser escrita con exactitud ya que es sensible a mayúsculas y minúsculas.

FEIGN es un juego raro, perturbador, aparentemente muy simple donde todo lo que debemos hacer es buscar 9 "personas" que están allí, en alguna parte pero las perspectivas son engañosas, se hace muy pero muy difícil orientarse en esos laberintos y es normal que, luego de entusiasmarnos con nuestro avance, nos encontremos otra vez en el punto de partida, confundidos y desorientados.

Vale la pena mirarlo.

REFERENCIAS:arturogoga.com

Christmas 2.0

The digital story of nativity.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/vZrf0PbAGSk'><param name='movie' value='http://www.youtube.com/v/vZrf0PbAGSk' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

feliz navidad

Optimizar ¿Quién no quiere optimizar las cosas? Es obvio que siempre es mejor que algo funcione de manera óptima a que funcione de manera mediocre pero en la web, solemos leer demasiados consejos y más allá de las buenas intenciones de quienes los proponen, no todos son aplicables e incluso, algunos son discutibles. Por suerte, como en todo, siempre hay más de una opinión y más de una solución y cuando hablamos de herramientas, no hay ninguna que sea perfecta ni sirva para todo así que usar el sentido común es siempre la mejor opción aunque ya se sabe que ese es el menos común de los sentidos.

Son muchas los sitios que nos hablan de comprimir el CSS e incluso, hay sitios como CleanCSS que ofrecen hacerlo pero esas cosas automáticas hay que utilizarlas con cuidado; con mucho cuidado.

Un artículo de Impressive Webs titula algo así como "Démosle algo de espacio al CSS para que respire" y hace un análisis de estas cosas, mostrando alternativas y opinando qué es lo bueno y qué es lo malo. Es obvio que esas conclusiones son subjetivas (como todas) pero podemos leerlas, pensar y luego decidir.

Hay algo que me parece básico, desde el punto de vista del tiempo de carga, salvo excepciones, comprimir el CSS no es relevante y para quienes recién comienzan puede transformar el código en una maraña inmanejable que asusta e impide avanzar; el resultado, no será otra cosa que un montón de caracteres difíciles de digerir y difíciles de editar:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', Helvetica, Arial, sans-serif;margin:10px 0}

Cada cuál deberá escoger la forma que le resulte más cómoda para escribir y organizar las cosas. Habrá quien use espacios, quien agregue tabulaciones, quien ordene las propiedades por tipo o alfabéticamente. Todo es aceptable y no hay que limitarse porque la clave es que encontremos lo que buscamos, que podamos editarlo y que funcione.

La estética del código no es relevante en absoluto, lo que interesa es que sea claro para nosotros mismos y evitemos los errores más comunes.

TODAS las propiedades terminan con un punto y coma; es cierto que no es necesario agregar ese caracter en la última propiedad de una regla pero, mejor lo ponemos en todas para acostumbrarnos y evitar problemas.

a { /* esto es un error */
  color: #AAA
  outline: none
  text-decoration:underline
}

a { /* esto está bien aunque la utima no tenga punto y coma */
  color: #AAA;
  outline: none;
  text-decoration: underline
}

a { /* esto está bien */
  color: #AAA;
  outline: none;
  text-decoration: underline;
}

Cuando una propiedad está formada por varias palabras, debe haber un carácter espacio entre ellos pero, no es necesario un espacio entre el caracter dos puntos y la primera palabra:

div { /* esto es un error porque entre el cierre del paréntesis y la palabra no-repeat falta un espacio */
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien aunque no haya espacio entre los dos puntos y el color */
  background:#AAA url() no-repeat left top;
}

div { /* esto está bien */
  background: #AAA url() no-repeat left top;
}

Dentro de una etiqueta <style> JAMÁS se agregan otras etiquetas, sólo se agregan reglas de estilo con sus propiedades. Lo mismo ocurre con la etiqueta <b:skin> de Blogger. El JAMÁS también incluye los comentarios:

div { /* esto es un error  */
  <!-- comentario comentario comentario >
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien */
  /* comentario comentario comentario */
  background:#AAA url() no-repeat left top;
}

En estos dias, el CSS es fundamental, mucho más cuando se trata de páginas dinámicas como un blog ya que es lo que nos permite simplificar la forma en que escribimos entradas. Los editores, nos dan herramientas para eso y esas herramientas son útiles pero a la vez son engañosas así que hay que utilizarlas con prudencia. Es cierto que podemos formatear nuestros textos con un simple click y listo; ponemos el color de los párrafos, el tipo de fuente; todo genial pero ... ¿y si mañana cambiamos de idea?

Son muchos los que cambian las plantillas con frecuencia; es parte de la diversión, parte del juego y, cuando lo hacen, suelen encontarrse con un problema: las entradas se ven mal; ese color no es el color que uno quiere, esa fuente no es la que uno usaría en este nuevo diseño y tal vez preguntan ¿cómo hago? Pués, lamentantablemente, si los estilos han sido agregados en las entradas no queda otro remedio que editarlas una por una.

Es que, el CSS es justamente para evitar eso y lo estamos utilizando mal; lo que debemos hacer, siempre que sea posible, es establecer reglas generales; el color, las fuentes, todo eso que vamos a utilizar habitualmente y colocar esas reglas y propiedades por defecto junto con las otras. Si no queremos que los enlaces se subrayen establecemos la regla para todo el sitio y eventualmente, cuando queremos que alguno de ellos se subraye, lo indicamos expresamente; ese tipo de detalles hará que no debamos estar repitiendo estilos en cada etiqueta.

Agregar estilos inline, es decir, con un atributo style dentro de la etiqueta, debe ser siempre el último recurso, nunca el primero.

En YouTube hay una sección llamada Creator's Corner donde se ofrecen recursos de diferente tipo; uno de ellos es una sección donde se encuentran los logos, banners y botones oficiales.

Ingresando con nuestra cuenta, basta seleccionar alguno de los modelos, copiar el código que dan y pegarlo donde se nos ocurra.

También es posible colocar un widget copiando y pegando el siguiente código donde sólo debemos cambiar el nombre de usuario por el de nuestro canal:

<iframe src="http://www.youtube.com/subscribe_widget?p=nombre_usuario?" style="overflow: hidden; height: 97px; width: 300px; border: 0;" scrolling="no" frameBorder="0" marginwidth="0" marginheight="0" allowtransparency="true" align="middle"></iframe>

Hay varias entradas bastante viejas (el reloj de la web es particularmente cruel y todo es viejo en cinco minutos) donde se explican diferentes métodos para mostrar entradas relacionadas en Blogger [1] [2] [3]

Muchos otros emplean LinkWithin que es un sistema externo que permite agregar un gadget para diferentes plataformas y es un método muy usado porque se ha puesto de moda y también porque muestra un imagen junto con el título y el enlace: Ver detalles en El escaparate de Rosa [1] [2]

Como no me gustan las modas ni los servicios externos, vamos a ver una forma de transformar el método original que mostraba una lista con los títulos y los enlaces de las entradas relacionadas para que sea similar al otro y se le añadan las miniaturas de las entradas.

Para eso, basta seguir con la idea de lo explicado en las entradas que hablaban de JSON y de la forma en que podemos acceder a los diferentes datos de los feeds de nuestro blog. Uno de ellos es justamente ese, la miniatura (si es que existe una imagen en el post) así que bastaría modificar aquellos scripts originales para leer más datos y luego, cambiar la forma en que son mostradas.

Repaso el tema de los posts relacionados.

Tiene tres partes; la primera es el script en si mismo y que agregamos a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>

Allì sólo es necesario establecer los datos personales:

var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 100; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

Las otras dos partes requieren desplegar los artilugios de la plantilla. Buscamos el código donde se muestran las etiquetas en el footer de cada entrada y allí agregamos lo indicado en color:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
</b:loop>

Eso, condicionará el llamado a JSON para que sólo funcione en las entradas individuales y leerá los feeds de las etiquetas de nuestro blog.

callback=leerpostetiquetas es la función de JavaScript que se ejecutará e interpretará esos datos
max-results=50 es la cantidad de datos a leer y puede ser cualquier número pero, siempre debe tenerse en cuenta que si el número es muy alto, el proceso será más largo y por lo tanto, la carga del blog será más lenta

El tercer paso es decidir donde vamos a mostrarlo. Normalmente, debajo de las entradas así que deberemos buscarlo y eso no es fácil de explicar porque depende de cada plantilla pero, por ejemplo, podemos intentar encontrar alguno de los DIVs donde se muestran el autor, la fecha, los botones para compartir, etc que suelen estar en algo así:

<div class='post-footer-line post-footer-line-X'>
  .......
</div>

Agregamos entonces otro DIV que también condicionamos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Eso es todo, faltará claro, el CSS que es personal y agregamos junto con el resto, entre <b:skin> y </b:skin> o bien, tambien lo podemos condicionar y poner antes de </head>. Ver/Ocultar [+]

Lo elemental, sería algo así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.relsposts {
  float: left;
  margin: 0 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  /* el tamaño dependerá de como diseñemos el contenido */
  width: 130px;
  height: 180px;
}
.relsposts:hover { /* si queremos algún efecto */ }
.relsposts a {
  /* las propiedades de los textos, color, fuente, etc */
  color: #EEE;
  display: inline;
  font-size: 11px;
  line-height: 1;
}
.relsposts img {
  /* las propiedades de las miniaturas */
  height: 72px;
  padding: 5px;
  width: 72px;
}
.relsposts h6 {
  /* las propiedades del título */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}
.relsposts p {
  /* las propiedades de los resúmenes */
  color: #AAA;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0;
  text-align: left;
}
</style>
</b:if>

Para quien quiera personalizar un poco las cosas, veamos si es posible explicar el funcionamiento de los scripts y las posibles variantes. Ver/Ocultar [+]

// empieza definiendo una serie de datos
var reltitulos = new Array();
var relurls = new Array();
var relresumen = new Array();
var relimagen = new Array();
var reltituloscantidad = 0;

// establecemos la cantidad de entradas relacioandas a ser mostradas
var relmaxamostrar = 4;

// establecemos la longitud de los resúmenes
var relmaxlen = 100;

// establecemos la imagen por defecto a utilizar
var relimagenpodefecto = "URL_imagen";

// esta es la función que lee los feeds y guarda esos datos que luego analizaremos y mostraremos
function leerpostetiquetas(json) {
  var entry, postimg, postcontent, cat;
   for (var i = 0; i < json.feed.entry.length; i++) {

      // los datos de cada entrada se guardan en la variable entry
      entry = json.feed.entry[i];

      // como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos
      if (i==json.feed.entry.length) { break; }

      // el título de la entrada lo leemos leyendo entry.title.$t
      reltitulos[reltituloscantidad] = entry.title.$t; // lo guardamos
      
      // buscamos el contenido de la entrada que puede estar completa o no
      postcontent = "";
      if ("content" in entry) {
        postcontent = entry.content.$t; // el contenido HTML de la entrada con un feed completo
      } else if ("summary" in entry) {
        postcontent = entry.summary.$t; // el contenido HTML de la entrada con feed corto
      }
      // usamos una función para eliminar el código HTML y crear un resumen con una cantidad de caracteres
      relresumen[reltituloscantidad] = eliminattags(postcontent,relmaxlen);

      // buscamos la miniatura de la imagen de la entrada
      if ("media$thumbnail" in entry) {
        postimg = entry.media$thumbnail.url; // si hay una imagen la guardamos
      } else {
        // si no hay una imagen, usaremos una imagen por defecto
        postimg = relimagenpodefecto;
        // podríamos establecer diferentes imágenes por defecto para cada etiqueta
      }
      relimagen[reltituloscantidad] = postimg;

      // buscamos la dirección URL de la entrada ya que hay varias
      // una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc
      for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
            relurls[reltituloscantidad] = entry.link[k].href; // esta es la url así que la guardamos
            break;
         }
      }

      reltituloscantidad++; // vamos contando cuantas entradas se encontraron
   }
}

// esta es la función que mostrará las entradas relacionadas
function mostrarrelacionados() {
  // la primera parte es similar a la usada hasta ahora y sólo agregamos los nuevos datos, el resumen y la imagen

  // como una entrada puede tener varias etiquetas, eliminamos los duplicados
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurls.length; i++) {
    if(!contains(tmp, relurls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumen[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i];
    }
  }
  reltitulos = tmp2; relurls = tmp; relresumen = tmp3; relimagen = tmp4;

  // los mezclamos para que no se muestre siempre los mismos
  for(var i = 0; i < reltitulos.length; i++){
    var indice = Math.floor((reltitulos.length - 1) * Math.random());
    var tempTitle = reltitulos[i]; var tempUrls = relurls[i];
    var tempResumen = relresumen[i]; var tempImagen = relimagen[i];
    reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice];
    relresumen[i] = relresumen[indice]; relimagen[i] = relimagen[indice];
    reltitulos[indice] = tempTitle; relurls[indice] = tempUrls;
    relresumen[indice] = tempResumen; relimagen[indice] = tempImagen;
  }

  // y ahora vamos a mostrarlos
  var cuantosPosts = 0;
  var r = Math.floor((reltitulos.length - 1) * Math.random()); // elegimos un post al azar
  var rini = r; // este es el primer post relacionado a mostrar
  var salida;
  var dirURL = document.URL;

  // hacemos un bucle hasta que encontramos la cantidad definida en relmaxamostrar
  // y vamos armando el código HTML
  while (cuantosPosts < relmaxamostrar) {
    if (relurls[r] != dirURL) {
      // si el post no es el que estamos viendo, lo mostramos
      salida = "<div class='relsposts'>";
      salida += "<a href='" + relurls[r] + "' rel='nofollow'  target='_blank' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>";
      salida += "<h6><a href='" + relurls[r] + "' target='_blank'>" + reltitulos[r] + "</a></h6>";
      salida += "<p>" + relresumen[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      // y vamos contando hasta llegar al total
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrar) { break; }
    }
    if (r < reltitulos.length - 1) {
      // habiamos empezado desde cualquier parte de la lista y este es el siguiente post
      r++;
    } else {
      // si es el último, empezamos desde el primero de la lista
      r = 0;
    }
    // si ya dimos toda la vuelta en al lista y no encontramos la cantidad, significa que no hay suficientes entradas y terminamos
    if(r==rini) { break; }
  }
}

Como se indica, podríamos establecer diferentes imágenes por defecto para cada etiqueta; para eso, deberíamos saber qué etiqueta tiene esa entrada y eso lo hacemos usando:

cat = entry.category[0].term;

así que podemos ampliar las cosas así:

postimg = relimagenpodefecto; // siempre definimos una por las dudas
if(cat=="MIETIQUETA"){postimg = "URL_etiqueta1"}
if(cat=="OTRAETIQUETA"){postimg = "URL_etiqueta2"}
// agregamos todas las que se nos ocurra

¿Será esto mas fácil que agregar un gadget pre-diseñado? No, claro que no pero, algunos nos resistimos a eso de hacer click-click-click y preferimos el estilo "fatto in casa" porque el exceso de clicks genera callos en el dedo índice y también en las neuronas.

Nuevamente excitados (sigo insisitiendo en que esta gente tiene las hormonas alteradas o les falta comprarse un buen diccionario de sinónimos) Blogger Draft anuncia que si ingresamos a nuestro blog desde allí, veremos que aparece un mensaje preguntándonos si queremos activar las nuevas plantillas para móviles.

Si decimos que sí, nos abrirá la página de Configuración | Correo electrónico y móvi desde donde podremos activar o desactivar esta función en cualquier momento:

Mostrar plantilla para móviles
Sí, en los dispositivos móviles, mostrar la versión para móviles de la plantilla.
No, en los dispositivos móviles, mostrar la versión web de la plantilla.

También tenemos la posibilidad de previsualizar esto y navegar en esa pequeña nueva ventana que se abre con un dirección que es nuestra URL a la que se le agrega un parámetro extra; por ejemplo: http://vagabundia.blogspot.com/?m=1

El sistema agregará código a nuestra plantillas, específicamente en el widget llamado Blog:

<b:includable id='mobile-nextprev'>
  .......
</b:includable>
<b:includable id='mobile-index-post' var='post'>
  .......
</b:includable>

Esto me confunde un poco ya que si vemos una Plantilla Mínima tradicional, allí nos encontraremos con esos dos includables pero, además, una serie de nuevos códigos, generalmente condicionados y no sé si deberían ser agregados manualmente o no.

De todos modos, lo que nos dice Blogger es que al aplicar este cambio habrá una redireccióna automática de nuestro sitio cuando alguien acceda desde un móvil aunque esto ... sólo ocurrirá si los móviles utilizan navegadores basados en WebKit (es decir Chrome y Safari); el resto, por ahora no es soportado así que habrá que esperar que los incorporen o no.

Otra limitación es el tema diseño ya que por el momento sólo se admiten seis de las variantes de las nuevas plantillas y cualquier otro tipo se mostrará de manera simple e incluso en todos esos casos algunos gadgets no funcionarán y otros sólo lo harán si es que están en algunos de estos widgets: Header, Blog, Profile, AdSense y Attribution.

¿Esto será mejor o peor que otros sistemas? Ni idea. Aún sigo aferrado a mis palomas mensajeras así que lo he habilitado acá para que cada cual decida. De todos modos, si partimos de la excitación inicial y vamos leyendo las limitaciones y peros ... por ahora, no parece ser la gran cosa.

No sé, por lo menos en este blog, los ingresos a través de móviles son menos que ínfimas (no llegan al 0,05%) pero, me imagino que eso dependerá del tipo de contenido ofrecido por cada sitio así que, como tantas otras cosas, no hay reglas únicas y aplicables a todos y lo que para unos es maravilloso, para otros es absolutamente intrascendente.

Keriyo Emoticons by deleket
	Contiene 36 íconos de 300x300, en formato PNG. descargar

Es hora de preguntar otra vez: ¿Realizas respaldos de tu blog?

No es una pregunta retórica. Recientemente, un blog como el de Pepiche que tiene tantos años en la web como este, desapareció en el agujero negro de Blogger y si bien tuvo suerte en ser restaurado en un par de dias, a otros, las cosas se les está complicando y mucho.

En DicasBlogger vienen siguiendo este problema desde hace varios dias y ya ha sido reconocido por Blogger mismo; al parecer el problema se ha solucionado pero ... mejor pongamos las barbas en remojo, toquemos madera, encomendémonos a todos los santos y hagamos un backup YA porque más vale prevenir que curar.

Hacer un backup es muy sencillo. Basta ir a Configuración y allí, en al primera pantalla, veremos las dos opciones que nos interesa: Exportar e Importar. Hacemos click en Exportar y esperamos que se descargue el archivo XML. Este proceso puede durar más o menos tiempo dependiendo de la cantidad de entradas y comentarios que tengamos. Puede ser un segundo o varios minutos. El archivo resultante tendrá un nombre genérico y la fecha; por ejemplo: blog-12-15-2010.xml

Para importar, hacemos el proceso inverso y el tiempo también dependerá del volumen pero tengan en cuenta que es bastante superior al tiempo de bajada.

¿Qué se importa?

Las entradas (que se pueden publicar inmediatamente), los comentarios ... y nada más. La configuración no cambiará y tampoco la plantilla así que habrá que agregarla manualmente.

Si el blog ya existe, al importarlo le sumamos entradas y comentarios; si creamos un blog nuevo, allí podemos desplegar las Opciones avanzadas e importarlo directamente.

¿Y la plantilla?

Pués, en el archivo XML que descargamos está pero nos costará mucho rehacerla ya que se cambian los caracteres < y > por sus equivalentes &lt; y &gt; por lo tanto, convendrá que la descarguemos por separado desde Diseño | Edición de HTML, haciendo click en el enlace Descargar plantilla completa pero ... ese archivo, no incluirá los contenidos de los widgets agregados.

Moraleja; para tener un backup de Blogger 100% efectivo habrá que ... esperar que ellos se decidan a ofrecernos un método adecuado pero, pese a todas las limitaciones, no hacerlo de manera regular es jugar con fuego.

Suponiendo que hemos entendido cómo funciona JSON, vamos a ver si podemos usarlo para mostrar cosas y se me ocurre que como ejemplo, bien podríamos intentar crear un script para mostrar las últimas entradas y, como esto es poco original, vamos a ver cómo es posible leer la imagen que Blogger utiliza como thumbnail y que es la misma que se muestra cuando usamos el gadget Lista de blogs.

Para esto, necesitamos tres pasos, primero, leer los datos, luego mostrarlos, por último, diseñar al forma en que queremos verlos.

El primer paso es el que está explicado de manera elemental en la entrada anterior, necesitamos cargar los feeds y ejecutar una función. La única diferencia notable con ese modelo es que en el bucle, verificaremos si hay una imagen con algo así:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}

Como el contenido de nuestras entradas es HTML, también, agregaremos una función extra para eliminar las etiquetas y dejar sólo el texto.

Coloco entonces las funciones antes de </head>.

<script type='text/javascript'>
//<![CDATA[

// esta función devolverá el texto de la entrada, eliminando las etiquetas
// la llamamos indicando la cantidad de caracteres a mostrar para crear una especie de resumen
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

function mostrarentradasconthumb(json) {

  // defino la cantidad de entradas que mostraremos
  var numposts = 4;
  // defino la imagen por defecto que voy a utilizar
   var imagenpodefecto = "URL_imagen";
  // defino la longitud de los resúmenes
   var lenresumen = 100;

  var entry, posttitle, posturl, postimg, postcontent, salida;

  // el bucle que leerá las entradas
  for (var i = 0; i < numposts; i++) {
    // leo y guardo el dato
    entry = json.feed.entry[i];

    // este es el título de la entrada
    posttitle = entry.title.$t;

    // busco la dirección URL de la entrada
    if (i == json.feed.entry.length) { break; }
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // esta es la dirección de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }

    // busco el contenido de la entrada
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    // este es el contenido resumido
    postcontent = eliminattags(postcontent,lenresumen);

    // busco la imagen de la entrada
    if ("media$thumbnail" in entry) {
      // hay una imagen
      postimg = entry.media$thumbnail.url;
    } else {
      // no hay imágenes asi que uso la que tengo definida
      postimg = imagenpodefecto;
    }

    /*
       ya tengo los datos, podría agregar otros pero, para mi, estos son suficientes:
       posttitle es el título
       posturl es la dirección
       postimg es la imagen
      postcontent es el resumen
    */

    // ACÁ TENDRÉ QUE MOSTRARLOS
    // EL CODIGO DE SALIDA

  }
}
//]]>
</script>

Para mostrar esos datos, tengo que pensar el diseño. Lo más sencillo es colocarlos en un DIV con una clase especial y así, separar el CSS del script. Entonces, podría, por ejemplo, hacer que se mostraran de este modo:

<div class='miresumen1'>
  <a href='URL_entrada' target='_blank'><img src='URL_imagen' /></a>
  <h6><a href='URL_entrada' target='_blank'> título e la entrada </a></h6>
  <p> el resumen de la entrada ... </p>
</div>

Así que, haré que el script escriba eso, usando las variables. Lo que debería poner en EL CODIGO DE SALIDA es esto:

salida = "<div class='miresumen1'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "<p>" + postcontent + " ... </p>";
salida += "</div>";
document.write(salida);

Ahora, llamaré a la función, agregándola en algún post, debajo de estos, en una página estática o donde quiera mostrarlo:

<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>

Con un poco de CSS que ponemos antes de </b:skin>, lo armamos estéticamente.

.miresumen1 {
  border-bottom: 1px solid #555;
  float: left;
  height: 190px;
  margin: 0 5px;
  padding: 5px;
  width: 135px;
}
.miresumen1:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miresumen1 a {
  color: #FC0;
  display: block;
  font-size: 12px;
  text-align: center;
}
.miresumen1 img {
  height: 72px;
  width: 72px;
}
.miresumen1 h6 {
  border-bottom: 1px dotted #888;
  height: 30px;
  margin: 5px 0 0;
  padding-bottom: 2px;
}
.miresumen1 p {
  color: #CCC;
  font-size: 11px;
  line-height: 1.3em;
  margin: 5px 0 0;
}

Modificando la salida, cambiamos la forma de mostrar los datos. Otro ejemplo donde no mostramos el contenido de las entradas:

salida = "<div class='miresumen2'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen2 img {
  border: 5px solid transparent;
  padding: 3px;
  height: 72px;
  width: 72px;
}
.miresumen2 img:hover {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
border:5px solid #555;
}
.miresumen2 a {
  color: #FFCC00;
  display: block;
  font-size: 12px;
  font-weight: normal;
  text-align:center;
}
.miresumen2 a:hover {
  font-weight: bold;
}
.miresumen2 h6 {
  height: 30px;
  margin: 5px 0 0;
}

Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:

salida = "<div class='miresumen3'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen3 {
  border: 1px solid #555;
  float: left;
  height: 35px;
  margin: 1px;
  padding: 5px;
  width: 190px;
}
.miresumen3 a {
  color: #DDD;
  display: block;
  font-size: 11px;
  font-weight:normal;
}
.miresumen3 img {
  float: left;
  height: 36px;
  width: 36px;
}
.miresumen3 h6 {
  float: right;
  height: 45px;
  margin: 0;
  width: 145px;
}
.miresumen3:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
  border: 1px solid #33F;
}

Quien use las librerías de Google para cargar scripts y esté preocupado por las actualizadicones puede visitar scriptsrc.net y copiar el código necesario para utilizar la última versión disponible o bien, cambiar el directorio que la contiene:

Por ejemplo, esto cargaría prototype.js en su versión 1.6.1.0:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' />

y esto, JQuery en su versión 1.4.3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript' />

en todos los casos, un directorio indica la versión /1.6.1.0/ y /1.4.3/ respectivamente pero ya son versiones "viejas", las nuevas deberían decir /1.7.0.0/ y /1.4.4/ así que habría que editar el código y escribir el nuevo número pero, también podemos hacer otra cosa que es un truco interesante que explica CSS-Tricks en una entrada reciente: en lugar de colocar el número exacto de la versión, podemos usar un número genérico; por ejemplo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js' type='text/javascript' />

haría que se cargara siempre la última versión que comience con esos número; hoy, sería la la 1.4.4 y si aparece la 1.4.5 se cargará esa y así sucesivamente hasta que aparezca la 1.5 en cuyo caso, se cargará la última de la serie 1.4.x.

Aún más; si pusiéramos sólo esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript' />

se cargararía la última versión 1.x.x sin importar cuál sea esta y recién debríamos modificar el código manualmente cuando apareciece una versión 2.x.x.

Esto es lo mismo para todos los scripts de Google, cualquiera de estos códigos cargará la última versión de scriptaculous disponible (la 1.8.3):

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript' />

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js' type='text/javascript' />

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js type='text/javascript' />

El primer ejemplo cargará la versión exacta, el segundo cualquier actualización hasta que aparezca una 1.9.x y el último, la versión más actual de la serie 1.x.x.

El truco que muestra Martin Ivanov es muy simple y nos ayuda a crear una caja de diálogo en forma de burbuja utilizando sólo CSS. La idea funcionará incluso en Internet Explorer 8 aunque, claro, en ese caso, sin los bordes redondeados.

Suspendisse hendrerit tempus tellus sed bibendum. Aenean sed diam ipsum, et hendrerit massa.

Por ejemplo, creamos un DIV al que le ponemos la clase speech-bubble y cuyo contenido, será un texto cualquiera:

<div class="speech-bubble"> ... el texto a mostrar ... </div>

Y claro, lo fundamental es el CSS:

.speech-bubble {
  background: #6495ED; /* el color de fondo */
  color: #FFF; /* el color del texto */
  font-family: Arial, Sans-serif;
  font-size: 12px;
  padding: 20px 10px 10px 10px;
  text-align: center;
  width: 200px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.speech-bubble:after {
  border: solid 10px transparent;
  border-top-color: #6495ED;  /* igual al color de fondo */
  border-bottom: 0;
  bottom: -20px;  /* igual al borde + el padding-bottom de la definición anterior */
  content: "";
  display: block;
  height: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 0;
}

En Blogger Buzz anuncian que a partir de ahora, podremos controlar un poco más la forma en que se muestran los feeds de nuestro blog.

Si entramos en Configuración | Feed del sitio veremos que al desplegar la lista, han agregado una opción más llamada Hasta el salto de línea:

Feed de entradas del blog Ninguno Corto Hasta el salto de línea Completo

Hasta ahora, los feeds podían ser enviados como Cortos (se generaba un resumen de no más de 400 caracteres de largo) o Completos. Esta nueva alternativa nos permite determinar la longitud, es decir, hasta dónde se podrán ver desde un lector externo y para indicar esto, se utiliza el MORE.

Quiere decir que, si marcamos la opción y en una entrada usamos el MORE para que nuestras entradas no se vean completas en la página de inicio, el feed seguirá el mismo criterio y tampoco se mostrará completo sino que se cortará en ese lugar y se agregará un enlace de "Leer más" que permitirá acceder a la página individual.

¿Esto es mejor o peor? No hay una sola respuesta, ahí ya entran a jugar las subjetividades.

Hay quienes creen que los feeds son una competencia para el mismo blog, que si alguien "lee pero no entra", se perjudica el sitio; de alguna manera, miran las estadísticas de "visitas" y se olvidan de una estadística que no existe: "los lectores" ya que esos últimos son los que en realidad hacen un blog y los primeros, sólo son un número que, tal vez es muy alto pero que en realidad poco significa si es que un blog es ese espacio en la web donde pretendemos compartir o simplemente expresarnos.

Algo diferente puede ocurrir con sitios comerciales si es que pudiera existir tal cosa como un blog comercial, algo que dudo ya que, salvo casos excepcionales, no creo que sea un formato adecuado para ese tipo de proyectos. En lo personal, tampoco creo que los feeds cortos sean muy efectivos ni siquiera en esos casos.

Si leo algo que me interesa, entrararé al sitio para observarlo in-situ, para chusmear, para participar, para ver si hay alguna otra cosa que pueda interesarme. A mi entender, los feeds generan visitas y no lo contrario; pretender que alguien "ingrese" mostrándole sólo un pedacito no parece ser una buena estrategia, "el dinero no puede comprar amor" y los no-feeds no pueden comprar lectores. Siempre es mejor que las personas elijan y cuantas más opciones haya, mejor será para todos.

Glyphish Icons

Contiene 200 íconos de diferentes tamaños, en formato PNG. descargar

Mono Gradient Icons Set

Contiene 180 íconos de de diferentes tamaños, en formato PNG. descargar

Estos no son íconos sino algo más infantil una serie de emoticones creados por Jak Jay y que podemos descargar desde su página alojada en deviantart.

Si eso no es suficiente, tambien pueden jugar un poco con el Giant Emoticon Creator y generar sus propios emoticones haciendo click en el botón play y luego, seleccionado las diferentes opciones que no son muchas claro pero tiene la ventaja de permitirnos descargar el SWF así que podemos usarlo offline.

CSS3 Starbursts es un experimento que no funcionará en Internet Explorer, que en Firefox 3 se mostrará parcialmente y que en Chrome y Safari se ve espectacular asíq ue habra que seguir esperando que las nuevas versiones de los navegadores nos permitan jugar con las animaciones ... falta poco, paciencia.

NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!

NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!NEW CSS3
Starbursts!

NEW CSS3
Starbursts!

Las reglas de estilo son complejas para estar escribiendo acá pero, todas ellas se encuentran en el demo que puede descargarse desde la página del autor.

Un simple ejemplo del último de ellos; el CSS dice esto:

.starburst7 {
color: #FFF;
display: block;
font-family: Arial, sans-serif;
font-weight: bold;
height: 3em;
text-align: center;
text-decoration: none;
width: 8em;
}
.starburst7 span {
background:#00CD00;
display: block;
height: 2.5em;
width: 8em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
rotation: -45deg;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
text-shadow: 1px 1px 1px #000;
}
.starburst7:hover {
background: transparent;
}
.starburst7:hover span {
-webkit-transform: rotate(52.5deg);
-moz-transform: rotate(52.5deg);
rotation: 52.5deg;
-webkit-transform: translate(1em, 0);
-moz-transform: translate(1em, 0);
translate(1em, 0);
}

Y el HTML esto otro:

<a href="#" class="starburst7">
<span><span><span><span><span>
<span><span><span><span><span>
<span>  <span><span><span><span>
<span>NEW CSS3<br />Starbursts!</span>
</span></span></span></span></span>
</span></span></span></span></span>
</span></span></span></span></span>
</a>

¿Loco? Muchísimo.

Hay decenas de trucos que agregamos y que nos dicen cosas como "acá debemos poner la dirección de los feeds". Lo hacemos porque es sencillo, funcionarán o no funcionarán pero ¿qué demonios es un feed? ¿Magia negra? Nada de eso, en realidad, no es otra cosa que un archivo común y corriente.

Los feeds son archivos creados por el servidor (Blogger en nuestro caso) y si los miramos, veremos que contiene una serie de etiquetas con información de lo que se ha publicado en nuestro sitio; como muchas otras cosas en la web, hay muchos formatos de feeds y la diferencia entre ellos poco nos interesa, será RSS (Rich Site Summary) o Atom o XML, da igual y serán los lectores de feeds los que se encarguen de interpretarlos.

Como decía, muchos scripts que utilizamos en Blogger hacen referencia a los feeds; los usamos para mostrar los últimos comentarios, las últimas entradas, los posts relacionados, aleatorios, etc, etc. Es que, al no tener acceso a esos datos, nos vemos en la necesidad de emplear un camino alternativo y ese camino tiene nombre y lo hemos utilizado muchísimas veces, se llama JSON (JavaScript Object Notation) que no es otra cosa que un "archivo especial", también creado por el servidor y que tiene un formato diferente; allí, los datos, están guardados de tal forma que podemos leerlos con JavaScript.

Esto parece algo complicadísimo pero en realidad no lo es ... bueno, más o menos. En términos generales, para hacerlo sólo necesitamos dos cosas, cargar el script indicando que queremos que esté en ese formato y tener alguna función que lo interprete o lo manipule:

<script type="text/javascript">
  function leerfeeds(json) {
    // esta es la función y aquí haremos algo
  }
</script>

<script src="http://miblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=leerfeeds"></script>

Esto suele ser mucha información, demasiada, así que, generalmente, se nos dice que agreguemos parámetros para indicar la cantidad de información que solicitamos o la forma en que queremos que se nos envie. Por ejemplo, así solicitamos que nos envien sólo las últimas diez entradas, ordenadas por fecha:

<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=leerfeeds"></script>

Claro, una de las claves es justamente, resolver eso de "aquí haremos algo" pero empecemos por saber qué datos son accesibles y cómo leerlos así que vamos a ver cómo sería una función elemental:

<script type='text/javascript'>
//<![CDATA[
function leerfeeds(json) {

  var entry, posttitle, posturl, postimg, postcontent, postcategoria, postfecha;
  var numposts = 10; // la cantidad de entradas a leer

  // con un bucle, leemos las diez entradas que solicitamos, una por una
  for (var i = 0; i < numposts; i++) {

    // los datos de cada entrada se guardan en la variable entry
    entry = json.feed.entry[i];
    // como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos
    if (i==json.feed.entry.length) { break; }

    // el título de la entrada lo leemos leyendo entry.title.$t
    posttitle = entry.title.$t;

    // la URL de la entrada hay que buscarla ya que hay varias
    // una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // la encontramos: esta es la direccion URL de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }
    
    // buscamos el contenido de la entrada que puede estar completa o no
    postcontent = "";
    if ("content" in entry) {
      // el contenido de la entrada en un feed completo
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      // el contenido de la entrada en un feed corto
      postcontent = entry.summary.$t;
    }
    // en ambos casos, el contenido es nuestra entrada en formato HTML

    // y hay muchos más datos que pueden ser leidos

  /*
    entry.category[] y entry.category[x].term nos permitirá leer las etiquetas que tiene esa entrada
    entry.published.$t es la fecha de publicación
    entry.updated.$t es la fecha de la ultima actualización
    entry.author[] y entry.author[x].name.$t nos permitirá leer el nombre de los autores
  */

    // ..........................................
    // ya tenemos los datos así que acá vamos a escribirlos en nuestra página
    // ..........................................

  }
}

//]]>
</script>

¿Cómo escribirlos? No hay una sola forma de hacerlo sino tantas como diseños se nos ocurran así que eso lo veremos luego ...

REFERENCIAS:Google Code

Estamos en el editor de entradas, escribimos. Colocamos el título; pulsamos el botón Publicar Entrada. Salvo que hayamos cometido algún error, todo es perfecto y ya tenemos una página más en nuestro blog. Basta hacer click en Ver Entrada y mirar lo que dice la barra de direcciones del navegador para saber cuál es la URL de ese post.

Y ahora vienen algunas respuestas a preguntas surtidas.

1. ¿Puedo cambiar la URL de una entrada?

No. Blogger no lo permite. Una vez que publicamos algo, esa dirección no cambiará jamás; se crea de modo automático de acuerdo al título que le hayamos colocado, ignorando cualquier carácter especial así que si nuestro título es tan exótico como:
áéíóú¿?¡!"'|@#$%&/()=[]{}:;
la URL generada será tan simple como:
http://miblog.blogspot.com/xxxx/xx/aeiou-xxx.html

Todas esas direcciones se generan del mismo modo, adicionando el año y el mes a nuestro home y terminando con el título donde se reemplazan los espacios por guiones.

2. ¿Si cambio el título cambia la URL?

No; una vez publicada una entrada, podemos editarla mil veces, cambiar su título y su contenido pero la dirección seguirá siendo la misma; la única forma de cambiarla es borrándola y creando una nueva entrada.

Esa limitación, permite que la URL y el título sean diferentes, algo que puede ser interesante en algunos casos.

3. ¿Y si la publico sin título?

En ese caso, Blogger tomará las primeras palabras que encuentre para generar la dirección ... y si no hay nada de nada puede aparecer cualquier cosa pero siempre habrá algo:
http://miblog.blogspot.com/xxxx/xx/blog-post.html

4. Ah ... pero si cambio la fecha de la entrada, ¿entonces sí cambiará?

No. No cambia nunca, nunca, nunca. Si hicimos una entrada en noviembre de este año, veremos esta URL:
http://miblog.blogspot.com/2010/11/mientrada.html
si luego cambiamos la fecha por cualquier otra, ya sea mes o año, la URL seguirá inamovible aunque el post se ordenará correctamente tanto en el escritorio de Blogger como en el elemento Archivos.

5. ¿Hay alguna forma de hacer que las URLs de Blogger tengan otra estructura?

Sólo una que yo conozca y es espantosa. Hay que ir a Configuración, Archivos y allí, marcar NO en esta opción:

¿Habilitar páginas de entrada? Sí No

Para eso, deberemos deshabilitar el formulario de comentarios incrustado y las URLs generadas serán tan bonitas como estas:
http://miblog.blogspot.com/index.html#4521163934779049894
http://miblog.blogspot.com/2010_11_01_archive.html#4521163934779049894

Mucho cuidado con esto último porque en ese caso, las direcciones cambian y si pretendemos entrar en una página con una dirección "vieja", nos mostrará un error.