Continuando con serie de artículos dedicados al anywhere, ya  vimos la semana pasada como enlazar nombre de usuario de Twitter. Y esta semana hemos analizado la función hovercards, la cual nos permite mostrar la ficha de usuario de Twitter en los nombres de usuario que haya en nuestra página.

Ya os hablamos hace un par de semanas de @Anywhere (API Javascript de Twitter) y hoy queremos entrar en más detalles sobre la librería, para que la puedas implementar en tu web de forma sencilla y potente. Por no hacer el artículo hablaremos en de cada uno de las funciones en un artículos separados. Así, hoy trataremos uno de los métodos más sencillitos de la API @Anywhere. También quiero destacar que todos los ejemplos de código estarán dentro de la llamada de callback (T) como dijimos en el anterior artículo:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Cada vez salen más y más APIs, y Google es uno de los qué más APIs libera. Esta vez ha presentado en las conferencias Google I/O, realizadas el pasado 19 y 20 de Mayo, la Google Font API. Esta API te ayuda a añadir tipografías en cualquier página web. Esto tiene unos beficios claros como:

• Disponer de tipografías de código abierto de alta calidad
• Funciona en la mayoría de los navegadores
• Es extremadamente facil de usar.

Puedes ver todas las tipografías disponibles en el Directorio de Tipografías de Google. De momento disponen de 18 fuentes, con variantes en itálica, negrita, italica negrita. Además 1 de ellas dispone de 10 familias diferentes. Por lo tanto contamos con un catálogo amplio que nos permitirá dar otro estilo a nuestra web y salirnos de las típicas tipografías universales.

Además el catálogo está muy cuidado, ya que dispone de una ficha por cada una de las tipografías. En la ficha puedes encontrar el nombre del diseñador, con un enlace a su biografía y otros datos personales. También dispones de la descripción de la tipografía y el set de caracteres. También hay ejemplos de textos en diferentes tamaños, desde 36px hasta 12px, en diferentes  colores, #000, #333 y #666, y diferentes variantes, cursiva, negrita y negrita cursiva Puedes ver como ejemplo la ficha de la tipografía Cararell.

Si te parece interesante y quieres ver como incluirlo en tu web acontinuación te cuento las diferentes formas, solo con CSS y con ayuda de Javascript.

Hace 1 mes se realizó el Chirp, la conferencia oficial para desarrolladores de Twitter. Y en ella se presentaron varias novedades en torno al mundo Twitter. Entre ellas, una nueva página para desarolladores de Twitter: dev.twitter.com, donde podemos ver nuevas herramientas. En la que nos vamos a centrar, por ser la más cercana a la temática del blog es @Anywhere. @Anywhere es una API de Javascript que te permite integrar Twitter con tu sitio en unas pocas lineas de Javascript. Antes de empezar a utilizarla has de registrarte como desarrollador para que te faciliten una API key, para ello tienes el formulario de registro de un aplicación Anywhere. Tras ese paso, solo debemos añadir en las cabeceras de nuestra web la llamada a este script:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

Una vez añadido este script la foma de inicializar @Anywhere es la siguiente:

twttr.anywhere(function (T) {
  // Tu código aquí...
});

Como ves en realidad llamamos a una función y le pasamos una función de callback con un parámetro T (podéis llamarlo como queráis). La cual se ejecutará una vez cargado el script de Twitter @Anywhere. Con esta API, de momento, puedes realizar lo siguiente:

• Autoenlazar nombres de usuario de Twitter
• Hovercards
• Botones de Follow
• Caja de Tweet
• Login de usuario

Os invito a que la probéis. Desde Pixelover estamos preparando algunas demos de uso que os iremos enseñando a lo largo de estas semanas.

En muchos de los plugins de jQuery que manejamos vemos las expresiones $.extend (o jQuery.extend) y $.fn.extend (o jQuery.fn.extend).

Pues bien, lo que estamos viendo en estas expresiones es la aplicación del metodo .extend().

Este método es la base para la creación de plugins y para la parametrización de nuestros plugins (es decir poder tener unos valores por defecto que el usuario pueda modificar al llamar al plugin).

Pero... ¿que hace exactamente el metodo .extend()?

Basicamente lo que hace es extender objetos. Esto significa que, dado un objeto, le añade el contenido (funciones y variables) de otro objeto (o de otros).

La nomenclatura de este metodo es la siguiente:

	jQuery.extend( target, [ object1 ], [ objectN ] )

Ahora bien, dependiendo del numero de objetos que reciba, el resultado final será diferente...

