The Art of Scintography: Chapter 10

Chapter 10: Putting Your Site Together

The Art of Scintography
Edition 3.0 © 2008 Aurora Isaac
www.scintography.com

10.1 Checklist Step 8: Design Your Page Templates


Checklist

If you plan to use the same page design for many pages, you will find your site maintenance easier if you use templates. A template allows you to use one source for writing the parts of the page that are common to all your pages.

8a: Stylesheets

There are many ways of implementing templates. With a simple page design, a common stylesheet may be all you need. Use a site stylesheet to unify your site appearance. Use the cascading ability of stylesheets to add more specific style markup to some pages.

8b: Scripts

For a more complex page design, you will probably want to use a script to write some portions of your page. If you are using a development platform, learn the tools available for implementing templates.
For the most part, markup lays out your page from top-to-bottom and from left-to-right. This means the source markup can be divided into three distinct parts.

The markup for this portion of the page comes before the unique page content.
The unique content for each page appears here.
The markup for this portion of the page comes after the unique page content.

If you don't have access to, or don't know how to use server scripts, client scripts can be used. Using the document.write() method in JavaScript to add content to your pages, your basic page might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>

<LINK TYPE="text/css"
HREF="siteStyleSheet.css"
REL=STYLESHEET
>
<SCRIPT TYPE="text/JavaScript"
SRC="siteJSsource.js"
></SCRIPT>

</HEAD>
<BODY>

<SCRIPT TYPE="text/JavaScript">
//logo, banner, navigation
thisPage = "page_ID";
makePrePageTemplate(thisPage);
</SCRIPT>

unique content of this page

<SCRIPT TYPE="text/JavaScript">
//navigation, highlights, notices
makePostPageTemplate(thisPage);
</SCRIPT>

</BODY>
</HTML>

With a server script, you have two template options. You can write one master page, then set a GET or POST parameter in the URL to specify which unique page content to include. Or, you can write the same pre and post page script into each content file. PHP is a commonly used server script. PHP code is written into HTML files, along with other markup. A file with a .php suffix, instead of .htm, is interpreted at the server before it is sent. With php, you can write content and markup that is integrated into the page sent to the client. The following demonstrates how a myPage.php file might look:

<?php

$thisPage = "page_ID";
include "prePageTemplate.inc";

?>

unique content of this page

<?php

include "postPageTemplate.inc";

?>

10.2 Checklist Step 9: Implement your site


Checklist

9a:	Directory structure

Once you have decided what goes in your files, it is time to decide how to arrange them on the server. For a small site, you might put all your files into a single directory.

www.domain.tld/⇒	index.htm
	page1.htm
	page2.htm
	page3.htm
	page4.htm
	siteStyle.css
	siteScript.js
	icon.jpg
	background.gif

As your site becomes more extensive, you will find it useful to create subdirectories to hold sets of files. For example, I like keeping my images in a separate directory. It may help to put each version of your site in a subdirectory. You can work on your next, as yet unpublished version, then link your new version to your home page when you are ready to update your site. There is only one rule for how to organize your files -- it should make your life easier.

www.domain.tld/⇒	index.php
	ver1/⇒	page1.php
		page2.php
		page3.php
		page4.php
		prePage.inc
		postPage.inc
		siteStyle.css
		siteScript.js
		images/⇒	icon.jpg
			background.gif

9b: Directory access

In addition to the files that contain your content and markup, you will encounter other files that are involved in the management and presentation of your site.

www.domain.tld/⇒ index.htm

favicon.ico

robots.txt

.htaccess

images/⇒ index.htm

icon.jpg

background.gif

private/⇒ index.htm

.htaccess

Index.htm
By now you already know that an index file is the default file for a directory. But what happens if you don't have an index file? The web was originally designed on the presumption that all people are honest. Sadly, we face another reality today. If you have a directory with no HTML files, such as an image directory, your viewers can type in a URL that will produce a list of all the files in that directory. If you prefer not to allow this to happen, you can put an index file in the directory that will redirect snoopy viewers to another page. Since my subdirectiries are usually related to the content in the parent directory, I usually redirect viewers to the parent directory.

This is the content of an index.php file, doing a redirect at the server:

<?php $relative_url = '../'; header( "Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/" . $relative_url ); ?>

This is the content of an index.htm file, doing a redirect at the client:

<HTML> <HEAD> <META HTTP-EQUIV="refresh" CONTENT="0; url=../" > </HEAD> <BODY> Put a message and a link here in case the page does not redirect. </BODY> </HTML>

robots.txt
Robots are programs that troll the web. Some robots are used by search engines to get to know what's out there, so when you search a topic they can direct you to an appropriate list of sites. No one controls who uses a robot or what it searches for. A properly formatted robots.txt file, placed in your root directory, is like a visitors-welcome, no-tresspassing, or authorized-personel-only sign placed over the doorway. Anyone can still walk through the door, but those who choose to respect the integrity of your site will check your robots file before they enter. In this file you can indicate which directories the robots should search and which they should avoid. You can also give instructions specifically for one robot. The topic of robots, and how to control them, is still unsettled and controversial. My personal philosophy is to list those directories it would be useless to list in a search result, but not mention those I want to keep private. For private sections of my site, I always require a password.

.htaccess
There are a variety of ways to protect a directory by requiring a login name and password. This process is called authentication. The simplest and most accessible implementation is basic authentication. If you are using an Apache server, you may encounter .htaccess files in your directories. The server uses this file to store information about the directory, including whether its access requires a password. If you are using a Windows server, you will have a similar function with a windows (duh) interface. Basic authentication allows you to protect separate branches of your directory tree with one or more users and passwords. Your web host should have instructions or tools for implementing authentication. Make sure you remember what your passwords are!

favicon.ico
In our neverending quest to stand out from the crowd, one of the newest features that you can add to your site is the favicon. If you hope to be added to someone's favorites or bookmarks, or even added to the desktop, your favicon will be your graphic identity. The .ico file type is a special image type that makes the small icon appearing in front of your title on the address line (of newer browsers). All you need is a favicon.ico file in your root directory. Note this is a literal name, no variations will be recognized. The browser will look for this file and display it appropriately. To make a .ico file, you will need a special tool. Freeware and shareware is available. As usual, search wisely for your "free" tools.

10.3 Checklist Step 10: Install your site


Checklist

Depending on your site design and development tools, your implementation and installation processes may overlap significantly.

10a: Upload your files

If you have not uploaded any files since your test page, go back to your notes and follow your FTP procedure to install your site files.

10b: Check your scripts

If you have any server scripts, make sure they are working properly. You should also check that your page layouts and client scripts are working properly in as many browser platforms as you can.

10c: Check your links

Make sure all your navigational buttons are working properly.

10d: Review file access

If you have implemented any file access features, make sure they are working.

10e: Open your site

If you have implemented your site with your under-construction home page in place, you are now ready to change your temporary index page to your new site index page.

10e: Back up your site

Many of the files on your development computer will be the same as those that end up on your server, but there will be some differences. You will want to keep your graphics source files, in case you want to edit your graphic images. You may have text files that contain research or notes that don't end up on your server. It goes without saying that you should back up these files. When you are done installing your site, you should have three copies: your server copy, your development copy, and a backup of your development copy. You web host should make regular backups of the server, but they won't have all the development files you rely on for updating your site.

Congratulations! You've done it. Take a deep breath and relax. But before you celebrate, take a vacation, or whatever you plan to do next, make sure you have your notes in order and your maintenance plan in place.

10.4 The Site Maintenance Checklist

By now you probably know what you need to do to maintain your site. This checklist includes the key pieces you must not ignore.

Renew your domain registration

Renew your web hosting

Update site content

a:	edit
b:	upload
c:	backup

It is critical that you renew your domain name on schedule. If you don't, someone else could register your name and use it as their own. Hopefully, your web host/registrar will send you timely notices for renewal, but it's your responsibility to make sure this happens.
You will probably find small things that need fixing such as typos and rephrasing in your text. You may have some content, such as a schedule of events, that needs regular updating. For small changes, you may not need a backup every time. For bigger changes, go back to your startup checklist and adapt it to a new design cycle. You did it once, you can do it again!

10.5 Final Thoughts

I hope by the time you have reached this point, you have wrung every useful bit of information from this book and put it to good use. The future evolution of this text will be guided, in part, by feedback from viewers. If you have found something of value in this book, and are inclined to respond, your comments are sincerely welcomed : ) .

10.6 References

¹ nextthing.org: robots.txt Adventure
http://www.nextthing.org/archives/2007/03/12/robotstxt-adventure

² The Web Robots Pages
http://www.robotstxt.org/

³ : About /robots.txt
http://www.robotstxt.org/robotstxt.html

⁴ : Robots Database
http://www.robotstxt.org/db.html

⁵ World Wide Web Consortium
http://www.www.w3.org

⁶ : Implementing automatic redirects on the server side
http://www.w3.org/TR/WCAG20-TECHS/SVR1.html

⁷ : Using meta refresh to create an instant client-side redirect
http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H76.html

⁸ How To Create A Favicon In Photoshop
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

⁹ Free plugins for Photoshop & Illustrator
http://www.telegraphics.com.au/sw/

¹⁰ Apache HTTP Server Project
http://httpd.apache.org

¹¹ : Authentication, Authorization, and Access Control
http://httpd.apache.org/docs/1.3/howto/auth.html

¹² Microsoft Developers Network Library
http://msdn2.microsoft.com/en-us/default.aspx

¹³ : How to Write a Robots.txt File
http://support.microsoft.com/kb/217103

¹⁴ : How to Add a Shortcut Icon to a Web Page
http://msdn2.microsoft.com/en-us/library/ms537656.aspx