Perancangan Multimedia untuk World Wide Web

Pertemuan 12

Matakuliah : T0732 / Sistem MultimediaTahun : 2007

Bina Nusantara

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu :• menyesuaikan desain aplikasi multimedia untuk

penggunaan di World Wide Web

Bina Nusantara

Outline Materi• Teknologi WWW• Authoring Tools untuk WWW• Desain untuk WWW• Konsiderasi untuk Elemen-Elemen Multimedia

Bina Nusantara

WWW Technology• HTML (HyperText Markup Language)

– DHTML (Dynamic HTML)– XML (eXtensible Markup Language)– SMIL (Synchronized Multimedia Integration Language)– VRML (Virtual Reality Markup Language)

• Browser supports– Plug-in media handlers: allows movies, multimedia files to be

viewed via native browser, ex : shockwave plugin, Quicktime VR, real audio, acrobat reader

– JAVA Script: allows transfer of applets, small programs via HTTP and execute in browser.

Bina Nusantara

Web Pages• Web pages are made up of basic text documents• Can be created in any text editor such as Notepad• Multimedia elements (except text) are stored external to the

document• HTML defines the format (look) and functionality (feel) of web

pages and provides the links to external resources

Bina Nusantara

HTML Advantages• Small file sizes• Does not require expensive authoring tools• Web space is inexpensive• Does not require programming skills• Provides links to external locations & downloads• Once uploaded, provides “Instant Publication”• Can be viewed on any computer with free web browsing

software

Bina Nusantara

HTML Disadvantages• What you design will not

necessarily appear the same on every computer!

• No single HTML standard• Different browsers support

different/unique HTML tags• Different hardware affects

final result• Hypertext only provides

limited interaction

Bina Nusantara

Authoring Tools for WWW

• Macromedia Dreamweaver• Microsoft Frontpage

Bina Nusantara

Design Issues

• Different Browsers• Monitor and Window size• Bandwidth• Accessibility• Usability

http://www.apis.ca/Understanding_Websites/Good_Sites_Bad_Sites/What_makes_a_good_website.htm

Bina Nusantara

Different Browsers• Not all web browsers support

proprietary features, eg different implementations of DHTML

• Browser settings affect final product– Fonts selected and installed– Colour of background– Hypertext colours– Autodownloading images– Window size

Bina Nusantara

Browser Statistic

IE 6 51%IE 7 21%Firefox 12%Netscape 11%Safari 3%IE 5 1%Opera 1%Mobile 0.3%

http://www.thecounter.com/http://www.upsdell.com/BrowserNews/stat.htm

Bina Nusantara

Monitor and Window Issues• Many people are surfing the web with various screen

resolution and different sized window screens.• Recommendation use liquid design when designing

your web pages. • You may want to design for the commonly used screen

resolution.• Personal Digital Assistants (eg Palm, Windows CE, and

other WAP devices have small low resolution screens)

Bina Nusantara

Liquid Design• Liquid design the web site adapts itself to the

available space, the same way water takes the shape of the glass it is in.

Bina Nusantara

Bandwith• The rule of thumb for a person using a 28.8k modem is 2

kps to transfer web graphics.• Example : a standard 40k graphic might take 20

seconds to display on your users browser.

Bina Nusantara

Accessibility Issues• Visual Impaired Users

– Cannot access images that are used to convey content or to assist navigation

– Have difficulty distinguishing important screen elements or text where background images are used.

• Solution– Provide ALT text for short descriptions of graphics, use & Longdesc

attributes or links out for longer pieces– Lots of motion, flashing etc can be disconcerting so avoid client-based

refresh & redirection, lots of animated gifs etc– Avoid using frames or unnecessary tables

• How accessible is your site? http://www.w3.org/WAI/ER/existingtools.htm

Bina Nusantara

Accessibility – ALT text

Bina Nusantara

The Ten Most Violated Homepage Design Guidelinesby Jacob Nielsen

1. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors

2. Use a liquid layout that lets users adjust the homepage size3. Use color to distinguish visited and unvisited links4. Use graphics to show real content, not just to decorate your homepage5. Include a tag line that explicitly summarizes what the site or company does6. Make it easy to access anything recently featured on your homepage7. Include a short site description in the window title8. Don't use a heading to label the search area; instead use a "Search"

button to the right of the box9. With stock quotes, give the percentage of change, not just the points

gained or lost10. Don't include an active link to the homepage on the homepage

Bina Nusantara

Text for Web• Users may choose to view the website in their preferred font (done

by setting user preference in the browser)• Standard font face : Times New Roman, Courier, etc• For flexibility in font management : CCS (Cascading Style Sheets)

– CCS is available in DHTML

Bina Nusantara

Images for Web• Standard format : GIF, PNG, JPEG• Other format may require special plug-ins.• GIF and PNG are lossless and support transparency• PNG GIF replacement• JPEG lossy compression, ten times more compressed than

GIF• Macromedia Fireworks is designed specifically for creating

graphics for web pages.

Bina Nusantara

Sound for Web

• Standard format : AU, Wav, MIDI embedded • MIDI is commonly used for background music• Wav is big in size

– 11khz, 8 bit mono reduced quality but still audible• Using plugin : Shockwave Audio (swa),

QuickTime

Bina Nusantara

Animation for Web• HTML Tag : <blink> and <marquee>• Javascript• Animated GIF (GIF89) can be used to make simple cell

animations• Animation Plug-ins/players : Director, Flash,

QuickTimeVR

Note : While animation is good for attracting user’s attention, take care not to use blinking animation for reading text.

Bina Nusantara

3D for Web• VRML • Macromedia Director

Bina Nusantara

Flash or non-Flash?• Flash Advantages

– Current Trend– Great Design– Full control and flexibility for designers to design interactions with

users

• Flash issues– Long download for slow internet connection users– Need additional plug-in– Different version requires different plug-ins– Can’t accommodate large amount of text– Difficult/Impossible for visually impaired users to browse

Bina Nusantara

Video for Web• The largest multimedia element in size• Low bandwidth video requires compression

– Choose the most commonly used compression

• Streaming Technology– Data ‘streams’ from the server to the player– The player commences playing while data is still streaming– Audio streaming uses a buffer– Video streaming uses a bigger buffer– Example : www.youtube.com

Bina Nusantara

Good and Bad Websites• http://www.coolhomepages.com/• http://www.webpagesthatsuck.com/

Bina Nusantara

Good or Bad?