Los nuevos reproductores de YouTube

YouTube ha rediseñado su página y también su reproductor. Eso es evidente pero lo que tal vez muchos no sepan es que si bien desde hace mucho tiempo podíamos crear un reproductor personalizado donde insertar listas de reproducción, ahora también podemos personalizar los reproductores individuales cuando los incrustamos en una página web.

Podemos definir los colores, mostrar o no mostrar los videos relacionados o establecer si se comenzarán a reproducir de manera automática. Todo esto lo hacemos agregando los parámetros en la dirección URL del archivo.

Esta es una dirección normal:

http://www.youtube.com/v/FI76sKLMkMU

Esta es una dirección que incluye parámetros de color:

http://www.youtube.com/v/FI76sKLMkMU&color1=0x006699&color2=0x54abd6

donde color1 y color2 puede ser cualquier color en formato hexadecimal

Otros parámetros posibles:

border=0 | border=1: se el valor es 1, se muestra un borde alrededor del video
rel=0 | rel=1: se el valor es 0, no se muestran los videos relacionados
autoplay=0 | autoplay=1: se el valor es 1, el video comienza a reproducirse automáticamente

0x000000&color2=0x101921&border=0	color1=0x006699&color2=0x54abd6&border=1

Ya que estamos un poco obsesionados con esto del PageRank y las arbitriaridades de Google, en Emezetablog hay un artículo muy interesante donde nos explican cuáles son las técnicas utilizadas por Google para "filtrar webs", es decir, establecer su "importancia".

Este es un copypasteado bastante alevoso:

Google Sandbox: es donde "guarda" los sitios nuevos durante algún tiempo (entre 6 y 12 meses). Esto lo realiza para que sitios nuevos no lleguen a los primeros resultados hasta tener cierta "experiencia" ya que la mayoría de ellos no llega a un año de vida. Google utiliza un criterio llamado TrustRank donde asigna a los sitios cierta autoridad dependiendo de las que le enlazan.

Google -30: con este filtro, penaliza por usar técnicas de spam como páginas Goorway o Cloaking (mostrar webs diferentes al usuario y a los buscadores), redireccionamientos mediante JavaScript o Meta-Redirecciones, spam en libros de visitas o blogs. Si esto es así, la pena implica descender unos 30 puestos y puede ser apelada mediante este formulario.

Anti Google Bombing: esta técnica implicaba que muchos usuarios se ponían de acuerdo para enlazar una determinada página con la misma palabra y esa web pasaba a ser la primera cuando se buscaba la palabra.

Google Bowling: Google quita algunos puntos cuando una web recibe enlaces desde ciertos sitios catalogados como malos. Muchos intentaban aprovecharse de este tipo de cosas para perjudicar la web de la competencia.

Contenido duplicado: si una página tiene contenido duplicado, Google realiza una serie de comprobaciones con el caché, enlaces y demás, para determinar cuál es la que está realizando un plagio, para entonces devaluarla en las páginas de resultados.

Resultados Suplementarios: son una base de datos secundaria donde Google añade ciertas webs o zonas concretas de una web porque considera que no es tan importante como otras. También puede repercutir ocultando como resultados omitidos. Antes existia una forma de ver las páginas que teníamos incluídas en la base de datos de resultados suplementarios de Google. Ahora ya no.

Google Trust Rank: es un sistema basado en lazos de confianza. Una web es buena si la enlazan webs que son buenas. Factores como la edad del sitio (más antigua, más importante), la cantidad de enlaces con autoridad, los enlaces salientes de la página, la estructura de la URL, etc.

Filtro de "links.htm": Google penaliza ligeramente determinados sitios que tienen páginas llamadas links.htm o links.html. Esto no parece estar confirmado.

Filtro Anti-Granjas de enlaces: las llamadas linkfarms son páginas de sitios donde sólo existen enlaces que normalmente no tienen ninguna relación entre si. Estos sitios son estudiados por el filtro de Google, marcados y posiblemente baneados.

Filtros de enlaces (varios): existen varios filtros relacionados con la gestión de enlaces de un sitio; filtro de enlaces recíprocos (webs que se enlazan mutuamente), filtro co-citation (enlaces salientes a páginas de casinos o porno), filtro de enlaces y paginas (detectan cualquier alteración no natural en el flujo de enlaces de un sitio), etc.

Filtro de estado del sitio web: también posee varios filtros con el que valora la autoridad de un sitio con respecto a algunas características técnicas como enlaces rotos (una página con muchos enlaces que no funcionan o no son indexables no es deseable), carga lenta (una página que siempre tarde mucho en cargar no será nunca de los primeros resultados), etc. Dependiendo de la calidad (constante) de dichas características, aumentarás de posición en las páginas de resultados.

Filtro de optimización extra: es un filtro que se encarga de revisar que los optimizadores de páginas webs no se pasan con los trucos. Para Google todo debe estar en su estado natural y su justa medida. Si detecta que la densidad de palabras clave es demasiado exagerada, demasiados meta tags, etc. Hay que tener cuidado con la optimización SEO.

Filtro Google -950: aparentemente es un filtro reciente que hace descender 950 puestos en las páginas de resultados. No se sabe mucho acerca de este filtro, pero parece que muchos webmasters están encontrandose con él.

Filtro Click through en SERPs: es un filtro que, dependiendo de los clicks que se hagan en la página en cuestión de la página de resultados, hará variar la posición de dicho sitio.

Todo esto debe tomarse ente comillas. Muchas personas tienen sus teorías acerca de la existencia (o no existencia) de cada filtro.

Algunas aclaraciones a dudas que me han consultado por mail respecto de Mostrar los títulos en la barra de navegación.

¿Qué diferencia un blog de una página web "normal"? Muchas cosas pero, una de las que parece confundir más a la hora de modificarlo es la manera en que podemos navegar en él.

Cuando hacemos click en cualquiera de los enlaces internos de un blog, el navegador nos muestra una página y si utilizamos el menú Ver Código Fuente, veremos una serie de instrucciones HTML pero, si observamos con cuidado, notaremos que se parece algo al código de nuestra plantilla y, tal vez, reconozcamos un par de líneas pero, nada más, el resto ¿de dónde sale?

Eso que vemos y que termina siendo lo que los navegadores muestran es una mezcla de cosas: los datos de nuestra configuración + los datos de los elementos que hayamos agregado + los posts + los comentarios + la plantilla. Cada una de esas partes son independientes entre si y sólo se juntan cuando se genera la página. Eso es lo que se llama: una página dinámica.

Las páginas dinámicas son páginas HTML creadas a partir de lenguajes de programación ejecutados por un servidor web, en este caso, Blogger. Este código HTML se modifica o se adapta a las diferentes solicitudes de los usuarios y el resultado mostrará diferentes contenidos. Traducido al castellano, cuando hacemos click en los archivos del blog, Blogger crea una página, cuando hacemos click en las etiquetas crea otra, cuando hacemos click en la página principal otra, etc, etc, etc.

Un sitio web "normal" es un conjunto de páginas estáticas, cada una es un archivo que debemos modificar manualmente para enlazarlo con otros. Un blog es un conjunto de páginas dinámicas que se modifican cada vez que un usuario realiza alguna acción.

Cuando navegamos en un blog de Blogger hay cuatro posibilidades diferentes:

• estamos en la página principal
• estamos en una página individual (un post)
• estamos en una página de archivos (posts de cierta fecha)
• estamos en una página de etiquetas (posts relacionados)

Al final de cada una de ellas, por defecto, aparecen unos enlaces que nos permiten la navegación: ir hacia adelante, ir hacia atrás o ir al inicio ¿Adelante o atrás de que? pués en el orden cronológico porque un blog es básicamente eso, una serie de posts ordenados cronológicamente.

Cuando hacemos click en esos enlaces, Blogger nos mostrará otra página con las mismas características que la primera es decir, si estamos en un página individual nos mostrará otra página individual, si estamos en una página de etiquetas nos mostrará otra página de etiquetas.

El código standard de esa sección en el siguiente:

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

 si hay una página siguiente
 <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
     enlace a la página siguiente
     <a class='blog-pager-newer-link'
           expr:href='data:newerPageUrl'
           expr:title='data:newerPageTitle'>
       <data:newerPageTitle/>
     </a>
   </span>
 </b:if>

 si hay una página anterior
 <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
     enlace a la página anterior
     <a class='blog-pager-older-link'
           expr:href='data:olderPageUrl'
           expr:title='data:olderPageTitle'>
       <data:olderPageTitle/>
     </a>
   </span>
 </b:if>

 y el enlace a la página principal
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <a class='home-link' expr:href='data:blog.homepageUrl'>
     <data:homeMsg/>
   </a>
 <b:else/>
   <b:if cond='data:newerPageUrl'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <data:homeMsg/>
     </a>
   </b:if>
 </b:if>

</div>
<div class='clear'/>
</b:includable>

donde:

<data:newerPageUrl/> es la dirección hacia adelante
<data:newerPageTitle/> es el texto "Entradas más recientes" y que muchas veces cambiamos por una imagen
<data:olderPageUrl/> es la dirección hacia atrás
<data:olderPageTitle/> es el texto "Entradas antiguas" o una imagen
<data:blog.homepageUrl/> es la dirección del la página principal
<data:homeMsg/> es el texto "Página principal" o una imagen

También hay una serie de propiedades por defecto que colocan un enlace a la derecha, otro a la izquierda y otro en el centro:

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;}

Tanto data:newerPageUrl como data:olderPageUrl son direcciones URL que calcula Blogger y cuyo formato varía de acuerdo al tipo de navegación que estemos haciendo.

En la página principal será algo así:
http://nombreBlog.blogspot.com/search?updated-max=fechaThora&max-results=cantidad

En una página individual:
http://nombreBlog.blogspot.com/año/mes/tituloPost.html

En una página de categorías:
http://nombreBlog.blogspot.com/search/label/etiqueta?updated-max=fechaThora&max-results=cantidad

En una página de archivos:
http://nombreBlog.blogspot.com/fecha_archive.html

A los efectos prácticos, podemos decir que hay sólo dos modelos de páginas, las de post individuales y todas las otras. Esto es así ya que sólo hay una forma de indicarle a Blogger en que tipo de páginas mostrar ciertas cosas, utilizando los llamados códigos condicionales:

<b:if cond='data:blog.pageType == "item"'>
 esto sólo se ejecuta en una página individual
</b:if>

<b:if cond='data:blog.pageType != "item"'>
 esto se ejecuta cuando NO es una página individual
</b:if>

