BAYKO - Geek's Corner

WELCOME!!!

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! I have to admit, particularly updating this page to reflect updates to the site, has proved to be a useful tool, both ensuring comprehensive updating and pointing towards the next steps, as well as helping to impose some much needed discipline on yours truly!
For the record, I don't allocate myself full 'BAYKO Geek' status - I'm just not sufficiently technically adept! I don't 'speak' html or any of the other computer languages concerned, but I can read through the logic, and perform basic edits - and perhaps a bit more.
The object of the exercise here is to explain what I've done, in terms of the approach to establishing various site standards, and the software tools involved in carrying them 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, comfortable and intuitive to explore for regulars and new visitors alike - done properly, it actually makes life easier for the webmaster too!
I've also detailed one or two potential legacy issues, which will be of interest to my successor - when I'm gone!

The Key Tools, Techniques, Standards and Policies are set out below : -

DREAMWEAVER CS4
I currently use DREAMWEAVER CS4 [but feel there's something of an inevitability that I will gravitate to either DREAMWEAVER CC, or, taking into account the price, WAPPLER] for all web pages and use the site-wide 'find and replace' edit facility to ensure consistency of spelling and / or presentation with words like post-war or 'Oak'. N.B. Take care that, for example, capitalising the word Unit doesn't provide an opportUnity for error!!! I've done it!!!
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 CS4 does. However, particularly in the early days, I was forever cutting and pasting until I was happy with the standard of the 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 CS4 split screen facility allows you to easily check what you have done, to minimise risk! I thoroughly recommend this approach, and wish I'd done it from the start. This enables large, complex pages, with lots of surplus code, to load much more quickly when tidied up, and helps avoid future sins! This is, perhaps, more significant than it sounds. After executing my first html purge, the "clean up html" utility run time, on some complex pages, dropped by well over 90%, so there really must have been a corresponding page loading time improvement - albeit on a much smaller scale.
Spell Checking
I always try and remember to be a good little eboy and use the standard "spell check" utility of DREAMWEAVER CS4 every time I change a page, but life's never quite that simple, is it?
Sometimes my 'finger failures' result in a spelling error creating what is still a valid word [mistakenly] correctly spelled.
The only way to resolve this type of cock-up is to proof-read everything, but therein lies a problem…
…the brain's natural response to rereading what it's just written often fails…
…it regularly [well mine does] reads what it meant to write, not what it actually wrote!
There's a simple solution - don't be as stupid as me!!! However, a more effective, though, sadly, more difficult strategy is to reread the page four or five days later, when the frustrating 'read what I meant to write', false response, no longer kicks in…
…if you can actually remember to reread it!!!
I feel I must pay grateful tribute to the late Robin Throp who took it upon himself to be my proof reader…
…any volunteers? There's a large tower in Paris that I can sell you at a knockdown price!
C.S.S.
I've used Cascading Style Sheets [C.S.S.] to impose standard fonts, colours, text sizes, etc. for headings, sub-headings, captions, quotations, links, first letter, emphasis, etc. - using straightforward English descriptions for each style to simplify the process.
First letter, Attributions, Captions, Copyright, Dates, Dimensions, Emphasis, Explanation, Obituary, Quotes are examples of what I mean, I hope you find this is beneficial, if only through a comfortable familiarity. It certainly makes sitewide alterations, and thus maintenance of sitewide standards, very quick and simple, an important consideration for the poor, benighted webmaster.
One of the C.S.S. features I've used is to make links change colour when your mouse passes over them and similarly to identify destinations that visitors have already been to - I just don't understand why nobody [C.S.S. gnomes] emphasises the importance of the order in which you do the different bits - get it wrong and it doesn't work properly! I also got rid of the [to my eyes] ugly standard underlining of all links, except, for emphasis, when the mouse hovers over an active link. I've also used this facility to increase text sizes [e.g. on the left hand navigation panel] as you scroll down - improving legibility, without permanently compromising space.
I similarly use C.S.S. to add a standard BAYKO Brick Pattern background on each page, using different colours for different sections. If the background colour changes, it's an indicator to the visitor that they have changed sections.
I've recently changed the way this is presented, by fixing the background, so that all the script and images scroll passed it. This is done by including the following [see between the “ ” below] in the C.S.S. : -
background-attachment: fixed;
I must say, I prefer it to the original where the background also scrolled, though sadly it misbehaves on mobiles.
In early 2018, I decided to stick my tootsies a little deeper into the C.S.S. water, in order to build up my expertise, prior to making the [perhaps inevitable] decision to go with the web-flow, and move to a totally C.S.S. based website - but making improvements to the surfer experience along the way the guiding principle.
Links
I've never really been a fan of Hyperlinks being incorporated in the script, mid sentence as it were, so I basically don't do it. I prefer to create links, still within the text areas, but outside the sentence flow, to better identify where they are, and where they go - this effectively punctuates the script, prior to a switch to another direction.
All links, including email links, in the main text area have explanatory descriptions which pop up when the visitor's mouse passes over them. [There is an exception to this in that tables specifically set up as 'Navigation tables' do not comply - to avoid 'clutter'.] This is done using DMXZone Advanced ToolTip software, with consistent formats for different types of links : -
“Link to BAYKO Information”
or
email link to BAYKOMAN
The DMXZone Advanced ToolTip background colour is standardised to "blue" for a link and "light grey" for email links to me, or "dark grey" for email links to third parties.
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 : -
mailto:pete@baykoman.com?subject=TITLE&body=MESSAGE
If a Hyperlink will take you away from the site, I always force this to open a new window, but warn the surfer to that effect, with a "red" background DMXZone Advanced ToolTip message - don't want to encourage escapes!!!
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] : -
<i>BAYKO</i>
Similarly I put published works titles in single quotes, e.g. 'Daily Mail'. To do this, or use other characters which may otherwise be interpreted as HTML control characters, in a DMXZone Advanced ToolTip, I precede the character with a back slash [\] as follows [between the “ ” below] : -
\'Daily Mail\'
Experience has shown it's safer to start each script with a standard [i.e. non-italic] character, otherwise there seems to be an unexplained [to me at least] chance that the Advanced ToolTips won't launch.
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 and is standardised on a "yellow" background - unless it's also doubling as a link!
A few images incorporate a transparent background for enhanced effect. This is done using standard features of FIREWORKS CS4, but remember, each file then has to be saved as a .GIF file - with transparency enabled! Normally images are saved as .JPG files.
DREAMWEAVER CS4 offers the choice of an outline to each image you add to the site, which I don't like, so I change the 'Border' parameter to 0. I have now changed this, and do almost the same with C.S.S., except that I have added a border to, e.g., yellow images against a yellow background, for clarity. Almost invariably, this refers to scanned paperwork, etc., photographic images do not have a border, but are shown with rounded corners which is achieved by adding the following to the C.S.S. style sheet [See between the “ ” below] : -
 
.ImageRound {
  border-radius: 8px;
  max-width: 100%;
  height: auto; }
 
- then linking to that for appropriate images.
Wherever there is an alternative, I use the facility to pre-load images, etc. in the background. I'm not sure of the impact on overall loading time, but, by placing a small section first on each page, I try to ensure there is something to read A.S.A.P., then, as the reader scrolls down, everything should be more or less instantly available.
PHOTOSHOP
I currently use PHOTOSHOP ELEMENTS for initial work on all images [tidying up, cropping, etc.] as well as for most home produced artwork.
It's perhaps worth pointing out that some of the images, mainly those culled from 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.
FIREWORKS
I currently use FIREWORKS CS4 to make the images ready for the web [batch processing, sizing, slide shows, managing transparency, etc.].
As white tends to be the commonest background colour, you can sometimes get an issue if there is are white areas within the item.  Distinguishing them by 'painting' them off white [say 253, 253, 253] compared to the pure white [255, 255, 255] for the transparent bits then setting that specific colour to transparent.
Animations
By some distance the biggest selection of animations here are the 'digital full manual animations' which enable visitors to read BAYKO manuals in simulated book form. I have used the system provided by Flip Book, and am very pleased with the results. If you want to customise the books to blend in with your website, you will need a basic knowledge of html and C.S.S.
All the other animations I have used on the site are created using FIREWORKS CS4.
I'm particularly pleased with the folding BAYKO Fliers which were achieved as follows : -
Remember all the image portions you use must be .GIF format.
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 nine further versions of the part of the image to be folded over which are 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20% and 10% 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 10', each in contact with the point at which the fold occurs.
Do not put anything extra on 'state 10'.
Create a copy of the part of the image which will be revealed as the folding process proceeds, then create nine further versions, shrunk to 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20% and 10% of the original, again shrunk only in the direction on the fold.
Add these nine images, in ascending order of size, to 'state 11' through 'state 20', always located against the fold point, but on the opposite side to the one you used previously.
Add the full size [100%] part of the image to 'state 21' in the same way.
Reset the duration of 'state 1' to [say] 150/100 seconds and 'state 21' to [say] 350/100 seconds, to create a brief pause, and, finally, 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, this makes initial page loading just a bit quicker.
Alt Text
In a similar manner to the links described above, and in line with international website standards, every image and piece of artwork has an explanatory description [Alt Text] which gives specialist software an 'Alternative Text' to read to the visually challenged. Prompting to add Alt Text to a new image is a standard feature of DREAMWEAVER CS4, effectively automating compliance.
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 : -
title=""
This 'null' title is displayed [empty] on the viewer's screen thus blocking the Alt Text, title creation.
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 CS4. Note, to guarantee to work properly, the two images should be exactly the same size. Most often, this feature is used to highlight the BAYKO section of a multi-product document, but is also used, as previously mentioned, for 'folding document demonstrations'.
Pop-Up Windows
Just about every image on the site - well over 4,000 anyway - will display a larger version [generally restricted to a maximum length or width of 600 pixels]. I do this using a DREAMWEAVER CS4 extension provided by JustSo PictureWindow 3, which has much better features than the DREAMWEAVER CS4 standard equivalent.
I make particular use of three key features - the addition of a close button; automatic closure after two and a half minutes; and 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 CS4 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;
CAUTION. You should be aware that JustSo PictureWindow 3 seems to dislike these modifications in its links with DREAMWEAVER CS4. 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] : -
<br>
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] : -
title="WindowName"
A final small detail, JustSo PictureWindow 3 has a 'padding facility', which allows you to control the way the caption looks, personally I've gone for straight forward centring with zero padding, meaning that the 'apparently random' standard figures need to be edited to 0. [See between the “ ” below] : -
padding-left: 0;
padding-right: 0;
Frames
Although web cognoscenti advise against it, I've organised my site using 'Frames'. This really simplified the developmental work from my perspective. There are three frames, the top, full width, 'banner' frame with two more below - the yellow navigation frame to the left, and the main data frame to the right, with a five percent margin either side of that data. When I finally start to go total C.S.S., I'll eliminate the Frames, and probably run the yellow navigation Frame's replacement full height [top to bottom]. I'll also keep the five percent margin either side of the data - to me it looks right.
Back to Frames - they have 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.
Similarly, I found a natty piece of software, on the web, which prevents other webmasters from 'capturing' my pages and inserting them, frameless, into their frames or pages.
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.
To facilitate page loading, I ensure that the first table isn't too large, making sure there is something available to read A.S.A.P.
Visible tables, like this particular one you are reading now, have a border width of one, coloured blue, [not really supported and thus usually displayed as black] with a table background of white to create the frame edging you can see on this page.
I then cycle the cell background colour [blue, green, yellow] to emphasise the change from item to item, making them easier to read. My hope is that people will get used to this, very quickly, so that, if and whenever, I use any other colour, it stands out, giving the emphasis, or visible connection, that I'm looking to achieve, like the pink header and footer to this table.
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 marginally increase the total page load time, it gets something there, for the surfer to see, much more quickly, which is always a good idea! All the so called 'delay' actually happens in the background while the viewer looks at the first bit, so the viewer gets the best service.
As a general rule, for large 'Data Tables', like set contents, I repeat the headings at the foot of each table [or each section where I have split the table] hopefully making it easier to read, longer term I'll experiment with C.S.S. 'fixing' the table header and making the table scroll 'underneath' it.
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].
&nbsp;
Ironically, DREAMWEAVER CS4 now does this for you automatically - if only…
This works for INTERNET EXPLORER, CHROME, SAFARI, OPERA and FIREFOX.
Table Highlights
I've long felt a slight discomfort on the legibility of both Data Tables and Navigation Tables, and have finally taken the first steps to resolve this using a simple line of C.S.S. [see between the “ ” below].
.tbl tr:hover {background-color: #FC6;}
The relevant tables then have to be linked to the above statement by simply adding the following to the <Table> tag [see between the “ ” below].
class="tbl"
Hey presto(!), the row of cells over which your mouse is hovering is highlighted in the chosen tables.
Although more complicated, in due course I will add an accompanying vertical [i.e. column] highlight, creating the 'cross hairs' effect on the cell over which the mouse is hovering.
Because I've also regularly used background colours in individual table cells, as a simple cross-reference clue to supporting, explanatory information, these can clash, with the highlighting, so this is still a work in progress. Longer term my C.S.S. developments should allow me to create individual, thicker, coloured cell borders where needed, which, I hope, will still provide the required cell identification, but allow the background colour scrolling change to shine through.
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 of the table; and as a count of the number of pixels to be allocated for either height or width.
Nothing complicated there, but the two formats don't always mix well, particularly in large, complicated tables. 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 preserve 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, eliminates the risk.
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.
Thankfully, except to accommodate images where you want a boundary around it, you can avoid the problem altogether by not specifying cell heights, and let your browser run on autopilot.
I don't, for example, label the width of each cell in a column, as processing all this extra coding can only slow the display process - and one is always enough to give the control.
In addition, there seems to be a bug in DREAMWEAVER CS4. If you split a cell into two columns [= side by side] DREAMWEAVER CS4 sometimes gets the column-width of one of the cells [usually the left] wrong. The solution is simple. Highlight the table by left clicking on its right hand edge; then left click on the appropriate column width(s), shown immediately above the top of the table, for each offending column; then left click on “Clear Column Width”. You can then reset the column width(s) in the normal way.
Named Anchor
This is a standard feature of html, and thus also of DREAMWEAVER CS4, and is very useful on a site like this where, with a page of say, BAYKO Fliers [advertising leaflets] you want to link directly to one specific item [e.g. for a newly added item or for a cross reference from elsewhere on the site].
This is achieved by adding a Named Anchor tag [see between the “ ” below].
<a name="AnchorName"></a>
I have used this form widely, and it works, however, I understand today's preference/standard is to use id instead of name.
You then create a link at your chosen jump off point[s] and then add the following to the link[s], immediately after the page's file reference [see between the “ ” below].
#AnchorName
To compound my sins [who cares?] but where the link is to the start of a highlighted table like this one, I recommend that the Named Anchor be placed immediately before the table, but immediately after any line break [<br>] in the code. This ensures that the top line of the table is displayed, which will not happen if you place the Named Anchor, e.g., inside the first cell of the table.
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 - I found them years before the Covid Communicators!
Apart from the excellent functionality, its use of an html template file means that the appearance of the search engine pages can be fully matched to the site standards.
When scanning, it even comments on the html compliance on each page, facilitating de-bugging.
Forum
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 was very pleased with the software by PHPBB and thoroughly recommend it.
Unfortunately, due to repeated daily attack by 'undesirable advertisers', to say nothing of the 'troll brigade' I've had to close this feature. I must try again.
FREEOLA
For the record, my I.S.P. is FREEOLA, who's fees aren't too bad and who host www.baykoman.com.
They have delivered me a very good level of service for several years, with an extremely helpful, very patient, accessible, telephone support service.
Irrelevant to the site, I've just upgraded [seamlessly] to a much faster FREEOLA fibre service, and, because of the nature of the deal, actually save money from here on in!
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=&rquot;Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">
This feature is ignored in several browsers such as FIREFOX, and is also susceptible to personal browser settings.
I suspect, to reduce code, that this will disappear as part of my C.S.S. drive.
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.
I suspect, to reduce code, that this too will disappear as part of my C.S.S. drive.
OPERA
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, split the table and start a new table underneath, even though this must slightly slow the display time! Hopefully the small initial table policy drowns this problem.
To be fair to OPERA, it's possible that some of the issues originate in the DREAMWEAVER CS4 coding, but OPERA always shows more errors than INTERNET EXPLORER.
Page Heading
As part of my attempt to modernise, and generally upgrade the website, I pinched some C.S.S. from a generous donor to achieve, amongst other details, the Stitched effect on the title / heading of every individual page. I really like it, and [together with the large first letter mentioned above] it certainly helps to create a visual site identity from minute one.
Putting the page's Title / Heading script in the <h1> html tag, together with the C.S.S. script elsewhere [see between the “ ” below], does the job : -
  h1 {
       padding: 20px;
       text-align: center;
       color: #FF0000;
       text-shadow: 2px 2px 2px #333333;
       font-size: 40px;
       font-style: italic;
       font-weight: 1000;
       text-decoration: none;
       width: 85%;
       background: #3000ff;
       border: 3px dashed #eee;
       border-radius: 15px;
       box-shadow: 0 0 0 10px #3000ff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); }
 
- and, guess what - I really like it!!!
As you've probably already guessed, I'm teetering right on the edge of my C.S.S. capabilities here, so no further detailed explanation, but I'm told that the clever bit giving the position of the 'stitching' is [See between the “ ” below] : -
box-shadow: 0 0 0 10px #3000ff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
While the 'stitching' itself is done by the line [See between the “ ” below] : -
border: 3px dashed #eee;
- I hope that helps.
Manuals - Page Numbering
Careful observation of any of the web pages of the various BAYKO manuals I show may cause you some confusion in terms of reconciling printed page numbering and the image file numbering.
The page numbers, etc., as shown in the table's side captions, and in the ToolTips which appear when you slide your mouse over the thumbnail images, reflect exactly those used in the printed manuals themselves - without deviation.
However, the individual page images all take the form [shown between the “ ” below] : -
page 11.jpg
This will be the image of the 11th page, counting from the front cover of the manual, and takes no account of any page number which may, or may not, be printed on the page. Doing this automatically accommodates blank and unnumbered pages.
This may sound an odd approach, but, in fact, means that the treatment of all pages of all manuals is identical, massively simplifying web page creation and subsequent management/maintenance.
Keeping each manual in a separate sub-folder means that a complete new manual can be created by simple duplication and modest editing, as well as fostering consistency, for future maintenance.
.jpg is simply the standard file extension for photographs.
File Names
Although not an issue for the surfer, there is an issue here for whoever takes over when I'm gone!
What I'm talking about are the names for files, of all sorts, within the site. I've always tried to make those names fairly descriptive, which is good, but, by definition, particularly where dates are concerned, these names are inevitably based on my knowledge at the time of naming.
When new information sheds light on a subject, it may indicate a different date, and, of course, I've updated the website text accordingly, including all relevant links, captions and ToolTips…
…however, I've left the original file names unchanged.
This makes the updating process much easier, and safeguards the 'bookmark brigade', but does leave a legacy which requires caution.
I have now started to edit relevant html file names in DREAMWEAVER CS4, and respond 'yes' to the prompt “Do you want to update links”.  Sadly DREAMWEAVER CS4 doesn't give you a list of the changes it makes, so that means you either need a good memory, or upload 'everything', just in case!
This, in particular, can also be used to adjust the names of existing files so that the inevitable file handling utilities order the files for your convenience, not theirs. As a simple example, where that month is relevant within the date, it's best to label the files e.g. 1951 08 August.jpg. Doing this would display the file in its correct 8th place in the 1951 list. Omit the 08 and it will display in 2nd place, just before February - breaking the chronology!
Just a reminder - if the file concerned is an html page, anybody who has 'bookmarked' that page will suddenly be presented with the dreaded “Error 404” message - so it's best to get your file names 'right first time'.
MICROSOFT Files BUG
When I first came up against this MICROSOFT File Management Bug, I thought I was going crackers - thanks Bill!
Newly created / added files just disappeared; I couldn't access them; they weren't there, even when I knew I'd just put them there!!!
This is one of those issues where your initial natural instinct is to raise your own idiocy rating to severe - what on earth have you done, you idiot‽
Eventually I worked it out - problem solving had been a key skill through most of my career.
Mr Gates has set a secret [to me at least] maximum of 512 files in any one folder. Everything to do with computers involves the number 2 as a consequence of its binary approach. 512 is 2 to the power 9 [= 2x2x2 x 2x2x2 x 2x2x2]. This cannot be a coincidence!
512 files seems like a lot, but for a site with over 4,500 files [most doubled up on the thumbnail, full size basis] it often just ain't enough!
If you suffer under a similar flood of image files, the solution is easy, the simple addition of one [or more] folder with a name like that between the “ ” below : -
Images 2
…and stick to a ceiling of 512 files in any one folder.
The real difficulty with technical issues like this, is that when, green and naive, you set out, you just don't know what you don't know - well you don't, do you‽ With half-hearted apologies to Donald Rumsfeld!!!
Third thoughts compel me to add this rider - the only packages via which this troublesome issue handcuffed me were the three ADOBE packages, previously mentioned, so it is just possible that…
BAYKO Set Numbers
Although I've long felt a modicum of discomfort about it, I identify all BAYKO set numbers by prefixing them with the # sign, which is correctly known as the, “Hash Sign”, the “Number Sign” or the “Pound Sign” [that's avoirdupois weight, not sterling money], but has recently been swamped by the “Hashtag” label.
This use, of what is generally regarded an Americanism, was intended to encourage the set numbers to be read, for example, as “Set Number 2”, rather than just as “Set 2”.
I still do prefer this form, though perhaps a little less fervently, but I'll take a lot of persuading to do all the 'unnecessary' work that would be required to remove it…
…once again I've gone and made a “Hash” of things!!!
COPYRIGHT
While the “raison d'être” for this sight is to accumulate and disseminate as much information as possible about BAYKO Building Sets, the worlds first and finest plastic construction toy, never the less : -
As far as ALL COPYRIGHT MATTERS are concerned…
ALL RIGHTS ARE RESERVED
by www.baykoman.com Webmaster, PETE BRADLEY.
There is a dated reference to this at the foot of every page on the www.baykoman.com website…
…the date is reset on the update of those individual pages.
In reality, I'm happy to discuss your ideas, but I'm sure you'll understand that I have to protect myself.
Site File Structure
The site file structure [below] is as simple [flat] as I could make it, and is thus fully compliant with the recommended website standards, with one slight exception [BAYKO Manuals]. Let me explain. [n.b. I shall effectively read the baykoman.com schematic [below] from left to right.]
0 !
The Key Detail is that each individual 'Subject' is [logically] headed by a [Subject] 'Navigator' page, though this file - is always held in its Subject Folder.
1
Each Subject - its 'Navigator', all Related Pages and its 'Images' Sub-folder - is held in its Subject Folder. [This is clearly the structural segment which is repeated for each of the site Subject areas.]
2
The Home Page, other site wide functions, and a joint 'Images' Sub-folder  - are held at the Top Level.
3
The site wide C.S.S. Files - are similarly held at the Top Level, in the 'Templates' Folder.
4
Each BAYKO Manual with its 'Images' Sub-sub-folder - is held in its own Manual Sub-folder - which, in its turn, is held in the Manuals [Subject] Folder. This 'shape' massively simplified adding new Manuals.

A highly simplified schematic showing the baykoman.com organisation and file structure.

Highly simplified diagram of the baykoman.com organisation and file structure
 
Below here are links to related info : -
 
Click on any of the links below for related information.
 
   


The 'Flaming BAYKOMAN' site logo

Latest update - July 23, 2021
The BAYKO name and Logo are the Registered Trade Mark of Transport of Delight.
© COPYRIGHT - ALL RIGHTS RESERVED.
WEBMASTER - PETE BRADLEY.