My Semester with TWC

My first semester at RPI is finally wrapping up!  I learned a lot in the past few months in all of my classes and an expecting A's in all of my classes.  My research this semester with Tetherless World Constellation is fun and challenging.  I came into the TWC looking to do some webdesign work, not so much for the Semantic Web.  I found a project that was looking for an undergraduate who would take on he battle of creating a new theme for their website.

As I understand it, my job was simply to create a new theme for TWC's website based off of Drupal, a content management system.  My only previous experience with webdesign was coding a website by hand using HTML, CSS, and JavaScript, or by manipulating an already existing HTML website using CSS.  Drupal was completely new to me and I feel very confident with what I have learned about it and how I have created the new theme.

To start, I created a medium-fidelity website mock-up of what the TWC website would look like.  Anthony assisted a little and gave some of his input on a few changes I could make to the site, but for the most part, I designed the entire thing myself and showed it Patrick, who approved the new design.

Now onto the difficult part--making the theme for Drupal.  First, I downloaded LAMP, the WampServer, and the files for a Drupal website so that I could play around with Drupal and practice making a theme.  I did a lot of research online and learned how to create a theme.  To do that, I had to change around the layout of the entire website using HTML.  In the HTML got rid of all the tables and made them into div's.  To style the layout of the page, I used CSS.  It was very straight forward and Drupal was responding positively to the changes that I made.

The problem I ran into was styling the aspects of the page that were created in PHP.  I had never worked with PHP before, so I thought the solution to the problem would be to edit something in the PHP file.  To my surprise, the solution was much simpler.  All I had to do was look at the page source of the website in my browser and see the elements that the PHP outputted onto the page and call the respective div's and classes in my CSS file.

Once I resolved the problem, finishing up the theme was quite easy.  At this moment, my theme is done and ready to be tested on the TWC test site.  I put a lot of time into this project and really touched every detail of the website to make it look the best I could.  I learned a lot and hope to work with Drupal again in the future.

Below is a screenshot of the (almost) final product:

Update #1

I've been really sick lately (with pneumonia), so I haven't had much time to update this blog and work on my research, but here's an update on everything I've done so far...

A few weeks ago, I got Drupal up and running on my computer, so I can start learning how it works.  I played around with a few things and realized how structured it was and how difficult it would be to create an appealing website layout with what I was given to work with.  I then looked up different websites that run on drupal, but created their own unique layout...and I realized that it was indeed possible to have an amazing looking website using drupal.  I researched how to create a drupal layout and began playing around with HTML in a few of the default drupal layout files so learn how everything worked.  I am still trying to learn how to create a drupal website from scratch.

One of the biggest tasks I've accomplished so far is creating a mock-up for the TWC website.  I wanted something professional looking, but streamlined/simple for functionality purposes.  Here are the first two mock-ups I made using Adobe Photoshop CS4:

 Mock-up #1

Mock-up #2

Mock-up #1 was deemed the best by Patrick West, and I agree.  I really love the color scheme I used in it and the flow of the page.  Also, I really love the "ribbon" navigation bar that I made.  It has been trending in a lot of webdesigns lately, and really pops off the page.  Websites also look clearer if they have a white background behind the content.  I added the rounded corners to everything to give it a softer look.  

I had to make a few edits to the mock-up, like moving around the log-in and search, adding another grey box, and adding more navigation.  I did run into a problem when adding the additional navigation links--there simply are too many!  To solve this, I'm going to group a few of the original links together, so that they'll have one "main" navigation link that, when you hover over it, produces a drop-down list with subnavigation links.  I'll most likely achieve that using JavaScript.  

Creating website designs and coding them in HTML and CSS comes naturally to me, but my next task is going to be more difficult.  After creating a live version of the mock-up using HTML, I'm going to have to recreate the mock-up as a drupal theme.  This is probably going to take a lot more time, and a lot more research before I can make it functional.  But I am really looking forward to the final product!

My first post

I'm sitting at the first TWC undergraduate meeting and I just made this blog. Yay!