Son instrucciones como esas las que hacen que las páginas generadas sean diferentes y, en realidad, casi no hay restricciones al respecto y podrían utilizarse más ampliamente. Por ejemplo, podría haber headers diferentes o mostrar u ocultar la sidebar completa.

Deja Vu es un sitio donde podemos experimentar internet tal y como era en otras épocas ya que emula los navegadores de la prehistoria: Mosaic, Netscape Navigator, Internet Explorer y otros.

A veces tarda un poco en cargarse pero vale la pena hacerlo.

El sitio no sólo es un emulador sino que incluye un área informativa muy interesante. En la sección Timeline podemos la historia de internet desde 1992 hasta la fecha.

Y en el Principio fue la Palabra y la Palabra era ASCII

"In the beginning was the Word, and the Word was ascii encoded, typically displayed in monochrome courier on a black screen"

Hace unos días, en uno de los artículo sobre Posts Relacionados, hubo dos comentarios que proponían algo interesantes:

Joseph preguntaba:
¿Conoces alguna forma de poner algo similar a los links de "Anterior y Siguiente" que tiene Blogger, pero en lugar de eso que muestre los titulos de las entradas... así como:
Siguiente: "Blogger: Posts relacionados (1)"
Anterior: "Blogger: Posts relacionados"?

Y Kurodesu agregaba:
Yo creo que sería cuestión de por medio de Javascript dividir el link a partir de los "-" y deshacerse de lo demás.

Estuve dándole vueltas al asunto y hay una forma de hacer esto con bastante sencillez pero, el resultado no es 100% perfecto.

El problema surge porque uno de los secretos mejor guardados del universo es la forma en que Blogger guarda los títulos del post anterior y el post siguiente. Parece ser un secreto de estado, no hay ninguna referencia la tema en ninguna parte, sólo hay preguntas y la respuesta más clara al respecto fue: "no sé, habría que preguntarle a los desarrolladores de Blogger".

Por lo tanto, nos encontramos con una limitación, sólo podemos usar los datos a los que sí tenemos acceso y ese dato nos da una dirección URL de este tipo:

http://nombreBlog.blogspot.com/año/mes/tituloPost.html

Parece no haber problema pero, lo hay. Por un lado, el título del post y la dirección URL (permanent link) son cosas diferentes. Si creamos un post con un cierto título y lo publicamos, la primera vez que lo hagamos, se generará una dirección. Si posteriormente lo editamos y cambiamos el título, Blogger lo hará perfectamente pero NO cambiará la dirección URL. Esto mismo pasará si publicamos un post sin título; se generará la dirección una vez y será inmutable. Para modificarla deberemos eliminar el post y volver a publicar uno nuevo.

A esto, se le agrega el problema de los caracteres especiales. Por ejemplo, ninguna dirección URL contendrá acentos, signos de interrogación o de admiración, comas, etc.

De ¿Blogger offline? podremos leer blogger-offline
De ¿A dónde va YouTube? podremos leer dnde-va-youtube

Por último, esto sólo podrá hacerse en las páginas individuales porque cualquier otra abre una página con una lista de posts y, por lo tanto, no hay titulos.

Si pese a todas estas limitaciones queremos hacerlo, el truco es bastante sencillo, debemos "leer" dos datos que nos provee Blogger y que se encuentran en la parte de navegación de la plantilla:

<data:newerPageUrl/> es la dirección hacia adelante
<data:olderPageUrl/> es la dirección hacia atrás

Y luego "interpretarlas" y "escribirlas" en lugar de los datos por defecto:

<data:newerPageTitle/> es el texto "Entradas más recientes"
<data:olderPageTitle/> es el texto "Entradas antiguas"

Vamos por partes, primero que nada, modificaremos la plantilla, marcando la opción expandir artilugios y buscamos el bloque correspondiente. Por defecto, se verá algo así:

<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: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:title='data:olderPageTitle'>
        <data:olderPageTitle/>
      </a>
    </span>
  </b:if>

  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
      <data:homeMsg/>
    </a>
  <b:else/>
    <b:if cond='data:newerPageUrl'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <data:homeMsg/>
      </a>
    </b:if>
  </b:if>

</div>
<div class='clear'/>
</b:includable>

Todo lo que haremos será modificar esas líneas resaltadas. La primera, contiene el enlace a las páginas siguientes:

<b:if cond='data:blog.pageType == "item"'>
  <a class='blog-pager-newer-link'
      expr:href='data:newerPageUrl'
      expr:title='data:newerPageTitle'>
    <script language='javascript'>
      var navURL = &quot;<data:newerPageUrl/>&quot;;
      escribirTitulo(navURL)
    </script>
  </a>
<b:else/>
  <a class='blog-pager-newer-link'
      expr:href='data:newerPageUrl'
      expr:title='data:newerPageTitle'>
    <data:newerPageTitle/>
  </a>
</b:if>

La segunda contiene el enlace a las páginas anteriores:

<b:if cond='data:blog.pageType == "item"'>
  <a class='blog-pager-older-link'
      expr:href='data:olderPageUrl'
      expr:title='data:olderPageTitle'>
    <script language='javascript'>
      var navURL = &quot;<data:olderPageUrl/>&quot;;
      escribirTitulo(navURL)
    </script>
  </a>
<b:else/>
  <a class='blog-pager-older-link'
      expr:href='data:olderPageUrl'
      expr:title='data:olderPageTitle'>
    <data:olderPageTitle/>
  </a>
</b:if>

