Microdata semantic-extend


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Microdata semantic-extend

  1. 1. MicrodataExtending Semantics jacobtan@2011-11 http://www.hotels2map.com/blog/
  2. 2. SemanticsWhy?• Clean - read / edit / reuse• More accessible - devices• Search engine friendly - content / code / understandWhat?• Text-Level Semantics Elements - a / em / strong (inline)• Structural Semantic Elements - p / h1… / article / header (block)• Interactive Semantics - detail / summary / command / menuSemantics web• data’s common formats and integration• the data relates to real world objects
  3. 3. Extending SemanticsWhy? - Limited Html labels and attributes/infinite objects of the world• Mark up a Object? person/event/review/product/movie <person> <name>your name<name></person>• Web’s Data? for script / machines <div yourData=“data for machine”>visible content</div>
  4. 4. Extending Semantics• custom data attributeData-* private for your page or app<div data-name-alice="fake name">your name</div>elementNode.dataset.nameAlice(); (firefox/chrome/safari/opera)• WAI-ARIA?
  5. 5. Extending SemanticsMark up a Object : person/movie /product …public for your page or app and other machines• Microformats• RDFa• Microdata• …
  6. 6. Microformats<div class="vcard"> My name is <span class="fn">Bob Smith</span>, Here is my home page: <a href="http://www.example.com" class="url">www.example.com</a>.</div>CalssDesigned for humans first and machines second, data formatshttp://microformats.org/aboutDom APIdocument.getElementsByClassName("className")document.querySelectorAll(".className")
  7. 7. RDFa<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> My name is <span property="v:name">Bob Smith</span>, Here is my homepage: <a href="http://www.example.com" rel="v:url">www.example.com</a>.</div>Bridging the Human and Data Websa set of XHTML attributes to augment visual data with machine-readable hintshttp://www.w3.org/TR/xhtml-rdfa-primer/vocabulary & propertyDom APIdocument.getItemsByType("http://xmlns.com/foaf/0.1/Person");document.getItemByProperty("foaf:name", "Albert Einstein");
  8. 8. RDFa Lite<p vocab="http://schema.org/" typeof="Person"> My name is<span property="name">Manu Sporny</span> and you can give me a ring via<span property="telephone">1-800-555- 0155</span>. <img rel="image" src="http://manu.sporny.org/images/manu.png" /></p>schemahttp://www.w3.org/2010/02/rdfa/sources/rdfa-lite/#about
  9. 9. Microdata<div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Bob Smith</span>, Here is my homepage: <a href="http://www.example.com" itemprop="url">www.example.com</a>.</div>allows machine-readable data to be embedded in HTML documentsin an easy-to-write mannerhttp://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html
  10. 10. Choose your way• Easy?• Bonus?• Forward?• Standard?
  11. 11. Microdata • Easy (simplicity & extensibility) • HTML5 (forward & standard) • Schema.org (search engine bonus)
  12. 12. Microdata & Schema<div itemscope itemtype="http://schema.org/Person"> My name is <span itemprop="name">Bob Smith</span> Here is my homepage: <a href="http://www.example.com" itemprop="url">www.example.com</a>.</div>Itemscope 声明数据Itemtype 指定数据类型 http://schema.org/Person http://schema.org/Movie ....Itemprop 指定数据某个属性DOM API document.getItems("http://schema.org/Person") opera11.60+详细文档http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#the-basic-syntax
  13. 13. 统一词汇库 schema.org
  14. 14. data-vocabulary.org VS schema.orgschema.org<meta itemprop="priceCurrency" content="CNY" /><div itemscope itemtype="http://schema.org/WebPage"> <div itemprop="breadcrumb"> <a href="#">数码家电</a> > <a href="#">手机</a> > <a href="#">Htc</a> </div></div>data-vocabulary.org<meta itemprop="currency" content="CNY" /><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="#" itemprop="url"><span itemprop="title">数码家电</span></a></div><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="#" itemprop="url"><span itemprop="title">手机</span></a></div>
  15. 15. Google富网摘( Rich snippets)http://www.google.com/support/webmasters/bin/topic.py?hlrm=en&topic=21997• Microformats• RDFa• Microdata
  16. 16. Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.hotels2map.com%2Fblog%2Fd11004%2F&view=<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Kenmore White 17" Microwave</span> <img src="kenmore-microwave-17in.jpg" alt=Kenmore 17" Microwave /> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Rated <span itemprop="ratingValue">3.5</span>/5 based on <span itemprop="reviewCount">11</span> customer reviews </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">$55.00</span> <link itemprop="availability" href="http://schema.org/InStock" />In stock </div> Product description: <span itemprop="description">0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.</span></div>
  17. 17. THX Q&A