Chica Blogger

Uno de los aspectos más importantes de un blog, y uno de los más descuidados, es la seguridad. Nadie está exento de plagios o ataques. La gran pregunta es: ¿qué hacer para proteger tu blog, especialmente tienes un Blog en Blogger y no puedes usar ningún plugin que te ayude a garantizar su seguridad?

En su libro Blogger Seguro, que cuenta con el apoyo de más de 60 blogger brasileños, Sergio Estrella (IceBreaker) entrega consejos fundamentales para protegerse del plagio, del hacking y de accidentes indeseables, invitando a usar una serie de útiles herramientas, tips y sitios web prevenir antes de lamentar, y pasos a proceder en caso del robo de contenido, o en caso de que alguien se haya apropiado de tu blog.

Sergio Estrella también es autor de otro libro que considero imprescindible para usuarios de Blogger, llamado “Blogger Rápido“. Se trata básicamente de cómo optimizar el CSS, las imágenes y los elementos y widgets que usas en las plantillas, a fin de hacer que tu blog cargue más rápido.

Ambos libros pueden ser descargados en formato *.pdf desde el blog de IceBreaker (en un pack “dos por uno”). Son libros cortos y precisos, escritos en portugués. Si no entiendes el portugués y te gustaría obtener una traducción al español, puedes descargar los libros, subirlos a Zoho y luego usar esa URL en Google Translator.

Una “cheat sheet” es una guía de referencia rápida, cuya denominación deriva de los “ayudamemoria” que todos alguna vez usamos en un examen. Habitualmente, vemos cheat sheets de WordPress, CSS, HTML y uno que otro lenguaje de programación. Entonces, ¿por qué no disponer de una para Blogger?

Francisco de Blog and Web creó una espectacular chuleta para Blogger, la única que se ha visto hasta este momento (y en español). De seguro, será muy útil para quienes quieren modificar su plantilla Blogger y no saben cómo, así como también para quienes adaptamos o diseñamos plantillas.

La chuleta está basada en Mínima, y muestra de manera gráfica (y bastante pedagógica) los selectores de clase e ID que son comunes al CSS de la mayoría de las plantillas. Éstos pueden variar un poco en plantillas modificadas o adaptadas a partir de WordPress, pero es una excelente base para identificar y modificar las distintas secciones que componen la estructura de un diseño hecho en Blogger.

Puedes ver y descargar e imprimir la chuleta de Blogger desde Blog and Web. Indudablemente, puedes acompañarla con cheat sheets de CSS para comprender el uso de las propiedades y sacarle aun un mayor provecho.

Desde hace un tiempo, estoy leyendo blogs indios y vietnamitas, desde donde surgen extraños y a veces impensados trucos para Blogger. Estos son dos de ellos:

1. Auto-leer más configurable

Hace meses, veíamos tres distintas maneras de crear excerpts (resúmenes con “leer más” en Blogger). En general, todas funcionan bien, expecto para IE6, donde es muy probable que los scripts no anden.

Este nuevo script, que deriva del “leer más con thumbnails” (de hecho, es su versión mejorada), tiene dos ventajas: (1) puedes elegir el punto de corte del resumen de acuerdo a cada post, eligiendo mostrar o no mostrar una miniatura de imagen y (2) el límite de corte del excerpt se fija en un número de palabras, y no de caracteres (las palabras ya no se verán cortadas).

Se añade en dos pasos:

1) Busca el siguiente código en tu plantilla (con los artilugios expandidos):

<data:post.body/>

y reemplázalo por:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->Leer más</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

(En esta zona puedes editar el “–>Leer más”).

2) Antes de la etiqueta body, pega:

<script type='text/javascript'>
var thumbnail_mode = 'no-float' ; 
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
var indent = 3;
</script>
 
<script type="text/javascript">
//<![CDATA[
/******************************************
Auto-readmore link script, version 4.0 (for blogspot)
 
(C)2009 by Anhvo
 
Homepage:  http://vietwebguide.com 
 
Please dont remove this copyright or change it into your own
******************************************************/
 
/*******************************************
         CONFIG (extenal code)
        -------------------------------
 
var thumbnail_mode = "float" ; //(or "no-float")
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 100;
var img_thumb_width = 120;
var indent = 3;
 
*********************************************/
 
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
 
function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
 
function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
 
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
 
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
 
 }
 
 
 var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }  
 return s;
}
 
 
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 } 
 else {
 
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  } else {
   imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
 
 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script>

Configuración

Ahora, puedes configurar el script haciendo una modificación en las siguientes variables:

var thumbnail_mode= ‘no-float’;
var classicMode = false;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;

• La variable thumbnail_mode determina la flotación a la izquierda de la imagen. Si eliges ‘no float’, la imagen no se mostrará en miniatura; si eliges ‘float’, se mostrará una miniatura a la izquierda en los posts de la página principal.
• ClassicMode determina si todas las entradas se van a cortar en el mismo punto o no. Es recomendable cambiarla a true si antes cambiaste el valor de la variable thumbnail_mode a ‘float’.
• Summary_noimg y var Summary_img corresponden al punto de corte del resumen cuando tu post no tiene imagen y cuando sí tiene, respectivamente. El valor 50, por ejemplo, significa “50 palabras”.
• Img_thumb_height e img_thumb_width corresponden al alto y al ancho de los thumbnails (miniaturas de imagen).

La novedad de esta versión del script, es que puedes poner en tus entradas, tal y como en WordPress. Incluirlo, significa pasar por alto el límite fijado para el corte automático de entradas.

Por ejemplo:

Párrafo 1 <!-- more --> Párrafo 2

Se va a mostrar el párrafo 1 y no el 2, independientemente del número de palabras que tenga.

Aunque el script es mejor que los anteriores, al ser automático tiene la desventaja de mostrar siempre el enlace “leer más”, en todas las entradas.

Fuente

2. Bloquea usuarios por IP

Banear usuarios indeseables por IP, es algo imposible de hacer desde el panel de Blogger. Sin embargo, puedes hacerlo con javascript y PHP, añadiendo el siguiente código al inicio de tu head:

<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//<!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com
 
var banned_ip = new Array();
 
banned_ip[0] = '85.142';
banned_ip[1] = '22.98.69.1';
banned_ip[2] = '22.98.69.146';
banned_ip[3] = '85.78';
 
var mes_bi = "Tu IP está baneada y no puede ver este sitio!";
 
for(var i=0;i<banned_ip.length;i++) {
 eval('var re = /^' + banned_ip[i] + '/ ;');
   if (re.test(mc_user_ip)) 
   {
     document.write('<style type="text/css">');
     document.write('BODY{display:none;}');
     document.write('<\/style>');
  alert(mes_bi); 
    break;  
  } 
}
//]]>
</script>

Ahora, sólo es cosa de añadir más IPs a la lista. Puedes banear IPs por rango en vez de IPs individuales, por ejemplo: Si quieres bloquear todas las IPs del rango ’66.45.xxx.xxx’, añade simplemente “66.45″ en el número de IP.

Cabe destacar que Blogger no permite conocer la IP de tus comentaristas, pero sí puedes conocer ésta cuando te contactan vía correo electrónico o formulario de contacto.

Fuente

Una de las mayores deficiencias de Blogger, como comentaba Francisco en BlogandWeb, es en cuanto al alojamiento de archivos. Encontrar un buen hosting para archivos *.js (javascript) es prácticamente indispensable, y no sólo pensando en plugins jQuery o MooTools para adornar un blog con “efectos especiales” en el menú o añadir un carrusel de imágenes, sino en necesidades tan básicas como incorporar excerpts.

Entonces, la pregunta del millón es: ¿Dónde alojar archivos javascript?

Hace un par de meses, Fernando en Quite Random nos mostraba una serie de alternativas para incorporar javascript en la misma plantilla. Cuando es posible, añadir javascript en la misma plantilla es lo más recomendable; sin embargo, cuando los archivos son demasiado grandes, es preferible usar un hosting externo.

¿Qué hosting usar?

Hay una serie de alternativas:

1. HotlinkFiles. Como su nombre lo indica, permite el hotlink de todo tipo de archivos, incluyendo *.js e *.ico.

• Características: 1GB de espacio libre, 8 MB de ancho de banda mensual, 50 MB máximo por archivo.
• Uso: Para obtener el enlace directo a cada archivo, es necesario subir el archivo, y en la sección “MyFiles” hacer click sobre él con el botón derecho del mouse (Propiedades/Dirección).

2. Lycos Tripod. Un hosting web de la época de los dinosaurios (seguro lo recordarán quienes lo vieron como alternativa a Angelfire o Geocities). Permite incluso hacer experimentos con PHP.

• Características: 1GB de espacio libre para todo tipo de archivos, ancho de banda ilimitado. El registro te da un subdominio del tipo “usuarios.lycos.es”, “chica-web.es”, “super-red.es” “miss-web.es” o “mi-website.es”.
• Uso: Accediendo a tu cuenta, puedes subir archivos vía FTP en WebFTP/Abrir FTP Web. El enlace directo a tu archivo será: tusubdominio/archivo.extensión. Por ejemplo: http://chicablogger.chica-web.es/easyslider.js.

3. FileAve. Un antiquísimo sitio online desde 2002, que comencé a valorar gracias a la recomendación de Alvaris Falcon.

• Características: Subdominio, 30MB para subir archivos de todo tipo. Es necesario entrar cada 30 días para evitar que tu cuenta sea borrada.
• Uso: Mediante el registro, puedes subir y ver las direcciones directas de tus archivos desde la sección “Files”.

4. Ripway. 30 MB para subir todo tipo de archivos (incluidos videos, imágenes y archivos PHP), 150 MB de banda ancha mensual. Utiliza el mismo script que Fileave; por lo tanto, puedes ver las URLs de tus archivos en la sección “Files”.

5. Web Hosting gratuitos varios, como 000WebHost. TexMixer hizo un listado de hostings gratuitos sin publicidad en los que perfectamente puedes llegar a instalar WordPress. Hostings como éstos, hay muchos; el problema es muchos de ellos prohiben ser usados sólo como hostings de archivos. En todo caso, siempre es recomendable leer sus políticas, y tener un respaldo de tus archivos.

Alternativas para alojar javascript, hay. Si usas Blogger, es bueno que las tengas a mano, porque nunca sabes cuándo las vas a necesitar.

Guti me pedía que explicara un poco más acerca de cómo mostrar el primer post con un estilo distinto en Blogger (viene de acá), utilizando el nuevo código condicional que aparece en las plantillas.

En general, es posible hacer modificaciones básicas añadiendo estilos condicionales bajo el cierre de “b:skin“, y justo antes del cierre de la etiqueta “head“, de la siguiente manera:

Lo anterior va a definir estilos para el primer post, que son distintos a los de los posts individuales. En el ejemplo, puse un color distinto para el cuerpo de los posts (post-body). No obstante, añadir condicionales para el primer post es algo más complejo que eso. No recomiendo su uso para quienes no están familiarizados con la estructura de las plantillas de Blogger, porque podrían sufrir un gran dolor de cabeza.

Hace unos días, Ro Zanchetta escribió una entrada de cómo usar la nueva etiqueta “isFirstPost” en Blogger, con un ejemplo concreto para plantillas tipo revista, utilizando un hack para “leer más”. Para quienes son arriesgados y quieren “lanzarse directamente a los leones”, el post de Ro es una lectura obligada. Por mi parte, voy a explicar el mecanismo para usar condicionales para el primer post, de acuerdo a mis propios experimentos.

Ahora bien: Al expandir los artilugios de las plantillas, es posible encontrar la siguiente código:

<b:includable id='post' var='post'>
Código-post
</b:includable>

Lo que llamé Código-post son muchas líneas de código, las cuales en una plantilla muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros.

Entonces, el procedimiento a seguir es el siguiente: copiar el código de los posts (debe mostrarse dos veces en total) utilizando distintos condicionales, de la siguiente manera:

<b:if cond='data:post.isFirstPost'>
Código-post con clases distintas para el primer post
<b:else/>
Código-post
</b:if>

El “Código-post” es el código completo, íntegro, sin cambios. Sin embargo, el “Código-post con clases distintas para el primer post” debe tener algunos cambios. Por ejemplo:

• En vez de “div class=’post-entry‘”, voy a usar “div class=’post-entry-first‘”
• En vez de “div class=’post-body entry-content‘”, voy a usar “div class=’post-body-first’“

Y así sucesivamente, definiendo mis propios selectores para esa sección. Preferí usar selectores similares a los de la plantilla Mínima, agregando “-first” a cada uno, para que sean más fáciles de recordar.

Hecho este procedimiento, sólo queda definir las propiedades para cada selector antes del cierre de “b:skin”, como en la siguiente imagen (sólo es un ejemplo, porque puedes hacer mucho más):

Voilá! Eso es todo. Probablemente, la etiqueta “isFirstPost” dé para una nueva entrada de este tipo, sobre cómo añadir hacks. A mí, por ejemplo, me gustaría poner un hack “leer más” automático en el primer post, y un hack “leer más” no-automático para los siguientes. Es cosa de seguir experimentando…