En ambos casos, usamos un código condicional para que el script sólo se ejecute si estamos en una página individual; en cualquier otra, seguiremos utilizando el código por defecto.

Por último, agregaremos el script antes de </head>:

<script type='text/javascript'>
function escribirTitulo(navURL) {
  // dividimos la dirección URL en trozos con la barra inclinada como separador
  var partes = navURL.split(&#39;/&#39;);
  // la última, será el nombre de la página (por ejemplo indice-blogger.html)
  auxiliar=partes[partes.length-1]
  // reemplazamos todos los guiones por espacios
  auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
  // y eliminamos la extensión .html
  nombrePagina = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

  // formateamos el texto y ponemos la primera letra en mayúsculas
  var primerLetra = nombrePagina.substring(0, 1).toUpperCase();
  var elResto = nombrePagina.substring(1, nombrePagina.length).toLowerCase();
  nombrePagina = primerLetra + elResto;

  // y escribimos el texto
  document.write(nombrePagina);
}
</script>

Si quisiéramos poner el texto todo en mayúsculas, deberíamos cambiar la parte del formateo del texto por esto:

nombrePagina = nombrePagina.toUpperCase()

En este momento, está aplicado en este blog, no se si lo mantendré o lo sacaré pero, por ahora puede vérselo funcionando sin mayores problemas salvo las limitaciones antes citadas.

Se podría decir que todo comenzó aquí hace 20 años.

12 Febrero del 1987, Viña del Mar, Chile.



Hacer click en la imagen para comenzar.

REFERENCIAS:

Stage6

Descarga directa

Cuando Google comienza a bailar, muchos administradores de sitios web tiemblan, y no lo hacen porque siguen el compás de la música sino porque tiene miedo.

Y esto, si bien en algunos casos es lógico, en otros, yo diría que en la mayoría de los casos no tiene razón de ser simplemente porque el tan famoso PageRank es un número intrascendente que no mejorará ni empeorará lo que hagamos con nuestro blog.

Como curiosidad, pueden consultar las variaciones en DigPageRank; si lo hacen, verán que cualquier blog "normal" en español tendrá un PR promedio de 4. Si el sitio es relativamente nuevo o tiene pocos enlaces, tendrá un PR de 3, si es un blog con más tiempo online o muy enlazado, llegará a 5; valores superiores a esos, son muy raros de encontrar salvo en sitios comerciales o semi-comerciales.

Tampoco sería extraño que se encontraran con valores de 0, 1 o 2. En general eso ocurre cuando no hay datos o es un sitio muy nuevo. Cualquier valor por pequeño que sea no significa ningún tipo de fracaso, eso, sólo lo podemos medir de manera personal y dependerá pura y exclusivamente de nuestra intenciones.

También es cierto que algunos valores son raros. Es difícil de entender cómo calcula Google si es que calcula algo y todo esto no termina siendo una ruleta donde se sortean numeritos. Buscando en la web, pueden verse algunos casos con PR estrafalarios. Hoy mismo, YouTube mostraba un PageRank de 3 en lugar de su acostumbrado 8:

Pero también hay otros casos. Meses atrás, este blog tenía un exagerado PR5. Muy llindo para el ego de cualquiera pero absolutamente irreal. Durante mucho tiempo, el blog de Gem@ tuvo PR3 y recién ahora parece que lo van a establecer como PR4. Cualquiera que mire blogs verá enlaces y referencias a su página en todos lados, yo, la veo hasta en la sopa ¿cómo puede ser que Google no lo viera?

Por el contrario, el blog de Nico parece que bajará de un lógio 5 a un irracional 3

Moraleja: mírenlo, alégrense si el número les gusta, quítenlo si no les gusta pero, no le den demasiado valor y si eso no los conforma, siempre puede recurrirse a una frase de Victor Hugo:

Todo numero es cero ante el infinito.

ver la versión actualizadaEl apocalípsis sólo es un tobogán

¡Ay, ay ay ay ay ay ay! ¿Cómo me puedo resistir a volver a jugar con mi vieja Commodore 64?

The Greatest C64 Games of All Times - Playable Directly In Your Browser! c64.com

Los juegos más conocidos recreados en Java y listos para jugar en el navegador. Y no son uno ni dos ni tres: hay 100

En Blogger in Draft han agregado una nueva posibilidad, insertar un elemento de Google Gadgets.

Al abrirse la ventana se selección se mostrará el mismo directorio utilizado en iGoogle lo que significa que habrá cientos y cientos de alternativas por lo tanto, ruego prudencia y moderación.

REFERENCIAS:

Blogger in Draft

Una consulta del blog Poca Tinta me llevó enterarme de una forma de mostrar los últimos posts publicados que no conocía.

Primero que nada, debemos descargar el script y alojarlo en un servidor propio.

Utilizarlo es sencillo, basta crear un elemento HTML en la sidebar e insertar el siguiente código:

<script src="URL_archivo/marqueeUltimosPosts.js"></script>

<script language="javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var postspeed = 2;
var postheight = 250;
</script>

<script src="URL_blog/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

<div style="text-align:center;">
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='down';">
<img src="URL_imagenHaciaAbajo"/>
</a>
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='up';">
<img src="URL_imagenHaciaArriba"/>
</a>
</div>

Donde los datos que debemos establecer son:

URL_archivo/marqueeUltimosPosts.js
es la dirección donde alojemos el script

URL_blog/feeds/posts/default
es la dirección de los feeds de nuestro blog; en mi caso sería:
http://vagabundia.blogspot.com/feeds/posts/default

URL_imagenHaciaAbajo u URL_imagenHaciaArriba
son las imágenes que sirven de enlace y que permiten que el desplazamiento se realice hacia abajo o hacia arriba.

Los otros valores nos permiten establecer algunos parámetros:

numpost = es la cantidad de post a mostrar (máximo 25)
showpostdate = muestra u oculta la fecha del post (true o false)
showpostsummary = muestra u oculta el texto de los post (true o false)
numchars = cantidad máxima de caracteres del texto del post (máximo 400)
postspeed = velocidad de desplazamiento (mínimo 1 y máximo 10)
postheight = altura en pixeles del elemento (máximo 500)

El script original posee algunas clases CSS específicas para poder personalizarlo gráficamente y le he agregado otras para poder manipularlo mejor. Para utilizarlas, agregamos el estilo justo antes de </head>:

<style type='text/css'>
#marqueeposts  { /* es el bloque completo */
en general esto no es necesario modificarlo
}
.marqueetitle { /* es el título de cada post */
margin: 5px 0 0 0px; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes)
}
.marqueetitle a { /* el título es un enlace */
cualquier propiedad deberá incluir la orden !important, por ejemplo:
color: Beige !important; 
}
.marqueetitle a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
} 
.marqueetext {  /* es el texto de cada post */
margin: 2px 0 10px 0; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes, fuentes)
}
.marqueemore a {  /* es el enlace (leer más) */
cualquier propiedad deberá incluir la orden !important
}
.marqueemore a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
}
.marqueedate {  /* es la fecha del post */
cualquier propiedad deberá incluir la orden !important
}
</style>

