Tutorials for building modules, from easy to crazy.
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>One of the easiest ways to create a great-looking module is to embed a Flash movie into the module view. This workshop will show you how to do just that.
Inserting Flash content is pretty simple. We begin by taking the module we created in Workshop 1 and adding the HTML for the Flash movie at the correct location in the document:
<div class="view superflash">
<div class="head">
<h3>Superflash Module</h3>
</div>
<div class="body">
<!-- Start of Flash HTML Code-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="100">
<param name="movie" value="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" />
<param name="quality" value="high" />
<embed src="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" width="300" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<!-- End of Flash HTML Code -->
</div>
</div>One thing to notice about this is that the & in all the URLs has been encoded as & due to XHTML requirements. HTML parsers are a lot less picky about this (among other things), but in order to validate your module as valid XHTML, these need to be encoded properly. Also, now's a good time to bring up the W3C validator: It will break on "embed" tags as not being proper XHTML. Our Module Validator will accept it as it is. If you care deeply about XHTML compliance, output the Flash code with JavaScript, and it will validate at W3C.
That's it – we've completed our Flash module!
We validated it with the Module Validator, and it reports no errors, so we're good to go.
Our module ID is: "superflash," so to package it up for uploading, we create a zip file named "superflash.zip," which contains a directory called "superflash." That directory should contain a file called "index.html," which has the complete HTML of our module. We also include the Flash file itself, though it can be served from another site if you like.
<!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>Superflash Module</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://imakealpha/.developer/css/manifest.css"/>
</head>
<body class="module" id="superflash">
<h1>Superflash: Version <span class="version">1.0</span></h1>
<div class="view superflash">
<div class="head">
<h3>Superflash Module</h3>
</div>
<div class="body">
<!-- Start of Flash HTML Code-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="100">
<param name="movie" value="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" />
<param name="quality" value="high" />
<embed src="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" width="300" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<!-- End of Flash HTML Code -->
</div>
</div>
<h3>Description</h3>
<p class="description">My Superflash Module is a proof of concept to show flash in 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>Time to move on to Workshop Three.
Now we are going to build a module that consumes an RSS feed on the server side. Server-side modules are mostly for folks who have web services and transformations in place. The two pieces that you need on your server are the RSS feed and an XSL transformation file. In our example, we'll take the CNN Top Stories RSS feed and use an XSL stylesheet on a different server to display it all gorgeously.
This module requires server-side parsing, so you will most likely want to have a working local development environment for testing. We've written instructions to help you set up your dev environment .
Now that you have your dev environment set up, the first thing we need to do is change the view portion of our module. We're going to add two new attributes from a new "pub" namespace:
<div class="view NewsExample" pub:src="http://rss.cnn.com/rss/cnn_topstories.rss" pub:style="headlines_rss.xsl">
<div class="head"><h3>News Headlines</h3></div>
</div>The pub:src points to the RSS feed XML. Note that the pub:style needs to be an absolute URL to another host.
Next, we have to define our pub namespace, so we change the html element to:
<html lang="en" xmlns:pub="xmlns">When the module is displayed in an AIM Page, the back end picks up the RSS feed, runs it through our XSL transform file (which is shown below), and then displays the current top news headlines from CNN:
That's it — we've completed our server-side RSS module!
We validated it with our Module Validator, and it reports no errors. The W3C Validator, however, will report errors related to the new namespace, but that is because the W3C Validator doesn't recognize namespaces. If your module passes our AIM Pages Validator, it should upload and work correctly.
Our module id is: "superserverside," so to package it up for uploading, we create a zip file named "superserverside.zip," which contains a directory called "superserverside." 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.
If you think you're ready, move on to Workshop 4.
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output omit-xml-declaration="yes" indent="no"/>
<xsl:template match="/">
<div><xsl:apply-templates/></div>
</xsl:template>
<xsl:template match="channel">
<div style="font-weight: bold">
<xsl:value-of select="title"/>
</div>
<ul>
<xsl:apply-templates select="item"/>
</ul>
</xsl:template>
<xsl:template match="item">
<li><a href="{link}"> <xsl:value-of select="title" /></a></li>
</xsl:template>
</xsl:stylesheet><!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" xmlns:pub="http://developer.iamalpha.com/xmlns">
<head profile="http://iamalpha.com/.developer/profile">
<title>Superserverside Module</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://iamalpha.com/.developer/css/manifest.css"/>
</head>
<body class="module" id="superserverside"> <h1>Superserverside: Version <span class="version">1.0</span></h1>
<div class="view superserverside" pub:src="http://rss.cnn.com/rss/cnn_topstories.rss" pub:style="headlines_rss.xsl">
<div class="head">
<h3>Super Server-Side Module</h3>
</div>
</div>
<h3>Description</h3>
<p class="description">My Superserverside Module is a proof of concept to show a server-side 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>This is where we take everything we learned in Workshop 3 and push it up to the next level by consuming another RSS feed, this time on the client side with AJAX (XmlHttpRequest). (We're going to need to use the JavaScript SDK, and our local development environment for this one, too.) Okay, let's go!
For this workshop, we're going to create a module that displays the most recent sports headlines from AOL Sports.
First, we'll describe the module:
<h3>Description</h3>
<p class="description">The top five sports headlines from <a href="http://sports.aol.com" rel="proxy">AOL Sports</a>.</p>
<h3>Detail</h3>
<p class="detail">This module grabs the <a rel="proxy" href="http://xml.news.aol.com/aolnewsrss.xml?cid=1690&feedtype=manual"> AOL Sports RSS feed</a> via AJAX, parses it, and displays five headlines.</p>Since we're getting headlines from the RSS feed, the markup for our module is pretty simple:
<div class="view top-sports-headlines-example">
<div class="head">
<h3>Top Sports Headlines</h3>
</div>
<div class="body">
<ul class="top-sports-headlines-list">
<li>Loading...</li>
</ul>
</div>
</div>Now, we have to do the hard part and go get our headlines!
First, we need to create a JavaScript function that grabs our headlines and displays them. This is a slightly complicated, because XmlHttpRequest has security rules that only allow connections back to the original server that served the page. We'll get around that with our proxy server.
We want to create unique functions that aren't going to be replaced by someone else, so we'll start with this shell, which we'll call "top-sports-headlines.js" and place it in the same directory as the module HTML:
function topSportsHeadlines(instance, action) {
var success=function(xml) { };
var error=function(xml) { };
}Before we go any further, we need to add a few things to our module so we can get some Ajax going. In the head of the module code, we add the following:
<script type="text/javascript" src="jssdk/lop.js"></script>
<script type="text/javascript" src="top-sports-headlines.js"></script>The two jssdk files may be in different locations, depending on where you installed them when you set up your local development environment. Change the paths to them in the code accordingly.
We also need to make sure our JavaScript runs when the module is viewed, so we'll make the body tag look like this:
<body class="module" id="top-sports-headlines" onload="topSportsHeadlines();">Now we need to write some JavaScript. Here goes:
We need to tell the SDK to use the Ajax stuff, and we also need to set up our success and error functions. We'll start with this:
function topSportsHeadlines() {
var headlineURL = "http://xml.news.aol.com/aolnewsrss.xml?cid=1690&feedtype=manual";
var success=function(xml) { }
var error=function(xml) { }
lop.Ajax.prototype.simpleGet(headlineURL,success,error,null);
}This code won't actually display anything if we run it, but it will probably be the basis for almost any module you build with Ajax, so it's nice to see it this way. The lop.Ajax.prototype.simpleGet() is a library function in the SDK that simply gets XML at a URL, and calls a success or error callback.
We need to fill out our skeleton with some muscles. Here's our plan:
Find all the ul (list) elements in our module.
Of those, we only want to save the one that has a class="top-sports-headlines-list". If we don't find our ul, we can't continue, because we'll have nowhere to put our headlines. And here's the code that does that (additions in blue):
function topSportsHeadlines() {
var headlineURL = "http://xml.news.aol.com/aolnewsrss.xml?cid=1690&feedtype=manual";
var module=dojo.byId(instance);
if ( !module ) {
// This should only happen in standalone mode, so it's OK that we're only grabbing the first one.
var modules=dojo.html.getElementsByClass("top-sports-headlines");
for (var i=0;i<modules.length;i++ ) {
if (dojo.html.hasClass(modules[i],"view")){
module=modules[i];
break;
}
}
}
var list=dojo.html.getElementsByClass("top-sports-headlines-list",module)[0];
var success=function(xml) { };
var error=function(xml) { };
lop.Ajax.prototype.simpleGet(headlineURL,success,error,null);
}Now that we have our ul, it's time to define our error and success conditions. Here's our plan for this part:
ul.And here's the code to do that (additions in blue):
function topSportsHeadlines(instance, action) {
var headlineURL = "http://xml.news.aol.com/aolnewsrss.xml?cid=1690&feedtype=manual";
var module=dojo.byId(instance);
if ( !module ) {
// This should only happen in standalone mode, so it's OK that we're only grabbing the first one.
var modules=dojo.html.getElementsByClass("top-sports-headlines");
for ( var i=0;i<modules.length;i++ ) {
if ( dojo.html.hasClass(modules[i],"view")) {
module=modules[i]; break; }
}
}
var list=dojo.html.getElementsByClass("top-sports-headlines-list",module)[0];
var success=function(xml) {
var dom=xml.responseXML;
var items =dom.getElementsByTagName("item");
for (var i=0;i<items.length;i++ ) {
var item=items[i];
var title=item.getElementsByTagName("title")[0].childNodes[0].nodeValue;
var link=item.getElementsByTagName("link")[0].childNodes[0].nodeValue;
output+="<li><a href='" + link + "'>" + title + "</a></li>";
}
list.innerHTML=output;
}
var error=function(xml) {
output = "<li class='error'>There was an error retrieving the headlines. <a href='javascript:topSportsHeadlines()'>Please try again</a>.</li>";
list.innerHTML=output;
}
lop.Ajax.prototype.simpleGet(headlineURL,success,error,null);
}When the module is viewed on an AIM Page, it will first display "loading..." and then it will go out and grab the RSS feed. It will look something like this:
That's it? we've completed our RSS module with Ajax! We validated it with the Module Validator, and it reports no errors.
Our module id is: "top-sports-headlines," so to package it up for uploading, we create a zip file named "top-sports-headlines.zip," which contains a directory called "top-sports-headlines." That directory should contain a file called "index.html" which has the complete HTML of our module, and the top-sports-headlines.js file with our Ajax code. Here is the HTML file.
Now, we've got some more goodies for you in Workshop 5.
function topSportsHeadlines(instance, action) {
var headlineURL = "http://xml.news.aol.com/aolnewsrss.xml?cid=1690&feedtype=manual";
var module=dojo.byId(instance);
if ( !module ) {
// This should only happen in standalone mode, so
// it's OK that we're only grabbing the first one.
var modules=dojo.html.getElementsByClass("top-sports-headlines");
for ( var i=0;i<modules.length;i++ ) {
if ( dojo.html.hasClass(modules[i],"view")) {
module=modules[i];
break;
}
}
}
var list=dojo.html.getElementsByClass("top-sports-headlines-list",module)[0];
var success=function(xml) {
var dom=xml.responseXML;
var items=dom.getElementsByTagName("item");
for ( var i=0;i<items.length;i++ ) {
var item=items[i];
var title=item.getElementsByTagName("title")[0].childNodes[0].nodeValue;
var link=item.getElementsByTagName("link")[0].childNodes[0].nodeValue;
output+="<li><a href='" + link + "'>" + title + "</a></li>";
}
list.innerHTML=output;
}
var error=function(xml) {
output = "<li class='error'>There was an error retrieving the headlines. <a href='javascript:topSportsHeadlines()'> Please try again</a>.</li>";
list.innerHTML=output;
}
lop.Ajax.prototype.simpleGet(headlineURL,success,error,null);
}<!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" xmlns:pub="http://aimspace.com/modulet/xmlns">
<head profile="http://iamalpha.com/.developer/profile">
<title>Top Sports Headlines</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://iamalpha.com/.developer/css/manifest.css"/>
<script type="text/javascript" src="../../resource/jssdk/lop.js"></script>
<script type="text/javascript" src="top-sports-headlines.js"></script>
</head>
<body class="module" id="top-sports-headlines" onload="topSportsHeadlines()">
<h1>Top Sports Headlines: Version <span class="version">1.0</span></h1>
<h2>Edit Interface</h2>
<p>There is no edit interface for this module.</p>
<h2>View Interface</h2>
<div class="view top-sports-headlines">
<div class="head">
<h3>Top Sports Headlines</h3>
</div>
<div class="body">
<ul id="hlist" class="top-sports-headlines-list">
<li></li>
</ul>
</div>
</div>
<h3>Description</h3>
<p class="description">The top five sports headlines from <a href="http://sports.aol.com/">AOL Sports</a>.</p>
<h3>Detail</h3>
<p class="detail">This module grabs the <a rel="proxy" href="http://xml.news.aol.com/aolnewsrss.xml@cid=1690&feedtype=manual">AOL Sports RSS feed</a> via AJAX, parses it, and displays five headlines.</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>
</body>
</html>If you've already got a Web page, or a piece of a Web page that would make a cool module, why not reuse it? We certainly can't think of a reason not to, so we created these instructions so you can transform your existing HTML into modules like magic.
First the bad news: Not just any old page will work as a module. There are some things that a module requires that a lot of pages out there on the Web don't have. Here's are two requirements:
xmlns attribute in the html tag.Not too bad, right?
So, let's take a page from the Web, and transform it. For this example, we're going to use a page from AOL.com, because it's a pretty good candidate. It's mostly valid XHTML and has a lot of content that would make a decent module. For this example, we're going to use the LiveWeb module, on the right side of the page.
First, let's look at the markup:
<div id="lw" class="smM">
<h4><i>What's Clicking Now</i>LiveWeb?</h4>
<div id="om_liveweb" class="mB lw">
<h5><a href="http://articles.news.aol.com/news/article.adp?id=20051213164009990007" target="_blank">Bloody Merry</a></h5>
<p>Is this Santa on the wrong side of naughty, holding a bloody head? Or is he making a statement about <a href="http://articles.news.aol.com/news/article.adp?id=20051213164009990007" target="_blank">holiday spirit?</a></p>
<div id="hotS"><h5>More Holiday Spirit</h5>
<ol>
<li><a href="http://www.boingboing.net/2005/12/13/howto_make_a_pc_out_.html" target="_blank">Gingerbread PC</a></li>
<li><a href="http://channels.netscape.com/atplay/sertests.jsp?id=atplay_grinchtest" target="_blank">Take the Grinch Quiz</a></li>
<li><a href="http://www.slashfood.com/2005/12/15/dont-get-these-bottom-five-food-gifts/" target="_blank">Worst Food Gifts</a></li>
<li><a href="http://holidaygiftguide.engadget.com/" target="_blank">More Engadget Ideas</a></li>
<li><a href="http://www.cinematical.com/2005/12/15/12-days-of-cinematicalmas-great-dvds-for-santa-to-brin/" target="_blank">Cinematicalmas</a></li>
</ol>
<ul>
<li><a href="http://journals.aol.com/livewebblog/liveweb">-- More Web Picks</a>
</ul>
</div>
</div>
</div>It doesn't matter too much what the content is, we just want to make it a module, right? So, let's add what we need to (changes in blue):
<div class="module" id="live-web">
<div id="lw" class="smM view live-web">
<h4 class="head"><i>What's Clicking Now</i>LiveWeb?</h4>
<div id="om_liveweb" class="mB lw body">
<h5><a href="http://articles.news.aol.com/news/article.adp?id=20051213164009990007" target="_blank">Bloody Merry</a></h5>
<p>Is this Santa on the wrong side of naughty, holding a bloody head? Or is he making a statement about <a href="http://articles.news.aol.com/news/article.adp?id=20051213164009990007" target="_blank">holiday spirit?</a></p>
<div id="hotS"><h5>More Holiday Spirit</h5>
<ol>
<li><a href="http://www.boingboing.net/2005/12/13/howto_make_a_pc_out_.html" target="_blank">Gingerbread PC</a></li>
<li><a href="http://channels.netscape.com/atplay/sertests.jsp?id=atplay_grinchtest" target="_blank">Take the Grinch Quiz</a></li>
<li><a href="http://www.slashfood.com/2005/12/15/dont-get-these-bottom-five-food-gifts/" target="_blank">Worst Food Gifts</a></li>
<li><a href="http://holidaygiftguide.engadget.com/" target="_blank">More Engadget Ideas</a></li>
<li><a href="http://www.cinematical.com/2005/12/15/12-days-of-cinematicalmas-great-dvds-for-santa-to-brin/" target="_blank">Cinematicalmas</a></li>
</ol>
<ul>
<li><a href="http://journals.aol.com/livewebblog/liveweb">-- More Web Picks</a>
</ul>
</div>
</div>
</div>
</div>Now, if we were to save those changes and try to upload it to the Playground, we should see that content as a module. See how easy that was?
We understand that for a lot of pages, this may not be so easy. But, if you're already hip to Web standards and have mostly valid pages, this process shouldn't be too difficult. If you're starting from scratch, we still recommend using the procedure outlined in our workshops and deliver a single tiny module file. But this is a valid way to go if you have existing content.