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.