Blogging Roller

WIP: Embedded Properties in HTML

2011-04-07T21:57:52+00:00

This is the third in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Enable easier integration and better search across integrated web applications and sites by using standard mechanisms (e.g. Microformats, RDFa) to embed property values in HTML pages.

Motivations

Enable integrated web applications to read, parse and make use of each others data
Enable better search across integrated web applications

Related Patterns

Links
Web APIs
Linked Data + REST

In this pattern, you define different types of resources or “objects," and the properties may be associated with each, or you adopt an existing vocabulary. You define a way to embed type information and properties values into HTML, by embedding name and value pairs in a way invisible to a user or by marking up strings of visible text as property values, or you adopt an existing technique.

For example, a cooking web site could share recipe data using this pattern by presenting each recipe with embedded property values to make it easy for other web applications, mash-ups and search engines to parse out the different parts of the recipe, title, ingredients list, list of steps, etc. This is a real example, by the way, Google indexes recipe data in HTML pages marked up in either Microformat-style or RDFa.

If you present each web page as a resource with a type, or multiple types, and embedded property values then you don’t need to define and provide a special “REST API” to allow other web applications to access your data.

This pattern can enable more powerful search capabilities across integrated web application because search engine’s can be aware of and provide special indexing for those different types of resources and properties.

There are at least three different standard ways to embed data in HTML: Microformats, HTML Microdata and RDFa, each of which I’ll explain below.

Microformats

According to Wikipedia “Microformats emerged as part of a grassroots movement to make recognizable data items (such as events, contact details or geographical locations) capable of automated processing by software, as well as directly readable by end-users.” A community grew around Microformats and this community has worked to define Microformats for a variety of use cases. The microformats.org web site lists nine microformats, including hCard for sharing contact information, hCalendar for sharing events and hReview for sharing movie and book reviews.

The basic idea of Microformats is to use existing HTML element attributes, specifically rel and class, to convey types of things and properties of those things. Here’s an example from Wikipedia: to represent information about a geographic location in HTML, the Geo Microformat uses the syntax below:


   The birds roosted at
     <span class="geo">
     <span class="latitude">52.48</span>,
     <span class="longitude">-1.89</span>
   </span>

The outer-most span’s class element indicates the type "geo" and the inner spans carry the "latitude" and "longitude" property values.

If you want to take advantage of Microformats in web application integration, then you pick one of the existing formats or you invent a new one, ideally by working with the Microformats community to do so.

Another approach for implementing Embedded Properties in HTML is HTML itself.

HTML(5) Microdata

HTML Microdata is a W3C working draft, a specification that defines ways to embed property values in HTML. As Mark Pilgrim explains in Dive Into HTML5, HTML Microdata “annotates the DOM with scoped name/value pairs from custom vocabularies.” This is very similar to what Microformats do, but instead of “overloading” the class attribute, HTML Microdata adds some new HTML attributes to enable embedded property values.

HTML Microdata enables you to mark-up an HTML element as an item that contains properties. You do this via the itemscope attribute, you indicate the item’s type via the itemtype attribute and each property is indicated by the itemprop attribute. Here’s an example, also from Pilgrim’s book:


   <TABLE itemscope itemtype="http://data-vocabulary.org/Person">
     <TR><TD>Name<TD>Mark Pilgrim
     <TR><TD>Link<TD>
       <span itemprop="url">
       <A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
       </span>
   </TABLE>

The table element defines the scope of the item and the type of the item is a URL http://data-vocabulary.org/Person which indicates that the item represents a person. The enclosed span element carries the “url” property of the person.

It’s good to have a standard way to encode types, scope and property values in HTML, but you also need standard vocabularies of types and properties to make this approach successful. There are some HTML Microdata vocabularies defined at data-vocabulary.org and HTML Microdata can also be used with RDF, opening up a huge number of vocabularies.

RDFa

RDFa is a W3C recommendation, a specification that defines ways to embed RDF data in HTML and XHTML. Like HTML Microdata, RDFa adds new attributes to HTML to enable this. Let’s look at an example from the Wikipedia page on RDFa, which uses two of these attributes about and property:

 
   <div xmlns:dc="http://purl.org/dc/elements/1.1/"
     about="http://www.example.com/books/wikinomics">
     <span property="dc:title">Wikinomics</span>
     <span property="dc:creator">Don Tapscott</span>
     <span property="dc:date">2006-10-01</span>
   </div>

The above example embeds some property values about the book Wikinomics, which is identified by URL http://www.example.com/books/wikinomics. The example provides a title, creator and date values about that resource, and it doesn’t say what type of resource exists at the URL, but it could.

The advantage of the RDFa approach is that it ties in with the growing RDF / Linked Data movement, and the huge number of vocabularies from almost every field of endeavor. RDFa has some momentum and has been adopted by Facebook in its OpenGraph Protocol and Best Buy for exposing catalog data in standard ways. However, HTML Microdata can also be used with RDF, so RDFa is not the only way to go if you favor Linked Data.

Wrapping up

We've talked about three different ways to implement Embedded Properties in HTML, so which one do you choose? It's not to me whether one of these techniques will dominate. Google is hedging its bet, so to speak, by indexing all three types of data. If you don't already have a favorite, one way to choose is to look at what others in your community, company or "industry vertical" are doing. The network effect applies here, so if one technique is already favored amongst web application or sites in your space, then go with that.

Next up: Resource Preview

WIP: Links

2011-03-21T06:49:23+00:00

This is the first in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Use links as a way to integrate web sites & applications via navigation and relationships between resources.

Motivations

Provide navigation between integrated web sites & applications
Create meaningful relationships between web resources

Related patterns

Common Navigation
Embedded Properties in HTML
Resource Preview
Delegated Selection & Creation
Linked Data & REST

The web is the web and hypertext is hyper because of links. Links allow for the most deep and also the most shallow forms of integration. Links enable navigation and with some discipline, links can also express relationships between resources. There are a variety of ways to express links; the standard and most popular way is to use HTML, but there are others and I’ll cover them below.

Links enable navigation

With links, you can provide navigation between web applications at the application, or the feature level. One example is providing a link from the blog application of a social software suite to the wiki, forums and other component applications. Another is providing a link from one application to one specific part or feature of another application. This type of linking is easy to implement but fairly shallow. It’s convenience and not much more.

Links can express relationships

What’s more useful and powerful, is using links to create meaningful relationships between the resources provided by web applications. For example, there's obvious value linking a defect in a bug tracking system to the source code changes that fixed the bug in a source code management system. Or, you might link a Requirement resource to the Work-Item resources that implement it. By the way, those example are drawn from the OSLC specs for ALM / PLM integration.

If you want to use links to establish relationships, then you do have to have some discipline about the URLs you offer and the URLs you link to. You have to treat links with the same rigor and respect you’d give primary and foreign keys in a relational database. For example, if you make a resource available in different formats, and each at a different URL, one that ends in “.html” and one with “.xml” and one with “.json” then you’ve got three URLs that refer same resource. In this case, it’s better to use Content Negotiation so you can offer one URL that others can use to link to the resource.

One way to get yourself some link discipline is to adopt Linked Data and the RDF data model, which ”extends the linking structure of the Web to use URIs to name the relationship between things as well as the two ends of the link.” See also the Web Annotations and Linked Data & REST pattern.

Links can be expressed in standard formats

The standard way to represent links on the web is through HTML and in HTML, links are expressed in a variety of ways, via anchor tags, via image tags, the link tag and others. There are other standard ways to express links, but none as popular as HTML.

HTML

In HTML, links can be expressed via the <a> element, for expressing a hyperlink in text, and the <link> element, for expressing a link to a resource associated with the page.

<a> and <link> links can specify not only the URL of the link but also the relationship type of the link, as well as content-type and language for the resource that lies at the other end of the link. For example, a link type of rel=”next” indicates that a link points to the next page in a series of pages, or multi-page article. A link type of rel=”stylesheet” indicates that the link is to style-sheet to be applied to the current page. There are a standard set of link relationship types in the HTML spec. Here's an example from this very blog page, the link to this blogs Atom feed:



<link rel="alternate" type="application/atom+xml" title="Recent Entries (Atom)"     
   href="http://rollerweblogger.org/roller/feed/entries/atom" />

Atom

The Atom Syndication Format defines a <link> element, modeled on the one in HTML. Atom adds a length attribute, the size in bytes of the resource at the other end of the link. Atom defines some new links types, alternate, related, self and enclosure. Atom also allows new links to be added and a Atom link-type registry is maintained at IANA.org. Here’s an example link from the Atom comments feed for this blog:



<link rel="alternate" type="text/html" href=
"http://rollerweblogger.org/roller/entry/apache_roller_5_0_rc3#comment-12941523" />

RDF

Another standard way to express links is RDF, using any of the RDF serializations: RDF/XML, Turtle, N3 and soon, there will be a W3C standard for RDF/JSON. Yes, there will be a standard way to express links in JSON and that's good news. For now, we're stuck with RDF/XML. In RDF/XML a link is expressed via the rdf:resource attribute, so for example a link from a Requirement to the user that created the requirement might look like this:



<dc:creator rdf:resource="https://localhost:9443/user/676" />

RDF (Wikipedia page) goes way beyond the couple dozen link attributes and relationship types provided by HTML and Atom. RDF provides ways to specify property values about any linked resource, and property values of each link. RDF also provides ways to define vocabularies of properties.

Wrapping up

It's time to wrap-up. For better or worse, I’ve written more than I expected to write and I’m nowhere near done with the topic of links. I hope I’ve covered the important parts. Comments are open so please correct me and make suggestions if you got some. This is the first pattern that I’ve written up, so I’m also interested in comments about the format, level of abstraction, value, etc. as well.

Next up: Common Navigation.