Editar plantillas en el nuevo diseño de Blogger

Seguramente, muchos hablarán sobre el nuevo diseño de Blogger que ya está disponible para todos los usuarios si se ingresa a través de Blogger Draft. Habrá a quién le gusta y a quien no le gusta; poco importa ya que nadie nos ha preguntado nada al respecto y si bien, por ahora seguimos teniendo la opción de no usarlo y continuar con el "tradicional", es posible que en algún momento el cambio sea completo y no habrá otro remedio que soportarlo.

En lo personal, me resulta muy incómodo; todo está "lejos" y lo que más me interesa está escondido allá en el fondo del barril; me refiero a la edición de plantillas.

Hacer ese largo viaje hasta allí es molesto así que primero que nada, uno puede agregarlo a los marcadores para evitarse el trabajo; la URL es siempre del mismo tipo y sólo cambia el numerito que identifica a cada blog:

http://draft.blogger.com/blogger.g?blogID=0000000#template

Pero, eso solo no basta. Para llegar al editor hay que ir hasta abajo de todo, salteándose las plantillas de nuevo estilo que se nos cruzan en el camino como vendedores callejeros y luego, hacer click en el enlace correspondiente que nos despliega una cosita chiquitita donde apenas entran unas cuantas líneas ... desde ya, todo esto, merece mi caluroso aplauso a los desarrolladores que esta vez se han superado; uno creía que no podían hacerlo peor pero ¡lo han logrado!!!

En fin, algo hay que hacer y entonces es cuando aparece Stylish que no es otra cosa que una extensión para Firefox y Chrome que nos permite personalizar las páginas web a nuestro gusto, utilizando sólo CSS.

Una vez instalado, lo veremos en la barra de estado o donde lo hayamos colocado. Ahora, podemos hacer dos cosas, o creamos un estilo para personalizar esa parte en todos nuestros blogs o creamos uno solo para un blog determinado; es indistinto ya que los estilos personales se activan y desactivan con un simple click sin tener que recargar las páginas.

Entonces, vamos a crear un estilo nuevo. Si lo queremos usar sólo en un blog, lo sencillo es abrir la página de Blogger Draft donde está el editor de plantillas de ese blog y luego, click en el ícono de Stylish y seleccionar Escribir nuevo estilo | Para esta URL. En ese caso, nos abrirá una ventana donde ya veremos escrito algo así:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://draft.blogger.com/blogger.g?blogID=0000000#template") {

}

Si lo que queremos hacer es crear un estilo general para todos los blogs, elegimos Escribir nuevo estilo | Estilo en blanco y allí escribimos:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://draft.blogger.com/blogger.g?blogID=*#template") {

}

En cualquiera de los dos casos, debajo, escribimos esto:

div.GC5D1NMFJB {display:none;}
div.GC5D1NMEJB {display:none;}
div.GC5D1NMHIB {display:none;}
div.GC5D1NMEP {display:none;}
div.GC5D1NMMIB {display:block !important;}
div.GC5D1NMOIB textarea {
  font-family: Arial !important;
  font-size: 12px !important;
  height:600px;
}

Le damos un nombre, guardamos y listo.

Esto es lo que se personaliza que no son otra cosa que algunos DIVs de la página de Blogger que, eventualmente, como se trata de un sitio en proceso de desarrollo, pueden cambiar.

Todo estilo agregado es fácilmente editable e incluso se pueden desactivar temporalmente, tanto desde el ícono de la extensión como desde el menú Herramientas del navegador.

Hand Drawn Web
	Contiene 492 íconos de 32x32 y 128x128, en formato PNG. descargar

Google Profiles es algo que creó Google allá por el 2008 y lo que pretendía era unificar los perfiles de usuario de todos quienes usaban algunos de sus servicios ya que, hasta ese momento, cuando se creaba una cuenta en alguno de ellos, los datos no eran compartidos por los otros; es decir, de alguna manera, Blogger, Gtalk, GMail, etc, funcionaban de manera independiente.

