Simple Website Templating Question - AJAX or SSI or...?

Melbosa · June 19, 2009, 11:33:21 AM

Hey guys,

I'm updating my skills with some website designs, and I'm still a little fuzzy on what is the best way to work with a templating concept. Wondering if you could give me your input?

Scenario:

Using HTML and CSS I have a website layout design as follows:

Header

Navigation

Content

Footer

HTML

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example</title>
    <link type="text/css" rel="stylesheet" href="./layout.css" />
    <link type="text/css" rel="stylesheet" href="./backgrounds.css" />
    <link type="text/css" rel="stylesheet" href="./styles.css" />
</head>
<body>
    <div id="Webpage">
        <div id="HeaderSection">
        <!-- HEADER SECTION -->
            Header<br />
            
        <!-- HEADER SECTION END -->
        </div>
        <div id="NavigationSection">
        <!-- NAVIGATION SECTION -->
            Navigation
        <!-- NAVIGATION SECTION END -->
        </div>
        <div id="ContentSection">
        <!-- CONTENT SECTION -->
            Content
        <!-- CONTENT SECTION END -->
        </div>
        <div id="FooterSection">
        <!-- FOOTER SECTION -->
            Footer
        <!-- FOOTER SECTION END -->
        </div>
    </div>
</body>
</html>

CSS

Code Select

body
{
    width: 100%;
    margin: 0 0 0 0;
}

#Webpage
{
    width: 790px;
    margin-left: auto; margin-right: auto;
}

#HeaderSection
{
    width: 100%;
    height: 100px;
    margin: 0 0 0 0;
    top: 0px;
    
}

#NavigationSection
{
    float: left;
    width: 200px;
    height: auto;
    margin: 0 0 0 0;
}

#ContentSection
{
    float: right;
    width: 580px;
    height: auto;
    margin: 0 0 0 0;
}

#FooterSection
{
    clear: both;
    width: 100%;
    height: 100px;
    margin: 0 0 0 0;
}

What I want to do is some type of insertion another HTML file in each section. I have examples of AJAX code for this, and I also understand shtml configuration with apache, but just wondering what you guys think or if there is other ideas I don't know about.

NOTE: I do NOT want to use anything other than HTML/CSS if at all possible. I'm try to see if I can avoid IFRAME tags or JavaScript (even though the AJAX solution I found was that). And would prefer not to go PHP or anything else. I want this to be as portable as possible, and not rely on server installation specific requirements.

So what do you think?

Tom · June 19, 2009, 04:56:35 PM

Using just AJAX would make the page load funny, but it would work.

SSI would feel more natural. And load faster for that matter.

edit:

Quote(even though the AJAX solution I found was that)

AJAX is JavaScript.

Melbosa · June 19, 2009, 05:39:43 PM

Quote from: Tom on June 19, 2009, 04:56:35 PM
edit:

Quote(even though the AJAX solution I found was that)
AJAX is JavaScript.

Yes I know... was just making sure no one corrected me on it... yet you still found a way to do so

>-(

Tom · June 19, 2009, 05:41:01 PM

Quote from: Melbosa on June 19, 2009, 05:39:43 PM
Quote from: Tom on June 19, 2009, 04:56:35 PM
edit:

Quote(even though the AJAX solution I found was that)
AJAX is JavaScript.

Yes I know... was just making sure no one corrected me on it... yet you still found a way to do so >-(

Sorry, it just sounded a little confusing..

Melbosa · June 19, 2009, 05:43:30 PM

So, there really isn't anything new I'm missing then? Either AJAX or SSI is my only choices eh?

Tom · June 19, 2009, 05:53:38 PM

Quote from: Melbosa on June 19, 2009, 05:43:30 PM
So, there really isn't anything new I'm missing then? Either AJAX or SSI is my only choices eh?

Pretty much.

Thorin · June 20, 2009, 10:58:18 AM

My question: How is it decided what HTML file to load in each section? This requires a decision and decisions cannot be made in HTML. Thus, you will need some programming language to make that decision. Whether it's JavaScript (well, really, ECMAScript) on the client, PHP or ASP or JSP or C# or Python or something on the server, or some custom CGI script written in C++, that decision still has to be made.

Notice that I didn't mention anything about SSI (Server Side Includes) because it's not normally used for decisions. You could use it for decisions, but it'll look funny.

-----

Reading back through my post, I realize that I'm assuming that you want the content section of the page to change, whereas you might just be asking how to have static header/footer/navigation sections without loading different content in the content section... In which case, SSI would totally fit the bill.

Or you could go old-school and have a frameset (note, not IFrame!). But many usability experts don't like framesets anymore, mostly because people overused and misused them.

Melbosa · June 20, 2009, 03:33:22 PM

Quote from: Thorin on June 20, 2009, 10:58:18 AM
Reading back through my post, I realize that I'm assuming that you want the content section of the page to change, whereas you might just be asking how to have static header/footer/navigation sections without loading different content in the content section... In which case, SSI would totally fit the bill.

Bingo!

Yeah it isn't for a decision process. It is for a templating setup as I stated originally. I just want it so I only need one Nav/Head/Foot page and multiple content pages. Easier to support, and for the client to take over (as I have some that want that).

As a developer that doesn't do much daily development anymore, I was posting here to see if there was anything out there that I didn't already know about. I know I could do this with PHP/.NET but was looking for a more practical - client friendly (which by client I mean, my clients for my business) and client supportable template solution that wouldn't marry them to a server specific installation.

But this is all good information, and I value every developer here expertise in this matter. So any other suggestions are welcome as well.

As for Frames... well I gave up on them a long time ago, when the WAP Enabled phone devices didn't want to support them. Never looked back - and only recently changed from Table Layouts to Div/CSS Layouts on my web development - and while I was learning that way of layout developemnt I was looking for this template solution as well.

Lazybones · June 20, 2009, 06:06:11 PM

Once you get past small basic static sites you might want to start learning wordpress or drupal. Much like forum software has become common these content management systems have as well. Once the templates and layouts are don't the client has a nice web portal to upload content too.

On the down side they have to be patched like forums do to prevent abuse.

On the plus side they run on most ISP hosting packages.

Darren Dirt · June 21, 2009, 12:03:46 PM

Quote from: Melbosa on June 20, 2009, 03:33:22 PM
As a developer that doesn't do much daily development anymore

Sorry for your loss, my friend.

PS: Tom, are you thinking of publishing an eBook or something along the lines of "How To Compose Brief Posts On Internet Forums"? Cuz you're way good at it.

Tom · June 21, 2009, 03:43:14 PM

Quote from: Darren Dirt on June 21, 2009, 12:03:46 PM
Quote from: Melbosa on June 20, 2009, 03:33:22 PM
As a developer that doesn't do much daily development anymore
Sorry for your loss, my friend.

PS: Tom, are you thinking of publishing an eBook or something along the lines of "How To Compose Brief Posts On Internet Forums"? Cuz you're way good at it.

lol. when it takes way too much concentration and effort to write much of anything, and without worrying like you look like a fool while doing so (phobias ftl), you learn to write as briefly as possible.

Melbosa · June 22, 2009, 08:37:45 AM

Quote from: Lazybones on June 20, 2009, 06:06:11 PM
Once you get past small basic static sites you might want to start learning wordpress or drupal. Much like forum software has become common these content management systems have as well. Once the templates and layouts are don't the client has a nice web portal to upload content too.

We have wordpress at work. While the package is nice, the upgrade process is not. I don't have direct experience with Drupal, though, so could check out that.

Most of my client though are just focused at the simple statics. Most never change anything for months after the initial launch... despite my pestering.

Mr. Analog · July 06, 2009, 09:23:34 PM

If you want to put together something quick, fun and with a low front end and web service connectivity you need to check out the following:

-Dojo
-DWR

Grab yourself the latest version of Eclipse and start hacking.

If you find that fun, take a look into JQuery.