Intro

/./ or more correctly www.slashdotslash.com is a single-page interface website built in 2002 to demonstrate and experiment with various web programming functions and abilities of Dynamic HTML, for example, animation of css styles, text, code and geometry using javascript. There was no html5 or Ajax in 2002. It was a time when good web design meant having 3 frames: top, nav and main! the links in the nav frame would change the pages in main. So far a total of 4 files including a frameset index. Add to this, other files such as html menus animated gif buttons all having to be linked to and called as a local file or a remote url. Not very portable and actually quite clunky by todays standards. In this example, various design aspects were explored and one of the prominent outcomes of the project is that it was required to be a small emailable single html file containing all the content and functions required including child windows in a time where 50% of the UK internet was using a dialup modem. Any external files displayed including Flash, Shockwave and images are hotlinked from a webhost, but the design tries to do away with any that are not required thereby using simple html and form graphics. It was written in mid 2002 and tested using Microsoft Internet Explorer 5, then by far the dominant browser. Since then the internet and its technology has changed, many of the functions are Microsoft Internet Explorer specific and do not work in other browsers such as Firefox, Opera or Safari, indeed some minor functions no longer work in more recent versions of Internet Explorer.
At the time of writing this (April 2012), the site attracts a great deal of traffic, not all of whom can actually view the site, so this is in some way trying to avoid showing a blank white page. I am also trying to find a way to capture a moving image of some sort to show how the site interacted with the user. The site has not been maintained since 2002 except for moving the web hosting from Geocities when Yahoo chose to shut it.

Becoming a student (again)

In 1998 at the age of 30 I had left my job in an electronics lab and went back in to further education. First I studied Business Information Technology to expose myself more to computers. I had used Windows95/98se within my job for a few years but I had not owned one since my Sinclair spectrum 48k. Once I got my student loan there was nothing stopping me, a tower with dvd rom and cd writer, with a nice graphics card and a huge (40Gb) hard drive. I am not a tv person and this was going to be the media center.

Hello World.

In one of the first modules of the course, we started with the very beginnings of web programming and it was literally a case of "create a text file in notepad and change the extension to .html". It was all done from a floppy disk so I was learning how to create tables and make links to images using thumbnails using static and relative links. Much of this happened relatively quickly, a friend had given me a cracked version of Macromedia Director 8 and I was creating movies and shockwave files. It was about then that alot of this stuff started to gel together. Geocities, Paint Shop Pro6 WS_FTP, IE4 and Notepad. I was starting out on the web. Looking back it was kids and crayons stuff. There is alot of truth in the episode of the Simpsons where Homer builds a website full of animated gifs with not much else. I was building lots of gifs in director and then scouring Dynamicdrive.com and other web coding sites for interesting scripts to put the stuff together. At the end of the course, after 2 years of working in bars, test driving some of the opposite sex, studying Business IT, doing part time electrical installation work (PA and Projector in 150 pubs). My final essay was an in depth look at the way the internet is developing. In all honesty, all I did was rewrite my own instruction manual for Paintshop Pro, Director 8 and HTML-Kit (my new coding environment). I passed with merit.

Time spent learning

I had my sights on a Bachelors degree in Design for Interactive Media. I knew the lecturer who had been writing the course and we got on well, but I was going to have to wait for 12 to 18 months for the new course to be validated by the education powers that be. I used the careers service in the uni to get a job in a small electronics company making magnetic card readers and associated products. I used my electronics experience to show off my design skills and helped create a few new products, and was asked to spend time creating support for the range, including, schematics, test machines and procedures, and user manuals. This of course led me to update the website with what was essentially my first commission. I rewrote the manuals in HTML and started to create a technical "backend" which was aimed at existing customers providing support, but eventually led on to a redesign of the main site. This last bit was an extremely painful process. The boss of the firm was based very much in sales rather than tech and when he took an interest in the sales potential of the website, it became a daily torture of him coming up with ideas of the site resembling a "TV channel Ident" and would say things like "we could have this bit whooshing in from the left!" and "maybe less red, make it more green." I was trying to get him to sign off rough sketches I had done in Powerpint and he would come back in 3 days saying "I've got an idea, I want to move this over a bit and put a film of us installing something". Remember this was 2001 and there was no YouTube and computers were just being upgraded to 64Mb of ram, 128 for system admin. The last straw was a situation whereby I now had an Apache webserver on my windows machine so that I could show him the site from his office. he had decided to find it himself and was shocked to find "all these lines everywhere", and claimed I had ruined it. What I had done is set the table borders="1" so that I could see what I was doing. The ensuing argument and the onset of the new course meant that I had to leave. I had some time to take stock, to play with the code snippets I had written and also took a placement at a graphic designers in Toronto. I spent the days either riding horses in the wilderness, or cropping images of elderly models in "middle-age wear". I spent the nights playing with what I could do with DHTML.

Basic Framework and Idea

I took another look at an idea I had for the manuals. It was to be able to paginate the manual but keep it in one file to be able to send to the customer via email. There were still plenty of people connected to the internet via a dial up modem so the size of the file became obsessively important and the original word or pdf documents "with images and screenshots" were just unfeasible. Split the site in to 3, a header a menu and content, using divisions, then Javascript would change the "visibility" of the div firstly to iterate through and hide them all, then to display the selected one. All code should be kept in the one file, HTML, JS and CSS. It took me a few minutes to play with sizes and come up with a working concept. there were 2 things added almost immediately,

1. The title text would be changed with the menu button using innerHTML('txt'),
2. A dynamic scroll bar would have to be added to the content div. This almost predated iframes which had just been introduced in ie5 i think, and scrollable divs either didnt work or couldnt be trusted with infinate z indexes etc.

Size and Movement

• The window needed to be a fixed size or risk losing control of the layout.

This point was a bit of a biggie because it defined much of the way the site was going to look. It was only possible to define the actual size of a window and set it to noresize if it was opened from a window in the first place using JavaScript and therefore had a handle to set variables. So a window slightly smaller than an 800x600 resolution (web stats told us that this was 45% of our visits) is opened and code written to it, including code to open further child windows. It was found that if I opened this window fullscreen, then resized it, I could essentially remove the borders and buttons and produce what I now know to be a chromeless window (function eventually blocked in an ie6 service pack). Using this method I could also position it where ever I wanted on the screen. So, with a few loops containing "(screen.width/2)-(window.width/2)" I could make the window smaller and position it in the middle of the users monitor before writing the code to it, playing with the speed and distance moved each time to make it look as smooth as possible. The original window would then either rewrite the dark screen with another link to slashdotslash with a HUGE css mouseover action, or it displays what some have seen to be a rude message about the sites incompatibility with other browsers. I may have to edit the original file to link to this text.

Cross Browser Scripting

At this point it should be stated that cross browser scripting wasn't the first thing on my mind. Internet Explorer 3, 4 or 5 was probably 97% of the market so there was no compelling reason to start checking for other browsers and doubling the filesize as well as the workload. Most people I spoke to did not see why anyone would want to install 2 web browsers so the only other options "Netscape & Mozilla" did not get considered. I had to wait for over a year to find someone with a Mac who would let me test it on there.

From here on in, it moved quickly, adding more content divisions with test data, then smaller divisions with dragging functions and close buttons, this led to the dimming function, i.e. if a smaller div was opened, the rest of the side got darker to improve the focal point of the readable area - again, another function we see commonly used today but done with better techniques. my way was to loop through changing the background colour of each div. The menu div with its buttons was going to fill up pretty quickly so after a little messing about, a number of invisible divisions with a higher z-index have mouse over functions to move the menu at different speeds. many people still think that this is flash, but the bad point is that the menu is written about 12 times in the final window so it will continually scroll, ..... until it stops. At the time I could not think of a way to make it continuous.

