Web template

Encyclopedia : W : WE : WEB : Web template

---

A web template is a tool used to separate content from presentation on the web design, and to the massive production of web pages.

Content on websites needs updating and standardization. A news website, for example, needs daily updating and each updated news item will be contextualized by a standard layout and standard page-location. A strategy to automate this standardization is:

1. conceive the website with a template engine (template processor);
2. specify the standards through a web templates;
3. specify and update content on a database;
4. incorporate each item of updated content, in a standard format, into the web template with a template engine

are a good examples: the wiki engine  is the template engine, and a specfic wiki template (the web template) is used into a set of articles (the content).

Basic concepts

• Web page:
• * Dynamic Web page: generated "on the fly" (dynamically on the web) by a template engine.
• * Static Web page: an HTML file, generated by hand or by an editor.
• Substitution process: a "find variable and substitute by value process" (performed by the template engine). In the picture, the substitution of $x by the database content (in page 01 "Mother", on page 02 "World").
• * Variable and related content: the name of the variable ($x on the picture) and the value that it assumes (related database).
• * Parameter: in more complex "template languages", variables (component name) can be parametrized or have "sub-variables".
• Moment of the substitution process:
• * Before (on editor): during the editing of a static web page (on an advanced editor with an engine). This is a classical "macro-substitution" on text editors and pre-processors (from programming languages).
• * During (on server): the template engine produces the dynamic web page. See also Server Side Includes, and CGI.
• * After (on client): during the rendering of the web page, by the web browser. See also transclusion and framing (World Wide Web).
• Logic (encapsulating the substitution process): provided by more complex "template languages" and available only on more complex template engines that interpret (parse) it. Conditionals (to decide whether to show a variable or not) and iteration (block repetition) are the basic statments to create more complex template structures.

• Type of document: templates can be used to customize the look and feel of a "standard web document" (mainly HTML documents), or to transform data into other kinds of documents (PDF format ex.), but, this last one we will considere a "object transformation" (see XSL-FO transform concept). To reduce the HTML freedom, the templates may constrain the HTML in a DTD (Document Type Definition). If we want do this more rigorously, we can use XML data and XSLT template transforms.
• * Standard types: the W3C standards for web (XHTML-recommended formats).
• * Not-standard types: not-W3C, but used on web (PDF, Flash, etc.).
• Good separation: on standard documents there are two or more levels (opportunities) of "content from its presentation" separation:
• * Web template: separate "pure content" from web presentation specficication.
• * HTML/CSS: a good use of CSS permit a more accurate separation from "content structure and grouping" (the HTML core) from "visual specification".
• * Pure data and redendered data: there are "extended MVC models" like  M(VR)C  (R stands "redenderer"), where data details such as date format ("11/10/2006" or "2006-10-11" presentation) or decimal point ("1,000,000" or "1000000" presentation) need to solved without breaking the separation strategy. A classical solution is to "pre-process" the data on template engine with renderer functions. Good CSS use can also solve a lot of these cases

Kinds of web templates

There are many kinds of web templates: from simple "substitute templates" (masks), where the single-place-variables are substituted by a web designer's content, to complex template schemas based on XSLT. Simple templates were important historically, on the first server-side includes to do uniform headers and footers on the web pages, and to the first web designers, on your html editors. Complex 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:

• Static web template: before the publication (on server).
• Server-side web template: during the on server substitution process.
• Client-side web template: after the server publication, on client engine.

From the template engine parsing algorithm perspective (template language perspective):

• Simple templates: only variable syntax rules exist, not logic neither iteration. The print command into languages like PERL or PHP, on print "Hello $x" staments, are good examples. Theoretical formal definition: "context-free templates".
• Iterable templates: same as single 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 templates".
• Complex templates: they support logic and have the possibility to add logic on the template itself, permitting parametrization, "if-then-else", "do-repeat", and other statments for substitution control. XSLT is the main standard language. Theoretical formal definition: "Unrestricted templates".

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 structure or diagramation, only "template rules" can do (customise) this.
• * Weakly template oriented website: content can affect design, can alter sctructure and diagramation. Website editors have a little bit more freedom, but the website have little standardization.

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

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