El otro día hablabamos de Cómo geoposicionar un dispositivo con el navegador, pero por si sola no podemos darle mucha utilidad, puesto que necesitamos ejecutar algo en el successCallback. Y aquí es donde aparece la nueva versión de la API de Google Maps V3. La API Javascript es muy parecida a su antecesora, la versión 2. Sin embargo ha cambiado mucho internamente, ya que ha sido diseñada para cargar más rápidamente, especialmente en navegadores móviles, como los dispositivos basados en Android y el iPhone™.

Una caracteristica muy destacable de esta nueva versión es que ha sido implementada usando un marco de trabajo MVC. También cabe descatacar la desaparición de API key, lo cual elimina trámites previos a la hora de implementar tu trabajo en diferentes dominios.

Ponerlo en marcha es realmente fácil. Sólo tienes que seguir estos 5 sencillos pasos:

1. Incluir el código JavaScript de la API de Google Maps usando la etiqueta script

   <script
      type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
   </script>
   

2. Crear un elemento div llamado "map_canvas" para contener el Mapa.

   <div id="map_canvas" style="width:100%; height:100%"></div>

3. Crear un objeto en JavaScript para guardar una serie de propiedades del mapa.

   var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

4. Escribir una función de JavaScript para crear el objeto "mapa".

   function initialize() {
      var latlng = new google.maps.LatLng([latitud], [longitud]);
      var map = new google.maps.Map(
         document.getElementById("map_canvas"),
         myOptions
      );
   }

5. Inicializar el objeto mapa en la función onload del body.
   

   <body onload="initialize()">

Nostros, en Pixelovers, hemos querido ir un poco más lejos y hacer una prueba de integración con el borrador de la especificación de la API de Geoposicionamiento de la W3C. Como ya os dijimos la función successCallback necesitaba pintar los datos obtenidos en un mapa. Pues qué mejor hacerlo con la nueva API de Google Maps.

La demo consta de 2 partes, una primera que pretende simplemente mostrar la posición actual y gestionar los posibles errores. Y otra segunda parte que pretende dar una utilidad práctica a ese resultado. Por tanto, una vez geoposicionado, podrás filtrar una lista que aparece atendiendiendo al país donde te encuentras.

Nota: Solo se han usado para la demo los 3 países con más visitantes de Pixelovers, España, México y Argentina, al resto también os apreciamos, pero si no, la demo sería muy extensa.

Demo

¿Qué te parece la nueva versión de la API de Google Maps? ¿Ya la has probado? Cuentanos qué te ha parecido.

Hace unos días, el 27 de noviembre de 2009, publicaron un nuevo borrador en el W3C titulado: Geolocation API Specification. Esta especificación define una API que proporciona secuencias de comandos de acceso a la información de localización geográfica asociada con el dispositivo de alojamiento. ¿Verdad que suena interesante?

El objeto Geolocation lo podemos encontrar en la instancia navigator y debe implementar estos 3 métodos:

• void getCurrentPosition (successCallback, errorCallback, options): Cuando se llama, de inmediato regresa y, a continuación, de forma asincrónica intenta obtener la ubicación actual del dispositivo.
• long watchPosition (successCallback, errorCallback, options): inmediatamente devuelve un valor long que identifica unívocamente a una operación watch y, a continuación de forma asincrónica inicia la operación de watch. Esta operación sigue controlando la posición del dispositivo e invocando la función callback adecuada cada vez que el dispositivo cambia de posición. La operación continúa hasta que se llama al método clearWatch con el identificador correspondiente.
• void clearWatch (watchId): el proceso identificado por el argumento watchId se interrumpe inmediatamente y dejan de invocarse los callbacks. Este identificador es el que devuelve la función watchPosition.

Nota: Estas funciones (getCurrentPosition y watchPosition) notificarán al usuario de nuestras intenciones y será él quién decida si permitir el acceso a esa información o no.

Estas funciones se encuentran implementadas por un objeto llamdo Geolocation que se pertenece a la interfaz NavigatorGeolocation y debería implementarse por el objeto Navigator. Así que, podemos acceder a la posición actual del visitante mediante:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

¿Y qué significa: successCallback, errorCallback, options y watchId? Pues los dos primeros argumentos son obligatoriamente funciones y el tercero un objeto. En más detalle tenemos:

successCallback

Funcion que recibe por parámetro Position position que contiene los atributos Coordinates coords y DOMTimeStamp timestamp. El atributo coords contiene la siguiente información:

Position.Coordinates

