GeeklogWiki - User contributions [en]

GlTheme

2014-09-30T13:19:58Z

Wim: /* Components */

== Introduction ==
[[File:technologies.png|right]]
]A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

[[Image:jquery.png|frame|right|jQuery]]

A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

[[File:frameworks.png|frame|right|uiKit, Responsive, Bootstrap]]

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

GlTheme

2014-09-30T13:17:30Z

Wim: /* Components */

== Introduction ==
[[File:technologies.png|right]]
]A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

[[Image:jquery.png|frame|left|jQuery]][[File:frameworks.png|frame|right|uiKit, Responsive, Bootstrap]]
A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

GlTheme

2014-09-30T13:12:49Z

Wim: /* Components */

== Introduction ==
[[File:technologies.png|right]]
]A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

[[File:jquery.png|left|jQuery]][[File:frameworks.png|right|uiKit, Responsive, Bootstrap]]
A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

File:Jquery.png

2014-09-30T13:08:04Z

Wim:

GlTheme

2014-09-30T13:07:33Z

Wim: /* Components */

== Introduction ==
[[File:technologies.png|right]]
]A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

[[File:frameworks.png|right]]
A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

GlTheme

2014-09-30T13:05:57Z

Wim: /* Introduction */

== Introduction ==
[[File:technologies.png|right]]
]A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

File:Frameworks.png

2014-09-30T13:04:48Z

Wim:

File:Technologies.png

2014-09-30T13:04:10Z

Wim:

GlTheme

2014-09-29T11:38:25Z

Wim: /* Components */

== Introduction ==
A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, classnames, javascript and templates. A layout is referenced in the code.

GlTheme

2014-09-29T11:36:56Z

Wim:

== Introduction ==
A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''library''' is a '''''resource''''' and is declared to resolve dependencies amongst other resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a '''''library''''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give the geek log website a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

GlTheme

2014-09-29T11:34:13Z

Wim: Created page with "== Introduction == A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code ..."

== Introduction ==
A '''theme''' is the look and feel and '''''outline''''' of a geeklog website. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

A '''theme''' uses templates to render content.

A '''theme''' could deliver different content for the admin, the logged-in user and the anonymous user.

A '''theme''' uses css, javascript, icons, images and other media. A '''theme''' renders components commonly known as '''widgets'''.

A '''theme''' could deliver different look-and-feel's for the admin, the logged-in user and the anonymous user.

A '''theme''' can be responsive.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''library''' is a ''''resource'''' and is declared to resolve dependencies amongst resources. In general a library contains javascript. Some libraries are loaded on top (head), other require the bottom residence (footer).

A '''framework''' is a ''''library'''' and is declared to rule the application of css in a dynamic way. In general a framework is based on css and intends to give geek log a responsive character.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

GlPage

2014-09-29T11:11:44Z

Wim: /* Components */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. '''glPage and components''' governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes ([http://wiki.geeklog.net/index.php?title=Wireframes what is a wireframe?]). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access, advanced logic and caching. This should be invisible to the code, or otherwise, if properly used, it features handy shortcuts for extensive coding.

The templet object accepts a parameter as the template text and the object cannot be 'finished' as opposed to the template class. This also means that ''the unknowns'' persist in the parsed text.

The layout class extends the template class to hold the layout-nodes.

The page class is in fact the controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

Clearly shown below that the new rendering style is building a tree from page -> layout -> template.

[[File:glPage_1.png]]

The Template entity can be used outside the tree too. There is no Templet entity since it is just a tool and never persisted or cached.

There is exactly one Page with one or more Layouts. A layout in context of the page is just a string like 'a, b, c', or in this case 'header, body, trailer'. Such layout is positioned on the screen either from left to right, either from top to bottom. The comma-separated string is parsed into a array of further layout objects. The Page is themed or assigned to the default GeekLog theme.

There is a Layout entity for any array element and refers to a Template or contains just text (without a Template). The layout can be skinned by setting a skin. Such skin will cascade over the rest of the tree. The Layout may be dynamically customised to contain other Layouts as is the case with a Page.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components ''outline'' and ''skin''. The term '''''outline''''' is chosen to be different from the term layout and suggests the collection of layouts.

A skin is a skin and a theme consists of one of more skins. The skin is applied to the layout it is set for. In extremum 'header' could be orange skinned, 'body' blue and 'footer' light-green. Additionally the skin of the customised 'body' layout could be customised too: 'left' could be pink, 'center' dark-red and 'right' mint. Skins cascade as css does.

A skin consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

A theme has a default layout which is identical to the GeekLog default layout. Since a layout is a template, the theme might adjust the default templates (or not) for this layout.

Wireframes

2014-09-29T11:04:56Z

Wim:

== Introduction ==

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

== Basic ==

A basic one looks like this:[[File:Wireframe_0.png|thumb|Basic: header, body, footer]]
[[File:wframe_0.png|none]]
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

== Extended ==

First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb|Extended: header, body:(menu, application), footer]]

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|center]]

