Minisite 3 Preview

here's a sneak peak at minisite 3. Go to my minisite 3 to see the full details.
There was a problems with uploading the webpage graphics, but I think it's fixed now.

Minisite 3 Review

As I already said, minisite 3 was up. There are a couple of updates compared to minisite 2.

Navigation
Now users who browse minisite 3 will enjoy skimming through the interactive pop up boxes. When an user browses through the different categories, they will be given the option to quickly browse through all thumbnail images. Then if the user wants to view a particular image, then can click on the image to enlarge the image, then they will have to click either on the image or outside to close the large image to see all the smaller thumbnail images. This mutli-image gallery is all done in CSS.

In addition, more images have been uploaded now. This includes model photos, construction photos more concept sketches.

Site Design
The website now has a more clearer focus on the robotic theme. There are random micro text, some random abstract art to give the website a very futuristic, digital feel. An image of cylons from the popular tv show Battlestar galactica is also shown.
However I wanted white lines to boarder around the lower image, so I used tables in the html code such that the long cylon image doesn't look like it's just plonked there. The table also gives website some structure.

Opacity
When the user browses through the links, there will be transparencies. This gives the website a more sophisticaded depth. However there is a problem with this. It works fine in Mozilla Firefox, However there are some compatibility problems with internet explorer. For some reason, when you click to enlargen an image, the small thumbnails appear over on top of it as well. Strange...I had spent hours trying to fix it and I can't solve the problem. I may have to start from scratch to find out the problem.

Final Product Photos
The final product is finally documented in the form of photos. Some photos have different resolutions and this had created problems. Some photos are landscape and some photos are in portrait form. Since the thumbnail preview boxes are in landscape form, I also chose to display all the images in a landscape format. This required me to do some photo editing in photoshop so that the portrait photos' resolutions aren't warped.

Of course I could of portrait form sized versions of those thumbnail preview boxes, but I wanted all the thumbnail images to be of the same image format to keep the same consistency.

Minisite 3: Opacity

[Above Image: comparison of Left: 70% opaque,Right:100% opaque]

I've been studying the code for the multi-frame gallery I got from CSSplay.co.uk and I've been trying to under what each line of code does by changing the values for each CSS property.

I've also taken it further by applying a opacity css property which allows me to make the background transparent. I found the technique on:

In the css code it looks like this:
[background-color:#000000; opacity:.7; filter: alpha(opacity=70); -moz-opacity:.7;]
Background color is what colour you want to be transparent. Opacity:.7 is the value of the opacity. You can also adjust the opacity seperately for IE and Firefox. This can be done by using the proprietary code: -moz-opacity:.7;]. The filter in this case works for both IE and firefox.

This method is a great way to allows me to change the transparencies using numerical values. I no longer have to make images of semitransparent backgrounds in photoshop. The disadvantage of making a transparent background is that it doesn't allow other users to change the opacity value for themselves.

Overall this is a nice visual feature and therefore I would like to use in my Minisite 3, specifically for the multi-photo frame viewer. This allows the user to also see the background brushed steel artwork.

Minisite 2 Feedback

Yesterday, I got feedback from Justin for my minisite 2. There are 3 things I can improve on.

1) The presentation of images - The way images are placed on the page seems a bit too dull or barbaric..."like it's just plonked there". I should find a more aesthetic or interesting way to present these images. CSS play seems to have a good examples of how to just do that.

2) The navigation menu - This also needs some work on. Seems a bit plain... Needs to show some more interactivity.

3) The overall site design - Since I'm using a futuristic robotic-ish theme, I should focus on how I can use visual elements to represent that on my webpage.

Minisite 2: Progression

I'm still working on my minisite 2. So far I had to re-learn CSS from scratch and it took forever...(echo-ing)

Yeah, but I must say, my tag muscle has beefed up and I'm glad I went through that hard training. Now I know how to use the "div id" tags in the html document in conjunction with the css file.

In my minisite 2 so far, I've got the header, main body background, text and the navigation menu. Soon I will put image documentation of my project to assiociate with those links. Here's how it looks so far (see above)

Users will be able to navigate through the website by hovering their mouse over the menu. I wanted to use this other way of creating a menu, but it was quite differcult at this stage, because it requires nested layers. Perhaps I will do that for minisite 3.

Even though the website looks simple, it took me like 4 days to set up all the images and links to work right. It required a lot of trial and error, because there was a lot of coding problems. For example, the menu would disappear into now where until I set the left and top location and position to be absolute.

Deco2102 site and Minisite Uploaded

Last thursday, I uploaded 3 websites related to this subject.

1) www.arch.usyd.edu.au/~pelu9930
This allows the users to access my refined general homepage and therefore give the user the option of entering subject specific website such as Deco2102 and Deco1008 etc.

2) www.arch.usyd.edu.au/~pelu9930/deco2102

This is the main webpage for this site. It contains visual links to the minisites, blog, and back to homepage. I used photoshop, illustrator to design the visual background.

3) www.arch.usyd.edu.au/~pelu9930/deco2102/minisite1/

This minisite is the first iteration of my previous past project and it an xhtml document with CSS. At the moment I think the website aesthetics look pretty bland, but it's functional enough at this stage of the iteration.