Esos perfiles podían ser privados o públicos pero eso ha cambiado y a partir del 31 de julio, todos los perfiles deberán ser públicos o serán eliminados.

Es probable que, si alguien tiene un perfil privado, Google envie un email informando de este cambio.

¿Que significa esto y en que nos afecta?

Hay ciertas certezas y algunas dudas. Para tranquilizar a quienes preguntan del tema, NO es obligatorio tener un perfil publico para mantener nuestras cuentas de Blogger, GMail o Picasa; estas, seguirán siendo accesibles y no sufrirán cambios por lo tanto, quien así lo prefiera, puede ignorar todo esto y ni siquiera debe molestarse en eliminarlo ya que todo perfil que no sea público, será eliminado por Google lo que no implica que en cualquier otro momento, pueda ser creado otra vez.

El resto de los detalles puede ser consultado en las distintas páginas de ayuda de Google pero acá va un resumen de aquellas que me parecen importantes.

El perfil es una lista de datos y se comparte con todos los productos de Google; su contenido es variado pero no existe obligación de completarlo; cada item puede ser administrado de tal modo que esos datos sean accesibles a los demás o no. Los únicos campos obligatorios son el nombre (que debe ser completo ya que no se acepta el uso de alias o nicks) y el sexo; aunque no lo dice, también es pública la ubicación geográfica del usuario. Nada impide crear un perfil con el nombre de Juan de los Palotes y es muy probable que dentro de un tiempo, veamos la posibilidad de crear perfiles empresariales ya que Google no es una carmelita descalza sino una empresa comercial.

La visibilidad de esta información puede ser modificada cuantas veces se quiera pero es importante tener en cuenta que, si se cambia el nombre del perfil, automáticamente se cambia el nombre en la cuenta de Google y este tipo de modificación afecta a todos los productos; por el contrario, si se borra el perfil, las cuentas seguirán existiendo.

Cada perfil posee una URL; originalmente era de tipo:

https://profiles.google.com/u/0/000000000000000

pero tiende a cambiar por algo así:

https://plus.google.com/000000000000000/

Esa dirección URL tambien es pública y, por defecto, se indexa por lo que puede ser accesible a través de los motores de búsqueda, cosa que puede ser modificada en cuyo caso, el perfil seguirá siendo visible para quienes la conozcan pero, sitios web, blogs y productos de Google, como Álbumes web de Picasa) que enlazan con tu perfil aún pueden aparecer en los resultados de búsqueda de Google y de otros motores.

Moraleja: No está claro cuáles son los productos donde sea necesario el uso de un perfil. Se sabe que para Google+ y Google Buzz serán obligatorios y que para GMail y Blogger no pero, hay otros como Google Reader donde eso es poco claro ya que, aparentemente, también requerirán que el perfil sea público o no podrán usarse.

Las fechas relativas son algo que se puso de moda hace ya tiempo y que vemos mucho en las redes sociales.

Una fecha relativa, en lugar de mostrar dia, mes y año de cierta entrada, lo que indica es el tiempo transcurrido desde su publicación hasta el momento actual; por ejemplo: "hace 2 minutos" o "dos dias atrás" o "hace un año"; cualquier texto que a uno se le ocurra.

Quienes usan Wordpress disponen de muchos plugins ya pensados para eso (la mayoría en inglés, of course) pero, en Blogger no es algo que se vea muy seguido. En Blog and Web hay una explicación de cómo hacerlo en este tipo de blogs y se trata de una adaptación de, justamente, un plugin de WordPress. Basándome en eso, vamos a ver si se pueden generar otras posibilidades.

