Para mí, la documentación no siempre es suficiente para aprender acerca de las API; necesito ejemplos con los que pueda practicar. Por ese motivo comencé recientemente un proyecto divertido -- una herramienta para enseñar a los desarrolladores a utilizar las API de JavaScript de Google: el ...
Para mí, la documentación no siempre es suficiente para aprender acerca de las API; necesito ejemplos con los que pueda practicar. Por ese motivo comencé recientemente un proyecto divertido -- una herramienta para enseñar a los desarrolladores a utilizar las API de JavaScript de Google: el AJAX API Playground (consola de pruebas de la API AJAX). En esto he estado trabajando el 20% de mi tiempo y hoy me enorgullece anunciar que estamos lanzando el AJAX API Playground, ¡siendo ésta la forma oficial en la que Google mostrará ejemplos de JavaScript!

El AJAX API Playground está cargado actualmente con más de 170 ejemplos para las API de JavaScript de Google (Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries y Earth) que puedes editar y ejecutar para qyudarte a explorar lo que ofrecen las API de Google. También existen funciones para guardar y exportar. La función “guardar” te permite conservar un ejemplo editado para que puedas continuar trabajando posteriormente en éste, mientras que la función “exportar” te permite modificar un ejemplo y publicar el código en un URL permanente.

Ya que el AJAX API Playground se creó sobre App Engine, puedes crear tu propia instancia de App Engine para mostrar tus ejemplos de código. El código está abierto bajo una licencia de Apache 2.0 y utiliza varias bibliotecas y herramientas abiertas, inclusive jQuery, jQuery UI, YUI Compressor y CodeMirror. Puedes encontrar el código en Google Project Hosting (Alojamiento de proyectos en Google) y aprender cómo agregar muestras en el wiki del proyecto.

Mantente al tanto para obtener más muestras de más API. ¡Que lo disfrutes!

Ben Lisbakken, Ingeniero de Programas para Desarrolladores

La semana pasada, nuestros compañeros de Mountain View tuvieron la suerte de contar con la presencia de John Resig, ingeniero de Mozilla y autor del libro Pro JavaScript Techniques, y de conocer de primera mano sus investigaciones en torno al mundo de JavaScript. Podéis consultar la presentación en este enlace: http://jquery.com

La semana pasada, nuestros compañeros de Mountain View tuvieron la suerte de contar con la presencia de John Resig, ingeniero de Mozilla y autor del libro Pro JavaScript Techniques, y de conocer de primera mano sus investigaciones en torno al mundo de JavaScript. Podéis consultar la presentación en este enlace: http://jquery.com

Además de ser “embajador” de Mozilla, John es el creador de jQuery y Dromaeo., y miembro de the Firebug Working Group. Ahora mismo está trabajando en Secrets of the JavaScript Ninja, que saldrá a la luz este año. 

En su charla, John comienza destacando por qué el rendimiento mejorará con la nueva generación de navegadores, gracias a avances en motores de JavaScript y a nuevas funcionalidades. Comenta en profundidad el rendimiento de JavaScript, tocando temas como tracing, just-in-time compilation, y benchmarks (SunSpider, Dromaeo, and V8 benchmark). Resig finalizó su intervención con una colección de funcionalidades avanzadas en las áreas DOM, estilo, datos y medidas. 

La verdad es que fueron muchos temas los que se trataron en una hora. El contenido de la conferencia se vio enriquecido gracias a las preguntas de la audiencia. En un momento determinado, uno de los miembros del equipo de Google Chrome habla en detalle sobre cómo parking funciona en v8. 

Muchas gracias a John por compartir su trabajo y conocimientos con todos nosotros.




Steve Souders

La Embedded Viewer API permite mostrar contenido de un libro incluido en el programa Google Book Search directamente en páginas web usando JavaScript y respetando los derechos de propiedad intelectual del propietario del libro.

Como soy un enamorado de este producto en cuanto he tenido un momento me he puesto a trastear con el API para ver como funciona y la verdad es que me ha parecido muy sencilla.

Primer paso, cargar el API
El Embedded Viewer API esta totalmente integrada con el Google AJAX APIs. Este entorno proporciona un espacio de nombres ("namespace") común para cada una de las APIs que soporta, permitiendo a las distintas APIs de Googe trabajar juntas. El Embedded Viewer API usa el espacio de nombres google.books.* para todas las clases, métodos y propiedades.

Cargar un API usando Google AJAX API el requiere de dos pasos:

Primero cargar la librería del cargador:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

El primer parámetro que le pasamos al método load() es la librería que queremos cargar. El segundo parámetro es la versión de la librería, en este caso la versión 0 (cero). El tercer parámetro es el idioma en el que queremos que se nos muestre el interfaz; este último parámetro es opcional y si no lo pasamos se usará el idioma por defecto que es el ingles.

Segundo paso, crear el objeto visor

var visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));

Al constructor DefaultViewer se le pasa como parámetro el nodo DOM donde se representará el libro.

Tercer paso, inicializar el visor con un libro concreto
El método load() es el que se encarga de inicializar el objeto visor. Como primer parámetro le pasamos el identificador del libro que puede ser el ISBN, el número OCLC, el LCCN, el Volume ID en Book Search o la URL de previsualización de Book Search. En el ejemplo se puede ver el uso del caso más común, el ISBN.

visor.load('ISBN:0738531367');

Además el método load() admite dos parámetros opcionales, se trata de dos funciones de callback. La primera una función que será llamada en caso de que el libro no se haya podido cargar y la segunda una función que será llamada cuando el libro se ha cargado sin problemas. Veamos un ejemplo:

function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

function LibroCargado() {
alert("El libro se ha cargado correctamente");
}

visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);

Ultimo paso, navegar por el libro
Una vez tenemos cargado el libro en el visor el último paso es navegar por el libro. Para ello podemos usar los métodos del objeto visor (nextPage(), previousPage(), zoomIn(), zoomOut(), etc) que encontraréis documentados en la guía de referencia del API. En nuestro ejemplo lo que vamos a hacer es pasar página en el libro una vez cada tres segundos. Lo haríamos con el siguiente código:

function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

Todo junto
Si juntamos todos los pasos en un fichero html simple nos quedaría un código tal que así:

<!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>

<title>Ejemplo de uso del Embedded Viewer API de Google Book Search</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

//Cargamos el API de Books en castellano
google.load("books", "0", {"language": "es"});

var visor = null;

//Esta es la funcion que se encarga de pasar pagina cada tres segundos
function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

//Esta funcion sera llamada si no se puede cargar el libro
function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

//Si el libro se ha podido cargar empezamos a pasar paginas
function LibroCargado() {
PasarPagina(visor);
}

function Inicializar() {
//creamos el objeto visor
visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));
//cargamos el libro
visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);
}

//Nos aseguramos de que la funcion es llamada cuando se cargue la pagina
google.setOnLoadCallback(Inicializar);

</script>

</head>

<body>
<div id="DOMVisor" style="width: 425px; height: 675px"></div>
</body>

</html>

y nos produciría este resultado:








y al final una ayuda....
Para aquellos que prefieran una solución más sencilla existe la herramienta Preview Wizard. Usando esta herramienta podrán generar automáticamente el código JavaScript para la visualización de uno o varios libros.

Os animo a probar estas APIs y ya de paso si alguno de vosotros las acaba usando en su site que no dude en enviarnos un correo con un link. Como siempre en un post posterior comentaremos las mejores implementaciones.

A cuidarse
Javier Arias González
La Embedded Viewer API permite mostrar contenido de un libro incluido en el programa Google Book Search directamente en páginas web usando JavaScript y respetando los derechos de propiedad intelectual del propietario del libro.

Como soy un enamorado de este producto en cuanto he tenido un momento me he puesto a trastear con el API para ver como funciona y la verdad es que me ha parecido muy sencilla.

Primer paso, cargar el API
El Embedded Viewer API esta totalmente integrada con el Google AJAX APIs. Este entorno proporciona un espacio de nombres ("namespace") común para cada una de las APIs que soporta, permitiendo a las distintas APIs de Googe trabajar juntas. El Embedded Viewer API usa el espacio de nombres google.books.* para todas las clases, métodos y propiedades.

Cargar un API usando Google AJAX API el requiere de dos pasos:

Primero cargar la librería del cargador:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

El primer parámetro que le pasamos al método load() es la librería que queremos cargar. El segundo parámetro es la versión de la librería, en este caso la versión 0 (cero). El tercer parámetro es el idioma en el que queremos que se nos muestre el interfaz; este último parámetro es opcional y si no lo pasamos se usará el idioma por defecto que es el ingles.

Segundo paso, crear el objeto visor

var visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));

Al constructor DefaultViewer se le pasa como parámetro el nodo DOM donde se representará el libro.

Tercer paso, inicializar el visor con un libro concreto
El método load() es el que se encarga de inicializar el objeto visor. Como primer parámetro le pasamos el identificador del libro que puede ser el ISBN, el número OCLC, el LCCN, el Volume ID en Book Search o la URL de previsualización de Book Search. En el ejemplo se puede ver el uso del caso más común, el ISBN.

visor.load('ISBN:0738531367');

Además el método load() admite dos parámetros opcionales, se trata de dos funciones de callback. La primera una función que será llamada en caso de que el libro no se haya podido cargar y la segunda una función que será llamada cuando el libro se ha cargado sin problemas. Veamos un ejemplo:

function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

function LibroCargado() {
alert("El libro se ha cargado correctamente");
}

visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);

Ultimo paso, navegar por el libro
Una vez tenemos cargado el libro en el visor el último paso es navegar por el libro. Para ello podemos usar los métodos del objeto visor (nextPage(), previousPage(), zoomIn(), zoomOut(), etc) que encontraréis documentados en la guía de referencia del API. En nuestro ejemplo lo que vamos a hacer es pasar página en el libro una vez cada tres segundos. Lo haríamos con el siguiente código:

function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

Todo junto
Si juntamos todos los pasos en un fichero html simple nos quedaría un código tal que así:

<!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>

<title>Ejemplo de uso del Embedded Viewer API de Google Book Search</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

//Cargamos el API de Books en castellano
google.load("books", "0", {"language": "es"});

var visor = null;

//Esta es la funcion que se encarga de pasar pagina cada tres segundos
function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}

//Esta funcion sera llamada si no se puede cargar el libro
function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}

//Si el libro se ha podido cargar empezamos a pasar paginas
function LibroCargado() {
PasarPagina(visor);
}

function Inicializar() {
//creamos el objeto visor
visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));
//cargamos el libro
visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);
}

//Nos aseguramos de que la funcion es llamada cuando se cargue la pagina
google.setOnLoadCallback(Inicializar);

</script>

</head>

<body>
<div id="DOMVisor" style="width: 425px; height: 675px"></div>
</body>

</html>

y nos produciría este resultado:








y al final una ayuda....
Para aquellos que prefieran una solución más sencilla existe la herramienta Preview Wizard. Usando esta herramienta podrán generar automáticamente el código JavaScript para la visualización de uno o varios libros.

Os animo a probar estas APIs y ya de paso si alguno de vosotros las acaba usando en su site que no dude en enviarnos un correo con un link. Como siempre en un post posterior comentaremos las mejores implementaciones.

A cuidarse
Javier Arias González

Lo mejor del código de software libre escrito en un lenguaje es que se puede exportar a otro similar de forma relativamente sencilla y, de golpe, resulta útil para una audiencia totalmente nueva. Y esto es lo que está pasando con nuestras librerías JavaScript / AS3 de código abierto para Google Maps. Y nos encanta. Aquí os presentamos algunas de las últimas migraciones:

Lo mejor del código de software libre escrito en un lenguaje es que se puede exportar a otro similar de forma relativamente sencilla y, de golpe, resulta útil para una audiencia totalmente nueva. Y esto es lo que está pasando con nuestras librerías JavaScript / AS3 de código abierto para Google Maps. Y nos encanta. Aquí os presentamos algunas de las últimas migraciones:




DragZoomControl: Este control personalizado permite al usuario arrastrar un rectángulo en el mapa para acercarse a una zona concreta, y a mi personalmente me resulta super útil porque casi siempre utilizo el portátil, de modo que no tengo un ratón con rueda para acercarme al mapa. Esta adaptación es cortesía de Brian Richardson. Podéis echar un vistazo a la demo y a la documentación.


MarkerTracker: Esta clase permite realizar un "seguimiento" de los marcadores, de modo que cuando un marcador sale de la zona visible, aparece un marcador fantasma y una flecha que apunta a la dirección del marcador sobre el que se realiza el seguimiento. Para mapas que contienen un marcador principal, como un punto de interés, de origen o similar, esta función resulta especialmente útil para que los usuarios sepan volver al marcador inicial. Esta adaptación es cortesía de Michael Menzel. Podéis echar un vistazo a la demo y a la documentación.


KMLParser: Las clases de parseo de KML, que eran una migración básica de la librería C++ libkml, ahora soportan estilos KML. Esta mejora es cortesía de Cecil Reid. Podéis echar un vistazo a la demo y a la documentación.

Quiero aprovechar para dar las gracias a todos los programadores que nos ayudan a aumentar la librería. Si tú también tienes código que aportar y quieres contribuir, simplemente tienes que seguir los pasos que se describen en la wiki (en inglés) para hacerlo.

Pamela Fox