Facebooking: Shopping II

Sallyn Li Yen - Shopping ( Part II )

#1st Update

Description based on Individual Ideation of Link

The idea of shopping are apart of an activity to select and/or purchase products or services. This link are basically presenting on what shopping are suppose to be and what stores are available at Suria KLCC depending on various types of shopping products and services.

I will also includes some pictures of the stores that located at Suria KLCC and deeply explain on what can the stores provides to the audiences. With these, audiences will be well-prepared to shop at Suria KLCC with their family, friends and members.

Objectives

The objectives are to exposed surround the audiences on what Suria KLCC can provide them the best shops to shop and also they spend their valuable time in shopping.

With that, audiences will get attracted and have some clues of stores located at Suria KLCC. Moreover, they may get notify in advance on what Fashion's stores, Health & Beauty's stores, Sports & Fitness's stores and Tech/Electronics's stores may provide them.

Design of Graphical User Interface (GUI)

This is our group 'Homepage' which includes a Banner right on top of the page, few links below the banner, pictures and videos and also some introduction descriptions about Suria KLCC.

Those links are the page of each individual task given.

'Click' on the 'Shopping' link > Shopping ( Part II )

This are my 'Shopping ( Part II )' page. This page includes a Banner, those links that can be reach to others of my members links, some pictures and videos on shopping and descriptions on what shopping is all about.

Last but not least, the Side Bars indicate several parts of shopping as in 'Fashion' , 'Health & Beauty' , 'Techs/Electronics' and 'Sports&Fitness'.

Flowchart

Basically this are my flowchart for my page. It started from the main topic of 'Shopping ( Part II )' to some 'Videos and Pictures' and then split into 4 sections which are the Fashion, Health&Beauty, Techs/Electronics and Sports&Fitness.

Each of this section will then splits into deeper details of what each of those sections provides for the audiences, it will takes about 3-4 links which it is the contents and pictures.

Use of Tools

Most of all, I will be using Dreamweaver CS5.5 to create the 'Shopping' page and also the links to my 4 sections.

Other than that, I will be using Photoshop CS4 for those selected pictures of the stores that will be added in and also Flash CS5.5 for the slides show of those pictures that will be added in.

Reference

1) Suria KLCC, 2011, [ Online ], Retrieved on 23 August 2011, from

http://www.suriaklcc.com.my/shopping/

#2nd Updates

starts on

Used of Tools

- Adobe Dreamweaver

- Adobe Flash

First of all,

we come to an agreement that all of our website will be using the same banner, and so as the same templates. This is because for the standardization of our overall group project website.

This is the banner that we chosen (as the same with our blog)

and

This is the sample templates that was created by our leader to standardize our whole website by using the same.

How did we make it as a standardize templates?

By using Adobe Dreamweaver,

Click on File > New > 2 Column fixed, left sidebar, header and footer > Create

(As shown below)

Before I start to insert all the information that I need for shopping,

I get the design info from my leader so that I could create as the same templates.

Main Background- Grey

Main Content Background - Black

At Properties > Click on CSS> Edit Rule> Background.

The font size click on Page Properties.

All of us agree to used the same font which is Times New Roman.

(As shown below)

Then, click on File > Preview in Browser > Mozilla Firefox (Any other browser will do but I often browse it using Mozilla Firefox)

This is the outcome by preview in browser.

#3rd Updates

Before I actually starts with my own website that is Shopping (Part II), I created a 'Homepage' for this shopping part.

This is where its much easier to link it onto our main group facebooking website.

As below shown are the Shopping link 'Homepage' are done by using Adobe Dreamweaver.

First of all,

I have to make sure that the files taken are from the folders in my laptop,

therefore click to Site > New Site > Label the Site Name and Local Site Folder > Advanced Settings > Label Default Images Folder > Save

(As shown below)

You can see on the right-hand side under Local Files, all the folders appears.

That is where all the images, links and flash are needed to insert into the pages.

Then,

I fill up what suppose too at the side bars and some information into my main content on what shopping is all about.

This is the part where I inserting the Flash that I made,

Click on Insert > Media > SWF

(As shown below)

As so,

the flash appears on the main content. I can click on the button Play and Stop to see whether my flash works or not.

Preview in Browser

(As shown below)

With this 'Homepage' it will links to others members link of their parts.

As you can see at the side bars, there two sub links that links to one of member part that is Ng Boon Yi and my part as well namely 'Shopping (Part I)' and 'Shopping (Part II)'.

Besides that, at the content I include a flash to get audiences curiosity to click into our parts.

Overview of the page includes part of the flash by using Adobe Flash.

Now,

I would explain roughly on how I did a simple Flash by using Adobe Flash.

First of all,

Open a New flash > Action Script 2.0

(As shown below)

I drag in the background image into the flash.

(As shown below)

Then,

I re-size the background image according to the spaces provided.

(As shown below)

Click on Text in Tools (With a T icon on the left-hand side Tools column) and I start to typed all the words that I had in my ideation of the flash would be.

After I had done typing it, I go on the Layer part > Right-hand Click > Insert Keyframe for every words that I had typed.

This is the overview of my first page slides of flash.

Next,

for the second page slides of flash.

I typed out the words.

This is the overview of my second page slides of flash.

As I move on typing for my third page slides of flash.

This is the overview of my third page slides flash.

Click on the Play button to view overall of the flash.

After I had done,to save it SWF format Click on File > Export > Movie > SWF / AVI format.

#4th Updates

After I had designed the GUI as I mentioned above in my 1st updates, I started to create my Shopping (Part II) website.

Before that, there are slightly changes as above shown the GUI design, I added in another 'Shopping (Part I)' onto my side bars, this make us easier to link into each other sites.

As shown below will be my homepage for my 'Shopping (Part II)' are done by using Adobe Dreamweaver as well.

Also,

shown below at my side bars are the sub links for the details of shopping at Suria KLCC and as well as the information needs into the main content.

A rough view on the contents.

Not forgetting to insert my flash mainly for my 'Shopping (Part II)' page into the contents by click on as the same method I mentioned above.

(As shown below)

A rough view of my flash after inserting.

Now, I would roughly explain on the Flash I made on my 'Shopping (Part II)' page.

This time I did not use any background, I decided to make it plain and simple flash.

Again, I used the Text In Tools to typed out the words.

(As shown below)

P/S : Most of the methods I used for this flash are almost the same as I used earlier in my above mentioned flash. *Therefore, I will not be repeating once again.

The overview of my first page slide of flash.

Overview of second page slide of flash.

Overview of third page slide of flash.

This part I drag each word of 'S', 'U', 'R' and so on to the left-hand side to create a design of it and also so that the image of KLCC building is clear enough.

Overview of the fourth page slide of flash.

The last view of my slide of flash by adding in a fireworks image.

The reason I include a flash is because for welcoming audiences to my page.

Shown below is apart of mine Flash by using Adobe Flash.

Preview in Browser.

The main whole 'Shopping (Part II)' references are from :

Suria KLCC, 2011, [ Online ], Retrieved on 23 August 2011, from

http://www.suriaklcc.com.my/shopping/

As shown below are the preview contents of my homepage for my 'Shopping (Part II)'.

Fashion part

Health & Beauty part

Techs / Electronic part

Lastly, Sports & Fitness part.

#5th Updates

Now, I will be starting to create each sub links page using Adobe Dreamweaver that's for sure.

As shown in my flowchart above in 1st update,i will follow to make everything simple a way of understanding by the audiences.

Due to the information that provided from the website are too much, therefore I pick some of it which is the main focus of audiences love to shop.

I took about more than a week to complete and do some add ins for some part that I left out.

As shown below will be how each of my sub links at my side bars will look like.

First of all, I set for the requirement needed.

Font - Times New Roman, Times, Serif (Main Content)

Font - Verdana, Arial, Helvetica, sans-serif (Side bars)

Font Size - Large

Then, I starts with

Fashion

Shown below are apart view on some of the contents under Fashion page.

Under fashion, there are sub-title for each part as such Children, Designer - ladies, Ladies / Men and so on.

From the Local Files > Fashion Folder > Fashion - Children GAPS image,

I drag the image into the page and it will look as below.

P/S : The same methods will be using for all images that had inserted into all the pages.

*Therefore,I may not repeat the method again.

Designer - Ladies

This is apart of the sub-title part.

Reference used from - http://www.suriaklcc.com.my/shopping/fashion/

which also includes for all the division contents and materials used under fashion part.

Next will be the part I link each page link into another.

As shown below are how I link 'Shopping (Part II)' homepage into my 'Fashion' page.

As for below this, I link the 'Fashion' page link onto the same page.

P/S : The same methods of linkage will be using for all the following page.

*Therefore, I may not repeat this methods again.

Health & Beauty

Apart of the view.

Beauty & Salons

This is apart of the sub-title part.

Reference used from - http://www.suriaklcc.com.my/shopping/health-beauty/

which also includes for all the division contents and materials used under health & beauty part.

Techs / Electronics

Apart of one of the view.

Electronics

This is apart of the sub-title part.

Reference used from - http://www.suriaklcc.com.my/shopping/tech-electronics/

which also includes for all the division contents and materials used under techs/electronics part.

Sports & Fitness

This is apart of the view.

Sports

This is apart of the sub-title part.

Reference used from - http://www.suriaklcc.com.my/shopping/sports-fitness/

which also includes for all the division contents and materials used under sports & fitness part.

Last but not least,

preview in browser for all pages.

This will my 'Fashion' page.

'Health & Beauty' page.

'Techs / Electronics' page.

'Sports & Fitness' page.

With all of these, I completed my updates for my all my web pages. As I compiled all of my folders and sent it over to my leader to combined my links to other of my group members links.

------------------------------------------------------------------------

Shopping

There are a lot of shops whereby every customers can enjoy the shopping of many choices.

Such as Everyday services, Fashion, Housewares, Leisure, Health & Beauty, Tech/ Electronics, Sports & Fitness, Accessories and Anchor.