B2 · Episode 10 · 4:52
Creative Ways to Use Wikidata for Web Integration
This episode demonstrates how to embed Wikidata Query Service results—such as interactive maps and timelines—into websites, using WordPress as an accessible example for non-programmers; it also explains how dynamic updates work and how to build simple search interfaces for cross-country archaeological site visualizations.
Source：Nassima Chahboun / Wikimedia Commons · License：CC BY-SA 4.0
Transcript
Finalement, on a la possibilité d'intégrer dans un site web en obtenant le code en
Finally, we can embed code into a website by obtaining it in
plusieurs langages de programmation.
several programming languages.
Donc il faut juste copier le code
So you just need to copy the code
dans le langage souhaité, en plus soit l'intégrer directement dans un site web ou
in your desired language, then either insert it directly into a website or
pour les gens qui sont.
for people who are
Plus habilités en programmation,
more skilled in programming,
ils peuvent par exemple ajouter d'autres éléments à la carte,
they can, for example, add extra elements to the map,
changer les aspects visuels pour les améliorer, etc.
change visual aspects to improve them, etc.
Et pour les personnes qui ne connaissent rien en programmation,
And for people with no programming knowledge,
tout comme moi, je vais montrer un exemple très facile sur
just like me, I’ll show a very simple example of
l'intégration d'une carte, par exemple,
embedding a map,
ou d'une timeline ou de n'importe quel résultat de
or a timeline, or any result from the Wikidata Query Service,
Wikidata Query Service dans un site web.
into a website.
Je vais donner l'exemple en utilisant WordPress, qui est une
I’ll use WordPress as an example—a platform that lets you create websites
plateforme qui permet la création des sites web tout en étant très intuitive et très
while being highly intuitive and very
simple pour les personnes qui ne sont pas
simple for people outside this field.
du domaine. Et donc tout simplement, on peut
So simply choose a template on WordPress,
choisir un template sur WordPress,
you get your pages,
on a nos pages, et je vais montrer comment on peut ajouter une carte sur une
and I’ll show how to add a map to a new page.
nouvelle page.
(a new page)
Donc on commence par ajouter une nouvelle page,
So we start by adding a new page,
donner un titre à cette page, ensuite on ajoute un élément et c'est un code HTML.
give it a title, then add an HTML element.
Tout ce que j'ai fait, c'est copier le code déjà donné par le résultat sur Wikidata
All I did was copy the code already provided by the result on the Wikidata
Query Service.
Query Service.
On peut ici changer par exemple le
Here, you can change, for example, the map’s border,
cadre de la carte, on peut changer les dimensions, etc.
or adjust its dimensions, etc.
Ensuite, on a notre carte qui est intégrée dans le site web.
Next, we have our map integrated into the website.
Et à chaque fois qu'un élément est actualisé sur Wikidata,
And each time an item is updated on Wikidata,
on a le résultat qui s'actualise automatiquement sur notre site web.
the result on our website updates automatically.
Ensuite, on peut avoir non seulement une seule carte ou bien une seule timeline,
Next, we can display not just a single map or a single timeline,
mais on peut jongler entre plusieurs cartes, par exemple, de plusieurs éléments.
but we can also switch between multiple maps—for instance, maps of several different items.
Et c'est possible en paramétrant la query.
This is possible by configuring the query.
En fait, ici, c'est un exemple de notre site sur Wiki World Heritage où on a essayé
In fact, here is an example from our Wiki World Heritage site,
d'avoir les cartes de toutes les villes classées patrimoine mondial au monde.
where we’ve tried to map all cities worldwide listed as UNESCO World Heritage sites.
En fait, on a l'option de choisir une ville pour que sa carte s'affiche.
In fact, users can select a city to display its map.
Donc les personnes qui ne connaissent même pas Wikidata,
So people who don’t even know Wikidata,
ils peuvent l'utiliser à travers le site web.
can still use it via the website.
Ils peuvent tout simplement sélectionner la ville ou le site qu'ils souhaitent,
They can simply select the city or site they’re interested in,
et la carte sera directement affichée.
and the map will appear instantly.
Et à mon niveau, je ne peux pas le faire jusqu'au bout,
As for me, I can’t complete this process entirely on my own,
mais je vais vous montrer juste la logique sur comment ça peut se faire.
but I’ll show you just the underlying logic of how it works.
En fait, si on revient au code HTML de la query,
In fact, if we go back to the HTML code of this query,
On va trouver que tous les paramètres, ils sont déjà écrits ici,
we’ll find that all parameters are already written here,
les identifiants uniques des items
including the unique identifiers of the items,
qu'on a inclus dans la query.
i.e., their IDs.
Et donc ici par exemple, j'ai la query sur les sites archéologiques au Maroc,
So here, for example, I have a query about archaeological sites in Morocco,
et je veux avoir une carte
and I want to create a map,
où je peux choisir le pays et ces sites archéologiques vont s'afficher,
where I can select a country and see its archaeological sites displayed,
et non seulement le Maroc.
not only Morocco.
Donc je vais chercher l'identifiant du Maroc dans le code de ma query.
So I’ll look up Morocco’s identifier in my query code.
Et ensuite, je vais faire appel à quelqu'un qui est plus habilité que moi pour
Then, I’ll ask someone more skilled than me,
transformer cet identifiant en paramètre,
to convert this identifier into a configurable parameter,
et j'aurai la liste de tous les pays concernés,
so that I get a list of all relevant countries,
par exemple les pays africains ou bien tous les pays du monde,
for example, all African countries—or indeed all countries worldwide,
avec l'identifiant qui correspond à chaque pays.
each with its corresponding identifier.
Et donc j'aurai cette liste de paramètres avec le code de la query où j'ai
So I’ll have this list of parameters, with the query code where I’ve replaced the ID with a parameter,
transformé l'identifiant en paramètre, et comme ça, je peux avoir un
and this way,
moteur de recherche très très simple qui me permet de
I can have a very, very simple search engine that
jongler de pays en pays pour afficher les cartes de leurs sites archéologiques.
lets me switch between countries to display maps of their archaeological sites.
Et on peut se demander pourquoi la data viz, ça
We might ask: what can data visualization actually be used for?
peut servir à quoi, par exemple.
For example, what can it do?
Ça peut par exemple permettre une meilleure compréhension des sites.
For instance, it can help people better understand these sites.
Ici nous avons une timeline qui démontre l'évolution de la ville de Marrakech.
Here we have a timeline showing how the city of Marrakech has evolved.
Et ça peut être très très utile, par exemple,
This can be extremely useful—for example,
pour les cours d'histoire ou bien les cours d'architecture.
in history or architecture classes.
On a une ville qui est une mosaïque très très complexe,
The city itself is an extremely complex mosaic,
mais à travers la timeline, on peut comprendre comment cette ville a évolué,
but through the timeline, we can understand how it evolved—
quelles sont les zones qui ont été construites avant, quels bâtiments ont
which areas were built first,
été construits dans la même période, etc.
which buildings were constructed in the same period, and so on.
Et comme c'est très visuel, c'est très facile d'absorber l'information,
And because it’s highly visual, information is much easier to absorb,
plus que quand on est en train de lire un article ou bien plusieurs articles sur
more so than reading one or several articles on Wikipedia.
Wikipédia.
(referring to the Wikipedia articles mentioned earlier)