The Drawing Board

  by Logan Everett (E-mail Me)

#1 - The Inner Workings of Static Lounge


The site, which was originally called GeckoWeb, has had many recreations over the past year. For the most part, it was always devoid of content, though. This is about to change! Static Lounge will introduce editorials and special features, as well as sticking to the original purpose of this site: promoting my games.

A couple months ago I learned a new Web Development technique called Cascading Style Scripts (CSS) that allowed more control in the formatting of a web page. If you've ever made your own web page than you know that web development is much harder than desktop publishing. There are many more restrictions because HTML (The code used to create the page) is extremely limited. Also the two major web browsers, Netscape and Internet Explorer, often display things differently and the user's screen size and resolution always differ.

I think now is a good time to take a time out and explain the three main types of computer languages...

  • Mark-Up Language: This is the simplest type of language. Mark-up languages consist of "commands" that are put throughout a text document. A program, such as a web browser, reads through the document. Whenever it comes across a tag, it edits the appearance of the document somehow (Adds an image, underlines the text, etc.). Examples: Hyper Text Mark-up Language (HTML), Rich Text Format (RTF).
  • Scripting Language: This is the "middle of the road" language. A script is also held in a text file like a mark-up language. It also requires a program to run it, in this case called a "parser". The parser, which can also be a component of a web browser, reads through the script. However, the script is more complex than simple commands. It contains functions (a list of commands) and variables (pieces of data in the computer) that can be used to perform mathematical calculations and create loops that require user input. Scripting languages usually provide more control than mark-up languages. Most scripting languages are almost identical to a certain programming language, but require a parser to be run and are therefore easier to create. Examples: Javascript, Visual Basic Script, Cascading Style Script (CSS).
  • Programming Language: These are the real complex languages used for software. Programming requires the creation of a source file (usually text) which is then run through several programs, called a "compiler" and a "linker", by the developer which creates a stand-alone file (.exe programs). All software was developed with some form of a programming language. Examples: Java, Visual Basic, C++.

CSS, like most other languages used for the Web, was approved and standardized by a group called the World Wide Web Consortium (W3C). The W3C suggested that this new language, which supplemented HTML rather than replaced it, be used to achieve a higher level of standardization and control in web site development. This dream was never realized.

The main problem I ran into was that pages designed with CSS magnified the differences between Netscape and Internet Explorer. For example, borders around text would stick closely to the sides of a paragraph in Netscape. In Internet Explorer the borders would always extend to the sides of the page, regardless of the text's position within. I would include a sample, but that brings me to my other example. Tables (a technique used to create the links on the side of this page) seemed incompatible with some elements of CSS in Netscape. Any page that used an external CSS file (I'll explain that in a minute) along with Tables would cause Netscape to run an illegal errer and close. Every Time. And Yes, I did make sure to download the latest version before writing about this crucial bug.

There were benefits to CSS, mainly the external file system. It allows the developer (me) to create a single file with the ".css" extension. All the HTML files could reference this file. The practical use of this is creating a uniform look for all pages. Also, if I decide I want to change the color or font of paragraph text on all the pages, I just edit one file.

If I thought there was any hope of CSS improvements in later versions of the major browsers, I'd stick with it. However, from what I have read CSS evolved into something more complex called XML (Extended Markup Language is my best bet on the acronym here). I've yet to learn this new system, but I know that it is not yet well supported, either. Once it gathers more steam, I'll jump on the band wagon. Until then, it's straight HTML for me.

If I haven't already scared you away with all these fancy terms and acronyms then you are probably wondering how the site works now. Unless you've already looked at the source code, of course. When I abandoned CSS I was back to the drawing board, hence the name of this column. Basically, the stream-lined look comes from the artistic talents of our Graphics Editor, Cory Wilson. Whenever I start a new page, I create it from a file that already has the main interface in place.

The one remotely complex piece to this site is the image flip effect (the way the link pictures light up when the mouse is over them). This is created through some basic Javascript magic. Uh-oh, another big word. Javascript is a stripped down version of the Java Programming Language. It is primarily used to add a more interactive feel to a site. Scrolling text, image flips, and pop-up messages can all be done with Javascript.

I hope all you aspiring web developers learned a little something today. If you are interested in this sort of thing, then check out the Links Page for sites with quality tutorials.


Page Updated: 12/23/99