Production Diary

Over this unit, I will be producing a blog recording every task in detail in order to show the production of my travelling website.

Thursday 1^st May 2014

My first task was to produce a design board in order to show my initial ideas.  My original concept is to create a travelling website which will allow the users to explore and find out more information about certain places across the world. On my design board I have included who my website was targeted at, the colour theory, the typeface, any legal and ethical constraints and the resources I will be using. I have also finalised the design of my logo which I have also included on my design board. The purpose of producing a design board is so it makes it easier to plan out the rest of the unit and also it will keep me organised throughout as I will be able to refer back to it at any point.

Below is a picture of the design board I created:

 
Wednesday 7^th May 2014

Before I started the creation of my website, I needed to learn some basic skills in Adobe Dreamweaver to get the production process started. In this tutorial, I learnt how to chop up the design of my website in Adobe Photoshop in which I could transfer the individual section into Adobe Dreamweaver. I also learnt how to link pages together using buttons or hotspots according to my preference. Another useful skill that I learnt was how to create a form which could be used in order to gather the user’s details.

Thursday 8^th May 2014

First, I started designing my homepage according to my initial sketches that I did beforehand. On my homepage, I wanted a scrolling panorama slideshow of popular tourist destinations around the world. To do this I used Adobe Flash as I used this in the previous unit therefore all the skills were still fresh in my mind. Once I had completed the flash slideshow, I started to design the layout of my homepage within Adobe Photoshop. This included a banner, footer and some text to introduce the page. I then saved the individual sections and saved them for ‘Web & Devices’ in the appropriate folder. Once all this was complete, I set my page layout up in Adobe Dreamweaver using the table system.

As you can see from the image above, I set my table up using 4 rows and 1 column. I worked out how many rows and columns I needed according to how many different components there were on my page (banner, footer etc.). I also set the table width to 100% as I wanted it to fill the entire screen and then the border thickness, cell padding and cell spacing to all 0 as this would make all the components match together like I designed it in Photoshop. To insert the Flash Slideshow that I produced before, I had to export it as a .SWF movie format in which I could insert into Dreamweaver using Insert > Media > SWF section.

Here is a screenshot of the Flash Slideshow in Dreamweaver (Design View):

 

Tuesday 13^th May 2014

The next page that I went onto design and create was the World Map page. This page will allow the user to select the continent that they wish to explore further. This was a very simple page to design in Dreamweaver as I only had to insert three sections, banner, footer and the map. To create the map, I used an image from the internet that had an outline of the world. I then put this into Photoshop where I scaled it to the correct size and labelled each continent. I trial and tested different colour schemes, black and white, and also blue background and green countries to represent the world. I decided to go with black and white as it fit in with the rest of the website and didn’t look too vibrant and off putting. Once I had inserted all the sections into Dreamweaver, I used the hotspot tool over each continent so I could then link the continents to the relative pages.

 

Wednesday 14^th May

I then went onto design and create the ‘About Us’ and ‘Contact Us’ page as they had very similar structures. On the ‘About Us’ page, I included a couple of paragraphs telling the user how I started this website and also an image of the Sydney Opera House to relate to the theme of travelling. On the right had side of the page, I included a ‘related links’ section where the user can navigate around the website without having to divert somewhere else before. The ‘Contact Us’ page was very similar as it just included information that the user could use in order to contact YouTour in terms of telephone, e-mail and address. To help the user find the YouTour headquarters, I included a section of Google Maps so that the user could plan their journey. I did this by copying and pasting the code over from Google Maps into the relative area within the coding.

Here is the coding and design view of the Google Maps section that I inserted:

 

Thursday 15^th May

Next, I went onto design the page ‘Top 10 Countries’. This page includes the country’s flag which I also turned into a rollover which revealed the country’s name. I did this by taking a copy of the flag image, lowering the opacity and putting the text over the top. This made sure the images were the exact same size so that when the curser rolled over the image, the transition was smooth. To insert the rollover images into Dreamweaver I selected Insert > Image Object > Rollover Image and then selected both of the images. Next to the images, I included specific information about this country including the capital, main cities, population, currency and languages. I set up an integrated table to make it easier to insert the different sections.

Here is a screenshot showing the rollover images:

 

Tuesday 20^th May

I followed on from this by creating a ‘Top 10 Places’ page which was similar to the ‘top 10 Countries’ page. This page was relatively simple as I just included an iconic image for each of the different places, for example, New York I put a picture of Times Square. I also used an integrated table for this as well to make it easy to import the images.

Wednesday 21^st May

I wanted to include a page within my website to show that I could create a form that the user can fill in with their personal information.  Therefore, I created a ‘Create Account’ page which the user can use in order to create an account with YouTour. To create this table, I inserted a form which then allowed me to insert the different fields according to what information the user puts in, for example, the name and address will be just a normal text field, the gender could be a select list (drop down menu), the ‘sign up for a newsletter’ could be a checkbox and also having the password blocked out for security reasons. By including a variety of techniques, this shows that I understand these and can put them into my website.

Here is a screenshot of the 'Create an Account' in design view:

 

Thursday 22^nd May

Following on from the ‘Create an Account’ page, I also created a ‘Sign In’ and a ‘Leave a Comment’ page which both included a form as well. These pages included the same type of form fields as I included in the ‘Create an Account’ page. The only new type of field I included was the textarea which in used for larger amounts of text. I used the text area field in the ‘Leave a Comment’ page so the user doesn’t have limited space to leave a comment.

Here is a screenshot of the 'Leave a Comment' page in design view:

 

Tuesday 3^rd June – Thursday 5^th June

 During this time period I created the 7 pages for each of the different continents. I created these pages within Adobe Photoshop as this allowed me to be more precise with my positioning. Each of the pages was exactly laid out the same apart from the Antarctica page as there weren’t as many places to write about as the other continents. Therefore, all I needed to change was the images and context according to the continent and the countries/places inside. Once I had completed all the pages in Photoshop, I save them for web and device in the appropriate folder and then simply import them into the correct page.

Here is the 'Best of North America' page in Photoshop with the guidelines on:

 

Tuesday 10^th June

In order to make sure my website was fully functional, I Alpha and Beta tested it. Alpha is testing it myself and Beta testing is getting a peer to navigate around my website to double check all the links were working correctly. When I tested the website myself, I found that some of the links were not linked correctly and therefore I changed them accordingly. When it came to my peer, Lucy Bilton, testing my website, all my links worked and she managed to successfully navigate around my website.

I have taken this screenshot below of my site map to show that my folder structure was organised and that everything was in the correct folder. It is very important to have a well organised site map as this made it easier to link everything together and that they will not break in the future.

I thoroughly enjoyed these units and have learnt a lot of skills that I can take and develop on it the future. As I intend to progress to university after this course, the skills and knowledge I have learnt will definitely be useful. Adobe Dreamweaver is a technical piece of software which I managed to get to terms with straight away, and the skills will be important to know if I intend to carry on in the media sector.

Web Protocols

HTML: HTML stand for Hyper Text Markup Language is NOT programming, it is a mark up language which is made up of a set of markup tags. HTML tags are keywords surrounded by angled brackets like <html> for example. Usually, the tags come in pairs to show that it is opening and then closing again, for example <b> and </b> (first tag opening and second tag closing). When using HTML, it is NOT case sensitive and therefore it doesn’t matter whether it is in upper case, lower case or even a mixture. Here are some examples of markup tags and what they mean:

·         <p> - Paragraph

·         <b> - Bold

·         <html> and <body> - Normally used at the start of HTML

·         <br> - Break

·         <src> - Source

·         <img> - Image

·         <color><#1234> - Colour

 Here are some examples of markup tags and the order they go in:

·          <html>

·         <body>

·         <p> This is my first paragraph </p>

·         <p> This is my <b> second </b> paragraph </p>

·         </body>

·         </html>

XHTML: XHTML stands for Extensible Hyper Text Markup Language and is a stricter and cleaner version of HTML. It issues the same principles as HTML but helps to create a more dynamic website.

·         XML describes data

·         HTML displays data

·         XHTML does both

Using XHTML, it allows the designers to create and customise their own tags to their own preference. XHTML elements must be properly nested and must always be closed. XHTML is slightly different to HTML in the way that only lowercase can be used otherwise it will not work.

Ethical Constraints

Relationship with Client: Having and maintaining a healthy relationship with the client is really important. The client may have a brief that they want following and this should be met at the end of the project.

Authoring and Ownership Issues:  The author and the owner are two completely different roles in a project. The author is the person who creates the work whereas the owner is the person who holds the rights to the work.

Representation: Representation can be seen as a bad thing due to others making assumptions about people, companies etc. after having knowledge of someone or another company in the same industry that have done something wrong. This could potentially give a bad name to a certain business even though they may have not done anything wrong.

Blasphemy: Blasphemy is the act of insulting, showing of contempt or lack of respect for God. This can cause offence to others and therefore should be avoided in the web industry.

Legal Constraints

Intellectual Property Rights: Intellectual property rights are the rights given to someone over the creation from their own minds. These rights are used to give the person exclusive ownership over there creation for a certain amount of time. This links into copyright that is a legal concept that grants the creator exclusive rights to the use and distribution for a limited time of their product. Design rights are also important as they protect the visual design of objects.

Permissions: If you wanted to use certain content that is already being used on another website, you will need to be granted permission to use this content from the source. In order to gain permission from the source, communication such as an email could be used which then could be saved as evidence. If you was to use some content from another website without getting there permission, this could be classed as a criminal offence and legal action could be taken.

Libel: Libel, which can also refer to defamation, is when a false statement is written that may harm the reputation of an individual, business, product, group, government, religion or nation. This is vital that no libel content appears on the website as this could lead to legal action being taken.

Race Relations Act: The Race Relation Act 2000 outlines that it is illegal to discriminate against someone of a different racial background (race, nationality, colour, or ethnic origin). Therefore, someone should not be treated differently to anyone else according to their religion, culture, race etc.

Obscene Publications Act: This act is to prevent any content on a website which may cause offence to the audience. This could be content such as pornography, strong violence and offensive language. This is valid in web design as it will stop the audience from displaying certain content.

Computer Misuse Act: This act can result in people being prosecuted for a number of things when misusing a computer. The type of things that are illegal when using a computer is hacking into other people’s private accounts/systems, helping someone else gain access or misusing protected software.

Data Protection Act: When using the internet, it may ask you to enter personal details in certain situations such as when you are purchasing an item or signing up for a newsletter etc. This is where the Data Protection Act was put into places as this protects the individual’s personal information and stops others from accessing this information such as the government, organisations and other businesses. If anyone wants to use any data for a specific reason, they will need to follow certain protocols, this can be to use the data lawfully and fairly, it is accurate and not modified, it is secure and is kept no longer than needs be.

Accessibility: Accessibility within a website means that the website should be accessible to everyone. People who may have certain disabilities need to be able to understand, navigate around and interact with the website. This can also relate to the older generation who may find it difficult to use a website and to navigate around it. People may also struggle with reading the content on the screen and therefore a solution for this would be to have a voice over reading the content on the page.

Contracts: There are many different contracts that can be put in place when receiving a job in the web industry. Full time and part time employment are available however; there are different types of contracts that are also used. There are fixed term contracts where a company will hire you for a fixed amount of time, for example 12 months. These contracts tend to be used when the company are not guaranteed jobs and can hire people for a certain amount of time. Quite a lot of jobs related to the web industry such as web designers are freelance which means that a company will hire them for a limited time. When companies are taking on new jobs/projects, the majority of the time it will include a brief. There are several different briefs available such as contractual, commission, competition, tender etc. These briefs have to be followed and kept within the guidelines of which the briefs states. If the contract of the brief is broken, this could lead to legal issues.

Opportunities

Interactivity: Interactivity has developed in the modern ear and is important when producing a website. Having different components such as games, questionnaires etc. allows the user to feel more included and in control of the website. However, having too much interactivity in a website may over-power the user and put them off from visiting the website again. Therefore, I would suggest that there is a certain amount of interactivity that should be used.

Usability: The usability of a website is vital. Having a website that doesn’t work can be very frustrating for the user which will lead to them not visiting the website again in the future. Navigation around the website is one of the most important factors that should be fully functional as the user should not click on a link and then go to a completely different page or even no page at all. It is said that a good website will reach its target destination within 3 clicks; therefore this should be something that you think about when creating a website.

Colour/Type and Shape Theory: Colour and shape theory is something that needs to be considered when designing and creating a website. Depending on the genre of the website that you choose, depends on what colours and shapes can be used. An example of this is a travelling website; a website of this theme would be suitable to use colours such as blue as it represents the sea and the sky and according to colour theory it is a trustworthy and loyal colour. Also, shapes such as circle could be used as this would represent the world/planet and a circle is also classed and a friendly shape according to shape theory.

Promotion of Skills/Products: The promotion of skills is showcasing your skills and creativity through the design of the website. This is showing others your ability of making a website. This could also lead to showing future employees the ability you have to make a website if you intended on having a job in that sector.

You might be deciding to produce a website that promotes and offers products to the user. It is important to promote these in a correct manner in order for the user to want to purchase one. This can depend on the layout and how the products are being advertised.

Pushing Technology: Technology is always developing and it is important to keep up to terms with the latest technology. Websites see this as an opportunity as it may attract more users to the website if they thing that the website is up to the latest technology standard. This could mean including components within a website that are more complex to insert, which might involve complicated CSS.

Assets

Assets can be used around a website to make it more fun and enjoyable for the user. Different assets that can be used are:

Sound: Sounds can be used in different areas and for different purposes. You could have sounds automatically playing in the background when the user opens the websites or even certain sound effects when the user clicks on a button for example. This is up to your preference and doesn’t always have to be used. Personally, I don’t like too much sound when browsing on a website as it can sometimes become irritating but in some circumstances it can make the website more fun and interactive with the user.

Text: More or less, the majority of all websites include some text. Text is an important asset as it is one of the easiest ways to interact and give information to the user. However, I believe there is a limit to how much text should be used. For example, I wouldn’t use pages of text as the user may be put off the large amount of text and may not read it, therefore I would make sure that a correct amount of text is used.

Video: Videos are a very good alternative to text or to even include as well as text as this gives the user a different method to take in information. Users may find videos more appealing and enjoyable to lots of text as they can watch and listen to the video rather than reading through lots of text, which may become boring. Personally, I like to see websites that use a good balance between text and videos as this gives the user a choice and can also make it more enjoyable.

Vector Graphics: A good example of a vector graphic that can be used on a website is the logo. Usually vector graphics are created using certain software such as Adobe Photoshop. Vector graphics are made up of using points, lines, curves and shapes. One of the main advantages of using vector graphics is that that are scalable without pixelating. This is very important, as you don’t want to insert graphics that are pixelated as this comes across as un-professional and may put off the user.

Animations: Animations can be included in a lot of places around the website such as an animated logo or banner or even a short animation when first opening the page. Animations can be created using software such as Adobe Flash and then easily put onto the website as a plugin. Having some animation on a webpage will add excitement and make it livelier for the audience.

Images: Lastly, images are important to include in a webpage in order to make it more interesting. Especially if you intent to include some text in the webpage, it is nice to refer to an image that is related to the text. It is also important to have a good optical balance (equal balance between text and images) on your website as it looks professional and also separates the text.

Limitations

Size: It is important to get the correct balance between size and quality when including certain multimedia objects in a webpage such as images and videos. If an image had a large file sized (for example, saved in a .psd format) and was put on a webpage, this could affect loading time of the webpage and also the downloading time of the image. To resolve this issue, the image can be saved in a different format such as .jpeg as this has a much lower file size but still enough quality to put on a webpage. This can also be said for videos as well, as a Full HD video will be a larger file size than a 360p size video.

Download Time: Again, the download time can depend on the size of the multimedia component as the larger the file size the longer the component will take to download. It is very important to get the correct balance of file size to quality as the user can become extremely frustrated if and image or a video is taking a while to download.

Type of Content: There are limitations to the type of content that can be displayed in a website. When inserting the content you will need to take into consideration legal and ethical constraints as the content will need to be appropriate to the target audience and that it will not offend the users. An example of this would be a website aimed at children, as content including long, complex words would not be included as they wouldn’t understand. Also, content with bad language or scenes of violence should definitely not be used, as it is very inappropriate to the target audience.

Requirement for Plug-ins: Sometimes when accessing videos and music on the Internet, certain plug-ins are required in order to access the video or music. Usually warnings such as ‘Flash Player Required’ and ‘Shockwave Protection’ are presented in which requires the user to go and download the software in order for it to work. I consider this a big limitation as users may not feel comfortable downloading certain software that they are not familiar with.