Annotations sémantiques. Annotation sémantique de pages HTML RDFa, microformats et microdonnées. Microformats - exemple.

Transcription

1 Introduction 1/32 2/32 Annotation sémantique de pages HTML RDFa, microformats et microdonnées Anne-Cécile Caron Master IPI-NT Annotations sémantiques I Web sémantique = Annotation des ressources du Web I Les sources de données de Linking Open Data : I La plupart du temps, analyse des ressources Web pour les annoter - par exemple analyse des pages de Wikipédia pour en extraire des triplets RDF, stockés par DBPedia. I Stockage des triplets dans des triple stores, bases que l on pourra interroger. I Il est aussi possible d annoter directement des pages Web avec du RDF (technologie RDFa), des microdata ou des microformats. I Le créateur de la page web écrit lui-même ses annotations sémantiques I Une analyse de la page web permet d extraire les triplets. Microformats Microformats 3/32 4/32 Les Microformats I Ces microformats sont utilisés depuis I Ils sont très répandus car relativement anciens, mais pas très riches. I Les microformats permettent d ajouter des informations à une page Web, en utilisant des attributs qui existent déjà en HTML (par exemple class ou id). I vocabulaires séparés, ciblés, pour peu de types de données : Marquer une adresse postale, des recettes de cuisine, les expériences d un CV, I Il n y a pas de namespace : di vocabulaires. cile donc de mixer di érents I Les Microformats ne font pas l objet d une standardisation, contrairement aux microdata et RDFa (groupes de travail du W3C). Microformats - exemple <div class="hrecipe"> <h3 class="fn">quick noodles</h3> <p class="summary">noodles are quick and easy, like this example! <p class="ingredient hcard"> <span class="value">2.5</span><span class="type">kilogram</span> bag of instant noodles. <ul class="instructions"> <li>put water on to boil,</li> <li>add the powder for the sauce,</li> <li>add the noodles, and stir till ready.</li> </ul> <p>enough for <span class="yield">1 adult</span>. <p>preparation time is approximately <span class="duration">5 <abbr title="minutes">mins</abbr></span>.

2 5/32 6/32 Les I = ajouts d attributs HTML5 (ou XHTML5), pas pour XML I les utilisent principalement des nouveaux attributs, définis pour des éléments HTML. I Modèle de données : I groupes de couples (nom, valeur), chaque groupe est appelé item. Ce modèle s inspire de celui de JSON. I Un item peut avoir des types, un identifiant global, et une liste de couples (nom, valeur). I Une valeur est soit une chaîne de caractères, soit un item. I il n y a pas d ordre sur les noms (propriétés), mais si une propriété a plusieurs valeurs, alors elles sont ordonnées. Définition d un item I itemscope permet de définir la source de l item I Pour ajouter une propriété à un item, on utilise l attribut itemprop, sur l un des descendants de l item (descendant au sens de l imbrication des éléments HTML). I Quand un élément e aunattributitemprop, lavaleurassociéeà cette propriété est : I souvent, le contenu textuel de cet élément e. I pour certains types d éléments, comme a ou img, lavaleurestune URL (celle de href ou src). I lorsque e contient aussi un attribut itemscope alors la valeur est l item créé par l élément. I il y a d autres cas particuliers I itemtype permet de typer un item, il doit donc figurer dans l élément qui contient itemscope. 7/32 8/32 - exemple <div itemscope itemtype=" <img src="avatar.jpg" itemprop="photo"> My name is <span itemprop="name">john Cox</span>, and I am a <span itemprop="title">writer</span> for <a href=" itemprop="affiliation">nettuts+</a>. I live in <span itemprop="address" itemscope itemtype=" <span itemprop="locality">louisville</span>, <span itemprop="region">ky</span> </span> Identifiant local I Si on a une propriété qui n est pas dans un élément descendant de l élément qui contient itemscope, on peut faire le lien en utilisant itemref et id. <div itemscope id="amanda" itemref="a b"> <!-- on fait comme ci les éléments d id "a" et "b" étaient des sous-éléments du div d id "amanda" --> <p id="a">name: <span itemprop="name">amanda</span> <div id="b" itemprop="band" itemscope itemref="c"> <div id="c"> <p>band: <span itemprop="name">jazz Band</span> <p>size: <span itemprop="size">12</span> players

