Google celebra el cumpleaños de Samuel Morse

Hoy cuando he accedido a Google me he encontrado con este logo:

Google lo hace en forma frecuente para celebrar ocasiones especiales, para anunciar o conmemorar acontecimientos y aniversarios mundiales, como la de hoy, en que se celebra el 118 cumpleaños de Samuel Morse y lo hace traduciendo su nombre en puntos y guiones.

Hoy os traigo un vídeo recopilatorio de Youtube que nos muestra varios de los logos que Google ha utilizado para celebrar así fechas conmemorativas.

Google Similar Images

Google a lanzado a través de su proyecto Google Labs el proyecto Similar Images, pero antes de entrar en materia para los que lo desconozcan Google Labs deciros que este es el laboratorio tecnológico de Google en el que se exponen algunas de nuestras ideas favoritas que aún no están preparadas para integrarlas en Google.com.

Se trata de que los usuarios podamos probar el proyecto y les dejemos nuestros comentarios para poder ayudar a mejorarlos.

Pues como os decía una nueva herramientas en fase experimental y que nos puede ser de utilidad es Similar Images,

Como su nombre indica nos facilita una búsqueda de imágenes similares unas a otras. Es decir, si estamos buscando la imagen por ejemplo de la Sagrada Familia en Barcelona y tenemos una pero no es exactamente la que necesitamos, con esta herramienta podremos buscar otras similares que se adecuen mejor a nuestras necesidades. Si quieres ver el resultado de la busqueda, CLICA AQUÍ.

Un poco de humor

Personalizar nuestros comentarios

El pasado 17/04/09 recibí un comentario de Zorra que decía así:

"Hola Sisco: Quisiera saber como puedo lograr que en mi blog mis comentarios aparezcan como los tuyos aquí, es decir de diferente color y la firma sobre el lado derecho? Gracias y besos!"

Ante todo disculpa mi tardanza y ahora nos ponemos manos a la obra:

Las instrucciones que os daré son para la plantilla Mínima y estan extraidas del blog de Rosa. Las explicaré en tres pasos.

1er. Paso: Configurar formulario de comentarios.

Una vez configurado el formulario para ser mostrado como una entrada incrustada a continuación, haremos lo siguiente:

2º Paso: Mostrar los comentarios del autor resaltados.
Accedemos a nuestra plantilla - Edición de HTML - Expandir plantillas de artilugios y buscaremos el código que corresponde al bloque de comentarios y añadiremos el código resaltado en rojo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Seguiremos en nuestra edición de la plantilla y buscaremos:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Una vez localizado el código anterior, a continuació le añadiremos lo que os resalto en rojo:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3D9FF;
}

Gracias a estas últimas líneas podemos personalizarlo a nuestro gusto, color fondo, grosor y color del borde.

3er. Paso: Colocar una firma en cualquier de los lados del comentario.

Una firma similar a la que yo muestro en mis comentarios la obtendréis en My Live Signature.

Si ahora queremos colocar una imagen que sirva como firma de nuestros propios comentarios, y para ello buscaremos esta parte del código anterior y añadiremos lo que os muestro en rojo:

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='url_de_la_imagen_firma'/></p>
</dd>
<b:else/>

Ya solo nos queda añadir antes de ]]></b:skin> este otro código:

 .firma {
display:block;
width: 58px;
height: 32px;
padding-left: 90%;
}

Mediante estas otras líneas podéis controlar el ancho (width) y alto (heigth) de nuestra imagen, en padding-left: 90%; la posición de la misma, el valor left podéis variarlo por rigth o center.

Espero sea de vuestra utilidad y recordad que ante la duda, un buen consejo es hacer siempre una cópia de vuestra plantilla.

Wallpapers coloridos

En Hongkiat.com, nos encontramos con una recopilación de 30 wallpapers con un diseño muy vistoso y colorido.

A ver si os gustan.

Visto en: Hogkiat

Google Street View España

Hace un tiempo que oí hablar de Google Street View, pero no ha sido hasta esta semana que lo he probado.

El servicio 'Street View' de Google desde octubre de 2008 ya funciona en España, concretamente con fotografías de las calles de Madrid, Barcelona, Valencia, Sevilla, Zaragona, Oviedo o Bilbao. Y gracias a este servicio podemos dar una visita en todas estas ciudades y muchas mas a nivel mundial.

Como es habitual en las imágenes de 'Street View', los rostros de los tanseúntes se encuentran borrosos (también las matrículas de los coches) para garantizar la privacidad de estos ciudadanos que se cruzan por la calle con el coche de Google.

Lugares interesantes para ver son:

La Sagrada familia
Catedral de Sevilla
Puerta del Sol de Madrid
Estadio Olímpico de Montjuic (Barcelona)
Monumento de Colón (Barcelona)
Museo Oceanográfico (Valencia)
Estadio Camp Nou (F.C. Barcelona)
Puerta de Alcalá (Madrid)
Estación de Atocha (Madrid)
Y un largo etcétera.

Con Google Street View podemos:

• Dar paseos virtuales: avanza, rota y utiliza el zoom.
• Explorar los paisajes urbanos, los monumentos principales o los puntos de interés.
• Buscar tiendas, restaurantes, parques, hoteles y más.

Aquí os dejo el vídeo que nos explica su funcionamiento.

Visto en: google.dirson.com

Enlace a Google Street View

20.000 visitas

Llevo unos días muy ocupado y como habréis podido comprobar tengo el blog un poco parado, hoy intentando volver a mi normalidad bloguera al acceder a mi blog he tenido una grata sorpresa.
Si el dia 1 de abril de 2009 os comentaba que celebraba el primer aniversario de Tirando de blog, hoy estoy muy contento por haber llegado a las ....

Unos días de descanso

Os deseo lo mejor y si cogéis el coche, mucha precaución!!

Tres columnas en el pie del blog

Hoy he instalado tres columnas en el pie de este blog, ¿Te apetece ponerlas en el tuyo?

Ante todo debemos retirar cualquier elemento que tengamos colocado en el pie del blog desplazándolo momentáneamente a la sidebar.

Accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Cambiaremos la línea <b:section class='footer' id='footer'/> por este código:

<div id='footer-columna-contenedor'>


<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>


<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>


<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>


<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>


<div style='clear:both;'/>

<p>

</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>


<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>


</div>

<div style='clear:both;'/>


</div>

Una vez hemos añadido el código anterior antes de ]]></b:skin> pegaremos este nuevo código.

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

Guardamos los cambios y ya podemos colocar los elementos que habíamos retirado a la sidebar en el sitio que deseemos, el resultado final seria este:

Cambiar de lado la sidebar

Shani me hacia la siguiente pregunta: ¿Como puedo mover una columna wrapper de la dcha al lado izqdo?

A lo que se refiere Shani es como puede mover la sidebar que tiene situada a la derecha de su blog para ponerla en el lado izquierdo.

Para colocar la Sidebar del lado derecho al izquierdo, accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

La parte que permite el ajuste es donde dice float y lo haremos partiendo de left (izquierdo) o right (derecho).


En la parte de código #sidebar-wrapper cambias el float, en este caso lo modificas por right (derecho) y en #main-wrapper, cambias el float por left (izquierdo).

Referente a la pregunta que me hace Shani dejaremos el código de la siguiente forma:

#main-wrapper {
  width: 410px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Y el resultado será este:

1er. Aniversario Tirando de Blog