Este post trata de explicar cómo realizar una pequeña aplicación para probar el poder que está adquiriendo la web semántica.
La web semántica está creciendo cada día más, como muchos ya sabréis internet ha estado creciendo de una manera desordenada y desestructurada, lo cual ha producido una sobrecarga de información y ésta está muy desestructurada.
El propósito de la web semántica, o web de datos como se la está empezando a llamar ahora, es identificar de forma unívoca cada recurso disponible en la red y permitir estructurar la información de una manera definida y clara. Las tecnologías de la web semántica permiten a los usuarios crear almacenes de datos en la web, construir vocabularios y manejar esos datos, por lo cual podemos definir la web semántica como una web de datos, es decir, como una base de datos global.
Esto ha sido una pequeña introducción a la web semántica, si quieres conocer más visita el sitio oficial del consorcio W3C.
Aplicación para consultar a la web semántica usando la API Google Maps y DBPedia
Para implementar la aplicación se ha utilizado la API JavaScript de Google Maps y consultas AJAX a DBPedia.
Esta aplicación realizará consultas a DBPedia para obtener las capitales de comarca de una provincia indicada, y nos colocará en el mapa las capitales de comarca con una pequeña descripción de las mismas.
Quedará algo así en tu navegador.
Vamos por pasos a ver cómo se ha realizado:
- 1. Consultar a DBPedia
Para poder obtener la información desde el endpoint de DBpedia en español http://es.dbpedia.org/sparql necesitamos usar AJAX para que sea de forma asíncrona.
Además usaremos una técnica llamada JSONP para obtener la información de la consulta.
El código siguiente indica que vamos a obtener para una capital dada las 10 capitales de comarca, así como sus coordenadas y una pequeña descripción. Y con una consulta ajax la añadimos al mapa usando la función addPois.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function queryDBpedia(map,capital){ sparql = "select DISTINCT ?label ?cp ?des ?ph ?lat ?lng \ where{ \ <http://es.dbpedia.org/resource/"+capital+"&> prop-es:codProvincia ?cp. \ ?capital prop-es:codProvincia ?cp; \ rdfs:label ?label; \ geo:lat ?lat; \ geo:long ?lng; \ rdfs:comment ?des;\ dbpedia-owl:thumbnail ?ph .\ ?pueblo dbpedia-owl:capital ?capital \ }\ LIMIT 10"; $.ajax({ url: "http://es.dbpedia.org/sparql?default-graph-uri", cache:false, dataType:"jsonp", type:"GET", data:{ query: sparql, format: 'application/sparql-results+json' }, success: function(rsp){ addPOIs(rsp.results.bindings, map); } }); } function addPOIs(pois,map){ pois.forEach(function(info){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(info.lat.value,info.lng.value), map: map, title: info.label.value }) var description = '<div id"content">'+ '<h1>'+info.label.value+'</h1>'+ '<p><img src="'+info.ph.value+'" align = "left" style = "margin-right: 10px"/>'+info.des.value+'</p></div>'; var infowindow = new google.maps.InfoWindow({ content: description }); google.maps.event.addListener(marker,'click',function(){ infowindow.open(map, marker); }); }); } |
Una vez que ya tenemos todo preparado, nos falta cargar el mapa en nuestra página. Para ello usamos el siguiente código en JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function cargar(capital){ centro = null; centrar(capital); window.setTimeout(function(){ if (centro == null){ capital = "Jaén"; var centerCoor = new google.maps.LatLng(37.7667,-3.76667); errorBusqueda(); } else{ var centerCoor = new google.maps.LatLng(centro[0],centro[1]); } var mapOptions = { zoom:9, center: centerCoor }; var map = new google.maps.Map(document.getElementById('map-GMaps'),mapOptions); queryDBpedia(map,capital); }, 555) } |
Finalmente puedes ver una demo de la aplicación aquí y también puedes descargarla para trastearla tú mismo y jugar un poco con su código.
Otras entradas similares
- Aviso legal
- Pruebas con usuarios de la aplicación original
- Localizar mi smartphone robado a través de Android
- Recortar y redimensionar imágenes en PHP – imagecopyresampled
Soy un blogger con mucha ilusión por las nuevas tecnologías y por compartir y absorber nuevos conocimientos.
UX Designer - Software Engineer.
- Chuletario de GIT - 18 enero, 2019
- Errores que hice como programador junior - 6 abril, 2018
- Fechas como string en PHP - 14 diciembre, 2017
¿Hay información sobre este tema en otras idiomas