3 9/32 10 / 32 Identifiant global I On peut utiliser des identifiants globaux, lorsqu un item décrit un objet qui a un identifiant global. On utilise l attribut itemid. I L attribut itemid n est autorisé que pour les éléments qui ont déjà un attribut itemtype (et donc itemscope). <dl itemscope itemtype=" itemid="urn:isbn: "> <dt>title <dd itemprop="title">the Reality Dysfunction <dt>author <dd itemprop="author">peter F. Hamilton <dt>publication date <dd><time itemprop="pubdate" datetime=" "> 26 January 1996 </time> </dl> (Ré)utilisation de vocabulaires I Lorsqu un item est typé, et que les propriétés sont juste des mots, ça veut dire que ces propriétés sont celles définies uniquement pour des items de ce type. I Souvent, les items ne sont pas typés, et les propriétés sont locales au document. I Des propriétés qui sont nommées par des URL peuvent être utilisées pour n importe quel type d item. RDFa 11 / / 32 Exemple <section itemscope itemtype=" <h1 itemprop="name <p itemprop="desc">hedral is a male american domestic shorthair, with a fluffy <span itemprop=" fur with <span itemprop=" paws and belly. <img itemprop="img" src="hedral.jpeg" alt="" title="hedral, age 18 months"> </section> RDFa I RDFa signifie RDF in attributes : Attributs XML/XHTML/HTML5 permettant d enrichir une page web de RDF. I On exprime dans le document HTML des triplets (sujet, prédicat, objet). I RDFa 1.0 est une recommandation du W3C depuis octobre 2008, RDFa 1.1 depuis juin 2012, seconde version en octobre itemdetypehttp://example.org/animals#cat Propriété Valeur name Hedral http ://example.com/fn Hedral desc Hedral is, with a flu y black fur belly. http ://example.com/color black http ://example.com/color white img hedral.jpeg

4 13 / / 32 Triplets RDF I Pour le sujet, on I Pour le prédicat, on utilise :propriétéentreunsujetetunobjetressourceoulittéral. :propriétéentre2ressources :propriétéinverseentre2ressources I Pour l objet, on utilise :combinéavecproperty, cetattributdéfinitl objet d une propriété, mais sans lien cliquable comme href ou src. :URIquiexprimelaressourceobjetdelapropriété(ousujet en présence de rev) :mêmerôlequehref mais pour une ressource imbriquée Exemples : Le blog d Alice I Les exemples qui suivent proviennent de RDFa Primer I Dans ces exemples, on considère qu Alice écrit un blog qui contient des informations personnelles et professionnelles : I Convention de couleur : XHTML simple XHTML avec RDFa 15 / / 32 Utilisation des propriétés title et created du Dublin core, l objet est un littéral. <html> <head> </head> <body> <h2>the Trouble with Bob</h2> <p>date: Dans l exemple précédent, title et created appartiennent au même vocabulaire. On peut simplifier l écriture en définissant un vocabulaire par défaut avec l attribut vocab. <body vocab=" <h2 property="title">the Trouble with Bob</h2> <p>date: <span property="created"> </span> <html> <head> </head> <body> <h2 property=" Trouble with Bob</h2> <p>date: <span property="

5 17 / / 32 Licence en pied de page : utilisation de href pour définir l objet. <p>all content on this site is licensed under <a href=" a Creative Commons License</a>. c 2011 Alice Birpemswick. <p vocab=" All content on this site is licensed under <a property="license" href=" a Creative Commons License</a>. c 2011 Alice Birpemswick. Dans l exemple suivant, l attribut resource permet de définir le contexte, donc le sujet des propriétés à l intérieur de l élément div. <body vocab=" <div resource="/alice/posts/trouble_with_bob"> <h2 property="title">the trouble with Bob</h2> <p>date: <span property="created"> </span> <h3 property="creator">alice</h3> <div resource="/alice/posts/jos_barbecue"> <h2 property="title">jo s Barbecue</h2> <p>date: <span property="created"> </span> <h3 property="creator">eve</h3> 19 / / 32 Dans le blog d Alice figurent ses coordonnées : <div> <p>alice Birpemswick, <a href="mailto:alice@example.com">alice@example.com</a>, Phone: <a href="tel: "> </a> Remarque : dans le fichier HTML, l élément : Alice va utiliser le vocabulaire de FOAF, et en particulier la classe foaf:person pour indiquer que cette partie décrit une personne. <base href=" permet de reconstituer l URI complet à p a r t i r resource d e = "/alice/posts/trouble_with_bob"

6 21 / / 32 <div vocab=" typeof="person"><p> <p> <span property="name">alice Birpemswick</span>, <a property="mbox" href="mailto:alice@example.com">alice@example.com</a>, Phone: <a property="phone" href="tel: "> </a> L élément div n étant pas explicitement associé à une ressource mais ayant un type foaf:person, on remarque la création d une noeud blanc pour représenter cette personne. Inconvénient des noeuds blancs : on ne peut pas y faire référence. Ici, on nomme la ressource précédemment anonyme #me. Remarque : L URI est une ressource qui représente Alice. Ce n est pas l URI de son blog. <div vocab=" <div resource="/alice/posts/trouble_with_bob"> <h2 property="title">the trouble with Bob</h2> <h3 property="creator" resource="#me">alice</h3> <div vocab=" <div resource="/alice/posts/my_photos"> <h2 property="title">i will post my photos nevertheless</h2> <h3 property="creator" resource="#me">alice</h3> <div vocab=" resource="#me" typeof="person"> <p> <span property="name">alice Birpemswick</span>, <a property="mbox" href="mailto:alice@example.com">alice@example.com</a>, Phone: <a property="phone" href="tel: "> </a> 23 / / 32 I Comme en Sparql, on peut définir des préfixes. I On peut utiliser un vocabulaire par défaut et des préfixes. I La portée de chaque définition est l intérieur de l élément où cette définition apparaît <body vocab=" prefix="schema: <div resource="/alice/posts/trouble_with_bob" typeof="schema:blogposting"> <h2 property="title">the trouble with Bob</h2> <h3 property="creator" resource="#me">alice</h3> <div property="schema:articlebody"> <p>the trouble with Bob is

