3 lenguajes de programación para SIG

A lo largo de los años dentro del mundo SIG es habitual, para un analista o usuario avanzado, encontrarse en la posición de tener que decidir: ¿en qué tecnología/s formarme? O dicho de otra forma ¿a qué dedico mi valioso (y probablemente escaso) tiempo-presupuesto? ¿aprendo a manejar un nuevo SIG de escritorio, a gestionar un servidor SIG… o a qué?

Esta primera pregunta hoy día tiene una sólida y clara respuesta: primero aprende a programar (y si ya sabes, aprende a programar mejor). Tomando las palabras de James Fee (al que recomiendo seguir en su blog): “GIS analysis has become programming and development”, así que la cuestión es más bien… ¿en qué lenguaje/s de programación invierto?

Aunque la lista de lenguajes candidatos es potencialmente extensa, para obtener el máximo retorno del esfuerzo lo más adecuado hoy día es centrare en SQL, Python y JavaScript.

¿Por qué estos lenguajes y no otros?
sql
SQL (1974): lleva cuarenta años con nosotros y sigue vigente. Aunque estrictamente no es un lenguaje de programación, sino un ‘lenguaje de consultas estructurado’, lo importante es que todo SIG lleva un motor de consultas interno que permite, en mayor o menor medida, aplicar SQL. Si sabes bien los fundamentos, te será mucho más fácil aplicar luego los operadores espaciales disponibles para enriquecerlo con la componente “geo”. Acabarás teniendo un SHP, una plataforma en la nube como CartoDB, un PostGIS o un miserable Access, pero lo que es seguro es que si trabajas con SIG tendrás que manejar con soltura SQL.

python
Python (1991): el lenguaje para muchos más adecuado para iniciarse en la programación, con librerías que facilitan el trabajo en prácticamente todo tipo de ámbitos (interfaces, multimedia, bioinformática…). En el mundo SIG la decisión ya está tomada hace un tiempo, desde el momento en que potentes librerías como GDAL/OGR crearon sus envoltorios para Python y ESRI & QGIS lo adoptaron como lenguaje de geoprocesamiento. Python es hoy el lenguaje por excelencia para trabajar con SIG, especialmente a nivel de geoprocesamiento y en equipos de escritorio (otro tema es la construcción de soluciones web en servidor, donde el entorno Java con ejemplos como Geoserver-GeoTools aún sigue vigente).

javascript
JavaScript (1995): Tiene la capacidad de dotar de interacción a las páginas web e incorporar mapas y otras funciones SIG en ellas mediante bibliotecas (como OpenLayers, Leaflet, etc.), hasta conseguir aplicaciones SIG completas en el navegador web. Prácticamente toda la revolución de la “neogeografía”, que tanto ha beneficiado a los SIG estos últimos años, ha venido de su mano (primero con GoogleMaps, y más recientemente con bibliotecas como las de CartoDB, Mapbox…). De hecho, ahora comienzan a aparecer librerías JavaScript como Turf para algo impensable hace unos años: realizar cálculos SIG en el navegador web (buffer, intersección, isolíneas…), sin tener que recurrir a un servidor dedicado de respaldo como ArcGIS Server o Geoserver.

JavaScript no “viaja solo”: en la práctica hay que considerar un lote de 3 lenguajes, puesto que lleva aparejado lidiar con sus dos lenguajes ‘hermanos’: HTML y CSS, que lo apoyan para construir aplicaciones web.

Si cada uno de estos lenguajes ya es útil por si sólo, lo son más en combinación. Aprovechar las sinergias que surgen entre ellos permite explotar y construir sistemas SIG más potentes (p.ej. usar Python en ArcGIS o QGIS y realizar filtros SQL contra una base de datos PostGIS, usar JavaScript y realizar consultas SQL a través de un API contra una tabla remota en CartoDB, etc.).

Así que mi consejo es:
1. aprende los fundamentos básicos de los 3 lenguajes
2. dedica el tiempo a profundizar en ellos y en nuevas bibliotecas de funciones que los enriquezcan.
3. mejora durante el proceso tus habilidades generales de programación (algoritmos, diseño, herramientas y prácticas ágiles…).

Cómo utilizar datos geográficos públicos de OpenStreetMap con un software libre como QGIS

