This workshop will take you from start to finish building a brand new module. Hopefully, by the end of this workshop, you'll be able to build your own modules without looking back.
Every module should start from the skeleton. The skeleton contains all the required fields for AOL's ModuleT microformat. It gives you placeholders for all the important elements of a module, and gives you a solid foundation to start with (which is why we called it "skeleton" to begin with).
Here is the source of the skeleton:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://iamalpha.com/.developer/profile">
<title>Module Title</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://iamalpha.com/.developer/css/manifest.css"/>
<!-- Include Dojo and our SDK if you need it: -->
<!-- <script src="http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.2.2/dojo.js" type="text/javascript"></script>
<script type="text/javascript" src="http://iamalpha.com/.resource/jssdk/lop.js"></script> -->
</head>
<body class="module" id="module-name">
<h1><span class="module-title">Module Title</span>: Version <span class="version">1.0</></h1>
<h2>Edit Interface</h2>
<!-- If your module doesn't have an edit interface, please don't include its container. -->
<!-- <div class="edit module-name"> </div> -->
<h2>View Interface</h2>
<div class="view module-name">
<div class="head"><h3></h3></div>
<div class="body"></div>
</div>
<h3>Description</h3>
<p class="description">Description goes here</p>
<h3>Detail</h3>
<p class="detail">Detail goes here</p>
<h3>License</h3>
<p><a href="http://licenseurlgoeshere" rel="license">Licensed under X</a>.</p>
<h3>Author Information</h3>
<ul>
<li class="author vcard"><a href="mailto:you@somedomain.com" class="email fn">Your Name</a> - <a href="http://somedomain.com" class="url">Homepage</a></li>
</ul>
<h3>Module Properties</h3>
<dl class="xoxo module-properties">
<dt class="liquid">Liquid width module?</dt>
<dd>true</dd>
<dt class="allow-multiple">Allow multiple module instances on a single page?</dt>
<dd>true</dd>
<dt class="default-width">Module's default width (in pixels):</dt>
<dd>0</dd>
<dt class="minimum-width">Module's minimum width (in pixels, please, see I asked nicely that time):</dt>
<dd>0</dd>
<dt>Module thumbnail image:</dt>
<dd><img src="" alt="thumbnail for my module" class="thumbnail"/></dd>
<dt>Documentation:</dt>
<dd><a href="http://yoururl.com/moduledocs" rel="documentation">Documentation</a></dd>
</dl>
</body>
</html>Now, let's go over the parts of the skeleton that are specific to modules.
<body class="module" id="supercool">
<h1>Supercool: Version <span class="version">1.0</span></h1>
. . .
</body>This part of the document shows where the module begins and ends. It is the container for the module. The element with a class="version" attribute is the part of our microformat that indicates what version of our module this is. The id="supercool" specifies the actual id of our module.
Since this is our first version, we will leave it at 1.0. The title of the module inside the h1 (in this case, "Supercool") is for display only (it doesn't have any microformat attributes).
<div class="view supercool">
<div class="head"><h3>Supercool Module</h3></div>
<div class="body">This is a very cool module indeed, because I wrote it. You will view it, and you will like it.</div>
</div>The view portion of the module is the part of the document that is in play when the module is shown on an AIM Page. Our view starts with a div element. Note that our div has class="view supercool". This is in the format "view id" where id is the id of your module.
The h3 with a class="head" contains the title of the module that will be displayed to the user (here,"Supercool Module").
The div with a class="body" should contain the text to be displayed by our module. For our first module we're just displaying some text that explains why we're so awesome.
It's not required that you use h3 and div for the head and body of your module's view, but we recommend it. You could use any heading element (h1 - h6) for the head, and any block element (a list, paragraph, div, blockquote, and so forth) for the body, as long as they have the right class.
<p class="description">My Supercool Module is a proof of concept to show the world that I can create a module. As you can see, I've proved the concept successfully.</p>This section describes the module. It is not actually displayed to the viewer of an AIM Page, but it will be seen in the publishing environment where people create AIM Pages.
A good module description shouldn't contain any acronyms, unexplained terms, or things that might confuse the user.
Also, your description should be no longer than a short paragraph. If you need more than one paragraph, put your paragraphs inside a div with class="description".
<p class="detail">I could go on and on about how awesome I am, but I'll spare you.</p>This is where aspiring writers can go on and on, in great detail, about their module. It should contain whatever information you think a fellow developer might need or want to know about how your module works. We don't aspire to be writers, so we've kept ours short and sweet.
<h3>Author Information</h3>
<ul>
<li class="author vcard"><a href="mailto:you@somedomain.com" class="email fn">Your Name</a> - <a href="http://somedomain.com" class="url">Homepage</a></li>
</ul>The author information is the place to put information about yourself so that both users and systems that use your modules know where to look for you if they want to send you presents, hire you, or make jokes at your expense. What's the point of writing a module if you don't get any credit?
The author information (sort of) follows the hCard microformat.
<h3>License</h3>
<p><a href="http://licenseurlgoeshere" rel="license">Licensed under X</a>.</p>Every module must have a license. This section has a link to the page with your license information.There are many different licenses that you can use for your module. Here are some sample licenses for software:
And here are some sample licenses for content:
That's it — we've completed our first module!
You might notice that we have not covered every bit in the module skeleton. The missing parts will be covered in the remaining workshops as we build more complex modules.
We validated it with the AOL ModuleT validator, and it reports no errors, so we're good to go.
Our module id is "supercool," so to package it up for uploading, we create a zip file named "supercool.zip," which contains a directory called "supercool." That directory should contain a file called 'index.html' which has the complete HTML of our module. Here is a link to the HTML file.
Here's what our module looks like when it runs:
If you grasp everything here, it's time to move on to Workshop 2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://iamalpha.com/.developer/profile">
<title>Supercool Module</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://imakealpha/.developer/css/manifest.css"/>
</head>
<body class="module" id="supercool">
<h1>Supercool: Version <span class="version">1.0</span></h1>
<div class="view supercool">
<div class="head"><h3>Supercool Module</h3></div>
<div class="body">This is a very cool module indeed, because I wrote it. You will view it, and you will like it.</div>
</div>
<h3>Description</h3>
<p class="description">My Supercool Module is a proof of concept to show the world that I can create a module. As you can see, I've proved the concept successfully.</p>
<h3>Detail</h3>
<p class="detail">I could go on and on about how awesome I am, but I'll spare you.</p>
<h3>Author Information</h3>
<ul>
<li class="author vcard"><a href="mailto:you@somedomain.com" class="email fn">Your Name</a> - <a href="http://somedomain.com" class="url">Homepage</a></li>
</ul>
<h3>License</h3>
<p><a href="http://licenseurlgoeshere" rel="license">Licensed under X</a>.</p>
</body>
</html>