Lo primero que pienso es que, para que este tipo de cosas funcione correctamente lo que debo usar es una fecha perfecta ¿A qué me refiero? A que JavaSprit posee muchas funciones para manejar fechas pero si quiero hacer un cálculo preciso, necesito un formato de fecha de esos que, a primera vista, es completamente ilegible así que no puedo usar ni <data:post.dateHeader/> ni <data:post.timestamp/> que son los dos datos que puedo configurar, tanto en el blog como en el widget de las entradas; necesito otro que no usamos nunca pero que está allí y se llama: <data:post.timestampISO8601/>

Ese dato me dará como resultado una fecha de este tipo:

2010-03-25T15:30:20-03:00

¿Que es eso? El año, el mes, el dia; seguido de la letra T que indica la hora, los minutos y los segundos, seguido de un valor (-03:00 en mi caso) que es la Zona Horaria establecida en Configuración | Formato.

Lo voy a usar pro dos razones, primero, porque manejar fechas en JavaScript que no están en inglés resulta complicado y segundo, porque de ese modo, no necesito modificar nada de la configuración del blog. Entonces, debería crear una función que lea ese dato y lo convierta en un número.

Suponiendo que la variable dato contenga esa fecha :

// la fecha y hora de publicación del post, expresada en segundos
var fechapost = new Date(dato).getTime()/1000;

// la fecha y hora actual expresada en segundos
var ahora = new Date().getTime()/1000;

// si la fecha es mayor que "ahora" es un post con fecha futura así que debería hacer algo distinto o no hacer nada
if(fechapost>ahora) { return; }

// estos son los segundos transcurridos entre el momento actual y el momento en que se publicó el post
var segundos = ahora - fechapost;

Teniendo el valor de los segundos, ahora es cuestión de usar aritmética para calcular las fracciones es decir, expresar segundos de otra manera. La solución clásica es algo así:

var calctiempo = segundos;
var salida = "";
var bucle = 6;
var t;

var p = [];
p['año'] = 31536000;
p['semana'] = 604800;
p['dia'] = 86400;
p['hora'] = 3600;
p['minuto'] = 60;
p['segundo'] = 1;

for(var periodo in p) {
  var valor = p[periodo];
  if(calctiempo>=valor) {
    t = Math.floor(calctiempo/valor);
    calctiempo%=valor;
    salida += t; // es el valor
    salida += " "; // un caracter espacio
    salida += periodo; // el texto 
    if(t>1){ salida += "s"; } // los plurales
  }
  salida += " "; // otro caracter espacio
  bucle--;
  if(bucle==0){ break; }
}

document.write(salida);

Esto mostraría algo así:

2 dias 17 horas 59 minutos 10 segundos

Ahora bien, sería mejor usar algo menos matemático y poner textos más humanos, ya sea "hace instantes", "hace más de un hora" o "hace tanto tiempo que ya no me acuerdo". Para eso puede usarse el mismo tipo de esquema que utilizan los scripts de Twitter así me voy a crear una función similar donde, usando aritmética, podamos ir estableciendo fracciones de tiempo a gusto de cada uno; nada grave, por ejemplo:

minutos = segundos / 60
horas = segundos / 60*60 = segundos / 3600
dias = segundos / 60*60*24 = segundos / 86400
semanas = segundos / 60*60*24*7 = segundos / 604800

Los meses ya son complicados de calcular así que voy por lo fácil, hago de cuenta que todos tienen 31 dias y a otra cosa:

meses = segundos / 60*60*24*31 = segundos / 2678400

Algo similar pasaría con los años bisiestos pero acá no se trata de precisión sino de redondeos así que:

años = segundos / 60*60*24*365 = segundos / 31536000

La función que pongo antes de </head>

