Microformats

Web2hub wiki

microformats가 무엇인가?

microformats에 관한 가장 인기있는 정의 중 하나는 다음과 같다.

simple conventions for embedding semantics in HTML to enable decentralized development. -- Microformats Wiki MainPage

즉, microformats은 HTML에 semantics를 포함시키기 위한 간단한 규약들의 모음이라고 할 수 있다.

예를 들어 블로그리스트(블로그롤)에 '철수'라는 친구의 블로그를 등록시킨다고 했을 때 기본적인 HTML은 다음과 같다.

<a href="http://choelsoo-blog.example.org/">철수</a>

하지만 이것은 철수와 나와의 관계라는 의미를 표시하지는 못한다. microformats 중 하나인 XFN (XHTML Friends Network)에서는 rel attribute를 이용하여 다음과 같이 사회적 관계를 하이퍼링크에 추가할 수 있다.

<a href="http://choelsoo-blog.example.org/" rel="friend met">철수</a>

또 다른 예로 ...

이와 같이 XHTML의 표준문법을 이용하여 특정한 영역의 데이터에 의미를 부여할 수 있는 방법을 제공하는 것이다. 그렇다면 microformats이 왜 필요하고 어디에 적용될 수 있는지 보다 명확한 정의를 살펴보자.

simple conventions
for embedding semantic markup

for a specific problem domain

in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML

that normalize existing content usage patterns
using brief, descriptive class names
often based on existing interoperable standards
to enable decentralized development

of resources, tools, and services
-- Microformats Wiki MainPage

필요성 : HTML에 의미를 포함시키는 방법이 규격화되어 machine이 필요한 정보를 끌어내는데 도움을 줄 수 있다. 또한 서비스나 툴들을 분산해서 개발할 수 있다. (?)
적용대상 : XHTML/XML 문서, Atom/RSS feeds, "plain" XML
적용범위 : 특정한 문제 영역들 (사회적 관계, 인적사항, 일정, 리뷰, 인용 등)

microformats의 등장배경

microformats이 등장하게 된 것은 매우 현식적인 요구에 의해서이다. 블로그가 인기를 끌면서 블로거들은 다른 블로거들의 리스트(블로그롤)을 만들면서 그들과의 관계(만난사람, 친구, 가족, 동료 등)를 표시하려고 노력하였다. 이러한 욕구에 영감을 얻은 세 사람(Tantek Çelik, Eric Meyer, Matthew Mullenweg)은 웹 상에서 인간관계를 표현할 수 있는 쉽고 통일된 방법으로 최초의 microformat인 XFN을 디자인하기 시작하였다. 이 과정에서 XHTML Meta Data Profile들을 위한 일반적인 포맷인 XMDP를 만들고 이러한 일들을 담당하는 GMPG를 결성하였으며 마침내 2003년 12월 XFN을 공개적으로 오픈하였다. 이후 microformats의 유용성을 이해하게 되면서 rel-license, XOXO, hCard, hCalendar 등과 같은 다양한 microformat들이 개발되었고 현재 많은 새로운 microformat들이 제안되어 Draft나 논의 단계에 들어가 있다. 좀 더 자세한 등장배경과 역사는 다음을 참조.

microformats의 design principles

solve a specific problem
start as simple as possible
solve simpler problems first
make evolutionary improvements

design for humans first, machines second
be presentable and parsable
visible data is much better for humans than invisible metadata
adapt to current behaviors and usage patterns, e.g. (X)HTML, blogging
ease of authoring is important

reuse building blocks from widely adopted standards
semantic, meaningful (X)HTML
existing microformats
well established schemas from interoperable RFCs

modularity / embeddability
design to be reused and embedded inside existing formats and microformats

enable and encourage decentralized and distributed development, content, services
explicitly encourage the original "spirit of the Web"

-- the microformats principles

microformats의 예들

Summary

Specifications

hCalendar : 일정이나 이벤트
hCard : contact 정보
rel-license : content license
rel-nofollow :
rel-tag : tag (keyword)
!VoteLinks
XFN (XHTML Friends Network) : 인간관계
XMDP (XHTML Meta Data Profiles) : meta data profile
XOXO (Extensible Open XHTML Outlines) : 개요(outline)

Drafts

adr
geo
hReview
rel-directory
rel-enclosure
rel-payment
Robots Exclusion
xFolk
rel-home
hAtom

XFN (XHTML Friends Network)

하이퍼링크에 rel 속성을 사용하여 다른 블로그들, 링크들, 페이지들의 저자와의 인간관계를 나타낸다. 예를들어 만난 적이 있고 아는 사이인 ABC라는 사람의 블로그를 링크할 때 다음과 같이 할 수 있다.

<a href="http://abc-blog.example.org/" rel="met acquaintance">ABC</a>

XFN을 사용하는 링크들은 관계에 따라 특정한 스타일을 적용하여 차별적인 표현이 가능하다. 예를 들어 CSS2.1의 attribute sector syntax에 따라 다음과 같이 스타일을 지정하였다면

a[rel~="friend"] {font-style: italic;}
a[rel~="family"] {font-weight: bold;}

친구들의 링크는 이탤릭으로, 가족들의 링크는 굵은 글씨로 구별하여 표시된다. 또한 XFN이 대중적으로 사용이 된다면 블로그들을 분석하여 블로거들 사이의 관계를 그래프로 나타내 주는 소셜 소프트웨어도 충분히 가능하다.

다음은 가능한 XFN value들의 리스트이다.

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
romantic	muse crush date sweetheart
identity	me

XFN Creator를 이용하면 XFN가 포함된 하이퍼링크를 자동으로 만들어 낼 수 있다.

브라우저나 검색엔진이 웹페이지가 XFN을 지원함을 나타내기 위해서는 페이지의 <head> 태그에 다음과 같이 profile 속성을 지정한다.

<head profile="http://gmpg.org/xfn/11">

방문자에게 XFN이 지원됨을 알리기 위해서는 버튼을 아래의 HTML 코드로 추가하면 된다.

<a href="http://gmpg.org/xfn">
 <img src="xfn-btn.gif" alt="XFN Friendly" />
</a>

Links

hCard

사람이나 회사, 기관 등의 contact 정보를 나타내는 포맷으로 IETF의 vCard standard (RFC2426)와 1:1 대응이 되는 XHTML 버전이다. vCard standard는 이미 많은 프로그램에 구현되어 사용되고 있다. (예. Apple's "Address Book") hCard는 vCard와 1:1 대응되는 XHTML 형식을 제공함으로써 로봇이나 aggregator들이 이러한 정보를 쉽게 검색하고 자동으로 vCard 형식으로 변환하여 다양한 vCard 프로그램이나 서비스에 사용할 수 있도록 해 준다.

Example
Sample vCard

BEGIN:VCARD
VERSION:3.0
N:한;재선
FN:한재선
URL:http://nclab.kaist.ac.kr/google
ORG:GoogleSIG
END:VCARD

대응하는 hCard

<div class="vcard">
 <a class="url fn" href="http://nclab.kaist.ac.kr/google">한재선</a>
 <div class="org">GoogleSIG</div>
</div>

브라우저 출력

한재선

hCard에 사용되는 perperty list (()속은 sub-property)

fn, n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix), nickname, sort-string
url, email (type, value), tel (type, value)
adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value), label
geo (latitude, longitude), tz
photo, logo, sound, bday
title, role, org (organization-name, organization-unit)
category, note
class, key, mailer, uid, rev

Links

hCalendar

