NodeJS es  una plataforma de desarrollo de alta escalabilidad para aplicaciones en red basada en un único hilo de ejecución, una arquitectura orientada a eventos y un manejo asíncrono de E/S.  Esta plataforma se programa utilizando Javascript del lado del servidor.

En el presente artículo se describen los pasos realizados para su instalación siguiendo dos estrategias diferentes.

Instalación

Utilizando el gestor de paquetes

En este caso la instalación es mas rápida y sencilla ya que el gestor de paquetes, apt/aptitude en este caso, se hace cargo de la descarga e instalación del software y sus dependencias.

Utilizando los repositorios por defecto

Los repositorios incluídos por defecto con el sistema operativo permiten instalar a NodeJS sin embargo no en su versión mas reciente sino un par de números atrasada.

Versión de NodeJS disponible en los repositorios de Ubuntu

Para realizar su instalación se debe ejeuctar el siguiente comando.

$ sudo aptitude install nodejs

Utilizando los repositorios del proyecto

Este método permite actualizar los repositorios del sistema operativo con el repositorio oficial del proyecto de donde se podrán descargar versiones mas recientes.  Para hacer esto se deben ejecutar los siguientes comandos.

$ sudo apt-get install python-software-properties
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update

Versión de NodeJS disponible en los repositorios del proyecto

Una vez incluído el nuevo repositorio se procede a instalar el paquete normalmente.

$ sudo aptitude install nodejs

Desde el código fuente

Este método permite compilar una distribución de NodeJS para la versión específica del sistema operativo que se está utilizando.  Esto requiere que se cuente con el soporte requerido de las herramientas de desarrollo y dependencias necesarias para construír el proyecto.

Descargar el código fuente de la última versión disponible (la 0.6.7 en este caso) desde la siguiente ubicación.

http://nodejs.org/#download

$ wget http://nodejs.org/dist/v0.6.7/node-v0.6.7.tar.gz

$ tar zxvf node-v0.6.7.tar.gz $ cd node-v0.6.7/

$ ./configure --prefix=/home/jimezam/nodejs/0.6.7

Aviso!  Si desea instalar NodeJS en una ubicación central haciéndolo disponible para todos los usuarios del sistema operativo, omita el parámetro –prefix de la ejecución anterior, de lo contrario ajuste su ruta según la ubicación específica donde desee instalarlo.

Checking for program g++ or c++          : /usr/bin/g++
Checking for program cpp                 : /usr/bin/cpp
Checking for program ar                  : /usr/bin/ar
Checking for program ranlib              : /usr/bin/ranlib
Checking for g++                         : ok  
Checking for program gcc or cc           : /usr/bin/gcc
Checking for program ar                  : /usr/bin/ar
Checking for program ranlib              : /usr/bin/ranlib
Checking for gcc                         : ok  
Checking for library dl                  : yes
Checking for openssl                     : yes
Checking for library util                : yes
Checking for library rt                  : yes
Checking for fdatasync(2) with c++       : yes
'configure' finished successfully (0.776s)

El siguiente paso consiste en construír la distribución compilando su código fuente.

$ make

Y finalmente se debe instalar la distribución recién construída en la ubicación elegida.

$ make install

Aviso!  Si se eligió instalar NodeJS en una ubicación central, la ejecución del comando anterior deberá ser hecha por el usuario root de la siguiente manera: sudo make install.

Actualizar el PATH para que incluya la ubicación de las herramientas de NodeJS recién instaladas.  Realizar esta modificación en el .bash_profile/.bashrc del usuario o /etc/profile para tener un alcance global y garantizar que esta modificación persista cada vez que se inicia la máquina.

$ PATH=/home/jimezam/nodejs/0.6.7/bin:$PATH

Si el ajuste fue exitoso la aplicación node ya podrá ser accedida directamente desde la línea de comando.

$ which node

/home/jimezam/nodejs/0.6.7/bin/node

Prueba de funcionamiento: Hola Mundo NodeJS!

Crear el siguiente archivo de código Javascript para crear un servicio extremadamente simple que responda "Hola Mundo" ante las peticiones web de los clientes a través de navegadores.

$ vi prueba.js

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hola Mundo NodeJS!\n');
}).listen(7777, '127.0.0.1');
console.log('Servidor ejecutándose en http://127.0.0.1:7777');

Para iniciar el servicio se debe invocar el comando node de la siguiente manera.

$ node prueba.js

Servidor ejecutándose en http://127.0.0.1:7777

Desde un navegador web acceder a la dirección mencionada.

Hola Mundo consultándose desde NodeJS

Enlaces

• Node.JS
  http://nodejs.org/
• Installing Node.js via package manager
  https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

En este artículo se revisarán los pasos necesarios para implementar la facilidad de arrastrar y soltar (drag and drop) en una página web aprovechando las funcionalidades provistas por HTML5.  Para este desarrollo se utilizará jQuery para facilitar la implementación, sin embargo esto no es estrictamente necesario.

Establecer los elementos "arrastrables".

El primer paso consiste en establecer cuales elementos podrán ser arrastrados, para hacer esto se les deberá agregar el atributo draggable='true'.  En el caso del ejemplo, los elementos arrastrables son imágenes de la siguiente manera.

<img id="tool0" draggable="true" title="tool" src="img/tool0.png" alt="tool" />
<img id="tool1" draggable="true" title="tool" src="img/tool1.png" alt="tool" />
<img id="tool2" draggable="true" title="tool" src="img/tool2.png" alt="tool" />

Definir el comportamiento de los elementos "arrastrables".

El siguiente paso es establecer que se debe hacer cuando los objetos arrastrables son manipulados, es decir, manejar sus eventos.  Estos eventos corresponden con los siguientes y su implementación se debe definir cuando la estructura de la página se encuentra completamente cargada.

Durante el manejo del evento dragstart se realizan las siguientes tareas.

1. Almacenar la información del elemento arrastrable (su id en este caso) necesaria para ser procesado en caso de ser soltado exitosamente.
2. Agregar una nueva clase CSS (itemSelected) para modificar su apariencia mientras es arrastrado.
3. Modificar la imagen del elemento arrastrado la cual por defecto es la del mismo elemento.

$('.page #main #items .item').bind('dragstart', function(event) {
    // Store information about the item dragged.
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    // Add a CSS class to highlight the dragged item.
    $(event.target).addClass('itemSelected');
    // Set an image as drag icon.  The image was preloaded.
    var dragIcon = document.createElement('img');
    dragIcon.src = 'img/hand.png';
    event.originalEvent.dataTransfer.setDragImage(dragIcon, 139, 43);
});

Durante el manejo del evento drag no se realizan tareas especiales en este caso.

$('.page #main #items .item').bind('drag', function(event) {
    // The item is being dragged!
});

Durante el manejo del evento dragend se realiza una única tarea y corresponde con retirar la clase CSS añadida durante dragstart para indicar que el elemento ya no está siendo arrastrado actualmente.

$('.page #main #items .item').bind('dragend', function(event) {
    // Remove the CSS class that highlights it while beign dragged.
    $(event.target).removeClass('itemSelected');
});

Definir el comportamiento de las "zonas de descarga".

El paso final consiste en establecer que se debe hacer cuando los objetos arrastrables interactúan con las zonas de descarga (drop zones), es decir, manejar sus eventos.  Estos eventos corresponden con los siguientes y su implementación también se debe definir cuando la estructura de la página se encuentra completamente cargada.

Durante el manejo del evento dragenter se agrega una nueva clase CSS (itemOnDropArea) para modificar la apariencia de la zona de descarga mientras un elemento es arrastrado sobre ella.

$('.page #main #boxes .box').bind('dragenter', function(event) {
    // Add a CSS class to highlight the drop zone used.
    $(event.target).addClass('itemOnDropArea');
    // Prevents the default event that denies the DnD
    // behaviour.  Acts as "event.preventDefault()" in
    // vanilla Javascript.
    return false;
});

Durante el manejo del evento dragleave se realiza la tarea contraria, se remueve la clase CSS agregada durante el suceso del evento anterior para mostrar que ningún elemento es arrastrado ahora sobre la zona de descarga.

$('.page #main #boxes .box').bind('dragleave', function(event) {
    // Remove the CSS class that highlights the used drop zone.
    $(event.target).removeClass('itemOnDropArea');
    // Prevents the default event that denies the DnD
    // behaviour.  Acts as "event.preventDefault()" in
    // vanilla Javascript.
    return false;
});

Durante el manejo del evento dragover no se realiza en este caso ninguna tarea interesante además de indicarle al navegador que evite su comportamiento por defecto el cual es impedir que se realice.

$('.page #main #boxes .box').bind('dragover', function(event) {
    // Prevents the default event that denies the DnD
    // behaviour.  Acts as "event.preventDefault()" in
    // vanilla Javascript.
    return false;
});

Durante el manejo del evento drop, que sucede cuando el elemento arrastrable se suelta sobre la zona de descarga, se realizan las siguientes tareas en la aplicación de demostración.

1. Obtener la información almacenada en el objeto dataTransfer definida durante el manejo del evento dragstart.
2. Obtener la información del objeto arrastrable.
3. Obtener la información de la zona de descarga.
4. Determinar si la descarga del objeto es válida o no en la zona de descarga específica.
5. Realizar una acción según se determine en la tarea anterior: remover el elemento o mostrar un mensaje de error.
6. Evitar que se efectúe el comportamiento por defecto relacionado con el evento.

$('.page #main #boxes .box').bind('drop', function(event) {
	// Get the stored information about the draggable item,
	// the element ID in this case.
	var itemId = event.originalEvent.dataTransfer.getData("text/plain");
	// Get the type of the draggable item, stored in the
	// ALT attribute in this case.
	var itemType = $("#" + itemId).attr('alt');
	// Get the drop zone's ID to difference the type of it.
	var dropboxType = $(event.target).attr('id');
	// Check if the draggable item can be or not dropped
	// into the current drop zone.
	if(dropboxType == 'toolbox')
	{
		if(itemType == 'tool')
			$("#" + itemId).remove();
		else
			alert("That is a FRUIT, put it on the Fruit's Basket!");
	}
	if(dropboxType == 'fruitbasket')
	{
		if(itemType == 'fruit')
			$("#" + itemId).remove();
		else
			alert("That is a TOOL, put it on the Toolbox!");
	}
	// Remove the CSS class that highlights the used drop zone.
	$(event.target).removeClass('itemOnDropArea');
	// Prevents the default event that denies the DnD
	// behaviour.  Acts as "event.preventDefault()" in
	// vanilla Javascript.
	return false;
});

El prototipo.

En este prototipo se utilizan los fragmentos de código mostrados en este artículo, en él se muestran en la parte inferior dos series de objetos arrastrables (herramientas y frutas) y en la parte superior dos zonas de descarga (una caja de herramientas y una canasta de frutas).  La página web permitirá que el usuario arrastre los elementos a cualquiera de de las zonas de descarga, sin embargo sólo aceptará que se almacenen en la zona correcta.  En caso de intentarse hacer lo contrario se obtendrá un mensaje de error.

Prototipo de demostración de arrastrar y soltar con HTML5

Enlaces.

• Prototipo de demostración.
  http://demo.jorgeivanmeza.com/JavaScript/HTML5DnD/0.1/
• Especificación de Drag and Drop en W3.
  http://dev.w3.org/html5/spec/dnd.html
• Drag and Drop en Mozilla Developer Network.
  https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
• Las imágenes para el prototipo fueron tomadas de OpenClipart.
  http://openclipart.org/

Después de encontrar dos métodos (A y B) para la conversión de coordenadas entre formatos decimal y grados, minutos y segundos, encontré en el libro HTML5 Geolocation de Anthony T. Holdener III la implementación de dos funciones en Javascript que realizan con precisión este procedimiento y que me parecieron muy intersantes.  Este corto libro es en general muy interesante y recomiendo su lectura.

Conversión de coordenadas: formato decimal a grados-minutos-segundos.

/**
 * Convierte una coordenada en formato decimal a su correspondiente
 * versión en formato grados-minutos-segundos.
 *
 * @param	Float	Valor real de la coordenada.
 * @param	Int	Tipo de la coordenada {Coordenada.LATITUD, Coordenada.LONGITUD}.
 * @return	Array	['grados', 'minutos', 'segundos', 'direccion', 'valor'].
 */
function dec2gms(valor, tipo)
{
	grados    = Math.abs(parseInt(valor));
	minutos   = (Math.abs(valor) - grados) * 60;
	segundos  = minutos;
	minutos   = Math.abs(parseInt(minutos));
	segundos  = Math.round((segundos - minutos) * 60 * 1000000) / 1000000;
	signo     = (valor < 0) ? -1 : 1; 	direccion = (tipo == Coordenada.LATITUD) ?
                    ((signo > 0) ? 'N' : 'S') :
	            ((signo > 0) ? 'E' : 'W');
	if(isNaN(direccion))
		grados = grados * signo;
	return {
		'grados'   : grados,
		'minutos'  : minutos,
		'segundos' : segundos,
		'direccion': direccion,
		'valor'    : grados + "\u00b0 " + minutos + "' "+ segundos +
		             "\"" + ((isNaN(direccion)) ? (' ' + direccion) : '')
	};
}

Por ejemplo.

var x = 48.853;
r1 = dec2gms(x, Coordenada.LATITUD);
alert('Conversion dec2gms = ' + r1.valor);

Conversión de coordenadas: formato grados-minutos-segundos a decimal.

/**
 * Convierte una coordenada en formato grados-minutos-segundos a su
 * correspondiente versión en formato decimal.
 *
 * @param	Float	Grados de la coordenada.
 * @param	Float	Minutos de la coordenada.
 * @param	Float	Segundos de la coordenada.
 * @param	String	Sentido de la coordenada {Coordenada.NORTE,
					Coordenada.SUR, Coordenada.ORIENTE,
					Coordenada.OCCIDENTE}
 * @return	Array	['decimal', 'valor'].
 */
function gms2dec(grados, minutos, segundos, direccion)
{
	if(direccion)
	{
		signo     = (direccion.toLowerCase() == 'w' ||
		             direccion.toLowerCase() == 's') ?
		            -1 : 1;
		direccion = (direccion.toLowerCase() == 'w' ||
		             direccion.toLowerCase() == 's' ||
		             direccion.toLowerCase() == 'n' ||
		             direccion.toLowerCase() == 'e') ?
		            direccion.toLowerCase() : '';
	}
	else
	{
		signo     = (grados < 0) ? -1 : 1;
		direccion = '';
	}
	dec = Math.round((Math.abs(grados) + ((minutos * 60) + segundos) / 3600) * 1000000) / 1000000;
	if(isNaN(direccion) || direccion == '')
		dec = dec * signo;
	return {
		'decimal': dec,
		'valor'  : dec + "\u00b0" + ((isNaN(direccion) || direccion == '') ? (' ' + direccion) : '')
	};
}

Por ejemplo.

var xg = 48;
var xm = 51;
var xs = 10.8;
r2 = gms2dec(xg, xm, xs, Coordenada.NORTE);
alert('Conversion gms2dec = ' + r2.valor);

Código fuente y demostración.

Obtenga el código fuente del artículo junto con la ejecución de la demostración en la siguiente ubicación.

http://demo.jorgeivanmeza.com/JavaScript/CoordConverter/0.3/

La geolocalización es la posibilidad de conocer cual es la ubicación física de un dispositivo.  Esta ubicación es geográfica, es decir, se define especialmente mediante sus correspondientes valores de latitud y longitud.

Los dispositivos pueden obtener esta información desde diferentes fuentes, las cuales estarán relacionadas a su vez con precisión de estos datos.  Los orígenes mas comúnes para la información de geolocalización de un dispositivo son los siguientes.

1. Utilizando un GPS (Global Positioning System).
2. Mediante su identificación en celdas GSM/CDMA.
3. Mediante su dirección IP.
4. Mediante la dirección MAC de WiFi y Bluetooth.
5. Especificado por el usuario manualmente.

Estos métodos se encuentran disponibles para las aplicaciones nativas que pueden acceder libremente al hardware del dispositivo, sin embargo ahora también es posible acceder a esta información desde una aplicación web utilizando Javascript gracias a la integración del API de geolocalización de la W3C en los navegadores mas recientes (incluyendo los móviles).

• Firefox (3.5+)
• Chrome (5.0+)
• Internet Explorer (9.0+)
• Safari (5.0+)
• Opera (10.6+)
• iPhone (3.1+)
• Android (2.0+)
• BlackBerry (6+)

Para dar soporte a navegadores antíguos se requiere que se utilice una capa adicional como Google Gears que supla la falencia de esta tecnología.

En este artículo se explicará el API necesario para acceder al API de geolocalización mediante el uso del lenguaje Javascript utilizando un navegador moderno como los mencionados.

Verificar el soporte

El primer paso debe ser siempre verificar si el navegador web en el cual se despliega la aplicación tiene o no el soporte para esta tecnología, a partir de este resultado se deberá decidir que hacer.

if(navigator.geolocation)
{
    // Se cuenta con el soporte para geolocalización, entonces ...
}
else
{
    // No se cuenta con soporte para geolocalización, manejar la situación.
}

Solicitar la ubicación al navegador.

El siguiente paso consiste directamente en solicitarle al navegador web cual es la ubicación del dispositivo.  El llamado a esta función es asíncrono, es decir, no retorna inmediatamente un valor sino que invoca a una función específica (callback) cuando este se obtiene.  Así mismo, como el conocer la ubicación de un dispositivo (y por ende su usuario) tiene implicaciones en la privacidad de las personas, la especificación dispone que el usuario esté siempre facultado para aceptar o negar el acceso a esta información.  Por este motivo los navegadores desplegarán barras como la mostrada a continuación solicitando la confirmación final.

Permitir el acceso a la información de geolocalización en Chrome

A continuación se muestra la invocación general de la función para obtener la geolocalización del dispositivo.

navigator.geolocation.getCurrentPosition(onSuccessGeolocating,
                                         onErrorGeolocating,
                                         options);

Los dos primeros parámetros corresponden a funciones Javascript que se ejecutarán según se tenga éxito o no durante el proceso de geolocalización (se analizarán a continuación), el tercer parámetro es opcional y corresponde con uno o varios de los modificadores descritos.

A continuación se muestra un ejemplo de implementación de esta función.  En este se definen las funciones onSuccessGeolocating y onErrorGeolocating para determinar la implementación del manejo de éxito y error respectivamente de la geolocalización, y define además que se intente realizar el procedimiento con la mayor precisión posible, se acepten valores en caché con máximo 5 segundos de antiguedad y se espere máximo 10 segundos para terminar el procedimiento.

navigator.geolocation.getCurrentPosition(onSuccessGeolocating,
                                         onErrorGeolocating,
                                         {
                                       		enableHighAccuracy: true,
                                       		maximumAge:         5000,
                                       		timeout:            10000
                                         });

Establecer que hacer con la información de geolocalización.

Si el procedimiento fue exitoso, se define la función onSuccessGeolocating referenciada en el paso inmediatamente anterior, en ella se establece que se deberá hacer con la información obtenida.

function onSuccessGeolocating(position)
{
    // ...
}

El objeto Position que se recibe a través de los parámetros de la función incluye la siguiente información.

A su vez, el objeto Coordinates incluye la siguiente información en su interior.

Esto significa que la información básica de la ubicación del dispositivo esta finalmente almacenada en position.coords.latitude y position.coords.longitude.

Establecer que hacer en caso de error.

En algunas ocasiones la geolocalización puede fallar, por ejemplo cuando se utiliza el GPS pero no se cuenta con la información de suficientes satélites o cuando el usuario impide el procedimiento.  Para manejar esta conducta se define la función onErrorGeolocating referenciada durante la invocación de navigator.geolocation.getCurrentPosition.

