Problemas con los enlaces de navegación

Uno dos tres cuatro ... sigue la epidemia. Primero fue Karla que me preguntaba por un problema que se producía al utilzar la barra de navegación de Blogger, esa que aparece en la parte inferior y que por defecto dice Entradas antiguas, Inicio y Entradas recientes. Ni siquiera llegué a responder ya que enseguida encontró una respuesta en los foros de ayuda.

Luego, siguió CUENTAGOTAS con un problema similar; distintos síntomas pero siempre ligados a esa parte. Ahora, ya se suman otros y la lista continúa. Se produce un error con esos números que nada dicen, se dejan de mostrar las entradas resumidas si las tenemos agregadas, se muestra una URL errónea, etc, etc.

Todo eso es debido a un bug de Blogger que, en teoría, ya estaba solucionado pero que en su momento me molestó bastante y hay una entrada del año 2007 que habla de eso ... tiempos antiguos cuando los dinosaurios aún reinaban sobre la tierra.

Si vamos a la plantilla con los artilugios desplegados y buscamos el includable llamado nextprev que es el que contiene esa parte del código; lo que se ve por defecto es esto:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

donde tal vez se hayan hecho modificaciones personales cambiando los textos por defecto o agregando imágenes que reemplazan los que coloca Blogger:

<data:newerPageTitle/> es el texto a página siguiente
<data:olderPageTitle/> es el texto a página anterior
<data:homeMsg/> es el texto a página de inicio

Todos los problemas se deberían resolver eliminado lo indicado en color es decir, reemplazando esto:

expr:id='data:widget.instanceId + "_blog-pager-newer-link"'

por esto:

id='blogpager-newerlink'

y esto:

expr:id='data:widget.instanceId + "_blog-pager-older-link"'

por esto:

id='blogpager-olderlink'

Eventualmente, el mismo ID peude ser eliminado ya que n otiene utilidad así que esos enalces bien pordían quedar así:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>

Parece que a Blogger se le ha dado por reciclar viejos errores así que no queda más remedio que retroceder en el tunel del tiempo.

Eso de data:widget.instanceId es algo que se ve en muchas partes de las plantillas y desconozco su utilidad; imagino que es algún dato interno que se relaciona con los scripts que inserta el mismo sistema que son los que deben estar causando el error así que si se ven errores en otros enlaces como header, comenatrios, etc; es probable que tengan el mismo origen y es cosa de probar si la solución es aplicable también a ellos.

Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:

transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:

transition-property: background;
transition-property: background-color;
transition-property: background, width;

Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:

<div class="demoT">CSS3</div>

