Verificar la cuenta de Google/Blogger via SMS

Como parece que el tema se está extendiendo, lo mejor es advertir que esto le puede pasar a cualquiera, sin importar si estamos creando una cuenta de Google nueva o si ya tiene años de existencia.

En todos los casos, nos sale un mensaje en donde se nos solicita que verifiquemos que "existimos" utilizando nuestro teléfono celular:

Si es una cuenta nueva y jamás hemos hecho el proceso, tal vez nos parezca una exageración pero si se trata de una cuenta existente, lo más probable es que nos sorprendamos, dudemos o insultemos al árbol genealógico completo de Google. Superado esto, leeremos la página y decidiremos qué hacer ya que las opciones disponibles dependerán del país o región donde estemos.

En principio, bastaría colocar un número de telefonía móvil y ese número debe estar escrito en el formato correcto:

código del pais + 9 (que indica acceso a telefonía móvil) + código del área + número (sin el prefijo)

en el caso de Argentina, Buenos Aires, sería:

54911XXXXXXXX donde XXXXXXXX es el número sin el 15

Hacemos click en Enviar y esperamos ...

... esperamos y rogamos porque si todo anda bien recibiremos un código numérico que deberemos ingresar en el campo respectivo, click en el botón Verificar y se acabó el problema pero, no siempre las cosas son lo que deben ser ya que no vale la pena esperar; ellos sugieren esperar hasta 24 horas pero no parece razonable y la experiencia demuestra que no hay términos medios, o lo envian al instante o no lo envian y, en ese caso, deberemos empezar otra vez, tantas como sea necesario hasta que alguien se despierte y responda.

¿Esto es gratuito? Dependerá del plan que tengamos ... sin embargo, por lo que se lee en los foros, las cosas se pueden complicar aún más y es posible que jamás respondan; en ese caso deberemos entrar en la página alternativa, llenar el formulario, enviarlo y esperar esperar esperar.

Ellos, claro, se justifican diciendo:

Para proteger a los usuarios y evitar los usos inadecuados de nuestros sistemas, a veces solicitamos a los usuarios que verifiquen su identidad a través de un mensaje SMS o de una llamada telefónica para poder crear una cuenta.

Nos tomamos muy en serio el spam y los usos inadecuados, por lo que adoptamos numerosas medidas para bloquear a los creadores de spam y los mensajes que envían. El envío de códigos de verificación a los teléfonos es una forma de tratar el problema.

Más allá de buenas intenciones, no parece que el sistema les resulte porque la web está llena de spam con cuentas de GMail. Sin embargo, lo que más me preocupa es ¿qué hará Google con mi número de teléfono y por qué debo darles ese tipo de información privada?

Google utilizará tu número de teléfono para enviarte un código de verificación a través de un mensaje de texto o de una llamada telefónica. Almacenamos cada número de teléfono para asegurarnos de que no se utilice para crear un número masivo de cuentas, pero te garantizamos que no venderemos tu información personal con fines comerciales sin tu autorización ni nos pondremos en contacto contigo a través de ese número de teléfono sin tu permiso expreso.

¿Seguro? ¿seguro? ¿seguro? Bueno, por acá hay un dicho: "A seguro se lo llevaron preso ..."

Lo que se viene es el HTML5, nuevas opciones para los desarrolladores de páginas webs de cualquier tipo. Aún falta pero el futuro se presenta interesante. Una de sus novedades es la posibiliad de reproducir audio y video sin utilizar Flash, es decir, sin reproductores intermedios, incrustando directamente el archivo mediante una etiqueta.

Algunos de los sitios más conocidos ya emplean esa tecnología como alternativa: Dailymotion, YouTube, Vimeo, etc pero, el problema que se nos presenta es que ahora, será el navegador el que deberá encargarse de esa reproducción y allí es donde aún faltan actualizaciones ya que no se han puesto de acuerdo acerca del formato de esos videos. En Opera y Firefox se utiliza OGG, en Chrome y Safari se utiliza OGG y MP4; a esto, se ha sumado Google proponiendo un nuevo formato llamado WebM que, luego de largas discusiones, parece haber sido aceptado por todos y eso, tal vez, hará que se tranforme en el formato universal con la ventaja de ser de código libre y sin licencias. Aunque, por ahora sólo es un proyecto, todas las empresas han acordado que estará disponible en las próximas versiones de Firefox, Opera, Chorme e incluso Internet Explorer.

Sea como sea, la etiqueta elemental que utilizaremos será tan simple como esta:

<video src="URL_archivo"></video>

