www.theblisspages.com - website design
www.theblisspages.com - website designLinks on this page: : aim : web site design : hosting and domain names : structure : advertising : style : code : PHP & MySQL : JavaScript : Java : testing : site maintenance : data protection and privacy : books : programs
I've learnt a lot in designing this, my first web site, and I wanted to give a few modest guidelines in the hope it might save you some headaches when you're creating your own slice of immortality!
I've highlighted the design decisions I've made and the reasons why I made them, but I am open to suggestions and feedback!
The first thing to do is work out what you're trying to achieve and who you're trying to reach.
There's no point in going for cutting edge technology if the site is aimed at gardeners or heraldry, where there will be a wide diversity of hardware and expertise, but if your site is aimed at computer gamers or graphics card enthusiasts, you can assume that most will have ninja hardware, Windows XP and will be willing and able to download drivers, patches, etc..
Once you've decided who you want to reach, think about the platforms you plan to support. Commercial sites have to ensure they support the maximum number of configurations, but unless you're selling something, you can decide what you offer.
Do you want to aim at Apple Macintosh users? Do you care about users with old browsers (Netscape 4 or Internet Explorer 3). These decisions will affect the amount of time you will take to write and test your site and the technologies you can use (Java, Javascript).
I've tried to make this site accessible to disabled users, so have looked at accessibility - for example all images have alt tags so text will be displayed if graphics are turned off or an audio browser is used. Nearly all the users of this site use IE 6 or IE 7 or Firefox 2 or 3 on resolutions from 1024*768 to 1280*1024, so I don't routinely test on Opera or Safari. I've even tried it on a Sony-Ericsson K880i phone.
Some websites vary so much from page to page that sometimes you can think you've changed to another site. The most important thing to aim at is a consistent and legible look, and one that is appropriate for the target audience.
I've aimed at a very simple style, using style sheets. This means users can change the look of my web site if they wish, and I can make a change in one place which will immediately change the entire site. I can change my picture or section headings to reflect seasons and holidays. For example, I put up a picture of me in a silly hat for Christmas, and pictures of pumpkins on main headings for Halloween.
A year or so ago, I had my fingers burned when the company I used for hosting my web pages experienced serious difficulties after being hacked.
I
have now moved to www.LunarPages.com.
They're based in the USA, but with fast servers, PHP and mySQL support, free UK phone support and up to 5000Mb
of web space for $6.95 monthly, I think they are superb value. Their helpdesk has been excellent, with replies to support calls being received within five minutes. Several friends have already
moved to Lunar Pages and have been pleased with the service they've received. One added bonus was in getting rid of much of my spam mail. See my article on spam for more details.
I have now also decided that I'd rather control my own domain name, and it is very simple. I set up
an account with www.123-reg.co.uk
and bought www.theblisspages.co.uk. It only cost six pounds for two years. It has been set to redirect
to theblisspages.com,
as I've found that people often automatically type co.uk instead of com. I highly recommend keeping
control of your own domain name(s) in case you ever need to move your site.
I finally decided to put some advertising on the site, to try to defray some of my costs, as I spend about 15-20 hours a week maintaining it. I decided to use Google as they are a market leader.
Click on the link to see how you can benefit, but I suggest you try to get your site reasonably popular first. A website with no hits will generate no revenue!
No, I'm not talking about links, pages et al here, but the folder structure. You don't want to change this when you've constructed tens of pages with hundreds of links, images etc..
I suggest you create folders for images, Javascript scripts, style sheets, with perhaps extra levels if you're planning on hundreds of pictures etc.. By creating these before you write any pages, you won't have to keep going though your HTML files to change paths.
Cascading style sheets
(CSS) are the best way to get your site looking good and behaving consistently. This is one area where
I've learnt a lot which I wish I'd known earlier! I'm not going to cover areas where help is available
- look at information about cascading style sheets at www.w3.org/TR/REC-CSS1
and www.w3.org/TR/REC-CSS2. I just
want to cover the bits I didn't realise before and any pitfalls I've found.
I made the decision to support two style sheets, one for screen resolutions of 800*600 and below, and one for most users with at least 1024*768 screens. I also resolved to make the site accessible to users with disabilities.
I started with the normal style sheet, which I called mike.css. I created an entry for body. This is at the top of the hierarchy so controls all the other styles. This is obviously a good place to set your default font etc..
body, p, table, h1, h2, h3, h4, h5, h6 { font-family: Verdana, Arial, Helvetica, sans-serif}
h1, h2, h3, h4, h5, h6 { clear: left ; float: none; color: #FFFFFF; }
h2, h3, h4, h5, h6 {font-weight: normal; width:400px}p, body,table {font-size:x-small;text-align: left; vertical-align: text-top; white-space: normal}
p { margin-top: 4px ;margin-bottom: 8px}
I created an entry for all headings from H1 to H6, so you can set up common features (like the white text on blue on my site), then separate entries for each, for any differentiating features such as font size. Try to avoid duplication. I recently set a foreground colour for the body and paragraph styles, which is legal, but caused problems with Internet Explorer 6.
I decided to code to HTML standards 4.01, but incorporating as many features of XHTML as possible. Therefore I use <em>lower-case tags and I always close them</em>. I avoid depreciated features such as physical tags like <font> and <bold>, instead using styles and logical <strong></strong> tags. Do look at source code to see examples of good and bad practice.
The HTML 4.01 specification is available at www.w3.org/TR/html4.
For getting started, have a look at www.HTMLGoodies.com for some useful information. You may also find it useful to go to www.cnet.com and choose Web Building. www.webmonkey.com has some very useful tutorials.
I use PHP and MySQL. I have started to use PHP to add new features and make the site more maintainable. I renamed all my pages to end in .php rather than .htm so I could use PHP code throughout my site.
PHP
is a widely-used general-purpose scripting language that is especially suited for Web development and
can be embedded into HTML.
It runs on the web server and writes the html code that is passed to the browser, which thus never sees the php code.
For example, on my main page, PHP code puts in the time since pages were updated in days or weeks.
I reproduce below the code on my wants page that puts in the date:
<p>Last updated on <?php echo Date("l jS F Y",filemtime("wants.php"))?> </p>
I wanted to be able to put tables of information on my web site so I could let
users search on it, so I decided to use a database.
The database I use is called MySQL. SQL stands for Structured Query Language and is pronounced "ess Que ell". SQL is an international standard language for querying databases. MySQL is an SQL server which accepts requests written in SQL and delivers an answer, which might just be a number or might be data. It can handle large volumes of data. Many users report having tables that contain several hundred thousand, or million, records. Databases of several Gigabytes are not uncommon.
It is important to design the database correctly and I've found Beginning Databases with MySQL by Neil Matthew and Richard Stones very useful. It's published by Wrox. I've also read Managing and using MySQL, by George Reese, Randy Jay Yarger and Tim Kink, published by O'Reilly and am now reading PHP and MySQL Web Development, by Luke Welling and Laura Thomson published by Sams.
Here's a link to the MySQL website.
On the aromatherapy section of my yoga & new age page, the name of all my oils come from a table in a database. When I'm out of an oil, I just mark it as wanted and it automatically appears on my wants page.
The board game events are now held in a table so the last month's events are on the main page, and earlier events are put onto another page. I don't have to move events - it happens automatically.
I've written a simple content management system that I've modestly called blisscms. This automatically allows old pages to be summarised, and updated via a web browser. It will allow further enhancements like advanced searching and means that I can very easily add new pages to the site. You can read more of any story, or expand or summarise all stories for easier printing. I've changed my politics and diabetes pages so far and they're a fraction of their previous size. What do you think of blisscms ... improvement or not? mail me comments.
I've also put most of my books into the database and all my records, CDs, DVDs and videos.
Of course, you must have some way of communicating with MySQL, which is where PHP comes in. The code to call the database is written in PHP. Here is an example:
<?php
mysql_select_db($database_bliss, $bliss);
$query_countsf = "SELECT count(*) FROM books WHERE books.genre ='SF';";
$countsf = mysql_query($query_countsf, $bliss) or die(mysql_error());
$row_countsf = mysql_fetch_assoc($countsf);
$totalRows_countsf = mysql_num_rows($countsf);
?><?php echo "<p>I have "; echo $row_countsf['count(*)']; echo " SF books!</p>"; ?>
I recommend Create Dynamic Web Pages using PHP and MySQL by Peter Tansley, published by Pearson Education.
You'll also need to administer your database. You need to make sure you can backup your data.
That's where phpMyAdmin is invaluable. It is intended to handle the administration of MySQL over the web. Currently it can:
It's frequently updated. The best news of all is that, along with MySQL and PHP ... it's free!
Devshed is a useful site for all web programming tools.
I have some JavaScript on the site but I'm trying to use PHP whenever possible as that works on all browsers. Over 98% of users of this site have JavaScript enabled, but I try not to use it for essential functions (e.g. navigating around the site) otherwise anyone without JavaScript couldn't use the site. This could affect disabled users.
Whenever I do use JavaScript, I make use of the <noscript></noscript> commands which only runs where scripting is disabled. This is used on my about the site page, amongst others, so users without JavaScript know what they are missing!
Java is a totally different language from JavaScript and I use it on my travel page, but I haven't written any Java code myself. Have a look at Javabase for some interesting functions you can use without needing to do any programming.
I'm amazed at how often sites are completely broken, giving script errors when you first go in, or by having blue links on a black or fussy background. Did these people test their site at all? Probably, but then they made some changes. The whole of the Internet is dynamic and constantly changing, and that is what makes it so useful, but you have to cope with that change. That means not making a quick change at 03:00 and assuming it will work! Hey, been there, done that ... but I'm trying to help you avoid my mistakes!
The amount of testing to be done must be based on what changes you have made, so changing the name of your home page, or tags in your style sheet, require more testing than putting a new image on one page.
I've put a few useful grammar links onto my miscellaneous page.
Even if you haven't changed your site, it is likely to break itself! Sad but true. The web is a set of interconnected links, and other sites are changing their name, page or closing down all the time.
Programs like Dreamweaver can check your links, or you can use a commercial link-checking service.
One
I've tried is SEVENtwentyfour Inc.
Their comprehensive service checks your site daily. They charge $99 per year
for a site of up to 100 pages, but they offer a month's free trial, which I
highly recommend: they found some problems that I didn't know about on my site.
LinkChecking verifies links within and from your site daily, and checks links
into your site from elsewhere on the Web. You receive emails when something
breaks and weekly summary reports. They can also offer RankChecking, with advice
on improving your site's rankings with the major search engines. Do check out
their site. They have offered 20% discount for anyone who mentions this site
when contacting them. Email John Dallas
of SEVENtwentyfour for more details.
Another useful site is InternetSeer, which checks hourly that your site is up and running. This service is free as long as you are prepared to participate in online surveys.
In these litigious times, it is important that data protection and privacy legislation is followed. Even if you're not in an area where UK legislation is binding, it is better to adhere to them as closely as possible. After all, you wouldn't be happy if you saw anything inaccurate on the web about you, would you?
Note: There are significant legal issues involved with publishing a privacy policy whether in human readable or P3P format. This introduction should not be considered a substitute for legal advice.
Apart from the legal aspects, if you're not careful you might find users of Internet Explorer 6 can't use your site if you use cookies and don't have a privacy policy that the browser understands.
First, read Make Your Web Site P3P Compliant. This gives a good overview of what you need to do.
Decide on your policies and what you plan to do. Create a web page with a human-readable policy and a URL for disputes (I use privacy.php#dispute).
Next, download the IBM P3P Policy Editor from the IBM alphaWorks website. It is quite well-documented and should let you create a policy file (*.p3p). You also need to create a reference file (p3p.xml). I discovered that I had to put it in a w3c folder before it could be found by the browser.
To test it, I loaded my website into Internet Explorer 6 and viewed a Privacy report.
I also used the P3P validator at www.w3.org/P3P/validator.html.
Books I recommend and which I have used to help me create this site are HTML & XML for beginners by Michael Morrison, published by Microsoft Press and Web Site Design Goodies by Joe Burns, Ph.D., published by Que. I've just started reading HTML 4.01 Programmer's Reference published by Wrox, which has masses of information but may be a little daunting as a first reference - I'm still only up to page 490 so far!
For writing Javascript, I read Javascript Weekend Crash Course by Steven W Disbrow, published by Hungry Minds.
For web design and maintenance, I recommend Dreamweaver MX, a professional HTML editor and site manager, which allows you to handcraft code or use a WYSIWYG mode. I'm now using Dreamweaver Studio MX which also contains Flash MX and Fireworks MX but I've only used Dreamweaver MX so far.
For graphics, I use Photoshop CS and Paint Shop Pro 8.
You might also like to try Tidygui. This program checks HTML code and can tidy it up (remember to back up your code first!).
:
: © Mike Bliss 2011