Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webスライスから始めるmicroformats

3,684 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×