Site:Frontend:BuildingBlocks
Contents |
Introduction
Building a website is really all about using the tools at your disposal. On this page you will learn what tools are available, how to use them, and explanations on when to use them.
Pages
Pages are the most basic component for building a site. A page is referenced from a URL. If you create a page titled "hello", then you would access it by navigating to http://www.example.com/?page=hello.
A page consists of the HTML necessary to display your page. Pages have the ability to reference the template engine, but this is entirely optional.
Example: Create a "Hello World" page
- Create a new Site by clicking Add > Site and enter a site name.
- Click on the pages tab, click Add Page, and choose a name for your page.
- Enter the following HTML and click save.
<html> <head> <title>This is an example page.</title> </head> <body> HELLO WORLD </body> </html>
Page Includes
Page Includes are useful for sharing common page elements between pages. A perfect example of a page include is a header and footer. Normally these properties are the same across all pages. By referencing a page include you can make changes once and all of your pages will be automatically updated.
Referencing a page include is done through Clearsilver.
Example: Create a Page Include
- From within your site, click on the page include tab, click Add Page Include, enter a page include name, and enter the following contents into the page include.
<div><a href="/?page=home">HOME</a></div> <div><a href="/?page=profiles">PROFILES</a></div> <div><a href="/?page=content">CONTENT</a></div>
- Let's assume we named the page include above "header".
- Now lets reference it within our page.
<html> <head> <title>This is an example page.</title> </head> <body> <!ms:include value="header"!> </body> </html>
Static Resources
Each site allows you to upload files. This is intended to offer a storage location for all of your images, style sheets, javascript, etc. Images can be uploaded into the site uploader or into a module uploader.
The benefit of using the integrated static resource system, is that you don't need to worry about all of the complicated browser cache headers. You also can rely on the built in load balancing for when your website gets lots of traffic and needs to scale up to meet the demand.
The static resource uploader is located by clicking on the FILES link once you are viewing your site from within Metrixstream. (Home -> Sites tab -> Your site -> FILES)
From this page you can edit your existing static resources from within your browser, or you can upload new content by dragging it on the Java Uploader. From within your site, you need to reference the getStaticUrl or getVersionedStaticUrl macro, so that your website can generate the correct URL to your static resource.
Next to each file, there is a SITE CODE to use to reference the file in your site page.
Macros
- getStaticUrl(fileName)
- Generates a URL that serves the static resource file referenced by fileName.
- getVersionedStaticUrl(fileName)
- Generates a URL that serves the static resource file referenced by fileName. This URL breaks any browser cache anytime the Site version number changes.
Example
Let's assume you have a javascript file named main.js. You would reference this in your HTML in the example below.
<html>
<head>
<script type="text/javascript" src="<?cs call:getStaticUrl("main.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
Concatenation
The SiteEngine has built in support to concatenate static resources on the fly. A common example is to concatenate all of your CSS files into one single file, as well all of your javascript files into a single file. This allows greater flexibility, because you can keep your content separated by filename, but you can serve them through a single request, which helps tremendously with website performance. The resulting file is cached, so there is no need to worry about any performance issues.
Macros
- addFileToConcatenatedFile(fileName, catFileName)
- Adds standard static files referenced by fileName to the new concatenated file referenced by catFileName.
- getConcatenatedStaticUrl(catFileName)
- Generates a URL that serves the concatenated file referenced by catFileName.
- getConcatenatedVersionedStaticUrl(catFileName)
- Generates a URL that serves the concatenated file referenced by catFileName. This URL breaks any browser cache anytime the Site version number changes.
Example: Non-Concatenated Method
Html Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?cs call:getVersionedStaticUrl("main.css") ?>" />
<link rel="stylesheet" type="text/css" href="<?cs call:getVersionedStaticUrl("lightbox.css") ?>" />
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("jquery-1.3.2.min.js") ?>"></script>
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("jquery.galleryview-1.1.js") ?>"></script>
<script type="text/javascript" src="<?cs call:getVersionedStaticUrl("main.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
Example: Concatenated Method
Template Code: Top of the Page
<?cs call:addFileToConcatenatedFile("jquery-1.3.2.min.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("jquery.galleryview-1.1.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("main.js", "newMain.js") ?>
<?cs call:addFileToConcatenatedFile("main.css", "newMain.css") ?>
<?cs call:addFileToConcatenatedFile("lightbox.css", "newMain.css") ?>
Html Code: Below Template Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?cs call:getConcatenatedVersionedStaticUrl("newMain.css") ?>" />
<script type="text/javascript" src="<?cs call:getConcatenatedVersionedStaticUrl("newMain.js") ?>"></script>
</head>
<body>
sample page
</body>
</html>
Modules
A module groups together a page include, static resources, and variable constants. Modules really help keep your functionality organized. You also have the ability to export modules into a self contained zip file, which you can then import into another site of yours.
The page include portion of the module allows you to create your module's HTML structure.
The variable constants are extremely powerful, because they allow you to share information between your page include and your static resources. This means that your static resources get interpreted on the fly and outputted with the appropriate variable substitution.
Here is an example of a basic progress bar that can be controlled via javascript. (This example uses jQuery.)
Variable Constants
PROGRESS_BAR_WIDTH = 500 PROGRESS_BAR_HEIGHT = 20
Page Include
<div id="progressbar"> <div class="inner"><div> </div>
JavaScript File
function setProgressBar(percentage) {
$("#progressbar .inner").css("width", Math.floor(<!PROGRESS_BAR_WIDTH!> * percentage * 100) + "px");
}
CSS File
#progressbar {
width: <!PROGRESS_BAR_WIDTH!>px;
height: <!PROGRESS_BAR_HEIGHT!>px;
background-color: white;
}
#progressbar .inner {
background-color: red;
width: 0px;
height: <!PROGRESS_BAR_HEIGHT!>px;
}
Accounts
Accounts are typically used for featured profiles on your website. These normally consist of cast from a movie, directors, producers, etc. Accounts can be considered a global user, because they can appear across multiple sites. Accounts also have the ability to login to a site, so it is possible for your feature profiles to interact with your site members.
Accounts are sometimes referred to as owners. This is due to legacy terminology. They both mean the same thing.
Users
Users belong to your site. Depending on the type of site you have, they can have profiles and resell content just like Accounts do. Sites can be grouped together so they same user account works across multiple sites.
Content
Content belongs to either an account or a user. Content can range from a wide variety of items, such as: videos, photos, blogs, news, products, inventory, events, songs, albums, and objects.
