|
publikation auf frauenweb.at
|
|
|
Seminar WWW Service Engineering
and Web Application Management
HTML++
Martina Umlauft
Matrikelnr. 9026329
Kennzahl E881
November 7, 1997
Download this document in PostScript format
Abstract:
Management and especially maintenance of web sites
becomes non-trivial when the size of the site exceeds a certain limit.
Therefore, the Distributed Systems Department of the Technical University
of Vienna developed an object-based language called HTML++ that addresses
this problem. This tool was used to develop the 300+ page bilingual WWW
site for the Vienna International Festival 1996, one of the top cultural
events in Austria.
On the WWW, not only information, but also layout of web sites changes
(or, actually, has to change) frequently to provide a satisfying
experience to users. This introduces several maintenance and consistency
problems. Unlike for small WWW sites, which are usually maintained "by
hand" this method becomes unfeasible for large sites consisting of
hundreds of pages.
Common tools like web editors often only address the problems of the
SOHO![[*]](../PUB/Uml97b/foot_motif.gif) user (WYSIWYG) and tools like HTLP[1], SSI+[2] or W3
Magic[3] which work with server side includes have several
disadvantages; they increase execution time and sometimes only work with
certain web servers or on certain platforms.
Also, the original intent of the html markup language, separation of
content and layout, has been compromised with recent implementations of
html (especially proprietory browser extensions) and has to be abused in
practical applications to meet today's users' expectations, thus another
layer of abstraction is needed to address this problem.
Therefore, the Distributed Systems Department of the Technical University
of Vienna developed HTML++[4], an object-based language which
has been successfully employed to create the WWW site of the Vienna
International Festival 1996, one of the top cultural events in Austria.
This site features over 300 static bilingual pages with textual and
multimedial content as well as interactive services like a ticket
reservation service and a personal event schedule.
A complete description of HTML++ can be found in [4]; the
package itself is covered under the GNU General Public License and
available at http://www.infosys.tuwien.ac.at/HTML++.
HTML++ is an object-based language that orthogonally extends HTML by
introducing another layer of abstraction. Very much like the early C++
compilers, a preprocessor (also called HTML++) translates HTML++ documents
into ordinary html. HTML++ can also create Perl [7] scripts for
use with the CGI facility of web
servers.
This preprocessor is written in Perl itself and can therefore be used on
any platform on which Perl is available. Since preprocessing is not done
on the fly but offline even sites which are installed on platforms for
which Perl is not available can be maintained with HTML++ by using an
extra machine for the compilation.
HTML++ introduces the concept of objects and classes to html to separate
layout and content. Classes are used to define layout which is
automatically inherited by all objects that inherit from this class.
Objects are instances of these classes and contain the actual information
content.
For each object, an html page or a Perl script is then generated by the
preprocessor. Later changes in layout only lead to changes in the base
class and the (probably hundreds of) objects will all inherit these
changes with a simple recompile, thus ensuring consistency. Later updates
of content only lead to changes in the specific objects and can not
destroy an existing layout.
class mylayout <<
<HEAD>
<TITLE> Hello <<mytitle>>! </TITLE>
<HEAD>
<BODY>
<H1> Hello <<mytitle>> example. </H1>
<CENTER> <<sometext>> </CENTER>
</BODY>
>>
object world <<
<<class <<mylayout>> >>
<<mytitle>> World <</mytitle>>
<<sometext>>
This is a really nice example. <P>
Also have a look <A HREF="<<universe>>">here</A>.
<</sometext>>
>>
object universe <<
<<class <<mylayout>> >>
<<mytitle>> Universe <</mytitle>>
<<sometext>>
And now for something completely different!
<</sometext>>
>>
Listing 1 (hello.html++)
"Hello World!" example HTML++ input file.
As shown in listing 1 a class "mylayout" is defined from which
both objects, world and universe, inherit. Both have to implement the
"mytitle" and "sometext" tags defined in the base class. The definitions
for "mytitle" and "sometext" will then appear at the positions defined in
the base class. That means that once "mytitle" is defined it will
automatically appear in the title and in the H1-Heading of the resulting
html page as can be seen in listings 2 and 3.
The compilation of the HTML++ source file is started with
HTML++ hello.html++
which will generate the following files as shown in listings 2
and 3. The preprocessor generates one html (or Perl) file with
a unique name for each object but it can optionally be forced to use a
name chosen by the author.
<HTML>
<!-- Do not edit this file. It was generated with HTML++. -->
<!-- Command used: (Mon Nov 3 19:02:31 1997) -->
<HEAD>
<TITLE> Hello World ! </TITLE>
<HEAD>
<BODY>
<H1> Hello World example. </H1>
<CENTER>
This is a really nice example. <P>
Also have a look <A HREF="universe.html">here</A>.
</CENTER>
</BODY>
</HTML>
Listing 2 (world.html)
"Hello World!" example HTML++ output file.
<HTML>
<!-- Do not edit this file. It was generated with HTML++. -->
<!-- Command used: (Mon Nov 3 19:02:31 1997) -->
<HEAD>
<TITLE> Hello Universe ! </TITLE>
<HEAD>
<BODY>
<H1> Hello Universe example. </H1>
<CENTER>
And now for something completely different!
</CENTER>
</BODY>
</HTML>
Listing 3 (universe.html)
"Hello World!" example HTML++ output file.
In this manner, one can easyly define a consistent layout for a whole
range of pages, which eg. always have a navigation bar at the top of the
page and contact information at the bottom. Since classes can inherit from
other classes, the navigation bar itself could be a class that later could
be instantiated in different languages. Class inheritance can also be used
to first define a general layout for eg. a whole company and later refine
it for each branch / department / the single employees / etc. HTML++ does
not support multiple inheritance.
Another feature of HTML++ is provision of an abstract link namespace in
the object hierarchy. As can be seen in listings 1 and
2, objects can be referenced directly by their name instead of
an absolute filename. The preprocessor automatically substitutes the
correct link information. If a link can not be resolved, the preprocessor
generates a warning and substitutes "ThisIsAnUndefinedLink" in the
resulting html output.
As shown in listing 4 includes are implemented with the "source"
tag. Includes can be used to integrate existing html files, text files,
trunks of HTML++ code or even unix commands into HTML++ objects while
packages work very much like the #include directive in C. That is,
packages are used to integrate existing HTML++ declarations into the
current file. One could, eg. define a general layout for a whole site and
later include it as shown in listing 4 in the individual HTML++
files.
<<package <<general.html++>> >>
object include_example <<
<HEAD> <TITLE>Test</TITLE> </HEAD>
<BODY>
<PRE> <<source <<report.txt>> >> </PRE> <P>
<PRE> <<source <<ls -la *.html |>> >> </PRE>
</BODY>
>>
Listing 4
Usage of includes and packages.
Iterators are a tool to process existing flat text databse files; eg. like
the example in listing 5 with one "record" per line where the
fields are separated by a special character or character sequence.
001:::Dilbert:::15.000,-:::Our hero!
002:::Catbert:::200.000,-:::The evil HR director
003:::Dogbert:::1500,-:::Freelancer, salary by the hour!!
Listing 5 (employees.txt)
Example of a flat text database for employees.
Iterators of objects produce one object for each record. The example in
listing 6 parses the text file (listing 5) using "
:::" as field separator and generates three objects with the first column
(denoted by <<0>>) as object names. <<1>> references the text
of the second column, <<2>> of the third column and so on.
objects <<employees.txt>> <<:::>><<0>> <<
<H1>Employee record for <<1>>.</H1>
Salary: <<2>> <P>
Comment: <<3>> <P>
>>
Listing 6 (employ.html++)
<HTML>
<!-- Do not edit this file. It was generated with HTML++. -->
<!-- Command used: (Thu Nov 6 18:34:35 1997) -->
<H1>Employee record for Catbert.</H1>
Salary: 200.000,- <P>
Comment: The evil HR director <P>
</HTML>
Listing 7 (002.html)
One of the three generated output files.
Iterators can also be used to produce formatted output inside an object.
The example in listing 8 creates an ordered html list from the
text file in listing 5.
object employ2 <<
<H1>Employee list for Mumblesmurf, Inc.</H1>
<OL>
<< foreach <<employees.txt>> <<:::>>
<< <LI> <<1>> (<<3>>) earns <<2>>. <P> >>
>>
</OL>
>>
Listing 8 (employ2.html++)
Iterator in an object.
Iterators can not only read from a file but also from the end of a pipe as
shown with the source command. This is especially useful in a unix
environment, with its plethora of text processing utilities.
Lists can be used to group objects. Later these objects can refer to each
other by "next" and "prev" which is ideal for creating navigation bars
for sequential pages. According to the maintainer a later release of
HTML++ will not only support sequential lists but also trees.
Unfortunately, this feature is either misdocumented in [4] or
broken in the current release. A report has been mailed to the maintainer.
HTML++ can not only create static html pages but also Perl scripts for use
as CGI scripts. The HTML++ preprocessor will create a Perl package .pl
with a subroutine for every class. To integrate this class's layout a CGI
script calls the respective subroutine.
The as of yet undefined parts of the class are passed to the subroutine as
parameters (see 9)
class C <<
... ## some header
<P>
<<mycontent>>
<P>
... ## more stuff
>>
object cgi <<
<<code>>
...
$s = &example'C ("Hello, world!");
...
print STDOUT $s;
<</code>>
>>
Listing 9 (example.html++)
Generating Perl scripts with HTML++. $s will contain the whole page
after the call.
The Vienna International Festival is one of the top cultural events in
Austria. For the 1996 festival, an html site with over 300 bilingual
pages was created. [5] and [6] describe the
experience of implementing this site with HTML++.
The articles identify the six most important tasks in designing and
managing a www presence as the following:
- Identification of Source Data Actually figuring out where
data can be obtained and in which format.
- Data Organization Developing a hierarchy in which the data is
presented to the user. The RMM methodology [8] was used for this
task.
- WWW Data Transformation Defining and implementing a mapping
between the source data and its appearance on the web server.
- Optimization After analyzing user access patterns, certain
adaptions in the hierarchy of the web site may become necessary.
- Maintenance Users expect data presented on a web site to be up
to date and to change often and thus web sites require more maintenance
activity than common software projects.
They also critizise that the maintenance part is very often neglected by
html designers.
But as it is the case in software engineering maintenance is a key part
in a project, and, if forgotten in the design phase, maintenance cost
will increase dramatically.
Optimization and maintenance updates of a web site make it necessary to
reorganize the data and have to occur often. If the data transformation
step links the information from the source data with the final appearance
in an unflexible way the site becomes unmaintainable if its size exceeds a
certain limit.
HTML++ offers an extra layer of abstraction and therefore a flexible way
to link information with the final appearance. It was successfully used to
create static html pages and dynamic Perl scripts for the project and the
object based model helped keep maintenance cost low.
[4] gives an in-depth description of the HTML++ language. It
should be noted that there is a typo; the foreach tag actually works as
described here, not as described in [4]. Also, lists don't work
as described; either this feature is misdocumented or buggy. A report has
been mailed to the maintainter of the package.
[5] and [6] describe how HTML++ was
successfully used to implement the WWW site for the Vienna International
Festival 1996.
One of the main problems in web site design and management is to keep the
www data transformation step very flexible because updates and
optimization (have to) occur frequently. Otherwise web sites whose size
exceed a certain limit become unmaintainable.
HTML++ is a tool to help reduce this problem. It offers another layer of
abstraction by introducing an object based approach to html.
During the Vienna International Festival 1996 project the tool proved very
valuable and was successfully used to implement this large 300+ page web
site.
To increase its usability, I propose the extension of an html editor to
introduce syntax highlighting for HTML++; eg. this could be done by
extending Emacs' html-helper-mode.
I also propose the implementation or extension of a GUI class browser and
navigation hierarchy browser for HTML++. Since the use of HTML++ only
makes sense for medium to large web sites I think this is critical to
gain another enhancement in maintainability.
- 1
- http://www.polimi.it/It/Help/manhtpl.html
- 2
- http://theworld.com/ssi/ssiplus.htm
- 3
-
http://www.clark.net/pub/alweiner/cgi-bin/homepage.html?w3magic
- 4
- Robert Barta, What the Heck is HTML++, Technical
Report TUV-1841-95-06, Technical University of Vienna, Distributed Systems
Department, October 1995
- 5
- Markus Schranz, Managing Culture on the WWW,
Technical Report TUV-1841-97-01, Technical University of Vienna,
Distributed Systems Department, January 1997
- 6
- Markus Schranz, Management of WWW Services: An
Experience Report, Technical Report TUV-1841-97-05, Technical University
of Vienna, Distributed Systems Department, March 1997
- 7
- L. Wall and R. L. Schwartz, Programming Perl,
O'Reilly & Associates, 1992, Cambridge, MA.
- 8
- T. Isakowitz, E. A. Stohr and P. Balasubramanian, RMM:
A Methodology for Structured Hypertext Design, Communications of the ACM,
38(8), August 1995
Seminar WWW Service Engineering
and Web Application Management
HTML++
This document was generated using the
LaTeX2HTML translator Version 97.1 (release) (July 13th, 1997)
Copyright © 1993, 1994, 1995, 1996, 1997,
Nikos Drakos,
Computer Based Learning Unit, University of Leeds.
The command line arguments were:
latex2html -split +0 -show_section_numbers -local_icons -no_footnode -no_navigation seminar.tex.
The translation was initiated by Martina Umlauft on 11/24/1997
Footnotes
- ...SOHO
- Small Office / Home Office
- ...WYSIWYG
- What You
See Is What You Get
- ...CGI
- Common Gateway Interface
Martina Umlauft
11/24/1997
|
![frauenweb.at [HOME]](http://frauenweb.at/ICONS/frauenweb.logo2.gif){kind=icon}
