Layout Revision 2 - Minor visual changes,huge pain in the butt.

Friday, February 19, 2010

Note: I use a lot of geeky web dev terms in this post. If you don't care for that stuff, I wouldn't suggest reading.
I keep plugging away at this thing in my spare time. I've expanded the width of the site to 960 pixels, this should allow for more reading room for the time being, and it will allow for a sidebar to get tacked on in future revisions. I was originally working with an 800x600 resolution in mind, but then I realized there was no point in that considering that the vast majority of computers operate at, at least 1024x768. The only exception to that would be Wii users and smart phone users. Somewhere down the line I may make separate versions of the layout to support those.

I also axed the shadows behind each of the heading items, it looked cheap and tacky with this design.

The other revision I made was to the navigation menu. While it doesn't look much different, it actually is. In the original version, the nav bar was just a series of divs and I swapped out the backgrounds on hover. It was done purely with CSS, and I hadn't implemented any sort of buffering for the "on" state of the images, that meant there was an initial pause when the user rolled over the images.

At first I was just going to pre-buffer the images with javascript and be done with it; that would have been fine, but I wanted something with a bit more visual flair. I eventually settled on doing the mouse overs with JQuery, that proved to be a major annoyance.

For some reason, my JQuery code doesn't want to load properly when I embed it as an external .js file. Unfortunately, I didn't realize that was the problem until I had spent hours upon hours trying different types of code in an effort to make the damn thing work. Anyway, once I figured that out, I went back to my original idea of layering the on and off states of the images over top of each other and then cross fading them by animating their opacities. Right now, what's actually happening is that the top "off" image is getting faded out while the bottom "on" image never really changes state. There is only one problem with this, the images I had were using Alpha transparency, so the edges of each image were thicker and had a very slight bluish tinge to them.

So why not have the "on" image invisible to start with? Since the images are occupying the same space, the top image will always obstruct the mouse from reaching the bottom image, so the bottom image can never have a hover event fire and can never get faded in.

There's a few solutions to this problem, but I went with the simplest answer: make the backgrounds of the images solid black. If there's no transparency, then there's no issue. I can get away with this since I have a solid black background, but if I had a textured background, it may not be so easy. Regardless, it's not a messy way to handle the problem, and it works on this site.

Aside from that little bit of fun, my next step is to start dividing the page up into sections so that I can put them in PHP include files. From there I'm going to set up a MySQL database and work on making the site a bit more dynamic. I figure this will take several weeks, give or take a couple depending on what the school work load is like. I'm hoping to have an actual functioning portfolio by some time mid-April.

Till the next one of these rambling posts, adios!

Testing a few things,and my work plan.

Wednesday, February 17, 2010

I'm testing out the new layout for my portfolio page. This page is intended to replace the design I used in my first semester and should allow for easier updating as well as increasing usability. I hate the idea of pages being "under construction", but this page is very much in that state.

What you can expect from this page.

This page is going to serve as a showcase for everything I've done as well as a personal journal for all my random writings and postings. I'm hoping to write out a variety of different things such as short tutorials, commentary about whatever I feel like mentioning, and hopefully some humour posts.

As far as the showcase aspect goes, in the coming weeks I'm going to start updating the page with my recent school work, as well as my work that I've done as a multimedia guy out on my own. I'm probably going to start of with my VB.Net programs since they're the most flashy things I've done lately.

What changes are coming for this page?

I'm planning on monkeying around with styles and layouts a bit until I find a layout that I'm completely comfortable with. Following that, I'm going to make the transition over to a dynamic PHP/MySQL controlled page. The "Journal" portion will probably be a Wordpress based blog since I need more experience working with it. I'm not 100% sure on that one though, I may opt for developing my own content management system to meet my needs specifically. Also, expect to see some JQuery and Flash tomfoolery on here at some point as well. I need to get practiced up in those.

Before I go...

I've been re-reading Ultimate Spider-Man lately, and I noticed that the art is kind of all over the place in terms of quality. Case in point:

Dear god.