El resultado será algo así:

ULTIMOS POSTS

Recientemente me he encontrado con este mismo hack explicado en El Escaparate de Rosa. Allí la versión del script parece ser una traducción del original y es levemente distinta. Incluye otras opciones aunque también tiene una pequeña marca de "copyright" algo que, en lo personal, no me gusta.

Google es un Dios Virtual y exige obediencia ciega por lo tanto, no sólo es arbitrario si no que también fomenta la delación. De hecho, existe un formulario para denunciar la compra-venta de enlaces y si bien se aseguraba que la información recogida se utilizaba para mejorar los algoritmos del buscador, también es probable que se utilice parar penalizar los sitios web tal y como está ocurriendo ahora.

"Si vendes enlaces en tu web tu Page Rank será devaluado" (mecagoenlos.com)

El caso más conocido es el de la Universidad de Stanford que lo hace a 350 dólares por enlace (bajó de PR7 a PR5) y puede comprobarse comparando los datos del datacenter 64.233.179.99 (antiguo) y el 64.233.183.17 (nuevo valor).

Todo comenzó con algunos sitios específicos y otros no muy relevantes; ahora le tocó el turno a los blogs y sitios web importantes lo que se suma a la posibilidad de que Google también esté actualizando el PageRank general.

Cuando hablan de venta de enlaces también incluyen enlaces masivos a otros blogs asociados y tal vez ciertas prácticas artificiales para el intercambio de links.

¿A quién le sirve el PageRank? Creo que más que nada, a Google. Se habla del PageRank, se discute sobre el PageRank, cientos de sitios aconsejan como posicionarse, hasta existe un actividad específica llamada SEO (Search engine optimization) que se dedica exclusivamente a eso. Escriban SEO en un buscador y se encontrarán 178 millones de resultados.

Todo se resolvería si ese valor lo usaran internamente y no fuera público pero, nada mejor para Google que hablemos de Google, nada mejor para Google que lo transformemos en un Dios Real.

La fama dura 15 minutos y podemos obtenerla por descubrir una cura para el cáncer, aparecer en Gran Hermano o asesinar a 324 personas. La popularidad es un valor estadístico, un número como cualquier otro. El PageRank es una mezcla de ambas cosas, un dato como cualquier otro. Prestigio, respeto, esas son palabras que no aparecen en los rankings.

REFERENCIAS:

google.dirson.com

Blogger ha implementado una nueva opción para que no perdamos el rastro de los comentarios que hacemos en cualquier otro blog.

En el formulario, basta marcar Email follow-up comments to para que, cuando se agreguen comentarios en esa entrada, nos avisen por medio de un EMail.

REFERENCIAS:

Google Operation System

Vuelvo al primer hack de los Posts Relacionados porque es el que me parece que funciona mejor o, por lo menos, con el que consigo hacer lo que yo pretendo. Pero, en lugar de crear un elemento HTML y colocarlo en la sidebar o debajo del área de posts, voy a incluirlo directamente en la plantilla como otra línea del pie de página de los posts que se mostrará exclusivamente en las páginas individuales.

Para esto, sigo el procedimento explicado anteriormente: coloco el script en el encabezado de la plantilla y la llamada en la sección categorias pero, aquí me detengo y voy a la plantilla para buscar:

<p class='post-footer-line post-footer-line-3'/>

o el final de las líneas con los pie de página.

Lamento no poder se más claro porque esta parte suele tener demasiadas variaciones en las plantillas; el sector del que hablo es algo así:

<b:includable id='post' var='post'>
   <div class='post'>
      .......
      <div class='post-body'>
         .......
      </div>
      <div class='post-footer'>
         <p class='post-footer-line post-footer-line-1'>
            ....... generalmente el autor del post .......
         </p>
         <p class='post-footer-line post-footer-line-2'>
            ....... generalmente las etiquetas del post .......
         </p>
         <p class='post-footer-line post-footer-line-3'>
            ....... generalmente sin uso .......
         </p>
         y aquí agregaremos el nuevo código
      </div>
   </div>
</b:includable>
</b:widget>

Esa nueva línea tendrá el siguiente código:

<div class='post-footer-line post-footer-line-4'>
   <b:if cond='data:blog.pageType == "item"'>
      <script type="text/javascript">
         removeRelatedDuplicates();
         printRelatedLabels();
      </script>
   </b:if>
</div>

Ahora, intentaremos personalizarla gráficamente con CSS y antes de </head> colocaremos las propiedades de estilo necesarias que serán variadas pero muestro las que yo utilizo para que sirva de referencia:

<style type='text/css'>
   .post-footer-line-4 {
      margin: 0 0 10px 20px;
      background: transparent url(URL_ImagenFondo) no-repeat 0% 10%;
   }
   .post-footer-line-4 ul {
      margin: 0pt;
      padding-left: 10px;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
   }
   .post-footer-line-4 ul li {
      margin: 0px 0pt 0px 50px;
      font-size: 11px;
      list-style-image: url(URL_ImagenFlecha);
      list-style-position: outside;
      list-style-type: none;
   }
   .post-footer-line-4 a, .post-footer-line-4 a:visited {
      font-weight: normal !important;
   }
   .post-footer-line-4 a:hover {
      padding-left: 5px;
      text-decoration: none !important;
   }
</style>

Personalmente, se me plante un último problema.

Si bien el hack permite establecer una cantidad de etiquetas a "evaluar" con el fin de seleccionar algunas de ellas para ser mostradas, esa cantidad no es la cantidad total a mostrar sino la cantidad máxima por cada etiqueta:

&amp;max-results=3

Quiere decir que si hay varias etiquetas, es muy probable que la lista mostrada pueda contener muchos posts, a mi gusto, demasiados.

Así que, una posibilidad es modificar el script para limitar el número absoluto de posts relacionados. Esto lo hacemos cambiando una de las funciones:

function printRelatedLabels() {
   var cuantosPosts = 0;
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   var dirURL = document.URL;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 50) {
      if (relatedUrls[r] != dirURL) {
         document.write('<li><a href="' + relatedUrls[r] + '" title=" ' + relatedTitles[r] + '">' 
           + relatedTitles[r] + '</a></li>');
      }
      if (r < relatedTitles.length - 1) {
         r++;
      } else {
         r = 0;
      }
      i++;
      cuantosPosts++;
      if (cuantosPosts == 3) {
         break;
      }
   }
   document.write('</ul>');
}

Simplemente, vamos contando los posts a medida que se escriben y le decimos que cuando llegue a cierto valor, no continúe. El agregado es lo marcado en color y el dato a personalizar es la cantidad máxima, en este caso 3.

La noticia ha recorrido la web asustando a algunos y preocupando a otros. Google ha cumplido una amenaza que había formulado reiteradas veces: penalizar a los sitios que vendían enlaces o utilizaban técnicas desleales, disminuyéndoles su PageRank.

• SearchEngineJournal (PR7 a PR4)
• Forbes (PR7 a PR5)
• StatCounter (PR10 a PR6)
• Washington Post (PR7 a PR5)
• Washington Times (PR6 a PR4)
• Charlotte Observer (PR6 a PR4)
• Engadget (PR7 a PR5)
• The Stanford Daily (PR9 a PR7)
• AutoBlog (PR6 a PR4)
• ProBlogger (PR6 a PR4)
• Copyblogger (PR6 a PR4)
• Quick Online Tips (PR6 a PR3)
• Search Engine Roundtable (PR7 a PR4)
• Blog Herald (PR6 a PR4)
• SFGate.com (PR7 a PR5)
• Sun Times (PR7 a PR5)
• New Scientist (PR7 a PR5)
• Seattle Times (PR7 a PR4)
• Weblog Tools Collection (PR6 a PR4)
• JohnTP (PR6 a PR4)
• Coolest Gadgets (PR5 a PR3)
• CyberNet News (PR6 a PR4)
  

También se mencionan a otros sitios: johnchow.com, error500, lamateporunyogurt, alt1040, proletarium, uberbin, bitelia, canalpda, abadiadigital, alexsancho, blogsmedia, sigt.

Para muchos de esos sitios, el valor de PR implica pérdidas económicas importantes ya que un valor alto los posiciona mejor en los resultados de Google lo que implica más tráfico y más clicks sobre la publicidad.

Obviamente, se están quejando a más no poder, hablan de libertades y esas cosas pero no nos confundamos, este tema sólo se trata de dinero. En realidad, Google pone las reglas y, si alguien quiere jugar, tendrá que acatarlas, eventualmente encontrarán algún ardid para violarlas pero, si lo descubren no veo motivo de queja.

De cualquier manera, imagino que sólo es cuestión de tiempo, los poderosos seguirán siendo poderoso, los ricos seguirán siendo ricos y el pato de la boda lo pagarán los que no puedan "negociar".

Como se ve, el mundo virtual y el mundo real no son muy diferentes entre si.

REFERENCIAS:

Google Blogoscoped

Esta es una variante para mostrar Posts Relacionados. En este caso, lo único que debemos hacer es agregar el script en la plantilla.

La ubicación depende de cada caso pero, por ejemplo, podemos agregarla como un nuevo bloque dentro del pie de página de los posts. Estos, se identifican con el siguiente código:

<p class='post-footer-line post-footer-line-1'>
   .......
</p>

Y, normalmente, en una plantilla standard, hay tres:

<p class='post-footer-line post-footer-line-1'> </p>
<p class='post-footer-line post-footer-line-2'> </p>
<p class='post-footer-line post-footer-line-3'> </p>

El primero, contiene los datos el autor, el segundo las etiquetas y el tercero no tiene uso y es el que suele emplearse para agregar marcadores sociales y otro tipo de detalles personales.

Busquemos:

<p class='post-footer-line post-footer-line-3'>
   .......
</p>

o bien

<p class='post-footer-line post-footer-line-3'/>

en el primer caso, agregamos el script justo debajo de </p> en el segundo caso, en la línea inmediata ya que quiere decir que no hay contenido.

El código es el siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
   <h2>Posts Relacionados</h2>
   <div id='post-relacionados'/>
   <script type='text/javascript'>
      var inicioBlog = "<data:blog.homepageUrl/>";
      var maxNumberOfPostsPerLabel = 4;
      var maxNumberOfLabels = 10;
      maxNumberOfPostsPerLabel = 100;
      maxNumberOfLabels = 3;
      function listarEntradas(json) {
         var ul = document.createElement('ul');
         var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
         json.feed.entry.length : maxNumberOfPostsPerLabel;
         for (var i = 0; i &lt; maxPosts; i++) {
            var entry = json.feed.entry[i];
            var alturl;
            for (var k = 0; k &lt; entry.link.length; k++) {
               if (entry.link[k].rel == 'alternate') {
                  alturl = entry.link[k].href;
                  break;
               }
            }
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = alturl;
            if(a.href!=location.href) {
               var txt = document.createTextNode(entry.title.$t); 
               a.appendChild(txt);
               li.appendChild(a);
               ul.appendChild(li); 
            }
         }
         for (var l = 0; l &lt; json.feed.link.length; l++) {
            if (json.feed.link[l].rel == 'alternate') {
               var raw = json.feed.link[l].href;
               var label = raw.substr(inicioBlog.length+13);
               var k;
               for (k=0; k&lt;20; k++) label = label.replace("%20", " ");
               var txt = document.createTextNode(label);
               var h = document.createElement('b');
               h.appendChild(txt);
               var div1 = document.createElement('div');
               div1.appendChild(h);
               div1.appendChild(ul);
               document.getElementById('post-relacionados').appendChild(div1);
            }
         }
      }
      function buscarEntradas(query, label) {
         var script = document.createElement('script');
         script.setAttribute('src', query + 'feeds/posts/default/-/'
         + label +
         '?alt=json-in-script&amp;callback=listarEntradas');
         script.setAttribute('type', 'text/javascript');
         document.documentElement.firstChild.appendChild(script);
      }
      var labelArray = new Array();
      var numLabel = 0;
      <b:loop values='data:posts' var='post'>
         <b:loop values='data:post.labels' var='label'>
            textLabel = "<data:label.name/>";
            var test = 0;
            for (var i = 0; i &lt; labelArray.length; i++)
               if (labelArray[i] == textLabel) test = 1;
               if (test == 0) { 
               labelArray.push(textLabel);
               var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
               if (numLabel &lt; maxLabels) {
                  buscarEntradas(inicioBlog, textLabel);
                  numLabel++;
               }
            }
         </b:loop>
      </b:loop>
   </script>
</div>
</b:if>

Al igual que en el primer caso, podemos personalizar este bloque para adaptarlo gráficamente a la plantilla.

favicon.cc, otro sitio para crea favicons online. Podemos hacerlo utilizando una imagen o dibujarlo manualmente.

Eventualmente, también podemos navegar por una nube de tags para ver la lista de íconos ya realizados, editarlos y utilizarlos.

A veces podría ser una buena práctica agregar una lista de posts relacionados con ese que estamos viendo, es una forma de reavivar artículos "viejos" y promover la lectura de nuestro blog.

En Blogger no hay una herramienta específica para esto pero podemos valernos de las que existen, por ejemplo, las etiquetas o categorías.

Primero que nada, vamos a la plantilla y buscamos la etiqueta </b:skin> y justo debajo de esta, agregamos el script. Esto es así ya que debe estar ANTES que cualquier otro script que hayamos definido:

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

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: ' 
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}

//]]>
</script>

Donde relatedTitles.length && i < 20 filtra los posts a mostrar según la longitud de su título. En este caso, si contienen más de 20 caracteres, no serán mostrados. El valor 20 puede ser reemplazado por cualquier otro.

Guardamos la plantilla y marcamos Expandir elementos.

Ahora, debemos buscar la siguiente sección de código:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
aquí agregaremos el código del script
</b:loop>
</b:if>

Eso que está entre <b:loop> y </b:loop> es lo que muestra las etiquetas y generalmente aparece en el pie de página de cada post. Lo que debemos hacer es agregar en el lugar indicado, el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>

Donde max-results=10 es la cantidad máxima de posts que se mostrarán y puede modificarse por el valor que más nos guste aunque es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse. Personalmente, no recomendaría que fueran más de cinco.

