Web template system: Difference between revisions

Revision as of 14:27, 6 August 2021

Latest revision as of 11:33, 28 August 2025

(48 intermediate revisions by 31 users not shown)

Line 1:

{{Short description|System in web publishing that lets web designers and developers work with web templates to automatically generate custom web pages}}

{{Multiple issues|

{{more citations needed|date=June 2008}}

Line 5:

{{Cleanup|date=April 2011}}

}}

{{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]] letsallows 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.

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.

Line 16 ⟶ 17:

* ''[[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]].

===Template engine===

==Motivations and typical uses==

{{Excerpt|Template processor}}

===Applications===

Web developers can use templates from any individual or organization to set up a website. Once they purchase or download a template, they replace all generic information in the web template with their personal, organizational, or product information. Templates are commonly used to:

* Display personal information or daily activities as in a [[blog]]

* [[E-commerce|Sell products online]]

* Display information about a company or an organization

* Display [[Genealogy|family history]]

* Display a gallery of photos

* Place music files such as [[MP3|MP3 files]] on-line for play through a web browser

* Place [[Video clip|videos online]] for public viewing

* Set up a private login area online

===Mass-production===

Various agencies and organizations use web template systems to [[Mass production|mass-produce]] content when slower production methods are less feasible.{{Citation needed|date=April 2011}}

For an introductory overview, take a [[News agency|news website]] as an example. Consider a "static website", where all web pages are [[Static web page|static]], built by a [[web designer]]. It would be very repetitive work to change individual pages as often as the news changes. A typical strategy to automate the web designer's "repetitive work" using templates could be as follows:

# choose a ''web template system'' to maintain the [[website]];

# group ''news items'' with different presentation needs;

# specify the "presentation standards" through [[web templates]], for each group of news;

# specify a ''content resource'' to generate or update the content of each ''news item''.