Analizar datos espaciales y generar con ellos mapas atractivos para el usuario es la gran fortaleza de los Sistemas de Información Geográfica (SIG). Y si hace unos pocos años el software SIG y los datos de calidad estaban sólo al alcance de unos pocos (grandes corporaciones, militares, universidades…), hoy cualquier profesional bien formado tiene en su mano la posibilidad de usarlos de forma rápida y gratuita. En esta entrada veremos algunas posibilidades del uso combinado de un software SIG libre como QGIS y los datos, también libres, de OpenStreetMap.

¿Cómo empezar a trabajar con QGIS y OSM?

Instalando en nuestros equipos la última versión de QGIS Desktop dispondremos de un software SIG de escritorio completo, gratuito y extensible mediante plugins (instrucciones de instalación detalladas de la v2.6, para Linux, Windows y Mac, en http://www.qgis.org/es/site/forusers/download.html).

OpenStreetMap (OSM) no es sólo un mapa: es una base de datos mundial con más de 30 GB de datos geográficos vectoriales de información muy diversa y detallada (carreteras, caminos, edificios, restaurantes, parques naturales…). En las últimas versiones QGIS integra de forma nativa la opción de descarga de datos OSM, desde su menú Vectorial - OpenStreetMap (OSM) - Descargar Datos. Esto simplifica y agiliza la descarga de una porción de datos OSM, en forma de fichero vectorial .osm (XML).

En este ejemplo, utilizaremos datos de la ciudad de Santander, dentro del área geográfica definida manualmente por las siguientes coordenadas: xmin:-3.8313931 ymin: 43.4449263 | xmax:-3.7658341 ymax: 43.4784917

QGIS también permite descargar datos OSM dentro del encuadre de una capa preexistente o a partir del zoom actual por pantalla. En cualquier caso, es importante que el sistema de referencia sea WGS84 Longitud / Latitud (EPSG: 4326) o el proceso no funcionará correctamente. Esto es debido a que internamente el complemento hace uso del API Overpass, que recibe como parámetros las coordenadas del encuadre en este sistema.

Una vez descargados los datos OSM (en un fichero santander.osm, de aprox. 5 MB), se pueden cargar directamente en QGIS, mediante la opción de menú Capa - Añadir capa - Añadir capa vectorial (y luego seleccionando points / lines / multipolygons).

OSM_Base

Fig.1: Datos OSM con los estilos por defecto en QGIS

Una vez obtenidos los datos podemos comenzar el proceso de explotación y análisis, utilizando distintas herramientas de QGIS. A continuación mostraremos brevemente 3 ejemplos ilustrativos:

 

Ejemplo 1. Usar OSM para generar un mapa

Es posible tomar los datos OSM y generar con QGIS un mapa 100% personalizado, seleccionando cada entidad a mostrar, su etiquetado, su estilo… hasta obtener un mapa base o mapa temático a nuestra medida.

QGIS proporciona un mecanismo para persistir reglas de visualización mediante ficheros de estilos reutilizables (.qml). Por ejemplo, existen algunos .qml públicos que permiten dar una apariencia ‘googlemaps’ a un lote de datos .OSM y si los aplicamos a nuestras capas OSM (menú de capa Propiedades - Cargar estilo) el resultado es un mapa base como el siguiente:

Fig.2: Mismos datos OSM, con los estilos osm_spatialite_googlemaps_.qml, tomados de https://github.com/anitagraser/QGIS-resources/tree/master/qgis2/osm_spatialite

Fig.2: Mismos datos OSM, con los estilos osm_spatialite_googlemaps_.qml, tomados de https://github.com/anitagraser/QGIS-resources/tree/master/qgis2/osm_spatialite

Los .qml usados son ficheros para la versión 2.4 de QGIS y no se contemplan todos los tipos de objetos OSM, como p.ej. ‘playas’ (categoría natural:beach), con lo cual para un resultado óptimo deben trabajarse más los estilos.

 

Ejemplo 2. Usar OSM para un análisis de redes

OSM incluye un subconjunto especialmente relevante de datos que es la red viaria. OSM recoge el grafo conectado de autopistas, carreteras, caminos, calles… y permite por tanto aplicar los algoritmos propios del análisis de redes: camino más corto, estimación de tiempos para recorridos, etc.

Aunque existen herramientas más sofisticadas, QGIS proporciona una práctica utilidad para calcular la ruta más corta en una red, mediante su complemento Grafo de rutas.

Antes de usar el complemento hay que cargar la capa de líneas y luego configurar el plugin, mediante Vectorial - Configuración del complemento Grafos de rutas. En ese apartado de configuración se puede fijar p.ej. la velocidad media de los tramos. Para ver los datos de tiempo y velocidad correctamente, será necesario usar una proyección que utilice metros como unidad, así que aplicaremos antes una reproyección al vuelo (en este caso, a la zona le corresponde ETRS89-UTM30N: EPSG:25830).

Si fijamos una velocidad media de 50 km/h a toda la red, podemos calcular por ejemplo la distancia y tiempo estimado del camino más corto entre la estación de tren de RENFE y los Jardines de Piquío en el Sardinero.

Fig.3: Los datos de la red de transporte OSM utilizados para un cálculo de camino más corto

Fig.3: Los datos de la red de transporte OSM utilizados para un cálculo de camino más corto

 

Ejemplo 3. Usar OSM para la búsqueda de vivienda

Los datos OSM pueden usarse también para análisis de otra índole, encadenando sobre ellos operaciones espaciales sucesivas (área de influencia, intersección, etc.). P.ej. para la búsqueda de la mejor ubicación para alquilar una vivienda, en base a una serie de requisitos previos tales como p.ej. la proximidad a una escuela, cercanía a vías de comunicación rápidas, etc.

En el siguiente vídeo puede verse un análisis vectorial sobre datos OSM en esta línea:

 


Esta entrada es una colaboración en el blog iNFoRMáTICa++, perteneciente a los Estudios de Informática, Multimedia y Telecomunicación (EIMT) de la Universitat Oberta de Catalunya (UOC). Publicada originalmente en: http://informatica.blogs.uoc.edu/2014/12/15/como-utilizar-datos-geograficos-publicos-de-openstreetmap-con-un-software-libre-como-qgis/

Instalación de librerías NetCDF + Python en un sistema Windows

La instalación adecuada de Python + NetCDF es algo muy extendido y documentado en sistemas Linux, pero no tanto en sistemas Windows. En esta entrada el objetivo es recoger los pasos necesarios para conseguirlo, a modo de referencia rápida con las instrucciones y enlaces oportunos.
Python + netCDF
NetCDF [1] es un formato binario de fichero (.nc) orientado a arrays, que facilita el manejo de varias dimensiones (x, y, z, tiempo…) de forma eficiente y flexible. Por esta razón está muy extendido en la comunidad científica, por ejemplo para guardar datos del medio como temperaturas, corrientes, viento, salinidad, etc. obtenidos mediante sensores o modelado. De forma indisoluble con el formato, existe un conjunto de librerías para NetCDF que facilitan el acceso a sus datos desde varios lenguajes (C, Fortran, Java, etc.) y que son la pasarela con la que trabaja el programador. Python es por su parte el lenguaje de scripting más potente y posee multitud de librerías para ampliar su campo de acción (para el manejo de datos SIG, cálculo intensivo, gráficos, etc.), por lo que juntos forman una buena combinación en el ámbito científico.
Los pasos para configurarlos de forma integrada en una plataforma Windows de 32 bits son:
  • (A) Python 2.7. Si aún no lo tenemos, la última versión disponible para la rama 2.x (la más extendida) es actualmente la 2.7.5, descargable aquí
  • (B) NetCDF4. Las librerías base están escritas en C y para usarlas es necesario descargarlas y compilarlas o, algo más práctico, obtener directamente los binarios. Siguiendo la segunda vía, aquí está el instalador con la última versión para netCDF4. Para una descripción más detallada de estos binarios, ver el enlace [2]
  • (C) Acceso a las librerías NetCDF. Para un enlace posterior a las librerías, es necesario agregar al PATH los siguientes directorios, generados por el instalador: C:\Program Files\netCDF 4.3.0\bin y c:\Program Files\netCDF 4.3.0\deps\shared\bin
  • (D) Numpy. El acceso a los datos de los ficheros NetCDF se realizará de forma efectiva con esta librería para Python, especializada en el manejo de arrays.  La última versión disponible hoy, la 1.7.1, para Python 2.7 está disponible aquí 
  • (E) Interfaz de Python para netcdf4. Ésta es la librería Python que permite leer y escribir en los netcdf desde scripts .py, actuando de pasarela hacia las librerías base previamente configuradas (C). El instalador para la 2.X está en este enlace
  • (F) Validación. Finalmente, para probar que todo está correcto, ejecutaremos un pequeño script de Python, leyendo un netcdf cualquiera (fichero testNC.py). P.ej. estos datos de la NASA muestran las anomalías térmicas sobre la superficie terrestre y es posible descargarlos en formato netCDF desde aquí en un fichero “nmaps.nc”. Como nota útil, señalar que para visualizar de forma rápida el netcdf se puede usar un visor como Panoply [3] o un software SIG como gvSIG, que en su versión más reciente incluye soporte a este formato [4]

testNC.py

# -*- coding: utf-8 -*-
import netCDF4 as nc
import numpy as np

'''
     Prueba de acceso a netCDF en Python Win32.
     Abre un fichero .nc y obtiene el valor mínimo de una variable conocida ('TEMPANOMALY')

'''
print 'TEST netCDF en Python'
rutaFichero = "c:/users/admin/nmaps.nc"
fichero = nc.Dataset(rutaFichero)

print "* Variables disponibles en el fichero:"
for v in fichero.variables:
    print v

datos = fichero.variables["TEMPANOMALY"][0]
print "* Mayor anomalia de temperatura negativa : {0} K".format(min(datos))
Nota: como los datos de la variable vienen en un array con “máscara” (para indicar dónde hay ‘huecos’ sin datos), es posible utilizar las clases de numpy específicas y hacer algo como:
minimo = np.ma.MaskedArray.min(fichero.variables["TEMPANOMALY"][:])
maximo = np.ma.MaskedArray.max(fichero.variables["TEMPANOMALY"][:])
Enlaces de interés:

Materiales curso OpenLayers e Ikimap – DGSIG 2013

Hola a todos,
En este post incluyo los materiales completos de la asignatura “Desarrollo de aplicaciones geográficas web”, que he estado impartiendo los últimos 3 años en el Curso de Experto en DGSIG de la Universidad de Cantabria. Son los utilizados en la última edición presencial del curso (enero de 2013) y tienen licencia Creative Commons. Creo que puede ser útil a personas que comienzan en este ámbito, como recurso para el aprendizaje autónomo.
DGSIG2013
Se trata de una versión mejorada respecto a la que ya se publicó aquí  hace un tiempo, aportando una revisión general a los materiales de OpenLayers (versión 2.12), algunos nuevos contenidos sobre Ikimap y los ejercicios del curso. Se incluye:
  • 0 – Guía de la asignatura .- descripción de los objetivos y materiales
  • 1 – Materiales de apoyo.- contenidos teóricos básicos (neogeografía, programación web, plataformas de publicación y OpenLayers)
  • 2 – Presentación en el aula.- soporte visual de los contenidos.
  • 3 – Ejercicios.- carpeta con los enunciados y sus soluciones.
Los materiales se pueden descargar aquí: DGSIG_2013.zip [cambiar extensión .odt por .zip]

Nuevas tendencias: los SIG en la nube

Hoy se dispone de un abanico amplio de opciones para publicar información geográfica en Internet. Generalmente cuando un profesional se plantea esta tarea suele considerar alguna de estas vías

  • Preparar un servidor propio con software privativo, como el de la empresa ESRI (ArcGIS Server), de calidad alta pero modelos de licencia accesibles para pocos.
  • Montarlo con software libre, que ha ganado mucho en madurez y cuyo uso sigue extendiéndose, con productos como Geoserver y OpenLayers.
  • No utilizar software SIG y delegar en servicios web de mapas externos y sus APIs para programadores (como el archiconocido GoogleMaps).
  • Configurar un entorno híbrido, con elementos combinados de las opciones previas.

En general, las dos primeras opciones funcionan bien en organizaciones con personal cualificado, capaz de crear y mantener entornos tecnológicos complejos y siempre que se haga una inversión decidida de recursos, lo cual no siempre es fácil (grandes empresas, administraciones… los clientes SIG tradicionales, vaya). La tercera vía es mucho más ágil y con menos barreras de entrada para pequeñas empresas, asociaciones, particulares… que cada vez lo usan más y para usos más variados (es lo que algunos llaman “neogeografía”).

Sin embargo, hay más opciones a considerar… y es que en los últimos tiempos está emergiendo una tendencia denominada computación en la nube. Ésta implica la aparición de hardware, plataformas y servicios web mediante los que se externaliza a empresas especializadas parte de las labores informáticas de organizaciones e individuos. Y dentro de estas plataformas existen ya varias que permiten el almacenamiento y publicación de información geográfica.

Algunas de estas interesantes plataformas son: IkiMap, GeoCommons (recientemente adquirida por Esri), Google Fusion Tables o CartoDB. Se trata de espacios en la nube donde almacenar y publicar datos geográficos en forma de mapas, que además prestan especial atención a la facilidad de uso para el usuario, las redes sociales y el buen diseño. Además, son plataformas que generalmente incluyen un API para programadores, con lo que sus posibilidades de uso e integración con otras herramientas se amplían notablemente.

Sin duda se trata de plataformas potencialmente utilizables por un número muy alto y variado de individuos y organizaciones, especialmente en los casos en los que las “vías tradicionales” no sean aplicables. Por ejemplo, un medio de información local podría fácilmente ubicar en un mapa las noticias que suceden en su municipio (p.ej. obras en marcha o planificadas, actos culturales, animales perdidos…), incrustar ese mapa en su blog y permitir la participación de los ciudadanos y la difusión de sus mapas en redes sociales.

Por ejemplo, el siguiente mapa ha sido creado en la plataforma Ikimap, autodenominada la “red social de los mapas”. Crear un mapa como este es una labor rápida y sencilla. En páginas webs y blogs que lo admitan, también se puede embeber un mapa interactivo, a partir del código para crear un iframe que proporciona la plataforma (los iframe no son permitidos en la plataforma wordpress.com).

Sin ninguna duda, en los proyectos de publicación de información geográfica, las plataformas SIG en la nube son una opción muy a tener en cuenta …

Aplicaciones geográficas web móviles

Este es un tema que considero de gran interés y futuro: el desarrollo de aplicaciones web teniendo en mente los nuevos dispositivos móviles, tales como smartphones y tablets (iphones, teléfonos android, ipads, etc.).

Frente al desarrollo en entornos nativos (p.ej. con Java y eclipse para android), la programación web estándar (HTML, Javascript y CSS + un lenguaje de servidor como ASP o PHP) puede resultar una opción muy interesante.

Sobre la base de estas herramientas habituales de programación web están apareciendo varios complementos para el desarrollo móvil, sobre todo en forma de librerías javascript. De ellas, las dos que me parecen más reseñables son Sencha Touch [1] y jQuery Mobile [2].

Personalmente, dada la expansión de su hermana mayor jQuery, creo que la segunda es una opción que merece la pena probar.

Las capacidades de su API pueden estudiarse en la página oficial y varios ejemplos reales de su uso se pueden ver en la jqmgallery [3].

Además, existe una buena capacidad de integración entre jquery mobile y OpenLayers en su última versión, como puede verse p.ej. en este enlace [4]. Esta es una gran combinación para realizar aplicaciones geográficas web móviles.

Recientemente hablamos de este tema en geoinquietos Cantabria [5]. Esta fue la presentación:

Si no conoces la iniciativa geoinquietos, infórmate en osgeo [6] y busca tu grupo más cercano.

Saludos a todos.

Enlaces:
[1] Sencha Touch: http://www.sencha.com/products/touch/
[2] jQuery Mobile: http://jquerymobile.com/
[3] jqmGallery: http://www.jqmgallery.com/
[4] Ejemplo de visor OpenLayers con jquerymobile: http://openlayers.org/dev/examples/mobile-jq.html#mappage
[5] Geoinquietos Cantabria: http://wiki.osgeo.org/wiki/Geoinquietos_Cantabria
[6] Capitulo local osgeo: http://wiki.osgeo.org/wiki/Cap%C3%ADtulo_Local_de_la_comunidad_hispano-hablante

OpenLayers y pestañas con jQuery

En este artículo vamos a ver cómo incluir pestañas de jquery (jqueryui tabs) dentro de un popup de OpenLayers. Si queréis ver el resultado podéis ir directamente al enlace de jsfiddle [1].
 jQuery [2]  se ha convertido en la librería por antonomasia para extender el javascript estándar en las páginas web modernas. Si desarrollas para la web, tienes que conocerla. Pero… ¿cómo trabajar con jQuery + OpenLayers?
  1. Hay algunos intentos de desarrollar un plugin para jQuery que permita trabajar con OpenLayers, como MapQuery [3], que antes se denominaba GeoJQuery. El proyecto lleva poco tiempo, pero habrá que seguir sus pasos; quizá pronto sea una alternativa a GeoExt [4].
  2. Mientras tanto es más frecuente que tengamos en marcha un proyecto con OpenLayers y queramos utilizar puntualmente jQuery, especialmente algún componente visual o widget de jqueryui, como las pestañas (tabs) o un acordeón (accordion) [5].

Vamos a ver cómo hacer en el caso 2, con un ejemplo sencillo.

a) Creamos el html básico para soportar el mapa, con las importaciones de librerías javacript y css necesarias. Hemos dejado un script vacío, que es donde iremos introduciendo el código.

