New WilmotHighSchool.com

Well, the new WilmotHighSchool.com website is in the last stages of development and it shouldn’t be too much longer before it goes live. I’ve got the design all setup and now the web design class is just going to have to move all the old pages over to the new template. Here I just wanted to talk a little bit about what went into the redesign and how we’re planning to transition to the new site.

The Problem

Even though the current website has served the school well for the past year-and-a-half, they wanted a refresh on the website. This also gave me a chance to fix some of the things that have bothered me with the old site.

The header on the homepage was a little large and some of the drop down menus had to open up because of that. A user would have to scroll down just to see the content on the homepage if they were on a smaller monitor.

The flash slideshow was also a bit of a problem. It was the standard Dreamweaver slideshow player and therefore looked very standard. It had the standard looking control buttons, which took up too much extra room on the page. It also had functionality problems. When it would loop back to the begninning of the slideshow, it would always skip the first slide for some reason. In firefox it would load the images at half the size that they should be about half the time, making them unreadable.

The last thing is that the alumni website, powered by High School Reunion, didn’t have the same layout as the rest of the site. Creating a theme for HSR is easy once you have something like a main site template done in Dreamweaver and makes it clear that it’s all the same website.

Layout

For the new layout I decided to solve the number one complaint by putting the navigation up against the top of the page. I also made the rest of the header much smaller by removing the flickr images and placing them in the sidebar under the search and weather.

I’m also a big fan of the new slideshow player. I found the basic code on flashotaku.com, but modified it greatly. The buttons are now on top of the slideshow player, but are only visible when you need them — when you mouse over the slideshow. It starts automatically, and when it loops back to the beginning it show the first slide again! The thing that I like most about it is the fact that it is no bigger than the images that it displays so there is no wasted space.

Photoshop

After I drew up some rough sketches of the layout of the site, I jumped into photoshop to draw it all up. I reserved the top 50 pixels for navigation and the next 100ish for the title. Everything after that is all content. I threw a shadow on the the outsides of the content. I put a red gradient for the navigation bar, with a darker layer over it for the over states.

The biggest thing was the drop shadows. Everything has a drop shadow: the layout as a whole, the title, the nav bar, the nav bar over states, etc. I like how the site has a little bit of dimension. The last site had a “flat” look. With the new site the buttons actually looked pressed-down when you hover over them.

After I had the mockup done in photoshop I got the slice tool and made slices of everything that I couldn’t reproduce with CSS.

Dreamweaver

In Dreamweaver I started the same way I start every site: setup the main divs. A holder, to hold the whole site and make it possible to center it. I had the put in a nav div above everything else, since the nav for this site is the first thing you see. Header, content, and footer divs are self explanatory. On the homepage I had to create a left-column and right-column so I could put in a sidebar on the homepage and on the alumni website.

I put the shadow background image on the holder, put the red gradient on the nav div, and put together a nav bar with Dreamweaver’s built in navbar function with all the up and over states. I defined a title and content section for the template and I was pretty much done.

Finishing Touches

I added the drop down menus and breadcrumb links and I was done. We just had to move the old website over to the new template, which would be done mostly by the web design class at school.

There are a few features that we’re working on now and some last minute changes. I really want to get everything just right and make the transition go as smooth and cleanly as possible.

Setup LAMP

  1. Install Ubuntu
  2. sudo apt-get install apache2
  3. sudo apt-get install php5 libapache2-mod-php5
  4. sudo /etc/init.d/apache2 restart
  5. sudo apt-get install mysql-server
  6. sudo vim /etc/mysql/my.cnf
    comment out “bind-address = 127.0.0.1”
  7. sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin
  8. sudo vim /etc/php5/apache2/php.ini
    uncomment “extension=mysql.so”
  9. sudo /etc/init.d/apache2 restart

Hat Tip: http://www.supriyadisw.net/2006/12/lamp-installation-on-ubuntu

Two Missed Free Throws

Two missed free throws, ordinarily the cause of a coach’s headache, became the symbol of sportsmanship in a Milwaukee boys’ basketball game earlier this month.

Separating Life into Categories

I’ve been thinking for awhile about our need to separate our lives into separate “categories”. I don’t know if everybody does it, but I know I do it, and I’m not alone. The reason I think of this is because I just saw @mosaicteam say they started a twitter account for their web design company.

The first example that I keep thinking of is myself and my websites. I have joshbetz.com, which I’ve been running for a few years, previously betzster.no-ip.org. When I decided that running my own server out of my basement wasn’t cutting it anymore I went to GoDaddy. When I bought joshbetz.com, GoDaddy did what GoDaddy does and let me know that joshbetz.org, joshbetz.net, joshbetz.tv, joshbetz.anything, was available. Wow, I thought, I’ll get a few of them, originally planning to point them all at joshbetz.com. It wasn’t a couple of weeks before I had a plan for all of them. I could put my web design services on joshbetz.net, my projects on joshbetz.org, and keep my blog on joshbetz.com.

The same thing happens, and on a much bigger scale, on social networks. Twitter comes to mind. How many people have multiple twitter accounts? Now, you don’t have multiple twitter accounts, but there are a few people that do. But it’s just for organization and ease of use right? Maybe.

Leo Laporte has an account for himself and an account for TWiT. Maybe all of Leo’s followers don’t care when MacBreak Weakly is recording, or maybe that’s why they’re following him.

I know we (I) have a twitter account for TSE (in addition to @joshbetz), but I only have 5 updates in a month. We’re in development, do we need a twitter account? It’s not a huge project and nobody’s following TSE on twitter. As for my websites, it’s probably not bad to separate my personal blog from the web design stuff, but having the projects separate?

Like I said, people need to have separate categories for basic things. That’s why I have a homework category in Things. If all my to-dos were all sitting in the inbox all the time, maybe sorted by date, I would never know what needed to get done first. I obviously have to finish my homework before I work on TSE or write blog posts, but if I didn’t have categories I would spend much of my time deciding what to do first, completely negating the purpose of a to-do list in the first place. But what’s too much? A separate domain for your projects? A separate domain for each project?