This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Understanding Computers 2-part 6 as PDF for free.
Understanding Computers Autumn, 2006 Part 6 By Yasser M. Ibrahim Based on UC 10
Recall: Course Outline
Chapter 8: Computer Networks Introduces the concepts and terminology of a computer network, the hardware and software involved, and the different ways the computers communicate with each other.
Chapter 9: The Internet and World Wide Web Addresses questions such as What makes up the Internet? How did the Internet begin and where is it heading? How can the Internet be used to find specific information? …
Chapter 10: Multimedia and the Web Focuses on the multimedia found on Web sites.
Chapter 15: Computer Security and Privacy (if possible) Explains the risks and consequences of computer crime, e.g., hacking!
Cairo University, FEPS, 2006
2
Understanding Computers
Internet Applications Multimedia and the Web10 Chapter
Learning Objectives (1)
Describe what multimedia is and some advantages and disadvantages of using it
Explain the difference between the following multimedia elements: text, graphics, animation, audio, and video
List several Web-based and non-Webbased multimedia applications
Cairo University, FEPS, 2006
4
Understanding Computers
Learning Objectives (2)
Briefly describe the basic steps and principles involved with multimedia and Web site design
Discuss the various tasks involved with multimedia and Web site development
Speculate as to the format of multimedia in the future
Cairo University, FEPS, 2006
5
Understanding Computers
Chapter Overview
What is web-based multimedia
Advantages and disadvantages of using multimedia
Multimedia Elements
Text, graphics, Animation, Audio, Video
Multimedia web site design Multimedia web site development
The future of web-based multimedia
Cairo University, FEPS, 2006
6
Understanding Computers
What is Web-Based Multimedia?
Multimedia refers to any type of application or presentation that uses more than one type of media, such as text, graphics, video, animation, and sound
Web-based multimedia refers to web sites containing more than one type of media, such as … Web based multimedia was very limited as computers and internet connections were too slow to support it It is now much more feasible because … So growing number of web sites using multimedia is expected
Cairo University, FEPS, 2006
7
Understanding Computers
Advantages of Using Multimedia
Can present the material in multiple forms so can fit a variety of learning styles, e.g.
Visual learners (learn by seeing) Auditory learners (learn by hearing)
When multiple styles are used, learning is enhanced
To make the presented material more interesting, more enjoyable, and easier to understand
Compare TV news with radio news Compare oral lectures, whiteboard lectures, and PP lectures
Also manufacturers could use it to convince visitors with their products
Cairo University, FEPS, 2006
8
Understanding Computers
Disadvantages of Using Multimedia
Cost
quite a bit expensive and time consuming to create Usually developed by professional development firms
Slower than text-only content, so annoying to dial-up users Some components may not be compatible with all devices and browsers Amount of storage space required is
Cairo University, FEPS, 2006
9
Understanding Computers
Multimedia Elements: Text
Important in most web-sites to supply basic content, text-based menus, and hyperlinks Also added to buttons, logos, and other graphics Can be displayed in a variety of:
Typefaces, colors, appearances
Cairo University, FEPS, 2006
10
sizes, Understanding Computers
Multimedia Elements: Text Important to select a typeface that matches the web page and application for which it will be used! Important to select the appropriate font size!
Also
not too large!
You just want to show enough information on the screen at one time to avoid annoying users
Watch your colors combinations!
High degree of contrast between the text color and background color makes it most readable
Some browsers could not show all typefaces and some users might change the your settings
So use images instead of text when you want to show texts exactly as you want, e.g. for logos or navigation buttons
Cairo University, FEPS, 2006
11
Understanding Computers
Multimedia Elements: Graphics
Graphics or images refer to digital representations of photographs, drawings, charts, and other visual images Unlike animation or video, graphics are unmoving static objects Could be created by scanning, digital camera, creating or modifying an image by a program, Could be obtained from clip art or stock photograph images (premade) either free or with fees. E.g.
Graphics are available in many formats such as
BMP (windows paint and similar programs), TIF (with scanned images) GIF, JPEG, PNG (with web pages)
Cairo University, FEPS, 2006
12
Understanding Computers
Graphics: GIF
Graphics Interchange Format -- file extension .gif Standard format for web page images thus supported by all browsers Efficient: an image can contain up to 256 colors
Smaller palette size reduce the file size
Uses lossless file compression: reduces the size of a file while retaining all the original information
So quality not decreased when it is saved in the GIF format Contrast lossy file compression which 13 Understanding Computers Cairo University, FEPS, 2006
Graphics: GIF
GIF images are always rectangular Transparent background make it appear non-rectangular Can be interlaced
Display it initially at low resolution and progressively enhance Non-interlaced are shown top to bottom Why do you think???
Cairo University, FEPS, 2006
14
Understanding Computers
Graphics: JPEG
Joint Photographic Experts Group format -file extension .jpg Supported by all browsers Could be progressive (similar to interlaced GIFs) Can contain more than 16 million colors (True Color) so often used for photographs Compressed using lossy file compression
So quality is lost during compression The higher the compression (from 0 to 100%), the smaller the file size but more quality is lost
Cairo University, FEPS, 2006
15
Understanding Computers
Cairo University, FEPS, 2006
16
Understanding Computers
Graphics: PNG
Portable Network Graphics format -- file extension .png Uses more efficient lossless compression than GIF so results in slightly smaller file sizes Specially for web page images to replace GIF but still not widely used Can be interlaced and transparent Can use a color palette of 256 colors or less or can use true color
Cairo University, FEPS, 2006
17
Understanding Computers
Choosing a Graphic Format
Important to use appropriate graphics format Web page should use as small a file size as possible to reduce loading time So GIF and PNG are usually used with web pages JPEG for photographs because it supports true color Physical size affects the file size, so use the appropriate size Use thumbnail images to avoid increasing the loading time
Thumbnail image is a small version of images that are linked to a corresponding full-sized 18 Understanding Computers Cairo University, FEPS, 2006
Recall: Chapter Overview
What is web-based multimedia
Advantages and disadvantages of using multimedia
Multimedia Elements
Text, graphics, Animation, Audio, Video
Multimedia web site design Multimedia web site development
The future of web-based multimedia
Cairo University, FEPS, 2006
19
Understanding Computers
Animation (1)
Series of graphical images that are displayed one after the other to simulate movement
E.g. Cartoons on TV
Java applet and animated GIFs are used for animation on the web Animated GIF: A group of GIF images stored in special file to be displayed one after another Java Applet: Small Java program inserted into a web 20 Understanding Computers Cairo University,page FEPS, 2006
Animation (2)
For more complex animation:
Shockwave, Flash, or JavaScript
These types of animation require a plug-in to view
Plug-in: A small program that adds additional capabilities to your browser
Cairo University, FEPS, 2006
21
Understanding Computers
Audio (1)
All types of sound
Spoken voice, sound effects, …
Found as background sounds, part of games, tutorials… Can be recorded using a microphone, MIDI device, captured from CDs or downloaded from the Internet Audio files are usually large so frequently compressed to reduce their size Audio files played with plug-ins or player programs
Windows Media Player, RealOne Player, QuickTime 22 Understanding Computers Cairo University, FEPS, 2006
Audio (2)
Audio files on Web can be in a form of streaming audio
A small portion of the file is downloaded and buffered (placed in memory or temporarily stored on the HD) and then begins playing while the rest is downloaded (Why?)
Audio Formats include
.wav (Waveform): Not compressed, so large .mp3 (Motion Picture): Very efficient, high quality compressed. wav can be converted to mp3 to reduce size
Cairo University, FEPS, 2006
23
Understanding Computers
Video (1)
Continuous stream of visual information that is broken into separate images or frames when the video is recorded When projected at a rate of 30 frames per second, the effect is smooth reconstruction of the original continuous stream of information Can be recorded using analog video camera the converted to digital form or using digital video camera directly Streaming video is often used on Web pages
Cairo University, FEPS, 2006
24
Understanding Computers
Video (2)
Usually very large files thus are often compressed Video Formats include
.avi (Audio-Video Interleave format): Standard video file format developed by Microsoft .mov (QuickTime format): Versatile format developed by Apple. Widely used on Web .rm (Real format): Highly compressed format used for streaming video files
Used on the web to deliver television shows, news broadcasts, tours of products, …
Cairo University, FEPS, 2006
25
Understanding Computers
Recall: Chapter Overview
What is web-based multimedia
Advantages and disadvantages of using multimedia
Multimedia Elements Text, graphics, Animation, Audio, Video
Multimedia web site design (Lecture!) Multimedia web site development
The future of web-based multimedia
Cairo University, FEPS, 2006
26
Understanding Computers
Multimedia Web Site Design
Process of planning what your web site will look like and how it will work Time spent designing a site on paper before starting to develop pays off in the long run Includes
Basic design principles Determining the intended audience and objectives Using flowcharts, page layouts, and storyboards Navigational design considerations Access considerations
Cairo University, FEPS, 2006
27
Understanding Computers
Basic Design Principles (1)
Users like interesting information (valuable and of interest) and exciting applications (stimulating experience)
Interest and excitement wear off over time! Visitors then will give up visiting your site So important to refresh contents regularly with new information
Users have little patience with slow-to-load or hardto-use applications.
Web pages should load quickly. Standard total file size is 30KB to load in 30 secs or less. So select your multimedia elements carefully and modify when necessary Intuitive design (standardization!) Clear consistent navigational tools Information in logical order
Cairo University, FEPS, 2006
28
Understanding Computers
Basic Design Principles (2)
Consider the device used by your target audience
E.g. contrast web sites for handheld PCs with 2inch screens with those for desktop PCs
So, one-size-fits-all web site is not acceptable
Consider web browsers and settings might be used by visitors. So consider
Features requiring a special browser
Avoid features not supported by common browsers Have different versions of the web page, detect (using JavaScript) the visitor’s browser, and display the appropriate version 29 Understanding Computers Cairo University, FEPS, 2006
Basic Design Principles (3)
Consider web browsers and settings might be used by visitors. So consider (Cont.)
Features requiring little used plug-ins
Users tolerate downloading common plug-ins, e.g. Acrobat Reader, Flash Player, QuickTime Player) but not other uncommon ones
The size of the page content not to make users scroll too much High bandwidth items
Don’t show unnecessary images or multimedia; THEY ONLY ANNOY VISITORS If necessary, allow the user to decide to access them Use techniques such as thumbnail images or streaming for audio and video files
Cairo University, FEPS, 2006
30
Understanding Computers
Determining the Intended Audience and Objectives
Intended audience greatly affects the appearance: style, graphics, fonts, colors,… and of course the content
Think of how naive or professional they might be Carefully consider your objectives, keep them always in mind, and never deviate
Cairo University, FEPS, 2006
31
Understanding Computers
Using Flowcharts, Page Layouts, and Storyboards (1)
The structure and layout of the site are designed based on the objectives, intended audience, and basic contents Use flowcharts, page layouts, and storyboards tools Flowcharts, in web sites, describe how the pages relate to each other
Cairo University, FEPS, 2006
32
Understanding Computers
- Each box represents a separate web page - Lines between them show which pages logically link (hyperlinks). The following is a flowchart for bed and breakfast web site
Home Page
Rooms
Maps
Three Rivers
Cairo University, FEPS, 2006
33
Reservations
National Park Understanding Computers
Using Flowcharts, Page Layouts, and Storyboards (2)
Page layouts are used for web pages Storyboard are used for multimedia components Both are sketches done by hand or on computer to illustrate the layout and navigational structure of the site or application
For web sites, two layouts are created
For the home page For the other pages on the site
For multimedia components, e.g. a game or product demo a storyboard (ordered series 34 Understanding Computers Cairo FEPS, 2006 ofUniversity, sketches of each page or screen)
Navigationa l Buttons Home Rooms Maps
Bed & Breakfast Page banner Photo of B & B
Reservations
Contact info
Page Text
Text-based navigational bar Update and copyright info Cairo University, FEPS, 2006
35
Understanding Computers
Navigational Design Consideration
Enough main topics are needed to keep the information organised But not so many that users have difficulty finding what they are looking for Users should be able to get to the most pages within 3 mouse clicks For large web sites, uses navigational tools. E.g.
menus, site maps (table of contents pages that contain links to all main pages on the site), search boxes, image maps (single images with separate areas linked to different locations), hyperlinks that display more options or a description when pointed to them
Cairo University, FEPS, 2006
36
Understanding Computers
Navigational Design Consideration
See page 434-436
Cairo University, FEPS, 2006
37
Understanding Computers
Access Consideration (1)
When designing multimedia we consider Device Compatibility Assistive Technology
Device Compatibility (recall!)
Mobile devices cannot display regular HTML, instead use wireless markup language (WML) Include links to required plug-ins to 38 Understanding Computers Cairo University, FEPS, 2006 download or new versions of browsers
Access Consideration (2)
Assistive Technology Consider users with physical disabilities E.g. screen reader software that reads aloud everything displayed, but reads text only Graphics must be identified with alternative text description, so with video or animation Consider they might been using other devices instead of keyboard and mouse
Cairo University, FEPS, 2006
39
Understanding Computers
Recall: Chapter Overview
What is web-based multimedia
Advantages and disadvantages of using multimedia
Multimedia Elements Text, graphics, Animation, Audio, Video
Multimedia web site design (Lecture!) Multimedia web site development (Lecture!)
The future of web-based multimedia
Cairo University, FEPS, 2006
40
Understanding Computers
Multimedia Web Site Development
To create the web site after designing it Could be performed in-house if appropriate skills and software are available By a professional web developer
Includes 3 basic steps
Creating the multimedia elements Creating the web site Testing and maintaining the site 41 Understanding Computers Cairo University, FEPS, 2006
Creating the Multimedia Elements
Create all graphics, animated components, video files, and audio files
Several software could be used
Graphics Software: create and modify images
Audio & Video Editing Software: create finished sound and video clips
Adobe Photoshop, Windows Paint, corelDRAW
Windows Sound Recorder, Sony Pictures
Animation Software: create animated elements
Macromedia Flash, Adobe LiveMotion
Cairo University, FEPS, 2006
42
Understanding Computers
Creating the Web Site
Web site development/authoring software
Most web pages are written in a markup language
A coding system used to define
Structure Layout General appearance of the content of a web page
Markup tags are used to identify where elements are to be displayed ad their general appearance
Scripting languages can be used to add dynamic content to a web page
Cairo University, FEPS, 2006
43
Understanding Computers
Web Site Development Software
Creating complex web pages containing tables, frames, animation, input forms, and that are linked to database by typing is a difficult task Development software facilitates the task; similar to using a word processing program Such programs automatically generate HTML statements when options are selected Similarly, JavaScripts, DHTML, or other code is automatically generated Also for testing for broken links (links to nonexisting web pages) Can be used to quickly publish the entire site onto the web server E.g. Microsoft FrontPage and Macromedia Dreamweaver
Cairo University, FEPS, 2006
44
Understanding Computers
Cairo University, FEPS, 2006
45
Understanding Computers
Markup Languages (1)
Hypertext Markup Language (HTML)
Fully discussed in sections!
Other markup languages can be used as a replacement for or in conjunction with HTML to create web pages Dynamic HTML (DHTML) Extensible Markup Language (XML) Extensible Hypertext Markup Language (XHTML) Wireless Markup Language (WML)
Cairo University, FEPS, 2006
46
Understanding Computers
Markup Languages (2)
Dynamic HTML (DHTML)
A combination of HTML, style sheets, and scripts that allows documents to be animated