• latitude: coordenadas geograficas  especificadas en grados.
• longitude: coordenadas geograficas  especificadas en grados.
• altitude: denota la altura especificada en metros.
• accuracy: denota el nivel de precisión de las coordenadas de latitud y longitud, en metros.
• altitudeAccuracy: denota el nivel de precisión de la altitud.
• heading: representa la dirección del desplazamiento, tomado en grados en sentido horario desde el norte verdadero.
• speed: indica la velocidad del dispositivo en metros por segundo.

La altitud, la precisión de la altitud, la dirección y la velocidad pueden existir o no dependiendiendo del dispositivo y en caso de no exisitir devolverán null

errorCallback

Función que recibe por parámetro PositionError error el cual contiene un short code y un DOMString message. El code puede tener un valor de 0 a 3 dependiendo de la causa, siendo:

• UNKNOWN_ERROR = 0
• PERMISSION_DENIED = 1
• POSITION_UNAVAILABLE = 2
• TIMEOUT = 3

options

Objeto que consta de los siguientes atributos:

• boolean enableHighAccuracy: proporciona un indicio de que la aplicación desea recibir los mejores resultados posibles. El valor por defecto es false.
• long timeout: indica la duración máxima de tiempo (expresado en milisegundos) que se permite para pasar de la llamada a getCurrentPosition() o watchPosition() hasta que se invoca el successCallback correspondiente.
• long maximumAge: indica que la aplicación está dispuesto a aceptar una posición en caché, cuya edad no sea mayor que el tiempo especificado en milisegundos.

¿Qué opinas de que un dispositivo pueda informar de la posición del mismo? ¿Se te ocurre alguna aplicación, o ya le estas dando uso y quieres compartirlo?

En el caso de Google, por fin ofrecen su "central" para desarrolladores, Google Code en castellano. El Sitio para el desarrollador -así es como le llaman-, aúna en un sólo lugar recursos para desarrolladores de aplicaciones web (apis, iniciativas de software libre, alojamiento de proyectos...), noticias y presentaciones en vídeo relacionadas con Google Code y los últimos artículos de los blogs para desarrolladores que Google ha publicado:

• El blog oficial de Google
• El blog dedicado al open source de Google
• El blog de Google Code en inglés
• El blog de Google Code en castellano

En el caso de Flickr se trata del anuncio de la puesta en marcha de code.flickr.com, un site orientado a dar a conocer las herramientas que Flickr pone a disposición de la comunidad de desarrolladores: tutoriales de uso de sus APIs, posts de su blog de desarrolladores, aplicaciones que usan las APIs de Flickr, discusiones relacionadas con las APIs desde sus foros... ¡Realmente interesante!

Los chicos de YouTube anunciaban la semana pasada la publicación de nuevas APIs en su blog. Posiblemente lo más destacable es que entre las nuevas APIs ofrecen interfaces que permitirán a los desarrolladores de aplicaciones web programar sistemas de carga de vídeos o edición de vídeos existentes que usen el sistema de almacenamiento de YouTube, y esto abre un nuevo mundo de posibilidades. A grosso modo, significa prácticamente que Google permitirá a los desarrolladores montar sitios completos basados en vídeo utilizando su sistema de conversión, compresión y alojamiento.

Muchas aplicaciones web que hasta ahora realizaban una integración "simple" con YouTube, permitiendo sólamente mostrar vídeos alojados en el popular servicio de Google, podrán ahora:

• Extraer información relevante de los vídeos: metadatos, vídeos relacionados, información sobre la duración, el tipo de contenidos, el autor...
• Adaptar completamente el aspecto del reproductor: permiten incluso la eliminación del logotipo, siempre que la web vaya acompañada de los créditos por el uso de su API, un "powered by YouTube".
• Permitir la carga directa de vídeos de forma integrada con su gestor de contenidos, haciendo sin duda la vida más fácil a muchos usuarios de sistemas de blogging, por ejemplo.

Seguro que no tardaremos en ver las primeras aplicaciones en sacar partido de las nuevas posibilidades de estas nuevas caracterísitcas de las APIs de YouTube: sistemas de blogging y gestores de contenidos, nuevos portales de vídeo temáticos, buscadores especializados...

Si quieres saber más, echa un vistazo a este vídeo en el que los propios responsables de YouTube comentan las novedades incluídas en las nuevas APIs.

Actualización: aprovecho para referenciar el post de Albert Armengol, en el que encontraréis un completo (y acertado, en mi opinión) análisis sobre la decisión de Google de abrir completamente las API de YouTube a los desarrolladores.