<script type='text/javascript'>
//<![CDATA[
function fecharelativa(dato) {
  var fechapost = new Date(dato).getTime()/1000; // fecha y hora de la publicación
  var ahora = new Date().getTime()/1000; // fecha y hora actual
  if(fechapost>ahora) { return; } // si la fecha es incongruente no hago nada
  // los segundos transcurridos entre esas dos fechas
  var segundos = ahora - fechapost;

  // calculo toods los datos
  var minutos = (parseInt(segundos / 60)).toString();
  var horas = (parseInt(segundos / 3600)).toString();
  var dias = (parseInt(segundos / 86400)).toString();
  var semanas = (parseInt(segundos / 604800)).toString();
  var meses = (parseInt(segundos / 2678400)).toString();
  var anios = (parseInt(segundos / 31536000)).toString();
  
  // y comienzo a armar lo que será el texto teneindo en cuenta que debo redondear ciertas fracciones
  var salida = "";

  if (minutos < 1) { // menos de un minuto
    salida = "hace menos de un minuto";
  } else if(minutos == 1) { // un minuto y algo más, menos de dos minutos
    salida = "hace poco más de un minuto";
  } else if(horas < 1) { // menos de una hora
    salida = "hace " + minutos + " minutos";
  } else if(horas == 1) { // una hora y algo más, menos de dos horas
    salida = "hace poco más de una hora";
  } else if(dias < 1) { // menos de un dia
    salida = "hace " + horas + " horas";
  } else if(dias == 1) { // un dia y algo más, menos de dos dias
    salida = "hace poco más de un dia";
  } else if(semanas < 1) { // menos de una semana
    salida = "hace menos de una semana";
  } else if(semanas == 1) { // una semana y algo más, menos de dos semanas
    salida = "hace una semana";
  } else if(meses < 1) { // aproximadamente menos de un mes
    salida = "hace " + dias + " días";
  } else if(meses == 1) { // un mes ... con un cierto margen
    salida = "hace un mes";
  } else if(anios < 1) { // menos de un año
    salida = "hace " + meses + " meses";
  } else if(anios == 1) { // aproximadamente un año
    salida = "hace un año";
  } else { // más de un año
    salida = "hace " + anios + " años";
  }

  // y escribo ese texto
  document.write(salida);
}
//]]>
</script>

¿Cómo lo uso en Blogger? Tengo que llamar a al función en alguna parte; por ejemplo, podría hacerlo en el mismo lugar donde coloco el nombre del autor; busco <data:post.author/> y lo cambio así:

