PDF de programación - Web semántica: Datos estructurados en HTML

Web semántica:

Datos estructurados

en HTML

Daniel Vila Suero
[email protected]

17/10/2011

Ontology Engineering Group, Universidad Politécnica de Madrid

Agradecimientos: Alex Stolz - UNIBW (Munich) por la información

sobre GoodRelations

Contenido

•  PARTE 1: La Web de Datos y Linked Data

-  Introducción a la Web semántica
-  Linked (Open) Data
-  Tecnologías semánticas
-  Metodología y herramientas
-  Casos de uso

•  PARTE 2: Publicación y consumo de datos estructurados en

HTML
-  Introducción
-  RDFa
-  Microdata
-  Schema.org
-  Goodrelations
-  Productontology
-  Caso de uso: Volkswagen

•  Discusión

2

Datos estructurados en HTML

•  Alternativa (complementaria) a Linked Data

•  En los últimos años se está produciendo un aumento

considerable de datos embebidos en HTML

•  Objetivo: Anotar los datos documentos HTML para no

perder la semántica asociada a la hora de presentarlos en
la Web

•  Existen tres principales formatos:

-  RDFa
-  Microdata
-  Microformats

•  Más relevantes para el futuro: Microdata y RDFa
•  Existen algunas diferencias entre formatos

3

Datos estructurados en HTML

•  Usan esta tecnología multitud de empresas:

-  Renault
-  Volkswagen
-  Ebay
-  O’Reilly
-  BestBuy
-  ..

•  Los grandes motores de búsqueda han reconocido el

valor de los datos estructurados en la Web 
schema.org

4

RDFa

5

RDFa

•  RDF in HTML attributes
•  “Bridging the Human and Data Webs”
•  W3C Recommendation 2008: http://www.w3.org/TR/

rdfa-syntax/

•  RDFa Primer: http://www.w3.org/TR/xhtml-rdfa-

primer/

•  Especificado para XHTML 1.1, potencialmente válido

para cualquier otra spec de HTML

6

BROWSER/MACHINE

USER

RDFa

Fuente: RDFa primer

7

RDFa example

All content on this site is licensed under
All content on this site is licensed under
<a href="http://creativecommons.org/licenses/by/3.0/">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
a Creative Commons License
a Creative Commons License
</a>
</a>

Fuente: RDFa primer

8

RDFa example

<div>
<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<h2>The trouble with Bob</h2>
<h2 property="dc:title">The trouble with Bob</h2>
<h3>Alice</h3>
<h3 property="dc:creator">Alice</h3>
...
...
</div>
</div>

Fuente: RDFa primer

9

RDFa example

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<div about="/alice/posts/trouble_with_bob">
<h2 property="dc:title">The trouble with Bob</h2>
<h3 property="dc:creator">Alice</h3>
...
</div>
<div about="/alice/posts/jos_barbecue">
<h2 property="dc:title">Jo's Barbecue</h2>
<h3 property="dc:creator">Eve</h3>
...
</div>
</div>

Fuente: RDFa primer

10

RDFa in a nutshell

•  RDFa in a nutshell

1.  Declarar los schemas/vocabularios a utilizar

(xmlns:foaf=…)

2.  Usar atributos RDFa para marcar datos, relaciones y tipos

3.  Permitir a los agentes (aplicaciones) extraer datos

estructurados del doc HTML

11

RDFa: 1. Declarar y usar schemas

@xmlns*

Se definen tantos namespaces como vocabularios a
utilizar. Ej.:

xmlns:dc="http://purl.org/dc/elements/1.1/"

* Va a ser sustituido por @prefix en RDFa 1.1
CURIEs (URIs compactas)

Una vez definido el namespace se pueden utilizar
referencias al prefijo y el nombre local (id). Ej.:

<span property="dc:title">Beautiful Sunset</span>

12

HTML
@rel
@rev
@content
@href
@src

RDFa
@about
@property
@resource
@datatype
@typeof

RDFa: 2. Atributos

13

RDFa: 2. Atributos

@about

Define el recurso que va a ser
Anotado (sujeto)

HTML
@rel
@rev
@content
@href
@src

RDFa
@about
@property
@resource
@datatype
@typeof

14

RDFa: 2. Atributos

HTML
@rel
@rev
@content
@href
@src

RDFa
@about
@property
@resource
@datatype
@typeof

@typeof

Clasifica el recurso

15

RDFa: 2. Atributos

HTML
@rel
@rev
@content
@href
@src

RDFa
@about
@property
@resource
@datatype
@typeof

@property
@content
@datatype

Propiedades utilizadas para
los tipos de datos

16

RDFa: 2. Atributos

HTML
@rel
@rev
@content
@href
@src

RDFa
@about
@property
@resource
@datatype
@typeof

@rel /rev
@href / src
@resource

Propiedades relacionales

17

RDFa example

<div>
<div xmlns:foaf="http://xmlns.com/foaf/0.1/" about="#me" rel="foaf:knows">
<ul>
<ul>
<li typeof="foaf:Person">
<li>
<a property="foaf:name" rel="foaf:homepage" href="http://example.com/bob">Bob</a>
<a href="http://example.com/bob/">Bob</a>
</li>
</li>
<li typeof="foaf:Person">
<li>
<a property="foaf:name" rel="foaf:homepage" href="http://example.com/eve">Eve</a>
<a href="http://example.com/eve/">Eve</a>
</li>
</li>
<li typeof="foaf:Person">
<li>
<a property="foaf:name" rel="foaf:homepage" href="http://example.com/manu">Manu</a>
<a href="http://example.com/manu/">Manu</a>
</li>
</li>
</ul>
</ul>
</div>
</div>

