PDA

View Full Version : LOG : (re)Building a LWUG website



kevman3d
10-06-2003, 04:55 PM
Here's an idea - I'm working on rebuilding the Kiwavers website, and I figured it might be a cool idea to log the ideas, techniques and tips I apply as I go through it... It'll be a slowwwww thread since I have to find time to work on the new site, but hey, why not! :)

Why a new site?
The existing website is hosted on a free site at Geocities (http://www.geocities.com/kiwaver) and works as an info repository, but its almost 6 months out of date! :(

Currently any updates require me to generate new HTML files, edit old HTML files, upload HTML files. Its a lot of work - I added a user gallery, but when a user emails me their images, I then have to create their 'user gallery' thumbnails page by hand, and a separate HTML file for each image to be displayed in.

Also, Geocities is great since its free, but its got limited file space, limited bandwidth (like 3Gb a month) and advert pop-ups.

You get the idea. :)

The Kiwavers group is large enough and mature enough to warrant a better web resource. A new site that is more functional, interactive with its users (ie. user-submitted galleries, tutorials, links, etc) and easier to manage. While I'm at it, I think a little facelift on the site look and feel might go down well too!

How?
Firstly, through a hosting service that offers scripting and database facilities. Flat HTML hosting is not a good solution for any large site... Sure, this will cost, but there are places nowadays that offer these services at reasonable prices...

For this, I've chosen the hosting service www.hostned.com - They are reasonably priced, and offer a product that gives both unlimited file space and unlimited bandwidth, along with scripting and database access... Having had my personal site (www.kevman3d.com) hosted there for a couple of years, I've never been disappointed with their service.

I registered the address www.kiwavers.org through www.godaddy.com who offered very good prices on addresses.

Overall, the cost was managable at a personal level. The cost from now will mostly be in time...

I've started out on the site by placing a simple 'coming soon' banner on the site, but at this stage haven't made a major effort to start pushing the web site. I've mentioned the URL in passing...

Development
The hostned hosting is on a Windows2003 server. This means ASP (active Server Pages) which are relatively simple to create and write (plus there is a tonne of resource online - www.wdvl.com for instance!). ASP, like most scripting languages (PHP, Perl, etc) will allow me to add dynamic content and control within web pages...

That's the beauty of Web scripting. :)

Development should always be done offsite - That is, never try and develop a site on a live server if you can avoid it. Lucky MS created PWS (Personal Web Server) for those running Win9x versions of Windows. PWS is like a mini-version of IIS, MS's full-blown web server, and is ideal for developing ASP based web sites on a personal computer. Obviously, if you're running Win2K upwards, you're likely to have IIS on the installation CD that you can install anyway.

Hostned let you use a variety of sources (dBase, Access, Excel, Text, etc) so there are numerous ways to create a place to store information for running the site efficiently (ie. News, links, user logins, etc). XML is another nice simple format that may be preferred... XML is nice in that you can easily read it (its plain text (in most cases)). You can also create and edit XML in any text editor! Bonus for those without an Office suite of tools!

So?
So, now I have all the wizzy technology I need, its now down to designing the site... More later!

kevman3d
10-12-2003, 01:41 AM
The first thing I need is a plan. A plan on what should be on the site, what new features and where they should be placed...

This is usually known as the site-map. And this is very important to finalise BEFORE I start making pages or databases... It'll also help me finalised and clean up my DB schema ('the design of the database, and what goes into it).

In this case, the new site will contain the usual stuff that the existing site does - About the user group, Meeting info and minutes from previous meetings, resources (links to tutorials, forums, online shopping, etc), employment notice-board and user links and galleries...

However, this will now be extended a little. Because I want users to be able to interact with the web site, I will implement a log in system for users to register and get online.

This not only allows me the ability to set up user accounts and track uploaded files, links, etc to the site, but I can also lock-down site pages to be viewed only by registered users...

As for the site map... So far I've got the following planned out...

home
I will add a database driven 'news list' so that all the latest gossip, happenings and events will appear on the home page. I'll also use the home page to display any new uploads, links, etc on the site.

The home page will be the place to find out the 'latest' about the NZ LWUG and LW related events.


About
This will be pretty similiar - About the group, the people behind it, about LightWave, etc. Maybe an about New Zealand section? I'll think about that... :)


Activities
This section will encompass not only a database of previous meeting minutes, but an 'upcoming meeting agenda', as well as info and voting pages for competitions, as well as listing any events, etc that are happening in the NZLWUG.

The previous site only has a meetings section...


Resources
Resources will not only offer links as the existing site does, but also employment board, and a section for tips and tutorials (posted to the site by users). I'm also considering allowing file uploads as well - Textures, etc - So that a library system can be implemented. However, I am also weary of how heavy the bandwidth can be on sites containing large amounts of 'free' downloads... This is something I will consider carefully...


Users
This will contain a user directory (people can contact users through a web-form (no user email addresses will be posted on the web pages directly to prevent spammers collecting addresses) or click on their web site addresses, as well as view user galleries. The aim is to allow users to set up and manage their own personal galleries with online uploading and management tools. I am also considering the possibility of online CV-type accounts, so that users can lterally 'advertise' themselves online if they so wish...

I've already designed into the DB schema the ability to add ranking to images, as well as a views counter. These will give me the ability to let users track how popular their images are, and also give the site more 'flexibility' in what ways a user can browse galleries...

I had also designed in a global 'comments' system for the site, but I was concerned over whether I wanted to end up starting a 'forum system' into the site and consuming a large amount of server space (and then backing it up back to my PC via FTP over a modem? Ouch!)

So that's where I am at at the moment - I'm also currently toying in Photoshop with a few new 'looks' and page layout designs so that I can give the site a new 'lease of life'. I may post some up here, or I may keep them quiet until the site is live... :)

More coming soon...

kevman3d
12-09-2003, 02:57 AM
Well, I'm going to continue this thread shortly - I've been sitting around 'thinking' WAY too much and this new site is not seeing the light of day at the rate its going! :(

Anyway, I've had to make a few blunt decisions.

Database:
The first is the whole database debarcel - The main issue I've been having at the moment is just HOW to approach this - Xml? Excel? DBase? Argh!

I've finally settled on XML - Its text, its simple to create and its easy to manage in ASP script using MSXML. Of course, there will be a few XML files, and not just one...

I tend to feel at more ease when I work in a more relational database with structures I can cross-match and query. However XML is my fixed decision since the hosting doesn't offer a SQL Server of any kind, and I don't really like the idea of Excel spreadsheets as the basis for data management! :)


Content Delivery:
How will I display and deliver the necessary content? Its the one thing that need to be defined as there will be a lot of 'similiar' content on the site, and since this site is dynamic, I can create a set of 'templates' that can be used throughout to display different sections of the site in the same 'style'.

I've broken content down into 3 possible formats.

List
A list of titles, dates, and a paragraph/abstract. This I'll use to list news, tips, links, jobs, etc. This 'list' will need to be able to break up across multiple pages if there are too many...

The user should be able to optionally click on the title to open a page of information (this would mostly be an 'article' - the third 'format' in this list)

Thumbnails
A list of image thumbnails with info. I'll use this format for displaying User galleries, User info (ie. Avatars), competition voting pages, etc. Like the list, this should have the ability to also spread across multiple pages...

There is also the possibility that I may need 2 types of thumbnail template - One that remains on the side of the screen and can be accessed like a side menu, and one that is displayed on the main page and gets replaced by whatever new page that loads. Some thought on how I will approach this will need to be considered.

Again, the thumbnail may be linked to an 'article' page.

Article
A page of formatted copy. Usually this will be a full article from say a meeting agenda, etc. Or it could be an image from a users gallery. An article that is too long should also be able to break up across multiple pages - Or I could just enforce a maximum page length! :)

This will be like a complete 'web page' and not a list of information, or thumbnails.

Online Management
I want to add online management to make taking care of this website extremely simple. This needs to be secure, and will just use simple form-post approach to maintain users, add items, etc.

I will also add site management at a more 'user' level so that users can maintain their own information, upload tips and tricks, and more. When a user is 'logged in', extra links and tools should be made available that allow the user to access tools to manage and post information. This should ideally make the site more 'interactive' for users and maintain a fresher level of content.

So, with those thoughts in mind, I'm going to spend just a few days designing the look and feel for the site, then this Xmas will be a good time to try and get this thing underway and online...

I'll post progress as I go...

kevman3d
02-07-2004, 04:23 PM
Ok, just to let you know I'm back onto this project again - I just whipped together the basic site look-feel in photoshop. This project is just all thought and no action so far. With most the look laid out, I can now start to build the site slowly.

What I mean is, I'm going to start out simple - Build in blocks at a time and get it online in bits. That will at least get it rolling, and not keep things stagnating as they have been...

With the look laid out, I will start out by building the homepage.

Step 1:
Save out the look of the basic page as several files from Photoshop - Why? There are versions of buttons for rollovers, submenus, etc, etc. Once I've got them out from my primitive old copy of PS 4.0, I can take them into PhotoImpact (Ulead product - Very nice software BTW!) and use its slicer tool to cut the page designs into individual components and HTML.

This will let me build the basic HTML for the site - It is usually rough, but I can take the code and graphics, and re-develop the HTML for proper use. This includes optimising the layout - Replacing any large blank areas of space with HTML code and a 1 pixel transparent GIF. This allows fast loading of the page, less data!

Step 2:
The home page has news and announcements, so this is where I will start. However, to ensure easy 'addition' of extra parts of the site as I go, there are some coding considerations to take in.

The layout contains 3 vertical sections:

A top header
This contains the title graphic, menu bar, and a submenu bar.

The Content
This will be split on the page horizontally into two vertical sections... A side panel where small headlines, adverts for things, extra menu/selections, thumbnails, etc can be drawn. The rest of the content will contain whatever - News, images, etc.

A Footer
The end of the page will finish with a footer - Just a line, some copyright notice, etc.

Each of these sections will be drawn using some code, or at least SSI (Server Side Includes).

For the uninitiated or newbie web developer, SSI lets you embed text files containing blocks of raw HTML into a page - ie. Slice all the HTML in a web page into smaller files, then stick them back together by creating a file that simply 'includes' each of these files in order.

Why? Imagine building a site the good old HTML way - Then you decide you need to change the footer text - On every page! If the footer HTML was in an SSI file, you only need to edit one file - All the other pages that 'included' this file will then be updated for you.

The Header on the other hand contains menus, and submenus (for various subsections). This will probably be created in ASP and create the menus programatically. What I will do is pass some Querystring parameters (these are variables that you can pass in the URL of a web page - ie. www.x.com?myname=kevin&myhome=NZ)

Using these parameters, I will pass the section and subsection info about the site. ASP can retrieve these values, and pass them to a function called, perhaps, 'drawHeader' that will create the necessary HTML for that top block of each page.

I will also probably utilise Querystring parameters to pass info about the main page as well. For example, side=advert&main=newslist. A function, say, 'drawPage' will use the header menu parameters, and its own querystring parameters to work out what to draw on the content of the page.

The site will pretty much operate with a minimal amount of template pages - Each page will contain code that:

drawHeader (to draw the top menus)
drawPage (to draw the content of the page)
INCLUDE SSI (to draw the footer (or I could use a function))

Using these two techniques, I can easily add sections to the site by simply adding them into the functions, or SSI files later on. It also makes managing the code a lot easier later on if I needed to change out the look of the site... I just tweak the files I need, and voila!

That's my update done for now.

kevman3d
02-08-2004, 03:31 AM
And before I hit the sack, here's a quick image of the proposed new design... Just to prove I've done something more then just write about it here!

This time I've gone for a crisper, more 'corporate' feel to the site.