BaoBaoChow : 2015

Weekly Update -13

23:51

Based on the peer review , we had change all the design to make audience easy to access this website , which only have 4 main button on the navigation bar .

and for other content i show it only in the main homepage .

Below is how this website goes with multiple screen .

Weekly Update -12

23:46

In This week i work with the website body part and footer part to all the pages i have .

How to create a image that when i click inside it will link to another page .

First , create a <div class=container >

<a href="#" <img src="*"/></a>
(# put in the link you want to link to )
(*img you want to browse , make sure the images inside the images folder)

*For additional knowledge , how if i did a responsive website i want the picture to be full screen ?

In bookstrap it has a function to make your photo to be flexible in all of the devices .

<img src="*" class=col-xs-12 col-sm-12 col-md-12 col-lg-12>

add col-xs-12 col-sm-12 col-md-12 col-lg-12 class to your img . What does this mean ?

col-columm
xs mean small devices md -tablet lg -desktop
in bookstrap, their separate the screen size in 12 columm so which mean 12 is full screen size.

if you did not want to create a full screen websize , you just need to add in the width and heigh of the img .

<img src="*" width="200" height="200">

For foother part , i create a form / question form to let the audience easy contact and keep in touch with XPM Welfare society .

Weekly Update -11

23:33

Starting on create index.html (homepage)

For the upper part is link to our css file, which show on the top , right besde source code , that the files i link to .

Header part ,

i open a nav and open a <li class="current"> which this css is same function with cursor over the title

<li class="menu"> is the normal navigation style

rmb to close all your <li> with </li>

Weekly Update - 10

23:15

Learning on the basic layout coding and development on Dreamweaver .

Below is the basic progress on how to used bookstrap to create your own design (my own opinion and progress):

1) First , you need to download the bookstrap from internet or get it from your teacher .

2)Open your own folder to create your own website , which the arrangement , naming and the location is very important , which your website will direct link to your html file .(Do not move your folder simply when you star to create your own web ! If not you will need to relink again to that folder , so to make it simply make sure your folder put it where you want to be . )

3) Make sure 4 file that in your folder and copy from bookstrap file to your own folder (images , css, js , font )
>images (the images you want to put on your website)
>css (the css is the style of your website )
>font (the font you want to be used on your website)
>js (i am no sure about this )

4)Start create a index html by open html in your DW.

5)Link your folder that contain css, images , js and font.

6)Link your css file and js file by link or typing code .

7) Rename your Title (Which show on the bar you open a website)

8)Crete header , body and footer based on your design .

-The end-

Weekly Update -09

10:01

Peer review section to modify our group Final Visual Design on mobile and desktop .

Which comment given by Group 2 other group members.

Here is our Final Visual Design for non-profit website XPM Welfare Malaysia .

for this website we do it as a Responsive website instead of a fixed container .

What different with Responsive Website is Responsive website provide an optimal viewing and interaction experience.Which compare with other Responsive Website is more easy to read and navigation with minimum of resizing , oanning and scrolling across a wide range of devides, for example desktop computer monitors to mobile phones.

On the navigation bar , we have 2 row of navigation bar which navigation bar on top is more important content and second row of navigation is sub content .We highlight the donate bar because this website is a charity website , which this button can catch audience attention on helping other who need help and more easy to access.

For the footer part we have consistent footer which fill in with the contact info.

Here are the visual mock up for our redesign website.

Weekly Update - 08

04:31

Week 08- Submission Proprosal and Final Visual Design

Design navigation bar based on the pages we have .We are doing a main navigation bar for the important content. Sub-navigation bar under the main navigation bar for the secondary content.

Modify and double check on the final visual design , make sure every page align nicely and compile it and submit .

Weekly Update -07

03:11

Finalize all the design and create visual design by Adobe Illustration.

Come out with a clear wire frame and done final visual based on the final wireframe design .

Weekly Update - 06

03:05

2st Meeting by Project Manager

Venue :DKABF
Duration: 2.00pm-4.00pm

Meeting summary :
-Filter and modify the site map and wireframe we did for last week .
-Finalize the wireframe and decide the color code , style of the final redesign website.
-Assign members to work with Final visual design.

Weekly Update - 05

05:53

This week after discussion ,Our group have come out with a non-profit website to redesign .

Besides that , our team leader had assign works for each of the members and currently we are working with flowchart ,site map and wire frame of the selected website.Before that we had come out with some references for the layout and template.

Here i come out with some basic idea (flow chart )and site map for selected website.

After done the basic site map and flow chart , i start to come out with a rough wireframe .

After that we will discuss with our teammate and choose the best one and work on it =D

Weekly Update -04

07:23

Week04 Learning basic css code & tag :-

1)How to create words into link (#=url)
<a href="#"></a>

2)How to create icture into link (#=url)
<a href="#"><img src"#"></a>

3)To change the words color (link) when cursor over it .
.css: hover{

4)To change the words color (link) when cursor click on it.
.css: active{

5)tag in HTML5
- <header>
- <nav>
- <aside>
- <article>
- <section>
- <footer>
- <main>

6)How to input video in Dw (2 ways)
- insert
- plug in
- select file
- resize

7)Insert video by code (Better ways)
<video src"#" width"x" heigh"y" >

add control for nav bar for video
<video src"#" width"x" heigh"y" controls >

add stay still picture for your video, add poster at behind
<video src"#" width"x" heigh"y"poster="picture" >

autoplay setting for the video, add autoplay behind
<video src"#" width"x" heigh"y" autoplay >

autoplay setting with mute (Like Facebook), add muted behind
<<video src"#" width"x" heigh"y" autoplay muted>

8)How to insert video in more than 1 source (To make sure other browser can support the format)
<video src"#" width"x" heigh"y" controls>
<source src="xx.mp4" type="video/mp4"/>
<source src="xx.ogv" type="video/ogg"/>

Basic css code<<<

Weekly Update - 03

01:44

In Week 03 , We had form a group for Interactive Web Design and having a meeting at Cafeteria TARUC. Detail as below :-

1st Meeting For Interactive Web Design

Date: 13 Oct 2015 (Tuesday)

Duration: 10.30am -12.00pm

Venue: Cafeteria TARUC

Discussion for Team Charter
>Identity project manager
>Define team's purpose ,set team goals
>List of strategies to meet goals
>Identity team's strategies & potential challenges
-learning style
-talents
-constrains of individual team members
>Specify strategies to overcome challenges
>Formalize document team's agreement & commitments to one another & to the collective enterprise

Project Manager : Brenda Foong Sioh Kie
Meeting Facilitator: Chin Li Yin
Documentation Coordinator: Chow Poh Kheng
Information Manager: Chong Jin Quan

1)Team's Purpose
-Practice what we learn
-Learn to cooperate & work with others
-Understand and work on our weakness,while seeking help from who are better

2)Team Goals
-Project (Assignment 2 )
-Work progressively & efficiency .Focus on teamwork & collaboration
-Range to B+ to A , put sufficiant effort to make things work .Spend time on research & search for tutorial

3)Group Rules
-Face to face discussion during weekends, using SKYPE during weekends
-Attend every meeting unless with valid reason
-Task should be done before deadline and check thoroughly
-Meeting to be conducted in English
-Speak out when having different view, choose for the best solution through voting ,last made by PM .
-Build up trust & loyalty among members
-Put sufficient effort in all of given assignment

4)Potential Barriers & Coping Strategies
-Holidays & weekends (Hard to held a meetings)
-Tasks from other subject limits our time
-Members refuse to cooperate & listen to other's opinions
-Skype for holiday & weekends
-Set a timeline to work progressively
-Less cooperate team members

5)Procrastinating team members
-Try to explain & communicate calmly and decide with voting.
-Give support & help out members when need

About Me

00:39

UNKNOW until i SUCCESS

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

I am BaobaoChow or you can call me Belle.

19 year old in 2015

A Multimedia Design Student in Tunkul Abdul Rahman University College.

I like to Design & DIY my own stuff. I love create new things from my older stuff.I did coloring when i feel free and stress.

I love photography and video shooting too. Graph can deliver message without sound .It is so amazing for me .

The world without design just black an white .Let change the world by the power of D.E.S.I.G.N

Weekly Update- 02

21:55

Things need to know before start interactive web design :-

Have knowledge about fundamental of web page , which know about tag in html , css and the basic screen size for mobile , desktop & also laptop.

Instead of having fundamental of web page classes , you might learn basic knowledge for webpage yourself through this website :

>>Suggestion Website To learn about css & html

Click me

What this website and function about ?

CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS describes how elements must be rendered on screen, on paper, or in other media.

This tutorial will teach you CSS from basic to advanced.

There are much tutorial inside this website, you might test changing the coding and see what is the result ! That help me a lot in understanding what CSS is .

Weekly Update -01

23:51

Time Flies ~

1 month SEMBREAK had end and i am starting my Multimedia Design Year 2 Sem 2.

There are totol up 5 subject we taken for this semester.Which is Interactive Web Design , Multimedia Video and Audio (Which is learn how to edit and shoot video -Videography),Instructional Design , Animation and lastly Civic .

Today i am going to share what had i did for Week01 .Hope i might help you guys who are intereting about what is multimedia design and multimedian.

In week 01 we will only have lecture class instead of practical class.As a multimedian , we didn't have exam like other course .In short , we are having 100% course work (Assignment).The quantity of assignment is based on how much our tutor want to torture us haha ! This whole week we will only have some briefing on what we are going to do in following week and brief on the subject.What is .... blabla bla

*Theory is also very important to us , so we can apply the theory in our work. Although we didn't have exam.

If you want to know more about these subject that i show above , do check my blog weekly . I will update my blog weekly from now about what had i learn i multimedia course. Terima kasih =D

Additional :

In these few days i am currenly busy about my Society recruit members activity at TARUC.
We are having 5 days activity for recruit RED BRICKS SONG COMPOSITION new members.
What make Red bricks different with other music society is we learn how to create own song and we provide a platform for who are talent to perform their own song & to express themselves.

Beside that , there are heavy haze in Malaysia ! So please keep your mask on when you are going outside ! The haze might make you sick . Take care guys <3