1. University of Sunderland CDM105 Session 1

2. University of Sunderland CDM105 Session 1 Assessment 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

3. University of Sunderland CDM105 Session 1 Course 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

4. University of Sunderland CDM105 Session 1 Course 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

5. University of Sunderland CDM105 Session 1 Course Objectives Web programming –JavaScript and Flash ActionScript XML Stage Three - Advanced Web Development

6. University of Sunderland CDM105 Session 1 Web 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

7. University of Sunderland CDM105 Session 1 Books 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

8. University of Sunderland CDM105 Session 1 Web Authoring Multimedia Assets Pictures, Video and Sound on the web

9. University of Sunderland CDM105 Session 1 Pictures 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.

10. University of Sunderland CDM105 Session 1 Vectors 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

11. University of Sunderland CDM105 Session 1 Bitmaps 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 !

12. University of Sunderland CDM105 Session 1 Bitmaps Note that the enlarged image is slightly blurred As a software package has had to “guess” the colour of the extra pixels added when the image was enlarged

13. University of Sunderland CDM105 Session 1 Web 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

14. University of Sunderland CDM105 Session 1 GIF GIFs 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)

15. University of Sunderland CDM105 Session 1 JPGs 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)

16. University of Sunderland CDM105 Session 1 JPGs Highest Quality Lowest Compression Larger File Size Lowest Quality Highest Compression Smaller File Size Note how the image degrades

17. University of Sunderland CDM105 Session 1 PNGs 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) Tip: The best format to store Bitmap graphics when you first capture an image and when you edit it. When you are happy with the image convert it to a JPEG to use on the web.

18. University of Sunderland CDM105 Session 1 Sound 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

19. University of Sunderland CDM105 Session 1 Inserting 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">

20. University of Sunderland CDM105 Session 1 Video 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)

21. University of Sunderland CDM105 Session 1 Inserting 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">

22. University of Sunderland CDM105 Session 1 Streaming Audio 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

23. University of Sunderland CDM105 Session 1 Streaming Audio and Video 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

24. University of Sunderland CDM105 Session 1 Java Applets Self contained programs that execute or run inside the Browser Written in the programming language Java HTML structure used to include Applets

25. University of Sunderland CDM105 Session 1 Shockwaves 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.

26. University of Sunderland CDM105 Session 1 Machine 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.