Website update finished

Hi everyone. Great news today: our new website is up and running! Check it out at www.chessinthelibrary.com. And while you're there, check out the forum and make yourself an account so you can join the discussion!

While the majority of the content is untouched, the new update brings a new, classier look to the website. The new CITL website has complex CSS formatting and efficient JavaScript that levels it with professional websites. The new site also has our new logo designed by Yuan Dai, a more organized template, and more.

Though the looks have improved tremendously, the primary purpose of this update was the forum. Forums offer new ways of communication between the volunteers and the general public. The purpose of a forum on the Chess in the library website is to encourage a more bonding relationship between the volunteers and the people attending the program. Everyone can become a member of the forum with just a few clicks. As a member of the forum you are encouraged to share your own ideas and suggestions for the program, discuss the volunteering, or simply discuss anything related to chess.

I find myself extremely satisfied with the results of this project. There are still some minor issues, some of which include browser specific issues and load time, but overall this has been very successful. I am aware that there are still a little polishing to do, and will complete those ASAP.

CSS container

In the past week I have been working on CSS containers. Though there's still tiny visual problems with it, I think the general format is completed. Here is how it looks.

This container thingy is a more dedicated way to organize a website. Using these containers instead of tables allows for better visuals and more formatting options. As seen here we have a nice bar at the top with the heading, and round edged boxes with drop shadow, everything looks better.

However as for now the text is too white compared to the banner and the navigation bar. This is because the banner and the navigation bar are done in photoshop, these texts are not purely white and have darker stuff around them. Especially for the navigation bar where I added a glow effect which makes it look a little yellowish on the outside. The heading on our CSS container on the other hand is pure white (#FFFFFF) and looks rather too sharp compared to the banner and the navigation bar.

I have been playing around with the colour, trying #DFDFDF and #EFEFEF, and even using the color picking tool in photoshop. However because our header only allows for one single color, this is not going to be easy. For reasons of colour consistency I might have to change the navigation bar or the banner a bit.

Also I changed the background colour of the website (the sides of the content) and made it darker. Now it fits the colour of the banner and logo perfectly. Visually speaking repetition of the same colour gives a sense of coherence and unity crucial for making a website (or any piece of art) visually pleasant.

And finally for the big table I took out the cell padding. This takes out the line outlining the entire table. Then I added a frame, which is basically a thinner version of the cell padding. It's color is also different. However as I tested the frame on different browsers the results were indeed very different. In Chrome the border has only 1 colour yet in Internet Explorer and Firefox the border has two colours(bordercolorlight and bordercolordark I am supposing).I will play around with the frame and the border colours and see how it looks.

So now that the CSS is done, all there's left is putting the contents inside our new CSS container and the main website visual changes are complete!

Website Update -Banner

For the banner I decided to make it simple yet effective. The old one feels blurry and is just getting old. This time it's about to get real classy. Oh of course the new logo will be in it too.

I had a hard time deciding which font to use for the "Chess in the Library" text. After frustration and desperation after scrolling through every font I had, (I never realized there were so many fonts to choose from), I decided to stick with good ol' Times New Roman. It's formal, it's good looking, and it's readable.

After finishing the banner I decided to introduce it to its new "spouse" the navigation bar, as the banner will be spending the rest of its time on top of navigation bar. And yuck what a mess. The banner and navigation bar just don't look good together ---their colour just don't fit.

So I asked Ms. Navigation bar to compromise a bit, since we wanna make Mr. Banner feel welcome. I toned it's colour a bit to make it at least fit with the banner. Then I made the buttons 1/4 transparent(75% opacity) to blend in with the colours. After much work the two finally looked good together.

The new look has the simplicity I wanted. It looks more professional, and overall more "solid' than the previous banner.

I must mention here that the logo design is just brilliant. It's very artistic and stylish, yet effective nonetheless. Thanks the Yuan Dai again for this exceptional design.

Next up I'll work on the new CSS for our website, CSS is one of the most important elements of a good website. It allows the text, colour and layout of the website to be formatted. The old CSS for our website is very primitive, I'm hoping to change that and add more styles to our website.

Website Update -Navigation Bar

It's been a while since my last post, and during this time I've been working very hard on the website. But I must admit I underestimated the work to be done. So far I've only finished the banner and the navigation bar. It wasn't as smooth as it could have been, and in the past month due to Summer School the progress has been slowed down. But regardless I have the confidence to mark the deadline of this project as September 1st.

First of all from my last post I discussed the possibilities and my original intentions of making the navigation bar a drop down menu. Yet when it came to working on it, great difficulties emerged. There are two ways of doing it: JavaScript, or CSS. Both has their weaknesses, and either is easy.

JavaScript first of all gets the job down, allows complex graphics, yet is incompatible for all browsers. It would be unreasonable to give up compatibility for such a crucial component of the website.

CSS (Cascading Style Sheets) gives relatively more compatibility, but disallows complex graphics required. CSS allows mono-colored buttons with links on them, which basically dismissed the button designs I worked on. This I didn't want either as mono-colored buttons are effective when numerous. Considering how our website only needs 8 buttons and only 3 would be drop downs, such a design would be indeed absurd.

Facing these difficulties, I decided on not doing a drop down at all!

This is not giving up, because it is justified. I wanted to lose either compatibility nor visuals, and the necessity of a drop down menu for only 8 button could be questioned. Thus, I've decided on a single stripped navigation bar just like our first one.

Website update -update 2

For now I am focusing on the new design of the website, as the forum is done with only visual changes to make. I plan on of course designing the look of the website first, than the look of the forum. Forum should fit the website, not the other way around. As for the look now, I feel the colors is a bit too light.

For the last couple of days I've been trying to get SiteGrinder working. SiteGrinder is a Photoshop plugin that could turn Photoshop images into webpages. I find that more convenient than having to look through the dull long lines of HTML code. But after looking closer at the actual plug-in I find it to be rather flawed. First of all it doesn't work on my computer. Which I find extremely frustrating. The engine fails to initiate and remains unresponsive. I have check the customer support but no solution is given. Secondly the plug-in does cost money. The free version that I've downloaded was only a demo, any webpage it makes will have a gigantic watermark on it. The actual full plug-in costs $149 dollars(U.S.), and that is a LOT of money. I seriously doubt the necessity of it, and it certainly is not worth $149. Finally it makes updating the website harder. To add contents like updating the members page or the sponsor page would be rather painful with SiteGrinder, since adjusting lengths and widths will be an obligation. Contrastingly the one I am currently using(Dreamweaver) handles such updates quite well.

So with SiteGrinder to be but a huge disappointment and a gigantic waste of time, I continued to work on the navigation bar. Here's how it looks now:

I agree it's not perfect(why is the text blue now i'm not sure), but we'll have to see how it fits with the banner and the entire website, color-wise and balance-wise. As you can see I'm using a way darker approach hoping to bring a more formal professional look to the website. The round rectangle bar will be less"edgy", thus providing a smoother view. The bar itself has fill opacity of 44%. This will make sure that some of the background will come through. The bar also has white glow to 30% opacity and a stroke of 1 pixel black. The texts themselves glow as well, just to get that "shiny" look. The buttons have gradient from #050505 to #151515, which gives the metallic "shine" as well. Right now the buttons' shine and the texts' shine don't really match. But i'll see if changing it is nessesary. These small details seem to be irrelevant but they actually contribute greatly to the overall look.

As for the missing events, members, blog page, I am planning on doing a drop down menu. It won't be easy, and i might have to go back to flash again, but I am looking at other alternatives. so they drop down menu will look like :

Home (Events,Members)

About Us(Blog)

Forum

Gallery

Sponsors

Again I will have to discuss with other volunteers and primarily our founder about how the categorization will be done, but this gives a general idea.

Website Update -Update

I've never expected the progress to be so fast. Yet out of boredom I have nothing to do but work on the website update. And yes, the forum is fully working. Though as for now it is not open to public yet because there is still extensive work to be done, but we have got a fully functioning forum! phpBB offers a very good free forum platform for building a community. It will be open to the public as soon as I change the appearance a bit, add our logo on the top, and discuss with other volunteers about the format, forums, topics etc.

Well as for now here's a screenshot of our new forum.

I also established a FTP connection between the server and my computer, which allows me to edit the website through a web editing software other than the one cpanel provides. This was not possible before but now I've fixed a bug on my computer and it is working.

Our main website on the other hand is going to have a brand new appearance. I started today working on the navigation bar. The old flash one was good, but it wasn't solid enough. The clicking is limited to left click(middle click and right click doesn't do anything).I've decided to adopt a new approach this time using Photoshop . Photoshop obviously allows way more visual opportunities than Flash. I'm hoping the new navigation bar to be smoother, more functional and better looking than the flash one. As for the banner of course our new logo is to be added, but that comes after making the navigation bar.

Here's a screenshot of what the navigation bar looks SO FAR. I have yet to start on filling them, and of course the color is going to change.

Website update announced

With the new logo and all the free time at hand at last, I've decided to make a gigantic website update. This update would include:

• brand new look including the logo
• a log in system where members and non-members could sign in
• forums
• chat room
• a feed system for news, members with accounts can comment on the news
• a possible puzzles page

This is a big update and it would require some time. Please be patient as I will do my best.