Entonces, ¿qué es una API?

Una interfaz de programación de aplicaciones es una colección de instrucciones y estándares de programación para acceder a una aplicación de software. Con una API, es posible diseñar productos basados en el servicio que proporciona la API.

HTML5 tiene varias APIs nuevas. Por ejemplo:

• Una API de dibujo en 2D utilizada con el nuevo elemento de lienzos para representar gráficos y otras imágenes visuales
• Un mecanismo API de memoria caché que soporta aplicaciones web offline
• Una API para reproducir video y audio utilizado con los nuevos elementos de video y audio
• Una API de historial que hace que el historial de navegación sea accesible y permite que las páginas se agreguen a este
• Una API de arrastrar y soltar para ser utilizada con el atributo draggable
• Una API de edición para ser utilizada con el atributo contenteditable
• Almacenamiento del lado del cliente con APIs de JavaScript para pares de valor clave y también bases de datos SQL intercaladas

Este artículo se concentra en dos APIs: Geolocation y Web Worker. Primero, analiza las APIs mismas; después, usted crea una página que contiene ambas APIs.

Volver arriba

La empresa está en todas partes: Geolocalización

Usted utiliza la API Geolocation para determinar y compartir posiciones geográficas. La API retorna las coordenadas de longitud y latitud — información que las empresas pueden utilizar para ofrecer servicios en el área aproximada a las coordenadas. A estos servicios normalmente se les conoce como servicios basados en la ubicación (LBS).

LBS se refiere a las fuentes de datos geográficos utilizados para identificar la ubicación física del instrumento que se está supervisando y, por lo tanto, los humanos asociados con esa ubicación. Esta función da a las partes interesadas la oportunidad de interactuar con ese individuo con base en el mercado por algún punto de interés céntrico geográfico.

El negocio en realidad se trata de la creación de calidad, utilidad y valor para los clientes, mientras que al mismo tiempo se crean beneficios económicos y financieros para las partes interesadas, acreedores, accionistas, empleados y proveedores. Los LBS basados en Geolocalización facilitan realizar el seguimiento o supervisar un paquete o una persona utilizando un dispositivo que no sea de navegador o un navegador. Comercialmente, la geolocalización se trata del uso de activos geográficos para determinar dónde se ubica alguien o algo, para después vender ese conjunto específico de información a cualquiera que desee usarlo para fines sociales, comerciales o de otro tipo, tomando en cuenta que existe un permiso legal del propietario de la información para hacer esto.

Cómo funciona la geolocalización

La API Geolocation está basada en una nueva propiedad del objeto global navigator: navigator.geolocation. El objeto de JavaScript navigator proporciona información útil sobre el navegador y el sistema del visitante. La geolocalización puede determinar la latitud y longitud utilizando direcciones IP, bases de datos basadas en web, conexiones de red inalámbricas y tecnología GPS o de triangulación. Debe tomarse en cuenta que la precisión de la información proporcionada por la Geolocalización varía en base a los medios para obtener dicha información. En ocasiones, y en algunas ubicaciones, usted no podrá obtener una lectura de geolocalización clara o incluso no obtener dato alguno.

Los scripts pueden emplear el objeto navigator.geolocation para determinar información de la ubicación relacionada con el dispositivo host del usuario. Después de que la información de la ubicación es recuperada, un objeto de posición es creado y llenado con los datos.

El objeto navigator.geolocation tiene tres métodos:

• getCurrentPosition()
• watchPosition()
• clearWatch()

El método getCurrentPosition()

El método getCurrentPosition() recupera la ubicación actual del usuario, pero sólo una vez. Cuando es llamado por un script, el método intenta obtener la ubicación actual del dispositivo host en forma asíncrona. Comunicación asíncrona significa que el remitente y el destinatario no participan en una comunicación de manera concurrente. Utilizar la comunicación asíncrona permite al navegador continuar realizando otras actividades, de forma que no tiene que esperar una respuesta de la entidad receptora.

El método getCurrentPosition() puede tener hasta tres argumentos:

• geolocationSuccess. La devolución de llamada con la posición actual (necesario)
• geolocationError. La devolución de llamada si hubo algún error (opcional)
• geolocationOptions. Las opciones de geolocalización (opcional)

El método navigator.geolocation.getCurrentPositon() regresa la posición actual del dispositivo host a la devolución de llamada de geolocationSuccess con un objeto Position según el parámetro. Si hubiera algún error, la devolución de llamada geolocationError es invocada con un objeto PositionError. Es posible establecer tres propiedades para geolocationOptions: enableHighAccuracy, timeout y maximumAge. Estas propiedades opcionales permiten una alta precisión si el dispositivo lo soporta, un tiempo de espera que una posición debió haber regresado y una cantidad máxima de tiempo en que una ubicación en memoria caché puede ser utilizada, respectivamente.

El método getCurrentPosition() es llamado como se muestra aquí:

void navigator.geolocation.getCurrentPosition(
          geolocationSuccess, geolocationError, geolocationOptions);

El método watchPosition()

El método watchPosition() sondea la ubicación del usuario de forma regular, observando si la ubicación del usuario ha cambiado. Puede tener hasta tres argumentos.

Cuando watchPosition es llamado, inicia un proceso de vigilancia de forma asíncrona, involucrando la adquisición de un nuevo objeto Position y la creación de un watchID. Si esta adquisición es exitosa, el geolocationSuccess asociado con un objeto Position como un argumento es invocado. Después de una anomalía que involucre un método invocado con un argumento geolocationError no nulo, el método genera el geolocationError con un objeto PositionError como un argumento. Cuando la posición del dispositivo cambia, una devolución de llamada adecuada con un objeto Position nuevo es invocada.

El método watchPosition() es llamado como se muestra aquí:

long navigator.geolocation.watchPosition(
          geolocationSuccess, geolocationError, geolocationOptions);

El método clearWatch()

El método clearWatch() finaliza un continuo watchPosition(). Este método puede tener sólo un argumento. Cuando es llamado, encuentra el argumento watchID que fue previamente iniciado e inmediatamente lo detiene.

El método clearWatch() es llamado como se muestra aquí:

void navigator.geolocation.clearWatch(watchID)

Datos de Geolocalización: El objeto de Posición

La API Geolocation regresa un objeto Position geográfico. Este objeto tiene dos propiedades: timestamp y coords. La propiedad timestamp indica la fecha de creación de los datos de geolocalización. La propiedad coords tiene siete atributos:

• coords.latitude. La latitud estimada
• coords.longitude. La longitud estimada
• coords.altitude. La altitud estimada
• coords.accuracy. La precisión de los estimados de latitud y longitud proporcionados en metros
• coords.altitudeAccuracy. La precisión del estimado de altitud proporcionado en metros
• coords.heading. La dirección de movimiento actual del dispositivo host en grados, considerando una relación en sentido de las manecillas del reloj para el norte verdadero
• coords.speed. La velocidad de avance actual del dispositivo en metros por segundo

Sólo se garantiza que tres de las propiedades estarán aquí: coords.latitude, coords.longitude y coords.accuracy. La prueba regresa null, dependiendo de las posibilidades de su dispositivo y del servidor de posicionamiento de backend al que está hablando. Las propiedades heading y speed son calculadas con base en la posición previa del usuario, si es posible.

Volver arriba

Trabajadores web al rescate

Los trabajadores web resuelven los problemas causados por concurrencia. Los trabajadores web son la respuesta de la familia HTML5 al problema de hebra única de JavaScript: ejecutan procesos en una hebra separada de la página principal, preservando la página para las funciones principales, tales como mantener la IU estable.

Un trabajador web es un archivo JavaScript que es cargado y ejecutado en segundo plano. Estos trabajadores le permiten cargar un archivo JavaScript dinámicamente, y después ejecutar un script utilizando un proceso en segundo plano que no afecta la IU. Los trabajadores web tienen acceso limitado y sólo se les permite pasar cadenas de caracteres. Ya que los trabajadores web no utilizan la hebra de IU del navegador, no se les permite acceder al DOM. Los trabajadores pueden usar las referencias self y this para el ámbito global del trabajador. La comunicación entre el trabajador y la página padre se consigue utilizando un modelo de evento y el método postMessage().

Ya que los trabajadores web tienen un comportamiento de hebras múltiples, sólo pueden acceder a un subconjunto de dispositivos JavaScript. Los trabajadores web pueden:

• Acceder al objeto navegador
• Usar el objeto de ubicación de sólo lectura
• Ejecutar XMLHttpRequest para enviar solicitudes HTTP o HTTPS
• Establecer una hora o intervalo para el uso de una actividad setTimeout()/clearTimeout() y setInterval()/clearInterval()
• Acceder a la memoria caché de la aplicación
• Importar scripts externos utilizando el método importScripts()
• Engendrar otros trabajadores web (el (trabajador) hijo debe tener el mismo origen que la página principal y ser colocado en la misma ubicación que el trabajador padre).

Existen dos tipos de trabajadores web: trabajadores dedicados y trabajadores compartidos.

Trabajador web dedicado

Un trabajador dedicado está enlazado al script que lo creó, y puede comunicarse con otros trabajadores o componentes del navegador. Sin embargo, no puede comunicarse con el DOM.

Un trabajador dedicado es creado al pasar un nombre de archivo JavaScript a una nueva instancia de trabajador. Usted crea un nuevo trabajador utilizando el constructor Worker() al especificar el URI del script de ejecución del trabajador. Para crear un trabajador dedicado, ingrese el código mostrado aquí, que crea un nuevo objeto Worker dedicado:

var worker = new Worker('worker.js');

Trabajadores web compartidos

Los trabajadores web compartidos, como los trabajadores dedicados, no pueden acceder al DOM y sólo tienen acceso limitado a las propiedades de ventana. Los trabajadores web compartidos sólo pueden comunicarse con otros trabajadores web compartidos desde el mismo dominio. Los trabajadores son creados al pasar un nombre de JavaScript a una nueva instancia de trabajador compartido.

Los scripts de página pueden comunicarse con trabajadores web compartidos. Sin embargo, a diferencia de los trabajadores web dedicados, usted se comunica utilizando un objeto port y adjuntando un manejador de eventos de mensaje. Además, usted debe llamar el método start() del puerto antes de usar el primer postMessage().

Tras la recepción del primer mensaje del script de trabajador web, el trabajador web compartido adjunta un manejador de eventos al puerto activo. Generalmente, el manejador ejecutará su propio método postMessage() para retornar un mensaje al modo de llamada, y después el método start() del puerto genera un proceso de mensaje de habilitación.

Para crear un trabajador web compartido, debe crear un objeto SharedWorker en lugar del objeto Worker. El siguiente código muestra cómo un nuevo objeto SharedWorker es creado:

var worker = new SharedWorker('worker.js');

Volver arriba

Construyendo una página incluyendo las dos APIs

Diseñará una página que contiene modelos de trabajo básicos de las APIs Geolocation y Web Worker. Además, usted usa la API Google Map para representar los datos obtenidos como un mapa.

La página es organizada como se muestra en la Figura 1. Contiene un área Header creada utilizando las etiquetas <header></header>, un área Section creada utilizando las etiquetas <section></section>, y un área Aside creada utilizando las etiquetas <aside></aside>.

Las áreas <section> y <aside> contienen las APIs. El área Section contiene la API Geolocation. El área Aside contiene el trabajador web, que calcula los números primos.

Cuando se ejecuta, la página web se muestra como en la Figura 2. Para ver los datos de geolocalización, primero debe aceptar compartir su información. El trabajador web se inicia cuando se carga la página. Si desea ver los números primos encontrados, haga clic en Display Web Worker.

El archivo HTML

El archivo HTML comienza con información HTML5 estándar mostrada en el Listado 1. La sección <head> contiene una llamada a la API Google Maps, estableciendo el valor del sensor como False. Usar la API Google Maps requiere que usted defina si su aplicación está usando un sensor, como un GPS, para establecer la ubicación. Usted debe declarar un valor de parámetro de sensor de True o False para su aplicación de API Google Maps. Un valor de sensor debe ser declarado. La etiqueta <head> también contiene enlaces a los archivos JavaScript y CSS3 utilizados para manejar las funciones y dar formato a la página web.

	
<!doctype html>
<html>
<head>
  <title>Basic GeoLocation Map & Web Worker Prime Number Calculator</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script>
  <LINK href="GeolocationWebWorker.css" rel="stylesheet" type="text/css">
  <script src="HTML-Part3-GeolocationWebWorker.js" type="text/javascript"></script>
</head>

La etiqueta <body> contiene un evento onLoad que llama la función de inicialización para la geolocalización, como se muestra en el Listado 2. Esta función verifica que la geolocalización puede ser utilizada en este navegador. La función de inicialización está en el archivo JavaScript. Si el navegador puede comunicarse con la API Geolocation, el mapa será representado.

	
<body onLoad="initGeoApp();">
  <header>
    <hgroup>
      <h1>Geolocation & Web Worker</h1>
      <h2>Making it work</h2>
    </hgroup>
  </header>

La etiqueta <section> mostrada en el Listado 3 contiene la información de salida mostrada para el objeto navigator.geolocation. Un lienzo de mapa es creado utilizando la longitud y latitud que la API regresa. Los datos de Position coords también son mostrados utilizando las etiquetas <span></span>.

	
<section>
    <p>Este es el mapa de ejemplo de geolocalización.</p>
    <div id="map_canvas" ></div>

    <p>Esta es la salida del objeto navigator.geolocation.</p>
    <table>
    <tr>
        <td>accuracy:</td>
        <td><span id="accuracyOutput"></span></td>
    </tr>
    <tr>
        <td>altitude:</td>
        <td><span id="altitudeOutput"></span></td>
    </tr>
    <tr>
        <td>altitudeAccuracy:</td>
        <td><span id="altitudeAccuracyOutput"></span></td>
    </tr>
    <tr>
        <td>heading:</td>
        <td><span id="headingOutput"></span></td>
    </tr>
    <tr>
        <td>latitude:</td>
        <td><span id="latitudeOutput"></span></td>
    </tr>
    <tr>
        <td>longitude:</td>
        <td><span id="longitudeOutput"></span></td>
    </tr>
    <tr>
        <td>speed:</td>
        <td><span id="speedOutput"></span></td>
    </tr>
    </table>
   </section>
  <aside>
    <p>Este es el Trabajador Web. </p>
    <p>Resultado del cálculo de números primos:
    <output id="result"></output></p>

El Trabajador Web calcula los números primos. Usted usa la nueva etiqueta <output> para mostrar los cálculos que proporciona el trabajador web. El ID asignado en la etiqueta <output> es el mismo ID que usa JavaScript para identificar el cálculo que realiza. Los IDs utilizados en las etiquetas <span> y <output> los hacen accesibles para el DOM. Sin el ID de referencia, JavaScript no sabrá qué <span> o <output> usar. El Listado 4 muestra la salida del trabajador web.

	
  <aside>
    <p>Este es el Trabajador Web. </p>
    <p>Resultado del cálculo de números primos:
    <output id="result"></output></p>

El onClick es utilizado en la etiqueta <input> para primero mostrar los valores que están siendo calculados por el trabajador web de Número Primo, y después el segundo onClick es utilizado para detener el trabajador web. El Listado 5 muestra el código. La función displayWorker() causa que los cálculos del trabajador web sean mostrados cuando se hace clic en el botón. El trabajador web comenzó a calcular los números primos cuando la página fue cargada.

	
    <input type="button" value="Display Web Worker" onClick="displayWorker();">
    <input type="button" value="Stop Web Worker"    onClick="stopWorker();">

  </aside>
</body>
</html> 

El archivo JavaScript

JavaScript es el motor detrás de las APIs exhibidas en la página de ejemplo. La API Geolocation es inicializada con la función initGeoApp(). Esta es la función ejecutada por el evento onLoad() en la etiqueta <body>: determina si su navegador puede utilizar la geolocalización (ver el Listado 6). Si su navegador puede usar la geolocalización, entonces la API Geolocation es llamada. Si se tiene éxito, un mapa es dibujado utilizando los atributos Position. Los valores de los atributos son entonces impresos debajo del mapa.

	
function initGeoApp()
  {
   if( navigator.geolocation )
     { 
        navigator.geolocation.getCurrentPosition( success, failure);
     }
    else
     {
        alert("Your browser does not support geolocation services.");
    }
   }