Publicado por <data:post.author/>
<script type='text/javascript'>fecharelativa(&#39;<data:post.timestampISO8601/>&#39;);</script>

Como no voy a usar este esquema de fechas de entradas, no hay un ejemplo pero, no sólo es posible utilizarlo para mostrar la fecha de las entradas, también podríamos usarlo para mostrar la fecha de los comentarios que suele ser uno de esos datos que uno no personaliza y en el que solemos ver la hora.

Para esto, el script es exactamente el mismo pero, debo ir a Configuración | Comentarios y establecer un formato de fecha adecuado; en este caso, elijo este que es el más completo:

Luego, debo llamar a la función así que busco esta parte:

<dd class='comment-footer'>
  <span class='comment-timestamp'>
    <a expr:href='&quot;#comment-&quot; + data:comment.id' rel='nofollow' title='comment permalink'><data:comment.timestamp/></a>
    <b:include data='comment' name='commentDeleteIcon'/>
  </span>
</dd>

Y hago lo mismo que antes, cambio <data:comment.timestamp/> por el script:

<script type="text/javascript">fecharelativa(&#39;<data:comment.timestamp/>&#39;);</script>

ACTUALIZACION:

Como Blogger parece haber cambaido las opciones de formato y las fechas que antes se mostraban como:
7/17/2011 00:30:00 AM o 7/17/2011 00:30:00 PM
ahora se muestran como:
7/17/2011 00:30:00 a.m. o 7/17/2011 00:30:00 p.m.
debería modificar el inico del script para que puedan ser interpretadas y la funcion debería comenzar así:

dato=dato.replace("a.m.","AM");
dato=dato.replace("p.m.","PM");
var fechapost = new Date(dato).getTime()/1000; // fecha y hora de la publicación

Cuando utilizamos las propiedades de transformación, estas se ejecutan tomado como punto de origen el centro el objeto. Esto es así en todos los navegadores que las soportan, incluyendo Internet Explorer 9. En el resto, solemos emplear filtros pero estos funcionan de manera completamente distinta así que por un rato nos ovidamos de ellos.

Si bien todos los navegadores modernos aceptan la propiedad, por ahora, cada uno de ellos utiliza prefijos propios:

-moz-transform para Firefox
-webkit-transform para Chrome y Safari
-o-transform para Opera
-ms-transform para Internet Explorer 9

Si bien ese punto de origen es el que esta definido por defecto, también hay una propiedad que permite cambiarlo llamada transform-origin que también tiene sus prefijos:

-moz-transform-origin
-webkit-transform-origin
-o-transform-origin
-ms-transform-origin

En todos los navegadores, el valor inicial es 50% 50% y para definirlo pueden usarse porcentajes, pixeles o palabras como center, left, right, top o bottom.

El orden es el mismo que en todas las otras propiedades, el primero indica la coordenada horizontal y el segundo la vertical. Así que si pusieramos 0 0 o left top, cambiaríamos el punto de origen al ángulo superior izquierdo (que es como funcionan los filtros de IE):

De este modo:

transform-origin: center center o transform-origin: 50% 50% es el centro y el valor por defecto
transform-origin: left top o transform-origin: 0% 0% es el ángulo superior izquierdo
transform-origin: right top o transform-origin: 100% 0 es el ángulo superior derecho
transform-origin: left bottom o transform-origin: 0% 100% es el ángulo inferior izquierdo
transform-origin: right bottom o transform-origin: 100% 100% es el ángulo inferior derecho

center top	center bottom	left center	right center

REFERENCIAS:Understanding CSS3 2D Transforms

¿Cómo encarar este tema? No lo sé. Ni siquiera estoy seguro que deba seguir escribiendo pero no importa. Hace rato que me vengo preguntando si debe ser publicado o no; hasta ahora lo he respondido de manera personal a todo aquel que me ha preguntado pero, cada vez son más y ese método me resulta algo complicado.

Vamos al grano.

Somos muchos los que seguíamos el blog de Rosa y la extrañamos. Somos muchos los que aún hoy la seguimos, ya sea porque tenemos su sitio en nuestros feeds, porque está en algún gadget o en los Seguidores de Blogger. El problema surge porque de un tiempo a esta parte, lo que vemos es algo raro. Feeds a sitios que no conocemos, artículos en inglés de alguien a quien jamás agregamos y uno se pregunta ¿qué pasa?

Yo no tengo una respuesta para eso, imagino posibilidades pero sólo las imagino y en todo caso, lo que pretende esta entrada es tratar de solucionar el problema.

Desconozco el motivo pero el Escaparate sufrió una serie de modificaciones que, pueden haber sido errores o no pero que lo vemos hoy es que faltan imágenes y otra serie de archivos; aparentemente, porque esas cuentas fueron cerradas. El tema de los feeds parece seguir la misma lógica o ilógica.

Cuando se crea una cuenta en Feedburner, el servicio nos da una dirección URL que suele ser aleatoria. Uno, puede cambiarla o no. En este caso, no parece que hubiera sido cambiada y la URL es cualquiera de estas:

http://feeds.feedburner.com/blogspot/hnBy
http://feeds2.feedburner.com/blogspot/hnBy

Ese tipo de dirección es la que ponemos en la Configuración de nuestro blog para redirigir los feeds de Blogger y que sean administrados por Feedburner; así que cualquiera de estas direcciones de Blogger nos redirige a las anteriores:

http://elescaparatederosa.blogspot.com/feeds/posts/default
http://elescaparatederosa.blogspot.com/atom.xml

Y todas ellas nos muestran las entradas de otro sitio llamado Ways To Invest Money:
http://ways-to-invest-money.blogspot.com/

¿Por qué ocurre esto? No lo sé. Puede ser un error de Feedburner, puede ser que la cuenta original se haya eliminado y como tiene una URL aleatoria casualmente haya sido tomada por otro blog. Realmente no sé y cualquier respuesta de mi parte sería pura especulación pero, podemos resolverlo.

Si se trata de un lector de feeds, debemos cambiar la dirección para eludir a Feedburner; si se trata de los Seguidores, debemos eliminarnos y sumarnos otra vez pero, no debemos usar la URL del blog sino alguna de estas alternativas:

http://elescaparatederosa.blogspot.com/atom.xml?redirect=false
http://elescaparatederosa.blogspot.com/feeds/posts/default?redirect=false
http://www.blogger.com/feeds/8932650177070730831/posts/default

Las dos primeras son las comunes a las que se le adosa ?redirect=false para evitar la redirección de Feedburner; la tercera es la URL original del blog y no es afectada por estas cosas así que siempre apuntará al blog en si mismo.

Bueno. Ya está. No lo borré y llegué hasta el final. Espero que sirva.

No es algo que uno vaya a utilizar mucho pero, de todas formas esto es una curiosidad interesante.

Cada etiqueta que colocamos es un rectángulo, siempre es así, incluso si usamos algún tipo de imagen transparente que aparenta otra forma, en realidad, sigue siendo un rectángulo. Eso, es algo fácil de comprobar cuando son enlaces, el área donde podemos hacer click, excede el supuesto tamaño y si le agregamos un borde, lo veremos con claridad. No hay nada que hacer al respecto, incluso, si usamos CSS para "rotar" algo, el rectángulo sigue siendo un rectángulo:

En Impressive Webs se les ha ocurrido una forma de eludir esta restricción y crear un enlace que no sea rectangular sino que tenga la forma de un triángulo y como demostración, lo aplican en un ángulo de la página, algo similar a lo que se hace con efectos como los llamados Page Peel pero claro, mucho más elemental.

La idea es sencilla aunque tiene sus bemoles para compatibilizarla con Internet Explorer ya que allí hay que agregar algún hack para posicionarlo correctamente dado que la forma de "medir" las cosas es diferente.

El HTML es "normal", un DIV contenedor donde colocamos el enlace y el contenido:

<div class="contenedor">
<a id="corner" href="la_URL" > el enlace </a>
... cualquier otro contenido ...
<div>

Para que esto funcione, el DIV contenedor debe tener algunas propiedades establecidas de manera obligatoria y el resto es personalizable; y claro, la clave está en las propiedades del enlace, estas son las del ejemplo:

<style>
.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 0 0 0 20px;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
color: #FFF;
margin: 0 auto;
padding: 30px;
width: 470px;
}
#corner {
/* lo dimensionamos y lo posicionamos de manera absoluta */
display: block;
height: 100px;
position: absolute;
width: 100px;
/* lo rotamos */
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
top:-50px;
right:-50px;
/* otras propeidades optativas */
background-color: #A00;
box-shadow: 0px 0px 50px #000 inset;
}
</style>
<!-- la posición de ese mismo triángulo en Internet Explorer -->
<!--[if IE]>
<style>
#corner-ad {right: -30px; top: -70px;}
</style>
<![endif]-->

Donec ullamcorper bibendum viverra. Ut semper semper quam eget ornare. Phasellus eleifend, nisl ut malesuada dignissim, purus quam fermentum neque, sit amet tristique odio purus ac ligula. Nunc tristique, massa et aliquam laoreet, metus dolor euismod metus, vitae aliquet leo arcu id elit.

Cras at iaculis nisi! Vestibulum ac est risus, eu venenatis mi. Nunc felis odio, sagittis vitae ultrices vel, pellentesque eu tortor. Morbi vestibulum nulla ac turpis ullamcorper lacinia. Duis quis ipsum orci, dignissim pellentesque lectus. Suspendisse vitae augue eu orci lacinia sollicitudin. Etiam nunc turpis, lacinia nec fringilla ac, ultrices nec velit! Sed tristique convallis malesuada.