Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.
Please upgrade to a better browser such as Firefox, Opera, Chrome, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)
Less than 50 tags → lots of meaning (that is, semantics) gets lost when marking up documents.
<h1>VanDev: Microformats - Adding Semantics to Your Web Site</h1> <p>Wednesday, April 16, 2008 <br> UBC Robson Square<br> 800 Robson St.<br> Vancouver, British Columbia<br> </p>
HTML tags such as
h1 (heading1) and
p (paragraph) and
br (break) are kind of meaningless (without semantics).
Semantic Web – add semantics to your web page by marking up events, people, locations, resumes, listings, feeds and much more.
How? The “official” semantic web proposes new extension to web markup such as Resource Description Framework(RDF) or eXtensible Markup Language (XML)
The “pragmatic” semantic web proposes – let’s just use conventions and best practices for today’s web markup and today’s browsers.
Let’s add semantics using Microformats to the event example:
<div class="vevent"> <h1 class="summary">VanDev: Microformats - Adding Semantics to Your Web Site</h1> <p><abbr class="dtstart" title="2008-04-16">Wednesday, April 16, 2008</abbr> </p> </div>
That’s all there’s is to it.
Why use attributes such as
Microformats build on existing standards! The event Microformat known as hCalendar builds on the existing internet standard called iCalendar (used by Apple’s iCal and others) published by the Internet Society/Internet Engineering Task Force (IETF) as Request for Comments (RFC)#2445.
The same event marked-up in “classic” iCalendar format looks like:
BEGIN:VCALENDAR VERSION:2.0 PRODID:-//VanDev//NONSGML Calendar Version 1.0//EN BEGIN:VEVENT SUMMARY:VanDev: Microformats - Adding Semantics to Your Web Site DTSTAMP:20080416T000000Z END:VEVENT END:VCALENDAR
How do I know? Let’s try some mashups using Microformats.
Operator is a free, open source Firefox browser addon that lets you interact with semantic data on web pages, including Microformats, RDFa and eRDF.
Flickr 2.3 million photos geotagged this month
Many more: http://flickr.com/photos/tags/geotagged/interesting/
<span class='geo'> <span class='latitude'>49.205486</span> <span class='longitude'>-122.892036</span> </span>
Alternative geo Microformat:
<abbr title="49.205486;-122.892036" class="geo"> North Vancouver's Lynn Canyon </abbr>
Yes. That’s it. That’s all. A real-word geo microformat from Flickr (a Yahoo! service).
Mashup Actions for microformats tag:
<a href="http://wordpress.com/tag/microformats/" rel="tag">microformats</a>, <a href="http://wordpress.com/tag/giantglobalgraph/" rel="tag">giantglobalgraph</a>
Yes. That’s all, hence, the name rel-tag!
Demo Tails Export – Click on HTML
Create a hcard sample using hcard creator and save it to your disk
REST – Best practices for existing protocols and formats
Microformats → Best Practices for HTML (Add Semantics to web pages using today’s browsers)
Mofo – Ruby Microformat Parser Project @ mofo.rubyforge.org
Article: Me and uformats (Microformats) – err.the_blog (Chris Wanstrath) @ http://errtheblog.com/posts/35-me-and-uformats
Turn your web page into an API.
Instead of asking for the user’s address, ask for a web page (URL/URI) and use Microformats to get the address.
Instead of asking for the event details, ask for a web page (URL/URI) to includes all the event details marked up using Microformats.
Subscribe to an event, contact card using a web page (similar to a web feed) and the event, contact card stays up-to-date.
Microformats in a way is a “legalized” and standardized way for screen scrapping.
The Ruby Mofo library is – surprise, surprise – built on Hpricot.
The rel family (link rel=relationship attribute)
<a href="http://creativecommons.org/licenses/by-nc/3.0/" rel="license"> Create Commons Attribution Non-Commercial 3.0</a>
<a href="http://geraldbauer.wordpress.com" rel="met colleague"> Gerald Bauer's Blog</a>