== Advanced ==

[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, content:(title, support), application), footer]]
Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example below is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|center]]

== GeekLog ==

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

Wireframes

2014-09-29T10:57:31Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:[[File:Wireframe_0.png|thumb|Basic: header, body, footer]]
[[File:wframe_0.png|left]]
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb|Extended: header, body:(menu, application), footer]]

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|center]]

----
[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, content:(title, support), application), footer]]
Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example below is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|center]]

----

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

File:Wireframe 2.png

2014-09-29T10:56:02Z

Wim:

Basic layout: branding, secure, globalNav, secondaryNav, title, support, footer

Extended layout: header:(branding, secure, globalNav), body:(secondaryNav, title, support, application), footer

Advanced layout: header:(branding, secure, globalNav), body:(menu:(secondaryNav), content:(title, support), application), footer

File:Wireframe 1.png

2014-09-29T10:51:59Z

Wim:

Basic layout: header, navigation, application, footer

The Body component being extended as a tree:

Extended layout: header, body:(navigation, application), footer

File:Wireframe 1.png

2014-09-29T10:51:16Z

Wim:

Basic layout: header, menu, application, footer

The Body component being extended as a tree:

Extended layout: header, body:(menu, application), footer

File:Wireframe 1.png

2014-09-29T10:50:56Z

Wim:

Basic layout: header, menu, application, footer
The Body component being extended as a tree:
Extended layout: header, body:(menu, application), footer

Wireframes

2014-09-29T10:47:25Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:[[File:Wireframe_0.png|thumb|Basic: header, body, footer]]
[[File:wframe_0.png|left]]
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb|Extended: header, body:(menu, application), footer]]

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|center]]

----
[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, title, support), footer]]
Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example below is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|center]]

----

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

File:Wireframe 0.png

2014-09-29T10:39:52Z

Wim:

Basic layout: header, body, footer

Wireframes

2014-09-29T10:28:30Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:[[File:Wireframe_0.png|thumb]]
[[File:wframe_0.png|left]]
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb]]

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|center]]

----
[[File:Wireframe_2.png|thumb]]
Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example below is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|center]]

----

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

File:Wframe 4.png

2014-09-24T10:09:52Z

Wim: Wim uploaded a new version of "File:Wframe 4.png"

File:Wframe 3b.png

2014-09-24T10:09:32Z

Wim: Wim uploaded a new version of "File:Wframe 3b.png"

File:Wframe 3a.png

2014-09-24T10:08:28Z

Wim: Wim uploaded a new version of "File:Wframe 3a.png"

File:Wframe 2a.png

2014-09-24T10:07:55Z

Wim: Wim uploaded a new version of "File:Wframe 2a.png"

File:Wframe 2b.png

2014-09-24T10:07:33Z

Wim: Wim uploaded a new version of "File:Wframe 2b.png"

File:Wframe 1.png

2014-09-24T10:06:59Z

Wim: Wim uploaded a new version of "File:Wframe 1.png"

File:Wframe 0.png

2014-09-24T10:06:29Z

Wim: Wim uploaded a new version of "File:Wframe 0.png"

Wireframes

2014-09-23T17:51:08Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:

[[File:wframe_0.png|left]]

Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle.

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|none]]

Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example at the right is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|none]]

