Simple Site Structure

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
bladecatcher
Forum Commoner
Posts: 67
Joined: Sat Mar 12, 2005 12:50 am

Simple Site Structure

Post by bladecatcher »

G'day All,
Sorry for the slightly OT subject. This is more a request for help with structure than design. I'm stewing over how to structure a site.

I started with a page.php?did=x&pid=y which is nice for creating a consistant *look* through out the site, however that creates a few problems like page counting, etc, etc.

Now after reading through this forum, css has caught my attention. BUT! let's get real, I have limited time and want to concentrate on *content*!

Ideally, content created from a bunch of text files sounds really good.

I'd really appreciate some advice from you guys on how to create a simple format that can be re-formatted easily (css) and allows me to concentrate on the content. Comments on dir structure, languages and use of current software, etc (perhaps xml?). So, I can set about learning my required tools then get on with filling the content.

http://www.test.yardley.com.au will give you an idea of how simple I'm thinking, I want speed and functionallity.

Thanking you in advance,
bladecatcher
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

something to research more: template engines.

Tmeplate engines use a set of files as piece templates to generate pages. phpBB is template driven. So are most forums, and a lot of sites. It's basically a design a "generic" page once, make pages many times over from that design, type concept.

For more details, you can read about the Smarty engine: http://smart.php.net (not that it's the greatest, or worst, or that I recommend it. It's just one that's easily at hand. :))
bladecatcher
Forum Commoner
Posts: 67
Joined: Sat Mar 12, 2005 12:50 am

Smarty.php.net

Post by bladecatcher »

G'day,
Thank you I'm looking now.
For other readers the url above has a typo, it's http://smarty.php.net/

cheers,
bladecatcher
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

:oops: sorry about that... I usually type that right.. ;)
bladecatcher
Forum Commoner
Posts: 67
Joined: Sat Mar 12, 2005 12:50 am

Template Engines

Post by bladecatcher »

hmmm, what's the point of using a template engine?

With php and css a structured site separates "programming" , "presentation" and "content". An template engine just adds another superfluous layer to slow things down.

But they seem to be very popular, am I missing something?

tia
bladecatcher
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

one nice benefit is they often relieve a "designer" from having to write code. Since it can be challenging for them to learn programming. I find them far more object oriented in nature, than doing all that junk directly in the script, plus, given enough usage of them, I can switch output formats to xml, some binary format, or something entirely different with fairly little trouble. Allowing for multi-lingual page layout and interfacing is also a bit easier with template engine style systems of operation.

We've talked about the pros and cons before.. so look up those threads if you want more details of what's where, and decide for yourself.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Templates may be slower - but do you many designers who actually want to edit PHP when changingthe look and style of a website???

CSS is pretty good at relieving you of styling when you wish to concentrate on content - all the content needs is the bare minimum of tags (with a class attribute pointing to a CSS set of properties). I suggest reaing a little on CSS Tableless Layouts - they might save time on mucking with tables - and then you can cut your tags to simple <div>,<p>, and the usual suspects...:)
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

This article is what I used for my current "templating engine".

- Monkey
bladecatcher
Forum Commoner
Posts: 67
Joined: Sat Mar 12, 2005 12:50 am

a compilation of replies to replies

Post by bladecatcher »

G'day Guy's,
Thank you all for your replies.

On the designer writing code; I am the designer and am not afraid of coding in php or perl. However, I'm leaning towards keeping *all* the design in css so the designer won't need to write code. I still want to separate "programming" (perl, php) from "presentation" (css) and "content" (strict html).

Tableless layouts??? sounds good, more info please? ... URL's??? I'll get into google now as well. THX!

I read Brian Lozier's article and pretty much agree. THX!

Thanking you again in anticipation,
bladecatcher
bladecatcher
Forum Commoner
Posts: 67
Joined: Sat Mar 12, 2005 12:50 am

Reaper

Post by bladecatcher »

Reaper,
I *really* like Tableless CSS.

Will you marry me? ROFLMAO, just kidding.

Thank you mate!
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Using floats, padding, cleverly crafted background-images and fixed width columns, you can achieve almost the same effects as table layouts. Here's an example:

Code: Select all

<!DOCTYPE html 
     PUBLIC &quote;-//W3C//DTD XHTML 1.0 Transitional//EN&quote;
     &quote;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quote;>
<html>
<head>
	<title>Localhost</title>
	<meta http-equiv=&quote;Content-Type&quote; content=&quote;text/html; charset=ISO-8859-1&quote; />
	<meta name=&quote;author&quote; content=&quote;Edward Z. Yang&quote; />
	<link rel=&quote;stylesheet&quote; href=&quote;index/style.css&quote; type=&quote;text/css&quote; />
</head>
<body style=&quote;background-image:url(index/img/background.jpg)&quote;>
<div style=&quote;background:url(index/img/logo.jpg) no-repeat;width:100%;border-bottom:1px #107 solid;&quote;>

	<div style=&quote;text-align:right;font-size:8pt;float:right;&quote;>

		The web portal for Edward Z. Yang
	</div>
	
	<a href=&quote;http://localhost/&quote; class=&quote;localhost&quote; style=&quote;padding-left:20px;&quote;>LOCALHOST</a>
	
</div>

<div style=&quote;float:left;width:201px;&quote;>
	
	<div class=&quote;contain&quote;>
	Insert List here	</div><br />

	
	<img src=&quote;index/img/menubar.jpg&quote; style=&quote;width:201px;height:11px;&quote; alt=&quote;Line&quote; /><br /><br />

	<div class=&quote;contain&quote;>
		<img src=&quote;index/img/symantec.gif&quote; style=&quote;border:1px solid #000;&quote; alt=&quote;Symantec Antivirus&quote; /><br />
		March 22, 2005<small> is today</small><br />
		<a href=&quote;http://definitions.symantec.com/defs/20050322-016-i32.exe&quote;>March 22, 2005</a> <small>Antivirus Update</small>	</div><br />

	
	<img src=&quote;index/img/menubar.jpg&quote; style=&quote;width:201px;height:11px;&quote; alt=&quote;Line&quote; />
</div>

<div style=&quote;padding:20px;padding-left:211px;&quote;>
	<b>Wikipedia Recent Changes</b> Will Update In: 54:12 - <a href=&quote;/?f=1&quote;>Force an Update</a>
	<br />


Below are the last <strong>90</strong> changes in the last <strong>3</strong> days.

&#1111;CONTENT]

</div>

</body>
</html>
and the CSS

Code: Select all

UL {padding-left:0px;margin-left:15px;}
LI {list-style-type:square;}
UL UL LI {font-size:8pt;}
TD {vertical-align:top;}
.head {padding-left:10px;margin-top:20px;font-weight:bold;list-style-type:none;font-family:serif;font-size:16pt;font-variant:small-caps;}
.normal {margin:0px;border:0px;padding:0px}
.small {font-size:8pt}
.localhost {font-size:30pt;font-family:serif;font-weight:100;text-decoration:none;color:#FFF}
BODY {font-family:Arial;font-size:10pt;background-color:$e24620;background-attachment:fixed;margin:0px;}
.style2 {color: #003F80;font-weight: bold;font-size: 11px;font-family: Tahoma;}
.contain { padding:4px; }
I've also blatantly ripped off the copyright of the template I heavily modded for my front page (including the images) but hey, it's LOCALHOST! :D Main innovation is the padding on the main content DIV, it emulates a table while not letting the content spill over into the space.
Post Reply