Contenido

Google Buzz API, disponible para desarrolladores

10 Feb

+ 14

La velocidad con la que Google Buzz ha pasado a estar disponible (en alguna cuentas) y la aparición de la API me hace pensar que ya llevaban tiempo detrás de esto. Probablemente desde las primeras versiones para desarrolladores de Google Wave.

Google Buzz API

Los desarrolladores, tenemos ya disponibles unas pequeñas especificaciones para desarrollar aplicaciones usando esta herramienta.

Por un lado disponemos de la posibilidad de obtener un feed completo con toda nuestra actividad pública mediante una URL única por usuario.

http://buzz.googleapis.com/feeds/{userID}/public/posted

Conseguir el identificador de un usuario es tán secillo como obtenerlo del link que va a sociado a su nombre en Google Buzz. En mi caso es el siguiente:

http://buzz.googleapis.com/feeds/103886688219972755999/public/posted

Esto nos permite acceder a mi feed público y ver en él todo el contenido que he ido añadiendo, al igual que lo disponíamos con FriendFeed. Todo ello usando el formato Atom (RFC4287).

Añadir sitios y a sitios

Por defecto Google Buzz detecta sitios que están asociados en tu perfíl y los usa para ofrecertelos para completar tus «Gweets» con información de ellos. Para ello bastará con editar tu perfíl y añadir las URL’s que quieras asociar a tu perfíl.

Vínculos a tu perfíl desde sitios externos

Si quieres relacionar un sitio web contigo, podrás hacer añadiendo un tag HTML que dará información en formato XFN sobre tu perfíl en Google.

<head>
 <!-- ... -->
 <link rel="me" type="text/html" href="http://www.google.com/profiles/your.username"/>
 <!-- ... -->
</head>

Esto hará que herramientas destinadas a ello, puedan ofrecer más información al visitante sobre el autor de la página que está visitando.

Opinión

Google está jugando fuerte, si lo miramos con perspectiva veremos que está montando su propio Facebook usando Internet como tablero. No hay limitaciones, no hay que estar en un mismo dominio para disfrutar de todo lo que la red te ofrece… me hallo entre el miedo, la admiración y la expectación de lo que esto puede significar.

Sketchpad, paint online con tecnología HTML5

10 Feb

+ 6

Hace unos días descubrí via delicious, Sketchpad, un paint enriquecido completamente online que se aprovecha de las nuevas herramientas que HTML5 pone a nuestra disposición.

sketchpad
(Ver Imagen)

El resultado, como se puede ver, es realmente sorprendente. No solo por lo elegante del diseño, sinó por la soltura con la que se mueve y las posibilidades que ofrece:

  • Uso de degradados
  • Uso de patrones
  • Paleta de colores
  • Historial de modificaciones
  • Posibilidad de salvar el dibujo con Data URI

Sin duda una muestra lo que nos vamos a ir encontrando por Internet en un futuro no muy lejano.

Google Buzz, el friendfeed de Google

10 Feb

+ 9

Despues de Google Wave, el gigante de Internet ha presentado Google Buzz, un nuevo servicio integrado en Gmail que a simple vista parece una versión de Twitter, pero que cuando profundizas un poco más descubres que se trata de una versión de FriendFeed (herramienta encargada de recopilar toda tu información social que Facebook compró no hace mucho).

buzz-portada
(Ver Imagen)

Google Buzz

A diferencia de Google Wave, esta herramienta parece tener una finalidad concreta y fácil de ver por el usuario de a pie. Básicamente, se encarga de recoger información de diferentes sitios (usándo los feeds de estos) para almacenar información sobre nosotros.

buzz-sites
(Ver Imagen)

Esta información, al igual que los demás sitios sociales, será seguida por los usuarios que hayan decidido «seguirte» y que por consecuente están interesados en tu actividad por la red. Además de la información procedente de otros sitios, nos permite añadir información al estilo Twitter/Facebook, con lo que estás pensando en este momento.

buzz-comment
(Ver Imagen)

El editor enriquecido, le dá una buena pasada a Twitter acercándose a lo que nos ofrece Facebook (me gusta más esta forma de incrustar imágenes que la que Facebook nos ofrece). Permitiendo subir imágenes, incluir links y leer imágenes de los links que estamos pasando para hacer nuestros «Gweets» (Esto es mio, Google + Tweet).

buzz-images-link
(Ver Imagen)

buzz-images-link2
(Ver Imagen)

Aprovechando nuestras fotos en Picasa, añadir imágenes previamente subidas será una tarea tan sencilla como seleccionar la fotografía.

buzz-add-photo
(Ver Imagen)

Desde el interface web, no hay mucho más que contar ya que no se trata de nada nuevo ni revolucionario. Es más de lo mismo y que ya conocemos.

Google Maps + Buzz

Por otro lado, tenemos Google Maps (para Android) completamente integrado con Google Buzz mediante una capa de información aplicada que nos mostrará información sobre tu Buzz geolocalizada.

buzz
(Ver Imagen)

Desde esta información podemos acceder a Gweets que usuarios han dejado desperdigados por el mapa. Una vez en ellos, nos permite comentarlos o generar los nuestros propios.

buzz3
(Ver Imagen)

A la hora de generar un Gweet desde Google Maps, nos permite tomar una fotografía y adjuntar al Gweet de una forma tan cómoda como con los clientes de Twitter para Android.

