This project started from an e-mail that I recieved from one of our High School Class officers. He was
interested in doing a site that would hold everyone's personal and additional information so that it would
be easier to contact everyone for the 5 year reunion that we have coming up. Being that I graduated with the
class of 2000 from Fairview High School
and that I love making websites, I thought it would be a good contribution for the class.
Before I started creating the site, I knew it needed to have a few things for it to work the way the class officer
wanted it to. Basically, there were two main pieces to the site; a message board where everyone from the class of
2000 could chat with each other, and a database that would hold all the information about each person. I knew that
the message board would be easy since many are open source and all I had to do was install it. The database
creation would be the part that would take some time to make.
After searching around, I came upon YABB (Yet Another Bulliten Board)
which was open source and used PERL as the main language behind the message board. I downloaded, installed, and
configured this bulletin board until everything was up and running. Now came the part that would take some more time.
Since I wasn't exactly sure what kind of information should be held in the database, I had one of my friends who belongs
to thefacebook.com tell me what kind of information that site
holds. The face book stores information on college students and allows
others to find out what everyone is interested in. After looking at the information, I figured that there would be four
sections of information: Personal - School - Job - Additional.
I now made up questions based on these four sections and created a form to fill out. After the person would fill out
the form, they would have created a username and password where they would be able to login and change their exisiting
information as well as being able to upload a picture for their profile. I used HTACCESS for the login part since I was
most familiar with that. Afer creating the register and login sections, I then created a page that displayed a
list of all the people who registered and another page that brought up each person's individual information. The site
was now complete.
One thing that I didn't mention was before I started this project, I wanted to do something that I never did before. I
like doing this since it helps me learn a new process or tool and will eventually make me stronger in the web area. The
thing that I chose to incorporate into this site that I have never had in any of my other sites was a Flash menu. Being
that I chose the 'Slant' font for the logo, I knew I would need buttons that had a slant to them. Also, our High School
colors are scarlet and gray so I thought it would
be neat to use those colors in the buttons too. I came up with the idea of fading between two colors for the button when
hovered over, so after creating a button in flash, then a movie clip for the frame detecting the hover, I used a shape
tween to fade the colors back and forth. I thought my final product turned out pretty well.
An example of the Flash menu I created for the fhs2000 site
The problem was that not everyone was able to see the menu since it was in Flash. If someone didn't have the Flash plugin
installed with their browser, they weren't able to see the menu. I searched around the web and played with some Javascript
Flash plugin detection scripts but found out that Javascritp can't include a file as the include function works with PHP. I wanted
to say - if Flash is detected, open up and spit out this file containing the Flash menu, or else open up and write the
non-flash menu. Since Javascript can open up and file and include it in the page, it can only reference it, I was stuck to
find another solution.
My next solution was to create separate images that when hovered over, would change to a black button and vice versa. After creating
10 separate images and testing it out, I wasn't pleased with the results because the text didn't show up the same as it did in the
Flash menu. Therefore, I trashed that idea and went to using an Image Map because I exported the Flash menu as an image. I knew
that I wouldn't be able to change the background colors of the buttons, but I also knew that the menu would work and look as
I wanted it to. Also, I would be able to experiment with an Image Map in html since I had never used one before but always
wanted to.
After some more researching on the internet, I figured out how to use an Image Map and to tell you the truth - it was pretty
easy. Bascially, you create an Image Map file which tells what kind of shape the link is, what page the link will open, and the
coordinates of the shape. Then in your html code, you can just tell the image to use the Image Map file. Below I have included a note
to myself on how I created the Image Map.
Notice the coordinates when hovering over the image map
By creating the Image Map, I knew that everyone would be able to see and use it without a problem. One thing
that I wanted to do was show how many people viewed the site during the day and compare it to yesterday's
number of views. This was simply completed by using three text files (today's views, yesterday view's, and
today's date) and updating them when need be. Now
the site was complete!
