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.