BAYKO - Geek's Corner

Several people have asked me about the technical aspects of the site itself - as distinct from the BAYKO related bits - so I thought I'd add this page to try and help!
For the record, I don't allocate myself full 'BAYKO Geek' status - I'm just not sufficiently technically adept!
The object of the exercise here is to explain what I've done, in terms of the approach to various site standards and the software tools involved in carrying it out.
I thought it was important to standardise most features of the appearance and layout of the site as part of my attempt to make the site easy and comfortable to explore for regulars and new visitors alike - done properly, it actually makes life easier for the webmaster too!


The key tools and standards are set out below : -
I currently use DREAMWEAVER CS4 for all web pages and use the site-wide 'find and replace' facility to ensure consistency of spelling and / or presentation with words like post-war or 'Oak'.
DREAMWEAVER CS4 also has, as standard, a 'Clean up html' feature which I use religiously to streamline the html code as much as possible, but this facility isn't perfect.
As a general comment, I don't speak html, but DREAMWEAVER does. However, particularly in the early days I was forever cutting and pasting until I was happy with the standard layout, and there are some consequences to this. You can often end up taking more code with each move than you intend. Add to that my preferred method of duplicating a page, from the right section, as stage one of creating a new page, and you can see that the surplus code can quickly get multiplied across the site.
I recommend taking action, perhaps every couple of years, to bring this back under control. Time has helped me learn how to read html, to a basic level, which allows me to edit the html code, directly. Using the DREAMWEAVER split screen facility allows you to easily check what you have done, to minimise risk! This enables large, complex pages, with lots of surplus code, to load much more quickly when tidied up.
I also try and remember to be a good little boy and use the standard spell check facility of DREAMWEAVER CS4 every time I change a page.
► C.S.S.
I've used Cascading Style Sheets [C.S.S.] to impose standard fonts, colours, text sizes, etc. for headings, sub-headings, labels, quotations, links, emphasis, etc. - using straightforward English descriptions for each style to simplify the process.
One of the C.S.S. features I've used is to make links change colour when your mouse passes over them and identify destinations that the visitors have already been to. I also got rid of the, to my eyes, ugly standard underlining of all links.
I also use them to add a standard BAYKO Brick Pattern background on each page, using different colours for different sections.
► Links
All links, including email links, embodied in the main text area have explanatory descriptions which pop up when the visitor's mouse passes over them. This is done using DMXZone Advanced ToolTip software, with consistent formats for different types of links : -
"Link to BAYKO Information"
"email link to BAYKOMAN"
Each email link also carries unique identification in the form of the email TITLE and first line of MESSAGE text by adding something like the following [between the " " below] additions to the link : -
I always use italics to emphasise commercial brand names, like BAYKO, and force this on Advanced ToolTips by enclosing the brand name as follows [between the " " below] : -
Similarly I put published works titles on quotes, e.g. 'Daily Mail'. To do this, or use other characters which may otherwise be interpreted as HTML control characters, I precede the character with a back slash [\] as follows [between the " " below] : -
"\'Daily Mail\'"
In both cases, experience has shown it's safer to start each script with a standard character.
► Images
Every image on the site carries a label describing it that appears whenever the mouse moves over it. This is also provided using DMXZone Advanced ToolTips.
A few images incorporate a transparent background for enhanced effect. This is done done using standard features of PHOTOSHOP ELEMENTS, but remember, each file then has to be saved as a .GIF file - with transparency enabled!
I currently use PHOTOSHOP ELEMENTS for initial work on images [tidying up, cropping, etc.] and for most home produced artwork.
It's perhaps worth pointing out that some of the images, mainly those on poor quality newsprint or other cheap paper, have taken me as much as 8 hours - yes, 8 hours - to tidy up ready for the site!!! This is a consequence of the decision to [generally] show all paperwork in 'mint' condition, unless 'atmosphere' would be lost.
I currently use FIREWORKS CS4 to make the images ready for the web [batch processing, sizing, slide shows, managing transparency, etc.].
► Animations
All the animations on the site are created using FIREWORKS CS4.
I'm particularly pleased with the folding BAYKO Fliers which were achieved as follows : -
Create a copy of the base image to be covered by the folding process, with a transparent expansion to the canvas big enough, and in the right place, to hold the portion which will fold over, and place this on 'state 1'. This canvas should be exactly the same size as the unfolded image initially displayed on the website.
Set the 'state' duration to 7/100 second.
Create ten duplicate copies of this initial 'state', making eleven 'states' in total.
Create a copy of the image which will fold over, and locate it in its start position over the transparent area of the canvas on 'state 1'.
Create four further versions of the image to be folded over which are 80%, 60%, 40% and 20% of the size of the original - shrunk in one dimension only, towards the fold - and locate these, in the above sequence, on 'state 2' through 'state 5', each in contact with the point at which the fold occurs.
Do not put anything extra on 'state 6'.
Create a copy of the image which will be revealed as the folding process proceeds, then create four further versions, shrunk to 80%, 60%, 40% and 20% of the original, again shrunk only in the direction on the fold.
Add these five images, in ascending order of size, to 'state 7' through 'state 11', always located against the fold point, but on the opposite side to the one you used previously.
Reset the duration of 'state 1' to 150/100 seconds and 'state 11' to 350/100 seconds, and make sure the animation is set to 'loop' indefinitely.
Make sure you export the file as an animated GIF, with transparency enabled.
Use the DREAMWEAVER CS4 Swap Image feature to interchange this animation with the original, unfolded image.
► Alt Text
In a similar manner to the links described above, every image and piece of artwork has an explanatory description [Alt Text] which gives specialist software a script to read to the visually challenged. Prompting adding Alt Text is a standard feature of DREAMWEAVER CS4.
Unfortunately a non-standard feature of INTERNET EXPLORER means that Alt text gets automatically interpreted as a tool tip. To prevent this I add the following [see between the " " below] to every relevant line of html code : -
► Image Swapping
A few images on the site change when the visitor's mouse passes over them - this is a standard feature available in DREAMWEAVER. Note, to work properly, the two images need to be exactly the same size. Generally this feature is used, for example, to highlight the BAYKO section of a multi-product document.
► Pop-Up Windows
Just about every image on the site - well over 3,000 anyway - will display a larger version [generally restricted to a maximum length or width of 600 pixels]. I do this using a DREAMWEAVER extension provided by JustSo PictureWindow 3, which has much better features than the DREAMWEAVER standard equivalent.
I make particular use of three key features - the addition of a close button, automatic closure after two minutes and of a background brick pattern matching the one on the page from which it was launched.
I then further modified two aspects of the Pop-Up Window caption functionality by using DREAMWEAVER to edit, directly, each page's JustSo PictureWindow 3 generated C.S.S. to change the Caption Background to 'Transparent' [see between the " " below] : -
"background-color: Transparent;"
and the Caption font weight to 'Bold' [see between the " " below] : -
"font-weight: bold;"
You should be aware that JustSo PictureWindow 3 seems to dislike these modifications in its links with DREAMWEAVER. I therefore only keep the fully modified C.S.S. on the web server, and use the C.S.S., without these modifications, locally, for all developmental purposes.
I keep control of the 'type setting' of the captions by adding the following to force the script onto a new line [see between the " " below] : -
In order to allow more than one pop-up window to display at the same time, each window requires a different name, e.g. "WindowName". Unfortunately this is then displayed over the thumbnail version as an additional tool tip. To prevent this I delete the relevant section of code which JustSo PictureWindow 3 creates [see between the " " below] : -
► Frames
Although web cognoscenti advise against it, I've organised my site using 'Frames'. This really simplified the developmental work from my perspective.
However, it meant that, given the way GOOGLE and the like index individual pages, those pages could be reached without the supporting Frame [i.e. the top banner and the side navigation links]. It's too long to detail here, but I'm very pleased with the solution I've been able to implement [found on the web] which completely overcomes this problem.
► Tables
Another one in the eye for the purists, I'm afraid, but I've used Tables with zero-width [hence invisible] borders to create the layout for every page.
Tables like this one have a border width of one, coloured blue, [not really supported and thus displayed as black] with a table background of white to create the frame you can see on this page.
I then cycle the cell background colour to emphasise the change from item to item.
For substantial pages, with lots of images, links and complex code, I recommend splitting the layout into more than one table, perhaps several. Although technically this will increase the total page load time, it gets something there, for the surfer to see, much more quickly, which is always a good idea!
Blank cells don't work properly in many browsers. This proved to be a real pain until I learned that you can add the following non-printing character direct to the html [see between the " " below].
Ironically, DREAMWEAVER CS4 now does this for you automatically - if only...
► Search Engine
Given the substantial size of the site, I felt that an internal search engine would be a valuable feature. I chose, and am extremely happy with, software by ZOOM.
Apart from the excellent functionality, the use of an html template file means that the appearance of the search engine can be fully matched to the site.
► Forum
Last, but by no means least, I added a BAYKO by BAYKOMAN Bulletin Board or Forum to the site. Customising the appearance has proved to be beyond me, non-the-less I'm very pleased with the software by PHPBB and thoroughly recommend it.
Unfortunately, due to repeated attack by 'undesirable advertisers' I've had to close this feature.
For the record, my I.S.P. is FREEOLA, who's fees are not too bad and who host
They have delivered me a pretty good level of service for several years, with a very helpful telephone support service.
► Page Reveal
Not everybody likes it - but I do!!! I've added different page reveals to different sections of the site, similar to those used in POWERPOINT presentations.
This is simply done by adding one of several alternative single lines [e.g. between the " " below] at the top of the head section of the page, to take advantage of a standard, if little known, web feature.
"<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">"
This feature is ignored in several browsers such as FIREFOX.
► Scroll Bar
That's probably not its correct title, but I've added a message scroller which puts basic page related information along the grey scroll bar towards the bottom of the screen.
Whether or not this works for you is dependent on your browser and its settings.
For those who don't know, OPERA is an alternative to INTERNET EXPLORER - and I don't like it!
OPERA is much faster than INTERNET EXPLORER, so, as a surfer, I love it, but, it seems to deliver its speed by a lack of attention to detail, meaning that things don't always display the way the webmaster wants. In my case, I've had to do lots of work to make the site OPERA friendly - hence my opening emotional response.
There is one particular bug which OPERA trips up on - column sizes on tables. Try to change the appearance of the table too frequently as you move down, and OPERA gives up and does things its way - not yours. INTERNET EXPLORER isn't totally immune to this, but is far less petty. I'm afraid the only way to conquer this is that when you feel another bout of restructuring coming on, start a new table underneath!
To be fair to OPERA, it's possible that some of the issues originate in the DREAMWEAVER coding, but OPERA always shows more errors than INTERNET EXPLORER.
► Internet Table Cell Size
I believe this is a known bug amongst professional website designers, but they don't suffer too much from it as it relates to tables - and the pro's are very snobbish about NOT using tables!
You can define the size of a cell [a slot in a table that you want to put something in] in various formats, the commonest two being as a percentage of the width or height of the table, and as a count of the number of pixels to be allocated.
Nothing complicated there, but the two formats don't mix well. Define a cell as 20% of the table width and 170 pixels high, to house an image with a small margin, and you can't be certain how it'll appear. INTERNET EXPLORER isn't immune, but OPERA is the big offender.
After much heartache, I've resolved the issue. I'll give you an example showing the best approach to minimising your exposure to this frustrating bug.
Take a simple table, two rows by two columns. Reasonably, given modern screen width variations, you want to set column width as a percentage, to control the proportions across the screen. Equally unsurprisingly, you want to use pixel count to control the height of the cells holding images, to give them a margin.
If, say, you specify a column width of 20% on the top left hand cell, then the left hand column will be defined as 20% and thus the right hand column will be defined, by default, as 80%.
If you then specify the cell height as 170 pixels in any cell in the right hand column, then its row height will be set as 170 pixels.
Despite the overlapping impact, avoiding using different formats in the same cell, solves the problem.
Of course, you could eliminate all these issues by specifying the table and column widths in absolute [rather than percentage] terms, but that means your readers have to put up with a wide 'waste' area at both sides of their modern wide screen monitors.
Below here are links to related info : -
Click on any of the links below for related information.
The 'Flaming BAYKOMAN' site logo