Embed Size (px)
DESCRIPTION
INTEGRATION GUIDELINE FOR FELDHAUS KLINKER WEB MODULES
Citation preview
INTEGRATION GUIDELINE FOR
FELDHAUS KLINKER WEB MODULES
INTRODUCTION This document contains technical guidelines for integration of the following Feldhaus Klinker web modules
developed by Cadesign form as:
CUSTOMIZER PRODUCT VIEWER
Both modules integrate by injecting content into an existing HTML page by the means of loading external
JavaScript files that in return retrieve data from a central data source (server).
This method of integration yields these immediate advantages:
Very easy and lightweight integration with just a few lines of HTML code
Webserver/Language independent integration using standard client‐side JavaScript
Fully automated updates; nothing to deploy locally when things are changed
CUSTOMIZER The customizer module is designed to use the maximum available space in a given context. The minimum
useable area is approximately 900 x 700 pixels (will fit on a de facto standard tablet screen size in landscape
mode).
Example of embedded customizer module in a fixed sized container. Background texture is part of the body
styling, the white outline is part of the container styling.
Embedding the module on a page is a matter of adding just a few HTML elements:
1) Designate an area in the page for the module to load into
2) Add a single HTML‐element for the module
3) Add an HTML script block and define relevant parameters (e.g. language settings)
4) Add a few lines of HTML code to initiate the loading procedure of style sheet files and JavaScripts
In the following, each of the above steps will be detailed.
Step 1: Prepare the module containing area on your page
Add to your page a container element to hold the module, e.g. a <div>‐element, and style it according to
your preferences and website layout. The container element can either be of fixed size (e.g. 1100 x 800
pixels) or flexible/dynamic (e.g. to fill up a percentage of – or the full – browser window).
The illustrations below outline the two common scenarios:
A fixed size container. The customizer element will adapt to the fixed container size.
A fluid container, for example having corner anchor points fixed according to the browser dimensions.
The customizer element will adapt to the dynamic container size. In the most bare‐bone page you can use
the <body>‐element as the container and have the customizer module fill up the entire browser window.
LOGO<div class=”fixed-size-container”>
<div class=”customizer”>Example CSSwidth: 900px;height: 700px;
LOGO<div class=”fluid-container”>
Example CSStop: 100px;bottom: 0px;left: 0px;right: 300px;
<div class=”customizer”>
Step 2: Add the customizer module
Inside you HTML container element you must now place a single additional element like this:
<div class="customizer"></div>
This element will be automatically sized to 100 % in both dimensions (height and width), and thus will fill up
your container element entirely.
Step 3: Define customizer settings
Add to your page, preferably in the page <head>‐section, a script element like this:
<script type="text/javascript"> var customizerSettings = {
language: "de" } </script>
The available language value codes are (as of writing):
de = German
en = English
fr = French
Step 4: Add external resource links
Finally, add these lines of code to your page header:
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css" />
<script src="http://feldhaus.customizer.cadesignform.dk/assets/customizer.js" type="text/javascript"></script>
Assuming you have added both code blocks from step 3 and 4 to your page header, you should now have a
complete HTML page looking similar to this (example with a fixed size container), excluding your own page
elements:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Page Title</title>
...
<script type='text/javascript'> var customizerSettings = { language: 'de' }
</script>
<link rel='stylesheet' type='text/css' href='http://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css' />
<script src='http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js'></script>
<script src='http://feldhaus.customizer.cadesignform.dk/assets/customizer- min.js'></script>
</head>
<body>
...
<div class="container" style="width: 900px; height: 700px;">
<div class='customizer'></div>
</div>
...
</body>
</html>
PRODUCT VIEWER The Feldhaus Klinker Product Viewer module will embed in an arbitrary size, but the main content of the
module will have a fixed width of 1000 pixels while the content height will vary. Thus, when embedding the
module, your design should accommodate for the dynamic content dimensions of the module and allow for
the minimum width required by the module content.
The green outline in the screenshot above only serves to illustrate the boundaries of the embedded module.
The module embedding process is similar to that of the customizer module described previously, i.e.:
1) Designate an area in the page for the module to load into
2) Add a single HTML‐element for the module itself
3) Add an HTML script block and define relevant parameters (e.g. language settings)
4) Add a few lines of HTML code to initiate the loading procedure of style sheet files and JavaScripts
In the following, each of the above steps will be detailed.
Step 1: Prepare the module containing area on your page
First, add a container element to hold the module, e.g. a <div>‐element, and style it according to your
preferences and website layout. Make sure it is at least 1000 pixels wide to hold the content, and allow it to
expand vertically to accommodate for varying content height. I.e. do not apply a fixed height to the
container.
The following illustration below outline the page wireframe:
A fixed‐width container holding the Product Viewer content.
For the container element you can use the default class name “productviewer‐container” or use your own.
Using the default class will apply a suitable background image to fill the container. If you choose to use your
own class, the only requirement is, that the element has a properly defined CSS position attribute like this:
.myOwnContainer { position: relative; ... }
FELDHAUS PRODUCTS
<div class=”productviewer-container”>
Variableheight <div class=”productviewer”>
Example CSSwidth: 1002px;
Step 2: Add markup for the module
Inside you HTML container element place a single, properly classed element like this:
<div class="productviewer"></div>
This element will automatically center inside the container width and will expand/contract vertically when
the content of the module changes during user interaction.
Step 3: Define module settings
Add to your page, preferably in the page <head>‐section, a script element like this:
<script type="text/javascript"> var customizerSettings = {
language: "de" } </script>
The available language value codes are (as of writing):
de = German
en = English
fr = French
Step 4: Add external resource links
Finally, add these lines of code to your page header:
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://feldhaus.customizer.cadesignform.dk/assets/productviewer.css" />
<script src="http://feldhaus.customizer.cadesignform.dk/assets/productviewer.js" type="text/javascript"></script>
Assuming you have added both code blocks from step 3 and 4 to your page header, you should now have a
complete HTML page looking similar to this (example with a fixed size container), excluding your own page
elements:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feldhaus Product Viewer</title>
...
<script type='text/javascript'> var customizerSettings = { language: 'de' }
</script>
<script src='http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js'></script>
<link rel='stylesheet' type='text/css' href='http://feldhaus.customizer.cadesignform.dk/assets/productviewer.css' />
<script type='text/javascript' src='http://feldhaus.customizer.cadesignform.dk/assets/productviewer.js'
></script>
</head>
<body>
<p>some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p>
...
<div class="productviewer-container" style="width:100%;">
<div class='productviewer'></div>
</div>
</body>
</html>
