How Design Magazine has just selected Module Media as one of their top 10 websites for designers for the month of Decemeber. Christmas came early for us this year. Check out How Design website while you're there, they have a ton of creative resources including blogs, forums, regularly posted articles, and more.

If you’re reading this blog entry, chances are you’re unaware (and probably don’t care) of how it was built. The questions don’t start popping up until it’s time for you to create your own blog and when that time comes, you’ll have tons of options to choose from. The one I use, primarily because of my fondness of ASP.NET, is BlogEngine.NET. BlogEngine.NET, like most blogging applications is free to download, easy to install and customize, and more importantly offers just about all of the same options as some of the other popular blogging applications built using competing technologies like PHP. My purpose of this entry is not to compare blogging applications, but to present a solution to a dilemma that I had while attempting to integrate BlogEngine.NET with the Module Media site redesign. That is, how do I take my latest blog entries and make them available directly within the front page of my web site so that the user can go directly to the front page of my web site and see whether a new blog entry exists. And if one does, allow them to directly link to that new blog entry. The answer to this problem wasn’t as simple as I had imagined it would be. In the end, I had to resurrect my XSL skills and put my XML and VB.NET skills to the test to get the job done. Let’s take a look.

BlogEngine.NET, like all blogging applications generates a file that is used to syndicate blog entries via RSS, called syndication.axd. This file, which is generated at the root of your blog, can be read in my any feed reader application, including your browser, simply by “subscribing” to it. For instance, if you browse to mine http://www.modulemedia.com/blog/syndication.axd, you’ll see the RSS feed for the Module Media blog. Pretty straight forward right? The question I had was how do I take the top 5 headlines, including their dates from this syndication file and make them available as the latest entries on the main page of the Module Media site? To add to this dilemma, I also wanted to make it so that each entry linked back directly to the blog posting. Since most of the work is done by the syndication.axd file, reading it is simply a matter of writing a XSL file to “transform” the data in the XML-based syndication.axd file into something meaningful that our web page index.aspx can use and ultimately display. I started off with a XSL file in a scripts folder on my site called rssTransform.xsl. Here’s what it looks like:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output method="html" />
     <xsl:template match="/">

     <ul id="lbptext">
          <xsl:for-each select="rss/channel/item[position() &lt; 5]">
               <li>
                    <span>
                         <xsl:call-template name="getDate">
                              <xsl:with-param name="dateTime" select="pubDate" />
                         </xsl:call-template>
                    </span>
                    <xsl:element name="a">
                         <xsl:attribute name="href">
                              <xsl:value-of select="link" />
                         </xsl:attribute>
                         <xsl:value-of select="title" />
                    </xsl:element>
               </li>
          </xsl:for-each>
     </ul>
</xsl:template>

<xsl:template name="getDate">
     <xsl:param name="dateTime" />
     <xsl:value-of select="substring($dateTime,9,4)" />
     <xsl:value-of select="substring($dateTime,6,2)" />,
     <xsl:value-of select="substring($dateTime,13,5)" />
</xsl:template>
</xsl:stylesheet>

To make a long and complex file short, the XSL file’s primary responsibility is to take XML data (syndication.axd) and transform it into something that is a bit more meaningful to a browser (HTML). If you look at the file closely, you’ll see actual HTML tags combined with XSL tags. For instance, the portion of code that does the majority of the work is the for-each loop. Essentially what we’re doing is looping through each item in the syndication.axd file. We do this operation five times to read in the top 5 entries. We then display the date (which is formatted by calling a function called getDate written out near the bottom of the page) and a hyperlinked version of the title within a HTML <li> tag. Of course this is possible because all syndication files outline names for each of their entries. Each entry is called “item”, each item has a “title”. Each entry also has a “link” and published “dateTime” amongst others.

With the data now being transformed into something meaningful, it’s now time to associate the XSL file to the syndication.axd (XML) file and more importantly display the data within a the page. This is done using VB.NET on the main page of our web site index.aspx as follows:

<script language="VB" runat="server">              
     Sub Page_Load(sender As Object, e As EventArgs)
          Dim strXmlSrc As String = "http://www.modulemedia.com/blog/syndication.axd"
          Dim strXslFile As String = Server.MapPath("scripts/rssTransform.xsl")

          Dim myXmlDoc As New XmlDocument()
          myXmlDoc.Load(strXmlSrc)

          Dim myXslDoc As New XslCompiledTransform()
          myXslDoc.Load(strXslFile)

          Dim myStringBuilder As StringBuilder = New StringBuilder()
          Dim myStringWriter As StringWriter = New StringWriter(myStringBuilder)

          myXslDoc.Transform(myXmlDoc, Nothing, myStringWriter)
          litModuleMediaRSS.Text = myStringBuilder.ToString()
     End Sub
</script>

In order of operation, we read in both syndication.axd and rssTransform.xsl files and set them to string variables called strXmlSrc and strXslFile respectively. We then create a new instance of the XmlDocument() c lass. This gives us access to the Load() method which we use to load up our XML (syndication.axd) file by passing in the strXmlSrc variable as a parameter into the method. We do the same for the XSL file, creating a new instance of the XslCompiledTransform() class and then passing in the strXslFile variable as a parameter into the Load() method of this class.

Next we create new instances of the StringBuilder() and StringWriter() classes, used to format and output programmatically constructed strings. We then call the Transform() method of myXslDoc object variable, passing in the XML document, represented by the myXmlDoc object variable and the instance of the string writer object, myStringWriter. Finally, we set the Text property of a Literal control that I have on the page equal to the string builder object. The final result is formatted using CSS to appear like what you see on the main page of the Module Media site.

I've attached a working version of these files to this entry titled mm_readingrssfiles.zip. Have fun!

I honestly don't know where to begin here. Every single point made in this article is so dead on that I found myself having to share it on my site. In my 15 years of working independently and in the private and public sectors, I found myself drawing examples for every point made from my previous experiences. The point I found particularly interesting was point 1, "Managing your Website is a Fulltime Job."

I can't tell you how many sites I've inherited from clients who thought they'd "give it a shot." I tried fixing my car once...keyword here being once. Designing your web presence...your message between you and your customers should be left up to a skilled person who does this kind of work for a living, much like the mechanic does for your car. Trained professionals know good web design which brings usability, user experience, accessibility, etc. Skilled web programmers know when an out-of-the-box CMS will do, when a custom CMS is needed, or when one isn't required at all. SEO specialists will understand search engine optimization, when to rely on social networking (see point 7), when to pay for ad-clicks, or when to go completely organic. If I had a nickel for every student who came to me and asked me for help after their Marketing Director or VP of Engineering made them take my classes only to find that they were in above their heads, I'd be a rich man.

Is this a big surprise? With the advent and virtual takeover from social networking sites like Facebook, Twitter, etc., the once giant MySpace is once again trimming the fat. I'm not surprised to be honest, MySpace remains a giant in the social networking community but a site I've avoided for personal use like the plague. Why? Web standards and companies actively pushing for Web 2.0 technologies have been on the rise. People are beginning to genuinely understand why web standards, accessibility, user experience, etc., are so important. Shoot even Microsoft is making strides with IE 7 and IE 8. For the past 5 years the web has really taken two giant steps forward while MySpace and their lame CSS "code" injection techniques seem to want to take three steps back. Gotta love the black backgrounds with dark navy blue text and a web site whose architecture is fragmented between ColdFusion and ASP.NET.

Well folks it's been a long time coming but I'm happy to announce that Module Media finally has a blog. With the launch of the new website, we felt it important to also include a blog so that all of our current and former students, clients, and customers can keep in the loop with what we're doing. We have so many ideas, tutorials, tips, tricks, reviews, and general rants that we want to share with everyone. With that said, please feel free to subscribe to our RSS feed so that you can stay in touch. Thanks to everyone for your continued support - stay tuned.