Web semántica: Datos estructurados en HTML

Transcripción

1 Web semántica: Datos estructurados en HTML Daniel Vila Suero 17/10/2011 Ontology Engineering Group, Universidad Politécnica de Madrid Agradecimientos: Alex Stolz - UNIBW (Munich) por la información sobre GoodRelations

2 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

3 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

4 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

5 RDFa 5

6 RDFa RDF in HTML attributes Bridging the Human and Data Webs W3C Recommendation 2008: rdfa-syntax/ RDFa Primer: Especificado para XHTML 1.1, potencialmente válido para cualquier otra spec de HTML 6

7 RDFa BROWSER/MACHINE USER Fuente: RDFa primer 7

8 RDFa example All content on this site is licensed under <a rel="license" href=" a Creative Commons License </a> Fuente: RDFa primer 8

9 RDFa example <div> xmlns:dc=" <h2>the property="dc:title">the trouble with Bob</h2> trouble with Bob</h2> <h3>alice</h3> property="dc:creator">alice</h3>... </div> Fuente: RDFa primer 9

10 RDFa example <div xmlns:dc=" <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

11 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

12 RDFa: 1. Declarar y usar Se definen tantos namespaces como vocabularios a utilizar. Ej.: xmlns:dc=" * Va a ser sustituido 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

13 RDFa: 2. @typeof 13

14 RDFa: Define el recurso que va a ser Anotado (sujeto) 14

15 RDFa: Clasifica el recurso 15

16 RDFa: Propiedades utilizadas para los tipos de datos 16

17 RDFa: / Propiedades relacionales 17

18 RDFa example <div> xmlns:foaf=" about="#me" rel="foaf:knows"> <ul> <li> typeof="foaf:person"> <a <a property="foaf:name" href=" rel="foaf:homepage" href=" </li> </li> <li typeof="foaf:person"> <li> <a property="foaf:name" rel="foaf:homepage" href=" <a href=" </li> <li </li> typeof="foaf:person"> <li> <a property="foaf:name" rel="foaf:homepage" href=" </li> <a href=" </ul> </li> </ul> </div> Fuente: RDFa primer 18

19 RDFa Best practices (Hepp et. Al) 1. Usar un validador XHTML - XHTML Validator: 2. Usar un RDFa extractor para comprobar el marcado - Fuzz: 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

20 RDFa 1.1 Rich Structured Data Markup for Web Documents Working draft: RDFa 1.1 Primer: RDFa core desligado de XHTML = valido para a priori para cualquier lenguaje de marcado (HTMLx, SVG, etc.) Compatible con RDFa 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

21 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

22 Microdata 22

23 Microdata Editor s draft: 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

24 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

25 Microdata = grupo de pares nombre-valor Grupos = items Cada par nombre-valor = property Microdata: elementos básicos 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

26 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= alt= OEG"> </div> Date and time: time datetime <div itemscope> <time itemprop= birthday" datetime= > September 20 th 1982 </time> </div> 26

