AIM Pages ModuleT Microformat

Steven G. Chipman

Principal Software Engineer, AOL

Microwhat?

"Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards."

-- microformats.org

Microwhat?

"Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards."

-- microformats.org

A few examples:

hCard
A simple, open, distributed contact information format for people, companies, and organizations, which is suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML.
XOXO
A simple, open outline format written in standard XHTML.
rel="license"
A simple, open format for indicating content licenses.

Simple, Open...

"The need to syndicate distinct pieces of content and functionality has led to several complex XML schemas and web services. We feel they're all too complex for the "average" developer to create. We need something simpler, that will lead to a larger adoption by the internet at large, not just CMS developers.
This is our attempt at doing that."

-- ModuleT Profile

Just the Stuff You Already Know.

Just the Stuff You Already Know.

In other words, if you can build a web page, you can build a module.

The ModuleT Structure

Module Title & Version:
Two <span> elements that are the children of an <h1>, each with a class of "module-title" and "version".
The Edit Interface:
A <div> element that contains the edit controls of the module. Has a class of "edit module-name"
The View Interface:
A <div> element that contains the markup that makes up what the module will look like when published. Has a class of "view module-name".
Module Description
A <p> element with a class of "description"

The ModuleT Structure Continued...

Module Detail
A <p> element with a class of "detail" with a lengthier narrative on the module's function.
License Information
An <a> element using the rel-license microformat to describe the module's licensing info.
Author Information
A vCard microformat with the module author's contact details.
Documentation
An <a> element with a rel of "documentation" that points to documentation for the module.
Module Properties
A XOXO definition list of framework specific details of the module, such as its width, if multiple instances of it are allowable and a URI to a thumbnail image.

ModuleT is Element Agnostic

The framework doesn't care what tags you use in the module. All it cares about it is that you follow the class definitions.

What Does the Framework do With it All?

The Module Information window.

The Module Info Window

GamerCard Manifest

The Module Information window.

What Does the Framework do With it All?

The Module Info Window, with descriptions of where data is pulled from.

GamerCard Manifest

What Does the Framework do With it All?

The Edit Interface.

How the edit interface renders in the framework.

GamerCard Manifest

HTML for the Edit Interface

What Does the Framework do With it All?

The View Interface

HTML for the View Interface

GamerCard Manifest

The View Interface

What Does the Framework do With it All?

The Module Thumbnail

Use of the Thumbnail image in the Publisher application.

GamerCard Manifest

Thumbnail specification in the HTML

What Does the Framework do With it All?

The Liquid Property

A Liquid Module.

GamerCard Manifest

Thumbnail specification in the HTML

Benefits

Not Just for AIMPages

The Future

Resources

Questions?