El nuevo YouTube

YouTube está probando una nueva versión de su reproductor que permitiría saltar a cualquier parte del vídeo aún cuando no se haya descargado completamente.

En cada uno, aparecerían unos 10 thumbnails de vínculos relacionados y se podrían ejecutar directamente sin tener que recargar o esperar que terminen. Asi mismo, habría dos flechas para avanzar o retroceder en la lista de vídeos, desde el mismo reproductor.

El botón del menú daría acceso al código para incrustralo.

REFERENCIAS:

googlesystem

popuri.us es una herramienta para verificar la "popularidad" de un sitio, basado en los ranking (Google PageRank, Alexa Rank, Technorati, etc.), los marcadores sociales (del.icio.us, etc), los suscriptores (Bloglines, etc), etcétera, etcétera, etcétera.

Una vez que accedemos a la página, basta colocar la URL del sitio para obtener el resultado en forma de gráfico:

Proveen un widget que puede incrustarse en cualquier página web, incluyendo Blogger y no hace falta registrarse.

ver la versión actualizada20 años no es nada pero 40, SI

Estos son algunos plugins para agregar a la caja de búsqueda de Firefox o Internet Explorer 7. Para instalarlos, basta hacer click en los vínculos y autorizar que sea agregado.

Google by keyboard
Busca en Google y permite navegar en las páginas de resultado utilizando el teclado como en Gmail.

GCal (sólo para Firefox)
Busca en los eventos de Google Calendar.

Gmail
Busca en los mensajes de Gmail.

Google Maps
Busca un lugar, utilizando los mapas de Google.

YouTube
Busca vídeos en YouTube.

everystockphoto.com
Utilizando EveryStockPhoto.com, busca imágenes en Flickr, stock.xchang y otros servicios.

REFERENCIAS:

the Mycroft project

lifehacker

Ignasi nos muestra en El meu mon My world, la forma de agregar una sección en la sidebar de Blogger.

Hay que aclarar dos cosas, una sección no es una nueva sidebar como se ve normalmente sino una especie de clón de la primera que se ubicará justo debajo de esta. Al definirla, podemos darle propiedades diferentes y hacer que el blog sea gráficamente más flexible.

Por otro lado, los códigos no se van a adaptar a cualquier plantilla (eso es imposible) pero están lo suficientemente detallados como para que podamos entender el concepto.

Luego de hacer el correspondiente backup de la plantilla, vamos a DISEÑO, EDITAR HTML y marcamos la opción "Expandir elementos".

Allí, buscamos esto:

/* Variable definitions ====================

Esta es la parte de estilo que define las variables utilizadas por Blogger para que podamos modificar colores y fuentes desde la parte de diseño, sin necesidad de escribir directamente en la plantilla.

Ahí, agregamos lo siguiente:

<Variable name="bottomSidebar2BgColor"
description="Bottom Sidebar Two Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="bottomSidebar2TextColor"
description="Bottom Sidebar Two Text Color"
type="color" default="#666" value="#666666">
<Variable name="bottomSidebar2LinkColor"
description="Bottom Sidebar Two Link Color"
type="color" default="#475" value="#447755">
<Variable name="bottomSidebar2VisitedLinkColor"
description="Bottom Sidebar Two Visited Link Color"
type="color" default="#798" value="#779988">

Luego, dentro de la misma hoja de estilo, buscamos esto:

/* Sidebar Boxes -------------------------*/

o, de no existir, cualquier otro lugar es aceptable, siempre y cuando esté debajo de las otras definiciones de la sidebar. Ahora, agregamos las propiedades que tendrá la nueva sección:

.sidebar2 .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

.widget-content {
margin-top: 0.5em;
}

#sidebarbottom-wrap3 {
background: $bottomSidebar2BgColor
url("archivo")
no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $bottomSidebar2TextColor;
}

#sidebarbottom-wrap4 {
background: transparent
url("archivo")
no-repeat left bottom;
padding:8px 0px 8px;
}

#sidebar2 {
background: transparent
url("archivo")
repeat-y;
color: $bottomSidebar2TextColor;
}

#sidebar2 h2 {
color: $bottomSidebar2TextColor;
border-bottom: 1px dotted $bottomSidebar2TextColor;
margin-bottom: 0.5em;
}

