Web Developer

Jonathan Durden
Spring 2011 Intern

1
Project report
Project summary
For my GTP individual project my task was to design an all-new, modernized website using Drupal 7. I worked
with Eric Bogert and was assisted by Tyler Williamson. Eric is a sophomore Management and Information Systems
(MIS) student and Tyler is a senior MIS student who built the original website. Specifically, my tasks were as
follows:

• Incorporate RSS feeds into the website.

• Find a thermometer/gauge to show how far we have come with fundraising.

• Create a map showing where GTP is located throughout the world.

• Finish building the site by the end of the semester.

Goals: My goals were to research and implement all the tasks listed above. Our goal for the website was to
actually have it finished by the end of the semester and ready to replace the old site, but unfortunately this goal was
not reached due to technical difficulties, time constraints, and missed deadlines. Eventually, I created another goal
for myself and I took on the job of repairing the homepage and setting up the drop-down menu navigation.

Action plan
We began the project by scheduling an initial meeting with Marisa Drexel, the Associate Editor of GTP, and
Tyler Williamson, Web Master, to discuss plans to improve the site and to divide up the necessary tasks between
Eric and myself. Marisa provided samples of websites she liked, and explained that she wanted a site with a more
modern look. Specifically, she requested that we include RSS feeds and drop-down menus. Tyler recommended
several themes and modules that would aid us in building the site. He suggested that we use the “Bartik” theme
because it is easily customized to accommodate different layouts. He also recommended that we use the “Superfish”
module to create drop-down menus and the “Rotating banner” module to create an embedded slideshow within the
website.

Before I could do anything with the site, I had to learn how to use Drupal 7. I had previous experience working
with Wordpress, but Drupal is a more robust and more technical content management system (CMS) which is not
nearly as user-friendly as Wordpress. While many of the core principles remained the same, for instance, the
process of creating pages and navigation bars, the steps taken to complete these tasks are different.

Drupal also implements a “block” system for styling webpages, whereas Wordpress confines you to either editing
the code by hand or choosing a different theme. Blocks are similar to the blank spaces in word processing templates
that allow you to simply fill in information without worrying too much about formatting. They are sections of the
website defined by the site's theme which allow you to organize content.

I also found it difficult to implement the drop-down menu system. In Wordpress, drop-down menus are made
by simply assigning pages to “parent” pages. In other words, you denote that a page is a subpage by giving it a

2
“parent” page. This concept is essentially the same in Drupal, with the huge exception that not all Drupal themes
come with the built in ability to handle drop-down menus.

After I familiarized myself with Drupal, my next step was finding an appropriate theme. Our initial theme,
Bartik, had the previously mentioned issue of not including drop-down menu compatibility. We did not want to
search for a different theme because Drupal 7 had been released quite recently and it was difficult to find
compatible themes. Our solution to the lack of built in drop-down menus was the Superfish module. It was
supposed to allow us to create drop-down menus, but unfortunately it did not work as expected and actually wound
up causing significant delays in work because Eric made a mistake while setting it up. We decided to change to the
“Corolla” theme because it offered many of the same options as Bartik in addition to built in drop-down menus.

After choosing a theme, I went online to the Drupal website to learn how to add RSS feeds to Drupal sites.
Fortunately, Drupal has an “Aggregator” module built into its core programming that automatically creates an RSS
feed for you. Adding a feed to the website was a simple matter of typing in the RSS URLs into the module and then
assigning the resulting feeds to the left and right sidebar blocks within Drupal. There was one problem: the RSS
feeds were not showing up at first because they had to be refreshed manually after being typed into the Aggregator.
In other words, the feeds did not show up because they had not been downloaded yet.

The next step in completing my assigned tasks was finding a fundraising thermometer. This was the easiest task
so far—simply searching Google for a basic embeddable and editable thermometer yielded solid results. However,
all the thermometers I found had a white background built in. This was annoying because it restricted the colors we
could use for our sidebar to white, because otherwise the image would not blend in effectively.

My last goal was to find or make a map that highlights everywhere that GTP is located. I could not find an HTML
map like I did with the thermometer, at least not one that met our needs. There was a map that allowed you to
highlight specific countries, but this misrepresented the size of our operation. I decided that editing an image of a
world map would be the easiest way to go about solving this problem, but I needed an open source image editor that
would allow me to use layers. I decided to use GIMP because it has many of the same features as Photoshop, but it
is completely free.

Finally, I went beyond my assigned tasks and worked on fixing the website's homepage. Eric made a mistake
when attempting to implement Superfish, and as a result decided to delete all the content pages on the site in order
to start over. This resulted in a broken link between the homepage and what Drupal believed was the “front page”. A
broken link occurs when a hyperlink cannot find the file it is supposed to connect to, usually due to the connecting
file being deleted or renamed. Even though Eric created new content pages after deleting the old ones, they were
assigned different names, so they no longer corresponded with the old links. I fixed this by clicking on
“Configuration” at the very top of the developer navigation bar, and then “Site Information”. There I changed the
old “front page” link to the new one.

Results
I set up the RSS feeds, found a thermometer, and created a map showing off GTP's global presence. The website
is not yet complete. We have a framework set-up that will allow us to begin moving content over from the old site.
The site is starting to look far more modern due the inclusion of drop-down menus, dynamic RSS feeds and the
image sideshow.

3
 Best practices
Three basic practices you should follow when building websites are as follows:

• Adhere to deadlines.

• Fix your own mistakes.

• Communicate with your team.

One of the best, and most overlooked, practices for web development is good teamwork. When working on a
website as a member of a team, it is very important to adhere to deadlines. Web building is a cumulative process—
you cannot begin adding content to the site if the drop-down menus have not been setup. It is also important to
keep a backup copy of your Web files, in case you accidentally break the website and you are not able to figure out
how to fix it.

One of the main reasons we were held up on the site was due to deadlines not being met and the link to the
homepage being broken. It took me a week to figure out this was the issue, because of lack of communication about
the problem. It is often much more difficult to fix someone else's mistake. This is due to the small details that are
often left out when asking the individual what happened in the preceding steps leading up to the error. These small
details can make all the difference when searching for a solution. Basically, it is a best practice to fix your own
mistakes in a timely manner and not leave them for someone else to puzzle over.

Communication is also important when site building. When you make significant changes to the website, it is a
good idea to send a list of the changes you made to your partners. This way, the team can avoid confusion and
ensure that everyone knows what still needs to be done to the site and what does not. Some website changes are
obvious, some are not. For example, with some modules, the only way to know that they have been installed is to
check the list of installed applications. It is more convenient and more practical to keep a running list of changes to
the site as they occur.

Recommendations
The site still requires a lot of work before it is anywhere near complete. The following steps should be taken to
finish up the website:

1. Decide how much of the old content should be kept from the original site, and start copy-pasting it over.
Also, decide how the sub-menus should be organized.

2. Include a contact page, login page, and whatever header/footer information is needed.

3. Add relevant pictures to the slideshow widget. Also consider modifying the widget to serve as the basis for
the “featured book” section. Consider uploading book covers as images and convert them to buttons that
would allow the end-user to download the book by clicking on the corresponding image.

4. Find someone who understands how the book database works to connect the database to our new site.

5. Overhaul the site's appearance. Enlist a graphic designer to help create a banner and coordinating colors
for the different sections of the site (header, body, sidebar etc.).

6. Install different modules as needed. Look into search engine optimization (SEO) techniques and apply
them to help generate more traffic.

4
 7. Finally, move the new site over to the old site's domain.

Resources
Name Title/ connection Organization Contact info

Tyler Williamson Web Master UGA tyler.w.williamson@gmail.com

Eric Bogert Website Developer II UGA etbogert@gmail.com

5
 Appendix A: GTP portfolio
Introduction
The following images were taken from both the original GTP website and the website that is under development.
I chose to display the banner and the main content page from the old site and the entire front page from the new
site. Notice the number of links on the original banner as compared to the navigation bar on the development site.

Before:

Exhibit 1: Banner.

The original navigation bar contains nine links. Some of the pages contain very little information and can be
condensed into other parts of the site.

Exhibit 2: Body.

The main content page is static, with pictures that have not been recently updated. There is a facebook button,
but it needs to be supplemented with other social media links.

6
 After:

Exhibit 3: Banner and body.

There are several new features in this image. There are RSS feeds on either side and a fundraising thermometer
on the left sidebar. The top navigation bar has been reduced to four tabs and given a drop-down menu system.
Finally, we have a slideshow to feature our images on the front page.