Friday, 30 November 2012

Production Log - Unit 19

Monday 19th November

We wrote up a rough copy of the email to our client Mr Hutchinson about setting up a formal meeting that was voice recorded for evidence  The picture below shows an what we wrote in our letter. Our aim is to run through everything that the client may want on their website and also go through our market research, with an understanding of their view on it. From this we will not only achieve a greater understanding of what the client wants out of both the website and video, it will give us the chance to develop our skills and make the most proffessional standard website we can.

Tuesday 20th November

 We sent an email to our client Mr Hutchinson about setting up a formal meeting that was voice recorded for evidence  the picture below shows an what we wrote in our letter. The picture below shows what we wrote in our letter.This was sent and we hope to receive an email sooner this week to allow us to adjust our website plans to make the best website we can. The reason we contacted Mr Hutchinson through email was because it was a proffesional way without disturbing him from his work. It was also better because it can be shown as evidance that we have talked to him as well as the voice recording we plan to use in the interview. This is the email below.

Thursday 22nd November


Today, I wrote rough ideas of themes, colour schemes and names that we could ask our participants. This will allow us to gather as much information as we can and also get a better understanding of how to make a good and proffesional website.Whilst I did this, Dieter researched into other websites related to sports and got inspiration from them to ask people about on our questionnaire  From this we created a word document showing all the different types of elements that where used and how effective they where by doing it. This will let us see how we feel about adding them to our own website and asking our client, Mr Hutchinson his intake of it. We put a lot of thought and contributed ideas into what questions we could ask in our questionnaire. We had to make sure they where appropriate  they where closed questions and that they would give us a direct answer instead of multiple choice. An example of a question we thought of was ' what colour scheme do you prefer' and four options. This would ensure the participant had a wide range to choose from and also

Friday 23rd November 

During the course of this lesson, I created a Gantt chart that showed all we had to complete and the deadlines for each task through the period of the project. A Gantt chart is a type of bar chart that illustrates a project schedule that we created   Microsoft project software. As I wasn't familiar with the software, Microsoft project, I had a play around on it first before I began it to familiarise myself. Whilst I did this Dieter started writing the questions out for the questionnaire and also adjusted our ideas we came up with last lesson. We both imputed on each others work and had a strong understanding of what we where both doing so if one of us was absent we could pick up from there and continue to meet the deadlines. For mr Zafars part of the course on digital graphics we created one on all the  An example of a deadline set was Initial sketches, Branding Guidlines ammended and Sign Off Meeting. This required sections such as inital sketches of graphics that we will be using in our website. Making two gantt charts will be a challenge as I have never used them before.
Monday 26th November 

During this lesson or task was to fully complete and conduct market research into how people thought we should layout or website. To do this we created 6 questions on elements such as the shapes used in the logo and the theme our logo will have. We then gave it to 15 sixth form students to fill out and give it back too us. After, we counted up the tallies we wrote them down on a document on the computer in case the sheet was misplaced. This helped us overall have a better understanding of the results to talk to our client about them fluently without looking at them for reference.

Tuesday 27th November

During this lesson we analysed our market research results by creating graphs and wrote up plan of what needed to be talked about to Mr Hutchinson during our interview on Thursday. This consisted of elements like the colour scheme, the logo, the photos used, the videos used and much more. Dieter received an email from Mr Hutchinson asking him what slot we wanted to have for the meeting which in reply we chose 12.45. The graphs will show both me and Dieter and Mr Hutchinson a clearer view of what the participants of the market research felt. In the plan, we evaluated what the advantages and disadvantages of each question. For example the first question involved what we called our website and we only offered two options. These where both profesional which would involve the older members of the public like students parents, however may not engage the pupils as it lacks in humour and originality.


Thursday 29th November 

In lesson we prepared and made a wordle and mood board. Wordle is a website that allows you to create a text box that is made up of a number of different words. In this case we used words relevant to our course in terms of the website. We did the mood board on a website named ...... as it gave us a variety of different options too choose from to make our mood board look to a proffesional level. We used images for this from when we were in miss Merricks lesson taking photos of the sports hall etc. A problem with using this website was that when i signed up to the website, the confirmation email didn't come through until after the lesson. To solve this we therefore had to sign up again using Dieters email and it came through straight away. This meant me and dieter worked on the mood board on his account. At 12.45 we had our meeting with Mr Hutchinson that we had been organising since last Monday  We borrowed a microphone from the school so that we had evidence of the meeting. During this meeting Dieter went through all the aspects we wanted to know about Mr Hutchinson design ideas and also what to show him our results of our market research. Whilst he did this I held the microphone to ensure that their voices could be heard clearly. However, I feel as if I should gotten involved in the discussion. I listened carefully to what Mr Hutchinson wanted in the website.
In terms of the website video of the project, Mr Hutchinson had many ideas that we further thought where easy to achieve. He said that he liked the website for the English Institute of Sport (eis2win.co.uk/) as he said it incorporated all the key aspects he would look for in a website. For example he liked the background and how the colours where all vibrant and bounced off one an other without taking all the key attention of the main text and images in the centre of the website.  We agreed with him on this and decided that we will consider colour schemes and background ideas to make it similar or identacle to the one on the website above. A few features the client suggested where...
- video interviews
- clean informal font
- smaller videos
- both informative and formative language etc
After saying these affirmative decisions he wanted for the website and videos, the rest was up to us. We can achieve video interviews by asking the two members of staff he suggested, which where Mrs Hampton, Mr Hutchinson himself, Mr Pickard via email to come and say a few words about the department. Specifically, Mrs Hampton could discuss the PE department as a hole, Mr Pickard could discuss the grades of pupils and how well the school is equipped for them to get the best grades, and finally Mr Hutchinson can discuss all the sporting opportunities there are available and also the sports they facilitate. This will cover hopefully all the best bits of the PE department as well as inform the viewer of the video. The most effective, clear, informal font we can use is either Comic San MS, Bradley hands ITC, Tempus Sans ITC or maybe one made off a website. For example the website font space (http://www.fontspace.com/category/informal?p=3) has a wide range of informal and formal texts that can be used on websites. However the issue with this website is that there is only a small amount of text you can write that it will convert, further more making it difficult when you have to have paragraphs of text. To add smaller videos onto the website, these will be in a tab on the menu bar that will take the viewer to a page all full of relevant videos as well as having the key most important videos on the main page. For example Mr Hutchinson suggested one about the Olympics. We can achieve this by embedding them from you tube onto our website because it is a free and easy method to get  good and high quality videos onto our website. As Mr Hutchinson wishes for both informal and formal text, we will have to write up a script or plan of what things are appropriate to say and which aren't  The informal text would add humour to the site and make it more conversational, engaging the pupils and younger viewers. Where as with the contrast of formal text will show the proffesional side and also attract the parents and older viewers. Finally, Mr Hutchinson gave the idea that on the second meeting we could go through design ideas for elements such as logos and photos that we could consider. However this meeting will be with another member of the PE faculty so there is a second input on the matter. This is a good idea as it gives us more than one opinion and can give us more inspiration to develop new ideas. Mr Hutchinsons exact feedback that he said to Mrs Merrick was the following...

DIP Productions – Dieter & Jessica

Punctuality – On Time!

Professionalism – Excellent. Introduced themselves well and showed genuine interest.

Verbal communication/clarity – Very good. Explained more technical aspects to me!

Preparation – Had to get notes out to show market research but other than that great
The feedback he had given was very good and all positive. As i have already said, to improve i will contribute more into the meeting. We will assure that we are this punctual and prepared for our next meeting, and hopefully recive an even more positive response. We will aim to make more notes on all that we have been doing and show Mr Hutchinson all our work so far. In our next meeting, We will be discussing all of what we have done with Mr Zafar since our last meeting. This intails all the initial designs of the graphics we could use in our website. We will show these to either Mr Hutchinson alone or a pannel of other PE staff to hear there input. Each graphic design will be evaluated and asked if there is any adjustments they wish to make.

Friday 30th November 

On this day we worked on our post production log and the moodboard we created of  photo ideas for our website last lesson. We edited this as we felt we could improve on our work and get more insparation from other sources such as the internet. We did this by adding the photos onto this mood board that we took during miss Merricks lesson as well as ones from the internet which gave us more inspiration for our website. We completed this and plan to show both this and our wordle when we arrange a second meeting with Mr Hutchinson.

Monday 3rd - Friday 6th  December

On these days we made initial skectches of webiste graphics design elements such as texture graphics, navigation bars, logo ideas and screen icons. We did this to give us an idea of a variety of different suggestions that we could potential and also consult with Mr Hutchinson to see if he likes them or would alter them in anyway. However a weakness with doing this was that i was very poor at drawing and my drawings where not in as much detail as they should have been. This something we will work on before our next meeting so the images are worth showing Mr Hutchinson. Without doing this, he may be unclear about each one and what it is, further making me and Dieter look unprofessional in comparison to the other groups. We could print of images of each one that we have created on a software such as serif, so there is a clearer image as well as a hand drawn sketch. This could also show the commitment we have to ensure we have the best work and that it is clear to Mr Hutchinson what our ideas are. Aside each image was a detailed description of what they consisted of. For example we had to discuss the background, and ask the colour scheme elected from our market research was different shades of blue, we had to consider them to suit the colour of text, the logo, the navigation bar and other graphics on the website.

Monday 10th December

Today we finished colouring the last few graphic designs and then we would have completed the task. Both me and Dieter contributed ideas on colour schemes for each element. For example on the logos, we had a circular basket ball shaped object with the words Bluecoat PE department inside.We chose the colours green and purple as they suited all genders and ages as well as the fact the complimented each other very well. Once we had done this, we went to the classroom next door and scanned each one. The scanning machine was very easy to use and we completed scanning all our work in a short period of time.

Tuesday 11th December

We where working on the blogs by adding onto our production logs. This let us catch up on our work and ensure that we where up to date and ready to start the next section. However, this was unproductive as we didnt complete any work that could necasserily decrease the work load we have to complete.


Thursday 13th December

In this lesson we continued to work on our initial designs again. Now that we done number of ideas of each graphic on one page, we need to choose one of each and draw it on a larger scale. Once we did this, we drew it up and edited the original design. We then coloured it in bright colours in order for it to stand out to the pannel of PE teachers. We decided to use the logo with all the different types of sporting balls. We adjusted this by adding the text ' Bluecoat PE Department'

Friday 14th December

Today we worked on our blogs again and added onto our production log. This was good because it gave us time to catch up on our blogs as I was quite behind. We then got some colours and finished of our logo design that we will show Mr Hutchinson. He can further evaluate this and suggest any alterations to our work. We will recieve constructive criticism from this and be able to work on any changes suggested as soon as possiable. If we do this we will get our work done and acheve our deadlines quicker. The disadvantage of this is that we have to wait till a certain time until we can arrange a new meeting to discuss these with him.

Monday 17th - Friday 21st  December

We again worked on our initial designs and created a web banner, navigation bar, background, animated GIF and texture graphics. These were coloured and edited from the original design, and labled as our final designs. This meant we only drew one largely in the centre of a piece of a4 paper to show in our next meeting. This was good as it showed us how we can improve our designs and get our work up to a proffesional standard to show Mr Hutchinson. Looking at other members in our class's work, we found that ours was at the same level and had originality to it. To improve we could pick up or working speed and therefore scan our pictures and be ready for our next interview with Mr Hutchinson and panel.

Monday 7th January


Due to Mr Zafar's absance we did some work for mrs Merrick instead which involved watching a video of another school who where showing examples of each camera angle. We was told that from now on we have three weeks till our deadline on the 25th of January to complete all our video footage. This meant every lesson e had the chance to do whatever and go wherever we needed. We where then asked to remake this and make our own version of each camera angle. We asked our friends, Linh and James to help us in some of the shots, for example the dolly shot and 2 point shot. This lesson was very easy for us as we both already had previous knowladge of each camera angle and didn't need to do any excess research on each one. Dieter bought up a document he made during his old course of each camera shot to help us just incase we needed it. This was our main strength of this lesson. However our weakness was that we didn't keep to filming during lesson time, and therefore had to work through break to complete it. Another is we struggled to think of new imaginative ways to remake the original video so we used the same people, leaving our shots with little variety and originality. Once we did this we uploaded them and saved them to our guinsburg area.

Mon 29th April 2013 

This lesson was our first lesson back with mr zafar so we simply familiaried ourselves of where we where at.
Me and Dieter found ourselves still colouring in our initial designs of our digital graphics that we will then create in a program called fireworks. As Dieter was stronger at drawing, we decided that we would split the task so i would colour and find out what else was left to do on the checklist, whilst Dieter continued to draw. This meant the work would get done quicker so we could be ready for our next task. However, some groups in our class had completed their designs and where starting creating the, which meant we where a little behind. This was our weakness of the lessons, but our strength was that we got to edit a few of our designs and improve them. Mr Zafar at the end of the lesson set us a homework to watch fire works tutorial videos to help us when we make our own digital graphic. This will be beneficial to me and dieter as we could be prepared and get straight into designing them on the computer when we have finished our initial designs.

Tues 30th April 2013


In miss Merrick's lesson we began by evaluating the brief again and discovering what we have actually been asked to do and how we can achieve it to a high level. We sat round a table and shared ideas around the board. This was a strength for us as we went in to more depth of what we had to do and helped us realize how we could improve. Then we where set a task to create a power point to present and show all our work on to make our work to a proffesional standard. This would include us to evaluate each of our initial designs and say why we choose them. Mrs Merrick then sent us an example of what had to be on each slides over email which helped me a lot. Whilst i did this Dieter carried on with the last of the colouring of our initial designs. All i got time to do was add all the slides and get my head round what the power point Miss sent us was asking us to include.  This was an advantage as it meant we would have finished the colouring and couldn't pro long any more time finishing it. It also meant we where on task with the rest of the class by starting the power point which was a major advantage.


wed 1st may 2013

During this lesson, i started the power point properly and covered a lot of slides, whilst Dieter started the digital graphics which we will then add on to the powerpoint at the end. I researched the olympic legacy, brief and client needs and audiance needs during this lesson to add to our power point. The olympic legacy was linked to the Bluecoats PE etho which had a major part in supporting the olympics. At the beginging of the project Mr Hutchinson sent us an email and a powerpoint of what he wanted from he website. This helped me write the brief on our powerpint and further helped me get a better understanding of the audiance and client needs. Whilst, me and Dieter did this miss took our initial drwaings up to reprographics to be scanned and sent to us to add to our powerpoint. This is a efficent and fast method to simply add our drawings to our powerpoint instead of taking pictures of them and uploading them to our power point. This was an advantage as it was so fast, i didnt have to wait long to continue in evaluationg the inital designs we had with the picuters to refer too. I added websites of digital graphics to ours where we got some of our inspiration from so when it came to presenting, we could show how and why we felt we would twist that specific design. There was no disadvantade


Thurs 2nd - Fri 3rd - Mon 6th  may 2013

During these lesson i continued to do the power point as the deadline we have is on Tuesday. Over these lessons all i did was evaluate each of the remaining texture graphics i didn't complete yesterday. After these few lessons i  had completed it all minus adding our texture graphics and a slide on technical considerations that we didn't complete. These lessons all consisted of this, whist Dieter worked on our texture graphics. This was an advantage as we had got it done before our deadline and was on top of our work. We are still yet to ask miss what to include in the technical considerations slide as me and Dieter where unsure.


Tue 7th  may 2013

In these two lessons i began my texture graphics as we could no longer work on our PowerPoint due to it being the deadline today. Today me and Dieter realized something that has effected my work progress. Miss informed us that we both had to make texture graphics, we had to do one each different to the one we have origianaly chosen but yet very similar  This meant i was very behind on the texture graphics and had to get started on them as soon as possible. When i was making the navigation bar this lesson, i  struggled because the software was so hard to grasp and digital graphics is not my strength.  So to help me, i watched a lot of tutorials to help me from YouTube which where very good and easy to follow. As i watched a lot of these it took me a while and only managed to complete one texture graphic this lesson. Today had a lot of weakness and left me with a lot of work to do as quickly as possible. However an advantage was that we did now know what we had to do, which would have been a major issue later on if we where still unaware.

Wed 8th may 2013

At the start of the lesson,  miss showed us how to do a logo and she had done some research and practicing on fire works over night. She had a go at the Domino's pizza logo and went through with us how to create it. This would then give us the ability to do our own during these lessons today. During this lesson i created a logo and a screen icon. The logo was very difficult to do as ours is made of sports balls which had a lot of intricate detail to them. However miss did say that instead we could get the pictures off Google and copy them in. However, we had to ensure they had no logos on so that we didn't copy right any material. This was an advantage as i got my logo done quicker than expected and i moved on to my screen icon. Through out, i still had fireworks tutorials off youtube open so i could refer back and help me through it. This is an advantage as it means my knowledge on the program and texture graphics is improving so i can use it in later projects. At the end miss went through every pair and asked where they where at and what they had done. We hadn't done as much because i was behind so i still have to do a background, animated gif, roll over and web banner. However a advantage was that dieter had nearly finished his texture graphics and was ahead of me and some others in the class.

Thurs 9th - 10th may 2013

During these lessons i worked on the roll over buttons by making it a texture graphic when you roll over them.. These where of different sports ball textures related to the ones in the logo. I felt this was an advanced and different way to make our roll over buttons so they where original and professional.  However, i did think that it may over crowd the page with sports balls and begin to look slightly tacky and unprofessional. This took me two lessons as at the start of Thursdays lesson, sir made us gather round his computer to show us how to do an animated GIF and a roll over. This was helpful for when i start my animated GIF next week, but will more than likely re watch this video. But i will have that as an advantage for next week.  As i wanted to watch it again myself just to go over it, i re watched the fireworks tutorial video on roll overs and had a go myself. i only got one button done which was the home button with a football texture graphic.On Friday,  I did the rest of the buttons but during the end, Dieter suggested we do them all in one texture graphic instead of a number of them. There fore we will make two sets of roll over buttons to show we considered this idea two at last min as well as mine and dieters ideas, which will hopefully look professional like we had put a lot of thought into this particular texture graphic.

Monday 13th May 2013

During this lesson, i added all the completed roll over images into a navigation bar. This was easy to do until i got to the stage of adding the web slices and different states, in which would create the roll over in a html link. I found this difficult as i wasn't sure how many states you need, because in a navigation bare you have several roll over buttons and not just one. As i was unaware i asked sir to help me and he told me i needed two states, one for the navigation bar before, and one for the navigation bar after.This made a lot more sense to me and i got the navigation bar done quicker than i would have done by myself having not asked for help. This was an advantage as i got the help i needed and will be able to do that in the future if i did have to make my own website. The only possible negative would be that it took very long to do this simple activity as i attempted it myself first before asking Mr Zafar. Next lesson i aim to then move on to the animated GIF as it is a big texture graphic to do with a lot of complications. A negative is that i have never made one before so it may take me longer than expected.

Tuesday 14th May 2013

During these two hours i made an animated GIF. To make mine and Dieters GIF's different i made the basket ball go into a hoop on a loop where as his is a bouncing one like our original design. I had a lot of help with this as i am completely unaware of how to use any of the software. I used flash instead of fireworks as i was told it was alot easier to use. Sam and Dieter both told me how and helped me get the motion of the ball to go through the hoop and make it run smoothly. I would say it was a big weakness i faced as i had little input in making it as i was told what to do. To have changed that i could have watched videos on youtube of how to do it  instead of asking for help. However i still did learn how to do it and was fairly simple to do. A positive was that i had got the biggest hurdle out of the way as creating the Animated GIF was the one i was most worried about as i had no idea what software or how to even start it. Next lesson i will work on texture graphics, and once that is complete i will have finished designing all my texture graphics.

Wednesday 15th May 2013 

In this lesson, i worked on texture graphics. As i was using the texture graphics in my navigation bar i thought i should make a fireworks document in case of other ideas. I did research and got a track photo off the internet, a football court and one of grass. These where ones i would plan to use on maybe a box of text or in the bottom section of the website.

Thursday 16th May - 20th May 2013

During these lessons i worked on my evaluation of three websites. At first, i thought i had to evaluate some of the texture graphics in comparison to others used on another site. However, all i had to do was discuss the websites individually and relate them to my own. Therefore i wasted around two lessons writing to much than i should have done. This meant i had to restart which was a disadvantage. However i had almost completed it on the 20th all i had left to do was discuss the Adidas website i have chosen. An advantage was that i could purely focus on this over these few days making sure i had made a good start on it for sir to check, as our aim was to complete this before we started creating our websites in dream weaver. As i have been working on this for a few days i will begin to work on Dreamweaver next week and begin the creation of my website.

Tue 21st may 2013

During this lesson i started my Dreamweaver as i moved straight on and couldn't pro long starting any longer. This mean i had to split my time between finishing my evaluation of three websites, creating my website and revising for other subjects. I spent these two hours more a less watching you tube videos and asking Dieter for help on the basics as he had already started his yesterday, and as more familiar with the software. This meant i had created a html link that i would have to open with dream weaver and continue to edit my work. As i am not so strong on the technical side, for example getting my head around how to work new programs, it took my longer to figure out and will make a firm start on it tomorrow.

wed 23rd may 2013

In this lesson i added my background, web banner and logo onto the site. I thought it would be best to put all the key graphics on first and see where i could put them in order to fit the rest in to make it look aesthetically pleasing. i realized my logo still had a number of white marks where i hadn't cut around the balls properly in fireworks when i had created it. I also found that the gradient that was supposed to be flowing from the web banner into the background looked tacky and didn't flow smoothly, it was very jagged and uncoordinated. To fix these i went back into fireworks edited my logo again and created a web banner and background in one so that i could easily see where the gradient would be starting from. This was an advantage as even though i may not have made masses of progression on my website, i had made key little changes that made the biggest differences to the website as a whole, which was a major advantage. As for example my logo has a white outline i will have to figure out how to make it disappear next lesson as i ran out of time today.

Thurs 24th may 2013

In this lesson i added my navigation bar into Dreamweaver but had a few problems. I had to go back into fireworks for all my digital graphics as i found that i hadn't exported my navigation bar in order for it to be a roll over in a html link; which i require for it to work on my website, and make all my graphics where 'fit to canvas' so there was no white borders or outlines on them. When i had done this, i had to export my navigation bar in order for me to put it into Dreamweaver and for it to rollover successfully in the website link. This was an advantage as i had completed the key parts to a website. My only worry is that it looks to plain and doesn't look to the professional standard i would wish it too. As i am on a deadline which is tomorrow, i will have to simply do as much as i can to make it look as high quality in the time i have, which is a disadvantage i have realized and figured during this lesson looking at my whole design.

Fri 25th may and Wed 30th may 2013 

In this lesson i had finished my evaluation, instead of working on my website as i felt i had little to do and it would be more beneficial to finish it now than have to do it later on. Also the deadline was today and i had to have both the website and evaluation done. This meant i had one thing less to worry about and i could focus my attention on making my website. However a disadvantage is that i still have to add some text and photos in the center of my website, my animated GIF, and any other graphics i wish to create to make it look to the best standard i possibly can. Mrs Merrick has said we can come in on Wednesday in half term to do it. As i couldn't stay all day and finish it, i decided to do the power point of our digital graphics, which also had to be completed by Friday. I simply added screen shots or copied and pasted my digital graphics into the powerpoint and cropped them to size. As Dieter had already done his it meant our power point was complete and all i had to focus on was my website. I plan to go in early on the first Monday back after half term and complete it before my lesson with Mr Zafar at 9.

Evaluation of three websites 


I will evaluate three websites ... these are the BBC sports page ( http://www.bbc.co.uk/sport/0/ ) , The BSC sports college ( http://www.bcsport.org ) and the Adidas website ( http://www.adidas.co.uk ). These three use different digital graphics to suit a certain audience, to show a certain level of professionalism and to promote or inform the audience about sports. There are advantages and disadvantages to each of these that i will discuss.

The BBC sport website is simple yet very formal and professional. From the colour scheme to the positioning of the key digital graphics tells us it is thinking of the audience and considering what they will want to get from the website. Their website is 2 in 1 in away, because there is the BBC original logo then their is the sports subsection logo underneath it. They add there logo into their web banner as it looks professional without over crowding, which is what we plan to do in our own website. We feel it looks professional leaving enough room for the highly contented features to go in the middle. The logo is in a yellow web banner  which is colour coded to the navigation bar, where a yellow line appears at the bottom of the box when rolled over.  This means that the text of the word sport is black to stand out and link with the box' used in the BBC website. The colour and the way the colours are relevant makes it look to a professional standard and look formal, yet relaxed. The BBC use a brighter colour , as the rest of the items on the page are very text related with a few pictures. they use yellow in their logo and blue in the centre of the page to show a news headline, and to highlight the scrolling marquee. This breaks up the colours in the website making it more appealing to the eye and less crowded. Using a wide selection of images and videos, that are different sizes makes the viewer look straight towards the most important ones. For example there is a large picture that changes every so often to a new headline. Then next to this is 3 pictures that are a little smaller but again link to the rest of the latest headlines.


The British Colleges Sport website takes a completely different approach in designing their website. They have used 3 different colours that are again relevant to the colour scheme used through out. However, they have done this wisely, thinking of their audience to ensure it will be able to be familiarized and also not use to many clashing colours along with the original colour scheme seen in the logo. They have used red, white and blue to emphasise it is the british sports college, that is further seen through the presence of the flag within the web banner. The issues with this could be that even though it links with the rest of the colour scheme, it could be suggested to bold and that they should have gone for a more basic design idea colour wise. However i feel it is appropriate and works with the rest of the graphics within the website, not making it look over crowded or tacky. We will be sticking to a similar idea of using brighter colours in our backgrounds to relate to the school, being Bluecoat. It is a very modernized and current site as has links to social networking sites at the bottom and a scrolling marquee in the center of the page. You don't usually see these on school or college websites as they are not made for that purpose. The positioning of photos and calendar and map looks very professional despite the lack of flowing text. The lack of text could be said to be a problem as many other websites have a few sentences somewhere on their site to link photos, For example the BBC links a short summary with a photo of a news story. However others may see it as a more efficient way as it is not the type of website that needs to do this and therefore only requires key comments or photos. Particularly this website as the most text it needs is a twitter feed of the latest updates. This is a tidy and less crowding way to layout a website, that i would like to use in my own. I will however add a small count of text somewhere on the page more than this so that i can ensure it has both pictures and information.


The Adidas website however goes for a completely different look in comparison to the British Sport College. This website sticks to basic and bold black and white colour scheme that are continually used through the site. This logo uses three black horizontal lines next to the word 'Adidas' which is in black. This is just using primary black and white colours that may be basic and 'boring', but yet makes it look professional and simple yet effective. The web banner of these websites is very different. This is just using primary black and white colours that may be basic and 'boring', but makes it look professional and simple yet effective. Adidas website has a main flash image presentation that advertises each section of the website, EG the football section. As there is little text and the presentation brightens up the site, it means the logo doesn't have to be filled with a number of different colours or made too extreme. Doing this immediately gives a highly professional look to the website as it shows they have considered there audience and layout fully. I like the way they have designed their website and have used the similar idea with my web banner. This is because i have a gradient effect linking to my background from my web banner, and therefore has already made it simple. As i will not be using a large animation similar to the Adidas website i will use lots of pictures and make my logo more dynamic.





























Tuesday, 13 November 2012

Mr z!


                                             
All the below websites that I will evaluate are all sport orientated which means they are relevant to the project we have been assigned too. 

Rollover Buttons
A rollover refers to a button that is created by a web developer or a web designer. These rollover buttons are usually found within a web page. They are used to provide interactivity between the user and the page itself. The word rollover comes from the fact that when you roll your mouse over the button it will react. Rollover buttons can be created using imagery, text and buttons. There are four states to a rollover button, the first is its up state. The second is mouse over. The third is on-click and the fourth is down state. On the website for the English institute of sport, (http://www.eis2win.co.uk/pages/default.aspx) it has a rollover text on the button that shows a picture of what the text is about. This is good as it has both a written and visual version of what the creator wants the people to know. This shows that the creator has considered all the aspects that a website needs and specifically how to make a successful rollover image. The creator also uses more simple rollovers on the right hand side where the text boxes changes from white to blue once hovered over. This means that they are both complicated and simple graphic techniques used to show the variety of the roll over category.
The website Cardinal Heenan catholic high school (http://www.cardinal-heenan.org.uk/) has a navigation bar with all the different parts of where to get round the website. When hovered over the colour of the box changes from black to yellow, which are both colours, suited for both genders and all age groups. This is used differently to the website I evaluated above because it doesn’t show a picture when hovered however it is still effective. This is the same for the website of Wright Robinson college http://www.wrightrobinson.co.uk/ as it has a navigation bar that changes colour once hovered over. This turns from black to white, which are again appropriate and formal colours for the target audience.
However, there are many websites that could benefit from the addition of a rollover button in their site. For example, the Thomas Telford school website http://www.ttsonline.net/doesn’t have any rollover buttons and has very few technical aspects that show it is modernised and professional. On the other hand it has as its advantages as it is very old fashioned and may suit to older generations tastes if they visited the website.















Web banner
Another technical aspect used is a web banner at the top of the website. This is a large picture that runs across the top of the website. Specifically on website for the English institute of sport, it has the logo and name of the website. As the picture is so visible to the viewer it attracts the attention straight away. Website banners are usually full of bright colours and are very aesthetically pleasing to the viewer. However, the problem with the web banner on this specific website is that it is very small, therefore making the logo of the website small meaning the viewer has to look for the logo. On the other hand, it is a good thing as it makes the main information in the page stand out straight away. The web banner has several different coloured curved lines going through it, as you can see in the picture. Even though this may be irrelevant to the subject of the website, it adds brightness, life and a specific colour scheme to the website, making it look highly professional and appealing to people who feel they want to be involved in something similar. Therefore, makes it to a high slandered when they are trying to promote the website.
The website of Wright Robinson college http://www.wrightrobinson.co.uk/ has a scrolling marquee website banner that changes after a short period of time. The banner is bright, bold and very suited to younger people. This is seen through the love hearts on quotes and in text such as ‘we <3 Wright Robinson’ on it and the design in the background. The background has a mix of green, blue, orange, purple and white as well as many more. To a younger viewer this would be intriguing and very good, but to a parent they may see this is too crowded and unprofessional. They have an image of Shakespeare, microphones and speakers, the pupils partaking in different subjects, chemical bonds and a note pad. These only show a few of the subjects they allow as using them all would take too long to go through on the scrolling marquee. Very few websites use scrolling marquees on their web banners as they are hard to add on and can be overloading the page if they have other strong technical graphics on there.
The mark hall website http://www.markhall.essex.sch.uk/page/default.asp?title=Home&pid=1 has a web banner that is blue white and yellow thick lines going in all different direction. It also has the logo embedded on it with a gap in the right corner where a scrolling marquee is placed with a number of photos of the pupils they have at the school. This shows what the school has to offer and will inspire viewers by using photographs of actual students and their ability. There are also blue characters along the bottom where they are partaking in different sports the school can offer to new and existing pupils. There is also the schools logo and the text saying the name of the school in a bold white font. This makes it stand out to viewers first and then the marquee in the corner so the most important part of the website is seen first. This is a good way to use the web banner, as it is both simple as well as advanced in technical graphics.
The Thomas Telford School has a web banner of different things once clicked on to a different page off the menu as well as the actual text of the website on the right hand side of the page. The photos taken are realistic and appear to be taken by the school of objects like textbooks. There are also photos of the pupils so the viewer is able to see themselves how professional the school is and the subjects they offer. All of the photos used are bright an eye catching so they are all aesthetically pleasing to the viewer. The issue with using a web banner like this is that if the viewer is unfamiliar with the site they wont know they have to click to see more photos. To improve this there should be a clear indication of what needs to be clicked in order to see more photos.





Logo
 A logo is a graphic mark or emblem that are commonly used by commercial enterprises, organisations and even individuals to promote instant public recognition. Logos are either purely graphic or are composed of the name of the organisation. Logos are typically vector-based graphics. They are made with specific intention to be memorable to everyone so there brand or website can be remembered. For example in this website for the English institute of sport, they are different coloured circle shapes indifferent sizes shaved in the letter v. This is memorable, as they have done something different that not many have done before. However it has its faults as it is irrelevant to the topic of the website as it has no link to sport. The colour scheme on the other hand is relevant as it matches the background behind the key information and also the lines in the web banner which shows it’s consistent and neat.
The Cardinal Heenan catholic high school http://www.cardinal-heenan.org.uk/ use a very simple bland logo that is two yellow sticks with a wavy red line going through, This looks like two cricket poles and the motion of the ball going through them minus the presence of the ball itself. This shows that it is very old fashioned as it lacks in a professional level graphics and originality too it.  Again similar to the website analysed above, the colour scheme is consistent through the website and there is a yellow bar underneath the actual navigation bar, red text under the title of the school and also a red smaller navigation bar above the main one. This shows that the creator had pre planned the colour scheme to match the logo to ensure it doesn’t look messy and over the top.
The Thomas Telford School has an image of Sir Kevin Satchwell who to the school is the head master. The photo is up to his chest and surrounded in two circles to keep it contained and look neater against the web banner it has. However it is nit very clear to the viewer and unless they researched the man in the logo, they would be unaware of its relevance to the website. This is all just plain black, which shows its traditional values along side the values of the headmaster being in the actual logo. The logo is very small and doesn’t take a large amount of attention from the main information in the centre of the page. This is a very original type of logo to use and may not be as strong as others due to the fact none will know the man in the logo unless they had close connections with the school.
The Plymstock School has a different type logo in comparison to the others I have evaluated. It appears to look like a shield with a castle shaped object coming out the top. The shield has 2 lines in it that are white and behind the shield is a lighter blue that goes diagonally through the lines. This colour scheme is again carried out in the background behind the main text of the website as there is a black background with different shades of blue and white wavy line. This could be meaningful to the school itself showing its battle against other schools and also its strength. However due to the scrolling marquee in the centre of the page the attention will be taken straight away from the logo. This is good as it is not as important to the viewer if they wanted to look straight for certain information, but to new time users the logo is important to see first as it indicates what the school is actually about and can also say a lot about the success and professionalism of the school. This is a very common logo many schools use so may only gain originality through its use of colouring. A reason for this is that it looks professional to others and can be used effectively on uniform.
The website for Wright Robinson’s college is of a shield split in half with different red striped patterns in each under the letters w and r in each one, which is further held together by 2 white lions. This is very patriotic as the lions are on the George cross flag and are very original compared to other school websites. This further leads the website away from the cliché logos however the quirky web banner takes the patriotism away form the website and brings it to modern days. All the colours that are used complement each other well and the red stands out against the blue background of the web banner. This is very aesthetically pleasing and eye catching as it is stands out with all the other objects on the banner showing that it will catch the viewer’s attention first rather than the main text below. The letters are in plain black bold capitals therefore making it easy to read against the red stripes in the background of the website. Below the shield is a tag line in a banner that says excellence is our aim. This will appeal to new pupils considering attending this school as it shows they are committed and care about their pupils.
The mark hall school website is an image of a transparent crown against the web banner with blue edges. It further had two arrows going through the centre of the crown that shows the school could very old fashioned compared to others that I have evaluated. This is contradicted though as the use of the scrolling marquee in the banner showing it may have a traditional logo but it is modernised and made more appealing to its viewers. This again is a very original from other logos as is has remained in its conventional and unedited form. It can be argued that it isn't at all relevant to the school, as unless you attended or worked at the school you wouldn't see its significance or true meaning.

Screen icons
Screen icons can be seen an almost every technical platform such as Ipads, websites, and on mobile phones. These are easier than having to go through the Internet and have proved to be more popular over time. The website for the English institute of sport I am analysing only uses 2 screen icons which are a twitter link and a link you to a page where you can sign up. This shows that they are trying not to modernise their website too much as they are based for older viewers who are involved in sports. It further tells us that they are not necessarily a school but a community association where it is open to all ages that can have access to them websites. The link to twitter is at the bottom of the website where as the sign up icon is at the top. This looks professional as it is keeping the more irrelevant link to the website out if the way so it doesn't distract any attention from the main text and features. 
The website for the Cardinal Heelan high school has four screen icons that are clearly observable to the viewer as they are above the navigation bar and are large enough to stand out but not untidy at the same time. These are for you tube, moodle, their school mail and iris. At the bottom where there is the calendar etc is placed and under the navigation bar there is an icon that allows the viewer to subscribe for the latest news from the school, but this icon is a lot smaller than the others and is not next to the rest. This can be seen as making the website look untidy as it would look more professional with the rest of the icons. This shows that they only use educational and appropriate icons, as it will benefit their education. This could draw many parents attention as it ensures they don’t allow their student to have links to inappropriate sites such as face book that will not help their learning.  Also, it shows that the site is a modernised yet still remains true to the values of school sticking to educational links only. On the other hand, some pupils could abuse the link to you tube, despite its use for educational videos as well as entertainment.
The Thomas Telford School has two links to twitter and the BBC. These are very visible to the viewer and take the attention straight off the main text. Instead of having a simple small icon they have used boxes that allow you to see what the school has wrote on their twitter over the course of the weeks. This could put many viewers off as it is to modernised and is taking the attention off the actually academic side/meaning to the website. However this can have the reversed affect and many pupils will like the fact they have modernised their website. The BBC link shows the latest story and offers a link so you can see more. This shows that the creator has considered both the educational side using the BBC as well as a more contemporary side by using twitter.
Many websites prefer to use a small link such as a small icon out of visibility of the main information. An example of this is on the Plymstock school website as at the bottom of the website they decided to just use a small T in a box with small text at the side saying ‘ follow us’. As the link doesn’t clearly say it links to twitter, the older members who may view this website may not understand it and what it leads too. This is a good way to use an icon as it is concealed at the bottom in the right hand corner and is not eye-catching due to it being a less important than other information at the bottom of the website.

Navigation Bar
This is a sub region of a web page that contains hypertext links in order to navigate between pages of a website. This frequently appears on all or at least several pages of a certain website. It is one of the key design essentials of websites, in terms of usability as well as it is aesthetically.  On the English Institute of sport website it is a black horizontal bar across the website with 7 subheadings in white text. The black and white colours complement each other making them easy to read and stand out to the viewer. These colours are used in many navigation bars, as the two colours will also harmonize with other colours used in the logo and background.  This is similar to the websites for Cardinal Heelan Catholic high school and Wright Robinson’s College, which has a horizontal black bar that when hovered over turns into a navy blue colour, and there are 8-9 subheadings with white text to balance it.
The mark hall school however takes a similar yet different approach on using the navigation bar. They have a more curved navigation bar other than a straight, which seems more of a relaxed and composed layout other than a complete structured one. Once hovered over the text turns from white to yellow and underlined which contrast with the blue showing the viewer clearly the option they have hovered over.  

Navigation menu
This menu provides navigation to all areas of a website from one location. This is provided in the form of an interactive menu typically designed in a graphics editing programme rather than just pure HTML or hypertext. Its purpose is for the user to navigate all resources and pages with ease. The Thomas Telford School http://www.ttsonline.net/ is an example, as you have to click on three sub-heading on a smaller navigation bar. Once each is clicked it provides a variety of different options to click on to venture around the website. This is an original way to use a navigation menu as they commonly run along the whole mid upper end of the page or down the side of the page. This shows it has originality in the creators and could inspire others to use a more original approach to using the navigation bar.  The colours used for each of these boxes are red, blue and dark grey with a faded pale grey text. Despite this adding more colourful and attractive vibe to the website it also looks out of place and untidy. To improve this they could have used all the same colour due to the fact that in many photos that appear on the top of the screen, they tend to blend in and is hard to differentiate between the two.
The website for King Alfred school has a grey navigation bar running horizontally in the page with 8 different sub-headings. Once hovered over there is a white drop down box with black text so that each one is clear to the viewer. This is a form of navigation menu that is very common in websites as it is the most eye-catching due to how it drops into the main text of the website. However one of the 8 sub-headings does not have a drop down bar and doesn’t provide any further options. This doesn’t allow the viewer to access the information they specifically need quickly.
The Plymstock school website has again a horizontal navigation menu with 7 sub-heading drop down bars. When hovered over the sub-heading goes from black to blue and shows all the options below in white writing. The blue colour looks very professional, as it is the same used in both the background and in the logo. This shows that the website is professional and didn’t use to many colours to make the site look chaotic and disorganized. Again there is another subheading that doesn’t allow a drop down option as it says contact us and doesn’t necessarily require a drop down option.  The plain colours the creator uses keeps the website formal and appropriate without it taking major attention off the key elements in the website.

Animated GIF’s
An animated GIF file comprises a number of images or frames to be displayed successively, each described by its own GCE (Graphic Control Extension) preceded by a header whose content by default applies to all the frames. After the header the data is stream-orientated instead of being at fixed indices. GIF images are in a bitmap image format and are usually compressed too be placed onto websites.  Examples of where these are seen are as logos on websites that involve clear vivid colours that have text at the side or below. For example, the Wright Robinson College has multiple images as well as the quote ‘excellence is our aim’.

Backgrounds
The English institute of sports website has a black background with 6 different coloured lines going between each other through the centre of background. This is a good way to use it as it is complementary of the rest of the features on the website such as the logo. The colours have little relevance to the topic of the website but can be suggested as the likes of a football being kicked minus the visibility of the ball its self. This is used in many websites as it means that the website appears less crowded and the background doesn’t divert the attention off the key part to the website. The colours used are all bold, rich and vibrant colours which show a professional mature level, therefore attracting older members to the website.
The website Cardinal Heenan catholic high school has plain white background that fades into a light grey when it gets further down the page.  This is a very simple method that can be seen as both good and bad. A positive is that it’s plain and simple therefore not diverting any attention away from the rest of the page. However, it’s a negative as it is too simple and doesn’t bring any enthusiasm and intensity into the site. This is used on many websites but specifically on this one there is a slight bit more too it as it has a hint of grey as well so its not purely bland.
 The Thomas Telford School has a simple plain white background with no colour effect, and is mainly covered but large boxes of text on top of it. The King Alfred website is similar as it has a plain grey background that is against text in a white box. These could have been made more aesthetically pleasing by adding either a colour effect to it or adding some sort of minimal decoration. This is not a major problem for the website as it is covered a lot by the text and is not massively visible for the Thomas Telford school but the King Alfred school has a very much largely visible background and either needs a more appropriate colour to the topic of the sport, or more text on the site filling the larger gap.
The background of the Plymstock School is very similar to the English Institute of sport as they have gone for a background with curvy lines going through the centre of a plain black background. Specifically to this website, the creator has used blue and white lines to match up to the logo it has. This again is simple yet professional and mature, attracting more of the adults to view it rather than young pupils or youths. The blue colour is very bold and rich so stands out to the viewer. But as it’s only a few colours, it doesn’t take all the attention of the key features on the page.
The Wright Robinson’s college has a more youthful vibrant background, however it is only noticed when its scrolled down to the very bottom. It appears to be plain white but when at the end of the page, it consists of black, purple, blue, green and orange swirls and shapes that match with the colour scheme of the web banner. The fact it is at the bottom and not all over the background shows that the creator has pre planned the whole website, It shows that they have considered the fact that if this pattern covered this whole background, it may appear messy and overcrowded, which will put off all viewers due to the unprofessional image at first glance. The white background in this website complements the bright web banner and the boxes that the text is in.
The background on the mark hall school website is very different. As it has a blue and yellow colour scheme, there are yellow white and shaded dark blue lines exploding from the bottom corners of the web banner. This is very original compared to the websites I have evaluated above, as this is a more noticeable background choice. The main part of the background behind the text is a plain blue with different shades of blue large circles on it. These aren’t massively obvious but add more of a fuller background instead of leaving it plain blue. This is a colour that may attract all genders as its made multi gender with the addition of yellow and white colours,

Texture Graphics 
Texture Graphics can be 3D renders or they can be made up of many different things such as photographs. A texture graphic is typically a digital representation of a surface. For example in Adobe Fireworks there are digitally made textures. Some of these are, grass, metal, glass, door. These can all be used a edited in certain programmes and used to put onto an already made image. These are seen on very few websites as they are not seen as they take the attention away from the more important features of the website such as the logo or the main text. However, there is the option to do a less vigilant texture design that could simply be a paper 
design or fabric.

Picture Element
The screen is divided up into pixels. The amount of pixels that can be displayed on the screen is dependent on the resolution. Resolution is often referred to as dpi or ppi, these are abbreviations of Dots per Inch, and Pixels per Inch. Computer screen resolution is predominantly 72 dpi, however the print is often higher. It is at least 150dpi but is more commonly found as 300dpi. The screen that the images are on is all divided up into pixels. The Main picture on the homepage of the English institute of sports is a lot clearer than the main photos used on the Cardinal Heenan Catholic high school website. The images on the Cardinal Heenan Catholic high School are darker and less vibrant which is not very aesthetically pleasing to the viewer. On the other hand, the English institute of sport are crisp, bright and rich in colour that has the opposite effect. This can make the website look amateur if the picture quality is not aesthetically pleasing to the viewer.
The website for the King Alfred school uses a very small and pixelated image in the centre of their page. This gives the website an unprofessional image and is shows that it can be improved to a high level. However the Thomas Telford School have used the opposite approach and used their main photo as their web banner, which automatically makes it bigger and clear for the viewer. This means that on the King Alfred School the image is pixelated and is not up to an expert level compared to other websites. Whereas the Thomas Telford school have used higher resolution on their photo making it better.

Image Resolution
Some of the earliest computers were created in an age where there was a limitation to screen resolution as we didn’t have the technology. The screen resolution was considered to be extremely low. Individual pixels were clearly visible. This has given rise to higher levels of detail and a smoother less pixelated finish to graphics. A few years ago a monitor would have a resolution of 640X480. Whereas nowadays a screen resolution of 1280X720 is not unheard of but is seen very rarely on websites. For example old websites that haven’t been modernised show signs of this. Specifically, the King Alfred School website has an image that is very small and is slightly blurred. This could be suggested it was from an older computer model as the screen resolution is weak. However in contrast, the website for the English institute of sport has a very smooth and crisp image and background showing that is could have been used on a more modern computer model.

Intensity
Another way that graphics could easily be improved is the intensity of the pixels. The intensity refers to the brightness and the hue of the pixels. Intensity is dependent on the bit depth. Each pixel in any graphic can only be one colour at a time. However, pixels tend to blend together because they are so small and very hard to see. The number of colours each pixel can be is determined by the number of bits used to represent it. For example, 8-bit colour allows 1 of 256 colours that can be displayed. On the website for The English institute of sport and the Wright Robinson college, there is a number of different intense colours in each image showing a higher intensity of pixels as they merge together. However websites such as king Alfred school website has very few colours, therefore suggesting that there is less intensity and depth in the pixels.

­­­­­Compression
Lossy compression is a data encoding method which discards some of the data, in order to achieve its goal, with the result that decompressing the data yields content that is different from the original, though similar enough to be useful in some way. Lossy compression is most commonly used to compress multimedia data, especially in applications such as streaming media and Internet telephony. Lossless Data Compression is a class of data compression algorithms that allow the exact original data to be reconstructed from the compressed data. The term lossless is in contrast to lossy data compression, which only allows an approximation of the original data to be reconstructed, in exchange for better compression. These are seen as raster images as they are a dot matrix data structure representing a generally rectangular grid of pixels, or points of colour, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats. A bitmap corresponds bit-for-bit with an image displayed on a screen, generally in the same format used for storage in the display's video memory, or maybe as a device-independent bitmap. A bitmap is technically characterized by the width and height of the image in pixels and by the number of bits per pixel
For example on the website for Thomas Telford school, the video is very clear and also doesn’t buffer or pause showing it has a lossless compression. This will be the same in almost every website as with new modern technology, there is no need to download them so there is a hard copy in the viewers computer. There is a constant difficult decision of whether to use lossless or lossy compression. This is because with one you will have great quality but will be very slow and buffer frequently, or the second option will be very quick with little or no buffering or pauses, but yet a very low quality image.

File extension
Bit Image File or Device Independent Bitmap file format or simply a Bitmap, is a Raster graphics image file format used to store bitmap digital images, independently of the display device, especially on Microsoft Windows and operating systems. Portable Network Graphics (PNG) is a bitmapped image format and video codec that employs lossless data compression. PNG was created ti improve upon and replace GIF format as an image file format not requiring a patent license. PNG supports palette-based images. PNG was designed for transferring images on the Internet, not for point’s graphics, and therefore does not support non-RGB colour spaces. The Graphics Interchange Format is a format the supports up to 8 bits per pixel thus allowing a single image to reference a palette of up to 256 distinct colours. The colours are chosen from the 24-bit RGB colour space. It also supports animations and allows a separate palette of 256 colours for each frame. The colour limitation makes the GIF format unsuitable for reproducing colour photographs and other images with continuous colour, but it is compatible for simpler images such as graphics or logos with solid areas of colour. A Tagged Image File Format is a file format for storing images. The TIFF format is widely supported by image-manipulation applications, by publishing and page layout applications, by scanning, faxing, word processing, optical character recognition and other applications.  JPG compressions are used in a number of image file formats. JPEG is the most common image format used by digital cameras and other photographic image capture devices; along with JPEG/JFIF, it is the most common format for storing and transmitting photographic images on the World Wide Web. The .psd format is the Adobe Photoshop data format, which can be read on any machine that has Adobe Photoshop installed. It is cross platform and can be used on both PCs and Macs. The PSD format provides extended support for layering, apha channels, paths and vectors. The PSD source file included with templates are usually in sliced format, which allows you to customise and make changes to the images on your skin.  These are just a few of the formats that are used on photos that are uploaded onto websites. Portable network graphics are mostly used to transfer photos to websites for promoting and inspiring others.

Points, Lines, Polygons and Curves.
A vector point is the points that make up a vector shape. For example, on a vector triangle there are three vector points, one
on each corner of the triangle.  A vector line is the line that makes up a shape, they join up with the vector points, and these will then make up the shape. A vector curve is used to create circles or anything shape that has a curve in it. For example, a semi-circle will be mad up of two vector points, one vector line and one vector curve.  A vector polygon is a shape that is complete. For example, a square is made up of 4 vector points, 4 vector lines. This shape is called a vector polygon because it is made up of vectors and it’s a polygon. An example of website where a variety of these vectors are used are the Wright Robinson’s college as it uses different shaped and coloured curved lines and shapes that look highly aesthetically pleasing.

File Extensions
Here are a few examples of file extensions and what they mean. Encapsulated PostScript or EPS for short is a DSC-conforming PostScript document with additional restrictions that is intended to be usable as a graphics file format. In other words, EPS files are more or less self-contained. AI stands for Adobe Illustrator File. Using AI, you can create vector graphics editing programme, it is composed of paths connected by points, rather than bitmap image data, commonly used for logos and print media. Adobe Flash is a multimedia platform used to add animation, video and interactivity to web pages. Flash is frequently used for advertisements and games. More recently, it has been positioned as a tool for the web. A file extension is useful in two ways. It helps you identify the type of document. So, for example, a file with an extension of .jpg is a photo and a file extension of .exe tells you it's a program. A file extension also allows your computer to run the correct program automatically when you double-click on the file name.

Sampling
Bit Depth sampling is a technique used to increase or decrease the amount of pixels within an image. There are many re-sampling programmes on the market to ensure that the picture is to its best quality. Each pixel is a sample of an original image; more samples typically provide more accurate representations of the original. This is commonly seen in audio as when recording music or many types of acoustic events, audio waveforms are typically sampled at 44.1 kHz (CD), 48 kHz (professional audio), or 96 kHz and either have to increase or decrease the pixels.

Bits per pixel
This is the number of bits of information stored per pixel of an image or displayed by a graphics adapter. The more bits there are, the more colours can be represented. For example on websites such as the Wright Robinson’s college they use several bright colours that merge together in shapes and patterns. This shows that there is a large number of bits per pixel in all the images and patterns used in that particular website.

Monochrome
Monochrome is just simply the colours black and white. It is a 1-bit image and1 bit = 2 levels of grey. Monochrome images or typically scanned from line art and/or text originals are comprised of a single bit of data. Monochrome images generally require higher resolution than tone images in order to prevent lining of diagonal lines. Many websites choose not to do this is it may not be suitable for all target audiences. Especially for school websites, this may not be an appropriate colour scheme, as younger people may need the colours to engage them and ensure it is aesthetically pleasing. Monochrome can be used mainly on websites for more mature target audiences such as photo galleries on art websites etc.

256
256 refers to the number of colours in a single pixel. An 8-bit colour image has 256 colours. Depending on how many bits there are relies on how many colours there are. In a 12-bit colour image there are 4,09 colours. In a 16-bit colour image there are 65,536 colours.

High colours
High colour graphics include thousands of colours; it is a method of storing image information in a computers memory such that each pixel is represented by two bytes. Usually all 16 bits represent the colour, but some devices also support 15-bit high colour. High colour uses 16 bits per pixel, 5 bits for blue, 5 bits for red and 6 bits for green.

True colour
True colour is a method of representing and storing graphical image information that allows a very large number of colours, shades and hues to be displayed in an image, such as in high quality photographic images or some complex graphics. True colour defines 256 shades of red, green and blue for each pixel of the digital picture, which ultimately results in 16,777,215 colour variations for each pixel. Even with true colour, monochromatic images, which are restricted to 256 levels, can sometimes still reveal visible banding artefacts. True colour, like other RGB colour models, cannot express colours outside of the gamut of its RGB colour space.

RGB
The RGB colour model is an additive colour model in which red; green and blue light are added together in various ways to reproduce a broad array of colours. The name of the model comes from the initials of the three additive primary colours, red, green and blue. The main purpose of the RGB colour model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers.

YUV
YUV is a colour space typically used as part of a colour image pipeline. The colour spaces used in graphics software are based on the primary additive colours.  It encodes a colour image or video taking human perception into account, allowing reduced bandwidth for chrominance components, thereby typically enabling transmission errors or compression artefacts to be more efficiently masked by the human perception than using a direct RGB representation.

HSV
HSV stands for hue, saturation and value, it is also often called HSB with the 'B' standing for brightness. In each cylinder, the angle around the central vertical axis corresponds to ‘hue’; the distance from the axis corresponds to 'lightness', 'value' or 'brightness'. Whilst 'hue' in HSL and HSV refers to the same attribute, their definition of 'saturation' differs dramatically. HSL and HSV are both cylindrical geometries with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°.

Scanner
An image scanner or scanner is a device that optically scans images, printed text, handwriting or an object, it then converts it to a digital image. There are four different types of scanners that can be bought, Drum, Flatbed, Film and Hand scanners. Prices of scanner can vary depending on the make and the quality of the scanner; the cheapest scanner can be priced at around £40 pound. Some of the industrial scanners that are available on the market can price around £4,800. These aren’t usually in self made websites or unprofessional websites, as it is a lot cheaper for the person to take photos on a digital camera and simply upload them through a cable. On many websites for schools they are most likely to use a different method so that the pictures can be approved, as children are involved.

Digital Cameras
A camera is a device that records/stores images. These images may be still photographs for moving images such as videos or movies. There are many different types or cameras; some are Plate Cameras, Box Cameras and Digital Cameras. The prices of cameras vary on how good the resolution is and the make of the camera; some of the cheapest are priced at £49.99. The most expensive cameras can be priced at £429.99. Many modern day digital cameras allow editing on them so there’s no need to edit on a computer. They are also very clear and can produce very crisp and detailed images as well as videos. The clearer the pictures are the better the chance that they will inspire and intrigued the viewer. Especially when considering sports in school websites, it can show the intensity and true scene of the event.

Resolution
A pixel per inch or pixel density is a measurement of the resolution of devices in various contexts. Typically computer displays, image scanners and digital camera image sensors. PPI can also describe the resolution, in pixels, of an image to be printed within a specified space. For example, a 100 x 100 pixel image that is printed in a 1-inch square could be said to have 100 dots over inch (DPI). This describes the width and height dimensions of a display, such as a computer monitor in pixels. Certain combinations of width and height are consistent and typically given a name and an initialise that is descriptive of its dimensions. A higher display resolution means that displayed content appears sharper. On a website, the resolution of an image is crucial to get a successful picture in order to promote something.

Storage
In computing, memory refers to the state information of a computer system, as it is kept active in some physical structure. The term memory is used for the information in physical systems, which are fast, as in distinctions from physical systems, which are slow to access. File size measures the size of a computer file. Typically it is measured in bytes with a prefix. The actual amount of disk space consumed depends on the file system. The maximum file size a file system supports depends on the number of bits reserved to store size information and the total size of the file system. For example, with 'FAT32', the size of one file cannot be equal or bigger than 4 GiB. 1 KiB = 1,024 bytes, 1 MiB = 1,048,576 bytes, 1 GiB = 1,073,741,824 bytes and 1 TB = 1,099,511,627,776 bytes. Many computers depending on the model type will have better storage as they are more developed to new systems and programs to conserve memory space. If there is a larger amount of space remaining it means that if something may need to be downloaded, for example a video off a website or a music file, It will be downloaded extremely quick.

Target Destination
When creating digital graphics, the designer has to think about the target destination of that graphic that they are creating. The designer could make a graphic for a range of outputs including print, film, web and desktop graphics. The destination of the image will determine the way in which the graphic is made for example a poster for print would be created using raw files in Photoshop, although a graphic for the web may be created using vector shapes in Fireworks to make sure that the file size is kept down. The program depends on the outcome of the product, for example the end product may not be as professional if its destination was somewhere else.

Dimensions
The dimensions of an image can be anything; they can be measure in inches, centimetres or pixels per inch. Most graphics are measured in pixels per inch, as it is easier. If you are making a graphic for a print then the dimensions of the image are going to be massive. However if the graphic is being created for the web then the dimensions of the image are going to be small, such as 200 X 200 pixels per inch. If a photo was not to be printed but to be put on a website, they would have a smaller dimension and would be smaller pixels. 

                                            


Thursday, 8 November 2012

Unit 62 assignnment 1 - ezine + Digital Media video


 Article – An idiot’s guide to learning about digital video technology

In this article, I will aim to inspire and educate all about digital video technology in interactive media and how to use certain aspects effectively. Hopefully this will enhance interactive experience on different media platforms. An ezine is a new modern form of media platform and means an online magazine. This is an example of digital video technology as it is a description of any method of recording, playing, capturing, editing, distributing or projecting of video and audio that uses digital video rather than analogue video signals. At the end of this article you will have a strong understanding of all the ways digital video technology is used to increase the quality of your experience and engage you into their product or brand.

There are a large number of different techniques and terms that people do not understand what they mean or how they work. The most complicated term that I will evaluate is formats. On websites it is vital the creator uses certain formats to make sure their video is the best quality and is easily accessed. Examples of a few formats many website creators use are Mpeg, mp4, mov, avi, wmv, flv, swf, 3GP, ASF. Mpeg is a type of format that is described as lossy compressions as it eliminate unnecessary bits of information, altering the file so that it is a higher quality and shows bigger files such as full length films.  Compression means the method used to is to reduce file size and save disk space. This means that the videos are easy to upload to certain websites as it decreases the file size.   However other files such as ZIP are described as a lossless compression as they can be played back with ease but are poor quality and sometimes pixelated. An example of a website that uses these is YouTube (www.youtube.com). Some formats have a better compression and others have better play back ability, for example you tube videos in a flash format have low quality but immediately play back. This is something a video maker has to consider and decide between as there viewer will look for the two qualities in a video. Many websites choose to use a lossy compression format as the quality of the video is still visible and slightly clear for the viewer. 

Media players are another term many people do not understand fully about as there are a lot of mechanical aspects to consider when using media players to watch videos. Media players can be used when a video is downloaded of a website so you have a permanent copy on your computer. This method is good as it allows the viewer to have a permanent copy, however it takes a long time for it to download off the internet and you may not have the correct media player installed on your device to play the video. It is also bad as due to the arrival of being able to stream videos, this download method is usually only used on small files such as songs or short films. Streaming means is a technique for transferring data so that it can be processed as a steady and continuous stream. Streaming technologies are becoming increasingly important with the growth of the Internet because most users do not have fast enough access to download large multimedia files quickly. An example of where streaming videos is used is BBC Iplayer (www.bbciplayer.com) as it plays big files that  need a bigger compression form to play to people anywhere and everywhere.  The certain brands own their own media player, for example windows media player. This allows their branch to expand and gain profit. This further means that the player will only play certain media formats that are relevant to the brand. Another reason why media players only use certain formats is that there is a limited set of codec stopping them from playing all or most formats. The best media player for playing almost every format is real play as it suits to most formats. A codec is a process or specialized computer program that encodes or reduces the number of bytes consumed by large files and programs. Files encoded with a specific codec require the same codec for decoding.





To ensure that the creator publishes the product or subject to everyone, they have to consider all media platforms. One of which is through mobile devices as there is a variety of ways to view it from a phone. You can either go from the internet and on to sites that sponsor the product with a video on it such as Facebook or any social networking site. Another way is to download the app in order to access the information. Both of these methods are popular with the recent generations as nearly everyone has or will have a smart phone. For people that don’t have a smart phone, there are options such as through email or visible on a computer. However this is a problem for some as it doesn’t allow the people who don’t have a computer to access the information they want to publish. However, one way in which a person could see the subject is if they are in a cinema and therefore see it during the adverts. The main example of this type of video is a film trailer that will play short films that on average last around 5/6 minutes.

I will now give examples of websites and how they use video into it. As I have discussed above, the website 4od, (http://www.channel4.com/programmes/4od) has to use lossy compressed videos as it has to ensure that it is capable to play hundreds of long length videos. However, it also has to cater for smaller videos and therefore has to ensure there is lossless compression on them. 4od plays films as well of TV shows that are featured on the TV channel. This is different to websites such as youtube because it has a bigger band width and different compression size due to the types of videos it plays. It is very similar to BBC iplayer as they both show the same footage, both films and shorter programs. Further more, there is also the ability to download them as well as stream them so that it offers more to the viewer. A reason why a person would want to download a certain video is that they can watch it whenever or where ever on their own media software. By playing it on a different media software such as windows media player,could allow the footage to be played faster and also alter the quality of both the actual footage and the sound.



The website, Youtube, (http://www.youtube.com/only) plays short lossy clips such as film trailers and user generated videos. They are lossy clips because they are low quality and require less pixels compared to high quality videos played on websites such as 4od. They are lossy compression as the it is easier and quicker to download in the site and also means that they are quicker for the viewer to watch. Users want the fast ability to watch these videos as it can be more convenient for them and also because if they take to long to load people wont watch them and therefore get less viewers on the website as a whole. On the other hand,  4od plays both full length films and shorter videos. 40d is very similar to BBC iplayer in this case as both of them allow short and long videos to be played. They also allow downloads as well as being streamed and watched online, offering both options to the viewer. This is better for the viewer as there is two options that they can choose from depending on which is more convenient to them. The quality of sound and also the video is very good however as the videos are streamed, they do take a while to buffer and load in order to watch them. This could be tedious for the viewers as they have to wait prolonged amounts of time in order to watch a program. However, YouTube uses videos very differently to 4od. They are user content generated and therefore are not as high in quality as they are on 4od. They also sometimes take a while for them to buffer which means they are also streamed and not downloaded. Further more, the sound quality is usually very clear if the videos are taken on a professional video recorder or a digital camera. There are many videos that are made on phones and are therefore not as strong in professionalism as the videos on 4od. Never the less, there are very little websites that allow videos to be downloaded as it is illegal and must be paid for. An example of this is iTunes which is the software and a website. It allows both films and music videos to be downloaded with songs off the store.



The BBC iplayer website (http://www.bbc.co.uk/iplayer/consists) of videos that can be both streamed and downloaded in different qualities. These are similarly seen in youtube in the bottom right hand corner of the tool bar. The allowance of changing the quality means that the once its changed, the video may lack in clear detailed footage, but could play at a faster speed and be more benificial for people who want to watch things quicker regardless of the quality. This is an option on many different websites and is extreamly useful. It will take less time to stream a low quality shot as less pixels have to be formated. Examples of types are high quality  240p and 360p. The 'p' stands for progression and the number means pixels it has. These are of lossless compression as the piece can be played regarding their pixel size.






A website that is completely different to the previous that i will evaluate is the creature comforts website (http://www.creaturecomforts.tv/uk/). In this website, they use very small video's on the right hand side of the screen. There i the option to view a piece of footage of each character in action and also a piece on the homepage of all of them in an episode. The point of this website is to simply show a taster of what the site has to offer and what the program is about. The video on the homepage begins to play immideatly when you enter the site, but still has the option to pause or stop it. The box that the video is in is miniscule, and doesnt provide as many options as websites like youtube do. For example there is not an option to change the quality of the video or even enlarge it to full screen. This makes the website weaker in comparrison with youtube and 4od as they offer this to the viewer and originally have a larger footage size on the screen. As the creature comforts advert has a small space for their video, it automatically insists that the quality of the video itself is poor and hard to see. This could further effect the sound, making it difficult for people who have poor eye sight or are hard of hearing.  





Well now you are full of all the knowledge there is to know about websites, videos and all the technical terms you need to know which you can teach this to others and show everyone this guide. Its now your job to tell others all your new found information. Good luck!