buzz4
(Ver Imagen)

Aplicación del Market

Por el momento la aplicación que hay en el Market de Google Buzz no es la aplicación oficial de Google, y simplemente es una aplicación que se encarga de abrirnos el navegador y mostrarnos el interfaz móvil de Google Buzz (yo desde Android aún no he podido verlo, aunque desde el iTouch si y está bastante bien conseguido).

Conclusión

Personalmente, creo que Google Buzz tiene su miga, aún no le he encontrado una utilidad más que la de complementar la información que Google tiene de mi, habrá que estar más al tanto de como va evolucionando.

CSS Sprites para mejorar las fechas de tus posts

4 Feb

+ 9

Hace ya tiempo, vimos como introducir un calendar con las fechas en tus posts. Un sistema que permite darle un aspecto diferente a tu wordpress. En WpBeginner dán un paso más y usando la CSS Sprites genera un elegante sistema que se basa en desplazarse por encima de una imágen para mostrar la fecha.

dates-css-sprites-large
(Ver Imagen)

Como vemos en la imágen, tenemos las fechas desde 2009 a 2014 y con el siguiente código CSS podremos mostrar el año que deseemos.

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

El código HTML encargado de mostrar las imágenes se basa en el uso de clases que indicarán que porción de imágen hay que mostrar.

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

El resultado es que mediante la carga de una única imágen disponemos de todas las fechas posibles entre estos 5 años y solo cambiando las clases de los hijos del elemento .postdate podremos mostrar una fecha u otra.

Wordpres para Android oficial liberado

2 Feb

+ 8

WordPress ha anunciado hoy que la versión oficial que nos permitirá publicar desde nuestros Android’s se puede descargar y empezar a usar. Al igual que hizo para el iPhone y los terminales Symbian.

postimg
(Ver Imagen)

Para los usuarios que hemos usado WpToGo, nos sonará bastamte ya que se ha usado como base para esta nueva versión, añadiendo una serie de nuevas mejoras como:

  • Creación y mantenimiento de páginas
  • Comentarios con imágenes de Gravatar
  • Posibilidad de responder comentarios

Continua —>

Gordon, el reproductor flash en Javascript

2 Feb

+ 7

Mucho se está hablando de la muerte de Flash con la llegada de HTML5, principalmente por que sitios como YouTube o Vimeo están implementando ya versiones del tag <video /> de HTML5 en ciertas secciones y para navegadores que lo soporten. Aunque Adobe parece no verlo igual.

Por otro lado, Tobias Scheneider ha desarrollado «Gordon«, una implementación en Javascript de un reproductor de Flash usando SVG para ello.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="../gordon.js"></script>
		<script type="text/javascript">
 			window.onload = function(){
 				// Opciones
 				var opt = { id: 'stage', // ID del contenedor
 					width: 500,
 					height: 400};

 				// Definimos la nueva película
 				new Gordon.Movie('blue.swf', opt);
 			}
		</script>
	</head>
 	<body>
 		<div id="stage"></div>
 	</body>
</html>

El resultado es realmente sorprendente, y podemos disfrutar de algunos ejemplos directamente aquí (aún está un poco verde y solo está disponible para Firefox y WebKit). Además, tenemos disponible el código en GitHub.

Colección de editores enriquecidos del futuro

2 Feb

+ 2

SixRevisions publica una interesante recopilación de editores de texto enriquecidos que nos permiten reemplazar los tristes <textarea /> por completos editores que facilitan la visualización del resultado al usuario. Muy a tener en cuenta.

Código Konami en Javascript

1 Feb

+ 9

El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta.

↑ ↑ ↓ ↓ ← → ← → B A

Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto:

<head>
 <script type="text/javascript">
   var $ = {
      enabled: false,
      tmp: Array(),
      _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
      init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
      },
      konamiCode: function(e) {
        if(!this.enabled) {
          var t = this.tmp.pop();
          if((e.keyCode-t) == 0) {
            if(this.tmp.length == 0) {
              this.enabled = true;
            }
          }
          else {
            this.init();
          }
        }
        else {
          this.action();
        }
      },
      // Cambiamos por nuestra funcionalidad.
      action: function() {
        alert("Konami Code Activated");
      }
    }
 </script>
</head>
<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

Simplemente tendremos que añadir este código modificando el valor de action por el de la funcionalidad que deseemos ejecutar al completar el Konami Code.

Sigue la traza de tus script con printStackTrace()

1 Feb

+ 2

Hace unos meses Eric Wendelin publicó una implementación de printStackTrace(), un script que nos permite seguir una traza de ejecución de nuestros scripts ideal para detectar errores y detectar más fácilmente por donde ha pasado la ejecución de nuestro script.

Hace unos días, Eric actualizó el código integrando a Google Chrome entre los navegadores soportados por la función:

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) {
        var st = printStackTrace();
        alert(st.join("\n\n"));
    }
}

foo();

El resultado nos muestra por donde ha pasado la ejecución:

printStackTrace()@http://eriwen.com/js/common.4.js:53
thing()@http://eriwen.com/js/common.4.js:249
bar("blah")@http://eriwen.com/js/common.4.js:244
foo()@http://eriwen.com/js/common.4.js:239
@javascript:foo();:1

Si nos interesa, podemos ver el código del proyecto directamente desde GitHub.