<html>
    <head>
        <script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <title>Pestañas de jQuery en OpenLayers</title>
    </head>
    <body>
        <div id="mapa" style="width:512px; height:512px"></div>
        <script type="text/javascript"></script>
    </body>
</html>

b) Primero añadimos la función que generará el contenido html del popup. Éste debe seguir los convenios de estructura establecidos por jqueryui. Lo más importante son los ‘li’ y que los enlaces apunten al mismo id que tengan los ‘div’ posteriores.

// Html del popup con pestañas de jquery
function prepararFicha(ciudad) {
    var div = $("<div>");
    var contenido = $("<div id='popupConTabs' style='font-size:9px;'>");
    var titulos = $("<ul>" +
                        "<li><a href='#tab-1'>Atributos</a></li>" +
                        "<li><a href='#tab-2'>Wikipedia</a></li>" +
                    "</ul>");
    contenido.append(titulos);

    // Pestaña 1
    var p1 = $("<div id='tab-1'>");
    p1.append($("<p>" +
                    "<b>Nombre</b>: " + ciudad.attributes.Nombre + "<br/>" +
                    "<b>Habs.</b>: " + ciudad.attributes.Habitantes +
                "</p>"));
    contenido.append(p1);

    // Pestaña 2
    var p2 = $("<div id='tab-2'>");
    p2.append($("<p><a href='" + ciudad.attributes.Wikipedia + "'>Wikipedia</b></p>"));
    contenido.append(p2);

    div.append(contenido);
    return div.html();
}

