university of sunderland cdm105 session 1. university of sunderland cdm105 session 1 assessment this...

University of Sunderland CDM105 Session 1

University of Sunderland CDM105 Session 1

AssessmentAssessment

• This module is assessed by 2 pieces of practical Coursework

– Coursework 1 is worth 40% of the final mark and is based on a developing a set of web pages

– Course work 2 is worth 60% of the final mark and is based on developing an advanced multimedia set of web pages

• There are no examinations

University of Sunderland CDM105 Session 1

Course ObjectivesCourse Objectives

• To be aware of Web design issues

• Basic understanding of HTML

• To be capable of adding Java Applets to Web pages

Stage One - Fundamental Skills

University of Sunderland CDM105 Session 1

Course ObjectivesCourse Objectives

• To be able to use Web authoring tools to enhance and manage web sites– e.g. Macromedia Dreamweaver and Macromedia Flash

• To be able to add simple multimedia elements to web sites

• Cascading Style Sheets (CSS)• To fully understand the principles of

information design

Stage Two - Web Authoring Skills

University of Sunderland CDM105 Session 1

Course ObjectivesCourse Objectives

• Web programming– JavaScript and Flash ActionScript

• XML

Stage Three - Advanced Web Development

University of Sunderland CDM105 Session 1

Web SiteWeb Site

• PowerPoint lecture slides available • The machine based session will cover:

– Background Internet information– Searching the web– Basic HTML– HTML layout (tables and frames)– JavaScript and XML– Macromedia Dreamweaver and Flash

University of Sunderland CDM105 Session 1

BooksBooks

• Key texts (i.e. books you must read )

• Bruce, B - Sams Teach Yourself Dreamweaver MX 2004 in 24 hours. Sams

• Ulrich, K - Visual Quickstart Guide FLASH MX 2004 for Windows and Macintosh

University of Sunderland CDM105 Session 1

Web AuthoringWeb Authoring

Multimedia Assets

Pictures, Video and Sound

on the web

University of Sunderland CDM105 Session 1

PicturesPictures

• Vectors - Vector graphics describe the picture according to their geometric characteristics.

• Bitmaps - With bitmaps, images are represented by means of a grid of small squares, like a mosaic, that are known as pixels.

University of Sunderland CDM105 Session 1

VectorsVectors

• mathematical objects that define shapes

• permits them to be scaled up or down to any size without any loss of detail or clarity

• Small file size - Good for Logos

• Used in Macrodmedia FLASH

University of Sunderland CDM105 Session 1

BitmapsBitmaps

• Made up of a number of pixels

if you scale the image

up or down it will lose

some of its detail or

become jagged

GENERAL RULE :Create at the size you want to use it !

University of Sunderland CDM105 Session 1

BitmapsBitmaps

Note that the enlargedimage is slightly blurred

As a software packagehas had to “guess” the colourof the extra pixels addedwhen the image was enlarged

University of Sunderland CDM105 Session 1

Web BitmapsWeb Bitmaps

• GIFs (Graphic Interchange Format)

• JPGs (or JPEGs, which stands for Joint Picture Experts Group)

• PNGs (Portable Network Graphic)

Graphical formats used on the web

University of Sunderland CDM105 Session 1

GIFGIFs

• Hardware independent (cross platform)• Uses the lossless LZW (Lempel-Ziv Welch)

compression algorithm• Limited to 8-bit colour depth

– degradation of photo-realistic images– permits single transparent colour– GIF89A specification permits animations

• Copyright problems - LZW is patented

(Graphic Interchange Format)(Graphic Interchange Format)

University of Sunderland CDM105 Session 1

JPGsJPGs

• Uses a lossy compression algorithm• 24 bit colour depth

• Developed from research into human vision – exploits weakness in human visual perception: greater

sensitivity to changes in brightness than colour– discards some information

• Can reduce file size to 1/25 of their original size

(Joint Picture Experts Group)(Joint Picture Experts Group)

University of Sunderland CDM105 Session 1

JPGsJPGsHighest Quality

Lowest CompressionLarger File Size

Lowest QualityHighest Compression

Smaller File Size

Note how the image degrades

University of Sunderland CDM105 Session 1

PNGsPNGs

• 48 bit colour depth• Layer transparency• Patent and license-free• lossless compression• Support in Internet Exploxer 4+ and Netscape

4+• Been in existence for 6 years but not supported

by most browsers• Widely used by graphical editor

– i.e. Adobe PhotoShop

(Portable Network Graphic)(Portable Network Graphic)Tip: The best format to store Bitmap graphics when you first capture an image and whenyou edit it. When you are happy with theimage convert it to a JPEG to use on the web.

University of Sunderland CDM105 Session 1

Sound File FormatsSound File Formats

• WAV - de facto standard for music and sound in Microsoft Windows– supports mono/stereo, 16 or 8 bit

– different sampling rates

• AU - developed for digital sound on Unix platforms– used as the standard format in Java

• MIDI - Musical Instrument Digital Interface– standard protocol to communicate music (1983 onwards)

• MPEG – A video and sound compression format widely used to download music from the internet

University of Sunderland CDM105 Session 1

Inserting Sounds into HTMLInserting Sounds into HTML

• The only standard tag in HTML at the current time to include sound that will function in the main Browsers

WITHOUT a PLUGIN application

<EMBED SRC="music.wav" WIDTH="150"

HEIGHT="60" CONTROLS="TRUE" LOOP="TRUE">

University of Sunderland CDM105 Session 1

Video File FormatsVideo File Formats• AVI - Audio Video Interleave

– Windows format which has been greatly improved since it was first introduced. It now has a good standard compression algorithm to reduce the file size.

– Single track for video and audio

• QuickTime– Developed by Apple

– Multiple tracks for video and sound but has to be reduced to a single video and audio to work in Windows.

• MPEG - Motion Picture Experts Group– MPEG2 is used by DVDs (Uses the same lossy compression system as

used in JPEG still images)

University of Sunderland CDM105 Session 1

Inserting Video into HTMLInserting Video into HTML

• The only standard tag in HTML at the current time to include sound that will function in the main Browsers

<EMBED SRC="video.avi" WIDTH="160"

HEIGHT="150” CONTROLS="TRUE"

LOOP="FALSE">

University of Sunderland CDM105 Session 1

StreamingStreamingAudio and VideoAudio and Video

• Developed first by RealNetworks– RealVideo and RealAudio

• Video/Audio is broadcast by a server on the network. End users turn in by choosing the correct address. The server breaks the video/sound into small packages/units and sends them to client browser (rather than the client having to download the complete video/sound file first before playing)

• Streaming of video and/or sound is also supported by the Apple Quicktime player and the Microsoft Windows Media Player

University of Sunderland CDM105 Session 1

Streaming Audio and Streaming Audio and VideoVideo

• Today, there are a number of software solutions to streaming but most are based around the MPEG compression codecs – i.e. MPEG 3 for music files– MPEG 2 for video– Plus the new MPEG 4 standard

• The use of MPEG compression codecs results in the smallest file size which is why it is very widely used on the web to deliver multimedia content

University of Sunderland CDM105 Session 1

Java AppletsJava Applets

• Self contained programs that execute or run inside the Browser

• Written in the programming language Java

• HTML structure used to include Applets

<APPLET CODE="first" WIDTH="100" HEIGHT="200">

<PARAM NAME="IMAGE" value="picture.gif">

<PARAM NAME="DATE" value="01/01/2000">

</APPLET>

University of Sunderland CDM105 Session 1

ShockwavesShockwaves

• Web versions of Macromedia programs– Authorware– Director– Flash

• Easier to develop than Java• Browsers require a plug-in

– The plugging is free and often pre-installed on new PCs.

– Latest figures show that over 90% of all devices connected to the Internet has the player installed.

University of Sunderland CDM105 Session 1

Machine Based TutorialMachine Based Tutorial

• The tutorial session requires you to read over web based materials and complete the exercises contented within them

• In the machine based tutorial session you will read about the history of the Internet, develop simple web pages.

• You should aim to complete the machine based tutorial session 1 before the next lecture.