27 Agrupar propiedades usando itemscope Microdata: ejemplos <div itemscope> <p> My name is <span itemprop="name">daniel</span> </p> <p> My research group is called <span itemprop= group itemscope> <span itemprop="name">ontology Engineering Group</span> (<span itemprop= location">madrid</span>) </span> </p> </div> 27

28 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

29 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 <div itemscope itemtype=" <p> My name is <span itemprop="name">daniel</span>. </p> <p> My is <span itemprop= ">dvila@fi.upm.es</span>. </div> 29

30 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(" Item.properties para recuperar las propiedades. Ej: var person = document.getitems(" [0]; alert('hello ' + person.properties['name'][0].itemvalue + '!'); Item.properties.name para recuperar los nombres de las propiedades 30

31 Microdata overview Define una serie de atributos: - itemid - itemprop - itemref - itemscope - Itemtype Conjunto de items (grupos nombre-valor) Cada item: - Tipo: itemtype - ID: itemid - Lista de pares nombre-valor Nombre = propiedad Cada propiedad: 1..N valores Cada valor: 1 string o grupo de propiedades Estructura de árbol por defecto (permite estructura de grafo) 31

32 schema.org 32

33 Schema.org Google, Bing y Yahoo, Junio 2011 Colección de schemas (vocabularios) para anotar HTML de manera reconocible para motores de búsqueda. Resultado inmediato: Resultados de búsqueda enriquecidos Apuesta inicial por Microdata: - long term goal is to support a wider range of formats RDFa por ejemplo Esfuerzo por facilitar la introducción de datos estructurados en la Web de manera sencilla (buena documentación, ejemplos, etc.) Versión oficial en OWL: schemaorg.owl para ser usada con RDFa 33

34 Schema.org resultados Fuente: Schema.org workshop Kavi Goel 34

35 Schema.org resultados Fuente: Schema.org workshop Kavi Goel 35

36 Schema.org: Aplicaciones Mejoras en la búsqueda: - Bing Tiles, Google Rich Snippets, Yahoo enhanced results - Multitud de aplicaciones potenciales (diferentes vistas para diferentes tipos de recurso) Interoperabilidad entre aplicaciones - Compartir datos dentro de un mismo dominio - Navegación enriquecida (Agentes de usuario) 36

37 Schema.org ejemplo HTML original <div> <h1>avatar</h1> <div> Director: James Cameron (born August 16, 1954) </div> <span>science fiction</span> <a href="../movies/avatar-theatrical-trailer.html >Trailer</a> </div> 37

38 Schema.org ejemplo Marcar con tipo Movie <div itemscope itemtype =" <h1>avatar</h1> <div> Director: James Cameron (born August 16, 1954) </div> <span>science fiction</span> <a href="../movies/avatar-theatrical-trailer.html >Trailer</a> </div> 38

39 Schema.org ejemplo Marcar propiedades de película <div itemscope itemtype =" <h1 itemprop="name >Avatar</h1> <div> Director: James Cameron (born August 16, 1954) </div> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html itemprop="trailer >Trailer</a> </div> 39

40 Schema.org ejemplo Identificar director (item persona) <div itemscope itemtype =" <h1 itemprop="name >Avatar</h1> <div itemprop="director" itemscope itemtype=" Director: <span itemprop="name">james Cameron</span> (born <span itemprop="birthdate">august 16, 1954)</span> </div> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html itemprop="trailer >Trailer</a> </div> 40

41 Schema.org: Community building Blog oficial: Soporte: - (previo) - Recomendado: public-vocabs@w3.org mailing list (Recomendado) 41

42 Schema.org: Herramientas Validadores: Google Rich Snippet validator: webmasters/tools/richsnippets Generación de rich snippets: Plugins: - Wordpress: - Joomla extension - Drupal (work in progress) 42

43 W3C / SWIG Task forces Punto de unión W3C/WHAT-WG/Motores de búsqueda Web Schemas Task Force - Objetivo: Foro para la discusión acerca de vocabularios para datos estructurados en HTML - Resultados: Convergencia entre vocabularios, casos de uso, herramientas - Muy recomendable para interesados en desarrollos que incluyan datos estructurados en sus SI - public-vocabs@w3.org HTML Data Task Force - Objetivo: Análisis técnico relación Microdata/RDFa - Resultados: Propuesta de posibles mejoras traducción/ integración entre los dos formatos 43

44 Schema.rdfs.org Esfuerzo complementario por parte de la comunidad de Linked Data Integrar el trabajo previo de la comunidad de la Web Semántica OBJETIVOS: - Fuente de ejemplos y tutoriales acerca de marcado de datos - Mappings a otros vocabularios (DBPedia ontology) - Lista de herramientas y librerias - Schema.org en diferentes formatos (RDF/Turtle, CSV, etc.) 44

45 OGP 45

46 Open Graph Protocol Facebook utiliza Open Graph Protocol para permitir la integración de páginas Web en el grafo social Inicialmente para botón Like + social plugins: Nueva versión Beta anunciada en F

47 Open Graph basics Basado en RDFa Permite el enlazado de objetos (recursos, webs, etc.) formando un grafo Propiedades requeridas (en elemento meta) - og:title - og:type - og:image - og:url Multitud de propiedades opcionales (audio, descr.,etc ) <html prefix="og: <head> <title>the Rock (1996)</title> <meta property="og:title" content="the Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content=" /> <meta property="og:image" content=" /> </head> </html> 47

48 Permite enlazar las acciones de los usuarios en una cierta aplicación con FB (social graph) Usuarios + acciones (Verbos) + Objetos (Recursos) OG Beta Usuario A corre Recorrido X Usuario B lee Libro X Social Channels: News Feed, Ticker, Timeline TUTORIAL: opengraph/tutorial/ 48

49 OG Beta Fuente: 49

50 OG Funcionamiento Fuente: 50

51 Good relations 51

52 Good Relations Ontología/vocabulario enfocada a e-commerce Semantic SEO Objetivo: Vocabulario para describir productos/ servicios enfocado a motores de búsqueda, mobile apps, browser ext. Quién lo usa? - Google, Yahoo! - BestBuy - sears.com - kmart.com - Renault - Volkswagen - 10,

53 Good Relations Dad 53

54 Good Relations Apoyado por los grandes motores de búsqueda resultados enriquecidos Extenso número de clases y propiedades Hasta el momento enfocado a RDFa Actualmente enfoque hacia Microdata y schema.org Formatos principales: - RDFa - Microdata - RDF/Turtle - JSON Claves del éxito: - Muy buena documentación - Multitud de vías de soporte a los desarrolladores - Simplicidad 54

55 Good Relations: Microdata+schema.org Escenario 1: Uso de GR para extender schema.org <div itemscope itemtype=" itemid="#offer"> <link itemprop=" href=" />  Delivery costs to <div itemscope itemprop=" v1#haspricespecification" itemtype=" v1#deliverychargespecification"> <meta itemprop="eligibleregions" content="de">germany: <meta itemprop="hascurrency" content="eur">euro: <span itemprop="hascurrencyvalue">10.00</span> <link itemprop="appliestodeliverymethod" href=" />(via UPS) </div> </div> Escenario 2: Uso de schema.org para extender GR 55

56 Good Relations: Soporte plataformas Magento: - Google Rich Snippet support - Source code: Joomla/Virtuemart: - Google Rich Snippet support - Source code: WordPress / WP 4 ecommerce: - Google Rich Snippet support - Source code: Mercurial repository at wordpress.org Y muchas más: Shop_extensions 56

57 Product ontology Alrededor de 300,000 definiciones de tipos de productos y servicios Útil para extender schema.org y GoodRelations Ejemplo: <div itemscope itemtype=" <link itemprop=" href=" />  </div> 57

58 Product ontology: Idea Extraído de Wikipedia Si existe una entrada en existe el producto USO: - Se transforma en - Gracias a Wikipedia búsqueda productos en múltiples idiomas 58

59 Caso de uso: Volkswagen Volkswagen/ Contextual Search for Volkswagen and the Automotive Industry Cambio de paradigma en la manera de usar/compartir datos en la Web por parte de VW Solr + RDFa + Ontologías + StructSWF Conclusiones: - Poco valor en desarrollar un esquema cerrado/propietario para Solr - Más valor en reutilizar vocabularios Web adaptados a sus necesidades - Desarrollo y publicación de nuevos vocabularios y términos que no estén cubiertos - Permitir la anotación y enriquecimiento con datos estructurados sobre la web desestructurada original 59

60 VW: Diseño de la solución 1. Annotate HTML content with RDFa using relevant vocabularies, enriching existing unstructured content 2. Transform existing product data into RDF using relevant vocabularies 3. Extract RDF from RDFa using Nutch and merge with Product Data 4. Reason over the merged dataset 5. Post complete dataset to StructWSF (Solr/SPARQL wrapper) 6. For syntactic search, use StructWSF search endpoint 7. For SPARQL query, use SPARQL endpoint 60

61 Caso de uso: Volkswagen 61

62 VW: Vocabularios Reutilizados: - Dublin Core - Good Relations - Vehicle Sales Ontology - Ontology for Innovation Car Options Ontology: - generic, industry wide to describe models, trims, derivatives, components and component compatibility Volkswagen Vehicles Ontology to describe Volkswagen specific concepts 62

63 VW: Beneficios Interfaz estándar entre contenido y datos accesible a diferentes tipos de desarrollador (dentro y fuera de la organización) Separación de responsabilidades entre información y aplicación Aumenta el valor, la reutilización y accesibilidad de los datos Posibilidades muy potentes de federación/ distribución 63

64 Conclusiones Los datos estructurados en la Web son una realidad Microdata ofrece una menor barrera de entrada pero RDFa cubre más casos de uso Se trabaja en la dirección de integración entre formatos La anotación usando schema.org y/o Goodrelations tiene efectos inmendiatos en la búsqueda/posicionamiento Multitud de espacio para la innovación comunicación de datos/metadatos entre aplicaciones (ej. OG Beta) 64