Lo que mostrará eso es un reproductor genérico pero, no es la única forma. Ya han comenzado a publicarse proyectos que amplian estas posibilidades, creando reproductores diferentes. De los que he visto, me ha llamado mucho la atención uno llamado Video JS que no es otra cosa que un script y una hoja de estilo completamente personalizable.

Para probarla, lo que debemos hacer es descargar el archivo ZIP que nos ofrecen y allí nos encontraremos con todo lo necesario: un ejemplo HTML, el script, la hoja de estilo por defecto y una carpeta con el resto de los skins alternativos.

Subimos el script a un servidor y lo agregamos a la plantilla antes de </head>:

<script src='URL_video.js' type='text/javascript' charset='utf-8'></script>

o lo agregamos directamente, copiando y pegando el contenido del archivo:

<script type='text/javascript' charset='utf-8'>
//<![CDATA[
... aquí pegamos el contenido ...
//]]>
</script>

Una vez hecho eso, lo activamos y, dependiendo de si usamos alguna otra librería, lo haremos de diferente modo para que se ejecute recién cuando nuestra página se haya cargado.

si usamos jQuery:
<script type='text/javascript' charset='utf-8'>
$(function(){ VideoJS.setup(); })
</script>

si usamos Prototype:
<script type='text/javascript' charset='utf-8'>
document.observe("dom:loaded", function() { VideoJS.setup(); });
</script>

si no usamos ninguna:
<script type='text/javascript' charset='utf-8'>
window.onload = function(){ VideoJS.setup(); }
</script>

Por último, añadimos la hoja de estilo ya sea desde un archivo:

<link rel='stylesheet' href='URL_video-js.css' type='text/css' media='screen' title='Video JS' charset='utf-8' />

o agregando directamente las propiedades entre etiquetas </style> y </style>

No voy a mostrar el CSS porque es un poco largo pero está muy bien documentado (en inglés), explicando qué es cada cosa así que, con paciencia y cuidado, puede llegar a modificarse por completo.

¿Cómo lo usaremos? Hay varias formas, la más simple para una archivo de formato OGG sería algo así:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>

Si usáramos otro formato deberíamos cambiar la etiqueta source y, eventualmente, podríamos poner varios de ellos para que el navegador decida cuál usar:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>

Por ahora, como la mayoría de estas cosas, no funcionará en Internet Explorer hasta que salga la versión 9 así que, para ese navegador y para cualquier otro que no soporte el formato elegido, podríamos agregar el archivo de Flash, una imagen o texto de advertencia, etc:

<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO"  poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg;  codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4;  codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm"  type='video/webm; codecs="vp8, vorbis"'>
<object class="vjs-flash-fallback" width="ANCHO" height="ALTO" type="application/x-shockwave-flash" data="URL_archivo"> ....... </object>
</video>
</div>

<div class="video-js-box">
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'>
<embed class="vjs-flash-fallback" width="640" height="294" src="http://blip.tv/play/AYHp%2BzAC" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
<p class="vjs-no-video">
<strong>Descargar Video: </strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a> | 
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a> | 
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a>
</p>
</div>

Si bien todo esto es nada más que una puerta entrreabierta al futuro, ese futuro no es tan lejano; la velocidad de los cambios apabulla y se vienen tiempos de cambios brutales. Hay una evidente pelea de negocios entrecruzados pero los grandes están impulsando con fuerza estas nuevas tecnologías y eso, a la larga, nos beneficiará a todos, dándonos lo único que realmente necesitamos: alternativas de donde elegir. En el surtido está el gusto pero la diversidad tambien es escencial a la la libertad.

En la práctica, aún es complejo porque no es sencillo alojar ese tipo de archivos aunque ya hay sitios como Vimeo o Blip.TV que aceptan algunos de ellos y nos permiten enlazarlos de manera directa. Algo similiar nos ofrece TinyVid donde podemos encontrar videos en formato OGG o, si creamos una cuenta gratuita, podemos subirlos en cualquier formato y convertirlos, incluyendo videos de YouTube, Vimeo, Dailymotion y otros servicios; no será lo ideal ya que se limita la cantidad de veces que pueden ser vistos por dia (500) pero, es una alternativa viable para experimentar a gusto.

Simpsons Mail Icons
	Contiene 7 íconos de 512x512, en formato PNG.descargar

Email Me Icon Set
	Contiene11 íconos de 128x128, en formato PNG.descargar

Embed Tweet es un servico que permite insertar un tweet en cualquier página web de manera hiper-simple. Para utilizarlo, debemos tener agregado el script genérico antes de </head>:

<script src='http://embedtweet.com/javascripts/embed_v2.js' type='text/javascript'></script>

