Scribd
Upload
53 views26 pages

Perancangan Multimedia Untuk World Wide Web Pertemuan 11

This document discusses designing multimedia applications for the World Wide Web. It covers: 1. Technologies used for the World Wide Web like HTML, XML, and browsers/plugins. 2. Authoring tools for creating web pages like Dreamweaver and Frontpage. 3. Design considerations for the web like different browsers, screen sizes, bandwidth, accessibility and usability. Elements like images, sound, animation, video are discussed.

Uploaded by

Brian Adyatma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
53 views26 pages

Perancangan Multimedia Untuk World Wide Web Pertemuan 11

This document discusses designing multimedia applications for the World Wide Web. It covers: 1. Technologies used for the World Wide Web like HTML, XML, and browsers/plugins. 2. Authoring tools for creating web pages like Dreamweaver and Frontpage. 3. Design considerations for the web like different browsers, screen sizes, bandwidth, accessibility and usability. Elements like images, sound, animation, video are discussed.

Uploaded by

Brian Adyatma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Perancangan Multimedia untuk

World Wide Web


Pertemuan 11
Learning Outcomes

Pada akhir pertemuan ini, diharapkan


mahasiswa akan
mampu :
menyesuaikan desain aplikasi multimedia
untuk penggunaan di World Wide Web
Outline Materi
Teknologi WWW
Authoring Tools untuk WWW
Desain untuk WWW
Konsiderasi untuk Elemen-Elemen Multimedia
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.
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
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
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
Authoring Tools for WWW
Macromedia Dreamweaver
Microsoft Frontpage
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
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
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
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)
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.
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.
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


Accessibility ALT text
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
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
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.
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
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


users attention, take care not to use blinking
animation for reading text.
3D for Web
VRML
Macromedia Director
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
Cant 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
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
Good and Bad Websites
http://www.coolhomepages.com/
http://www.webpagesthatsuck.com/
Good or Bad?

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy