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 3 Background

I have made an image which I created in photoshop cs2. Since my website theme will be related to robotics, I chose a brushed metal material as a industrial theme. It will form the background image for my minisite 3.

Javascript : Hide/Show Text

Two weeks ago, I managed to write a simple javascript function with the help of Eva. The aim of the classroom tutorial was to solve out how to show and hide more text in a document.

I made an external file and below shows the script:


// JavaScript Document// Expand text- one shot.
function et(rID){
if (document.getElementById){
var tID1 = document.getElementById(rID+1);
if (tID1.className == "ex") {
tID1.className = "ux";
}
else {
tID1.className = "ex";
}
}

}


The follow code below shows the html document: (note that I did not make another seperate external CSS file, so I just wrote it in the head.


[head]
[]
[body]


show hide


(approx. 200K compresses to approx. 25k) The content is first edited in Tiddlywiki, then an HTML export of the content is written to a file. My parser processes this file further, as well as integrating it into other HTML fragments.

-->

Construction of Creative Knight Robot CD stand

All body parts have been cut out from white cardboard and then use PVA glue used to stick all the pieces together. Black and red colour spray paint cans were used to colour in the robot parts.

Only the joints in the body were made out of round balsa sticks. For example, the joint from shoulder to arm, wrist to hand, waist to legs etc...

Minisite 2: Image Viewer

As mentioned previously, I have to work on how to show and present the images I will use on my website in a better way such that it gives more value to those images.

On cssplay.co.uk There is a layout called "Multi-page photo gallery". I have downloaded the source file to understand how it works.

The example file shows 3 tab. Portraits, Landscapes and Birds. When you hover your mouse over the category tabs, it changes colour and it also brings up the photos in a thumbnail array view. (see screenshot above)

When you hover your cursor over the images, the image enlargens by a certain percentage and when you click on it, it maximise to its biggest resolution so you can see a bigger view. However when you move you cursor away and out from the viewing box, the enlargened photos shrinks to it's original thumbnail size in the array view.

Link: http://www.cssplay.co.uk/menu/lightbox3

I think this is an interesting way to allow users to preview multiple images quickly all at once and then gives the user flexible to enlargen what he or she chooses to zoom in at.

I will explore this option a bit further and see how I can implement this technique into my minisite 3.

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 Review

It's been a while since I uploaded Minisite 2. There are a few improvements compared with minisite 1.

The following issues are:
Screen Size/layout
Readability
Section Cue


In previous websites, I have made webpage resolution too large, so if users with smaller Monitor screens would have to uneccessarily scroll too much. Webpages with lots of text or images should have a longer background webpage to accommodate for that.

If you look under inspirational images, ther are lots of image, so I would therefore have to make the height of the background image longer in my CSS code to accommodate for that. However there is a problem with my code. Since I have the inspirational images section of the page long for the sake of fitting all the large images in, the construction photo section webpage also uses the same height of the webpage, but there is only 2 photos under the construction section. That means the excessive space below is it wasted. I will try to resolve this issue with my minisite 3.

In terms of readability, I have different font types to differentiate between body text and headings. I have set a futuristic font to comply with the website theme. Normal text can be editable via the html.

I have also set a section cue to allow the user to see what he wants when he hovers over the navigation menu words.

Futuristic Fonts?

Fig 1. Induction font

Fig 2.Checkbook font

The fonts used in my webpage is going to be absolutely important. I'm using a futuristic/sci-fiction theme, so i'm going to use some futuristic fonts.

I've downloaded some sci-fi and futuristic font to experiment with and there are 2 I like: checkbook and induction. These are just free fonts you can download off the net. I will use checkbook for sub-headings and induction for the main title of the webpage called "MINISITE 2".

However firefox and explorer don't recognise these fonts, unless all users in the world has this particular custom font. So therefore I would have to type these fonts up in photoshop and save them as an raster image.

Navigation Aesthetics : Star Bullet points

As mentioned previously before, I was considering how to increase the aesthetics of a navigation menu. At this stage, I'm going to use a image star to use as bullet points for menu items. I think it looks neat.

I made this star in illustrator. I also tried exporting it to photoshop and add a bevel and emboss effect. It looks pretty good, but when i tried that on the website, it looked weird because the star looked 3D and it didn't really suit the 2D-ness and colour theme of my website, so I reverted back to using the original orange star.

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.

Production Documentation: final concept design

Using the previous inspirational images I aquired online, I came up with a creative looking robot CD stand.(Look at above sketch)

The Robot will be medieval in nature, because it's appearance will suggest so. The robot will hold a shield which will incorporate the custom CD case. Users will be able to slide the CD slot out from the shield and get the CD out or in.

Weapon:
In terms of appearance, the robot will use a chinese Halbard which the chinese hero Guan Yu uses in combat. It comprised of a long pole with a extremely large cresent-shaped blade attached to the top.

Face:
It will have eyes of a cylon shown in figure 6. It is a red horizontal strip. It looks sinister that way.It will also have a face mask plate hiding and guarding it's nose and mouth.

Body:

The body will be somewhat medieval english knight looking. It will have a simple body with a chest plate armour and shoulder pads displaying the holy cross.

Flags:
In figure 5 of the previous documentation, it illustrates a model of a japanese samurai on a horse. He is bearing a large tall banner on his back which represents his clan. I will use this idea and apply it to my robot and the flags will illustrate the different sub-assignments within that subject.

I will now attempt to work out the scale and dimensions of the robot parts including width, height, breath and angle of it's legs, arms, body, head etc...These dimensions will be the basis for my construction.

Product documentation continued...IV

I've been doing some more experimenting with form and functionality with the ambitious robot CD stand. I've found some inspirational images which I would like to fuse and incorporate into my design.

Images shown below:


Figure 1: Guan Yu, (Famous Warrior of the 3 chinese dynasties)



Figure 2: Guan Yu on horse with chinese halbard



Figure 3:Medieval Knight in Armour



Figure 4: Medieval European Knight Helmet Armour



Figure 5: Japanese Samurai on Horse with banner on back

These are the inspirational images I will use to design my CD stand.

Stay tuned...

Product documentation continued...III

Today, I found recovered some concept sketches of my CD stand product in my sketch diary. As you can see from the sketches, I was playing around with some forms and I was also endeavouring to explore how I can integrate the functionality of a CD slot case into the form of a mechanical being known as a robot.

In the first sketch, I concentrated on form and I was trying to sketch a military robot model called "MADCAT". It is derived from a popular computer game titled "Mechwarriors" and the MADCAT is one of the most popular mechwarriors in the series. This is because of it's size, the stylish way it moves, it's ability to mount multi-missle launcher and of course it's cool name. However there was no interesting way of mounting a Mini-CD case within the robot unless the CD robot stand was massively huge like a monument.



In the 2nd Sketch, I focussed on trying to figure out how to fit a CD slot into the robot form. I remember from the Mechwarrior PC game, there was one mechwarrior which had large round arms (I forgot it's model name) and I was thinking of slotting a mini-CD case into it's shoulder-arm joint. I did some 1:1 scale calculations on paper and since a mini CD-stand is roughly 8cm, this would make the shoulder-arm joint massive. Therefore I would have scale up the size of the entire robot body, but that would make the size of the body huge too! This would be inappropriate as a CD stand, since it's going to hold 1 mini-CD anyway. Therefore this idea isn't really feasible.

Wk8: Rich Media

Yesterday, We learnt why people embed videos, movies or some form of flash animation into webpages. It's because those forms of media are very effective in delievring a message to the public. The message can be promotional or propadganda or even news.

But sometimes flash animations regularly used for advertising on websites can be pretty annoying, because animation repeatedly flickers or it affect a user's online web browsing experience. These days, sometimes users aren't given much control on whether they want to see the advertisement media or not on how much of it.

In lab, I successfully completed two exercises.
1) Embed a simple flash file(swf) into a html document.
2) Embed a video file (mpeg)

For 1)
I had to use the jump.swf file justin gave us to take advantage of the variable 'path'in _loadmovie(data.path,0) to link to any flash file i made. The "0" didn't work, so I changed it to "this" so it becomes_loadmovie(data.path,this) and it worked.

For 2)
The video file was slightly different. Similarly I had to use the object tag, but I also had to use the embed tag and link it to the video file on the local drive. After that, I used the quicktime plugin and experimented with the parameters to understand how embedding videos on webpages work.

Minisite 2 Preparation Part 1

I've been so busy and stressed with other uni work to blog regularly. My fault for doing 30 credit points. :(

Anyway, I've started preparing for minisite 2. Minisite 2 should focus more on CSS, because my previous website was pretty basic. I've already started browsing through CSS Zengarden to check out other people's design work. It's pretty impressive and it has given me some inspiration and motivation.

I've thought about the layout and navigation of the minisite. [work in progress]

Minisite 1 self-review

As I said before, minisite 1 look pretty bland. The layout structure is basic, with the menu on the left and body of the information in the middle. To fit the theme of my previous project, I added a image of gundam robots at the top of the website. Hopefully this will add some vibrancy to the webpage.

When I click on a link on the menu on the left of the page, it scrolls down to the particular topic quickly. I did this by using the (a href and a name) anchor tags. This will allow the user to effciency find what the want to read, especially if there is a lot of infomation going down the page. However, presentation wise, placing all information and images on one page is not very efficient. I think i'd rather have seperate xhtml index files to seperate different categories. Perhaps I will explore this more in depth later on for minisite 2.

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.

256 reference code...and what about 256k colour? what?

Hmm, I understand the colour system in terms of bits and resolution, but I don't understand we can figure out the pattern for specific colours in a document. For example, in Photoshop, it tells you the colour for green is #F25321 etc, but it's too hard to know or play around with these numbers.

MiniSite 1, Part 1

Last week on thursday, Justin gave us an tutorial task about learning CSS. We were given a slab of text about a fictional company called Conco and our objective was to set up a xhtml document, insert and arrange the text into the body and then apply some CSS into it.

We will use the basis of this exercise to create our minisite 1, which is due on thursday 30th August.

HTML the new fashioned way 1 part 2

Today I found out that the difference between html and xhtml. Xhtml is more stricter and more cleaner. It will eventually replace html.

XHTML stands for Extensive Hyper Markup Language.

According to W3Schools.com:
XML was designed to describe data and HTML was designed to display data and by combing those strengths, it will lead to “well-formed” sites.

The Most Important Differences:
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
To begin xhtml document, I to need plug in the doctype code before the html tag.

So I began editing my orginal website www.arch.usyd.edu.au/~pelu9930 to make it fits the laws of xhtml. I used the validation website: http://validator.w3.org/#validate_by_uri+with_options

However I did encounter a lot of errors. Fortunately I was able to reduce the number of errors and eventually it validated successfully.

However I still don't understand what the first 2 lines of code after the doctype is supposed to do. I see it as a meaningless link. (See above image)

HTML the new fashioned way 1 part 1

Objectives in Class

1) Find the difference between HTML and XHTML
2) Find what CSS is all about. Visit CSS Zen Garden Website.
3) Change your current student website to xhtml.

Old fashioned HTML part 1

I've been a bit slow to grasp with html, but I've learnt the basics of a html page.
I've quickly made a rough webpage which should have been done in the 2nd week.
www.arch.usyd.edu.au/~pelu9930

I've also explored some html tutoring sites like w3schools.com and it has taught me how to make a new paragraph by using the paragraph tags. But that seems to be the only way to start a sentence on a new line!

Heading tags make the text bolder and bigger. If I wanted to find a particular part of infomation on a page will lots of infomation, I could first use anchor tag, see above image.

Linking tag: use the a href=" " tag

However I still don't know how to use the table tags to organise data. Apparently you can use it to structure website elements such as text and pictures, but its a dodgy way.

RSS feed Part 2

I've registered for feedburner and tried making that my default RSS subscriber, but it doesn't seem to work! The default atom post subscriber works the same way, so I'll stick with that.

RSS feed

I also forgot add an RSS feed option for my blog. Assessor Justin will need this. How do I do it? I will do a bit of websurfing around justin's usyd homepage and the links he has provided to see if i can find out how.

UOS Objectives

I understand that I have to come up with 2 things by the end of this UOS.

The following:
1) Website - My Site that provides written and visual infomation about my projects and links to my blog and other sites.

2) Blog - frequent documentation of projects done in other subject areas.

First Post - Testing

Hi,

I'm Peter Lu and I will be using this blog for documentation work in DECO2102. 

Stay tuned.