Now, the rewrite function to the new window was taking 3 or 4 seconds on my computer. Long enough for someone to hit the close/refresh or more importantly, go back to the original window. So on the buzz of the other animations, maybe an intro would work. I think that this is another style thing. some people think.... thought, that a welcome screen to a website is a good thing. Again, maybe I was just a little brainwashed by that boss, producing a title sequence to a tv programme. Looking for ideas, I found that IE contained some effects, some static, like a blur, some dynamic like a pixelated wipe. Another division was sized across everything else and it was fairly simple to write the text of www.slashdotslash.com and change the letter spacing, again in an iterating loop to reveal across the screen before pixalating and fading to the main facing site which would then paginate and scroll the title across the top. The computer generated sound of a womans voice welcoming you to the site was merely an afterthought using bgsound linking to a hosted mp3, again, IE only.

Content

The original purpose for this design was as an instruction manual which could be sent via email or included on a 3.5" floppy disk, but since I no longer worked for that company, I struggled to find content. Sure I could have filled it with "lorem ipsum" text but that was not only unimaginative, it would have actually taken up a fair amount of filesize. It was easier at the time to dynamically write rows of a table with different colours just to enable the scrolling functions. I was also aware that I was starting back at Uni, so his could well contribute to my portfolio, so I sorted through my backups to find what could be "plonked" in.

• Home (page 1) - 2 columns of buttons that could, in the future represent links to other things and a space for the welcome/explanation text.
• Local Pc Info - This page turned out to be quite handy for years to come. A list of the information which could be requested from the browser such as language, date and time, CPU class etc. Below this is a palette swatch that I used to help "that boss" choose his colours.
• Pages 3, 4, 5, 6, & 7 - simple fill. The dynamically written table with rgb backgrounds allowing the page to scroll what seems to be about 3000 pixels.
• page 8 - I'm surprised to revisit this and find it blank, I will look through and see what it was supposed to do, I dont remember leaving anything blank! (EDIT) after looking at the code, it seems i put a browser sniffer in there. if the browser was IE5 It would say IE5, if it was IE6 again, it would say IE6. as Im now in IE9 im not suprised it was blank ;) (/edit)
• Pictures - A child browser window which like most external content first asks that you connect to the internet before trying to access. Remember, this is the golden age of the modem. Once clicked, the code is written to the window to produce what is essentially a smaller copy of the site, with thumbnail pictures to the left which when clicked use element.InnerHTML() to write the code to bring the image to the right pane and write the title text. All the models were friends, maybe a little sexist all being pretty girls, but eye candy is not a bad thing, and they all gave their permission. I am also now married to one of them. the Alley was taken in my time in Toronto. Only the images and thumbnails are stored elsewhere, the code is kept in the file.
• Jukebox - this isn't mine, but I used it alot at the time. Ironically, today it doesn't even work, my IE9 warns me about media player being used, then reopens the site in the child window!
• Stusig - one of the modules I had done in the previous course was to evaluate branding. This is a very rough shockwave movie to produce an ident for Stuski Media. (I was known as Stuski when I worked in the pub for acting as DJ.)
• Animated titles - I had produced these gifs in Director for use with a previous incarnation of my website. Without a digital camera, I had taken a reel from my trusty old tape machine and scanned it, importing it in to Director then animating it with lettering. The conveyor belt always seems to make people smile.
• Contact - A child Division, so it is not only draggable, but changes colour of the site behind it. I no longer live at the address. It is possible to fool the dragging script by playing with the division around the edge of the window.
• Quicktime - another output of one of the course modules, I had chosen to look at phonetics in animation by animating a face talking. this movie has been encoded with Apples quicktime meaning that nowadays, you will need itunes installed to be able to see it. I do not use itunes. There is a link to apples website to install it if you want to. Scrolling down, there is a secondary button to open the history which I will explain in a minute. This also closes the quicktime link. Below this, is an iterating loop to write numbers from 0 to 999 with an "a1" suffix, followed by another space filling table. Remember, once I had written the script for the table, it was easy to reuse it.
• Embed I-frame. - This inline frame thing was new in IE5 and showed alot of promise. The frame would not be written until you had connected to the web and clicked, but links to the first incarnation of the site, the "self contained webpage" the source code makes for a much simpler interesting read. I did not intend to go mad with Iframes as it didn’t follow the "self contained" thing but I put it in to show that it could be done. It would also be good for linking to PDFs.
• Space Movie. - Another shockwave movie done around the same time as the others. Its painful for me to see this as its so rough compared to what I do now, but it is a fly though our solar system past Saturn, and the Moon, to Earth, across to Europe, the UK, South Wales through the clouds to Roath Park and in to the window of the flat I was living in at the time. The images were all taken from the web except for my flat, and the music is also mine using my guitar a delay pedal and some other effects.
• The card reader controller 200 - again, something I had done earlier, this shockwave movie is more complex than it appears because it actually works as an emulation of the actual physical unit. We used it for training, for example:- program mode, menu, press 1 for verify, enter, 1,2,3,4, enter and the unit tells you that that card will be active in both reader 1 and 2, press enter again and it will scroll through the card numbers.
• Viz Top Tips - Actual content. I cant resist these, they always make me smile. I still have a section on my current site for Viz Top Tips although I avoid any rude words, I think I'm up to about 450. one is randomly selected from a MySQL DB to be displayed on the front page.!

