Mashup

Un Mashup avec des données DBpedia et Google Maps

Pour des raisons de sécurité, les requêtes dites cross-domain sont aujourd'hui interdites. Le script décrit est obsolète. Aujourd'hui, il conviendrait de reprogrammer le système à l'aide de requêtes SPARQL.

Les mashups sont des applications qui combinent sur une page Web, des données provenant de sources multiples. Je vous propose un exemple qui agrège des données de la base DBpedia (Descriptif de la ville de Bordeaux, essayez de modifier le paramètre « q ») et une carte générée avec l'API de Google. Le code, commenté ici, est librement téléchargeable.

Le Mashup est réalisé avec un fichier contenant les éléments HTML et un fichier pour les commandes JavaScript (j'ai enlevé dans le code commenté tout ce qui traite de mise en page, si vous souhaitez plus de détails sur le framework CSS que j'utilise, vous visiterez Twitter Bootstrap). J'utilise ici principalement les données de DBpedia qui sont structurées en RDF (voir par exemple Bordeaux en RDF sur DBpedia). Je vais maintenant détailler le code du fichier HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MASHUP</title>
  </head>
  <body>
    <h1 id="titre">Mashup</h1>
    <p id="commentaires">Une description succinte d'une ville en utilisant le fichier RDF de DBpedia.</p>
    <div id="image"> </div>
    <div id="map_canvas" style="height:400px;width:460px;border:3px solid #ceceb5;">Carte</div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAhaKOXWocBRElv9yr_MsYjcTZwVotd59w&sensor=false"></script>
    <script type="text/javascript" src="opendata.js"></script>
  </body>
</html>

Page en HTML5 avec encodage en UTF-8. Les éléments HTML <h1/>, <p/>... ont des attributs id qui sont importants car le javascript va utiliser ces identifiants pour y placer le contenu dynamique et cela est aussi utile pour la mise en forme avec CSS. Dans cette page HTML, il y a deux commandes JavaScript :
La première est la clé d'activation de l'api Google qui n'est utilisable que sur le site pierrez.net (key=AIzaSyAhaKOXWocBRElv9yr_MsYjcTZwVotd59w ; si vous souhaitez utiliser l'API, demandez auprès de Google votre propre clé d'activation) et la seconde appelle le fichier opendata.js qui contient le code du mashup.

Supprimé

Web design  | Laboratoire des technologies Internet à base de XML | Optimisation, référencement : visibilité | Web accessible, Web social et Web sémantique | Communauté du libre et de l'open source | Curriculum vitae d'Emmanuel Pierrez | Me contacter | Conception pierrez.net | Me suivre sur :