Matakuliah
Tahun
: O0414 - Computer / Multimedia
: Feb - 2010
Perancangan Multimedia untuk
World Wide Web
Pertemuan 21&22
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 Terminology
•
•
•
•
•
URL
Web page
HTML
Web browser
Plug-ins
Bina Nusantara
URL
• Uniform Resource Locator
• Internet address
• includes the type of resource being accessed, the
address of the server and location of file on the server.
• Example : http://www.binus.edu
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
HTML Extentions
•
•
•
•
DHTML (Dynamic HTML)
XML (eXtensible Markup Language)
SMIL (Synchronized Multimedia Integration Language)
VRML (Virtual Reality Markup Language)
Bina Nusantara
Web browser
• Applications that run on a user’s computer to provide the
interactive graphical interface for searching, finding, and
viewing text documents, sounds, animations, and other
multimedia resources on the Web
• Noteable browsers :
–
–
–
–
–
–
Bina Nusantara
Internet Explorer
Netscape Navigator
Safari
Mozilla Firefox
Opera
Google Chrome
Plug-ins
• Allowing users to view and interact with new types of
documents and images
• Designed to perform special tasks not available without
the plug-in installed
• Often perceived as a
hassle because user
usually has to download
and install the plug-in
then restart their web
browser.
Bina Nusantara
Authoring Tools for WWW
• Macromedia Dreamweaver
• Microsoft Frontpage
Bina Nusantara
Design Issues
•
•
•
•
•
Different Browsers
Monitor and Window size
Bandwidth
Accessibility
Usability
Bina Nusantara
Different Browsers
• Not all web browsers support
proprietary features, eg
different implementations of
DHTML
• Browser settings affect final
product
–
–
–
–
–
Bina Nusantara
Fonts selected and installed
Colour of background
Hypertext colours
Autodownloading images
Window size
Browser Statistic
Bina Nusantara
IE 6
IE 7
Firefox
Netscape
51%
21%
12%
11%
Safari
IE 5
Opera
Mobile
3%
1%
1%
0.3%
http://www.thecounter.com/
http://www.upsdell.com/BrowserNews/stat.htm
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
Bina Nusantara
The Ten Most Violated Homepage Design Guidelines
by 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 size
3. Use color to distinguish visited and unvisited links
4. Use graphics to show real content, not just to decorate your homepage
5. Include a tag line that explicitly summarizes what the site or company does
6. Make it easy to access anything recently featured on your homepage
7. Include a short site description in the window title
8. Don't use a heading to label the search area; instead use a "Search"
button to the right of the box
9. With stock quotes, give the percentage of change, not just the points
gained or lost
10. 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
–
–
–
–
–
Bina Nusantara
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
Video for Web
• The largest multimedia element in size
• Low bandwidth video requires compression
– Choose the most commonly used compression
• Streaming Technology
–
–
–
–
–
Bina Nusantara
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, http://bee-tube.binus-access.com/
Bee Tube
Bina Nusantara
Good and Bad Websites
• http://www.coolhomepages.com/
• http://www.webpagesthatsuck.com/
Bina Nusantara
Good or Bad?
Bina Nusantara
Exercise
• Explore Notepad and Microsoft Frontpage and make a
comparison of both applications as WWW authoring
tools
Bina Nusantara