It can’t be denied how important it is for a business to have a well-designed website these days[https://blogerhub.com/well-designed-websites-create-easily/ Well-designed website] represents your business easily.so it’s very important in ourslife. Call to action is a very important step for your website.

===Style standardization===

{{Expand section|date=March 2012}}

===Separation of concerns===

{{Main|Separation of concerns}}

A common goal among experienced web developers is to develop and deploy applications that are flexible and easily maintainable. An important consideration in reaching this goal is the [[separation of presentation and content|separation]] of [[business logic]] from [[presentation logic]].<ref name="Parr000">{{cite book

| first = Terence John

| last = Parr

| title = Enforcing strict model–view separation in template engines

| publisher = Proceedings of the 13th international conference on World Wide Web

| year = 2004

| isbn = 1-58113-844-X

}}</ref> Developers use web template systems (with varying degrees of success) to maintain this separation.<ref name="Parr000" />

For the [[web designer]], when each web page comes from a [[web template]], they can think about a modular web page structured with components that can be modified independently of each other. These components may include a header, footer, [[global navigation bar]] (GNB), local [[navigation bar]] and content such as articles, images, videos etc.

For [[programmer]]s the [[Web template#Template languages|template language]] offers a more restricted logic, only for ''presentation'' adaptations and decisions, not for complex (business [[model–view–controller|model]]) [[algorithm]]s.{{Citation needed|date=April 2011}}

For other members of the "site team", a ''template system'' frees webmasters to focus on technical maintenance, content suppliers to focus on content, and gives all of them more [[Reliability engineering|reliability]]. <!-- of content and presentation standards.-->

Moreover, it has the following advantages to its use:

* ''Ease of design change'': presentation variations on templates are "content invariant", meaning a web designer can update the presentation without wider infrastructural preoccupations.{{citation needed|date=September 2018}}

* ''Ease of interface localization'': menus and other presentation standards are easy to make uniform, for users browsing on the site. Using [[Breadcrumb (navigation)]] makes any website more user friendly and flexible.<ref name="breadcrumbs">[https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices]</ref>

* ''Possibility to work separately'' on design and code by different people at the same time. It can be performed while all the codes in a templates are clean design and every block or section of the websites are write with individual commenting system.{{Citation needed|date=April 2011}}

* ''[[Responsive web design]]'' is now a mandatory factor for any website. Everything must be performed without any change in responsive design.

* ''Ease of documentation'' a handy documentation saves more time to understand the whole template and also accelerate the modification process. Professional website designers highly emphasize documentation.

One difficulty in evaluating separation of concerns is the lack of well-defined formalisms to measure when and how well it is actually met.<ref name="Parr000" /> There are, however, fairly standard heuristics that have been borrowed from the ___domain of [[software engineering]]. These include '[[Inheritance (computer science)|inheritance]]' (based on principles of [[object-oriented programming]]); and '[[Template processor|templating]] and [[generative programming]]', (consistent with the principles of [[model–view–controller|MVC separation]]).<ref name="ParagonCorp">{{cite web

|url=http://www.paragoncorporation.com/ArticleDetail.aspx?ArticleID=21

|title=Separation of Business Logic from Presentation Logic in Web Applications

|date=2003-07-19

|author=Paragon Corporation

}}

</ref> The precise difference between the various guidelines is subject to some debate, and some aspects of the different guidelines share a degree of similarity.<ref name="MVC_vs_OOP">[http://c2.com/cgi/wiki?MvcIsNotObjectOriented MVC vs OOP]</ref>

===Flexible presentation===

One major rationale behind "effective separation" is the need for maximum flexibility in the code and resources dedicated to the presentation logic.<ref name="ParagonCorp" /> Client demands, changing customer preferences and desire to present a "fresh face" for pre-existing content often result in the need to dramatically modify the public appearance of web content while disrupting the underlying infrastructure as little as possible.

The distinction between "presentation" (front end) and "[[business logic]]" (infrastructure) is important, because:

* Presentation source code language can differ from other code assets.

* Developers often make application components at separate times and locations.

* Workers skill sets don't always include both presentation skills and business logic coding ability.

* Code assets are easier to read and maintain when the system keeps various component types separate and [[Loose coupling|loosely coupled]]<ref name="ParagonCorp" />

===Reusability===

Not all potential web template users can hire developers to design a system. Additionally, some may wish to use the Web but have little technical proficiency. Thus, a number of developers and vendors have released web templates specifically for non-technical people to use. Web template reusability is also important for even highly skilled and technically experienced developers—but it is ''especially'' critical to those who rely on simplicity and "ready-made" web solutions.

Such "ready-made" web templates are sometimes free, and easily made by an individual domestically. However, specialized web templates are sometimes sold online. Although there are numerous commercial sites that offer web templates for a licensing fee, there are also free and "open-source" sources as well.

== Example ==

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.

For example, the view template may look like this:

<syntaxhighlight lang="html5html">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

Line 125 ⟶ 56:

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.

* Server-side -– run-time substitution happens on the web server

* 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:

Line 138 ⟶ 69:

The source code of the [[Template engine (web)|template engine]] can be proprietary or [[open source]].

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}}

===Language support===

[[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 a "edge-side" proxy or for static page generation.

[[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===

{{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===

[[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.

{| border="1" cellspacing="0" cellpadding="5" align="center" class="wikitable"

! System label/name

! Platform/editor

! Notes

|-

| [[Macromedia Dreamweaver|Dreamweaver]]

| [[Macromedia Dreamweaver|Macromedia]]

| [[HTML editor|HTML authoring]]. Embedded iterable language.

|-

| [[Macromedia Contribute|Contribute]]

| [[Macromedia Contribute|Macromedia]]

| Client authoring.

|-

|-

| [[Macromedia Flash|Flash]]

| [[Macromedia Flash|Macromedia]]

| Flash authoring.

|-

| [[Microsoft FrontPage|FrontPage]]

| [[Microsoft FrontPage|Microsoft]]

| [[HTML editor|HTML authoring]]. Embedded iterable language.

|-

| [[Nvu]]

| [[Linux]]/Nvu

| [[HTML editor|HTML authoring]].

|-

| Pelican

| An [[Open-source-software movement|open-source community]]

| Supports [[Markdown]] or [[reStructuredText]]. Written in [[Python (programming language)]].

|-

| [[Website Meta Language]]

| Unix-like

|

|}

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]].

Line 187 ⟶ 89:

=== Server-side systems ===

[[File:ServerSideTemplates.gif|thumb|right|Server-side template system]]

People began to use [[Dynamicdynamic 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 [[Macromacro (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'':

Line 206 ⟶ 108:

| [[Python (programming language)|Python]]

| Use the "Django template language".

|-

| EJS (Embedded JavaScript)

| [[JavaScript]]

| Public. [[Web template#Template languages|Embedded complex language]].

|-

| [[FreeMarker]]

Line 212 ⟶ 118:

|-

| [[Facelets]]

| [[JavaJakarta EE]]

| Public. Part of [[JavaServerJakarta Faces]]

|-

| [[Genshi (Templating Language)|Genshi]]

Line 237 ⟶ 143:

| [[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]]

Line 267 ⟶ 173:

| Public.

|-

| [[Topsite Templating System|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=httphttps://sourceforge.net/projects/topsite/|access-date=15 October 2013}}</ref>

|-

| [[Twig (template engine)|Twig]]

| [[PHP]]

|

|-

| [[Standard PHP Library#PHPlib|PHPlib]]

Line 287 ⟶ 193:

| Use the [[WebObjects#Core frameworks|WebObjects Builder]] as engine.

|-

| [[Apache Velocity|Velocity (Jakarta/Apache)]]

| [[Java platform|Java]]

| Public. Use VTL - [httphttps://velocity.apache.org/engine/devel/vtl-reference-guide.html Velocity Template Language].

|-

| [[Vignette (software)|Vignette]]

Line 316 ⟶ 222:

|-

| [[ColdFusion Markup Language]] (CFM)

| Public ([[Lucee]], [[Railo]], [[OpenBD]]). Proprietary ([[Adobe ColdFusion]]).

|-

| [[JavaServerJakarta Server Pages]] (JSP)

| Public, [[JavaJakarta platformEE]].

|-

| [[Perl|Active Perl]]

Line 350 ⟶ 256:

===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:

Line 394 ⟶ 301:

9. [https://www.mgtechnologies.co.in/category/ecommerce-website-templates Free ecommerce website themes] MG Technologies Blogs and Information Portal of Website Themes.

==External links==

* [http://psionides.eu/2009/06/15/javascript-template-libraries/ JavaScript template libraries] comparison from 2009