Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

MC51003B

INTERACTIVE MEDIA Project brief (Autumn 2022)

Tutors: Kay Grant ([email protected]) / Richard Gallon ([email protected])

On this induction course, you will be introduced to the applications and thinking required for all interactive projects. You will learn how the web is different to other formats, how to plan your site and, by following clearly explained steps, you will build a one page website that contains images and styled text and uses other media, such as videos.

THE PROJECT

The Brief 

Each student will work on their own to build a website that recommends a film or tv show to their fellow students.

Research

Choose a film or tv show that fits the selected theme. Make sure that you choose one that you think your fellow students should watch at least once in their lives. No repetition within the class. You will then need to create a webpage for your choice.

Research the following things that you will need to include on your website.

· Theme What is most interesting about your chosen film or show?

· Why? Why should anyone watch it? Be persuasive.

· Story What happens in the film? Avoid spoilers.

· Who? The director & actors.

· Trailer Embed a trailer

Examples of other information to gather:

· The visual language of your selection. What atmosphere, colours, lighting, camera angles etc, are used?

· What emotions does it leave you with?

· Include relevant hypertext links and pictures.

Things to consider:

Layout, colour, typography, imagery, atmosphere

· What font do you want the title to be in?

· Which order do you want the information?

· What colours should you use? (https://color.adobe.com/create)

· Where do the images go?

· Big text? Massive text?

· Minimalist design? Maximalist design?

The templates are at a screen size of 1400 pixels wide, so you will need to work to this page width.

Don’t forget to credit yourself.

Preparing images
Use Photoshop to create a cut-out image (as a PNG) for one of your webpage sections, and to optimise your 4 x background images. You will need to create an Adobe Creative Cloud account if you don’t already have one. You can do this using your Goldsmiths email address. The account is active for the duration of your degree.

Photoshop.

· Cropping, manipulating, and creating text

· Saving for use on the web.

· Images to be used on the web should have no spaces in the titles, but underscores (underscore = hyphen + shift keys) are fine. eg: (image_title.jpg )

Putting it together

· You will  download a copy of the web page template from the VLE to work on

· Using HTML code, we will add all of the collected information to the page.  

You can download the webpage template from the VLE - https://learn.gold.ac.uk/mod/resource/view.php?id=1212711

HTML

· What does it all mean?

· What is a tag? Giving them IDs or classes.

· Adding your content. In the right place.

· Adding links to other places on the internet.

· Linking your HTML page to a CSS stylesheet.

We’ll then work through how to style the text, add images, create links to other pages.

We style the content using a language known as CSS.

CSS

· Setting a background for the page.

· Setting text size, font and colours.

· Formatting text, adding format link colour and hover colour for text links.

· How to turn an image into a background image?

You can edit the webpage template code using the open source, free application https://brackets.io/.

FURTHER READING

HTML starter http://www.w3schools.com/html/html_intro.asp

CSS starter http://www.w3schools.com/css/css_intro.asp

Good introduction http://htmlandcssbook.com

Some further info http://alistapart.com/

Step-by-step coding tutorial http://www.codecademy.com/tracks/htmlcss

CSS Grid https://www.w3schools.com/css/css_grid.asp