Concepteur de Projet Digital – Mastère spécialisé

La double-compétence, par l'INA et Telecom ParisTech

Utiliser RDFa avec schema.org – atelier sur du contenu culturel

Brève page de présentation de l'Avare de Molière

Brève page de présentation de l’Avare de Molière

Dans cet atelier, vous allez voir comment marquer des pages web avec du RDFa. A titre d’exemple, nous allons travailler avec des contenus pédagogiques. grâce à RDFa, elles vont être enrivhies de données structurées. Nous allons en particulier utiliser schema.org pour renseigner des attributs RDFa.

Cet atelier est destiné à des débutants en marquage sémantique avec une compréhension de base du HTML. L’atelier est conçu  par étapes. Vous pouvez avancer par étape en sauvant l’état courant de votre travail et, ainsi, travailler à votre propre rythme.

Nous recommandons d’avancer étape par étape, dans l’ordre où les étapes sont proposées car elles constituent une progression qui vous amène des bases de RDFa et schema, vers des utilisations avancées.

(cet atelier est librement inspiré de http://stuff.coffeecode.net/2014/lld_preconference/rdfa_exercises/1_book/)

Exercice 1 Transformation avec RDFa d’une page HTML simple

Dans cet exercice vous allez découvrir comment ajouter quelques éléments RDFa dans une page web pour commencer à l’enrichir, en structurant les données contenues dans la page grâce à RDFa. La page est celle présentée en tête de l’article. Elle a été obtenue en simplifiant massivement la page sur l’Avare de TV5Monde. La page simplifiée se trouve ici.

Etape 1.1 Afficher le code source de la page

Ouvrir la page et sauver le code de la page localement sur votre machine. Dans un éditeur de texte (NotePad, PSPad…), ouvrez le code HTML de la page., dont voici un extrait significatif pour notre exercice:

Vous pouvez aussi commencer par charger la page dans un navigateur et regarder le code dans les outils de développements -par exemple, dans Chrome, en tapant F12.

Etape 1.2 Commencer à utiliser les outils de visualisation des données structurées de la page

Tout au long de cet atelier, nous allons vérifier nos avancées à l’aide d’outils disponibles en ligne.

Il y a plusieurs outils qui permettent de se rendre compte de ce que comprend une machine qui accède à notre page. Si le page contient des données structurées, elle peut accéder facilement à des données de la page. Si ce n’est pas le cas, il lui faudrait des traitements lourds et complexes pour comprendre un peu le contenu de la page.

Nous allons utiliser quelques outils qui permettent de voir qu’il y a du RDFa dans la page. Copiez le code source de votre page HTML dans les outils ci-dessous et regardez ce que ça donne: pas grand chose puisque nous n’avons pas encore commencé à enrichir notre page. Les outils:

Note: un problème est apparu avec l’outil de test de Google; utiliser les autres outils

Etape 1.3 Exploitons RDFa pour structurer les données de la page

RDFa porte son nom pour abréger ‘RDF in attributes’. RDFa permet d’ajouter des attributs dans des éléments HTML pour composer des triplets RDF qui décrivent des faits. Nous allons pratiquer cette méthode. RDFa permet de décrire des contenus à l’aide de vocabulaires. Chacun peut définir ses propres vocabulaires. Cependant, plus on utilise des vocabulaires utilisés par d’autres, plus les faits qui sont décrits dans nos pages seront d’autant plus utilisables par d’autres qu’on aura utilisé des vocabulaires partagés. Nous allons utiliser des vocabulaires issus de schema.org et DBPedia afin d’illustrer cela.

Par exemple, pour notre contenu, nous allons surement pouvoir utiliser http://schema.org/Book. En cliquant sur le lien, vous allez pouvoir voir la définition proposée pour le terme Book dans le vocabulaire schema.org et les propriétés associées (directes ou héritées: Book hérite des propriétés de CreativeWork, voir la liste de terme juste sous le mot Book).

Abréger les termes

RDFa permet d’abréger l’écriture des termes utilisés. Pour cela, on peut déclarer le langage utilisé. L’attribut @vocab permet d’associer un vocabulaire à un élément HTML et à ses descendants (son contenu). Ainsi, les termes utilisés comme valeur des attributs @typeof et @properties seront interprétés comme appartenant au vocabulaire déclaré dans @vocab en ajoutant à chaque terme l’URL définie dans @vocab.

Note: la notation @xxxx désigne l’attribut xxxx

Par exemple:

déclare que les termes dont on ne précisera pas autrement le vocabulaire seront considérés comme appartenant à schema.org.

Faites-le sur votre page, car schema va nous permettre de décrire pas mal de choses sur notre page. schema propose un vocabulaire varié sur de nombreux domaines d’usage courant. Nous aborderons plus loin d’autres vocabulaires.

Vous pouvez d’ores et déjà voir ce que ça donne dans les outils de test.

Indiquer le type de chose que décrit notre page et y associer des propriétés

Nous allons associer un type à notre page. Pour choisir ce type, nous allons parcourir le vocabulaire schema.org. Nous pouvons partir du type le plus général http://schema.org/Thing. Nous allons plutôt nous guider avec http://schema.org/docs/schemas.html et http://schema.org/docs/full.html.

On se doute que notre page contient un CreativeWork. Il nous faut chercher si nous trouvons une notion plus spécifique. Après la liste des propriétés de CreativeWork, on trouve la liste des notions qui précisent la notion de CreativeWork: Article, Blog, Book, Clip, Code… Il faut essayer trouver la notion la plus précise qui s’applique à notre page.

Si nous voulons associer un type qui recouvre l’ensemble de la page, nous pouvons le déclarer avec l’attribut typeof placé sur l’élément <body>. Par exemple

si vous n’avez rien choisi de mieux que CreativeWork pour décrire cette page. En fait par la suite, nous allons retenir le type Book.

Associer une première donnée à notre page

Toutes les notions définies dans schema héritent de Thing. Thing a une propriété name. Donc, à tous les types d’objets de schema peut être associé une propriété name, qui est de type Text.

Nous allons considérer que le nom de l’objet dont nous parlons est le titre de la pièce: L’Avare. Il nous faut donc trouver un élément dont le contenu textuel est ce titre et d’y ajouter la propriété ‘property’ avec la valeur ‘name’

Vous pouvez alors utiliser les outils proposés à l’étape 1.2 pour observer comment ces outils voient désormais votre page.

Associer le nom de l’auteur

La documentation de Book nous montre qu’un Book a une propriété author. L’auteur ici est Molière. Nous allons ajouter cette propriété à un élément qui contient ce texte. Normalement, le type attendu pour author est Person ou Organization, nous y reviendrons.

Regardez ce que cela donne dans les outils du 1.2.

Vous voyez que comme l’élément était un anchor <a>, c’est le champs href qui est associé à la propriété plutôt que le texte ‘Molière’. On suppose ici que le lien est une meilleure description de l’auteur que seulement le texte. C’est une particularité du traitement des propriétés associées à un <a>.

Essayez mettre la propriété author plutôt sur l’élément <h2> qui englobe le <a> et regardez ce que cela donne dans les outils de visualisation.

1668

Le titre sur la page est associé à une date: 1668, surement celle de publication. Nous allons essayer marquer cette date comme telle. Une telle date n’est vue que comme une quelconque chaîne de caractère si elle n’est pas marquée sémantiquement, par exemple avec RDFa.
HTML5 permet de marquer un texte comme étant une indication temporelle <time>, nous pouvons mettre cette balise autour de 1668, mais cela n’est pas précis sur la nature de cette information temporelle. Cherchez quelle propriété de Book (ou héritée par Book) pourrait être utilisée et ajouter la à la balise <time>.
Regardez ce que cela donne.

Associer une image à ce livre

En cherchant le mot image dans la page de documentation pour Book, on trouve qu’on peut être intéressé par la propriété thumbnailUrl de CreativeWork; ou aussi la propriété image de Thing. Nous allons associer property= »image » à l’image appropriée de la page.

Regardez ce que cela donne.

Considérer que le résumé est une description du livre

Dans la page, nous avons le résumé de la pièce. En fait, puisque Thing est la base de toutes choses dans schema.org, il est utile d’avoir une idée des propriétés associés, qui vont être les propriétés communes à tout. Parmi ces propriétés, nous avons description, qui est décrit comme: « A short description of the item. ». Le résumé semble bien correspondre. Nous allons donc associer property= »description » à un élément qui contient le résumé.

Regardez ce que cela donne.

Utiliser une propriété implicite

Nous allons tenter d’attacher une propriété à la page alors qu’elle n’a pas actuellement sa place dans la page. Nous voyons par exemple que la propriété ‘genre’ peut être associée à un ‘CreativeWork’,mais qu’elle ne peut être associée à aucune valeur explicitement présente dans la page.

Supposons que la page soit générée sur un modèle qu’on ne peut pas toucher, il va nous falloir renseigner le genre dans une partie non visible de la page. Nous allons voir ici comment le faire dans une balise <meta>.

Pour cela, nous créons une balise meta dans la partie associé au type Book: nous allons donc la mettre directement sous la balise <body>. La balise <meta> doit avoir une propriété ‘genre’, et une valeur définie par la propriété ‘content’.

<meta property="genre" content="http://dbpedia.org/resource/Category:Comedy"></meta>

Notez que la valeur de la propriété ‘genre’ est soit de type Text, soit de type URL. Nous aurions pu mettre le texte content= »Comédie ». Pour introduire les possibilités des données liées, nous avons préféré utiliser une notion définie dans DBPedia, ce qui va relier nos données à un grand nombre de données disponibles ailleurs sur le Web. Une recherche Google sur ‘DBPedia comedy’ nous a donné le lien http://dbpedia.org/page/Category:Comedy. Nous verrons plus loin pourquoi nous l’avons remplacé par http://dbpedia.org/resource/Category:Comedy.

Note: DBPedia est une représentation structurée de contenus extraits de Wikipedia, où les éléments sont reliés par du sens (représentation sémantique). De nombresuses pages Web et ensembles de données du Web sont reliés à DBPedia. Se relier à DBPedia, c’est se relier à l’importante masse de données de DBPedia, mais aussi à de nombreuses autres données. Ici, par exemple, nous pourrons relier L’Avare à toutes les comédies connues de DBPedia.

Bilan de ce que vous avez appris

Dans cet atelier, jusque là, vous avez appris:

  • Les bases de l’utilisation de vocabulaires pour structurer le contenu de pages Web: types, propriétés, et héritage de propriétés
  • Comment trouver ce dont vous avez besoin dans la documentation du vocabulaire  schema.org
  • Comment définir le vocabulaire par défaut utilisé par RDFa dans une page Web
  • Comment définir le type d’une page et des propriétésgrâce à RDFa
  • Comment utiliser divers outils pour vérifier le marquage que vous avez effectué
  • Comment utiliser l’attribut @content à la fourniture de données exploitables par les machines
  • Comment utiliser la balise <meta> pour fournir des propriétés qu’on ne peut pas mettre ailleurs

Exercice 2

So far you have described the page using a single type and a handful properties. However, when you added the @property="author" attribute, the expected value for the property (the range) was not a simple text string; it was supposed to be an entity of either the Person or the Organizationtype.

In this exercise, you will add several embedded entities to the page to conform to the vocabulary definition and make your structured data even more useful.

Continue working with the HTML file that you have been editing so far, or for a fresh start, copy step2/check_c.html into a new file.

Define the Person entity

Your @property="author" attribute needs to define a Person entity to satisfy the expected value of author. Simply add the @typeof="Person" attribute to the same HTML element so that you are, in one step, defining the author attribute for the overall Book entity, while simultaneously starting a new Person entity scope.

Check your markup

Define basic properties of the Person entity

Now that you have defined a Person entity, you can define specific properties for it.

Declare that the person’s name is the name property of the Person entity.

Tip: Remember that you might need to add <span> tags to create a new scope for the properties that you want to add.

Check your markup

Declare that the same Person is both the author and copyrightHolder

Copyright is an important subject for both creators and organizations and individuals seeking to reuse or republish work, so naturally schema.org includes a copyrightHolder property that you can apply. In this case, however, the author and the copyrightHolder are one and the same, and you have already used the @property attribute.

To define multiple property values for the same attribute, simply include the values as a whitespace-delimited list. In this case, edit the HTML to declare @property="author copyrightHolder" and check your work in one or more structured data validators.

Note: These are still relatively early days for structured data validators, and their output varies for more esoteric cases like multi-valued attributes. For example, the Structured Data Linter recognizes the second value for copyrightHolder but generates a « blank node » identifier for it, whereas Google’s Structured Data Testing Tool only recognizes the last value of the multi-valued attribute. To complicate matters further, the search engines recognize that their tools have bugs that differ from what their actual production parser understands… so don’t be overly alarmed if it seems like your markup is not being recognized by the testing tool.

Use the @resource attribute to group assertions for an entity

Sometimes your HTML document does not group all of the content in such a way that you can cleanly keep all of the attributes for a given instance of an entity within a single scope. In these cases, you may be able to use the @resource attribute to logically group the properties for that instance.

For example, when you added the @typeof="Person" declaration for the author, the name of the author was separated from your existing Personinstance by the <a> element in the middle. The new scope that that <a> introduces makes it a bit more difficult to mark up the familyName andgivenName of the author.

To resolve the problem, add a @resource attribute to your existing Person declaration. The value of the new attribute should be unique on this page; use #author1 for the sake of simplicity.

Then add a wrapping <span> element around the name of the author inside the a element, including a @resource attribute with a value of #author1to match what you added above. This creates a new scope for the existing entity, such that any properties declared within this new scope will be added to that entity.

Now add another <span> element inside the newly scoped #author1 resource, and declare it to be the name property. For bonus points, you can nest the givenName and familyName properties inside of the name property.

Check your markup

Improve your ISBN markup

Note: Now that you know about @resource, you can improve the granularity of your ISBN markup. Add a resource value for the Book entity and make your isbn properties refer to the Book entity.

Check your markup

Describe the publisher as an Organization type

So far we have not provided any value for the publisher property, which tends to be important for creative works. The publisher documentation shows that the expected range is Organization, which in turn has child types such as Corporation.

  1. Define a new Corporation entity with the name of the publisher as the name property.
  2. Add a location property for the Corporation entity. Notice that the expected range is a type of either Place or PostalAddress. Use aPostalAddress entity, filling in the addressLocality and addressRegion properties.
Check your markup

Bonus exercise: Add a second author of type Person

There is a second author for this book, Sean Williams, that should be reflected in the machine-readable markup.

  1. Define the new Person entity with the name, givenName, and familyName properties.
  2. Define the birth date of this author using the birthDate property.
Check your markup

Checkpoint: Your HTML page should now look like step3/check_d.html

Lessons learned

In this exercise, you learned:

  • How to embed entities within properties
  • How to declare multiple property values in a single @property attribute
  • How to use @resource to group assertions for a single entity on a page

Strings to things

So far you have described the page using types and properties that are inside the page itself. But if you have to update some information that is common to many of your pages, that could be painful to roll out… and even if you have an automated process for updating that information across all of your pages, there is no guarantee that anything extracting data from your site will extract all of the updates at one time.

Fortunately, the problem of providing one copy of information on the web was solved at the same time the web was created: via the simple power of the link! And structured data is no different; in fact, linked data is a term that has emerged over the past few years marking a more pragmatic approach to building a web of structured data than the somewhat classically academic semantic web.

The following principles of linked data were first articulated by Tim Berners-Lee in a 2006 design note:

  1. Use URIs as names for things
  2. Use HTTP URIs so that people can look up those names.
  3. When someone looks up a URI, provide useful information, using the standards (RDF*, SPARQL)
  4. Include links to other URIs. so that they can discover more things.

Keep these principles in mind as you work through the following steps!

Continue working with the HTML file that you have been editing so far, or for a fresh start, copy step3/check_d.html into a new file.

Link the authors to external pages

There are many sources of identifiers for people on the web. Some sources that you may find familiar include:

Assuming your underlying system has the ability to store and express identifiers, you can help the machines disambiguate and retrieve more information about your authors by linking to their identifiers from your catalog page. Use the sameas property to add links from your simple text representation of the authors of this book to external resources.

Hint: To save you time in looking up identifiers, here are a set for Garth Nix:

  • http://id.loc.gov/authorities/names/n96003050
  • http://viaf.org/viaf/39520118
  • http://dbpedia.org/resource/Garth_Nix
  • http://www.freebase.com/m/01qqfy
Check your markup

Note: While it might be tempting to use the url property, that is normally reserved for linking to a URL where the thing that is described is available (for example, linking to a downloadable podcast or e-book). In contrast, sameAs is used to link to a description of the thing.

Create separate pages for the authors in your own system

Take a look at how the page has developed over time; there is now a lot of HTML markup just to describe the author, and you can imagine more markup if you were to express all of the see from and see also forms that might be contained in a local authority record. If your system uses local authority records, in fact, they are a perfect candidate for refactoring your markup. You can move the bulk of the markup from the bibliographic record display page into a separate page about the author, built on your local authority record. Then, once it is a separately displayed page, then you can simply link to it from this page… as well as from any other pages that want to provide information about this author.

Create a new file named garthNix.html in your text editor, and copy the @resource="#author1" markup into the file.

As the new file describes a single type, you can move the declaration of the type into the <body> element of the new page, and you can (optionally) remove the @resource attributes from the markup that you pasted into the file. Don’t forget the @vocab declaration! Use your existing page as a template. Use the RDFa parsers to ensure that the markup in the new file expresses the same information as it did in the original file.

Repeat these steps to create seanWilliams.html, using the @resource="#author2" markup as the source of interest.

Check your garthNix.html
Check your seanWilliams.html

Link to the author page

Now, replace the inline markup in the original page with a simple link to your new file. You still want to state that « Author Name » is the author of the technical article using the @property="author" assertion, but now you can either add that property directly to an <a> element that links to your new file, or use the resource attribute to link to the external file instead of the internal markup. This is a signal to any RDFa parser that the linked resource contains the data for the named property.

Note: « when the element contains the href (or src) attribute, @property is automatically associated with the value of this attribute rather than the textual content of the <a> element » (Adida, Ben; Birbeck, Mark; Herman, Ivan; Sporny, Manu. RDFa 1.1 Primer – Second edition). Using a@property attribute on the same element as a @resource attribute works in a similar fashion; the target of the @resource attribute is used as the value of the @property attribute.

Check your markup

Checkpoint: Your original HTML page should now look like step4/check_e.html and your new author HTML pages should look likestep4/garthNix.html and step4/seanWilliams.html.

Augment the author page

Now that you have created an entirely separate author page, you can add much more information about the author; for example, you can include an email address, links to their personal web sites and social media accounts, a list of their publications and previous talks… far more information than you would have wanted to publish inline in the article itself.

Following the principles of linked data can lead not only to more efficient maintenance of information and (potentially) more useful results in search engines and other aggregators of data, but also to a better information design and experience for your users.

Use the Person properties to flesh out the « about this author » page with properties such as address, birthDate, email, follows, and telephone. Be adventurous, and remember to try to use nested types and ranges appropriately!

Lessons learned

In this exercise, you learned:

  • The basic principles of linked data
  • How to combine @property and @href attributes to link to data on another page
  • Some of the rich metadata you can express about yourself on a page using the Person type!

Subject headings

In this exercise, you will mark up subject headings. The first approach treats subject headings simply as keywords, which is appropriate for library systems that do not control subject headings or which do not expose the source for the subject headings. Then we will embellish our markup by treating the subject headings as part of an externally controlled vocabulary.

Marking up subject headings as keywords

Identifying subject headings in the catalog page as simple text keywords can be useful for building a search engine that can provide relevance bumps based on the keywords, rather than relying on arbitrary text within the web page.

Find the subject headings in the page, mark them up using the schema.org keywords property, and check your work.

Check your markup

Marking up subject headings as things

While simple text keywords can be useful, we have learned that by linking to external entities, machines can disambiguate text and connect our work to the broader cloud of linked data.

Find matches for the subject headings in the page in http://id.loc.gov and mark them up as external entities. This time, use the about property, as it is intended to identify The subject matter of the content–perfect for our purposes. Then check your work.

Note: You can also continue to mark up the text of the subject headings as keywords, if you like; these approaches are compatible and different clients may use different approaches to consuming the data that you offer.

Check your markup

Checkpoint: Your original HTML page should now look like step4/check_f.html.

Lessons learned

In this exercise, you learned:

  • How to mark up subject headings as keywords using the keywords property to potentially improve the relevance of those keywords in search results in consuming applications;
  • How to link subject headings to external controlled vocabularies using the about property.

Linking to other bibliographic descriptions

We have already seen that entities such as authors and subject headings often have other representations on the web to which we can connect our own

Linking to a Freebase editions

Freebase is a source of linked open data that uses its own schema to represent entities, including books to which specific editions are attached in a quasi-FRBR fashion.

  1. Search for the corresponding book edition at freebase.com; the ISBN13 is a good entry point.
  2. The resulting URL http://www.freebase.com/m/01069fkb is a human-readable representation. If you read the Freebase documentation, you will eventually find that you can link to a machine-readable RDF representation by taking the Freebase topic ID (m/01069fkb) and appending it to https://www.googleapis.com/freebase/v1/rdf/.
  3. Use a sameAs property to link your book to the Freebase edition.
Check your markup

Linking to an OCLC Bibliographic Work Description

OCLC recently announced that it had published 197 million open bibliographic work descriptions.

  1. Search for the corresponding book at worldcat.org; the ISBN13 is a good entry point.
  2. Scroll down to the Linked Data section of the WorldCat details page and click on the + to display the contents.
  3. Find the schema:exampleOfWork property and find the link to the OCLC Work Entity. The link redirects to an experimental URL, but you can copy and paste the link into your book record. You can also find the non-experimental URL at the top of the Work Description page.Aside: exampleOfWork has been proposed as a schema.org extension, but has not yet been accepted.
  4. Use a sameAs property to link your book to the OCLC Work Description.
Check your markup

Linking to the publisher’s description

You can also link to the publisher’s description. Even though the publisher might not offer any linked data themselves, it might serve as a useful identifier for the machines.

Once again, you can use the sameAs property to link your book to the publisher’s description.

Check your markup

Checkpoint: Your original HTML page should now look like step4/check_g.html.

Lessons learned

In this exercise, you learned how to link your bibliographic description to the bibliographic descriptions available from Freebase, OCLC, and publishers, as a means of giving machines more entry points into linked open data.

About the author

Dan Scott is a systems librarian at Laurentian University.

Informational resources

  • RDFa Lite (W3C Recommendation) – a marvel of technical writing, this is a specification written as a concise, extremely useful tutorial
  • schema.org – the source for the vocabulary types and definitions, although the examples all use microdata or JSON-LD instead of RDFa Lite
  • RDFa Primer (W3C Working Group Note) – a more in-depth RDFa tutorial that covers properties beyond RDFa Lite; the additional examples may help clarify how RDFa Lite works (really, you don’t need anything beyond RDFa Lite!)
  • Heath, Tom; Bizer, Christian. Linked data: Evolving the Web into a Global Space – a book (freely available on the web) that goes into depth to cover the principles, patterns, and best practices for publishing linked data on the web
  • =================================

Specialized versus general vocabularies

Many vocabularies focus on a particular domain; for example:

  • Friend-of-a-Friend (FOAF): social connections
  • Portable Contacts (PoCo): contact information
  • Bibliographic Ontology (Bibo): bibliographic references
  • Good Relations (gr): sales offers, orders, and agents

In practice, documents often ended up using types and properties from several different vocabularies. While vocabulary description languages like RDF Schema (RDFS) and the Web Ontology Language (OWL) offer ways to express equivalence between types and properties of different vocabularies, it can still be extremely complex to publish and consume mixed-vocabulary documents.

schema.org, on the other hand, tries to provide a vocabulary that can describe almost everything, albeit in many cases with less granularity than more specialized vocabularies.

Auteur : Moissinac

Maitre de conférence à Télécom Paris, Département Image, Données, Signal - Groupe Multimédia Jean-Claude Moissinac a mené des recherches sur les techniques avancées pour la production, le transport, la représentation et l’utilisation des documents multimédia. Ces travaux d'abord ont évolué vers la représentation sémantique de données liées au multimédia (process de traitement de médias, description d'adaptations de média, description formelle d'interactions utilisateurs). Aujourd'hui, les travaux portent sur la constitution de graphes de connaissances. Principaux axes de recherche actuel : représentations sémantiques de connaissances, constitution de graphes de connaissances, techniques d'apprentissage automatique sur ces graphes

Commentaires Clos.