----

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

.

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

Wireframes

2014-09-23T17:50:04Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:

[[File:wframe_0.png|left]]

Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle.

Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
[[File:wframe_1.png|none]]

Now add some functionality. As an example the HEADER, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

[[File:wframe_2b.png|left]]
The example at the right is stripped from the major rectangles and shows no dependencies.
[[File:wframe_2a.png|none]]

----

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png|left]]

.

The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png|center]]

Wireframes

2014-09-23T17:19:15Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:

[[File:wframe_0.png|left]]

Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle.

[[File:wframe_1.png|right]]

This is still a simple layout, and note that now the position of the rectangles is inherently defined, though relative to each other.

Now add some functionality and assign their positions:

[[File:wframe_2b.png|right]]
[[File:wframe_2a.png]]

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png]]

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png]]

Wireframes

2014-09-23T17:18:20Z

Wim:

''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach. See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]

A basic one looks like this:

[[File:wframe_0.png|left]]

Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.

First thing is to drill down the BODY rectangle.

[[File:wframe_1.png|left]]

This is still a simple layout, and note that now the position of the rectangles is inherently defined, though relative to each other.

Now add some functionality and assign their positions:

[[File:wframe_2b.png|right]]
[[File:wframe_2a.png]]

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.

Window size is something to think about too.

[[File:wframe_3b.png|right]]
[[File:wframe_3a.png]]

All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.

Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.

[[File:wframe_4.png]]

File:Wframe 1.png

2014-09-23T17:16:13Z

Wim: Wim uploaded a new version of "File:Wframe 1.png"

File:Wframe 0.png

2014-09-23T17:15:28Z

Wim: Wim uploaded a new version of "File:Wframe 0.png"

Wireframes

2014-09-23T14:57:12Z

Wim:

File:Wframe 4.png

2014-09-23T14:53:00Z

Wim:

File:Wframe 3b.png

2014-09-23T14:52:36Z

Wim:

File:Wframe 3a.png

2014-09-23T14:52:16Z

Wim:

File:Wframe 2b.png

2014-09-23T14:51:50Z

Wim:

File:Wframe 2a.png

2014-09-23T14:51:23Z

Wim:

File:Wframe 1.png

2014-09-23T14:50:58Z

Wim:

File:Wframe 0.png

2014-09-23T14:50:16Z

Wim:

File:GlPage 0.png

2014-09-09T15:17:24Z

Wim: Wim uploaded a new version of "File:GlPage 0.png"

GlPage

2014-09-09T15:12:25Z

Wim: /* Theme & Skins */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. '''glPage and components''' governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access, advanced logic and caching. This should be invisible to the code, or otherwise, if properly used, it features handy shortcuts for extensive coding.

The templet object accepts a parameter as the template text and the object cannot be 'finished' as opposed to the template class. This also means that ''the unknowns'' persist in the parsed text.

The layout class extends the template class to hold the layout-nodes.

The page class is in fact the controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

Clearly shown below that the new rendering style is building a tree from page -> layout -> template.

[[File:glPage_1.png]]

The Template entity can be used outside the tree too. There is no Templet entity since it is just a tool and never persisted or cached.

There is exactly one Page with one or more Layouts. A layout in context of the page is just a string like 'a, b, c', or in this case 'header, body, trailer'. Such layout is positioned on the screen either from left to right, either from top to bottom. The comma-separated string is parsed into a array of further layout objects. The Page is themed or assigned to the default GeekLog theme.

There is a Layout entity for any array element and refers to a Template or contains just text (without a Template). The layout can be skinned by setting a skin. Such skin will cascade over the rest of the tree. The Layout may be dynamically customised to contain other Layouts as is the case with a Page.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components ''outline'' and ''skin''. The term '''''outline''''' is chosen to be different from the term layout and suggests the collection of layouts.

A skin is a skin and a theme consists of one of more skins. The skin is applied to the layout it is set for. In extremum 'header' could be orange skinned, 'body' blue and 'footer' light-green. Additionally the skin of the customised 'body' layout could be customised too: 'left' could be pink, 'center' dark-red and 'right' mint. Skins cascade as css does.

