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.

Microdata semantic-extend

1,002 views

Published on

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

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

×