A foray into web design

Before I continue my series on scientific visualization with Python, I want to segue into another realm of computing: web design. I have nearly zero experience with web design and programming for the web, but when people hear that you like to “program,” that’s the first thing they ask about. Back in the day, I learned HTML and some some basic CSS, as well as a small amount of JavaScript, but I’ve never really deployed anything more than a GeoCities website.

Until now. I was asked to become the webmaster of the CCAMS website, a job which really just entails keeping the news up-to-date and making sure the thing doesn’t crash too heinously. But in the vein of Walt Disney, I feel compelled to “plus” it. The site looks a bit dated; it’s got bloated JavaScript menus and a less-than-beautiful design. I immediately thought that it could be rebuilt into something incredible, so I decided that I would finally learn web design and build a great, Web 2.0 site for the club. Problem is, I don’t have any idea how to do that.

Or I didn’t until a few days ago. A friend recommended I use Django to build the site, and after having spent a day reading over version 2.0 of the Django Book, I’m compelled to do so. I envision the new CCAMS website as a hub for our club/department’s activities. It should be able to dynamically serve forecasts and keep up-to-date news and goings of the club. It should support users so that members with certain responsibilities – such as the WeatherPhone or Forecast Competition – can log in and discretely upload their data for others to see. The site could evolve into a really useful utility.

But first I need to practice deploying a fully-functioning site. I decided to design myself a simple 6-page home website. Last night I went into GIMP and drew out a template for what the site should look like (see the bottom of the page). It’s really a simple thing:

• The title changes to reflect what page you’re on
• The navigation bar also does
• The main content is served in the white body wrapper
• The footer at the bottom will h.ave some sort of cute, random quotes

At least, at first. Each of the navigation pages will afford me a chance to practice a certain technique which will help me learn Django for the CCAMS site:

• Home – A simple, static page for starting out
• Resume – I’ll write a simple app which will store the data for me resume in a database. Then, I can dynamically serve that data when the user visits the “Resume” tab; I’ll have Django query the DB for all the information, style it in nice CSS, and present it in a few formats like HTML, PDF, PostScript, the likes.
• Research – Like Resume, but simpler. Rather than generate a new file to present for download, I’ll just display it directly on the screen.
• Music – I plan on writing an app for the CCAMS site that downloads information from NOAA/NWS, and this will be preparation for that. I’ll gather media and information for bands like Weggalo Star and the Cornell Symphony Orchestra and present it dynamically on this page
• Blog – Every web designer undergoes the rite of passage of building a blog application. I’ll take an existing one, hack it to my needs, then re-code it by hand from scratch to synthesize everything I’ve learned
• Contact – A simple form-driven contact page.

I’m pretty excited. I hope to spend the rest of today coding a static HTML/CSS homepage to get the website all layed out.

~ by counters on June 20, 2009.