Underground Web Designs Blog

Recently I created two plugins for Tiny MCE, the WYSIWYG editor that MODx uses that allow you to easily add contact information and event information to your posts and webpages, using the hCard and hCalendar microformats. Unfortunately, installing these plugins on MODx is not quite as streight forward as it might be, so here are some step by step instructions:

1. Download the TinyMCE hCard and hCalendar plugins from UndergroundWebDesigns.com. Once the files are downloaded, unzip them. Inside the unzipped folder you will find a folder with the name of the plugin, and a readme file.
2. Download the TinyMCE 3 plugin for MODx and install it following the directions on it’s site. This is fairly easy, you just upload the files and run an install program.
3. Once TinyMCE 3 is installed on your MODx site, open your favorite FTP program, and upload the hCalendar and hCard folders you downloaded and unzipped in step 1 into http://www.yoursite.com/assets/plugins/tinymce309/jscripts/tiny_mce/plugins/
4. Log in to your MODx Admin area, and click on “tools - > configuration”.
5. In the configuration screen, click the “Interface and Features” tab, and scroll down to the bottom where the TinyMCE settings are.
6. Make sure the TinyMCE Theme is set to “Custom”
7. In the “Custom Plugins” box, move to the end of the list of plugins and add “hcard” and “hcalendar” (no quotes), to the list, separated by commas.
8. Add “hcard” and “hcalendar” (no quotes) to one of the “Custom Buttons” boxes, again separated by commas.
9. Save your changes.
10. Open a page to edit. You should see two new buttons in the Document Content edit window… one to insert hCard data, the other to insert hCalendar data.

Everybody wants better to make their website stand out on Google right? Well what if you could get a link to a map of where your business is located — in Google’s own search results? Think it can’t be done? Check out this live search results page.

Microformats are a way of adding extra data to the HTML on a web page so that both computers and humans can understand what the information means. This could be information about an upcoming event (date, time, location), or a person or business (name, address, email address, etc). In this case, Google is using contact information marked up using the hCard microformat to display an extra link in it’s search results that displays a map of the business’s headquarters.

Now, adding an extra link to the search results is cool, but it’s nothing compared to what can and will be done as microformats become more popular. Because they allow computers to understand the data on your website better, microformats can lead to smarter search engines, better organization of data, and less manual input of information.

The future of the internet revolves around programs doing their own research and sharing information with each-other, and one of the key technologies will be the use of microformats on the web. Best of all, using microformats has never been easier. If you use Wordpress, check out my recently released Micro Anywhere plugin for Wordpress. Install the plugin and you can be adding event and contact information to your pages and posts within minutes.

The internet has done great things by providing access to nearly unlimited information. The next stage of internet evolution will enable software to understand and process this information for us, so that we only see what we want to see, when we want to see it. Will your site be one of the first to make use of this exciting technology on a massive scale?

At the Webvisions conference I attended a couple weeks ago, there was a lot of talk about microformats and open protocols that would enable the next generation of internet applications to not only share data, but to understand more and more data that resides on ordinary webpages.

Indeed, standards such as microformats are not new, they just haven’t been used too much. Now is, I believe, the time to start changing that. Instead of re-inventing the wheel, I’ve been working on creating some plugins for systems already in use so that they can benefit from the use of microformats. Today the first of these plugins was finished, and has been released.

The plugin is an hCalendar plugin for TinyMCE. TinyMCE is the WYSIWYG editor used in many popular content management systems and blogging softwares, including MODx, my CMS of choice, so I hope that by making this plugin available to such a wide audiance, many more people will be able to use microformats on their webpages and in their blogs… even if they don’t fully understand how they work.

The plugin works by opening a dialog box where a user can input event details including the event title, location, url, dates and times, a description, and some tags, and then encoding that data into an hCalendar event on the page. Once the data has been encoded into the hCalendar microformat, any software that supports hCalendar can extract the event details and add it to a calendar, run a search for similar events, or anything else.

To download the plugin for your own website or blog, please visit the hCalendar plugin page on my main site.

I would love to hear your feedback about this plugin in the comments. I hope to create some more plugins, including plugins to handle hCard data and Geo data once I have some more time.