This blog is NOFOLLOW Free!

Official Blog of Do Follow Blog Directory

Blurbs on SEO, Technology, Business, Internet, Marketing, Trends, Tips, Tricks and more

  • PR 3 Link Directory. Human-edited and spam-free, organized with search engine friendly listings.
  • Support "U Comment, I Follow!" Say NO to rel=nofollow tag!
  • Join the movement! Submit your link for FREE today!

Microdata: HTML5’s Best-Kept Secret

Posted September 11th, 2010 by admin No Comments »

Given the amount of industry noise about native video and scripted animations, you’d be forgiven if you had never heard of the new microdata specification included in HTML5.

Similar to outside efforts like Microformats, HTML5’s microdata offers a way of extend HTML by adding custom vocabularies to your pages.

The easiest way to understand it is to consider a common use case. Let’s say you want list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag.

Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

When a search engine spider comes along, it will know that not only is your data a business listing, but it can discover the address, the phone number, or even the precise geo-coordinates if you want to include them.

Given that HTML5 is still a draft at this point, why bother?

Actually, despite its lack of publicity and HTML5’s still-incomplete status, microdata is already being used by Google, which has started adding information gleaned from microdata markup to its search result snippets.

Microdata is useful today, but what about Microformats or more complex tools like RDFa? The answer is that all three will work (and Google, in most cases, understands all of them).

In the end, the differences between the three are primarily in the syntax, and each has its advantages and disadvantages. But given that the Microdata specification will very likely become an official recommended web standard as part of HTML5, it seems the most future-proof of the three options.

So how do we add Microdata to a web page? Consider the following basic HTML markup, which might be used to describe my local coffee shop:

    <h1>Hendershot's Coffee Bar</h1>
    <p>1560 Oglethorpe Ave, Athens, GA</p>

This markup gets the basic information on the page and humans can read it, but search engine spiders aren’t going to get much out of it. While it’s true that even Google says you should design for humans first and robots second, we can improve this code without making it any less human readable.


To rewrite this business listing using HTML5’s microdata syntax, we would do something like this:

<div itemscope itemtype="">
    <h1 itemprop="name">Hendershot's Coffee Bar</h1>
    <p itemprop="address" itemscope itemtype="">
      <span itemprop="street-address">1560 Oglethorpe Ave</span>,
      <span itemprop="locality">Athens</span>,
      <span itemprop="region">GA</span>.

The Microdata markup adds a couple attributes you may not have seen before, itemscope, itemtype and itemprop. The first is essentially just a top level marker, it tells the search engine spider that you’re about to define something in the following nested tags. The itemtype attribute tells the spider what you’re defining — in this case, an organization.

The rest of the markup should look pretty familiar if you’ve used Microformats. The main change is the itemprop attribute (short for item property) to define what each element is. Because our address is all one paragraph, we’ve added some span tags to define each element of the address separately — street address, locality and so on. If we wanted, we could add other properties like a phone number (itemprop="tel"), a URL (itemprop="url") or even geodata (itemprop="geo").

So where did we get these itemprop vocabularies from? Well, as the URL in the itemtype attribute indicates, they come from Of course you can make up your own itemprop syntax, but if you want search engine spiders to understand your microdata, you’re going to have to document what you’re doing. Since the definitions at cover a number of common use cases — events, organizations, people, products, recipes, reviews — it makes a good starting point.

Microformats and RDFa

So how does Microdata fit with Microformats and RDFa? Well, the WHAT-WG, which helps to develop the HTML5 spec, decided the flame wars provoked by the debate over whether to use Microformats or RDFa lacked sufficient vehemence, so they added a third definition of their own.

Actually, the reasoning seems to have been something like this: Microformats are a really good idea, but essentially a hack. Because Microformats rely only on the class and rel attributes, writing parsers to read them is complicated.

At the same time, RDFa was designed to work with the now-defunct XHTML 2.0 spec. Although RDFa is being ported to work with HTML5, it can be overly complex for many use cases. RDFa is a bit like asking what time it is and having someone tell you how to build a watch. Yes, RDFa can do the same things HTML5 microdata and Microformats do (and more), but if the history of the web teaches us a lesson, it’s that simpler solutions almost always win.

Further Reading

Before you dive into microdata, be sure to check out all the options. Google has a nice overview on adding microdata to your page, and offers examples using all three markup syntaxes. Mark Pilgrim’s Dive Into HTML5 also devotes a chapter to microdata with more detail on how microdata parsers read your markup.

Also, keep in mind that it isn’t just search engines that stand to benefit from microdata on your pages. The HTML5 spec also defines a set of DOM APIs for web browsers to read and manipulate microdata on your pages. At the moment, no browser supports the API, but most probably will eventually.

The more information you can give the web, the more it can do with that information. Eventually, search engines could use microdata to find your friends on the web (like XRD and WebFinger) and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using.

See Also:

Read more from source

Firefox JaegerMonkey Builds Are Available

Posted September 11th, 2010 by admin No Comments »

Not the official JaegerMonkey logo

Mozilla has shipped a new pre-release build of Firefox 4 with its latest JavaScript technology, JaegerMonkey, baked in.

To try it out, you’ll need to install one of Mozilla’s nightly JS Engine Preview builds. The JaegerMonkey-equipped browser was made available Thursday. Keep in mind, this is pre-release software and should be used only for testing.

JaegerMonkey has a dramatic impact (in the positive direction) on Firefox’s core JavaScript engine, TraceMonkey, which shipped with version 3.5 of the browser.

“We knew we needed another major upgrade for Firefox 4.0,” says Mozilla’s David Mandelin in a blog post about the release.

It’s a welcome addition. Chrome, Safari and Opera have all made significant enhancements to their JavaScript capabilities since Firefox 3.5’s release. Internet Explorer 9, due to arrive as a beta this month, is on par with those browsers when it comes to script execution. If all goes well, this new code will be included in Firefox 4 when it ships later this year.

In my informal testing, the new build is much, much faster at running script-heavy websites and demos than the current Firefox 4 beta. It’s about as fast as Chrome on my Mac, which says a lot, considering how much of a speed demon Google’s browser is. All of those JavaScript demos and games that were only really smooth enough to impress in Chrome and Safari are now nice and fluid in Firefox.

You can see some of Mozilla’s recent test data on JavaScript benchmarks (here and here) to get a clearer picture of how JaegerMonkey is helping close the gap to the other browsers.

See Also:

Read more from source

Write Your Name in Bouncy Google Balls

Posted September 11th, 2010 by admin No Comments »

First, there was the Google homepage experiment from Tuesday, which laid out the Google logo in bouncy balls you could click on, jiggle, and bounce. It was done in JavaScript and CSS — contrary to popular belief, it was not HTML5.

Then there was Rob Hawkes’ hack, written in HTML5 canvas.

And now, this: a website where you can post whatever message you want (within the character count limit) and make your own interactive bouncing balls animation. It’s written using Rob’s code.

Long live the web.

Updated: This post originally said Rob’s code was SVG — that was a mistake, it’s HTML5 canvas. Our original post even got it correct. Sleeping at the wheel!

Read more from source

How to Cloudify Your Apple Life. Without Apple’s Help. [Apple]

Posted September 11th, 2010 by admin No Comments »

Click here to read How to Cloudify Your Apple Life. Without Apple's Help.

The Apple internet revolution we needed didn’t happen. We wanted a unified service that would let us store all our media and personal information in the ether. But we didn’t get it. So forget the fruit stand; we’re going rogue. More »

Read more from source

This Week’s Best Apps [Apps]

Posted September 11th, 2010 by admin No Comments »

Click here to read This Week's Best Apps

In this week’s rootin’ tootin’ round up: your jogging, tracked without a sensor; pizzas, adorably delivered; auto-tuned voicemails, regrettably recorded; crimes, committed with multitouch; Yahtzees, rolled; scales, mastered; apps, shopped for with greater efficiency, and so much more! More »

Read more from source

Apple’s Ending the Free iPhone 4 Case Program September 30 [Apple]

Posted September 11th, 2010 by admin No Comments »

Click here to read Apple's Ending the Free iPhone 4 Case Program September 30

As expected, Apple has reevaluated their iPhone case initiative: “We are discontinuing the free case program on all iPhone 4s sold after September 30, 2010.” But they’ll still give you one if you complain. More »

Read more from source

Mozilla Asks, ‘Are We Fast Yet?’

Posted September 9th, 2010 by admin No Comments »

The above charts show the performance of JavaScript engines across different architectures. The tests shown are the common SunSpider and V8 JavaScript benchmarks, with output measured in milliseconds. The tests are run once a day, and the graphs show the last five weeks or so of results.

Go to the real site and click on all the clicky bits.

The green line is Google V8, the red line is Apple Nitro, and the orange and black lines are Mozilla’s two engines, JaegerMonkey and TraceMonkey, respectively. The purple lines reflect Mozilla’s new approach of running the engines concurrently. As you can see, it speeds things up.

But the answer to the question being asked by the URL is “No” — Google is currently either on par with Apple Safari or slightly better, depending on the test and the architecture. Mozilla is improving, but still has a lot of catching up to do.

This testing tool is maintained by Mozilla’s JavaScript team. I found out about it earlier today when John Resig, the guy behind jQuery and a Mozilla employee, tweeted the link. It’s an effective motivational tool, especially since it shows how slow Mozilla’s engines were only a month ago, and how quickly the team is gaining on the leaders.

A couple of caveats: The tests aren’t run in the browser, they are run from the command line. Also, a Mac Mini in doing the testing, so Internet Explorer isn’t represented. From what we’ve seen of IE9’s pre-release code, the browser is incredibly fast. We’re curious to see how its JavaScript engine stacks up.

Also, no Opera. Opera’s Carakan engine is also blazing fast, but it’s not represented here.

Check out the page’s FAQ for more details. Also, the code for the test is open source, so if you have philosophical issues with these methods, build your own testing environment.

Update: Here’s a much more detailed post about Mozilla’s performance on JavaScript benchmarks by Rob Sayre.

See Also:

Read more from source

Related Posts with Thumbnails

You can go back to the previous page or you can go forward to the next page.