Intelisite - The technology behind it
Note

This article is deprecated. The site is now using a newer version of cocoon which offers greater resources.


Introduction

Today XML, XSL, DOM and other web standards are emerging as viable solutions for web site creation. You can find systems and tools to help the creation and maintainance of complex web sites, including lots of free ones. Intelinet, in order to understand better these technologies, is now using XML and related technologies to provide content in its own web site. This document explains how the web site was designed and developed. We hope that it will be usefull for other people, promoting the adoption of this new paradigm in other places.

If you have questions, comments or suggestions, please, feel free to contact me.


About the technologies

The main concept behind a web site using XML is the separation of content, logic and presentation. Unlike technologies like ASP, JSP and PHP, this new paradigm allows that these three different group of people (content owners, code developers and designers) work on their specific areas without messing with others work. No more desining work breaking coding work, and no more manual content formatting work to publish.

In other words, the content layer turned to be XML, the logic layer turned to be embedding tags that generate dynamic content, and the presentation layer turned to be XSL.

Well, in order for us to use this paradigm, we needed something to glue everything together (XML + XSL + code) and generate HTML documents from it, otherwise we wouldn't be able to reach a wide audience because the web, today, is still HTML based. After some research and some testings, the chosen system was Cocoon, a powerful framework for XML web publishing, in Java, from the Apache XML Project.

Below are some links related to the tecnologies used here:

  • About XML
  • About XSL
  • The XML Bible - XSL chapter
  • About XSP
  • About XSP taglibs
  • About DOM
  • About Java


    • InteliSite <http://www.intelinet.com.br/en/>

    We are using only one stylesheet for the entire site and it is the file main.xsl.

    The navigation bar content and the icons on the top of the pages are stored in a XML file per idiom. The listing below shows the "toolbar.xml" file used to generate this page: 

    
<?xml version="1.0" encoding="ISO-8859-1"?>

<toolbar>

 <top>
  <desc>The 'header'</desc>
  <item href="/en/company/portfolio" imgsrc="/portfolio.jpg"
        imgovrsrc="/_portfolio.jpg">portfolio</item>
  <item href="/en/dev-edge/index" imgsrc="/dev.jpg"
        imgovrsrc="/_dev.jpg">dev-edge</item>
  <item href="/en/company/contato" imgsrc="/outlet.jpg"
        imgovrsrc="/_outlet.jpg">contact</item>
  <item href="/en/company/empresa" imgsrc="/ladybug.jpg"
        imgovrsrc="/_ladybug.jpg">the company</item>
 </top>

 <main>
  <desc>Company</desc>
  <item href="/en/index">Home</item>
  <item href="/en/company/portfolio">Portfolio</item>
  <item href="/en/company/contato">Talk to us</item>
  <item href="/en/company/empresa">The company</item>
  <item href="/en/company/parceiros">Our partners</item>
  <item href="/en/dev-edge/index">Dev-Edge</item>
 </main>

</toolbar>

    Finally, the main content is stored inside separated XML files that are the ones that appear in the location toolbar of your browser. Try our myintelipage XML file to build your own intelipage.

    XSP - enabling dynamic content to the site

    To generate dynamic content in the site we are using XSP. It provides a way to embed code into the xml pages to be processed by the server. Today, the only language supported by cocoon is Java, but in the future there will be other options, like, for instance, java-script.

    Some places we need code are:

  • The contact response page - to send us an email with the data entered in the contact form
  • The home page - to choose a banner when available
  • All the pages - to include the toolbars, in order for us to have the option to select a diferent toolbar depending on the page

    • XSP is also used in this page, for instance, to include the source of the toolbars.xml as a program listing on this page.

    The beauty of the XSP approach is that we can create XSL stylesheets to transform tags into code. The file toolbars.xml that is included in this page uses a tag from the cocoon framework to do it. The paragraph that does it is shown below: 

    <para>
 <programlisting>
  <util:get-file-contents name="../../toolbars.xml"/>
 </programlisting>
</para>

    This schema allows programmers to write code that is not attached to a specific page, and to content writers to use these tags to easily embed dynamic content into their pages, without the need of programmers having to change pages generated by content writers and vice-versa.


    Choosing tags to represent content

    Instead of creating some new tags to represent the content of the site, we decided to use an already defined set of tags (DTD). The chosen one was the simplified docbook XML DTD. It is a simplified version of the docbook DTD that defines a rich set of tags to describe the content of a document. The docbook DTD was designed by OASIS consortium specifically for technical documentation but can be used for a lot of other kind of documents. A reference to an older version of the docbook DTD can be found here.

    Although the simplified docbook DTD is a smaller set of the docbook DTD, it is still a big and complete set of tags to describe a document. For perfomance reasons and because we did not have a previous experience with docbook, we are using an even smaller set of the simplified docbook DTD with some modifications that can be found at the main.xsl file.