Note: Both of the adaptive design navigation styles are visible on this page for demonstration purposes.Open a popup window

Use this link to Display All of the components that make up this VariableHTML page.

MySSI Example

The use of Server Side Include (SSI) is an effective way to maintain the static portions of a website. However, SSI comes with a number of disadvantages. The biggest problem is that the server files are HTML fragments and are therefore very difficult to maintain and test. MySSI is not a server program; it is a server emulator designed to solve the problems with standard SSI.

The normal operation of MySSI is far too simple for an effective demonstration, so we are going to make a few mistakes along the way and then use MySSI to find and fix the problems. We will also use an alternate set of responsive page designs to illustrate more of the program’s features.

Overview

Let's start with a quick look at a diagram of how MySSI works:

The process is designed to manage files in four directories:

• Client: Contains the complete HTML files that you will edit and preview while you are creating and maintaining your website.
• Server: Contains the server emulation files. These files are HTML fragments and you should never have to edit these files.
• Web: Will eventually contain the files that you would normally publish to your website. They are basically the same as the Client files, but do not include the “extract” directives that make the client / server relationship bi-directional.
• Client.arc: Everything you do is auto-archived in this directory. It is far better to make ten unnecessary archives than miss the one that is needed.

Basically, you do all of your HTML editing in the Client directory and run the MySSI update command when you want your work archived or need your changes copied to the other files in your website.

Creating a New Page

The normal way to create a new page is to start with a copy of a similar page, then modify the content. MySSI is no different. Since this page will become part of the MySSI section of the Variable HTML™ website, we start with one of the other pages from that section:

The process starts by reading in the archive.shtm file from the server directory:

Creating server\myvideo.shtm from archive.shtm

Since the new file is being created from “archive”, each included filename is searched for the word archive surrounded by hyphens: "archive-*", "*-archive-*", and "*-archive.". When the included file or files are found, the "from filename" portion of the included filename is change to the new filename and the new included file is created with just the simple paragraph, “Insert content here”.

Included File Server\myvideo-content.inc created

The modified "myvideo.shtm" file is then created in the server directory.

File server\myvideo.shtm created

And the actual page is constructed in the client directory:

build myvideo.htm ; 5 Files Inserted

The new file is then archived, more on this later:

Auto-Archive {Client} => {Client.arc}
New: 5,888 myvideo.htm

Adding the Navigation

We add the navigation line to the table of content which exists in the credits.inc included file.

Since we modified this included file we must also “flag” the extract directive to let MySSI know that this change has to be made to every page of the website.

<!--#extract-virtual="credits.inc"-->

This is done by changing the space between “extract” and “virtual” to a hyphen.

We also add the new navigation line to the MySSI sub-navigation coding, but we are going to make a mistake this time and forget to flag the included file with a hyphen.

Let's take a moment here to examine the red lines in the code above.

• The filename for the myssi_subnav included file uses a baseline instead of a hyphen. The hyphen is the character that flags an included file for extraction and we don’t want this file extracted for every update, so we used the baseline instead.
• We also made a mistake here on purpose and did not change the space after extract to a hyphen. We want to demonstrate the auto-archive feature later in the example.
• We added the link to the subnav, but we will see as we proceed that this link will disappear and how to fix it.
• The extract end comment / directive defines the end of the included file.
• The next included file, myvideo-content, include the filename and a hyphen. The hyphen forces this file to be extracted every time the file is updated. This is desirable because there is a one to one relationship between the file and its content.
• We “flagged” the credits included file in a previous step, note the hyphen after the word extract.

At this point we run the update command which asks MySSI to scan all the files, see what has been changed, and then process whatever is necessary.

The first step in the update was to recognize that the myvideo file was changed and create an automatic archive of those changes:

Auto-Archive {Client} => (Client.arc}
1: +152 myvideo.htm

It then extracts any flagged changes within the myvideo file:

extract myvideo.htm
35 characters => myvideo-content.inc
2447 characters => credits.inc

MySSI always extracts the content file because it has a hyphen in the filename. It also recognized that extract directive of the credits file now contains a hyphen so it extracts that file also, but the subnav file was not "flagged" so it will not be extracted and the changes will be lost. We will recover them later from the archive directory.

The final step is to re-build whatever pages are necessary. Since every page includes the credits file and the credits file is now newer than every page, every page is rebuilt to include the new change.

build 1or2.shtm, 5 Files Inserted
. . .
build tips.shtm, 5 Files Inserted

Update the page title

Change the page title, and then run update.

Enter Command: update
Auto-Archive {Client} => {Client.arc}
59: +49 1or2.htm
. . .
67: +49 MySSI.htm
2: -11 myvideo.htm
57: +49 numbers.htm
. . .
52: +49 twonav.htm

extract myvideo.htm
35 characters => myvideo-content.inc
build myvideo.htm ; 5 Files Inserted

Enter Command:

The previous update modified the credit file. Every page in the website includes this file so every page was rebuilt. The auto-archive phase of this update sees that every file has change and therefore archives every file before the actual update process begins.

Changing the page design styles for this section

