Websites I've Designed
path → / home / personal / websites /
I got interested in designing websites quite a few years ago, probably since the moment I discovered the internet, hehe. I started out using WYSIWYG editors, but then I got bored and frustrated with them. The coding of the websites always looked horribly messy, and I like things to be organized. So I decided to teach myself HTML. A couple of years after I mastered HTML I decided to learn CSS too because that way the files would be more organized and it would be easier to change the look of a website, without the need to go through every single HTML file. I've stuck with HTML and CSS ever since, coding my websites in plain text and validating them to make sure there were no errors.
Below are brief descriptions of the websites I've designed, with details about their creation, organization, etc. Click on the thumbnails to see larger screenshots.
Emily's Universe
[back to top]Let's start with my own personal website, "Emily's Universe". I'm obviously not providing a link to it because, well, this is where we are right now, hehe. These are the four major redesigns that the website has gone through, though I should note that there were minor adjustments done here and there that I won't talk about here.
Version 1.0 (image on left) - This was the first version of my website. I started writing it sometime in May 2003 and it went live on 3 September 2003. Notice the image background (the Hubble Deep Field) and how it makes it quite hard to read the white text. The buttons were all made in PowerPoint, and that little Puerto Rican flag at the bottom was an animated gif that would wave and wave and wave and wave. The area labeled "What's New in my Universe" is where I put various updates, comments and rants, in a sort of blog-like manner (but I hadn't even heard of the word 'blog' at that time). The updates just kept piling up there and eventually resulted in a VERY long main page. Also, all the files for the entire website were in the same directory, which made it incredibly cluttered. The first upgrade I made to the website was to create subdirectories.
Version 2.0 (image on right) - After reorganizing all the website files within directories and subdirectories, I made it so that every page was contained within a table (not every page was a table before, if I remember correctly). The table layout helped make the text more readable, since I moved the background image out from the main content area and into the header and side-bar. The "Update Archive" made its debut sometime between Versions 1.0 and 2.0, and when it started out it was just one single really really REALLY long page where I kept all the old updates after the main page got to be of a certain length. The color scheme is the same as in Version 1.0 and the buttons are still the same too. This update happened sometime during Summer 2004, if I remember correctly.
Version 3.0 (image on left) - After I started getting bored of the design and color sheme of the website, I decided to redesign it completely. The problem was, the website had dozens of pages, and changing each and every one of those files would take forever. This is the reason why I decided to learn CSS, so that the next time I got the itching to change the design of the website I would just need to edit one single file instead of dozens of them. The result was Version 3.0, which was nearly 100% W3C compliant, a fact that made me quite proud of myself. Everything was coded in plain-text and tested with various browsers on different operating systems to make sure that any rendering differences were not too drastic. The Hubble Deep Field stayed put as the background image, behind the lighter-colored pink-ish content boxes. A path was added at the top of each main content area to indicate the location of the page within the hierarchy of the website, an idea that I got from John's webpage. And the "Update Archive" became a subdirectory with this redesign, which made it a lot easier on the eyes because it would no longer be a single gigantinormous page. This design went online in March 2005.
Version 4.0 (image on right) - This, the fourth overall redesign, is the current appearance of my website. I started thinking about this design during the Fall 2005 semester, after I finished designing the Grads' Web Resources page, but didn't start working on it until mid-2006. It was originally supposed to debut sometime during 2007, but because of migraines and research the website redesign project took a back seat and got delayed by a year. It finally went live on March 2008.
This design is quite different from the previous versions. Notice how the home page is a lot shorter than it used to be. This is because I moved the updates away from the main page and into their own separate area, thus allowing the main page to host only essential information (who am I, what the page is about, a picture of me, etc). This new design is also of fixed-width, to allow the page to be contained by the header image and the footer image (both of which were created using Keynote and GIMP). The background image, sitting behind the main content area, is now the Hubble Ultra Deep Field, which keeps my universe theme but updates it with newer data.
The coding, both for the HTML files and the CSS files, is also more structured and organized, which can be noticed if you look at the page source. It is still written in plain-text using Emacs (carbon package), and it's been tested with Firefox, Safari, Opera, Camino, Lynx and elinks on Mac OS X, Internet Explorer and Firefox on Windows XP, and Firefox and Konqueror on Ubuntu Linux. There are almost no differences in the way the website renders in the different browsers and operating systems (and the very few differences that exist are quite negligible), so I'm very happy about that. The entire website is W3C compliant, both for HTML 4.01 Strict and CSS.
Finally, this version has a completely new feature that I had never tried before: there are three different stylesheets. The three stylesheets are identical except for the color scheme. The Burgundy Color Scheme, which consists of different shades of burgundy/red/pink, can be seen in the Home Page, the Contact Info page, the Site Map, the Personal pages, the Pictures pages, and the Links pages. The Blue Color Scheme, consisting of different shades of blue, can be seen in my CV page, the Research pages, and the Teaching pages. And finally, the Purple Color Scheme can be found in the "Update Archive", which has now been officially promoted to 'pseudo-blog' status. It was quite a bit of work figuring out the perfect combination of shades for each color scheme, but I think it was well worth it because they look really pretty.
Grads' Web Resources
[back to top]
The Grads' Web Resources webpage came into existence as a way to have a centralized place for various useful web resources for the grads in the Department of Astronomy at Penn State. The two-column, fixed-width design was my inspiration for redesigning my own website. The banner image, including the cool-looking shiny text, was created by John Wise using GIMP. The page was, as always, written in plain-text and is W3C compliant. The page went online in September 2005.
The page has links to the website of Penn State University, the Department of Astronomy, the Graduate Studies page, the Graduate Student Handbook, and the list of recent PhD graduates. The page is also the central hub for various web resources, such as the Grad Bios pages, the grad calendars, committees and grunch schedules, the South Park picture gallery, and a page with help on writing a thesis.
Grad Bios
[back to top]
The Grad Bios webpage is a compilation of short biographical sketches of the graduate students in the Department of Astronomy at Penn State University. The page used to be maintained by Michele Stark when I arrived at the department, and I took over it near the beginning of the Fall 2004 semester. It used to be just one really long page, but when I took over I redesigned and reorganized it such that there are now separate pages for each grad year, and even a page for recent PhD graduates and former grads. The layout was first done using tables, but after I learned CSS I took out the tables and replaced them with CSS while keeping the same color scheme and general appearance. As of the Fall 2007 semester I am no longer the primary caretaker of the page, when Jian Wu took over the webmaster duties for the Grad Bios and Grads' Web Resources pages.
PSU Thesis Files
[back to top]
The PSU Thesis LaTeX Class Files and Tips for Astro Users page was created by Michele Stark many years ago, with the intention of having a central place with all the LaTeX files necessary and required for writing a PhD thesis in the Department of Astronomy at Penn State.
The original page was copied over to the Grads' Web Resources website in September 2005, and a few months later I redesigned it using CSS while keeping the content intact. The design and content of the page have stayed the same ever since, and will probably continue unchanged unless there's a need to update one or more of the thesis files (for example, if the thesis requirements change or if new requirements are added).
SPS - RUM
[back to top]
The webpage for the Society of Physics Students at the University of Puerto Rico, Mayagüez Campus ("Sociedad de Estudiantes de Física del Recinto Universitario de Mayagüez") was the very first website I ever created. I had recently become interested in web design when someone commented that our SPS didn't have a website, so I volunteered to create one. The first version showed up in 2001 as a horrendous Yahoo Geocities page with lots of animated gifs and sparkly things. Then, after we got some space in the department's web server, I redesigned the page using another WYSIWYG editor. Eventually I learned HTML and redesigned the page all over, writing the code myself in plain-text. The screenshot seen here is for the last version I managed, in 2003, which was hand-coded in HTML and still had animated gifs and a scrolling marquee at the top. Someone else took over the website after I graduated, but eventually the page was left behind and forgotten, and now it doesn't exist anymore (or at least I'm not aware of it existing anywhere).
Last Updated: 2 March 2008
