시맨틱 웹과 (X)HTML

시맨틱 웹과 (X)HTML 마이크로포맷과 RDFa 김보람 jgkim@jayg.org October, 2009

지금의 웹은 어떤 모습일까요? Margo C, http://www.flickr.com/photos/margolove/3139034331/

Web of Documents: 문서의 웹 Matt DeTurck, http://www.flickr.com/photos/dalboz17/1059635690/

문서에는 많은 데이터가 들어있죠. captcreate, http://www.flickr.com/photos/27845211@N02/2718955926/

e-Commerce

Reviews

Events

그리고 문서는 만들기 쉽습니다. Hilde Skjølberg, http://www.flickr.com/photos/hebe/2944073997/

Blogs

Microblogs

Portals

Mobile

하지만 문서는 구조화된 형식이 아니예요. Paul, http://www.flickr.com/photos/paopix/2413501011/

Michael Hausenblas, Ivan Herman, and Ben Adida, http://www.w3.org/2008/Talks/1026-ISCW-RDFa/RDFa-ISWC08.html

우리가 머리를 써야 하는 이유죠. Martin Gommel, http://www.flickr.com/photos/kwerfeldein/2104791931/

Trip Organization

Social Networks

기계의 힘을 빌려보려 노력하고는 있습니다. Don Solo, http://www.flickr.com/photos/donsolo/2617064975/

Google squared

네이트 시맨틱 검색

Gisela Giardino, http://www.flickr.com/photos/gi/281067152/

”The Semantic Web is a Web of Data.” Gisela Giardino, http://www.flickr.com/photos/gi/281067152/

”The Semantic Web is an extension of the current Web and not its replacement.” Jes, http://www.flickr.com/photos/mugley/2219330935/

RSS/Atom Formats Oliver Hartmann, http://www.flickr.com/photos/ollyhart/123420044/

데이터를 만드는 일은 아직 어렵습니다. Zyada, http://www.flickr.com/photos/zyada/176234120/

문서의 웹에 메타데이터를 더하면? Tiago Ribeiro, http://www.flickr.com/photos/fixe/3415776837/