A partir de ese momento, cada vez que queremos mostrar alguno, sólo es necesario escribir un enlace con la URL correspondients; por ejemplo, si el tweet fuese este:

http://twitter.com/oloman/statuses/17254283321

bastaría poner algo así donde se nos ocurra mostrarlo:

<a href="http://twitter.com/oloman/statuses/17254283321"> el tweet </a>

Como se puede ver en el ejemplo, todos los botones son operativos así que desde nuestra misma página, puede ser respondido, retweetado, etc.

Para quienes usan WordPress, hay un plugin disponible que puede descargarse en formato ZIP.

REFERENCIAS:Oloblogger

Un poco diferente es el servicio que ofrece Between; allí, lo que podemos hacer es ver y publicar una conversaciones entre dos usuarios.

Para eso, vamos a la página, colocamos los nombres de usuario y selecionamos alguna de las opciones de personalización que incluyen establecer las fechas a filtrar y algunas otros detalels como colores y tamaño. El resultado será un iframe que luego, si no nos convence, podemos modificar directamente porque las opciones son bastante evidentes:

user1 es el @nombre de un usuario
user2 es el @nombre de otro usuario
date1 fecha desde (formato Jan-01-2010)
date2 fecha hasta desde (formato Jun-30-2010)
order indica si las ordenamos en forma ascendente o ascendente (asc|des)

No tiene muchos misterios pero, hay que tener en cuenta que si las conversaciones son muchas, el tiempo que tarda en ser mostrado puede llegar a ser excesivo.

REFERENCIAS:TechCrunch

Usando CSS es muy sencillo crear botones de cualquier tipo, en este caso, las explicaciones son de vanseodesign y se aplican a un menú pero, podría hacerse con cualquier otra parte.

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

El HTML básico de un menú es algo así:

<div id="miMenu">
  <ul id="listaMenu">
    <li><a href="URL_enlace1">Enlace 1</a></li>
    <li><a href="URL_enlace2">Enlace 2</a></li>
    <li><a href="URL_enlace3">Enlace 3</a></li>
    <li><a href="URL_enlace4">Enlace 4</a></li>
  </ul>
</div>

¿Cuales son las propiedades a tener en cuenta?

/* primero que nada, el contenedor, el rectángulo donde se mostrará el menú
#miMenu {
  /* si es necesario, aquí podemos definir anchos, márgenes o fondos /*
}

/* luego, las definiciones de la lista */
ul#listaMenu1 {
  /* reseteamos las propiedades por defecto /*
  list-style: none;
  margin: 0;
  padding: 0;
  /* y podemos agregar propiedades para las fuentes de los textos */
}

/* cada item de la lista */
ul#listaMenu1 li {
  /* las mostraremos una al lado de la otra */
  display: inline;
}

/* y la clave es definir los enlaces como bloques que floten; de ese modo, podemos agregarles porpiedades gráficas con facilidad */
ul#listaMenu1 li a {
  display: block; /* esto, transforma el enlace en un rectángulo al que podemos dimensionar */
  float: left; /* son bloques pero flotan, los veremos uno al lado del otro */
  text-align: center; /* centramos el texto */
  text-decoration: none; /* para que no se subrayen los enlaces */
  margin-right: 2px; /* en este ejemplo, cada botón se separa un poco del adyacente */
  /*
    el tamaño podemos definirlo de varias formas, por ejemplo
        height: 20px;
        line-height: 20px;
        width: 100px;  
    otra forma es usar padding  y de ese modo, su tamaño es dinámico, varia según el texto */
        padding: 5px 20px; 
  */
    padding: 5px 20px;
  /* por último, los colores y los bordes */
  background: #5F3222;
  border-top: 2px solid #815444;
  border-right: 2px solid #3D1000;
  border-bottom: 2px solid #3D1000;
  border-left: 2px solid #815444;
  color: #EEE;
}
/* y el efecto hover donde simplemente, cambiamos esos colores */
ul#listaMenu1 li a:hover {
  background: #A37666;
  color: #000;
  border-top: 2px solid #815444;
  border-right: 2px solid #C59888;
  border-bottom: 2px solid #C59888;
  border-left: 2px solid #815444;
}

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Glenn Jones es un diseñador gráfico de Nueva Zelandia que bajo el pseudónimo de GLENNZ, ha descubierto que su negocio es vender camisetas con sus trabajos y allí está su tienda online, recibiendo pedidos y distribuyendolas por todo el mundo.

No, no pienso comprar ninguna porque veinte dólares es un poco mucho pero, vale la pena mirar los diseños.

Click para ampliar las imágenes.

