Paso 1 – Autenticación

Vamos a añadir un sistema de autenticación mediante el Social Plugin ‘Login Button’, el diálogo OAuth, y el protocolo de autenticación OAuth. No te asustes, pues tras tanta palabreja se esconde una única línea de código HTML

En primer lugar, vamos a crear el Login Button. Como ya sabemos, accedemos a la página del plugin, completamos el formulario, y obtenemos su código HTML, que será similar a éste:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>

Con sólo poner eso, ya tendremos el Login Button . ¿Y qué ocurrirá cuando lo pulsemos? Se desplegará automáticamente un diálogo OAuth (¿recuerdas los diálogos? Hablamos sobre ellos en la primera parte) que nos solicitará permiso para que la aplicación pueda acceder a nuestra información básica:

Con esto quizás sea suficiente. Pero vamos a enriquecerlo un poco, y en lugar de solicitar sólo la información básica, vamos a pedir permisos también para poder publicar nuevas noticias en su muro. Si recuerdas, en el apartado “Autenticación y permisos” de la primera parte de esta guía, hablamos de los distintos tipos de permisos. Puedes volver a consultar la lista completa de todos los que hay disponibles. En concreto el permiso para publicar en el muro se llama ‘publish_stream’. Para solicitarlo, debemos actualizar el código que genera el Loggin Button añadiendo el atributo ‘scope’ (puedes ver más sobre los atributos de Login Button en su documentación). Nos quedaría así:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1" scope="publish_stream" ></div>

Y el nuevo diálogo OAuth:

Como vemos, ha funcionado correctamente, y ahora también solicita permisos para publicar en el muro. Ver ejemplo.

Paso 2 – Conocer el SDK JavaScript

Hasta ahora no hemos usado directamente el SDK de JavaScript. Únicamente lo hemos cargado indicándole algunos valores, como por ejemplo que renderice automáticamente todos los objetos XFBML (gracias a eso hemos podido incluir los Social Plugins).

Vamos a revisar algunos métodos que nos van a ser especialmente útiles para nuestra demo (recuerda que puedes consultar la documentación completa del SDK de JavaScript en http://developers.facebook.com/docs/reference/javascript/):

FB.api

Este método es el que nos permitirá realizar consultas al Graph API, que como vimos en la primera parte, es la herramienta donde todos los objetos de Facebook (personas, páginas, imágenes, etc.) están interconectados, y a la que podemos invocar para realizar consultas o modificaciones. Este método acepta 4 parámetros:

1. path - String con la ruta al API.
2. method - Tipo de petición (GET, POST o DELETE).
3. params - Objeto con los parámetros de la consulta (si los necesitara).
4. cb - Función callback.

Usualmente sólo serán necesarios path y cb.

FB.getLoginStatus

Permite determinar si el usuario ha iniciado sesión y está conectado con nuestra aplicación. Acepta dos parámetros:

1. cb - Función callback con el parámetro ‘response’.
2. force - Booleano que obligar a recargar el estado de login.

Cuando se invoca a este método, se realiza una consulta HTTP que devuelve el objeto ‘response’ de la función callback. Este objeto tiene la siguiente estructura:

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

Si el objeto response contiene un objeto authResponse, sabremos con certeza que el usuario ha iniciado sesión y que está conectado a nuestra aplicación. Los campos accessToken y userID serán muy útiles para hacer llamadas a la API de Graph API. Pero no te preocupes por esto, ya que el SDK JavaScript se encarga de hacer todas las gestiones por nosotros como luego veremos sin necesidad de manejar nosotros esos parámetros

FB.getAuthResponse

Su funcionamiento es equivalente al del método FB.getLoginStatus. La única diferencia es que, en lugar de devolver un objeto response, sólo devuelve su campo authResponse. Es decir, llamaremos a FP.getAuthResponse cuando tengamos la certeza de que el usuario ha iniciado sesión (y está conectado a nuestra aplicación) y queramos obtener información acerca de la sesión.

FB.init

Este es el único método que hemos invocado directamente hasta ahora. Se encarga de inicializar el SDK. Acepta un único parámetro, options, de tipo objeto, que incluye todas las propiedades que queramos establecer. En concreto, hemos usado estas propiedades (existen más):

• appId – String con el ID público de nuestra aplicación.
• status – Booleano que indica si se debe o no comprobar el estado.
• cookie – Booleano que habilita o deshabilita el soporte para la cookie. Ésta podrá usarse posteriormente para que, desde el servidor, por ejemplo en PHP, se realicen peticiones al API.
• xfbml – Booleano que indica si se deben o no renderizar los objetos de tipo XFBML disponibles en la página. Gracias a esto, se han generado automáticamente hasta ahora los social plugins que hemos definido.
• channelURL – String con la URL del fichero channel.html. Usándolo se evitan algunos errores. Consulta la documentación de este método para saber más.
• oauth – Booleano que habilita o deshabilita soporte para OAuth 2.0. Tenlo siempre a true, pues muy pronto sólo se permitirá autenticación OAuth 2.0.

FB.login

Este método se encarga de gestionar el login por nosotros. Es decir, renderiza el diálogo OAuth con los permisos necesarios, y gestiona la respuesta devuelta por éste. No lo vamos a invocar directamente, pero ten en cuenta que el Login Button por debajo utiliza este método.

Tan solo acepta dos parámetros:

1. cb - Función callback para gestionar la respuesta del usuario.
2. opts - Objeto para modificar el comportamiento del login. Tan solo tiene una propiedad, ‘scope’, que como vimos más arriba acepta un string de los permisos que solicitamos, separados por coma.

FB.logout

Cierra la sesión del usuario. Sólo acepta un parámetro:

1. cb - Función callback para gestionar el cierre de sesión.

FB.ui

Es el responsable de renderizar por nosotros los diálogos. Ya lo hemos visto en funcionamiento cuando hemos pulsado el Login Button y se ha desplegado el diálogo OAuth. Pero, por supuesto, también podremos invocar a mano este método siempre que deseemos mostrar cualquier otro diálogo.

Acepta dos parámetros:

1. params - Objeto con todas las propiedades de configuración. Cada diálogo tiene sus propias propiedades (en la documentación de cada uno podrás conocerlas). Además, hay dos propiedades globales a todos los diálogos:
1. method - String con el nombre del diálogo que se desea mostrar. Obligatorio.
2. display - String que indica la forma en que se mostrará el diálogo, por ejemplo ‘popup’ . Opcional.
2. cb - Función callback para manejar la respuesta.

FB.Event.subscribe

JavaScript es un lenguaje dirigido por eventos. Siguiendo este paradigma, el SDK JavaScript genera una serie de eventos a los que podemos suscribirnos para ejecutar una función callback. Este método acepta dos parámetros:

1. name – String con el nombre del evento al que nos queremos suscribir.
2. fb – Función callback que se ejecutará cuando se dispare el evento.

Entre los posibles eventos están auth.login, auth.authResponseChange, auth.statusChange, auth.logout además de otros muchos. Algunos de estos eventos generan un objeto que se pasará como parámetro a su función callback. Revisa la documentación para conocer más detalles.

Del mismo modo que nos podemos suscribir a un evento, también nos podemos desuscribir de él, mediante el método FB.Event.unsubscribe.

FB.XFBML.parse

Si bien en la demo no vamos a invocar este método, convine conocerlo, pues se ejecuta igualmente. En las propiedades de inicialización del SDK establecimos el valor xfbml a true. Esto significa que será el método FB.init el que llame a FB.XFBML.parse automáticamente por nosotros. Si no fuera así, lo podríamos invocar a mano con los siguientes parámetros:

1. dom – Elemento DOM raíz a partir del cual se parsearán todos sus hijos XFBML.
2. cb – Función callback.

Resto de métodos

Todavía quedan algunos métodos del SDK JavaScript. Dos de ellos (FB.Data.query y FB.Data.waitOn) no los hemos visto, ya que quedarán obsoletos a partir del 1 de enero de 2012 (su comportamiento se puede llevar a cabo mediante FB.api). El resto de métodos tratan sobre canvas; es decir, para gestionar aspectos gráficos relacionados con el elemento iframe donde se ubican las aplicaciones que se empotran en la página de Facebook. Estos métodos sobre canvas los veremos en la siguiente parte.

Paso 3 – Juntándolo todo

Volviendo a nuestra demo, hemos visto que ésta ya nos permite autenticarnos. Pero esto por sí solo no es algo muy útil. Por eso ahora queremos que haga más cosas. En concreto:

• Queremos que cuando el usuario haya iniciado sesión, ya no se muestre el Login Button.
• Cuando haya iniciado sesión, se mostrará un botón para cerrar sesión.
• Además, consultaremos al Graph API algunos datos del usuario para mostrar su nombre y su avatar.
• Añadiremos un botón que publicará automáticamente una historia en su muro.
• Mostraremos un diálogo para invitar a nuestros amigos a usar la aplicación.
• De paso, y por simplificar, vamos a eliminar el plugin Live Stream y el plugin del botón “Me gusta”.

¿Parece mucho? Vas a ver qué sencillo es Añadimos este código HTML:

    <div id="user-box" style="text-align:center; display:none;">
        <img id="image"/>
        <div id="name"></div>
        <a href="#" id="logout" onclick="userLogout()">Cerrar sesión</a> <br />
        <a href="#" id="publish" onclick="publishStream()">Publicar en el muro</a> <br />
        <a href="#" id="request" onclick="requestDialog()">Invitar a amigos</a>
    </div>

Simplemente es un contenedor div, por defecto oculto, que mostrará una imagen, el nombre del usuario, y tres enlaces.

Vamos a por el nuevo código JavaScript que hemos añadido:

        FB.Event.subscribe('auth.login', function () {
            window.location.reload();
        });

        FB.Event.subscribe('auth.logout', function (response) {
            window.location.reload();
        });

        FB.getLoginStatus(function(response) {
            if (response.authResponse) {
                document.getElementById('fb-login-button').style.display = 'none';
                document.getElementById('user-box').style.display = 'block';
                FB.api('/me', function(user) {
                    if(user != null) {
                        var image = document.getElementById('image');
                        image.src = 'https://graph.facebook.com/' + user.id + '/picture';
                        var name = document.getElementById('name');
                        name.innerHTML = user.name
                    }
                });
            }
        });

        function userLogout() {
            FB.getLoginStatus(function(response) {
                if (response.authResponse) {
                    FB.logout();
                }
            });
        }

        function publishStream() {
            var body = 'Probando la demo del SDK de JavaScript de Facebook';
            FB.api('/me/feed', 'post', { message: body }, function(response) {
                if (!response || response.error) {
                    alert('Ha ocurrido un error');
                } else {
                    alert('¡Éxito! Entra a tu muro y verás una nueva publicación');
                }
            });
        }

        function requestDialog() {
            FB.ui({
                method: 'apprequests',
                message: 'Echa un vistazo a esta demo.',
                title: 'Compartir aplicación'
            });
        }

Paso a paso:

1. En primer lugar llamamos a FB.Event.subscribe para que cuando el usuario inicie sesión (es decir, cuando se lance el evento auth.login), la página se recargue.
2. Del mismo modo, cuando el usuario cierre sesión (cuando se lance el evento auth.logout), la página también se recargará.
3. Después invocamos a FB.getLoginStatus. Como vimos, con este método podemos saber si el usuario ha iniciado sesión y está conectado con nuestra aplicación, en función de si el objeto authResponse está o no presente. En ese caso de que lo esté (está conectado):
1. Ocultamos el Login Button
2. Mostramos el div contenedor.
3. Realizamos una llamada a la API (FB.api) consultando información sobre el usuario activo. Construimos la URL de su avatar y lo establecemos a la imagen que hay dentro del div contenedor. E igualmente, extramos su nombre completo y lo escribimos en el div con id ‘name’.
4. Ahora definimos la función userLogout() que se invoca al hacer clic sobre el texto “Cerrar sesión”. Comprobará si se ha iniciado sesión, y en caso afirmativo, la cierra (FB.logout).
5. La función publishStream se ejecuta cuando se hace clic sobre el texto “Publicar en el muro”. Mediante FB.api, realiza una llamada al método ‘/me/feed’ del Graph API, usando una petición POST, y con el mensaje de ‘body’. Tras realizar la petición, se le notifica al usuario de si se ha publicado con éxito o no la historia.
6. Por último, definimos la función requestDialog, que se invoca al hacer clic sobre “Invitar a amigos”. Esta función realiza una llamada a FB.ui, pasándole tres parámetros (nombre del diálogo, texto de la petición, título de la petición), y genera el diálogo Request que permite enviar una invitación a los amigos para que usen la aplicación.

Ver demo completa.

Resumen

Hasta ahora ya conocíamos por encima todo el ecosistema de tecnologías para desarrollar en Facebook, y habíamos creado una primera aplicación que hacía uso de algunos Social Plugins y de Open Graph.

Esta vez ya nos hemos ensuciado más las manos. Hemos instanciado un nuevo Social Plugin (el Login Button), que nos ha generado el diálogo OAuth, con el que hemos podido solicitar determinados permisos para nuestra aplicación. Después hemos revisado los principales métodos del SDK JavaScript, y hemos visto cómo muchos de esos métodos ya estaban funcionando incluso sin invocarlos nosotros a manos. Después hemos puesto en práctica nuestro conocimiento del SDK: nos hemos atado a eventos generados por Facebook (auth.login y auth.logout), permitimos mostrar diferente contenido en función de si se ha iniciado o no sesión, consultamos en la API y mostramos información básica del usuario, hemos visto cómo cerrar sesión, cómo publicar en el muro del usuario directamente, y hemos creado un diálogo Request para invitar a nuestros amigos a usar la aplicación.

No está mal, ¿no? Con lo que ya conocemos, y un poco de imaginación, podemos crear aplicaciones muy ricas en funcionalidades. Pero todavía nos quedan algunas cosas por ver en esta serie introductoria a la programación en Facebook: cómo crear aplicaciones canvas, y cómo manejar el PHP SDK. Nos vemos en la siguiente parte y, como siempre, ¡gracias por leer!

Ok, el anterior artículo no estuvo mal; vimos una introducción conceptual a las piezas clave para la construcción de aplicaciones en Facebook. ¡Pero no llegamos a hacer nada! En este post vamos a construir algo sencillo, jugando con el SDK en JavaScript. Vamos a probar a mostrar algunos de los social plugins, usaremos Open Graph, y presentaremos dos nuevas tecnologías: XFBML y Facebook Insights. ¡Al lío!

Paso 1 – Alojamiento para la aplicación

Es responsabilidad del desarrollador buscar un alojamiento para su aplicación. Esto no suele ser un problema, ya que sirve cualquiera al que tengas acceso FTP. Sin embargo, desde el 1 de octubre de 2011 Facebook obliga a que las aplicaciones estén disponibles tanto por HTTP como por HTTPS.

Por lo pronto vamos a crear una carpeta llamada “/facebook” en el directorio raíz de la web, que será desde donde se acceda a nuestra aplicación.

Paso 2 – Configurando la aplicación

Ahora, accedemos a developers.facebook.com, y de ahí vamos a la pestaña Aplicaciones. Seleccionamos la nuestra, y en el apartado de configuración pinchamos en “Edit settings“. En la parte inferior, tal como vimos en el anterior artículo, nos dan cuatro opciones para crear nuestra aplicación. Vamos a seleccionar Website e introducimos la URL completa con la que se accederá a nuestra aplicación. En mi caso, introduzco http://chusete.es/facebook.

Pulsamos en Guardar cambios, y ya está. Ésta ha sido fácil

Paso 3 – Creando el esqueleto

Ahora, en la carpeta /facebook de nuestro alojamiento web, vamos a crear un fichero llamado index.html con la estructura básica de un documento HTML. Además, añadiremos el código JavaScript que vimos en el anterior artículo que había que insertar para usar el SDK. Quedaría así el esqueleto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Demo Facebook</title>
</head>
<body>
    <h1>Demo Facebook</h1>

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
    <script type="text/javascript">
        FB.init({
            appId  : '256797284360192',
            status : true, // comprobar estado de login
            cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
            xfbml  : true, // renderizar código XFBML
            channelURL : 'http://chusete.es/facebook/channel.html', // fichero channel.html
            oauth  : true // habilita OAuth 2.0
        });
    </script>
</body>
</html>

<script src="http://connect.facebook.net/es_ES/all.js"></script>

Llegados a este punto, ya tenemos listo el esqueleto sobre el que construir una pequeña aplicación de demo. Ver resultado del paso 3.

Paso 4 – Añadiendo Social Plugins (XFBML)

Ya vimos que hay, ni más ni menos, que 10 social plugins. Vamos a insertar algunos a nuestra aplicación. Pero antes un poco de teoría. Hace tiempo, Facebook creó su propio lenguaje de marcado para poder insertar social plugins en nuestras aplicaciones. Hablamos del FBML (Facebook Markup Language). Para que pudierar interactuar con JavaScript, crearon FBJS; un dialecto de JavaScript para usarlo en conjunto con FBML dentro del espacio de Facebook. Sin embargo, desde el 11 de marzo de 2011, todo este conjunto de tecnologías ha quedado fuera de uso. ¿Y qué hay en su lugar? Pues un sistema unificado para todas las aplicaciones, ya sean pestañas, aplicaciones en canvas, externas, etc., basado en tecnologías estándar: HTML, CSS y JavaScript. Mucho mejor, ¿verdad?

Para sustituir a FBML crearon XFBML, que es un sistema que, mediante etiquetas HTML estándar, permite definir Social Plugins. Por ejemplo, el botón “Me gusta” es algo tan sencillo como:

<div data-send="false" data-width="450" data-show-faces="false"></div>

¿Cómo se hace para que ese código HTML se renderice como el Social Plugin “Me gusta”? Hay dos opciones:

1. Si en el código de inicialización del SDK JavaScript (el método FB.init que hemos invocado en index.html) tenemos a true el campo xfbml, entonces se renderizarán todas las etiquetas XFBML automáticamente.
2. En caso contrario, podremos renderizarlas invocando a FB.XFBML.parse.

Vale, ahora sólo nos queda saber cómo averiguar el código HTML que define cada Social Plugin. Accede a la página de Social Plugins, elige el que quieras usar, completa el formulario con los valores que desees (si es que el plugin te da esa opción), y finalmente pulsa sobre el botón Get Code. ¡Pero ojo! El código que te genera incluye tanto la inicialización del SDK, como el código HTML que define el plugin. Como nosotros ya tenemos el código del SDK, sólo tendremos que copiar el código HTML del plugin.

Por ejemplo, vamos a insertar un plugin Live Stream en nuestra demo. Al pulsar en Get Code obtenemos lo siguiente:

Copiamos sólo el código HTML:

<div data-event-app-id="282078738484719" data-width="400" data-height="500" data-always-post-to-friends="false"></div>

Con lo que ya tendríamos un chat en nuestra aplicación web, con el siguiente aspecto:

Ver resultado del paso 4.

Paso 5 – Botón “Me gusta” y Open Graph

Del mismo modo que hemos insertado un plugin Live Stream, ahora vamos a insertar el famoso botón “Me gusta”. Como vimos, para obtener el código XFBML debemos acceder a la página del plugin, completar el formulario, obtenemos su código, y lo copiamos. Siguiendo esos pasos obtendrás algo similar a esto (en función de cómo complementes el formulario):

<div data-send="false" data-width="450" data-show-faces="false"></div>

Con solo pegar ese código al documento HTML, ya tendremos el botón en nuestra página. ¡Pero un momento! Como vimos en la primera parte, existe una tecnología llamada Open Graph que convierte un documento web en todo un objeto social, referenciable y al que como administradores podemos seguirle el rastro. Pues bien, vamos a hacer esto. En la propia página del plugin del botón “Me gusta” tenemos un formulario que nos permite generar algunos códigos Open Graph -aunque generarlos a mano es algo trivial. En mi caso, lo he dejado así:

<meta property="og:title" content="Página demo de Facebook" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Ésta es la página de demo de la segunda parte de la introducción a programación en Facebook de chusete.es" />
<meta property="og:url" content="http://chusete.es/facebook/index.html" />
<meta property="og:image" content="http://chusete.es/facebook/logo.png" />
<meta property="og:site_name" content="chuso!" />
<meta property="fb:admins" content="1048522537" />

Ahora, cuando alguien comparta esta página en Facebook, ésa será la información que se mostrará por defecto. Por ejemplo, en este caso quedaría así:

Ver resultado final.

Paso 6 – Página para administradores e Insights

Pero hay más. Junto con la información Open Graph hemos insertado una etiqueta más, en la que el atributo property tiene como valor “fb:admins”. Ese campo contiene el id de nuestro usuario, de manera que así constaremos como el propietario de la página. ¿De qué nos sirve esto? Pues en resumen, para dos cosas. Fíjate en cómo queda el botón “Me gusta” cuando tú lo visualizas:

Interesante… Hay un link a “Página para administradores” y a “Estadísticas”. ¿Qué son?

Página para administradores

Cuando alguien pulse sobre el botón “Me gusta”, se creará un nuevo panel de administración con el que podrás comunicarte con tus “likers” (aquellos a los que les ha gustado tu publicación). Este panel estará disponible desde tu lista de Facebook Pages. Y lo más interesante: todo lo que publiques en el muro de esta página, aparecerá en las lista de novedades de los usuarios a los que les gustó tu publicación.

Insights

Y en segundo lugar, tendrás acceso a las estadísticas en Facebook Insights (¡otra más de las tecnologías de Facebook!). Básicamente, es un panel de análisis de tráfico web, similar a Google Analytics. Puedes acceder desde el enlace “Estadísticas” que acompaña al botón “Me gusta”, pero es preferible reclamar la propiedad de tu dominio ante Facebook, para de ese modo tener acceso completo a todo lo que ocurre con tu página. Para ello, accedemos a la página principal de Insights, y pulsamos sobre el botón . Mete el dominio de tu web, copia el código “meta” que te ha generado, y pégalo en la página principal del dominio:

Finalmente pulsa en Get Insights y ya habrá finalizado el proceso de alta en Facebook Insights. Ahora, cada vez que accedas al dashboard de Insights, podrás consultar qué historias de tu página se han compartido o han gustado en Facebook.

Para más información, consulta la documentación de Facebook Insights.

Resumen

En la primera parte dimos un repaso a las principales tecnologías que involucran el desarrollo de aplicaciones Facebook, y dimos de alta un nuevo perfil de aplicación.

Hoy, hemos visto cómo crear una aplicación en una web externa a Facebook vinculada a nuestro alojamiento. Hemos creado un documento HTML con el código de incialización del SDK JavaScript. Hemos conocido una tecnología de Facebook -XFBML- que nos permite crear plugins de una forma muy sencilla. Como ejemplo, hemos creado un plugin de tipo Live Stream, y otro con el botón “Me gusta”. También hemos añadido los códigos Open Graph y hemos visto su utilidad. Finalmente, hemos visto cómo interactuar con los usuarios a los que les gustan nuestras publicaciones, y cómo explorar las estadísticas de uso de nuestro sitio por los usuarios de Facebook.

¿De modo que te han pedido que hagas una aplicación para Facebook y no sabes por dónde empezar? ¿Has llegado a la documentación oficial y te pierdes entre tanto Open Graph, SDK, plugins, dialogs y Graph API? Don’t panic! En este artículo vamos a ver paso a paso cómo empezar a programar en el nuevo sistema de Facebook. ¡Al lío!

Tipos de aplicaciones

En el apartado Getting Started de la documentación oficial vemos que nos dan tres opciones:

1. Páginas web. Para crear una aplicación que se ejecute en tu página web fuera de Facebook.
2. Aplicaciones móviles. Para crear apps para las principales infraestructuras móviles.
3. Aplicaciones en Facebook. Este decir, para crear una aplicación que se insertará dentro de la web de Facebook, en un canvas.

En cualquiera de los tres casos, las tecnologías que utilizaremos serían básicamente las mismas.

Más adelante revisaremos algunas de las tecnologías que nos ofrece Facebook para integrar nuestra aplicación con su infraestructura.

Además, en la página de inicio ofrecen un apartado de ejemplos donde podrás probar y descargar distintas demos, como el de una aplicación en página web, o una aplicación dentro de un canvas en Facebook. También puedes acceder a vídeos con charlas y guías.

Dando de alta una aplicación

Para entender mejor todos los apartados, y para poder realizar algunos ejemplos, vamos a crearnos una nueva aplicación. Para ello, vamos a seguir los siguientes pasos:

Accedemos a la página de desarrolladores de Facebook: https://developers.facebook.com/

Una vez ahí, seleccionamos “Aplicaciones” en el menú.

En tercer lugar, pulsamos sobre el botón .

Ahora indicamos un nombre y la local de la aplicación y pulsamos Continuar:

Completamos el captcha y pulsamos sobre Enviar:

Y con esto ya estaría dada de alta nuestra aplicación:

Fíjate en la caja superior. Verás dos campos: App ID y App Secret. Estos código los necesitarás para hacer funcionar tu aplicación. El primero es el código que identifica la app, y el segundo es un código de seguridad que utilizarás para la autenticación en el lado del servidor.

Por lo pronto, podemos cambiar los siguientes campos:

• Logo. Corresponde al logo de 75×75 px de la aplicación.
• Icono. Icono de 16×16 px de la aplicación
• App Secret. Este código no debemos compartirlo con nadie. Desde este apartado podremos reiniciarlo si lo deseáramos.
• App Display Name. Nombre con el que se mostrará la aplicación.
• App Namespace. Nombre del espacio de nombres de la aplicación, formado únicamente por caracteres en minúsculas, guiones medios y guiones bajos.
• Contact Email. Dirección de correo electrónico de contacto.
• App Domain. Dominio sobre el que se alojará la aplicación (por ejemplo www.example.com).
• Category y Sub-category. Categorías en las que catalogamos la aplicación.

Además, vemos que podemos definir 4 formas distintas de integrar la aplicación con Facebook:

1. Website. Para cuando queramos que en nuestra página puedan los usuarios hacer login con su cuenta de Facebook.
2. App on Facebook. Aplicación para incorporar en un canvas dentro de Facebook.
3. Mobile Native. Para crear una aplicación para móviles.
4. Page Tab. Permite crear una aplicación que se mostrará como una pestaña dentro de una Facebook Page.

Y estas son todas las opciones básicas que tenemos disponibles para configurar una aplicación de Facebook. Sin embargo, podemos acceder a la configuración avanzada desde el menú de la izquierda, pulsando sobre Configuration > Advanced:

En este apartado avanzado por ahora podremos establecer la descripción de nuestra aplicación, y el Sandbox Mode (habilitado indica que sólo los desarrolladores pueden acceder a la aplicación).

Rápido e indoloro, ya tenemos nuestra aplicación creada . Cada vez que queramos volver a la configuración de nuestra aplicación, tan solo tendremos que acceder a la página de desarrolladores de Facebook, apartado Aplicaciones, y seleccionamos la opción deseada.

Tecnologías disponibles

Bien, y ¿qué tecnologías nos ofrece Facebook para implementar una aplicación? Éstas son las principales:

1. Social plugins

Corresponde a pequeños plugins o widgets que se pueden incorporar muy fácilmente en cualquier página web ajena a Facebook. Accediendo a la página de cada uno de ellos verás un pequeño formulario que te genera el código necesario para que lo incorpores en tu página. Seguro que estás muy familiarizado con casi todos ellos:

Botón “Me gusta”.
Es el más famoso de todos los plugins. Permite a los usuarios compartir con un solo clic la página que están visitando

Botón “Enviar”.
Permite que los usuarios envíen a alguno/s de sus contactos la página que están visitando.

Comentarios.
Para añadir un sistema de comentarios a tu página web.

Feed de actividades.
Muestra una lista de las últimas actividades que han llevado a cabo tus contactos de Facebook.

Recomendaciones.
Muestra al usuario una lista personalizada de enlaces recomendados, en función de diferentes parámetros, como por ejemplo las preferencias de sus amigos.

Caja “me gusta”.
Similar al botón “Me gusta”, pero con más elementos. Por ejemplo, muestra las últimas actividades de la página, o una lista de personas a las que les gusta.

Botón “Login”.
Botón que permite iniciar sesión en la página utilizando la infraestructura de sesiones de Facebook.

Registro.
Formulario de registro a una página que se rellena automáticamente con tus datos de Facebook. De este modo, se ahorra tiempo a los usuarios.

Facepile.
Muestra una lista de imágenes de perfil de los usuarios a los que les ha gustado la página que se está visitando.

Live Stream.
Muestra un pequeño ‘chat’ vinculado a la página que se está visitando.

Como ves, a base de insertar este tipo de plugins, puedes crear una página web muy rica en funcionalidades en un tiempo récord. A modo de demostración, puedes consultar esta página, que forma parte del apartado de ejemplos de Facebook. Esta demo hace uso del botón “me gusta”, del feed de actividades, de las recomendaciones y de los comentarios.

2. Diálogos

Podemos definir los diálogos como ventanas emergentes que solicitan al usuario permiso para realizar alguna acción.

Podemos invocar los diálogos a mano, sin embargo en general suele ser mucho más cómo realizarlo mediante alguno de los SDK que Facebook nos ofrece. En concreto, para páginas web, utilizaremos el SDK JavaScript mediante el método FB.ui. En el apartado del SDK de JavaScript veremos cómo invocar estos diálogos.

Por lo pronto, vamos a ver cuáles son los distintos diálogos que nos ofrece Facebook:

Diálogo de Feed

Permite al usuario añadir a su muro, desde nuestra aplicación, una publicación.

Diálogo de amigos

Muestra un diálogo para añadir a un amigo.

Diálogo OAuth

Solicita al usuario unas determinadas autorizaciones, y concede permisos a la aplicación.

Diálogo de Pago

Permite al usuario adquirir nuevos créditos de Facebook.

Diálogo de petición

Diálogo que permite al usuario enviar una petición a uno o más amigos.

Diálogo de envío

Diálogo para que el usuario envíe un mensaje a algún amigo, a un grupo de amigos, o a una dirección de correo.

3. Autenticación y Permisos

A menudo necesitaremos que los usuarios nos autoricen a acceder a su información. Por ejemplo, cuando queramos que puedan iniciar sesión en nuestra web utilizando su cuenta de Facebook, o cuando desde nuestra aplicación queramos acceder a determinados campos de su perfil de usuario. Para solicitar esta autorización utilizaremos el Diálogo OAuth.

Cada vez que se utiliza el diálogo OAuth, podremos pasarle información al diálogo acerca de la los permisos de acceso que autorizará el usuario. Te recomiendo que revises la lista de todos los posibles permisos. Además, ten en cuenta que cuantos más permisos solicites a un usuario, menor será el número de personas que decidan autorizar a tu aplicación.

Existen dos métodos posibles de autenticación: Desde el servidor, o desde el cliente. Pero, para simplificar, podemos decir que son equivalentes el uno al otro.

4. Graph API

El nucleo de Facebook es un grafo social, donde cada persona, foto, evento o página tiene su ID único, y donde existen conexiones entre todos ellos (por ejemplo, amistades, etiquetas en fotos, contenidos compartidos, etc.).

Para acceder a las propiedades de cualquiera de estos objetos accederemos a la URL: https://graph.facebook.com/ID cambiando ID por el identificador del objeto que queramos consultar. Como resultado, nos devolverá un objeto JSON.

Por ejemplo, al comienzo de este artículo creamos una aplicación. Puedes coger el App ID de tu aplicación y acceder a su información. Te saldrá algo similar a esto:

{
   "id": "256797284360192",
   "name": "chusete demo",
   "description": "Aplicaci\u00f3n de pruebas de Chusete",
   "category": "Utilities",
   "subcategory": "News",
   "link": "http://www.facebook.com/apps/application.php?id=256797284360192"
}

En el caso de los usuarios y de las páginas, cuando tengan un alias, se podrá usar como alternativa al ID.

Por supuesto, todas estas peticiones devuelven por defecto tan solo la información pública de ese objeto/persona. Para acceder a información privada, debemos contar con su autorización. Esta autorización se proporciona mediante el parámetro GET access_token.

5. Open Graph Protocol

Esto no es una tecnología del core de Facebook propiamente dicha, pero sí es algo sobre lo que se apoya. ¿De qué se trata? Voy a explicarlo mediante un ejemplo. Supón que creas una página web de restaurantes, donde cada uno tiene su propia URL. Un día un usuario comparte esta URL en Facebook. ¿Qué ocurrirá? Que Facebook elegirá la información y las imágenes que él considere relevante. Pero, ¿y si quisiéramos nosotros decirle a Facebook (y otras redes sociales) la información que debe mostrar? Para dar respuesta a eso surge el protocolo Open Graph.

En otras palabras: Hace que nuestras páginas web se conviertan en objetos “del mundo real” con el que pueden interactuar las redes sociales. Películas, restaurantes, celebridades, etc.

En el caso concreto de Facebook, además, cuando un usuario haga clic en el plugin del botón “Me gusta” de una de tus páginas, será equivalente a que hiciera clic en “Me gusta” de alguna de las Facebook Pages, por lo que podrás enviarle actualizaciones a su Feed. Mola, ¿no?

Su funcionamiento no podría ser más sencillo. Open Graph Protocol está basado en RDFa, por lo que mediante etiquetas meta puedes añadir semántica a tus páginas. Además, para una correcta integración con Facebook, debes añadir el plugin del botón “Me gusta”.

Para más información, revisa la página oficial de Open Graph Protocol: http://ogp.me/

6. Otras tecnologías

Además de todas las tecnologías que hemos visto, existen otras de tipo avanzado que, por lo general, no será necesario usarlas. En concreto estaríamos hablando de:

• FQL. Facebook Query Language, o Lenguaje de consultas de Facebook. Similar a SQL, sirve para consultar los datos que ofrece Graph API.
• API de internacionalización. Mediante esta API puedes aprovechar la infraestructura de internacionalización de Facebook para tu aplicación.
• API de créditos. Para que los usuarios puedan realizar pagos de créditos de Facebook para utilizar en tu aplicación.
• API de publicidad. Permite crear y gestionar mediante código tus campañas publicitarias.
• API de Chat. Para aquellos desarrolladores que quieran integrar el chat de Facebook en sus aplicaciones, mediante el protocolo estándar Jabber/XMPP.

APIs obsoletas. Además, existen determinadas APIs que han quedado obsoletas y a las que pronto Facebook dejará de dar soporte, como la API REST, el lenguaje de marcado FBML, o la API JavaScript.

SDKs

Por último, vamos a repasar los distintos kits de desarrollo que nos regala Facebook. Cabe destacar que no es imprescindible utilizarlos, ya que podremos realizar la autenticación, invocación de diálogos, o las llamadas a la API a mano. Pero, como podrás imaginar, resulta mucho más sencillo utilizar una herramienta ya probada que lo haga por nosotros.

Existen cuatro SDKs:

1. JavaScript SDK.
2. PHP SDK.
3. iOS SDK (iPhone & iPad).
4. Android SDK.

Aquí vamos a hablar de los dos primeros.

1. JavaScript SDK

Permite realizar llamadas a la Graph API, crear diálogos, renderizar los Social Plugins, además de otras muchas cosas. Para usar el SDK, debemos  intrducir el siguiente código a nuestra aplicación:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'ID DE TU APP',
    status : true, // comprobar estado de login
    cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
    xfbml  : true, // ejecutar código XFBML
    channelURL : 'http://WWW.MIDOMINIO.COM/channel.html', // fichero channel.html
    oauth  : true // habilita OAuth 2.0
  });
</script>

Y en el fichero channel.html añades el siguiente contenido:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Y ya lo tienes. Tu página está preparada para ejecutar código del SDK JavaScript de Facebook.

2. PHP SDK

El SDK oficial para PHP de Facebook es un proyecto open source que se encuentra alojado en GitHub:  https://github.com/facebook/php-sdk/.

Si bien existe un ejemplo básico, pero completo, sobre su uso, vamos a resumir aquí las principales operaciones:

Código de inicialización:

require 'php-sdk/src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'TU_APP_ID',
  'secret' => 'TU_APP_SECRET',
));

// Obtener ID de usuario
$user = $facebook->getUser();

Llamada a la API (Graph API):

if ($user) {
  try {
    // Procedemos sabiendo que tenemos un usuario que ha iniciado sesión y concedido permisos.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

Obtener URLs de inicio de sesión y de salida:

if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

Resumen

Este ha sido un post bastante extenso, al que le seguirán otros con distintos casos de uso. Por lo pronto, hemos visto que es posible implementar distintos tipos de aplicaciones para Facebook: para el móvil, para una página web, y empotradas en Facebook. Hemos revisado paso a paso el proceso de alta de una nueva aplicación, donde establecemos los parámetros básicos, el nombre, logo, descripción, etc. También hemos revisado todas las tecnologías que nos ofrece Facebook para desarrollar aplicaciones en su ecosistema: Social Plugins, Diálogos, Autenticación y permisos, Graph API y Open Graph. Por último, hemos repasado las distintas bibliotecas que nos da Facebook para facilitar el desarrollo de aplicaciones en JavaScript, PHP, iOS y Android, centrándonos en las dos primeras.

Ahora que conocemos bien todo marco de trabajo sobre el que se apoyan las aplicaciones en Facebook, estamos listos para comenzar. En el siguiente post realizaremos una pequeña aplicación que sirva como demo de todos estos conceptos.

Uno de los motores más populares es box2d. De hecho, es el que utiliza el propio Angry Birds. Y por supuesto existen ports de esta biblioteca para muchísimos lenguajes de programación, incluido, claro está, el pequeño gran JavaScript. En concreto la versión JavaScript está extraída automáticamente de la versión de ActionScript. Si quieres ver algunos ejemplos en vivo, entra a la web de box2d-js. Lo que ahora vamos a hacer, lo puedes ver aquí abajo (prueba a hacer clic sobre el lienzo).

Dejemos de hablar, y vamos a mancharnos las manos

Paso 1 – Preparando el entorno

Lo primero que tenemos que hacer es crear el código HTML. box2djs depende de dos bibliotecas:

1. Prototype, como framework javascript.
2. excanvas, para añadir soporte canvas a Internet Explorer.

Además, crearemos ya el objeto canvas, al que le estableceremos el ancho y alto, y sus propiedades CSS. Nos quedará el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="lib/prototype-1.6.0.2.js"></script>
<script src="lib/box2djs.min.js"></script>
</head>
<body>
<canvas id="canvas-world" style="position:absolute; top:0; left:0;background-color:#F5F5F5;width:800px; height:500px;"></canvas>
</body>
</html>

Ver demo. Como vemos, no ocurre gran cosa. Tan sólo vemos una gran caja gris

Paso 2 – Crear el mundo

En este paso vamos a crear el mundo en el que todo sucederá. Vamos a ver el código JavaScript que hace lo define:

            var world;
            var ctx;
            var canvasWidth;
            var canvasHeight;

            // Función que crea el mundo.
            function createWorld() {
                var worldAABB = new b2AABB();
                worldAABB.minVertex.Set(-1000, -1000);
                worldAABB.maxVertex.Set(1000, 1000);
                var gravity = new b2Vec2(0, 300);
                var doSleep = true;
                world = new b2World(worldAABB, gravity, doSleep);

                return world;
            }

            // Punto de entrada principal. Cuando se cargue la ventana:
            Event.observe(window, 'load', function() {
                world = createWorld();
       		ctx = $('canvas-world').getContext('2d');

       		var canvasElm = $('canvas-world');
       		canvasWidth = parseInt(canvasElm.width);
       		canvasHeight = parseInt(canvasElm.height);
       		var canvasTop = parseInt(canvasElm.style.top);
       		var canvasLeft = parseInt(canvasElm.style.left);
            });

En primer lugar definimos cuatro variables globales que utilizaremos en el resto de la aplicación. Después, definimos la función createWorld(), y finalmente vinculamos el evento “load” de la ventana, al código de la función anónima. Este código por ahora hace una llamada a createWorld(), extrae el lienzo 2d del canvas, y calcula su ancho/alto y sus coordenadas. Pero vamos a ver qué hace createWorld():

La primera línea crea un nuevo objeto de tipo b2AABB. Estos objetos definen un espacio en 2 dimensiones. En las dos líneas siguientes establecemos los extremos donde este espacio termina. En concreto nuestro espacio, worldAABB, va desde las coordenadas (-1000,-1000) hasta las coordenadas (1000,1000).

Después creamos un vector gravitacional. El primer valor, 0, corresponde a la gravedad horizontal. El segundo, 300, la gravedad vertical. Es decir, podemos crear una gravedad lateral

Otra opción que definimos es la posibilidad de que los objetos se “duerman” cuando entren en reposo. Esto lo hacemos asignando true a la variabel doSleep.

Finalmente creamos el objeto mundo, de la clase b2World, pasándole como parámetros al constructor las variables que acabábamos de crear.

Ver demo. En este caso, de nuevo no ocurre nada. Tan sólo hemos definido el modelo virtual, sin atarlo al canvas.

Paso 3 – Crear un suelo

En nuestro ejemplo va a haber un suelo. En resumen, tan sólo es una caja con posición fija ocupando toda la parte inferior visible. Este es el código que lo define:

            // Añade un suelo al mundo
            function createGround(world) {
                var groundSd = new b2BoxDef();
                groundSd.extents.Set(400, 30);
                groundSd.restitution = 0.0;
                var groundBd = new b2BodyDef();
                groundBd.AddShape(groundSd);
                groundBd.position.Set(400, 470);
                return world.CreateBody(groundBd);
            }

Además, añadimos una llamada a createGround(world) antes del return de la función createWorld(). Vamos a ver en qué consiste la creación del suelo:

Primero creamos un objeto b2BoxDef, que no es más que un objeto que define una forma rectangular. A continuación establecemos su tamaño (400 x 30), y su elasticidad (0.0). El factor de elasticidad 0.0 es el mínimo. Cuanto más alto, más elástico será el material de la forma que estamos definiendo.

A continuación creamos un cuerpo físico, al que le añadimos la forma que acabamos de crear. Por último establecemos las coordenadas en las que lo colocamos (400, 470), y lo añadimos al mundo.

Ver demo. Todavía no ocurre nada. Tan sólo hemos añadido la definición y las características del suelo, pero nuestro mundo todavía no se ha arrancado, ni se ha vinculado al canvas.

Paso 4 – Dibujando en el lienzo

Bien, ya vamos avanzando En este paso vamos a implementar el código encargado de dibujar en el canvas nuestro mundo virtual. Veamos cómo es:

            function drawWorld(world, context) {
                for (var b = world.m_bodyList; b; b = b.m_next) {
                    for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
                        drawShape(s, context);
                    }
                }
            }

            function drawShape(shape, context) {
                context.strokeStyle = '#ffffff';
                context.fillStyle = "black";
                context.beginPath();
                switch (shape.m_type) {
                    case b2Shape.e_polyShape:
                        {
                            var poly = shape;
    				        var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
                            context.moveTo(tV.x, tV.y);

                            for (var i = 0; i < poly.m_vertexCount; i++) {
                                var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
                                context.lineTo(v.x, v.y);
                            }
                            context.lineTo(tV.x, tV.y);
                        }
                        break;
                }

                context.fill();
                context.stroke();
            }

Si nunca has trabajado con canvas, este es un buen momento para que revises algún artículo. Por ejemplo, este de Mozilla, o este de Thinkvitamin.

Por un lado tenemos la función drawWorld, que se encarga de recorrer cada uno de los objetos del mundo, y cada una de las formas que contienen los objetos, para finalmente llamar a la función drawShape, que dibujará en el lienzo canvas la forma.

Por otro lado tenemos drawShape, que es la función que dibuja cada forma. En primer lugar establecemos los colores de línea (stroke) y de relleno (fill). Posteriormente indicamos que vamos a comenzar a dibujar en el lienzo. A continuación dibujamos la forma que corresponda; por ahora tan sólo dibujamos polígonos.

Para cada polígono, calculamos las coordenadas de su primer vértice. A continuación, dibujamos líneas entre cada uno de los siguientes vértices que encontremos, hasta finalmente, cerrar el polígono.

Y por último indicamos al contexto del lienzo que renderice el relleno y las líneas.

Ver demo. ¡Cómo es posible! ¡Todavía no ocurre nada! Esto es porque falta la función que da vida y que arranca al sistema. ¡Vamos al siguiente paso!

Paso 5 – Arrancando el sistema

Ya ha llegado el momento; vamos a unir nuestro sistema, con nuestro canvas, y a hacer que funcione en el tiempo. Para ello vamos a añadir una nueva función:

            function step(cnt) {
                var timeStep = 1.0/60;
                var iteration = 1;
                world.Step(timeStep, iteration);
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                drawWorld(world, ctx);
                setTimeout('step(' + (cnt || 0) + ')', 10);
            }

Y vamos a hacer que la función anónima que se ejecuta al cargar la página, invoque a esta función, añadiendo al final:

step();

¿Qué hace step()? Cada vez que se invoca, realiza una nueva iteración en el sistema. En primer lugar establece los frames per second del sistema físico. Por convenio suele utilizarse a 60Hz, es decir, 1.0/60. En cada uno de estos instantes, se realizará una simulación con las equaciones físicas.

A continuación definimos el número de iteraciones por cada instante. Cuanto más bajo sea el valor, más precisión, así como mayor consumo de recursos.

En la tercera línea, indicamos al mundo que avance un nuevo paso. Es en este momento cuando se realizan todos los cálculos para ver en qué estado se encuentra cada objeto del sistema.

Después, limpiamos el lienzo, ya que en la siguiente línea hacemos una llamada a drawWorld para dibujar todo el sistema.

Finalmente establecemos un timeout para volver a ejecutar un paso (step()) en los siguientes 10 milisegundos.

Ver demo. ¡Viva! Al fin se ve algo No es gran cosa, pero ya tenemos dibujado el suelo en nuestro lienzo.

Paso 6 – Añadiendo más objetos al mundo

El paso anterior ha estado bien, pero vamos a hacer que nuestro mundo sea más rico en detalles. En concreto vamos a añadir unos polígonos que escriban el mensaje “Hola Mundo!” Esta es la función que lo crea:

            function createBox(world, x, y, width, height, fixed) {
                if (typeof(fixed) == 'undefined') fixed = true;
                var boxSd = new b2BoxDef();
                if (!fixed) boxSd.density = 1.0;
                boxSd.restitution = 0.0;
                boxSd.friction = 1.0;
                boxSd.extents.Set(width, height);
                var boxBd = new b2BodyDef();
                boxBd.AddShape(boxSd);
                boxBd.position.Set(x,y);
                return world.CreateBody(boxBd);
            }

            function createHelloWorld() {
                // H
                createBox(world, 50, 420, 10, 20, false);
                createBox(world, 90, 420, 10, 20, false);
                createBox(world, 70, 395, 30, 5, false);
                createBox(world, 50, 370, 10, 20, false);
                createBox(world, 90, 370, 10, 20, false);

                // O
        	createBox(world, 140, 435, 20, 5, false);
        	createBox(world, 155, 405, 5, 25, false);
       		createBox(world, 125, 405, 5, 25, false);
        	createBox(world, 140, 375, 20, 5, false);

        	// L
       		createBox(world, 200, 435, 20, 5, false);
       		createBox(world, 185, 400, 5, 30, false);

       		// A
       		createBox(world, 240, 410, 5, 30, false);
       		createBox(world, 278, 425, 5, 15, false);
       		createBox(world, 265, 405, 20, 5, false);
       		createBox(world, 280, 390, 5, 10, false);
       		createBox(world, 260, 375, 25, 5, false);

        	// M
        	createBox(world, 390, 355, 40, 5, false);
       		createBox(world, 360, 400, 10, 40, false);
       		createBox(world, 420, 400, 10, 40, false);
       		createBox(world, 390, 400, 5, 40, false);

       		// U
       		createBox(world, 460, 435, 20, 5, false);
       		createBox(world, 445, 405, 5, 30, false);
       		createBox(world, 475, 405, 5, 30, false);

       		// N
                createBox(world, 495, 415, 5, 30, false);
                createBox(world, 525, 415, 5, 30, false);
        	createBox(world, 510, 375, 20, 5, false);

       		// D
       		createBox(world, 558, 435, 18, 5, false);
       		createBox(world, 545, 405, 5, 25, false);
       		createBox(world, 575, 405, 5, 25, false);
       		createBox(world, 558, 375, 18, 5, false);

       		// O
        	createBox(world, 610, 435, 20, 5, false);
        	createBox(world, 595, 405, 5, 25, false);
       		createBox(world, 625, 405, 5, 25, false);
       		createBox(world, 610, 375, 20, 5, false);

       		// !
       		createBox(world, 650, 430, 10, 10, false);
       		createBox(world, 650, 380, 10, 40, false);
            }

Definimos en primer lugar la función createBox(). A partir de 6 parámetros crea una nueva caja en el mundo. En concreto los parámetros son: (1) objeto mundo, (2) coordenada x, (3) coordenada y, (4) ancho, (5) altura, y (6) si tiene o no posición fija.

Su código es prácticamente equivalente al código que usamos para crear el objeto suelo. Además, establecemos la densidad de los objetos que no tienen posición fija, y un coeficiente de rozamiento.

Luego tenemos la función createHelloWorld, que tan sólo crea rectángulos.

Por último, vamos a añadir una llamada a createHelloWorld(); antes de step(), en la función anónima que se ejecuta al cargar la ventana.

Ver demo. La cosa ya va cambiando Ahora tenemos ya un montón de cajas, que hasta vemos cómo se tambalean.

Paso 7 – Creando círculos

Nuestro programa ya sabe cómo crear rectángulos en el sistema (createBox()), y cómo dibujarlos en el canvas. Ahora vamos a añadir la opción de crear círculos, y de dibujarlos. Primero, vamos a añadir esta función:

            function createBall(world, x, y) {
                var ballSd = new b2CircleDef();
                ballSd.density = 1.0;
                ballSd.radius = 20;
                ballSd.restitution = 0.5;
                ballSd.friction = 0.5;
                var ballBd = new b2BodyDef();
                ballBd.AddShape(ballSd);
                ballBd.position.Set(x,y);
                return world.CreateBody(ballBd);
            }

Como vemos, es prácticamente igual que createBox(). En este caso al crear el objeto forma, no hemos elegido la clase b2BoxDef, sino b2CircleDef. Y además no tenemos la opción de especificar el tamaño, sino que todas las esferas tendrán el mismo radio, como vemos en “ballSd.radius = 20;”.

El sistema ya sabe añadir y reconocer círculos. Ahora vamos a indicarle cómo dibujarlos. En el switch de la función drawShape() que añadimos en el paso 4, vamos a añadir un nuevo caso:

                    case b2Shape.e_circleShape:
                        {
            				var circle = shape;
            				var pos = circle.m_position;
            				var r = circle.m_radius;
            				var segments = 16.0;
            				var theta = 0.0;
            				var dtheta = 2.0 * Math.PI / segments;
    				        context.moveTo(pos.x + r, pos.y);

    				        for (var i = 0; i <= segments; i++) {
            					var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
            					var v = b2Math.AddVV(pos, d);
            					context.lineTo(v.x, v.y);
            					theta += dtheta;
                            }
                            context.moveTo(pos.x, pos.y);
                            var ax = circle.m_R.col1;
                            var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
                            context.lineTo(pos2.x, pos2.y);
                        }
                        break;

Ahora en la función drawShape(), en caso de que le proporcionen un círculo, sabrá cómo dibujarlo. En concreto lo hará dividiéndolo en 16 segmentos, y con un poco de trigonometría, se calculará el vector de cada segmento, y sus coordenadas finales.

Además, tras dibujar el círculo, se añadirá un radio, que nos permitirá observar cómo realmente gira el círculo.

Ver demo. Nada nuevo, ya que todavía no hemos creado en ningún momento un círculo.

Paso 8 – Creando objetos con el ratón

Ahora vamos a ver cómo crear nuevos objetos al vuelto, haciendo clic con el ratón. Veremos también cómo impactan con los que ya hay, y cómo efectivamente se ve que se respetan las leyes físicas

Vamos a añadir este código antes de la llamada a step() en la función anónima:

                Event.observe('canvas-world', 'click', function(e) {
                    if (Math.random() > 0.5) {
                        createBox(world, e.clientX, e.clientY, 10, 10, false);
                    } else {
                        createBall(world, Event.pointerX(e), Event.pointerY(e));
                    }
                });

Al hacer clic en el canvas, habrá un 50% de probabilidades de que se cree o bien una caja, o bien un círculo. Lo interesante es que se creará donde hayamos hecho clic, y desde ahí caerá

Ver demo final. Si quieres, también puedes descargarte el código completo, con el ejemplo final documentando cada línea.

Por supuesto, ahora se pueden añadir imágenes de fondo al canvas, o añadir sprites a nuestros objetos. Y desde luego también se pueden añadir sonidos. Aquí tienes un ejemplo prácticamente igual que el que acabamos de hacer, pero con sonidos y texturas:

Básicamente el funcionamiento es el siguiente:

• Creamos un campo de texto por cada celda del fichero Excel.
• Muchas celdas tienen valores dinámicos, es decir, se generan a partir del valor de otras.
• Definimos la fórmula que genera el valor de cada celda dinámica, y esa fórmula la añadimos a la pila de callbacks del evento ‘change’ de todas las celdas de las que depende.

Problema: Hay miles de celdas, prácticamente todas dinámicas. Esto implica que a menudo, al cambiar un sólo valor, se generan cientos o miles de cálculos. Javascript es single threaded, es decir, sólo se ejecuta una única hebra (para realizar cálculos, modificar el árbol DOM, gestionar eventos, o redibujar la pantalla). Si una operación muy costa en cálculos conlleva 8 segundos, la interfaz de usuario se quedará bloqueada hasta que finalice. Mal asunto.

El experto en usabilidad Jakob Nielsen dijo:

0,1 segundos es el límite para que el usuario perciba que el sistema responde inmediatamente.

¿Son los Web Workers la solución?

Quizás te preguntes qué son los Web Workers. Se trata de una especificación de WHATWG, el equipo que ha dado forma a lo que hoy conocemos como HTML5, para permitir programar aplicaciones multihebra en javascript, es decir, correr procesos en segundo plano.

Si bien es una funcionalidad que han empezando a incorporar recientemente los navegadores (a excepción de IE9), no es nada nuevo; el paquete Google Gears ya ofrecía estos mecanismos. De hecho, los web workers están basados en la API WorkerPool de Google Gears.

Por tanto, ¿son la solución al problema? Sí, pero…

A pesar de que una hoja de cálculo puede ser un ejemplo de libro para el uso de Web Workers, finalmente no los he utilizado. Existen algunas limitaciones, por cuestiones de seguridad, a la hora de usar Web Workers. A destacar, que no tiene acceso a:

1. DOM.
2. objeto window.
3. objeto document.
4. objeto parent.

Toda la comunicación con la hebra principal se realiza mediante mensajes. Esto interfiere con el código que ya tenía, de modo que implicaría reescribirlo en gran parte. No es una opción por desgracia.

Luego está el motivo de que no funcionan ni funcionarán en Internet Explorer.

Timers al rescate

Repasemos conceptos de sistemas operativos. En un sistema multitarea, en un momento dado no se pueden ejecutar más tareas que procesadores tiene el equipo. Por eso existe el planificador de procesos, que es la parte que se encarga de repartir el tiempo disponible entre los distintos procesos en ejecución. Si se asignan tiempos bajos de ejecución, el efecto será que están funcionando varios procesos concurrentemente. Sintetizando muchísimo, podríamos decir que el planificador de procesos se encarga de asignar bloques de tiempo a cada proceso.

Ahora repasemos los timers. ¿Qué hacen exactamente? Posponen la ejecución de un comando. Esto significa que, mientras se espera ese tiempo, el navegador queda libre para hacer otras cosas.

¿Y si añadimos pausas voluntarias en la propagación de eventos ‘change’ de las celdas? De esta forma, habrá pausas que permitirán “descongelar” la interfaz de usuario, emulando que los cálculos se están ejecutando en un segundo plano, haciendo que la interfaz de usuario sea fluida. Miremos el siguiente gráfico:

El color azul representa los cálculos. El verde, es cuando no realizamos cálculos y la interfaz responde a eventos (el equivalente a este proceso en sistemas operativos se llama idle).

En el primer caso no utilizamos timers. Lo que ocurre es que el navegador se queda congelado durante más de tres segundos.

Sin embargo, en el segundo caso añadimos pausas voluntarias, con lo que percibimos que en todo momento el navegador reacciona inmediatamente a nuestras acciones.

Demo

He hecho una sencilla demo. El script se encarga de calcular los números primos menores de 300.000. En un caso con timers y en otro sin él:

1. Sin timers. La página se quedará congelada hasta que finalice el cálculo.
2. Con timers. Podrás interactuar con la página mientras hace los cálculos.

Si miramos el código, veremos que hay algunas diferencias. En el primer caso, esto es lo que ocurre:

jQuery("#button").bind('click', function() {
  for (var i=1; i<=300000; i++) {
    if(isPrime(i)) {
      jQuery('#prime').append(" "+ i);
    }
  }

Comprobamos uno a uno cada número desde un bucle, y si es primo, lo mostramos en pantalla. Seguramente haga saltar un aviso en el navegador de que el script está llevando demasiado tiempo.

El segundo ejemplo es un poco más elaborado:

function comprobarPrimo(numero, fin,total) {
  var delay = 10;
  var heap = 500;
  if (isPrime(numero)) {
    jQuery('#prime').append(" "+ numero);
  }
  if(++numero < fin) {
    if (total%heap === 0) {
      setTimeout("comprobarPrimo("+numero+","+fin+","+(total+1)+")", delay);
    } else {
      comprobarPrimo(numero, fin, (total+1));
    }
  }
}

jQuery("#button").bind('click', function() {
  comprobarPrimo(1,300000,0);
});

En lugar de usar un bucle, usamos una función recursiva. Esto lo hacemos porque, cada vez que llamamos a setTimeout, se ejecuta el código que le sigue sin esperar el delay. Es decir, que al añadir un timer no pararíamos realmente toda la ejecución. Con una función recursiva corregimos esto.

Y definimos dos variables: delay, que es el retardo en milisegundos que se aplicará, y heap, que define cada cuántas llamadas se aplica delay. En este ejemplo se establece un delay de 20 milisegundos que se aplica cada 500 números primos. Los otros 499 se ejecutan sin retardo.

El resultado es completamente distinto al del primer ejemplo. Y únicamente añadimos pausas de 20 milisegundos cada 500 números primos. Por supuesto el tiempo de ejecución se ve incrementado.

Dentro de la programación orientada a objetos, hay distintos tipos. El más conocido es el basado en clases, donde encontramos lenguajes como Java, C++, C#… Sin embargo, hay más tipos de programación orientada a objetos, y es usada por lenguajes muy conocidos. Me estoy refiriendo a la programación basada en prototipos, y su lenguaje más conocido es JavaScript.

Según la Wikipedia: Programación basada en prototipos es un estilo de programación orientada a objetos en el cual, las “clases” no están presentes, y la re-utilización de procesos (conocida como herencia en lenguajes basados en clases) se obtiene a través de la clonación de objetos ya existentes, que sirven de prototipos, extendiendo sus funcionalidades.

Es decir, se trata de un paradigma orientado a objetos sin clases. ¿Cómo es esto? En lugar de definir una clase, para después crear una instancia de ella, lo que hacemos es definir directamente el nuevo objeto, con sus métodos y atributos. En la página web de Mozilla tenemos un buen resumen de las diferencias existentes entre la POO basada en prototipos y la basada en clases.

Una guía muy buena para entender, paso a paso, en qué consiste, y cómo funciona, es la que proporciona de nuevo Mozilla en su artículo “A re-introduction to JavaScript“, en el apartado “Custom Objects“. Al no estar en español, voy a copiarlos aquí:

Consideremos un objeto persona con los campos nombre y apellido. Hay dos formas de mostrar: “nombre apellido” o “apellido, nombre”. Esta es una forma de hacerlo:

function makePerson(first, last) {
    return {
        first: first,
        last: last
    }
}
function personFullName(person) {
    return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
    return person.last + ', ' + person.first
}

Esto funciona, pero es bastante feo. Terminas con docenas de funciones y tu espacio de nombres global. Lo que realmente necesitamos es una forma de vincular una función a un objeto. Puesto que las funciones son objetos, esto es fácil:

function makePerson(first, last) {
    return {
        first: first,
        last: last,
        fullName: function() {
            return this.first + ' ' + this.last;
        },
        fullNameReversed: function() {
            return this.last + ', ' + this.first;
        }
    }
}

Podemos aprovechar la palabra clave ‘this‘ para mejorar nuestra función makePerson:

function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = function() {
        return this.first + ' ' + this.last;
    }
    this.fullNameReversed = function() {
        return this.last + ', ' + this.first;
    }
}

Nuestro objeto persona ha mejorado, pero aun tiene algunos flecos feos. Cada vez que creamos un objeto persona, estamos creando dos veces las funciones que hay en cada uno – ¿no sería genial si pudieran compartir este código?

function personFullName() {
    return this.first + ' ' + this.last;
}
function personFullNameReversed() {
    return this.last + ', ' + this.first;
}
function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName;
    this.fullNameReversed = personFullNameReversed;
}

Esto está mejor: estamos creando las funciones sólo una vez, y asignando referencias a ellas dentro del constructor. ¿Podemos hacerlo todavía mejor? La respuesta es sí:

function Person(first, last) {
    this.first = first;
    this.last = last;
}
Person.prototype.fullName = function() {
    return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
    return this.last + ', ' + this.first;
}

Person.prototype es un objeto compartido por todas las instancias de Person. Forma parte de una cadena de búsqueda (que tiene un nombre especial, “prototype chain”): cada vez que intentas acceder a una propiedad de Person que no está asignada, JavaScript comprobará en Person.prototype para ver si esta propiedad existe ahí. Como resultado, cualquier cosa que asignemos a Person.prototype estará disponible en todas las instancias de ese constructor mediante el objeto this.

Ahora, si os pasaba como a mí, ya tendréis claro qué es eso que hace tan “rarito” a JavaScript. Y se trata ni más ni menos de su forma de ser orientado a objetos.

Algunos ejemplos de webs que hacen uso de esto es el cliente de correo de Google Gmail, o las famosas redes sociales como Facebook o Tuenti. En estas aplicaciones, toda la interfaz está gobernada por JavaScript. Cuando accedemos a un enlace, generalmente no conlleva una nueva petición HTTP sino que, en su lugar, el documento actual se actualiza con nuevo contenido (AJAX).

Pero existe un inconveniente: Al hacer las webs así, no se almacenan las actualizaciones de la página en el historial del navegador, de modo que los botones de volver y avanzar del navegador no funcionan como esperaríamos. Esto ocurre porque la URL no ha cambiado, y por tanto, para el navegador no ha habido ningún cambio de página.

Pero en Facebook o GMail, pese a funcionar con JavaScript, sí funciona el botón de volver. ¿Cómo lo hacen? La magia está en el caracter almohadilla (#). Repasemos HTML: Cuando en un documento queremos hacer un enlace a una parte del mismo (Por ejemplo, para saltar a un apartado), lo hacemos con el caracter almohadilla seguido de la palabra clave. Por ejemplo:

<h1 id="top">Inicio</h1>
<p>Un párrafo con mucho contenido...</p>
<a href="#top">Volver arriba</a>

Una de las ventajas de estos enlaces es que no conllevan una nueva petición HTTP, por lo que son inmediatos. Además, el navegador tiene constancia de ellos, por lo que los almacena en el historial. Bien, pues ahí está el truco. Si nos fijamos en una URL de Facebook, veremos que son de este tipo:

http://www.facebook.com/#!/?sk=messages&filter=[fb]unread

Es decir, en este caso el enlace es a la página principal (http://www.facebook.com/) y dentro de ese documento, a un apartado (#!/?sk=messages&filter=[fb]unread). Con JavaScript podemos consultar ese apartado para, en función de él, cargar el contenido que proceda. Ya tenemos todas las piezas para hacer una aplicación web en JavaScript, donde funcionará el historial del navegador, y además podremos guardar las URLs en nuestros marcadores.

Acerca del evento hashchange

Para poder realizar eso, necesitamos un método para que, desde JavaScript, sepamos cuándo se ha actualizado el historial #hash, es decir, para saber cuándo se enlaza a otro apartado dentro del documento actual. En HTML5 queda resuelto esto con el evento windows.onhashchange. Sin embargo, al ser un evento nuevo, no está disponible en todos los navegadores, por lo que se hacen necesarios algunos hacks que permitan que nuestra aplicación funcione en la mayoría de navegadores.

En el caso de utilizar jQuery, el plugin más extendido es jQuery BBQ. Podemos leer más acerca de cómo funciona aqui:
http://benalman.com/projects/jquery-hashchange-plugin/

Implementación básica en jQuery

Este ejemplo es muy sencillo. Únicamente tendremos una lista de enlaces, y marcaremos en negrita al activo, y mostraremos su contenido. Entendiendo eso, podremos aplicarlo a todo lo demás.

En primer lugar, necesitaríamos incluir la biblioteca jquery, y además también el plugin de jquery BBQ.

<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.ba-bbq.js"></script>
</head>
<body>
</body>
</html>

Después definimos una lista de enlaces y sus bloques de contenido:

<ul>
    <a href="#enlace1">Enlace 1</a>
    <a href="#enlace2">Enlace 2</a>
    <a href="#enlace3">Enlace 3</a>
    <a href="#enlace4">Enlace 4</a>
</ul>
<div id="enlaces">
    <div id="enlace1">Contenido Enlace 1</div>
    <div id="enlace2">Contenido Enlace 2</div>
    <div id="enlace3">Contenido Enlace 3</div>
    <div id="enlace4">Contenido Enlace 4</div>
</div>

Y ahora el código JavaScript:

$(function(){
  $(window).bind('hashchange', function(e) {
    var url = $.param.fragment();
    $('a.current').removeClass('current');
    if (url) {
        $('a[href="#' + url + '"]').addClass( 'current' );
        $("#enlaces > div").hide();
        $("#"+url).show();
    }
  });

  $(window).trigger( 'hashchange' );

});

El código hace lo siguiente:

1. En primer lugar definimos una función que irá atada al evento ‘hashchange’. Este evento se dispara, como hemos visto, cada vez que se actualiza el #hash.
2. En segundo lugar, consultamos el parámetro #hash y lo almacenamos en la variable ‘url’.
3. Desactivamos el enlace previamente activo.
4. En caso de que esté definido el parámetro #hash:
   1. Activamos el nuevo enlace activo. Tan sólo le añadimos una clase.
   2. Ocultamos todos los bloques de contenido.
   3. Mostramos el bloque de contenido activo.
5. Lanzamos el evento hashchange para provocar una actualización, por si en la primera carga de la página ya hubiera un parámetro #hash (Por ejemplo, porque alguien ha guardado una URL en favoritos).

Finalmente, definimos el estilo para la clase “current” y ya lo tenemos.

Podéis probar una demo. Como veis, tras moverte entre los distintos apartados, los botones de Volver y Avance del navegador funcionan. Además, se pueden almacenar las URLs para su futura consulta.

“El W3C Web Applications (WebApps) Working Group, una fusión de los grupos de trabajoWebAPI y WAF, se constituye para desarollar APIs estándar para el desarrollo de Aplicaciones Web del lado del cliente. Este trabajo incluirá tanto la documentación de APIs existentes como el XMLHttpRequest, como el desarrollo de nuevas APIs que enriquezcan las aplicaciones web.”

Veamos en qué consisten algunas de esas APIs que están desarrollando:

Interfaz para Widgets

Cada widget podrá tener un documento de configuración que almacenará metadatos relativos al Widget. Además, cada instancia de un widget podrá almacenar datos de manera persistente.  ¿Cómo se hará esto? Gracias a otra API de almacenamiento de datos locales.

Está bastante maduro (En estado de Recomendación Candidata), y existe una suite de tests para probar su correcta implementación.

API de selectores Level 1

Supongamos el siguiente bloque de código HTML 4.01:

<table id="score">
  <thead>
    <tr>
      <th>Test
      <th>Result
  <tfoot>
    <tr>
      <th>Average
      <td>82%
  <tbody>
    <tr>
      <td>A
      <td>87%
    <tr>
      <td>B
      <td>78%
    <tr>
      <td>C
      <td>81%
</table>

Si quisiéramos obtener los valores de todas las celdas tendríamos que ejecutar algo similar a esto con la API de DOM Level 2:

var table = document.getElementById("score");
var groups = table.tBodies;
var rows = null;
var cells = [];

for (var i = 0; i < groups.length; i++) {
  rows = groups[i].rows;
  for (var j = 0; j < rows.length; j++) {
    cells.push(rows[j].cells[1]);
  }
}

¡Qué feo! La nueva API permite hacerlo de este modo mucho más conciso:

var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");

Como véis, es exactamente igual que lo que ya hacemos con los selectores de jQuery, salvo que en un tiempo podremos realizarlo directamente desde el motor de JavaScript del navegador, sin necesidad de frameworks.

Esta API también está muy madura, y al igual que la anterior es una Recomendación Candidata. Está disponible en Firefox desde su versión 3.1+, en Internet Explorer 8 y en Safari 3.1+. Pero hasta que no borremos del mapa a IE6 e IE7 tendremos que seguir utilizando herramientas como jQuery.

Web Storage

Es un nuevo mecanismo de almacenamiento local que, a diferencia de las Cookies, permite almacenar un gran volumen de datos (Por ejemplo, los emails de una cuenta, haciendo innecesario plugins como Google Gears), y también permite almacenarlo accesible a todas las ventanas del dominio al que pertenecen.

Todo se realizaría de un modo muy sencillo: Simplemente accediendo al atributo que proceda dentro del objeto localStorage.

De nuevo, está disponible ya en Firefox 3.5, IE8, Safari 4.0, Chromium…

Web Workers

Permite lanzar distintos hilos de ejecución que se ejecutan en paralelo a la página principal. De este modo, se puede trabjar en un entorno thread-like trabajando con un mecanismo de coordinación de pase de mensajes.

Como ejemplos, podríamos:

• Generar una hebra que busque números primos en background.
• Un worker que actualice una base de datos local. Estaría permanentemente escuchando al servidor mediante un WebSocket, y cuando hubiera algún cambio, modificaría la base de datos local.
• Operaciones de Lectura/Escritura de fondo.
• Workers compartido. Distintas ventanas podría compartir un único Worker que, en un momento dado, podría actualizar a todas a la vez.
• Delegación. Aprovechando las distintas CPUs de los microprocesadores multi-core.

Lógicamente, esto abre un gran número de posibilidades en cuanto al rendimiento de las páginas web.

Por el momento disponible en Firefox 3.5+, Safari 4, Chromium.

Server-Sent Events

La API que define esta especificación puede no parecer muy revolucionaria: Permite recivir notificaciones PUSH desde el servidor en forma de evento DOM. Perfectamente podemos lograr el mismo objetivo mediante XHR o un iframe. Sin embargo, dada su naturaleza, permitiria que, cuando el navegador se pueda coordinar con el operador de red, se ahorraran notablemente recursos de red. Uno de los efectos colaterales sería aumentar la duración de las baterías de los dispositivos portátiles.

WebSockets API

Esta API permite una auténtica conexión bidireccional entre el navegador y el servidor. Ya fue cubierta en este blog cuando Google Chrome anunció su implementación.

Web SQL Database

Es exactamente lo que su nombre sugiere. Consiste en una especificación de un API que permitirá almacenar información en una base de datos locale accesible mediante SQL.

Veamos un ejemplo de su funcionamiento:

function prepareDatabase(ready, error) {
  return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) {
    db.changeVersion('', '1.0', function (t) {
      t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
  });
}

function showDocCount(db, span) {
  db.readTransaction(function (t) {
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
      span.textContent = r.rows[0].c;
    }, function (t, e) {
      // couldn't read database
      span.textContent = '(unknown: ' + e.message + ')';
    });
  });
}

prepareDatabase(function(db) {
  // got database
  var span = document.getElementById('doc-count');
  showDocCount(db, span);
}, function (e) {
  // error getting database
  alert(e.message);
});

En primer lugar se define la función prepareDatabase() que, en caso de que fuera necesario, crea la base de datos con una tabla llamada “docids” con dos columnas (“id” y “name”). Si hay éxito, o no es necesario crearla, se llama a la función getDatabase(), que obtiene un manejador de la base de datos, y entonces llama a la función que hace realmente el trabajo, en este caso showDocCount().

File API

Como último ejemplo de apartados en los que trabaja el WebApps Working Group, voy a mosotrar la File API. Permitirá un manejo avanzado de ficheros desde JavaScript, pudiendo:

• Una vez que el usuario conceda permisos, el navegador permitirá leer y parsear un fichero.
• Se podrá almacenar información de forma local.
• Se permitirá guardar los archivos, del mismo modo que ahora se pueden descargar ficheros de servidores remotos.
• Se podrán enviar ficheros grandes a servidores de un modo más eficiente que el actual. Por ejemplo, se podrá dividir en porciones.
• Los navegadores implementarán mecanismos para poder cancelar o impedir los casos de uso enumerados anteriormente.

Creo que muy pronto comenzaremos a ver todas estas nuevas aplicaciones ir aparenciendo, poco a poco, hasta que un día el navegador realmente sea un framework de aplicaciones más.

Aun se encuentra en un estado muy prematuro, pero nos enumeran una serie de posibles casos de uso:

• Captura y envío de imágenes. Permitiendo el envío por XHR de varias imágenes.
• Captura de imagen panorámica. Por ejemplo, con 3 tomas que posteriormente se “concatenan” automáticamente para mostrar la panorámica.
• Video Chat. Aun está sin definir el método para realizar streaming, sin embargo todas las soluciones propuestas pasan por websockets.
• Cámara web. Permitirá realizar una aplicacion de vigilancia para controlar la cámara, incluyendo movimientos como arriba, abajo, izquierda o derecha, o hasta aplicaciones de detección de movimiento.
• Búsqueda por voz. Introduciendo por el micrófono la cadena de búsqueda.
• Recordatorio de voz. De nuevo, desde el micrófono.

Por supuesto, para proteger la privacidad de los usuarios, el navegador tendrá que pedir explícitamente confirmación del usuario para permitir que se acceda a estos dispositivos.

Ejemplo de uso:

// Create a container div element and append it to the document body.
var container = document.createElement("div");
document.body.appendChild(container);

// The browser viewport width in pixels.
var screenWidth = window.innerWidth;

function successCallback(data) {
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].uri;
// If the image width exceeds that of the browser viewport, the image
// is scaled to fit the screen keeping the aspect ratio intact.
if (data[i].format.width > screenWidth) {
img.style.width = screenWidth + "px";
img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
}
container.appendChild(img);
}
}

function errorCallback(err) {
alert(err.message + " (" + err.code + ")");
}

// Launch the device camera application and invoke the callback once
// the user exits the camera application.
transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);

Mientras tanto, y hasta que esto sea una realidad, se puede utilizar el paquete flash.media de ActionScript3, en concreto las clases Camera y Micrphone. Pero claro, no es lo mismo. Una verdadera lástima tener que esperar tanto tiempo. Veremos cuándo tiene el navegador más utilizado estas funcionalidades.