History

From the inception of the page, I kept a dated log of what I had done linked from the front menu. the date shown is taken from the files modified date, currently when the file was moved from Geocities to its current webhost. at the end, An IE function which would show the source of any page entered. It no longer works.

• 09/10/02 -- Had to put window chrome back in (resized full screen) due to service pack 6.1 not making this function possible anymore. (bloody Microsoft, always spoiling everybodys fun.) i will now have to re-think some things.
• 19/09/02 -- Debugged the filters by detecting ie version in primary write function inserting them only in 5.5 and 6 therefore ie 4 and 5 wont have to deal with the filters at all. To finish off the intro, the fullscreen now shrinks and positions itself in the center of the screen before the onemoment slides off.
• 17/09/02 -- I was playing with some IE5.5 filters, the "One Moment..." now combs off the screen, and the pages pixelate whilst changing. IE5 and 4 wont see the transition just the change.
• 14/09/02 -- Fiddled with titles to change the title with the page, it now slides off to the right whilst the new title slides in from the left each time the page is changed. Also added 37 Viz Top Tips on a randomised alert from the front page.
• 13/09/02 -- Reduced filesize by 33%!!!! by writing all scrollers from one function. File now 62k including content. takes less time to download but more time to render to screen.
• 10/09/02 -- Added colour generator on pc info window after discussion with boss about his request of "I want it red but not too red, maybe a hint of green."... he was serious.
• 09/09/02 -- Wrote and installed "PC INFORMATION" in page 2 and in an alert from the front page, hopefully this will diagnose any problems in the future with browser versions and plugins.
• 07/09/02 -- Changed visuals, colors, styles, and put menu button at bottom for user friendlyness. Reduced filesize by 10% by using smaller variable names!!!,, its just harder to code now!!
• 28/08/02 -- ActiveX highest z-index bug fixed by rewriting load button on div close Also added "Talking Character" Quicktime movie.
• 27/08/02 -- Added SPACE, MEDIALOGO and Nortech CRC200 shockwave movies with a plan to arange them later. Also fixed a few coding errors to show browser error if not IE.
• 25/08/02 -- Played with being able to display pictures and other files in the main window divs by overcoming ie5.5+ z-index bug but, movies and other activex need to be tried on another machine to make sure.
• 24/08/02 -- Self contained Website 2 months old, and although not completely self contained, still contains 97% of all script required (jukebox is on the server and shown in a frame), and therefore very quick to navigate through. also the single file is still below 99kb and can be opened in less than 20 seconds on a dial up.
• 18/08/02 -- Installed Jukebox for mp3 files and changed scroll divs to buttons. (still fitting the kitchen so im really busy again.)
• 23/07/02 -- Built and installed pictures subwindow to write and select pictures of friends using an array and an incrementing "for" loop.
• 20/07/02 -- Built and installed subwindow to display animated title gifs. the link to the pictures is dynamicaly written to d/l the picture on demand via the internet.
• 19/07/02 -- Started to put content in with the front page, the plan is to build the whole navigation site using script, and text but only linking to other files (images, flash, sounds etc.) by opening sub windows and writing the link dynamically. also changed colour to light and dark grey to contrast content.
• 18/07/02 -- Spent lunchtime removing window chrome, adding border and fitting a close button(been busy with other projects recently!)
• 08/07/02 -- Installed zoom intro and browser sniffer due to use of ie specific filters (non IE users will get a page telling them to use IE, non javascript users will get a page telling them to enable javascript and if opened within a frameset will show an error.)
• 05/07/02 -- Change all scrolling scripts to vari-speed (mouseover x5, mousedown x15) and put variable up/down scroll on navigation bar
• 01/07/02 -- Initial write to page functions condensed to a single write function, less render time and "empty container" file size is now only 27kb
• 30/06/02 -- Reducing file size by changing scroll code and css to variables
  (32Kb empty, with 6 pagedivs 3subdivs and 2 nested windows.)
