Web template

From Wikipedia, the free encyclopedia

This article or section does not adequately cite its references or sources.
Please help improve this article by adding citations to reliable sources. (help, get involved!)
Any material not supported by sources may be challenged and removed at any time. This article has been tagged since December 2006.

A web template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system.

Content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents.
Content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents.

This article is part of
the Web Template Systems series.

Main:

Supplemental:

Related:

Contents

[edit] Basic concepts

(See also supplemental article: Web template system (terminology))

A web template has certain basic defining characteristics. These characteristics can be described according to core principles.

Among these core principles:

  • The principle of Good separation;
  • The principle of Flexible presentation;

[edit] Good separation

A common design principle among experienced web developers is the separation of business logic from presentation logic.[1] The pursuit of this design principle is one of the primary motivating forces behind the invention and development of web template systems.[1] Approaches used to attain this separation include the 'inheritance approach' (based on principles of Object Oriented Programming); and the 'templating' approach, (consistent with the principles of MVC separation).[2] The precise difference between the various approaches is subject to some interpretation, and some aspects of the different approaches share a degree of similarity.[3]

[edit] Flexible presentation

One major rationale for promoting the design principle of "good separation" relates to the need for maximum flexibility in the code and resources dedicated to the presentation logic.[2]

Such flexibility is often required because:

  • the presentation source code language may differ from other code assets;
  • the production process for the application may require the work to be done at separate times and locations;
  • different workers may have different skillsets, and presentation skills do not always coincide with skills for coding business logic;
  • code assets are easier to maintain and more readable when disparate components are kept separate and loosely coupled;[2]

[edit] Sub-template

Representation of sub-template T1 referred by template T2.
Representation of sub-template T1 referred by template T2.

A web template may include other templates as "sub-templates". Page headers and page footers, for use in a primary template, are typical uses for sub-templates. A sub-template is similar to a subroutine in imperative programming languages. The sub-template supplies a document fragment to the primary template, which is then sent to the final output destination.

The specific functionality of sub-templates depends on the template language in use. For example, template code enclosed in sub-templates may not follow the same rules for variable interpolation and processing of template directives as code specified directly in a primary template.

[edit] Kinds of web templates

The remainder of this article may require cleanup to meet Wikipedia's quality standards.
Please discuss this issue on the talk page, or replace this tag with a more specific message. This article has been tagged since January 2007 .

There are many kinds of web templates: from simple "substitute templates" (masks), where the single-place-variables are substituted by content, to complex template, with full programming capabilities. Simple templates were important historically, on the first big websites and to the first web designers. Complex and intermediary templates play an important role in Content Management Systems (CMS) and Web Publishing in general. They make possible a standardized layout (page arranging, colors, positions, etc.) for different contents while using the same basic layout.

Web templates can be seen from many perspectives:

From the "moment of the substitution process" and server perspective:

Page generation process with client-side templates. See on Template Systems the outside server and server-side architectures.
Page generation process with client-side templates. See on Template Systems the outside server and server-side architectures.

From a template language (or template engine/parsing algorithm) perspective: see kinds of template languages bellow.

From the web designers perspective,

  • On template elements (local scale):
    • All-page template: all the page layout are a single template. It can used as a "general layout background" (mask). Example: an "all pages template" with a fixed header and footer, and an "all content" variable.
    • Block template: only a part (segment, component or region) of the page is the template-layout block. For example, template for the "menu box" on a dynamic web site.
  • On website (global scale):
    • Strongly template oriented website: the database can receive only "pure contents" (ex. text fed by the website editors), not design (ex. text colors, font faces, positions, etc.). The "pure content" not affect presentation, only "template rules" can do (customise) this.
    • Weakly template oriented website: content can affect design, can alter structure and diagramation. Website editors have a little bit more freedom, but the website have less style standardization.

From the web designers/web-programmers relationship perspective (design/logic separation):

  • Templates on MVC-based strategies.
  • Templates on Other strategies.

[edit] Examples

A complete list of implemented web templates and template engines is on Template systems article.

[edit] Template format strategies

A usual template is a single file (or a single record into a database) and it may to reference another resources for logical dependencies or layout dependencies. This file is formatted with very specific markup, that reflects the template system strategies.

[edit] Sub-template use strategies

Template systems produce web documents as output, in a "output language" (eg. HTML). A template with no instruction (for process on template engine) is also the output document.

The template have output language and template language specifications. There are two main kinds of template systems, that afect the template language on the strategy of use "root templates", sub-templates, and template libraries:

  • Classical template systems: the template comes from the embedding of the template script into a host language (output language). It is the "classical template language", because are descendant of the traditional word processing templates and old preprocessor languages style.
  • Content-driven template systems]]: the main example is XSLT. All templates are sub-templates (from a library). On XSLT the template script hosts the output language on each sub-template.

[edit] Delimiting and embedding strategies

The use of hooks are exemplified by the red marks. It permits the separation between logic (hidden for blue designers-view) and design. Below the source code example, where black and green are two distinct languages.
The use of hooks are exemplified by the red marks. It permits the separation between logic (hidden for blue designers-view) and design.
Below the source code example, where black and green are two distinct languages.

All template format deal with two languages: the template language, and the output language. One embedding another. Web template systems choose 1 of 3 strategies to do it:

  1. Embed template language (logic, expressions and place holders) into the output language. Examples: PHP, XSLT.
  2. Embed output language into the template language. Example: XQuery.
  3. Optionals:
    • On configuration: fix a default strategy and the directives for change it.
    • Mixing: fix a default and permits interchanging (with a more complex set of delimitors) of strategies into the same template, like on Cocoon.

Template syntax need special care with the "border" between languages, to avoid mixing and to supply escaping forms. There are well defined delimitors (tags, marks or characters), named "hooks", that intend to separate (compatibilize) the two languages.

Types of hook:

  • Script hooks: encloses blocks of developer-supplied program logic. Examples:
    <% script %>   ASP style
    <? script ?>   PHP style
    <cfscript> script </cfscript>   ColdFusion style
  • Sub-template hooks: to fix the frontiers of the sub-template block.
    <!-- BEGIN stName --> ... <!-- END stName -->   PHPlib style
    <xsl:template name="stName"> ... </xsl:template>   XSLT style
  • Expression hooks: to encode scalar variables, sub-template references, or expressions. Examples:
    <%=x %>   ASP style
    {$x}   XQuery style
    <xsl:value-of select="$x" />   XSLT style

There are a hi diversity of styles for hook encoding. For details about implemented styles, see Web template hook styles (complementary article).

[edit] Template languages

The syntax to express variable names, substitution rules and logic, in a web template, is formalized by a template language. Definition of web template must suppose the template system formal characterization. Template languages are all domain-specific, and subject of usual language taxonomies.

The specification standards of a template language can be fixed into an engine dependent or independent context:

[edit] Simple substitution templates

They are apparently very restricted languages, no logic neither iteration exist on your syntax.

Possible features:

1. Scalar variable expansion. Values, by default, are supplied (externally) by the content resource — pre-defined values, like HTTP environment variables, must be supposed (see formal property 4) to have supplied by the content resource.
See on figure, "Hello {$X}" outputs "Hello Mother" or "Hello World".
2. Scalar variable declaration. For supply (internally) "on template defined" values. C preprocessor example:
#define PI 3.14159
3. Sub-template reference expansion. To referrer a sub-template from the template library.
3.1. Reference to internal sub-template. "On the same resource". (only for re-use, no logic) it is a Explicit reference (for "implicit" see inline sub-template reference on programmable features). XSLT and Wiki examples:
<xsl:call-template name="header" />
{{header}}
3.2. Reference to external sub-template (on an external Library). "On another resource". In a distributed template system architecture it make possible the transclude feature.
3.2.1. Include feature. Local reference, on the same machine as the template engine. SSI example:
<!--#include file="header.tpl" -->
3.2.2. Remote include feature. The template engine must to do a remote reference (to a remote template resource). PHP example:
<? include("http://www.example.com/header.tpl"); ?>
3.3. Parameterized reference. To referrer parameterized sub-templates (like a parameterized macro). XSLT example:
<xsl:call-template name="header"><xsl:with-param name="title" /></xsl:call-template>
4. Sub-template declaration. For user-defined sub-templates.
4.1. Simple declaration. XSLT example:
<xsl:template name="header">.. header block ..</xsl:template>
4.1.1. Cast to scalar. A simple sub-template can declared (and later referred) as a scalar variable. The declaration is not hidden to template designers, and leaving its contents.
The number <define name="piVal">3.14</param></define> (...) is {$piVal}. outputs
The number 3.14 (...) is 3.14.
4.2. Parameterized declaration. To declare parameters on sub-templates, giving some of the power of a function. XSLT example:
<xsl:template name="header"><xsl:param name="title" />.. header block ..</xsl:template>
5. Declaration with Interpolation. A augment for variable or sub-template declaration features. Variable interpolation is a typical feature on templates (to deal with data dependency), having the "content input scalar value" references replaced on variable or sub-template declarations. Example:
#define PI 3.{$piFracPart} (if piFracPart input value is "14", all PI references will expanded to "3.14", if "14159" will "3.14159").

Minimal features: to be a simple template language, the template language must have feature 1 or feature 2.

[edit] Iterable templates

Same as simple templates, but with iteration capabilities. It can repeat a substitution in the scope of a single block, providing a "do-repeat" logic.

Theoretical formal definition: Regular and context-free templates.

Possible features:

1. to 6. See on Simple substitution templates. Possible feature enhancements:
3. Sub-template recurrence. Sub-template auto-reference is expanded.
7. Multi-valued variable reference. It is reference to a set (ordered or not) of scalar values (or sub-sets). The generic concept is well defined on the XPath-datamodel (as sequence reference). The content resource can supply multi-valued variables, and they can be referred inside parameterized sub-templates.
7.1. Implicit reference.
7.1.1. Inline sub-template implicit reference. For iteration over lists, for use on implicit sub-template block. Cheetah example:
#for $item in $itemList:
<li>$item</li>
#end for
7.1.2. On library sub-template implicit reference. For matching content on template library. XSLT example:
<xsl:apply-templates/>.
7.2. Explicit reference.
7.2.1. Sub-template explicit reference. The above Cheetah example, may be substituted by a sub-template call to a pre-defined foo sub-template:
$foo($itemList).
7.2.2. Free reference (for default expansion method). The language may adopt a default sub-template to expand a free multi-valued variable reference. XQuery do.

