2010 redesign

The loose ends

Posted in backend, coding, design, organization, research by Owen on May 15, 2010

I’ve received some feedback from users now, and made my own notes as I’ve used the system, so I have some of these below. Additionally, its a good idea to go over all the code, including CSS, and add comments while its still fresh in our minds. This shouldn’t take long, we just need to address blocks of code or lines that aren’t already commented and look like they need some explaining! Feel free to contribute anything else we need to make this live!


– Add a sitemap. ___Beth + Owen
– Add titles to all links. ___Owen
– Create class to show external link icon (like wikipedia). ___Owen
– Add search function. ___Owen
– Add CDATA to all javascript tags. ___Owen
– Switch 1000px width to 980px. ___Owen
– 301 .htaccess redirect and make new site live. ___Owen


– Emails don’t seem to be received by comcast users. Research and find out what we might change. ___Beth
– Add upload image feature to application form (to become default feature image). ___Owen
– Convert new emails and domains to lowercase. ___Brittany
– Remove trailing slash on domain names… see: ___Brittany
– Add headers again after so many members… _____Brittany
– Add language/code to encourage adding a short statement. ___Owen


– Clean-up member review page. ___Beth
– Add number of files and number of tags to list of members. ___Brittany + Braylin
– Add an “Are you sure?” page to the delete member button. ___Brittany
– Add ability to order members by date joined (add column) vs. last name. ___Brittany + Braylin
– Keep track of whether or not members pay monthly or annually. ___Brittany
– Add icon for view member profile as well as domain. ___Owen
– How can we make sidebar “site administration” links for admin work better? Add icons. ___Owen
– Add FTP link in admin dashboard See also ___Owen
– Different color for pending, approved, active, and inactive members . ___Owen


– Make an infographic for the settings page, to show how DNS, webservers, FTP works. ___Chris
– Copy functionality from tags to let users add events? ___Braylin
– Change file to gallery on member dashboard home. ___Owen
– Use first member image for feature by default. Inform member this image will be used as thumbnail too. Save new version of first image when uploaded. ___Braylin
– Member subaccount shouldn’t show plesk username/password. ___Brittany
– Research and find the best date/time selector. ___Beth
– Add FTP link in member dashboard See also ___Owen
– Add external links icon (like wikipedia) esp for pages in member dashboard. ___Owen
– For settings page, show user data as form field, click and it highlights. ___Owen
– Language should be added to encourage adding images. ___Owen
– Add feature image to home of member dashboard. ___Owen


– Make events page. ___Braylin
– Change all titles (including Support topics) to sentence case. ___Owen
– Show abbreviated statement on their page, with a jquery toggle to show all (pushes down). ___Braylin
– If statement to determine location still spits out “in ,” ___Braylin
Some images have not been carried over. Check to see if others have. ___Owen
– Clean-up and move Add This button. ___Owen


– Hook events to events table. ___Braylin
– Add jquery image sliders to feature box images. ___Owen
– Hook feature box images to db. ___Owen


– Add comments to all CSS and PHP files. ___Everyone
– Validate everything. ___Everyone
– Get browsershots of example pages. ___Beth
– Make fixes to design based on browser shots. ___Beth + Owen
– Add validation links to footer. ___Beth


– Add buttons to admin to remind pending members they have been accepted.
– Auto email members who have not added images/tags/feature image/events or have not visited in a while.
– Let them update email preferences.
– When someone creates an account with the same name (different email) for a different domain, then the new member script/admin email (confusingly) gets the user by the site url (fname-lname) which actually is their first account. Should get them by email address. ___B&B
– Add jquery email sign-up form. ___B&B
– Server/FTP account integration using Plesk API. ___B&B
– Merge events with a general feed and call it announcements. ___B&B
– Add more support articles and ways to tag/search/sort them.
– PayPayl / Google Checkout API integration. ___B&B
– Member feed / change “events” to “announcements.” ___B&B
– Plot announcements/events on map. ___Owen
– Google Map API / geocode members. ___Owen
Move to new server. ___Owen
– Integrate CMS for user websites.

Comments Off on The loose ends

CSS + Image Sizes

Posted in coding, design, organization by Lin on April 4, 2010

Here is the master list of all hexcodes and image sizes we are currently using:

CSS Hexcodes

  • 000000 black
  • FFFFFF white
  • c53232 red (links, notice)
  • aa0000 red (links, notice, form stuff, etc)
  • 5e5e5e footer gray
  • 666666 header gray (menu & subnav text)
  • dddddd dark gray (message boxes in feed, input background)
  • 999999 medium gray (visited links)
  • ebebeb light gray (input focus, img border, border-tops/bottoms)
  • aaaaaa light gray (cutetime, form border)

Image Sizes/Dimensions (in pixels)

  • 175 x 109 (header logo)
  • 100 x 63 (footer logo)
  • 618 x 360 (feature banner image)
  • 238 x 138 (feature box thumbnails)
  • 353 x 206 (feature side bar image)
  • 353 x anything (sponsors full ad size)
  • 69 x 80 (portfolio thumbnails)
  • 618 x anything (portfolio full image size)
  • 150 x 110 (community thumbnail)

* Image sizes account for 1px border.

Tagged with: ,

Comments Off on CSS + Image Sizes

Version Control with CodeIgniter

Posted in backend, coding, organization by Brittany on April 3, 2010

When it came to redesigning, we had a problem with the base_url() function regarding assets. Eventually we want to convert the v1 directory redirect to just a root url with the contents of the v2 directory in its place. Long story short, we found Shawn McCool’s lovely article on managing assets with CodeIgniter and followed his tutorial. All you have to do is add his path_helper file, autoload some helpers, and edit the applications/config/config.php file. Instead of using his function as asset_url(), we took it a step further by making it a version_url(). So our config looks like this:

$config[‘base_url’] = “”;

$config[‘version_path’] = ‘v2/’;

So now, whenever we call version_url(), we generate the base_url with the version_path. Below is an example of how we are linking an asset (replace parenthesis with correct php format):

<script type="text/javascript" src="(?php echo version_url(); ?)assets/js/validation.js">

Tagged with: , ,

Comments Off on Version Control with CodeIgniter

Stages of Functional Boxes

Posted in coding, organization by Lin on February 21, 2010

Controller Nav

  • Stage 1: Empty links or links to static pages and functional Google search bar.
  • Stage 2: Working “Login”. Include member name, “Edit”, etc.
  • Stage 3: Some drop-down menus?

Featured/Events Big Image

  • Stage 1: Different picture upon refresh with overlapping div. Div will have transparent gif as background and text based on pic?
  • Stage 2: JQuery effect, control arrow?


  • Stage 1: Each link to static page or email client?
  • Stage 2: Drop-down menu that covers other content.
  • Stage 3: Drop-down that dynamically moves other content down?


  • Stage 1: List of a couple events in sentence form, maybe pictures? “View All Events”.
  • Stage 2: Calendar view using HTML and maybe JavaScript.
  • Stage 3: JQuery calendar.

Three Boxes

  • Stage 1: Content different upon refresh?
  • Stage 2: Numbered links below boxes, pagination?
  • Stage 3: JQuery cycling or fading.


  • Stage 1: Static images with links and “View All” if necessary.
  • Stage 2: JQuery vertical carousel or some fading effect?

Site Feed

  • Stage 1: Avatar, name, maybe date, and comment in separate div with border. “View All” if necessary.
  • Stage 2:  Include site stats. Apply comment div with an image border that changes size dynamically, perhaps change color depending on membership (admin or regular)?
  • Stage 3: Include member actions (“updated profile”, “added an event”, etc). Cute date. JQuery again.

Member Page

  • Stage 1: Member info, portfolio (w/ individual pages), and feed. “Share and Follow”.
  • Stage 2: Add comments and view count to individual image/video pages.
  • Stage 3: JQuery…
Tagged with: , ,

Comments Off on Stages of Functional Boxes

About The Team

Posted in backend, coding, design, organization, research by callibeth on February 15, 2010

Aggregated information for the “About The Team” page. Chris, I haven’t received your information yet.

Brittany Morales
I am currently a senior at Florida State University. My major is Studio Art with a concentration in Graphic Design and Web Design, and I have a minor in Film Studies. Writing good code makes me happy.

Braylin Morales
I am a senior who is graduating in May from Florida State University with a Studio Art major and Film minor. I enjoy using Adobe software to create graphics for just about anything. While in college, I found a hobby in website coding and I have been learning more about web design ever since.

Owen Mundy
Owen Mundy is an artist who works in photography, video, and digital media. He completed the U.S. Navy’s Defense Photography program (1994), has a BFA in Photography from Indiana University (2002), and an MFA in Visual Arts from the University of California, San Diego (2008). He is currently based in Tallahassee, FL and is an Assistant Professor in the Department of Art at Florida State University.

Beth Lee

Beth Lee is a graphic designer focusing on web design and commercial lettering. She will graduate from Florida State University with a BFA in Graphic Design in May 2009.


Tagged with: , , , , ,

Comments Off on About The Team

Database design – front page

Posted in coding, design, organization by callibeth on February 5, 2010

Brittany and I collaborated on to design the database structure needed for the front page of the new design. Link to the design is here:

If you want to join the collaboration, sign up at, let us know your username, and we’ll share the document with you.

Tagged with: , , ,

Drupal: an overview

Posted in backend, coding, research by callibeth on January 31, 2010

I’ve been struggling to learn the Drupal framework for the past 3 weeks, and, on the whole, I’m impressed. It’s a substantial framework, and quite complicated, but it’s flexible and powerful. Separation of content and structure and presentation is a priority of the Drupal designers.

The White House website runs on Drupal, and so do the websites of The United Nations, Forbes, The Grateful Dead, and The Onion, among others. Links to well-known Drupal websites are listed in this article, which also explains some of the features of Drupal in the section “10 Reasons to Use Drupal”:

I’ve found the vocabulary a little confusing. As a matter of fact, the word “vocabulary” is used in Drupal to mean a set of categories, and the sets of categories make up the taxonomy of the system. I’m not convinced that the taxonomy is so much better than WordPress, given its comparatively complicated nature. Or maybe I just don’t understand it yet.

There are modules which add functionality to the Drupal framework. Various image modules manage the uploading and storing and access of images, including automatic thumbnail generation. The Content Construction Kit allow you to create your own custom content types. Each time you post a new Page or Story (which, along with Image, are the three core content types), you can choose whether to promote it to the home page, whether comments are allowed (and more options within that), you can choose an Image to associate with the page.

I’m still partial to CodeIgniter because of its clarity, while recognizing that Drupal is more fully developed as a CMS. Drupal requires that you wrap your head around a fully implemented system whose underlying code is relatively opaque. There’s a good article here that compares WordPress, Drupal and Expression Engine (which runs on CodeIgniter):

Comments Off on Drupal: an overview

jQuery: What the web needs

Posted in coding, research by Brittany on January 29, 2010

According to the official website, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

For the” I-want-it-now” phase in technology, I believe jQuery is the ultimate answer in advancing the idea of what a web page can accomplish in a matter of seconds. There are some developers that look to Twitter as a major step in revolutionizing the way we can do web design and development. Interestingly enough, a lot of jQuery tutorials boast being “Twitter-like.” Here are some links to handy tutorials:

The real beauty of this language is that it can be adapted to any framework that’s out there. Jigniter is a cleverly-titled website that provides information on combining CodeIgniter with jQuery. Along with tutorials, they have a nice list of recommended books to read for those who want to have a break from the computer. As of this post, I’m unaware of any other websites that are completely dedicated to one framework/CMS and jQuery integration.

Tagged with: ,

The backend: How will we power our new website?

Posted in research by Owen on January 24, 2010

Now that we’ve started talking about what functions we need we can move on to discussing how to make this all happen. There are lots of Content Management Systems (CMS) out there, but rarely do you find one that at its core has all the things you need. Usually, you have to consider the extensibility of the CMS. By extensibility we mean, “how can we extend it by adding features to the core functionality?” Sometimes its easier to code it yourself, or use a helper library, also known as a framework.

Below I’ve linked to some popular CMSs and PHP frameworks that we will consider. Given what we’ve decided should be included on the front page, how should we proceed? Please do some research into these, including whether their core/extensions will allow us to do what we’ve planned. Also include some links to examples of sites coded in these CMSs/frameworks.

Here are some popular CMSs

And also some PHP frameworks that help with the construction of CMS

  • Codeigniter (I used this framework to construct Art Review, so much work would be done for us)
  • CakePHP
Tagged with: , , ,