function onErrorGeolocating(error)
{
    // ...
}

La información del error puede obtenerse del objeto PositionError recibido por parámetro el cual cuenta con los siguientes atributos en su interior.

A continuación se muestra un ejemplo básico de implementación de esta función.

function onErrorGeolocating(error)
{
	switch(error.code)
	{
		case error.PERMISSION_DENIED:
			alert('ERROR: User denied access to track physical position!');
		break;
		case error.POSITION_UNAVAILABLE:
			alert("ERROR: There is a problem getting the position of the device!");
		break;
		case error.TIMEOUT:
			alert("ERROR: The application timed out trying to get the position of the device!");
		break;
		default:
			alert("ERROR: Unknown problem!");
		break;
	}
}

El prototipo.

Como demostración de esta API se incluye el siguiente prototipo el cual intenta obtener la ubicación actual del usuario y desplegarla en un mapa de Google Maps.  Se recomienda consultar su código fuente para complementar los contenidos de este artículo.

Demostración de geolocalización con Javascript

Enlaces.

• Demostración de geolocalización con Javascript.
  http://demo.jorgeivanmeza.com/JavaScript/GeolocationDemo/
• Geolocation Working Group en W3C.
  http://www.w3.org/2008/geolocation/

PhoneGap en pocas palabras es un framework para el desarrollo de aplicaciones móviles que posibilita a los desarrolladores a que implementen sus proyectos utilizando las tecnologías estándar de web: HTML5, CSS3 y Javascript, y este las convierte a aplicaciones híbridas, es decir, aplicaciones nativas de las diferentes plataformas móviles existentes que tienen acceso a gran parte del API nativo.

Tomado de http://www.phonegap.com/

Esto lo logra empaquetando la aplicación web original con un navegador basado en webkit para desplegarla como si fuera una aplicación verdaderamente nativa.

Actualmente este framework soporta seis de las principales plataformas móviles del mercado: iOS, Android, Blackberry, PalmOS, Windows Mobile y Symbian.  Para mas información acerca del estado actual del soporte en cada una de estas plataformas consultar las características soportadas.

Existen otros frameworks similares a este entre los que se destacan Appcelerator Titanium, Mobl y Sencha Touch de los cuales espero estar escribiendo mas adelante.

En este artículo se describirá el proceso de instalación de PhoneGap, la creación de un proyecto base para el desarrollo con este framework y la elaboración de un ejemplo simple.

Instalar PhoneGap.

Descargar la última versión disponible del framework desde la siguiente ubicación.

https://code.google.com/p/phonegap/downloads/list

Para efectos de la documentación se utilizará la versión 0.9.5.1 que corresponde con las mas reciente para esta fecha.

$ wget http://phonegap.googlecode.com/files/phonegap-0.9.5.1.zip

Se descomprime el paquete recién descargado y se mueve a su ubicación final.

$ unzip phonegap-0.9.5.1.zip

$ mkdir ~/phonegap

$ mv phonegap-0.9.5.1 ~/phonegap/0.9.5.1

Crear la plantilla base de un proyecto Android.

A continuación se relacionan los pasos que se deben realizar para crear un proyecto PhoneGap para Android utilizando Eclipse y el plugin ADT instalados anteriormente.

Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Android Project.

Crear un nuevo proyecto Android

En el diálogo de información del proyecto a crearse especificar al menos los siguientes campos y presione el botón Finish para continuar.

1. Nombre del proyecto (project name).
2. API de Android a utilizarse (build target).  En este caso se utilizará el API 2.2.
3. Nombre de la aplicación (application name).
4. Crear una actividad (create activity).

Información básica del proyecto Android

En el Explorador de Paquetes (package explorer)  de Eclipse crear bajo el proyecto una carpeta /assets/www y otra /libs.

Copiar en la carpeta /assets/www el archivo phonegap.0.9.5.1.js y copiar en /libs el archivo phonegap.0.9.5.1.jar.  Ambos archivos se encuentran bajo el directorio ~/phonegap/0.9.5.1/Android creado durante el paso de instalación anterior.

Estructura del proyecto Android

Hacer clic derecho sobre el directorio /libs y seleccionar el menú Build Path > Configure Build Path… Allí en la pestaña Libraries agregue la referencia a /libs/phonegap.0.9.5.1.jar presionando el botón Add JARs…

Agregar al proyecto la referencia al JAR de PhoneGap.

Realizar las siguientes modificaciones al código fuente de la actividad.  Este archivo se ubica bajo la carpeta /src del proyecto (/src/com.jimezam.phonegap.demo/App.java en este caso).

1. Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
2. En la línea 6 cambiar la superclase de App de Activity a DroidGap.
3. Reemplazar la línea 11 (setContentView(R.layout.main);) con la siguiente: super.loadUrl("file:///android_asset/www/index.html");

Hacer clic derecho sobre el archivo AndroidManifest.xml y seleccionar el menú Open With… > Text Editor.  A este documento realizar las siguientes modificaciones.

1. Agregar el siguiente texto entre la apertura de la etiqueta <manifest> y la apertura de la etiqueta <application>.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

2. Agregar el siguiente atributo a la etiqueta <activity>.

android:configChanges="orientation|keyboardHidden"

Modificaciones al documento AndroidManifest.xml.

Finalmente crear el archivo /assets/www/index.html con el código fuente para la demostración.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello Android's World with PhoneGap</h1>
</body>
</html>

Ejecutar el proyecto en el emulador.

Seleccionar el menú Run > Run As > Android Application.

Ejecutar como aplicación Android.

Estos son un par de ejemplos de aplicaciones web simples ejecutándose con PhoneGap en el emulador de Android.

Hola Mundo web con Android

The Simple List 0.1

Enlaces.

• PhoneGap.
  http://www.phonegap.com/
• PhoneGap get starter guide.
  http://www.phonegap.com/start#android
• PhoneGap, Android and Eclipse quickstart.
  http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
• PhoneGap documentation directory.
  http://wiki.phonegap.com/w/page/35502422/Documentation-Directory

Otro prototipo que estuve preparando para el sexto Congreso Colombiano de Computación fue una aplicación web móvil basada en jQTouch para facilitarle a los visitantes consultar fácilmente la agenda de las conferencias y obtener la ruta que se deberá recorrer para llegar a los lugares del evento o demás sitios de interés de la ciudad.

El prototipo.

• Como se mencionó, se desarrolló utilizando jQTouch el cual es un plugin de jQuery por ende, la mayor parte de la aplicación se encuentra desarrollada en Javascript.
• La estructura de la información se encuentra implementada en HTML5 (sin validar aún).
• Se utilizó el servicio de mapas y rutas de Bing Maps ya que según los requerimientos de esta aplicación Bing cuenta con mejor información de Colombia que los demás proveedores.
• La aplicación realiza la geocodificación de la ubicación del usuario, intentando identificar la dirección en que se encuentra.
• También permite realizar la geocodificación inversa (de dirección a posición geográfica) según solicitud del usuario.  En este caso parece que la calidad del servicio de Bing es inferior a la de Google y valdría la pena cambiar al proveedor de este servicio específico.
• Por restricciones de seguridad de los navegadores web modernos, es necesario que el usuario autorice el acceso al GPS por parte de la aplicación web.  Si esto no se realiza, la aplicación no podrá contar con la posición del usuario en la ciudad.
• Para la demostración se manipuló el código de la aplicación para que en el momento de trazar una ruta siempre se tome una ubicación en Manizales (Caldas) como posición del usuario y permitir así experimentar con esta funcionalidad del prototipo.

Conclusiones.

• Por falta de tiempo no pudo hacerse pública la aplicación web móvil ya que no fue posible realizar suficientes pruebas con dispositivos móviles reales.
• Es necesario investigar mas acerca de jQTouch para utilizarlo en aplicaciones reales en producción.  Hasta el momento me parece una opción muy interesante para el desarrollo fácil de aplicaciones web móviles sin embargo hasta el momento no he encontrado buena documentación al respecto.
• La mayor parte del prototipo se encuentra lista, espero en un futuro cercano realizar mayores pruebas y ajustes para publicarlo como una versión final.

Enlaces.

• Demostración del prototipo, versión 0.1.
  http://demo.jorgeivanmeza.com/jQTouch/6CCCComoLlego/
• jQTouch.
  http://jqtouch.com/
• Bing Maps.
  http://www.bing.com/maps/

Después de implementada una primera versión de este prototipo utilizando el servicio de Google Maps, encontré una seria limitación en la funcionalidad que requería para el experimento: Google Maps no permite trazar rutas entre marcadores en Colombia.  Esta característica es funcional en otros paises y por esto implementé la posibilidad de teletransportarse para probarla, sin embargo en Colombia no es posible.

Investigando encontré que Bing Maps, servicio de mapas similar de Microsoft, si permite realizar el trazado de rutas entre marcadores en Colombia.  Así que en la noche de ayer me dí a la tarea de revisar el API de este proveedor y de crear un nuevo prototipo con él.

Efectivamente el trazado de rutas funciona muy bien.  Con respecto a la comparación de los servicios encontré el API de Bing Maps fácil de entender y con buena documentación en Internet y provee todas las características que se habían utilizado en el prototipo anterior.  Como desventajas aparentes he encontrado que las rutas trazadas parecen no variar (además del tiempo de recorrido) independientemente si se realizan conduciendo o caminando, y el servicio de geocodificación parece ser mucho mas limitado que el de Google.

El prototipo.

Prototipo de aplicación - Where am I and where am I heading to ?

Esta semana decidí experimentar un poco mas con la versión 3 del API de Google Maps que fue liberado hace relativamente poco.  Esta vez, quise hacer un prototipo sencillo pero interesante que integrara las principales funcionalidades que el servicio de Google Maps ofrece en los navegadores web actuales.