Fuente: RDFa primer

18

RDFa Best practices

•  http://rdfa.info/wiki/Best-practices
•  http://www.ebusiness-unibw.org/wiki/RDFaAuthoring
(Hepp et. Al)

1.  Usar un validador XHTML

XHTML Validator: http://validator.w3.org/

- 

- 

2.  Usar un RDFa extractor para comprobar el marcado

Fuzz: http://rdfa.digitalbazaar.com/fuzz/trac/

3.  Usar prefijos standard para facilitar reutilización (gr vs. Grelations)

4.  Escribir XHTML semánticamente correcto

5.  Reutilización/extensión de vocabularios establecidos frente a

creación de nuevos vocabularios

19

RDFa 1.1

•  “Rich Structured Data Markup for Web Documents”
•  Working draft: http://www.w3.org/TR/rdfa-core/
•  RDFa 1.1 Primer: http://www.w3.org/TR/rdfa-primer/
•  RDFa core  desligado de XHTML = valido para a
priori para cualquier lenguaje de marcado (HTMLx,
SVG, etc.)

•  Compatible con RDFa 1.0
•  @prefix sustituye a @xmlns
•  @vocab define vocabulario por defecto (usado en

ausencia de un prefijo)

•  Se permite el uso de URIs absolutas en cualquier

elemento (no posible en RDFa 1.0)

20

Ventajas RDFa

•  Principales ventajas

-  Reutilización de datos a través de diferentes plataformas

-  Herramientas de extracción permiten combinar con RDF

-  Vocabularios modulares
-  Permite utilizar cualquier vocabulario/ontología

21

Microdata

22

Microdata

•  Editor’s draft: http://dev.w3.org/html5/md/
•  HTML Microdata
•  Parte de la especificación de HTML5
•  Compatible con otros formatos de datos (JSON,

RDF)

•  Objetivo: Proveer una manera sencilla de embeber

datos en documentos HTML

•  Idea: Anotar el contenido en HTML con etiquetas
procesables por aplicaciones externas (servicios,
crawlers, etc.)

•  Cómo: Añadiendo pares nombre-valor a los

elementos de la página

•  Apuesta inicial de schema.org

23

Microdata: ejemplo

<div itemscope>

<p>
My name is <span itemprop="name">Daniel</span>.
</p>
<p>
My research group is called
<span itemprop=”group">OEG</span>.
</p>
<p>
I work at <span itemprop=”workPlace">UPM</span>.
</p>

</div>

24

Microdata: elementos básicos

•  Microdata = grupo de pares nombre-valor
•  Grupos = items
•  Cada par nombre-valor = property
•  Para crear 1 item  atributo itemscope
•  Para añadir 1 propiedad  atributo itemprop
•  Valores propiedades:

-  Strings
-  URLs: a href, imgsrc
-  Date/Time: time  datetime

•  Las propiedades pueden formar grupos usando el

atributo itemscope en el elemento que define la propiedad

•  Permite asignar múltiples valores a las propiedades
•  Permite asignar múltiples propiedades a un valor

ejemplo

25

Microdata: ejemplos

•  URLs: a href, imgsrc
<div itemscope>
<img itemprop="image" src=”oeg-logo.png" alt=”OEG">
</div>
<div itemscope>
<a itemprop=”home" href=”http://www.oeg-upm.net/" alt=”OEG">
</div>

•  Date and time: time  datetime

<div itemscope>
<time itemprop=”birthday" datetime=”1982-09-20”>
September 20th 1982
</time>
</div>

26

Microdata: ejemplos

•  Agrupar propiedades usando itemscope

<div itemscope>

<p>
My name is <span itemprop="name">Daniel</span>
</p>
<p>
My research group is called
<span itemprop=”group” itemscope>

(<span itemprop=”location">Madrid</span>)
</span>
</p>

<span itemprop="name">Ontology Engineering Group</span>

</div>

27

Microdata: itemref

itemref permite asociar propiedades (no descendientes) a items

• 
•  Lista de IDs a asociar al item

<div itemscope itemref=”a b” id=”Daniel”></div>
<p id=”a”>Name: <span itemprop="name">Daniel</span>
</p>
<p id=”b”>Research group:
<span itemprop=”group” itemscope>

<span itemprop="name">Ontology Engineering Group</span>
(<span itemprop=”location">Madrid</span>)
</span>

</p>

28

Microdata typed items

•  Los ejemplos anteriores limitan la reutilización
•  Potencial de microdata: reutilización a través de

diferentes aplicaciones

•  Asignar tipos a los items a través de URLs
•  Atributo itemtype
•  Necesitamos vocabularios/schemas/ontologías
•  Ejemplo: Clase Person con props name y email

<div itemscope itemtype="http://schema.org/Person">
<p>
My name is <span itemprop="name">Daniel</span>.
</p>
<p>
My email is
<span itemprop=”email">[email protected]</span>.

</div>

29

Microdata DOM API

•  Permite el acceso programático
•  document.getItems(typeNames) para recuperar items

por tipo (todos si no se indica tipo). Ej:

var persons= document.getItems("http://schema.org/Person");
•  Item.properties para recuperar las propiedades. Ej:

var person = document.getItems("http://schema.org/Person") [0];
alert('Hello ' + person.properties['name'][0].itemValue + '!');

•  Item.properties.name para recuperar los nombres de

las propiedades

30

Microdata overview

•