Wednesday, November 26th, 2008
Category: Microformat
One of the best aspects of living in the Bay Area is bumping into all sorts of interesting computer folks. Today I’m working from a coffee shop and bumped into Tantek Çelik, CSS and Microformats man. He pointed me to a fabulous blog series introducing Microformats and all the major formats for a more lay-person audience, created by Emily Lewis:
Lots of great information and tutorials in that blog series.
Tantek also pointed me to an interesting wiki page laying out how browsers and web pages can integrate Microformats more deeply into their user-interfaces:
Recently there have been many really good user interface ideas and suggestions for working with microformats. This page serves to collect and document them so that we may be inspired by and iterate on each others’ works.
The Operator plugin for Firefox, which natively supports deep UI integration for Microformats and discussed on the wiki page as well:
Tuesday, March 11th, 2008
Category: Announcements, Browsers, Microformat
While this is not strictly Ajax or JavaScript related, it is noteworthy to point out that Sitepoint just released a HTML reference that is quite handy to have around if you wonder if what you are building is really HTML or just tagsoup.
Good HTML references are really hard to come by, either they are just listings, like W3schools.com or terribly outdated. Sitepoint have done quite a good job in listing all the HTML elements and categorizing them into different use cases. There is also a list of deprecated elements and attributes to avoid (which could be considered dangerous to still bring up as some of them are too handy to simply add to solve an issue) and a Microformats primer.
We know for a fact that other portals/article sites are working on similar projects and consider it a really good way of flushing old and outdated tutorials on things as simple but important as markup out of the search engine result pages.
The reference also gives a legend of browser support, something that so so far was only available on the German SelfHTML reference.
Thursday, December 13th, 2007
Category: Articles, Mapping, Microformat, jQuery
Simon Willison just doesn't stop. This time he has added a way that details the technique of unobtrusively mapping microformats with jQuery.
Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:
JAVASCRIPT:
-
-
jQuery(function() {
-
// First create a div to host the map
-
var themap = jQuery('<div id="themap"></div>').css({
-
'width': '90%',
-
'height': '400px'
-
}).insertBefore('ul.restaurants');
-
-
// Now initialise the map
-
var mapstraction = new Mapstraction('themap','google');
-
mapstraction.addControls({
-
zoom: 'large',
-
map_type: true
-
});
-
-
// Show map centred on Brighton
-
mapstraction.setCenterAndZoom(
-
new LatLonPoint(50.82423734980143, -0.14007568359375),
-
15 // Zoom level appropriate for Brighton city centre
-
);
-
-
// Geocode each hcard and add a marker
-
jQuery('.vcard').each(function() {
-
var hcard = jQuery(this);
-
-
var streetaddress = hcard.find('.street-address').text();
-
var postcode = hcard.find('.postal-code').text();
-
-
var geocoder = new MapstractionGeocoder(function(result) {
-
var marker = new Marker(result.point);
-
marker.setInfoBubble(
-
'<div class="bubble">' + hcard.html() + '</div>'
-
);
-
mapstraction.addMarker(marker);
-
}, 'google');
-
geocoder.geocode({'address': streetaddress + ', ' + postcode});
-
});
-
});
-
You see the finished code at work.
Tuesday, October 24th, 2006
Category: Microformat, Presentation, The Ajax Experience
Kevin Lawver (or is it here?) discussed Microformats this morning at The Ajax Experience.
Microformats define ways to make your markup more descriptive, allowing a reader (be it machine or human) to very easily grok the just what you're getting at. Basically, you know what you're doing: why don't you just tell us instead of making us guess?
A simple example: Your link to ajaxian from your blog (you do have one, right?) could indicate that the page you're linking to should have the tag "ajax". By adding that tag it's obvious what you're linking to and why you're linking to it.
<a href="http://www.ajaxian.com" rel="tag">ajax</a>
On my blog I may link to ajaxian a bit differently, but due to the tagging someone would be able to quickly determine that my motivation is a bit different.
<a href="http://www.ajaxian.com" rel="tag">web 2.0</a>
The most obvious implication is making SEO-type tasks a bit simpler. A spider crawling your site can be told quite specifically what topics you are truly covering. At the moment you may not see a profound effect from properly applying these tags, but as microformat becomes more and more prolific (and consistent), they will likely be leveraged more and more for this purpose.
Try it out yourself: Make it easier for people to add you to their address books with an hCard on your blog (you can cheat a little and use this).
As with any writeup, there was much in the presentation that isn't represented here - checkout the slides for some more great info.