En este caso utilicé los mapas, la geocodificación y el trazado de rutas de Google y el servicio de geolocalización basada en el navegador web para obtener la siguiente funcionalidad.

• El servicio de geolocalización del navegador web permite situar al usuario en el espacio sin el uso de un GPS, esto gracias a una aproximación que aparentemente depende de la infraestructura del ISP.  A través de este servicio hace un par de meses lograba una geolocalización casi precisa de mi casa, mientras que recientemente sugiere que vivo en Cali/Valle, una ciudad que queda a unas 3 horas de viaje.
• El servicio de mapas permite situar gráficamente dos puntos: uno el del usuario geolocalizado y otro, un punto de destino que se elige libremente con el botón izquierdo del ratón.
• El servicio de rutas de Google permite trazar el camino necesario para llegar desde el punto de orígen hasta el punto de destino distinguiendo si el recorrido se hace caminando o conduciendo un vehículo.  Este servicio se complementa con el servicio de direcciones que determina las indicaciones que se deben seguir para llegar efectivamente al destino elegido.
• El último servicio utilizado corresponde con el de geocodificación que permite convertir el nombre de una ubicación (una ciudad por ejemplo) a su correspondiente coordenada geográfica (latitud y longitud).  Esto se utiliza para el sistema de teletransportación del usuario que permite ubicarlo en cualquier lugar que se especifique.

El aprovechamiento de estos APIs desde Javascript fue muy simple de implementar y fácilmente se desarrolló el prototipo.  Desafortunadamente Google no cuenta con el servicio de trazado de rutas en Colombia, motivo por el cual estoy revisando los servicios ofrecidos por BingMaps y OpenStreetMaps para continuar mi experimentación.

El prototipo.

Prototipo de aplicación - Where am I and where am I heading to ?

Enlaces.

• Prototipo funcional del proyecto.
  http://demo.jorgeivanmeza.com/GMaps/WhereAmI/
• W3C Geolocation API specification.
  http://dev.w3.org/geo/api/spec-source.html
• Google Maps API Family.
  http://code.google.com/apis/maps/index.html

La georreferenciación inversa es el proceso contrario al descrito anteriormente, corresponde al obtener el nombre de una ubicación (topónimo) a partir de su ubicación geográfica, en términos de latitud y longitud.

La aplicación de demostración.

Aplicación de demostración para la georreferenciación inversa con el API 3 de Google Maps

En el ejemplo equivale a conocer la ubicación del sitio: latitud = 5.073375 y longitud = -75.495155, y con esta información determinar que los siguientes sitios corresponden con esa posición.

• Carrera 12, Manizales, Caldas, Colombia.
• Manizales, Caldas, Colombia.
• Caldas, Colombia.
• Colombia.

La implementación.

Su implementación es una versión ligeramente mas simple que la georreferenciación directa.

A continuación se detallan a nivel general las variaciones de esta modalidad de georreferenciación con respecto a la expuesta en un artículo anterior.

Del lado de Javascript.

Se asocia el evento de clic sobre el mapa con la función que realizará la georreferenciación inversa (processReverseGeocoding).

google.maps.event.addListener(map, 'click', function(event) {
    processReverseGeocoding(event.latLng, showMarkerInfo);
});

En esta función se realiza el proceso de georreferenciación inversa el cual, al igual que su contraparte directa, es asíncrono y por este motivo se utiliza la misma estrategia del callback.

var request = {
    latLng: location
}
geocoder.geocode(request, function(results, status) {
    // ...
});

La función showMarkerInfo es ejecutada cuando se finaliza la georreferenciación inversa y esta ha obtenido resultados válidos.  Su misión es la mostrar la información resultante en el mapa.

    function showMarkerInfo(locations)
    {
        // Centra el mapa en la ubicación especificada
        map.setCenter(locations[0].geometry.location);
        // Crea el mensaje para mostrar la información georreferenciada
        var infoWindow = new google.maps.InfoWindow();
        infoWindow.setPosition(locations[0].geometry.location);
        // Prepara el mensaje con la información obtenida del proceso
        // de georreferenciación inversa
        var content = 'Latitud:  ' + locations[0].geometry.location.lat() + '<br />' +
                      'Longitud:  ' + locations[0].geometry.location.lng() + '<br />' +
                      '<br />Topónimos:<br /><ul>';
        for (var i=0; i<locations.length; i++)
        {
            if (locations[i].formatted_address)
                content += '<li>' + locations[i].formatted_address + '</li>';
            else
                content += '<li>No se encontró información.</li>';
        }
        content += "</ul>";
        infoWindow.setContent(content);
        // Muestra el mensaje sobre el mapa
        infoWindow.open(map);
    }

Enlaces.

• Aplicación de demostración del API v3 de georreferenciación inversa de Google Maps 0.1.
  http://demo.jorgeivanmeza.com/GMaps/GeocodeAPI3Demo/0.1/reverse.html
• The Google Geocoding API.
  http://code.google.com/apis/maps/documentation/geocoding/index.html
• Geocoding service.
  http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding

La georreferenciación es el proceso de determinar la ubicación (latitud, longitud) de una ubicación en la tierra según su nombre (topónimo).

Si estoy en Manizales, Caldas, Colombia estaré realmente en latitud 5.07, longitud -75.52056.

Existen varias formas de realizar este proceso dependiendo de los lenguajes de programación, interfaces y fuentes de información utilizados.  Anteriormente expliqué como hacerlo utilizando C#/Mono y el servicio web de Geonames, en este caso voy a utilizar el API Javascript versión 3 de Google Maps.

La aplicación de demostración.

Aplicación de demostración para la georreferenciación con el API 3 de Google Maps

Como se mencionó anteriormente, la funcionalidad es precisa: convertir el nombre de una ubicación en su correspondiente localización en términos de latitud y longitud, y mostrarla en el mapa.

La implementación.

Del lado de Javascript.

Incluír la referencia al API de Google Maps.

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

Instanciar el geocodificador.

var geocoder = new google.maps.Geocoder();

Crear el mapa.

window.onload = function() {
    var options = {
        zoom: 5,
        center: new google.maps.LatLng(4, -72),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);
    // ...

Establecer la funcionalidad del botón Buscar.

    document.getElementById('search').onclick = function() {
            // Obtiene la ubicación (string) a georreferenciar
            var location = document.getElementById('location').value;
            // Inicia el proceso de georreferenciación (asíncrono)
            processGeocoding(location, addMarkers);
            // Detiene el procesamiento del evento
            return false;
        }
    } // Fin del método window.onload

El proceso de georreferenciación es asíncrono así que es necesario especificar una función (callback) para que se ejecute si la georreferenciación termina exitosamente.

El núcleo de la georreferenciación se realiza en la invocación al método geocoder.geocode(opciones, implementacion).  Es necesario determinar el estado final (status) después de la ejecución asíncrona para determinar que acción puede realizarse con los datos resultantes.

    function processGeocoding(location, callback)
    {
        // Propiedades de la georreferenciación
        var request = {
            address: location
        }
        // Invocación a la georreferenciación (proceso asíncrono)
        geocoder.geocode(request, function(results, status) {
            /*
             * OK
             * ZERO_RESULTS
             * OVER_QUERY_LIMIT
             * REQUEST_DENIED
             * INVALID_REQUEST
             */
            // Notifica al usuario el resultado obtenido
            document.getElementById('message').innerHTML = "Respuesta obtenida: " + status;
            // En caso de terminarse exitosamente el proyecto ...
            if(status == google.maps.GeocoderStatus.OK)
            {
                // Invoca la función de callback
                callback (results);
                // Retorna los resultados obtenidos
                return results;
            }
            // En caso de error retorna el estado
            return status;
        });
    }

La función enviada como callback (addMarkers) es la responsable de tomar las ubicaciones retornadas por la georreferenciación, crearles marcadores, ventanas de información, asociarlas al evento de clic y mostrarlas en el mapa.

   function addMarkers(geocodes)
    {
        for(i=0; i<geocodes.length; i++)
        {
            // Centra el mapa en la nueva ubicación
            map.setCenter(geocodes[i].geometry.location);
            // Valores iniciales del marcador
            var marker = new google.maps.Marker({
                map: map,
                title: geocodes[i].formatted_address
            });
            // Establece la ubicación del marcador
            marker.setPosition(geocodes[i].geometry.location);
            // Establece el contenido de la ventana de información
            var infoWindow = new google.maps.InfoWindow();
            content = "Ubicación: " + geocodes[i].formatted_address + "<br />" +
                      "Tipo: " + geocodes[i].types + "<br />" +
                      "Latitud: " + geocodes[i].geometry.location.lat() + "<br />" +
                      "Longitud: " + geocodes[i].geometry.location.lng();
            infoWindow.setContent(content);
            // Asocia el evento de clic sobre el marcador con el despliegue
            // de la ventana de información
            google.maps.event.addListener(marker, 'click', function(event) {
                infoWindow.open(map, marker);
            });
        }
    }

Del lado de HTML.

Se implementa una estructura muy simple para desplegar la información.  Una primera parte permite desplegar el mensaje de información acerca del estado del proceso y le permite al usuario ingresar el nombre de la ubicación a georreferenciar.

    <!-- Mensaje de estado -->
    <div id="message"></div>
    <!-- Ubicación a georreferenciarse -->
    <label for="location">Ubicación:</label>
    <input type="text" id="location" name="location" value="" size="40" />
    <!-- Botón para inciar la georreferenciación -->
    <input type="button" id="search" name="search" value="Buscar" />

Una segunda parte establece la ubicación para desplegar el mapa.

<!-- Lugar de despliegue del mapa -->
<div id="map"></div>

Enlaces.

• Aplicación de demostración del API v3 de georreferenciación de Google Maps 0.1.
  http://demo.jorgeivanmeza.com/GMaps/GeocodeAPI3Demo/0.1/demo.html
• The Google Geocoding API.
  http://code.google.com/apis/maps/documentation/geocoding/index.html
• Geocoding service.
  http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding