Noticias
Primeros pasos con HTML5 y ArcGIS Server
Hay algunas de las características del HTML5 que Esri está investigando para su posible uso dentro de las web APIs: geolocalización, almacenamiento off-line, eventos de arrastrar y soltar… Aunque actualmente el SDK de javascript no incorpora ningún elemento nativo de HTML5, esto no impide que, si el navegador lo permite, estas características puedan ser empleadas en los nuevos desarrollos web. No obstante, en futuras versiones del SDK estas funcionalidades se irán incorporando para permitir mejores capacidades con dispositivos móviles, uso del objeto HTML5 canvas, etc…
Pero, ¿qué es el HTML5 y en qué me puede ayudar en mis proyectos GIS? En el post de hoy trataremos de explicar qué es, qué elementos nuevos contiene, qué se puede hacer con estos elementos desde un punto de vista de las aplicaciones web SIG, y por último algunas referencias y primeros pasos para los más curiosos.
¿Qué es el HTML5?
HTML5 es la última especificación del lenguaje HTML aprobada por el W3C. Parecía claro que las necesidades de las aplicaciones web habían excedido con mucho las capacidades originales para las que fue concebido el HTML (mostrar textos e hiperenlaces). Los desarrolladores se tuvieron que ir buscando los trucos para ir superando estas dificultades, bien a través de DHTML (JavaScript+CSS+HTML) o a través de plugins (Flex, Silvelight, Applets, ActiveX, etc…).
Había llegado la hora de re-definir el HTML y de ahí surgió el HTML5. Entre sus características principales, destacan la incorporación de nuevas etiquetas con capacidades multimedia (canvas, video, audio…), con capacidades semánticas (section, article, header….) o la creación y/o eliminación de ciertos atributos. Otra gran característica del HTML5 es que intenta acabar con el «infierno» del DOM, incorporando su especificación dentro del propio lenguaje y proporcionando un API común.
¿Qué elementos del HTML5 puedo aprovechar en mis aplicaciones web SIG?
- Geolocation (geolocalización). Se trata de recuperar la información geográfica de localización de un determinado dispositivo cliente. Los que ya uséis Twitter seguro que alguna vez un navegador os haya preguntado si dejáis que localice vuestra posición. Esto es justo el elemento Geolocation en acción. No hace falta indicar las posibilidades que ofrece este elemento en cualquier aplicación SIG. Podéis ver un ejemplo de geolocalización aquí.
- Canvas. Es una nueva etiqueta que permite mostrar gráficos en 2D. Por supuesto, un posible uso inmediato podría ser su utilización para pintar elementos vectoriales sobre él, pero también podría utilizar para representar gráficos y diagramas, y no es descartable que en el futuro algún framework AJAX permita utilizarlo para este propósito.
- Drag-and-drop. Quizá una de las funcionalidades que más se echa de menos en las aplicaciones web en comparación con las Desktop. Aunque hay librerías (como Dojo en la que se basa el SDK Javascript de ArcGIS) que permite esta funcionalidad, su incorporación de forma nativa en HTML5 permitirá su uso en todos los navegadores compatibles y en todos los dispositivos. Por ejemplo, una aplicación web SIG podría permitir que un usuario arrastrar un documento sobre un mapa para georreferenciarlo.
- Offline Storage Database. ¿Cuántas veces has echado de menos poder almacenar ciertos datos sin tener que recurrir a objetos de sesión, bbdd, etc…? Este es justo el elemento que necesitabas. Con este almacenamiento es posible guardar a nivel de dominio o de sesión, en una pequeña bbdd local aquella información de tu aplicación que necesites tener a mano. Y lo mejor de todo es que puedes usar lenguaje SQL.
- Filesystem. Crear, borrar, leer, editar archivos… todas estas operaciones con archivos ya se pueden hacer directamente desde HTML5 y javascript, sin necesidad de pasar por el servidor. Por ejemplo, se podría crear y luego leer un archivo de configuración personalizada de una aplicación web SIG directamente desde el navegador. ¿Potente no?
- Workers. El navegador no responde. Has seleccionado una compleja operación de cálculo hecha en javascript, y tarda más de la cuenta. No ha fallado, pero el usuario cree que sí y…¡cierra el navegador!. Seguro que este caso te ha ocurrido alguna vez y has echado de menos la posibilidad de hacer hilos (threads). Pues bien, con workers esto es posible. Si intuyes que un script puede hacer que se colapse el navegador, solo hay que asignarlo a un worker, informar a tu usuario y listo. Problema resuelto.
- Mobile. ¿Una página web para cada tipo de dispositivo? No hace falta, con mobile tags es posible especificar, en función del tipo de dispositivo que acceda a tu página, qué estilo y qué características son las necesarias para que se muestre correctamente. Una sola página HTML, se puede mostrar sin modificaciones en varios dispositivos. Algo cada vez más importante y que hay que tener en cuenta en los desarrollos de aplicaciones web .
Caso de uso conjunto
No es difícil imaginar un caso de uso conjunto, en el que un usuario en un dispositivo móvil (mobile tags) le centre automáticamente el mapa en función de dónde esté (geolocation), edite ciertos elementos en un mapa (canvas, drag-n-drop), los guarde off-line, vuelva al día siguiente (off-line storage), y los exporte a un archivo de texto (filesystem). Todo ello será teóricamente posible usando HTML5.
ArcGIS y HTML5
Bien pero ¿qué hay de ArcGIS y el HTML5? La integración del HTML5 será, en principio, a través del SDK de Javascript y ya hay algunos ejemplos disponibles en la web de ejemplos JavaScript. Por ejemplo:
- Guardar una colección de elementos en el Local Storarge. Este ejemplo permite a los usuarios añadir notas sobre un mapa y guardarlas localmente. Una vez cerrado el navegador, es posible acceder a estas notas que se recuperan desde el Local Storage.
- Guardar Tiles del cacheado en el Local Storage. Aquí se usan también los workers y la aplicación es muy potente. Cuando un usuario accede a un servicio cacheado, si es la primera vez, los nuevos tiles se almacenan en la Local Storage, si no, se descargan de la web. Es fácil imaginar, que tanto el rendimiento del mapa, como el tráfico de red se reducen de forma dramática.
- Cargar una capa ráster en el objeto canvas. En este caso se trata de cargar una capa ráster (usando datos de un modelo de elevaciones del terreno) directamente sobre un servicio de ArcGIS Server.
- Acceso a archivos con Drag-n-drop. En este caso se trata de arrastrar y soltar un archivo CSV de coordenadas de mapa directamente sobre una aplicación web.
Referencias
Hay mucha información sobre el tema en la web, pero la mejor forma de ver todas las características de HTML5 es viéndolo funcionar. Para comprobar qué navegadores soportan estas características os recomiendo visitar http://caniuse.com/.
¿Qué os parece el HTML5? ¿Cuáles de sus elementos pueden ser útiles en vuestras aplicaciones? ¿Cuáles estáis ya utilizando?
