Click here to return to our portfolio

RSS feeds and XML are great things. Through the use of standard APIs, they allow you to pull out data from any website that supports these protocols, and reuse the collected material in your own applications. But what if you want to do the same with a website that has neither RSS feeds, XML, nor a dedicated API ? Well, you use dapper!

What is dapper?

dapper is a service that allows you to extract and use information from any website on the Internet. For those familiar with web services, you can think of dapper as an API maker. For the rest of you, Dapper allows you to build web applications and mashups using data from any website without any programming. Basically, what dapper does is providing an easy mechanism to process unstructured information from HTML, clean it, transform it and re-emit as structured XML, which can be then reused into an host application.

How dapper works

The idea behind dapper is to create an automatic, visual way of extracting information from HTML pages. It works by taking a few sample pages as input and then letting users visually specify the information that should be extracted. Each page is treated like a record in a database. The system runs a quick similarity analysis between sample pages. Even though the analysis is very quick, there is a non-trivial tree-matching algorithm - fine-tuned for HTML - that powers this aspect of dapper. After analyzing the pages, dapper presents the user with a highlighter tool for selecting attributes of a record. The resulting set can then be exported in various formats (RSS, XML, plain HTML, ...) and reused at will.

Legal considerations

Since dapper can be used to extract contact from virtually every website that exists, its terms of use won't allow the system to be held liable for any sort of copyright infrigement, and will immediately comply with any verified request by the lawful owner of the content to cease using his content.

So remember: before you crawl the web to find some food for your apps, keep in mind that using a free app to do so doesn't mean the data is free as well. Always read the licencing carefully.

That said, dapper is certainly one of the most useful tools we've featured in our columns!

Get it!

» Dapper

It's always interesting to dig into others's pages. Not for stealing, but for learning. It's good to interact with other developers/designers, because you can always learn from anyone, regardless if they are a newbie or an expert. Now if you have Firefox, you can simply stick to the web developer toolbar, that contains lots of useful features. But what would you do if you had the ill famed Internet Explorer or any browser which does not have the features like Firefox. XRAY rescues you from such situations.

XRAY is a bookmarklet (a link that you drag in your bookmark toolbar and that you invoke from any page on the web) that allows you to see within the elements of a web page and get informations about any element in this web page.

The installation of XRAY is, again, deadly simple : just drag and drop the bookmarklet on the browser's bookmark toolbar and it's done. Now all you have to do is navigate to the page you want to examine, and let the magin happen...

An example of XRAY at work

XRAY has been tested on Safari 2 and 3 on Mac OS X and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows, and most likely Linux as well. The most exciting thing is that XRAY now works with Internet Explorer 6+ on Windows.

» Get XRAY
» Read detailed instructions

When it comes to blogging, you can rapidly drown yourself in the ocean of available solutions. Dotclear, Wordpress, Blogger, Skyblog, Kelblogs, Squarespace... You name it! However, all those heavy contenders may lack a bit of simplicity. That's where Chyrp comes to play.

Chyrp logo

Chyrp is a blogging engine designed to be very lightweight while retaining functionality. It is driven by PHP and MySQL (with some AJAX thrown in), and has a theme and module engine, so you can personalize it the way you want.

Chyrp homepage

Chyrp is an hybrid between a lightweight feed client like Twitter and a full blogging platform like Wordpress. It’s built with simplicity in mind and it’s made basically so you can do what you want with it. It’s also open source, so if you happen to be displeased with anything, you’re free to do your own tweaking. Chyrp is flexible enough to be used in any context — whether it be for your personal thoughts or for corporate propaganda. It comes with a number of optional plugins that'll add more and more functionalities as diverse as comments, twitter, Jaiku, WYSIWYG editing, foreign languages or Google Analytics support.

An example of a Chyrp-driven blog

Chyrp relies on good old HTML for rich text formatting of both blog entries and pages — a blessing for anyone who doesn't want to learn yet another markup language. However, despite beeing extremely simple it won't sacrifice the essential features, like saving a post as a draft for later editing or limiting its visibility to registered users only.

If you plan to turn your blog into a money-making collaborative publishing platform, then Chyrp probably won't be the right choice. However, if you are looking for a lightweight blogging engine that you can easily customize to fit your less ambitious needs, check out Chyrp.

» Click here to download Chyrp

Every website includes a certain part of interaction with the visitor, most often through forms people have to fill in in order to get more info, ask for a quote, get in touch, leave a comment, etc. Designing a form is certainly not what web designers like best. In fact, if you're like me, you should rather hate this step. Whatever I try, my hand-coded forms always looked ugly and amateurish. Until one day, I found this lovely little tool that designs perfect forms: Appnitro's pForm.

pForm lets you create great-looking HTML forms in seconds, through a comprehensive 3-step process : first, you choose a color template.

Creating a form with pForm - step 1: choose a color template

Then, you place your various elements on your form (you choose between generic elements like textfields, textareas, or you use predefined ones like name, date, country), edit them and reorder them as you wish through drag-and-drop.

Creating a form with pForm - step 2: put elements on your form

Finally, you download a .zip archive that contains all the pieces of your form (CSS, HTML, images and javascript). Below is a form I created in exactly 30 seconds!

Creating a form with pForm - step 3: download the form elements and put it on your website

One thing pForm doesn't include in your form is the validation part. This is something you'll have to take care of on your own -- and I think it's a good thing, since we all have our preferences for validating user inputs (personnaly, I like to rely on some prototype-based libs). However, if you need the full package, Appnitro has a full-featured version, called MachForm, that includes validation, relies on PHP, integrates nicely with a MySQL database, and costs as low as $39 for a single site license.

» Appnitro's pForm
» Appnitro's MachForm

© 2008 The Art Company – All rights reserved.
"The Art Company" brand and logo are the property of The Art Company.
All other brands and names are the property of their respective owners.
XHTML - CSS