History

HTTP protocol has been in use by the Web since 1990, HTML, as standard, since 1996. The web browsers explosion started with 1993's Mosaic, not only for HTTP/HTML navigations, but also Gopher, FTP/TXT, and leading with the all diversity of that times.

Web Templates, as "web designers necessity", started with the HTML and web browsers popularization. The CGI (for dynamic page generation) was stable in the 1993's, but the main "necessity" in this first times of the web, was for static pages production. Many independent softwares and HTML edictors adoted a kind of static web template.

Perhaps the first rudimentar server-side web templates was on tipical Unix web servers, for AWK (plugged on CGI) report generator.

Many "active" languages (PHP, CFM, ASP, "Active Perl", etc.) working on (CGI) web servers, as a interpreted language, was adopted as a (general propose) complex template languages.

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 growed and domined the "web template scenery"; but now with the good separation principles enforcing iterable templates and sub-languages.

The hi diversity of "template languages" (as a kind of "sub-language" of the CMS or the server-side programming languages), pointed the needs for a "temaplate standard language". The matureness of XSLT and standarization of XQuery, promises, for near future, a kind of convergence.

Template languages

The sintax to express variables, blocks, substitution rules, or logic, in a web template, is formalised by a template language.

Languages can be defined in a standard or in a "exclusive" context:

• Standard template languages: ex. W3C template language, the Extensible Stylesheet Language (ab. by XSL or XSLT).
• Engine dependent languages: ex. Vignette template language.

Template systems

Software packages and commercial solutions can be organised in "template systems".

Server-side web template languages

Public packages

• Smarty template language, on PHP platform.

Commercial solutions

• Vignette template language.

Static web template editors

Web template on this context can viewed as a ready-made web design, used to mass-produce "cookie cutter" websites for rapid deployment.

Usually a "simple template" will include most of the source files necessary for further customizing the template using most modern WYSIWYG editors such as Macromedia Dreamweaver, BlueFish, Amaya or FrontPage, or in plain text editors such as Notepad or VIM.

On Macromedia Dreamweaver the item may also include a graphical template created in Adobe Photoshop or Macromedia Fireworks MX making it easy to edit or customise graphics and images.

A FrontPage web template is one used only with Microsoft's FrontPage software. One of the more unique features of FrontPage is that it has built in support for automated and easy to use web templates. The main distinction between these templates and other universal html templates is that FrontPage templates include an automatic navigation system that creates animated buttons for pages that have been added by the user, and creates an advanced multi-level navigation system on the fly using the buttons and the structure of the web site. FrontPage templates also commonly include FrontPage themes in place of CSS styles.

A Flash web template uses Macromedia Flash to create visually appealing sites. Flash sites make use of visual effects employed by Flash. Flash is also used for many website intros.

Template reuse and template 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.

See also

• CSS to complete the "presentation separation".
• Wiki templates:
• * — more detailed information on subst template (on the Meta-Wiki).
• * — a template that reminds users to subst.
• * — wiki template help page.
• * — another help page.
• * [Transclusion costs and benefits]

External Links

• Template repository examples,
• * for standard (W3C) document types:
• ** [http:/www.haxanstudios.com/ Website Templates (Open Source Web Design OSWD.org)]
• Template system examples:
• * On PHP platform:
• **[PEAR template systems]
• **[Smarty].
• ** [MediaWiki]
• * On Perl platform:
• ** [Complete::Toolkit]

 

---

From Wikipedia, the Free Encyclopedia. Original article here. Support Wikipedia by contributing or donating.
All text is available under the terms of the GNU Free Documentation License See Wikipedia Copyrights for details.

Search Titles

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

?