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

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


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



• 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



• Web programming– JavaScript and Flash ActionScript

• XML

Stage Three - Advanced Web Development


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


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


Web AuthoringWeb Authoring

Multimedia Assets

Pictures, Video and Sound

on the web


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.


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


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 !


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


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


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)


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)


JPGsJPGsHighest Quality

Lowest CompressionLarger File Size

Lowest QualityHighest Compression

Smaller File Size

Note how the image degrades


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.


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


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">


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)


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">


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


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


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>


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.


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.

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

Documents