어려움 없이 메타데이터를 (X)HTML 문서에 더할 수 있어야 함 (X)HTML 문서는 잘 정의된 제약(DTD, Schema 등)에 대해 유효 한(Valid) 상태를 유지해야 함 필요한 경우 더해진 (메타 데이터는 추가적인 처리를 위해 DOM 트 리에서 접근 가능해야 함 DRY (Don’t Repeat Yourself): 가능하면 “눈으로 볼 수 있 는” (X)HTML 컨텐츠로 (메타 데이터를 기술해야 함 다양한 데이터의 매쉬업이 가능해야 함 Tiago Ribeiro, http://www.flickr.com/photos/fixe/3415776837/

(X)HTML의 <meta>와 <link> 태그

<html> <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> <link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" /> </head> . . . </html>

<html> <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> <link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" /> </head> . . . </html> Violates DRY!

마이크로포맷은 다양한 데이터 타입을 위한 중앙 집중형의 데이터 포맷 마이크로포맷은 재사용 가능한 시맨틱 데이터 블록을 정의하기 위해 HTML 문서에 삽입할 수 있는 어트리뷰트와 클래스 이름의 패턴 마이크로포맷은 데이터의 인코딩을 위해 이미 존재하는 (X)HTML의 어트리뷰트를 (재)사용 개인정보: hCard 일정: hCal 소셜 네트워크: XFN 리뷰: hReview 라이센스: rel-License 폭소노미: rel-tag

<html> <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> <link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" /> </head> <body> ... <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"> » CC Attribution-ShareAlike</a> ... </body> </html> rel-license

<html> One DRY Document <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> <link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" /> </head> <body> ... <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"> » CC Attribution-ShareAlike</a> ... </body> </html> rel-license

<html> <head> ... </head> <body> ... <div class=”vcard”> <img class="photo" src=". . ." alt="" /> <a class="fn url" href=". . .">James G. Kim</a>, <div class="tel"><span class="type">Mobile</span> +82-11-733-9604</div> </div> ... </body> </html> hCard

... <div> Blogroll: <a href="http://jane-blog.example.org/" rel="sweetheart date met">Jane</a>, <a href="http://dave-blog.example.org/" rel="friend met">Dave</a>, <a href="http://darryl-blog.example.org/" rel="friend met">Darryl</a>, <a href="http://www.metaﬁlter.com/">MetaFilter</a>, <a href="http://james-blog.example.com/" rel="met">James Expert</a> </div> ... XFN (XHTML Friends Network)

relationship category XFN values friendship (at most one): friend acquaintance contact physical: met professional: co-worker colleague ... geographical (at most one): co-resident neighbor family (at most one): child parent sibling spouse kin <div> romantic: muse crush date sweetheart identity: me Blogroll: <a href="http://jane-blog.example.org/" rel="sweetheart date met">Jane</a>, <a href="http://dave-blog.example.org/" rel="friend met">Dave</a>, <a href="http://darryl-blog.example.org/" rel="friend met">Darryl</a>, <a href="http://www.metaﬁlter.com/">MetaFilter</a>, <a href="http://james-blog.example.com/" rel="met">James Expert</a> </div> ... XFN (XHTML Friends Network)

<a rel="me" href="http://twitter.com/glennjones">Twitter</a>

otherme http://socialgraph.apis.google.com/otherme?q=http://www.glennjones.net/&pretty=1 lookup http://socialgraph.apis.google.com/lookup?q=http%3A%2F%2Fwww.glennjones.net %2F&fme=1&edi=0&edo=1&pretty=1&jme=1 © Glenn Jones, http://www.alistapart.com/articles/discovering-magic/

마이크로포맷은 일반적인 문제에만 적용 가능 여러 마이크로포맷을 함께 사용하기 어려움 (X)HTML 문서에 더해지는 메타데이터는 외부에서 정의된 어휘를 사용할 수 있어야 함 한 문서에서 여러 어휘를 함께 사용할 수 있어야 함

”The vision of the Semantic Web is to extend principles of the Web from documents to data.” lee, http://www.flickr.com/photos/leecullivan/141114012/

Linked Data

Ontology as a Conceptual Model > RDF Matilde Zacchigna, http://www.flickr.com/photos/lunadirimmel/1411913488/

두 가지 방법 문서에서 구조를 추출, RDF로 변환: GRDDL 문서에 RDF 문장을 직접 더함: RDFa

GRDDL: Gleaning Resource Descriptions from Dialects of Languages 원본 문서 GRDDL-Aware 에이전트 GRDDL 변환 Dan Connolly and Harry Halpin, http://www.w3.org/2001/sw/grddl-wg/tut7/gtut

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head proﬁle="http://gmpg.org/xfn/11"> <title>Jane's XFN List</title> </head> <body> <h1>Jane's <abbr title="XHTML Friends Network">XFN</abbr> List</h1> <ul class="xoxo"> <li class="vcard"><a href="http://peter.example.org" class="url fn" » rel="met collegue friend">Peter Smith</a></li> <li class="vcard"><a href="http://john.example.org" class="url fn" » rel="met">John Doe</a></li> <li class="vcard"><a href="http://paul.example.org" class="url fn" » rel="met">Paul Revere</a></li> </ul> </body> XFN 문서 </html>

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> . @prefix foaf: <http://xmlns.com/foaf/0.1/> . @prefix h: <http://www.w3.org/1999/xhtml> . @prefix xfn: <http://gmpg.org/xfn/11#> . [] foaf:homepage <http://www.w3.org/2001/sw/grddl-wg/doc29/janefriends.html>; xfn:friend [ foaf:homepage <http://peter.example.org> ]; xfn:met [ foaf:homepage <http://peter.example.org> ], [ foaf:homepage <http://john.example.org> ], [ foaf:homepage <http://paul.example.org> ]. XSLT 문서

RDFa: Resource Description Framework in attributes (X)HTML 문서에서 메타데이터를 표현하기 위한 새로운 속성 RDF triples을 (X)HTML 문서 속에 표현하기 위한 방법 Serialization Format

<html> <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> </head> <body> ... <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"> » CC Attribution-ShareAlike</a> ... </body> </html> rel-license

<html> <head> <title>Semantic Web and (X)HTML</title> <meta name="author" content="James G. Kim" /> <meta name="created" content="2009-10-31" /> </head> <body> ... <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"> » CC Attribution-ShareAlike</a> ... </body> </html> RDFa

. . . <img src="image1.png" rel="license" href="http://creativecommons.org/licenses/ » by-sa/3.0/" /> <img src="image2.png" rel="license" href="http://creativecommons.org/licenses/ » by-nc-nd/3.0/" /> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . <meta name="author" content="Mark Birbeck" /> <meta name="created" content="2009-05-01" /> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

<html> <head> <title>RDFa: Now everyone can have an API</title> </head> <body> <h1>RDFa: Now everyone can have an API</h1> Author: <em property="author" content="Mark Birbeck"> Mark Birbeck</em> Published: <em property="created" content="2009-05-09"> May 14th, 2009</em> </body> </html> © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

<html xmlns:dc="http://purl.org/dc/terms/"> <head> <title>RDFa: Now everyone can have an API</title> </head> <body> <h1>RDFa: Now everyone can have an API</h1> Author: <em property="dc:creator" content="Mark Birbeck"> Mark Birbeck</em> Published: <em property="dc:created" content="2009-05-09"> May 9th, 2009</em> </body> </html> © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . Author: <em property="dc:creator">Mark Birbeck</em> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . <span property="dc:created" content="2009-05-14">May 14th, 2009</span> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . <img src="image1.png" property="dc:created" content="2009-03-22" /> <img src="image2.png" property="dc:created" content="2009-05-01" /> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . <img src="image1.png" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" property="dc:created" content="2009-05-01" /> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

. . . <a about="http://www.slideshare.net/ » fabien_gandon/rdfa-in-a-nutshell-v1" rel="license" href="http://creativecommons.org/licenses/by/2.5/" property="dc:creator" content="Fabien Gandon"> <img src="http://i.creativecommons.org/l/by/2.5/80x15.png" /> </a> . . . © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

... <div about="http://www.slideshare.net/fabien_gandon » /rdfa-in-a-nutshell-v1"> <h1>RDFa in a Nutshell</h1> <ul> <li>Author: <em property="dc:creator">Fabien Gandon</em></li> <li>Created: <em property="dc:created" content="2007-01-01">Jan 1st, 2007</em></li> <li>License: <a rel="license" href="http://creativecommons.org » /licenses/by/2.5/"><img src="http://i.creativecommons.org » /l/by/2.5/80x15.png" /></a></li> </ul> </div> ... © Mark Birbeck, http://www.alistapart.com/articles/introduction-to-rdfa/

References Semantic Web and microformats http://www.w3.org/Talks/2009/1026-Various-Privacy-Vienna/ Discovering Magic http://www.alistapart.com/articles/discovering-magic/ Introduction to RDFa http://www.alistapart.com/articles/introduction-to-rdfa/ RDFa Tutorial http://www.w3.org/2008/Talks/1026-ISCW-RDFa/RDFa-ISWC08.html Deploying Web-scale Mash-ups by Linking Microformats and the Semantic Web http://www.w3.org/2001/sw/grddl-wg/tut7/gtut

시맨틱 웹과 (X)HTML

0 comments

Notes on slide 1

3 Favorites