Help - Contact
iChilli Logo iChilli Slogan
iChilli :: About

Behind The Scenes


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.

Creating A Initial Web Site Mockup

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 ]

Traditional HTML Programming vs. XML Transformation

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

  • Create a XML file that contains the complete layout of the site.
  • Create the Java Script source file for the DHTML[5] menu bar.
  • Create tha actual HTML files for every page.

[ ^ Top ]

Using DHTML Elements Or Not?

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"> 1
  5|     <tocentry page="doc1.xml"
  6|                       filename="page1.html"> 2
  7|       <title>Document One<title/>
  8|     </tocentry>
  9|     <tocentry page="doc2.xml"
 10|                       filename="page2.html"> 3
 11|       <title>Document Two<title/>
 12|     </tocentry>
 13|   </toc>
 14| </layout>



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 ]

Using CSS1/CSS2

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 Search Facility

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 ]


[1] The portable document format can be considered as standard and was introduced by Adobe.

[2] XSLT stands for XML Trasnformation and defines the process of transforming a XML source document into some other format by using the Extensible Stylesheet Language. For more informations visit the W3C web site.

[3] FO stands for Formating Objects and defines the representation (layout) of a target document. A FO tree will be likly generated by using XSLT.

[4] DTD stands for Document Type Definition.

[5] DHTML stands for Dynamic HTML and is a mixture of HTML and Java Script.

[6] CSS stands for Cascading Style Sheets and defines a way to "style" HTML pages.

Search this web site


Visit our sponsors

SourceForge Logo

sLAB Logo

Powered by ...

ht://Dig Logo

Maven Logo

Ant Logo

Website Logo

Previous  [ Help ]   [ Site Info ]  Up
Top - Help - Terms of Use - Privacy Statement - Contact - Copyright Copyright 2002 Daniel S. Haischt