Embed Size (px)
DESCRIPTION
이 슬라이드는 페이스북의 오픈 그래프 프로토콜과 트위터의 어노테이션을 설명하며, 이러한 서비스들이 어떻게 소셜 시맨틱 웹과 결부될 수 있는지를 보여주고 있다.
Citation preview
1
페이스북과 트위터에서의소셜 시맨틱 웹
이명진연세대학교 지능웹비즈니스연구실
2
소개
이명진 공학박사 연세대학교 정보산업공학과
지능웹비즈니스연구실 집필 서적
• “ 자바 개발자를 위한 XML 프로그래밍”• “ 소설같은 XML 과 XML Web Services”• “ 소설같은 JSP”
3
소개
연세대학교 지능웹비즈니스연구실 담당 교수님 : 김우주 교수님 연구분야
• 시맨틱 웹 , web 2.0, 웹서비스 , 인공지능 , 지능형 에이전트 등의 기반 기술연구 .
• 정보공학 , 경영과학 , 데이터 마이닝 , 의사결정 공학등의 최신 경영공학 연구 .
• e- 비즈니스 , 전자상거래 , 위치기반시스템 , 유비쿼터스 컴퓨팅 , 지식경영 시스템연구 .
• 비즈니스 인텔리전스 , 그리고 전통적인 경영이슈 등의 응용 분야 연구 .
http://iwec.yonsei.ac.kr/index.html
4
목차
소셜 시맨틱 웹
페이스북의 소셜 시맨틱 웹
트위터의 소셜 시맨틱 웹
5
소셜 시맨틱 웹
6
소셜 웹
정의 웹을 통해서 어떻게 사람들이 서로간에 교재하고
소통하는지를 표현하는 웹 환경 소셜 웹에서 개인을 표현하는 특성
신분 : who are you? 명성 : what do people think you stand for? 존재 : where are you? 관계 : who are you connected with? who do you
trust? 소속 : how do you organize your connections? 대화 : what do you discuss with others? 공유 : what content do you make available for others
to interact with?
7
대표적인 소셜 웹 사이트
페이스북 대표적인 소셜 네트워크 서비스 현재 5 억명 이상이 이용 2010 년 3 월 주단위 방문자 수로 구글을 추월함 하루 10 테라바이트 정보가 생성
트위터 소셜 네트워크에 초점을 맞춘 140 글자로
제한된 마이크로 블로그 서비스를 제공 하루 7 테라바이트 정보가 생성
8
시맨틱 웹
정의 웹에 존재하는 정보의 의미를 기계가 이해할 수
있도록 만드는 기술적 웹 환경 “ 기계에 의해 직접적이나 간접적으로 처리되어질 수
있는 데이터의 웹” by Tim Berners-Lee
구성 기술 URI, XML, Namespace RDF, RDFS, OWL Rule and SPARQL Proof, Trust, Cryptography
9
시맨틱 웹의 스택
10
링크드 데이터
정의 웹에서 URI 를 통해 데이터를 공개 , 공유 및 서로
연결하기 위한 방법
링크드 데이터의 디자인 이슈1. 사물을 식별하기 위해 URI 를 사용할 것2. HTTP URI 를 사용함으로써 이러한 사물이 사람이나
기계에 의해 발견되고 참조되어 질 수 있도록 할 것3. RDF/XML 과 같은 표준화된 형식을 사용하여
개체에 대한 정보를 제공할 것4. 다른 것들과의 연결을 포함할 것
11
데이터 공유를 위한 어휘들
FOAF 다른 사람과의 관계를 기술하기 위한 어휘
SIOC 블로그나 포럼과 같이 웹 환경에서 작성된 글들의 구조를
표현하기 위한 의미적 방식으로 커뮤니티를 서로 연결하기 위한 어휘
SKOS 구조화된 어휘를 표현하기 위해 만들어진 형식적 언어
RDFa 웹 문서에 풍부한 메타데이터를 기술하기 위한 형식
Microformat HTML 과 XHTML 을 사용해서 기존의 컨텐츠를 재사용하기 위한
어휘
12
소셜 시맨틱 웹
정의 사람들의 기여와 참여로 유용하고 더 나은
정보를 제공하는 것이 가능한 협업적 지식 시스템의 웹 환경
기술적 정의 시맨틱 웹 , 소셜 소프트웨어 , 웹 2.0 의
기술과 전략 , 그리고 방법론의 조합으로 만들어지는 웹
13
소셜 시맨틱 웹의 어휘 집합
14
페이스북의 소셜 시맨틱 웹
15
소셜 그래프
정의 페이스북에 의해 제공되는 소셜 네트워크
서비스의 사용자들 사이에 존재하는 관계를 나타내는 네트워크
모든 개인적 관계를 나타내는 사회 관계적 도표
처음에는 페이스북에 국한되었으나 현재 인터넷에 존재하는 모든 사용자들에 대한 개념으로 확대됨
16
소셜 그래프의 변화
17
오픈 그래프 프로토콜
정의 웹 페이지를 하나의 객체로 나타내어 소셜
그래프 내에 통합하기 위한 방법 개발 상의 단순함을 추구
표현 방법 웹 페이지에 메타데이터를 추가함으로써 웹
페이지를 그래프 객체로 만듦 RDFa 의 단순한 형태
18
우리는 무엇을 해야 하는가 ?
1. 웹 페이지에 메타데이터를 기술 이로써 그래프 내에서 객체로 취급될 수 있는
형태로 변화
2. Like 버튼의 삽입 그래프에 삽입될 수 있는 여지를 남김
3. 사용자의 광클 해당 사용자의 소셜 그래프에 구성 객체로 연결
19
RDFa
정의 XHTML 형태의 속성을 이용하의 웹 문서 내에
메타데이터를 삽입하기 위한 W3C 권고안 이는 XHTML 문서 내에 삽입된 RDF 트리플로 사용될 수
있음 RDFa 의 속성들
about 과 src – 메타데이터가 나타내는 것에 대한 URI rel 과 rev – 다른 자원과의 관계를 기술 href 와 resource – 연결된 자원을 기술 property – 속성을 지정 content – 태그의 내용보다 우선시 되는 값 삽입 datatype – 데이터타입을 지정 typeof – RDF 타입을 지정
20
OGP 의 메타데이터
기본 메타데이터 og:title – 객체의 제목 , 예 , "The Rock". og:type – 객체의 타입을 지정 , 예 , "movie". og:image – 그래프 내에서 객체를 나타내는 그림을 삽
입 . og:url – 그래프에서 ID 로 사용될 수 있는 기준 URL 을
기술 , 예 , "http://www.imdb.com/title/tt0117500/".
선택적 메타데이터 og:description – 객체에 대한 설명을 기술 . og:site_name – 특정 사이트의 일부일 경우 사이트의
이름을 명시 . 예 , "IMDb".
21
기본 메타데이터의 예
1. <html xmlns:og="http://ogp.me/ns#">
2. <head>
3. <title>The Rock (1996)</title>
4. <meta property="og:title" content="The Rock" />
5. <meta property="og:type" content="movie" />
6. <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
7. <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
8. ...
9. </head>
10. ...
11. </html>
22
위치 지정을 위한 메타데이터
좌표 기술을 위한 메타데이터 og:latitude - e.g., "37.416343". og:longitude - e.g., "-122.153013".
주소를 기술하기 위한 메타데이터 og:street-address - e.g., "1601 S California
Ave“ og:locality - e.g, "Palo Alto“ og:region - e.g., "CA“ og:postal-code e.g., "94304“ og:country-name - e.g., "USA"
23
연락 정보를 위한 메타데이터
연락 정보 기술을 위한 메타데이터 og:email - e.g., "[email protected]". og:phone_number - e.g., "+1-650-123-
4567". og:fax_number - e.g., "+1-415-123-
4567".
24
객체 타입 지정을 위한 메타데이터 og:type 속성
그래프 내에서 표현되어질 객체의 특정 타입을 지정
<meta property="og:type" content="product" />
지원되는 타입 http://opengraphprotocol.org/#types
참조
25
소셜 플러그인
정의 HTML 웹 페이지에 코드를 삽입함으로써 페이스북의 소셜
서비스를 이용할 수 있는 추가 프로그램
소셜 플러그인의 종류 Like Button Activity Feed Recommendations Like Box Login Button Facepile Comments Live Stream
26
Like 버튼
기능 페이스북에서 친구들과 특정 문서를 공유하기
위한 기능을 제공 사용자가 특정 사이트의 Like 버튼을 클릭하
면 , 해당 사이트로의 링크를 포함하여 사이트의 정보가 사용자의 친구들에 노출됨
URL http://
developers.facebook.com/docs/reference/plugins/like
27
Like 버튼 만들기
28
사용자의 광클
29
시맨틱 웹에서 OGP 의 의미
RDF 데이터 모델 OGP 의 메타데이터는 “ URI – OGP 의 속성 – 값”
형태로 SPO 의 구조를 사용 따라서 완전한 RDF 의 모델로 취급될 수 있음
시맨틱 웹에서의 클래스와 개체 하나의 웹 페이지는 OGP 의 type 속성에 의해
그것의 타입을 기술 클래스에 해당 또한 하나의 웹 페이지는 그래프에서 하나의
객체로 취급 클래스의 개체 (individual) 에 해당
30
트위터의 소셜 시맨틱 웹
31
트위터의 어노테이션
기능 트위터에 메시지를 작성할 때 메시지에 대한
구조화된 메타데이터를 첨부하는 것
특징 JSON 이나 XML 형태로 표현되어짐 어떤 메타데이터를 작성할 것인가는 작성자의
의도에 따라 달라질 수 있음• 단 , 권장하는 메타데이터의 종류가 존재
타입과 속성으로 구성
32
트위터 어노테이션의 형태
타입 모든 어노테이션에는 하나 이상의 타입이 존재 타입은 하나 이상의 속성과 값의 쌍으로 구성
어노테이션 정보의 포함을 위해 한 메시지의 총 용량을 512 bytes 로 확장
하지만 , 웹에서 표현되는 방식은 이전과 동일 140 글자의 제한을 그대로 유지
33
어노테이션의 작성
JSON
Simple Format
34
트위터 어노테이션의 예
35
트위터 어노테이션 실습
URL http://r.github.com/annotationsformatt
er/
36
어노테이션을 위한 속성
공통 속성 title – 어노테이션의 제목 image – 표현될 그림을 지정 url – 어노테이션을 클릭했을 때 보여질 URL
어토테이션을 위한 타입 webpage, place, review, song, movie, tvshow,
book, product, stock, offer, topic, event http://
dev.twitter.com/pages/annotations_overview
37
어노테이션과 시맨틱 웹
어노테이션 타입 온톨로지의 클래스
38
어노테이션과 시맨틱 웹
시맨틱 웹의 자원과 연결
39
결론
페이스북의 오픈 그래프 프로토콜 하나의 웹 페이지를 하나의 소셜 객체로써
사용자들과의 그래프 형태로 제공하기 위한 방법
트위터의 어노테이션 하나의 트위터 메시지를 소셜 객체로써 활용
소셜 시맨틱 웹에서의 관점 사용자들의 사회 관계 활동을 기반으로 기계가 처리할
수 있는 메타데이터가 만들어지고 , 이를 활용하여 보다 사용자 중심의 서비스를 제공하는 것이 그 목적
40
저는요…
E-Mail [email protected]
Blog http://www.semantics.kr/
Twitter http://www.twitter.com/MyungjinLee
Facebook http://www.facebook.com/mjinlee
SlideShare http://www.slideshare.net/onlyjiny
![[부안스마트농업반 마무리] 페이스북과 페이지 운영방안 총정리_140911](https://img.pdfslide.net/doc/110x75/547a078cb4af9fb9158b4a01/-140911.jpg)
![위치기반 소셜 네트워킹_서비스[3]](https://img.pdfslide.net/doc/110x75/55935bb31a28ab24478b462b/-355935bb31a28ab24478b462b.jpg)
![[Dmc] 소셜 미디어 이용실태](https://img.pdfslide.net/doc/110x75/5582ebf1d8b42a26168b4716/dmc-5582ebf1d8b42a26168b4716.jpg)