We created a special set of styles in our variable HTML video demo to accommodate a 480P video frame, 853 by 480 pixels, which does not fit well in our standard styles. We want to reuse those styles here. The process is relatively simple. All we have to do is change the name of the included styles.inc file to videostyles.inc and run the update command.

We DO NOT want to add a hyphen to the extract directive. When the extract process is re-building the myvideo.shtm file it will replace the portion of the file that starts with <!--#extract virtual="videostyles.inc"--> and ends with <!--#extract end--> with a simple <!--#include virtual videostyles.inc--> directive, thereby changing the name of the desired include file. Since the extract directive is not flagged for update, the included file will not be modified. The build process will then reconstruct the myvideo.htm file with the contents of the new include file.

Fixing our earlier mistake

The new styles dropped the right hand navigation column to make room for the 853 pixel wide video frame. The alternate navigation was made visible at the top of the page and we noticed that the navigation to the new page was missing.

Displaying the 853 pixel wide video frame does not work well with our normal page styles. We will describe the Variable HTML™ process i n more detail as an addendum at the end of this page. For now, here is the chart of break point changes we need to make to accommodate the video frame.

We change the name of the styles.inc file to videostyles.inc, remove the unneeded style links for w5 to w7, define w2 as our new default style, and change the VariableControl.js file to videoVariableControl.js.

<!--#extract virtual="videostyles.inc"-->
    <link media='screen' href='w0.css' type='text/css' title="w0" rel='alternate stylesheet' />
    <link media='screen' href='w1.css' type='text/css' title="w1" rel='alternate stylesheet' />
    <link media='screen' href='w2.css' type='text/css' title="w2" rel='stylesheet' />
    <link media='screen' href='w3.css' type='text/css' title="w3" rel='alternate stylesheet' />
    <link media='screen' href='w4.css' type='text/css' title="w4" rel='alternate stylesheet' />

    <link media="print" href="print.css" type="text/css" rel="stylesheet" />

    <script language="JavaScript" src="videoVariableControl.js" type="text/javascript"></script>
    <script language="JavaScript" src="VariableHTML.js" type="text/javascript"></script>
<!--#extract end -->

The final step is to create the "videoVariableControl.js" file:

    var vsaRoot = "w";
    var vsa = "W";

    var vBr  = [900,1000,1200,1344,0];
    var bwsDefault = 11200;

    var vise = [0,47,140,330,495];

Enter Command:  update

Auto-Archive {Client} => {Client.arc}

 13:       -216  myvideo.htm

 extract myvideo.htm
             Creating new file: Server\videostyles.inc
         867 characters => videostyles.inc
         233 characters => myvideo-content.inc
  build myvideo.htm ; 5 Files Inserted

Enter Command:

Please view our Variable HTML™ video for a full explanation of this technology.

The first thing we have to do is to determine the number of pixels we will need for each of the standard page designs we wish to use for video display.

Here is the chart that we use to determine the percentage of visitors that can view our pages at various pixel widths.

Based on the comparison of the two charts we determine that we only want to use the single column display designs and redefine the variable breakpoints (vBr) for each design change.

Now that all of the crazy math is over, changing the page coding is simple. We start by creating a new included file for video pages. The existing styles.inc file looks like this:

<!--#extract virtual="styles.inc"-->
    <link media='screen' href='w0.css' type='text/css' title="w0" rel='alternate stylesheet' />
    <link media='screen' href='w1.css' type='text/css' title="w1" rel='alternate stylesheet' />
    <link media='screen' href='w2.css' type='text/css' title="w2" rel='alternate stylesheet' />
    <link media='screen' href='w3.css' type='text/css' title="w3" rel='alternate stylesheet' />
    <link media='screen' href='w4.css' type='text/css' title="w4" rel='alternate stylesheet' />
    lt;link media='screen' href='w5.css' type='text/css' title="w5" rel='stylesheet' />
    <link media='screen' href='w6.css' type='text/css' title="w6" rel='alternate stylesheet' />
    <link media='screen' href='w7.css' type='text/css' title="w7" rel='alternate stylesheet' />

    <link media="print" href="print.css" type="text/css" rel="stylesheet" />

    <script language="JavaScript" src="VariableControl.js" type="text/javascript"></script>
    <script language="JavaScript" src="VariableHTML.js" type="text/javascript"></script>
<!--#extract end -->

We need to drop the last 3 CSS styles, change the Variable Control File for the new style to style breakpoints, and determine which style will be our default for anyone who does not have JavaScript enabled on their browser.

Looking at the preceding resolution chart, we see that 92% of our visitors will be able to see the page at 1003 pixels wide without horizontal scrolling while only 66% will be able to view it at 1259 pixels. Since we want the page to display for the maximum (within reason) number of visitors, we choose style W2 at 1000 pixels as our new default page style. The new “videostyles.inc” file will look like this:

<!--#extract virtual="videostyles.inc"-->
    <link media='screen' href='w0.css' type='text/css' title="w0" rel='alternate stylesheet' />
    <link media='screen' href='w1.css' type='text/css' title="w1" rel='alternate stylesheet' />
    <link media='screen' href='w2.css' type='text/css' title="w2" rel='stylesheet' />
    <link media='screen' href='w3.css' type='text/css' title="w3" rel='alternate stylesheet' />
    <link media='screen' href='w4.css' type='text/css' title="w4" rel='alternate stylesheet' />

    <link media="print" href="print.css" type="text/css" rel="stylesheet" />

    <script language="JavaScript" src="videoVariableControl.js" type="text/javascript"></script>
    <script language="JavaScript" src="VariableHTML.js" type="text/javascript"></script>
<!--#extract end -->

The final step is to create the "videoVariableControl.js" file:

    var vsaRoot = "w";
    var vsa = "W";

    var vBr  = [900,1000,1200,1344,0];
    var bwsDefault = 11200;

    var vise = [0,47,140,330,495];

For demonstration purposes we would like to display both of the advertizement blocks and both navigation positions on each page. None of the standard designs support the ability to show all of the design elements at the same time, so we created an alternate set of designs just for our demonstation pages.

This is also a more realistic presentation of the styles for a true adaptive website. It contains separate designs for 1280 by 1024, 1024 by 768, and 800 by 600 monitors as well as a fallback design for even smaller screens, and as explained in our Variable HTML™ examples, we did not have to write any new CSS code, just reuse the existing code in different combinations.

Since these styles were already created for the Variable HTML™ examples, all we had to do was change the extract directive in the client HTML file
from <!--#extract virtual="styles.inc"-->
to <!--#extract virtual="estyles.inc"-->
and then perforce an MySSI update and MySSI did the rest.

Note: We DID NOT add a hyphen to the new estyles directive. When MySSI performs an update command:

1. MySSI searches the HTM file in the client directory for <!--#extract ... filename--> directives and matches them up with their corresponding <!--extract end--> directives.
2. MySSI then replaces this entire block of text with an insert directive in the .SHTM file in the server directory.
3. Only if MySSI detects a hyphen in the extract directive; it will also save the surrounded HTML code in the server diectory as the extracted filename.

If the only thing you do is change the name of the included file, step 2 will change the name of the included file in the server’s SHTM file, step 3 will not change the new included file, and the rebuild that occurs after the extraction will now replace the content of the extracted are with the new included file. Basically, you have change the entire appearance of the webpage by adding a single letter to the included filename and executing the update command.

Discover Our Mistake and Fix It

We did not "flag" the sub-navigation included file in the previous section of this example so we could demonstrate the auto-archive feature of MySSI. The navigation to our new page is missing. Of course it would be easy to just re-add it, but let's assume that the coding was difficult and we have to recover it. The first step is to look in the client.arc directory to see what versions of the file are available:

E:\...\VariableHTML>dir /s *myvideo*.*

 Directory of E:\...\VariableHTML\Client

04/22/2012  06:40 PM   17,086 myvideo.htm

 Directory of E:\...\VariableHTML\Client.arc

04/22/2012  06:37 PM   17,057 myvideo.htm
04/22/2012  07:08 AM   17,331 zzz.myvideo.htm.ver.001.htm
04/22/2012  08:53 AM   17,342 zzz.myvideo.htm.ver.002.htm

 Directory of E:\...\VariableHTML\Server

04/22/2012  06:37 PM   11,603 myvideo-content.inc
04/22/2012  06:37 PM      392 myvideo.shtm

E:\...\VariableHTML>

There are basically 4 versions of the file available at this point.

1. The version in the Client directory which was re-built after the latest update and is missing the sub-navigation link.
2. The un-numbered version in the Client.arc directory which is what the file looked like just before the last update. This file should contain the missing text.
3. The two ver.### files where the .001 file is the oldest version a vailable. The files get newer as the numbers increase.

If we had done an additional update, the current un-numbered version in the client.arc directory would have been renamed as the .003 version and the un-numbered version in the client directory would have been copied to the client.arc directory. In this case, the missing text would have been in the highest numbered version.

Find the missing link, copy it back to the example file, flag the sub-navigation file for extraction, and update the website again.

This time the update command archives the changes made to the example file, and then it extracts the sub-navigation as requested and the content which is always flagged due to the hyphen in the filename. Take note that the build process only re-creates the seven files that use the MySSI sub-navigation file. The build process is designed to figure out what has changed in the server directory and then update only those files in the client directory that are affected by those changes.

Create Alternate Styles

Table of Content

• Home
  • Is this the same as Media Queries?
  • Download
  • Contact
  • About the Author
• Variable HTML™
  • How It Works
  • An Interactive Demo
  • Settings
  • Features
• Designing with Style
  • media="print"
  • Adaptive Design
• MySSI
  • Parent Child
  • Grandparent
  • Archive
  • Commands
  • Example
  • Video
  • Features
• Design Tips
  0. Picture Frame
  1. Nested Tables
  2. Table Demo
  3. One Column or Two
     • Readability
     • Boring Numbers
  4. First Page
  5. Multi design
  6. Variable HTML
  7. display: none;
  8. Add On Pages
  9. ManualSized
• FAQ

BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity