Nik's Technology Blog

Travels through programming, networks, and computers

Site Redesign and Upgrade

I've finally decided to give my site a face-lift. I first built it in 2002 when the web was a different place, just recovering from a boom and bust. Since then we've seen the dominance of Internet Explorer errode slightly somewhat with the emergence of Firefox/Mozilla, Safari and Opera. Browsers have also become more standards compliant, which has made it easier to build cross-browser sites.

Advances in browser rendering engines have made it possible for more and more sites to adopt XHTML with CSS 2.0 stylesheets with presentation specific HTML consigned to the dustbin.

Moving all presentation logic to CSS is a liberating step to take, but it requires different skills and techniques compared with using tables. It's very powerful, but it also has its faults. Where before you had no option but to use JavaScript to create certain effects, often called Dynamic HTML, now a lot of those rollovers etc can be handled by a Cascading Style Sheet.

I've created a design that follows the current web vogue often associated with so called Web 2.0 sites, I'm still testing and fine tuning the design and initial template, but it will encompass this blog and my whole site, it'll be XHTML compliant using the WC3 strict DTD, my CSS will handle all presentation logic and I will aim to make it as accessible as possible to screen reading devices.

Internet Content Ratings - Developers/Webmasters Guide

I've been looking into content ratings for websites recently, mainly because certain clients have mentioned that they can't get our sites on their internal network.

Whether that's the problem in this situation or not is another matter, but it's worth investigating anyhow.

After a quick look on IIS I noticed that you can edit the ratings of your site, but before I began to fiddle I thought I had better find out more about these ratings.

Clicking on 'more info' in IIS content ratings section I went to www.rsac.org where I found out that the RSAC no longer exists. It is now part of the Internet Content Rating Association (ICRA).

They have a section especially for webmasters on the different ways of applying content ratings to your site. Included are instructions for Microsoft IIS web servers and Apache servers. I've linked to the webmasters section below.

http://www.icra.org/webmasters/

404 Error pages Returns code 200

Since a site redesign we've been using a custom 404 ASP page rather than our old HTML 404 page, this gives us the opportunity to add dynamic content to the 404.asp page.

However after setting up Microsoft IIS to serve our custom 404.asp page we discovered to our dismay, using a HTTP header viewer, that the 404 page was returning a code '200 OK' rather than a '404 Not Found'.

After some searching the ASP Response.Status object was found. Now with just one line of code at the top of our ASP 404 page we can set the status to 404 Not Found!

Here's the code.

<%

Response.Status = "404 Not Found"

%>

I've added a link to a handy HTTP viewer below.

http://www.rexswain.com/httpview.html

Web Developer Extension for Firefox / Mozilla

If like me you work with browsers and web pages on a daily basis then you might find this extension to Mozilla's Firefox a useful tool.

The extension simply adds a web developer toolbar to Firefox enabling you to perform many annoyingly awkward functions of web development much more efficiently.

One of my favourite features enables you to edit a sites' stylesheet on-the-fly. Other features are very useful too, such as the handy view source button, the browser resolution resize button and cookie information retrieval.

It also enables you to validate a page and outline various page elements including depreciated elements etc.

This toolbar is a must for any Web Developer.

http://www.chrispederick.com/work/firefox/webdeveloper/

Web Browsers For Web Developers

A couple of years after the release of Internet Explorer (IE) version 6 and it's starting to feel dated. The competition (Mozilla, Opera, Safari) have superceded any advantage IE had over them with features such as tabbed browsing, pop-up blocking and built in multi-search toolbars. Microsoft's announcement of future revisions being shelved is another nail in the coffin for IE.

XP Service Pack 2 recently introduced a much-needed pop-up blocker for Windows XP users but I don't think this can save IE.

Mozilla's Firefox is gaining ground fast and I'm one of it's avid users. It's fast to load, has tabbed browsing (so you can avoid having 15 IE windows open at once), it's skinable and has a built in RSS reader and the best thing is it's FREE!

What's more it's open source meaning anyone can help in making it better.

What more could you want from your browser?

http://www.mozilla.org/products/firefox/

IE 6 Bug with Absolute Positioned Layers

How important is it that people should be able to cut and paste from your website?

Having designed a site using nothing but DIV tags instead of using a table structure to lay out a page I find that IE 6 has a problem concerning absolute positioned layers.

The pages look fine, however if you go to select a certain piece of text you'll find that it selects the whole page instead (or at least not the part you wanted to select). Frustrating or what!

After some investigation it seems that a lot of people are discovering this problem. One solution it seems is to remove the XHTML doctype from the document, this forces IE 6 into quirks mode, which renders the page differently, the error disappears, but it stops the page from validating. Solution? I don't think so!

The other solution is to avoid using absolutely positioned elements and use relative ones instead. Surely we are trying to progress website design not hinder it.

I have yet to find a proper solution to the problem or find out if and when Microsoft will fix this bug, however I did come across some javascript that appears to correct the problem, albeit a very dodgy looking hack, seems to do the trick though. The link to the hack is below.

IE 6 Absolute Position Text-selecting hack

Website Compliance and The Disability Discrimination Act 1995

Following a recent on-line seminar I attended about Website Compliance with the UK's Disability Discrimination Act (DDA) I have been investigating what effects this will have on web designers who wish to design accessible websites.

The W3C have produced a set of guidelines called Web Content Accessibility Guidelines or WCAG for short. They are currently updating these, but the current version is 1.0.

The link below is my interpretation of the guidelines and the techniques developers and designers need to put into practice in order to make accessible sites.

There are three W3C priorities in which developers should aim to reach. If your sites conform to all three priorities then your site will be accessible by the disabled community and you can place a W3C WCAG logo on your site.

I have attempted to condense and organise the W3C guidelines into the three priorities with a view of what developers need to change.

I am in the process of making this site conform to all three priorities, but as you will soon find out when you read the guidelines this in some cases will mean re-writing pages of code.

Nik's Website Accessibility Guidelines

Browsers in BT Internet kiosk phone boxes

While walking past a BT Broadband Internet kiosk I was intrigued to find out what browsers they used. This is useful if you are a web developer, since you want to make sure websites you design work on as many platforms as possible.

After surfing to nikmakris.com and navigating with the TAB key (since the tracker ball wasn't working) I was pleasantly surprised on the speed and usability.

I guessed that they were using a form of Internet Explorer, partly because I know what my site looks like on IE compared to Mozilla and Netscape etc.

On checking my web logs I confirmed my earlier suspicion that BT Broadband phone boxes use IE. In fact they use Internet Explorer 6 on a Windows NT 5.1 platform, (which I believe is Windows XP) they have Javascript enabled and except cookies and with screens of resolution 800x600 and a colour depth of 16, they are more than capable of viewing most sites.

Adding Page Breaks to HTML Documents

Using the CSS style attribute "page-break-before" you can place page breaks within your document, enabling the web designer to control how the document prints.

For example you could add them to <hr> tags as an in-line style or as part of your external CSS document.

SYNTAX

INLINE STYLE

<hr style="page-break-before: always">

OR IN CSS

hr {page-break-before: always;}

Compatible with Internet Explorer 4 upwards and Netscape 6/Mozilla.

W3 Schools reference to "page-break-before"

Generic web form emailer using FOR EACH and CDONTs

The ASP code below will loop through all the requested form fields submitted to it and send a CDO email from your server to your email account with the values of all those fields.

PROCESS PAGE

<%

Dim cdoMail, Recipient, Subject, Redirect, Sender, item, MailText

Recipient = "my_account@nobody.com"

Subject = "Enquiry from website"

Redirect = "index.html"

Sender = "server@nobody.com"

  MailText = "Email received from my website"

for each item in request.form

  MailText = MailText & item & ": " & request.form(item) & vbcrlf

next

Set cdoMail = Server.CreateObject("CDONTS.NewMail")

  cdoMail.From = Sender

  cdoMail.To = Recipient

  cdoMail.Subject = Subject

  cdoMail.Body = MailText

  cdoMail.Send

Set cdoMail = Nothing

Response.Redirect Redirect

%>

For more information about the FOR EACH vbscript statement please see my previous post below.

Simple ASP Form Collection with FOR EACH

The code below shows how to grab form submitted data from a page by looping through all submitted form items using the FOR EACH vbscript code.

Note: The submit button does NOT have a NAME attribute, this is so it doesn't appear within the fields on the process page.

The code can be altered to loop through query string data aswell. Simply replace "for each item in request.form" with "for each item in request.querystring".

FORM PAGE

<html><head><title>Lazy Man's Form Collection using FOR EACH in ASP</title></head><body>

<form action="form_collection.asp" method="post"> <input type="text" name="Name">

<input type="text" name="Address">

<input type="text" name="Country">

<input type="text" name="Age">

<input type="submit" value="submit">

</form>

</body></html>

PROCESS PAGE

<html><head><title>Form Collection</title></head><body>

<%

for each item in request.form

response.write "<b>" & item & ":</b> " & request.form(item) & "<br>"

next

%>

</body></html>