Wikipedia

Web template system: Difference between revisions

Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
→Overview: clarification: similar visual format
 
(627 intermediate revisions by more than 100 users not shown)
Line 1:
{{Short description|System in web publishing}}
'''Web Template systems''' are simple software systens used as
{{Multiple issues|
viewer in a [[Model-view-controller]] (or similar) [[Embedded_system#Embedded_software_architectures|embedded architectures]]. It is characterized by:
{{more citations needed|date=June 2008}}
* [[Template engine]]: the software, it [[preprocessor|processes]] input, transforming into [[web pages]]. It have two typical entities on input:
{{Original research|date=April 2011}}
** [[Web template]]: a [[Algorithm|recipe]] with web page fragments, to transform content into [[web pages]].
{{Cleanup|date=April 2011}}
** ''Content resource'': a input supplier, like a [[SQL]] [[database]] or a [[XML]] file.
}}
* [[Web_template#Template_languages|Template language]] standards: the language of the recipe.
{{Data transformation}}
[[File:TempEngWeb016.svg|thumb|The basic process for a server-side '''web templating system''': content (from a [[database]]), and "presentation specifications" (in a '''web template'''), are combined (through the [[template processor|template engine]]) to mass-produce web documents.]]
 
A '''web template system''' in [[web publishing]] allows web designers and developers to work with ''web templates'' to automatically generate custom [[web page]]s, such as the results from a search. This reuses static web page elements while defining dynamic elements based on [[HTTP request|web request]] parameters.
[[Image:WebTemplate1.gif|thumb|right|200px|The basic process on the system: content (from ''database''), and "presentation specifications" (from [[web template]]), producing (through the [[template engine]]) [[web pages]].]]
Web templates support static content, providing basic structure and appearance. Developers can implement templates from [[content management system]]s, [[web application framework]]s, and [[HTML editor]]s.
 
==Overview==
The main use of ''template systems'' are to [[Separation of concerns|separate]] content from presentation on [[web design]], and to the massive production of [[web page]]s.
A ''web template system'' is composed of the following:
* A [[Template processor|template engine]]: the primary [[processing element]] of the system;<ref>{{cite web|title=Template engine |url=http://www.phpwact.org/pattern/template_view#separating_html_from_programming_code |publisher=phpwact.org wiki |access-date=7 January 2013 |url-status=dead |archive-url=https://web.archive.org/web/20121204081204/http://www.phpwact.org/pattern/template_view |archive-date=December 4, 2012 }}</ref>
* ''[[Content resource]]'': any of various kinds of input [[data stream]]s, such as from a [[relational database]], [[XML]] files, [[Lightweight Directory Access Protocol|LDAP]] directory, and other kinds of local or [[Computer networking|networked]] data;
* ''[[Template resource]]'': ''web template''s specified according to a [[template language]];
 
The template and content resources are processed and combined by the template engine to mass-produce web documents, each with a similar visual format. For purposes of this article, web documents include any of various output formats for transmission over the web via [[Hypertext Transfer Protocol|HTTP]], [[HTTPS]], or another [[Internet Protocol|Internet protocol]].
== Motivations and typical use== <!-- or Introduction -->
Websites often require regular content updates, and standardization of appearance.
 
===Template engine===
A [[News agency|news website]], for example, needs to be daily updated.
{{Excerpt|Template processor}}
Each ''news item'' will be contextualized by a standard presentation ([[page layout]], sctructure, etc.). A typical strategy to automate this standardization is:
 
== Example ==
# choose a [[web template system]] to maintain the [[website]];
With the model typically held in a relational database, the remaining components of the [[model–view–controller|MVC]] architecture are the control and view. In the simplest of systems these two are not separated. However, adapting the [[separation of concerns]] principle one can completely decouple the relationships.
# group ''news itens'' into sets, with differnt presentation needs;
# specify the "presentation standards" through [[web templates]], for each set of news;
# specify a ''content resource'' to generate or update the content of each ''news item''.
 
TheFor idea behindexample, the "view template method"may look islike this:
<syntaxhighlight lang="html">
to separate content (data) from presentation (data representation), and to separate business-logic from presentation-logic. It have many advantages in using:
<!DOCTYPE html>
* Ease of design change
<html xmlns="http://www.w3.org/1999/xhtml">
* Ease of interface localization
<head><title>Sites</title></head>
* Possibility to work separately on design and code by different people at one and the same time
<body><h1 data-xp="title"><!-- placeholder --></h1></body>
* Etc.
</html>
</syntaxhighlight>
 
Then, the control template loads the view, and then uses [[XPath]] addressing {{Original research inline|date=December 2013}} to insert components from a database, for instance:
== Kinds of template systems ==
<syntaxhighlight lang="php">
There are many software packages and commercial solutions of [[web templates]] and [[template engines]], but they also can be grouped in ''template systems''.
<?php
$doc = new DOMDocument;
$doc->preserveWhiteSpace = false;
$doc->Load('view.html');
$titlenode = $doc->createTextNode("Like this");
$xpath = new DOMXPath($doc);
$xpath->registerNamespace("h", "http://www.w3.org/1999/xhtml");
$query = "//h:*[@data-xp='title']/comment()";
$entries = $xpath->query($query);
foreach ($entries as $entry) {
$entry->parentNode->replaceChild($titlenode, $entry);
}
echo $doc->saveXML();
?>
</syntaxhighlight>
 
==Kinds of template systems==
The [[Software architecture|architecture]] of this systems, into a [[Client-server|client-server]] reference model, is the main divion criteria.
Although the use of diverse modern [[web cache]] strategies, architectures can be characterized.
 
A web browser and web server are a [[client–server]] architecture. Sites often also use a [[web cache]] to improve performance. Five templating system types are classified based on when they replace placeholders with real content and assemble pages.
=== Outside server systems ===
[[Image:StaticTemplates.gif|thumb|left|300px|Outside server template system architecture.]]
 
* Server-side – run-time substitution happens on the web server
''Web template'' on this context can viewed as a ready-made [[web design]], used to mass-produce "cookie cutter" [[website]]s for rapid deployment.
* Client-side – run-time substitution happens in the web browser
* Edge-side – run-time substitution happens on a proxy between web server and browser
* Outside server – static web pages are produced offline and uploaded to the web server; no run-time substitution
* Distributed – run-time substitution happens on multiple servers
 
Template languages may be:
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 [[Microsoft FrontPage|FrontPage]], or in plain text editors such as [[Notepad]] or [[Vim (text editor)|VIM]].
* Embedded or event-driven.
* Simple, iterable, programmable, or complex.
* Defined by a consortium, privately defined, or de facto defined by an open implementation. Ownership influences the stability and credibility of a specification. However, in most jurisdictions, language specification cannot be copyrighted, so control is seldom absolute.
 
The source code of the [[Template engine (web)|template engine]] can be proprietary or [[open source]].
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.
 
Many template systems are a component of a larger programming platform or framework. They are referred to as the "platform's template system". Some template systems have the option of substituting a different template language or engine.{{citation needed|date=August 2013}}
A [[Microsoft FrontPage|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 [[Cascading Style Sheets|CSS]] styles.
 
===Language support===
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.
[[Programming languages]] such as [[Perl]], [[Ruby (programming language)|Ruby]], [[C (programming language)|C]], and [[Java (programming language)|Java]] support template processing either natively, or through add-on libraries and modules. [[JavaServer Pages]] (JSP), [[PHP]], and [[Active Server Pages]] (ASP with [[VBScript]], [[JScript]] or other languages) are examples, themselves, of web template engines. These technologies are typically used in server-side templating systems, but could be adapted for use on an "edge-side" proxy or for static page generation.
 
===Static site generators===
=== Server-side system ===
{{Main|Static site generator}}
Static site generators are engines that use flat text input files like [[markdown]] and [[asciidoc]] to generate a [[static web page]]. Examples of this include [[Jekyll (software)|Jekyll]] (Liquid, [[Ruby (programming language)|Ruby]]), [[Hugo (software)|Hugo]] ([[Go (programming language)|Go]] templates), and Pelican ([[Jinja (template engine)|Jinja2]], [[Python (software)|Python]]).
 
===Static HTML Editors===
[[Image:ServerSideTemplates.gif|thumb|300px|right|Server-side template system.]]
[[File:StaticTemplates.gif|thumb|right|Outside server template system architecture.]]
 
[[HTML editor]]s often use web template systems to produce only [[static web page]]s. These can be viewed as a ready-made [[web design]], used to mass-produce "cookie-cutter" [[website]]s for rapid deployment. They also commonly include themes in place of [[Cascading Style Sheets|CSS]] styles. In general, the template language is used only with the editor's software.<ref>{{cite book|last1=MacDonald|first1=Matthew|title=Creating a Website: The Missing Manual|date=2015|publisher=O'Reilly Media, Inc.|___location=Chapter 8 > Putting the Same Content on Multiple Pages > Web Templates > Note box|isbn=9781491936177|url=https://books.google.com/books?id=ZJTuCQAAQBAJ|access-date=19 January 2016}}</ref>
 
[[Microsoft FrontPage|FrontPage]] and [[Macromedia Dreamweaver|Dreamweaver]] were once the most popular editors with template sub-systems. A Flash web template uses [[Adobe Animate|Macromedia Flash]] to create visually interactive sites.
nononono onononon nonononon n onononono nonononon
 
Many ''server-side template systems'' have an option to publish output pages on the server, where the published pages are [[static web page|static]]. This is common on [[content management system]]s, like [[Vignette (software)|Vignette]], but is not considered out-server generation. In the majority of cases, this "publish option" doesn't interfere with the ''template system'', and it can be made by external software, as [[Wget]].
 
=== Server-side systems ===
[[File:ServerSideTemplates.gif|thumb|right|Server-side template system]]
People began to use [[dynamic web page#Server-side scripting|server-side dynamic pages]] generated from templates with pre-existent software adapted for this task. This early software was the [[preprocessor]]s and [[macro (computer science)|macro languages]], adapted for the web use, running on [[Common Gateway Interface|CGI]]. Next, a simple but relevant technology was the direct execution made on extension modules, started with [[Server Side Includes|SSI]].
 
Many ''template systems'' are typically used as ''server-side template systems'':
{| class="wikitable sortable"
! System label/name
! Platform/framework
! Notes
|-
| Blade
| [[PHP]]
| Public. Part of [[Laravel]]
|-
| [[CheetahTemplate]]
| [[Python (programming language)|Python]]
| Public. [[Web template#Template languages|Embedded complex language]].
|-
| [[Django web framework|Django]]
| [[Python (programming language)|Python]]
| Use the "Django template language".
|-
| EJS (Embedded JavaScript)
| [[JavaScript]]
| Public. [[Web template#Template languages|Embedded complex language]].
|-
| [[FreeMarker]]
| [[Java platform|Java]]
| Public.
|-
| [[Facelets]]
| [[Jakarta EE]]
| Public. Part of [[Jakarta Faces]]
|-
| [[Genshi (Templating Language)|Genshi]]
| [[Python (programming language)|Python]]
| Public
|-
| [[Haml]]
| [[Ruby (programming language)|Ruby]] or Other
| Public.
|-
| Hamlets
| [[Java (programming language)|Java]]
| Public.
|-
| [[Jinja (template engine)|Jinja2]]
| [[Python (programming language)|Python]]
| Public. [[Web template#Template languages|Embedded complex language]].
|-
| [[Kid (templating language)|Kid]]
| [[Python (programming language)|Python]]
|
|-
| [[Lasso programming language|Lasso]]
| [http://www.lassosoft.com/ LassoSoft, LLC]
| Proprietary. [[Interpreter (computing)|Interpreted]] [[Programming language|Programming Language]] and [[Server (computing)|Server]]
|-
| [[Mustache (template system)|Mustache]]
| [[ActionScript]], [[C++]], [[Clojure]], [[CoffeeScript]], [[ColdFusion]], [[D (programming language)|D]], [[Erlang (programming language)|Erlang]], [[Fantom (programming language)|Fantom]], [[Go (programming language)|Go]], [[Java (programming language)|Java]], [[server-side JavaScript]], [[Lua (programming language)|Lua]], [[.NET Framework|.NET]], [[Objective-C]], [[ooc(programming language)|ooc]],<ref>{{cite web|title=<nowiki>{{mustache}}</nowiki>|url=https://mustache.github.io/|access-date=15 October 2013}}</ref> [[Perl]], [[PHP]], [[Python (programming language)|Python]], [[Ruby (programming language)|Ruby]], [[Scala (programming language)|Scala]], [[Tcl]]
| Public.
|-
| Basic [[Server Side Includes]] (SSI)
| The [[Server Side Includes#Directives|basic directives]] fix a "standard".
| [[Web template#Template languages|Embedded simple language]], if exclude <code>exec</code> directive.
|-
| [[Smarty (template engine)|Smarty]]
| [[PHP]]
| Public. [[Web template#Template languages|Embedded complex language]].
|-
| [[Template Toolkit]]
| [[Perl]]
| Public. [[Web template#Complex templates|Embedded complex language]].
|-
| [[Template Attribute Language]] (TAL)
| [[Zope]], [[Python (programming language)|Python]], [[Java (programming language)|Java]], [[Perl]], [[PHP]], [[XSLT]]
| Public; a.k.a. [[Zope#Zope Page Templates|Zope Page Templates (ZPT)]]; see also [[TALES|TAL Expression Syntax]] (TALES), [[METAL|Macro Expansion TAL]] (METAL)
|-
| [[Java view technologies and frameworks#Apache Tiles|Tiles]]
| [[Java platform|Java]]
| Public. Supports multiple template languages (JSP, Velocity, Freemarker, Mustache) from various frameworks (servlet, portlets, struts, spring).
|-
| [[Thymeleaf]]
| [[Java platform|Java]]
| Public.
|-
| Topsite
| [[Python (programming language)|Python]]
| Public. ''"As of 2008-02-20, this project is no longer under active development."''<ref>{{cite web|last=jodyburns|title=Topsite Templating System|url=https://sourceforge.net/projects/topsite/|access-date=15 October 2013}}</ref>
|-
| [[Twig (template engine)|Twig]]
| [[PHP]]
|
|-
| [[Standard PHP Library#PHPlib|PHPlib]]
| [[Standard PHP Library#PHPlib|PHPlib]]
| Public. [[Web template#Template languages|Embedded iterable language]].
|-
| [[WebMacro]]
| [[Java platform|Java]]
| Public. [[Web template#Template languages|Embedded iterable language]].
|-
| [[WebObjects]]
| [[Java platform|Java]]
| Use the [[WebObjects#Core frameworks|WebObjects Builder]] as engine.
|-
| [[Apache Velocity|Velocity]]
| [[Java platform|Java]]
| Public. Use VTL - [https://velocity.apache.org/engine/devel/vtl-reference.html Velocity Template Language].
|-
| [[Vignette (software)|Vignette]]
| Proprietary.
| Commercial solution. [[Web template#Template languages|Embedded complex language]].
|-
| [[XSLT]] (standard language)
| Any with an XSLT parser
| Standard. [[Web template#Template languages|Event-driven programmable language]].
|-
| [[XQuery]] (standard language)
| Any with an XQuery parser
| Standard. [[Web template#Template languages|Embedded programmable language]].
|}
 
Technically, the methodology of embedding programming languages within HTML (or XML, etc.), used in many "server-side included script languages" are also templates. All of them are [[Web template#Template languages|Embedded complex languages]].
{| class="wikitable sortable"
! System label/name
! Notes
|-
| [[Active Server Pages]] (ASP)
| Proprietary ([[Microsoft|Microsoft platform]]). See also: [[VBScript]], Javascript, [[PerlScript]], etc. extensions for ASP.
|-
| [[eRuby]]
| Public ([[Ruby (programming language)|Ruby]]).
|-
| [[ColdFusion Markup Language]] (CFM)
| Public ([[Lucee]], [[Railo]], OpenBD). Proprietary ([[Adobe ColdFusion]]).
|-
| [[Jakarta Server Pages]] (JSP)
| Public, [[Jakarta EE]].
|-
| [[Perl|Active Perl]]
| Public.
|-
| [[PHP]]
| Public.
|-
| [[OpenACS]]
| Public ([[Tcl]]).
|}
 
There are also [[preprocessor]]s used as [[template engine (web)|server-side template engines]]. Examples:
{| class="wikitable sortable"
! [[Preprocessor]]
! Notes
|-
| [[C preprocessor]]
| Public. [[Web template#Template languages|Embedded iterable language]].
|-
| [[M4 (computer language)|M4]]
| Public. [[Web template#Template languages|Embedded complex language]].
|}
 
===Edge-side systems===
Edge-Side template and inclusion systems. "Edge-side" refers to web servers that reside in the space between the client (browser) and the originating server. They are often referred to as "reverse-proxy" servers. These servers are generally tasked with reducing the load and traffic on originating servers by caching content such as images and page fragments, and delivering this to the browser in an efficient manner.
 
Basic [[Edge Side Includes]] (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language may also be implemented in web browsers using JavaScript and Ajax, or via a browser "plug-in".
 
===Client-side systems===
[[File:ClientSideTemplates.gif|thumb|right|Client-side and [[Distributed computing|distributed]] (decentralized) template system.]]
{{see also|JavaScript templating}}
Many web browsers can apply an [[XSLT]] stylesheet to XML data that transforms the data into an XHTML document, thereby providing template functionality in the browser itself.<br />
Other systems implement template functionality in the browser using [[JavaScript]] or another [[client-side scripting]] language, including:
* [[Mustache (template system)|Mustache]]
*[https://github.com/nebrelbug/squirrelly Squirrelly]
*[https://handlebarsjs.com/ Handlebars]
 
=== Distributed systems ===
The most simple form is [[transclusion]]s (HTML frames). In other cases [[dynamic web page]]s are needed.
 
Examples:
* [[Ajax (programming)|Ajax]]
* [[Rich Internet application]]
 
==See also==
{|
|-
|Concepts:
* [[Boilerplate code]]
* [[Bytecode]]
* [[Comparison of web template engines]]
* [[Browser engine|Layout engine]]
* [[Macro (computer science)#Text-substitution macros|Text substitution macros]]
* [[Preprocessor]]
* [[Template processor]]
* [[Template (file format)]]
* [[Transclusion]]
* [[Virtual machine]]
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
|valign="top"|Standards:
* [[UIML]] (User Interface Markup Language)
* [[XSLT]] (Extensible Stylesheet Language Transformations)
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
|valign="top"|Software:
* [[CodeCharge Studio]]
* [[Jekyll (software)|Jekyll]]
|}
 
==References==
{{Reflist}}
 
9. [https://www.mgtechnologies.co.in/category/ecommerce-website-templates Free ecommerce website themes] MG Technologies Blogs and Information Portal of Website Themes.
[[Image:ClientSideTemplates.gif|thumb|left|300px|[[Distributed computing|Distributed]] (non-centered) template system.]]
 
==External links==
=See also=
* [http://psionides.eu/2009/06/15/javascript-template-libraries/ JavaScript template libraries] comparison from 2009
* [[Smarty]]
* [http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf Enforcing Strict Model–View Separation in Template Engines]
* [[XSLT]]
* [http://www.unirioja.es/cu/fgarcia/JST-ICWE2007.pdf A Double-Model Approach to Achieve Effective Model–View Separation in Template Based Web Applications]
* [[XML Sapiens]]
* [https://themeit.com/ A PHP template engine comparison with graphic charts]
* [[UIML]]
* [http://www.simple-is-better.org/template/ Comparisons/benchmarks of some Python template-engines and some generic thoughts about template-engines]
* [http://web-mode.org/ web-mode.el is an emacs major for editing web templates]
 
[[Category:Web server software]]
[[Category:Scripting languages]]
[[Category:Template engines|*]]
[[Category:Web design]]
Retrieved from "https://en.wikipedia.org/wiki/Web_template_system"