An attempt at web development

Posted in rails, web at 6:32 am by wingerz

Recently I volunteered to put together a new website for my wife’s former company, New Sector Alliance (the old site). I figured it was a good way to learn the right way to put a website together. The only customer requirements: Make it look better than the old site, and add in some flashing quotes.

Some of the things I’ve picked up:

  • Creating layouts with div positioning rather than tables: No more fiddling with colspans and rowspans, put your layout boxes wherever you want them, even overlapping or obscuring one another.
  • Nice rounded tabs: I used A List Apart‘s sliding doors approach. Basically it involves creating a (narrow) left image and a (wide) right image of a box with rounded corners, then positioning them as backgrounds with the left image pushed to the upper left and the right image pushed to the upper right. Only the part of the image that covers the tab element shows through. The other neat trick is for changing the background image on a hover event. Rather than switching images or switching the class of an element, you put two images into a single image, stacked on top of each other, then switch the positioning of the image on a hover event.
  • Slick graphical effects: script.aculo.us is one of many Javascript libraries for cool “Web 2.0” effects. It’s pretty easy to use. I created a box that contains changing quotes and used this to fade quotes in and out.
  • More Javascript: Found a simple sortable table script, which I dumped in to display every past project that the company has done (134). Things like this make me happy to know perl.
  • Cross-browser functionality: I haven’t really looked at this yet, but I am not looking forward to it. Some of the stuff doesn’t even render in IE.
  • Development environment: I actually started coding the site up in Ruby on Rails to take advantage of the layout system. I’ve got a default layout that draws the header, main nav menu, and footer. It’s made working with the nav menus much easier (especially for highlighting the item in the menu that matches the page that’s currently being viewed).

Leave a Comment