Checklist for Media and Sourcing of Images/Videos

Today, I have looked at what aspects I need to cover in order to complete my brief ...

1. Research for Website
2. Development of Website
3. Skills Demonstrated

4. Evaluation

To also complete the Newspaper Advert and Double Page Spread.

Here are my time allocations which I completed at the start, so I meet all deadlines so my coursework will be finished on time:

Website Research - September 7th - 21st

Planning (layout and design) - September 21st - 28th

TV Channel Research and Website Content/Planning eg. Listings, Content - September 28th - 9th October

Preliminary Task - Newspaper Advert and Double Page Spread - October 12th - 26th

Main Task - Development of Website - October 26th - November 23rd

Sourcing Images and Other Media eg. Video - November 23rd - 27th

Evaluation

Evaluation of Skills Demonstrated - November 27th - December 4th

Audience Feedback and Evaluation of its findings - December 4th - December 11th

Final Evaluation of Preliminary Tasks - December 11th - 18th

Final Evaluation of Website - December 11th - 18th

The first week of January back in school is to spend double-checking all work is complete and sent off. Blogging is to be done regularly of the work completed.

Sourcing of Images

Throughout the production stages of this coursework, I have used many images and some videos in my website. Some are original, and others are from the Internet. Here, I am going to source all the images and videos used, saying where they have come from and why they have been used, starting with my original images and video:

Original:



Me and a friend took this at a gig a while ago. It is very music related, and the dress sense, fashion and attitude is very visible from this photo, so I thought it was very appropriate. It is used on my homepage and in the slideshow widget.





This photo was taken at the CIA, where Take that were on tour, with 'The Circus'. The photo is used on the homepage as the main image on the news column and on the news page.






This photo was taken at a local gig of a band, with some members going to my school. The photo is used on the homepage in the news column. There is also another photo of this band, which is used my widely on the website:




Here is the second photo of the band. This photo is used more widely on my website, being used on the competitions page (to win tickets), on the news page and on the reviews page, within the panel buttons as the artist/band of the week.





This photo was taken at a new years eve party, with the musician being from my school. The photo is used on the homepage in the music column.







This photo was taken at a sixth form party. The photo was used on the homepage as the main image for the shows/listings column and in the slideshow widget at the top of the home page, and used on the listings page under 'picks of th week' section.







This photo was used on the News page.









This photo was used one of my forums pages. These next few photos have all been used on my forums pages:

I took this photo of an Apple Mac, which has music technology equipment and studio functions. I have used this photo for my competitions page.

Video:

I filmed this video at the schools talent show. It will be used on my forums page.

The sourcing will be continued in a later post

Building my Music Players (making play buttons)

Recently, I have been researching and watching tutorials at home, learning how to make a music player. There were two ways of doing this from my findings, one which involved literally making the play button. I tried this method first, which needed Adobe Flash Professional. The video on youtube talked me through the process, using two images layered above each other to make the play and stop function. However, once completed, my buttons would not play properly.



I then tried out the second method which I had found, which was a lot easier to do, and didn't involve making the button from scratch. Again I used a youtube video tutorial to act as a walkthrough over the process. This method involved taking the embed code for a youtube video of your choice (if of course the video and owner of the selected allows this), copying it into the html code view in dreamweaver on the page which you require (on my website, it will be going onto my homepage and music player), then deleting the parameter sections of the coding away. Then, in the code, there are width and height options, so I altered it so it was very small, so all that was visible was the play button.

I added a play button to the homepage (top frame), but also added a autoplay function to it in coding, so it would automatically play when the teenager enters the website. The play button will be in the top banner frame, so even when the user goes to a different page, the music will still be playing. I have however left the play button visible, so if the user does not wish to listen to it anymore, then they may click on it so it will stop (pause).


I have also added these plays buttons to my music player, but with some, I have increased the length, so the user can move the scroller on the player back and forth along the track.




The addition of a music player to my website really enhances what the TV Channel stands for, which is young teenage music. The website would allow the teenager to listen to music which they would be able to listen to on TV Channel, even though they might not be anywhere near a television.


Here are some printscreens of the play button on my homepage, and my music player page on my website:

Homepage - The play button is in the top frame, to the right and underneath the searchbar

Music Player Page - There is a small collection of singles on this page, with images above the youtube scrollers/players

Here is an example of one of my play buttons, which will play when clicked...

Iyaz - Replay (does take a couple of seconds to start)

Production and Development of Website

I have set up my website so there are six pages, which are Home, News, Reviews, Listings, Music Player and Competitions. I have also made a template, so when each page loads, the logo on the top stays the same. This was mentioned to a certain degree in earlier entries, when I explained how I was going to use a Frameset. One primary aim of a frameset, is to ensure that each frame is independant, so each with its own content. However, I used this to my advantage. In the html coding, I set it so apart from the Mainframe, the three other frames would not have scrolling capabilities. These frames are set, so this means the top frame, where there is a navigation bar, would not move down with the rest of the page, making it very easy to the audience to navigate around the site.

In this blog entry, I am going to annotate what I have done so far on each page. All images and videos will be sourced, with most of both mediums being original.

Home

Here is a printscreen of my Homepage so far: (all these printscreens shall be taken when websites are in live view on Internet Explorer)

I decided that I would have a homepage, as it is a widely used page on many websites as the starting point, with information on other pages on it, so the audience can see what the website has to offer. It also provides a quick clance at what the TV Channel listings are for the present time, eg. what is on NOW, then what is on next and then later .. The homepage is there primarliy to make it easier for the audience to navigate around the websites, clearly illustrating what content is on what pages of the website.

News

Here is a printscreen of my News page so far:

I decided that a news page would be appropiate for my website, as the TV Channel is Teenage Music related, so any entertainment news would deefinately be an interest to my audience. The page will offer its audience the latest news, breaking news and any celeb goss.

Reviews

Here is a printscreen of my Reviews page so far:

I decided that a Reviews page would greatly enhance an interest in my website, as it would give an insight to its audience as to what we (TMH) think of the well known stars/singles/albums etc. There is then a hotspot (button) which allows the audience to be directed to the itunes website, where they can download the selected single/.. To the far right, there are TMH's top rated single, album and upcoming star. Lower down the page, there are then game reviews. I felt that adding game reviews would be appropiate to the website, as teenagers are the largest consumers of games sold today, so this may be of interest to some teenagers.

....

On this next printscreen, on the right, there is a collapsable panel (on adobe dreamweaver, this type is actually called a spry accordion)

Listings

I have added a listings page to my website, so the audience will know when certain programmes are on, even without being near the television or without going out and getting a listings magazine. The listings table pinpoints any new programmes which are new to the TV Channel, and the Picks of the Week's section at the bottom allows the audience to see what TMH thinks is the highlights of the week.

Music Player

At this present momment, I have not been able to effectively start this page yet. I am concerned as to what way to approach this page. My teacher has suggested to use a widget (eg itunes widget), but I feel that this would not statisfy what I am looking for. I want to be able to have information (and possibily an image) on the left, then on the right side, a play button, where the audience can interact by clicking the play button, then listening to it, as well as an option to stop. I feel a widget would be too small, and would be like a playlist format apperance rather than a comprehensive list of artists, information and then the play function.

Competitions

The Competitions page provides a large array of quizes and compeitions with very rewarding prizes. I felt having this page on my website would give the audience something to do whilst they were bored, giving both interactivity and entertainment to my website.

Creating my Navigation Bar and hyperlinking it.

Today, I decided to add a CSS Style to my links, which is my navigation bar, to the other pages on my website. (The links in at the top, such as News, Reviews etc..). I used w3schools website to help me learn how to do the html coding for it to work. The effect I wanted to acheive is when the user moves the mouse over the link, the background behind it changes colour. For it to work, I made the frame background black, then coded it so when the mouse hovers over 'Home' for example, then the background behind that word changes to light blue. This gives the website a very friendly and interactive addition.

However, I would also like to have it so my buttons have backgrounds to them, like a colour gradient to them. This would make each button look more attractive to start with, as well as giving them live. (MTV have buttons which don't change colour).

In order to even comtemplate this, I first needed to create my navigation bar. Whilst learning how to make a website using youtube videos, I found a good way of creating a navigation bar, by inserting a SpryMenuBar. This customizable navigation can be created in Adobe Dreamweaver, by going to Insert, Spry, then SpryMenuBar. I chose horizontal when prompted, and then a basic navigation bar appears. This widget is very handy, and can be coded to have a background changing colour when a mouse hovers over it (this is done by going into the Spry Assests folder where your work is saved, then going to the css. folder marked menubar horizontal. There, there is some coding under 'Menubaritemhover' , where the colour can be changed, so when you hover over a button, the colour will change. ) I have coded the spry so when a mouse does hover over a button, the mouse pointer changes, indicating a hotspot/hyperlinked image.

Here is my navigation bar, with the six pages which I am going to have:

The six pages are Home, News, Reviews, Listings, Reviews, Music Player and Competitions. Each button is hyperlinked to the appropiate page, making it easier for teenagers to get around the website, additionally instantly informing them what the options the website has to offer.

In order to successfully hyperlink these buttons, you need to click on each box (in the text), then go down to the properties tab at the bottom. Then, set the target to 'Mainframe' (this appears in the drop-down when the frameset coding has been modified, so the middle frame is labeled as Mainframe'), so the change of content will appear in the middle frame. Then, go to the drop-down where it says 'link', and select which page you want the button linked to. I have set up five more empty html files, so the home button should link to the Home.html file, etc..

Software Packages, logos and initial setup of Website

It has been a while since I last updated this blog, due to network crashes, teacher training days and power cuts - a little annoying. Up until today, I have planned the layout of my homepage, as well as learning how to use Adobe Dreamweaver - the program by which I will be creating the website. Within the same software package, I started by creating my logo for Teen Music Hits in Adobe Fireworks. I started by creating a spiral shape, giving it a blue fill, which is one of my house-style colours which I have chosen to use (example of keeping to design conventions). I then copyed this logo into photoshop, then started editing it, adding effects like shadows, better colours and a silvery retro (like metal) background to let the logo stand out. Once completed, I then went into page properties in dreamweaver, and made my logo and top banner (where my searchbar will be) the background image.

I feel that its effect is successful, similar to the BBC Switch website, working well as a header.

Here is my logo for Teen Music Hits. The original logo I have taken into Adobe Photoshop, then added different effects, so it enhances its look and feel, making it more retro/teen savy.

Teen Music Hits logo

This logo has been inspired by my research of logos, which was a circle shape, with an attractive surround and retro style text in the center, with the websites' name/title. My logo started its development in Adobe Fireworks, where I created a spiral shape, with a light blue fill. I then used two different types of font layered in front of the spiral, both uniquely teenage friendly, to produce the text. The top line reads 'Teen Music' in a slightly smaller font. Then, in the second line, the word 'Hits' is larger, emphasising its meaning and possibily drawing in an audience.

After this, I then copyed my logo from Fireworks to Photoshop, which I am now more familar with after completing the Foundation Portfolio element of the A Level course. I used my skills with this software package to effectively enhance my logo, by adding lighting effects to create shadows within and to the left of the logo, and additionally to create a silvery, teenage savy border.

Special Shows TMH Logo

Teen Music Hits Logo and Banner (which will be used in the top frameset)

Once I had completed my logo, I then created a series of boxes, which all came together to become the top banner of my website. I then decided that I would possibly keep this top banner for my later tasks on producing a newspaper advert and double page spread, as it was easy to manipulate, and I also found it very eye-catchy. I left the bottom, lighter silver box empty, so later on, I could insert my navigation bar onto, keeping my website organised. I then saved it as a JPEG file, then opened up Adobe Dreamweaver.

Setup of Website

To make my website, I used Adobe Dreamweaver CS3 (and on occasions CS4). When on Adobe Dreamweaver, I needed to begin my website, by firstly creating a new html file. Each html file would be a page on my website, so I started with just one to get the basics of making a website for the first time. I started by structuring my website, by applying a frameset to my blank page. To do this, I went to Modify , Frameset , Split Frame Right. The page then split into two halves. I then pulled the new dividing line to the right side, leaving some room. I then split the frame again (now the larger one) Split Frame Left, then again going to the middle frame, Split Frame Up. After some fine tunings, I had my basic frameset, with two side frames, a top banner frame for my for my logo (illustrated earlier in this blog) and my middle frame, which will be refered to as my Mainframe. (the navigation bar will need to be hyperlinked, with a target of the 'Mainframe' so pages will correctly load in the middle frame.) I set up a frameset structure like this, because lots of popular websites have all the content in the middle, and the two side frames could be used later on to show other options. I find the layout is organised and will be very attractive to the teenage audience when it is all complete.

A lot of making the website was using html coding, which was very time-consuming and difficult for someone who doesn't know the correct terminlogy. I did though use youtube for help, by watching tutorials on how to make a website.

Before I saved, I managed my site, by going to site, then manage site. I did this so all my work would be saved accurately, so all my files went to one folder, images to another, videos to another etc, keeping everything neat, preventing the loss of work.