Exemples de Recettes Codés
Jump to navigation
Jump to search
Cette page est destinée à fournir des exemples de code affichant l'interop entre hListing, hProduct et d'autres formats (hAggregateReview, xoxo, pour n'en nommer que quelques-uns) qui pourraient être utilisés pour créer un meilleur marquage sémantique.
hlisting, hproduct exemple
posté : 2009-05-13 par JayMyers
<div class="hlisting"> <div class="item hproduct"> <ol> <li class="lister vcard"><a class="url fn" href="http://storename.com">Magers and Quinn</a></li> <li class="category"><a href="http://storename.com/categories/books">Books</a></li> <li class="category"><a href="http://storename.com/categories/cooking">Cooking</a></li> <li class="category"><a href="http://storename.com/categories/quick-easy-cooking">Quick and Easy Cooking</a></li> <li>Gordon Ramsay's Fast Food</li> </ol> <div class="leftcol"> <img src="http://images.storename.com/products/ramsay-fast-food.jpg" class="photo" alt="gordan ramsay fast food book" /> <p><span class="condition">New:</span> <span class="price">$27.99</span></p> <p>Pub price: $35.00</p> <p>Hardcover</p> <p class="availability">Out of stock</p> </div> <div class="rightcol"> <h1 class="fn">Gordon Ramsay's Fast Food Recipes from the F Word</h1> <p>By Ramsay, Gordon</p> <dl class="identifier"> <dt>ISBN:</dt> <dd>1554700647</dd> </dl> <dl> <dt>Contributors:</dt> <dd>Sargeant, Mark (Contributor); Quah, Emily (Contributor); Mead, Jill (Photographer)</dd> <dt>Publisher:</dt> <dd>Amer Youth Hostels</dd> <dt>Published:</dt> <dd>2008</dd> <dt>Pages:</dt> <dd>255</dd> <dt>Weight:</dt> <dd>2.70lbs.</dd> <dt>Height:</dt> <dd>10.25"</dd> <dt>Width:</dt> <dd>8.00"</dd> <dt>Depth:</dt> <dd>1.50"</dd> <dt>Language:</dt> <dd>English </dd> </dl> <h4>Publishers Comments</h4> <p class="description">A celebrity host of Hell's Kitchen features more than one hundred accessible recipes that are organized in accordance with everyday needs and special occasions, in a volume that places an emphasis on fast preparation and features complementary tips on stocking a pantry.</p> </div> </div> </div>
exemple produit avec hreview, hproduct, hlisting
posted: 2009-05-07 by JayMyers
Source URL: http://reviews.cnet.com/car-gps-navigation/tomtom-go-930-gps/4505-3430_7-33003945.html
<div class="hReview"> <div class="item hProduct"> <span class="fn">TomTom GO 930 GPS</span> <span class="rating">3.5</span> <div class="listing hListing-aggregate"> <div class="price"> <span class="min">$352.35</span> - <span class="max">$588.99</span> </div> </div> </div> <div class="reviewer vcard"><span class="fn">Bonnie Cha</span></div> <span class="dtreviewed">05/28/2008</span> </div>
combinaisaon hreview-aggregate (nouvelle proposition), hlisting, hproduct, xoxo
posted: 2009-05-07 by JayMyers
A more production-grade example of combining microformats, while mixing in other class attributes for the purpose of presentation.
<div class="hreview-aggregate">
<div class="item hproduct">
<h1 class="fn"><span class="brand">Sony</span> - BRAVIA / 46" Class / 1080p / 120Hz / LCD HDTV</h1>
<ul>
<li class="identifier"><span class="type">Model</span>: <span class="value">LN40A550</span></li>
<li class="identifier"><span class="type">SKU</span>: <span class="value">8749465</span></li>
</ul>
<div class="listing hListing">
<div class="leftcol"><img src="/images/product.jpg" alt="Sony - BRAVIA 46 Class 1080p 120Hz LCD HDTV" class="photo"/></div>
<div class="rightcol">
<div class="rating"><img src="/images/stars-four-half.gif" alt="Four and a Half Star Rating" class="average" /></div>
<div>(<span class="count">187</span> Reviews)</div>
<div class="grey">was $1,099.99</div>
<div class="price">$999.99</div>
</div>
<div class="shipping">Shipping: Usually leaves our warehouse in 1 business day.</div>
</div>
<div id="product-overview" class="product-overview" onclick="toggleBox('product-overview-open','product-overview-closed');changeClass('overview-head','down','right');">
<h3><a href="#" class="right" id="overview-head">Overview</a></h3>
<div id="product-overview-closed">
<p class="padtop">This flat-panel LCD HDTV features a 16:9 widescreen aspect ratio and a 50,000:1 dynamic contrast ratio, so you can enjoy your favorite movies in true 1080p high-definition.</p>
<a href="#" class="readmore mini-right">Show Full Overview</a>
</div>
<div id="product-overview-open">
<p class="description">This flat-panel LCD HDTV features a 16:9 widescreen aspect ratio and a 50,000:1 dynamic contrast ratio, so you can enjoy your favorite movies in true 1080p high-definition.</p>
<ul class="xoxo">
<li><h3 class="bottom-line">What's Included</h3>
<ol>
<li>Sony BRAVIA / 46" Class / 1080p / 120Hz / LCD HDTV</li>
<li>Tabletop stand, 4 screws</li>
<li>Remote RM-YD028</li>
<li>AC power cord, 2 AA batteries</li>
<li>Owner's manual</li>
</ol>
</li>
</ul>
<ul class="xoxo">
<li><h3 class="bottom-line">Product Features</h3>
<dl>
<dt>Built-in HDTV tuner</dt>
<dd>Add HD-capable antenna to receive over-the-air high-definition broadcasts, where available. Optional set-top box required for high-definition cable or satellite programming.</dd>
<dt>46" screen measured diagonally from corner to corner</dt>
<dd>Everyone will have a great view of the show or game.</dd>
<dt>1080p display</dt>
<dd>Provides the highest quality progressive-scan picture possible for a high-definition source.</dd>
<dt>16:9 widescreen aspect ratio</dt>
<dd>With CineMotion reverse 3.2 pulldown technology and 24p True Cinema mode delivers accurate reproduction of film-based sources for a cinema-style entertainment experience.</dd>
<dt>BRAVIA Engine 2 full digital video processor</dt>
<dd>Reduces video noise, improves color and sharpens the overall image detail.</dd>
<dt>Advanced Contrast Enhancer (ACE)</dt>
<dd>Uses real-time image processing to adjust the contrast ratio.</dd>
<dt>Motionflow 120Hz technology</dt>
<dd>Reduces jitter and sharpens fast-moving images for a crisp picture.</dd>
<dt>LightSensor technology</dt>
<dd>Monitors ambient room lighting conditions and adjusts the backlit intensity accordingly.</dd>
<dt>50,000:1 dynamic contrast ratio</dt>
<dd>For an arresting viewing experience.</dd>
<dt>3D digital comb filter</dt>
<dd>Brings out fine picture detail and enhances color purity.</dd>
<dt>SRS TruSurround XT</dt>
<dd>With Dolby Digital and SteadySound automatic volume control delivers a lush soundscape.</dd>
<dt>Ultraslim (3-4/5" deep) design and VESA compatible</dt>
<dd>Ideal for wall mounting (with optional mounting kit, not included).</dd>
</dl>
</li>
</ul>
</div>
<div id="customer-overview" class="customer-overview">
<div onclick="toggleBox('customer-open','customer-closed');changeClass('review-head','down','right');">
<h3><span class="right" id="review-head" >Customer Reviews (34)</span></h3>
<p class="padtop">Average: <img src="/images/stars-four-half.gif" alt="Four and a Half Star Rating" /></p>
<p>50% of customers would recommend this product to a friend (2 of 4).</p>
</div>
<div id="customer-closed">
<a href="#" class="readmore mini-right" onclick="toggleBox('customer-open','customer-closed');changeClass('review-head','down','right');" >Show Reviews</a>
</div>
<div id="customer-open">
<div id="sort-reviews">
<span class="big-grey">Sort by:</span>
<select>
<option value="newest">Date: Newest</option>
<option value="oldest">Date: Oldest</option>
</select>
<input type="submit" value="Go" />
</div>
<div id="review-list">
<div class="number-of-reviews grey">1 - 10 of 34 Reviews</div>
<div class="hreview">
<span id="review-one" class="summary">TV may be better than you think.</span>
<span class="reviewer vcard">by <span class="fn nickname">bezb18</span> from Maryland on <span class="dtreviewed">04/07/2009</span></span>
<span class="rating"><img src="/images/stars-four-half.gif" alt="Four and a Half Star Rating" /></span>
<div id="hidden-one">
<div class="review-box">
<table class="review-summary">
<tr><td>Picture Quality:</td><td><img alt="50% Rating" src="images/bar-50.gif" /></td></tr>
<tr><td>Sound Quality:</td><td><img alt="100% Rating" src="images/bar-100.gif" /></td></tr>
<tr><td>Features:</td><td><img alt="75% Rating" src="images/bar-75.gif" /></td></tr>
</table>
<span class="review-great"><b>What's great about it:</b> Vivid picture.</span>
<span class="review-not"><b>What's not so great:</b> Backlight, fades picture to black.</span>
<p class="description">"I purchased this TV about a week ago and
after putting a DVD on and noticed the scene fading to almost
completely black at several times in the movie, I thought I
might have a problem. Then noticed that it also happens when
watching regular movies on the cable. Screen gets too dark and
then returns to the regular picture. It is very upsetting and you
want to throw something. You think you have bought a really good
TV, paid a good price for it and then you get this. I purchased
a Sony KDL46z4100 Out of Box before this one and had Audio
problems. I took it back and got this one. I really wish
Sony could get it right on something. Will also return this one."</p>
<span class="review-recommend"><b>Would you recommend this product to a friend?:</b> Yes</span>
<span class="review-business"><b>Is this product used primarily for business?:</b> No</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="specs-overview" class="specs-overview" onclick="toggleBox('specs-open','specs-closed');changeClass('specs-head','down','right');" >
<h3><a href="#" class="right" id="specs-head">Specifications</a></h3>
<div id="specs-closed"> </div>
<div id="specs-open">
<ul class="xoxo">
<li><h3><a href="#" class="right" id="specs-head">Specifications</a></h3>
<dl>
<dt>Warranty Terms - Parts</dt>
<dd>1 year limited</dd>
<dt>Warranty Terms - Labor</dt>
<dd>1 year limited</dd>
<dt>Product Height</dt>
<dd>30-1/3" with stand (28-5/8" without</dd>
<dt>Product Width</dt>
<dd>44-1/5"</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
hlisting, hproduct, haggregatereview/hreview, xoxo
<div class="hlisting"> <div class="hproduct"> <ol> <li class="lister"><a href="http://storename.com">Store name</a></li> <li class="category"><a href="http://storename.com/tv-and-video">TV & Video</a></li> <li class="category"><a href="http://storename.com/televisions">Televisions</a></li> <li>Product Info</li> </ol> <img src="http://images.storename.com/products/samsung-ln40a550.jpg" class="photo" alt="picture of samsung ln40a550" /> <div class="fn"><span class="brand">Samsung</span> - 40" 1080p Flat-Panel LCD HDTV</div> <dl class="identifier"> <dt>Model</dt> <dd>LN40A550</dd> <dt>SKU</dt> <dd>8749465</dd> </dl> <div class="haggregatereview"> <div class="hreview"> <span class="fn"><a href="http://storename.com/path/to/product" class="url"><img src="http://images.storename.com/images/misc/ratings_star_3_5.gif" alt="3.5 out of 5 stars"/></a></span><span class="rating">4.7</span> / <span class="best">5</span> (<span class="num">13</span> reviews)</div> </div> </div> <div class="price">$1,099.99</div> <ol class="xoxo"> <li><h2>Specifications</h2> <dl> <dt>Warranty Terms - Parts</dt> <dd>1 year</dd> <dt>Warranty Terms - Labor</dt> <dd>1 year</dd> <dt>Product Height</dt> <dd>27" with stand (24-7/10" without)</dd> <dt>Product Width</dt> <dd>39-1/5"</dd> <dt>Product Weight</dt> <dd>61.5 lbs. with stand (54.5 lbs. without)</dd> <dt>Product Depth</dt> <dd>11-4/5" with stand (3-3/5" without)</dd> <dt>TV Type</dt> <dd>LCD Flat-Panel</dd> </dl> </li> </div> </div>
hlisting, hproduct, haudio, haggregatereview/hreview
<div class="hlisting"> <div class="hproduct haudio"> <ol> <li class="lister"><a href="http://storename.com">Store name</a></li> <li class="category"><a href="http://storename.com/gangsta">Gangsta/Hardcore</a></li> <li>Product Info</li> </ol> <img src="http://images.storename.com/products/50cent-curtis.jpg" class="photo" alt="picture of 50 cent" /> <div class="album">Curtis</div> <div class="contributor"><span class="vcard"><span class=n nickname">50 Cent</span></span></div> <p>Release date:<abbr class="published" title="2007-09-11">September 11, 2007</abbr></p> <div class="haggregatereview"> <div class="hreview"> <span class="fn"><a href="http://storename.com/path/to/product" class="url"><img src="http://images.storename.com/images/misc/ratings_star_4_0.gif" alt="4 out of 5 stars"/></a></span><span class="rating">4.0</span> / <span class="best">5</span> Number of reviews:(<span class="num">4</span> reviews)</div> </div> <div class="price">$9.99</div> <a href="add-to-cart-url" rel="payment"><img src="http://storename.com/images/global/add-to-cart.gif" alt="add to cart" /></a> <h2>Tracks</h2> <ol> <li class="item"><span class="position">1</span>.<span class="fn">Intro</span><a href="http://images.storename.com/media/sample/50cent-intro.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">2</span>.<span class="fn">My Gun Go Off</span><a href="http://images.storename.com/media/sample/50cent-gun-go-off.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">3</span>.<span class="fn">Man Down - (censored)</span><a href="http://images.storename.com/media/sample/50cent-man-down.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">4</span>.<span class="fn">I'll Still Kill - (with Akon)</span><a href="http://images.storename.com/media/sample/50cent-ill-still-kill.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">5</span>.<span class="fn">I Get Money</span><a href="http://images.storename.com/media/sample/50cent-i-get-money.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">6</span>.<span class="fn">Come & Go - (with Dr. Dre)</span><a href="http://images.storename.com/media/sample/50cent-come-go.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">7</span>.<span class="fn">Ayo Technology - (with Timbaland/Justin Timberlake)</span><a href="http://images.storename.com/media/sample/50cent-ayo-technology.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">8</span>.<span class="fn">Follow My Lead - (with Robin Thicke)</span><a href="http://images.storename.com/media/sample/50cent-follow-my-lead.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">9</span>.<span class="fn">Movin' on Up</span><a href="http://images.storename.com/media/sample/50cent-movin-on-up.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">10</span>.<span class="fn">Straight to the Bank</span><a href="http://images.storename.com/media/sample/50cent-straight-to-bank.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">11</span>.<span class="fn">Amusement Park</span><a href="http://images.storename.com/media/sample/50cent-amusement-park.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">12</span>.<span class="fn">Fully Loaded Clip</span><a href="http://images.storename.com/media/sample/50cent-fully-loaded-clip.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">13</span>.<span class="fn">Peep Show - (with Eminem)</span><a href="http://images.storename.com/media/sample/50cent-peep-show.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">14</span>.<span class="fn">Fire - (with Young Buck/Nicole Scherzinger)</span><a href="http://images.storename.com/media/sample/50cent-fire.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">15</span>.<span class="fn">All of Me - (with Mary J. Blige)</span><a href="http://images.storename.com/media/sample/50cent-all-of-me.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">16</span>.<span class="fn">Curtis 187</span><a href="http://images.storename.com/media/sample/50cent-curtis-187.mp3" rel="sample">Listen</a></li> <li class="item"><span class="position">17</span>.<span class="fn">Touch the Sky - (with Tony Yayo)</span><a href="http://images.storename.com/media/sample/50cent-touch-the-sky.mp3" rel="sample">Listen</a></li> </ol> </div> </div>