Directory
This is the directory page. From here you can navigate to several different versions of my homepage. I wrote these older versions as I learned HTML, XHTML, CSS, Javascript, and Ajax and they showcase what many of these technologies add. Please have a look around, but realize that I only keep the last version up to date.
Simple HTML - is a very basic html page
XHTML/CSS - is written in several XHTML pages all formatted with CSS.
Javascript/DHTML - is one page which hides the information that isn't supposed to be displayed.
Frames - uses frames to form the header, sidebar, and main section. Only the main section gets reloaded on a page request.
Ajax on init - uses Ajax requests to read all of the pages and store them in an array when the page loads.
Ajax on click - sends Ajax requests to read a single page whenever a link is clicked. The pages are not stored in an array
About the Versions
Simple HTML
This page was written in very basic HTML. It has no style or coloring. It is also the simplest version that one could write. To write a page like this, one needs to know only 8 or so HTML tags and a way to get files onto a server. Only create a page like this if you are just beginning to learn HTML (we were all there at one time) or if you do not care about having an organized and friendly page. These make acceptable assignment or document sharing pages for students and friends, but are unacceptable beyond that use.
XHTML/CSS
This version is worlds ahead of the simple HTML page before it. There are two main differences. First, the page was designed and colored with some basic CSS. Then it was broken up into several different pages with links connecting the pages. I included the XHTML because if one is going to write "good" HTML, it might as well be standards compliant so that it has a good chance to work in many browsers. This version introduces the concept of separating structure from design (the XHTML and CSS, respectively). I think that this is a great concept to follow, especially for larger websites.
There are a few drawbacks for this version. First, the header and sidebar must be replicated in every page. This means that if I wanted to add another link to the sidebar - like "Work Experience" - then I would have to add code to each page to update the sidebar. Also, the entire page must reload each time I click a link instead of just the main page reloading.
This version is acceptable for small websites that aren't going to expand very often. It is probably an acceptable version for a personal website like mine. Larger, more dynamic websites are going to need something more advanced, however.
Javascript/DHTML
This version is the simplest solution that utilizes Javascript. What I did was, I combined all the files into a single, large HTML file and separated them into divs. Then I used Javascript to show and hide the divs when a link was clicked. What I like most about this page is that there is virtually no wait for a page when a link is clicked. The downside to this page, however, is that it would be nice to have the pages in different files for organizational purposes. Also, the back button doesn't work as expected (I consider this minor and am told that with much coding, it can be fixed). Overall, this version is cute, but I wouldn't use it for a "real" site.
Frames
This version of the website was surprisingly easy to design. It also makes up for the main shortcomings in the XHTML/CSS version of the site. It is better because the header and sidebar exist in only one page (so updating them would be easy), and because only the main portion reloads when I click a link. Overall, it was a very good version for a small website like mine.
There are a few shortcomings when using frames. First, the code for the frames (including their position and behavior) is included in the HTML, not the CSS. This isn't supportive of the "separation of structure and design" concept. Also, complicated pages would require many files just to determine the layout of the frames, wherein it would be nice to determine the layout in a single file. Overall, I think that larger sites shouldn't use frames, but that they are versatile enough for smaller sites. Personally, I think that frames are the best solution for a personal website like mine.
Ajax on init
This is my first attempt at using Ajax for the page. I use the term Ajax loosely, however, because this version only uses a request on the page load. What happens is: on the page load, each of the pages are read from their files and stored in an array. Then, whenever a link is clicked, the HTML for that page is set inside the main div using "(the main div).innerHTML = (text for page)". The nice part about this is that the html doesn't need to be requested each time a link is clicked (although the images are). Also, it allows the separation of structure and design, which is nice. On the other hand, loading all pages at the beginning may not be practical for some sites because either the pages are too large or because they change with user input (few PHP pages could be accessed this way). Also, if the page is going to be read before the user clicks on the link, then it would be nice to have the images (and maybe sound files, etc.) read as well so that the images appear immediately when a link is clicked. This can be implemented, but it will take more coding.
Ajax on click
This version was made mostly as a comparison to "Ajax on init". In this version, an Ajax request is made only upon clicking a link. This page works very much like the Frames version, but allows for separation of structure and design. It has most of the drawbacks of "Ajax on init", but doesn't include the problem of reading too many (or too large) pages all when the original page loads. It does, however, have a longer page load after each click. Overall, it isn't bad but work can be done to make it better.