On this page we would like to introduce you to all the tools and techniques that made the iChilli™ web site possible. Because we are using open source technologies, everbody is able to create similar sites by adapting the tools and techniques we used.

The iChilli™ web site is allmost based on open source technologies. So the iChilli™ site is available as open source through the iChilli™ CVS repository.

To create and evolve the iChilli™ web site we decided to develop a initial web site mockup, using the Adobe Photoshop graphics suite. That way we were able to get quickly to a first mockup while not having to program any HTML code.

[ ^ Top ]

At the very begining we were creating the iChilli™ website from scratch using the Homesite HTML editor. At the point we was satisfied with the result we were faced with the question whether to code each new HTML page by hand or to use some kind of automatism.

Finally we decided that coding every HTML page by hand would make us unable to maintain the web site sooner or later. Additionally coding a site by hand, that has a complex layout, means a huge waste of time.

While searching for a solution that enables us to automatically create HTML pages with very little effort while still having a cooperate look & feel, we decided to use the DocBook DTD as a basis to create all the web pages.

We choose DocBook because we were allready writing our manuals in DocBook. DocBook enables you to transform your XML source files in any kind of target format. For example, we are transforming our DocBook source files into the portable document format (PDF)^[1] by using the Xalan XSLT^[2] processor and the XEP FO^[3] processor.

While beeing familiar with the DocBook DTD^[4] we still had the problem that this DTD was created for print media. That in turn results in a very huge element set which we don't need to code HTML pages.

Luckily, there is a DTD originated from the DocBook DTD but solely targeted for website programing. That's the reason why this DTD is called website.

Using the website DTD we are finally able to program every single HTML page with very little effort. After a HTML page gets created using a XML website source file we will transform it into HTML, using a couple of XSL stylesheets that are basicly needed to

[ ^ Top ]

While the original XSL stylesheet that came with the website DTD was creating the menu of each HTML page using a static HTML table, we decided to use a DHTML menu that is similar to menus known from todays computer programs.

The DHTML menu is based on the Java Script source of the Milonic Popup DHTML Navigational menu. Allthough we changed it a bit to fit our needs.

The DHTML menus is based on a Java Script array that contains each menu element. Because we wouldn't like to maintain that Java Script file, we decided to create that Java Script dynamicaly by transforming the web site's layout definitions that is defined in a file called layout.xml. That way we don't need to program any line of Java Script code. See below for an example of the layout.xml file.

  1| <?xml version="1.0"?>
  2| <layout>
  3|   <toc page="website.xml"
  4|              filename="index.html"> 
  5|     <tocentry page="doc1.xml"
  6|                       filename="page1.html"> 
  7|       <title>Document One<title/>
  8|     </tocentry>
  9|     <tocentry page="doc2.xml"
 10|                       filename="page2.html"> 
 11|       <title>Document Two<title/>
 12|     </tocentry>
 13|   </toc>
 14| </layout>

Explanation

	Line three defines the starting document of the web site.
	Line four defines the 1st toc entry.
	Line seven defines the 2nd toc entry.

The program listing below illustrates the resulting Java Script array.

  1| addmenu(menu=[
  2|   "home",71,leftOffset,,1,,style1
  3|   ,1"left",,,1,,"right",,,,,,,,
  4|   ,"Home", "show-menu=homesub", ,"Home", 0
  5| ])
  6| addmenu(menu=[
  7|   "homesub",,,150, 1, "", style2, 
  8|   ,"left", effect, ,,,,,,,,,,,
  9|   ,"Document One", "/page1.html", ,, 0
 10|   ,"Document Two", "/page2.html", ,, 0
 11| ])

Allthough having a DHTML menu to navigate through the iChilli™ web site means, that those having a browser that is not Java Script capable, wont be able to use our site at all. Because of that fact we are providing an alternate navigation facility at the bottom of each page that is based on plain HTML. Additionally we are adding <link> elements to the header of each HTML page that lets you navigate to the next, previous, first and last page of the iChilli™ web site.

[ ^ Top ]

We decided to make the look & feel of the iChilli™ web site based on CSS^[6]. The reason behind is that you have to add lots of extra HTML code to get a look & feel that looks the same in every HTML browser. Allthough there are still some browsers that come with a limited support of CSS.

But because the browsers Mozilla and Microsoft Internet Explorer are widly used and because they are available for free, we feel having a CSS enabled site shouldn't be an issue.

[ ^ Top ]

The iChilli™ web site could be searched using the text field that is provided at the left of each page. The search facility was made possible using the ht://Dig search engine. The only changes we made to the original version of ht://Dig are some modifications of the HTML pages to reflect the iChilli™ look & feel.

[ ^ Top ]