A skin consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

A theme has a default layout which is identical to the GeekLog default layout. Since a layout is a template, the theme might adjust the default templates (or not) for this layout.

GlPage

2014-09-09T15:05:56Z

Wim: /* Introduction */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. '''glPage and components''' governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access, advanced logic and caching. This should be invisible to the code, or otherwise, if properly used, it features handy shortcuts for extensive coding.

The templet object accepts a parameter as the template text and the object cannot be 'finished' as opposed to the template class. This also means that ''the unknowns'' persist in the parsed text.

The layout class extends the template class to hold the layout-nodes.

The page class is in fact the controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

Clearly shown below that the new rendering style is building a tree from page -> layout -> template.

[[File:glPage_1.png]]

The Template entity can be used outside the tree too. There is no Templet entity since it is just a tool and never persisted or cached.

There is exactly one Page with one or more Layouts. A layout in context of the page is just a string like 'a, b, c', or in this case 'header, body, trailer'. Such layout is positioned on the screen either from left to right, either from top to bottom. The comma-separated string is parsed into a array of further layout objects. The Page is themed or assigned to the default GeekLog theme.

There is a Layout entity for any array element and refers to a Template or contains just text (without a Template). The layout can be skinned by setting a skin. Such skin will cascade over the rest of the tree. The Layout may be dynamically customised to contain other Layouts as is the case with a Page.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components outline and skin. The term outline is chosen to be different from the term layout.

A theme consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

GlPage

2014-09-09T15:04:03Z

Wim: /* Entity Diagram */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. glPage and components governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access, advanced logic and caching. This should be invisible to the code, or otherwise, if properly used, it features handy shortcuts for extensive coding.

The templet object accepts a parameter as the template text and the object cannot be 'finished' as opposed to the template class. This also means that ''the unknowns'' persist in the parsed text.

The layout class extends the template class to hold the layout-nodes.

The page class is in fact the controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

Clearly shown below that the new rendering style is building a tree from page -> layout -> template.

[[File:glPage_1.png]]

The Template entity can be used outside the tree too. There is no Templet entity since it is just a tool and never persisted or cached.

There is exactly one Page with one or more Layouts. A layout in context of the page is just a string like 'a, b, c', or in this case 'header, body, trailer'. Such layout is positioned on the screen either from left to right, either from top to bottom. The comma-separated string is parsed into a array of further layout objects. The Page is themed or assigned to the default GeekLog theme.

There is a Layout entity for any array element and refers to a Template or contains just text (without a Template). The layout can be skinned by setting a skin. Such skin will cascade over the rest of the tree. The Layout may be dynamically customised to contain other Layouts as is the case with a Page.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components outline and skin. The term outline is chosen to be different from the term layout.

A theme consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

File:GlPage 1.png

2014-09-09T14:49:33Z

Wim: Wim uploaded a new version of "File:GlPage 1.png"

GlPage

2014-09-09T14:48:20Z

Wim: /* Class Hierarchy */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. glPage and components governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access, advanced logic and caching. This should be invisible to the code, or otherwise, if properly used, it features handy shortcuts for extensive coding.

The templet object accepts a parameter as the template text and the object cannot be 'finished' as opposed to the template class. This also means that ''the unknowns'' persist in the parsed text.

The layout class extends the template class to hold the layout-nodes.

The page class is in fact the controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

[[File:glPage_1.png]]

Clearly shown that the new style is building a tree from page -> layout -> template.

The template entity can be used outside the tree too. There is not Templet entity since it is just a tool.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components outline and skin. The term outline is chosen to be different from the term layout.

A theme consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

GlPage

2014-09-09T14:41:45Z

Wim: /* Introduction */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. glPage and components governs only the body-node, but might access geekLog Core to construct the head-node and title-tag (named the ''pageEnvelope'').

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access and caching. The templet accepts a parameter as the template text and therefor cannot be 'finished'.
The layout class extends template to hold the layout-nodes. The page class is in fact a controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

[[File:glPage_1.png]]

Clearly shown that the new style is building a tree from page -> layout -> template.

The template entity can be used outside the tree too. There is not Templet entity since it is just a tool.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components outline and skin. The term outline is chosen to be different from the term layout.

A theme consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.

GlPage

2014-09-09T14:39:57Z

Wim: /* Introduction */

== Introduction ==

In current GeekLog, several functions are available to render a glPage that includes a proper header, footer and configured blocks. These are php functions and they return the html. Depending on the complexity of a plugin the programmer has to display the generated html in a proper sequence. Recently a summary function became available that can create the complete glPage in one go (createHtmlDocument). This php function also returns the generated html and the plugin is in charge for setting up its parameters in a php array.

What happens all the time in the code is handing over small to big pieces of (html)text to distinguished functions, either core functions, either customised functions. The idea is that this text be better encapsulated in a object and handed over just the reference to the object.

The new glPage class is responsible for constructing the resulting page and does so by collecting all common geeklog page objects in the proper sequence. This can be done using a template, as is currently done. This can be done by a pageLayout concept, grouping templates and/or eliminating layout parameters in templates.

For a visual overview of what glPage is and does, a class hierarchy is diagrammed below.

Whereafter a entity diagram is shown when entities are preferred over objects.

Finally the theme is visual depicted suggesting it is a package. Somehow it actually is, because it consists of resources and layouts (renamed to ''outline'').

Geeklog, as a portal or CMS or blog or else, delivers in general a complete web page on a (http) request. This response consists of http-headers (amongst them cookies) and a html document. The structure of the html document is identified by a doctype as the first line. What follows is the document which is generally structured with a html-tag, head-node, title-tag and body-node. glPage and components governs only the body-node, but might access geekLog Core to construct the head-node and title-tag.

== Components ==

A '''template''' is a general purpose macro text body that reflects the blueprint for a page or page component. Templates are used for layouts (and refererence by design the (wire)frames). And complex themes may embed their skins in them too. It consist of content (text) with replaceable parameters (variables), they get parsed and may be recursive, either in itself, either by code.

A '''templet''' is the workhorse of the template. As opposed to a template that accepts a tRoot (template root directory) and loads the macro text from files, the templet accepts a inline parameter as macros text. Obviously templets process short macro's, also called snippets. A templet is not cache-able.

A '''resource''' is anything that is needed to render a page in the local client (the browser). Resources of a page may vary depending on characteristics of the connection, on the (type of) browser and even on the device that runs the local browser: think of a page that is loaded by a browser script; since we think of pages as a central concept, the script that loads the page is a resource of the very page.
Current resources are limited to style sheets (css) and javascript (js). Resources can show mutual dependency; style sheets cascade and javascripts might depend on a library.

A '''skin''' is a look and feel concept that can be applied to pages or their components. It contains a set of browser instructions. Therefor it bundles css, icons, a color-scheme. It should never be the case that the usage of a specific skin requires code changes other than invoking them.

A '''layout''' is the frame in which the content is assembled and displayed. A layout can be designed using wireframes (what is a wireframe). It contains css, div-id's, javascript and templates. A layout is referenced in the code.

A '''theme''' is the look and feel and '''''outline''''' of a geeklog website, the sum of layouts and skins. It should never be the case that the usage of a specific theme requires code changes. A theme is configurable (as is language too).

== Class Hierarchy ==

[[File:glPage_0.png]]

The template class is split into a templet class, doing all the parsing, and a template class doing file access and caching. The templet accepts a parameter as the template text and therefor cannot be 'finished'.
The layout class extends template to hold the layout-nodes. The page class is in fact a controller and contains static variables, so it cannot instantiate.

== Entity Diagram ==

[[File:glPage_1.png]]

Clearly shown that the new style is building a tree from page -> layout -> template.

The template entity can be used outside the tree too. There is not Templet entity since it is just a tool.

== Theme & Skins ==

[[File:glPage_2.png]]

The theme is depicted as a package that contains the components outline and skin. The term outline is chosen to be different from the term layout.

A theme consists of resources (not shown) like stylesheets, scripts, images (like icons, backgrounds or overlays) and the like.