일정이나 이벤트 정보를 나타내는 포맷으로 IETF의 iCalendar standard (RFC2445)와 1:1 대응이 되는 XHTML 버전이다. iCalendar standard는 이미 광범위하게 채택되어 사용되고 있다. (예. Apple's "iCal") hCalendar는 iCalendar와 1:1 대응되는 XHTML 형식을 제공함으로써 로봇이나 aggregator들이 이러한 정보를 쉽게 검색하고 자동으로 iCalendar 형식으로 변환하여 다양한 iCalendar 프로그램이나 서비스에 사용할 수 있도록 해 준다.

Example
Sample event in iCalendar

BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://www.web2con.com/
DTSTART:20051005
DTEND:20051008
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel\, San Francisco\, CA
END:VEVENT
END:VCALENDAR

대응하는 hCalendar

<span class="vevent">
 <a class="url" href="http://www.web2con.com/">
  <span class="summary">Web 2.0 Conference</span>: 
  <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
  <abbr class="dtend" title="2005-10-08">7</abbr>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </a>
</span>

브라우저 출력

Web 2.0 Conference: October 5-7, at the Argent Hotel, San Francisco, CA

Links

rel-license

하이퍼링크에 rel="license"를 추가하여 그 링크가 가리키는 곳이 현재 페이지의 라이선스임을 나타낸다. 예를 들어 어떤 페이지에 다음과 같은 하이퍼링크가 있다면

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

이 페이지는 Creative Commons 2.0 Attribution Required license를 따름을 나타낸다. 만약 이 페이지에 다음의 하이퍼링크가 함께 있다면

<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="license">Apache 2.0</a>

이 페이지는 양쪽 라이센스 중 하나를 따라 사용될 수 있음을 나타낸다.

Links

rel-license 공식 위키 페이지

rel-tag

하이퍼링크에 rel="tag"를 추가하여 현재 페이지의 태그를 지정한다. 예를 들어

<a href="http://technorati.com/tag/tech" rel="tag">tech</a>

페이지가 "tech"라는 태그를 가짐을 나타낸다. 여기서 링크가 가리키는 페이지는 해당 태그를 정의하는 페이지로 실제 존재해야 한다. 따라서 실제 태그는 링크 텍스트가 아니라 링크 URL의 마지막 path component이다. 아래의 예에서

<a href="http://technorati.com/tag/tech" rel="tag">fish</a>

태그는 "fish"가 아니라 "tech"이다.

rel="tag"는 현재 문서의 태그를 지정하는 것으로 외부 문서나 임의의 URL들의 태그를 지정하지 못한다. 이를 위해 xFolk와 hReview 같은 방법들이 제안되고 있다.

Links

rel-tag 공식 위키 페이지

XOXO (Extensible Open XHTML Outlines)

XOXO document type은 XHTML 형태의 개요(outline)를 만들기 위한 것으로 XML 엔진에 의해 처리가 가능하고 브라우저와 쉽게 인터랙티브한 rendering을 할 수 있게 해 준다.

Simple example
Markup

<ol class='xoxo'>
  <li>주제 1
    <ol>
        <li>소주제 1-1</li>
    </ol>
  </li>
  <li>주제 2
    <ol compact="compact">
        <li>소주제 2-1</li>
        <li>소주제 2-2</li>
    </ol>
  </li>
  <li>주제 3
    <ol>
        <li>소주제 3-1</li>
        <li>소주제 3-2</li>
    </ol>
  </li>
</ol>

Sample Style Rules

ol.xoxo { list-style:decimal; }
ol.xoxo ol { list-style:lower-latin; }
ol[compact="compact"] { display:none; }

compact 속성이 지정되어 있으면 하위리스트 확장을 하지 않는 것을 의미한다.

Rendering

 1. 주제 1
  a. 소주제 1-1
 2. 주제 2
 3. 주제 3
  a. 소주제 3-1
  b. 소주제 3-2

Links

XOXO 공식 위키 페이지

VoteLinks

하이퍼링크에 rev 속성을 사용하여 링크가 가리키는 페이지에 대한 평가를 할 수 있게 하여 검색엔진과 같이 링크를 평가하는 프로그램들이 페이지에 가중치를 부여하는 결정을 돕는다. rev는 "vote-for", "vote-abstain", "vote-against" 중 하나의 값을 가져야 하며 각각은 동의, 무관심, 반대를 나타낸다.

VoteLinks 공식 위키 페이지

rel-nofollow

하이퍼링크에 rel="nofollow"를 추가함으로써 그 링크가 가리키는 페이지가 검색엔진과 같은 user agent에 의해 추가적인 가중치를 받는 것을 막는 역할을 한다. 이것이 제시된 목적은 블로그나 포럼의 코멘트 스팸으로 인해 검색엔진이 영향 받는 것을 막기 위해서 이다. 하지만 여러가지 이유로 이것의 사용을 반대하는 움직임도 있다. (NO NOFOLLOW)

rel-nofollow 공식 위키 페이지

참고 자료

원본 주소 ‘http://www.web2hub.com/wiki/index.php/Microformats’

Microformats

Web2hub wiki

목차

microformats가 무엇인가?

microformats의 등장배경

microformats의 design principles

microformats의 예들

Summary

XFN (XHTML Friends Network)

hCard

hCalendar

rel-license

rel-tag

XOXO (Extensible Open XHTML Outlines)

VoteLinks

rel-nofollow

참고 자료

보기

개인 도구

둘러보기

찾기

도구모음