Webスライスから始めるmicroformats- Learning microformats from Web Slices -

2009-07-18

自己紹介

id t32kでっす

26歳Webデザイナーっす

warikiru ってブログ書いてまっす

1

自己紹介

id t32kでっす

26歳Webデザイナーっす

warikiru ってブログ書いてまっす

1

Webスライスとは

IE8新機能のひとつ

ＭＳＮスポーツ

2

Webスライスとは

お気に入りバーから更新を確認できる（更新が通知されると太字になる）

3

Webスライスとは

microformatsのhAtomを基に単純なHTMLマークアップ（class属性やrel属性）を使用してWeb ページの一部だけを購読可能にするHTML ページ内のコンテンツに直接適用でき

るため個別にフィードファイルを用意しなくてもいい

4

Webスライスとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=ldquohogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

5

Webスライスとは

価格comやYahooオークションでも採用

価格com Yahoo オークション

6

Webスライスとは

microformatsのhAtomを基に単純なHTMLマークアップ（class属性やrel属性）を使用してWeb ページの一部だけを購読可能にするHTML ページ内のコンテンツに直接適用でき

るため個別にフィードファイルを用意しなくてもいい

4

Webスライスとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=ldquohogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

5

Webスライスとは

価格comやYahooオークションでも採用

価格com Yahoo オークション

6

Webスライスとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=ldquohogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

5

Webスライスとは

価格comやYahooオークションでも採用

価格com Yahoo オークション

6

Webスライスとは

価格comやYahooオークションでも採用

価格com Yahoo オークション

6

Webスライスとは

アドオンを使えばFirefoxでも利用可能

WebChunks 020

7

Webスライスとは

Webスライス対応サイトも続々

アドオンギャラリー Web スライスの追加

8

Webスライスとは

Webスライス対応サイトも続々

アドオンギャラリー Web スライスの追加

8

でもそれってIE独自仕様じゃね

( ﾟдﾟ)ﾊｯ

9

そこでhAtom～

( acuteforall｀)つ

10

microformatsとは

Webサイトで人やイベントブログ記事レ

ビュータグのような共通して公開されているものを記述する際に用いるマークアップパターン

オープンな仕様（ここ重要 ）

11

hAtomとは

フィード配信コンテンツをHTMLで論理的に

マークアップしてコンテンツのアーカイブや購読をしやすくするmicroformats

やりたいことはWebスライスとほぼ一緒

12

WebスライスとhAtomの違いWeb Slice 09 役割 hAtom 01

- フィード全体 hfeed (optional)

hslice + id (required) ルートクラス hentry (required)

entry-title (required) 記事タイトル entry-title (required)

entry-content (optional) 記事の全内容 entry-content (optional)

- 記事の要約 entry-summary (optional)

- 更新日時 updated (required)

- 公開日時 published (optional)

endtime (optional) 有効期限 -

ttl (optional) 更新間隔 -

- 著者 （hCardを利用） author (required)

bookmark (optional) パーマリンク (rel属性) bookmark (optional)

- タグ (rel属性) tag (optional)

feedurl (optional) 代替更新ソース -13

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

そこでhAtom～

( acuteforall｀)つ

10

microformatsとは

Webサイトで人やイベントブログ記事レ

ビュータグのような共通して公開されているものを記述する際に用いるマークアップパターン

オープンな仕様（ここ重要 ）

11

hAtomとは

フィード配信コンテンツをHTMLで論理的に

マークアップしてコンテンツのアーカイブや購読をしやすくするmicroformats

やりたいことはWebスライスとほぼ一緒

12

WebスライスとhAtomの違いWeb Slice 09 役割 hAtom 01

- フィード全体 hfeed (optional)

hslice + id (required) ルートクラス hentry (required)

entry-title (required) 記事タイトル entry-title (required)

entry-content (optional) 記事の全内容 entry-content (optional)

- 記事の要約 entry-summary (optional)

- 更新日時 updated (required)

- 公開日時 published (optional)

endtime (optional) 有効期限 -

ttl (optional) 更新間隔 -

- 著者 （hCardを利用） author (required)

bookmark (optional) パーマリンク (rel属性) bookmark (optional)

- タグ (rel属性) tag (optional)

feedurl (optional) 代替更新ソース -13

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

microformatsとは

Webサイトで人やイベントブログ記事レ

ビュータグのような共通して公開されているものを記述する際に用いるマークアップパターン

オープンな仕様（ここ重要 ）

11

hAtomとは

フィード配信コンテンツをHTMLで論理的に

マークアップしてコンテンツのアーカイブや購読をしやすくするmicroformats

やりたいことはWebスライスとほぼ一緒

12

WebスライスとhAtomの違いWeb Slice 09 役割 hAtom 01

- フィード全体 hfeed (optional)

hslice + id (required) ルートクラス hentry (required)

entry-title (required) 記事タイトル entry-title (required)

entry-content (optional) 記事の全内容 entry-content (optional)

- 記事の要約 entry-summary (optional)

- 更新日時 updated (required)

- 公開日時 published (optional)

endtime (optional) 有効期限 -

ttl (optional) 更新間隔 -

- 著者 （hCardを利用） author (required)

bookmark (optional) パーマリンク (rel属性) bookmark (optional)

- タグ (rel属性) tag (optional)

feedurl (optional) 代替更新ソース -13

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

hAtomとは

フィード配信コンテンツをHTMLで論理的に

マークアップしてコンテンツのアーカイブや購読をしやすくするmicroformats

やりたいことはWebスライスとほぼ一緒

12

WebスライスとhAtomの違いWeb Slice 09 役割 hAtom 01

- フィード全体 hfeed (optional)

hslice + id (required) ルートクラス hentry (required)

entry-title (required) 記事タイトル entry-title (required)

entry-content (optional) 記事の全内容 entry-content (optional)

- 記事の要約 entry-summary (optional)

- 更新日時 updated (required)

- 公開日時 published (optional)

endtime (optional) 有効期限 -

ttl (optional) 更新間隔 -

- 著者 （hCardを利用） author (required)

bookmark (optional) パーマリンク (rel属性) bookmark (optional)

- タグ (rel属性) tag (optional)

feedurl (optional) 代替更新ソース -13

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

WebスライスとhAtomの違いWeb Slice 09 役割 hAtom 01

- フィード全体 hfeed (optional)

hslice + id (required) ルートクラス hentry (required)

entry-title (required) 記事タイトル entry-title (required)

entry-content (optional) 記事の全内容 entry-content (optional)

- 記事の要約 entry-summary (optional)

- 更新日時 updated (required)

- 公開日時 published (optional)

endtime (optional) 有効期限 -

ttl (optional) 更新間隔 -

- 著者 （hCardを利用） author (required)

bookmark (optional) パーマリンク (rel属性) bookmark (optional)

- タグ (rel属性) tag (optional)

feedurl (optional) 代替更新ソース -13

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

hAtomとは

簡単なWebスライスの例（天気予報の更新情報）

ltdiv class=hslice id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgt16時現在晴れ ltpgt

ltdivgt

14

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

hAtomとは

WebスライスとhAtomに対応した例（天気予報の更新情報）

ltdiv class=hslice hentry id=hogehogegt

lth2 class=entry-titlegt金沢天気予報lth2gt

ltp class=entry-contentgtltabbr class=updated title=20090718T1600+0900gt 16時 ltabbrgt現在晴れ ltpgt

ltp class=vcard authorgtltspan class=fngt気象庁ltspangtltpgt

ltdivgt

15

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

これでパーペキ

（acuteω｀）ゞキラッ

16

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

でもhAtomに対応したツールサービスが少ない（これめっちゃ便利ってゆうようなキラーアプリケーションがない）

(acuteω｀)ｼｮﾎﾞｰﾝ

17

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

その他のmicroformats

hCard -連絡先情報

hCalendar ndashイベント情報

hReview -書評などのレビュー

hResume -履歴書

XFN -友人関係など社会的ネットワーク

XOXO - リストとアウトライン

geo adr -位置情報

などなど

18

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

プログラマーさんへお願い

僕らデザイナーはμFを埋め込んでいくのでμFを利用したツールサービス作って

第２のWebスライスみたいなん作って

19

よりセマンティックなWebにしていきましょう

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

Microsoft ++(Webスライスの技術にmicroformatsを使ってくれてありがとう)

ヽ( forall)ノ

20

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21

参考リソース

Web Slice を使用するコンテンツの購読 ndash MSDN

WebChunks Firefox Add-ons

Microformats Wikiにようこそ middot Microformats Wiki

Microformats Icons -- The brilliant work of Wolfgang Bartelme

Microformats x SwapSkills 個人的まとめ laquo Study laquo ForestKの徒然日記

マイクロフォーマット ndash Wikipedia

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ John Allsopp

セマンティック HTMLXHTML 神崎正英

Web開発者のためのRSS amp Atomフィード ベンハンマースリー Ben Hammersley 菅野良二

21