1. Modularity
1.1 HTML Modules
1.2 Server Side Includes
1.3 Cascading Style Sheets
- mod·u·lar (mj-lr)adj.
- Of, relating to, or based on a module or modulus.
Designed with standardized units or dimensions, as for easy assembly and repair or flexible arrangement and use: modular furniture; modular homes; modular code.
The idea behind using modules for organizing large information structures comes from a desire to simplify what would be an otherwise chaotic structure. Modules can also be though of as "snippets" of HTML code that when pre-fabricated can easily allow a Web Developer to create a web page from scratch. They should function as the building blocks of any Web Project.
If there are elements of websites that we use often and can simplify to the lowest common denominator then there exists the perfect opportunity for modularization.
Re-usable elements of code such as Style Sheets, Javascript Rollover Functions, Framesets, Error-Not Found pages, Redirects and simple tables and navigational elements are all potential modules.
Here is a simple HTML page with modular sections of the code commented out:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>simple modular document</title>
</head>
<body>
<!-- header module -->
<h1> This is the Title </h2>
<!-- header module -->
<p>a simple paragraph</p>
<!-- footer module -->
<a href="/">Return to Homepage</a>
<!-- footer module -->
</body>
</html> |
Some examples of modular web construction can be seen in the following places:
- NCSA
- The National Center for Supercomputing Applications has a neat approach to organizing it's massive website. You can see that different navigation elements flow together to comprise a very "clean" design. The site remains easy to navigate while still keeping a aesthetically pleasing design. From the website: "To best serve NCSA, the C&C is broken into several groups so that specialized tasks can be handled at a quicker and more efficient method."
- Kaliber{1000}
- The Designer's Lunchbox is a project that joins minimalist design elements and resusable code into a fully functioning, great looking, design magazine. The buttons and forms are all simple html. The page has many reusable elements that can be identified first off. The icons add to the "computer game" like feel of the console interface. Almost like an application k10k.net is a fully modular node of the net.
In an article titled "Preparing for XML, Modular HTML" Dimitry Kirsanov writes:
- "... the dire need for a logical markup system is not due to W3C standardizers---it is felt by everyone whose task is to manage Web documents. At the moment, what this vacuum is most often filled with could be called "Modular HTML," with groups of tags gathered into fixed "modules" that act as a sort of logical markup units storing their associated presentation parameters within their own code."
Modularity of code is a cornerstone of maintainability and reusability. The Onaicul Project encourages modularity in both the design and development phases of projects. All software/web sites should be broken down as much as possible into discrete, reusable components.
From a design perspective, modularity is best envisioned using a template model of site construction. Any site section, navigation bar, or other component which can be built as a template and then populated with content dynamically will be more efficient than a flat HTML page. Fewer flat HTML pages in a site results in less coding up front and during maintenance.
|
The W3C has a good visual example of modular elements of different web languages and how they work together.
Check it out:
 
HyperText Markup Language Activity Statement
In this example several different languages work together to form the set of languages that allow communication to be transfered over the Internet. If you're familiar with Cascading Style Sheets you've seen firsthand the advantages of modularization. Adding one or two tags to a style sheet give a Web Programmer can change an entire site by altering only a couple documents.
|
SSI Include Files are files with common HTML code that is shared between many site pages. Include files should be used extensively for menu bars, forms, and HTML components that are common to all site pages.
SSI (Server Side Includes) are directives that are placed in HTML pages and evaluated on the server while the pages are being served. They let you add dynamically generated content to an existing HTML page, without having to serve the entire page via a CGI program or other dynamic technology.
The decision of when to use SSI, and when to have your page entirely generated by some program, is usually a matter of how much of the page is static and how much needs to be recalculated every time the page is served. SSI is a great way to add small pieces of information, such as the current time. But if a majority of your page is being generated at the time that it is served, you need to look for some other solution.
This is what an include looks like in HTML code:
<! -- # include /ssi/navbar.ssi -->
The W3 began work on the recomendation for CSS (Cascading Style Sheets) late in May of 1995, begining what was to be one of the most important developments of HTML's evolution.
Style Sheets are a simple yet powerful method of allowing attachment of rendering information to HTML documents. Rather than relying on the <font> tag or any other browser specific tag CSS instead allows the author to instantly update the layout and formatting of a large number of interdependent documents.
Advantages of Style Sheets:
- Allows for rendering control on systems other than paged screen
- Properties are specified using common desktop publishing terminology
- Easy to author and read
- Produces nicer HTML markup that is more flexible and maintainable
- Easy transition from HTML extensions
- Many new visual control features
- Easy extension for future capabilities
CSS comes in two different flavors: CSS1 and CSS2
Since CSS support isn't fully implemented yet. It is probably a good idea to code based on the most stable draft (CSS1).
From the w3: "Browsers supporting the CSS language have been developed by several member companies, including Microsoft, Netscape and Opera. In browsers available in early 2000, there is good support for CSS1 and increasing support for CSS2.
It would be unfair to talk about CSS without mentioning it's new cousin XSL
Don't worry. I know these new names and languages can sound intimidating. All you should know at this point in time is that XML (eXtensible Markup Language) and XSL (eXtensible Stylesheet Language) are powerful new ways to separate the content of a web site from its design. To learn more, check out these interesting articles on XSL and how it relates to XML at webslingerZ
Rather than reproduce here the extensive articles and tutorials on CSS that have already been 'hypertexted' by more capable authors than myself, i'll instead provide a variety of links to Online Resources for the CSS author.
|
