1 / 26

Perancangan Multimedia untuk World Wide Web Pertemuan 12

Perancangan Multimedia untuk World Wide Web Pertemuan 12. Matakuliah : T0732 / Sistem Multimedia Tahun : 2007. Learning Outcomes. Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : menyesuaikan desain aplikasi multimedia untuk penggunaan di World Wide Web . Outline Materi.

vanya
Download Presentation

Perancangan Multimedia untuk World Wide Web Pertemuan 12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Perancangan Multimedia untuk World Wide Web Pertemuan 12 Matakuliah : T0732 / Sistem Multimedia Tahun : 2007

  2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • menyesuaikan desain aplikasi multimedia untuk penggunaan di World Wide Web

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

  4. 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.

  5. 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

  6. 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

  7. 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

  8. Authoring Tools for WWW • Macromedia Dreamweaver • Microsoft Frontpage

  9. 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

  10. 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

  11. Browser Statistic http://www.thecounter.com/ http://www.upsdell.com/BrowserNews/stat.htm

  12. 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)

  13. 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.

  14. 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.

  15. 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

  16. Accessibility – ALT text

  17. The Ten Most Violated Homepage Design Guidelinesby Jacob Nielsen • Emphasize what your site offers that's of value to users and how your services differ from those of key competitors • Use a liquid layout that lets users adjust the homepage size • Use color to distinguish visited and unvisited links • Use graphics to show real content, not just to decorate your homepage • Include a tag line that explicitly summarizes what the site or company does • Make it easy to access anything recently featured on your homepage • Include a short site description in the window title • Don't use a heading to label the search area; instead use a "Search" button to the right of the box • With stock quotes, give the percentage of change, not just the points gained or lost • Don't include an active link to the homepage on the homepage

  18. 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

  19. 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.

  20. 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

  21. 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.

  22. 3D for Web • VRML • Macromedia Director

  23. 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

  24. 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

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

  26. Good or Bad?

More Related