August 2005 Archives
Following on from part 1 and part 2...
Adding a strict doctype to the html used to generate the tab bar of the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
causes both IE and Firefox to exhibit exactly the same page chewing behaviour. Of course, had I used one in the first place, I would've spotted that. That'll teach me to to trust Visual Studio, it puts a "lazy" doctype in, grrrr!
At least now I can move forward with this and make the behaviour consistent (and consistently correct!) between Firefox and IE. So, the list of things that need to be done to the control now are:
- Sort out the rendering so it's correct with a strict doctype
- Add scrollers on either side of the tab bar so that if the sum of the width of the tabs would exceed that of the content div, the tabs are scrollable
- Make the whole shooting match into an ASP.net 'custom control' with a usable design time behaviour. It should be self contained and emit all the required javascript and CSS to support itself.
Not that I've got anything else to do, but it's all good fun!
To summarise Part 1, we:
- Built out the UI of a content area with tabs above it (using CSS)
- Added some Javascript on the onmouseover and onmouseout events for the tabs so that they would react to mouse movement and give a visual 'clue'
In this part we will:
- Add another visual 'clue' so that the currently selected tab is easily discernable
- Add some UI consistency so that all the displayed tabs are the same width
- Add the logic that hides and shows the content areas so that only the one related to the 'current' tab is visible
So, to start with we'll add the currently selected tab visual 'clue'. Firstly, we need a way of tracking which tab is currently selected, so, in the first javascript block on the page, we add "var oSelectedTab;", for example:
<script language="javascript" >
<!--
var oSelectedTab;
-->
</script>
Now we need to have a function which gets called on the tabs "onclick" event....
You'll have to excuse my laziness with this for two reasons:
1 - The rendering isn't perfect in Firefox, this could eaily be sorted out but I'm feeling lazy!
2 - The control is not as generic as it could be. This could be dealt with easily but again, I'm feeling lazy
We'll start off with some simple CSS and some even simpler HTML:
CSS:body
{
font-family:Trebuchet MS;
}
.buttonbar
{
position:relative;
top: 10px; }
.button
{
border-right: gray thin solid;
border-top: gray thick solid;
border-left: gray thin solid;
border-bottom: black thin solid;
padding: 0 -5px 15px 0;
margin: 0 0px 8px 0;
height: 25px;
background-color: darkgray;
text-align:center;
font-weight: bold;
z-index: 0;
cursor: pointer;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="styles_2.css">
</head>
<body>
<div class="buttonbar" align="left" id="tabpanel">
<span class="button" id="btn_1">about me</span>
<span class="button" id="btn_2">cv</span>
<span class="button" id="btn_3">gallery</span>
<span class="button" id="btn_4">links</span>
<span class="button" id="btn_5">contact</span>
<span class="button" id="btn_6">extra</span>
</div>
<div class="content" id="cnt_1" name="content">
<h1>button 1</h1>
</div>
<div class="content" id="cnt_2" name="content">
<h1>button 2</h1>
</div>
<div class="content" id="cnt_3" name="content">
<h1>button 3</h1>
</div>
<div class="content" id="cnt_4" name="content">
<h1>button 4</h1>
</div>
<div class="content" id="cnt_5" name="content">
<h1>button 5</h1>
</div>
<div class="content" id="cnt_6" name="content">
<h1>button 6</h1>
</div>
</body>
</html>
Let's focus on adding some sparkle to the UI right now...
A couple of things I've found useful in getting this site up and running are the very excellent HEX to RGB and rgb to hex Color Converter and the Robots.txt Checker.
The HEX/RGB colour converter is useful for transforming colours backwards and forwards from graphics applications which show the individual (R)ed, (G)reen and (B)lue colours (for example 187,219,219) rather than #BBDBDB.
As for the Robots.txt Checker, that's useful for making sure that my robots.txt file is correct and well formed. Robots.txt (not robot.txt as I've seen mentioned on the web!) is useful for making sure that search engines only "crawl" (or read) the parts of my site that I want them to crawl. Telling them to ignore areas of the site that I don't want crawled not only helps to ensure that only relevant stuff is trawled by the search engines but also means that I can keep bandwidth costs down by specifically exlcuding folders that may contain big files. An added bonus is that you can target specific search engines, for example the Google Image crawler could be blocked, thus stopping the bandwidth drain that can cause!
One interesting thing that comes out of searching for information on robots.txt is this article about the robots.txt file for whitehouse.gov. It would appear that someone at the whitehouse, possibly a well meaning tech-bod, has decided that search engines shouldn't be able to find anything Iraq related from whitehouse.gov. It's a whitehouse-wash! ;-)
See: VB.net to C# comparison [ - Part I]
It's comments like this one which to an extent, wind me up. "VB.NET is RUBBISH and should be scrapped." Talk about totally random and totally without reason.
Each language has its strengths, each its weaknesses. As it is, at their most simple, they're syntactically identical, or near as damn it!
C#
SomeObject i = new SomeObject;
i.SomeProperty = 3;
i.SomeOtherProperty = 4;
i.SomeFinalProperty++;
VB.net
Dim i as New SomeObject
With i
.SomeProperty=3
.SomeOtherProperty=4
.SomeFinalProperty=.SomeFinalProperty+1
End With
Both of those do exactly the same thing, and both show off slight differences between the two languages, both strengths and weaknesses. Hey, what's the point of semicolons! And who needs "Dim" for that matter,...
I really do hope that no one from Boots do a google search on the term "Boots Sandwiches", at the moment, the top search result on both google.co.uk and google.com is a 'blog entry I made a while ago relating to how completely foul a new sandwich they'd added to their range was/is. Saying that, maybe if somebody does it'll be a kick up the arse to make what should be a nice sandwich edible!
Spurred by: The Perfect Bug
Having read this blog entry and found it really rather interesting, it's got me thinking about Severity and Priority of defects/bug reports. What's the difference between these two mythical beasts? Two pages that google hunted out for me seem to agree that Priority is business and Severity is technical. However, the latter (the one from StickyMinds.com) argues that Severity and Priority should be abolished, which would make me happy indeed! Say, for example, you have a piece of functionality which can cause the application to crap out and save nothing done since the last save, but you know that very, very few customers use this functionality, does that make it a High Severity but a Low Priority? It seems logic that the importance of the problem to the customer is defined as "Priority" and the impact of the defect on the system is "Severity" but still, surely a unified defect classification model would make far more sense.
Which is more important to resolve? (Scale runs 1 to 3 for both Severity and Priority)
Severity 1, Priority 3 defect [ Big Technical Flaw - Low Customer Impact ]
See Above!
Severity 3, Priority 1 defect [ Small Technical Flaw - High Customer Impact ]
Maybe there's a work-around that is a massive inconvenience for the customer to use, or it slows down their use of the software, maybe making it a nightmare to use? How-about, if you navigate backwards and forwards in a wizard it doesn't persist any data, except if you navigate from start to finish....
Related Links:
