Web design
This page sums up pretty much everything I've done in personal website creation. From 1998 to today, I've created several sites as a professional or for personal purposes. I divided the list of works below in several generations depending of the general coding method or the base design I used for those sites. These coding methods are described along with each subsection.
Note: On the following sites, I can either be found under my real name (Stéphane Lemay), or under one of the nicknames I've used over time.
Seventh Generation: mobile and templates
To detail...
Sixth Generation: PHP and clean-up
To detail...
Fifth Generation: XHTML and CSS
The latest step at this point: real use of XHTML and CSS for the whole layout. Tables were partly eliminated, replaced by CSS positionning. This set of websites also marks the time where, instead of just trying to get the pages to look good, I started validating the code using various tools from the W3 Consortium. To help with that, I've switched from HTML 4 to XHTML 1 and cleaned-up even more my coding. The end result is that those websites avoid the use of deprecated HTML tags, meant to disappear in the future.
The fifth iteration of Interordi.com came from a need of updating the codebase of the website as well as the need to update the various sections available. It made more sense to update the design all around instead of adding content with a not-so-solid layout. The text itself needed several updates, too.
This site has a similar layout to the fourth version after a quick glance, but several changes where done. The new bar located at the top of all pages helps visitors know where on the site they are, and to quickly switch between sections. Also, the page footer now proudly displays the W3C validation images as a result of having 100% valid code.
Note: Currently not available.
This website is another one created for a school assignment, the goal being to describe myself and my general experience toward computing. That content being very close to what Interordi.com aims to be, part of the material was integrated in the main site in the following weeks. This look at my previous projects was useful to sum up everything done so far and to determine where I wished to go next in web creation.
This site, just like the fifth version of Interordi.com, is made of completely valid XHTML 1.0 and CSS code. I've used the opportunity to attempt to create a nice looking style while using as few images as possible, while making sure that it didn't look empty and lifeless. The animation in the left menu is one of my first attempts at dynamic HTML.
Fourth Generation: CSS and CGI
Browsers like Internet Explorer 5+ and Netscape 6+ finally having a decent CSS support, I decided to start using it. CSS can simplify a lot the code of a page by getting rid of the repetitive <font> tags. I began using it to make website modifications more efficient, as changing one line of code could now alter all of the elements present on a page. The fourth generation marks the time when I learned how to code CGI scripts in both Perl and PHP. I only did an attempt with Perl, before moving on to PHP which is superior in my opinion. Those new languages are opening a whole new world of possibilities in web creation, and I began using that avidly. The use of Photoshop 5.5 and 6 allowed me to create much better looking graphics. This was also my introduction to Macromedia Flash.
A site that never was... Mega Man Battle Network World was supposed to be a site dedicated to the Mega Man Battle Network games, with detailed information on each game of the series. With the planned release date I originally set myself, it could have been one of the first on the web!
That's when I started using more CSS code to simplify the use of a single design on several pages. However, as I was still in the learning stage, it proved really difficult to keep the same look under Internet Explorer and Netscape. Due to those problems and a lack of time, the project got canned.
Note: the link given will send you to a subsection of the site, as the main page never got completed. Only a few pages were done, some of them being incomplete. I wanted to finish the design before creating the actual content.
This website was an assignement for a web programming class I had. The goal: make an interactive website where users could register, login and access a private area with additional information. An admin panel was available as well to manage users and such.
Instead of having normal tables to separate the menu from the content, this site used several tables with images to create the borders, thus creating a much better-looking effect. There was also a different image for the inside of the table cells. This is my first published site to make a better use of CSS, a SQL database and Perl scripts. The design was reused later on with some modifications.
Note: This website was made to work under PostSQL, and this web server doesn't run those type of databases, so some features are not working.
Immediately after doing Travail Pratique 1, I had to do this project. Now in PHP, this system was a fully-featured online store script. For my demonstration, I made a store selling various coins. The look was similar to TP1, but with different colors and without using images around the tables in order to make the code easier to read.
This was my first real PHP project, and it came out great. Member features such as registeration, login, logout and such were fully working. The left menu could also change depending of the status of the user.
Note: This website was made to work under PostSQL, and this web server doesn't run those type of databases, so many features are not working.
This new form of the Mega Man PC Website: Dr. Cossack's Lab can be considered as a direct evolution of the two above projects. It reused several elements of the design, like the use of two different backgrounds and images to surround the tables. The HTML code itself is much cleaner than before.
This is the current version of this website for now, and there are no planned changes as far as the design goes. However, several sections are now powered by a MySQL database instead of plain HTML, like it's the case for the links section.
Note: Currently not available.
In a very similar way to the Mega Man PC Website, Interordi.com moved to v4.0 with several improvements and cleaner code. Most graphics were redone to give the site a fresher look, and the structure of the site itself was modified. Now, instead of having several subsites with different looks, the same design was used in pretty much all of the minor sections. Larger sub-sites, such as the Mega Man PC Website, kept their own look.
That's where I started using PNG graphics instead of GIF. Being a lot more versatile and easier to use, as well as allowing more colors, it quickly became my default image format.
Note: the images and links aren't working properly because the site is dependant of it's location in the web server root.
Another website done as a school assignment, Intgration de l'informatique (Computing integration) is a site light on content as the focus was to use a set of given norms of presentation to improve the browsing experience. Things like a site map helped in quickly finding the content.
Even more than the norms, the major point of this small site was to experiment on how to integrate Macromedia Flash movies in a site. Two Flash files were produced for this assignment: the introduction banner and the navigation menu located at the top of all pages. This was my first use of Flash on a website.
Third Generation: Tables and Cleaner Code
Frames were getting tiring to maintain, and the move to a new host allowed me to use "Server Side Includes" (SSI). My first step was to get rid of those frames so that the whole page scrolls instead of just the content. It also helped making the pages compatible with smaller and larger resolutions.
One of the first sites to move over to the Interordi.com domain, it had a couple of improvements here and there over the previous version to make navigation easier. The left menu also featured image dots to clearly separate each item.
The frames were kept, but only for a short time: v3.0 quickly followed supporting a lot of changes, including the planned use of SSI.
Several months went by, my interests changed, so an update to Interordi.com was required. The main page was updated to reflect those changes. Gone was the GMC Team Place, replaced by the MTM2 Shrine.
The design of the page was altered so that all the image links would have the same style and size. Tables were also used to put some borders. The final look was a lot more pleasing to the eye than v2.0, where things were often misaligned.
Small and quickly done, this site was meant to become a place to display some information about my past and present ROM hacking projects. Due to time limits, it ended up smaller than intended.
Minor use of tables was done to display stats about each hacking project in a linear graph form. There wasn't anything much interesting to see design-wise, as it was put together without much thought. Further versions of this subsite used the general Interordi.com design instead of a custom one, so it fit better with the domain's theme.
The third version of the Mega Man PC Website was a MAJOR improvement over the older versions. A darker color for the background image made the text easier to read, and the left menu included some mouseover JavaScript just like the GMC Team Place first had.
It was my first attempt to use SSI instead of frames to include a menu bar. It allowed me to push the design farther, as I wasn't dependant of the frames anymore. Instead, a table tag surrounded all pages to separate the navigation menu from the content.
Note: the images and links aren't working properly because the site is dependant of it's location in the web server root.
Second Generation: Going Somewhere
The second generation was my real start in serious and dedicated web design. The use of Paint Shop Pro 4.12 to make graphics sure helped to make everything look better. The HTML wasn't 100% valid, but everything was looking fine under the versions of Internet Explorer and Netscape available at that time. I coded using similar methods for a long time. The use of frames made global updating much easier, with a single menu page requiring modifications instead of manual edit on several files.
I had some classes in HTML during high school, and I needed to build a site to be evaluated on my learnings. I was working on a big research project at the time, so I decided to reuse it's content and make an online version of my it.
First attempt with frames, it had a simple interface with a menu bar at the top. Tables were used whenever necessary, but the general HTML structure was kept really simple.
First website to really gather visitors, it had some... very flashy colors, to say the least. This site was the homepage of the IcU Team, which was a gaming team on the MSN Gaming Zone back then. This site stayed active for quite a while, and was a rallying point for the whole team.
What made this site interesting is the fact that all the text was available in both French and English. This was done using two columns of texts built with tables. That design was soon replaced with colors less burning to the eyes and easier to match with pictures and text.
The second version of the IcU website. Almost all of the pictures were redone, especially with new backgrounds. Content-wise, there weren't many differences, but it was a much-welcomed update.
Following after the v2.0 design, this was the final look of this website before it was closed in May 2000. The decision was taken to shut it down since the gaming team was falling apart. A few of us moved to the GMC Team (site below), but it never got really popular either. At it's peak, this site was gathering about 30 to 40 hits a day.
This version had a major difference over the previous ones: the English and French versions were split into two different sections. While it required twice the maintenance work, it was easier for English speakers to notice there was an English version available. For some reason, on the pages were both languages were available together, many failed to notice the English version at all.
First created to support a game I was programming back then, it slowly changed to become an all-purpose site about the Mega Man video game series. While that site didn't get many hits, the results were positive enough to push me farther in it's creation. v2.0 came after with several new additions and improvements.
This site had a simple yet efficient design using frames, making navigation easy and enjoyable. There was no need to hunt down whatever page you wanted: everything available was directly in the left menu.
Following shortly after the IcU Team's death, I created a new gaming team and placed myself at it's head. The creation of this site followed, still as a meeting place for everyone involved. It was short lived, though...
On this site also, both French and English text was present, with yet another approach: this time around, the paragraphs in both languages were alternating. The two columns of text required a lot of useless coding, and maintaining a double set of pages was too time-consuming for a single person. This website was also my first attempt at Javascript, with the buttons of the left menu lighting up when you moved the mouse cursor over them.
This website was made soon after I acquired the http://www.interordi.com domain. I needed a frontpage for the domain to link to everything. As such, I designed this page to introduce the other sections where the true content was.
It was my first attempt to do a site with a white background. The only background element is the left bar, to quickly indicate the subject of the page. An expansion for some other section was planned, but it was never done due to more time limitations. Finally, Franais et Anglais texts were both present on the page in the same way as the GMC Team Place.
First Generation: First Experiences
The first series of website I created were in fact my first attempts at HTML. I didn't have any classes in it, so the code was very basic. I did everything from the very start in Windows' Notepad, without the support of any website building tool. Most of the stuff here was lost in a computer crash in 1999, not that it was impressive to begin with...
The first one. Simple HTML everywhere, but it did use tables to help center a bit everything. It had pictures and a bit of information about the various Dragon Warrior / Quest games. A single page was rescued from the crash.
Another attempt that never got completed. This site was meant to become my personal homepage, a place to display most of the work I've done using computers (applications, websites, etc). The idea was rescued a few years later, in the form of Interordi.com.
The coding is once again very simple, with basic HTML tags. The pictures and some pages were lost in the computer crash of 1999, so this doesn't look much like the original version.