Además, en una de sus páginas hay wallpapers para móviles que pueden ser descargados gratuitamente:

REFERENCIAS:blog.glennz.com

Por fin Blogger Buzz ha decidido hacer público que los botones de compartir están disponibles en todos los blogs; casi un mes después de haberlos agregados y varios dias después que Rosa nos contara que habían comenzado a funcionar.

El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
.......
</b:if>
</b:includable>

Lo que puede faltar en algunas plantillas es el código que carga esa parte y que debería encontrarse dentro del includable de las entradas, por lo general, en el pie de página, por ejemplo, luego del ícono de edición:

<b:includable id='post' var='post'>
.......
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
.......
<!-- share buttons -->
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

De no existir, simplemente lo agregamos allí o donde se nos ocurra mostrarlo; además se debe habilitar como cualquier otra opción. Para eso, hay que ir a Diseño, hacer click en Editar Entradas del blog y marcar la casilla correspondiente.

Como todo elemento de Blogger, puede ser eliminado pero para eso no basta borrar el includable ya que es uno de esos elementos "obligatorios", por más que lo borremos, volverá a aparecer. Para quitarlo, hay que eliminar el contenido y dejar las etiquetas del includable:

<b:includable id='shareButtons' var='post' />

Así, tal como está pensado, posee una serie de propiedades por defecto, algunas de las cuales podemos modificar pero no demasiado.

.post-share-buttons  {
display: inline-block;
margin: 0 0.5em !important;
vertical-align: middle;
width: 106px;
}
.share-button {
background: url("/img/share_buttons.png") no-repeat scroll left center transparent !important;
display: block;
float: left;
height: 22px;
overflow: hidden;
width: 21px;
}
a.share-button:hover {text-decoration: none;}
.share-button-link-text {
left: -999px;
position: absolute;
}
.sb-email {background-position: 0 0 !important;}
a.sb-email:hover {background-position: 0 -22px !important;}
a.sb-email:active {background-position: 0 -44px !important;}
.sb-blog {background-position: -21px 0 !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-blog:active {background-position: -21px -44px !important;}
.sb-twitter {background-position: -42px 0 !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-twitter:active {background-position: -42px -44px !important;}
.sb-facebook {background-position: -63px 0 !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-facebook:active {background-position: -63px -44px !important;}
.sb-buzz {background-position: -84px 0 !important;width:22px;}
a.sb-buzz:hover {background-position: -84px -22px !important;}
a.sb-buzz:active {background-position: -84px -44px !important;}

La más simple es ocultar cualquiera de ellos con display:none aunque, como se trata de un sprite, si ocultamos el primero o el último, se perderá el efecto de "curva" de esos botones; es decir, esta pensado para ser usado así como viene; de todos modos:

.sb-email {display:none;} /* oculta el ícono de email */
.sb-blog {display:none;} /* oculta el ícono de blog */
.sb-twitter {display:none;} /* oculta el ícono de Twitter */
.sb-facebook {display:none;} /* oculta el ícono de Facebook */
.sb-buzz {display:none;} /* oculta el ícono de Goggle Buzz */

El rectángulo que los contiene tiene un clase CSS que es posible sobrescribir y de esa manera, posicionarlo con cierta exactitud donde se nos ocurra. Para eso, me parece que lo mejor es utilizar las propiedades de posición (left top right bottom) aunque podría usarse cualquier otra:

.post-share-buttons {
display: block;
margin: 0 auto !important;
position: relative;
top: -30px;
}

Aunque no lo utilicemos y sigamos empleando nuestros propios íconos para compartir, podríamos sacar ventaja de ellos porque nos ayudará a simplificar nuestros códigos y a darles una mejor terminación. Por ejemplo, en una entrada anterior se mostraba la forma de agregar esos botones y bastaría cambiar un poco ese código:

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToFacebookMsg + &quot;\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Facebook' target='_blank' rel='nofollow'> texto/imagen Facebook </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' title='Enviar a Twitter' target='_blank' rel='nofollow'> texto/imagen Twitter </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToBuzzMsg + &quot;\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' title='Compartir con Google Buzz' target='_blank'> texto/imagen Google Buzz </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' title='Enviar por correo electrónico' target='_blank' rel='nofollow'> texto/imagen EMail </a>

Y agregamos el de enviar al blog:

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.blogThisMsg + &quot;\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' title='Escribe un blog' target='_blank' rel='nofollow'> texto/imagen Blogger </a>

Para que esto funcione debemos habilitar la opción y eliminar <b:include data='post' name='shareButtons'/> de nuestra plantilla.

No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario.