Interview with client 5

Me: Now that I've finished desiging the website, what's your opinion on the website?
Yvonne: I think that you've done a good job considering the fact that you started the project off without any knowledge of the typical South Indian dance.
Me: Do you think the background suited well enough with the whole "theme" of the website?
Yvonne: The bacgkround definitely suited the theme as it didn't make the website dull with dark colour or complicated patterns. Instead the background was simple and light makinig the viewer feel more "awake" when they browse the website.
Me: Did it contain enough information? Was the information too chunky?
Yvonne: I think that the website consisted enough amount of information for a person to understand fully the basics of Bhratanatyam. It wasn't too chunky as photos were provided with the text as well.
Me: Is there any improvements that I could make to the website?
Yvonne: You check the website as I spotted a few grammar mistakes.

Adding a comment section into my website

On the menu bar, I've made a "others" tab. When viewers click on this tab, people will see a comment box. This way, when i send out my links to people, they will all be able to give me feedback as when they commented, it would automatically send me an email to see what they wrote. This way, it would be a fast and efficient way for me to improve my website.

25/11/10 : The first video I added

Some of the steps in the Bharatanatyam can be very confusing. I've went onto youtube and searched up some video/tutorial for the steps. I chose to do this because I think this would better display to the viewer how each step should be danced seen as they would have a clearer idea on how to dance the Bharatanatyam. Furthermore, it will be less boring as it's more interactive than just reading off the website.

But I'vealso added some text to explain simply what that step is in case the viewer gets confused with the video tutorial.

25/11/10 : Adding Videos

To add a video, I've clicked on "multimedia" along the bar on top. Then, it showed up with tabs saying: photo gallery, slideshow, file etc. I wanted to add a youtube video into my website therefore I clicked on the youtube tab and dragged it into my website. Then, I wenton youtube to get the link and pasted the link when it showed the edit option.

Now, I have a video that my viewers can watch. You can also position the video to the left, right or centre of the web page. I decided to position it to the left.

20/11/10 : Using CSS to change the background

For the template that I've used, there's a bar at the bottom of the page which says "Create a free website with Weebly" and it was in a brown box. In order to remove that, I would have to pay to upgrade to Weebly pro but I chose not to.

As the brown box doesn't fit with my background, I've decided to make it transparent. I went to CSS again and typed in the transparent colour code to change the background to transparent. Now, even though the words are still there, it wasn't as visible as before.

14/11/10 : Interview with client 4

So far, I've finished these pages: home page, history of the dance, costume and hand gesture. I've decided to show my client to see what she thinks of it so far. We had another interview to discuss the website.

Me: So what do you think of the website so far?
Yvonne: I think the background really suit the style of the dance and also the colour of the text is good as well, because even though it's white, it's still visible to the reader. Also, I think that it's very consistent how the images are nearly all the same size therefore it looks very neat and organised.
Me: What else would you like to add into the website? Videos?Comment box?
Yvonne: I think you should introduce to the reader some basic steps to learn the Bharatanatyam, however there are many so just briefly describe what each does. You should make another tab in the menu bar for the videos and get videos from youtube on professional dancers.
Me: Would you like to include a comment box?
Yvonne: I think it would be a good idea because you can have suggestions not only from me but other viewers as well and this can further improve the quality of the website. You can make another tab perhaps which says "others" or "comments", something along those lines.

After taking in what my client said, I've made a tab under the menu bar which says "others". I've sent out a few links to people who are interested.

10/11/10 : Using two column layout

I've decided to use the two column layout on the costume page and hand gesture page because I think this would layout clearly and simply the information I wanted to include. Also, I could drag the paragraph tab or picture tab into either column and I find this to be very useful. The images or text won't go all over the place even if I add a new object to it.

6/11/10 : Progress of my website

I've created the "about the dance" webpage and filled it with information.

1/11/10: Online Bharatanatyam

I found a website called the Online Bharatanatyam. It shows the history of the bharatanatyam dance, hand gesture and all the basics you'll need for the dance. I've decided to use the images from her website as they all show clear demonstration of what I intended to do.

I sent an email to Anjali Nandan, the website owner to ask if I could use her photos in my website, I now have her permission to use her photos and videos but I will have to include credits and links that will direct it to her site.

22/10/10 : How to add text and images into the website

Once I started on weebly to make my website, I added the background, I then chose a template for my website. The one I chose have a huge wide landscape picture across the top and the menu bar is located to the left.

In weebly, there's a "menu bar" located at the top and it includes pretty much everything you need to create the website. Under the "elements" tab, it shows "Paragraph with title, Paragraph with picture etc." You just have to drag that element in and you'll be able to write or add photos to your website
Then, you can click "publish" on the top right hand corner and other people can view what you've made so far..

16/10/10 : Weebly's editor menu

To add materials into your website, you just have to drag the tabs into the website. You can drag paragraphs, pictures, videos etc. into your website. It's also very easy to use because if you want to delete the object you've placed into your website, you just have to scroll over that object and a red, cross button will show top left of that object.

12/10/10 : Creating a background for my website

I've found a picture that I could use for the background of my website. The photo I found on google was labeled for reuse with modification. The problem with this picture is that on the top left hand corner, there's a text saying "twitround" and in order to remove that, I used Adobe Photoshop to do so.
On photoshop, I did "alt-click" to select the area I want to clone. Then, I clicked the clone stamp tool and apply it over "twitround" to cover it.

Back on weebly, when I wanted to edit the background, on the top right hand corner, an "edit HTML/CSS" tab pops up. I clicked on it and the tabs now show "HTML, CSS, Files, Preview, Help".

As I want to add my photoshopped background file into my website, I clicked file and uploaded that image. After, I clicked the "CSS" tab I typed in the file name of that image, which is "indian-summer.jpg" next to where it said "background".

Now, my background will be the one I photoshopped for my website.

9/10/10 : New website makng software

Today, my client came up to me and showed me a new website that I can create the website for her. The website is called www.weebly.com My client prefers this over Wix because after looking through websites that have been created on weebly, my client feels weebly gives a more professional look to the overall product. As I just started on Wix, I will have time to start another website again.
I've decided to name the website btnyonline.weebly.com. "Weebly" needs to be added into the website address otherwise payment will be needed if you wanted to have your own unique website address.

3/10/10 Screenshots of website

This is a screenshot of a preview of my website, the page being shown above is my introduction page for my client's website. I chose a template from Wix and edited the colours to fit the theme of my website. I also changed the boxes to a beige/yellow colour to fit in with my website. I've managed to link all of the menu buttons to open a new page when customers click on it. The information on the information page should rough be final, it should be the amount of writing that I will have for that page. I added a photo slideshow on the top right hand corner of the website as this will be slightly more interactive for the customer.

This gives a clearer image of the photo slideshow. When customer move their mouse across the slideshow, the photos will start moving to show more photos of the bharatanatyam dance. I chose a black rimmed slideshow for this website because it goes well with the theme.

20/9/10 Interview with client 3

More about the bharatanatyam dance.

Me: What are the most common colours used in the Bharatanatyam costume?
Yvonne: I think black and red colours for the costume is a good mix because these colour combined with all the jewellery you will wear really makes you stand out from others. Other colours which would match would be red and yellow, red and orange and dark green and orange.
Me: How many different hand gestures are there?
Yvonne: There are actually alot of hand gestures in the dance. The hand gesture represents what is to be said by the dancer as it communicates the meaning to the audience. For a beginner they usually learn these three first: pathaka, tri-pathaka, arda-pathaka.
Me: How does the foot work impact on the dance?
Yvonne: It doesn't do much as the hands are more important - it shows the grace in the Bharatanatyam dance.
Me: What are the first few songs that all beginners would probably dance to?
Yvonne: 1) Alaripu 2) Jhatiswaram

8/4/10: Interview with my client 2

Me: After exploring both Wix and Adobe Dreamweaver, which do you think will be more suitable for your website?

Yvonne: I think Wix would be more suitable for my website It's because some of the templates on Wix really have the "red-yellow pattern", these colour are stereotypically in Indian websites. The users will instantly have a link to what the website will be about.

Me: Would you like to include some sort of photo slider for the photos that I intend to put onto the website?

Yvonne: I think that's a good idea because the user might find it more interesting that the photos cane be slightly interactive instead of just having the photo flat out on the website.

Me: Would you like to have the background/ wallpaper of the website the same for each of the pages?

Yvonne: I think the wallpaper should stay the same for all the pages otherwise it would get too confusing and overly colourful for the users.

Me: Do you want all the pages to have roughly the same layout?

Yvonne: They can be roughly the same but not exactly the same.

Monday, 23rd of August 2010

Over the summer holiday, I've collected most of the for my website about the bharatnatyam dance and the information were all split into different pages on the website. After researching, I've chose the information which is simple and at the same time gives lots of information. Then I gathered all these information together and tried to sum it up in my own words to write up a new set of information on my own. However I think some of my information are still too "chunky" therefore I might still have to cut down some information otherwise the customer might get bored awhile later after reading it.

I've recently downloaded Adobe Photoshop in my home computer and have tried to play around with all the effects there. I will then try to make a collage out of all the photos I've gathered from the internet, if some photos are too dark or needs some sort of adjusting, I can try to use Adobe Photoshop to fix it up. (Also, the photos I found on google weren't copyrighted therefore I can adjust and edit as many times as I want to)

After exploring around Adobe Dreamweaver over the summer and knowing all the basic functions to make a simple website, I would now like to try Wix.com (a flash design creation site) and see how Wix can create my website. Having to have used both software by then, I would then come to a final decision and see which would be a better fit for me for making a website. I would also talk to my client and ask for her opinion on my decision then.

What to do next:
- Explore Wix.com
- Have a talk with my client
- Cut down some information
- Make a collage of the photos I found on internet

What to do

I need to:

1) Find more pictures
It's becuase I need pictures for the collage banner and also pictures for other pages on the website. I also need to find specific image of each hand posture therefore I can show the customer how each of the hand postur look like therefore it will give them a more clear and better understanding of each hand posture.

2) Research on the bharatnatyam dance
I will start researching about the dance and gather some information together. Then, I will select the info I will include, try to put them in my own words and put it into my website. I will need information on - history, hand posture and dress codes. These will be the main pages with information on the dance.

3) Trial version of dreamweaver
Over the summer, I will try to download the free trial of adobe dreamweaver and explore further the important functions that I will need to use to make my own website. So hopefully when school starts, I am quite familiar with the program I'm using.

Some errors on diigo and Wix

After adding a few more youtube links to diigo during the lesson, I've noticed that during the previous lesson, the photos i diigoed from google didn't work. Out of five photos, three of them just directly links back to google and not the image. Therefore, I have to try and search the photos that I want to use on google again.
On the other hand, the youtube links i saved earlier on still shows up to the video that I wanted.

Wix.com is a free flash design creation site. This website can also allow me to create a website for my client, therefore instead of using Adobe Dreamweaver, this might be another way to create a website. Also in my opinion, I think Wix might be easier to use than Dreamweaver since it doesn't seem to have alot of complicated functions to work with.

Knowing the basics of Dreamweaver

During the lesson, I went on youtube and searched how to make a basic website layout on Adobe Dreamweaver Cs4. After watching a few videos,I've managed to create a simple website with coloured backgrounds and links which can bring me to other pages.

I've previewed it on the internet and both links linked to the page I wanted it to open up to therefore it showed that I didn't make a mistake whilst making it.


Then, I looked up other videos on youtube. This time, i wanted to know how to add photos into the dreamweaver website. Following the instructions on the youtube video, I've managed to put a photo onto the website. I previewed it on the internet and the photo showed up just fine.

Final website design: Others

As one of the fitness for purpose was evidence of in the field testing, I've decided to create a comment box to let people give me feedback on my website. Through this, I can also further improve my website and at the same time know the strength of my website.

Final website design: Videos

As I've mentioned before for my initial designs, I would find videos on youtube and put it onto my website. I will display 3 to 5 videos of the bharatanatyam dance. Some can show how you perform a certain step in the dance and some will show a section of the bhratanatyam dance performance.

Final website design: Basic steps

For the basic steps page, I will have photos on the left and a description of it on the right. I predict that there will be 5 to 7 basic steps for the bhratanatyam dance. Each will follow the same layout as shown above.

Final website design: Hand gesture

This is the hand gesture page. I've found out that there were two types of hand gesture: Asamyukata (single hand gesture) and Samyukta (double hand gesture) and each have numerous hand gestures.

There will approximately be 5 to 7 more hand gesture for both Asamyukata and Samyukta. They will follow the same format as shown above

Final website design: The Costume

For the layout, I followed my initial design layout by dividing the page into four sections. I've decided to keep to collage there. It will be kept there throughout all the slides.

Final website design: The Dance

After doing some research beforehand, I've picked out the most important information and using my own words, I've decided to include it into my website.

I will use the photos that I saved using diigo. They were all allowed to be "labeled for reuse and modification" .

Final website design: Homepage

This will be how my homepage for my websit will look like. I created a background which was pinky and orangey. This background will be used for all the other pages.

More detailed sketch of my design: Other links

The other links page would be very simple. It only includes links to other bhratanatyam website.

More detailed sketch of my design: Videos

After looking through videos on youtube, I will choose the ones that I think portrays the bharatanatyam dance best. I will then ask the owner for their permission to use the video. If they won't allow me, I will go onto youtube again and look for other bhratanatyam videos.

The still shots page will hardly include any text. The reason for this is because I decided that this page will display purely images of the bharatanatyam dance. It will show the different types of position there are, the colour of their costume etc. It aims to show the varieties the dance have.

If users does get confused, I will add a sentence or two to each image to explain to them what the image is conveying.

More detailed sketch of my design: Hand gesture

I will arrange the photos by having two photos side by side each other with description below them. I won't have three photos side by side because the photos might end up being too small therefore it would not be clear to the user what the photo is showing.

For the font, I will use the same font and colour. However, I will change the size ranging from 10 to 11. Also, for each description, approximately 30 to 50 words will be used to explain the photo.

More detailed sketch of my design: Dress code

For the dress code page, I will have pictures on the left and have a on description the right to explain to the user what or how you wear a traditional Indian sari. Through this, it should be more clear to the user what the image as trying to tell them.

All the photos I find will not be copyrighted, even if they are, I will try to get permission from the owner before using so.

More detailed sketch of my design: History page

This is the history page of my website. I will be using the same background as the homepage. I would divide the page into four sections: two for pictures and the other two for information. That way, hopefully the page will seem more interesting.

All the font, font size and colour will be the same as the homepage.

the subtitle for this page would be: "Origin of the dance"

More detailed sketch of my design: Homepage

This is the more detailed sketch of my website. The image above shows the homepage / welcome page of my website.

It would include:

- a collage

- a photo

- a music player

- information on the dance

The information would be written with font size ranging from 10 to 13. I would be using san-serif font (E.g. Calibri, Arial, Tahoma) to make it look more modern. The text would be in black colour.

The menu bar will also be in the same font and the same font size.

For the background, I plan it to have red/orange/yellow background. I chose these colours because these usually represent the colours of India.

ICT analysis

http://www.scribd.com/full/31098829?access_key=key-26svo5wa0epi0pehrh9k

This is the link which shows my ICT analysis powerpoint in flash.



A screenshot of my ict analysis powerpoint in my eportfolio

Catching Up - sketches of my website

These are the sketches I did for my website, I scanned them into the computer to show evidence of it. The layout of these sketches will probably be the same as the actual website which will be made. Some photos and youtube videos I will use were saved in my diigo account.


This was my first sketch on how my website and some of the pages will look like. However, it was not detailed enough, I needed to have more details on my design so someone else can make it. I also need to include what fonts I need to use.

Getting ready for the website

This lesson, I've looked through google to find pictures for my website. However, we have to use photos on the internet which allows us to copy or modify it. Therefore on google, I need to use the advanced image research and select an option which allows me to use photos that I can copy or modify it.
There were four options to choose from:

• Labeled for reuse
  Your results will only include images labeled with a license that allows you to copy and/or modify the image in ways specified in the license.
• Labeled for commercial reuse
  Your results will only include images labeled with a license that allows you to copy the image for commercial purposes, in ways specified in the license.
• Labeled for reuse with modification
  Your results will only include images labeled with a license that allows you to copy and modify the image in ways specified in the license.
• Labeled for commercial reuse with modification
  Your results will only include images labeled with a license that allows you to copy the image for commercial purposes and modify it in ways specified in the license.

For my searches, I've used "labeled for commerical reuse with modification". This will allow me to copy the image and photoshop the image if so. When finding photos on google, the ones that I think is suitable for my website, I copied the link and saved it on diigo to show evidence that it's not a copyrighted image.

I've also looked through youtube and found some videos I can include in my website. I found a video which is very useful because firstly it's a basic step guide and it includes english caption which will be extremely useful.

Screenshots:

Analysis Powerpoint

This is one of my slide from my analysis powerpoint, I've still been trying to add a voice recording and convert it to flash. In my analysis powerpoint, I have slides of the interview with my client and evidence of similar existing products. After I've managed to add a voice in, I will convert it into a flash object.