Chap 09

Concept of Templates

Much of the tasks in web page design are repetitive. The need to maintain a consistent look and feel throughout the site, the familiarity of users to the positioning of buttons and navigational elements and so on, makes it inevitable that some of the aspects of the design are repeated again and again.  This results in a lot of time being expended on doing the same tasks over and over again.  A template separates form from content and helps web designers layout elements on a generic page that can be called to provide the consistent look and feel of the website. Today, template designs provide a way of enforcing layouts, defining sets of privileges, style and content for multiple pages.  The template can be divided into regions and tabs and styles can be applied to specific regions and items such as portlets can be added.

At the other end of the spectrum, the user too, benefits from templating.  The web designer now has the option to define themes or skins for web pages which can be accessed by users who wish to give a special feel to his page while retaining the underlying template that defines the look and feel of the website. These themes and skins are nothing but elements of a web page that have been pre-positioned for immediacy of deployment.  With ASP.NET 2.0 the web designer can provide a repository of components to the web user for dragging and dropping into the web page.  The end user has the freedom to position the elements on the web page!

Evolution of the Concept of Templates

The web designer needs to feel that he is in control of the way in which his web page displays the elements he has so carefully positioned. The end user wants to feel that he should have the ability to personalize the page to suit his tastes.  There is a constant conflict of interest and the concept of templates has evolved from this fundamental need of both the designer and the user. 

Paper templates for entering structured information have always been around. The first web pages were designed as if were extensions of the paper format.  Task based forms on the Internet, even today; share many of the features of the paper format.  The word document is a template of the paper and Microsoft Word provides a large number of templates for jobs such as letter writing or resume writing. It enables users keep structure and content independent from each other and makes designer experimentation with templates wholly possible.

The initial web pages were static pages and the initial efforts were directed towards experimenting with variations of the static page. 

The Cascading Style Sheets were the first efforts to distinguish between form and content.  The possibility of creating “Styles” to which web content could be linked suggested undreamed of possibilities.  A number of designers began to experiment with form.  In fact it became such an obsession that flashy, buttons, colors and designs began to dominate the web.  Form seemed to take precedence over content and communication. The moderate members of the profession vociferously expressed their discomfort with the state of things and a balance has gradually been achieved. 

Server side coding for templates emerged in the 1990’s.  The Common Gateway Interface was first typically used in Unix Web servers for AWK report generator or M4 templates.  The Server side ‘include’ helped in defining a more direct way of creating server side scripts on web servers.   Web portals, then, catalyzed the whole and web designers began to experiment with “template languages” and talk about the need for a “template standard language”. 

A template system now consists of a template engine that processes web templates and content information to produce web documents.  The template engine can also be used as part of a preprocessor, filter or template processor.  Programming languages such as PERL, Ruby, C or Java all support template processing natively or using add-on libraries and modules.   Java Server pages, Active Server pages, PHP are template engines in their own right. XSLT and Xquery designed by W3C have emerged with promises of future convergence of template languages!

Templates can be simple “substitute templates” or masks where place variables are substituted with the web designer’s content or can be complex templates using XSLT schemas.   Masks or substitute templates are the first server side includes that created uniform headers and footers on the web page. Complex templates provide for standardized layouts using a single base layout over which other layouts are superimposed.

A template can be defined as a piece of code that uses preset variables to expose data on a web page. The template can be further categorized into data templates and theme templates. Data templates are base templates on which theme templates are superimposed to give a customized look and feel to the web page.  

Templating?

A template is a kind of wire frame for the web page. The elements that must appear in every page on the website can be laid out in the frame to form a basic layout for the whole. The “All page template” is a general layout background for the website with a fixed header and footer with an “all content” variable.  The block template is a segment or component region of the page with a specified layout block.  The menu block that usually appears on the left hand side column of the page is an example of a template layout box in a dynamic web site.

Strongly template oriented websites have databases that receive only pure content while the form is determined by the template and are not impacted by the content that is displayed on the page.  Weakly template oriented websites allow the template design to be affected by the content and the template rules are changed every time the content changes.  While the former can make for rigidity of design the latter can make for non standardized web pages.  Providing for themes and skins probably emerged from a desire to mitigate the rigidity of strongly oriented web templates and to overcome the weakness of the weakly oriented ones.

The template file is a single file that may reference other resources for logical dependencies or layout dependencies.  The file is formatted with specific markup and reflects the template system strategies of the website. It uses scripts to provide instructions to the template engine and can be an embedded template language or an event driven template language. Embedded template language embeds the template script into a host language(old processor languages), while in an event driven template language (such as XSLT and filter languages) the template script treats each block as a separate event definition. 

A template language formalizes the variables, blocks, substitution rules or logic in a web template and the standards that can be fixed into engine dependent or independent contexts in accordance with the type of language selected. 

Simple substitution templates have only syntax rules and no logic and iteration. Iteration templates are similar to simple substitution templates but have inbuilt iterations that can repeat a substitution in the scope of a single block or several blocks.  Programmable templates call functions that execute and impact the state or value of other variables. Complex templates have unrestricted logic and specify sequential algorithms and permit parameterization.

Templates also fit in with the concept of object oriented programming. It encapsulates the concept and functionality so that it can be modified minimally without impacting the other parts of the application.

If there are a large number of templates in a web site, template management demands the use of the Layout manager.  The layout manager enables the management of layout in addition to the management of content in a web site.  We shall be dealing with layout managers in greater detail in a later chapter.  So we shall not say much more than this here.

This chapter however, would be incomplete if we do not mention personalization, even though the details would be beyond the scope of this book..  Personalization of a site is the process of creating templates that filter and target the information displayed on the web site on the basis of the user’s identity and predefined needs.  The pages are tailored to the user needs and are a common form of enhancing customer service or e-commerce sales and marketing.  Personalization software includes software like Broadvision, ResponseLogic and Autonomy. ASP.Net personalization features take the whole technology one notch higher by allowing the user customized even the components that will be placed on the web page.  It introduces an generic storage system object called “profile’ which makes it easy to track and apply user preferences on web pages.

Web design is maturing.  It is becoming modular, object oriented and more scientific.  It is concerned about usability issues and is focusing on creating websites that are user friendly and cross browser compatible.  Positioning elements on a template and then deploying them across the website is a challenge by itself.  Absolute positioning of elements in a template based web site is an absolute challenge.  We shall be exploring this in a later chapter.