Introduction to creating a Website

An Introduction using Photoshop and Dreamweaver
The World Wide Web is a system of interlinked hypertext documents accessed via the internet. With a Web browser, one can view Web pages that may contain text, images,videos, and other multimedia and navigate between them using hyperlinks. The World Wide Web was started in 1989 by the English physicist Sir Tim Bernes-Lee, now the Director of the World Wide Web Consortium. A web page or a blog are used by designers these days to showcase their portfolios.

How Websites Work

Data is stored on a main server, the host. when you dial up and connect to the internet you are using your ip-address. You are in effect pulling data across.

"URL" Is the domain name.

.com- communication a global larger company.

.co.uk- hosted in the UK

.org- no profit possibly government or charity.

Saving

Make sure work is saved every few minutes, save in a hierarchy format. Name the file so it can easily be found, and inside separate each part of the task into separate folders. Everything done must stay in this file otherwise if anything is removed you have to re-link the whole website! Date all work(easy to find).

When saving; a vectored flat colour graphic use gif/png, or for a compression format or photograph use jpeg.

Sizing

Most websites work to the size 800 pixels x750 pixels

72 dpi-web

11pt is optium size for text on the net

Creating a Basic Website

*Always draw ideas down on paper first.

*Open Photoshop and file-new-document and customise to 800x600 pixels, and make sure the resoultion is set to 150dpi.

*To bring down the rules for drawing( apple R) or view-rules.

*Make a new layer for everything you do.

*Draw a set of buttons using the shape tool

*To turn headings to buttons, use the rule to make sure everything is aligned and then use the scalpol tool to each individual shape.(slices from guides)

*Highlight and delete the pieces you don't need (file-save for web)

*Select the parts you want as PNG-8, save to webfile format HTML and images.

*Open up Dreamweaver file-open,find website folder and open index file(first web site page)

*File-preview in browser apple12 shows you it live on the internet.

*Modify-page properties background colour and click colour pallete or move pipette over your background colour to match colours. Click ok for it to fill any side gaps with your background colour.

*Hypo link- activate buttons

*Open all windows, Window-properties, click on link and another window will open. Select file and click the page you want to link to it, that then makes it an active button.

Ideas

After watching some examples of short films in class, one did stick in my head,
Koyaanisqatsi, and his style i then thought maybe i could create something similar (maybe on a slightly smaller scale).  I could record some car journeys and speed them up, or record a sunset over night maybe down at Whitstable or Ramsgate where i could also film the boats coming in and out.  Then after speaking to some of my class mates i realised they had had simalar ideas.... so back to the drawing board (in other words, the list of words).

Snow Patrol - Open Your Eyes

Hot and Cold Media

HOT AND COLD MEDIA

Hot media, as defined, is pretty much ready made. Cool and/or Cold media are the opposite. You interact fully with very little of a predefined notion involved. Hot and cold media underpins everything. Design for people interacting on the world where we live. Do we use Handles or Buttons to do this? With Handles we manipulate the world, with Buttons we interact. We need to design emergency routes for the users. Maps to show and hold in the users head

COLD
A T.V's and computer screens are generally considered to be COOL media. T.V's need power and support for them to function. They are "Fuzzy"! You cannot grab it and it is impossible to touch the fuzzy images that appear. Response to a thought. Causel Affect. Send something out there and you get something back! So generally things we interact with are considered COLD.

HOT

A book or a gravestone is considered to be HOT media. They are distinct and you can't edit it. You cannot change the original, it's set. A photograph is also hot. It's a moment in time captured and cannot be change. The same applies to newspapers. The stories that are written are something that is set.

Desiging Interaction

Designing interaction is an other term for mixed media, which includes moving imagery, sound, touch screen technology and web media.

Web media (web3) is constantly expanding with many sites being used all over the world such as; Facebook, Myspace, Bebo, twitter, and you tube.

Here are a few examples of how we interface with each other.                                                                  

Wiki – a self-editing open source, share information and thoughts.                                                   

Youtube – share video and imagery.                                                                                                           

Rich Media gives the opportunity to share and explore, interactive media is known as “sticky” because it keeps people interested.

IDEO

Designer Bill Moggridge is a founder of IDEO.   It is one of the most successful design firms in the world, and one of the first to design codes and software for computers.   Bill's career has had three phases; first as designer, then as a manager of design, and now as a communicator, working as a writer, graphic designer and video maker.

I watched an interview with Bill Verplank (www.designinginteractions.com/interviews/BillVerplank) in which he describes his views on how interaction design works, which has evolved over many years of studding. He describes the process of design interaction with a concise diagram. Bill Varplank and Bill Moggridge worked closely together to create a key of defining how we Design for Interaction. There are three very simple questions that must be answered:

1. How do you?

How do we interact we something? A Gallery space, Audio Visual. How to play a small device such as mobile phones or MP3 players for example and push "Buttons". How do we affect the world around us?

2. How do you feel?

How do we feel about what we see or interact with?

3. How do you know?

Do we need something to guide us through like a map or a route? Moment to moment. Simple instructions on how we navigate.

Stop Motion

I have always wondered how stop animation's are created, and today i found out how.  We worked in groups to produce short films showing stop animation, we used Stop Motion on the Mac books.  looking into slow motion and other ways of manipulating time of video footage, to achieve good quality video with slow motion effect you must look at camera shutter speed, settings and frames per second. 

Below are two examples of  Stop Motion film that our group created.

This a Stop motion film i found on Youtube.  It was created by The Last Laugh it is a unique stop motion experience.  The Song used is "Chase" by the band Partyline.

I also found this on You-tube  it is a stop motion style puppet show of Alice in Wonderland.

Film Editing

How is sound and imagery editing used?

Below are a few notes on a collection of work i have looked at

Soul Bass - Grand Prix
Close up and repeated shots, running commentary that runs along side imagery (narrative), heart beat and engine revs. Editing brings you in close, intense, short use of clips, split screening (video becoming a collage)



Soul Bass - In harms way (war film)

At some points there were four sounds and layers of music overlaying, which made the imagery appear extremely powerful, transition, cross phase blending videos and black and white imagery were also used.


Koyaanisqatsi (which means life out of balance) - 1982, Director Godfrey Reggio
Shows how we live and the cycles we go through, similar to an opera in the way in which it flows, the sound and also the movement. The imagery is speed up and slowed down alongside the music. also a few random shots of people standing still with movement behind of the busy city. The contrast of the stillness of the buildings at night with the constant flow of traffic is quite an interesting compassion.  After watching this wonderful piece of art, with great composition, music and images it has started to get my cogs turning and ideas i could do. 
Director: Godfrey Reggio
Cinematographic: Ron Fricke
Composer: Phillip Glass


Jonathon Glazer- film director and commerical director

Jonathon Glazer is a very influential directors of Music Video's and Advertisements of the modern day.  Many people in the media industry have come to recognize his very distinctive style making him one of the most "in demand" directors of his generation.  This also taken him into the realms of feature length films, including the brutal gangster movie "Sexy Beast" (2000) starring Ray Winstone and Ben Kingsley.

I have looked at a few pieces of Glazer's work, he is probably best recognised for his Guinness and Levis adverts. When watching the Guinness surfer and swim black i noticed a use of close up face shoots, running commentry, a build up of music, and cutting between shots. He has also created fet films, Sexy Beast, Birth and music videos ( blur, jamiroquai and radio head).
Jamiroquai-Virtual Insanity,

whole music video is set in one room with just the singer two sofas, an a crow. the whole room is moving around all the time which gives the effect of him being on a conveyer belt or doing the moon walk, in reality the walls are on wheels and are being pushed from side to side.

Brief- Use of Typology (Part a)

Part one of the brief is to use a typology to create a series of photographs or video outcomes in response to one of the following:

• Tree – Shape

• Hair – Suite

• Flow – Course

• Coat – Finish
I have looked at their dictionary definitions to see the various outcomes of these words.
Source: The Oxford English Dictionary (1933)

Collins Gem Dictionary and Thesaurus

Tree – Shape

TREE

1. A plant having a self supporting woody main stem or trunk.

2. Includes bushes or shrubs or erect growth and having a single stem, and even some herbaceous plants which grow to a great height.

3. A piece of wood; a stem or branch of a tree.

4. The cross on which Christ was crucified the holy road.

5. The wooden shaft of a spear.

6. A wooden vessel.

7. Any structure or figure, natural or artificial of branched form.

SHAPE

1. The visible form or appearance or characteristics of a particular person or thing.
2. A persons body in regards to appearance.
3. One of the forms or diversities of appearance, structure or properties in which a thing may exist. 4. The sexual organs; the distinctive organ of either sex 'the private parts of a female '.

Shape- create, fashion, form, make, model, mould, produce, appearance, aspect, build, size and cut.

Hair-Suite

HAIR 

1. Fine and generally cylindrical filaments that grow from the skin.

2. The aggregate of hairs growing on the skin of an animal; that growing naturally upon the human head; also, hairs collectively or in the mass, as used for manufacturing purposes and the like.
3. Instrumental. 

4. The epidermis of a plant.

Hair of the dog- an alcoholic drink taken to cure a hangover. 'hair of the dog that bit you' 

A hair’s breadth- a very small margin.   

Keep your hair on- stay calm. 

Let one’s hair down- behave wildly or uninhibitedly. 

Make someone’s hair stand on end- alarm someone. 

SUITE

1. A set of rooms for one person’s or family’s use or for a particular purpose.

2. A set of furniture of the same design. 

3.A set of instrumental compositions to be played in succession. 

a set of pieces from an opera or musical arranged as one instrumental work.

4.A succession or series.

5.Rooms in  series leading from one to the other.

Flow-Course

FLOW

1.The action or fact of flowing; movement in a current or stream; an instance or mode of this. Originally said of liquids, but extended in modern use to all fluids, air, electricity, etc.

2. Any continuous movement resembling the even flow of a river and connoting a copious supply; an outpouring or stream.
3. A deluge, flood. An overflowing. 
4. A flux for causing the colours to ‘flow’ or blend in firing.
5. To move on a gently inclined surface with a continued change of place among the particles or parts; to move along in a current.6. Of the blood; to pass along the vessels of the body, to circulate. Of persons: to come and go.

7.Move steadily and continuously in a current or stream.

8.Of the sea or a tidal river

COURSE

1.A direction followed or intended. 

2.The way in which something progresses or develops e.g the course of history. 

3.A procedure adopted to deal with a situation. 

4.A dish forming one of the successive parts of a meal.

5.A series of lectures or lessons in a particular subject.

6.A series of repeated treatments or doses of medication. 

7.An area of land or water prepared for racing, golf, or another sport.

Coat-Finish

COAT

1. An outer garment.
2. Used to translate ancient words.
3. Coat of arms.4. Indicating profession; hence, profession, class, order, sort, party.
5. A natural covering; an animals covering of hair, fur, wool, feathers; rarely the skin.
a. A membrane of outer structure investing or lining an organ – coat or the brain and eye.
6. A layer of any substance; such as paint, tar, plaster, covering a surface.
So much as is laid on at one time: a coating.
7. Anything that covers, invests, or conceals.
8. To cover a surface layer or coating (or with successive layers) of any substance, as paint, tar, tinfoil, etc; also predicated of the substance covering the surface.

FINISH

1.Bring or come to an end. 

2.Consume or get through the whole or the remainder of something

3.Have nothing more to do with.

4.Reach the end of a race or other sporting competition.

5.End by doing something or being in a particular position. 

6. Kill or comprehensively defeat.

7.Conclusion, last stage, termination.