Bletchley Park The Hidden History

Bletchley park the hidden history is a site that hopes to acomplish shedding some light on the history behind bletchley manor and the important role it had in world war 2. I have created the site in such a way to target young adults that are interseted in computers and some of the history behind one of the most iconic computers in history. This site will be usefull to young adults as it has a simple but apealing layout and displays the informatiomn in an intuitive way.

Features

Title and Image

• The title image is an image of bletchley mannor that has purposely been blured to add an element of uknown.
• The title purposely stand out from the background to counter the element of unknown and assuer the user there in the right place and can find what their looking for.

Navigation Bar

• The navigation bar is used to move between the two pages and the contact us section allowing for easy navigation of the site
• The built in features of the browser will also work with the website to make it even easier to navigate

Introduction section

• The introduction is just a brief paragrpah of history about the hut 8 team
• It is a good starting feature as it supplies the base knowladge for the rest of the page that goes a little deeper into certian parts of the history

Alan turing section

• This section give the user more indepth information about alan turing

Colossus section

• The colossus section has an embeded video about some of the people who orignially worked on the machine
• This section also has a small paragph with some information aswell incase the user doesnt have the time to watch the full video.

Contact us section

• The contact us section is there so anybody with questions that arent answered through the website you can contact us and get the answers to your questions.

Footer

• The footer bar is used for the links to different social media so you can keep up to date with any information or news about bletchley park.

Find Us Section

• The find us section uses and embeded map using js so that when the user wants to visit they can see exactly when bletchley park is located.

Testing

Navigation Feature:

What was the intened use of this feature?

• The intended use of this feature was to be able to navigate through the webpage with ease. I ensured that they worked propperly by testing each anchor/link on each page making sure they all link to the correct place, for example making sure the "home" button on the nav bar always took the user back to the landing page no matter which page they were on.

Introduction/turing/colossus Feature:

What was the intened use of this feature?

• The intended use for the introduction feature was to give the user a brief description of the history of bletchley park so that the user can gain some basic knowledge before continuing down the page. I ensured the feature worked by using wikipedia to get a general description and then showing it to multiple people who have had no previous knowledge about bletchley park, and asked wether this information would allow them to build a basic understanding of what happened at bletchley park. all participents said that it was enough information.


• The intended use for the turing feature was to shed a bit more light on the alan turings role in decoding the enigma and creating the colossus machine. i ensured this featured worked in the same way i ensured the introduction woudl work. i used the same controll group as before and only asked them the questions after i asked them / gave them the initial information.


• The intened use for the colossus feature was to give a small amount of information about the colossus machine in the paragraph so that if the user didnt have enough time to watch the full video and take in all the information they would still be able to gain a basic understaning of what the colossus machine and what it did. I also added the video for the oposite reason. I ensured the features worked by splitting my control group in half and showing one half the video and the other half just the paragraph. Then asked each group wether the information given would give them a suitible undertanding about the hidden history of bletchley park in more detail. all participents answered yes there is enough information given to have a deeper understaing of what happened at bletchley park.

Contact us feature:

What was the intened use of this feature?

• The intened use of this feature was to allow the user to contact us and ask any question that cannot be answered with the information given. i have ensured this works by testing with multiple emails and question and every request is successfully sent to the codeinstitute form dump.

Find us feature:

What was the intened use of this feature?

• The intened use of this feature was to allow the user to easily find out where bletchley park is located and input the coordinates/location into there maps. I ensured this by using the same control group that had no previous knowledge of bletchley park and asked them to use the find us page to find out where it is and navigate to it using maps all using different starting points. all participents were able to location and get directions from there given start points.

Different screen sizes:

To get the different screen sizes to work and make my web page responsive i had to use whats called a media query

@media screen and (max-width:400px){
    .title{
        font.size="24px"
    }
}

I used these to chanage the css of each component at different screen sizes e.g. 1100px , 768px , 320px so that the structure of the webpage wouldn't break.
So for the screen size of a laptop i have the image and the paragraph next to each other so the flow of information goes from left to right, this is also true for screens bigger then a laptops such as a desktop.
For small screens such as tablets and phones i change the structure of the page to have the images above the paragraphs so the flow is more vertical then on the laptop/desktop.

Validator Testing:

HTML validated

CSS validated

Deploment

• The site was deployed to GitHub pages. The steps to deploy follows:
• In the GitHub repository, navigate to settings tab
• From the source section drop-down menu, select the master branch
• Once the master branch has been selected, the pages will be automatically refreshed with a detialed ribbon display to indicate teh sucsessfull deployment.

The live link cabe be found here -

Credits

content

Media