7 25 / / 32 Dans l exemple suivant, l permet de di é r e n c i e r l information sémantique de ce qui est visible dans la page HTML. <p>date: <span property=" content=" "> 10th of September, 2011 </span> L attribut content permet aussi de définir des objets dans des éléments vides : <head prefix="og: > <meta property="og:title" content="the Trouble with Bob" /> <meta property="og:type" content="text" /> <meta property="og:image" content=" </head> On peut utiliser datatype pour indiquer le type d un littéral. c 2011 Alice Birpemswick. c <span property="dc:date" datatype="xsd:gyear">2011</span> Alice Birpemswick. Les types sont ceux de XML schéma. Le préfixe xsd est prédéfini, comme beaucoup d autres. La liste des préfixes prédéfinis est donnée dans le document RDFa Core Initial context. On peut utiliser about pour définir le sujet, à la place de resource. On utilise en particulier about combiné avec property, car resource dans ce cas désigne l objet. <ul> <li about="/alice/posts/trouble_with_bob" property="title"> The trouble with Bob </li> <li about="/alice/posts/jos_barbecue" property="title"> Jo s Barbecue </li> </ul> 27 / 32 On peut utiliser rel au lieu de property <div vocab=" resource="#me"> <ul rel="knows"> <li resource=" typeof="person"> <a property="homepage" href=" <span property="name">bob</span></a> </li> <li resource=" typeof="person"> <a property="homepage" href=" <span property="name">eve</span></a> </li> </ul> 28 / 32 I rel ne considère jamais le contenu textuel des élément, ni l attribut content. Donc rel est utilisé uniquement quand l objet n est pas un littéral. I rel permet de définir des propriétés dont l objet apparaît dans des sous-éléments (comme ici).

8 Applications 29 / / 32 Comment choisir entre et RDFa I RDFa est plus pratique quand : I On utilise des vocabulaires RDF existants, possibilité de définir des préfixes, d utiliser di érents namespace I On veut manipuler des données dans plusieurs langues I On veut typer des littéraux (impossible en ). I Exporter des triplets RDF I On souhaite modéliser un graphe, pas un arbre I Les sont plus pratiques quand : I On définit des propriétés qui ont pour valeur des listes. I On n a pas besoin de toute l expressivité de RDFa : les microdata sont plus simples et intégrées à HTML5. Applications I Flickr : Site de stockage de photographies. C est un des premiers services à utiliser RDFa. I Facebook : Open Graph Protocol. Définition d un vocabulaire pour ajouter des métadonnées à une page web afin qu elle ait les mêmes fonctionalités que n importe quelle page de facebook. I Drupal : CMS open source. La version 7 permet d intégrer du RDFa. I Bibliothèques de manipulations de fichiers XHTML+RDFa dans de nombreux langages (C, C#, Java, Javascript, Perl, PHP, Python,) I plugins pour Firefox (parfois autres navigateurs) permettant de connaître les informations sémantiques cachées. Par exemple RDFa Developer I Schema.org : définition d un vocabulaire exploité par Google, Microsoft Bing, Yahoo! et Yandex. Applications Conclusion 31 / / 32 Schema.org I Au départ, microdata, mais maintenant aussi défini pour RDFa. I Ensemble de classes et de propriétés. I Vocabulaire assez large : I Créations : Livres, Films, séries TV, recettes de cuisine, I Evénements I Organisations I Lieux, restaurants, I Produits, o res, I Avis, notes, I Ces informations sont utilisées par les moteurs de recherche. Par exemple, Google les utilise pour créer des extraits enrichis (Rich Snippets). Conclusion I RDFa et les microdata permettent d ajouter des informations sémantiques aux pages (X)HTML. I : I pour HTML5, modèle inspiré des objets JSON I utilisation de nouveaux attributs itemscope, itemprop, itemref, itemtype, itemid. I RDFa : I modèle de graphe (RDF) I Des attributs HTML : rel, rev, content, href, src. I et de nouveaux attributs : about, property, resource, datatype, typeof. I Di érences entre RDFa 1.0 et RDFa 1.1 : essentiellement une convergence vers HTML5 I En cours de standardisation : règles de traduction d un format à l autre