Minimal features: to be a Iterable template language, the template language must to have "Simple template language minimal features" and feature 7.

[edit] Programmable templates

They are programmable in the sense of programmable logic device. They support "side-effect free" logic. Examples: XSLT and StringTemplate.

Theoretical formal definition: Recursive and context-sensitive templates.

Possible features: (stubs)

1. to 7. See on Iterable templates.
8. Filtering variables with functions.
8.1. Scaler variable filter. Smarty example (piped notation for foo() function call):
{$x|foo}
8.2. Multi-valued variable filter. Instructions for filtering multi-valued variable, like on Cheetah while loops, or list reference by a XPath. Example, using XPath condition on XSLT:
<xsl:for-each select="itemList/item[@lang='en']">
<li><xsl:value-of select="item"/></li>
</xsl:for-each>
9. Conditional sub-template reference.
9.1. Explicit control. Traditional IF/THEN/ELSE structures. PHP example:
<? if ($header) {?> ... use $header ... <? } ?>
9.2. Content-driven reference. The content decide if sub-template will used or not, it matching to a template library. XSLT example:
<xsl:template match="header" />
10. Programmable loops.

[edit] Complex templates

They support unrestricted logic, for specify any sequential algorithm. Have features like to permit parametrization, "if-then-else", "while-repeat", and many other statements for substitution control. Smarty template language and the "server-side extension module languages" like PHP, JSP, ASP, ColdFusion are examples.

Theoretical formal definition: Unrestricted templates. Note: the term "complex template language" is an informal label, not to be confused with Complex algorithm.

[edit] Template reuse and repositories

We can "recycle" web templates.

Web templates are sometimes free, and easily made by an individual domestically. However, specialized web templates are sometimes sold online. While there are numerous commercial sites that offer web templates, there are also free and "open-source" sources.

[edit] Open source templates

The rise of the open source design movement has seen a slow but steady rise in the community of open source designers. There are currently two main active communities of open source designers:

As of this writing there are over 1900 unique templates available for modification and use by anyone under the creative commons licence.

[edit] Template files

Usually a "simple template" will include most of the source files necessary for further customizing the template. There are two cases (motivations) to need more than 1 file per template:

  • Non-"self contained document": on HTML standard template, the HTML file it self is not sufficient, it may be need CSS files, JS files, image files, and others.
  • Logical dependencies: the template may be have one or more included (by template language statements) files.

[edit] History

Adapted and resumed from Template system history.

Is difficult to be precise about "web template beginnings" or chronology, because it started only after the "widespread development of web pages", and there are a lot of parallel developments.

Web templates, as "web designers necessity", started with the HTML and web browsers popularization. After this, different kinds of templates was dominated the web template scenery:

  • Static web templates: at the middle of 1990s. The main necessity in this first times of the web, was for static pages production. Many independent software and HTML editors adopted a variation of static web template, similar to word processing Templates.
  • Server-side web templates: a widespread use was after middle 1990s.
    • The first use was able with the CGI — Common Gateway Interface, for server-side dynamic page generation —, stable in the 1993's.
    • Server Side Includes (a primitive template) pointed a more direct way to deal with server-side scripts, at the web servers.
    • At final 1990s and beginning 2000s, with the growing of on-line and e-commerce systems, and popularization of web portals (with your CMS), the use of server-side web templates grew and dominated the "web template scenery", with two important moments:
      1. The complex template languages domination: many "active" languages (PHP, CFM, ASP, "Active Perl", etc.) working on (CGI) web servers, as an interpreted language, was adopted as a (general propose) complex template languages. "Active page language" script and web template, was the same.
      2. The iterable templates increase: with the perception and necessity of a good separation perspective. A lot of language variants was adopted.

[edit] XPath-datamodel compatibility tendency

The high diversity of "template languages" pointed to the need for a "template standard language". The matureness of XPath, XSLT and standardization of XQuery, promises, for near future, a kind of convergence.

Many template languages, in yours newest framework versions, are now compatible with the XQuery 1.0 and XPath 2.0 Data Model (XDM) — examples: XSP on Cocoon 2, ZPT on Zope 2, JSP on J2EE 1.4.

[edit] Other uses

Web templates may be used on a not-web context:

[edit] References

  1. ^ a b As of October 2006 Enforcing Strict Model-View Separation in Template Engines by USFCA University.
  2. ^ a b c Paragon Corporation (2003-07-19). Separation of Business Logic from Presentation Logic in Web Applications.
  3. ^ MVC vs OOP

[edit] See also

[edit] Examples

[edit] External links

Retrieved from "http://en.wikipedia.org../../../w/e/b/Web_template.html"
In other languages