• 
• 
• 

Este post es un resumen de tres experimentos que hicimos hace unos meses con TheeJS e información capturada con un Kinect.

La parte de kinect la hicimos en Processing, con la libreria SimpleOpenNI para kinect. Con ella guardamos un archivo en formato .ply, que guarda las coordenadas x,y,z y color (canales r,g,b y alpha) de cada punto capturado por la cámara.Algo tipo:

Los ejemplos muestran la visualización de este archivo en ThreeJS, utilizando lineas, puntos o ribbons. Podéis verlo en movimiento haciendo click en cada imagen.

La API de geolocalización de Javascript permite obtener la geoposición del usuario. Este ejemplo muestra como obtener la posición (latitud y longitud) del usuario y posicionarla sobre un mapa de GoogleMaps.

Algunas cosas a tener en cuenta a la hora de utilizar esta API son:

• La geolocalización es compatible con la mayoría de navegadores modernos, tanto de mobile como de escritorio. Los casos mas "problemáticos" de incompatibilidad pueden ser IE8 e inferiores, y Opera Mini
• La precisión de este método depende del navegador/dispositivo. Por ejemplo Chrome utiliza los Google Location Services e Internet Explorer los Microsoft Locacion Service, por lo que los resultados pueden variar en un mismo dispositivo de un navegador a otro.
• Cuando se llama al método getCurrentPosition el navegador mostrará una ventana al usuario solicitando permiso para obtener su posición.

Algunos enlaces de interes:

• Especificación W3C de la API de geolocalización
• Artículo de Mozilla
• Precisión y funcionamiento de la API de geolocalización
• Compatibilidad con navegadores

Ejemplo en Movimiento

El código comentado:

Este truco sirve para cuando necesitamos obtener las coordenadas de un punto en Google Maps (por ejemplo para utilizarlas luego para mostrar ese mismo punto en un mapa que montemos nosotros en Flash con la API de Google). Para obtener estas coordenadas basta con que busquemos la dirección que queramos en Google Maps y después, en la barra de dirección pongamos esta linea de javascript:

Pulsamos intro, y nos saltará una ventana con las dos coordenadas del punto que hemos buscado.

Cuando empezamos a trabajar con HTML5, tenemos que tener en cuenta que no existe algo tan simple como "comprobar la compatibilidad total del navegador con HTML5", sino que tenemos que comprobar si el navegador soporta cada una de las funciones que vayamos a utilizar. Por ejemplo, podría ser que un navegador soporte la etiqueta <canvas>, pero no la etiqueta <video>, e incluso soportando la etiqueta<video>, puede que no esté preparado para reproducir determinados formatos de vídeo.

Si comprobamos el soporte para cada una de estas funcionalidades, podemos ofrecer un contenido alternativo o avisar a los usuarios para que actualicen su navegador.

Modernizr es una librería de Javascript que detecta el soporte para funcionalidades de HTML5 y CSS3 de manera muy sencilla. Por ejemplo si queremos comprobar si está disponible la etiqueta <canvas>:

Podéis encontrar mas ejemplos de uso y la última versión de la librería en la web de Modernizr.

También recomiendo echar un ojo a este recurso (en inglés), donde viene explicado mas a fondo el tema (y tiene otros capítulos muy interesantes): diveintohtml5.org

Una de las novedades de HTML5 es la etiqueta <canvas>. Esta etiqueta permite crear dinámicamente formas y elementos 2d. En este ejemplo, crearemos una pizarra sencilla con esta nueva etiqueta y algo de JavaScript.

La sintaxis para crear un objeto canvas, es la siguiente:

Como vemos, especificamos un ancho, un alto, y un id ("pizarra") que utilizaremos para manipular el canvas desde JavaScript. El código JavaScript comentado sería este: