Flag of the United Kingdom
Andreas Rejbrands webbplats

Aktuellt

Web design: Microdata (for software)

When I updated the homepage of BookBase, I also added microdata annotation using the http://schema.org/SoftwareApplication vocabulary:

<section class="software" itemscope="" itemtype="http://schema.org/SoftwareApplication">

<h1 itemprop="name">Rejbrand BookBase</h1>

<img class="logo" itemprop="image" src="pix/screenshots/bb11/bbicon.png" alt="The BookBase logo: A leaf" />

<p itemprop="description">Rejbrand BookBase is a book cataloguing software with HTML and microdata export
capabilities.</p>

<meta itemprop="url" content="http://english.rejbrand.se/rejbrand/apps_bookbase.asp" />

<dl class="software metadata">
<dt>Version</dt>
<dd itemprop="softwareVersion">1.1.0.1</dd>
<dt>Date</dt>
<dd><time itemprop="datePublished">2014-11-30</time></dd>
<dt>File size</dt>
<dd><data itemprop="fileSize" value="1420">1.39&nbsp;MB</data></dd>
<dt>System requirements</dt>
<dd itemprop="operatingSystem">Microsoft Windows 2000, XP, 7, 8, or 8.1</dd>
<dt>Copyright</dt>
<dd>Copyright © 2011-<time itemprop="copyrightYear">2014</time>
<span itemprop="copyrightHolder author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="givenName">Andreas</span> <span itemprop="familyName">Rejbrand</span>
</span>
</dd>
<dt>License</dt>
<dd itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="price" content="0.00" />Freeware
</dd>
<dt>Download link</dt>
<dd><a itemprop="downloadUrl"
href="http://english.rejbrand.se/rejbrand/applications/bookbase/bb11.exe">bb11.exe</a> (installer)</dd>
<dt>Other links</dt>
<dd><a href="bb_screenshots.asp">Screenshots</a>, <a href="bb_documentation.asp">Documentation</a></dd>
</dl>

<p><img id="screenshot" itemprop="screenshot" src="pix/screenshots/bb11/bbmain.png"
alt="Screenshot of Rejbrand BookBase" /></p>

</section>

Using the style

/* Software downloads */

section.software img.logo {
float: right
}

dl.metadata.software {
border: 2px solid black;
border-style: solid none;
}
dl.metadata.software dt {
width: 12em;
text-align: right;
padding: 4px;
}
dl.metadata.software dd {
padding: 4px;
}

the rendering is

Rendering of the above HTML and CSS


Visa alla tidigare notiser.

Visa enbart de senaste notiserna.