• 28/06/02 -- 44.3Kb and now taking 5 seconds to render, so "one moment..." added. Removed context menu & added credit instead. had lunch, added 2nd sub window with linked image, and 2nd subdiv with different sizes to show flexibility
• 27/06/02 -- Added 3 more pagedivs and wrote functions to open & drag subdiv and dull main window.
• 26/06/02 -- Wrote functions to detect resolution and sizewindow, open "window 2" and sliding title. test print capability.
• 25/06/02 -- Divscroller written to each pagediv and whole script dynamically written to new page losing the address and toolbars.
• 24/06/02 -- Self contained page written with titlediv, navdiv and 3 pagedivs using visibility function

THE FUTURE

Well, technically the file has not been edited since 2002, I feel that although it's composition and presentation ideas may be artistically and asthetically ground breaking for the time, not all components were completely original and others were composing similar things much better around the same time. The programming is far from perfect and it would need a total OO rewrite to make it useful. So for now, its hosted along with much of my other work on the arse end of my webhost. The domain name along with *.net is paid for for a few years and set to autorenew but if pushed, I would probably sell it.

Related Works
(again, all Microsoft Internet Explorer 6+ only, other browsers will not function correctly.)

• 2002 -dynamic css editor
  
  Something I rustled up Xmas 2002 in Galicia, disconnected from the web. STUS STYLE EDITOR Ahn SELECT'N'EDIT WYSIWYG single-page interface website builder. Using right click button selecting the initial text and therefore the first division block, building blocks can be added, id changed and css styles edited to predetermined selectable values to eventually output the code for your html webpage. I think I later had plans to incorporate this in to the threecolors site. it's a little rough, but it can do some great things with filters and alignment using simple, scrollable dropdown options.
• 2002 - the coursework for my computing degree
  It is better if you open this fullscreen (F11). the dotmenu came from my tutors idea of a thought map. It became a place for all kinds of ideas. Some of the highlights are listed here.
• 2002 - Gif lighter animation interface
  I like this because of the programming behind the navigation. I will try and explain why later on.
• 2003 - Touchscreen word processor
  again, looking forward, this predates smartphones and commonplace touchscreen interfaces. key points are, Caps shift, delete button, and audible feedback.
• 2003 -Kris' student web log
  I like this, a single page application for a friend of mine to keep a blog of the Degree we were studying. A very clean design I thought. The data is kept in text files written by Kris and fetched using the Default Download method.
• 2003 - threecolors.com
  After my graduation, I helped Kris (a fellow graduate) build a website as a communal noticeboard. Maybe a natural precursor to facebook. This was written in almost a single page app style except for some of the admin section which used an iframe. This was the first time I had properly incorporated the new IE default download function fetching data from the server and displaying it without browser navigation. This is still fully operational in IE so if you would like access to login and browse around, then please message me.One of the benefits to the SPA style is that the music works. I hope these snippets don't cause offence.

After this time, summer of 2003, and creating the bones of stunix.com, I drifted away from internet explorer and javascript in general to concentrate on linux and bash with hopes of producing a small custom linux distro. The work is ongoing and running on arm processors.

If you have anything to say about it, good or bad, or have any questions, please use the messageboard located on the front page of stunix.com.