1. Perancangan Multimedia untuk World Wide Web Pertemuan 21&22 Matakuliah: O0414 - Computer / Multimedia Tahun: Feb - 2010

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

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

4. WWW Terminology URL Web page HTML Web browser Plug-ins Bina Nusantara

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

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

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

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

9. Bina Nusantara HTML Extentions DHTML (Dynamic HTML) XML (eXtensible Markup Language) SMIL (Synchronized Multimedia Integration Language) VRML (Virtual Reality Markup Language)

10. 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 : –Internet Explorer –Netscape Navigator –Safari –Mozilla Firefox –Opera –Google Chrome Bina Nusantara

11. 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 Bina Nusantara Often perceived as a hassle because user usually has to download and install the plug-in then restart their web browser.

12. Bina Nusantara Authoring Tools for WWW Macromedia Dreamweaver Microsoft Frontpage

13. Bina Nusantara Design Issues Different Browsers Monitor and Window size Bandwidth Accessibility Usability

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

15. Bina Nusantara Browser Statistic IE 651% IE 721% Firefox12% Netscape11% Safari3% IE 51% Opera1% Mobile0.3% http://www.thecounter.com/ http://www.upsdell.com/BrowserNews/stat.htm

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

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

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

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

20. Bina Nusantara Accessibility – ALT text

21. Bina Nusantara

22. The Ten Most Violated Homepage Design Guidelines by Jacob NielsenJacob 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

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

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

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

26. Bina Nusantara Animation for Web HTML Tag : and 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.

27. Bina Nusantara 3D for Web VRML Macromedia Director

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

29. 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, http://bee-tube.binus-access.com/www.youtube.comhttp://bee-tube.binus-access.com/

30. Bee Tube Bina Nusantara

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

32. Bina Nusantara Good or Bad?

33. Exercise Explore Notepad and Microsoft Frontpage and make a comparison of both applications as WWW authoring tools Bina Nusantara