![Page 1: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/1.jpg)
University of Sunderland CDM105 Session 1
![Page 2: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/2.jpg)
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
![Page 3: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/3.jpg)
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
![Page 4: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/4.jpg)
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
![Page 5: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/5.jpg)
University of Sunderland CDM105 Session 1
Course ObjectivesCourse Objectives
• Web programming– JavaScript and Flash ActionScript
• XML
Stage Three - Advanced Web Development
![Page 6: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/6.jpg)
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
![Page 7: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/7.jpg)
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
![Page 8: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/8.jpg)
University of Sunderland CDM105 Session 1
Web AuthoringWeb Authoring
Multimedia Assets
Pictures, Video and Sound
on the web
![Page 9: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/9.jpg)
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.
![Page 10: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/10.jpg)
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
![Page 11: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/11.jpg)
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 !
![Page 12: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/12.jpg)
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
![Page 13: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/13.jpg)
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
![Page 14: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/14.jpg)
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)
![Page 15: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/15.jpg)
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)
![Page 16: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/16.jpg)
University of Sunderland CDM105 Session 1
JPGsJPGsHighest Quality
Lowest CompressionLarger File Size
Lowest QualityHighest Compression
Smaller File Size
Note how the image degrades
![Page 17: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/17.jpg)
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.
![Page 18: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/18.jpg)
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
![Page 19: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/19.jpg)
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">
![Page 20: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/20.jpg)
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)
![Page 21: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/21.jpg)
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">
![Page 22: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/22.jpg)
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
![Page 23: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/23.jpg)
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
![Page 24: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/24.jpg)
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>
![Page 25: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/25.jpg)
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.
![Page 26: University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework](https://reader035.vdocuments.net/reader035/viewer/2022070406/56649ddf5503460f94ad8627/html5/thumbnails/26.jpg)
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.