Navigation
  • Home
  • Recent
  • Most Active
  • Popular
  • Blog
  • Credits
  • RSS
  •   Interaction
  • Register
  • Statistics
  •   Help
  • Suggestions
  • Contact Us
  • How to Edit
  • Help



  • [Edit]





    A web template is a tool used to separate content from presentation on the web design, and to the massive production of web documents. It is a fundamental piece of a template system, which shows the motivations and typical uses.



        Web template
            Basic concepts
                Formal characterization
            Kinds of web templates
                Examples
            Template format strategies
                Sub-template use strategies
                Hook compatibility strategies
            Template languages
                Languages hierarchy
                    Simple substitution templates
                    Iterable templates
                    Programable templates
                    Complex templates
            Template reuse and repositories
                Template files
            History
            See also
                Examples

    top

    Basic concepts
      Content resource: a input supplier, like a SQL database or a XML file.
      Substitution process: the basic "find variable and substitute by value" process, performed by the template engine. Example (see picture above): the substitution of $x by the content (on 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).
        Moment of the substitution process: before (see "Static web template"); during (see "Server-side web template"); or after (see "Client-side web template"), the "send web document" process.
      Logic (encapsulating the substitution process): provided by more complex template languages and available only on more unrestricted template engines that interpret (parse) it. Conditionals (to decide whether to show a variable or not) and iteration (block repetition) are the basic statements 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 consider a "object transformation" (see XSL-FO transform concept).
        Specific types: a XML schema is a typical strategy to specify the requirements of more specific type of document (than a generic format like XHTML).
        Standard formats: formats on the W3C standards for web (ex. XHTML-recommended formats).
        Non-standard types: not-W3C, but widely used on web (PDF, Flash, etc.).
      Good separation principles: on standard documents there are two or more levels (opportunities) of "content from its presentation" separation:
        Web template: separate "pure content" from web presentation specification.
        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 rendered data: there are "extended MVC models" like  M(VR)C  (R stands "renderer"), 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

    top

    Formal characterization
    For a formal, but not rigorous, definition of web template, we can modeling the template system as a dataflow:
      Input data stores:
        Template, T
        Content (or state data), C
      Process, P

    Let:
      C0, T0, R0: the empty content, empty (ø) template and empty document.
      T1: a template without instructions.
      I(X) = "information content set" function, like a txt converter.

    Basic Properties:
      Note: The equal symbol is about a equivalent class that ignore hook cleaning.

    Important conclusions from this definition:
      The simplest substitution string procecess can characterize a template.
      Files from languages like XSLT or XQuery are templates, but files like a Perl script, that need a instruction like print (it is not a hook), are not.
      The process can not be arbritrary.

    top

    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:



    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 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-based strategies.
      Templates on Other strategies.


    top

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

    top

    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 dependences or layout dependences. This file is fomated with very specific markup, that reflects the template system strategies.

    top

    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 language is an output language with embedded instructions in a scripting language.
    There are two main kinds of template languages, referring the output language:

      Event-driven template languages: the main example is XSLT. Each block have your separate (as event) definition, where the template script hosts the output language. They are descendant of the filter languages, like AWK.

    top

    Hook compatibility strategies
    All template format deal with two languages: the script language, and the output language. One embedding another.

    NOTE: some template systems like Cocoon permits interchange into the same file (see how to embed xsp:content into xsp:logic).

    Template syntax need special care with the "border" between languages, to avoid mixing and to supply scaping forms. There are well defined tags, marks or characteres, named "hooks", that intend to separate the two languages. This hooks may be reconfigurable.

    Types of hook:
      Script block: encloses developer-supplied program logic.
      Expression: evaluates a program expression (or simple scalar variables) and substitutes by its value.

    Usual examples for script hooks (hidden blocks) and language styles:
      <% script %>   ASP style
        PHP style
      script   ColdFusion style
        XSLT style
        directive script line   C preprocessor (or CheetahTemplate) style
        SSI style
      script   Cocoon style
      (where script is a single expression)   XQuery style

    Usual examples for re-used script blocks:
      ...   ColdFusion "set and output" custo-tag style
      ...   XSLT "use and def" style

    Usual examples for expressions and language styles:
      <%=x %>   ASP style
        PHP style
        x
            y
                ColdFusion interpolation style
      ...x...   Cocoon style
        Smarty, XQuery and XSLT styles
        XSLT style
      ...expansios...   XSLT style

    Usual examples for custom-tags or parametrized macros:
      <%=foo(v1,v2) %> ASP style
      PHP style
      XQuery style
      Coldfusion style

    top

    Template languages
    The syntax to express variables, blocks, substitution rules, or logic, in a web template, is formalized by a template language.

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

    top

    Languages hierarchy

    Template languages can be grouped in a hierarchy




    The main divisory line, from the good separation principles perspective, is about Programable/Iterable
    (Context-sensitive / Context-free). From (power to produce) algorithms perspective, the upper line between Complex and others.

    top

    Simple substitution templates
    Only variable syntax rules exist, not logic neither iteration. They are very restricted, only substitution and simple macro expansion can be doed. The "double quotes preprocessor" into languages like PERL or PHP, on print "Hello $x" statements, are good examples.

    Features:
    1. Scalar variable expansion.

    1.1. Externally defined.

    1.1.1. Pre-defined: see SSI or PHP ($ENV) HTTP environment variables.

    1.1.2. User-defined (from user-defined input resource)

    See fig. example where "Hello " turns "Hello Mother" or "Hello World".

    1.2 Internally defined. Note: if it have scalar externally defined variables, it will be replaced by values.

    1.2.1. Hidden specification. In a Embedded template language it is not content, is hidden and may be never used. C preprocessor example:

      define PI 3.14159
      define PI
    1.2.2. Block re-use specification. In a Embedded template language the block specification is also part of the template. Examples:

    Pi=3.14 is used on the
      R
          2 formula. turns Pi=3.14 is used on the 3.14
            R
                2 formula.
    Hello John ... is your real name? turns Hello John B.B.... John B.B. is your real name?.

    2. Parametrized block expansion or "Sub-template expansion" (concatenation macros).

    2.1. Pre-defined.

    2.2. User-defined. Hidde block example:

      define pbquote($A,$B)

      $A$B

    turns

    PI is a labelfor 3.14, a number

    .

    Block re-use example, where also scalar externally defined variables was replaced by values.

    Hello John ... is your wife? turns Hello John B.B.... Mary C.C. is your wife?.


    top

    Iterable templates
    Theoretical formal definition: Regular and context-free 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.

    Features:
      Simple template features
      Multi-valued variable expansion (iteration over lists)

    top

    Programable templates
    They support "side-effect free" logic. Examples: XSLT and StringTemplate.

    top

    Complex templates
    They support unrestricted logic, for specify any sequetial 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.

    top

    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.

    top

    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 dependences: the template may be have one or more included (by template language statements) files.

    top

    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.
        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 growed and dominated the "web template scenery", with two important moments:
          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.
          The iterable templates increase: with the perception and necessity of a good separation perspective. A lot of language variants was adopted.

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

    top

    See also
      CSS to complete the "presentation separation".
      Wiki templates:
        — a template that reminds users to subst.
     
    Search more:
     

       
    Source Privacy License Download Contact Us Atlas
    Scientus.org Dictionary (Yet Another Wiki) RC : 1.39
    MIT OpenCourseWare
    This article is licensed under the GNU Free Documentation License [copyleft]. It uses material from the Wikipedia article "Web template". link