<style>
.demoT {
  /* todas las propiedades normales que quiera poner */
  background-color:#101921;
  border: 6px solid #89A;
  border-radius: 10px;
  color: #EEE;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  width: 100px;
  /* acá irá la transición */
}
.demoT:hover {
  /* estas son las propiedades que van a cambiar */
  background-color: #606971;
  border-radius: 150px;
  color: #000;
  font-size:64px;
  height: 200px;
  padding-top: 100px;
  width: 300px;
  /* acá irá la transición */
</style>

en lugar de agrega esto para animarlo un poco:

transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;

puedo simplificarlo así:

transition-property: all;
transition-duration: 2s;

o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:

transition: all 2s;

El orden es:

transition: transition-property, transition-duration transition-timing-function transition-delay;

Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:

-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;

CSS3

Cuando queremos anular la transición lo que utilizamos es el valor none:

transition: none;

transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:

transition-duration: 1s;
transition-duration: 1s, 2s;

transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:

ease

linear

ease-in

ease-out

ease-in-out

cubic

Por último:

transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.

Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:

-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

La mayoría de los editores de imágenes online comienzan con la letra P y pixlr no es la excepción. Claro, eso sólo es un detalle sin importancia. Lo interesante es que es uno de los mejores que he probado y está en español.

Posee dos aplicaciones, Pixlr Editor es el editor completo y Pixlr Express es un editor con menos opciones, útil cuando lo que necesitamos es hacer retoques rápidos. Ambos utiliza Flash pero son bastante rápidos y además, disponen de un API que puede ser utilizado por desarrolladores de manera gratuita.

Podemos usarlos sin necesidad de registro aunque esto último nos permite enviar las imagenes directamente a alguna red social como Facebook o Picasa. Admite crerar imágenes nuevas, seleccioanrlas desde nuestra PC o desde cualquier web y es bastante intuitivo, parecio al Photoshop. Unos videos muestran el modo de uso de sus características principales.

También resulta interesante la herramienta Grabber que no es otra cosa que una extensión para para Firefox o para Chrome por medio de la cual, tenemos acceso al editor simplemente haciendo click y con el botón derecho sobre cualquier imagen que veamos; de esta manera, podemos adaptarla, recortarla o guardarla.

Ambos servicios tamboén se pueden incluir en cualquier sitio mediante un IFRAME:

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/" frameborder="0"></iframe>

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/express/" frameborder="0"></iframe>

Y acá puse esos IFRAMES en unos enlaces para que se muestren en una ventana modal si es que alguien quiere probar cómo funcionan:

Abrir Pixlr Full | Abrir Pixlr Express

Las transiciones usando CSS son la parte interesante que trae Firefox 4 y que ya existía en otros navegadores como Chrome y Opera; de este modo, aún cuando en Internet Explorer no funcionen, el hecho que un 50% de los usuarios (o más, dependiendo de las estadísticas que se miren) utilicen estos navegadores ya nos permite jugar un poco con ellas.

De todos modos, como cualquier otro "efecto especial", bien puede armonizarse o utilizarse de manera sutil para que los visitantes puedan navegar correctamente aún cuando algunos de ellos no accedan a esas "modernidades".

Una transición es aquello que ocurre entre un momento y otro.

Estamos acostumbrado a ciertos efectos como el hover sobre un texto; es simple, ese texto tiene un color y cuando ponemos el cursor encima, el color cambia. Ha habido una "transición" pero, esta es instantánea; estas nuevas propiedades, entre otras cosas, nos permiten controlar el tiempo que durará ese cambio entre un estado y otro lo que generará una animación simple porque durante ese proceso, la propiedad o propiedades irán cambiando, yendo de un estado inicial a otro final.

Un ejemplo para no hacerse lio.

A la izquierda se ve el efecto hover normal; al poner el cursor encima, el color de fondo cambia de blanco a negro y en el de la derecha pasa lo mismo excepto que el tiempo que tarda es mayor y durante ese tiempo, ese color va virando lentamente mostrando tonos de gris.

La propiedad básica para conseguir esto se denomina transition pero los navegadores sólo la entienden si se utilizan sus prefijos así que tendremos tres versiones distintas que tienen el mismo nombre y la misma sintaxis pero que varían en ese prefijo:

-moz-transition en Firefox
-webkit-transition en Chrome y Safari
-o-transition en Opera

Por lo general, no suele usarse esa propiedad que es la forma resumida sino que se "divide" del mismo modo que lo hacemos con muchas otras. En este caso, son cuatro:

transition-property
transition-duration
transition-timing-function
transition-delay

Pero no hay que asustarse porque para los casos más simples basta usar las dos primeras.

¿Qué hacen? Voy a mostrarlas sin subfijos para no estar escribiendo mucho pero, hay que recordar que deben agregarse o no funcionarán.

transition-property es la que utilizamos para indicar cuál o cuales son las propiedades a cambiar; si son varias, las separamos con comas:

transition-property: color;
transition-property: color, opacity, width;

transition-duration es el tiempo que durará el efecto y también podemos colocar un solo valor o varios, separados por comas; si hacemos esto último, le estamos diciendo al navegador que cada propiedad indicada por transition-property tenga un tiempo de transicion distinto. En todos los casos, el valor está expresado en segundo:

transition-duration: 1s;
transition-duration: 1s, 4s;

Con esas ya podemos crear el efecto anterior que no es otra cosa que un efecto hover:

<style>
.demo {
background-color:#FFF;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
.demo:hover {
background-color:#000;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
</style>

<div class="demo"></div>

¿Por qué ponemos las transiciones en ambas reglas? Porque el efecto funcionará en ambos sentidos, se verá cuando colocamos el cursor encima y tambien cuando lo sacamos. Esto no es obligatorio, puede hacerse un efecto en un solo sentido sin problemas.

Las propiedades a las que podemos agregar efectos son muchas; en este ejemplo cambiamos el color de fondo y su ancho (width):

Casi todas las propiedades pueden sufrir efectos te transición: colores, fondos, bordes, tamaños, posiciones, fuentes, opacidad, sombras, márgenes, etc:

¿más?

Es verdad que el editor de Blogger posee un botón mediante el cual podemos agregar un video desde nuestra PC. la opción, existe hace ya tiempo y es muy poco usada, probablemente, porque no nos da ninguna clase de control sobre este, ni siquiera nos dice dónde está alojado pero, Picasa nos da la misma posibilidad, algo que antes sólo podíamos hacer desde el software de escritorio, ahora también es posible hacerlo desde la web misma e incluso, desde el mismo editor de Blogger.

Los formatos aceptados son varios: avi, asf, mov, wmv, mpg, mp4 y otros pero no acepta swfs ni flvs.

Las restricciones en cuanto a capacidad son similares a las imágenes, si el video dura menos 15 minutos, no será tenido en cuenta.

Desde Blogger, podemos subirlos del mismo modo que hacemos con una imagen y con el mísmo ícono:

o bien seleccionar algun oque ya hayamos subdo previamente:

No sé si se tratará de un error circunstancial o no pero, cada vez que lo hice, se duplicaron así que tuve que eliminar uno de ellos.

El código insertado es ... no sabría definirlo , hay que verlo Ver/Ocultar [+]

<div class="separator" style="clear: both; text-align: center;">
<object width="320" height="266" class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSMGchSPy_XZ9RrOPIyJqs0tnvE6pnYWsxUXSe9xqBOsMS3rJIGowNF-h7rdnEHlMxGikYgnR_AdXDZpz5dVLr9mkk2sHk_K69FFW6pP_0FSacIz1lEwv3BQL9ueyYVtqG7GvQg/s1600/antilope.wmv"><param name="movie" value="http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fv6.nonxt8.googlevideo.com%2Fvideoplayback%3Fid%3D0ce52be91576c910%26itag%3D18%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1301280179%26sparams%3Did%2Citag%2Cip%2Cipbits%2Cexpire%26signature%3D980E168F823E00B745F6D71D48EAD9BB4BBD6F3A.1DDB231BBDDB84FFD78C34955CB1186B895749BC%26key%3Dlh1" />
<param name="bgcolor" value="#FFFFFF" />
<embed width="320" height="266" src="http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fv6.nonxt8.googlevideo.com%2Fvideoplayback%3Fid%3D0ce52be91576c910%26itag%3D18%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1301280179%26sparams%3Did%2Citag%2Cip%2Cipbits%2Cexpire%26signature%3D980E168F823E00B745F6D71D48EAD9BB4BBD6F3A.1DDB231BBDDB84FFD78C34955CB1186B895749BC%26key%3Dlh1" type="application/x-shockwave-flash"></embed></object></div>

Wireframe Toolbar
	Contiene 1464 íconos de 16x16, 32x32 y 48x48, en formato PNG. descargar

La particularidad de este set es que incluye tambien 488 íconos en formato SWF tanto en su versión white como en su versión black.

Actualizar un navegador es fácil, basta hacer click cuando nos lo indican pero, cuando se trata de un cambio de versiones importante, lo mejor es hacerlo de manera limpia, borrando todo lo posible y de ese modo, evitar que se siga juntando basura e incluso, eliminar esos errores que se van acumulando con el tiempo. Claro que, antes de borrar nada, lo mejor es estar absolutamente seguros que hemos guardado todos los datos que queremos preservar.

¿Por qué actualizar Firefox e instalar la versión 4? Porque eso es lo que hay que hacer siempre, no es un tema de consumismo sino de cuidar las herramientas que usamos y, en este caso, sumarnos a una serie de nuevas características que luego, podremos aplicar en nuestros sitios.

TRANSICIONES

Básicamente, hay tres tipos de datos que normalmente queremos mantener: los marcadores, los nombres de usuario y contraseñas de los distintos servicios y las extensiones.

Si estamos utilizando Firefox Sync para sincronizar nuestra información, no necesitaremos agregar la extensión ya que Firefox 4 lo tiene integrado pero, tengamos a mano los datos de la cuenta; nombre, contraseña y clave. Si no los recordamos, puede irse a Herramientas | Opciones | Seguridad y hacer click en Contraseñas Guardadas; nos mostrará la lista y con otro click en Mostrar Contraseñas las tendremos visibles; allí está todo.

Sea com sea, los marcadores también pueden exportarse desde el menú Marcadores y se guardan como un archivo llamado bookmarks.html que luego, con el proceso inverso, podemos importar. No pasa lo mismo con las contraseñas, para eso necesitaríamos alguna extensión como Password Exporter.

Las extensiones podremos instalarlas otra vez así que basta saber cuáles son las que usaremos pero, algunas de ellas tienen datos así que convendría repasarlas o incluso, hacer una copia de nuestro Perfil que en Windows, se encuentra en:
C:\Documents and Settings\nombreUsuario\Datos de programa\Mozilla\Firefox\Profiles\

Por ejemplo, allí veremos una carpeta con los scripts de Greasemonkey llamada gm_scripts, o los datos de otras extensiones en archivos de extensión .sqlite como Stylish (stylish.sqlite) o Scribefire (scribefire.sqlite).

¿Listo? Repasamos, nos aseguramos de tener todo y ahora sí, desinstalamos el navegador indicando que se borre toda la información y datos personales guardados.

Luego, instalamos la nueva versión que, como siempre, está disponible en los repositorios del mismo Mozilla: Firefox 4.0 para Windows, Firefox 4.0. para Mac, Firefox 4.0 para Linux.

Para quienes quieran probar antes, en Blogtecnia podemos encontrar la versión portable de Firefox 4 que no requiere instalación.

Si todo esto resulta complicado, una alternativa es instalar y ejecutar MozBackup, un programa externo muy liviano que nos permitirá hacer una copia de seguridad del perfil de cualquier producto de Mozilla, incluyendo configuración, marcadores, historial, extensiones, contraseñas guardadas, cookies, formularios, listas de descarga y los archivos de datos de las diferentes extensiones.