Los valores son recuperados utilizando document.getElementById, con base en el ID que proporcionó en el archivo HTML. document.getElementById es un método del objeto de documento y debe ser accedido utilizando document.getElementById, como se muestra en el Listado 7. Los valores de los atributos Position son almacenados aquí, de forma que pueden ser utilizados para imprimir los atributos debajo del mapa para que sean representados.

	
	     var map;
	     function success(position)
	     {
            document.getElementById("accuracyOutput").innerHTML = 
			     position.coords.accuracy;
            document.getElementById("altitudeOutput").innerHTML = 
			     position.coords.aktitude;
            document.getElementById("altitudeAccuracyOutput").innerHTML = 
			     position.coords.altitudeAccuracy;
            document.getElementById("headingOutput").innerHTML = 
			     position.coords.heading;
            document.getElementById("latitudeOutput").innerHTML = 
			     position.coords.latitude;
            document.getElementById("longitudeOutput").innerHTML = 
			     position.coords.longitude;
            document.getElementById("speedOutput").innerHTML = 
			     position.coords.speed;

Esta sección define las coordenadas para el objeto LatLng de la API Google Map, como se muestra en el Listado 8. El objeto LatLng de la API Google Map proporciona la información de coordenadas necesaria para crear un mapa. Es posible establecer el nivel de zoom y muchas otras opciones que crean la apariencia del mapa presentado al usuario.

	
var coordinates = new google.maps.LatLng(position.coords.latitude, 
     position.coords.longitude);

	 
var myOptions =
  {
    zoom: 14,
    center: coordinates,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.small},
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };

Tome en cuenta que en la opción mapTypeID, la opción seleccionada es ROADMAP. Este valor presenta el mapa, de forma que aparece como se muestra en la Figura 2. Existen cuatro valores posibles:

• ROADMAP
• HYBRID
• SATELLITE
• TERRAIN

La Figura 3 muestra cómo aparecería la página con la opción HYBRID seleccionada.

Crear el mapa usando el ID map_canvas, que es el ID para el <div> en el archivo HTML:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Coloque un marcador de posición inicial en el mapa. El Listado 9 muestra el código.

	
      var marker = new google.maps.Marker({
        position: coordinates,
        map: map,
        title: "You are here."
        });
       }
	 
       function failure()
       {
          alert("Sorry, could not obtain location");
        }

El trabajador web comienza a ejecutarse cuando la página es inicializada. Si el usuario desea mostrar la salida de los cálculos que se están realizando, puede hacer clic en Display Web Worker, lo que llamará la función displayWorker(). El Listado 10 muestra el código.

	
     var worker = new Worker('PrimeNumberWebWorker.js');

  function displayWorker()  
  {
         worker.onmessage = function (event) 
           {            
             document.getElementById('result').innerHTML = event.data;
           };
    }

Si el usuario desea detener el trabajador web, puede hacer clic en Stop Web Worker, lo que llamará la función stopWorker() mostrada en el Listado 11.

	
 function stopWorker() 
   {
       worker.terminate();
     }

El archivo de trabajador web

Este archivo es el trabajador web calculador de números primos: calcula todos los números primos hasta que es detenido. El Listado 12 muestra el código.

	
var n = 1;
search: while (true) {
   n += 1;
   for (var i = 2; i <= Math.sqrt(n); i += 1)
      if (n % i == 0)
         continue search;
  postMessage(n);
}

El archivo CSS3

El archivo CSS3 mostrado en el Listado 13 proporciona el formato mostrado en la página HTML5.

	
* {font-family: Arial,Helvetica,sans-serif ;
}

body {
  margin: 0 300px 0 300px;
  color: #990000;
  background-color:#FFFFCC;
}

header > hgroup h1 {
  margin: 0 0 3px 0;
  padding: 0;
  text-align: center;
   font-size: 30px;
}


header > hgroup h2 {
  margin: 0 0 15px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
   font-size: 12px;
}


header p {
  margin: 0 0 20px 0 ;
  padding: 0;
  text-align: center;
   font-size: 12px;
}

aside {
  width: 200px;
  height: 175px;
  margin: -450px 0 0 450px;
  background-color:  #990000;
  padding: .5px 0 0 10px ; 
  color:#FFFFFF;
  font-weight:bold;
}

div {
  width: 400px; 
  height: 250px; 
}

Volver arriba

Conclusión

Esta entrega examinó la utilidad de las APIs Geolocation y Web Worker. Estas dos APIs fueron seleccionadas porque juntas demuestran tanto la innovación como el uso práctico de las APIs. La Geolocalización es un ejemplo excelente del uso de las especificaciones de HTML5 en la creación de nuevos modelos de negocio. Asimismo, el rol del Trabajador Web es la resolución de los problemas inherentes en el problema de concurrencia de JavaScript.

Estas dos APIs juntas ilustran una combinación de modelo del uso de HTML5 para uso comercial y social. Por lo tanto, su utilidad demuestra la facilitación apropiada y gestión general de una aplicación de Internet HTML5 enriquecida.

Volver arriba

Descargar

Información sobre métodos de descarga

Recursos

Aprender

• La Especificación de Trabajadores Web publicada por WHATWG proporciona información detallada del trabajador.
  
  
• La especificación W3C para la geolocalización, Especificación de Nivel 2 de la API Geolocation, proporciona una sección exhaustiva de caso de uso y requisitos que es útil para formular aplicaciones comerciales y sociales de la API.
  
  
• Construya aplicaciones Web con HTML 5 (developerWorks, marzo de 2010) habla sobre varios de los nuevos dispositivos introducidos con HTML5.
  
  
• Creando aplicaciones Web móviles con HTML 5, Parte 1: Combinar HTML 5, APIs de geolocalización y servicios Web para crear mashups móviles (developerWorks, mayo de 2010) proporciona conocimiento valioso sobre el desarrollo de aplicaciones móviles.
  
  
• Crear sitios Web modernos utilizando HTML5 y CSS3 (developerWorks, marzo del 2010) es un tutorial sobre HTML5 y CSS3 multicomponente.
  
  
• En New elements in HTML 5 (developerWorks, agosto del 2007), usted encontrará información sobre varios de los nuevos elementos en HTML5.
  
  
• El sitio Web <html>5doctor proporciona una excelente perspectiva sobre las tendencias actuales en HTML5.
  
  
• El sitio Web W3Schools.com: HTML5 Tag Reference ofrece una extensa lista de etiquetas HTML5, definiciones y ejemplos.
  
  
• El sitio Web sitio Web WHATWG proporciona información detallada para la especificación HTML5.
  
  
• El sitio Web zona de desarrollo Web se especializa en artículos que cubren varias soluciones basadas en la Web.
  
  
• Manténgase actualizado(a) con los eventos técnicos y webcasts developerWorks.
  
  
• Demostraciones on demand de developerWorks: Observe demostraciones que van desde la instalación de productos y demostraciones de configuración para principiantes, hasta funcionalidades avanzadas para desarrolladores experimentados.
  
  
• Siga a developerWorks en Twitter.
  
  

Obtener los productos y tecnologías

• El Dojo Toolkit, una biblioteca JavaScript modular de código abierto, le ayuda a desarrollar rápidamente aplicaciones y sitios web para todas las plataformas y basadas en JavaScript/Ajax.
  
  

Comentar

• Cree su perfil developerWorks hoy y configure una lista de observación en HTML5. Conéctese y permanezca en contacto con la comunidad developerWorks.
  
  
• Encuentre a otros miembros de developerWorks interesados en el desarrollo Web.
  
  
• Comparta lo que usted sabe: Únase a uno de nuestros grupos developerWorks enfocados en temas Web.
  
  
• Roland Barcia habla en su blog sobre Web 2.0 y middleware.
  
  
• Follow developerWorks' members' shared bookmarks on web topics.
  
  
• Obtenga respuestas rápidamente: Visite el foro Web 2.0 Apps.
  
  
• Obtenga respuestas rápidamente: Visite el foro Ajax.
  
  

Sobre el autor

Califique este artículo

Comentario

Volver arriba

Tabla de contenidos

• Entonces, ¿qué es una API?
• La empresa está en todas partes: Geolocalización
• Trabajadores web al rescate
• Construyendo una página incluyendo las dos APIs
• Conclusión
• Descargar
• Recursos
• Sobre el autor
• Comentarios