Semester 2 Assignments - Shortcuts

My Student web-site
http://people.arch.usyd.edu.au/~bsuh4219/

My Interactive Multimedia Design Web-site
http://people.arch.usyd.edu.au/~bsuh4219/deco2102/


[Minisites]
Minisite 1
http://people.arch.usyd.edu.au/~bsuh4219/deco2102/mini1/

Minisite 2
http://people.arch.usyd.edu.au/~bsuh4219/deco2102/mini2/

Minisite 3
http://people.arch.usyd.edu.au/~bsuh4219/deco2102/mini3/

Minisite 3

Changes
1. menu navigation - I changed to use rollover images. When cursor is on the top menu, simply the green underline appears to contrast the selected menu.

2. Submenu - I placed submenu on the left of text field instead of under the top menu. Use same green underline rollover to contrast them.

3. Some new contents - project backgrounds, photo of models, final presentation panels in gallery menu, etc.

4. For image menus, by using thumbnail to organise them in order within page. try to make it look like photo album.

5. For thumbnail images, when user click it, new window appears with original size of image.

Safari, Firefox, Explorer...etc????

Because of Minisite 2, I was kind of afraid to put some javascript into html. Some of scripts doesn't really work in safari and firefox. So, in case of crashing between them, I'm just working to do everything within firefox. I'm not a MAC user, so it would be bit hard to do in safari...so I'm trying to confirm that all features work in firefox in PC. It seeams ok at the moment. yeah~

[it was quite suprising me that the all different application show different appearance of site.. I knew that different quality of monitor may have that kind of problem, but not application. Hmm. good experience.]

New resources for contents

I found some more stuff that I may include in contents. I found some photo of my physical models and some more briefs. Now I have kind of many photos. I think I need some planning to organise them in user interactive way. such as umm...rollover? sliding? thumbnail? I prefer thumbnail. It may look like photoalbum. and pop-up window appears. something like this.

Minisite 2 - feedback

1. Navigation Javascript doesn't work in firefox and safari. It only appears main menus. Can't see sub menus. This rollover navigation may be achieved by CSS as well. Think about different techniques

2. In sub menu- image title 'DETAIL, INTRODUCTION' etc, doesn't appear as well. different brightness of screen.

3. Contents wasn't changed much.

Overall design again is good. But web-site should be openable in all different browers such as safari and firefox. People dont' use only explorer. So think about it more flexibely. check them in different browers, computers.

How-To: Making a rollover menu bar

http://www.elated.com/articles/making-a-rollover-menu-bar/
For image rollover.
I used text rollover for minisite2.
but i want to use image rollover for my minisite 3 navigation.

uh???

umm..how can I post some of my research of javascripts???
I tried several times. with different blanket.
'<' '>' -> '[' ']'
something like this. but blog doesn't allow me to upload it..
umm....what can i do?;;

Playing with Javascript

Today class, it was kind of fun for me. Recalling the memory of Javascript. +, -, => <-these stuff. I've been using these for QBasic ages ago. haha. and also some of Javascript. Playing with function script is quite interesting.
But the fact is that giving this function in the html have been changed quite much to what I've leant before. Hmm...yeah, it's difficult. But it is good opportunity to refresh and update my old knowledge. XD

Minisite 2

Changes

1. Navigation - For minisite2, I changed some navigation from images to texts.
and by using javascript, I made rollover menus. If user place the mouse cursor on the Main menu 'Main / Introduction / Detials / Gallery / Contact', sub-menu appear under the main menus.

2. Design - As for minisite 1, justin gave me a comment about the size of top image. because It was too wide to cover too much space within the browser. it would be difficult to see the texts. For this time, I tried to make it smaller which may be suitable with new navigation.

3. Frames - as using 'div' layers, it was kind of hard to control the whole layout of homepage. So I went back to using 'frame' to make layout. It is also beneficial to provide readable layout to user. When user change the size of window, frame automatically re-generated. so texts are not gonna be hided when the window is smaller than the text spaces.

Javascript for improving

I have experience of some different programing languages. Also Javascript, I've learnt some ideas of it. But it is 6 years ago...ages..
I'm thinking that I'm gonna use some Javascript to improve my minisite 1 to minisite 2. It may be the part of layout, menu, or rollover images, etc. But I know that there alread exists rollover scripting in Dreamweaver and other html programs. Itsn't there anything else that I can use it for my site?

As my site structure has both Main menu and Sub menu, I may use rollover javascript. With div and javascript, I can make rollover menu layout. When user rollover on main menus, sub menu automatically appears under the main menu bar, or something.

I just recall this idea from my previous work, but not sure how I can achieve this effect...I need some research.

Still struggling with new design of minisite2. menu will be javascripted. what about texts? and images?

How can I improve it?

What I understanded about those minisites was quite different to others. I thought that I'm gonna make totally different designs for each minisites. But everyone says, it is for improving sites.

Improving....

How can I improve my site 1?
As I was thinking about totally different design, It is quite hard to think another different design or technique..even though it's only for improving.

Does it mean that I should remain the structure and scheme of the pages and change appearance? or improve the structure with remaining design???

............need to think about it more.

Minisite 1 - feedback

1. Enter page. 'Copyrights' -> 'Copyright'

2. Top image is too big. If the window is too small, it would be bit difficult to read the texts.

3. Give some animation on menu bar. Changing text colour, becoming bold, whatever.

4. Try to organise contents. Deviding structure is good. but need more planning for texts and images as in body.

5. Title text would need to be more emphasised. too small. hard to realise it as a title.

overall design is good. (kkkk)

Minisite 1

http://people.arch.usyd.edu.au/~bsuh4219/deco2102/mini1/index.html

I decided to use my last semester's studio project 'Affordable housing in Marricville' as a product of my minities. It was not too hard to find some informations and data which I can use for the contents of the sites. But It was bit difficult to make them in some categories.

1. Concept

As it is the first minisite, I decide to make it bit simple with basic knowledge of xhtml and css which I learnt from the tutorial. It is more like a 'document on paper' than a website. But it has some links and structure of the menus as well. It is much more effective way to express information with visual effects.

2. Layout

It's really simple layout.

-Top image with title

- main Menu bar

- Sub title & sub menu

- texts

When people click main menu, sub title and sub menu appear under the main menu bar.

vertically positioned contents give more 'document' impression.

3. Site Structure

Introduction - brief / concept
Details - plan / section / elevation
Gallery - skecthing / 3D rendering model
Contact

last week's exercise - [Conco homepage]

Exercise for CSS.
we were given only one image for something..and i took it as logo.
also some of the texts which were not organised at all...so I did. XD

I wanted to list the main titles on the left and put texts on right. like a blog.
I reduced the size of conco image and used it as a logo.
I put it with a big green title 'ConCo homepage'.

I used div tag to devide contents in a layout.

first div - logo + title + welcome text
second div - list of contents
third div - contents

And I tried to put some style on the list layer. so used green dashed line around.
on contents div, I just simply put the all the texts. and give some titles different property by style sheet.


It was kind of simple exercise.
but i haven't used style sheet for a while....cuz i didn't really used style sheet for my communication homepages. I just used dreamweaver and was too lazy to think about separated page. I just used tables to make layouts. But it was kind of good exercise to remind me about CSS and be encouraged to be earnest. haha. kkkkk

for student page and deco2102

Actually, I finished my deco2102 page on last week.
But because of confusing on the requirement,
I made deco2102 page as a combinded link page with a student page.
So, I modified it and seperated in two different web-page.

Student page - Eva's web portfolio
- I don't want to call it just simply studnet page.
when I put this text as title on the page, looks bad. yeah, for me maybe.
this page doesn't only link deco2102 but also my web-sites which I've created for my other courses. So, I just want it called a 'web portfolio' .
I thought about other contents, but the main purpose of this page is to link other web-site. So , I just made it as 'A link page' to put some banners of each web-site.

Title. Banners. That's it.

http://people.arch.usyd.edu.au/~bsuh4219/

DECO2102 - interactive multimedia design

- Most important page, I think. But still don't much things to put in.

I put my simple profile and little image.(of course not me..but many people say it's me..-_-)

Also links are important. I'm gonna screen-caputre each mini-sites.

When you mouseover on the capture, you can see little title. 'Iteration 1' or something...

I will try to put some javascript later. It's too busy to think about mini-sites at the moment.

http://people.arch.usyd.edu.au/~bsuh4219/deco2102/

OH YES....

Now I can post my blog.
I was struggling with blogspot during last week.
Posting didn't work. Customize didn't work.
I couldn't do anything on blog.
for Web art and Design Blog as well.

But Google finally fixed their service and now I can do whatever I wanna do.
I wanted to modify some html tags for template to make it bit more related to my DECO2102 page. But javascript menus on customize page didn't work, I couldn't save my own template.

Umm, I think I have to try finish my minisite 1 first and will try to change some design of blog later.

hopefully... haha;

Validator for XHTML

http://validator.w3.org/

Validate XHTML files

Links

http://www.w3schools.com/ - XHTML
http://www.csszengarden.com/ - CSS

feel like 'can't start' :(

still confusing on the site thing.
It became clear between site and blog.
but got confused about mini-sites on Justin's intro in his blog

-----------------------------------------
So, for next week, when we go there, we expect to find one of the following situations:

1. A site dedicated to deco1200/2102 alone. ( This is unlikely, because you'll almost certainly have a need to create pages/mini-sites for other units of study). Somewhere on this page will be a claer, easily discoverable link to your blog.

2. A menu page with links to the mini-sites for each of the units of study you have there. One of those links will be to deco1200/2102, and when we click this link we'll be taken to a page/mini-site for deco1200/2102. A link to your blog will be found here, ,or optionally you could put that link back on the menu page.. as long as we have no trouble finding it. (Now is not the time to be arty and cryptic)

3. A single hyperlink to another site (eg a privately hosted page or a myspace profile) that seves as your student homepage. This should be funtionally identical to what I've described in 2. (Or 1., again in the unlikely event that you're only creating a web presence for deco1200/2102)
------------------------------------------

SO.

- 1 blog for documenting process of web designing.
- 2 web site
1. main web-site where all the mini-sites will be linked.
2. DECO2102 mini-sites where the blog will be linked.

I got until here.


BUT.

1. Am I corretly understanding that DECO2102 site is one of the mini-site?
2. What other contents should be in the DECO2102 mini-sites except linking blog???
3. What are the other mini-sites?
What does 'mini-sites for each of the units of study you have there' exactly mean?
I'm in the course called 'Web Art & Design'. In this course, I also have to make a web-page as an assignment.
Does it mean I just link this assignment as a mini-site? or Do I create a new web-page about this assignment?
(kind of confusing between all different web-sites T.T)


I tried to make a main web-site, but because of uncertain concept of mini-sites,
stuck on the structure(menu) of the main web-site.


PLEASE SOMEONE HELP!!!!!!!!