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




 2009-07-18
自己紹介
id : t32kでっす
26歳Webデザイナーっす
warikiru ってブログ書いてまっす




                       1
Webスライスとは
IE8新機能のひとつ




MSNスポーツ


             2
Webスライスとは
お気に入りバーから更新を確認できる!
(更新が通知されると太字になる)




                     3
Webスライスとは
microformatsのhAtomを基に、単純なHTML
マークアップ(class属性やrel属性)を使用して、
Web ページの一部だけを購読可能にする。
HTML ページ内のコンテンツに直接適用でき
るため、個別にフィ...
Webスライスとは
簡単なWebスライスの例
(天気予報の更新情報)


 <div class="hslice" id=“hogehoge">
   <h2 class="entry-title">金沢 天気予報</h2>
   <p cla...
Webスライスとは
価格.comやYahoo!オークションでも採用




価格.com      Yahoo! オークション




                            6
Webスライスとは
アドオンを使えばFirefoxでも利用可能!
  WebChunks 0.20




                         7
Webスライスとは
Webスライス対応サイトも続々!




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


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

      ( ゚д゚)ハッ!



                    9
そこで、hAtom~♪

  ( ´∀`)つ



              10
microformatsとは
 Webサイトで人やイベント、ブログ記事、レ
 ビュー、タグのような共通して公開されている
 ものを記述する際に用いるマークアップパ
 ターン
 オープンな仕様(ここ重要 !)




              ...
hAtomとは
フィード配信コンテンツをHTMLで論理的に
マークアップして、コンテンツのアーカイブや
購読をしやすくするmicroformats
やりたいことはWebスライスとほぼ一緒!




                       ...
WebスライスとhAtomの違い
     Web Slice 0.9                    役割                    hAtom 0.1
              -                    ...
hAtomとは
簡単なWebスライスの例
(天気予報の更新情報)


 <div class="hslice" id="hogehoge">
   <h2 class="entry-title">金沢 天気予報</h2>
   <p class...
hAtomとは
WebスライスとhAtomに対応した例
(天気予報の更新情報)


 <div class="hslice hentry" id="hogehoge">
   <h2 class="entry-title">金沢 天気予報</h...
これで、パーペキ!

 (*´ω`*)ゞキラッ☆



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




         (´・ω・`)ショボーン



                         ...
その他のmicroformats
 hCard - 連絡先情報
 hCalendar – イベント情報
 hReview - 書評などのレビュー
 hResume - 履歴書
 XFN - 友人関係など社会的ネットワーク
 XOXO - リスト...
プログラマーさんへお願い
僕らデザイナーはμFを埋め込んでいくので、
μFを利用したツール・サービス作って!
第2のWebスライスみたいなん作って!



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



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



           ヽ( ・∀・)ノ



                                        20
参考リソース
Web Slice を使用するコンテンツの購読 – MSDN
WebChunks :: Firefox Add-ons
Microformats Wikiにようこそ! · Microformats Wiki
Microformat...
Upcoming SlideShare
Loading in...5
×

Webスライスから始めるmicroformats

2,268

Published on

Windows 7 コミュニティ勉強会 with Tech Fielders 北陸編でのライトニングトークの資料です。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,268
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webスライスから始めるmicroformats

  1. 1. Webスライスから始めるmicroformats - Learning microformats from Web Slices - 2009-07-18
  2. 2. 自己紹介 id : t32kでっす 26歳Webデザイナーっす warikiru ってブログ書いてまっす 1
  3. 3. Webスライスとは IE8新機能のひとつ MSNスポーツ 2
  4. 4. Webスライスとは お気に入りバーから更新を確認できる! (更新が通知されると太字になる) 3
  5. 5. Webスライスとは microformatsのhAtomを基に、単純なHTML マークアップ(class属性やrel属性)を使用して、 Web ページの一部だけを購読可能にする。 HTML ページ内のコンテンツに直接適用でき るため、個別にフィードファイルを用意しなくて もいい。 4
  6. 6. Webスライスとは 簡単なWebスライスの例 (天気予報の更新情報) <div class="hslice" id=“hogehoge"> <h2 class="entry-title">金沢 天気予報</h2> <p class="entry-content">16時 現在:晴れ </p> </div> 5
  7. 7. Webスライスとは 価格.comやYahoo!オークションでも採用 価格.com Yahoo! オークション 6
  8. 8. Webスライスとは アドオンを使えばFirefoxでも利用可能! WebChunks 0.20 7
  9. 9. Webスライスとは Webスライス対応サイトも続々! アドオンギャラリー: Web スライスの追加 8
  10. 10. でも、それってIE独自仕様じゃね? ( ゚д゚)ハッ! 9
  11. 11. そこで、hAtom~♪ ( ´∀`)つ 10
  12. 12. microformatsとは Webサイトで人やイベント、ブログ記事、レ ビュー、タグのような共通して公開されている ものを記述する際に用いるマークアップパ ターン オープンな仕様(ここ重要 !) 11
  13. 13. hAtomとは フィード配信コンテンツをHTMLで論理的に マークアップして、コンテンツのアーカイブや 購読をしやすくするmicroformats やりたいことはWebスライスとほぼ一緒! 12
  14. 14. WebスライスとhAtomの違い Web Slice 0.9 役割 hAtom 0.1 - フィード全体 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
  15. 15. hAtomとは 簡単なWebスライスの例 (天気予報の更新情報) <div class="hslice" id="hogehoge"> <h2 class="entry-title">金沢 天気予報</h2> <p class="entry-content">16時 現在:晴れ </p> </div> 14
  16. 16. hAtomとは WebスライスとhAtomに対応した例 (天気予報の更新情報) <div class="hslice hentry" id="hogehoge"> <h2 class="entry-title">金沢 天気予報</h2> <p class="entry-content"><abbr class="updated" title="20090718T16:00+09:00"> 16時 </abbr>現在:晴れ </p> <p class="vcard author"><span class="fn">気象庁 </span></p> </div> 15
  17. 17. これで、パーペキ! (*´ω`*)ゞキラッ☆ 16
  18. 18. でも、hAtomに対応したツール・ サービスが少ない。。 (これめっちゃ便利!ってゆうようなキラーアプリケーションがない) (´・ω・`)ショボーン 17
  19. 19. その他のmicroformats hCard - 連絡先情報 hCalendar – イベント情報 hReview - 書評などのレビュー hResume - 履歴書 XFN - 友人関係など社会的ネットワーク XOXO - リストとアウトライン geo, adr - 位置情報 などなど 18
  20. 20. プログラマーさんへお願い 僕らデザイナーはμFを埋め込んでいくので、 μFを利用したツール・サービス作って! 第2のWebスライスみたいなん作って! よりセマンティックなWebにしていきましょう! 19
  21. 21. Microsoft ++ (Webスライスの技術にmicroformatsを使ってくれてありがとう) ヽ( ・∀・)ノ 20
  22. 22. 参考リソース Web Slice を使用するコンテンツの購読 – MSDN WebChunks :: Firefox Add-ons Microformats Wikiにようこそ! · Microformats Wiki Microformats Icons -- The brilliant work of Wolfgang Bartelme Microformats x SwapSkills 個人的まとめ « Study « Forest.Kの徒然日記 マイクロフォーマット – Wikipedia マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ : John Allsopp セマンティック HTML/XHTML: 神崎 正英 Web開発者のためのRSS & Atomフィード: ベン ハンマースリー, Ben Hammersley, 菅野 良二 21
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×