c) Lo siguiente  es la creación usual de un mapa, una capa vectorial con un solo registro y el control de selección. Nada particular.

// Creación del mapa y encuadre inicial
var WGS84 = new OpenLayers.Projection('EPSG:4326');
var MERCATOR = new OpenLayers.Projection('EPSG:900913');
var peninsula = new OpenLayers.Bounds(-18.0, 26.0, 6.0, 44.0).transform(WGS84, MERCATOR);
var mapa = new OpenLayers.Map("mapa");
mapa.addLayer(new OpenLayers.Layer.OSM());
mapa.zoomToExtent(peninsula);

// Creación de una capa vectorial con 1 registro puntual
var ciudades = new OpenLayers.Layer.Vector("Ciudades");
mapa.addLayer(ciudades);
var geometria = new OpenLayers.Geometry.Point(-3.8, 43.46).transform(WGS84, MERCATOR);
var atributos = {
    Nombre: 'Santander',
    Habitantes: 181589,
    Wikipedia: 'http://es.wikipedia.org/wiki/Santander_(Espa%C3%B1a)'
};
var santander = new OpenLayers.Feature.Vector(geometria, atributos);
ciudades.addFeatures([santander]);

// Creación del control de selección
var controlSeleccion = new OpenLayers.Control.SelectFeature(ciudades);
mapa.addControl(controlSeleccion);
controlSeleccion.activate();

