Audio and Video Audio and Video Careful all

Audio and Video

Audio and Video • Careful: all of these are bandwidth hogs. • Many need plug-ins: programs that add functions to your browser. – Example: Real. Player, www. real. com 2

Audio and Video • Common types: –. swf (. fla in native format) Flash files, vector-based (efficient) animation (particularly if created intelligently), resizes to the size of the window, needs plug-in on the client, requires Macromedia’s Flash program to create. –. dcr Shockwave files, needs plug-in on the client, requires Macromedia’s Shockwave program to create. – ? ? ? Java applets, small Java programs, future versions of IE will not run without downloading a 3 plug-in.

Audio and Video –. wav Sound files, native to Windows. –. ra and. rm (and others) Real. Audio, defacto standard for streaming audio data on the web, requires player from Real Networks on client (included in current versions of both Navigator and IE). –. mid MIDI, Musical Instrument Digital Interface, standard for the electronic music industry, potentially very high quality sound that requires very large files. –. au Audio files for Unix and the Java language. 4

Audio and Video –. avi For storing video on audio information on Windows. Low quality sound, resolution, and frames per second, but doesn’t require a plug-in. –. mov Quick. Time for movie clips, a higher quality than. avi, but requires the Quick. Time plug-in on the client. –. mp 3 MPEG, Moving Picture Experts Group, highest quality for video, high compression rate is possible using lossy techniques that are usually invisible to the human eye. • MPEG-1 is quality slightly below that of standard video. • MPEG-2 is the equivalent of video and is used by DVDROMs. • Proposed MPEG-4 will be based on Quick. Time. 5

Audio and Video • Avoid using unless: – They are the point of the site, like audio for a rock group site, or – They are being limited to use on an intranet with high bandwidth. • There, they can be used for video conferencing, distributing video of meetings, live chat, etc. 6

Audio and Video • If you insist on using audio or video, ask the visitor before downloading the file. – The visitor might not want to wait. – The visitor might not want to download the necessary player. – The visitor might be at work, where audio just tells everyone within earshot that someone is fooling around on the web. – On video, allow the visitor to turn off the sound before it executes. 7

Audio and Video • For Pete’s sake, don’t use an audio file that is copyrighted unless you obtain permission from the copyright holder! • For legal ramifications, see http: //home. earthlink. net/~ivanlove/mu sic. html • Streaming audio/video: some downloads before the play starts, and the rest downloads in the background. – Will get interruptions if it can’t keep up. 8

Tools for Creating Web Pages

WYSIWYG Editors • Original versions were: – Hard to use. – Created really bad and/or non-standard HTML. – Sometimes would not allow editing the HTML manually. – Often summarily changed the HTML code that you did edit. 10

WYSIWYG Editors • The latest versions of virtually all editors are much more friendly these days, although you will still use HTML to tweak and debug. • Popular software… 11

WYSIWYG Editors • Macromedia’s Dreamweaver and Dreamweaver Ultra. Dev (the database access version). – The HTML can be exported to run on virtually any common web server. 12

WYSIWYG Editors • Microsoft’s Front. Page (consumer edition) and Inter. Dev (the professional IDE). – Microsoft-centric: work best with other MS products. • Allaire’s Homesite: – Allaire – the people who own Cold. Fusion. – A good environment, but probably going to be merged with Dreamweaver now. 13

WYSIWYG Editors • Net. Objects’ Fusion, for both Windows and Mac platforms. – Not compatible with other editors – you must continue to edit your site with Fusion – but it was one of the first tools available for building and managing bigger, more complex sites. 14

WYSIWYG Editors • IBM’s Websphere Studio. – Can be used to create a straight HTML file, but really intend for building Java. Server Pages (Java, not Java. Script) for data access. 15

WYSIWYG Editors • Allaire’s Cold. Fusion Studio: – Easy to learn and use by the average programmer. – For developing applications, not just static web pages. – Can be used only with a Cold. Fusion application server because it uses proprietary tags for data access. 16

WYSIWYG Editors • All kinds of other editors – avoid because they may not be as robust or around all that long. • Online editors provided free by Web hosts – the quality varies widely and you may not be able to export the site later if you change servers. 17

Miscellaneous Stuff

Tracking Site Activity • Use specialized software (on the web server) to track visitor activity on the site. • But be wary of analyzing the stats you come up with – they can be misleading. – If a visitor spends 30 minutes on your site, is that good or bad? • Depends – was that visitor having a good time, or was the visitor lost for 25 of the 30 minutes? 19

Tracking Site Activity • For example, if a visitor makes it all the way to checkout and then bails, is it because – The visitor was afraid your site was not secure, and therefore didn’t want to reveal a credit card number? – Or, the site failed to give a grand total, including miscellaneous charges like shipping and taxes? 20

Gathering Data about Visitors • It is smart marketing to gather as much data about visitors as possible. • At the same time, we need to be conscious of respecting visitor’s privacy. 21

Gathering Data about Visitors • For example, Amazon maintains information about what I have bought in the past. • When I log in, Amazon suggests similar books that I might like. – Is that good marketing or an invasion of my privacy? – Personalization such as this is an important trend in e-commerce. 22

Gathering Data about Visitors • It’s smart marketing to try to get at least the visitor’s name and email, if the visitor agrees. 23

The Bottom Line on Web Application Design • Don’t let poor interface design make visitors feel that you are playing dirty tricks on them! 24

References • www. infinitefish. com • www. webmonkey. com • www. webspinner. com • For design inspiration: – ideaindex: graphic effects and typographic treatments, by Jim Krause. North Light Books, Cincinatti, Ohio. 25

The Good, the Bad, and The Ugly • Interesting sites. . . Some good, some bad, some just interesting. • www. pepsi. com/ • www. cigaraficionado. com • www. 4 adodge. com • www. cadm. org • www. godiva. com • www. ironfish. com 26

The Good, the Bad, and The Ugly • • • www. chanel. com www. disney. com www. geneca. com www. wildoats. com/wild_cuisine/ www. mercedes-benz. com/e/default. htm www. benjerry. com www. marchfirst. com www. harrypotter. warnerbros. com 27 www. elicheesecake. com

The Good, the Bad, and The Ugly • • • http: //www. webbyawards. com/main/ www. crouchingtiger. com www. blueman. com www. xbox. com www. razorfish. com www. scient. com http: //reticulum. net/wso/ www. jaguar. com www. eastman. org www. kodak. com 28

The Good, the Bad, and The Ugly • • • www. lemonjelly. ky www. airside. co. uk (check out the dancers) www. whitecube. com http: //www. wedding-invite. com/ http: //www. weddinginvite. com/invitations~99. html http: //welcomesite. com/ http: //www. medmaninc. com/ http: //www. onthewaterfront. com/ http: //www. pointroll. com/ 29

The Good, the Bad, and The Ugly • sms. humberc. on. ca/main. htm • www. culture. fr/culture/arcnat/lascaux/e n/ • www. prenhall. com/deitel/ • www. metrocentre. com/ • www. websitedesign. com • www. 37 signals. com • www. art-barn. com 30