Hasta aquí lo que estamos haciendo es decirle que, si estamos en una página individual, se ejecute el script. Por el momento, no veremos resultados de ninguna clase así que nuevamente guardamos la plantilla.

Lo más sencillo sería mostrar todo en un elemento HTML que agregaremos a la sidebar. Le ponemos un título, por ejemplo POSTS RELACIONADOS y escribimos el siguiente código:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Pero, eso no es todo, volvemos a la plantilla, expandimos elementos y debemos editar el elemento que acabamos de crear. Como no lo hemos movido, será el primero de la sidebar pero, lo más sencillo es buscarlo utilizando el título; en este ejemplo, veremos algo así:

<b:widget id='HTMLXX' locked='false' title='POSTS RELACIONADOS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>

Y allí agregamos las dos líneas resaltadas con color.

Ahora sí, todo está listo para probarlo así que guardamos la plantilla por última vez pero, tengamos en cuenta que este hack sólo será visible cuando estemos en una página individual y siempre y cuando haya etiquetas.

Una alternativa sería colocar este elemento debajo de los posts. Sin duda, esa sería la forma perfecta de mostrarlos.

Una vez creado, podemos ir a Elementos de la página, arrastrarlo y moverlo hasta colocarlo debajo del elemento Blog pero, probablemente deberemos personalizarlo para que se adapte a la estética general.

REFERENCIAS:

De todo un Poco en Guate

ACTUALIZACION:
Corregido el problema de la transcripción del código.
También he modificado el script para que en la lista no se muestre el propio post.
Gracias Solrac, excelente.

Picoshot es un sitio que nos permite mostrar miniaturas de páginas web agregando un código HTML individual. Esto, generará una imagen de 120 x 90 en ese lugar.

Hay dos formas de hacerlo:

<img src="http://picoshot.com/thumbnail.php?url=http://ejemplo.com/" />

<img src="http://picoshot.com/thumbnail.php?domain=http://ejemplo.com/" />

donde reemplazamos http://ejemplo.com/ por la dirección URL de la página que queremos mostrar.

El servicio que ofrecen es gratuito y no requiere que nos registremos (más información).

El sitio está en versión Beta así que no esperen resultados inmediatos.

REFERENCIAS:

Noticiastech

Agregar un elemento para mostrar los últimos posts publicados en Blogger es sencillo ya que no hace falta agregar códigos ni crear hacks en la plantilla.

Lo primero que debemos hacer es verificar que las opciones que hayamos establecido para el blog sean las adecuadas; para esto, vamos a Configuración y en la solapa Feed del Sitio verificamos que esté marcado Corto o Completo, cualquiera de los dos es válido:

Allow Blog Feeds Ninguno Corto Completo

Si se desea utilizar FeedBurner, podemos colocar la dirección en el campo Publicar URL redireccionada del feed; sino, la dejamos en blanco.

Ahora, vamos a Diseño y agregamos un elemento Feed:

En la primera ventana, escribimos la dirección correspondiente. Si usamos Feedburner será algo así:

http://feeds.feedburner.com/nombre

sino, utilizamos la que provee Blogger por defecto:

http://nombre.blogspot.com/feeds/post/default

y hacemos click en Continuar

En esta segunda ventana colocamos el título del elemento y marcamos las opciones que nos interesen:

1 2 3 4 5 Cantidad de items a mostrar (máximo 5)

Fechas del elemento (mostrar o no mostrar la fecha)
Autores/fuentes del elemento (mostrar o no mostrar los autores)

Por último, guardamos y ubicamos el elemento donde queremos que se vea:

La compañía Warner anunció que la obra completa de Led Zeppelin estará disponible en versión digital a partir del 13 de noviembre y podrá comprarse y descargarse por internet.

Robert Plant, Jimmy Page y John Paul Jones más Jason, el hijo de John Bonham fallecido en los años 80, ofrecerán un concierto el 26 de noviembre en Londres en homenaje a Ahmet Ertegun, el fundador de la compañía Atlantic Records con la que el grupo firmó su primer contrato en 1968.

Unos 20 millones de fans intentaron conseguir entradas para el concierto que sólo tiene capacidad para 20.000 personas. La página web se encuentra colapsada por las peticiones de entradas, que cuestan 225 dólares.



Hacer click en la imagen para comenzar.

REFERENCIAS:

Stage6

Descarga directa

Google Gears es una extensión que permite crear aplicaciones web para ser utilizadas sin necesidad de estar conectados. Para esto, utiliza una serie de scripts que pueden instalarse tanto en Firefox como en Internet Explorer (más información)

Estas librerías se van actualizando constantemente y, en este momento, ya existe una específica para Blogger: Blogger JavaScript library que nos permitirá crear aplicaciones interactivas con nuestra cuenta: cargar los posts, crearlos o editarlos.

Una prueba de esto lo podemos encontrar en Blog.gears, un editor de Blogger diferente. Una vez que ingresemos por primera vez, los datos se almacenarán para que, en cualquier otro momento, podamos acceder a ellos aún cuando no estemos online.

No es un editor muy avanzado que digamos, es sólo una demostración de una idea que Google aún mantiene en fase Beta. No podemos agregar imágenes ni hay texto enriquecido, además, los acentos se ven mal, pero, no deja de ser una idea interesante y, quién sabe, algo que no tardará mucho en ser una realidad.

Click para ejecutar el video.

REFERENCIAS:

Google Operating System