Navidad 2.0

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