[WM] page construction techniques

Wed Mar 24 15:51:34 GMT 2004

a few weeks ago I was whinging about problems with assembling pages for 
various components and being able to edit everything with stock HTML 
editors.  I solved the problem albeit not with Webmake.  I'm presenting 
the ideas here in case folks find them useful.

I look at component built web pages in the following way.  You have a 
top or encompassing structure which encapsulates a hierarchy of smaller 
components. For example:

top contains:
    top menu bar
        menu elements
    left-hand advertisements
        context specific advertisements
    right hand menu
    footer

in rendering, the page, each component is rendered before using.  This 
keep you from having any inconsistencies the presentation.  In addition, 
there can be variable elements which are included within each page 
component such as title or section headings.

implementation outline:

I decided to create a prototype using Python and a template tool which 
is a part of the camram Web interface.  The template tool is exceedingly 
stupid and very lightweight.  All it does is substitute %%symbol%% with 
an entry in a dictionary whose key is symbol.

the input to the page builder is a dictionary like structure.  It is 
filled with entries whose keys which correspond to the symbols in all of 
the components.  The value of each entry is simply a string.  When the 
dictionary is processed, the strings are run through the template tool 
and substitutions are made if the symbol can be found.

constructing a page from this behavior is relatively simple.  The 
top-level component for the page is placed unmodified into the 
dictionary but all of the subordinate components are only the text found 
between <body></body> tags.  again, when processing the dictionary, all 
of the page elements are processed and, if you did everything right, you 
have a web page.

a practical example:

# the first web page
zodiac = inflatable()
zodiac["top"] = "\n".join(file("index.html").readlines())
zodiac["title"] = "c a m r a m: Welcome to CAMRAM:"
zodiac["copyright_date"] = "2002-2004"
zodiac["main_welcome"] = extract_core("main_welcome.html")
zodiac["main_news"] = extract_core("main_news.html")

print zodiac["top"]

the entry "top" contains the top-level page.  Title is an example of a 
simple string substitution as his copyright_date.  The two component 
pages main_welcome and main_news are examples of HTML pages that have 
the core extracted and placed into the dictionary.

Retrieving the top-level page triggers the rendering process which 
allows you to print, save, or do whatever you wish.  It's just a really 
big string.

rendered page: http://harvee.org/cac/xyz/lindex.html

component pages:
http://harvee.org/cac/xyz/index.html
http://harvee.org/cac/xyz/main_welcome.html
http://harvee.org/cac/xyz/main_news.html

what's the win?

The win is its trivially easy to build template based pages.  But for 
me, the biggest wind is that individual components can be edited with an 
ordinary HTML editor.  If I want,I can even use the same cascading style 
sheets as the top-level page so I can get a reasonably accurate 
indication of how the component renders in a browser.  All in all, it's 
a very simple yet powerful framework for describing HTML pages.

I'm offering this nascent idea to the Web make community because it may 
prove useful either as an enhancement to the existing Web make model of 
operation or as a foundation for Webmake II

---eric