docAnnotation sémantique de pages HTML RDFa, microformats et
download 
Plainte Transcription
Annotation sémantique de pages HTML RDFa, microformats et
Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata Introduction 1 / 31 2 / 31 Annotations sémantiques I I Annotation sémantique de pages HTML RDFa et microdata Web sémantique = Annotation des ressources du Web Les sources de données de Linking Open Data : I I Anne-Cécile Caron I Master IPI-NT Il est aussi possible d’annoter directement des pages Web avec du RDF (technologie RDFa), des microdata ou des microformats. I 2016-2017 I Annotation sémantique de pages HTML RDFa et microdata 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. Stockage des triplets dans des ”triple stores”, bases que l’on pourra interroger. Le créateur de la page web écrit lui-même ses annotations sémantiques Une analyse de la page web permet d’extraire les triplets. Annotation sémantique de pages HTML RDFa et microdata Microformats Microdata 3 / 31 Les Microformats I Ces microformats sont utilisés depuis 2004. 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 : difficile donc de mixer di↵érents vocabulaires. I Les Microformats ne font pas l’objet d’une standardisation, contrairement aux microdata et RDFa (groupes de travail du W3C). 4 / 31 Les Microdata I Microdata = ajouts d’attributs HTML5 (ou XHTML5), pas pour XML I les Microdata utilisent principalement des nouveaux attributs, définis pour des éléments HTML. Modèle de données : I I I I I groupes de couples (nom, valeur), chaque groupe est appelé item. Ce modèle s’inspire de celui de JSON. Un item peut avoir des types, un identifiant global, et une liste de couples (nom, valeur). Une valeur est soit une chaı̂ne de caractères, soit un item. 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. Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata Microdata Microdata 5 / 31 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). Quand un élément e a un attribut itemprop, la valeur associée à cette propriété est : I I I I I I 6 / 31 Microdata - exemple <div itemscope itemtype="http://data-vocabulary.org/Person"> <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="http://net.tutsplus.com" itemprop="affiliation">Nettuts+</a>. I live in <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="locality">Louisville</span>, <span itemprop="region">KY</span> </span> </div> souvent, le contenu textuel de cet élément e. pour certains types d’éléments, comme a ou img, la valeur est une URL (celle de href ou src). lorsque e contient aussi un attribut itemscope alors la valeur est l’item créé par l’élément. ... il y a d’autres cas particuliers itemtype permet de typer un item, il doit donc figurer dans l’élément qui contient itemscope. Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata Microdata Microdata 7 / 31 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"></div> <!-- 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></p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>Band: <span itemprop="name">Jazz Band</span></p> <p>Size: <span itemprop="size">12</span> players</p> </div> 8 / 31 Identifiant global I I On peut utiliser des identifiants globaux, lorsqu’un item décrit un objet qui a un identifiant global. On utilise l’attribut itemid. L’attribut itemid n’est autorisé que pour les éléments qui ont déjà un attribut itemtype (et donc itemscope). <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>Title <dd itemprop="title">The Reality Dysfunction <dt>Author <dd itemprop="author">Peter F. Hamilton <dt>Publication date <dd><time itemprop="pubdate" datetime="1996-01-26"> 26 January 1996 </time> </dl> Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata Microdata Microdata 9 / 31 (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. 10 / 31 Exemple <section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">Hedral</h1> <p itemprop="desc">Hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/color">black</span> fur with <span itemprop="http://example.com/color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"> </section> 1 item de type http://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 Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa RDFa - principe et illustrations 11 / 31 RDFa I I I 12 / 31 Triplets RDF RDFa signifie RDF in attributes : Attributs XML/XHTML/HTML5 permettant d’enrichir une page web de RDF. I I On exprime dans le document HTML des triplets (sujet, prédicat, objet). RDFa 1.0 est une recommandation du W3C depuis octobre 2008, RDFa 1.1 depuis juin 2012, dernière version en mars 2015. Pour le sujet, on utilise @resource ou @about. Pour le prédicat, on utilise I I I I @property : propriété entre un sujet et un objet ressource ou littéral. @rel : propriété entre 2 ressources @rev : propriété inverse entre 2 ressources Pour l’objet, on utilise I I I @resource : combiné avec property, cet attribut définit l’objet d’une propriété, mais sans lien cliquable comme href ou src. @href : URI qui exprime la ressource objet de la propriété (ou sujet en présence de rev) @src : même rôle que href mais pour une ressource imbriquée Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 13 / 31 Utilisation des propriétés title et created du Dublin core, l’objet est un littéral. 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 : http://example.com/alice. I Convention de couleur : 14 / 31 <html> <head> ... </head> <body> ... <h2>The Trouble with Bob</h2> <p>Date: 2011-09-10</p> ... </body> XHTML simple <html> <head> ... </head> <body> ... <h2 property="http://purl.org/dc/terms/title">The Trouble with Bob</h2> <p>Date: <span property="http://purl.org/dc/terms/created">2011-09-10</span></p> ... </body> XHTML avec RDFa Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 15 / 31 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="http://purl.org/dc/terms/"> ... <h2 property="title">The Trouble with Bob</h2> <p>Date: <span property="created">2011-09-10</span></p> ... </body> 16 / 31 Licence en pied de page : utilisation de href pour définir l’objet. <p>All content on this site is licensed under <a href="http://creativecommons.org/licenses/by/3.0/"> a Creative Commons License</a>. c 2011 Alice Birpemswick.</p> <p vocab="http://creativecommons.org/ns#"> All content on this site is licensed under <a property="license" href="http://creativecommons.org/licenses/by/3.0/"> a Creative Commons License</a>. c 2011 Alice Birpemswick.</p> Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 17 / 31 18 / 31 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="http://purl.org/dc/terms/"> ... <div resource="/alice/posts/trouble_with_bob"> <h2 property="title">The trouble with Bob</h2> <p>Date: <span property="created">2011-09-10</span></p> <h3 property="creator">Alice</h3> </div> <div resource="/alice/posts/jos_barbecue"> <h2 property="title">Jo’s Barbecue</h2> <p>Date: <span property="created">2011-09-14</span></p> <h3 property="creator">Eve</h3> </div> </body> Remarque : dans le fichier HTML, l’élément : <base href="http://example.com/"/> permet de reconstituer l’URI complet http://example.com/alice/posts/trouble_with_bob à partir de resource = "/alice/posts/trouble_with_bob" Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 19 / 31 Dans le blog d’Alice figurent ses coordonnées : <div> <p>Alice Birpemswick, Email: <a href="mailto:[email protected]">[email protected]</a>, Phone: <a href="tel:+1-617-555-7332">+1 617.555.7332</a> </p> </div> 20 / 31 <div vocab="http://xmlns.com/foaf/0.1/" typeof="Person"><p> <p> <span property="name">Alice Birpemswick</span>, Email: <a property="mbox" href="mailto:[email protected]">[email protected]</a>, Phone: <a property="phone" href="tel:+1-617-555-7332">+1 617.555.7332</a> </p> </div> Alice va utiliser le vocabulaire de FOAF, et en particulier la classe foaf:Person pour indiquer que cette partie décrit une personne. 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. Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 21 / 31 22 / 31 Ici, on nomme la ressource précédemment anonyme #me. Remarque : L’URI http://example.com/#me est une ressource qui représente Alice. Ce n’est pas l’URI de son blog. <div vocab="http://purl.org/dc/terms/"> <div resource="/alice/posts/trouble_with_bob"> <h2 property="title">The trouble with Bob</h2> <h3 property="creator" resource="#me">Alice</h3> </div> </div> <div vocab="http://purl.org/dc/terms/"> <div resource="/alice/posts/my_photos"> <h2 property="title">I will post my photos nevertheless...</h2> <h3 property="creator" resource="#me">Alice</h3> </div> </div> <div vocab="http://xmlns.com/foaf/0.1/" resource="#me" typeof="Person"> <p> <span property="name">Alice Birpemswick</span>, Email: <a property="mbox" href="mailto:[email protected]">[email protected]</a>, Phone: <a property="phone" href="tel:+1-617-555-7332">+1 617.555.7332</a> </p> </div> Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 23 / 31 I On peut définir des préfixes pour les espaces de nom. I On peut utiliser un vocabulaire par défaut qui n’aura pas de préfixe, et d’autres vocabulaires désignés par des préfixes (cf XML). I La portée de chaque définition est l’intérieur de l’élément où cette définition apparaı̂t <body vocab="http://purl.org/dc/terms/" prefix="schema: http://schema.org/"> <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 ...</p> </div> ... </div> </body> 24 / 31 Dans l’exemple suivant, l’attribut @content permet de di↵érencier l’information sémantique de ce qui est visible dans la page HTML. <p>Date: <span property="http://purl.org/dc/terms/created" content="2011-09-10"> 10th of September, 2011 </span> </p> L’attribut content permet aussi de définir des objets dans des éléments vides : <head prefix="og: http://ogp.me/ns#" > ... <meta property="og:title" content="The Trouble with Bob" /> <meta property="og:type" content="text" /> <meta property="og:image" content="http://example.com/alice/bob-ugly.jpg"/> ... </head> Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 25 / 31 On peut utiliser datatype pour indiquer le type d’un littéral. 26 / 31 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. 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. Annotation sémantique de pages HTML RDFa et microdata <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> Annotation sémantique de pages HTML RDFa et microdata RDFa - principe et illustrations RDFa - principe et illustrations 27 / 31 On peut utiliser rel au lieu de property <div vocab="http://xmlns.com/foaf/0.1/" resource="#me"> <ul rel="knows"> <li resource="http://example.com/bob/#me" typeof="Person"> <a property="homepage" href="http://example.com/bob/"> <span property="name">Bob</span></a> </li> <li resource="http://example.com/eve/#me" typeof="Person"> <a property="homepage" href="http://example.com/eve/"> <span property="name">Eve</span></a> </li> ... </ul> </div> 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). 28 / 31 Comment choisir entre Microdata et RDFa I RDFa est plus pratique quand : I I I I I I On utilise des vocabulaires RDF existants, possibilité de définir des préfixes, d’utiliser di↵érents namespace On veut manipuler des données dans plusieurs langues On veut typer des littéraux (impossible en Microdata). Exporter des triplets RDF On souhaite modéliser un graphe, pas un arbre Les Microdata sont plus pratiques quand : I I On définit des propriétés qui ont pour valeur des listes. On n’a pas besoin de toute l’expressivité de RDFa : les microdata sont plus simples et intégrées à HTML5. Annotation sémantique de pages HTML RDFa et microdata Annotation sémantique de pages HTML RDFa et microdata Applications Applications 29 / 31 Applications I I Schema.org Flickr : Site de stockage de photographies. C’est un des premiers services à utiliser RDFa. I Au départ, microdata, mais maintenant aussi défini pour 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. http://ogp.me/ I Ensemble de classes et de propriétés. Vocabulaire assez large : I Drupal : CMS open source. Permet d’intégrer du RDFa depuis la version 7. 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. I I I I I I I Annotation sémantique de pages HTML RDFa et microdata Conclusion 31 / 31 Conclusion I I RDFa et les microdata permettent d’ajouter des informations sémantiques aux pages (X)HTML. Microdata : I I I pour HTML5, modèle inspiré des objets JSON utilisation de nouveaux attributs itemscope, itemprop, itemref, itemtype, itemid. RDFa : I I I I I 30 / 31 modèle de graphe (RDF) Des attributs HTML : rel, rev, content, href, src. et de nouveaux attributs : about, property, resource, datatype, typeof. Di↵érences entre RDFa 1.0 et RDFa 1.1 : essentiellement une convergence vers HTML5 En cours de standardisation : règles de traduction d’un format à l’autre Créations : Livres, Films, séries TV, recettes de cuisine, ... Evénements Organisations Lieux, restaurants, ... Produits, o↵res, ... Avis, notes, ... Ces informations sont utilisées par les moteurs de recherche. Par exemple, Google les utilise pour créer des extraits enrichis (Rich Snippets).