#sidebar2 a {
color: $bottomSidebar2LinkColor;
}

#sidebar2 a:hover, #sidebar2 a:visited {
color: $bottomSidebar2VisitedLinkColor;
}

.sidebar2 h2 {
margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;
}

.sidebar2 ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar2 ul li {
background: traanpsrent url("http://www.blogblog.com/rounders4/icon_arrow_sm.gif")
no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}

.sidebar2 p {
margin:0 0 .6em;
}

Como se ve, básicamente, se repiten las mismas propiedades que tenemos para la sidebar existente, excepto que a esta la llamaremos sidebar2.

Luego, justo antes de:
<div id='footer-wrap1'><div id='footer-wrap2'>
agregaremos el código HTML:

<div id='sidebarbottom-wrap3'>
<div id='sidebarbottom-wrap4'>
<b:section class='sidebar2' id='sidebar2'></b:section>
</div>
</div>

Una vez que guardamos la plantilla, en el la primera solapa de diseño aparecerá la nueva sección y desde allí podremos modificar colores y otros parámetros.

Todos estamos familiarizados con la estructura de un vínculo:

<a href="direccion_destino">CLICK</a>

Pero hay muchas ocasiones en las que debemos utilizar los vínculos para "ejecutar" alguna instrucción y no para dirigirnos a una página. En estos casos, lo que utilizamos son los llamados "eventos" de JavaScript para llamar a una función. Por ejemplo:

<a href="???" onclick="funcion;">CLICK</a>
<a href="???" onmouseover="funcion;">ALGO</a>
<a href="???" onmouseout="funcion;">ALGO</a>

Es entonces que nos encontramos con un dilema ¿qué dato colocar en el atributo href?

Por lo general, los ejemplos que encontramos en la red nos dicen que utilicemos el signo pound (#), pero esto no es del todo correcto ya que ese símbolo es el mismo que identifica los nombres de los vínculos internos y, por lo tanto, confunde a los navegadores.

La alternativa es colocar como atributo, el valor: javascript:void(0);:

<a href="javascript:void(0);" onclick="funcion;">CLICK</a>

Esta instrucción, le indica al navegador que el vínculo "apunta a ninguna parte" y, por lo tanto, no debe hacerse nada.

Hasta no hace mucho, esto era suficiente, pero, ciertas modificaciones en el desarrollo web han hecho que no siempre sirva, sobre todo en Internet Explorer que, desde sus páginas de ayuda, recomienda no utilizar Javascript en el atributo href.

La solución definitva del tema es, volver al href="#" pero, agregándole al evento, una instrucción final:

<a href="#" onclick="funcion;return false;">CLICK</a>

return false informa al navegador que la acción de evaluar el atributo href no debe ser ejecutada y, que no hay nada más que hacer.

En estos dos ejemplos pueden verse las diferencias, ambos ejecutarán lo mismo, cambiarán el color de un texto:

SIN RETURN

ESTE ES EL TEXTO DE EJEMPLO

CON RETURN

El código de la izquierda es el siguiente:

<a href="#" onclick="getElementById('nombre').style.backgroundColor='#FF0000';">
  SIN RETURN
</a>

En el caso de Blogger, el vínculo generado por # es:
http://URL.blogspot.com/#, a menos que lo hayamos editado con la opción Redactar, en cuyo caso se generará una dirección tipo:
http://www.blogger.com/post-create.g?blogID=XXXXXXXX.

El código de la derecha es el siguiente:

<a href="#" onclick="getElementById('nombre').style.backgroundColor='#0000FF';return false;">
  CON RETURN
</a>

Y si, ahora Google compró Panoramio. Eso es lo que dicen en The Official Google Blog y lo que se muestra en la página principal del sitio de origen español.

Panoramio es un sitio que permite geolocalizar fotografías digitales, guardarlas y organizarlas en Google Earth y Google Maps.

Eduardo Manchón uno de los fundadores de la empresa afirma en su blog "estamos muy, pero que muy contentos, de anunciar que Panoramio va a ser adquirido por Google".

Aparentemente, el equipo que hoy maneja el producto lo seguirá haciendo y existe la opción de cancelar la transferencia de datos a la nueva compañía. En ese caso, las fotos serán borradas y la información no será incorporada a la base de datos de Google.