Custom non-visible data in HTML 5

July 14th, 2008

Short and sweet: HTML 5 offers custom data attributes on HTML elements, intended to store custom data, which can then be handled on-page by JavaScript, or off-page by other (web-)applications.

John Resig discusses a number of useful benefits.

Category: Javascript, Semantic Web

Author: JJ Halans

Tags: , , , , ,

PodiPodi/Catalog web-based CLI

June 15th, 2008

PodiPodi is a web-based command line interface like Quicksilver (on Mac) or Enso (on Win) for the desktop:

“A special widget which integrates a smart command line interface and a bunch of additional services directly into your website to perform common web-tasks”

PodiPodi offers an alternative UI to your website for power-users. By hitting a shortcut like Ctrl+z you get a jQuery powered command line widget which gives you additional information on the site, a sitemap, Flickr pictures, google search,… Have a play at their playground.

“PodiPodi” doesn’t really roll of the tongue very well though…

An alternative to PodiPodi (which requires web developers to integrate this into their site) could be a Firefox extention like Catalog which puts the same powerful command line interface under your fingers, but then for every webpage you visit. Unfortunately active development seem to be stalled.

Both apps show the power of extending your website under the hood, giving your visitors more power on how they navigate and use your website.

Category: Javascript, Microformats, Semantic Web

Author: JJ Halans

Tags: , , , , ,

Markup as an API

October 8th, 2007

HTML describes documents, and the link between documents.

We read these documents, we print them, bookmark them for later retrieval. We might copy/paste content into another document, constructing a new one.

If we wanted to automate this, we’d resort tot screen scraping. But this easily breaks, as there’s no standard or “contract” between the original site and the screen scraper.

Or we’d go for duplicating content into a new format like XML, with an agreed upon format. That way we could build product price aggregators using SOA Web Services with SOAP, WSDL,… Or use a REST architecture which takes us a bit closer back to our original HTTP request.

Most popular formats for sharing (XML) data is RSS and Atom, were again we duplicate the content we publish online.

But we’ve come a long way last couple of years, towards Web Standards, pushed by organisations like the Web Standards Project (WaSP) and Web Standards Group (WSG). They promote standards for separation of content, styling and behaviour, and the use of semantic HTML.

And then there’s the W3C, who promotes the Semantic Web as knowledge representation, using Resource Description Framework. RDF is a general method of modelling information making statements about resources in triples. Triples represent a subject-predicate-object expression, for example JJ - isBornIn - Belgium.

The W3C’s Web Ontology Language, or OWL, provides additional vocabulary and formal semantics, providing greater machine interpretability of Web content, but with added complexity.

But as of yet there isn’t much RDF data online, or ontologies are missing for many application domains. The W3C’s projects are rather academic, and aren’t close to any web developer’s mindset.

What is closer to the web developer though is semantic HTML, the correct use of heading levels and paragraphs to introduce structure, blockquotes and correct use of tables, for tabular data.

Now we add rich semantics, standardised Microformats. They are small pieces of metadata, within the markup, using CSS. They are discoverable, interpreted by machines.

Category: Javascript, Microformats, Semantic Web

Author: JJ Halans

Tags: , , , , ,

Scraping HTML with innerHTML or jQuery

September 11th, 2007

A couple of nice write-ups on how to scrape HTML using innerHTML at Pathfinder Development:

A common solution has been to proxy and scrape an application with a combination of XQuery and TagSoup (to fix the ugly, broken HTML, dontcha know), but it is possible to do this purely in the browser.

or with jQuery, as Jan Varwig describes:

Fortunately, just the day before, I discovered jQuery, a Javascript framework with strong support for finding DOM-Nodes via CSS, XPath and some custom selectors. The tricky part now was to get jQuery to access the DOM-Tree of the schedule page on kino.de.

Of course, screen scraping would be so much easier using Web Standards.

Category: Javascript, Semantic Web

Author: JJ Halans

Tags: , , , , , ,