d) Finalmente, la siguiente porción de código es la que establece las funciones manejadoras de eventos para crear el popup. En la función se produce la llamada clave al constructor ‘tabs’, para dotar del aspecto y funcionalidad deseados al html del popup.

// Mostrar el popup al seleccionar la ciudad
var popup;
ciudades.events.on({
    "featureselected": function(e) {
        var ciudad = e.feature;
        var html = prepararFicha(ciudad);
        popup = new OpenLayers.Popup.FramedCloud(
            "Info ciudad",
            ciudad.geometry.getBounds().getCenterLonLat(),
            null, html, null, true, function() {
                controlSeleccion.unselect(ciudad);
        });
        popup.minSize = new OpenLayers.Size(300, 100);
        ciudad.popup = popup;
        mapa.addPopup(popup);
        $("#popupConTabs").tabs(); /* << Creacion de Tabs */
    },
    "featureunselected": function(e) {
        var ciudad = e.feature;
        mapa.removePopup(ciudad.popup);
        ciudad.popup.destroy();
        ciudad.popup = null;
    }
});

Referencias:

[1] El código de este post en funcionamiento: http://jsfiddle.net/VictorVelarde/DbCgt/

[2] Librería jquery: http://jquery.com/

[3] Ejemplo de uso de MapQuery: http://blog.spaziogis.it/static/jquerymap/

[4] Proyecto GeoExt (OpenLayers + ExtJS): http://www.geoext.org/

[5] El control de pestañas de jqueryui: http://jqueryui.com/demos/tabs/

[6] Uso de jqueryui slider con OpenLayers: http://workshops.opengeo.org/openlayers-intro/integration/jqui-slider.html