Future Of Web Languages

The future of web languages

Mark Birbeckhttp://webBackplane.com/mark-birbeck

Standards

"The nice thing about standards is that there are so many of them to choose from."

-- Andrew S Tanenbaum

Standards are a good thing.

We know from railways and spare parts in guns that even a bad standard is a good thing:

But we've also learned that we rarely innovate through standards; techniques such as Ajax, completely different approaches such as jQuery...these kinds of things usually come from outside of standards.

But the standards process can be a useful laboratory, e.g., XHTML 2 produced RDFa.

The development world has been doing agile for yearsnow the standards world needs to get it.

Modular

We need to create lots of small specifications, rather than one great big one.

XHTML Modularisation takes this approach...HTML 5 doesn't.

In XHTML Modularisation we have some modules that are only concerned with one element (such as Access: http://www.w3.org/TR/xhtml-access/) and even one attribute (such as Role: http://www.w3.org/TR/xhtml-role/).

Semantic

The most important thing I want to look at is the semantic aspects of mark-up languages.

Using semantic mark-up is crucial to improve:

search engine indexing;

user interfaces;

maintainable code.

The main languages of interest when we talk about semantics are RDFa, which allows us to add any metadata to a document, and @role.

But another way to look at semantics is to use high-level languages such as XForms as hooks for 'unobtrusive javascript'.

Use high-level languages
to bind functionality

Using this technique, mark-up languages will also increasingly become programming languages.

Think of JavaScript as the 'assembly language of the web', onto which other things can be built.

The main languages of interest here are XForms, XML Events and SMIL.

Let's begin with RDFa.

The main way that mark-up languages can become semantic is through RDFa.

It's something that I first proposed during work I was doing on XHTML 2, but it has since been broken out into a separate module, and is being worked on with the semantic web group at the W3C.

It's quite a compact language, being nothing more than a set of attributes that can be added to any mark-up language, from XHTML to SVG.

So because it's quite short I'll quickly go through the details of it.

What do we have already in HTML?

Meta, link, etc.

These allow us to say things about the current document.

Zakim Bridge by Paul Keleher

First thing that RDFa does is to add @about.

Probably the most important addition, since you can now talk about other things.

Note that we're still using @rel.

Zakim Bridge by Paul Keleher

Now we're able to talk about other things, not just our document.

Boston Harbor by Paul Keleher

A picture of
Boston Harbor

A picture of
Boston Harbor
taken by
Paul.

Next thing that RDFa adds is a way to indicate text properties anywhere in the document, not just in the head, as with .

Note that we could already add link properties anywhere in the document, through the use of @rel and @href.

A picture of
Boston Harbor
taken by

Paul
.

Boston Harbor by Paul Keleher

@content allows us to set a more accurate value for the property, if the inline text is not sufficient.

A picture of
Christmas Lights
taken on
December 1st.

A picture of
Christmas Lights
taken on

December 1st
.

Christmas Lights by Paul Keleher

We can also indicate data types.

In this example the date is in English and has no year, which makes it difficult to search on.

Christmas Lights by Paul Keleher

A picture of
Christmas Lights
taken on

December 1st
.

But by adding @datatype we can be more specific about the value in @content (or indeed, inline).

Spiral Staircase by Paul Keleher

Spiral Staircases
taken by
Paul Keleher.

We can use namespaces.

This means that anyone can devise their own format, and you don't need to get permission from anyone.

That is, after all, what the web is all about.

(Also, there are lots of formats already out there, that can be reused.)

Spiral Staircase by Paul Keleher

Having the geo data on any document means that a rich client could place it on a map, no matter what it is, or on what document.

Ivan Herman
knows Mark Birbeck and they are meeting today.

RDFa also allows us to indicate the 'type' of an item.

Twitter Name:

markbirbeck

@resource allows us to refer to a URI that we don't want to be a clickable link.

RDFa summary

about and src: what we're talking about

property and content: set text values

datatype: sets the type of a text value

typeof: sets the type of something

resource: same as href, but not clickable

rel and rev: now work with about and src

Improving search

What can we do with RDFa?

The first thing is improving search results.

To illustrate, imagine you are a chemist, and you search for "aspartic acid". This is the result that Google will give you, but as a chemist you also know that the same molecule goes by the name of "asparagine", so to find everything about this molecule you'd have to search on both terms.

But as it happens the problem doesn't end there. If you look at the kinds of results that have come up, you can see that they aren't of much use to a chemist; the first is a Wikipedia article, which might just be useful to some, but after that there are a number of references to health and vitamin sites.

What if the chemist wants to find serious articles on the subject of this molecule?

This is an example of a page of search results that is of more use to the chemist. This page comes from a chemistry-specific search engine, which shows links to sites that will display the structure of the molecule, papers and blog posts on the subject of the molecule, and so on.

But with better metadata, this kind of information could appear in the search results.

And it might happen sooner than you think.

Yahoo! have started to augment their index data with other pieces of information that they find, either embedded in the page, or via an extra feed, using a format called DataRSS...which is RSS plus RDFa.

This information is stored alongside the indexed data, and is then available for use in the display of enhanced results.

An example of an enhanced result might be the display of information about a person in a different way, such as showing their picture:

In this example I've searched for a friend of mine called 'Keith Teare', and a number of results show up for him, but you can see that his LinkedIn result has been specially formatted.

It's still early days for Yahoo!, but there is already a lot you can do with this. And once they start indexing RDFa properly, then the chemistry example will become perfectly possible.

Improve user experience

The next thing we can do with RDFa is to improve the user experience.

Examples using RDFa

Display a Yowl message: http://code.google.com/p/lib-xh/source/browse/branches/0.6/test/rdfa/simple-cal.html (FOAF and calendar)Create a tooltip: http://code.google.com/p/lib-xh/source/browse/branches/0.6/test/rdfa/simple-chem.html (chemistry) and http://code.google.com/p/lib-xh/source/browse/branches/0.6/test/rdfa/simple-ebay.html (eBay)Load further triples: http://code.google.com/p/lib-xh/source/browse/branches/0.6/test/rdfa/simple-books.html (Amazon) and http://code.google.com/p/lib-xh/source/browse/branches/0.6/test/rdfa/simple-twitter.html (Twitter)

@role operates at a slightly dfferent level to RDFa, in that it provides semantics about the elements, rather than the content.

Customers

About Us

Web languages asprogramming languages

The last thing I wanted to show was the use of web languages as programming languages.

The most important languages from the Ajax world's point of view are XForms and SMIL.

XForms

XForms is packed with features to make it easier to build dynamic forms, such as dialog-boxes, validation, sliders, dependency-engine, and so on.

SendYour email has been sent.

For example, the XForms message element can be used to indicate that a modal dialog should be displayed.

But there is no reason that the message action can't be used in other applications. In other words we're using the XForms semantics, in non-XForms applications.

XML Events

XML Events is a standard for specifying event handlers, but using XML rather than script.

Synchronised Multimedia Integration Language has many features to do with video and audio, but it also contains a number of features to do with changing property values, which is essentially what Ajax animation libraries do.

Animate

This example is difficult to lay out, but it essentially 'unhides' a hidden element, and also changes the width of another element.

Examples using XForms,
XML Events, and SMIL

SMIL: http://ubiquity-xforms.googlecode.com/svn/branches/0.1/test/smil-animate-set.html

XForms range control using Google Maps (requires XForms processor): http://libxh-apps.googlecode.com/svn/trunk/tutorials/custom-controls/map/map-range.html

XForms output presented as a clock using Silverlight (requires XForms processor and Silverlight): http://libxh-apps.googlecode.com/svn/trunk/tutorials/custom-controls/silverlight-clock/clock.html

The Ubiquity Library

Ubiquity XForms is an open source project to implement XForms as an Ajax library:

http://ubiquity-xforms.googlecode.com/

Currently the library runs on YUI, but it has been designed so that other libraries can be swapped in.

IBM have sponsored us to take the library open source, and then document it, produce tutorials, and so on.

Summary

Smarter mark-up
languages make
programming web
apps easier (and
portable)

High-level mark-up languages like XForms, XML Events and SMIL, as well as extensions like RDFa and @role, provide an enormous number of 'hooks' for unobtrusive JavaScript.

By using standard languages as the hook for the script, it's possible to repurpose the code for other environments, as well as to switch out the underlying library.

References

Me: http://webBackplane.com/mark-birbeck

My blog: http://internet-apps.blogspot.com

Main RDFa site: http://rdfa.info

RDFa parser: http://lib-xh.googlecode.com

RDFa in detail: http://www.swcube.com/rdfa

Ubiquity XForms:
http://ubiquity-xforms.googlecode.com

Business

Future Of Web Languages